@charset "utf-8";

body,td,th,input,textarea,select{font-family: "Microsoft YaHei", 微软雅黑, "Open Sans", Economica, sans-serif; color:#777; outline:none;}
html{font-size:62.5%;}
html,body{background:#fff; height:100%;}
html,body,form{margin:0;}
img{border:0px none; vertical-align:middle; outline:none; max-width:100%;}
ul,dl{display:block; margin:0; padding:0;}
ul,dl{display:block; margin:0; padding:0;}
dd{margin:0; padding:0;}
li{list-style:none;}
p{display:block; margin:0; padding:0;}
a,button,input,img,div,p,li,span{border:0px none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;}
a{text-decoration:none; color:#777; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;}
a:active{color:#226e70;}
*:after{content:''; display:block; height:0; clear:both;}
#think_page_trace_open{z-index:999998;}
mark{display:inline-block;}

::selection{background:#ff4545; color:white;}
::-moz-selection{background:#ff4545; color:white;}

.wrap{max-width:1400px; margin:auto;}

#head{width:100%; position:fixed; z-index:9; height:100px; left:0; top:0; transition:height .35s, background .8s;}
#head .logo{width:220px; height:100%; padding-top:54px; float:left; transition:all .3s;}
#head .logo>a{display:block; position:relative;}
#head .logo>a>img{position:absolute; width:100%; height:auto; left:0; top:0; z-index:2;}
#head .logo>a>img.red{opacity:0; z-index:1;}
#head .logo>a>img.black{opacity:0; z-index:1;}
#head .logo>a:hover>img.red{opacity:1;}
#head .logo>a:hover>img.white{opacity:0;}
#head.small{background:rgba(0,0,0,.55); height:80px;}
#head.small .logo{padding-top:28px;}

body.dark #head .logo>a>img.white{opacity:0;}
body.dark #head .logo>a>img.black{opacity:1;}
body.dark #head .logo>a:hover>img.black{opacity:0;}

body.dark #head.small .logo>a>img.white{opacity:1;}
body.dark #head.small .logo>a>img.black{opacity:0;}
body.dark #head.small .logo>a:hover>img.white{opacity:0;}

#menu{width:500px; height:100%; float:right; text-align:right; margin-top:56px; transition:all .3s;}
#menu>a{display:inline-block; padding:2px 0; margin:0 16px; color:#fff; font-size:1.6rem; transition:all .2s; line-height:1.1; border-bottom:1px solid transparent;}
#menu>a:hover{color:#ff4545 !important;}
#menu>a.active{border-bottom:1px solid #fff;}
#menu>a.active:hover{color:#ff4545; border-bottom:1px solid #ff4545;}
#head.small #menu{margin-top:30px;}

#nav{display: none;}

body.dark #menu>a{color:#2d2d2d;}
body.dark #menu>a.active{border-bottom:1px solid #2d2d2d;}
body.dark #menu>a:hover.active{border-bottom:1px solid #ff4545;}
body.dark #head.small #menu>a{color:#fff;}
body.dark #head.small #menu>a.active{border-bottom:1px solid #fff;}
body.dark #head.small #menu>a:hover.active{border-bottom:1px solid #ff4545;}


#space{height:100%;}

/* Color */
.black1{color:#2d2d2d;}


#foot{height:400px; background:#000; position:relative; z-index:3; padding-top:100px; box-sizing:border-box;}
#foot .wrap{position:relative; z-index: 1;}

#top{position:absolute; width:44px; height:44px; top:-173px; right:-178px; z-index:4;}
#top>a{display:block; width:100%; height:100%; background:url('../img/top.png') center/100% no-repeat; transition:all .2s;}
#top>a:hover{background-image:url('../img/topA.png');}

#foot .l{width:350px; float:left;}
#foot .l .logo{width:258px;}
#foot .l .logo>a{display:block;}
#foot .l .con{color:#888; font-size:1.6rem; line-height:1.7; margin-top:18px;}

#foot .r{width:700px; float:right;}
#foot .r .rl{width:440px; float:left;}
#foot .r .rl .menu>a{display:inline-block; color:#888; font-size:1.8rem; margin-right:27px; line-height:1; transition:all .2s;}
#foot .r .rl .menu>a:hover{color:#bbb;}
#foot .r .rl .desc{color:#5b5b5b; font-size:1.6rem; margin-top:19px; border-bottom:1px solid #5b5b5b; padding-bottom:16px;}
#foot .r .rl .other{color:#5b5b5b; font-size:1.2rem; padding-top:13px;}
#foot .r .rl .other p{margin-bottom:8px;}
#foot .r .rl .other a{display:inline-block; color:#5b5b5b; transition:all .2s;}
#foot .r .rl .other a:hover{color:#464646;}

#foot .r .rr{width:228px; float:right;}
#foot .r .rr>div{width:100px; float:left; margin-right:28px; color:#5b5b5b; font-size:1.5rem; text-align:center;}
#foot .r .rr>div:last-child{margin-right:0;}
#foot .r .rr>div>img{display:block; margin-bottom:34px;}
#foot>.wrap>.other{display: none;}


@media (max-width:1440px){
  .wrap{max-width: 1320px;}

  #top{right:-20px;}
}
@media (max-width:1366px){
  /*html{font-size:60.25%;}*/
  .wrap{max-width: 1266px;}
}
@media (max-width:1280px){
  /*html{font-size:58.25%;}*/
  .wrap{max-width: 1180px;}
}
@media (max-width:1080px){
  html{font-size:58.25%;}
  .wrap{max-width:100%;}

  #space{height:80%;}

  #head{transition:height .25s, background .5s;}
  #head .logo{width:160px; height:100%; padding:20px; position: relative; z-index: 1000;}
  #head.small .logo{padding-top:29px;}


  #menu{width:100%; height:100%; float:none; text-align:center; margin:0 !important; position: fixed; z-index: 999; left: 0; top: 0; background: rgba(0,0,0,.9); padding-top: 35%; box-sizing: border-box; display: none;}
  #menu>a{display:block; padding:20px; margin:0 30%; font-size:2.6rem; border-bottom:1px solid transparent;}
  #menu>a.active{border-bottom:0px none; color: #ff4545;}

  #nav{display: block; position: absolute; z-index: 1000; width:30px; height: 30px; right: 15px; top: 13px; transition: all .2s;}
  #nav:before{content: ''; display: block; width:20px; height: 3px; background: #fff; position: absolute; left: 5px; top: 11px; transition: all .2s;}
  #nav:after{content: ''; display: block; width: 20px; height: 3px; background: #fff; position: absolute; left: 5px; bottom: 8px; transition: all .2s;}
  #nav:active:before, #nav:active:after{background: #ff4545;}
  #nav.active:before{transform: rotate(45deg); top: 15px; width: 22px;}
  #nav.active:after{transform: rotate(-45deg); bottom: 12px; width: 22px;}

  #head.small #nav{top:21px;}

  body.dark #nav:before, body.dark #nav:after{background: #2d2d2d;}
  body.dark #head.small #nav:before, body.dark #head.small #nav:after{background: #fff;}


  #foot{height:auto; padding-top: 30px;}

  #top{position:absolute; width:44px; height:44px; top:-50px; right:unset; left: 50%; margin-left: -22px; display: none;}

  #foot .l{width:100%; float:none; padding-top: 0;}
  #foot .l .logo{display: none;}
  #foot .l .con{padding: 0 20px; font-size: 1.45rem;}

  #foot .r{width:100%; float:none; margin-top: 20px; padding: 0 20px; box-sizing: border-box;}
  #foot .r .rl{width:100%; float:none;}
  #foot .r .rl .menu{display: none;}
  #foot .r .rl .menu>a{margin-right:20px;}
  #foot .r .rl .menu>a:last-child{margin-right: 0;}
  #foot .r .rl .desc{display: none;}
  #foot .r .rl .other{font-size:1.3rem; padding-top:0; display: none;}
  #foot .r .rl .other p{margin-bottom:2px;}

  #foot .sm-hide{display: none;}

  #foot .r .rr{width: unset; float: none; text-align: center; padding-bottom: 5px; box-sizing: border-box; margin: 30px 0 0 0;}
  #foot .r .rr>div{width: 20%; padding: 0; box-sizing: border-box; margin-right: 15px; font-size: 1.45rem;}
  #foot .r .rr>div:last-child{padding: 0;}
  #foot .r .rr>div>img{margin-bottom: 6px;}

  #foot>.wrap>.other{display: block; padding: 20px; font-size: 1.2rem; line-height: 1.62; color: #5b5b5b !important; padding-bottom: 65px;}
  #foot>.wrap>.other a{display: inline-block; color: #5b5b5b;}

  #foot .eshion{display: inline-block; overflow: hidden; height: 1px;}
}