/* BASIC css start */
#terms_agree .terms-agree dd .lst li a::before{content:"[필수] "}
#terms_agree .terms-agree dd label strong::before{content:"[선택] "}

/* 구버전 이용약관 등 style 모음 */
#join .desc-3 {border: 1px solid #909090;}
#join .desc {position: relative; background-color: #fff; padding: 20px 10px 10px 10px; margin: 0 5px;}
#join .desc .open-pop {position: absolute; right: 10px; top: 18px; border: 1px solid #c7c7c7; padding: 2px 10px; float: right;}
#join .desc h3 {font-weight: bold; padding: 3px 0;}
#join .agree-2 {padding-left: 10px; background-color: #fff; margin: 0 5px;}

/* 이용약관 */
#layerTermsWrap, #layerPrivercyWrap, #layerThirdPartyWrap, #layerTrustWrap { display: none; }
#layerTermsWrap .txt, #layerPrivercyWrap .txt, #layerThirdPartyWrap .txt, #layerTrustWrap .txt {padding: 15px 10px; }
/* 개인정보 수집 이용안내 */
#join .desc h3.none-line {border-bottom: none; }
#join .privercy-contract-tap {position: relative; border-left: 1px solid #cacaca; }
#join .privercy-contract-tap li {list-style-type: none; border-top: 1px solid #cacaca;  border-right: 1px solid #CACACA; background-color: #f4f4f4; display: block; float: left; line-height: 27px; text-align: center; width: 33%; height: 28px; margin-bottom: -1px; }
#join .privercy-contract-tap li.sel{background-color: #fff; border-bottom: 1px solid #fff; }
#join .privercy-contract-tap li:last-child {border-right: 1px solid #cacaca;; }
#join .privercy-contract-tap li a {text-align: center; padding: 0; display: block; color: #787878; width: 100%; height: 100%; }
#join .tab-content {border: 1px solid #cacaca;}
#join .tab-content .privercy-contract {padding: 10px; }
#join .tab-content .privercy-contract p {line-height: 1.5em; width: 100%; height: 55px; margin: 0; padding: 0; border: none; overflow-y: hidden;}
/* 약관 팝업 관련 */
.layer-pop-join { position: absolute; left:0; top: 0; z-index: 101; width: 100%; min-height: 100%; background-color: #fff; }
.layer-pop-join h3 { white-space: nowrap; padding-left: 15px; padding-right: 10%; overflow: hidden; text-overflow: ellipsis; background-color: #efefef; margin: 0; min-height: 30px; line-height: 1.5em; padding-top: 7px; font-weight: bold;}
.layer-pop-join .btns { margin: 25px 0; padding: 0 15px; }
.layer-pop-join .btns .btn-type-03,
.layer-pop-join .btns .btn-type-04 { padding: 7px 20px; }
.layer-pop-join .btns .f-right { float: right; }
#join .privercy .clearFix { display: flex; flex-wrap: nowrap; overflow: initial;}
#join .privercy .sequence { text-align:center; margin-top: 20px;}
#join .privercy .sequence li {
    display: inline-block; color: var(--black500);
    width: 25%;
    height: 48px;
    text-align: center;
    line-height: 17px;
    padding: 7px 0;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
    color: var(--black500);
    border-bottom: 1px solid var(--white100);
}

#join .privercy .sequence li span { font-size: 14px;}
#join .privercy .sequence li .fa-stack {display:block; margin:20px auto 0;}
#join .privercy .sequence li .fa-circle {color: #858585;}
#join .privercy .sequence li.now {color:#333; position: relative;}
#join .privercy .sequence li.now::after { content: ''; display: inline-block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--black800);}
#join .privercy .desc-2 {background-color: #fff; padding:20px 10px; margin: 0 5px;}
#join .privercy .desc-2 dl {margin-bottom:20px;}
#join .privercy .btn-txt-view {border:1px solid #c7c7c7; padding:4px 10px; float: right;}
#join .privercy .every-agree {padding: 10px 0 10px 0; background-color: #fff; font-weight: bold; color: #BD3D3D;}
#join .pd10 {background-color: #fff; padding-top: 20px; margin-top:20px;}
#join .pd10 .btn_Red {margin-bottom:10px;}
#join .layer .layer-pop {display: block;}
#join .layer-pop  {width: 100%; min-height: 100%; z-index: 3; position: absolute; left: 0; top: 0; background:rgba(60,60,60,0.8); display:none;}
#join .layer-pop table {width:100%;}
#join .layer-pop #layerTerms, #join .layer-pop #layerTerms-A, .layer-pop #layerTerms-B, .layer-pop #layerTerms-C, .layer-pop #layerTerms-D {width:90%; background-color: #fff; position: relative; box-shadow: 0px 1px 10px #494949; margin:80px auto;}
#join .layer-pop h3  {background-color: #efefef; height: 36px; line-height: 36px; font-weight: bold; padding: 0 10px; }
#join .layer-pop .txt {max-height: 300px; overflow-y: auto; padding:10px;}
#join .layer-pop .close,
#join .layer-pop-join .close {width:45px; height:36px; color:#fff; line-height: 42px; position:absolute; top:0; right:0;  background-color: #4f4f4f; text-align: center; background:url("/images/d3/m_04/btn_del_gray@2x.gif") no-repeat center center; background-size: 45px 36px; text-indent: -9999px; font-size: 0;}
@media screen and (max-width: 767px) and (min-width: 420px) {
 #join .layer-pop .txt {max-height: 150px;}
}

/* wib 추가 css */
#join.mobileAuth .privercy {
    background-color: #fff;
}
#join #terms_agree .terms-agree dd { 
    padding: 0 15px !important;
    margin: 0;
    border: none;
}

#join #terms_agree .terms-agree dt { 
    margin-top: 0px; 
    padding-left: 15px; 
    height: 60px; 
    border: none;
}
#join #terms_agree .terms-agree dl > dd { padding: 0;}

#join #terms_agree .terms-agree dt label {
    font-size: 500;
    line-height: 60px;
}

#join #terms_agree .terms-agree label { 
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: var(--black800);
    line-height: 48px;
    display: block;
}

#join #terms_agree .terms-agree label strong { 
    font-weight: 400; 
    color: var(--black800);
    margin-right: 10px;
}


.icon {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/admin_toggle_icon.svg) no-repeat right;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 19px;
}

.icon.icon-active {
    transform: rotate(180deg);
}


/* 이용약관 */
#join .terms-agree .lst {
    display: inline-flex; 
    flex-flow: column; 
    width: calc(100% - 5px);
}

#join.joinPag .terms-agree .lst li { 
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #EBEBEB;
    position: relative;
}

#join.joinPag .terms-agree .lst li:first-child {
    border-top: 1px solid #EBEBEB;
}

#join.joinPag .terms-agree .lst li:first-child label a {
    text-decoration: none;
}

#join #termsCont1 { padding: 0;}

#join #termsCont1 dt { display: none;}

#join #termsCont1 dd { margin: 0; padding: 0 !important;}

#join.joinPag #termsCont1 dd textarea {
    resize: none;
    width: 100%;
    box-sizing: border-box;
    height: 120px;
    border: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    color: var(--black800);
    padding: 10px 5px;
}

#join.joinPag #termsCont1 dd textarea::-webkit-scrollbar {
    width: 3px;
}

#join.joinPag #termsCont1 dd textarea::-webkit-scrollbar-thumb {
    background: var(--black);
    height: 45px;
}

#join.joinPag #termsCont1 dd textarea::-webkit-scrollbar-track {
    background: var(--white100);
}

#join.joinPag #termsCont1 dd textarea::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}




/* 개인정보 수집 이용약관 */
#join.joinPag .termsContBox {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    color: var(--black800);  
    width: 100%;  
    height: 120px; 
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 15px;
    padding: 0 5px;
    box-sizing: border-box;
}

#join.joinPag .termsContBox::-webkit-scrollbar {
    width: 3px;
}

#join.joinPag .termsContBox::-webkit-scrollbar-thumb {
    background: var(--black);
    height: 45px;
}

#join.joinPag .termsContBox::-webkit-scrollbar-track {
    background: var(--white100);
}

#join.joinPag .termsContBox::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

#join.joinPag .termsContBox .tit {
    margin-bottom: 10px;
}

#join.joinPag .termsContBox .tit-sub {
    margin-bottom: 10px;
}

#join.joinPag .termsContBox .item {
    display: flex;
    flex-flow: column;
    gap: 5px 0;
    margin-bottom: 10px;
}

#join.joinPag .termsContBox .holding {
    font-weight: 400;
    font-size: 12px;
}

#join.joinPag .termsContBox .privacy-noti {
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--black800);
}

#join #terms_agree .terms-agree dl > dd:last-child > div {
    font-size: 0;
}

/* 마케팅 수신 동의 */
#join #terms_agree .terms-agree dl > dd:last-child div label:first-child {
    font-size: 0;
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

#join #terms_agree .terms-agree dl > dd:last-child div label:first-child::after {
    content: '이메일 수신동의';
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: #333;
    vertical-align: middle;
}

#join #terms_agree .terms-agree dl > dd:last-child div label:last-child {
    font-size: 0;
    display: inline-block;
    position: relative;
}

#join #terms_agree .terms-agree dl > dd:last-child div label:last-child::after {
    content: 'SMS 수신동의';
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: #333;
    vertical-align: middle;
}

/* 하단 info */
#join.joinPag #terms_agree .terms-agree dd .txt {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    color: var(--black500);
}

#join.joinPag #terms_agree .terms-agree dd .txt p {
    margin-top: 10px;
    color: #6C6D70;
}

/* 하단 버튼 */
#join .flexBox { 
    margin: 40px 15px 120px; 
    gap: 0 5px;
}

#join .flexBox a { 
    width: 50%; 
    box-sizing: border-box;
}
/* BASIC css end */