.tabTitle { transition: all 0.3s ease; /* 使定位变化平滑 */ background-color: white; width: 100%; top: 85px; left: 0; /* 确保它从页面的最左边开始 */ width: 100%; /* 确保它宽度覆盖全屏 */ z-index: 10; /* 确保它位于其他内容之上 */ } #wrap{width:100%;max-width:100%;font-size:1.2rem;line-height:1.2} .w1300{width:100%;max-width:1300px;margin:0 auto} .flexBox{display:-webkit-box;display:-ms-flexbox;display:flex} .swiper-slide,.swiper-wrapper{height:auto!important} .swiper-button-next,.swiper-button-prev,.swiper-pagination{position:inherit!important} .swiper-button-next::after,.swiper-button-prev::after{display:none} .titleEn{display:block;color:#E31332;font-size:13px;font-weight:800;letter-spacing:.24em;text-transform:uppercase} .title{position:absolute;z-index:-2} .title .sectionTitle{display:-webkit-box;display:-ms-flexbox;display:flex;color:#f5f5f5;font-size:16rem;font-weight:700;-webkit-transition:all .8s;transition:all .8s; margin-right: -200px;} .title .sectionTitle span{-webkit-transition:1s;transition:1s;opacity:0} .title .sectionTitle span:nth-child(1){-webkit-transform:translateX(18px) rotateY(60deg);transform:translateX(18px) rotateY(60deg)} .title .sectionTitle span:nth-child(2){-webkit-transform:translateX(36px) rotateY(60deg);transform:translateX(36px) rotateY(60deg)} .title .sectionTitle span:nth-child(3){-webkit-transform:translateX(54px) rotateY(60deg);transform:translateX(54px) rotateY(60deg)} .title .sectionTitle span:nth-child(4){-webkit-transform:translateX(72px) rotateY(60deg);transform:translateX(72px) rotateY(60deg)} .title .sectionTitle span:nth-child(5){-webkit-transform:translateX(90px) rotateY(60deg);transform:translateX(90px) rotateY(60deg)} .title .sectionTitle span:nth-child(6){-webkit-transform:translateX(108px) rotateY(60deg);transform:translateX(108px) rotateY(60deg)} .title .sectionTitle span:nth-child(7){-webkit-transform:translateX(126px) rotateY(60deg);transform:translateX(126px) rotateY(60deg)} .title .sectionTitle span:nth-child(8){-webkit-transform:translateX(144px) rotateY(60deg);transform:translateX(144px) rotateY(60deg)} .sectionTitleH2{font-size:3rem;font-weight:600;letter-spacing:-.025em;} .boxShadow{position:relative} .boxShadow::before{content:"";display:block;mix-blend-mode:multiply;-webkit-box-shadow:20px 0 60px rgba(0,0,0,.08);box-shadow:20px 0 60px rgba(0,0,0,.08);z-index:-2;width:100%;height:100%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .tabTitle{width:100%} .tabTitle li{width:100%;height:60px;list-style: none;} .tabTitle li button{display:block;color:#333;font-size:1rem;font-weight:400;letter-spacing:-.030em;border:1px solid #e0e0e0;-webkit-transition:all .4s;transition:all .4s;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} .tabTitle li:hover button{color:#fff;background:#E31332;border:1px solid #E31332} .font-28{--fontsize:2.8rem;font-size:var(--fontsize)} #subContents .subPage{margin:15px 0 0;} #subContents .tableBox table{border-top:2px solid #222;position:relative} #subContents .tableBox table::after{content:"";display:block;width:2px;height:100%;background:#fff;position:absolute;top:0;right:0;z-index:2} #subContents .tableBox table td,#subContents .tableBox table th{padding:20px;border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0} #subContents .tableBox table th{color:#333;font-size:2rem;font-weight:600} #subContents .tableBox table td{font-size:1.8rem} #subContents .tableBox table td.bg{background:#f9f9f9} #subContents .tableBox table td.center{text-align:center} #subContents .products-page.view .box{position:relative} #subContents .products-page.view .box .w1300{height:auto} #subContents .products-page.view .box .title{width:100%;max-width:1720px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transform:translateY(-38px);transform:translateY(-38px)} #subContents .products-page.view .box .info{padding:0 0 60px;gap:0 115px} #subContents .products-page.view .box .info .imgBox{width:100%;max-width:540px;-ms-flex-negative:0;flex-shrink:0;position:relative} #subContents .products-page.view .box .info .imgBox .thumb{width:100%;height:auto;padding:52.78% 0;position:relative} #subContents .products-page.view .box .info .imgBox .thumb img{max-height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} #subContents .products-page.view .box .info .imgBox ul{width:100%;height:auto;gap:0 10px;margin:10px 0 0} #subContents .products-page.view .box .info .imgBox ul li{list-style: none;width:calc((100% - 40px)/ 5);height:auto;padding:8.335% 0;border:1px solid #f5f5f5;position:relative;-webkit-transition:all .4s;transition:all .4s;cursor:pointer} #subContents .products-page.view .box .info .imgBox ul li img{max-width:calc(100% - 5px);max-height:100%;-o-object-fit:cover;object-fit:cover;opacity:.7;-webkit-transition:all .4s;transition:all .4s;-webkit-filter:grayscale(1);filter:grayscale(1);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} #subContents .products-page.view .box .info .imgBox ul li.on,#subContents .products-page.view .box .info .imgBox ul li:hover{border:5px solid #E31332} #subContents .products-page.view .box .info .imgBox ul li.on img,#subContents .products-page.view .box .info .imgBox ul li:hover img{max-width:100%;opacity:1;-webkit-filter:grayscale(0);filter:grayscale(0)} #subContents .products-page.view .box .info .textBox{width:100%} #subContents .products-page.view .box .info .textBox .titleBox{padding:40px 0} #subContents .products-page.view .box .info .textBox .titleBox .sectionTitleH2{color:#222;margin:20px 0 10px} #subContents .products-page.view .box .info .textBox .titleBox p{color:#222;font-weight:500;letter-spacing:-.025em} #subContents .products-page.view .box .info .textBox .textBox{width:100%;padding:25px 0;color:#333} #subContents .products-page.view .box .info .textBox .textBox h6{font-size:1.8rem;font-weight:600;letter-spacing:-.030em;margin:0 0 20px} #subContents .products-page.view .box .info .textBox .textBox.option{border-top:1px solid #666;border-bottom:1px solid #e0e0e0} #subContents .products-page.view .box .contents{padding:100px 0 0} #subContents .products-page.view .box .contents h3{display:flex;align-items:center;margin-bottom:50px!important;padding-bottom:25px;border-bottom:1px solid #eee;margin-bottom:0;font-size:28px;line-height:1.3571428571;font-weight:700;color:#333;background-image:url(../h3_icon.svg);background-repeat:no-repeat;background-size:40px 40px;padding-left:56px;color:#333} @media (max-width:1199.98px){#subContents .products-page.view .box .contents h3{margin-bottom:40px;background-size:36px 36px;padding-left:48px;font-size:24px} } @media (max-width:991.98px){#subContents .products-page.view .box .contents h3{margin-bottom:30px;background-size:32px 32px;padding-left:40px;font-size:20px} } #subContents .products-page.view .box .contents h4{color:#000;text-align:center;letter-spacing:-.030em} #subContents .products-page.view .box .contents h4{font-size:2rem;font-weight:700;margin:0 0 50px} #subContents .products-page.view .box .contents img{margin:0 auto} #subContents .products-page.view .box .contents2 .video{position:relative;padding:0 0 56.25%} #subContents .products-page.view .box .contents4{background:#f9f9f9;padding:100px 0 0;margin:0px 0 0} #subContents .products-page.view .box .contents4 .viewSlide .itemBox{display:-webkit-box;display:-ms-flexbox;display:flex} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item{width:300px!important;width:23.07692%!important;height:auto;margin-right:calc(7.69232% / 3)} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .img{width:100%;height:auto;background:#fff;border:1px solid #fff;padding:50% 0;position:relative;-webkit-transition:all .4s;transition:all .4s} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .img img{max-width:calc(100% - 40px);max-height:calc(100% - 40px);-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .text{width:100%;color:#333;text-align:center;padding:30px 0} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .text h6{font-size:1.5rem;font-weight:700;margin:0 0 0px} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .text p{width:100%;height:1em;font-size:1.6rem;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical} /* #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:nth-child(4n){margin-right:0} */ #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:hover .img{border:1px solid #E31332} #subContents .products-page.view .box .contents4 .viewSlide .optionBox{margin:20px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox .swiper-button-next,#subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox .swiper-button-prev{width:auto!important;height:auto!important;margin-top:0!important} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox .swiper-button-next i,#subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox .swiper-button-prev i{color:#999;font-size:16px} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox .swiper-button-next:hover i,#subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox .swiper-button-prev:hover i{color:#E31332} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox span{display:block;width:1px;height:13px;background:#ccc;margin:0 30px} .tabTitle li:hover button, .tabTitle li.on button {color: #ffffff;background: #E31332; border: 1px solid #E31332;} .products_maodian{position:sticky;overflow:hidden;height:60px;top:80px;z-index:4;transition:.4s;box-shadow:0 5px 25px rgba(0,0,0,.1)} .products_maodian::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:-1;opacity:1;transition:all .4s ease} .products_maodian .le_box>div{font-size:16px} .products_maodian .le_box>div a{transition:.4s} .products_maodian .le_box>div i{margin:0 2px;font-style:normal} .products_maodian .ri_box{line-height:var(--top2)} .products_maodian .ri_box .div_1 a{position:relative;font-size:18px;transition:.4s;margin-right:.44rem} .products_maodian .ri_box .div_1 a::after,.products_maodian .ri_box .div_1 a::before{transition:.4s;opacity:0;content:"";position:absolute;left:0;bottom:-20%;width:100%;height:2px;background:rgba(240,130,0,.2)} .products_maodian .ri_box .div_1 a::after{width:18%;background:#e31332} .products_maodian .ri_box .div_1 a.active,.products_maodian .ri_box .div_1 a:hover{color:#e31332} .products_maodian .ri_box .div_1 a.active::after,.products_maodian .ri_box .div_1 a.active::before,.products_maodian .ri_box .div_1 a:hover::after,.products_maodian .ri_box .div_1 a:hover::before{opacity:1;bottom:0} @media (max-width:1200px){.products_maodian{display:none} } .df{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap} .js{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between} .ac{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;line-height:60px} .tabTitle-top li{margin-right:1.5rem;position:relative;list-style:none} .tabTitle-top li button{font-size:18px;color:#999;background:0 0;border:none;padding:0;cursor:pointer;transition:.4s;position:relative} .tabTitle-top li button::after,.tabTitle-top li button::before{transition:.4s;opacity:0;content:"";position:absolute;left:0;bottom:-10%;width:100%;height:2px;background:rgba(240,130,0,.2)} .tabTitle-top li button::after{width:18%;background:#e31332} .tabTitle-top li button:hover,.tabTitle-top li.on button{color:#e31332} .tabTitle-top li button:hover::after,.tabTitle-top li button:hover::before,.tabTitle-top li.on button::after,.tabTitle-top li.on button::before{opacity:1;bottom:-10px} @media (max-width:1200px){ #wrap{overflow-x:hidden} .font-24,.font-28,.font-30{font-size:calc(var(--fontsize) * .92)} #visual .w1720 .visualBox .titleBox p{margin:25px 0 0} #products-page .title{top:8%} #products-page .bg{width:26%} #products-page .bg .count,#products-page .bg::after{width:140px} #products-page .bg::after{height:65%} #products-page .box .tabContents .item .info .titleBox .sectionTitleH2{margin:35px 0 20px -3px} #products-page .box .tabContents .item .info .moreButton{margin:60px 0 40px} #products-page .box .products-pageTabTitle::before{width:calc(100% + 120px)} #products-page .box .products-pageTabTitle::after{right:-120px} #type .box .itemBox .item>a .icon{margin:0 0 20px} #type .box .itemBox .item>a span{margin:10px 0 20px} #about .img{width:46%} .paging{margin:60px 0 0;padding:20px 0 0} .paging ul li::after{top:-21px} #subContents .pageTitle{margin:100px 0 60px} #subContents .subPage{padding:0 0 120px} #subContents .subMenu #lnb .depth2 li a{font-size:1.5rem} #subContents .introduce .box .title{margin:-25px 0} #subContents .introduce .box .introBox{padding:60px 0} #subContents .introduce .box .introBox p{padding:0 0 50px} #subContents .introduce .box .organBox .itemBox .item{gap:0 20px} #subContents .introduce .box .organBox .itemBox .item .info{width:170px;height:170px} #subContents .introduce .box .organBox .itemBox .item .info dl dt{margin:15px 0 5px} #subContents .introduce .box .organBox .itemBox .item .ulBox{gap:0 10px;margin:25px 0 0} #subContents .introduce .box .organBox .itemBox .item ul{gap:10px} #subContents .introduce .box .organBox .itemBox .item ul li{gap:10px 0} #subContents .introduce .box .organBox .itemBox .item ul li span{font-size:1.5rem} #subContents .introduce .box .mapBox ul{gap:0 25px} #subContents .introduce .box .mapBox ul li{padding:40px 0} #subContents .introduce .box .mapBox ul li p{padding:20px 0 0} #subContents .introduce .box .historyBox .tabContents>div{margin:50px 0 0} #subContents .introduce .box .historyBox .tabContents>div ul{gap:80px 0} #subContents .introduce .box .factoryBox .itemBox{gap:0 20px} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox{max-width:calc((100% - 40px)/ 3)} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox .bottom{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:10px 0;padding:20px} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox .bottom .factoryTitleSlide{width:100%} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox .bottom .optionBox{margin:0 0 0 auto} #subContents .certification .box .itemBox{gap:30px 20px} #subContents .mapPage .box .mapNav{right:20px} #subContents .location .box .mapBox{height:480px} #subContents .location .box .infoBox{width:380px;padding:40px} #subContents .location .box .title{bottom:-14%} #subContents .products-page.list .box .itemBox{gap:40px 30px} #subContents .products-page.list .box .itemBox .item>a .text{padding:20px 0 0} #subContents .products-page.view .box .info{padding:0 0 100px;gap:0 40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center} #subContents .products-page.view .box .info .imgBox{max-width:45%} #subContents .findMap .box .mapBox{height:780px} #subContents .findMap .box .infoBox{width:420px;padding:30px 0 0} #subContents .findMap .box .infoBox .searchBox,#subContents .findMap .box .infoBox .titleBox{padding:0 30px} #subContents .findMap .box .infoBox .resultBox{padding:0 10px 20px 30px} #subContents .findMap .box .infoBox .resultBox .list{margin:30px 0 0} #subContents .findMap .box .infoBox .resultBox .list ul{padding:0 15px 0 0} #subContents .findMap .box .infoBox .resultBox .list ul li:first-child{padding:0 0 20px} #subContents .findMap .box .infoBox .resultBox .list ul li:last-child{padding:20px 0 0} #subContents .findMap .box .infoBox .resultBox .list ul li:not(:first-child):not(:last-child){padding:20px 0} #subContents .findMap .box .numBox ul li span::before{bottom:-25px} footer{padding:40px 0} footer .w1720 .footerBox #fnb{display:none} } @media (max-width:1024px){ .tabTitle li:hover button{color:#333;background:0 0;border:1px solid #e0e0e0} .cursorshade,.magnifier,.statusdiv,.tracker{display:none!important} #subContents .subMenu{margin:0} #subContents .subMenu #lnb{gap:0 10px} #subContents .subMenu #lnb::after,#subContents .subMenu #lnb::before{display:none} #subContents .subMenu #lnb .lnbHome{display:flex;justify-content:center;align-items:center;background:#E31332;border-radius:50%;width:40px;height:40px} #subContents .subMenu #lnb .lnbHome i{color:#fff;font-size:1.8rem} #subContents .subMenu #lnb,#subContents .subMenu #lnb button{height:100%;display:flex;align-items:center} #subContents .subMenu #lnb button{width:260px;position:relative} #subContents .subMenu #lnb button>li{width:100%} #subContents .subMenu #lnb li.on a{color:#222;font-size:1.8rem;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-weight:500;font-size:1.9rem} #subContents .subMenu #lnb li.on a i{font-size:1.6rem} #subContents .subMenu #lnb .depth2{width:100%;height:auto;position:absolute;top:100%;flex-direction:column;gap:20px 0;z-index:2;background:#f5f5f5;padding:20px;display:none} #subContents .subMenu #lnb .depth2 li a{justify-content:flex-start;font-size:1.8rem} #subContents .subMenu #lnb .depth2 li:not(:last-child)::after{display:none} } @media (max-width:960px){ .title .sectionTitle{font-size:10rem} .sectionTitleH2{font-size:3rem} .listBox ul li{height:70px;padding:0 20px} #visual .w1720 .visualBox .titleBox{gap:20px 0} #visual .w1720 .visualBox .titleBox .title1{width:480px} #visual .w1720 .visualBox .titleBox .title2{width:542px} #visual .w1720 .visualBox .titleBox p{margin:15px 0 0} #about .box,#products-page .box{padding:80px 0 0} #products-page .box .tabContents .item .info .titleBox .sectionTitleH2{margin:20px 0 10px -3px} #recommend .box,#type .box{padding:80px 0} #about .box .titleBox .sectionTitleH2,#recommend .box .titleBox .sectionTitleH2,#type .box .titleBox .sectionTitleH2{margin:20px 0 10px} #type .box .itemBox{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:15px;margin:60px 0 0} #type .box .itemBox .item{width:calc((100% - 30px)/ 3)} #recommend .box .itemBox{gap:10px} #recommend .box .itemBox .item>a .text{padding:20px 0} #about .box .info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:40px 0} #about .box .info .img,#about .box .info .titleBox{width:100%;max-width:590px} #about .box .info .img div,#about .box .info .titleBox div{margin:10px 0 30px} #about .box .info .img div p,#about .box .info .titleBox div p{margin:25px 0 0} #about .box .info .titleBox .sectionTitleH2{width:180px} #about .box .link.listBox{margin:40px 0 20px} #sv{height:420px} #sv .subVisual .subTitle>div{height:60px} #subContents .pageTitle{margin:80px 0 40px} #subContents .subPage{padding:0 0 80px} #subContents .paddingBox{padding:80px 0} #subContents .introduce .box .title{margin:-25px 0 -15px} #subContents .introduce .box .introBox ul li{padding:20px 0} #subContents .introduce .box .introBox ul li h5{margin:20px 0 5px} #subContents .introduce .box .organBox .itemBox .item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} #subContents .introduce .box .organBox .itemBox .item .info{margin:0 auto} #subContents .introduce .box .organBox .itemBox .item .infoBox{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:0 30px;margin:0 auto} #subContents .introduce .box .organBox .itemBox .item .infoBox .info{margin:0} #subContents .introduce .box .organBox .itemBox .item .infoBox .info::after,#subContents .introduce .box .organBox .itemBox .item .infoBox .info::before{display:none} #subContents .introduce .box .organBox .itemBox .item .ulBox{margin:0} #subContents .introduce .box .organBox .itemBox .item .ulBox.length8{-ms-flex-wrap:wrap;flex-wrap:wrap} #subContents .introduce .box .organBox .itemBox .item .ulBox.length8 .depth1{width:100%} #subContents .introduce .box .organBox .itemBox .item .ulBox .depth1{margin:30px 0 0} #subContents .introduce .box .organBox .itemBox .item .ulBox .depth1::before{width:100%} #subContents .introduce .box .mapBox ul{gap:0 15px} #subContents .introduce .box .factoryBox .itemBox{gap:0 10px} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox{max-width:calc((100% - 20px)/ 3)} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox .bottom{width:calc(100% - 16px);padding:15px} #subContents .certification .box .itemBox{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)} #subContents .location .box .mapBox{height:420px} #subContents .location .box .infoBox{width:340px;padding:30px} #subContents .location .box .infoBox hr{margin:20px 0} #subContents .location .box .infoBox .linkBox{margin:40px 0 0} #subContents .products-page.list .box .itemBox{gap:30px 20px} #subContents .products-page.list .box .itemBox .item>a .text h5{margin:0 0 10px} #subContents .products-page.view .box .info{padding:0 0 80px} #subContents .products-page.view .box .contents{padding:80px 0 0} #subContents .products-page.view .box .contents4{padding:80px 0;margin:80px 0 0} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .text{padding:20px 0} #subContents .findMap .box .mapBox{height:700px} #subContents .findMap .box .mapBox>div{left:-14%!important} #subContents .findMap .box .infoBox{width:360px} #subContents .findMap .box .infoBox .searchBox label,#subContents .findMap .box .infoBox .searchBox select{height:45px} #subContents .findMap .box .infoBox .resultBox .list{height:400px} #subContents .findMap .box .numBox{padding:100px 0} #subContents .findMap .box .numBox ul{margin:80px auto 0} } @media (max-width:768px){ .font-24,.font-28,.font-30{font-size:calc(var(--fontsize) * .86)} .title .sectionTitle{font-size:7rem} .listBox li,.tabTitle li{height:60px} .listBox ul li{padding:0 10px} .listBox ul li a{font-size:1.6rem} .listBox ul li a span{width:20px;height:20px} header{height:72px} header .headerBox nav{height:calc(100vh - 72px);top:72px} .sectionTitleH2{font-size:2.5rem} #visual .w1720 .visualBox .titleBox .title1{width:420px} #visual .w1720 .visualBox .titleBox .title2{width:482px} #products-page .bg .count,#products-page .bg::after{width:120px} #products-page .box .tabContents .item .info ul{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:0 10px;margin:20px 0 0} #products-page .box .tabContents .item .info ul li{width:100%} #products-page .box .tabContents .item .img{max-width:100%} #products-page .box .products-pageTabTitle::before{width:calc(100% + 100px)} #products-page .box .products-pageTabTitle::after{right:-100px} #products-page .box .products-pageTabTitle ul{padding:40px 0} #products-page .box .products-pageTabTitle ul li button{font-size:1.8rem} #recommend .box .itemBox,#type .box .itemBox{margin:40px 0 0} #type .box .itemBox .item>a{padding:22% 0} #type .box .itemBox .item>a span{margin:5px 0 15px} #recommend .box .itemBox{-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px} #recommend .box .itemBox .item{width:calc(50% - 10px)} #recommend .box .itemBox .item>a .text{padding:15px 0 20px} #recommend .box .itemBox .item>a .text h5{margin:0 0 5px} #about .title{bottom:35px} #about .box .info .titleBox .sectionTitleH2{width:160px} #sv{height:360px} #sv .subVisual .subTitle>div{height:45px} #subContents .pageTitle{margin:60px 0 30px} #subContents .pageTitle h3{font-size:2.8rem} #subContents .subPage .contentsTitle{font-size:2.5rem} #subContents .tableBox{overflow-x:scroll} #subContents .tableBox table{width:728px} #subContents .tableBox table td,#subContents .tableBox table th{padding:15px 10px} #subContents .tableBox table th{font-size:1.7rem} #subContents .tableBox table td{font-size:1.6rem} #subContents .introduce .box .introBox{padding:40px 0} #subContents .introduce .box .introBox .logo{width:95px} #subContents .introduce .box .introBox p{padding:0 0 35px} #subContents .introduce .box .introBox ul li{padding:15px 0} #subContents .introduce .box .mapBox ul{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} #subContents .introduce .box .mapBox ul li{width:calc(50% - 5px)} #subContents .introduce .box .historyBox .tabContents>div .historyBar{left:114px} #subContents .introduce .box .historyBox .tabContents>div ul li{gap:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start} #subContents .introduce .box .historyBox .tabContents>div ul li h3,#subContents .introduce .box .historyBox .tabContents>div ul li span{-ms-flex-negative:0;flex-shrink:0} #subContents .introduce .box .historyBox .tabContents>div ul li h3{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:100px;font-size:3.4rem;text-align:left} #subContents .introduce .box .historyBox .tabContents>div ul li span{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:0 40px 0 10px;position:inherit;left:auto;-webkit-transform:translateX(0);transform:translateX(0)} #subContents .introduce .box .historyBox .tabContents>div ul li div{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;width:auto} #subContents .introduce .box .historyBox .tabContents>div ul li.reverse div{text-align:left} #subContents .introduce .box .historyBox .tabContents>div ul li.reverse div p::before{left:-8px;right:auto} #subContents .introduce .box .factoryBox .itemBox{-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px 10px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox{max-width:calc(50% - 5px)} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox .bottom{padding:20px 15px} #subContents .certification .box .itemBox{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)} #subContents .mapPage .box .infoBox{width:100%;position:inherit;top:auto;-webkit-transform:translateY(0);transform:translateY(0);right:auto} #subContents .location .box .mapBox{height:380px} #subContents .location .box .title{bottom:-6%} #subContents .products-page.list .box .itemBox{gap:20px 15px} #subContents .products-page.view .box .quickMenu{gap:5px 0} #subContents .products-page.view .box .quickMenu button{width:50px;height:50px} #subContents .products-page.view .box .info{padding:0 0 40px;gap:40px 0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start} #subContents .products-page.view .box .info .imgBox{max-width:100%} #subContents .products-page.view .box .contents{padding:60px 0 0} #subContents .products-page.view .box .contents h4{font-size:2.5rem;margin:0 0 40px} #subContents .products-page.view .box .contents2 .video .playButtonBox{width:70px;height:70px} #subContents .products-page.view .box .contents4{padding:60px 0;margin:60px 0 0} #subContents .products-page.view .box .contents4 h4{margin:0 0 40px} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item{width:calc((100% - 40px)/ 3)!important;margin-right:20px} /* #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:nth-child(4n){margin-right:20px} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:nth-child(3n){margin-right:0} */ #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox span{margin:0 20px} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .swiper-pagination-progressbar{margin:0 0 0 25px} #subContents .findMap .box .mapBox{height:480px} #subContents .findMap .box .mapBox>div{left:0!important} #subContents .findMap .box .numBox{padding:80px 0} #subContents .findMap .box .numBox p{font-size:1.7rem} #subContents .findMap .box .numBox ul{margin:60px auto 0} footer .w1720 .footerBox .info ul{margin:30px 0} footer .w1720 .footerBox .info span{margin:40px 0 0} } @media (max-width:640px) {.w1300,.w1720{padding:0 14px} .font-24,.font-28,.font-30{font-size:calc(var(--fontsize) * .8)} .title .sectionTitle{font-size:5.6rem} .sectionTitleH2{font-size:2.5rem} .moreButton{width:160px} .moreButton span{width:20px} .listBox,.tabTitle{-ms-flex-wrap:wrap;flex-wrap:wrap} .listBox li,.tabTitle li{width:50%;height:35px} .tabTitle li:nth-child(2n){-webkit-transform:translateX(-1px);transform:translateX(-1px)} .tabTitle li:nth-child(3){-webkit-transform:translateY(-1px);transform:translateY(-1px)} .tabTitle li:nth-child(4){-webkit-transform:translate(-1px,-1px);transform:translate(-1px,-1px)} .listBox li{padding:0 15px} .listBox li a span{width:24px;height:24px} #products-page .bg{display:none} #products-page .title{left:auto;right:14px} #products-page .box .tabContents .item .img{margin:20px 0 0;position:inherit} #products-page .box .tabContents .item .info .titleBox .sectionTitleH2{margin:20px 0 10px -2px} #products-page .box .tabContents .item .info ul li{font-size:1.7rem;padding:8px 0} #products-page .box .tabContents .item .info .moreButton{margin:40px 0 30px} #products-page .box .products-pageTabTitle::before{width:calc(90% + 10px)} #products-page .box .products-pageTabTitle::after{left:calc(90% + 5px)} #products-page .box .products-pageTabTitle ul{max-width:100%;padding:30px 0} #products-page .box .products-pageTabTitle ul li button{font-size:1.5rem} #recommend .box,#type .box{padding:60px 0} #recommend .box .itemBox,#type .box .itemBox{gap:10px} #type .box .itemBox .item{width:calc(50% - 5px)} #type .box .itemBox .item>a .icon{margin:0 0 15px} #type .box .itemBox .item>a .icon img{-webkit-transform:scale(.86);transform:scale(.86);-webkit-transform-origin:center;transform-origin:center} #about .title{display:flex;justify-content:flex-end;left:auto;right:20px;transform:translate(0,0)} #about .box .info .titleBox .sectionTitleH2{width:140px} #about .box .info .titleBox p br{display:none} #about .box .link.listBox ul li:nth-child(3){margin:-1px 0 0} .paging{margin:40px 0 0} .paging ul li::after{top:-23px} #sv{height:320px} #sv .subVisual .subTitle>div{height:35px} #subContents .pageTitle{margin:50px 0 30px} #subContents .subMenu #lnb{gap:0} #subContents .subMenu #lnb li.on a{font-size:1.8rem} #subContents .subMenu #lnb .depth2{padding:15px 20px} #subContents .subMenu #lnb .depth2 li a{font-size:1.6rem} #subContents .subPage{padding:0 0 60px} #subContents .paddingBox{padding:60px 0} #subContents .introduce .box .title{margin:-20px 0 -8px} #subContents .introduce .box .introBox{padding:30px 10px} #subContents .introduce .box .introBox .logo{width:85px} #subContents .introduce .box .introBox .img{margin:20px 0} #subContents .introduce .box .introBox p{font-size:1.6rem;padding:0 0 5px} #subContents .introduce .box .introBox p br{display:none} #subContents .introduce .box .introBox ul{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} #subContents .introduce .box .introBox ul li{width:100%;padding:20px 0} #subContents .introduce .box .introBox ul li:nth-child(2){border-left:none;border-right:none;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0} #subContents .introduce .box .organBox .itemBox .item .ulBox.length4{-ms-flex-wrap:wrap;flex-wrap:wrap} #subContents .introduce .box .organBox .itemBox .item .ulBox.length4 .depth1{width:100%} #subContents .introduce .box .mapBox ul li{width:100%} #subContents .introduce .box .historyBox .tabTitle{-ms-flex-wrap:nowrap;flex-wrap:nowrap} #subContents .introduce .box .historyBox .tabTitle li{height:50px} #subContents .introduce .box .historyBox .tabTitle li:nth-child(2n){-webkit-transform:translateX(0);transform:translateX(0);margin:0 -1px} #subContents .introduce .box .historyBox .tabTitle li:nth-child(3){-webkit-transform:translateY(0);transform:translateY(0)} #subContents .introduce .box .historyBox .tabContents>div .historyBar{top:16px;left:73px} #subContents .introduce .box .historyBox .tabContents>div ul{gap:60px 0} #subContents .introduce .box .historyBox .tabContents>div ul li h3{width:60px;font-size:2.8rem} #subContents .introduce .box .historyBox .tabContents>div ul li span{width:5px;height:5px;margin:0 30px 0 10px} #subContents .introduce .box .historyBox .tabContents>div ul li div p{font-size:1.5rem} #subContents .introduce .box .historyBox .tabContents>div ul li.on span{width:7px;height:7px} #subContents .introduce .box .historyBox .tabContents>div ul li.on span::before{width:22px;height:22px} #subContents .introduce .box .factoryBox .itemBox{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center} #subContents .introduce .box .factoryBox .itemBox .factorySlideBox{max-width:400px} #subContents .certification .box .itemBox{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);gap:20px 10px} #subContents .certification .box .itemBox .item h6{margin:10px 0 0} #subContents .location .box .mapBox{height:340px} #subContents .location .box .infoBox{padding:20px} #subContents .location .box .infoBox .linkBox>a{height:45px} #subContents .products-page.list .box .itemBox{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);gap:20px 10px} #subContents .products-page.list .box .itemBox .item>a .text{padding:10px 0 0} #subContents .products-page.list .box .itemBox .item>a .text h5{margin:0 0 5px} #subContents .products-page.list .box .itemBox .item>a .text p{font-size:1.6rem} #subContents .products-page.view .box .title{-webkit-transform:translateY(-66px);transform:translateY(-66px)} #subContents .products-page.view .box .quickMenu{right:14px} #subContents .products-page.view .box .quickMenu button{width:45px;height:45px} #subContents .products-page.view .box .info{padding:0;gap:10px 0} #subContents .products-page.view .box .info .imgBox ul{gap:0 5px;margin:5px 0 0} #subContents .products-page.view .box .info .imgBox ul li{width:calc((100% - 20px)/ 5);padding:8.73% 0} #subContents .products-page.view .box .info .imgBox ul li.on{border:3px solid #E31332} #subContents .products-page.view .box .contents{padding:50px 0 0} #subContents .products-page.view .box .contents h4,#subContents .products-page.view .box .contents h5{margin:0 0 30px} #subContents .products-page.view .box .contents2 .video .playButtonBox{width:60px;height:60px} #subContents .products-page.view .box .contents4{padding:50px 0} #subContents .products-page.view .box .contents4 h4{margin:0 0 30px} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item{width:calc(50% - 10px)!important} /* #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:nth-child(3n){margin-right:20px} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:nth-child(2n){margin-right:0} */ #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item .text{padding:10px 0 0} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox span{height:10px} #subContents .findMap .box .mapBox{height:380px} #subContents .findMap .box .infoBox{padding:20px 0 0} #subContents .findMap .box .infoBox .searchBox,#subContents .findMap .box .infoBox .titleBox{padding:0 20px} #subContents .findMap .box .infoBox .resultBox{padding:0 5px 20px 20px} #subContents .findMap .box .infoBox .resultBox .list{margin:20px 0 0} #subContents .findMap .box .infoBox .resultBox .list ul{padding:0 10px 0 0} #subContents .findMap .box .numBox{padding:60px 0} #subContents .findMap .box .numBox p br{display:none} #subContents .findMap .box .numBox ul{margin:40px auto 0} footer .w1720 .footerBox .info h2{width:86px;height:27px} } @media (max-width:420px){ #type .box .itemBox .item>a{padding:18% 0} #recommend .box .itemBox .item:hover .text::before{height:100%;top:-10px} #sv .subVisual .subTitle{gap:10px 0} #sv .subVisual .subTitle>div{height:32px} #subContents .subMenu #lnb button{width:220px} #subContents .products-page.view .box .contents2 .video .playButtonBox{width:50px;height:50px} #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item{width:calc(50% - 5px)!important;margin-right:10px} /* #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item:nth-child(3n){margin-right:10px} */ #subContents .products-page.view .box .contents4 .viewSlide .itemBox .item h6{margin:0 0 5px} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .buttonBox span{margin:0 10px} #subContents .products-page.view .box .contents4 .viewSlide .optionBox .swiper-pagination-progressbar{margin:0 0 0 15px} } .textBox ul{list-style:none;padding:0;} .textBox ul li{position:relative;padding-left:2rem;margin-bottom:10px;text-align:left} .textBox ul li::before{position:absolute;top:0;left:0;font-family:xeicon!important;content:"\e92c";speak:none;font-style:normal;font-weight:500;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#E31332;position:absolute} /* 产品详情页 */ .contents.grid-wrap.producdt{font-size:1rem} .table-container table{border-top:1px solid #222;position:relative;width:100%;margin-top:1rem;font-family:sans-serif;} .table-container table::after{content:"";display:block;width:2px;height:100%;background:#fff;position:absolute;top:0;right:0;z-index:2} .table-container table tr:first-child{padding:10px;border-right:0px solid #e0e0e0;border-bottom:1px solid #e0e0e0} .table-container table th{padding:10px;border-right:0px solid #e0e0e0;border-bottom:1px solid #e0e0e0;border-top:1px solid #222;} .table-container table th{color:#e31332;font-size:1rem;font-weight:600;text-align: left;} .table-container table td{padding:10px;border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0} .table-container table tr:first-child{color:#e31332;font-size:1.2rem;font-weight:600} .table-container table tr:first-child.bg{background:#f0f0f0} .table-container table td{font-size:1rem;text-align: center;} .table-container table td.color,.table-container table tr:first-child.color{color:#e31332} .table-container table td.bg,.table-container table tr:first-child.bg{background:#f9f9f9} .table-container table td.center{text-align:center} .table-container table td:first-child{width:25%;text-align: left;} .table-container table td:last-child,.table-container table tr:last-child td{border-right:none} .table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;padding-bottom:20px} .table-container table{border-collapse:collapse;min-width:1100px;margin-top:0;width:100%;} .table-container td{border:1px solid #ccc;padding:8px} .table-container table td:first-child,.table-container table th:first-child{width:25%;text-align:left;border-left:none} .table-container table td:last-child,.table-container table th:last-child{border-right:none} .table-container table tr:first-child td{border-right:none!important} .table-container table tr:last-child td:first-child{border-right:1px solid #e0e0e0} .cm-scroll-drag-guide{display:none} @media all and (max-width:800px){ .table-container table{border-collapse:collapse;min-width:700px;margin-top:0} .cm-scroll-drag-guide{display:flex;justify-content:flex-end;margin-right:var(--area-padding)} .cm-scroll-drag-guide .cm-scroll-drag-inner{position:relative;width:50px;height:50px} .cm-scroll-drag-guide .cm-scroll-drag-inner:before{position:absolute;top:4px;right:0;width:100%;height:3px;background-color:#ccc;content:"";border-radius:5px} .cm-scroll-drag-guide .drag-tail{position:absolute;z-index:1;left:0;top:3px;animation:moveScrollAni 3s both infinite} .cm-scroll-drag-guide .drag-tail .tail{display:block;width:25px;height:5px;background-color:rgba(0,0,0,.7);border-radius:5px;opacity:1} .cm-scroll-drag-guide .drag-tail .hand-icon{font-size:30px;color:#aaa} @keyframes moveScrollAni{0%,10%{left:0;margin-left:0} 50%{left:100%;margin-left:-25px} 100%{left:0;margin-left:0} } } /* 产品详情页 */ /* about */ .cm-effect03-wrap{position:relative} .cm-effect03-wrap:before{position:absolute;content:'';width:70%;height:70%;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 1.2s ease-in-out;background:#f2f2f2;z-index:-1;opacity:0} .cm-effect03-con{position:relative;z-index:1;opacity:0;transition:all 1.2s ease-in-out;transition-delay:.6s} .cm-effect03-wrap.animated:before{opacity:1;width:100%;height:100%} .cm-effect03-wrap.animated .cm-effect03-con{opacity:1} .company-business-con{position:relative;height:25rem} .company-business-con+.company-business-con{margin-top:4rem} .company-business-con .cm-effect03-con{transition-delay:.4s} .company-business-con a{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-wrap:wrap;padding:2rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden} .company-business-con a:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:0 0;transition:all .6s ease-in-out} .company-business-con a .images-con{position:relative;width:50%;padding-right:2rem;box-sizing:border-box;z-index:1} .company-business-con a .images-con .images-box{position:relative;width:100%;height:0;padding-top:45%; border-radius:1rem;transform:scale(.7);transition:all 1.2s ease-in-out;transition-delay:.4s;overflow:hidden} /* 新增overflow:hidden */ .company-business-con.animated a .images-con .images-box{transform:scale(1)} .company-business-con a .images-con .images{position:absolute;width:100%;height:100%;top:0;left:0;background:#fff;text-align: center;} /* 移除border-radius，使用父元素的圆角 */ .company-business-con a .images-con .images img{ /* position:absolute; */ /* width:100%; */ height:100%; object-fit:cover; top:0; left:0; opacity:.92; transform:none; } .company-business-con a .images-con .images iframe{ position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0; opacity:.92; transform:none; } .company-business-con a .images-con .thumb-icon{position:absolute;top:50%;left:50%;margin-top:-4rem;margin-left:-4rem;opacity:0;display:flex;align-items:center;justify-content:center;width:8rem;height:8rem;border-radius:50%;background:#E31332;transition:all .4s} .company-business-con a .images-con .thumb-icon i{transform:rotate(45deg);font-size:3rem;color:#fff} .company-business-con a .txt-con{position:relative;width:50%;text-align:center;z-index:1;display:flex; flex-direction:column; /* 修改为垂直方向布局 */ align-items:center; justify-content:center; height:100%; /* 确保占满父容器高度 */ } .company-business-con a .txt-con dl{ display:flex; flex-direction:column; justify-content:center; align-items:center; margin:0; height:100%; /* 确保占满父容器高度 */ } .company-business-con a .txt-con dl dt{font-size:2rem;font-weight:700;letter-spacing:-.025em;color:#000;line-height:1.1em;transition:all .4s} .company-business-con a .txt-con dl dd{font-size:1.2rem;font-weight:500;letter-spacing:-.025em;color:rgba(0,0,0,.6);line-height:1.625em;padding-top:2rem;transition:all .4s} .company-business-con a .txt-con .bg-txt{position:absolute;width:100%;display:block;bottom:-6.1rem;left:50%;transform:translateX(-50%);font-size:7rem;font-weight:700;letter-spacing:-.025em;color:#000;opacity:.05} @media all and (min-width:801px){.company-business-con.reverse a{flex-direction:row-reverse} .company-business-con.reverse a .images-con{padding-right:0;padding-left:2rem} } .company-business-con a:hover:before{background:#E31332} .company-business-con a:hover .images-con .thumb-icon{opacity:1} .company-business-con a:hover .txt-con dl dt{color:#fff} .company-business-con a:hover .txt-con dl dd{color:rgba(255,255,255,.6)} .company-business-con a:hover .txt-con .bg-txt{color:#fff} @media all and (max-width:1280px){.company-business-con a .txt-con .bg-txt{font-size:7rem} } @media all and (max-width:800px){.company-business-con{height:30rem} .company-business-con a{padding:2.5rem 1rem} .company-business-con a .images-con{width:100%;padding:0} .company-business-con a .images-con .images-box{padding-top:60%;border-radius:1rem;overflow:hidden} /* 新增overflow:hidden */ .company-business-con a .images-con .images{border-radius:0} /* 移除图片容器的圆角 */ .company-business-con a .images-con .thumb-icon{width:6rem;height:6rem;margin-top:-3rem;margin-left:-3rem} .company-business-con a .images-con .thumb-icon i{font-size:2rem} .company-business-con a .txt-con{width:100%;padding:3rem 0;height: 50%;} .company-business-con a .txt-con dl dd{font-size:1.0rem;} .company-business-con a .txt-con dl dt{font-size:1.6rem} .company-business-con a .txt-con .bg-txt{font-size:3rem;bottom:-1rem} } @media all and (max-width:480px){.company-business-con{height:26rem} .company-business-con a .images-con .images-box{padding-top:55%} } .about-intro-con01{text-align:center} .about-intro-con01 .logo img{max-width:400px;text-align:center} .about-intro-con01 .txt{font-size:1.2rem;line-height:1.66em;padding-top:7.2rem;text-align: left;} .about-intro-con02{margin-top:10rem} .about-history-top-con{position:relative;max-width:1620px;height:42rem;margin:0 auto;z-index:9} .about-history-top-con .con-box{position:absolute;max-width:46rem;top:11.5rem;left:5rem;background-color:#E31332;color:#fff;padding:4.5rem 4rem 5rem;height:28.7rem;box-sizing:border-box} .about-history-top-con .con-box .inner{position:relative;height:100%} .about-history-top-con .con-box .sub-tit{font-size:7.5rem;font-weight:600} .about-history-top-con .con-box .tit{display:block;font-size:2.1rem;font-weight:600;line-height:1.66;letter-spacing:-.055em;margin-top:3rem} .about-history-top-con .con-box .year-box{position:absolute;bottom:0;left:0;display:flex;margin:0 -1.1rem} .about-history-top-con .con-box .year-box .year{font-size:2.1rem;letter-spacing:-.055em;color:rgba(255,255,255,.4);padding:0 1.1rem;cursor:pointer;transition:all .4s} .about-history-top-con .con-box .year-box .year em{position:relative;display:block;font-style:italic;font-weight:700} .about-history-top-con .con-box .year-box .year.on,.about-history-top-con .con-box .year-box .year:hover{color:#fff} .about-history-top-con .bg{position:relative;z-index:-1;display:block;height:100%;background:url(/images/about_history_bg.jpg) no-repeat 70% center/cover} .about-history-top-con .bg:before{position:absolute;content:'';width:25.7rem;height:21.2rem;right:2.3rem;top:-11rem;background:url(/images/about_history_logo.png) no-repeat center/100%} .company-history{position:relative;padding-top:16rem} .company-history-wrapper{position:relative;padding-bottom:10rem} .company-history-wrapper:after{clear:both;display:block;content:""} .company-history-wrapper:before{position:absolute;top:3px;height:100%;width:1px;left:50%;margin-left:7.3rem;background-color:#eee;content:""} .company-history-wrapper:last-child{padding-bottom:0} .company-history-wrapper:last-child:before{display:none} .company-history-info-box{position:relative;float:right;width:45%} .company-history-info-box::before{position:absolute;right:100%;top:0;width:7px;height:7px;transform:translatex(50%);background-color:#000;border:12px solid #fff;border-radius:50%;content:"";transition:background .4s} .company-history-info{padding-left:10rem} .company-history-info .history-item{position:relative;padding-left:10.5rem;margin-bottom:4rem;} .company-history-info .history-month{position:absolute;left:0;top:0;font-size:2.5rem;line-height:1.1;letter-spacing:-.055em;font-weight:600;color:#000} .company-history-info .history-txt{position:relative;display:block;font-size:1.9rem;font-weight:600;line-height:1.5;letter-spacing:-.055em;color:#696969;padding-left:1.5rem} .company-history-info .history-month+.history-txt:before{position:absolute;content:'';width:5px;height:5px;background:#ddd;left:0;top:10px} .company-history-year{position:absolute;right:100%;padding-right:10rem;top:-15px;font-size:6rem;letter-spacing:-.055em;color:#000;font-weight:600;font-style:italic;transition:color .4s} .company-history-year:before{right:0} .about-intro-con03{margin-top:17rem}.about-photo-list .list-top{ margin-bottom:2.5rem; } .about-photo-list .list-top .big-list img{ max-width:100%; } .about-photo-list .list-bottom{ display:flex; align-items:center; } .about-photo-list .list-bottom .txt-box{ width:38.1%; } .about-photo-list .list-bottom .txt-box .txt{ font-size:2.1rem; font-weight:400; letter-spacing:-.025em; color:#888; line-height:1.3em; padding-bottom:1rem; } .about-photo-list .list-bottom .txt-box .tit{ font-size:8rem; font-weight:600; letter-spacing:-.025em; color:#000; } .about-photo-list .list-bottom .nav-list-box{ position:relative; width:61.9%; padding-right:19.5rem; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .about-photo-list .list-bottom .nav-list{ margin:0 -1.2rem; } .about-photo-list .list-bottom .nav-list .swiper-slide{ position:relative; margin:0 .2rem; } /* 不变形开始 */ .about-photo-list .list-bottom .nav-list .swiper-slide span { position: relative; display: block; width: 100%; height: 0; padding-top: 100%; overflow: hidden; background: #000; } .about-photo-list .list-bottom .nav-list .swiper-slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* 防止图片变形 */ } .about-photo-list .list-bottom .nav-list .swiper-slide.swiper-slide-thumb-active span:before { opacity: 0; position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; border: 5px solid #E31332; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; transition: all 0.4s; } /* 不变形 */ .about-photo-list .list-bottom .nav-list .swiper-slide.swiper-slide-thumb-active span:before{ opacity:0; position:absolute; content:''; width:100%; height:100%; top:0; left:0; border:5px solid #E31332; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; z-index:1; transition:all .4s; } .about-photo-list .list-bottom .nav-list .swiper-slide span:before{ opacity:0; position:absolute; content:''; width:100%; height:100%; top:0; left:0; border:0px solid #E31332; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; z-index:1; transition:all .4s; } .about-photo-list .list-bottom .nav-list .swiper-slide.swiper-slide-visible span:before{ opacity:1; } .about-photo-list .list-bottom .list-btn-wrap button{ font-size:2.5rem; color:rgba(255,255,255,.5); } .about-photo-list .list-bottom .list-btn-wrap button.slick-prev{ margin-right:1rem; } .about-photo-list .list-bottom .list-btn-wrap button.slick-next{ margin-left:1rem; } .about-photo-list .list-bottom .list-btn-wrap{ position:absolute; display:flex; align-items:center; justify-content:center; width:18rem; height:100%; right:0; top:0; background:#E31332; } .about-photo-list .list-bottom .list-btn-wrap .photo-conuter{ font-size:1.6rem; font-weight:400; letter-spacing:-.025em; color:rgba(255,255,255,.5); } .about-photo-list .list-bottom .list-btn-wrap .photo-conuter .cur-num{ font-size:3.5rem; color:#fff; vertical-align:middle; } @media all and (max-width:1280px){ .about-photo-list .list-bottom .nav-list-box{ padding-right:14.3rem; } .about-photo-list .list-bottom .list-btn-wrap{ width:11.8rem; } .about-photo-list .list-bottom .txt-box .tit{ font-size:7rem; } .company-history-wrapper:before{ margin-left:0; left:0; } .company-history-info-box{ width:50%; } .about-photo-list .list-bottom .list-btn-wrap button.slick-prev{ margin-right:.5rem; } .about-photo-list .list-bottom .list-btn-wrap button.slick-next{ margin-left:.5rem; } .about-photo-list .list-bottom .list-btn-wrap .photo-conuter .cur-num{ font-size:2.5rem; } } @media all and (max-width:800px){.about-intro-con01 .logo img{max-width:80%} .about-intro-con01 .txt{padding-top:5rem} .about-intro-con02{margin-top:10rem} .about-history-top-con{height:30rem} .about-history-top-con .bg{background:url(/images/about_history_bg.jpg) no-repeat 72% center/cover} .about-history-top-con .bg:before{width:13.5rem;height:11rem;top:-5.5rem} .about-history-top-con .con-box{width:100%;max-width:none;left:0;padding:6.5rem 4rem 7rem;top:25rem} .about-history-top-con .con-box .sub-tit{font-size:5rem} .about-history-top-con .con-box .tit{font-size:2.1rem;line-height:1.66;margin-top:3rem} .about-history-wrap>.area{padding:0} .company-history{padding-top:43rem} .company-history-wrapper{padding-bottom:5rem} .company-history-info-box{width:100%;padding-left:4.5rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .company-history-year{position:relative;right:auto;padding-right:0;top:0;margin-bottom:3.5rem;font-size:5rem} .company-history-info{padding-left:0} .company-history-info .history-item{padding-left:8rem} .company-history-info .history-month{top:0;font-size:2.4rem} .company-history-info .history-month+.history-txt:before{top:1rem} .company-history-info .history-txt{font-size:1.8rem} .about-intro-con03{margin-top:10rem} .about-photo-list{position:relative;padding-top:13.5rem} .about-photo-list .list-bottom .txt-box{position:absolute;top:0;left:0;width:100%} .about-photo-list .list-bottom .txt-box .txt{font-size:1.8rem} .about-photo-list .list-bottom .txt-box .tit{font-size:5rem} .about-photo-list .list-bottom .nav-list-box{width:100%;padding-right:0} .about-photo-list .list-bottom .nav-list{margin:0 -1rem} .about-photo-list .list-bottom .list-btn-wrap{position:relative;width:100%;height:7rem;margin-top:2rem} .about-photo-list .list-bottom .list-btn-wrap button.slick-prev{margin-right:1rem} .about-photo-list .list-bottom .list-btn-wrap button.slick-next{margin-left:1rem} .about-photo-list .list-bottom .list-btn-wrap .photo-conuter .cur-num{font-size:3.5rem} } :root{--header-fixed-height:100px;--header-font-size:20px;--sub-menu-height:55px;--full-height:100vh;--transition-custom:all 0.4s ease-in-out;--transition-custom1:all 0.6s ease-in-out;--transition-custom2:all 0.8s ease-in-out;--transition-custom3:all 0.2s ease-in-out;--btn-hover-bg1:#d11d24;--btn-hover-bg2:#7b7a7a;--btn-hover-bg3:#f5f5f5;--btn-hover-transition:background-color 0.3s ease-in-out} .area{max-width:1480px;margin:0 auto} #visual{position:relative;width:100%;height:35rem} #visual .visual-img-con{position:absolute;top:0;left:0;width:100%;height:35rem;overflow:hidden} #visual .visual-img-inner{width:100%;height:100%;transform:scale(1.1,1.1);transition:transform 5s linear;background-size:cover!important} #visual .visual-txt-con{position:relative;z-index:1;display:table;width:100%;height:100%;color:#fff;box-sizing:border-box} #visual .visual-txt-con .table-cell-layout{padding-top:calc(100px/ 2)} #visual .visual-txt-container{position:relative;width:100%} #visual .visual-tit{font-size:5rem;font-weight:600;} #visual.active .visual-img-inner{transform:scale(1,1) rotate(.002deg)} #visual.active .visual-tit{opacity:1;transform:translateX(0)} #topMenu01{position:absolute;bottom:4rem;left:0;width:100%;height:55px;z-index:11} #topMenu01 .side-menu-inner{width:100%;height:55px} #topMenu01 .side-menu-inner ul{display:flex;align-items:center;justify-content:flex-end} #topMenu01 .side-menu-inner ul li{margin-right:4.5rem;max-width:200px} #topMenu01 .side-menu-inner ul li:last-child{margin-right:0} #topMenu01 .side-menu-inner ul li>a{display:table;position:relative;width:100%;height:55px;line-height:1.2;color:#fff;font-size:1.9rem;letter-spacing:-.055em;font-weight:400;transition-property:color} #topMenu01 .side-menu-inner ul li>a>span{display:table-cell;vertical-align:middle} #topMenu01 .side-menu-inner ul li.on>a,#topMenu01 .side-menu-inner ul li>a:hover{font-weight:600;color:#E31332} #topMenuM{display:none} #content.wide{padding:8rem 0 0} #content.wide1{padding:4rem 0 0} .mouse-pointer{position:fixed;top:0;left:0;z-index:10000;pointer-events:none} .mouse-pointer .pointer-txt{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:10rem;height:10rem;font-size:1.6rem;color:#fff;font-weight:500;letter-spacing:.015em;transition:all 0.4s ease-in-out;transform:translate(-50%,-50%) scale(.5);border-radius:100%;opacity:0;visibility:hidden} .mouse-pointer .pointer-arrow{position:absolute;left:50%;top:50%;display:block;width:6rem;height:6rem;border:.2rem solid #fff;box-sizing:border-box;transition:var(--transition-custom);transform:translate(-50%,-50%) scale(.5);border-radius:100%;opacity:0;visibility:hidden} @media (max-width:800px){.mouse-pointer,.pointer-arrow,.pointer-txt{visibility:hidden;opacity:0} } @media all and (max-width:1540px){.area{padding:0 30px;max-width:none} } @media all and (max-width:1680px){#visual .visual-txt-con{padding:0 30px;max-width:none} } @media all and (max-width:1280px){ #content.wide{padding:6rem 0 0 0} #content.wide1{padding:3rem 0 0 0} } @media all and (max-width:800px){#visual{z-index:1000} #visual .visual-tit{font-size:5rem} #topMenu01{display:none} #topMenuM{display:block;position:absolute;bottom:0;left:0;width:100%;height:55px;border-top:1px solid rgba(255,255,255,.2);z-index:11} #topMenuM .top-menu-wrapper{position:absolute;top:0;left:0;right:0;height:55px} #topMenuM .top-menu-inner{position:relative;height:55px} #topMenuM .menu-location{position:relative;box-sizing:border-box;width:100%} #topMenuM .menu-location>.cur-location{position:relative;display:block;width:100%;text-align:left;height:55px;padding:0 30px;padding-right:calc(30px + 3rem);box-sizing:border-box} #topMenuM .menu-location>.cur-location span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:55px;color:#fff;font-weight:400;font-size:1.9rem} #topMenuM .menu-location>.cur-location .arrow{position:absolute;top:50%;right:30px;width:19px;height:19px;margin-top:-9.5px;font-size:19px;color:#fff} #topMenuM .menu-location .location-menu-con{display:none;position:absolute;top:100%;left:-1px;right:-1px;border-bottom:1px solid #ddd;background-color:#fff;z-index:11} #topMenuM .menu-location .location-menu-con li{border-top:1px solid #eee} #topMenuM .menu-location .location-menu-con li a{display:flex;align-items:center;width:100%;height:auto;padding:10px 30px;font-size:1.5rem;line-height:1.5;box-sizing:border-box} #topMenuM .menu-location .location-menu-con li.on{position:relative} #topMenuM .menu-location .location-menu-con li.on a{color:#E31332;font-weight:500} #contentInfoCon{margin:0 auto 5rem} #contentInfoCon .content-tit{font-size:3rem} #contentInfoCon .content-sub-tit{margin-top:1.5rem;font-size:1.8rem;line-height:1.5} #content.wide{padding:10rem 0 0 0} #content.wide1{padding:5rem 0 0 0} } /* about */ #contentInfoCon{position:relative;margin:0 auto 10rem;text-align:center;padding-top: 5rem;} #contentInfoCon .content-tit{font-size:4rem;font-weight:600;letter-spacing:-.02em;color:#000;line-height: 1;} #contentInfoCon .content-sub-tit{font-size:4rem;letter-spacing:-.055em;color:#000;line-height: 1;} @media all and (max-width:800px){ #contentInfoCon{margin:0 auto 5rem} #contentInfoCon .content-tit{font-size:3rem} #contentInfoCon .content-sub-tit{margin-top:1.5rem;font-size:1.8rem;line-height:1.5} }