@charset "utf-8";
html {
scroll-behavior: smooth;
}
.pc_img{display: block;}
.m_img{display: none;}
/* 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{display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;position: absolute; left:50%;transform: translate(-50%); top:15%; width:1400rem; text-align:center; z-index:3;}
.main-visual__title > *{transition: all 1s ease; opacity: 0;transform: translateY(30rem);}
.main-visual__title h2{ font-size:60rem; font-weight:700; line-height: 1.2em;color: #fff; font-family:var(--font-kr); word-break:keep-all;}
.main-visual__title p{background-color: #053e8b;margin: 20rem; padding: 10px 23px; border-radius: 10px;font-size: 38rem;font-weight:600; line-height: 1.2em;color: #fff; font-family:var(--font-kr); word-break:keep-all;}
.main-visual__title > em{ display:inline-block; font-size:22rem; font-weight:600; color:#fff; 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%;}
.main-visual__box{opacity: 1;display: flex;justify-content: center; gap: 40px; background-color: #fff;padding: 40px 35px; border-radius: 10px; width: 100%;}
.main-visual__box li{gap: 20px;display: flex;text-align: left;align-items: center;color: #f98131;}
.main-visual__box li .icon{background-color: #f98131;border-radius: 10px; padding: 20px;}
.main-visual__box li .txt em{font-weight: 800;text-transform: uppercase;}
.main-visual__box li .txt h3{color: #333;font-size: 20rem; margin-top: 5rem; font-weight: 500;}
.main-visual__box li:nth-child(2) .icon{background-color: #d66f2b;}
.main-visual__box li:nth-child(3) .icon{background-color: #ad5a23;}
.main-visual__box li:nth-child(4) .icon{background-color: #85451b;}
.main-visual__box li:nth-child(5) .icon{background-color: #633d21;}
.main-visual__box li:nth-child(2){color: #d66f2b;}
.main-visual__box li:nth-child(3){color: #ad5a23;}
.main-visual__box li:nth-child(4){color: #85451b;}
.main-visual__box li:nth-child(5){color: #633d21;}
.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:80rem; 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 p{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{ 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__box{ width: 100%; padding: 15px;flex-direction: row;flex-wrap: wrap;justify-content: center;}
.main-visual{border-radius:10rem; margin:0 14rem; height:780rem;}
.main-visual__title{top:9%;}
.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;}
.main-visual__title p{margin: 5rem;font-size: 13rem;padding: 5px 12px;}
.visual01 .main-visual__title > em{margin-top: 0rem;}
.main-visual .swiper-slide-active .main-visual__title em{font-size: 10rem; margin-bottom: 0; margin-top: 8rem;}
.main-visual__box{gap:16px 10px; margin-top: -6%;}
.main-visual__box li{gap: 10px; width: 29%;}
.main-visual__box li .txt h3{font-size: 12rem; letter-spacing: -.4rem; margin-top: 0;}
.main-visual__box li .icon{padding:13rem 8rem;}
.main-visual__box li .txt{text-align: center;}
.main-visual__box li .icon img{width: 50%;margin: 0 auto;}
.main-visual__box li{display: block;}
.pc_img{display: none;}
.m_img{display: block;}
}
@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:490rem; border-radius:7rem; margin:0 14rem;}
.main-visual__title > em{font-size:12rem; margin-bottom:8rem;}
.main-visual__title h2{font-size:18rem;}
.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:32rem; }
.scroll_ani i{height:25rem;}
.scroll_ani i::after{height:10rem;}
}
/* case */
.main-case{position:relative; padding:100rem 0 100rem; box-sizing:border-box;background:url(../img/main/case-bg.jpg)no-repeat center; background-size:cover;}
.main-case .inr{display:flex; justify-content: space-between;align-items: center;}
.main-case .main-title h3{position:relative; font-size:40rem; font-weight:800; color:#fff; line-height:1.3em; word-break:keep-all; letter-spacing:-0.5px;text-align: center;}
.main-title h3 i{color:var(--color-point);}
.main-title span{display:inline-block; margin-top:15rem; font-size:17rem; font-weight:400; color:#616161; line-height:1.5em; word-break:keep-all; text-align: left;}
.main-case img{width: 100%; margin-top: 60rem;}
.main-title.wt > *{color:#fff;}
.main-adv
.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; text-align: center;}
.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:1;}
.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 .main-title h3{font-size:15rem ;}
.main-case [data-motion="slideLeft"],
.main-case [data-motion="slideTop"]{transform:translateY(30rem);}
.main-case img{margin-top: 20rem;}
}
@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:15rem;}
.main-title span{margin-top:5rem; font-size:11rem; line-height:1.4em;}
.main-case .main-title span br{display:block;}
}
/* advantage */
.main-adv{ padding:100rem 0 100rem; box-sizing:border-box; background:url(../img/main/adv-bg.jpg)no-repeat center; background-size:cover;}
.main-adv-sub{background:url(../img/main/adv-sub-bg.jpg)no-repeat center; background-size:cover;}
.main-adv .main-title{font-size: 37rem; letter-spacing: -.5px;}
.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;}
.main-adv .condition{display: grid;grid-template-columns: repeat(4, 1fr);align-items: center; gap: 20px; margin: 40rem 0 0;}
.main-adv .condition li{background-color: #fff; border-radius: 18px;padding: 20px; height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 20px;}
.main-adv .condition li h4{font-size: 20rem;font-weight: 600;}
.main-adv .condition li p{text-align: center;font-size: 18rem;font-weight: 600;}
.main-adv .growth{display: grid;grid-template-columns: repeat(6, 1fr);align-items: center; gap: 10px;margin-top: 40rem;}
.main-adv .growth li{position: relative;}
.main-adv .growth li .front{background-color: #fff; border-radius: 18rem;padding: 14rem; height: 100%;}
.main-adv .growth li em{text-align: left; font-weight: 700; color:#0267ff; font-size: 30rem }
.main-adv .growth li img{margin: 0 auto}
.main-adv .growth li h3{text-align: center;border-top: 1px solid #e3e3e3;margin: 25px 0 6px; color: #0067CD; padding-top: 13px; letter-spacing: -.3px;}
.main-adv .growth li p{text-align: center;line-height: 1.4;}
.main-adv .growth li .front {transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);}
.main-adv .growth li .front { backface-visibility: hidden; transform-style: preserve-3d; transform: rotateY(0deg); transition: ease-in-out 0.4s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -webkit-transition: ease-in-out 0.4s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -moz-transition: ease-in-out 0.4s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); -ms-transition: ease-in-out 0.4s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg); -o-transition: ease-in-out 0.4s;}
.main-adv .growth li:hover .front { transform: rotateX(180deg);-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); opacity: 0;}
.hover-content{border-radius: 18rem; backface-visibility: hidden; transform-style: preserve-3d; transform: rotateY(0deg); transition: ease-in-out 0.4s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -webkit-transition: ease-in-out 0.4s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -moz-transition: ease-in-out 0.4s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); -ms-transition: ease-in-out 0.4s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg); -o-transition: ease-in-out 0.4s;left: 0; position: absolute; top:0; height: 100%; transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); width: 100%; opacity: 0;}
.hover-content img{border-radius: 18rem;}
.main-adv .growth li:hover .hover-content { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); opacity: 1;}
@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);}*/
.main-adv .condition{grid-template-columns: repeat(2, 1fr);}
.main-adv .growth{ grid-template-columns: repeat(3, 1fr);}
}
@media all and (max-width:768px){
.main-adv{margin-bottom:0rem;padding: 30rem 0;}
.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;}
.main-adv{background-position: left;}
.main-adv .condition{
margin: 20rem 0;
gap: 10rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.main-adv .main-title{font-size: 0;}
.main-adv .condition li{justify-content: space-around;gap: 10px; padding: 15px;}
.main-adv .condition li h4{font-size: 13rem;}
.main-adv .condition li p{font-size: 11rem;}
.main-adv .condition li img{width: 60%;}
.main-adv .growth{margin-top: 20rem;grid-template-columns: repeat(2, 1fr);gap: 10px;}
.main-adv .growth li em{font-size: 15rem;}
.main-adv .growth li h3{font-size: 13rem;margin: 12px 0 5px;padding-top: 8px;}
.main-adv .growth li p{font-size: 11rem;}
.main-adv .growth li img{width: 30%;}
.hover-content{display: none;}
}
@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 00rem; width:auto; }
.main-bn .txt{text-align:center;}
.main-bn .txt > h3{display:block; font-size:40rem; font-weight:bold; color:#333; line-height:1.2em; word-break:keep-all;}
.main-bn .txt b{font-weight:bold; color: #3880fd;}
.main-bn .txt > span{display:inline-block; margin-top:15rem; font-size:18rem; font-weight:400; color:#333; line-height:1.4em; word-break:keep-all;}
.main-bn ul{ margin-top: 60rem; display: grid;grid-template-columns: repeat(3, 1fr); align-items: center;gap: 20px;}
.main-bn ul li{border: 1px solid #ddd; padding: 50px; height:100% ; display: flex;flex-direction: column;justify-content: center;align-items: center; }
.main-bn ul li p{ font-size: 20rem;font-weight: 700;}
.main-bn ul li h3{color: #f98131; font-weight:bold ;font-size: 50rem;}
@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;}
.main-adv .growth li:hover .front{opacity: 1;transform: unset;}
}
@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{width: 100%;}
.main-bn .txt > h3{font-size:33rem;}
.main-bn .txt > span{font-size:16rem;}
.main-bn ul{ margin-top: 20rem;gap: 5rem;grid-template-columns: repeat(3, 1fr);}
.main-bn ul li{padding: 23rem 6rem;}
.main-bn ul li p{font-size: 10rem;}
.main-bn ul li h3{font-size: 14rem;}
}
@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:0; margin:30rem 0; border-radius:7rem; height:auto;}
.main-bn .txt > h3{font-size:15rem;}
.main-bn .txt > span{margin-top:8rem; font-size:11rem;}
.main-bn .txt > span br{display:none;}
}
/* service */
.main-service{position:relative; padding:100rem 0; background-color: #f3f3f3;}
.main-service .inr{}
.main-service .inr .main-title{text-align: center;}
.main-service .inr .main-title__wrap{position: sticky; left:0; top:100rem;}
.main-service .inr .main-title h3{font-size:40rem; }
.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);}
.main-service .chek_list{margin-top: 60rem; display: grid;grid-template-columns: repeat(4, 1fr);align-items: center;gap: 20px;}
.main-service .chek_list .chek_iteam{background-color: #040d3c;border-radius: 100px; padding: 15px; display: flex;justify-content: center;align-items: center;}
.main-service .chek_list .chek_iteam h3{color: #fff; font-weight: 500;padding-left: 8px;font-size: 20rem;}
.main-service .import_wrap{ gap: 30px;font-weight: 300;display: flex;justify-content: space-between; margin: 30rem 0;}
.main-service .import_wrap .import_l{width: 60%;background-color: #fff; padding: 30px; border-top-right-radius: 20px;}
.main-service .import_wrap .import_l p{font-size: 27rem; font-weight: 600;}
.main-service .import_wrap .import_l h3{font-size: 17rem; color: #7b7b7b;}
.main-service .import_wrap .import_l h3 b{font-size: 46rem; font-weight: 800; color: #040d3c;margin-top: 10px;}
.main-service .import_wrap .import_l img{margin: -70rem auto 30px}
.main-service .import_wrap .import_r{background-color: #fff;padding: 30px; border-right: 25px; width: 100%;}
.main-service .import_wrap .import_r h3{font-size: 26rem; font-weight: 700; margin-bottom: 30rem;}
.main-service .import_wrap .import_r .ranking{margin-bottom: 20rem; background-color: #f2f3f5; border-radius: 10px;padding: 20rem 70rem;display: flex;gap: 16px;align-items: center;}
.main-service .import_wrap .import_r .ranking h4{font-size: 25rem; font-weight: 400;}
.main-service .import_wrap .import_r .ranking h4 b{font-weight: 800; font-size: 35rem;}
.main-service .import_wrap .import_r .ranking:last-child{margin-bottom: 0;}
.main-service .import_data{ display: grid;grid-template-columns: repeat(3, 1fr); align-items: center;gap: 20px;}
.main-service .import_data li{background-color: #fff; border: 1px solid #ddd; padding: 50px; height:100% ; display: flex;flex-direction: column;justify-content: center;align-items: center; }
.main-service .import_data li p{font-size: 18rem;font-weight: 700;}
.main-service .import_data li h3{color: #f98131; font-weight:bold ;font-size: 40rem;}
@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;}
.main-service .chek_list{margin-top: 20rem;grid-template-columns: repeat(2, 1fr); gap: 5px;}
.main-service .chek_list .chek_iteam h3{font-size: 11rem;}
.main-service .chek_list .chek_iteam{padding: 7rem 0;}
.main-service .chek_list .chek_iteam img{width: 10%;}
.main-service .import_wrap{display: block; margin-top: 20rem; margin-bottom: 0;}
.main-service .import_wrap .import_l{width: 100%;padding: 15rem; margin-bottom: 15rem;}
.main-service .import_wrap .import_l p{font-size: 11rem;}
.main-service .import_wrap .import_l h3{font-size: 11rem;}
.main-service .import_wrap .import_l h3 b{font-size: 15rem;}
.main-service .import_wrap .import_l img{margin: -40rem auto 0px;width: 100%;}
.main-service .import_wrap .import_r{padding: rem;}
.main-service .import_wrap .import_r h3{font-size: 15rem; margin-bottom: 20rem;}
.main-service .import_wrap .import_r .ranking h4{font-size: 11rem;}
.main-service .import_wrap .import_r .ranking h4 b{font-size: 13rem;}
.main-service .import_wrap .import_r .ranking{margin-bottom:10rem;gap: 7rem;padding: 10rem 20rem 10rem 50rem;}
.main-service .import_wrap .import_r .ranking img{width: 17%;}
.main-service .import_data{grid-template-columns: repeat(1, 1fr); gap: 10rem; display: none;}
.main-service .import_data li{padding: 15rem;}
.main-service .import_data li p{font-size: 11rem;}
.main-service .import_data li h3{font-size: 14rem;}
}
@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 ; padding: 30rem 0;}
.main-service .inr .main-title__wrap{margin-bottom:15rem;}
.main-service .inr .main-title h3{font-size:15rem;}
.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 .box-inquiry__list.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;}
}
.main-process{position:relative; padding:100rem 0; box-sizing:border-box; border-radius:20rem; margin:0 40rem;}
.main-process .inr{overflow: hidden;}
.main-process .main-title{text-align:left;}
.main-process .main-title h3{font-size: 40rem;}
.main-process .con-wrap{ display: grid;grid-template-columns: repeat(2, 1fr);align-items: center;gap: 80px;}
.main-process .proof{display: flex; gap: 10px;height: 80%;}
.main-process .proof li{border-radius: 100px;min-width: 180px;color: #fff; box-sizing:border-box;background:url(../img/main/proof-bg01.jpg)no-repeat center; background-size:cover; display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 28px;}
.main-process .proof li p{font-size: 21rem; text-align: center; margin-bottom: 10rem;}
.main-process .proof li h3{font-size: 35rem; display: contents; font-weight: 700;min-width: 80px; max-width: 80px; text-align: center;}
.main-process .map{ width: 100%;margin-top: -120px;}
.main-process .map p{text-align: right; font-size: 13rem; color: #a1a1a1; font-weight: 300;}
.main-process .proof li:nth-child(2){background:url(../img/main/proof-bg02.jpg);background-size: cover;}
.main-process .proof li:nth-child(3){background:url(../img/main/proof-bg03.jpg);background-size: cover;}
.main-process .proof li:nth-child(4){background:url(../img/main/proof-bg04.jpg);background-size: cover;}
.main-location-map {
text-align:left;
}
.main-location-map .img-wrap {
position: relative;
}
.main-location-map .pointer {
position: absolute;
width:10px; height:10px;
border-radius:50%;
background: rgba(62, 107, 180, 0.1);
}
.main-location-map .pointer.on {
display: block;
}
.main-location-map .pointer:before,
.main-location-map .pointer:after {
content:'';
position: absolute; top:50%; left:50%;
margin:-35px 0 0 -35px;
width:70px; height:70px;
border-radius:50%;
background:#e41d31;
animation: wave 3s infinite linear;
}
.main-location-map .pointer:after {
opacity: 0;
animation: wave 3s 1.5s infinite linear;
}
.main-location-map .map1 {
top:150px; left:150px;
}
.main-location-map .map2 {
top:157px; left:103px;
}
.main-location-map .map3 {
top:193px; left:168px;
}
.main-location-map .map4 {
top:335px; left:202px;
}
.main-location-map .map5 {
bottom:238px; left:440px;
}
.main-location-map .map6 {
top:112px; left:174px;
}
.main-location-map .map6 {
top:112px; left:174px;
}
.main-location-map .map7 {
top: 474px;left: 215px;
}
.main-location-map .map8 {
top: 566px;left: 130px;
}
.main-location-map .map9 {
top: 250px;
left: 418px;
}
.main-location-map .map10 {
top: 183px;
left: 355px;
}
.main-location-map .map11 {
top: 140px;
left: 363px;
}
@keyframes wave {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3.5);
opacity: 0;
}
}
@media screen and (max-width: 1500px) {
.main-process{margin:0}
.main-process .con-wrap{grid-template-columns: repeat(1, 1fr);justify-items: center; gap: 50px;}
.main-process .map{margin-top: 0;}
}
@media screen and (max-width: 1288px) {
.main-location-map .img-wrap {
transform: scale(.8);
transform-origin: 0 0;
width: 142.857143%;
}
}
@media screen and (max-width: 850px) {
.main-location-wrap {
display: block;
}
.main-location-wrap > div {
width:100%;
}
.main-location-map {
margin-top: 40px;
text-align:center;
}
.main-location-map .img-wrap {
display: inline-block;
width:auto;
}
.main-process .main-title h3{
font-size: 15rem;
}
.main-process .map{ transform: scale(0.8);
transform-origin: top center;}
}
@media screen and (max-width: 640px) {
.main-location-info-wrap {
margin-top: 0;
}
.main-location-info-box a {
height: 74px;
}
.main-location-info-box h1 {
width:110px; height:25px;
font-size: 14px;
}
.main-location-info-box p {
padding-left: 10px;
font-size: 13px;
}
.main-location-map .main-location-map-inner {
transform-origin: 0 0;
width: 142.857143%;
}
}
@media screen and (max-width: 640px) {
.main-location-info-wrap {
margin-top: 0;
}
.main-location-info-box a {
height: 74px;
}
.main-location-info-box h1 {
width:110px; height:25px;
font-size: 14px;
}
.main-location-info-box p {
padding-left: 10px;
font-size: 13px;
}
.main-location-map {
margin-top: 30px; margin-bottom:-240px;
margin-left: 30px;
}
.main-location-map-inner {
transform: scale(.7);
transform-origin: 0 0;
width: 142.857143%;
}
}
@media all and (max-width:1300px){
.main-process{padding:80rem 0;}
.main-process .inr{margin: 0 40rem;}
.main-process .main-title{margin-bottom:50rem;}
}
@media all and (max-width:1024px){
.main-process{margin:0 14rem; padding:70rem 0; border-radius:15rem;}
}
@media all and (max-width:768px){
.main-process{margin:0 14rem; padding:50rem 0;}
.main-process .inr{margin: 0 30rem;}
}
@media all and (max-width:620px){
.main-process{margin:0 14rem; border-radius:10rem;}
.main-process .inr{margin: 0 20rem;}
.main-process .con-wrap{display: block;margin-bottom: -44%;}
.main-process .proof{ grid-template-columns: repeat(2, 1fr);display: grid; width: 100%;}
.main-process .proof li{min-width: auto;padding: 10rem;}
.main-process .proof li p{font-size: 11rem; margin-bottom: 3rem;}
.main-process .proof li p br{display: none;}
.main-process .proof li h3{font-size: 15rem;}
.main-process .map p{font-size: 11rem;}
}
@media all and (max-width:480px){
.main-process{padding:30rem 0; border-radius:7rem;}
.main-process .inr{margin: 0;}
.main-process .main-title{margin-bottom:15rem;}
}
/* inquiry */
.main-inquiry{position:relative;box-sizing:border-box; display:grid; grid-template-columns: repeat(2, 1fr);}
.main-inquiry > *{text-align:centesr;padding:70rem 120rem; box-sizing:border-box; overflow:hidden; min-height:500rem;}
.main-inquiry > * h3{font-size:55rem; font-weight:bold; color:#fff;}
.consult_graph{box-sizing:border-box;background:url(../img/main/consult_graph_bg.jpg)no-repeat center; background-size:cover; display: flex;flex-direction: column;justify-content: center;align-items: center;}
.consult_graph h3{}
.consult_graph > p{color: #fff; text-align: center; margin-top: 10rem;line-height: 1.5; font-weight: 500;}
.main-inquiry .circle-container {
position: relative;
width: 300px;
height: 300px;
background: #fff;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
margin-top: 50rem;
}
/* SVG 차트 배치 */
.main-inquiry .circle-chart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
/* 내부 텍스트 스타일 지정 */
.main-inquiry .chart-text {
text-align: center;
z-index: 10;
}
.main-inquiry .chart-title {
font-size: 25px;
font-weight: 600;
color: #333;
}
.main-inquiry .chart-number-wrap {
font-size: 55px;
font-weight: 900;
color: #333;
}
.main-inquiry .counter {
color: #d60e2e;
}
.main-inquiry .unit {
font-size: 32px;
font-weight: 700;
color: #333;
margin-left: 2px;
}
.box-inquiry__list{background:#f3f3f3 }
.csSwiper{width:100%; height:647rem; margin: initial; overflow:hidden;}
.csSwiper .swiper-slide{display: flex; align-items: center; justify-content: space-between; background:#fff; 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:#333; line-height:1em;}
.csSwiper .swiper-slide .state{text-align: center; display:inline-block; width:80rem; height:30rem; padding:5rem; font-size:15rem; font-weight:500; color:#fff; line-height:20rem; background:#f98131; 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:0;}
.main-inquiry > * h3{font-size:35rem;}
}
@media all and (max-width:768px){
.main-inquiry > *{border-radius:0;}
.main-inquiry > * h3{font-size:27rem; margin-bottom:20rem;}
.main-inquiry .circle-container{margin-top: 20rem; width: 200px; height: 200px;}
.main-inquiry .chart-title{font-size: 11rem;}
.main-inquiry .chart-number-wrap{font-size: 20rem;}
.main-inquiry .unit{font-size: 15rem;}
}
@media all and (max-width:480px){
.main-inquiry{margin:0; gap:0;}
.main-inquiry > *{padding:30rem 14rem; border-radius:0; min-height:auto;}
.main-inquiry > * h3{font-size:15rem; margin-bottom:10rem;}
.consult_graph > p{font-size: 11rem; margin-top: 0;}
.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;}
}
/* 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%); }
}
#quick-cs {
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
width: 100%;
height: 80rem;
background: #040d3c;
z-index: 50;
background:url(../img/main/quick_bg.jpg)no-repeat center; background-size:cover;
}
#quick-cs .cs-num {
display: flex;
justify-content: center;
align-items: center;
gap: 10rem;
width: 520rem;
height: 100%;
box-sizing: border-box;
}
#quick-cs .cs-num>span {
position: relative;
font-size: 21rem;
font-weight: 600;
color: #fff;
line-height: 1em;
word-break: keep-all;
}
#quick-cs .cs-num>span:before {
content: '';
display: inline-block;
position: relative;
top: 3rem;
margin-right: 5rem;
width: 18rem;
height: 18rem;
background: url(../../img/kb/ic-call-wt.svg)no-repeat center;
background-size: contain;
}
#quick-cs .cs-num>a {
position: relative;
top: 2rem;
padding: 10rem 23rem;
font-size: 25rem;
font-weight: 700;
color: #040d3c;
line-height: 1em;
word-break: keep-all;
box-sizing: border-box;
display: flex;
background-color: #fff;
border-radius: 50px;
gap: 8px;
}
#quick-cs .cs-num h1{color: #fff; font-weight: 700; font-size: 21rem;}
#quick-cs .form-wrap {
}
#quick-cs .form-wrap form {
display: flex;
width: 100%;
height: 100%;
}
#quick-cs .form-wrap form fieldset {
display: flex;
justify-content: center;
align-items: center;
gap: 15rem;
width: calc(100% - 315rem);
width: -webkit-calc(100% - 315rem);
height: 100%;
margin-right: 10px;
}
#quick-cs .form-wrap form fieldset .label_wrap {
display: flex;
align-items: center;
gap: 10rem;
}
#quick-cs .form-wrap form fieldset .label_wrap label {
display: inline-block;
font-size: 17rem;
font-weight: 600;
color: #fff;
line-height: 1em;
}
#quick-cs .form-wrap form fieldset .label_wrap input {
display: block;
padding: 10rem;
width: 200rem;
height: 40rem;
border-radius: 5rem;
box-sizing: border-box;
border: none;
font-size: 15rem;
color: #333;
line-height: 1em;
word-break: keep-all;
}
#quick-cs .chk_box_wrap input[type=checkbox] {
width: 18rem;
height: 18rem;
}
#quick-cs .cs-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 10rem;
width: 295rem;
background: #585D79;
margin: 10px;
border-radius: 10px;
padding: 10rem;
box-sizing: border-box;
border: none;
font-size: 22rem;
font-weight: bold;
line-height: 1em;
word-break: keep-all;
color: #fff;
}
#quick-cs .ckbox {
display: flex;
align-items: center;
gap: 5rem;
}
#quick-cs .ckbox em {
position: relative;
top: -2rem;
font-size: 15rem;
font-weight: 300;
color: #fff;
opacity: 0.8;
}
#quick-cs .ckbox input[type='checkbox'] {
display: none;
}
#quick-cs .chk_box_wrap {
z-index: 2;
display: flex;
align-items: center;
}
#quick-cs .checkmark::before {
content: '';
display: block;
display: inline-block;
width: 18rem;
height: 18rem;
background-color: #fff;
box-sizing: border-box;
position: relative;
cursor: pointer;
border-radius: 3rem;
}
#quick-cs .chk_box_wrap input:checked+.checkmark::before {
background: #3a8afd url(../img/main/ic-chk.svg)no-repeat center;
background-size: 10rem auto;
border: none;
}
@media (max-width: 900px) {
.ft.aside .aside-item {
display: none !important;
}
#quick-cs {
display: none;
}
}
#m-quick-cs {
display: none;
}
#m-cs {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
display: none;
}
#m-cs.active {
display: block;
opacity: 1;
}
#m-cs .bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.3);
}
#m-cs .box-pop {
width: 400rem;
height: auto;
min-height: 340rem;
border-radius: 20rem;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40rem;
background-color: #fff;
box-sizing: border-box;
}
#m-cs .box-pop .pop-header {
position: relative;
margin-bottom: 18rem;
}
#m-cs .box-pop h4 {
display: block;
font-size: 17rem;
font-weight: bold;
color: #111;
line-height: 1em;
word-break: keep-all;
}
#m-cs .box-pop .btn-close {
position: absolute;
top: 0;
right: 0;
width: 20rem;
height: 20rem;
cursor: pointer;
}
#m-cs .box-pop .btn-close>span {
display: block;
position: absolute;
top: 10rem;
left: -1rem;
width: 100%;
height: 2rem;
background: #111;
}
#m-cs .box-pop .btn-close>span:nth-of-type(1) {
transform: rotate(-45deg);
}
#m-cs .box-pop .btn-close>span:nth-of-type(2) {
transform: rotate(45deg);
}
#m-cs .box-pop .line_con {
margin-bottom: 10rem;
}
#m-cs .box-pop .label_wrap {
width: 100%;
}
#m-cs .box-pop .label_wrap input {
width: 100%;
height: 35rem;
padding: 10rem;
background: #f9f9f9;
border: 1px solid #ddd;
box-sizing: border-box;
font-size: 11rem;
font-weight: 400;
color: #555;
line-height: 1em;
word-break: keep-all;
}
#m-cs .box-pop .chk_box_wrap {
display: inline-block;
width: 100%;
margin-top: 10rem;
}
#m-cs .box-pop .chk_box_wrap input {
width: 18rem;
height: 18rem;
border-color: #ddd;
margin-right: 3rem;
}
#m-cs .box-pop .chk_box_wrap span {
position: relative;
top: -4rem;
font-size: 15rem;
}
#m-cs .box-pop .chk_box_wrap a {
font-size: 15rem;
font-weight: 500;
}
#m-cs .box-pop input.g_counsel {
display: block;
margin-top: 15rem;
width: 100%;
height: 50rem;
background: #053e8b;
border-radius: 0;
font-size: 15rem;
font-weight: bold;
border: none;
color: #fff;
}
@media (max-width: 1500px) {
#quick-cs .cs-num {
width: 260px;
}
#quick-cs .form-wrap {
width: calc(100% - 260px);
width: -webkit-calc(100% - 260px);
}
#quick-cs .form-wrap form fieldset {
width: calc(100% - 260px);
width: -webkit-calc(100% - 260px);
}
#quick-cs .cs-btn {
width: 260px;
}
}
@media (max-width: 1350px) {
#quick-cs .cs-num {
gap: 7px;
width: 515px;
}
#quick-cs .cs-num>span {
font-size: 17px;
}
#quick-cs .cs-num>span:before {
width: 16px;
height: 16px;
}
#quick-cs .cs-num>a {
font-size: 20px;
}
#quick-cs .form-wrap {
width: calc(100% - 180px);
width: -webkit-calc(100% - 180px);
}
#quick-cs .form-wrap form fieldset {
width: calc(100% - 180px);
width: -webkit-calc(100% - 180px);
}
#quick-cs .cs-btn {
width: 180px;
font-size: 19px;
}
}
@media (max-width: 1200px) {
#quick-cs .cs-num {
width: 638px;
}
#quick-cs .form-wrap {
width: calc(100% - 135px);
width: -webkit-calc(100% - 135px);
}
#quick-cs .cs-btn {
width: 135px;
}
#quick-cs .form-wrap form fieldset {
gap: 15px;
width: calc(100% - 135px);
width: -webkit-calc(100% - 135px);
}
#quick-cs .form-wrap form fieldset .label_wrap label {
font-size: 15px;
}
#quick-cs .form-wrap form fieldset .label_wrap input {
width: 140px;
}
}
@media (max-width: 900px) {
.ft.aside .aside-item {
display: none !important;
}
#quick-cs {
display: none;
}
#m-quick-cs {
position: fixed;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 60rem;
z-index: 99;
box-shadow: 1px -1px 10px rgba(0, 0, 0, .1);
}
#m-quick-cs ul {
display: flex;
width: 100%;
height: 100%;
}
#m-quick-cs ul li {
display: block;
width: 100%;
height: 100%;
background: #053e8b;
}
#m-quick-cs ul li>a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #fff;
}
#m-quick-cs ul li>a .icon {
display: flex;
justify-content: center;
align-items: center;
width: 30rem;
height: 30rem;
}
#m-quick-cs ul li>a img {
width: 100%;
height: 100%;
}
#m-quick-cs ul li>a.cs img,
#m-quick-cs ul li>a.call img {
height: 18rem;
}
#m-quick-cs ul li>a p {
font-size: 16rem;
font-weight: 600;
}
}
@media (max-width: 620px) {
#m-cs .box-pop .pop-header {
margin-bottom: 15px;
}
#m-cs .box-pop h4 {
font-size: 18px;
}
#m-cs .box-pop {
padding: 25px;
border-radius: 15px;
width: 335px;
min-height: 290px;
}
#m-cs .box-pop .chk_box_wrap {
margin-top: 10px;
}
#m-cs .box-pop .chk_box_wrap input {
width: 15px;
height: 15px;
}
#m-cs .box-pop .chk_box_wrap span,
#m-cs .box-pop .chk_box_wrap a {
font-size: 11px;
}
#m-cs .box-pop .line_con {
margin-bottom: 8px;
}
}
@media (max-width: 480px) {
#m-quick-cs {
height: 45rem;
}
#m-quick-cs ul li>a p {
font-size: 13rem;
}
.ft.aside {
width: 40px;
height: 40px;
right: 10px;
bottom: 70px !important;
}
.ft.aside #top_btn {
width: 100%;
line-height: 36px;
border-radius: 50px;
}
}
@media (max-width: 370px) {
#m-cs .box-pop {
padding: 20px;
min-height: 280px;
}
#m-cs .box-pop .label_wrap input {
height: 45px;
font-size: 15px;
}
#m-cs .box-pop input.g_counsel {
font-size: 16px;
height: 45px;
}
}
/* iOS Safari 전용 스타일 */