.banner{position:relative;width:100%;height:100vh;overflow:hidden;}
.swiper1{height:100vh;}
.swiper2{position:absolute;top:0;width:50%; height: 50%;top:25%;left:25%;}
.page {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    /*transition: width 1s cubic-bezier(1,.15,.3,1.01),height 1s cubic-bezier(1,.15,.3,1.01);*/
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    z-index: 10;
    overflow: hidden;
}
.page.test {
    width: 50%;
    height: 50vh;
}
.swiper1 .swiper-slide,.swiper2 .swiper-slide,.bg{background-repeat:no-repeat;background-position:center;height:100%;width:100%;overflow:hidden;}
.swiper1 .swiper-slide,.bg{background-size:cover;}
.page .item{position:absolute;top:0;opacity:0;height:100%;width:100%;}
.page .item.active{opacity:1}
.swiper2 .bg {
    height: 100vh;
    width: 100vw;
    position: fixed;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.page .bg{height:100%;width:100%;}
.swiper2 .bg{position:absolute;}
.swiper1 .swiper-slide:nth-child(1) .bg,.swiper1 .swiper-slide:nth-child(1) {background-image: url('../../../../Images/brand/index/brand-bg1.jpg'); }
.swiper1 .swiper-slide:nth-child(2) .bg,.swiper1 .swiper-slide:nth-child(2){background-image: url('../../../../Images/brand/index/brand-bg2.jpg'); }
.swiper1 .swiper-slide:nth-child(3) .bg,.swiper1 .swiper-slide:nth-child(3){background-image: url('../../../../Images/brand/index/brand-bg3.jpg'); }
.swiper1 .swiper-slide:nth-child(4) .bg,.swiper1 .swiper-slide:nth-child(4){background-image: url('../../../../Images/brand/index/brand-bg4.jpg'); }
.swiper1 .swiper-slide:nth-child(5) .bg,.swiper1 .swiper-slide:nth-child(5){background-image: url('../../../../Images/brand/index/brand-bg5.jpg'); }
.swiper2 .swiper-slide:nth-child(1) .bg,.item:nth-child(1) .bg {background-image: url('../../../../Images/brand/index/brand1.jpg'); }
.swiper2 .swiper-slide:nth-child(2) .bg,.item:nth-child(2) .bg {background-image: url('../../../../Images/brand/index/brand2.jpg'); }
.swiper2 .swiper-slide:nth-child(3) .bg,.item:nth-child(3) .bg {background-image: url('../../../../Images/brand/index/brand3.jpg'); }
.swiper2 .swiper-slide:nth-child(4) .bg,.item:nth-child(4) .bg {background-image: url('../../../../Images/brand/index/brand4.jpg'); }
.swiper2 .swiper-slide:nth-child(5) .bg,.item:nth-child(5) .bg {background-image: url('../../../../Images/brand/index/brand5.jpg'); }
.content-wrap{
    color: #fff;
    position: absolute;
    top:55%;
    left: 20%;
    z-index: 100;
}
.swiper_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slide-content p{font-size:3rem;width:max-content;}
.slide-content {position:absolute;top:0;}
    .slide-content.active {
        opacity: 1;
        position: relative;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
.slide-content.active p{opacity:1}
.banner .swiper-pagination-bullet-active{background:#fff}
.banner .swiper-pagination-bullet{height:50px;width:1px}
.banner .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{margin:0;background:#fff}
.banner .swiper-container-vertical > .swiper-pagination-bullets{right:15%;}
.slide-content>p{opacity:0}
.slide-content .desc {
    margin-top: 3rem;
    display: none;
    line-height: 2;
    font-size: 1.25rem;
}
.more-explore {
    cursor: pointer;
    position: absolute;
    left: 20%;
    z-index: 102;
    top: 70%;
    padding-right:1.25rem;
    padding-bottom:.5rem;
}
.more-explore > span{
    vertical-align: middle
}
.more-explore >p{
    position: absolute;
    top: 0;
    width: 10px;
    line-height: 0;
    text-align: center;
    right: 3px;
}
.more-explore:hover .arrow-line {
    height: 20px
}
.explore:hover {
    background: #fff;
    color: red
}
.more-explore .arrow-line {
    background: #fff
}
.arrow-line {
    height: 0;
    width: 2px;
    display: inline-block;
    background: #fff;
    margin-bottom: -9px;
    transition: height 0.3s ease-in-out;
    -webkit-transition: height 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);
}
.arrow-down {
    position: absolute;
    width: 2px;
    z-index: 10;
    left: 50%;
    height: 60px;
    border-radius: 10px;
    bottom: 0;
    background: rgba(255,255,255,.3);
    margin-left: -1px;
    overflow:hidden;
}
.down-line {
    display: inline-block;
    height: 60px;
    width: 2px;
    background: #fff;
    animation: arrow 1.5s ease-in-out infinite;
}
@keyframes arrow {
    0% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }

    to {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }
}

.fade-up {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    opacity: 0;
}
.fade-down {
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    opacity: 0;
}
.process-bar {
    width: 0%;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: 0;
    z-index: 29;
}
.swiper2 .swiper-wrapper {
    /*transition-timing-function: cubic-bezier(0.165,0.84,0.44,1)*/
    transition-timing-function: cubic-bezier(0.1, 0.4, 0.1, 1);
    -webkit-transition-timing-function: cubic-bezier(0.1, 0.4, 0.1, 1);
}
/*::-webkit-scrollbar {
    width: 0;
    height: 1px
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
    background: rgba(0,0,0,.2)
}*/
.cursor {
    width: 61px;
    height: 61px;
    position: absolute;
    top: 0;
    left: 0;
    margin: -30px 0 0 -30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    z-index:10;
}
.cursor-title {
    color: white;
    text-align: center;
    font-size: 11px;
    letter-spacing: 2px;
    position: relative;
}
.cursor-border {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #fff;
}
.cursor-box {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    z-index: 999;
    display:none;
}