body {
  overflow-x: hidden;
}

body,
div,
h1,
h2,
h3,
h4,
h5,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd {
  margin                     : 0;
  padding                    : 0;
  box-sizing                 : border-box;
  -moz-box-sizing            : border-box;
  -webkit-box-sizing         : border-box;
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  list-style-type: none;
}

img {
  border        : none;
  vertical-align: bottom;
}

body {
  font : 14px "Microsoft Yahei", Arial, Helvetica, sans-serif;
  color: #515151;
}

a {
  color          : #333;
  text-decoration: none;
}

a:hover,
.caseNav a:hover {
  color: #ff7f00;
}

.clearfix:after {
  content: "";
  display: table;
  clear  : both;
}

.w-86 {
  width: 86%;
}

.mx-auto {
  margin: 0 auto;
}

.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.py-2 {
  padding: 15px 0;
}

/*base*/

.head {
  width   : 100%;
  z-index : 99;
  position: fixed;
  top     : 0;
  left    : 50%;
  left    : 0;
}

.head-bg {
  background: rgba(0, 0, 0, .2);
}


.head ul {
  position    : relative;
  width       : 100%;
  text-align  : center;
  padding-left: 8%
}

.head ul li {
  margin : 0 3%;
  display: inline-block;
}

.head ul li a {
  color    : #fff;
  font-size: 16px;
  position : relative
}

.head ul li a:after {
  position          : absolute;
  content           : '';
  bottom            : -15px;
  left              : 50%;
  display           : inline-block;
  width             : 0%;
  margin            : 0 auto;
  background        : #ff8000;
  height            : 2px;
  -webkit-transition: all 0.4s ease-in-out;
  transition        : all 0.4s ease-in-out;
  -webkit-transform : translateX(-50%);
  transform         : translateX(-50%);
}

.head ul li a:hover:after,
.head ul li .cur::after {
  width: 50%;
}

.head .logo {
  width: 20%;
}

.head .logo img {
  width: 100%;
}

.head .logo .footer {
  color: #858585
}

.footer a {
  color: #858585
}

.footer a:hover {
  color: #d4d4d4
}

.footer .bot {
  width      : 100%;
  height     : 70px;
  line-height: 70px;
  background : #333;
  text-align : center;
  clear      : both;
  display    : block
}

.footer .top {
  z-index    : 10;
  position   : relative;
  padding    : 68px 7%;
  background : #494949;
  width      : 100%;
  line-height: 34px;
}

.footer h3 {
  font-size     : 20px;
  color         : #d4d4d4;
  font-weight   : normal;
  padding-bottom: 7px
}

.footer .fnav {
  width: 60%;
  float: left
}

.footer .fnav ul li {
  width: 25%;
  float: left
}

.footer .fnav ul li a {
  display: block
}

.footer .mid {
  width       : 30%;
  float       : left;
  background  : url(../images/icon6.png) 0 50px no-repeat;
  padding-left: 20px;
  padding-top : 40px;
  color       : #858585;
}

.footer .weixin {
  width     : 10%;
  float     : left;
  text-align: center
}

.footer .weixin img {
  width: 100%
}

.footer .link {
  width      : 100%;
  padding-top: 28px
}

.footer .link a {
  padding-right: 30px
}

.h28 {
  height: 28px
}

/* css工具类
* ========================
*/
.port-pc {
  display: block !important;
}

.port-m {
  display: none !important;
}




@media (max-width: 1440px) {

  .footer .top {
    padding-left : 5%;
    padding-right: 5%
  }
}

@media screen and (max-width:1280px) {
  .footer .top {
    padding-left : 3%;
    padding-right: 3%
  }

  .footer .link {
    height  : 100px;
    overflow: hidden
  }
}

@media screen and (max-width:414px) {
  .port-pc {
    display: none !important;
  }

  .port-m {
    display: block !important;
  }

  .d-flex {
    display: inherit !important;
  }

  .swiper-container.banner {
    height: 100%;
  }

  .swiper-container.banner .bg {
    width      : 50%;
    height     : 50px;
    line-height: 52px;
  }

  .banner {
    height    : 180px;
    position  : relative;
    text-align: center;
  }

  .banner img {
    height: 100%;
  }

  .banner .tx {
    width    : 100%;
    position : absolute;
    top      : 50%;
    left     : 50%;
    height   : auto;
    transform: translate(-50%, -30%);
    color    : #fff;
    z-index  : 9;
  }

  .banner .tx h2 {
    font-weight  : normal;
    margin-bottom: 3%;
    font-size    : 24px;
  }

  .banner .tx p {
    font-size: 16px;
  }



  /*移动端样式*/


  .on {
    width   : 100%;
    height  : 100%;
    position: absolute;
  }

  .on .head-top,
  .on .nav {
    background: #333;
  }

  .nav {
    padding : 3%;
    position: fixed !important;
    width   : 100%;
    height  : 92%;
    z-index : 22;
    top     : 8%;
    left    : 0;
    display : none;
  }

  .nav li {
    border-bottom: 1px solid #666;
    line-height  : 40px;
  }

  .nav li>a {
    color    : #fff;
    font-size: 14px;
    position : relative;
    display  : block;
  }

  .nav li>a i {
    position          : absolute;
    right             : 0;
    bottom            : 6px;
    background        : url(../images/icon/nav_03.png) no-repeat center;
    width             : 30px;
    height            : 30px;
    -webkit-transition: .5s;
    -moz-transition   : .5s;
    -ms-transition    : .5s;
    -o-transition     : .5s;
    transition        : .5s;
  }

  .head-top {
    width          : 100%;
    height         : 8%;
    position       : fixed;
    left           : 0;
    top            : 0;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    z-index        : 23;
    padding        : 2% 5%;
    background     : rgba(0, 0, 0, .2);
  }

  .head-top a {
    width: 48%;
  }

  .head-top img {
    width: 100%;
  }

  .menu_click {
    width   : 30px;
    height  : 36px;
    position: relative;
    cursor  : pointer;
    float   : right;
  }

  .menu_click li {
    position          : absolute;
    height            : 2px;
    background        : #fff;
    -webkit-transition: .5s;
    -moz-transition   : .5s;
    -ms-transition    : .5s;
    -o-transition     : .5s;
    transition        : .5s;
  }

  .menu_click li.li_1 {
    top  : 5px;
    left : 0;
    width: 20px;
  }

  .menu_click li.li_2 {
    top  : 17px;
    left : 0;
    width: 30px;
  }

  .menu_click li.li_3 {
    bottom: 5px;
    left  : 0;
    width : 25px;
  }

  .menu_click.on li.li_1 {
    top              : 49%;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    -ms-transform    : rotate(45deg);
    -o-transform     : rotate(45deg);
    transform        : rotate(45deg);
    width            : 30px;
    height           : 2px;
  }

  .menu_click.on li.li_2 {
    display: none;
  }

  .menu_click.on li.li_3 {
    bottom           : 45%;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    -ms-transform    : rotate(-45deg);
    -o-transform     : rotate(-45deg);
    transform        : rotate(-45deg);
    width            : 30px;
    height           : 2px;
  }


  .banner img,
  .nbanner img {
    width : 100%;
    height: 100%;
  }

  .banner .tx h2 {
    font-size: 24px;
  }

  .fnav,
  .mid,
  .link {
    display: none;
  }

  .footer .top {
    padding: 3% 0;
  }

  .footer .weixin {
    width : 50%;
    margin: 0 auto;
    float : none;
  }

  .footer .weixin img {
    width : 60%;
    margin: 4% 0;
  }

  .footer .bot {
    line-height: 50px;
    height     : 50px;
  }
}