:root {
  --project-main-color: #EE2D24;
}


/* common */
.btn_style {background: #da291c; transition: all 0.4s;}
.btn_style span {font-size: 20px; color: #fff;}
.btn_style:hover {background: #fff;}
.btn_style:hover span {color: #da291c;}
.start_btn_style { padding: 12px 72px; background: #8200FF; opacity: 1; -webkit-transition: opacity .4s; transition: opacity .4s; }
.start_btn_style:hover, .start_btn_style:focus { opacity: .75;}

/* base ------------------------------------------------------------------------------------------------------------ */
/* scroll bar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #535353; border-radius: 20px; }

html body, html button, html input, html select, html table, html textarea {color: #515151;}
html, html body { width: 100%; height: 100%; overflow-y: hidden; }
#app { width: 100%; height: 100%; }
.scroll_auto, .scroll_auto body { overflow-y: visible !important; }
.mbr_block {display: block;}
/* nav ------------------------------------------------------------------------------------------------------------ */
/* header */

/* nav */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 52px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.header .header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
}

.header .header-wrap > .left {
  display: flex;
}
.header .header-wrap > .left .site_logo {
  display: block;
  padding-right: 22px;
}
.header .header-wrap .suwon {
  padding-left: 20px;
  border-left: 2px solid #da291c;
}

.site_logo h1 {
  height: 26px;
}

.site_logo h1 img {
  height: 100%;
}

/* nav */
.inc_wrap .list_menu {
  display: flex;
  align-items: center;
}
.inc_wrap .list_item > a {
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.inc_wrap .list_item {
  position: relative;
}

.inc_wrap .list_item .can_move_page span {
  position: relative; font-size: 16px; font-weight: 600;
}

.inc_wrap .list_item .can_move_page span::before {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 3px; background: var(--project-main-color); -webkit-transition: width .4s ease-in-out; transition: width .4s ease-in-out;
}
.inc_wrap .list_item .can_move_page span.en {font-size: 14px;}

.inc_wrap .list_item:hover .can_move_page span::before, .inc_wrap .list_item.is_selected .can_move_page span::before, .inc_wrap .list_item:focus .can_move_page span::before {
  width: 100%;
}

.inc_wrap .has_2depth {
  display: none;
  position: absolute;
  left: 0;
  width: 120%;
  background-color: rgba(0,0,0,.5);
  color: #fff;
}

.inc_wrap .has_2depth li {
  transition: background-color .3s;
}

.inc_wrap .has_2depth li a {
  display: block;
  padding: 10px 10px;
  word-break: keep-all;
}
.inc_wrap .has_2depth li a span.en {
  font-size: 14px;
}

.inc_wrap .has_2depth li:hover, .inc_wrap .has_2depth li.now_tour {
  background-color: var(--project-main-color);
}

/* right header*/
/* global */
.global-list {
  display: flex;
  align-items: center;
}

.global-item:first-child {
  margin-left: 0;
}

.global-item.btn_help_pop {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: 12px;
  border-radius: 28px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

.global-item.btn_help_pop button {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: 24px;
  outline: 0;
  background-image: url(../../static/img/icon/ico_help.svg);
}


/* 언어 버튼 */
.lang_2depth {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,.3);
  border-radius: 30px;
  padding: 4px;
  border: 1px solid #fff;
}
.btn_lang_change:first-child {
  padding-right: 4px;
}
.btn_lang_change a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 100%;
}

.btn_lang_change a span {
  font-size: 14px;
  color: #fff;
  padding: 6px;
}
.lang_kr .btn_change_ko a {
  background-color: var(--project-main-color);
}
.lang_en .btn_change_en a {
  background-color: var(--project-main-color);
}

.right .lang_2depth {
  background-color: rgba(0,0,0,.3);
}

.nav_btn {
  display: none;
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.nav_btn button {
  width: 100%; height: 100%; background: url('../../static/img/icon/icon_nav_btn.svg') no-repeat center center; background-size: 100% 100%;
}

@media screen and (min-width: 1023px) {
  .inc_wrap {
    height: 100%;
  }
  .inc_wrap nav {
    height: 100%;
  }
  .inc_wrap .list_menu {
    height: 100%;
  }
  .inc_wrap .list_item {
    height: 100%;
  }
  .inc_wrap .list_item > a {
    height: 100%;
  }
  .inc_wrap .list_item:hover >.has_2depth {
    display: block;
  }
}

@media screen and (max-width: 1200px) {
  .inc_wrap .list_item span.kr {
    font-size: 15px;
  }
  .inc_wrap .has_2depth li a span.en {
    font-size: 13px;
  }  
  .inc_wrap .list_item .can_move_page span.en {
    font-size: 13px;
  }
}
@media screen and (max-width: 1023px) {
  .header .header-wrap {
    position: relative;
    height: 50px;
  }
  .inc_wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(255,255,255,.7);
  }
  .inc_wrap.open {
    display: block;
  }
  .inc_wrap .list_menu {
    flex-direction: column;
  }
  .inc_wrap .list_item {
    width: 100%;
  }
  
  .inc_wrap .list_item > a {
    position: relative;
    width: 100%;
    padding: 16px;
  }
  .inc_wrap .list_item > a::before {
    content: '';
    position: absolute;
    right: 42px;
    top: 0;
    width: 28px;
    height: 100%;
    background: url('../../static/img/icon/ico_Rarrow_2x.png') no-repeat center center; background-size: 100% auto;
    transform: rotate(90deg) translateY(-50%);
    -webkit-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
  }
  .inc_wrap .list_item span::before {
    content: unset;
  }
  .inc_wrap .has_2depth {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 0;
  }
  .inc_wrap .list_item .can_move_page.open ~ .has_2depth {
    height: 100%;
    transition: height .3s;
  }
  /* right */
  .header-wrap .right {
    display: flex;
    align-items: center;
  }
  .global-item {
    margin-left: 8px;
  }
  .nav_btn {
    display: block;
  }
}
@media screen and (max-width: 690px) {
  .site_logo h1 {
    height: 20px;
  }
  .global-item .btn_help_pop {
    background-size: 20px;
  }
}
@media screen and (max-width: 480px) {
  .header .header-wrap {
    padding: 0 10px;
  }
  .header .header-wrap > .left .site_logo {
    padding-right: 2.917vw;
  }
  .header .header-wrap .suwon {
    padding-left: 2.5vw;
  }
  .site_logo h1 {
    height: 15px;
  }
  .global-item .btn_help_pop {
    background-size: 18px;
  }
}

/* page - Hall Common -------------------------------------------------------------------------------------- */
.hall {width: 100%; height: 100%; padding-top: 53px;}
.hall .contents {position: relative; width: 100%; height: 100%;}
.vr-player { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; }
.vr-player .vr-iframe { width: 100% !important; height: 100% !important; border: 0px; }

/* modal ------------------------------------------------------------------------------------------------------------- */
/* common */
.modal {visibility: hidden; position: fixed; top: 52px; left: 0; right: 0; bottom: 0; z-index: 300; font-size: 16px; font-weight: 400; letter-spacing: -.8px; line-height: 1.87; color: #fff; word-break: keep-all;}
.modal.open { visibility: visible; }

/* modal_inner Common */
.modal .modal_inner {position: absolute; top: 50%; left: 50%; width: 100%; max-width: 810px; height: auto; padding: 40px; text-align: left; background: rgba(0, 0, 0, 0.8); border-radius: 5px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.modal .btn_wrap {margin-top: 24px; text-align: right;}

/* modal_inner1 */
.modal_inner-text .desc_img {display: flex; justify-content: center; align-items: center; width: 90%; margin: auto; padding-top: 10px;}
.modal_inner-text .desc_img span {width: 18%; padding: 0 10px;}
.modal_inner-text .desc_img span:last-child {width: 34%;}
.modal_inner-text .desc_img span img {width: 100%;}

/* modal_inner2 */
.modal .modal_inner:not(:first-child) {display: none;}
.modal .modal_inner.modal_inner_help {max-width: none; height: 100%; background: transparent;}
.modal .modal_inner.modal_inner_help .help_desc {line-height: 1.5; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);}
.modal .modal_inner .modal_help-center {position: absolute; top: 35%; left: 50%; width: 536px; padding: 0; -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%);}
.modal .modal_inner .modal_help-center-desc {background: rgba(0, 0, 0, 0.7); border-radius: 5px; padding: 30px; max-height: 62vh; overflow: auto;}
.modal .modal_inner .modal_help-center .modal_help-control-item {font-size: 0;}
.modal .modal_inner .modal_help-center .modal_help-control-item:first-child {padding-top: 16px;}
.modal .modal_inner .modal_help-center .modal_help-control-item:not(:first-child) {margin-top: 16px; padding-top: 16px; border-top: 1px solid #5a5a5a;}
.modal .modal_inner .modal_help-center .modal_help-control-item .item_wrap {display: block; position: relative;}
.modal .modal_inner .modal_help-center .modal_help-control-item .img_wrap {position: relative; display: inline-block; width: 40px; height: 40px; vertical-align: middle;}
.modal .modal_inner .modal_help-center .modal_help-control-item .img_wrap img {position: absolute; width: 100%; height: 100%;}
.modal .modal_inner .modal_help-center .modal_help-control-item .img_desc {position: absolute; top: 50%; padding-left: 16px; font-size: 16px; letter-spacing: -1px; vertical-align: middle; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.modal .modal_inner .modal_help-center .modal_help-btn_unit {text-align: right; font-size: 0;}
.modal .modal_inner .modal_help-center .modal_help-btn_unit .btn_wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 10px;}
.modal .modal_inner .modal_help-center .chk_wrap-not_today { display: inline-block; vertical-align: middle;}
.modal .modal_inner .modal_help-center .inp_chk_wrap.inp_custom .inp_chk {overflow: hidden; position: absolute; top: 0; left: 0; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
.modal .modal_inner .modal_help-center .inp_chk_wrap.inp_custom .inp_chk+label { display: flex; align-items: center; justify-content: right; background: transparent; color: #fff; outline: 0;}
.modal .modal_inner .modal_help-center .inp_chk_wrap.inp_custom .inp_chk+label:before {width: 18px; height: 18px; background: url(../../static/img/icon/ico_check_enabled.svg); background-size: 18px; margin: 0 9px 0 0;}
.modal .modal_inner .modal_help-center .inp_chk_wrap.inp_custom .inp_chk:checked+label:before {background-image: url(../../static/img/icon/ico_check_activated.svg);}
.modal .modal_inner .modal_help-center .btn_wrap {display: inline-block; margin-top: 0; vertical-align: middle;}
.modal .modal_inner .modal_help-center .btn_wrap .btn {opacity: 1; -webkit-transition: opacity 0.4s; transition: opacity 0.4s;}
.modal .modal_inner .modal_help-center .btn_wrap .btn:hover,
.modal .modal_inner .modal_help-center .btn_wrap .btn:focus {opacity: 0.75;}

/* 221028_jane 추가 ---------------------------------- */
/* 공통 */
.modal .modal_inner .modal_help-innav .arrow_box { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.modal .help-innav_textbox .help-innav_title{color: #da291c!important;}

/* 상단 왼쪽 안내문 */
.modal .modal_inner .modal_help-innav.left {position: absolute; top: 105px; left: 9px;}
.modal .modal_inner .modal_help-innav.left .help-innav-type {display: block; position: relative; height: 50px;}
.modal .modal_inner .modal_help-innav.left .help-innav-type+.help-innav-type{margin-top: 8px;}
.modal .modal_inner .modal_help-innav.left .help-innav-type .help-innav_textbox {position: absolute; top: 0; left: 102px; width: 120px; margin-top: 40px;}
.modal .modal_inner .modal_help-innav.left .tour_minimap .help-innav_textbox {margin-top: 14px;}
.modal .modal_inner .modal_help-innav.left .tour_important .help-innav_textbox {margin-top: 40px;}
.modal .modal_inner .modal_help-innav.left .help-innav-type .help-innav_textbox p{font-size: 12px; color: #fff; line-height: 1.4; text-align: left; word-break: keep-all; letter-spacing: -0.5px; padding-top: 4px;}
.modal .modal_inner .modal_help-innav.left .tour_autoplay .help-innav_textbox{margin-right: 120px;}
.modal .modal_inner .modal_help-innav.left .tour_origin .help-innav_textbox{margin-bottom: 134px; margin-right: 50px;}
.modal .modal_inner .modal_help-innav.left .tour_fullscreen .help-innav_textbox{margin-right: -140px;}
.modal .modal_inner .modal_help-innav.left .help-innav-type:before {display: block; width: 56px; height: 56px; margin: 0 auto; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; content: "";}

/* 상단 오른쪽 안내문 */
.modal .modal_inner .modal_help-innav.right {position: absolute; top: 88px; right: 236px;}
.modal .modal_inner .modal_help-innav.right .help-innav-type {display: block; position: relative; height: 50px;}
.modal .modal_inner .modal_help-innav.right .tour_minimap {top: -102px; right: -25px;}
.modal .modal_inner .modal_help-innav.right .help-innav-type .help-innav_textbox {position: absolute; top: 0; left: 102px; width: 150px; margin-top: 40px;}
.modal .modal_inner .modal_help-innav.right .tour_minimap .help-innav_textbox {margin-top: -21px; left: -55px;}
.modal .modal_inner .modal_help-innav.right .tour_important .help-innav_textbox {margin-top: -10px; left: 48px;}
.modal .modal_inner .modal_help-innav.right .help-innav-type .help-innav_textbox p{font-size: 12px; color: #fff; line-height: 1.4; text-align: right; word-break: keep-all; letter-spacing: -0.5px; padding-top: 4px;}
.modal .modal_inner .modal_help-innav.right .tour_autoplay .help-innav_textbox{margin-right: 120px;}
.modal .modal_inner .modal_help-innav.right .tour_origin .help-innav_textbox{margin-bottom: 134px; margin-right: 50px;}
.modal .modal_inner .modal_help-innav.right .tour_fullscreen .help-innav_textbox{margin-right: -140px;}

/* 좌측 안내문 지시선 공통 */
.modal .modal_inner .modal_help-innav.left .arrow_box::before{
  content: ""; background: #da291c; position: absolute; top: 50%; margin-left: 50px;
}
.modal .modal_inner .modal_help-innav.left .arrow_box::after{
  content: ""; position: absolute; top: 0; left: 0; border: 2px solid #da291c; border-top: none; border-right: none;
}
/* 우측 안내문 지시선 공통 */
.modal .modal_inner .modal_help-innav.right .arrow_box::before{
  content: ""; background: #da291c; position: absolute; top: 50%; margin-left: 50px;
}
.modal .modal_inner .modal_help-innav.right .arrow_box::after{
  content: ""; position: absolute; top: 0; left: 0; border: 2px solid #da291c; border-top: none; border-right: none;
}
/* -------------------------- */
.modal .modal_inner .modal_help-innav.left .tour_minimap .arrow_box::before {width : 46px; height: 2px;}
.modal .modal_inner .modal_help-innav.left .tour_minimap .arrow_box::after {content: none;}
.modal .modal_inner .modal_help-innav.left .tour_important .arrow_box::before {width: 26px; height: 2px;}
.modal .modal_inner .modal_help-innav.left .tour_important .arrow_box::after {width: 20px; height: 18px; margin-left: 75px; margin-top: 25px;}
.modal .modal_inner .modal_help-innav.left .tour_theme .arrow_box::before {width: 24px; height: 2px;}
.modal .modal_inner .modal_help-innav.left .tour_theme .arrow_box::after {width: 20px; height: 26px; margin-left: 72px; margin-top: 25px;}

.modal .modal_inner .modal_help-innav.right .tour_minimap .arrow_box::before {width : 40px; height: 2px; margin-left: 100px; margin-top: -35px;}
.modal .modal_inner .modal_help-innav.right .tour_minimap .arrow_box::after {width: 0px; height: 22px; margin-left: 138px; margin-top: -34px;}
.modal .modal_inner .modal_help-innav.right .tour_important .arrow_box::after {width: 0px; height: 95px; margin-left: 202px; margin-top: -86px;}
.modal .modal_inner .modal_help-innav.right .tour_theme .arrow_box::before {width: 24px; height: 2px;}
.modal .modal_inner .modal_help-innav.right .tour_theme .arrow_box::after {width: 20px; height: 26px; margin-left: 72px; margin-top: 25px;}

.modal .modal_inner .modal_help-innav.left .help-innav-type.tour_minimap:before {background-image: url(../../static/img/icon/map.png);}
.modal .modal_inner .modal_help-innav.left .help-innav-type.tour_important:before {background-image: url(../../static/img/icon/spot.png);}
.modal .modal_inner .modal_help-innav.left .help-innav-type.tour_theme:before {background-image: url(../../static/img/icon/theme.png);}

/* 하단 안내문 */
.modal .modal_inner .modal_help-innav.bottom {position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);}
.modal .modal_inner .modal_help-innav.bottom .help-innav {font-size: 0;}
.modal .modal_inner .modal_help-innav.bottom .help-innav-type {display: inline-block; position: relative; width: 40px;}
.modal .modal_inner .modal_help-innav.bottom .help-innav-type .help-innav_textbox {position: absolute; bottom: 0; right: 0; width: 150px; margin-bottom: 29px;}
.modal .modal_inner .modal_help-innav.bottom .help-innav-type .help-innav_textbox p{font-size: 12px; color: #fff; line-height: 1.4; text-align: left; letter-spacing: -0.5px; padding-top: 4px; word-break: keep-all;}
.modal .modal_inner .modal_help-innav.bottom .tour_autoplay .help-innav_textbox{margin-right: 18px;}
.modal .modal_inner .modal_help-innav.bottom .tour_origin .help-innav_textbox{margin-bottom: 100px; margin-right: -118px;}
.modal .modal_inner .modal_help-innav.bottom .tour_fullscreen .help-innav_textbox{margin-right: -150px;}

.modal .modal_inner .modal_help-innav.bottom .help-innav-type:before {display: block; width: 20px; height: 20px; margin: 0 auto; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; content: "";}
/* 하단 안내문 지시선 공통 */
.modal .modal_inner .modal_help-innav.bottom .arrow_box::before{
  content: ""; background: #da291c; position: absolute; bottom: 0%; left: 0;
}
.modal .modal_inner .modal_help-innav.bottom .arrow_box::after{
  content: ""; background: #da291c; position: absolute; bottom: 0%; left: 50%; margin-bottom: 28px; transform: translateX(-50%);
}
/* -------------------------- */

.modal .modal_inner .modal_help-innav.bottom .tour_autoplay .arrow_box::before {width: 94px; height: 2px; margin-left: -74px; margin-bottom: 94px;}
.modal .modal_inner .modal_help-innav.bottom .tour_autoplay .arrow_box::after {width: 2px; height: 68px;}
.modal .modal_inner .modal_help-innav.bottom .tour_origin .arrow_box::before {content: none;}
.modal .modal_inner .modal_help-innav.bottom .tour_origin .arrow_box::after {width: 2px; height: 68px;}
.modal .modal_inner .modal_help-innav.bottom .tour_fullscreen .arrow_box::before {width: 14px; height: 2px; margin-left: 19px; margin-bottom: 76px;}
.modal .modal_inner .modal_help-innav.bottom .tour_fullscreen .arrow_box::after {width: 2px; height: 48px;}

.modal .modal_inner .modal_help-innav.bottom .help-innav-type.tour_autoplay:before {background-image: url(../../static/img/icon/btn-icon-player-autoplay-df.png);}
.modal .modal_inner .modal_help-innav.bottom .help-innav-type.tour_origin:before {background-image: url(../../static/img/icon/btn-icon-player-origin-df.png);}
.modal .modal_inner .modal_help-innav.bottom .help-innav-type.tour_fullscreen:before {background-image: url(../../static/img/icon/btn-icon-player-fullscreen-df.png);}

@media screen and (max-width: 1023px) {
  .hall{padding-top: 50px;}
  /* 좌측 모바일 도구 버튼 안내문*/
  .modal .modal_inner .modal_help-innav.left{display: none; top: auto; bottom: 60px; left: 12px;}
  .modal .modal_inner .modal_help-innav.left .help-innav{display: none;}
  .modal .modal_inner .modal_help-innav.right{top: 76px; right: 264px;}
  .modal .modal_inner .modal_help-innav.right .tour_minimap .arrow_box::before {
    margin-left: 130px;
  }
  .modal .modal_inner .modal_help-innav.right .tour_minimap .arrow_box::after {
    margin-left: 168px;
  }
  .modal .modal_inner .modal_help-innav.right .tour_minimap .help-innav_textbox {
    left: -25px;
  }
  .modal .modal_inner .modal_help-innav.right .tour_important .arrow_box::after {
    margin-left: 230px;
  }
  .modal .modal_inner .modal_help-innav.right .tour_important .help-innav_textbox {
    left: 75px;
  }
  .modal .modal_inner .modal_help-innav.bottom {bottom: 10px;}
  .modal .modal_inner .modal_help-innav.bottom .tour_autoplay .arrow_box::before {width: 40px; left: auto; right: 0; margin-right: -20px; margin-bottom: 152px;}
  .modal .modal_inner .modal_help-innav.bottom .tour_autoplay .arrow_box::after {height: 118px; margin-bottom: 36px;}
  .modal .modal_inner .modal_help-innav.bottom .tour_autoplay .help-innav_textbox {margin-right: -178px; margin-bottom: 92px;}
  .modal .modal_inner .modal_help-innav.bottom .tour_origin .arrow_box::after {height: 50px; margin-bottom: 36px;}
  .modal .modal_inner .modal_help-innav.bottom .tour_origin .help-innav_textbox {margin-bottom: 34px; margin-right: -136px;}
  .modal .modal_inner .modal_help-innav.bottom .help-innav-type{width: 44px;}
  .modal .modal_inner .modal_help-innav.bottom .help-innav-type:before{width: 24px; height: 24px;}
  .modal .modal_inner .modal_help-innav.bottom .tour_fullscreen{display: none;}
  
}

.modal_bg { visibility: hidden; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 110; width: 100%; height: 100%; background: #000; opacity: .5;}
.modal_bg.open {visibility: visible;}

/* 마우스 관람 안내문 style code*/
.mouse_tem .modal_inner .modal_help-center .modal_help-btn_unit .btn_wrap {justify-content: center;}
.mouse_tem .modal_inner .modal_help-center .btn_wrap .btn {padding: 0; margin: 0; margin-bottom: 10px; width: 50px; height: 50px; background: linear-gradient(147deg, #302e42 12%, #0a090d 112%); border-radius: 100%;}

.btn_menu {width: 50px; height: 50px; background: linear-gradient(147deg, #302e42 12%, #0a090d 112%); border-radius: 100%; -webkit-transition: opacity 0.4s; transition: opacity 0.4s;}
.btn_menu i {width: 22px; height: 2px; background-color: #fff; display: block; margin: 5px auto; border-radius: 1.5px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: 0px 0px 31px -2px rgba(0, 0, 0, 0.22); box-shadow: 0px 0px 31px -2px rgba(0, 0, 0, 0.22);}
.btn.btn_menu .top {transform: translateY(2px) rotate(45deg);}
.btn.btn_menu .bottom {transform: translateY(-5px) rotate(-45deg);}

@media screen and (max-width: 690px) {
  /* 마우스 관람 안내문 style code*/
  .btn.btn_menu .top {width: 17px; transform: translateY(3px) rotate(45deg);}
  .btn.btn_menu .bottom {width: 17px; transform: translateY(-4px) rotate(-45deg); margin: 5px auto;}
  .modal_inner .modal_inner-desc .inner_title .inner_title-text {font-size: 13px;}
  .modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc span {font-size: 13px;}
  .modal .modal_inner .modal_help-center .modal_help-btn_unit .btn_wrap{margin-bottom: 4px;}
}

@media screen and (max-width: 480px) {
  .btn_menu {width: 40px; height: 40px;}
  .mouse_tem .modal_inner .modal_help-center .btn_wrap .btn {width: 40px; height: 40px;}
}

.modal_inner .modal_inner-desc:not(:first-child) {padding: 14px 0 0 0 ;}
.modal_inner .modal_inner-desc .inner_title {position: relative; width: 100%; text-align: center;}
.modal_inner .modal_inner-desc .inner_title::before {content: ""; position: absolute; top: 50%; left: 0; width: 100%; border: 2px solid #da291c;}
.modal_inner .modal_inner-desc .inner_title .inner_title-text {display: inline-block; position: relative; padding: 5px 16px; background: #da291c; border-radius: 25px; font-size: 14px;}
.modal_inner .inner_mouse-box { display: flex; justify-content: space-between; align-items: center; padding-top: 16px;}
.modal_inner .inner_mouse-box .inner_each_mouse {width: 33.33%;}
.modal_inner .inner_mouse-box .inner_each_mouse .mouse_img {width: 50%; margin: auto;}
.modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc {text-align: center;}
.modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc p {font-size: 13px;}
.modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc p:nth-child(2) {font-weight: 200;}

@media screen and (max-width: 690px) {
  .modal_inner .modal_inner-desc .inner_title .inner_title-text {font-size: 13px;}
  .modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc span {font-size: 13px;}
}

@media screen and (max-width: 480px) {
  .modal .modal_inner .modal_help-innav.right .tour_important .arrow_box::after {
    height: 70px;
  }
  .modal .modal_inner .modal_help-innav.right .tour_important .help-innav_textbox {
    margin-top: -30px;
  }
  .modal .modal_inner .modal_help-innav.right .tour_minimap .help-innav_textbox{width: 120px; left: 4px;}
  .modal .modal_inner .modal_help-innav.right .help-innav-type .help-innav_textbox p {
    font-size: 11px;
  }
  .modal .modal_inner .modal_help-innav.bottom .help-innav-type .help-innav_textbox p{
    font-size: 11px;
  }
  .modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc p {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------*/

/* 비디오 루프 페이지 css */
.loop_video .loop_video_title {width: 100%; left: 0; text-align: center;}
.loop_video_title {position: fixed; left: 40px; bottom: 6%; z-index: 20; color: #fff; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);}
.main .afterPlay {margin-top: 1%;}


/* Media Query ------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1023px) {
  .mbr_block {display: none;}
  /* default btn */
  .common_btn { padding: 6px 14px; }
  .common_btn > span { font-size: 14px; }

  /* base */
  /* scroll bar */
  ::-webkit-scrollbar {width: 6px;}
  ::-webkit-scrollbar-thumb {border-radius: 10px;}
  html, html body { height: 100%; } 

  /* modal */
  .modal{top: 50px}
  .modal .modal_inner {max-width: 90%; padding: 28px 20px;}
  .modal .modal_inner .modal_help-center {transform: translate(-50%, -35%);}
  .modal .modal_inner .modal_help-center-desc {max-height: 50vh;}
  .modal_inner-text > p { font-size: 16px; }
  .modal_help-gnb {display: block;}
  .modal_help-tutorial{margin-top: -20px; margin-right: 4px;}
}

@media screen and (max-aspect-ratio: 1920 / 1016) {
  /* Page - Lobby */
  .lobby .contents .lobby_bg { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: auto; width: 100%; }
  .lobby .contents .lobby_bg .bg_img { height: auto; width: 100%; }
}

@media screen and (max-width: 1023px) and (orientation: landscape) {
  /* default btn */
  .common_btn { padding: 6px 14px; }
  .common_btn > span { font-size: 14px; }

  /* modal */
  .modal {font-size: 15px;}
  .modal_help-center .modal_help-control-item .img_wrap {width: 50px; height: 50px;}
}

@media screen and (max-width: 999px) {
  /* modal_inner2 */
  .modal_help-gnb{margin-left: 6px;}
  .modal_help-tutorial{margin-top: -25px;}
  .modal .modal_inner .modal_help-tutorial .tutorial_desc{margin-bottom: -65px; max-width: 200px;}
}

@media screen and (max-width: 690px) {
  /* modal */
  .modal .help_desc { font-size: 13px; }
  .modal_inner-text > p { font-size: 13px; line-height: 1.4; }
  .modal_inner-text > p h2 { font-size: 1.8rem; line-height: 1.4; }
  .modal_help-center { width: 90%!important; }
  .modal_help-center-desc {max-height: 45vh!important;}
  .modal_help-center .modal_help-control-item:not(:first-child) { margin-top: 8px; padding-top: 8px; }
  .modal_help-center .modal_help-control-item .img_wrap { width: 44px; height: 44px; }
  .modal_help-center .modal_help-control-item .img_desc { padding-left: 8px; font-size: 13px; }
  .modal_help-center .chk_wrap-not_today { margin-right: 20px; }
  .modal_help-center .inp_chk_wrap.inp_custom .inp_chk + label { font-size: 13px; }
  .modal_help-center .btn_wrap .common_btn { padding: 8px 48px; font-size: 14px; }
  .modal_help-gnb:before { width: 32px; height: 40px; }
  .modal_help-gnb .gnb_desc { margin-left: 20px; max-width: 240px; }
  .modal_help-gnb .tutorial_desc {width: 200px;}

  /* modal_inner2 */
  .modal_help-tutorial .tutorial_desc{max-width: 200px;}
  .modal .modal_inner .modal_help-tutorial .tutorial_desc{margin-bottom: -38px;}

  /* 마우스 관람 안내문 style code*/
  .btn.btn_menu .top {width: 17px; transform: translateY(3px) rotate(45deg);}
  .btn.btn_menu .bottom {width: 17px; transform: translateY(-4px) rotate(-45deg); margin: 5px auto;}
  .modal_inner .modal_inner-desc .inner_title .inner_title-text {font-size: 13px;}
  .modal_inner .inner_mouse-box .inner_each_mouse .mouse_desc span {font-size: 13px;}
}

@media screen and (max-width: 480px) {
  /* modal */
  
  .modal .help_desc { font-size: 13px; }
  .modal_inner-text > p { font-size: 13px; }
  .modal_help-center-desc {max-height: 40vh!important; }
  .modal .modal_inner .modal_help-center-desc {
    padding: 20px;
  }
  .modal_help-center .modal_help-control-item:not(:first-child) { margin-top: 8px; padding-top: 8px; }
  .modal_help-center .modal_help-control-item .img_wrap { width: 44px; height: 44px; }
  .modal_help-center .modal_help-control-item .img_desc { padding-left: 8px!important; font-size: 13px!important; line-height: 1.5; }
  .modal_help-gnb:before { width: 32px; height: 40px; }
  .modal_help-gnb .gnb_desc {margin-bottom: -36px; max-width: 50%; }
  .modal_inner.modal_inner_help .help_desc.tutorial_desc{max-width: 150px; margin-bottom: -56px;}
}

@media screen and (max-width: 340px) {
  /* default btn */
  .start_btn_style { padding: 4px 48px; font-size: 11px; }
  /* modal */
  .modal_help-gnb .gnb_desc{max-width: 40%; margin-bottom:-26px;}
  .modal_inner.modal_inner_help .help_desc.tutorial_desc{max-width: 100px; margin-bottom: -38px;}
  .modal .help_desc { font-size: 10px; }
  .modal_inner-text > p { font-size: 12px; }
  .modal_help-center .modal_help-control-item:not(:first-child) { margin-top: 4px; padding-top: 4px; }
  .modal_help-center .modal_help-control-item .img_wrap { width: 34px; height: 34px; }
  .modal_help-center .modal_help-control-item .img_desc { font-size: 10px; }
  .modal_help-center .modal_help-btn_unit { margin-top: 8px; }
  .modal_help-center .chk_wrap-not_today { margin-right: 10px; }
  .modal_help-global:before { top: 26px; width: 26px; height: 32px; }
  .modal_help-global .global_desc { margin-right: 16px; margin-top: 16px; }
}