@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* Mobile 모니터 기준 CSS =============================================== */
body {
	background-image: url("marbel.jpg");
	background-repeat:no-repeat; 
	background-position:center center;
	background-color: #33A3C1;
}



a {
	text-decoration: none;
}
/* I. 메뉴영역 =================================================== */

/* 1. 전체 배경  */
#menubar {
	width:100%;
	height:35px;
	background-color:rgba(0,0,0,0.7);
	margin-top:0;
	float:left;
}



#menubar a {
	text-decoration: none;
}

#teamname {
	font-family: sans-serif;
	font-weight:lighter;
	font-size:0.8em;
	color:#ffffff;
	text-align: center;
}

#soundon {
	display: none;
}



/* II. 부루마블 영역 =============================================== */

/* 1. 전체 틀 ====================================================== */

#container {
		width: 96%;
		height: 100%;
		float: left;
		border:2px solid #333333;
		margin:2%;

		-moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    box-sizing: border-box;

	}


/* 2. 카드 말판 영역 ====================================================== */
/* 2-1) 각 지역 1칸 */

.cardarea {
		width:25%;
		height:60px;
		float:left;
		background-color:#ffffff;
		background-repeat: no-repeat;
		background-size: cover;

	}

/*2-1-1) 카드 영역 경계선 */
.bborder {
	-webkit-box-shadow:  2px 2px 0px 0px #333333 inset;
	-moz-box-shadow:  2px 2px 0px 0px #333333 inset;
	box-shadow:  2px 2px 0px 0px #333333 inset;

}


.dborder {
	-webkit-box-shadow:  -2px -2px 0px 0px #333333 inset;
	-moz-box-shadow:  -2px -2px 0px 0px #333333 inset;
	box-shadow:  -2px -2px 0px 0px #333333 inset;

}



/* 2-2) 카드 중간 여백 */

.blank {
		width:50%;
		height:60px;
		float:left;
	}

/* 2-3) 각 지역 칸 위에 놓이는 말 */

.cardarea img {
	width:60%;
	height:auto;
	margin:6% 20% 5% 15%;

}

.btncontainers {
	width:100%;
	height:40px;
	background-color: rgba(0,0,0,0.3);
	float: left;
	top:35px;
	
}

/* 2-4) 게임 설명 & 이동버튼 */
.mainbtns {
		width:33%;
		height:33px;
		cursor:pointer;
		float: left;
		text-align: center;
		margin-top:5px;
}

.mainbtns p {
	font-size: 0.8em;
	color:#ffffff;
	margin-top:2px;
	text-align: center;
	font-family: sans-serif;
	cursor:pointer;

} 

.border {
	border-right:1px solid #61afc4;
}

.blank img {
	margin-left: 15%;
	margin-top:1%;
}

/* 2-5) 기사 타이틀 */



/* 3. 지역카드 팝업 ====================================================== */

/* 3-1) 카드 영역 */

#popup {
		width:95%;
		height:500px;
		z-index: 10;
		background-color:rgba(255,255,255,0.5);
		display: none;
		position: absolute;
		top:3%;
		left:2%;
	}

/* 지역카드 여백 */
	#img {
		width:100%;
		margin-bottom: 2%;
	}
	/* 지역카드 이미지크기 조정 */
	#img img {
		width:100%;
	}




/* 3-2) 중간 창 닫기버튼 */
#close {
	width:10%;
	height:7%;
	background-color: rgba(0,0,0,0.8);
	display: none;
	position: absolute;
	top:2%;
	left:88%;
	text-align: center;
}

/* 중간 창 닫기 버튼 텍스트 */
#close p {
		color:#ffffff;
		font-size:1.2em;
		line-height: 0;
		font-family: sans-serif;
	}


/* 3-3) 다음 도시 이동버튼 */

#restart, #restart2, #restart3  {
	display: none;
}


/* 3-4) 게임이 끝났다고 알려주는 팝업 */
#popupclosed {
		width:95%;
		height:200px;
		z-index: 10;
		background-color:#ffffff;
		border:2px solid #333333;
		display: none;
		position: absolute;
		top:30%;
		left:2%;
	}


/* 게임 끝 안내 텍스트 */
#popupclosed p {
		color:#333333;
		font-family: sans-serif;
		font-size: 1em;
		text-align: center;
	}


/* 창 닫기 버튼 */
#checkmsg {
	width:80%;
	height:24%;
	padding-top:2%;
	background-color: #EA2E49;
	margin: 0 auto;
}

/* 창 닫기 버튼 텍스트 */
#checkmsg p {
		color:#ffffff;
		font-family: sans-serif;
		font-weight: bold;
		font-size: 1.2em;
		text-align: center;
		line-height: 0;
	}



/* 4. 개별 지역카드 팝업 ======================================================  */

/* 4-1) 지역카드 이미지 영역 */
#popuponlyimg {
			width:95%;
			height:500px;
			z-index: 10;
			background-color:rgba(255,255,255,0.5);
			display: none;
			position: absolute;
			top:3%;
			left:2%;
		}

#img2 img {
		width:100%;
	}


/* 4-2) 창 닫기 버튼 */
#close2 {
	width:10%;
	height:7%;
	background-color: rgba(0,0,0,0.8);
	display: none;
	position: absolute;
	top:2%;
	left:88%;
	text-align: center;
}

/* 중간 창 닫기 버튼 텍스트 */
#close2 p {
			color:#ffffff;
			font-size:1.2em;
			line-height: 0;
			font-family: sans-serif;
		}



/* 5. 게임설명 팝업 ======================================================  */
/* 5-1) 카드 영역 */
.blackpop {
	width:80%;
	height:500px;
	z-index: 10;
	background-color:rgba(51,51,51,0.9);
	display: none;
	margin: 0 auto;
	position:absolute;
	padding:10px 20px 20px 20px;
	top:4%;
	left:4%;
}

.blackpop2 {
	width:80%;
	height:150px;
	z-index: 10;
	background-color:rgba(51,51,51,0.9);
	display: none;
	margin: 0 auto;
	position:absolute;
	padding:0px 20px 20px 20px;
	top:30%;
	left:4%;
}


.blackpop h3 {
	font-size:1.2em;
	color:#ffffff;
	font-family: sans-serif;
	margin-bottom: 0.1em;
}

.blackpop h5 {
	font-size:1.1em;
	color:#F7D604;
	font-family: sans-serif;
	margin-bottom: 0.1em;
}


.blackpop h6 {
	font-size:1.1em;
	color:#ffffff;
	font-family: sans-serif;
	margin-bottom: 0.1em;
}


.blackpop p {
	font-size:0.9em;
	color:#ffffff;
	font-family: sans-serif;
	margin-bottom:0.1em;
	line-height: 1.3em;
}

.blackpop2 h6 {
	font-size:1.1em;
	color:#ffffff;
	font-family: sans-serif;
	margin-bottom: 0.1em;
}


.blackpop2 p {
	font-size:0.9em;
	color:#ffffff;
	font-family: sans-serif;
	margin-bottom:0.1em;
	line-height: 1.1em;
}


/* 5-2) 중간 창 닫기버튼 */
.blackpopclose {
	width:10%;
	height:40px;
	background-color: rgba(0,0,0,0.8);
	display: none;
	position: absolute;
	top:2%;
	left:88%;
	text-align: center;
	cursor:pointer;
}

.blackpopclose p {
	color:#ffffff;
	font-size:1.2em;
	line-height: 0;
	font-family: sans-serif;
	cursor:pointer;
}


/* 배경화면 */

/* 첫번째줄 */
.island { background-image: url("background/island.jpg"); }
.chungnam { background-image: url("background/chungnam.jpg"); }
.daegu { background-image: url("background/daegu.jpg"); }
.travel { background-image: url("background/travel.jpg"); }
		
/* 중간줄1 */
.jeonbuk { background-image: url("background/jeonbuk.jpg"); }
.daejeon { background-image: url("background/daejeon.jpg"); }

/* 중간줄2 */
.chungbuk { background-image: url("background/chungbuk.jpg"); }
.jeonnam { background-image: url("background/jeonnam.jpg"); }

/* 중간줄3 */
.kyungbuk { background-image: url("background/kyungbuk.jpg"); }
.kyungnam { background-image: url("background/kyungnam.jpg"); }

/* 중간줄4 */
.gwangju { background-image: url("background/gwangju.jpg"); }
.random { background-image: url("background/random.jpg"); }

/* 중간줄5 */
.gangwon { background-image: url("background/gangwon.jpg"); }
.incheon { background-image: url("background/incheon.jpg"); }

/* 중간줄6 */
.jeju { background-image: url("background/jeju.jpg"); }
.busan { background-image: url("background/busan.jpg"); }

/* 마지막줄 */
.start { background-image: url("background/start.jpg"); }

.seoul { background-image: url("background/seoul.jpg"); }
.gyeonggi { background-image: url("background/gyeonggi.jpg"); }
.key { background-image: url("background/key.jpg"); }

.ulsan { background-image: url("background/ulsan.jpg"); }