@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#300;
	background: #766966;
}

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#300;
}

a:hover{
	text-decoration: none;
	color: #e64048 !important;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

img{
	display:block;
	max-height: 100%;
	max-width: 100%;
}

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}

table{
	font-size: 1em;
}

.photo{
	position: relative;
	overflow: hidden;
}

.photo img{
	width: 100%;
	height: 100%;
}

.photo p{
	position: absolute;
	left: 0px;
	bottom : 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#page{
	height: 100%;
	max-height: 1180px;
	white-space: nowrap;
    overflow-x: scroll;
	overflow-y: hidden;
}

#roll{
	position: relative;
	height: 100%;
	vertical-align: top;
    display: inline-block;
}

#bg-list{
	height: 100%;
}

#bg-list img{
	display: inline-block;
	vertical-align: top;
	height: 100%;
	max-width: none;
}

#logo{
	position: fixed;
	left: 5.5%;
	top: 2.1%;
	height: 70px;
	width: 100px;
	background: url("images/logo.png") no-repeat left center;
	background-size: contain;
	z-index: 888;
}

#nav-btn,#music-btn{
	position: fixed;
	top: 2.7%;
	height: 30px;
	width: 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 888;
}

#nav-btn{
	left: 95%;
}

#music-btn{
	left: 90%;
}

#nav-btn:hover,#music-btn:hover{
	margin-top: -1px;
}

.nav1{
	background-image: url("images/nav1.png");
}

.nav2{
	background-image: url("images/nav2.png");
}

.music1{
	background-image: url("images/music1.png");
}

.music2{
	background-image: url("images/music2.png");
}

#nav{
	position: fixed;
	right: 5.5%;
	top: 5.8%;
	height: 84.7%;
	white-space: normal;
	z-index: 99;
	display: none;
}

#nav .nav-bg{
	height: 100%;
}

#nav .list{
	position: absolute;
	top: 2.9%;
	right: 0.5%;
	width: 94.8%;
	height: 87.3%;
	overflow: hidden;
}

#nav .list table{
	width: 100%;
	height: 100%;
	font-size: 1em;
	margin: -1px 0px 0px -1px;
}

#nav .list td{
	border-top: 1px solid #f2e8d3;
	border-left: 1px solid #f2e8d3;
	font-size: 1.6em;
	padding-left: 1em;
	line-height: 1.2em;
	width: 50%;
}

#nav .back{
	position: absolute;
	bottom: 1.7%;
	right: 0px;
	width: 95.9%;
	height: 8%;
	text-align: center;
}

#nav .back a{
	display: inline-block;
	vertical-align: top;
	font-size: 1.6em;
	color: #8d5e34;
	font-weight: bold;
	background: url("images/nav-back.png") no-repeat left center;
	background-size: 1.1em 1.1em;
	padding-left: 1.5em;
}

#nav .back a:hover{
	background-image: url("images/nav-back2.png");
}

#star li{
	position: absolute;
	height: 15.7%;
	width: 0.29%;
	overflow: visible;
}

#star li:hover{
	margin-top: -1px;
}

#star li a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 9;
}

#star li i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 3;
}

#star li b{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: url("images/star.png") no-repeat center center;
	background-size: contain;
	z-index: 4;
}

#star li label{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: url("images/star.png") no-repeat center center;
	background-size: contain;
	z-index: 5;
}

#star01{ top: 18.05%; left: 94.01%; }
#star02{ top: 50.85%; left: 90.50%; }
#star03{ top: 68.81%; left: 85.12%; width: 0.53% !important; }
#star04{ top: 07.29%; left: 76.77%; width: 0.42% !important; }
#star05{ top: 43.73%; left: 71.24%; }
#star06{ top: 48.90%; left: 74.43%; width: 0.53% !important; }
#star07{ top: 35.76%; left: 70.41%; }
#star08{ top: 38.81%; left: 67.30%; width: 0.30% !important; }
#star09{ top: 61.86%; left: 62.04%; }
#star10{ top: 11.95%; left: 62.43%; }
#star11{ top: 46.86%; left: 59.70%; width: 0.36% !important; }
#star12{ top: 09.32%; left: 58.80%; }
#star13{ top: 75.34%; left: 52.29%; }
#star14{ top: 24.15%; left: 50.93%; }
#star15{ top: 58.05%; left: 48.06%; }
#star16{ top: 66.69%; left: 40.52%; }
#star17{ top: 02.54%; left: 32.61%; }
#star18{ top: 51.36%; left: 29.79%; }
#star19{ top: 72.03%; left: 28.78%; }
#star20{ top: 54.49%; left: 27.88%; }
#star21{ top: 45.00%; left: 26.22%; }
#star22{ top: 35.00%; left: 24.37%; }
#star23{ top: 68.30%; left: 21.92%; }
#star24{ top: 30.93%; left: 19.71%; }
#star25{ top: 44.24%; left: 09.20%; }
#star26{ top: 42.54%; left: 15.49%; }
#star27{ top: 47.46%; left: 04.56%; }


#star01 i{ background-image: url("images/star01a.png"); }
#star02 i{ background-image: url("images/star02a.png"); }
#star03 i{ background-image: url("images/star03a.png"); }
#star04 i{ background-image: url("images/star04a.png"); }
#star05 i{ background-image: url("images/star05a.png"); }
#star06 i{ background-image: url("images/star06a.png"); }
#star07 i{ background-image: url("images/star07a.png"); }
#star08 i{ background-image: url("images/star08a.png"); }
#star09 i{ background-image: url("images/star09a.png"); }
#star10 i{ background-image: url("images/star10a.png"); }
#star11 i{ background-image: url("images/star11a.png"); }
#star12 i{ background-image: url("images/star12a.png"); }
#star13 i{ background-image: url("images/star13a.png"); }
#star14 i{ background-image: url("images/star14a.png"); }
#star15 i{ background-image: url("images/star15a.png"); }
#star16 i{ background-image: url("images/star16a.png"); }
#star17 i{ background-image: url("images/star17a.png"); }
#star18 i{ background-image: url("images/star18a.png"); }
#star19 i{ background-image: url("images/star19a.png"); }
#star20 i{ background-image: url("images/star20a.png"); }
#star21 i{ background-image: url("images/star21a.png"); }
#star22 i{ background-image: url("images/star22a.png"); }
#star23 i{ background-image: url("images/star23a.png"); }
#star24 i{ background-image: url("images/star24a.png"); }
#star25 i{ background-image: url("images/star25a.png"); }
#star26 i{ background-image: url("images/star26a.png"); }
#star27 i{ background-image: url("images/star27a.png"); }

#star04 b,#star04 label{ width: 69.26% !important; }
#star11 b,#star11 label{ width: 79.91% !important; }

@-ms-keyframes star{
	from{ opacity:0.6; }
	60%{ transform: scale(3,3); opacity:0; }
	to{ transform: scale(3,3); opacity:0; }
}
@-moz-keyframes star{
	from{ opacity:0.6; }
	60%{ transform: scale(3,3); opacity:0; }
	to{ transform: scale(3,3); opacity:0; }
}
@-o-keyframes star{
	from{ opacity:0.6; }
	60%{ transform: scale(3,3); opacity:0; }
	to{ transform: scale(3,3); opacity:0; }
}
@-webkit-keyframes star{
	from{ opacity:0.6; }
	60%{ transform: scale(3,3); opacity:0; }
	to{ transform: scale(3,3); opacity:0; }
}
@keyframes star{
	from{ opacity:0.6; }
	60%{ transform: scale(3,3); opacity:0; }
	to{ transform: scale(3,3); opacity:0; }
}

#star li b{
	animation:'star' 3s linear 0s infinite;
	-ms-animation:star 3s linear 0s infinite;
	-moz-animation:star 3s linear 0s infinite;
	-o-animation:'star' 3s linear 0s infinite;
	-webkit-animation:'star' 3s linear 0s infinite;
}

#drop li{
	position: fixed;
	height: 52%;
	top: 24%;
	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);
	white-space: normal;
	overflow: hidden;
	z-index: 88;
	display: none;
}

#drop .drop-bg{
	height: 100%;
}

#drop .close{
	position: absolute;
	right: 2.53%;
	top: 7.01%;
	height: 6.53%;
	width: 10%;
	background: url("images/drop-close.png") no-repeat right top;
	background-size: auto 100%;
}

#drop table{
	position: absolute;
	left: 13%;
	width: 74%;
	top: 13.5%;
	height: 6.8%;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	color: #f55;
}

#drop table td{
	font-size: 1.6em;
}

#drop .con{
	position: absolute;
	left: 13%;
	top: 27%;
	height: 60%;
	width: calc(74% - 1.5em);
	padding-right: 1.5em;
	overflow: hidden;
	overflow-y: scroll;
	-ms-overflow-style:none;
	overflow:-moz-scrollbars-none;
}

#drop .con::-webkit-scrollbar {
	width: 0.3em;
}

#drop .con::-webkit-scrollbar-track{
	background-color: #d9d9d9;
	border-radius: 0.15em;
}

#drop .con::-webkit-scrollbar-thumb{
	background-color: #f55;
	border-radius: 0.15em;
}

#drop .con p{
	line-height: 1.6em;
	text-indent: 2em;
	font-size: 1.1em;
	padding: 0.5em 0px;
}

#drop .con .bar{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 0.2em;
	height: 100%;
	border-radius: 0.1em;
	overflow: hidden;
	background: #d9d9d9;
}

#drop .con .bar span{
	position: absolute;
	width: 100%;
	left: 0px;
	height: 20%;
	background: #f55;
	cursor: pointer;
	border-radius: 0.1em;
}