@charset "utf-8";

html{overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th{margin:0;padding:0;}
fieldset,img {border:0;}
ul,li,ol {list-style:none;}
select,input{vertical-align:middle;}
a{color:#333333; text-decoration:none; outline:none;star:expression(this.onFocus=this.blur());}
a:hover{ text-decoration: underline;}
.fl { float:left;}
.fr { float:right;}
.none {display:none;}
body, html {width:100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;display: -webkit-box;-webkit-box-orient: vertical; -webkit-box-align: center;}

/* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解决某些情况下出现闪屏的问题，若无则不加*/
body{opacity: 1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; }
html{ font-size: 625%; } 
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; } 
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; } 
}
@media screen and (min-width:375px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 312.5%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
    html { font-size:400%;}
} 
@media screen and (min-width:640px)and (max-width:719px) and (orientation:portrait){
    html { font-size:533.33%;}
} 
@media screen and (min-width:720px)and (max-width:749px) and (orientation:portrait){
    html { font-size:600%;}
} 
@media screen and (min-width:720px)and (max-width:1024px) and (orientation:portrait){
    html { font-size:625%;}
} 
@media screen and (min-width:1025px) and (orientation:portrait){
    html { font-size:625%;}
}
/* 按750尺寸界面效果 1rem=100px */
body { font-size:13px; background:#ffffff; color:#333333;}

/* style */
.servername_top {width:100%; height:7.6rem; display:block; background:url(../images/servername_bg01.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.servername_cen {width:100%; height:8.8rem; display:block; background:url(../images/servername_bg02.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.servername_bot {width:100%; height:1.2rem; display:block; background:url(../images/servername_bg03.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative; color:#333333;}

.servername_logo {width:4rem; height:2rem; display:block; text-indent:-999rem; overflow:hidden; position:absolute; left:50%; top:-0.3rem; margin-left:-6.2rem; z-index:9;}

.servername_btn {width:4.2rem; height:1.6rem; display:block;text-indent:-999rem; overflow:hidden; background:url(../images/servername_btn.png) no-repeat; background-size:100%; position:absolute; left:50%; top:3.2rem; margin-left:-4.5rem;}
.servername_btn:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}


/* 右浮導航 */
.point_right { position:absolute; position:fixed; right:0rem; top:50%; z-index:9; margin-top:-2rem; width:2.1rem;}

.point_right a {width:2.1rem; height:0.8rem; margin:0; text-indent:-999rem; overflow:hidden; float:left; position:relative;}

.point_right a.m5 {display:none;}
.point_right a:before {content:''; width:2.1rem; height:0.8rem; text-indent:-999rem; display:block; overflow:hidden; position:absolute; left:0; top:0; z-index:2;}
.point_right a.m1:before {background:url(../images/servername_menu1.png) no-repeat;}
.point_right a.m2:before {background:url(../images/servername_menu2.png) no-repeat;}
.point_right a.m3:before {background:url(../images/servername_menu3.png) no-repeat;-webkit-filter:hue-rotate(-70deg);}
.point_right a.m4:before {background:url(../images/servername_menu4.png) no-repeat;-webkit-filter:hue-rotate(-260deg);}
.point_right a.m5:before {background:url(../images/servername_menu5.png) no-repeat;}
.point_right a.m6:before {background:url(../images/servername_menu6.png) no-repeat;}
.point_right a.m7:before {background:url(../images/servername_menu7.png) no-repeat;}
.point_right a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}



@media screen and (max-width:1024px) and (orientation:portrait) {
.servername_top {width:100%; height:6rem; display:block; background:url(../images/servername_m_bg01.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.servername_cen {width:100%; height:12.2rem; display:block; background:url(../images/servername_m_bg02.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.servername_bot {width:100%; height:2.4rem; display:block; background:url(../images/servername_m_bg03.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative; color:#333333;}

.servername_logo {width:2.8rem; height:1.2rem; position:absolute; left:50%; top:-0.2rem; margin-left:-3.75rem;}

.servername_btn {position:absolute; left:50%; top:3.2rem; margin-left:-2.1rem;}



/* 底部導航 */
.point_right { position:absolute; position:fixed; left:0; right:auto; top:auto; bottom:0; z-index:9; margin-top:0px; width:100%;}
.point_right a {width:20%; height:0.8rem; margin:0; text-indent:-999rem; float:left; overflow:hidden; background:url(../images/servername_m_menubg.png) no-repeat right -0.8rem; background-size:auto 200%; position:relative;}
.point_right a.m6 {display:none;}
.point_right a.m4 {-webkit-filter:hue-rotate(160deg);}

.point_right a:after {content: ''; width:100%; height:0.8rem; text-indent:-999rem; display:block; overflow:hidden; background:url(../images/servername_m_menubg.png) no-repeat left -0rem; background-size:auto 200%; position:absolute; left:0; top:0; z-index:1;}
.point_right a:before {content: ''; width:1.6rem; height:100%; text-indent:-999rem; display:block; overflow:hidden; position:absolute; left:50%; top:0; margin-left:-0.8rem; z-index:2;}
.point_right a.m1:before {background:url(../images/servername_m_menu1.png) no-repeat; background-size:100%;}
.point_right a.m2:before {background:url(../images/servername_m_menu2.png) no-repeat; background-size:100%;}
.point_right a.m3:before {background:url(../images/servername_m_menu3.png) no-repeat; background-size:100%;}
.point_right a.m4:before {background:url(../images/servername_m_menu4.png) no-repeat; background-size:100%;}
.point_right a.m5:before {background:url(../images/servername_m_menu5.png) no-repeat; background-size:100%;}
.point_right a.m6:before {background:url(../images/servername_m_menu6.png) no-repeat; background-size:100%;}
.point_right a.m7:before {background:url(../images/servername_m_menu7.png) no-repeat; background-size:100%;}
.point_right a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}
}