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

#main .inner {max-width:1540px;}

.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%;  z-index:10; display:flex; align-items:center; color:#fff; transform: translateY(-50%);}
.main-visual .item .content .txt {font-size:88px; line-height:1.13em; font-weight: 600; margin-bottom:10px;}
.main-visual .item .content p {font-size:22px; line-height:1.45em;}
.main-visual .item .slide-img {position:absolute; top:12%; right:5%;  transform: translateY(-12%); z-index:20;}
.main-visual .item .slide-img img {display:inline-block !important;}
.main-visual .slick-dots {position:absolute; bottom:95px; 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:7px; height:7px; padding:0; background:#fff; opacity:.44; border-radius:100%; border:0;}
.main-visual .slick-dots li button:after {content:"";position:absolute;top:50%; left:50%; width:40px; height:40px; 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);}
.main-visual .slick-dots .slick-play-pause {position:relative; margin-top:-15px; margin-left:10px; width:40px; height:40px; padding:0; background:transparent; border:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; z-index:2;}
.main-visual .slick-dots .slick-play-pause:focus {outline:0;}
.main-visual .slick-dots .slick-play-pause .play-icon {position:absolute; opacity:0; width:40px; height:40px; background:url('../img/main/bt_play.png') 50% 50% no-repeat;}
.main-visual .slick-dots .slick-play-pause .pause-icon {position:absolute; opacity:1; width:40px; height:40px; background:url('../img/main/bt_pause.png') 50% 50% no-repeat;}
.main-visual .slick-dots .slick-play-pause.is-playing .play-icon {opacity:0;}
.main-visual .slick-dots .slick-play-pause.is-playing .pause-icon {opacity:1;}
.main-visual .slick-dots .slick-play-pause:not(.is-playing) .play-icon {opacity:1;}
.main-visual .slick-dots .slick-play-pause:not(.is-playing) .pause-icon {opacity:0;}
.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-btns a {position: relative; background:#f2f8fa; height:50px; border-radius: 25px; padding:0 40px;font-size:16px; line-height:1.4em; font-weight: 700; color:#0b76a0; display:inline-flex; align-items: center; justify-content: center; overflow:hidden;}
.main-btns a:after {content:""; position: absolute; top:0; left:0; width:0; height: 100%; background:#0b76a0; opacity:0; transition:all 0.6s ease; z-index:0;}
.main-btns a:hover { color:#fff}
.main-btns a:hover:after {opacity:1; width:100%;}
.main-btns a span {position:relative; z-index:2;}

.main-product {position:relative}
.main-product .productSlider {opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s ease;}
.main-product .productSlider.is-visible {opacity: 1; transform: translateY(0);}
.main-product .item {width:auto; max-width:1600px; width:100%;}
.main-product .item .wrap {display:flex; align-items:center; padding-right:20px;}
.main-product .item .photo {width:770px; display:flex; align-items: center;  border-radius:0 100px 0 0; padding: 80px 0; margin-right:85px;}
.main-product .item .info {fleX:1 1 auto; min-width:0; width:1%;}
.main-product .item .info em {font-style: normal; font-size:22px; line-height:1.3em; font-weight: 600; width: fit-content; background: #0b76a0; background: linear-gradient(90deg, #0b76a0 0%, #0fb850) 100%;  background-clip: text; -webkit-background-clip: text; color: transparent; opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease;}
.main-product .item .info h3 {font-size:55px; line-height:1.4em;font-weight: 600; color:#000; margin-bottom:20px; opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease;}
.main-product .item .info ul {opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease;}
.main-product .item .info ul li {font-size:16px; line-height:1.5em; margin-bottom:10px; color:rgba(0,0,0,.80); position:relative; padding-left: 17px;}
.main-product .item .info ul li:before {content:""; position: absolute; top:7px; left:0; width:6px; height: 6px; background:#0b76a0; border-radius: 100%;}
.main-product .item .info .main-btns {margin-top:40px; opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease;}
.main-product .item.swiper-slide-active .info em {opacity: 1; transform: translateX(0); transition-delay: 0.6s;}
.main-product .item.swiper-slide-active .info h3 {opacity: 1; transform: translateX(0); transition-delay: 0.9s;}
.main-product .item.swiper-slide-active .info ul {opacity: 1; transform: translateX(0); transition-delay: 1.2s;}
.main-product .item.swiper-slide-active .info .main-btns {opacity: 1; transform: translateX(0); transition-delay: 1.5s;}
.main-product .item.swiper-slide-active .photo {background:#dfedf2 url('../img/main/product_logo.png') 50% 50% no-repeat; background-size:contain;}
.main-product .item.swiper-slide-active .photo .pic {margin-left:auto; margin-right:50px;}
.main-product .swiper-button-prev,
.main-product .swiper-button-next {position:absolute; top:auto; margin-top:0; bottom:8%; width:70px; height: 70px; transition: all 0.3s ease; border:3px solid #f2f2f1; border-radius: 100%; background-size:contain; background-color:#fff; background-repeat:no-repeat; background-position: 50% 50%;}
.main-product .swiper-button-prev {left:850px; background-image:url('../img/main/slide_prev.png');}
.main-product .swiper-button-next {left:930px; background-image:url('../img/main/slide_next.png');}
.main-product .swiper-button-prev:hover,
.main-product .swiper-button-next:hover {border-color:#0b76a0}
.main-product .swiper-button-prev:hover {background-image:url('../img/main/slide_prev_hover.png');}
.main-product .swiper-button-next:hover {background-image:url('../img/main/slide_next_hover.png');}



.main-about {padding-top:110px;}
.main-about .content {display:flex; justify-content: center; margin-bottom:90px; padding:0 20px;}
.main-about .title em {font-style: normal; font-size:28px; line-height:1.4em; font-weight: 600;  opacity: .50;}
.main-about .title h2 {font-size:135px; line-height:1.2em; font-weight: 600; width: fit-content; background: #0b76a0; background: linear-gradient(90deg, #0b76a0 30%, #0fb850) 100%;  background-clip: text; -webkit-background-clip: text; color: transparent;}
.main-about .info {max-width:650px; width:100%; margin-left:105px; color:#020202; padding-top:60px;}
.main-about .info .top {font-size:22px; line-height:1.5em; font-weight: 600; margin-bottom:10px;}
.main-about .info .cnt {font-size:18px; line-height:1.67em; opacity:.80; margin-bottom:20px;}
.main-about .info .main-btns {margin-top:40px;}
.main-about .box-inner {display:flex; justify-content:flex-end;}
.main-about .box-inner .box {padding:68px 550px; border-radius:100px 0 0 0; max-width:2310px; width:100%; margin-left:auto; background:url('../img/main/bg_about.png') 100% 50% no-repeat, linear-gradient(90deg, #0b76a0 0%, #0fb850 100%);}
.main-about .box-inner .box ul {display:flex;}
.main-about .box-inner .box ul li {margin-right:230px; text-align:center; color:#fff;}
.main-about .box-inner .box ul li:last-child {margin-right:0;}
.main-about .box-inner .box ul li .ico {margin-bottom:20px;}
.main-about .box-inner .box ul li .tit {font-size:25px; line-height:1.4em; font-weight: 600; margin-bottom:10px;}
.main-about .box-inner .box ul li p {font-size:16px; line-height:1.63em;}

@media (max-width: 1920px) {
	
	.main-about .box-inner .box {max-width:1710px; padding:68px 250px;}
   
}

.main-contact {background:url('../img/main/bg_contact.png') 50% 50% no-repeat; color:#fff; background-size:cover; height:960px; display:flex; align-items: center; justify-content: center; text-align: center;}
.main-contact .logo {margin-bottom:15px;}
.main-contact h2 {font-size:70px; line-height:1.4em; font-weight: 600; margin-bottom: 15px;}
.main-contact .cnt {font-size:26px; line-height:1.4em; font-weight: 600; margin-bottom:10px;}
.main-contact p {font-size:18px; line-height:1.4em; opacity:.80; margin-bottom:40px;}
.main-contact .btns {text-align:center;}
.main-contact .btns a {position: relative; display:inline-flex; align-items: center; height:72px; border-radius: 36px; width:252px;  overflow:hidden;}
.main-contact .btns a:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; inset:0; border-radius:inherit; transition: 0.3s; padding:4px; background:linear-gradient(90deg,#0b76a0,#0fb850); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.main-contact .btns a:after {content:"";  position:absolute; top:0; left:0; width:100%; height:100%; filter: blur(50px); border-radius:inherit; background:rgba(85,106,98,.90); z-index:1; transition: 0.3s;}
.main-contact .btns a .link {width:inherit; height: inherit; display:inline-flex; align-items: center; font-size:18px; line-height:1.4em; color:#fff; font-weight: 600; position: relative; z-index:2; padding: 0 27px; transition: 0.3s;}
.main-contact .btns a .arrow {position:absolute; top:50%; right:10px; margin-top:-25px; width:50px; height: 50px; background:url('../img/main/more.png') 50% 50% no-repeat, linear-gradient(90deg, #0b76a0 0%, #0fb850 100%); border-radius: 100%; transition: .3s;}