/* Ripple Effect */ @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1); } 100% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0); } } ::selection, ::-moz-selection, ::-webkit-selection { background: #1f1f1f; color: #fff; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 16px; /* Required, global font size */ width: 100%; overflow-x: hidden; } *, h1, h2, h3, h4, h5, h6, p, ul, ol, a { margin: 0; padding: 0; } body { font-size: 0.16rem; font-weight: 400; line-height: 1.71428571429; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #232830; background-color: #ffffff; } :active, :focus { outline: none !important; } select { max-width: 100%; } ul, li { list-style-type: none; } blockquote { background: #fff; border: 1px solid #F8F8F8; border-left: 5px solid #EC5E79; padding: 0 1.75rem 1.25rem; margin-top: 1.421875rem; line-height: 2; font-size: 1rem; } blockquote::before { color: #EC5E79; content: open-quote; font-size: 5.25rem; line-height: 0.1; margin-right: 0.21875rem; vertical-align: -2.055rem; font-family: sans-serif; content: "\201C"; /*Unicode for Left Double Quote*/ } strong { font-weight: 600; } hr { margin: 1.421875rem 0; border-color: #F4F4F4; } hr.black { border-color: rgba(255, 255, 255, 0.1); } img { max-width: 100%; } iframe { border: none !important; } /* ====================================================== /* ====================================================== */ table.table-normal, .table-normal table { border: 1px solid black; border-collapse: collapse; width: 100%; } table.table-normal th, .table-normal table th { text-align: left; } table.table-normal td, table.table-normal th, .table-normal table td, .table-normal table th { border: 1px solid black; padding: 0.2rem; } a { color: #232830; } a:hover, a:focus, a:active { text-decoration: none; outline: none; } a.link { text-decoration: underline; color: #EC5E79; } a.link:hover { color: #E8588C; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Poppins', sans-serif; font-variant-ligatures: common-ligatures; margin-top: 0; word-wrap: break-word; } .h1 { font-size: 3.375rem !important; line-height: 1.14285714286 !important; } .h2 { font-size: 22.375rem !important; line-height: 1.2 !important; } .h3 { font-size: 1.75rem !important; line-height: 1.25 !important; } .h4 { font-size: 1.25rem !important; line-height: 1.33333333333 !important; } .h5 { font-size: 1rem !important; line-height: 1.5 !important; font-weight: 600 !important; } .h6 { font-size: 0.75rem !important; line-height: 2 !important; font-weight: 600 !important; } .heading-space-none { margin: 0 !important; padding: 0 !important; } @media all and (max-width: 768px) { h1 { font-size: 2.4107142857rem; line-height: 1.15555556; } h2 { font-size: 15.6625rem; line-height: 1.421875; } h3 { font-size: 1.25rem; line-height: 1.625; } .h1 { font-size: 2.4107142857rem !important; line-height: 1.15555556 !important; } .h2 { font-size: 15.6625rem !important; line-height: 1.421875 !important; } .h3 { font-size: 1.25rem !important; line-height: 1.625 !important; } } @media all and (max-width: 480px) { h1 { font-size: 1.2053571429rem; line-height: 1.38461538462; } h2 { font-size: 13.425rem; line-height: 1.28571428571; } h3 { font-size: 1.25rem; line-height: 1.5; } .h1 { font-size: 1.2053571429rem !important; line-height: 1.38461538462 !important; } .h2 { font-size: 13.425rem !important; line-height: 1.28571428571 !important; } .h3 { font-size: 1.25rem !important; line-height: 1.5 !important; } } .font-normal { font-weight: 400 !important; } .font-uppercase { text-transform: uppercase !important; } .font-bold { font-weight: 800 !important; } .font-italic { font-style: italic !important; } .font-no-italic { font-style: normal !important; } .font-underline { text-decoration: underline !important; } .font-primary-color { color: #EC5E79 !important; } .font-sub-color { color: #AEAEAE !important; } .font-white { color: white; } .font-white p, .font-white h1, .font-white h2, .font-white h3, .font-white h4, .font-white h5, .font-white h6, .font-white .h1, .font-white .h2, .font-white .h3, .font-white .h4, .font-white .h5, .font-white .h6 { color: white; } html { font-size: 100px; } @media screen and (min-width: 1921px) { html { font-size: 115px; } } @media screen and (min-width: 2561px) { html { font-size: 150px; } } @media screen and (max-width: 1600px) { html { font-size: 90px; } } @media screen and (max-width: 1500px) { html { font-size: 85px; } } @media screen and (max-width: 1440px) { html { font-size: 80px; } } @media screen and (max-width: 1366px) { html { font-size: 75px; } } @media screen and (max-width: 1280px) { html { font-size: 70px; } } @media screen and (max-width: 1100px) { html { font-size: 60px; } } @media screen and (max-width: 1024px) { html { font-size: 100px; } } @media screen and (max-width: 1000px) and (orientation: landscape) { html { font-size: 55px; } } @media screen and (max-width: 800px) { html { font-size: 70px; } } @media screen and (max-width: 750px) { html { font-size: 100px; } } @media screen and (max-width: 640px) { html { font-size: 85.33px; } } @media screen and (max-width: 591px) { html { font-size: 78.8px; } } @media screen and (max-width: 562px) { html { font-size: 74.933px; } } @media screen and (max-width: 540px) { html { font-size: 72px; } } @media screen and (max-width: 521px) { html { font-size: 69.4666px; } } @media screen and (max-width: 428px) { html { font-size: 57.066px; } } @media screen and (max-width: 414px) { html { font-size: 55.2px; } } @media screen and (max-width: 412px) { html { font-size: 54.933px; } } @media screen and (max-width: 375px) { html { font-size: 50px; } } @media screen and (max-width: 360px) { html { font-size: 48px; } } @media screen and (max-width: 320px) { html { font-size: 42.66px; } } /* 鍘绘帀娴忚鍣ㄦ縺娲绘牱寮 */ select:focus, textarea:focus, input:focus, button { outline: none; } /* 鎻愮ず鏂囧瓧鐨勫垵濮嬫牱寮 */ input::-webkit-input-placeholder, input::-moz-input-placeholder, textarea::-webkit-textarea-placeholder, textarea::-moz-textarea-placeholder { color: #999; transition: color .5s; } /* 鎻愮ず鏂囧瓧鐨勬縺娲绘牱寮 */ /* table */ table { border-collapse: collapse; border-spacing: 0; font: inherit; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; } input { border: none; background-color: transparent; outline: none; font-family: Arial, "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", sans-serif; } a { text-decoration: none; } *, *:before, *:after { max-height: 100000px; } /*鐢ㄦ潵瑙ｅ喅鍦ㄥ畨鍗撲笂鐨勭偣鍑诲嚭鐜扮妗嗛棶棰 */ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a { transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -ms-transition: all .3s ease-in; } /*瑙ｅ喅ios涓婂幓闄ゅ井淇＄偣鍑昏摑鑹茶竟妗 */ a:focus, input:focus, p:focus, div:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } div { -webkit-appearance: none; } .single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .double { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .morels { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .triangle { width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: transparent transparent #fff transparent; /*涓婂彸涓嬪乏 鍝噷闇€瑕佸氨鍦ㄥ摢閲岃缃鑹 */ border-style: dashed dashed solid dashed; /**涓婂彸涓嬪乏 鍝噷灏忓摢閲屽氨璁剧疆solid**/ } img[src=""], img:not([src]) { opacity: 0; display: none; } .fl_l { float: left; } .fl_r { float: right; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { height: auto; overflow-x: hidden; } @import url(https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900|Noto+Serif+SC:200,300,400,500,600,700,900); :root { --FE_UI-color-main: transparent; --FE_UI-color-auxiliary: transparent; --FE_UI-color-punctate: transparent; --FE_UI-color-background: transparent; --FE_UI-color-black: 0, 0, 0; --FE_UI-color-white: 255, 255, 255; --FE_UI-color-grey: 128, 128, 128; --FE_UI-color-red: 255, 0, 0; --FE_UI-color-blue: 0, 0, 255; --FE_UI-color-111: 17, 17, 17; --FE_UI-color-333: 51, 51, 51; --FE_UI-color-555: 85, 85, 85; --FE_UI-color-666: 102, 102, 102; --FE_UI-color-999: 153, 153, 153; --FE_UI-color-ddd: 221, 221, 221; --FE_UI-color-eee: 238, 238, 238; --FE_UI-color-dedede: 222, 222, 222; --FE_UI-color-f2f2f2: 242, 242, 242; --FE_UI-size-full: 100%; --FE_UI-size-fullVW: 100vw; --FE_UI-size-fullVH: 100vh; --FE_UI-size-50: 2.604vw; --FE_UI-size-48: 2.5vw; --FE_UI-size-46: 2.39583vw; --FE_UI-size-44: 2.29167vw; --FE_UI-size-42: 2.1875vw; --FE_UI-size-40: 2.0833vw; --FE_UI-size-38: 1.97916vw; --FE_UI-size-36: 1.875vw; --FE_UI-size-34: 1.7708vw; --FE_UI-size-32: 1.667vw; --FE_UI-size-30: 1.5625vw; --FE_UI-size-28: 1.4583vw; --FE_UI-size-26: 1.35167vw; --FE_UI-size-24: 1.25vw; --FE_UI-size-22: 1.14583vw; --FE_UI-size-20: 1.04167vw; --FE_UI-size-18: 0.9375vw; --FE_UI-size-16: 0.833vw; --FE_UI-size-14: 0.72916vw; --FE_UI-size-12: 0.625vw; --FE_UI-size-10: 0.5208vw; --FE_UI-size-5: 0.2604vw } @media(min-width: 1921px) { :root { --FE_UI-size-50: 50px; --FE_UI-size-48: 48px; --FE_UI-size-46: 46px; --FE_UI-size-44: 44px; --FE_UI-size-42: 42px; --FE_UI-size-40: 40px; --FE_UI-size-38: 38px; --FE_UI-size-36: 36px; --FE_UI-size-34: 34px; --FE_UI-size-32: 32px; --FE_UI-size-30: 30px; --FE_UI-size-28: 28px; --FE_UI-size-26: 26px; --FE_UI-size-24: 24px; --FE_UI-size-22: 22px; --FE_UI-size-20: 20px; --FE_UI-size-18: 18px; --FE_UI-size-16: 16px; --FE_UI-size-14: 14px; --FE_UI-size-12: 12px; --FE_UI-size-10: 10px; --FE_UI-size-5: 5px } } @media(max-width: 1180px) { :root { --FE_UI-size-50: 4.23728vw; --FE_UI-size-48: 4.0678vw; --FE_UI-size-46: 3.8983vw; --FE_UI-size-44: 3.7288vw; --FE_UI-size-42: 3.5593vw; --FE_UI-size-40: 3.3898vw; --FE_UI-size-38: 3.2203vw; --FE_UI-size-36: 3.05085vw; --FE_UI-size-34: 2.88136vw; --FE_UI-size-32: 2.71186vw; --FE_UI-size-30: 2.54237vw; --FE_UI-size-28: 2.37288vw; --FE_UI-size-26: 2.20339vw; --FE_UI-size-24: 2.0339vw; --FE_UI-size-22: 1.86441vw; --FE_UI-size-20: 1.69492vw; --FE_UI-size-18: 1.52542vw; --FE_UI-size-16: 1.35593vw; --FE_UI-size-14: 1.18644vw; --FE_UI-size-12: 1.01695vw; --FE_UI-size-10: 0.847457vw; --FE_UI-size-5: 0.4237288vw } } @media(max-width: 760px) { :root { --FE_UI-size-50: 5rem; --FE_UI-size-48: 4.8rem; --FE_UI-size-46: 4.6rem; --FE_UI-size-44: 4.4rem; --FE_UI-size-42: 4.2rem; --FE_UI-size-40: 4rem; --FE_UI-size-38: 3.8rem; --FE_UI-size-36: 3.6rem; --FE_UI-size-34: 3.4rem; --FE_UI-size-32: 3.2rem; --FE_UI-size-30: 3.0rem; --FE_UI-size-28: 2.8rem; --FE_UI-size-26: 2.6rem; --FE_UI-size-24: 2.4rem; --FE_UI-size-22: 2.2rem; --FE_UI-size-20: 2.0rem; --FE_UI-size-18: 1.8rem; --FE_UI-size-16: 1.6rem; --FE_UI-size-14: 1.4rem; --FE_UI-size-12: 1.2rem; --FE_UI-size-10: 1rem; --FE_UI-size-5: .5rem } } /*redefine global*/ :root { --bg-blue: rgba(9, 89, 158, 1); --bg-red: rgba(209, 60, 1, 1); --bg-white: #fff; --bg-black: #000; --text-color-blue: rgba(9, 89, 158, 1); --text-color-red: rgba(209, 60, 1, 1); --text-color-white: #ffffff; --text-color-black: #000; --text-color-grey: #666; --text-color-999: #999; --FE_UI-color-main: 0, 94, 174; --FE_UI-color-auxiliary: 0, 94, 174; --FE_UI-color-background: 0, 94, 174; --FE_UI-color-punctate: 0, 94, 174; } /* :root { --bg-blue: rgba(9, 89, 158, 1); --bg-red: rgba(209, 60, 1, 1); --bg-white: #fff; --bg-black: #000; --text-color-blue: rgba(9, 89, 158, 1); --text-color-red: rgba(209, 60, 1, 1); --text-color-white: #ffffff; --text-color-black: #000; --text-color-grey: #666; --text-color-999: #999; --FE_UI-color-main:0,151,222; --FE_UI-color-auxiliary:0,143,93; --FE_UI-color-background:250,250,250; --FE_UI-color-punctate:239,245,248; } */ @media screen and (orientation: landscape) { *::-webkit-scrollbar, *::-webkit-scrollbar { width: 4px; border-radius: 1.5px; } *::-webkit-scrollbar-button, *::-webkit-scrollbar-button { display: none; } *::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background-color: #eee; } *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background-color: var(--bg-red); border-radius: 4px; } *::-webkit-scrollbar:horizontal { height: 4px; } } @font-face { font-family: 'Kingsoft'; src: url('/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9mb250cy9LaW5nc29mdF9DbG91ZF9Gb250LnR0Zg'); } .Kingsoft { font-family: 'Kingsoft'; } @font-face { font-family: 'iconfont'; src: url('/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9mb250cy9pY29uZm9udC53b2ZmMg') format('woff2'), url('/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9mb250cy9pY29uZm9udC53b2Zm') format('woff'), url('/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9mb250cy9pY29uZm9udC50dGY') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* @media(min-width: 1200px) { .container { max-width: 1140px; } } */ @media(max-width: 1659px) { .container { padding-left: .33rem; padding-right: .33rem; } } /* @media(min-width: 1300px) and (max-width: 1549px) { .container { width: 95vw; } } */ /* @media(min-width: 1600px) { .container { width: 83.33333vw; max-width: 1600px; min-width: 1600px } } */ /* @media(max-width: 992px) { .container { width: 95vw } } @media(max-width: 760px) { .container { width: 100vw; padding: 0 15px; } } */ /* loading */ .loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 151, 222, 1) 0%, rgba(0, 143, 93, 1) 100%); ; z-index: 199; } .loader.active .circular { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } .loader.active .loader-logo img { opacity: 1; transition: 1s; } .loader.active .loader-line.left, .loader.active .loader-line.right { transform: scaleX(1); } .loader-circular { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 1210px; padding-bottom: 1210px; } .circular { position: absolute; left: 50%; top: 50%; width: 34.26%; height: 34.26%; border-radius: 50%; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); background: rgba(255, 255, 255, 0.05); transition: 1.8s; } .circular.circular2 { width: 54.64%; height: 54.64%; background: rgba(255, 255, 255, 0.02); } .circular.circular3 { width: 76.41%; height: 76.41%; background: rgba(255, 255, 255, 0.02); transition: 2.6s; } .circular.circular4 { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.02); transition: 3.4s; } .loader-text { position: absolute; left: 0; top: 50%; margin-top: -17px; width: 100%; z-index: 3; } .loader-line { position: absolute; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.3); } .loader-line:before { position: absolute; content: ""; width: 200px; height: 1px; background: #fff; } .loader-line.left { left: 0; right: 50%; margin-right: 230px; transform-origin: right center; transform: scaleX(0); transition: 4s; } .loader-line.left:before { right: 0; } .loader-line.right { right: 0; left: 50%; margin-left: 230px; transform-origin: left center; transform: scaleX(0); transition: 4s; } .loader-line.right:before { left: 0; } .loader-logo { position: relative; text-align: center; margin: auto; width: 290px; } .loader-logo img { display: block; width: 100%; height: auto; opacity: 0; } .loader-logo p { position: absolute; left: 0; top: 100%; width: 100%; margin-top: 24px; color: #fff; text-align: center; font-size: 30px; font-family: "Century Gothic"; line-height: 1; } .loader-logo p b { font-weight: normal; } .navs__pop { position: fixed; left: 0; top: 0; width: var(--FE_UI-size-full); height: var(--FE_UI-size-full); background-image: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvbmF2LWJhY2tnLmpwZw); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 5; overflow: hidden; height: 0; transition: 1.5s cubic-bezier(0.77, 0, 0.175, 1); } .navs__pop.show { height: 100%; } .navs__menu-wrap { position: relative; height: 100vh; background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), .8) 0%, rgba(var(--FE_UI-color-auxiliary), .8) 100%); } .Circles { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none !important; z-index: 0; } .Circles-circle { display: block; position: absolute; will-change: transform; transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(1) { width: 21.87vw; height: 21.87vw; top: -7.26vw; left: -7.26vw; } .Circles-circle:nth-child(1) .Circles-dot { opacity: 0.05; } .Circles-circle:nth-child(2) { width: 35vw; height: 35vw; top: -11.7vw; left: -11.7vw; transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(2) .Circles-dot { opacity: 0.04; } .Circles-circle:nth-child(3) { width: 48vw; height: 48vw; top: -16vw; left: -16vw; transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(3) .Circles-dot { opacity: 0.03; } .Circles-circle:nth-child(4) { width: 63.4vw; height: 63.4vw; top: -21.1vw; left: -21.1vw; transition: 3.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(4) .Circles-dot { opacity: 0.02; } .Circles-circle:nth-child(5) { width: 92vw; height: 92vw; top: -30.7vw; left: -30.7vw; transition: 3.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(5) .Circles-dot { opacity: 0.02; } .Circles-dot { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .Circles-dot:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f2f2f2; border-radius: 50%; transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s; will-change: transform; } .navs__menus { position: absolute; left: 0; top: 50%; margin-top: -263px; width: 100%; } .navs__logos { text-align: center; } .navs__logos img { display: block; width: 233px; margin: auto; } .navs__li { margin-top: 90px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .navs__item { display: block; width: 194px; } .navs__item:last-child { width: auto; } .navs__item dt { display: block; margin-bottom: var(--FE_UI-size-20); font-weight: 500; } .navs__item dt a { display: inline-block; color: #ffffff; font-size: var(--FE_UI-size-24); line-height: 1.6; } .navs__item dd { display: block; } .navs__item dd p { margin-bottom: 14px; } .navs__item dd a { display: block; color: rgba(var(--FE_UI-color-white), 1); font-size: var(--FE_UI-size-16); line-height: 3; } .navs__item dd:hover a { color: rgba(var(--FE_UI-color-black), 1); font-weight: bold; } .navs_close { margin-top: 11.1vh; text-align: center; } .navs_close_btn { display: flex; justify-content: center; align-items: center; margin: auto; cursor: pointer; max-width: 120px; border: solid 1px rgba(var(--FE_UI-color-white), 1); border-radius: calc(var(--FE_UI-size-5) * 5); height: calc(var(--FE_UI-size-5) * 10); } .navs_close_btn i { font-size: var(--FE_UI-size-14); color: rgba(var(--FE_UI-color-white), 1); } .navs_close_title { font-style: normal; margin-left: var(--FE_UI-size-14); font-size: calc(var(--FE_UI-size-5) * 3); color: rgba(var(--FE_UI-color-white), 1); } /*header*/ .header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; height: 79px; background-color: rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: 0.65s; } .header:hover, .header.scroll { background: #fff; } .header__logo { float: left; } .menubtn { float: left; padding-top: 39px; width: 80px; height: 80px; border-right: 1px solid rgba(102, 102, 102, 0.5); box-sizing: border-box; position: relative; z-index: 20; transition: 0.4s; cursor: pointer; } .menubtn span { margin: auto; display: block; width: 26px; height: 2px; background: rgba(0, 0, 0, 1); position: relative; vertical-align: middle; transition: 0.45s; } .menubtn span:after, .menubtn span:before { content: ""; position: absolute; display: inline-block; width: 50%; height: 2px; left: 0; background-color: rgba(0, 0, 0, 1); -webkit-transition-duration: .3s, .3s; -moz-transition-duration: .3s, .3s; -ms-transition-duration: .3s, .3s; -o-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0s; -moz-transition-delay: .3s, 0s; -ms-transition-delay: .3s, 0s; -o-transition-delay: .3s, 0s; transition-delay: .3s, 0s; transition: background 0.3s 0s; } .menubtn span:before { top: -6px; -webkit-transition-property: top, transform; -moz-transition-property: top, transform; -ms-transition-property: top, transform; -o-transition-property: top, transform; transition-property: top, transform; } .menubtn span:after { left: auto; right: 0; bottom: -6px; -webkit-transition-property: bottom, transform; -moz-transition-property: bottom, transform; -ms-transition-property: bottom, transform; -o-transition-property: bottom, transform; transition-property: bottom, transform; } .menubtn.active { background-color: rgba(var(--FE_UI-color-white), .6); } .menubtn.active span { transform: rotate(90deg); } .header:hover .menubtn span, .header:hover .menubtn span::before, .header:hover .menubtn span::after { /* background: #fff; */ } .logo { float: left; position: relative; margin-left: 25px; margin-top: 22px; width: 232px; } .logo img { display: block; width: auto; max-width: 100%; height: auto; transition: 0.45s; } .logo img.hide { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } .header:hover .logo img.hide, .header.scroll .logo img.hide { opacity: 1; visibility: visible } .header__rights { float: right; } .navs { float: left; } .navs>li { float: left; padding: 0 var(--FE_UI-size-28); } .navs>li:hover a:before, .navs>li.active a:before { width: 32px; margin-left: -16px; } .navs>li:first-child { padding-left: 0; } .navs>li>a { display: block; position: relative; color: rgba(0, 0, 0, 1); line-height: 79px; font-size: 16px; } .navs>li>a:before { position: absolute; left: 50%; bottom: 0; content: ""; height: 3px; background: #fff; transition: 0.4s; width: 0; margin-left: 0; } .header:hover .navs>li>a { color: #353535 } .header:hover .navs>li>a:before, .header .navs>li.active>a:before { background: linear-gradient(90deg, rgba(0, 151, 222, 1) 0%, rgba(0, 143, 93, 1) 100%); } .header__menus { position: absolute; left: 0; top: 100%; background: linear-gradient(90deg, rgba(0, 151, 222, 1) 0%, rgba(0, 143, 93, 1) 100%); ; width: 100%; padding: 20px 0 46px; border-top: 1px solid rgba(255, 255, 255, 0.2); z-index: 20; text-align: right; display: none; } .header__menu--wrap { padding-right: 169px; display: inline-flex; display: inline-flexbox; text-align: center; font-size: 0; } .header__menu__item { display: inline-block; width: 128px; vertical-align: top; } .header__menu__item li { margin-bottom: 10px; } .header__menu__item li:last-child { margin-bottom: 0; } .header__menu__item li a { display: inline-block; color: #ffffff; font-size: 14px; opacity: 0.5; } .header__menu__item li a:hover { opacity: 1; } .header__href { margin-left: 12px; display: flex; display: -webkit-flex; float: left; } .header__href .enterclose>a { display: block; box-sizing: border-box; padding: 20px 0; width: 78px; height: 79px; line-height: 70px; color: rgba(0, 0, 0, 1); line-height: 1.4; font-size: var(--FE_UI-size-20); font-weight: bolder; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; border-left: 1px solid rgba(102, 102, 102, 0.5); } .header:hover .header__href .enterclose>a { background: linear-gradient(90deg, rgba(0, 151, 222, 1) 0%, rgba(0, 143, 93, 1) 100%); background-clip: border-box; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } .header__href .enterclose>a i { font-size: 24px } .header__href .search .serachbtn:last-child, .header__href .enterclose>a:last-child { font-size: 20px; } .enterclose { position: relative; cursor: pointer } /*Header button*/ .header-button { margin-top: 0px; position: relative; height: 50px; width: 30px; cursor: pointer; display: none; } .header-button:after { bottom: 13px; } .header-button:before { top: 13px; } /* .header-button span { display: block; height: 2px; width: 100%; background: #000; position: absolute; top: 50%; left: 0; border-radius: 2px; margin-top: -1px; transition: ease 0.5s; -webkit-transition: ease 0.5s; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; } */ /* .header-button.active:after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; left: 5px; bottom: 13px; } */ .header-button.active:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; top: 13px; left: 5px; } /* .header-button.active span { opacity: 0 } */ /*dropdown nav*/ .nav-wrapper { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; list-style: none; -ms-flex-align: center; align-items: center; padding: 0; margin: 0 auto; position: relative } .nav-wrapper .nav-item { padding: 0 .36rem; -ms-flex-negative: 0; flex-shrink: 0; position: relative; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; z-index: 10 } .nav-wrapper .nav-item h2.nav-item-link { font-weight: 400; line-height: 115px; cursor: pointer; } .nav-wrapper .nav-item h2.nav-item-link a { font-weight: 400; display: block; position: relative; font-size: .16rem; color: rgba(102, 102, 102, 1); line-height: inherit; } .nav-item .submenu { position: absolute; top: 100px; left: 0; width: 100%; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; -webkit-transition: ease .5s; transition: ease .5s; opacity: 0; visibility: hidden; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 16px rgba(0, 0, 0, .1); z-index: 10; } .nav-item .submenu a { font-size: 14px; line-height: 36px; text-align: center; position: relative; display: block; overflow: hidden; height: 36px; padding: 0 10px; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; white-space: nowrap; text-overflow: ellipsis; color: #333; } .nav-item .submenu a:last-child { border-bottom: 0 } .nav-item .submenu a:hover { color: #fff; background: var(--text-color-red) } .nav-item .submenu a:hover:after { right: 15px; visibility: visible } .nav-wrapper .nav-item h2.nav-item-link.active a { font-weight: 600; } .nav-wrapper>.nav-item+.nav-item { margin-left: 10px; } .nav-wrapper .nav-item:hover, .nav-wrapper .nav-item.active {} .nav-wrapper .nav-item .nav-item-link:hover a:before, .nav-wrapper .nav-item .nav-item-link.active a:before { opacity: 1; } .header-sticky .nav-wrapper .nav-item .nav-item-link:hover a:before, .header-sticky .nav-wrapper .nav-item .nav-item-link.active a:before { opacity: 1; } .header-sticky .nav-wrapper .nav-item h2.nav-item-link { line-height: 90px; } .nav-wrapper .nav-item:hover .submenu { top: 100px; opacity: 1; visibility: visible; z-index: 999; } .nav-wrapper .nav-item:hover .nav-item-link a, .header-sticky .nav-wrapper .nav-item:hover .nav-item-link a, .nav-wrapper .nav-item.active .nav-item-link a, .header-sticky .nav-wrapper .nav-item.active .nav-item-link a { color: rgba(51, 51, 51, 1); } .header-sticky .nav-wrapper .nav-item h2.nav-item-link a { color: #333; } .header-sticky .nav-wrapper .nav-item h2.nav-item-link.active a { color: var(--text-color-red); } #header.header-sticky { background: var(--bg-white); box-shadow: 0 0 5px rgba(0, 0, 0, .1); /* transform: translate(0, -30%); */ } #header.header-sticky .header-nav-item a { color: var(--text-color-333) } #header.header-sticky .header-search-icon { color: var(--text-color-333) } #header.header-sticky .header-nav-item:hover a, #header.header-sticky .header-nav-item.active a { color: var(--text-color-red) } /*mobile nav*/ .m-nav { position: fixed; top: 0; /*box-shadow: 0 15px 27px 0 rgba(167, 165, 165, .38);*/ width: 100%; height: 100%; background: #fff; transition: all ease .5s; -webkit-transition: all ease .5s; z-index: 0; opacity: 0; visibility: visible; margin-top: 0; overflow-y: auto; /* transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;*/ top: 0; transform: translateX(100%) } .m-nav a { outline: none } .m-nav.active { opacity: 1; transform: translateX(0); z-index: 1000 } .m-nav .top { height: 60px; padding: 20px; box-sizing: border-box } .m-nav .top .closed { width: 30px; height: 30px; vertical-align: middle; float: right; cursor: pointer } .m-nav .logo { width: 100%; margin: 0 auto } .m-nav .logo img { width: 50%; display: block; margin: 0 auto 30px } .m-nav .ul { margin-top: 30px } .m-nav .ul li { padding: 0 20px; border-bottom: 1px solid #f5f5f5; transform: translateY(0); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; opacity: 0 } .m-nav.active .ul li { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .m-nav .ul li:nth-child(1) { -webkit-transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(2) { -webkit-transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(3) { -webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(4) { -webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(5) { -webkit-transition: all 1s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(6) { -webkit-transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(7) { -webkit-transition: all 1.4s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li:nth-child(8) { -webkit-transition: all 1.6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms } .m-nav .ul li a { display: block; text-decoration: none; color: #333; font-size: 16px; height: 50px; line-height: 50px; width: 100%; position: relative; } .m-nav .ul li a.active { font-weight: 800; color: #1b2c43 } .m-nav .ul li.dropdown a.dropdown-title::before, .m-nav .ul li.dropdown a.dropdown-title::after { content: ''; position: absolute; width: 10px; height: 1px; background-color: rgba(51, 51, 51, 0.5); right: 10px; top: 50%; -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; } .m-nav .ul li.dropdown a.dropdown-title::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .m-nav .ul li.dropdown a.dropdown-title.active::after { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .m-nav .ul li a i { font-size: 12px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); } .m-nav .ul li .dropdown_menu { display: none } .m-nav .ul li.dropdown.active .dropdown_menu { display: block } .m-nav .ul li .dropdown_menu a { display: block; font-size: 14px; height: 40px; line-height: 40px; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #f5f5f5 } .m-nav .ul li .dropdown_menu a:last-child { border: none } .m-nav-tel { text-align: center; margin-top: 18px; margin-bottom: 20px; font-size: 18px; color: #666; } .m-nav-tel a { font-weight: 800; } .m-nav-link { text-align: center; margin-top: 18px; } .m-nav-link a { display: inline-block; padding: 5px 25px; color: #fff; cursor: default; background: #00598e; font-size: 14px; line-height: 2; } /*main*/ #main { position: relative; z-index: 2 } /* banner */ #banner { position: relative; height: var(--FE_UI-size-fullVH); overflow: hidden; } .swiper-banner { height: 100%; } .swiper-banner ul li img { display: block; height: 100%; width: 100%; object-fit: cover; } .banner-pagination { position: absolute; left: 0; bottom: 0; width: var(--FE_UI-size-full); z-index: 22; transition: ease-in-out 2s; transform-origin: bottom left 0; } .banner-container { background-color: rgba(var(--FE_UI-color-white), 1); display: flex; justify-content: space-between; align-items: center; height: calc(var(--FE_UI-size-50) * 2); padding: 0 calc(var(--FE_UI-size-5) * 17); } .banner-pagination-left { display: flex; justify-content: flex-start; align-items: center; } .banner-tab-btn { display: flex; justify-content: flex-start; align-items: center; } .banner-prev, .banner-next { position: relative; top: auto; left: auto; right: auto; margin-top: auto; width: var(--FE_UI-size-30); height: var(--FE_UI-size-30); z-index: 6; } .banner-prev { margin-right: calc(var(--FE_UI-size-30) * 2); } .banner-prev::before { content: ''; background-color: rgba(var(--FE_UI-color-999), 1); height: var(--FE_UI-size-30); position: absolute; width: 1px; top: 50%; right: calc(var(--FE_UI-size-30) * -1); margin-top: calc((var(--FE_UI-size-30) / 2 * -1)); } .banner-prev::after, .banner-next::after { color: rgba(var(--FE_UI-color-333), 1); font-size: var(--FE_UI-size-18); font-weight: bold; } .banner-prev:hover::after, .banner-next:hover::after { color: rgba(var(--FE_UI-color-white), 1); } .banner-prev:hover, .banner-next:hover { background: linear-gradient(180deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-main), 1) 100%); } .banner-pagination-number { font-size: var(--FE_UI-size-14); color: rgba(--FE_UI-color-333); position: initial; left: auto; bottom: auto; margin-left: var(--FE_UI-size-16); } .banner-pagination-conter { position: absolute; left: 50%; top: 0; z-index: 2; } .banner-pagination-conter::before { background-color: rgba(var(--FE_UI-color-666), 1); content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--FE_UI-size-50) + var(--FE_UI-size-5)); transform: translateX(-50%); } .banner-pagination-mouse { line-height: 1; animation: mouseSlidBottom 3s infinite; } .banner-pagination-mouse i { font-size: var(--FE_UI-size-30); } .banner-pagination-right { font-size: var(--FE_UI-size-14); display: flex; justify-content: flex-start; align-items: center; } .banner-pagination-right i { font-size: var(--FE_UI-size-26); margin-right: var(--FE_UI-size-5); } @keyframes mouseSlidBottom { 0% { transform: translateY(0); } 50% { transform: translateY(var(--FE_UI-size-50)); } 100% { transform: translateY(0); } } /* public home*/ .public-title-en { font-size: calc(var(--FE_UI-size-14) * 10); font-weight: 900; color: rgba(var(--FE_UI-color-punctate), 1); line-height: 1.4; text-transform: uppercase; } .public-title-cn { font-size: var(--FE_UI-size-40); color: rgba(var(--FE_UI-color-333), 1); font-weight: bold; line-height: 1; margin-top: calc(var(--FE_UI-size-40) * -1.6); } .public-more { display: flex; justify-content: center; align-items: center; padding: 0 var(--FE_UI-size-40); border-radius: 0 10px; background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); line-height: calc(var(--FE_UI-size-40) + var(--FE_UI-size-22)); color: rgba(var(--FE_UI-color-white), 1); font-size: var(--FE_UI-size-18); position: relative; overflow: hidden } .public-more-title { position: relative; z-index: 2; } .public-more i { transform: rotateY(180deg); font-size: var(--FE_UI-size-26); margin-left: 5px; position: relative; z-index: 2; } .public-more::after { content: ''; background: linear-gradient(90deg, rgba(var(--FE_UI-color-auxiliary), 1) 0%, rgba(var(--FE_UI-color-main), 1) 100%); position: absolute; width: 0; height: var(--FE_UI-size-full); left: 0; top: 0; } .public-more:hover::after { width: 100%; transition: ease-in-out .2s; -webkit-transition: ease-in-out .2s; } /* home about */ .home-about { background: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvYmcxLmpwZw) no-repeat top center; padding-bottom: var(--FE_UI-size-36) } .home-about-title { display: flex; justify-content: space-between; align-items: center; } .home-about-subtitle { margin-top: var(--FE_UI-size-40); font-size: var(--FE_UI-size-24); color: rgba(var(--FE_UI-color-333), 1); } .home-about-text { margin-top: calc(var(--FE_UI-size-5) * 3); font-size: var(--FE_UI-size-18); line-height: 2.78; text-indent: calc(var(--FE_UI-size-18) * 2); } /* home advantage */ .home-advantage { background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); position: relative; padding: calc(var(--FE_UI-size-50) * 2) 0; } .home-advantage::after { content: ''; background: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvYmcyLnBuZw) no-repeat center; width: var(--FE_UI-size-full); height: var(--FE_UI-size-full); position: absolute; left: 0; top: 0; } .home-advanatage-list { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; } .home-advantage-block { display: flex; justify-content: center; align-items: center; flex-direction: column; color: rgba(var(--FE_UI-color-white), 1) } .home-advantage-block i { display: block; font-size: var(--FE_UI-size-50); margin-bottom: 10px; position: relative; } .home-advantage-block i::after { background: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvYmctaWNvbi0xLnBuZw) no-repeat center; content: ''; background-size: contain; width: calc(var(--FE_UI-size-40) + var(--FE_UI-size-50)); height: calc(var(--FE_UI-size-34) + var(--FE_UI-size-20)); position: absolute; left: 5px; top: 15px; } .home-advantage-number { display: flex; justify-content: center; align-items: flex-end; line-height: 1; font-size: var(--FE_UI-size-36); font-style: normal; font-weight: 900; } .home-advantage-number span { font-size: var(--FE_UI-size-36); font-weight: 900; } .home-advantage-number em { font-style: normal; font-size: var(--FE_UI-size-20); margin-left: 10px; } .home-advantage-text { margin-top: var(--FE_UI-size-20); font-size: var(--FE_UI-size-16); } /* home service */ .home-service { position: relative; } .swiper-service-bg { overflow: hidden; position: relative; } .swiper-service-bg .swiper-slide { width: var(--FE_UI-size-full); overflow: hidden; } .home-service-bg { background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .home-service-bg img { opacity: 0; } .home-service-content { position: absolute; left: 0; top: 0; background: rgba(var(--FE_UI-color-black), .3); width: var(--FE_UI-size-full); height: var(--FE_UI-size-full); padding-top: calc(var(--FE_UI-size-10) * 11); z-index: 10; } .home-service-title { font-size: var(--FE_UI-size-48); color: var(--text-color-white); font-weight: 900; line-height: 1; margin-bottom: var(--FE_UI-size-40); } .home-service-summary { max-width: calc(var(--FE_UI-size-10) * 70); font-size: var(--FE_UI-size-16); line-height: 2; color: rgba(var(--FE_UI-color-white), 1); } .home-service-more { margin-top: var(--FE_UI-size-30); display: flex; justify-content: flex-start; align-items: center; font-size: var(--FE_UI-size-16); color: rgba(var(--FE_UI-color-white), 1); } .home-service-more i { margin-right: var(--FE_UI-size-26); font-size: var(--FE_UI-size-36); } .swiper-service-bg .swiper-slide.swiper-slide-active .home-service-title { animation: fadeInUp 3s ease-in-out; } .swiper-service-bg .swiper-slide.swiper-slide-active .home-service-summary { animation: fadeInUp 4s ease-in-out; } .swiper-service-bg .swiper-slide.swiper-slide-active .home-service-more { animation: fadeInUp 4.5s ease-in-out; } .servicer-pagination { bottom: auto; top: 0; color: rgba(var(--FE_UI-color-white), 1); padding-top: calc(var(--FE_UI-size-5) * 14); padding-right: calc(var(--FE_UI-size-5) * 20); text-align: right; font-size: var(--FE_UI-size-30); } .servicer-pagination .container { display: flex; justify-content: flex-end; align-items: flex-start; line-height: 1; } .servicer-pagination b { font-size: calc(var(--FE_UI-size-24) * 3); line-height: 1; } .servicer-pagination span { padding-top: var(--FE_UI-size-14); } .home-servive-menu { position: absolute; left: 0; bottom: calc(var(--FE_UI-size-10) * 6); width: var(--FE_UI-size-full); z-index: 10; } .home-servive-menu .swiper-service-menu { padding-top: calc(var(--FE_UI-size-36) / 2) } .swiper-service-menu .swiper-slide { text-align: center; color: rgba(var(--FE_UI-color-white), 1); background-color: rgba(var(--FE_UI-color-white), .3); cursor: pointer; } .home-service-no { display: block; font-size: var(--FE_UI-size-36); font-weight: 400; width: var(--FE_UI-size-full); line-height: 1; position: absolute; left: 0; top: calc(var(--FE_UI-size-36) / 2 * -1); z-index: 1; } .home-service-menu-title { margin-top: var(--FE_UI-size-36); font-size: var(--FE_UI-size-20); font-weight: 500; } .home-service-menu-subtitle { font-size: var(--FE_UI-size-14); color: rgba(var(--FE_UI-color-white), .5); margin-top: calc(var(--FE_UI-size-10)); margin-bottom: var(--FE_UI-size-30); } .swiper-service-menu .swiper-slide.swiper-slide-thumb-active { background: rgba(var(--FE_UI-color-main), 1) } /* home case */ .swiper-case { margin-top: calc(var(--FE_UI-size-50) + var(--FE_UI-size-10)); margin-bottom: var(--FE_UI-size-30); height: 710px; } .swiper-case .swiper-slide { height: calc((var(--FE_UI-size-full) - 50px) / 2); } .home-case-block { display: block; height: var(--FE_UI-size-full); } .home-case-img { display: block; height: calc(var(--FE_UI-size-full) - 70px); overflow: hidden; position: relative; } .home-case-img img { transition: ease-in-out 1s; height: 100%; width: 100%; object-fit: cover; display: block; } .home-case-content { background-color: rgba(var(--FE_UI-color-black), .3); color: rgba(var(--FE_UI-color-white), 1); position: absolute; left: calc(var(--FE_UI-size-full) * -1); top: 50%; width: var(--FE_UI-size-full); height: var(--FE_UI-size-full); transform: translateX(-50%) translateY(-50%); display: flex; justify-content: center; align-items: center; flex-direction: column; padding: var(--FE_UI-size-30); transition: ease-in-out 1s; visibility: hidden; opacity: 0; } .home-case-content .home-case-title { font-size: var(--FE_UI-size-18); margin-bottom: var(--FE_UI-size-20); } .home-case-summary { text-align: left; font-size: var(--FE_UI-size-14); line-height: 2.5; } .home-cae-more { margin-top: var(--FE_UI-size-20); } .home-case-more-link { display: flex; justify-content: flex-start; align-items: center; font-size: var(--FE_UI-size-14); padding: 0 calc(var(--FE_UI-size-5) * 3); border: solid 1px rgba(var(--FE_UI-color-white), 1); line-height: var(--FE_UI-size-48); } .home-case-more-link i { margin-right: var(--FE_UI-size-5); font-size: var(--FE_UI-size-24); line-height: 1; } .home-case-more-link:hover { background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); } .home-case-subtitle { padding-top: 10px; line-height: 60px; text-align: center; font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-333), 1); position: relative; } /* .home-case-subtitle::after{ content: ''; background: linear-gradient(90deg,rgba(var(--FE_UI-color-main),1) 0%,rgba(var(--FE_UI-color-auxiliary),1) 100%); position: absolute; left: 0; top:0; height: var(--FE_UI-size-full); width: 0; } */ .home-case-subtitle .home-case-title { position: relative; z-index: 2; } .home-case-block:hover .home-case-subtitle { color: rgba(var(--FE_UI-color-main), 1); transition: ease-in-out 1.2s; } .home-case-block:hover .home-case-subtitle::after { width: var(--FE_UI-size-full); transition: ease-in-out 1s; } .home-case-block:hover .home-case-content { left: 50%; visibility: visible; opacity: 1; } .home-case-block:hover .home-case-img img { transform: scale(1.1); } /* home news */ .home-news { background: #FAFAFA; padding-bottom: calc(var(--FE_UI-size-40) * 2); } .swiper-news { margin-top: calc(var(--FE_UI-size-40) * 2); margin-bottom: calc(var(--FE_UI-size-40) * 2); } .swiper-news ul li::after { background: #E6EAED; content: ''; position: absolute; right: -40px; top: 0; width: 1px; height: var(--FE_UI-size-full); } .home-news-time { font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-666), 1); margin: calc(var(--FE_UI-size-5) * 5) auto; } .home-news-time span { margin-right: var(--FE_UI-size-12); font-size: var(--FE_UI-size-30); color: rgba(var(--FE_UI-color-333), 1); } .home-news-img { max-height: calc(var(--FE_UI-size-40) * 7); overflow: hidden; } .home-news-img img { transition: ease-in-out .3s; } .home-news-content { margin-top: var(--FE_UI-size-30); } .home-news-title { display: block; font-size: var(--FE_UI-size-20); color: rgba(var(--FE_UI-color-333), 1); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: var(--FE_UI-size-10); } .home-news-summary { color: rgba(var(--FE_UI-color-666), 1); font-size: var(--FE_UI-size-16); line-height: 2; } .home-news-more { display: flex; justify-content: center; align-items: center; } .home-news-blcok:hover .home-news-title { background-image: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .home-news-blcok:hover .home-news-img img { transform: scale(1.1); } @media(max-width:1180px) { .logo { width: calc(var(--FE_UI-size-30) * 6); } .navs>li { padding: 0 var(--FE_UI-size-10); } .home-service-content { padding-top: calc(var(--FE_UI-size-10) * 5); } .home-servive-menu { bottom: calc(var(--FE_UI-size-10) * 3); } .home-service-title { font-size: var(--FE_UI-size-30); margin-bottom: var(--FE_UI-size-20); } .home-service-more { line-height: 1; margin-top: var(--FE_UI-size-20); } .home-service-menu-subtitle { margin-top: 0; margin-bottom: var(--FE_UI-size-20); } } @media(max-width:1024px) {} @media(max-width:992px) { .header__logo { width: calc(var(--FE_UI-size-full) - 90px); } .logo { width: calc(var(--FE_UI-size-full) - 80px); margin-left: 0; text-align: center; display: flex; justify-content: center; align-items: center; } .logo img.hide { left: 50%; transform: translateX(-50%); display: none; } .navs__menus { top: 0; margin-top: 0; padding: 80px 0; } .navs { display: none; } .navs__li { margin-top: 0; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: calc(var(--FE_UI-size-50) + var(--FE_UI-size-40)) var(--FE_UI-size-30); } .navs__item { flex: none; width: 50%; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: wrap; margin-bottom: var(--FE_UI-size-40); } .navs__item dt { margin-bottom: 0; width: 100%; } .navs__item dd { margin-right: var(--FE_UI-size-20); } .swiper-case { height: 500px; } .home-case-img { height: calc(var(--FE_UI-size-full) - 50px); } .home-case-subtitle .home-case-title { font-size: var(--FE_UI-size-18); } } @media(max-width:760px) { .header { height: 60px; } .header__logo { width: calc(100% - 62px); } .menubtn { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; padding-top: 0; } .logo { display: flex; justify-content: center; align-items: center; padding-left: 30px; padding-right: 20px; margin-top: 0; height: 60px; } .header__href { margin-left: 0; } .header__href .enterclose>a { width: 60px; display: flex; justify-content: center; align-items: center; height: 60px; padding: 0; } .navs__menus { height: calc(var(--FE_UI-size-fullVH) - 1.5rem); margin-top: 1.2rem; margin-bottom: .3rem; padding: 0; overflow-y: auto; } .navs__li { padding: 0 20px 0; } .navs__item { width: var(--FE_UI-size-full); margin-bottom: .4rem; } .navs__item dt a { font-size: .32rem; } .navs__item dd { margin-right: .2rem; } .navs__item dd a { font-size: .25rem; line-height: 2; } .navs__pop.show .navs_close { position: fixed; right: .4rem; top: .4rem; margin-top: 0; } .navs_close_btn { /* width: 2.2rem; */ height: auto; padding: .15rem .3rem; line-height: 1; } .navs_close_btn i { font-size: .3rem; } .navs_close_title { font-size: .3rem; margin-left: .2rem; } #banner { /* height: calc(var(--FE_UI-size-fullVH) / 2); */ } .banner-pagination .container { padding: 0; } .banner-container { height: 1rem; padding: 0 .4rem; } .banner-prev, .banner-next { width: .6rem; height: .6rem; display: none } .banner-prev::after, .banner-next::after { font-size: .36rem; } .banner-prev { margin-right: .6rem; } .banner-prev::before { right: -.3rem; height: .6rem; margin-top: -.3rem; } .banner-pagination-number { font-size: .3rem; margin-left: 0; } .banner-pagination-right { font-size: .25rem; } .banner-pagination-right i { font-size: .4rem; margin-right: .2rem; } .banner-pagination-conter::before { height: .6rem; } .banner-pagination-mouse i { font-size: .3rem; } @keyframes mouseSlidBottom { 0% { transform: translateY(0); } 50% { transform: translateY(.6rem); } 100% { transform: translateY(0); } } .home-about-title { flex-direction: column; } .public-title-en { font-size: .7rem; text-align: center; } .public-title-cn { font-size: .4rem; margin-top: -.3rem; text-align: center; } .public-more { padding: 0 .3rem; line-height: .8rem; font-size: .3rem; } .public-more i { font-size: .4rem; } .home-about { padding-top: .6rem; padding-bottom: 1rem; } .home-about-title-right { display: none; } .home-about-subtitle { margin-top: .6rem; font-size: .3rem; } .home-about-text { font-size: .28rem; line-height: 2; margin-top: .5rem; text-indent: .6rem } .home-about-more { display: flex; justify-content: center; align-items: center; margin-top: .6rem; } .home-advantage { padding: 1rem 0; } .home-advantage .container { padding: 0; } .home-advanatage-list { flex-direction: row; flex-wrap: wrap; align-items: flex-start } .home-advantage-item { width: 50%; border-bottom: solid 1px rgba(var(--FE_UI-color-white), .3); border-left: solid 1px rgba(var(--FE_UI-color-white), .3); padding: .6rem 0 } .home-advantage-item:nth-child(odd) { border-left: none; } .home-advantage-item:last-child { width: 100%; border-bottom: none; } .home-advantage-block i { font-size: .8rem; line-height: 1; } .home-advantage-block i::after { width: 1rem; height: .6rem; } .home-advantage-number { font-size: .6rem; } .home-advantage-number span { font-size: .6rem; } .home-advantage-number em { font-size: .3rem; } .home-advantage-text { margin-top: .2rem; font-size: .26rem; } .home-service { height: calc(var(--FE_UI-size-fullVH) * .8); } .swiper-service-bg { height: var(--FE_UI-size-full); } .swiper-service-bg ul, .swiper-service-bg ul li { height: var(--FE_UI-size-full) !important; } .home-service-bg { height: var(--FE_UI-size-full); background-size: cover; } .home-service-content { padding-top: 1rem; } .home-service-title { font-size: .6rem; margin-bottom: .5rem; } .home-service-summary { font-size: .26rem; } .home-service-more { margin-top: .5rem; font-size: .3rem } .home-service-more i { font-size: .6rem; margin-right: .4rem; } .servicer-pagination { padding-top: .6rem; padding-right: 0; font-size: .3rem; } .servicer-pagination b { font-size: .6rem; } .servicer-pagination span { font-size: .26rem; padding-top: .2rem; } .home-servive-menu { bottom: .6rem; } .home-servive-menu .swiper-service-menu { padding-top: .37rem; } .home-service-no { font-size: .36rem; top: -.18rem; } .home-service-menu-title { font-size: .26rem; margin-top: .3rem; } .home-service-menu-subtitle { font-size: .2rem; padding: 0 .2rem; min-height: .8rem; margin-bottom: .1rem; } .home-case { padding: .8rem 0; } .home-case .container { padding: 0; } .swiper-case { margin-top: .6rem; height: 7.5rem; margin-bottom: 0; } .home-case-content { display: none; } .home-case-subtitle .home-case-title { font-size: .26rem; } .home-news { padding: .8rem 0; } .home-news .container { padding: 0 } .swiper-news { margin-top: .6rem; margin-bottom: .6rem } .swiper-news ul li::after { right: -10px } .home-news-time { margin: .3rem 0; font-size: .2rem; } .home-news-time span { font-size: .26rem; margin-right: .2rem; } .home-news-content { margin-top: .3rem; } .home-news-title { font-size: .28rem; margin-bottom: .25rem; } .home-news-summary { font-size: .2rem; } } /* page public */ #banner { height: auto; position: relative; } /* #banner.page-banner{ height: auto; } */ .page-banner-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .page-banner-img:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #005EAE; opacity: .2; content: ''; } .page-banner-title { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; font-size: var(--FE_UI-size-40); color: rgba(var(--FE_UI-color-white), 1); /* background-image: linear-gradient(180deg, rgba(var(--FE_UI-color-main), 1) 0, rgba(var(--FE_UI-color-auxiliary), 1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ padding-top: 4vw; } .page-channel { display: flex; align-items: center; height: 100%; position: absolute; left: 0; bottom: 35px; z-index: 2; width: var(--FE_UI-size-full); } .page-channel .container { overflow: hidden; } .page-channel-list { background-color: rgba(var(--FE_UI-color-white), 1); height: 60px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 5px rgba(var(--text-color-black), .05); border-radius: var(--FE_UI-size-14) var(--FE_UI-size-14) 0 0; overflow-y: hidden; border-radius: var(--FE_UI-size-14); } .page-channel-item { display: flex; justify-content: center; align-items: center; height: var(--FE_UI-size-full); flex: 1; text-align: center; font-size: var(--FE_UI-size-18); border-radius: var(--FE_UI-size-14); } .page-channel-item a { color: rgba(var(--FE_UI-color-black), 1); display: flex; justify-content: center; align-items: center; width: var(--FE_UI-size-full); height: var(--FE_UI-size-full); } .page-channel-item.active, .page-channel-item:hover { background: #005EAE; } .page-channel-item.active a, .page-channel-item:hover a { color: rgba(var(--FE_UI-color-white), 1); } .page-solution-channel { font-size: var(--FE_UI-size-32); color: var(--FE_UI-color-black); font-weight: 700; } @media(max-width:760px) { /* #banner.page-banner{ height: calc(var(--FE_UI-size-fullVH) / 2); } */ .page-banner-img { height: var(--FE_UI-size-full); } .page-banner-img img { height: var(--FE_UI-size-full); object-fit: cover; } .page-banner-title { font-size: .7rem; } .page-text { font-size: .2666rem; line-height: 2; } .page-channel .container { padding: 0; } .page-channel-list { height: 100%; border-radius: .2rem .2rem 0 0; justify-content: left; } .page-channel-list::-webkit-scrollbar { height: 2px; width: 20px; border-radius: 2px; } .page-channel-item { flex: none; font-size: .3rem; border-radius: .2rem; } .page-channel-item a { padding: 0 .4rem; font-size: .26rem; } } /* page about */ .page-about { padding: .8rem 0 } .page-about .container { display: flex; justify-content: space-between; } .page-about-left { width: 60%; padding-right: 5%; } .page-about-left .public-title-en, .page-culture .public-title-en, .page-strategy .public-title-en { font-size: .7rem; } .page-about-left .public-title-cn, .page-culture .public-title-cn, .page-strategy .public-title-cn { font-size: .3rem; margin-top: -.3rem; } .page-about-right { width: 40%; background-repeat: no-repeat; background-position: center; background-size: cover; } .topic-organization-container { margin-top: .6rem; } .topic-organization-container img { display: block; max-width: 80%; margin: 0 auto } .page-culture { background: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvYWJvdXRfYmFja2dfMS5wbmc) no-repeat fixed center; background-size: cover; padding: .8rem 0 } .page-culture .title h4 { color: #fff } .page-culture .title p { opacity: .2; } .page-culture-list { margin-top: 4.208vw; display: flex } .page-culture-item { flex: 1; text-align: center; padding: 0 2vw; transition: all ease .3s; -webkit-transition: all ease .3s; -moz-transition: all ease .3s } .page-culture-icon { font-size: .4rem; color: #fff; line-height: 1; margin-bottom: 20px; } .page-culture-title { font-size: .2rem; font-weight: bold; color: #fff; margin-bottom: 20px; } .page-culture-summary { font-size: .16rem; color: #fff } .page-culture-item:hover { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px) } @media(max-width:760px) { .page-about .container { padding: 0; flex-direction: column; } .page-about-left { width: var(--FE_UI-size-full); padding-right: 0; } } /* page honor */ .page-honor-item .home-case-img { display: flex; justify-content: center; align-items: center; height: calc(var(--FE_UI-size-50) * 6); border-bottom: solid 1px rgba(var(--FE_UI-color-f2f2f2), 1); padding: 10px; } .page-honor-item .home-case-img img { width: auto; max-height: var(--FE_UI-size-full); } @media(max-width:760px) { .page-honor-item .home-case-img { height: 3rem; } } /* page path */ .page-path { height: 100vh; overflow: hidden; position: relative } .page-path:after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: var(--FE_UI-size-full); background-color: rgba(var(--FE_UI-color-black), 0.08); transform: translateX(-50%); } .page-path-box { margin: 25vh auto; max-width: var(--FE_UI-size-fullVW); } .swiper-path { overflow: visible; height: calc(var(--FE_UI-size-fullVH) / 2); } .page-path-item { display: flex; transition: all 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99); } .page-path-left { width: 50%; } .page-path-left-box { position: relative; transition: color 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99), height 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; z-index: 0; } .page-path-left-img { position: absolute; right: 0; top: 0; opacity: 0; width: 100%; height: 100%; mask-image: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvcGF0aC1iZy0xLnBuZw); mask-size: 100% 100%; mask-position: center; background-color: #232830; z-index: -1; transition: opacity 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99); } .page-path-img-block { position: relative; overflow: hidden; } .page-path-img { width: 100%; transition: all 1s ease; height: 100%; left: 0; top: 0; position: absolute; background-size: cover; background-position: center; transition: all 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99); } .page-path-contnet { width: 3.05rem; margin-right: 0 } .page-path-title { font-size: .36rem; line-height: 1; font-weight: 600; margin-top: .1em; } .page-path-text { margin-top: .15rem; font-size: .16rem; line-height: 2; } .page-path-right { width: 50%; position: relative; padding-left: 1.96rem; display: flex; align-items: center; font-size: 1.1rem } .page-path-right .iconfont { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); font-size: 12px; line-height: 1; display: block; color: rgba(var(--FE_UI-color-main), 1); transition: opacity 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99); } .page-path-year { letter-spacing: -.05em; text-indent: -.05em; line-height: .8; background-image: linear-gradient(to right, rgba(var(--FE_UI-color-main), 1), rgba(var(--FE_UI-color-auxiliary), 1)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: font-size 0.5s cubic-bezier(0.25, 0.74, 0.22, 0.99); } .path-pagination { pointer-events: none; width: 10%; right: 0; top: 50%; left: auto; bottom: auto; display: flex; align-items: flex-start; line-height: .8; font-size: .16rem; } .path-pagination b { font-size: .4rem; color: rgba(var(--FE_UI-color-main), 1); margin-right: .1rem; margin-top: -0.04rem; } .swiper-path ul li.swiper-slide-prev .page-path-item { margin-bottom: .67rem; } .swiper-path ul li.swiper-slide-next .page-path-item { margin-top: 1.04rem; } .swiper-path ul li.swiper-slide-active .page-path-item { margin-top: 0; margin-bottom: 0; } .swiper-path ul li.swiper-slide-active .page-path-item .page-path-left-box { color: rgba(var(--FE_UI-color-white), 1); height: 50vh; } .swiper-path ul li.swiper-slide-active .page-path-item .page-path-left-img { opacity: 1; } .swiper-path ul li.swiper-slide-active .page-path-right .iconfont { opacity: 0; } @media(max-width:992px) { .page-path { height: auto; margin: .8rem auto } .page-path:after { height: 1px; width: var(--FE_UI-size-full); left: 50%; top: calc(.4rem + 50vw); } .page-path-box { margin: auto; width: calc(var(--FE_UI-size-full) - .8rem); } .swiper-path { height: auto; } .page-path-item { display: block; } .page-path-left { width: calc(100% - .8rem); margin: auto; } .page-path-left-box { height: 50vw } .page-path-contnet { width: 100%; text-align: center; } .page-path-right { padding-left: 0; padding-top: .8rem; width: 100%; text-align: center; align-items: center; justify-content: center; } .page-path-right .iconfont { top: .4rem; left: 50%; transform: translate(-50%, -50%); } .page-path-year { font-size: 1.1rem; } .page-path-left-img { opacity: 1; } .swiper-path ul li.swiper-slide-prev .page-path-item { margin-bottom: 0; } .swiper-path ul li.swiper-slide-next .page-path-item { margin-top: 0; } .swiper-path ul li.swiper-slide-active .page-path-item .page-path-left-box { height: 50vw; } .swiper-path ul li.swiper-slide-active .page-path-right .iconfont { opacity: 1; } .path-pagination { top: 5%; right: 4%; width: 15%; align-items: flex-end; justify-content: flex-end; font-size: .2rem; } } @media(max-width:760px) { .path-pagination { width: 20%; top: 0 } .page-path-year { font-size: .8rem; } } /* page service */ .fabric-quality { padding: 80px 0; } .topic-title { font-size: var(--FE_UI-size-36); color: rgba(var(--FE_UI-color-black), 1); text-align: center } .topic-subtitle { margin-top: 20px; font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-black), 1); line-height: 2.3; text-align: center } .topic-subtitle span { font-size: var(--FE_UI-size-20); color: rgba(var(--FE_UI-color-main), 1); } .topic-quality-container { margin-top: 70px; } .fabric-quality .topic-quality-item { display: flex; direction: ltr; box-shadow: 0 0 14px rgba(var(--text-color-black), .05); margin-bottom: 0 } .fabric-quality .topic-quality-item:nth-child(2n) { direction: rtl; margin-bottom: 0 } .fabric-quality .topic-quality-left { flex: 1; text-align: left; padding: 0 2.7083vw !important; direction: ltr; max-width: 50%; background: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvZmFicmljX2JhY2tnXzEucG5n) no-repeat center; background-size: cover } .fabric-quality .topic-quality-right { flex: 1; max-width: 50%; overflow: hidden } .fabric-quality .topic-quality-right img { width: 100%; height: auto; object-fit: cover; display: block; transition: ease-in-out .3s; -webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; } .fabric-quality .topic-quality-number { width: 100%; text-align: left; font-family: Barlow; font-size: 3.75vw; font-weight: bold; color: rgba(var(--FE_UI-color-white), 1); line-height: 1; margin-bottom: 25px; margin-top: 15px; overflow: hidden } .fabric-quality .topic-quality-number .serve-adv-num { background-image: linear-gradient(to top, #005EAE, #0097de); -webkit-background-clip: text; color: transparent; } .fabric-quality .topic-quality-number img { max-width: 3.8021vw; display: block; } .fabric-quality .topic-quality-title { width: 100%; text-align: left; font-size: var(--FE_UI-size-28); background-image: linear-gradient(45deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 50%); background-clip: text; font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; } .fabric-quality .topic-quality-left .page-text { font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-333), 1); width: 100%; line-height: 2.6; margin-top: 0; } .fabric-quality .topic-quality-left .page-text p { position: relative; background-size: 15px } .fabric-quality .topic-quality-item:hover .topic-quality-right img { transform: scale(1.1) } @media(max-width:1180px) { .fabric-quality .topic-quality-left .page-text { line-height: 2; font-size: var(--FE_UI-size-14); } } @media(max-width:760px) { .fabric-quality { padding: .8rem 0; } .fabric-quality .container { width:100%; padding: 0; } .topic-title { font-size: .4rem; } .topic-subtitle { font-size: .26rem; line-height: 2; } .topic-subtitle span { font-size: .28rem; } .fabric-quality .topic-quality-item { display: block; } .fabric-quality .topic-quality-right { width: var(--FE_UI-size-full); max-width: var(--FE_UI-size-full); } .fabric-quality .topic-quality-left { margin-top:0; max-width: var(--FE_UI-size-full); padding: 4vw !important; } .fabric-quality .topic-quality-number img { max-width: 6vw; } .fabric-quality .topic-quality-title { font-size: .38rem; } .fabric-quality .topic-quality-left .page-text { font-size: .16rem; } } /* page case */ .page-case-container { padding: var(--FE_UI-size-50) 0; background-color: rgba(var(--FE_UI-color-f2f2f2), 1); } .page-case-list { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-bottom: var(--FE_UI-size-30); } .page-case-item { width: calc((var(--FE_UI-size-full) - 60px) / 3); margin-right: 30px; margin-bottom: 30px; } .page-case-item:nth-child(3n) { margin-right: 0; } .page-case-item .home-case-block { background-color: rgba(var(--FE_UI-color-white), 1); } .page-case-item .home-case-subtitle { padding-top: 0; line-height: 60px; } @media(max-width:760px) { .page-case-container { padding: .8rem 0; } .page-case-container .container { padding: 0; } .page-case-list { margin-bottom: .3rem; } .page-case-item { width: calc((var(--FE_UI-size-full) - .3rem) / 2); margin-right: .3rem; margin-bottom: .3rem; } .page-case-item:nth-child(3n) { margin-right: .3rem; } .page-case-item:nth-child(2n) { margin-right: 0; } .page-case-item .home-case-title { padding: .2rem; text-align: left; } .page-other-case table tr { display: flex; flex-wrap: wrap; } .page-other-case table tr td { width: 100% } } /*page team*/ #main.team-main { z-index: 6 } .page-team-container { padding: var(--FE_UI-size-50) 0 } .page-team-list { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .page-team-list .team-item { margin: 0 2% 2% 0; width: calc(96%/3); -webkit-transition: background-color 0.2s linear; -moz-transition: background-color 0.2s linear; -o-transition: background-color 0.2s linear; -webkit-transition: background-color 0.2s linear; -ms-transition: background-color 0.2s linear; } .page-team-list .team-item:nth-child(3n) { margin-right: 0; } .page-team-list .team-item .team-hd { display: flex; align-items: stretch; justify-content: space-between; background-color: #FBFBFB; cursor: pointer; } .team-item .img-box { margin: 0; width: 40%; position: relative; overflow: hidden; } .team-item .img-box .img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .team-item .info-box { width: 60%; padding: .4rem; align-items: flex-start; justify-content: flex-start; } .team-item .info-box .team-name { margin: 0 0 .2rem; display: flex; align-items: flex-end; } .team-item .info-box .team-name h4 { font-size: var(--FE_UI-size-18); font-weight: 600; line-height: 1; } .team-item .info-box .team-name span { margin-left: .2rem; font-size: var(--FE_UI-size-14); color: #333; line-height: 1; } .team-item .info-box .team-ms { font-size: var(--FE_UI-size-14); color: #747474; line-height: 1.8; text-align: justify; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; /* -webkit-line-clamp: 4;*/ } .team-item .info-box .more { margin-top: .2rem; color: #fff; padding: 6px 12px; background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); border-radius: 6px; transition: all 0.6s ease; display: none; } .team-item:hover .info-box .more { background-image: linear-gradient(to right, rgba(var(--FE_UI-color-main), 1), rgba(var(--FE_UI-color-auxiliary), 1)); color: #fff; } .team-item:hover { background: #F2F3F5 } .team-pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999; display: none; background: rgba(0, 0, 0, .5); } .team-pop .pop-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; } .pop-box { min-height: 520px; background: #fff; padding: 35px 45px; position: relative; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); filter: scale(0); filter: transform; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s; opacity: 0; } .team-pop .pop-bg.on .pop-box { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); filter: scale(1); filter: transform; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s; opacity: 1; } .pop-close { position: absolute; right: 10px; top: 5px; cursor: pointer; font-size: 30px; color: #999; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } .team-pop .pop-box .team-pic { position: absolute; left: 0; top: 0; } .team-pop .pop-box .team-pic img { width: 246px } .team-pop .pop-box .team-mess-box { margin-left: 256px; float: left; width: 456px; } .team-pop .pop-box .team-mess-box .t-box { border-bottom: 1px solid #E9ECF0; margin-bottom: 24px; overflow: hidden; } .team-pop .pop-box .team-mess-box .name { font-size: var(--FE_UI-size-30); background: linear-gradient(90deg, rgba(0, 151, 222, 1) 0%, rgba(0, 143, 93, 1) 100%); background-clip: border-box; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; letter-spacing: 0; margin-bottom: 8px; } .team-pop .pop-box .team-mess-box .ms { padding-bottom: 12px } .team-pop .pop-box .team-mess-box .ms p { font-size: var(--FE_UI-size-14); color: #5F6464; letter-spacing: 0; line-height: 25px; } .team-pop .pop-box .team-mess-box .desc { font-size: var(--FE_UI-size-14); color: #5F6464; letter-spacing: 0; line-height: 25px; overflow-y: auto; } @media(max-width:760px) { .page-team-container { padding: .6rem 0 } .page-team-list .team-item { margin-right: 0; margin-bottom: .3rem; width: 100% } .team-item .info-box { padding: .32rem } .team-item .info-box .team-name h4 { font-size: .3rem } .team-item .info-box .team-ms { font-size: .24rem } .pop-box { min-height: 460px; } .team-pop .pop-bg.on .pop-box { padding: 12px; width: 90% } .pop-close { color: #fff; z-index: 2 } .team-pop .pop-box .team-pic { height: 230px; overflow: hidden } .team-pop .pop-box .team-pic img { display: block; width: 100%; object-fit: cover; margin: 0 auto } .team-pop .pop-box .team-mess-box .name { font-size: .32rem } .team-pop .pop-box .team-mess-box .ms p { font-size: .266rem } .team-pop .pop-box .team-mess-box .desc { max-height: 200px; overflow-y: auto; font-size: .266rem } .team-pop .pop-box .team-mess-box { width: 100%; margin: 0; margin-top: 0px; margin-top: 236px; } } /* page news */ .page-news-container { padding: var(--FE_UI-size-50) 0 calc(var(--FE_UI-size-50) + var(--FE_UI-size-20)); background-color: rgba(var(--FE_UI-color-f2f2f2), 1); } .page-news-list { display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: wrap; } .page-news-item { width: calc((var(--FE_UI-size-full) - 60px) / 3); margin-bottom: 30px; margin-right: 30px; } .page-news-item:nth-child(3n) { margin-right: 0; } .page-news-item-block { display: block; overflow: hidden; border-radius: calc(var(--FE_UI-size-16) / 2); } .page-news-img { overflow: hidden; height: calc(var(--FE_UI-size-50) * 6); position: relative; } .page-news-icon { background-color: rgba(var(--FE_UI-color-black), .7); display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: var(--FE_UI-size-full); height: var(--FE_UI-size-full); } .page-news-icon .FEY-icon { color: rgba(var(--FE_UI-color-white), 1); font-size: var(--FE_UI-size-50); } .page-news-img img { width: 100%; height: 100%; object-fit: cover; transition: ease-in-out .3s; } .page-news-content { border-top: solid 6px #f4f4f4; background-color: rgba(var(--FE_UI-color-white), 1); padding: var(--FE_UI-size-20) var(--FE_UI-size-30); } .page-news-time { font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-999), 1); } .page-news-title { font-size: var(--FE_UI-size-20); color: rgba(var(--FE_UI-color-333), 1); font-weight: normal; margin-top: calc(var(--FE_UI-size-20) / 2); margin-bottom: calc(var(--FFE_UI-size-30) / 2); min-height: calc(var(--FE_UI-size-20) * 3); line-height: 1.5; } .page-news-subtitle { font-size: var(--FE_UI-size-20); color: rgba(var(--FE_UI-color-999), 1); min-height: var(--FE_UI-size-20); line-height: 1; } .page-news-item:hover .page-news-title { color: rgba(var(--FE_UI-color-main), 1); } .page-news-item:hover .page-news-img img { transform: scale(1.1); } @media (max-width: 1180px) { .page-news-img { height: calc(var(--FE_UI-size-50) * 5); } } @media (max-width: 992px) { .page-news-item { width: calc((var(--FE_UI-size-full) - 30px) / 2); margin-right: 30px; } .page-news-item:nth-child(3n) { margin-right: 30px; } .page-news-item:nth-child(2n) { margin-right: 0; } } @media (max-width: 760px) { .page-news-container { padding: .8rem 15px; } .page-news-container .container { padding: 0; } .page-news-item { width: var(--FE_UI-size-full); margin-right: 0 !important; margin-bottom: 20px } .page-news-item-block { border-radius: calc(.32rem / 2); } .page-news-img { height: calc(1rem * 5); } .page-news-icon .FEY-icon { font-size: .8rem; } .page-news-content { padding: .3rem; } .page-news-time { font-size: .28rem; } .page-news-title { font-size: .3rem; min-height: calc(.32rem * 3); margin-top: .2rem; } .page-news-subtitle { font-size: .28rem; min-height: .4rem; margin-top: .2rem; } } /* page news details */ .page-details-container { padding: calc(var(--FE_UI-size-50) * 2) 0; } .page-details-title { font-size: var(--FE_UI-size-40); color: rgba(var(--FE_UI-color-333), 1); } .page-info { font-size: var(--FE_UI-size-18); margin-top: calc(var(--FE_UI-size-30) / 2); margin-bottom: var(--FE_UI-size-30); padding-bottom: var(--FE_UI-size-30); border-bottom: solid 1px #e5e5e5; } .page-info span { padding: 0 20px; } .page-next { margin-top: var(--FE_UI-size-50); border-top: dashed 1px rgba(var(--FE_UI-color-ddd), 1); padding-top: var(--FE_UI-size-50); display: flex; justify-content: space-between; align-items: center; } .page-next-left { font-size: var(--FE_UI-size-16); line-height: 2; } .page-next-left p { line-height: 2.3; color: rgba(var(--text-color-black), .2); } .page-next-left p a { color: rgba(var(--text-color-black), .2); } .page-next-left p:hover a, .page-next-left p:hover { font-weight: bold; color: rgba(var(--FE_UI-color-main), 1); } .page-next-right .public-more i { margin-right: 16px; margin-left: 0; } @media (max-width: 1180px) { .page-details-container { padding: calc(var(--FE_UI-size-50) * 1) 0; } .page-details-title { font-size: var(--FE_UI-size-26); } } @media (max-width: 760px) { .page-details-container { padding: .8rem 0; } .page-details-container .container { padding: 0; } .page-details-title { font-size: .2666rem; } .page-info { padding-bottom: .2rem; margin-bottom: .2rem; margin-top: .2rem; font-size: .2666rem; } .page-next { margin-top: 1rem; padding-top: .4rem; flex-direction: column; font-size: 14px; align-items: self-start; } .page-next-left { font-size: .24rem; width: var(--FE_UI-size-full); margin-bottom: .3rem; } } /* page hr */ .page-hr { padding: 50px 0; background: #f9f9f9 } .page-job-nav { margin-top: 30px; } .page-technical { padding: 50px 0 60px } .page-technical-from { margin-top: 60px; display: flex; } .page-technical-from-item { margin-right: 2.083vw; flex: 1 } .page-technical-from-item:last-child { margin-right: 0 } .page-technical-from-title { font-size: var(--FE_UI-size-18); color: var(--FEY-color-333); margin-bottom: 10px; } .page-technical-from-block { display: flex; background: #FAFAFA; border: solid 1px #ECECEC; height: 46px; } .page-technical-from-input { height: 100%; display: block; width: 100%; outline: none; border: none; background: transparent; padding-left: 15px; font-size: var(--FE_UI-size-16); color: rgba(var(--FE_UI-color-333), 1) } .page-technical-from-input::placeholder { color: rgba(var(--FE_UI-color-999), 1) } input.page-technical-from-input[type=datetime-local], input.page-retail-input[type=datetime-local] { -webkit-appearance: none; } select.page-technical-from-input, select.page-retail-input { -webkit-appearance: none; padding-right: 30px; background: url(/cases/41/proxy?p=L3NraW4vZGVmYXVsdC9pbWFnZXMvaWNvbl8yLnBuZw) no-repeat scroll right 10px center transparent; background-size: 12px } .page-technical-from-submit { width: 85px; background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); border: none; font-size: var(--FE_UI-size-16); color: rgba(var(--FE_UI-color-white), 1) } .page-hr-from .page-technical-from-item:last-child { flex: none; } .paee-hr-info { margin-top: 30px; text-align: center; margin-bottom: 30px; font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-333), 1) } .page-job-list { margin-top: 30px; margin-bottom: 30px } .page-job-item { border-bottom: solid 1px #eaeaea } .page-job-title { display: flex; background: rgba(var(--FE_UI-color-white), 1); line-height: 64px; cursor: pointer } .page-job-title span { flex: 1; text-align: center; font-size: var(--FE_UI-size-18); color: rgba(var(--FE_UI-color-333), 1); font-weight: 400 } .page-job-title span i { font-style: normal } .page-job-content { background: rgba(var(--FE_UI-color-white), 1); border-top: solid 1px #eee; display: none; } .page-job-text { display: flex; margin-top: 20px; /*margin-bottom: 20px;*/ } .page-job-text-left { padding: 1.8vw 2vw 2vw; width: 50% } .page-job-text-left:first-child { border-right: solid 1px #eee } .page-job-subtitle { margin-bottom: 20px; font-size: var(--FE_UI-size-20); font-weight: 900; color: rgba(var(--FE_UI-color-333), 1) } .page-job-text-left .page-text, .page-job-treatment-text { font-size: var(--FE_UI-size-14); color: rgba(--FE_UI-color-333); line-height: 2 } .page-job-treatment { padding: 2vw; border-top: solid 1px #eee } .page-job-join { margin-top: 20px; text-align: center } .page-job-join p { width: 80%; background: rgba(var(--FE_UI-color-main), 1); margin: auto; font-size: var(--FE_UI-size-14); color: rgba(var(--FE_UI-color-white), 1); padding: 15px 0 } @media (max-width: 992px) { .page-job-title span { font-size: var(--FE_UI-size-16); white-space: nowrap; } } @media (max-width: 760px) { .hidden-xs { display: none; } .page-solution-channel { font-size: .5rem; } .paee-hr-info { margin-top: 15px; margin-bottom: 30px; font-size: .24rem; } .page-technical-from-title { font-size: .3rem; } .page-hr { padding: 30px 0 } .page-hr .container { padding: 0; } .page-technical-from-input { font-size: .26rem; } .page-job-info { font-size: .22rem; line-height: 2 } .page-job-title span { font-size: .2rem; flex: initial; width: 28% } .page-job-title span.yc-icon { font-size: .22rem } .page-job-title span:last-child { width: 10% } .page-job-title span:first-child { width: 37% } .page-job-text { display: block; margin-top: 0; margin-bottom: 0 } .page-job-text-left { width: 100%; padding: 5vw 3vw } .page-job-text-left:first-child { border-bottom: solid 1px #eee; border-right: none } .page-job-text-left .page-text, .page-job-treatment-text { font-size: .22rem } .page-job-subtitle { font-size: .32rem; margin-bottom: 10px; } .page-job-treatment { padding: 5vw 3vw } .page-job-join p { width: 90%; font-size: .24rem; padding: 10px 3vw } } /* page contact */ .page-contact { padding: .3rem 0; background: rgba(245, 245, 245, 1); } .page-contact .container { display: flex; } .page-contact-left, .page-contact-right { width: calc(var(--FE_UI-size-full) / 2); background-color: rgba(var(--FE_UI-color-white), 1); } .page-contact-list { padding: 75px; } .page-contact-item { margin-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center } .page-contact-item:last-child { margin-bottom: 0 } .page-contact-item i { display: flex; width: 48px; height: 48px; text-align: center; line-height: 48px; align-items: center; justify-content: center; border: 1px solid rgba(var(--FE_UI-color-main), 1); border-radius: 50%; font-size: 24px; margin-right: 20px; background-image: linear-gradient(to right, rgba(var(--FE_UI-color-main), 1), rgba(var(--FE_UI-color-auxiliary), 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .page-contact-item i svg { width: 50%; fill: rgba(var(--FE_UI-color-main), 1); } .page-contact-item i svg path { fill: rgba(var(--FE_UI-color-main), 1); } .page-contact-item:nth-child(5) i { line-height: 40px } .page-contact-text { width: calc(var(--FE_UI-size-full) - 68px); } .page-contact-text span { display: block; font-size: .2rem; color: rgba(var(--FE_UI-color-333), 1); font-weight: bold } .page-contact-text p { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start } .page-contact-text p, .page-contact-text a { font-size: .18rem; line-height: 2; background-image: linear-gradient(to right, rgba(var(--FE_UI-color-main), 1), rgba(var(--FE_UI-color-auxiliary), 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .page-contact-right #map { width: var(--FE_UI-size-full); height: var(--FE_UI-size-full) } @media(max-width:760px) { .page-contact .container { flex-direction: column; padding: 0; } .page-contact-left, .page-contact-right { width: 100% } .page-contact-list { padding: 5vw } .page-contact-item { margin-bottom: .1rem; } .page-contact-item i { width: 34px; height: 34px; line-height: 32px; font-size: 16px; } .page-contact-text { margin: 0; width: 75% } .page-contact-text span { font-size: 15px; } .page-contact-text p, .page-contact-text a { font-size: 14px; } .page-contact-right #map { height: 386px; } } /* page */ .page a, .page b { margin: 5px; padding: 0 10px; height: 30px; border-color: rgba(var(--FE_UI-color-white), 1); border-radius: 4px; box-shadow: 0 0 5px rgba(var(--text-color-black), .2); color: #777; line-height: 30px } .page b { border-color: rgba(var(--FE_UI-color-main), 1); background: linear-gradient(45deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); color: rgba(var(--FE_UI-color-white), 1) } .page a:hover { border-color: rgba(var(--FE_UI-color-main), 1); color: rgba(var(--FE_UI-color-main), 1) } @media (max-width: 760px) { .page a, .page b { padding: 0 8px; height: 30px; line-height: 30px; font-size: .24rem; } } /*new case list*/ .page-case-container .tit_hd { margin-bottom: .3rem; padding: 0 .3rem 0 .25rem; display: flex; align-items: center; justify-content: space-between; height: .5rem; background: linear-gradient(to right, rgba(var(--FE_UI-color-main), 1), rgba(var(--FE_UI-color-auxiliary), 1)); position: relative; overflow: hidden; } .page-case-container .tit_hd::before { content: ""; display: block; width: .73rem; height: 100%; position: absolute; left: 0; top: 0; } .tit_hd .hd_name { color: #fff; font-weight: 900; -webkit-text-stroke: 3px rgba(0, 0, 0, .5); font-size: .24rem; font-weight: 900; text-transform: uppercase; position: relative; } .tit_hd .hd_name::before { content: attr(data-content); position: absolute; -webkit-text-stroke: 0; color: #fff; } .tit_hd .more { position: relative; line-height: .5rem; color: #fff } .tit_hd .more::before, .tit_hd .more::after { content: ""; font-family: iconfont; position: absolute; } .tit_hd .more::before { color: rgba(212, 48, 48, 0.1); font-size: .68rem; left: -200%; } .tit_hd .more::after { color: rgba(212, 48, 48, 0.6); font-size: .4rem; left: -.6rem; } .case_pic_list2 { margin-bottom: .1rem; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; } .case_pic_list2 li { margin-right: .4rem; margin-bottom: .4rem; width: calc((100% - .4rem)/2); } .case_pic_list2 li:nth-child(2n) { margin-right: 0; } .case_pic_list2 li a { color: #333; display: flex; align-items: center; justify-content: flex-start; } .case_pic_list2 li .img-box { margin-right: .2rem; width: 38%; height: 1.92rem; overflow: hidden } .case_pic_list2 li .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -ms-transition: all .3s ease-in; } .case_pic_list2 li .txt { width: calc(62% - .2rem); } .case_pic_list2 li .txt h4 { margin-bottom: .1rem; font-size: .18rem; line-height: 1.8; -webkit-line-clamp: 2; } .case_pic_list2 li .txt p { font-size: .15rem; color: #666; } .case_pic_list2 li .txt label { color: #333; background-image: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .case_pic_list2 li a:hover .txt h4 { color: #333; background-image: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .case_pic_list2 li a:hover .img-box img { transform: scale(1.1); } .page-case-list2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .page-case-list2 a { margin-top: .05rem; margin-right: .4rem; padding-left: .15rem; width: calc((100% - .4rem)/2); position: relative; font-size: .14rem; line-height: 2; } .page-case-list2 a:nth-child(2n) { margin-right: 0; } .page-case-list2 a::before { content: ""; width: .04rem; height: .04rem; background-color: rgba(51, 51, 51, 1); border-radius: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .page-case-list2 a:hover { color: #333; background-image: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .page-case-list2 a:hover::before { background: linear-gradient(90deg, rgba(var(--FE_UI-color-main), 1) 0%, rgba(var(--FE_UI-color-auxiliary), 1) 100%); } @media (max-width: 760px) { .page-case-container { padding: .4rem 0 } .page-case-container .tit_hd { height: .72rem } .tit_hd .hd_name { font-size: .3rem } .case_pic_list2 li .txt h4 { font-size: .28rem } .case_pic_list2 li { width: 100%; margin-right: 0 } .page-case-list2 a { margin-right: 0; width: 100%; font-size: .266rem; } }