html {
    font-size: 1em;
    font-family:"微软雅黑",arial;
}

body{
    width:100%;
    margin:0px;
    padding:0px;
    zoom:1;
   overflow-x:hidden;

}

.container {
    width: 100%;
    min-width: 1024px;
    height:1057px;
    max-width:1920px;
    margin: 0 auto;
    height: auto;

}

.title{
    width: 27%;
    margin: 4rem auto 0;
   animation: bounceIn 2s  ease 2s 2;
    -webkit-animation: bounceIn 2s  ease 2s 2;
    -moz-animation: bounceIn 2s  ease 2s 2;
    -ms-animation: bounceIn 2s  ease 2s 2;
    -o-animation: bounceIn 2s  ease 2s 2;

}
.cloud-logo{
   /* height:8rem;*/
    position: relative;
    width: 73.3%;
    margin:0px;
   padding: 0px;
}
#cloud{

   /* width: 29.4rem;*/
    width:100%;
    position: relative;
    /*left: 4rem;*/
    left: 16%;
    top:0rem;
    opacity:0;
    animation: bounce 500ms  500ms 1 forwards;
    -webkit-animation: bounce 500ms  500ms 1 forwards;
    -moz-animation: bounce 500ms  500ms 1 forwards;
    -ms-animation: bounce 500ms  500ms 1 forwards;
    -o-animation: bounce 500ms  500ms 1 forwards;

}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce {
    0%{
        transform: translate(0,-20rem);
        opacity:1;

    }
    100%{
        transform: translate(0,0rem);
        opacity:1;

    }
}


#logo{
    position: absolute;
    /*position: relative;*/
   /* left: 56rem;
    top: 11rem;*/
    left: 57%;
    top: 33%;
    width: 23%;
    opacity: 0;

    animation: logoScal 500ms ease 1000ms 1 forwards ;
    -webkit-animation: logoScal 500ms ease 1000ms 1 forwards ;
    -moz-animation: logoScal 500ms ease 1000ms 1 forwards ;
    -ms-animation: logoScal 500ms ease 1000ms 1 forwards ;
    -o-animation: logoScal 500ms ease 1000ms 1 forwards ;
}
#logo img{

    /* height: 5.25rem;*/
   /* position:absolute;*/
    /* left: 13rem;
     top: -5rem;*/
    width: 100%;
}
.logo-effect{
    position: absolute;
    left: 57%;
    top: 33%;
}
.logoAnimation {
    animation: logoScal 500ms ease;
}
@keyframes  logoScal{
    0%{
        transform:scale(0.5);
        opacity: 1;
    }
    100%{
        transform:scale(1);
        opacity: 1;
    }

}


#logo-text:after{
    position: absolute;
    display: block;
    content: '';
    width: 5rem;
    height: 100%;
    left:  0px;
    top: 0;
    /*background-color: #00FFAA;*/
    /*border:1px solid blue;*/
    overflow: hidden;
    /*background-image: url(../images/over.png);*/
   background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,204,0.5)50%, rgba(255,255,255,0)100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,204,0.5)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,204,0.5)50%, rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,204,0.5)50%, rgba(255,255,255,0)100%);
    background: linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,204,0.5)50%, rgba(255,255,255,0)100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,204,0.5)50%, rgba(255,255,255,0)100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    transform: skewX(-25deg);
    -webkit-animation: gradient 3s  1  3s forwards;
    -o-animation: gradient 2s   2;
    -ms-animation: gradient 2s   2;
    animation: gradient 2s   2;
    opacity: 0;
}
@keyframes gradient {
    0%{
         left: 0%;
         opacity: 0;
     }

    100%{
        left:80%;
        opacity: 1;
    }
}
@-webkit-keyframes gradient {
    0%{
        left: 0%;
        opacity: 1;
    }

    100%{
        left: 80%;
        opacity: 1;
    }
}

#canvas-1{
    -webkit-animation: myOpacity1  2s infinite ease-in-out alternate;
    position: relative;
    top: -5rem;
    left: -0.9rem;
    width:6.25rem;
    height:6.25rem;

}

#canvas-2{
    -webkit-animation: myOpacity2  2s infinite ease-in-out alternate;
    position: relative;
    top: -11.3rem;
    left: -0.9rem;
    width: 6.25rem;
    height: 6.25rem;
}

@keyframes myOpacity1{
    0%{
        opacity:0;

    }
    100%{
        opacity:1;

    }
}

@keyframes  myOpacity2{
    0%{
        opacity:0;

    }
    100%{
        opacity:1;

    }
}
#logo-text{
   /* position: relative;
    top: -5.1rem;*/
   /* width: 40.175rem;*/
    width:100%;
   /* height: 8rem;*/
   /* left:-1000%;*/

    position: relative;
    top:0rem;
    margin-top: 1%;
    /*top: 17.9rem;*/
    animation: textMove 500ms ease;
    -webkit-animation: textMove 500ms ease;
    -moa-animation: textMove 500ms ease;
    -ms-animation: textMove 500ms ease;
    -o-animation: textMove 500ms ease;
    opacity:1;
}
.test-over{
    width: 40.175rem;
    height: 8rem;
    background:url(../images/over.png) no-repeat;
}
#logo-text img{
    width:100%;
    /*width: 30rem;*/
    /*height: 8rem;*/

}
@keyframes textMove {
    0%{
       transform: translate(-1000%,0);
        opacity:0;
    }
    100%{
        transform: translate(0,0);
        opacity:1;
    }
}

@keyframes bounceIn {
   /* from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
*/
    0% {
        opacity: 0;
        transform: scale(.8, .8);
    }

    20% {
        transform: scale(1, 1);
    }

    40% {
        transform: scale(.9, .9);
    }

    60% {
        opacity: 1;
        transform: scale(1.03, 1.03);
    }

    80% {
        transform: scale(.97, .97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.shine{
    width:1rem;
    height:1rem;
    border-radius: 50%;

    position:absolute;
    transform:scale(1.2);
    background: radial-gradient(#ffffcc 55%,#fff 30%);
    animation:shine 3s linear infinite;
    -webkit-animation:shine 3s linear infinite;
    -ms-animation:shine 3s linear infinite;
    -moz-animation:shine 3s linear infinite;
    -o-animation:shine 3s linear infinite;
    opacity: 0;
    top: 1.8rem;
    left: 1.3rem;
    z-index:-200;
}
@keyframes shine {
    0%{
      transform: scale(0.5);
        opacity: 0;
    }
    75%{
        transform: scale(1.0);
        opacity: 1;
    }
    87.5%{
        transform: scale(1.5);
        opacity: 1;
    }
    100%{
        transform: scale(2);
        opacity: 1;
    }
    
}
.star{
    width: 6rem;
    height: 6rem;
    -webkit-animation: starRetote 3s linear   infinite ;
    -moz-animation: starRetote 3s linear   infinite ;
    -o-animation:starRetote 3s linear   infinite ;
    animation: starRetote 3s linear   infinite ;
    -ms-animation:starRetote 3s linear   infinite;
    position: absolute;
    left: -1.5rem;
    top: -1rem;
    opacity: 0;
  /*  border: 1px solid green;*/

}
#star1{
    position: relative;
    width: 3px;
    height: 6rem;
    /*background: green;*/
    background:#fff;
    top: 0rem;
    left: 3rem;

}
#star2{
    position: relative;
    left: 3rem;
    top: -6rem;
    width: 3px;
    height: 6rem;
   /* background: green;*/
    background:#fff;
    transform: rotate(90deg);

}
@keyframes starScale {
    0%{
        transform:scale(0);
        transform-origin: 50% 50% 0;
        opacity: 0;
    }
    50%{
        transform: scale(0.5);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes starRetote {
    0%{
        transform:rotate(0deg);

        transform-origin: 50% 50%;
        opacity: 0;
    }
   75%{
       transform:rotate(0deg);

       transform-origin: 50% 50%;
       opacity: 0;
   }
    75.1%{
        transform:rotate(0deg);

        transform-origin: 50% 50%;
        opacity: 1;
    }

    /*61%{
        transform: rotate(-22deg);
        opacity: 0.6;

    }*/
    100%{
        transform: rotate(-36deg);
        opacity: 0;
    }
}
.re-star{
    width: 5rem;
    height: 5rem;
    -webkit-animation: restarRetote 3s linear  infinite forwards;
    -o-animation: restarRetote 3s linear  infinite forwards;
    -moz-animation: restarRetote 3s linear  infinite forwards;
    animation: restarRetote 3s linear  infinite forwards;
    -ms-animation:-ms-restarRetote 3s linear  infinite forwards;
    position: absolute;
    left: -1rem;
    top: -0.5rem;
    transform: rotate(-15deg);
    opacity: 0;
    /*border: 1px solid green;*/
}
#re-star1 {
    position: relative;
    width: 2px;
    height: 5rem;
   /* background-color: red;*/
    background:#fff;
    top: 0rem;
    left: 2.5rem;
}

#re-star2 {
    position: absolute;
    left: 2.5rem;
    top: -0rem;
    width: 2px;
    height: 5rem;
   /* background-color: red;*/
    background:#fff;
    transform: rotate(90deg);
}


@keyframes restarRetote {
    0%{
        transform:rotate(-15deg);
        transform-origin: 50% 50%;
        opacity: 0;
    }
    75%{
        transform:rotate(-15deg);
        transform-origin: 50% 50%;
        opacity: 0.5;
    }
    75.1%{
        transform:rotate(-15deg);
        transform-origin: 50% 50%;
        opacity: 1;
    }
   /* 22%{
        transform: rotate(0deg) translate(2px,1px);

    }*/
  /* 61%{
        transform: rotate(26deg) translate(4px,2px);
        opacity: 0.6;
    }*/
    100%{
    transform:rotate(52deg) translate(6px,-0px);
        opacity: 0;
    }
}
@-ms-keyframes  -ms-restarRetote {
    0%{
        transform:rotate(-15deg);
        transform-origin: 50% 50%;
        opacity: 0;
    }
    75%{
        transform:rotate(-15deg);
        transform-origin: 50% 50%;
        opacity: 0.5;
    }
    75.1%{
        transform:rotate(-15deg);
        transform-origin: 50% 50%;
        opacity: 1;
    }
    /* 22%{
         transform: rotate(0deg) translate(2px,1px);

     }*/
    /* 61%{
          transform: rotate(26deg) translate(4px,2px);
          opacity: 0.6;
      }*/
    100%{
        transform:rotate(52deg) translate(6px,-0px);
        opacity: 0;
    }
}
.lever {
    position: relative;
    /*display: inline-block;*/
   /* width:28.125rem;
    height:25rem;*/
    top: -9.3rem;
    height:0;

}
.link-list{
    position: relative;
    margin-top:13px;
    margin-left: 29%;
    white-space: nowrap;

}

.list1{
    margin-left: 24%;
    margin-top:3rem;
}
.list2{
    margin-left:24%;
}
.list3{
    margin-left:32%;
}
.red-link{
    display:inline-block;
    border:2px solid #e60012;
    border-radius: 2rem;
    min-width:2rem;
    font-size: 1.7rem;
    margin: 10px;
    /* padding: 0.2rem 3rem;*/
    letter-spacing: 2px;
    position: relative;
    font-weight: bold;
    color: #e60012;
    text-decoration: none;
    cursor: pointer;
    z-index:200;
    width: 230px;
    text-align: center;
    vertical-align: middle;
    height: 46px;
}
.red-link span{
    position: relative;
    top: 3px;
    letter-spacing: 7px;
}
.red-link:hover{
    color:white;
    background-color: #e60012;

}
/*.lred{*/
  /*padding: 0.2rem 3.8rem;  */
/*}*/
a.disabled:hover{
    color:#ACA899;
    border:1px solid #DDD;
    background-color:#F5F5F5;
}
.disabled{
    border:1px solid #DDD;
    background-color:#F5F5F5;
    color:#ACA899;
}
.red-back,.red-button{
    position: absolute;
    display: inline-block;
    top: 0rem;
    left:0rem;
    width:100%;
    height: 100%;
    /*border: 1px solid green;*/
    border-radius: 2rem;
   /* background:red;*/
    z-index:-100;

}
/*.red-button{
    border: 1px solid green;


}
.red-back{
    border: 1px solid blue;
}*/
.backScal{
animation:cursorScal 800ms linear  infinite ;
    -webkit-animation:cursorScal 800ms linear  infinite ;
    -moz-animation:cursorScal 800ms linear  infinite ;
    -ms-animation:cursorScal 800ms linear  infinite ;
    -o-animation:cursorScal 800ms linear  infinite ;
background:#e9202f;
border:none;
cursor:pointer;
}
.buttonScal{
    animation:buttonScal 800ms linear  infinite ;
    -webkit-animation:buttonScal 800ms linear  infinite ;
    -ms-animation:buttonScal 800ms linear  infinite ;
    -moz-animation:buttonScal 800ms linear  infinite ;
    -o-animation:buttonScal 800ms linear  infinite ;
    background:#e9202f;
    border:none;
    cursor:pointer;
}
/*red-button:hover{
    cursor:pointer;
    background: red;
}
.red-back:hover{
    background-color:#e9202f;
    border:none;
    cursor:pointer;
    animation:cursorScal 1s linear  infinite alternate;
    background: red;
}*/
/*.red-button:hover{
  border:none;
    animation:cursorScal 3000ms linear  infinite alternate;
}*/

@keyframes buttonScal {
    0%{

        transform: scaleX(1);
    }
    50%{

        transform: scaleX(1.05);
    }
    100%{

        transform: scaleX(0.95);
    }

}
@keyframes cursorScal {
    0%{

        transform: scaleX(1);
        opacity: 1;
    }
    50%{

        transform: scaleX(1.1);
        opacity: 0.3;
    }
    100%{

        transform: scaleX(1);
        opacity: 0.5;
    }

}
.product{
    display:block;
   position: relative;
    width:100%;
    min-width:800px;
    max-width: 1920px;
    margin: 0px;
    padding: 0px;
    top:-7rem;
    /*white-space: nowrap;*/
   /* overflow-x:hidden;*/

}
.right-spots{
  position:absolute;
    z-index: 200;
    opacity:0.8;

}
.right-spots img{
    position:relative;
}


#left-spot1,#spot1{
    animation: spot1Move 10s cubic-bezier(0,.27,.32,1) infinite;
    -webkit-animation: spot1Move 10s cubic-bezier(0,.27,.32,1) infinite;
    -moz-animation: spot1Move 10s cubic-bezier(0,.27,.32,1) infinite;
    -ms-animation: spot1Move 10s cubic-bezier(0,.27,.32,1) infinite;
    -o-animation: spot1Move 10s cubic-bezier(0,.27,.32,1) infinite;
    opacity: 0.8;
}
#left-spot2,#left-spot3,#left-spot4, #spot2,#spot3,#spot4{
    position: relative;
    animation: spot2Move 10s infinite alternate;
    -webkit-animation: spot2Move 10s infinite alternate;
    -moz-animation: spot2Move 10s infinite alternate;
    -ms-animation: spot2Move 10s infinite alternate;
    -o-animation: spot2Move 10s infinite alternate;

}
.rolls{

    position: relative;
    top: -4rem;
    left: 207%;
}
.rollspots{
    animation:spot3Move 5s infinite alternate;
    -webkit-animation:spot3Move 5s infinite alternate;
    -ms-animation:spot3Move 5s infinite alternate;
    -o-animation:spot3Move 5s infinite alternate;
    -moz-animation:spot3Move 5s infinite alternate;
    opacity: 0.8;
}
@keyframes  spot3Move{
    0%{
      transform: rotate(20deg) scale(8);
    }
    20%{
        transform: rotate(40deg) scale(9);
    }
    50%{
        transform: rotate(141deg) scale(10);
    }
    100%{
        transform: rotate(500deg) scale(11);
        opacity: 0.5;
    }
}
@keyframes spot2Move {
    20%{
        transform: translate(10rem,10rem) scale(2);
    }
    50%{
        transform: scale(3) translate(6rem,4rem);
    }
    100%{
    transform: translate(15rem,15rem) scale(2);
}
}
@keyframes  spot1Move{
    20%{
        transform: scale(1) translate(5rem,1px);
    }
    50%{
        transform: scale(1.5)  translate(10rem,10px);
        opacity: 1;
    }
    100%{
        transform: scale(1)  translate(15rem,10px);
        opacity: 0.2;
    }

}

.left-spots{
    position:absolute;
    z-index: 200;
    left: 78%;
    opacity:0.8;
}
.left-spots img{
    position:relative;
}

.car{
    position: absolute;
    z-index: 288;
    top: 12.8rem;
    animation: carMove 10s linear infinite;
    -webkit-animation: carMove 10s linear infinite;
    -moz-animation: carMove 10s linear infinite;
    -ms-animation: carMove 10s linear infinite;
    -o-animation: carMove 10s linear infinite;
}
@keyframes carMove {
    0%{
        transform: translateX(-4rem);
    }
    100%{
        transform: translateX(120rem);
    }

}
#car{
    width: 14rem;
    position: absolute;

}
.roll{
    width: 1.4rem;
    position: absolute;
    top: 2.7rem;
    animation: roll 100ms infinite;
    -webkit-animation: roll 100ms infinite;
    -moz-animation: roll 100ms infinite;
    -ms-animation: roll 100ms infinite;
    -o-animation: roll 100ms infinite;

}
@keyframes roll {
    0% {
        transform: rotate(0deg);
    }
33% {
    transform: rotate(90deg);
}
66% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(270deg);
}
}
.extract-oil{
    position: relative;
    display: inline-block;
    /*top: -6.5rem;
    left: 0rem;*/
    width: 22%;
    top: 4rem;
}
.structure{
    position: relative;
    display: inline-block;
    left: 2rem;
    top: -0.5rem;
    /*left: 2rem;
    top: 0rem;*/
    /*float:left;*/
   /* width: 17.3rem;
    height: 14.56rem;*/
}
.structure img{
    width:15rem;
}
#ex-tree{
    position: relative;
    left: 25rem;
    top: 9.5rem;
}


.scene-oil{
    display: inline-block;
    position:relative;
    left: 19%;
    top: 9rem;
    width: 27%;
    z-index: 100;

}


.scene-oil .tower{
    left: -14%;
    top: 0;
    width: 10%;
    position: relative;
    display:inline-block;
}
.scene-oil .storage{
    z-index: 100;
    display: inline-block;
}
.storage{
    width: 58%;
}

#storageImg {
    width: 27%;

}
.storage-tube{
    position: relative;
    width: 37%;
    left: 4%;
    display:inline-block;
}
#storageTube{

    width:100%;

   /* position: relative;*/


}

.tubeCanvas{
    position:absolute;
    top:0rem;
    left:0rem;
    z-index:200;
    /*border: 1px solid green;*/
}
#tube1{
    top: -17%;
    left: -23%;
    width: 80%;
    height: 80%;

    /*border: 1px solid green;*/
}
#tube2{
    top: -28%;
    left: -7%;
    width: 80%;
    height: 80%;

    /*border: 1px solid green;*/
}
#tube3{
    top: -40%;
    left: 13%;
    width: 80%;
    height: 80%;

   /* border: 1px solid green;*/
}
#tube4{
    top: -14%;
    left: 17.5%;
    width: 80%;
    height: 80%;

    /*border: 1px solid green;*/
}

#fire{
    width: 49%;
    top: -27%;
    position: absolute;
    left: 11%;
    mix-blend-mode: multiply;
    animation: fireScal 300ms infinite alternate;
    -webkit-animation: fireScal 300ms infinite alternate;
    -moz-animation: fireScal 300ms infinite alternate;
    -ms-animation: fireScal 300ms infinite alternate;
    -o-animation: fireScal 300ms infinite alternate;
}
@keyframes fireScal {
    0%{
        transform: scaleY(1);
    }
    100%{
        transform: scaleY(1.1);
    }

}
.gradient{
  /* background: -webkit-linear-gradient(top, rgba(255,255,255,0)10%, rgba(255,207,0,0.8)30%,rgba(255,207,0,0.8)60%,rgba(255,219,0,0.5)70%, rgba(255,255,255,0)100%);
    background: linear-gradient(top, rgba(255,255,255,0)10%, rgba(255,207,0,0.8)30%,rgba(255,207,0,0.8)60%,rgba(255,219,0,0.5)70%, rgba(255,255,255,0)100%);*/
    background: -webkit-linear-gradient(top, rgba(255,255,255,0)10%, rgba(255,255,255,0.8)30%,rgba(255,255,255,0.8)60%,rgba(255,255,255,0.5)70%, rgba(255,255,255,0)100%);
    background: linear-gradient(top, rgba(255,255,255,0)10%, rgba(255,255,255,0.8)30%,rgba(255,255,255,0.8)60%,rgba(255,255,255,0.5)70%, rgba(255,255,255,0)100%);
   /* width: 17px;*/
    width:40px;
    height: 16px;
    position: absolute;
    /* border-radius: 50%; */
    top: 0px;
    /* border: 1px solid green; */
    /*transform: skewX(-20deg);*/
     animation: fireGradient 500ms infinite linear;
}
@keyframes fireGradient {
    0%{
        top: -16px;
        left: 10px;
       /* width: 34%;*/
        opacity: 0;
    }
    50%{
       /* width: 41%;*/
        top: -17px;
        left: 7px;
    }
    /*75%{
        width: 15px;
        top: -35px;
        left: 5px;
    }*/
    100%{
        /*width: 24%;*/
        top: -43px;
        left: 5px;

    }

}
@keyframes light{
    0%{}
    100%{    transform: translate(0%, -73%);}
}
#tower{
    width: 71%;
    position: relative;
    left: 0%;
}
.station{
    position: relative;
    float: right;
    width: 19%;
    display:inline-block;
    right: -10px;


}
.station-house{
    display: inline-block;
    /* background: url(..) no-repeat; */

    width: 100%;

    position: relative;
    background-size: 20.56rem 14.875rem;
    right: 0rem;
   /* float: right;*/
    top: 7rem;
    overflow:hidden;
    z-index: 100;

}
#station-img{
    /*width: 21rem;*/
    width: 95%;
    /*position: relative;
    right: 2rem;
    top: 12rem;
    float: right;
    z-index: 100;*/
}
.pump{
    /*position: relative;
    top: 3rem;
    left: 1.8rem;
    z-index: 60;*/
    position: absolute;
    top: 39%;
    left: 18%;
    width: 100%;
    height: 100%;
    z-index: -20;
}
.oil-station-1{
    position:relative;
    display:inline-block;
    width:16%;
    top: 6%;
    left:0%;
}
.oil-station-2{
    position:relative;
    display:inline-block;
    width: 18%;
    top: 12%;
    left: 0%;
}
.oil-station-3{
    position:relative;
    display:inline-block;
    width: 20%;
    top: 17%;
    left: -1%;
}
.station-1 {
    width: 100%;
}
.station-2 {
    width:100%;
}
.station-3 {
    width: 100%;

}
.point-1{
    position: absolute;
    top: 8%;
    left: 36%;
    width: 14%;
    animation: point1Move 1000ms linear infinite alternate;
}
.point-2{
    position: absolute;
    top: 7%;
    left: 36%;
    width: 15%;
    animation: point3Move 1000ms linear infinite alternate;
}
.point-3{
    width: 16%;
    position: absolute;
    top: 4%;
    left: 39%;
    animation: point3Move 1000ms linear infinite alternate;
}
@keyframes  point1Move{
    0%{
        transform: rotate(-13deg);
        transform-origin:0%  100%;
    }

    20%{
        transform: rotate(-18deg) ;
        transform-origin:0%  100%;
    }
    50%{

        transform: rotate(-29deg);
        transform-origin:0%  100%;
    }
    100%{
        transform: rotate(-77deg);
        transform-origin:0%  100%;
    }
}
@keyframes  point2Move{
    0%{
        transform: rotate(-0deg) translate(1px,-2px);
        transform-origin:50%  50%;
    }

    20%{
        transform:rotate(-18deg) translate(-5px,-5px);
    }
    50%{

        transform: rotate(-29deg) translate(-8px,-8px);
    }
    100%{
        transform: rotate(-58deg) translate(-6px,-14px);
    }
}
@keyframes  point3Move{
0%{
    /*transform:rotate(-0deg) translate(-2px,-2px);*/
    transform:rotate(-0deg);
    transform-origin:0%  100%;
}

    20%{
       /* transform: rotate(-18deg) translate(-10px,-7px);*/
        transform:rotate(-18deg);
        transform-origin:0%  100%;
    }
    50%{

       /* transform: rotate(-29deg) translate(-10px,-11px);*/
        transform:rotate(-29deg);
        transform-origin:0%  100%;
    }
    100%{
    /*transform:rotate(-58deg) translate(-14px,-22px);*/
        transform:rotate(-58deg);
        transform-origin:0%  100%;
    }
}
.small{
    display: inline-block;
}
.trees{
    position:relative;
    display:inline-block;
    left: 5%;
    width: 21%;
    z-index: 100;
    height: 100%;

}
.trees img{
    width: 3rem;

}
#tree1{
    width: 32%;
    /*top: 0rem;
    position: relative;
    left: -18%;*/
}
#tree2{
    width: 41%;
    top: -58%;
    left: 55%;
    position: absolute;
}
.last-section{
    position: relative;
    width:100%;
    top: -7rem;
    /*overflow:hidden;*/   /*有时候抖动需要加减次属性*/
}
.backImage{
    position: relative;
}
.backImage img{
    width:100%;
}
#snake{
    position: absolute;
    /*left: 8rem;
    top: 11rem;
    width: 1.439rem;
    height: 6rem;*/
    left: 8.5rem;
    top: 10.6rem;
    width: 1.5rem;
    height: 6rem;
    animation: snakeSkewX 1000ms  linear infinite;
    -webkit-animation: snakeSkewX 1000ms  linear infinite;
    -moz-animation: snakeSkewX 1000ms  linear infinite;
    -ms-animation: snakeSkewX 1000ms  linear infinite;
    -o-animation: snakeSkewX 1000ms  linear infinite;
}
#lever-1{
    position: absolute;
   /* left: 7.4rem;
    top: 5rem;
    width: 12.298rem;*/
    left: 7.9rem;
    top: 4.2rem;
    width: 13rem;
    animation: leverRatote 1000ms linear infinite;
    -webkit-animation: leverRatote 1000ms linear infinite;
    -moz-animation: leverRatote 1000ms linear infinite;
    -ms-animation: leverRatote 1000ms linear infinite;
    -o-animation: leverRatote 1000ms linear infinite;
}
.colum{
    height: 7.187rem;
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法： Chrome 21+ */
    display: flex; /* 新版本语法： Opera 12.1, Firefox 22+ */

    /*垂直伸缩*/
    /*老版本语法*/
    -webkit-box-align: end;  /*老版本*/
    -moz-box-align: end; /*混合版本语法*/
    -ms-flex-align: end; /*新版本语法 IE10*/
    -webkit-align-items: flex-end;
    align-items: flex-end;
    /*width: 1.625rem;
    top: 2.8rem;
    left: 18.8rem;*/
    width: 1.625rem;
    top: 2.8rem;
    /*left: 20.2rem;*/
    left: 20rem;
    border: 1px solid transparent;
    position: absolute;
    z-index: 100;
}
.subcolum{
    position: relative;
    width:100%;
    height:100%;
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法： Chrome 21+ */
    display: flex; /* 新版本语法： Opera 12.1, Firefox 22+ */

    /*垂直伸缩*/
    /*老版本语法*/
    -webkit-box-align: end;  /*老版本*/
    -moz-box-align: end; /*混合版本语法*/
    -ms-flex-align: end; /*新版本语法 IE10*/
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
#lever-2{
    position: relative;
   /* left: 22.2rem;
    top: 10.125rem;*/
   /* top: 12.125rem;
    width: 1.2rem;
    height: 11rem;*/
    top: 11rem;
    width: 1.3rem;
    height: 11rem;

   /* height: 11.688rem;*/
    animation: lever2tranY 1000ms linear infinite;
    -ms-animation: lever2tranY 1000ms linear infinite;
    -webkit-animation: lever2tranY 1000ms linear infinite;
    -moz-animation: lever2tranY 1000ms linear infinite;
    -o-animation: lever2tranY 1000ms linear infinite;

}

@keyframes leverRatote {
    0%{
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }
    50%{
        transform: rotate(-18deg);
    }

    100%{
        transform:rotate(0deg);
    }
}
@keyframes lever2tranY {

    0% {
        height: 11rem;
    }

  50%{
     height: 13rem
 }

    100% {
        height: 11rem;
    }
}

@keyframes snakeSkewX {
    0%{
      transform:skewX(0deg);
        transform-origin: 100% 100%;
    }
    50%{
        /*transform: skewX(-26deg) scaleY(0.75) translate(0.6rem,0.815rem);*/
        transform:skewX(-19deg) scaleY(0.7);
        transform-origin: 100% 100%;
    }
  100%{
      transform:skewX(0deg) scaleY(1);
      transform-origin: 100% 100%;
  }
}
.declare{
    position: relative;
    top:-4.5em;
    text-align:center;
}
.declare-2{
    width:300px;
    padding:10px 0;
    margin: 0 auto;
}
@media screen  and (min-width: 1920px){
    .extract-oil{
        top:5rem;
        left:0.375rem;
    }
    .scene-oil{
        left: 19%;
        top: 9rem;
    }
    .list1{
        margin-left: 24%;
    }
    .list2{
        margin-left:24%;
    }
    
    .logo-effect{
        left: 60%;
        top: 40%;
    }
    .car{
        /*top: 12.8rem;*/
        top: 12.8rem;
    }
}
@media screen and (max-width: 1680px) {
    .scene-oil {
        top: 6.5rem;
        left: 20rem;
    }
    .list1{
         margin-top:4rem;
        margin-left:22%;
     }
    .list2{
        margin-left:22%;
    }
    
    .product{
        top:-3rem;
    }
    .last-section{
        top:-3rem;
    }
    .logo-effect {
        left: 58%;
        top: 32%;
    }
    .car{
        /*top: 10.8rem;*/
        top:8.85rem;
    }

}

@media screen and (max-width: 1600px)  {

    .logo-effect {
        left: 57%;
        top: 31%;
    }

    .car{
        /*top: 10rem;*/
        top:8.4rem;
    }
    .scene-oil {
        top: 5.7rem;
        left: 18rem;
        width:32rem;
    }
    .station-house{
        top:7rem;
    }
    .list1{
       margin-top: 2rem;
       margin-left:23%;
    }
    .list2 {
       margin-top: 10px;
       margin-left:23%;
    }
    
     .declare{
        top:-4rem;
    }
}

@media screen and (max-width: 1440px){

    .list1{
      margin-left: 18%;
    }
    .list2{
      margin-left: 18%;
    }
     
    .scene-oil {
        left: 17%;
        top: 5.2rem;
    }

    .product{
        top:-1.7rem;
    }
    .last-section{
        top:-1.7rem;
    }
    .station-house{
        top: 7.5rem;
    }

    .logo-effect {
        left: 56%;
        top: 30%;
    }
    .car{
        /*top: 8.7rem;*/
        top:7.1rem;
    }

}

@media screen and (max-width:1400px){
    .list1{
        margin-left: 18%;
    }
    .list2{
        margin-left: 18%;
    }
    .product{
        top:-2rem;
    }
    .extract-oil{
        top:8rem;
    }
    .scene-oil{
        top:9.2rem;
    }
    .station-house{
        top:11rem;
    }
    .last-section{
        top:2rem;
    }
    .car{
        top:6.9rem;
    }
    
   
}

@media screen and (max-width:1366px){
    html {
        font-size: 12px;
    }
    .car{
       /* top: 12rem;*/
       top: 11.1rem;
    }
    .logo-effect{
        left: 58%;
        top: 36%;
    }
    .red-link{
        width:190px;
        height:36px;
    }
    .list1{
        margin-left: 22%;
    }
    .list2{
        margin-left:22%;
        margin-top:2px;
    }
    
    .product{
        top:-9rem;
    }
    .station-house{
        top: 7rem;
    }
    .last-section{
        top:-9rem;
    }
    .extract-oil{
        top: 4rem;
    }
    .scene-oil {
        left: 20%;
        width: 30rem;
        top:7.6rem;
    }
    .declare{
        top:-4.5rem;
    }
}

@media screen and (max-width:1280px){
    .title{
        position: relative;
        top: 7rem;

    }

    .red-link{
        font-size:1.7rem;
    }
    .scene-oil {
        top: 6.5rem;
    }
    .logo-effect {
        left: 58%;
        top: 33%;
    }
    .product{
        top:5rem;
    }
    .last-section{
        top:5rem;
    }
    .car{
        /*top: 11rem;*/
        top:9.2rem;
    }
    .list1{
        margin-top: 12rem;
        margin-left: 21%;
    }
    .list2{
        margin-left: 21%;
    }
    
}

@media screen and (max-width:1152px){
    .scene-oil {
        top: 5.6rem;
    }
    .logo-effect {
        left: 57%;
        top: 29%;
    }
    .station{
        width:20%;
    }
    .station-house {
        top: 8rem;
    }
    .list1{
        margin-left: 21%;
    }
    .list2{
        margin-left:21%
    }
    
    .product{
        top:-2rem;
    }
    .last-section{
        top:-2rem;
    }
    .car {
        /*top: 9.5rem;*/
        top:8rem;
    }
    .declare{
        position: relative;
        top:-3.5rem;
    }
    .declare-2{
        padding: 0;
    }
}
@media screen and (max-width:1024px){
    .red-link{
        font-size:1.7rem;
    }
    .title{
        position: relative;
        top:3em;
    }
    .scene-oil {
        left: 16%;
        top: 5rem;
    }
    .station-house{
        top:6.5rem;
    }
    .car{
        /*top: 8rem;*/
        top:6.8rem;
    }
    .logo-effect {
        left: 56%;
        top: 28%;
    }
    .product{top:-2rem;}
    .last-section{
        top:-2rem;
    }
    .list1{
        margin-top:5em;
        margin-left: 13%;
    }
    .list2{
        margin-left:13%
    }
    

}
@media screen and (max-width:800px){
    html{
        font-size: 10px;
    }
    .container{
        width:100%;
        min-width:800px;

    }
    .red-link{
        font-size: 1rem;
    }
    .list1 {
        margin-left: 17%;
    }
    .list2{
        margin-left: 17%;
    }
    
    .scene-oil{
        top: 4.5rem;
    }

    .car{
        /*top: 6.4rem;*/
        top:4.4rem;
    }
    .logo-effect{
        left: 53%;
        top: 13%;
    }

    .station{
        width:20%;
    }
    .station-house {
        top: 7rem;
    }
    .product{top:-2rem;}
    .last-section{
        top:-2rem;
    }
    .declare{
        position: relative;
        top:-3.5rem;
    }


}