/*--公共--*/
body{font-family:"微软雅黑";font-size:12px;margin:0px;padding:0px;color:#333333;height:auto;clear:both;}
img{border:0px;}
a{ text-decoration:none !important; color:#333333; outline:none; cursor:pointer;}
a:hover{ background-repeat:no-repeat;text-decoration: none; color:#116ac8;}
.clearfl:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfl{*zoom:1;}
*{-webkit-appearance:none;}
body{transition: all .3s linear;-moz-transition: all .3s linear;-webkit-transition: all .3s linear;-o-transition: all .3s linear;  -ms-transition: all .3s linear;left: 0px;position: relative;}


/*--头部--*/
.headerbox{ padding:0px;}
.header{ position:relative; height:65px; padding:0px 15px;}
.header a.logo{ display:block; float:left; margin-top:20px; position:relative;}
.header a.logo img{ height:28px; display:block;}
.header a.logo span{ display:block; position:absolute; left:0px; z-index:9; width:0%; top:0px; transition:all 1s ease;-webkit-transition:all 1s ease; overflow:hidden;}
.header a.logo:hover span{ width:100%;}

.header ul.navlist{ position:absolute; left:50%; top:50%; min-width:500px; transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); display:none;}
.header ul.navlist li{ float:left;padding:0px 30px; position:relative;}
.header ul.navlist li a{ font-size:16px; color:#e2100f; padding:29px 0px; font-weight:bold; line-height:25px; display:block; position:relative;}
.header ul.navlist li a:after{ content:""; display:block; bottom:0px; width:0px; left:0px; position:absolute; transition:all 1s ease;-webkit-transition:all 1s ease; height:2px; background:#116ac8;}
.headright{ display:none; float:right; padding-top:32px;}
.headright dt{ float:left; font-size:16px;height:19px; line-height:19px;font-family:calibri,Arial; background:url(../images/icon.png) no-repeat; padding:0px 10px 0px 25px; border-right:1px solid #dddddd;}
.headright dd{ float:left;width:29px; height:19px; background:url(../images/icon01.png) no-repeat right center; padding-left:10px; cursor:pointer; position:relative;}
.headright a.userlogin{ float:left; display:block; margin-left:10px; width:19px; height:19px; background:url(../images/icon65.png) no-repeat;}
.searchheadbtn{ display:block; width:19px; height:19px; background:none; border:none; outline:none;}
.headright dd label{ display:block; position:absolute; max-width:none; right:22px; top:-1px; margin:0px; width:0px; border-radius:20px; background:#E8E8E8;overflow:hidden; transition:all .5s ease;-webkit-transition:all .5s ease;}
.headright dd label input{ display:block; width:200px; padding:2px 10px; background:none; font-weight:normal; outline:none;}
.headright dd:hover label{ width:200px;}

.header ul.navlist li:hover a:after{ width:100%;}
.header ul.navlist li:hover a{ color:#e2100f}
.Mnavbtn{ position:relative; float:right; width:25px;cursor:pointer; padding-top:20px;}
.Mnavbtn span{ height:3px; display:block; margin-top:5px;background:#c80000}

.banner{width:100%; position:relative; overflow:hidden; display:none;}
.banner ul li{width:100%; position:relative; overflow:hidden; float:left;opacity:0}
.banner ul li img.bigimg{ width:100%;}
.banner ul li div.videobox{ position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow:hidden; z-index:9;}
.banner ul li video{ position:relative;width:100%;}
.banner ul li div.bannertext dl{ padding:0px 15px;}
.banner ul li div.bannertext h3{top:30px; opacity:0; position:relative;
	font-size:35px;line-height:55px; padding-bottom:15px; 
	font-family:"Adobe 黑体 Std"; font-weight:normal;
	transition:all .5s ease 1.2s;
	color: #d0d0d0;
	-webkit-transition:all .5s ease 1.2s;
}
.banner ul li div.bannertext h4{top:30px; opacity:0; 
	position:relative;color:#b2b3b2; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:18px; line-height:24px;
	transition:all .5s ease 1.4s;
	-webkit-transition:all .5s ease 1.4s;
	font-weight: normal;
}
.banner ul li div.bannertext p.more{padding-top:30px;top:30px; opacity:0; position:relative;transition:all .5s ease 1.6s;-webkit-transition:all .5s ease 1.6s;}
.banner ul li div.bannertext p.more a{ display:inline-block; background-image:url(../images/icon02.png);
 background-color:#116ac8;background-repeat:no-repeat; 
 background-position:88% center;border:1px solid #116ac8; 
 width:195px; height:43px; line-height:43px; 
 padding-left:22px; font-size:20px; color:#fff; transition:all .6s ease;text-transform: uppercase;
 -moz-transition:all .6s ease;-ms-transition:all .6s ease;
 -webkit-transition:all .6s ease;-o-transition:all .6s ease; 
 font-family:Arial, Helvetica, sans-serif; font-weight:normal;}
.banner ul li div.bannertext p.more a:hover{background-position:85% center;padding-left:30px;}
.banner ul li div.bannertext p.textimg{ padding-bottom:30px; top:30px; opacity:0; 
	position:relative;transition:all .5s ease 1s;-webkit-transition:all .5s ease 1s;font-size: 41px;
color: #ffffff;
font-weight: bold;line-height: 41px;
}
.banner ul li div.bannertext p.textimg img{ display:none; max-width:100%;}


.banner ul li.animate div.bannertext p.textimg{top:0px; opacity:1;}
.banner ul li:nth-child(6).animate div.bannertext p.textimg{opacity: 1;}
.banner ul li.animate div.bannertext h3{top:0px; opacity:1;}
.banner ul li.animate div.bannertext h4{top:0px; opacity:1;}
.banner ul li.animate div.bannertext p.more{top:0px; opacity:1;}
.banner ul li.animate div.mindexclass:after{ width:0%;animation:mymove 5s linear;-webkit-animation:mymove 5s linear;}

.indexclass{ padding:0px 15px; display:none;}
.indexclass ul li{ float:left; width:16.66666667%; padding:0px 15px;}
.indexclass ul li a{ display:block; position:relative; border-bottom:4px solid #edebed; 
padding:0px 0px; height:108px; font-size:18px; font-weight:400; color:#b2b2b2;transition:all .3s ease;-webkit-transition:all .3s ease;}
.indexclass ul li a span{ position:absolute; width:100%; transform:translateY(-50%);-webkit-transform:translateY(-50%); top:50%;}
.indexclass ul li a:after{ display:block;content:" "; width:0px; height:4px; background:#116ac8; position:absolute; left:0px; bottom:-4px;}
.indexclass ul li a:hover{ color:#0965c8;}
.indexclass ul li.cur a:after{ width:0%;animation:mymove 5s linear;-webkit-animation:mymove 5s linear;}
.indexclass ul li a:before{transition:all .3s ease;-webkit-transition:all .3s ease; width:100%; bottom:0px; position:absolute; content:""; height:0px; background:#b2b3b2;}
.indexclass ul li:hover a:after{width:100%;}
/*.indexclass ul li a:hover:before{ height:16px;}*/




@keyframes mymove
{
0% {width:0%;}
20% {width:0%;}
90% {width:100%;}
100% {width:100%;}
}
@-moz-keyframes mymove
{
0% {width:0%;}
20% {width:0%;}
90% {width:100%;}
100% {width:100%;}
}
@-ms-keyframes mymove
{
0% {width:0%;}
20% {width:0%;}
90% {width:100%;}
100% {width:100%;}
}
@-o-keyframes mymove
{
0% {width:0%;}
20% {width:0%;}
90% {width:100%;}
100% {width:100%;}
}
@-webkit-keyframes mymove
{
0% {width:0%;}
20% {width:0%;}
90% {width:100%;}
100% {width:100%;}
}



.dot{ position:absolute; width:12px;height:12px;background:#fff; border-radius:50%;-webkit-border-radius:50%; left:50%; top:50%; margin-left:-6px; margin-top:-6px;}
.dot:before{
content:' ';
position: absolute;
z-index:2;
left:50%;
top:50%;
margin-left:-16px;
margin-top:-16px;
width:32px;
height:32px;
border:1px solid #fff;
border-radius: 50%;
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: normal;/*定义动画方式*/

}

.dot:after {
content:' ';
position: absolute;
z-index:1;
left:50%;
top:50%;
margin-left:-31px;
margin-top:-31px;
width:62px;
height:62px;
border:1px solid #fff;
border-radius: 50%;
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: normal;/*定义动画方式*/
}

@-webkit-keyframes ripple {
0% {
opacity:0;
-webkit-transform:scale(.1)
}
5% {
opacity:1
}
to {
	opacity: 0;
	-webkit-transform: scale(1)
}
}
@keyframes ripple {
0% {
opacity:0;
-webkit-transform:scale(.1);
transform:scale(.1)
}
5% {
opacity:1
}
to {
	opacity: 0;
	-webkit-transform: scale(1);
	transform: scale(1)
}
}


/*--滚动条、隐藏滚动条--*/
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background-color:#116ac8;height: 50px;outline-offset: -2px;outline: 2px solid #fff;-webkit-border-radius: 4px;border: 2px solid #fff;}
::-webkit-scrollbar-track-piece{background-color: #fff;-webkit-border-radius: 0;}

.hidescroll{ overflow:hidden;}

.mbanner{ width:100%; overflow:hidden; position:relative;}
.mbanner ul li{ position:relative; overflow:hidden;}
.mbanner img{ display:block; width:100%;}

.mbannerdot{ position:absolute;bottom:10px!important;left: 5.5%!important; right:0px; z-index:999;}
.mbannerdot span.swiper-pagination-bullet{ display:inline-block; margin-right:10px; width:45px; height:2px; background:#116ac8; position:relative;opacity: 1;}
.mbannerdot span.swiper-pagination-bullet:after{ width:100%; height:2px; content:" "; position:absolute; left:0px; bottom:0px;background:#116ac8;}
.mbannerdot span.swiper-pagination-bullet-active{background:#333;}
.mbannerdot span.swiper-pagination-bullet-active:after{animation:mymove 5s linear;-webkit-animation:mymove 5s linear;}


@media (min-width: 768px) {
.indexCases ul li{ position:inherit; float:left; left:0px; top:0px;width:25%;}
.indexCases ul li:nth-child(4) div.content{ bottom:0px;border-top:none;}
}


@media (min-width: 992px) {
.indexabout{padding:145px 15px 105px;}
.indexabout h3{ font-size:48px; line-height:55px;}
.indexabout div.desc{font-size:18px;line-height:36px; padding-top:55px;}
.indexabout p.more{ padding-top:45px;}
.indexabout p.more a{font-size:16px;}
.banner{ display:block;}
.mbanner{ display:none;}
.indexclass{ padding:0px 48px;}
.aboutbanner{ padding:0px 48px;}
.header{ position:relative; height:85px; padding:0px;}
.header a.logo{ margin-top:23px;}
.header a.logo img{ height:38px;}
.header ul.navlist{ display:block;}
.headright{ display:block;}

.indexclass{ display:block;}
.banner ul li div.bannertext{display:none;padding-top:0px; color:#fff; position:absolute; width:100%;
transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);-webkit-transform:translateY(-50%); top:50%;}
.banner ul li div.bannertext p.textimg img{ display:block;}
.mindexclass{display:none;}


.Productspecificationsimages{ border-bottom:none; margin:0px; padding:0px; position:absolute; right:90px; max-width:400px;}
.Productspecificationsimages dl{ border:1px solid #eee;}
.Productspecificationsimages dl img{ display:block; max-width:100%; margin:0px auto;}
.Productspecificationsimages div.desc{font-size:14px;line-height:24px;padding-top:15px;
overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:10;-webkit-box-orient: vertical;height:300px;}
}

@media (min-width: 1260px) {
  .header ul.navlist li{padding:0 20px;}
}
@media (min-width: 1440px) {
  .banner ul li div.bannertext dl{ padding:0px 215px;}
}