body{
    background: url('../images/infographic/bg_body.png') left top repeat;
}
.body_top{
    height:17px;
    background: #c7333f;
}
.body_bottom{
    height:17px;
    background: #c7333f;
}
.body {
    width: 100%;
    margin: 0 auto;

}
.body_inner{
    background: url(../images/infographic/bg_khunghinh.png) 0 238px no-repeat;
    width: 637px;
    margin: 0 auto;
    height: 3495px;
    position: relative;
}
.logo_hapacol{
    background: url(../images/infographic/logo_hapacol.png) 0 0px no-repeat;
    width:460px;
    height: 460px;
    display: block;
    position: absolute;
    top:55px;
    left:-35px;
}
.vienthuoc{
    background: url(../images/infographic/vienthuoc.svg) 0 0px no-repeat;
    width: 72px;
    height: 65px;
    display: none;
    background-size: cover;
    position: absolute;
    transition: transform .2s ease-in-out;

}
.vienthuoc_ngang{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.vienthuoc_pos_start{
    top: 245px;
    left: 424px;
}

.vienthuoc_pos_1{

    top: 245px;
    left: 500px;
}
.layer_1_cot{
    background: url(../images/infographic/layer_1_cot.png) 0 0 no-repeat;
    width: 46px;
    height: 75px;
    position: absolute;
    top: 450px;
    left: 575px;
    background-size: contain;
}
.layer_1_year{
    height: 72px;
    background: url(../images/infographic/layer_1_co.png) 0 0 no-repeat;
    display: block;
    width: 171px;
    position: absolute;
    top: 445px;
    left: 439px;

}
.layer_1{
    display:none;
}
.product_layer_1{
    background: url(../images/infographic/product_layer_1.png) 0 0 no-repeat;
    display: none;
    width: 231px;
    position: absolute;
    top: 569px;
    left: 487px;
    height: 159px;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    transform: scale(0.8)

}

.animate-zoom{
    animation: shrink 0.5s infinite alternate;
}
@keyframes shrink {
    0% {
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -o-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
}
.layer_1_txt{
    background: url(../images/infographic/layer_1_txt.png) 0 0 no-repeat;
    display: none;
    height: 110px;
    width: 389px;
    position: absolute;
    top: 475px;
    left: 181px;
    transform: scale(0.8);

}
#layout_1 {
    width:100%;
    height:955px;
    position: relative;
}
#layout_2{

}

#layout_2 .vienthuoc{
    top: 740px;
    left: 561px;
}
.layer_2_cot{
    position: absolute;
    background: url(../images/infographic/layer_2_cot.png) left -1px no-repeat;
    width: 59px;
    height: 281px;
    display: block;
    top: 646px;
    left: 67px;
    transform: scale(0.8);
}
.layer_2_year{
    position: absolute;
    background: url(../images/infographic/layer_2_year.png) left -1px no-repeat;
    width: 213px;
    height: 100px;
    display: block;
    top: 663px;
    left: 61px;
    transform: scale(0.8);
}

.product_layer_2{
    position: absolute;
    background: url(../images/infographic/layer_2_images.png) left -1px no-repeat;
    width: 225px;
    height: 246px;
    display: block;
    top: 800px;
    left: 170px;
    transform: scale(0.8);

}
.layer_2_txt{
    position: absolute;
    background: url(../images/infographic/layer_2_txt.png) left -1px no-repeat;
    top: 687px;
    width: 425px;
    height: 105px;
    transform: scale(0.8);
    left: 72px;
}

/* layer 3*/
#layout_3 .vienthuoc{
    position: absolute;
    top: 900px;
    left: 15px;
}

.layer_3_cot{
    position: absolute;
    background: url(../images/infographic/layer_3_cot.png) left top no-repeat;
    top: 1156px;
    width: 59px;
    height: 99px;
    left: 9px;
    z-index: 999;
    transform: scale(0.8);
}
.layer_3_year{
    position: absolute;
    background: url(../images/infographic/layer_3_year.png) left top no-repeat;
    top: 1149px;
    width: 212px;
    height: 90px;
    left: 4px;
    z-index: 999;
    transform: scale(0.8);

}
.product_layer_3{
    position: absolute;
    background: url(../images/infographic/layer_3_images.png) left -1px no-repeat;
    width: 566px;
    height: 346px;
    display: block;
    top: 1008px;
    left: 200px;
    transform: scale(0.8);
}
.layer_3_txt{
    position: absolute;
    background: url(../images/infographic/layer_3_txt.png) left -1px no-repeat;
    width: 704px;
    height: 279px;
    display: block;
    top: 1208px;
    left: 46px;
    transform: scale(0.8);
}
#layout_4 .vienthuoc{
    position: absolute;
    top:1288px;
    left:15px;
}
.layer_4_cot{
    position: absolute;
    background: url(../images/infographic/layer_4_cot.png) left top no-repeat;
    top: 1542px;
    width: 63px;
    height: 159px;
    left: 542px;
    z-index: 999;
    transform: scale(0.8);
}

.layer_4_year{
    position: absolute;
    background: url(../images/infographic/layer_4_co.png) left top no-repeat;
    top: 1540px;
    width: 544px;
    height: 159px;
    left: 101px;
    transform: scale(0.8);
    z-index: 999;

}
.layer_5_1{
    background: url(../images/infographic/layer_5_1.png) left top no-repeat;
    width: 807px;
    height: 241px;
    display: block;
    position: absolute;
    top: 1700px;
    left: -99px;
    transform: scale(0.8);
}
.layer_5_2{
    background: url(../images/infographic/layer_5_2.png) left top no-repeat;
    width: 807px;
    height: 122px;
    display: block;
    position: absolute;
    top: 1960px;
    left: -101px;
    transform: scale(0.8);
}
.layer_5_3{
    background: url(../images/infographic/layer_5_3.png) left top no-repeat;
    width: 808px;
    height: 504px;
    display: block;
    position: absolute;
    top: 2077px;
    left: -102px;
    transform: scale(0.8);
}

/*layer 6*/
.layer_6_cot{
    position: absolute;
    background: url(../images/infographic/layer_6_cot.png) left top no-repeat;
    top: 2673px;
    width: 59px;
    height: 129px;
    display: block;
    left: 470px;
    transform: scale(0.8);

}
#layout_6 .vienthuoc {
    top: 2736px;
    right: 25px;

}

.layer_6_year{
    position: absolute;
    background: url(../images/infographic/layer_6_co.png) left top no-repeat;
    top: 2676px;
    width: 219px;
    height: 90px;
    display: block;
    left: 322px;
    transform: scale(0.8);
}
.bottom_page{
    background: url(../images/infographic/bottom_page.png) left top no-repeat;
    width: 917px;
    position: absolute;
    top: 2820px;
    transform: scale(0.8);
    left: -122px;
    height: 740px;
    z-index: 33;
}

.logo_ngoisaoviet{
    background: url(../images/infographic/logo_ngoisaoviet.png) left top no-repeat;
    width: 403px;
    height: 403px;
    display: block;
    position: absolute;
    top: 2584px;
    z-index: 9999;
    left: -56px;
    display: none;
    transform: scale(0.8);
}
.txt_ngoisaoviet{
    background: url(../images/infographic/layer6_txt.png) left top no-repeat;
    width: 415px;
    height: 315px;
    display: block;
    position: absolute;
    top: 2799px;
    left: 276px;
    transform: scale(0.8);
    display: none;
}

#layout_1 .layer_pos {
    position: absolute;
    left:50%;
    top:0px;
    width: 1px;
    height: 1px;
}
#layout_2 .layer_pos {
    position: absolute;
    left:50%;
    top:800px;
    width: 1px;
    height: 1px;
}
#layout_3 .layer_pos {
    position: absolute;
    left:50%;
    top:1136px;
    width: 1px;
    height: 1px;
}
#layout_4 .layer_pos {
    position: absolute;
    left:50%;
    top:1715px;
    width: 1px;
    height: 1px;
}
#layout_5 .layer_pos {
     position: absolute;
     left:50%;
     top:2015px;
     width: 1px;
     height: 1px;
 }
#layout_6 .layer_pos {
    position: absolute;
    left:50%;
    top:2749px;
    width: 1px;
    height: 1px;
}