@charset "utf-8";
/*마이프로필 css*/

.profile_wrap{width: 720px; margin: 0 auto; margin-bottom: 40px; margin-top: 20px;}
.profile_wrap .profile_box{display:flex; gap:80px; padding: 0 20px;}
.profile_wrap .left{width: 160px; position: relative;}
.profile_wrap .left a{display: inline-block; position: absolute; bottom:0; right:-10px;}
.left_pfimg{width: 148px; border-radius:100%; overflow: hidden; aspect-ratio: 1/ 1;}
.left_pfimg img{width: 100%;height: 100%;  object-fit: cover;}

.profile_wrap .right{width: 100%;}
.profile_wrap .right h3{font-size: 36px; line-height: 46px; font-weight: 500;}

.profile_wrap .right .list{width: 100%; display:flex;justify-content:space-around;  margin-top: 10px;}
.profile_wrap .right .list div{display:flex; flex-direction:column; align-items:center; gap:5px;}
.profile_wrap .right .list p {font-size: 30px; line-height: 42px; text-align:center; font-weight:400;}
.profile_wrap .right .list span{font-size: 36px; line-height: 46px;}
.scrap{cursor:pointer;}


.myself{margin-top: 20px; font-size: 25px; line-height: 35px; padding:10px 25px; }
.btn_wrap{width: 100%; display:flex; justify-content:space-between; margin-top: 60px; gap:10px;padding: 0 20px;}
.btn_wrap div{ text-align:center; padding: 14px 0;border:1px solid rgba(204,204,204,0.1); border-radius:4px; cursor:pointer;}
.btn_wrap div p{font-size: 30px; line-height: 42px; }
.btn_wrap .profile_edit{background: #f5f5f5;width: 50%;}
.btn_wrap .profile_edit a{color:#767676;}
.btn_wrap .post_register{background: #3DA4E4; width: 50%; }
.btn_wrap .post_register a{color:#fff;}
.btn_wrap .profile_friend{width: 100%;  }

.pfbtn01{background:#f5f5f5;}
.pfbtn01 a{color:#767676 }

.pfbtn02{background: #3DA4E4;}
.pfbtn02 a{color:#fff }

.pfbtn03{background: #AC58D4;}
.pfbtn03 a{color:#fff }

.tab_btn{width: 100%; display:flex; justify-content:space-between; margin-top: 50px; padding: 0 20px; border-bottom: 1px solid #f8f8f8;}
.tab_btn div{width: 50%; padding: 20px 0;text-align:center;}
.tab_btn div a{display: inline-block; }
.tab_btn div.on{border-bottom: 3px solid #D9D9D9;}
.contents{padding-bottom:103px;}

.gallay_wrap {display: none;}
.gallay_contents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;}
.gallay_contents div {aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer;}

.gallay_contents div img {width: 100%;height: 100%;object-fit: cover;} 

.gallay_contents > a{position: relative;}
.gallay_contents > a .iconi{width: 100%; height: 43px; position: absolute;top:5px;left:0; display:flex; justify-content:flex-end; align-items: center;gap:2px; padding-right: 5px; }
.gallay_contents > a .iconi img{width: 43px;}

.gallay_contents > a .lock{width: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left:0;		}
.gallay_contents > a .lock:after{content:'';width: 150px; height: 150px; position: absolute;top:50%; left:50%; transform:translate(-50%,-50%); 
background: url("/images/lock.png")no-repeat center center; background-size: cover;}


.share_wrap {display: none;}
.share_contents { display: grid; grid-template-columns: repeat(3, 1fr);gap: 2px; }
.share_contents div {aspect-ratio: 1 / 1;  overflow: hidden;}
.share_contents div img { width: 100%;height: 100%;object-fit: cover;}
.share_contents > a{position: relative;}
.share_contents > a .multi{position: absolute;top:5px; right:5px;}

.hold_wrap{width: 100%; padding: 0 20px;}
.hold{width: 100%; padding: 30px 20px; display:flex; justify-content:space-around; align-items:center;gap:20px;
margin-top: 30px;  box-shadow: 2px 4px 10px rgba(204, 204, 204, 0.5); border-radius:4px;}
.hold div{width: 100%; display:flex; align-items:center; flex-direction:column;}
.hold div p{font-size: 28px; line-height: 36px;}
.hold div span{font-size: 30px; line-height: 42px; font-weight: 600;}
.hold div a{display: block;width: 100%; height: 70px; background: #f5f5f5; color:#222222; text-align:center;line-height: 70px;  font-size: 30px; margin-top: 20px;}
.hold .showr{position: relative;	}
.hold .showr:after{content:''; position: absolute; width: 1px; height: 40%; background: #cccccc; top:0; right:-10px; }

.emptyy{width: 100%; font-size: 30px; line-height: 42px;  grid-column: span 3;  padding: 20px; }

.no-grid {display: block;}
.no_box{width: 100%; min-height: 50vh; position: relative;}
.no_box .no_p{display: inline-block;width: 100%; font-size:33px; line-height:46px; color:#999999; font-weight: 500; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
text-align:center;}

.disabled {
    pointer-events: none; /* 클릭 불가능 */
  
}

@media screen and (max-width: 720px) {




.profile_wrap{width: 100%; margin: 0 auto; margin-bottom: 5.5556vw; margin-top: 2.7778vw;}
.profile_wrap .profile_box{ gap:11.1111vw; padding: 0 2.7778vw;}
.profile_wrap .left{width: 22.2222vw; }

.profile_wrap .left a{  bottom:0; right:-2.7778vw;}
.profile_wrap .left a > img{width: 10.4167vw;}
.left_pfimg{width: 20.5556vw; border-radius:100%;  aspect-ratio: 1/ 1;}
.left_pfimg img{width: 100%;height: 100%;  object-fit: cover;}

.profile_wrap .right{width: 100%;}
.profile_wrap .right h3{font-size: 5.0000vw; line-height: 6.3889vw; }

.profile_wrap .right .list{width: 100%; justify-  margin-top: 1.3889vw;}
.profile_wrap .right .list div{ flex-direction:column; align-items:center; gap:0.6944vw;}
.profile_wrap .right .list p {font-size: 4.1667vw; line-height: 5.8333vw;  }
.profile_wrap .right .list span{font-size: 5.0000vw; line-height: 6.3889vw;}

.myself{margin-top: 2.7778vw; font-size: 3.8889vw; line-height: 4.8611vw; padding:1.3889vw 3.4722vw; }
.btn_wrap{width: 100%; margin-top: 4.1667vw; gap:1.3889vw;padding: 0 2.7778vw;}
.btn_wrap div{width: 50%;  padding:2.2222vw 0;border:0.1389vw solid rgba(204,204,204,0.1); border-radius:0.5556vw; cursor:pointer;}
.btn_wrap div p{font-size: 4.1667vw; line-height: 5.8333vw; }
.btn_wrap .profile_edit{background: #f5f5f5; }
.btn_wrap .post_register{background: #3DA4E4;  }

.tab_btn{width: 100%;  margin-top: 6.9444vw; padding: 0 2.7778vw;}
.tab_btn div{width: 50%; padding: 2.7778vw 0;}
.tab_btn div a img{width: 7.0833vw; }
.tab_btn div.on{border-bottom: 0.8333vw solid #D9D9D9;}

.contents{padding-bottom:14.3056vw;}

.gallay_wrap {}
.gallay_contents {  grid-template-columns: repeat(3, 1fr); gap: 0.2778vw;}
.gallay_contents div {aspect-ratio: 1 / 1; }
.gallay_contents div img {width: 100%;height: 100%;object-fit: cover;} 

.share_wrap {}
.share_contents {  grid-template-columns: repeat(3, 1fr);gap: 0.2778vw; }
.share_contents div {aspect-ratio: 1 / 1;  }
.share_contents div img { width: 100%;height: 100%;object-fit: cover;}


.hold_wrap{width: 100%; padding: 0 2.7778vw;}
.hold{width: 100%; padding: 4.1667vw 2.7778vw; align-items:center;gap:2.7778vw;
margin-top: 4.1667vw;  box-shadow: 0.2778vw 0.5556vw 1.3889vw rgba(204, 204, 204, 0.5); border-radius:0.5556vw;}
.hold div{width: 100%;  align-items:center; flex-direction:column;}
.hold div p{font-size: 3.8889vw; line-height: 5.0000vw;}
.hold div span{font-size: 4.1667vw; line-height: 5.8333vw; }
.hold div a{width: 100%; height: 9.7222vw; background: #f5f5f5;  line-height: 9.7222vw;  font-size: 4.1667vw; margin-top: 2.7778vw;}

.hold .showr:after{  width: 0.1389vw; height: 40%; background: #cccccc; top:0; right:-1.3889vw; }
.emptyy{width: 100%; font-size: 4.1667vw; line-height: 5.8333vw;  grid-column: span 3;  padding: 2.7778vw; }

.no_box{width: 100%; min-height: 50vh; }
.no_box .no_p{width: 100%; font-size:4.5833vw; line-height:6.3889vw;    top:50%; left:50%; transform:translate(-50%,-50%);}

.gallay_contents > a .iconi{width: 100%; height: 5.9722vw; top:0.6944vw;left:0;  justify- align-items: center;gap:0.2778vw; padding-right: 0.6944vw; }
.gallay_contents > a .iconi img{width: 5.9722vw;}
.gallay_contents > a .lock:after{width: 20.8333vw; height: 20.8333vw; top:50%; left:50%; transform:translate(-50%,-50%); 
background: url("/images/lock.png")no-repeat center center;background-size:cover;	 }

.share_contents > a .multi{top:0.6944vw; right:0.6944vw; width: 5.9722vw;}
}