/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:16px/1.8 arial,\5b8b\4f53;color:#ccc;outline:0;}
body{background:#000000; font-family: "微软雅黑"; }
a{ color: #e3141a; }
a:hover{ color: #f00; }
.f-fl{ float: left; }
.f-fr{ float: right; }
.f-cc{ clear: both; }
.f-tar{ text-align: right; }
.f-mr20{ margin-right: 20px; }

/* header */
.m-top{ width: 100%; line-height: 30px; height: 30px; padding: 5px 0; background: #fff; overflow: hidden; zoom: 1; border-bottom: 4px solid #f00; }
.m-top .nav{ width: 1200px; margin-left: auto; margin-right: auto; }
.m-top img{ height: 30px; }
.m-top a{ float: left; margin-right: 20px; color: #666; }
.m-top a:hover{ color: #19A97B; }

/* footer */
.m-footer{ text-align: center; background: #111; line-height: 24px; padding: 30px 0; color: #adafba; font-size: 12px; }
.m-footer .links{ margin-bottom: 20px; }
.m-footer a{ color: #ccc; margin: 0 5px; }
.m-footer a:hover{ color: #19A97B; }

/* global */

/* banner */
.m-banner{ background: url(banner.jpg) center top; height: 600px; }

/* part */
.m-part{ padding: 50px 0; width: 1000px; margin-left: auto; margin-right: auto; }
.m-part .title{ font-size: 30px; color: #8bb9c6; font-weight: normal; line-height: 50px; margin-bottom: 20px; }
.m-part .title span{ color: #fff6c1; margin-right: 5px; }
.m-part .item{ background: #151515; padding: 20px; position: relative; overflow: hidden; zoom: 1; }
.m-part .item:before{ content: ''; position: absolute; left: -100px; top: 0; bottom: 0; width: 100px; background: #f00; z-index: 0; opacity: .1;  }
.m-part .item:hover:before{ left: 100%; width: 20px; transition: all 1s ease; }
.m-part .item .img img{ width: 100%; display: block; }
.m-part .item h3{ font-size: 20px; font-weight: normal; }
.m-part .item p{ clear: both; padding-top: 10px; color: #ccc; }

.m-part.part1 .item{ width: 450px; }
.m-part.part1 .item a{ position: relative; z-index: 1 ; }
.m-part.part1 .item .img{ width: 150px; padding: 2px; border: 1px solid #666; float: left; margin-right: 20px; }
.m-part.part1 .item .mate{ color: #999; }

.m-part.part2 .item{ width: 280px; height: 400px; }
.m-part.part2 .item h3{ font-size: 18px; margin-top: 10px; }

.m-part.part3 .box{ background: #151515; padding: 20px; position: relative; overflow: hidden; zoom: 1; margin-bottom: 20px; }
.m-part.part3 h3{ font-size: 25px; font-weight: normal; }
.m-part.part3 blockquote{ color: #999; margin-bottom: 10px; }
.m-part.part3 .item{ background: none; padding: 0; width: 306px; text-align: center; }
.m-part.part3 .item h4{ padding-top: 5px; }

.m-part.part4 blockquote{ margin-bottom: 30px; text-align: center; }
.m-part.part4 h3{ font-size: 30px; text-align: center; color: #fff; }
.m-part.part4 .item{ width: 450px; height: 500px; }
.m-part.part4 .item:before{ display: none; }
.m-part.part4 .item:hover{ background: #222; }
.m-part.part4 h4{ text-align: center; font-size: 30px; color: #f00; margin-bottom: 20px; }
.m-part.part4 dl{ margin-bottom: 20px; }
.m-part.part4 dt{ color: #fff6c1; font-size: 20px; }

@media screen and (max-width: 780px){
	.m-banner{ height: 300px; background-size: auto 100%; }
	.m-part{ width: auto; padding: 10px; }
	.m-part .item{ width: auto !important; height: auto !important; margin: 0; float: none; margin-bottom: 20px; }
	
}
