@charset "UTF-8";

.wrap {overflow-y: auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

#find_wrap {width: 100%; max-width: 480px;}

#find_wrap .box {padding: 30px 26px 14px; background: #F9F9F9; border: var(--border-solid);}
#find_wrap .box h1 {width: 100%; height: 30px; margin-bottom: 14px; font-weight: 500; font-size: 1.125em; color: #555555; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end;}
#find_wrap .box h1 .logo {width: 100%; max-width: fit-content; height: 100%;}
#find_wrap .box h1 .logo img {width: 100%; height: 100%;}


.find_form {border-top: var(--border-solid); padding-top: 14px;}
.find_form .tit {font-weight: 500; font-size: 1em;}
.find_form .txt {font-weight: 300; font-size: 0.938em;}
.find_form .input_area .box_detail {position: relative;}
.input_label {display: inline-block; width: 100px; font-size: 1em;}
.find_form .input_area .box_detail .find {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
#find_form1 .input_area .box_detail .find input {border: var(--border-solid); padding: 10px; width: calc(100% - 100px);}
#find_form1.find_form_pw .input_area .box_detail .find input {width: 100%;}
#find_form1 .input_area .box_detail .find input::placeholder {font-size: 0.875em;}
/* .find_form2 {display: none;} */
.id-label {margin-right: 10px;}

.btn_area {width: 100%; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.btn_next, .btn_login, .btn_find {width: 100%; padding: 10px 0; margin-top: 30px; margin-bottom: 12px; cursor: pointer; font-size: 1.125em; color: var(--white);}
.btn_next, .btn_login {background: var(--highlight);}
.btn_find {background: #000; margin-left: 20px;}
.btn_login {display: inline-block;}

.guide {color: #767676; font-size: 0.875em; padding: 0 26px;}
.guide li {list-style: circle;}
.guide li a {position: relative; display: inline-block; color: #767676; margin-left: 10px;}
.guide li a::after {position: absolute; bottom: -2px; left: 0; right: 0; display: inline-block; content: ''; width: 100%; height: 1px; background: #767676;}





@media screen and (min-width:993px){

}

@media screen and (max-width:992px){
    .wrap {padding: 100px 50px;}
}

@media screen and (max-width:480px){
    .wrap {padding: 100px 16px;}
    #login_wrap .box h1 {height: 24px;}
}