﻿/*初始化样式*/
input{padding:0;margin:0;font-family:'Microsoft YaHei';}
img{border:none;background:none;vertical-align:middle;}
ul,ol,li{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0}
table, th, td {vertical-align: middle}
.clearfix:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
.clearfix{zoom:1}
.clearboth{height:0px;line-height:0px;overflow:hidden;clear:both;font-size:0px;}

h1,h2{font-size:12px;font-weight:bold;}
hr {border: 0;border-top:1px solid #ccc;height:0;}
p{margin: 0;}

/*----- Common css ------*/
.fl{float:left;}
.fr{float:right;}
.di{_display:inline;}
.fwn{font-weight:normal;}
.dib{*display:inline;_zoom:1;_display:inline;_font-size:0px;}

.com-img{ display:block; overflow:hidden;}
.com-img img{ transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
.com-img:hover img{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1);-ms-transform:scale(1.1);}

.xypg-right-content{font-size: 16px;}
.xypg-right-content p img{
  max-width:100%; height:auto !important;width:auto !important;
}

.j-space-between{justify-content:space-between}
.j-flex-start{justify-content:flex-start}
.j-flex-end{justify-content:flex-end}
.j-center{justify-content:center}
.a-j-center{align-items:center;justify-content:center}
.a-center{align-items:center}
.a-flex-start{align-items:flex-start}
.a-flex-end{align-items:flex-end}

/*主体样式*/
.wh{max-width: 1230px;padding: 0 15px;margin: 0 auto;}
.section { position: relative; overflow: hidden;width: 100%;}
.x-banner{
    height: 100vh;
}
.top2{position: absolute;top:0;width: 100%;z-index: 999;height: 94px;border-bottom:1px solid rgba(255,255,255,.5);;}
.xymob-menu-jt2{position: absolute;right: 0;top:45px; }
.top2 .wh{align-items: center;}


/*  */
.section1{background: url(../images/1ee9899ba73abcf5300679ea2c7b7b9a28a957c3.jpg) no-repeat top center;background-size: cover;}
.sp{width:100%;overflow: hidden; border-radius: 20px;}
.sp video{width: 100%;display: block;}
.bt1{text-align: center;}
.bt1 dd{color: #bec1c9;opacity: 0.17;font-size: 64px;font-weight: bold;line-height: 1;text-transform: uppercase;}
dt{font-weight: normal;}
.bt1 dt{color: #000000;font-size: 30px;font-weight: bold;line-height: 1;margin-top: -30px;}
.line1{width: 35px;height: 1px;margin: 0 auto;background: #d82820;margin-top: 10px;}
.abox{margin-top: 18px;}
.asort{width: 28%;}
.asort li{margin-top: 11px;border-radius: 10px;border: solid 1px #c7c7c7;overflow: hidden;}
.asort li p{color: #999999;font-size: 12px;}
.asort li p span{color: #666666;font-size: 20px;}
.asort li .img{width: 57px;}
.asort li .img2{display: none;}
.asort li:hover .img1{display: none;}
.asort li:hover .img2{display: inline-block;}
.asort li a{height: 86px;position: relative;padding-left: 38px;}
.asort li a:after{background: #132f8b;content: "";height: 100%;left: 0;position: absolute;transition: width .2s;width: 20px;z-index: 1;}
.asort li:hover a:after{width: 100%;}
.aa1{display: flex;align-items: center;justify-content: flex-start;position: relative;z-index: 2;}
.asort li:hover p,.asort li:hover p span{color: #fff;}
.aul{margin-top: 30px;}
.aul li{width: 25%;margin-bottom: 20px;}
.aul li h3{color: #000000;font-size: 18px;margin: 5px 0;}
.aul li p{color: #666666;font-size: 14px;}
.aul li .img{width: 68px;line-height: 47px;}
.anei {width: calc(100% - 68px);}



.c3 {
  background: #fafafa;
  overflow: hidden;
}

.c3 .slideBox {
  position: relative;
}
.c3 .slideBox .hd .img{height: 55px;}
.c3 .slideBox .hd {
  background: #fff;
  position: absolute;
  width:66.15%;
  margin: 0 auto;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 1px 9px 0px 
		rgba(8, 1, 3, 0.3);
}
.c3 .slideBox .hd ul li .img2{display: none;}
.c3 .slideBox .hd ul li.on .img2{display: inline-block;}
.c3 .slideBox .hd ul li.on .img1{display: none;}

.c3 .slideBox .hd ul {
  margin: 0;
  padding: 0 6%;
}

.c3 .slideBox .bd ul {
  margin: 0;
}

.c3 .slideBox .hd ul li {
  float: left;
  text-align: center;
  cursor: pointer;
  width: 19.5%;
  height: 157px;
  color: #666;
  background: url(../images/1d0512653c8a9aed1357a397e4fc81d1a8bc897e.png) no-repeat right center;
  position: relative;display: flex;align-items: center;justify-content: center;
}

.c3 .slideBox .hd ul li:last-child {
  background: none;
}

.c3 .slideBox .hd ul li p {
  padding-top: 5px;color: #000000;font-size: 15px;
}

.c3 .slideBox .hd ul li.on {
  color: #272727;
}



.c3 .slideBox .hd ul li.on::after {
  position: absolute;
  bottom: 0;
  left: 7%;
  content: "";
  width: 86%;
  height: 4px;
  background: #d60000;
}

.c3 .slideBox .bd {
  position: relative;
  height: 100%;
  z-index: 0;
}

.c3 .slideBox .bd li {
  zoom: 1;
  vertical-align: middle;
  position: relative;
}

.c3 .slideBox .bd .limg {
  width: 100%;
  height: 100vh;
  display: block;
}

.lintro {
  width: 100%;
  position: absolute;
  left: 0;
  top: 35%;
  text-align: center;
  font-size: 3vw;
  color: #fff;
}
.lintro p{color: #ffffff;font-size: 70px;line-height: 2; text-shadow: 0 3px 3px #333;}

.lintro a {
  display: block;
}

.lintro a:hover img {
  opacity: .8;
  transition: .5s;
}

.c3 .slideBox .bd li::after {
  content: '';
  position: absolute;
  width: 15%;
  height: 100%;
  top: 0;
  left: 130%;
  overflow: hidden;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 100%);
  /*linear-gradient渐变效果*/
  transform: skewX(-25deg);
}

.c3 .slideBox .bd li:hover:after {
  transition: left 1.5s;
  left: -30%;
}

/* 下面是前/后按钮代码，如果不需要删除即可 */
.c3 .slideBox .prev,
.c3 .slideBox .next {
  position: absolute;
  left: 0%;
  top: 50%;
  margin-top: -10px;
  display: block;
  width: 6%;
  text-align: center;
}

.c3 .slideBox .next {
  left: auto;
  right: 0;
}

.c3 .slideBox .prev:hover,
.c3 .slideBox .next:hover {
  filter: alpha(opacity=50);
  opacity: .5;
}



/*  */
.section3{background: url(https://img.alicdn.com/imgextra/i1/265962233/O1CN016sDD1U1SMlUOFghMq_!!265962233.jpg) no-repeat top center;background-size: cover;}
.section3 .wh{max-width: 1630px;}
.product-tabs{
  width: 268px;
	background-color: #ffffff;
	border-radius: 5px;
	border: solid 1px #c9c9c9;
  padding: 7px 0;
}
.pright{width: calc(100% - 305px);}
.pp{margin-top: 40px;}
.psort li a{display: block;color: #000000;font-size: 20px;line-height: 70px;padding-left: 22px;}
.psort li{position: relative;}
#bgli { position: absolute; background: #d60000;width: 2px; height: 74px; z-index: 100 }
.pimg{width: 45.5%;}
.qie{width:51.6%;}
.incp_1{width: 47.2%;border-radius: 5px;overflow: hidden;margin-bottom: 15px;}
.incp_1:nth-child(n+3){margin-bottom: 0;}
/* .incp_1:nth-child(5),.incp_1:nth-child(6){margin-bottom: 0;} */
.incp_1tite a{background:#132f8b;display: block;line-height: 32px;text-align: center;color: #ffffff;font-size: 16px;padding: 0 3px;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
.incp_1 .img img{width: 100%;}
.pimg{background-color: #ffffff;border-radius: 5px;}
.ys1 {text-align: center;}
.ys1 .img{padding: 0 0 1vw;}
.ys1 .img img{width: 106%;}
.ys1 dd{color: #666666;font-size: 18px;padding-bottom: 13px;margin-bottom: 10px;padding: 0 2.8vw;}
.ys1 dt{color: #000000;font-size: 30px;padding: 0 2.8vw 1vw;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}

/*  */
.section4 {position: relative;}
.section4 .hd{position: absolute;top:0;width: 20%;background: rgba(19,47,139, 0.93);height: 100%;right: 0;overflow: hidden;}
.section4 .hd ul{display: flex;align-items: center;flex-direction: column;justify-content: center;height: 100%;flex-wrap: wrap;}
.section4 .bd li img{width: 100%;height: 100vh;}
.section4 .bd{overflow: hidden;}
.section4 .hd li{border-bottom: 1px solid rgba(255, 255, 255, 0.24);width: 100%;cursor: pointer;}
.section4 .hd li h3{color: #ffffff;font-size: 25px;}
.section4 .hd li h3 a {color:#fff}
.section4 .hd li p{color: #ffffff;font-size:14px;margin-top: 5px;}
.yy{padding: 3vw 0 2.2vw 2.4vw;}
.yy:hover {background: #051754;}
.section4 .hd li.on{background: #051754;}
.section4 .hd li:last-child{border-bottom: none;}


/*  */
.section5{background: url(../images/7cd51b82f5c51657353c9f91f485cd5742285a5e.jpg) no-repeat top center;background-size: cover;}
.csort{width: 507px;background: url(../images/d52b262219ffd8ca2d012a309a5260d086894262.png) no-repeat bottom center;margin: 42px auto 44px;}
.csort li{width: 130px;text-align: center;}
.csort li a{color: #000000;font-size: 18px;padding-bottom: 13px;display: block;}
#bgli2 { position: absolute; background: #d60000;width: 107px; height:2px; z-index: 100;bottom: 0;}
.product-content2{width: 95%;}
.biao{width:22% ;background-color: #ffffff;border-radius: 5px;padding: 11px 24px  0 22px;}
.product-content2 .incp_1tite a{font-size: 14px;}
.product-content2 .incp_1{width: 24.6%;margin-bottom: 23px;}
.product-content2 .incp_1:nth-child(4),.product-content2 .incp_1:nth-child(5),.product-content2 .incp_1:nth-child(6){margin-bottom: 0;}
.mySwiperb {overflow: hidden;height: 430px;position: relative;}
.mySwiperb .swiper-slide{border-bottom: 1px dashed #cecece;}
.zbt{color: #d60000;font-size: 16px;padding-left: 38px;background: url(../images/e6a96001cb8f4640a364f890af5db683947bab03.png) no-repeat left top;line-height: 26px;padding-bottom: 18px;border-bottom: 2px solid #cecece;}
.zbt2{color: #dc0000;font-size: 14px;text-align: center;margin-top: 27px;}
.zz21{align-items: center;height: 100%;padding-right: 20px;}
.zz2{color: #666666;font-size: 14px;}
.zcon{width: calc(100% - 70px);}
.zz2 .img{width: 55px;}
.zz2 .img img{max-width: 100%;}
.zcon h3{color: #000000;font-size: 16px;margin-bottom: 7px;}


/*  */
.section6{background: url(../images/04316b7dd19a0c3155976dd1a38776e41647b532.jpg) no-repeat top center;background-size: cover;}
.section6  .wh{ max-width: 80%;}
.nsort{width: 379px;background: url(../images/d52b262219ffd8ca2d012a309a5260d086894262.png) no-repeat bottom center;margin: 20px auto 50px;}

.nsort li a{color: #666666;font-size: 18px;padding: 0 13px;padding-bottom: 12px;display: block;}
.nsort li:hover a{background: url(../images/8be2fea8c1cbc3fe72ca538944290c45bb9f72f0.png) no-repeat bottom center;}
.nul{width: 48%;background-color: #ffffff;}
.nul2{width: 48.8%;}
.nul li img{width: 100%;}
.xw {padding: 23px 20px 48px;}
.ntime{width: 70px;height: 82px;background-color: #cf0006;text-align: center;color: #fff;}
.ntime dd{font-size: 21px;font-weight: bold;padding-top: 20px;}
.ntime dt{font-size: 16px;}
.nei{width: calc(100% - 87px);}
.nei h3 a{display: block;color: #000000;font-size: 18px;font-weight: bold;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;margin-top: 7px;}
.nei p{color: #666666;font-size: 12px;line-height: 20px;margin-top: 10px;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.nul2 li{background: #fff;margin-bottom: 11px;height: 195px;align-items: center;padding-right: 20px;}
.ntime2{width: 185px;border-right: 1px solid #e6e6e6;text-align: right;padding-right: 10px; padding-left: 10px;}
.ntime2 dd{color: #e0e0e0;font-size: 24px;}
.ntime2 dd img {width: 100%;}
.ntime2 dt{color: #e0e0e0;font-size: 16px;}
.nul2 .nei{width: calc(88% - 111px);}
.nul2 h3 a{line-height: 1;}
.nul2 .nei p{margin-top: 2px;}
.nul2 li:hover {background-color: #132f8b;}
.nul2 li:hover h3 a,.nul2 li:hover .nei p{color: #fff;}
.nul2 li:hover .ntime2 dd{color: #dfdfdf;}
.nul2 li:last-child{margin-bottom: 0;}


/*  */
.she{background: #f6f6f6;padding: 39px 0 62px;}
.zul{margin-top: 30px;background: #fff;}
.zul li .img{display: block;width: 54.95%;}
.zul li .img img{width: 100%;}
.sbt{color: #000000;font-size: 36px;}
.sbt span{color: #666666;font-size: 20px;}
.zcon3{width:45.05%;padding: 0 13px 0 46px;display: flex;justify-content: center;flex-direction: column;}
.zcon3 h3{color: #cf0006;font-size: 24px;font-weight: bold;}
.zcon3 p{color: #666666;font-size: 14px;line-height: 21px;margin: 30px 0 23px;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.gd a{display: block;width: 170px;height: 39px;border-radius: 20px;border: solid 1px #c9c9c9;line-height: 37px;text-align: center;color: #999999;font-size: 14px;}



/*  */
.foot{padding: 40px 0;}
.tewm img{width: 300px;}
.tewm{margin-right: 12px;}
.lx{color: #333333;font-size: 14px;line-height: 30px;}
.tlx{width: 385px;}
.dtel{color: #333333;font-size: 14px;}
.mm1 a{display: block;color: #fff;font-size: 12px;width: 99px;height: 31px;background-color: #e20000;border-radius: 16px;line-height: 31px;text-align: center;margin: 10px 0;}
.bq{color: #666666;font-size: 12px;}
.bq a{color: #666666;}
.tlogo{margin-top: 22px;}
.tlogo img{max-width: 219px;}












@media(max-width: 1500px){
  .incp_1tite a{font-size: 14px;}
  #bgli{height:4.7vw;}
  .psort li a{line-height: 4.7vw;}
  .ys1 dt{font-size: 24px;}
}


@media(max-width: 1200px){
    .aul li p{font-size: 12px;}
    .asort li a{height: 70px;}
    .x-banner{height: auto;}
    .section1,.section3,.section5,.section6{padding: 5% 0;}
    .asort li p span{font-size: 16px;}
    .c3 .slideBox .hd ul li p{font-size: 16px;}
    .c3 .slideBox .hd{width: 76%;}
    .c3 .slideBox .hd ul li{height: 130px;}
    .psort li a{font-size: 18px;}
    .ys1 dt{font-size: 20px;}
    .ys1 dd{font-size: 15px;}
    #bgli{height:4.95vw;}
    .psort li a{line-height: 4.95vw;}
    .section4 .bd li img{height: 100%;}
    .section4 .hd li h3{font-size: 20px;}
    .zbt2{font-size: 12px;}
    
}
@media(max-width: 1024px){
  .zbt2{margin-top: 10px;}
  .biao{padding: 11px 14px  0 12px;}
  .mySwiperb{height: 290px;}
  .zz2{font-size: 12px;}
  .nul2 li{height: 132px;}
}



@media(max-width: 991px){
    .aul li h3{font-size: 16px;}
    .lintro p{font-size: 20px;line-height: 30px;margin-bottom: 20px;}
}

@media(max-width: 768px){
    .bt1 dd{font-size: 50px;}
    .sp,.asort{width: 100%;}
    .asort{display: flex;justify-content: space-between;flex-wrap: wrap;display: -webkit-flex;}
    .asort li{width: 48%;}
    .asort li a:after{width: 10px;}
    .asort li a{padding-left:18px;}
    .asort li .img img{width: 30px;}
    .asort li p span{font-size: 14px;}
    .pp{margin-right: 0;}
    .biao{margin-top: 20px;padding: 20px;}
    .biao,.product-content2{width: 100%;}
    .nul,.nul2{width: 100%;float: none;}
    .nul2{margin-top: 20px;}
    .zcon3 h3{font-size: 19px;}
    .zcon3{padding-left: 20px;}
    .zcon3 p{margin: 15px 0 10px;}
    .sbt{font-size: 30px;}
}

@media(max-width: 640px){
    .section {height: auto!important;}
    .aul li{width: 50%;}
    .aul li .img{width: 58px;}
    .aul li h3{font-size: 13px;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
    .c3 .slideBox .bd .limg{height: 100%;}
    .c3 .slideBox .hd{position: relative;margin-top: -30px;left: 0;transform: translateX(0);width: 94%;}
    .c3 .slideBox .hd ul li p{font-size: 13px;}
    .c3 .slideBox .hd ul li img,.c3 .slideBox .hd .img{height: 30px;}
    .c3 .slideBox .hd ul li{height: 90px;}
    .lintro{top:15%;}
    .lintro p{font-size: 14px;line-height: 20px;}
    .lintro img{width: 40px;}
    .c3 .slideBox .hd{margin-bottom: 30px;}
    .product-tabs,.pright,.pimg,.qie{width: 100%;}
    .pimg{margin-bottom: 20px;}
    .pp{margin-top: 20px;}
    .psort{height: 40px;}
    .psort li a{line-height: 36px;}
    #bgli{height: 36px;}
    .pright{margin-top: 20px;}
    .section1, .section3,.section5,.section6{padding: 30px 0;}
    .pimg{padding: 10px;}
    .ys1 dt{font-size: 16px;}
    .psort li{width: auto;}
    .psort li a{font-size: 14px;line-height: 40px;padding:0 15px;}
    #bgli{display: none;}
    .psort .selected a {
      background: url(../images/16d237aea3770212b1458a577cbe878025a94679.png) no-repeat bottom center;color: #d60000;
  }
    .section4 .hd {width: 100%;position: static;bottom: 0;height: auto;}
    .section4 .hd ul{flex-direction:row;height: auto;align-items: flex-start;}
    .section4 .hd li h3{font-size: 16px;}
    .section4 .hd li p{font-size: 12px;}
    .section4 .hd li{border: none;width: 50%;padding: 10px 5px;}
    .yy{padding: 0;}
    .section4 .hd li{height:70px;}
    .bt1 dt{font-size: 24px;}
    .csort{width: 100%;margin: 20px 0; height: auto;}
    .csort li,#bgli2{width: 71px;}
    .csort li a{font-size: 14px;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
    .product-tabs{padding: 0 5px;}
    .incp_1tite a{font-size: 12px;}
    .product-content2 .incp_1{width: 48%;}
    .nsort{margin: 20px auto;width: 80%;}
    .nsort li a{font-size: 14px;}
    .xw{padding: 20px;}
    .nul2 li{height: 88px;}
    .nul2 h3 a{font-size: 16px;}
    .sbt{font-size: 24px;}
    .sbt span{font-size: 16px;}
    .she{padding: 30px 0;}
    .zul{margin-top: 20px;}
    .zul li .img,.zcon3{width: 100%;}
    .zcon3{padding: 20px;}
    .tlogo,.tleft{float: none;width: 100%;}
    .lx{text-align: left;}
    .tewm{margin-right: 5px;width: 100%; text-align: center;}
    .tewm img{width: 90%;}
    .lx{width: calc(100% - 104px);font-size: 12px;line-height: 18px;display: none;}
    .dtel{font-size: 12px;}
    .c3 .slideBox .bd,.c3 .slideBox .bd .limg{height: auto;}
    .ntime2 {width: 30%;}
    .section6 .wh {max-width: 95%}
    .nul2 .nei {width: calc(100% - 121px);}
    .section4 .bd li img {width: 100%; height: auto;}
    .section4 .hd {display: none;}
    .owl-carousel .owl-item img {height: auto;}
}





@media(min-width: 1201px){
    
.sun-delay0 {
        -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
    }

    .sun-delay1 {
        -webkit-transition-delay: 0.4s;
                transition-delay: 0.4s;
    }

    .sun-delay2 {
        -webkit-transition-delay: 0.6s;
                transition-delay: 0.6s;
    }

    .sun-delay3 {
        -webkit-transition-delay: 0.8s;
                transition-delay: 0.8s;
    }

    .sun-delay4 {
        -webkit-transition-delay: 1s;
                transition-delay: 1s;
    }

    .sun-delay5 {
        -webkit-transition-delay: 1.2s;
                transition-delay: 1.2s;
    }

    .sun-delay6 {
        -webkit-transition-delay: 1.4s;
                transition-delay: 1.4s;
    }

    .sun-delay7 {
        -webkit-transition-delay: 1.6s;
                transition-delay: 1.6s;
    }

    .sun-delay8 {
        -webkit-transition-delay: 1.8s;
                transition-delay: 1.8s;
    }

    .sun-delay9 {
        -webkit-transition-delay: 2s;
                transition-delay: 2s;
    }

    .sun-delay10 {
        -webkit-transition-delay: 2.2s;
                transition-delay: 2.2s;
    }

    .sun-ani-left,
    .sun-ani-down,
    .sun-ani-up,
    .sun-ani-right {
        opacity: 0;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: .7s;
                transition-duration: .7s;
    }

    .sun-ani-left {
        -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
    }

    .sun-ani-down {
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
    }


.sun-ani-up {
        -webkit-transform: translateY(-100px);
                transform: translateY(100px);
    }

    .sun-ani-right {
      opacity: 1;
        -webkit-transform: translatex(0px);
                transform: translatex(0px);
    }

    .active2 .sun-ani-left {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    .active .sun-ani-left {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    .active .sun-ani-down {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    .active .sun-ani-up {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
     .active2 .sun-ani-up {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    .active .sun-ani-right {
        opacity: 1;
        -webkit-transform: translatex(0);
                transform: translatex(0);
   }
   .active2 .sun-ani-right {
        opacity: 1;
        -webkit-transform: translatex(0);
                transform: translatex(0);
   }
    
}

@media(min-width: 991px){
.active .down{ animation-name: fadeInDown;
    animation-duration: 0.8s;
    animation-delay: 1s;
    animation-fill-mode: both;}

.active .up{   animation-name: fadeInUp;
    animation-duration: 0.8s;
    animation-delay: 1s;
    animation-fill-mode: both;}


    


.active .le{   animation-name: fadeInLeft ;
    animation-duration: 0.8s;
    animation-delay: 1s;
    animation-fill-mode: both;}


.active .re{ animation-name: fadeInRight;
    animation-duration: 0.8s;
    animation-delay: 1s;
    animation-fill-mode: both;}


.active .zz{   animation-name:zoomIn;
    animation-duration: 0.8s;
    animation-delay: 1s;
    animation-fill-mode: both;}
}



 .xdao {
        margin-bottom: 64px;
    }

    .xdao .xypg-left-nav {
        display: flex;
        margin: 0;
        justify-content: space-between;
    }

    .xdao .xypg-left-nav>li {
        width: 17.285%;
        text-align: center;
        background: #f4f4f4;
        border-bottom: none;
        position: relative;
    }

    .xdao .xypg-left-nav>li .first-nav-btn {
        display: none;
    }

    .xdao .xypg-left-nav>li>a {
        color: #333;
        line-height: 48px;
        padding: 0;
    }

    .xdao .xypg-left-nav>li>a:hover {
        color: #fff;background: #d60000;
    }

    .xdao .xypg-left-nav>li.clicked>a {
         color: #fff;background: #d60000;
    }

    .xdao .xypg-left-nav>li .xypg-left-subnav {
        padding: 0;
        position: absolute;
        top: 55px;
        left: 0;
        width: 100%;
        z-index: 111;
        display: none;
    }

    .xdao .xypg-left-nav>li .xypg-left-subnav li {
        width: 100%;
        line-height: 55px;
        background: #f4f4f4;
    }

    .xdao .xypg-left-nav>li .xypg-left-subnav li a {
        display: block;
        color: #a8a8a8;
    }

    .xdao .xypg-left-nav>li .xypg-left-subnav li a:hover {
        color: #eb6e12;
    }

    .xdao .xypg-left-nav>li:hover .xypg-left-subnav {
        display: block;
    }