﻿footer.footer-wrap{display:none}
.swiper-bg {height:100vh}
.banner-wrap{overflow:hidden}
.swiper-bg .swiper-slide{background-repeat:no-repeat;background-size:cover;background-position:center;height:100vh;width:100%;}
.swiper-bg .banner-bg1 {
    background-image: url('../../../../Images/products/index/banner-bg1.jpg');
}
.swiper-bg .banner-bg2 {
    background-image: url('../../../../Images/products/index/banner-bg2.jpg');
}
.swiper-bg .banner-bg3 {
    background-image: url('../../../../Images/products/index/banner-bg4.jpg');
}
.swiper-bg .banner-bg4 {
    background-image: url('../../../../Images/products/index/banner-bg3.jpg');
}
.swiper-bg .banner-bg5 {
    background-image: url('../../../../Images/products/index/banner-bg5.jpg');
}
.swiper-bg .banner-bg6 {
    background-image: url('../../../../Images/products/index/banner-bg6.jpg');
}
.swiper-bg .banner-bg7 {
    background-image: url('../../../../Images/products/index/banner-bg7.jpg');
}
.swiper-container{width:100%;overflow:unset}
.banner-bg {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
}
.series {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 100vh;
}
.more-explore {
    position: absolute;
    left: -.75rem;
    z-index: 30;
    background: red;
    color: #fff;
    padding: 5px 1.3rem;
    cursor: pointer;
    bottom: -2rem;
    font-size: .5rem;
    transform: scale(0.75);
}
.more-explore > span{
    vertical-align: middle
}
.more-explore:hover .arrow-line {
    width: 20px
}
.explore:hover {
    background: #fff;
    color: red
}
.more-explore .arrow-line {
    background: #fff
}
.arrow-line {
    height: 2px;
    width: 0;
    display: inline-block;
    background: #fff;
    margin-right: -11px;
    margin-left: 10px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.swiper-series .swiper-slide{
    transition: 500ms;
    -webkit-transition: 500ms;
}
.swiper-series .swiper-slide-active {
    transform: scale(1.65);
    -webkit-transform: scale(1.65);
}
.swiper-series .swiper-slide:not(.swiper-slide-active){
    transform: translateX(-10%) scale(0.5);
    -webkit-transform: translateX(-10%) scale(0.5);
}
.swiper-series .swiper-slide.swiper-slide-active ~ .swiper-slide{
    transform: translateX(10%) scale(0.5);
    -webkit-transform: translateX(10%) scale(0.5);
}
.series-name {
    position: absolute;
    background: #fff;
    color: #000;
    padding: 1rem 1rem;
    font-family: PingFang Heavy;
    left: -1rem;
    font-size: 2rem;
    bottom: -1rem;
    line-height: 1;
}
.banner .mask {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    align-items: center;
    justify-content: center;
    display:none;
}
.banner .mask p{
    color: #fff;
    font-size: 2.25rem;
}
.swiper-series .swiper-slide:not(.swiper-slide-active):hover .mask {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
}
.swiper-series .swiper-slide:not(.swiper-slide-active):hover{transform:translateX(0) scale(0.5);-webkit-transform:translateX(0) scale(0.5)}
.swiper-series .swiper-slide:not(.swiper-slide-active) .series-name, .swiper-series .swiper-slide:not(.swiper-slide-active) .more-explore{opacity:0}
.swiper-series .swiper-slide-active .series-name, .swiper-series .swiper-slide-active .more-explore{opacity:1}
.swiper-series .swiper-slide .series-name, .swiper-series .swiper-slide .more-explore{transition:500ms;-webkit-transition:500ms;}
.swiper-series .swiper-slide-active{z-index:10}