@charset "utf-8";

/* animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; */

.watermelon .mainBanner .label{ opacity: 0; }
.watermelon .mainBanner.on .label{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.watermelon .mainBanner .title{ opacity: 0; }
.watermelon .mainBanner.on .title{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.watermelon .mainBanner .scrolldown_div .mouse .wheel{ animation: mousewheel 1.5s ease-in-out infinite; }

@keyframes mousewheel{ 
    0%{ transform: translateY(0); opacity: 1; }
    50%{transform: translateY(10px); opacity: .5; }
    100%{ transform: translateY(0); opacity: 0; }
}

.watermelon .projectSec .title{ opacity: 0; }
.watermelon .projectSec.on .title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.watermelon .projectSec .imgList{ opacity: 0; }
.watermelon .projectSec.on .imgList{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }

.watermelon .slideSec .gradientDiv .titleBox .title{ opacity: 0; }
.watermelon .slideSec.on .gradientDiv .titleBox .title{ animation: scale 0.5s ease-in-out 0.1s 1 forwards running; }
.watermelon .slideSec .contentBox{ opacity: 0; }
.watermelon .slideSec.on .contentBox{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }


.watermelon .sweetSec .pinkBox .t1{ opacity: 0; }
.watermelon .sweetSec.on .pinkBox .t1{ animation: scale 0.5s ease-in-out 0.1s 1 forwards running; } 
.watermelon .sweetSec .pinkBox .t2{ opacity: 0; }
.watermelon .sweetSec.on .pinkBox .t2{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.watermelon .sweetSec .halfBox{ opacity: 0; }
.watermelon .sweetSec.on .halfBox{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

.watermelon .sweetRealSec .topBox{ opacity: 0; }
.watermelon .sweetRealSec.on .topBox{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.watermelon .sweetRealSec .bottomBox{ opacity: 0; }
.watermelon .sweetRealSec.on .bottomBox{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }

.watermelon .sweetRealSec .topBox .icon{ animation: shake 1s infinite alternate; }
.watermelon .sweetRealSec .importantDiv .icon{ animation: shake 1s infinite alternate; }

.watermelon .startSec .pinkBox{ opacity: 0; }
.watermelon .startSec.on .pinkBox{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running;  }
.watermelon .startSec .pinkBox .imgBox .icon{ animation: shake 1s infinite alternate; }

.watermelon .growSec .whiteBg{ opacity: 0; }
.watermelon .growSec.on .whiteBg{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running;  }

.watermelon .givenSec .title{ opacity: 0; }
.watermelon .givenSec.on .title{animation: scale 0.5s ease-in-out 0.1s 1 forwards running;}

.watermelon .givenSec .imgBox{ opacity: 0; }
.watermelon .givenSec.on .imgBox{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running;  }

.watermelon .givenSec .bottomContent{ opacity: 0; }
.watermelon .givenSec.on .bottomContent{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running;  }
.watermelon .givenSec .bottomContent .icon{ animation: shake 1s infinite alternate; }


.watermelon .nowSec .title{ opacity: 0; }
.watermelon .nowSec.on .title{ animation: scale 0.5s ease-in-out 0s 1 forwards running;  }


.watermelon .farmSec .title{ opacity: 0; }
.watermelon .farmSec.on .title{ animation: scale 0.5s ease-in-out 0s 1 forwards running; }
.watermelon .farmSec .imgList > li{ opacity: 0; }
.watermelon .farmSec.on .imgList > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.watermelon .farmSec.on .imgList > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.watermelon .farmSec.on .imgList > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.watermelon .farmSec.on .imgList > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }



.watermelon .thanksSec .t1{ opacity: 0; }
.watermelon .thanksSec.on .t1{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running;  }
.watermelon .thanksSec .blackBox{ opacity: 0; }
.watermelon .thanksSec.on .blackBox{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running;  }

.watermelon .thanksSec .greenBox .t2{ opacity: 0; }
.watermelon .thanksSec.on .greenBox .t2{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running;  }

.watermelon .thanksSec .greenBox .greenBg{ opacity: 0; }
.watermelon .thanksSec.on .greenBox .greenBg{ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running;  }

.watermelon .thanksSec .greenBox .shiny{ animation: blink 1s infinite; }
.watermelon .thanksSec .greenBox .icon{     animation: shake 1s infinite alternate; }

.watermelon .thanksSec .itemList .item{ opacity: 0; }
.watermelon .thanksSec.on .itemList .item{ animation: scale 0.5s ease-in-out 0.1s 1 forwards running; }

@keyframes shake{
    0%{transform:translate(0,0);}
    100%{transform:translate(0,10px);}
}  
 
@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes scale {
    0% {transform:scale(0); oapcity:0; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeInDown {
    0% {transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}