/* 精悦鑫 PC - 设计宽 1920，兼容 IE9 */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, table, tr, th, td, form, input, textarea, button, header, footer, nav, section, article, label {
margin: 0; padding: 0; border: 0;
}
header, footer, nav, section, article { display: block; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { vertical-align: top; max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
* { box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", "PingFang SC", SimSun, Arial, sans-serif;
font-size: 15px;
color: #333;
line-height: 1.7;
background: #fff;
min-width: 1440px;
-webkit-font-smoothing: antialiased;
}
.clearfix:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { zoom: 1; }
.wrap { width: 1200px; margin: 0 auto; }
/* Logo */
.logo { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
.logo img { display: block; height: 44px; width: auto; }
/* Header */
.site-header {
position: relative; z-index: 100; background: #fff;
border-bottom: 1px solid #e8e8e8;
}
.site-header-inner {
width: 1440px; margin: 0 auto; height: 76px; position: relative;
}
.site-header .logo { position: absolute; left: 0; top: 16px; }
.site-nav {
position: absolute; right: 0; top: 0; height: 76px;
}
.site-nav li {
float: left; height: 76px; margin-left: 0;
display: table;
}
.site-nav a {
display: table-cell; vertical-align: middle;
height: 76px; padding: 0 20px;
font-size: 16px; color: #222; text-align: center;
line-height: 1.35; font-weight: 400;
white-space: normal;
}
.site-nav a:hover, .site-nav .active a {
background: #0055aa; color: #fff;
}
.nav-contact-btn {
position: absolute; right: 0; top: 20px;
display: block; padding: 0 22px; height: 36px; line-height: 36px;
background: #0055aa; color: #fff; font-size: 14px; text-align: center;
}
.nav-contact-btn:hover { background: #004488; }
.header-with-btn .site-nav { right: 120px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
/* 首页 Hero */
.home-hero {
background: #eef3f8;
overflow: hidden;
position: relative;
text-align: center;
}
.home-hero-img {
display: block; width: 100%; max-width: 1920px; height: auto; margin: 0 auto;
}
/* 通用区块 */
.sec { padding: 70px 0; }
.sec-title { text-align: center; margin-bottom: 20px; }
.sec-title h2 {
font-size: 32px; color: #222; font-weight: 700; display: inline-block;
padding-bottom: 14px; position: relative; letter-spacing: 2px;
}
.sec-title h2:after {
content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; margin-left: -22px;
height: 3px; background: #0055aa;
}
.sec-desc {
text-align: center; color: #666; font-size: 15px; line-height: 1.85;
max-width: 820px; margin: 0 auto 40px;
}
/* 解决方案 */
.sol-list { text-align: center; }
.sol-item {
display: inline-block; zoom: 1; *display: inline; width: 270px;
margin: 0 12px 20px; vertical-align: top;
}
.sol-pic {
width: 240px; height: 150px; margin: 0 auto 14px;
border: 4px solid #c9cbca;
background: #fff;
overflow: hidden;
box-sizing: border-box;
}
.sol-pic img {
display: block; width: 100%; height: 100%;
object-fit: cover;
}
.sol-item h3 { font-size: 17px; color: #333; font-weight: 600; letter-spacing: 1px; }
/* 关于块 */
.home-about {
height: 400px;
background: #1a4a7a url(../images/home/about-bg.jpg) center center no-repeat;
background-size: cover;
position: relative; overflow: hidden;
}
.home-about-box {
position: absolute; left: 50%; margin-left: -600px; top: 70px;
width: 560px; padding: 0;
background: none;
color: #fff;
}
.home-about-box h2 { font-size: 30px; margin-bottom: 20px; letter-spacing: 2px; font-weight: 700; }
.home-about-box p { font-size: 15px; line-height: 2; margin-bottom: 28px; }
.btn {
display: inline-block; zoom: 1; *display: inline; padding: 11px 34px;
font-size: 15px; cursor: pointer; border: none;
}
.btn-white { background: #fff; color: #333; border-radius: 24px; padding: 10px 36px; }
.btn-blue { background: #0055aa; color: #fff; border-radius: 4px; }
.btn-blue:hover { background: #004488; }
/* 首页产品 Tab */
.home-prod { padding: 60px 0 0; }
.home-prod-body { width: 1200px; margin: 0 auto 48px; }
.home-prod-left { float: left; width: 480px; padding-top: 10px; }
.home-prod-head { margin-bottom: 22px; }
.home-prod-head h2 {
font-size: 26px; color: #222; letter-spacing: 1px; font-weight: 700;
display: inline-block; padding-bottom: 12px; position: relative;
}
.home-prod-head h2:after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 72px; height: 3px; background: #0055aa;
}
.home-prod-txt { color: #555; font-size: 15px; line-height: 1.95; }
.home-prod-pic {
float: right; width: 640px; height: 320px;
text-align: center; overflow: hidden;
}
.home-prod-pic img {
display: block; max-width: 100%; max-height: 100%;
width: auto; height: auto; margin: 0 auto;
}
.home-prod-tabs-wrap {
width: 1200px; margin: 0 auto; padding: 0 0 50px;
}
.home-prod-tabs { width: 100%; overflow: hidden; }
.home-prod-tabs li {
float: left; width: 216px; height: 86px; margin-right: 30px;
padding-top: 22px; line-height: 1.45; box-sizing: border-box;
text-align: center; background: #eef1f5;
cursor: pointer; font-size: 15px; color: #333; font-weight: 600;
}
.home-prod-tabs li:last-child { margin-right: 0; }
.home-prod-tabs li.active, .home-prod-tabs li:hover { background: #0055aa; color: #fff; }
.home-prod-panel { display: none; }
.home-prod-panel.active { display: block; }
/* Footer */
.site-footer {
background: #f0f2f5 url(../images/home/footer-wave.jpg) center bottom no-repeat;
background-size: cover;
padding: 44px 0 40px; border-top: 1px solid #e4e7eb;
}
.footer-inner { width: 1200px; margin: 0 auto; }
.footer-col { float: left; }
.footer-brand { width: 300px; margin-right: 30px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand .logo img { height: 40px; }
.footer-brand .company { font-size: 15px; color: #222; font-weight: 700; margin-bottom: 12px; }
.footer-brand .addr { font-size: 12px; color: #666; line-height: 1.85; margin-bottom: 8px; }
.footer-brand .addr strong { color: #333; font-weight: 700; }
.footer-links { width: 170px; margin-left: 20px; }
.footer-links a { display: block; font-size: 13px; color: #222; line-height: 2.15; font-weight: 700; }
.footer-links a:hover { color: #0055aa; }
.footer-contact { width: 300px; margin-left: 20px; float: right; }
.footer-contact h4 { font-size: 14px; color: #222; margin-bottom: 8px; font-weight: 700; }
.footer-contact .phones-row {
font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 14px;
white-space: nowrap;
}
.footer-contact .phones-row span {
display: inline-block; margin-right: 18px;
}
.footer-contact .phones-row span:last-child { margin-right: 0; }
/* 内页 Banner */
.page-banner { background: #0a2d5c; position: relative; overflow: hidden; }
.page-banner-inner { width: 1200px; margin: 0 auto; padding-top: 120px; position: relative; z-index: 2; }
.page-banner h1 { font-size: 42px; color: #fff; font-weight: 700; line-height: 1.25; letter-spacing: 2px; }
.page-banner .banner-sub { font-size: 16px; color: #cde; margin-top: 12px; line-height: 1.6; }
.page-banner.banner-news {
background-color: #9eb6c8;
background-position: center center;
background-repeat: no-repeat;
}
.page-banner.banner-news .page-banner-inner { padding-top: 120px; }
.page-banner.banner-news h1 {
color: #0055aa; font-size: 36px; font-weight: 600; letter-spacing: 1px;
}
.page-banner.banner-news h1 em {
display: block; font-style: normal; font-size: 42px; font-weight: 700;
margin-top: 8px; letter-spacing: 4px;
}
.page-banner.banner-contact { background: #7a9ab8; }
.page-banner.banner-contact h1 { color: #0055aa; }
.page-banner.banner-contact h1 em {
display: block; font-style: normal; font-size: 28px; margin-top: 6px; letter-spacing: 1px;
}
.page-banner.banner-about {
background-color: #0a2d5c;
background-position: center center;
background-repeat: no-repeat;
}
.page-banner.banner-about .page-banner-inner { padding-top: 130px; }
.page-banner.banner-about h1 { color: #fff; font-size: 48px; letter-spacing: 4px; }
.page-banner.banner-about .banner-sub { color: #fff; font-size: 16px; margin-top: 14px; }
.page-banner.banner-product {
}
.page-banner.banner-product .page-banner-inner { padding-top: 110px; }
.page-banner.banner-product h1 { color: #0055aa; font-size: 36px; }
/* 关于我们 */
.about-intro { padding: 60px 0; }
.about-intro-pic {
float: left; width: 560px; height: 340px; background: #c8d4e0; overflow: hidden;
}
.about-intro-pic img { display: block; width: 100%; height: 100%; }
.about-intro-txt { float: right; width: 560px; padding-top: 16px; }
.about-intro-txt h2 { font-size: 28px; margin-bottom: 10px; letter-spacing: 1px; }
.about-intro-txt .line { width: 40px; height: 3px; background: #0055aa; margin-bottom: 20px; }
.about-intro-txt p { color: #555; font-size: 15px; line-height: 1.95; margin-bottom: 14px; }
.branch-sec {
padding: 50px 0 60px;
background-color: #f5f7fa;
background-position: center top;
background-repeat: no-repeat;
}
.branch-item { float: left; width: 560px; margin-right: 80px; }
.branch-item.last { margin-right: 0; }
.branch-item h3 { text-align: center; font-size: 20px; margin-bottom: 16px; letter-spacing: 1px; }
.branch-pic { width: 100%; height: 280px; background: #c0cedc; overflow: hidden; }
.branch-pic img { display: block; width: 100%; height: 100%; }
.culture-sec { padding: 60px 0; background: url(/template/default/images/743a7ad4f9b74d806c11cbe0c2d53d7.jpg) center bottom no-repeat; }
.culture-col-left { float: left; width: 270px; margin-right: 20px; }
.culture-item {
float: left; width: 270px; margin: 0 20px 20px 0; padding: 22px 18px;
background: #fff; border: 1px solid #e8ecf0; border-radius: 6px;
min-height: 150px; box-sizing: border-box;
}
.culture-col-left .culture-item { float: none; width: 100%; margin-right: 0; min-height: 0; }
.culture-item.culture-tall { min-height: 340px; }
.culture-item h4 {
font-size: 17px; color: #0055aa; margin-bottom: 14px; text-align: center;
padding-bottom: 10px; position: relative; letter-spacing: 1px;
}
.culture-item h4:after {
content: ""; position: absolute; left: 50%; bottom: 0; width: 36px; margin-left: -18px;
height: 3px; background: #0055aa; border-radius: 2px;
}
.culture-item p { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 10px; }
.history-sec {
padding: 80px 0 70px;
background-position: center top;
background-repeat: no-repeat;
color: #fff;
background: url(/template/default/images/be12ab7a9fa30d4c4718753d11f2a5a.jpg) center center no-repeat;
}
.history-title { float: left; width: 180px; font-size: 30px; padding-top: 16px; letter-spacing: 2px; }
.history-list { float: right; width: 920px; border-left: 2px solid rgba(255,255,255,0.25); padding-left: 28px; }
.history-list li { position: relative; padding-bottom: 24px; }
.history-list li:before {
content: ""; position: absolute; left: -36px; top: 6px;
width: 10px; height: 10px; border-radius: 50%; background: #1a6fd4; border: 2px solid #fff;
}
.history-list .year { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.history-list p { font-size: 14px; opacity: 0.92; line-height: 1.75; }
.honor-sec { padding: 60px 0; background: url(/template/default/images/6d93d767472093e8dab1cbb7297a897.jpg) center center no-repeat #f2f3f7; }
.honor-pic { float: left; width: 560px; height: 360px; overflow: hidden; }
.honor-pic img { display: block; width: 100%; height: 100%; }
.honor-txt { float: right; width: 560px; padding-top: 80px; }
.honor-txt h2 { font-size: 28px; margin-bottom: 10px; letter-spacing: 1px; color: #0055aa; }
.honor-txt .line { width: 40px; height: 3px; background: #0055aa; margin-bottom: 20px; }
.honor-txt p { color: #555; font-size: 15px; line-height: 1.95; }
/* 产品列表 */
.product-grid { padding: 50px 0 10px; }
.product-item { float: left; width: 360px; margin: 0 60px 40px 0; text-align: center; }
.product-item.mr0 { margin-right: 0; }
.product-item h3 { font-size: 16px; color: #333; margin-bottom: 14px; font-weight: 600; min-height: 42px; line-height: 1.45; }
.product-item .pic { width: 360px; height: 250px; background: #d5dde6; display: block; }
.product-item a:hover h3 { color: #0055aa; }
.pagination { clear: both; text-align: center; padding: 36px 0 60px; }
.pagination .page-numbar { display: inline; border: 0; padding: 0; margin: 0; background: none; min-width: 0; height: auto; line-height: normal; }
.pagination a, .pagination span.page-num {
display: inline-block; zoom: 1; *display: inline; vertical-align: middle;
min-width: 36px; height: 36px; line-height: 34px; margin: 0 4px; padding: 0 10px;
border: 1px solid #ddd; color: #555; font-size: 14px; box-sizing: border-box; text-align: center;
}
.pagination a:hover, .pagination .current, .pagination a.page-num-current { background: #0055aa; border-color: #0055aa; color: #fff; }
/* 产品详情 */
.detail-hero { background: #dceaf8; }
.detail-hero-txt { float: left; width: 520px; padding-top: 30px; }
.detail-hero-txt h1 { font-size: 42px; color: #0a2d5c; margin-bottom: 10px; letter-spacing: 1px; }
.detail-hero-txt h2 { font-size: 20px; color: #333; margin-bottom: 18px; font-weight: 600; }
.detail-hero-txt p { color: #555; font-size: 15px; line-height: 1.95; }
.detail-hero-pic { float: right; width: 560px; height: 340px; background: #b8c8d8; }
.feature-sec { padding: 50px 0; }
.feature-list { float: left; width: 560px; }
.feature-list.right { float: right; }
.feature-list li {
padding: 12px 0 12px 44px; position: relative; color: #444; font-size: 15px; line-height: 1.6;
border-bottom: 1px dashed #e5e5e5;
}
.feature-list .ico {
position: absolute; left: 0; top: 10px; width: 30px; height: 30px;
background: #0055aa; color: #fff; text-align: center; line-height: 30px; font-size: 12px;
}
.media-sec { padding: 36px 0; background: #f0f2f5; text-align: center; }
.media-box { width: 900px; height: 460px; margin: 0 auto; background: #9aabbc; position: relative; }
.media-box .play {
position: absolute; left: 50%; top: 50%; width: 68px; height: 68px;
margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255,255,255,0.85);
}
.media-box .play:after {
content: ""; position: absolute; left: 26px; top: 20px;
border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent #0055aa;
}
.spec-sec { padding: 50px 0 70px; background: #f5f7fa; }
.spec-table { width: 100%; border: 1px solid #d0d8e0; background: #fff; }
.spec-table th, .spec-table td { border: 1px solid #d0d8e0; padding: 11px 14px; font-size: 14px; text-align: center; }
.spec-table .label { width: 160px; background: #f5f7fa; font-weight: 600; color: #333; }
.spec-table .side {
width: 48px; background: #0055aa; color: #fff; font-weight: 700; font-size: 14px;
writing-mode: tb-rl; writing-mode: vertical-lr;
letter-spacing: 4px; vertical-align: middle; text-align: center;
}
.spec-table tr:nth-child(even) td:not(.side) { background: #fafbfc; }
.spec-note { margin-top: 14px; font-size: 12px; color: #888; }
/* 新闻 */
.news-list-sec { padding: 0 0 50px; margin-top: 50px; }
.news-list-sec .news-list-head {
height: 3px; background: #0055aa; margin-bottom: 0;
}
.news-item { border-bottom: 1px dashed #cfcfcf; padding: 28px 0; }
.news-item a { display: block; zoom: 1; }
.news-date {
float: left; width: 96px; text-align: left; position: relative;
padding-left: 14px; box-sizing: border-box;
}
.news-date:before {
content: ""; position: absolute; left: 0; top: 6px;
width: 3px; height: 36px; background: #0055aa;
}
.news-date .day { font-size: 42px; font-weight: 700; color: #333; line-height: 1; }
.news-date .ym { font-size: 13px; color: #999; margin-top: 8px; letter-spacing: 0.5px; }
.news-body { float: left; width: 920px; padding: 18px 0 0 30px; }
.news-body h3 { font-size: 18px; color: #333; font-weight: 500; line-height: 1.5; }
.news-item a:hover h3 { color: #0055aa; }
.news-view {
float: right; width: 100px; padding-top: 20px; text-align: right;
}
.news-view span {
display: inline-block; zoom: 1; *display: inline;
min-width: 64px; padding: 7px 20px; border: 1px solid #ccc;
border-radius: 4px; font-size: 13px; color: #666; text-align: center;
background: #fff;
}
.news-item a:hover .news-view span { border-color: #0055aa; color: #0055aa; }
.news-list-sec .pagination { padding: 36px 0 20px; }
.news-detail-sec { padding: 40px 0 70px; }
.news-detail-sec h1 { font-size: 28px; text-align: center; margin-bottom: 12px; line-height: 1.4; }
.news-meta { text-align: center; color: #999; font-size: 13px; margin-bottom: 32px; }
.news-content { color: #444; line-height: 2; font-size: 16px; min-height: 240px; }
.news-content p { margin-bottom: 14px; }
.news-content .ph { height: 280px; background: #d8e0e8; margin: 20px 0; }
.news-nav { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e5e5; }
.news-nav a { display: block; color: #555; line-height: 2; font-size: 14px; }
.news-nav a:hover { color: #0055aa; }
/* 联系我们 */
.contact-phones-bar {
padding: 28px 0; border-top: 2px solid #4a86ad; border-bottom: 2px solid #4a86ad;
margin-top: 30px;
}
.contact-phones-row { margin-bottom: 18px; }
.contact-phones-row:last-child { margin-bottom: 0; }
.contact-phones-bar .col { float: left; width: 50%; }
.contact-phones-bar h3 { font-size: 17px; margin-bottom: 10px; color: #222; font-weight: 700; }
.contact-phones-bar p { font-size: 15px; color: #555; letter-spacing: 0.5px; }
.contact-main { padding: 40px 0 60px; }
.contact-left { float: left; width: 560px; }
.contact-factory { margin-bottom: 30px; }
.contact-factory h3 { font-size: 20px; color: #0055aa; margin-bottom: 12px; }
.contact-factory .addr { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 14px; }
.contact-map { width: 100%; height: 220px; background: #c5d0dc; }
.contact-form-wrap {
float: right; width: 560px; background: #f5f7fa; padding: 36px 40px;
}
.contact-form-wrap h2 {
font-size: 24px; color: #0055aa; text-align: center; margin-bottom: 28px; letter-spacing: 1px;
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 15px; color: #333; margin-bottom: 8px; }
.form-group input, .form-group textarea {
width: 100%; height: 44px; padding: 0 12px; border: 1px solid #ddd;
font-size: 15px; font-family: inherit; background: #fff;
}
.form-group textarea { height: 80px; padding: 10px 12px; resize: none; }
.form-submit {
width: 100%; height: 46px; background: #0055aa; color: #fff; border: none;
font-size: 16px; cursor: pointer; margin-top: 8px; letter-spacing: 2px;
}
.form-submit:hover { background: #004488; }