/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html { font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* ==========================================================================
Links
========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
 
a:focus { outline: thin dotted; }
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
 
h1 { font-size: 2em; margin: 0.67em 0; color: #353535; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }
/* * Addresses styling not present in IE 6/7/8/9. */
mark { background: #ff0; color: #000; }
/* * Addresses margins set differently in IE 6/7. */
p, pre { margin: 1em 0; }
/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* * Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
/* * Addresses CSS quotes not supported in IE 6/7. */
q { quotes: none; }
/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/* * Addresses margins set differently in IE 6/7. */
 
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul { padding: 0 0 0 40px; }
/* * Corrects list images handled incorrectly in IE 7. */
nav ul, nav ol { list-style: none; list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
 
img { border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */ }
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
 
figure { margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/* * Corrects margin displayed oddly in IE 6/7. */
 
form { margin: 0; }
/* * Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */
legend { border: 0; /* 1 */
	padding: 0; white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */ }
/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */
button, input, select, textarea { font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */ }
/* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in
* the UA stylesheet. */
button, input { line-height: normal; }
/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
*overflow: visible; /* 4 */ }
/* * Re-set default cursor for disabled elements. */
button[disabled], input[disabled] { cursor: default; }
/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	*height: 13px; /* 3 */
*width: 13px; /* 3 */ }
/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box; }
/* * Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* * Removes inner padding and border in Firefox 3+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */
vertical-align: top; /* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }
/* ==========================================================================
Global Styles
========================================================================== */
a { color: #353535; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a:hover, a:focus { color: #3dc9b3; text-decoration: none; }
p { color: #8c9398; word-spacing: 1px; line-height: 25px; font-size: 14px; }
h2 { font-size: 15px; color: #353535; text-transform: uppercase; font-weight: bold; }
h2::after { content: " "; border: solid 2px #3dc9b3; display: block; width: 35px; margin: 25px auto; }
h3::after {
    content: " ";
    border: solid 2px #3dc9b3;
    display: block;
    width: 35px;
    margin: 25px auto;
}
h4::after {
    content: " ";
    border: solid 2px #3dc9b3;
    display: block;
    width: 35px;
    margin: 25px auto;
}
.section-padding { padding: 90px 0 100px }
.dark-bg { background: #f3f5f8; }
.light-bg { background-color: #fff; }
.dark-box { background: #f3f5f8; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; }
.light-box { background-color: #fff; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; padding: 20px 0; }
.light-box:hover, .light-box:focus { -webkit-box-shadow: 0px 3px 0px 0px #3dc9b3; -moz-box-shadow: 0px 3px 0px 0px #3dc9b3; box-shadow: 0px 3px 0px 0px #3dc9b3; }
.box-hover { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; }
.box-hover:hover, .box-hover:focus { transform: translate(0, -15px); -webkit-transform: translate(0, -15px); -ms-transform: translate(0, -15px); }
.wrapper { height: 650px; }
.nopadding { padding: 0; }
.inner { padding-top: 110px; }
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/* ==========================================================================
Navigation
========================================================================== */
nav { background-color: #242830; margin-top: -1px; }
nav ul { list-style: none; padding: 0; }
nav ul li { color: rgba(255, 255, 255, 0.6); display: block; border-bottom: 1px dotted rgba(255, 255, 255, 0.2); transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; }
nav ul li:last-child { border: none; }
nav ul li a { color: rgba(255, 255, 255, 0.6); display: block; padding: 20px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; }
nav ul li a:hover, nav ul li a:focus { text-decoration: none; color: rgba(255, 255, 255, 1); }
#nav-toggle { position: absolute; right: 15px; top: 0; }
#nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; height: 5px; width: 35px; background: #ffffff; position: absolute; display: block; content: ''; }
#nav-toggle span:before { top: -10px; }
#nav-toggle span:after { bottom: -10px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; }
#nav-toggle.active span { background-color: transparent; }
#nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
#nav-toggle.active span:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); }
#nav-toggle.active span:after { transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); top: 10px; }
.navicon { position: relative; height: 26px; }
.indicator { position: absolute; right: 0 !important; }
.pull { display: none; }
/* ==========================================================================
Hero
========================================================================== */
.hero { background: url('../img/hero-bg.webp') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 35px 0 150px 0; height: auto; }
.hero-list { background: url('../img/hero-list-bg.webp') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 35px 0 150px 0; height: auto; }
.hero h1,
.hero-list h1 {
    font-size: 50px;
    letter-spacing: 12px;
    margin: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.15);
    padding: 14px 0px;
    display: inline-block;
    border-radius: 8px;
    backdrop-filter: blur(4px); /* 图片复杂时非常有用 */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
    .hero h1,
    .hero-list h1 {
        font-size: 32px;
        letter-spacing: 6px;
    }
}
.hero h1 span,.hero-list h1 span { color: #0086fc; display: inline-block; }
.hero p,.hero-list p { letter-spacing: 1px; }
.learn-more-btn { background: rgba(61, 201, 179, 1); padding: 20px 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; -webkit-box-shadow: 0px 3px 0px 0px #309383; -moz-box-shadow: 0px 3px 0px 0px #309383; box-shadow: 0px 3px 0px 0px #309383; margin: 60px 0 0; font-weight: bold; }
.learn-more-btn:hover, .learn-more-btn:focus { background: rgba(61, 201, 179, 0.6); color: #fff; }
.banner-text,.banner-text a{
	color: #ffffff;
}
.stats-bar{
  color: #ffffff;
}
/* ==========================================================================
Intro
========================================================================== */
.intro { background: #f3f5f8; }
.intro p { margin: 50px 0 0; }
h1.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }
h3.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }
h2.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }
/* ==========================================================================
Features
========================================================================== */
.features-wrapper, .team-wrapper { margin: 70px 0 0; }
.shadow { text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px; }
.icon { height: 175px; width: 175px; line-height: 175px; max-width: 100%; background: #3dc9b3; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
/* ==========================================================================
iPhone Section
========================================================================== */
.iphone { width: 50%; background: #f3f5f8; float: left; height: 100%; box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); z-index: 1; }
.fluid-white { width: 50%; background: #fff; float: right; height: 100%; z-index: 2; }
.responsive-services { position: relative; }
/* ==========================================================================
Swag
========================================================================== */
.swag { background: url('../img/plants-bg.webp') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 50px 0; }
.swag h1 { color: #fff; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; }
.swag h1 span { display: block; font-size: 25px; margin-top: 20px; }
.down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.8); display: inline-block; margin: 10px auto 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; }
.down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); }
/* ==========================================================================
Portfolio
========================================================================== */
.effects { padding-left: 15px; }
.effects .img { position: relative; margin-bottom: 50px; position: relative; z-index: 1; overflow: hidden; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: -15px; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { display: block; margin: 0; padding: 0; height: auto; }
.overlay { display: block; position: absolute; z-index: 20; background: rgba(100, 194, 158, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; line-height: 30px; }
.overlay-effect .img i { font-size: 30px; }
.overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; }
.overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
.overlay-effect .img.hover .overlay { height: 100%; opacity: 1; }
.img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50px; }
/* ==========================================================================
Subscribe
========================================================================== */
.subscribe { background: url('../img/keyboard-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 120px 0 140px; }
.subscribe h1 { color: #fff; margin-bottom: 40px; }
.subscribe h3 { color: #fff; margin-bottom: 40px; }
.subscribe h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }
.subscribe h3 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }
.subscribe input[type=text] { background-color: rgba(255, 255, 255, 0.1); border: solid 1px #fff; padding: 20px; width: 30%; color: #fff; }
.subscribe input[type=email] {
    background-color: rgba(255, 255, 255, 0.1);
    border: solid 1px #fff;
    padding: 20px;
    width: 30%;
    color: #fff;
}

.subscribe input[type=submit] { background: rgba(61, 201, 179, 0.5); border: solid 1px rgba(61, 201, 179, 0.5); padding: 20px; color: #fff; text-transform: uppercase; letter-spacing: 1px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.subscribe input[type=submit]:hover { background: rgba(61, 201, 179, 1); border: solid 1px rgba(61, 201, 179, 1); color: #fff; }
/* ==========================================================================
CTA
========================================================================== */
.ignite-cta { background-color: #242830; padding: 70px 0; }
.ignite-btn { display: inline-block; padding: 25px 40px; color: #fff; border: solid 1px #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.ignite-btn:hover, .ignite-btn:focus { color: #3dc9b3; border: solid 1px #3dc9b3; }
/* ==========================================================================
Team
========================================================================== */
.team img { margin-bottom: 40px; }
ul.social-buttons { list-style: none; margin: 0; padding: 0; }
ul.social-buttons li { display: inline-block; margin-right: 10px; }
ul.social-buttons li:last-child { margin-right: 0; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #242830; display: inline-block; color: #fff; font-size: 17px; line-height: 40px; text-align: center; }
.social-btn:hover, .social-btn:focus { background: #3dc9b3; color: #fff; }
.social { margin-top: 25px }
/* ==========================================================================
Contact
========================================================================== */
.up-btn { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.5); display: block; margin: 0 auto; color: #fff; font-size: 18px; line-height: 46px; text-align: center; position: absolute; top: -26px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.up-btn:hover, up-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); }
.contact-details { margin: 70px 0; }
.contact-details h2 { font-size: 20px; }
.contact-details h2 span { display: block; color: #3dc9b3; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-top: 15px; }
.contact-wrap { position: relative; }
/* ==========================================================================
Footer
========================================================================== */
footer a { color: #a1a9b0; }
footer { background-color: #242830; padding: 40px 0 30px; }
footer p { color: #fff; }
ul.legals { list-style: none; color: #fff; line-height: 25px; }
ul.legals li { display: inline-block; }
ul.legals li::after { content: " |"; }
ul.legals li:last-child::after { content: ""; }
.legals { text-align: left; }
.credit { text-align: right; }
/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider { margin-top: 70px; }
ul.slides li { margin-bottom: 20px; }
/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.wp3 { background: url('../img/40-foot-solar.webp') no-repeat center center; background-position: 200px 10px; height: 100%; }
.col-md-blog{
	overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 75px;
}

/* 容器基础样式 */
.slides-related {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -10px; /* 抵消内部 padding */
    justify-content: flex-start;
}

/* 每一个列表项的盒子 */
.col-md-related {
    padding: 10px;
    /* 默认 PC 端：一行 3 个 (可以根据需要调整为 33.33% 或 50%) */
    flex: 0 0 33.33%;
    max-width: 33.33%;
    box-sizing: border-box;
}

/* 链接按钮美化 */
.col-md-related .btn-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px 20px;
    background: #ffffff;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    
    /* 文字溢出处理：最多显示两行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em; /* 保持高度一致 */
}

/* 悬停效果 */
.col-md-related .btn-link:hover {
    color: #007bff; /* 或者你网站的主题色 */
    background-color: #f8fbff;
    border-color: #007bff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,123,255,0.15);
    text-decoration: none;
}

/* --- 响应式媒体查询 --- */

/* 平板端：一行 2 个 */
@media (max-width: 992px) {
    .col-md-related {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 移动端：一行 1 个 */
@media (max-width: 576px) {
    .slides-related {
        margin: 10px 0;
    }
    .col-md-related {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 8px 0;
    }
    .col-md-related .btn-link {
        font-size: 14px;
        padding: 12px 15px;
        min-height: auto; /* 移动端高度自适应 */
    }
}

/* 容器基础设置 */
.col-md-faqs {
    max-width: 850px;
    margin: 30px auto;
    padding: 20px;
    background: #ffffff;
}

/* 标题样式：模拟卡片头部 */
.col-md-faqs h3 {
    position: relative;
    font-size: 18px;
    color: #2c3e50;
    background: #f8f9fa;
    padding: 15px 20px 15px 45px; /* 左侧留出图标空间 */
    margin: 20px 0 0 0;
    border-left: 4px solid #007bff; /* 品牌色装饰线 */
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}

/* 标题左侧的问号图标 (伪元素实现) */
.col-md-faqs h3::before {
    content: 'Q';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #007bff;
    font-size: 20px;
}

/* 答案描述样式 */
.col-md-faqs p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    padding: 15px 20px;
    margin: 0;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .col-md-faqs h3 {
        font-size: 16px;
        padding: 12px 15px 12px 35px;
    }
    .col-md-faqs h3::before {
        left: 10px;
        font-size: 16px;
    }
    .col-md-faqs p {
        font-size: 14px;
    }
}

/* 1. 容器：解决左右溢出 */
.slides-blogs {
    display: flex;
    flex-wrap: wrap;
    /* 必须：防止负 margin 导致溢出，并在手机端取消负 margin */
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 2. 通用：确保所有元素计算宽度时不包含边距 */
.slides-blogs *, .slides-blogs *:before, .slides-blogs *:after {
    box-sizing: border-box;
}

/* 3. 卡片列容器 */
.slides-blogs .col-md-4 {
    position: relative;
    width: 100%; /* 手机端默认全宽 */
    padding: 10px; /* 卡片之间的间距 */
    display: flex;
    flex-direction: column;
}

/* 4. 卡片主体 */
.slides-blogs .wp4 {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%; /* 确保卡片不会超过父级 padding 后的宽度 */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 5. 图片区域：固定比例 */
.slides-blogs .overlay-effect {
    position: relative;
    width: 100%;
    padding-top: 60%; 
    background: #f5f5f5;
    overflow: hidden;
}

.slides-blogs .img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

.slides-blogs .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 6. 内容包装 */
.slides-blogs .blog-content-wrap {
    padding: 15px;
    flex-grow: 1;
}

.slides-blogs .blog-title {
    font-size: 1.05rem;
    line-height: 1.4;
    margin-bottom: 10px;
    height: 4.5em;
    overflow: hidden;
}

/* --- 响应式适配 --- */

/* PC 端：一行 3 个 */
@media (min-width: 992px) {
    .slides-blogs {
        margin-left: -10px;
        margin-right: -10px;
        width: calc(100% + 20px);
    }
    .slides-blogs .col-md-4 {
        width: 33.333%;
    }
}

/* 平板端：一行 2 个 */
@media (min-width: 768px) and (max-width: 991px) {
    .slides-blogs .col-md-4 {
        width: 50%;
    }
}

/* 移动端 (解决超过宽度) */
@media (max-width: 767px) {
    .slides-blogs {
        margin: 0;
        width: 100%;
        overflow: hidden; /* 彻底切除溢出部分 */
    }
    .slides-blogs .col-md-4 {
        width: 100%;
        padding: 15px; /* 增加手机边缘感 */
    }
    .slides-blogs .blog-title, .slides-blogs p {
        height: auto;
        display: block; /* 手机端显示完整 */
    }
}

/* 聚合的相关页面 */

/* 博客文章列表模块专用响应式样式 - 最终修正版 */
.col-md-label {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
  margin-bottom: 40px;
  width: 100%;
  overflow: hidden; /* 防止内容溢出 */
}

/* 清除浮动和间距 */
.col-md-label p {
  margin: 15px 0;
}

/* 博客文章项容器 */
.col-md-label > p {
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
  width: 100%;
}

/* 移除最后一个文章项的下边框 */
.col-md-label > p:last-child {
  border-bottom: none;
}

/* 图片容器样式 - 确保宽度不溢出 */
.mb-blog-polymeric {
  margin: 20px 0;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 100%; /* 确保不溢出 */
}

/* 图片样式 - 确保不超出容器 */
.mb-blog-polymeric img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mb-blog-polymeric img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 主标题样式 */
.col-md-label h2 {
  font-size: 24px;
  font-weight: 700;
  color: #0d4d9c;
  margin: 25px 0 15px;
  line-height: 1.3;
  word-wrap: break-word; /* 防止长单词溢出 */
}

.col-md-label h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.col-md-label h2 a:hover {
  color: #ff8c00;
  text-decoration: underline;
}

/* 副标题样式 */
.col-md-label h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 10px;
  padding-left: 15px;
  border-left: 4px solid #ff8c00;
  word-wrap: break-word;
}

/* 段落文本样式 */
.col-md-label p {
  font-size: 16px;
  margin: 12px 0;
  color: #555;
  word-wrap: break-word;
}

/* PDF链接样式 */
.col-md-label a[target="_blank"] {
  display: inline-block;
  background-color: #f0f7ff;
  color: #0d4d9c;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  margin: 15px 0;
  border: 1px solid #c2d9f0;
  transition: all 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.col-md-label a[target="_blank"]:hover {
  background-color: #0d4d9c;
  color: white;
  border-color: #0d4d9c;
}

/* FAQ部分样式 */
.col-md-label h2 + h2 {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed #ddd;
}

/* 响应式设计 - 修正宽度溢出问题 */
/* PC端大屏幕 (≥1200px) */
@media (min-width: 1200px) {
  .mb-blog-polymeric img {
    max-width: 800px;
  }
  
  .col-md-label h2 {
    font-size: 26px;
  }
  
  .col-md-label {
    padding: 0 20px;
  }
}

/* PC端中等屏幕 (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .mb-blog-polymeric img {
    max-width: 700px;
  }
  
  .col-md-label h2 {
    font-size: 24px;
  }
}

/* 平板端横向 (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {
  .mb-blog-polymeric img {
    max-width: 600px;
  }
  
  .col-md-label h2 {
    font-size: 22px;
  }
  
  .col-md-label h4 {
    font-size: 17px;
  }
  
  .col-md-label p {
    font-size: 15px;
  }
}

/* 平板纵向和大型手机 (≥576px) */
@media (min-width: 576px) and (max-width: 767px) {
  .mb-blog-polymeric img {
    max-width: 500px;
  }
  
  .col-md-label h2 {
    font-size: 20px;
  }
  
  .col-md-label h4 {
    font-size: 16px;
    padding-left: 10px;
    border-left-width: 3px;
  }
  
  .col-md-label p {
    font-size: 14px;
  }
  
  .col-md-label a[target="_blank"] {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* 手机端 (≤575px) - 重点修正宽度问题 */
@media (max-width: 575px) {
  .col-md-label {
    padding: 0 10px; /* 添加内边距而不是负边距 */
    box-sizing: border-box;
  }
  
  .mb-blog-polymeric {
    margin: 15px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .mb-blog-polymeric img {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  
  .col-md-label h2 {
    font-size: 20px;
    margin: 20px 0 12px;
    padding: 0 5px;
    box-sizing: border-box;
  }
  
  .col-md-label h4 {
    font-size: 16px;
    margin: 18px 0 8px;
    padding-left: 8px;
    border-left-width: 3px;
    box-sizing: border-box;
  }
  
  .col-md-label p {
    font-size: 14px;
    margin: 10px 0;
    padding: 0 5px;
    box-sizing: border-box;
  }
  
  .col-md-label a[target="_blank"] {
    padding: 6px 12px;
    font-size: 14px;
    display: block;
    text-align: center;
    margin: 15px auto;
    max-width: 90%;
    box-sizing: border-box;
  }
  
  /* 调整文章项间距 */
  .col-md-label > p {
    margin-bottom: 30px;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 超小手机 (≤375px) */
@media (max-width: 375px) {
  .mb-blog-polymeric img {
    max-width: 100%;
  }
  
  .col-md-label h2 {
    font-size: 18px;
  }
  
  .col-md-label h4 {
    font-size: 15px;
  }
  
  .col-md-label p {
    font-size: 13px;
  }
  
  .col-md-label a[target="_blank"] {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* 图片懒加载样式 - 简化 */
.mb-blog-polymeric img[loading="lazy"] {
  opacity: 1;
}

/* 打印样式 */
@media print {
  .mb-blog-polymeric img {
    max-width: 100% !important;
    box-shadow: none !important;
  }
  
  .col-md-label a[target="_blank"] {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #333;
  }
}

/* 防止水平滚动条出现 */
body {
  overflow-x: hidden;
}

/* 确保所有元素都不超出容器 */
.col-md-label * {
  max-width: 100%;
}

/* ============ list-nav模块基础样式 ============ */
.top-nav.list-nav {
    position: relative;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* 一级菜单项样式 */
.top-nav.list-nav > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    margin-bottom: 5px;
}

.top-nav.list-nav > li > a {
    display: block;
    padding: 10px 18px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    font-size: 15px;
    line-height: 1.4;
}

.top-nav.list-nav > li > a:hover {
    background-color: #007bff;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* 指示器图标样式 */
.top-nav.list-nav .indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #666;
    font-size: 14px;
}

.top-nav.list-nav > li:hover .indicator {
    transform: translateY(-50%) rotate(90deg);
    color: white;
}

/* 二级菜单样式 */
.top-nav.list-nav .sub-links {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: white;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    border-top: none;
    z-index: 1001;
}

.top-nav.list-nav > li:hover .sub-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 二级菜单项样式 */
.top-nav.list-nav .sub-links li {
    border-bottom: 1px solid #f1f3f4;
}

.top-nav.list-nav .sub-links li:last-child {
    border-bottom: none;
}

.top-nav.list-nav .sub-links li a {
    display: block;
    padding: 12px 20px;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

.top-nav.list-nav .sub-links li a:hover {
    background-color: #f0f7ff;
    color: #007bff;
    padding-left: 25px;
}

/* 鼠标悬停时显示箭头指向二级菜单 */
.top-nav.list-nav > li::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1002;
}

.top-nav.list-nav > li:hover::after {
    opacity: 1;
}

/* ============ 响应式多媒体查询 ============ */

/* 超大桌面屏幕 (≥1600px) */
@media (min-width: 1600px) {
    .top-nav.list-nav > li {
        margin-right: 25px;
    }
    
    .top-nav.list-nav > li > a {
        padding: 14px 24px;
        font-size: 16px;
    }
    
    .top-nav.list-nav .sub-links {
        min-width: 260px;
    }
}

/* 大桌面屏幕 (1200px - 1599px) - 默认样式适用 */

/* 中等桌面屏幕 (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .top-nav.list-nav > li {
        margin-right: 12px;
    }
    
    .top-nav.list-nav > li > a {
        padding: 9px 16px;
        font-size: 14px;
    }
    
    .top-nav.list-nav .sub-links {
        min-width: 200px;
    }
    
    .top-nav.list-nav .sub-links li a {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* 小平板/大手机横向 (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .top-nav.list-nav {
        justify-content: center;
    }
    
    .top-nav.list-nav > li {
        margin-right: 10px;
        margin-bottom: 8px;
    }
    
    .top-nav.list-nav > li > a {
        padding: 8px 14px;
        font-size: 14px;
    }
    
    .top-nav.list-nav .indicator {
        right: 6px;
        font-size: 12px;
    }
    
    .top-nav.list-nav .sub-links {
        min-width: 180px;
    }
    
    .top-nav.list-nav .sub-links li a {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* 手机/小平板竖向 (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .top-nav.list-nav {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }
    
    .top-nav.list-nav > li {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
        width: 100%;
    }
    
    .top-nav.list-nav > li > a {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .top-nav.list-nav .indicator {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-left: auto;
        font-size: 16px;
        transition: transform 0.3s ease;
    }
    
    /* 移动端点击展开二级菜单（使用:focus或.active类） */
    .top-nav.list-nav > li:focus .indicator,
    .top-nav.list-nav > li.active .indicator {
        transform: rotate(90deg);
    }
    
    .top-nav.list-nav .sub-links {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid #e9ecef;
        border-top: none;
        border-radius: 0 0 4px 4px;
        margin-top: -4px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        min-width: 100%;
    }
    
    /* 点击展开效果 */
    .top-nav.list-nav > li:focus .sub-links,
    .top-nav.list-nav > li.active .sub-links {
        max-height: 500px;
    }
    
    .top-nav.list-nav .sub-links li a {
        padding: 10px 20px;
        font-size: 14px;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .top-nav.list-nav .sub-links li:last-child a {
        border-bottom: none;
    }
    
    /* 鼠标悬停箭头指向效果在移动端隐藏 */
    .top-nav.list-nav > li::after {
        display: none;
    }
}

/* 小手机 (≤575px) */
@media (max-width: 575px) {
    .top-nav.list-nav {
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
    }
    
    .top-nav.list-nav > li {
        display: block;
        margin-right: 0;
        margin-bottom: 6px;
        width: 100%;
    }
    
    .top-nav.list-nav > li > a {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .top-nav.list-nav .indicator {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-left: auto;
        font-size: 14px;
        transition: transform 0.3s ease;
    }
    
    .top-nav.list-nav > li:focus .indicator,
    .top-nav.list-nav > li.active .indicator {
        transform: rotate(90deg);
    }
    
    .top-nav.list-nav .sub-links {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid #e9ecef;
        border-top: none;
        border-radius: 0 0 4px 4px;
        margin-top: -4px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        min-width: 100%;
    }
    
    .top-nav.list-nav > li:focus .sub-links,
    .top-nav.list-nav > li.active .sub-links {
        max-height: 500px;
    }
    
    .top-nav.list-nav .sub-links li a {
        padding: 8px 18px;
        font-size: 13px;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .top-nav.list-nav .sub-links li:last-child a {
        border-bottom: none;
    }
    
    .top-nav.list-nav > li::after {
        display: none;
    }
}

/* 超小手机 (≤375px) */
@media (max-width: 375px) {
    .top-nav.list-nav > li > a {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .top-nav.list-nav .indicator {
        font-size: 12px;
    }
    
    .top-nav.list-nav .sub-links li a {
        padding: 7px 16px;
        font-size: 12.5px;
    }
}

/* 横屏模式特殊处理 */
@media (max-height: 576px) and (orientation: landscape) {
    .top-nav.list-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .top-nav.list-nav > li {
        flex: 0 0 auto;
        margin-right: 8px;
        margin-bottom: 8px;
        width: auto;
    }
    
    .top-nav.list-nav > li > a {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .top-nav.list-nav .sub-links {
        min-width: 180px;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .top-nav.list-nav > li > a {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .top-nav.list-nav > li > a:hover {
        background-color: #3182ce;
        color: white;
    }
    
    .top-nav.list-nav .sub-links {
        background-color: #2d3748;
        border-color: #4a5568;
    }
    
    .top-nav.list-nav .sub-links li {
        border-bottom-color: #4a5568;
    }
    
    .top-nav.list-nav .sub-links li a {
        color: #cbd5e0;
    }
    
    .top-nav.list-nav .sub-links li a:hover {
        background-color: #4a5568;
        color: #90cdf4;
    }
    
    .top-nav.list-nav .indicator {
        color: #a0aec0;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .top-nav.list-nav > li > a {
        border-width: 2px;
    }
    
    .top-nav.list-nav .sub-links li a:hover {
        outline: 2px solid #007bff;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .top-nav.list-nav > li > a,
    .top-nav.list-nav .indicator,
    .top-nav.list-nav .sub-links,
    .top-nav.list-nav .sub-links li a,
    .top-nav.list-nav > li::after {
        transition: none !important;
    }
}
/* --- list-match 模块容器样式 --- */
.list-match {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- 单个条目卡片化设计 --- */
.list-match > p {
    display: flex;
    flex-direction: row;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0; /* 重置默认段落边距 */
    align-items: stretch;
}

.list-match > p:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* --- 图片容器处理 --- */
/* 这里兼容你已有的 .mb-blog-polymeric 样式，仅做布局辅助 */
.list-match .mb-blog-polymeric {
    flex: 0 0 300px; /* PC端固定宽度 */
    max-width: 300px;
    height: auto;
    overflow: hidden;
}

.list-match .mb-blog-polymeric img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片比例不失真 */
    display: block;
}

/* --- 文字内容区域 --- */
.list-match h2 {
    flex: 1;
    margin: 0;
    padding: 20px;
    font-size: 1.25rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.list-match h2 a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: color 0.2s;
}

.list-match h2 a:hover {
    color: #007bff; /* 悬浮颜色 */
}

/* --- 正文描述文本 (如果有) --- */
/* 针对紧跟在 h2 后的文本内容 */
.list-match p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- 移动端自适应 (响应式) --- */
@media (max-width: 768px) {
    .list-match {
        gap: 16px;
        padding: 10px;
    }

    .list-match > p {
        flex-direction: column; /* 手机端变为上下布局 */
    }

    .list-match .mb-blog-polymeric {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9; /* 移动端保持统一比例 */
    }

    .list-match h2 {
        padding: 15px;
        font-size: 1.1rem;
    }
}

/* --- 特殊处理：如果没有图片的条目 --- */
.list-match > p:not(:has(.mb-blog-polymeric)) {
    padding-left: 20px;
}

/* --- 基础样式（PC端保持原样或微调） --- */
.hero-list h1 {
    font-size: 50px;
    letter-spacing: 12px;
    margin: 10px;
    color: #fff;
    word-break: break-word; /* 防止长单词溢出 */
}

/* --- 移动端适配 (针对手机屏幕) --- */
@media (max-width: 768px) {
    .hero-list h1 {
        /* 1. 缩小字号，确保在主流手机屏幕不溢出 */
        font-size: 28px; 
        
        /* 2. 缩小字间距，12px 在手机上太宽了，改为 2-4px 视觉效果更好 */
        letter-spacing: 4px; 
        
        /* 3. 适当调整边距，增加行高防止文字重叠 */
        margin: 15px 5px;
        line-height: 1.3;
        
        /* 4. 居中显示（通常移动端标题居中更美观） */
        text-align: center;
    }
}

/* --- 极小屏幕优化 (针对 320px 宽度的老旧手机) --- */
@media (max-width: 375px) {
    .hero-list h1 {
        font-size: 22px;
        letter-spacing: 2px;
    }
}
.faq-item h3{
    font-weight: 600;
}
.features .container .row .col-md-12 .features-wrapper .col-md-4 p{
    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}

/* ROI Content 模块基础设置 */
/* 模块整体背景与间距 */
.roi-content {
    background-color: #f4f7f9;
    padding: 80px 0;
    overflow: hidden;
}

/* 标题样式：带箭头的修饰感 */
.roi-content .arrow {
    font-size: 32px;
    font-weight: 700;
    color: #1a2a3a;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.roi-content .arrow::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #007bff;
    margin: 15px auto 0;
}

/* 弹性容器：解决“一行三个”的关键 */
.roi-content .roi-analysis {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* 抵消 col 的 padding */
}

/* 精准控制每一列 */
.roi-content .col-md-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 15px;
    display: flex; /* 让内部 roi-box 等高 */
}

/* 卡片样式 */
.roi-content .roi-box {
    background: #ffffff;
    width: 100%;
    padding: 35px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: left;
}

.roi-content .roi-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.12);
    border-color: #007bff;
}

/* 卡片标题与图标 */
.roi-content .roi-box h3 {
    font-size: 20px;
    color: #1a2a3a;
    margin-bottom: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.roi-content .roi-box h3 i {
    color: #007bff;
    margin-right: 12px;
    font-size: 22px;
}

/* 列表美化 */
.roi-content .roi-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.roi-content .roi-box ul li {
    font-size: 15px;
    color: #5a6b7d;
    padding: 12px 0;
    border-bottom: 1px dashed #edf2f7;
    display: flex;
    justify-content: space-between;
}

.roi-content .roi-box ul li:last-child {
    border-bottom: none;
}

/* --- 多媒体查询 (Media Queries) --- */

/* 平板端：一行两个 */
@media (max-width: 991px) {
    .roi-content .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 移动端：一行一个 */
@media (max-width: 767px) {
    .roi-content {
        padding: 50px 0;
    }
    .roi-content .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .roi-content .arrow {
        font-size: 26px;
        margin-bottom: 30px;
    }
}


/* ===== Footer Quick Links Module Style ===== */
.footer_row {
    position: relative;
    padding: 35px 30px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

/* 标题 */
.footer_row .footer-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 28px;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 12px;
}

.footer_row .footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #00c3ff, #00ffb3);
    border-radius: 10px;
}

/* 一级导航 */
.footer_row .footer-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 一级菜单 */
.footer_row .footer-nav > li {
    list-style: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 18px 18px 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.footer_row .footer-nav > li:hover {
    transform: translateY(-4px);
    border-color: rgba(0,195,255,0.45);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* 一级链接 */
.footer_row .footer-nav > li > a {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    padding-right: 18px;
    transition: color 0.3s ease;
}

.footer_row .footer-nav > li > a:hover {
    color: #00d9ff;
}

/* 箭头图标 */
.footer_row .indicator {
    position: absolute;
    top: 20px;
    right: 18px;
    color: #00d9ff;
    font-size: 14px;
    opacity: 0.8;
}

/* 二级菜单 */
.footer_row .sub-links {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    list-style: none;
}

/* 二级菜单项 */
.footer_row .sub-links li {
    margin-bottom: 10px;
    list-style: none;
}

.footer_row .sub-links li:last-child {
    margin-bottom: 0;
}

/* 二级链接 */
.footer_row .sub-links li a {
    position: relative;
    display: inline-block;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    padding-left: 14px;
    transition: all 0.3s ease;
    word-break: break-word;
}

/* 二级链接小圆点 */
.footer_row .sub-links li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00d9ff;
    transition: all 0.3s ease;
}

.footer_row .sub-links li a:hover {
    color: #ffffff;
    padding-left: 18px;
}

.footer_row .sub-links li a:hover::before {
    background: #00ffb3;
    transform: scale(1.3);
}

/* ===== 大屏 ===== */
@media screen and (max-width: 1600px) {
    .footer_row .footer-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ===== 笔记本 ===== */
@media screen and (max-width: 1200px) {
    .footer_row {
        padding: 30px 24px;
    }

    .footer_row .footer-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

/* ===== 平板 ===== */
@media screen and (max-width: 992px) {
    .footer_row .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer_row .footer-title {
        font-size: 22px;
    }
}

/* ===== 大手机 ===== */
@media screen and (max-width: 768px) {
    .footer_row {
        padding: 24px 18px;
        border-radius: 10px;
    }

    .footer_row .footer-nav {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer_row .footer-nav > li {
        padding: 16px;
    }

    .footer_row .footer-title {
        font-size: 20px;
        margin-bottom: 22px;
    }

    .footer_row .footer-nav > li > a {
        font-size: 15px;
    }

    .footer_row .sub-links li a {
        font-size: 13px;
    }
}

/* ===== 小屏手机 ===== */
@media screen and (max-width: 480px) {
    .footer_row {
        padding: 20px 14px;
    }

    .footer_row .footer-title {
        font-size: 18px;
    }

    .footer_row .footer-nav > li {
        padding: 14px;
    }

    .footer_row .footer-nav > li > a {
        font-size: 14px;
        line-height: 1.5;
    }

    .footer_row .sub-links {
        margin-top: 12px;
        padding-top: 12px;
    }

    .footer_row .sub-links li {
        margin-bottom: 8px;
    }

    .footer_row .sub-links li a {
        font-size: 12px;
        line-height: 1.5;
    }
}
.index_desc{
    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
min-height: 100px;
}