@charset "UTF-8";

#find_wrap {width: 100%; max-width: 500px;}

#find_wrap .box {padding: 36px 26px 14px; background: var(--white-gray);}
#find_wrap .box .top {position: relative; width: 100%; margin-bottom: 14px; font-weight: 500; font-size: 1.125rem; line-height: 1; color: #1E1E1E; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap;}
#find_wrap .box .top .logo {display: block; height: 60px;}
#find_wrap .box .top .logo img {display: block; height: 100%; object-fit: contain;}
#find_wrap .box .top::after {content: ''; width: 100%; height: 1px; background: var(--border); margin-top: 14px;}

.find-form .tit {font-weight: 500; font-size: 1rem;}
.find-form .txt {font-weight: 300; font-size: 0.938rem;}

.info-area {margin-top: 30px;}

.ul-find .td {display: -webkit-flex; display: flex; justify-content: start; align-items: center; margin-bottom: 10px;}
.ul-find .td:last-child {margin-bottom: 0;}

.btn-area {width: 100%; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 20px;}
.btn-next, .btn-login, .btn-find {width: 100%; margin-top: 30px;}
.btn-next, .btn-login {background: var(--highlight);}
.btn-find {background: var(--dark);}

.guide {padding: 0 26px; font-weight: 300; font-size: 0.875rem; color: #686868; margin-top: 14px;}
.guide li {list-style: circle;}
.guide li a {position: relative; display: inline-block; color: #686868; margin-left: 10px;}
.guide li a::after {position: absolute; bottom: 0; left: 0; right: 0; display: inline-block; content: ''; width: 100%; height: 1px; background: #686868;}





@media screen and (min-width:993px){
}

@media screen and (max-width:992px){
}

@media screen and (max-width:768px){
    .ul-find .item {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .input-label {width: 100%; margin-bottom: 10px;}
}

@media screen and (min-width:501px){
    .wrap {overflow-y: auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

    #find_wrap .box {border: var(--border-solid); border-radius: 6px;}
}

@media screen and (max-width:480px){
    .wrap {background: var(--white-gray);}

    #find_wrap .box {padding: 6.25% 3.3% 2.9%;}
    #find_wrap .box .top .logo {height: 30px;}

    .guide {width: calc(100% - 6.6%); margin: 0 auto; padding-top: 2.9%; border-top: var(--border-solid);}
}