.banner{height:100vh;background:#fff}
.swiper-container.swiper1{height:100%}
.slide-bg1{background:url(../Images/home/banner1.png)no-repeat center;background-size:cover}
.slide-bg2{background:url(../Images/home/banner2.jpg)no-repeat center;background-size:cover}
.slide-bg3{background:url(../Images/home/banner3.jpg)no-repeat center;background-size:cover}
.slide-bg4{background:url(../Images/home/banner4.jpg)no-repeat center;background-size:cover}
.slide-bg {
    height: 100vh;
    width: 100%;
    transform: scale(1.05);
    transform: scale(1.05)
}
.swiper1 .swiper-slide{overflow:hidden;}
.slide-content{position:absolute;top:40%;left:17%;overflow:hidden;}
.slide-content .desc{background:#fff;color:#000;padding:1rem;font-weight:bold;font-size:3.75rem;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 {
    position: absolute;
    color: #fff;
    padding: 10px 1.3rem;
    cursor: pointer;
    border: 1px solid #fff;
    z-index: 10;
    font-size: 0.5rem;
    left: 50%;
    margin-left: -55px;
    transform: scale(0.9) translateY(100%);
    opacity: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    margin-top: 1rem;
    top: 100%;
}
.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.active>span{opacity:1;}
.section>.title{position:relative;padding:8rem 8.333%;background:#fff;z-index:5}
.title .engTitle {
    color: #f2f2f2;
    font-size: 4.5rem;
    text-transform: uppercase;
    line-height: 1;
    opacity: .7;
    text-align: center;
    font-family: 'Avenir LT 95 Black' !important;
}
.title .chTitle {
    color: red;
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-family: PingFang Heavy;
    overflow: hidden;
    line-height:1;
}
.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, 100%, 0) !important;
    transform: translate3d(0, 100%, 0) !important;
}
.wuyistar-show{padding:0 16%;position:relative;margin-bottom:13rem;}
.wuyistar-text {
    position: absolute;
    top: 78%;
    color: #fff;
    width: 83.334%;
    text-align: center;
}
.explore {
    position: absolute;
    color: #fff;
    top: 88%;
    border: 2px solid #fff;
    padding: 3px 2rem;
    left: 50%;
    margin-left: -5.25rem;
    z-index: 10;
    padding: 5px 2rem 5px 2.25rem;
    font-family: PingFang Heavy;
}
.video{position:relative;height:500px;overflow:hidden}
.video-play-btn, .video-pause-btn,.thirty-play-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;
}
.thirty-play-btn{
    width:7rem;
    display:none;
} 
.thirty-video{position:relative;height:100%;}
.video-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index:121;
    background: #000;
    display: none;
}
.close-btn {
    position: absolute;
    right: 6em;
    top: 9em;
    width: 3em;
}
.video-container video {
    width: 80%;
    margin: 5% 10%;
    height: 80%;
    outline:none;
    border:none;
}
.mountain-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid #fff;
    width: 7rem;
    line-height: 7rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.25rem;
    margin-top:-3.5rem;
    margin-left:-3.5rem;
    display:none;
}
.baigu-video:hover .thirty-play-btn {
    display: block;
}
.thirty-video:hover .thirty-play-btn{display:block;}
.product-top{position:relative;padding:0 1rem}
.product-top img{width:100%;}
.product-top .product-info {
    color: #fff;
    margin-top:6%;
    opacity:1
}
.product-info {
    margin-top: 10%;
    position: absolute;
    width: 100%;
    z-index:5;
    opacity:0;
}
.product-info>p{text-align:center}
.product-info .name{font-size: 2.5rem;font-family: PingFang Heavy;}
.product-info .type{margin: .25rem 0 1.5rem;}
.product-info .more-product{color: #ebbd7a;position: relative;margin-left: 50%;left: -2.5rem;}
.section-item .more-product{color: #ebbd7a;position: absolute;left:50%;margin-left:-35px;bottom:1rem}
.section-item h3 {
    font-weight: bold;
}
.more-product .arrow-right{width:9px;height:9px}
.product-recommend{padding: 0 1rem;}
.product-recommend::after{
    content:"";
    clear:both;
    display:block;
    height:0;
    width:0;
}
.product-item {
    margin: 1rem 1rem 0 0;
    background: #f6f6f6;
    width: calc((100% - 1rem)/2);
    float:left;
    position:relative;
}
.product-item>img{position:relative;z-index:3;width:100%;opacity:0;}
.product-bg {
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .5s ease-in-out;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    width: 100%;
}
.product-bg>img{width:100%;}
.product-item:hover .product-bg{opacity:1}
.product-item:hover .product-info{color:#fff}
.product-item:nth-child(2n){margin-right:0;}
.news-wrapper {
    width: 80%;
    margin: auto;
    position: relative;
    cursor: pointer;
}
.news-title {
    margin: 1.5rem 0 1rem;
    display: block;
    font-size: 1.25rem;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.news-date{color:#ccc}
.news-more{padding:5rem 0;}
.more-news {
    display: inline-block;
    border: 2px solid #ebbd7a;
    padding: 5px 0 5px 2.25rem;
    width:10rem;
    color: #ebbd7a;
    margin-left: 43%;
    font-family: PingFang Heavy;
}
.swiper-pagination-bullet{background: transparent;width:6rem;height:15px;opacity:.3;border-radius:unset}
.swiper-pagination-bullet span{width:6rem;height:2px;display:inline-block;background:#fff}
.swiper-pagination-bullet-active{opacity:1;}
.swiper-container-horizontal > .swiper-pagination-bullets{bottom:5%;}
.knowMore>span,.explore>span,.more-product>span,.more-news>span{vertical-align:middle}
.knowMore:hover .arrow-line,.explore:hover .arrow-line,.more-product:hover .arrow-line,.more-news:hover .arrow-line{width:20px}
.explore:hover{background:#fff;color:red}
.more-news:hover{background:#ebbd7a;color:#fff}
.explore .arrow-line{background:#e70310;}
.more-product .arrow-line{background:#ebbd7a}
.more-news .arrow-line{background:#fff}
.arrow-line {
    height: 2px;
    width: 0;
    display: inline-block;
    background: #fff;
    margin-right: -13px;
    margin-left:10px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.brand-show {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,25%);
    grid-template-rows: repeat(10,10%);
    line-height:0;
}
.brand-item{position:relative;z-index:11;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}
 .brand-item:nth-child(1) {
         grid-area: 1 / 1 / 5 / 3;
     background-image: url('../Images/home/brand1.jpg');
 }
 .brand-item:nth-child(2) {
     grid-area: 5 / 1 / 8 / 2;
     background-image: url('../Images/home/brand2.jpg')
 }
 .brand-item:nth-child(3) {
         grid-area: 8 / 1 / 11 / 2;
     background-image: url('../Images/home/brand3.jpg');
 }
 .brand-item:nth-child(4) {
         grid-area: 5 / 2 / 11 / 3;
     background-image: url('../Images/home/brand4.jpg');
 }
 .brand-item:nth-child(5) {
         grid-area: 1 / 3 / 11 / 5;
 }
.item-content {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 101;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    width: max-content;
}
.item-content .item-title{font-size:2.5rem;font-family: PingFang Heavy;}
.brand-item:hover .knowMore {
    opacity: 1;
    transform: scale(0.9) translateY(0%);
}
.brand-item:hover .cover{opacity:0.3}
.cover{opacity:0;position:absolute;width:100%;height:100%;background:#000;top:0;left:0}
.news-img{position:relative;}
.news .swiper-slide:hover .cover{opacity:0.3}
.news .swiper-slide:hover .news-title{text-decoration:underline}
.news-box {
    display: block;
    padding: 1rem;
}
.news .swiper-slide:hover .news-box{
    background:#f6f6f6
}
.swiper-button-next, .swiper-button-prev{background:none;height:27px;top:30%;border-bottom: 3px solid #ccc;border-right: 3px solid #ccc;}
.swiper-button-next {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: -50px;
}
.swiper-button-prev {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: -50px
}
.swiper-button-next:focus,.swiper-button-prev:focus{outline:none}
.video-play-btn:hover+.video-show>.cover,.video.active:hover .cover{opacity:0.3}
.video .hover-btn{display:none;}
.video-play-btn:hover .hover-btn{display:block}
.video-play-btn:hover .show-btn{display:none}
.show-video {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: auto;
    opacity: 0
}
.video-pause-btn {
    display:none;
}
.video.active:hover  .video-pause-btn{display:inline-block}
.baigu-video{height:100%;}
.news-img .picture {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:calc(27vw/2.3);
}
.section-nav {
    display: flex;
    justify-content: space-around;
    padding: 0 16%;
    margin-bottom:10rem
}
.section-item {
    max-width: max-content;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items:center;
    position: relative;
    padding-bottom: 4rem;
}
.section-item h3{
        font-weight: bold;
    margin-top: 1rem;
    font-size: 1.35rem;
}
.section-item p{margin-top:1rem;}
.section{position:relative}
.section-title {
    font-size: 2.5rem;
    position: absolute;
    left: 25%;
    top: 10rem;
    font-family: PingFang Heavy;
}
.cbrand {
    position: absolute;
    width: 65%;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}
.brand-item:hover .cbrand{transform: translate(-50%,-70%);}
.brand-item img{width:100%}
.video-show a{color:#fff;position:absolute;bottom:2%;right:1%}