#dim_list{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 999;
}
.dim_bg{
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 60%;
}
.dim_list_1{
    position: absolute;
    left: 59px;
    top: 69px;
}

.dim_main_text{
    position: absolute;
    top: 399px;
    left: 688px;
}
.dim_but_box{
    cursor: pointer;
}

.dim_but_1{
    position: absolute;
    top: 558px;
    left: 871px;
}

.dim_but_2{
    position: absolute;
    top: 573px;
    left: 1018px;
}

#menu{
    height: 100vh;
    width: 680px;
    background-color: #241a17;
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
    transition: all 1s;
    cursor: pointer;
}
#menu.on{
    opacity: 1;
    z-index: 999;
}

.menu_box_x{
    position: absolute;
    top: 44px;
    left: 55px;

}

.menu_box_t_1{
    position: absolute;
    top: 177px;
    left: 52px;
}

.menu_box_t_2{
    position: absolute;
    top: 177px;
    left: 52px;
}


.menu_box_t_3{
    position: absolute;
    top: 292px;
    left: 52px;
}

.menu_box_t_4{
    position: absolute;
    top: 292px;
    left: 52px;
}

.menu_box_t_5{
    position: absolute;
    left: 52px;
    top: 405px;
}

.menu_box_t_6{
    position: absolute;
    left: 52px;
    top: 405px;
}

.menu_box_t_7{
    position: absolute;
    left: 52px;
    top: 518px;
}

.menu_box_t_8{
    position: absolute;
    left: 52px;
    top: 518px;
}




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

.div_box{
    width: 100vw;
    height: 3590px;
    border: black;
}

.div_box_01{
    width: 1920px;
    height: 980px;
    position: absolute;
}


.con2_bg{
    position: absolute;
    top: 0;
    left: 0;
}

.con2_list{
    position: absolute;
    left: 59px;
    top: 69px;
}

.room_icon_01{
    position: absolute;
    left: 830px;
    top: 0;

}

.room_icon_01_1{
    position: absolute;
    left: 639px;
    top: 74px;
    transform-origin: top center;
}

.room_icon_02{
    position: absolute;
    left: 0;
    bottom: 0;
}

.room_icon_02_1{
    position: absolute;
    left: -30px;
    bottom: 211px;
}

.room_icon_03{
    position: absolute;
    right: 26px;
    bottom: 120px;
}

.room_icon_04{
    position: absolute;
    right: 13px;
    bottom: 80px;
    transform-origin: top center;
}

.room_05{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 145px;
    height: 300px;
    cursor: pointer;
}

.room_icon_05_1 , .room_icon_05_2{
    position: absolute;
    right: 5px;
    top: 0;
}
.room_icon_05_1:hover img{
    opacity: 0;
}
.room_icon_05_2{
    opacity: 0;
    left: 20px;
    bottom: -150px;
    top: -45px;

}

.room_icon_06{
    width: 160px;
    height: 160px;
    position: absolute;
    right: 518px;
    bottom: 79px;
    cursor: pointer;
}

.room_icon_06_1{
    position: absolute;
    right: 502px;
    bottom: 64px;
}

.room_07{
    position: absolute;
    width: 483px;
    height: 165px;
    right: 0;
    bottom: 384px;
    cursor: pointer;
}

.room_icon_07_1, .room_icon_07_2{
    position: absolute;
    left: 0;
}

.room_icon_07_2{
    /*opacity: 0;*/
}
.room_icon_07_1:hover img{
    opacity: 0;
}


.room_08{
    width: 645px;
    height: 345px;
    position: absolute;
    left: -32px;
    bottom: 190px;
}

.room_icon_08_1{
    position: absolute;
    right: 0;
    bottom: 0;
}

.room_icon_08_2{
    position: absolute;
    right: 151px;
    top: 173px;
}

.room_icon_08_3{
    position: absolute;
    right: 4px;
    top: 127px;
}

.sc_but{
    height: 75px;
    width: 100vw;
    position: absolute;
    bottom: 11px;
}

.dim_box{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
}

.sc_1, .sc_2{
    position: absolute;
    left: 930px;
    /*transform: translateY(-5px);*/
}

.sc_2{
    top: 25px;
}

.sc_3{
    position: absolute;
    bottom: 8px;
    left: 928px;
}


.div_box_02{/*2550*/
    position: absolute;
    top: 980px;
    width: 100vw;
    height: 2485px; /*수치가바뀜*/
}

.div_box_02_01{ /*920*/
    width: 100vw;
    height: 920px;
    border-radius: 40px 40px 0 0;
    background: #241a17;
    position: relative;
}


.list_text_1{
    position: absolute;
    left: 58px;
    top: 105px;
}

.swiper_wrap{
    width: 1804px;
    /*height: 500px;*/
    position: absolute;
    left: 58px;
}
.swiper {
    width: 100%;
    height: 550px;
    position: absolute;
    top: 250px;
}
.swiper-wrapper{
    height: 450px;
    position: absolute;
    left: -13px;
}
.swiper-slide {
    width: 622px;
    height: 479px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.swiper-slide:nth-child(odd){*/
/*    width: 622px;*/
/*    height: 479px;*/
/*}*/
.img_dim{
    width: 623px;
    height: 392px;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    transition: all 1s;
}
.img_dim.on{
    background: rgba(0,0,0,0);
}

.swiper-scrollbar{
    background: #60524e;
}
.swiper-scrollbar-drag{
    background: #907973;
}

.div_box_02_02{ /*1630*/
    width: 100vw;
    height: 1565px; /*수치가 바뀜*/
    background-color: #241a17;
}

.list_box_m_f{
    width: 100vw;
    height: 1462px;
    position: relative;
    bottom: -100px;
}

.list_box_music_01{
    width: 100vw;
    height: 1046px;
}




.list_text_2{
    position: absolute;
    left: 58px;
}

/*여기서부터 뮤직*/

.music_box_01_1{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 123px;
    margin-bottom: 40px;
}

.m_box_01_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_01{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_01{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}
.m_box_hover_01.on{
    opacity: 1;
}
/*.m_box_text_01:hover img{*/
/*    opacity: 0;*/
/*}*/

.m_box_hr_01{
    position: absolute;
    left: 0;
    bottom: 0;
}
.record_scale {
    transform: scale(0.8);
}
.m_box_record_01{
    position: absolute;
    left: 985px;
    top: -18px;
    opacity: 0;
}
.m_box_record_01.on{
    opacity: 1;
    z-index: 99;
}


/*여기서부터 뮤직한박스씩*/

.music_box_01_2{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 219px;
}

.m_box_02_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_02{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_02{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}
.m_box_hover_02.on{
    opacity: 1;
}

.m_box_hr_02{
    position: absolute;
    left: 0;
    bottom: 0;
}

.m_box_record_02{
    position: absolute;
    left: 705px;
    top: -18px;
    opacity: 0;
}
.m_box_record_02.on{
    opacity: 1;
    z-index: 99;
}

/*여기서부터 뮤직한박스씩*/

.music_box_01_3{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 325px;
}

.m_box_03_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_03{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_03{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}

.m_box_hover_03.on{
    opacity: 1;
}
.m_box_text_03:hover img{
    opacity: 0;
}

.m_box_hr_03{
    position: absolute;
    left: 0;
    bottom: 0;
}

.m_box_record_03{
    position: absolute;
    left: 600px;
    top: -18px;
    opacity: 0;
}
.m_box_record_03.on{
    opacity: 1;
    z-index: 99;
}


/*여기서부터 뮤직한박스씩*/

.music_box_01_4{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 426px;
}

.m_box_04_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_04{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_04{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}

.m_box_hover_04.on{
    opacity: 1;
}

.m_box_hr_04{
    position: absolute;
    left: 0;
    bottom: 0;
}

.m_box_record_04{
    position: absolute;
    left: 1015px;
    top: -18px;
    opacity: 0;
}
.m_box_record_04.on{
    opacity: 1;
    z-index: 99;
}


/*여기서부터 뮤직한박스씩*/

.music_box_01_5{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 525px;
}

.m_box_05_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_05{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_05{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}

.m_box_hover_05.on{
    opacity: 1;
}

.m_box_hr_05{
    position: absolute;
    left: 0;
    bottom: 0;
}

.m_box_record_05{
    position: absolute;
    left: 478px;
    top: -18px;
    opacity: 0;
}
.m_box_record_05.on{
    opacity: 1;
    z-index: 99;
}


/*여기서부터 뮤직한박스씩*/


.music_box_01_6{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 625px;
}

.m_box_06_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_06{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_06{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}

.m_box_hover_06.on{
    opacity: 1;
}

.m_box_hr_06{
    position: absolute;
    left: 0;
    bottom: 0;
}

.m_box_record_06{
    position: absolute;
    left: 347px;
    top: -18px;
    opacity: 0;
}
.m_box_record_06.on{
    opacity: 1;
    z-index: 99;
}


/*여기서부터 뮤직한박스씩*/

.music_box_01_7{
    width: 1817px;
    height: 128px;
    position: absolute;
    left: 59px;
    top: 728px;
}

.m_box_07_01{
    position: absolute;
    left: 0;
    top: 55px;
}

.m_box_text_07{
    position: absolute;
    left: 95px;
    top: 53px;
}

.m_box_hover_07{
    position: absolute;
    left: 95px;
    top: 53px;
    opacity: 0;
}

.m_box_hover_07.on{
    opacity: 1;
}

.m_box_hr_07{
    position: absolute;
    left: 0;
    bottom: 0;
}

.m_box_record_07{
    position: absolute;
    left: 861px;
    top: -18px;
    opacity: 0;
}
.m_box_record_07.on{
    opacity: 1;
    z-index: 99;
}


/*여기서부터 뮤직한박스씩*/

.list_box_f{
    position: absolute;
    width: 100vw;
    height: 306px;
    left: 0;
    bottom: -20px;
}

.f_box_01{
    position: absolute;
    left: 4%;
    top: -27%;
    

}

.f_box_02{
    position: absolute;
    left: 4%;
}

.f_box_03{
    position: absolute;
    right:5%;

}

.pop_up{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    transition: all 1s;
    opacity: 0;
    z-index: -1;
    overflow: hidden;
}
#pop01.on,
#pop02.on,
#pop03.on{
    opacity: 1;
    z-index: 9999;
}

.pop_box_1{
    position: relative;
    left: 0;
    top: 0;
}

.pop_box_blo{
    position: absolute;
    left: 563px;
    bottom: 115px;
}

.pop_box_sh_01{
    position: absolute;
    right: 836px;
    bottom: 87px;
}

.pop_box_but_01{
    position: absolute;
    left: 58px;
    bottom: 120px;
}

.pop_box_but_x_01{
    position: absolute;
    right: 59px;
    top: 46px;
}

.pop_box_but_x_02{
    position: absolute;
    right: 59px;
    top: 46px;
    opacity: 0;
}


.pop_box_2{
    position: relative;
    left: 0;
    top: 0;
}

.pop_box_bb{
    position: absolute;
    left: 765px;
    bottom: 115px;
}

 .pop_box_sh_02{
     position: absolute;
     right: 919px;
     bottom: 117px;
 }

.pop_box_but_02{
    position: absolute;
    left: 58px;
    bottom: 119px;
}

.pop_box_but_x_03{
    position: absolute;
    right: 59px;
    top: 46px;
}

.pop_box_but_x_04{
    position: absolute;
    right: 59px;
    top: 46px;
    opacity: 0;
}



.pop_box_3{
    position: relative;
    left: 0;
    top: 0;
}

.pop_box_but{
    position: absolute;
    left: 765px;
    bottom: 164px;
}

.pop_box_sh_03{
    position: absolute;
    right: 1026px;
    bottom: 156px;
}

.pop_box_but_03{
    position: absolute;
    left: 58px;
    bottom: 120px;
}

.pop_box_but_x_05{
    position: absolute;
    right: 59px;
    top: 46px;
}

.pop_box_but_x_06{
    position: absolute;
    right: 59px;
    top: 46px;
    opacity: 0;
}


/* =====================================
   공통 메뉴 (#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;

    /* 메뉴박스와 동일 시간 */
    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;
}

/* =====================================
   메뉴 박스 4개 (HOME / CHARACTER / …)
===================================== */
.menu_box_01,
.menu_box_02,
.menu_box_03,
.menu_box_04{
    position: relative;

    /* 기본: 왼쪽에 숨어 있음 */
    transform: translateX(-80px);
    opacity: 0;

    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;
}

/* =====================================
   텍스트 이미지 위치 + 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;
}
/* hover용(흰색) 이미지 */
.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;
}

/* 1번째 메뉴 hover */
.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);
}

/* 2번째 메뉴 hover */
.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);
}

/* 3번째 메뉴 hover */
.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);
}

/* 4번째 메뉴 hover */
.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);
}