@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
 font-family: 'S-CoreDream-4Regular';
 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'S-CoreDream-5Medium';
 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'S-CoreDream-6Bold';
 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

@font-face {
font-family: 'ONE-Mobile-Title';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
font-weight: normal;
font-style: normal;
}

	
.fn_sc_L{font-family: 'S-CoreDream-3Light';}
.fn_sc_R{font-family: 'S-CoreDream-4Regular';}
.fn_sc_M{font-family: 'S-CoreDream-5Medium';}
.fn_sc_B{font-family: 'S-CoreDream-6Bold';}
.fn_ms{font-family: 'Montserrat';}
.fn_noto{font-family: 'noto sans kr';}

#header{ position:fixed; top:0; left: 0; width: 100%; background: transparent; z-index: 10000; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;}
#header .va_wrap{ height: 100px;}   
#header .gnb ul > li a{ font-size: 1.315em; padding: 0 10px; margin: 0 50px; line-height: 1; font-family: 'S-CoreDream-5Medium'; color:#fff;}     
#header .h_tel .tel_nm {font-size: 1.125em; display: block; color:#fff;}
#header .ph_menu{position: fixed; top: 0; right: -350px; width:280px; background: #fff; height: 100%; padding-top: 70px; box-shadow: 0 0 1rem #888; overflow-y: auto; overflow-x: hidden;  transition:.7s;}
#header .ph_menu.on{right:0;}
#header .ph_menu .va_wrap{ height:65px; text-align:left;}
#header .ph_menu ul > li{ padding:0 1em;}
#header .ph_menu ul > li .va_wrap{border-top:1px solid #ddd; padding:0 .5em; position:relative;}
#header .ph_menu ul > li:last-child .va_wrap{border-bottom:1px solid #ddd;}
#header .ph_menu ul > li .va_wrap .va{font-family: 'S-CoreDream-4Regular';}
#header .ph_menu ul > li .va_wrap .va:before{content:'\e93f'; font-family: 'xeicon'; position: absolute; top: 50%; right: 0.5em; transform: translateY(-50%); font-size: 1.25em; color: #999; width: 1.625em; height: 1.625em; line-height: 1.625em; text-align: center;}
#header .ph_menu .ph_close{position: absolute; top: 0.5em; right: .8em; font-size: 1.85em; color: #888;}
#header .btn_gnb{font-size:2.5em; color:#fff; margin-left:30px;}

#footer {background-color: #323232; padding: 30px 0 40px; font-size: 16px;}
#footer .f_info{ margin-top: 1.5em;}
#footer .f_info > li{color: #fff; opacity: .6; font-size: 1em; margin-bottom: 5px; margin-right: 30px; font-weight: 300;}
#footer .f_info > li.f_copy{opacity: .4; margin-top: 20px; font-size: .813em; letter-spacing: -.1px;}


/*네비*/
.mainNav{ position:fixed; right:1%; top:0; height:100%; width:2em; z-index:999}
.mainNav .list{ padding-bottom:2em; position:relative}
.mainNav .list > li{ counter-increment: myIndex}
.mainNav .list > li:before{ content:"0" counter(myIndex); font-size:.813em; font-weight:700; position:absolute; left:0; bottom:0; display:block; width:100%; text-align:center; opacity:0; transition:.3s; color:#313232}
.mainNav .list > li > a{ display:block; width:2em; text-align:center; transition:.3s; color:#313232}
.mainNav .list > li.home > a .xi{ margin-bottom:.5em}
.mainNav .list > li.home > a:hover{ color:#3e66d2}
.mainNav .list > li > a .line{ display:block; height:2em; width:2px; background:#313232; opacity:.5; margin:0 auto; transition:.3s}
.mainNav .list > li > a:hover .line{ opacity:.7}
.mainNav .list > li.on:before{ opacity:1}
.mainNav .list > li.on > a .line{ opacity:1 !important}
.mainNav.white .list > li:before,
.mainNav.white .list > li > a{ color:#fff}
.mainNav.white .list > li > a .line{ background:#fff}


/*풀페이지 inc*/
.doc{font-size:16px;}
.section{display: flex; /*align-items: center;*/ overflow: hidden; background-position: center top; background-repeat: no-repeat;}
.section > *{ width: 100%;}
.section .wrap_in{ padding:0 6em; box-sizing:border-box; width:100%}
.section.fix .scrollAni{ transition:1s; transition-delay:.3s; transform:translateY(0); opacity:1}


.box1{width:1400px; max-width: 96%; margin:0 auto; position: relative;}
.bgfix{background-position: center top; background-repeat: no-repeat; background-size: cover;}

.sec_tbox{ color:#fff;}	
.sec_tbox .sec_en{font-size: 1.185em; font-weight: 500; margin-bottom: 20px;}
.sec_tbox .sec_tt{ font-size: 4.185em; margin-bottom: 25px; line-height: 1.2;}
.sec_tbox .sec_stw{display:block; font-size:1.9em; font-weight: 500; margin-top: 35px;}
.sec_tbox .sec_tw{ font-size: 1.185em; line-height: 1.7;}
.sec_tbox .sec_tw.st{ font-size: 1.125em;}


.tab_idx{}
.tab_idx > li > a{ padding:0 .5em; height:4em; border:1px solid #ddd; color:#666; transition:.3s; cursor: pointer;}
.tab_idx > li > a .va{font-size:1.068em; font-weight:500}
.tab_idx > li.on > a{ box-shadow:0 0 1em .125em rgba(0,0,0,.1); color:#184ad5; border-color:#184ad5}


/*메인 슬라이드*/
.mainSlider_wrap{ position:relative}
.mainSlider{ position:relative}
.mainSlider .el{ height:100vh; position:relative; overflow:hidden; background-color:#fff}
.mainSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; /*transform:scale(1.3);*/ transition-delay:.5s}
.mainSlider .el .layer{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}
.mainSlider .slogan{ position:absolute; left:0; top:50%; color:#fff; transform:translateY(-55%); width:100%;}
.mainSlider .slogan .t1{ font-size:4.25em; font-weight: 500; line-height:1.4; letter-spacing:.5px; transform:translateY(20%); text-align: center; opacity:0}
.mainSlider .slogan .t2{ transform:translateY(20%); opacity:0; font-weight:300; font-size: 1.625em; margin-top: 35px; text-align: center;}

/*
.mainSlider .el.swiper-slide-active .bg,
.mainSlider .el.swiper-slide-duplicate-active .bg{transform:scale(1) rotate(.001deg); transition:2.5s; transition-delay:0; transition-timing-function:ease-in}
*/
.mainSlider .el.swiper-slide-active .slogan .t1,
.mainSlider .el.swiper-slide-duplicate-active .slogan .t1{transform:translateY(0); transition:.8s; opacity:1; transition-timing-function:ease-in}
.mainSlider .el.swiper-slide-active .slogan .t2,
.mainSlider .el.swiper-slide-duplicate-active .slogan .t2{ transform:translateY(0); transition:.8s; opacity:1; transition-delay:.5s; transition-timing-function:ease-in}


.mainControl{ position:absolute; width:100%; left:0; top:41em ;z-index:100}
.mainControl .mainSlider-pagination{text-align: center;}
.mainControl .mainSlider-pagination span{ position:relative; width:37px ; height:5px; background:#fff; border:1px solid #fff; opacity:.2; margin:0 5px; transition:.3s; border-radius:0; display: inline-block}
.mainControl .mainSlider-pagination span.swiper-pagination-bullet-active{ width:75px; opacity: 1;}

.scroll_wrap{position: absolute; bottom: 0; left:50%; transform: translateX(-50%); width:70px; z-index: 10;}
.mainSlide_scroll{  color: #fff; font-size: 0.813em; font-weight: 600; text-align: center;}
.mainSlide_scroll_bar{  width: 2px; height: 75px; background: rgba(255, 255, 255, 0.2); overflow: hidden; margin: 15px auto 0;}
.scroll_bar {width: 100%; height: 32px; background: #fff; animation: box-ani 2s linear infinite backwards;}

@keyframes box-ani { 
0% { transform: translate(0, -100%); } 
100% {transform: translate(0, 300%);}
}


.box_tt{font-size:1.625em; color: #0e0e0e; font-family: 'S-CoreDream-6Bold'; margin-bottom: 15px;}
.box_tw{font-size:1.125em; color: #111; font-family: 'S-CoreDream-4Regular';}
.box_stt{font-size:1.25em; color: #555; font-family: 'S-CoreDream-6Bold'; margin-top:25px; margin-bottom: 10px;}
.box_list > li{font-size:1.125em; color: #555; position: relative; padding-left: 10px; font-family: 'S-CoreDream-4Regular'; margin-bottom: 2px;}
.box_list > li:before{content:''; width:3px; height: 3px; background-color: #555; border-radius: 50%; position: absolute; top: 11px; left: 0;}
.box_list > li:last-child{margin-bottom: 0px;}


/*차량대여안내*/
.bus_slider {width:100%; position: relative; margin-top:30px;}
.bus_slider .swiper-container{ margin-right:-20px;}
.bus_slider .swiper-container .swiper-slide{height:auto;}
.bus_slider .box_in{ margin-right:20px; padding: 45px 40px; box-sizing: border-box; border-radius: 30px; background-position: right top; background-repeat: no-repeat; background-color: #fff; height:100%;}
.bus_slider .box_in.co_st{background-color:#5aa1e3; color:#fff;}
.bus_slider .box_in.co_st > *{color:#fff;}
.bus_slider .bus_pagen{width: 100%; height: 3px; background:rgba(255,255,255,.22); position: relative; margin-top: 2.5em;}
.bus_slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#fff;}
.bus_slider .bus_pager{ position:absolute; top: -8em; right: 0;}
.bus_slider .bus_pager .b_btn{width:60px; height: 60px; line-height: 60px; border:1px solid #fff; border-radius: 50%; text-align: center; color:#fff; opacity: .8; margin-left:20px; font-size: 1.125em; cursor: pointer;}
.bus_slider .bus_pager .b_prev .xi{transform: rotate(-90deg);}
.bus_slider .bus_pager .b_next .xi{transform: rotate(-90deg);}


/*보험안내*/
.ins_tab {width:100%;}
.ins_tab .l_cont{width:calc(100% - 840px); padding-right: 160px; box-sizing: border-box;}
.ins_tab .tab_idx{margin-top:55px;}
.ins_tab .tab_idx > li .in{ font-family: 'S-CoreDream-4Regular'; color:#fff; opacity: .5; padding: 20px 30px; border-bottom:1px solid rgba(255,255,255,.22); font-size: 1.25em; cursor: pointer; position: relative;}
.ins_tab .tab_idx > li.on .in{ color:#fff; opacity:1; border-bottom:0; background-color: #5aa1e3; border-radius: 50px;}
.ins_tab .tab_idx > li.on .in:after{content:'\e940'; font-family: 'xeicon'; position: absolute; top: 50%; transform: translateY(-50%); right:30px; font-size: 1.125em;}

.ins_tab .r_cont{width:840px;} 
.ins_tab .r_cont .card_box.st1{background-image: url(../img/main/ins_img01.png);}
.ins_tab .r_cont .card_box.st2{background-image: url(../img/main/ins_img02.png);}
.ins_tab .r_cont .card_box.st3{background-image: url(../img/main/ins_img03.png);}
.ins_tab .r_cont .card_box{padding:60px; border-radius: 30px; background-position: right bottom; background-repeat: no-repeat; background-color: #fff;}
.ins_tab .r_cont .card_box .box_tt{color:#358bdc; margin-bottom: 0;}
.ins_tab .r_cont .card_box .box_tw{color:#555; font-family: 'S-CoreDream-4Regular'; letter-spacing: -.5px; line-height: 1.5;}
.ins_tab .r_cont .card_box .box_stt{color:#111; margin-top: 35px;}


/*찾아오시는 길*/
.ins_tab.st .tab_idx{margin-right:-18px;}
.ins_tab.st .tab_idx > li{ width:50%;}
.ins_tab.st .tab_idx > li .in{ opacity: .5; padding: 60px 10px; border-bottom:0; border-radius: 30px; text-align: center; border:1px solid rgba(255,255,255,.8); margin-right: 18px;}
.ins_tab.st .tab_idx > li.on .in{ color:#fff; opacity:1; background-color: #5aa1e3; border-radius: 30px; border:1px solid #5aa1e3;}
.ins_tab.st .tab_idx > li.on .in:after{display:none;}

.map_box{border-radius:30px; overflow: hidden; position: relative;}
.map_box .root_daum_roughmap .wrap_controllers{display:none;}
.map_box .map_info{color:#fff; background-color: rgba(0,0,0,0.6); border-radius: 30px; width:490px; box-sizing: border-box; padding: 30px; position: absolute; bottom:15px; right:15px; z-index: 100;}
.map_box .map_info .map_tt{font-family: 'S-CoreDream-6Bold'; font-size:1.625em; margin-bottom: 20px;}
.map_box .map_info .map_tw{font-family: 'S-CoreDream-3Light'; font-size:1.125em;}
.map_box .map_info .map_tw span:nth-child(2){margin-left:15px;}

.top_btn{position:absolute; right: 45px; top: 50%; transform: translateY(-50%); width:74px; height: 74px; border-radius: 50%; background-color:#434041; font-family: 'noto sans kr';}
.top_btn .va{color:#fff; font-size:.875em;}
.top_btn .va .xi{display:block; font-size:1.5em;}


/*main_v*/
.mainCsBtn{ position: fixed; bottom:3em; right:3%; width:4em; height:4em; line-height:4em; z-index:999}
.mainCsBtn .in{ position:absolute; width:100%; height:100%; background:#0f4dfc; left:0; top:0; border-radius:100%; text-align:center; color:#fff; box-shadow:2px 1px 5px rgba(0,0,0,0.2); font-size: 1.5em; border:1px solid rgba(255,255,255,.3);}
.mainCsBtn .in:hover { background:#5aa1e3;}

/*main_sns*/
.circleAni{ position:absolute; width:100%; height:100%; border:1px solid #999; left:-0; top:0; opacity:0; border-radius:100%; animation-duration: 3s; animation-iteration-count: infinite}
.circleAni.c1{ animation-name: circleAni}
.circleAni.c2{ animation-name: circleAni; animation-delay: 1s}
.circleAni.c3{ animation-name: circleAni; animation-delay: 2s}

@keyframes circleAni{
0% {opacity:.7}
100% {opacity:0;transform:scale(1.8,1.8)}
}