@charset "utf-8";

#bodypat{
	/* background:url(images/bg_pattern.png) repeat; */
	width:100%;
	height:100%;
}
#container{
	/* 避免过宽 */
	/* 30+30+14.5+2=76.5rem */
	max-width:76.6rem;
	text-align:center;
	/* margin:auto; */
	overflow:hidden;
}

.clearfix:after{
	content:" ";
	clear:both;
	height:0;
	visibility:hidden;
	display:block;
}

.centered{
	margin:0 0 0 15px;
}

/* #loader{
	background:url(images/loader.gif) no-repeat center center rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9999;
	display:none;
} */

/*----------------------------------------------------------------------------
Content - Main Page Tiles
----------------------------------------------------------------------------*/
.live>div{
	position:absolute;
}
.live img{
	border:none;	
}
.live-front{
	width:100%;
	height:100%;
	z-index:20;
}
.live-back{
	width:100%;
	height:100%;
	z-index:10;
}
.live-img{
	display:block;
	height:100%;
	width:100%;
}


.live-tile {
	font-size: 5em;
	vertical-align: middle;
	line-height: 155px;
}
.tile{
	margin-top:0px;
	margin-right:.5%;
	margin-bottom:1%;
	margin-left:.5%;
	/* margin:0 0px 0px 0px; */
	float:left;


	overflow:hidden;
	position:relative;
	transition: opacity 0.5s ease 0.1s;
	-moz-transition: opacity 0.5s ease 0.1s;
	-o-transition: opacity 0.5s ease 0.1s;
	-webkit-transition: opacity 0.5s ease 0.1s;
}
.tilehover{
	position:absolute;
	top:0;
	right:0;
	z-index:30;
	display:none;
}

.tile:hover{
	/* border:5px solid #404040; */
	/* border:2px solid #404040; */
	/* margin:-5px 0 0 0; */
	box-shadow:0 0 5px 0 rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.8);
	-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.8);
}
.exclude:hover{
	border:none;
	margin:0 5px 10px 5px;
}

.tile-text{
	color:#fff;
	font-size:2.4em;
	bottom:5px;
	left:10px;
	position:absolute;
	z-index:30;
	text-align:left;
}

/* 大块尺寸 */
/* width=100/7=14.29 */

.large{
	/* width:350px; */
	/* width:30rem; */
	/* height:30rem; */
	/* height:350px; */
	/* height:350px; */
	/* padding值如果是百分比，是根据父容器的宽度百分比来计算的，所以通过padding-bottom设置为百分比来设置高度 */

	padding-bottom:28%;	/*此处38.5是因为大块的高度需要高一点*/
	width:27%;
	height:0;
}

/* 中块尺寸 */
.medium{
	/* width:30rem; */
	/* height:14.7rem; */
	/* height:22%; */
	padding-bottom:13.5%;	
	width:27%;
	height:0;
}
/* 小块尺寸 */
.small{
	/* width:14.7rem; */
	/* height:14.7rem; */
	/* height:22%; */
	padding-bottom:13.5%;	
	width:13.5%;
	height:0;
}
.fade{
	opacity:0.5;
	filter:alpha(opacity=50);
}
.tile-date{
	/* 20190815要求去掉底色 */
	/* 20190923要求加回来 */
	background-color:rgba(50,50,50,0.5);
	/* color:#7f7f7f; */
	color:rgba(255,255,255,1);
	width:100%;
	height:20%;
	position:relative;
	/* top:0.5rem; */
	/* right:0.5rem; */
	z-index:9999;
	padding:0 0.5rem 0 0.5rem;
	text-align:right;
}
.tile-date .date{
	font-size:3em;
}

/* 板块上的文字大小 */
.date-sm{
	font-size:14px;
}
.tile-title{
	/* border:1px solid red; */
	z-index:999;
	width:100%;
	font-size:14px;
	line-height:18px;
	background-color:rgba(50,50,50,0.5);
	padding:5px;
	color:#fff;
}
.tile-date .month{
	font-size:2em;
	position:absolute;
	top:60px;
	right:5px;
}
.month-sm{
	font-size:1.5em;
	position:absolute;
	top:40px;
	right:5px;
}
.tile-cat{
	position:absolute;
	bottom:0;
	left:0;
	font-size:2.4em;
	color:#fff;
	z-index:99;
	text-align:left;
	padding:0 10px;
	visibility:hidden;
}
.tile:hover .tile-cat{
	visibility:visible;
}
.bloglist .tile-cat{
	visibility:visible;
}

#mainpage-mos{
	/* padding:0 0.5rem 0 0.5rem; */
	margin:0;
	position:relative;
}


/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,


/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
	/* width: 100%;  */
	display: block;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0; position: relative; zoom: 1; color:#fff;}
.mainslide{margin-bottom:10px;}
.postslide{overflow:hidden;position:relative;}
article ul.slides li{padding:0;margin:0;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

.flex-title{
	position:absolute;
	top:55px;
	right:25px;
	padding:0 20px;
	font-size:4.8em;
	line-height:1.4em;
}
/* Direction Nav */
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}


@media screen and (max-width: 860px) {
.flex-title{
	font-size:3.6em;
	line-height:50px;
}
}
@media screen and (max-width: 640px) {
.flexslider{
	margin-top:50px;
}
.postslide{
	margin-top:0;
}
.flex-title{
	top:-40px;
	left:0;
	font-size:2.4em;
	line-height:40px;
	display:block;
	width:100%;
}
}