﻿body{
  font-family: "微软雅黑";
}
/* ss */
.nav-header{
  width:1000px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
}
/*header*/

.header-nav{
  width: 1000px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
}
.header-nav .nav-link{
  margin-right: -10px;
}
.header-nav a{
  color: #000;
}
.header-img{
  width: 100%;
}
#wechat{
  width: 630px;
  text-align: right;
}


/*导航栏*/
.nav-container{
  background: #0D82DF;
  height: 70px;
}
#index-nav{
  width: 1000px;
  height: 70px;
  line-height: 60.4px;
  margin-left: auto;
  margin-right: auto;
}
#index-nav a{
  color: #fff;
  text-align: center;
  font-size: 20px;
}

#sear_input{
  position: absolute;top: 14px;font-size: 14px;
  width: 220px;
  height: 40px;
  text-indent: 35px;
  padding: 15px;
}
#search{
  font-size: 14px;
  margin-left: 50px;
  margin-right:0px;
  padding: 0;
  position: relative;line-height: 65px;
}
#search_btn{
      position: absolute; right: 548px;width: 61px;
  height: 40px;
  line-height: 40px;
  margin-top: 14px;
  background: #9FCBEE;
  color: #282828 !important;
  font-size: 16px !important;
}
.sear_img{
  top: 23px;
  left: 16px;
  position: absolute;
  z-index: 1;
}
#index-nav .nav-link:hover{
  background-color: #0d8ee9;
}
.nav-link {
  padding: .3rem 1rem;
  margin-right: 10px;
}


/*图标样式*/
.icon-style{
  
  margin-right: 50px;
  font-size: 19px;
  transition: all 0.6s;
}
.icon-style:hover{
  font-size: 20px;
  
}
.icon-style img{
  transition: all 0.6s;
  margin-right: 10px;
}
.icon-style:hover img{
  transform: scale(1.2);
}


.fade{
  transition: 0ms;
}


/*抖动*/
.shaking a:hover{
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}
	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}
/*翻转*/
.square{
  width: 110px;
  height: 110px;
}
.out{
  overflow: hidden;
  position: absolute;
  cursor: pointer;
}
.out1{
  
  overflow: hidden;
  position: absolute;

}
.inner{
  transition: all 0.3s;
  
  position: absolute;
  top:-110px;
}
.inner1{
  transition: all 0.3s;
  
  position: absolute;
}
.out .inner{
  background-image: url(../img/index/icon_grbs.png);
  color: white;
  background: #1492ff;
  color: #fff;
}
.out1 .inner1{
  background-image: url(../img/index/icon_grbs.png);
  background: #fff;
  color: #000;
}
.ttt{
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 0;
  text-align: center;
}
.ttt img{
  margin-top: 19px;
  margin-bottom: 6px;
}
.out:hover .inner1{
  transform:  translateY(110px);
}
.out:hover .inner{
  transform:  translateY(110px);
}




/*列表样式*/

.detail-list a{

  color: #282828}
.detail-list li{
  margin-bottom: 20px;
  position: relative;
}
.detail-list span{
  margin-right: 0;
  color: #818181;
}
/*图标缩放*/
.detail-list img{
  position: absolute;
  z-index: 1;
  right: -60px;
  top: -3px;
-webkit-animation-name: 'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: .3s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
 50% {margin-left: 5px;margin-top: 3px;width:15px;height:15px;}
 100% {margin-left: 0;margin-top: 0;width:18px;height:18px;}
}
.detail-list a:hover{
  color: #FF3333;
}
.detail-list span{
  position: absolute;
  right: -164px;
}
.date{
  color: #282828;}
.yqxx-date{
  color: #818181;
  text-align: right;
}
.bcolor{
  color: #0D82DF;
}
/* Bounce To Left */
.hvr-bounce-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( #ff7800,
  #fb9952);;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active {
  color:white;
}
.hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( #ff7800,
  #fb9952);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Back Pulse */
@-webkit-keyframes hvr-back-pulse {
  50% {
    background-color: rgba(255, 120, 0, 0.75);
  }
}
@keyframes hvr-back-pulse {
  50% {
    background-color: rgba(251, 153, 82, 0.75);
  }
}
.hvr-back-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
  -webkit-animation-name: hvr-back-pulse;
  animation-name: hvr-back-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-color: #FF7800;
  background-color: #fb9952;
  color: white;
}

/* Bubble Right */
.hvr-bubble-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
 
  position: relative;
}
.hvr-bubble-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #FF7800;
}
.hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

/* Icon Wobble Horizontal */
@-webkit-keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.hvr-icon-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-wobble-horizontal .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon {
  -webkit-animation-name: hvr-icon-wobble-horizontal;
  animation-name: hvr-icon-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/*清除默认样式*/
ul li{
  list-style-type: none;
}
a:hover{
  text-decoration: none;
}
.row{
  margin: 0;
}
.row ul{
    padding: 0;
}


/*footer*/

.footer-img{
    width: 100%;
    height: 700px;
    background-image: url('bg.png');
}
.footer-body{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
footer a:hover{
  text-decoration: underline;
}
.zslxfs{
  margin-top: 70px;
  color: #fff;
}
.wzlj{
  margin-top: 70px;
  color: #fff;
}
 .zslxfs-img{
   font-size: 20px;
 }
 .wzlj-img{
   font-size: 20px;
 }
.zslxfs-img img{
  margin-right: 10px;
  padding-left: 20px;


}
.wzlj-img img{
  padding-left: 20px;
  margin-right: 10px;

}
hr{
  margin-top: 20px;
  margin-bottom: 20px;
  background: #BFBFBF;
  width: 98%;
  margin-left: 0;
}
.zslxfs li{
  margin-bottom: 33px;
}
.zslxfs a{
  color: #fff;
}
.wzlj li{
  margin-bottom: 20px;
}
.wzlj a{

  margin-right: 20px;
  color: #fff;
}
.about{
  background: #F3F3F3;
  text-align: center;
}

.about-body li{
   padding-top: 12px;
}
.about-body .last img{
  margin-right: 10px;
}

.wzbzm{

  transform: translate(2px,-5px);
}
.gongan{
  transform: translate(0px,-3px);
}
       .topnav-container {
            background: #0D82DF;
            height: 70px;
        }

        .topnav {
            width: 1000px;
            margin: 0 auto;
            height: 70px;
            line-height: 70px;
        }

        .topnav-left {
            float: left;
            display: flex;
            width: 65%;
            text-align: center;
        }

        .topnav-left > a {
            font-family: "微软雅黑";
            flex: 1;
            text-decoration: none;
            color: white;
            font-size: 20px;
        }

        .topnav-right {
            float: left;
            width: 35%;
            position: relative;
        }
        .search-input{
            font-size: 14px;
            width: 220px;
            height: 40px;
            text-indent: 55px;
            position: absolute;
            left: 40px;
            top:14px;
            box-sizing: border-box;
            line-height:100%;
            /*padding: 15px;*/
        }
        .search-img{
            position: absolute;
            top: 24px;
            left: 54px;
        }
        .topnav-right > button{
            line-height:100%;
            position: absolute;
            top: 14px;
            left: 260px;
            width: 61px;
            height: 40px;
            background: #9FCBEE;
            color: #282828 !important;
            font-size: 16px !important;
        }