.meter_bg{ background-image:url(https://images.iyunmai.com/home/static/images/hero/haoqing/meter_new_bg.png); background-repeat:no-repeat}

.design_box{ width:100%; float:left; color:#fff; overflow:hidden; font-family:HanHei SC; font-weight:200}
.design_full_box{ width:100%; overflow:hidden; float:left}
.design{ width:100%; overflow:hidden; float:left; position:relative}
.design .tit_box{ width:100%; float:left; overflow:hidden; opacity:0; color:#323232; position:relative; transform:translate(0,0); background-color:rgba(255,255,255,0.01); z-index:99999}
.design .t_1{ width:100%; float:left; font-size:60px; line-height:70px; padding:80px 0 12px}
.design .t_2{ width:100%; float:left; font-size:28px; line-height:36px}

.des_nav{ width:100px; float:left; display:none; position:fixed; top:0; opacity:0; right:20px; z-index:9999999}
.des_nav li{ width:100px; float:left; height:18px; cursor:pointer; margin-bottom:5px; overflow:hidden}
.des_nav li .tit{ width:70px; height:18px; line-height:18px; float:right; opacity:0; color:#0EAE7E; padding-right:8px; text-align:right; transition:color .9s ease-in,opacity .4s ease-in; -webkit-transition:color .9s ease-in,opacity .4s ease-in}
.des_nav a, .des_nav .cur{ width:6px; height:6px; border:none; background-color:#a6a6a6; overflow:hidden; float:right; margin:6px 3px 0; border-radius:50px; transition:background-color .9s ease-in; -webkit-transition:background-color .9s ease-in}
.des_nav .cur{ width:8px; height:8px; border:2px solid #2DC799; background-color:inherit; margin:3px 0 0; transition:none; -webkit-transition:none}
.des_nav_w a{ background-color:#fff}
.des_nav_w li .tit{ color:#fff}

.transition{ transition:transform .9s cubic-bezier(.86, 0, .07, 1); -webkit-transition:-webkit-transform .9s cubic-bezier(.86, 0, .07, 1)}

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

.haoqing_1{ width:1160px; float:left}
.haoqing_1 .tit_box{ width:400px; opacity:1; margin-top:180px; position:absolute}
.haoqing_1 .t_1{ padding:0 0 8px}
.haoqing_1 .t_3{ width:100%; float:left; color:#EA1B1B; font-size:100px; line-height:110px; padding-top:20px}
.haoqing_1 .t_3 .fs_42{ font-size:42px}
.haoqing_1 .buy_btn{ width:230px; height:70px; float:left; text-align:center; font-size:28px; line-height:70px; color:#fff; background-color:#2DC799}
.haoqing_1_img{ width:975px; height:2000px; float:left; overflow:hidden; margin-top:80px; position:absolute; z-index:99998}
.haoqing_1_img img{ opacity:0; transform:translate(250px,250px) rotate(0.01deg); -webkit-transform:translate(250px,250px) rotate(0.01deg)}

@keyframes img_1_1{ 0%{ opacity:0; transform:translate(250px,250px) rotate(0.01deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0.01deg)}}
@-webkit-keyframes img_1_1{ 0%{ opacity:0; -webkit-transform:translate(250px,250px) rotate(0.01deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.01deg)}}

.haoqing_2{ width:1160px; float:left}
.haoqing_2 .tit_box{ height:110px; text-align:center}
.haoqing_2 .t_1{ padding:0 0 8px}
.haoqing_2 ul{ width:1056px; height:1000px; float:left; overflow:hidden; left:50%; margin:60px 0 0 -528px; position:relative}
.haoqing_2 li{ width:100px; height:185px; float:left; margin:0 38px; transform:translate(0,1000px) rotate(0.0001deg)}
.haoqing_2 li .icon_box{ width:100px; height:100px; float:left; margin-bottom:10px; background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/haoqing_2_bg.png) no-repeat}
.haoqing_2 li .tit{ width:100px; color:#333; font-size:22px; line-height:28px; float:left; text-align:center}
.haoqing_2 li .icon_1{ background-position:0 0}
.haoqing_2 li .icon_2{ background-position:0 -100px}
.haoqing_2 li .icon_3{ background-position:0 -200px}
.haoqing_2 li .icon_4{ background-position:0 -300px}
.haoqing_2 li .icon_5{ background-position:0 -400px}
.haoqing_2 li .icon_6{ background-position:0 -500px}
.haoqing_2 li .icon_7{ background-position:0 -600px}
.haoqing_2 li .icon_8{ background-position:0 -700px}
.haoqing_2 li .icon_9{ background-position:0 -800px}
.haoqing_2 li .icon_10{ background-position:0 -900px}
.haoqing_2 li .icon_11{ background-position:0 -1000px}
.haoqing_2 li .icon_12{ background-position:0 -1100px}
.haoqing_2 li .icon_13{ background-position:0 -1200px}
.haoqing_2 li .icon_14{ background-position:0 -1300px}
.haoqing_2 li .icon_15{ background-position:0 -1400px}
.haoqing_2 li .icon_16{ background-position:0 -1500px}
.haoqing_2 li .icon_17{ background-position:0 -1600px}

.main_min .haoqing_2 ul{ width:960px; margin-left:-480px}
.main_min .haoqing_2 li{ margin:0 30px}
.main_min .haoqing_2 .li_6, .main_min .haoqing_2 .li_12{ margin-right:0}

@keyframes img_2{ 0%{ transform:translate(0,1000px) rotate(0.0001deg)} 100%{ transform:translate(0,0) rotate(0.0001deg)}}

.haoqing_3_box{ width:0; overflow:hidden; position:relative; float:left; transition:width .9s cubic-bezier(.86, 0, .07, 1); -webkit-transition:width .9s cubic-bezier(.86, 0, .07, 1)}
.haoqing_3_w, .haoqing_3_b{ width:100%; overflow:hidden; float:left; position:absolute; top:0; left:0; background:#fff}
.haoqing_3_w img, .haoqing_3_b img{ width:2560px; height:1440px; float:left; position:absolute; top:50%; left:50%; margin:-720px 0 0 -1280px}
.haoqing_3_w p, .haoqing_3_b p{ width:100%; text-align:center; height:60px; font-size:50px; color:#000; position:absolute; top:50%; margin-top:200px} 
.haoqing_3_b{ background:#010102}
.haoqing_3_b p{ color:#fff} 
.haoqing_3_con{ width:100%; height:150px; float:left; position:absolute; z-index:99999}
.haoqing_3_con .tit{ color:#858585; font-size:44px; text-align:center}
.haoqing_3_con .hq_3_chage{ width:160px; height:32px; float:left; margin:30px 0 0 500px}
.haoqing_3_con .hq_3_chage a{ width:68px; height:27px; float:left; text-align:center; color:#919191; font-size:16px; margin-right:5px; border-radius:5px; line-height:27px; border:2px solid rgba(0,204,211,0); transition:border-color .3s ease-out; -webkit-transition:border-color .3s ease-out}
.haoqing_3_con .hq_3_chage a:hover, .haoqing_3_con .hq_3_chage .cur{ border-color:rgba(0,204,211,1)}

.haoqing_4{ width:1160px; overflow:hidden; float:left}
.haoqing_4 .tit_box{ width:460px; height:500px}
.haoqing_4 .t_1{ padding:50px 0 12px}
.haoqing_4_img{ width:776px; height:1500px; float:left; overflow:hidden; margin:-520px 0 0 0; position:absolute}
.haoqing_4_img img{ opacity:0; transform:translate(0,60px) rotate(0.01deg); -webkit-transform:translate(0,60px) rotate(0.01deg)}

@keyframes img_4_1{ 0%{ opacity:0; transform:translate(0,60px) rotate(0.01deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0.01deg)}}
@-webkit-keyframes img_4_1{ 0%{ opacity:0; -webkit-transform:translate(0,60px) rotate(0.01deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.01deg)}}

.haoqing_5_bg{ background:#ebebeb url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_haoqing_new_5_bg.jpg) repeat-x 0 center}
.haoqing_5{ width:1160px; float:left}
.haoqing_5 .tit_box{ height:400px; text-align:center}
.haoqing_5 .t_1{ padding:50px 0 12px}
.haoqing_5_img{ width:975px; height:646px; float:left; overflow:hidden; margin:-340px 0 0 0; position:absolute; z-index:99998}
.haoqing_5_img img{ opacity:0; transform:translate(500px,0) rotate(0.01deg); -webkit-transform:translate(500px,0) rotate(0.01deg)}

@keyframes img_5_1{ 0%{ opacity:0; transform:translate(500px,0) rotate(0.01deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0.01deg)}}
@-webkit-keyframes img_5_1{ 0%{ opacity:0; -webkit-transform:translate(500px,0) rotate(0.01deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.01deg)}}

.haoqing_6_bg{ background-color:#ececec}
.haoqing_6{ width:1160px; overflow:hidden; float:left}
.haoqing_6 .tit_box{ width:400px; height:500px}
.haoqing_6 .t_1{ padding:80px 0 12px}
.haoqing_6_img{ width:716px; height:1467px; float:left; overflow:hidden; margin:-665px 0 0 0; position:absolute}
.haoqing_6_img_bg{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_haoqing_6.jpg) no-repeat}

.meter{ width:420px; opacity:0; display:none; padding:80px 0 0 530px; float:left}
.meter .bar{ width:123px; height:24px; overflow:hidden; float:left; margin:124px 0 0 247px}
.meter .bar .bar_bom{ width:123px; height:24px; float:left}
.meter .bar .bar_bom span{ height:23px; float:left; background-color:#fff}
.meter .bar .bar_bg{ width:124px; height:24px; float:left; background-position:0 -1550px; margin-top:-24px}
.meter .fabl{ width:34px; height:50px; float:left; margin:10px 0 0 227px; display:inline}
.meter .fat{ width:34px; height:17px; float:left; background-position:0 -1150px; opacity:0; margin-left:3px}
.meter .blue{ width:17px; height:24px; float:left; background-position:0 -1200px; opacity:0; margin:3px 0 0 2px}

.meter_1{ width:130px; height:47px; float:left; margin:8px 0 0 8px; opacity:0; background-position:54px -1282px; display:inline}
.meter_1 .num_1, .meter_1 .num_2, .meter_1 .num_3{ width:28px; height:47px; float:left}
.meter_1 .num_2{ margin-left:-1px}
.meter_1 .num_3{ margin-left:9px}

.meter_2{ width:210; height:86px; float:left; margin:6px 0 0 212px; background-position:143px -1372px; display:inline}
.meter_2 .num_1, .meter_2 .num_2, .meter_2 .num_3, .meter_2 .num_4{ width:51px; height:86px; float:left; background-position:-200px 0}
.meter_2 .num_2{ margin-left:-1px}
.meter_2 .num_3{ margin-left:-1px}
.meter_2 .num_4{ width:44; height:74; margin:11px 0 0 2px; background-position:-100px 0}

.haoqing_7_bg{ background-color:#0B98E9}
.haoqing_7{ width:1160px; overflow:hidden; float:left}
.haoqing_7 .tit_box{ width:460px; height:500px; color:#fff}
.haoqing_7 .t_1{ padding:100px 0 12px}
.haoqing_7_bg_1{ width:900px; height:900px; float:left; overflow:hidden; margin:-500px 0 0 0; position:absolute; background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/haoqing_7_bg_1.png) no-repeat}
.haoqing_7_lum{ width:734px; height:734px; float:left; margin:84px 83px 82px; background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/haoqing_7_bg_2.png) no-repeat 365px 0; animation:spin 4s linear infinite; -webkit-animation:spin 4s linear infinite}
.haoqing_7_bg .icon_1{ width:138px; height:138px; float:left; background-position:0 -3270px; top:16px; left:440px; position:absolute}
.haoqing_7_bg .icon_2{ width:96px; height:96px; float:left; background-position:0 -3540px; top:203px; left:270px; position:absolute}
.haoqing_7_bg .icon_3{ width:133px; height:133px; float:left; background-position:0 -3120px; top:345px; left:20px; position:absolute}
.haoqing_7_bg .icon_4{ width:96px; height:96px; float:left; background-position:0 -3650px; top:515px; left:190px; position:absolute}
.haoqing_7_bg .icon_5{ width:108px; height:108px; float:left; background-position:0 -3420px; top:230px; left:725px; position:absolute}
.haoqing_7_bg .icon_6{ width:66px; height:66px; float:left; background-position:0 -3760px; top:433px; left:652px; position:absolute}
.haoqing_7_bg .icon_7{ width:175px; height:124px; float:left; background-position:0 -2950px; top:380px; left:364px; position:absolute}
.haoqing_7_bg_2{ width:100%; height:157px; float:left; overflow:hidden; bottom:0; position:absolute; background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/haoqing_7_bg_3.png) repeat-x 0 0}

@keyframes spin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)}}
@-webkit-keyframes spin{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(-360deg)}}

.haoqing_8{ width:1160px; overflow:hidden; float:left; transform:translate(0,0)}
.haoqing_8 .tit_box{ height:500px; text-align:center}
.haoqing_8 .t_1{ padding:80px 0 12px}
.haoqing_8_img{ width:100%; height:488px; float:left; overflow:hidden; bottom:0; position:absolute}
.haoqing_8_img img{ width:1623px; height:488; float:left; opacity:0; position:absolute; left:50%; margin:0 0 0 -811px; transform:translate(0,488px) rotate(0.01deg); -webkit-transform:translate(0,488px) rotate(0.01deg)}

@keyframes img_8_1{ 0%{ opacity:0; transform:translate(0,488px) rotate(0.01deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0.01deg)}}
@-webkit-keyframes img_8_1{ 0%{ opacity:0; -webkit-transform:translate(0,488px) rotate(0.01deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.01deg)}}

.haoqing_9{ width:1160px; overflow:hidden; float:left}
.haoqing_9 .tit_box{ width:480px; height:500px}
.haoqing_9 .t_1{ padding:80px 0 12px}
.haoqing_9_img{ width:1211px; height:807px; float:left; overflow:hidden; margin:-400px 0 0 0; position:absolute}
.haoqing_9_img img{ opacity:0; transform:translate(500px,0) rotate(0.01deg); -webkit-transform:translate(500px,0) rotate(0.01deg)}

@keyframes img_9_1{ 0%{ opacity:0; transform:translate(500px,0) rotate(0.01deg)} 100%{ opacity:1; transform:translate(0,0) rotate(0.01deg)}}
@-webkit-keyframes img_9_1{ 0%{ opacity:0; -webkit-transform:translate(500px,0) rotate(0.01deg)} 100%{ opacity:1; -webkit-transform:translate(0,0) rotate(0.01deg)}}

.atlas{ width:100%; height:920px; float:left; position:relative; overflow:hidden; text-align:center}
.atlas_b{ background-color:#000}
.atlas .b_share, .atlas .w_share{ width:36px; height:50px; float:left; position:absolute; top:10%; right:5%; background-position:0 -3950px}
.atlas .w_share{ background-position:0 -4050px}
.atlas_bg_1{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_atlas_1.jpg) no-repeat center 0}
.atlas_bg_2{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_atlas_2.jpg) no-repeat center 0}
.atlas_bg_3{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_atlas_3.jpg) no-repeat center 0}
.atlas_bg_4{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_atlas_4.jpg) no-repeat center 0}
.atlas_bg_5{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_atlas_5.jpg) no-repeat center 0}
.atlas_bg_6{ background:url(https://images.iyunmai.com/home/static/images/hero/haoqing/hero_atlas_6.jpg) no-repeat center 0}