@import url("tokens.css");

body,  div,  li, ol,  ul { margin: 0px; padding: 0px; vertical-align: baseline; }
img { border: 0px none; }
img { width: auto; height: auto; }
li, ol, ul { list-style: outside none none; }
header, nav,  { display: block; }
body, html {  }
body { font-family: var(--font-sans); }
html { background-image: none; background-attachment: fixed; }
a { cursor: pointer; }
a { color: var(--color-rgb-link-gray); }
a, a:hover {  }
a:hover, a:focus {
  color: var(--color-brand-primary);
text-decoration: none!important}
i { overflow: hidden; }
.clearfix {  }
body { position: relative; }
header { width: 100%; min-width: 1240px; position: fixed; top: 0; left: 0; right: 0; z-index: 200; background-color: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08); }
header .head { display: block; width: 1240px; margin: 0px auto; height: 90px; }
.head .logo { display: block; width: 300px; float: left; }
.head .logo img { display: block; max-width:160px }
.head .nav { display: block; width: 940px; float: right; padding-top: 14px; }
.head .nav .nav-top { height: 28px; padding: 0px 19px; display: table; position: relative; }
.nav-top > ul { font-size: 0px; height: 28px; }
.nav-top > ul > li { float: left; line-height: 28px; height: 28px; margin-right: 24px; }
.nav-top > ul > li:last-child { margin-right: 0px; }
.nav-top > ul > li img { width: 16px; height: 16px; margin: 0px 5px 0px 0px; }
.nav-top > ul > li img, .nav-top > ul > li span { display: inline-block; vertical-align: middle; }
.nav-top > ul > li span { font-size: 12px; color: var(--color-rgb-nav-text); position: relative; }
.nav-top > ul > li.partner-icon li { float: left; position: relative; }
.nav-top > ul > li.partner-icon .pic-icon { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; opacity: 0.78; transition: opacity 0.2s; }
.nav-top > ul > li.partner-icon li:last-child { margin-right: 0px; }
.nav-top > ul > li span:hover {color: var(--color-brand-primary-b);}
nav { padding-top: 16px; clear: both; }
nav > ul { height: 46px; }
nav > ul > li { float: left; text-align: center; height: 46px; position: relative; padding: 0px 18px 14px; }
nav ul > li.allProduct { position: relative; }
nav > ul > li.on > a::after { content: ""; position: absolute; width: 56px; height: 2px; bottom: 0px; left: 50%; margin-left: -28px; background: var(--color-rgb-black) none repeat scroll 0% 0%; }
nav > ul > li.on a.relations::after { width: 96px; margin-left: -48px; }
nav > ul > li:hover:not(:last-child) > a::after { content: ""; position: absolute; width: 56px; height: 2px; bottom: 0px; left: 50%; margin-left: -28px; background: var(--color-brand-primary-b) none repeat scroll 0% 0%; }
nav > ul > li.relations:hover > a::after { width: 96px; margin-left: -48px; }
nav ul > li.on, nav ul > li:hover ol { display: block; }
nav ul > li ol a::after { display: none; }
nav ul > li > a { line-height: 30px; display: block; font-size: 15px; color: var(--color-text-heading, #111827); position: relative; }
nav ul > li ol { position: absolute; left: 0px; top: 48px; padding: 4px 0px; background: var(--color-rgb-white) none repeat scroll 0% 0%; box-shadow: 0px 0px 40px 0px var(--color-border-light); border-radius: 4px; display: none; z-index: 100; }
nav ul > li ol li { height: 32px; background: var(--color-rgb-white) none repeat scroll 0% 0%; width: 135px; padding-left: 15px; text-align: left; line-height: 32px; cursor: pointer; }
nav ul > li ol li a { display: block; line-height: 32px; font-size: 12px; color: var(--color-rgb-link-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav ul > li ol li.current, nav ul > li ol li:hover { background: var(--color-nav-row-hover) none repeat scroll 0% 0%; }
head { position: relative; }
.allProduct .main { display: none; margin: 0px auto 0px -50%; position: absolute; left: 50%; top: 110px; width: 100%; min-width: 1240px; background: transparent url('../assets/images/index/allproductbg.jpg') no-repeat scroll 0% 0% / cover ; height: 515px; z-index: 999999; }
.productList { padding: 40px 0px 0px; width: 1240px; height: 515px; box-sizing: border-box; margin: 0px auto; }
.allProduct:hover .main { display: block; }
.productList .left { height: 385px; float: left; overflow: hidden; }
.productList .left ul li { list-style: outside none none; float: left; margin-right: 15px; width: 342px; height: 385px; }
.productList .left ul li img { width: 342px; height: 385px; display: block; border-radius: 6px; }
.productList .right { overflow: hidden; height: 385px; }
.productList .right ul li { list-style: outside none none; float: left; margin-right: 15px; height: 181px; width: 160px; padding-bottom: 24px; height:204px}
.productList .right ul li img { height: 181px; width: 160px; display: block; }
.productList .bottom { overflow: hidden; margin-top: 20px; }
.productList .bottom ul li { list-style: outside none none; float: left; margin-right: 19px; width: 160px; height: 181px; }
.productList ul li { position: relative; }
.partner-icon ul li .detail-pic { display: none; position: absolute; left: -250%; width: 226px; height: 308px; z-index: 2; }
.partner-icon ul li:hover .detail-pic { display: block; }

/* Fixed header offset for page content */
.page-holder { padding-top: 90px; }

/* Mobile menu toggle (hidden on desktop) */
.mobile-menu-toggle { display: none !important; }
.nav-drawer-logo { display: none; }

/* Product page: header is always white, so hamburger lines must be dark */
@media (max-width: 1024px) {
  .mobile-menu-toggle span {
    background: #333 !important;
  }
  .mobile-menu-toggle.is-active span {
    background: #333 !important;
  }
}

/* Nav link hover color */
nav ul > li > a:hover { color: var(--color-brand-primary, #FF6A13); }
nav > ul > li:hover:not(:last-child) > a::after { background: var(--color-brand-primary, #FF6A13) none repeat scroll 0% 0%; }

/* ============================================================
   Navigation Dropdown Menus — Unified Design
   ============================================================ */
nav ul > li > .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08), 0 1px 3px rgba(17, 24, 39, 0.04);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 1001;
    padding: 24px;
    margin-top: -10px;
    border: 1px solid rgba(0,0,0,0.03);
}

nav ul > li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dropdown-simple { width: 160px; padding: 12px; }
.dropdown-simple a {
    display: block;
    padding: 12px 16px;
    color: #4B5563;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s;
    line-height: 1.5;
    white-space: nowrap;
    height: auto;
    width: auto;
    background: none;
    text-align: left;
    overflow: visible;
}
.dropdown-simple a:hover {
    background-color: #F9FAFB;
    color: #FF6A13;
    transform: translateX(4px);
}

.dropdown-mega {
    width: 680px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    height: auto;
    background: #fff;
    background-image: none;
    min-width: auto;
    padding: 0 !important;
    overflow: hidden;
}

.mega-col-left {
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%);
    border-radius: 16px 0 0 16px;
    padding: 28px 24px;
    border-right: none;
    display: flex;
    flex-direction: column;
}

.mega-title {
    font-size: 11px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.brand-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 10px;
    transition: all 0.25s ease;
    margin-bottom: 4px;
    flex: 1;
}
.brand-link:last-child { margin-bottom: 0; }
.brand-link:hover { background-color: rgba(255,255,255,0.75); }
.brand-link h4 {
    margin: 0 0 4px 0;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s;
    text-transform: none;
    line-height: 1.4;
}
.brand-link p {
    margin: 0;
    color: #9CA3AF;
    font-size: 12px;
    line-height: 1.5;
}
.brand-link:hover h4 { color: #FF6A13; }

.mega-col-right {
    padding: 28px 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(3, 1fr);
    gap: 6px 12px;
    align-content: center;
}
.mega-col-right .mega-title {
    grid-column: span 2;
    margin-bottom: 8px;
}

.category-link {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.25s ease;
    height: auto;
    width: auto;
    background: #F9FAFB;
}
.category-link:hover { background-color: #F3F4F6; transform: translateX(2px); }
.category-link span {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: color 0.2s;
}
.category-link:hover span { color: #FF6A13; }

/* Product hero restores the legacy right-side food plate visual. */
.product-hero::after {
    background: url('../images/product-hero.jpg') no-repeat;
    background-size: 80%;
}


#back-to-top{
	background:var(--color-white);
    border:1px solid var(--color-surface-warm);
    border-radius:100%;
    width:50px;
    bottom:15px;
    color:var(--color-brand-icon);
    display:block;
    font-size:22px;
    height:50px;
    line-height:55px;
    overflow:hidden;
    position:fixed;
    right:-50px;
    text-align:center;
    z-index:1111;
	-webkit-transition:all 0.3s ease 0.2s;
	-moz-transition:all 0.3s ease 0.2s;
	-ms-transition:all 0.3s ease 0.2s;
	-o-transition:all 0.3s ease 0.2s;
	transition:all 0.3s ease 0.1s;
	cursor: pointer;
}
footer {
 width:100%;
 min-width:1240px;
 background-color: var(--color-brand-tech-navy);
 border-top: 4px solid var(--color-brand-primary);
 font-size:0;
 position:relative;
 overflow: hidden;
}
.footer {
 width:1240px;
 margin:0 auto;
 height:144px;
 line-height:144px
}
.footer img,
.footer span {
 display:inline-block;
 vertical-align:middle
}
.footer span {
 font-size:12px;
 color:var(--color-white);
 line-height:18px;
 margin-right:48px
}
.footer span i {
 display:block;
 font-size:14px;
 color:var(--color-white);
 line-height:20px;
 font-weight:600;
 font-style: normal;
}
.footer span.footer-tips {
 margin-right:0;
 font-size:12px;
 color:var(--color-white)
}
.footer span.footer-tips em {
 padding-left:20px;
 font-style: normal;
}
.footer .wechat-code {
 width:60px;
 margin-right:16px
}
.footer img.logo {
 margin-right:140px;
 width:158px
}
.footer-tips {
 font-size:12px;
 color:var(--color-text-caption);
 margin-right:0
}
.footer-bottom {
 width:1240px;
 margin:0 auto;
 border-top:1px solid var(--color-footer-divider);
 line-height:103px
}
.footer-bottom .icon,
.footer-bottom .icon>ul>li,
.footer-bottom .server>ul>li {
 float:left
}
.footer-bottom img {
 width:16px;
 height:16px;
 display:block
}
.footer-bottom img,
.footer-bottom span {
 display:inline-block;
 vertical-align:middle
}
.footer-bottom span {
 font-size:12px;
 color:var(--color-text-secondary);
 line-height:20px;
 margin-right:48px;
 margin-left:8px
}
.footer-bottom .server>ul>li {
 text-align:center
}
.footer-bottom .server li:last-child span {
 margin-right:0
}
.footer-bottom .server span {
 color:var(--color-white);
 font-size:14px
}

select {
			font-size: 1em;
		}

		.scroll-parent {
			margin-left: 1rem;
		}
		.select-select {
  display: none;
  /* For when we are on a small touch device and want to use native controls */
  pointer-events: none;
  position: absolute;
  opacity: 0; }

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

.select-element {
  position: absolute;
  display: none; }
  .select-element.select-open {
    display: block; }

.select-theme-dark, .select-theme-dark *, .select-theme-dark *:after, .select-theme-dark *:before {
  box-sizing: border-box; }

.select.select-theme-dark {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }
  .select.select-theme-dark .select-content {
    border-radius: .25em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background: var(--color-product-select-bg);
    color: var(--color-product-select-text);
    font-family: inherit;
    overflow: auto;
    max-width: 18rem;
    max-height: 18rem;
    -webkit-overflow-scrolling: touch; }
    @media (max-width: 27rem), (max-height: 27rem) {
      .select.select-theme-dark .select-content {
        max-width: 100%;
        max-height: 11.25rem; } }
  .select.select-theme-dark .select-options {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    margin: 0;
    padding: 0; }
    .select.select-theme-dark .select-options .select-option {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      position: relative;
      list-style: none;
      margin: 0;
      line-height: 1.25rem;
      padding: 0.5rem 1em 0.5rem 0.5em;
      display: block;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .select.select-theme-dark .select-options .select-option.select-option-selected:before {
        
        position: absolute;
        left: 1em;
        top: 0;
        bottom: .2em;
        height: 1em;
        width: 1em;
        margin: auto; }
      .select.select-theme-dark .select-options .select-option:hover, .select.select-theme-dark .select-options .select-option.select-option-highlight {
        background: var(--color-product-select-hover);
        color: var(--color-white); }
      .select.select-theme-dark .select-options .select-option:first-child {
        border-radius: 0.25em 0.25em 0 0; }
      .select.select-theme-dark .select-options .select-option:last-child {
        border-radius: 0 0 0.25em 0.25em; }

.select-target.select-theme-dark {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  border-radius: .25em;
  position: relative;
  padding: 0.5rem 3em 0.5rem 1em;
  background: var(--color-product-select-bg);
  border: .18em solid var(--color-product-select-bg);
  cursor: pointer;
  color: var(--color-product-select-text-dim);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis; }
  .select-target.select-theme-dark:hover {
    border-color: var(--color-product-select-bg);
    color:  var(--color-product-select-hover-text);
  }
	
  .select-target.select-theme-dark.select-target-focused, .select-target.select-theme-dark.select-target-focused:focus {
    border-color: var(--color-product-select-bg);
	background: var(--color-product-select-bg);
    outline: none; }
  .select-target.select-theme-dark b {
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1.25rem;
    width: 2em; }
    .select-target.select-theme-dark b:before, .select-target.select-theme-dark b:after {
      content: "";
      display: block;
      position: absolute;
      margin: auto;
      right: 0;
      height: 0;
      width: 0;
      border: .263em solid transparent; }
    .select-target.select-theme-dark b:before {
      top: 0;
      border-bottom-color: inherit; }
    .select-target.select-theme-dark b:after {
      bottom: 0;
      border-top-color: inherit; }