.banner-home {
    background: #ffe100 !important;
    position: relative;
    height: calc(665vw / 19.2);
    overflow: hidden; }
.banner-home .ship {
    position: absolute;
    bottom: calc(-40vw / 19.2);
    right: calc(60vw / 19.2);
    width: calc(480vw/ 19.2);
    animation: ship 12s ease infinite; }
.banner-home .tram {
    position: absolute;
    bottom: calc(60vw / 19.2);
    left: calc(-160vw / 19.2);
    width: calc(150vw/ 19.2);
    animation: tram 20s linear infinite; }
.banner-home .free-to-tour {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/free_to_tour.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: 2; }

@keyframes tram {
    0% {
        left: -10%;
        transform: scaleX(1); }
    50% {
        left: 30%;
        transform: scaleX(1); }
    51% {
        left: 30%;
        transform: scaleX(-1); }
    100% {
        left: -10%;
        transform: scaleX(-1); } }
@keyframes ship {
    0% {
        bottom: -4%;
        transform: rotate(-2deg); }
    25% {
        bottom: -4%; }
    50% {
        bottom: -3%;
        transform: rotate(2deg); }
    75% {
        bottom: -4%; }
    100% {
        bottom: -3%;
        transform: rotate(-2deg); } }


/*--------------------
---------------------*/

.banner-home-2 {
    background: url('../images/banner02/background.jpg');
    position: relative;
    height: calc(665vw / 19.2);
    overflow: hidden; }
.banner-home-2 .buddha {
    position: absolute;
    left: calc(380vw / 19.2);
    top: calc(77vw / 19.2);
    width: calc(519vw/ 19.2);
    /*animation: buddha 3s ease infinite;*/
}
.banner-home-2 .treasure {
    position: absolute;
    left: calc(240vw / 19.2);
    top: calc(320vw / 19.2);
    width: calc(397vw/ 19.2);
    /*animation: treasure 3s ease infinite;*/
}
.banner-home-2 .island {
    position: absolute;
    left: calc(1193vw / 19.2);
    top: calc(131vw / 19.2);
    width: calc(213vw/ 19.2);
    /*animation: island 3s ease infinite;*/
}
.banner-home-2 .dolphin {
    position: absolute;
    left:calc(611vw / 19.2);
    top:calc(528vw / 19.2);
    width:calc(149vw / 19.2);    
}

.banner-home-2 .animation-boat-1 {
    position: absolute;
    animation: animation-boat-1 5s ease infinite;
}
.banner-home-2 .animation-boat-2 {
    position: absolute;
    animation: animation-boat-2 5s ease infinite;
}
.banner-home-2 .animation-boat-run-1 {
    position: absolute;
    animation: animation-boat-run-1 10s linear infinite;
}
.banner-home-2 .animation-boat-run-2 {
    position: absolute;
    animation: animation-boat-run-1 10s linear infinite;
    animation-delay: -1s;
}
.banner-home-2 .animation-turbine {
    position: absolute;
    left:calc(9vw / 19.2);
    top:calc(29vw / 19.2);
    width:calc(40vw / 19.2);
    animation:animation-turbine 3s linear infinite;
}

.banner-home-2 .animation-cable01 {
    position: absolute;
    width:calc(24vw / 19.2);
    animation:animation-cable01 15s ease infinite;
}
.banner-home-2 .animation-cable02 {
    position: absolute;
    width:calc(24vw / 19.2);
    animation:animation-cable02 15s ease infinite;
}

.banner-home-2 .boat01 {    
    position: absolute;
    left: calc(139vw / 19.2);
    top: calc(225vw / 19.2);
    width: calc(123vw/ 19.2);
}
.banner-home-2 .boat02 {    
    position: absolute;
    left: calc(1070vw / 19.2);
    top: calc(475vw / 19.2);
    width: calc(201vw/ 19.2);
}
.banner-home-2 .boat03 {    
    position: absolute;
    left: calc(1555vw / 19.2);
    /*left: calc(1755vw / 19.2);*/
    top: calc(231vw / 19.2);
    width: calc(145vw/ 19.2);
}
.banner-home-2 .boat04 {    
    position: absolute;
    left: calc(1472vw / 19.2);
    /*left: calc(1672vw / 19.2);*/
    top: calc(289vw / 19.2);
    width: calc(151vw/ 19.2);
}
.banner-home-2 .barrel {
    position: absolute;
    left:calc(1763vw / 19.2);
    top:calc(550vw / 19.2);
    width:calc(99vw / 19.2);
    animation: animation-boat-1 10s ease infinite;
}
.banner-home-2 .animation-dolphin-1 {
    position: absolute;
    left:calc(60vw / 19.2);
    top:calc(0vw / 19.2);
    width:calc(29vw / 19.2);
    animation: animation-dolphin 6s ease infinite;
}
.banner-home-2 .animation-dolphin-2 {
    position: absolute;
    left:calc(20vw / 19.2);
    top:calc(0vw / 19.2);
    width:calc(29vw / 19.2);
    animation: animation-dolphin 6s ease infinite;
    animation-delay: 1s;
}
.banner-home-2 .animation-dolphin-3 {
    position: absolute;
    left:calc(100vw / 19.2);
    top:calc(0vw / 19.2);
    width:calc(29vw / 19.2);
    animation: animation-dolphin 6s ease infinite;
    animation-delay: 2s;
}

.banner-home-2 .text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/banner02/text.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: 2; }

@keyframes animation-boat-1 {
    0% {
        transform:translateY(10%) rotate(-3deg);
    }
    25% {
        transform:translateY(0%);
    }
    50% {
        transform:translateY(10%) rotate(3deg);
    }
    75% {
        transform:translateY(0%);
    }
    100% {
        transform:translateY(10%) rotate(-3deg);
    } 
}

@keyframes animation-boat-2 {
    0% {
        transform:translateY(5%) rotate(0deg);
    }
    50% {
        transform:translateY(3%) rotate(-3deg);
    }
    100% {
        transform:translateY(5%) rotate(0deg);

    } 
}

@keyframes animation-boat-run-1 {
    0% {
        transform:translateX(0) scaleX(1);
    }
    50.5% {
        transform:translateX(calc(-100vw / 19.2)) scaleX(1);
    }
    51% {
        transform:translateX(calc(-100vw / 19.2)) scaleX(-1);
    }    
    99.5% {
        transform:translateX(0%) scaleX(-1);
    }    
    100% {
        transform:translateX(0%) scaleX(1);
    } 
}
@keyframes animation-boat-run-2 {
    0% {
        transform:translateX(0) scaleX(1);
    }
    50% {
        transform:translateX(calc(-100vw / 19.2)) scaleX(1);
    }
    51% {
        transform:translateX(calc(-100vw / 19.2)) scaleX(-1);
    }    
    99% {
        transform:translateX(0%) scaleX(-1);
    }    
    100% {
        transform:translateX(0%) scaleX(1);
    } 
}

@keyframes animation-turbine {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    } 
}

@keyframes animation-cable01 {
    0% {
        top:calc(17vw / 19.2);
        left:calc(186vw / 19.2);
    }
    50% {
        top:calc(39vw / 19.2);
        left:calc(309vw / 19.2);
    }
    100% {
        top:calc(17vw / 19.2);
        left:calc(186vw / 19.2);
    } 
}

@keyframes animation-cable02 {
    0% {
        top:calc(47vw / 19.2);
        left:calc(310vw / 19.2);
    }
    50% {
        top:calc(27vw / 19.2);
        left:calc(200vw / 19.2);
    }
    100% {
        top:calc(47vw / 19.2);
        left:calc(310vw / 19.2);
    } 
}

@keyframes animation-dolphin {
    0% {
        transform:translateY(calc(0vw / 19.2) ) rotate(0deg);
        opacity:1;
    }
    50% {
        transform:translateY(calc(80vw / 19.2)) rotate(-180deg);
        opacity:0;
    }    
    100% {
        transform:translateY(calc(0vw / 19.2)) rotate(-360deg);
        opacity:1;
    }
}


/*--------------------
---------------------*/

#banner-home-2020 {
    width:100%;
    position:relative;
    max-width:1920px;
    margin:0 auto;
}
#banner-home-2020 .bg {
    display:block;
}
#banner-2020-layer1,
#banner-2020-layer2,
#banner-2020-layer3 {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

#banner-2020-layer1 {
    animation: banner-2020-layer 12s ease infinite;
    /*animation-delay: 1s;*/
}
#banner-2020-layer2 {
    animation: banner-2020-layer 12s ease infinite;
    animation-delay: -4s;
}
#banner-2020-layer3 {
    animation: banner-2020-layer 12s ease infinite;
    animation-delay: -8s;
}

@keyframes banner-2020-layer {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    } 
}