@charset "utf-8";
/*친구목록 css*/

.friendlist_wrap{width: 720px; margin: 0 auto;  position: relative;   max-height: calc(100vh - 100px); overflow-y: auto;}
.friendlist_wrap .store_profile{padding: 20px;display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.friendlist_wrap .store_profile .left{width: 100%; display:flex; align-items:center;justify-content:space-between; margin-bottom: 20px;}
.friendlist_wrap .store_profile .left .left_a{display:flex; align-items:center; gap:15px;}
.friendlist_wrap .store_profile .left .profile{width: 100px; border-radius:100%; overflow: hidden; aspect-ratio: 1/ 1;}
.friendlist_wrap .store_profile .left .profile img{width: 100%; height: 100%; object-fit: cover;}
.friendlist_wrap .store_profile .store_name{font-size: 28px; line-height: 36px; font-weight: 500;}

#frdlist_popup{width: 720px;min-height: 100vh; margin: 0 auto; position:fixed;top:0;left:50%; transform:translateX(-50%);z-index: 100;display: none; 	}
#frdlist_popup .bg{width: 100%;min-height: 100vh; background: rgba(0,0,0,0.8);}
#frdlist_popup .window{z-index: 100; width:80%;background: #FFFFFF; border-radius:20px; position: absolute; top:40%;left:50%; transform:translate(-50%,-40%);padding:20px 20px 0 20px;
overflow: hidden;}
#frdlist_popup .frd_top{position: relative;border-bottom: 1px solid #f5f5f5; padding-bottom: 20px;}
#frdlist_popup .frd_top img{ position: absolute; top:0; right:0;  cursor:pointer; width: 36px;}
#frdlist_popup .frd_top .alrim{font-size: 25px; line-height: 30px; color:#555555;text-align:center;font-weight: 500;}
#frdlist_popup .frd_middle{font-size: 30px; line-height: 42px;padding:40px 0;text-align:center}

.cts_mdbox{padding: 20px 0;}
#frdlist_popup .window_btn{ border-top: 1px solid #ccc; text-align:center; margin-top: 10px;}
#frdlist_popup .window_btn button{width: 50%;font-size: 30px; line-height: 42px; background: none; border:none; color:#D61E1E; padding: 20px 0;}

#frdlist_popup .window_btn{display:flex; width: 100%; border-top: 1px solid #ccc;}
#frdlist_popup .window_btn button{width: 50%;height: 90px; font-size: 30px; line-height: 42px; background: none; border:none;}
#frdlist_popup .window_btn .cancel{color:#767676;position: relative;}
#frdlist_popup .window_btn .cancel:after{content:''; position: absolute;top:50%; transform:translateY(-50%); right:0; width: 1px; height: 80%; background: rgba(204,204,204,0.3);}
#frdlist_popup .window_btn .confirm{color:#3DA4E4;}

.friendlist_wrap .store_profile button{font-size: 28px; line-height: 36px; border-radius:4px; padding: 15px 30px; font-weight: 400;}
.friendlist_wrap ul{display:flex; justify-content:space-between; align-items:center; margin-top: 10px; border-bottom: 2px solid #f5f5f5;		}
.friendlist_wrap ul li{width: 50%; font-size: 30px; line-height: 42px; text-align:center; padding-bottom: 20px; position: relative; cursor:pointer;}
.friendlist_wrap ul li.on:after{content:''; width: 100%; height: 2px; background: #555555; position: absolute; bottom:0; left:0;}
.friendlist_wrap .fdrqst{display: none;}
.btn_wrap{display: flex; gap:10px; }
.btn_wrap .accept{background:#3DA4E4; border:1px solid #3DA4E4; color:#fff;}
.btn_wrap .refuse{background: #f5f5f5; border:1px solid rgba(204,204,204,0.1);}
.delete{ background: #f5f5f5; border:1px solid rgba(204,204,204,0.1);}

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

.fdchad { display: none; } 

#chadlist_popup{width: 720px;min-height: 100vh; margin: 0 auto; position:fixed;top:0;left:50%; transform:translateX(-50%);z-index: 100;display: none; 	}
#chadlist_popup .bg{width: 100%;min-height: 100vh; background: rgba(0,0,0,0.8);}
#chadlist_popup .window{z-index: 100; width:80%;background: #FFFFFF; border-radius:20px; position: absolute; top:40%;left:50%; transform:translate(-50%,-40%);padding:20px 20px 0 20px;
overflow: hidden;}
#chadlist_popup .frd_top{position: relative;border-bottom: 1px solid #f5f5f5; padding-bottom: 20px;}
#chadlist_popup .frd_top img{ position: absolute; top:0; right:0;  cursor:pointer; width: 36px;}
#chadlist_popup .frd_top .alrim{font-size: 25px; line-height: 30px; color:#555555;text-align:center;font-weight: 500;}
#chadlist_popup .frd_middle{font-size: 30px; line-height: 42px;padding:40px 0;text-align:center}
#chadlist_popup .window_btn{ border-top: 1px solid #ccc; text-align:center; margin-top: 10px;}
#chadlist_popup .window_btn button{width: 50%;font-size: 30px; line-height: 42px; background: none; border:none; color:#D61E1E; padding: 20px 0;}
.chadan_btn { background: #f5f5f5;border: 1px solid rgba(204, 204, 204, 0.1);}
#chadlist_popup .window_btn{display:flex; width: 100%; border-top: 1px solid #ccc;}
#chadlist_popup .window_btn button{width: 50%;height: 90px; font-size: 30px; line-height: 42px; background: none; border:none;}
#chadlist_popup .window_btn .cancel{color:#767676;position: relative;}
#chadlist_popup .window_btn .cancel:after{content:''; position: absolute;top:50%; transform:translateY(-50%); right:0; width: 1px; height: 80%; background: rgba(204,204,204,0.3);}
#chadlist_popup .window_btn .confirm_c{color:#3DA4E4;}
@media screen and (max-width: 720px) {

.friendlist_wrap{width: 100%; margin: 0 auto;   }

.friendlist_wrap .store_profile{padding: 2.7778vw; align-items:center;flex-wrap:wrap; }
.friendlist_wrap .store_profile .left{width: 100%;  align-items:center; margin-bottom: 2.7778vw;}
.friendlist_wrap .store_profile .left .left_a{ align-items:center; gap:2.0833vw;}
.friendlist_wrap .store_profile .left .profile{width: 13.8889vw; border-radius:100%;  aspect-ratio: 1/ 1;}
.friendlist_wrap .store_profile .left .profile img{width: 100%; height: 100%; object-fit: cover;}
.friendlist_wrap .store_profile .store_name{font-size: 3.8889vw; line-height: 5.0000vw; }



#frdlist_popup{width: 100.0000vw;min-height: 100vh; margin: 0 auto; top:0;left:50%; transform:translateX(-50%); 	}
#frdlist_popup .bg{width: 100%;min-height: 100vh; background: rgba(0,0,0,0.8);}
#frdlist_popup .window{ width:80%;background: #FFFFFF; border-radius:2.7778vw;  top:50%;left:50%; transform:translate(-50%,-50%);padding:2.7778vw 2.7778vw 0 2.7778vw;
}
#frdlist_popup .frd_top{border-bottom: 0.1389vw solid #f5f5f5; padding-bottom: 2.7778vw;}
#frdlist_popup .frd_top img{  top:0; right:0;  cursor:pointer; width: 5.0000vw;}
#frdlist_popup .frd_top .alrim{font-size: 3.4722vw; line-height: 4.1667vw; }
#frdlist_popup .frd_middle{font-size: 4.1667vw; line-height: 5.8333vw;padding:5.5556vw 0;text-align:center}

.cts_mdbox{padding: 2.7778vw 0;}
#frdlist_popup .window_btn{ border-top: 0.1389vw solid #ccc;  margin-top: 1.3889vw;}
#frdlist_popup .window_btn button{width: 50%;font-size: 4.1667vw; line-height: 5.8333vw; background: none; border:none;  padding: 2.7778vw 0;}

#frdlist_popup .window_btn{ width: 100%; border-top: 0.1389vw solid #ccc;}
#frdlist_popup .window_btn button{width: 50%;height: 12.5000vw; font-size: 4.1667vw; line-height: 5.8333vw; background: none; border:none;}
#frdlist_popup .window_btn .cancel{}
#frdlist_popup .window_btn .cancel:after{ top:50%; transform:translateY(-50%); right:0; width: 0.1389vw; height: 80%; background: rgba(204,204,204,0.3);}


.friendlist_wrap .store_profile button{font-size: 3.8889vw; line-height: 5.0000vw; border-radius:0.5556vw; padding: 2.0833vw 4.1667vw; }
.friendlist_wrap ul{ justify- align-items:center; margin-top: 1.3889vw; border-bottom: 0.2778vw solid #f5f5f5;		}
.friendlist_wrap ul li{width: 50%; font-size: 4.1667vw; line-height: 5.8333vw;  padding-bottom: 2.7778vw;  cursor:pointer;}
.friendlist_wrap ul li.on:after{ width: 100%; height: 0.2778vw; background: #555555;  bottom:0; left:0;}
.friendlist_wrap .fdrqst{}
.btn_wrap{ gap:1.3889vw; }
.btn_wrap .accept{background:#3DA4E4; border:0.1389vw solid #3DA4E4; }
.btn_wrap .refuse{background: #f5f5f5; border:0.1389vw solid rgba(204,204,204,0.1);}
.delete{ background: #f5f5f5; border:0.1389vw solid rgba(204,204,204,0.1);}


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