@charset "utf-8";

/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{margin: 0;padding: 0;}
/* 要注意表单元素并不继承父级 font 的问题 */
body, button, input, select, textarea{font: 14px '\5FAE\8F6F\96C5\9ED1',arial,helvetica,sans-serif,'\5b8b\4f53'; color:#000; line-height:1.5;}
input, select, textarea{font-size: 100%;}
/* 去掉 table cell 的边距并让其边重合 */
table{border-collapse: collapse;border-spacing: 0;}
/* ie bug：th 不继承 text-align */
th{text-align: inherit;}
/* 去除默认边框 */
fieldset, img{border: none;}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{display: block;}
/* 去掉 firefox 下此元素的边框 */
abbr, acronym{border: none;font-variant: normal;}
/* 一致的 del 样式 */
del{text-decoration: line-through;}
address, caption, cite, code, dfn, em, th, var{font-style: normal;font-weight: 500;}
/* 去掉列表前的标识，li 会继承 */
ol, ul{list-style: none;}
/* 对齐是排版最重要的因素，别让什么都居中 */
caption, th{text-align: left;}
/* 让标题都自定义，适应多个系统应用 */
h1, h2, h3, h4, h5, h6, strong, b{font-size: 100%;font-weight: 500;}
q:before, q:after{content: '';}
/* 统一上标和下标 */
sub, sup{font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup{top: -0.5em;}
sub{bottom: -0.25em;}
/* 链接样式 */
a{color:#000} /* 链接默认样式 */
/*a:visited{color:#555}*/ /* 已访问的链接 */
a:hover{text-decoration:none;color:#1058B2}/* 鼠标悬停在链接上 */
/* 默认不显示下划线，保持页面简洁 */
ins, a{text-decoration: none;}
/* 去除 ie6 & ie7 焦点点状线 */
a:focus, *:focus{outline: none;}
/* 清除浮动 */
.clearfix:before, .clearfix:after{content: "";display: table;}
.clearfix:after{clear: both;overflow: hidden;}
.clearfix{zoom: 1; /* for ie6 & ie7 */}
.clear{clear: both;display: block;font-size: 0;height: 0;line-height: 0;overflow: hidden;}
/* 设置显示和隐藏，通常用来与 js 配合 */
.hide{display: none;}
.block{display: block;}
/* 设置浮动，减少浮动带来的 bug */
.fl, .fr{display: inline;}
.fl{float: left;}
.fr{float: right;}

/* 全局 */
body{min-width: 1200px; }
.container{ width:1200px; margin:0 auto;}
/* header */
#header{ position:fixed; left:0; top:0; width:100%; z-index:999; transform:all .5s; }
#header.on, #header.alien{ background-color:#fff;}
#header .container{ position:relative;}
.logo{ position:absolute; left:0; top:0;}
.logo a{ display:block; width:152px; height:65px; background:url(../images/logo.svg) no-repeat left center;}
.logo img{ display:block;}
#header.on, #header.alien{ box-shadow:0 0 10px rgba(0, 0, 0, .07)}
#header.on .logo a, #header.alien .logo a{ background-image:url(../images/logo_on.svg)}
.nav{ text-align:center;}
.nav a{ position:relative;}
.nav a:after{ content:''; position:absolute; left:50%; bottom:-1px; height:3px; background-color:#1058B2; width:0; opacity:0; z-index:1;transform: translate(-50%);transition: all .36s;}
.nav .item{ display:inline-block; margin:0 10px;}
.nav .item > a{ display:inline-block; font-size:18px; color:#fff; height:65px; line-height:65px; padding:0 15px;}
#header.on .nav .item > a, #header.alien .nav .item > a{ color:#000;}
#header.on .nav .item.active > a, #header.on .nav .item.hover > a, #header.alien .nav .item.active > a{ color:#1058B2;}
#header.on .nav .item.active > a::after, #header.on .nav .item.hover > a::after, #header.alien .nav .item.active > a::after{ width:80%; opacity:1;}
.nav .nav-sub{ display:none; position:fixed; left:0; top:65px; width:100%; height:50px; background-color:#fff; box-shadow:0 4px 4px rgba(0, 0, 0, .07); z-index:1; border-top:1px solid #dfdede; text-align:center; line-height:50px; font-size:16px;}
.nav .nav-sub li{ display:inline-block; margin:0 10px;}
.nav .nav-sub li a{ display:inline-block; color:#000; height:50px; line-height:50px; padding:0 15px;}
#header.on .nav .active .nav-sub{transition: all .36s; display: block; animation: mcslidedown .36s forwards;}
#header.on .nav .active .nav-sub.hide{ display:none;}
#header.on .nav .active .nav-sub li.current a, .nav .nav-sub li a:hover{ color:#1058B2;}
#header.on .nav .active .nav-sub li.current > a:after, .nav .nav-sub li a:hover:after{width:80%; opacity:1;}
.lang{ position:absolute; right:0; top:0;}
.lang a{ position:relative; font-size:18px; color:#fff; display:block; height:65px; line-height:65px; background:url(../images/lang.svg) no-repeat left center; padding-left:30px; padding-right:20px;}
.lang a::after{ position:absolute; right:0; top:50%; margin-top:-6px; content:''; width:8px; height:8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(135deg);}
#header.on .lang a, #header.alien .lang a{ background-image:url(../images/lang_on.svg); color:#000;}
#header.on .lang a::after, #header.alien .lang a::after{ border-color:#000;}

/* banner */
#banner{ width:100%; height:560px; background-position:center top; background-repeat:no-repeat; color:#fff; font-size:24px;}
#banner h2{ font-size:48px; padding-top:260px; margin-bottom:10px;}
/* news-list */
.news-list{ padding-top:150px;}
.news-list ul li{ position:relative; clear:both; margin-bottom:30px;}
.news-list ul li a{ display:block; position:relative; border:1px solid #ccc; overflow:hidden; padding:30px;transition: all .36s;}
.news-list ul li a:hover{ border-color:#1058B2; box-shadow:0 5px 47px 4px rgba(214, 211, 211, .75);}
.news-list ul li strong{ position:absolute; left:60px; top:50px; padding-right:360px; display:block; font-size:22px; color:#000;}
.news-list ul li span{ position:absolute; left:60px; bottom:35px; padding-right:360px; display:block; font-size:16px; color:#999;}
.news-list ul li img{ display:block; float:right;}
/* pages */
.pages{ position:relative; text-align:center; padding:100px 0;}
.pages li{ display:inline-block;}
.pages li a{ display:inline-block; font-size:14px; height:40px; line-height:40px; width:40px; border:1px solid #fff; border-radius:50%; font-weight:bold;}
.pages li.pages-cut a{ color: #aaa; font-size: 20px; font-weight: normal;}
.pages li.current a{ border-color:#1058B2; color:#1058B2;}
/* article */
#banner-article{ position:relative; background-color:#f7f7f7; padding-top:65px;}
#banner-article .container{ position:relative; height:350px;}
#banner-article h1{ font-size:36px; color:#000; padding-top:130px;}
#banner-article p{ position:absolute; left:0; bottom:50px; font-size:22px; color:#666;}
#article{ font-size:22px; line-height:2.18; color:#666; padding:150px 0 100px;}
#article p{ margin-bottom:20px;}
#article img{ max-width:100% !important; max-height:100% !important;}
#context{ background-color:#f7f7f7; padding:50px 0; font-size:20px; color:#999; line-height:1.8;}
#context ul li{ position:relative; float:left; width:50%; min-height: 36px;}
#context ul li span{ position:absolute; left:0; top:0;}
#context ul li a{ display:block; padding-left:90px; padding-right:100px; color:#999;}

/* footer */
#footer{ background-color:#222; position:relative; clear:both; overflow:hidden;}
.footer-mian{ border-bottom:1px solid #3a3a3a; padding:35px 0 40px; color:#fff;}
.footer-contact{ float:left; width:310px; color:#fff; font-size:15px;}
.footer-contact img{ display:block; margin-bottom:15px;}
.footer-contact span{ font-size:20px;}
.footer-nav{ float:left; border-left:1px solid #3a3a3a;}
.footer-nav dl{ float:left; padding-left:100px; font-size:13px;}
.footer-nav dl dt{ font-size:15px; margin-bottom:20px;}
.footer-nav dl dt a{ color:#fff;}
.footer-nav dl dd{ margin-bottom:10px;}
.footer-nav dl dd a{ color:#fff; opacity:.6;}
.footer-wechat{ float:right; width:90px; font-size:15px; text-align:center;}
.footer-wechat img{ display:block; padding-top:20px;}
.footer-bottom{ padding:20px 0 30px;}
.footer-lang{ font-size:13px; color:#fff; margin-bottom:15px;}
.footer-lang strong{ font-weight:normal; display:inline-block; margin-right:80px;}
.footer-lang a{ color:#fff; opacity:.6;}
.footer-lang a.current{ opacity:1;}
.footer-lang span{ margin:0 15px;}
.footer-copyright{ font-size:13px; opacity:.6; color:#fff;}

/**/
@keyframes mcslidedown {
    0%{height: 0;}
	100%{height: 50px;}
}