/*初始化页面*/
html,body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    min-height: 100%;
    position: absolute;
    text-align: center;
    background-color: #666;
    font-family: "Microsoft YaHei";
}
a{text-decoration: none;}
img{border: none;}
ul{margin: 0px;padding: 0px;}
li{list-style: none;}
em{font-style: normal;}
/*总框架容器*/
#h5-dx{
    display: block;
    width: 100%;
    height: 2225px;
    max-width: 420px;
    margin: 0px auto;
    position: relative;
    background-size: 420px auto;
    background-position: top center;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    overflow: hidden;
}
/*动画模块1*/
.mk1{
    width: 100%;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 380px;
}
.mk1-sun{
    width: 90px;
    height: 90px;
    display: block;
    top: -10px;
    right: -10px;
    position: absolute;
    animation: dh-1 12s infinite;
    -webkit-animation: dh-1 12s infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}
@keyframes dh-1{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes dh-1{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.mk1-cloud{
    display: block;
    position: absolute;
}
.mk1-cloud-01{
    width: 60px;
    height: auto;
    top: 10px;
    right: -100%;
    animation: dh-2 18s infinite linear;
    -webkit-animation: dh-2 18s infinite linear;
}
.mk1-cloud-02{
    width: 100px;
    height: auto;
    top: 20px;
    right: -100%;
    animation: dh-3 26s infinite linear;
    -webkit-animation: dh-3 26s infinite linear;
}
.mk1-cloud-03{
    width: 80px;
    height: auto;
    top: 30px;
    right: -100%;
    animation: dh-2 12s infinite linear;
    -webkit-animation: dh-2 12s infinite linear;
}
.mk1-cloud-04{
    width: 90px;
    height: auto;
    top: 35px;
    right: -90px;
    animation: dh-4 6s infinite linear;
    -webkit-animation: dh-4 6s infinite linear;
}
@keyframes dh-2{
    0%{right: -100%;}
    100%{right: 150%; display: none;}
}
@-webkit-keyframes dh-2{
    0%{right: -100%;}
    100%{right: 150%; display: none;}
}
@keyframes dh-3{
    0%{right: -100%;}
    50%{right: -100%;}
    100%{right: 150%; display: none;}
}
@-webkit-keyframes dh-3{
    0%{right: -100%;}
    50%{right: -100%;}
    100%{right: 150%; display: none;}
}
@keyframes dh-4{
    0%{right: -100px;}
    100%{right: 120%; display: none;}
}
@-webkit-keyframes dh-4{
    0%{right: -100px;}
    100%{right: 120%; display: none;}
}
/*动画模块2*/
.mk2{
    width: 100%;
    height: 400px;
    display: block;
    position: relative;
    overflow: hidden;
}
.mk2-fc{
    display: block;
    position: absolute;
}
.mk2-fck{
    top: 0px;
    right: 55px;
    width: 215px;
    height: auto;
    z-index: 128;
}
.mk2-fcb{
    width: 62px;
    height: auto;
    right: 49px;
    top: 100px;
    z-index: 72;
}
.mk2-fcd{
    width: 67px;
    height: auto;
    z-index: 64;
    right: 49px;
    top: 132px;
}
.mk2-fcw-01{
    width: 24px;
    height: auto;
    z-index: 96;
    right: 65px;
    top: 152px;
    animation: dh-5 3s infinite linear;
    -webkit-animation: dh-5 3s infinite linear;
}
@keyframes dh-5{
    0%{
        right: 66px;
        top: 152px;
    }
    100%{
        right: 124px;
        top: 120px;
    }
}
@-webkit-keyframes dh-5{
    0%{
        right: 65px;
        top: 152px;
    }
    100%{
        right: 124px;
        top: 120px;
    }
}
.mk2-fcw-02{
    width: 24px;
    height: auto;
    z-index: 96;
    right: 65px;
    top: 152px;
}
/*画布效果*/
#gtc{
    width: 420px;
    height: 2225px;
    top: 0px;
    left: 0px;
    position: absolute;
    margin: auto;
}
/*汽车动画效果*/
.g-car{
    top: 350px;
    right: -140px;
    width: 110px;
    height: 110px;
    position: absolute;
    display: block;
    animation: gcar-box 15s infinite linear;
    -webkit-animation: gcar-box 15s infinite linear;
    background-image: url(../img/gl-car.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 64;
}
@keyframes gcar-box{
    0%{
        top: 350px;
        right: -140px;
        background-image: url(../img/gl-car.png);
    }
    10%{
        top: 470px;
        right: 200px;
        width: 112px;
        height: 112px;
        background-image: url(../img/gl-car.png);
    }
    15%{
        top: 560px;
        right: 340px;
        width: 116px;
        height: 116px;
        background-image: url(../img/gl-car.png);
    }
    22%{
        top: 780px;
        right: 365px;
        width: 120px;
        height: 120px;
        background-image: url(../img/gl-car.png);
    }
    22.01%{
        background-image: url(../img/gr-car.png);
    }
    26%{
        top: 880px;
        right: 270px;
        width: 124px;
        height: 124px;
        background-image: url(../img/gr-car.png);
    }
    30%{
        top: 925px;
        right: 140px;
        width: 138px;
        height: 138px;
        background-image: url(../img/gr-car.png);
    }
    32%{
        top: 970px;
        right: 70px;
        width: 140px;
        height: 140px;
        background-image: url(../img/gr-car.png);
    }
    37%{
        top: 1100px;
        right: -55px;
        width: 142px;
        height: 142px;
        background-image: url(../img/gr-car.png);
    }
    39%{
        top: 1170px;
        right: -65px;
        width: 142px;
        height: 142px;
        background-image: url(../img/gr-car.png);
    }
    39.01%{
        background-image: url(../img/gl-car.png);
    }
    42.5%{
        top: 1300px;
        right: -5px;
        width: 142px;
        height: 142px;
        background-image: url(../img/gl-car.png);
    }
    44.5%{
        top: 1340px;
        right: 40px;
        width: 152px;
        height: 152px;
        background-image: url(../img/gl-car.png);
    }
    49%{
        top: 1390px;
        right: 200px;
        width: 164px;
        height: 164px;
        background-image: url(../img/gl-car.png);
    }
    53%{
        top: 1480px;
        right: 285px;
        width: 168px;
        height: 168px;
        background-image: url(../img/gl-car.png);
    }
    57%{
        top: 1600px;
        right: 330px;
        width: 168px;
        height: 168px;
        background-image: url(../img/gl-car.png);
    }
    57.01%{
        top: 1600px;
        right: 330px;
        width: 168px;
        height: 168px;
        background-image: url(../img/gr-car.png);
    }
    61%{
        top: 1780px;
        right: 290px;
        width: 174px;
        height: 174px;
        background-image: url(../img/gr-car.png);
    }
    68.5%{
        top: 2100px;
        right: 50px;
        width: 185px;
        height: 185px;
        background-image: url(../img/gr-car.png);
    }
    100%{
        top: 2100px;
        right: 50px;
        width: 185px;
        height: 185px;
        background-image: url(../img/gr-car.png);
    }
}
@-webkit-keyframes gcar-box{
    0%{
        top: 350px;
        right: -140px;
        background-image: url(../img/gl-car.png);
    }
    10%{
        top: 470px;
        right: 200px;
        width: 112px;
        height: 112px;
        background-image: url(../img/gl-car.png);
    }
    15%{
        top: 560px;
        right: 340px;
        width: 116px;
        height: 116px;
        background-image: url(../img/gl-car.png);
    }
    22%{
        top: 780px;
        right: 365px;
        width: 120px;
        height: 120px;
        background-image: url(../img/gl-car.png);
    }
    22.01%{
        background-image: url(../img/gr-car.png);
    }
    26%{
        top: 880px;
        right: 270px;
        width: 124px;
        height: 124px;
        background-image: url(../img/gr-car.png);
    }
    30%{
        top: 925px;
        right: 140px;
        width: 138px;
        height: 138px;
        background-image: url(../img/gr-car.png);
    }
    32%{
        top: 970px;
        right: 70px;
        width: 140px;
        height: 140px;
        background-image: url(../img/gr-car.png);
    }
    37%{
        top: 1100px;
        right: -55px;
        width: 142px;
        height: 142px;
        background-image: url(../img/gr-car.png);
    }
    39%{
        top: 1170px;
        right: -65px;
        width: 142px;
        height: 142px;
        background-image: url(../img/gr-car.png);
    }
    39.01%{
        background-image: url(../img/gl-car.png);
    }
    42.5%{
        top: 1300px;
        right: -5px;
        width: 142px;
        height: 142px;
        background-image: url(../img/gl-car.png);
    }
    44.5%{
        top: 1340px;
        right: 40px;
        width: 152px;
        height: 152px;
        background-image: url(../img/gl-car.png);
    }
    49%{
        top: 1390px;
        right: 200px;
        width: 164px;
        height: 164px;
        background-image: url(../img/gl-car.png);
    }
    53%{
        top: 1480px;
        right: 285px;
        width: 168px;
        height: 168px;
        background-image: url(../img/gl-car.png);
    }
    57%{
        top: 1600px;
        right: 330px;
        width: 168px;
        height: 168px;
        background-image: url(../img/gl-car.png);
    }
    57.01%{
        top: 1600px;
        right: 330px;
        width: 168px;
        height: 168px;
        background-image: url(../img/gr-car.png);
    }
    61%{
        top: 1780px;
        right: 290px;
        width: 174px;
        height: 174px;
        background-image: url(../img/gr-car.png);
    }
    68.5%{
        top: 2100px;
        right: 50px;
        width: 185px;
        height: 185px;
        background-image: url(../img/gr-car.png);
    }
    100%{
        top: 2100px;
        right: 50px;
        width: 185px;
        height: 185px;
        background-image: url(../img/gr-car.png);
    }
}
/*公路遮罩效果*/
.zzc-01a{
    width: 45px;
    height: auto;
    display: block;
    position: absolute;
    z-index: 128;
    top: 474px;
    right: 83px;
}
.zzc-01b{
    width: 62px;
    height: auto;
    display: block;
    position: absolute;
    z-index: 128;
    top: 467px;
    right: 13px;
}
.zzc-02a{
    width: 246px;
    height: auto;
    display: block;
    position: absolute;
    z-index: 128;
    top: 967px;
    left: 38px;
}
/*动画模块3*/
.mk3{
    width: 100%;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 1100px;
    left: 0px;
}
.mk3-ca{
    display: block;
    position: absolute;
    z-index: 256;
    opacity: 1.0;
}
.mk3-ca-01{
    width: 20px;
    height: auto;
    left: 117px;
    top: 56px;
    animation: mk3-ca 2s infinite linear;
    -webkit-animation: mk3-ca 2s infinite linear;
}
.mk3-ca-02{
    left: 166px;
    top: 78px;
    width: 16px;
    height: auto;
    animation: mk3-ca 4s infinite linear;
    -webkit-animation: mk3-ca 4s infinite linear;
}
.mk3-ca-03{
    left: 237px;
    top: 37px;
    width: 12px;
    height: auto;
    animation: mk3-ca 3s infinite linear;
    -webkit-animation: mk3-ca 3s infinite linear;
}
@keyframes mk3-ca{
    0%{opacity: 1.0;}
    50%{opacity: 1.0;}
    51%{opacity: 0;}
    100%{opacity: 0;}
}
@-webkit-keyframes mk3-ca{
    0%{opacity: 1.0;}
    50%{opacity: 1.0;}
    51%{opacity: 0;}
    100%{opacity: 0;}
}

/*网页链接效果*/
#h5dx-link{
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 512;
}
#h5dx-link > a{
    padding: 0px 0px 0px 45px;
    position: absolute;
}
#h5dx-link > a > p{
    display: block;
    margin: 0px auto;
    padding: 5px 10px;
    background-color: #ff8000;;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    border-color: #ff6c00;
    animation: h5-link 2.5s infinite linear;
    -webkit-animation: h5-link 2.5 infinite linear;
}
#h5dx-link > a:before{
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #ffff41;
    position: absolute;
    top: 10px;
    left: 10px;
    border-color: #ff6c00;
    border-style: double;
    animation: h5-link 2.0s infinite linear;
    -webkit-animation: h5-link 2.0 infinite linear;
}
@keyframes h5-link{
    0%{color: #000; background-color: #ff8000;border-style: double;}
    50%{color: #666; background-color: #ffff41;border-style: dotted;}
    100%{color: #000; background-color: #ff8000;border-style: double;}
}
@-webkit-keyframes h5-link{
    0%{color: #000; background-color: #ff8000;border-style: double;}
    50%{color: #666; background-color: #ffff41;border-style: dotted;}
    100%{color: #000; background-color: #ff8000;border-style: double;}
}
.h5-link-1{
    top: 90px;
    left: 90px;
}
.h5-link-2{
    top: 140px;
    left: 90px;
}
.h5-link-3{
    top: 480px;
    left: 120px;
}
.h5-link-4{
    top: 540px;
    left: 120px;
}
.h5-link-5{
    top: 600px;
    left: 120px;
}
.h5-link-6{
    top: 1800px;
    left: 170px;
}
.h5-link-7{
    top: 2030px;
    left: 100px;
}
.copyright{
bottom: 85px;  
text-align:center;
margin:0 auto;
width: 100%;
color:#0000;
position: absolute;
z-index:999;
font-weight:bold;
webkit-background-clip: text;
letter-spacing:2px;/*文字间距*/
-webkit-text-stroke: 0.5px AliceBlue;/*描0.5的白边*/
}
.copyright2{
bottom: 60px;  
text-align:center;
margin:0 auto;
width: 100%;
color:#0000;
position: absolute;
z-index:999;
font-weight:bold;
webkit-background-clip: text;
letter-spacing:5px;/*文字间距*/
-webkit-text-stroke: 0.5px AliceBlue;/*描0.5的白边*/
}
    

/*网页页脚部署*/
.zzc-foot{
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    z-index: 128;
    left: 0px;
    bottom: 0px;
}
.foot-mk{
    width: 100%;
    height: 300px;
    position: absolute;
    z-index: 256;
    overflow: hidden;
    left: 0px;
    bottom: 0px;
}
.foot-mk-ico{
    position: absolute;
    display: block;
}
.foot-mk-ico-01{
    width: 7px;
    height: auto;
    top: 50px;
    left: 170px;
    animation: foot-mk-ca 2s infinite linear;
    -webkit-animation: foot-mk-ca 2s infinite linear;
}
.foot-mk-ico-02{
    width: 5px;
    height: auto;
    top: 70px;
    left: 160px;
    animation: foot-mk-ca 3s infinite linear;
    -webkit-animation: foot-mk-ca 3s infinite linear;
}
.foot-mk-ico-03{
    width: 8px;
    height: auto;
    top: 90px;
    left: 180px;
    animation: foot-mk-ca 4s infinite linear;
    -webkit-animation: foot-mk-ca 4s infinite linear;
}
.foot-mk-ico-04{
    width: 8px;
    height: auto;
    top: 90px;
    left: 160px;
    animation: foot-mk-ca 3.5s infinite linear;
    -webkit-animation: foot-mk-ca 3.5s infinite linear;
}
.foot-mk-ico-05{
    width: 6px;
    height: auto;
    top: 120px;
    left: 170px;
    animation: foot-mk-ca 2.5s infinite linear;
    -webkit-animation: foot-mk-ca 2.5 infinite linear;
}
@keyframes foot-mk-ca{
    0%{opacity: 1.0;}
    50%{opacity: 1.0;}
    51%{opacity: 0;}
    100%{opacity: 0;}
}
@-webkit-keyframes foot-mk-ca{
    0%{opacity: 1.0;}
    50%{opacity: 1.0;}
    51%{opacity: 0;}
    100%{opacity: 0;}
}