@charset "utf-8";
@import url('https://fonts.cdnfonts.com/css/oxanium');
@import url('./css/font.css');
:root { --vh: 100%;}

html,
body { height: 100vh; height: var(--vh); height: -webkit-fill-available; height: fill-available; margin:0; padding:0; overflow:hidden;}
html { font-size: 10px;}

main{ font-family:'Pretendard', 'Noto Sans KR'; font-size: 1.8rem;}
.only_web{ }
.only_mobile{display:none;}
header{position:fixed; left:0; right:0; top:0; z-index:9999; padding:0;}
header nav ul{display:flex; justify-content:center;}
header nav ul li{margin:0 20px; list-style:none; font-size:20px;}

h1.logo_top,#navigation h1.logo_top{ display:block; float:left; font-size:16px; margin:20px; width:100px; height:30px;}
h1.logo_top > a, #navigation h1.logo_top > a{ background:url('./images/jlab_logo3.svg') center 0 no-repeat; background-size:100px; height:100%; display:block; text-indent:-10000px; opacity: 1;}
.fp-viewing-section3 h1.logo_top > a, .fp-viewing-section4 h1.logo_top > a , .fp-viewing-section2 h1.logo_top > a, .fp-viewing-section5 h1.logo_top > a
{ background:url('./images/jlab_logo3.svg') center -32px no-repeat; background-size:100px; height:100%; display:block; text-indent:-10000;}

.menu {width: 24px; height: 24px; margin-top:20px; padding: 4px; display: block; cursor: pointer; position: relative; float: right; right:20px; z-index: 1;}
.menu span {cursor: pointer; height: 2px; width:24px; margin-bottom:6px; background: #FFF; position: relative; right: 0; display: block; transform: rotate(0deg); transition: .7s ease;}
.menu span:nth-child(2) {right:4px;}
.menu span:nth-child(3) {right:8px;}

.menu:hover span{background:red;}
.menu:hover span:nth-child(2) {right:0;}
.menu:hover span:nth-child(3) {right:0;}



.hidden { opacity: 0;transition-delay: .9s; pointer-events: none; cursor: default;}
.visible {opacity: 1;}
.menu.open span:nth-child(1) {top: 8px; transform: rotate(135deg); transition: .7s ease; background: #fff;}
.menu.open span:nth-child(2) {opacity: 0; right: 100px; background: #fff;}
.menu.open span:nth-child(3) {top: -8px; right:0; transform: rotate(-135deg); transition: .7s ease;  background: #fff;}
.fp-viewing-section2 .menu span, .fp-viewing-section3 .menu span, .fp-viewing-section4 .menu span, .fp-viewing-section5 .menu span {background: #000;}
.fp-viewing-section2 .menu:hover span, .fp-viewing-section3 .menu:hover span, .fp-viewing-section4 .menu:hover span, .fp-viewing-section5 .menu:hover span{background:red;}
.fp-viewing-section2 .menu.open span,.fp-viewing-section3 .menu.open span, .fp-viewing-section4 .menu.open span, .fp-viewing-section5 .menu.open span{background:#fff;}

.section {position:relative; width:100vw;height: 100dvh !important;text-align:center; padding:0; margin:0; display: flex;
  flex-direction: column;
  justify-content: flex-start;}
/*.s02 { background:url('./images/bg02.png') center 0 no-repeat; background-size: 100% 100%; width:100%; height:100%; transition: background-size 6s ease-in;
    -moz-transition: background-size 2s ease-in;
    -web-kit-transition: background-size 2s ease-in;}
*/

.s01 .swiper-wrapper{ width:100%; height:100%;}
.s01 .swiper-container {width: 100%; height: 100vh; /*background-linear-gradient(to left, rgb (113, 113, 255), rgb(138,255,146));*/mix-blend-mode:overlay; }
.s01 .swiper-button-next, .swiper-button-prev { display:none;}
.s01 .swiper-slide {overflow: hidden;}
.s01 .bgBlack{background-color:rgba(0,0,0,0.85); position:absolute; width: 100%; height: 100vh; z-index:10;}
.bgBlack70{background-color:rgba(0,0,0,0.70); position:absolute; width: 100%; height: 100vh; z-index:10;}

.copyBox01 {position: absolute; top:35%; text-align: center; color: #fff; margin: 0; letter-spacing:-0.025em; z-index:100;}
.copyBox01 ul li{font-family:'GmarketSans','Pretendard', 'Noto Sans KR';font-weight:700; line-height:160%;font-size:9.2rem; opacity: 0; position:absolute; width:100%; left:0;}

.s01.active .swiper-slide-active .copyBox01 {opacity: 1; width:100%; font-family:'GmarketSans','Pretendard', 'Noto Sans KR';}

.s01.active .swiper-slide-active .copyBox01 ul{display:inline-block;}
.s01.active .swiper-slide-active .copyBox01 li:nth-child(1){animation:txtslide 4s linear alternate;}
.s01.active .swiper-slide-active .copyBox01 li:nth-child(2){animation:txtslide 4s linear alternate; animation-delay:5s;}
.s01.active .swiper-slide-active .copyBox01 li:nth-child(3){animation:txtslide 4s linear alternate; animation-delay:9s;}
.s01.active .swiper-slide-active .copyBox01 li:nth-child(4){animation:txtslide02 8s linear alternate both; animation-delay:13s;}

.bgBlack {
    background-color: rgba(0,0,0,0.85);
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}
.bgBlack01{background-color:rgba(0,0,0,0.85); position:absolute; width: 100%; height: 100%; z-index:10;}
.bgBlack70{background-color:rgba(0,0,0,0.70); position:absolute; width: 100%; height: 100%; z-index:10;}

.mouse-down {display:block; position: absolute; z-index:10; bottom:5vh; left: 50%; transform: translate(-50%,0); width: 47px; height: 57px; }
.mouse-down button {display: block; width: 100%; height: 100%;  font-size: 0; }
.mouse-down .mouse { position: relative; cursor: ns-resize; width: 100%; height: 100%; }
.mouse-down .mouse-shape {position: relative; display: block; width: 16.8px;  height: 25.2px; margin: 0 auto 14px;  border: 2px solid rgba(255, 255, 255, 1); border-radius: 22px;}
.mouse-animation { position: absolute; display: block; top: 25%; left: 50%; width: 4px; height: 4px; background: rgba(255,255,255,0.5);  border-radius: 50%; transform: translate(-50%, -25%); animation: ball-scroll 1s linear infinite; }
.mouse-text { display: block; font-size: 1.2rem; width: 47px; height: 17px; color:#fff;}



.bold-text {font-weight: bold; letter-spacing: calc(0.05em / 2); position:relative; text-align:left; font-size:4.6rem; font-family:'GmarketSans', sans-serif; left:-100px; opacity:0; transition: all 0.4s ease; }
.fp-viewing-section2 .bold-text, .fp-viewing-section3 .bold-text, .fp-viewing-section4 .bold-text, .fp-viewing-section5 .bold-text{left:0; opacity: 1; transition: all 0.7s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s;}

.tit-text{font-weight: bold; letter-spacing: calc(0.05em / 2); font-size:3.2rem !important;}
.sec_wrap_half > h3{float:left; display:block;  margin-top:10rem; margin-right:10%; margin-bottom:3%; font-weight:700;}

h3{font-weight:700; color:#000; margin-bottom:9rem; font-size:7.6rem;}
h3 span{color:#fa0202 !important; font-size:2.4rem; display:block; font-weight:500;}

.s04 h3{text-align:left;}
.s04 h3 span{padding-left:.5rem;}

.s04 .sec_wrap{max-width:100%; margin:0 auto;}
.s04 .sec_wrap h3{max-width:1500px; margin:0 auto 9rem auto;}
.s04 .sec_wrap .map_tbl{max-width:1500px; margin:2rem auto;}

.sec_wrap{max-width:1500px; margin:0 auto;}
.s02, .s03{position:relative;}
.s02 .sec_wrap{margin-top:-20rem;}
.s02 .bottom_bg{width:100%; height:40rem; position:absolute; bottom:-10rem; border-radius:0 30rem 0 0; background:#000 url('./images/bg02.png') center 0 no-repeat; background-size: 100% 100%;}

.s02 .sec_wrap > .text-area{width:100rem; font-family:'Pretendard'; font-size:4.2rem; color:#000; font-weight:700; line-height:160%; margin:0 auto; }
.s02 .flow-container{position:absolute; bottom:0 !important;}
.s02 .flow-wrap{animation-duration:40s}
.flow-container{}
.flow-text {display: flex;flex: 0 0 auto;white-space: nowrap;overflow: hidden;transition: 0.3s;font-size: 27rem;font-weight:700; line-height:80%; color:rgba(170, 170, 170, 0.12);}
.flow-wrap {animation: textLoop 15s linear infinite;padding-right: 1.4881vw;}

@keyframes textLoop {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
}


/*애니메이트*/
.s02 .sec_wrap{opacity:1;transform:translateY(40px);transition:all 1s; }
.fp-viewing-section2 .s02 .sec_wrap{margin-top:-30rem; opacity:1;transform:translateY(30px);transition:all 1s 0.5s;}

.s02 .bottom_bg{opacity:0;transform:translateY(40px);transition:all 1s; }
.fp-viewing-section2 .s02 .bottom_bg{bottom:0; opacity:1;transform:translateY(0);transition:all 1s 0.5s;}

.s03 h3{opacity:0;transform:translateY(40px);transition:all 1s;}
.fp-viewing-section3 .s03 h3{bottom:0; opacity:1;transform:translateY(0);transition:all 1s 0.5s;}

.s03 .box-area > div{opacity:0;transform:translateY(40px);}


.fp-viewing-section3 .s03 .box-area > div:nth-child(1){bottom:0; opacity:1;transform:translateY(0); transition:ease .5s 0.7s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(2){bottom:0; opacity:1;transform:translateY(0); transition:ease .5s 1.0s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(3){bottom:0; opacity:1;transform:translateY(0); transition:ease .5s 1.3s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(4){bottom:0; opacity:1;transform:translateY(0); transition:ease .5s 1.6s;}

.s03 .bgobj01 .obj01{ opacity:0; transform:translateY(20px);transition:all 1s;}
.fp-viewing-section3 .s03 .bgobj01 .obj01{ opacity:1;transform:translateY(0);transition:all 1s 1.6s;}
.fp-viewing-section4 .s03 .bgobj01 .obj01{opacity:1; transform:translateY(0);transition:all 1s 1.6s;}

.s04 h3{opacity:0;transform:translateY(40px);transition:all 1s;}
.fp-viewing-section4 .s04 h3{bottom:0; opacity:1;transform:translateY(0);transition:all 1s 0.5s;}
.s04 .map_wrap{opacity:0; transform:translateY(40px);transition:all 1s;}
.fp-viewing-section4 .s04 .map_wrap{opacity:1;transform:translateY(0);transition:all 1s 0.7s;}
.s04 .map_tbl{opacity:0; transform:translateY(40px);transition:all 1s;}
.fp-viewing-section4 .s04 .map_tbl{opacity:1;transform:translateY(0);transition:all 1s 1s;}
.fp-viewing-section5 .s04 h3 ,.fp-viewing-section5 .s04 .map_wrap, .fp-viewing-section5 .s04 .map_tbl{opacity:1;} 

/*에니메이트 끝*/
.s03 .box-area{display:flex; gap:2rem;}
.s03 .box-area > div{display:block; position:relative; flex:1; border-radius:6rem; height:50rem; color:#fff; z-index:2;}

.s03 .box-area > div:nth-child(1){background:rgba(0, 0, 0,.8) url('./images/bg03_01.png') center 0 no-repeat; background-size: cover; width:100%;}
.s03 .box-area > div:nth-child(2){background:rgba(0, 0, 0,.8) url('./images/bg03_02.png') center 0 no-repeat; background-size: cover; width:100%;}
.s03 .box-area > div:nth-child(3){background:rgba(0, 0, 0,.8) url('./images/bg03_03.png') center 0 no-repeat; background-size: cover; width:100%;}
.s03 .box-area > div:nth-child(4){background:rgba(0, 0, 0,.8) url('./images/bg03_04.png') center 0 no-repeat; background-size: cover; width:100%;}

.s03 .box-area > div:hover{ animation: growBackground 0.3s forwards; cursor:pointer;}
.s03 .box-area > div:not(:hover) { animation: shrinkBackground 0.3s forwards;}

.s03 .box-area > div::after{content: ""; background: rgb(0, 0, 0, 0);display:inline-block; width:100%; height:100%;  border-radius:6rem; -webkit-transition: background .5s ease-out;-moz-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out;}
.s03 .box-area > div:hover::after{content: ""; background: rgb(0, 0, 0, .6);}

.s03 .box-area div ul{color:#fff; margin:0 5rem; text-align:left;position:absolute; bottom:5rem;}
.s03 .b_name{font-size:2.6rem; font-weight:600;}
.s03 .b_con{font-size:5.4rem; height:14.1rem;font-weight:800; margin-top:2rem;}
.s03 .b_btn{margin-top:4rem; }
.s03 .b_btn a{border:2px solid #fff; border-radius:5rem; font-size:2rem; padding:1rem 2rem; display:block; width:14rem; position:relative; opacity:.8;}
/*.s03 .b_btn a::after{content: url('./images/img-arrow.png'); display: block; position: absolute; top: 50%; right: 2rem;transition:all .3s ease 0s;
	transform: translateX(6rem) ;  transform: translateY(-50%); width: 1.8rem; height: 1.8rem;}
*/
.s03 .b_btn a::after{ content: ""; background: url(./images/img-arrow.png) no-repeat center; background-size: contain; display: block; position: absolute; top: 50%; right: 2rem;transition:all .3s ease 0s;
	transform: translateX(6rem) ;  transform: translateY(-50%); width: 1.8rem; height: 1.8rem;}


.s03 .box-area > div:hover .b_btn a{opacity:1;}
.s03 .box-area > div:hover .b_btn a::after{ right: 1rem; }
.s03 .bgobj01 .obj01{ position:absolute; right:0; bottom:-30%; width:633px; height:584px; z-index:1;}
.s03 .bgobj01 .obj01::after{ content:''; display:block; width:100%;  height:100%; background:url('./images/bg04_1.png') no-repeat; background-size:100%; animation:bgMotion1 5s linear infinite alternate;}


.fp-viewing-section2 .s02{background-size: 110% 110%;}
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(1){margin-left:0; transition: all 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(2){margin-left:0; transition: all 0.6s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(3){margin-left:0; transition: all 0.9s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(4){margin-left:0; transition: all 1.2s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(5){margin-left:0; transition: all 1.5s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.s02 .sec_wrap > dl > dd p{margin-left:30px; opacity: 0; transition: all 0.3s ease 0.6s;}

.fp-viewing-section4 .thumbnail_box{position:relative;  margin-top:80px;}

.thumbnail_box .swiper-slide .thumbnail_img{position:relative; overflow:hidden; width:280px; height:310px; border-radius:10%;}
.thumbnail_box .swiper-slide .thumbnail_img img{object-fit: cover;}
.thumbnail_box .swiper-slide .thumbnail_img i{position: absolute; text-align: center; z-index:11; transform:translate( -50%, -50%); top:50%; left:50%; background:url('./images/costomer_logo_2_2_1.svg'); background-size:690px 62px; width:230px; height:62px;}
.thumbnail_box .swiper-slide .thumbnail_txt{margin-top:20px; font-size:2.0rem; font-family:'Pretendard'; font-weight:700; letter-spacing:-0.5px; text-align:left; line-height:140%; padding:0 10px;}
.thumbnail_box .swiper-slide .thumbnail_txt span{ font-family:'Pretendard'; font-size:1.6rem; font-weight:400; color:#636363; display:block; padding:0; margin:0;}
.customer_logo01{background-position:0 0;}
.customer_logo02{background-position:-204px 0 !important;}
.customer_logo03{background-position:-408px 0 !important;}
.customer_logo04{background-position:-612px 0 !important;}
.customer_logo05{background-position:-816px 0 !important;}
.customer_logo06{background-position:-1020px 0 !important;}
.customer_logo07{background-position:-1224px 0 !important;}
.customer_logo08{background-position:-1428px 0 !important;}
.customer_logo09{background-position:-1632px 0 !important;}
.customer_logo10{background-position:-1836px 0 !important;}
.customer_logo11{background-position:-2040px 0 !important;}
.customer_logo12{background-position:-2244px 0 !important;}
.customer_logo13{background-position:-2448px 0 !important;}
.customer_logo14{background-position:-2652px 0 !important;}


.thumbnail_box .swiper-slide .thumbnail_img i.customer_logo03{position: absolute; text-align: center; z-index:12; transform:translate( -50%, -50%); top:50%; left:50%; background:url('./images/logo03.png'); background-size:230px 62px; width:230px; height:62px;}

.top-section { max-width:1500px;display: flex; flex-direction:column; align-items: left; justify-content: left; margin:20px auto 60px auto;}
.middle-section{max-width:1500px; display: flex; flex-direction: row; margin: 2em 0; margin:0 auto;}
.middle-section div{ margin:0 auto;}
.copyBox02{position:relative; display:block; }
.copyBox02 > h4{position:relative; color:#fff; text-align:left; font-size:2.0rem; letter-spacing:1px; margin-top:15px; margin-left:30px;  font-family: 'Noto Sans KR', sans-serif;}
.copyBox02 > div p { font-family: 'Noto Sans KR', sans-serif; color:#fff; font-size:2.0rem; line-height: calc(32 / 20); margin:20px 0; font-weight:400;}

/*.copyBox01 ul li:first-child{font-size:60px;}
.copyBox01 ul li:last-child{font-size:80px;}
*/
.background-video {position: fixed; /* Fixed or absolute depending on requirement */ left: 0; bottom: 0; min-width: 100vw;  min-height: 100vh; z-index: -2; /* Ensure video is behind content */
}
video {/*margin-left: calc((100vw - (100vh * 1.7))/2); margin-right: calc((100vw - (100vh * 1.7))/2);*/ min-height: 100vh; min-width: 100vw;}

@media (min-aspect-ratio: 16/9) { video { margin-left: 0; }
}


#navigation { background-color:red; width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; text-align:center; }
.nav { display: flex; justify-content: center;}
.nav ul{position:absolute;top:45%; left:50%; transform:translate( -50%, -45%);}
.nav ul li{position:relative;}
.nav ul li a{display:block; font-family:'GmarketSans', sans-serif; color: #fff; font-weight:bold; font-size:3.0rem; line-height:200%; overflow:hidden;}

.nav ul li a::after{content: "";height: 10px; width:10px; border-radius:50%; position: absolute; left:50%; bottom:-10px; background-color:#fff;  opacity: 0;}


.nav ul li a:hover::after {background: #fff; -webkit-transition: all 0.4s; transition: all 0.4s;   opacity: 1; bottom:0;}
.nav ul li a:hover{ -webkit-transition: all 0.4s; transition: all 0.4s; margin-bottom:50px;}

#fp-nav ul li a span, .fp-slidesNav ul li a span {background-color:rgba(244, 244, 244, 0.5); }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {background-color:rgba(244, 244, 244, 0.9);}


 

/*
.fp-viewing-section3 #fp-nav ul li:hover a span::before,
.fp-viewing-section3 #fp-nav ul li a.active:hover span::before,
.fp-viewing-section3 #fp-nav ul li a.active span::before {width: 21px; height: 21px; opacity: 1; }
.fp-viewing-section3 #fp-nav ul::before {background: rgba(153, 153, 153, 0.2);}
.fp-viewing-section3 #fp-nav ul li a span, .fp-viewing-section3 .fp-slidesNav ul li a span{background-color:#666;}
.fp-viewing-section3 #fp-nav ul li a.active span, .fp-viewing-section3 .fp-slidesNav ul li a.active span, 
.fp-viewing-section3 #fp-nav ul li:hover a.active span, .fp-viewing-section3 .fp-slidesNav ul li:hover a.active span {background-color:red;}
.fp-viewing-section3 #fp-nav ul li a span::before { background: rgba(236, 28, 36, 0.1); opacity: 0;}

.fp-viewing-section3 #fp-nav ul li .fp-tooltip {font-family:'Noto Sans KR', sans-serif; color:#fff; background-color:rgba(236, 28, 36, 0.6); font-weight:400;}
*/
.fp-viewing-section2 #fp-nav ul li:hover a span::before,
.fp-viewing-section3 #fp-nav ul li:hover a span::before,
.fp-viewing-section5 #fp-nav ul li:hover a span::before, 
.fp-viewing-section4 #fp-nav ul li:hover a span::before,
.fp-viewing-section2 #fp-nav ul li a.active:hover span::before,
.fp-viewing-section3 #fp-nav ul li a.active:hover span::before,
.fp-viewing-section5 #fp-nav ul li a.active:hover span::before, 
.fp-viewing-section4 #fp-nav ul li a.active:hover span::before,
.fp-viewing-section2 #fp-nav ul li a.active span::before,
.fp-viewing-section3 #fp-nav ul li a.active span::before,
.fp-viewing-section5 #fp-nav ul li a.active span::before, 
.fp-viewing-section4 #fp-nav ul li a.active span::before {width: 21px; height: 21px; opacity: 1; }

.fp-viewing-section2 #fp-nav ul::before,
.fp-viewing-section3 #fp-nav ul::before,
.fp-viewing-section5 #fp-nav ul::before, 
.fp-viewing-section4 #fp-nav ul::before {background: rgba(153, 153, 153, 0.2);}
.fp-viewing-section2 #fp-nav ul li a span,
.fp-viewing-section3 #fp-nav ul li a span,
.fp-viewing-section5 #fp-nav ul li a span,
.fp-viewing-section4 #fp-nav ul li a span{background-color:#666;}
.fp-viewing-section2 #fp-nav ul li a.active span,
.fp-viewing-section3 #fp-nav ul li a.active span,
.fp-viewing-section5 #fp-nav ul li a.active span,
.fp-viewing-section4 #fp-nav ul li a.active span,
.fp-viewing-section2 .fp-slidesNav ul li a.active span,
.fp-viewing-section3 .fp-slidesNav ul li a.active span,
.fp-viewing-section5 .fp-slidesNav ul li a.active span, 
.fp-viewing-section4 .fp-slidesNav ul li a.active span,
.fp-viewing-section2 #fp-nav ul li:hover a.active span,
.fp-viewing-section3 #fp-nav ul li:hover a.active span,
.fp-viewing-section5 #fp-nav ul li:hover a.active span,
.fp-viewing-section4 #fp-nav ul li:hover a.active span, 
.fp-viewing-section4 .fp-slidesNav ul li:hover a.active span,
.fp-viewing-section5 .fp-slidesNav ul li:hover a.active span,
.fp-viewing-section3 .fp-slidesNav ul li:hover a.active span,
.fp-viewing-section2 .fp-slidesNav ul li:hover a.active span{background-color:red;}
.fp-viewing-section2 #fp-nav ul li a span::before,
.fp-viewing-section3 #fp-nav ul li a span::before,
.fp-viewing-section5 #fp-nav ul li a span::before, 
.fp-viewing-section4 #fp-nav ul li a span::before { background: rgba(236, 28, 36, 0.1); opacity: 0;}
.fp-viewing-section2 #fp-nav ul li .fp-tooltip,
.fp-viewing-section3 #fp-nav ul li .fp-tooltip,
.fp-viewing-section5 #fp-nav ul li .fp-tooltip, 
.fp-viewing-section4 #fp-nav ul li .fp-tooltip {/*font-family:'Noto Sans KR', sans-serif;*/ color:#000; /*background-color:rgba(236, 28, 36, 0.6);*/ font-weight:400;}


#tab1.tab_content, #tab2.tab_content, #tab3.tab_content,#tab4.tab_content, #tab5.tab_content{height:99%;}
#tab1.tab_content > div, #tab2.tab_content > div{padding:2rem 0 2rem 0;}
#tab1.tab_content > div ul, #tab2.tab_content > div ul{display:inline-block;}
#tab1.tab_content > div li, #tab2.tab_content > div li{font-size:1.8rem; line-height:240%; font-family:'Pretendard'; text-align:left; font-weight:400; /* border-radius:30px; background:rgba(255, 255, 255, 1); padding:5px 20px;*/ color:#fff; margin:10px; }
.bgwhite{background-color:#fff !important;}

.slick-initialized > .swipe-tab-content {position: relative; min-height: 365px;}

/*
@media screen and (min-width: 1200px) {
.s02 .sec_wrap{width:100%; }
.s02 .sec_wrap > dl{margin:20rem 10rem 0 10rem; width:auto; border:1px solid red;}

.s03_top .sec_wrap_half{width:100% !important; height:100%; margin:0 auto; overflow:hidden;}
.s03_top .sec_wrap_half .bold-text{ margin-left:10rem;}
.s03_top .tabs li {font-size: 1.8rem;}
.s03_bottom .tab01_con ul{width:90%; margin-top:5rem;}
#tab1.tab_content > div li{width:calc((90%)/2); margin:1rem 1rem;}

.s05 .bold-text{margin-left:10rem;}
.s05 .map_tbl{margin:0 10rem;}


}
*/
@media screen and (min-width: 767px) {

.slick-initialized > .swipe-tab-content {min-height: 500px; border:1px solid #000; }

.tabs ul {min-width: auto;width:100%;}
/*.bold-text{margin-left:5rem !important;}*/



#tab1.tab_content > div li{width:calc((90%)/2); margin:1rem 1rem;}

.s03 .bold-text, .s04 .bold-text, .s05 .bold-text{margin-left:10rem;}

.icon_txtbox_inner p{font-size:1.6rem;}


}

@media screen and (max-width: 766px) {

#fp-nav{display:none;}
.copyBox01 ul li{font-weight:700; line-height:120%;font-size:4.8rem; }

.s02 .sec_wrap > dl{margin:20rem 5rem 10rem 5rem;width:auto;}
.bold-text {font-size:3.6rem; }
.tit-text{ font-size:2.6rem !important; margin-top:2rem !important; font-weight:600 !important;}
.sec_wrap{width:100%;}
.s02 .sec_wrap > dl > dd p{font-size:1.8rem; line-height:1.4; letter-spacing:-0.2px; font-weight:300 ;display:block; text-align:left;}
.s03 .bold-text{margin-left:5rem; margin-top:15rem;}
.s03 .bold-text, .s04 .bold-text, .s05 .bold-text{margin-left:5rem;}
.s03_top .tabs li {font-size: 1.8rem;}
.s03_bottom .tab01_con ul{width:90%; margin: 5rem auto;}
#tab1.tab_content > div li{width:calc((90%)/2); margin:1rem 1rem;}
#tab1.tab_content > div li, #tab2.tab_content > div li{font-size:1.6rem;}
#tab3[aria-hidden="false"]  .tab03_con > div > .img_box p, #tab4[aria-hidden="false"]  .tab04_con > div > .img_box p, #tab5[aria-hidden="false"]  .tab05_con > div > .img_box p{ padding:0 4rem !important; font-size:1.8rem;  }
}


.slick-initialized .swipe-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: none;
  border: 0;
  color: #757575;
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  transition: all 0.5s;
}
.slick-initialized .swipe-tab:hover {
  color: #000;
}
.slick-initialized .swipe-tab.active-tab {
  border-bottom-color: #000;
  color: #000;
  font-weight: bold;
} 

.main-container {
  padding: 25px;
  background: #f1f1f1;
}








/*svg style*/
.st01{fill:none;stroke:#fff; stroke-width:3; stroke-linecap:round;stroke-miterlimit:10;  }
.st02{fill:none;stroke:#fff; stroke-width:2; stroke-linecap:round;stroke-miterlimit:10;  }
/*animate*/
#st01{stroke-dashoffset: 1500; stroke-dasharray: 1500; animation-name: kunanicon01; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;}
/*#st04{stroke-dashoffset: 700; stroke-dasharray: 700; animation : kunanicon02 4s linear forwards;animation-name: kunanicon02; animation-duration: 2.0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;}*/


/*
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(1){margin-left:0; transition: all 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(2){margin-left:0; transition: all 0.6s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(3){margin-left:0; transition: all 0.9s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(4){margin-left:0; transition: all 1.2s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.fp-viewing-section2 .s02 .sec_wrap > dl > dd p:nth-child(5){ margin-left:0; transition: all 1.5s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s; opacity: 1; }
.s02 .sec_wrap > dl > dd p{margin-left:30px; opacity: 0; transition: all 0.3s ease 0.6s;}
*/

.slider1 h3 {background: #0084cc; list-style: none; color: white; font-family: Tahoma; font-size: 36px; line-height: 100px; margin: 10px; padding: 3%; position: relative; text-align: center; display: inline-block !important; width: 75px !important;}
.slider1, .slider2, .slider3 { width: 500px; left: 50%; transform: translateX(-50%);}

.slick-current h3 { background: orange; }
.s04 .bold-text{margin-bottom:5rem;}
.s04 .bgobj01 {}
.s04 .bgobj01 .obj01{ position:absolute; right:0; top:-20%; width:633px; height:584px; }
.s04 .bgobj01 .obj01::after{ content:''; display:block; width:100%;  height:100%; background:url('./images/bg04_1.png') no-repeat; background-size:100%; animation:bgMotion1 5s linear infinite alternate;}
.s04 .sec_wrap dl dd{height:10rem; }
.s04 .sec_wrap dl dd ul{display:flex; flex-wrap:nowrap; float:left;}
.s04 .sec_wrap dl dd.banner01{white-space: nowrap; will-change: transform;  margin-top:10rem; display:inline-flex;}
.s04 .sec_wrap dl dd.banner01 ul{animation: marquee 60s linear infinite; float:left;}
.s04 .sec_wrap dl dd.banner02{/*white-space: nowrap; will-change: transform;*/  display:inline-flex; margin-top:5rem;}
.s04 .sec_wrap dl dd.banner02 ul{animation: marquee02 60s linear infinite; float:left; }

.s04 .sec_wrap dl dd ul li{  float:left; margin:2rem; width:20rem; height:6rem;position:relative; overflow:hidden;}
.s04 .sec_wrap dl dd ul li i{position: absolute; text-align: center; z-index:11; transform:translate( -50%, -50%); top:50%; left:50%; background:url('./images/costomer_logo_2_2_1.svg'); background-size:7000px 60px; width:200px; height:60px;}

.map_wrap{border:1px solid #cfcfcf; margin-top:30px; border-radius:0 20rem 0 0; overflow:hidden;}
.map_wrap > iframe {height:500px;}
.s05 .map_tbl{margin:4rem 0;}
.map_tbl table{width:100%; }
.map_tbl table tr th, .map_tbl table tr td {font-family:'Noto Sans KR', sans-serif; font-size:16px;line-height:180%; padding:10px 5px;}
.map_tbl table tr th{ border-bottom:1px solid #000; width:30%; font-weight:bold;}
.map_tbl table tr td{border-bottom:1px solid #cfcfcf;}

footer h2{padding:4rem 2rem; font-family:'Noto Sans KR', sans-serif; line-height:180%; font-size:1.6rem; font-weight:400;}
@media screen and (max-device-width:1500px), screen and (max-width:1500px){
.sec_wrap{width:95%;}
.s03 .box-area > div{height:45rem; color:#fff; z-index:2;}
.s03 .box-area div ul{bottom:4rem;}
.s03 .b_con{font-size:4.0rem;}
.s04 .sec_wrap{width:100% !important;margin:0 auto;}

}

@media screen and (max-device-width:1200px), screen and (max-width:1200px){


h3{margin-bottom:6rem; font-size:5.2rem;}
h3 span{font-size:2.0rem; }

.s04 .sec_wrap h3{margin-left:2rem; margin-bottom:6rem;}

.s02 .sec_wrap{width:90%;}
.s02 .sec_wrap > .text-area {width:100%; font-size:3.0rem; line-height:150%;}
.s02 .bottom_bg{width:100%;height: 30rem; border-radius: 0 15rem 0 0;}

.s03 .box-area{width:90%; margin:0 auto;}
.s03 .box-area > div{border-radius:6rem; height:40rem; color:#fff; z-index:2;}

.s03 .box-area div ul{color:#fff; margin:0 2rem; padding-top:2rem; bottom:2rem;}
.s03 .b_name{font-size:2.0rem;}
.s03 .b_con{font-size:4.2rem; height:12rem; margin-top:2rem;}

.s03 .b_btn{margin-top:2rem; }





}

@media screen and (max-width:860px){


h3{margin-bottom:2rem; font-size:3.6rem;}
h3 span{font-size:1.6rem; }
.s04 .sec_wrap h3{margin-left:2rem;}

.s02 .sec_wrap{width:90%;  opacity:1;transform:translateY(40px);}
.s02 .sec_wrap > .text-area {width:100%; font-size:2.2rem; line-height:150%;}
.s02 .bottom_bg{width:100%;height:20rem; border-radius: 0 15rem 0 0;}

.s03 .box-area{position:relative; display:inline-block; margin:0 auto; width:100%;}
.s03 .box-area > div{display:inline-block; border-radius:4rem; height:15rem; margin:.5rem 0; position:relative;}
.s03 .box-area > div:nth-child(1){background-color:rgba(0, 0, 0, 1);}
.s03 .box-area > div:nth-child(2){background-color:rgba(0, 0, 0, 1);}
.s03 .box-area > div:nth-child(3){background-color:rgba(0, 0, 0, 1);}



.s03 .box-area > div::after{display:none;}
.s03 .box-area div ul{ margin:0; padding-top:2rem; text-align:center;position:relative !important; bottom:0; width:100%;overflow:hidden;}

.s03 .b_name{font-size:1.4rem; font-weight:600;}
.s03 .b_con{font-size:2.4rem; font-weight:800; margin-top:1rem; height:auto;}
.s03 .b_btn{margin:1rem auto 1rem auto; }
.s03 .b_btn a{border-radius:5rem; font-size:1.4rem; padding:1rem 2rem; width:10rem; margin:0 auto;}
.s03 .b_btn a::after{right: 1rem;}

.map_wrap{border-radius:0 0 0 0; overflow:hidden;}
.map_wrap > iframe {height:400px;}
.map_tbl{margin:2rem 2rem !important;}


.map_wrap > iframe {height:250px;}
/*svg style*/
.st01{fill:none;stroke:#fff; stroke-width:2; stroke-linecap:round;stroke-miterlimit:10;  }
.st02{fill:none;stroke:#fff; stroke-width:2; stroke-linecap:round;stroke-miterlimit:10;  }
footer h2{font-size:1.4rem;}


/*애니메이트*/
.s02 .sec_wrap{opacity:0;transform:translateY(0);transition:all 1s; }
.fp-viewing-section2 .s02 .sec_wrap{ margin-top:-20rem; opacity:1;transform:translateY(40px);transition:all 1s 0.5s;}

.s03 h3{opacity:0;transform:translateY(0);transition:all 1s;}
.fp-viewing-section3 .s03 h3{bottom:0; opacity:1;transform:translateY(40px);transition:all 1s 0.5s;}

.s03 .box-area > div{opacity:0;transform:translateY(0);}


.fp-viewing-section3 .s03 .box-area > div:nth-child(1){bottom:0; opacity:1;transform:translateY(40px); transition:ease .5s 0.7s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(2){bottom:0; opacity:1;transform:translateY(40px); transition:ease .5s 1.0s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(3){bottom:0; opacity:1;transform:translateY(40px); transition:ease .5s 1.3s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(4){bottom:0; opacity:1;transform:translateY(40px); transition:ease .5s 1.6s;}

.s03 .bgobj01 .obj01{ opacity:0; transform:translateY(20px);transition:all 1s;}
.fp-viewing-section3 .s03 .bgobj01 .obj01{ opacity:1;transform:translateY(0);transition:all 1s 1.6s;}
.fp-viewing-section4 .s03 .bgobj01 .obj01{opacity:1; transform:translateY(0);transition:all 1s 1.6s;}

.s04 h3{opacity:0;transform:translateY(0);transition:all 1s;}
.fp-viewing-section4 .s04 h3{bottom:0; opacity:1;transform:translateY(40px);transition:all 1s 0.5s;}
.s04 .map_wrap{opacity:0; transform:translateY(0);transition:all 1s;}
.fp-viewing-section4 .s04 .map_wrap{opacity:1;transform:translateY(40px);transition:all 1s 0.7s;}
.s04 .map_tbl{opacity:0; transform:translateY(0);transition:all 1s;}
.fp-viewing-section4 .s04 .map_tbl{opacity:1;transform:translateY(40px);transition:all 1s 1s;}
.fp-viewing-section5 .s04 h3 ,.fp-viewing-section5 .s04 .map_wrap, .fp-viewing-section5 .s04 .map_tbl{opacity:1;} 

/*에니메이트 끝*/
}

@media screen and (max-width: 400px) {
.fp-viewing-section3 .s03 h3{bottom:0; opacity:1;transform:translateY(-10px);transition:all 1s 0.5s;}
.s03 .box-area{position:relative; display: flex; flex-wrap: wrap; width:100%;gap: 1.5rem;}
.s03 .box-area > div{display:block; width:calc(100% / 2); height: 18rem; border-radius: 2rem;}
.s03 .b_con {padding: 0 .5rem; font-size: 2.2rem;}
.s03 .b_btn { margin:2rem auto 1rem auto;}
.s03 .b_name img{ width:30px; height:auto;}
.s03 .b_btn a{opacity:1;}
.s03 .b_btn a::after{ width: 1.5rem; height: 1.5rem;}

.fp-viewing-section3 .s03 .box-area > div:nth-child(1){bottom:0; opacity:1;transform:translateY(-10px); transition:ease .5s 0.7s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(2){bottom:0; opacity:1;transform:translateY(-10px); transition:ease .5s 1.0s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(3){bottom:0; opacity:1;transform:translateY(-10px); transition:ease .5s 1.3s;}
.fp-viewing-section3 .s03 .box-area > div:nth-child(4){bottom:0; opacity:1;transform:translateY(-10px); transition:ease .5s 1.6s;}

}