.generic{ width:100%; min-width:930px; float:left; overflow:hidden; position:relative}
.generic .box{ width:1920px; overflow:hidden; float:left; position:absolute; left:50%; margin-left:-960px; font-family:HanHei SC; font-weight:200}
.generic .tit_box{ width:720px; float:left; position:absolute; color: #333; opacity:1; z-index:10}
.generic .t_1{ width:100%; float:left; font-size:30px; line-height:32px; color: rgba(51,51,51,0.8); padding-bottom: 5px}
.generic .t_2{ width:100%; float:left; font-size:48px; line-height:66px; padding-bottom: 31px}
.generic .t_3{ width:100%; float:left; font-size:18px; line-height:40px; color: rgba(51,51,51,0.8)}
.generic .img_box{ width:1920px; float:left; position:absolute; top:0; left:0}
.generic .img_box img{ width:1920px; float:left; position:absolute; top:0; left:0}

.main_1{ height:995px}
.main_1 .box{ height:995px}
.main_1 .tit_box{ height:300px; top:277px; left:340px; opacity:0}
.main_1 .t_2{ font-size:95px; line-height: 100px; padding-bottom:16px}
.main_1 .t_3{ font-size:24px}
.main_1 .t_4{ width:100%; float:left; line-height:48px; color: #6daeff; padding-top: 25px}
.main_1 .t_4 .fh{ float: left; font-size: 22px; line-height: 22px; padding-top: 10px}
.main_1 .t_4 .fs_48{ float: left; font-size: 48px; padding-right: 5px}
.main_1 .t_4 .y{ float: left; font-size: 26px; padding-top: 8px}
.main_1 .img_box{ height:995px}
.main_1 .img_box img{ transform:scale(1.12); -webkit-transform:scale(1.12)}

.main_1_2{ height:400px}
.main_1_2 .box{ height:400px}
.main_1_2 ul{ width:1000px; height:260px; float:left; margin:83px 0 0 460px}
.main_1_2 li{ width:332px; height:124px; float:left; border-right:1px solid #eee; border-bottom:1px solid #eee; line-height:28px; color:#333; text-align:center}
.main_1_2 .t_1{ width:100%; float:left; font-size:26px; padding-top:28px}
.main_1_2 .t_2{ width:100%; float:left; font-size:20px; opacity:0.8; line-height: 30px}
.main_1_2 .bor_no{ border-right:none}
.main_1_2 .bob_no{ border-bottom:none}
.main_1_2.mt__100{ margin-top: -400px}

.main_2{ height:1450px}
.main_2 .box{ height:1450px}
.main_2 .tit_box{ width: 740px; height:300px; top:113px; left:590px; text-align: center; opacity:0}
.main_2 ul{ width:1056px; height:800px; float:left; overflow:hidden; left:50%; margin:490px 0 0 -528px; position:relative; z-index: 10}
.main_2 li{ width:100px; height:185px; float:left; margin:0 38px; opacity:0}
.main_2 li .icon_box{ width:100px; height:100px; float:left; margin-bottom:10px; background:url(https://images.iyunmai.com/home/static/images/hero/light-mini2/img_3_bg.png) no-repeat}
.main_2 li .tit{ width:100px; color:#333; font-size:22px; line-height:28px; float:left; text-align:center}
.main_2 li .icon_1{ background-position:0 0}
.main_2 li .icon_2{ background-position:0 -100px}
.main_2 li .icon_3{ background-position:0 -200px}
.main_2 li .icon_4{ background-position:0 -300px}
.main_2 li .icon_5{ background-position:0 -400px}
.main_2 li .icon_6{ background-position:0 -500px}
.main_2 li .icon_7{ background-position:0 -600px}
.main_2 li .icon_8{ background-position:0 -700px}
.main_2 li .icon_9{ background-position:0 -800px}
.main_2 li .icon_10{ background-position:0 -900px}
.main_2 li .icon_11{ background-position:0 -1000px}
.main_2 li .icon_12{ background-position:0 -1100px}
.main_2 li .icon_13{ background-position:0 -1200px}
.main_2 li .icon_14{ background-position:0 -1300px}
.main_2 li .icon_15{ background-position:0 -1400px}
.main_2 li .icon_16{ background-position:0 -1500px}
.main_2 li .icon_17{ background-position:0 -1600px}
.main_2 li:nth-child(6){ margin-right:0}
.main_2 .img_box{ height:1724px}

.main_3{ height:902px}
.main_3 .box{ height:902px}
.main_3 .tit_box{ width:760px; top:176px; left:390px}
.main_3 .t_2{ color: #fff; opacity: 0}
.main_3 .t_3{ width: 510px; color: rgba(255,255,255,0.8); opacity: 0}
.main_3 .img_box{ height:902px}
.main_3 ul{ width:70%; float:left; position: relative; margin:44px 0 0 -30px}
.main_3 li{ width:29%; float:left; padding-top:102px; font-size:18px; text-align:center; color: rgba(255,255,255,0.8); line-height:30px; background:url(../images/hero/light-pro/3_1.png) no-repeat center 0; opacity:0}
.main_3 .ic_2{ background-position:center -200px}
.main_3 .ic_3{ background-position:center -400px}

.main_4{ height:1013px}
.main_4 .box{ height:1013px}
.main_4 .tit_box{ width:760px; top:270px; left:1070px}
.main_4 .t_2{ opacity: 0}
.main_4 .t_3{ width: 510px; opacity: 0}
.main_4 .img_box{ height:1013px}
.main_4 ul{ width:70%; float:left; position: relative; margin:35px 0 0 -30px}
.main_4 li{ width:29%; float:left; padding-top:110px; font-size:18px; text-align:center; line-height:30px; background:url(../images/hero/light-pro/4_1.png) no-repeat center 0; opacity:0}
.main_4 .ic_2{ background-position:center -200px}
.main_4 .ic_3{ background-position:center -400px}

.main_5{ height:1013px}
.main_5 .box{ height:1013px}
.main_5 .tit_box{ width:760px; top:270px; left:390px}
.main_5 .t_2{ opacity: 0}
.main_5 .t_3{ width: 510px; opacity: 0}
.main_5 .img_box{ height:1013px}
.main_5 ul{ width:70%; float:left; position: relative; margin:52px 0 0 -30px}
.main_5 li{ width:29%; float:left; padding-top:100px; font-size:18px; text-align:center; line-height:30px; background:url(../images/hero/light-pro/5_1.png) no-repeat center 0; opacity:0}
.main_5 .ic_2{ background-position:center -200px}
.main_5 .ic_3{ background-position:center -400px}

.main_6{ height:1129px}
.main_6 .box{ height:1129px}
.main_6 .tit_box{ width:760px; top:110px; left:580px; text-align: center; opacity: 0}
.main_6 .t_2{ color: #fff}
.main_6 .t_3{ color: rgba(255,255,255,0.8)}
.main_6 .img_box{ height:1129px}
.main_6 ul{ width:66%; float:left; position: relative; margin:52px 0 0 17%}
.main_6 li{ width:33.33%; float:left; padding-top:107px; font-size:18px; text-align:center; color: rgba(255,255,255,0.8); line-height:30px; background:url(../images/hero/light-pro/6_1.png) no-repeat center 0; opacity:0}
.main_6 .ic_2{ background-position:center -200px}
.main_6 .ic_3{ background-position:center -400px}

.main_7{ height:1129px}
.main_7 .box{ height:1129px}
.main_7 .tit_box{ width:760px; top:110px; left:580px; text-align: center; opacity: 0}
.main_7 .t_2{ color: #fff}
.main_7 .t_3{ color: rgba(255,255,255,0.8)}
.main_7 .img_box{ height:1129px}

.main_8{ height:868px}
.main_8 .box{ height:868px}
.main_8 .tit_box{ width:760px; top:169px; left:1070px}
.main_8 .t_2{ opacity: 0}
.main_8 .t_3{ width: 510px; opacity: 0}
.main_8 .img_box{ height:868px}
.main_8 ul{ width:70%; float:left; position: relative; margin:55px 0 0 -30px}
.main_8 li{ width:29%; float:left; padding-top:102px; font-size:18px; text-align:center; line-height:30px; background:url(../images/hero/light-pro/8_1.png) no-repeat center 0; opacity:0}
.main_8 .ic_2{ background-position:center -200px}
.main_8 .ic_3{ background-position:center -400px}

.main_9{ height:1135px}
.main_9 .box{ height:1135px}
.main_9 .tit_box{ width:920px; top:84px; left:500px; text-align: center; opacity: 0}
.main_9 .t_2{ font-size:85px; line-height: 100px; padding-bottom:0}
.main_9 .t_3{ font-size:24px}
.main_9 .img_box{ height:1135px}

.light_app{ height:1120px}
.light_app .box{ height:1120px; color:#fff}
.light_app .tit_box{ width:100%; height:360px; float:left; position:absolute; top:30px; left:0; text-align:center; z-index: 10}
.light_app .t_1{ width:100%; float:left; font-size:26px; line-height:36px; color:rgba(255,255,255,0.8); padding-bottom:22px}
.light_app .t_2{ width:100%; float:left; font-size:42px; line-height:54px; padding:0 0 23px; color:#fff; font-weight:bold}
.light_app .t_3{ width:100%; float:left; font-size:22px; line-height:30px; color:rgba(255,255,255,0.8); padding-bottom:15px}
.light_app .t_4{ width:100%; float:left}
.light_app .t_4 a{ font-size:20px; color:#0fb9a4; background:url(https://images.iyunmai.com/home/static/images/hero/light-color2/img_11_2.png) no-repeat right -696px; padding-right:15px}
.light_app .img_box{ width:1920px; height:1120px; float:left; position:absolute; top:0; left:0}
.light_app .t_5{ width:400px; float:left; line-height:30px; font-size:18px; text-align:right; position:absolute; top:568px; left:254px; opacity:0}
.light_app .t_6, .light_app .t_7{ width:400px; float:left; line-height:30px; font-size:18px; text-align:right; position:absolute; top:611px; left:254px; opacity:0}
.light_app .t_7{ top:641px}
.light_app .t_8{ width:400px; float:left; line-height:30px; font-size:18px; position:absolute; top:568px; left:1259px; opacity:0}
.light_app .t_9, .light_app .t_10, .light_app .t_11{ width:400px; float:left; line-height:30px; font-size:18px; position:absolute; top:611px; left:1259px; opacity:0}
.light_app .t_10{ top:641px}
.light_app .t_11{ top:671px}

@keyframes app_1{ 0%{ opacity:0; transform:translate(40px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate(0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0deg)}}
@keyframes app_2{ 0%{ opacity:0; transform:translate(-40px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate(0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0deg)}}
@-webkit-keyframes app_1{ 0%{ opacity:0; -webkit-transform:translate(40px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0deg)}}
@-webkit-keyframes app_2{ 0%{ opacity:0; -webkit-transform:translate(-40px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0deg)}}


@keyframes img_2_1{ 0%{ opacity:0; transform:translate(0,200px) rotate(0.0001deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_1{ 0%{ opacity:0; -webkit-transform:translate(0,200px) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.0001deg)}}

@keyframes opac_1{ 0%{ opacity:0} 100%{ opacity:1}}
@-webkit-keyframes opac_1{ 0%{ opacity:0} 100%{ opacity:1}}

@keyframes opac_0{ 0%{ opacity:1} 100%{ opacity:0}}
@-webkit-keyframes opac_0{ 0%{ opacity:1} 100%{ opacity:0}}

@keyframes scale_1{ 0%{ transform:translate3d(0,0,0) scale(1.12) rotate(0.0001deg)} 99.99%{ transform:translate3d(0,0,0) scale(1) rotate(0.0001deg)} 100%{ transform:translate3d(0,0,0) scale(1) rotate(0)}}
@-webkit-keyframes scale_1{ 0%{ -webkit-transform:translate3d(0,0,0) scale(1.12) rotate(0.0001deg)} 99.99%{ -webkit-transform:translate3d(0,0,0) scale(1) rotate(0.0001deg)} 100%{ -webkit-transform:translate3d(0,0,0) scale(1) rotate(0)}}

@keyframes x_15{ 0%{ opacity:0; transform:translate3d(15px,0,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes x_15{ 0%{ opacity:0; -webkit-transform:translate3d(15px,0,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}

@keyframes y_30{ 0%{ opacity:0; transform:translate3d(0,60px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes y_30{ 0%{ opacity:0; -webkit-transform:translate3d(0,60px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}