@charset "utf-8";
/* 메인 */
.main-bg {overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 113vh; text-align: center;}
.main-page .main-bg {background-color: #aaa; z-index: -999;}
.main-page .main-con {max-width: 1200px; margin: 0 auto;} /* fixed header ->  padding-top: 82px; */

/* 로그인 */
.login-wrap {width: 100%; min-height: 72vh;}
.login-con {width: 40%; box-sizing: border-box; padding: 50px; margin: 110px auto 170px;}
.login-con .title {text-align: center; font-size: 20px; margin-bottom: 25px;}
.login-con .login-input-box > div {display: block; text-align: center; margin: 0 auto;}
.login-con .login-input-box input {display: inline-block; width: 90%; height: 40px; line-height: 40px; margin-right: 0; margin-bottom: 10px; box-sizing: border-box; padding: 7px 10px; border: 1px solid #999; border-radius: 3px;}
.login-con .btn-wrap {width: 100%; text-align: center;}
.login-con .btn-wrap .btn-login {width: 90%; height: 40px; line-height: 40px; margin-bottom: 5px;}
.login-con .login-chk-box {display: flex; width: 90%; margin: 10px auto;}
.login-con .login-chk-box .chk-item {margin-right: 20px;}
.login-con .login-chk-box .chk-item label {font-size: 13px;}
.login-con .login-chk-box .chk-item input[type="checkbox"] {width: 0; height: 0; display: none;}
.login-con .login-chk-box .chk-item input[type="checkbox"] + label {display: inline-block; width: 12px; height: 12px; border: 1px solid #bcbcbc; cursor: pointer; margin-right: 5px; vertical-align: middle; font-size: 13px;}
.login-con .login-chk-box .chk-item input[type="checkbox"]:checked + label {background-color: #ef4036;}
.login-con .login-join-box {display: flex; width: 90%; margin: 15px auto 0; font-size: 12px;}
.login-con .login-join-box p {font-size: 13px; color: #777;}
.login-con .login-join-box span {position: relative; margin-right: 10px; cursor: pointer;}
.login-con .login-join-box p a {margin-left: 5px; color: #186ce9; text-decoration: underline; cursor: pointer;}
.login-con .login-join-box p span:first-child::after {content: ''; display: block; position: absolute; background-color: #bbb; width: 2px; height: 13px; top: 25%; right: -8px;}

.login-txt-box {width: 90%; margin: 0 auto 20px; text-align: center;}
.login-txt-box .login-txt-welcome {font-size: 16px; font-weight: 600; color: #333;}
.login-txt-box p {font-size: 13px; font-weight: 400; margin-top: 10px; color: #666}
.login-con .btn-wrap div:nth-child(2) {width: 90%; margin: 7px auto 0; display: flex; justify-content: space-between;}
.login-con .btn-wrap div:nth-child(2) .btn-find {width: 49%; height: 36px; line-height: 36px;}
.login-con .btn-wrap div:nth-child(2) .btn-join {width: 49%; height: 36px; line-height: 36px;}

/* 회원가입 */
.join-process {margin-bottom: 30px;}
.join-process ul {display: flex; justify-content: space-between; height: 100%;}
.join-process ul li {position: relative; background-color: #fff; flex-grow: 1; font-size: 12px; color: #c2c9d0; height: 34px; line-height: 34px; text-align: center; border-top: 1px solid #d6dce2; border-bottom: 1px solid #d6dce2; box-sizing: border-box;}
.join-process ul li:first-of-type {border-left: 1px solid #d6dce2; border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
.join-process ul li:last-of-type {border-right: 1px solid #d6dce2; border-bottom-right-radius: 3px;}
.join-process ul li+li:before {z-index: 1; content: ''; position: absolute; top: -1px; left: 0; background:url('/images/process.png') -13px -872px no-repeat; width:11px; height:34px;}
.join-process ul li.check {background-color: #ef3f3615; color: #ef4036; font-weight: bold; border-top-color: #ef4036; border-bottom-color: #ef4036;}
.join-process ul li.check:first-of-type {border-left-color: #EF4036;}
.join-process ul li.check:last-of-type {border-right-color: #ef4036;}
.join-process ul li.check + li:before {background-position: 0 -872px;}
.join-process ul li.check:before {background-position: -26px -872px;}
.join-process ul li.complete {color: #666;}

.terms-wrap {border: 1px solid #d7d5d5; background-color: #fbfafa; color: #747474; line-height: 20px; padding: 20px; margin: 0 auto 20px; border: 1px solid #e8e8e8;}
.terms-wrap h3 {margin: 0 0 10px; font-size: 12px; color: #353535;}
.terms-wrap .content {overflow: auto; height: 110px; padding: 20px; border: 1px solid #d5d5d5; background-color: #fff;}
.terms-wrap .content .terms-con-view {word-wrap: break-word;}
.terms-wrap .content .terms-con-view p {padding: 0 0 17px; line-height: 1.5; margin: 0; font-size: 14px;}
.terms-wrap .terms-chk {padding-top: 7px; color: #202020; font-size: 12px; display: flex; justify-content: flex-end; align-items: center;}
.terms-wrap .terms-chk input {width: 13px; height: 13px; margin: 0 8px 0 0; position: relative; display: inline-block;}

.form-wrap .input-item {width: 100%; margin-bottom: 10px; font-size: 14px;}
.form-wrap .input-item label {display: inline-block; width: 15%;}
.form-wrap .input-item input, .form-wrap .input-item select {box-sizing: border-box; padding: 6px 10px; width: 30%; border: 1px solid #ccc; border-radius: 3px; vertical-align: middle;}

.form-wrap .email-type, .form-wrap .address-type, .form-wrap .phone-type {display: flex;}
.form-wrap .input-item.email-type input, .form-wrap .input-item.address-type > div {margin-left: 3px; width: 30%;}
.form-wrap .address-type > div > input {display: block; width: 100%;}
.form-wrap .address-type > div > input.detail {margin-top: 10px;}
.form-wrap .address-type .postcode {margin-bottom: 10px;}
.form-wrap .address-type button, .form-wrap .email-type button {padding: 5px 10px; height: auto!important; line-height: normal; margin-left: 5px;}
.form-wrap .input-item.phone-type > div {width: 30%; display: flex; justify-content: space-between; margin-left: 3px;}
.form-wrap .input-item.phone-type > div select, .form-wrap .input-item.phone-type > div input {width: 32%;}

.join-sec .btn-wrap {margin: 30px auto 10px; text-align: center;}
.join-sec .btn-wrap button {padding: 0 35px;}

.sec-line {height: 1px; background-color: #e1e1e1; width: 100%; margin: 40px 0;}

/* 아이디, 비밀번호 찾기 */
.find-con {width: 100%; box-sizing: border-box; padding: 50px 0; margin: 80px auto 165px;}
.find-con .title {text-align: center; font-size: 20px; margin-bottom: 70px;}

.find-box {display: flex; justify-content: space-around; align-items: center;}
.find-box h5 {text-align: center; font-size: 16px; margin-bottom: 20px;}
.find-box .id, .find-box .pw {width: 45%;}
.find-box .line {width: 1px; height: 250px; background-color: #ccc;}
.find-box .input-item input {display: block; margin: 0 auto; box-sizing: border-box; margin-bottom: 7px; border: 1px solid #aaa; border-radius: 3px; padding: 5px 7px; width: 50%; height: 34px; line-height: 34px;}
.find-box .id .btn-wrap, .find-box .pw .btn-wrap {margin-top: 7px; text-align: center;}
.find-box .id .btn-wrap button, .find-box .pw .btn-wrap button {width: 50%;}

.find-box.result {display: block; width: 70%; padding: 70px 20px; margin: 0 auto;}
.find-box.result h5 {margin-bottom: 70px; font-size: 19px; color: #666;}
.find-box.result p {line-height: 1.5; text-align: center; margin: 0 auto 70px;}
.find-box.result .btn-wrap {display: flex; justify-content: center;}
.find-box.result .btn-wrap button:nth-child(1) {margin-right: 5px;}

/* 약관 */
.terms-sec {padding: 20px; margin: 0 auto; border: 1px solid #d7d5d5; background-color: #fbfafa;}
.terms-sec .terms-con {max-height: 500px; overflow-y: auto; padding: 20px; border: 1px solid #e6e6e6; background-color: #fff; line-height: 23px;}
.terms-sec .terms-con p {padding: 0 0 17px; font-size: 14px;}
.terms-sec .btn-wrap {display: flex; margin-top: 15px; justify-content: center;}

/* 에러 */
.error-wrap {padding: 100px; text-align: center;}
.error-wrap img {width: 320px; margin-bottom: 40px;}
.error-wrap .error-title {font-size: 40px; margin-bottom: 30px;}
.error-wrap span {font-size: 16px;}

@media all and (max-width:1024px) {
    /* 메인 */
    .main-page .main-con {padding: 0 10px;}

    /* 로그인 */
    .login-con {width: 50%; padding: 15px;}
}

@media all and (max-width: 820px) {
    .sub-con .sub-left {display: none!important;}
    .sub-con .sub-right {width: 100%; min-height: 76.3vh; box-sizing: border-box; overflow-x: hidden;}
}

@media all and (max-width:768px) {
    /* 로그인 */
    .login-con {width: 60%; padding: 35px;}

    /* 회원가입 */
    .form-wrap .input-item input, .form-wrap .input-item select, .form-wrap .input-item.email-type input, .form-wrap .input-item.address-type > div, .form-wrap .input-item.phone-type > div {width: 40%;}

    /* 아이디, 비밀번호 찾기 */
    .find-box .input-item input, .find-box .id .btn-wrap button, .find-box .pw .btn-wrap button {width: 70%;}
}

@media all and (max-width:568px) {
    /* 메인 */
    .main-page .main-con {padding: 0 20px;}

    /* 로그인 */
    .login-con {width: 100%; padding: 15px;}
    .login-txt-box p {width: 80%; white-space: normal; word-break: keep-all; margin: 10px auto; line-height: 125%;}
    .login-con .login-chk-box .chk-item input[type="checkbox"] + label.label-cb {width: 12px; height: 12px;}

    /* 회원가입 */
    .join-process {margin-bottom: 15px;}
    .join-process ul li {line-height: 31px;}

    .terms-wrap {padding: 15px; margin: 0 auto 10px;}
    .terms-wrap .content {padding: 10px; max-height: 110px;}
    .terms-wrap .content .terms-con-view p {padding: 0 0 10px; font-size: 13px;}

    .form-wrap .input-item {font-size: 13px;}
    .form-wrap .input-item label {width: 30%;}
    .form-wrap .input-item.address-type > div, .form-wrap .input-item.phone-type > div {width: 65%;}
    .form-wrap .input-item.address-type .postcode {margin-left: 0;}
    .form-wrap .input-item.address-type .postcode .join-input {width: 40%;}

    .sec-line {margin: 20px 0;}

    /* 아이디, 비밀번호 찾기 */
    .find-con {margin: 0 auto 40px;}
    .find-con .title {margin-bottom: 50px;}
    .find-box {display: block;}
    .find-box .id, .find-box .pw {margin: 0 auto; width: 100%;}
    .find-box .line {width: 100%; height: 0; background-color: transparent; margin: 30px auto;;}

    .find-box.result h5 {font-size: 18px;}
    .find-box.result p {font-size: 14px;}
    
    /*약관 */
    .terms-sec {padding: 15px;}
    .terms-sec .terms-con {padding: 10px; line-height: 20px;}
    .terms-sec .terms-con p {font-size: 13px; padding: 0 0 10px;}

    /* 에러 */
    .error-wrap {padding: 20px;}
    .error-wrap img {width: 200px;}
    .error-wrap span {font-size: 14px;}
}


@media all and (max-width:320px) {
    /* 로그인 */
    .login-con .login-join-box p {font-size: 11px;}
    .login-con .login-chk-box .chk-item input[type="checkbox"] + label.label-cb {width: 10px; height: 10px;}

    /* 회원가입 */
    .form-wrap .input-item input, .form-wrap .input-item.email-type input {width: 37%;}
}