/* TOP */
.sec-subvisual.sub9 { background-image: url('../img/visual_sub1.png'); }
.sec-submenu.sub9 .submenu li { width: 20%; }

@media all and (max-width: 800px) {
    .sec-subvisual.sub9 { background-image: url('../img/m_visual_sub1.png'); }
}

/* SUB 9: 로그인 / 회원가입 */

/* 로그인 */
.sec-login { background: #FAF7F4; }
.sec-login .inner { flex-flow: column; padding: 65px 20px 120px; }
.sec-login h3 { padding-bottom: 40px; font-size: 15px; font-weight: 500; letter-spacing: .3em; color: #5E4F44; }
.sec-login .card { max-width: 1060px; width: 100%; padding: 67px 38px 57px; background: #fff; box-shadow: 6px 8px 16px 0 rgba(73, 73, 75, 0.06); }
.sec-login .card-top, .sec-login .loginCard-bottom { padding: 0 143px;}
.sec-login .card-top { padding-bottom: 52px;}
.sec-login .card-top .form-group { width: 100%; display: flex; }
.sec-login .card-top .input-group {width: calc(100% - 106px - 17px); }
.sec-login .card-top .input-group > div { height: 47px; }
.sec-login .card-top .input-group > div:last-child { margin-top: 33px; }
.sec-login .card-top .label-text { width: 100px; min-width: 100px; font-size: 18px; font-weight: 600; color: #484745; }
.sec-login .card-top input { width: calc(100% - 100px); height: 100%; padding: 0 14px; border: 1px solid #dbdbdb; box-sizing: border-box; outline: none; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 500; color: #484745; }
.sec-login .card-top .login-btn { width: 106px; height: 127px; margin-left: 17px; background: #5E4F44; font-size: 22px; font-weight: 600; color: #fff; }
.sec-login .card-top .btn-group { padding: 32px 123px 0 100px; }
.sec-login .card-top .btn-group a { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sec-login .card-top .btn-group a:before { content: ''; order: -2; }
.sec-login .card-top .btn-group a:after { content: ''; order: -1; width: 1px; height: 14px; margin: 0 12px; }
.sec-login .card-top .naver-btn { background: #3cae00; color: #fff; }
.sec-login .card-top .naver-btn:before { width: 18px; height: 17px; background: url('../img/ic_naver.png') no-repeat center/contain; }
.sec-login .card-top .naver-btn:after { background: #fff; }
.sec-login .card-top .kakao-btn { margin-left: 12px; background-color: #ffe500; color: #342a30; }
.sec-login .card-top .kakao-btn:before { width: 27px; height: 25px; background: url('../img/ic_kakao.png') no-repeat center/contain }
.sec-login .card-top .kakao-btn:after { background: #342a30; }
.sec-login .card-bottom { padding: 48px 143px 0; border-top: 1px solid #e1e1e1; }
.sec-login .card-bottom > div { display: flex; align-items: center; justify-content: space-between; }
.sec-login .card-bottom > div:not(:first-child) { padding-top: 16px; }
.sec-login .card-bottom .label { display: inline-flex; align-items: center; font-size: 18px; font-weight: 600; color: #484745; }
.sec-login .card-bottom .label:before { content: ''; width: 5px; min-width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: #cfd0d1;  }
.sec-login .card-bottom > div a { width: 231px; min-width: 231px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfd0d1; font-size: 18px; font-weight: 600; color: #484745; }

@media all and (max-width: 800px) {
    .sec-login .inner { padding: 12.5vw 6.25vw 15.625vw; }
    .sec-login .card { padding: 60px 40px; }
    .sec-login .card-top, .sec-login .loginCard-bottom { padding: 0 20px; }
    .sec-login .card-top { padding-bottom: 40px; }
    .sec-login .card-top .form-group { flex-direction: column; }
    .sec-login .card-top .input-group { width: 100%; }
    .sec-login .card-top .input-group > div:last-child { margin-top: 28px; }
    .sec-login .card-top .login-btn { margin-left: 0; width: 100%; height: 46px; margin-top: 28px; }
    .sec-login .card-top .btn-group { padding: 28px 0 0; }
    .sec-login .card-bottom { padding: 40px 0px 0; }
    .sec-login .card-bottom > div a { width: 180px; min-width: 180px; }
}
@media all and (max-width: 640px) {
    .sec-login .card { padding: 9.375vw 6.25vw 12.5vw; }
    .sec-login .card-top, .sec-login .loginCard-bottom { padding: 0; }
    .sec-login .card-top { padding-bottom: 6.25vw; }
    .sec-login .card-top .input-group > div { flex-direction: column; align-items: flex-start; height: auto; margin-bottom: 6.25vw; }
    .sec-login .card-top input { width: 100%; }
    .sec-login .card-top .login-btn { margin-top: 0; }
    .sec-login .card-top .btn-group { padding: 6.25vw 0 0; }
    .sec-login .card-bottom { padding: 6.25vw 0 0; }
    .sec-login .card-bottom > div { flex-direction: column; }
    .sec-login .card-bottom > div:not(:first-child) { padding-top: 6.25vw; }
    .sec-login .card-bottom > div a  { width: 56.25vw; height: 11.25vw; padding: 0 2.5vw; margin: 2.8125vw 0 0px; font-size: 3.9063vw; }
    .sec-login h3 { font-size: 3.4375vw; }
    .sec-login .card-top .label-text { margin-bottom: 2.5vw; font-size: 3.75vw; }
    .sec-login .card-top .login-btn { height: 12.1875vw; font-size: 4.6875vw; }
    .sec-login .card-top .btn-group { flex-direction: column; padding-top: 6.25vw; margin-top: 6.25vw; border-top: 1px solid #e1e1e1; }
    .sec-login .card-top .btn-group a { height: 12.1875vw; }
    .sec-login .card-top .btn-group a, .sec-login .card-bottom .label, .sec-login .card-bottom > div a { font-size: 3.75vw ; }
    .sec-login .card-top .kakao-btn { margin-left: 0; margin-top: 2.5vw; }
    .sec-login .card-top input { height: 11.25vw; padding: 0 2.5vw; font-size: 3.125vw; }
    .sec-login .card-top .naver-btn:before { width: 3.75vw; height: 3.5938vw; }
    .sec-login .card-top .kakao-btn:before { width: 5vw; height: 4.6875vw; }
}
@media all and (max-width: 560px) {
}


/* 이용약관 */
.sec-terms { background: #FAF7F4; }
.sec-terms .inner { flex-flow: column; padding: 65px 20px 120px; }
.sec-terms h3 { padding-bottom: 40px; font-size: 15px; font-weight: 500; letter-spacing: .3em; color: #5E4F44; }
.sec-terms .card { max-width: 1060px; width: 100%; padding: 67px 146px 57px; background: #fff; box-shadow: 6px 8px 16px 0 rgba(73, 73, 75, 0.06); }
.sec-terms .checkbox-alone { display: flex; align-items: center; justify-content: center; padding-bottom: 60px; }
.sec-terms .checkbox-alone .checkbox-label { font-size: 20px; }
.sec-terms .form-group { width: 100%; }
.sec-terms .form-group:nth-child(n+2) { margin-top: 24px; }
.sec-terms .checkbox-wrap { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; }
.sec-terms .toggle-btn { font-size: 18px; font-weight: 400; color: #a2a2a2; }
.sec-terms .toggle-btn.hide { display: none; }
.sec-terms .terms-box { height: 170px; overflow-y: auto; padding: 20px 25px 15px 35px; background: #FAF7F4; font-size: 14px; line-height: 1.71; color: #484745; transition: height .2s; }
.sec-terms .terms-box.hide { height: 0; padding: 0; overflow: hidden; }
.sec-terms .btn-group { width: 100%; padding-top: 65px; }
.sec-terms .btn-group a { width: 230px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sec-terms .btn-group a:not(:first-child) { margin-left: 12px; }
.sec-terms .btn-group a.sns:before { content: ''; order: -2; }
.sec-terms .btn-group a.sns:after { content: ''; order: -1; width: 1px; height: 14px; margin: 0 12px; }
.sec-terms .register-btn { background: #5E4F44; color: #fff; }
.sec-terms .naver-btn { margin-left: 12px; background: #3cae00; color: #fff; }
.sec-terms .naver-btn:before { width: 18px; height: 17px; background: url('../img/ic_naver.png') no-repeat center/contain; }
.sec-terms .naver-btn:after { background: #fff; }
.sec-terms .kakao-btn { background-color: #ffe500; color: #342a30; }
.sec-terms .kakao-btn:before { width: 27px; height: 25px; background: url('../img/ic_kakao.png') no-repeat center/contain }
.sec-terms .kakao-btn:after { background: #342a30; }
/* 이용약관 checkbox custom */
.sec-terms .checkbox { position: relative; display: flex; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer;}
.sec-terms .checkbox-label { font-size: 18px; font-weight: 600; color: #9d9d9d; }
.sec-terms .checkbox input { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; width: 0; height: 0; }
.sec-terms .checkmark { position: relative; top: -0.5px; left: 0; display: inline-block; width: 23px; height: 23px; background: #fff; border-radius: 50%; border: 2px solid #9f9f9f; border-collapse: separate; margin-right: 9px; }
.sec-terms .checkmark:after{ content: ''; position: absolute; top: 45%; left: 22%; display: table; width: 30%; height: 56%; border: 2px solid #9d9d9d; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) translate(-50%,-50%); transform: rotate(45deg) translate(-50%,-50%); }
.sec-terms .checkbox input:checked ~ .checkmark { border-color: #484745; }
.sec-terms .checkbox input:checked ~ .checkmark:after{ content: ''; position: absolute; display: table; border: 2px solid #484745; border-top: 0; border-left: 0;}
.sec-terms .checkbox input:checked ~ .checkmark ~ .checkbox-label{color: #484745;}

@media all and (max-width: 800px) {
    .sec-terms .inner { padding: 65px 40px 120px; }
    .sec-terms .card { padding: 60px 40px; }
    .sec-terms .btn-group-wrap { flex-direction: column; width: 100%; }
    .sec-terms .btn-group a { width: 100%; }
    .sec-terms .btn-group a.naver-btn { margin-left: 0; }
    .sec-terms .btn-group.g2 { padding-top: 28px; }
}
@media all and (max-width: 640px) {
    .sec-terms .inner { padding: 12.5vw 6.25vw 15.625vw; }
    .sec-terms .card { padding:  9.375vw 6.25vw; }
    .sec-terms .checkmark { width: 3.75vw; height: 3.75vw; margin-right: 1.5625vw; border: 0.3125vw solid #9f9f9f; }
    .sec-terms .checkmark:after { border: 0.3125vw solid #9f9f9f; border-top: 0; border-left: 0; }
    .sec-terms .checkbox-wrap { height: 9.375vw; }

    .sec-terms .checkbox-alone { padding-bottom: 6.25vw; }
    .sec-terms .checkbox-alone .checkbox-label { font-size: 3.4375vw; }
    .sec-terms .checkbox-label, .sec-terms .toggle-btn { font-size: 3.4375vw; }
    .sec-terms .terms-box { padding: 3.75vw 5vw; font-size: 3.15vw; }

    .sec-terms .form-group:nth-child(n+2) { margin-top: 3.75vw; }

    .sec-terms h3 { font-size: 3.4375vw; padding-bottom: 6.25vw; }
    .sec-terms .btn-group { flex-wrap: wrap; padding-top: 6.25vw; }
    .sec-terms .btn-group a { width: calc((100% - 16px) / 2); font-size: 3.75vw; }
    .sec-terms .btn-group a.register-btn { width: 100%; height: 11.25vw; font-size: 4.6875vw; }
    .sec-terms .btn-group a:not(:first-child) { margin-left: 0; }
    .sec-terms .btn-group a.kakao-btn { margin-left: 16px; }
    .sec-terms .btn-group.g2 { flex-direction: column; padding-top: 6.25vw; margin-top: 6.25vw; border-top: 1px solid #e1e1e1; }
    .sec-terms .btn-group.g2 a { width: 100%; height: 11.25vw; margin-left: 0; }
    .sec-terms .btn-group.g2 .kakao-btn { margin-left: 0; margin-top: 2.5vw; }
    
    .sec-terms .naver-btn:before { width: 3.75vw; height: 3.5938vw; }
    .sec-terms .kakao-btn:before { width: 5vw; height: 4.6875vw; }
}
@media all and (max-width: 560px) {
    .sec-terms .btn-group a { width: 100%; }
}



/* 회원가입 */
.sec-register { background: #FAF7F4; }
.sec-register .inner { flex-flow: column; padding: 65px 20px 120px; }
.sec-register h3 { padding-bottom: 40px; font-size: 15px; font-weight: 500; letter-spacing: .3em; color: #5E4F44; text-align: center; }
.sec-register .card { max-width: 1060px; width: 100%; height: 586px; padding: 67px 100px 37px; background: #fff; box-shadow: 6px 8px 16px 0 rgba(73, 73, 75, 0.06); }
.sec-register .register-tab { padding-bottom: 64px; }
.sec-register .register-tab > li { width: 153px; margin: 0 15px; display: inline-flex; border-radius: 5px; border: 1px solid #5E4F44; font-size: 16px; color: #484745; cursor: pointer; }
.sec-register .register-tab > li.active { background: #5E4F44; color: #fff; }
.sec-register .register-tab > li a { display: flex; width: 100%; height: 100%; padding: 7px 10px; align-items: center; justify-content: center; }
.sec-register input:not([type=checkbox]) { width: 100%; height: 47px; padding: 4px 14px; box-sizing: border-box; outline: 0; border: 1px solid #cfd0d1; font-family: 'Pretendard', sans-serif;  font-size: 18px; font-weight: 500; }
.sec-register select { width: 100%; height: 47px; padding: 4px 32px 4px 12px; outline: 0; border: 1px solid #cfd0d1; text-overflow: ellipsis; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 500; background: #fff url('../img/ic_selectArrow.png') no-repeat 90% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.sec-register select::-ms-expand { display: none; }
.sec-register .form-group { display: flex; align-items: center; }
.sec-register .form-group:not(.first) { margin-top: 33px; }
.sec-register .label-text { width: 102px; min-width: 102px; font-size: 18px; font-weight: 600; color: #484745; }
.sec-register .input-connect { width: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: #9f9f9f; }
.sec-register .input-group { width: 100%; max-width: 475px; display: flex; align-items: center; }
.sec-register .input-group.vertical { width: 100%; max-width: 475px; display: flex; flex-flow: column; align-items: center; }
.sec-register .input-group.vertical input:not(:first-child) { margin: 15px 0 0; }
.sec-register .input-group .email { position: relative; }
.sec-register .check-group { display: flex; align-items: center; }
.sec-register .check-group label { padding-left: 7px; font-size: 16px; color: #484745; }
.sec-register .check-group input[type=checkbox] { margin: 0; }
.sec-register .form-group.ema select { width: 141px; margin-left: 28px; }
.sec-register .check-group .flex-center{ margin-left: 19px; }
.sec-register .notice-text { margin-top: 20px; padding-left: 102px; font-size: 15px; font-weight: 300; color: #9f9f9f; }
.sec-register .btn-group { padding-top: 65px; }
.sec-register .btn-group a { width: 230px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; }
.sec-register .btn-group a:not(:first-child) { margin-left: 52px; }
.sec-register .confirm-btn { background: #5E4F44; }
.sec-register .back-btn { background: #9bb6f8; }

@media all and (max-width: 800px) {
    .sec-register .inner { padding: 65px 40px 120px; }
    .sec-register .card { padding: 60px 40px; height: auto; }
    .sec-register .input-group, .sec-register .input-group.vertical { max-width: calc(100% - 102px); }
    .sec-register .check-group { width: 100%; padding-left: 102px; margin-top: 8px; }
    .sec-register .check-group .flex-center { margin-left: 0; }
    .sec-register .form-group.hp { flex-wrap: wrap; }
    .sec-register .form-group.ema { flex-wrap: wrap; }
    .sec-register .btn-group { width: 100%; }
    .sec-register .btn-group a { width: 50%; }
}
@media all and (max-width: 640px) {
    .sec-register .inner { padding: 12.5vw 6.25vw 15.625vw; }
    .sec-register h3 { padding-bottom: 6.25vw; }
    .sec-register h3, .sec-register .notice-text { font-size: 3.4375vw; }
    .sec-register .label-text { margin-bottom: 2.5vw; font-size: 3.3475vw; }
    .sec-register input:not([type=checkbox]), .sec-register select { height: 11.25vw; font-size: 3.3475vw; }
    .sec-register input:not([type=checkbox]) { padding: 0 2.5vw; }
    .sec-register select { padding: 0 5vw 0 2.5vw; background-size: 2.5vw; }
    .sec-register .check-group label { font-size: 3.4375vw; }
    .sec-register .input-group.vertical input:not(:first-child) { margin-top: 2.5vw; }

    .sec-register .card { padding:  9.375vw 6.25vw; }
    .sec-register .form-group { flex-direction: column; align-items: flex-start; }
    .sec-register .input-group, .sec-register .input-group.vertical { max-width: 100%; }
    .sec-register .form-group:not(.first) { margin-top: 6.25vw; }
    .sec-register .btn-group { padding-top: 7.0313vw; }
    .sec-register .btn-group a { font-size: 3.75vw; height: 9.375vw; }
    .sec-register .btn-group a:not(:first-child) { margin-left: 3.125vw; }
    .sec-register .check-group { padding-left: 0; }
    .sec-register .notice-text { padding-left: 0; }
    .sec-register .form-group.ema select { margin-left: 2.5vw; }

    .sec-register .input-connect { width: 4.6875vw; min-width: 4.6875vw; font-size: 3.75vw; }

    .sec-register .register-tab > li { width: calc((100% - 1.5625vw*2) / 3); height: 10.9375vw; margin-right: 1.5625vw; font-size: 3.75vw; font-weight: 500; }
    .sec-register .register-tab > li:last-child { margin-right: 0; }
}


/* 회원가입 - 비밀번호변경, 회원탈퇴, 찾기 */
.sec-register .register-form { height: calc(100% - 95px); }
.sec-register .find-form { height: calc(100% - 131px); }
.sec-register .register-form fieldset, .sec-register .find-form fieldset { height: 100%; }
.sec-register .card.find { padding-left: 38px; padding-right: 38px; }
.sec-register .card.find .register-tab { padding-bottom: 40px; }
.sec-register .tab-wrap { padding-bottom: 40px; border-bottom: 1px solid #cfd0d1; }
.sec-register .tab-text { text-align: center; font-size: 16px; font-weight: 300; color: #484745; word-break: keep-all; }
.sec-register .center-form { height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; }
.sec-register .center-form .form-group { width: 100%; max-width: 860px; justify-content: center; }
.sec-register .center-form .label-text { width: auto; white-space: nowrap; padding-right: 37px; }
.sec-register .center-form .input-group { max-width: 474px; }
.sec-register .center-form .notice-text { padding-left: 262px; }

@media all and (max-width: 800px) {
    .sec-register .register-tab { padding-bottom: 48px; }
    .sec-register .center-form { padding-top: 0px; }
    .sec-register .center-form .notice-text { padding-left: 0; }
}
@media all and (max-width: 640px) {
    .sec-register .card.find { padding-left: 6.25vw; padding-right: 6.25vw; }
    .sec-register .card.find .register-tab { padding-bottom: 6.25vw; }
    .sec-register .register-tab > li { font-size: 3.4375vw; margin: 0 1.5625vw 0 0; }
    .sec-register .register-tab.tab2 > li { width: 25vw; }
    .sec-register .register-tab > li a { padding: 1.0938vw 1.5625vw; }
    .sec-register .tab-wrap { padding-bottom: 9.375vw; margin-bottom: 9.375vw; }
    .sec-register .tab-text { font-size: 3.75vw; }
}
/* @media all and (max-width: 440px) {
    .sec-register .register-tab { flex-direction: column; }
    .sec-register .register-tab > li { width: 100%; }
    .sec-register .register-tab > li:nth-child(n+2) { margin-left: 0; margin-top: 1.875vw; }
} */