* { margin: 0; padding: 0; } body, html { color: black; margin: 0; position: relative; } .product-container { width: 1566px; margin: 0 auto; } .team .product-container { max-width: 1200px; margin: 0 auto; } .ccc { padding: 72px 0 164px; } .header-container { margin: 0 416px; } .footer-container { width: 1500px; margin: 0 auto; } .product2-container { width: 1168px; margin: 0 auto; } .product3-container { width: 100%; margin: 0 auto; } .service-container { width: 1400px; margin: 0 auto; } .about-container { width: 1380px; margin: 0 auto; } .about3-container { width: 1336px; margin: 0 auto; } .about4-container { width: 1370px; margin: 0 auto; } .allbox2 { background: #F5F5F7; } @font-face { font-family: "Manrope3"; src: url('../font/Manrope3.otf'); } @font-face { font-family: "Manrope3-Bold"; src: url('../font/Manrope3-Bold.otf'); } @font-face { font-family: "Manrope3-light"; src: url('../font/Manrope3-light.otf'); } @font-face { font-family: "Manrope3-Bold"; src: url('../font/Manrope3-Bold.otf '); } @font-face { font-family: "Manrope3-ExtraBold"; src: url('../font/Manrope3-ExtraBold.otf'); } @font-face { font-family: "PingFangMedium"; src: url('../font/PingFangMedium.ttf'); } @font-face { font-family: "PingFangBold"; src: url('../font/PingFangBold.ttf'); } @font-face { font-family: "PingFangLight"; src: url('../font/PingFangLight.ttf'); } /* header */ .header-right-l { display: flex; align-items: center; justify-content: center; cursor: pointer; } .header-right-l:hover .hrl-img1 { display: none; } .header-right-l:hover .hrl-img2 { display: block; } .hrl-img2 { display: none; } .header { position: fixed; top: 0; left: 0; right: 0; z-index: 999999; transition: ease all .5s; background: transparent; } .header:hover { transition: ease all .5s; background: rgba(0, 0, 0, .8); backdrop-filter: blur(50px); } .header-box { display: flex; justify-content: space-between; align-items: center; height: 84px; line-height: 84px; } .header-nav a { color: #c8c8c8; font-size: 15px; font-family: "PingFangMedium"; transition: all .5s; position: relative; display: block; } .h-a { display: block; } .header-nav>ul>li:hover .h-a { color: white; transition: all .5s; } .header-nav>ul>li:hover a { font-weight: 400 !important; transition: all .5s; } .header-nav span { margin-right: 7.5px; font-size: 13px; font-family: "Manrope3-Bold"; font-weight: 300; } .header-nav>ul { list-style-type: none; margin: 0; } .header-nav>ul>li { display: inline-block; margin-right: 33px; } .header-nav>ul>li>a::after { content: ''; position: absolute; bottom: 30%; left: 0; width: 0; height: 1px; background: white; transition: all .5s; } .header-nav>ul>li>a:hover::after { width: 100%; transition: all .5s; } .header-right { display: flex; align-items: center; color: white; width: 30.7%; justify-content: flex-end; } .header-right-l { margin-right: 20px; } .header-right-r { padding-left: 16px; position: relative; height: 50px; line-height: 50px; } .header-right-r a { color: #c8c8c8; font-size: 12px; font-family: "Manrope3-Bold"; line-height: normal; } .header-right-r a:hover { color: white; } .header-right-xiala { position: absolute; top: 50px; right: 0; width: 65px; background: white; border-radius: 5px; display: flex; flex-direction: column; } .header-right-xiala a { color: black; font-size: 13px; font-family: "Manrope3-Bold"; text-align: center; padding: 10px 0; } .header-logo img { max-width: 100%; } .allbox .header { position: absolute; top: 0; left: 0; right: 0; } .newtop-fixed { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; } .bottommm-fixed { position: fixed; z-index: 99999; top: 72px; left: 0; right: 0; } .en { font-family: "Manrope3"; } .en2 { font-family: "Manrope3-light"; background: transparent !important; color: #333 !important; padding: 0 !important; } .en3 { font-family: "Manrope3"; } .en4 { font-family: "Manrope3-Bold" !important; } .en5 { font-family: "PingFangMedium" !important; } .en6 { font-family: "PingFangLight" !important; } .allbox { padding-top: 84px; } .allbox .header { background: rgba(0, 0, 0, .8); backdrop-filter: blur(46px); } .header-fixed { z-index: 999; background: rgba(0, 0, 0, .8); backdrop-filter: blur(46px); } .header-bj {} .allbox-product { padding-top: 0; } .allbox-product .header:hover { background: rgba(0, 0, 0, .8); /* backdrop-filter: blur(50px); */ transition: all .1s; } .category05-banner-img { height: 710px; } .category05-banner-img img { height: 100%; object-fit: cover; } .header-box1 { overflow-y: scroll; height: calc(100vh - 84px); } .header-box1 { position: absolute; top: 84px; left: 0; right: 0; z-index: 11; background: white; display: none; box-shadow: 0 16px 16px rgb(0 0 0 / 10%); } .header-box1::-webkit-scrollbar { width: 0; height: 0; background: #dcdcdc; } .header-box1::-webkit-scrollbar-thumb { border-radius: 25px; background: #787878; } .header-box1-top { position: relative; } .header-box1-top::after { content: ''; position: absolute; top: 84px; left: 0; right: 0; height: 1px; background: #AAA9A9; box-shadow: 1px 4px 10px 3px rgba(0, 0, 0, .08); } .header-box1-top-box .header-box1-top-mini-a { color: black; margin: 0 0 36px 0; font-size: 20px; font-family: "Manrope3"; } .header-box1-top-box { display: flex; position: relative; } .header-box1-top-box .header-box1-top-mini { width: 25%; line-height: 84px; } /* 11.3 */ .header-box1-top-box-btn { position: absolute; right: 0; top: 5px; } .header-box1-top-box-btn:hover { cursor: pointer; } .header-box1-top-mini-ul { margin: 0; list-style-type: none; } .header-box1-top-mini-ul h2 { color: black; font-size: 20px; font-family: "Manrope3"; margin: 0 0 8px 0; color: rgba(0, 0, 0, .85); } .header-box1-top-mini-ul p { color: black; font-size: 13px; font-family: "Manrope3-light"; margin: 0 0 8px 0; line-height: normal; color: rgba(0, 0, 0, .65); height: 20px; } .header-box1-top-mini-ul-img { transition: all .2s; width: 211px; height: 130px; overflow: hidden; margin-bottom: 36px; background: #e6e6e6; display: flex; align-items: center; justify-content: center; position: relative; } .header-box1-top-mini-ul-img img { object-fit: cover; width: 100%; height: 100%; } .header-box1-top-mini-ul li:hover .header-box1-top-mini-ul-img { background: #f5f5f5; transition: all .2s; } .hbtmut { position: absolute; width: 100%; left: 0; right: 0; bottom: 10px; text-align: center; padding: 0 8px; color: rgba(0, 0, 0, .65); font-size: 12px; font-family: "Manrope3-light"; line-height: normal; } .header-box1-bottom-title h1 { color: black; font-size: 20px; font-family: "Manrope3-Bold"; padding: 50px 0 25px 0; margin: 0 0 40px 0; border-bottom: 1px solid #AAA9A9; } .header-box1-bottom-minibox { width: 18%; margin-right: 2%; } .header-box1-bottom-minibox:last-child { width: 40%; margin: 0; } .header-box1-bottom-minibox:last-child .header-box1-bottom-minibox-ul { transform: translateX(0); } .header-box1-bottom-minibox:last-child h2 { transform: translateX(40px); } .header-box1-bottom-box { display: flex; } .header-box1-bottom-minibox h2 { margin: 0 0 31px 0; color: black; font-size: 16px; font-family: "Manrope3-Bold"; letter-spacing: 49; } .header-box1-bottom-minibox h2:hover { cursor: pointer; } .header-box1-bottom-minibox span { margin-left: 12px; } .header-span2 { display: none; } .header-box1-bottom-minibox-ul { list-style-type: none; margin: 0; display: none; overflow-y: scroll; padding-left: 40px; transform: translateX(-40px) translateY(-10px); padding-top: 10px; height: 305px; } .header-box1-bottom-minibox-ul::-webkit-scrollbar { width: 3px; height: 3px; background: #dcdcdc; } .header-box1-bottom-minibox-ul::-webkit-scrollbar-thumb { border-radius: 25px; background: #787878; } .header-box1-bottom-minibox-ul li { margin-bottom: 31px; line-height: normal; } .header-box1-bottom-minibox-ul li:last-child { margin: 0; } .header-box1-bottom-minibox-ul a { color: black; font-family: "Manrope3-light"; font-size: 16px; } .header-box1-bottom-box { margin-bottom: 70px; } .header-box1-bottom-btn { text-align: center; } .header-box1-bottom-btn-a { padding: 16px 45px; border: 1px solid #99999A; color: #99999A; border-radius: 25px; transition: all .2s; display: initial!important; } .header-box1-bottom-btn-a:hover { background: black; color: white; transition: all .2s; border-color: black; } .header-box1-bottom-minibox-ul .on a { padding: 10px 30px; background: #333436; color: white; border-radius: 25px; white-space: nowrap; } .header-box1-bottom-minibox-ul .on { transform: translateX(-36px); } /* footer */ .footer { background-size: cover; background-repeat: no-repeat; background-position: center !important; height: 840px; padding: 257px 0 0 0; margin-top: 55px; position: relative; z-index: 10; } .footer-top { display: flex; justify-content: space-between; margin-bottom: 132px; } .footer-l { display: flex; } .footer-box { margin-right: 86px; text-align: left; } .footer-title { margin-bottom: 34px; position: relative; } .footer-title::after { content: ''; position: absolute; bottom: -13px; left: 0; width: 12px; height: 1px; background: #7E7E7E; } .footer-box:last-child { margin: 0; } .footer-box-ul { list-style-type: none; margin: 0; } .footer-box-ul li { margin-bottom: 14px; } .footer-box-ul li:last-child { margin: 0; } .footer-title h1 { font-size: 14px; margin: 0; font-family: "Manrope3-light"; font-weight: bold; color: #363636; } .footer-box-ul a { font-size: 14px; margin: 0; font-family: "PingFangMedium"; color: #717474; transition: all .1s; } .footer-box-ul a:hover { color: #363636; transition: all .1s; } .footer-r-title h1 { margin: 0; font-size: 34px; font-weight: bold; font-family: "Manrope3-ExtraBold"; } .footer-r-title { position: relative; margin-bottom: 97px; text-align: left; } .footer-r-title::after { content: ''; position: absolute; top: -20px; left: 0; width: 43px; height: 2px; background: black; } .footer-r-input { background: transparent; outline: none; border: 1px solid #D2D2D2; border-radius: 25px; width: 396px; height: 50px; box-shadow: 1px 2px 3px rgb(0 0 0 / 8%) inset; padding: 0 24px; color: #A7A7A7; margin-right: 6px; } .footer-r-input::-webkit-input-placeholder { color: #A7A7A7; } .footer-r-a { padding: 17px 37.5px; background: black; border-radius: 25px; } .footer-r-mini { display: flex; } .footer-r-btn { margin-bottom: 33px; } .footer-r-mini-img { margin-right: 19px; } .footer-r-mini-img:last-child { margin: 0; } .footer-r { transform: translateY(20px); } .footer-bottom { color: #B5B4B4; display: flex; align-items: center; position: relative; } .footer-bottom-l { margin-right: 32px; } .footer-bottom-r a { color: #B5B4B4; font-size: 15px; font-family: "PingFangMedium"; } .footer-xian { width: 100%; max-width: 100%; margin-bottom: 4px; } /* banner */ .banner img { width: 100%; max-width: 100%; height: 100vh; object-fit: cover; } .banner-img { position: relative; } .banner-title { position: absolute; left: 522px; bottom: 176px; } .banner-title h4 { color: #00DFFF; font-family: "Manrope3"; font-weight: bold; font-size: 23px; margin: 0 0 4px 0; } .banner-title h1 { font-family: "Manrope3-ExtraBold"; font-size: 65px; color: white; margin: 0 0 12px 0; line-height: 80px; } .banner-title p { font-family: "Manrope3"; color: white; font-size: 22px; margin-bottom: 85px; font-weight: 500; letter-spacing: 0.15em; } .banner-title a { transition: all .5s; border: 1px solid #00DFFF; font-family: "PingFangMedium"; font-size: 14px; color: #00DFFF; border-radius: 50px; padding: 14px 32px; } .banner-title a:nth-child(2){ margin-left: 30px; } .banner-title a{margin-right: 30px;} .banner-title a:hover { background: #00DFFF; color: black; transition: all .5s; } .banner-title-aaa { padding: 20.5px 55.96px !important; font-size: 15px !important; } .banner-lunbo .swiper-pagination { position: absolute; right: 197px; bottom: 184px; width: auto; left: auto; } .banner-lunbo .swiper-pagination-bullet { line-height: normal; background: transparent; border-radius: 0 !important; font-size: 14px; font-family: "Manrope3-ExtraBold"; font-weight: bold; color: #7D7D7D; opacity: 1; position: relative; padding: 0 0 9px 0; border-bottom: 2px solid #7D7D7D; margin: 0 10px 0 0 !important; width: 80px; height: auto; text-align: left; } .banner-lunbo .swiper-pagination-bullet::after { content: ''; width: 0; height: 2px; background: white; position: absolute; left: 0; bottom: -2px; transition: all .5s; } .banner-lunbo .swiper-pagination-bullet:hover::after { width: 100%; transition: all .5s; } .banner-lunbo .swiper-pagination-bullet-active { color: white; position: relative; } .banner-lunbo .swiper-pagination-bullet-active::after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: 0; bottom: -2px; transition: all 8s; } .banner-box { position: absolute; top: -40px; left: 0; width: 100%; opacity: 0; transition: all .5s; } .banner-lunbo .swiper-pagination-bullet:hover .banner-box { opacity: 1; transition: all .5s; } .banner-box-img { height: 66px; background: white; text-align: right; line-height: 68px; width: 80px; } .banner-box-img img { width: 70%; max-width: 100%; } .banner-box-p { text-align: left; margin: 0; font-size: 12px; white-space: nowrap; padding-top: 20px; color: white; font-family: "Manrope3-light"; } .banner-box-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .banner-video { width: 100%; height: 100vh; object-fit: fill; display: block; } /* category01 */ .category01-top-title { display: flex; align-items: center; justify-content: center; flex-direction: column; } .fangda { opacity: 1; width: 100px; height: 100px; } .fangda img { max-width: 100%; } .bufangda { margin-right: 27px; } .category01 { overflow: hidden; width: 1540px; margin: 0 auto; } .category01-top { height: 462px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .category01-top-title p { font-size: 13px; font-weight: bold; font-family: "Manrope3-ExtraBold"; color: #333436; margin-bottom: 7px; margin-bottom: 8px; } .category01-top-title h1 { font-size: 80px; color: #333436; font-weight: bold; font-family: "Manrope3-light"; margin: 0; } .category01-bottom { background-size: 100% 100%; background-position: center; height: 462px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; } .category01-bottom h1 { font-size: 25px; color: #221E1F; font-weight: bold; font-family: "Manrope3"; margin: 81px 0 42px 0; position: relative; } .category01-bottom h1::after { content: ''; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; background: #221E1F; } .category01-bottom p { text-align: center; font-weight: 400; font-size: 15px; font-family: "Manrope3-Bold"; margin-bottom: 33px; } .category01-bottom h4 { font-size: 30px; color: black; margin: 0 0 28px 0; } .category01-bottom a { transition: all .5s; border: 1px solid black; font-family: "Manrope3-light"; font-size: 14px; color: black; border-radius: 50px; padding: 11.5px 32px; } .category01-bottom a:hover { background: black; color: white; transition: all .5s; } /* category02 */ .category02 { height: 691px; } .category02-lunbo { height: 100%; position: relative; } .category02-lunbo-btt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1119px; z-index: 1; } .category02-lunbo .swiper-slide-active { width: 50% !important; overflow: hidden; } .category02-lunbo .swiper-slide-prev, .category02-lunbo .swiper-slide-next { width: 25% !important; overflow: hidden; } .category02-lunbo .swiper-slide-active img { width: 100%; } .category02-img { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; } .category02-img img { height: 100%; width: 100%; object-fit: cover; } .category02-title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .category02-title h1 { font-family: "PingFangMedium"; font-weight: bold; font-size: 90px; color: white; margin: 71px 0 114px 0; transition: ease all .5s; position: relative; } .category02-title h1::after { opacity: 0; content: ''; height: 5px; width: 44px; background: white; position: absolute; bottom: -40px; left: 0; right: 0; margin: 0 auto; } .category02-title p { line-height: normal; font-family: "Manrope3-light"; font-weight: 400; font-size: 21px; color: white; text-align: center; margin-bottom: 39px; max-width: 700px; transform: translateY(10px); line-height: 33px; } .category02-minibox { display: flex; justify-content: center; } .category02-radio { width: 17px; height: 17px; border-radius: 50%; border: 2px solid white; margin: 0 auto; background: transparent; } .category02-radio2 { position: relative; } .category02-radio2::after { content: ''; position: absolute; bottom: 50%; right: -72px; width: 72px; height: 2px; background: white; transform: translateY(50%); } .category02-time { text-align: center; margin: 0 24px; width: 38px; } .category02-time2 p { font-size: 18px !important; font-weight: bold !important; } .category02-time p { font-size: 16px; font-weight: 500; font-family: "Manrope3-Bold"; color: white; margin: 7px 0 0 0; } .category02-radio3 { background: white; } .category02-title { opacity: 0; } .category02-lunbo .swiper-slide-active:hover h1 { color: white; } .category02-lunbo .swiper-slide-active:hover .category02-title { background: rgba(0, 0, 0, .5); } .category02-lunbo .swiper-slide-active:hover .category02-title h1::after { opacity: 1; } .category02-lunbo .swiper-slide-active .category02-title { cursor: pointer; opacity: 1; transition: all .2s; background: transparent; } .category02-lunbo .swiper-button-next { right: 50px; } .category02-lunbo .swiper-button-prev { left: 50px; } .category02-lunbo .swiper-slide-active .swiper-button-next { opacity: 1; } .category02-lunbo .swiper-slide-active .swiper-button-prev { opacity: 1; } .category02-lunbo:hover .swiper-slide-active .swiper-button-prev, .category02-lunbo:hover .swiper-slide-active .swiper-button-next { opacity: 1; } .category02-btn {} .category02-lunbo .swiper-slide-active .category02-title p { opacity: 0; } .category02-lunbo .swiper-slide-active .category02-title h1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .category02-lunbo .swiper-slide-active .category02-btn { opacity: 0; } .category02-lunbo .swiper-slide-active .category02-box { opacity: 0; margin-bottom: 48px; } .category02-lunbo .swiper-slide-active:hover h1 { transition: all .5s; margin: 71px 0 114px; top: auto; left: auto; transform: none; position: relative; bottom: 0; } .category02-lunbo .swiper-slide-active:hover .category02-title-p { transform: translateY(-10px); opacity: 1; } .category02-title p { transform: translateY(-10px); } .category02-lunbo .swiper-slide-active:hover p { opacity: 1; } .category02-lunbo .swiper-slide-active:hover .category02-btn { opacity: 1; } .category02-lunbo .swiper-slide-active:hover .category02-box { opacity: 1; } .category03-minibox-center-img>img { height: 100%; } .category02-lunbo2 { height: 590px; position: relative; } .category02-lunbo2 p { margin: 0; } .category02-lunbo2 .swiper-slide-active { width: 50% !important; overflow: hidden; } .category02-lunbo2 .swiper-slide-prev, .category02-lunbo2 .swiper-slide-next { width: 25% !important; overflow: hidden; } .category02-lunbo2 .swiper-slide-active img { width: 100%; } .category02-lunbo2 .swiper-slide-active .category02-title { cursor: pointer; opacity: 1; transition: ease all .5s; } .category02-lunbo2 .swiper-button-next { right: 4%; opacity: 0; } .category02-lunbo2 .swiper-button-prev { left: 4%; opacity: 0; } .category02-lunbo2 .swiper-slide-active .category02-title p { opacity: 0; } .category02-lunbo2 .swiper-slide-active .category02-title h1 { transform: translateY(180px); } .category02-lunbo2 .swiper-slide-active .category02-btn { opacity: 0; } .category02-lunbo2 .swiper-slide-active:hover h1 { transform: translateY(0px); transition: ease all .5s; } .category02-lunbo2 .swiper-slide-active:hover p { transform: translateY(-10px); opacity: 1; } .category02-lunbo2 .swiper-slide-active:hover .category02-btn { opacity: 1; } .category02-lunbo2 .swiper-slide-active .swiper-button-prev, .category02-lunbo2 .swiper-slide-active .swiper-button-next { opacity: 1; } /* category03 */ .category03 { margin-top: 45px; } .category03-box-top { display: flex; } .category03-box-top .category03-bj { width: 50%; height: 691px; position: relative; overflow: hidden; } .category03-box-top-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .category03-bj .pro-img { transition: all .5s; width: 100%; max-width: 100%; } .category03-bj:hover img { transition: all .5s; transform: scale(1.1); } .category03-minibox-bottom-img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .category03-box-bottom>div { width: 33.33%; } .category03-box-bottom { display: flex; } .category03-minibox-center-img { height: 923px; position: relative; overflow: hidden; } .category03-minibox-center-img img { width: 100%; max-width: 100%; transition: all .5s; } .category03-minibox-center-img:hover img { transform: scale(1.1); transition: all .5s; } .category03-minibox-center { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .category03-box-top-img, .category03-minibox-bottom-img { text-align: center; } .category03-box-top-img h1 { font-family: "Manrope3"; font-weight: 400; font-size: 46px; color: black; padding: 74px 0 0 0; margin: 0; display: flex; align-items: center; justify-content: center; } .category03-box-top-img:hover img { transform: scale(1.0); } .category03-box-top-img span { margin-right: 15px; } .category03-box-top-img p { font-family: "PingFangMedium"; font-size: 24px; color: black; margin-bottom: 33px; line-height: normal; } .category03-box-btn { color: #00DFFF; border: 1px solid #00DFFF; padding: 8px 26px; border-radius: 25px; text-align: center; transition: all .5s; } .category03-box-btn:hover { background: #00DFFF; color: black; transition: all .5s; } .category03-minibox-bottom-img h1 { font-family: "Manrope3"; font-weight: 500; font-size: 38px; color: black; padding: 55px 0 0 0; margin: 0; display: flex; align-items: center; justify-content: center; } .category03-minibox-bottom-img h1 span { margin-right: 15px; } .category03-minibox-bottom-img:hover img { transform: scale(1.0) !important; } .category03-minibox-bottom-img p { font-family: "Manrope3-light"; font-size: 19px; color: black; margin-bottom: 33px; line-height: normal; } .category03-box-colorwhite:hover img { transform: scale(1.0) !important; } .category03-box-colorwhite p, .category03-box-colorwhite h1, .category03-box-colorwhite h3 { color: white; } .category03-minibox-center h1 { font-family: "Manrope3"; font-weight: 400; font-size: 30px; margin: 0 0 18px 0; } .category03-minibox-center h3 { font-family: "Manrope3"; font-weight: 400; font-size: 38px; text-align: center; max-width: 393px; margin: 0; } .category03-minibox-center p { font-family: "Manrope3-light"; font-size: 19px; margin-bottom: 33px; line-height: normal; } .category03-minibox-img { position: relative; height: 461.5px; overflow: hidden; } .category03-minibox-img .pro-img { width: 100%; max-width: 100%; transition: all .5s; } .category03-minibox-img:hover img { transition: all .5s; transform: scale(1.1); } .category03-minibox-img img { height: 100%; width: 100%; object-fit: cover; transition: all .5s; display: block; } /* category04 */ .category04 { margin-top: 45px; position: relative; } .category04-top { height: 710px; background: black; text-align: center; } .category04-top h1 { color: white; font-size: 99px; font-family: "PingFangMedium"; font-weight: bold; margin: 0 0 120px 0; position: relative; padding-top: 95px; } .category04-top h1::after { content: ''; position: absolute; bottom: -43px; left: 50%; transform: translateX(-50%); width: 37px; height: 3px; background: white; } .category04-bottom { height: 650px; } .category04-box { position: absolute; left: 2%; right: 2%; top: 356px; max-width: 1700px; margin: 0 auto; } .category04-minibox { position: relative; width: 1791px; } .category04-img { height: 355px; background-position: center; background-size: cover; background-repeat: no-repeat; } .category04-title { height: 573px; background: #EFEFEF; padding: 53px 0 84px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: black; justify-content: space-between; } .category04-title h4 { text-align: center; font-size: 24px; font-family: "Manrope3-Bold"; font-weight: 500; margin: 0; padding-bottom: 24px; max-width: 353px; position: relative; margin-bottom: 27px; } .category04-title h4::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 25px; height: 2px; background: black; } .category04-title h1 { text-align: center; font-size: 40px; font-family: "Manrope3-Bold"; font-weight: 500; margin: 0 0 27px 0; max-width: 500px; } .category04-title p { text-align: center; font-size: 15px; font-family: "Manrope3"; margin-bottom: 55px; max-width: 426px; line-height: 25px; } .category04-title2 { padding: 32px 0 20px; } .category04-title2 p { margin-bottom: 35px; } .category04-title2 .category02-btn { margin: 0; } .category04-center-title { display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; height: 100%; } .category04-center-title-top { width: 353px; text-align: left; margin-bottom: 20px; } .category04-center-title h1 { font-weight: bold; font-size: 38px; font-family: "Manrope3"; text-align: center; max-width: 353px; margin: 0 0 17px 0; } .category04-center-title h3 { font-weight: 400; font-size: 20px; font-family: "Manrope3"; text-align: center; max-width: 353px; margin: 0; } .category04-lunbo-box { position: relative; height: 928px; width: 573px; margin: 0; display: flex; flex-wrap: wrap; } .category04-lunbo-box::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .5); display: none; } .category04-lunbo .swiper-slide-active .category04-lunbo-box::after { display: none; } .category04-box .swiper-button-prev { left: -50px; right: auto; text-align: left; z-index: 3; } .category04-box .swiper-button-next { right: -50px; left: auto; text-align: right; z-index: 3; } /* category05 */ .category05-banner-img img { width: 100%; max-width: 100%; } .category05-banner-img { position: relative; } .category05-banner-title { position: absolute; top: 0; left: 0; right: 0; bottom: 19%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .category05-banner-title h1 { text-align: center; font-size: 58px; font-family: "PingFangMedium"; margin: 0 0 54px 0; color: white; padding-bottom: 38px; position: relative; } .category05-banner-title h1::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; background: white; height: 2px; width: 31px; margin: 0 auto; } .category05-banner-title p { text-align: center; font-size: 22px; font-family: "Manrope3"; margin: 0 auto; color: white; max-width: 920px; letter-spacing: 28; } .category05-lujing { height: 46px; line-height: 46px; background: white; } .category05-lujing-box { color: #A9A8A8; text-align: left; font-weight: 400; } .category05-lujing-box a { font-size: 14px; font-family: "Manrope3"; color: #A9A8A8; font-weight: 400; } .category05-input { height: 198px; background: #EFEFEF; margin-bottom: 55px; display: flex; align-items: center; } .category05-form h4 { padding: 0 0 8px 24px; margin: 0; font-size: 15px; font-family: "Manrope3"; font-weight: bold; } .category05-form input { color: #898989; outline: none; width: 100%; height: 100%; border-radius: 25px; border: 1px solid #D2D2D2; padding: 0 23px; font-size: 12px; font-weight: bold; font-family: "Manrope3-Bold"; box-shadow: 1px 2px 3px rgb(0 0 0 / 8%) inset; } .category05-form input::-webkit-input-placeholder { font-size: 12px; font-weight: bold; font-family: "Manrope3-Bold"; color: #898989; } .category05-input-box { position: relative; width: 537px; height: 50px; } .category05-form svg { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); } .category05-input-xiala { z-index: 2; display: none; position: absolute; top: 45px; left: 0; right: 0; background: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, .1); min-width: 1300px; } .category05-input-xiala ul { margin: 0; list-style-type: none; } .category05-input-xiala ul li { padding: 10px 23px; } .category05-input-xiala a { font-size: 12px; font-weight: bold; font-family: "Manrope3-Bold"; color: #898989; } .category05-svg:hover { cursor: pointer; } .category05-box { display: flex; flex-wrap: wrap; margin-bottom: 141px; } .category05-minibox { width: 378px; height: 501px; background: #EFEFEF; margin: 0 18px 18px 0; position: relative; } .category05-minibox:nth-child(4n) { margin-right: 0; } .category05-minibox-img { height: 383px; overflow: hidden; border-bottom: 1px solid white; position: relative; } .category05-minibox-img-new { position: absolute; left: 0; top: 54px; background: #C41C37; color: white; border-top-right-radius: 25px; border-bottom-right-radius: 25px; padding: 13px 27px 13px 9px; font-size: 12px; font-family: "Manrope3-Bold"; } .category05-minibox-img img { width: 100%; height: 100%; object-fit: cover; } .category05-minibox-titlebox { display: flex; align-items: stretch; justify-content: space-between; height: auto; padding: 31px 21px 15px 21px; background: #EFEFEF; } .category05-minibox-btn span { padding: 13.5px 14px; background: #BE3A32; border-radius: 25px; font-size: 12px; font-family: "Manrope3-light"; color: white; } .category05-minibox-tltle h5 { font-size: 17px; font-family: "Manrope3-Bold"; color: black; margin: 0 0 10px 0; } .category05-minibox-tltle p { font-size: 15px; font-family: "PingFangMedium"; color: black; margin-bottom: 12px; } .category05-minibox-tltle-br { height: 1px; width: 15px; background: black; } .category05-minibox-bj { transition: ease all .5s; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .8); display: flex; flex-direction: column; justify-content: center; align-items: center; } .category05-minibox-bj h1 { font-size: 19px; font-family: "Manrope3-Bold"; color: white; text-align: center; padding-bottom: 13px; margin: 0 0 21px 0; } .category05-minibox-bj h1 { position: relative; } .category05-minibox-bj h1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 15px; height: 1px; background: white; } .category05-minibox-bj p { font-size: 15px; font-family: "PingFangMedium"; color: white; text-align: center; line-height: 25px; margin: 0; letter-spacing: 21; font-weight: 600; width: 90%; } .category05-minibox-bj-btn { width: 57px; height: 57px; border-radius: 100%; border: 1px solid white; text-align: center; line-height: 57px; color: white; font-weight: bold; margin-top: 51px; } .category05-minibox:hover .category05-minibox-bj { opacity: 1; transition: ease all .5s; } /* category06 */ .category06 {} .category06-top { height: 72px; border-top: 1px solid #d6d6d6; background: white; border-bottom: 1px solid #d6d6d6; } .category06-top-box { display: flex; justify-content: center; align-items: center; height: 72px; } .category06-top-box .bbbh1 { color: black; font-weight: 500; font-family: "PingFangMedium"; font-size: 14px; margin: 0; } .category12-navtop h1 { font-size: 24px; font-family: "PingFangMedium"; color: black; margin: 0; } .category12-navtop .category06-top-box { justify-content: space-between; } .category12-navtop .product2-container { width: 1230px; } .category12-navtop .category06-top-box-ul li { margin-right: 3px; } .category07-top h1 { font-size: 24px; font-family: "PingFangMedium"; color: black; margin: 0; } .category07-top .category06-top-box { justify-content: space-between; } .category07-top .product2-container { width: 1230px; } .category07-top .category06-top-box-ul li { margin-right: 3px; } .category06-new h1 { font-size: 24px; font-family: "Manrope3"; color: black; margin: 0; } .category06-new .category06-top-box { justify-content: space-between; } .category06-new .product2-container { width: 1230px; } .category06-new .category06-top-box-ul li { margin-right: 3px; } .category13-top h1 { font-size: 24px; font-family: "Manrope3-Bold"; color: black; margin: 0; } .category13-top .category06-top-box { justify-content: space-between; } .category13-top .product2-container { width: 1230px; } .category13-top .category06-top-box-ul li { margin-right: 3px; } .category06-top-box-ul { margin: 0; list-style-type: none; } .category06-top-box-ul li { display: inline-block; margin-right: 50px; } .category06-top-box-ul li:last-child { margin: 0; } .category06-top-box-ul a { font-size: 14px; font-family: "PingFangMedium"; color: black; padding: 8px 18px; background: transparent; border-radius: 25px; } .category06-top-box-ul .on a { background: #333436; color: white; } .category06-bottom-minibox { width: 100%; } .category06-bottom-minibox { font-size: 15px; color: black; line-height: 20px; } .category06-bottom-minibox td { padding: 53px 0; white-space: nowrap; min-width: 200px; font-family: "PingFangMedium"; } .category06-bottom-minibox td:first-child { font-size: 22px; font-family: "PingFangMedium"; padding: 53px 0 !important; font-weight: 600; vertical-align: top; } .category06-bottom-minibox td:nth-child(2) { font-family: "PingFangMedium"; font-size: 15px; font-weight: 600; } .category06-bottom-box-table { overflow-x: scroll; z-index: 1; } .category06-bottom-box-table-left { overflow: hidden; background: white; z-index: 2; position: absolute; top: 0; left: 0; bottom: 0; max-width: 400px; } /* .category06-bottom-minibox tr:nth-child(5){position: relative;} .category06-bottom-minibox tr:nth-child(5) td{padding-top: 276px;} */ .category06-bottom-minibox tr:first-child td { font-family: "PingFangMedium"; font-weight: 600; font-size: 22px; } /* .category06-bottom-minibox tr:nth-child(5){border-bottom: 1px solid transparent;} */ .table-img { position: absolute; left: 200px; top: 0; right: 0; padding: 55px 0 0 0 !important; } .table-img div { display: flex; margin-right: 69px; } .table-img div:last-child { margin-right: 0; } .category06-bottom-minibox tr { border-bottom: 1px solid #E7E7E7; } .category06-bottom-minibox tr:last-child { border: none; } .category06-bottom-box-alltable { display: flex; position: relative; } .category06-bottom-box-jszc { background: #F5F5F7; } .category06-bbj-01-minibox { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 0; } .category06-bbj-01-minibox-btn { padding: 10px 25px; background: #005AFF; margin: 0 8px; border-radius: 25px; } .category06-bbj-01-minibox-btn a { color: white; font-size: 14px; font-family: "Manrope3-Bold"; font-weight: bold; } .category06-bbj-01 { display: flex; flex-direction: column; align-items: center; padding: 84px 0 120px; border-bottom: 1px solid #DFE0E1; } .category06-bbj-01-box h5 { text-align: center; position: relative; margin-bottom: 0; padding-bottom: 30px; font-weight: "PingFangMedium"; font-weight: bold; margin-top: 20px; } .category06-bbj-01-box h5::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 2px; width: 20px; background: black; } .category06-bbj-01-box h1 { text-align: center; font-size: 65px; font-family: "PingFangMedium"; margin: 50px 0; font-weight: bold; } .category06-bbj-02 h1 { margin: 0; padding: 120px 0 50px 0; text-align: center; font-size: 65px; font-family: "PingFangMedium"; font-weight: bold; } .category06-bbj-02-box { display: flex; justify-content: center; } .category06-bbj-02-box-img { margin: 0 8px; width: 188px; } .category06-bbj-02-box-img img { width: 100%; } .category06-bbj-02 { padding-bottom: 124px; border-bottom: 1px solid #DFE0E1; } .category06-bbj-03 { padding: 120px 0 200px; text-align: center; } .category06-bbj-03-topimg { margin-bottom: 20px; } .category06-bbj-03-toptitle { margin-bottom: 67px; } .category06-bbj-03-btn { background: #005AFF; padding: 10px 25px; border-radius: 30px; display: inline-block; margin-bottom: 48px; } .category06-bbj-03-btn a { color: white; font-size: 21px; font-family: "PingFangMedium"; } .c06-lunbo-img2 { width: 439px; height: 271px; max-width: 100%; } .c06-lunbo-img { position: relative; max-width: 700px; margin: 0 auto; } .c06-lunbo-img-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 85px; display: flex; align-items: center; justify-content: center; } .c06-lunbo-img-btn img { transform: scale(1.4); opacity: .5; } .c06-lunbo-img-btn img:hover { opacity: 1; } .category06-bbj-03-lunbo { margin-bottom: 71px; } .category06-bbj-03-lunbo2 { margin-bottom: 203px; } .category06-bbj-03-lunbo .swiper-button-prev { left: 24%; transform: translateY(-50%); } .category06-bbj-03-lunbo .swiper-button-next { right: 24%; transform: translateY(-50%); } .category06-bbj-03-lunbo2 .swiper-button-prev { left: 24%; transform: translateY(-50%); } .category06-bbj-03-lunbo2 .swiper-button-next { right: 24%; transform: translateY(-50%); } .c06-lunbo-b a { font-size: 12px; font-family: "Manrope3-light"; } .category04-lunbo .swiper-slide:nth-child(odd) .category04-lunbo-box { flex-direction: column-reverse; } .category04-lunbo .swiper-slide:nth-child(even) .category04-lunbo-box { flex-direction: column; } .c06-lunbo-img a { color: black; } .c06-lunbo-b { padding: 5px 10px; background: #DCDCDE; display: inline-block; border-radius: 25px; } .c06-lunbo-title { margin-bottom: 12px; } .c06-lunbo-title h1 { margin: 20px 0 0 0; line-height: normal; font-size: 16px; font-family: "Manrope3-light"; } .category06-bbj-04 { height: 344px; background: white; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0, 0, 0, .1); margin-bottom: 202px; } .category06-bbj-04 p { margin: 0 auto; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 25px; font-family: "Manrope3-Bold"; letter-spacing: 0.29px; max-width: 1155px; } .category06-bbj-04-h1 { margin: 0 0 26px 0; font-family: "PingFangMedium"; font-size: 65px; font-weight: bold; } .category06-bbj-04:hover p { overflow: auto; white-space: initial; max-width: 1155px; } .category06-bbj-05-input input { background: transparent; outline: none; border-top: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2; border-left: 1px solid #D2D2D2; border-right: none; width: 430px; height: 50px; padding: 0 24px; color: #A7A7A7; border-bottom-left-radius: 25px; border-top-left-radius: 25px; box-shadow: 1px 2px 3px rgb(0 0 0 / 8%) inset; } .category06-bbj-05-input input::-webkit-input-placeholder { color: #A7A7A7; } .category06-bbj-05-input { display: flex; justify-content: center; align-items: center; margin-bottom: 100px; } .category06-bbj-05-btn { width: 70px; height: 50px; background: transparent; border-top: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2; border-right: 1px solid #D2D2D2; border-left: none; border-bottom-right-radius: 25px; border-top-right-radius: 25px; display: flex; align-items: center; justify-content: center; box-shadow: -1px 1px 2px rgb(0 0 0 / 8%) inset; } .category06-bbj-05-btn svg:hover { cursor: pointer; } .category06-bbj-05-minibox { display: flex; align-items: center; justify-content: space-between; padding: 25.5px 0; border-bottom: 1px solid #B4B5B5; } .category06-bbj-05-minibox h3 { font-size: 22px; font-family: "PingFangMedium"; margin: 0; font-weight: bold; } .category06-bbj-05-minibox-xiala:hover { cursor: pointer; } .category06-bbj-05-box-title { padding-bottom: 33px; border-bottom: 1px solid #B4B5B5; } .category06-bbj-05-box-title ul { list-style-type: none; margin: 0; } .category06-bbj-05-box-title li { font-size: 15px; font-family: "PingFangLight"; text-align: left; line-height: 23px; font-weight: 600; } .category06-bbj-05-box .on svg { transform: rotateX(180deg); } .category06-bbj-05-box .on { border-bottom: none; } .category06-bbj-05-box { padding: 0 1.5px; } .category06-bottom-box .category05-box { padding-top: 116px; margin-bottom: 207px; } .category06-imglunbo { margin-bottom: 15px; } .category06-imglunbo img { width: 100%; max-width: 100%; } .mySwiper { max-width: 650px; } .mySwiper2 { margin: 64px 0; } .mySwiper2 .swiper-wrapper { align-items: center; } .category06-imglunbo .swiper-container { padding: 10px 0; } .mySwiper2 .swiper-slide { display: flex; align-items: center; justify-content: center; } .mySwiper2 .swiper-slide .swiper-slide-img { width: 311px !important; height: 192px !important; background: #efefef; box-shadow: 3px 3px 10px rgba(0, 0, 0, .3); } .mySwiper2 .swiper-slide .swiper-slide-img img { mix-blend-mode: multiply; height: 100%; object-fit: cover; } .mySwiper2 .swiper-slide-active .swiper-slide-img { width: 1242px !important; height: 767px !important; } .mySwiper2 .swiper-slide-prev .swiper-slide-img, .mySwiper2 .swiper-slide-next .swiper-slide-img { position: relative; } .mySwiper2 .swiper-slide-prev .swiper-slide-img { margin-right: 61px; } .mySwiper2 .swiper-slide-next .swiper-slide-img { margin-left: 61px; } .mySwiper2 .swiper-slide-prev .swiper-slide-img::after, .mySwiper2 .swiper-slide-next .swiper-slide-img::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); } .mySwiper .swiper-slide .swiper-slide-img { position: relative; width: 120px; height: 74px; background: #efefef; box-shadow: 3px 3px 10px rgba(0, 0, 0, .3); } .mySwiper .swiper-slide .swiper-slide-img::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; } .mySwiper .swiper-slide .swiper-slide-img img { mix-blend-mode: multiply; height: 100%; object-fit: contain; } .mySwiper .swiper-slide-active .swiper-slide-img::after { background: rgba(0, 0, 0, .5); } .mySwiper2 .swiper-button-next { width: auto; height: auto; right: 21%; } .mySwiper2 .swiper-button-prev { width: auto; height: auto; left: 21%; } /* category07 */ .category07-top { background: white; border: none; } .category07-lunbo { position: relative; overflow: hidden; height: 890px; } .category07-lunbo .swiper-slide-img { height: 100%; } .category07-lunbo .swiper-slide-img img { width: 100%; height: 100%; } .category07-lunbo .swiper-pagination { bottom: 45px; left: 50%; transform: translateX(-50%); right: auto; position: absolute; top: auto; } .category07-lunbo .swiper-pagination-bullet { height: 17px; width: 1px; background: white; opacity: .5; margin: 24px 0 0 0 !important; position: relative; color: white; } .category07-lunbo .category07-pagination-title { position: absolute; left: 38px; } .category07-lunbo .swiper-pagination-bullet-active { opacity: 1; width: 2px; height: 25px; font-size: 20px; font-weight: bold; } .category07-pagination-title { writing-mode: horizontal-tb; width: 100px; } .fp-viewing-0 .category06-top { position: absolute; top: 76px; left: 0; right: 0; z-index: 7; } .fp-viewing-1 .category06-top { position: absolute; top: 76px; left: 0; right: 0; z-index: 7; } .fp-viewing-2 .category06-top { position: absolute; top: 76px; left: 0; right: 0; z-index: 7; } .fp-tableCell { display: block !important; } /* category08 */ .category08 {} .category08-banner { position: relative; } .category08-banner img { width: 100%; max-width: 100%; } .category08-banner-title { position: absolute; top: 147px; left: 528px; } .category08-banner-title h1 { font-size: 57px; margin: 0; color: #015AFD; font-weight: bold; font-family: "PingFangMedium"; } .category08-l-input { width: 17px; height: 17px; border-radius: 50px; border: 1px solid #A7A9AB; position: relative; z-index: 1; } .category08-l-input:hover { cursor: pointer; } .category08-l-box { display: flex; flex-direction: column; align-items: flex-start; } .category08-l-input[type=checkbox], .category08-l-input[type=radio] { margin: 0 0 0 19px; } .category08-l-lable { display: flex; align-items: center; margin-bottom: 22px; justify-content: center; font-size: 16px; font-weight: normal; font-family: "PingFangMedium"; } .category08-l-box input[type="radio"]::before { position: absolute; content: ""; width: 17px; height: 17px; display: block; border-radius: 50%; background: white; border: 1px solid #A7A9AB; z-index: 2; } .category08-l-box input[type="radio"]:checked::after { position: absolute; content: ""; top: 4px; left: 4px; width: 9px; height: 9px; border-radius: 50%; background: #A7A9AB; z-index: 3; } .category08-minibox-l { width: 17%; border-right: 1px solid #A7A9AB; padding-top: 52px; padding-left: 3%; } .category08-minibox-r { width: 75%; } .category08-minibox { display: flex; padding: 0 60px; justify-content: space-between; } .category08-r-title h3 { text-align: left; margin: 0 0 31px 0; font-size: 16px; font-family: "PingFangMedium"; } .category08-r-title h3:hover { cursor: pointer; } .category08-l-box2 ul { list-style-type: none; } .category08-l-box2 li { text-align: left; margin-bottom: 33px; font-size: 16px; font-family: "Manrope3"; } .category08-l-box2 a { color: #A7A9AB; } .category08-l-box2 a:hover { color: black; } .category08-l-box2 a.on { color: black; } .category08-minibox-r .category05-minibox:nth-child(4n) { margin-right: 18px; } /* .category08-minibox-r .category05-minibox:nth-child(3n){margin-right: 0;} */ .category08-minibox-r-top { display: flex; align-items: center; } .category08-r-top-btn { margin-right: 91px; } .category08-minibox-r-bottom { padding-top: 111px; } .category08-minibox-r-top { padding-top: 52px; } .category08-r-top-btn a { font-size: 14px; font-family: "PingFangMedium"; color: black; padding: 8px 18px; border-radius: 25px; background: transparent; } .category08-minibox-r-top .on a { background: #333436; color: white; } /* category09 */ .category09 { padding: 132px 0 0 0; } .category09-title h1 { margin: 0 0 80px 0; padding-bottom: 75px; border-bottom: 1px solid #BFC0C1; font-size: 38px; font-family: "PingFangMedium"; } .category09-box h5 { margin: 0 0 23px 0; font-size: 33px; font-family: "PingFangMedium"; } .category09-box ul { list-style-type: none; margin: 0 0 72px 0; } .category09-box li { margin-bottom: 12px; line-height: 30px; font-size: 19px; font-family: "PingFangMedium"; text-align: justify; } .category09-box span { font-size: 25px; font-family: "PingFangMedium"; } .category09-box ul:last-child li { font-size: 25px; } .category09-box { margin-bottom: 54px; } .category09-minibox { text-align: center; padding-bottom: 117px; margin-bottom: 60px; border-bottom: 1px solid #9FA0A2; } .category09-minibox h3 { margin: 0 0 30px 0; font-size: 18px; color: #808080; font-family: "PingFangLight"; } .category09-bottom { text-align: left; margin-bottom: 135px; } .category09-bottom a { font-size: 25px; font-family: "PingFangMedium"; color: #015AFD; } .category-minibox-img img { width: 230px; } /* category10 */ .category10-box { padding: 72px 0 164px; background: #F5F5F7; } .category10-minibox { max-width: 1035px; margin: 0 auto; } .category10-minibox-top img { width: 100%; max-width: 100%; } .category10-minibox-top { position: relative; margin-bottom: 25px; border-radius: 25px; overflow: hidden; } .category10-minibox-title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; } .category10-minibox-title h1 { text-align: left; margin: 61px 0 23px; font-size: 25px; font-family: "PingFangMedium", "Manrope3-Bold"; font-weight: 600; } .category10-minibox-title h3 { font-size: 14px; font-family: "PingFangMedium"; text-align: center; margin: 0 0 21px 0; line-height: 24px; max-width: 550px; letter-spacing: 23; } .category10-minibox-top-time { display: flex; align-items: center; font-family: "PingFangMedium"; font-size: 13px; margin-bottom: 28px; } .category10-minibox-top-time p { margin: 0 22px 0 0; } .category10-minibox-top-time span { padding: 2px 10px; background: #727171; color: white; border-radius: 25px; } .category10-minibox-top-btn a { font-size: 14px; font-family: "Manrope3-light"; color: #005AFF; } .category10-bb-r .category10-minibox-title { position: static; align-items: flex-start; } .category10-bb-r .category10-minibox-title h3 { text-align: left; margin: 0 0 12px 0; } .category10-bb-r .category10-minibox-title h1 { margin: 0 0 12px 0; } .category10-bb-r .category10-minibox-top-time { margin-bottom: 18px; } .category10-bb { display: flex; align-items: flex-start; padding: 46.5px 26px; background: white; border-radius: 25px; margin-bottom: 22px; } .category10-bb-l { margin-right: 28px; } .category10-bb-l img { width: 367px; height: 227px; object-fit: cover; } .category10-fenye ul { list-style-type: none; margin: 0; text-align: center; display: flex; align-items: center; justify-content: center; } .category10-fenye li { display: flex; margin-right: 31px; align-items: center; justify-content: center; } .category10-fenye li:last-child { margin-right: 0; } .category10-fenye li:first-child a {} .category10-fenye li:last-child a {} .category10-fenye a { color: white; font-size: 20px; font-family: "PingFangMedium"; display: flex; } .category10-fenye li { width: 33px; height: 33px; background: #D7D7D7; border-radius: 50px; line-height: 33px; cursor: pointer; } .category10-fenye .on a { color: white; } .category10-fenye .active a { color: white; } .category10-fenye .on { background: black; } .category10-fenye .active { background: black; } .category10-fenye .on svg { fill: white; } .category10-fenye .active svg { fill: white; } .category10-fenye { margin-top: 110px; } .category06-bottom-minibox td { padding-left: 30px; } /* .category10-fenye svg{padding-top: 2px;} */ /* category11 */ .category11 { padding: 133px 0 100px 0; } .category11-title h1 { margin: 0 0 51px 0; font-size: 32px; } .category11-title p { margin: 0; } .category11-title span { margin-right: 33px; } .category11-title { padding-bottom: 20px; margin-bottom: 93px; border-bottom: 1px solid #BFC0C1; font-family: 'PingFangBlod'; } .category11-box { font-family: 'PingFangMedium'; } .category11-box-img { margin-bottom: 95px; } .category11-box-img img { width: 100%; max-width: 100%; } .category11-box-top { font-size: 36px; font-family: "PingFangMedium"; line-height: 60px; margin-bottom: 155px; } .category11-box-top span { color: #666666; } .category11-box-top img { max-width: 100%; } .category11-box-bottom p { font-size: 36px; font-family: "Manrope3-light"; font-weight: bold; margin: 60px 0 0 0; } .category11-box-bottom p:first-child { margin: 0; } .category11-box-bottom { font-size: 22px; font-family: "Manrope3-light"; line-height: 50px; padding-bottom: 127px; } .category11-btnbox { display: flex; align-items: center; justify-content: center; } .category11-btn a { padding: 8px 23px; border-radius: 25px; border: 1px solid #BDBDBD; color: #BDBDBD; margin: 0 83px; } .category11-btn a:hover { background: #BDBDBD; color: #fff } /* category12 */ .category12-nav { position: relative; } .category12-navtop { position: absolute; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, .2); border: none; z-index: 2; } .category12 {} .category12-banner img { width: 100%; max-width: 100%; height: 100vh; } .category12-banner { position: relative; } .category12-banner .category06-top { top: 84px; } .category12-banner-title { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; z-index: 1; padding-right: 272px; } .category12-banner-title h1 { text-align: right; padding: 0 0 36px 0; margin: 0 0 36px 0; position: relative; font-size: 38px; color: black; font-family: "PingFangMedium"; right: 390px; } .category12-banner-title h1::after { content: ''; position: absolute; bottom: 0; right: 120px; height: 2px; width: 30px; background: black; } .category12-banner-title p { text-align: left; font-size: 18px; color: black; font-family: "PingFangMedium"; margin: 0; line-height: 35px; transform: translateX(20px); } .category12-minibox { display: flex; flex-wrap: wrap; height: 100vh; } .screenThree .category12-minibox { flex-direction: row-reverse; } .categroy-minibox-b { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .categroy-minibox-b img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; } .category12-minibox-bt { max-width: 540px; min-width: 540px; } .category12-minibox-bt h1 { padding-bottom: 36px; margin: 0 0 36px 0; position: relative; color: #333436; font-size: 38px; font-family: "PingFangMedium"; } .category12-minibox-bt h1::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 28px; background: #333436; } .category12-minibox-bt p { color: #4C4D4E; font-size: 18px; font-family: "PingFangMedium"; margin-bottom: 145px; line-height: 35px; text-align: justify; } .category12-minibox-bt:last-child p { margin-bottom: 0; } .category12-box2-title h1 { text-align: center; /* margin: 95px 0 60px 0; */ margin: 0 0 45px 0; font-size: 38px; font-size: 38px; font-family: "PingFangMedium"; } .category12-box2-minibox { display: flex; } .category12-box2-minibox2-l { width: 76.94%; } .category12-box2-minibox2-r { width: 23.16%; } .category12-box2-minibox2-l-t { display: flex; width: 100%; } .category12-box2-minibox-img { width: 100%; height: 100%; padding: 12px; } .category12-box2-minibox-img img { width: 100%; height: 100%; } .category12-box2-minibox2-l-b { display: flex; width: 100%; } .category12-box2-minibox2-r { display: flex; flex-direction: column; } .category12-box2-minibox2-l-t-l { width: 30%; } .category12-box2-minibox2-l-t-r { width: 70%; } .category12-box2-minibox-img { position: relative; } .category12-box2-minibox-img-title { transition: ease all .5s; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; border-radius: 15px; flex-direction: column; } .category12-box2-minibox-img-title p { transition: ease all .5s; color: white; font-size: 20px; font-family: "PingFangMedium"; text-align: center; margin: 0 0 20px 0; transform: translateY(10px); } .category12-box2-minibox-img-title span { transition: ease all .5s; font-size: 16px; color: white; font-family: "PingFangMedium"; text-align: center; display: none; line-height: 28px; } .category12-box2-minibox-img-title:hover { background: rgba(0, 0, 0, .5); transition: ease all .5s; } .category12-box2-minibox-img-title:hover span { transition: ease all .5s; display: block; } .category12-box2-minibox-img-title:hover p { transform: translateY(0); transition: ease all .5s; } .category12-box2 { /* margin-bottom: 85px; */ display: flex; justify-content: center; align-items: center; height: 100%; } .category12-box3 .clearfix { list-style-type: none; margin: 0; display: flex; flex-wrap: wrap; } .category12-box3 .clearfix li { width: 33.33%; margin-bottom: 54px; } .part-left { width: 20%; overflow: hidden; border-right: 1px solid #ADAFB2; padding-top: 134px; } .part-right { width: 80%; overflow: hidden; padding-left: 90px; } .category12-box3-box { display: flex; } .picture h5 { font-size: 38px; font-weight: bold; font-family: "Manrope3-light"; padding: 0 0 33px 0; margin: 0 0 58px 0; } .picture h3 { font-size: 72px; font-family: "Manrope3"; font-weight: 400; margin: 74px 0 31px 0; } .picture p { font-size: 18px; font-family: "PingFangMedium"; line-height: 30px; margin-bottom: 241px; } .picture-img {} .picture-img img { max-width: 100%; } .clearfix a { padding: 8px 17px; background: transparent; border-radius: 25px; font-size: 20px; font-family: "Manrope3-light"; font-weight: 300; color: #7D7D7D; } .clearfix .on a { color: white; background: #333436; } .category12-box3-box { position: relative; padding-top: 100px; } .category12-box3-box .swiper-button-prev { background: #F3F4F4; left: 0; border-radius: 50px; display: flex; align-items: center; justify-content: center; } .category12-box3-box .swiper-button-next { background: #F3F4F4; left: 48px; border-radius: 50px; display: flex; align-items: center; justify-content: center; } .category12-box3 { height: 100%; display: flex; align-items: center; justify-content: center; } .part-right-h1 { font-size: 38px; font-family: "Manrope3-light"; margin: 0; } .prl2-main .swiper-container { position: initial; } .part-right-lunbo2 .part-right-lunbo2-btn { position: absolute; left: 0; top: 22px; min-width: 84px; } .picture .swiper-container { overflow: inherit; } .prl2-main { width: 497px; overflow: hidden; height: 370px; position: relative; padding-top: 69px; } /* category13 */ .category13-top { border-bottom: 1px solid #E3C1E3; } .category13 .category08-banner-title h1 { color: black; } .category13-box { padding: 86px 0 90px; } .category13-box-all { padding: 25px 21px 126px 21px; background: white; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); } .category13-box1 { display: flex; flex-wrap: wrap; justify-content: space-between; } .category13-box1-l { width: 811px; } .category13-box1-r { width: 501px; } .category13-box1-l-b { display: flex; } .category13-box1-l-ul { list-style-type: none; margin: 0; padding-top: 3px; } .category13-box-h1 { font-size: 40px; font-family: "PingFangMedium"; margin: 0 0 22px 0; color: black; font-weight: 600; } .category13-box-p { font-size: 25px; font-family: "PingFangMedium"; margin-bottom: 23px; color: black; font-weight: 600; } .category13-box1-l-ul li { font-size: 16px; font-family: "Manrope3-light"; margin-bottom: 21px; color: black; letter-spacing: 37; font-weight: 300; } .category13-box1-l-img { margin-right: 9px; } .category13-table { width: 100%; } .category13-table td { transform: translateY(14px); font-size: 16px; font-family: "Manrope3-light"; font-weight: 300; color: black; padding: 12.93px 0; } .category13-table tr:first-child td { transform: none; width: 12%; } .category13-table tr:first-child td:first-child { width: 50%; } .category13-table tr:first-child td:nth-child(3) { width: 26%; } .category13-table td:first-child { transform: none; } .category13-box2-box { display: flex; align-items: center; } .category13-table-img { margin-right: 9px; } .category13-box-span { font-size: 14px; font-weight: bold; font-family: "PingFangMedium"; color: black; } .category13-box3-ul-top { padding-left: 24px !important; font-size: 14px !important; font-weight: bold !important; font-family: "Manrope3-light"; color: black; } .category13-box3-mini { display: flex; align-items: center; } .category13-box3-mini-img { margin-right: 6px; } .category13-box3-ul { list-style-type: none; margin: 0; } .category13-box3-ul li { padding: 7px 0; font-size: 16px; font-weight: 300; font-family: "Manrope3-light"; } .category13-box3-ul li span { font-family: "Manrope3-light"; } .category13-box3 { padding-bottom: 35px !important; width: 886px; } .category13-box4 { display: flex; justify-content: space-between; } .category13-box4-b { width: 32.2%; padding-bottom: 98px !important; } /* category14 */ .category14 { padding: 173px 0 191px; } .category14-minibox { display: flex; align-items: flex-start; margin: 0 0 20px 0; } .category14-allbox-h1 { font-size: 33px !important; font-family: "PingFangMedium" !important; margin: 0 0 45px 0 !important; color: #000000; font-weight: bold; } .category14-allbox-h5 { font-size: 19px; font-family: "Manrope3"; margin: 0 0 36px 0; color: #000000; line-height: 36px; } .category14-allbox-p { font-size: 19px; font-family: "Manrope3"; margin: 0 0 46px 0; color: #000000; line-height: 36px; } .category14-box-h2 { font-size: 25px; font-family: "Manrope3-Bold"; margin: 0 0 53px 0; } .category14-allbox-h2 { padding-bottom: 46px; margin: 0 0 50px 0; position: relative; } .category14-allbox-h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #BFBFBF; } .category14-minibox-p { font-size: 25px; font-family: "Manrope3-light"; color: #666666; margin: 0; line-height: 48px; } .category14-minibox-p2 { font-family: "Manrope3"; font-size: 19px; color: black; text-align: justify; } .category14-minibox p:first-child { min-width: 176px; } .category14-box { position: relative; } .category14-box::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #BFBFBF; } .category14-minibox:last-child { margin-bottom: 60px; padding-bottom: 60px; } .category14-allbox { margin-bottom: 133px; } .category14-allbox-b-h5 { font-size: 25px; font-family: "Manrope3-Bold"; margin: 0 0 30px 0; font-weight: 600; } .category14-allbox-b-p { font-size: 19px; font-family: "Manrope3"; margin: 0; letter-spacing: 2px; line-height: 34px; text-align: justify; } .category14-allbox-b { margin-bottom: 43px; } .category14-allbox-b:last-child { margin: 0; } .category14-allbox:last-child { margin: 0; } /* category15 */ .category15 { padding: 117px 0 0 0; } .category15-minibox { display: flex; align-items: center; } .category15-minibox-left { width: 60%; } .category15-minibox-right { width: 40%; box-shadow: 0 0 20px rgba(0, 0, 0, .2); } .category15-minibox-left-ul { list-style-type: none; } .category15-minibox-left-nav-h1 { font-size: 32px !important; font-weight: bold; font-family: "Manrope3-light"; color: black; margin: 0 0 23px 0 !important; } .category15-minibox-left-ul a { font-size: 18px; color: black; font-family: "PingFangMedium"; margin-right: 20px; } .category15-minibox-left-ul li { margin-bottom: 18px; display: flex; align-items: center; } .category15-box { margin-bottom: 258px; } .category15-lunbo-img { text-align: center; } .category15-lunbo-img img { width: 100%; object-fit: cover; } .category15-minibox-left-ul .on a { color: #015AFD; font-weight: 600; } .category15-jiantou { background: #015AFD; border-radius: 50%; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; } .category15-minibox-left-ul .on .category15-jiantou { display: flex; } .category15-minibox { position: relative; } .category15-minibox .swiper-button-prev { position: absolute; right: 43%; left: auto; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; opacity: 1; background: #D3D4D4; border-radius: 50%; } .category15-minibox .swiper-button-next { position: absolute; right: -90px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; opacity: 1; background: #D3D4D4; border-radius: 50%; } /* category16 */ .category16-banner { position: relative; } .category16-banner img { width: 100%; max-width: 100%; } .category16-banner h1 { color: #333436; } .category16-banner .category08-banner-title { right: 310px; left: auto; top: 105px; } .category16-input { text-align: right; margin: 46px 0 87px; position: relative; } .input16 { outline: none; border: 1px solid #C7C8C8; border-radius: 25px; padding: 15px 60px 15px 30px; width: 500px; font-size: 16px; color: #C7C8C8; box-shadow: 1px 2px 3px rgb(0 0 0 / 8%) inset; } .category16-btn { position: absolute; top: 50%; transform: translateY(-50%); right: 30px; display: flex; cursor: pointer; } .category16-box-h1 { text-align: center; margin: 0 auto !important; padding-bottom: 85px; font-size: 24px; line-height: 40px; color: #666666 !important; font-family: "Manrope3-ExtraBold"; } .category16-box-h2 { text-align: left; font-size: 34px; color: #222222; margin: 0 0 40px 0; } .category16-box-allnav { display: flex; align-items: center; justify-content: flex-start; padding: 23px; } .category16-minibox-title h3 { font-size: 24px; } .category16-minibox { padding: 45px 60px 20px 60px; } .category16-minibox-title h3 { margin: 0; padding-left: 20px; font-size: 20px; /* font-weight: bold; */ color: #333333; position: relative; border-left: 3px solid #333333; } .category16-box-nav { font-size: 16px; color: black; width: 20%; font-family: "Manrope3-light"; } .category16-box-h2-btn { position: absolute; right: 0; top: 71%; cursor: pointer; height: 35px; } .category16-box-h2-btn>img { height: 100%; object-fit: cover; } .category16-minibox-bottom { font-size: 16px; color: #666666; border-top: 1px solid #eee !important; padding: 23px 85px 50px 85px; display: none; } .category16-minibox-bottom-h4 { font-weight: bold; color: #222222; padding-bottom: 7px; margin: 0; line-height: 30px; } .category16-minibox-bottom-title { line-height: 30px; margin-bottom: 42px; } .category16-minibox { background: #f6f6f6; border: 1px solid #f6f6f6; cursor: pointer; } .category16-minibox:nth-child(4n-1) { background: white; } .category16-minibox-bottom { background: #f6f6f6; border: 1px solid #f6f6f6; cursor: pointer; } .category16-minibox-bottom:nth-child(4n) { background: white; } .category16-allminibox .on .category16-box-h2-btn { transform: rotateX(180deg); } /* category17 */ .category17-banner img { width: 100%; max-width: 100%; } .category17-banner { position: relative; } .category17 .c17-tth1 { top: 30%; } .c17-tth1 { position: absolute; top: 50%; transform: translateY(-50%); left: 20%; } .c17-tth1 h1 { font-size: 57px; font-family: "PingFangMedium"; margin: 0; font-weight: 600; } .category17-box { padding: 141px 0 0 0; } .category17-box-h1 { font-size: 38px; text-align: left; margin: 0 0 21px 0; padding-bottom: 52px; border-bottom: 1px solid #9C9D9E; font-family: "Manrope3"; } .newspan { font-family: "Manrope3-Bold"; } .category17-table { width: 100%; border-spacing: 0px 28px; border-collapse: separate; margin-bottom: 126px; } .category17-table tr { width: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, .3); border-radius: 15px; } .category17-table tr:first-child { box-shadow: none; } .category17-table tr:first-child td { background: transparent; font-size: 22px; color: #808080; padding-bottom: 15px; font-family: "Manrope3"; font-weight: normal; } .category17-table td:nth-child(1) { width: 14%; font-family: "Manrope3-Bold"; font-weight: 600; text-align: center; } .category17-table td:nth-child(2) { width: 8%; font-family: "Manrope3-Bold"; font-weight: 600; } .category17-table td { vertical-align: top !important; padding: 45px 30px; background: white; font-size: 22px; color: black; font-family: "Manrope3"; } .category17-table td a { color: black; } .category17-table td:first-child { border-radius: 15px 0 0 15px; } .category17-table td:last-child { border-radius: 0 15px 15px 0; } .category17-table td:nth-child(3) { width: 32%; font-size: 18px; } .category17-table td:nth-child(4) { width: 18%; font-size: 18px; padding: 45px 0; } .category17-table td:nth-child(5) { width: 24%; font-size: 18px; padding: 45px 0; } .category03-bj img { width: 100%; height: 100%; object-fit: cover; display: block; transition: all .5s; } .category02-lunbo .swiper-slide { width: 1119px !important; overflow: hidden; } .category02-lunbo .swiper-slide-prev, .category02-lunbo .swiper-slide-next { /* width: calc((100% - 1119px)/2) !important; */ overflow: hidden; } .category02-lunbo .swiper-slide-active { width: 1119px !important; height: 691px !important; } .category02-lunbo .swiper-button-next, .category02-lunbo .swiper-button-prev { width: auto; height: auto; top: 51.5%; opacity: 1; } .category06-bottom-minibox td:nth-child(1) { width: 200px; } .category06-bottom-minibox td:nth-child(2) { width: 200px; } .category06-bottom-box-table { width: 100%; } @media (min-width: 1921px) { .header .container { width: 100%; margin: 0; padding: 0 75px; } .header-right, .header-nav { width: 30%; } .header .row { margin: 0; } .footer { background-size: auto 100%; padding: 226px 0 0 0; } .category04-box { max-width: 1791px; margin: 0 auto; } .category03-minibox-img img { width: 100%; height: 100%; object-fit: cover; } .category03-minibox-center-img { width: 747px !important; } .category03-box-bottom>div { width: calc((100% - 747px)/2); } .footer-container { width: 1577px; } .footer-title h1 { font-size: 16px; font-weight: bold; } .footer-box-ul a { font-size: 16px; } .footer-r-title h1 { font-size: 41px; font-weight: bold; line-height: 41px; } .footer-r { transform: translateY(-5px) translateX(64px); } .footer-r-input { width: 471px; height: 60px; border-radius: 50px; } .footer-r-a { padding: 22px 45.1px; border-radius: 50px; } .footer-r-btn { margin-bottom: 38px; } .footer-r-mini { padding-left: 6px; } .footer-title::after { height: 2px; } } @media (max-width: 1921px) { .category04-minibox { width: 90%; margin: 0 auto; } .category04-lunbo-box { width: auto; height: auto; } .header-container { margin: 0 16%; } .ccc-b { width: 1200px !important; } .ccc-bb { width: 100% !important; } .ccc-bb-img img { width: 100% !important; height: auto !important; } .grid-cols-3 { gap: 0 47px; } .category09-box img { max-width: 100%; max-width: 100%; } .category12-box2 { zoom: .8; } .category12-box3 { zoom: .8; } .categroy-minibox-b { zoom: .8; } .category12-banner-title { zoom: .8; } .mySwiper2 .swiper-slide-active .swiper-slide-img { width: 926px !important; height: 584px !important; } .mySwiper2 .swiper-button-next { right: 23%; } .mySwiper2 .swiper-button-prev { left: 23%; } .header-box1-top-mini-ul-img { /*width: 90%;*/ } } /* 绗旇锟?*/ @media (max-width: 1750px) { .product3-container { width: 1400px; } .mySwiper2 .swiper-slide-active .swiper-slide-img { width: 674px !important; height: 434px !important; } .mySwiper2 .swiper-button-next { right: 23%; } .mySwiper2 .swiper-button-prev { left: 23%; } } @media (max-width: 1600px) { .category12-box3-box { padding-top: 0; } .category06-bbj-02 h1 { font-size: 55px; } .ccc-p { font-size: 14px !important; } .category06-bbj-04-h1, .category06-bbj-04-h1, .category06-bbj-01-box h1 { font-size: 55px; } .category13-box1-l { width: 59%; } .category13-box1-r { width: 39%; } .picture p { margin-bottom: 100px; } .category12-banner-title, .categroy-minibox-b, .screenFive .about-container, .screenFour .about-container { zoom: .7; } .category12-banner-title { top: 15%; } .category05-minibox-img { height: 295px; } .category05-minibox { height: 420px; } .category05-minibox { width: 100%; margin: 0; } .category05-minibox-img { display: flex; align-items: center; justify-content: center; } .category05-minibox-img img { height: auto; } .category05-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 45px 18px; } .category01 { width: 100%; } .category03-minibox-center-img { height: 677px; } .category03-minibox-img { height: 338.5px; } .category04-title { height: 483px; } .category04-minibox { width: 93%; } /* nav */ .header-nav a { font-size: 14px; } /* banner */ .banner-title h4 { font-size: 18px; } .banner-title h1 { font-size: 60px; line-height: normal; } .banner-title p { font-size: 16px; } .banner-title a { font-size: 16px; padding: 10px 24px; } .banner-title { left: 20%; top: 50%; transform: translateY(-50%); } .category02-title h1 { font-size: 60px; } .category02-title p { font-size: 16px; } .category03-box-top-img h1 { font-size: 28px; } .category03-box-top-img p { font-size: 16px; } .category03-box-top .category03-bj { height: 500px; } .category03-bj .pro-img { height: 100%; object-fit: cover; } .category03-minibox-img .pro-img { height: 100%; object-fit: cover; } .category03-minibox-bottom-img h1 { font-size: 24px; } .category03-minibox-center h3 { font-size: 24px; } .category03-minibox-center p { font-size: 16px; } .category04-top h1 { font-size: 60px; } .category04-title h1, .category04-center-title h1 { font-size: 24px; } .category12-banner-title { padding: 0; right: 10%; } .category12-minibox-bt p { margin-bottom: 60px; } .category08-banner-title { left: 15%; } .category17-table td { font-size: 18px; } .category17-table tr:first-child td { font-size: 18px; } /* container */ .product-container { width: 1200px; } .about-container { width: 1200px; } .about4-container { width: 1200px; } .service-container { width: 1200px; } .about3-container { width: 1200px; } /* footer */ .footer-r-title h1 { font-size: 28px; } .footer-container { width: 1200px; } .footer-box { margin-right: 47px; } } @media (max-width: 1500px) { .product3-container { width: 1200px; } .mySwiper2 .swiper-slide-active .swiper-slide-img { width: 560px !important; height: 344px !important; } } @media (max-width: 1400px) { .header-nav>ul>li { margin-right: 15px; } } @media (max-width: 1280px) { /* banner */ .banner-title { left: 10%; } /* footer */ .footer-r-input { width: 300px; } } /*20220718*/ .bgblack { background-color: #000000; } .c_team { position: relative; height: calc(100vh - 76px); background-position: left center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .c_team .leftbox { position: relative; float: left; width: 40%; margin-right: 4.5%; } /*20220726*/ .c_team .leftbox .masker { position: absolute; left: 4%; bottom: 5vh; width: 55%; height: calc(100vh - 76px); transform: rotate(10deg); overflow: hidden; } .c_team .leftbox .masker:before { content: ''; position: absolute; right: 0; top: 0; width: calc(100vh - 10px); height: calc(100vh - 10px); border-radius: 50%; border: dashed rgba(255, 255, 255, 0.9) 2px; } .c_team .rightbox { float: right; width: 55.5%; box-sizing: border-box; padding-right: 7.5%; } .c_team .preview { display: flex; justify-content: flex-end; height: 100%; padding-top: 10vh; box-sizing: border-box; } .c_team .view { height: 100%; } .c_team .preview .swiper-container { width: 55%; height: 100%; margin: 0; } .c_team .view .swiper-container { height: 100%; } .c_team .leftbox .swiper-slide { cursor: pointer; } .c_team .preview .swiper-slide-active { padding-left: 18%; } .c_team .leftbox .w1 { position: relative; padding-left: 64px; padding-top: 5px; color: #ffffff; font-size: 21px; } .c_team .leftbox .swiper-slide-active .w1 { padding-left: 80px; } .c_team .leftbox .w1 .local { font-size: 13px; } .c_team .leftbox .swiper-slide-active .w1 .local { font-size: 21px; } .c_team .leftbox .w1 .name { font-family: "Manrope3-Bold"; line-height: 1; } .c_team .leftbox .swiper-slide-active .w1 { font-size: 34px; } .c_team .leftbox .spot { position: absolute; left: 10px; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; } .c_team .leftbox .spot:before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border: #FFFFFF solid 1px; border-radius: 50%; } .c_team .leftbox .swiper-slide-active .spot { top: 8px; width: 40px; height: 40px; } .c_team .leftbox .swiper-slide-active .spot:before { width: 53px; height: 53px; } .c_team .rightbox .swiper-slide { position: relative; -webkit-transition: transform 1.0s; -moz-transition: transform 1.0s; -ms-transition: transform 1.0s; -o-transition: transform 1.0s; -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .c_team .rightbox .swiper-slide-active { -webkit-transform: scale(1); transform: scale(1); } .c_team .rightbox .w2 { position: relative; width: 100%; height: 100%; } .c_team .rightbox .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover; } .c_team .rightbox .img:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/x5.png) center no-repeat; background-size: cover; } .c_team .rightbox .swiper-slide-active .img:before { background: url(../images/x2.png) center no-repeat; background-size: cover; } .c_team .rightbox .img img { width: 100%; object-fit: cover; } .c_team .rightbox .txt { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); width: 95%; color: #FFFFFF; font-size: 14px; line-height: 1.6; opacity: 0; transition: all 0.7s; } .c_team .rightbox .swiper-slide-active .txt { opacity: 1; } .c_team .rightbox .txt ul li { margin-bottom: 15px; list-style: disc; } .c_team .rightbox .txt span { font-family: "Manrope3-Bold"; line-height: 1.2; } /*20220726*/ @media (min-width: 2560px) { .c_team .leftbox .masker { left: 3%; } } @media (max-width: 1440px) { .c_team .leftbox .w1 { padding-left: 56px; font-size: 19px; } .c_team .leftbox .swiper-slide-active .w1 { font-size: 30px; } .c_team .leftbox .spot { top: 12px; width: 16px; height: 16px; } .c_team .leftbox .spot:before { width: 22px; height: 22px; } .c_team .leftbox .swiper-slide-active .spot { width: 34px; height: 34px; } .c_team .leftbox .swiper-slide-active .spot:before { width: 47px; height: 47px; } .c_team .leftbox .swiper-slide-active .w1 .local { font-size: 19px; } .c_team .rightbox .txt { left: 0; padding-left: 45px; width: 100%; box-sizing: border-box; } /*20220726*/ .c_team .leftbox .masker { left: 6%; } .c_team .preview .swiper-slide-active { padding-left: 20%; } } @media (max-width: 1280px) { .c_team .leftbox .swiper-slide-active .w1 { font-size: 28px; } .c_team .leftbox .swiper-slide-active .spot { width: 32px; height: 32px; } .c_team .leftbox .swiper-slide-active .spot:before { width: 45px; height: 45px; } .c_team .leftbox .swiper-slide-active .w1 .local { font-size: 18px; } /*20220726*/ .c_team .leftbox .masker { left: 5%; } .c_team .preview .swiper-slide-active { padding-left: 17%; } } #fwcode { background: transparent; outline: none; border: 1px solid #D2D2D2; border-radius: 25px; width: 396px; height: 50px; box-shadow: 0 0 2px #d2d2d2; padding: 0 24px; color: #A7A7A7; margin-right: 6px; } #fwBtn { padding: 15px 37.5px; background: black; border-radius: 25px; color: white; } .bigPicLayer { display: none; width: 1200px; height: 640px; position: fixed; z-index: 999999; top: 50% !important; transform: translateY(-50%); padding: 10px; } .c19-minibox-new { min-height: 290px; } /* 9-26 */ .bigPicLayer .close { display: block; width: 38px; height: 38px; background: url(../images/close.png) no-repeat; right: -50px; top: -50px; position: relative; position: absolute; z-index: 12; opacity: 1; } .bigPicLayer .close em { width: 1px; height: 50px; background: #009690; display: none; position: absolute; left: 50%; margin-left: -0.5px; top: 100%; } .bigPicLayer .imgDiv { text-align: center; } .bigPicLayer .imgDiv img { width: 100%; } .bigPicLayer .imgDiv span { display: block; text-align: center; font-size: 18px; margin-top: 16px; color: #fff; font-weight: bold; position: absolute; left: 0; top: 100%; width: 100%; } #Layer1 { position: fixed; z-index: 99999; background: rgb(35, 37, 38); top: 0; left: 0; width: 100% !important; } .bigPicLayer .box { height: 100%; } .wrap { height: 100%; } /*.video_all{ position:fixed; top:0; left:0; z-index: 9; display:none; width:100%; height:100%; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); background-color:#000; }*/ .day1013 { margin-top: 30px; } .d1013 { color: #505050; background: transparent; border: 1px solid #505050; padding: 6px 18px; border-radius: 25px; font-family: "PingFangMedium"; font-size: 13px; margin-right: 10px; transition: all .2s; } .d1013:last-child { margin-right: 0; } .d1013:hover { background: #505050; color: white; transition: all .2s; } .d1013.on { background: #505050; color: white; } #fwcode2 { background: transparent; outline: none; border: 1px solid #D2D2D2; border-radius: 25px; width: 396px; height: 35px; box-shadow: 0 0 2px #d2d2d2; padding: 0 24px; color: #A7A7A7; margin-right: 6px; } @media (min-width: 1921px) { #fwcode { width: 471px !important; height: 60px !important; border-radius: 50px !important; } #fwBtn { width: 125px !important; height: 60px !important; transform: translateY(10px) !important; border-radius: 50px !important; } } /* 2023-8-4*/ .add-disclaimers{ margin-bottom: 100px; } .add-disclaimers h4{ margin: 40px auto; text-align: center; font-size: 26px; font-family: "PingFangMedium"; font-weight: bold; text-decoration: underline; } .add-disclaimers .disclaimers-content{ font-family: "PingFangMedium"; font-size: 14px; } .add-disclaimers .disclaimers-content a{ color: #005AFF; } .confirm-btn{ text-align: center; margin-top: 50px; } .confirm-btn .btnbox { display: inline-block; min-width: 150px; font-family: "Manrope3-Bold"; font-size: 24px; color: #999999; text-align: center; padding: 10px 25px; border-radius: 50px; border: #999999 solid 1px; -webkit-transition: all 0.4s; transition: all 0.4s; cursor: pointer; } .confirm-btn .btnbox:hover, .confirm-btn .btnbox.on{ color: #FFFFFF; background: #005AFF; border: #005AFF solid 1px; } .category06-bbj-01-minibox.disabled .category06-bbj-01-minibox-btn{ background: transparent; border: #999999 solid 1px; box-sizing: border-box; } .category06-bbj-01-minibox.disabled .category06-bbj-01-minibox-btn.able{ background: #005AFF; border: #005AFF solid 1px; } .category06-bbj-01-minibox.disabled a{ pointer-events: none; color: #999; cursor: default; } .category06-bbj-01-minibox.disabled .able a{ pointer-events: auto; cursor: pointer; color: #FFFFFF; } .category06-bbj-01-miniboxBig{ display: flex; flex-direction: column; align-items: center; } .category06-bbj-01-minibox .im1{ display: inline-block; } .category06-bbj-01-minibox .im2{ display: none; } .category06-bbj-01-minibox.disabled .im1{ display: none; } .category06-bbj-01-minibox.disabled .im2{ display: inline-block; } .category06-bbj-01-minibox.disabled .able .im1{ display: inline-block; } .category06-bbj-01-minibox.disabled .able .im2{ display: none; } @media (max-width: 1600px) { .add-disclaimers{ margin-bottom: 80px; } .add-disclaimers h4{ font-size: 24px; } } @media (max-width: 1024px) { .add-disclaimers{ width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .add-disclaimers h4{ font-size: 16px; margin: 25px auto; } .confirm-btn{ text-align: center; } .confirm-btn .btnbox{ min-width: 118px; padding: 9px 20px; font-size: 12px; } } .addfiltertitle{ display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 20px; } .addfiltertitle a{ color: #c8c8c8; font-size: 15px; font-family: "PingFangMedium"; transition: all .5s; position: relative; display: block; } .addfiltertitle a:hover{ color: white; } .addfiltertitle a::after { content: ''; position: absolute; bottom: 30%; left: 0; width: 0; height: 1px; background: white; transition: all .5s; } .addfiltertitle a:hover::after { width: 100%; transition: all .5s; }