/* Main header ------------------------------  */
header.main-h.sticky .wrap h1 a,
header.main-h:hover .wrap h1 a {background-image:url(../images/logo.png);}

header.main-h #gnb>ul>li>ul>li>a { display:none;}
#gnb>ul>li>ul>li>a { display:block;line-height:1.3; color:#333; font-weight:400;  font-size:16px;letter-spacing:-0.5px;padding:5px 0;}

header.main-h.sticky,
header.main-h.wh,
header.main-h:hover { position:fixed; background:rgba(0,0,0,0.3); box-shadow:none;}

header.main-h #gnb,
header.main-h .gnb_bg {display:none;}

header.main-h.sticky #gnb>ul>li>a,
header.main-h.wh #gnb>ul>li>a,
header.main-h:hover #gnb>ul>li>a { color:#fff; }

header.main-h.sticky  #gnb>ul>li:hover>a,
header.main-h.wh  #gnb>ul>li:hover>a,
header.main-h:hover #gnb>ul>li:hover>a { color:#fff;}

header.main-h.sticky .wrap .tel_num span,
header.main-h:hover .wrap .tel_num span {color:#fff;}

header.main-h.sticky .wrap .tel_num span:before, 
header.main-h:hover .wrap .tel_num  span:before {background:url(../images/top_tel.png);background-size:100% 100%;}

header.main-h.sticky .btn_total i,
header.main-h:hover  .btn_total i { background:#fff;}

header .wrap .tel_num {right:160px;}
header.main-h .btn_total span {display:block;}
header.main-h.total_open .btn_total i {background:#000}

header .wrap .top_phone {right:150px;}

header.sticky .wrap .top_phone .telnum,
header:hover .wrap .top_phone .telnum,
header:hover .wrap .top_phone .drm-num span,
header.sticky .wrap .top_phone .drm-num span,
header:hover .wrap .top_phone .drm-num span.part, 
header.sticky .wrap .top_phone .drm-num span.part {color:#fff;}

header.sticky .wrap .top_phone .telnum:before,
header:hover .wrap .top_phone .telnum:before,
header.sticky .wrap .top_phone .drm-num span.tel:before,
header:hover .wrap .top_phone .drm-num span.tel:before {background:url(/images/top_tel.png);background-size:100% 100%;}


#quick-nav {left:0;bottom:0;/*border-top-right-radius:15px;border-top-left-radius:0;border-bottom-left-radius:0;*/}
#quick-nav ul li{margin-left:-10px;}



/* Main Position Menu */
#nav { position:fixed; top:0; right:0; z-index:9; }
#nav ul { position:fixed;width:40px; right:10px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
#nav li { padding:10px 0px;margin:0;opacity:0 }
#nav li + li{margin-top: 4px;}
#nav li:nth-child(1) {height: 80px;}
#nav li:nth-child(2) {height: 92px;}
#nav li:nth-child(3) {height: 110px;}
#nav li:nth-child(4) {height: 107px;} 
#nav li:nth-child(5) {height: 134px;}
#nav li:nth-child(6) {height: 107px;}

#nav li a {display:block; position:relative;height:40px;text-align:center; margin:0 auto; border:1px solid rgba(201,201,201,0.6);
	 -webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;border-radius:50px; cursor:pointer;transform: rotate(90deg);transform-origin: left;cursor:pointer;}
#nav li:nth-child(1) a {width: 80px;}
#nav li:nth-child(2) a  {width: 92px;}
#nav li:nth-child(3) a {width: 110px;}
#nav li:nth-child(4) a  {width:107px;} 
#nav li:nth-child(5) a {width: 134px;}
#nav li:nth-child(6) a {width: 107px;}

#nav li a span {display:block;color:#c9c9c9;font-weight:700;font-size:16px;line-height:38px;}

#nav li.active a { border-color:#0fbed1;background:#0fbed1; }
#nav li.active a span,
#nav li.active a:hover span {color:#fff;}


.m_gap { height:100%; }
.mt_slier { position:relative;width:100%;  height: 100%;max-height:970px;  overflow:hidden; z-index:0;}
.mt_slier .mvt {position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); -webkit-transform:translateY(-50%);height:80px;margin-bottom:60px;text-align:center;z-index:11;overflow:hidden;}
.mt_slier .mvt span {display:inline-block;padding:0 10px;font-size:60px;line-height:1;color:#fff;font-weight:700;letter-spacing:-1px;opacity:0;}


.mvisual {position:relative;overflow:hidden;}
.mvisual:before {content:''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);  position:absolute; top:0; left:0; z-index: 1;}
.mvisual video { display: block; width: 100%;  height: 100%; object-fit: cover; object-position:center center;}
.mvisual iframe {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.mvisual img.value {display: block; width: 100%;max-width:100%;}


.scroll_down { position:absolute; bottom:60px; left:50%; margin-left:-12px; margin-top:-16px; width:24px; height:34px; border:2px solid #fff; border-radius:24px; box-sizing:border-box; z-index:9; }
.scroll_down:before { content:''; display:block; position:absolute; top:6px; left:50%; margin-left:-1px; width:2px; height:10px; background-color:#fff; animation:scroll_down 1s cubic-bezier(.15, .41, .69, .94) infinite; }
.scroll_down:after { content:'Scroll'; display:block; position:absolute; bottom:-5px; left:50%; width:100px; height:8px; margin-left:-50px;  color:#fff; font-size:14px;font-weight:400; text-align:center; text-transform:uppercase; opacity:0; transition:all ease-in-out 0.5s; -webkit-transition:all ease-in-out 0.5s; /*transform:rotate(90deg);-webkit-transform:rotate(90deg);*/}
.scroll_down.on:after { bottom:-22px; opacity:1; }

.m-video-thumbnail {position:absolute;bottom:30px;right:80px;z-index:20;width:200px;height:135px;background:#000 url(/images/m-video-thumbnail.jpg) no-repeat center;border-radius:15px;background-size:cover;box-shadow:1px 1px 10px 3px rgb(0 0 0 / 30%)}
.m-video-thumbnail > a {display:block;text-indent:-9999px;width:100%;height:100%;}


/* main*/

.section { width:100%; height:100%;max-height:970px; position:relative; text-align:center;overflow:hidden; box-sizing:border-box;}
.section .tx {position:relative;width:calc(100% - 100px);max-width:1600px;margin:0 auto;text-align:center;line-height:1}
.section .tx h3 {font-size:50px;font-weight:800;letter-spacing:-1px;}
.section .tx p {display:block;padding-top:10px;font-size:22px;line-height:1.3;}
.section .inner {position:relative;width:calc(100% - 100px);max-width:1600px;margin:60px auto 0;}
.section .inner:after {display:block;content:'';clear:both;}
.section .inner .l-box {position:absolute;width:50%;left:0;top:0;overflow:hidden;opacity:0;}
.section .inner .r-box {position:absolute;width:50%;right:0;top:0;overflow:hidden;opacity:0;}
.section .inner .l-box, 
.section .inner .r-box:after {display:block;content:'';clear:both;}

.section1 {background:#fff;padding:150px 0;overflow:hidden; }
.section1 .tx h3 {color:#222c;font-weight:300;letter-spacing:-3px;text-align:center;}
.section1 .tx h3 span {font-weight:700;}
.section1 .tx h3 .tx-os {margin-top:-15px;letter-spacing:0;font-size:20px;}
.section1 .tx h3 span i {color:#0fbed1;}
.section1 .slider {position: absolute;width:80%;max-width:1600px;margin:0 auto;opacity:0;left: 0;right: 0;top: 210px;}
.section1 .slider ul {width:100%;width:100%;margin:44px auto 0;}
.section1 .slider ul li {position:relative;height:703px;}
/*.section1 .slider .swiper-slide .sl-img {display:block;height:584px;width:100%;overflow:hidden;}*/
.section1 .slider .swiper-slide .sl-img {display:block;width:100%;height:584px; background-size:cover;background-position:50% 50%;overflow:hidden;}
.section1 .slider .swiper-slide .sl-img.p01 {background-image:url(../images/s01-01.jpg);}
.section1 .slider .swiper-slide .sl-img.p02 {background-image:url(../images/s01-02.jpg);}

.section1 .slider .swiper-slide .sl-tx {position:absolute;background:#0fbed1;bottom:0;right:50px;width:400px;height:273px;text-align:left;font-size:18px;letter-spacing:-0.5px;color:#fff;}
.section1 .slider .swiper-slide .sl-tx h4 {display:block;padding:40px 0 10px 40px;line-height:1.1;font-size:36px;font-weight:500;color:#fff;letter-spacing:-2px}
.section1 .slider .swiper-slide .sl-tx h4 span{font-weight:700}
.section1 .slider .swiper-slide .sl-tx p {padding-left:40px;line-height:1.3;}
.section1 .swiper-pagination { position:absolute; bottom:245px; right:70px; }
.section1 .swiper-pagination .swiper-pagination-bullet { display:inline-block; width:10px; height:10px;background:rgba(255,255,255,0.6);margin-left:5px; }
.section1 .swiper-pagination .swiper-pagination-bullet-active { background:#fff; }
.section1 .swiper-button-prev,
.section1 .swiper-button-next {top:320px;width:32px;height:60px;}
.section1 .swiper-button-prev {left: -62px; background-image:url(../images/s1_slider_bt_prev.png); }
.section1 .swiper-button-next {right: -62px; background-image:url(../images/s1_slider_bt_next.png); }

.section2 {position:relative;overflow:hidden;}
.section2 .tx {position:absolute;top:210px;left:10%;letter-spacing:-1px;text-align:left;z-index: 2;} 
/*.section2 .tx {position:absolute;width:800px;top:210px;left:10%;letter-spacing:-1px;text-align:left;z-index: 2;} */
.section2 .tx h3 {color:#fff;opacity:0;}
.section2 .tx p {color:#fff;opacity:0;}
.section2 .tx a {position:relative;display:inline-block;padding:10px 40px 10px 10px;margin-top:20px;color:#fff;font-size:18px;border:1px solid rgba(255,255,255,0.5);opacity:0;}
.section2 .tx a:after {content:'';position:absolute;top:8px;right:10px;width:11px;height:18px;background-image:url(../images/bt_type01.png);background-size:100%;opacity:80%; }

.section2 .video-bt {position:absolute;left:50%;transform:translateX(-50%);top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:22px;font-weight:500;margin-top:-80px;margin-left:-70px;z-index:2;opacity:0}
.section2 .video-bt:before {content:'';display:block;width:90px;height:90px;border-radius: 50%;margin:0 auto;background-image:url(../images/bt_play.png); background-size:100%;}
.section2 .mvideo {position:relative;overflow:hidden;}
.section2 .mvideo:before {content:''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);  position:absolute; top:0; left:0; z-index: 1;}
.section2 .mvideo video { display: block; min-width: 100%;  height: 100%; }

.section3 {background:#3c4c4e;}
.section3 .tx {position:absolute;top:210px;left:10%;letter-spacing:-1px;text-align:left;z-index: 2;}
.section3 .tx h3 {color:#0fbed1;text-align:left;}
.section3 .tx h3 span {font-size:180px;display:block;height:200px;overflow:hidden;opacity:0}
.section3 .tx h3 i {opacity:0;}
.section3 .tx p {color:#fff;opacity:0;}
.section3 .tx .guide-txt {position:absolute;top:660px;left:0;margin:0;}
.section3 .tx .guide-txt > ul li {color:#a8b0b1;    -webkit-animation-delay: 1s;    animation-delay: 1s;}

.section3 .slider { position:absolute;right:50%;top:0;margin-right:-800px; width:800px;height:100%;opacity:0;}
.section3 .slider .swiper-container {height:100%;}
.section3 .slider ul {width:100%;margin:0 auto ;}
.section3 .slider ul li {position:relative;height:100%;}
.section3 .slider .swiper-slide .sl-img {display:block;width:100%;height:100%; background-size:cover;overflow:hidden;}
.section3 .slider .swiper-slide .sl-img.p01 {background-image:url(../images/s03-01.jpg);}
.section3 .slider .swiper-slide .sl-img.p02 {background-image:url(../images/s03-02.jpg);}
.section3 .slider .swiper-slide .sl-img.p03 {background-image:url(../images/s03-03.jpg);}
.section3 .slider .swiper-slide .sl-img.p04 {background-image:url(../images/s03-04.jpg);}
.section3 .slider .swiper-slide .sl-img.p05 {background-image:url(../images/s03-05.jpg);}
.section3 .slider .swiper-slide .sl-img.p06 {background-image:url(../images/s03-06.jpg);}
.section3 .slider .swiper-slide .sl-img.p07 {background-image:url(../images/s03-07.jpg);}
.section3 .slider .swiper-slide .sl-img.p08 {background-image:url(../images/s03-08.jpg);}
.section3 .slider .swiper-slide .sl-img.p09 {background-image:url(../images/s03-09.jpg);}
.section3 .slider .swiper-slide .sl-img.p10 {background-image:url(../images/s03-10.jpg);}
.section3 .slider .swiper-slide .sl-tx {position:absolute;top:0;left:62px;text-align:left;letter-spacing:-1px;color:#fff;/*text-shadow:2px 2px 0 rgba(34,34,34,0.2);*/}
.section3 .slider .swiper-slide .sl-tx h4 {display:block;line-height:1.1;font-size:18px;font-weight:500;color:rgba(255, 255, 255, 0.8);letter-spacing:-1px;padding-top:210px;}
.section3 .slider .swiper-slide .sl-tx h4:before {display:block;content:'';position:absolute;top:0;left:28px;width:1px;height:205px;background:rgba(255, 255, 255, 0.4);}
.section3 .slider .swiper-slide .sl-tx h4 span{display:block;font-size:48px;font-weight:700;letter-spacing:8px;}
.section3 .slider .swiper-slide .sl-tx p {font-size:36px;font-weight:500;padding-top:30px;line-height:1.2;}
.section3 .swiper-pagination { position:absolute; bottom:30px; right:0; left:0;text-align:center;}
.section3 .swiper-pagination .swiper-pagination-bullet { display:inline-block; width:16px; height:16px;background-color:transparent;border:1px solid rgba(255,255,255,0.6);margin-left:5px; }
.section3 .swiper-pagination .swiper-pagination-bullet-active { background:#fff; }
.section3 .swiper-button-prev,
.section3 .swiper-button-next {display:none;}

.section4 {padding-top:150px;/*background:#f5f5f5;*/}
.section4 .tx h3 {color:#222;opacity:0;}
.section4 .tx h3 span {color:#0fbed1;}
.section4 .tx p {color:#222;opacity:0;}
.section4 .svideo {position:relative;overflow:hidden;height:497px}
.section4 .svideo:before {content:''; width: 100%; height: 100%; background-color: rgba(15, 190, 209, 0.4);  position:absolute; top:0; left:0; z-index: 1;}
.section4 .svideo video {display:block;min-width:100%;height:100%;}
.section4 .bt-view {display:block;position:absolute;left:0;right:0;top:222px;z-index:11;text-align:center;}
.section4 .bt-view a  {position:relative;background:rgba(0, 0, 0, 0.5);color:#fff;border-radius:50px;letter-spacing:-1px;font-weight:700;padding:20px 40px 20px 20px;font-size:24px;}
.section4 .bt-view a:after {content:'';position:absolute;top:25px;right:20px;width:11px;height:18px;background-image:url(/images/bt_type01.png);background-size:100%; }
.section4 .s4-l-img {display:block;}
.section4 .guide-txt {margin-top:560px;}
.section4 .guide-txt > ul li {-webkit-animation-delay: 1.5s;    animation-delay: 1.5s;}

.section5 { padding-top:180px;background:url(/images/section5_bg.jpg);background-size:cover;}
.section5 .tx h3 {color:#fff;opacity:0;}
.section5 .tx p {color:#222;opacity:0;}

.section5 .l-box h4,
.section5 .r-box h4 {display:block;text-align:left;padding-left:30px;font-size:22px;font-weight:500;color:#fff;line-height:47px;background:rgba(15 190 209 / 80%);}
.section5 .r-box h4 {background:rgb(13 89 96 / 80%);}

.section5 h4 span {display:block;position: absolute;right: 18px;top: 10px;padding-left:20px;font-size:16px;font-weight:300;color:#fff;line-height:30px;}
.section5 h4 span:before {content:'';position:absolute;left:0;top:6px;width:13px;height:16px;background:url(/images/ico-position-w.png);background-size:100%;}

.section5 .r-box .tel {position:absolute;display:block;top:300px;width:100%;text-align:center;opacity:0;}
.section5 .r-box .tel span {position:relative;padding-left:45px;color:#0fbed1;line-height:58px;font-size:48px;font-weight:700;font-family:'Roboto', sans-serif;}
.section5 .r-box .tel span:before {content:'';display:block;position:absolute;left:0;top:9px;width:40px;height:40px;background-image:url(/images/s05-tel.png);background-size:100%;}
.section5 .r-box .juso {display:block;position:absolute;top:310px;width:100%;text-align:center;color:#333;font-size:20px;opacity:0;}
.section5 .r-box .juso i {font-weight:500;position: relative;padding-right: 10px;margin-right:8px;}
.section5 .r-box .juso i:after {content:'';display:block;position:absolute;right: 0;top: 5px;width:1px;height: 18px;background:#9e9e9e;}

.section5 .m-map {width:100%;height:440px;overflow:hidden;}
.section5 .m-map iframe{border:0;width:100%;height:100%;} 
.section5 .r-box .m-map {border-left:1px solid #fff;}








/* ---------- media query ---------- */

@media all and (min-width:300px) and (max-width:1700px) {

	.section .inner {width:calc(100% - 20%);}
	.section2 .tx {left:50px;margin-left:0;}
	.section3 .tx {left:50px;margin-left:0;}
	.section3 .slider {right:50%;margin-right:-40%;} 

}





@media all and (min-width:300px) and (max-width:1560px) {

	.section5 .l-box {background-size:100% auto;}

}