
.design_1{ width:100%; float:left; position:relative; overflow:hidden; padding-top:100px}
.design_1 .titBox{ width:100%; float:left; overflow:hidden; position:relative; padding-bottom:110px}
.design_1 .t_1{ font-size:50px; line-height:66px; padding-bottom:30px}
.design_1 .t_2{ font-size:32px; line-height:50px; color:#666}
.design_1 .box{ width:860px; height:682px; position:relative; overflow:hidden; left:50%; margin:0 0 0 -430px}
.design_1 .img{ width:350px; height:682px; float:left; margin-left:255px; transition:transform 1s ease-out,opacity 1s ease-out; transform:translate3d(0,80px,0) rotate(0.001deg); -webkit-transition:-webkit-transform 1s ease-out,opacity 1s ease-out; -webkit-transform:translate3d(0,80px,0) rotate(0.001deg)}

.design_2{ width:100%; float:left; position:relative; overflow:hidden; padding-top:110px; background-color:#F7F7F7}
.design_2 .titBox{ width:100%; float:left; overflow:hidden; position:relative; padding-bottom:100px}
.design_2 .t_1{ font-size:50px; line-height:66px; padding-bottom:30px}
.design_2 .t_2{ font-size:32px; line-height:50px; color:#666}
.design_2 .box{ width:860px; height:320px; position:relative; overflow:hidden; left:50%; margin:0 0 0 -430px}
.design_2 .img_1{ width:524px; height:239px; float:left; position:absolute; margin:3px 0 0 336px}
.design_2 .rmbBox{ width:160px; height:170px; float:left; position:absolute; margin:0 0 0 102px}
.design_2 .rmbBox .rmb{ width:160px; height:160px; float:left; position:absolute; z-index:10; background:url(https://images.iyunmai.com/home/m/static/images/hero/haoqingMini/hero_miniDesign_2_2.png) no-repeat}
.design_2 .rmbBox .rmbBg{ width:160px; height:164px; float:left; position:absolute; z-index:11; background:url(https://images.iyunmai.com/home/m/static/images/hero/haoqingMini/hero_miniDesign_2_3.png) no-repeat}

.design_3{ width:100%; float:left; position:relative; overflow:hidden; padding-top:110px}
.design_3 .titBox{ width:100%; float:left; overflow:hidden; position:relative; padding-bottom:90px}
.design_3 .t_1{ font-size:50px; line-height:66px; padding-bottom:30px}
.design_3 .t_2{ font-size:32px; line-height:50px; color:#666}
.design_3 .box{ width:860px; height:600px; position:relative; overflow:hidden; left:50%; margin:0 0 0 -430px}
.design_3 .img_1{ width:666px; height:518px; float:left; position:absolute; margin:0 0 0 97px}

.design_4{ width:100%; float:left; position:relative; overflow:hidden; padding:75px 0 100px}
.design_4 .titBox{ width:100%; float:left; overflow:hidden; position:relative; padding-bottom:90px}
.design_4 .t_1{ font-size:50px; line-height:66px; padding-bottom:30px}
.design_4 .t_2{ font-size:32px; line-height:50px; color:#666}
.design_4 .box{ width:860px; height:460px; position:relative; overflow:hidden; left:50%; margin:0 0 0 -430px}
.design_4 .img_1{ width:420px; height:405px; float:left; position:absolute; margin:0 0 0 220px}
.design_4 .electricity{ width:660px; float:left; position:relative; margin:20px 0 0 5%}
.design_4 .et_1{ width:660px; color:#333; float:left; line-height:48px; font-size:22px}
.design_4 .durationBox{ width:660px; height:60px; float:left; overflow:hidden; margin-bottom:20px}
.design_4 .duration_1, .design_4 .duration_2{ width:600px; height:60px; float:left; background-color:#5ED85A; line-height:60px; color:#fff; text-align:right; font-size:24px; padding-right:30px; transition:transform 0.8s ease; transform:translate3d(-100%,0,0) rotate(0.001deg)}
.design_4 .duration_2{ width:410px; background-color:#E4E4E4; color:#666}

.design_5{ width:100%; height:1346px; float:left; position:relative; overflow:hidden; background:url(https://images.iyunmai.com/home/m/static/images/hero/haoqingMini/hero_miniDesign_5_bg.jpg) no-repeat center 0}
.design_5 .titBox{ width:100%; float:left; overflow:hidden; position:relative; padding-top:110px}
.design_5 .t_1{ font-size:50px; line-height:66px; color:#fff; padding-bottom:30px}
.design_5 .t_2{ width:100%; height:250px; overflow:hidden; float:left; font-size:32px; line-height:50px; color:#fff}
.design_5 .box{ width:860px; height:460px; position:relative; overflow:hidden; left:50%; margin:0 0 0 -430px}
.design_5 .performance{ width:660px; float:left; position:relative; margin:535px 0 0 5%}
.design_5 .pt_1{ width:660px; color:#fff; float:left; line-height:48px; font-size:22px}
.design_5 .performanceBox{ width:660px; height:60px; float:left; overflow:hidden; margin-bottom:20px}
.design_5 .performance_1, .design_5 .performance_2{ width:600px; height:60px; float:left; background-color:rgba(25,199,20,0.7); line-height:60px; color:#fff; text-align:right; font-size:24px; padding-right:30px; transition:transform 0.8s ease; transform:translate3d(-100%,0,0) rotate(0.001deg)}
.design_5 .performance_2{ width:130px; background-color:#E4E4E4; color:#666}

.design_6{ width:100%; float:left; position:relative; overflow:hidden; padding-top:110px}
.design_6 .titBox{ width:100%; float:left; overflow:hidden; position:relative; padding-bottom:90px}
.design_6 .t_1{ font-size:50px; line-height:66px; padding-bottom:30px}
.design_6 .t_2{ font-size:32px; line-height:50px; color:#666}
.design_6 .box{ width:860px; height:538px; position:relative; overflow:hidden; left:50%; margin:0 0 0 -430px}
.design_6 .img_1{ width:400px; height:538px; float:left; position:absolute; margin:0 0 0 230px}

.hqMini_buy{ width:100%; float:left; text-align:center}
.hqMini_buy img{ max-width: 100%; margin-bottom:10px}

@media only screen and (max-width : 600px){
	.design_1{ padding-top:50px}
	.design_1 .titBox{ padding-bottom:50px}
	.design_1 .t_1{ font-size:25px; line-height:33px; padding-bottom:15px}
	.design_1 .t_2{ font-size:16px; line-height:25px}
	.design_1 .box{ width:430px; height:341px; margin:0 0 0 -215px}
	.design_1 .img{ width:175px; height:341px; margin-left:128px}
	
	.design_2{ padding-top:55px}
	.design_2 .titBox{ padding-bottom:50px}
	.design_2 .t_1{ font-size:25px; line-height:33px; padding-bottom:15px}
	.design_2 .t_2{ font-size:16px; line-height:25px}
	.design_2 .box{ width:430px; height:160px; margin:0 0 0 -215px}
	.design_2 .img_1{ width:262px; height:120px; margin:2px 0 0 168px}
	.design_2 .rmbBox{ width:80px; height:85px; margin:0 0 0 51px}
	.design_2 .rmbBox .rmb{ width:80px; height:80px; background-size:80px 80px}
	.design_2 .rmbBox .rmbBg{ width:80px; height:82px; background-size:80px 82px}
	
	.design_3{ padding-top:55px}
	.design_3 .titBox{ padding-bottom:45px}
	.design_3 .t_1{ font-size:25px; line-height:33px; padding-bottom:30px}
	.design_3 .t_2{ font-size:16px; line-height:25px}
	.design_3 .box{ width:430px; height:300px; margin:0 0 0 -215px}
	.design_3 .img_1{ width:333px; height:259px; margin:0 0 0 49px}
	
	.design_4{ padding:38px 0 50px}
	.design_4 .titBox{ padding-bottom:45px}
	.design_4 .t_1{ font-size:25px; line-height:33px; padding-bottom:15px}
	.design_4 .t_2{ font-size:16px; line-height:25px}
	.design_4 .box{ width:430px; height:230px; margin:0 0 0 -215px}
	.design_4 .img_1{ width:210px; height:203px; margin:0 0 0 110px}
	.design_4 .electricity{ width:330px; margin:10px 0 0 5%}
	.design_4 .et_1{ width:330px; line-height:24px; font-size:12px}
	.design_4 .durationBox{ width:330px; height:30px; margin-bottom:10px}
	.design_4 .duration_1, .design_4 .duration_2{ width:300px; height:30px; line-height:30px; font-size:12px; padding-right:15px}
	.design_4 .duration_2{ width:205px}
	
	.design_5{ height:673px; background-size:430px 673px}
	.design_5 .titBox{ padding-top:55px}
	.design_5 .t_1{ font-size:25px; line-height:33px; padding-bottom:15px}
	.design_5 .t_2{ height:125px; font-size:16px; line-height:25px}
	.design_5 .box{ width:430px; height:230px; margin:0 0 0 -215px}
	.design_5 .performance{ width:330px; margin:268px 0 0 5%}
	.design_5 .pt_1{ width:330px; line-height:24px; font-size:12px}
	.design_5 .performanceBox{ width:330px; height:30px; margin-bottom:10px}
	.design_5 .performance_1, .design_5 .performance_2{ width:300px; height:30px; line-height:30px; font-size:12px; padding-right:15px}
	.design_5 .performance_2{ width:65px}
	
	.design_6{ padding-top:55px}
	.design_6 .titBox{ padding-bottom:45px}
	.design_6 .t_1{ font-size:25px; line-height:33px; padding-bottom:15px}
	.design_6 .t_2{ font-size:16px; line-height:25px}
	.design_6 .box{ width:430px; height:269px; margin:0 0 0 -215px}
	.design_6 .img_1{ width:200px; height:269px; float:left; position:absolute; margin:0 0 0 115px}
}

@media only screen and (max-width : 320px){
	.design_2 .rmbBox{ margin:0 0 0 70px}
	.design_3 .img_1{ width:300px; height:233px; margin:0 0 0 65px}
	
	.design_4 .duration_1, .design_5 .performance_1{ width:270px}
}
