.about {
    position: relative;
    overflow: hidden
}

.about .s1 {
    position: relative
}

.about .s1 .nav-wrap {
    position: absolute;
    top: 190px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    left: 50%;
    transform: translate(-50%, -50%)
}

.about .s1 .nav-wrap .text-wrap {
    position: absolute;
    left: 0;
    top: 150px
}

.about .s1 .nav-wrap .text-wrap h1 {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    margin-bottom: 1rem
}

.about .s1 .nav-wrap .text-wrap .des {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3)
}

.about .s2 {
    background: #eceff1
}

.about .s2 .container {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.about .s2 .container .top {
    text-align: left
}

.about .s2 .container .top h2 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 0
}

.about .s2 .container .top .small-tit {
    font-size: 16px;
    font-weight: 400;
    color: #999;
    line-height: 22px;
    margin-bottom: 2rem
}

.about .s2 .container .top .content-wrap {
    padding-left: 3.5%
}

.about .s2 .container .top .content-wrap h3 {
    font-size: 24px;
    font-weight: 400;
    color: #424242;
    margin-bottom: 1rem
}

.about .s2 .container .top .content-wrap .con_des {
    font-size: 22px;
    font-weight: 400;
    color: #363636;
    margin-bottom: 3.5rem
}

.about .s2 .container .top .content-wrap .row .item .content {
    width: 93%
}

.about .s2 .container .top .content-wrap .row .item .content .tit {
    font-size: 20px;
    font-weight: 400;
    color: #333;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccc
}

.about .s2 .container .top .content-wrap .row .item .content .de {
    padding-top: 1rem;
    font-size: 16px;
    font-weight: 400;
    color: #666
}

.about .s2 .container .top .content-wrap .row .item .mid {
    margin: 0 auto
}

.about .s2 .container .top .content-wrap .row .item .right {
    margin-right: 0;
    margin-left: auto
}

.about .s3 {
    position: relative;
    overflow: hidden
}

.about .s3 .text-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.about .s3 .text-wrap h1 {
    font-size: 40px;
    font-weight: 700;
    color: #fff
}

.about .s3 .text-wrap .des {
    font-size: 16px;
    font-weight: 400;
    color: #e6e6e6;
    margin-bottom: 3rem
}

.about .s3 .text-wrap #history .main-wrap {
    max-width: 1335px;
    width: 100%;
    margin: auto
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-pagination-bullets {
    white-space: nowrap;
    top: 180px;
    line-height: 10px;
    transition: 700ms;
    white-space: nowrap;
    width: auto;
    height: 10px
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-pagination-bullet {
    background-image: url("/assets/img/wy/small_circle.png");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    opacity: 1;
    width: 27px;
    height: 34px;
    border-radius: 0;
    line-height: 10px;
    vertical-align: super;
    outline: none
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-pagination-bullet span {
    position: absolute;
    width: 100px;
    text-align: center;
    color: #fff;
    margin-left: -54px;
    margin-top: -40px
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-pagination-bullet-active {
    background-image: url("/assets/img/wy/big_circle.png");
    background-repeat: no-repeat;
    background-color: transparent;
    top: calc(50% - 2px);
    width: 57px;
    position: relative;
    height: 57px;
    vertical-align: super
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-pagination-bullet-active span {
    display: none
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide .date {
    font-size: 72px;
    font-weight: 400;
    color: #fff;
    margin-top: 4.5rem;
    margin-bottom: 5.5rem;
    opacity: 0
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide span {
    display: block;
    width: 100%;
    text-align: center;
    position: static;
    transition: 700ms
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide .detail {
    color: #000;
    position: static;
    font-size: 24px;
    opacity: 0
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide h2 {
    width: 75%;
    background: rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    padding: 30px;
    text-align: left;
    font-size: 24px;
    font-weight: 300;
    color: #fff
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide .de {
    font-size: 24px;
    font-family: OpenSans-Regular;
    font-weight: 400;
    color: #fff
}

.about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .long-line {
    height: 1px;
    border-bottom: 1px solid #fff;
    width: 100%;
    position: absolute;
    top: 210px;
    left: 0
}

.about .s3 .swiper-button {
    top: 58%;
    background-size: 100%
}

.about .s3 .prev3 {
    background-image: url("/assets/img/wy/left1.png");
    left: 85px
}

.about .s3 .next3 {
    background-image: url("/assets/img/wy/right1.png");
    right: 85px
}

.about .s3 .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    background-image: url("/assets/img/wy/left2.png")
}

.about .s3 .swiper-button-next.swiper-button-disabled {
    background-image: url("/assets/img/wy/right2.png");
    opacity: 1
}

.about .s4 {
    position: relative
}

.about .s4 .container {
    max-width: 1200px
}

.about .s4 .text {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%)
}

.about .s4 .text .top-wrap h2 {
    text-transform: uppercase;
    font-size: 40px;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3)
}

.about .s4 .text .top-wrap .des {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3)
}

.about .s4 .text .top-wrap .viewmore-btn {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
}
.about .s4 .text .top-wrap .viewmore-btn a{
    color: #fff;
}

.about .s4 .text .top-wrap .viewmore-btn .bofang span {
    margin-left: 1rem;
    margin-right: 1rem;
   
}

.about .s4 .text .top-wrap .viewmore-btn .bofang:hover {
    cursor: pointer
}

.about .s4 .text .top-wrap .viewmore-btn a span {
    margin-left: 1rem;
    margin-right: 1rem;
   
}
.about .s4 .text .top-wrap .viewmore-btn a:hover{
    color: #777;
}

.about .s4 .text .six-wrap {
    margin-top: 7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    bottom: 16%;
    overflow: hidden
}

.about .s4 .text .six-wrap .item {
    text-align: center
}

.about .s4 .text .six-wrap .item .content h3 {
    margin-bottom: 0;
    font-size: 47px;
    font-weight: 400;
    color: #fff
}

.about .s4 .text .six-wrap .item .content .des {
    font-size: 16px;
    font-weight: 400;
    color: #fff
}

.about .s4 .text .ab_foo {
    margin-top: 1rem;
    font-size: 20px;
    font-weight: 300;
    color: #fff
}

.about .s5 {
    background: #eceff1;
    position: relative;
    overflow: hidden
}

.about .s5 .container {
    padding-top: 4rem;
    padding-bottom: 8rem;
    position: relative
}

.about .s5 .container .tit-wrap {
    text-align: center
}

.about .s5 .container .tit-wrap h2 {
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 0
}

.about .s5 .container .tit-wrap .des {
    font-size: 16px;
    font-weight: 400;
    color: #999;
    margin-bottom: 2rem
}

.about .s5 .container #swiper2 .swiper-slide .inner-box .imgbox {
    width: 100%;
    margin-bottom: 1.5rem;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    position: relative
}

.about .s5 .container #swiper2 .swiper-slide .inner-box .imgbox img {
    width: 100%
}

.about .s5 .container #swiper2 .swiper-slide .inner-box .imgbox::after {
    content: "";
    background-image: url(/assets/img/wy/shadow.png);
    background-size: 83%;
    position: absolute;
    width: 119%;
    height: 37px;
    background-repeat: no-repeat;
    left: 0;
    bottom: -28px;
    z-index: -1
}

.about .s5 .container #swiper2 .swiper-slide .inner-box .text-wrap h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase
}

.about .s5 .container #swiper2 .swiper-slide .inner-box .text-wrap .de {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.about .s5 .container .swiper-pagination {
    left: 50%;
    transform: translate(-50%);
    bottom: 4rem;
    outline: none
}

.about .s5 .container .swiper-pagination .swiper-pagination-bullet {
    margin-right: 37px;
    border-radius: 0;
    opacity: 1;
    width: 13px;
    height: 13px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    outline: none;
    vertical-align: -webkit-baseline-middle
}

.about .s5 .container .swiper-pagination .swiper-pagination-bullet-active {
    width: 33px;
    height: 33px;
    background: #1565C0;
    border: 6px solid transparent;
    box-shadow: 0px 0px 0px 0.1px #1565C0;
    border-radius: 50%;
    padding: 4px;
    background-clip: content-box
}

.about .s5 .swiper-button {
    top: 50%;
    background-size: 100%
}

.about .s5 .prev2 {
    background-image: url("/assets/img/wy/left3.png");
    left: 85px
}

.about .s5 .next2 {
    background-image: url("/assets/img/wy/right3.png");
    right: 85px
}

.about .s5 .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    background-image: url("/assets/img/wy/left2.png")
}

.about .s5 .swiper-button-next.swiper-button-disabled {
    background-image: url("/assets/img/wy/right2.png");
    opacity: 1
}

.about .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0
}

/* 1280  1366 1440 */
@media screen and (max-width: 1500px) and (min-width: 1200px) {
    .about .s1 .nav-wrap {
        top: 160px;
    }
}

@media screen and (max-width: 1700px) and (min-width: 768px) {
    .about .s1 .nav-wrap .text-wrap h1 {
        margin-bottom: 0rem
    }

    .about .s3 .next3,
    .about .s5 .next2 {
        right: 20px
    }

    .about .s3 .prev3,
    .about .s5 .prev2 {
        left: 20px
    }

    .bgImg {
        width: 100%;
        height: 600px;
        object-fit: cover
    }

    .s3 .bgImg,
    .s4 .bgImg {
        height: 750px
    }

    .about .s3 .text-wrap .des {
        margin-bottom: 2.5rem
    }
}

@media screen and (max-width: 1540px) and (min-width: 1400px) {
    .about .s5 .swiper-button {
        top: 44%
    }

    .about .s4 .text .six-wrap .item .content h3 {
        font-size: 50px
    }
}

@media screen and (max-width: 1399px) and (min-width: 0px) {
    .about .s3 .text-wrap #history .main-wrap {
        max-width: 1000px
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide h2 {
        font-size: 20px
    }

    .about .s4 .text .six-wrap .item .content h3 {
        font-size: 45px
    }
}

@media screen and (max-width: 1300px) and (min-width: 0px) {

    .about .s3 .prev3,
    .about .s5 .prev2 {
        left: 10px
    }

    .about .s3 .next3,
    .about .s5 .next2 {
        right: 10px
    }
}

@media screen and (max-width: 1199px) and (min-width: 0) {
    .s1 .bgImg {
        height: 400px;
        
      box-sizing: border-box;
    }

    .about .s1 .nav-wrap {
        top: 135px
    }

    .about .s1 .nav-wrap .text-wrap h1 {
        font-size: 32px
    }

    .about .s1 .nav-wrap .text-wrap {
        top: 75px
    }

    .about .s2 .container .top h2 {
        font-size: 28px
    }

    .about .s2 .container .top .content-wrap h3 {
        font-size: 20px
    }

    .about .s2 .container .top .content-wrap .con_des {
        font-size: 16px;
        margin-bottom: 2.5rem
    }

    .about .s2 .container .top .content-wrap .row .item .content .tit {
        font-size: 16px
    }

    .about .s4 .text .top-wrap h2 {
        margin-bottom: 0rem
    }

    .about .s4 .text .top-wrap .des {
        font-size: 18px
    }

    .about .s1 .nav-wrap .text-wrap .des {
        font-size: 18px
    }

    .about .s3 .text-wrap #history .main-wrap {
        max-width: 900px
    }

    .about .s3 .swiper-button {
        top: 57%
    }

    .about .s1 .nav-wrap .text-wrap {
        top: 80px
    }
}

@media screen and (max-width: 999px) and (min-width: 0) {
    .about .s1 .nav-wrap {
        top: 150px
    }

    .about .s1 .nav-wrap .text-wrap {
        top: 100px
    }

    .about .s1 .nav-wrap .text-wrap .des {
        width: 70%
    }

    .about .s2 .container {
        padding-top: 4rem;
        padding-bottom: 4rem
    }

    .about .s2 .container .top .content-wrap {
        padding-left: 0
    }

    .about .s2 .container .top .small-tit {
        margin-bottom: 1rem
    }

    .about .s2 .container .top .content-wrap .row .item .content .tit img {
        display: block
    }

    .about .s2 .container .top .content-wrap .con_des {
        margin-bottom: 1.5rem
    }

    .about .s3 .text-wrap #history .main-wrap {
        max-width: 700px
    }

    .about .s5 .container .tit-wrap h2,
    .about .s4 .text .top-wrap h2,
    .about .s3 .text-wrap h1 {
        font-size: 28px
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide h2 {
        font-size: 16px
    }

    .about .s4 .text .six-wrap .item .content h3 {
        font-size: 30px
    }

    .about .s5 .next2 {
        right: 5px;
        background-size: 50%
    }

    .about .s5 .prev2 {
        left: 5px;
        background-size: 50%
    }

    .about .s3 .text-wrap .des {
        margin-bottom: 0
    }

    .about .s4 .text .top-wrap .viewmore-btn {
        font-size: 18px
    }

    .about .s3 .swiper-button {
        top: 55%
    }
}

@media screen and (max-width: 767px) and (min-width: 0) {
   
    .about .s1 .nav-wrap .text-wrap {
        position: relative
    }

    .about .s1 {
        padding-top: 60px
    }

    .s1 .bgImg {
        height: 300px
    }

    .about .s1 .nav-wrap .text-wrap .des {
        font-size: 16px;
        width: 100%
    }

    .about .s1 .nav-wrap .text-wrap h1 {
        font-size: 24px
    }

    .about .s1 .nav-wrap .text-wrap {
        top: 120px
    }

    .about .s2 .container {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .about .s2 .container .top h2 {
        font-size: 24px
    }

    .about .s2 .container .top .content-wrap h3 {
        font-size: 16px
    }

    .about .s2 .container .top .content-wrap .row .item .content .tit img {
        display: unset
    }

    .about .s2 .container .top .content-wrap .row .item .content {
        width: 100%
    }

    .about .s2 .container .top .content-wrap .row .item .content .de {
        padding-top: 0.5rem;
        margin-bottom: 1.5rem
    }

    .about .s2 .container .top .content-wrap .row .item .content .tit {
        padding-bottom: 0.5rem
    }

    .s3 .bgImg,
    .s4 .bgImg {
        height: 680px
    }

    .about .s5 .container .swiper-pagination {
        display: none
    }

    .about .s5 .container {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .s5 .swiper-container {
        width: 90%
    }

    .about .s5 .container .tit-wrap h2,
    .about .s4 .text .top-wrap h2,
    .about .s3 .text-wrap h1 {
        font-size: 24px
    }

    .about .s3 .text-wrap #history .main-wrap {
        max-width: 300px
    }

    .about .s4 .text .six-wrap .item .content h3 {
        font-size: 24px
    }

    .about .s4 .text .ab_foo {
        font-size: 14px
    }

    .about .s4 .text .top-wrap .des {
        font-size: 14px
    }

    .about .s4 .text .top-wrap .viewmore-btn {
        font-size: 16px
    }

    .about .s4 .text .top-wrap .viewmore-btn a span img {
        height: 20px
    }

    .about .s4 .text .top-wrap .viewmore-btn .bofang span {
        margin-right: 0
    }

    .about .s4 .text .six-wrap .item img {
        height: 24px
    }

    .about .s4 .text .six-wrap .item {
        width: 33.33%;
        margin-top: 2rem
    }

    .about .s4 .text .six-wrap {
        margin-top: 4rem
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide .date {
        font-size: 50px;
        margin-top: 6.5rem;
        margin-bottom: 4.5rem
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide h2 {
        width: 100%;
        padding: 20px
    }

    #swiper-history {
        width: 265px
    }

    .about .s3 .swiper-button {
        background-size: 50%
    }

    .about .s4 .text .six-wrap .item .content .des {
        font-size: 14px;
        line-height: 1.2
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .long-line {
        top: 180px
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-pagination-bullets {
        top: 150px
    }

    .about .s3 .text-wrap #history .main-wrap #swiper-history .swiper-container .swiper-wrapper .swiper-slide .date {
        margin-top: 4.5rem;
        margin-bottom: 4.5rem
    }

    .about .s3 .swiper-button {
        top: 52%
    }
    
}