@charset "utf-8"; @font-face { font-family: "op"; src: url("../font/OPPO.woff2") format("woff2"); font-weight: normal; font-style: normal; } @font-face { font-family: "opm"; src: url("../font/OPPO-Medium.woff2") format("woff2"); font-weight: normal; font-style: normal; } .opm{font-family: "opm";} @font-face { font-family: "nexa"; src: url("../font/Nexa Bold.otf") format("truetype"); font-weight: normal; font-style: normal; } .nexa{font-family: "nexa";} @font-face { font-family: "nano"; src: url("../font/NanoOldSongA-Regular-subset.woff2") format("woff2"); font-weight: normal; font-style: normal; } .nano{font-family: "nano";} @font-face { font-family: "anto"; src: url("../font/Antonio-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } .anto{font-family: "anto";} :root{ /*公用*/ --font:"op",'Helvetica Neue',Helvetica,Tahoma,Arial,'Microsoft YaHei','PingFang SC','Hiragino Sans GB','Heiti SC','WenQuanYi Micro Hei',sans-serif; --transition:cubic-bezier(0.25,0.74,0.22,0.99) 0.8s; --tfun:cubic-bezier(0.25,0.74,0.22,0.99); --picEase: cubic-bezier(.76, 0, .24, 1); /*font*/ --font-size: clamp(12px,0.7291666666666666vw,28px); /*color*/ --color-dominant:#BC1616; --color-dominant1:#447F48; --color-hover:#003585; --color-fill:#000; --color-white:#fff; --color-black:#000; --color-gray3:#333; --color-gray6:#666; --color-gray9:#ADADAD; --color-line:#D4D4D4; --color-stroke:#ccc; --color-cursor:#BC1616; /*bg*/ --bg:#F3F3F3; --body-color:#333; --bg-gray:rgba(244, 244, 244, 0.50); --bg-scroll:#003585; --bg-overlay:#000; /*input*/ --placeholder:#868686; --input-border-color:#eee; --border-radius:0px; /*gradient*/ --linear-gradient-shadow:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0)); --linear-gradient-blue:linear-gradient(90deg,#0171c1,#2097ed); --linear-gradient-text:linear-gradient(90deg, #FFF 0%, #89E1E5 100%); --linear-text-blue:linear-gradient(90deg, #89E1E5 0%, #FFF 100%); /*cursor*/ --cursor-stroke:#000; /*img*/ --aspect-news:376/188; --fullpage-h:100vh; /*size*/ --container-w:clamp(890px,92.70833333333334vw,3560px); --container-l:calc((100vw - clamp(890px,92.70833333333334vw,3560px)) / 2 + clamp(15px,1.5625vw,60px)); --container-l-:calc((clamp(890px,92.70833333333334vw,3560px) - 100vw) / 2 - clamp(15px,1.5625vw,60px)); --size-10:clamp(5px,0.5208333333333333vw,20px); --size-15:clamp(7px,0.78125vw,30px); --size-20:clamp(10px,1.0416666666666665vw,40px); --size-25:clamp(12px,1.3020833333333335vw,50px); --size-30:clamp(15px,1.5625vw,60px); --size-35:clamp(17px,1.8229166666666667vw,70px); --size-40:clamp(20px,2.083333333333333vw,80px); --size-45:clamp(22px,2.34375vw,90px); --size-50:clamp(25px,2.604166666666667vw,100px); --size-55:clamp(25px,2.864583333333333vw,110px); --size-60:clamp(30px,3.125vw,120px); --size-65:clamp(32px,3.3854166666666665vw,130px); --size-70:clamp(35px,3.6458333333333335vw,140px); --size-75:clamp(37px,3.90625vw,150px); --size-80:clamp(40px,4.166666666666666vw,160px); --size-85:clamp(42px,4.427083333333334vw,170px); --size-90:clamp(45px,4.6875vw,180px); --size-95:clamp(47px,4.947916666666666vw,190px); --size-100:clamp(50px,5.208333333333334vw,200px); --size-110:clamp(55px,5.729166666666666vw,220px); --size-120:clamp(60px,6.25vw,240px); --size-130:clamp(65px,6.770833333333333vw,260px); --size-140:clamp(70px,7.291666666666667vw,280px); --size-10-:clamp(-20px,-0.5208333333333333vw,-5px); --size-15-:clamp(-30px,-0.78125vw,-7px); --size-20-:clamp(-40px,-1.0416666666666665vw,-10px); --size-25-:clamp(-50px,-1.3020833333333335vw,-12px); --size-30-:clamp(-60px,-1.5625vw,-15px); --size-35-:clamp(-70px,-1.8229166666666667vw,-17px); --size-40-:clamp(-80px,-2.083333333333333vw,-20px); --size-45-:clamp(-90px,-2.34375vw,-22px); --size-50-:clamp(-100px,-2.604166666666667vw,-25px); --size-55-:clamp(-110px,-2.864583333333333vw,-25px); --size-60-:clamp(-120px,-3.125vw,-30px); --size-65-:clamp(-130px,-3.3854166666666665vw,-32px); --size-70-:clamp(-140px,-3.6458333333333335vw,-35px); --size-75-:clamp(-150px,-3.90625vw,-37px); --size-80-:clamp(-160px,-4.166666666666666vw,-40px); --size-85-:clamp(-170px,-4.427083333333334vw,-42px); --size-90-:clamp(-180px,-4.6875vw,-45px); --size-95-:clamp(-190px,-4.947916666666666vw,-47px); --size-100-:clamp(-200px,-5.208333333333334vw,-50px); --size-110-:clamp(-220px,-5.729166666666666vw,-55px); --size-120-:clamp(-240px,-6.25vw,-60px); --size-130-:clamp(-260px,-6.770833333333333vw,-65px); --size-140-:clamp(-280px,-7.291666666666667vw,-70px); } /** * Swiper 8.3.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: July 6, 2022 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /*start===*/ * {outline: none !important; /* 移除所有元素默认轮廓线 */-webkit-tap-highlight-color: transparent; /* 禁用移动端点击高亮 */} html{font-size: 10px;} article,aside,dialog,footer,header,section,footer,nav,figure,menu,main{display:block;padding:0;margin:0}*,:before,:after{box-sizing:border-box}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}img{border:0;display:block;width:auto;width:100%;max-width:100%; vertical-align:middle; object-fit: cover;}ul,dl,li,dt,dd{list-style:none}body,html{min-height:100%}body{font-size:14px;font-size:var(--font-size);color:var(--body-color);font-family:var(--font);-webkit-tap-highlight-color:rgba(255,255,255,0);overflow-x:hidden; background-color: var(--bg); user-select: none;}a{text-decoration:none;color:inherit;outline:none;transition:var(--transition);}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}pre{font-family:inherit;white-space:pre-wrap;word-wrap:break-word}input,textarea,select{outline:none;-webkit-appearance:none;border-radius:var(--border-radius);font-size:inherit;font-family:inherit;display:block;width:100%;border:none;border:1px solid var(--input-border-color);padding:0 var(--size-15);transition:var(--transition);background:none}textarea{resize:none}input::-webkit-input-placeholder{color:var(--placeholder)}input:-moz-placeholder,input::-moz-placeholder{color:var(--placeholder)}input:-ms-input-placeholder{color:var(--placeholder)}textarea::-webkit-input-placeholder{color:var(--placeholder)}textarea:-moz-placeholder{color:var(--placeholder)}textarea::-moz-placeholder{color:var(--placeholder)}textarea:-ms-input-placeholder{color:var(--placeholder)}select::-ms-expand{display:none}i,em{font-style:normal}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-button:vertical,::-webkit-scrollbar-button:horizontal{display:none}::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal{background-color:black}::-webkit-scrollbar-track-piece{background:#E3E3E3}::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal{background-color:var(--bg-scroll);border-radius:10px}::-webkit-scrollbar-thumb:vertical:hover,::-webkit-scrollbar-thumb:horizontal:hover{background-color:#3B3B3B}::-webkit-scrollbar-corner:vertical,::-webkit-scrollbar-corner:horizontal{background-color:#535353}::-webkit-scrollbar-resizer:vertical,::-webkit-scrollbar-resizer:horizontal{background-color:#FF6E00}.l-center{text-align:center}.l-relative{position:relative}.l-overflow{overflow:hidden}.l-bold{font-weight:bold}.l-imgs{background-position:center;background-repeat:no-repeat;background-size:cover;}.l-uppercase{text-transform:uppercase}.l-lh0{line-height:100%}.l-lh1{line-height:110%}.l-lh2{line-height:120%}.l-lh3{line-height:130%}.l-lh4{line-height:140%}.l-lh5{line-height:150%}.l-lh6{line-height:160%}.l-lh7{line-height:170%}.l-lh8{line-height:180%}.l-lh9{line-height:190%}.l-lh10{line-height:200%}.l-font12{font-size:12px}.l-font16{font-size:16px;font-size:clamp(12px,0.8333333333333334vw,32px)}.l-font18{font-size:18px;font-size:clamp(14px,0.9375vw,36px)}.l-font20{font-size:20px;font-size:clamp(16px,1.0416666666666665vw,40px)}.l-font22{font-size:22px;font-size:clamp(16px,1.1458333333333333vw,44px)}.l-font24{font-size:24px;font-size:clamp(16px,1.25vw,48px)}.l-font26{font-size:26px;font-size:clamp(18px,1.3541666666666667vw,52px)}.l-font28{font-size:28px;font-size:clamp(18px,1.4583333333333333vw,56px)}.l-font30{font-size:30px;font-size:clamp(18px,1.5625vw,60px)}.l-font32{font-size:32px;font-size:clamp(18px,1.6666666666666667vw,64px)}.l-font34{font-size:34px;font-size:clamp(20px,1.7708333333333333vw,34px)}.l-font36{font-size:36px;font-size:clamp(20px,1.875vw,36px)}.l-font38{font-size:38px;font-size:clamp(22px,1.9791666666666665vw,66px)}.l-font40{font-size:40px;font-size:clamp(22px,2.083333333333333vw,80px)}.l-font42{font-size:42px;font-size:clamp(22px,2.1875vw,84px)}.l-font44{font-size:44px;font-size:clamp(24px,2.2916666666666665vw,88px)}.l-font46{font-size:46px;font-size:clamp(24px,2.3958333333333335vw,92px)}.l-font48{font-size:48px;font-size:clamp(26px,2.5vw,96px)}.l-font50{font-size:50px;font-size:clamp(28px,2.604166666666667vw,100px)}.l-font52{font-size:52px;font-size:clamp(28px,2.7083333333333335vw,104px)}.l-font54{font-size:54px;font-size:clamp(28px,2.8125vw,108px)}.l-font56{font-size:56px;font-size:clamp(30px,2.9166666666666665vw,112px)}.l-font58{font-size:58px;font-size:clamp(30px,3.0208333333333335vw,116px)}.l-font60{font-size:60px;font-size:clamp(32px,3.125vw,120px)}.l-opacity8{opacity:.8}.l-opacity7{opacity:.7}.l-opacity6{opacity:.6}.l-opacity5{opacity:.5}.l-opacity4{opacity:.4}.l-opacity3{opacity:.3}.l-opacity2{opacity:.2}.l-flex,.l-grid-2,.l-grid-3,.l-grid-4,.l-grid-5,.l-grid-6,.l-grid-7,.l-grid-8,.l-grid-9{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap}.l-flex-column{display:flex;flex-direction:column;}.l-grid-2>*{width:50%}.l-grid-3>*{width:33.333333333333336%}.l-grid-4>*{width:25%}.l-grid-5>*{width:20%}.l-grid-6>*{width:16.666666666666668%}.l-grid-7>*{width:14.285714285714286%}.l-grid-8>*{width:12.5%}.l-grid-9>*{width:11.11111111111111%}.l-white{color:var(--color-white)}.l-black{color:var(--color-black)}.l-gray3{color:var(--color-gray3)}.l-gray6{color:var(--color-gray6)}.l-gray9{color:var(--color-gray9)}.lines{text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break: break-all;}.lines1{-webkit-line-clamp:1}.lines2{-webkit-line-clamp:2}.lines3{-webkit-line-clamp:3}.lines4{-webkit-line-clamp:4}.lines5{-webkit-line-clamp:5}.lines6{-webkit-line-clamp:6}.l-dominant{color:var(--color-dominant)}.l-dominant1{color:var(--color-dominant1)}.l-pd50{padding-top:var(--size-50);padding-bottom:var(--size-50);}.l-pd60{padding-top:var(--size-60);padding-bottom:var(--size-60);}.l-pd70{padding-top:var(--size-70);padding-bottom:var(--size-70);}.l-pd80{padding-top:var(--size-80);padding-bottom:var(--size-80);}.l-pd90{padding-top:var(--size-90);padding-bottom:var(--size-90);}.l-pd100{padding-top:var(--size-100);padding-bottom:var(--size-100);}.l-pd110{padding-top:var(--size-110);padding-bottom:var(--size-110);}.l-pd120{padding-top:var(--size-120);padding-bottom:var(--size-120);}.l-mg10{margin-top:var(--size-10);}.l-mg15{margin-top:var(--size-15);}.l-mg20{margin-top:var(--size-20);}.l-mg25{margin-top:var(--size-25);}.l-mg30{margin-top:var(--size-30);}.l-mg35{margin-top:var(--size-35);}.l-mg40{margin-top:var(--size-40);}.l-mg45{margin-top:var(--size-45);}.l-mg50{margin-top:var(--size-50);}.l-mg55{margin-top:var(--size-55);}.l-mg60{margin-top:var(--size-60);}.l-mg65{margin-top:var(--size-65);}.l-mg70{margin-top:var(--size-70);}.l-mg75{margin-top:var(--size-75);}.l-mg80{margin-top:var(--size-80);}.l-mg90{margin-top:var(--size-90);}.l-mg100{margin-top:var(--size-100);}.l-mg110{margin-top:var(--size-110);}.l-mg120{margin-top:var(--size-120);}input::-webkit-inner-spin-button{display: none;} picture{display: block;}.flex-between{justify-content: space-between;}.flex-center{align-items: center;}.flex-jcenter{justify-content:center;}.l-attachment{background-attachment: fixed;}.l-ones *{line-height: inherit !important;}.l-ones img{display: inline-block; width: auto;} .l-aspectFill,.l-aspectFill>img,.l-aspectFill>video{width: 100%; height: 100%;} video{object-fit: fill;will-change: transform;} .l-justify{text-align: justify;} .l-transition{transition: var(--transition);} .form-btn button{position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; cursor: pointer;} .l-cursor{cursor:pointer;} #think_page_trace_open{display: none !important;} .l-radius10{border-radius: var(--size-10);} *{line-height: 100%;} .text-stroke{color: transparent;-webkit-text-stroke: 1px var(--color-stroke);} .text-vertical{writing-mode: vertical-rl;text-orientation: sideways;} .text-spacing{--spacing:3px ;letter-spacing: var(--spacing);} #three-hover{position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; opacity: 0.8;} .bg-gray{background: var(--bg-gray);} .bg-white{background-color: #fff;} .public-seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} .l-cutting{position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9; display: flex;--direction: row; flex-direction: var(--direction); justify-content: space-between;} .l-cutting>*{flex: 1; background-color: var(--bg);} .list-page{justify-content: center;} .list-page>*{width: var(--size-40); aspect-ratio: 1/1; border-radius: 50%; margin: 0 5px; display: flex; align-items: center; justify-content: center; background-color: #fff;} .list-page>a{border: 1px solid #fff;} .list-page>.page img{width: clamp(10px,var(--size-15),var(--size-15));} .list-page>.prev{transform: rotate(180deg);} .list-page>a:not(.disabled):hover{border-color: var(--color-dominant);} .list-page>.active{border-color: var(--color-dominant) !important; color: var(--color-dominant);} .list-page>.disabled{cursor: auto; opacity: 0.5;} .nav-btn{display: none;} #cursor{pointer-events: none; position: fixed;border-radius: 0; top: 0; left: 0; z-index: 1000; filter: url(#goo);mix-blend-mode: color-burn;} #cursor span{display: block;transform-origin:center center; width: var(--size-15); aspect-ratio: 1/1; border-radius: var(--size-20); background-color: var(--color-cursor); position: absolute;} .l-fullpage{width: 100%; height: var(--fullpage-h); min-height: 700px;} .path-drop{filter:drop-shadow(0px 0px 6px #fff);} footer{position: relative; z-index: 6;} .footer-fixed{position: fixed; left: 0; right: 0; bottom: 0; height: var(--size-100); z-index: 5; pointer-events: none; opacity: 0; display: none;} .footer-fixed>*{position: absolute; width: 100%; height: 100%; --color:#000;} .footer-fixed>*:nth-child(1){backdrop-filter: blur(1.125px);mask: linear-gradient(180deg, transparent 25%, var(--color) 37.5%, var(--color) 50%, transparent 62.5%); z-index: 3;} .footer-fixed>*:nth-child(2){backdrop-filter: blur(2.25px); mask: linear-gradient(180deg, transparent 37.5%, var(--color) 50%, var(--color) 62.5%, transparent 75%); z-index: 4;} .footer-fixed>*:nth-child(3){backdrop-filter: blur(4.5px); mask: linear-gradient(180deg, transparent 50%, var(--color) 62.5%, var(--color) 75%, transparent 87.5%); z-index: 5;} .footer-fixed>*:nth-child(4){backdrop-filter: blur(9px); mask: linear-gradient(180deg, transparent 62.5%, var(--color) 75%, var(--color) 87.5%, transparent); z-index: 6;} .footer-fixed>*:nth-child(5){backdrop-filter: blur(18px); mask: linear-gradient(180deg, transparent 75%, var(--color) 87.5%, var(--color) 100%, transparent 112.5%); z-index: 7;} .footer-fixed>*:nth-child(6){backdrop-filter:blur(36px); mask: linear-gradient(180deg, transparent 87.5%, var(--color) 100%, var(--color) 112.5%, transparent 125%); z-index: 8;} *[data-filter]{--blur: 0px;backdrop-filter: blur(var(--blur));-webkit-backdrop-filter: blur(var(--blur));} *[data-animationplay]{--state: paused;} /*end===*/ /*cont*/ #Page1,#Page2,#Page3,#Page4,#Page5 { scroll-margin-top: var(--size-90); } body:has(.index-banner){height: 100vh; overflow: hidden;} .l-container{width: var(--container-w); margin-left: auto; margin-right: auto; position: relative; padding-left: var(--size-30); padding-right: var(--size-30); z-index: 2;} header{position: fixed; left: 0; right: 0; top: 0; z-index: 10; transition: var(--transition); display: flex; align-items: center; opacity: 0; padding:var(--size-10) 0;} .lh-logo{display: block; width: var(--size-130);} .lh-nav>*{margin: 0 var(--size-25);} .header-search>.top .icon,.header-link>* .icon{width: var(--size-25); margin-right: var(--size-10);filter: brightness(0) invert(1);} .search-layer{position: absolute; width: calc(var(--size-100) * 4); right: 0; top: 100%; padding-top: var(--size-10); transform: translateY(var(--size-10)); transition: var(--transition); opacity: 0; pointer-events: none;} .header-search:hover .search-layer{transform: translateY(0); opacity: 1; pointer-events: auto;} .search-layer>*{background-color: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; padding: var(--size-30); border-radius: var(--size-10); overflow: hidden; position: relative; --height:var(--size-45);} .search-layer>*::before{content: ''; display: block; width: 100%; height: 100%; background: url(../img/index/banner.jpg) no-repeat center; background-size: cover; filter: blur(var(--size-20)); position: absolute; left: 0; top: 0; opacity: 0.2; z-index: -1;} .search-layer>* input{flex: 1; height: var(--height); border: 1px solid var(--color-dominant);} .search-layer>* .btn{height: var(--height); padding: 0 var(--size-20); display: flex; align-items: center; justify-content: center; background-color: var(--color-dominant);} .header-link>*{margin-left: var(--size-30);} .header-link>*::before{content: ''; display: block; width: 1px; height: var(--size-15); background-color: rgba(255, 255, 255, 0.50); margin-right: var(--size-30);} .header-nav-btn{margin-left: var(--size-35); display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-dominant); width: var(--size-45); aspect-ratio: 1/1; cursor: pointer;} .header-nav-btn::before,.header-nav-btn::after{content: ''; display: block ;width: calc(var(--size-20) - 2px); height: 2px; background-color: #fff; position: absolute; left: 50%; margin-left: calc((var(--size-20-) + 2px) / 2); top: 50%; transition: var(--transition);} .header-nav-btn::before{margin-top: -5px;} .header-nav-btn::after{margin-top: 4px;} .index-banner{height: 100vh; z-index: 2;clip-path: ellipse(0% 0% at 50% 100%);} .index-loading{position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background-color: var(--color-dominant); opacity: 0;} .index-loading>*{opacity: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;} .index-loading .logo{width: calc(var(--size-100) * 2); margin: auto;} .index-loading .progress .icon{width: var(--size-40); margin: auto;} .index-loading .line{position: relative; opacity: 0;} .index-loading .line>i{display: block; width: 100%; height: 1px;background: rgba(255, 255, 255, 0.20);} .index-loading .line>span{display: block; width: 1px; height: 50vh;background: rgba(255, 255, 255, 0.20); position: absolute; left: 50%; top: 1px;} .index-banner>.bd .l-container{position: absolute; left: 0; right: 0; bottom: var(--size-80); opacity: 0;} .index-banner-hd{position: absolute; left: 0; bottom: var(--size-90) !important; display: flex; align-items: center; justify-content: flex-end; z-index: 2; padding-right: var(--size-100);} .index-banner-hd>*{width: var(--size-25); height: var(--size-25); border-radius: 0; opacity: 0.3; background: url(../img/index/hd1.svg) no-repeat center; background-size: cover; margin: 0 0 0 var(--size-20) !important; transition: var(--transition);} .index-banner-hd>*:nth-child(2){background: url(../img/index/hd2.svg) no-repeat center; background-size: cover;} .index-banner-hd>*:nth-child(3){background: url(../img/index/hd3.svg) no-repeat center; background-size: cover;} .index-banner-hd>*:nth-child(4){background: url(../img/index/hd4.svg) no-repeat center; background-size: cover;} .index-banner-hd>*.on{opacity: 1;} .public-title .name .icon{width: clamp(15px,var(--size-20),var(--size-20)); margin-right: var(--size-10);} .index-about-cont>.left{width: calc(var(--size-100) * 7 + var(--size-20)); border-radius: var(--size-10); overflow: hidden; margin-right: var(--size-140); aspect-ratio: 720/500; position: relative;} .index-about-cont>.left>.img{width: 100%; height: 100%;} .index-about-cont>.left>.bottom{position: absolute; left: 0; right: 0; bottom: 0; height: var(--size-90);background: rgba(0, 0, 0, 0.19); padding-right:var(--size-25);} .index-about-cont>.left>.bottom>.left{height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 var(--size-50); background-color: var(--color-dominant);} .public-btn>.icon{width: var(--size-30); aspect-ratio: 1/1; border-radius: 6px; background-color: var(--color-dominant); display: flex; align-items: center; justify-content: center;} .public-btn>.icon>*{transition: var(--transition);} .public-btn>.icon>:nth-child(2){position: absolute; left: 0; top: 0; transform: translate(-100%,100%) scale(0);} .public-btn:has(h3)>.icon{width: var(--size-50); margin-right: var(--size-15); border-radius: 50%; padding: 5px;} .public-btn:hover>.icon>:nth-child(1){transform: translate(100%,-100%) scale(0);} .public-btn:hover>.icon>:nth-child(2){transform: translate(0%,0%) scale(1);} .video-btn{position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); cursor: pointer;} .video-btn>.icon{width: var(--size-95); margin: auto;} .video-btn>.icon>:nth-child(2){width: var(--size-30); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .video-btn>.icon>i{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; animation: rotate linear 6s infinite; animation-play-state: var(--state);} .video-btn>.icon>i::before{content: ''; display: block; width: calc(var(--size-10) - 2px); aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; position: absolute; left:var(--size-10); top:var(--size-10);} @keyframes rotate{ to{transform: rotate(360deg);} } .l-font128{font-size: var(--size-130);} .index-about-cont>.right{flex: 1; padding-top: var(--size-90);} .index-about-cont>.right .brand-text{overflow: hidden;} .brand-text{flex-wrap: nowrap;white-space: nowrap; color: #ccc; opacity: 0.2; position: absolute; left: 0; top: var(--size-40-);text-overflow: ellipsis; max-width: calc(100% + var(--container-l));} .index-about>*>.bottom{justify-content: flex-end;} .about-lines{height: calc(var(--size-100) + var(--size-70)); display: flex;align-items: flex-end; justify-content: space-between; position: absolute; left: var(--container-l-); bottom: 0; width: 70%; -webkit-mask-image: linear-gradient(90deg,rgba(188,22,22,1) 80%,rgba(255,255,255,0));} .about-lines>*{display: block; width: 1px; height: 100%; background: linear-gradient(180deg,rgba(188,22,22,0.2),rgba(255,255,255,0));} .about-total{width: calc(var(--size-100) * 6);} .about-total>*{ text-align: right;} .l-fullpage>.l-flex-column{flex-wrap: nowrap;} .l-fullpage>.l-container{height: 100%;} .strength-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000;} .index-strength>.l-container>.left{width: calc(var(--size-100) * 4 + var(--size-75));} .index-strength>.l-container>.right{width: calc(var(--size-100) * 7); height: 100%; margin-right: var(--size-140);} .scroll-more>.icon{width: var(--size-15); margin: auto;} .index-strength-item{margin: var(--size-80-) 0 0 var(--size-50-);} .index-strength-item>*{padding-left: var(--size-50); margin-top: var(--size-70);} .index-strength-item>*>*{display: flex; flex-direction: column; aspect-ratio: 334/435; border-radius: var(--size-10); background-color: #fff;} .index-strength-item>* .top{height: var(--size-60); border-bottom: 1px solid rgba(56, 56, 56, 0.10); padding: 0 var(--size-25);} .index-strength-item>* .bottom{padding:var(--size-35) var(--size-25);} .index-strength-item>* .bottom .img{border-radius: 6px;} .index-strength-item>*:nth-child(2n - 1){transform: translateY(var(--size-140));} .index-strength-item>*>*:hover{color: #fff;background: rgba(0, 0, 0, 0.20);} .newsPro-top{align-items: flex-end;} .newsPro-banner>.bd li{width: calc(var(--size-100) * 3 + var(--size-70));perspective: 2000px; margin-right: var(--size-30);} .newsPro-banner>.bd li>*{aspect-ratio: 372/438;position: relative; transform-style: preserve-3d;transition: transform 0.6s ease; display: block;} .card-front, .card-back{width: 100%; height: 100%; position: absolute; left: 0; top: 0;backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between;} .card-back{transform: rotateY(180deg);} .newsPro-banner>.bd li:hover>*{transform: rotateY(-180deg);} .newsPro-banner>.bd li .card-front{padding:var(--size-40) var(--size-20) var(--size-30); border-radius: var(--size-10); background-color: #fff;box-shadow: 0 4px 13.8px 0 rgba(0, 0, 0, 0.06);} .newsPro-banner>.bd li .card-front .img{aspect-ratio: 320/210; border-radius: 6px;} .newsPro-banner>.bd li .card-back{width: 100%; height: calc(var(--size-100) * 5 + var(--size-20)); color: #fff;border-radius: var(--size-10); overflow: hidden; padding: var(--size-30); top: 50%; margin-top: calc((var(--size-100-) * 5 - var(--size-20)) / 2);} .newsPro-banner>.bd li .card-back .img{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; z-index: -1;} .pro-layer{position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.5);} .pro-layer-cont{width: calc(var(--size-100) * 11); border-radius: var(--size-10); background-color: var(--color-dominant); padding: var(--size-20);} .pro-layer-close{position: absolute; left: calc(100% + var(--size-20)); top: 0; width: var(--size-40); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background-color: var(--color-dominant); border-radius: 50%; padding:5px; transition-duration: 0.5s;} .pro-layer-close:hover{transform: rotate(90deg);} .pro-layer-close img{filter: brightness(0) invert(1);} .jump-item>*{margin-left: var(--size-10);} .jump-item>*>*{display: flex; align-items: center; justify-content: center; width: var(--size-35); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff;} .jump-item>*>*:hover{opacity: 0.8;} .jump-item>*>* img{width: calc(var(--size-20) + 2px);} .pro-layer-cont>.center{background-color: #fff; border-radius: var(--size-10); padding: var(--size-20);} .pro-layer-cont>.bottom{background-color: #fff; border-radius: var(--size-10); aspect-ratio: 2/1; overflow: hidden;} .pro-layer-imgs{width: 100%; height: 100%;} .pro-layer-imgs .img{display: flex; align-items: center; justify-content: center; height: 100%;} .pro-layer-imgs .img img{max-height: 100%; width: auto;} .pro-layer-btn>*{width: var(--size-40); aspect-ratio: 1/1; border-radius: 50%; background-color:var(--color-dominant); position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; z-index: 2;} .pro-layer-btn>* img{filter: brightness(0) invert(1); width: var(--size-20);} .pro-layer-btn>*.prev{left: var(--size-20); transform: rotate(180deg);} .pro-layer-btn>*.next{right: var(--size-20);} .pro-layer-btn>*:hover{opacity: 0.8;} .pro-layer-cont>.center>.item{flex: 1;} .pro-layer-cont>.center .rule>*{display: flex; align-items: center; margin-right: var(--size-30);} .pro-layer-cont>.center .rule>*::after{content: ''; display: block; width: 1px; height: var(--size-10); background-color: #CFCFCF; margin-left: var(--size-30);} .pro-layer-cont>.center .rule>*:last-child::after{display: none;} .pro-layer-cont>.center .rule>*:last-child{margin-right: 0;} .newsPro-top>.right img{height: var(--size-70); width: auto;} .newsPro-btn>*{margin: 0 var(--size-20);} .newsPro-btn>*.prev,.newsPro-btn>*.next{width: var(--size-50); border-radius: 6px; background-color: var(--color-dominant); display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1;} .newsPro-btn>*.prev img,.newsPro-btn>*.next img{filter: brightness(0) invert(1); width: var(--size-20);} .newsPro-btn>*.prev img{transform: rotate(180deg);} .newsPro-btn>*.prev:hover,.newsPro-btn>*.next:hover{opacity: 0.8;} .newsPro-btn>*.swiper-button-disabled{background-color: #E2E2E2; cursor: auto;} .newsPro-btn>*.swiper-button-disabled:hover{opacity: 1;} .index-pro-l{width: calc(var(--size-100) * 4 + var(--size-30));background: rgba(0, 0, 0, 0.01); position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;} .index-pro-l>.top{padding: var(--size-80) var(--size-100) var(--size-55); height: calc(var(--size-100) * 3 + var(--size-80));} .index-pro-l>.top>.btn .icon{width: var(--size-15); margin-left: 4px;} .index-pro-l>.top>.btn .icon>*{transition: var(--transition);} .index-pro-l>.top>.btn .icon>:nth-child(2){position: absolute; left: 0; top: 0; transform: translateX(-100%);} .index-pro-l>.top>.btn>*:hover .icon>:nth-child(1){transform: translateX(100%);} .index-pro-l>.top>.btn>*:hover .icon>:nth-child(2){transform: translateX(0%);} .index-pro-l>.bottom{height: var(--size-120); display: flex; align-items: center; justify-content: center;} .index-pro-l>.center{height: calc(100% - var(--size-100) * 5);} .index-pro-hd{height: 100%; border-top: 1px solid rgba(255, 255, 255, 0.20);} .index-pro-hd>.bd{flex-direction: column;} .index-pro-hd>.bd>*{height: 25%; border-bottom: 1px solid rgba(255, 255, 255, 0.20);} .index-pro-hd>.bd>* a{padding-left: var(--size-100); padding-right: var(--size-10); height: 100%;} .index-pro-hd>.bd>* .icon{width:var(--size-35); margin-right: var(--size-20);} .index-pro-hd>.bd>*.active a,.index-pro-hd>.bd>* a:hover{background: linear-gradient(90deg, rgba(180, 25, 25, 0.00) 0%, rgba(180, 25, 25, 0.9) 100%);backdrop-filter: blur(10px);} .index-pro-r{position: absolute; left: calc(var(--size-100) * 4 + var(--size-70)); align-items: flex-end; bottom: var(--size-60); z-index: 2;} .index-pro-layer{width: calc(var(--size-100) * 5 + var(--size-20)); aspect-ratio: 520/306; border-radius: 8px; background-color: rgba(0, 0, 0, 0.20);} .index-pro-layer>*{display: block; padding: var(--size-20) var(--size-20) var(--size-20) var(--size-40);} .index-pro-layer .top>.left .icon{width: var(--size-40); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-dominant); margin-right: var(--size-10); padding:5px;} .index-pro-item{margin: var(--size-15-) 0 0 var(--size-15-);} .index-pro-item>*{padding-left: var(--size-15); margin-top: var(--size-15); display: flex; align-items: center;} .index-pro-item>*::before{content: ''; display: block; width: calc(var(--size-10) - 2px); aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; margin-right: var(--size-15);} .index-pro>.l-container{position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; padding-bottom: var(--size-40);} .index-pro-btn{pointer-events: auto;} .index-pro-btn>*{margin-left: var(--size-10); height: var(--size-45); aspect-ratio: 60/45; display: flex; align-items: center; justify-content: center; border-radius: 6px;border: 1px solid rgba(255, 255, 255, 0.35);background: rgba(0, 0, 0, 0.16);} .index-pro-btn>* img{width: var(--size-30); transform: rotate(45deg);} .index-pro-btn>*.prev img{transform: rotate(-135deg);} .index-pro-btn>*:hover{border-color: #fff;} .index-serves{padding-left: var(--size-30); padding-right: var(--size-30);} .index-serves-cont{aspect-ratio: 1860/652; border-radius: 10px; padding: var(--size-100) var(--size-20) var(--size-30);} .serves-bg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000;} .index-serves-cont>.l-container{height: 100%;} .index-serves-item{align-items: flex-end;} .index-serves-item>*{margin-right: var(--size-20); width: calc(var(--size-100) * 2 + var(--size-65));} .index-serves-item>*:last-child{margin-right: 0;} .index-serves-item>* a{border-radius: 8px;background: rgba(0, 0, 0, 0.20); display: block; position: relative; height: var(--size-80); overflow: hidden;} .index-serves-item>* .bottom{height: var(--size-80); padding: 0 var(--size-20);} .index-serves-item>* .bottom>.left>*{transition: var(--transition); display: block;} .index-serves-item>* .bottom>.left .num{position: absolute; left: 0; transform: translateY(110%); } .index-serves-item>* .top{aspect-ratio: 265/210; padding:0 var(--size-20); overflow: hidden; height: 0; transition: var(--transition);} .index-serves-item>* .top .icon{width: var(--size-30);} .index-serves-item>* .top>*{ transform: translateY(100%); opacity: 0; transition: var(--transition);} .index-serves-item>*.active a{height: calc(var(--size-100) * 2 + var(--size-90));} .index-serves-item>*.active a .top{height: calc(var(--size-100) * 2 + var(--size-10));padding:var(--size-40) var(--size-20);} .index-serves-item>*.active a .top>*{transform: translateY(0); opacity: 1; transition-delay: 0.3s;} .index-serves-item>*.active a .top>*:nth-child(2){transition-delay: 0.4s;} .index-serves-item>*.active a .top>*:nth-child(3){transition-delay: 0.5s;} .index-serves-item>*.active a .bottom>.left .num{transform: translateY(0);} .index-serves-item>*.active a .bottom>.left .name{transform: translateY(-110%);} .index-case-scroll{display: flex;} .index-case-item{display: flex; animation: scroll linear 45s infinite; animation-play-state: var(--state);} .index-case-item>*{width: calc(var(--size-95) * 2); aspect-ratio: 192/126; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: var(--size-60); overflow: hidden; margin: 0 var(--size-10);} .index-case-item>* img{width: auto; max-height: 100%;} @keyframes scroll{ to{transform: translateX(-100%);} } @keyframes scroll1{ to{transform: translateX(100%);} } .index-case-scroll.two{justify-content: flex-end;} .index-case-scroll.two .index-case-item{ animation: scroll1 linear 50s infinite; animation-play-state: var(--state);} .index-news-top{margin-top: var(--size-20); padding-top: var(--size-30); border-top: 1px dashed #D6D6D6;} .index-news-banner>.bd li{width: 25%;} .index-news-banner{padding-top: var(--size-35);} .news-item{margin: var(--size-30-) 0 0 var(--size-30-);} .news-item>*{padding-left: var(--size-30); margin-top: var(--size-30);} .news-item>*>*{aspect-ratio: 400/510; border-radius: var(--size-10);border: 1px solid #EAEAEA;background: #FFF; position: relative; padding: var(--size-10); overflow: hidden;} .news-item>*>*::before{content: ''; display: block; width: 100%; height: 100%; background: url(../img/index/news-bg.jpg) no-repeat center; background-size: cover; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; transform: scale(1.2); transition: var(--transition);-webkit-clip-path: inset(100% 0 0 0);} .news-item>*>*>*{position: relative; z-index: 2;} .news-item>* .bottom .img{aspect-ratio: var(--aspect-news); border-radius: var(--size-10);} .news-item>* .top{aspect-ratio: 400/273; padding: var(--size-25);} .news-item>* .top .date{transition: var(--transition);} .news-item>* .top .ccont{transition: var(--transition); transition-duration: 0.3s;} .news-item>* .top .btn{color: #fff; transform: translateY(100%); opacity: 0; transition: var(--transition); position: absolute; left: 0; top: 100%;} .news-item>* .top .btn .icon{width: var(--size-30); aspect-ratio: 1/1; border-radius: 6px; border: 1px solid #fff; margin-left: var(--size-10); display: flex; align-items: center; justify-content: center;} .news-item>*>*:hover{transform: translateY(var(--size-35-)); color: #fff;} .news-item>*>*:hover::before{opacity: 1; transform: scale(1);-webkit-clip-path: inset(0% 0 0 0);} .news-item>*>*:hover .top .btn{transform: translateY(0); opacity: 1;} .news-item>*>*:hover .top .ccont{transform: translateY(-50%); opacity: 0; color: #fff;} .news-item>*>*:hover .top .date{color: #fff;} .public-banner-btn>*{display: flex; align-items: center; justify-content: center; width: var(--size-50); aspect-ratio: 1/1; border-radius: 6px; background-color: #E2E2E2; padding: var(--size-15); margin-left: var(--size-20);} .public-banner-btn>*.prev{margin-left: 0;} .public-banner-btn>* img{filter: brightness(0); opacity: 0.5; transition: var(--transition);} .public-banner-btn>*.prev img{transform: rotate(180deg);} .public-banner-btn>*:not(.swiper-button-disabled):hover{background-color: var(--color-dominant);} .public-banner-btn>*:not(.swiper-button-disabled):hover img{filter: brightness(0) invert(1); opacity: 1;} .public-banner-btn>*.swiper-button-disabled{cursor: auto;} footer{padding-top: var(--size-20); color: #F6E7CE; margin-top: var(--size-40-);} footer::before{content: ''; display: block; width: 100%; height: 20%;background-color: var(--color-dominant); position: absolute; left: 0; bottom: 0;} footer>.bg{position: absolute; left: 0; right: 0; top: 0;} .footer-share>*{width: var(--size-60); aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 0; margin-left: var(--size-30-); --l:0px;--r:0px; transform: translate(var(--l), var(--r));} .footer-share>*>*{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;} .footer-share>*>* .icon{width: var(--size-30);} .footer-line{height: calc(var(--size-100) * 2);} .footer-share>*:nth-child(1){--l:var(--size-90-);--r:var(--size-60-)} .footer-share>*:nth-child(2){--l:0px;--r:var(--size-80-)} .footer-share>*:nth-child(3){--l:var(--size-90);--r:var(--size-60-)} .footer-center>.left{width: calc(var(--size-140) * 2);} .footer-center>.left>.bottom{margin-top: calc(var(--size-80) * 2);} .footer-select>.bottom{aspect-ratio: 280/52; border-radius: 8px; background-color: #fff; padding: 0 var(--size-25); cursor: pointer; position: relative; z-index: 2;} .footer-select{perspective: 2000px;} .footer-select>.top{position: absolute; left: 0; right: 0; bottom: 50%; background-color: #fff; padding: var(--size-10) 0 var(--size-30); display: flex; flex-direction: column; border-radius: 8px 8px 0 0;transform-style: preserve-3d; transform: rotateX(90deg); transform-origin: bottom; transition: var(--transition); max-height: calc(var(--size-100) * 2); overflow-y: auto;} .footer-select>.top a{display: flex; padding: var(--size-10) var(--size-25);} .footer-select>.top a:hover{color: var(--color-dominant);} .footer-select:hover>.top{transform: rotateX(0deg);} .footer-nav>*{margin-left: var(--size-130);} .footer-nav>*:first-child{margin-left: var(--size-30);} .footer-nav>* .bottom{color: #fff;} .footer-nav>* a{display: inline-block;} .footer-nav>* a:hover{transform: translateX(var(--size-10));} .footer-media>*{position: relative; margin-left: var(--size-10);} .footer-media>*>*{display: flex; align-items: center; justify-content: center; position: relative; width: var(--size-40); aspect-ratio: 1/1;} .share-layer{position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,var(--size-10-)); width: var(--size-100); padding-bottom: 5px; transition: var(--transition); pointer-events: none; opacity: 0;} .share-layer>*{border-radius: 5px; overflow: hidden;} .share-layer::after{content: ''; display: block; width: 0; height: 0; border: 6px solid transparent; border-top: 6px solid #fff; margin: auto;} .footer-media>*>*:hover .share-layer{ transform: translate(-50%,0); pointer-events: auto; opacity: 1;} .footer-bottom>.left span{margin-right: var(--size-15);} .footer-bottom>.left span:last-child{margin-right: 0;} .lh-fixed{position: fixed; right: var(--size-10); background-color: #fff;box-shadow: 0 4px 9.5px 0 rgba(0, 0, 0, 0.09); top: 50%; transform: translateY(-50%); z-index: 101; width: var(--size-65); opacity: 0; pointer-events: none; transition: var(--transition);} .lh-fixed.on{opacity: 1; pointer-events: auto;} .lh-fixed>*{position: relative; padding: 0 calc(var(--size-10) - 2px);} .lh-fixed>*>a{padding: var(--size-20) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.20); display: block; text-align: center;} .lh-fixed>*>* .icon{width: var(--size-30); margin: auto;} .fixed-layer{position: absolute; right: 100%; bottom: 0; width: var(--size-140); padding-right: var(--size-10); transform: translateX(var(--size-10-)); opacity: 0; pointer-events: none; transition: var(--transition);} .fixed-layer>.img{border-radius: var(--size-10); overflow: hidden;box-shadow: 0 4px 9.5px 0 rgba(0, 0, 0, 0.09);} .lh-fixed>*:hover .fixed-layer{transform: translateX(0); opacity: 1; pointer-events: auto;} .lh-fixed>*:last-child>a{border: none;} .lh-fixed>*>a:hover{color: var(--color-dominant);} .l-pd45{padding-top: var(--size-45); padding-bottom: var(--size-45);} footer::after{content: ''; display: block; width: calc(var(--size-100) * 4 + var(--size-25)); aspect-ratio: 427/268; background: url(../img/footer-icon2.png) no-repeat center; background-size: cover; position: absolute; right: var(--size-50); bottom: var(--size-55);} .public-ban{aspect-ratio: 1920/800;} .public-ban>.l-container{position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; opacity: 0;} .public-ban .cont .icon{width: calc(var(--size-100) * 7 + var(--size-15)); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .public-ban .cont .name,.public-ban .cont .nname{position: relative; z-index: 2;} .public-ban .cont .nname{letter-spacing: var(--size-20);} .nav-other{padding-left: calc(var(--size-100) * 2); padding-right: calc(var(--size-100) * 2);height: var(--size-75); position: relative; z-index: 11; padding-top: 1px; position: sticky; top: calc(var(--size-75) / 2); pointer-events: none;} .nav-other-item{height: 100%; border-radius: var(--size-10); background-color: #fff; margin-top: calc(var(--size-75-) / 2 - 1px); pointer-events: auto; transition: var(--transition);} .nav-other-item>*{flex: 1;} .nav-other-item>*>*{display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; border-radius: var(--size-10); color: var(--color); transition-duration: 0s;} .nav-other-item>*.bg{height: 100%; border-radius: var(--size-10); background-color: var(--color-dominant); position: absolute; left: 0; top: 0;} .nav-other-item>*:not(.bg){position: relative; z-index: 2;} header .left,header .center,.header-search,.header-link{transition: var(--transition);} .header-fixed>.l-container .left,.header-fixed>.l-container .center,.header-fixed >.l-container .header-search,.header-fixed>.l-container .header-link{transform: translateY(var(--size-110-)); } .about-res{padding-top: var(--size-70); padding-bottom: calc(var(--size-100) * 6);} .about-res>.bg{position: absolute; left: 0; right: 0; bottom: 0; -webkit-mask-image:linear-gradient(0deg,rgba(255,255,255,1) 70%,rgba(255,255,255,0)); aspect-ratio: 1920/750; overflow: hidden;} .about-res-cont{width: calc(var(--size-110) * 10); margin-left: auto; margin-right: auto;} .about-res-cont>.btn{display: flex; justify-content: center;} .about-res-cont>.btn .public-btn>.icon>*{transform: rotate(135deg);} .about-res-cont>.btn .public-btn>.icon>*:nth-child(2){display: none;} .about-res-cont>.cont{height: calc(clamp(12px,0.8333333333333334vw,32px) * 9); overflow: hidden;} .culture-item>*>*{aspect-ratio: 411/518;transform-style: preserve-3d;transition: transform 0.6s ease; display: block;} .about-res .brand-text{position: relative; top: 0;} .about-res-cont.on>.cont{height: auto;} .about-res-cont.on .public-btn>.icon>*{transform: rotate(-45deg);} .culture-item>*>* .card-front{background-color: #fff; padding: var(--size-40) var(--size-30); display: flex; flex-direction: column; justify-content: space-between;} .culture-item>*>* .icon{position: absolute; left: 0; top: 0; right: 0; pointer-events: none;} .culture-item>*>* .icon>:nth-child(1){width: 77%;} .culture-item>*>* .icon>:nth-child(2){ width: 23%;position: absolute;right: 23%; top: 30%;} .culture-item>*>* .icon>:nth-child(3){width: 23%;position: absolute;right: 0;top: 0;} .culture-item>*>* .card-front .top::after{content: ''; display: block; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.10); margin-top: var(--size-30);} .culture-item>*>* .card-front .img{width: var(--size-100); margin: auto;} .culture-item>*>* .card-back{background-color: var(--color-dominant); padding: var(--size-40) var(--size-30) var(--size-100); pointer-events: none;} .culture-item>*>* .card-back .img{width: var(--size-90);} .culture-item>*>* .card-back .center::after{content: ''; display: block; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.10); margin-top: var(--size-50);} .culture-item>*:hover>*{transform: rotateY(180deg);} .culture-item{margin: var(--size-25-) 0 0 var(--size-25-);} .culture-item>*{perspective: 2000px; padding-left: var(--size-25); margin-top: var(--size-25);} .lh-story{color: #FBE4BB;} .lh-story>.item{background-color: #5A2C15; position: relative;} .lh-story>.item>.bg{position: absolute; left: 0; top: 0; -webkit-mask-image:linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,1));} .lh-story>.item::before{content: ''; display: block; width: 100%; height: 100%; background: url(../img/about/shadow.png) no-repeat center; background-size: cover; position: absolute; left: 0; top: 0;mix-blend-mode: color-burn;} .lh-story>.item>.l-container{height: 100%; display: flex; align-items: center;} .l-mg130{margin-top: var(--size-130);} .lh-story>.item .cont{width: calc(var(--size-100) * 5);} .lh-story>.item:first-child .cont{opacity: 0;} .lh-story>.item .text-vertical{text-orientation:upright;} .lh-story>.item .top .chapter{position: relative; align-items: center;} .lh-story>.item .top .chapter span{display: flex; align-items: center; justify-content: center; width: calc(var(--size-20) + 2px); aspect-ratio: 1/1; border-radius: 50%; border: 1px solid #FBE4BB;} .lh-story>.item .top .line{display: block; width: 1px; height: var(--size-140); background-color: rgba(251, 228, 187, 0.50);top: var(--size-10); position: relative; margin-left: var(--size-20); transform-origin: top;} .lh-story>.item .top .name{margin-left: var(--size-20); position: relative;} .lh-story>.item:nth-child(2n)>.l-container{justify-content: flex-end;} .lh-story>.item:nth-child(2n)>.bg{-webkit-mask-image:linear-gradient(270deg,rgba(255,255,255,0) 20%,rgba(255,255,255,1));} .lh-story>.item:nth-child(2n)>.l-container .top{justify-content: flex-end;} .lh-story>.item:nth-child(2n)>.l-container .bottom .nname{text-align: right;} .story-line{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; aspect-ratio: 572/3181; height: 80%;} .story-line .text{display: flex; align-items: center; justify-content: center; width:50px; aspect-ratio: 1/1; border-radius: var(--size-10); border: 1px solid #FBE4BB; background-color: #3D1D10; position: absolute; right: 80px; top:-15px; color: #FBE4BB; font-size: 36px; opacity: 0;} .story-line .text>*{display: inline-block;transform: rotate(-135deg);} .story-line>svg{width: 100%; height: 100%; -webkit-clip-path: inset(0 0 100% 0);} .strength-ccont{padding-bottom: calc(var(--size-80) * 2);} .strength-ccont .brand-text{position: static; margin-left: auto; margin-right: auto; display: block;} .strength-ccont .btn{width: var(--size-50); aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-dominant); display: flex; align-items: center; justify-content: center; margin: var(--size-90-) auto 0; position: relative; z-index: 2;} .strength-ccont .btn img{transform: rotate(135deg);} .strength-ccont .icon{width: calc(var(--size-100) * 7 + var(--size-30)); position: absolute; left: 50%; top: var(--size-100-); transform: translateX(-50%); pointer-events: none;} .craft-banner{height: 100%; background-color: #000;} .craft-banner>.bd>*{height: auto;} .craft-banner>.bd .img{width: 100%; height: 100%;} .strength-craft>.l-container{position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding-top: var(--size-140); padding-bottom: var(--size-45); pointer-events: none;} .strength-craft>.l-container>.left{width: calc(var(--size-110) * 3); position: relative; pointer-events: auto;} .strength-craft>.l-container>.left::after{content: ''; display: block; width: 1px; height: calc(100% + var(--size-140) + var(--size-45)); background-color: rgba(255, 255, 255, 0.20); position: absolute; right: 0; bottom: var(--size-45-);} .strength-craft>.l-container>.left>.center{display: flex; justify-content: flex-end; position: relative; z-index: 2;} .craft-hd>*{margin: var(--size-30) 0; display: flex; align-items: center; cursor: pointer;} .craft-hd>*>*{display: flex; align-items: center; transform-origin: right;} .craft-hd>*::after{content: ''; display: block; width: calc(var(--size-10) + 2px); aspect-ratio: 1/1; border-radius: 50%; background-color: #7A6D68; margin-left: var(--size-20); position: relative; left: calc((var(--size-10) + 2px) / 2 - 1px); transition: var(--transition);} .strength-craft>.l-container>.left>.bottom{display: flex;} .craft-hd>*:hover::after,.craft-hd>*.active::after{background-color: #fff;} .craft-hd>*:hover a,.craft-hd>*.active a{transform: scale(1.4);} .craft-hd>*:hover a,.craft-hd>*.active a{transform: scale(1.4);} .craft-banner .l-container{position: absolute; left: 0; top: 0; right: 0; bottom: 0;} .craft-banner .l-container>.left{width: calc(var(--size-110) * 3); position: relative;} .craft-banner .l-container>.right{flex: 1; display: flex; align-items: flex-end; padding-bottom: var(--size-55); padding-left: var(--size-130);} .craft-item{align-items: flex-end;} .craft-item>*{margin-right: var(--size-10); margin-top: var(--size-10);} .craft-item>*:last-child{margin-right: 0;} .craft-item>*>*{display: block; width: var(--size-95); aspect-ratio: 1/1; border-radius: 6px; background-color: rgba(255, 255, 255, 0.9); color: #000; padding: var(--size-25); overflow: hidden;} .craft-item>*>* .top{display: flex; align-items: center; justify-content: center; width: var(--size-45); aspect-ratio: 1/1; position: relative; transition: var(--transition);} .craft-item>*>* .top::before{content: ''; display: block; width: 100%; height: 100%; background: url(../img/about/c5.svg) no-repeat center; background-size: cover; position: absolute; left: 0; top: 0; transition: var(--transition);} .craft-item>*>* .bottom{position: absolute; left: var(--size-35); bottom: var(--size-30); color: #fff; opacity: 0; transition: var(--transition); right: 0;} .l-font64{font-size: var(--size-65);} .craft-item>*>* .bottom .num{position: absolute; right: var(--size-20); bottom: var(--size-50-); opacity: 0.2;} .craft-item>*.active>*{width: calc(var(--size-140) * 2); aspect-ratio: 280/272;background: rgba(0, 0, 0, 0.20); color: #fff;} .craft-item>*.active>* .top{transform: translate(var(--size-10),0) scale(1.2); transform-origin: left top;} .craft-item>*.active>* .top::before{filter: brightness(0) invert(1);} .craft-item>*.active>* .bottom{opacity: 1;} .fragrance-item{width: 100%;} .fragrance-item>*{padding-left: var(--size-15); margin-top: var(--size-15);} .fragrance-item>*>*{background-color: #fff;display: flex; align-items: center; justify-content: center; height: var(--size-55); border-radius: 8px; color: #000;} .fragrance-item>*.active>*{background-color: var(--color-dominant); color: #fff;} .craft-item.two>*>*{width: calc(var(--size-75) * 2); aspect-ratio: 148/76; padding: 0;} .craft-item.two>*>* .cont{align-items: center; position: absolute; left: var(--size-35); top: var(--size-25);} .craft-item.two>*>* .cont .icon{width: var(--size-30); margin-right: var(--size-10); transition: var(--transition);} .craft-item.two>*.active>*{width: calc(var(--size-140) * 2); aspect-ratio: 280 / 272;} .craft-item.two>*.active>* .cont{transform: scale(1.3);} .craft-item.two>*.active>* .cont .icon{filter: brightness(0) invert(1);} .craft-item.two>*.active>* .cont span{transform: translate(-115%,200%);} .honor-cont>.text{position: absolute; left: 0; top: 50%; right: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-50%);} .honor-banner{width: 70%; margin: auto;} .honor-banner:not(.swiper-initialized)>.bd{justify-content: center;} .honor-banner>.bd>*{width: 33.3%;} .honor-banner>.bd>* .img{aspect-ratio: 368/511; display: flex; align-items: center; justify-content: center;} .honor-banner>.bd>* .img img{width: auto; max-height: 100%;} .about-honor{padding-bottom: calc(var(--size-100) * 2);} .honor-banner .cont{margin-top: var(--size-45);} .honor-banner.swiper-creative>.bd>* .cont{opacity: 0; transform: translateY(100%); transition: var(--transition);} .honor-banner>.bd>*.swiper-slide-active .cont{opacity: 1; transform: translateY(0);} .honor-num em{position: relative; top: 3px;} .lh-pro>.left{width: calc(var(--size-130) * 2);} .lh-pro>.right{flex: 1; padding-right: var(--container-l); padding-left: var(--container-l);} .pro-l{background-color: #fff; border-radius: 0 var(--size-20) var(--size-20) 0; overflow: hidden;} .pro-search{height: var(--size-80); background-color: var(--color-dominant); --placeholder:#fff;} .pro-search input{flex: 1; height: 100%; border: none; color: #fff; padding: 0 0 0 var(--size-35);} .pro-search .btn{padding: 0 var(--size-30);filter: brightness(0) invert(1); opacity: 0.6;} .pro-search .btn:hover{opacity: 1;} .pro-bottom{padding: var(--size-30) var(--size-30) var(--size-60) var(--size-50);} .pro-hd>*{margin-top: var(--size-30);} .pro-hd>* .right{display: flex; align-items: center; justify-content: center; width: var(--size-20); aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-dominant); transform: translateX(-100%); opacity: 0; transition: var(--transition);} .pro-hd>* .left{flex: 1; transition: var(--transition);} .pro-hd>* .left::before{content: ''; display: block; width: 6px; aspect-ratio: 1/1; border-radius: 50%; background-color: #D9D9D9; margin-right: var(--size-10);} .pro-hd>*.active>*,.pro-hd>*>*:hover{color: var(--color-dominant);} .pro-hd>*.active>* .right{transform: translateX(0); opacity: 1;} .pro-hd>*>*:hover .left{transform: translateX(var(--size-10));} .pro-item{margin-left: var(--size-30-);} .pro-item>*{margin-top: var(--size-30); padding-left: var(--size-30);perspective: 2000px; position: relative; transition: var(--transition); transition-property: transform;} .pro-item>*>*{aspect-ratio: 333/454; background-color: #fff; border-radius: var(--size-10); display: block; transform-style: preserve-3d; transition: transform 0.6s ease;} .pro-item .card-front .top{aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; z-index: 1; border-radius: var(--size-10); overflow: hidden;} .pro-item .card-front .top::before{content: ''; display: block; width: 100%; height: 100%; background: url(../img/pro/bg.jpg) no-repeat center; background-size: cover; position: absolute; left: 0; top: 0; z-index: -1; -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,0));} .pro-item .card-front .bottom{padding: var(--size-30) var(--size-30) var(--size-35);} .pro-item .card-back{background-color: var(--color-dominant); border-radius: var(--size-10); overflow: hidden; padding:var(--size-30) var(--size-20) var(--size-20); aspect-ratio: 333/516; height: auto;} .pro-item .card-back .cont{background-color: #fff; border-radius: 6px; padding:var(--size-15) var(--size-10); aspect-ratio: 294/345; overflow: hidden;} .pro-item .card-back .cont .rule>*{display: flex; align-items: center; position: relative; margin-bottom: var(--size-10);} .pro-item .card-back .cont .rule>*::after{content: ''; display: block; width: 1px; height: var(--size-10); background-color: #CFCFCF; position: absolute; right:var(--size-30);} .pro-item .card-back .cont .rule>*:nth-child(3n)::after{display: none;} .pro-item .card-back .cont .img{aspect-ratio: 270/128; border-radius: var(--size-10); cursor: pointer; margin-top: var(--size-10);} .pro-item .card-back .cont .img .icon{width: var(--size-20); position: absolute; right: var(--size-10); bottom: var(--size-10);} .pro-link>*{margin: 0 calc(var(--size-15) / 2);} .pro-link>*>*{display: flex; align-items: center; justify-content: center; width: var(--size-50); aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; padding: var(--size-10);} .pro-item>*:hover{z-index: 3;} .pro-item>*:hover>*{transform: rotateY(-180deg);} .custom-imgs{width:calc(var(--size-100) * 5 + var(--size-20)); aspect-ratio: 1/1; border-radius: 50%; margin: auto; position: relative; border: var(--size-10) solid rgba(255, 255, 255, 0.42);} .custom-imgs>*{position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 50%; border: var(--size-20) solid rgba(255, 255, 255, 0); -webkit-clip-path: circle(0% at 50% 50%); transition: var(--transition);} .custom-imgs>*:nth-child(1){z-index: 6;} .custom-imgs>*:nth-child(2){z-index: 5;} .custom-imgs>*:nth-child(3){z-index: 4;} .custom-imgs>*:nth-child(4){z-index: 3;} .custom-imgs>*:nth-child(5){z-index: 2;} .custom-imgs>*.active{-webkit-clip-path: circle(50% at 50% 50%);} .custom-cont{width: calc(var(--size-100) * 7 + var(--size-80)); aspect-ratio: 1/1; margin-left: auto; margin-right: auto;} .custom-cont-c{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;} .custom-line1{width: calc(var(--size-100) * 7 + var(--size-80)); aspect-ratio: 1/1; position: absolute; left: 0; top: 0;} .custom-line1>svg{position: absolute; left: 0; bottom: 0;} .custom-line{width: calc(var(--size-100) * 6 + var(--size-25)); aspect-ratio: 1/1; border: 1px solid rgba(255, 255, 255, 0.41); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .custom-line::before{content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.37); transform: scale(0.9);} .custom-item{position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 8;} .custom-item>*{height: 33.3%; display: flex; align-items: center; cursor: pointer;} .custom-item>* .right{width: var(--size-100); aspect-ratio: 1/1; background-color: #F3F3F3; border: 1px dashed rgba(188, 22, 22, 0.20); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: var(--size-15);} .custom-item>* .right .icon{width: 100%; height: 100%; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center;} .custom-item>* .right .icon img{width: var(--size-30);} .custom-item.left>*{justify-content: flex-end; text-align: right;} .custom-item.left>* .right{margin-left: var(--size-55);} .custom-item.left>* .left{flex: 1;} .custom-item.left{transform: translateX(-80%);} .custom-item.right{transform: translateX(80%);} .custom-item.left>*:nth-child(2){transform: translateX(-14%);} .custom-item.right>* .right{margin-right: var(--size-55);} .custom-item.right>*:nth-child(2){transform: translateX(14%);} .serves-custom::before{content: ''; display: block; width: calc(var(--size-100) * 16 + var(--size-45)); aspect-ratio: 1/1; border-radius: 50%; border: 1px dotted #BC1616; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0.3;-webkit-mask-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,1) 0%,rgba(255,255,255,0));} .proposal-cont>.right{width: calc(var(--size-100) * 6 + var(--size-10));} .proposal-cont>.left{flex: 1;} .proposal-img>*{margin-right: var(--size-40); aspect-ratio: 411/513; } .proposal-img>*>*{display: block; width: 100%; height: 100%; position: relative;border-radius: var(--size-10); overflow: hidden;} .proposal-img>*>*::before{content: ''; display: block; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 70.09%, #000 100%); position: absolute; left: 0; top: 0;} .proposal-img>* .cont{position: absolute; left: var(--size-30); bottom: var(--size-30); right: var(--size-30); z-index: 2;} .proposal-item>*{padding-bottom: var(--size-30); position: relative;} .proposal-item>*>.left{width: var(--size-130); padding-top: calc(var(--size-10) - 2px); color: #D5D5D5;} .proposal-item>*>.left>*{ transition: var(--transition); transform-origin: right; display: inline-block;} .proposal-item>*>.right{flex: 1;} .proposal-item>*>.right .top{cursor: pointer;} .proposal-item>*>.right .top .icon{width: var(--size-30); margin-right: var(--size-30);} .proposal-item>*>.right .top h3{transition: var(--transition); transform-origin: left;} .proposal-item>*>.right .bottom{margin-top: var(--size-25); overflow: hidden; display: none; position: relative;} .proposal-item>*>.right .bottom::before{content: ''; display: block; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1);} .proposal-item>*>.right .bottom pre{padding: var(--size-20) 0;} .proposal-item>*.active>.right .bottom{display: block;} .proposal-item>*.active>.left>*{transform: scale(1.3); color: var(--color-dominant);} .proposal-item>*.active>.right .top h3{transform: scale(1.3);} .proposal-cont>.right .brand-text{position: relative; top: 0; left: var(--size-140-); max-width:inherit; width: 140%;} .proposal-item>*::after{content: ''; display: block; width: 1px; height:100%; border: 1px dashed rgba(188, 22, 22, 0.10); position: absolute; left: var(--size-65); top: var(--size-10);} .proposal-item>*:last-child::after{display: none;} .proposal-item>*::before{content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background-color: #D5D5D5; border-radius: 50%; position: absolute; left: calc(var(--size-65) - 4px); top: var(--size-10); transition: var(--transition); z-index: 1;} .proposal-item>*.active::before{background-color: var(--color-dominant);} .proposal-item>*.active::after{border:1px solid var(--color-dominant);} .proposal-line{width: 1px; height: 0%; position: absolute; left:var(--size-65); top: var(--size-10); background-color: var(--color-dominant); transform-origin: top;} .video-item{margin: var(--size-100-) 0 0 var(--size-100-);} .video-item>*{padding-left: var(--size-100); margin-top: var(--size-100); position: relative;} .video-item>*>*{aspect-ratio: 279/576; border-radius: var(--size-10); background-color: #D9D9D9; border: 6px solid #D9D9D9; width: 100%;} .video-item>*>* img{border-radius: var(--size-10); height: 100%;} .video-item>*::after{content: ''; display: block; width: var(--size-30); aspect-ratio: 30/36; background: url(../img/serves/c6.svg) no-repeat center; background-size: cover; position: absolute; left: calc(100% + var(--size-35)); top: 50%; transform: translateY(-50%);} .video-item>*:last-child::after{display: none;} .serves-video>.bg{position: absolute; left: 0; right: 0; top: 20%; -webkit-mask-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0));} .training-cont>.left{width: calc(var(--size-100) * 8 + var(--size-60)); margin-right: var(--size-70);} .training-cont>.right{flex: 1;} .training-cont>.left .img{aspect-ratio: 860/513; border-radius: var(--size-10);} .training-item>*{margin:var(--size-45) 0;} .training-item>* .top .icon{width: calc(var(--size-30) - 3px); margin-right: var(--size-20);} .training-item>* .bottom{margin-top: var(--size-20); padding: var(--size-20) 0; border-top: 1px solid rgba(0,0,0,0.1);} .news-date{height: var(--size-60); background-color: #fff; border-radius: var(--size-60); padding: 0 var(--size-20); position: relative; width: calc(var(--size-100) * 2); justify-content: flex-end; cursor: pointer;} .news-date input{position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: none; cursor: pointer;} .news-date .icon{filter: brightness(0); opacity: 0.3; transform: rotate(90deg);} .public-ban.detail{aspect-ratio: 1920/410;} .detail-cont{background-color: #fff; box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.10); border-radius: 6px; margin-top: calc(var(--size-90-) * 3); padding: var(--size-50);} .detail-cont>.label>*{margin-right: var(--size-15);} .detail-cont>.label>*:last-child{margin-right: 0;} .detail-cont>.cont{border-top: 1px solid rgba(0, 0, 0, 0.10);} .public-ban.contact{height: 100vh; aspect-ratio: inherit;} .contact-ban-bottom{position: absolute; left: 0; right: 0; bottom: var(--size-40); align-items: flex-end;} .contact-ban-bottom>*{flex: 1;} .contact-ban-bottom>*.center{flex: 4;} .contact-ban-bottom>*.right{display: flex; justify-content: flex-end;} .contact-ewm>*{margin-left: var(--size-20);} .contact-ewm>* .img{width: var(--size-100); margin: auto;} .map-cont{aspect-ratio: 1720/662; border-radius: var(--size-10); overflow: hidden; background-color: #F7FDF7;} .map-layer{position: absolute; left: 0; top: 0; width: calc(var(--size-100) * 3 + var(--size-45)); bottom: 0; background:#F7FDF7 url(../img/contact/a1.png) no-repeat center; background-size: cover; padding: 0 var(--size-75); z-index: 3;} .map-layer>.item{flex: 1; border-top: 1px solid #E4E4E4; padding: var(--size-60) 0;} .map-layer>.item:first-child{border: none;} .map-layer>.item .icon{width: var(--size-40);} .map-layer>.item .btn>*{height: var(--size-40); aspect-ratio: 108/40; justify-content: center; border-radius: var(--size-40); border: 1px solid var(--color-dominant);} .map-layer>.item .btn>* .img{width: calc(var(--size-15) + 3px); margin-right: calc(var(--size-10) - 2px);} #gdMap{width: 100%; height: 100%; pointer-events: none;} #gdMap .amap-icon{width: var(--size-40) !important; aspect-ratio: 40/48;} .amap-copyright, .amap-logo{z-index: 1;} .contact-message{background-color: #fff; border-radius: var(--size-10);box-shadow: 0 4px 13.8px 0 rgba(0, 0, 0, 0.06); padding: var(--size-70);} .message-item{margin-left: var(--size-80-);} .message-item>*{padding-left: var(--size-80); margin-bottom: var(--size-60);} .l-red{color: #BC1616;} .message-item>* input,.message-item>* textarea{height: var(--size-50); background: rgba(217, 217, 217, 0.40); border-radius: 4px; padding: 0 var(--size-30); border: none;} .w100{width: 100%;} .message-item>* textarea{height: var(--size-100); padding: var(--size-20) var(--size-30); line-height: 120%;} .message-btn{border-radius: var(--size-60); background-color: var(--color-dominant); padding: 5px; color: #fff;} .message-btn .icon{width: var(--size-50); aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; transition: var(--transition);} .message-btn:hover .icon{transform: rotate(45deg);} .message-btn span{flex: 1; text-align: center; aspect-ratio: 100/60; height: var(--size-50); display: flex; align-items: center; justify-content: center;} .l-pd130{padding-top: var(--size-130); padding-bottom: var(--size-130);} .join-l{width: calc(var(--size-100) * 4);} .join-item>*{height: var(--size-75); border-bottom: 1px solid rgba(255, 255, 255, 0.30);} .contact-btn{height: var(--size-60); aspect-ratio: 166/60; border-radius: var(--size-30); background-color: var(--color-dominant); display: flex; align-items: center; justify-content: center;} .contact-btn:hover{opacity: 0.8;} .footer-top .icon{width: calc(var(--size-80) * 2);} .factory-top>.left{width: calc(var(--size-100) * 7 + var(--size-30)); margin-right: var(--size-85);} .factory-top>.right{flex: 1;} .factory-top>.left .img{aspect-ratio: 724/472; border-radius: var(--size-10);} .factory-top>.right .about-total{width: 100%;} .factory-top>.right .about-total>*{text-align: center;} .factory-item{margin: var(--size-100-) 0 0 var(--size-100-);} .factory-item>*{padding-left: var(--size-100); margin-top: var(--size-100);} .factory-item>* .img{aspect-ratio: 356/206; border-radius: var(--size-10);} .strength-res-cont .cont{width: 53%; margin-left: auto; margin-right: auto;} .header-layer{position: fixed; left: 0; top: 0; width: 100%; height: 100vh; transform: translateY(-150%); transition: var(--transition);} .header-layer>.l-container{height: 100%; opacity: 0; transition: var(--transition);} .header-layer>.bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #fff;} .header-layer>.bg .wave{position: absolute; left: 0; top: 100%; right: 0;transform: translateY(-10px) rotate(180deg);fill: #fff;} .header-layer>.bg .wave .start,.header-layer>.bg .wave .end{display: none;} .hader-layer-nav>* a{display: inline-block;} .hader-layer-nav>* a:hover{transform: translateX(var(--size-10));} .hader-layer-nav>* .bottom a{color: #666;} .header-layer>.l-container>.center{padding-left: 20%; padding-right: 20%;} .header-layer-search{height: var(--size-60); aspect-ratio: 600/60; background-color: #f6f6f6;} .header-layer-search>input{flex: 1; height: 100%; border: none;} .header-layer-search>.btn{height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 var(--size-30); background-color: var(--color-dominant); color: #fff;} .header-layer>.l-container>.bottom{position: relative; padding: var(--size-30);} .header-layer>.l-container>.bottom::before{content: ''; display: block; width: 100vw; height: 100%; background-color: #f6f6f6; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1;} .header-share>*{margin-right: var(--size-30);} .header-share>* a{display: flex; align-items: center; justify-content: center;} .header-share>* a .icon{width: var(--size-50); aspect-ratio: 1/1; border-radius: 50%; border: 1px solid var(--color-dominant); padding: var(--size-10); margin-right: var(--size-15);} .header-share>* a:hover{color: var(--color-dominant);} .on .header-layer{transform: translateY(0);} .on .header-nav-btn::before{transform:translate(0,4px) rotate(45deg);} .on .header-nav-btn::after{transform:translate(0,-4px) rotate(-45deg);} .on header>.l-container>.center,.on .header-search,.on .header-link{opacity: 0; pointer-events: none;} .on .header-layer>.l-container{opacity: 1; transition-delay: 0.6s;} .on header>.l-container>.left{transform: translateY(0);} .on .nav-other-item{transform: translateY(-100%); opacity: 0; pointer-events: none;} #storyThree{position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; opacity: 0.5;} /* dominant data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2VlZSIvPjwvc3ZnPg== backdrop-filter: grayscale(1); white-space: nowrap; swiper-slide-duplicate-active filter: brightness(0) invert(1); mix-blend-mode: difference; -webkit- swiper-initialized --color-wathet linear-gradient(0deg,rgba(255,255,255,.4),rgba(255,255,255,0)); F5AB00 transparent font-family: "ebrimabd"; .hRegular{font-family: "hRegular";} .hLight{font-family: "hLight";} .hBold{font-family: "hBold";} l-uppercase transition:cubic-bezier(0.215,.61,.355,1) .45s; */ /* @media screen and (min-width: 1025px) and (max-aspect-ratio: 1/1){ :root{ --fullpage-h:auto, } .index-about{background-color: #000;} } */ /*手机*/ @media screen and (max-width: 1024px){ :root{ --size-10: 1.3333333333333335vw; --size-15: 2vw; --size-20: 2.666666666666667vw; --size-25: 3.3333333333333335vw; --size-30: 4vw; --size-35: 4.666666666666667vw; --size-40: 5.333333333333334vw; --size-45: 6vw; --size-50: 6.666666666666667vw; --size-55: 7.333333333333333vw; --size-60: 8vw; --size-65: 8.666666666666668vw; --size-70: 9.333333333333334vw; --size-75: 10vw; --size-80: 10.666666666666668vw; --size-85: 11.333333333333332vw; --size-90: 12vw; --size-95: 12.666666666666668vw; --size-100: 13.333333333333334vw; --size-110: 14.666666666666666vw; --size-120: 16vw; --size-130: 17.333333333333336vw; --size-140: 18.666666666666668vw; --size-10-: -1.3333333333333335vw; --size-15-: -2vw; --size-20-: -2.666666666666667vw; --size-25-: -3.3333333333333335vw; --size-30-: -4vw; --size-35-: -4.666666666666667vw; --size-40-: -5.333333333333334vw; --size-45-: -6vw; --size-50-: -6.666666666666667vw; --size-55-: -7.333333333333333vw; --size-60-: -8vw; --size-65-: -8.666666666666668vw; --size-70-: -9.333333333333334vw; --size-75-:-10vw; --size-80-: -10.666666666666668vw; --size-85-: -11.333333333333332vw; --size-90-: -12vw; --size-95-: -12.666666666666668vw; --size-100-: -13.333333333333334vw; --size-110-: -14.666666666666666vw; --size-120-: -16vw; --size-130-: -17.333333333333336vw; --size-140-: -18.666666666666668vw; --font-size:clamp(12px,1.866666666666667vw,24px); --container-w:100%; --fullpage-h:auto; } .l-font12{font-size: 1.6vw;} .l-font14{font-size: clamp(12px,1.866666666666667vw,24px);} .l-font16{font-size: clamp(14px,2.1333333333333333vw,32px);} .l-font20{font-size: clamp(16px,2.666666666666667vw,40px);} .l-font32{font-size: clamp(20px,4.266666666666667vw,64px);} .l-font40{font-size: 5.333333333333334vw;} .l-font44{font-size: 5.866666666666666vw;} .l-font48{font-size: 5.8vw;} .l-font64{font-size: 7vw;} *{line-height: inherit;} .l-attachment{background-attachment: inherit;} header,.header-fixed{display: flex; opacity: 1; height: var(--size-100);} .header-cont>.right{display: none;} .header-cont>.left{background: none;box-shadow:none;backdrop-filter:inherit; padding: 0;} .header-cont{height: 100%;} .lh-nav{position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #fff; display: block; color: var(--body-color); overflow-y: auto; padding-left: var(--size-30); padding-right: var(--size-30); padding-bottom: var(--size-30); padding-top: var(--size-100); opacity: 0; pointer-events: none; transition: var(--transition);} .lh-nav>*{margin: 0;} .lh-nav>*>a{padding: var(--size-30) 0; border-bottom: 1px solid #f5f5f5; display: flex ; align-items: center; font-size: var(--size-30);justify-content: space-between;} .lh-nav>*>a::after{content: '进入频道页>';display: block;font-size: 12px;color: #999;} .english .lh-nav>*>a::after{content:'MORE>'} .on .lh-nav{opacity: 1; pointer-events: auto;} .on .nav-btn i{transform: scaleX(0);} .on .nav-btn::before{transform: translate(0,7px) rotate(45deg);} .on .nav-btn::after{transform: translate(0,-7px) rotate(-45deg);} .on .header-cont{color: var(--body-color);} .on .header-link>* .icon{filter: invert(1);} .on header>.header-cont{height: 100%;} .on header>.header-cont::before{content: ''; display: block; width: 100vw; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0; z-index: 2; box-shadow: 0 0 20px rgba(0,0,0,0.05);} .nav-two{transition: none; display: flex; flex-direction: row; flex-wrap: wrap; color: #000; margin-left: var(--size-15-);} .nav-two>*{width: 100%;display: flex;flex-wrap: wrap;} .nav-two>*>*{ padding-left: var(--size-15); margin-top: var(--size-15);} .nav-two>* a{width: 100%;} .on .nav-two{opacity: 1; pointer-events: auto; transform: none !important; position: relative; left: 0; top: 0;padding: 0 !important;} .nav-two>*{background: none;box-shadow: none; } .nav-two>*::before{display: none;} .nav-two>*>*{width: calc(50% - var(--size-15));} .nav-two>* a{ white-space: inherit;background-color: #f5f5f5; padding: var(--size-20); line-height: 120%; font-size: clamp(14px,2.1333333333333333vw,32px); display: flex; text-align: center;white-space: nowrap; justify-content: center;} .nav-btn{display: block; position: relative; z-index: 2;--bg:#000;} .header-fixed .nav-btn{--bg:#000;} .nav-btn::before,.nav-btn::after,.nav-btn i{content: ''; display: block; width: var(--size-40); height: 2px; background-color: var(--bg); transition: var(--transition);} .nav-btn i{margin: var(--size-10) 0;} .Fixed .nav-btn{--bg:#fff;} .on .header-nav{pointer-events: auto; opacity: 1;} .on .nav-btn{--bg:#000;} .on .lh-logo{filter: none;} .on .nav-btn i{transform: scaleX(0);} .on .nav-btn::before{transform: translate(0,calc(var(--size-10) + 2px)) rotate(45deg);} .on .nav-btn::after{transform: translate(0,calc(var(--size-10-) - 2px)) rotate(-45deg);} body:has(.index-banner){overflow: initial; height: auto;} .footer-center>.left{width: 100%;} footer::before{height: 70%;} .map-layer{position: relative; width: 100%; flex-direction: row; padding: 0;} .map-cont{aspect-ratio: inherit;} #gdMap{height: auto; aspect-ratio: 1720/662;} .map-layer>.item{padding: var(--size-60);} .map-layer>.item .icon{width: var(--size-60);} .message-item{margin-left: var(--size-30-);} .message-item>*{padding-left: var(--size-30); margin-bottom: var(--size-30);} .news-item>*{width: 50%;} .public-ban{aspect-ratio: 1/1;} .nav-other-item>*.active>*{background-color: var(--color-dominant); color: #fff;} .list-page>*{width: var(--size-60);} .detail-cont{margin-top: 0; background: none; box-shadow: none; padding:0;} .custom-item{position: relative; transform: none !important;} .custom-item>*{justify-content: flex-start !important; text-align: left !important; transform: none !important; display: block; margin-top: var(--size-60); position: relative;} .custom-item>*>*{justify-content: flex-start;} .custom-cont{width: 100%; aspect-ratio: inherit;} .custom-item.left>* .left{padding-left: calc(var(--size-100) + var(--size-55));} .custom-item.left>* .right{position: absolute; left: 0; margin-left: 0;} .nav-other{padding-left: var(--size-30); padding-right: var(--size-30);} .proposal-cont>.right{width: 100%; margin-top: var(--size-30);} .proposal-cont>.left{width: 100%; flex: inherit;} .proposal-img{margin-left: var(--size-30-);} .proposal-img>*{width: 50%; margin-right: 0; padding-left: var(--size-30);} .proposal-item>*>.right .bottom{display: block;} .proposal-item>*::before{background-color: var(--color-dominant);} .proposal-item>*>.left>*{color: var(--color-dominant);} .training-cont>.left{width: 100%; margin-right: 0;} .nav-other{position: relative; top: 0;} .pro-item{margin-top: var(--size-30-);} .pro-item>*{width: 50%; margin-top: var(--size-30);} .lh-pro>.right{padding-left: var(--size-30);padding-right: var(--size-30);} .pro-item>*>*{aspect-ratio: inherit;} .pro-item>*>*:hover{transform: none;} .pro-item .card-front{display: none;} .pro-item .card-back{aspect-ratio: inherit; transform: rotateY(0deg); position: relative;} .pro-item .card-back .cont{aspect-ratio: inherit;} .pro-layer-cont{width: 90%;} .pro-layer-close{left: 50%; top: calc(100% + var(--size-30)); transform: translateX(-50%);} .about-res-cont>.cont{height: calc(clamp(12px,0.8333333333333334vw,32px) * 8);} .about-res-cont{width: 100%;} .culture-item>*{width: 50%;} .about-res{padding-bottom: calc(var(--size-100) * 3);} .l-fullpage{min-height: inherit;} .strength-craft{height: 100vh;} .craft-banner .l-container{flex-direction: column;} .craft-banner .l-container>.right{padding-left: 0; padding-right: var(--size-30);} .strength-craft>.l-container>.left{width: 100%;} .strength-craft>.l-container>.left>.bottom{opacity: 0;} .factory-top>.left{width: 100%; margin-right: 0; margin-bottom: var(--size-30);} .factory-item{margin: var(--size-30-) 0 0 var(--size-30-);} .factory-item>*{padding-left: var(--size-30); margin-top: var(--size-30);} .strength-res-cont .cont{width: 100%;} .honor-banner{width: 100%;} .index-banner{clip-path: none; height: 40vh;} .header-layer>.l-container>.center{padding-left: var(--size-30); padding-right: var(--size-30);} .index-about-cont>.left{width: 100%; margin-right: 0;} .index-strength>.l-container>.left{width: 100%;} .index-strength>.l-container>.right{margin-top: var(--size-60);} .index-strength-item>*:nth-child(2n - 1){transform: translateY(0);} .index-strength>.l-container>.right{width: 100%; margin-right: 0;} .newsPro-top{display: block;} .newsPro-top>.right{margin-top: var(--size-40);} .index-serves-cont{aspect-ratio:inherit; padding: var(--size-100) var(--size-20);} .index-serves-item>*{width: calc(50% - var(--size-20)); margin-top: var(--size-20);} .index-serves-item>* a{height: calc(var(--size-100) * 2 + var(--size-90));} .index-serves-item>* .top{height: calc(var(--size-100) * 2 + var(--size-10)); padding: var(--size-40) var(--size-20);} .index-serves-item>* .top>*{transform: translateY(0); opacity: 1;} .index-serves-item>* a .bottom>.left .num{transform: translateY(0);} .index-serves-item>* a .bottom>.left .name{transform: translateY(-110%);} .footer-center>.right,.footer-center>.left>.bottom,.footer-bottom>.right,.custom-cont-c,.index-loading,.lh-nav,.index-strength>.l-container>.left .bottom{display: none;} .public-ban>.l-container,.lh-story>.item .cont,.lh-story>.item:first-child .cont,.index-banner>.bd .l-container{opacity: 1;} /* ::-webkit-scrollbar{ display: none; } */ /*平板*/ @media screen and (min-width:768px){ :root{ --size-10: 0.9765625vw; --size-15: 1.46484375vw; --size-20: 1.953125vw; --size-25: 2.44140625vw; --size-30: 2.9296875vw; --size-35: 3.41796875vw; --size-40: 3.90625vw; --size-45: 4.39453125vw; --size-50: 4.8828125vw; --size-55: 5.37109375vw; --size-60: 5.859375vw; --size-65: 6.34765625vw; --size-70: 6.8359375vw; --size-75: 7.32421875vw; --size-80: 7.8125vw; --size-85: 8.30078125vw; --size-90: 8.7890625vw; --size-95: 9.27734375vw; --size-100: 9.765625vw; --size-110: 10.7421875vw; --size-120: 11.71875vw; --size-130: 12.6953125vw; --size-140: 13.671875vw; --size-10-: -0.9765625vw; --size-15-: -1.46484375vw; --size-20-: -1.953125vw; --size-25-: -2.44140625vw; --size-30-: -2.9296875vw; --size-35-: -3.41796875vw; --size-40-: -3.90625vw; --size-45-: -4.39453125vw; --size-50-: -4.8828125vw; --size-55-: -5.37109375vw; --size-60-: -5.859375vw; --size-65-: -6.34765625vw; --size-70-: -6.8359375vw; --size-75-:-7.32421875vw; --size-80-: -7.8125vw; --size-85-: -8.30078125vw; --size-90-: -8.7890625vw; --size-95-: -9.27734375vw; --size-100-: -9.765625vw; --size-110-: -10.7421875vw; --size-120-: -11.71875vw; --size-130-: -12.6953125vw; --size-140-: -13.671875vw; --font-size:1.3671875vw; } .map-layer>.item{border: none; border-left: 1px solid #E4E4E4;} .lh-story>.item{height: 100vh;} } /*手机*/ @media screen and (max-width:767px){ .header-nav-btn{width: var(--size-60);} .header-nav-btn::before, .header-nav-btn::after{width: var(--size-30); margin-left: var(--size-15-);} .header-nav-btn::before{margin-top: -4px;} .header-nav-btn::after{margin-top: 3px;} .public-ban.contact{height: auto; aspect-ratio: 1/1;} .contact-ban-bottom{display: none;} .map-layer>.item .btn>*{height: var(--size-60);} .map-layer{display: block;} .map-layer>.item{flex: none; width: 100%;} .message-item>*{width: 100%;} .message-item>* input{height: var(--size-80);} .message-item>* textarea{height: calc(var(--size-100) * 2);} .contact-btn{height: var(--size-70);} .join-item>*{height: var(--size-100);} .news-date{height: var(--size-80); width: calc(var(--size-140) * 2);} .video-item{margin: var(--size-30-) 0 0 var(--size-30-);} .video-item>*{padding-left: var(--size-30); margin-top: var(--size-30); width: 50%;} .video-item>*::after{display: none;} .training-item>* .top .icon{width:var(--size-40);} .about-res-cont>.cont{height: calc(clamp(12px,0.8333333333333334vw,32px) * 7);} .culture-item>*{width: 100%;} .culture-item>*>*{aspect-ratio: 1/1;} .lh-story>.item{padding-top: var(--size-140); padding-bottom: var(--size-140);} .fragrance-item>*{width: 20%;} .index-strength-item>*>*{aspect-ratio: inherit; height: 100%;} .index-serves-item>*{width: 100%; margin-right: 0;} .hader-layer-nav{justify-content: flex-start;} .hader-layer-nav>*{width: 33.3%; margin-bottom: var(--size-30);} .header-layer-search{height: var(--size-80); aspect-ratio: inherit; width: 100%;} .header-layer>.l-container>.bottom>.right{display: none;} .message-btn,.join-l,.news-item>*,.factory-item>*{width: 100%;} } }