/* 내비게이션 */
.navigation{
    position:absolute;
    width:100%
}


/* 서브 페이지 - 메인*/
.main_area{
    padding-top:70px;
    width:100%;
    height:400px;
    background:url(../imgs/service/bg2.jpg)no-repeat center center;
    background-size:cover;;
}

.main_ment{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.main_ment p{ 
    font-size:40px;
    font-weight:700;
}

.main_ment span{
    display:block; 
    font-size:24px;
    font-weight:normal;
    margin-top:15px
}

/* 컨텐츠 영역 */
.contents{
    padding-top:100px;
    min-height:490px;
    padding-bottom:150px;
}

.con_title{
    width:100%;
    display:flex;
    align-items:center;
    line-height:55px;
    border-bottom:solid #ababab 1px;
    font-weight:bold;
    font-size:26px;
    color:#ababab;
}

.con_title>li.tab_active{
    font-size:30px;
    color:#000;
}

.con_title>li.tab_active>.tab_title_line{
    display:block !important;
}

.con_title>li{
    width:20%;
    text-align: center;
    position:relative;
    cursor:pointer;
    transition:all 0.3s;
}

.con_title>li>.tab_title_line{
    display:none;;
}

.con_title>li:hover{
    color:#000;
}

.tab_title_line{
    height:5px;
    width:100%;
    background:#f0512c;
    position:absolute;
    left:0px;
    bottom:-3px;
    border-radius:10px;;
}

.info_ment{
    font-size:18px;
    margin-left:20px;
    line-height:150px;
    font-weight:500;
}


.con_box{
    display:flex;
    justify-content:space-between;
    box-sizing: border-box;
    padding:0px 20px;;
}

.con_box .con_left{
    width:50%;
}

.con_box .con_right{
    width:40%
}

.conbox_title{
    font-size:24px;
    font-weight:700;
    position:relative;
    padding-left:20px;
    margin-bottom:15px
}

.title_circle{
    width:7px;
    height:20px;
    border-radius: 10px;
    background:#f0512c;
    position:absolute;
    left:0;
    top:8px;
}

.conbox_list{
    line-height:30px;
    margin-bottom:50px;
    height:120px
}

.conbox_list li{
    position:relative;
    padding-left:12px;
}

.conbox_list li span{
    position:absolute;
    left:0;
}

.conbox_list li span.color{
    position:static;
    color:#f0512c;
    font-weight:bold;
}

.tab_box1{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.tab_box1 .con_box{
    width:100%;
    display:flex; 
    justify-content:center     ;;
}

.tab_box1 .con_right .conbox_list li:last-child{
    font-weight:bold;
}

.tabbox1 .con_right{
    display:none;
}

.service_process{
    width:50%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:100px 0px;
}

.service_process li{
    width:135px;
    height:120px;
    border:solid #ababab 1px;
    border-radius:10px;
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    padding:10px 20px;
    box-sizing:border-box;
    text-align:center;
    line-height:20px;
    font-weight:600;
}


.service_process .process_number{
    font-size:23px;
    font-weight:700;
    position:absolute;
    left:-10px;
    top:-16px;
    background:#fff;
    padding:5px 10px
}

.service_process li img{
    width:40px;
    margin-bottom:10px;
}

.service_process li p{
    white-space:nowrap;
    height:40px;
}

.service_number{
    font-size:30px;
    font-weight:600;
}


/* tab_box 2 */
.tab_box2>.conbox_list{
    background:#f0f0f0;
    border-radius:5px;
    height:auto;
    padding:15px 20px;;
    margin:30px 0px;
    font-weight:500;
}

.tab_box2 .form_list{
    width:100%
}

.tab_box2 .form_list li{
    position:relative;
    display:flex;
    align-items:center;
    padding-left:15px;
    font-weight:700;
    width:100%;
    margin-bottom:15px;
    box-sizing: border-box;
    justify-content:space-between;
}

.tab_box2 .title_circle{
    top:6px;
    width:5px;
    height:18px;
}

.tab_box2 .form_title{
    padding-right:15px;
    width:80px;
    box-sizing:border-box;
}

.tab_box2 .input_area{
    width:94%
}

.tab_box2 input{
    border:solid #ababab 1px;
    border-radius:5px;
    height:30px;
    width:30%;
    box-sizing:border-box;
    padding:0px 10px;
    letter-spacing:1px;
    font-size:16px;
}

.tab_box2 select{
    border:solid #ababab 1px;
    border-radius:5px;
    height:30px;
    width:30%;
    box-sizing:border-box;
    padding:0px 5px;
    color:#000;
    font-size:16px;
}

.tab_box2 textarea{
    border:solid #ababab 1px;
    border-radius:5px;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    resize: none;
    font-size:16px;
}

.tab_box2 .form_list .text_area{
    align-items:flex-start;
    padding-top:3px;
    box-sizing:border-box;
}

.tab_box2 select option[value=""][disabled] {display: none;}

.tab_box2 select option{
    line-height:35px !important;
}

.button_box{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin-top:50px;
}

.button_box button{
    width:100px;
    border:solid #ababab 1px;
    line-height:35px;
    border-radius:5px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    letter-spacing: 1px;
}
 
.button_box .delete_btn{
    background:#ababab;
    margin-right:15px;
}

.button_box .submit_btn{
    background:#542c82;
    border-color:#542c82;
    transition:all 0.3s;
}

.button_box .submit_btn:hover{
    background:#f0512c;
    border-color:#f0512c;
}

.persnalinfo_agree{
    width:100%;
    padding-left:95px;
    box-sizing:border-box;
    margin-top:30px;
}

.pi_wrap{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center
}

.pi_wrap>p{
    font-weight:600;
}

.pi_box{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    margin-top:50px;
    width:100%
}

.pi_box label{
    cursor: pointer;
    font-weight:700;
    font-size:18px;
}

.pi_box input{
    width:20px !important;
    height:20px;
    margin-left:10px;
    cursor: pointer;
}

.pi_detail{
    width:100%;
}

.pi_detail li{
    margin-bottom:20px;
    position: relative;
}

.pi_detail .pi_title{
    font-weight:600;
    margin-bottom:5px;;
}

.pi_detail .pi_title1{
    font-size:18px;
    background:#fff;
    width:200px;
    font-weight:700;
}

.pi_detail .pi_line{
    position:absolute;
    width:100%;
    border-bottom:solid #ababab 1px;
    bottom:13px;
    z-index:-1
}


.pi_detail table{
    width:100%;
    text-align:center;
    border-collapse:collapse;
    margin-top:10px
}

.pi_detail table td{
    border:solid #ababab 1px;
    padding:10px 5px
}

.pi_detail table th{
    border:solid #ababab 1px;
    padding:10px 5px;
    background:#f0f0f0
}




/* 접수 완료 페이지 tab_box2_1 */
.tab_box2_1{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.tab_box2_1 img{
    margin-top:150px;
    animation: turn_icon 1s ease-in-out;
    margin-bottom:20px;
}

@keyframes turn_icon {
    100%{
        transform:rotateY(360deg)
    }
}


.tab_box2_1 p{
    font-weight:700;
    font-size:18px;
}

.tab_box2_1 .ok_btn{
    width:100px;
    border:solid #542c82 1px;
    line-height:35px;
    border-radius:5px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    letter-spacing: 1px;
    background:#542c82;
    margin-top:80px;
    transition:all 0.3s;
}

.tab_box2_1 .ok_btn:hover{
    border:solid #f0512c 1px;
    background:#f0512c
}


/* tab_box3 */
.tab_title3{display:none;}/* 자주찾는 질문 숨김처리 */
.tab_box3{display:none;}


.qna_list li{
    display:flex;
    align-items:flex-start;
}


.qna_list li.answer_list{
    justify-content:flex-end;
    margin-bottom:80px;
}

.qna_list li:last-child{
    margin-bottom:0px
}

.qna_list .big_title{
    font-size:50px;
    font-weight:700;
    margin-right:20px;
    position:relative;
    bottom:18px
}

.qna_list .answer_list .big_title{
    margin-right:0px;
    margin-left:20px;
}

.qna_list .text_box{
    position: relative;
    border-radius:5px;
    width:70%;
    box-sizing:border-box;
    padding:10px 15px;
}

.qna_list .gray_box{
    background:#f0f0f0;
    font-weight:600;
}

.qna_list .gray_box:after {
	content: '';
	position: absolute;
	left: 10px;
	top: 10px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #f0f0f0;
	border-left: 0;
	border-top: 0;
	margin-top: -10px;
	margin-left: -20px;
}

.qna_list .purple_box{
    background:#542c82;
    color:#fff;
}

.qna_list .purple_box:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 10px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #542c82;
	border-right: 0;
	border-top: 0;
	margin-top: -10px;
	margin-right: -20px;
}



/* 캡챠 */
.capcha{margin-top:50px}
.capcha_area{display:flex; align-items:center;}
.capcha_box{border:solid #ababab 1px; width:180px; height:50px; overflow:hidden; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.redo_btn{width:52px; height:52px; border:solid #ababab 1px; border-left:none; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.redo_btn img{transition:all 0.3s}
.redo_btn:hover img{transform:rotate(-90deg)}
.capcha_input{margin-top:10px;}
.capcha_input input{width:234px !important; height:36px; letter-spacing:-0.5px;}



@media all and (min-width:1024px) {
    
} 
  
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) {
    .contents{padding-top:80px; padding-bottom:150px}
    .main_area{height:250px;}
    .main_ment p{font-size:26px; line-height:28px;}
    .main_ment span{font-size:16px;}
    .con_title{font-size:22px; margin-bottom:0px;;}
    .con_title>li.tab_active{font-size:24px;}
    .con_title>li{width:25%}
    .info_ment{line-height:100px; font-size:16px; margin-left:0px}
    .con_box{padding:0px; flex-direction:column; justify-content:center;}
    .con_box .con_left{width:100%}
    .con_box .con_right{width:100%}
    .conbox_title{font-size:22px; padding-left:15px; margin-bottom:10px;}
    .title_circle{height:18px; width:6px; top:7px;}
    .conbox_list{height:auto; margin-bottom:50px;}
    .service_process{width:80%; margin:0 auto; }
    .service_process li{ width:150px; ;}

    .tab_box2>.conbox_list{margin:20px 0px; padding:10px 15px}
    .tab_box2 .form_title{width:75px}
    .tab_box2 input{width:50%}
    .tab_box2 select{width:50%}

    .persnalinfo_agree{padding-left:0px}

    .capcha_input input{width:234px; height:36px;}
}


/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .contents{padding-top:50px; padding-bottom:100px}
    .con_title{font-size:16px; margin-bottom:0px; line-height:40px;}
    .con_title>li.tab_active{font-size:18px;}
    .con_title>li{width:33.3%; white-space:nowrap}

    .main_area{height:200px;}
    .main_ment p{font-size:24px; line-height:28px;}
    .main_ment span{font-size:14px;}

    .info_ment{line-height:20px; font-size:14px; margin-left:0px; padding:30px 0px}
    .con_box{padding:0px; flex-direction:column; justify-content:center;}
    .con_box .con_left{width:100%}
    .con_box .con_right{width:100%}
    .conbox_title{font-size:18px; padding-left:15px; margin-bottom:10px;}
    .title_circle{height:16px; width:5px; top:6px;}
    .conbox_list{height:auto; margin-bottom:50px;}
    .conbox_list li{line-height:22px; margin-bottom:5px;}
    .service_process{width:100%; padding:50px 0px}
    .service_process li{ width:33%; border:none;}
    .service_process>img{display:none;}
    .service_number{font-size:24px;;}

    .tab_box2>.conbox_list{margin:20px 0px; padding:10px 15px}
    .tab_box2 .form_list li{padding-left:12px; margin-bottom:10px}
    .tab_box2 .form_list li:last-child{flex-direction: column; padding-left:0px}
    .tab_box2 .form_list li:last-child .form_title{padding-left:12px}
    .tab_box2 li:last-child .input_area{width:100%; margin-top:10px;}

    .tab_box2 .form_title{width:75px; padding-right:10px}
    .tab_box2 .title_circle{height:15px; width:4px; top:7px}
    .tab_box2 input{width:100%; font-size:14px;}
    .tab_box2 select{width:100%; font-size:14px;}
    .tab_box2 textarea{font-size:14px;}
    
    .persnalinfo_agree{padding-left:0px}
    .pi_detail .pi_title1{font-size:16px; width:180px}
    .pi_box label{font-size:16px;;}
    .pi_detail table td{padding:5px}
    .pi_detail table th{padding:5px}

    .button_box{ justify-content:center; margin-top:50px;}
    .button_box button{line-height:30px; font-size:14px; width:90px;}

    .qna_list li{margin-bottom:20px;}
    .qna_list li.answer_list{margin-bottom:80px;}
    .qna_list .text_box{width:90%}
    
}


@media all and (max-width:450px) {
    .main_area span{line-height:22px; padding:0px 20px}
}