img{
    border:0;
}
.imgcontainer{
    height: 100%;
    overflow: hidden;
}
.section1 .imgcontainer img{
    position: absolute;
    left: -20%;
    top:30%;
}
.section1.active  .imgcontainer  img{
    left:-2%;
    top:30%;
    margin-left: 200px;
    transition: all 1s;
}
.section1.active .introcontainer1  .imgcontainer img{
    margin-left: 175px;
    left: 0%;
    top:30%;
}
.company_description{
    transition:opacity 1s ease-out 1.2s, margin-top 1s ease-out 1.2s, color 0.3s, background-color 0.3s;
}


.intro1top{
    overflow:hidden;
}
.intro1top span{
    position: absolute;
    left: 32%;
    top:0%;
}
 .section1.active .introcontainer1 .intro1top span{
    left:32%;
    top:25%;
    transition: all 1s;
}


.intro1bottom{
}
.intro1bottom p{
    position: absolute;
    left: 32%;
    top:43%;
    width:60%;
}
.section1.active .introcontainer1 .intro1bottom p{
    left: 32%;
    top:43%;
}


/****intro section2*****/
.section2 .imgcontainer img{
    position: absolute;
    margin-left:100%;
    top:30%;
}
.section2.active  .imgcontainer  img{
    top:30%;
    margin-left:100%;
    transition: all 1s;
}
.section2.active .introcontainer2  .imgcontainer img{
    margin-left:70%;
    top:30%;
}


.intro2top{
    overflow:hidden;
}
.intro2top span{
    position: absolute;
    left: 20%;
    top:0%;
}
.section2.active .introcontainer2 .intro2top span{
    left:20%;
    top:25%;
    transition: all 1s;
}


.intro2bottom{
}
.intro2bottom p{
    position: absolute;
    left: 20%;
    top:42%;
    width:60%;
}
.section2.active .introcontainer2 .intro1bottom p{
    left: 20%;
    top:42%;
}


/*****intro section3*******/
.section3 .imgcontainer img{
    position: absolute;
    left: -20%;
    top:35%;
}
.section3.active  .imgcontainer  img{
    left:-2%;
    top:35%;
    margin-left: 200px;
    transition: all 1s;
}
.section3.active .introcontainer3  .imgcontainer img{
    margin-left: 175px;
    left: -2%;
    top:35%;
}

.intro3top{
    overflow:hidden;
}
.intro3top span{
    position: absolute;
    left: 32%;
    top:0%;
}
.section3.active .introcontainer3 .intro3top span{
    left:32%;
    top:18%;
    transition: all 1s;
}


.intro3bottom{
}
.intro3bottom p{
    position: absolute;
    left: 32%;
    top:36%;
    width:60%;
}
.sectio3.active .introcontainer3 .intro3bottom p{
    left: 32%;
    top:36%;
}


/***********service section2************/
#serviceContent .section22 .imgcontainer1 img{
    position: absolute;
    margin-left:-30%;
    margin-top:5%;
}
#serviceContent .section22.active  .imgcontainer1  img{
    margin-top:5%;
    margin-left:0%;
    transition: all 1s;
}

/***********service section3************/
#serviceContent .section33 .imgcontainer1 img{
    position: absolute;
    margin-right:-40%;
    margin-top:0%;
}
#serviceContent .section33.active  .imgcontainer1  img{
    margin-top:0%;
    margin-right:0%;
    transition: all 1s;
}

/***********service section4************/
#serviceContent .section44 .imgcontainer1 img{
    position: absolute;
    margin-right:-40%;
    margin-top:0%;
}
#serviceContent .section44.active  .imgcontainer1  img{
    margin-top:0%;
    margin-right:0%;
    transition: all 1s;
}


.animate-rotation {
    opacity: 0;
    -webkit-transform: scale(0, 0) rotateY(0deg);
    -ms-transform: scale(0, 0) rotateY(0deg);
    -o-transform: scale(0, 0) rotateY(0deg);
    transform: scale(0, 0) rotateY(0deg);
    -webkit-transition-property: opacity,transform;
    -o-transition-property: opacity,transform;
    transition-property: opacity,transform;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.section.active .animate-rotation {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1) ;
}

.animate-enlarge {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition-property: opacity,transform;
    -o-transition-property: opacity,transform;
    transition-property: opacity,transform;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.section.active .animate-enlarge {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}