@charset "utf-8";
/* ===================首页样式========================== */
.Container-wrapper{margin-top: 0;}
.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section{height:auto!important}
.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell,.fp-responsive .fp-auto-height-responsive.fp-section{height:auto!important}
.btn{display:flex;width:195px;height:54px;align-items:center;justify-content:space-between;background:#e7142d;color:#fff;border-bottom-right-radius:30px;font-size:16px;padding:0 22px 0 26px;position: relative;overflow: hidden;z-index: 1}
.btn:after{content: '';position: absolute;left: 0;top: 0;width: 0;background: #bd1529;transition: all .4s ease;height: 100%;z-index: -1}
.btn:hover{border-radius: 0}
.btn:hover:after{width: 100%}
.btn i{display:block;background:url(../images/common/solid-line.jpg) no-repeat center/100%;width:21px;height:2px}

/* banner */
.banner{position:relative;overflow:hidden;}
.banner,.banner .swiper-container,.banner-bg{height:100%;transition: all 5s linear;transform: scale(1);}
.swiper-slide-active .banner-bg{transform: scale(1.1);}
.banner-bg-mb{display:none}
.banner-cont{width:100%;height:100%;position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:center;color:#fff;transition:all 1.5s ease;opacity:0;transform:translate3d(0,80px,0)}
.banner-mix{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1}
.banner-mix li{position: absolute;left: 0;right: 0;width: 100%;height: 100%}
.banner-mix li.active{z-index: 999}
.banner-mix li.active .banner-cont{opacity: 1;transform:translate3d(0,0,0);transition: all 1s ease .5s;}
.banner-mix li.toLeft .banner-cont{animation: toLeft 1s ease;}
@keyframes toLeft{0%{opacity: 1;transform:translate3d(0,0,0);}99.9999%{opacity: 0;transform:translate3d(-800px,0,0);}100%{opacity: 0;transform:translate3d(0,0,0);}}
.banner-cont h1{font-size:58px;font-weight:700;text-transform:uppercase}
.banner-cont h1 span{color:#e7142d}
.banner-cont p{font-size:32px;line-height:38px}
.banner-btn{margin-top:60px}
.banner-pagin{width:100%;height:100%;position:absolute;left:0;top:0}
.banner-pagin .container-max{height:100%;position: relative}
.banner-pagin .contain{position:relative;height:100%}
.banner-nav{position:absolute;left:0;bottom:96px;display:flex}
.banner .swiper-pagination{display:flex;position:static}
.banner .swiper-pagination-bullet{width:12px;height:12px;background:0 0;border:2px solid rgba(255,255,255,.3);opacity:1}
.banner .swiper-pagination-bullet:not(:first-child){margin-left: 20px}
.banner .swiper-pagination-bullet-active{background:#e7142d;border-color:#e7142d}
.banner .scroll-bar{z-index:2;position:absolute;bottom:96px;right:40px;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;animation:scroll 1.2s infinite}
.banner .scroll-bar span{writing-mode:vertical-lr;writing-mode:tb-lr;white-space:nowrap;padding-bottom:10px}
.banner-pagin a{z-index:2;margin-left:20px}
.banner-pagin a i{z-index:2;display:block;width:12px;height:12px;background:url(../images/index/stop.svg) no-repeat center/100%}
.banner-pagin a.active i{background:url(../images/index/start.svg) no-repeat center/100%}
@keyframes scroll { 0% {transform:translate(0, 0);} 50% {transform:translate(0, 10px);} 100% {transform:translate(0, 0);} }
.main-visual-cover{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1111}
.main-visual-cover span{position:absolute;top:0;left:0;width:25%;height:100%;background-color:#333;transition:transform .7s cubic-bezier(0,0,.39,.9);transform-origin:left top}
.main-visual-cover span:nth-child(2){left:25%}
.main-visual-cover span:nth-child(3){left:50%}
.main-visual-cover span:nth-child(4){left:75%}


/* intro */
.intro{display:flex;height:100%}
.intro-lft{display:flex;align-items:center;justify-content:center;width:50%;overflow:hidden;position:relative;padding: 0 40px}
.intro-lft:after,.intro-lft:before{content:'';position:absolute;width:475px;height:475px;background:url(../images/index/intro-lft.svg) no-repeat center;z-index:-1;transform: scale(0);opacity: 0;transition: all 2s ease-out}
.intro-lft:after{top:-90px;left:-90px;transform-origin: left top}
.intro-lft:before{bottom:-90px;right:-90px;transform-origin: right bottom}
.intro-inner{max-width:578px;text-align:center}
.intro-inner h2{font-size:50px;line-height:56px;color:#222;font-weight:700}
.intro-inner .tip{font-size:18px;line-height:56px;color:#222;font-weight:700}
.intro-inner .timer{font-size:140px;line-height:1;color:#e7142d;font-weight:700;margin-bottom:50px}
.intro-inner p{font-size:16px;line-height:28px;color:#666}
.intro-btn{margin-top:50px;display:flex;justify-content:center}
.intro-rgt{width:50%;position: relative}
.PC.fp-viewing-intro h2{animation: to-upB 1.5s ease both}
.PC.fp-viewing-intro .tip{animation: to-upB 1.5s ease both .2s}
.PC.fp-viewing-intro .timer{animation: to-upB 1.5s ease both .4s}
.PC.fp-viewing-intro p{animation: to-upB 1.5s ease both .6s}
.PC.fp-viewing-intro .intro-btn{animation: to-upB 1.5s ease both .8s}
.fp-viewing-intro .intro-lft:after,.fp-viewing-intro .intro-lft:before{transform: scale(1);opacity: 1}

#loading-wrapper{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10002;}
.PC.fp-viewing-intro #loading-wrapper .loading-el{position:absolute;width:calc(100% / 5);height:calc(100% / 5);z-index:10002;background:#1c2437;animation: loading 2s ease both}
#loading-wrapper #loading-1{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-2{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-3{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-4{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-5{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-6{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-7{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-8{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-9{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-10{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-11{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-12{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-13{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-14{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-15{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-16{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-17{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-18{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-19{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-20{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-21{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-22{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-23{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-24{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-25{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-26{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-27{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-28{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-29{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-30{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-31{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-32{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-33{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-34{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-35{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-36{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-37{left:calc(100% / 6 * 6);bottom:calc(100% / 6 * 0)}

@keyframes loading { 0%{width: 100%;height: 100%;opacity: 1} 10%{width: 20%;height: 20%;opacity: .8} 100%{width: 0;height: 0;opacity: 0} }


/* prod */
.prod-list{position:relative;height:100%}
.prod-front{display:flex;height:100%}
.prod-item{width:33.333%;position:relative;color:#fff;overflow:hidden;display: flex;align-items: center}
.prod-bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;transition:all 1s cubic-bezier(.23,1,.32,1);transform:translateX(0);background-repeat:no-repeat;background-size:cover;background-position:center;}
.prod-item.active .prod-bg{transform:translateX(-100%)}
.prod-item h2{font-size:24px;font-weight:700;margin:40px 0 60px;text-transform:uppercase}
.prod-cont{position:absolute;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;transition: transform .4s ease}
.prod-cont-animate{width: 100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;transition: transform .4s ease}
.prod-icon{display:flex;align-items:flex-end;justify-content:center;width:55px;height:55px;position:relative}
.prod-icon:after{content:'';width:36px;height:36px;background:#e7142d;position:absolute;right:-8px;bottom:-10px;border-radius:50%;z-index:-1;transition: all .6s ease}
.prod-back{position:absolute;left:0;top:0;width:100%;height:100%}
.prod-back>div{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;text-align:center;transition:all 1.5s cubic-bezier(.23,1,.32,1);background-repeat:no-repeat;background-size:cover;visibility: hidden;opacity: 0}
.prod-back>div:after{content:'';width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,.5)}
.prod-back>div.active{opacity:1;visibility:visible}
.prod-btn{font-size:16px}
.prod-btn span{display:flex;justify-content:space-between;align-items:flex-end;position:relative;line-height: 1}
.prod-btn a{display: flex;width: 160px;height: 40px;align-items: center;justify-content: center;border-bottom: 1px solid #fff;position: relative;overflow: hidden}
.prod-btn a:after{content: '';width: 100%;height: 0;border: 1px solid #fff;position: absolute;bottom: -1px;left: 0;opacity: 0}
.prod-btn a:before{content: '';width: 0;height: 100%;position: absolute;top:0;left: 0;opacity: 0;background: #e7142d}
.prod-btn a:hover:after,.prod-item:hover .prod-btn a:after{height: 100%;opacity: 1;border-color: #e7142d;transition: all .3s ease}
.prod-btn a:hover:before,.prod-item:hover .prod-btn a:before{width: 100%;opacity: 1;transition: all .4s ease;transition-delay: .2s}
.prod-item:hover .prod-cont-animate{transform: translateY(-20px)}
.prod-item:hover .prod-icon:after{width: 80px;height: 80px;right: 50%;bottom: 50%;transform: translate(50%,50%)}
.prod-item .prod-icon img{transition: all .6s ease}
.prod-item:hover .prod-icon img{transform: scale(.8)}


/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900) */
}

@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .intro-lft:after, .intro-lft:before{width: 350px;height: 350px}
    .banner-nav, .banner .scroll-bar{bottom: 70px;}
}

@media all and (max-width:1439px) {
    /* 1360 */
}

@media all and (max-width:1359px) {
    /* 1280 */
}

@media all and (max-width:1279px) {
    /* 1152 × (700) */
}

@media all and (max-width:1151px) {
    /* 1024 */
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .banner-pagin .contain{width: 100%}
    .banner-nav{bottom: 30px}
    .banner .scroll-bar{bottom: 30px;right: 0}
    .banner-cont{padding-bottom: 60px;transition: none}
    .banner-cont h1{font-size: 60px;margin-bottom: 16px;}
    .banner-cont p{font-size: 30px;line-height: 36px;}
    .banner-btn,.intro-btn{margin-top: 40px}
    .btn{width: 150px;height: 45px;font-size: 14px}
    .intro-lft,.intro-rgt{width: 100%;height: 50%}
    .intro{flex-wrap: wrap}
    .intro-inner .timer{font-size: 90px;margin-bottom: 20px}
    .intro-inner h2{font-size: 40px;line-height: 1}
    .intro-inner .tip{font-size: 16px;line-height: 32px}
    .intro-inner p{font-size: 14px}
    .prod-item{width: 100%;height: 33.33%}
    .prod-front{flex-wrap: wrap}
    .prod-item h2{font-size: 20px;margin: 20px 0 30px}
    .prod-item.active .prod-bg{transform:translateY(-100%)}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .banner-bg-mb{display:block}
    .banner-bg-pc{display:none}
    .banner .scroll-bar span{display: none}
    .banner-cont h1{font-size: 34px;margin-bottom: 12px;}
    .banner-cont p{font-size: 20px;line-height: 26px}
    .banner-btn{margin-top: 30px}
    .intro-lft{padding: 60px 0 20px}
    .intro-inner .timer{font-size: 44px;margin-bottom: 10px}
    .intro-inner p{font-size: 13px;line-height: 18px;padding: 0 4%;}
    .intro-inner .tip{font-size: 15px;line-height: 30px}
    .prod-item h2{font-size: 14px;margin: 16px 0 10px}
    .prod-icon{width: 45px;height: 45px;align-items: center}
    .prod-icon img{max-width: 90%;max-height: 90%}
    .prod-item:hover .prod-icon:after{width: 65px;height: 65px}
    .intro-lft:after, .intro-lft:before{width: 200px;height: 200px}
    .intro-lft:before{bottom: -60px;right: -60px}
    .intro-lft:after{top: -60px;left: -60px}
    /* #section0,#section0 .fp-tableCell{height:400px !important} */
    .intro-btn {margin-top: 18px;}
    .intro-inner h2 {font-size: 36px;}
    .prod-btn a {width: 132px;height: 36px;}
    .prod-cont-animate {margin-top: 24px;}
    .intro-lft{height: 60%;}
    .intro-rgt{height: 40%;}
}