@charset "UTF-8";

.cont_top:after {content:'';}
.cont_top {padding-top:0; border-bottom:1px solid #E8E8E8;}
.cont_top .current_step.step4 li {width:25%;}
.cont_top .current_step.step4 li span {width:58px;}
.cont_top .current_step.step4 li.step_1 {width:23%; text-align:left;} 
.cont_top .current_step.step4 li.step_2 {width:27%; text-align:center;} 
.cont_top .current_step.step4 li.step_3 {width:27%; text-align:center;}
.cont_top .current_step.step4 li.step_4 {width:23%; text-align:right;}
/* .cont_middle .box_input:last-child {margin-bottom:50px;} */
/* .cont_middle .box_input:last-child {border:1px solid red;} */
.cont_middle .box_input .txt_help {font-size:12px; text-align:left; color:#0056AF;}


.txt_alert {position:absolute; bottom:125px; left:0; width:100%; font-size:22px; font-weight:800; color:#0056AF;}

/* join_1 */
#wrap.join_1 {height:100%;}
#wrap.join_1 #container {height:100%; box-sizing:border-box;}
.cont_top:after {content:none;}
.logo {text-align:center;}
.logo img {display:inline-block; width:157px; height:32px;}
.join_1 .cont_top {padding:25px 0 40px; border:none;}
.join_1 .cont_middle {overflow-y:hidden; height:82%; padding-top:0; padding-bottom:70px; box-sizing:border-box;-webkit-box-sizing:border-box; -webkit-overflow-scrolling:touch;}
.join_1 .cont_middle .row.first {height:20%; min-height:80px; padding-bottom:15px;}
.join_1 .cont_middle .row {position:relative; min-height:130px; height:40%; padding:30px 0 10px 0; font-size:0; box-sizing:border-box; -webkit-box-sizing:border-box; }
.join_1 .cont_middle .row:after {position:absolute; left:0; bottom:0; width:100%; border-bottom:1px solid #E8E8E8;}
.join_1 .cont_middle .row input[type='checkbox'] {display:inline-block; margin:0 10px 0 0; vertical-align:top;}
.join_1 .cont_middle .row .tit {display:inline-block; max-width:80%; margin-top:2px; font-size:0.875rem;/*14px*/ }
.join_1 .cont_middle .row .tit span {color:#0056AF;}
.join_1 .cont_middle .row .desc {overflow-y:scroll; height:60%; max-height:170px; margin-top:15px; font-size:0.750rem;/*12px*/ color:#7F8696; clear:both; -webkit-overflow-scrolling:touch;}
.join_1 .cont_middle .row .desc em {font-weight:700;}
.join_1 .cont_middle .row.first input[type="checkbox"] {}
.join_1 .cont_middle .row.first .tit {margin-top:-4px;}
.join_1 .cont_middle .row:last-child:after {content:none;}
.join_1 .btn_foot.gray {}

/* join_2 */
.join_2, .join_3 {height:100%; box-sizing:border-box;}
.join_2 #container, .join_3 #container {height:100%; box-sizing:border-box;}
.join_2 .cont_middle {position:static; padding-bottom:0px;}
.join_2 .cont_middle .box_input {margin-bottom:0px;}
.join_2 .cont_middle .phone_num {width:66%; font-size:1.125rem;/*18px*/}
.join_2 .cont_middle .request {width:31%; background-color:#7F8696; color:#fff;} 
.join_2 .cont_middle .box_toggle {visibility:hidden;}
.join_2 .cont_middle .box_toggle.active {visibility:visible;}
.join_2 .cont_middle .verification_num {font-size:1.125rem;/*18px*/}
.join_2 .cont_middle .txt_alert {text-align:center;}
/* .join_2 .cont_middle .txt_alert.active {visibility:visible;} */
.join_2 .cont_middle .time {position:absolute; right:14px; top:50%; margin-top:-13px; font-size:18px; color:#D41414;}
.join_2 .cont_middle .btn_foot {}
.join_2 .popup .btn_area {overflow:hidden; position:absolute; bottom:0; left:0; width:100%;}

/* join_3 */
.join_3 {}
.join_3 .cont_middle .list_type {}
.join_3 .cont_middle .list_type li {position:relative; float:left; width:31%; height:50px; margin-left:3%; margin-bottom:3%; border:1px solid #7F8696; border-radius:1px; text-align:center; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.join_3 .cont_middle .list_type li.m_0 {margin-left:0;}
.join_3 .cont_middle .list_type li .type {overflow:visible; display:block; border:none; margin:0; height:48px; font-size:14px; color:#7F8696; background-color:transparent; white-space: normal;}
.join_3 .cont_middle .list_type li .type:focus {border:none; line-height:1.5; outline:none;}
.join_3 .cont_middle .list_type li:last-child .type {line-height:1.2;}
.join_3 .cont_middle .list_type li.active {background-color:#0056AF;}
.join_3 .cont_middle .list_type li.active .type {color:#fff;}
.join_3 .cont_middle .txt_alert {position:static; margin:50px 0; font-size:1rem; font-weight:400; color:#7F8696; text-align:center; visibility:hidden;}
.join_3 .cont_middle > .txt_alert.on {visibility:visible;}
.join_3 .cont_middle > .txt_alert strong {color:#0056AF;}
.join_3 .cont_middle .txt_alert .txt_prefix {}


/* join_3-1 */
.join_3-1 {}
.join_3-1 .cont_top:after {content:''; border:1px solid #E8E8E8;}
.join_3-1 .cont_middle {}
.join_3-1 .cont_middle .box_input input,
.join_3-1 .cont_middle .box_input select {margin-bottom:10px;}
.join_3-1 .cont_middle .box_input input:last-child {margin-bottom:0;}
.join_3-1 .cont_middle .box_input select:last-child {margin-bottom:0;}

/* join_4-1 */
.join_4 input, .join_4 select {margin-bottom:10px;}
.join_4 .txt_inform.correct {visibility:hidden;}
.join_4 .txt_inform.incorrect {position:absolute; left:0; bottom:0; color:#D41414; visibility:hidden;}
.join_4 .input_file {overflow:hidden; position:absolute; z-index:-1; width:0.1px; height:0.1px; opacity:0;}
.join_4 .box_photo {overflow:hidden; position:relative; width:100%; height:160px;} 
.join_4 .box_photo .preview_file {display:block; width:100%; height:160px; border:1px solid #7F8696; border-radius:1px; text-align:center; color:#ccc; font-size:18px; line-height:160px; box-sizing:border-box; cursor:pointer;} 
.join_4 .box_photo .img_preview {position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%, -50%);}
.join_4 .btn_foot {margin-bottom:0;}
.join_4 .box_id {position:relative;}
.join_4 .box_id  #id {width:70%;}
.join_4 .box_id  #id:focus {margin:0;}

/*뷰포트 높이 600px보다 작은 경우*/
@media (max-height:620px) {
    .join_1 .cont_top {padding-bottom:20px;}
}

/* 키오스크 미디어쿼리 */
@media (min-height:1800px) {
    .logo img {width:300px; height:auto;}
    .txt_alert {bottom:645px; font-size:36px;}
    .join_1 .cont_middle {margin-top:50px;}
    .join_1 .cont_middle .row.first {height:14%;}
    .join_1 .cont_middle .row:last-child {height:44%}
    .join_1 .cont_middle .row:last-child desc {height:80%}
    .join_1 .cont_middle .row .desc {height:75%; margin-top:30px; max-height:none;}
    .join_2 .cont_middle .time {right:28px; margin-top:-32px; font-size:46px;}

    .join_3 .cont_middle .list_type li {height:120px; border-width:2px; -webkit-border-radius:2px;border-radius:2px;}
    .join_3 .cont_middle .list_type li .type {height:120px; font-size:34px;}

    .cont_middle .box_input .txt_help {font-size:28px;}
    .join_4 .box_photo {height:auto;}
    .join_4 .box_photo .preview_file {height:280px; font-size:46px; border-width:2px; line-height:280px;}
    .join_4 input, .join_4 select {margin-bottom:20px;}
}