﻿.swiper-slide{height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat}
.swiper-pagination-bullet{background: transparent;width:4rem;height:10px;opacity:.3;border-radius:unset;line-height:10px}
.swiper-pagination-bullet span{width:4rem;height:1px;display:inline-block;background:#fff}
.swiper-pagination-bullet-active{opacity:1;}
.swiper-container-horizontal > .swiper-pagination-bullets{bottom:5%;}
.slide-content{position:absolute;top:55%;left:0;overflow:hidden;}
.slide-content .desc{background:#fff;color:#000;padding:1rem;font-weight:bold;font-size:2.5rem;line-height:1;display:inline-block;position:relative;z-index:10;transform:translateX(-100.1%);transition:all .3s cubic-bezier(.86,0,.07,1);}
.slide-content .desc.active{transform:translateX(0)}
.slide-content .desc.active::after{width:0}
.slide-content .desc::after{content:"";position:absolute;top:0;height:100%;width:100%;background:#fff;z-index:1;right:0;transition:width .5s cubic-bezier(.8,0,.1,1);transition-delay:.3s;}
.slide-content p.desc::after{transition-delay:0.9s}
.slide-content p.desc{margin-top:-1rem;transition-delay:0.6s;}
.knowMore{display:inline-block;color:#fff;padding:10px 1.3rem;cursor:pointer;position:relative;z-index:10;font-size:1.2rem}
.knowMore::after{content:"";position:absolute;top:0;height:100%;width:0%;background:red;z-index:-1;left:0;transition:width .5s cubic-bezier(.86,0,.07,1);transition-delay:1s;}
.knowMore.active::after{width:100%;}
.knowMore>span{opacity:0;transition:opacity .2s linear;transition-delay:1.5s;}
.knowMore.active>span{opacity:1;}
.arrow-right {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.section{background:#fff}
.section>.title{position:relative;padding:6rem 0;background:#fff;z-index:5}
.title .engTitle {
    color: #f2f2f2;
    font-size:3rem;
    text-transform: uppercase;
    line-height: 1;
    opacity: .7;
    text-align: center;
    font-family: 'Avenir LT 95 Black' !important;
}
.title .chTitle {
    color: red;
    font-size:2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-family: PingFang Heavy;
    overflow: hidden;
    line-height:1;
    width:max-content;
}
.title .chTitle span:after{
    content:"";
    height:100%;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    background:#e70310;
}
.title .chTitle span{
    position: relative;
    display: inline-block;
    overflow:hidden;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-transition: -webkit-transform 0.7s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
    transition: -webkit-transform 0.7s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
    transition: transform 0.7s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
    transition: transform 0.7s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99),-webkit-transform 0.7s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
}
.title .chTitle span:after {
    -webkit-transition: -webkit-transform 0.6s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
    transition: -webkit-transform 0.6s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
    transition:transform 0.6s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
    transition:transform 0.6s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99),-webkit-transform 0.6s 0s cubic-bezier(0.36, 0.01, 0.29, 0.99);
}
.fadeIn-title .chTitle span{
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0,0, 0) !important;
}
.fadeIn-title .chTitle span:after {
    -webkit-transition-delay: 0.4s !important;
    transition-delay: 0.4s !important;
    -webkit-transform: translate3d(0, 101%, 0) !important;
    transform: translate3d(0, 101%, 0) !important;
}
.wuyistar-show {
    width: 86%;
    margin: auto;
    line-height: 0;
    font-size: 0;
}
.wuyistar-show img{width:100%;}
.wuyistar-show a{position:relative;display:inline-block;width:100%}
.wuyistar-show a:not(:first-child){width: calc((100% - .5rem)/2);}
.wuyistar-show a:nth-child(2n){margin: .5rem .5rem 0 0;}
.wuyistar-show p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;letter-spacing:2px;}
.video{position:relative;margin-top:5rem;}
.video-play-btn, .video-pause-btn {
    color: #fff;
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    margin-left: -2.5rem;
    margin-top: -2rem;
    z-index:10;
}
.play-btn {
    display: inline-block;
    width: 4rem;
    margin-bottom: .5rem;
}
.video .hover-btn{display:none;}
.video-pause-btn {
    display:none;
}
.product{width:86%;margin:auto}
.product img{width:100%}
.product .item{position:relative;margin-bottom:1.5rem}
.product .product-info{position:absolute;bottom:10%;color:#fff;text-align:center;width:100%}
.product-info .name{font-size:2rem;font-family: 'PingFang Heavy';margin-bottom:1rem}
.product-info .more-product{color: #ebbd7a;position: relative;font-size:1.1rem}
.showMore{display:block;text-align:center;color:#ebbd7a;margin-top:2rem;font-size:1.25rem}
.showMore .arrow-right{ 
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-bottom: 3px;
    margin-left: 6px;
    color:#ebbd7a
}
.news-wrapper{width:86%;margin:auto}
.news-wrapper .item{margin-bottom:1.5rem;display:block;color:#000}
.picture{width:100%;height:calc(86vw / 2.35);background-size:cover;background-position:left center;background-repeat:no-repeat}
.news-content{background:#f6f6f6;padding:1rem 2rem}
.news-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-size:1.35rem}
.news-date{color:#c2c2c2;margin-top:.5rem}
.more-news{color:#eabc78;text-align:center;display:block;margin:2rem 0 3rem;font-size:1.25rem}
.more-products{display:none}
a>span{vertical-align:middle}
.video-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 109;
    background: #000;
    display: none;
}
.close-btn {
    position: absolute;
    right: 1rem;
    top: 2rem;
    width: 3rem;
}
.video-container video {
    width: 90%;
    margin: 5%;
    height: auto;
    margin-top: 20%;
}
.section-nav {
    width: 86%;
    margin: 5rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.section-item {
    font-size: 1rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    margin-top:2rem;
    width:50%
}
.section-item p{
    font-size:0.8rem
}
.section-item h3 {
    font-family: PingFang Heavy;
    margin: 1rem 0 0.5rem;
}
    .section-item img {
        max-width: 10rem;
        max-height: 8rem;
    }