/* ============================
   gicoox 即合智能 - 官网样式
   参考 kneron.com 精确风格
   配色: 白底 + 深蓝 #00695c + 科技蓝 #2ecc71
   字体: Noto Sans SC + Lato
   ============================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; transition: all .2s; }
a:hover { color: #2ecc71; }
img { max-width: 100%; height: auto; display: block; }
ul, li { list-style: none; }
h1, h2, h3, h4 { line-height: 1.3; }
strong { font-weight: bold; }
input, textarea, select { font-family: inherit; }
:focus { outline: 0; }

body {
  font-family: 'Lato', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: none;
  color: #444;
  background: #fff;
}

h2 { color: #00695c; font-size: 1.8em; font-weight: bold; margin-bottom: 40px; }
h3 { color: #00695c; font-size: 1.4em; font-weight: bold; margin-bottom: 20px; }
.center { text-align: center; }
.clear { clear: both; }

.fr-view { line-height: 1.5em; }
.fr-view ul { list-style: none; padding-left: .8em; text-align: left; }
.fr-view ul li:before { content: "- "; margin-left: -.8em; }
.fr-view ol { list-style: decimal; padding-left: 15px; }
.fr-view ol li { text-align: left; }
.fr-view a { color: #2ecc71; }

/* Container */
.inner { width: 92%; max-width: 1440px; margin: auto; position: relative; }

/* ========== HEADER ========== */
#header-wrapper {
  position: fixed; left: 0; top: 0; width: 100%; height: 110px;
  z-index: 1000; padding-top: 50px; color: #808080;
  transition: height .4s, padding .4s, background .4s, border .4s;
  border-bottom: 1px solid #ddd; background: #fff;
}
#header-inner { height: 100%; }
#header-inner h1 { float: left; width: 120px; height: 60px; transform: translateY(-23px); transition: all .4s; }
#header-inner h1 a {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 800; color: #00695c;
  white-space: nowrap; height: 100%;
}
#header-inner h1 a .logo-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: #00695c; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
#header-inner h1 a:hover { color: #2ecc71; }

/* Nav */
#nav-wrapper { margin-left: 160px; transition: all .4s; }
#nav-wrapper li { display: inline-block; margin-left: 30px; height: 60px; transition: height .4s; position: relative; }
#nav-wrapper li:first-child { margin-left: 0; }
#nav-wrapper li a,
#nav-wrapper li span { font-size: 1.09em; padding: .6em 0; border-radius: 5px; transition: none; cursor: pointer; white-space: nowrap; }
#nav-wrapper li span i { margin-left: .6em; font-size: 12px; }
#nav-wrapper li a:hover { color: #999; }
#nav-wrapper li.active > a { color: #2ecc71; }
#nav-wrapper li.active { border-bottom: 5px solid #2ecc71; }
#nav-wrapper li.highlight { height: auto !important; border: none !important; }
#nav-wrapper li.highlight a { padding: .6em 1.2em; background: #2ecc71; color: #fff !important; transition: all .2s; border-radius: 5px; }
#nav-wrapper li.highlight a:hover { background: #27ae60; }
#nav-wrapper li ul {
  position: absolute; left: 0; top: 33px; border-radius: 4px;
  background: #004d40; box-shadow: 0 0 2px rgba(0,0,0,.2);
  padding: 8px 18px; min-width: 170px; display: none; z-index: 99;
}
#nav-wrapper li:hover ul { display: block; }
#nav-wrapper li ul li { display: block; margin: 12px 0; padding: 0; height: auto; }
#nav-wrapper li ul li a { color: #dae9f2; white-space: nowrap; font-weight: normal !important; }
#nav-wrapper li ul li a:hover { color: #2ecc71; }
#nav-wrapper li ul li.active { border: none; }

/* Toolbar (language toggle) */
#toolbar-wrapper { position: absolute; right: 0; top: -15px; }
#toolbar-wrapper .item { display: inline-block; margin-left: 30px; position: relative; transition: all .4s; }
#toolbar-wrapper .item:first-child { margin-left: 0; }
#toolbar-wrapper .label { padding: 15px 0; cursor: pointer; }
#toolbar-wrapper .label i { font-size: 12px; margin-left: 6px; transform: scale(.7,.7); }
#toolbar-wrapper .menu {
  position: absolute; right: 0; padding: 3px 15px; background: #fff;
  border-radius: 5px; display: none; box-shadow: 0 0 2px rgba(0,0,0,.3);
}
#toolbar-wrapper .menu li { color: #444; margin: 15px 0; }
#toolbar-wrapper .menu a { font-size: .96em; color: #666; white-space: nowrap; transition: all .2s; }
#toolbar-wrapper .menu a:hover { color: #2ecc71; }
#toolbar-wrapper .menu li.active a { color: #2ecc71; }
@media (hover: hover) {
  #toolbar-wrapper .item:hover .menu { display: block; }
}
#toolbar-wrapper .item.open .menu { display: block; }

.menu-button { display: none; border: none; background: none; font-size: 24px; cursor: pointer; color: #00695c; padding: 8px; }
.close-button { display: none; position: absolute; top: 20px; right: 20px; font-size: 28px; cursor: pointer; color: #00695c; }
#mobile-nav-wrapper { display: flex; align-items: center; gap: 12px; }

/* Nav lite (homepage transparent header) */
.nav-lite #header-wrapper {
  color: #fff; border-bottom: none;
  background: transparent;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
}
.nav-lite #header-wrapper h1 a { color: #fff; }
.nav-lite #header-wrapper h1 a .logo-icon { background: #fff; color: #00695c; }
.nav-lite #toolbar-wrapper .label { color: rgba(255,255,255,.8); }
.nav-lite #toolbar-wrapper .menu a { color: #666; }

/* Scrolled header */
.headroom--not-top #header-wrapper {
  height: 75px; padding-top: 28px;
  background: #fff; color: #808080;
  border-bottom: 1px solid #ddd !important;
}
.headroom--not-top #header-wrapper h1 a { color: #00695c; }
.headroom--not-top #header-wrapper h1 a .logo-icon { background: #00695c; color: #fff; }
.headroom--not-top #header-wrapper h1 { width: 100px; height: 47px; transform: translateY(-15px); }
.headroom--not-top #header-wrapper #nav-wrapper li { height: 47px; }
.headroom--not-top #toolbar-wrapper .label { color: #808080; }
.headroom--not-top #toolbar-wrapper .menu a { color: #666; }

/* ========== MAIN ========== */
#main-wrapper { background: #fff; padding-top: 110px; }
.nav-lite #main-wrapper { padding-top: 0; }
#main-inner { min-height: 520px; padding: 60px 0; overflow: hidden; zoom: 1; }

/* ========== HERO ========== */
#hero-wrapper {
  background-position: 50% 50%; background-size: cover;
  background-color: #00695c;
  position: relative;
}
#hero { width: 100%; height: 100vh; overflow: hidden; position: relative; }
#hero .hero-item {
  width: 100%; height: 100%; position: relative;
  background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
  flex-shrink: 0;
}
.hero-item .mask {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.35);
}
.hero-item .hero-inner-wrap { height: 100%; position: relative; }
.hero-slogan {
  color: #fff; position: absolute; top: 54%; left: 0; right: 0;
  transform: translateY(-50%); text-align: center; padding: 0 24px;
  opacity: 0; transition: opacity .8s ease-in-out; transition-delay: .4s;
}
.hero-item.is-selected .hero-slogan { opacity: 1; }
.hero-title { font-size: 2.7em; margin-bottom: .15em; line-height: 1.2em; font-weight: 800; }
.hero-contents { font-size: 1.3em; line-height: 1.2em; margin-bottom: 32px; color: rgba(255,255,255,.85); }

#hero .flickity-page-dots {
  position: absolute; left: 50%; bottom: 50px;
  transform: translateX(-50%); width: 92%; max-width: 1440px; text-align: left;
}
#hero .flickity-page-dots .dot { background: #fff; width: 12px; height: 12px; opacity: 1; }
#hero .flickity-page-dots .dot.is-selected { background: #2ecc71; }

.cta-button {
  display: inline-block; background: #2ecc71; color: #fff;
  padding: 1em 1.4em; border-radius: 5px; text-transform: uppercase;
  font-weight: bold; transition: all .2s;
}
.cta-button:hover { background: #27ae60; color: #fff; }
.cta-button i { margin-left: 10px; }
.cta-button + .cta-button { margin-left: 10px; }
.cta-button-outline {
  background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff;
}
.cta-button-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* ========== PAGE SECTIONS ========== */
.page-section { border-bottom: 1px solid #ddd; padding: 60px 0; }
.page-section:last-child { border-bottom: none; }
.page-section .inner { overflow: hidden; zoom: 1; }
.page-section h2 { margin-bottom: 1em; text-transform: none; }
.page-section .summary { font-size: 1.4em; line-height: 1.4em; color: #888; margin-bottom: 30px; }
.page-section .item-wrapper { overflow: hidden; zoom: 1; }

.bg-dark { background: #00695c; color: #fff; }
.bg-dark h2 { color: #fff; }
.bg-dark .summary { color: rgba(255,255,255,.85); }
.bg-gray { background: #f2f2f2; }

/* ========== CTA ========== */
.cta-wrapper { margin-top: 15px; }
.cta-link {
  color: #2ecc71; font-weight: bold; font-size: 1.05em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px;
}
.cta-link:hover { color: #27ae60; }
.cta-link i { margin-left: 10px; }

/* ========== FEATURES (Homepage 4-col) ========== */
#features { padding: 25px 0 5px 0; }
#features .item {
  float: left; width: 17.5%; margin-right: 10%; margin-bottom: 25px;
}
#features .item:nth-child(4n) { margin-right: 0; }
#features .item .item-icon {
  width: 32px; height: 32px; display: inline-block; vertical-align: middle;
  margin-right: 10px; font-size: 22px; color: #2ecc71; text-align: center; line-height: 32px;
}
#features .title {
  display: inline-block; font-weight: bold; vertical-align: middle;
  font-size: 1.18em; color: #00695c;
}
#features .contents {
  line-height: 1.28em; color: #888; font-size: 1.04em;
  letter-spacing: .02em; margin-top: 6px;
}

/* ========== HOME SOLUTIONS (3-col cards) ========== */
#home-solutions .item {
  float: left; width: 31.33333%; margin-right: 3%; margin-bottom: 40px;
}
#home-solutions .item:nth-child(3n) { margin-right: 0; }
#home-solutions .item .thumb { overflow: hidden; margin-bottom: 15px; border-radius: 4px; }
#home-solutions .item img { display: block; width: 100%; transition: all .4s; }
#home-solutions .title { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; color: #00695c; }
#home-solutions .contents { line-height: 1.4em; color: #666; }
#home-solutions .item:hover img { transform: scale(1.2,1.2); }

/* ========== HOME APPLICATIONS (4-col centered) ========== */
#applications { color: #00695c; text-align: center; }
#applications .item-wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; }
#applications .item { float: left; width: 19%; margin-right: 8%; margin-top: 20px; margin-bottom: 40px; margin-right: 0; }
#applications .item:nth-child(4n) { margin-right: 0; }
#applications .item .item-icon { font-size: 48px; color: #2ecc71; margin-bottom: 20px; }
#applications .title { font-weight: bold; font-size: 1.2em; margin-bottom: 20px; color: #00695c; }
#applications .contents { line-height: 1.6em; color: #666; }

/* ========== SOLUTIONS PAGE CARDS (2x2 grid) ========== */
.solutions-grid { overflow: hidden; zoom: 1; }
.solutions-grid .item {
  float: left; width: 48%; margin-right: 4%; margin-bottom: 30px;
}
.solutions-grid .item:nth-child(2n) { margin-right: 0; }
.solutions-grid .item .thumb {
  overflow: hidden; margin-bottom: 15px; border-radius: 4px;
  height: 200px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.solutions-grid .item img { display: block; width: 100%; transition: all .4s; }
.solutions-grid .item .thumb .card-icon {
  color: rgba(255,255,255,.25); font-size: 64px; position: absolute;
}
.solutions-grid .item:hover img { transform: scale(1.2,1.2); }
.solutions-grid .title { font-weight: bold; font-size: 1.2em; margin-bottom: 8px; color: #00695c; }
.solutions-grid .contents { line-height: 1.4em; color: #666; margin-bottom: 12px; }
.solutions-grid .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.solutions-grid .tags .tag {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: #f0f0f0; color: #888;
}

/* Thumb background colors */
.thumb-bg.industrial { background: linear-gradient(135deg, #ff6f00, #ff8f00); }
.thumb-bg.elderly { background: linear-gradient(135deg, #1565c0, #42a5f5); }
.thumb-bg.community { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.thumb-bg.retail { background: linear-gradient(135deg, #6a1b9a, #ab47bc); }
.thumb-bg.product { background: #f5f5f5; }

/* Product thumbs as actual images */
.thumb-img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

/* ========== NUMBERS ========== */
.numbers-grid { display: flex; justify-content: space-around; flex-wrap: wrap; }
.number-card { text-align: center; padding: 40px 20px; }
.number-card .number { font-size: 56px; font-weight: 800; color: #2ecc71; line-height: 1.1; }
.number-card .number .unit { font-size: 28px; }
.number-card .label { font-size: 1.08em; color: #888; margin-top: 8px; }

/* ========== CONTACT FORM ========== */
.contact-form { overflow: hidden; zoom: 1; }
.contact-form .group-lt { float: left; width: 49%; }
.contact-form .group-rt { float: right; width: 49%; }
.contact-form p { margin-bottom: 20px; }
.contact-form input[name],
.contact-form textarea,
.contact-form select { width: 100%; padding: 1em; background: #fff; border: 1px solid #ddd; border-radius: 5px; font-size: 1em; }
.contact-form textarea { height: 117px; }
.contact-form .field-lt { width: 49%; float: left; display: block; }
.contact-form .field-rt { margin-left: 51%; display: block; }
.contact-form .submit-wrapper { width: 49%; float: left; margin-top: 15px; }
.contact-form button[type="submit"] {
  background: #2ecc71; color: #fff; padding: .7em 0; border: none; border-radius: 5px;
  font-size: 1.2em; text-align: center; width: 100%; max-width: 180px;
  text-transform: uppercase; transition: all .2s; cursor: pointer;
}
.contact-form button[type="submit"]:hover { background: #27ae60; }
#form-result { color: #2ecc71; line-height: 1.5em; margin-top: 30px; }

/* ========== FOOTER ========== */
#subnav-wrapper { border-top: 1px solid #ddd; padding: 18px 0; }
#subnav-wrapper li { display: inline-block; margin-right: 50px; color: #808080; }
#subnav-wrapper a { font-size: 1.08em; transition: all .2s; }

#footer-wrapper { border-top: 1px solid #ddd; padding: 30px 0; }
#footer-inner { overflow: hidden; zoom: 1; }
#footer-contact { float: left; margin-bottom: 8px; }
#footer-contact p,
#footer-contact address { display: inline-block; color: #666; }
#footer-contact .label { margin-right: 12px; }
#footer-contact .sep { margin: 0 15px; color: #999; }
#footer-social { float: right; color: #999; margin-top: 7px; }
#footer-social a { margin-left: 20px; font-size: 1.15em; }
#footer-copyright { clear: both; color: #b3b3b3; font-size: 13px; }

/* ========== SUPPORT PAGE ========== */
#support-item-wrapper { width: 100%; float: left; overflow: hidden; zoom: 1; margin-bottom: 30px; }
#support-item-wrapper .item {
  border: 1px solid #ccc; border-radius: 10px; float: left;
  width: 48%; margin-right: 4%; text-align: center;
  padding: 90px 5% 100px; color: #00695c; margin-bottom: 30px;
  transition: background .2s;
}
#support-item-wrapper .item:hover {
  background: #00695c;
  color: #fff;
}
#support-item-wrapper .item:hover .item-icon { color: #fff; }
#support-item-wrapper .item:hover .desc { color: rgba(255,255,255,.8); }
#support-item-wrapper .item:hover .cta-button { background: #2ecc71; }
#support-item-wrapper .item:nth-child(2n) { margin-right: 0; }
#support-item-wrapper .item-icon { font-size: 72px; color: #2ecc71; margin-bottom: 40px; }
#support-item-wrapper .title { font-size: 1.8em; font-weight: bold; margin-bottom: 20px; }
#support-item-wrapper .desc { font-size: 1.25em; line-height: 1.5em; height: 4.5em; color: inherit; }
#support-item-wrapper .cta-button { background: #00695c; color: #fff; font-weight: bold; font-size: 1.2em; text-transform: none; }
#support-item-wrapper .cta-button:hover { background: #27ae60; }
#support-item-wrapper .item.highlight { border-color: #00695c; }

/* ========== HOME INDUSTRIES (4-col cards with images) ========== */
#home-industries .item {
  float: left; width: 23%; margin-right: 2.666%; margin-bottom: 30px;
}
#home-industries .item:nth-child(4n) { margin-right: 0; }
#home-industries .item .thumb { overflow: hidden; margin-bottom: 15px; border-radius: 4px; height: 180px; }
#home-industries .item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: all .4s; }
#home-industries .item:hover .thumb img { transform: scale(1.15,1.15); }
#home-industries .title { font-weight: bold; font-size: 1.1em; margin-bottom: 8px; color: #00695c; }
#home-industries .contents { line-height: 1.4em; color: #666; font-size: .95em; }

/* ============================================================
   SUB-PAGE STYLES
   ============================================================ */

/* Page Banner */
.page-banner {
  padding: 190px 0 70px 0; border-bottom: none;
  background: #00695c; color: #fff; text-align: center;
}
.page-banner h2 { color: #fff; }
.page-banner .summary { color: rgba(255,255,255,.85); font-size: 1.15em; max-width: 720px; margin: 0 auto; line-height: 1.5em; }

/* Page Feature (3-col icon cards) */
.page-feature { padding: 60px 0; border-bottom: 1px solid #ddd; }
.page-feature .item-wrapper { overflow: hidden; zoom: 1; margin-bottom: 30px; }
.page-feature .item {
  float: left; width: 30%; margin-right: 5%; padding-left: 72px;
  margin-bottom: 40px; position: relative;
}
.page-feature .item:nth-child(3n) { margin-right: 0; }
.page-feature .item .item-icon {
  width: 48px; position: absolute; left: 0; top: 0;
  font-size: 32px; color: #2ecc71; text-align: center;
}
.page-feature .title { font-weight: bold; font-size: 1.2em; margin-bottom: 15px; color: #00695c; }
.page-feature .contents { line-height: 1.6em; color: #666; }

/* Page Paragraph (even/odd alternating image+text) */
.page-paragraph { padding-bottom: 70px; border-bottom: 1px solid #ddd; }
.page-paragraph .summary { margin-bottom: 50px; font-size: 1.05em; color: #666; line-height: 1.6em; }
.page-paragraph .summary strong { color: #00695c; }
.page-paragraph .image-detail-wrapper { overflow: hidden; zoom: 1; }
.page-paragraph .image-wrapper {
  width: 45%; float: left; position: relative;
  border-radius: 4px; overflow: hidden;
}
.page-paragraph .image-wrapper img { display: block; width: 100%; }
.page-paragraph .image-wrapper .img-placeholder {
  height: 280px; display: flex; align-items: center; justify-content: center;
  font-size: 64px; color: rgba(255,255,255,.4);
  border-radius: 4px;
}
.page-paragraph .contents { width: 45%; float: right; }
.page-paragraph .detail { font-size: 1.3em; line-height: 1.5em; color: #666; }
.page-paragraph .detail strong { display: inline-block; font-size: 1.05em; color: #00695c; }
.page-paragraph .detail strong + ul { margin-top: 10px; }
.page-paragraph .detail li strong { display: inline; }
.page-paragraph .detail ul { padding-left: .8em; }
.page-paragraph .detail ul li { margin-bottom: 6px; }
.page-paragraph .detail ul li:before { content: "- "; margin-left: -.8em; }
.page-paragraph .contents .cta-wrapper { margin-top: 40px; }
.page-paragraph.odd .image-wrapper { float: right; }
.page-paragraph.odd .contents { float: left; }

/* ========== PROFILES (About page) ========== */
.profiles-section { padding: 60px 0; border-bottom: 1px solid #ddd; }
.profiles-section img { width: 45%; float: right; border-radius: 4px; }
.profiles-section .contents { width: 50%; float: left; font-size: 1.33em; line-height: 1.5em; color: #666; }
.profiles-section .contents p { margin-bottom: 1em; }
.profiles-section .cta-wrapper { margin-top: 30px; font-size: 15px; }
.profiles-section.no-image .contents { width: 100%; }
.profiles-section .content-wrapper { overflow: hidden; zoom: 1; }
.profiles-section h2 { margin-bottom: 32px; }

/* ========== WHY CHOOSE US (About page) ========== */
.why-grid { overflow: hidden; zoom: 1; padding-top: 30px; }
.why-grid .item { float: left; width: 22%; margin-right: 4%; margin-bottom: 30px; text-align: center; }
.why-grid .item:nth-child(4n) { margin-right: 0; }
.why-grid .item .item-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: #e0f2f1; color: #2ecc71; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.why-grid .title { font-weight: bold; font-size: 1.15em; color: #00695c; margin-bottom: 10px; }
.why-grid .contents { color: #888; font-size: .96em; line-height: 1.5em; }

/* ========== PARTNERS ========== */
.logos-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin: 40px 0; }
.logos-grid .logo-item { padding: 12px 28px; background: #f8f8f8; border-radius: 6px; font-size: .92em; color: #666; font-weight: 600; }

/* ========== COOPERATION ========== */
.cooperation-grid { overflow: hidden; zoom: 1; margin-top: 40px; }
.cooperation-card { float: left; width: 48%; margin-right: 4%; margin-bottom: 25px; padding: 30px; background: #fff; border-radius: 6px; border: 1px solid #eee; transition: all .2s; }
.cooperation-card:nth-child(2n) { margin-right: 0; }
.cooperation-card:hover { border-color: #2ecc71; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.cooperation-card h3 { font-size: 1.2em; font-weight: bold; color: #00695c; margin-bottom: 10px; }
.cooperation-card p { color: #888; font-size: .96em; line-height: 1.6em; }

/* ========== SPEC TABLE ========== */
.spec-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; }
.spec-table th, .spec-table td { padding: 10px 14px; text-align: left; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.spec-table th { background: #f5f5f5; font-weight: 700; color: #00695c; }
.spec-table tbody tr:hover td { background: #f9f9f9; }

/* ========== ANIMATIONS ========== */
.animated-appear { transform: translateY(50px); opacity: 0; transition: transform .8s, opacity .8s; transition-delay: 0; }
.animated-appear + .animated-appear { transition-delay: .1s; }
.animated-appear + .animated-appear + .animated-appear { transition-delay: .2s; }
.animated-appear + .animated-appear + .animated-appear + .animated-appear { transition-delay: .3s; }
.animated-appear.appear { transform: translateY(0); opacity: 1; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
  #nav-wrapper li { margin-left: 18px; }
  #nav-wrapper li a, #nav-wrapper li span { font-size: 1em; }
  .hero-title { font-size: 2em; }
  .hero-contents { font-size: 1.1em; }
  #features .item { width: 40%; margin-right: 10%; }
  #features .item:nth-child(2n) { margin-right: 0; }
}

@media (max-width: 980px) {
  .page-paragraph .image-wrapper, .page-paragraph .contents,
  .profiles-section img, .profiles-section .contents { width: 100%; float: none; }
  .profiles-section .contents { margin-top: 20px; }
  #home-solutions .item { width: 48%; margin-right: 4%; }
  #home-solutions .item:nth-child(3n) { margin-right: 4%; }
  #home-solutions .item:nth-child(2n) { margin-right: 0; }
  #home-industries .item { width: 48%; margin-right: 4%; }
  #home-industries .item:nth-child(2n) { margin-right: 0; }
  #applications .item { width: 40%; margin-right: 10%; }
  #applications .item:nth-child(2n) { margin-right: 0; }
  .solutions-grid .item { width: 100%; margin-right: 0; }
  .why-grid .item { width: 45%; margin-right: 10%; }
  .why-grid .item:nth-child(2n) { margin-right: 0; }
  .cooperation-card { width: 100%; margin-right: 0; }
  .contact-form .group-lt, .contact-form .group-rt { float: none; width: 100%; }
  .page-feature .item { width: 45%; margin-right: 10%; }
  .page-feature .item:nth-child(3n) { margin-right: 10%; }
  .page-feature .item:nth-child(2n) { margin-right: 0; }
  #nav-wrapper { display: none; }
  .menu-button { display: block; }
  #nav-wrapper.open {
    display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #fff; z-index: 2000; padding: 80px 24px 24px; overflow-y: auto; margin-left: 0;
  }
  #nav-wrapper.open li { display: block; margin: 0; height: auto; }
  #nav-wrapper.open li a, #nav-wrapper.open li span { display: block; padding: 12px 0; font-size: 1.1em; }
  #nav-wrapper.open li ul { position: static; background: #f5f5f5; box-shadow: none; padding: 8px 18px; display: block; }
  #nav-wrapper.open li ul li a { color: #00695c; padding: 8px 0; }
  .close-button { display: block; }
}

@media (max-width: 640px) {
  #hero { height: 70vh; }
  .hero-title { font-size: 1.5em; }
  .hero-contents { font-size: 1em; }
  #features .item { width: 100%; margin-right: 0; }
  #home-solutions .item { width: 100%; margin-right: 0; }
  #home-industries .item { width: 100%; margin-right: 0; }
  #applications .item { width: 100%; margin-right: 0; }
  .numbers-grid { flex-direction: column; }
  .page-feature .item { width: 100%; margin-right: 0; }
  .page-banner { padding: 140px 0 50px 0; }
  .page-banner h2 { font-size: 1.5em; }
  h2 { font-size: 1.4em; }
  .page-paragraph .detail { font-size: 1.1em; }
  .profiles-section .contents { font-size: 1.1em; }
  .why-grid .item { width: 100%; margin-right: 0; }
  #support-item-wrapper .item { width: 100%; margin-right: 0; }
  #footer-contact, #footer-social { float: none; text-align: center; margin-bottom: 15px; }
  #subnav-wrapper ul { text-align: center; }
  #subnav-wrapper li { margin: 0 15px; }
}