@charset "utf-8";

/* index */
.banner{position: relative;}
.banner:before {content: '';  position: absolute; z-index: 6; width: 100%;  height:23%; top:0;  background: linear-gradient(180deg, rgba(110, 110, 110, .8), rgba(10, 37, 114, 0));} 
.banner .swiper-slide{ height:auto !important;}
.index-banner-swiper {position: relative; z-index:1; height:100%;}
.banner-slide {}
.banner-slide .txt{position: absolute; width:37.6%; top:25%; left:12.8%; z-index: 5555555533;}
.banner-slide .txt h1{font-size:3.8vw; color: #fff;margin: 0; background: rgba(17, 17, 17, .8);   padding: 0 2.2%; position: relative;  text-transform: uppercase; font-family: "merrock";}
.banner-slide .txt .line {width: 80px;height: 4px;background: #ef001e;margin: 10px 0;}
.banner-slide .txt h4{font-size:27px;color: #fff; opacity: 0.6; padding:10px 0 30px 0;margin:0;font-weight: normal;line-height: 30px;}
.banner-slide .txt.center {text-align: center;width:100%;top:20%;margin: 0;}
.banner-slide .txt.h26{ top:26%!important; } 
.banner-slide .txt.none {display: none;}
.banner-slide .txt.right {text-align: right;left: auto;right: 10%;}
.banner-slide .txt.right .line {float: right;clear: both;}
.banner-slide .txt.right .banner-btn a {display: inline-block;vertical-align: middle;float: none;text-align: right;margin-right:0px;margin-left: 15px;}
.banner-slide .img {text-align: center;}
.banner-slide .txt .img {text-align: left;}
.banner-btn {clear: both;}
.banner-btn a{display: block;float: left;margin-right: 15px;padding:15px 20px;font-size: 0;background: #ef001e;}
.banner-btn a span{color: #fff;font-size: 14px;display: inline-block;vertical-align: middle;margin-right: 10px;}
.banner-btn a i{display: inline-block;vertical-align: middle;width: 18px;height: 10px;background:url("../images/right4.png");}
.banner-btn a:hover {background:#E45904;}

.pcshow { display:block;}
.banner-slide .txt h1 {transform:translateY(200px);opacity:0;transition:all .3s; line-height:5vw;}
.banner-slide .txt h4 {transform:translateY(200px);opacity:0;transition:all 0.6s;}
.banner-slide .txt .line {transform:translateY(200px);opacity:0;transition:all 0.9s;}
.banner-slide .txt .banner-btn {transform:translateY(200px);opacity:0;transition:all 1.2s;}
.index-banner-swiper .swiper-slide-active .txt h4,.index-banner-swiper .swiper-slide-active .txt h1,.index-banner-swiper .swiper-slide-active .txt .line,.index-banner-swiper .swiper-slide-active .banner-btn{transform:translateY(0px);opacity:1;}
.screen-banner-swiper .screen-banner-slide .text{    left: 12.5%;}
.swiper-banner-pagination {bottom:130px;width: 100%; display: block;z-index: 90;}
.swiper-banner-pagination .swiper-pagination-bullet {width:60px;height:10px;margin:0 0 0 10px;border-radius: 0;opacity:1;background: none; position: relative;z-index: 11;outline: none;}
.swiper-banner-pagination .swiper-pagination-bullet::before {content: '';display: block;width: 100%;height: 2px;position: absolute;left: 0;top:5px;background: #fff;opacity: 0.3;}
.swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{opacity: 1;}
.swiper-banner-pagination .swiper-pagination-bullet::after {content: '';display: block;position: absolute;left:0;top:5px;width:0;height: 2px;background: #ef001e;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;z-index: 10;}
.swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {-webkit-animation: w100 4000ms 1;animation: w100 4000ms 1;}

@keyframes w100{0%{width: 0%;} 100%{width: 100%;}}

.index-scroll {position:absolute;left:1%;top:85%;z-index:70;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
.index-scroll h6{margin: 0;font-weight: normal;font-size: 0;position: relative;padding-bottom:7px;padding-left: 30px;}
.index-scroll h6::after {content: '';display: block;width: 100%;height: 1px;background: #fff;position: absolute;bottom: 0;left: 0;-webkit-animation: w100 3000ms infinite ease-in-out;animation: w100 3000ms infinite ease-in-out;}
.index-scroll h6 span{font-size: 12px;color: #fff;text-transform: uppercase;letter-spacing: 1px; margin-right: 10px;display: inline-block;vertical-align: middle;}
.index-scroll h6 i{width: 12px;height: 10px; background: url("../images/nd.png");display: inline-block;vertical-align: middle;-webkit-animation: op01 1000ms infinite ease-in-out;animation: op01 1000ms infinite ease-in-out;}
@keyframes op01{0%{opacity: 0;}100%{opacity: 1;}}


.pic {position: relative;overflow: hidden;background-position: center center;background-repeat: no-repeat;background-size: cover;}

.pcshow { display:block;}
.mbshow { display:none!important;}

@media screen and (max-width: 860px) {
.banner-slide .txt h1{ display:none;}
.header,.aside-top,.pcshow  {display: none!important;}
.mnav,.mbshow {display: block!important;}
.inside-pages .menu-toggle span.hamburger,.inside-pages .menu-toggle span.hamburger:after,.inside-pages .menu-toggle span.hamburger:before,.inside-pages .menu-toggle span.hamburger,.inside-pages .menu-toggle span.hamburger:after,.inside-pages .menu-toggle span.hamburger:before,.inside-pages .menu-toggle span.cross:before,.inside-pages .menu-toggle span.cross:after,.no-touch .menu-toggle span.cross:after,.no-touch .menu-toggle span.cross:before{background: #fff;}
.header-height,.product-detail .header-height {height:50px;}
.index-banner-swiper .swiper-slide {background: #000;}
.banner-slide .img img.mbshow {width: 100%!important;}
.banner-slide .txt h1 {font-size: 30px;}
.banner-slide .txt {width:90%;left: 5%;top:15%;margin-top:0px;}
.banner-btn a {margin-bottom: 15px;}
.title-style h2,.about-item .title-style h2 {font-size: 30px;line-height: 40px;}
.swiper-pagination{ display:none;}
.index-scroll{display:none;}
}