@charset "gb2312";
@media (max-width: 768px) { 
html, body {background: url(../images/bj_mob.jpg) center center no-repeat; background-size: 100% 100%;  }

#menubox { display: none; }
#menu { width:30px; position:absolute;  right:-24px; }
#menu ul li { float:left; width:100%;  }
#menu a { font-size:.85rem; line-height:1.1em; padding:10px 5px;   }
#menu a:hover { background:#000; }
#menu .active a { background:#9b1d00;}


.header { background:url(../images/bj2_mob.jpg) center center no-repeat; background-size:cover; }

.tit { width:100%; position:absolute; top:6%; margin-top:0; left:0; margin-left:0;  }
.tit img { width: 85%; height: auto;}
.sub { bottom:11.5%; font-size:1.2rem; line-height:1.5em;  color:rgba(255,255,255,.8);}
.active .sub b { margin-left: .5rem;  }

.arrows { width:60px; height:72px; position:absolute; left:50%; margin-left:-30px; bottom:2%; z-index:5; display: block; -webkit-transform:scale(.7); opacity:.9; }
.arrows path{stroke:#fff; fill:transparent; stroke-width:2px; animation:arrow 2s infinite; -webkit-animation:arrow 2s infinite; }
@keyframes arrow
{
0%{opacity:0}
40%{opacity:1}
80%{opacity:0}
100%{opacity:0}
}
@-webkit-keyframes arrow
{
0%{opacity:0}
40%{opacity:1}
80%{opacity:0}
100%{opacity:0}
}
.arrows path.a1{animation-delay:-1s;-webkit-animation-delay:-1s}
.arrows path.a2{animation-delay:-0.5s;-webkit-animation-delay:-0.5s}
.arrows path.a3{animation-delay:0s;-webkit-animation-delay:0s}
	
.active .arrows { -webkit-animation:arrows .8s ease 4s backwards; animation:arrows .8s ease 4s backwards; }
@keyframes arrows
{
0%   { opacity:0;  }
100% { opacity:1; }
}
@-webkit-keyframes arrows
{
0%   { opacity:0; }
100% { opacity:1; }
}
	

#superContainer { height:100%; position:relative; }
.section { position:relative; height:100%; overflow:hidden; top:0; bottom:0;  }

.con { width:100%; height: 100%; margin: 0 auto; display:inherit; align-items:auto; margin-top:0; }
.warp { width: 100%; margin: 0 auto; padding:5%; }
.warp2 { width: 100%; margin: 0 auto; padding:5% 0; }
.wl01 { width: 100%; float: left; }


/*画面2 生命托举*/
.tit01 { width: 100%; margin-left:3%; }
.tit01 font { width: 100%; float: left;  }
.tit01 font img { height:9vh; width: auto;}	
.tit01 b { position:absolute; left:35.5%; top:2.5vh;  }
.tit01 b img { height:2.5vh; width:auto;}
@keyframes bot01
{
0%   {opacity:0; -webkit-transform:translate(100%,-100%); }
100% { opacity:1;}
}
@-webkit-keyframes bot01
{
0%   {opacity:0; -webkit-transform:translate(100%,-100%); }
100% { opacity:1;}
}

.aPic { width:100%; float: left; margin-top:4%; }
.aPic span { width: 100%;  border:0 solid #c0d8cc; border-radius:10px; }
.aPic span img { width: 100%; height: 13rem;  transition:all ease-out .3s 0s; }
.aPic span:hover img { -webkit-transform:scale(1); }
.aPic b { width:auto; right:-40%; top:-15%; }
.aPic b img { height:auto; width:60%;}

.wr01 { width: 100%;  margin-top:5%; }
.newstit1 { width: 100%; padding:1rem 1.2rem;  font-size:.95rem; line-height:1.5em; border: 1px dashed rgba(0,0,0,.9);}
.newstit1:hover a strong { color: #000; }

.newslist { margin-top:6%; }
.newslist h2 {  font-size:1.2rem; line-height:1.4em; margin-bottom: .7rem; }
.newslist ul li { font-size:.9rem; line-height:1.5em; margin-bottom:.6rem;}
.newslist ul li i { content:'';  width:0; height:0; border:5px solid transparent;  border-left:7px solid #000; border-right:none; float:left; margin-right:.6rem; margin-top:7px; }


/*画面3 向善托举*/
.wr02 { width: 100%; float: left; margin-top:5%; }
.wl02 { width: 100%; float: left; }
	
.tit02 { width: 100%; margin-left:3%; }
.tit02 font { width: 100%; float: left;  }
.tit02 font img { height:9vh; width: auto;}	
.tit02 b { position:absolute; left:35.5%; top:2.5vh;  }
.tit02 b img { height:2.5vh; width:auto;}
@keyframes bot02
{
0%   {opacity:0; -webkit-transform:translate(100%,-100%); }
100% { opacity:1;}
}
@-webkit-keyframes bot02
{
0%   {opacity:0; -webkit-transform:translate(100%,-100%); }
100% { opacity:1;}
}

.tit03 { width: 100%; margin-left:3%;  display: none; }
.tit03 font { width: 100%; float: left; }
.tit03 font img { height:9vh; width: auto;}		
.tit03 b { position:absolute; left:35.5%; top:2.5vh; }
.tit03 b img { height:2.5vh; width:auto;}
@keyframes bot03
{
0%   {opacity:0; -webkit-transform:translate(100%,100%); }
100% { opacity:1;}
}
@-webkit-keyframes bot03
{
0%   {opacity:0; -webkit-transform:translate(100%,100%); }
100% { opacity:1;}
}
	
.tit03_mob { width: 100%; float: left; position:relative; display: block; margin:1% 0 4% 3%; }
.tit03_mob font { width: 100%; float: left;  }
.tit03_mob font img { height:9vh; width: auto;}		
.active .slm03_mob { -webkit-animation:slm03_mob 0.6s ease-out 2s backwards; animation:slm03_mob 0.6s ease-out 2s backwards; }
@keyframes slm03_mob
{
0%   {opacity:0; -webkit-transform:translateY(-200px); }
100% { opacity:1;}
}
@-webkit-keyframes slm03_mob
{
0%   {opacity:0; -webkit-transform:translateY(-200px); }
100% { opacity:1;}
}
.tit03_mob b { position:absolute; left:35.5%; top:2.5vh;  z-index: 3; }
.tit03_mob b img { height:2.5vh; width:auto;}
.active .bot03_mob { -webkit-animation:bot03_mob 0.5s ease-out 2.4s backwards; 
animation:bot03_mob 0.5s ease-out 2.4s backwards; }
@keyframes bot03_mob
{
0%   {opacity:0; -webkit-transform:translate(100%,100%); }
100% { opacity:1;}
}
@-webkit-keyframes bot03_mob
{
0%   {opacity:0; -webkit-transform:translate(100%,100%); }
100% { opacity:1;}
}

.b_tuwen { width: 100%; float: left; margin-top:1%; }
.b_tuwen ul li { width: 100%; padding:1rem 1.2rem;  border: 1px dashed rgba(0,0,0,.9); margin-top:10%; }
.b_tuwen ul li h4 { width: 36%; border: 5px solid #ceecdd; margin-top: -12%;}
.b_tuwen ul li h4 img { width: 100%; overflow: hidden; border-radius:6px; }
.b_tuwen ul li h4 span p { width: 100%; float: left; font-size:.85rem; line-height:1.4em; }
.b_tuwen ul li h4 span p font { font-size:1rem; font-family:'syS2';}
.b_tuwen ul li h3 { width:58%; float:right; font-size:.85rem; line-height:1.4em; }
.b_tuwen ul li:hover h3 { color: #000; }

.txtScroll { height:17.8vh; margin-bottom:0%; }
.txtScroll dl { width:100%; float:left; margin-bottom:5%; }
.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:.85rem; line-height:1.5em; }


.active .brt { -webkit-animation:brt 0.6s ease-out 2.7s backwards; animation:brt 0.6s ease-out 2.7s 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:87%; }
#commentbar { width:48px; position: absolute; right:0; top:0;}
#commentbar a.next,#commentbar a.prev { width:30px; height:30px; }
#commentbar a.next { top:40px;}
#commentbar a.next:hover,#commentbar a.prev:hover { opacity: .5;} 


/*画面4 百万网友“云送别”*/
.wl03 { width: 100%; float: left; }
.wr03 { width: 100%; float: left; margin-top:2%; }
.pic02 { width:100%; margin-top:1%; position: relative; left:0; }
.pic02 span { width: 100%; float: left; overflow: hidden; text-align: center;  }
.pic02 span img { width: 90%;  transition:all ease-out .4s 0s; }
.pic02 span:hover img { -webkit-transform: translateY(0);transform:translateY(0);}

.newslist3 { margin-top:3%; }
.newslist3 h2 { font-size:1.2rem; line-height:1.4em; margin-bottom: .7rem; }
.newslist3 ul li { font-size:.9rem; line-height:1.5em; margin-bottom:.6rem; }
.newslist3 ul li i { content:'';  width:0; height:0; border:5px solid transparent;  border-left:7px solid #000; border-right:none; float:left; margin-right:.6rem; margin-top:7px; }
.active .newslist3 { -webkit-animation:newslist3 0.6s ease-out 3s backwards; animation:newslist3 0.6s ease-out 3s backwards; }

	
.zan { display:none; }
.zan2 { width:1%; float:left; height:64px; margin-top:3%;  display: block;  -webkit-transform:scale(.7);  }
.active .zan2 { -webkit-animation:zan2 0.6s ease-out 2.5s backwards; animation:zan2 0.6s ease-out 2.5s backwards; }
@-webkit-keyframes zan2 {
0% { -webkit-transform: translateX(-100%); opacity:0;}
100% { -webkit-transform: translateX(0); opacity:1;  -webkit-transform:scale(.7);}
}
@keyframes zan2 {
0% { -webkit-transform: translateX(-100%); opacity:0;}
100% { -webkit-transform: translateX(0); opacity:1;  -webkit-transform:scale(.7);}
}
.zan2 .kd { width:500px; }

/*画面5 善意的互相托举”*/
.wl04 { width: 100%; float: left; }
.tit04 { width: 100%; margin-left:3%; padding:0 5%; }
.tit04 font { width: 100%; float: left;  }
.tit04 font img { height:9vh; width: auto;}	

.love { height:auto; position:inherit;  margin-top:4%; }
.newstit5 { left:auto; top:auto; width:90%; float: left; position:inherit; padding:1rem 1.5rem; font-size:1rem; line-height:1.5em; margin: 0 5%; }
.newstit5 strong { font-family:'syS1'; font-weight: normal;}
.newstit5 a { color: #fff;}
.newstit5:hover a strong { color: #f7edcd; }

.lovebj { width: 100%; float: left; min-height:60vh; height:auto; position:relative; top:auto; margin-top:5%; background:url(../images/love.png) center top no-repeat; background-size:auto 100%; }
.active .lovebj { -webkit-animation:lovebj 1.5s ease-out 1.7s backwards; animation:lovebj 1.5s ease-out 1.7s 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; padding:.8rem 1rem; font-size:.85rem; line-height:1.4em; }	
.talk04 { left:2.5%; top:3vh; width:46%;}
.talk01 { left:2.5%; top:15.5vh; width:46%;}
.talk05 { left:2.5%; top:28vh; width:46%; }
.talk02 { left:2.5%; top:46vh; width:46%;}
.talk07 { left:51.5%; top:5vh; width:46%; }
.talk03 { left:51.5%; top:20vh; width:46%;}
.talk06 { left:51.5%; top:35vh; width:46%;}

.talk01 b,.talk02 b,.talk03 b,.talk04 b,.talk05 b,.talk06 b,.talk07 b { width: 30px; height: 30px; position:absolute; left:-15px; top:-15px; }
.talk01:hover,.talk02:hover,.talk03:hover,.talk04:hover,.talk05:hover,.talk06:hover,.talk07:hover { -webkit-transform:translateY(0); }
	
	
.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(100%,100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk03
{
0%   {opacity:0; -webkit-transform:translate(100%,100%);  }
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(-100%,100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk02
{
0%   {opacity:0; -webkit-transform:translate(-100%,100%);  }
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(-100%,100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk04
{
0%   {opacity:0; -webkit-transform:translate(-100%,100%);  }
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(100%,-100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk05
{
0%   {opacity:0; -webkit-transform:translate(100%,-100%);  }
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(100%,100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk07
{
0%   {opacity:0; -webkit-transform:translate(100%,100%);  }
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(-100%,100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk01
{
0%   {opacity:0; -webkit-transform:translate(-100%,100%);  }
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(-100%,100%);  }
100% { opacity:1;}
}
@-webkit-keyframes talk06
{
0%   {opacity:0; -webkit-transform:translate(-100%,100%);  }
100% { opacity:1;}
}	
	

/*画面6 各方评论”*/
.wl05 { width: 100%; float: left; }
.ePic { width:100%; float: left; margin-top:5%; position: relative; margin-left:0px; }
.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; }
	
.newslist2 { width:100%; float: left; margin-top:5%; margin-left:0;  }
.newslist2 ul li { width: 100%; float: left; font-size:.9rem; line-height:1.6em; margin-bottom:.8rem;}
.newslist2 ul li i {  height: 2em;line-height:2em; font-size:.9rem;  padding:0 .5rem; margin-right:.5rem; }
	
.wr05 { width: 100%; float: left; margin-top:2%; margin-right:0; }
.people { width:100%; position: relative; height: 69vw;  }
.people h2 { width: 50%; font-size:1.5rem; line-height:2em; top:5vw;}
.people ul li { position: absolute; width:17vw; height:17vw; cursor: pointer;}
.people ul li img { width:100%; height:100%; border-radius:8px;}
.people ul li h3 { width:50vw; top:15vw; right:2vw; font-size:.9rem; line-height:1.5em;  padding:1rem 1.2rem;  -webkit-transform:translateY(15px);  display: none;  }
.people li h3::after { content:''; width: 0; height: 0; position: absolute; right:20px; box-shadow:0px 0px 5px rgba(0,0,0,.2); border:9px solid transparent; border-bottom: 13px solid #fff; border-top:none; top:-13px; }
.people ul li:hover h3 {  opacity:1; -webkit-transform:translateY(0px); display: block; }
	
.people ul li h4 { width:50vw; top:15vw; left:2vw; right:auto; font-size:.9rem; line-height:1.5em;  padding:1rem 1.2rem;  -webkit-transform:translateY(15px); display: none; }
.people li h4::after { content:''; width: 0; height: 0; position: absolute; left:20px; right:auto; box-shadow:0px 0px 5px rgba(0,0,0,.2); border:9px solid transparent; border-bottom: 13px solid #fff; border-top:none; top:-13px; }
.people ul li:hover h4 {  opacity:1; -webkit-transform:translateY(0px); display: block;}
	
.people ul li h5 { width:50vw; bottom:15vw; top:auto; right:2vw; font-size:.9rem; line-height:1.5em;  padding:1rem 1.2rem;  -webkit-transform:translateY(15px);  display: none;  }
.people li h5::after { content:''; width: 0; height: 0; position: absolute; right:20px; box-shadow:0px 0px 5px rgba(0,0,0,.2); border:9px solid transparent; border-top: 13px solid #fff; border-bottom:none; bottom:-13px; top:auto; }
.people ul li:hover h5 {  opacity:1; -webkit-transform:translateY(0px); display: block; }
	
.t01 { left: 38vw; top:0; }
.t02 { left: 57vw;; top:0; }
.t03 { left: 76vw; top:0; }

.t04 { left: 0vw; top:19vw; }
.t05 { left: 19vw; top:19vw; }
.t06 { left: 57vw; top:19vw; }
.t07 { left: 76vw; top:19vw; }
	
.t08 { left: 57vw; top:38vw; }
.t09 { left: 76vw; top:38vw; }

.bj06 { background:url(../images/bj06.png) center center no-repeat; }

}