@import "init.css";

body {
   background-color: #fff;

}

.lg-object.lg-image{
   image-rendering: pixelated;
}

.container {
   width: 80%;
   max-width: 1522px;
   margin: 0 auto;
   margin-bottom: 114px;
   color: #151515;
}

/*面包屑*/
.breadcrumb {
   border-bottom: 1.5px #aaa solid;
}

.breadcrumb-item a:hover {
   text-decoration: underline;
}

.breadcrumb-item.on {
   color: #000;
}

/*产品轮播图*/
.swiper-container {
   width: 80%;
   height: 730px;
   margin: 56px auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.swiper-thumbnail {
   width: 8.5%;
   min-width: 130px;
   height: 75.3%;
   margin: 0 !important;
   position: relative;
}

.swiper-pagination {
   width: 8.5% !important;
   min-width: 130px !important;
   height: 30px !important;
   top: 8% !important;
   text-align: center;
   font-size: 14px;
   color: #151515;
}

.swiper-thumbnail .swiper-slide {
   width: 100%;
   height: 100%;
   max-width: 130px;
   max-height: 130px !important;
   overflow: hidden;
   cursor: pointer;
   border: 1px solid #c2c2c2;
   padding: 2px;
   border-radius: 10px;
   transition: border-color 0.3s;
}

.swiper-thumbnail .swiper-slide.swiper-slide-thumb-active {
   border-color: #151515;
}

.swiper-thumbnail .swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.swiper-main {
   position: relative;
   width: 80%;
   margin-left: 10% !important;
}

.swiper-imgtitle {
   position: absolute;
   right: 0;
   top: 0;
   font-size: 14px;
   z-index: 10;
   color: #151515;
}

.swiper-main .swiper-slide img {
   width: 100%;
   height: 100%;
   max-height: 730px;
   object-fit: contain;
}

.myswiper-prevbutton {
   width: 43px !important;
   height: 83px !important;
   left: 0px !important;
   top: 45% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background-image: url("../images/prevbtnblack.png");
}

.myswiper-nextbutton {
   width: 43px !important;
   height: 83px !important;
   right: 0px !important;
   top: 45% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background-image: url("../images/nextbtnblack.png");
}


/*产品标题*/
.bigtitle {
   width: 100%;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid #888;
   border-bottom: 1px solid #888;
   padding: 0 1%;
   font-weight: 500;
}

.bigtitle .text1 {
   font-size: 53px;
   font-weight: 500;
   font-family: "enMedium", "Noto Sans SC";
}

.bigtitle .text2 {
   font-size: 20px;
}

.pdesc {
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   border-bottom: 1px solid #888;
   padding: 20px 1%;
   font-family: "enMedium", "Noto Sans SC";
}

.pdesc .text1 {
   font-size: 20px;
   font-weight: 500;
}

.pdesc .text2 {
   font-size: 18px;
   width: 50%;
   line-height: 1.4;
}

/*产品参数*/
.tabs {
   width: 50%;
   margin-left: 50%;
   margin-top: 30px;
}

.tab-buttons {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   border-bottom: 1px solid #bbb;
   position: relative;
}

.tab-button {
   padding: 10px 40px 19px 0px;
   cursor: pointer;
   margin-right: 15px;
   font-size: 20px;
   font-weight: 500;
   color: #948885;
   position: relative;
}

.tab-button.active {
   color: #151515;
   position: relative;
   transition: all 0.3s;
}

/* 添加下划线 div，用于动态更新 */
.tab-buttons .underline {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
   background-color: #bcb09d;
   width: 0%;
   transition: left 0.3s ease, width 0.3s ease;
}

.tab-content {
   width: 100%;
   font-weight: 500;
   font-family: "enMedium", "Noto Sans SC";
}

.tab-pane {
   display: none;
}


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

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


.tab-pane ul li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 33px;
   border-bottom: 1px solid #bbb;
   font-size: 14px;
   line-height: 1.4;
   padding: 5px 0;
}

.tab-pane ul li span:nth-child(2) {
      width: 55%;
      word-wrap: break-word;
      text-align: right;
   }

.tab-pane img {
   width: 100%;
   height: auto;
}

.psize {
   width: 50%;
   margin-top: 60px;
   margin-left: 50%;
   cursor: pointer;
}

.swiper3 {
   margin-top: 20px;
}

.image-container {
   width: 100%;
   height: 300px;
   overflow: hidden;
   position: relative;
   margin-top: 60px;
}

.image-container img {
   width: auto;
   max-height: 100%;
   object-fit: contain;
   display: block;
   margin: 0 auto;
}

.image-container2 {
   width: 100%;
   height: auto;
   overflow: hidden;
   position: relative;
   margin-top: 65px;
}

.image-container2 img {
   width: 100%;
   max-width: 761px;
   height: auto;
   object-fit: contain;
   display: block;
   margin: 0 auto;
}

.sketch-map {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    font-weight: 500;
    margin-bottom: 100px;
}

.icon-sanjiaoxing {
   font-size: 12px!important;
   margin-right: 5px;
}

.sketch-map-title {
    width: 100%;
    padding: 10px 0 19px 0;
    margin-top: 30px;
    font-size: 20px;
    border-bottom: 1px solid #bbb;
    font-weight: 500;
}

.sketch-item {
    padding: 30px 0;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #bbb;
}

    .sketch-item:nth-child(odd) {
        border-right: 1px solid #bbb;
    }

    .sketch-item:nth-child(even) {
        padding-left: 8%;
    }

    .sketch-item:last-child, .sketch-item:nth-last-child(2) {
        border-bottom: 0px;
    }

.maptext {
    width: 30%;
    height: 440px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    font-family: "enMedium", "Noto Sans SC";
    font-size: 11px;
    margin-right: 10%;
}

.maptext p{
    line-height: 1.5;
}

.mappic {
    width: 60%;
    height: 440px;
    display: flex;
    align-items: center;
}

    .mappic img {
        width: 100%;
        max-height: 100%;
        object-fit: scale-down;
        display: block;
        margin: 0 auto;
    }

.maptext2 {
    width: 26%;
    height: 440px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    font-family: "enMedium", "Noto Sans SC";
    font-size: 11px;
    margin-right: 9%;
}

.maptext2 p{
    line-height: 1.5;
}

.designpic .swiper-zoom-container{
   aspect-ratio: 1522 / 873;
   cursor: pointer;
}

/*视频*/
.swiper3 .swiper-slide img {
   width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 10px;
}

.list-item {
   position: relative;
   overflow: hidden;
   display: block;
   text-decoration: none;
   padding-top: 5px;
   cursor: pointer;
}

.list-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(80%);
   /* 图片变暗10% */
   transition: all 0.5s;
}

.list-item:hover img {
   filter: brightness(100%);
   /* 悬停时恢复正常亮度 */
   scale: 1.1;
}

.cover {
   position: relative;
   aspect-ratio: 1.6;
   overflow: hidden;
   border-radius: 10px;
   margin-bottom: 24px;
}

.cover .icon-bofanganniu {
   position: absolute;
   font-size: 50px;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

}

.view-more {
   display: flex;
   align-items: center;
   cursor: pointer;
   justify-content: space-between;
}

.view-more .view-text {
   font-size: 16px;
   color: #151515;
}

.view-more .view-text2 {
   font-size: 14px;
   color: #948885;
   text-decoration: underline;
}

/*效果图swiper*/
.design {
   width: 100%;
   position: relative;
   margin-top: 120px;
}

.thumbnail-container {
   width: 100%;
   max-height: 99px;
   margin-top: 28px;
   display: flex;
   justify-content: space-between;
   position: relative;
   margin-bottom: 120px;
}

.design-thumbnail {
   width: 50%;
   margin-left: 40% !important;
   max-height: 95px;
}

/*.design-thumbnail .swiper-wrapper {
   justify-content: flex-end;
}*/

.design-thumbnail .swiper-slide {
   cursor: pointer;
}

.design-thumbnail .swiper-slide img{
   object-fit: cover;
   width: 100%;
   aspect-ratio: 1.55;
}

.swiper-pagination1 {
   width: 10% !important;
   font-size: 14px;
}

.myswiper-prevbutton2 {
   width: 43px !important;
   height: 83px !important;
   left: 2% !important;
   top: 45% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background-image: url("../images/prevbtnblack.png");
}

.myswiper-nextbutton2 {
   width: 43px !important;
   height: 83px !important;
   right: 2% !important;
   top: 45% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background-image: url("../images/nextbtnblack.png");
}

/*资料下载*/
.download-list {
   width: 100%;
}

.download-list ul {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   column-gap: 10%;
   grid-template-rows: auto;
   align-items: stretch;
}

.download-list ul li {
   text-align: center;
}

.download-list .icon-download {
   font-size: 19px;
}

.pdftitle {
   font-size: 14px;
   color: #000;
   padding: 23px 0;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   /* 限制显示2行 */
   overflow: hidden;
   text-overflow: ellipsis;
}


/*相关产品*/
.more {
   width: 100%;
   padding: 110px 18% 149px;
   border-top: 1px #bbb solid;
}

.moretitle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.moretitle .text1 {
   font-size: 40px;
   color: #151515;
   font-weight: 500;
}

.swiperbtn {
   position: relative;
   width: 86px;
   height: 36px;
}

.brandswiper-prevbutton {
   width: 36px !important;
   height: 36px !important;
   left: 0px !important;
   top: 0% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background-image: url("../images/prev-blacks.png");
}

.brandswiper-nextbutton {
   width: 36px !important;
   height: 36px !important;
   right: 0 !important;
   top: 0% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background-image: url("../images/next-blacks.png");
}

.swiper-slide:hover .name {
   text-decoration: underline;

}

.slide-content img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all 0.5s;
}

.slide-content:hover img {
   scale: 1.1;
}

.morecover {
   aspect-ratio: 1 / 1;
   overflow: hidden;
   margin-top: 10px;
}

.text-panel {
   margin-top: 30px;
}

.text-panel .more {
   display: flex;
   justify-content: space-between;
   margin-top: 3px;
}

.text-panel .text1 {
   color: #151515;
   font-size: clamp(16px, 1.5vw, 18px);
   font-family: "enMedium", "Noto Sans SC";
}

.text-panel .text2 {
   font-size: clamp(12px, 1vw, 14px);
   max-width: 75%;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   margin-top: 12px;
}


/* 响应式布局 */
@media (max-width: 1024px) {
	.sketch-map {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    font-weight: 500;
    margin-bottom: 0;
	}
	.sketch-item:nth-child(odd) {
            border-right: 0px;
        }

        .sketch-item:nth-child(even) {
            padding-left: 0;
        }

        .sketch-item:last-child {
            border-bottom: 0px;
        }

        .sketch-item:nth-last-child(2) {
            border-bottom: 1px solid #bbb;
        }
}


@media (max-width: 960px) {
   .swiper-container {
      width: 87.2%;
      height: 9.6rem;
      margin: 0.78rem auto 0.66rem;
      display: flex;
      flex-direction: column-reverse;
      padding-bottom: 0.8rem;
   }

   .swiper-main {
      width: 100%;
      padding-bottom: 15px !important;
      margin-left: 0px !important;
   }

   .swiper-imgtitle {
      position: absolute;
      right: 50%;
      top: auto;
      bottom: 0;
      font-size: 0.21rem;
      z-index: 10;
      transform: translateX(50%);
   }

   .swiper-thumbnail {
      width: 100%;
      min-width: 100%;
      height: 1.52rem;
      margin: 0 !important;
      position: relative;
   }

   .swiper-pagination {
      width: 8.5% !important;
      min-width: 130px !important;
      height: 30px !important;
      top: auto !important;
      bottom: 0 !important;
      text-align: left !important;
      font-size: 0.21rem;
   }

   .myswiper-prevbutton {
      width: 0.4rem !important;
      height: 0.78rem !important;
      left: 0px !important;
      top: 45% !important;
      color: white !important;
      position: absolute;
      margin-top: 0 !important;
      z-index: 20;
      cursor: pointer;
      background-image: url("../images/prevbtnblack.png");
      background-size: contain;
   }

   .myswiper-nextbutton {
      width: 0.4rem !important;
      height: 0.78rem !important;
      right: 0px !important;
      top: 45% !important;
      color: white !important;
      position: absolute;
      margin-top: 0 !important;
      z-index: 20;
      cursor: pointer;
      background-image: url("../images/nextbtnblack.png");
      background-size: contain;
   }

   .container {
      width: 87.4%;
      max-width: 87.4%;
      margin-bottom: 1.1rem;
   }

   .bigtitle {
      width: 100%;
      height: 2.15rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 1%;
      font-weight: 500;
      padding: 0.36rem 0 0.24rem;
   }

   .bigtitle .text1 {
      font-size: 0.7rem;
   }

   .bigtitle .text2 {
      font-size: 0.33rem;
   }

   .pdesc {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1px solid #888;
      padding: 20px 0%;
      font-family: "enMedium", "Noto Sans SC";
   }

   .pdesc .text1 {
      font-size: 0.33rem;
      margin: 1.22rem 0 0.58rem;
   }

   .pdesc .text2 {
      font-size: 0.25rem;
      width: 100%;
      line-height: 1.4;
      text-align: justify;
   }

   .tabs {
      width: 100%;
      margin-left: 0;
      margin-top: 1.22rem;
   }

   .psize {
      width: 100%;
      margin-left: 0;
      margin-top: 1.22rem;
   }

   .tab-button {
      padding: 10px 20px 19px 0px;
      cursor: pointer;
      margin-right: 15px;
      font-size: 0.33rem;
      font-weight: 500;
      color: #948885;
      position: relative;
   }

   .tab-buttons .underline {
      height: 2px;
   }

   .font12 {
      font-size: 0.22rem !important;
   }

   .tab-pane ul li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 33px;
      border-bottom: 1px solid #bbb;
      font-size: 0.25rem;
      line-height: 1.3;
      padding: 6px 0;
   }

   .tab-pane ul li span:nth-child(2) {
      width: 55%;
      word-wrap: break-word;
      text-align: right;
   }

    .sketch-map-title {
        margin-top: 1.22rem;
        font-size: 0.33rem;
    }

    .sketch-map {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        font-weight: 500;
        margin-bottom: 0;
    }

    .sketch-item {
        padding: 30px 0;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid #bbb;
    }

        .sketch-item:nth-child(odd) {
            border-right: 0px;
        }

        .sketch-item:nth-child(even) {
            padding-left: 0;
        }

        .sketch-item:last-child {
            border-bottom: 0px;
        }

        .sketch-item:nth-last-child(2) {
            border-bottom: 1px solid #bbb;
        }

    .mappic {
        width: 100%;
        height: 6.8rem;
        display: flex;
        align-items: center;
        margin-top: 0.5rem;
    }

    .maptext {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        font-family: "enMedium", "Noto Sans SC";
        font-size: 0.25rem;
        gap: 0.53rem;
        line-height: 1.3;
    }

    .maptext2 {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        font-family: "enMedium", "Noto Sans SC";
        font-size: 0.25rem;
        margin-right: 0;
        gap: 0.53rem;
        line-height: 1.3;
    }

   .view-more .view-text {
      font-size: 0.29rem;
   }

   .view-more .view-text2 {
      font-size: 0.21rem;
   }

   .design {
      width: 100%;
      position: relative;
      margin-top: 1.18rem;
   }

   .design-thumbnail {
      width: 100%;
      margin-left: 0 !important;
      height: 1rem;
   }

   .swiper-pagination1 {
      width: 10% !important;
      font-size: 0.21rem;
      position: absolute;
      bottom: 0;
      left: 0;
   }

   .thumbnail-container {
      width: 100%;
      height: 1.6rem;
      margin-top: 0.3rem;
      margin-bottom: 1.22rem;
      display: flex;
      justify-content: space-between;
      position: relative;
   }

   .designpic .swiper-zoom-container{
      height: 3.75rem;
   }


   .myswiper-prevbutton2 {
      width: 0.4rem !important;
      height: 0.78rem !important;
      left: 2% !important;
      top: 45% !important;
      color: white !important;
      position: absolute;
      margin-top: 0 !important;
      z-index: 20;
      cursor: pointer;
      background-size: contain;
   }

   .myswiper-nextbutton2 {
      width: 0.4rem !important;
      height: 0.78rem !important;
      right: 2% !important;
      top: 45% !important;
      color: white !important;
      position: absolute;
      margin-top: 0 !important;
      z-index: 20;
      cursor: pointer;
      background-size: contain;
   }

   .download-list ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: 0.54rem;
      grid-template-rows: auto;
      align-items: stretch;
      padding-top: 0.4rem;
   }

   .download-list ul li {
      font-size: 19px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 4px;
   }

   .download-list ul li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .pdftitle {
      font-size: 0.25rem;
      height: 0.25rem;
      color: #000;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 80%;
      display: inline-block;
      line-height: 0.25rem;
      text-align: left;
   }

   .download-list .icon-download {
      font-size: 0.3rem;
   }

   .more {
      padding: 1.1rem 6.4% 1.7rem;
   }

   .moretitle {
      margin-bottom: 0;
   }

   .moretitle .text1 {
      font-size: 0.42rem;
   }

   .swiperbtn {
      width: 62px;
   }

   .brandswiper-prevbutton {
      width: 0.52rem !important;
      height: 0.52rem !important;
      left: 0px !important;
      top: 0% !important;
      color: white !important;
      position: absolute;
      margin-top: 0 !important;
      z-index: 20;
      cursor: pointer;
      background: url("../images/prev-blacks.png") no-repeat;
      background-size: contain;
   }

   .brandswiper-nextbutton {
      width: 0.52rem !important;
      height: 0.52rem !important;
      right: 0 !important;
      top: 0% !important;
      color: white !important;
      position: absolute;
      margin-top: 0 !important;
      z-index: 20;
      cursor: pointer;
      background: url("../images/next-blacks.png") no-repeat;
      background-size: contain;
   }

   .text-panel {
      margin-top: 0.35rem;
   }

   .text-panel .text1 {
      color: #151515;
      font-size: 0.29rem;
   }

   .text-panel .text2 {
      font-size: 0.23rem;
      max-width: 75%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top: 12px;
   }
}