@charset "utf-8";
.container{width: 1200px;margin:0 auto;}
#wrap{max-width: 640px;margin: 0 auto;overflow: hidden;position: relative;}

/* main */
.login_wrap{background-repeat: no-repeat;background-size: cover;padding-top: 120px;text-align: center;box-sizing: border-box;background-position: top center;background-image: url('../images/main/main_bg.png');height: 100vh;}
.login_con{box-shadow: 2px 2px 2px #cbdbe4;background-color: #FFF;margin: 30px auto 0;width: 530px;box-sizing: border-box;border-radius: 25px;}
.top_logo{border-bottom: 1px #ebebeb solid;box-sizing: border-box;text-align: center;height: 109px;line-height: 109px;}
.textbox{padding: 35px 62px 50px;box-sizing: border-box;}
.textbox strong{font-size: 27px;color: #002c50;line-height: 1.5;display: block;margin-bottom: 30px;}
.textbox strong span{color: #004986;}
.inbox input{margin-bottom: 10px;background-position: 7%;background-repeat: no-repeat;background-color: #f0f5f9;height: 55px;box-sizing: border-box;padding-left: 67px;border-radius: 3px;font-size: 19px;font-weight: 500;width: 100%;}
.inbox input::placeholder{color: #a0a0a0;}
.inbox input::-webkit-input-placeholder {color: #a0a0a0;}
.inbox input:-ms-input-placeholder {color: #a0a0a0;}
.id{background-image: url('../images/main/id_i.png');}
.pw{background-image: url('../images/main/pw_i.png');}
.loginbtn{margin-top: 4px;width: 100%;background-color: #004986;text-align: center;height: 55px;line-height: 55px;font-size: 20px;border-radius: 3px;color: #FFF;font-weight: 500;}
.privacybtn{margin-top: 4px;width: 100%;background-color: #fff;text-align: center;height: 55px;line-height: 55px;font-size: 20px;border-radius: 3px;color: #222222;font-weight: 500; border: 1px solid #e1e1e1;}
.smallT{margin-top: 20px;box-sizing: border-box;font-size: 14px;color: #333333;font-weight: 500;line-height: 2;}
.tel{height: 26px;line-height: 26px;background-color: #f4f4f4;border-radius: 20px;padding: 0 10px;display: inline-block;text-align: center;font-size: 14px;color: #707070;}
.login_check{margin-top: 35px;font-size: 19px;color: #333333;font-weight: 400;text-align: left;}
.login_check input{width: 1.2em;height: 1.2em;margin-top: -5px;}

/* sub */
.s_top{box-sizing: border-box;background-color: #004986;height: 80px;line-height: 80px;padding: 0 25px;font-size: 26px;color: #FFF;font-weight: 500;}
.s_top img{margin-top: -5px;margin-right: 3px;}
.logout{float: right;height: 33px;line-height: 33px;box-sizing: border-box;background-color: #FFF;vertical-align: top;font-size: 19px;border-radius: 30px;color: #004986;font-weight: 500;margin-top: 24px;text-align: center;padding: 0 14px}
.s_con{background-color: #e8ecf0;box-sizing: border-box;padding: 25px 25px 100px;}
.searchul{background-color: #FFF;box-sizing: border-box;padding: 25px;}
.searchul li:nth-child(n+2){margin-top: 10px;}
.s_tit{width: 92px;font-size: 20px;color: #222222;font-weight: 400;display: inline-block;vertical-align: middle;box-sizing: border-box;}
.s_box{width: calc(100% - 97px);display: inline-block;vertical-align: middle;box-sizing: border-box;}
.cal_in{width: 38%;position: relative;display: inline-block;vertical-align: top;box-sizing: border-box;}
.searchul li input{padding-left: 5px;font-weight: 400;height: 50px;background-color: #FFF;border: 1px #e4e4e4 solid;box-sizing: border-box;font-size: 19px;color: #222222;}
.s01 input{width: 100%;padding: 0 55px 0 5px;}
.s02 input{width: 80%;}
.cal_btn{position: absolute;right: 12px;top: 12px;width: 39px;height: 26px;background-repeat: no-repeat;background-image: url('../images/sub/cal_btn.png');}
.button_btn_156{height: 50px;border-radius: 3px;line-height: 50px;box-sizing: border-box;background-color: #156bb3;vertical-align: top;font-size: 19px;color: #FFF;font-weight: 500;text-align: center;width: 84px;}
.button_btn_002{height: 50px;border-radius: 3px;line-height: 50px;box-sizing: border-box;background-color: #002c50;vertical-align: top;font-size: 19px;color: #FFF;font-weight: 500;text-align: center;width: 84px;}
.rebox{margin-top: 45px;}
.re_num{font-size: 20px;color: #222222;font-weight: 400;display: inline-block;vertical-align: top;}
.re_sel{background-image:url('../images/sub/click_i.png');background-position: right;background-repeat: no-repeat;-webkit-appearance:none; -moz-appearance:none;appearance:none;float: right;width: 145px;font-size: 20px;color: #222222;background-color: #e8ecf0;}
.re_sel::-ms-expand {display: none;}
.textul{margin-top: 25px;}
.h_t01,.h_t02{margin-bottom: 10px;box-sizing: border-box;display: inline-block;vertical-align: top;height: 58px;line-height: 58px;text-align: center;color: #fff;font-size: 20px;font-weight: 500;background-color: #283039;}
.h_t01{width: 122px;margin-right: 2px;}
.h_t02{width: calc(100% - 130px);}
.t01,.t02{color: #222222;margin-bottom: 5px;background-color: #fff;box-sizing: border-box;display: inline-block;vertical-align: top;height: 220px;}
.t01{padding: 18px 0 0 0;text-align: center;width: 122px;margin-right: 2px;font-size: 19px;font-weight: 300;}
.t02{width: calc(100% - 130px);padding: 18px;}
.t02 .fR{width: 149px;text-align: right;}
.t02 .fR a{width: 58px;margin-left: 3px;vertical-align: top;}
.t02 .fR a img{width: 100%;}
.t_left{display: inline-block;width: 63%;}
.t_left strong{display: block;font-size: 20px;font-weight: 400;margin-bottom: 13px;}
.bg_555{margin-top: -3px;margin-right: 5px;height: 30px;border-radius: 3px;line-height: 30px;box-sizing: border-box;background-color: #555555;font-size: 18px;color: #FFF;font-weight: 400;text-align: center;display: inline-block;vertical-align: middle;width: 82px;}
.t_left ul li{font-size: 19px;color: #555555;font-weight: 300;}
.t_left ul li:nth-child(n+2){margin-top: 4px;}
.col004{color: #004986;}
.pagination{text-align: center;margin-top: 30px;}
.pagination li{display: inline-block;vertical-align: top;margin: 0 -1px;}
body:first-of-type .pagination li{margin: 0 -1.5px 0 0;}
body:first-of-type .pagination .mL{margin-left: 20px;}
body:first-of-type .pagination .mR{margin-right: 20px;}
.pagination ul a{font-size: 17px;color: #999999;font-weight: 300;margin: 0 10px;}
.pagination .on a{color: #222222;font-weight: 500;border-bottom: 4px #222222 solid;padding: 0 5px 4px;}
.pagination .arrowli a{margin: 0 -1px;}
.pagination .mL{margin-left: 20px;}
.pagination .mR{margin-right: 20px;}

.text_pop{position: relative;margin-top: 10px;}
.pop_btn{width: 58px;height: 58px;background-repeat: no-repeat;background-size: 100%;background-image: url('../images/sub/icon03.png');}
.pop_btn.on{background-image: url('../images/sub/icon03_on.png');}
.popT{display: none;z-index: 2;box-shadow: 3px 3px 3px #b2b2b2;position: absolute;overflow: auto;background-color: #FFF;border: 1px #555555 solid;width: 569px;box-sizing: border-box;top: 60px;right: -7px;padding: 15px;text-align: left;font-size: 16px;color: #555555;height: 150px;}




/* 자주쓰는 스타일 */
.inC{font-weight: 300;background-color: #FFF;border: 1px #e1e1e1 solid;box-sizing: border-box;height: 45px;padding-left: 10px;color: #666666;font-size: 17px;}
.selC{font-weight: 300;background-color: #FFF;border: 1px #e1e1e1 solid;box-sizing: border-box;height: 45px;padding-left: 10px;color: #666666;font-size: 17px;}
.textarea{width: 100%;font-weight: 300;background-color: #FFF;border: 1px #e1e1e1 solid;box-sizing: border-box;height: 88px;padding: 10px;color: #666666;font-size: 17px;}
.group{display: inline-block;box-sizing: border-box;width: 97%;vertical-align: top;}
.conbox{display: none;}
.tab_on{display: block;}
.wid100{width: 100%;}
.inlineB{display: inline-block;vertical-align: top;box-sizing: border-box;}
.relative{position: relative;}
.vaT{vertical-align: top;}
.sub_t{font-size: 19px;color: #666666;font-weight: 300;line-height: 1.7;word-break: keep-all;}
.dot{background-color: #92887d;display: inline-block;width: 5px;height: 5px;vertical-align: middle;margin-right: 3px;border-radius: 50%;vertical-align: top;margin-top: 11px;}

.bB0{border-bottom: 0;}
.bR0{border-right: 0;}
.button_btn54{background-color: #544b41;text-align: center;height: 50px;line-height: 50px;font-size: 16px;color: #FFF;}

.col333{color: #333333;}


.mL5{margin-left: 5px;}
.mT5{margin-top: 5px;}
.mT10{margin-top: 10px;}
.mT15{margin-top: 15px;}
.mT20{margin-top: 20px;}
.mT25{margin-top: 25px;}
.mT30{margin-top: 30px;}
.mT35{margin-top: 35px;}
.mT40{margin-top: 40px;}
.mT45{margin-top: 45px;}
.mT50{margin-top: 50px;}
.mT55{margin-top: 55px;}
.mT60{margin-top: 60px;}
.mT70{margin-top: 70px;}

.tac{text-align: center;}
.taL{text-align: left;}
.taR{text-align: right;}
.fR{float: right;}
.fs14{font-size: 14px;}
.fs15{font-size: 15px;}
.fs17{font-size: 17px;}
.fs18{font-size: 18px;}
.fs24{font-size: 24px;}
.fw700{font-weight: 700;}
.fw500{font-weight: 500;}
.fw400{font-weight: 400;}
.fw300{font-weight: 300;}

.ImageFind{display: none;}


.container_body {
    background: linear-gradient(135deg, #fff 0%, #fdf9f9 100%);
    max-width: 640px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}
        
.header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 20px 20px 30px 20px;
    text-align: center;
}

.header .header-buttons{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0px 10px;
    margin-bottom: 20px;
}
   
.info-head-btn{
    padding: 5px 14px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.info-head-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.header h1 {
    color: #fff;
    font-size: 25px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 40px;
}
        
.header h1 img { width: 125px; border-radius: 5px; margin-right: 5px; }
.header p { color: #fff; font-size: 1.2em; opacity: 0.9; }

.content { padding: 40px 30px 0px 30px; }
        
.section { margin-bottom: 40px;}
        
.section-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 20px 10px 10px;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.info_text_box{ background: #fff; padding: 20px 30px; border-radius: 10px; margin-bottom: 15px; }        
.info-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid #667eea;
    margin-bottom: 15px;
}
        
.info-box h3 {
    color: #2a5298;
    margin-bottom: 10px;
    font-size: 1.1em;
}
        
.info-box ul {
    list-style: none;
    padding-left: 0;
}
        
.info-box li {
    padding: 5px 0;
    padding-left: 25px;
    position: relative;
}
        
.info-box li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}
        
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-size: 15px;
}
        
.price-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
        
.price-table th {
    padding: 15px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #dfdfdf;
    color: #f8f9fa;
}
        
.price-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}
        
.price-table tbody tr:hover {
    background: #f5f5f5;
}
        
.price-table tbody tr:last-child td {
    border-bottom: none;
}
        
.highlight {
    background: #fff3cd;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    margin: 15px 0;
}
        
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 10px 0;
}
        
.button_btn {
    flex: 1;
    min-width: 200px;
    padding: 15px 0px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    transition: transform 0.2s;
}
        
.button_btn:hover {
    transform: translateY(-2px);
}
        
.button_btn-purple {
    background: #6c5ce7;
    color: white;
}
        
.button_btn-blue {
    background: #0984e3;
    color: white;
}
        
.button_btn-green {
    background: #00b894;
    color: white;
}
        
.button_btn-orange {
    background: #fd79a8;
    color: white;
}

.button_btn div { color: #fff; font-size: 19px; }
.button_btn small { color: #fff; font-size: 15px; padding-top: 8px; display: block; }

.note {
    background: #e7f3ff;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 0.95em;
}
        
.note:before {
    content: "● ";
    color: #2a5298;
    font-weight: bold;
}
        
.footer-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 40px 0 20px;
    padding: 30px 20px;
    border-top: 2px solid #e0e0e0;
}

.footer-btn {
    padding: 18px 30px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.footer-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.footer-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.footer-btn-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.info-secondary-btn {
    padding: 8px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.mT10{margin-top: 10px;}                
                
.search_warp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 15px; background-color: #f3f3f3; border: 1px solid #e4e4e4; border-radius: 5px;}
.search_left { display: flex; align-items: center; gap: 10px; width: 40%; }
.search_right { display: flex; align-items: center; gap: 8px; width: 40%; }
.search_warp_label { white-space: nowrap; }
.search_warp_input { width: 130px; }
.search_warp_result{margin: 10px 0px; background-color: #f3f3f3; border: 1px solid #e4e4e4; border-radius: 5px; padding: 35px 35px; }
.search_warp_result_text{display: inline-block; font-size: 17px; color: #004a9c; border-left: 6px solid #4db6ac; padding: 5px 10px;}

#footer{text-align: center; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); box-sizing: border-box;padding: 30px 0;}
#footer .container{max-width: 480px;}
.ftul li{margin-bottom: 5px;display: block;vertical-align: top;box-sizing: border-box;background-color: #2a5298;border-radius: 25px;padding: 7px 18px 11px;}
.ftul li span{display: inline-block;vertical-align: middle;color: #FFF;margin-right: 15px;}
.ftul li span img{margin-right: 5px;}
.ft01{font-size: 16px;font-weight: 500;}
.ft02,.ft03{font-size: 15px;font-weight: 400;}
#footer p{margin-bottom: 20px;font-size: 15px;color: #FFF;opacity: 0.4;font-weight: 300;}
#footer .copy{font-size: 13px;color: #FFF;opacity: 0.3;font-weight: 300;display: block;margin-top: 20px;}
#footer img { filter: grayscale(50%); }

.insurance_text_title{font-size: 17px; font-weight: 600; padding: 10px 15px; background-color: #f3f3f3; border: 1px solid #e4e4e4; border-left: 6px solid #4db6ac; border-radius: 5px; margin-bottom: 15px;}
.form-group { margin-bottom: 5px; }
.form-group .control-label{font-weight: 500;}
.form-control {font-size: 17px; }
#car_data_result{ padding: 20px 30px; }
.red{color: #f45619;}

@media (max-width: 768px) {
    .header h1 {
        font-size: 1.5em;
    }
        
    .content {
        padding: 20px 15px;
    }
        
    .button-group {
        flex-direction: column;
    }
        
    .price-table {
        font-size: 0.85em;
    }
    .footer-buttons { flex-wrap: wrap; }

    .ft01, .ft02, .ft03{font-size: 13px;font-weight: 500;}
    .ftul li{padding: 7px 0px 11px;}
    .search_left { display: flex; align-items: center; gap: 10px; width: 100%; }
    .search_right { display: flex; align-items: center; gap: 8px; width: 100%; }
    .list_button_area{display: flex; flex-wrap: wrap; gap: 10px;}

    .price-table th { padding: 15px 5px; font-size: 13px;}        
    .price-table td { padding: 15px 5px; font-size: 13px; }
    .price-table td strong{ font-size: 13px; }
}

@media (max-width: 430px) {
    .header h1 { font-size: 1em; line-height: 25px; margin-bottom: 5px;}
    .header p { font-size: 1em; }
    .info-head-btn{ padding: 5px 10px; font-size: 13px; }
        
    .section-title { font-size: 0.9em; }
    .info-box { font-size: 14px; padding: 20px 10px; margin-bottom: 15px; }

    .button_btn div { font-size: 17px; }
    .button_btn small { font-size: 15px; }

    .content { padding: 20px 15px; }        
    .button-group { flex-direction: column; }        
    .price-table { font-size: 0.80em; }
    .footer-buttons { flex-wrap: wrap; }

    .ft01, .ft02, .ft03{font-size: 13px;font-weight: 500;}
    .ftul li{padding: 7px 0px 11px;}
    .search_left { display: flex; align-items: center; gap: 10px; width: 100%; }
    .search_right { display: flex; align-items: center; gap: 8px; width: 100%; }
    .list_button_area{display: flex; flex-wrap: wrap; gap: 10px;}

    .price-table th { padding: 15px 2px; font-size: 11px;}        
    .price-table td { padding: 15px 2px; font-size: 11px; }
    .price-table td strong{ font-size: 11px; }
    .note { font-size: 0.7em; padding: 10px 5px;}
}


.btn:focus,
.btn:active,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.checkbox label:after,
.radio label:after { content: ''; display: table; clear: both; }
.checkbox .cr, .radio .cr { position: relative; display: inline-block; border: 2px solid #797979; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; color: red; }
.radio .cr { border-radius: 75%; border-color: #797979; }
.checkbox .cr .cr-icon,
.radio .cr .cr-icon { position: absolute; font-size: 1.4em; line-height: 0; top: 50%; left: -1px; }
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] { display: none; }
.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon { opacity: 0; }
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon { opacity: 1; }
.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr { opacity: .5; }
.radio, .checkbox{display: inline-block;}
.radio label, .checkbox label {padding-left:0;}