@charset "utf-8"; /* CSS Document */ @media (min-width: 768px) { html { font-size: 28px !important; } } @media (min-width: 1025px) { html { font-size: 30px !important; } } @media (min-width: 1280px) { html { font-size: 32px !important; } } @media (min-width: 1366px) { html { font-size: 34px !important; } } @media (min-width: 1440px) { html { font-size: 36px !important; } } @media (min-width: 1680px) { html { font-size: 40px !important; } } .global-inner { width: 88%; max-width: 1556px; margin: 0 auto; position: relative; display: block; z-index: 5; } @media screen and (max-width: 991px) { .global-inner { width: 92%; } } @-webkit-keyframes slideInDown { 0% { -webkit-animation-timing-function: ease-in-out; -webkit-transform: translateY(-150%); } 50% { -webkit-transform: translateY(0) rotate(1deg); opacity: 1; } 70% { -webkit-transform: translateY(0) rotate(-1deg); } 85% { -webkit-transform: translateY(0) rotate(1deg); } 95% { -webkit-transform: translateY(0) rotate(-1deg); } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes slideInDown { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: translateY(-150%); transform: translateY(-150%); } 50% { -webkit-transform: translateY(0) rotate(1deg); transform: translateY(0) rotate(1deg); opacity: 1; } 70% { -webkit-transform: translateY(0) rotate(-1deg); transform: translateY(0) rotate(-1deg); } 85% { -webkit-transform: translateY(0) rotate(1deg); transform: translateY(0) rotate(1deg); } 95% { -webkit-transform: translateY(0) rotate(-1deg); transform: translateY(0) rotate(-1deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes scaleUp { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); opacity: 1; } } @keyframes scaleUp { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .banscaleup { -webkit-animation: scaleUp 1s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleUp 1s forwards cubic-bezier(0.7, 0, 0.3, 1); } .index-slide { -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; height: 700px; } .ban-doc { position: absolute; left: 0; top: 50%; transform: translateY(-50%); right: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; } .ban-doc .l-doc-btn .bt1 { margin-top: 40px; opacity: 0; opacity: 1\0; } .ban-doc .l-doc-btn .bt2 { margin-top: 24px; opacity: 0; opacity: 1\0; } .ban-doc .l-doc-btn .btn-wrap { margin-top: 80px; text-align: right; padding-right: 42px; opacity: 1\0; transform-origin: 50% 50%; } .ban-doc .l-doc-btn .btn-off-arrow { display: inline-block; text-align: center; font-size: 18px; color: #333333; width: 222px; height: 54px; border-radius: 50px; line-height: 54px; border: 1px solid #626262; position: relative; transition: all 0.3s ease; transition: all 0.3s linear; } .ban-doc .l-doc-btn .btn-off-arrow .red-arr { position: absolute; right: -10%; top: 50%; transform: translateY(-50%); transition: all 0.3s linear 0.1s; } .ban-doc .l-doc-btn .btn-off-arrow:hover { transform: scale(0.85); } .ban-doc .l-doc-btn .btn-off-arrow:hover .red-arr { transform: translateY(-50%) translateX(-10px); } .ban-doc .r-product { position: relative; left: 30px; } .ban-doc .r-product img { opacity: 0; -webkit-transform-origin: 150% 50%; transform-origin: 150% 50%; } .swiper-pagination-bullet { width: 18px; height: 18px; background-color: #bfbfbf; margin: 0 10px; opacity: 1; } .swiper-pagination-bullet-active { background-color: #1b1b1b; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 24px; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 140px; } .company-culture { margin-top: -100px; } .company-culture .culture-main { height: 200px; box-shadow: 0px 3px 16px rgba(22, 22, 22, 0.2); background-color: #fff; } .company-culture .bgshadow { position: absolute; right: 0; left: 0; z-index: -1; height: 300px; background-size: cover; width: 1345px; margin: 0 auto; background: url(/images/shadow.png) no-repeat center center; opacity: 0; } .culture-main ul { display: flex; flex-flow: row nowrap; } .culture-main ul li { flex: 1; text-align: center; height: 200px; display: flex; flex-direction: column; justify-content: left; align-items: center; justify-content: center; position: relative; -webkit-perspective: 100px; perspective: 100px; } .culture-main ul li:hover i.before { z-index: 1; transform: rotateY(180deg); } .culture-main ul li:hover i.after { z-index: 2; transform: rotateY(0deg); } .culture-main ul li:hover h3 { color: #d92b34; } .culture-main ul li:hover h4 { color: #d92b34; } .culture-main ul li:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); wdith: 1px; height: 84px; border-right: 1px dashed #dcdcdc; } .culture-main ul li:last-child { border-right: none; } .culture-main ul li .icon-wrap { position: relative; overflow: hidden; width: 70px; height: 90px; transition: all 1s linear; -webkit-transform-style: -webkit-preserve-3d; transform-style: preserve-3d; transform: perspective(300px); margin-bottom: 12px; } .culture-main ul li i { font-size: 70px; color: #666666; display: block; position: absolute; top: 0; left: 0; transition: all 0.5s ease-in-out; -webkit-transform-style: -webkit-preserve-3d; transform-style: preserve-3d; backface-visibility: hidden; box-sizing: border-box; } .culture-main ul li i.before { transform: rotateY(0deg); z-index: 2; } .culture-main ul li i.after { color: #d92b34; transform: rotateY(180deg); z-index: 1; } .culture-main ul li h3 { font-size: 24px; color: #333333; font-weight: bold; line-height: 1; margin-bottom: 8px; transition: all 0.5s ease-in-out; } .culture-main ul li h4 { font-size: 14px; color: #999999; text-transform: uppercase; transition: all 0.5s ease-in-out; } .global-title { text-align: center; margin-top: 110px; margin-bottom: 48px; } .global-title h3 { position: relative; display: inline-block; padding-left: 77px; } .global-title h3 span { background-color: #fff; font-size: 40px; font-weight: bold; color: #333333; } .global-title h3:after { content: ''; position: absolute; background: url(/images/global-tit-bg.png) no-repeat center center; background-size: cover; width: 77px; height: 77px; left: 32px; top: -23px; z-index: -1; } .global-title a { position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-decoration: underline; transition: all 0.3s linear; } .global-title a:hover { color: #d92b34; } .category-swiper .swiper-wrapper .swiper-slide { height: 230px; width: 294px; background-color: #fff; display: block; opacity: 0; opacity: 1\0; } .product-category { margin-bottom: 50px; } .global-product-item { height: 230px; width: 294px; background-color: #fff; position: relative; margin-right: 10px; } .global-product-item .proimg { position: absolute; top: 50%; left: 50%; padding: 0px; width: 100%; height: 100%; transform: translate(-50%, -50%); } .global-product-item .proimg .imgbg { width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; } .global-product-item .pos-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/probg.png) no-repeat center center; background-size: cover; transform: scale(0); transform-origin: center center; transition: all 0.3s linear; } .global-product-item .pro-name { font-size: 18px; line-height: 24px; padding: 0 5%; color: #fff; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; top: 50%; transform: translateY(-50%); justify-content: center; opacity: 0; transition: all 0.3s linear 0.1s; text-align: center; } .global-product-item .arrow-lt { display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 24px solid #ffffff; border-left: 24px solid transparent; border-right: 24px solid transparent; position: absolute; top: -4px; left: -17px; transform: rotate(135deg); } .global-product-item .arrow-lt:before { content: ''; position: absolute; top: 0; left: 0; width: 1px; width: 20px; background-color: #bfbfbf; z-index: 6; } .global-product-item .fakeline { background-color: #bfbfbf; position: absolute; top: 1px; left: 1px; display: inline-block; transition: all 0.3s linear; } .global-product-item .fakeline.line-ltl { width: 20px; height: 1px; } .global-product-item .fakeline.line-ltb { width: 1px; height: 20px; } .global-product-item .fakeline2 { background-color: #bfbfbf; position: absolute; right: 1px; bottom: 1px; display: inline-block; transition: all 0.3s linear; } .global-product-item .fakeline2.line-ltl { width: 20px; height: 1px; } .global-product-item .fakeline2.line-ltb { width: 1px; height: 20px; } .global-product-item .arrow-rb { display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 26px solid #ffffff; border-left: 26px solid transparent; border-right: 26px solid transparent; position: absolute; bottom: -5px; right: -17px; transform: rotate(-45deg); } .global-product-item:hover .pos-bg { transform: scale(1); } .global-product-item:hover .pro-name { opacity: 1; } .global-product-item:hover .fakeline, .global-product-item:hover .fakeline2 { background-color: #d92b34; } .category-title { font-size: 30px; color: #333; text-align: center; line-height: 1.2; margin-bottom: 48px; } .category-swiper .swiper-button-next { background: url(/images/ban-arr.png) no-repeat center center; width: 43px; height: 43px; background-size: cover; top: 23px; } .category-swiper .swiper-button-next:hover { background: url(/images/ban-arr-h.png) no-repeat center center; } .category-swiper .swiper-button-prev { background: url(/images/ban-arr.png) no-repeat center center; width: 43px; height: 43px; transform: rotate(180deg); background-size: cover; top: 23px; right: inherit; left: 0; } .category-swiper .swiper-button-prev:hover { background: url(/images/ban-arr-h.png) no-repeat center center; } .case-center { margin-top: 70px; padding-top: 110px; background: url(/images/casbg.jpg) no-repeat center center; background-size: cover; padding-bottom: 62px; } .case-center .global-title { text-align: left; background: none; margin: 0 auto; margin-bottom: 65px; } .case-center .global-title h3 { position: relative; right: 77px; } .case-center .global-title h3 span { background-color: transparent; } .case-center .global-title h3:after { left: 32px; top: -23px; } .case-center .global-title a { position: absolute; right: 0; bottom: 0; transform: translateY(0); text-decoration: underline; transition: all 0.3s linear; } .case-list .case-item { margin-right: 30px; margin-bottom: 90px; } .case-list .case-item a { display: block; width: 380px; height: 280px; position: relative; } .case-list .case-item a .img-box { overflow: hidden; } .case-list .case-item a .img-box img { width: 100%; transition: all 0.3s linear; } .case-list .case-item a .tag { position: absolute; bottom: -31px; left: 0; right: 0; width: 291px; height: 73px; background: url(/images/casetag.png) no-repeat center center; background-size: cover; margin: 0 auto; font-size: 18px; color: #333333; line-height: 69px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 0 5%; } .case-list .case-item a:hover .img-box img { transform: scale(1.1); } .case-list .case-item a:hover .tag { background: url(/images/casetag-on.png) no-repeat center center; color: #fff; } .case-list .case-item:nth-child(3n) { margin-right: 0; } .about-center { height: 700px; position: relative; } .about-center .l-about-bg { background: url(/images/about-bgl.png) no-repeat center center; width: 50%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; overflow: hidden; } .about-center .r-about-bg { background: url(/images/about-bg.png) no-repeat center center; width: 50%; height: 100%; position: absolute; right: 0; top: 0; background-size: cover; } .about-inner { height: 100%; } .about-inner .doc-box { width: 600px; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-right: 120px; } .about-inner .doc-box .global-title { text-align: left; background: none; margin: 0 auto; } .about-inner .doc-box .global-title h3 { position: relative; right: 77px; } .about-inner .doc-box .global-title h3 span { background-color: transparent; } .about-inner .doc-box .global-title h3:after { left: 32px; top: -23px; } .about-inner .doc-box .cp-tit { font-size: 24px; color: #333333; font-weight: bold; line-height: 40px; margin-top: 44px; } .about-inner .doc-box .doc-edit { font-size: 18px; color: #333333; line-height: 40px; margin-top: 22px; } .news-center { margin-top: 120px; margin-bottom: 120px; } .news-center .l-main-new { width: 600px; display: block; } .news-center .l-main-new .img-box { position: relative; overflow: hidden; } .news-center .l-main-new .img-box img { transition: all 0.3s linear; } .news-center .l-main-new .img-box .main-new-tit-wrap { position: absolute; width: 100%; bottom: 0; left: 0; height: 76px; line-height: 76px; background-color: rgba(0, 0, 0, 0.5); text-align: center; } .news-center .l-main-new .img-box .main-new-tit-wrap .l-tit { width: 500px; padding: 0 5%; font-size: 24px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; } .news-center .l-main-new .img-box .main-new-tit-wrap .r-date { width: 100px; background-color: #bf2a2d; text-align: center; color: #fff; font-size: 24px; } .news-center .l-main-new .img-box .main-new-tit-wrap .r-date span { font-size: 22px; position: relative; top: -6px; } .news-center .l-main-new .img-box .main-new-tit-wrap .r-date i { font-style: normal; position: relative; top: 3px; } .news-center .l-main-new .main-news-doc { font-size: 18px; line-height: 40px; padding: 40px 36px; height: 200px; overflow: hidden; background: linear-gradient(to right, #e8e8e8, #ffffff, #f2f2f2); } .news-center .l-main-new:hover .img-box img { transform: scale(1.1); } .news-center .l-main-new:hover .img-box .main-new-tit-wrap .l-tit { color: #ccc; } .news-center .r-news { width: 600px; padding-left: 110px; } .news-center .r-news .global-title { margin: 0; text-align: right; } .index-news-list { text-align: left; margin-top: 50px; height: 480px; overflow: hidden; } .index-news-list li a { display: block; margin-bottom: 42px; height: 132px; } .index-news-list li a .news-t { font-size: 24px; color: #333333; line-height: 32px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-news-list li a .news-d { font-size: 18px; line-height: 40px; color: #999999; margin-top: 20px; height: 80px; } .index-news-list li:hover .news-t { color: #d92b34; } /* FILE ARCHIVED ON 19:06:36 Jun 21, 2020 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 05:42:35 Feb 08, 2025. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 2.169 exclusion.robots: 0.049 exclusion.robots.policy: 0.03 esindex: 0.015 cdx.remote: 14.767 LoadShardBlock: 364.532 (3) PetaboxLoader3.datanode: 105.426 (4) PetaboxLoader3.resolve: 659.0 (3) load_resource: 431.417 */