.l-text{color: var(--highlight-color);}
.btn-wrapper{padding: 10px;background-color: var(--highlight-color);display: flex;gap: 20px;}
.btn-toggle{width: 20px;height: 20px;cursor: pointer;}
.btn-toggle.prev{background: no-repeat center/contain url('/uiFramework/commonResource/image/2025121418414215072.png');}
.btn-toggle.next{background: no-repeat center/contain url('/uiFramework/commonResource/image/2025121418413845907.png');}
.underline{border-bottom: 1px solid #d9d9d9;padding: 16px 0 17px;}
/* banner */
.banner-wrapper{position: relative;}
.banner-wrapper>img{width: 100%;max-height: 600px;}

/* references 轮播*/
.references_con{overflow: hidden;padding: 20px 0;}
.references_con a{width: 100%;}
.references_con .swiper-slide{background-color: #fff;box-shadow: rgba(23, 23, 23, 0.08) 0px 3px 4px 0px;}
.references_con .references_img {width: 100%;height: 200px;}
.references_con .references_img img{width: 100%;height: 100%;object-fit: cover;}
.references_con .references-btn{z-index: 5;}

/* detail */
.detail-legend .align-items-center{align-items: center !important;}
.detail-legend .paragraph-thicker-size{font-size: 21px;font-weight: 300;line-height: 32px;margin-bottom: 42px;}

/* product */
.product .heading-margin-bottom{text-align: center;margin-bottom: 80px;font-size: 48px;font-weight: 800;text-transform: uppercase;}
.product .tabs-wrap{margin: 0 auto;margin-bottom: 32px;text-align: center;}
.product .nav{position: relative;display: inline-block;}
.product .nav:after{content: "";position: absolute;bottom: 1px;height: 1px;width: 100%;background-color: #d9d9d9;display: block;}
.product ul>li{display: inline-block;position: relative;color: #181818;font-size: 16px;font-weight: 600;text-transform: uppercase;line-height: 1;letter-spacing: 1px;padding: 5px 0 10px;margin-right: 32px;cursor: pointer;transition: all .2s ease-out;}
.product ul>li:hover{color: var(--highlight-color);}
.product ul>li:last-child{margin-right: 0;}
.product ul>li.active:after{content: "";display: block;background-color: var(--highlight-color);position: absolute;bottom: 0;width: 100%;height: 3px;z-index: 1;}
.product .select-wrap select{width: 100%;height: 40px;color: var(--highlight-color);margin: 10px 0;border: 1px solid var(--highlight-color);padding: 0 10px;font-size: 16px;background-color: #fff;text-transform: uppercase;}
.product .product-blocks-item a{width: 100%;height: 100%;}
.product .product-blocks-item img{width: 100%;height: 100%;}
.product .product-blocks-item .product-title{font-size: 16px;font-weight: 600;line-height: 24px;margin: 24px 0 12px;}
.product .product-blocks-item p{font-size: 14px;line-height:20px;margin-bottom: 8px;}

/* quick-links-blocks */
.quick-links-blocks .background{width: 100%;margin: 80px auto 0;overflow: hidden;position: relative;}
.quick-links-blocks .background img{width: 100%;height: 100%;object-fit: cover;}
.quick-links-blocks .background .items h1{font-size: 30px;font-weight: 800;margin-bottom: 15px;text-transform: uppercase;color: #fff;}
.quick-links-blocks .background .items ul li{margin-bottom: 10px;line-height: 21px;color: #fff;font-size: 24px;}
.quick-links-blocks .background .items ul li a{position: relative; padding-left: 15px;}
.quick-links-blocks .background .link::before{color: #fff !important;}


/* functional-principle */
.functional-principle-box .txImagemapsFrontView{position: relative;}
.functional-principle-box .txImagemapsFrontView .bg-img{width: 100%;height: auto;}
.functional-principle-box .txImagemapsFrontView .image-map-wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.functional-principle-box .txImagemapsFrontView .marker-wrapper{position: absolute;}
.functional-principle-box .txImagemapsFrontView p{margin: 0;}
.functional-principle-box .imageMapsMobileView{display: none;}
.functional-principle-box.mobile-map .imageMapsMobileView{display: block;}
.functional-principle-box:not(.mobile-map) .marker-point{display: flex;border: 2px solid var(--highlight-color);padding: 0 8px;border-radius: 8px;}
.functional-principle-box:not(.mobile-map) .marker-point::before{background-color: transparent;content: "+";color: var(--highlight-color);font-size: 24px;transition: all 0.3s ease-out;font-family: Arial, sans-serif;}
.functional-principle-box:not(.mobile-map) .marker-point .marker-index{display: none;}
.functional-principle-box:not(.mobile-map) .marker-teaser{width: 0px;height: auto;max-height: 0px;margin-left: 0px;opacity: 0;transition: margin-left 0.4s ease,max-height 0.4s ease,width 0.4s ease,opacity 0.3s ease;}
.functional-principle-box:not(.mobile-map) .marker-teaser .marker-teaser-header{margin: 0 0 6px 0;font-size: 15px;font-weight: 800;text-transform: uppercase;}
.functional-principle-box:not(.mobile-map) .marker-wrapper{background-color: rgba(255, 255, 255, 0.8);box-shadow:2px 6px 15px 0 rgba(0, 0, 0, .102);display: flex;align-items: flex-start;padding: 5px;border: 2px solid #fff;border-radius: 12px;backdrop-filter: blur(2px);z-index: 1;overflow: hidden;}
.functional-principle-box:not(.mobile-map) .marker-wrapper.hovered-marker{z-index: 33;}
.functional-principle-box:not(.mobile-map) .marker-wrapper.hovered-marker .marker-teaser{margin-left: 16px;max-height: 320px;overflow-x: hidden;overflow-y: auto;width: 200px;opacity: 1;transition: margin-left 0.8s ease,max-height 0.8s ease,width 0.8s ease,opacity 1s ease;}
.functional-principle-box:not(.mobile-map) .marker-wrapper.hovered-marker .marker-point::before{transform: rotate(45deg);}
.functional-principle-box:not(.mobile-map) .marker-wrapper.left{left: auto !important;right: calc(100% - var(--left));}
.functional-principle-box:not(.mobile-map) .marker-wrapper.left .marker-teaser{order: -1;margin-left: 0;margin-right: 0;transition:margin-right 0.4s ease,max-height 0.4s ease,width 0.4s ease,opacity 0.3s ease;}
.functional-principle-box:not(.mobile-map) .marker-wrapper.left.hovered-marker .marker-teaser{margin-left: 0;margin-right: 16px;transition:margin-right 0.8s ease,max-height 0.8s ease,width 0.8s ease,opacity 1s ease;}
.functional-principle-box.mobile-map .marker-point{width: 20px;height: 20px;font-size: 12px;display: flex;align-items: center;justify-content: center;background-color: var(--highlight-color);border: 1px solid #fff;border-radius: 50%;color: #fff;cursor: pointer;}
.functional-principle-box.mobile-map .marker-point p{color:inherit}
.functional-principle-box.mobile-map .marker-teaser{display: none;}


/* banner-scroll */
.banner-scroll .bgImg{width: 100%;height: 100%;object-fit: cover;}
.banner-scroll table{width: 100%;}
.banner-scroll tbody tr{border-top: 1px solid #d6d2d2;}
.banner-scroll tbody tr:last-child{border-bottom: 1px solid #d6d2d2;}
.banner-scroll tbody td{font-size: 16px;padding: 16px;}


/*product  flex-wrapper */
.product.flex-wrapper * {min-width: 0;}
.product.flex-wrapper .list-item a{width: 100%;height: 100%;}
.product.flex-wrapper .list-icon img{width: 100%;height: 100%;object-fit: contain;}
.product.flex-wrapper .list-info .list-info-desc p{font-size: 12px;}
.product.flex-wrapper .list-info .list-info-desc{display: flex;justify-content: space-between;}
.product.flex-wrapper.other .list-icon img{object-fit: cover;}


/*手机端768px*/
@media only screen and (min-width: 100px) and (max-width: 768px) {
/* banner */
.banner-wrapper .banner-wrapper-info h2{font-size: 36px;padding: 20px 15px;}

/* references 轮播*/
.references_con .swiper-slide{width: 80% !important;}
.references_con .references-btn{position: absolute;top: 14%;right: 12%;display: flex;flex-direction: column;}

/* product */
.product .heading-margin-bottom{font-size: 28px;margin-bottom: 56px;}
.product .tabs-wrap{display: none;}
.product .select-wrap{display: block;}
.product .product-blocks-wrapper{margin: 80px 0;padding: 0 15px;}
.product .product-blocks-item{border-top: 1px solid #d9d9d9;}
.product .product-blocks-item:last-child{border-bottom: 1px solid #d9d9d9;}
.product .product-blocks-item>a{display: flex;align-items: center;position: relative;}
.product .product-blocks-item .product-img{width: 95px;height: 77px;margin: 8px 0;}
.product .product-blocks-item>a p{margin: 0 !important;}
.product .product-blocks-item>a p:not(.product-title){display: none;}
.product .product-blocks-item>a:after{content: ">";display: inline-block;color: var(--highlight-color);font-size: 16px;font-weight: 600;line-height: 1;position: absolute;right: 0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.product .product-blocks-item .product-title{padding: 0 26px 0 16px;flex: 1;}

/* quick-links-teaser */
.quick-links-blocks .background .original-background{display: none;}
.quick-links-blocks .background .heading-block{display: none;}
.quick-links-blocks .background .block{position: relative;height: 220px;}
.quick-links-blocks .background .block-background,.quick-links-blocks .background .block-content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.quick-links-blocks .background .block-content{z-index: 10;padding: 20px;display: flex;flex-direction: column;justify-content: center;}
.quick-links-blocks .background .items{color: #fff;}
.quick-links-blocks .background .items .item ul{display: none;}


/* banner-scroll */
.banner-scroll .banner-scroll-position-box .left_scroll{order: 1;background-color: #ececec;}

/*product  flex-wrapper */
.product.flex-wrapper {gap:0;}
.product.flex-wrapper .list-item {border-bottom: 1px solid #d9d9d9;border-top: 1px solid #d9d9d9;}
.product.flex-wrapper .list-item a{display:flex;gap:10px;align-items: center;padding:10px  0;padding-right:30px;}
.product.flex-wrapper .list-item a::after{content: '>';color: var(--highlight-color);display: inline-block;font-size: 16px;font-weight: 600;font-family: monospace;line-height: 1;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.product.flex-wrapper .list-info{flex:1;}
.product.flex-wrapper p{font-size: 16px;margin:0;word-break: break-all;}
.product.flex-wrapper .list-item .list-icon{width: 100px;height: 100px;flex-shrink: 0;}

}

@media (min-width: 768px) {
/* banner */
.banner-wrapper .banner-wrapper-info{width: 50%;position: absolute;left: 15%;top: 50%;transform: translateY(-50%);}
.banner-wrapper .banner-wrapper-info h2{color: #fff;}

/* references 轮播*/
.references_con .swiper-slide{width: 273px !important;}
.references_con .references-btn{float: right;display: flex;margin: 0 10px 10px 0;}

/* product */
.product .heading-margin-bottom>span{display: inline-block;width: 80%;}
.product .tabs-wrap{display: block;}
.product .select-wrap{display: none;}
.product .product-blocks-wrapper{display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 120px;}
.product .product-blocks-item {width: calc((100% - 80px) / 5);min-width: 0;}
.product .product-blocks-item .product-img{width: 100%;height: 170px;overflow: hidden;}

/* .product .product-blocks-item:nth-child(-n+3) {width: calc((100% - 80px) / 3);} */

/* quick-links-teaser */
.quick-links-blocks .background{min-height: 600px;margin: 80px auto 0;overflow: hidden;position: relative;}
.quick-links-blocks .background .comwidth{position: static;}
.quick-links-blocks .background .content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.quick-links-blocks .background .block{float: left;width: 33.3%;height: 100%;display:grid;place-items: center;}
.quick-links-blocks .background .block-background{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;visibility: hidden;transition: all 1s ease-out;}
.quick-links-blocks .background .block-content{position: relative;width: 100%;height: 50%;z-index: 10;}
.quick-links-blocks .background .block-content::before{content: "";width: 100%;height: 200%;position: absolute;top: -50%;left: 0;border-left: 2px solid hsla(0, 0%, 100%, .3);pointer-events: none;}
.quick-links-blocks .background .block:last-child .block-content::before{border-right: 2px solid hsla(0, 0%, 100%, .3);}
.quick-links-blocks .background .block-content:hover + .block-background{opacity: 1;visibility: visible;-webkit-transform: scale(1.1);transform: scale(1.1);}
.quick-links-blocks .background .heading-block,.quick-links-blocks .background .items{position: absolute;left: 30px;right: 0;top: 50%;transform: translateY(-50%);font-size: 36px;line-height: 1;color: #fff;word-break: break-word;}
.quick-links-blocks .background .btn-collapse::after{color: #fff;border: 2px solid #fff;margin-top: 20px;}
.quick-links-blocks .background .items{visibility: hidden;}
.quick-links-blocks .background .items .item{margin-bottom: 32px;}
.quick-links-blocks .background .block-content:hover .heading-block{visibility: hidden;}
.quick-links-blocks .background .block-content:hover::before{background-color: hsla(0, 0%, 9%, .5);}
.quick-links-blocks .background .block-content:hover .items{visibility: visible;}

/* banner-scroll */
.banner-scroll{position: relative;height: calc(100vh - 165px);overflow: hidden; background: linear-gradient(to top, rgb(232 232 232 / 70%) 0%, rgb(232 232 232 / 1%) 20%,transparent);}
.banner-scroll .banner-scroll-position-box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 23;overflow: hidden;}
.banner-scroll .banner-scroll-position-box .left_scroll{overflow-x: hidden;overflow-y: scroll;-ms-overflow-style: none;scrollbar-width: none;}
.banner-scroll .banner-scroll-content{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.banner-scroll .left_scroll{width: 100%;padding-right: calc(40% + 10px);z-index: 2;}
.banner-scroll .right_img{width: 40%;height: 100%;padding:10px;position: absolute;top: 0;right:0;display:flex;justify-content: center;align-items: center;overflow: hidden;}
.banner-scroll .right_img img{width: 100%;max-height: 80%;}

/* functional-principle */
.functional-principle-box .txImagemapsFrontView {width: 80%;margin: 0 auto;}


/*product  flex-wrapper */
.product.flex-wrapper .list-item{flex: 0 0 calc((100% - 30px * 2) / 3);background-color: #fff;-webkit-box-shadow: 0 20px 40px -16px hsla(0, 0%, 9%, .15);box-shadow: 0 20px 40px -16px hsla(0, 0%, 9%, .15);}
.product.flex-wrapper .list-item a{display:flex;flex-direction: column;}
.product.flex-wrapper .list-icon{width: 100%;height: 210px;margin-bottom: 28px;text-align: center;border-bottom: 1px solid #d9d9d9;}
.product.flex-wrapper .list-info{padding: 15px 15px 0;flex:1;display: flex;flex-direction: column;} 
.product.flex-wrapper .list-info .list-info-content{flex:1}
}