.generic{ width:100%; min-width:320px; float:left; position:relative; overflow:hidden}
.generic .tit_box{ width:calc(100% - 30px); float:left; padding-left:15px; margin-top:64px}
.generic .t_1{ width:100%; float:left; color:#000; font-size:30px; line-height:34px}
.generic .t_2{ width:100%; float:left; color:#323232; font-size:18px; line-height:24px; margin-top:20px}
.generic .img_box{ width:100%; margin-top:60px; float:left; overflow:hidden}

.light_1{ background-color:#fafafa}
.light_1 .img_box img{ width:828px; height:488px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(100px,100px,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(100px,100px,0)}

.light_2 .img_box{ padding-bottom:40px}
.light_2 ul{ width:720px; position:relative; left:50%; margin-left:-360px}
.light_2 li{ width:240px; height:90px; float:left; padding-top:100px; font-size:28px; color:#323232; line-height:60px; text-align:center; opacity:0; background:url(../images/hero/light/hero_haoqing_new_2.png) no-repeat}
.light_2 .icon_1{ background-position:center 0}
.light_2 .icon_2{ background-position:center -200px}
.light_2 .icon_3{ background-position:center -400px}
.light_2 .icon_4{ background-position:center -600px}
.light_2 .icon_5{ background-position:center -800px}
.light_2 .icon_6{ background-position:center -1000px}
.light_2 .icon_7{ background-position:center -1200px}
.light_2 .icon_8{ background-position:center -1400px}
.light_2 .icon_9{ background-position:center -1600px}
.light_2 .icon_10{ background-position:center -1800px; margin-left:240px}
.light_2 .icon_11{ background-position:center -2000px}
.light_2 .icon_12{ background-position:center -2200px}
.light_2 .icon_13{ background-position:center -2400px}
.light_2 .icon_14{ background-position:center -2600px}

@keyframes img_2_1{ 0%{ opacity:0; transform:translate3d(0,300px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_2{ 0%{ opacity:0; transform:translate3d(0,400px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_3{ 0%{ opacity:0; transform:translate3d(0,500px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_4{ 0%{ opacity:0; transform:translate3d(0,600px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_5{ 0%{ opacity:0; transform:translate3d(0,700px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_6{ 0%{ opacity:0; transform:translate3d(0,800px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_7{ 0%{ opacity:0; transform:translate3d(0,900px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_8{ 0%{ opacity:0; transform:translate3d(0,1000px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_9{ 0%{ opacity:0; transform:translate3d(0,1100px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_10{ 0%{ opacity:0; transform:translate3d(0,1200px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_11{ 0%{ opacity:0; transform:translate3d(0,1300px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_12{ 0%{ opacity:0; transform:translate3d(0,1400px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_13{ 0%{ opacity:0; transform:translate3d(0,1500px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_14{ 0%{ opacity:0; transform:translate3d(0,1600px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}

@-webkit-keyframes img_2_1{ 0%{ opacity:0; -webkit-transform:translate3d(0,300px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_2{ 0%{ opacity:0; -webkit-transform:translate3d(0,400px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_3{ 0%{ opacity:0; -webkit-transform:translate3d(0,500px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_4{ 0%{ opacity:0; -webkit-transform:translate3d(0,600px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_5{ 0%{ opacity:0; -webkit-transform:translate3d(0,700px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_6{ 0%{ opacity:0; -webkit-transform:translate3d(0,800px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_7{ 0%{ opacity:0; -webkit-transform:translate3d(0,900px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_8{ 0%{ opacity:0; -webkit-transform:translate3d(0,1000px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_9{ 0%{ opacity:0; -webkit-transform:translate3d(0,1100px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_10{ 0%{ opacity:0; -webkit-transform:translate3d(0,1200px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_11{ 0%{ opacity:0; -webkit-transform:translate3d(0,1300px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_12{ 0%{ opacity:0; -webkit-transform:translate3d(0,1400px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_13{ 0%{ opacity:0; -webkit-transform:translate3d(0,1500px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_14{ 0%{ opacity:0; -webkit-transform:translate3d(0,1600px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}

.light_3{ height:708px; background:#000 url(../images/hero/light/hero_haoqing_new_b_3.jpg) no-repeat center; background-size:860px 708px}
.light_3 .t_1{ width:100%; font-size:40px; line-height:44px; position:absolute; top:100px; color:#fff; text-align:center; z-index:100}
.light_3 .box{ width:0; height:708px; overflow:hidden; position:relative; float:left; z-index:999}
.light_3 .box .t_1{ color:#000}
.light_3 .img_box{ width:860px; height:708px; margin-top:0; background:#fff}
.light_3 .img_box img{ width:860px; height:708px; float:left; position:relative; left:50%; margin-left:-430px}

.light_4 .img_box img{ width:686px; height:764px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(0,100px,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(0,100px,0)}

.light_5 .img_box{ margin:60px 0}
.light_5 .img_box img{ width:828px; height:262px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(100px,0,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(100px,0,0)}

.light_7 .img_box{ margin-top:80px; text-align:center}
.light_7 .img_box img{ width:1100px; height:400px; opacity:0; transition:transform 0.6s ease-out,opacity 0.6s ease-out; transform:translate3d(0,100px,0); -webkit-transition:-webkit-transform 0.6s ease-out,-webkit-opacity 0.6s ease-out; -webkit-transform:translate3d(0,100px,0)}

.light_8 .img_box{ margin-top:0}
.light_8 .img_box img{ width:828px; height:668px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(0,100px,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(0,100px,0)}

.light_9{ background-color:#0B98E9}
.light_9 .t_1{ color:#fff}
.light_9 .t_2{ color:#fff}
.light_9 .img_box{ text-align:center}
.light_9 .img_box img{ width:828px; height:704px; float:left; position:relative; left:50%; margin-left:-414px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(0,100px,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(0,100px,0)}

@media only screen and (max-width : 600px){

	.generic .tit_box{ margin-top:32px}
	.generic .t_1{ font-size:26px; line-height:36px}
	.generic .t_2{ font-size:16px; line-height:26px; margin-top:10px}
	.generic .img_box{ margin-top:30px}

	.light_1 .img_box img{ width:414px; height:244px}
	
	.light_2 .img_box{ padding-bottom:20px}
	.light_2 ul{ width:360px; margin-left:-180px}
	.light_2 li{ width:120px; height:45px; padding-top:50px; font-size:14px; line-height:30px; background-size:50px 1350px}
	.light_2 .icon_2{ background-position:center -100px}
	.light_2 .icon_3{ background-position:center -200px}
	.light_2 .icon_4{ background-position:center -300px}
	.light_2 .icon_5{ background-position:center -400px}
	.light_2 .icon_6{ background-position:center -500px}
	.light_2 .icon_7{ background-position:center -600px}
	.light_2 .icon_8{ background-position:center -700px}
	.light_2 .icon_9{ background-position:center -800px}
	.light_2 .icon_10{ background-position:center -900px; margin-left:120px}
	.light_2 .icon_11{ background-position:center -1000px}
	.light_2 .icon_12{ background-position:center -1100px}
	.light_2 .icon_13{ background-position:center -1200px}
	.light_2 .icon_14{ background-position:center -1300px}

	.light_3{ height:354px; background-size:430px 354px}
	.light_3 .t_1{ font-size:20px; line-height:22px; top:50px}
	.light_3 .box{ height:354px}
	.light_3 .img_box{ width:430px; height:354px; margin-top:0}
	.light_3 .img_box img{ width:430px; height:354px; margin-left:-215px}
	
	.light_4 .img_box img{ width:343px; height:382px}
	
	.light_5 .img_box{ margin:30px 0}
	.light_5 .img_box img{ width:414px; height:131px}
	
	.light_7 .img_box{ margin-top:40px}
	.light_7 .img_box img{ width:550px; height:200px}
	
	.light_8 .img_box{ margin-top:0}
	.light_8 .img_box img{ width:414px; height:334px}
	
	.light_9 .img_box img{ width:414px; height:352px; margin-left:-207px}
}