@charset "utf-8";

/* main-visual */
.main-slide{position:relative;}
.main-visual{position:relative; z-index:2; width: auto; margin:0 40rem; height: calc(100vh - 130rem);position: relative;min-height: 100%; overflow:hidden; border-radius:20rem;}
.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: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:35%; 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:58rem; font-weight:700; line-height: 1.2em;color: #fff; font-family:var(--font-kr); word-break:keep-all;}
.main-visual__title > em{margin-bottom:15rem; display:inline-block; font-size:18rem; 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; display:flex; justify-content: center; align-items: center; z-index:50;}
.main-visual .paging span{position:relative; display:flex; justify-content: center; align-items: center; box-sizing:border-box; width:22rem; height:22rem; margin:0 5rem; border-radius:50rem; background:transparent; border:2px solid transparent; opacity:1; transition:all 1s; cursor:pointer;}
.main-visual .paging span:before{content:''; display:inline-block; width:6rem; height:6rem; background:#fff; border-radius:50rem; opacity:0.5;}
.main-visual .paging span.swiper-pagination-bullet-active{border-color:#fff;}
.main-visual .paging span.swiper-pagination-bullet-active:before{opacity:1;}
.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%;}
.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:1300px){
	.main-visual__title h2{font-size:50rem;}
}
@media all and (max-width:1024px){
	.main-visual{border-radius:10rem; margin:0 14rem; height:600rem;}
	.main-visual__title{top:29%;}
	.main-visual__title h2{font-size:45rem;}
	.main-visual .paging span{width:20rem; height:20rem;}

}
@media all and (max-width:768px){
	.main-visual{height:500rem;}
	.main-visual__title > em{font-size:17rem;}
	.main-visual__title h2{font-size:35rem;}
}
@media all and (max-width:620px){
	.main-visual{height:400rem;}
	.main-visual__title > em{font-size:16rem;}
	.main-visual__title h2{font-size:30rem;}

}
@media all and (max-width:540px){
	.main-visual__title > em{font-size:15rem;}
	.main-visual__title h2{font-size:25rem;}
	.scroll_ani span{font-size:13rem;}
}
@media all and (max-width:480px){
	.main-visual{height:300rem; border-radius:7rem; margin:0 14rem;}
	.main-visual__title > em{font-size:12rem; margin-bottom:8rem;}
	.main-visual__title h2{font-size:17rem;}
	.main-visual .paging{margin-top:18rem;}
	.main-visual .paging span{width:15rem; height:15rem; border-width:1px;}
	.main-visual .paging span:before{width:4rem; height:4rem;}

	.scroll_ani span{font-size:11rem; padding-bottom:25rem;}
	.scroll_ani i{height:25rem;}
	.scroll_ani i::after{height:10rem;}
}


/* case */
.main-case{position:relative; padding:100rem 0 100rem; box-sizing:border-box;}
.main-case .inr{display:flex; justify-content: space-between;align-items: center;}
.main-title h3{position:relative; font-size:40rem; font-weight:800; color:#111; line-height:1.3em; word-break:keep-all; letter-spacing:-0.5px;}
.main-title h3 i{color:var(--color-point);}
.main-title span{display:inline-block; margin-top:15rem; font-size:17rem; font-weight:400; color:#777; line-height:1.5em; word-break:keep-all;}
.main-title.wt > *{color:#fff;}

.main-case [data-motion="slideLeft"],
.main-case [data-motion="slideTop"]{transform:none;}
.main-case [data-motion]{opacity:1;}
.motion-on .main-case .main-title{opacity:0; transition:transform 1.6s ease, opacity 1.3s ease; transform-style:preserve-3d; will-change:transform; transform:translateX(-80rem); transition-delay:0.1s;}
.motion-on .main-case .main-title.moved{opacity:1; transform:none;}
.motion-on .list-case > li{opacity:0; transition:transform 1.6s ease, opacity 1.3s ease; transform-style:preserve-3d; will-change:transform; transform:translateY(100rem); transition-delay:0.1s;}
.motion-on .list-case > li:nth-child(1){transition-delay:100ms !important;}
.motion-on .list-case > li:nth-child(2){transition-delay:200ms !important;}
.motion-on .list-case > li:nth-child(3){transition-delay:300ms !important;}
.motion-on .list-case > li.moved{opacity:1; transform:none;}

@media all and (max-width:1300px){
	.main-title h3{font-size:35rem;}
	.main-case{padding:80rem 0;}
}
@media all and (max-width:1024px){
	.main-case{padding:70rem 0;}
	.main-case .inr{display:block;}
	.main-case .main-title{text-align:center; margin-bottom:40rem; transform:translateY(50rem);}
	.main-title span{margin-top:10rem;}
	.main-case .main-title span br{display:none;}

	
	.main-case [data-motion="slideLeft"],
	.main-case [data-motion="slideTop"]{transform:translateY(50rem);}
	.main-case [data-motion]{opacity:0;}
	.motion-on .main-case .main-title{opacity:1; transition:transform 1.6s ease, opacity 1.3s ease; transform:none; transition-delay:300ms !important;}
	.motion-on .main-case .main-title.moved{opacity:1; transform:none;}
	.motion-on .list-case > li{opacity:1; transition:transform 1.6s ease, opacity 1.3s ease; transform:translateY(0); transition-delay:0.1s;}
	.motion-on .list-case > li:nth-child(1){transition-delay:500ms !important;}
	.motion-on .list-case > li:nth-child(2){transition-delay:600ms !important;}
	.motion-on .list-case > li:nth-child(3){transition-delay:700ms !important;}
	.motion-on .list-case > li.moved{opacity:1; transform:none;}
}

@media all and (max-width:768px){
	.main-title h3{font-size:27rem;}
	.main-title span{margin-top:8rem; font-size:16rem;}
	.main-case{padding:50rem 0;}
	.main-case .main-title{margin-bottom:30rem;}

	.main-case [data-motion="slideLeft"],
	.main-case [data-motion="slideTop"]{transform:translateY(30rem);}
}
@media all and (max-width:620px){
	.main-case{padding:40rem 0;}
	.main-case .main-title{margin-bottom:24rem;}
	.main-title h3{font-size:24rem;}
	.main-title span{margin-top:5rem; font-size:15rem;}
}
@media all and (max-width:480px){
	.main-case{padding:30rem 0;}
	.main-case .main-title{margin-bottom:15rem;}
	.main-title h3{font-size:18rem;}
	.main-title span{margin-top:5rem; font-size:11rem; line-height:1.4em;}
	.main-case .main-title span br{display:block;}
}


/* advantage */
.main-adv{margin-bottom:300rem;}
.main-adv .main-title{text-align:center;}
.list-adv{margin-top:60rem;}
.list-adv > li{position:sticky; top:60rem; display:flex; flex-direction: column; justify-content: space-between; width:100%; height:470rem; margin-bottom:0rem; padding:50rem; border-radius:15rem; box-sizing:border-box;}
.list-adv > li.adv01{background:url(../img/main/adv01.jpg)no-repeat center; background-size:cover;}
.list-adv > li.adv02{background:url(../img/main/adv02.jpg)no-repeat center; background-size:cover; transform: translateY(100rem);}
.list-adv > li.adv03{background:url(../img/main/adv03.jpg)no-repeat center; background-size:cover; transform: translateY(200rem);}
.list-adv > li > em{display:inline-block; font-size:16rem; font-weight:bold; color:#fff; line-height:1em; word-break:keep-all; text-transform:uppercase;}
.list-adv > li > .txt{}
.list-adv > li > .txt > h3{display:block; font-size:30rem; font-weight:600; color:#fff; line-height:1.3em; word-break:keep-all;}
.list-adv > li > .txt > span{display:inline-block; margin-top:15rem; font-size:17rem; font-weight:300; color:#fff; line-height:1.7em; word-break:keep-all;}

@media all and (max-width:1024px){
	.list-adv{margin-top:40rem;}
	/*.list-adv > li{height:400rem;}
	.list-adv > li.adv02{transform: translateY(50rem);}
	.list-adv > li.adv03{transform: translateY(100rem);}*/
}
@media all and (max-width:768px){
	.main-adv{margin-bottom:0rem;}
	.list-adv{margin-top:30rem;}
	.list-adv > li{position:relative; top:0; height:350rem; padding:30rem;  margin-bottom:20rem; border-radius:10rem;}
	.list-adv > li.adv02{transform: translateY(0rem);}
	.list-adv > li.adv03{transform: translateY(0rem);}
	.list-adv > li > em{font-size:15rem;}
	.list-adv > li > .txt > h3{font-size:25rem;}
	.list-adv > li > .txt > span{margin-top:10rem; font-size:16rem; line-height:1.6em;}
}

@media all and (max-width:480px){
	.list-adv{margin-top:15rem;}
	.list-adv > li{position:relative; height:180rem; padding:20rem 15rem; border-radius:5rem; margin-bottom:8rem; overflow:hidden;}
	.list-adv > li:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.12);}
	.list-adv > li > em{font-size:10rem;}
	.list-adv > li > .txt{z-index:1;}
	.list-adv > li > .txt > h3{font-size:15rem;}
	.list-adv > li > .txt > span{margin-top:6rem; font-size:11rem; line-height:1.4em;}
	.list-adv > li > .txt > span br{display:none;}
}


/* bn */
.main-bn{display:flex; justify-content: center; align-items: center; margin:100rem 40rem; width:auto; height:450rem; box-sizing:border-box; border-radius:20rem; background:url(../img/main/bg-bn01.jpg) no-repeat center; background-size:cover;}
.main-bn .txt{text-align:center;}
.main-bn .txt > h3{display:block; font-size:48rem; font-weight:bold; color:#fff; line-height:1.2em; word-break:keep-all;}
.main-bn .txt > span{display:inline-block; margin-top:15rem; font-size:18rem; font-weight:400; color:#fff; line-height:1.4em; word-break:keep-all;}

@media all and (max-width:1300px){
	.main-bn .txt > h3{font-size:45rem;}
}
@media all and (max-width:1024px){
	.main-bn{margin:70rem 14rem; border-radius:15rem;}
	.main-bn .txt > h3{font-size:40rem;}
	.main-bn .txt > span{font-size:17rem;}
}
@media all and (max-width:768px){
	.main-bn{padding:50rem; margin:50rem 14rem; border-radius:15rem; box-sizing:border-box; height:350rem;}
	.main-bn .txt > h3{font-size:33rem;}
	.main-bn .txt > span{font-size:16rem;}
}
@media all and (max-width:620px){
	.main-bn{padding:50rem; margin:50rem 14rem; border-radius:10rem; height:280rem;}
	.main-bn .txt > h3{font-size:28rem;}
	.main-bn .txt > span{margin-top:10rem; font-size:15rem;}
	.main-bn .txt > span br{display:none;}
}

@media all and (max-width:480px){
	.main-bn{padding:30rem; margin:30rem 14rem; border-radius:7rem; height:180rem;}
	.main-bn .txt > h3{font-size:17rem;}
	.main-bn .txt > span{margin-top:8rem; font-size:11rem;}
	.main-bn .txt > span br{display:none;}
}

/* service */
.main-service{position:relative; margin:0 0 100rem;}
.main-service .inr{display:flex; gap:40rem;}
.main-service .inr .main-title{width:calc(100% - 940rem); padding-top:50rem;}
.main-service .inr .main-title__wrap{position: sticky; left:0; top:100rem; padding-bottom:200rem;}
.main-service .inr .main-title h3{font-size:45rem;}
.main-service .inr .list-service{display:flex; flex-wrap: wrap; gap:0 60rem; width:900rem;}
.main-service .inr .list-service > li{position:relative; width:calc((100% / 2) - 30rem); height:480rem; background:#eee; box-sizing:border-box; border-radius:15rem; overflow:hidden;}
.main-service .inr .list-service > li:nth-child(2n){margin-top:60rem;}
.main-service .inr .list-service > li > a{display:block; width:100%; height:100%;}
.main-service .inr .list-service > li .img{width:100%; height:100%; transform:scale(1); transition:all 0.5s ease;}
.main-service .inr .list-service > li .img img{width:100%; height:100%;}
.main-service .inr .list-service > li > a:hover .img{ transform:scale(1.1);}
.main-service .inr .list-service > li .txt{position:absolute; left:0; bottom:0; z-index:1; padding:30rem; width:100%; box-sizing:border-box; font-size:30rem; font-weight:bold; color:#fff; line-height:1.2em; word-break:keep-all; }
.main-service .inr .list-service > li .btn-arr{position:absolute; top:25rem;; right:25rem; display: flex; justify-content: center; align-items: center; width:40rem; height:40rem; border-radius:50%; background:#fff; padding:4rem; box-sizing:Border-box; z-index:1; opacity:1; transition:all 0.3s ease;}
.main-service .inr .list-service > li .btn-arr svg{position:relative; overflow:hidden;}
.main-service .inr .list-service > li .btn-arr svg > *{transition-duration: .5s; transition-timing-function: cubic-bezier(.5,0,.25,1);}
.main-service .inr .list-service > li .btn-arr svg > .arr2,
.main-service .inr .list-service > li .btn-arr svg > .arr3{display: flex; position: absolute;}
.main-service .inr .list-service > li > a:hover .btn-arr{opacity:1;}
.main-service .inr .list-service > li a .btn-arr svg > .arr3{transform: translate(-200%, 200%);}
.main-service .inr .list-service > li a .btn-arr svg > .arr2{transform: translate(-100%, 100%);}
.main-service .inr .list-service > li a .btn-arr svg > .arr1{transform: translate(0);}
.main-service .inr .list-service > li a:hover .btn-arr svg > .arr1{transform: translate(200%, -200%);}
.main-service .inr .list-service > li a:hover .btn-arr svg > .arr2{transform: translate(100%, -100%);}
.main-service .inr .list-service > li a:hover .btn-arr svg > .arr3{transform: translate(0);}
.main-service .btn-more{display:block; margin-top:40rem; width: max-content; height:48rem;}
.main-service .btn-more > a{position:relative; display:flex; align-items: center; gap:25rem; width:100%; height:100%; transition: all .3s; border-bottom:2px solid #222;}
.main-service .btn-more > a:after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--color-point); box-sizing:border-box;  transition: all .3s; z-index:2;}
.main-service .btn-more > a > span{display:inline-block; margin:0; font-size:17rem; font-weight:600; color:#222; line-height:1em; word-break:keep-all;}
.main-service .btn-more > a .btn-arr{transform: rotate(45deg); }
.main-service .btn-more > a .btn-arr svg path{transition: all .3s;}
.main-service .btn-more > a:hover{gap:35rem;}
.main-service .btn-more > a:hover > span{color:var(--color-point);}
.main-service .btn-more > a:hover:after{width:100%; }
.main-service .btn-more > a:hover .btn-arr svg path{stroke:var(--color-point);}

@media all and (max-width:1300px){	
	.main-service .inr .main-title{width:30%;}
	.main-service .inr .list-service{width:70%; gap:0 40rem;}
	.main-service .inr .list-service > li{height:420rem;}
}

@media all and (max-width:1024px){	
	.main-service .inr{display:block;}
	.main-service .inr .main-title{padding:0; text-align:center;}
	.main-service .inr .main-title h3{font-size:35rem;}
	.main-service .inr .main-title h3 br{display:none;}
	.main-service .main-title span br{display:none;}
	.main-service .inr .main-title{width:100%;}
	.main-service .inr .main-title__wrap{padding:0; margin-bottom:40rem;}
	.main-service .inr .list-service{width:100%; gap:30rem;}
	.main-service .inr .list-service > li{width:calc((100% / 2) - 15rem);}
	.main-service .inr .list-service > li:nth-child(2n){margin-top:0;}
	.main-service .btn-more{display:none;}
}

@media all and (max-width:768px){	
	.main-service{margin:0 0 50rem;}
	.main-service .inr .list-service{gap:20rem;}
	.main-service .inr .list-service > li{width:calc((100% / 2) - 10rem); height:350rem; border-radius:10rem;}
	.main-service .inr .list-service > li .txt{padding:25rem; font-size:25rem;}
	.main-service .inr .list-service > li .btn-arr{top:20rem; right:20rem; width:35rem; height:35rem;}
}

@media all and (max-width:620px){	
	.main-service .inr .list-service{gap:14rem;}
	.main-service .inr .list-service > li{width:calc((100% / 2) - 7rem); height:300rem;}
	.main-service .inr .list-service > li .txt{padding:20rem;}
}

@media all and (max-width:480px){	
	.main-service{margin:0 0 30rem;}
	.main-service .inr .main-title__wrap{margin-bottom:15rem;}
	.main-service .inr .main-title h3{font-size:18rem;}
	.main-service .inr .main-title span br{display:block;}
	.main-service .inr .list-service{gap:7rem;}
	.main-service .inr .list-service > li{width:calc((100% / 2) - 5rem); height:190rem; border-radius:7rem;}
	.main-service .inr .list-service > li .txt{padding:12rem; font-size:15rem;}
	.main-service .inr .list-service > li .btn-arr{top:10rem; right:10rem; width:22rem; height:22rem;}
}

/* 리뷰 */
.main-review{position:relative; padding:100rem 0; box-sizing:border-box; z-index:1;}
.main-review:before{content:''; position:absolute; top:0; left:40rem; right:40rem; width:auto; height:100%; background:#1B2F42; border-radius:20rem; box-sizing:border-box; z-index:-1;}  
.main-review .main-title{text-align:center; margin-bottom:50rem;}
.main-review .main-title h3{font-weight:700;}
.main-review .main-title span{font-weight:300; opacity:0.6;}

@media all and (max-width:1024px){	
	.main-review{padding:70rem 0;}
	.main-review:before{left:14rem; right:14rem; border-radius:15rem;}
	.main-review .main-title{margin-bottom:40rem;}
}
@media all and (max-width:768px){	
	.main-review{padding:50rem 0;}
	.main-review:before{border-radius:10rem;}
	.main-review .main-title{margin-bottom:30rem;}
}
@media all and (max-width:480px){	
	.main-review{padding:30rem 0;}
	.main-review:before{/*left:8rem; right:8rem;*/ border-radius:7rem;}
	.main-review .main-title{margin-bottom:15rem;}
}


/* 자주묻는질문 */
.main-faq{position:relative; padding:100rem 0; box-sizing:border-box;}
.main-faq .main-title{text-align:center; margin-bottom:40rem;}
.main-faq .cont{width:1000rem; margin:0 auto;}

@media all and (max-width:1024px){	
	.main-faq{padding:70rem 0;}
	.main-faq .cont{width:auto; margin:0 80rem;}
}
@media all and (max-width:768px){	
	.main-faq{padding:50rem 0;}
	.main-faq .cont{width:auto; margin:0 40rem;}
	.main-faq .main-title{margin-bottom:20rem;}
}
@media all and (max-width:480px){	
	.main-faq{padding:30rem 0;}
	.main-faq .cont{width:auto; margin:0 30rem;}
	.main-faq .main-title{margin-bottom:10rem;}
}


/* process 
.main-process{position:relative; padding:100rem 0; box-sizing:border-box; background:#F5F7FD; border-radius:20rem; margin:0 40rem;}
.main-process .inr{overflow: hidden;}
.main-process .main-title{text-align:center; margin-bottom:60rem;}
.processSwiper{}
.processSwiper .swiper-slide{display:flex; flex-direction: column; justify-content: center; align-items: center; padding:50rem 20rem; width:100%; height:300rem; background:#fff; border-radius:15rem; border:1px solid #eee; box-sizing:border-box; text-align:center;}
.processSwiper .swiper-slide em{display:fle; justify-content: center; align-items: center; padding:5rem; width:80rem; height:25rem; font-size:14rem; font-weight:500; color:#fff; background:var(--color-point); line-height:15rem; border-radius:50rem; box-sizing:border-box;}
.processSwiper .swiper-slide .icon{display: flex; justify-content: center; align-items: center; margin:20rem 0; width:75rem; height:75rem;}
.processSwiper .swiper-slide .icon img{height: 90%; width:auto; max-width:90%;}
.processSwiper .swiper-slide h3{display:block; font-size:24rem; font-weight:bold; color:#111; line-height:1em; word-break:keep-all;}
.processSwiper .swiper-slide p{display:inline-block; margin-top:10rem; font-size:16rem; font-weight:400; color:#666; line-height:1.3em; word-break:keep-all;}
.processSwiper .swiper-pagination{position:relative; bottom:0; margin-top:20rem;}

@media all and (max-width:1300px){
	.main-process{padding:80rem 0;}
	.main-process .inr{margin: 0 40rem;}
	.main-process .main-title{margin-bottom:50rem;}
	.processSwiper .swiper-slide{height:260rem;}
	.processSwiper .swiper-slide .icon{height:65rem;}
	.processSwiper .swiper-slide p{width:90%;}
}
@media all and (max-width:1024px){
	.main-process{margin:0 14rem; padding:70rem 0; border-radius:15rem;}
	.processSwiper .swiper-slide .icon{height:60rem;}
	.processSwiper .swiper-slide h3{font-size:20rem;}
}
@media all and (max-width:768px){
	.main-process{margin:0 14rem; padding:50rem 0;}
	.main-process .inr{margin: 0 30rem;}
	.main-process .main-title{margin-bottom:30rem;}
}
@media all and (max-width:620px){
	.main-process{margin:0 14rem; border-radius:10rem;}
	.main-process .inr{margin: 0 20rem;}
	.main-process .main-title{margin-bottom:24rem;}
}
@media all and (max-width:480px){
	.main-process{padding:30rem 0; border-radius:7rem;}
	.main-process .inr{margin: 0 12rem;}
	.main-process .main-title{margin-bottom:15rem;}
	.processSwiper .swiper-slide{padding:10rem; height:150rem; border-radius:5rem;}
	.processSwiper .swiper-slide em{width:60rem; height:17rem; font-size:10rem; line-height:9rem;}
	.processSwiper .swiper-slide .icon{margin:11rem 0; height:32rem;}
	.processSwiper .swiper-slide h3{font-size:13rem;}
	.processSwiper .swiper-slide p{margin-top:5rem; font-size:11rem;}
}

*/

/* inquiry */
.main-inquiry{position:relative; margin:60rem 40rem 80rem; box-sizing:border-box; display:grid; grid-template-columns: repeat(2, 1fr); gap:30rem;}
.main-inquiry > *{text-align:center; border-radius:25rem; padding:70rem 120rem; box-sizing:border-box; overflow:hidden; min-height:500rem;}
.main-inquiry > * h3{font-size:40rem; font-weight:bold; color:#fff; margin-bottom:30rem;}
.box-inquiry__list{background:#1E252C url(../img/main/bg-inquiry01.jpg) no-repeat center; background-size:cover;}
.csSwiper{width:100%; height:647rem; margin: initial; overflow:hidden;}
.csSwiper .swiper-slide{display: flex; align-items: center; justify-content: space-between; background:rgba(255,255,255,0.1); width:100%; height:66px; padding:10px 20px; box-sizing:border-box; border-radius:5rem;}
.csSwiper .swiper-slide > .txt{display:flex; gap:10rem; align-items: center;}
.csSwiper .swiper-slide .data{font-size:16rem; font-weight:400; color:#999; line-height:1em; opacity:0.6;}
.csSwiper .swiper-slide .subject{font-size:16rem; font-weight:400; color:#fff; line-height:1em;}
.csSwiper .swiper-slide .state{display:inline-block; width:80rem; height:30rem; padding:5rem; font-size:15rem; font-weight:500; color:#fff; line-height:20rem; background:var(--color-point); border-radius:50px;}
.box-inquriy__form{background:#0067CD; url(../img/main/bg-inquiry02.jpg) no-repeat center; background-size:cover;}

@media all and (max-width:1700px){	
	.main-inquiry > *{padding:70rem;}
}
@media all and (max-width:1400px){	
	.main-inquiry > *{padding:50rem;}
}
@media all and (max-width:1024px){	
	.main-inquiry{grid-template-columns: repeat(1, 1fr); margin:14rem 14rem 60rem; gap:14rem;}
	.main-inquiry > *{padding:70rem; border-radius:15rem;}
	.main-inquiry > * h3{font-size:35rem;}
}
@media all and (max-width:768px){	
	.main-inquiry > *{border-radius:10rem;}
	.main-inquiry > * h3{font-size:27rem; margin-bottom:20rem;}
}
@media all and (max-width:480px){
	.main-inquiry{margin:14rem; gap:10rem;}
	.main-inquiry > *{padding:20rem 14rem 14rem; border-radius:7rem; min-height:auto;}
	.main-inquiry > * h3{font-size:18rem; margin-bottom:10rem;}
	.csSwiper{height:260rem;}
	.csSwiper .swiper-slide{padding:10rem;}
	.csSwiper .swiper-slide .data{display:none;}
	.csSwiper .swiper-slide .state{width:52rem; height:20rem; font-size:11rem; line-height:11rem;}
	.csSwiper .swiper-slide .subject{font-size:11rem;}

}


/* bn02 
.main-bn02{display:flex; justify-content: center; align-items: center; margin:100rem 0rem 0; width:auto; height:450rem; box-sizing:border-box; background:url(../img/main/bg-bn02.jpg) no-repeat center; background-attachment:fixed; background-size:cover;}
.main-bn02 .txt{text-align:center;}
.main-bn02 .txt > h3{display:block; font-size:48rem; font-weight:bold; color:#fff; line-height:1.2em; word-break:keep-all;}
.main-bn02 .txt > span{display:inline-block; margin-top:15rem; font-size:18rem; font-weight:400; color:#fff; line-height:1.4em; word-break:keep-all;}

@media all and (max-width:1300px){
	.main-bn02 .txt > h3{font-size:45rem;}
}
@media all and (max-width:1024px){
	.main-bn02{margin:70rem 0 0;}
	.main-bn02 .txt > h3{font-size:40rem;}
	.main-bn02 .txt > span{font-size:17rem;}
}
@media all and (max-width:768px){
	.main-bn02{padding:50rem; margin:50rem 0 0; box-sizing:border-box; height:350rem;}
	.main-bn02 .txt > h3{font-size:33rem;}
	.main-bn02 .txt > span{font-size:16rem;}
}
@media all and (max-width:620px){
	.main-bn02{padding:50rem; margin:50rem 0 0; height:280rem;}
	.main-bn02 .txt > h3{font-size:28rem;}
	.main-bn02 .txt > span{margin-top:10rem; font-size:15rem;}
	.main-bn02 .txt > span br{display:none;}
}

@media all and (max-width:480px){
	.main-bn02{padding:30rem; margin:30rem 0 0; height:150rem;}
	.main-bn02 .txt > h3{font-size:17rem;}
	.main-bn02 .txt > span{margin-top:8rem; font-size:11rem;}
	.main-bn02 .txt > span br{display:none;}
}
*/


/* 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 전용 스타일 */