@charset "utf-8";
/*-----------------------for both-----------------------*/
/*-----------------------monthContent-----------------------*/
#monthContent ul li a h2 {
	width: 120%;
	margin: 5px -10%;
	color: #fff;
	line-height: 100%;
	padding: 14px 0;
}
#monthContent ul li a p {
	font-size: 21px;
	font-weight: bold;
}
#monthContent ul li a span {
	font-size: 16px;
}
#monthContent ul li:first-child a {
	background-color: #F0E7D2;
	color: #B6871F;
}
#monthContent ul li:first-child a h2 {
	background: #B6871F;
}
#monthContent ul li:nth-child(2) a {
	background-color: #FAD9DA;
	color: #D06E75;
}
#monthContent ul li:nth-child(2) a h2 {
	background: #D06E75;
}
#monthContent ul li:nth-child(3) a {
	background-color: #EEDDD8;
	color: #B0573D;
}
#monthContent ul li:nth-child(3) a h2 {
	background: #B0573D;
}
#monthContent ul li:nth-child(4) a {
	background-color: #F5EFE8;
	color: #BF9E72;
}
#monthContent ul li:nth-child(4) a h2 {
	background: #BF9E72;
}
#monthContent ul li:nth-child(5) a {
	background-color: #EAE4E1;
	color: #98766A;
}
#monthContent ul li:nth-child(5) a h2 {
	background: #98766A;
}
#monthContent ul li:nth-child(6) a {
	background-color: #f0e1dc;
	color: #825a41;
}
#monthContent ul li:nth-child(6) a h2 {
	background: #825a41;
}
#monthNav ul li span {
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border: 2px solid #98766A;
	border-radius: 50px;
	color: #98766A;
	background-color: #fff;
	font-size: 25px;
}

/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
/*-----------------------monthNav-----------------------*/
#monthNav ul {
	background-image: url(../images/event/month/line.gif);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	overflow: auto;
	

}
#monthNav ul li, #monthContent ul li {
	width: 25%;
	float: left;
	text-align: center;
}

/*-----------------------monthContent-----------------------*/

	#monthContent ul li {
	position: relative;
	
}
#monthContent ul li h2 {
	font-size: 20px;
}
#monthContent ul li h6 {
	width: 2px;
	height: 200px;
	background: #98766A;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 0;
	flex-direction: row;
	justify-content: space-around;
}
#monthContent ul li a {
	width: 250px;
	height: 250px;
	border-radius: 250px;
	margin: 20px auto 0 auto;
	text-decoration: none;
	overflow: hidden;
	z-index: 10;
	position: inherit;
	/*垂直致中*/
	display: flex;
	justify-content: center;
	flex-direction: column;
	transition: all 0.1s ease-out;
}
#monthContent ul li a:hover {
	transform: scale(1.03);
	transition: all 0.2s ease-out;
}
}

/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
/*-----------------------monthNav-----------------------*/
#monthWarpper {
	text-align: center;
	overflow: auto;
	margin: 0 auto;
	width: 300px;
}
#monthNav {
	float: left;
}
#monthNav ul {
	background-image: url(../images/event/month/lineM.gif);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#monthNav ul li {
	height: 220px;
	text-align: center;
	/*垂直致中*/
	display: flex;
	justify-content: center;
	flex-direction: column;
}
#monthNav ul li span {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 25px;
}
/*-----------------------monthContent-----------------------*/
#monthContent {
	float: left;
}
#monthContent ul li {
	position: relative;
	width: auto;
	height: 220px;
	padding: 10px 0 10px 20px;
}
#monthContent ul li h6 {
	width: 200px;
	height: 2px;
	background: #98766A;
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 0
}
#monthContent ul li a {
	text-align: center;
	width: 210px;
	height: 210px;
	border-radius: 200px;
	padding: 0 15px;
	overflow: hidden;
	z-index: 10;
	text-decoration: none;
	position: inherit;
	/*垂直致中*/
	display: flex;
	justify-content: center;
	flex-direction: column;
}
}