﻿
:root{
    --fencer-theme-color: #1099d7;
    --swiper-pagination-color: #1099d7;
}


/* Fancer */
.fancer-banner .my-pagination span{width: .3rem;height: .04rem;border-radius: .05rem;background-color: #fff;}
.fancer-banner .my-pagination{position: absolute;bottom: .5rem;left: 0;width: 100%;z-index: 2;}
.fancer-banner .mouse{position: absolute;bottom: .3rem;width: 100%;z-index: 2;}
.fancer-banner .mouse img{width: .2rem;opacity: .5;}
.fancer-banner .swiper-slide a{display: block;position: relative;z-index: 1;}
.fancer-banner .swiper-slide a:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.1) url(../images/play.png) no-repeat center/.7rem;}

.fancer-list-content{padding-top: 1rem;background: url(../images/suzhou.jpg) no-repeat center/100% auto;}
.title-box{margin-bottom: .8rem;}
.title-box h2{padding: 0 .4rem;background: url(../images/title-left-bg.png) no-repeat left center/.4rem 100% ,url(../images/title-right-bg.png) no-repeat right center/.4rem 100%;}
.title-box h2 a{padding: 0 .3rem;height: .4rem;background-color: var(--fencer-theme-color);color: #fff;}
.title-box h2 a img{width: .15rem;margin-right: .1rem;}

.fancer-list-first .list .item{width: 33.333%;padding: 0 .3rem;}
.fancer-list-first .list{margin: 0 -.3rem;}
.fancer-list-first .list .item figure span{padding-bottom: 56%;}
.fancer-list-first .list .item figcaption{margin: .25rem 0;}
.fancer-list-first .list .item figure{margin-bottom: .25rem;}
.fancer-list-first .list .fencer-info .desc{margin-top: .1rem;}
.fadeInUp{opacity: 0;will-change: transform;}
.scaleEl{transform: scale(.5); will-change: transform;}
.container-wrapper{width: 100vw;overflow-x: hidden;}

.fencer-series{padding-top: 1rem;}
.fencer-series .tab-menu a{line-height: .7rem;padding: 0 .3rem;display: block;border-bottom: solid 2px transparent;position: relative;z-index: 2;}
.fencer-series .tab-menu:after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #eeeeee;}
.over-title h2{text-transform: uppercase;margin-bottom: .4rem;}
.fencer-series .tab-menu a.active{font-size: .18rem;font-weight: 700;color: var(--fencer-theme-color);border-color: var(--fencer-theme-color);}
.fencer-series .tab-menu a:hover{color: var(--fencer-theme-color);}
.fencer-series .swiper{overflow: visible;}
.fencer-series .swiper figure{height: 4.8rem;}
.fencer-series .swiper figure img{transform: scale(.7);}
.fencer-series .swiper .swiper-slide-active figure img{transform: scale(1);}
.link-detail a{width: 1.6rem;height: .4rem;background-color: var(--fencer-theme-color);color: #fff;}
.link-detail a:hover{box-shadow: 2px 2px 5px rgba(16,153,215,.5);color: #fff;}
.tab-swiper .tab-info .desc{margin: .15rem 0 .3rem;}
.tab-swiper .tab-info{width: 2.8rem;margin: 0 auto;}

.fencer-info .desc{margin-top: .2rem;opacity: 0;will-change: transform;}
.fencer-info .desc *,.fencer-info h2 *{will-change: transform;}
.fencer-info h2{line-height: 1.3;opacity: 0;will-change: transform;text-transform: uppercase;}
.fencer-info.not-uppercase h2{text-transform: initial;}
.integrated-first .fencer-info{max-width: 9.5rem;margin: 0 auto;padding: 1rem 0 .6rem;}
.integrated-first .swiper{overflow: visible;width: 7.5rem;margin: 0 auto;}
.integrated-first .swiper img{height: 5rem;object-fit: cover;}
.fencer-blue-arrow .swiper-btn{width: .5rem;height: .5rem;border-radius: 50%;background-color: #fff;opacity: 0;}
.fencer-blue-arrow .swiper-btn:after{font-size: .2rem;}
.fencer-blue-arrow .swiper-button-prev{left: -.8rem;}
.fencer-blue-arrow .swiper-button-next{right: -.8rem;}
.fencer-blue-arrow:hover .swiper-button-next{right: -1.5rem;}
.fencer-blue-arrow:hover .swiper-button-prev{left: -1.5rem;}
.fencer-blue-arrow:hover .swiper-btn{opacity: 1;}
.fencer-blue-arrow .my-pagination{position: static;margin-top: .2rem;display: none;width: 100vw;}

.integrated-second .txt figure,
.integrated-second .fencer-info{width: 50%;}
.integrated-second .fencer-info{padding-left: 1.2rem;padding-top: .5rem;}
.integrated-second .cover-under .left{width: 69%;}
.integrated-second .cover-under .right{width: 23%;}
.integrated-second .cover-under{margin-top: -1.1rem;}
.integrated-second {padding: 1rem 0;}

.integrated-third{padding: 1rem 0;}
.integrated-third figure img{width: 48%;}
.integrated-third figure{text-align: right;}
.integrated-third .fencer-info{max-width: 6.5rem;}
.integrated-third:after{content: "";position: absolute;top: 0;left: 0;width: 75%;height: 100%;background-color: #f6f6f6;}

.integrated-fourth .list{display: grid;grid-template-columns: repeat(2,1fr);grid-gap: .12rem;}
.integrated-fourth .list .cover-txt{padding: .4rem;}
.integrated-fourth .list .item:not(:first-child) .desc{padding-right: 1.2rem;}
.integrated-fourth .list .item:not(:first-child) h2{text-transform: initial;font-size: .24rem;}
.integrated-fourth .list .item:first-child{grid-column: 1/3;}
.integrated-fourth .list .item:first-child .cover-txt{left: initial;right: 0;max-width: 8rem;align-items: center;padding-right: 2.4rem;}

.integrated-fifth .first-section figure,
.integrated-fifth .first-section .fencer-info{width: 50%;}
.integrated-fifth .first-section .fencer-info{padding-left: 1rem;}
.integrated-fifth{padding: 1rem 0 0 0;}
.integrated-fifth .second-section{margin: .6rem 0 0 0;}
.integrated-fifth .second-section .list{display: grid;grid-template-columns: repeat(2,1fr);grid-gap: .3rem;}
.integrated-fifth .second-section .item{padding: .4rem .5rem;background-color: #f8f8f8;}
.integrated-fifth .second-section .item h2{text-transform: initial;}
.integrated-fifth .second-section .item figure{height: .9rem;}
.integrated-fifth .second-section .item figure img{height: 65%;}
.scroll-imgs figure{display: inline-block;width: 8rem;margin-right: .2rem;}
.scroll-imgs figure img{height: 4.5rem;object-fit: cover;}
.scroll-imgs{font-size: 0;white-space: nowrap;margin-top: .6rem;}

.integrated-sixth .under-box{padding: 1rem 0;background-color: #f8f8f8;}
.integrated-sixth .fencer-info h3{margin-top: .4rem;}
.integrated-sixth .fencer-info .desc{max-width: 10rem;margin: .2rem auto 0;}
.integrated-sixth .third-section{padding: 1rem 0;}

.integrated-sixth .list{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: .2rem;margin: .5rem 0 .3rem;}
.integrated-sixth .list .item{padding: .5rem;height: 1.6rem;background-image: linear-gradient(to right , #fff, transparent 90%);}
.integrated-sixth .list figure{width: .5rem;margin-right: .4rem;}
.integrated-sixth .list .txt{flex: 1 0 0;}

.fancer-banner .cover-txt{position: absolute;bottom: 1.3rem;left: 0;width: 100%;z-index: 2;}
.fancer-banner .cover-txt .desc{margin-top: .15rem;}

.detail-first{padding: 1rem 0;background-color: #f8f8f8;}
.detail-first .aguments .list .item{width: 33.333%;border-right: solid 1px #999999;}
.detail-first .aguments .list .item:last-child{border: 0;}
.detail-first .aguments .link-detail a img{margin-right: .1rem;}
.detail-first .aguments .link-detail{margin: .6rem 0 .8rem;}
.third-swiper .swiper-slide .item span{padding-bottom: 57%;display: block;}
.third-swiper .swiper-slide .item figcaption{margin: .2rem 0 .15rem;}

.with-arrow-swiper .swiper-pagination{position: static;margin-top: .2rem;display: none;width: 100%;}
.with-arrow-swiper .swiper-button{width: .5rem;height: .5rem;border-radius: 50%;background-color: #f0f0f0;}
.with-arrow-swiper .swiper-button:after{font-size: .2rem;color: #4b4b4b;}
.with-arrow-swiper .swiper-button-prev{left: -1.2rem;}
.with-arrow-swiper .swiper-button-next{right: -1.2rem;}
.with-arrow-swiper .swiper-button:hover{background-color: var(--fencer-theme-color);}
.with-arrow-swiper .swiper-button:hover:after{color: #fff;}

.detail-second{padding: 1rem 0;}
.detail-second .list .row-cell{height: 1.3rem;border-top: solid 1px #eee;}
.detail-second .list .item:last-child .row-cell{border-bottom: solid 1px #eee;}
.detail-second .list{padding: 1rem 0;}
.detail-second .list .item.active{background-color: #f8f8f8;}
.detail-second .list .item strong{padding-left: .4rem;position: relative;display: block;max-width: 6.3rem;}
.detail-second .list .item strong:before{content: attr(data-index);position: absolute;left: 0;top: 0;color: var(--fencer-theme-color);}
.detail-second .pics .cover-txt{padding: .4rem;}
.detail-second .list-pic .item{position: absolute;right: 0;top: 0;width: 100%;display: none;}
.detail-second .list-pic {width: 7.6rem;z-index: 6;margin-top: -5.5rem;}

.detail-third .fencer-info{max-width: 6rem;padding-bottom: .8rem;}

.integrated-third.detail-fourth figure{text-align: left;}
.integrated-third.detail-fourth:after{left: initial;right: 0;}
.detail-fourth .under-logo{position: absolute;bottom: -.5rem;left: 0;width: 100%;padding: 0 1.2rem;z-index: 5;}
.integrated-third.detail-fourth figure img{width: 50%;}
.integrated-third.detail-fourth .fencer-info{max-width: 6.1rem;margin-top: -1.2rem;}

.detail-fifth .other-details{margin-top: 1rem;}
.detail-fifth .list{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: .4rem;margin-top: .4rem;}
.detail-fifth{padding: 1rem 0;}

.detail-sixth{padding: 1rem 0;background-color: #f8f8f8;}
.detail-sixth .txt{width: 50%;padding-left: 1rem;}
.detail-sixth figure{position: absolute;left: 0;top: 0;height: 100%;width: 50%;}
.detail-sixth figure img{object-fit: cover;}
.detail-sixth .txt dd{padding: .15rem 0;}
.detail-sixth .txt dd span{width: 50%;padding-right: .3rem;}
.detail-sixth .txt dl{margin: .4rem 0;border-top: solid 1px #eee;}
.detail-sixth .txt dd{border-bottom: solid 1px #eee;}

.download-btn a{width: 2rem;height: .4rem;border: solid 1px #333;}
.download-btn a img{margin-right: .1rem;}
.download-btn a:hover{background-color: #333;color: #fff;}
.download-btn a:hover img{display: none;}
.download-btn a:hover img.hide{display: block;}

.detail-seventh{padding: 1rem 0;}
.detail-seventh .third-swiper .swiper-slide .item span{padding-bottom: 65%;}
.detail-seventh .third-swiper{margin-top: .4rem;}

body#main-scrollbar{
    width: auto;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
}
body .scrollbar-track{opacity: 1;}


@media (max-width: 1200px) {
    .with-arrow-swiper .swiper-pagination,
    .fencer-blue-arrow .my-pagination{display: flex;justify-content: center;}
    .swiper .swiper-pagination .swiper-pagination-bullet-active{background-color: var(--fencer-theme-color);}
    .integrated-first .swiper img{height: 4rem;}
    .integrated-second .fencer-info {
        padding-left: .5rem;
        padding-top: 0;
        padding-bottom: 1rem;
    }
    .integrated-third:after,
    .detail-second .list{display: none;}
    .integrated-third .cover-txt{position: static;}
    .integrated-third{background-color: #f8f8f8;}
    .integrated-third .fencer-info{max-width: 100%;}
    .integrated-third figure img{width: 100%;}
    .integrated-third figure{padding: 0 2%;margin-bottom: .3rem;}
    .integrated-fourth .list .item:first-child .cover-txt{max-width: 6rem;padding-right: .5rem;}
    .integrated-fourth .list .item:not(:first-child) .desc{padding-right: 0;}
    .integrated-fifth .second-section .list{grid-template-columns: repeat(1,1fr);}
    .scroll-imgs figure{width: 5rem;}
    .scroll-imgs figure img{height: 3.5rem;}
    .fancer-banner .cover-txt{bottom: .8rem;}
    .fancer-banner .cover-txt h2{font-size: .4rem;}
    .detail-second .list-pic{width: 100%;margin-top: 0;display: grid;grid-template-columns: repeat(2,1fr);grid-gap: .3rem;margin-top: .3rem;}
    .detail-second .list-pic .item{position: relative;display: block !important;}
    .integrated-third.detail-fourth figure{position: absolute;}
    .integrated-third.detail-fourth .fencer-info{max-width: 5.5rem;margin-top: .5rem;padding-bottom: 1rem;}
}


@media (max-width: 800px) {
    .fancer-banner .swiper-slide a:after{background-size: .4rem;}
    .fancer-list-content,
    .fencer-series,.integrated-first .fencer-info,
    .integrated-fifth{padding-top: .5rem;}
    .title-box,.over-title h2{margin-bottom: .3rem;}
    .fancer-list-first .list .item{width: 50%;padding: 0 .1rem;margin-top: .2rem;}
    .fancer-list-first .list{margin: 0 -.1rem;margin-top: -.2rem;}
    .fencer-series .tab-menu a{line-height: .5rem;}
    .fencer-series .swiper figure{height: 3rem;}
    .integrated-first .fencer-info{padding-bottom: .3rem;}
    .integrated-second,
    .integrated-third,
    .integrated-sixth .third-section,
    .integrated-sixth .under-box,
    .detail-first,
    .detail-second,.detail-sixth,.detail-seventh{padding: .5rem 0;}
    .integrated-second .txt figure, .integrated-second .fencer-info,
    .integrated-second .cover-under .right,
    .integrated-second .cover-under .left,
    .integrated-fifth .first-section figure, .integrated-fifth .first-section .fencer-info,
    .detail-first .aguments .list .item,.integrated-third.detail-fourth figure img,
    .detail-sixth figure,.detail-sixth .txt{width: 100%;}
    .integrated-second .fencer-info{padding-left: 0;padding-bottom: 0;margin-top: .3rem;}
    .integrated-second .cover-under,
    .integrated-second .cover-under .right,
    .integrated-fifth .first-section .fencer-info,
    .detail-third .fencer-info,.scroll-imgs,.detail-fifth .list,.detail-sixth .info{margin-top: .3rem;}
    .integrated-fourth .list .item .cover-txt{position: static;color: #333;padding: .2rem 0;display: block;height: auto;}
    .integrated-fourth .list .item:first-child .cover-txt{max-width: 100%;}
    .integrated-fourth .list{padding: .5rem 2%;}
    .integrated-fifth .first-section .fencer-info{padding-left: 0;}
    .integrated-sixth .list{grid-template-columns: repeat(1,1fr);}
    .detail-first .aguments .list .item{border: 0;margin-bottom: .2rem;}
    .detail-first .aguments .list .item:last-child{margin-bottom: 0;}
    .detail-first .aguments .link-detail{margin: .3rem 0 .5rem;}
    .detail-second .pics .cover-txt{position: static;margin-top: .2rem;height: auto;padding: 0;}
    .detail-second .pics .cover-txt .fencer-info,
     .detail-third .cover-txt .fencer-info{color: #333;}
    .detail-second .list-pic{grid-template-columns: repeat(1,1fr);}
    .detail-third .cover-txt,
    .integrated-third.detail-fourth figure,
    .detail-fourth .under-logo,.detail-sixth figure,.detail-sixth figure img{position: static;}
    .detail-third .fencer-info{max-width: 100%;padding-bottom: .5rem;width: 100%;}
    .integrated-third.detail-fourth .fencer-info{padding-bottom: .5rem;max-width: 100%;width: 100%;margin-top: 0;}
    .detail-fourth .under-logo{padding: 0 .5rem;}
    .detail-fifth .other-details{margin-top: .5rem;}
    .detail-fifth .list{grid-template-columns: repeat(2,1fr);grid-gap: .2rem;}
    .detail-fifth{padding-bottom: .5rem !important;}
    .detail-sixth .txt{padding-left: 0;}
    .download-btn{display: flex;justify-content: center;}
}


@media (max-width: 640px) {
    .fencer-series .swiper figure{height: auto;padding: .3rem .2rem;}
    .fencer-series .swiper figure img{transform: scale(1);}
    .fancer-list-first .list .item{width: 100%;}
    .fencer-info h2.font40{font-size: .3rem;}
    .fancer-banner .my-pagination{bottom: .2rem;}
    .integrated-fifth .second-section .item{padding: .25rem;}
}