@charset "utf-8";

.BasicPopWrap {
    position: fixed;left: 50%;top: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
    z-index: 110;min-width: 320px;background-color: #fff;padding:50px 30px 30px;border-radius: 30px;
    -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 20%);-moz-box-shadow: 0px 5px 15px rgb(0 0 0 / 20%);box-shadow: 0px 5px 15px rgb(0 0 0 / 20%);
}
.BasicPopWrap .closePopup {
    position:absolute;top:10px;right:10px;display:block;width:30px;height:30px;background-color:#000;border-radius:100%;text-align:center;
}
.BasicPopWrap .closePopup .material-symbols-outlined {line-height:30px;color:#fff;font-size:24px;font-weight:200;}
.BasicPopWrap .closePopup:hover {background-color:#33336e;}
.BasicPopWrap .PopCnt h3 {
    display:block;width:100%;text-align:center;font-size:24px;font-family: sbfont;font-weight:600;color:#000;margin-bottom:30px;line-height:140%;
}
#popup_bg, .recommend_bg {width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#33336e;opacity:0.7;z-index:100;}
.recommend_bg.active {display:block;}
.recommend_bg {display:none;}

/* 메인팝업 */
.MainPop {
    max-width:480px;padding:0;background-color:transparent;display:none;
    top: 50%;-ms-transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);-moz-transform: translate(0%, -50%);transform: translate(0, -50%);
    -webkit-box-shadow: 0px 0px 0px rgb(0 0 0 / 0%);-moz-box-shadow: 0px 0px 0px rgb(0 0 0 / 0%);box-shadow: 0px 0px 0px rgb(0 0 0 / 0%);
}
.MainPop .PopCnt {border-radius:30px;overflow:hidden;font-size:0;line-height:normal;border:10px solid #fff;background-color:#fff;}
.MainPop .PopCnt, .MainPop .pop_btn {-webkit-box-shadow:0px 0px 10px rgb(0 0 0 / 11%);-moz-box-shadow:0px 0px 10px rgb(0 0 0 / 11%);box-shadow:0px 0px 10px rgb(0 0 0 / 11%);}
.MainPop .pop_btn {
    height:38px;background-color:#fff;border-radius:50px;padding:4px 4px 4px 20px;margin-top:10px;border:1px solid #e5e5e9;position:relative;
}
.MainPop .pop_btn a:first-child {line-height:27px;}
.MainPop .pop_btn a:last-child {width:30px;height:30px;border-radius:100%;background-color:#acaccd;color:#fff;position:absolute;top:4px;right:4px;text-align:center;}
.MainPop .pop_btn a:last-child span {font-size:24px;font-weight:200;line-height:30px;}
.MainPop .pop_btn a:last-child:hover {background-color:#33336e;}
.MainPop .slick-prev, .MainPop .slick-next {
    width:34px;height:34px;text-align:center;background-color:rgba(255, 255, 255, 0.7);border-radius:100%;z-index: 10;
}
.MainPop .slick-prev {left:5px;}
.MainPop .slick-next {right:5px;}
.MainPop .slick-prev:before, .MainPop .slick-next:before {line-height:34px;opacity:1;color:#000;font-size:21px;font-family: 'Material Symbols Outlined';}
.MainPop .slick-prev:before {content:"\e5cb";}
.MainPop .slick-next:before {content:"\e5cc";}
.MainPop .slick-prev:hover, .MainPop .slick-next:hover {background-color:rgba(255, 255, 255, 1);}
.MainPop.num01 {margin-left:-480px;z-index:111;}
.MainPop.num02 {margin-left:13px;}

/* 카탈로그 팝업 */
#PopCataloguePop ul {display:flex;border-radius:20px;border:1px solid #e5e5e5;overflow:hidden;
    -webkit-box-shadow:0px 3px 8px rgb(0 0 0 / 7%);-moz-box-shadow:0px 3px 8px rgb(0 0 0 / 7%);box-shadow:0px 3px 8px rgb(0 0 0 / 7%);
}
#PopCataloguePop ul li {border-left:1px solid #e5e5e5;}
#PopCataloguePop ul li:first-child {border-left:0;}


/* 회원가입 */
#PopJoinPop {max-width:620px;width:100%;}
#PopJoinPop ul {display:flex;margin-bottom:30px;}
#PopJoinPop ul li {width:calc(100% / 2);}
#PopJoinPop .PopCnt ul li {color:#666;float:left;width:calc(100% / 2);text-align:center;position:relative;padding-top:25px;}
#PopJoinPop .PopCnt ul li div {padding-bottom:37px;}
#PopJoinPop .PopCnt ul li div img {transition: all 0.3s ease-in-out 0s;position:relative;z-index:1;}
#PopJoinPop .PopCnt ul li div::after {
    content:"";display:block;position:absolute;width:152px;height:152px;background-color:#ececfa;transition: all 0.3s ease-in-out 0s;
    border-radius:100%;z-index:0;top:0;left:50%;margin-left:-76px;
}
#PopJoinPop .PopCnt ul li label {
    font-size:16px;position:absolute;bottom:0;left: 50%;-ms-transform: translate(-50%, 0%);-webkit-transform: translate(-50%, 0%);-moz-transform: translate(-50%, 0%);transform: translate(-50%, 0%);
    padding:167px 0 0;width:100%;z-index:10;color:#000;font-weight:400;
}
#PopJoinPop .PopCnt ul li label::before {display:none;}
#PopJoinPop .PopCnt ul li input[type="radio"]:not(:checked) + label + div img {filter: grayscale(100%);opacity:0.7;}
#PopJoinPop .PopCnt ul li input[type="radio"]:checked + label + div::after {background-color:#8dc63f;}
#PopJoinPop .PopCnt .txt {
    font-size:18px;padding:30px 0;line-height:140%;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;
    color:#818181;text-align:center;border-top:1px solid #ededed;
}
#PopJoinPop .PopCnt .txt span {color:#ff8a00;}
#PopJoinPop .btnTypeB {width:100%;}


/* 아이디 패스워드찾기 */
#PopIdPsPop {max-width:620px;width:100%;}
#PopIdPsPop .PopWrap ul li {padding-top:10px;}
#PopIdPsPop ul li:first-child {padding-top:0px;}
#PopIdPsPop ul li input, #PopIdPsPop ul li select {width:100%;}
#PopIdPsPop .btnTypeB {width:100%;border-radius:50px;}

/* 전문보기 */
#PopTermsPop, #PopAgreePop {
    width:100%;height:100%;top:0;left:0;-ms-transform: translate(0, 0);-webkit-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);
    border-radius:0;
}
#PopTermsPop .scrollY, #PopAgreePop .scrollY {height: calc(100vh - 144px);}

/* 탈퇴 */
#PopWithdrawalPop .txt {padding:20px 15px;color:#000;background-color:#f4f4fb;border-radius:15px;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;}
#PopWithdrawalPop .txt, #PopWithdrawalPop .Check {line-height:140%;text-align:center;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;}
#PopWithdrawalPop .btnTypeB {width:100%;}


/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 990px){
    /* 메인팝업 */
    .MainPop.num01, .MainPop.num02 {
        margin-left:0;left:50%;top:50%;width:480px;
        -ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
    }
}

@media screen and (max-width: 640px){
    .BasicPopWrap.Full {
        top:0;left:0;width:100%;height:100%;max-width:100% !important;border-radius:0;
        -ms-transform: translate(0, 0);-webkit-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);
    }
    .BasicPopWrap.Full .scrollY {height:100%;}
    .BasicPopWrap.Full .scrollY::-webkit-scrollbar {width: 0px;}
    .BasicPopWrap.Full .scrollY::-webkit-scrollbar-thumb {background-color:rgba(102, 102, 161, 0.3);border-radius: 0px;}
    .BasicPopWrap.Full .scrollY::-webkit-scrollbar-thumb:hover {background-color: transparent;}
    .BasicPopWrap .PopCnt h3 {font-size: 22px;margin-bottom: 20px;}

    /* 회원가입 */
    #PopJoinPop .PopCnt .txt {font-size: 16px;}
}

@media screen and (max-width: 480px){
    .BasicPopWrap .PopCnt h3 {font-size: 20px;}
    .BasicPopWrap {padding: 50px 20px 20px;}

    /* 메인팝업 */
    .MainPop.num01, .MainPop.num02 {width:100%;}
}

@media screen and (max-width: 400px){
    /* 회원가입 */
    #PopJoinPop .PopCnt ul li div::after {width: 122px;height: 122px;margin-left:-61px;top: 12px;}
    #PopJoinPop .PopCnt ul li div img {width:131px;}

}