/* 4분할 */
.expend{
	width			: 100vw;
	height			: 100vh;
	display			: flex;
}
.expend li{
	width			: 25%;
	height			: 100%;
}
.expend li{
	width			: 25%;
	height			: 100%;
	position		: relative;
	top				: 0;
	left			: 0;
}
.expend li .bgShield{
	background-color: rgba(0,0,0,0.6);
	width			: 100%;
	height			: 100%;
	cursor			: pointer;
}

.expend li .bgShield:hover{
	background-color: rgba(0,0,0,0);
}

.expend li .bgShield .expendInfoWrap{
	width			: 140px;
	height			: 60px;
	padding			: 10px 20px;
	border			: 1px solid #fff;
	text-align		: center;
	vertical-align	: middle;
	font-weight		: 700;
	font-size		: 14px;
	color			: #fff;
	position		: absolute;
	top				: 50%;
	left			: 50%;
	transform		: translate(-50%, -50%);
	box-sizing		: border-box;
}
.expend li .bgShield .expendInfoWrap span{
	position		: absolute;
	top				: 50%;
	left			: 50%;
	transform		: translate(-50%, -50%);
	box-sizing		: border-box;
}

.expend li .bgShield .expendInfoPlus{
	width			: 50px;
	height			: 50px;
	border			: 1px solid #fff;
	border-radius	: 100px;
	text-align		: center;
	vertical-align	: middle;
	font-weight		: 700;
	font-size		: 14px;
	color			: #fff;
	position		: absolute;
	top				: 60%;
	left			: 50%;
	transform		: translate(-50%, -50%);
	box-sizing		: border-box;
	padding			: 10px;
}

.expend li .bgShield .expendInfoPlus img{
	width			: 30px;
	position		: absolute;
	top				: 50%;
	left			: 50%;
	transform		: translate(-50%, -50%);
	box-sizing		: border-box;
}



/* roomView */
#roomViewTitle{
	font-size		: 80px;
	font-weight		: 700;
	color			: #fff;
	position		: absolute;
	top				: 15%;
	left			: 50%;
	transform		: translate(-50%, -50%);
}
#roomViewTitle span{
	color			: #ee0000;
}

#roomViewWrap{
	width			: 90%;
	position		: absolute;
	top				: 50%;
	left			: 50%;
	transform		: translate(-50%, -50%);
}

#roomViewUl{
	font-size:14px;
}

#roomViewUl li{
	padding			: 20px;
	background-color: #fff;
	box-sizing		: border-box;
	text-align		: center;
	color			: #666;
}

#roomViewUl li .roomName{
	font-size		: 18px;
	font-weight		: 700;
	margin			: 10px 0 10px 0;

}



/*
	인덱스 맵 영역
*/
#mapWrap{
	background-color	: rgba(0,0,0,0.5);
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 100%;
}
#mapWrap #marpTitleWrap{
	height				: 20%;
}

#mapContentWrap{
	height				: 80%;
}

#mapTitle{
	font-size			: 4vh;
	font-weight			: 700;
	color				: #fff;
	position			: absolute;
	top					: 80px;
	left				: 50%;
	transform			: translate(-50%, -50%);
}
#map{
	width				: 100%;
	height				: 65%;
}

#footerInfo{
	height				: 35%;
}

#footerInfo #footerMenuUl{
	height				: 15%;
	width				: 100%;
	display				: flex;
	background-color	: rgba(78,81,88,1);
}
#footerInfo #footerMenuUl li{
	width				: 16.6666666%;
	border-right		: 1px solid #5A5D64;
	box-sizing			: border-box;
	text-align			: center;
	position			: relative;
	top					: 0;
	left				: 0;
	cursor				: pointer;
}

#footerInfo #footerMenuUl li a{
	font-size			: 15px;
	font-weight			: 600;
	color				: #fff;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%, -50%);
}

#footerInfo #footerMenuUl li:hover{
	background			: rgba(255, 255, 255, 1);
}

#footerInfo #footerMenuUl li:hover a{
	color				: rgb(78,81,88);
}

#footerInfo #footerInfoUl{
	height				: 60%;
	width				: 100%;
	display				: flex;
	background-color	: rgba(54,55,59,1);
}

#footerInfo #footerInfoUl li{
	position			: relative;
	top					: 0;
	left				: 0;
	text-align			: center;
	width				: 25%;
}

#footerInfo #footerInfoUl li div{
	display				: inline-block;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%, -50%);
	font-size			: 1.6vh;
	color				: #c3c3b4;
	width				: 100%;
}

#footerInfo #footerInfoUl li div img{
	width				: 2.5vw;
	margin-bottom		: 1vh;
}

#footerInfo #footerCopyrightWrap{
	height				: 25%;
	width				: 100%;
	background-color	: rgba(18,18,20,1);
	color				: #666;
	font-size			: 14px;
	position			: relative;
	top					: 0;
	left				: 0;
}

#footerInfo #footerCopyrightWrap #copyright{
	display				: inline-block;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%, -50%);
}

#footerInfo #footerCopyrightWrap #copyright a{
	color				: #666;
}

#footerInfo #footerCopyrightWrap #adminLinkWrap{
	display				: inline-block;
	position			: absolute;
	top					: 50%;
	right				: 2%;
	transform			: translateY(-50%);
}

#footerInfo #footerCopyrightWrap #adminLinkWrap a{
	color				: #666;
}

#sns{
	width				: 8%;
	height				: 100%;
	display				: flex;
	justify-content		: space-between;
	margin				: 0 auto;
	position			: absolute;
	bottom				: -20px;
	right				: 70px;
}
#sns li{
	width				: 30px;
	height				: 30px;
	border-radius		: 5px;
	text-align			: center;
	background-color	: gray;
	box-sizing			: border-box;
	margin-top			: 5px;
	transition			: all .17s;
	font-size			: 20px;
}
#sns li:hover{
	background-color	: #000;
}
#sns > li:hover i{
	color				: gray;
	transform			: scale(1.2);
}

#sns > li:last-child > a > img {
	box-sizing			: border-box;
	margin-top			: 6px;
	width				: 60%;
	transform			: scale(1);
}

#sns > li:hover > a > img{
	transform			: scale(1.2);
}

#map #category {
	bottom				: 6vh !important;
}