@charset "UTF-8";
:root {
    --cursor-size: 10px;
    --cursor-bg: #0c3482;
    --cursor-text-color: #fff;
    --cursor-font-size: 0;
  }

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {height:960px; position: relative; z-index:1;}
.main-visual .item .background-image {position:absolute;  top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease;}
.main-visual .item .content {position:absolute; top:50%; left:0; width:100%; text-align:center; z-index:10; color:#fff; transform: translateY(-50%);}
.main-visual .item .content .txt {font-size:60px; line-height:1.4em; font-weight: 500; margin-bottom:36px;}
.main-visual .item .content p {font-size:80px; line-height:1.4em; font-weight: 500;}
.main-visual .slick-dots {position:absolute; bottom:70px; left:0;  display:flex; align-items:center; width:100%; justify-content: center; z-index:10}
.main-visual .slick-dots li {padding:0 20px;}
.main-visual .slick-dots li:first-child {padding-left:10px;}
.main-visual .slick-dots li button {position:relative; width:10px; height:10px; padding:0; background:#f0f0f0; border-radius:100%; border:0;}
.main-visual .slick-dots li button:before {content:"";position:absolute;top:50%; left:50%; width:34px; height:34px; border:1px solid rgba(240,240,240,.30); opacity:0; border-radius:100%; transform:translate(-50%,-50%); z-index:1}
.main-visual .slick-dots li button:after {content:"";position:absolute;top:50%; left:50%; width:34px; height:34px; border:1px solid transparent; opacity:0; border-radius:100%; transform:translate(-50%,-50%); z-index:2}
.main-visual .slick-dots li.slick-active button {opacity:1;}
.main-visual .slick-dots li.slick-active button:before {opacity:1;}
.main-visual .slick-dots li.slick-active button:after {opacity:1; border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
	border-left-color: #fff;
    transition: border-top-color 0.30s linear, border-right-color 0.30s linear 0.10s, border-bottom-color 0.30s linear 0.20s, border-left-color 0.30s linear 0.25s;
    transform:translate(-50%,-50%) rotate(280deg);}
.animated {transition: all .5s ease;}
.main-visual [data-animation-in] {opacity: 0;animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;transition:1s;}



@keyframes zoomInImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
  to {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
}
.zoomInImage {animation-name: zoomInImage;}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
}
.zoomOutImage {animation-name: zoomOutImage;transition:1s;}


.main-title {margin-bottom: 65px;}
.main-title h2 {font-size:50px; line-height:1.4em; font-weight: 700; color:#222; margin-bottom:8px;}
.main-title .cnt {font-size:24px; line-height:1.5em; color:#222;}


.main-service {color:#fff; background:url('../img/main/one_service_bg.jpg') 50% 50% no-repeat; text-align: center; background-size:cover; padding:104px 0;}
.main-service .title {margin-bottom: 70px; }
.main-service .title p {font-size:50px; line-height:1.4em; margin-bottom:20px; font-weight: 200;}
.main-service .title h2 {font-size:70px; line-height:1.4em; font-weight: 700;}
.main-service .link {position:relative; margin-bottom: 80px;}
.main-service .link ul {display:flex; flex-wrap:wrap; justify-content: center; margin:0 -32.5px -32px; position: relative; z-index:2;}
.main-service .link ul:before,
.main-service .link ul:after {content:""; position: absolute; top:50%; margin-top:-20px; width:23.3%; height:1px; background:#fff; opacity: .20; z-index:2;}
.main-service .link ul:before {left:0;}
.main-service .link ul:after {right:0;}
.main-service .link ul li {position:relative; padding:0 32.5px; margin-bottom:32px;}
.main-service .link ul li:before {content:""; position: absolute; top:50%; margin-top: -.5px; left:-32.5px; width:65px; height:1px; background:#fff; opacity: .20; z-index:2;}
.main-service .link ul li:first-child::before {display:none;}
.main-service .link ul li .box {display: flex; align-items: center; transition: .3s; justify-content: center; flex-wrap:wrap; align-content: center; width:300px; height: 300px; border-radius: 100%; background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.20);}
.main-service .link ul li .box .num {width:100%; font-size:20px; line-height:1.4em; margin-bottom:18px; font-family: "Montserrat", sans-serif;}
.main-service .link ul li .box h3 {width:100%; font-size:24px; line-height:1.4em; font-weight: 700; margin-bottom:20px;}
.main-service .link ul li .box .ico {width:100%; height: 80px; background-repeat: no-repeat; background-position: 50% 50%; background-size:contain; transition: .3s;}
.main-service .link ul li:nth-child(1) .box .ico {background-image:url('../img/main/one_ico1.png');}
.main-service .link ul li:nth-child(2) .box .ico {background-image:url('../img/main/one_ico2.png');}
.main-service .link ul li:nth-child(3) .box .ico {background-image:url('../img/main/one_ico3.png');}
.main-service .link ul li:nth-child(4) .box .ico {background-image:url('../img/main/one_ico4.png');}
.main-service .link ul li:hover .box {background:rgba(0,0,0,.80);}
.main-service .btns {text-align:center;}
.main-service .btns a {display:inline-flex; align-items: center; padding:4px;justify-content: center; height:74px;  border-radius: 74px; color:#222; font-size:22px; line-height:1.4em; font-weight: 700;}
.main-service .btns a span {background:#fff; display:flex; align-items: center; height:68px; border-radius:68px; padding:0 60px; transition: .3s;}
.main-service .btns a:hover {color:#fff; background: linear-gradient(90deg, #00fff5 40%, #9000ff 60%);}
.main-service .btns a:hover span {background:#000; color:#fff; box-shadow:0 5px 15px rgba(0,255,255,.50);}

:lang(en) .main-service .btns a span {padding:0 30px;}

@media (max-width: 1920px) {
	
	.main-service .link ul:before,
    .main-service .link ul:after {width:14.6%;}
   
}

@media (max-width: 1900px) {
	
	.main-service .link ul:before,
    .main-service .link ul:after {display:none;}
   
}

.main-product {background:url('../img/main/product_bg.jpg') 50% 50% repeat-y; background-size:contain; padding: 110px 0;}
.main-product .prod-inner {display:flex; max-width:1720px; width:100%; margin:0 auto;}
.main-product .prod-nav {width:300px; margin-left:160px;}
.main-product .prod-nav ul {margin-left:-20px;}
.main-product .prod-nav ul li {margin-bottom:10px; position: relative; padding-left:20px; cursor: pointer;}
.main-product .prod-nav ul li a {pointer-events: none; display:flex; height:50px; align-items: center;  font-size:18px; line-height:1.4em;font-weight: 700; color:#666; z-index:1; position: relative;}
.main-product .prod-nav ul li a:after {content:""; position:absolute; top:0; right:20px; width:26px; height:100%; background:url('../img/main/more_w.png') 50% 50% no-repeat; background-size:contain; opacity:0; transition: .3s;}
.main-product .prod-nav ul li:before {content:""; position: absolute; top:0; left:0; width:0; height: 100%; background: linear-gradient(36deg, #009c65, #004676); box-shadow:14px 0 12px rgba(0,0,0,.09); z-index:0; opacity:0; transition: .3s;}
.main-product .prod-nav ul li.slick-current a {color:#fff;}
.main-product .prod-nav ul li.slick-current a:after {opacity:1;}
.main-product .prod-nav ul li.slick-current:before {width:100%; opacity:1;}
.main-product .prod-slider {margin-left:60px; flex:1 1 auto; min-width:0; width:1%;}
.main-product .prod-slider .item {display:flex; align-items: center;}
.main-product .prod-slider .item .photo {width:600px; margin-right: 90px;}
.main-product .prod-slider .item .info {flex:1 1 auto; min-width:0; width:1%;}
.main-product .prod-slider .item .info dl dt {font-size:40px; line-height:1.4em; font-weight: 700; color:#222; margin-bottom:25px;}
.main-product .prod-slider .item .info dl dd {font-size:24px; line-height:1.5em; color:#222;}
.main-product .prod-slider .item .info .btns {margin-top:56px;}
.main-product .prod-slider .item .info .btns a {position: relative; display:flex; color:#444; align-items: center; width:220px; height: 60px; border:1px solid #a1a1a1; background:#fff; font-size:18px; line-height:1.4em; font-weight: 600; padding:0 26px;}
.main-product .prod-slider .item .info .btns a:after {content:""; position:absolute; top:0; right:26px; width:26px; height:100%; transition: .3s; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain;}
.main-product .prod-slider .item .info .btns a:hover {color:#fff; border:0; background: linear-gradient(60deg, #009c65, #004676);}
.main-product .prod-slider .item .info .btns a:hover:after {background-image:url('../img/main/more_w.png');}

:lang(en) .main-product .prod-nav {width:480px; margin-left:40px;}
:lang(en) .main-product .prod-slider {margin-left:40px;}
:lang(en) .main-product .prod-slider .item .photo {margin-right:50px;}

@media (min-width: 1025px) {
    :lang(en) .main-product .prod-slider .item .info dl dt {font-size:2rem; }
    :lang(en) .main-product .prod-slider .item .info dl dd { font-size:1.3rem; }
}


.main-review {padding:110px 0; position: relative;}
.main-review .main-title {margin-bottom:0;}
.main-review .inner {position: relative;}
.main-review .review-inner {display:flex; justify-content: flex-end; margin-right:-100px;}
.main-review .review-inner .wrap {width:87.5%;}
/* .main-review .gallery-list .slick-list {overflow:visible;} */
.main-review .gallery-list ul li {width:auto; padding:0; padding-top:50px; padding-right: 40px; transition: .3s;}
.main-review .gallery-list ul li a {display:block; position: relative; box-shadow:14px 0 24px rgba(0,0,0,.20);}
.main-review .gallery-list ul li .thumb {position: relative; padding-bottom:100%; overflow:hidden;}
.main-review .gallery-list ul li:hover {margin-top:-30px;}
.main-review .gallery-list ul li .tit {position:absolute; bottom:0; left:0; width:100%; background:#fff; z-index: 2; margin-top:0; padding:20px;} 
.main-review .gallery-list ul li .tit img {width:auto; display:inline-block; vertical-align: middle;}
.main-review .swiper-pagination {position:relative; left:0; top:0; height:3px; width:100%; background:#e2e2e2; margin-top:60px;}
.main-review .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#222; height:100%}
.main-review .btns {position:absolute; top:20px; right:20px;}
.main-review .btns a {position: relative; display:flex; color:#444; align-items: center; width:200px; height: 60px; border:1px solid #a1a1a1; background:#fff; font-size:18px; line-height:1.4em; font-weight: 600; padding:0 26px;}
.main-review .btns a:after {content:""; position:absolute; top:0; right:26px; width:26px; height:100%; transition: .3s; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain;}
.main-review .btns a:hover {color:#fff; border:0; background: linear-gradient(60deg, #009c65, #004676);}
.main-review .btns a:hover:after {background-image:url('../img/main/more_w.png');}
.main-review .review-btn-m {display:none;  margin-top:30px;}
.main-review .review-btn-m a {position: relative; display:flex; color:#444; margin:0 auto; align-items: center; width:180px; height: 44px; border:1px solid #a1a1a1; background:#fff; font-size:1.1rem; line-height:1.4em; font-weight: 600; padding:0 20px;}
.main-review .review-btn-m a:after {content:""; position:absolute; top:0; right:20px; width:20px; height:100%; transition: .3s; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain;}
.main-review .review-btn-m a:hover {color:#fff; border:0; background: linear-gradient(60deg, #009c65, #004676);}
.main-review .review-btn-m a:hover:after {background-image:url('../img/main/more_w.png');}
.cursor { position: fixed; top: 0; left: 0; width: 160px; height: 160px; background: rgba(0,0,0,.80); font-size: 0; line-height: 0; display: flex; opacity: 0; align-items: center; justify-content: center; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(1); z-index: 9999; transition: background-color 0.3s, color 0.3s, font-size 0.3s, width 0.3s, height 0.3s, transform 0.15s ease-in-out; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); text-transform: uppercase; font-weight: bold; }
.cursor.drag { opacity: 1; background: rgba(0,0,0,.80) url('../img/main/drag.png') 50% 50% no-repeat; }

#main .lnb-menu,
#main .board-search-wrap--fc,
#main .board-paging {display:none;}
.main-review .progress {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background-color: #e2e2e2;
    background-image: linear-gradient(to right, #222, #222);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .4s ease-in-out;
}
.main-review .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.main-tech {padding:110px 0; background:url('../img/main/tech_bg.jpg') 50% 50% no-repeat; color:#fff; text-align:center; background-size:cover;}
.main-tech .main-title h2,
.main-tech .main-title .cnt {color:#fff;}
.main-tech .tech-inner {max-width:980px; width:100%; margin:0 auto;}
.main-tech .tech-inner ul {display:flex; margin-left:-40px;}
.main-tech .tech-inner ul li {width:calc(33.333333% - 40px); margin-left:40px; background:rgba(0,0,0,.70); transition: .3s;}
.main-tech .tech-inner ul li a {display:block; padding: 60px 20px 40px; }
.main-tech .tech-inner ul li .ico {width:100%; height:78px; background-repeat:no-repeat; background-position: 50% 50%; background-size:contain; margin-bottom: 26px;}
.main-tech .tech-inner ul li .tit {font-size:24px; line-height:1.4em; font-weight: 500; color:#fff; margin-bottom: 30px;}
.main-tech .tech-inner ul li .more {position: relative; font-size:14px; line-height:1.4em; color:#fff; opacity:.50; transition: .3s;}
.main-tech .tech-inner ul li .more:after {content:""; display:inline-block; vertical-align:top; width:26px; height:1.4em; background:url('../img/main/more_w.png') 50% 50% no-repeat; background-size:contain; margin-left:10px;}
.main-tech .tech-inner ul li:nth-child(1) .ico {background-image:url('../img/main/tech_ico1.png');}
.main-tech .tech-inner ul li:nth-child(2) .ico {background-image:url('../img/main/tech_ico2.png');}
.main-tech .tech-inner ul li:nth-child(3) .ico {background-image:url('../img/main/tech_ico3.png');}
.main-tech .tech-inner ul li:nth-child(4) .ico {background-image:url('../img/main/tech_ico4.png');}
.main-tech .tech-inner ul li:hover {background: linear-gradient(-36deg, #0060a8 30%, #00ff90 100%);}
.main-tech .tech-inner ul li:hover .more {opacity:1;}
.main-tech .tech-inner ul li:hover:nth-child(1) .ico {background-image:url('../img/main/tech_ico1_on.png');}
.main-tech .tech-inner ul li:hover:nth-child(2) .ico {background-image:url('../img/main/tech_ico2_on.png');}
.main-tech .tech-inner ul li:hover:nth-child(3) .ico {background-image:url('../img/main/tech_ico3_on.png');}
.main-tech .tech-inner ul li:hover:nth-child(4) .ico {background-image:url('../img/main/tech_ico4_on.png');}