@charset "utf-8";
/* 8.0版本 */

.tw{display:block;width:1200px;margin:0 auto;overflow:hidden;}
.tw .picture img{display:block;margin:0 auto;}
/*左字有图*/
.s1 .character,.s3 .character,.s5 .character,.s7 .character,.s9 .character,.s11 .character,.s13 .character,.s15 .character,.s17 .character,.s19 .character{float:left;width:50%;}
.s9 .character,.s11 .character{width:40%;}
.s1 .character h1,.s3 .character h1,.s7 .character h1,.s9 .character h1,.s11 .character h1,.s13 .character h1,.s15 .character h1,.s17 .character h1,.s19 .character h1{font-size:34px;color:#fff;font-weight:bold;}
.s1 .character h1 b{font-size:32px;color:#fa6c68;font-weight:bold;}
.s11 .character h1 b{font-size:34px;color:#3497ff;font-weight:bold;}
.s1 .character p,.s3 .character p,.s5 .character p,.s7 .character p,.s9 .character p,.s11 .character p,.s13 .character p,.s15 .character p,.s17 .character p,.s19 .character p{font-size:24px;color:#fff;line-height:40px;}
.s7 .character p,s7 .character h1{margin-top:20px;}
.s1 .pictur,.s3 .picture,.s5 .picture,.s7 .picture,.s9 .picture,.s11 .picture,.s13 .picture,.s15 .picture,.s17 .picture,.s19 .picture{float:right;width:48%;}
.s9 .picture,.s11 .picture{width:640px;}
.s1 .picture{margin-top:240px;}
.s7 span{background:url(../../resource/images/single/below/belowicon.png) no-repeat center}
.s7 span,.s12 span,.s17 span{width:300px;height:90px;text-align:center;line-height:84px;font-size:40px;color:#26cad0;margin:0 auto;margin-top:140px;display:block; letter-spacing:12px;font-weight:bold;}
.s12 span{background:url(../../resource/images/single/below/belowicon2.png) no-repeat center;margin-top:130px;color:#50c0d8;}
.s7 span,.s12 span,.s17 span{opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px)}
.s7.active span,.s12.active span,.s17.active span{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s17 span{background:url(../../resource/images/single/below/belowicon3.png) no-repeat center;margin-top:120px;color:#34c87e;}
.s3 .picture{margin-top:290px;}
.s7 .picture{margin-top:20px;}
.s7 .character{margin-top:240px;}
.s5 .picture{margin-top:240px;}
.s3 .character h1{color:#e39f40;margin-bottom:20px;}
.s3 .character h1 b{font-size:34px;color:#e39f40;font-weight:bold;}
.s3 .character .h1{color:#fff;margin-top:20px;}
.s1 .character{margin-top:280px;}
.s3 .character{margin-top:320px;}
.s5 .character{margin-top:420px;}
.s5 .character p{margin-top:20px;}
.s5 .character p b{font-size:24px;color:#f3da30;}
.s3 .character b{font-size:24px;color:#e39f40;font-weight:normal;}
.s1 .character h1{margin-top:20px;margin-bottom:20px;}
.s7 .picture img{width:460px;}
.s9 .character{margin-top:380px;}
.s9 .character h1,.s11 .character h1,.s13 .character h1,.s15 .character h1,.s17 .character h1,.s19 .character h1{margin-bottom:20px;}
.s9 .picture{margin-top:180px;}
.s11 .character{margin-top:420px;}
.s11 .picture{margin-top:280px;}
.s13 .character{margin-top:400px;}
.s13 .picture{margin-top:220px;}
.s15 .character{margin-top:420px;}
.s15 .picture{margin-top:360px;}
.s17 .character{margin-top:280px;}
.s17 .picture{margin-top:120px;}
.s19 .character{margin-top:460px;}
.s19 .picture{margin-top:300px;}

.s1 .character:nth-child(1),.s3 .character:nth-child(1),.s5 .character:nth-child(1),.s7 .character:nth-child(1),.s9 .character:nth-child(1),.s11 .character:nth-child(1),.s13 .character:nth-child(1),.s15 .character:nth-child(1),.s17 .character:nth-child(1),.s19 .character:nth-child(1){-webkit-transform:translate(0px,-1000px); transform:translate(0px,-1000px); opacity:0;}
.s1.active .character:nth-child(1),.s3.active .character:nth-child(1),.s5.active .character:nth-child(1),.s7.active .character:nth-child(1),.s9.active .character:nth-child(1),.s11.active .character:nth-child(1),.s13.active .character:nth-child(1),.s15.active .character:nth-child(1),.s17.active .character:nth-child(1),.s19.active .character:nth-child(1){ -webkit-animation:move1 2s 0.8s forwards; animation:move1 2s 0.8s forwards; opacity:1;}
.s1 .picture:nth-child(2),.s3 .picture:nth-child(2),.s5 .picture:nth-child(2),.s7 .picture:nth-child(2),.s9 .picture:nth-child(2),.s11 .picture:nth-child(2),.s13 .picture:nth-child(2),.s15 .picture:nth-child(2),.s17 .picture:nth-child(2),.s19 .picture:nth-child(2){-webkit-transform:translate(330px,-1000px); transform:translate(330px,-1000px); opacity:0;}
.s1.active .picture:nth-child(2),.s3.active .picture:nth-child(2),.s19.active .picture:nth-child(2),.s5.active .picture:nth-child(2),.s7.active .picture:nth-child(2),.s17.active .picture:nth-child(2),.s9.active .picture:nth-child(2),.s11.active .picture:nth-child(2),.s13.active .picture:nth-child(2),.s15.active .picture:nth-child(2),.s17.active .character:nth-child(2),.s19.active .character:nth-child(2){ -webkit-animation:move2 2s 0.8s forwards; animation:move2 2s 0.8s forwards; opacity:1;}
@-webkit-keyframes move1{
	0%{ -webkit-transform:translate(0px,-1000px); transform:translate(0px,-1000px);}
	20%{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px)}
	40%{ -webkit-transform:translate(0px,-30px);transform:translate(0px,-30px)}
	60%{ -webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
	100%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
}
@keyframes move1{
	0%{ transform:translate(0px,-1000px)}
	20%{ transform:translate(0px,0px)}
	40%{ transform:translate(0px,-30px)}
	60%{ transform:translate(0px,0px)}
	100%{ transform:translate(0px,0px)}
}


/*左图有字*/
.s2 .picture,.s4 .picture,.s8 .picture,.s10 .picture,.s14 .picture,.s16 .picture,.s18 .picture,.s20 .picture{float:left;width:48%;}
.s2 .character,.s4 .character,.s8 .character,.s10 .character,.s14 .character,.s16 .character,.s18 .character,.s20 .character{float:right;width:50%;}
.s2 .character h1,.s4 .character h1,.s8 .character h1,.s10 .character h1,.s14 .character h1,.s16 .character h1,.s18 .character h1,.s20 .character h1{font-size:36px;color:#fff;font-weight:bold;}
.s2 .character h1 b{font-size:32px;color:#fa6c68;font-weight:bold;}
.s10 .character h1 b{font-size:34px;color:#ff3633;font-weight:bold;}
.s2 .character p,.s4 .character p,.s8 .character p,.s10 .character p,.s14 .character p,.s16 .character p,.s18 .character p{font-size:24px;color:#fff;line-height:40px;}
.s2 .character p{margin-top:20px;}
.s2 .character p b{font-size:24px;font-weight:bold;color:#fff;}
.s2 .picture{margin-top:230px;}
.s4 .picture{margin-top:180px}
.s8 .picture{margin-top:260px}
.s2 .character{margin-top:340px;}
.s4 .character{margin-top:420px;}
.s8 .character{width:40%;}
.s4 .character h1,.s4 .character p{text-align:center;margin-top:20px;}
.s8 .character{margin-top:400px;}
.s8 .character h1,.s10 .character h1,.s14 .character h1,.s16 .character h1,.s18 .character h1{margin-bottom:20px;}
.s20 .character h1{text-align:center;margin-top:10px;}
.s10 .character{margin-top:440px;width:42%;}
.s10 .picture{margin-top:280px;}
.s14 .character{margin-top:400px;}
.s14 .picture{margin-top:260px;}
.s16 .character{margin-top:400px;}
.s16 .picture{margin-top:260px;}
.s18 .character{margin-top:400px;}
.s18 .picture{margin-top:300px;}
.s20 .character{margin-top:400px;}
.s20 .picture{margin-top:200px;}

.s2 .picture,.s4 .picture,.s8 .picture,.s10 .picture,.s14 .picture,.s16 .picture,.s18 .picture,.s17 .picture,.s20 .picture,.s2 .character,.s4 .character,.s8 .character,.s10 .character,.s14 .character,.s16 .character,.s18 .character,.s20 .character,.s7 .character,.s7 .picture,.s17 .character{-webkit-transform:translate(0px,-1000px); transform:translate(0px,-1000px);opacity:0;}
.s2.active .picture,.s4.active .picture,.s8.active .picture,.s10.active .picture,.s17.active .picture,.s14.active .picture,.s16.active .picture,.s18.active .picture,.s20.active .picture,.s2.active .character,.s4.active .character,.s8.active .character,.s10.active .character,.s14.active .character,.s16.active .character,.s18.active .character,.s20.active .character,.s7.active .character,.s7.active .picture,.s17.active .character{-webkit-animation:move1 2s 0.8s forwards; animation:move1 2s 0.8s forwards;opacity:1;}
.s6 .character{margin-top:130px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px)}
.s6.active .character{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s6 .character h1{font-size:36px;color:#fff;font-weight:bold;text-align:center;}
.s6 .picture{margin-top:10px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(1000px);-webkit-transform:translateY(1000px)}
.s6.active .picture{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s12 .character{margin-top:0px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px)}
.s12.active .character{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s12 .picture{opacity:0;transition-delay:1s;transition:1s;transform:translateY(1000px);-webkit-transform:translateY(1000px)}
.s12.active .picture{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s12 .character h1{text-align:center;color:#fff;font-weight:bold;font-size:36px;margin-top:10px}
.s12 .character p{font-size:24px;color:#fff;line-height:40px;}
@-webkit-keyframes move2{
	0%{ -webkit-transform:translate(0px,-1000px);transform:translate(0px,-1000px)}
	20%{ -webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
	40%{ -webkit-transform:translate(110px,-50px);transform:translate(0px,-50px)}
	60%{ -webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
	100%{ -webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
}
@keyframes move2{
	0%{ transform:translate(0px,-1000px)}
	20%{ transform:translate(0px,0px)}
	40%{ transform:translate(0px,-50px)}
	60%{ transform:translate(0px,0px)}
	100%{ transform:translate(0px,0px)}
}
/* 最后一页 */
.s21 .twenty-one h1{display:block;font-size:80px;color:#fff;font-weight:bold;text-align:center;margin-top:350px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px);}
.s21.active .twenty-one h1{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.section .twenty-one h1{font-size:100px;color:#fff;text-align:center;margin-top:350px;opacity:0;transition-delay:1s;transition:1.2s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px);}
.s21.active h1{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s21 .twenty-one p{display:block;text-align:center;font-size:40px;color:#fff;margin-top:40px;
	opacity:0;transition-delay:1s;transition:1.2s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px);}
.s21.active .twenty-one p{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
.s21 .twenty-one p{font-size:60px;color:#fff;font-weight:bold;text-align:center}

/*加入微三云*/
.seventeenth h1{font-size:100px;font-family: "Microsoft YaHei";color: rgb(189, 125, 2);font-weight:bold;text-shadow: 2.5px 4.33px 0px rgba(0, 0, 0, 0.09);text-align:center;position:relative;top:50%;margin-top:-180px;}
.jiameng{display:block;overflow:hidden;position:relative;left:50%;top:0;margin-left:-384px;margin-top:110px;}
.jiameng a.w-scene-btn{display:block;float:left;width:320px;height:70px;line-height:70px;text-align:center;font-size:36px;border-radius:5px;margin:0 30px;color:#fff;}
.jiameng a.btn1:hover{border:2px solid #20e3a3;background:#20e3a3;}
.jiameng a.btn2:hover{border:2px solid #20e3a3;background:#20e3a3;}
.jiameng .btn1{background:#79f2ca;border:2px solid #79f2ca;opacity:0;transition-delay:1s;transition:1.5s;transform:translateX(190px);-webkit-transform:translateX(190px);}
.s21.active .jiameng .btn1{opacity:1;transform:translateX(0px);-webkit-transform:translateX(0px);}
.jiameng .btn2{background:#79f2ca;border:2px solid #79f2ca;opacity:0;transition-delay:1s;transition:1.5s;transform:translateX(-190px);-webkit-transform:translateX(-190px);}
.s21.active .jiameng .btn2{opacity:1;transform:translateX(0px);-webkit-transform:translateX(0px);}

.scrolldown{display:block;width:32px;height:35px;background:url(../../resource/images/icon1226/jiantou.png) no-repeat;position:fixed;left:50%;bottom:10px;margin-left:-16px;cursor:pointer;animation:mymove 0.8s infinite;-webkit-animation:mymove 0.8s infinite;}

@keyframes mymove{
from {opacity:0;bottom:20px}
to {opacity:1;bottom:10px;}
}

@-webkit-keyframes mymove {
from {opacity:0;bottom:20px}
to {opacity:1;bottom:10px;}
}

@media screen and (max-width:1440px){
	.tw{width:1100px;}
	.s1 .character h1{margin-top:10px;margin-bottom:0;}
	.tw .picture img{width:420px;}
	.s1 .picture{margin-top:220px;}
	.s12 .character h1,.s1 .character h1, .s3 .character h1, .s7 .character h1, .s9 .character h1, .s11 .character h1,.s13 .character h1, .s15 .character h1, .s17 .character h1, .s19 .character h1,.s1 .character h1 b,.s2 .character h1 b,.s2 .character h1, .s4 .character h1, .s8 .character h1, .s10 .character h1, .s14 .character h1, .s16 .character h1,.s18 .character h1, .s20 .character h1,.s3 .character h1 b,.s6 .character h1,.s10 .character h1 b,.s11 .character h1 b{font-size:28px;}
	.s3 .character b,.s12 .character p,.s1 .character p, .s3 .character p, .s5 .character p, .s7 .character p, .s9 .character p, .s11 .character p, .s13 .character p, .s15 .character p, .s17 .character p, .s19 .character p,.s2 .character p, .s4 .character p, .s8 .character p, .s10 .character p, .s14 .character p, .s16 .character p, .s18 .character p,.s2 .character p b,.s5 .character p b{font-size:20px;line-height:26px;}
	.s4 .character{margin-top:320px;}
	.s5 .picture img,.s7 .picture img{width:360px;}
	.s5 .picture{margin-top:240px;}
	.s7 span, .s12 span, .s17 span{background-size:76%;margin-top:140px;font-size:34px;}
	.s9 .character,.s14 .character{margin-top:360px;}
	.s9 .picture,.s14 .picture{margin-top:280px;}
	.s10 .character,.s11 .character,.s15 .character{margin-top:380px;}
	.s11 .picture,.s15 .picture{margin-top:300px;}
	.s12 .character p{margin-top:40px;}
	.s12 .picture{margin-top:40px;}
	.s16 .picture{margin-top:240px;}
	.s2 .character, .s4 .character, .s8 .character, .s10 .character, .s14 .character, .s16 .character, .s18 .character, .s20 .character,.s1 .character, .s3 .character, .s5 .character, .s7 .character, .s9 .character, .s11 .character, .s13 .character, .s15 .character, .s17 .character, .s19 .character{width:480px;}
	.section .twenty-one h1{font-size:60px;margin-top:240px;}
	.jiameng{margin-left:-320px;}
	.section .seventeen h1{font-size:70px;}
	.s9 .picture, .s11 .picture{width:400px;}
	.s9 .picture{margin-top:200px;}
	.s9 .picture img{width:360px;}
	.jiameng a.w-scene-btn{width:260px;}
	.jiameng{margin-top:100px;}
	.s19 .character{margin-top:360px;}
	.s5 .character{margin-top:340px;}
	.s19 .picture{margin-top:260px;}
}

@media screen and (max-width:1366px){
	.tw{width:960px;}
	.s12 .character h1,.s1 .character h1, .s3 .character h1, .s7 .character h1, .s9 .character h1, .s11 .character h1,.s13 .character h1, .s15 .character h1, .s17 .character h1, .s19 .character h1,.s1 .character h1 b,.s2 .character h1 b,.s2 .character h1, .s4 .character h1, .s8 .character h1, .s10 .character h1, .s14 .character h1, .s16 .character h1,.s18 .character h1, .s20 .character h1,.s3 .character h1 b,.s6 .character h1,.s10 .character h1 b,.s11 .character h1 b{font-size:24px;}
	.s3 .character b,.s12 .character p,.s1 .character p, .s3 .character p, .s5 .character p, .s7 .character p, .s9 .character p, .s11 .character p, .s13 .character p, .s15 .character p, .s17 .character p, .s19 .character p,.s2 .character p, .s4 .character p, .s8 .character p, .s10 .character p, .s14 .character p, .s16 .character p, .s18 .character p,.s2 .character p b,.s5 .character p b{font-size:16px;line-height:26px;}
	.tw .picture img{width:70%;}
	.s3 .picture,.s5 .character,.s10 .picture{margin-top:280px;}
	.s1 .picture img{width:320px;}
	.s5 .picture img{width:300px;}
	.s1 .character,.s18 .picture,.s19 .picture,.s14 .picture{margin-top:240px;}
	.s7 .picture img{width:270px;}
	.s7 .picture{margin-top:20px;}
	.s8 .character,.s19 .character{margin-top:320px;}
	.s9 .picture, .s11 .picture{width:450px;}
	.s12 .picture{margin-top:10px;}
	.s12 .picture img{width:360px;}
	.s2 .picture img{width:60%;}
	.s12 .character p{margin-top:0;}
	.s11 .character{margin-top:340px;}
	.s13 .character,.s16 .character,.s18 .character{margin-top:320px;}
	.s2 .character,.s15 .character,.s10 .character,.s14 .character{margin-top:300px;}
	.s3 .character,.s15 .picture,.s11 .picture{margin-top:260px;}
	.s6 .picture{width:560px;margin:0 auto;}
	.s9 .picture{margin-top:160px;}
	.jiameng{margin-top:90px;}
	.s7 .character{margin-top:120px;}
	.section .seventeen h1{font-size:60px;}
	.section .first .character p,.section .first .character p b{font-size:18px;}
	.jiameng a.w-scene-btn{width:260px;}
	.section .twenty-one h1{margin-top:200px;}
}