@import "../css/awesome.min.css";
*{ font-size: 14px; line-height: 1.8em;}
a{ color: #333;}
a:hover{ color: #4E79E1;}
:before{font-family:fontawesome;}
body{ font-family: microsoft yahei,Arial, Helvetica, sans-serif; color: #333;}
h4{ font-size: large;}
img{ max-width: 100%;}
.b-b-1{ border-bottom:1px solid #ccc;}
.clear{ display: none;}
.container { width: calc(100% - 30px); padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}

.gray{ background: #808080;}
.light{ background:#efefef;}
.blue{ background: #4E79E1;}
.m-t-60{ margin-top:60px;}
.p-y-5{padding: 5px 0;}
.p-y-15{padding: 15px 0;}
.p-y-30{padding: 30px 0;}
.p-t-60{ padding-top:60px;}
.p-y-60{ padding:60px 0;}
.row,.rows{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
.row{ align-items: center;}
.banner{ height: 600px;}
.slide { position: relative; width:100%; }
.ban_c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.ban_t { position: absolute; left: 0; bottom: 0; width: 100%; line-height: 20px; padding: 4px 0; text-indent: 10px; white-space: nowrap; overflow: hidden; color: #fff; background: #333; background: rgba(0,0,0,.5); z-index: 3; }
.ban_nav { position: absolute; bottom: 4px; left: 0; width: 100%; text-align: center; z-index: 4; }
.ban_c img { width: 100%; height: 100%; }
.ban_nav a { display: inline-block; vertical-align: middle; width: 12px; height: 12px; line-height: 14px; overflow: hidden; text-align: center; margin-left: 8px; cursor: pointer; text-decoration: none; font-size: 10px; -webkit-text-size-adjust: none; background: #ccc; text-indent:14px;}
.ban_nav .on { background: #f90; color: #fff; }
.Left, .Right { cursor: pointer; }
.frame{ display: flex; flex-flow: row nowrap; justify-content: space-between; margin-top:30px; margin-bottom:60px;}
.main{ display: flex; flex-flow: column wrap; flex: 1; min-height: 500px;}
.sider{ display: flex; flex-flow: column wrap; width:220px; margin-right:40px; background: #4E79E1;}

#ArticleView ul,#ProductView ul{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content:space-between;}
#ArticleView ul li,#ProductView ul li{ float: left; width:30%; min-width:20%; max-height:250px; margin:10px;}
#ArticleView ul li .thumbs,#ProductView ul li .thumbs{ display: block; height:calc(100% - 40px); padding:8px; border: 1px solid #dee2e6;}
#ArticleView ul li .thumbs a,#ProductView ul li .thumbs a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
#ArticleView ul li img,#ProductView ul li img{ background-color: #fff; max-width: calc(100% -2px); max-height:calc(100% - 2px); transition: all 0.6s;}
#ArticleView ul li img:hover,#ProductView ul li img:hover{ transform: scale(1.2);}
#ArticleView ul li a,#ProductView ul li a{ display: block; line-height: 40px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#ArticleSummary ul{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
#ArticleSummary ul li{ display:flex; flex-flow: column wrap; margin:0px 10px 30px 10px;}
#ArticleSummary ul li .thumbs{ height: 200px; overflow: hidden;}
#ArticleSummary ul li .thumbs img{ width:100%; height: 100%;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ display: block; font-weight:bold; text-align: center; line-height: 2.5em;}
#ArticleSummary ul li .detail .intro{ line-height:20px;}
#ArticleSummary ul li .detail .enter{ display:none;}
#ArticleDetail .Title,#ProductDetail .Title{ display:block; text-align:center; font-size:30px; font-weight:bold; line-height:1.5em; padding: 20px 0;}
#ArticleDetail .Detail,#ArticleDetail .Detail *{ color: inherit; font-size: inherit;}
#ArticleDetail .Detail p{ margin:5px auto;}
.Log{ display:block; text-align:center; background:#f0f0f0; margin-bottom:20px; padding:10px 0;}
.Picture{ text-align:center;}
.Pagination{ display:block; clear:both; text-align:center; padding:10px 0; background:#f8f8f8; margin:20px 0;}
.Pagination a{ padding:0 2px;}
.Pagination #page{ text-align:center; line-height:1em;}

#ArticleIntro ul{ display:inline-block; width: 100%;}
#ArticleIntro ul li{ text-align:left; margin-bottom:30px;}
#ArticleIntro ul li:last-child{ margin-bottom:0px;}
#ArticleIntro ul li .thumbs{ width:120px; height:120px;}
#ArticleIntro ul li .thumbs img{ max-width:120px; max-height:120px;}
#ArticleIntro ul li .detail .title a{ display:block; font-size:16px; font-weight:bold; line-height:22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#ArticleIntro ul li .detail .intro{ margin-top:10px; line-height:1.5em; height:42px; color:#666; overflow: hidden;}
#ArticleIntro ul li .detail .intro .enter{ float: right; display:none; height:100%; line-height:100%;}
#ArticleIntro ul li .detail .intro .enter a{ display: block; line-height: 100%; text-transform:uppercase;}
.LongDatePlus{ float:left; padding:8px; border:2px solid #4E79E1; margin-right:20px; background:#4E79E1; text-align:center; color:#fff;}
.LongDatePlus .dd{ display:block; font-size:24px; font-weight:bold; line-height:28px;}

.RowsTitle{ margin-bottom: 30px;}
.RowsTitle .Title{ display: flex; flex-flow:row nowrap; justify-content: center; align-items: center; position: relative;}
.RowsTitle .Title .cn{ font-size: xx-large; color:#4E79E1; font-weight: bold; padding:0 10px; line-height: 1.2em; height: 38px;}
.RowsTitle .Title .en{ font-size: xx-large; color: #2D3959; font-weight: bold; line-height: 1.2em; height: 38px;}
.RowsTitle .Title::before{ display: inline-flex; margin:0 auto; height: 2px; width:60px; content: ""; background: #2D3959; position: absolute; top:55px;}
.Subject{ margin-bottom: 40px; text-align: center; text-shadow: 1px 1px 3px #fff;}
.Subject .Descript{ font-size: 18px; color: #888;}
.More{ text-align: center; margin-top:20px;}
.More a{ display: inline-block; padding:10px 50px; background: #005FBB; color:#fff; line-height:2em;}

.lng::before{ display: inline-block; content: '\f024'; margin-right:10px; color: #f00;}
.logo img{ height: 68px;}
.menu{ border-top:4px solid #203C7E;}
.menu ul{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.menu ul li{ flex: 1;}
.menu ul li a{ display: block; line-height: 56px; color:#fff; text-align: center; font-size: 16px;}
.menu ul li a:hover,.menu ul .sel a{ background: #fff; color: inherit;}
#wowslider-container{ display: flex; justify-content: center;}
#wowslider-container { overflow: hidden; zoom: 1; position: relative; width:100%; height:100%; margin:0 auto; z-index:100; }
#wowslider-container .ws_shadow { width:100%; height:30px; position: absolute; left:0; bottom:-30px; z-index:-1; }
#wowslider-container .ws_images { position: absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }
#wowslider-container .ws_images a { color:transparent; }
#wowslider-container .ws_images img { top:0; left:0; border:none 0; height: 100%;}
#wowslider-container a { text-decoration: none; outline: none; border: none; }
#wowslider-container .ws_bullets { display: flex; justify-content: center; font-size: 0px; top:calc(100% - 90px); position:absolute; z-index:70; }
#wowslider-container .ws_bullets div { position:relative; display: inline-flex;}
#wowslider-container .ws_bullets a { width:40px; height:4px; background:#fff; border:0; margin:3px; float: left; text-indent: -9999px; position:relative; }
#wowslider-container .ws_bullets a.ws_selbull{ background-color:#27CAED; width: 40px;}
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; top:50%; margin-top:-40px; z-index:60; height: 80px; width: 38px;}
#wowslider-container a.ws_next { right:20px; }
#wowslider-container a.ws_next:before{ float:left; width:0;height:0;content:"";border-left:20px solid #4D8CB2; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:10px; margin-top: 20px; opacity: .5;}
#wowslider-container a.ws_prev { left:90px;}
#wowslider-container a.ws_prev:before{ float:left; width:0;height:0;content:"";border-right:20px solid #4D8CB2; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:8px; margin-top: 20px; opacity: .5;}
#wowslider-container a.ws_next:hover { opacity: .8;}
#wowslider-container a.ws_prev:hover { opacity: .8;}
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { display:block }
#wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev { display:block }
#wowslider-container .ws-title { position: absolute; bottom:50px; left: 0; margin-right:5px; z-index: 50; padding:12px; color: #F9FBFB; text-transform:uppercase; background:#000000; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 18px; }
#wowslider-container .ws-title div { padding-top:5px; font-size: 13px; text-transform:none; }
#wowslider-container .ws_bullets a img { text-indent:0; display:block; top:16px; left:-120px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bullets a:hover img { visibility:visible; }
#wowslider-container .ws_bulframe div div { height:90px; overflow:visible; position:relative; }
#wowslider-container .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; }
#wowslider-container .ws_bullets .ws_bulframe { display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bulframe span { display:block; position:absolute; top:-11px; margin-left:-9px; left:120px; width:15px; height:6px; }
.search{ max-width:1000px; width:100%; margin: 0 auto; height: 50px; margin-top:-50px; position: relative; z-index: 10000; background:#eee;}
.search .RowsTitle{ width:100px; margin:0;}
.search .Subject{ width:calc(50% - 100px); margin: 0; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.search .Subject .Descript{ font-size: inherit;}
.search .Content{ width: 50%; height: 100%; background:#2D3959;}
.search .Content *{ height: 100%;}
.search #kw{width:calc(100% - 160px); padding:0 10px; border:0; height: 100%; line-height: 100%; background: transparent; color: #fff;}
.search select,.search input[type=submit]{ width: 70px; height: 100%; line-height: 100%; border:0; background: transparent; color: #fff; font-size: 16px;}
.search option{ color:#000; font-size: 16px;}
.service ul{ display:flex; flex-flow: row nowrap; justify-content: space-between;}
.service ul li{ flex: 1; margin-right:30px; text-align: center;}
.service ul li:last-child{ margin-right:0px;}
.service ul li .mode{ display: flex; flex-flow: column wrap;}
.service ul li .thumbs{ height:138px; overflow: hidden;}
.service ul li .thumbs img{ width: 100%; height: 100%;}
.service ul li .title a{ display: block; font-size: 18px; line-height: 2em;}
.service ul li .more{ display: none;}
.flow ul{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
.flow ul li a{ display: block; font-size: 16px; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis;}
.flow ul li .more{ display:none;}
.seek{ display: flex; background: url(bridge.jpg) fixed;}
.seek .container{ background: #fff; margin-top:60px;}
.seek .RowsTitle{ position: relative;}
.seek .RowsTitle .More{ position: absolute; right: -15px; top:-80px; z-index: 1000;}
.seek .RowsTitle .More a{ padding: 20px 25px; font-size: 30px; line-height: 1em;}
.seek .RowsTitle .More a:hover{ background:#2d3959}
#TabStrip{ display: flex; flex-flow: row nowrap; justify-content:space-between;}
#TabStrip .TabNavTitle{ display: flex; flex-flow: column wrap; margin-right:40px; padding: 40px;}
.TabTitle{ width: 120px; line-height: 50px; border:1px solid #ccc; margin-bottom: 20px; text-align: center;}
.TabNavContent{ display: flex; flex: 1;}
.about .Margin{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
.about .card{ width: 50%;}
.about .intro{ width: 43%;}
.about .card img{ padding: 10px; border:1px solid #ccc;}
.news #ArticleIntro{ width:650px;}
.news #ArticleIntro ul li{ background: #fff; padding:12px; margin-bottom: 25px;}
.news #ArticleIntro ul li:last-child{margin-bottom:0;}
.news #ArticleIntro .Summary{ float:left; width:48%; margin-right:20px; margin-bottom: 0;}
.news #ArticleIntro .Summary .thumbs{ width:100%; height:236px; overflow:hidden;}
.news #ArticleIntro .Summary .thumbs a{ display:block;}
.news #ArticleIntro .Summary .thumbs img{ width:100%; max-width:inherit; max-height:inherit;}
.news #ArticleIntro .Summary .detail{ margin-top:10px;}
.news #ArticleIntro .Summary .detail .title a{ display:block; font-size:18px; font-weight:bold;}
.news #ArticleIntro .enter{ display:none;}
.news .container .Margin{ background:url(news.png) no-repeat top right;}
.bottom{ display: flex; flex-flow: column wrap; background: #2D3959;}
.bottom *{ color: #fff;}
#nav .RowsTitle .Title{ text-align: left; font-size: 16px; justify-content: inherit; font-weight: bold; color:#fff;}
#nav .RowsTitle .Title *{ color:#fff;}
#nav .RowsTitle .Title::before{ width:30px; height:4px; top:40px; overflow: auto; background: #4E79E1;}
.wechat{ width:220px;}
.wechat .Subject{ display: flex; flex-flow: row nowrap; align-items: center; padding-top:5px; margin-bottom:0;}
.wechat .Descript{ display: flex; text-shadow:none; font-size: 14px; color: #fff;text-align: left; margin-left: 20px;}
.sider #nav .RowsTitle{ margin: 15px;}
.sider #nav .RowsTitle .Title{ width: 100%; flex-flow: column wrap; height: auto; text-align: right;}
.sider #nav .RowsTitle .Title::before{ display: none;}
.sider #nav .RowsTitle .Title .cn{ display:flex; width: 100%; font-size: 16px; height: auto; line-height: 2rem; text-align: right;}
.sider #nav .RowsTitle .Title .en{ display:flex; width: 100%; font-size: 12px; height: auto; line-height: 2rem; font-weight:normal; text-transform: uppercase;}
.sider #nav .Margin{ margin:1px; padding:10px; border-top:1px dotted #fff;}
.cont .Margin *{ color: #fff;}
.submenu ul li{ border-bottom: 1px solid #ccc; padding: 5px}
.submenu ul li:last-child{ border-bottom: 0;}
.submenu ul li a{ color: #666; font-weight: bold;}
.submenu ul li a:hover{ color: #4E79E1;}
.submenu #nav .Margin{ background: #fff;}
.dmenu ul{ display: flex; width: 300px; flex-flow: row wrap; justify-content: center; margin-top:60px;}
.dmenu ul li{ margin-right:15px; margin-top:5px; margin-bottom:5px;}
.dmenu ul li:nth-child(3){margin-right: 0;}
.dmenu ul li a{ display: block; background:#2e58bb; padding: 3px 14px;}
.GuideMap{ margin-bottom:30px; padding:5px 0; border-bottom:1px dashed #ccc;}
.GuideMap .pos::before{ content: '\f2b9'; margin-right:10px; }
.phone .hotline::before{ display:inline-block; content: '\f1e4'; margin-right:10px; color: #44A8D7;}
.phone .hotline .dt a{ color: #44A8D7; font-weight: bold;}
.phone .dd{ display: block; clear: both; font-size: 30px; line-height: 1em; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
@media (min-width: 1200px) {
    .container { width: 1170px;}
}
@media (max-width: 1200px) {
    .banner{height: 500px;}
    .p-t-60{ padding-top:50px;}
    .p-y-60{ padding:50px 0;}
    .m-t-60{ margin-top:50px;}
    .news #ArticleIntro{ width:100%;}
    .news .container .Margin{ background: none;}
}
@media (max-width: 992px) {
    .banner{height: 400px;}
    .p-t-60{ padding-top:40px;}
    .p-y-60{ padding:40px 0;}
    .m-t-60{ margin-top:40px;}
}
@media (max-width: 768px) {
    .banner{height: 300px;}
    .p-t-60{ padding-top:30px;}
    .p-y-60{ padding:30px 0;}
    .m-t-60{ margin-top:30px;}
    .search .RowsTitle,.search .Subject{ display: none;}
    .search .Content{ width: 100%;}
    .about .Margin{ display: flex; flex-flow: column wrap; justify-content: space-between;}
    .about .card{ width:calc(100% - 22px);}
    .about .intro{ width:100%;}
    .frame{ flex-flow: column wrap;}
    .sider{ display:block; margin-right: 0; margin-bottom: 30px; width: auto;}
    .submenu .RowsTitle{ display: none;}
    .submenu ul{ display: flex; flex-flow: row nowrap; justify-content: center;}
    .submenu ul li{ border-bottom: 0; margin:0 5px;}
    .sider .cont{ display: none;}
    .news #ArticleIntro .Summary{ float: none; width: auto; margin-bottom: 25px; margin-right: 0}
    .dmenu{ display: block; margin-top:0;}
    .dmenu ul{ margin-top:30px;}
    .copyright{ display: flex; flex-flow: column wrap; justify-content: center; margin-top:20px; text-align: center;}
    .copyright *{ display:inline-block; margin: 0 auto;}
    }
@media (max-width: 576px) {
    .row{ flex-flow: column wrap;}
    .row > div{ display:block; width: auto;}
    .banner{height: 200px;}
    .p-t-60{ padding-top:20px;}
    .p-y-60{ padding:20px 0;}
    .m-t-60{ margin-top:20px;}
    .row .phone{ display: none;}
    .menu ul{ flex-flow: row wrap;}
    .menu ul li{ width: 25%; flex:none;}
    .RowsTitle .Title{ display: flex; flex-flow:column wrap; }
    .RowsTitle .Title .cn{ display: flex; font-size: x-large; color:#4E79E1; font-weight: bold; padding:0 10px; line-height: 1.2em; height: 38px;}
    .RowsTitle .Title .en{ display: flex; font-size: x-large; color: #2D3959; font-weight: bold; line-height: 1.2em; height: 38px; justify-content: center; align-items: center;position: relative;}
    .RowsTitle .Title::before{ display:none;}
    .RowsTitle .Title .en::before{ display: inline-flex; margin:0 auto; height: 2px; width:60px; content: ""; background: #2D3959; position: absolute; top:50px;}
    .service ul,.flow ul{ flex-flow: row wrap;}
    .service ul li,.flow ul li{ width:calc(50% - 20px); flex: none; text-align: center; margin: 10px;}
    .about{ margin-top:30px;}
    #TabStrip{ flex-flow: column wrap;}
    #TabStrip .TabNavTitle{ display: flex; flex-flow: row nowrap; padding: 0px; margin: 5px;}
    .TabTitle{ flex:1; line-height: 50px; border:1px solid #ccc; margin-bottom: 20px; text-align: center;}
    #ArticleView ul li,#ProductView ul li{ float: left; width:40%; max-height:250px; margin:10px;}
    .support,.right{ float: none; display: block; clear: both; text-align: left;}
    .admin{ display:none;}
    .wechat #nav .Title{ display: none;}
}