@charset "utf-8";


#banner{ position: relative; width: 100%; height: 100%; overflow: hidden;}
#banner .swiper{ position: relative;z-index: 80; height: 100%;margin: 0 auto;}
#banner .swiper-wrapper{z-index: inherit;}
#banner .swiper .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;z-index: 10; background-position: center bottom;background-size: cover;}
#banner .swiper .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:0; transform: translateX(-50%); z-index: 1;}
#banner .swiper .swiper-slide .banner_video:after{ position: absolute;z-index: 1; left: 0;bottom: 0; width: 100%;height: 100%; background:linear-gradient(to bottom, rgba(0,0,0,.3),rgba(0,0,0,.8)); content: '';}
#banner .swiper-slide .mob{display: none;}
#banner .swiper .swiper-slide>.info{position: absolute;z-index: 80; left: 50%; bottom: 24%; width: 80%; transform: translateX(-50%); text-align: left;}
#banner .swiper .swiper-slide>.info>.slogan{ text-align: left;}
#banner .swiper .swiper-slide>.info>.slogan>img{ height: 56px;width: auto;}
#banner .swiper .swiper-slide>.info>.intro{ width: 50%; padding: 20px 0; font-size: 2rem; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.1);}
#banner .swiper .swiper-slide>.info>.more{ text-align: left; padding-top: 30px;}
#banner .swiper .swiper-slide>.info>.more>a{ position: relative; display: inline-flex; align-items: center;align-content: center; justify-content: center;  background: #009b4c; border-radius: 50px; color: #fff; overflow: hidden; font-size: 1.4rem; padding: 12px 30px; transition: all .6s;}
#banner .swiper .swiper-slide>.info>.more>a:after{ position: absolute;z-index: 1; right: 30px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; opacity: 0; background: #009b4c; border-radius: 100%; content: ''; transition: all .3s;}
#banner .swiper .swiper-slide>.info>.more>a:before{ position: absolute;z-index: 2; right: 30px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; opacity: 0; background: #009b4c; border-radius: 100%; content: ''; transition: all .5s;}
#banner .swiper .swiper-slide>.info>.more>a>span{ position: relative;z-index: 10; display: inline-block;}
#banner .swiper .swiper-slide>.info>.more>a>i{ position: relative;z-index: 10; display: inline-flex; align-content: center;align-items: center;justify-content: center; margin-left: 6px; background: #009b4c; width: 24px;height: 24px; border-radius: 100%; transition: all .5s;}
#banner .swiper .swiper-slide>.info>.more>a:hover{ background: none; color: #fff; border-color:#009b4c; }
#banner .swiper .swiper-slide>.info>.more>a:hover i{transform: translateX(5px);}
#banner .swiper .swiper-slide>.info>.more>a:hover:after{ transform: scale(28); right: 30%;opacity: 1;}
#banner .swiper .swiper-slide>.info>.more>a:hover:before{ transform: scale(16); opacity: 1;}

#banner .swiper .swiper-pagination{ z-index: 80; text-align: right; left: 50%; width: 90%; transform: translateX(-50%); }
#banner .swiper .swiper-pagination-bullet{width:40px;height:2px;background-color:#fff;margin-bottom: 10px!important; border-radius: 3px; transition: all .3s;}
#banner .swiper .swiper-pagination-bullet-active{ width: 80px; opacity: 1;}


@keyframes ring {
    0% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}



#main{margin: 0 auto;}



#main .product{margin: 0 auto;}
#main .product>.overall {position:sticky;width:100%;height:100vh;min-height:600px;left:0;top:0;z-index:3;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;background: #fff url("../img/main-products-bg.jpg") no-repeat; background-position: center bottom; background-size: cover;}
#main .product>.overall>.container {position:relative;height:100%;display:flex;align-items:center;}
#main .product>.overall>.container>.layout {position:relative;height:100%;display:flex;align-items:center;width:100%;}
#main .product>.overall>.container>.layout>.info{ opacity: 1; z-index: auto;}
#main .product>.overall>.container>.layout>.info>.title{font-size: 4.8rem; font-weight: bold; color: #000;}
#main .product>.overall>.container>.layout>.info>.intro{ max-width: 440px; padding: 20px 0; font-size: 1.4rem; line-height: 2rem; color: #333;}
#main .product>.overall .layout>.content {position:absolute;width:100%;display:flex;justify-content:space-between;left:0;top:20%;transform:translateX(55%);transform-style:preserve-3d;perspective:120rem;perspective-origin:50% 50%; }
#main .product>.overall .layout>.content>.slide{width:32%;position:relative;overflow:hidden;border-radius:15px;transform:rotateY(20deg);}
#main .product>.overall .layout>.content>.slide .img>img {transition:all 1s ease;}
#main .product>.overall .layout>.content>.slide .box{position:absolute;width:100%;left:0;bottom:0;z-index:3;padding:25px;transition:all 0.5s ease;transform:translateY(70px);}
#main .product>.overall .layout>.content>.slide .box>.title { position: relative;z-index: 12; font-size:2rem;font-weight:600;color:#fff;}
#main .product>.overall .layout>.content>.slide .box>.text {position: relative;z-index: 12; height:0;overflow:hidden;color:#fff;line-height:20px;font-size:14px;margin-top:5px;}
#main .product>.overall .layout>.content>.slide .box>.more {position: relative;z-index: 12; display:flex;margin-top:25px;}
#main .product>.overall .layout>.content>.slide .box>.more>i{display: inline-flex;align-items: center;align-content: center;justify-content: center; width: 40px;height: 40px; font-size: 1.8rem; color: #fff; background: #009b4c; border-radius: 100%;}
#main .product>.overall .layout>.content>.slide:hover .box {transform:translateY(0);}
#main .product>.overall .layout>.content>.slide:hover .box:after{background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8) 60%);position: absolute;z-index: 1; left: 0;bottom: 0;width: 100%;height: 100%; content: '';}
#main .product>.overall .layout>.content>.slide:hover .box>.more {transform:translateX(0);opacity:1;transition-delay:0.2s;}
#main .product>.overall .layout>.content>.slide:hover .box>.text {height:40px;}
#main .product>.overall .layout>.content>.slide:hover .more {transform:translateY(0);}
#main .product>.overall .layout>.content>.slide:hover .img>img {transform:scale(1.05);}
#main .product>.space {height:1300px;}





#main .about .solution{ position:sticky;top:0; height: 130vh; margin: 0 auto; }
#main .about .solution>.container{ position:relative;margin:0 auto;}
#main .about .solution>.container>.shows{position: relative;z-index: 30; margin: 0 auto;}
#main .about .solution>.container>.shows>.floating{position: absolute;z-index: 90; width: 100%; height: 100%;}
#main .about .solution>.container>.shows>.floating>ul>li{position: absolute; display: flex;align-items: center; align-content: center; height: 60px;}
#main .about .solution>.container>.shows>.floating>ul>li .item{display: block;}
#main .about .solution>.container>.shows>.floating>ul>li .item>.dot {position:absolute;display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#009b4c;transform-origin:center;animation:ani_dot 3s linear infinite;cursor:pointer;}
#main .about .solution>.container>.shows>.floating>ul>li .item>.dot:nth-child(2) {animation-delay:-1.5s;}
#main .about .solution>.container>.shows>.floating>ul>li .item>.dot:nth-child(3) {animation-name:none;}
#main .about .solution>.container>.shows>.floating>ul>li .info{ display: none; position: absolute;z-index: -1;bottom: 60px;left:-36px;transform-origin: 10% bottom; align-items: center;align-content: center; justify-content: center; height: 64px; padding: 0 30px; background: rgba(255,255,255,.9); box-shadow: 0 3px 16px rgba(0,0,0,.1); border-radius: 16px; white-space: nowrap; width: max-content;opacity:0;transition: all ease .3s; animation: ani_item 0.5s ease backwards;}
#main .about .solution>.container>.shows>.floating>ul>li .info:after{content:'';position:absolute; left:30px; bottom: -10px;  width: 0; height: 0;border-left: 12px solid transparent;border-right: 12px solid transparent;border-top: 10px solid rgba(255,255,255,.9);}
#main .about .solution>.container>.shows>.floating>ul>li .info>.title{display: flex; align-items: center; align-content: center;}
#main .about .solution>.container>.shows>.floating>ul>li .info>.title>i{display: inline-flex; align-items: center;align-content: center;justify-content: center; width: 32px;height: 32px; background: #fff; border: 1px solid #ddd; border-radius: 100%; margin-right: 10px;}
#main .about .solution>.container>.shows>.floating>ul>li .info>.title>span{ display: inline-block; font-size: 1.8rem; font-weight: bold; color: #444;transition: all .35s;}
#main .about .solution>.container>.shows>.floating>ul>li .info>.title:hover span{color: #009b4c;}
#main .about .solution>.container>.shows>.floating>ul>li:hover .info{ display: block; z-index: 22;opacity: 1;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(1){left: 16.6%;top:34.2%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(2){right: 22.6%;bottom:27.5%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(3){right: 11.6%;top:24.5%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(3) .info{ left: auto;right: -46px;transform-origin: 85% bottom;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(3) .info:after{ left: auto; right: 30px;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(4){left: 56.6%;top:50.2%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(5){right: 51%;top:18%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(5) .info{ bottom: auto;  top:50%;left:36px; margin-top: -32px;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(5) .info:after{ left:-10px; bottom: auto; top: 50%; margin-top: -10px; border-left: 0;border-right: 12px solid rgba(255,255,255,.9);border-top: 12px solid transparent;border-bottom: 12px solid transparent;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(6){left: 25.6%;bottom:23%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(7){left: 55.6%;bottom:20.3%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(8){left: 28.2%;top:20.8%;}
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(8) .info{bottom: auto;top: 60px;transform-origin: 10% top; }
#main .about .solution>.container>.shows>.floating>ul>li:nth-of-type(8) .info:after{ bottom: auto; top: -10px; border-bottom: 10px solid rgba(255,255,255,.9);border-top: 0;}

#main .about .solution>.container>.shows>.switch{position: absolute;z-index: 90; top: 80px; right: 50px;}
#main .about .solution>.container>.shows>.switch>.toggle { display: flex; align-items: center; cursor: pointer;}
#main .about .solution>.container>.shows>.switch>.toggle>.track { width: 100px; height: 30px; background: #72c828; border-radius: 50px; position: relative;}
#main .about .solution>.container>.shows>.switch>.toggle>.track>.btn {width: 50px; height: 50px; border-radius: 50%;background: #fff; position: absolute;top: -10px;left: -5px; display: flex; justify-content: center; align-items: center;box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all .5s;}
#main .about .solution>.container>.shows>.switch>.toggle.active .btn { left: calc(100% - 50px);}
.moon-icon { width: 32px; height: 32px; stroke: #477cdc; stroke-width: 2; fill: none;  stroke-linecap: round; opacity: 0;}
.sun-icon {width: 32px;height: 32px; stroke: #ff8822; stroke-width: 2; fill: none; stroke-linecap: round; position: absolute; opacity: 1;}
#main .about .solution>.container>.shows>.switch>.toggle.active .moon-icon { opacity: 1;}
#main .about .solution>.container>.shows>.switch>.toggle.active .sun-icon {opacity: 0;}



#main .about .solution>.container>.shows>.video{position: relative; width: 100%; height: 100%; margin:  0 auto;}
#main .about .solution>.container>.shows>.video>img{display: none;}
#main .about .solution>.container>.shows>.video>video{ width: 100%;height: auto; object-fit: cover;}
#main .about .solution>.container>.shows>.video>video.daytime{ display: block;}
#main .about .solution>.container>.shows>.video>video.nighttime{ display: none;}


@keyframes ani_dot {
    to {
        scale:5;opacity:0;
    }
}
@keyframes ani_item {
    0% { transform: scale(0);opacity: 0; }
    100% { display: flex; transform: scale(1); opacity: 1; }
}
@keyframes ani_bottom_opacity {
    0% { top: 20px; opacity: 0; }
    100% { top: 60px; opacity: 1; }
}



#main .about .profile { position: relative; display: flex; min-height:80vh; background:#f7f8f9 url("../img/main-about-profile-earth.png") no-repeat; background-position: right bottom;padding: 80px 0;}
#main .about .profile>.container{ margin: 0 auto; text-align: left;}
#main .about .profile>.container>.statistics{margin: 0 auto; display: flex;align-content: center;}
#main .about .profile>.container>.statistics>.rows{display: inline-block; margin-right: 100px; }
#main .about .profile>.container>.statistics>.rows>.num{font-size: 8rem;font-weight: 900; }
#main .about .profile>.container>.statistics>.rows>.num>span{display: inline-block;position: relative;font-family: 'Roboto', sans-serif; }
#main .about .profile>.container>.statistics>.rows>.num>span.plus:after{position: absolute;z-index: 12;  right: -30px;top: 50%; transform: translateY(-50%); font-size:4rem; content: '+';}
#main .about .profile>.container>.statistics>.rows>.num>span.unit:after{position: absolute;z-index: 12;  right: -40px;top: 50%; transform: translateY(-50%); font-size: 3rem; content: attr(data-txt);}
#main .about .profile>.container>.statistics>.rows>.title{font-size: 2rem; color: #333;}
#main .about .profile>.container>.statistics>.rows:last-child{margin-right: 0;}
#main .about .profile>.container>.introduce{ width: 80%; text-align: left;color: #333;font-size: 1.6rem; line-height: 3rem; padding: 50px 0; }
#main .about .profile>.container>.more{text-align: left;}
#main .about .profile>.container>.more>a{display: inline-flex; align-items: center;align-content: center;justify-content: center; color: #009b4c; border: 1px solid #009b4c; border-radius: 50px; padding: 15px 46px; transition: all .35s;}
#main .about .profile>.container>.more>a span{display: inline-block;vertical-align: middle; font-size: 1.4rem;transition: all .35s;}
#main .about .profile>.container>.more>a i{ display: inline-flex; align-content: center;align-items: center; justify-content: center; margin-left: 10px; font-size: 1.8rem; color: #fff; width: 26px; height: 26px; border-radius: 100%; background: #009b4c; transition: all .35s;}
#main .about .profile>.container>.more>a:hover i{ transform: translateX(6px); background: #333}
#main .about .profile>.container>.more>a:hover{  background:#009b4c;color: #fff;}

#main .esg { display: flex; height:80vh;overflow: hidden;}
#main .esg>.container{position: relative;margin: 0 auto; height: 100%; width: 100%;}
#main .esg>.container>.logo{position: relative;z-index: 20; width: 100%;height: 100%;}
#main .esg>.container>.logo>img{width: 100%;height: 100%; object-fit: cover; transform: scale(4); opacity: 0; transition: 1.4s;}
#main .esg>.container>.content{position: absolute;z-index: 70; bottom: 20%; left: 50%; width: 60%;transform: translateX(-50%); display: block;text-align: center;}
#main .esg>.container>.content>.title{font-size: 2.4rem; color: #333; opacity: 0; transition: all 1s;}
#main .esg>.container>.content>.button{padding-top: 30px; display: flex;align-content: center;align-items: center; justify-content: center; margin: 0 auto;opacity: 0; transition: all 1.2s;}
#main .esg>.container>.content>.button>a{display: inline-flex; align-items: center;align-content: center;justify-content: center; margin: 0 10px; color: #009b4c; background: none; border: 1px solid #009b4c; height: 56px; border-radius: 50px; padding: 0 46px; transition: all .35s;}
#main .esg>.container>.content>.button>a:nth-child(2){background: #009b4c; color: #fff;}
#main .esg>.container>.content>.button>a span{display: inline-block; font-size: 1.6rem;transition: all .35s;}
#main .esg>.container>.content>.button>a i{ display: inline-block; margin-right: 10px; font-size: 3rem; color: #fff;  transition: all .35s;}
#main .esg>.container>.content>.button>a:hover{  background:#009b4c;color: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.1);}
#main .esg>.container>.content>.button>a:nth-child(2):hover{background: #333; border-color: #333;}
#main .esg>.container>.video{position: absolute;z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;height: 100%;}
#main .esg>.container>.mask{position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: ''; transition: all .6s;}