#intro{
    width: 100vw;
    height: 100vh;
    background: #ffc8e8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999999;
    overflow: hidden;
}

#intro > div{
    width: 1116px;
    height: 837px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -558px;
    margin-top: -419px;
    transform: scale(0);
    transition: all 2s;
}

#intro > div.on{
    transform: scale(3);
}

#intro .intro_img02{
    transition-delay: 0.4s;
}

#intro .intro_img03{
    transition-delay: 0.8s;
}

#intro .intro_img04{
    transition-delay: 1.2s;
}

#intro .intro_img05{
    transition-delay:1.6s;
}

#intro .intro_img06{
    transition-delay: 2s;
}

#intro .intro_img07{
    transition-delay: 2.4s;
}




#section01{
    background: #a2e0f6;
    height: 43000px;/*본인이 원하는 수치로 변경*/
}
#section01 .trigger_this_01{
    height: 100%;
    width: 100%;
}
#section01 .fix_this_1{
    width: 100vw;
    height: 100vh;
    position: relative;
}

#section01 .se01_xscroll{
    width: 7194px;
    height: 100vh;
    position: relative;
}

/*.main_list{*/
/*    position: fixed;*/
/*    left: 59px;*/
/*    top: 69px;*/
/*}*/
.main_list{
    position: absolute;
    left: 59px;
    top: 69px;
    z-index: 99999;
}

.main_cloud_1{
    position: absolute;
    left: 0;
    top: 95px;
}

.main_cloud_2{
    position: absolute;
    left: 1500px;
    bottom: 110px;
}

.logo{
    position: absolute;
    left: 500px;
    top: 250px;
}

.main_build{
    position: absolute;
    /*right: 0;*/
    bottom: 0;
    left: 0;
    transform: translateY(900px);
}

.main_peper{
    position: absolute;
    right: 149px;
    bottom: 0;

}

.main_build_1{
    position: absolute;
    /*left: 0;*/
    bottom: 0;
    right: 0;
    transform: translateY(900px);
}

.main_bulid_s{
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(1000px);
}

#bulid_box{
    position: relative;
    width: 100vw;
    height: 100vw;
}

#bulid_box{
    position: relative;
    width: 1239px;
    height: 980px;
   left: 255px;
}

.main_build_2{
    position: absolute;
    top: 0;
    right: 633px;
    clip-path: polygon(67% 0, 67% 0, 44% 100%, 44% 100%);
}

.boxlist_01{
    position: relative;
    height: 296px;
    width: 1239px;
   /* border: 1px solid black;*/
    right: 50px;
}


.box01{
    position: absolute;
}

.boxlist_01 > .main_green_box{
    right: 0;
    transform: translateY(-400px);
}

.boxlist_01 > .main_red_box{
    right: 188px;
    transform: translateY(-400px);
}

.boxlist_01 > .main_blue_box{
    right: 376px;
    transform: translateY(-400px);
}

/*크기조절해야지 박스 움직임 가능*/

.boxlist_02{
    position: relative;
    top: 110px;
}






.main_mini_bb, .main_mini_blo , .main_mini_but{
    position: absolute;


}

/*안에들어간 캐릭터*/

.mini_box_01{
    width: 497px;
    height: 126px;
    position: absolute;
    left: 720px;
    top: 330px;
    z-index: 99;
}

.main_mini_bb {
    left: 0;
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
}

.main_mini_blo{
    left: 150px;
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
}

.main_mini_but{
    right: 0;
    position: absolute;
    opacity: 0;
    top: 10px;
    transform: scale(0.8);
}


/*카툰영역*/


#section02{
    background: #070707;
    width: 100vw;
    height: 10000px;
    /*position: relative;*/

}
#section02 .trigger_this_02{
    height: 100%;
    width: 100%;
}
#section02 .fix_this_2{
    width: 100vw;
    height: 100vh;
    position: relative;
}
#section02 .se02_inner{
    background-color: black;
    width: 1780px;
    height: 3920px;
    margin: 70px;
    position: absolute;
    /*transform-origin: top right;*/
    /*transform: translateX(80px) translateY(-80px)  rotate(-50deg);*/
    transform-origin: bottom left;
    transform: translateX(80px) translateY(2000px)  rotate(80deg);
    opacity: 0;
}

.v_box_01{
    width: 1045px;
    height: 601px;
    background: #a8dff8;
    position: absolute;
    left: 0;
    clip-path: polygon(0 0, 85% 0, 100% 82%, 0% 100%);
}

.boxlist_1{
    position: absolute;
    bottom: 0;
    left: -20px;

}

.boxlist_1_2{
    position: absolute;
    left: 430px;
    bottom: 64px;
}



.v_box_02 {
    width: 835px;
    height: 483px;
    background-color: #e7ff7d;
    position: absolute;
    right: 0;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 18% 100%);
    overflow: hidden;

}

.boxlist_2{
    position: absolute;
    left: 75px;
    bottom: -233px;
}

.boxlist_2_2{
    position: absolute;
    left: 418px;
    bottom: 37px;
}

.v_box_03{
    width: 715px;
    height: 613px;
    background-color: #f27396;
    position: absolute;
    left: 0;
    top: 560px;
    clip-path: polygon(0 15%, 78% 5%, 100% 94%, 0 100%);
    overflow: hidden;
}

.boxlist_3{
    position: absolute;
    left: 0;
    bottom: -57px;
}

.boxlist_3_2{
    position: absolute;
    left: 154px;
    bottom: 45px;
}

.v_box_04{
    width: 1186px;
    height: 676px;
    background-color: #f3716e;
    position: absolute;
    right: 0;
    top: 462px;
    clip-path: polygon(0 18%, 100% 2%, 100% 90%, 15% 100%);
    overflow: hidden;
}

.boxlist_4{
    position: absolute;
    left: 136px;
    bottom: -15px;
}

.boxlist_4_2{
    position: absolute;
    left: 413px;
    bottom: 56px;
}

.v_box_05{
    width: 672px;
    height: 444px;
    background-color: #ffed6d;
    position: absolute;
    left: 0;
    top: 1188px;
    clip-path: polygon(0 10%, 98% 0, 100% 101%, 0 100%);
    overflow: hidden;
}

.boxlist_5{
    position: absolute;
    left: -24px;
    bottom: -23px;
}

.v_box_06 {
    width: 353px;
    height: 497px;
    background-color: #cbeaf2;
    position: absolute;
    left: 697px;
    top: 1175px;;
    clip-path: polygon(0 4%, 97% 0, 100% 100%, 4% 93%);
    overflow: hidden;
}

.boxlist_6{
    position: absolute;
    left: 0;
    bottom: -28px;
}



.v_box_07{
    width: 370px;
    height: 586px;
    background-color: #ff96b6;
    position: absolute;
    top: 1141px;
    right: 345px;
    clip-path: polygon(4% 5%, 98% 1%, 99% 100%, 7% 92%);
}

.boxlist_7{
    position: absolute;
    bottom: 9px;
    left: -12px;
}


.v_box_08{
    width: 311px;
    height: 673px;
    background-color: #e7ff7d;
    position: absolute;
    right: 0;
    top: 1096px;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 94%);
}

.v_box_09{
    width: 548px;
    height: 466px;
    background-color: #ffc3da;
    position: absolute;
    left: 0;
    bottom: 1778px;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    overflow: hidden;
}

.boxlist_09{
    position: absolute;
    left: -11px;
    bottom: -34px;
}

.boxlist_9_2{
    position: absolute;
    left: -5px;
    bottom: -23px;
}

.v_box_10{
    width: 548px;
    height: 475px;
    background-color: #f9b2c9;
    position: absolute;
    bottom: 1300px;
    left: 0;
    clip-path: polygon(0 11%, 100% 0, 100% 91%, 0% 100%);
    overflow: hidden;
}

.boxlist_10{
    position: absolute;
    left: -79px;
    bottom: -31px;
}

.v_box_11{
    width: 1189px;
    height: 903px;
    background-color: #ffc3da;
    position: absolute;
    bottom: 1344px;
    right: 0;
    clip-path: polygon(0 0, 100% 16%, 100% 87%, 0% 100%);
}

.boxlist_11{
    position: absolute;
    left: -55px;
    bottom: -144px;
}

.boxlist_11_2{
    position: absolute;
    left: 285px;
    bottom: 87px;

}

.v_box_12{
    width: 1098px;
    height: 601px;
    background-color: #a2e0f6;
    position: absolute;
    left: 0;
    bottom: 741px;
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
}

.boxlist_12{
    position: absolute;
    right: 0;
    bottom: 40px;
}

.boxlist_12_2{
    position: absolute;
    left: 330px;
    bottom: 25px;
}

.boxlist_12_3{
    position: absolute;
    left: 4px;
    bottom: -78px;
}

.v_box_13{
    width: 638px;
    height: 669px;
    background-color: #a2e0f6;
    position: absolute;
    right: 0;
    bottom: 739px;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
}

.boxlist_13{
    position: absolute;
    right: -18px;
    bottom: -19px;
}

.boxlist_13_1{
    position: absolute;
    right: -1px;
    bottom: -3px;
}



.v_box_14{
    width: 1780px;
    height: 702px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

.boxlist_14_3{
    position: absolute;
    left: 301px;
    bottom: -107px;

}

.boxlist_14_2 {
    position: absolute;
    left: 570px;
    bottom: 29px
}

.con1_button{
    position: absolute;
    width: 291px;
    height: 114px;
    right: 0;
    bottom: 0;
}

.button_1_1{
    position: absolute;
    right: 25px;
    bottom: 30px;
}

.button_1_2{
    position: absolute;
    right: 64px;
    bottom: 64px;
}

/* =====================================
   (A) #menu : 큰 메뉴판 슬라이드 인/아웃
===================================== */
#menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 680px;
    height: 100vh;
    background-color: #241a17;

    /* 처음에는 화면 왼쪽 밖 */
    transform: translateX(-100%);
    opacity: 0;
    z-index: 9999;       /* ← 항상 위에 두기 */
    pointer-events: none;

    /* 메뉴박스와 동일한 시간으로 통일 (0.45s) */
    transition:
        transform 0.45s cubic-bezier(0.25, 0.9, 0.3, 1),
        opacity 0.45s ease-out;
}

/* 열릴 때 */
#menu.on{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* X 버튼 위치 - 건드리지 않음 */
.menu_box_x{
    position: absolute;
    top: 44px;
    left: 55px;
}


/* =====================================
   (B) 메뉴 박스 4개 인/아웃
===================================== */
.menu_box_01,
.menu_box_02,
.menu_box_03,
.menu_box_04{
    position: relative;

    /* 기본 상태: 왼쪽으로 빠져 있음 */
    transform: translateX(-80px);
    opacity: 0;

    /* #menu와 동일하게 0.45초 */
    transition:
        transform 0.45s cubic-bezier(0.25, 0.9, 0.3, 1),
        opacity 0.45s ease-out;
}

/* 등장 상태 */
.menu_box_in{
    transform: translateX(0);
    opacity: 1;
}


/* =====================================
   (C) 텍스트 이미지 위치 + hover 그대로 유지
===================================== */
/* (너가 올린 그대로 복붙한 내용 — 절대 수정 안 함) */

.menu_box_t_1, .menu_box_t_2{
    position: absolute;
    top: 177px; left: 52px;
}
.menu_box_t_3, .menu_box_t_4{
    position: absolute;
    top: 292px; left: 52px;
}
.menu_box_t_5, .menu_box_t_6{
    position: absolute;
    top: 405px; left: 52px;
}
.menu_box_t_7, .menu_box_t_8{
    position: absolute;
    top: 518px; left: 52px;
}

.menu_box_t_1 img,
.menu_box_t_3 img,
.menu_box_t_5 img,
.menu_box_t_7 img{
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.menu_box_t_2 img,
.menu_box_t_4 img,
.menu_box_t_6 img,
.menu_box_t_8 img{
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.menu_box_t_1,
.menu_box_t_2,
.menu_box_t_3,
.menu_box_t_4,
.menu_box_t_5,
.menu_box_t_6,
.menu_box_t_7,
.menu_box_t_8{
    transition: transform 0.25s ease-out;
}

/* hover 시 색 + 오른쪽으로 6px 이동 */
.menu_box_01:hover .menu_box_t_1 img{ opacity:0; }
.menu_box_01:hover .menu_box_t_2 img{ opacity:1; }
.menu_box_01:hover .menu_box_t_1,
.menu_box_01:hover .menu_box_t_2{ transform:translateX(6px); }

.menu_box_02:hover .menu_box_t_3 img{ opacity:0; }
.menu_box_02:hover .menu_box_t_4 img{ opacity:1; }
.menu_box_02:hover .menu_box_t_3,
.menu_box_02:hover .menu_box_t_4{ transform:translateX(6px); }

.menu_box_03:hover .menu_box_t_5 img{ opacity:0; }
.menu_box_03:hover .menu_box_t_6 img{ opacity:1; }
.menu_box_03:hover .menu_box_t_5,
.menu_box_03:hover .menu_box_t_6{ transform:translateX(6px); }

.menu_box_04:hover .menu_box_t_7 img{ opacity:0; }
.menu_box_04:hover .menu_box_t_8 img{ opacity:1; }
.menu_box_04:hover .menu_box_t_7,
.menu_box_04:hover .menu_box_t_8{ transform:translateX(6px); }