/* * Created by Edward on 23/05/25 * Copyright (c) 2023 ishutime.com All rights reserved */ * { margin: 0px; padding: 0px; box-sizing: border-box; } @font-face { font-family: 'iconfont'; src: url('iconfont.woff2?t=1663740079843') format('woff2'), url('iconfont.woff?t=1663740079843') format('woff'), url('iconfont.ttf?t=1663740079843') format('truetype'); } table{ width: 100%; border-collapse: collapse; border-spacing: 0; } td,tr,th{ padding:8px; border: 1px solid rgba(0, 0, 0, .1); } .singePage td p{ margin-bottom: 0px; } .iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: SourceHanSans; src: url(https://website-ishutime.oss-cn-chengdu.aliyuncs.com/SourceHanSansCN-Regular.TTF) } @font-face { font-family: AlibabaSans; src: url(../fonts/Poppins-Bold.ttf) } @font-face { font-family: BrownBlod; src: url(../fonts/brown/brown-light.woff2) } @font-face { font-family: Brown; src: url(../fonts/brown/brown-regular.woff2) } html,body { font-family: "SourceHanSans","microsoft yahei"; font-size: 14px; color: #272727; } .commonTitle{ text-align: center; line-height: 1.2; margin-bottom: 3vw; } .commonTitle.solu{ position: relative; padding-bottom: 1.5vw; } .commonTitle.solu::after{ width: 80px; height: 4px; position: absolute; left: 50%; margin-left: -40px; bottom: 0px; content: ''; background: #004294; border-radius: 5px; } .commonTitle .en{ font-size: 2.5vw; text-transform: uppercase; position: relative; overflow: hidden; font-family: BrownBlod; } .solu_name{ font-size: 1.5vw; } .singePage p{ margin-bottom: 5px; } .pdBottom .commonTitle .en,.pdBottom .commonTitle .cn{ font-size: 1.5vw; } .pdBottom .singePage p { margin-bottom: 5px; } .commonTitle .cn{ font-size:2vw; position: relative; overflow: hidden; } .commonTitle .cn p{ -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .5s; } .commonTitle p{ -webkit-transform: translateY(100%); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .3s; } .commonTitle.animated p{ -webkit-transform: translateY(0%); } .kehu .commonTitle .cn{ font-size:2.5vw; } .commonTitle .des{ font-size: 1.4vw; margin-top: 1vw; overflow: hidden; } .commonTitle .des p { -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .6s; } .commonTitle.w{ color:#fff; } .commonTitle.absolute{ position: absolute; width: 100%; } .commonTitle.center{ top:50%; -webkit-transform: translateY(-50%); margin-bottom: 0px; } .header{ width: 100%; height: auto; position: fixed; left: 0%; top: 0%; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0px 3%; -webkit-transition: all .5s; } .header::after{ width: 100%; height: 1px; position: absolute; left: 0%; bottom: 0%; content: ''; background: rgba(255, 255, 255, 0.1); pointer-events: none; } .headerR{ width:250px; position: relative; display: flex; color: #fff; align-items: center; z-index: 1; } .headerR .hottel{ width: calc(100% - 40px); padding-right: 10px; margin-right: 10px; position: relative; display: flex; align-items: center; font-family: Brown; line-height: 30px; color: #fff; } .header.open .headerR .hottel, .header.active .headerR .hottel{ color: #3e3e3e; } .headerR .hottel::after{ width: 1px; height: 60%; position: absolute; right: 0%; top: 25%; content: ''; background: rgba(255, 255, 255, 0.1); } .header.open .headerR .hottel::after{ background: rgba(0, 0, 0, 0.1); } .headerR .hottel .icon{ width: 30px; height: 30px; font-size: 26px; } .headerR .hottel p{ font-size:26px; } .headerR .version{ width: 30px; height: 30px; position: relative; line-height: 30px; text-align: center; cursor: pointer; } .headerR .version .icon{ font-size:24px; } .headerR .version .languge{ width: 80px; height: auto; position: absolute; left: 50%; margin-left: -40px; background: #fff; top: 50px; padding: 10px 0px; -webkit-transition: all .5s; opacity: 0; visibility: hidden; box-shadow: 0px 0px 30px rgba(0,0,0,.1); } .headerR .version:hover .languge{ top: 40px; opacity: 1; visibility: visible; } .headerR .version .languge a{ display: block; width: 100%; font-size: 14px; line-height: 1.4; position: relative; margin-bottom: 10px; color: #333; } .headerR .version .languge a:last-child{ margin-bottom: 0px; } .headerR .version .languge a p{ position: relative; display: inline-block; z-index: 2; } .headerR .version .languge a p::before{ content: ""; width: 0; height: 5px; background: #004294; position: absolute; right: 0%; bottom: 0; transition: 0.4s; z-index: -1; opacity: .4; } .headerR .version .languge a.active p::before,.headerR .version .languge a:hover p::before{ width: 100%; right: auto; left: 0%; } .bannerSwiper{ width: 100%; height: 100vh; position: relative; } .bannerSwiper .pic{ position: absolute; width: 100%; height: 100%; overflow: hidden; -webkit-transition: all 1s; } .bannerSwiper .swiper-slide{ overflow: hidden; } .bannerBar{ width: 80%; position: absolute; left: 10%; bottom: 0%; z-index: 5; display: flex; border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; } .bannerBar .item{ width: calc(100% / 3); height: auto; padding: 35px 25px; display: flex; border-right: 1px solid rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; align-items: center; position: relative; -webkit-transition: all .5s; } .bannerBar .item:hover{ background: rgba(255, 255, 255, .1); box-shadow: 0px 0px 30px rgba(0, 0, 0, .05); } .bannerBar .item::after{ width: 0%; height: 1px; position: absolute; left: 0%; top: 0%; content: ''; background: #f20c27; } .bannerBar .item.active::after{ -webkit-transition: all 5s linear; width: 100%; } .bannerBar .item:nth-child(3){ border-right: none; } .bannerBar .item .info{ width: calc(100% - 60px); display: block; line-height: 1.6; } .bannerBar .item .info p{ font-family: BrownBlod; opacity: .7; font-size: 16px; } .bannerBar .item .info b{ font-weight: normal; font-size: 20px; } .bannerBar .item .icon{ width: 60px; height: 60px; position: relative; } .bannerBar .item .icon svg{ width: 60px; height: 60px; } .bannerBar .item .icon::after{ width: 40px; height: 40px; position: absolute; left: 10px; top: 10px; background: url(../images/bannerIcon.png) no-repeat; background-size: cover; content: ''; -webkit-transition: all .45s; } .bannerBar .item:hover .icon::after{ -webkit-transform: rotate(90deg); } .bannerBar .item .icon .svg__circle-inner { stroke: #ffffff; fill: #fff; transition: all 0.3s ease; } .bannerBar .item:hover .icon .svg__circle { stroke: #ffffff; stroke-dasharray: 75; stroke-dashoffset: 0; -webkit-animation: progress 2s ease 1 forwards; animation: progress 2s ease 1 forwards; } .bannerBar .item:hover .icon .svg__circle-inner { fill: #2b2d42; stroke: #ffffff; } @-webkit-keyframes progress { 0% { stroke-dashoffset: 75; opacity: 1; } 95%,100% { stroke-dashoffset: 0; opacity: 1; } } .logo{ width: 230px; height: auto; position: relative; display: block; } .logo img:nth-child(2){ position: absolute; width: 100%; left: 0%; top: 0%; opacity: 0; } .nav{ width: calc(100% - 600px); } .nav ul{ width: 100%; display: flex; justify-content: space-between; } .nav ul li{ width: calc(100% / 7); height: auto; position: relative; } .nav ul li .firstLab{ width:100%; height: auto; line-height: 25px; text-align: center; font-size: 18px; } .nav ul li .firstLab a{ padding: 30px 0px; display: block; position: relative; z-index: 2; } .nav ul li .firstLab a::after{ content: ""; width: 0; height: 4px; background: #004294; position: absolute; right: 0%; bottom: 0; transition: 0.4s; z-index: -1; } .nav ul li:hover .firstLab a::after{ width: 100%; right: auto; left: 0%; } .nav ul li a{ color: #fff; } .nav ul li .secondLab{ width: 100%; height: 315px; position: absolute; left: 0%; top: 85px; padding: 10px 0px; opacity: 0; visibility: hidden; color: #333; -webkit-transition: all .45s; } .nav ul li .secondLab a{ display: block; height: 40px; padding: 10px 0px; line-height: 20px; text-align: center; font-size: 16px; color: rgba(0, 0, 0, 0.4); -webkit-transition: all .45s; position: relative; top: 15px; opacity: 0; } .nav ul li .secondLab a .txt{ height: 20px; position: relative; overflow: hidden; } .nav ul li .secondLab a .txt p:nth-child(1){ color: #3e3e3e; -webkit-transition: all .4s; } .nav ul li .secondLab a:hover p:nth-child(1){ margin-top: -20px; } .nav ul li .secondLab a .txt p:nth-child(2){ color: #004294; } .nav ul li .secondLab a:nth-child(2){ -webkit-transition-delay: .1s; } .nav ul li .secondLab a:nth-child(3){ -webkit-transition-delay: .2s; } .nav ul li .secondLab a:nth-child(4){ -webkit-transition-delay: .3s; } .nav ul li .secondLab a:nth-child(5){ -webkit-transition-delay: .4s; } .header.open .nav ul li .secondLab a{ top: 0px; opacity: 1; } .header.open .nav ul li .secondLab a{ color: rgba(0, 0, 0, 0.4); } .nav ul li .secondLab a:hover,.header.open .nav ul li .secondLab a:hover{ color: #004294; } .jsloading { z-index: 10002; position: fixed; top: 0; left: 0; width: 12.5%; height: 100%; transform-origin: left top; will-change: auto } .jsloading:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fafafa; content: "" } .jsloading:first-child { left: 0 } .jsloading:nth-child(2) { left: 12.5% } .jsloading:nth-child(3) { left: 25% } .jsloading:nth-child(4) { left: 37.5% } .jsloading:nth-child(5) { left: 50% } .jsloading:nth-child(6) { left: 62.5% } .jsloading:nth-child(7) { left: 75% } .jsloading:nth-child(8) { left: 87.5% } .jsloading:nth-child(9) { left: 100% } .jslogo { z-index: 10003; position: fixed; top: 45%; left: 50%; width: 250px; height: auto; -webkit-transform: translate(-50%, 50%); opacity: 1; pointer-events: none } .js-loading__bar { position: absolute; bottom: -15px; left: 50%; width: 80px; margin-left: -40px; pointer-events: none } .js-loading__bar:after { -webkit-animation: loading-bar 1.4s cubic-bezier(1, 0, 0, 1) 1s infinite; -webkit-animation-fill-mode: both; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: #004294; animation: loading-bar 1.4s cubic-bezier(1, 0, 0, 1) 1s infinite; animation-fill-mode: both; content: ""; transition-property: width } @-webkit-keyframes loading-bar { 0% { right: auto; left: 0; width: 0 } 50% { width: 100% } to { right: 0; left: auto; width: 0 } } .header.open,.header.active{ background: #fff; box-shadow: 0px 0px 30px rgba(0, 0, 0, .1); } .header.open .nav ul li a,.header.active .nav ul li a{ color: #3e3e3e; } .header.open .nav ul li a:hover,.header .nav ul li a:hover{ color: #004294; } .header.open .logo img:nth-child(1),.header.active .logo img:nth-child(1){ opacity: 0; } .header.open .logo img:nth-child(2),.header.active .logo img:nth-child(2){ opacity: 1; } .header.open .headerR,.header.active .headerR{ color: #3e3e3e; } .header.open .nav ul li .secondLab{ opacity: 1; visibility: visible; -webkit-transition: all .5s; } .header::before{ width: 100%; height: 400px; position: absolute; left: 0%; top: 0px; content: ''; background: rgba(255,255,255,.7); -webkit-transition: all .5s ease; box-shadow: 0px 0px 30px rgba(0, 0, 0, .1); opacity: 0; pointer-events: none; backdrop-filter: blur(5px); } .header.open::before{ opacity: 1; } .header.open::after{ background: rgba(0, 0,0, 0.1); } .nav ul li:hover{ background: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,.1); } .nav ul li:hover .secondLab{ background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } .news{ width: 100%; height: auto; } .news ul{ display: flex; width: 100%; flex-wrap: wrap; } .news ul li{ width: 32%; position: relative; height: auto; margin-right: 2%; margin-bottom: 0vw; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.610, 0.355, 1) .3s; -webkit-transform: translateY(40px); opacity: 0; } .news ul li:nth-child(2){ -webkit-transition-delay: .4s; } .news ul li:nth-child(3){ -webkit-transition-delay: .5s; } .news ul li.animated{ -webkit-transform: translateY(0px); opacity: 1; } .news ul li a{ display: block; position: relative; border: 1px solid rgba(0, 0, 0, 0.1); padding: 25px; -webkit-transition: all .65s; } .news ul li a:hover{ background-color: #fff; box-shadow: 0px 0px 50px rgba(0, 0, 0, .1); } .news ul li a .pic{ -webkit-transform: scale(1.1); } .news ul li a:hover .pic{ -webkit-transform: scale(1); } .news ul li a:hover .name{ color: #004294; } .news ul li:nth-child(3n){ margin-right: 0%; } .news ul li .thum{ margin-bottom: 10px; } .news ul li .name{ font-size: 18px; line-height: 30px; height: 60px; margin-bottom: 10px; } .news.inner ul li .name,.news.inner ul li .des,.news.inner ul li .time{ padding: 0px 15px; } .news.inner ul li .time{ padding-bottom: 15px; } .news ul li .des{ font-size: 14px; line-height: 1.6; color: #808080; margin-bottom: 15px; } .news ul li .time{ width: 100%; display: flex; color: #808080; opacity: 0.7; font-family: BrownBlod; } .news ul li .time .icon{ margin-right: 5px; } .animateDelay10{ -webkit-transition-delay: 1s; } .moreBtn{ width: 180px; height: auto; line-height: 48px; position: relative; text-align: center; font-size: 16px; display: flex; justify-content: center; margin: 0px auto; margin-top: 3vw; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.610, 0.355, 1) .3s; -webkit-transform: translateY(40px); opacity: 0; } .moreBtn span{ position: relative; color: #004294; transition: all .5s cubic-bezier(.19, 1, .22, 1); } .moreBtn::before{ width: 100%; height: 100%; border: 1px solid #004294; content: ''; position: absolute; left: 0%; top: 0%; transition: all .5s cubic-bezier(.19, 1, .22, 1); } .moreBtn.animated{ opacity: 1; -webkit-transform: translateY(0px); } .moreBtn:hover span{ color: #fff; } .commonTitle.ct2{ display: none; } .moreBtn:hover::before{ background: #004294; box-shadow: 0px 0px 20px rgba(0, 0, 0, .1); } .moreBtn:hover span { animation: buttonHoverKey .9s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.1, .815, .235, 1.13); backface-visibility: hidden; will-change: transform; } .moreBtn:hover span:nth-child(2) { animation-delay: .02s; } .moreBtn:hover span:nth-child(3) { animation-delay: .04s; } .moreBtn:hover span:nth-child(4) { animation-delay: .06s; } @keyframes buttonHoverKey { 0% { opacity: 1; transform: translateY(0%); } 40% { opacity: 0; transform: translateY(-10%); } 40.5% { opacity: 0; transform: translateY(30%); } 100% { opacity: 1; transform: translateY(0%); } } .boxes.xinwen{ background: url(../images/news_bg.jpg) center center no-repeat; background-size: cover; } .boxes.xinpin{ background: url(../images/xinpin_bg.jpg) center center no-repeat; background-size: cover; } .producBox{ width: 100%; } .producBox ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between } .producBox ul li{ width: 32%; height: auto; position: relative; background: #004294; margin-bottom: 1.7vw; -webkit-transform: translateX(-50px); opacity: 0; -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .5s; } .producBox ul li:nth-child(2),.producBox ul li:nth-child(5){ -webkit-transform: translateX(50px); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .7s; } .producBox ul li:nth-child(4){ -webkit-transform: translateY(50px); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .4s; } .producBox ul li.animated{ opacity: 1; -webkit-transform: translateX(0px) translateY(0px); } .producBox ul li:nth-child(1){ width: 66%; } .producBox ul li a{ display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .producBox ul li a:hover .pic{ -webkit-transform: scale(1.05); } .producBox ul li a .pic{ width: 100%; height: 100%; position: relative; } .producBox ul li a .info{ padding: 35px; width: 100%; height: auto; position: absolute; left: 0%; bottom: 0%; color: #fff; z-index: 5; -webkit-transition: all .6s cubic-bezier(0.215, 0.610, 0.355, 1); } .producBox ul li a:hover .info{ bottom: 50px; } .producBox ul li a .info .name{ width: 100%; font-size: 24px; margin-bottom: 5px; } .producBox ul li a .info .des{ font-size: 16px; opacity: .7; } .producBox ul li a .more{ width: 100px; height: 35px; position: absolute; left: 35px; bottom: 0px; display: flex; align-items: center; color: #fff; z-index: 5; opacity: 0; -webkit-transition: all .6s cubic-bezier(0.215, 0.610, 0.355, 1); } .producBox ul li a:hover .more{ bottom: 35px; opacity: 1; } .producBox ul li a::before{ width: 100%; height: 70%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)); content: ''; top: auto; z-index: 1; } .producBox ul li a::after{ content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; pointer-events: none; left: 0%; top: 0%; } .producBox ul li a:hover::after{ animation: gradient-rectangle 1s 1; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } @-webkit-keyframes gradient-rectangle { 0% { -webkit-transform: scaleY(0); -webkit-transform-origin: bottom; background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6)); opacity: 1; } 100% { -webkit-transform: scaleY(1); -webkit-transform-origin: top; background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6)); opacity: 0; } } .boxes.kehu{ background: url(../images/kehu_bg.jpg) center center/cover no-repeat; } .idear_list{ width: 100%; margin-top: 5vw; } .idear_list ul{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .idear_list ul li{ width: calc(100% / 3); position: relative; padding: 0px 2.5%; } .idear_list ul li::after{ width: 1px; height: 100%; position: absolute; right: 0%; top: 0%; content: ''; background: rgba(0, 0, 0, 0.05); } .idear_list ul li:last-child::after{ display: none; } .idear_list ul li .icon{ width: 80px; height: auto; margin: 0px auto; margin-bottom: 15px; } .idear_list ul li .icon img{ -webkit-transform: scale(0); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .5s; } .idear_list ul li .icon.animated img{ -webkit-transform: scale(1); } .idear_list ul li .name{ text-align: center; font-size: 30px; position: relative; margin-bottom: 15px; overflow: hidden; } .idear_list ul li .name p{ -webkit-transform: translateY(100%); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .7s; } .idear_list ul li .name.animated p{ -webkit-transform: translateY(0%); } .idear_list ul li .line{ width: 0px; height: 3px; position: relative; margin: 0px auto; background: #004294; margin-bottom: 15px; -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) 1s; } .idear_list ul li .line.animated{ width: 30px; } .idear_list ul li .des{ width: 100%; height: auto; font-size: 16px; line-height: 1.7; text-align: center; -webkit-transform: translateY(20px); opacity: 0; -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) 0.8s; } .idear_list ul li .des.animated{ opacity: 1; -webkit-transform: translateY(0px); } .boxes.about{ padding: 0px; } .footer{ position: fixed; background: #f9f9f9; padding-top: 50px; padding-bottom: 10px; bottom: 0px; width: 100%; } .last_boxes{ margin-bottom: 450px; box-shadow: 0px 20px 20px rgba(0,0,0,.05); position: relative; z-index: 2; } .footerT{ width: 100%; position: relative; margin-bottom: 30px; } .footerLeft{ width: 350px; } .footerCenter{ width: calc(100% - 700px); } .footerCenter ul li{ width: calc(100% / 6); } .footerCenter ul li a{ display: block; width: 100%; text-align: center; line-height: 40px; position: relative; font-size: 14px; color: rgba(0, 0, 0, 0.5); } .footerCenter ul li a:first-child{ color: rgba(0, 0, 0, 1); font-weight: bold; font-size: 16px; } .footerCenter ul li a:hover{ color: #004294; } .footerRight{ width: 130px; text-align: center; font-size: 14px; } .footerRight p{ color: rgba(0, 0, 0, 0.4); margin-top: 10px; font-size: 12px; } .footerLogo{ width: 230px; margin-bottom: 15px; } .address{ width: 100%; position: relative; } .address ul li{ width: 100%; display: flex; position: relative; margin-bottom: 10px; } .address ul li .icon{ width: 30px; height: 30px; background: #004294; color: #fff; line-height: 30px; text-align: center; border-radius: 50%; } .address ul li .txt{ width: calc(100% - 35px); margin-left: 5px; line-height: 25px; padding: 2.5px 0px; } .address ul li .txt p{ color: rgba(0, 0, 0, 0.6); font-size: 14px; } .address ul li .txt a{ font-family: BrownBlod; font-size: 28px; display: block; margin-top: 5px; color: rgba(0, 0, 0, 0.6); } .copyright{ width: calc(100% - 130px); display: flex; color: rgba(0, 0, 0, 0.3); font-size: 12px; } .copyright a{ margin-left: 10px; color: rgba(0, 0, 0, 0.3); } .shutime{ color: rgba(0, 0, 0, 0.3); font-size: 12px; } .copyright a:hover,.shutime:hover{ color: rgba(0, 0, 0, 0.8); } .footerB{ line-height: 25px; color: rgba(0, 0, 0, 0.3); } .boxes.yuanjing{ background: #051652 url(../images/custorBg.jpg) center/cover no-repeat; } .boxVideo{ width:50%; height: auto; position: relative; margin: 0px auto; mix-blend-mode: screen; } .boxVideo video{ display: block; width: 100%; object-fit: cover; background: transparent; } .sz_left{ width: 100%; height: auto; position: absolute; color: #fff; } .sz_left .name{ width: 100%; margin-bottom: 3vw; } .sz_left .name b{ display: block; font-size: 30px; margin-bottom: 10px; font-weight: normal; } .sz_left .name p{ font-size: 16px; opacity: .7; } .sz_left.top{ top: 0%; } .sz_left.bottom{ bottom: 0%; display: flex; flex-wrap: wrap; direction: rtl; } .sz_list{ width: 30%; justify-content: initial; perspective: 500px; perspective-origin: center; } .sz_list li{ width: 30%; margin-bottom: 20px; margin-right: 5%; opacity: 0; animation: rotate 7s ease-out infinite; } .mproBox{ display:none; } .sz_list li:nth-child(2n){ animation: rotate 7s 2.5s ease-out infinite; } .sz_list li:nth-child(4n){ animation: rotate 8s 1.5s ease-out infinite; } .sz_list li:nth-child(5n){ animation: rotate 5s 0.5s ease-out infinite; } .sz_list li:nth-child(6n){ animation: rotate 6s ease-out infinite; } @keyframes rotate { 0% { transform: translate3D(0, 0, 200px); opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; transform: translate3D(0, 0, -200px); } } .sz_list li:nth-child(3n){ margin-right: 0%; } .sz_list li .pic{ background-size: contain; } .zl2{ direction: initial; } .arrivalBox{ width:100%; margin-bottom: 10vw; display: flex; justify-content: space-between; } .arLeft{ width:30%; position: relative; } .arLeft .moreBtn{ margin-left: 0px; } .arCenter{ width:45%; position: relative; perspective: 500px; } .arCenter img{ opacity: 0; -webkit-transform: translateY(50px); } .arCenter.animated img{ opacity: 1; -webkit-transform: translateY(0px); -webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .arRight{ width: 25%; position: relative; display: flex; flex-wrap: wrap; padding-left: 25px; } .arRight .arLabel{ position: relative; width: 100%; } .arRight .arLabel .dot{ width: 10px; height: 10px; position: absolute; left: -30px; top: 8px; content: ''; background: #004294; border-radius: 50%; } .arRight .arLabel .dot::after{ width: 10px; height: 10px; position: absolute; left: -1px; top: -1px; border: 1px solid #004294; border-radius: 50%; content: ''; -webkit-animation: scaleAnimate 1s linear infinite; } @-webkit-keyframes scaleAnimate { 0% { -webkit-transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(2); opacity: 0; } } .arRight::after{ width: 1px; height: 100%; position: absolute; left: 0%; top: 10px; content: ''; background: rgba(0, 0, 0, .1); } .arRight.active{ display: flex; flex-wrap: wrap; } .arRight .info{ position: relative; width: 100%; } .arRight .info .name{ font-size: 18px; line-height: 25px; position: relative; margin-bottom: 5px; } .arRight .info .des{ width: 100%; font-size: 16px; line-height: 1.7; color: #515151; } .arLeft .name{ margin-bottom: 1vw; position: relative; } .arLeft .name .p{ font-size:14px; height: 20px; line-height: 20px; } .arLeft .name p{ -webkit-transform: translateY(100%); } .solu_detail .singePage img{ width: 60%; } .arLeft .name.animated p{ -webkit-transform: translateY(0%); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .3s; } .arLeft .name.animated .b p{ -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .5s; } .arLeft .name .p,.arLeft .name .b{ overflow: hidden; } .arLeft .name .b{ font-size: 32px; display: block; font-weight: normal; height: auto; line-height: 40px; } .arLeft .des{ width: 100%; height: auto; font-size: 16px; line-height: 2; color: #515151; min-height: 224px; -webkit-line-clamp: 7; -webkit-transition: all 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) .5s; opacity: 0; -webkit-transform: translateY(30px); } .arLeft .des.animated,.arprolist.animated{ -webkit-transform: translateY(0%); opacity: 1; } .arprolist{ position: relative; margin-top: 2vw; -webkit-transition: all 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) .5s; opacity: 0; -webkit-transform: translateY(30px); } .arprolist ul{ flex-wrap: wrap; display: flex; width: 100%; } .arprolist ul li{ width: 33%; cursor: pointer; -webkit-transition: all .5s; opacity: .4; } .arprolist ul li img{ -webkit-transition: all .5s; opacity: 0.5; } .arprolist ul li:hover,.arprolist ul li.active{ opacity: 1; } .arprolist ul li:hover img,.arprolist ul li.active img{ opacity: 1; } .newsTop{ width: 100%; display: flex; justify-content: space-between; align-items: center; } .commonTitle.left{ text-align: left; } .newsNav{ width: auto; display: flex; } .newsNav a{ display: block; padding: 10px 0px; font-size: 18px; position: relative; margin-left: 25px; -webkit-transition: all .5s; } .newsNav a::after{ width: 0px; height: 3px; position: absolute; left: 50%; margin-left: 0px; bottom: 0px; content: ''; background: #004294; border-radius: 5px; -webkit-transition: all .5s; } .newsNav a:hover,.newsNav a.active{ color: #004294; } .newsNav a:hover::after,.newsNav a.active::after{ width: 20px; margin-left: -10px; } .news.inner ul li a{ padding: 0px; border: none; } .news.inner ul li{ margin-bottom: 2vw; } .news.inner{ margin-bottom: 3vw; } .boxes.hr{ background: url(../images/hrBg.jpg) center/cover no-repeat; } .hr_list{ width: 100%; } .hr_list li{ width: 23.5%; margin-right: 2%; position: relative; overflow: hidden; } .hr_list li .thum::before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: block; margin: auto; background-color: #dfe9f8; content: ""; -webkit-transition-delay: .2s; -webkit-transition-timing-function: 1s cubic-bezier(.55,.085,.68,.53); -webkit-transition-duration: 1.3s; -webkit-transform: scaleY(1); -webkit-transform-origin: top; } .hr_list li.animated .thum::before{ -webkit-transform: scaleY(0); transform: scaleY(0); } .hr_list li .pic{ -webkit-transition-timing-function: .4s cubic-bezier(.55,.085,.68,.53); -webkit-transition-duration: 1.3s; -webkit-transform: translateY(100%); -webkit-transform-origin: left top; } .hr_list li.animated .pic{ -webkit-transform: translateY(0); transform: translateY(0); } .hr_list li .thum{ z-index: 2; -webkit-transition-timing-function: .4s cubic-bezier(.55,.085,.68,.53); -webkit-transition-duration: 1.3s; -webkit-transform: translateY(100%); -webkit-transform-origin: left top; } .hr_list li:nth-child(2) .thum{ -webkit-transition-delay: .1s; } .hr_list li:nth-child(3) .thum{ -webkit-transition-delay: .2s; } .hr_list li:nth-child(4) .thum{ -webkit-transition-delay: .3s; } .hr_list li.animated .thum{ -webkit-transform: translateY(0%); transform: translateY(0%); } .hr_list li:nth-child(4n){ margin-right: 0%; } .hr_list li .info{ position: absolute; left: 0%; bottom: 0%; width: 100%; padding: 35px; color: #fff; z-index: 2; } .hr_list li .thum::after{ width: 100%; height: 70%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)); content: ''; top: auto; z-index: 1; } .hr_list li .name{ position: relative; margin-bottom: 15px; } .hr_list li .name b{ font-weight: normal; font-size: 24px; display: block; margin-bottom: 5px; } .hr_list li .name p{ font-family: BrownBlod; } .hr_list li .des{ width: 100%; font-size: 16px; line-height: 1.5; min-height: 48px; } .join_list{ width: 100%; position: relative; } .join_list ul li{ width: 100%; position: relative; margin-bottom: 1vw; background-color: #fff; box-shadow: 0px 0px 30px rgba(0, 0, 0, .1); opacity: 0; -webkit-transform: translateY(50px); -webkit-transition: all 1.3s cubic-bezier(0.215, 0.610, 0.355, 1) .3s; } .join_list ul li.animated{ opacity: 1; -webkit-transform: translateY(0px); } .join_list ul li .top{ position: relative; width: 100%; display: flex; justify-content: space-between; font-size: 18px; cursor: pointer; -webkit-transition: all .5s; } .join_list ul li.active .top{ background: #004294; color: #fff; } .join_list ul li .top .name{ text-align: left; padding:25px 35px; width: 40%; } .join_list ul li .top .cate{ width: 200px; text-align: center; padding:25px 15px; position: absolute; left: 50%; margin-left: -100px; } .join_list ul li .top .place{ width: 200px; text-align: right; padding:25px 35px; } .join_list ul li .bottom{ width: 100%; padding: 25px 35px; display: none; flex-wrap: wrap; justify-content: space-between; } .join_list ul li .left,.join_list ul li .right{ width: 100%; } .join_list ul li .bottom .name{ font-size: 18px; line-height: 40px; } .join_list ul li .bottom .des{ width: 100%; line-height: 2; font-size: 16px; } .join_list ul li .email{ width: 100%; font-size: 16px; color: #004294; line-height: 2; margin-top: 25px; } .vr_box{ width: 40%; position: relative; z-index: 2; } .vr_box .pic{ height: 100%; } .about_box{ width: 45%; margin-right: 10%; padding: 5% 5% 5% 0%; position: relative; } .logoBg{ width: 50%; position: absolute; left: 45%; top: 40%; } .about_box .singePage b{ font-size: 18px; display: block; margin-bottom: 15px; } .since{ width: auto; position: absolute; right: 0%; top: 20%; writing-mode: tb-rl; display: flex; font-family: BrownBlod; text-transform: uppercase; font-size: 2vw; } .since b{ color: #004294; margin-bottom: 0.5vw; } .vr_btn{ width: 100px; height: auto; position: absolute; left: 50%; top:30%; margin-left: -50px; -webkit-transform: translate(-50%, -50%); opacity: 1; cursor: pointer; } .vr_btn:hover{ opacity: 1; } .vr_btn span{ width: 0px; height: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff; content: ''; position: absolute; left: 50%; margin-left: -8px; top: 30%; } .vr_btn p{ display: block; width: 100%; text-align: center; color: #fff; position: absolute; top: 50%; } .vr_btn img{ -webkit-animation: rotateAnimate 5s linear infinite; } .boxes.culture{ height: auto; background: url(../images/cultureBg.jpg) center/cover no-repeat; color: #fff; } .boxes.history{ height: auto; background: url(../images/historyBg.jpg) center/cover no-repeat; overflow: hidden; } .hisSwiper .swiper-wrapper::after{ width: 1000%; height: 1px; left: 0%; position: absolute; top: 50%; content: ''; pointer-events: none; background: rgba(0, 0, 0, .05); display: none; } .swiper-pagination-bullet-active{ background: #051652; } .culBg img{ object-fit: cover; width: 100%; height: 100%; position: relative; top: 0%; } .hisSwiper .swiper-slide:nth-child(even) .dot{ bottom: auto; top: 41px; } @-webkit-keyframes rotateAnimate{ 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); } } @-webkit-keyframes rotateAnimate2{ 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(-360deg); } } .cul_list{ width: 60%; height: 40vh; display: none; } .cul_list ul{ display: none; width: 100%; } .cul_list ul.active{ display: flex; flex-wrap: wrap; } .cul_list li{ width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2vw; } .cul_list li .name{ font-size: 30px; width: 100px; position: relative; } .cul_list li .name::after{ width: 1px; height: 80%; position: absolute; right: 0%; top: 10%; content: ''; background: rgba(255, 255, 255, .2); } .cul_list li .des{ width: calc(100% - 150px); font-size: 16px; line-height: 2; } .cul_list ul:nth-child(2) li .des{ width: 100%; } .cul_list li .title{ width: 100%; font-size: 30px; margin-bottom: 10px; } .culNav{ width: 100%; /*border-bottom: 1px solid rgba(255, 255, 255, .1);*/ margin-top: 5vw; } .culNav ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .culNav ul li{ width: 30%; padding-right: 0px; padding-bottom: 0px; position: relative; cursor: pointer; height: auto; background: rgba(255,255,255,.3); padding: 35px; border-radius: 10px; backdrop-filter: blur(5px); } .culNav ul li .top{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 3vw; } .culNav ul li .info{ width: 100%; font-size: 16px; } .culNav ul li .name{ width: 100%; text-align: center; } .culNav ul li .info .ibox .title{ font-size: 18px; font-weight: bold; } .culNav ul li .info .ibox{ width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 5px; margin-bottom: 5px; text-align: center; line-height: 1.7; } .culNav ul li .info .ibox:last-child{ border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } .culNav ul li:hover .icon{ -webkit-animation: swing2 2s infinite; } .jszb .singePage img{ width: auto; display: inline-block; } @-webkit-keyframes swing2 { 10% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 20% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 30% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 40% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .culNav ul li::after{ width: 0%; height: 5px; position: absolute; right: 0%; bottom: 0%; content: ''; background: #fff; -webkit-transition: all .5s; display: none; } .culNav ul li.active::after,.culNav ul li:hover::after{ width: 100%; right: auto; left: 0%; } .culNav ul li .icon{ width: 60px; margin-bottom: 10px; } .culNav ul li .name{ font-size: 24px; font-weight: bold; } .hisSwiper{ display: flex; flex-wrap: wrap; } .hisSwiper .swiper-button-next,.hisSwiper .swiper-button-prev{ position: relative; top: 0%; width: 50px; height: 50px; color: #004294; border: 1px solid #004294; border-radius: 5px; left: auto; right: auto; margin-top: 20px; } .hisSwiper .swiper-button-next.swiper-button-disabled,.hisSwiper .swiper-button-prev.swiper-button-disabled{ opacity: .35; cursor: auto; pointer-events: none; } .hisSwiper .swiper-button-next:hover,.hisSwiper .swiper-button-prev:hover{ background-color: #004294; color: #fff; } .swiper-button-next:after, .swiper-button-prev:after{ font-size: 16px; } .hisSwiper .swiper-button-next{ margin-left: 15px; } .hisSwiper .swiper-wrapper{ margin-bottom: 1vw; } .hisSwiper .swiper-slide{ background: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,.1); /* min-height: 150px; border-bottom: 1px solid rgba(0, 0, 0, .1); */ } /* .hisSwiper .swiper-slide:nth-child(even){ border-bottom: none; margin-top: 149px; padding-top: 0px; border-top: 1px solid rgba(0, 0, 0, .1); } */ .hisSwiper .swiper-slide .dot{ width: 10px; height: 10px; position: absolute; left: 10px; bottom: -1px; content: ''; background: #004294; border-radius: 50%; display: none; } .hisSwiper .swiper-slide .dot::after{ width: 10px; height: 10px; position: absolute; left: -1px; top: -1px; border: 1px solid #004294; border-radius: 50%; content: ''; -webkit-animation: scaleAnimate 1s linear infinite; background: #004294; } .hisSwiper .swiper-slide .year{ width: 100%; display: flex; align-items: flex-end; line-height: 1; margin-bottom: 0px; background: #004294; color: #fff; padding: 15px; } .hisSwiper .swiper-slide .year p{ font-family: Brown; font-size: 24px; } .hisSwiper .swiper-slide .year span{ margin-left: 5px; font-size: 16px; font-weight: bold; margin-bottom: 4px; } .hisSwiper .swiper-slide .des{ font-size: 16px; line-height: 25px; width: 100%; padding: 15px; min-height: 205px; } .boxes.contact{ padding: 0px; } .contact .left{ width: 50%; } .contact .right{ width: 50%; padding: 5% 100px; } .contact ul li{ width: 100%; display: flex; position: relative; margin-bottom: 15px; } .contact ul li .icon{ width: 50px; height: auto; } .contact ul li .info{ width: calc(100% - 60px); margin-left: 10px; border-bottom: 1px solid rgba(0, 0, 0, .05); padding-bottom: 15px; } .contact ul li .info b{ font-size: 16px; display: block; font-weight: normal; color: #004294; margin-bottom: 5px; } .contact ul li .info p{ font-size: 16px; } .contact ul li:last-child .info{ border-bottom: none; } .con_wechat{ width: 150px; text-align: center; } .con_wechat p{ opacity: .4; } .boxes.custom{ background:#fff url(../images/cusBg.png) center bottom/cover no-repeat; padding-bottom: 10vw; } .earth_box{ width: 100%; display: flex; justify-content: space-between; position: relative; margin-top: 3vw; } .earth_box .left,.earth_box .right{ width: 30%; } .earth_box .center{ width: 40%; position: absolute; left: 30%; top: 50%; -webkit-transform: translateY(-50%); } .earth_box .center>img{ position: absolute; width: 100%; height: auto; left: 0%; top: 0%; } .earth_box .center>img:nth-child(3){ -webkit-animation: rotateAnimate2 10s linear 0s infinite; } .earth_box .center>img:nth-child(1){ position: relative; -webkit-animation: rotateAnimate 20s linear 0s infinite; } .earth_box .center .number{ width: 100%; height: auto; text-align: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,.5); font-size: 2vw; line-height: 1.2; } .earth_box .center .number .f{ font-family: Brown; } .earth_box .center .number .f span{ font-size: 4vw; } .boxes.pdf{ background:url(../images/pdfBg.jpg) center/cover no-repeat; } .pdf_list{ width: 100%; height: auto; position: relative; } .pdf_list ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } .pdf_list ul li{ width: 48%; height: auto; position: relative; background: #fff; padding: 25px; display: flex; justify-content: space-between; margin-bottom: 3vw; } .pdf_list ul li .img{ width: 30px; } .pdf_list ul li .info{ width: calc(100% - 40px); } .pdf_list ul li .info a{ display: inline-flex; background: rgba(0, 0, 0, .05); padding: 5px 10px; font-size: 12px; border-radius: 50px; color: rgba(0, 0, 0, 0.4); } .pdf_list ul li .info .name{ margin-bottom: 10px; font-size: 16px; } .pdf_list ul li .info a .txt{ margin-left: 5px; } .pdf_list ul li .info a:hover{ background: #004294; color: rgba(255, 255, 255, 1); } .after_box{ display: flex; flex-wrap: wrap; justify-content: space-between; } .after_box .left{ width: 50%; padding-top: 45px; } .after_box .right{ width: 50%; background: center/cover no-repeat; } .after_box ul li{ width: 100%; display: flex; margin-bottom: 45px; align-items: center; } .after_box ul li .icon{ width: 60px; line-height: 60px; height: 60px; background: #004294; text-align: center; color: #fff; border-radius: 50%; font-size: 36px; } .after_box ul li .info{ width: calc(100% - 85px); margin-left: 25px; } .after_box ul li .info b{ font-weight: normal; display: block; font-size: 20px; margin-bottom: 10px; line-height: 1; } .after_box ul li .info p{ font-size: 16px; line-height: 1; } .boxes.after{ background:url(../images/afterBg.jpg) center/cover no-repeat; } .product_nav{ width: 100%; top: -10vw; position: relative; z-index: 2; } .product_nav .w1400{ display: flex; justify-content: center; height: 150px; background: #fff; box-shadow: 0px 0px 30px rgba(0, 0, 0, .1); border-radius: 10px; } .product_nav a:first-child{ border-radius: 10px 0px 0px 10px; } .product_nav a:last-child{ border-radius: 0px 10px 10px 0px; } .product_nav a{ display: flex; width: 20%; position: relative; text-align: center; flex-wrap: wrap; justify-content: center; align-content: center; background: #fff; -webkit-transition: all .4s; } .product_nav a::after{ width: 1px; height: 70%; position: absolute; right: 0%; top: 15%; content: ''; background: rgba(0, 0, 0, .05); } .product_nav a .icon{ width: 80px; height: 80px; position: relative; background: url(../images/pro_icon.png) no-repeat; margin-bottom: 5px; -webkit-transition: all .4s; } .product_nav a:hover,.product_nav a.active{ background-color: #004294; color: #fff; } .product_nav a:hover .icon,.product_nav a.active .icon{ background-position: 0px -80px; } .product_nav a:nth-child(2) .icon{ background-position: -80px 0px; } .product_nav a:hover:nth-child(2) .icon,.product_nav a.active:nth-child(2) .icon{ background-position: -80px -80px; } .product_nav a:nth-child(3) .icon{ background-position: -160px 0px; } .product_nav a:hover:nth-child(3) .icon,.product_nav a.active:nth-child(3) .icon{ background-position: -160px -80px; } .product_nav a:nth-child(4) .icon{ background-position: -240px 0px; } .product_nav a:hover:nth-child(4) .icon,.product_nav a.active:nth-child(4) .icon{ background-position: -240px -80px; } .product_nav a:nth-child(5) .icon{ background-position: -320px 0px; } .product_nav a:hover:nth-child(5) .icon,.product_nav a.active:nth-child(5) .icon{ background-position: -320px -80px; } .product_nav a .txt{ width: 100%; height: 25px; position: relative; text-align: center; font-size: 16px; overflow: hidden; line-height: 25px; } .products{ width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 8vw; } .products:last-child{ margin-bottom: 0vw; } .products a{ width: 23.5%; position: relative; display: block; margin-right: 2%; margin-bottom: 3vw; } .products a:nth-child(2n),.news ul li:nth-child(2n){ -webkit-transition-delay: .5s; } .products a:nth-child(3n),.news ul li:nth-child(3n){ -webkit-transition-delay: .7s; } .products a:nth-child(4n),.news ul li:nth-child(4n){ -webkit-transition-delay: .6s; } .products a:nth-child(4n){ margin-right: 0%; } .products a .thum{ margin-bottom: 25px; } .products a .name{ text-align: center; font-size: 16px; line-height: 1.4; } .products a .thum::before{ width: 100%; height: 60%; position: absolute; left: 0%; top: 0%; background: linear-gradient(-180deg, #5db4e7, #aeffff); content: ''; border-radius: 10px 10px 0px 0px; -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); } .products a:hover .thum::before{ height: 100%; } .products a .thum img{ position: relative; -webkit-transition: all 1s; } .products a:hover .name{ color: #004294; } .products a:hover .thum img{ -webkit-transform: scale(1.05) translateY(-25px); } .prodetail{ position: relative; background-color: #7997b8; z-index: 2; padding-bottom: 5vw; min-height: 100vh; } .prodetail::before{ width: 100%; height: 150vh; z-index: -1; position: absolute; left: 0%; top: 0%; content: ''; background: url(../images/detailBg.jpg?v=2023) top center/cover no-repeat; } .pdTop{ width: 80%; margin: 0px auto; position: relative; max-width: 1400px; padding-top: 200px; color: #fff; margin-bottom: 5vw; } .pdTop .proImg{ width: 50%; margin-left: 50%; } .pdTop .pdName{ position: absolute; left: 0%; top: 250px; width: 100%; } .pdTop .pdName .pdEn{ font-size: 5vw; text-transform: uppercase; position: relative; overflow: hidden; font-family: BrownBlod; margin-bottom: 3vw; } .pdTop .pdName .name{ font-size: 2vw; position: relative; overflow: hidden; line-height: 1.2; margin-bottom: 2vw; } .pdTop .pdName .name .t1{ font-family: BrownBlod; } .gl_info{ width: 50%; font-size: 16px; line-height: 2; display: inline-block; color: #fff; border-top: 1px solid rgba(255,255,255,1); padding-top: 1vw; margin-bottom: 2vw; } .backPage{ width: 55px; height: auto; line-height: 53px; display: block; text-align: center; cursor: pointer; font-size: 20px; } .backPage::before{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; border: 1px solid #fff; content: ''; } .backPage:hover::before{ background: #fff; } .backPage span{ color: #fff; position: relative; } .backPage:hover span{ color: #004294; } .pdBottom{ background-color: #fff; padding: 100px; border-radius: 5px; } .gl_box{ } .jszb{ margin-bottom: 5vw; } .majorlist{ position: relative; } .majorlist ul{ width: 100%; display: flex; flex-wrap: wrap; } .majorlist ul li{ width: 30%; position: relative; margin-bottom: 0.5vw; margin-right: 5%; } .majorlist ul li:nth-child(3n){ margin-right: 0%; } .majorlist ul li .name{ font-size: 20px; color: #004294; margin-bottom: 0px; position: relative; padding-left: 15px; line-height: 30px; } .majorlist ul li .name::after{ width: 8px; height: 8px; position: absolute; left: 0px; top: 11px; content: ''; background: #004294; border-radius: 50%; } .majorlist ul li .des{ font-size: 16px; line-height: 1.7; padding-left: 15px; } .same_list ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .same_list ul li{ width: 32%; position: relative; margin-right: 2%; border: 1px solid rgba(0,0,0,.05); border-radius: 7px; } .same_list ul li:nth-child(3n){ margin-right: 0%; } .same_list ul li a{ display: block; width: 100%; height: auto; position: relative; } .same_list ul li a .thum{ padding: 20px; } .same_list ul li a .name{ text-align: center; font-size: 16px; line-height: 1.4; padding: 20px; padding-top: 0; position: relative; color: #fff; } .same_list ul li a img{ -webkit-transition: all 1s } .same_list ul li a:hover img{ -webkit-transform: scale(1.05); } .same_list ul li a::before{ width: 100%; height: 40%; position: absolute; left: 0%; bottom: 0%; content: ''; background: #004294; border-radius: 0px 0px 7px 7px; -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); } .same_list ul li a:hover::before{ height: 100%; border-radius: 7px; } .vlightBox{ width: 100%; height: 100vh; position: fixed; left: 0%; top: 0%; z-index: 200; background: rgba(255, 255, 255, .5); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; overflow: hidden; -webkit-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1); visibility: hidden; opacity: 0; } .vlightBox.active{ opacity: 1; visibility: visible; } .inner_player { display: flex; justify-content: center; align-items: center; width: 70%; height: 100%; overflow: hidden; } .inner_player video{ display: block; width: 100%; height: auto; } .pro_close{ width: 50px; height: 50px; position: absolute; right: 15px; top: 15px; background: #004294; color: #fff; line-height: 50px; text-align: center; border-radius: 50%; cursor: pointer; -webkit-transform: rotate(0deg); -webkit-transition: all .35s; } .pro_close:hover{ -webkit-transform: rotate(45deg); } .solution{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 3vw; } .solution .thum{ width: 45%; } .solution .info{ width: calc(55% - 50px); } .solution .info .name{ font-size: 2vw; margin-bottom: 0.5vw; } .solulist ul{ width: 100%; display: flex; flex-wrap: wrap; } #nav-icon2 span{ background: #3e3e3e; } .solulist ul li{ width: 49%; position: relative; margin-right: 2%; margin-bottom: 1.5vw; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.610, 0.355, 1) .3s; -webkit-transform: translateY(40px); opacity: 0; } .solulist ul li.animated { -webkit-transform: translateY(0px); opacity: 1; } .solulist ul li:nth-child(2n) { -webkit-transition-delay: .5s; margin-right: 0%; } .solulist ul li:nth-child(3n){ -webkit-transition-delay: .7s; } .solulist ul li:nth-child(4n){ -webkit-transition-delay: .6s; } .solulist ul li a{ display: block; position: relative; } .solulist ul li a .thum::after{ width: 100%; height: 70%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)); content: ''; top: auto; } .solulist ul li a .name{ width: 100%; height: auto; font-size: 18px; text-align: center; padding: 15px; } .solulist ul li:hover .pic{ -webkit-transform: scale(1.05); } .case_top{ width: 90%; height: auto; position: relative; background: #fff; padding:50px 100px; border-radius: 5px; margin-left: 5%; margin-top: 50px; } .prodetail{ overflow: hidden; } .backPage.so{ margin-left: 5%; margin-top: 200px; } .case_top .singePage{ margin-bottom: 5vw; } @media screen and (max-width: 1500px) { .footerCenter { width: calc(100% - 600px); } .nav { width: calc(100% - 500px); } .headerR .hottel p { font-size: 20px; } .headerR .hottel .icon { width: 30px; height: 30px; font-size: 28px; } .headerR .hottel{ padding-right: 5px; margin-right: 5px; width: calc(100% - 35px); } .headerR { width: 200px; } .logo { width: 200px; } } @media screen and (max-width: 1400px) { .nav ul li .firstLab{ font-size: 16px; } .nav ul li .secondLab a{ font-size: 14px; } } @media screen and (max-width: 1366px) { .address ul li .txt p{ font-size: 14px; } .footerCenter ul li a{ font-size: 14px; line-height: 40px; } .footerCenter { width: calc(100% - 550px); } .footerRight p{ font-size: 12px; } .footerB{ font-size: 12px; } .nav { width: calc(100% - 400px); } .logo { width: 160px; } } @media screen and (max-width: 1024px) { .bannerSwiper { height: 70vh; } .bannerBar .item .info p{ display: none; } .bannerBar .item{ padding: 10px 15px; } .bannerBar .item .info b{ font-size: 16px; } .bannerBar .item .icon{ width: 40px; height: 40px; } .bannerBar .item .icon svg { width: 40px; height: 40px; } .bannerBar .item .icon::after{ width: 30px; height: 30px; } .footerCenter{ display: none; } .footerLeft{ width: calc(100% - 200px); } .address ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .address ul li{ width: 48%; } .footerT{ display: flex; align-items: center; } .producBox ul li a .info .name,.sz_left .name b{ font-size: 2vw; } .arLeft .name .b{ font-size: 2.5vw; } .moreBtn,.sz_left .name p{ font-size: 14px; } .idear_list ul li .des,.producBox ul li a .info .des{ font-size: 14px; } .news ul li .name{ font-size: 16px; line-height: 25px; height: 50px; } .news ul li .time{ font-family: auto; font-size: 12px; } .producBox ul li a .info{ padding: 25px; } .product_nav a .icon{ -webkit-transform: scale(0.85); } .singePage{ font-size: 14px; } .cul_list li .des,.contact ul li .info p,.after_box ul li .info p{ font-size: 14px; } .cul_list{ width: 80%; } .culNav ul li .name{ font-size: 16px; } .contact ul li .icon{ width: 40px; } .contact ul li .info{ width: calc(100% - 50px); } .detail_top .w100,.detail_box{ width: 90%; } .dpr .sames a .title,.hr_list li .des{ font-size: 14px; } .dpr .sames a .time{ font-size: 12px; } .dpr .name{ font-size: 2vw; } .join_list ul li .top{ font-size: 16px; } } @media screen and (max-width: 900px) { .last_boxes{ margin-bottom: 0px; } .footer{ position: relative; } #nav-icon2{ display: block; } .header{ height: 60px; background: #fff; padding: 0px 5%; } .nav{ display: block; position: fixed; left: 0; top: 60px; margin-left: 0; background: rgba(0, 0, 0, .7); width: 100%; height: calc(100vh - 60px); opacity: 0; visibility: hidden; -webkit-transition: all .6s cubic-bezier(.23, 1, .32, 1); pointer-events: none; } .headerR{ margin-right: 50px; } .headerR .hottel p{ display: none; } .logo img:nth-child(1),.logo img:nth-child(1) { opacity: 1; } .logo img:nth-child(2),.logo img:nth-child(2) { opacity: 1; } .headerR{ width: auto; color: #3e3e3e; } .headerR .hottel{ padding-right: 0px; width: 25px; } .headerR .hottel::after{ display: none; } .bannerBar{ width: 40%; bottom:20px; border-bottom: none; left: 30%; justify-content: space-between; } .bannerBar .item{ padding: 0px; width: 32%; border-bottom: 2px solid rgba(255, 255, 255, 0.3); } .bannerBar .item .info,.bannerBar .item .icon{ display: none; } .bannerSwiper { height: 60vw; margin-top: 60px; } .bannerBar .item::after{ height: 2px; } .commonTitle .en,.commonTitle .cn{ font-size: 5vw; } .boxes{ padding: 15vw 0px; } .news ul li{ width: 100%; margin-right: 0%; margin-bottom: 5vw; } .news ul li a{ padding: 15px; } .arRight{ display: none; } .commonTitle{ margin-bottom: 5vw; } .producBox ul li{ width: 49%; margin-bottom: 3vw; } .producBox ul li:nth-child(1){ width: 100%; } .producBox ul li a .info .name, .sz_left .name b{ font-size: 4vw; } .producBox ul li a .info { padding: 15px; } .producBox ul li a:hover .more{ display: none; } .producBox ul li a:hover .info { bottom: 0px; } .idear_list ul li .des, .producBox ul li a .info .des{ font-size: 12px; } .boxVideo{ width: 150%; margin-left: -25%; opacity: 0; display: none; } .sz_list{ width: 50%; } .sz_left .name p{ font-size: 12px; } .kehu .commonTitle .cn{ font-size: 5vw; } .commonTitle .des{ font-size: 12px; } .idear_list ul li{ width: 50%; padding: 25px; margin-bottom: 0vw; border: 1px solid rgba(0,0,0,.05); border-radius: 0px; } .idear_list ul li:last-child{ width: 100%; border-top: none; } .idear_list ul li:first-child{ border-right: none; } .idear_list ul li::after{ display: none; } .idear_list{ margin-bottom: 5vw; } .idear_list ul li .icon{ width: 60px; margin-bottom: 10px; } .idear_list ul li .name{ font-size: 4vw; margin-bottom: 1vw; } .idear_list ul li .line{ margin-bottom: 3vw; } .idear_list ul li .line.animated { width: 15px; } .footerT{ flex-wrap: wrap; } .footerLeft{ width: 100%; margin-bottom: 3vw; } .footerLogo{ width: 160px; } .address ul li{ width: 100%; } .copyright{ flex-wrap: wrap; width: 100%; } .footerB{ line-height: 1.6; } .copyright a{ margin-left: 0px; margin-right: 10px; } .address ul li .txt a{ font-size: 6vw; } .boxes.yuanjing,.boxes.xinpin{ overflow: hidden; } .footerRight p{ margin-top: 5px; } .backTop{ display: none; } .headerR .version .icon{ font-size: 24px; } .boxes.custom{ padding-bottom: 15vw; } .pdf_list ul li{ width: 100%; padding: 15px; margin-bottom: 5vw; } .after_box .left{ width: 100%; padding-top: 0px; } .after_box ul li{ margin-bottom: 5vw; } .after_box ul li .info b{ font-size: 4vw; } .after_box ul li .info p{ line-height: 1.6; } .after_box .right{ width: 100%; height: 40vh; } .after_box ul li .info{ width: calc(100% - 60px); margin-left: 10px; } .after_box ul li .icon { width: 50px; line-height: 50px; height: 50px; font-size: 24px; } .subBanner{ margin-top: 60px; overflow: hidden; } .subBanner img{ width: 150%; margin-left: -25%; max-width: none; } .boxes.after{ overflow: hidden; } .headerR .version{ margin-left: 5px; } .nav.active{ opacity: 1; visibility: visible; pointer-events: auto; } .nav ul{ background: #fff; flex-wrap: wrap; padding: 20px 6%; } .nav ul li{ width: 100%; display: flex; border-bottom: 1px solid rgba(0, 0, 0, .05); padding: 10px 0px; } .nav ul li .firstLab{ width: 80px; } .nav ul li .firstLab a{ padding: 10px 0px; text-align: left; line-height: 20px; } .nav ul li .secondLab{ width: calc(100% - 80px); position: relative; height: auto; top: 0px; padding: 0px; opacity: 1; visibility: visible; display: flex; flex-wrap: wrap; } .nav ul li .secondLab a{ opacity: 1; padding: 10px 5px; top: 0px; height: auto; } .nav.active::after{ width: 100%; height: 1px; position: absolute; left: 0px; top: 0px; content: ''; background: rgba(0, 0, 0, .05); } .nav ul li:last-child{ border-bottom: none; } #nav-icon2{ right: 5%; } .nav ul li a{ color: #3e3e3e; } .header::before{ display: none; } .nav ul li .firstLab{ font-weight: bold; } .newsNav{ width: 100%; justify-content: center; } .newsTop{ flex-wrap: wrap; margin-bottom: 5vw; } .newsTop .commonTitle{ display: none; } .newsNav a{ margin-left: 0px; font-size: 16px; padding:10px 5px; } .solution .thum{ width: 100%; margin-bottom: 5vw; } .solution .info{ width: 100%; } .solution .info .name{ font-size: 4vw; } .solulist ul li{ width: 100%; margin-right: 0%; margin-bottom: 5vw; } .nav ul li:hover{ background: #fff; box-shadow: none; } .nav ul li .firstLab a::after{ display: none; } .vr_box { width: 100%; height: 40vh; } .logoBg{ width: 100%; position: relative; top: 0px; } .logoBg{ width: 60%; left: 20%; display: none; } .about_box{ width: 100%; margin-right: 0%; } .since{ display: none; } .commonTitle.ct2{ display: block; } .about_box .commonTitle{ display: none; } #about{ padding: 15vw 5%; } .vr_btn{ width: 70px; top: 50%; margin-left: 0px; } .about_box .singePage strong{ font-size: 16px; } .vr_btn p{ top: 60%; font-size: 12px; } .cul_list { width: 100%; height: 60vh; } .cul_list li .name { font-size: 5vw; width: 70px; } .cul_list li .des{ width: calc(100% - 80px); } .culNav ul li{ width: 100%; padding: 20px; margin-bottom: 2vw; } .culNav ul li:nth-child(n+2){ width: 49%; } .culNav ul li .icon{ width: 40px; margin-bottom: 5px; } .culNav ul li .name{ font-size: 18px; font-weight: normal; } .hisSwiper .swiper-slide .year p{ font-size: 5vw; } .hisSwiper .swiper-slide .des{ min-height: 155px; } .contact .left { width: 100%; height: 30vh; } .culNav ul li .info .ibox .title{ font-size: 16px; font-weight: normal; } .contact .right{ width: 100%; padding: 5%; } .contact .commonTitle.left{ height: auto; } .con_wechat { width: 120px; font-size: 12px; } .hisSwiper .swiper-slide{ min-height: 100px; } .hisSwiper .swiper-slide:nth-child(even) { } .hisSwiper .swiper-wrapper::after{ top: 40%; } .join_list ul li .top { font-size: 14px; } #page li{ width: 40px; height: 40px; line-height: 40px; } .news.inner ul li .name, .news.inner ul li .des, .news.inner ul li .time{ padding: 0px; } .news ul li .name{ height: auto; } .news.inner ul li{ margin-bottom: 5vw; } .news ul li a:hover { background-color: #fff; box-shadow: none; } .detail_top{ padding: 150px 0px 35px; } .detail_top .title{ font-size: 6vw; } .detail_top .info{ margin-top: 10px; } .detail_box .dpr{ display: none; } .detail_box .dpl{ width: 100%; } .detail_box{ padding: 5%; width: 100%; } .ndc_npnews .post_next, .ndc_npnews .post_prev{ width: 100%; font-size: 14px; } .ndc_npnews .post_next .icon, .ndc_npnews .post_prev .icon{ width: 50px; } .ndc_npnews .post_next .name, .ndc_npnews .post_prev .name{ width: calc(100% - 50px); } .ndc_npnews{ flex-wrap: wrap; } .ndc_npnews .post_prev{ margin-bottom: 10px; } .product_nav a .txt{ font-size: 14px; } .product_nav .w1400{ height: 80px; width: 100%; border-radius: 0px; } .product_nav{ margin-top: 0px; } .product_nav a:first-child,.product_nav a:last-child{ border-radius: 0px 0px 0px 0px; } .product_nav a .icon{ -webkit-transform: scale(1); width: 40px; height: 40px; background-size: auto 200%; margin-bottom: 0px; } .product_nav a:nth-child(2) .icon{ background-position: -40px 0px; } .product_nav a:nth-child(3) .icon{ background-position: -80px 0px; } .product_nav a:nth-child(4) .icon{ background-position: -120px 0px; } .product_nav a:nth-child(5) .icon{ background-position: -160px 0px; } .product_nav a:hover .icon, .product_nav a.active .icon { background-position: 0px -40px; } .product_nav a:hover:nth-child(2) .icon, .product_nav a.active:nth-child(2) .icon { background-position: -40px -40px; } .product_nav a:hover:nth-child(3) .icon, .product_nav a.active:nth-child(3) .icon { background-position: -80px -40px; } .product_nav a:hover:nth-child(4) .icon, .product_nav a.active:nth-child(4) .icon { background-position: -120px -40px; } .product_nav a:hover:nth-child(5) .icon, .product_nav a.active:nth-child(5) .icon { background-position: -160px -40px; } .products a{ width: 49%; margin-bottom: 5vw; } .products a:nth-child(3n){ margin-right: 2%; } .products a:nth-child(2n){ margin-right: 0%; } .products a .name{ font-size: 14px; } .hr_list li{ width: 48%; margin-bottom: 5vw; margin-right: 4%; } .hr_list li:nth-child(2n){ margin-right: 0%; } .hr_list li .info{ padding: 15px; } .hr_list li .name b{ font-size: 4vw; } .hr_list li .name{ margin-bottom: 2vw; } .join_list ul li .top .name{ padding: 20px 15px; width: 40%; } .join_list ul li .top .cate,.join_list ul li .top .place{ width: 30%; position: relative; left: 0px; margin-left: 0px; padding: 20px 5px; } .join_list ul li .top .place{ text-align: center; } .join_list ul li{ margin-bottom: 3vw; } .join_list ul li .bottom { padding: 15px 20px; } .join_list ul li .bottom .des,.join_list ul li .email{ font-size: 14px; } .mproBox{ display:block; margin-bottom: 15vw; overflow: hidden; padding-bottom: 2vw; } .arrivalBox{ display:none; } .productSwiper .img{ width: 100%; margin-left: 0%; } .productSwiper .name{ width: 100%; line-height: 1.5; margin-bottom: 10px; text-align: center; } .productSwiper .name .p{ font-size: 12px; opacity: .5; } .productSwiper .name .b{ font-size: 18px; } .productSwiper .des{ width: 100%; line-height: 1.7; font-size: 14px; -webkit-line-clamp: 4; opacity: .7; margin-bottom: 15px; } .moreBtn { width: 160px; } .productSwiper{ position: relative; padding-bottom: 20px; } .pdTop{ width: 90%; padding-top: 100px; } .pdTop .pdName { top: 0px; position: relative; } .pdTop .proImg { width: 100%; margin-left: 0%; } .gl_info{ width: 100%; margin-top: 5vw; font-size: 14px; } .pdTop .pdName .pdEn{ display: none; } .pdBottom .commonTitle .en, .pdBottom .commonTitle .cn { font-size: 4.5vw; } .pdTop .pdName .pdEn{ font-size: 4.5vw; } .pdTop .pdName .name{ font-size: 5vw; margin-bottom: 0px; } .backPage{ display: none; } .pdBottom { background-color: #fff; padding: 15vw 5%; border-radius: 5px; width: 100%; } .majorlist ul li .name{ font-size: 16px; } .majorlist ul li{ width: 50%; margin-bottom: 10px; margin-right: 0%; } .majorlist ul li .des{ font-size: 14px; } .jszb { margin-bottom: 15vw; } .same_list ul li { width: 100%; margin-right: 0%; margin-bottom: 5vw; } .case_top { width: 100%; height: auto; position: relative; background: #fff; padding: 15vw 5%; border-radius: 0px; margin-left: 0%; margin-top: 150px; } .case_top .singePage { margin-bottom: 15vw; } .prodetail{ padding-bottom: 0px; } .inner_player{ width: 94%; } .headerR .hottel{ color: #3e3e3e; } .sz_list li{ -webkit-animation: none !important; } .yuanjing .commonTitle.center{ top: 0%; position: relative; -webkit-transform: translateY(0%); margin-bottom: 5vw; } .sz_left{ position: relative; width: 100%; } .sz_list{ width: 100%; } .sz_list li{ opacity: 1; } .sz_left .name{ text-align: center; } .sz_left .name b{ margin-bottom: 0vw; } .sz_left.bottom{ margin-top: 5vw; } }