/* 로그인 & 회원가입 */
.account .login.box {width:min(480px, 100%); margin:0 auto; border: 2px solid rgba(30, 31, 36, .05); background-color: rgba(30, 31, 36, .02); border-radius: 20px; padding: 40px 40px;}
.account .login .designChk {margin-top: 10px; margin-bottom: 20px;}
.account .login .btn_wrap {padding-top: 0;}
.account .login .btn_wrap .btn {margin: 5px 0;}

/* 아이디 비밀번호 찾기 */
.account .login_other {text-align: center; margin-top: 20px;}
.account .login_other ul {font-size: 0;}
.account .login_other ul li {position: relative; font-size: 1rem; display: inline-block; padding: 0 10px;}
.account .login_other ul li:first-child:after {content: none;}
.account .login_other ul li:after {content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 1px; height: 12px; background-color: #e1e1e1;}
.account .login_other ul li a {color: #666;}
.account .login_other ul li a:hover {color: #333; text-decoration: underline;}

/* 간편로그인 영역 라인 */
.line_or{display: block; position: relative; width: 100%; padding: 15px 0; line-height: 0; font-size: 0; margin-top:30px;}
.txt_or{display: inline-block; width: 140px; line-height: 18px; font-size: 14px; text-align: center; color: #666}
.line_or:before,
.line_or:after{content: ""; display: inline-block; width: calc(50% - 70px); height: 1px; margin: 8px 0; background-color: rgba(0,0,0,0.06); vertical-align: top;}

/* sns_login */
.sns_login .sns_btn {position: relative; width: 100%; height: 60px; background-color: #000; border: 1px solid #000; font-weight: 600; color: #fff; margin: 5px 0; border-radius: 10px;}
.sns_login .sns_btn.google {background-color: #fff; border: 1px solid #eee; color: var(--mitc-gray);}
.sns_login .sns_btn.kakao {background-color: #FEE500; border: 1px solid #FEE500; color: #000;}
.sns_login .sns_btn.naver {background-color: #1ec800; border: 1px solid #1ec800; color: #fff;}
.sns_login .sns_btn span:before {content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 60px; height: 100%; background: no-repeat 50% 50%; background-size: 20px auto; border-right: 1px solid rgba(255, 255, 255, .3); vertical-align: middle;}
.sns_login .sns_btn.google span:before {background-image: url('/images/page/common/icon_google.svg'); border-right-color: #eee;}
.sns_login .sns_btn.kakao span:before {background-image: url('/images/page/common/icon_kakao.svg');}
.sns_login .sns_btn.naver span:before {background-image: url('/images/page/common/icon_naver.svg');}

/* account common */
.certify_box {display:block; padding-top:15px; margin-top:15px; border-top:1px dashed #ddd;}

.time_field {position: relative; display: inline-block;}
.time_field > input {padding-right: 60px;}
.time_field .timer {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 1rem; color: var(--mitc-sub);}

/* step */
.process {text-align: right; margin-bottom: 40px;}
.process ul {position: relative; font-size: 0; display: inline-block;}
.process ul li {position: relative; display: inline-block; font-size: 14px; padding-right: 60px; color: #666;}
.process ul li.on {color: var(--mitc-main); font-weight: 600;}
.process ul li:before {content: ''; display: block; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; margin: 0 auto 5px;}
.process ul li:after {content: ''; position: absolute; top: 10px; right: 10%; display: block; width: 20%; border-top: 1px dashed #ddd;}
.process ul li.on:before {background-color: var(--mitc-main); border-color: var(--mitc-main);}
.process ul li:last-child {padding-right: 0;}
.process ul li:last-child:after {content: none}

.process ul li.end {color: #999;}
.process ul li.end:before {background-color: var(--mitc-light); border-color: var(--mitc-light);}


/* 홈페이지 약관 */
.all_check_btn {position:relative; margin-bottom:60px; background-color: rgba(30, 31, 36, .02); border: 2px solid rgba(30, 31, 36, .05); border-radius: 10px; padding: 20px 20px; text-align: center;}

.policy + .policy {margin-top: 60px;}
.policy .scroll_y_box{border:2px solid rgba(30, 31, 36, .05); border-radius: 10px; height:250px; padding: 24px; color:#666;overflow-y: auto;}
.policy .designChk {margin-top: 10px;}

/* 회원가입 완료 */
.join_box {text-align: center;}
.join_box .cont_box {padding-top: 60px; padding-bottom: 60px;}
.join_box .check {position: relative; display: block; width: 72px; height: 72px; background-color: #000; margin: 0 auto 20px; border-radius: 50%;}
.join_box .check:after {content: ''; display: block; height: 16px; width: 30px; position: absolute; top: 50%; margin-top: -5px; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); -ms-transform: translate3d(-50%, -50%, 0) rotate(-45deg); -moz-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-radius: 0;}
.join_box h3 {font-size: 24px;}
.join_box p {margin-top: 40px;}
.join_box .info {background-color: #fff; padding: 10px 20px; color: #666; margin-top: 20px; border-radius: 5px;}
.join_box .info > p {word-break: keep-all; margin-top: 0;}

@media (max-width: 1920px) {

}

@media (max-width: 1680px) {

}

@media (max-width: 1440px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {
    .sns_login .sns_btn {height: 50px;}

}
@media (max-width: 768px) {
    .process {text-align: center; margin-bottom: 20px;}

}

@media (max-width: 640px) {

}

@media (max-width: 576px) {

}

@media (max-width: 420px) {
    /* 회원가입 완료 */
    .join_box h3 {font-size: 18px;}
    .join_box p {margin-top: 20px;}

}

@media (max-width: 360px) {

}