@charset "utf-8";

.wrap { overflow:hidden; width:100%; min-width:1450px; background:#eee5ff; }
    .wrap > div { position:relative; width:100%;  }
    img { position:absolute; }
        .bak_img { z-index:5; left:50%; transform:translateX(-50%); display:block; margin:0 auto; height:auto; }
    .inner { z-index:10; position:relative; left:50%; transform:translateX(-50%); width:1450px; height:100%; }

    /* top_con */
    .top_con { height:1420px; }
    .top_con .bak_img { width:1920px; }
    .top_con:before { content:""; display:block; position:absolute; top:0px; left:0px; width:100%; height:480px;
        background: rgb(255, 192, 202);
        background: linear-gradient(90deg, rgb(255, 192, 202) 50%, rgb(169, 136, 227) 50%);
    }
    .top_con .bg { overflow:hidden; position:relative; height:1430px; }
    .top_con .bg:before { content:""; z-index:2; position:absolute; top:0px; left:50%; display:inline-block; width:2252px; height:1337px; border-radius:80%; transform:translate(-50%, -40.2%);
        background: rgb(255, 192, 202);
        background: linear-gradient(90deg, rgba(255, 192, 202) 20%, rgba(169, 136, 227) 80%);
    }
    .top_con:after { content:""; z-index:1; position:absolute; top:480px; left:0px; display:inline-block; width:100%; height:600px; background:#fff url('./images/bg_dok_top.jpg') center bottom repeat-x; }
        /* obj */
        .top_con .phone01 { left:405px; top:504px; transition: all 0.3s ease-out; }
        .top_con .phone02 { left:640px; top:500px; transition: all 0.5s ease-out; }
        .top_con .ch { left:370px; bottom:390px; }
        /* action */
        .top_con .action .phone01 { left:405px; top:454px; }
        .top_con .action .phone02 { left:640px; top:300px; }
        

    /* dok_con */
    .dok_con { height:3530px; }
    .dok_con .bak_img { width:2335px; }
        /* obj */
        .dok_con .bg { position:absolute; left:-401px; top:383px; width:1190px; height:413px;}
            .dok_con .bg:before,
            .dok_con .bg:after { content:""; z-index:2; position:absolute; display:inline-block; width:115px; height:412px; }
            .dok_con .bg:before { left:-25px; background:url('./images/dok_ch_bg_left.png') no-repeat; background-size:100% auto; }
            .dok_con .bg:after { right:-25px; background:url('./images/dok_ch_bg_right.png') no-repeat; background-size:100% auto; }
        .dok_con .bg_ch { overflow:hidden; position:absolute; left:-401px; top:496px; width:1190px; height:187px; }
            .dok_con .bg_ch img { left:-1190px; opacity:0.5; }
        .dok_con .phone01 { left:275px; top:276px; }
        .dok_con .circle { right:-440px; top:383px; 
            animation: move 5s linear infinite
        }
        .dok_con .ai { left:50%; top:1243px; transform:translateX(-50%) scale(0.7); transition: all 0.3s ease-out; }
        .dok_con .bg_circle { left:-26px; top:1785px; transform:scale(0); transition: all 0.3s ease-out; }
        .dok_con .phone02 { left:56px; top:1750px; }
        .dok_con .ch01 { left:248px; top:2180px; transform:scale(0); transition: all 0.3s ease-out; transition-delay: 0.3s; }
        .dok_con .ch02 { left:742px; bottom:162px; transform:scale(0); transition: all 0.3s ease-out; }
        /* action */
        @keyframes move {
            0% { transform: translate(-15px, -15px); }
            25% { transform: translate(10px, 20px); }
            50% { transform: translate(20px, 15px); }
            75% { transform: translate(-20px, 15px); }
            100% { transform: translate(-15px, -15px); }
        }
        .dok_con .ai.action { transform:translateX(-50%) scale(1); } 
        .dok_con .bg_circle.action,
        .dok_con .ch01.action,
        .dok_con .ch02.action { transform:scale(1); }


    /* su_con */
    .su_con { height:3630px; background:#ffe5eb; }
    .su_con .bak_img { width:2335px; }
        .su_con:before,
        .su_con:after { content:""; z-index:2; position:absolute; bottom:-278px; display:inline-block; width:calc(50% - (1920px/2)); height:280px; background:#ffe5eb; }
        .su_con:before { left:0px; }
        .su_con:after { right:0px; }
        /* obj */
        .su_con .bg { position:absolute; right:-412px; top:519px; width:1190px; height:413px;}
            .su_con .bg:before,
            .su_con .bg:after { content:""; z-index:2; position:absolute; top:-7px; display:inline-block; width:118px; height:412px; }
            .su_con .bg:before { left:-25px; background:url('./images/su_ch_bg_left.png') no-repeat; background-size:100% auto; }
            .su_con .bg:after { right:-25px; background:url('./images/su_ch_bg_right.png') no-repeat; background-size:100% auto; }
        .su_con .bg_ch { overflow:hidden; position:absolute; right:-413px; top:635px; width:1190px; height:187px; }
            .su_con .bg_ch img { right:50px; opacity:0.5; }
        .su_con .phone01 { right:274px; top:400px; }
        .su_con .circle { left:-434px; top:515px; 
            animation: move 5s linear infinite
        }
        .su_con .bg_circle { right:132px; bottom:905px; transform:scale(0); transition: all 0.3s ease-out;  }
        .su_con .phone02 { right:89px; bottom:785px; }
        .su_con .ch01 { right:125px; bottom:1343px; transform:scale(0); transition: all 0.3s ease-out; transition-delay: 0.3s; }
        .su_con .ch02 { left:165px; bottom:-179px; transform:scale(0); transition: all 0.3s ease-out;  }
        /* action */
        .su_con .bg_circle.action,
        .su_con .ch01.action,
        .su_con .ch02.action { transform:scale(1); }


    /* info_con */
    .info_con { height:3854px; }
    .info_con .bak_img { width:1920px; }
        .info_con:before,
        .info_con:after { content:""; z-index:4; position:absolute; left:50%; transform:translateX(-50%); width:100%; height:300px; }
        .info_con:before { top:-5px; background:url('./images/info_bg_top.png') top center no-repeat; }
        .info_con:after { bottom:-3px; background:url('./images/info_bg_bot.png') bottom center no-repeat ; }
    .info_con .bg { position:relative; width:100%; height:100%;
        background: rgb(200, 153, 233);
        background: linear-gradient(161deg, rgb(200, 153, 233) 20%, rgb(232, 150, 166) 80%);
    }
        .info_con .bg:before { content:""; position:absolute; top:0px; left:0px; display:block; width:100%; height:100%; background:url('./images/bg_patterm.png') repeat; mix-blend-mode:multiply; }
        /* obj */
        .info_con .txt { top:409px; left:50%; transform:translateX(-50%); }
        .info_con .ch01 { left:435px; bottom:250px; transform:scale(0); transition: all 0.3s ease-out; }
        .info_con .ch02 { right:80px; bottom:238px; transform:scale(0); transition: all 0.3s ease-out; transition-delay: 0.3s; }
        /* action */
        .info_con .action .ch01,
        .info_con .action .ch02 { transform:scale(1); }


    /* bot_con */
    .bot_con { height:1437px; background:#5c381e; }
    .bot_con .bak_img { width:3020px; }
        .bot_con:before,
        .bot_con:after { content:""; z-index:2; position:absolute; top:-281px; display:inline-block; width:calc(50% - (1920px/2)); height:285px; background:#5c381e; }
        .bot_con:before { left:0px; }
        .bot_con:after { right:0px; }
         /* obj */
         .bot_con .logo01 { left:551px; top:141px; }
         .bot_con .logo02 { right:551px; top:141px; }
        /* action */
        .bot_con .action .logo01 { animation: jump 2.5s ease-in-out; }
        .bot_con .action .logo02 { animation: jump 3s ease-in-out; }
        @keyframes jump {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-5px); }
        }