.wrapper { width: 1200px; margin: 0 auto; }
.container { display: inline-block; width: 100%; padding: 0 10px; background: #fff; box-sizing: border-box; }

.header { width: 100%; }
.header .top_bg { width: 100%; min-width: 1180px; margin: 0 auto; height: 35px; background: #fafafa; border-bottom: 1px solid #f5f5f5; }
.header .top { position: relative; width: 1180px; margin: 0 auto; }
.header .top a { color: #666; }
.header .top a:hover { opacity: 0.8 }

.header .top .left li { display: inline-block; height: 35px; margin-right: 20px; float: left; }
.header .top .left li:nth-of-type(2) { margin: 0 10px 0 -10px; }
.header .top .left li a { height: 35px; line-height: 35px; color: #666; font-size: 12px; }
.header .top .left li span { display: block; width: 78px; height: 36px; line-height: 36px; padding: 0 10px; font-size: 12px; color: #666; cursor: pointer; }
.header .top .left li span.show { color: #ffffff; background-color: #178ff3; }
.header .top .left li span i { width: 13px; height: 10px; margin-top: 12px; background: url(icon.png) no-repeat; }
.header .top .left li span i:nth-child(1) { float: left; background-position: -10px -10px; }
.header .top .left li span i:nth-child(2) { float: right; background-position: -70px -6px; }
.header .top .left li:hover span i:nth-child(1) { background-position: -30px -10px; }
.header .top .left li:hover span i:nth-child(2) { background-position: -90px -16px; }
.header .top .left li p { display: none; position: absolute; left: 0; z-index: 100; /*width: 505px;*/ width: 570px; height: 40px; font-size: 12px; background: #178ff3; box-sizing: border-box; }
.header .top .left li p a { display: inline-block; width: 60px; font-size: 14px; color: #ffffff; text-align: center; text-decoration: none; }
.header .top .left li P a:hover { text-decoration: none; opacity: 0.8; }
.header .top .right { float: right; display:none; }
.header .top .right li { display: inline-block; float: right; margin-right: 10px; }
.header .top .right li:first-child { margin-right: 0; }
.header .top .right li img { vertical-align: top; margin-top: 10px; border-radius: 3px; }
.header .top .right a { display: block; height: 35px; line-height: 35px; font-size: 12px; cursor: pointer; }
.header .top .right .login- { display: none; }

.pages { text-align: center; margin: 10px 0; }
.pages span, .pages a { display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; color: #666; border: 1px solid #dcdcdc; margin: 0 8px 0 0; padding: 0; }
.pages span, .pages a:hover { color: #fff; border: 1px solid #178ff3; background: #178ff3; }
.pages font a { width: auto; padding: 0 5px; }

.footer { display: inline-block; width: 100%; margin: 0 auto; margin-top:20px; color: #999; background: #f3f3f3; border-top: 1px solid #eee; box-sizing: border-box; }
.footer .content { width: 1200px; margin: 0 auto; padding: 20px 0; line-height: 22px; background: #f3f3f3; font-size: 12px; font-family: "Arial"; text-align: center; _float: none; clear: both; }
.footer a { margin: 0 8px 0 8px; }
.footer a:link, .footer a:visited { color: #999; text-decoration: none; }
.footer a:hover, .footer a:active { color: #595959; }

/* chat */
#chat { position: fixed; z-index: 100; height: 255px; right: 50%; margin-right: -665px; top: 50%; margin-top: -75px; }
#chat > div { display: none; overflow: hidden; position: absolute; left: -151px; height: 151px; border: 1px solid #f0f0f0; }
#chat a { text-decoration: none; }
#chat img { border: none; border-radius: 0px; }
#chat a { display: block; overflow: hidden; z-index: 10; width: 50px; height: 50px; line-height: 78px; color: #fff; font-size: 10px; background-size: 20px; text-align: center; }
#chat a.gzh { background: #1a1a1a url(mark.svg) 15px 8px no-repeat; display: none; }
#chat a.gzh:hover { background: #d22222 url(mark.svg) 15px 8px no-repeat; }
#chat a.wx { background: #1a1a1a url(mark.svg) 15px 8px no-repeat; border-top: 1px #f0f0f0 solid; }
#chat a.wx:hover { background: #81bc06 url(mark.svg) 15px 8px no-repeat; }
#chat a.qq { background: #1a1a1a url(qq.svg) 12px 5px no-repeat; background-size: 27px; border-top: 1px #f0f0f0 solid; }
#chat a.qq:hover { background: #0fcd9e url(qq.svg) 12px 5px no-repeat; background-size: 27px; }
#chat a.write { background: #1a1a1a url(write.svg) 15px 8px no-repeat; border-top: 1px #f0f0f0 solid; display: none; }
#chat a.write:hover { background: #ffba08 url(write.svg) 15px 8px no-repeat; }
#chat a.up { background: #1a1a1a url(up.svg) 15px 8px no-repeat; border-top: 1px #f0f0f0 solid; }
#chat a.up:hover { background: #2e6cf3 url(up.svg) 15px 8px no-repeat; }
#chat .gzh_img { top: 0; }
#chat .wx_img { top: 0; }
#chat img { width: 150px; height: 150px; }
@media screen and (min-width:1200px) {
    #chat { right: 50%; margin-right: -665px; }
}

.pre,
.nex { position: fixed; z-index: 99; width: 90px; height: 200px; top: 50%; margin-top: -75px; left: 50%; background: url(pre_nex.png) no-repeat; cursor: pointer; opacity: 0.05; display: none; }
.pre { margin-left: -765px; background-position: 0 0; }
.nex { margin-left: 675px; background-position: -90px 0; }
.pre:hover,.pre:active,
.nex:hover,.nex:active { opacity: 0.2; }

.mt8 { margin-top:8px; }
.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }