@charset "utf-8";
#fullpage section{overflow-x:hidden;}
/* ft-nav */
#fp-nav.left{position: fixed; z-index:5; margin-top: 0 !important; transform:translateY(-50%); top:calc(50% + 50px); left:-80rem; margin-right:13rem; opacity:1; transition: all 0.5s; font-size:14rem; color:#fff; font-weight:700; text-align:center; transition:all 1s ease;}
.motion-on #fp-nav.left{left:40rem;}
body.active #fp-nav {left:60rem; opacity:1;}
body.active #fp-nav.hide {top:0; margin-top:0; transition: all 0.5s ease;}
#fp-nav ul {position:relative;}
#fp-nav ul li {position:relative; margin:0 auto 40rem;}
#fp-nav ul li:nth-last-child(2){margin:0;}
#fp-nav ul li:last-child{display:none; margin:0;}
#fp-nav ul li .fp-tooltip.left{left:28rem;}
#fp-nav ul li a span{width:7rem; height:7rem; margin:-3.5rem 0 0 -3.5rem; background:rgba(255,255,255,1);}
#fp-nav ul li a span:before{content:''; position:absolute; top:50%; left:50%; width:25rem; height:25rem; background:rgba(255,255,255,0.1); transform:translate(-50%, -50%); border-radius:50rem; z-index:-1; opacity:0;}
#fp-nav ul li a.active span, 
#fp-nav ul li:hover a span,
#fp-nav ul li:hover a.active span{width:9rem; height:9rem; background:rgba(255,255,255,1); margin:-4.5rem 0 0 -4.5rem;}
#fp-nav ul li a.active span:before, 
#fp-nav ul li:hover a span:before{opacity:1;}
#fp-nav ul li .fp-tooltip{opacity:0; width:auto; top:-5rem; text-transform:uppercase; font-weight:400; font-family:'Oswald', Sans-serif; font-size:13rem;}
#fp-nav ul li a.active .fp-tooltip{opacity:1;}
#fp-nav ul li a.active + div{opacity:1;}
.fp-viewing-0 #fp-nav{/*top:70%;*/ top:50%;}
.fp-viewing-2 #fp-nav ul li a span,
.fp-viewing-3 #fp-nav ul li a span,
.fp-viewing-4 #fp-nav ul li a span{background:#999;}
.fp-viewing-2 #fp-nav ul li a span:before,
.fp-viewing-3 #fp-nav ul li a span:before,
.fp-viewing-4 #fp-nav ul li a span:before{background:rgba(255,255,255,0.1);}
.fp-viewing-2 #fp-nav ul li .fp-tooltip,
.fp-viewing-3 #fp-nav ul li .fp-tooltip,
.fp-viewing-4 #fp-nav ul li .fp-tooltip{color:#1e56a3; font-weight:600;}
.fp-viewing-2 #fp-nav ul li a.active span, 
.fp-viewing-2 #fp-nav ul li:hover a span, 
.fp-viewing-2 #fp-nav ul li:hover a.active span,
.fp-viewing-3 #fp-nav ul li a.active span, 
.fp-viewing-3 #fp-nav ul li:hover a span, 
.fp-viewing-3 #fp-nav ul li:hover a.active span,
.fp-viewing-4 #fp-nav ul li a.active span, 
.fp-viewing-4 #fp-nav ul li:hover a span, 
.fp-viewing-4 #fp-nav ul li:hover a.active span{background:#064499;}
.fp-viewing-2 #fp-nav ul li a.active span:before, 
.fp-viewing-2 #fp-nav ul li:hover a span:before,
.fp-viewing-3 #fp-nav ul li a.active span:before, 
.fp-viewing-3 #fp-nav ul li:hover a span:before,
.fp-viewing-4 #fp-nav ul li a.active span:before, 
.fp-viewing-4 #fp-nav ul li:hover a span:before{background:rgba(6,68,153,0.15);}
.fp-viewing-5 #fp-nav ul li{display:none;}

@media all and (max-width:1300px){
	#fp-nav.left{left:20rem;}
	#fp-nav ul li .fp-tooltip.left{left:20rem;}
}


/* main-visual */
.main-visual{position:relative; z-index:2; width: 100%;height: calc(var(--vh, 1vh) * 100);position: relative;min-height: 100%; overflow:hidden;}
.main-visual .swiper-wrapper{height: 100%!important; justify-content: space-between;}
.main-visual__item{ position: relative; height: 100% !important; overflow:hidden;}
.main-visual__item{background-position: 50% 50%; background-size: cover;  }
.main-visual__video{position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
.main-visual__video:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; z-index:2;}
/*.main-visual__video video{position:relative; left:-35%; width:177%; height:150%; object-fit:cover; filter: brightness(0.6);}*/
.main-visual__video video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; filter: brightness(0.6); display:block;}
.main-visual__title{position: absolute; left:50%; margin-left:-770rem; top:40%; width:1540rem; text-align:center; z-index:3;}
.main-visual__title > *{transition: all 1s ease; opacity: 0;transform: translateY(30rem);}
.main-visual__title h2{font-size:70rem; font-weight:700; line-height: 1.35em;color: #fff; font-family:var(--font-kr); word-break:keep-all;}
.visual03 .main-visual__title h2{font-size:64rem;}
.main-visual__title > em{margin-top:15rem; display:inline-block; font-size:26rem; font-weight:500; color:#fff; line-height:1.2em; word-break:keep-all; font-family:var(--font-kr); }
.visual01 .main-visual__title > em{margin-top:10rem;}
.main-visual__title a{position:relative; display:flex; align-items:center; justify-content:center; margin:85rem 0 0; width:190rem; height:60rem; text-align:center; border:2rem solid #fff; box-sizing:border-box; border-radius:5rem; z-index:1;}
.main-visual__title a:before{content:''; position:absolute; top:0; left:0; width:0%; height:100%; background:var(--color-point);  z-index:-1; transition:all 0.3s ease;}
.main-visual__title a > span{font-size:16rem; font-weight:600; color:#fff; z-index:1;}
.main-visual__title a:hover{border-color:var(--color-point);}
.main-visual__title a:hover:before{width:100%;}

.btn_swiper{display:flex; justify-content: center; align-items: center; gap:12rem; margin-top:25rem;}
.btn_swiper > *{color:#fff; font-size:16rem; color:#fff;}
.main-visual .paging{position:static; margin-top:30rem; z-index:50;}
.main-visual .paging span{box-sizing:border-box; width:9rem; height:9rem; margin:0 8rem; border-radius:50rem; background:transparent; border:1px solid #fff; opacity:1; transition:all 1s; cursor:pointer;}
.main-visual .paging span.swiper-pagination-bullet-active{width:30rem; background:#fff;}

.main-visual .swiper-slide-active .main-visual__title h2{opacity:1; transform:translateY(0); transition-delay:0.5s;}
.main-visual .swiper-slide-active .main-visual__title em{opacity:1; transform:translateY(0); transition-delay:0.6s;}
.main-visual .swiper-slide-active .paging,
.main-visual .swiper-slide-active .btn_swiper{opacity:1; transform:translateY(0); transition-delay:0.7s;}
i.main-visual__bg{position:absolute;top:0;left:0;width:100%;height:100%;transition:all 5s ease;transform:scale(1.1);background-size: cover;background-repeat: no-repeat; background-position:50% 50%;}
.visual01 i.main-visual__bg{filter: brightness(0.6); transform:scale(1);}
.swiper-slide-active i.main-visual__bg{transform:scale(1);}


@media all and (max-width:1600px){
	.main-visual__title{left:5%; width:90%; margin-left:0;}
}
@media all and (max-width:1550px){
	.main-visual__title h2{font-size:65rem;}
	.visual03 .main-visual__title h2{font-size:58rem;}
}
@media all and (max-width:1200px){
	.main-visual__title h2{font-size:55rem;}
	.visual03 .main-visual__title h2{font-size:48rem;}
	.main-visual__title > em{font-size:24rem;}
}
@media all and (max-width:768px){
	.main-visual__title h2{font-size:45rem;}
	.visual03 .main-visual__title h2{font-size:40rem;}
	.main-visual__title > em{font-size:20rem;}
	.btn_swiper > *{font-size:15rem;}
}
@media all and (max-width:540px){
	.main-visual__title h2{font-size:30rem; line-height:1.2em;}
	.visual03 .main-visual__title h2{font-size:30rem;}
	.main-visual__title > em{font-size:15rem; margin-top:5rem;}
	.main-visual .paging span{margin:0 4rem; width:6rem; height:6rem;}
	.main-visual .paging span.swiper-pagination-bullet-active{width:25rem;}
	.sec1 .scroll_ani span{font-size:13rem;}
}
@media all and (max-width:480px){
	.main-visual__title h2{font-size:25rem;}
	.visual03 .main-visual__title h2{font-size:25rem;}
	.main-visual__title > em{font-size:12rem;}
	.sec1 .scroll_ani span{font-size:11rem;}
	.btn_swiper{margin-top:15rem; gap:7rem;}
	.btn_swiper > *{font-size:11rem;}
	.btn_swiper .btn-navi{gap:6rem; width:28rem; height:8rem;}
	.btn_swiper .btn-navi .swiper-button-next, .btn_swiper .btn-navi .swiper-button-prev{width:10rem; height:8rem;}
	.btn_swiper .btn-navi .swiper-button-next{top:0;}
	.main-visual .paging{margin-top:7rem;}
}

/* product */
.fp-viewing-1 #fp-nav.left{/*top:70%;*/ top:calc(50% + 50px);}
#section01{/*background:url(../img/main/bg-product.jpg)no-repeat center; background-size:cover;*/}
#section01 .main-tit{position:relative; display:flex; flex-direction: column; justify-content: flex-end; text-align:center; height:28vh; padding-bottom:50rem; box-sizing:border-box;}
#section01 .main-tit .big-txt{position:absolute;top:50rem;left: 20rem;font-size: 80rem;font-weight:bold;color:#222;word-break:keep-all;text-transform:uppercase;line-height:0.8em;font-family:var(--font-eng);/* transform:translateX(40rem); */opacity: 0.1;transition:all 0.8s 0.5s ease;}
.main-tit > h3{font-size:60rem; font-weight:800; color:#222; line-height:1em; word-break:keep-all; font-family:var(--font-eng);}
.main-tit > em{display:inline-block; margin-top:15rem; font-size:17rem; font-weight:400; color:#999; line-height:1.4em; word-break:keep-all;}
.sec-pd{position:relative; width:100%; /*height:66vh;*/ height:56vh; display: flex; align-items: center; padding:100rem 0 80rem; background:url(../img/main/bg-pd.jpg)no-repeat center; background-size:cover; box-sizing:border-box;}
.list-pd{display:grid; gap:50rem; grid-template-columns: repeat(4, 1fr);}
.list-pd > li{position:relative; width:100%; background:#fff; border-radius:0 15rem 15rem 15rem; text-align:center;}
.list-pd > li a{display:block; width:100%; height:100%; padding:22rem 22rem 26rem;  box-sizing:border-box; }
.list-pd > li a i{position:absolute; top:-30rem; left:0; display: flex; align-items: flex-end; width:150rem; height:30rem; background:#fff; border-radius:15rem 0 0 0; padding-left:22rem; text-align:left; font-size:16rem; font-weight:500; color:var(--color-point); font-family:var(--font-eng); }
.list-pd > li a i:before{content:''; position:absolute; top:0; right:-57rem; width:65rem; height:43rem; background:url(../img/main/pd-list-bg.svg)no-repeat center; background-size:contain;}
.list-pd > li .img{width:100%; height:auto; /*aspect-ratio: 1 / 0.9;*/ overflow:hidden; border-radius:15rem; box-sizing:border-box;}
.list-pd > li .img img{width:100%; height:100%; transform:scale(1);  object-fit: cover; transition:all 0.5s ease;}
.list-pd > li h3{display:block; margin-top:22rem; font-size:22rem; font-weight:bold; color:#222; line-height:1em; word-break:keep-all; text-align:center; transition:all 0.5s ease;}
.list-pd > li a:hover .img img{transform:scale(1.1);}
.list-pd > li a:hover h3{color:var(--color-point);}



@media all and (max-width:1500px){
	/*.sec-pd{height:50vh;}*/
	.list-pd{gap:40rem;}
	.list-pd > li a i{width:88rem;}
}
@media all and (max-width:1400px){
	
	#section01 .main-tit{padding-bottom:60rem; height:30vh;}
	#section01 .main-tit .big-txt{top:40rem;}
	.sec-pd{height:52vh;}
}
@media all and (max-width:1300px){
	
	
	.main-tit > h3{font-size:55rem;}
	.list-pd{gap:30rem;}
	.list-pd > li{border-radius:0 10rem 10rem 10rem;}
	.list-pd > li a{padding:15rem 15rem 18rem;}
	.list-pd > li a i{font-size:15rem; padding-left:15rem; top:-25rem; border-radius:10rem 0 0 0;}
	.list-pd > li .img{border-radius:8rem;}
	.list-pd > li h3{margin-top:14rem; font-size:21rem;}
}
@media all and (min-width:1101px){
	.main-tit > h3{transform:translateY(40rem); transition: all 1s 0.3s; opacity:0;}
	.main-tit > em{transform:translateY(40rem); transition: all 1s 0.5s; opacity:0;}
	.list-pd > li{transform:translateY(40rem); opacity:0;}
	.list-pd > li:nth-child(1){transition: all 1s 0.6s ease;}
	.list-pd > li:nth-child(2){transition: all 1s 0.8s ease;}
	.list-pd > li:nth-child(3){transition: all 1s 1s ease;}
	.list-pd > li:nth-child(4){transition: all 1s 1.2s ease;}
	#section01.active .main-tit > h3,
	#section01.active .main-tit > em{transform:translateY(0); opacity:1;}
	#section01.active .list-pd > li{transform:translateY(0); opacity:1;}
}
@media all and (max-width:1100px){
	#section01 .main-tit .big-txt{top:-50rem; font-size:60rem;}
	.main-tit > h3{font-size:50rem;}
	#section01,
	#section01 .fp-tableCell{height:auto !important;}
	#section01{padding-top:70rem;}
	#section01 .main-tit{height:auto;}
	.sec-pd{height:auto;}
	.list-pd{gap:20rem;}
	.list-pd > li a i{top:-20rem; width:74rem; height:25rem; z-index:0;}
	.list-pd > li a i:before{right:-48rem; z-index:-1;}
	.list-pd > li{transform:translateY(20rem); opacity:0;}
	.list-pd > li:nth-child(1){transition: all 1s 0s ease;}
	.list-pd > li:nth-child(2){transition: all 1s 0.1s ease;}
	.list-pd > li:nth-child(3){transition: all 1s 0.2s ease;}
	.list-pd > li:nth-child(4){transition: all 1s 0.3s ease;}
	#section01.active .list-pd > li{transform:translateY(0); opacity:1;}
}
@media all and (max-width:900px){
	.sec-pd .inr{width:inherit;}
	.list-pd{gap:50rem 30rem; grid-template-columns: repeat(2, 1fr); width:80%; margin:0 auto;}
	#section01 .main-tit .big-txt{display:none;}
}
@media all and (max-width:768px){
	#section01{padding-top:40rem;}
	#section01 .main-tit{padding-bottom:30rem;}
	.main-tit > h3{font-size:45rem;}
	.sec-pd{padding:55rem 0 40rem;}
	.list-pd{gap:40rem 30rem;}


}
@media all and (max-width:650px){
	.list-pd{gap:40rem 20rem; width:100%; margin:0 auto;}
	.main-tit > h3{font-size:40rem;}
}
@media all and (max-width:540px){
	#section01{padding-top:30rem;}
	#section01 .main-tit{padding-bottom:20rem;}
	.main-tit > h3{font-size:26rem;}
	.main-tit > em{margin-top:6rem; font-size:14rem;}
	.sec-pd{padding:40rem 0;}
	.list-pd{gap:30rem 12rem; width:92%; margin:0 auto;} 
	.list-pd > li{border-radius:0 5rem 5rem 5rem;}
	.list-pd > li a{padding:10rem 10rem 13rem;}
	.list-pd > li a i{top:-13rem; width:60rem; height:18rem; border-radius:5rem 0 0; font-size:11rem; padding-left:10rem;}
	.list-pd > li a i:before{right:-28rem; width:33rem; height:26rem;}
	.list-pd > li h3{margin-top:10rem; font-size:15rem;}
}
@media all and (max-width:480px){
	.main-tit > em{font-size:12rem; line-height:1.3em;}
	#section01 .main-tit > em{padding:0 10rem; box-sizing:border-box;}
	.main-tit > em br{display:none;}
	#section03 .main-tit > em br{display:block;}
	.list-pd > li a i{font-size:10rem;}
	.list-pd > li h3{font-size:13rem;}
}
/* about */
.box-flex{display:flex; width: 100%; height:100%; /*height: calc(100vh - 100rem); margin-top: 100rem; */box-sizing: border-box;}
.box-flex > div{width:50%; height:100%;}
.sec-left{padding-top:100rem; display:flex; justify-content: center; align-items: center; flex-direction: column;}
.sec-left > h3{display:block; margin-bottom:50rem; font-size:50rem; font-weight:bold; font-family:var(--font-kr); line-height:1em; word-break:keep-all; font-weight:800; color:#222;}
.list-about{display:grid; gap:0rem; grid-template-columns: repeat(4, 1fr); width:83%;}
.list-about > li{position:relative; display: flex; flex-direction: column; align-items: center; text-align:center; padding: 10rem; box-sizing: border-box;}
.list-about > li:before{content:''; position:absolute; top:0; right:0; width:1px; height:100%; background:#eee; box-sizing:border-box;}
.list-about > li:last-child:before{display:none;}
.list-about > li .icon{display: flex; justify-content: center; align-items: center; width:80rem; height:80rem; border-radius:50%; background:rgba(6,68,153,0.05);}
.list-about > li .icon img{height:45rem;}
.list-about > li .txt{margin-top:20rem;}
.list-about > li .txt > h3{font-size:31rem; font-weight:bold; color:#222; line-height:1em; word-break:keep-all; font-family:var(--font-kr); }
.list-about > li .txt > span{display:inline-block; margin-top:10px; font-size:16rem; font-weight:400; color:#666; line-height:1.2em; word-break:keep-all;}
.about-bg{margin-top:70rem; max-width:90%; height:365rem;}
.about-bg img{width:100%; height:100%;}
#section02 .sec-right{margin-top:100rem; height:calc(100vh - 100rem); }
#section02 .sec-right > div{display:flex; width:100%;}
.about-video{position:relative; background:#555; /*height:45vh;*/ height:50%;}
.about-video video{width:100%; height:100%; object-fit:fill;}
.about-video:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; z-index:20;}
video::-webkit-media-controls-panel {
display: none; opacitY:0;
}
.about-info{/*height:45vh;*/ height:50%;}
.about-info > div{position:relative; width:50%; height:100%; padding:50rem; box-sizing:border-box; display: flex; flex-direction: column; justify-content: space-between;}
.about-info > div .tit{}
.about-info > div .tit > h3{display:block; font-size:35rem; font-weight:bold; color:#fff; line-height:0.8em; word-break:keep-all;}
.about-info > div .tit > span{display:inline-block; margin-top:15rem; font-size:16rem; font-weight:400; color:#fff; line-height:1.4em; word-break:keep-all; opacity:0.8;}
.about-info > div .tit > .btn-more{display:block; margin-top:10rem;}
.about-info > div .tit > .btn-more > span{position:relative; padding-right:15rem; font-size:15rem; font-weight:400; color:#fff; text-transform:uppercase; transition:all 0.3s ease; font-family:var(--font-eng);}
.about-info > div .tit > .btn-more > span:before{content:''; position:absolute; top:7rem; right:0; width:6rem; height:10rem; background:url(../img/main/ic-arr.svg)no-repeat center; background-size:contain;}
.about-info ul.list-tel{position:absolute; right:50rem; bottom:50rem;}

.about-cs{background:#517777; }
.about-cs .list-tel > li{display:flex; align-items: flex-end; justify-content: flex-start; gap:7rem; text-align:right; margin-top:10rem;}
.about-cs .list-tel > li > em{display:inline-block; font-size:18rem; font-weight:400; color:#fff; line-height: 1em; font-family:var(--font-eng);}
.about-cs .list-tel > li > a{display:inline-block; font-size:32rem; font-weight:bold; color:#fff; line-height: 1em; font-family:var(--font-eng);}
.about-cs .list-tel > li:first-child > a{letter-spacing:0.4rem;}
.about-cs .list-tel > li.info{align-items: center; margin-top:15rem;}
.about-cs .list-tel > li.info > div{display:inline-block; width:223rem; padding:3rem 5rem 5rem; text-align: center; background:#2e5858; border-radius:50rem; font-size:15rem; font-weight:300; color:#fff; line-height:1em; word-break:keep-all;}
.about-cs .list-tel > li.info > div span{font-size:14rem;}
.about-cs .list-tel > li.info > div i{position:relative; top:1rem; display:inline-block; margin:0 4rem; width:1px; height:12rem; background:rgba(255,255,255,0.25);}
.about-downloads{display:block; background:#5483a4;}
.about-downloads > a{width:100%; height:100%; display: flex; flex-direction: column; justify-content: space-between;}
.about-downloads .icon{position:relative; display:flex; align-items: flex-end; justify-content: flex-end; transition:all 0.3s ease;}
.about-downloads .icon:before{content:''; position:absolute; right:0; bottom:0; width:160rem; height:160rem; background:rgba(255,255,255,0.1); border-radius:500rem;}
.about-downloads .icon img{position:absolute; bottom:10rem; right:5rem;}
.about-downloads > a:hover .icon{animation:products-up-downs 2s  infinite linear alternate;}
.about-downloads > a:hover .btn-more > span{padding-right:20rem;}

#en .about-cs .list-tel > li.info > div{width:290rem;}

@keyframes products-up-downs {
	0% {
		top:0rem
	}
	50% {
		top: 8rem;
	}
	100% {
		top: -8rem;
	}
}


@media all and (max-width:1500px){
	.list-about > li .txt > h3{font-size:29rem;}
	.about-info > div{padding:40rem;}
	.about-info ul.list-tel{right:40rem; bottom:40rem;}
}
@media all and (max-width:1300px){
	.list-about{width:90%;}
	.list-about > li .icon{width:70rem; height:70rem;}
	.list-about > li .icon img{height:38rem;}
	.list-about > li .txt{margin-top:15rem;}
	.list-about > li .txt > h3{font-size:26rem;}
	.list-about > li .txt > span{margin-top:6rem;}
	.about-bg{margin-top:10rem;}
	.about-info > div{padding:30rem;}
	.about-info > div .tit > h3{font-size:30rem;}
	.about-info ul.list-tel{right:30rem; bottom:30rem;}
	.about-cs .list-tel > li > a{font-size:28rem;}
	/*.about-cs .list-tel > li.info > div{width:198rem;}*/
	.about-downloads .icon img{height:120rem;}
	.about-downloads .icon:before{width:140rem; height:140rem;}
	#en .about-cs .list-tel > li.info > div{width:250rem;}
}


@media all and (min-width:1101px){
	.sec-left > h3{transform:translateY(40rem); transition: all 1s 0.3s; opacity:0;}
	.list-about > li{transform:translateX(-40rem); opacity:0;}
	.list-about > li:nth-child(1){transition: all 1s 0.5s;}
	.list-about > li:nth-child(2){transition: all 1s 0.6s;}
	.list-about > li:nth-child(3){transition: all 1s 0.7s;}
	.list-about > li:nth-child(4){transition: all 1s 0.8s;}
	.about-bg{transform:translateY(40rem); transition: all 1s 1s; opacity:0;}
	.about-cs > *{transform:translateX(-50rem); opacity:0; transition: all 1s 0.8s;}
	.about-downloads > *{transform:translateX(-50rem); opacity:0; transition: all 1s 1s;}
	#section02.active .sec-left > h3{opacity:1; transform:translateY(0);}
	#section02.active .list-about > li{opacity:1; transform:translateX(0);}
	#section02.active .about-bg{opacity:1; transform:translateY(0);}
	#section02.active .about-info > div > *{opacity:1; transform:translateX(0);}
}
@media all and (max-width:1100px){
	#section02,
	#section02 .fp-tableCell{height:auto !important;}
	#section02{padding:70rem 0 0;}
	.box-flex{display:block;}
	.box-flex > div{width:100%;}
	.sec-left{padding:0 0 70rem;}
	#section02 .sec-right{margin-top:0; height:auto;}
	.about-bg{margin-top:50rem;}
	.about-video{position:relative; height:0; padding-bottom:55%;}
	.about-video video{position:absolute;}
	.about-info{height:auto;}
	.about-info > div{height:270rem;}
	.about-downloads .icon img{bottom:0;}
	.about-downloads .icon:before{bottom:-10rem;}

	.list-about > li > *{transform:translateY(20rem); opacity:0;}
	.list-about > li:nth-child(1) > *{transition: all 1s 0s;}
	.list-about > li:nth-child(2) > *{transition: all 1s 0.1s;}
	.list-about > li:nth-child(3) > *{transition: all 1s 0.3s;}
	.list-about > li:nth-child(4) > *{transition: all 1s 0.6s;}
	.list-about > li:before,
	.list-about > li:nth-child(n + 3):after{opacity:0; transition: all 1s 0.5s;}
	.about-bg{transform:translateY(20rem); transition: all 1s 1s; opacity:0;}
	#section02.active .list-about > li > *{opacity:1; transform:translateX(0);}
	#section02.active .list-about > li:before,
	#section02.active .list-about > li:nth-child(n + 3):after{opacity:1; }
	#section02.active .about-bg{opacity:1; transform:translateY(0);}

	#en .about-cs .list-tel > li.info > div{width:auto;}
}
@media all and (max-width:768px){
	.sec-left > h3{font-size:45rem; margin-bottom:40rem;}
	.about-bg{margin-top:10rem;}
	.about-info > div .tit > h3{font-size:28rem;}
	.about-info > div .tit > span{margin-top:10rem; font-size:15rem;}
	.about-info > div .tit > .btn-more{margin-top:5rem;}
	.about-info > div .tit > .btn-more > span{font-size:14rem;}
	.about-downloads .icon img{height:100rem;}
	.about-downloads .icon:before{width:120rem; height:120rem;}
	.about-cs .list-tel > li{margin-top:7rem; gap:5rem;}
	.about-cs .list-tel > li > a{font-size:26rem;}
	.about-cs .list-tel > li > em{position:relative; top:-1rem; font-size:16rem;}
	.about-cs .list-tel > li.info > div{font-size:14rem; /*width:188rem;*/}
	.about-cs .list-tel > li.info > div span{font-size:13rem;}
}
@media all and (max-width:650px){
	.list-about{grid-template-columns: repeat(2, 1fr);}
	.about-info > div{padding:20rem;}
	.about-info ul.list-tel{right:20rem; bottom:20rem;}
	.about-info > div .tit > h3{font-size:25rem;}

	.list-about > li{padding:12rem;}
	.list-about > li:nth-child(2):before{display:none;}
	.list-about > li:nth-child(n + 3):after{content:''; position:absolute; top:0; left:0; width:100%; height:1px; background:#eee;}
}
@media all and (max-width:540px){
	.sec-left{padding:0 0 30rem;}
	.sec-left > h3{font-size:26rem; margin-bottom:20rem;}
	#section02{padding:30rem 0 0;}
	#section02 .sec-right > div{display:block;}
	
	.list-about > li .txt{margin-top:10rem;}
	.list-about > li .txt > h3{font-size:20rem;}
	.list-about > li .txt > span{font-size:14rem; margin-top:2rem;}
	.about-bg{margin-top:35rem; height:auto; width:100%;}
	.about-info > div{width:100%; height:230rem; padding:20rem;}
	.about-info > div .tit > h3{font-size:25rem;}
	.about-info > div .tit > span{margin-top:10rem; font-size:14rem;}
	.about-cs .list-tel > li > a{font-size:26rem;}
	.about-cs .list-tel > li > em{font-size:15rem;}
	.about-cs .list-tel > li.info{margin-top:10rem;}
	.about-cs .list-tel > li.info > div{font-size:14rem; /*width:187rem;*/}
	.about-cs .list-tel > li.info > div span{font-size:13rem;}
	.about-info > div .tit > .btn-more{margin-top:5rem;}
	.about-info > div .tit > .btn-more > span{font-size:14rem; padding-right:10rem;}


}
@media all and (max-width:480px){
	.list-about > li .icon{width:60rem; height:60rem;}
	.list-about > li .icon img{height:32rem;}
	.list-about > li:nth-child(2) .icon img{height:37rem;}
	.list-about > li .txt > h3{font-size:18rem;}
	.list-about > li .txt > span{font-size:12rem;}
}

/* system */
#section03{background:url(../img/main/bg-system.jpg)no-repeat center; background-size:cover;}
#section03 .main-tit{position:relative; text-align:left; margin-bottom:50rem;}
#section03 .main-tit > h3{font-size:55rem;}
#section03 .main-tit > em{display:inline-block; margin-top:15rem; font-family:var(--font-kr);}
#section03 .main-tit .big-txt{position:absolute; top:0; right:0; font-size:130rem; font-weight:bold; color:#222; word-break:keep-all; text-transform:uppercase; line-height:0.8em; font-family:var(--font-eng); transform:translateX(40rem); opacity:0; transition:all 0.8s 0.5s ease;}
.list-system{display:grid; gap:50rem; grid-template-columns: repeat(4, 1fr);}
.list-system > li{position:relative; text-align:center; text-transform:uppercase; line-height:0.8em; font-family:var(--font-eng); transform:translateY(40rem); opacity:0; transition:all 0.8s 0.5s ease;}
.list-system > li:nth-child(1){transition:all 0.8s 0.6s ease;}
.list-system > li:nth-child(2){transition:all 0.8s 0.8s ease;}
.list-system > li:nth-child(3){transition:all 0.8s 1s ease;}
.list-system > li:nth-child(4){transition:all 0.8s 1.2s ease;}
.list-system > li > a{display:block; width:100%; height:100%;}
.list-system > li > a .txt{position:absolute; top:65rem;; left:0; right:0; width:90%; margin:0 auto; z-index:2; transition:all 0.3s ease;}
.list-system > li > a .txt em{display:inline-block; margin-bottom:10rem; font-size:22rem; font-weight:400; color:#fff; line-height:1.2em; word-break:keep-all; text-transform: capitalize; font-family:var(--font-kr);}
.list-system > li > a .txt h3{display:block; font-size:34rem; font-weight:bold; color:#fff; line-height:1em;  font-family:var(--font-kr); text-transform:uppercase;}
.list-system > li > a .mockup{position:absolute; left:50%; top:50%; margin-top:50rem; /*bottom:-40rem;*/ transform: translateX(-50%);}
.list-system > li:nth-child(3) > a .mockup{margin-top:52rem;}
.list-system > li > a .mockup img{position:relative;}
/*
.list-system > li:nth-child(3) > a .mockup{bottom:-38rem;}
.list-system > li:nth-child(2) > a .mockup,
.list-system > li:nth-child(4) > a .mockup{bottom:-54rem;}
*/
.list-system > li > a .img{width:100%; height:auto; aspect-ratio: 1 / 1.02; overflow: hidden; border-radius: 15rem; box-sizing: border-box; background:#ddd; transition:all 1s ease;}
.list-system > li > a .img img{width:100%; height:100%; transform:scale(1); transition:all 0.6s ease;}
.list-system > li > a:hover .mockup img{animation: products-up-down 1.2s 0.5s  infinite linear alternate;}
.list-system > li > a:hover .img img{transform:scale(1.1);}
.list-system > li > a:hover .txt{top:120rem;}
.list-system > li > a:hover .img{border-radius:500rem;}

#section03.active .main-tit > h3{opacity:1; transform:translateY(0);}
#section03.active .main-tit > em{opacity:1; transform:translateY(0);}
#section03.active .main-tit .big-txt{opacity:0.1; transform:translateX(0);} 
#section03.active .list-system > li{opacity:1; transform:translateY(0);}

#en #section03 .main-tit .big-txt{font-size:85rem;}
#en .list-system > li > a:hover .txt{top:95rem;}


@media all and (max-width:1700px){
	.list-system > li > a .txt em{font-size:20rem;}
	.list-system > li > a .txt h3{font-size:30rem;}
}
@media all and (max-width:1600px){
	#en #section03 .main-tit .big-txt{font-size:70rem;}
}
@media all and (max-width:1500px){
	.list-system{gap:40rem;}
	.list-system > li > a .mockup{width:63%; margin-top:32rem;}
	.list-system > li:nth-child(1) > a .mockup{width:65%;}
	.list-system > li:nth-child(3) > a .mockup{width:57%; margin-top:33rem;}
	/*
	.list-system > li:nth-child(1) > a .mockup{width:65%; bottom:-20rem;}
	.list-system > li:nth-child(3) > a .mockup{width:57%; bottom:-30rem;}
	*/
	.list-system > li > a .mockup img{width:100%;}
	.list-system > li > a:hover .txt{top:90rem;}
	#en .list-system > li > a:hover .txt{top:70rem;}
	#en #section03 .main-tit .big-txt{top:8rem; font-size:60rem;}
}
@media all and (max-width:1300px){
	#section03 .main-tit .big-txt{font-size:95rem;}
	.list-system{gap:30rem;}
	.list-system > li > a .txt em{font-size:18rem;}
	.list-system > li > a .txt h3{font-size:27rem;}
	#en #section03 .main-tit .big-txt{display:none;}
}
@media all and (min-width:1101px){
	#section03 .main-tit .big-txt{transform:translateX(40rem); opacity:0; transition:all 0.8s 0.5s ease;}
	.list-system > li{transform:translateY(40rem); opacity:0; transition:all 0.8s 0.5s ease;}
	.list-system > li:nth-child(1){transition:all 0.8s 0.6s ease;}
	.list-system > li:nth-child(2){transition:all 0.8s 0.8s ease;}
	.list-system > li:nth-child(3){transition:all 0.8s 1s ease;}
	.list-system > li:nth-child(4){transition:all 0.8s 1.2s ease;}

	#section03.active .main-tit > h3{opacity:1; transform:translateY(0);}
	#section03.active .main-tit > em{opacity:1; transform:translateY(0);}
	#section03.active .main-tit .big-txt{opacity:0.1; transform:translateX(0);} 
	#section03.active .list-system > li{opacity:1; transform:translateY(0);}
	
}
@media all and (max-width:1100px){
	#section03,
	#section03 .fp-tableCell{height:auto !important;}
	#section03{padding:70rem 0 100rem;}

	.list-system > li{transform:translateY(20rem); opacity:0;}
	.list-system > li:nth-child(1){transition:all 0.8s 0s ease;}
	.list-system > li:nth-child(2){transition:all 0.8s 0.1s ease;}
	.list-system > li:nth-child(3){transition:all 0.8s 0.3s ease;}
	.list-system > li:nth-child(4){transition:all 0.8s 0.6s ease;}
	#section03.active .list-system > li{opacity:1; transform:translateY(0);}
}
@media all and (max-width:1024px){
	#en .list-system > li > a .txt{top:35rem;}
	#en .list-system > li > a:hover .txt{top:50rem;}
}
@media all and (max-width:900px){
	#section03 .main-tit{text-align:center;}
	#section03 .main-tit .big-txt{display:none;}
	.list-system{gap:80rem 30rem; grid-template-columns: repeat(2, 1fr);}
	.list-system > li > a .mockup{margin-top:48rem;}
	.list-system > li:nth-child(1) > a .mockup{width:68%;}
	.list-system > li:nth-child(3) > a .mockup{margin-top:49rem;}

	#en .list-system > li > a .txt{top:65rem;}
	#en .list-system > li > a:hover .txt{top:75rem;}
}
@media all and (max-width:768px){
	#section03 .main-tit > h3{font-size:45rem;}
	.list-system > li > a .img{aspect-ratio: 1 / 0.95;}
	.list-system > li > a .mockup{margin-top:25rem;}
	.list-system > li:nth-child(3) > a .mockup{margin-top:26rem;}
}
@media all and (max-width:650px){
	.list-system{gap:70rem 20rem; width:100%; margin:0 auto;}

	
}
@media all and (max-width:540px){
	#section03{padding:30rem 0 70rem;}
	#section03 .main-tit{margin-bottom:20rem;}
	#section03 .main-tit > h3{font-size:26rem;}
	#section03 .main-tit > em{margin-top:10rem;}
	.list-system{gap:52rem 12rem; width:92%;}
	.list-system > li > a .img{aspect-ratio: 1 / 0.95; border-radius:8rem;}
	.list-system > li > a .txt{top:48rem;}
	.list-system > li > a:hover .txt{top:40rem;}
	.list-system > li > a .txt em{margin-bottom:5rem; font-size:14rem;}
	.list-system > li > a .txt h3{font-size:22rem;}
	.list-system > li > a .mockup{margin-top:18rem;}
	.list-system > li:nth-child(1) > a .mockup{width:68%;}
	.list-system > li:nth-child(3) > a .mockup{margin-top:19rem;}
	/*
	.list-system > li > a .mockup,
	.list-system > li:nth-child(3) > a .mockup{bottom:-25rem;}
	.list-system > li:nth-child(2) > a .mockup, 
	.list-system > li:nth-child(4) > a .mockup{bottom:-37rem;}
	*/

	#en .list-system > li > a .txt{top:50rem;}
	#en .list-system > li > a:hover .txt{top:50rem;}

	
}
@media all and (max-width:480px){
	#section03 .main-tit > h3{font-size:24rem;}
	.list-system > li > a .txt{top:22rem;}
	.list-system > li > a .txt em{font-size:12rem;}
	.list-system > li > a .txt h3{font-size:18rem;}

	.about-info > div .tit > h3{font-size:24rem;}
	.about-info > div .tit > span{font-size:12rem;}
	.about-info > div .tit > .btn-more > span{font-size:12rem;}
	.about-info > div .tit > .btn-more > span:before{top:5rem;}
	.about-cs .list-tel > li > em{font-size:12rem;}
	.about-cs .list-tel > li > a{font-size:22rem;}
	.about-cs .list-tel > li.info > div,
	.about-cs .list-tel > li.info > div span{font-size:11rem;}
	.about-cs .list-tel > li.info > div i{height:9rem;}

	#en .list-system > li > a .txt{top:30rem;}
	#en .list-system > li > a:hover .txt{top:30rem;}

}


/* our info */
#section04{background:#f9f9f9;}
#section04 .sec-right{position:relative; margin-top:100rem; height:calc(100vh - 100rem);}
#section04 .sec-left {align-items: flex-end; margin-right:90rem;}
#section04 .sec-left .sec-news{display: flex; flex-direction: column; justify-content: center; width:725rem; height:100%;}
#section04 .sec-left .sec-news > h3{display:block; margin-bottom:80rem; font-size:45rem; font-weight:800; color:#333; line-height:1.4em; word-break:keep-all;}
#section04 .sec-left .sec-news > h3 i{color:var(--color-point);}
#section04 .tabs{position:absolute; top:calc(50% + 70rem); left:90rem; z-index:10;}

#en #section04 .sec-left .sec-news > h3{font-size:40rem;}

/* tab  */
.tabs{display:flex; gap:10rem;}
.tabs li{display: flex; justify-content: center; align-items: center; padding:5rem 10rem; min-width:120rem; height:42rem; border:2rem solid rgba(255,255,255,0.2); box-sizing:border-box; border-radius:50rem; transition:all 0.3s ease 0s; cursor:pointer; text-align:center; line-height:1em;}
.tabs li span{font-size:17rem; font-weight:400; line-height:1em; color:#fff; opacity:0.6;}
.tabs li.active,
.tabs li:hover{background:#fff; border-color:#fff;}
.tabs li.active span,
.tabs li:hover span{color:#10223b; opacity:1; font-weight:600; }
.tab_container{width:100%; height:100%;}
.tab_content{position:relative; height:100%;}
.box-map{width:100%; height:50%;}
.box-map iframe{width:100%; height:100%;}
.map-info{position:relative; display:block; padding:70rem 90rem; width:100%; height:50%; background:#10223b; box-sizing:border-box;}
.map-info > h3{display:block; margin-top:90rem; font-size:40rem; font-weight:bold; color:#fff; line-height:1em; word-break:keep-all; font-family:var(--font-eng);}
.map-info > p{display:block; margin:20rem 0; width:70%; font-size:18rem; font-weight:300; color:#fff; line-height:1.3em; word-break:keep-all; font-family:var(--font-kr);}
.map-info .list-info > li{display:flex; gap:10rem; margin-bottom:10rem;}
.map-info .list-info > li:last-child{margin:0;}
.map-info .list-info > li em{font-size:18rem; font-weight:400; color:#fff; line-height:1em; word-break:keep-all; text-transform:uppercase;}
.map-info .list-info > li span{font-size:18rem; font-weight:300; color:#fff; line-height:1em; word-break:keep-all; opacity:0.7;}
.btn-link{position:absolute; top:50%; right:70rem; width:140rem; height:140rem; transform:translateY(-50%);}
.btn-link > a{display:flex; justify-content: center; align-items: center; width: 100%; height: 100%; color:#fff; font-size:18rem; font-weight:bold; background-image: -moz-linear-gradient( 45deg, rgb(6,68,153) 0%, rgb(0,192,255) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(6,68,153) 0%, rgb(0,192,255) 100%); background-image: -ms-linear-gradient( 45deg, rgb(6,68,153) 0%, rgb(0,192,255) 100%); border-radius:500rem; transition:all 0.3s ease; box-shadow: 0px 5px 9px 1px rgba(0, 0, 0, 0.27); transform:scale(1); font-family:var(--font-eng);}
.btn-link > a:hover{transform:scale(1.05);}



@media all and (max-width:1700px){
	#section04 .sec-left{margin-right:0;}
	#section04 .sec-left .sec-news{width:85%; margin:0 0 0 15%; padding:0 70rem 0 0;}
	#section04 .sec-left .sec-news > h3{margin-bottom:40rem; font-size:40rem;}
	#section04 .tabs{left:70rem;}
	.map-info{padding:70rem;}
	.btn-link{right:50rem;}
}
@media all and (max-width:1500px){
	#section04 .sec-left .sec-news > h3{margin-bottom:30rem; font-size:35rem; line-height:1.3em;}	
	#en #section04 .sec-left .sec-news > h3{font-size:30rem;}
}
@media all and (max-width:1300px){
	#section04 .sec-left .sec-news{padding-right:50rem;}
	#section04 .tabs{left:50rem;}
	.map-info{padding:70rem 50rem;}
	.btn-link{right:40rem;}

}
@media all and (min-width:1101px){
	#section04 .sec-left .sec-news > h3{transform:translateX(-40rem); opacity:0; transition:all 0.8s 0.3s ease;}
	#section04 .board-list{transform:translateY(40rem); opacity:0; transition:all 1s 0.5s ease;}
	.tabs{transform:translateX(40rem); opacity:0; transition:all 0.8s 0.5s ease;}
	.map-info > *{transform:translateX(40rem); opacity:0; transition:all 0.8s 0.5s ease;}
	#section04.active .sec-left .sec-news > h3,
	.fp-viewing-5 #section04 .sec-left .sec-news > h3{opacity:1; transform:translateX(0);}
	#section04.active .board-list,
	.fp-viewing-5 #section04 .board-list{opacity:1; transform:translateY(0);}
	#section04.active .tabs,
	.fp-viewing-5 #section04 .tabs,
	#section04.active .map-info > *,
	.fp-viewing-5 #section04 .map-info > *{opacity:1; transform:translateX(0);}
	#section04.active .map-info .btn-link,
	.fp-viewing-5 #section04 .map-info .btn-link{transform:translate(0, -50%);}
}
@media all and (max-width:1100px){
	#section04{padding-top:70rem;}
	#section04,
	#section04 .fp-tableCell{height:auto !important;}
	#section04 .sec-left{margin:0 40rem; width:auto;}
	#section04 .sec-left .sec-news{width:100%; margin:0; padding:0;}
	#section04 .sec-right{margin-top:0; height:auto;}
	.box-map{height:400rem;}

	/*
	#section04 .board-list{transform:translateY(20rem); opacity:0; transition:all 1s 0.5s ease;}
	#section04.active .board-list,
	.fp-viewing-5 #section04 .board-list{opacity:1; transform:translateY(0);}
	*/

}
@media all and (max-width:540px){
	#section04{padding-top:30rem;}
	#section04 .sec-left{margin:0 20rem;}
	#section04 .sec-left .sec-news > h3{text-align:center; font-size:22rem; margin-bottom:20rem;}
	#section04 .tabs{top:340rem; left:20rem; gap:5rem;}
	.tabs li{min-width:80rem; height:26rem; padding:5rem; border-width:1px;}
	.tabs li.active span, 
	.tabs li:hover span,
	.tabs li span{font-size:13rem;}
	.box-map{height:300rem;}
	.map-info{padding:40rem 20rem; height:265rem;}
	.map-info > h3{margin-top:50rem; font-size:24rem;}
	.map-info > p{width:80%; font-size:14rem; margin:10rem 0;}
	.map-info .list-info > li{gap:5rem; margin-bottom: 6rem;}
	.map-info .list-info > li em,
	.map-info .list-info > li span{font-size:14rem;}
	.btn-link{width:80rem; height:80rem; top:unset; right:20rem; bottom:20rem; transform:none;}
	.btn-link > a{font-size:13rem;}

	#en #section04 .sec-left .sec-news > h3{font-size:20rem;}

}
@media all and (max-width:480px){
	#section04 .sec-left .sec-news > h3{font-size:19rem;}
	.btn-navi{top:2rem;}
	.map-info{padding:30rem 20rem;}
	.box-map{height:235rem;}
	#section04 .tabs{top:270rem;}
	.tabs li.active span, .tabs li:hover span, .tabs li span{font-size:12rem;}
	.map-info > h3{font-size:22rem;}
	.map-info > p{font-size:12rem;}
	.map-info .list-info > li em, .map-info .list-info > li span{font-size:12rem;}
	.btn-link > a{font-size:12rem;}

	#en #section04 .sec-left .sec-news > h3{font-size:18rem;}
}

/* iOS Safari 전용 스타일 */
@supports (-webkit-touch-callout: none) {
	.main-visual__video video{position:absolute; top:50%; left:50%; width:auto; height:100%; transform:translate(-50%, -50%); 
}
/* iOS Safari 전용 스타일 */