@charset "utf-8";

.form-title {font-size: 22px; text-align: center; margin-bottom: 70px;}
.login-box {width: 600px; margin: 0 auto;}
.login-box .input-text {margin-bottom: 10px;}
.login-box .input-check {margin: 20px 0 30px; text-align: left;}
.form-wrap input[type=text], .form-wrap input[type=number], .form-wrap input[type=password], .form-wrap select {box-sizing: border-box; width: 100%; height: 55px; padding: 20px 25px; border: 1px solid #ddd; font-size: 14px;}
.form-wrap input::placeholder {color: #999;}
.input-check label {font-size: 15px; color: #666;}
.input-check .label-cb {width: 16px; height: 16px;}
.input-check input[type=checkbox] {width: 0; height: 0; display: none;}
.input-check input[type=checkbox] + label.label-cb {display: inline-block; border: 1px solid #c9c9c9; cursor: pointer; margin-right: 6px; vertical-align: sub;}
.input-check input[type="checkbox"]:checked + label.label-cb {position: relative;}
.input-check input[type="checkbox"]:checked + label.label-cb::after {content: url('/front/images/ico_check.png'); position: absolute; left: 1px; top: 0px;}
.input-btn input[type=button] {width: 100%; height: 55px; background-color: #00498c; color: #fff; font-weight: 600; font-size: 15px; text-align: center; border: none; cursor: pointer;}
.input-btn input[type=button]:nth-child(2) {width: 100%; height: 55px; background-color: #857c68; color: #fff; font-weight: 600; font-size: 15px; text-align: center; border: none; cursor: pointer; margin-top: 10px;}
.login-box .login-service {display: flex; justify-content: space-between; margin-top: 22px; margin-bottom: 50px;}
.login-box .login-service a {font-size: 14px; color: #666; cursor: pointer;}

.sns-login-wrap {width: 600px; margin: 0 auto; text-align: center;}
.sns-login-box {width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #666; margin-bottom: 10px; cursor: pointer;}
.sns-login-box:last-child {margin-bottom: 0;}
.sns_ver1 {margin-bottom: 80px;}
.sns_ver1 .sns-login-box {border: 1px solid #ddd;}
.sns_ver1 .sns-login-box img {margin-right: 4px;}
.sns_ver2 .sns-login-box img {margin-right: 8px;}
.sns_ver2 .naver {border: 2px solid #3bab36;}
.sns_ver2 .kakao {border: 2px solid #efd602;}
.sns_ver2 .fb {border: 2px solid #3a5ca9;}
.sns_ver2 .google {border: 2px solid #da4233;}

.form-item {width: 600px; margin: 0 auto 25px;}
.form-item select {width: 100%; border: 1px solid #ddd; padding: 15px 20px; box-sizing: border-box; font-size: 15px; }
.form-item select {background-image: url(/front/images/ico_select_gray.png); background-repeat: no-repeat; background-position: 97% 50%; background-size: 8px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: #666;}
.form-item-title {color: #333; font-size: 16px; font-weight: 500; margin-bottom: 10px; display: inline-block;}
.form-comment {color: #b17900; font-size: 13px; margin-left: 8px;}
.form-item > div {margin-bottom: 6px;}
.form-find {width: 600px; margin: 0 auto 100px;}
.form-find-title {color: #333; font-size: 17px; font-weight: 500; margin-bottom: 10px; display: inline-block;}
.form-find > div {margin-bottom: 6px;}
.form-find > p {font-size: 14px; margin-bottom: 8px;}
.has-btn {position: relative;}
.has-btn input[type=button] {position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 150px; height: 40px; line-height: 2px; text-align: center; color: #fff; background-color: #00498c; cursor: pointer; border: none; font-weight: 600;}
.btn-gray {background-color: #666!important;}
.btn-white {border: 2px solid #ddd!important; color: #666!important; background-color: #fff!important;}
.input-email-wrap {display: flex; align-items: center;}
.input-email-wrap .input-email:first-of-type {width: calc(25% - 10px);}
.input-email-wrap .input-email {width: calc(40% - 10px);}
.input-email-wrap .input-select {width: calc(34% - 10px); margin-left: 10px;}
.input-email-wrap span {display: inline-block; width: 20px; margin: 0 5px; text-align: center;}
.input-btn-wrap {width: 600px; margin: 60px auto 0; display: flex; justify-content: space-between;}
.input-btn-wrap .input-btn {width: calc(50% - 10px);}

@media all and (max-width:1024px) { /* tablet */
    .login-box {width: 400px;}
    .form-wrap input[type=text], .form-wrap input[type=number], .form-wrap input[type=password], .form-wrap select {height: 45px}
    .form-item select {padding: 10px 15px; font-size: 14px;}
    .input-btn input[type=button] {height: 45px;}
    .input-btn input[type=button]:nth-child(2) {height: 45px;}
    .sns-login-wrap {width: 400px}
    .sns-login-box {height: 45px;}
    .input-btn-wrap {margin: 40px auto 0;}
}

@media all and (max-width:568px) { /* mobile */
    .form-title {font-size: 20px; margin-bottom: 30px;}
    .login-box {width: 100%;}
    .login-box .input-text {margin-bottom: 5px;}
    .login-box .input-check {margin: 10px 0 15px;}
    .form-wrap input[type=text], .form-wrap input[type=number], .form-wrap input[type=password], .form-wrap select {height: 35px; padding: 10px 13px; font-size: 13px;}
    .input-check label {font-size: 13px; color: #666;}
    .input-check .label-cb {width: 13px; height: 13px;}
    .input-check input[type=checkbox] + label.label-cb {margin-right: 4px; vertical-align: middle;}
    .input-check input[type="checkbox"]:checked + label.label-cb::after {content: url('/front/images/ico_check.png'); position: absolute; left: 1px; top: 0px;}
    .input-btn input[type=button] {width: 100%; height: 35px; font-size: 14px;}
    .input-btn input[type=button]:nth-child(2) {width: 100%; height: 35px; font-size: 14px;}
    .login-box .login-service {margin-top: 10px; margin-bottom: 50px;}
    .login-box .login-service a {font-size: 13px;}
    
    .sns-login-wrap {width: 100%;}
    .sns-login-box {height: 35px; font-size: 13px; margin-bottom: 5px;}
    .sns-login-box:last-child {margin-bottom: 0;}
    .sns_ver1 {margin-bottom: 30px;}
    .sns_ver1 .sns-login-box img {margin-right: 3px; height: 12px; width: fit-content;}
    .sns_ver2 .sns-login-box img {margin-right: 5px; height: 16px;}

    .form-item {width: 100%; margin: 0 auto 20px;}
    .form-item select {padding: 6px 10px; font-size: 13px;}
    .form-item-title {font-size: 14px; margin-bottom: 10px;}
    .form-comment {font-size: 12px; margin-left: 5px;}
    .form-item > div {margin-bottom: 4px;}
    .form-find {width: 100%; margin: 0 auto 80px;}
    .form-find-title {font-size: 15px; margin-bottom: 10px;}
    .form-find > div {margin-bottom: 4px;}
    .form-find > p {font-size: 12px; margin-bottom: 5px;}
    .has-btn input[type=button] {right: 5px; width: 80px; height: 26px; font-size: 12px;}
    /* .input-email-wrap .input-email {width: calc(33% - 7px);} */
    .input-email-wrap {display: block;}
    .input-email-wrap .input-email:first-of-type {width: 100%}
    .input-email-wrap .input-email {width: 100%}
    .input-email-wrap .input-select {width: calc(34% - 7px); margin-left: 5px;}
    .input-email-wrap span {width: 14px; margin: 0 3px; font-size: 13px;}
    .input-btn-wrap {width: 100%; margin: 30px auto 0;}
    .input-btn-wrap .input-btn {width: calc(50% - 5px);}

}