
.rcase{ margin:80px 0 50px; overflow:hidden;}
.tit{ height:64px; line-height:64px;border-bottom:1px solid #d9d9d9;}
.tit h2{ font-size:24px; color:#8c8c8c; font-weight:normal;}
.menu {
	margin:35px 0 0;

	list-style: none;
	counter-reset: li;
}
.menu:before, .menu:after {
	content: "";
	display: table;
}
.menu:after {
	clear: both;
}
.menu {
	zoom:1;
}
/* -------------------------------- */        

.menu li {
	position: relative;
	float: left;
	cursor: pointer;
	height:400px;
	width: 390px;
	margin: 15px 0 0 15px;
}
.menu li img{height:300px;width: 390px;}
.menu li:hover, .menu li:focus {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, 0)));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}
.menu .cover {
	z-index: 2;
}
.menu .cover:focus {
	outline: 0;
}

/* -------------------------------- */

.menu li::after {
 content: counter(li);
 counter-increment: li;
 font: italic bold 10px serif, georgia;
 position: absolute;
 color: rgba(255, 255, 255, .1);
 opacity: 0;
 -webkit-transition: all .2s ease-out;
 -moz-transition: all .2s ease-out;
 -ms-transition: all .2s ease-out;
 -o-transition: all .2s ease-out;
 transition: all .2s ease-out;
}
 .menu li:hover::after, .menu li:focus::after {
 font-size: 100px;
 opacity: 1;
}
 .menu .cover::after {
 z-index: -1;
}

/* -------------------------------- */       

.menu li:nth-child(1), .menu li:nth-child(2), .menu li:nth-child(3) {
 margin-top: 0;
}
 .menu li:nth-child(1), .menu li:nth-child(4), .menu li:nth-child(7) {
 margin-left: 0;
}


.menu .content {
	opacity: 0;
	display: none\9;
	overflow: hidden;
	font: 12px Arial, Helvetica;
	position: absolute;
	height: 120px;
	width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 transition: all .3s ease-out;
}
.menu .expanded {
	background:#f2f9fc;
	opacity: 1;
	display: block\9;
	overflow: visible;
	height:500px;
	width:1200px; /* Cover the entire area */
}
.menu .content .conte_l{ width:520px; height:400px; float:left;}
.menu .content .conte_l img{width:520px; height:400px;}
.menu .content .conte_r{ width:590px; float:right; padding-right:40px;}
.menu .content .conte_r h3{ font-size:30px; color:#000; font-weight:normal; padding:40px 0 0 0;}
.menu .content .conte_r h4{ font-size:20px; color:#000; font-weight:normal; padding:5px 0 0 0;}
.menu .content .conte_r p{ font-size:18px; color:#323232; padding-top:30px; line-height:32px;}

 .menu li:nth-child(3n) .content { /* 3,6,9 */
 right: 0;
}
 .menu li:nth-child(3n-1) .expanded { /* 2,5,8 */
 left: 50%;
 margin-left: -600px;
}
 .menu li:nth-child(7) .content, /* 7,8,9 */ .menu li:nth-child(8) .content, .menu li:nth-child(9) .content {
 bottom: 0;
}
 .menu li:nth-child(4) .expanded, /* 4,5,6 */ .menu li:nth-child(5) .expanded, .menu li:nth-child(6) .expanded {
 margin-top: -190px;
 top: 50%;
}
/* -------------------------------- */    

.menu .title {
	position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
	opacity: 1;
}
.menu li:hover .title {
	opacity: .7;
}
.menu .title h3{ height:60px; line-height:60px; font-size:24px; color:#5f5f5f; font-weight:normal; background:#fafafa; font-style:normal;}
/* -------------------------------- */

.menu .close {
	display: none;
	color: #323232;
	cursor: pointer;
	height: 40px;
	width: 40px;
	font: 20px/40px arial, helvetica;
	position: absolute;
	text-align: center;
	top: 0px;
	right:0px;

}
.menu .cover .close {
	display: block;
}