@charset "utf-8";
body{ margin:0; padding:0; font:normal 100% "Microsoft YaHei",\5b8b\4f53,Arial, Helvetica, sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0);}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
area{outline:none;}
img{ border:0;}
input{ -webkit-appearance: none; border-radius: 0;}
ol,ul{list-style:none;}
a{ text-decoration:none; outline:none;}
/*公用浮动*/
.f_left{ float: left}
.f_right{ float: right}
/*浮动清理*/
.cf:before,.cf:after{content:".";display:block;height:0;visibility:hidden}
.cf:after{clear:both}
.cf{zoom:1}
.pub_clr{clear:both;font-size:0;height:0;line-height:0;overflow:hidden;}
.auto{left: 50%; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0);}
.box_justify{ display: -webkit-box; display: -moz-box; display: -o-box; display: -ms-box; -webkit-box-pack:justify; -moz-box-pack:justify; -o-box-pack:justify; -ms-box-pack:justify; box-pack:justify;}

html,body{ overflow: hidden; width: 100%; height: 100%;}
body{ position: relative;}

/*index*/
.index{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; overflow-y: auto; background:#e6e1f5 url(../images/bg_index.jpg) no-repeat center top; background-size: 100% auto;}
.top{ position: fixed; top: 0; left: 0; width: 100%; height: 108px; background: url(../images/top.png) no-repeat 0 0; background-size: 100% auto;  z-index:2;}
.top .logo{ width: 157px; margin: 11px 0 0 23px;}
.top .down, .top .website{ width: 210px; margin-top: 21px;}
.top .down{ margin-right: 11px;}
.top .website{ margin-right: 22px;}
.index_music_switch{ position: absolute; top: 131px; right: 32px; width: 80px; height: 80px; background: url(../images/index_music_switch.png) no-repeat 0 0; background-size: 100% auto;
	animation: myRotate 2s linear infinite;
}
@keyframes myRotate{
	0%   { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}
.index_music_switch.off{ background-position: 0 -80px;
	animation-play-state:paused;
}
.index_nav{ position: absolute; top: 747px; width: 660px; height: 331px;}
.index_nav a{ position: absolute; width: 152px; height: 171px; background: url(../images/index_nav.png) no-repeat;}
@keyframes up{
	0%   { top:1000px;}
	100% { top:542px;}
}
.index_nav a.n1{ top: 0; left: 0; background-position: 0 0; animation: up0 0.3s linear;}
.index_nav a.n2{ top: 0; left: 169px; background-position: -152px 0; animation: up0 0.6s linear;}
.index_nav a.n3{ top: 0; left: 339px; background-position: -304px 0; animation: up0 0.9s linear;}
.index_nav a.n4{ top: 0; left: 508px; background-position: -456px 0; animation: up0 1.2s linear;}
.index_nav a.n5{ top: 140px; left: 85px; background-position: -608px 0; animation: up140 1.2s linear;}
.index_nav a.n6{ top: 140px; left: 254px; background-position: -760px 0; animation: up140 1.5s linear;}
.index_nav a.n7{ top: 140px; left: 423px; background-position: -912px 0; animation: up140 1.8s linear;}
@keyframes up0{
	0%   { top:1000px;}
	100% { top:0;}
}
@keyframes up140{
	0%   { top:1000px;}
	100% { top:140px;}
}
.index_nav a.n1:active{ top: 0; left: 0; background-position: 0 -171px;}
.index_nav a.n2:active{ top: 0; left: 169px; background-position: -152px -171px;}
.index_nav a.n3:active{ top: 0; left: 339px; background-position: -304px -171px;}
.index_nav a.n4:active{ top: 0; left: 508px; background-position: -456px -171px;}
.index_nav a.n5:active{ top: 140px; left: 85px; background-position: -608px -171px;}
.index_nav a.n6:active{ top: 140px; left: 254px; background-position: -760px -171px;}
.index_nav a.n7:active{ top: 140px; left: 423px; background-position: -912px -171px;}
.bottom_link{ position: fixed; bottom: 0; left: 0; width: 100%; height: 87px; padding-top: 13px; text-align: center; background: url(../images/bottom_link.png) no-repeat 0 0; background-size: 100% auto;}
.bottom_link img{ margin: 0 5px; width: 211px;}

/*article*/
.article{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; overflow-y: auto; background:#dedcf2 url(../images/bg_article.jpg) no-repeat center top; background-size: 100% auto;}
.article .bottom_link{ height: 84px; padding-top: 16px;}
.article .bottom_link img{ margin: 0 23px; width: 254px;}
.header{ position: relative; padding-top: 108px; height: 139px; z-index:1;}
.back{ position: absolute; top: 131px; left: 32px; width: 80px; height: 80px; background: url(../images/back.png) no-repeat 0 0; background-size: 100% auto;}
.header .title{ position: absolute; top: 154px; height: 55px;}
.content{ width: 660px; margin: 0 auto; overflow-x: hidden; overflow-y: auto; font-size: 24px; color: #67597e;}
.content img{ display: block; margin: 0 auto; max-width: 660px;}
h2.sub_title{ font-size: 30px;}
.content li{ line-height: 36px;}
.content table{ border-top: 1px solid #FFF; border-left: 1px solid #FFF;}
.content td{ height: 44px; text-align: center; border-bottom: 1px solid #FFF; border-right: 1px solid #FFF;}
.content thead td{ background-color: #504367; font-size: 24px; color: #FFF;}
.content tbody td{ background-color: #d6d3e6; font-size: 20px; color: #504367;}