@charset "utf-8";

body { background:#fff557; }
.puzzle_wrap { overflow:hidden; width:100%; min-width:1416px; }
.puzzle_wrap div > img { position:relative; left:50%; vertical-align:top; text-align:center; transform:translateX(-50%); }

.tit_area { position:relative; background:url('../images/tit_back.jpg') left bottom repeat-x; }
.tit_area h1 { position:relative; left:50%; padding-top:205px; width:560px; transform:translateX(-50%); }
    .tit_area h1 img { position:absolute; }
        .tit_area .star01 { top:205px; left:-30px; }
            .tit_area .action .star01 { animation:tit_star 0.7s infinite; animation-iteration-count:5; }
        .tit_area .star02 { bottom:51px; left:520px; }
            .tit_area .action .star02 { animation:tit_star 0.8s infinite; animation-iteration-count:5; }
        /* action */
        @keyframes tit_star
        {
            0% { opacity:0; }
            50% { opacity:1; }
            100% { opacity:0; }
        }
        .tit_area .txt { top:234px; left:0px; }
        .tit_area .ch { top:326px; left:386px; transition:all 0.3s ease-out; }
            .tit_area .action .ch { top:226px; }
        .tit_area .tit { position:relative; right:60px; }
.tit_area .inner { height:730px; background:url('../images/tit_bg.jpg') center top no-repeat; }
.tit_area .sub_txt { position:absolute; left:50%; bottom:0px; max-width:1421px; width:100%; height:215px; padding-top:50px; transform:translateX(-50%); background:url('../images/bg_top_round.png') left bottom no-repeat; box-sizing:border-box; }
.tit_area .sub_txt:before { content:""; position:absolute; left:4px; bottom:-1px; width:calc(100% - 14px); height:4px; background:#fff; }

.container { background:#fff; }
.container .inner { margin:0 auto; width:1420px; }
.container .inner img { position:static; transform:translateX(0px); }

.con01 .inner { position:relative; }
.con01 .inner .bok { z-index:3; position:absolute; top:45px; left:50%; transform:translateX(-50%); }
    .con01 .inner .bok img { position:absolute; }
        .con01 .inner .bok img:nth-child(1) { left:-185px; top:0px; transition:all 0.5s ease-in-out; }
        .con01 .inner .bok img:nth-child(2) { left:50%; top:0px; transform:translate(-50%); transition:all 0.5s ease-in-out;}
        .con01 .inner .bok img:nth-child(3) { right:-185px; left:auto; top:0px; transition:all 0.5s ease-in-out;}
        .con01.action .inner .bok img:nth-child(1) { left:-405px; top:49px; transform:rotate(-24deg); }
        .con01.action .inner .bok img:nth-child(2) { top:3px; transform:translate(-50%) rotate(-2deg); }
        .con01.action .inner .bok img:nth-child(3) { right:-417px; left:auto; top:36px; transform:rotate(17deg); }
.con01 .inner .txt01 { z-index:3; position:absolute; top:672px; left:563px; transform:scale(0); }
.con01 .inner .txt02 { z-index:3; position:absolute; top:672px; left:900px; transform:scale(0); }
    .con01.action .inner .txt01 { transform:translateY(0) scale(1); animation:con01_txt 0.4s ease; }
    .con01.action .inner .txt02 { transform:translateY(0) scale(1); animation:con01_txt 0.8s ease; }
    /* action */
    @keyframes con01_txt
    {
        0% { transform:translateY(100%) scale(0); }
        100% { transform:translateY(0) scale(1); }
    }

.con0201 { position:relative; }
.con0201 .inner { position:absolute; top:0px; left:50%; transform:translateX(-50%); }
.con0201 .inner img { position:absolute; }
    .con0201 .bg { top:0px; left:1100px; }
    .con0201 .ch01 { top:209px; left:143px; }
    .con0201 .ch02 { top:320px; left:577px; }
    .con0201 .ch03 { top:195px; left:1014px; }
    .con0201.action .inner .ch01 { animation:con0201_ch 0.8s ease; }
    .con0201.action .inner .ch02 { animation:con0201_ch 1s ease; }
    .con0201.action .inner .ch03 { animation:con0201_ch 1.2s ease; }
    /* action */
    @keyframes con0201_ch
    {
        0% { margin-top:0px; }
        50% { margin-top:-50px; }
        100% { margin-top:0px; }
    }
    .con0201 .inner .name01 { top:1032px; left:259px; transform:scale(0); }
    .con0201 .inner .name02 { top:939px; left:625px; transform:scale(0); }
    .con0201 .inner .name03 { top:903px; left:895px; transform:scale(0); }
    .con0201 .inner .name04 { top:873px; left:1101px; transform:scale(0); }
    .con0201.name .inner .name01 { animation:con0201_name 1s ease; transform:scale(1); }
    .con0201.name .inner .name02 { animation:con0201_name 1.2s ease; transform:scale(1); }
    .con0201.name .inner .name03 { animation:con0201_name 1.5s ease; transform:scale(1); }
    .con0201.name .inner .name04 { animation:con0201_name 1.8s ease; transform:scale(1); }
    /* action */
    @keyframes con0201_name
    {
        0% { transform:scale(0); }
        25% { transform:scale(1); }
        50% { transform:scale(1); margin-top:2px; }
        75% { margin-top:-10px; }
        100% { margin:0px; }
    }
    
.con0202 { position:relative; }
.con0202 .inner { position:absolute; top:0px; left:50%; transform:translateX(-50%); }
.con0202 .inner img { position:absolute; }
    .con0202 .inner .bg { top:490px; left:368px; transform:scale(0); }
        .con0202.action .inner .bg { top:490px; left:368px; transform:scale(1); transition:all 0.4s ease-in-out; }
    .con0202 .txt { overflow:hidden; position:absolute; top:147px; left:925px; display:inline-block; width:0px; height:74px; transition:all 0.6s ease-in-out; }
    .con0202.action .txt { width:213px; }

    .head_area .sub_menu { z-index:4; position:absolute; top:95px; left:0px;
        transition: all 0.3s ease-out;
        transform:translateY(-10px);
        opacity:0;
    }

.con03 { background:#fff; }

.bok_con { position:relative; margin-top:-45px; padding-top:330px; background:#fff557 url('../images/bg_bot.jpg') left top repeat-x; }
    .bok_con:before { z-index:2; content:""; position:absolute; left:50%; top:0px; width:100%; max-width:1416px; height:213px; transform:translateX(-50%); background:url('../images/bg_bot_round.png') left bottom no-repeat; }
    .bok_con:after { z-index:1; content:""; position:absolute; left:10%; top:2%; display:inline-block; width:529px; height:494px; background:url('../images/bg_ac.png') no-repeat; transition:all ease 1s; }
.bok_con .ch00,
.bok_con .ch01,
.bok_con .ch02,
.bok_con .ch03,
.bok_con .ch04,
.bok_con .ch05,
.bok_con .ch06 { position:absolute; left:auto; transform:translateX(0); }
.bok_con .bok { width:1416px; }

.bok_con .ch00 { top:50px; left:28%; transition:all ease 1s; }
    .bok_con.action .ch00 { top:100px; }
@media (max-width: 1416px) {
    .bok_con:after { left:-250px; }
    .bok_con .ch00 { left:10%; }
}
.bok_con .ch01 { top:355px; right:-300px; transition:all ease 1s; }
    .bok_con.action .ch01.move { right:0px; }
.bok_con .ch02 { top:1395px; left:-300px; transition:all ease 1s; }
    .bok_con.action .ch02.move { left:0px; }
.bok_con .ch03 { top:2065px; right:-600px; transition:all ease 1s; }
    .bok_con.action .ch03.move { right:0px; }
@media (max-width: 1980px) {
    .bok_con.action .ch03.move { right:-120px; }
}
.bok_con .ch04 { top:3120px; left:-300px; transition:all ease 1s; }
    .bok_con.action .ch04.move { left:0px; }
.bok_con .ch05 { top:4145px; right:-300px; transition:all ease 1s; }
    .bok_con.action .ch05.move { right:0px; }
.bok_con .ch06 { top:4433px; left:-300px; transition:all ease 1s; }
    .bok_con.action .ch06.move { left:0px; }

.bot { position:relative; }
.bot .inner { position:relative; margin:0 auto; width:1420px; }
.bot .bg { position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); animation:bot 1.2s linear infinite 0s; }
    /* action */
    @keyframes bot
    {
        0% { transform:translate(-50%) rotate(0deg); }
        25% { transform:translate(-50%) rotate(-0.3deg); }
        50% { transform:translate(-50%) rotate(0deg); }
        75% { transform:translate(-50%) rotate(0.3deg); }
        100% { transform:translate(-50%) rotate(0deg); }
    }
.bot .img { position:absolute; left:455px; top:3px; animation:bot_img 2s linear infinite 0s; }
    /* action */
    @keyframes bot_img
    {
        0% { transform:rotate(0deg); }
        25% { transform:rotate(260deg); }
        50% { transform:rotate(180deg); }
        100% { transform:rotate(0deg); }
    }