/*------------------
author:steven
email:23231590@qq.com
-----------------*/
@charset "utf-8";
/* CSS Document */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{border-radius:0px;}
::-webkit-scrollbar-track-piece{ background: #f1f1f1; }
::-webkit-scrollbar-thumb{  background: #000000; border-radius:0px;}
::-webkit-scrollbar-thumb:hover{background: #000000;}
::-webkit-scrollbar-corner{ background: #000000;}

* { margin:0px; padding:0px; box-sizing:border-box;}
*:focus {outline: none; } 
em , i { font-style:normal; } 
h1 , h2 , h3 , h4 , h5 { font-weight:normal; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } 
body {font:14px/1.8 "\5FAE\8F6F\96C5\9ED1",Arial,"\5B8B\4F53"; color:#000000; background-color: #f5f5f5; letter-spacing: 1px; }
img { border:none; vertical-align: top; }
.arial { font-family:Arial; }
a { color:#666666; text-decoration:none; cursor:pointer; }
a:hover { color:#000000; }
#top , #logo , .nav , #banner , .banner , .banner_1 , .main , .wrapper , .iabout , #footer , #botton , .botnav , .navclass , .product { width:100%; margin:0 auto; overflow:hidden; }

/*loading*/
.preloader { position: fixed;left: 0; top: 0;right: 0; bottom: 0; width: 100%; height: 100%; z-index: 99999; background-color: #ffffff; display: flex;}
.spinner { width: 40px; height: 40px; margin: auto; background-color: #d7d7d7 ; border-radius: 50%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }
@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% {-webkit-transform: scale(1.0);  opacity: 0; }}
@keyframes sk-scaleout { 0% { -webkit-transform: scale(1.0); transform: scale(1.0); } 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } }

/* #top */
#top { width: 100%; }
#top .left { background-color: #231e1b; width: 50%; height: 5px;  float: left; }
#top .right { background-color: #7b7977; }
/* #logo */
#logo { text-align: center; padding: 30px 0; border-bottom: 1px solid #dcdcdc; }
#logo a { width: 150px; height: 55px; background: url("../img/logo.png") center; display: block; margin: 0 auto; }
/* #nav */
.nav { text-align: center; padding: 20px 0; font-size: 15px; }
.nav a { color: #666666; margin: 0 30px ; }
.nav a.this { color: #000000; }
.nav_shadow {position:fixed; top:0; padding:20px 0; -moz-box-shadow:0px 0px 6px #a3a3a3; -webkit-box-shadow:0px 0px 6px #a3a3a3; box-shadow:0px 0px 6px #a3a3a3; background:#f5f5f5; z-index:999999999; }

/* #banner */
#banner {  height: 700px; margin: 0 5%; width: 90%;  background: url("../img/banner0.jpg") center top; background-size: cover;}
#banner div {  text-align: right; color: #ffffff; font-weight: 500; padding: 400px 100px 0 0; }
#banner div p { font-size: 26px; text-shadow: 2px 2px #000000;}
#banner div p.big { font-size: 40px;} 

/* .banner */
.banner {  height: 700px; margin: 0 5%; width: 90%;  background: url("../img/p_banner_1.jpg") center top; background-size: cover;}
.banner_1 {  height: 460px; margin: 0 5%; width: 90%;  background: url("../img/p_banner_2.jpg") center top; background-size: cover;}

.main { padding: 30px 0 0 0; margin: 0 5%; width: 90%;  }
.main .left { float: left; text-align: center; width: 35%; }
.main .right { float: left; text-align: center; width: 65%; height: 560px; }

.tips { padding: 190px 0 0 0; }
.tips h2 { padding: 10px 0; font-weight: bold; }
.tips h3 { color: #666666; }
.tips h3 span { padding: 0 6px; }
.tips a { border: 1px solid #666666; margin: 30px auto 0 auto; padding: 10px; display: block; width: 100px; }
.tips a:hover { border: 1px solid #00000; }

.iabout { padding: 30px 0 0 0; margin: 0 5%; width: 90%; }
.iabout .bok { width: 50%; float: left; text-align: center; height: 500px; font-size: 16px; }
.iabout .bok img { margin:100px 0 20px 0;}

.navclass { text-align: center; padding: 20px 0; }
.navclass a { margin: 0 20px; border: 1px solid #cccccc; color: #666666; padding:6px 16px; }
.navclass a.this { margin: 0 20px; border: 1px solid #000000; background-color: #000000; color: #ffffff; }

.wrapper { margin: 0 5%; width: 90%;  }
.wrapper h2 { text-align: center; padding: 80px 0 30px 0; font-weight: 700; font-size: 30px; }
.wrapper h3 { padding: 30px 0 10px 0; font-weight: 700; font-size: 30px; width: 1100px;  margin: 0 auto; }
.wrapper .about { padding:0 0 30px 0; width: 1100px; margin: 0 auto; font-size: 16px; line-height: 2; text-align: center; }
.wrapper .join { padding:0 0 30px 0; width: 1100px; margin: 0 auto; font-size: 16px; line-height: 2;  }
.wrapper .img { margin:20px 0 0 0; text-align: center;}

.product { width: 1400px; }
.product .bok {  float: left; padding: 20px; text-align: center; }
.product .left { width: 400px; float: left; padding: 80px 0; }
.product .right { width: 1000px; float: left; padding: 80px 0 0 80px; }
.product .right dl { float: left; padding: 20px 0 20px 0; border-bottom:  1px solid #e6e6e6; }
.product .right dl:last-child { border-bottom: 0; }
.product .right dl dt { width: 1000px; float: left; padding: 10px 0 10px 0; font-weight: 700; font-size: 16px;}
.product .right dl dd { width: 1000px;  padding: 0 0 20px 0;  font-size: 16px; }


#footer { background-color: #231e1b; margin-top: 30px; }
#footer .botnav { width: 800px; padding: 40px 0; color: #f5f5f5; }
#footer .botnav .bok { width: 200px; float: left; }
#footer .botnav .bok p { font-size: 18px; padding-bottom: 6px; }
#footer .botnav .bok a { display: block; width: 200px; color: #f5f5f5; padding: 2px 0; }
#footer .botnav .bok a:hover { text-decoration: underline; }
#botton { text-align: center; padding: 10px 0; color: #666666; }
#botton a { margin-left: 10px; }

.bottom_tools { position:fixed;z-index:100; right:-10px;  }
.scrollUp { width:50px;height:50px; display:none; background:url(../img/top.png) #e4e4e4 no-repeat 0 0; border-top:0; border-radius:100px; margin-right:20px; }
.scrollUp:hover { background:url(../img/top.png) #bfbfbf no-repeat 0 0; }