/************************************************************
 * 공통, 이벤트, 표시 관련
 ************************************************************/
 .event-de-active{
    pointer-events: none;
}
.event-active {
    pointer-events: auto;
    cursor: pointer;
}

.event-active-1 {
    pointer-events: auto;

}

/* 클릭 가능 여부와는 별개로, display: none 처리를 하는 클래스 */
.display_hidden {
    display: none;
    pointer-events: none;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.show_pop_up {
    display: block;
    z-index: 999;
}

.opacity_hide {
    opacity: 0;
    pointer-events: none; 
}

/************************************************************
 * 인트로 화면
 ************************************************************/
.intro_icn_land {
    position: absolute;
    left: 40px;
    top: 30px;
    width: 120px;
    height: 120px;
}
.intro_img_title {
    /* 위치·크기는 예시이므로 필요에 맞게 조정 */
    position: absolute;
}
.button_start {
    position: absolute;
    top: 705px;
    left: 789px;
    transition: transform 0.3s;
}

.hover_1_1 {
    transition: transform 0.3s;
}

.hover_1_1:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
}

/************************************************************
 * 학습 목표 팝업
 ************************************************************/
.goal_area {
    position: absolute;
    top: 0;
    left: 0;
}
.button_sound_area {
    position: absolute;
    top: 355px;
    left: 199px;
}
.goal_area .button_sound_area > img {
    position: absolute;
    width: 73px;
    height: 73px;
    opacity: 1;
}
.goal_area .button_sound_area.play > img:nth-child(2) {
    opacity: 0;
}
.button_close_area {
    position: absolute;
    top: 363px;
    right: 209px;
}

/************************************************************
 * 가이드 컨테이너
 ************************************************************/
 .guid-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #f5f5f5;

    overflow: hidden;

}

  /* 중앙 이미지 절대 배치 */
  #characterImage {
    position: absolute;
    top: 391.5px;
    left: 710px;

    /* 원하는 크기 */
    width: 478.52px;   /* 예시 */
    height: 428.5px;
    
    /* z-index가 필요한 경우 */
    z-index: 2;
  }

  .balloon_container {
    position: absolute;
    width: 621px;
    height: 304px; 
    z-index: 3;  
    top: 243px; left: 1127px;
  }
  
  /* 모든 말풍선은 절대 위치 (컨테이너 기준) */
  .balloon_container .balloon {
    position: absolute;
    /**/
  }


  .guid-content .arrow_left {
    position: absolute;
    width: 22px;
    height: 36px;
    top: 238px;
    left: 122.6px;
    background-image: url("../image/main/icn_arrorw_prev_on_s.png");
    background-size: 100% 100%;
}



.guid-content .arrow_right {
    position: absolute;
    width: 22px;
    height: 36px;
    top: 238px;
    left: 557px;
    background-image: url("../image/main/icn_arrorw_next_on_s.png");
    background-size: 100% 100%;
}



/* 나가기 버튼 */
.balloon_container .btn_exit {
    position: absolute;
    top: 31px; /* 말풍선 아래쪽 예시 */
    left: 553px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: url("../image//main/icn_x_s.png");
  }
  
  /* 사운드 버튼  */
  .balloon_container .btn_sound_area {
    position: absolute;
    top: 25px; /* 말풍선 아래쪽 예시 */
    left: 85px;
    width: 50px;
    height: 50px;
    cursor: pointer;

  }

.balloon_container .btn_sound_area > img {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 1;
}

.balloon_container .btn_sound_area.play > img:nth-child(2) {
    opacity: 0;
}
  /* on/off 이미지를 교체하거나, JS 로직에서 background-image를 바꿀 수도 있음 */
  
  /* 체크 버튼*/
  .balloon_container .btn_check {
    position: absolute;
    top: 310px; /* 말풍선 아래쪽 예시 */
    left: 220px;

    width: 248px;
    height: 108px;
    cursor: pointer;
    background: url("../image/main/btn_ok_s.png");
  }


  

/************************************************************
 * 메인 컨테이너(가로 드래그 스크롤)
 ************************************************************/
.scroll-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #f5f5f5;

    /* 커스텀 드래그 방식이라 overflow: hidden */
    overflow: hidden;


}
.scroll-container:active {
    cursor: pointerbing;
}
.scroll-container img {
    height: 100%; 
    display: block;
    user-select: none;
}

.scroll-container .map-button {
    cursor: pointer;
}

.scroll-container .map-button .pointer {
    width: 158px;
    height: 176px;
    position: absolute;
    top: 130px;
    left: 90px;
    background-image: url("../image/icn_click.png");
}

.scroll-container .guide_icon {
    width: 1395px;
    height: 388px;
    position: absolute;
    top: 250px;
    left: 300px;

    background-image: url("../image/main/scroll_guid.png");
}

 /* 화살표 버튼 스타일 (예시) */
 .common_layer .arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 69px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    z-index: 10; /* 스크롤 컨테이너보다 앞에 보여지도록 */
  }
  .common_layer  .arrow-left {
    left: 30px;
    background-image: url("../image/icn_left_arrorw_big_off.png");
  }
  .common_layer  .arrow-right {
    right: 30px;
    background-image: url("../image/icn_right_arrorw_big_off.png");
  }

  .common_layer .arrow-left:hover {
    background-image: url("../image/icn_left_arrorw_big_on.png");

  }

  .common_layer .arrow-right:hover {
    background-image: url("../image/icn_right_arrorw_big_on.png");

  }


/************************************************************
 * 메뉴 버튼 영역
 ************************************************************/
.content_menu_area .type_target {
    position: absolute;
    top: 18px;
    left: 30px;
}
.content_menu_area .type_help {
    position: absolute;
    top: 18px;
    left: 338px;
}
.content_menu_area .type_game {
    position: absolute;
    top: 16px;
    right: 144px;
}

.menu_area .type_bgm,
.content_menu_area .type_bgm {
    position: absolute;
    top: 25px;
    left: 1800px;
    width: 73px;
    height: 73px;
}
/* 혹은 .menu_area .type_bgm 사용 시에도 동일 위치 적용 */
.type_bgm > img {
    opacity: 1;
    position: absolute;
}
#common_container.bgm_play .type_bgm > img:nth-child(2) {
    opacity: 0;
}

.type_game .game_menu_star {
    width: 44px;
    height: 44px;
    background-image: url("../image/Check_stage_done.png");
    opacity: 0;
}

.type_game .game_menu_star.show {
    opacity: 1;
}

.type_game .game_menu_star.location1{
    position: absolute;
    top: 20px;
    left: 8px;
}

.type_game .game_menu_star.location2{
    position: absolute;
    top: 20px;
    left: 70px;
}

.type_game .game_menu_star.location3{
    position: absolute;
    top: 20px;
    left: 132px;
}

.type_game .game_menu_star.location4{
    position: absolute;
    top: 20px;
    left: 194px;
}


.type_game .game_menu_star.location5{
    position: absolute;
    top: 20px;
    left: 256px;
}


/************************************************************
 * 튜토리얼 팝업
 ************************************************************/

.tutorial_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1020px;
}
.tutorial_area > img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
/* 튜토리얼 각 페이지별 표시 */
.tutorial_area.select1 > img:nth-child(1) {opacity: 1;}
.tutorial_area.select2 > img:nth-child(2) {opacity: 1;}
.tutorial_area.select3 > img:nth-child(3) {opacity: 1;}
.tutorial_area.select4 > img:nth-child(4) {opacity: 1;}
.tutorial_area.select5 > img:nth-child(5) {opacity: 1;}
.tutorial_area.select6 > img:nth-child(6) {opacity: 1;}
.tutorial_area.select7 > img:nth-child(7) {opacity: 1;}
.tutorial_area.select8 > img:nth-child(8) {opacity: 1;}

.tutorial_container_area .arrow_left {
    position: absolute;
    width: 49px;
    height: 84px;
    top: 914px;
    left: 719px;
    background-image: url("../image/tutorial/icn_arrorw_prev_off.png");
    background-size: 100% 100%;
    cursor: default;
}
.tutorial_container_area .arrow_left.on {
    background-image: url("../image/tutorial/icn_arrorw_prev_on.png");
    cursor: pointer;
}
.tutorial_container_area .arrow_right {
    position: absolute;
    width: 49px;
    height: 84px;
    top: 914px;
    right: 706px;
    background-image: url("../image/tutorial/icn_arrorw_next_off.png");
    background-size: 100% 100%;
    cursor: default;
}
.tutorial_container_area .arrow_right.on {
    background-image: url("../image/tutorial/icn_arrorw_next_on.png");
    cursor: pointer;
}
.tutorial_close {
    width: 190px;
    height: 89px;
    position: absolute;
    top: 16px;
    left: 865px;
    background-image: url("../image/tutorial/btn_exit_tutorial.png");
}

/************************************************************
 * 별(학습이력) 표시
 ************************************************************/
.star_1 {
    position: absolute;
    top: 22px;
    left: 80px;
}


/************************************************************
 * 컨텐츠 화면
 ************************************************************/
 .back_btn_common{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 90px;
    height: 90px;
}


.spot1 .menu_area .title_area {
    position: absolute;
    top: 38px;
    left: 882px;
}

.spot2 .menu_area .title_area {
    position: absolute;
    top: 38px;
    left: 732px;
}

.spot3 .menu_area .title_area {
    position: absolute;
    top: 38px;
    left: 882px;
}

.spot4 .menu_area .title_area {
    position: absolute;
    top: 38px;
    left: 882px;
}

.spot5 .menu_area .title_area {
    position: absolute;
    top: 38px;
    left: 822px;
}



 .left_menu_group .menu_0{
    position: absolute;
    top: 267px;
    left: 40px;
}
.left_menu_group .menu_1{
    position: absolute;
    top: 431px;
    left: 40px;
}
.left_menu_group .menu_2{
    position: absolute;
    top: 595px;
    left: 40px;
}


.menu_area .button_menu_area {
    width: 144px;
    height: 158px;
    transition: transform 0.3s;
}

.menu_area .button_menu_area:hover {
    z-index: 99;
    transform: scale(1.1); 
}

.menu_area .button_menu_area > img {
    position: absolute;
    top: 0;
    left: 0;
}

.menu_area .button_menu_area > img:nth-child(2) {
    opacity: 1;
}

.menu_area .button_menu_area.select > img:nth-child(2) {
    opacity: 0;
}

.menu_area .button_menu_area > img:nth-child(1) {
    opacity: 0;
}

.menu_area .button_menu_area.select > img:nth-child(1) {
    opacity: 1;
}


/************************************************************
 * 컨턴츠 메뉴
 ************************************************************/


.content_area {
    opacity: 0;
    pointer-events: none;
    display: none;
}

.content_area.select {
    opacity: 1;
    pointer-events: auto;
    display:block;
}



/************************************************************
 * 특징 메뉴
 ************************************************************/

 .star_menu .small_type {
    display: none;
}

 .star_menu .small_type.show {
    display: block;
}

 .star_menu .big_type {
    display: none;
}

 .star_menu .big_type.show {
    display: block;
}



 .star_menu .small_type .image_content_area {
    position: absolute;
    width: 1108px;
    height: 512px;
    /*background-image: url("../image/star_small_image_bg.png");*/

    border-radius: 34px;
    border: 2px solid #C1CDD0;
    background: #FCFCFB;
    /*box-shadow: 0px 0px 61px 13px #000;*/

    top: 146px;
    left: 491px;

    overflow: hidden;
}

 .star_menu .small_type .arrow_left {
    position: absolute;
    width: 49px;
    height: 84px;
    top: 362px;
    left: 410px;
    background-image: url("../image/icn_arrorw_prev_off.png");
    background-size: 100% 100%;
    cursor: default;
}

 .star_menu .small_type .arrow_left.on {
    background-image: url("../image/icn_arrorw_prev_on.png");
    cursor: pointer;
}



 .star_menu .small_type .arrow_right {
    position: absolute;
    width: 49px;
    height: 84px;
    top: 362px;
    right: 240px;
    background-image: url("../image/icn_arrorw_next_off.png");
    background-size: 100% 100%;
    cursor: default;
}

 .star_menu .small_type .arrow_right.on {
    background-image: url("../image/icn_arrorw_next_on.png");
    cursor: pointer;
    
}


 .star_menu .image_content_area > img{
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;
}


 .star_menu.select1 .image_content_area > img:nth-child(1) {opacity: 1;}
 .star_menu.select2 .image_content_area > img:nth-child(2) {opacity: 1;}
 .star_menu.select3 .image_content_area > img:nth-child(3) {opacity: 1;}
 .star_menu.select4 .image_content_area > img:nth-child(4) {opacity: 1;}
 .star_menu.select5 .image_content_area > img:nth-child(5) {opacity: 1;}



 .star_menu .small_type .navi_area {
    position: absolute;
    bottom: 316px;
    left: 952px;

    width: 186px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;   
}


 .star_menu .navi_area .node{
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background-color: #D4DDDB;
}

 .star_menu .navi_area .node.on{
    background-color: #08C8D4;
}




 .star_menu.on .big_type .toggle_button_area {
    /*border-radius: 0 0 34px 34px;*/
    background: #E6EBED;
}

 .star_menu .big_type .toggle_button_area > img {
    position: absolute;
    top: 14px;
    left: 24px;
}


 .star_menu .small_type .toggle_button_area {
    position: absolute;

    bottom: 0;
    width: 100%;
    height: 70px;
}

 .star_menu.on .small_type .toggle_button_area {
    /*border-radius: 0 0 34px 34px;*/
    background: #E6EBED;
}

 .star_menu .small_type .toggle_button_area > img {
    position: absolute;
    top: 10px;
    left: 31px;
}

 .star_menu .toggle_button_area > img:nth-child(1) {
    opacity: 1;
}
 .star_menu .toggle_button_area > img:nth-child(2) {
    opacity: 0;
}

 .star_menu.on .toggle_button_area > img:nth-child(1) {
    opacity: 0;
}
 .star_menu.on .toggle_button_area > img:nth-child(2) {
    opacity: 1;
}

 .star_menu .small_type .image_content_area .text_area > div {
    width: 1088px;
    height: 70px;
    position: absolute;
    right: 0;
    bottom: 0;

    opacity: 0;

    color: #161414;
    text-align: center;
    
    font-family: "Noto Sans KR";
    font-size: 38px;
    font-style: normal;
    font-weight: 500;
    line-height: 70px;
}

 .star_menu.select1 .image_content_area > img:nth-child(1) {opacity: 1;}
 .star_menu.select2 .image_content_area > img:nth-child(2) {opacity: 1;}
 .star_menu.select3 .image_content_area > img:nth-child(3) {opacity: 1;}
 .star_menu.select4 .image_content_area > img:nth-child(4) {opacity: 1;}
 .star_menu.select5 .image_content_area > img:nth-child(5) {opacity: 1;}

 .star_menu.on.select1 .image_content_area .text_area > div:nth-child(1) {opacity: 1;}
 .star_menu.on.select2 .image_content_area .text_area > div:nth-child(2) {opacity: 1;}
 .star_menu.on.select3 .image_content_area .text_area > div:nth-child(3) {opacity: 1;}
 .star_menu.on.select4 .image_content_area .text_area > div:nth-child(4) {opacity: 1;}
 .star_menu.on.select5 .image_content_area .text_area > div:nth-child(5) {opacity: 1;}





 .star_menu .small_type .info_area .info_button_area {
    width: 191px;
    height: 59px;
    position: absolute;
    right: 294px;
    bottom: 273px;
    background-image: url("../image/contents/btn_description_drop.png");
}

 .star_menu .small_type .info_area .info_contents_area {
    width: 1440px;
    height: 279px;
    position: absolute;
    right: 98px;
    bottom: 0;
    background-image: url("../image/contents/frame_star.png");
    cursor: default;
}

 .star_menu .small_type .info_area .info_contents_area .btn_sound_area{
    width: 73px;
    height: 73px;
    position: absolute;
    left: 31px;
    top: 31px;
}

.btn_sound_area > img{
    position: absolute;
    opacity: 1;
}

.btn_sound_area.play > img:nth-child(2){
    opacity: 0;
}

 .star_menu .small_type .info_area .info_contents_area .text_area{
    width: 1066px;
    height: 238px;
    position: absolute;
    left: 162px;
    top: 20px;

    overflow: auto;
    cursor: default;

    /*background-color: black;*/
}
 .star_menu .small_type .info_area .info_contents_area .text_area::-webkit-scrollbar {
    width: 22px;
}
 .star_menu .small_type .info_area .info_contents_area .text_area::-webkit-scrollbar-thumb {
    background-color: #7F4AEF;
    border-radius: 8px;
    background-clip: padding-box;
    border: 2px solid transparent;
}
 .star_menu .small_type .info_area .info_contents_area .text_area::-webkit-scrollbar-track {
    border-radius: 8px;
    border: 2px solid #9093C9;
    opacity: 0.85;
    background: #989AC3;
}

 .star_menu .small_type .info_area .info_contents_area .text_area .text_info {
    color: #161414;
    font-family: "Noto Sans KR";
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    line-height: 62px;
    text-indent: -30px;
    padding-left: 60px;
}
 .star_menu .small_type .info_area .info_contents_area .text_area .text_info:before {
    content: url('../image/Check_star.png'); /* 이미지 경로를 설정합니다 */
    display: inline-block; /* 이미지와 텍스트를 같은 줄에 배치 */
    /*width: 40px; !* 이미지의 너비 설정 *!*/
    /*height: 40px; !* 이미지의 높이 설정 *!*/
    margin-right: 10px; /* 텍스트와 이미지 사이의 간격 */
    vertical-align: middle;
}


 .star_menu .small_type .info_area .info_contents_area.play_1 .text_area > .text_info:nth-child(1) {
    color: #FF430F;
}
 .star_menu .small_type .info_area .info_contents_area.play_2 .text_area > .text_info:nth-child(2) {
    color: #FF430F;
}
 .star_menu .small_type .info_area .info_contents_area.play_3 .text_area > .text_info:nth-child(3) {
    color: #FF430F;
}
 .star_menu .small_type .info_area .info_contents_area.play_4 .text_area > .text_info:nth-child(4) {
    color: #FF430F;
}



 .star_menu .big_type {
    display: none;
}

 .star_menu .big_type.show {
    display: block;
}

 .star_menu .big_type .image_content_area {
    position: absolute;
    width: 1551px;
    height: 717px;
    /*background-image: url("../image/star_small_image_bg.png");*/

    border-radius: 34px;
    border: 2px solid #C1CDD0;
    background: #FCFCFB;
    /*box-shadow: 0px 0px 61px 13px #000;*/

    top: 170px;
    left: 275px;

    overflow: hidden;
}





 .star_menu .big_type .navi_area {
    position: absolute;
    bottom: 83px;
    left: 958px;

    width: 186px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;   
}


 .star_menu .big_type .arrow_left {
    position: absolute;
    width: 49px;
    height: 84px;

    top: 492px;
    left: 305px;


    background-image: url("../image/icn_arrorw_prev_off.png");
    background-size: 100% 100%;
    cursor: default;
}

 .star_menu .big_type .arrow_left.on {

    background-image: url("../image/icn_arrorw_prev_on.png");
    cursor: pointer;
}

 .star_menu .big_type .arrow_right {
    position: absolute;
    width: 49px;
    height: 84px;

    top: 492px;
    right: 124px;

    background-image: url("../image/icn_arrorw_next_off.png");
    background-size: 100% 100%;
    cursor: default;
}

.star_menu .big_type .arrow_right.on {
    background-image: url("../image/icn_arrorw_next_on.png");
    cursor: pointer;
}


.star_menu .big_type .toggle_button_area {
    position: absolute;

    bottom: 0;
    width: 100%;
    height: 98px;
}


.star_menu .big_type .toggle_button_area > img {
    position: absolute;
    top: 14px;
    left: 24px;
}

.star_menu .big_type .image_content_area .text_area > div {
    width: 1522px;
    height: 98px;
    position: absolute;
    right: 0;
    bottom: 0;

    opacity: 0;

    color: #161414;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    line-height: 98px;
}

 .star_menu .big_type .info_area .info_button_area {
    width: 191px;
    height: 59px;
    position: absolute;
    right: 294px;
    bottom: 0;
    background-image: url("../image/contents/btn_description_open.png");
}


.button_moon{
    width: 900px;
    height: 900px;
    position: absolute;
    top: 105px;
    left: 531px;
    /* border: 1px solid red; */
    /*margin: 10px;*/
}



/************************************************************
 * 비디오 메뉴
 ************************************************************/


 .content_area .video_menu {
    opacity: 0;
    pointer-events: auto;
    display: none;
}

.content_area video{
    position:absolute;
    top: 188px;
    left: 410px;
    border-radius: 40px;
}

/* 모든 슬라이드는 기본적으로 숨김 */
.video_menu .video_slide {
    display: none;

  }
  
  /* index=0 → select1: 첫 번째 슬라이드만 보이기 */
  .video_menu.select1 .video_slide:nth-child(1) {
    display: block;
  }
  
  /* index=1 → select2: 두 번째 슬라이드만 보이기 */
  .video_menu.select2 .video_slide:nth-child(2) {
    display: block;
  }
  
  /* index=2 → select3: 세 번째 슬라이드만 보이기 */
  .video_menu.select3 .video_slide:nth-child(3) {
    display: block;
  }
  
  /* 오버레이 이미지(비디오 위에 표시될 이미지) */
.video_overlay_image {
    position: absolute;
    top: 206px;      /* 상단 여백  */
    left: 446px;     /* 왼쪽 여백 */
    height: auto;
    z-index: 10;    /* 비디오보다 위에 표시되도록 높은 z-index */
    pointer-events: none;
}

.video_round_image { 
    position: absolute;
    top: 184px;      /* 상단 여백  */
    left: 406px;     /* 왼쪽 여백 */
    height: auto;
    z-index: 12;    /* 비디오보다 위에 표시되도록 높은 z-index */
    pointer-events: none;
    width: 1328px;
    height: 750px;
}

.content_area .video_btn{
    position: absolute;
    z-index: 11; 
    width: 1320px;
    height: 742px;
    top: 188px;
    left: 410px;
    background-color:rgba(0,0,0,0.5);
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius: 40px;
}

.video_btn .video_icn{
    width: 190px;
    height: 198px;
    z-index: 12; /* <-- 추가 */
}

.video_btn .video_icn_replay.replay{
    background-image: url("../image/icn_replay_big.png");
    background-repeat: no-repeat;
}
.video_btn .video_icn_replay.play{
    background-image: url("../image/icn_play_big.png");
    background-repeat: no-repeat;
}

/* ===== 비디오 컨트롤 숨김/보이기 ===== */
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-fullscreen-button {
  transform: scale(1.4);
  transform-origin: bottom center;
}
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 커스텀 show-controls 클래스 → 마우스가 하단부에 있을 때만 controls 표시 */
/* (자바스크립트에서 .show-controls를 붙였다 뗄 수 있음) */
.videoPlayer:not(.show-controls)::-webkit-media-controls {
  display: none;
}
.videoPlayer:not(.show-controls)::-moz-media-controls {
  display: none;
}
.videoPlayer:not(.show-controls)::-ms-media-controls {
  display: none;
}

/* 왼쪽 화살표 */
.video_menu .arrow_left {
    position: absolute;
    width: 51px;
    height: 86px;
    top: 526px;      /* 필요 시 조정 */
    left: 300px;     /* 필요 시 조정 */
    background-image: url("../image/icn_arrorw_prev_off.png");
    background-size: 100% 100%;
    cursor: default;
    
}

/* 왼쪽 화살표 활성 상태 */
.video_menu .arrow_left.on {
    background-image: url("../image/icn_arrorw_prev_on.png");
    cursor: pointer;
}

/* 오른쪽 화살표 */
.video_menu .arrow_right {
    position: absolute;
    width: 51px;
    height: 86px;
    top: 526px;      /* 필요 시 조정 */
    left: 1784px;    /* 필요 시 조정 */
    background-image: url("../image/icn_arrorw_next_off.png");
    background-size: 100% 100%;
    cursor: default;
}

/* 오른쪽 화살표 활성 상태 */
.video_menu .arrow_right.on {
    background-image: url("../image/icn_arrorw_next_on.png");
    cursor: pointer;
}



/* 네비게이션(dot) 스타일 */
.video_menu .navi_area {
    position: absolute;
    bottom: 30px;
    left: 1042px;    /* 필요 시 조정 */
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }
  .video_menu .navi_area .node {
    width: 18px;
    height: 18px;
    background: gray;
    border-radius: 50%;
    cursor: default;
  }
  .video_menu .navi_area .node.on {
    background: #08C8D4; /* 원하는 색상 코드 */
  }


 /************************************************************
 * 지도 메뉴
 ************************************************************/
 .map_menu .map_bg {
    width: 1920px;
    height: 1020px;
    position: absolute;
    top: 0;
    left: 0;

  }

  .map_menu .map_bg .map_bg_img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 필요 시 조정: cover, contain 등 */
    display: block;    /* 이미지 사이 공백 제거 */
  }

.map_menu .spot_area {
   
    width: 433px;
    height: 335px;

}

.map_menu .spot_area.location1 {
    position: absolute;
    left: 1327px;
    top: 307px;
   background-image: url("../image/contents/comp_img_spot1.png"); 
}

.map_menu .spot_area.location2 {
    position: absolute;
    left: 1325px;
    top: 277px;
    background-image: url("../image/contents/comp_img_spot2.png");
}
 
.map_menu .spot_area.location3 {
    position: absolute;
    left: 1253px;
    top: 246px;
    background-image: url("../image/contents/comp_img_spot3.png");
}

.map_menu .spot_area.location4 {
    position: absolute;
    left: 1253px;
    top: 246px;
    background-image: url("../image/contents/comp_img_spot4.png");
}

.map_menu .spot_area .pointer {
    width: 158px;
    height: 176px;
    position: absolute;
    top: 110px;
    left: 147px;
    background-image: url("../image/icn_click.png");
}



/************************************************************
 * 로딩 화면
 ************************************************************/
 .loading_area .loading_img {
    width: 428px;
    height: 231px;

    position: absolute;

    top: 318px;
    left: 716px;

    background-image: url("../image/loading/img_loading_chr.png");
}

.loading_area .loading_text_v2 {
    width: 222px;
    height: 49px;

    position: absolute;

    top: 647px;
    left: 854px;

    background-image: url("../image/loading/img_loading_text.png");
}

.loading_area .loading_text_area {
    width: 250px;
    height: 53px;

    position: absolute;

    right: 814px;
    bottom: 389px;
}
.loading_area .loading_text_area > img{
    width: 250px;
    height: 53px;
    position: absolute;
}
.loading_area {
    z-index: 9999;
}
.loading_area .loading_text_area > img:nth-child(2){
    opacity: 0;
}
.loading_area .loading_text_area > img:nth-child(3){
    opacity: 0;
}
.loading_area .loading_text_area > img:nth-child(4){
    opacity: 0;
}

.loading_area .loading_text_area.step2 > img:nth-child(1){opacity: 0;}
.loading_area .loading_text_area.step2 > img:nth-child(2){opacity: 1;}
.loading_area .loading_text_area.step2 > img:nth-child(3){opacity: 0;}
.loading_area .loading_text_area.step2 > img:nth-child(4){opacity: 0;}

.loading_area .loading_text_area.step3 > img:nth-child(1){opacity: 0;}
.loading_area .loading_text_area.step3 > img:nth-child(2){opacity: 0;}
.loading_area .loading_text_area.step3 > img:nth-child(3){opacity: 1;}
.loading_area .loading_text_area.step3 > img:nth-child(4){opacity: 0;}

.loading_area .loading_text_area.step4 > img:nth-child(1){opacity: 0;}
.loading_area .loading_text_area.step4 > img:nth-child(2){opacity: 0;}
.loading_area .loading_text_area.step4 > img:nth-child(3){opacity: 0;}
.loading_area .loading_text_area.step4 > img:nth-child(4){opacity: 1;}



/************************************************************
 * 게임 팝업
 ************************************************************/

 .game_info_area .title_area {
    width: 1920px;
    height: 1020px;

    position: absolute;

    top: 0;
    left: 0;
}

.game_info_area.state0 .title_area{
    background-image: url("../image/popup_game_start_incomplete00.png");
}
.game_info_area.state1 .title_area{
    background-image: url("../image/popup_game_start_incomplete01.png");
}
.game_info_area.state2 .title_area{
    background-image: url("../image/popup_game_start_incomplete02.png");
}
.game_info_area.state3 .title_area{
    background-image: url("../image/popup_game_start_incomplete03.png");
}
.game_info_area.state4 .title_area{
    background-image: url("../image/popup_game_start_incomplete04.png");
}
.game_info_area.state5 .title_area{
    background-image: url("../image/popup_game_start_complete.png");
}


.game_info_area .button_start_area {
    width: 384px;
    height: 171px;

    position: absolute;

    top: 665px;
    left: 564px;

    background-image: url("../image/btn_ok_m.png");
}

.game_info_area .button_close_area {
    width: 384px;
    height: 171px;

    position: absolute;

    top: 665px;
    right: 564px;

    background-image: url("../image/btn_no_m.png");
}

/************************************************************
 * 인트로 화면
 ************************************************************/
.game_area .game_intro {
    width: 1920px;
    height: 1020px;

    position: absolute;

    top: 0;
    left: 0;
    /*background-color: black;*/
    background-image: url("../image/game/bg_game_title.png");

    z-index: 4;
}

.game_area .game_intro .btn_start_area {
    width: 428px;
    height: 170px;

    position: absolute;

    top: 668px;
    left: 746px;

    background-image: url("../image/game/btn_start.png");
}

.game_area .game_intro .button_back_area {
    width: 89px;
    height: 88px;
    position: absolute;
    top: 12px;
    left: 40px;
    background-image: url("../image/game/icn_back_white.png");

    z-index: 4;
}

/************************************************************
 * 실제 게임
 ************************************************************/
.game_area .game_bg {
    width: 1920px;
    height: 1020px;

    position: absolute;

    top: 0;
    left: 0;

    background-image: url("../image/game/bg_game.png");
}


.game_area .content_top .button_back_area {
    width: 89px;
    height: 88px;
    position: absolute;
    top: 12px;
    left: 40px;
    background-image: url("../image/game/icn_back.png");

    z-index: 4;
}

.game_area .btn_sound_area{
    width: 73px;
    height: 73px;
    position: absolute;
    left: 40px;
    top: 132px;
}


.type_game_bgm {
    width: 72px;
    height: 72px;
    position: absolute;
    top: 20px;
    right: 48px;
}

.type_game_bgm > img {
    position: absolute;
    opacity: 1;
}


#gameContainer.bgm_play .type_game_bgm > img:nth-child(2) {
    opacity: 0;
}

.content_top .progressTimer{
    width: 598px;
    height: 61px;
    position: absolute;
    top: 21px;
    left: 658px;
    background-image: url('../image/game/bg_progressbar.png');
    background-position: center;
    background-size: contain;
    display: flex;
    justify-content: center;
}

.progressTimer .timer_icn{
    display: flex;
    width: 75px;
    height: 75px;
    padding: 4px 4px 2px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    top: -13px;
    left: -55px;
    background-image: url('../image/game/img_timer.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}

.progressTimer .progressTimer_fill{
    width: 580px;
    height: 42px;
    position: absolute;
    top: 8px;
    left: 7px;
    border: 2px solid #FFFCB0;
    background: #FFE914;
}

.progressTimer .progressTimer_fill.timeover{
    border:none;
}

.progressTimer .progressTimer_text{
    color: #ffffff;
    text-align: center;
    font-family: Jalnan;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:1;
    margin-top:8px;
}
#gameContainer .progressTimer #pTimer_text{
    z-index:2;
    margin-top:6px;
}
#gameContainer .progressTimer #pTimer_text_ver2{
    position:absolute;
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: #2C969C;
}


/************************************************************
 * 게임 컨텐츠
 ************************************************************/

 /* 타이틀 */
#gameContainer .game_question_area {
    position: absolute;
    left: 50%;             /* 수평 중앙 정렬의 시작점 */
    top: 240px;           /* 세로 위치는 240px 고정 */
    transform: translateX(-50%); /* 중앙에서 자기 절반만큼 왼쪽으로 이동 */
    text-align: center;   /* 내부 텍스트도 가운데 정렬 */

    width: 100%; 
}

#gameContainer .game_question_area .question_text {
    font-family: 'Jalnan', sans-serif;
    color: #FFFFFF; /* 폰트 색상 흰색 */
}


/* 3개의 슬라이드 컨테이너 */
.game_slides_container {
    display: flex;
    flex-direction: column; /* 세로로 3개 슬라이드 */
    align-items: center;
    gap: 10px;
    margin: 370px auto 0; /* 예시: 위에서 397px 떨어지고, 중앙정렬 */
    width: 890px;
   
  }
  
  /* 각 슬라이드(세로로 3개) */
  .game_slides_container .slide_block {
    position: relative;
    width: 890px;
    height: 172px; /* 예시 크기 */
    overflow: visible;
  }
  
  /* 슬라이드 이미지 */
  .game_slides_container .slide_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 왼쪽 화살표 */
  .game_slides_container .arrow_left {
    position: absolute;
    top: 50%;
    left: -80px;                       /* 슬라이드의 왼쪽 끝 */
    transform: translateY(-50%);   /* 수직 중앙 정렬 */
    width: 51px;
    height: 86px;
    background-image: url("../image/icn_arrorw_prev_on.png");
    background-size: 100% 100%;
    cursor: pointer;               /* 클릭 가능 표시 */
  }
  
  /* 왼쪽 화살표 활성 상태 */
  .game_slides_container .arrow_left.on {
    background-image: url("../image/icn_arrorw_prev_on.png");
  }
  
  /* 오른쪽 화살표 */
  .game_slides_container .arrow_right {
    position: absolute;
    top: 50%;
    right: -80px;                     /* 슬라이드의 오른쪽 끝 */
    transform: translateY(-50%);   /* 수직 중앙 정렬 */
    width: 51px;
    height: 86px;
    background-image: url("../image/icn_arrorw_next_on.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  
  /* 오른쪽 화살표 활성 상태 */
  .game_slides_container .arrow_right.on {
    background-image: url("../image/icn_arrorw_next_on.png");
  }
  
  /* 확인 버튼 영역 */
  .game_confirm_area {
    position: relative; /* 혹은 상위 영역에서 relative를 주고, 아래 confirm_btn은 absolute */
  }
  
  /* 확인 버튼 */
  .game_confirm_area .confirm_btn {
    position: absolute;       /* 절대 위치로 배치 */
    bottom:-50px;             /* 부모(.game_confirm_area) 기준 하단 10px */
    right: 10px;              /* 부모(.game_confirm_area) 기준 오른쪽 20px */
    width: 346px;
    height: 170px;
    background: url("../image/game/btn_ok_small.png") no-repeat center;
    background-size: cover;   /* 혹은 contain / 100% 100% */
    cursor: pointer;
  }

/* 팝업 최상위 컨테이너: 화면 전체 덮기 */
.game_result_area {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 최상위 레이어 */
  }
  
  /* 어두운 반투명 배경 */
  .game_result_area .common_dim {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 1; /* 배경(가장 아래) */
  }
  
  /* 결과 이미지 */
  .game_result_area #resultImage {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* dim보다 위에 오도록 */

  }
  
 /* "다음" 버튼 */
/* 공통 스타일 */
.next_btn{
    position:absolute;
    top:720px;
    left:1154px;
    width:346px;
    height:170px;
    cursor:pointer;
    z-index:2;   /* dim 위에 */
  }
  
  /* 문제 넘어가기용 스킨 */
  .skin-next{
    background:url("../image/game/btn_nextq_small.png") no-repeat center / cover;
  }
  
  /* 결과 보기용 스킨 */
  .skin-result{
    background:url("../image/game/btn_result_small.png") no-repeat center / cover;
  }
  


 /* 팝업 최상위 컨테이너: 화면 전체 덮기 */
.game_final_result_area {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 최상위 레이어 */
  }
  
  /* 어두운 반투명 배경 */
  .game_final_result_area .common_dim {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 1; /* 배경(가장 아래) */
  }
  
  /* 결과 이미지 */
  .game_final_result_area #finalResultImage {
    position: absolute;
    top: 80px; left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* dim보다 위에 오도록 */

  }
  
  /* 다시풀기 버튼 */
  #btnRetry {
    position: absolute;
    top: 820px;
    left: 612px;
    width: 346px;
    height: 170px;
    background: url("../image/game/btn_retry_small.png");
    cursor: pointer;
    z-index: 2; /* dim보다 위에 오도록 */

  }
  
  /* 나가기 버튼 */
  #btnExit {
    position: absolute;
    top: 820px;
    left: 962px;
    width: 346px;
    height: 170px;
    background: url("../image/game/btn_exit_small.png");
    cursor: pointer;
    z-index: 2; /* dim보다 위에 오도록 */

  }


  .game_area.lv_1_o .answer_area .node:nth-child(6) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_1_x .answer_area .node:nth-child(6) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_1_o .answer_area .node:nth-child(7) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_1_x .answer_area .node:nth-child(7) > img:nth-child(3) { opacity: 1; }
  
  .game_area.lv_2_o .answer_area .node:nth-child(13) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_2_x .answer_area .node:nth-child(13) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_2_o .answer_area .node:nth-child(18) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_2_x .answer_area .node:nth-child(18) > img:nth-child(3) { opacity: 1; }
  
  .game_area.lv_3_o .answer_area .node:nth-child(4) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_3_x .answer_area .node:nth-child(4) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_3_o .answer_area .node:nth-child(8) > img:nth-child(3) { opacity: 1; }
  .game_area.lv_3_x .answer_area .node:nth-child(8) > img:nth-child(3) { opacity: 1; }
  
  .game_area.lv_1_o .answer_area .node:nth-child(6)  {pointer-events: none; cursor: none}
  .game_area.lv_1_x .answer_area .node:nth-child(6)  {pointer-events: none; cursor: none }
  .game_area.lv_1_o .answer_area .node:nth-child(7)  {pointer-events: none; cursor: none }
  .game_area.lv_1_x .answer_area .node:nth-child(7)  {pointer-events: none; cursor: none }
  
  .game_area.lv_2_o .answer_area .node:nth-child(13)  {pointer-events: none; cursor: none }
  .game_area.lv_2_x .answer_area .node:nth-child(13)  {pointer-events: none; cursor: none }
  .game_area.lv_2_o .answer_area .node:nth-child(18)  {pointer-events: none; cursor: none }
  .game_area.lv_2_x .answer_area .node:nth-child(18)  {pointer-events: none; cursor: none }
  
  .game_area.lv_3_o .answer_area .node:nth-child(4)  {pointer-events: none; cursor: none }
  .game_area.lv_3_x .answer_area .node:nth-child(4)  {pointer-events: none; cursor: none }
  .game_area.lv_3_o .answer_area .node:nth-child(8)  {pointer-events: none; cursor: none }
  .game_area.lv_3_x .answer_area .node:nth-child(8)  {pointer-events: none; cursor: none }
  
  
  .game_area .content_top .content_tab {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 128px;
  }
  
  .game_area .content_top .content_tab > img {
      position: absolute;
      opacity: 0;
  }
  .game_area .content_top .content_tab > img:nth-child(1) {
      opacity: 1;
  }
  
  .game_area .content_top .content_tab.content_tab1 {right: 256px;}
  .game_area .content_top .content_tab.content_tab2 {right: 148px;}
  .game_area .content_top .content_tab.content_tab3 {right: 40px;}
  
  .game_area.lv_1 .content_top .content_tab:nth-child(1) > img:nth-child(2) {opacity: 1;}
  .game_area.lv_1_o .content_top .content_tab:nth-child(1) > img:nth-child(3) {opacity: 1;}
  .game_area.lv_1_x .content_top .content_tab:nth-child(1) > img:nth-child(4) {opacity: 1;}
  
  .game_area.lv_2 .content_top .content_tab:nth-child(2) > img:nth-child(2) {opacity: 1;}
  .game_area.lv_2_o .content_top .content_tab:nth-child(2) > img:nth-child(3) {opacity: 1;}
  .game_area.lv_2_x .content_top .content_tab:nth-child(2) > img:nth-child(4) {opacity: 1;}
  
  .game_area.lv_3 .content_top .content_tab:nth-child(3) > img:nth-child(2) {opacity: 1;}
  .game_area.lv_3_o .content_top .content_tab:nth-child(3) > img:nth-child(3) {opacity: 1;}
  .game_area.lv_3_x .content_top .content_tab:nth-child(3) > img:nth-child(4) {opacity: 1;}