@charset "utf-8";

html, body {

  padding: 0;

  margin: 0;

  background: #fff;

}

.detail{ text-align: center;}
.imds{ text-align: center;}
* {

  margin: 0;

  padding: 0;

  font-family: Arial, Helvetica, Verdana, 'Microsoft YaHei';

  border: 0;

  outline: medium;

  text-shadow: none;

  text-decoration: none;

}



body {

  color: #333;

  font-size: 14px;

  line-height: 1.5;

  position: relative;

  -webkit-text-size-adjust: none;

  -ms-text-size-adjust: none;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  overflow-x: hidden;

}



input {

  vertical-align: middle;

}



textarea {

  resize: none;

}



h1, h2, h3, h4, h5, h6 {

  font-weight: normal;

  font-size: 14px;

}



hr {

  border-width: 1px;

  border-style: inset;

}



ul {

  list-style: none;

}



p {

  margin: 0;

}



a, a:link, a:active, a:visited, a:hover {

  text-decoration: none;

}



i {

  display: block;

}



i, em {

  font-style: normal;

}

html{

  height: 100%;

}

html, body {

  width: 100%;

  min-height: 100%;

}

.fr{float: right;}

.fl{float: left;}



/* head */

.head{width: 100%;position: fixed;top: 0;left: 0;height: 100px;z-index: 4;background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.6));}



.headleft,.headright{float: left;width: 100%;height: 100px;text-align: center;}



.headleft .logo{height: 100%;}

.headleft .logo a,.headleft .logo a h1{display: inline-block;width: 100%;margin: 0;height: 100%;}

.headleft .logo a h1 img{display: inline-block;max-width: 80%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);max-height: 70%;}

.headright .nav{width: calc(100% - 230px);float: left;}

.headright .nav .navBox ul{margin: 0;}

.headright .nav .navBox ul .child{display: block;float: left;width: 12.5%;text-align: center;line-height: 100px;font-size: 16px;transition: all 0.3s;position: relative;}

.headright .nav .navBox ul .child>a{color: #fff;}



.headright .nav .navBox ul .child .childContent{padding: 10px 0;transform: rotateX(90deg);transform-origin: top;transition: all 0.3s;position: absolute;min-width: 100%;}

.headright .nav .navBox ul .child .childContent li{width: 100%;line-height: 50px;white-space: nowrap;padding: 0 5px;}

.headright .nav .navBox ul .child .childContent li a{color: #fff;display: inline-block;width: 100%;height: 100%;}



.headright .nav .navBox ul .child .childContent li:hover{background-color: rgba(0, 0, 0, 0.2);}

.headright .nav .navBox ul .child:hover{background-color: #1260DB;}

.headright .nav .navBox ul .child:hover .childContent{transform: rotateX(0deg);background-color: #1260DB;}



.headright .headtel{width: 230px;float: left;height: 100px;line-height: 100px;font-size: 22px;font-style: italic;font-weight: bold;color: #fff;}

.headright .headtel img{display: inline-block;}

.headright .headtel strong{display: block;float: left;width: 100%;}





/* wapnav */

.menu-btn {

  position: absolute;

  z-index: 3;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 105px;

  height: 43px;

  border-radius: 22px;

  cursor: pointer;

  transition: 0.4s 0.2s;

  background: rgba(0, 0, 0, 0.2);

  top: 50%;

  right: 3%;

  transform: translateY(-50%);

}

.menu-btn p {

  margin-right: 10px;

  color: #fff;

  font-size: 15px;

  text-transform: uppercase;

  transition: 0.4s 0.2s;

}

.menubtn {

  position: relative;

  z-index: 20;

  float: right;

  cursor: pointer;

  transition: 0.4s;

  cursor: pointer;

}

.menubtn span {

  display: block;

  width: 18px;

  height: 2px;

  background: #fff;

  position: relative;

  vertical-align: middle;

  -webkit-transition-duration: .3s,.3s;

  -moz-transition-duration: .3s,.3s;

  -ms-transition-duration: .3s,.3s;

  -o-transition-duration: .3s,.3s;

  transition-duration: .3s,.3s;

  -webkit-transition-delay: .3s,0s;

  -moz-transition-delay: .3s,0s;

  -ms-transition-delay: .3s,0s;

  -o-transition-delay: .3s,0s;

  transition-delay: .3s,0s;

}



.menubtn span:after, .menubtn span:before {

  content: "";

  position: absolute;

  display: inline-block;

  width: 100%;

  height: 2px;

  left: 0;

  background-color: #fff;

  -webkit-transition-duration: .3s,.3s;

  -moz-transition-duration: .3s,.3s;

  -ms-transition-duration: .3s,.3s;

  -o-transition-duration: .3s,.3s;

  transition-duration: .3s,.3s;

  -webkit-transition-delay: .3s,0s;

  -moz-transition-delay: .3s,0s;

  -ms-transition-delay: .3s,0s;

  -o-transition-delay: .3s,0s;

  transition-delay: .3s,0s;

}

.menubtn span:before {

  top: -6px;

  -webkit-transition-property: top,transform;

  -moz-transition-property: top,transform;

  -ms-transition-property: top,transform;

  -o-transition-property: top,transform;

  transition-property: top,transform;

}

.menubtn span:after {

  bottom: -6px;

  -webkit-transition-property: bottom,transform;

  -moz-transition-property: bottom,transform;

  -ms-transition-property: bottom,transform;

  -o-transition-property: bottom,transform;

  transition-property: bottom,transform;

}

.menubtn.active span {

  background-color: transparent;

  -webkit-transition-delay: 0s,0s;

  -moz-transition-delay: 0s,0s;

  -ms-transition-delay: 0s,0s;

  -o-transition-delay: 0s,0s;

  transition-delay: 0s,0s;

}

.menubtn.active span:after, .menubtn.active span:before {

  -webkit-transition-delay: 0s,.3s;

  -moz-transition-delay: 0s,.3s;

  -ms-transition-delay: 0s,.3s;

  -o-transition-delay: 0s,.3s;

  transition-delay: 0s,.3s;

}

.menubtn.active span:before {

  top: 0px;

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}

.menubtn.active span:after, .menubtn.active span:before {

  -webkit-transition-delay: 0s,.3s;

  -moz-transition-delay: 0s,.3s;

  -ms-transition-delay: 0s,.3s;

  -o-transition-delay: 0s,.3s;

  transition-delay: 0s,.3s;

}

.menubtn.active span:after {

  bottom: 0px;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

}



.menu-flex.show {

  visibility: visible;

  pointer-events: visible;

}

.menu-flex {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  visibility: hidden;

  pointer-events: none;

  transition: 0.88s;

}

.menu-flex.show .menu-bg {

  opacity: 1;

  visibility: visible;

  transition: 0.88s 0s;

}

.menu-bg {

  position: absolute;

  left: 0;

  top: 0;

  background: rgba(0, 0, 0, 0.5);

  width: 100%;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  transition: 0.88s 0.3s;

  z-index: 9;

}

.menu-flex.show .menu-right {

  right: 0;

}

.menu-right {

  position: absolute;

  right: -330px;

  top: 0;

  width: 60%;

  max-width: 330px;

  height: 100%;

  background: #fff;

  transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1);

  z-index: 10;

}

.menu-list {

  padding-top: 100px;

  margin: 0 30px;

}

.menu-list > li {

  position: relative;

  z-index: 3;

  border-bottom: 1px solid #ebebeb;

}

.menu-list > li > a {

  display: block;

  position: relative;

  z-index: 2;

  padding-left: 42px;

  color: #333333;

  font-size: 16px;

  height: 59px;

  line-height: 59px;

}

.menu-list > li > a:before {

  position: absolute;

  left: 0;

  bottom: 0;

  content: "";

  width: 100%;

  height: 0;

  background: #6ef944;

  transition: 0.38s;

  z-index: -1;

}



.area{width: 100%;padding: 0 15px;}

.area h2{font-size: 32px;}

.area h2 span{font-size: 16px;color: #999999;font-weight: normal;}

.n-area{width: 100%;max-width: 1400px;margin: 0 auto;overflow: hidden;}



table tr td{border: 1px solid #222;padding: 5px;}





/* foot */

.footer{background-color: #222;color: #fff;padding: 2% 0;}

.footer .foot-l{padding: 0 7%;}

.footer .foot-l img{max-width: 80%;}

.footer .foot-l p:nth-child(2) i{color: #1260DB;display: inline-block;font-size: 30px;font-weight: bold;margin: 5% 0 4%;}

.footer .foot-r{padding: 0 5%;color: #999;}

.footer .foot-r p{line-height: 35px;}





@media screen and (min-width: 0px) and (max-width:992px){

  .product .proli a .pro-tit p{font-size: 14px;}

  .area h2{font-size: 24px;}

}

@media screen and (min-width: 0px) and (max-width:768px){

  .head,.headleft,.headright{height: 65px!important;}

  .footer .foot-l img{margin-top: 5%;}

  .footer .foot-l{padding: 0 5%;}

}

@media screen and (min-width: 0px) and (max-width:375px){

  .menu-list > li > a{font-size: 14px;padding-left: 30px;}

}

@media screen and (min-width: 0px) and (max-width:320px){

  .footer .foot-l img{margin-bottom: 5%;}

  .menu-list{padding-top: 60px;}

}