@charset "utf-8";
* {margin: 0;padding: 0;}
body {font-family: "Microsoft YaHei"; font-size: 14px; overflow-x: hidden; color: #333;}
ul,ol,li {list-style: outside none none; margin:0;}
.clear{ clear:both}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0; padding:0;}
.fl{float:left;}
.fr{float:right;}
a{text-decoration: none;!important;font-family: "Microsoft YaHei";}
a:hover{text-decoration:none;!important;}
img{ border: none; max-width:100% }
.fl{ float:left;}
.fr{ float:right;}
a{
  color: #333;
}

header{
    width: 100%;
    border-top: 5px solid #af0c14;
    padding:8px 0;
}
.wrapper{
	max-width:1200px; margin:0 auto;
}
.logo{
    float: left;
    width: 9%;
}
#nav_menu{
    float: right;
    width: 78%;
}
#nav_menu ul li{
    float: left;
    font-size: 16px;
    padding:35px 2.8% 0 2.8%;
}
#nav_menu ul li p{
    text-align: center;
    padding:0 10px 15px 10px;
}
#nav_menu ul li span{
    display: block;
    height: 2px;
    background-color: #e60012;
    width:0;
    transition-duration: .8s;
}
#nav_menu ul li:hover span{
    width: 100%;
}
.yy{
    font-size: 16px;
    line-height: 90px;
}





.js-silder{
    position: relative; 
    min-width: 320px;
}
.silder-scroll{
    width: 100%;
    overflow: hidden;
}
.silder-main{
    position: relative;
    width: 100%;
    overflow: hidden;
}
.silder-main-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.silder-main-img img{
    width: 100%;
}
.js-silder-ctrl{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 10px;
}

.silder-ctrl-con{
    display: inline-block;
    width: 4%;
    padding: 10px 0;
    margin: 0 10px;
    cursor: pointer;
}
.silder-ctrl-con>span{
    display: block;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    padding: 2px 0;
    cursor: pointer;
    background-color: #e4e4e4;
}
.silder-ctrl-con.active>span{
    background-color: #0080d5;
}
.xs-top{
    display: none;
}

/*xs菜单样式开始*/

.mobile-inner-nav a{
      -webkit-animation-duration: 0.8s;
      animation-duration: 0.8s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: bounceInRight;
      animation-name: bounceInRight;
    }
       
.mobile{
  width: 100%;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
}
.mobile-inner{
  margin-right: auto;
  margin-left: auto;
  background-color: #fafafa;
  position: relative;
}
.mobile-inner img{
  width: 100%;
  margin-bottom: 30px;
}
.mobile-inner p{
  color: #676767;
  line-height: 25px;
  font-size: 16px;
  padding-bottom: 30px;
  padding-right: 30px;
  padding-left: 30px;
  margin:0px;
}
.mobile-inner-header{
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}
.mobile-inner{
  
}
.mobile-inner-header-icon{
  color: #ffffff;
  height: 50px;
  font-size:25px;
  text-align: center;
  float:right;
  width: 50px;
  position: relative;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
.mobile-inner-header-icon:hover{
  background-color: rgba(255,255,255,0.2);
  cursor: pointer;
}
.mobile-inner-header-icon span{
  position: absolute;
  left: calc((100% - 25px) / 2);
  top: calc((100% - 1px) / 2);
  width: 25px;
  height: 1px;
  background-color: rgba(255,255,255,1);
}
.mobile-inner-header-icon span:nth-child(1){
transform: translateY(4px) rotate(0deg);
  }
.mobile-inner-header-icon span:nth-child(2){
transform: translateY(-4px) rotate(0deg);
  }
  
.mobile-inner-header-icon-click span:nth-child(1){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clickfirst;
  }   
.mobile-inner-header-icon-click span:nth-child(2){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clicksecond;
  }
  
.mobile-inner-header-icon-out span:nth-child(1){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outfirst;
  }   
.mobile-inner-header-icon-out span:nth-child(2){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outsecond;
  }

.mobile-inner-nav{
  background-color: rgba(0,0,0,0.9);
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
  display: none;
}
.mobile-inner-nav a{
  display: inline-block;
  line-height: 50px;
  text-decoration: none;
  width: 85%;
  margin-left: 5%;
  color: #FFFFFF;
  border-bottom: solid 1px rgba(255,255,255,0.3);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  font-weight:300;
}
.mobile-inner-nav a:hover{
  color: rgba(255,255,255,0.4);
  border-bottom: solid 1px rgba(255,255,255,0.2);
}
/*菜单结束*/
.js-silder{
    position: relative; 
    min-width: 320px;
}
.silder-scroll{
    width: 100%;
    overflow: hidden;
}
.silder-main{
    position: relative;
    width: 100%;
    overflow: hidden;
}
.silder-main-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.silder-main-img img{
    width: 100%;
}
.js-silder-ctrl{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 10px;
}

.silder-ctrl-con{
    display: inline-block;
    width: 4%;
    padding: 10px 0;
    margin: 0 10px;
    cursor: pointer;
}
.silder-ctrl-con>span{
    display: block;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    padding: 2px 0;
    cursor: pointer;
    background-color: #e4e4e4;
}
.silder-ctrl-con.active>span{
    background-color: #c4151c;
}

.footer{
    width: 100%;
    background: #c4151c;
    color: #fff;
    text-align: center;
    padding:30px 0;
}
.footer p a{
    padding:0 2%;
    color: #fff;
}
.banquan{
    padding-top: 10px;
}
.ne_banner{ width:100%; background:#000; overflow:hidden;}
.ne_banner img{ width:100%; transition-duration:.5s; display:block}
.ne_banner:hover img{ transform:scale(1.1,1.1); opacity:.5;}
.ne-menu{ height:66px; background:#f22a2a; position:relative; top:-33px; color:#fff; line-height:66px;}
.ne-ti01{ padding-left:50px;}
.ne-ti01 span{ border-left:5px solid #fff; font-size:24px; padding-left:15px;}
.ne-xi{ padding:20px 0 50px 0;}
.ne-ti02{ color:#fff; line-height:66px; font-size:18px; padding-right:30px;}
.ne-ti02 a{ color:#fff;}

/*当页面小于1200px时*/
@media (max-width: 1200px) {
      .wrapper{
        padding: 0 20px;
    }

}


/*在992和1199像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 992px) and (max-width: 1199px) {

#nav_menu ul li{
    padding:35px 2% 0 1%;
}

}

/*在768和991像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 768px) and (max-width: 991px){
#nav_menu ul li{
    padding:25px 1% 0 0%;
    font-size: 14px;
}
.yy{
    font-size: 14px;
    line-height: 70px;
}

}

/*在480和767像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 480px) and (max-width: 767px) {
header{
    display: none;
}
.xs-top{
    display: block;
}
.biao{
    display: none;
} 
.ne_banner{ margin-top:50px;}
.ne-menu{ height:36px; top:-18px; line-height:36px;}
.ne-ti01{ padding-left:10px;}
.ne-ti01 span{ font-size:14px; padding-left:10px;}
.ne-xi{ padding:0px 0 20px 0;}
.ne-ti02{ color:#fff; line-height:36px; font-size:14px; padding-right:10px;}
}
/*在小于480像素的屏幕,这里的样式才生效*/
@media (max-width: 479px) {
header{
    display: none;
}
.xs-top{
    display: block;
}
.biao{
    display: none;
}
.ne_banner{ margin-top:50px;}
.ne-menu{ height:36px; top:-18px; line-height:36px;}
.ne-ti01{ padding-left:10px;}
.ne-ti01 span{ font-size:14px; padding-left:10px;}
.ne-xi{ padding:0px 0 20px 0;}
.ne-ti02{ color:#fff; line-height:36px; font-size:12px; padding-right:10px;}
}





 @-webkit-keyframes bounceInRight {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
      }

      75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }

      90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
      }

      to {
        -webkit-transform: none;
        transform: none;
      }
    }

    @keyframes bounceInRight {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
      }

      75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }

      90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
      }

      to {
        -webkit-transform: none;
        transform: none;
      }
    }
    @keyframes outfirst {
  0% {
    transform: translateY(0) rotate(-45deg);
  }

  100% {
    transform: translateY(-4px) rotate(0deg);
  }
} 



@keyframes outsecond {
  0% {
    transform: translateY(0) rotate(45deg);
  }

  100% {
    transform: translateY(4px) rotate(0deg);
  }
}
@keyframes clickfirst {
  0% {
    transform: translateY(4px) rotate(0deg);
    
  }

  100% {
    transform: translateY(0) rotate(45deg);
  }
} 



@keyframes clicksecond {
  0% {
    transform: translateY(-4px) rotate(0deg);
  }

  100% {
    transform: translateY(0) rotate(-45deg);
  }
}