/*------------------
author:steven
email:23231590@qq.com
-----------------*/
@charset "utf-8";
body , html { color:#000000; height:100%; font:100%/1.8 ; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
* { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0; letter-spacing: 1px; }
body { -webkit-text-size-adjust: none!important; background-color: #ededed; color: #333333; }
img { vertical-align: top; }
a { text-decoration: none;}

/*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; } }

.header { background-color: #231e1b; height: 50px; position: fixed;  top: 0; left: 0; width: 100%; padding: 13px 10px; display: flex;  justify-content:space-between;  z-index: 10000;}
.header img {  height: 24px; }

.banner { background: url("../img/banner0.jpg") center top; background-size: cover; height: 200px; margin-top: 50px; }
.banner div {  text-align: right; color: #ffffff; font-weight: 500; padding: 110px 20px 0 0; }
.banner div p { font-size: 16px; }
.banner div p.big { font-size: 20px;} 
.p_banner_1 { background: url("../img/p_banner_1.jpg") center top; background-size: cover; height: 200px; margin-top: 50px; }
.p_banner_2 { background: url("../img/p_banner_2.jpg") center top; background-size: cover; height: 120px; margin-top: 50px; }

.main { width: 100%; padding: 10px 10px 0 10px; }
.main .bok { width: 100%; padding: 10px; text-align: center; background-color: #ffffff; }
.main .bok img { width: 100%; margin-top: 10px; }
.main .bok h2 { width: 100%; font-size: 18px; padding: 6px 0; font-weight: 500; }
.main .bok h3 { width: 100%; font-size: 12px; font-weight: 500; }
.main .bok h3 span { padding: 0 5px; }

.wrapper { width: 100%; padding: 10px 20px 0 20px; }
.wrapper h2 { text-align: center; padding: 30px 0 30px 0; font-weight: 700; font-size: 30px; }
.wrapper h3 { padding: 30px 0 10px 0; font-weight: 700; font-size: 30px; width: 100%;  margin: 0 auto; }
.wrapper h4 { padding: 10px 0 10px 0; font-weight: 700; font-size: 28px; width: 100%;  margin: 0 auto; }
.wrapper .about { padding:0 0 30px 0; width: 100%; margin: 0 auto; font-size: 14px; line-height: 2; text-align: center; }
.wrapper .join { padding:0 0 30px 0; width:  100%; margin: 0 auto; font-size: 14px; line-height: 2;  }
.wrapper .img { text-align: center; width:  100%;}

.navclass { margin-top: 70px; font-size: 13px; display: flex; justify-content: space-between; padding:0 20px; }
.navclass a {  border: 1px solid #cccccc; color: #666666; padding:6px; }
.navclass a.this { border: 1px solid #000000; background-color: #000000; color: #ffffff; }

.product { width: 100%; padding: 10px 10px 10px 10px; display: flex; justify-content: space-between; flex-wrap: wrap;  }
.product .bok {  padding:10px; text-align: center; width: 50%; }
.product .bok img { width: 100%;}
.product .left { padding:10px 0 0 0; }
.product .left img  { width: 100%;}
.product .right { padding: 20px 10px 0 10px; }
.product .right dl {  padding: 0 0 10px 0; border-bottom:  1px solid #e6e6e6; }
.product .right dl:last-child { border-bottom: 0; }
.product .right dl dt { width: 100%;  padding: 10px 0 6px 0; font-weight: 700; font-size: 16px;}
.product .right dl dd {  padding: 0 0 20px 0;  font-size: 14px; }

.container { width: 100%; padding: 60px 10px 20px 10px; text-align: center; }
.container p { width: 100%; padding: 10px 10px 0 10px; }
.container #container { height: 500px; margin-top: 20px; z-index: 10;}

.iabout { padding: 20px 0;  text-align: center; font-size: 14px; line-height: 26px; }
.iabout img { margin:0 0 10px 0; width: 160px;}

#botton { background-color: #000000; color: #ffffff; font-size: 12px; padding: 10px 0; text-align: center; }
#botton p {  padding: 2px 0; }
#botton p a { color: #ffffff; text-decoration: none;  }