@charset "utf-8";

/* common */
.event_wrap { overflow:hidden; text-align:center; min-width:1400px; }
.event_wrap .inner { position:relative; margin:0 auto; width:1400px; }
.event_wrap .inner > img { vertical-align:top; width:1400px; }
.event_wrap .inner .motion img { position:absolute; }

.event_wrap .bg_top { background:#acd7ea; }
.event_wrap .bg_green { background:#cfdf98; }
.event_wrap .bg_yellow { background:#f8e695; }
.event_wrap .bg_blue { background:#bcdeed; }

.event_wrap .bok_area,
.event_wrap .bok_con { position:absolute; }
/*.event_wrap .bok_area img { position:absolute; top:0px; left:0px; }*/

/* tit */
.tit_area .motion img { z-index:2; }
.tit_area .leaf { left:119px; bottom:-91px; }
.tit_area .cloud01 { left:105px; bottom:95px; }
.tit_area .cloud02 { right:73px; bottom:-47px; }
.tit_area .ch00 { right:412px; top:205px; width:245px; animation:ch_action 3s ease-in-out infinite; }
@keyframes ch_action {
    0%, 20%, 40% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(10deg); }
}
.tit_area .ch01 { right:148px; bottom:405px; }
.tit_area .ch02 { left:111px; bottom:213px; }
.tit_area .ch03 { left:340px; bottom:486px; }
.tit_area .ch04 { right:163px; bottom:241px; }
    .tit_area.current .cloud01 { animation:cloud 5s ease-in-out infinite; }
    .tit_area.current .cloud02 { animation:cloud 5.5s ease-in-out infinite }
    .tit_area.current .ch00 { animation:none; }
    .tit_area.current .ch01 { animation:shake01 3s ease-in-out infinite; }
    .tit_area.current .ch02 { animation:shake02 2.5s ease-in-out infinite; }
    .tit_area.current .ch03 { animation:shake01 4.3s ease-in-out infinite; }
    .tit_area.current .ch04 { animation:shake02 3s ease-in-out infinite; }
@keyframes shake01 {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px) rotate(-1deg); }
    50% { transform: translateX(10px) rotate(1deg); }
    75% { transform: translateX(-10px) rotate(-1deg); }
    100% { transform: translateX(0); }
}
@keyframes shake02 {
    0% { transform: translateX(0); }
    25% { transform: translateX(10px) rotate(-1deg); }
    50% { transform: translateX(-10px) rotate(1deg); }
    75% { transform: translateX(10px) rotate(-1deg); }
    100% { transform: translateX(0); }
}

@keyframes cloud {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

/* con01 */
.con01 .flower01 { top:30.5%; left:12%; animation:dandelion01 6s ease-in-out infinite; }
.con01 .flower02 { top:34.5%; left:15.5%; animation:dandelion02 7s ease-in-out infinite; }
.con01 .flower03 { top:38%; right:15%; animation:dandelion03 6s ease-in-out infinite; }
.con01 .flower04 { bottom:24%; left:17.5%; animation:dandelion03 6s ease-in-out infinite; }
.con01 .flower05 { bottom:15.5%; right:20%; animation:dandelion02 6s ease-in-out infinite; }
.con01 .flower06 { bottom:18.5%; right:16%; animation:dandelion01 6s ease-in-out infinite; }
@keyframes dandelion01 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-15px, 15px) rotate(-5deg); }
    50% { transform: translate(15px, -15px) rotate(5deg); }
    75% { transform: translate(-15px, -15px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes dandelion02 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(6px, -6px) rotate(-5deg); }
    50% { transform: translate(-6px, 6px) rotate(5deg); }
    75% { transform: translate(-6px, -6px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes dandelion03 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -20px) rotate(-5deg); }
    50% { transform: translate(-20px, 20px) rotate(5deg); }
    75% { transform: translate(-20px, -20px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* con02, con03 */
.bg_green .txt01 { left:128px; top:452px; transform:scale(0); }
.bg_green .txt02 { right:163px; top:187px; transform:scale(0); }
.bg_green .txt03 { left:193px; top:660px; transform:scale(0); }
    .bg_green.current .txt01 { transform:scale(1); transition:all 0.3s; }
    .bg_green.current .txt02 { transform:scale(1); transition:all 0.3s; }
    .bg_green.current .txt03 { transform:scale(1); transition:all 0.3s; transition-delay:0.3s; }

/* bok_area */
.con05 .bok_area { top:359px; left:85px; width:1245px; height:888px; }
.con06 .bok_area { top:490px; left:82px; width:1245px; height:886px; }
.con07 .bok_area { top:437px; left:82px; width:1247px; height:888px; }
.con09 .bok_area { top:680px; left:295px; width:862px; height:1017px; }
.con10 .bok_con { top:110px; left:54%; transform:translate(-50%); }

/* con09 */
.con09 .txt01 { right:420px; top:123px; animation:bounceBubble 2s ease-in-out infinite;}
.con09 .txt02 { left:262px; bottom:81px; animation:bounceBubble 2s ease-in-out infinite;}

/* con10 */
.con10 .txt { left:545px; bottom:680px; animation:cloud 3.5s ease-in-out infinite;}

@keyframes bounceBubble {
    0%, 10%, 30%, 50%, 100% { transform: translateY(0); }
    20%, 40% { transform: translateY(-10px); }
}