@font-face {
	font-family: 'Katuri';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/Katuri.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body, html {
	margin: 0;
	padding: 0;
	overflow:hidden;
	height: 100%;
	display: flex;
	font-family: 'Katuri', sans-serif;
	justify-content: center;
	align-items: center;
	background-color: #768da5;
}

body{
	background-image:url(Img/back.jpg);
	background-size: 50%, 50%;
	padding-left:80px; 
	padding-right:80px;
}

.containers-wrapper {
	display: flex;
	width:100%;
	flex-direction: row; /* 가로 방향으로 요소 배치 */
	overflow-x: none; /* 가로 스크롤 활성화 */
	max-width: 100%; /* 최대 가로 크기 제한 */
}

.container {
	display: block;
	position: relative;
	text-align:left;		
	width: 360px;
	height: 680px;
	z-index: 1;
	overflow: none;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.container:not(:last-child){
	margin-right: 10px;
}

.loading-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Katuri', sans-serif;
	font-size: 2rem;
	color: #0097a7;
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	z-index: 2;
}

#unity-canvas{
	width:360px;
	height:680px;
}

.share-buttons-container {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;
}

.share-button {
	padding: 6px 10px;
	background-color: #1DA1F2;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	outline: none;
}

.share-button:hover {
	background-color: #1991DA;
}

.share-button:focus {
	box-shadow: 0px 0px 6px rgba(29, 161, 242, 0.6);
}

.contents {
	width: 360px;
	font-family: 'Katuri', sans-serif;
	border-radius: 10px; /* 둥근 테두리 */
	border: 3px solid #8dabff; /* 경계선 */
	overflow-y: none; /* 세로 스크롤 */
	padding: 15px; /* 내부 여백 */
	margin-bottom:10px;
	box-sizing: border-box; /* 박스 크기 계산 방식 */
	background: #FFFFFFc0;
}

.gameCanvas{
	background: #FFFFFFc0;
	border: 3px solid #577fed; /* 경계선 */
}

dt {
	font-size: 22px; /* 제목 크기 */
	margin-bottom: 5px; /* 제목과 내용 사이의 간격 */
}

dd {
	font-size: 17px; /* 내용 크기 */
	margin-bottom: 15px; /* 다음 내용과의 간격 */
}

.kor {
	color: #333333; /* 한국어 텍스트 색상 */
}

.eng {
	color: #999999; /* 영어 텍스트 색상 */
}	

.mobileAd{
		position:fixed;
		bottom: 0;
		left:0;
		right:0;
		border: 1px dashed #afff33;
		display:block;
}

@media screen and (max-width: 768px) {
	html{
		background-image:url(Img/back.jpg);
		background-size: 50%, 50%;
	}

	body{
		padding: 0;
		background: none;
	}

	.container {
		display: block;
		width: 100%;
		height: auto;
		margin: 0!important;
	}

	.forPC{
		display: none;
	}

	.mobileAd{
		position:fixed;
		bottom: 0;
		left:0;
		right:0;
		border: 1px dashed #afff33;
		display:block;
    z-index: 999;
	}
}

@media screen and (max-width: 1024px){
	html{
		background-image:url(Img/back.jpg);
		background-size: 50%, 50%;
	}

	body{
		padding: 0;
		background: none;
	}

	.not1280{
		display:none;
	}
}

@media screen and (max-width: 1080px){
	html{
		background-image:url(Img/back.jpg);
		background-size: 50%, 50%;
	}

	body{
		padding: 0;
		background: none;
	}

	.notTab{
		display: none;
	}
}

@media screen and (max-width: 1279px){
	html{
		background-image:url(Img/back.jpg);
		background-size: 50%, 50%;
	}

	body{
		padding: 0;
		background: none;
	}

	.not1280{
		display: none;
	}
}