*{padding:0;margin:0}
body{width:100%;height:auto;padding:0;text-align:center;background-color:#000}
body,td,th{font-size:12px;color:#fff;font-family:Tahoma,Geneva,sans-serif}
a:link{color:#fff;text-decoration:none}
a:visited{text-decoration:none;color:#fff}
a:hover{text-decoration:none;color:#fff}
a:active{text-decoration:none}
form{margin:0;padding:0}
img{padding:0;margin:0}
dd,dl,dt,h,li,p,td,th,ul{margin:0;padding:0}
em,i{font-style:normal}
a{color:#333;text-decoration:underline}
img{border:0;vertical-align:middle}
a,a *{cursor:pointer}
a img{border:0}
li,ol,ul{list-style-type:none;list-style-position:outside}
input{border:0 solid transparent;background-color:transparent}
h1{margin:0;padding:0}
h2{margin:0;padding:0}
h3{margin:0;padding:0}
h4{margin:0;padding:0}
h5{margin:0;padding:0}
h6{margin:0;padding:0}
.clear{clear:both;height:0;overflow:hidden}
.hl1{width:100%;height:10px;margin:0 auto}
.hl2{width:100%;height:12px;margin:0 auto}
.hl3{width:100%;height:15px;margin:0 auto}
.hl4{width:100%;height:20px;margin:0 auto}
.hl5{width:100%;height:68px;margin:0 auto}
.showapi{animation:fade-bb;animation-duration:3s;-webkit-animation:fade-bb 3s}
.showin{animation:fade-bb;animation-duration:1s;-webkit-animation:fade-bb 1s}
.showbox{animation:fade-cc;animation-duration:1s;-webkit-animation:fade-cc 1s}
@keyframes fade-bb{0%{opacity:0}
40%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fade-bb{0%{opacity:0}
40%{opacity:0}
100%{opacity:1}
}

@keyframes fade-bb{0%{opacity:0}
40%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fade-bb{0%{opacity:0}
40%{opacity:0}
100%{opacity:1}
}
@keyframes fade-cc{0%{opacity:.1}
40%{opacity:.6}
100%{opacity:1}
}
@-webkit-keyframes fade-cc{0%{opacity:.1}
40%{opacity:.6}
100%{opacity:1}
}
.api_box{
	width:100%;
	height: auto;
	margin:0px auto;
	display: block;
	background:url(../images/bg.jpg) no-repeat center bottom;
	background-size:100% 100%;
	background-color: #6a0e13;
}
.api_box1{
	width:100%;
	height: auto;
	margin:0px auto;
	display: block;
	background:url(../images/bg_1.jpg) no-repeat center top;
	background-size:100% ;
	background-color: #6a0e13;
}
.flag{
	width:100%;
	height: 64px;
	background:url(../images/flag.png) no-repeat center top;
	background-size:100%;
	top: 0px;
	left: 0px;
	z-index: 9999;
}
.theme{
	width:100%;
	height: 75px;
	background:url(../images/logo.png) no-repeat center center;
	background-size:90%;
}
.organizer{
	width:100%;
	height: 68px;
	background:url(../images/organizer.png) no-repeat center center;
	background-size:90%;
}
.getinto{
	width:100%;
	height: 32px;
	background:url(../images/getinto.png) no-repeat center center;
	background-size:90%;
}
.in_button{ 
	width:100%;
	height: 60px;
	background:url(../images/index_button.png) no-repeat center center;
	background-size:90%;
	cursor: pointer;
}
.about{
	width:100%;
	height: 330px;
	background:url(../images/qy.png) no-repeat center center;
	background-size:100%;	
}
.abouta{
	width:100%;
	height: 256px;
	background:url(../images/tj_i.png) no-repeat center center;
	background-size:100%;	
}
.chapterone{
	width:100%;
	height: 89px;
	background:url(../images/z1.png) no-repeat center center;
	background-size:90%;
	cursor: pointer;		
}
.chaptertwo{
	width:100%;
	height: 89px;
	background:url(../images/z2.png) no-repeat center center;
	background-size:90%;
	cursor: pointer;		
}
.previous_pz{
	width:100%;
	height: 60px;
	background:url(../images/z1z.png) no-repeat center center;
	background-size:90%;
	cursor: pointer;	
}
.video{
	width:100%;
	height: 60px;
	background:url(../images/video.png) no-repeat center 14px;
	background-size:60%;
	cursor: pointer;	
}
.enlarge{
	position: absolute;
	right: 25px;
	top: 25px;
	width:25px;  
	height: 25px;
	z-index: 999;
	background:url(../images/fd.png) no-repeat center center;
	background-size:100%;
	cursor: pointer;		
}
.enlargea{
	position: absolute;
	right: 16px;
	top: 16px;
	width:35px;
	height: 35px;
	z-index: 999;
	background:url(../images/fd.png) no-repeat center center;
	background-size:100%;
	cursor: pointer;		
}
.exp{
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height: auto;
	z-index: 99;
 	background-color: rgba(0, 0, 0, 0.7);			
}
.exp section{
	width: 87%;
	margin: 0px auto;
	padding : 12px;
	size: 13px;
	text-align: left;

}
.next_pz{
	width:100%;
	height: 60px;
	background:url(../images/z2z.png) no-repeat center center;
	background-size:90%;
	cursor: pointer;	
}
.flex-item1{
	margin-top: 16px;
	cursor: pointer;
}
.flex-item1 img{
	width: 90%;
}
.flex-item2{
	margin-top: 16px;
	cursor: pointer;
	position: relative;
}
.flex-item2 img{
	width: 100%;
	border-radius: 3px;
}
.flex-item2 section{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 30px;
	font-size: 13px;
	line-height: 30px;
 	background-color: rgba(0, 0, 0, 0.6);
 	border-radius: 0px 0px 3px 3px;	
}
.flex-item3{
	margin-top: 16px;
	cursor: pointer;
	border-radius: 3px;
	padding: 12px;
 	background-color: rgba(0, 0, 0, 0.2);
}
.flex-item3 section{
	color: #fff;
	text-align: left;
	padding-top: 10px;
}
.flex-item3 img{
	width: 100%;
	border-radius: 3px;
}
.flex-item4{
	margin-top: 16px;
	cursor: pointer;
	border-radius: 3px;
	padding: 12px;
}
/*boxcontent*/
.boxcontent{
	width:100%;
	height:auto;
	min-height:350px;
	margin:0px auto;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDBBOTRFREYyQTc0MTFFNEFEN0FEOUY3Mzc5RkE2OTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDBBOTRFREUyQTc0MTFFNEFEN0FEOUY3Mzc5RkE2OTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk0QkU3MUQxMjk5OTExRTRCRjgzQkYwNTMxQTA4MTVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk0QkU3MUQyMjk5OTExRTRCRjgzQkYwNTMxQTA4MTVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MNUAWQAAABhJREFUeNpiZGBgeMCABpgYsAAKBQECDABa1gDqwK4zoQAAAABJRU5ErkJggg==) repeat 0px 0px;
	position:fixed;
	top:0px;
	left:0px;
	display:none;
	z-index:50000;
	cursor:pointer;
}
.boxcontent video{
	width: 100%;
}
.flgb{
	margin-top: 16px;
}
.flgb img{
	width: 36px;
	height: 36px;
	display: block;
	margin: 0px auto;
}