@charset "gb2312";
*{ margin:0px; padding:0px; border:0; }
body { -webkit-text-size-adjust: 100%;}
html, body {margin:0px; padding:0; font:16px/1.5 'syS1', "Microsoft YaHei" , tahoma, arial, \5FAE\8F6F\96C5\9ED1, "Hiragino Sans GB", sans-serif;background:#fff; height:100%; background: url(../images/bj.jpg) center center no-repeat; background-size:cover; }
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,img,button {border:0;  padding:0; margin:0; font-weight:normal; } 
h1,h2,h3,h4,h5,h6,p,em,i,b,span { margin:0; padding:0; font-weight:normal; font-style:normal;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
address,cite,code,th {font-weight:normal;font-style:normal;}
img:hover { opacity:1; filter: alpha(opacity=100); }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
.fl { float:left; }
.fr { float:right; }
a { color:#000; text-decoration:none; }
a:hover{ color:#9b1d00; text-decoration:none;}
div,ul,li,h1,h2,h3,h4,h5,h6,dl,dd,dt,d,span,b,p,em,a { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}


@font-face {
    font-family: 'syS1'; 
    src: url('SourceHanSerifSC-Light.otf'); 
    font-style: normal;
  }

@font-face {
    font-family:'syS2'; 
    src: url('SourceHanSerifSC-Bold.otf'); 
    font-style: normal;
  }


#menubox { position:fixed; z-index:70; height:100%; right:0; top:0; display:flex; align-items:center; }

#menu { width:40px; position:absolute;  right:-28px;  -webkit-transition:all .3s linear; transition:all .3s linear;}
#menu ul li { float:left; width:100%;  }
#menu a { width:100%; background:#000; display:inline-block; float:left; color:rgba(255,255,255,.9); font-size:16px; line-height:17px; padding:14px 12px; text-align:center; margin:1px 0;  }
#menu a:hover { background:#9b1d00; }
#menu .active a { background:#9b1d00;}
#menu:hover {  right:0;  }
.arrows { display: none;}



.header { width:100%; height:100%; position:absolute; left:0; top:0;  background:url(../images/bj2.jpg) center center no-repeat; background-size:cover; }
.active .header { -webkit-animation:header 4s ease .5s backwards; animation:header 4s ease .5s backwards; }
@keyframes header
{
0%   { opacity:0; filter: blur(0px);-webkit-transform:scale(1.2); }
100% { opacity:1; }
}
@-webkit-keyframes header
{
0%   { opacity:0; filter: blur(0px);-webkit-transform:scale(1.2);}
100% { opacity:1; }
}

.tit { width:1200px; position:absolute; top:4.5%; margin-top:0; left:50%; margin-left:-600px; text-align: center; }
.active .tit {-webkit-animation:tit 1.5s ease 2.5s backwards; animation:tit 1.5s ease 2.5s backwards; }
@keyframes tit
{
0%   { -webkit-transform:scale(.3);  opacity:0; filter: blur(40px);}
100% { -webkit-transform:scale(1);  opacity:1; filter: blur(0);}
}
@-webkit-keyframes tit
{
0%   { -webkit-transform:scale(.3);  opacity:0; filter: blur(40px);}
100% { -webkit-transform:scale(1);  opacity:1; filter: blur(0);}
}

.sub { width:100%; position:absolute; left:0; text-align: center; bottom:4.5%; font-size:22px; line-height:1.5em; color:rgba(255,255,255,.9); }
.active .sub { -webkit-animation:sub .8s ease 3.5s backwards; animation:sub .8s ease 3.5s backwards;}
@keyframes sub
{
0%   {opacity:0; -webkit-transform:translateY(30px);  filter: blur(5px);}
100% { opacity:1;}
}
@-webkit-keyframes sub
{
0%   {opacity:0; -webkit-transform:translateY(30px);  filter: blur(5px);}
100% { opacity:1;}
}
.active .sub b { font-family:'syS2'; margin-left: 1rem;  }



#superContainer { height:100%; position:relative; }
.section { position:relative; height:100%; overflow:hidden; top:0; bottom:0;  }

.con { width:1200px; height: 100%; display:flex; align-items:center; margin: 0 auto;  }

.warp { width: 100%; margin: 0 auto;}
.warp2 { width: 100%; margin: 0 auto;}
.wl01 { width: 670px; float: left; }


/*画面2 生命托举*/
.tit01 { width: 100%; float: left; position: relative; }
.tit01 font { width: 100%; float: left;  }
.active .slm01 { -webkit-animation:slm01 .8s ease-out .5s backwards; animation:slm01 .8s ease-out .5s backwards; }
@keyframes slm01
{
0%   { -webkit-transform:scale(1.5,1);  opacity:0; filter: blur(40px); }
100% {  -webkit-transform:scale(1,1);  opacity:1; filter: blur(0);}
}
@-webkit-keyframes slm01
{
0%   {-webkit-transform:scale(1.5,1);  opacity:0; filter: blur(40px); }
100% {  -webkit-transform:scale(1,1);  opacity:1; filter: blur(0);}
}
.tit01 b {  position:absolute; left:354px; top:62px;  z-index: 3; }
.active .bot01 { -webkit-animation:bot01 0.5s ease-out 1s backwards; animation:bot01 0.5s ease-out 1s backwards; }
@keyframes bot01
{
0%   {opacity:0; -webkit-transform:translate(150px,-350px); }
100% { opacity:1;}
}
@-webkit-keyframes bot01
{
0%   {opacity:0; -webkit-transform:translate(150px,-350px); }
100% { opacity:1;}
}

.aPic { width:630px; float: left; margin-top:30px; position: relative; }
.aPic span { width: 100%; float: left; overflow: hidden; border: 8px solid #c0d8cc; border-radius:10px; }
.aPic span img { width: 100%; transition:all ease-out .3s 0s; }
.aPic span:hover img { -webkit-transform:scale(1.05); }
.aPic b { width: 334px; position:absolute; right:-40px; top:-65px;  z-index: 3;  }
.aPic b img { width: 100%; height: auto; }
.active .photo { -webkit-animation:photo 0.6s ease-out 1.5s backwards; animation:photo 0.6s ease-out 1.5s backwards; }
@keyframes photo
{
0%   {opacity:0; -webkit-transform:translate(350px,120px); }
100% { opacity:1;}
}
@-webkit-keyframes photo
{
0%   {opacity:0; -webkit-transform:translate(350px,120px); }
100% { opacity:1;}
}
.active .sd { 
-webkit-animation:sd 0.8s ease-out 2s backwards; 
animation:sd 0.8s ease-out 2s backwards; 
}
@keyframes sd
{
0% { opacity:0; -webkit-transform:translateX(0px);}
100% {opacity:1;}
}
@-webkit-keyframes sd
{
0%   { opacity:0;-webkit-transform:translateX(0px);}
100% { opacity:1;}
}

.wr01 { width: 500px; float: right; margin-top: 105px; }
.newstit1 { width: 100%; float: left; border-radius:10px; border: 1px dashed rgba(0,0,0,.9); padding:20px 35px; text-align: justify; font-size: 20px; line-height: 36px; color: #000; cursor: pointer; }
.newstit1 strong { font-family:'syS2'; }
.newstit1 a { color: #000;}
.newstit1:hover a strong { color: #9b1d00; }
.active .newstit1 { -webkit-animation:newstit1 0.8s ease-out 2s backwards; animation:newstit1 0.8s ease-out 2s backwards; }
@keyframes newstit1
{
0%   {opacity:0; -webkit-transform:translateX(-200px); }
100% { opacity:1;}
}
@-webkit-keyframes newstit1
{
0%   {opacity:0; -webkit-transform:translateX(-200px); }
100% { opacity:1;}
}

.newslist { width: 100%; float: left; margin-top: 30px;  }
.newslist h2 { width: 100%; float: left; font-size:22px; line-height: 30px; color: #9b1d00; margin-bottom: 15px;  font-family:'syS2';}
.newslist ul li { width: 100%; float: left;  font-size:18px; line-height: 30px; color: #000; margin-bottom: 15px;}
.newslist ul li i { content:'';  width:0; height:0; border:7px solid transparent;  border-left:9px solid #000; border-right:none; float:left; margin-right: 10px; margin-top:9px; display: inline-block; }
.active .newslist { -webkit-animation:newslist 0.6s ease-out 2.5s backwards; animation:newslist 0.6s ease-out 2.5s backwards; }
@keyframes newslist
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}
@-webkit-keyframes newslist
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}

/*画面3 向善托举*/
.wl02 { width: 600px; float: left; }
.wr02 { width: 520px; float: right; margin-top: 115px; }

.tit02 { width: 100%; float: left; position: relative; }
.tit02 font { width: 100%; float: left;  }
.active .slm02 { -webkit-animation:slm02 .8s ease-out .5s backwards; animation:slm02 .8s ease-out .5s backwards; }
@keyframes slm02
{
0%   { -webkit-transform:scale(1.5,1);  opacity:0; filter: blur(40px); }
100% {  -webkit-transform:scale(1,1);  opacity:1; filter: blur(0);}
}
@-webkit-keyframes slm02
{
0%   {-webkit-transform:scale(1.5,1);  opacity:0; filter: blur(40px); }
100% {  -webkit-transform:scale(1,1);  opacity:1; filter: blur(0);}
}
.tit02 b {  position:absolute; left:354px; top:62px;  z-index: 3; }
.active .bot02 { -webkit-animation:bot02 0.5s ease-out 1s backwards; animation:bot02 0.5s ease-out 1s backwards; }
@keyframes bot02
{
0%   {opacity:0; -webkit-transform:translate(150px,-350px); }
100% { opacity:1;}
}
@-webkit-keyframes bot02
{
0%   {opacity:0; -webkit-transform:translate(150px,-350px); }
100% { opacity:1;}
}

.tit03 { width: 100%; float: left; position: relative;  }
.tit03 font { width: 100%; float: left;  }
.active .slm03 { -webkit-animation:slm03 0.6s ease-out 2.3s backwards; animation:slm03 0.6s ease-out 2.3s backwards; }
@keyframes slm03
{
0%   {opacity:0; -webkit-transform:translateY(-200px); }
100% { opacity:1;}
}
@-webkit-keyframes slm03
{
0%   {opacity:0; -webkit-transform:translateY(-200px); }
100% { opacity:1;}
}
.tit03 b { position:absolute; left:354px; top:62px;  z-index: 3; }
.active .bot03 { 
-webkit-animation:bot03 0.5s ease-out 2.7s backwards; 
animation:bot03 0.5s ease-out 2.7s backwards; }
@keyframes bot03
{
0%   {opacity:0; -webkit-transform:translate(150px,350px); }
100% { opacity:1;}
}
@-webkit-keyframes bot03
{
0%   {opacity:0; -webkit-transform:translate(150px,350px); }
100% { opacity:1;}
}

.tit03_mob { display: none;  }

.b_tuwen { width: 100%; float: left; margin-top:10px; }
.b_tuwen ul li { width: 100%; float: left; border-radius:10px; border: 1px dashed rgba(0,0,0,.9); padding:20px 30px; display: block; margin-top: 50px; }
.b_tuwen ul li h4 { width: 29%; float: left; position: relative; overflow: hidden; border: 8px solid #ceecdd; border-radius:10px; margin-top: -50px;}
.b_tuwen ul li h4 img { width: 100%; overflow: hidden; border-radius:6px; }
.b_tuwen ul li h4 span { position: absolute; bottom:0; width:100%; float:left;  background:-webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,.8)));  padding:10px 0;  }
.b_tuwen ul li h4 span p { width: 100%; float: left;font-size:16px; line-height:24px;  color:#fff; overflow:hidden; text-align: center; }
.b_tuwen ul li h4 span p font { width: 100%; float: left; font-size:18px;  font-family:'syS2'; text-align: center;}
.b_tuwen ul li h3 { width: 65.5%; float:right; text-align: justify; font-size:18px; line-height: 32px; color: #000;font-family:'syS2'; }
.b_tuwen ul li:hover h3 { color: #9b1d00; }
.b_tuwen ul li:nth-child(2n) h4 { float: right; }
.b_tuwen ul li:nth-child(2n) h3 { float: left; }

.active .xs2 { -webkit-animation:xs2 0.6s ease-out 1.4s backwards; animation:xs2 0.6s ease-out 1.4s backwards; }
@keyframes xs2
{
0%   {opacity:0; -webkit-transform:translate(-350px,120px); }
100% { opacity:1;}
}
@-webkit-keyframes xs2
{
0%   {opacity:0; -webkit-transform:translate(-350px,120px); }
100% { opacity:1;}
}

.active .xs3 { -webkit-animation:xs3 0.6s ease-out 1.7s backwards; animation:xs3 0.6s ease-out 1.7s backwards; }
@keyframes xs3
{
0%   {opacity:0; -webkit-transform:translate(350px,120px); }
100% { opacity:1;}
}
@-webkit-keyframes xs3
{
0%   {opacity:0; -webkit-transform:translate(350px,120px); }
100% { opacity:1;}
}

.txtScroll { width:100%; height:350px; overflow:hidden; position: relative; margin-bottom:5.5%; }
.txtScroll dl { width:100%; float:left; margin-bottom: 3%; }
.txtScroll dl dt { width:75px; float:left; margin-top: 3px;  }
.txtScroll dl dt img { width: 50px; height: 50px; overflow: hidden; border-radius:6px; border:3px solid #fff; }
.txtScroll dl dd {width:calc( 100% - 75px ); float:left; color:#000; font-size:16px; line-height:30px; }
.txtScroll dl dd strong { font-family:'syS2';}

.active .brt { -webkit-animation:brt 0.6s ease-out 2s backwards; animation:brt 0.6s ease-out 2s backwards; }
@keyframes brt
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}
@-webkit-keyframes brt
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}

#comment { width:90%; }
#commentbar { width:48px; position: absolute; right:0; top:0;}
#commentbar a.next,#commentbar a.prev { background-repeat: no-repeat; background-size:contain; width:36px; height:36px; border-radius:100%; color:#bca06e; background-color: #fff;  opacity: .5; display: block; position: absolute; cursor: pointer; }
#commentbar a.next { background-image:url("../images/next.png"); right: 0; top: 52px; transform: rotate(90deg);}
#commentbar a.prev { background-image:url("../images/prev.png"); right: 0; top: 0; transform: rotate(90deg);}
#commentbar a.next:hover,#commentbar a.prev:hover { opacity: 1;} 




/*画面4 百万网友“云送别”*/
.wl03 { width: 670px; float: left; }
.wr03 { width: 500px; float: right; margin-top: 70px; }

.pic02 { width:789px; float: left; margin-top:20px; position: relative; left: -130px; }
.pic02 span { width: 100%; float: left; overflow: hidden;  }
.pic02 span img { width: 100%; transition:all ease-out .4s 0s; }
.pic02 span:hover img { -webkit-transform: translateY(-20px);transform:translateY(-20px);}
.active .photo4 { -webkit-animation:photo4 0.8s ease-out 1.2s backwards; animation:photo4 0.8s ease-out 1.2s backwards; }
@keyframes photo4
{
0%   {opacity:0; -webkit-transform:scale(0.1);  }
100% { opacity:1; -webkit-transform:scale(1); }
}
@-webkit-keyframes photo4
{
0%   {opacity:0; -webkit-transform:scale(0.1);  }
100% { opacity:1;-webkit-transform:scale(1); }
}

.newslist3 { width: 100%; float: left; margin-top: 30px;  }
.newslist3 h2 { width: 100%; float: left; font-size:22px; line-height: 30px; color: #9b1d00; margin-bottom: 15px;  font-family:'syS2';}
.newslist3 ul li { width: 100%; float: left;  font-size:18px; line-height: 30px; color: #000; margin-bottom: 15px;}
.newslist3 ul li i { content:'';  width:0; height:0; border:7px solid transparent;  border-left:9px solid #000; border-right:none; float:left; margin-right: 10px; margin-top:9px;  display: inline-block; }
.active .newslist3 { -webkit-animation:newslist3 0.6s ease-out 2.5s backwards; animation:newslist3 0.6s ease-out 2.5s backwards; }
@keyframes newslist3
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}
@-webkit-keyframes newslist3
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}

.zan { width: 100%; float: left; height: 64px; overflow: hidden;  margin-bottom: 30px; }
.active .zan { -webkit-animation:zan 0.8s ease-out 3s backwards; animation:zan 0.8s ease-out 3s backwards; }
@-webkit-keyframes zan {
0% { -webkit-transform: translateX(150px); opacity:0;}
100% { -webkit-transform: translateY(0); opacity:1; }
}
@keyframes zan {
0% { -webkit-transform: translateX(150px); opacity:0}
100% { -webkit-transform: translateY(0); opacity:1 }
}
.zan .kd { width: 500px;}
.zan2 { display: none; }



/*画面5 善意的互相托举”*/
.wl04 { width: 670px; float: left; }
.tit04 { width: 100%; float: left; position: relative; }
.tit04 font { width: 100%; float: left;  }

.love { width: 100%; float: left; height: 504px; position: relative;  margin-top: 40px; }
.newstit5 { left:10px; top:15px; position:absolute; width:380px; border-radius:10px; background: #3d6350;  padding:20px 35px; text-align: justify; font-size: 18px; line-height: 36px; color: #fff; z-index: 5;  }
.newstit5 strong { font-family:'syS2'; font-weight: normal;}
.newstit5 a { color: #fff;}
.newstit5:hover a strong { color: #f7edcd; }
.active .newstit5 { -webkit-animation:newstit5 0.6s ease-out 1.2s backwards; animation:newstit5 0.6s ease-out 1.2s backwards; }
@keyframes newstit5
{
0%   {opacity:0; -webkit-transform:scale(0.1); }
100% { opacity:1;}
}
@-webkit-keyframes newstit5
{
0%   {opacity:0; -webkit-transform:scale(0.1); }
100% { opacity:1;}
}

.lovebj { width: 100%; height: 100%; position: absolute; background:url(../images/love.png) center top no-repeat;  }
.active .lovebj { -webkit-animation:lovebj 1.5s ease-out 1s backwards; animation:lovebj 1.5s ease-out 1s backwards; }
@keyframes lovebj
{
0%   {opacity:0; }
100% { opacity:1;}
}
@-webkit-keyframes lovebj
{
0%   { opacity:0; }
100% { opacity:1; }
}

.talk01,.talk02,.talk03,.talk04,.talk05,.talk06,.talk07 { position:absolute; border-radius:10px; font-size:16px; color:#333; line-height:28px; box-shadow: 0px 0px 15px rgba(155,29,0,.2);   background: rgba(255,255,255,.85); padding:18px 25px; text-align: justify;cursor: pointer;  transition:all ease-out .4s 0s; }	

.talk04 { left:425px; top:385px; width:275px;}
.talk01 { left:45px; top:354px; width:275px; }
.talk05 { left:806px; top:-48px; width:340px;}
.talk02 { left:466px; top:30px; width:275px;}
.talk07 { left:805px; top:375px;width:275px; }
.talk03 { left:460px; top:185px; width:320px;}
.talk06 { left:835px; top:145px; width:360px; }


.talk01 b,.talk02 b,.talk03 b,.talk04 b,.talk05 b,.talk06 b,.talk07 b { width: 69px; height: 69px; position:absolute; left:-33px; top:-33px; background:url("../images/love_ico.png") ; background-size:cover; }
.talk01:hover,.talk02:hover,.talk03:hover,.talk04:hover,.talk05:hover,.talk06:hover,.talk07:hover { -webkit-transform:translateY(-10px); }
.active .talk03 { -webkit-animation:talk03 0.4s ease-out 1.8s backwards; animation:talk03 0.4s ease-out 1.8s backwards; }
@keyframes talk03
{
0%   {opacity:0; -webkit-transform:translate(500px,500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk03
{
0%   {opacity:0; -webkit-transform:translate(500px,500px);  }
100% { opacity:1;}
}

.active .talk02 { -webkit-animation:talk02 0.4s ease-out 1.9s backwards; animation:talk02 0.4s ease-out 1.9s backwards; }
@keyframes talk02
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk02
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}

.active .talk04 { -webkit-animation:talk04 0.4s ease-out 2s backwards; animation:talk04 0.4s ease-out 2s backwards; }
@keyframes talk04
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk04
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}

.active .talk05 { -webkit-animation:talk05 0.4s ease-out 2.1s backwards; animation:talk05 0.4s ease-out 2.1s backwards; }
@keyframes talk05
{
0%   {opacity:0; -webkit-transform:translate(500px,-500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk05
{
0%   {opacity:0; -webkit-transform:translate(500px,-500px);  }
100% { opacity:1;}
}

.active .talk07 { -webkit-animation:talk07 0.4s ease-out 2.2s backwards; animation:talk07 0.4s ease-out 2.2s backwards; }
@keyframes talk07
{
0%   {opacity:0; -webkit-transform:translate(500px,500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk07
{
0%   {opacity:0; -webkit-transform:translate(500px,500px);  }
100% { opacity:1;}
}

.active .talk01 { -webkit-animation:talk01 0.4s ease-out 2.3s backwards; animation:talk01 0.4s ease-out 2.3s backwards; }
@keyframes talk01
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk01
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}

.active .talk06 { -webkit-animation:talk06 0.4s ease-out 2.4s backwards; animation:talk06 0.4s ease-out 2.4s backwards; }
@keyframes talk06
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}
@-webkit-keyframes talk06
{
0%   {opacity:0; -webkit-transform:translate(-500px,500px);  }
100% { opacity:1;}
}




/*画面6 各方评论”*/
.wl05 { width: 620px; float: left; }
.wr05 { width: 510px; float: right; margin-top: 115px; margin-right: 20px; }
.ePic { width:90%; float: left; margin-top:50px; position: relative; margin-left: 20px; }
.ePic ul li { width: 48.5%; float: left; overflow: hidden;  border-radius:10px;}
.ePic ul li img { width: 100%; transition:all ease-out .3s 0s; }
.ePic ul li:nth-child(2n) { float: right; }
.active .ePic { -webkit-animation:ePic 0.6s ease-out 1s backwards; animation:ePic 0.6s ease-out 1s backwards; }
@keyframes ePic
{
0%   {opacity:0; -webkit-transform:translate(-350px,120px); }
100% { opacity:1;}
}
@-webkit-keyframes ePic
{
0%   {opacity:0; -webkit-transform:translate(-350px,120px); }
100% { opacity:1;}
}

.newslist2 { width: calc(100% - 90px); float: left; margin-top:40px; margin-left:60px;  }
.newslist2 ul li { width: 100%; float: left;  font-size:18px; line-height: 30px; color: #000; margin-bottom: 15px;}
.newslist2 ul li i { display: inline-block; height: 36px; font-size:16px; line-height: 36px; color: #fff;  border-radius:5px; padding:0 12px; margin-right: 12px; }
.newslist2 ul li i.c1 { background: #9b1d00;}
.newslist2 ul li i.c2 { background: #3d6350;}
.active .newslist2 { -webkit-animation:newslist2 0.6s ease-out 1.5s backwards; animation:newslist2 0.6s ease-out 1.5s backwards; }
@keyframes newslist2
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}
@-webkit-keyframes newslist2
{
0%   {opacity:0; -webkit-transform:translateY(100px); }
100% { opacity:1;}
}


.people { width:100%; position: relative; }
.people h2 { width: 50%; font-size:30px; line-height: 40px; color: #9b1d00;  font-family:'syS2'; position: absolute; left: 0; top:70px;}
.people ul li { position: absolute; width: 120px; height: 120px; cursor: pointer;}
.people ul li img { width: 100%; height: auto; border-radius:8px;}

.people ul li h3 { width: 285px; position: absolute; top:100px; right:15px; z-index: 5; border-radius:10px; font-size:18px; color:#3d6350; line-height:28px; box-shadow:0px 0px 7px rgba(0,0,0,.2); background: rgba(255,255,255,1); padding:18px 25px; text-align: justify; cursor: pointer;  -webkit-transform:translateY(15px);  opacity:0; transition:all ease-out .4s 0s; }
.people ul li h3 p strong { font-family:'syS2'; font-weight: normal;}
.people li h3::after { content:''; width: 0; height: 0; position: absolute; right:20px; box-shadow:0px 0px 5px rgba(0,0,0,.2); border:11px solid transparent; border-bottom: 15px solid #fff; border-top:none; top:-15px; }
.people ul li:hover h3 {  opacity:1; -webkit-transform:translateY(0px);  }

.people ul li h4 { width: 285px; position: absolute; top:100px; right:15px; z-index: 5; border-radius:10px; font-size:18px; color:#3d6350; line-height:28px; box-shadow:0px 0px 7px rgba(0,0,0,.2); background: rgba(255,255,255,1); padding:18px 25px; text-align: justify; cursor: pointer;  -webkit-transform:translateY(15px);  opacity:0; transition:all ease-out .4s 0s; }
.people ul li h4 p strong { font-family:'syS2'; font-weight: normal;}
.people li h4::after { content:''; width: 0; height: 0; position: absolute; right:20px; box-shadow:0px 0px 5px rgba(0,0,0,.2); border:11px solid transparent; border-bottom: 15px solid #fff; border-top:none; top:-15px; }
.people ul li:hover h4 {  opacity:1; -webkit-transform:translateY(0px); }

.people ul li h5 { width: 285px; position: absolute; top:100px; right:15px; z-index: 5; border-radius:10px; font-size:18px; color:#3d6350; line-height:28px; box-shadow:0px 0px 7px rgba(0,0,0,.2); background: rgba(255,255,255,1); padding:18px 25px; text-align: justify; cursor: pointer;  -webkit-transform:translateY(15px);  opacity:0; transition:all ease-out .4s 0s; }
.people ul li h5 p strong { font-family:'syS2'; font-weight: normal;}
.people li h5::after { content:''; width: 0; height: 0; position: absolute; right:20px; box-shadow:0px 0px 5px rgba(0,0,0,.2); border:11px solid transparent; border-bottom: 15px solid #fff; border-top:none; top:-15px; }
.people ul li:hover h5 {  opacity:1; -webkit-transform:translateY(0px);  }

.active .people { -webkit-animation:people 0.8s ease-out 2s backwards; animation:people 0.8s ease-out 2s backwards; }
@keyframes people
{
0%   {opacity:0; -webkit-transform:translateX(100%);  }
100% { opacity:1;}
}
@-webkit-keyframes people
{
0%   {opacity:0;-webkit-transform:translateX(100%); }
100% { opacity:1;}
}

.t01 { left: 390px; top:0; }
.t02 { left: 0; top:130px; }
.t03 { left: 130px; top:130px; }
.t04 { left: 260px; top:130px; }
.t05 { left: 390px; top:130px; }
.t06 { left: 130px; top:260px; }
.t07 { left: 390px; top:260px; }
.t08 { left: 260px; top:390px; }
.t09 { left: 390px; top:390px; }

.bj06 { background:url(../images/bj06.png) center center no-repeat; }






