@charset "utf-8";

body { font-size: 15px; background: #000; position: relative; min-width: 100%; opacity: 1; 
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
/* 	font-family:"ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;  */
}
* { -ms-touch-action: manipulation; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); }

a { text-decoration: none; color: #fff; }


.overlay { cursor: pointer; }

.header { position: fixed; z-index: 99; }

h1 { position: fixed; z-index: 99; left: 40px; top: 40px; }
h1 img { width: 200px; height: auto; }
h1 .back { padding: 10px 0 0 ; text-align: center; }
h1 .back a { font-size: 14px; border: 1px solid #000; display: inline-block; padding: 10px 10px; color: #000; width: 177px;}
h1 .private { padding: 10px 0 0; display: none; }

#help_btn { right: 205px; top: 60px; }
#help_btn a { color: #000; display: block; height: 20px; line-height: 20px; padding: 0 0 0 30px;
	background: url(../images/map/icn_help.png) no-repeat left center; 
	background-size: 18px auto; 
}

.module-vc { display: none; }

#map .tile, 
#map .door { opacity: 1; border: 1px solid #464646; }
#map .chair { width: 1.72%; pointer-events: auto !important; transition: none; }

#map .pin.tt_box{max-width: 240px; border: 3px solid #0079BA; background: #fff; border-radius: 15px;transform: translateX(-50%); top: inherit; opacity: 0; pointer-events: none; transition: 0.5s; width: 22%;}
/* ------------------------------------------------------------ map tiles */

.tile { position: absolute; z-index: 10; font-size: 8px; width: 1%; aspect-ratio: 1/1.2; opacity: 1;
	transform: rotate(-60deg) skew(0deg, 30deg);
	-webkit-transform: rotate(-60deg) skew(0deg, 30deg);
	background: rgba(144, 255, 103, 0.36);
}

/* ------------------------------------------------------------ screen share */

.screen_share { display: none; left: 59.5%; top: 45.5%; width: 9.9%; height: 9.1%; position: absolute; background: #a0a0a0; z-index: 9;
	transform: skewX(0) skewY(30deg);
	-webkit-transform: skewX(0) skewY(30deg);
}
.screen_share video,
.screen_share .box { position: relative; width: 100% !important; height: 100%; pointer-events: none; }

/* ------------------------------------------------------------ clouds */

#loader { position: fixed; width: 100%; height: 100%; left: 0; top: 0;  background: #fff; z-index: 9999; }

/* ------------------------------------------------------------ header */

.header { position: fixed; z-index: 99; }
#menu_btn { right: 25px; top: 30px; cursor: pointer; }
#login_btn { right: 50px; top: 45px; border-radius: 25px; background: #004EA2; }
#login_btn a { display: block; height: 45px; line-height: 45px; max-height: 45px; overflow: hidden; width: 125px; padding: 0 10px; box-sizing: border-box; text-align: center; color: #fff; text-overflow: ellipsis; }

#lang_select { background: #000; padding: 5px; right: 20px; top: 120px; border: 1px solid #333; }
#lang_select p span { color: #fff; display: inline-block; text-align: center; width: 35px; height: 25px; line-height: 25px; cursor: pointer; }
#lang_select p span.active { background: #4d4d4d; }


#login { }
#login h2 { text-align: center; padding: 30px 0 60px; font-family: "Noto-Sans-JP-Medium"; }

#login .btn { padding: 0 0 100px; }
#login .btn a { border: none; background: #68b82b; display: inline-block; width: 94%; max-width: 300px; height: 60px; font-size: 16px; line-height: 60px; font-family: "Noto-Sans-JP-Medium"; color: #fff; border-radius: 40px; margin: 0 10px 10px; }
#login .btn a.fb { background: #4676ed; }

/* ------------------------------------------------------------ zoom */

#zoom { background: transparent; position: fixed; align-items: center; right: 47px; bottom: 130px; z-index: 98; }
#zoom p { cursor: pointer; text-align: center; width: 100%; }
#zoom p.disabled { opacity: 0.4; }

.bg_color { padding: 15px; box-sizing: border-box; border-radius: 10px; background: #0079BA; }

.btn { text-align: center; }
.btn a,
.btn input[type="submit"] { border: none; border-radius: 50px; width: 360px; height: 80px; line-height: 80px; font-size: 24px; color: #fff; display: block; margin: auto; }
.btn .red { background: #AACE30; }
.btn .gray { background: #9B9B9B; }

/* ------------------------------------------------------------ welcome */

#welcome { overflow: auto; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 90px 0 60px; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh; }
#welcome .img{text-align: center; }
#welcome .img img{display: inline-block;}
#welcome .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
#welcome .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#welcome .roof { position: absolute; z-index: 9; top: 0; left: 50%; width: 105%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#welcome .container { border-radius: 15px; overflow: auto; position: relative; height: 100%;  padding: 53px 40px 67px; background: #fff; }
#welcome .slider { padding: 0 0 40px; }
#welcome .slider img { width: 100%; height: auto; border:1px solid #D9D9D9; border-radius: 13px;}
#welcome .slider .slider_box_2{padding: 26px 0 0; }
#welcome .slider p {font-family: 'Noto-Sans-JP-Medium'; font-size: 17px; color: #000; line-height: 177%; text-align: center; height: 55px;}
#welcome .slider p span{font-size: 14px;line-height: 177%;font-family: 'Noto-Sans-JP-Medium'; }

#welcome .slider .slick-dots{bottom: -30px;}
#welcome .slider .slick-dots li{width: 12px; height: 12px;}
#welcome .slider .slick-dots li button { border #B5B5B5; border-radius: 100%; background: #B5B5B5; width: 100%; height: 100%; padding: 0;}
#welcome .slider .slick-dots li button:before{display: none;}
#welcome .slider .slick-dots li.slick-active button{background: #D30000;}
#welcome .slider button.slick-arrow{border-radius: 100%; background: #00486E; width: 50px; height: 50px; z-index: 1000; }
#welcome .slider button.slick-arrow:before{color: #00486E; content: ""; display: block;width: 0;height: 0; border-style: solid; position: absolute; top: 50%; transform: translateY(-50%); opacity: 1;}
#welcome .slider button.slick-prev:before{ border-top: 15px solid transparent; border-bottom: 15px solid transparent;  border-left: 0px;border-right: 20px solid #fff;left: 25%; }
#welcome .slider button.slick-next:before{ border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #fff; border-right: 0px;right: 25%; }

#welcome .logo { text-align: center; padding: 35px 0 26px; }
#welcome .logo h3 { font-size: 20px; color: #000; font-family: "Noto-Sans-JP-Bold"; }
#welcome .swiper-pagination { padding: 0 0 15px; }
#welcome .swiper-pagination-bullet { background: #fff; width: 15px; height: 15px; margin: 0 5px; }
#welcome .swiper-pagination-bullet-active { background: #ea2700;}

/* ------------------------------------------------------------ first-noti */

#first-noti { display: flex; flex-wrap:  wrap; justify-content: center; align-items: center; z-index: 999;  position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; }
#first-noti .container { padding: 40px 0 0; position: relative; max-width: 820px; width: 94%; text-align: center; }
#first-noti .container h3 { position: absolute; left: 0; right: 0; top: 0; height: 80px; line-height: 80px; font-size: 24px; color: #fff; background: #000; padding: 0 30px; width: 88%; max-width: 375px; margin: auto; box-sizing: border-box; }
#first-noti .wbox { border-radius: 12px; background: #fff; padding: 100px 30px 60px; }
#first-noti .wbox figure { margin: auto; width: 94%; max-width: 534px; }
#first-noti .wbox img { width: 100%; height: auto; }
#first-noti .wbox .text { line-height: 220%; padding: 30px 0; } 
#first-noti .wbox .btn { padding: 30px 0 0; }
#first-noti .wbox .btn a { line-height: 70px; height: 70px; width: 42%; max-width: 315px; font-size: 20px;  display: inline-block; margin: 0 5px; }

/* ------------------------------------------------------------ help */

#help { overflow: auto; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 90px 0 60px; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh; }
#help img.logo { width: 235px; height: auto; margin: 0 auto; display: block;}
#help .help_inner { width: 88%; max-width: 890px; border-radius: 15px; z-index: 999; position: relative; }
#help h3 { text-align: center; font-size: 30px; color: #000; padding: 27px 0; font-family: "Noto-Sans-JP-Medium";}
#help .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
#help .container { border-radius: 15px; overflow: auto; position: relative; height: 100%;  padding: 60px 6% 30px; background: #fff;}
#help .info { display: flex; flex-wrap: wrap; justify-content: space-between; }
#help .info .box { width: 49%; text-align: center; padding: 0 0 30px; }
#help .info .box img { margin: 15px 0 0; }
#help .info .box h4 { font-size: 18px; text-align: center; color: #fff; padding: 10px; background: #004EA2;}
#help .info .box img.help2{padding: 48px 0 0;}
#help .info .box h4.key{background: #1FA8C1;}
#help .info .box h4.zoom{background: #7CBA45;}
#help .info .box h4.func{background: #E35537;}
#help .info .other { width: 100%; }
#help .info .other h4 { text-align: left; }
#help .info .other .chat { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; padding: 15px 0 0; }
#help .info .other .chat img.help3,
#help .info .other .chat img.help4{margin: 19px 0 7px;}
#help .info .other .chat img { height: auto; display: block; }

/* ------------------------------------------------------------ avatar select */

.avatar_select { display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 30px 0; overflow: auto; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; z-index: 999; background: rgba(0, 0, 0, 0.42); width: 100%; height: 100vh; }
.avatar_select .overlay { z-index: 998; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }
.avatar_select .avatar_inner { z-index: 999; position: relative;  border-radius: 15px; width: 94%; max-width: 890px; box-sizing: border-box; }
.avatar_select .avatar_inner h3 { z-index: 1; position: absolute; text-align: center; width: 100%; top: -19px; left: 0; }
.avatar_select .avatar_inner h3 span { background: #000; padding: 10px 20px; display: inline-block; border-radius: 50px; color: #fff; font-size: 30px; }
.avatar_select .container { padding: 70px 40px 40px; border-radius: 15px; overflow: auto; position: relative; height: 100%; 
	background: #fff;
	background-size: cover;
}
.avatar_select ul { padding: 50px 0; display: flex; flex-wrap: wrap; justify-content: center; }
.avatar_select ul li { text-align: center; width: calc(100% / 4);  box-sizing: border-box; cursor: pointer; }
.avatar_select ul li img { width: 94%; height: auto; position: relative; z-index: 1; }
.avatar_select ul li label { position: relative; display: block; padding: 10px 10px 30px; overflow: hidden; }
.avatar_select ul li label span { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.avatar_select ul li label input[type="radio"] { position: absolute; z-index: -1; opacity: 0; left: -100%; }
.avatar_select ul li label input[type="radio"]:checked + span { background: url(../images/avatar/selected.png) no-repeat center center; background-size: 90% 100%; }

.avatar_select ul li.active 
.avatar_select ul li img { width: 100%; height: auto; }
.avatar_select .btn { padding: 20px 0 0; }

.avatar_select .selected { text-align: center; padding: 0 0 20px; }
.avatar_select p.text { font-size: 14px; text-align: center; color: #000; line-height: 150%; padding: 0; }
.avatar_select p.text span { display: block; font-size: 21px; padding: 0 0 10px; }
.avatar_select .input { text-align: center; padding: 20px 0; }
.avatar_select .input input { width: 400px; height: 65px; line-height: 65px; box-sizing: border-box; padding: 0 10px; }

/* ------------------------------------------------------------ map */

body { overflow: hidden; }

#map-wrapper { overflow: auto; width: 100%; height: 100vh; position: relative; z-index: 2; background: #fff;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
#map-wrapper::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0; height: 0; opacity: 0; }
#map { width: 3500px; margin: auto; cursor: pointer; position: relative; background: #DEEDF2;}
#map .map_asset { pointer-events: none; width: 100%; height: auto; position: absolute; left: 0; top: 0; display: block; transition: 0.5s ease-out; }
#map img.bg { left: 5%; top: 5%; width: 80%; height: auto; z-index: 1;  display: block; position: absolute; }

/* ------------------------------------------------------------ clickable doors */

#map .door { position: absolute; z-index: 998; font-size: 8px; opacity: 1;
	transform: skew(0deg, 30deg);
	background: rgba(144, 255, 103, 0.36);
}

#map .entry1 { left: 19.3%; top: 65.7%; width: 3.8%; height: 10.3%; }
#map .entry2 { left: 21.3%; top: 56.2%; width: 2.8%; height: 9%; }
#map .entry3 { left: 32.1%; top: 50.2%; width: 1.8%; height: 8%; }
#map .entry4 { left: 59.25%; top: 29.5%; width: 1.8%; height: 8%; }

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

#map .pin { position: absolute; width: 0.8%; z-index: 999; }
#map .pin a { display: block; position: relative; }
#map .pin img { width: 100%; height: auto; }

#map .pin.object-hidden { opacity: 0.5; transition: 0.5s; pointer-events: none; }
#map .pin.object-near { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------ marker */

#map .marker { width: 2.2%; text-align: center; }
#map .marker p { position: relative; }
#map .marker svg { width: 100%; height: auto; }
#map .marker p span { font-size: 12px; line-height: 15px; height: 15px; padding: 0 0 20px; display: block; color: #fff; top: 0; bottom: 0; margin: auto; position: absolute; width: 100%; }


#map .pin.private { width: 3%; }
#map .pin.private1 { top: 58%; left: 58%; }
#map .pin.private2 { top: 43%; left: 31%; }


#map .pin.enter { width: 3%; }
#map .pin.enter1 { top: 36%; left: 69.3%; }
#map .pin.enter2 { top: 15%; left: 36.2%; }
#map .pin.enter3 { top: 47%; left: 47.6%; }

#map .pin.homepage { width: 7%; top: 72%;left: 71%; text-align: center; }
#map .pin.homepage img { width: 26%; height: auto; }
#map .pin.homepage a { padding: 0 0 35%; display: block; }

#map .person { position: absolute; width: 4%; left: 7%; top: 60%; pointer-events: none;
	transition: 0.2s linear;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
	margin-left: -1.45%;
	margin-top: 1.2%;
}
#map .person .wrap { position: relative; }
#map .person .wrap .box { position: absolute; bottom: 100%; width: 100%; }
#map .person img { width: 100%; height: auto; }

#map .person .chat { text-align: center; position: absolute; bottom: 102%; display: flex; flex-wrap: wrap; width: 250%; max-height: 46px;
	margin: 0 0 -25%;
	overflow: hidden;
	align-content: flex-end;
	position: relative;
	top: auto;
	left: -76%;
	padding: 0;
	height: 42px;
}
#map .person .chat.hide { height: 0; }
#map .person .chat p { position: absolute; display: none; width: 100%; text-align: center; transition: 0.5s;  margin: 2px 0 -5px; font-size: 12px; padding: 0 2px; }
#map .person .chat p span { position: relative; font-size: 10px; display: inline-block; padding: 4px 10px; border-radius: 10px; text-align: left; line-height: 130%; background: #fff; 
	box-shadow: 1px 1px 1px 1px #aaaaaa;
	line-height: 146%;
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	max-height: 25px;
	white-space: nowrap;
	max-width: 92%;
	box-sizing: border-box;
}

#map .person .chat p:nth-last-child(-n+3) { display: block; }

#map .person .chat p:first-child { top: -30px;	}
#map .person .chat p:nth-child(2) { top: 0; }
#map .person .chat p:nth-child(3) { top: 17px; }
#map .person .chat p:nth-child(4) { top: 60px; }

#map .person .chat p.private span { padding: 4px 10px 4px 25px; }
#map .person .chat p.private span::before { display: block; content: ''; width: 10px; height: 15px;
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff url(../images/map/icn_private_bk.png) no-repeat center center;
	background-size: 100% auto;
}

#map .person p.name { text-align: center; margin: 0 0 1px; left: -50%; min-width: 200%; width: 360%; position: relative;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
#map .person p.name span { padding: 5px 10px 5px; font-size: 18px; color: #fff; background: #181818; text-align: center;
	border-radius: 100px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	max-height: 36px;
	white-space: nowrap;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
}

#map .person.speaking p.name span { padding-right: 20px; }
#map .person.speaking p.name span:after { display: block; content: ''; position: absolute; z-index: 1;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 12px; 
	height: 12px;
	right: 5px;
	background: url(../images/common/speaker_on.png) no-repeat center center;
	background-size: 100% auto;
}

#map .person.official p.name span {
	padding-left: 25px;
	background: #000 url(../images/common/verified.svg) no-repeat 5px center;
	background-size: auto 50%;
}

/* ------------------------------------------------------------ controls */

#controls { z-index: 100; cursor: pointer; position: fixed; bottom: 50px; left: 50px; width: 100px; height: 100px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
}
#controls div { position: relative; width: 100%; height: 100%; }
#controls span { z-index: 1; display: block; position: absolute; margin: auto; width: 70%; height: 70%; }
#controls span img { width: 100%; height: auto; 
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
#controls span.disabled img { opacity: 0.3; }
#controls .moveup { left: 0; right: 0; top: 2px; }
#controls .moveleft { left: 2px; top: 0; bottom: 0; }
#controls .moveright { right: 2px; top: 0; bottom: 0; }
#controls .movedown { left: 0; right: 0; bottom: 2px; }

#controls .me { border-radius: 50%; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }

/* ------------------------------------------------------------ chat */

#show_chat { z-index: 98; position: fixed; width: 100px; right: 30px; bottom: 30px; cursor: pointer; }
#show_chat img { width: 100%; height: auto; }

/* ------------------------------------------------------------ chat_btn */

/* .footer { position: fixed; z-index: 101; } */
#chat_btn { cursor: pointer; }
#loc_btn { cursor: pointer; }

@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	h1 { left: 20px; top: 20px;}
	h1 img { width: 235px;}
	#help_btn { right: 170px; top: 25px;}
	#login_btn { right: 20px; top: 20px;}
	#zoom { right: 20px; bottom: 100px;}
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
	html { overflow: hidden; background: #fff; height: 100vh; max-height: -webkit-fill-available; }
	body { margin: 0 auto;position: fixed; overflow: hidden; width: 100%; height: 100vh; max-height: -webkit-fill-available; }

	h1 { left: 20px; top: 20px; }
	h1 img { width: 100px; height: auto; }
	h1 .back { padding: 0 0 0 ; }
	h1 .back a { font-size: 12px; border: 1px solid #000; display: inline-block; padding: 7px 5px; color: #000; width: inherit;}

	#help_btn { right: 126px; top: 26px; background: #fff; border-radius: 50px; }
	#help_btn a { padding: 0; width: 20px; height: 20px; display: block; background-position: center center; }
	#help_btn span { display: none; }

	#meta_lp { width: 180px; right: 15px; top: 70px; }
	#meta_lp img { width: 100%; height: auto; }
	
	
	.btn { padding: 10px 0 0; }
	.btn a,
	.btn input[type="submit"] { width: 90%; max-width: 320px; height: 45px; line-height: 45px; font-size: 18px; }
	
	.bg_color { padding: 5px; }

	#map .pin.tt_box{width: 16%;}
	/* ------------------------------------------------------------ header */

	#menu_btn { right: 15px; top: 15px; }
	#menu_btn img { width: 40px; height: auto; }
	#login_btn { top: 20px; right: 18px; }
	#login_btn a { font-size: 12px; height: 30px; line-height: 30px; width: 90px; }

	#lang_select { top: 72px; }
	#lang_select p span { font-size: 12px; width: 25px; height: 20px; line-height: 20px; }

	/* ------------------------------------------------------------ welcome */

	#welcome { padding: 10px 0 60px;}
	#welcome .container { padding: 30px 6%; }
	#welcome .container .img{width: 100%; height: auto;}
	#welcome .img img{width: 100%; height: auto;}
	#welcome .logo img { width: 90%; height: auto; }
	#welcome .logo{padding: 15px 0; }
	#welcome .logo h3 { font-size: 16px; line-height: 150%; }
	#welcome .slider { padding: 0 0 20px; }
	#welcome .slider .slider_box_2{padding: 15px 0 0; }
	#welcome .slider p { font-size: 13px; line-height: 150%; height: auto;}
	#welcome .slider p span{font-size: 11px;line-height: 150%;}
	#welcome .slider p br.PC{display: none;}
	
	#welcome .swiper-pagination-bullet { width: 10px; height: 10px; }
	#welcome .swiper-pagination { padding: 0; }

	#welcome .slider button.slick-arrow{width: 35px; height: 35px; }
	#welcome .slider button.slick-prev{left: -15px;}
	#welcome .slider button.slick-next{right: -15px;}
	#welcome .slider button.slick-prev:before{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid #fff;left: 25%; }
	#welcome .slider button.slick-next:before{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; right: 25%; }
	/* ------------------------------------------------------------ first-noti */

	#first-noti .container h3 { height: 60px; line-height: 60px; font-size: 18px; width: 70%; padding: 0; }
	#first-noti .container { padding: 30px 0 0; }
	#first-noti .wbox { padding: 60px 4% 30px; }
	#first-noti .wbox .text { padding: 30px 0 0; font-size: 14px; line-height: 180%; }
	#first-noti .wbox .btn { padding: 20px 0 0; }
	#first-noti .wbox .btn a { height: 50px; line-height: 50px; font-size: 16px; display: block; margin: 10px auto 0; width: 60%; max-width: 260px; }

	/* ------------------------------------------------------------ menu */

	#menu.show { right: 4%; }
	#menu { width: 92%; height: 94%; padding: 5px; }
	#menu .menu_close { top: 30px; right: 6%; }
	#menu .menu_close img { width: 25px; height: auto; }
	#menu .container { width: 90%; padding: 30px 0; min-height: 670px; }
	#menu .logo img { width: 80%; max-width: 308px; }
	#menu .nav .nav-item { padding: 0 0 10px; }
	#menu .nav .nav-item img { width: 72%; }
	#menu .list a { margin: 8px 0; font-size: 14px; }
	#menu .list a { padding: 8px 15px 8px 40px; }
	#menu .list .soon { padding: 8px 15px 8px 100px; background-size: auto 15px; background-position: 10px center; }
	#menu .live a { background-size: auto 20px; }
	#menu .enter a { background-size: auto 10px; }
	#menu .spot a img { width: 15px; height: auto; }
	#menu .menu_footer .links a { font-size: 12px; }
	#menu .menu_footer .bottom .sns a { padding: 0; }
	#menu .menu_footer .bottom .sns a img { width: 25px; height: auto; }
	#menu .menu_footer .bottom .jce { width: 120px; height: auto; }
	
	#menu .menu_footer .gray_link a { font-size: 12px; }
	
	#menu .menu_footer .logos { flex-wrap: wrap; justify-content: flex-start; }
	#menu .menu_footer .logos li { padding: 15px 0 0 ; }
	#menu .menu_footer .logos li.special,
	#menu .menu_footer .logos li.develop { width: 80px; text-align: left; }
	#menu .menu_footer .logos li.special a img,
	#menu .menu_footer .logos li.develop a img { max-width: 75%; }

	/* ------------------------------------------------------------ help */

	#help { padding: 30px 0 90px; }
	#help img.logo { width: 60%; }
	#help .help_inner { width: 80%; }
	#help .container { padding: 40px 4% 30px; }
	#help h3 { font-size: 18px; padding: 15px 0 20px;}
	#help .info .box h4 { font-size: 16px; padding: 5px 10px; }
	#help .info .box { width: 100%; padding: 0 0 15px; }
	#help .info .box img { width: 60%; max-width: 250px; height: auto; }
	#help .info .box img.help2{width: 25%; padding: 10px 0;}
	#help .info .other { padding: 0; }
	#help .info .other img { width: 35%; }
	#help .info .other img:last-child { width: 60%; margin: 20px 0 0; }
	#help .info .other .chat img.help3,
	#help .info .other .chat img.help4{margin: 0px;}
	#help .info .other .chat img.help3{width: 41%; margin: 0px 5% 0px 0px;}
	#help .info .other .chat img.help5{max-width: 100%; }
	#help .info .other .chat {justify-content: center;}
	
	/* ------------------------------------------------------------ avatar */
	.avatar_select ul {padding: 50px 0 0px;}
	.avatar_select .avatar_inner h3 span { font-size: 16px; top: -13px; }
	.avatar_select .container { padding: 30px 6%; }
	.avatar_select ul li { padding: 10px 1% 20px; width: calc(100% / 4); }
	.avatar_select ul li label {padding: 10px 5px 25px;}
	.avatar_select p.text span { font-size: 16px; }
	.avatar_select .input input { height: 45px; line-height: 45px; width: 90%; max-width: 400px; }

	/* ------------------------------------------------------------ zoom */

	#zoom { right: 21px; width: 30px; bottom: 140px; }
	#zoom img { width: 100%; height: auto; }

	#nav h2 { display: none; }
	#nav .box { top: -100%; z-index: 2; transition: 0.5s; padding: 50px 4% 30px; position: fixed; width: 100%; left: 0; height: 100%; box-sizing: border-box; }
	#nav .box.open { top: 0%; }
	#nav .box .close { display: block; position: absolute; right: 5%; top: 20px; }
	#nav .menu_open { display: block; position: fixed; z-index: 1; left: 19px; top: 200px; cursor: pointer; }
	
	#map-wrapper { height: 100%; max-height: -webkit-fill-available; transition: 0.5s; }
	#map-wrapper.chat_show { height: 50vh;  }
	#map { width: 800vw; }
	#map .person .chat p span { font-size: 8px; padding: 4px 5px; max-width: 92%; }
	#map .person p.name { margin: 0;  }
	#map .person p.name span { font-size: 10px; }
	#map .person .chat { max-height: 40px; height: 40px; padding: 0; }
	
	.avatar_select .box { height: 88%; }
	.avatar_select .box h4 { font-size: 24px; }
	.avatar_select .selected img { width: 70px; height: auto; }
	
	#map .person .chat p:nth-child(3) { top: 17px; }
	
	
	#show_chat { position: absolute; transition: 0.5s; width: 50px; right: 20px; top: 20px; }
	#show_chat.active { bottom: 50px; }
	
	.copyright { font-size: 8px; left: 15px; bottom: 15px; }
	
	.avatar_select .box h4 { font-size: 24px; }
	
	#controls { position: absolute; transition: 0.5s; bottom: 15px; left: 15px; width: 60px; height: 60px; }
	#controls.active { bottom: 50px; }
	#controls span { width: 50%; height: 50%; }

	#menu .menu_footer .links img { width: 70px; height: auto; }
	
	#map .marker { width: 2.8%; }
	#map .marker p span { font-size: 10px; }

}