html{scroll-padding-top: 200px}
#navbar.navbarBG{ background: linear-gradient(0deg,rgb(0 0 0) 0%, rgb(0 0 0) 100%); } 
.product-container { padding: 30px 0 50px; position: relative; overflow-x: hidden; } 
.product-container>div{ overflow: hidden; } 
.product-container img { width: 100%; } 
.product-title-section { background-color: #000; position: sticky; top: 60px; z-index: 5; /* box-shadow: #4d4d4d38 0px 5px 10px 0px; */ background: linear-gradient(0deg, rgba(0, 0, 0, 0.77) 0%, rgba(0, 0, 0, 1) 60%); } 
.product-section { margin: auto; padding: 5px 0; } 
.product-title { } 
.title-text { color: #969393; } 
.product-info { display: flex; justify-content: space-between; align-items: center; } 
.model-name { display: flex; align-items: center; gap: 10px; } 
.model-text { /* font-size: var(--text-3xl); */ } 
.product-navigation { } 
.nav-list { display: flex; gap: 1rem; } 
.nav-item { } 
.nav-list a:hover{color: var(--text-color);}
.banner { margin: auto; position: relative;} 
.aspect-ratio-container{ padding-top: 66%;}
.aspect-ratio-container .banner-image { position: absolute; top: 0; left: 0; width: 100%; } 
.banner-image { } 

/* =============================================角度颜色轮播============================================== */
.carousel-section{
  position: relative;
}
.carousel-section>img{
  position: absolute;
  height: 100%;
  z-index: -1;
}
#product-color-tabs{
    margin: 100px 0;
}
#product-color-tabs .color-tab-panel { display: none; } 
.main-container { display: flex; justify-content: center; gap: 6rem; align-items: center; } 
.color-selector { position: relative; } 
.nav-button { text-align: center; opacity: 0.5; cursor: pointer; } 
.nav-button:hover { opacity: 1; } 
.nav-button.next { } 
.nav-button img { width: 30px; } 
.color-thumbnails-container { margin: 10px 0; max-height: 400px; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-overflow-style: none; scrollbar-width: none; } 
.color-thumbnails-container::-webkit-scrollbar { display: none; width: 0; height: 0; } 
.thumbnail-item { width: 80px; scroll-snap-align: start; scroll-snap-stop: always; } 
.thumbnail-item-button { } 
.thumbnail-item-button {padding: 10px;opacity: 0.6;cursor: pointer;} 
.thumbnail-item-button:hover { opacity: 1; } 
.thumbnail-item-button.active { padding: 5px; opacity: 1; } 
.thumbnail-image-container {border-radius: var(--border-radius-sm);    box-shadow: 0 0 1px 1px rgb(255 255 255 / 20%), 0 0 3.5px 3.5px rgb(255 255 255 / 30%);position: relative;padding-top: 100%;    background-color: #fff;} 
.thumbnail-image-container img { border-radius: var(--border-radius-sm); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.carousel-container { display: flex; justify-content: center; } 
.carousel-container .layui-carousel[lay-arrow="always"] .layui-carousel-arrow { left: -70px; font-size: 50px; background: none; } 
.carousel-container .layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="add"] { right: -70px; } 
.carousel-container .layui-carousel-arrow { } 
.carousel-container .layui-carousel {background: transparent;} 
.carousel-container .carousel-slides { padding-top: 100%; height: 0; } 
.carousel-container .carousel-slides::before { content: ''; } 
.carousel-container .carousel-slide { background-color: transparent; } 
.controls-container { display: flex; justify-content: center; padding-left: calc(6rem + 70px); color: #fff; margin: 20px 0; } 
#color-tabs-header { /* width: 100%; */ display: flex; flex-wrap: wrap; justify-content: center;} 
#color-tabs-header .layui-btn { margin: 10px; border-radius: var(--border-radius-pill); display: flex; gap: 5px; align-items: center; background-color: #ffffff1a; } 
#color-tabs-header .layui-btn.layui-this { border-color: #eee; color: unset; } 
#color-tabs-header .layui-btn .color-preview { width: 16px; height: 16px; border-radius: 20px; border: 1px solid rgb(255 255 255 / 20%); }
@media (max-width: 768px) {
 .main-container { flex-direction: column-reverse; gap: 2rem; } 
 .color-selector { transform: rotate(-90deg); height: 70px; display: flex; justify-content: center; align-items: center; } 
 .color-selector-content { } 
 .nav-button { } 
 .nav-button.next { } 
 .color-thumbnails-container { max-height: 300px; } 
 .thumbnail-item { transform: rotate(90deg); width: 60px; } 
 .layui-carousel[lay-arrow="always"] .layui-carousel-arrow { display: none; } 
 .carousel-container .layui-carousel { width: 330px !important; } 
 .controls-container { padding: 0; }
}
/* ============================================================== */
.choiceness-container { max-width: 800px; margin: 100px auto; } 
.choiceness-wrapper { background-color: #fff; margin: 0 20px; padding: 30px; border-radius: 20px; } 
.choiceness-title { margin-bottom: 20px; } 
.choiceness-title p { color: #000; text-align: center; /* font-size: var(--text-2xl); */ font-weight: 700; } 
.choceness-list { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); gap: 15px; min-height: 800px; } 
.choiceness-item { overflow: hidden; cursor: pointer; } 
.choiceness-item > div { width: 100%; height: 100%; } 
.choiceness-item img { transition: transform 1s ease; object-fit: cover; width: 100%; height: 100%; } 
.choiceness-item img:hover { transform: scale(1.05); transition: transform 1s ease; } 
#mobile-carousel-popup{ background-color: #fff!important; } 
#choiceness-carousel img,.mobile-carousel-container img { width: 100%; height: 100%; object-fit: contain; display: block; } 
.mobile-carousel-container{ scroll-snap-type: y mandatory; height: 100%; } 
.mobile-carousel-item{ margin-bottom: 80px; /* scroll-snap-align: end; scroll-snap-stop: always; */ } 
.icon-container { max-width: 800px; margin: auto; } 
.icon-container img { } 
.detail-container { max-width: 800px; margin: 30px auto; position: relative; } 
.detail-container .detail-Bg { position: absolute; z-index: -1; height: 100%; } 
.detail-content { padding: 30px 50px 55px; } 
.detail-title { /* margin: auto; */ margin: 50px auto 0px; } 
.detail-title .logo-series {width: auto; max-height: 70px;max-width:100%; } 
.detail-title-text { text-align: center; /* font-size: var(--text-4xl); */ margin-bottom: 20px; font-weight: 700; } 
.detail-content-item { } 
.detail-content-item p { } 
.detail-border { /* border: 1px solid var(--color-main); */ position: relative; overflow: hidden; /* background: #000; */ } 
.detail-content-top { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } 
/*.detail-content-top > div { width: 50%; } */
.detail-content-left { } 
.detail-content-left::before { /* content: ""; */ position: absolute; z-index: 0; width: 200%; height: 250%; top: -150%; left: -100%; background: radial-gradient( circle, rgb(233, 154, 51, 0.6) 0%, rgba(233, 154, 51, 0.4) 40%, rgba(233, 154, 51, 0.1) 70% ); } 
.detail-content-right::before { /* content: ""; */ position: absolute; z-index: 0; width: 200%; height: 250%; top: -150%; right: -100%; background: radial-gradient( circle, rgb(233, 154, 51, 0.6) 0%, rgba(233, 154, 51, 0.4) 40%, rgba(233, 154, 51, 0.1) 70% ); } 
.detail-content-text { /* font-size: var(--text-2xl); */ position: absolute; z-index: 3; top: 15px; left: 20px; font-weight: 700; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000; } 
.detail-img { display: flex; height: 100%; position: relative; z-index: 1; } 
.detail-img img { margin-top: auto; } 
.detail-content-bottom { } 
/*.detail-content-bottom::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 2; background: linear-gradient( 180deg, rgb(233, 154, 51, 0.4) 0%, rgba(233, 154, 51, 0.2) 20%, rgba(233, 154, 51, 0) 70% ); } */
.asdasd{
    width: fit-content;
    margin: auto;
    position: relative;
    overflow: visible!important;
}
.asdasd::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -5px;
    background-color: var(--color-background);
}
.feature-container { margin: 100px auto; } 
.feature-content { display: flex; gap: 5rem; margin: 20px 0; } 
.feature-content-reverse { flex-direction: row-reverse; } 
.feature-content > div { width: 50%; position: relative; } 
.feature-img { display: flex; justify-content: center; align-items: center; } 
.feature-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } 
.feature-img img { } 
.feature-content.feature-content-reverse .feature-writer{align-items: flex-end;}
.feature-writer { 
    display: flex;
    flex-direction: column;
    justify-content: center;
} 
.feature-title { 
    margin: 5px 0; 
    line-height: 1.2;
    position: relative;
    /*width: max-content;*/
    font-weight: bold;
    background: linear-gradient(90deg, var(--color-accent) 11%, var(--color-primary) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
} 
.feature-content.feature-content-reverse .feature-text{text-align: end;}
.feature-text {  white-space: pre-wrap; line-height: 2rem;} 
.feature-text *{ color: var(--color-text-muted);} 
.size-container { margin-bottom:50px} 
.parameter-container { } 
.spec-table { width: 80%; margin: 50px auto; } 
.spec-table tr { white-space: pre-wrap; } 
.spec-table tr td,.spec-table tr th { border: 1px solid #2e2e2e; padding: 7px 0 7px 20px; } 
.parameter-name { padding-left: 30px; } 
.parameter-value { padding: 10px 50px; } 
.product-name { } 
.product-value { /* font-size: var(--text-xl); */ } 
.spec-name { /* font-size: var(--text-lg); */ } 
.spec-value { /* font-size: var(--text-lg); */ } 
.PicsEnjoy-container { padding: 0 20px; } 
.PicsEnjoy-container-inner { background-color: var(--color-background); border-radius: 20px; padding: 30px 30px 20px; } 
.PicsEnjoy-title { text-align: center; font-weight: 700; margin-bottom: 20px; } 
.PicsEnjoy-title p{ color: var(--color-text-alt); } 
.PicsEnjoy-item { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-template-areas: "A C E" "A D E" "B D F"; gap: 15px; padding: 10px 0; height: 900px; } 
.PicsEnjoy-list:nth-child(1) { grid-area: A; } 
.PicsEnjoy-list:nth-child(2) { grid-area: B; } 
.PicsEnjoy-list:nth-child(3) { grid-area: C; } 
.PicsEnjoy-list:nth-child(4) { grid-area: D; } 
.PicsEnjoy-list:nth-child(5) { grid-area: E; } 
.PicsEnjoy-list:nth-child(6) { grid-area: F; } 
.PicsEnjoy-list { overflow: hidden; } 
.PicsEnjoy-list img { cursor: pointer; width: 100%; height: 100%; object-fit: cover; transition: transform 3s ease; } 
.PicsEnjoy-list img:hover { transform: scale(1.05); transition: transform 2s ease; } 
.layui-layer-photos .layer-layer-photos-main img { box-shadow: #a4a4a457 0 0 20px 0px; } 
@media (max-width: 1120px) { 
  .carousel-list{ width: 500px; }
  .product-title-section { top: 48px; } 
} 
@media (max-width: 1024px) { 
  .product-info { /* display: flex; */ /* flex-direction: column; */ /* align-items: flex-start; */ } 
  .product-navigation { display: none; } 
  .carousel-section-content { flex-direction: column-reverse; } 
  .custom-indicator { display: flex; flex-direction: row; } 
  .custom-indicator .btni { transform: rotate(270deg); } 
  .custom-indicator-container { } 
  .custom-indicator-items { /* display: flex; */ /* height: 100%; */ } 
  .custom-indicator-frame { height: 80px; } 
  .indicator-item-inner { margin: auto 7px; } 
  .carousel-section-content { gap: 0; } 
  .carousel-colos { margin: 20px auto; } 
  .PicsEnjoy-item { height: 550px; } 
} 

@media (max-width: 824px) {
  .aspect-ratio-container{
    padding-top: 143%;
  }
  .carousel-section{
      margin: 50px 0;
  }
  .feature-container{
      margin: 50px 0;
  }
  .feature-img{
      margin-bottom: 20px;
  }
  .banner3{
          margin: -15px;
  }
  .PicsEnjoy-container{
      padding: 0;
  }
}
@media (max-width: 768px) { 
  .product-container{ padding: 30px 0 0px; }
  .carousel-wrapper { padding: 0px; } 
  .carousel-list{ width: 230px; }
  .carousel-colos { margin: 0px auto; } 
  .choiceness-wrapper { padding: 10px; } 
  .choceness-list { gap: 5px; min-height: 400px; max-height: 420px; } 
  .choiceness-item { min-height: 130px; } 
  .detail-content { padding: 30px 20px; } 
  .detail-title { margin: 70px auto 50px; } 
  .detail-content-top { gap: 1rem; margin-bottom: 1rem; } 
  .detail-content-top > div { } 
  .detail-border { border-radius: 10px; } 
  .detail-container { max-width: 100%; } 
  .icon-container { max-width: 97%; } 
  .feature-content .feature-writer{align-items: center!important;}
  .feature-content { display: block; margin-bottom: 50px; } 
  .feature-content > div { width: 100%; } 
  /*.feature-writer > div { padding: 0 20px; } */
  .feature-text {line-height: 1.4}
  .feature-content .feature-text{text-align:center!important;}
  .parameter-name { padding: 5px 10px 5px 15px; line-height: 18px; } 
  .parameter-value { padding: 10px 5px 10px 15px; } 
  .PicsEnjoy-container-inner { padding: 10px; border-radius: 0px;} 
  .PicsEnjoy-title { margin-bottom: 10px; } 
  .PicsEnjoy-item { display: block; height: auto; } 
  .layui-layer-photos .layui-layer-content { display: flex; align-items: center; height: 19px; } 
  .spec-table{ width: 100%; } 
}