.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


/* tuto css */
.tuto_wp {position:fixed; left:0; top:0; width:100%; height:100%; z-index:4; background:rgba(0,0,0,0.7);}
.tuto_wp .tuto_in {position:relative; width:100%; height:100%;}
.tuto_wp .tuto_in .tuto_center {position:absolute; left:50%; top:40%; transform: translate(-50%, -60%); z-index:3; width:100%; max-width:57.5rem; padding:5.5rem 6rem;}/* border:1px solid #E3E3E3; border-radius:2rem; background-color: rgba(0,0,0,0.1); backdrop-filter: blur(5px);*/
.tuto_wp .tuto_in .tuto_center .tt_info_txt {text-align:center; color:#fff; margin-bottom:4rem;}
.tuto_wp .tuto_in .tuto_center .tt_info_txt .if_txt1 {font-family: var(--entype1); font-size:3rem; line-height:3.4rem; font-weight:600;}
.tuto_wp .tuto_in .tuto_center .tt_info_txt .if_txt2 {font-family: var(--entype1); font-size:3.6rem; line-height:4rem; font-weight:600; margin-bottom:1.5rem;}
.tuto_wp .tuto_in .tuto_center .tt_info_txt .if_txt3 {font-size:2rem; line-height:2.4rem; font-weight:300; color:#E3E3E3;}
.tt_set {display:flex; gap:5rem; margin-bottom:4rem;}
.tt_set1 {width:100%; text-align:center; display:flex; flex-direction: column;}
.tt_set_t {font-size:2rem; font-weight:500; color:#fff;}
.tt_set_s {font-size:1.6rem; font-weight:300; color:#E3E3E3; margin-bottom:1.5rem;}
.tt_set_img {height:7.7rem;}
.tt_arr_img1 {height:2.85rem;}
.tt_arr_img2 {height:3.05rem;}
.tuto_bt1 {font-family: var(--entype1); font-size:1.7rem; font-weight:600; width:14.2rem; height:5rem; display:flex; align-items: center; justify-content: center; border-radius:3rem; border:3px solid #fff; background:none; color:#fff; margin:0 auto; cursor:pointer; transition: all ease 0.5s; text-shadow:1px 1px 0 rgba(0,0,0,0.9);}
.tuto_bt1:hover {background:var(--point-color-1);}
.tuto_map {position:absolute; left:50%; bottom:10%; transform: translate(-50%, -90%); z-index:5;}
.tuto_setting {position:absolute; right:6rem; top:55%; transform: translate(0, -45%); z-index:5; text-align:right;}
.tuto_board {position:absolute; left:6rem; top:55%; transform: translate(0, -45%); z-index:5; text-align:left;}

@media (max-width: 520px) {
	.tuto_map {bottom:16%; width:100%; padding:0 5%;}
}

@media (max-width: 460px) {
	.tuto_wp .tuto_in .tuto_center {padding:5rem 3rem; top:5%; transform: translate(-50%, 0);}
	.tt_set {gap:2rem;}	
	.tt_set_img {height:5rem;}	
}

/* main gnb */
button {
  border: none;
  cursor: pointer;
  font-family: Noto Sans KR;
}

.btm_nav_wrapper {
  width: 100%; 
  position: fixed;
  bottom: 3rem;
  z-index: 10; 
}

.btm_nav_container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap:1rem;
}

/* sound, app box */
.btn {
  width: 5rem;
  height: 5rem;
  border-radius: 2.5rem;
  background-color: rgba(0, 0, 0, 0.35);
  color: white;
  transition: background-color 0.3s;
}

.btn:hover {background-color:var(--point-color-1);}

.btn span {
	font-size:2rem;
}

.sound_container {
  height: 5rem;
}

/* 기능 메뉴, 설정 메뉴 */
.menu_wrapper {
  width: 11rem;
  height: 5rem;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 2.5rem;
  overflow-y: hidden;
  background-color: rgba(0, 0, 0, 0.35);
  transition: height 0.3s;
  margin: 0;
  padding-top:1rem;
}

.menu_btn {
  width: 100%;
  height: 3.8rem;
  display: flex;
  align-items: center;
  color: white;
  background-color: transparent;
}

.menu_wrapper:hover {
	height: auto;
}

.menu_btn > i {
	font-size:1.4rem;
	margin-left:0.7rem;
	opacity: 0.6;
	transition: opacity 1s;
}

.menu_btn > span {
  margin-left: 0.7rem;
  opacity: 0.6;
  transition: opacity 1s;
  font-size:2rem;
}

.menu_btn:hover span,
.menu_btn:hover i {
  opacity: 1;
}

.menu_btn_default {
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: transparent;
}

.menu_btn_default > i {
	font-size:1.4rem;
	margin-left: 0.7rem;
}
.menu_btn_default > span,
.menu_btn_default > img {
  margin-left: 0.7rem;
  font-size:2rem;
}

.bnb1 {}
.bnb1 .minimap {position:relative; width:248px; height:147px;}
.bnb1 .minimap .map_left {position:absolute; left:-4.0rem; top:50%; transform: translate(0, -50%);}
.bnb1 .minimap .map_right {position:absolute; right:-4.0rem; top:50%; transform: translate(0, -50%);}
.bnb1 .minimap .map_info {position:absolute; left:50%; bottom:0; max-width:200px; color:#fff; font-size:1.4rem; text-align:center; background-color: rgba(0, 0, 0, 0.3); border-radius:2.5rem; transform: translate(-50%, 0); padding:0.4rem 1.2rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.bnb1 .minimap .map_pon {position:absolute; width:2.3rem; height:2.3rem; color:#000; opacity:1; transition: all ease 0.2s; transform: rotate( 180deg ); background:#fff;border-radius:2.5rem; display:flex; align-items: center; justify-content: center; color:var(--point-color-1);}
.bnb1 .minimap .map_pon span {font-size:3rem;}
.bnb1 .minimap .map_p {position:absolute; width:2.3rem; height:2.3rem; color:#000; opacity:0.5; transition: all ease 0.2s; transform: rotate( 180deg ); background:#fff;border-radius:2.5rem; display:flex; align-items: center; justify-content: center; color:var(--point-color-1);}
.bnb1 .minimap .map_p:hover {opacity:1;}
.bnb1 .minimap .map_p span {font-size:2.8rem;}
.bnb1 .minimap .map_p:hover span {font-size:3.0rem;}
.bnb1 .minimap .map_p2 {position:absolute; width:2.2rem; height:2.5rem; color:#000; opacity:0.5; transition: all ease 0.2s; transform: rotate( 0 ); display:flex; align-items: center; justify-content: center;}
.bnb1 .minimap .map_p2 svg {width:100%;}
.bnb1 .minimap .map_p2:hover {opacity:1;}
.bnb_bt {color:#fff; width:5.0rem; height:5.0rem; background-color: rgba(0, 0, 0, 0.3); display:block; border-radius:2.5rem; display:flex; align-items: center; justify-content: center; transition: all ease 0.2s;}
.bnb_bt:hover {color:#fff; width:5.0rem; height:5.0rem; display:block; border-radius:2.5rem; display:flex; align-items: center; justify-content: center;}
.bnb_bt span {font-size:2.4rem;}

.map_copy {position:fixed; left:0; bottom:3px; color:#fff; font-size:1.2rem; text-align:center; width:100%;}

@media (max-width: 640px) {
.bnb1 {display:none;}
}