html{width: 100%; height: 100%;}
body{width: 100%; height: 100%; overflow: hidden;}
a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}
.backBtn{width: 88px; height: 101px;cursor: pointer; background: url(../img/back.png) no-repeat;position: absolute; bottom: 32px; right: 8%;z-index: 30;}
/*==================================首页界面======================================*/
.starNet{
	width: 980px;
	height: 500px;
/* 	background: url(../img/starNet1.png) no-repeat center ; */
	margin: 0 auto;
	position: absolute;
	top: 50%;
	margin-top:-260px;
	left:0;
	right:0;
	position: relative;
	/*border: 1px solid;*/
}

.starNet ul li{
	border: 5px solid rgba(185,168,151,0.3);
	position: absolute;
	border-radius:50%;	
	background: #fff;
}

.starNet ul li img{
	border-radius:50%;	
	border: 2px solid #fff;
	width: 100%;
	height: 100%;
}
.starNet ul li:nth-child(1){
	width: 120px;
	height: 120px;

	    left: 235px;
    top: 44px;
}
.starNet ul li:nth-child(2){
	width: 78px;
	height: 78px;
	left: 64px;
	top: 184px;
}
.starNet ul li:nth-child(3){
	width: 108px;
	height: 108px;
	left: 516px;
    top: 5px;
}
.starNet ul li:nth-child(4){
	width:88px;
	height: 88px;
	left: 175px;
    top:245px;
}

.starNet ul li:nth-child(5){
	width:78px;
	height: 78px;
	left: 76px;
    top:362px;
}
.starNet ul li:nth-child(6){
	width:80px;
	height: 80px;
	left: 278px;
    top:385px;
}
.starNet ul li:nth-child(7){
	width:100px;
	height: 100px;
	left: 365px;
    top:230px;
}
.starNet ul li:nth-child(8){
	width:105px;
	height: 105px;
	left: 476px;
    top:370px;
}
.starNet ul li:nth-child(9){
	width:105px;
	height: 105px;
	left: 610px;
    top:210px;
}
.starNet ul li:nth-child(10){
	width:120px;
	height: 120px;
	left: 762px;
    top:87px;
}
.starNet ul li:nth-child(11){
	width:80px;
	height: 80px;
	right: 56px;
    top:300px;
}
.starNet ul li:nth-child(12){
	width:82px;
	height: 82px;
	right: 223px;
    bottom:16px;
}

.mountains{
	width: 100%;
	height: 130px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.mountains li{
	z-index: 10;
}
.mountains li:nth-child(1){
	width: 456px;
	height: 120px;
	background: url(../img/clouds_1.png) no-repeat;
	position: absolute;
	right: 0;
	top: 0;
}
.mountains li:nth-child(2){
	width: 800px;
	height: 120px;	
	background: url(../img/clouds_2.png) no-repeat;
	position: absolute;
	left: 120px;
	bottom: 0;
}
.mountains li:nth-child(3){
	width: 904px;
	height: 102px;	
	background: url(../img/clouds_3.png) no-repeat;
	position: absolute;
	right:80px;
	bottom: 0px;
}

/*==================================书签页面index======================================*/
h2{width: 100%;height: 95px;background: url(../img/title.png) no-repeat center; position: absolute; top: 14%;}
.bookmark{
    width: 740px;
    height: 408px;
    position: absolute;
    top: 32%;
    /* left: 276px; */
    left: 0;
    margin: 0 auto;
    clear: both;
    z-index: 20;
    right: 0;
}

.bookmark ul li{
	float: left;
	position: relative;
	margin: 0 48px;
	 transition: 1s ease;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition:1s ease;
    -ms-transition: 1s ease;
/* 	transform:rotateX(0deg) rotateY(0deg);
	transform-style:preserve-3d;
	backface-visibility:visible;
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility:visible;
	-moz-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform-style:preserve-3d;
	-moz-backface-visibility:visible;
	-o-transition:all .6s ease-in-out;
	-ms-transition:all .6s ease-in-out;
	-moz-transition:all .6s ease-in-out;
	-webkit-transition:all .6s ease-in-out;
	transition:all .6s ease-in-out;
	filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto?expand',M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779) */
	
}
.bookmark_click{
	transform: rotateX(0deg) rotateY(360deg);
	-webkit-transform: rotateX(0deg) rotateY(360deg);
	-moz-transform: rotateX(0deg) rotateY(360deg);
	-ms-transform: rotateX(0deg) rotateY(360deg);
	-o-transform: rotateX(0deg) rotateY(360deg);
	
}

/* .bookmark ul li:hover,.bookmark ul li:visited{
		transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto?expand',M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779)
} */

.bookmark ul li:after{
	content: "";
	display: block;
	position: absolute;
	width: 56px;
	height: 106px;
	background: url(../img/b_red.png) no-repeat;
	bottom: 0;
	left: 0;
	animation-name:swing;/* keyframe名称 */
	animation-duration:2s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:0s;/* 动画开始之前的延迟 */
	animation-iteration-count:infinite;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */
	-webkit-animation-name:swing;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;
	
}

/*==================================古代、近代、现代 scroll_list.html======================================*/

.scrollBox{    width: 882px;
    height: 383px;
    clear: both;
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;}
.scrollBox li{width:294px; height: 1px;float: left;position: relative;background: url(../img/scrollbody.png) no-repeat;overflow: visible !important;}
.scrollBox li:before{
	content: "";
	display: block;
	position: absolute;
	width: 196px;
	height: 43px;
	top:-43px;
	left:0;
	background: url(../img/scrolltop.png) no-repeat;
}
.scrollBox li:after{
	content: "";
	display: block;
	position: absolute;
	width: 196px;
	height: 43px;
	bottom:-42px;
	left:0;
	background: url(../img/scrollbottom.png) no-repeat;
}
.fonts {
	z-index: 10 ;
	top: 50px;
	left: 0;
	width: 882px;
	height: 300px;
	clear: both;
	position: absolute;
}
.fonts .font{
	width:294px; height: 300px;float: left;
	position: relative;
}
.fonts .font{
	display: none;
}
.scrollBtn {
	z-index: 30 ;
	top: -40px;
	left: 0;
	width: 790px;
	height: 380px;
	clear: both;
	position: absolute;
	overflow: hidden;
}
.scrollBtn .btn{
	width:190px; 
	height: 380px;
	float: left;
	position: relative;
}
.scrollBtn .btn{
	/* border: 1px solid red; */
	margin-right: 105px;
	display: none;
}
.scrollBtn .btn:nth-child(3){
	margin-right: 0 !important;
}
.write {
	z-index: 10 ;
	top: 0;
	left: 0;
	width: 882px;
	height: 350px;
	clear: both;
	position: absolute;
}
.write .pen{
width:294px; height: 350px;float: left;

position: relative;
}
.write .pen span{

	display: block;
	width: 135px;
	height: 131px;
	background: url(../img/pen.png) no-repeat;
	position:absolute;
    top: -54px;
    left: 104px;	
	display: none;
}

/*==================================人物介绍列表页======================================*/
.mrlistBox{
	width: 884px;
	height: 480px;
	overflow:hidden;
}
.mrlist{
width: 1200px;
    height: 710px;
    /* padding-bottom: 60px; */
    position: absolute;
    top: 152px;
    left: 0;
    margin: 0 auto;
    right: 0;
	overflow-x:hidden ;
	overflow-y:scroll ;
}
.mrlist::-webkit-scrollbar {
	display: none;
}

.mrlist li{
	width: 240px;
	/* height: 232px; */
	float: left;
	margin-top:10px;
}
.mrlist li a{
	text-decoration: none !important; 
}

.mrlist li img{
	margin: 0 auto;
	display: block;
	width:90%;
/* 	height:190px; */
}

.mrlist li p{
/* 	color: #fff;
	width: 117px;
	height: 27px;
	text-align: center;
	line-height: 28px;
	font-family: "微软雅黑";
	background: url(../img/nameNg.png) no-repeat;
	margin-left: 26px;
	margin-top: 6px; */
	    color: #fff;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "微软雅黑";
    background: url(../img/nameNg.png) no-repeat;
    background-size: 100%;
    margin-left: 26px;
    margin-top: 6px;
    font-size: 20px;
}


.mr_intr{
/* 	position: absolute;
	left: 175px;
	top: 147px; */
	    position: absolute;
    /* left: 175px; */
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    top: 17%;

}


@media screen and (max-width: 1280px) {
   .mrlist {
    width: 960px;
    height: 520px;
    /* padding-bottom: 60px; */
    position: absolute;
   top: 11%;}
   .mrlist li {
   width: 20%;}
   .mrlist li p {
    color: #fff;
    width: 84%;
    margin: 0 auto;
    height: 50px;
    text-align: center;
    line-height: 38px;
    font-family: "微软雅黑";
    background: url(../img/nameNg.png) no-repeat;
    background-size: 100%;
    /* margin-left: 26px; */
    margin-top: 6px;
   font-size: 20px;}
}