@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form,label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;/*:focus 选择器用于选取获得焦点的元素。*/
}
body {
	line-height: 1;
	color: black;
}
ol, ul {
	list-style: none;
}
em,i{font-style: normal;}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;/*border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示*/
	border-spacing: 0;/*border-spacing 属性设置相邻单元格的边框间的距离*/
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,q:before, q:after {/*:after 选择器在被选元素的内容后面插入内容。:before选择器在被选元素的内容前面插入内容*/
	content: "";/*插入内容*/
}
blockquote, q {
	quotes: "" "";
}

a{color:#666;cursor: pointer;text-decoration: none;}
a:hover,a:visited{color:#666;text-decoration: none;}
/* self-clear floats - if you need them, this is my (current) favourite technique. More info: http://nicolasgallagher.com/micro-clearfix-hack/ */

/* For modern browsers */
.fl{float: left;}
.fr{float: right;}
.cf:before,.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/* wrap url's */
pre {
	white-space: pre;           /* CSS 2.0 规定段落中的文本不进行换行*/
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}
	
	@font-face {
		font-family: 'DS-Digital';
		src: url('../fonts/DS-DIGIB-2.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	
	}

::selection {/*::selection 选择器匹配被用户选取的选取是部分。*/
	background: #ff9900;
}

/* in the book I talked about CSS patterns - this body style adds the feint grid to the body of all pages in supporting browsers */

body {
	background:#fff url(../images/bg.jpg) no-repeat;background-attachment: fixed;background-size:100% 100%;
	
}

/*head*/
.header{width:100%;position: absolute; }
.header .topic-logo{width:130px; height:40px; display:inline-block;line-height:40px;color:#fff;}
.header .topic-logo img{margin-right:5px;margin-bottom:5px;}

.top{background:#025294;color:#fff;height:40px;line-height: 40px;position: fixed;width: 100%;top: 0px; z-index: 1000;}
.top a{color:#fff;}
.box{width:1200px;margin:0px auto;}
.top-left{vertical-align: middle;}
.top-left img{margin-right: 5px;vertical-align: middle;}
.banner{height:397px;background:url(../images/video_banner.png) no-repeat bottom center;}
.main{background:#fff;}
.main-list{padding:30px;}
.main-list ul li{float:left;margin:20px;background:#fff;width: 336px; height:246px;position: relative;  }
.main-list ul li a{display:inline-block;width: 336px; height:246px;transition: all  .25s  ease-in;transform: translateY(0px);position: relative;box-shadow: 0 2px 5px 0 rgba(135,152,164,.5);border-radius: 4px; }
.main-list ul li a:hover{transform:translateY(-5px);box-shadow: 0 5px 8px 0 rgba(135,152,164,.3);}
.list-title{font-size:18px;text-align: center;padding-top:10px;}
.page{padding-bottom:20px;}
.footer{padding:50px 0px;color:#909090;font-size:14px;line-height: 1.5em;text-align: center;}
.main-list ul li i{position: absolute;left:0px;right:0px;bottom:50px;top:0px;background:#000;opacity: 0.4;filter:Alpha(opacity=40);}
.main-list ul li em{display:inline-block;background:url(../images/vido.png) no-repeat;width:47px;height:46px;position:absolute;right:20px;bottom:70px;z-index: 100;}