@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Playfair+Display:ital,wght@0,600;1,400&display=swap');

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/** Variables **/

:root {
  --color-11:#FF6242;
  --color-21:#FF8142;
  --color-31:#ed8063;
  --color-41:#FFB042;
  --color-51:#FFD642;
  --color-61:#cbf4c3;
  --color-71:#EFD6C4;

  --color-1:#83020e;
  --color-2:#aa0a0f;
  --color-3:#ee3b66;
  --color-4:#ff8a7a;
  --color-5:#FFD642;
  --color-6:#abad2c;
  --color-7:#dca335;
  --color-8:#7a7a7a;
  --color-9:#b6b5b5;

  --bg-light-1: #fce8e8;   /* 极浅红（基于color-1） */
  --bg-light-2: #fce4e6;   /* 极浅粉红（基于color-2） */
  --bg-light-3: #fee9ef;   /* 极浅玫瑰（基于color-3） */
  --bg-light-4: #fff0f0;   /* 极浅珊瑚（基于color-4） */
  --bg-light-5: #fff8e0;   /* 极浅黄（基于color-5） */
  --bg-light-6: #f2f4e0;   /* 极浅橄榄（基于color-6） */
  --bg-light-7: #fdf2e4;   /* 极浅金（基于color-7） */

  

  --color-background: #cbd5e1;
  --color-background-alt: #3a9092;
  --color-border-active: #23494c;
  --color-border-default: #EFD6C4;
  --color-highlight: #7ecac7;
  --color-primary: #ed8063;
  --color-primary-active: #6bcba4;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Inter", sans-serif;

  
  --bg: #ffffff;
  --text: #1a1a1a;
  --accent: #003366;
  --gray: #f9f9f9;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  line-height: 1.6;
}

/* 导航系统 */
nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 20%;
  align-items: center;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-left: 40px;
  text-transform: uppercase;
  transition: 0.3s;
}

.nav-links a:hover {
  color: var(--accent);
}

/* 排版系统 */
.section-hero {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--gray);
}


h1 {
  font-family: ARIAL, CALIBRI;
  font-size: 4rem;
  margin-bottom: 20px;
}

h2 {
  font-family: ARIAL, CALIBRI;
  font-size: 2.5rem;
}

.btn-outline {
  border: 1px solid #1a1a1a;
  padding: 15px 40px;
  text-decoration: none;
  color: #1a1a1a;
  transition: 0.3s;
  display: inline-block;
}

.btn-outline:hover {
  background: #1a1a1a;
  color: #fff;
}

/* 网格系统 */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 80%;        /* 最大宽度为80% */
  width: 100%;           /* 保证在小屏幕下能正常响应 */
  margin: 0 auto;        /* 水平居中 */
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.card-item {
  border: 1px solid #eee;
  padding: 30px;
  text-align: center;
  transition: 0.3s;
}

.card-item:hover {
  border-color: var(--accent);
}






/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  margin: 1rem 0;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin-bottom: 1rem;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.75rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 1rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 3px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label+.fs-description {
  margin-top: 0.125rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-text-default);
  height: 1rem;
  width: 1rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none;
  /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem;
  /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 1.5rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.75rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
  height: 100px;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

/** Utilities **/

.col-span-full {
  grid-column: 1 / -1;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

.slider-label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
}

.slider-label-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

/* ========== section-factory 轮播样式 ========== */
.section-factory {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  overflow: hidden;  
  background: linear-gradient(180deg, #f3f1ef 0%, #f4e1c7 100%);
}

/* 轮播背景容器 */
.carousel-bg {
  position: absolute;
  top: 0;
  left: 50%;           /* 先定位到50%位置 */
  transform: translateX(-50%);  /* 向左偏移自身宽度的50%，实现居中 */
  width: 80%; /* 设置宽度为页面宽度的70% */
  height: 100%;
  z-index: 0;
}

/* 单个背景图 */
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* 当前激活的背景图 */
.carousel-slide.active {
  opacity: 1;
}

/* 可选：添加暗色叠加层让文字更清晰 */
.carousel-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* 文字内容，确保在背景之上 */
.section-factory h1,
.section-factory p {
  position: relative;
  z-index: 2;
}

.section-factory h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
}

.section-factory p {
  font-size: 1.5rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

/* ========== section-content 普通样式（不受轮播影响） ========== */
.section-content {
  padding: 80px 20px;
  background-color: #f5f5f5;
}

.section-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #333;
}

.section-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
}




/* 让容器居中 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


/* 三列布局居中 */
.flex-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px;
}
.flex-col {
  flex: 1;
  min-height: 400px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}




.wp{width:75%; margin:0 auto; position:relative;}


      .nav-links > a,
      .dropdown {
          display: inline-block;
      }

      .nav-links > a:hover,
      .dropdown:hover > .dropbtn {
          background-color: #b9b6b6;
          border-radius: 4px;
      }

      /* 一级：Products 容器 */
      .dropdown {
          position: relative;
      }

      .dropbtn {
          cursor: pointer;
      }

      /* 二级菜单（默认隐藏） */
      .dropdown-content {
          position: absolute;
          top: 100%;
          left: 0;
          background-color: #fce7c4;
          min-width: 180px;
          box-shadow: 0 8px 16px rgba(168, 167, 167, 0.2);
          z-index: 1;
          display: none;
      }

      .dropdown-content a {
          padding: 10px 5px;
          text-decoration: none;
          display: block;
          text-align: left;
      }

      .dropdown-content a:hover {
          background-color: #bbb8b8;
      }

      /* 三级菜单容器（放在有子项的二级菜单内） */
      .third-level {
          position: relative;
      }

      .third-level > a {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .third-level > a::after {
          content: "›";
          font-size: 18px;
          margin-left: 5px;
      }

      /* 三级菜单（默认隐藏） */
      .third-content {
          position: absolute;
          left: 100%;
          top: 0;
          background-color: #fbe5ba;
          min-width: 160px;
          box-shadow: 0 8px 16px rgba(243, 216, 216, 0.2);
          display: none;
      }

      .third-content a {
          padding: 10px 16px;
          white-space: nowrap;
      }

      /* 悬停显示二级菜单 */
      .dropdown:hover .dropdown-content {
          display: block;
      }

      /* 悬停显示三级菜单 */
      .third-level:hover .third-content {
          display: block;
      }


      .header{position:relative;width:100%;height:110px;background-color:#fff;z-index:100;box-shadow:0 1px 10px rgba(0,0,0,.1);font-family:"Segoe UI Semibold"; }
      .header .wp{height:100%;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
      
      /*
      .web_head .logo,.head_right,.nav_wrap .head_nav,.web_head .btn--search,.head_emal,.web_head .change-language,.line_height{display: inline-block;position: relative;vertical-align: middle; text-align:left;}
      */
      
      .header .logo{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
      .header .logo img{max-height:77px;}
      
      .header-right-top{margin-top:10px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end;}
      
      .header-right-top .down{background:url(../images/ico02.png) no-repeat left center;padding:0 20px;}
      .header-right-top .down:after{content:"|";margin-left:20px;font-family:"Segoe UI"}
      .header-right-top .down:hover{background-image:url(../images/ico03.png);}
      
      .header-lang{position:relative;z-index:200;}
      .header-lang .box{height:20px;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
      .header-lang .box img{height:16px;}
      .header-lang .box em{margin:0 2px 0 5px;font-size:14px;color:#000;}
      .header-lang .box i{font-size:15px;text-align:center;margin-top:2px;color:#000;transition:all 0.3s ease 0s;}
      .header-lang .lang-box{position:absolute;top:100%;right:0;width:360px;background:#FFF;padding:20px 10px 20px 20px;transform: scale3d(0.9, 0.9, 1);opacity:0;visibility:hidden;z-index:999; transition:all 0.4s ease-in-out; border:1px solid #eee;border-radius:5px;overflow-y:scroll;}
      .header-lang .lang-box ul{font-size:0;margin:0 -10px;}
      .header-lang .lang-box ul li{display:inline-block;vertical-align:top;width:33.3333333%;margin:0 0 10px;font-size:12px;overflow:hidden;padding:0 10px;}
      .header-lang .lang-box ul li img{margin-right:3px;}
      
      .header-lang:hover .box em{color:#ee9422;}
      .header-lang:hover .box i{color:#ee9422;-ms-transform:rotate(180deg);transform: rotate(180deg);}
      .header-lang:hover .lang-box{transform:scale3d(1, 1, 1);opacity:1;visibility:visible;}
      
      .header-right-bottom{margin-top:15px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
      
      
      .head_right{ margin-top:26px;}
      
      .head_nav{position:relative;font-size:0;}
      .head_nav > li > a:before,.head_nav > li > a:after,.head_nav li li a{transition: all 0.3s ease-in-out;}
      .head_nav{font-size:0;}
      .head_nav > li{display:inline-block;position:relative;padding:0 25px;font-size:15px;text-transform:uppercase;font-weight:500;}
      .head_nav > li li{display:block;text-align:left;font-size:14px;position:relative;}
      .head_nav li a { position:relative; display:block;line-height:40px;}
      .head_nav > li > a > i{color:inherit;display:inline-block;font-size:15px;margin:-3px 0 0 4px;font-weight:normal;vertical-align:middle;transition:all 0.3s ease 0s;}
      
      .head_nav li li a em{display: inline-block;width: 100%;}
      
      .head_nav li ul{
        position:absolute;left:0;top:100%;width:250px;
        padding:10px 0;z-index:999;transform:scale3d(0.9, 0.9, 1);
        opacity:0;visibility:hidden;box-sizing:content-box; 
        background:var(--color-4);
      }
      .head_nav li li ul{top:-10px;left:100%;}
      
      .head_nav li li a{line-height:1.8;padding:6px 15px;color:#FFF;}
      .head_nav li li a i{position:absolute;right:15px;top:5px;font-size:14px;}
      
      .head_nav li li a:hover{-ms-transform:translateX(5px);transform:translateX(5px);}
      
      .head_nav li:hover > ul {transform:scale3d(1, 1, 1);opacity:1;visibility:visible;}
      .head_nav li.active > a, .head_nav li:hover > a {   }
      
      .head_nav > li:hover > a > i{-ms-transform:rotate(180deg);transform: rotate(180deg);}


      .head_nav li{
        padding:0 13px;
        font-size:16px;
      }
      em {
        font-style: normal;
      }

      a {
        color: var(--color-8);
        text-decoration: none;
      }
      a:hover {
        color: var(--color-1);
        text-decoration: none;
      }


      .page-footer a {
        color:var(--color-8);
        text-decoration:none
      }
      

      .feature-list {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    

    .stat {
      background: #f5f0e9;
      border-radius: 60px;
      padding: 10px 20px;
      text-align: center;
      font-weight: 600;
  }
  

  .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(44, 95, 45, 0.06);
    padding: 8px 16px;
    border-radius: 100px;
}

.feature-item::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: bold;
}