html {height: 100%; overflow: hidden}
body {height:100%; background:#FFF; font-family:"Microsoft YaHei", Arial; font-size: 24px; line-height: 42px; margin:0; overflow: hidden}
a {color:#333; text-decoration:none}
ul,li,h1,h3,p {list-style:none; padding:0; margin:0}
img {border:0}

.bg {position:absolute; visibility: visible}
.topic {position: absolute; width:1072px; height: 872px; background: url(../images/topic.png) no-repeat 183px bottom; left:50%; bottom:0; margin-left: -536px}
.topic li {position: absolute; cursor: pointer}
.topic i {position:absolute; width: 100%; height: 100%; background: url(../images/cut.png) no-repeat; left:0; top:0; z-index: 2}
.topic p {position: absolute; width:0; height: 42px; padding:9px 0; background-color: #FFF; border-radius: 42px; white-space: nowrap; top:50%; margin-top: -30px; overflow: hidden; transition:width .3s}
.l p {margin-right: -40px; right:100%}
.r p {margin-left: -40px; left:100%; direction: rtl}
.topic .l:hover p {padding:9px 60px 9px 20px; width:120px}
.topic .r:hover p {padding:9px 20px 9px 60px; width:120px}
#t1 {width: 187px; height: 187px; left:37px; top:524px}
#t1 i {background-position: -37px -524px}
#t2 {width: 144px; height: 142px; left:0; top:229px}
#t2 i {background-position: 0 -229px}
#t3 {width: 151px; height: 151px; left:205px; top:15px}
#t3 i {background-position: -205px -15px}
#t4 {width: 124px; height: 124px; left:572px; top:0}
#t4 i {background-position: -572px 0}
#t5 {width: 168px; height: 168px; left:810px; top:70px}
#t5 i {background-position: -810px -70px}
#t6 {width: 143px; height: 143px; left:929px; top:347px}
#t6 i {background-position: -929px -347px}
#t7 {width: 133px; height: 131px; left:860px; top:561px}
#t7 i {background-position: -860px -561px}
#t8 {width: 126px; height: 122px; left:717px; bottom:45px}
#t8 i {background-position: -717px -705px}

.mask {position: absolute; width:100%; height: 100%; left:0; top:0; z-index: 3; display: none}
.video {position: absolute; background: #000; border:15px solid #F98C41; border-radius: 10px; left:50%; top:50%; box-shadow: 5px 5px 5px #666}
.close {position: absolute; width:43px; height: 43px; background: url(../images/cut.png) no-repeat -513px -383px; right:35px; top:-30px; cursor: pointer}
.play {position: absolute; width:100%; height: 42px; left:0; top:-42px; font-weight: bold; color: #D82A2F; text-shadow: 0 0 5px #FFF;  text-align: center; display: none}


@media screen and (max-height:870px) {
	.topic {height: 100%}
	#t1 {left:34px; top:487px}
	#t2 {left:0; top:331px}
	#t3 {left:23px; top:155px}
	#t4 {left:117px; top:0}
	#t5 {left:870px; top:14px}
	#t6 {left:929px; top:244px}
	#t7 {left:861px; top:424px}
	#t8 {left:717px}
}

@media screen and (max-width:480px) {
	html,body {width:100%}
	.topic {width:100%; height: 100%; background-size: 96%; background-position: center bottom; left:0; margin:0; overflow: hidden}
	.topic i {background-size: 536px}
	.topic p {display: none}
	#t1 {width: 94px; height: 94px; left:0; top:26.25%}
	#t1 i {background-position: -18px -262px}
	#t2 {width: 72px; height: 71px; left:29.38%; top:15.21%}
	#t2 i {background-position: 0 -114px}
	#t3 {width: 76px; height: 76px; left:0px; top:9.58%}
	#t3 i {background-position: -102px -7px}
	#t4 {width: 62px; height: 62px; left:18.44%; top:0}
	#t4 i {background-position: -286px 0}
	#t5 {width: 84px; height: 84px; left:auto; right:23.75%; top:2.71%}
	#t5 i {background-position: -405px -35px}
	#t6 {width: 72px; height: 72px; left:auto; right:0; top:8.33%}
	#t6 i {background-position: -465px -173px}
	#t7 {width: 67px; height: 66px; left:auto; right: 21.25%; top:23.33%}
	#t7 i {background-position: -430px -280px}
	#t8 {width: 60px; height: 61px; left:auto; right:0.63%; top:31.67%; bottom:auto}
	#t8 i {background-position: -360px -352px}
	.mask {background-color: rgba(255,255,255,0.7)}
	.play {display: block}
}