.color_bg{ background:url(https://images.iyunmai.com/home/m/static/images/color_bg.png) no-repeat; background-size:420px 5000px}

.hqColor_1{ width:100%; height:1160px; float:left; position:relative; overflow:hidden}
.hqColor_1 .t_1{ width:318px; height:66px; float:left; position:absolute; margin:228px 0 0 272px; z-index:11; opacity:0; transition:transform 0.9s linear,opacity 0.9s linear; transform:translate(0,30px); -webkit-transition:-webkit-transform 0.9s linear,opacity 0.9s linear; -webkit-transform:translate(0,30px)}
.hqColor_1 .t_1 img{ width:318px; height:66px}
.hqColor_1 .t_2{ width:400px; float:left; position:absolute; margin:318px 0 0 238px; z-index:12; font-size:28px; color:#666; line-height:36px; opacity:0; transition:transform 0.6s linear,opacity 0.6s linear; transform:translate(0,-10px); -webkit-transition:-webkit-transform 0.6s linear,opacity 0.6s linear; -webkit-transform:translate(0,-10px)}
.hqColor_1 .buyBtn{ width:148px; height:48px; float:left; border:1px solid #006CFF; border-radius:5px; font-size:28px; color:#006cff; line-height:48px; position:absolute; text-align:center; margin:468px 0 0 356px; z-index:13; opacity:0; transition:transform 0.3s linear,opacity 0.3s linear; transform:translate(0,-10px); -webkit-transition:-webkit-transform 0.3s linear,opacity 0.3s linear; -webkit-transform:translate(0,-10px)}
.hqColor_1 .box{ width:860px; position:absolute; left:50%; margin:0 0 0 -430px}
.hqColor_1 .img_1{ width:216px; height:468px; float:left; position:absolute; overflow:hidden; margin-top:142px; z-index:10}
.hqColor_1 .img_1 img{ width:216px; height:468px; opacity:0; transition:transform .6s ease-out,opacity .6s ease-out; transform:translate3d(-50px,0,0) rotate(0.001deg); -webkit-transition:-webkit-transform .6s ease-out,opacity .6s ease-out; -webkit-transform:translate3d(-50px,0,0) rotate(0.001deg)}
.hqColor_1 .img_2{ width:466px; height:134px; float:left; position:absolute; overflow:hidden; z-index:9}
.hqColor_1 .img_2 img{ width:466px; height:134px; opacity:0; transition:transform .6s ease-out,opacity .6s ease-out; transform:translate3d(0,-50px,0) rotate(0.001deg); -webkit-transition:-webkit-transform .6s ease-out,opacity .6s ease-out; -webkit-transform:translate3d(0,-50px,0) rotate(0.001deg)}
.hqColor_1 .img_3{ width:408px; height:190px; float:left; position:absolute; overflow:hidden; margin-left:452px; z-index:8}
.hqColor_1 .img_3 img{ width:408px; height:190px; opacity:0; transition:transform .6s ease-out,opacity .6s ease-out; transform:translate3d(0,-50px,0) rotate(0.001deg); -webkit-transition:-webkit-transform .6s ease-out,opacity .6s ease-out; -webkit-transform:translate3d(0,-50px,0) rotate(0.001deg)}
.hqColor_1 .img_4{ width:246px; height:464px; float:left; position:absolute; overflow:hidden; margin:188px 0 0 614px; z-index:7}
.hqColor_1 .img_4 img{ width:246px; height:464px; opacity:0; transition:transform .6s ease-out,opacity .6s ease-out; transform:translate3d(50px,0,0) rotate(0.001deg); -webkit-transition:-webkit-transform .6s ease-out,opacity .6s ease-out; -webkit-transform:translate3d(50px,0,0) rotate(0.001deg)}
.hqColor_1 .img_5{ width:466px; height:532px; float:left; position:absolute; overflow:hidden; margin:638px 0 0 380px; z-index:6}
.hqColor_1 .img_5 img{ width:466px; height:432px; opacity:0; transition:transform .6s ease-out,opacity .6s ease-out; transform:translate3d(0,50px,0) rotate(0.001deg); -webkit-transition:-webkit-transform .6s ease-out,opacity .6s ease-out; -webkit-transform:translate3d(0,50px,0) rotate(0.001deg)}
.hqColor_1 .img_6{ width:404px; height:536px; float:left; position:absolute; overflow:hidden; margin-top:588px; z-index:5}
.hqColor_1 .img_6 img{ width:404px; height:436px; opacity:0; transition:transform .6s ease-out,opacity .6s ease-out; transform:translate3d(0,50px,0) rotate(0.001deg); -webkit-transition:-webkit-transform .6s ease-out,opacity .6s ease-out; -webkit-transform:translate3d(0,50px,0) rotate(0.001deg)}

.hqColor_2{ width:100%; height:1800px; float:left; overflow:hidden; position:relative}
.hqColor_2 .con_box{ width:590px; height:360px; overflow:hidden; float:left; margin-top:18px; position:absolute; z-index:999; opacity:0; transition:opacity 0.9s ease-out; -webkit-transition:opacity 0.9s ease-out}
.hqColor_2 .tit_1{ font-size:48px; color:#000; line-height:112px}
.hqColor_2 .tit_2{ font-size:28px; color:#323232; line-height:36px}
.hqColor_2_img{ width:100%; height:1700px; margin-top:264px; float:left; overflow:hidden; position:absolute; z-index:99}
.hqColor_2_img ul{ width:720px; float:left; position:relative; left:50%; margin:0 0 0 -360px}
.hqColor_2_img li{ width:240px; height:40px; float:left; padding-top:130px; margin-bottom:82px; overflow:hidden; opacity:0; font-size:28px; line-height:40px; text-align:center; color:#323232; background:url(https://images.iyunmai.com/home/m/static/images/body_bg.png) no-repeat center 0}
.hqColor_2_img .icon_2{ background-position:center -200px}
.hqColor_2_img .icon_3{ background-position:center -400px}
.hqColor_2_img .icon_4{ background-position:center -600px}
.hqColor_2_img .icon_5{ background-position:center -800px}
.hqColor_2_img .icon_6{ background-position:center -1000px}
.hqColor_2_img .icon_7{ background-position:center -1200px}
.hqColor_2_img .icon_8{ background-position:center -1400px}
.hqColor_2_img .icon_9{ background-position:center -1600px}
.hqColor_2_img .icon_10{ background-position:center -1800px}
.hqColor_2_img .icon_11{ background-position:center -2000px}
.hqColor_2_img .icon_12{ background-position:center -2200px}
.hqColor_2_img .icon_13{ background-position:center -2400px}
.hqColor_2_img .icon_14{ background-position:center -2600px}
.hqColor_2_img .icon_15{ background-position:center -2800px}
.hqColor_2_img .icon_16{ background-position:center -3000px}
.hqColor_2_img .icon_17{ background-position:center -3200px}

@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)}}
@keyframes img_2_15{ 0%{ opacity:0; transform:translate3d(0,1700px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_16{ 0%{ opacity:0; transform:translate3d(0,1800px,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)}}
@keyframes img_2_17{ 0%{ opacity:0; transform:translate3d(0,1900px,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)}}
@-webkit-keyframes img_2_15{ 0%{ opacity:0; -webkit-transform:translate3d(0,1700px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_16{ 0%{ opacity:0; -webkit-transform:translate3d(0,1800px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}
@-webkit-keyframes img_2_17{ 0%{ opacity:0; -webkit-transform:translate3d(0,1900px,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)}}

.hqColor_3{ width:100%; height:800px; float:left; overflow:hidden; position:relative}
.hqColor_3 .con_box{ width:580px; height:360px; overflow:hidden; float:left; margin-top:-20px; z-index:999; opacity:0; transition:opacity 0.9s ease-out; -webkit-transition:opacity 0.9s ease-out}
.hqColor_3 .tit_1{ font-size:48px; color:#000; line-height:92px}
.hqColor_3 .tit_2{ font-size:28px; color:#323232; line-height:44px}
.hqColor_3_img{ width:100%; height:486px; float:left; overflow:hidden; position:relative; z-index:99; text-align:center}
.hqColor_3_img img{ width:860px; height:486px; opacity:0; position:absolute; left:50%; margin:0 0 0 -430px; 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)}

.hqColor_4{ width:100%; height:1266px; float:left; overflow:hidden; position:relative}
.hqColor_4 .con_box{ width:600px; height:360px; overflow:hidden; float:left; margin-top:16px; position:absolute; z-index:999; opacity:0; transition:opacity 0.9s ease-out; -webkit-transition:opacity 0.9s ease-out}
.hqColor_4 .tit_1{ font-size:48px; color:#000; line-height:92px}
.hqColor_4 .tit_2{ font-size:28px; color:#323232; line-height:44px}
.hqColor_4_img{ width:100%; height:922px; margin-top:344px; float:left; overflow:hidden; position:absolute; z-index:99; text-align:center}
.hqColor_4_img img{ width:640px; height:922px; 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)}

.hqColor_5{ width:100%; height:800px; float:left; overflow:hidden; position:relative}
.hqColor_5 .con_box{ width:600px; height:360px; overflow:hidden; float:left; margin-top:86px; position:absolute; z-index:999}
.hqColor_5 .tit_1{ font-size:48px; color:#000; line-height:92px}
.hqColor_5 .tit_2{ font-size:28px; color:#323232; line-height:44px}

.hqColor_chage_5{ width:612px; margin:auto}
.hqColor_chage_5 .img_box{ width:612px; height:322px; overflow:hidden; position:relative; margin:324px 0 0 0}
.hqColor_chage_5 .img_box img{ width:612px; height:322px; position:absolute; opacity:0}
.hqColor_chage_5 .chage{ width:600px; float:left; margin:12px 0 0 150px; position:absolute}
.hqColor_chage_5 li{ width:200px; height:160px; float:left; margin-left:-106px}
.hqColor_chage_5 li .subtit{ width:200px; height:30px; float:left}
.hqColor_chage_5 li .subtit .t_1{ font-size:16px; line-height:24px; float:left}
.hqColor_chage_5 li a, .hqColor_chage_5 li .cur{ width:50px; height:50px; float:left}
.hqColor_chage_5 li .co_1{ background-position:0 -100px}
.hqColor_chage_5 li .co_2{ background-position:0 -200px}
.hqColor_chage_5 li .co_3{ background-position:0 -300px}
.hqColor_chage_5 li .co_4{ background-position:0 -400px}
.hqColor_chage_5 li .co_5{ background-position:0 -500px}
.hqColor_chage_5 li .co_6{ background-position:0 -600px}

.hqColor_6{ width:100%; height:1100px; float:left; overflow:hidden; position:relative}
.hqColor_6 .con_box{ width:580px; height:320px; overflow:hidden; float:left; margin-top:50px; z-index:999; opacity:0; transition:opacity 0.9s ease-out; -webkit-transition:opacity 0.9s ease-out}
.hqColor_6 .tit_1{ font-size:48px; color:#000; line-height:64px; padding-bottom:14px}
.hqColor_6 .tit_2{ font-size:28px; color:#323232; line-height:44px}
.hqColor_6_img{ width:100%; height:730px; float:left; overflow:hidden; position:relative; z-index:99; text-align:right}
.hqColor_6_img .img_box_1, .hqColor_6_img .img_box_2{ width:860px; height:360px; float:left; background-color:#f2f2f2; overflow:hidden; position:absolute; left:50%; margin:0 0 0 -430px}
.hqColor_6_img .img_box_2{ margin-top:370px}
.hqColor_6_img img{ width:750px; height:360px; 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)}

.hqColor_7{ width:100%; height:1208px; float:left; overflow:hidden; position:relative}
.hqColor_7 .con_box{ width:580px; height:320px; overflow:hidden; float:left; margin-top:62px; z-index:999}
.hqColor_7 .tit_1{ font-size:48px; color:#000; line-height:64px; padding-bottom:14px}
.hqColor_7 .tit_2{ font-size:28px; color:#323232; line-height:44px}
.hqColor_7_img_m{ width:100%; height:389px; float:left; overflow:hidden; display:none; position:relative; z-index:99; padding-top:24px}
.hqColor_7_img_m .img_box{ width:430px; height:389px; position:absolute; overflow:hidden; left:50%; margin:0 0 0 -215px; background:url(https://images.iyunmai.com/home/m/static/images/hero/haoqingColor/hero_haoqingColor_7.png) no-repeat; background-size:430px 389px}
.hqColor_7_img{ width:100%; height:778px; float:left; overflow:hidden; display:block; position:relative; z-index:99; padding-top:48px}
.hqColor_7_img .img_box{ width:860px; height:778px; position:absolute; overflow:hidden; left:50%; margin:0 0 0 -430px; background:url(https://images.iyunmai.com/home/m/static/images/hero/haoqingColor/hero_haoqingColor_7.png) no-repeat; background-size:860px 778px}

.hqColor_7 .car_1{ width:10px; height:20px; float:left; background-color:#328BDE; position:absolute; animation:car_1 9s linear infinite; -webkit-animation:car_1 9s linear infinite}
.hqColor_7 .car_2{ width:10px; height:20px; float:left; background-color:#EC7845; position:absolute; animation:car_2 15s linear infinite; -webkit-animation:car_2 15s linear infinite}
.hqColor_7 .car_3{ width:10px; height:20px; float:left; background-color:#FFB43D; position:absolute; animation:car_3 11s linear infinite; -webkit-animation:car_3 11s linear infinite}
.hqColor_7 .car_4{ width:20px; height:10px; float:left; background-color:#EC7845; position:absolute; animation:car_4 19s linear infinite; -webkit-animation:car_4 19s linear infinite}
.hqColor_7 .car_5{ width:20px; height:10px; float:left; background-color:#328BDE; position:absolute; animation:car_5 7s linear infinite; -webkit-animation:car_5 7s linear infinite}
.hqColor_7 .cloud{ width:420px; height:244px; float:left; background-position:0 -2000px; position:absolute; z-index:999; animation:cloud 60s linear infinite; -webkit-animation:cloud 60s linear infinite}
.hqColor_7 .cloud_bg{ width:420px; height:304px; float:left; background-position:0 -2250px; position:absolute; z-index:998; animation:cloud_bg 60s linear infinite; -webkit-animation:cloud_bg 60s linear infinite}

@keyframes car_1{ 0%{ transform:translate(186px,800px) rotate(-5deg)} 100%{ transform:translate(105px,-60px) rotate(-5deg)}}
@keyframes car_2{ 0%{ transform:translate(366px,-60px) rotate(-5deg)} 100%{ transform:translate(446px,800px) rotate(-5deg)}}
@keyframes car_3{ 0%{ transform:translate(676px,800px) rotate(-5deg)} 100%{ transform:translate(596px,-60px) rotate(-5deg)}}
@keyframes car_4{ 0%{ transform:translate(-60px,700px) rotate(-30deg)} 100%{ transform:translate(920px,96px) rotate(-30deg)}}
@keyframes car_5{ 0%{ transform:translate(920px,76px) rotate(-30deg)} 100%{ transform:translate(-60px,680px) rotate(-30deg)}}
@keyframes cloud{ 0%{ transform:translate(120px,240px) rotate(-1deg)} 25%{ transform:translate(220px,180px) rotate(-1deg)} 50%{ transform:translate(320px,240px) rotate(-1deg)} 75%{ transform:translate(220px,180px) rotate(-1deg)} 100%{ transform:translate(120px,240px) rotate(-1deg)}}
@keyframes cloud_bg{ 0%{ transform:translate(80px,240px) rotate(-1deg) scale(1,1)} 25%{ transform:translate(220px,180px) rotate(-1deg) scale(0.9,0.9)} 50%{ transform:translate(360px,240px) rotate(-1deg) scale(1,1)} 75%{ transform:translate(220px,180px) rotate(-1deg) scale(0.9,0.9)} 100%{ transform:translate(80px,240px) rotate(-1deg) scale(1,1)}}

@-webkit-keyframes car_1{ 0%{ -webkit-transform:translate(196px,800px) rotate(-5deg)} 100%{ -webkit-transform:translate(106px,-60px) rotate(-5deg)}}
@-webkit-keyframes car_2{ 0%{ -webkit-transform:translate(366px,-60px) rotate(-5deg)} 100%{ -webkit-transform:translate(446px,800px) rotate(-5deg)}}
@-webkit-keyframes car_3{ 0%{ -webkit-transform:translate(676px,800px) rotate(-5deg)} 100%{ -webkit-transform:translate(596px,-60px) rotate(-5deg)}}
@-webkit-keyframes car_4{ 0%{ -webkit-transform:translate(-60px,700px) rotate(-30deg)} 100%{ -webkit-transform:translate(920px,96px) rotate(-30deg)}}
@-webkit-keyframes car_5{ 0%{ -webkit-transform:translate(920px,76px) rotate(-30deg)} 100%{ -webkit-transform:translate(-60px,680px) rotate(-30deg)}}
@-webkit-keyframes cloud{ 0%{ -webkit-transform:translate(120px,240px) rotate(-1deg)} 25%{ -webkit-transform:translate(220px,180px) rotate(-1deg)} 50%{ -webkit-transform:translate(320px,240px) rotate(-1deg)} 75%{ -webkit-transform:translate(220px,180px) rotate(-1deg)} 100%{ -webkit-transform:translate(120px,240px) rotate(-1deg)}}
@-webkit-keyframes cloud_bg{ 0%{ -webkit-transform:translate(80px,240px) rotate(-1deg) scale(1,1)} 25%{ -webkit-transform:translate(220px,180px) rotate(-1deg) scale(0.9,0.9)} 50%{ -webkit-transform:translate(360px,240px) rotate(-1deg) scale(1,1)} 75%{ -webkit-transform:translate(220px,180px) rotate(-1deg) scale(0.9,0.9)} 100%{ -webkit-transform:translate(80px,240px) rotate(-1deg) scale(1,1)}}

	
.hqColor_7 .car_m_1{ width:5px; height:10px; float:left; background-color:#328BDE; position:absolute; animation:car_m_1 9s linear infinite; -webkit-animation:car_m_1 9s linear infinite}
.hqColor_7 .car_m_2{ width:5px; height:10px; float:left; background-color:#EC7845; position:absolute; animation:car_m_2 15s linear infinite; -webkit-animation:car_m_2 15s linear infinite}
.hqColor_7 .car_m_3{ width:5px; height:10px; float:left; background-color:#FFB43D; position:absolute; animation:car_m_3 11s linear infinite; -webkit-animation:car_m_3 11s linear infinite}
.hqColor_7 .car_m_4{ width:10px; height:5px; float:left; background-color:#EC7845; position:absolute; animation:car_m_4 19s linear infinite; -webkit-animation:car_m_4 19s linear infinite}
.hqColor_7 .car_m_5{ width:10px; height:5px; float:left; background-color:#328BDE; position:absolute; animation:car_m_5 7s linear infinite; -webkit-animation:car_m_5 7s linear infinite}
.hqColor_7 .cloud_m{ width:210px; height:122px; float:left; background-position:0 -1000px; position:absolute; z-index:999; animation:cloud_m 60s linear infinite; -webkit-animation:cloud_m 60s linear infinite}
.hqColor_7 .cloud_m_bg{ width:210px; height:152px; float:left; background-position:0 -1125px; position:absolute; z-index:998; animation:cloud_m_bg 60s linear infinite; -webkit-animation:cloud_m_bg 60s linear infinite}

@keyframes car_m_1{ 0%{ transform:translate(93px,400px) rotate(-5deg)} 100%{ transform:translate(53px,-30px) rotate(-5deg)}}
@keyframes car_m_2{ 0%{ transform:translate(183px,-30px) rotate(-5deg)} 100%{ transform:translate(223px,400px) rotate(-5deg)}}
@keyframes car_m_3{ 0%{ transform:translate(338px,400px) rotate(-5deg)} 100%{ transform:translate(298px,-30px) rotate(-5deg)}}
@keyframes car_m_4{ 0%{ transform:translate(-30px,350px) rotate(-30deg)} 100%{ transform:translate(460px,48px) rotate(-30deg)}}
@keyframes car_m_5{ 0%{ transform:translate(460px,38px) rotate(-30deg)} 100%{ transform:translate(-30px,340px) rotate(-30deg)}}
@keyframes cloud_m{ 0%{ transform:translate(60px,120px) rotate(-1deg)} 25%{ transform:translate(110px,90px) rotate(-1deg)} 50%{ transform:translate(160px,120px) rotate(-1deg)} 75%{ transform:translate(110px,90px) rotate(-1deg)} 100%{ transform:translate(60px,120px) rotate(-1deg)}}
@keyframes cloud_m_bg{ 0%{ transform:translate(40px,120px) rotate(-1deg) scale(1,1)} 25%{ transform:translate(110px,90px) rotate(-1deg) scale(0.9,0.9)} 50%{ transform:translate(180px,120px) rotate(-1deg) scale(1,1)} 75%{ transform:translate(110px,90px) rotate(-1deg) scale(0.9,0.9)} 100%{ transform:translate(40px,120px) rotate(-1deg) scale(1,1)}}

@-webkit-keyframes car_m_1{ 0%{ -webkit-transform:translate(93px,400px) rotate(-5deg)} 100%{ -webkit-transform:translate(53px,-30px) rotate(-5deg)}}
@-webkit-keyframes car_m_2{ 0%{ -webkit-transform:translate(183px,-30px) rotate(-5deg)} 100%{ -webkit-transform:translate(223px,400px) rotate(-5deg)}}
@-webkit-keyframes car_m_3{ 0%{ -webkit-transform:translate(338px,400px) rotate(-5deg)} 100%{ -webkit-transform:translate(298px,-30px) rotate(-5deg)}}
@-webkit-keyframes car_m_4{ 0%{ -webkit-transform:translate(-30px,350px) rotate(-30deg)} 100%{ -webkit-transform:translate(460px,48px) rotate(-30deg)}}
@-webkit-keyframes car_m_5{ 0%{ -webkit-transform:translate(460px,38px) rotate(-30deg)} 100%{ -webkit-transform:translate(-30px,340px) rotate(-30deg)}}
@-webkit-keyframes cloud_m{ 0%{ -webkit-transform:translate(60px,120px) rotate(-1deg)} 25%{ -webkit-transform:translate(110px,90px) rotate(-1deg)} 50%{ -webkit-transform:translate(160px,120px) rotate(-1deg)} 75%{ -webkit-transform:translate(110px,90px) rotate(-1deg)} 100%{ -webkit-transform:translate(60px,120px) rotate(-1deg)}}
@-webkit-keyframes cloud_m_bg{ 0%{ -webkit-transform:translate(40px,120px) rotate(-1deg) scale(1,1)} 25%{ -webkit-transform:translate(110px,90px) rotate(-1deg) scale(0.9,0.9)} 50%{ -webkit-transform:translate(180px,120px) rotate(-1deg) scale(1,1)} 75%{ -webkit-transform:translate(110px,90px) rotate(-1deg) scale(0.9,0.9)} 100%{ -webkit-transform:translate(40px,120px) rotate(-1deg) scale(1,1)}}


.hqColor_8{ width:100%; height:1020px; float:left; overflow:hidden; position:relative}
.hqColor_8 .con_box{ width:100%; height:120px; overflow:hidden; float:left; margin-top:34px; z-index:999; opacity:0; transition:opacity 0.9s ease-out; -webkit-transition:opacity 0.9s ease-out}
.hqColor_8 .tit_1{ font-size:48px; color:#000; line-height:64px; padding-bottom:14px; text-align:center}
.hqColor_8 .tit_2{ font-size:28px; color:#323232; line-height:52px; text-align:center}
.hqColor_8_img{ width:100%; height:900px; float:left; overflow:hidden; position:relative; z-index:99; padding-top:10px}
.hqColor_8_img .img_box{ width:860px; height:900px; position:absolute; overflow:hidden; left:50%; margin:0 0 0 -430px}
.hqColor_8_img .img_box img{ width:960px; height:840px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(-50px,50px,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(-50px,50px,0)}

.hqColor_9{ width:100%; height:760px; float:left; overflow:hidden; position:relative}
.hqColor_9 .con_box{ width:580px; height:300px; overflow:hidden; float:left; margin-top:34px; z-index:999; opacity:0; transition:opacity 0.9s ease-out; -webkit-transition:opacity 0.9s ease-out}
.hqColor_9 .tit_1{ font-size:48px; color:#000; line-height:64px; padding-bottom:14px}
.hqColor_9 .tit_2{ font-size:28px; color:#323232; line-height:44px; padding-bottom:22px}
.hqColor_9 a{ font-size:24px; color:#005AFF}
.hqColor_9 a:hover{ border-bottom:1px solid #005AFF}
.hqColor_9_img{ width:100%; height:420px; float:left; overflow:hidden; position:relative; text-align:center; z-index:99; padding-top:4px}
.hqColor_9_img img{ width:630px; height:328px; opacity:0; transition:transform 0.9s ease-out,opacity 0.9s ease-out; transform:translate3d(0,50px,0); -webkit-transition:-webkit-transform 0.9s ease-out,-webkit-opacity 0.9s ease-out; -webkit-transform:translate3d(0,50px,0)}

@media only screen and (max-width : 600px){
	.color_bg{ background-size:210px 2500px}
	
	.hqColor_1{ width:100%; height:580px}
	.hqColor_1 .t_1{ width:159px; height:33px; margin:114px 0 0 136px}
	.hqColor_1 .t_1 img{ width:159px; height:33px}
	.hqColor_1 .t_2{ width:200px; margin:159px 0 0 119px; font-size:14px; line-height:18px}
	.hqColor_1 .buyBtn{ width:74px; height:24px; border-radius:3px; font-size:14px; line-height:24px; margin:234px 0 0 178px}
	.hqColor_1 .box{ width:430px; margin:0 0 0 -215px}
	.hqColor_1 .img_1{ width:108px; height:234px; margin-top:71px}
	.hqColor_1 .img_1 img{ width:108px; height:234px}
	.hqColor_1 .img_2{ width:233px; height:67px}
	.hqColor_1 .img_2 img{ width:233px; height:67px}
	.hqColor_1 .img_3{ width:204px; height:95px; margin-left:226px}
	.hqColor_1 .img_3 img{ width:204px; height:95px}
	.hqColor_1 .img_4{ width:123px; height:232px; margin:94px 0 0 307px}
	.hqColor_1 .img_4 img{ width:123px; height:232px}
	.hqColor_1 .img_5{ width:233px; height:266px; margin:319px 0 0 190px}
	.hqColor_1 .img_5 img{ width:233px; height:216px}
	.hqColor_1 .img_6{ width:202px; height:268px; margin-top:294px}
	.hqColor_1 .img_6 img{ width:202px; height:218px}
	
	.hqColor_2{ height:900px}
	.hqColor_2 .con_box{ width:295px; height:180px; margin-top:9px}
	.hqColor_2 .tit_1{ font-size:24px; line-height:56px}
	.hqColor_2 .tit_2{ font-size:14px; line-height:18px}
	.hqColor_2_img{ height:850px; margin-top:132px}
	.hqColor_2_img ul{ width:360px; margin:0 0 0 -180px}
	.hqColor_2_img li{ width:120px; height:20px; padding-top:65px; margin-bottom:41px; font-size:14px; line-height:20px; background-size:50px 1700px; background-position:center 0}
	.hqColor_2_img .icon_2{ background-position:center -100px}
	.hqColor_2_img .icon_3{ background-position:center -200px}
	.hqColor_2_img .icon_4{ background-position:center -300px}
	.hqColor_2_img .icon_5{ background-position:center -400px}
	.hqColor_2_img .icon_6{ background-position:center -500px}
	.hqColor_2_img .icon_7{ background-position:center -600px}
	.hqColor_2_img .icon_8{ background-position:center -700px}
	.hqColor_2_img .icon_9{ background-position:center -800px}
	.hqColor_2_img .icon_10{ background-position:center -900px}
	.hqColor_2_img .icon_11{ background-position:center -1000px}
	.hqColor_2_img .icon_12{ background-position:center -1100px}
	.hqColor_2_img .icon_13{ background-position:center -1200px}
	.hqColor_2_img .icon_14{ background-position:center -1300px}
	.hqColor_2_img .icon_15{ background-position:center -1400px}
	.hqColor_2_img .icon_16{ background-position:center -1500px}
	.hqColor_2_img .icon_17{ background-position:center -1600px}
	
	.hqColor_3{ height:400px}
	.hqColor_3 .con_box{ width:290px; height:180px; margin-top:-10px}
	.hqColor_3 .tit_1{ font-size:24px; line-height:46px}
	.hqColor_3 .tit_2{ font-size:14px; line-height:22px}
	.hqColor_3_img{ height:243px}
	.hqColor_3_img img{ width:430px; height:243px; margin:0 0 0 -215px}
	
	.hqColor_4{ height:633px}
	.hqColor_4 .con_box{ width:300px; height:180px; margin-top:8px}
	.hqColor_4 .tit_1{ font-size:24px; line-height:46px}
	.hqColor_4 .tit_2{ font-size:14px; line-height:22px}
	.hqColor_4_img{ height:461px; margin-top:172px}
	.hqColor_4_img img{ width:320px; height:461px}
	
	.hqColor_5{ height:400px}
	.hqColor_5 .con_box{ width:300px; height:180px; margin-top:43px}
	.hqColor_5 .tit_1{ font-size:24px; line-height:46px}
	.hqColor_5 .tit_2{ font-size:14px; line-height:22px}
	
	.hqColor_chage_5{ width:306px}
	.hqColor_chage_5 .img_box{ width:306px; height:161px; margin:162px 0 0 0}
	.hqColor_chage_5 .img_box img{ width:306px; height:161px}
	.hqColor_chage_5 .chage{ width:300px; margin:6px 0 0 75px}
	.hqColor_chage_5 li{ width:100px; height:80px; margin-left:-53px}
	.hqColor_chage_5 li .subtit{ width:100px; height:15px}
	.hqColor_chage_5 li .subtit .t_1{ font-size:8px; line-height:12px}
	.hqColor_chage_5 li a, .hqColor_chage_5 li .cur{ width:25px; height:25px}
	.hqColor_chage_5 li .co_1{ background-position:0 -50px}
	.hqColor_chage_5 li .co_2{ background-position:0 -100px}
	.hqColor_chage_5 li .co_3{ background-position:0 -150px}
	.hqColor_chage_5 li .co_4{ background-position:0 -200px}
	.hqColor_chage_5 li .co_5{ background-position:0 -250px}
	.hqColor_chage_5 li .co_6{ background-position:0 -300px}
	
	.hqColor_6{ height:550px}
	.hqColor_6 .con_box{ width:290px; height:160px; margin-top:25px}
	.hqColor_6 .tit_1{ font-size:24px; line-height:32px; padding-bottom:7px}
	.hqColor_6 .tit_2{ font-size:14px; line-height:22px}
	.hqColor_6_img{ height:365px}
	.hqColor_6_img .img_box_1, .hqColor_6_img .img_box_2{ width:430px; height:180px; margin:0 0 0 -215px}
	.hqColor_6_img .img_box_2{ margin-top:185px}
	.hqColor_6_img img{ width:375px; height:180px}
	
	.hqColor_7{ height:604px}
	.hqColor_7 .con_box{ width:290px; height:160px; margin-top:31px}
	.hqColor_7 .tit_1{ font-size:24px; line-height:32px; padding-bottom:7px}
	.hqColor_7 .tit_2{ font-size:14px; line-height:22px}
	.hqColor_7_img_m{ display:block}
	.hqColor_7_img{ display:none}

	.hqColor_8{ height:510px}
	.hqColor_8 .con_box{ height:60px; margin-top:17px}
	.hqColor_8 .tit_1{ font-size:24px; line-height:32px; padding-bottom:7px}
	.hqColor_8 .tit_2{ font-size:14px; line-height:26px}
	.hqColor_8_img{ height:450px; padding-top:5px}
	.hqColor_8_img .img_box{ width:430px; height:450px; margin:0 0 0 -215px}
	.hqColor_8_img .img_box img{ width:480px; height:420px}
	
	.hqColor_9{ height:380px}
	.hqColor_9 .con_box{ width:290px; height:150px; margin-top:17px}
	.hqColor_9 .tit_1{ font-size:24px; line-height:32px; padding-bottom:7px}
	.hqColor_9 .tit_2{ font-size:14px; line-height:22px; padding-bottom:11px}
	.hqColor_9 a{ font-size:12px}
	.hqColor_9_img{ width:100%; height:210px; padding-top:2px}
	.hqColor_9_img img{ width:315px; height:164px}
}