/* header */

.login .menuWrap .top_list ul li,.login .menuWrap .bottom_list ul li{color:#333}
.login .bg_white{height: 380px; background-color: #fff;}

.login .login-title{position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); font-size: 45px; text-align: center; text-transform: capitalize;}

.login-wrap{padding: 40px 0 150px;}
.login-wrap .loginBox{width: 100%; max-width: 500px; margin: 0 auto;}
.loginBox label{display: block; width: 100%; padding-bottom: 10px;}
.loginBox label input{width: 100%; display: block; height: 45px; padding: 0 10px; border: none; border: 1px solid #333;}
.loginBox label .login-code-select{width:100%; height:50px; text-align:center; border:1px solid #333;}
.loginBox .button{width: 100%; text-align: center; padding-bottom: 10px;}
.loginBox .button button{width:100%; height: 45px; display: block; color: #fff; font-size: 16px; text-transform: uppercase;}
.loginBox .button.black button{background-color: #333;}
.loginBox .button.gray button{background-color: #908373;}

.find-idpw{text-align: center; padding-top: 50px;}
.find-idpw a{font-size: 14px;}


/* join */
.acitve-hidden{display: inline-block; overflow: hidden; position: absolute; top: 0; left: -9999999px; width: 0; height: 0; line-height: 0; color: transparent;}
.join_step_list{padding-bottom:120px; text-align: center;}
.join_step_list li{position: relative; display: inline-block; width: 140px; padding-top: 80px; font-size:16px; color:#908373;}
.join_step_list li::before{content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background-color:#ddd; color:#fff; border-radius: 100%; font-size:20px; font-weight: 700; line-height:60px;}
.join_step_list li::after{content: ""; position: absolute; width: 100%; left: -50%; height: 2px; border-top:1px dashed #ddd; z-index: -1; top:30px;}
.join_step_list li:nth-child(1)::before{content:"1"}
.join_step_list li:nth-child(2)::before{content:"2"}
.join_step_list li:nth-child(3)::before{content:"3"}
.join_step_list li:nth-child(4)::before{content:"4"}
.join_step_list li:nth-child(1)::after{display: none;}
.join_step_list li.active::before{background-color: #333;}

/* 약관 동의 */
.join_step{padding-bottom: 120px;}
.join_section + .join_section{padding-top: 60px;}
.join_section h3{font-size:18px; font-weight: 400; padding-bottom: 10px;}
.join_section h3 b.color_gray{color:#908373; padding-right: 10px;}

.join_box .join_box_contents{height: 200px; overflow-y: auto; padding: 50px 30px; font-size: 14px; overflow:auto; border: 1px solid #ddd; background-color:#f5f5f5; box-sizing: border-box; white-space: normal; word-break: break-all; }
.join_button{text-align: center;}
.join_button button{min-width: 250px; height: 50px; font-size: 16px; line-height: 50px; color:#fff; background-color: #908373;}
.join_button button.w-btn{background-color: #fff; border: 1px solid #908373; box-sizing: border-box; color: #908373;}


/* 체크 */
.join_section h3 span.accept{position: relative; display: block; float: right;}
.input-check{cursor: pointer;}
.input-check > input{position: absolute; box-sizing: border-box; width: 20px; height: 20px; vertical-align: top; border:0;-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    opacity: 0; }
.input-check em{display: inline-block; position: relative; font-size: 14px; padding-left: 30px; text-align: left; box-sizing: border-box;vertical-align: top; line-height: 19px;}
.input-check em::before{border: 1px solid #ccc; background-color:#fff; content: ""; display: block; left: 0; position: absolute; width: 20px; height: 20px;}
.input-check em::after{content: ""; display: block; position: absolute;}
.input-check input:checked + em::before{background-color:#908373; border-color:#908373}
.input-check input:checked + em::after{width: 11px; height: 6px; top: 5px; left: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.join_all_agree{text-align: center; padding: 40px 20px; border-top: 1px dashed #ddd; }
.join_all_agree .input-check > input{position: absolute; box-sizing: border-box; width: 20px; height: 20px; vertical-align: top; border:0;-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    opacity: 0; }
.input-check em{display: inline-block; position: relative; font-size: 14px; padding-left: 30px; text-align: left; box-sizing: border-box;vertical-align: top; line-height: 19px;}
.input-check em::before{border: 1px solid #ccc; background-color:#fff; content: ""; display: block; left: 0; position: absolute; width: 20px; height: 20px;}
.input-check em::after{content: ""; display: block; position: absolute;}
.input-check input:checked + em::before{background-color:#908373; border-color:#908373}
.input-check input:checked + em::after{width: 11px; height: 6px; top: 5px; left: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}


.join_formWrap{width: 100%; max-width: 500px; margin: 0 auto;}
.join_formWrap {padding-bottom: 80px;}
.join_form_section + .join_form_section{padding-top: 25px;}
.join_form_section + .join-mark{padding-top: 60px;}
.form_title{position: relative; padding-bottom: 10px; font-size: 14px;}
.form_title label em.import::before{content: "*"; display: inline-block; margin-top: -6px; color:#908373; vertical-align: top; font-size: 17px; font-weight: 600;}
.form_contents .box_input_wrap{
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 591px;
    }
.form_contents .box_input{display: inline-block; position: relative; height: 50px; vertical-align: top; width: 100%;}
.form_contents .box_input input{width: 100%; height: 100%; padding: 0 20px; font-size: 14px; line-height: 1.5; border: 1px solid #ddd; background-color:#fff}
.form_contents .button_box{ min-width: 130px; height: 50px; font-size: 14px; line-height: 50px; display: inline-block; border: 1px solid #908373; box-sizing: border-box; vertical-align: top; text-align: center; color:#333; }
.form_contents .box_input + .button_box{margin-left: 10px;}
.form_contents .button_box.bg-co{background-color: #908373; color:#fff}
.form_contents .box_input span.delet{position: absolute; cursor: pointer; display: none; top: 50%; right: 16px; width: 20px; height: 20px; border-radius: 100%; background-color: #f5f5f5; transform: translateY(-50%);}
.form_contents .box_input span.delet::before{content: ""; display: block; position: absolute; top: 50%; left: 50%; height: 8px; width:8px; text-align: center; background: url(https://dla7jyqf0sx2z.cloudfront.net/static/legacy-images/VLADIVOSTOK/156616122164267.png)no-repeat center; transform: translate(-50%,-50%);}
.form_contents .box_input span.time{position: absolute; top: 50%; transform: translateY(-50%); right: 20px; font-size: 14px; }

.box_input_wrap + .box_input_wrap{padding-top: 10px;}

.join_complete{text-align: center; padding: 50px; border: 1px solid #ddd;}
.join_complete b{color:#908373; padding: 0 10px;}
.join_complete strong{font-size: 22px; padding: 15px 0; display: block;}
.join_complete + .join_button{padding-top: 40px;}


.form_warn {padding-top: 5px;}
.form_warn p{font-size:12px; color:#f00}



/* 아이디비번찾기 */
.find{padding: 60px 0 120px;}
.find_wrap li{width: 50%; float: left; padding: 30px 80px;}
.find_wrap li:nth-child(1){border-right: 1px solid #ddd;}
.find_wrap .find_box .find_text{text-align: center;}
.find_text p.title{font-size: 22px; padding-bottom: 10px;}
.find_text p.sub-title{font-size: 16px; color:#666;}
.find_text p.sub-title span{display: block;}

.find_input{padding-top: 60px;}
.find_input .box_input_wrap{
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 591px;
    }
.find_input .box_input{display: inline-block; position: relative; height: 54px; vertical-align: top; width: 100%;}
.find_input .box_input input{width: 100%; height: 100%; padding: 0 20px; font-size: 14px; line-height: 1.5; border: 1px solid #ddd; background-color:#fff}
.find_input .button_box{ min-width: 130px; height: 54px; font-size: 14px; line-height: 54px; display: inline-block; border: 1px solid #908373; box-sizing: border-box; vertical-align: top; text-align: center; color:#333; }
.find_input .box_input + .button_box{margin-left: 10px;}
.find_input .button_box.bg-co{background-color: #908373; color:#fff}
.find_input .box_input span.delet{display: none; position: absolute; cursor: pointer; top: 50%; right: 16px; width: 20px; height: 20px; border-radius: 100%; background-color: #f5f5f5; transform: translateY(-50%);}
.find_input .box_input span.delet::before{content: ""; display: block; position: absolute; top: 50%; left: 50%; height: 8px; width:8px; text-align: center; background: url(https://dla7jyqf0sx2z.cloudfront.net/static/legacy-images/VLADIVOSTOK/156616122164267.png)no-repeat center; transform: translate(-50%,-50%);}
.find_input .box_input span.time{position: absolute; top: 50%; transform: translateY(-50%); right: 45px; font-size: 14px; }

.find_button{padding-top: 20px;}
.find_button button{width: 100%; height: 50px; font-size: 16px; line-height: 50px; color:#fff; background-color: #908373; border: 1px solid #908373; box-sizing: border-box;}


.find-con{border: 1px solid #ddd; padding: 8%; }
.find-con .id-find-box{text-align: center;}
.find-con .id-find-box strong{font-size:20px;display: block; background-color: #f0f0f0; padding: 5px; }
.find-con .id-find-box p.open{padding-top: 60px;}
.find-con .id-find-box p.open span.id-found{color:#908373; font-weight: 600; }
.find-con .id-find-box p.small-txt{font-size:14px; padding-top: 10pxs;}

.id-find-bttuon{text-align: center; padding-top: 60px;}
.id-find-bttuon button{display: inline-block; width: 120px; height: 50px; line-height:50px; margin: 0 10px; color: #fff; border-radius: 3px;}
.id-find-bttuon button.log{background-color:#908373;}
.id-find-bttuon button.pw{background-color: #666;}
/* 마이페이지 */
.form_contents .box_input.disable-box input{width: 100%; height: 100%; padding: 0 20px; background-color:#f5f5f5; font-size: 14px; line-height: 1.5; border: 1px solid #ddd;}


.policy-con{border: 16px solid #f5f5f5; padding:3%; font-size:14px}
.policy{padding-bottom: 120px;}
/* legacy privacy/policy 인라인 스타일 패리티 (familymsc policy/privacy_con) */
.legal-con strong{padding:10px 0; display:block;}
.legal-con span{font-size:12px; color:#888}
.legal-con ul{padding-left:20px; padding-bottom:10px; padding-top:5px; list-style:none;}
.legal-con ul li{padding-bottom:5px; list-style:none;}
.legal-con ol{padding-left:30px;}
.legal-con ol > li{list-style-type:square; padding-bottom:5px;}
/* legacy: .join-sec + .join-sec{padding-top:20px} (46px는 과도한 여백) */
.legal-con .join-sec + .join-sec{padding-top:20px;}
.legal-con .join-sec p{padding-bottom:5px; padding-top:5px;}
.legal-con .join-sec ul{padding-left:20px; padding-bottom:10px; padding-top:5px; list-style:none;}
.legal-con .join-sec ul li{padding-bottom:5px; list-style:none;}
.legal-con .join-sec ul ul{padding-left:20px;}
.legal-con strong.strong{padding:20px 0; display:block; font-size:1.1rem;}
.legal-con strong.strong:first-child{padding-top:0;}



/* 2025-02-03 동의 */
.login.agree .join_step_list{padding-bottom: 60px;}
.login.agree .join_formWrap{padding-bottom: 20px;}
.login.agree .login-title{font-family: 'Open Sans','Noto Sans KR','돋움', 'Dotum', sans-serif; word-break: keep-all; font-size: 40px;}
.agree .input-check em{word-break: keep-all;}
.agree .join_all_agree{padding: 40px 20px; margin-top: 40px;}
.agree-box {padding: 120px 80px; border: 1px solid #ccc; position: relative;}
.agree-box img{max-width: 100%; position: relative; z-index: 1;}
.agree-box .box-bg-center{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.agree-box.doc .box-bg-top{display: block; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 90%; height: 170px;} 
.agree-box.doc .box-bg-btm{display: flex; align-items: end; justify-content: center; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 90%; height: 170px; } 

.agree-box .toptit{position: relative;}
.agree-box .toptit .box-tit-bg-top{display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 50px; top: -10px;}
.agree-box .toptit .box-tit-bg-btm{display: block; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 100%; height: 18px; }
.agree-box .toptit .box-tit-bg-top img, .agree-box .toptit .box-tit-bg-btm img{max-width: 390px;}

.agree-box .toptit{text-align: center; margin-bottom: 40px; padding: 70px 0; position: relative;}
.agree-box h6{font-family: "Noto Serif KR", serif; }
.agree-box .toptit h6{font-size: 36px; text-align: center; word-break: keep-all;}
.agree-box .toptit h6 i{color: #76171C;}

.agree-box .toptit p{font-family: "Noto Serif KR", serif; font-style: italic; color: #908373; margin-top: 10px;}
.agree-box .txt p{word-break: keep-all; font-size: 16px; line-height: 1.6;}

.agree-box .txt p.ele-p i{border-bottom: 1px solid #333; font-weight: bold;}
.agree-box .txt .paragraph.top p{color: #777; text-decoration: underline; text-align: center; padding-bottom: 20px;}

.paragraph i.pri b{border-bottom: 1px solid #333;}

.agree-box .txt .paragraph > i{font-size: 18px; font-weight: 600; margin-bottom: 10px; display: inline-block;}
.agree-box .txt .paragraph + .paragraph{margin-top: 26px;}
.agree-box .btm{text-align: right;}
.agree-box .btm p{ font-size: 19px; font-weight: 500;}
.agree-box .input-check em{font-size: 16px;}
.agree .join_button{padding-top: 40px;}
.agree .join_complete{text-align: left; padding: 50px; border: 1px solid #ddd;}
.agree .join_complete{text-align: center;}
.agree .join_complete > i{margin-bottom: 20px; display: inline-block;}
.agree .join_complete .xsmall{font-size: 16px; color: #888; margin-top: 4px;}

.agree-box.top{padding: 80px 0; border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.agree-box.top .btm{padding-top: 60px;}
.agree-box.top .btm i img{max-width: 24%;}
/* .agree-box.top .btm i{display: block;} */
.agree-box.top h6{font-size: 34px; margin-bottom: 40px;}

.btm-logo{width: fit-content; margin: 0 auto;}
.btm-logo img{max-width: 400px;}

.imgbox{margin-bottom: 80px;}

.imgbox2 img{width: 100%;}
.img-flex{display: flex; align-items: center; justify-content: center; max-width: 100%;}
.img-flex img{max-width: 100%; width: 50%;}

.videobox video{width: 100%;}

.fc-r{color: #B20000;}



/* 동의서 프린트 */
.agree.print{height: 100vh; padding-top: 16px;  width: 794px !important; height: 1122px !important; overflow: visible;}
.agree.print .agree-box.print{width: 100%; height: calc(1122px - 32px) !important;}
.agree-box.print{padding: 60px 50px;}
.agree-box.print .txt .paragraph > i{font-size: 14px; margin-bottom: 10px;}
.agree-box.print .txt p{font-size: 12px;}
.agree-box.print .txt .paragraph.top p{font-size: 12px; padding-top: 0;}
.agree-box.print .toptit h6{font-size: 28px;}
.agree-box.print .toptit{padding: 40px 0; margin-bottom: 12px;}
.agree-box.print .toptit p{padding-top: 0;}
.agree .agree-box.print .join_all_agree{margin-top: 16px; padding: 16px;}
.agree-box.print .input-check em{font-size: 12px;}
.agree-box.print .btm-logo img{width: 200px; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);}
.agree-box.print .btm-logo{margin-top: 20px;}
.agree-box.print .toptit .box-tit-bg-top img, .agree-box.print .toptit .box-tit-bg-btm img{max-width: 50%;}

.agree-box.print .toptit .box-tit-bg-top img{margin-top: -4px;}
.agree-box.print .toptit .box-tit-bg-btm{bottom: 10px;}

.agree-box.print .txt .paragraph + .paragraph{margin-top: 14px;}


/* ********************************************* *
 * 1200px max
 * ********************************************* */
 @media (max-width:1200px){
    
    .find_wrap li{padding: 30px 0;}
    .login .login-title{text-align: center; word-break: keep-all;}

    .login.agree .login-title{font-size: 32px; width: max-content;}
 } 

/* ********************************************* *
 * 1024px max
 * ********************************************* */
 @media (max-width:1024px){
    .login .bg_white{height: 260px;}
 }

 /* ********************************************* *
 * 960px max
 * ********************************************* */
 @media (max-width:960px){
    .login .login-title{font-size: 35px;}

    .agree-box .toptit h6{font-size: 32px;}
    .agree-box .toptit{padding: 58px 0; margin-bottom: 20px;}
    .agree-box .toptit p{padding-top: 6px; font-size: 15px;}
    .agree-box .toptit .box-tit-bg-top{height: 42px;}
    .agree-box .toptit .box-tit-bg-btm{height: 16px; bottom: 23px;}
    .agree-box .toptit .box-tit-bg-top img, .agree-box .toptit .box-tit-bg-btm img{max-width: 70%;}


    .agree-box.doc .box-bg-top{top: 30px;}
    .agree-box.doc .box-bg-btm{bottom: 30px;}
    .agree-box .txt .paragraph.top p{font-size: 15px;}
    .agree-box{padding: 100px 50px;}
    .btm-logo img{width: 300px;}

 }


 /* ********************************************* *
 * 768px max
 * ********************************************* */
 @media (max-width:768px){
    .login-wrap{padding: 40px 0 80px;}
    .login .login-title{text-align: center;}

    .find{padding: 0 0 80px;}
    .find_wrap li{width: 100%;}
    .find_box{display: table; width: 100%;}
    .find_wrap li:nth-child(1){border-right: 0; padding-bottom: 80px; border-bottom: 1px solid #ddd;}
    .find_wrap .find_box .find_text{display: table-cell; width: 260px; padding-right: 30px; text-align: left;}
 }

 /* ********************************************* *
 * 640px max
 * ********************************************* */
 @media (max-width:640px){

    .join_button{width: 100%;}
    .join_button button{min-width: 48%; display: inline-block;}
    .join_step_list li{width: 110px;}

    .login.agree .login-title{font-size: 26px; width: max-content;}
    .agree-box.top h6{font-size: 24px;}
    .agree-box.top .btm i img{max-width: 40%;}

    .agree-box h6{font-size: 22px; word-break: keep-all;}
    .agree-box .toptit h6{font-size: 26px;}

    .agree-box{padding: 50px 20px;}
    .agree .join_all_agree{padding: 40px 0;}
    .agree-box .btm p{font-size: 18px;}
    .agree .join_complete{padding: 50px 20px; word-break: keep-all;}
    .agree .join_complete .xsmall{font-size: 15px;}
    .agree .join_complete > i img{width: 80%;}
    .btm-logo img{width: 220px; padding-top: 30px;}

    .agree-box.top{padding: 50px 0;}
 }

/* ********************************************* *
 * 500px max
 * ********************************************* */
 @media (max-width:500px){

    .login-wrap .loginBox{padding: 0 16px;}
    .form_contents .box_input input{font-size: 12px;}
    .form_contents .button_box{min-width: 100px;}

    .join_complete{padding: 50px 30px;}

    .find_wrap .find_box .find_text{display: block; width: 100%; padding: 0;}

    .btm-logo img{width: 160px;}
    .agree-box.doc .box-bg-top{top: 20px;}
    .agree-box.doc .box-tit-bg-btm{bottom: 20px;}


 }

 /* ********************************************* *
 * 480px max
 * ********************************************* */
 @media (max-width:480px){

    .join_section h3{padding-right: 95px; position: relative; word-break: keep-all;}
    .join_section h3 span.accept{position: absolute; right: 0; bottom: 0;}
    

    .login.agree .login-title{width: 100%; padding: 0 16px ;}

 }

 /* ********************************************* *
 * 380px max
 * ********************************************* */
 @media (max-width:380px){

    .join_step_list li{width:97px; font-size: 14px;}
 }


 /* 동의서 프린트 시 */
 @media print {
   .agree-box.doc {
     width: 794px !important;
     height: 1123px !important;
     transform: scale(0.8); /* 화면 크기에 따라 조정 (0.8 ~ 1) */
     transform-origin: top left;
     overflow: hidden !important;
   }

}