/* ======== 로그인 ======== */
.login_title {display: flex; width: 100%; flex-direction: column; align-items: flex-start; padding: 40px 0 30px;}
.login_title .logo {margin-bottom: 30px;}
.login_title dl {display: flex; flex-direction: column; width: 100%; align-items: flex-start; gap: 10px;}
.login_title dt {font-size: 26px;}
.login_title dd {font-size: 18px; color: #333;}

.input_item {display: flex; flex-direction: column; width: 100%; align-items: flex-start; gap: 20px;}
.input_item .main_tit {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.input_item .main_tit.col {flex-direction: column; align-items: flex-start; gap: 10px;}
.input_item .main_tit span {font-family:'NanumSquareNeoExtraBold' !important; font-size: 18px; color: #333;}
.input_item .input_box {width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.input_box + .input_box {padding-top: 5px;}

.input_item .input_box > span {font-size: 16px; color: #555; line-height: 1;}
.input_box .input_con {width: 100%; position: relative;}
.flex {display: flex; gap: 12px; width: 100%;}
.flex.col {flex-direction: column;}


.alert_box {width: 100%; display: flex; align-items: center; gap: 20px;}
.alert_box dl {display: flex; align-items: center; gap: 8px;}
.alert_box dt {display: block; width: 14px; height: 14px; background: url(../img/icon_alert.png) no-repeat center/contain;}
.alert_box dd {font-size: 15px; color: #aaa;}
.alert_box dl.red dt {background: url(../img/icon_alert_red.png) no-repeat center/contain;}
.alert_box dl.green dt {background: url(../img/icon_alert_red.png) no-repeat center/contain;}
.alert_box dl.red dd {color: #E32200;}
.alert_box dl.green dd {color: #19C552;}


.login_menu {display: flex; flex-direction: column; width: 100%; align-items: center; gap: 15px; padding-top: 10px;}
.login_menu span {font-size: 16px; color: #555; border-bottom: 1px solid #555; font-family:'NanumSquareNeoBold' !important;}

.bottom {padding: 50px 0 30px; display: flex; flex-direction: column; gap: 10px;}
.bottom.row {flex-direction: row;}
.bottom.fixed {position: fixed; bottom: 0; left: 0; padding: 50px 20px 30px; width: 100%; z-index: 20;}
.bottom.bg_gray {background: linear-gradient(to top, #F5F5F5 80%, #F5F5F500);}

.login_box {display: flex; width: 100%; flex-direction: column; gap: 20px;}



/* ======== 회원가입 ======== */
.data_list {display: flex; width: 100%; flex-direction: column; gap: 40px;}
.input_con.add_btn {display: flex; gap: 8px; align-items: center;} 
/* .input_con.certi_num {width: 70%;} */
.input_con.add_btn button {min-width: 20%; max-width: max-content;}
.input_con.certi_num .due_time {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 18px; font-weight: 700; color: #E32200;}



/* ======== 아이디/비번찾기 ======== */
.tab_box {width: 100%; display: flex; padding-bottom: 30px;}
.tab_box span {width: 50%; font-size: 18px; color: #777; background-color: #f7f7f7; border-bottom: 3px solid #f7f7f7; padding: 24px 10px; text-align: center;}
.tab_box span.on {background-color: #fff; border-color: #E32200; color: #222;}
.find_title {font-size: 16px; padding-bottom: 20px;}

.done_title {display: flex; flex-direction: column; width: 100%; align-items: center; gap: 20px; padding: 60px 0 30px;}
.done_title i {display: block; width: 60px; aspect-ratio: 1; background: url(../img/icon_done.png) no-repeat center/contain;}
.done_title dl {display: flex; flex-direction: column; align-items: center; gap: 5px;}
.done_title dt {font-size: 22px; text-align: center;}
.done_title dd {font-size: 18px; color: #666; text-align: center; padding: 0 20px;}

.done_box {width: 100%; display: flex; flex-direction: column; gap: 15px; align-items: center;}
.done_box .result_con {padding: 20px; border-radius: 10px; background-color: #fafafa; display: flex; flex-direction: column; gap: 4px; width: 100%;}
.done_box .result_con dl {display: flex;}
.done_box .result_con dt {width: 130px; font-size: 18px; color: #555;}
.done_box .result_con dd {width: calc(100% - 130px); font-size: 18px;}
.done_box .result_con p {font-size: 24px; font-weight: 700; text-align: center;}
.done_box .txt_copy {font-size: 16px; color: #555; border-bottom: 1px solid #aaa; width: max-content;}




/* ======== 350px ======== */
@media screen and (max-width: 350px) {
    .login_title {padding: 40px 0 20px;}
    .login_title dl {gap: 6px;}
    .login_title dt {font-size: 22px;}
    .login_title dd {font-size: 16px;}
    .login_menu span {font-size: 15px;}
    .login_title .icon {margin-bottom: 10px;}

    .tab_box span {font-size: 16px;}
    .find_title {font-size: 15px;}


    .input_con.add_btn {flex-direction: column;}
    .input_con.add_btn button {width: 100%; max-width: initial; border-radius: 100px;}


    .bottom.row {flex-direction: column; padding: 40px 20px 30px;}


    /* 새화물등록 */
    .input_item .main_tit {flex-direction: column; align-items: flex-start; gap: 6px;}
    .input_item .main_tit span {width: 100%;}
    .flex {flex-direction: column;}


    /* 완료안내화면 */
    .done_box .result_con {gap: 8px; padding: 15px;}
    .done_box .result_con dl {flex-direction: column;}
    .done_box .result_con dt {width: 100%; font-size: 16px;}
    .done_box .result_con dd {width: 100%;}
    .done_title dd {padding: 0; font-size: 16px;}
    .done_box .result_con p {font-size: 22px;}
    .done_title dt {font-size: 20px;}
    .done_title i {width: 50px;}




}