/*默认样式重置*/
html, body, div, p, a, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0 auto; padding: 0;font: 16px "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial; }
article, aside, dialog, footer, header, section, nav, figure, menu { display: block; margin: 0 auto; padding: 0; }
body,html{height: 100%;}
ul li{list-style-type: none;}

/*li滚动*/
.slides-box{width: 100%; height: 100%; margin: auto; overflow: hidden;}
.slides{position: relative; height: 100%; width: 100%; margin: auto; float: left;}
.slides li{position: absolute; width: 100%; height: 100%;}
/*.slides li img{ display: block; width: 100%; margin: auto;}*/
.prev, .next{position: absolute; z-index: 99; top: 45%; width: 47px; height: 143px; margin-top: -40px; color: #fff; cursor: pointer; background-color: #000; -webkit-animation:fadeInUpsp 1s 1.5s ease both;-moz-animation:fadeInUpsp 1s 1.5s ease both; opacity: .4; }
.prev:hover, .next:hover{opacity: .8;}
.prev{ left:10%; background: url(../images/arr_left.png) no-repeat;}
.next{ right:10%; background: url(../images/arr_right.png) no-repeat;}
/*页码*/
.pagination{position: absolute; bottom:7%!important;z-index: 99; opacity: .6; }
.pagination li{padding: 5px 3px; float: left;}
.pagination li a{display: block; width: 25px; height: 25px; line-height: 25px; border-radius: 25px; background:#efb883; color: #fff; text-align: center; font-family: Arial;text-decoration: none;}
.pagination .active{background:#FF5700;}

h1 { font-size: 3em; font-weight:bold; color:#D01519;}

.left{float:left;}
.right {float:right;}
.ml20 { margin-left: 20px;}
.ml30 { margin-left: 30px;}

/*主内容区块*/
.layout { width:1200px;height:770px; background:#FFFFFF; margin-top:45px; border-radius:20px; background-color: rgba(255, 255, 255,.8); position:relative; }

.updowninfo { position: absolute; top: 45px; right: -10px; float: right; z-index: 999;-webkit-animation:fadeInRight .8s .6s ease both;-moz-animation:fadeInRight .8s .5s ease both;}

.animation_qiao {-webkit-animation:fadeInUp 1s .7s ease both; -moz-animation:fadeInUp 1s .7s ease both; width:590px; height:auto; margin-top:15px; float:left; text-align:center;}
	
/*新闻内容区块*/
.warp {width: 500px; height:690px; border: 1px solid #DDDDDD; overflow: hidden; padding: 15px; margin-top: 20px; position: relative; float: right; margin-right: 25px; -webkit-animation:fadeInLeft .8s .8s ease both; -moz-animation:fadeInLeft .8s .8s ease both;}
	
.box {height: 100%; overflow-x: hidden; overflow-y: auto; margin-right: -17px; padding: 10px;}
.box p {font-size:18px; line-height:32px!important; text-indent:2em; }

.scrollBar {float:right; position:relative; display:none; width:10px; height:200px!important; z-index:100;}
	
/*左边区块*/
.News_info { width:590px;height:660px; float: left; margin-left:20px; -webkit-animation:fadeInRight .8s .6s ease both; -moz-animation:fadeInRight .8s .6s ease both; position: relative; margin-top: 15px;}

.title { width: 645px; height: auto; overflow: hidden; float: left; margin-left:10px; font-size: 1.7em; font-weight: bold; line-height: 1.5em; text-align: center; }
.phone { width: 295px; height: 480px; float: left; background-color:#eed7bb; border-radius:18px; margin-left:10px; margin-top: 15px;  }
.phone .video{width: 270px; height: 450px; float: left; margin-left:10px; margin-top: 15px;text-align: center;}

.img_bg {width: 235px; height: 235px; background:url(../images/mojiBG.png) no-repeat; float: left; -webkit-animation:flipInY 1.5s .8s ease both; -moz-animation:flipInY 1.5s .8s ease both;margin-top: 15px; }

.img_bg2 {width: 235px; height: 235px; background:url(../images/mojiBG.png) no-repeat; float: left; -webkit-animation:flipInY 1.5s 1s ease both; -moz-animation:flipInY 1.5s 1s ease both;margin-top: 15px; }

.pic_box {width: 185px; height: 185px; margin-top: 25px; }/*图片盒子*/
.pic_box img {width: 185px; height: 185px; border-radius: 50%;}


/*首屏*/
.screen01 { width: 100%; height: 100%;  overflow: hidden; position:relative;}

/*封面动画设置*/
#animation01 {-webkit-animation:fadeInUp 1s 1.2s ease both;-moz-animation:fadeInUp 1s 1.2s ease both; background: url(../images/title_03.png) no-repeat; width:883px; height: 434px; top:15%; left:26%; position:absolute; float: left; z-index: 20;}
#animation02 {-webkit-animation:fadeInUp 1s 1.5s ease both;-moz-animation:fadeInUp 1s 1.5s ease both; background: url(../images/title_05.png) no-repeat; width:883px; height: 104px; top:52%; left:21%; position:absolute; float: left; z-index: 20;}
#animation03 {-webkit-animation:flipInY 1.2s 1.8s ease both; -moz-animation:flipInY 1.82s 1.8s ease both; background:url(../images/title_14.png) no-repeat; width:561px; height: 199px; float:right; right: 24%; top:4%; position:absolute; z-index: 20;}
#animation04 {-webkit-animation:fadeInUp 1.2s 2s ease both; -moz-animation:fadeInUp 1.2s 2s ease both; background: url(../images/title_08.png) no-repeat; width:650px; height:82px; bottom: 25%; left: 38%; position:absolute; float: left; z-index: 20; }
#animation05 {-webkit-animation:fadeInUp 1s 2.2s ease both;-moz-animation:fadeInUp 1s 2.2s ease both; background: url(../images/title_12.png) no-repeat; width:179px; height: 103px; bottom: 13%; left:44%; position:absolute; float: left; z-index: 20;}

/*封面视频盒子*/
#video09 { position: absolute; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: -100;}

/*飘动*/
#flagCanvas {position:absolute; top:12%; left:0; z-index:0; transform-origin:center; transform:translate3d(-50%,-50%,0); -webkit-animation:fadeInUp 1s 1s ease both; -moz-animation:fadeInUp 1s 1s ease both;}

/*卷首语视频盒子*/
.videoBox01 { float:left; width:570px; height:390px; margin-top:20px; margin-left:20px;}

/*后记*/
.houjiBox { width: 1005px; height: 720px; background: url(../images/houjiBG_03.jpg) top no-repeat; float: left; margin-left: 80px; -webkit-animation:fadeInUp 1s .8s ease both; -moz-animation:fadeInUp 1s .8s ease both;}

.houjiBox .houji01 {-webkit-animation:fadeInUp 1s 1.2s ease both; -moz-animation:fadeInUp 1s 1.2s ease both; background: url(../images/houji_03.png) no-repeat center; width:1000px; height: 310px; margin-top:30px; position:relative; float: left; z-index: 35;}
.houjiBox .houji02 {-webkit-animation:fadeInUp 1s 1.5s ease both; -moz-animation:fadeInUp 1s 1.5s ease both; background: url(../images/houji_06.png) no-repeat center; width:1000px; height: 263px; margin-top:10px; position:relative; float: left; z-index:35; }

.author { -webkit-animation:fadeInUp 1s 1.8s ease both; -moz-animation:fadeInUp 1s 1.8s ease both; width: 1005px; height: 55px; line-height: 55px; float: left; font-size: 16px; border-top: #ddd 1px solid; text-align: center; margin-top: 20px;}

.back {-webkit-animation:fadeInUp 1s 2s ease both; -moz-animation:fadeInUp 1s 2s ease both; width: 1005px; height: 35px; text-align: center;}

/*动画库*/

/*淡入*/
@-webkit-keyframes fade {
	0%{opacity:0;}
	100%{opacity:1;}
}
@-moz-keyframes fade{
	0%{opacity:0;}
	100%{opacity:1;}
}

/*左边淡入*/
@-webkit-keyframes fadeInLeft{
	0%{opacity:0; -webkit-transform:translateX(-30px)}
	100%{opacity:1; -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{
	0%{opacity:0; -moz-transform:translateX(-30px)}
	100%{opacity:1; -moz-transform:translateX(0)}
}

/*右边淡入*/
@-webkit-keyframes fadeInRight{
	0%{opacity:0; -webkit-transform:translateX(30px)}
	100%{opacity:1; -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
	0%{opacity:0; -moz-transform:translateX(30px)}
	100%{opacity:1; -moz-transform:translateX(0)}
}

/*从下淡入*/
@-webkit-keyframes fadeInUp{
	0%{opacity:0; -webkit-transform:translateY(20px)}
	100%{opacity:1; -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp{
	0%{opacity:0; -moz-transform:translateY(20px)}
	100%{opacity:1; -moz-transform:translateY(0)}
}
/*从下淡入sp*/
@-webkit-keyframes fadeInUpsp {
	0%{opacity:0; -w ebkit-transform:translateY(20px)}
	100%{opacity:.5;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUpsp {
	0%{opacity:0; -moz-transform:translateY(20px)}
	100%{opacity:.5; -moz-transform:translateY(0)}
}

/*Y轴翻转*/
@-webkit-keyframes flipInY{
0%{-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0}
40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
70%{-webkit-transform:perspective(400px) rotateY(10deg)}


100%{-webkit-transform:perspective(400px) rotateY(0deg);
opacity:1}
}
@-moz-keyframes flipInY{
0%{-moz-transform:perspective(400px) rotateY(90deg);
opacity:0}
40%{-moz-transform:perspective(400px) rotateY(-10deg)}
70%{-moz-transform:perspective(400px) rotateY(10deg)}
100%{-moz-transform:perspective(400px) rotateY(0deg);
opacity:1}
}