@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background: url("images/body.jpg");
	background-size: auto 100%;
}

a{
	color:#000;
}

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

@media screen and (max-height:770px){
	body{ font-size: 12px; }
	#main .show .side p{display: none;}
	#main .show .side .photo .pic{ height: 7em !important;}
}

@media screen and (min-height:770px) and (max-height:800px){
	body{ font-size: 13px; }
}

@media screen and (min-height:800px) and (max-height:900px){
	body{ font-size: 13px; }
}

@media screen and (min-height:900px) and (max-height:1000px){
	body{ font-size: 14px; }
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

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

img{
	display:block;
}

#loading{
	background: url("images/l-pc-bg.jpg") no-repeat center center;
	background-size: 100% 100%;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: 9999;
}

#loading .abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#loading .part1{
	width: 47.1%;
	height: 32.4%;
	left: 29.6%;
	top: 7.5%;
	background-image: url("images/l-pc-part1.png");
}

#loading .part2{
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-image: url("images/l-pc-part2.png");
	background-position: left bottom;
	background-size: 100% auto;
}

#loading .part3{
	width: 26%;
	height: 31.6%;
	left: 0%;
	top: 0%;
	background-image: url("images/l-pc-part3.png");
	background-position: left top;
}

#loading .part4{
	width: 72.4%;
	height: 63.1%;
	left: 13.5%;
	bottom: 0%;
	background-image: url("images/l-pc-part4.png");
	background-position: center bottom;
}

#loading .part5{
	width: 5.6%;
	height: 9%;
	left: 47.2%;
	bottom: 12%;
}

#loading .part5 a{
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-image: url("images/l-pc-part5.png");
}

#loading .part5b{
	width: 5.6%;
	height: 9%;
	left: 47.2%;
	bottom: 12%;
	overflow: hidden;
}

#loading .part5b table{
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-image: url("images/l-pc-part5b.png");
	color: #fff;
	text-align: center;
	font-weight: bold;
}

#loading .part5b table td{
	font-size: 1.8em;
}

@-ms-keyframes part1{
	from{ top: -20%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-moz-keyframes part1{
	from{ top: -20%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-o-keyframes part1{
	from{ top: -20%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-webkit-keyframes part1{
	from{ top: -20%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@keyframes part1{
	from{ top: -20%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}

#loading .part1{
	animation:'part1' 0.5s ease-in-out 0s forwards;
	-ms-animation:part1 0.5s ease-in-out 0s forwards;
	-moz-animation:part1 0.5s ease-in-out 0s forwards;
	-o-animation:'part1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'part1' 0.5s ease-in-out 0s forwards;
}

@-ms-keyframes part4{
	from{ filter:alpha(opacity=0); opacity:0; }
	44.4%{ filter:alpha(opacity=0); opacity:0; bottom: -10%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-moz-keyframes part4{
	from{ filter:alpha(opacity=0); opacity:0; }
	44.4%{ filter:alpha(opacity=0); opacity:0; bottom: -10%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-o-keyframes part4{
	from{ filter:alpha(opacity=0); opacity:0; }
	44.4%{ filter:alpha(opacity=0); opacity:0; bottom: -10%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-webkit-keyframes part4{
	from{ filter:alpha(opacity=0); opacity:0; }
	44.4%{ filter:alpha(opacity=0); opacity:0; bottom: -10%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@keyframes part4{
	from{ filter:alpha(opacity=0); opacity:0; }
	44.4%{ filter:alpha(opacity=0); opacity:0; bottom: -10%; }
	to{ filter:alpha(opacity=100); opacity:1; }
}

#loading .part4{
	animation:'part4' 0.9s ease-in-out 0s forwards;
	-ms-animation:part4 0.9s ease-in-out 0s forwards;
	-moz-animation:part4 0.9s ease-in-out 0s forwards;
	-o-animation:'part4' 0.9s ease-in-out 0s forwards;
	-webkit-animation:'part4' 0.9s ease-in-out 0s forwards;
}

@-ms-keyframes part2{
	from{ filter:alpha(opacity=0); opacity:0; }
	61.5%{ filter:alpha(opacity=0); opacity:0; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-moz-keyframes part2{
	from{ filter:alpha(opacity=0); opacity:0; }
	61.5%{ filter:alpha(opacity=0); opacity:0; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-o-keyframes part2{
	from{ filter:alpha(opacity=0); opacity:0; }
	61.5%{ filter:alpha(opacity=0); opacity:0; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@-webkit-keyframes part2{
	from{ filter:alpha(opacity=0); opacity:0; }
	61.5%{ filter:alpha(opacity=0); opacity:0; }
	to{ filter:alpha(opacity=100); opacity:1; }
}
@keyframes part2{
	from{ filter:alpha(opacity=0); opacity:0; }
	61.5%{ filter:alpha(opacity=0); opacity:0; }
	to{ filter:alpha(opacity=100); opacity:1; }
}

#loading .part2,#loading .part3,#loading .part5{
	animation:'part2' 1.3s ease-in-out 0s forwards;
	-ms-animation:part2 1.3s ease-in-out 0s forwards;
	-moz-animation:part2 1.3s ease-in-out 0s forwards;
	-o-animation:'part2' 1.3s ease-in-out 0s forwards;
	-webkit-animation:'part2' 1.3s ease-in-out 0s forwards;
}

@-ms-keyframes part5a{
	from{ }
	50%{ transform: scale(1.05,1.05); }
	to{ }
}
@-moz-keyframes part5a{
	from{ }
	50%{ transform: scale(1.05,1.05); }
	to{ }
}
@-o-keyframes part5a{
	from{ }
	50%{ transform: scale(1.05,1.05); }
	to{ }
}
@-webkit-keyframes part5a{
	from{ }
	50%{ transform: scale(1.05,1.05); }
	to{ }
}
@keyframes part5a{
	from{ }
	50%{ transform: scale(1.05,1.05); }
	to{ }
}

#loading .part5 a,#loading .part5b table{
	animation:'part5a' 2.0s ease-in-out 0s infinite;
	-ms-animation:part5a 2.0s ease-in-out 0s infinite;
	-moz-animation:part5a 2.0s ease-in-out 0s infinite;
	-o-animation:'part5a' 2.0s ease-in-out 0s infinite;
	-webkit-animation:'part5a' 2.0s ease-in-out 0s infinite;
}

#wrapper{
	position: relative;
	height: 100%;
	overflow-x: scroll;
	white-space:nowrap;
	word-break:break-all;
}

#logo{
	position: fixed;
	height: 3.9%;
	left: 4.5%;
	top: 3.4%;
	z-index: 99;
}

#logo img{
	height: 100%;
}

#nav-btn{
	position: fixed;
	left: 0px;
	top: 37.5%;
	height: 4%;
	width: 3%;
	min-width: 2.5em;
	background: url("images/side-btn1.png") no-repeat left center;
	background-size: auto 100%;
	z-index: 99;
}

#music-btn{
	position: fixed;
	left: 0px;
	top: 43.6%;
	height: 4%;
	width: 3%;
	min-width: 2.5em;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
	z-index: 99;
}

#music-btn.on{
	background-image: url("images/side-btn2a.png");
}

#music-btn.off{
	background-image: url("images/side-btn2b.png");
}

#nav-btn:hover,#music-btn:hover{
	filter:alpha(opacity=80);
	opacity:0.8;
}

#container{
	height: 100%;
}

#head,#tail{
	height: 100%;
	display: inline-block;
	vertical-align: top;
}

#tail{
	margin-left: -0.3em;
}

#head img,#tail img{
	height: 100%;
}

#main{
	display: inline-block;
	vertical-align: top;
	height: 100%;
	background: url("images/body.jpg");
	background-size: auto 100%;
	margin-left: -0.3em;
}

#main .show{
	display: inline-block;
	vertical-align: top;
	white-space:nowrap;
	word-break:break-all;
	height: 100%;
}

#main .show .bg1{
	height: 100%;
	display: inline-block;
	vertical-align: top;
}

#main .show .bg1 img{
	height: 100%;
}

#main .show .side{
	height: 100%;
	display: inline-block;
	vertical-align: top;
	margin-left: -0.3em;
	position: relative;
}

#main .show .side img{
	height: 100%;
}

#main .show .big{
	height: 100%;
	display: inline-block;
	vertical-align: top;
	background: url("images/show-bg3.png");
	background-size: auto 100%;
	margin-left: -0.3em;
	position: relative;
}

#main .show .big img{
	position: relative;
	top: 3.1%;
	height: 92.8%;
}

#main .show .big .num{
	position: absolute;
	left: 0px;
	top: 3.1%;
	width: 3.3em;
	height: 3.8em;
	padding-left: 0.5em;
	background: url("images/show-num.png");
	background-size: 100% 100%;
	font-family: "arial";
	font-style: italic;
	line-height: 2.2em;
	color: #fff;
	font-weight: bold;
	z-index: 9;
}

#main .show .big .num i{
	font-size: 1.2em;
}

#main .show .big .author{
	position: absolute;
	right: 1.5%;
	bottom: 5.2%;
	background: #7e6250;
	color: #fff;
	padding: 0em 0.5em;
	line-height: 1.6em;
	height: 1.6em;
	z-index: 9;
}

#main .show .big .arrow{
	position: absolute;
	right: 0px;
	top: 8.2%;
	width: 1.6em;
	height: 1.6em;
	background: url("images/show-arrow.png");
	background-size: 100% 100%;
	z-index: 9;
}

#main .show .side{
	position: relative;
}

#main .show .side .content{
	position: absolute;
	left: 6.9%;
	top: 7.7%;
	width: 81.3%;
	white-space: normal;
}

#main .show .side h4{
	font-size: 1.6em;
	line-height: 1.2em;
	height: 1.2em;
	font-weight: normal;
	margin-bottom: 1.5em;
}

#main .show .side h3{
	font-size: 2.2em;
	line-height: 1.2em;
	height: 2.4em;
	margin-bottom: 0.5em;
	overflow: hidden;
}

#main .show .side p{
	line-height: 1.8em;
	text-indent: 2em;
}

#main .show .side .more{
	display: block;
	height: 1.8em;
	margin-top: 0.6em;
	margin-bottom: 3.5em;
}

#main .show .side .more img{
	height: 100%;
	width: auto;
}

#main .show .side .p-width1{
	width: 47.6%;
}

#main .show .side .photo{
	margin-bottom: 0.8em;
}

#main .show .side .photo .pic{
	border: 1px solid #fff;
	position: relative;
	height: 9.4em;
}

#main .show .side .photo .pic .border{
	width: 100%;
	height: 100%;
	position: absolute;
	border: 1px solid #fff;
	left: 0.2em;
	top: 0.2em;
}

#main .show .side .photo img{
	width: 100%;
	height: 100%;
}

#main .show .side .photo h5{
	line-height: 1.4em;
	height: 2.8em;
	overflow: hidden;
	margin-top: 0.5em;
	font-weight: normal;
	font-size: 1em;
}

#main .show .side .photo .play{
	position: absolute;
	width: 4em;
	height: 4em;
	background: url("images/show-play.png");
	background-size: 100% 100%;
	left: 50%;
	top: 50%;
	margin: -2em 0px 0px -2em;
}

#nav{
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	z-index: 299;
	display: none;
}

#nav img{
	height: 100%;
}

#nav .close{
	position: absolute;
	right: 11%;
	top: 3%;
	width: 2.5em;
	height: 2.5em;
	background: url("images/nav-close.png");
	background-size: 100% 100%;
}

#nav .close:hover{
	filter:alpha(opacity=80);
	opacity:0.8;
}

#nav .menu{
	position: absolute;
	left: 15%;
	width: 70%;
	top: 10%;
	white-space: normal;
}

#nav .menu a{
	display: block;
	position: relative;
	color: #fff;
	height: 2.9em;
	line-height: 2.9em;
	padding-left: 4em;
}

#nav .menu a i{
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0px;
	bottom: 0px;
	background: url("images/nav-line.png");
	background-size: 100% 100%;
}

#nav .menu a span{
	display: inline-block;
	vertical-align: top;
	width: 1.7em;
	height: 1.7em;
	line-height: 1.7em;
	text-align: center;
	background: #5d3a12;
	margin: 0.6em 1.4em 0em 0em;
	border-radius: 50%;
}

#nav .menu a label{
	cursor: pointer;
	font-size: 1.2em;
}

#nav .menu a:hover{
	color: #fff !important;
	background: url("images/nav-shadow.png") no-repeat center center;
	background-size: auto 100%;
}

#nav .menu .back span{
	background: url("images/nav-back.png") no-repeat center center;
}

.drop{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color:rgba(0,0,0,0.8);
	z-index: 999;
	display: none;
}

.drop .content .close{
	position: absolute;
	width: 2.9em;
	height: 2.9em;
	background: url("images/drop-close.png");
	background-size: 100% 100%;
	right: -1.45em;
	top: -1.45em;
	z-index: 9;
}

.drop .content .close:hover{
	background-image: url("images/drop-close2.png");
}

.drop-video .content{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -377px 0px 0px -600px;
	height: 755px;
	width: 1200px;
	background: #000;
}

.drop-video video{
	height: 100%;
	width: 100%;
	outline: none;
}

.drop-video i{
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -2.2em 0px 0px -2.2em;
	width: 4.4em;
	height: 4.4em;
	background: url("images/drop-play.png");
	background-size: 100% 100%;
}

@media screen and (max-height:760px){
	.drop-video .content{ margin: -275px 0px 0px -437px; height: 550px; width: 874px; }
}

.drop-photo .content{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -377px 0px 0px -600px;
	height: 755px;
	width: 1200px;
	border-radius: 0.6em;
}

.drop-photo .focus{
	width: 100%;
	height: 100%;
	position: relative;
}

.drop-photo img{
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 0.6em;
}

.drop-photo .shadow{
	position: absolute;
	width: 100%;
	height: 7.2em;
	left: 0px;
	bottom: 0px;
	background-color:rgba(0,0,0,0.6);
	border-radius: 0px 0px 0.6em 0.6em;
}

.drop-photo .text{
	position: absolute;
	width: 40%;
	left: 24%;
	bottom: 0%;
	height: 7.2em;
	font-size: 1em;
	color: #fff;
	white-space: normal;
	z-index: 9;
}

.drop-photo .text td{
	font-size: 1.4em;
	line-height: 1.6em;
}

.drop-photo .text a{
	color: #fff;
}

.drop-photo .num{
	position: absolute;
	right: 24%;
	width: 11%;
	bottom: 0px;
	height: 7.2em;
	text-align: right;
	color: #fff;
	font-size: 1em;
	z-index: 9;
}

.drop-photo .num td{
	font-size: 2em;
}

.drop-photo .num span{
	font-size: 1.7em;
	font-weight: bold;
}

.drop-photo .arrow1,.drop-photo .arrow2{
	position: absolute;
	width: 3.6em;
	height: 3.6em;
	bottom: 1.8em;
	background-size: 100% 100%;
	cursor: pointer;
	z-index: 9;
}

.drop-photo .arrow1:hover,.drop-photo .arrow2:hover{
	filter:alpha(opacity=80);
	opacity:0.8;
}

.drop-photo .arrow1{
	background-image: url("images/drop-arrow1.png");
	left: 15%;
}

.drop-photo .arrow2{
	background-image: url("images/drop-arrow2.png");
	right: 15%;
}

@media screen and (max-height:760px){
	.drop-photo .content{ margin: -275px 0px 0px -437px; height: 550px; width: 874px; }
}

.drop-xilan .content{
	position: absolute;
	left: 50%;
	margin-left: -525px;
	top: 5%;
	width: 900px;
	height: 90%;
	padding: 0% 100px 0% 50px;
	background: #fff;
	white-space: normal;
	border-radius: 0.6em;
}

.drop-xilan .content .bar{
	position: absolute;
	right: 3em;
	top: 5%;
	height: 90%;
	width: 0.6em;
	border-radius: 0.3em;
	background: #e5e5e5;
}

.drop-xilan .content .bar span{
	position: absolute;
	left: 0px;
	width: 100%;
	height: 20%;
	border-radius: 0.3em;
	background: #887f81;
	cursor: pointer;
}

.drop-xilan .content .box{
	height: 90%;
	margin-top: 5%;
	overflow: hidden;
}

.drop-xilan .content h2{
	line-height: 3.7em;
	font-size: 2.5em;
	color: #333;
	margin-bottom: 1.3em;
}

.drop-xilan .content .side{
	float: left;
	width: 80px;
	padding-right: 40px;
	border-right: 1px solid #eee;
	text-align: center;
	color: #808080;
}

.drop-xilan .content .tit{
	line-height: 1.3em;
	height: 1.3em;
	position: relative;
}

.drop-xilan .content .tit .line1,.drop-xilan .content .tit .line2{
	position: absolute;
	width: 1.3em;
	height: 1px;
	background: #e8e8e8;
	top: 0.6em;
}

.drop-xilan .content .side .tit .line1{
	left: 0px;
}

.drop-xilan .content .side .tit .line2{
	right: 0px;
}

.drop-xilan .content .side .time label{
	display: block;
	font-size: 1.3em;
	line-height: 1.5em;
	margin-top: 0.4em;
	color: #585858;
}

.drop-xilan .content .side .time span{
	display: block;
	line-height: 1.3em;
	margin-top: 0.4em;
	color: #585858;
}

.drop-xilan .content .side .text,.drop-xilan .content .side .share,.drop-xilan .content .side .code{
	margin-top: 2.5em;
}

.drop-xilan .content .side .text p{
	line-height: 1.3em;
	margin-top: 0.6em;
}

.drop-xilan .content .side .share ul{
	margin-top: 1.3em;
}

.drop-xilan .content .side .share li{
	width: 2.5em;
	margin: 0.6em auto 0px auto;
}

.drop-xilan .content .side .share li:hover{
	filter:alpha(opacity=80);
	opacity:0.8;
}

.drop-xilan .content .side .code img{
	width: 5em;
	height: 5em;
}

.drop-xilan .content .side .code p{
	line-height: 1.3em;
	margin-top: 0.4em;
}

.drop-xilan .content .main{
	float: right;
	width: 735px;
}

.drop-xilan .content .main p{
	font-size: 1.3em;
	line-height: 2em;
	margin-bottom: 1em;
}

.drop-xilan .content .main img{
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    padding: 1.3em 0px;
}

.drop-xilan .content .main .editor{
	background: url(images/editor.gif) repeat-x;
	padding-top: 1.5em;
	line-height: 1.5em;
	text-align: right;
	color: #999;
	margin-top: 1.8em;
	padding-bottom: 2em;
	font-size: 2.4em;
}

.drop-xilan2 .content{
	width: 1000px;
	height: 90%;
	top: 5%;
	position: absolute;
	left: 50%;
	margin-left: -500px;
}

.drop-xilan2 .content iframe{
	width: 100%;
	height: 100%;
}