@charset "UTF-8";

html {scroll-behavior:smooth}
#wrap {overflow:hidden; height:880px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.main #wrap {background-color:#0056AF; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
h3 {font-weight:400;}
#header {position:absolute; top:0; left:0; right:0;}
.main #header {background-color:#0056AF;}
#header .btn_menu {position:relative; width:25px; height:25px; margin-bottom:0; background:url(../images/main/btn_menu.svg); background-repeat:no-repeat; background-size:100%; border:none;}
#header .btn_menu span {display:block; overflow:hidden; position:relative; z-index:-1; width:1px; height:1px;}
#header .quick_menu {font-size:0;}
#header .quick_menu a {position:relative; width:18px; height:22px; margin-left:25px; background-repeat:no-repeat; background-size:auto 100%;}
#header .quick_menu a span {position:relative; z-index:-1;}
#header .quick_menu .link_trialRide {width:20px; margin-left:0; background-image:url(../images/main/ico_trialRide.svg);}
#header .quick_menu .link_payment {width:22px; background-image:url(../images/main/ico_pay.svg);}
#header .quick_menu .link_notice {width:22px; background-image:url(../images/main/ico_notice.svg);}
#header .quick_menu a .num {position:absolute; top:1px; right:-7px; z-index:1; display:block; height:18px; padding:0 5px; background-color:#fff; border-radius:18px;-webkit-border-radius:18px; color:#0056AF; font-size:12px; font-weight:700; line-height:18px;}
#header .quick_menu .link_mypage {height:24px; background-image:url(../images/main/ico_mypage.svg); margin-right:6px;}

#container {height:100%; padding-top:60px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.main #container { background-color:#0056AF; color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.main .content {position:absolute; left:50%; padding:0; transform:translateX(-50%);-webkit-transform:translateX(-50%); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

.cont_search-1 {top:10%;}
.cont_search-1 .box_search.remain {width:33%}
.cont_search-1 .box_search.today {width:33%; text-align:center;}
.cont_search-1 .box_search.today .tit_value {font-weight:200; text-align:center;}
.cont_search-1 .box_search.previous {position:relative; top:3px; right:-1.875rem; color:#fff;}
.cont_search-1 .box_search.previous .link_previous {display:block; padding:13px 29px 21px 25px; background-image:url(../images/main/ico_previous.svg); background-repeat:no-repeat; background-size:auto 100%; font-size:14px; color:#fff; line-height:1}
.cont_search-1 .tit_data {color:rgba(255, 255, 255, 0.5); line-height:1.3;}
.cont_search-1 .tit_value {font-size:38px; font-weight:600; color:#fff; line-height:1.2;}
.content .box_input {position:relative; margin-bottom:0;}
.content .box_input input {margin-bottom:0;}

.cont_search-2 {top:22%;}
.box_input {position:relative; top:0;}
.search-bar #inputSearchNumber {height:60px; padding-right:50px; border-radius:4px;-webkit-border-radius:4px; font-size:28px; border:none;}
.box_input #btn_search {position:absolute; top:50%; right:10px; width:32px; height:32px; margin:-15px 0 0; border:none; background-color:transparent; background-image:url(../images/main/btn_search.svg); background-repeat:no-repeat; background-size:auto 100%; font-size:0; opacity:0.2; transition:all .2s ease; transform: scale(1)}
.search-bar #inputSearchNumber::placeholder {font-size:28px; color:rgba(0, 86, 175, 0.2); vertical-align:bottom;}
.search-bar label {overflow:hidden; position:absolute; width:0.5px; height:0.5px; font-size:0;}
.search-bar #inputSearchNumber::-ms-input-placeholder {font-size:28px; color:rgba(0, 86, 175, 0.2); vertical-align:bottom;}
.search-bar #inputSearchNumber::-webkit-input-placeholder {font-size:28px; color:rgba(0, 86, 175, 0.2); vertical-align:bottom;}

.cont_search-3 {top:34%;}
.box_search.recent .tit_data {color:#78A5D4;}
.box_search.recent table {width:100%;}
.box_search.recent table .col1 {width:30%;}
.box_search.recent table .col2 {width:20%;}
.box_search.recent table .col3 {width:32%;}
.box_search.recent table .col4 {width:15%;}
.box_search.recent table tr {border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.box_search.recent table th {color:rgba(255, 255, 255, 0.8); padding:10px 0;}
.box_search.recent table td {color:rgba(255, 255, 255, 0.8); padding:10px 0;}
.box_search.recent table .number {font-weight:600; text-align:left;}
.box_search.recent table .date {text-align:center;}
.box_search.recent table .name {text-align:left;}
.box_search.recent table .current {text-align:center;}
.box_search.recent table .current .ir_pm {
    width:22px; 
    height:18px; 
    margin:0 auto;
}/*텍스트가 아닌 아이콘으로 나타낼 때 쓰는 클래스명. 마크업에서 클래스명 지우면 바로 텍스트로 적용 가능*/
.box_search.recent table .current .ico_export {
    background:url(../images/main/ico_export.svg) no-repeat 100%;
}

.cont_payment {bottom:19%;}
.cont_payment a {cursor:default}
.cont_payment img {width:100%;}


/* 배너 슬라이더 */
.banner_slider {position:absolute; left:0; bottom:0; width:100%;}
.box_banner {border-radius:6px;-webkit-border-radius:6px; box-sizing:border-box; -webkit-box-sizing:border-box;}
.banner_slider .box_banner img {width:100%;}
.banner_slider .box_banner a {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-highlight-color: rgba(0, 0, 0, 0);}
.banner_slider .btn_pause {position:absolute; top:50%; right:0; z-index:10; width:40px; height:40px; margin:-20px 0 0 0; background-image:url(../images/common/btn_banner_pause.svg); background-repeat:no-repeat; background-size:100% auto; font-size:0; -webkit-border-radius:0px;border-radius:0px;}
.banner_slider .btn_pause.start {background-image:url(../images/common/btn_banner_start.svg)}
.swiper-pagination-bullet {background-color:#fff; transition:all ease .5s}
.swiper-pagination-bullet-active {background-color:#fff; transition:all ease .5s}
.swiper-pagination.colored .swiper-pagination-bullet {background-color:#0056AF; transition:all ease .5s}
.swiper-pagination.colored .swiper-pagination-bullet-active {background-color:#0056AF; transition:all ease .5s}


/* side-nav */
.main .side-nav .all-menu .list_depth-1 li .list_depth-2 {padding-bottom:0;}
.main .side-nav .all-menu .list_depth-1 li .list_depth-2 li:last-child {padding-bottom:0;}
.main .side-nav .all-menu .list_depth-1 li .list_depth-2 li:last-child:after {content:none}
.main .side-nav .btn_foot {margin:52px auto 38px;}

.side-nav {overflow-y:scroll; position:fixed; top:0; left:-100%; z-index:300; /*width:310px;*/ width:85%; height:100%; color:#333; max-width:450px; background-color:#fff; transition:all .3s ease; -webkit-overflow-scrolling:touch;}
.side-nav.opened {left:0;}
.side-nav .inner {width:90%; margin:0 auto;}

.side-nav .top_wrap .inner {width:88.89%; margin:0 auto;}
.side-nav .top_box {margin:12px 0 30px 0;}
.side-nav .top_box h1 {line-height:1;}
.side-nav .top_box .version {font-size:12px; color:#7F8696;}

.side-nav .profile {width:89.889%; margin:0 auto 20px;}
.side-nav .profile .img_area {position:relative; width:28%;}
.side-nav .profile .img_area .mask {overflow-x:hidden; overflow-y:hidden; position:relative; top:0; left:0; width:60px; height:60px; background-color:#E8E8E8; border-radius:50px;-webkit-border-radius:50px;}
.side-nav .profile .img_area .img_profile {position:absolute; top:0; left:0; width:400%; left:3px;}
.side-nav .profile .content_area {width:72%; -webkit-box-sizing:border-box;box-sizing:border-box;}
.side-nav .profile .content_area .user-info {margin-bottom:25px; }
.side-nav .profile .content_area .user-info .name {display:block; margin-bottom:5px;; font-weight:700;}
.side-nav .profile .content_area .user-info .e-mail {display:block;}
.side-nav .profile .content_area .user-info .search_numbers {overflow:hidden; position:relative; width:90%; color:#7F8696; font-size:0;}
.side-nav .profile .content_area .user-info .option_number {display:inline-block;  font-size:11px; padding-right:5%; border-right:1px solid #7f8696;}
.side-nav .profile .content_area .user-info .trial_number {display:inline-block; padding-left:5%; font-size:11px;}
.side-nav .profile .content_area .user-info .search_numbers .key {display:inline-block; margin-right:3px;}
.side-nav .profile .content_area .user-info .search_numbers .value {display:inline-block;}
.side-nav .profile .my-service {margin-bottom:20px; font-size:0;}
.side-nav .profile .my-service a {padding:2px 12px; font-size:12px;}
.side-nav .profile .recent-date {margin-bottom:20px; font-size:11px; color:#7F8696;}
.side-nav .profile .recent-date > * {padding-left:5px;}
.side-nav .profile .recent-date em {padding-left:0px;}

.side-nav .side_quick {margin-bottom:45px; text-align:center; font-size:13px; clear:both;}
.side-nav .side_quick .list_side_quick {width:100%;}
.side-nav .side_quick .list_side_quick:after {content:''; display:block; clear:both;}
.side-nav .side_quick .list_side_quick li {float:left; width:33.33%;}
.side-nav .side_quick .list_side_quick li a {display:inline-block; }
.side-nav .side_quick .list_side_quick li a:before {content:''; display:block; width:55px; height:55px; margin:0 auto 5px; border-radius:55px;-webkit-border-radius:55px; background-size:40%; background-position:center center; background-repeat:no-repeat; background-color:#F2F2F2; clear:both;}
.side-nav .side_quick .list_side_quick li a span {line-height:1;}
.side-nav .side_quick .list_side_quick .item_search a:before {background-image:url(../images/common/ico_quick_search.png); background-size:80%;}
.side-nav .side_quick .list_side_quick .item_mypage a:before {background-image:url(../images/common/ico_quick_mypage.png);}
.side-nav .side_quick .list_side_quick .item_password a:before {background-image:url(../images/common/ico_quick_resetPassword.png);}
/* .side-nav .side_quick .list_side_quick .item_manage a:before {background-position:0%;} */

.side-nav .all-menu {}
.side-nav .all-menu .list_depth-1 {}
.side-nav .all-menu .list_depth-1 li {}
.side-nav .all-menu .list_depth-1 li .tit_sub-1 {
    width:100%; 
    height:26px; 
    padding-left:20px; 
    font-size:12px; 
    font-weight:400; 
    line-height:26px; 
    color:#7F8696; 
    background-color:#F2F2F2; 
    box-sizing:border-box;
}

.side-nav .all-menu .list_depth-1 li .list_depth-2 {width:100%; margin:0 auto; padding-bottom:20px;}
.side-nav .all-menu .list_depth-1 li .list_depth-2 li {position:relative; line-height:45px;}
.side-nav .all-menu .list_depth-1 li .list_depth-2 li:after {content:''; display:block; position:absolute; bottom:0; right:0; width:90%; border-bottom:1px solid #E8E8E8;}
.side-nav .all-menu .list_depth-2 a {display:inline-block; width:100%; padding-left:30px; font-size:16px; box-sizing:border-box; background-image:url(../images/common/ico_arrow_right2.png); background-repeat:no-repeat; background-position:95% center; background-size:7px auto; cursor:pointer;}
.side-nav .all-menu .list_depth-2 .faq a {color:#f5bc00; font-weight:700;} 
.side-nav .all-menu .list_depth-2 .data_guide a {color:#0056AF; font-weight:700;} 
.mypage .side-nav .all-menu li:last-child li:last-child h3 {padding-left:30px;}
.side-nav .btn_foot {width:90%; margin:20px auto 50px; border-radius:2px;-webkit-border-radius:2px;}

.bg_explanation {
    display:none; 
    position:fixed; 
    z-index:80; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background:rgba(0, 86, 175, 0.95);
}
.explanation .bg_explanation {display:block;}
.explanation #header {z-index:80;} 
.explanation #header .btn_menu:after {
    content:'전체메뉴';
    display:block; 
    position:absolute; 
    top:30px;
    left:0px; 
    width:96px; 
    padding:31px 0px 3px; 
    color:#333; 
    font-size:20px; 
    text-align:center;
    line-height:1.5;
    background-image:url(../images/main/bg_explanation_menu.png); 
    background-size:100%; 
    background-position:0 100%; 
    background-repeat:no-repeat; 
} 
.explanation #header a {overflow-x:visible;overflow-y:visible; position:relative;} 
.explanation #header a:after {
    display:block; 
    position:absolute; 
    color:#333;  
    font-size:20px;
    text-align:center;
    background-size:100%; 
    background-position:0 100%; 
    background-repeat:no-repeat;
} 
.explanation #header .link_payment:after {content:'결제하기'; left:-58px; top:21px; width:92.5px; padding:40px 0px 3px; background-image: url(../images/main/bg_explanation_payment.png);} 
.explanation #header .link_notice:after {content:'알림'; left:-20px; top:30px; width:55px; padding:75px 0 3px; background-image:url(../images/main/bg_explanation_notice.png)} 
.explanation #header .link_mypage:after {content:'마이페이지'; right:-14px; top:30px; width:112px; padding:120px 0 3px; background-image:url(../images/main/bg_explanation_mypage.png)} 
.explanation #container .box_input {z-index:80;} 
.explanation #container .box_input:after {
    content:'차량 검색'; 
    display:block; 
    position:absolute; 
    bottom:-70px; 
    left:50%; 
    padding:40px 14px 3px; 
    color:#333; 
    font-size:20px; 
    background-image:url(../images/main/bg_explanation_search.png);
    background-size:100%; background-position:0 100%; background-repeat:no-repeat;
    
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
} 

/* 결제 종류 선택 */
.choose_type {position:absolute; left:0; right:0; bottom:-100%; z-index:350; height:160px; padding:20px; background-color:#fff; -webkit-box-sizing:border-box;box-sizing:border-box; transition:all .5s ease-in-out;}
.choose_type.active {bottom:0%;}
.choose_type .btn_foot_area {margin:0 auto;}
.choose_type .btn_foot_area a:first-child {margin-bottom:20px;line-height:63px}

/* 공지사항 */
.announcement {}
.announcement .content {overflow-y:scroll; position:absolute; top:70px; left:0; right:0; bottom:0; width:100%; -webkit-overflow-scrolling:touch;}
.announcement ul {width:100%; font-size:14px;}
.announcement ul a {display:block; width:88.899%; margin:0 auto; padding:15px 0; border-top:1px solid #E8E8E8;}
.announcement ul h3 {font-size:14px;}
.announcement ul li:last-child a {border-bottom:1px solid #E8E8E8;}
.announcement .util {overflow-x:hidden; overflow-y:hidden; color:#7F8696; margin-bottom:5px;}
.announcement .util span {display:block; float:left;}
.announcement .util .date {float:right;}
.announcement li .detail {overflow-x:hidden; overflow-y:hidden; max-height:0; background-color:#F2F2F2; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; transition:all .5s ease-in-out;}
.announcement li.active .detail {max-height:500px;}
.announcement .detail .inner {width:89.889%; margin:0 auto; padding:30px 0;}
.announcement .detail .tit {display:block; margin-bottom:10px; font-weight:700;}
.announcement .new {display:inline-block; width:5px; height:5px; margin:-2px 5px 0 0; background-color:#D41414; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; vertical-align:middle;}


/* 마이 페이지 */
#wrap.mypage {overflow-x:hidden; overflow-y:hidden; color:#333; background-color:#fff;}
.mypage #header {position:fixed; background-color:#fff;}
.mypage #container {background-color:#fff;}
.mypage .side-nav {position:static; width:100%; max-width:none;}
.mypage .all-menu .list_depth-1 > li {border-top: 10px solid #F2F2F2;}
.mypage .all-menu .list_depth-1 li .list_depth-2 {padding:0;}
.mypage .all-menu .list_depth-1 li .list_depth-2 li:last-child:after {content:none}
.mypage .all-menu .list_depth-1 li .list_depth-2:last-child li:last-child:after {content:none}
.mypage .all-menu .list_depth-1 > li:last-child a {background:none;}

/* 정보 수정 */
#wrap.modify_profile {overflow-x:visible; overflow-y:visible;}
.modify_profile .side-nav {overflow:visible;}
.modify_profile .cont_middle {padding-bottom:60px;}
.modify_profile .side-nav .top_wrap {padding-bottom:40px; border-bottom:10px solid #F2F2F2;}
.modify_profile .side-nav .top_wrap .profile {margin-bottom:0;}
.modify_profile .side-nav .profile > * {margin:0 auto;}
.modify_profile .side-nav .profile .img_area {width:100%;}
.modify_profile .side-nav .profile .img_area .mask {width:100px; height:100px; margin:0 auto;}
.modify_profile .side-nav .profile .img_area .img_profile {top:3px; left:5px; width:400%;}

.modify_profile .side-nav .profile .content_area button {width:110px; height:auto; margin:13px auto 0; background-color:#7F8696; border-radius:20px;-webkit-border-radius:20px; color:#fff; font-size:12px; line-height:25px; text-align:center;}
.modify_profile .box_input {margin-bottom:20px;}
.modify_profile .e-mail {margin-bottom:35px;}
.modify_profile #email {margin-bottom:10px;}
.modify_profile .box_phoneNumber {position:relative;}
.modify_profile .box_phoneNumber #phoneNumber {width:70%; margin-bottom:10px;}
/* .modify_profile #verifyNumber {display:inline-block; margin-bottom:10px; width:70%;} */
.modify_profile .btn_foot {position:fixed; bottom:0; left:0; width:100%; margin-bottom:0;}
.modify_profile .id {overflow-x:hidden; overflow-y:hidden;}
.modify_profile .id p {float:right; font-size:12px; line-height:27px; color:#0056AF;}
.modify_profile #id {font-size:18px;}
.modify_profile .txt_help {font-size:12px; color:#0056AF;}
.modify_profile .sub-page {display:none;}
.modify_profile .box_input .box_pw {margin-bottom:10px;}
.modify_profile .box_input .last {margin-bottom:20px;}
.modify_profile .txt_inform {font-size:14px}
.modify_profile .txt_inform.correct {visibility:hidden;}
.modify_profile .txt_inform.incorrect {position:absolute; left:0; bottom:0; color: #D41414; visibility:hidden;}
.modify_profile .company_name input:last-child {margin-top:10px;}
.modify_profile #txtEmail {margin-bottom:10px;}
.modify_profile #txtPhone {width:70%;}
.modify_profile .input_file {overflow-x:hidden; overflow-y:hidden; position:absolute; z-index:-1; width:0.1px; height:0.1px; opacity:0;}
.modify_profile .box_photo {overflow-x:hidden; overflow-y:hidden; position:relative; width:100%; height:160px;} 
.modify_profile .box_photo .preview_file {display:block; width:100%; height:160px; border:1px solid #7F8696; border-radius:1px;-webkit-border-radius:1px; text-align:center; color:#ccc; font-size:18px; line-height:160px; box-sizing:border-box; cursor:pointer;} 
.modify_profile .box_photo .img_preview {position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%, -50%);}


#wrap.certifyNumber-opened {overflow-x:hidden; overflow-y:hidden; height:100%;}
#wrap.certifyNumber-opened #certifyNumber {display:block; top:0;}
#certifyNumber .header {position:relative;}
#certifyNumber .txt_inform {font-size:16px;}
#certifyNumber .box_input.number {margin-bottom:20px;}
#certifyNumber .box_input {margin-bottom:10px;}
#certifyNumber .phone_num {width:66%; font-size:1.125rem;}
#certifyNumber .request {width: 31%; margin-bottom:0; background-color:#7F8696; color:#fff;}
#certifyNumber .box_toggle {visibility:hidden;}
#certifyNumber .box_toggle.active {visibility:visible;}
#certifyNumber .txt_alert {position:absolute; bottom:125px; left:0; width:100%;  font-size:22px; font-weight:700; color:#0056AF; text-align:center;}
#certifyNumber .time {position:absolute; right:14px; top:50%; margin-top:0; font-size:18px; color:#D41414;}
#certifyNumber .box_verifyNumber {position:relative;}
#certifyNumber .current_number {font-size:18px; }
#certifyNumber .time {position:absolute; right:14px; top:50%; margin-top:-13px; font-size:18px; color:#D41414;
}

#terms1, #terms2 {}
#terms1 .header, #terms2 .header {position:relative;}
#terms1 .cont_top, #terms2 .cont_top {border:none;}
#terms1 .cont_middle, #terms2 .cont_middle {overflow-y:scroll; position:absolute; left:0; bottom:80px; width:100%; height:62%; padding-top:0; -webkit-overflow-scrolling:touch;}
#terms1 h4, #terms2 h4 {font-size:12px;}
#terms1 .row, #terms2 .row {width:88.8889%; margin:0 auto 25px; color:#7F8696; font-size:12px;}
#terms1 .logo, #terms2 .logo {text-align:center;}
#terms1 .logo img, #terms2 .logo img {display:inline-block; width:157px; height:32px;}

#resetPassword .header {position:relative;}

/* 문의하기 팝업 */
#popupAsk label {display:block; line-height:50px; border:1px solid #707070; background-color:#fff; color:#7F8696; text-align:center; cursor:pointer;}
#popupAsk label.active {background-color:#0056AF; color:#fff; }
#popupAsk .type_select {width:100%;}
#popupAsk .type_select:after {content:''; display:block; clear:both;}
#popupAsk .box_input {position:relative; width:48%; float:right;}
#popupAsk .box_input:first-child {float:left;}
#popupAsk .box_input input {position:absolute; top:0; left:0; z-index:-1;}
#popupAsk textarea {padding:10px 15px; margin-top:30px;}

/* 데이터 안내 */
#wrap.data_guide {height:auto;}
#wrap.data_guide #header {position:fixed;}
#wrap.data_guide #container {height:auto;}
#wrap.data_guide .content {position:static; top:0;}

/* 자주 묻는 질문 FAQ */
#wrap.faq #header {position: fixed}

/* 보험가입신청 내역 */
.insurance_list {}
.insurance_list ul h3 {width:60%;}
.insurance_list ul .finish {font-weight:700;}
.insurance_list ul li a {float:right; display:inline-block; width:auto; margin:0; padding:0; border:none;}
.insurance_list .status {color:#7F8696;}
.insurance_list #container > .content {padding-bottom:20px;}
.insurance_list ul li {overflow:hidden; display:block; width:88.899%; margin:0 auto; padding:15px 0; border-top:1px solid #E8E8E8;}
.insurance_list ul li:last-child {border-bottom:1px solid #E8E8E8}

/* 다이렉트 자동차보험 */
.direct_insurance {}
.direct_insurance #container {overflow-y:scroll; -webkit-overflow-scrolling:touch;}
.direct_insurance .content {padding:20px 0 80px;}
.direct_insurance .desc {font-size:17px; text-align:center; color:#0056AF;}
.direct_insurance .tit {display:block; margin-bottom:15px; font-size:28px; color:#0056AF; text-align:center;}
.direct_insurance .tit em {font-weight:700;}
.direct_insurance .desc em {font-weight:700;}
.direct_insurance .desc .red {color:#D41414;}
.direct_insurance .logo_hanwha {display:block; width:70%; max-width:200px; margin:0 auto 40px;}
.direct_insurance .tit_step {margin-bottom:15px; font-size:14px; color:#0056AF;}
.direct_insurance .row {position:relative; margin-top:30px;}
.direct_insurance .row .box_input {overflow-x:hidden; overflow-y:hidden; float:left;  position:relative; width:48%;}
.direct_insurance .row .box_input:last-child {margin-left:4%;}
.direct_insurance .row label {display:block; padding:5px 0; border:1px solid #7F8696; background-color:#fff; color:#7F8696; text-align:center; box-sizing:border-box;-webkit-box-sizing:border-box; cursor:pointer;}
.direct_insurance .row label.active {background-color:#0056AF; color:#fff; border:none;}
.direct_insurance .row label em {display:block; font-weight:700;}
.direct_insurance .row input[type='radio'] {position:absolute; right:0; bottom:0; z-index:-1;} 
.direct_insurance .row .hanwha {padding:12px 0; border:1px solid #7F8696;
    background-color:#fff; color:#7F8696; font-size:16px; font-weight:700; text-align:center;}
.direct_insurance .row .hanwha img {display:inline-block; width:30px; margin-right:7px; vertical-align:top;}
.direct_insurance #inputSearchNumber {border:1px solid #0056AF;}
.direct_insurance .top {margin-bottom:40px}
.direct_insurance .bottom {position:relative;}
.direct_insurance .notice {margin-bottom:30px;}
.direct_insurance .notice .desc_notice {color:#7F8696; font-size:13.5px;}
.direct_insurance .hours {text-align:center;}
.direct_insurance .hours .tit_hours {position:relative; margin-bottom:15px;}
.direct_insurance .hours .txt_emp {background-color:#E8E8E8; color:#7F8696;}
.direct_insurance .hours .tit_hours:before {content:''; display:block; position:absolute; top:50%; z-index:-1; clear:both; width:100%; border:1px solid #E8E8E8; margin-top:-0.5px;}
.direct_insurance .hours p {font-size:14px; color:#7F8696;}
.direct_insurance .hours em {color:#0056AF;}
.direct_insurance .info .tit {}
.direct_insurance .info .desc {font-size:18px; text-align:center; color:#333;}
.direct_insurance .number {margin-top:45px;}
.direct_insurance .finish {margin-bottom:30px;}
.direct_insurance .finish .tit {margin-bottom:10px; font-weight:700;}
.direct_insurance .finish .desc {color:#333;}
.direct_insurance .must {border:1px solid #ccc; padding:15px 30px; font-size:17px; color:#7F8696; border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.direct_insurance .logo_autoup {display:block; width:70%; max-width:160px; margin:0 auto 40px;}
.direct_insurance .must .tit {font-size:22px; color:#D41414;}
.direct_insurance .must .desc {color:#7F8696; margin-bottom:20px;}
.direct_insurance .must .blue {color:#0056AF;}

.direct_insurance .row.insurance {visibility:hidden;}
.direct_1 .row .hanwha {display:block; width:100%; opacity:0; transition:all 0.5s ease;}
.direct_1 .row.insurance.on {visibility:visible;}
.direct_1 .row.insurance.on .hanwha {visibility:visible; opacity:1;}
.direct_1 .row .hanwha.active {background-color:#F05B13; color:#fff;}
.direct_1 .row #hanwha {visibility:hidden; opacity:0;}

.direct_1 .btn_foot,
.direct_2-1 .btn_foot,
.direct_2-2 .btn_foot {bottom:-50px; transition:all 0.8s ease;}
.direct_1 .btn_foot.active,
.direct_2-1 .btn_foot.active,
.direct_2-2 .btn_foot.active {bottom:0}

.direct_2-2 .number {margin:0;}

.direct_2-1-1 .top .car_number {display:block; padding-left:15px; font-size:20px;}
.direct_2-1-1 .box_input > * {margin-bottom:10px;}
.direct_2-1-1 .bottom {display:none}

/* 한화 시승 보험 */
.trialRide_insurance #container {overflow-y:scroll;}
.trialRide_insurance .content {padding:0 0 60px; margin:10px auto 0;}
.trialRide_insurance .cont_top {padding-bottom:20px;}
.trialRide_insurance .car_title_wrap {padding-top:0; margin-bottom:20px;}
.trialRide_insurance .tit_step {margin-bottom:15px; font-size:14px; color:#0056AF;}
.trialRide_insurance .btn_confirm,
.trialRide_insurance .btn_foot_area {position:absolute; left:0; right:0; bottom:0;}
.trialRide_insurance .feature {position:relative; padding:10px 15px; border:2px solid #333; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.trialRide_insurance .feature .cut_off {
    border-top: 10px solid transparent;
    border-right: 10px solid #333;
    border-bottom: 9px solid #333;
    border-left: 9px solid transparent;
}
.trialRide_insurance .feature .cut_off::after {
    left:-8px;
    border-top: 10px solid transparent;
    border-right: 10px solid white;
    border-bottom: 10px solid white;
    border-left: 10px solid transparent;
}
.trialRide_insurance .feature table {width:100%;}
.trialRide_insurance .desc {font-size:18px; color:#0056AF; text-align:center;}
.trialRide_insurance table {width:100%; text-align:left}
.trialRide_insurance table .tit_data {display:table-cell;}
.trialRide_insurance table td {font-weight:700;}

.trialRide_1 .desc_noDanji {margin-top:10px; color:#0056AF; font-size:16px; font-weight:700; text-align:center;}
/* .trialRide_1 .desc_noDanji input {display:inline-block; margin-right:10px;} */
.trialRide_1 .no_danji .btn_area .right {border-left:1px solid #DADADE; color:#0056AF; font-weight:700;}

.trialRide_2 .desc {margin:20px 0 5px;}
.trialRide_2 .desc_2 {margin-bottom:20px; font-size:14px; color:#D41414; text-align:center;}
.trialRide_2 #modify .container {height:100%; padding-top:70px;}
.trialRide_2 #modify .cont_middle {overflow-y:scroll; position:absolute; top:200px; left:0; right:0; bottom:0; padding-bottom:70px; -webkit-overflow-scrolling:touch; scroll-behavior: smooth;}
.trialRide_2 #modify .car_store {margin-bottom:20px;}
/* .trialRide_2 #modify .dealer {margin-bottom:80px;} */
.trialRide_2 #modify .box_input > select,
.trialRide_2 #modify .box_input > input {margin-bottom:10px;}
.trialRide_2 #modify .box_input {margin-bottom:12px;}
.trialRide_2 #modify .number .box_input {margin-bottom:30px;}
.trialRide_2 #modify .tit_step {margin-bottom:6px; font-size:12px; color:#7F8696}
.trialRide_2 .info {padding:10px 15px; border-top:2px solid #333; border-bottom:2px solid #333;}
.trialRide_2 .info table td {font-weight:400; font-size:18px;}
.trialRide_2 .desc2 {margin-top:20px; color:#D41414; font-size:14px; text-align:center;}

.trialRide_3 .desc {margin-bottom:20px; font-size:28px;}
.trialRide_3 .desc em {font-weight:700;}
.trialRide_3 table {width:100%;}
.trialRide_3 table th,
.trialRide_3 table td {padding:0 20px; vertical-align:top;}
.trialRide_3 table tr {border-left:2px solid #0056AF; border-right:2px solid #0056AF;}
.trialRide_3 table .top {border-top:2px solid #0056AF;}
.trialRide_3 table .top > * {padding-top:10px;}
.trialRide_3 table .bottom {border-bottom:2px solid #0056AF;}
.trialRide_3 table .bottom > * {padding-bottom:8px;}
.trialRide_3 .btn_submit {position:absolute; bottom:0;}
.trialRide_3 .table_wrapper {position:relative;}
.trialRide_3 .cut_off {right:2px; border-top:8px solid transparent; border-right:8px solid #0056AF; border-bottom:9px solid #0056AF;}
.trialRide_3 .cut_off:after {top:-10px; border-width:11px;}

/* 시승보험 안내 */
.trialRide_paymentGuide {}
.trialRide_paymentGuide #container {padding-top:40px;}
.trialRide_paymentGuide .content {height:100%; padding-top:24px;}
.trialRide_paymentGuide .tit_wrap {text-align:center; margin-bottom:30px;}
.trialRide_paymentGuide .tit_top {margin-bottom:10px; font-weight:300; font-size:28px; color:#0056AF;}
.trialRide_paymentGuide .tit_top strong {font-weight:700;}
.trialRide_paymentGuide .tit_bottom {font-size:28px; color:#333; font-weight:700;}
.trialRide_paymentGuide .info {text-align:center;}
.trialRide_paymentGuide .info .tit_info {margin-bottom:30px; padding:2px 20px; border:1px solid #7F8696; background-color:#fff; color:#7F8696;}
.trialRide_paymentGuide .info dl {width:100%;}
.trialRide_paymentGuide .info dl .col1 {width:27%;}
.trialRide_paymentGuide .info dl .col1 dd {color:#333; font-weight:400;}
.trialRide_paymentGuide .info dl .col2 {width:40%;}
.trialRide_paymentGuide .info dl .col3 {width:33%; border:none;}
.trialRide_paymentGuide .info dl div {float:left; width:33.333%; border-right:1px solid #E8E8E8; box-sizing:border-box;-webkit-box-sizing:border-box;}
.trialRide_paymentGuide .info dl div:first-child {border-left:1px solid #E8E8E8;}
.trialRide_paymentGuide .info dl div dt {margin-bottom:8px;}
.trialRide_paymentGuide .info dl div dd {font-size:12px; font-weight:700; color:#0056AF;}
.trialRide_paymentGuide .desc_balloon {position:absolute; left:50%; bottom:100px; padding:15px; transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);}
.trialRide_paymentGuide .desc_balloon .tit {margin-bottom:10px;}
.trialRide_paymentGuide .desc_balloon .desc {font-size:14px; color:#7F8696; text-align:left;}
.trialRide_paymentGuide .desc_balloon .price {margin-top:5px; font-size:12px; color:#7F8696; text-align:center;}
.trialRide_paymentGuide .btn_foot {font-weight:700; font-size:18px;}


/* 메인 팝업 */
.popup_wrapper {position:absolute; z-index:11000; width:100%; height:100%;}
.popup_wrapper .popup_bg {position:absolute; z-index:11000; width:100%; height:100%; background-color:#000; background:rgba(0, 0, 0, 0.8)}
.popup_wrapper .popup_main {display:none; position:absolute; left:50%; top:50%; z-index: 11000; width:280px; height:521px; margin:0 auto; 
    background-size: 100%; text-align:center; transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%); background-repeat:no-repeat;}
.popup_wrapper .btn_popup {display:block; position:absolute; bottom:0; width:50%; height:40px; border:none;cursor:pointer;}
.popup_wrapper .btn_popup.left {left:0;}
.popup_wrapper .btn_popup.right {right:0;}
.popup_wrapper #popup_main1 .app_store {position:absolute; width:117px; height:37px; top:372px; left:18px;}
.popup_wrapper #popup_main1 .google_play {position:absolute; width:117px; height:37px; top:372px; right:18px;}
#popupBannerUpdate {display:block;}
#popupBannerHanwha {display:none;}
#popupBanner {display:none; position:absolute;}


/* 긴급 팝업 */
.popup_urgent_wrapper {display:none; z-index:12000;}
.popup_urgent_wrapper .popup_bg {z-index:12000;}
.popup_urgent_wrapper .popup_main {z-index:12000;}


/* 시승보험 동영상 */
.video_wrapper {position:absolute; top:0; top:100%; left:0; right:0; z-index:300; height:100%; background-color:#000; transition:all ease 0.3s;}
.video_wrapper .video_area {position:absolute; top:47%; left:50%; width:100%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.video_wrapper iframe {display:block; width:100%;}
.video_wrapper #videoTrial {display:block; width:100%;}
.video_wrapper .loading {position:absolute; top:-2px; left:0; right:0; bottom:-2px; background-color:rgba(0, 0, 0, 0.8); text-align:center;}
.progress-ring {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.progress-ring__circle {display:inline-block; transition: all ease 10s; transform: rotate(-90deg); transform-origin: 50% 50%;}
.video_wrapper .btn_area {position:absolute; top:80%; left:50%; font-size:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.video_wrapper .btn_area button {display:inline-block; width:auto; height:auto; padding:5px 20px; border:2px solid #fff; font-size:12px; font-weight:600; line-height:1.5; color:#fff; cursor:pointer;}
.video_wrapper .btn_area .video_replay {margin-right:15px;}

/* 롤링 배너 클릭 시 연결 SK렌터카 페이지 */
.event_banner {position:relative; height:auto;}

img {width:100%; vertical-align:top;}

.event_banner .btn_close {position:fixed; top:3%; right:6%; width:9%; padding-bottom:9%; height:auto; background-image:url(../images/main/btn_close_circle.png); background-size:100% 100%; background-position:center center; background-repeat:no-repeat; margin:0; }

.event_banner .link_area {position:absolute; display:block; top:15.7%; width:100%; text-align:center;}
.event_banner .link_area a {display:inline-block; background-size:100% 100%; background-repeat:no-repeat; width:16%; padding-bottom:21%; margin-left:12.5%; vertical-align:top;}
.event_banner .link_area .btn_online {width:18.5%; padding-bottom:20.5%; margin-top:2px; margin-left:0; background-image:url(../images/main/btn_online.png);}
.event_banner .link_area .btn_guide {background-image:url(../images/main/btn_guide.png)}
.event_banner .link_area .btn_join {background-image:url(../images/main/btn_join.png)}

.event_banner .btn_area {position:absolute; width:100%; right:0; bottom:0;}
.event_banner .btn_area a {position:absolute; right:0; bottom:0; display:block; width:11%; padding-bottom:11%; background-size:100% 100%; background-repeat:no-repeat; cursor:pointer;}
.event_banner .dongtan {bottom:12.3%;}
.event_banner .incheon {bottom:9%;}
.event_banner .daejeon {bottom:5.4%}

.event_banner .btn_area .link_call {right:33%; right:19%; background-image:url(../images/main/ico_sk_call.png);}
.event_banner .btn_area .link_map {right:19%; right:5%; background-image:url(../images/main/ico_sk_map.png);}
.event_banner .btn_area .link_kakao {display:none; right:5%; background-image:url(../images/main/ico_sk_kakao.png);}

.event_banner .link_hompage {position:absolute; right:0; bottom:0; width:100%; height:3.3%;}
.event_banner .link_hompage a {position:absolute; width:32%; display:inline-block; font-size:0; vertical-align:top;}
.event_banner .link_hompage .first {left:30%; bottom:52%;}
.event_banner .link_hompage .second {left:30%; bottom:32%; width:35%;}


/* 시세 확인서 요청 */
.confirmation_request {}
.confirmation_request .btn_foot {position:fixed; bottom:0; left:0; margin-bottom:0;}
.confirmation_request .desc_notice em {color:#0056AF; font-weight:700;}
.confirmation_request #inputSearchNumber {padding:0 70px 0 15px; text-align:right;}
.confirmation_request #inputSearchNumber::placeholder {text-align:right;}
.confirmation_request .search-bar span {display:block; position:absolute; right:14px; top:7px; color:#CCDDEF; font-size:30px; font-weight:400; font-family:'NotoSans';}
.confirmation_request .notice {margin-bottom:40px;}
.direct_insurance .tit {margin-bottom:60px;}
.direct_insurance .notice .desc_notice {font-size:32px;}

/* media query */

/* 모바일 가로모드 혹은 패드용 */
@media (min-width:500px) {
    .cont_search-1 .box_search.previous {right:-40px;}/*지난 검색 버튼 뷰포트 오른쪽에 완벽히 붙게*/
}
@media (min-width:650px) {
    .cont_search-1 .box_search.previous {right:-50px;}/*지난 검색 버튼 뷰포트 오른쪽에 완벽히 붙게*/
}
@media (min-width:1000px) {
    .cont_search-1 .box_search.previous {right:-60px;}/*지난 검색 버튼 뷰포트 오른쪽에 완벽히 붙게*/
}

/*뷰포트 높이 600px보다 작은 경우*/
@media (max-height:620px) {
    .content {padding:0px 0 20px;}
    .car_title_wrap {margin-bottom:0;}
    .txt_inform {font-size:16px;}

    .trialRide_insurance .content {padding:0 0 20px 0;}
    .trialRide_insurance .cont_top {margin-top:0;}
    .trialRide_2 .content {margin-top:10px;}
    .trialRide_2 .desc {margin:15px;}
    .trialRide_2 .desc2 {margin-top:10px;}
    .trialRide_2 .info table td {font-size:16px;}
    .sub-page .txt_inform {font-size:16px;}
    .trialRide_2 #modify .container {padding-top:60px;}
    .trialRide_2 #modify .cont_middle {top:150px;}
    .trialRide_3 .desc {font-size:24px;}
    .trialRide_3 table .top > * {padding-top:5px;}
    .trialRide_3 table .bottom > * {padding-bottom:5px;}
    .trialRide_3 .content {margin:0 auto;}
    .trialRide_paymentGuide .tit_wrap {margin-bottom:25px;}
    .trialRide_paymentGuide .tit_top {margin-bottom:0; font-size:24px;}
    .trialRide_paymentGuide .tit_bottom {font-size:24px;}
    .trialRide_paymentGuide .info .tit_info {margin-bottom:15px;}
    .trialRide_paymentGuide .desc_balloon {bottom:90px;}

    .direct_insurance .logo_hanwha {margin-bottom:20px;}
    .direct_insurance .logo_autoup {display:none;}
}


/* 키오스크 미디어쿼리 */
@media (min-height:1800px) {
    #container {padding-top:210px;}
    .box_input #btn_search {right:30px; width:92px; height:92px; margin:-45px 0 0;}
    .search-bar #inputSearchNumber {height:150px; border-radius:16px; font-size:70px;}
    .search-bar #inputSearchNumber::placeholder {font-size:70px}
    .search-bar #inputSearchNumber::-webkit-placeholder {font-size:70px}
    #header .btn_menu {width:75px; height:75px;}
    #header .quick_menu a {width:60px; height:64px; margin-right:40px;}
    #header .quick_menu .link_trialRide {width:60px;}
    #header .quick_menu .link_payment {width:64px;}
    #header .quick_menu .link_notice {width:64px;}
    #header .quick_menu .link_mypage {height:70px}
    #header .quick_menu a .num {right:-15px; height:34px; padding:0 10px; font-size:30px; -webkit-border-radius:50%;border-radius:50%; line-height:34px;}
    .cont_search-1 .box_search.previous {right:-80px;}
    .cont_search-1 .box_search.previous .link_previous {padding:39px 87px 63px 75px; font-size:34px;}
    .cont_search-1 .tit_value {font-size:88px;}
    .box_search.recent table th {padding:20px 0;}
    .box_search.recent table .current .ir_pm {width:46px; height:38px; background-size:100%;}
    .banner_slider .btn_pause {width:90px; height:90px; margin:-30px 0 0;}
    .swiper-pagination-bullet {width:20px; height:20px;}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 10px;}

    .popup_main_wrapper .popup_main {width:560px; height:1042px;}
    .popup_main_wrapper #popup_main1 .app_store {position:absolute; width:234px; height:74px; top:744px; left:36px;}
    .popup_main_wrapper #popup_main1 .google_play {position:absolute; width:234px; height:74px; top:744px; right:36px;}
    .popup_main_wrapper .btn_popup {height:80px;}
    
    .side-nav {width:80%; max-width:none;}
    .side-nav .top_box {margin:36px 0 90px 0}
    .side-nav .top_box .version {font-size:30px;}
    .side-nav .side_quick {margin-bottom:75px; font-size:30px;}
    .side-nav .profile {margin:0 auto 40px;}
    .side-nav .profile .img_area .mask {width:180px; height:180px; -webkit-border-radius:50%;border-radius:50%;}
    .side-nav .profile .content_area {padding-left:40px;}
    .side-nav .profile .content_area .user-info {margin-bottom:60px;}
    .side-nav .profile .content_area .user-info .name {margin-bottom:35px;}
    .side-nav .profile .content_area .user-info .option_number {font-size:30px;}
    .side-nav .profile .content_area .user-info .trial_number {font-size:30px;}
    .side-nav .side_quick .list_side_quick li a:before {width:150px; height:150px; -webkit-border-radius:50%;border-radius:50%;}
    .side-nav .profile .img_area .img_profile {left:10px; width:400%;}
    .side-nav .all-menu .list_depth-1 li .tit_sub-1 {height:78px; padding-left:60px; font-size:28px; line-height:78px;}
    .side-nav .all-menu .list_depth-2 a {padding-left:80px; background-size:21px auto; font-size:40px;}
    .side-nav .all-menu .list_depth-1 li .list_depth-2 li {line-height:100px;}

    .mypage .side-nav .all-menu li:last-child li:last-child h3 {padding-left:80px;}
    .modify_profile #id {}

    .trialRide_insurance .content {margin:60px auto 0;}
    .trialRide_insurance .tit_step {margin-bottom:45px; font-size:36px;}
    .trialRide_insurance .btn_confirm, .trialRide_insurance .btn_foot_area {margin-bottom:0;}
    .trialRide_insurance .desc {font-size:46px;}
    .trialRide_insurance .feature {padding:30px 45px;}

    .trialRide_1 .desc_noDanji {margin-top:80px; font-size:40px;}

    .trialRide_paymentGuide .tit_wrap {margin-bottom:90px;}
    .trialRide_paymentGuide .tit_top {font-size:76px;}
    .trialRide_paymentGuide .tit_bottom {font-size:76px;}
    .trialRide_paymentGuide .info .tit_info {margin-bottom:60px;}
    .trialRide_paymentGuide .info dl div dd {font-size:28px;}

    .trialRide_2 .info {padding:30px 45px; border-top:4px solid #333; border-bottom:4px solid #333;}
    .trialRide_2 .info table td {font-size:46px;}
    .trialRide_2 .desc2 {margin-top:60px; font-size:34px;}
    .trialRide_2 .desc {margin:50px 0;}
    .trialRide_2 #modify .container {padding-top:160px;}
    .trialRide_2 #modify .cont_middle {top:500px;}
    .trialRide_2 #modify .tit_step {margin-bottom:18px; font-size:28px;}
    .trialRide_2 #modify .box_input > select, .trialRide_2 #modify .box_input > input {margin-bottom:30px;}

    .trialRide_3 .desc {margin-bottom:60px;}
    .trialRide_3 .desc em {font-size:76px;}
    .trialRide_3 table .top > * {padding-top:24px;}
    .trialRide_3 table .bottom > * {padding-bottom:24px;}
    .trialRide_3 table th, .trialRide_3 table td {padding:0 60px;}

    .trialRide_paymentGuide #container {padding-top:180px;}
    .trialRide_paymentGuide .btn_foot {font-size:40px;}
    .trialRide_paymentGuide .desc_balloon {bottom:300px; padding:30px;}
    .trialRide_paymentGuide .desc_balloon .tit {margin-bottom:30px; font-size:52px;}
    .trialRide_paymentGuide .desc_balloon .desc {font-size:34px;}
    .trialRide_paymentGuide .desc_balloon .price {font-size:28px; margin-top:15px;}
    .trialRide_paymentGuide .info dl div {border-width:3px;}

    .choose_type {height:380px; padding:40px;}
    .choose_type .btn_foot_area a:first-child {margin-bottom:40px;}

    .direct_insurance .content {padding:62.5px 0 60px;}
    .direct_insurance .tit_step {margin-bottom:50px; font-size:34px;}
    .direct_insurance .tit {font-size:70px;}
    .direct_insurance .top {margin-bottom:120px;}
    .direct_insurance .hours .tit_hours {margin-bottom:60px;}
    .direct_insurance .hours p {font-size:34px;}
    .confirmation_request .notice {margin-bottom:120px;}
    .confirmation_request #inputSearchNumber {padding:0 140px 0 60px;}
    .confirmation_request .search-bar span {font-size:70px; top:30px;}
}


/* 공제 회원 전용 메뉴 팝업 */
.onlyDeduction {z-index:310;}