@import "init.css";

section {
   width: 100%;
   padding: 100px 5%;
}

.insidebanner {
   width: 90% !important;
   margin: 0 auto;
}
.insidebanner img {
   animation: fadeInZoom 1s ease-out forwards;
}

@keyframes fadeInZoom {
    0% {
        filter: brightness(0.7);
        transform: scale(1.5);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

/*顶部产品名称*/
.toptitle {
   width: 90%;
   margin: 120px auto 40px;
   text-align: center;
}

.prodname {
   font-size: clamp(38px, 2vw, 46px);
}

.prodseries {
   font-size: clamp(16px, 1.5vw, 20px);
   line-height: 2;
}

/*模块名称*/
.ptitle .enname {
   font-size: clamp(44px, 3vw, 50px);
   text-transform: uppercase;
}

.ptitle .cnname {
   font-size: clamp(20px, 1.2vw, 24px);
   margin-top: 10px;
}

/*设计灵感*/
.inspiration {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.inspiration .text {
   width: 50%;
   font-size: clamp(14px, 1vw, 16px);
   line-height: 1.6;
   text-align: justify;
}



/*产品参数*/
.param-box {
   background-color: white;

}

.param {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.param .left,
.parambtn .left {
   width: 25%;
   max-width: 430px;
}

.param .right,
.parambtn .right {
   width: 64%;
   max-width: 1093px;
}

.param .right2,
.parambtn .right2 {
   width: 64%;
   max-width: 1093px;
   height:700px;
   overflow-y: auto;
}

.param .ptitle .box {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   width: 100%;
}

.icon-playbtn {
   color: #8f9eb2;
}

/* 基本列表样式 */
.paramlist {
   width: 100%;
   padding: 70px 0 50px 0;
}

.paramlist .list-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 18px 0;
   border-bottom: 1px solid rgba(169, 164, 87, 0.3);
   font-size: clamp(12px, 1vw, 14px);
}

.paramlist .list-item[data-last="true"] {
   flex-direction: column;
   align-items: flex-start;
   border-bottom: none;
}

.paramlist .list-item[data-last="true"] .right {
   width: 100%;
   text-align: left;
   margin-top: 18px;
   line-height: 1.5;
   text-align: justify;
}

.paramlist .list-item .left {
   width: 48%;
   color: var(--text-yellow);
   text-transform: uppercase;
}

.paramlist .list-item .right {
   width: 48%;
   text-align: right;
}


/* 大图容器 */
.big-image-container {
   width: 100%;
   height: auto;
   max-height:547px;
   overflow:hidden;
}

.big-image-container img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   aspect-ratio: 1093 / 547;
}

/* 小图容器 */
.small-image-container {
   width: 100%;
   height: auto;
   margin-top: 20px;
}

.small-image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
}

.small-image-container .swiper-slide.active img {
   border: 1px solid rgba(0, 91, 87, 1);
}

.model-text {
   margin-top: 12px;
   font-size: clamp(13px, 1vw, 14px);
}

/*多图模式*/
.product-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 45px;
   padding: 150px 75px 0;
}

.product-item {
   cursor: pointer;
}


.product-item img {
   width: 100%;
   height: auto;
   object-fit: contain;
   aspect-ratio: 1 / 1;

}

/*功能按钮*/
.parambtn {
   display: flex;
   justify-content: space-between;
   align-items: center;
}


.parambtn .left {
   width: 25%;
   max-width: 430px;
   display: flex;
   justify-content: start;
}

.parambtn .right {
   width: 64%;
   max-width: 1093px;
   display: flex;
   justify-content: center;
}

.viewall-btn {
   margin: 0;
}

.mgright {
   margin-right: 20px;
}

.mgcenter {
   margin: auto;
}

.background-mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   z-index: 119;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.8s ease, visibility 0s 0.8s;
}

.background-mask.active {
   visibility: visible;
   opacity: 0.9;
   transition: opacity 0.8s ease, visibility 0s 0s;
}



.design-overlay,
.module-overlay {
   position: fixed;
   top: 0;
   right: -90%;
   width: 70%;
   max-width: 1200px;
   height: 100%;
   background-color: white;
   transition: right 1.1s cubic-bezier(0.85, 0, 0.15, 1);
   z-index: 120;
   padding: 3% 6.5%;
}

.design-overlay.active,
.module-overlay.active {
   right: 0;
}

.design-close,
.module-close {
   position: absolute;
   top: 0;
   left: -70px;
   width: 70px;
   height: 70px;
   background-color: var(--vigreen);
   color: white;
   text-align: center;
   line-height: 70px;
   cursor: pointer;
}

.icon-guanbi {
   font-size: 36px;
}

.module-overlay .product-grid {
   padding: 8% 0 0 0;
}

/*设计指南*/
.tabs-container {
   width: 100%;
   overflow: hidden;
}

.tabs-header {
   display: flex;
   flex-wrap: wrap;
   margin-top: 50px;
}

.tab-btn {
   padding: 10px 30px;
   margin-right: 20px;
   background: transparent;
   border: none;
   cursor: pointer;
   font-size: 14px;
   color: var(--text-green);
   position: relative;
   transition: all 0.3s ease;
   border-radius: 52px;
}

.tab-btn:hover {
   color: var(--text-lightyellow);
   background: var(--vigreen);
   border-radius: 52px;
}

.tab-btn.active {
   color: var(--text-lightyellow);
   border-radius: 52px;
   background-color: var(--vigreen);

}

.tabs-content {
   padding: 40px 0;
}

.tab-pane {
   display: none;
}

.tab-pane.active {
   display: block;
}

.tabs-content .swiper {
   height: 60vh;
}

.tabs-content .swiper img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: top;
}

.swiper-pagination-bullet {
   background: var(--text-yellow) !important;
   ;
   opacity: 0.8;
}

.swiper-pagination-bullet-active {
   background: var(--text-yellow) !important;
   ;
}

/*空间应用方案*/
.gallery .ptitle {
   text-align: center;
}

.gallery .render-box {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}

.render-box .render1 {
   width: 80%;
   margin: 80px auto 100px;
   cursor: pointer;
}

.render-box .render2 {
   width: 40%;
   margin-bottom: 100px;
   cursor: pointer;
}

.render-box .render3 {
   width: 50%;
   margin-bottom: 100px;
   cursor: pointer;
}

.render-box p {
   font-size: clamp(13px, 1.2vw, 16px);
   margin-top: 12px;
}


/*系列精选*/

.recommend .list-item {
   position: relative;
   display: block;
   overflow: hidden;
   cursor: pointer;
}

.recommend .list-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: scale 1s;
}

.recommend .list-item .cover {
   width: 100%;
   position: relative;
}

.recommend .list-item:hover .cover img {
   scale: 1.2;
}

.recommend .list-title {
   position: relative;
   color: white;
}

.recommend .list-title .left {
   position: absolute;
   left: 16px;
   bottom: 14px;
   font-size: clamp(13px, 1vw, 15px);
   line-height: 1.3;
}

.recommend .list-title .left .enname {
   font-size: clamp(16px, 1.5vw, 22px);
}

.recommend .list-title .right {
   position: absolute;
   right: 16px;
   bottom: 14px;
   font-size: clamp(12px, 1vw, 12px);
   line-height: 1.3;
}

/*.recommend .list-title .left p {
   opacity: 0;
   transform: translateX(-40px);
   transition: opacity 0.6s ease, transform 0.6s ease;
}

.recommend .list-title .left p:nth-child(1) {
   transition-delay: 0.1s;
}

.recommend .list-title .left p:nth-child(2) {
   transition-delay: 0.15s;
}

.recommend .list-title .left p:nth-child(3) {
   transition-delay: 0.2s;
}*/

.recommend .list-title .left p:nth-child(3) {
      height: 18px;
   overflow: hidden;
}

.recommend .list-title .right {
   opacity: 0;
   transition: opacity 0.5s ease;
}

.recommend .list-item:hover .left p {
   opacity: 1;
   transform: translateX(0);
}

.recommend .list-item:hover .right {
   opacity: 1;
}

.icon-youjiantou {
   font-size: 10px;
   margin-left: 3px;
}


/* 响应式布局 */
@media (max-width: 1366px) {
   .recommend .list-title .left p {
      opacity: 1;
      transform: translateX(0px);

   }

   .recommend .list-title .right {
      opacity: 0;
      transform: translateX(0px);
   }
}
@media (min-width: 768px) and (max-width: 1365px) {
	.product-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding: 100px 0px 0px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
.param {
      flex-direction: column;
   }

   .paramlist {
      width: 100%;
      padding: 40px 0 50px 0;
   }

   .param .left,
   .parambtn .left {
      width: 100%;
      max-width: 100%;
   }

   .param .right,
   .parambtn .right {
      width: 100%;
	  max-width: 100%;
   }
   .param .right2,
   .parambtn .right2 {
	   width: 100%;
	   height:auto;
	   overflow-y: visible;
   }
}
@media (max-width: 767px) {

   .toptitle {
      width: 90%;
      margin: 90px auto 20px;
      text-align: center;
   }

   .prodname {
      font-size: 0.6rem;
   }

   .insidebanner {
      width: 100% !important;
      margin-top: 0.5rem;
   }

   section {
      padding: 1.2rem 5%;
   }

   .inspiration {
      flex-direction: column;
   }

   .inspiration .text {
      width: 100%;
      font-size: clamp(14px, 1vw, 16px);
      line-height: 1.6;
      text-align: justify;
      margin-top: 0.7rem;
   }

   /*产品参数*/
   .param {
      flex-direction: column;
   }

   .paramlist {
      width: 100%;
      padding: 40px 0 50px 0;
   }

   .param .left,
   .parambtn .left {
      width: 100%;
      max-width: 430px;
   }

   .param .right,
   .parambtn .right {
      width: 100%;
   }
   
   .param .right2,
   .parambtn .right2 {
	   width: 100%;
	   height:auto;
	   overflow-y: visible;
   }

   .param .playbtn {
      font-size: 0.26rem;
   }

   .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      padding: 0;
   }

   .parambtn {
      margin-top: 1rem;
   }

   .viewall-btn {
      display: block;
      width: 2.3rem;
      height: 45px;
      font-size: 0.26rem;

   }

   .mgright {
      margin-right: 0.1rem;

   }

   .mgcenter {
      display: block;
      width: 150px;
      height: 45px;
      line-height: 45px;
      border-radius: 52px;
      background-color: var(--vigreen);
      color: #eeeae1;
      font-size: 16px;
      margin-top: 2.5rem;
   }


   .render-box .render1 {
      width: 100%;
      margin: 1rem auto 0;
      cursor: pointer;
   }

   .render-box .render2 {
      width: 100%;
      margin: 1rem auto 0;
      cursor: pointer;
   }

   .render-box .render3 {
      width: 100%;
      margin: 0.9rem auto 0;
      cursor: pointer;
   }

   .recommend {
      padding-top: 0;
   }

   .design-overlay,
   .module-overlay {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 1200px;
      height: 100%;
      background-color: white;
      transition: right 1.1s cubic-bezier(0.85, 0, 0.15, 1);
      z-index: 120;
      padding: 15% 5% 5%;
      overflow-y: auto;
      overflow-x: visible;
   }

   .design-overlay.active,
   .module-overlay.active {
      right: 0;
   }

   .design-close,
   .module-close {
      position: absolute;
      top: 0;
      left: 0;
      width: 34px;
      height: 34px;
      background-color: var(--vigreen);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
   }

   .icon-guanbi {
      font-size: 20px;
   }






   /*模块名称*/
   .ptitle {
      margin-bottom: 0.4rem;
   }

   .ptitle .enname {
      font-size: 0.5rem;
      text-transform: uppercase;
   }

   .ptitle .cnname {
      font-size: 0.26rem;
      margin-top: 3px;
   }


   .recommend .list-title .left {
      left: 15px;
      bottom: 10px;

   }

   .recommend .list-title .left .enname {
      font-size: 0.3rem;
   }

   .recommend .list-item:hover .right {
      opacity: 0;
   }

   .recommend .list-item:hover .cover img {
      scale: 1;
   }



}