@charset "utf-8";


#main{}
#main .video-box{position:relative;padding-top: 120%;}
#main .video-box video{position:absolute;top:0;left:0;width:100%;height:100%;}
#main .video-box:before{content: "";position:absolute;top:0;left:0;display: block;width:100%;height:100%;background: rgba(0,0,0,0.7);z-index: 10;}
#main .video-box .txt-wrap{position:absolute;top:28%;left:50%;transform:translate(-50%, -50%);width:100%;max-width: 1720px;z-index: 11;}
#main .video-box .txt-wrap .txt1{font-size: 30px;font-weight: 600;color: #fff;text-transform:uppercase;}
#main .video-box .txt-wrap .txt1 span{display: block;margin-top:10px;font-size: 20px;font-weight: normal;color: #fff;text-transform:initial;}
#main .video-box .txt-wrap .txt2{position: absolute;right:0;margin-top:28%;text-align: right;font-size: 30px;font-weight: 600;color: #fff;text-transform:uppercase;z-index: 11;}
#main .video-box .txt-wrap .txt2 span{display: block;margin-top:10px;font-size: 20px;font-weight: normal;color: #fff;text-transform:initial;}
#main .video-box .txt-obj1{position: absolute;width:100%;max-width:1720px;bottom:20%;left:50%;transform: translateX(-50%);z-index: 11;}
#main .video-box .bottom-txt{position: absolute;left:0;bottom:0;z-index: 11;}
#main .video-box .bottom-txt .line1{position: absolute;left:0;bottom:57px;height:10px;background: rgba(255,255,255,1);	-webkit-animation: line1 8s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;animation: line1 8s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;z-index: 11;}

#main .video-box .bottom-txt .line2{position: absolute;right:0;bottom:32px;height:10px;background: rgba(0,225,22,1);	-webkit-animation: line1 8s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;animation: line1 8s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;}

#main .section01{position:relative;padding:130px 0 50px;background: url(/_public/images2/main/bg1.png) top center no-repeat;background-size: cover;}
#main .section01 .layout{max-width:1600px;display: flex;justify-content: space-between;}
#main .section01 .txt1{position: relative;z-index: 1;}
#main .section01 .txt1 em{display: block;font-size: 17px;font-weight: normal;color: #00c713;}
#main .section01 .txt1 h3{margin-top:75px;font-size: 80px;font-weight: normal;line-height: 1.06;color: #000;}
#main .section01 .txt1 p{margin-top:295px; font-size: 30px;font-weight: normal;color: #808080;}
#main .section01 .txt2{text-align: right;}
#main .section01 .txt2 em{display: block;font-size: 17px;font-weight: normal;color: #00c713;}
#main .section01 .txt2 h3{margin-top:75px;font-size: 80px;font-weight: normal;line-height: 1.06;color: #000;}
#main .section01 .txt2 p{margin-top:20px; font-size: 23px;font-weight: normal;line-height: 1.35;color: #909090;position: relative;}
#main .section01 .txt2 h4{margin-top:215px; font-size: 60px;font-weight: normal;line-height: 1.17;color: #000;}
#main .section01 .button-wrap{position: absolute;bottom:0;left:50%;transform: translateX(-50%);}
#main .section01 .img{position: absolute;top:98px;left:50%;transform: translateX(-50%);}
#main .section02 {margin-top:135px;padding: 0 0 100px;overflow-x: hidden;}
#main .section02 .product-slide{margin-bottom:100px;}
#main .section02 .product-slide .slick-slide{margin:0 90px;}
#main .section02 .product-slide .slick-slide .img{position:relative;padding-top:140%;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#main .section02 .product-slide .slick-slide .img:after {content:"";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(/_public/images2/icon/plus.svg) no-repeat;background-size: cover;display: inline-block;width: 80px;height: 80px;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;opacity: 0;}
#main .section02 .product-slide .slick-slide p{margin-top:20px;text-align: left;display: block; font-size: 15px;font-weight: bold;color: #000;}
#main .section02 .product-slide .slick-slide:nth-child(even) p{color: #00c713;}
#main .section02 .product-slide .slick-slide .img:nth-child(2):after { display: none;}
#main .section02 .product-slide .item2 .img:after { display: none;}
#main .section02 .product-slide .item4 .img:after { display: none;}
#main .section02 .product-slide .item1 .img{background: url(/_public/images2/main/img02.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item1:hover .img{background: url(/_public/images2/main/img02_hover.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item2 .img{background: url(/_public/images2/main/img03.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item2:hover .img{background: url(/_public/images2/main/img03_hover.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item3 .img{background: url(/_public/images2/main/img04.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item3:hover .img{background: url(/_public/images2/main/img04_hover.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item4 .img{background: url(/_public/images2/main/img05.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item4:hover .img{background: url(/_public/images2/main/img05_hover.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item5 .img{background: url(/_public/images2/main/img06.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item5:hover .img{background: url(/_public/images2/main/img06_hover.png) top center no-repeat;background-size: cover;}
/* #main .section02 .product-slide .item6 .img{background: url(/_public/images2/main/img06.png) top center no-repeat;background-size: cover;}
#main .section02 .product-slide .item6:hover .img{background: url(/_public/images2/main/img06_hover.png) top center no-repeat;background-size: cover;} */
#main .section02 .product-slide .slick-slide:hover .img:after{opacity:1;}
#main .section02 .button-wrap{text-align: center;margin-top:80px;}
#main .section02 .simply-scroll{height:71px;}
#main .section02 .simply-scroll .simply-scroll-clip{height:71px;}
#main .section02 .simply-scroll .simply-scroll-list li{width:1810px;height:71px;}
#main .section02 .simply-scroll .simply-scroll-list li{width:1810px;height:71px;}
#main .section02 .simply-scroll .simply-scroll-list li + li{margin-left:60px;}
#main .section02 .simply-scroll .simply-scroll-clip #scroller3{margin-top:5px;}
#main .section02 .simply-scroll .simply-scroll-clip #scroller3 li{width:2450px}
#main .section03{padding:100px 0 150px;background: url(/_public/images2/main/bg2.png) top center no-repeat;background-size: cover;}
#main .section03 h2{font-size: 92px;font-weight: normal;line-height: 1.2;color: #000;}
#main .section03 h2 strong{display: inline-block;font-weight: bold;}
#main .section03 p{margin-top:20px;font-size: 15px;font-weight: normal;color: #000;text-transform: uppercase;}
#main .section03 .scroll-picture{position:relative;margin-top:120px;}
#main .section03 .scroll-picture h3{position:absolute;top:18%;width:100%;text-align: center;font-size: 200px;font-weight: bold;color: #000;}
#main .section03 .scroll-picture .img-wrap{font-size:0;position: relative;}
#main .section03 .scroll-picture .wrap2{text-align: right;top:-160px;}
#main .section03 .scroll-picture .wrap3{text-align: center;}
#main .section03 .scroll-picture .img-wrap .thumnail{display: inline-block;position: relative;width:30%;padding-top:42%;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
#main .section03 .scroll-picture .img-wrap .thumnail span{opacity:0;position: absolute;left:0;bottom:20px;width:100%;font-size: 20px;font-weight: normal;color: #909090;display: block;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;text-align: left !important;}
#main .section03 .scroll-picture .img-wrap .thumnail  span em{color:#fff;display: block;}
#main .section03 .scroll-picture .img-wrap .thumnail:hover{opacity: 1;}
#main .section03 .scroll-picture .img-wrap .thumnail:hover span{opacity: 1;}
#main .section03 .scroll-picture .img-wrap .thumnail.thum1{background: url(/_public/images2/main/list01.png) no-repeat;background-size: cover;}
#main .section03 .scroll-picture .img-wrap .thumnail.thum1:hover{background: url(/_public/images2/main/list01_hover.png) no-repeat;background-size: cover;}
#main .section03 .scroll-picture .img-wrap .thumnail.thum2{background: url(/_public/images2/main/list02.png) no-repeat;background-size: cover;}
#main .section03 .scroll-picture .img-wrap .thumnail.thum2:hover{background: url(/_public/images2/main/list02_hover.png) no-repeat;background-size: cover;}
#main .section03 .scroll-picture .img-wrap .thumnail.thum3{background: url(/_public/images2/main/list03.png) no-repeat;background-size: cover;}
#main .section03 .scroll-picture .img-wrap .thumnail.thum3:hover{background: url(/_public/images2/main/list03_hover.png) no-repeat;background-size: cover;}
#main .section03 .button-wrap{text-align: center;margin-top:80px;}


#main .section04{padding:100px 0 0;border-top:1px solid #d0d3da;}
#main .section04 .simply-scroll{height:71px;}
#main .section04 .simply-scroll .simply-scroll-clip{height:71px;}
#main .section04 .simply-scroll .simply-scroll-list li{width:1814px;height:71px;}
#main .section04 .simply-scroll .simply-scroll-list li{width:1814px;height:71px;}
#main .section04 .simply-scroll .simply-scroll-list li + li{margin-left:60px;}
#main .section04 .simply-scroll .simply-scroll-clip #scroller5{margin-top:5px;}
#main .section04 .simply-scroll .simply-scroll-clip #scroller5 li{width:2450px}
#main .section05{padding:0 0 150px;}
#main .section05 .simply-scroll{margin-top:160px;height:80px;}
#main .section05 .simply-scroll-clip{height:80px;}
#main .section05 .logo-scroll{}
#main .section05 .logo-scroll {height:80px;}
#main .section05 .logo-scroll  li{width:160px;margin:0 80px;}
#main .section05 .button-wrap{text-align: center;margin-top:160px;}

#main .safelycool-box { display: flex;  border-top: 1px solid #909090;}
#main .safelycool-box .left { padding: 120px 0;text-align: center; border-right: 1px solid #909090; width: 50%;}
#main .safelycool-box .left h3 { font-size: 60px; font-weight: 600}
#main .safelycool-box .left span { font-size: 15px;  color: #808080; display: block; margin-bottom: 80px}
#main .safelycool-box .right { width: 50%;}
#main .safelycool-box .right ul{ }
#main .safelycool-box .right ul li { border-bottom: 1px solid #909090}
#main .safelycool-box .right ul li:last-child { border-bottom: 0; }
#main .safelycool-box .right ul li a{ display:block;font-size: 26px;padding: 30px 30px 20px; }
#main .safelycool-box .right ul li a:hover{ background: #000; color: #fff}


#main .factsContainer {padding:0 100px 100px;text-align: center;position: relative;}
#main .factsContainer_sm {display: flex;width: 250vw;}
#main .factsContainer .fact {position: relative;width:430px;}
#main .factsContainer .fact .img{position:relative;padding-top:140%;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#main .factsContainer .fact .img:after {content:"";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(/_public/images2/icon/plus.svg) no-repeat;background-size: cover;display: inline-block;width: 80px;height: 80px;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;opacity: 0;}
#main .factsContainer .fact p{margin-top:20px;text-align: left;display: block; font-size: 15px;font-weight: bold;color: #000;}
#main .factsContainer .fact:nth-child(even) p{color: #00c713;}
#main .factsContainer .fact + .fact {margin-left: 180px;}
#main .factsContainer .fact:nth-child(1) .img{background: url(/_public/images2/main/img02.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(1):hover .img{background: url(/_public/images2/main/img02_hover.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(2) .img{background: url(/_public/images2/main/img03.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(2):hover .img{background: url(/_public/images2/main/img03_hover.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(3) .img{background: url(/_public/images2/main/img02.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(3):hover .img{background: url(/_public/images2/main/img02_hover.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(4) .img{background: url(/_public/images2/main/img03.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(4):hover .img{background: url(/_public/images2/main/img03_hover.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(5) .img{background: url(/_public/images2/main/img02.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(5):hover .img{background: url(/_public/images2/main/img02_hover.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(6) .img{background: url(/_public/images2/main/img03.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:nth-child(6):hover .img{background: url(/_public/images2/main/img03_hover.png) top center no-repeat;background-size: cover;}
#main .factsContainer .fact:hover .img:after{opacity:1;}

@media all and (max-width:1720px) {
    #main .video-box .txt-wrap .txt1{padding-left:20px;}
    #main .video-box .txt-wrap .txt2{padding-right:20px;}
}


/* tablet */
@media all and (max-width:1280px) {
    #main{padding-top:70px;overflow:hidden;}
    #main .safelycool-box .left h3 { font-size: 50px}
    #main .video-box .txt-wrap{}
    #main .video-box .txt-wrap .txt1{padding:0 20px;font-size:16px;}
    #main .video-box .txt-wrap .txt1 span{font-size:14px;}
    #main .video-box .txt-wrap .txt2{padding:0 20px;margin-top:20%;font-size:16px;}
    #main .video-box .txt-wrap .txt2 span{font-size:14px;}
    #main .video-box .bottom-txt{display: none;}
    #main .video-box .txt-obj1{bottom:0;}
    #main .section01{padding:50px 20px 25px;}
    #main .section01 .layout{display: block;}
    #main .section01 .img{position: relative;top:0;left:0;transform: none;margin-top:20px;}
    #main .section01 .img img{display: block;width:100%;}
    #main .section01 .txt1 em{font-size:15px;}
    #main .section01 .txt1 h3{margin-top:20px;font-size:36px; line-height: 1.14;}
    #main .section01 .txt1 p{display: none;}
    #main .section01 .txt2{margin-top:20px;}
    #main .section01 .txt2 em{font-size:15px;}
    #main .section01 .txt2 h3{margin-top:20px;font-size:36px; line-height: 1.14;}
    #main .section01 .txt2 p{margin-top:10px; font-size: 15px;font-weight: normal;line-height: 1.2;}
    #main .section01 .txt2 h4{margin-top:10px; font-size: 20px;font-weight: normal;line-height: 1.25;}
    #main .section01 .button-wrap{position: relative;left:0;transform: none;margin-top:60px;text-align: center;}
    #main .section02{margin-top:100px;padding-bottom: 90px;}
    #main .section02 .layout{padding:0 20px;}
    #main .section02 .simply-scroll .simply-scroll-clip{height:45px;}
    #main .section02 .simply-scroll{height:45px;}
    #main .section02 .product-slide .slick-slide{margin:0 45px;}
    #main .section02 .simply-scroll .simply-scroll-list li{width:1170px;height:45px;}
    #main .section02 .simply-scroll .simply-scroll-clip #scroller3 li{width:1633px;}
    #main .section02 .button-wrap{margin-top:60px;}
    #main .section03{padding:0 20px 50px;}
    #main .section03 h2{font-size: 32px;font-weight: normal;line-height: 1.19;}
    #main .section03 p{font-size: 13px;font-weight: normal;line-height: 1.38;}
    #main .section03 .scroll-picture{margin-top:80px;}
    #main .section03 .scroll-picture .img-wrap .thumnail{width:65%;padding-top: 90%;}
    #main .section03 .scroll-picture .wrap2{top:0;margin-top:20px;}
    #main .section03 .scroll-picture .wrap3{margin-top:20px;text-align: left;}
    #main .section03 .scroll-picture h3{font-size:40px;}
    #main .section04{border-top:0;padding:0;}
    #main .section04 .simply-scroll{height:45px;}
    #main .section04 .simply-scroll .simply-scroll-clip{height:45px;}
    #main .section04 .simply-scroll .simply-scroll-list li{width:1170px;height:45px;}
    #main .section04 .simply-scroll .simply-scroll-clip #scroller5 li{width:1633px;}
    #main .section05{padding-bottom: 100px;}
    #main .section05 .simply-scroll{margin-top:80px;}
    #main .section05 .logo-scroll li{width:80px;height:40px;margin:0 40px;}
    #main .section05 .button-wrap{margin-top:80px;}
    #main .section03 h2 strong { width: 20%; }
}

/* mobile */
@media all and (max-width:768px) {
    #main .section02 .product-slide .slick-slide{margin:0;}
    #main .video-box { padding-top: 145%;}
    #main .safelycool-box { flex-direction: column;}
    #main .safelycool-box .left { padding: 70px 0;width: 100%;border-right:0; }
    #main .safelycool-box .left h3 { font-size: 30px; margin-bottom: 10px}
    #main .safelycool-box .left img { width: 55%}
    #main .safelycool-box .left span { font-size: 13px; margin-bottom: 60px }
    #main .safelycool-box .right { width: 100%; border-top:1px solid #D0D3DA }
    #main .safelycool-box .right ul li { border-bottom: 1px solid #D0D3DA}
    #main .safelycool-box .right ul li a{ font-size:18px; }
    #main .section03 h2 strong { width: 40%; }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-4-14 15:14:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
@-webkit-keyframes line1 {
    0% {
        width:0;
        opacity: 0;
    }
    50% {
        width:100%;
        opacity: 0.3;
    }
    100% {
        width:0;
        opacity: 0;
    }
}
@keyframes line1 {
    0% {
        width:0;
        opacity: 0;
    }
    50% {
        width:100%;
        opacity: 0.3;
    }
    100% {
        width:0;
        opacity: 0;
    }
}