﻿.banner {
    position: relative;
}
.page {
    width: 100%;
    height: 100vh;
}
.page .item{position:absolute;top:0;height:100%;width:100%;}
.item .bg {
    background-image: url('../../../../Images/brand/index/brand2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.content-wrap {
    color: #fff;
    position: absolute;
    top: 55%;
    left: 20%;
    z-index: 100;
}
.slide-content p{font-size:3rem;width:max-content;}
.slide-content {position:absolute;top:0;width: max-content;}
.desc {
     margin-top: 1rem;
    line-height: 2;
    font-size: 1.25rem;
    display:inline-block
}
.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%);
    }
}
.company {
    padding: 15rem 0 25rem;
    background: #fff;
}
.company-left {
    width: 50%;
    padding-right: 8.3333%;
    display: inline-block;
    text-align: right;
}
.company-left .wuyistar{    
    font-size:2.5rem;
    font-weight:bold;
    color: red;
    display: inline-block;
    text-align: left;
    margin-bottom: 13rem;
}
.company-right {
    width: 50%;
    float: right;
    padding-right: 16.666%;
}
.company-info{margin-bottom:15rem}
.company-info .info-item{margin-bottom:2rem;}
.company-img {
    position: absolute;
    width: 33.333%;
    bottom: 10rem;
}
.history {
    background: #fafafa;
    width: 100%;
    top: 0;
    height: 100vh;
}
.section-title {
    font-size: 2.5rem;
    font-weight:900;
    margin-bottom: 1rem;
}
.history-date {
    font-size: 2.5rem;
    color: red;
    display: inline-block;
    position: relative;
    height: 93%;
    line-height: 32rem;
    z-index: 1;
    margin-top: 7rem;
    font-family: "AlibabaSans-Heavy";
}
.history-date::after{
           content: "";
    position: absolute;
    height: 1rem;
    width: 1rem;
    background: red;
    border-radius: 50%;
    left: 38%;
    margin-left: -.5rem;
    top: 44%;
}
.history-date::before{
     content: "";
    height: 100%;
    display: inline-block;
    border-left: 1px dashed #ccc;
    position: absolute;
    left: 38%;
    z-index: -1;
}
.history-date .year{display:inline-block;padding-top:20rem}
.history-content {
    position: absolute;
    top: 55%;
    width: 68%;
    left: 12.5%;
}
.history-title {
    font-size: 1.5rem;
    font-family: PingFang Heavy;
    margin-bottom: 1.5rem;
}
.history .content-text .part{margin-bottom:1rem}
.history-wrap {
    padding: 0 8.3333% 0 25%;
    height: 100vh;
}
.history-img {
    position: absolute;
    top: 16%;
    right: 19.5%;
    text-align: right;
}
.history-img img{height:23rem}
.history-2001{width:40rem;}
.history-show3{height:50%;bottom:0}
.honour{padding:10rem 0;background:#fff}
.honour .section-title{    
    padding-left: 25%;
    margin-bottom: 5rem;
}
.honour-img {
    position: relative;
    padding: 0 21.3333%;
    text-align: center;
    line-height: 0;
}
.left-img div, .right-img div {
    position: absolute;
    height: calc(50% - 1px);
    width: max-content;
}
.left-img img,.right-img img{height:100%;}
.left-img1,.right-img1{top:0}
.left-img2,.right-img2{bottom:0}
.left-img div {
    right: calc(59.5% + 1px);
}
.right-img div {
    left: calc(59.5% + 1px);
}
.center-img{width:32.5%;margin:auto;position:relative}
.center-img img{width:100%;}
.honour-img .mask{position:absolute;opacity:0.5;display:none;top:0;left:0;height:100%;width:100%;}
.honour-img .title {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
    top: 47%;
    z-index: 101
}
.show-honour:hover .title{opacity:1}
.show-honour:hover .mask{display:block;}
.idea {
    line-height: 0;
}
.idea .section-title{    
    position: absolute;
    left: 25%;
    z-index: 2;
    color: #fff;
    top: 27%;
}
.idea .swiper-slide img{width:100%;}
.idea .idea-content{    
    position: absolute;
    left: 25%;
    top: 23%;
    color: #fff;
}
.idea .idea-title{    
        font-size: 2.5rem;
    font-family: PingFang Heavy;
    margin-bottom: 5rem;
}
.idea .idea-desc{font-size:1.25rem}
.swiper-idea .swiper-button-next, .swiper-idea .swiper-button-prev {
    top: 65%;
    width: 10px;
    height: 15px;
    background-size: 10px 15px;
}
.swiper-idea .swiper-button-next, .swiper-idea .swiper-container-rtl .swiper-button-prev{
    right:auto;
    left:28%;
}
.swiper-idea .swiper-button-prev, .swiper-idea .swiper-container-rtl .swiper-button-next{
    left:25%;
}
.company-info.fix{
    position:fixed;
    top:15rem;
    width:33.333%;
}
.history .swiper-pagination-bullet-active{
    background:#000;
}
.swiper-pagination-bullet{
    border-radius:unset;
    height:100px;
    width:2px;
}
.history .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{margin:0}
.history >.section-title{position:absolute;left:25%;top:9rem}
.cover{
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    z-index:100;
    display:none;
}
.history-img .show2004 {
    width: 28rem;
    height:auto;
}
.section{position:relative}
.circle {
    position: absolute;
    height: 2rem;
    width: 2rem;
    background: red;
    border-radius: 50%;
    left: 38%;
    margin-top: -.5rem;
    margin-left: -1rem;
    top: 44%;
    opacity: .5;
}
.fixed{position:fixed;z-index:10;top:0;}
.history-wrap > .swiper-scrollbar{    
    right: 16.9%;
    height: 60%;
    top: 20%;
}
.history-wrap .history-part{position:relative;padding-bottom:10rem}
.history-wrap .swiper-slide {padding: 9rem 0 5rem 0;}
.history-wrap > .swiper-pagination-bullets {
    right: 8.333%;
}