.single-inner {clear: both; float: left; position: relative; left: 50%; margin-left: -400px; width: 800px;}


/* area title */
.area-title {font-style: normal; font-weight: normal; width: 100%; margin-bottom: 36px; float: left; position: relative; color: #4e5456; text-align: left; font-family: Lato; font-size: 20px;}

.top-recommended {width: 100%; padding-bottom: 48px; padding-top: 48px; background-color: #f8f8f8;}
.top-inner {display: inline-block; float: none; position: relative; width: 800px;}
.top-click {float: left; position: relative; width: 268px;}
.top-img { float: left; position: relative; width: 100%;}
.top-info { padding: 0px; height: auto; float: right; position: relative; width: 500px;}

.info-temp { padding-bottom: 15px; padding-top: 0px; clear: both; position: relative; float: left; width: 100%;}
.info-temp h2 { font-style: normal; font-weight: normal; text-align: left; margin-bottom: 10px; line-height: 21px; clear: both; float: left; position: relative; width: 100%; color: #4e5456; font-size: 18px;}

.info-temp .info {padding-bottom: 50px; height: auto; text-align: justify; line-height: 20px; clear: both; float: left; position: relative; width: 100%; color: #4e5456; font-size: 13px;}



.latest-news { text-align: center; padding-top: 48px; background-color: white;}

.event-list {margin-bottom: 20px; clear: both; float: left; position: relative; width: 100%;}
.event-list .more-img { clear: both; float: left; position: relative;}
.event-list .event-img { margin-top: 20px; clear: both; float: left; position: relative;}

.event-list .more-video {margin-bottom: 20px; height: auto; clear: both; float: left; position: relative; width: 100%;}

.event-list h3 {font-style: normal; margin-bottom: 15px; margin-top: 30px; width: 100%; font-weight: normal; text-align: left; font-family: Lato; line-height: 21px; font-size: 18px; color: #4e5456; clear: both; float: left; position: relative;}

.event-list .more-mark {margin-top: 10px; width: 100%; color: #8b9094; font-size: 12px; text-align: center; clear: both; float: left; position: relative;}




.event-list .mask { width: 100%; clear: both; float: left; position: relative; height: auto;}
.event-list .mask .text { height: auto; float: left; position: relative; width: 100%; overflow: hidden; /*overflow-x: hidden; overflow-y: auto;*/}
.event-list .mask .text p { height: auto; text-align: justify; line-height: 21px; clear: both; float: left; position: relative; width: 100%; color: #4e5456; font-size: 14px;}

.event-list .content { height: auto; text-align: justify; line-height: 21px; clear: both; float: left; position: relative; width: 100%; color: #4e5456; font-size: 14px;}


.event-list .mask .opacity {
	right: 0px; left: 0px; bottom: 0px; height: 50px; z-index: 2; float: left; position: absolute;
}
.g {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(248,248,248,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(248,248,248,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(248,248,248,1) 100%);
}
.w {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

.video {margin-top: 30px;}
.video { position: relative; display: inline-block; width: 100%; height: calc(660px / 16 * 9);}

.inner {width: 844px;}

@media screen and (max-width: 844px) {
	.inner {width: 100%;}
}

@media screen and (max-width: 880px) {
	
	.top-inner {padding-right: 20px; padding-left: 20px; width: 100%;}
	.title-content {padding-right: 20px; padding-left: 20px; width: 100%;}
	
	.top-click {position: relative; float: none; display: inline-block; width: 280px;}
	.top-info {margin-top: 20px; padding-right: 0px; padding-left: 0px; width: 100%;}
	
	.single-inner {margin-left: 0px; left: auto; width: 100%;}
}