.generic{ width:100%; min-width:260px; float:left; position:relative; overflow:hidden}
.generic .box{ width:860px; position:relative; left:50%; margin:0 0 0 -430px}
.generic .tit_box{ width:100%; float:left; color: #323232; position:relative; margin-top:150px; opacity:0; z-index:10}
.generic .t_1{ width:100%; float:left; position:relative; overflow:hidden; font-size:50px; line-height:72px; color: #fff; padding-bottom:24px}
.generic .t_2{ width:100%; float:left; position:relative; overflow:hidden; font-size:30px; line-height:50px; color:rgba(255,255,255,0.8)}
.generic .img_box{ width:860px; float:left; position:absolute; top:0; left:0}
.generic .img_box img{ max-width:100%}

.main_1{ text-align: center}
.main_1 .tit_box{ position:absolute; margin-top:201px; z-index:10}
.main_1 .t_1{ color:#323848; padding-bottom:17px}
.main_1 .t_2{ color:#3d4456}
.main_1 img{ max-width: 100%; transform:scale(1.12); -webkit-transform:scale(1.12)}
.main_1 .downBtn{ width: 100%; float: left; position: absolute; bottom: 26px; padding-top: 32px; background: url("../images/hero/light3-mini/1_1.png") no-repeat center 0; font-size: 18px; line-height: 36px; text-align: center; z-index: 1}

.main_1_2{ width:calc(100% - 120px); height: 242px; float:left; font-size: 26px; color: #fff; line-height: 36px; background-color: #3F434D; padding: 0 60px; position: relative; z-index: 10}
.main_1_2 .t_1{ float: left; padding-top: 83px}
.main_1_2 .t_2{ float: right; text-align: right; padding-top: 83px}

.main_2{ height:1522px}
.main_2 .tit_box{ text-align: center}
.main_2 .img_box{ height:1522px}

.main_3{ width: calc(100% - 72px); padding: 64px 36px; background-color: #E6E9EB; text-align: center}
.main_3 .tit_box{ width: calc(100% - 192px); position:absolute; margin-left:60px}
.main_3 .t_1{ color:#26272b}
.main_3 .t_2{ color:#26272b}
.main_3 img{ max-width: 100%}

.main_4{ height:1616px}
.main_4 .tit_box{ text-align: center}
.main_4 .img_box{ height:1616px}

.main_5{ width: calc(100% - 72px); padding: 64px 36px; background-color: #F0F0F0; text-align: center}
.main_5 .tit_box{ width: calc(100% - 192px); position:absolute; margin-left:60px}
.main_5 .t_1{ color:#26272b}
.main_5 .t_2{ color:#26272b}
.main_5 img{ max-width: 100%}

.main_6{ text-align: center}
.main_6 .tit_box{ position:absolute; margin-top:126px}
.main_6 img{ max-width: 100%}

.main_7{ text-align: center}
.main_7 .tit_box{ position:absolute; margin-top:126px}
.main_7 img{ max-width: 100%}

.main_8{ text-align: center}
.main_8 img{ max-width: 100%}

.main_9{ height:1566px}
.main_9 .tit_box{ text-align: center; margin-top: 85px}
.main_9 .t_1{ color:#2a2d35}
.main_9 .img_box{ height:1566px}

.main_10{ text-align: center}
.main_10 img{ max-width: 100%}

.main_11{ height:0}
.main_11 .tit_box{ position: absolute; text-align: center; margin-top: 98px; opacity:1}
.main_11 .tit_box_2{ margin-top: 1585px}
.main_11 .tit_box_2 .t_1{ line-height: 60px; padding-bottom:22px}
.main_11 .img_box{ position: relative; height:2810px}
.main_11 .downBtn{ width: 100%; float: left; position: absolute; bottom: 0; padding: 32px 0; background: url("../images/hero/light3-mini/1_1.png") no-repeat center -100px; z-index: 1}


@media only screen and (max-width : 600px){
	.generic .box{ width:430px; margin:0 0 0 -215px}
	.generic .tit_box{ margin-top:75px}
	.generic .t_1{ font-size:25px; line-height:36px; padding-bottom:12px}
	.generic .t_2{ font-size:15px; line-height:25px}
	.generic .img_box{ width:430px}

	.main_1 .tit_box{ margin-top:93px}
	.main_1 .t_1{ padding-bottom:8px}
	.main_1 .downBtn{ bottom: 13px; padding-top: 16px; background-size: 50px 100px; font-size: 9px; line-height: 18px}

	.main_1_2{ width:calc(100% - 60px); height: 121px; font-size: 12px; line-height: 18px; padding: 0 30px}
	.main_1_2 .t_1{ padding-top: 41px}
	.main_1_2 .t_2{ padding-top: 41px}

	.main_2{ height:761px}
	.main_2 .img_box{ height:761px}

	.main_3{ width: calc(100% - 36px); padding: 32px 18px}
	.main_3 .tit_box{ width: calc(100% - 96px); margin-left:30px}

	.main_4{ height:808px}
	.main_4 .img_box{ height:808px}

	.main_5{ width: calc(100% - 36px); padding: 32px 18px}
	.main_5 .tit_box{ width: calc(100% - 96px); margin-left:30px}

	.main_6 .tit_box{ margin-top:63px}

	.main_7 .tit_box{ margin-top:63px}

	.main_9{ height:783px}
	.main_9 .tit_box{ margin-top: 42px}
	.main_9 .img_box{ height:783px}
	
	.main_11{ height:0}
	.main_11 .tit_box{ margin-top: 49px}
	.main_11 .tit_box img{ width: 292px; height: 86px}
	.main_11 .tit_box_2{ margin-top: 792px}
	.main_11 .tit_box_2 .t_1{ line-height: 30px; padding-bottom:11px}
	.main_11 .img_box{ height:1405px}
	.main_11 .downBtn{ padding: 16px 0; background-size: 50px 100px; background-position: center -50px}
}

@media only screen and (max-width : 375px){
	.main_1 .tit_box{ margin-top:82px}
}

@media only screen and (max-width : 360px){
	.main_1 .tit_box{ margin-top:76px}
}

@media only screen and (max-width : 320px){
	.main_1 .tit_box{ margin-top:62px}
	.main_3 .tit_box{ width: calc(100% - 76px); margin-left:20px}
	.main_5 .tit_box{ width: calc(100% - 56px); margin-left:10px}
	.main_7 .tit_box{ margin-top:40px}
}