锘?rel { position: relative; } .abs { position: absolute; } .fixed { position: fixed; } .bg { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .flex { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .flex-wrap { flex-flow: wrap; } .flex-between { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inline-block { display: inline-block; } .block { display: block; } .hide { display: none; } .bold { font-weight: 700; } .txt-center { text-align: center; } .txt-left { text-align: left; } .txt-right { text-align: right; } .before { opacity: 0; visibility: hidden; } .after { opacity: 1; visibility: visible; } .font { font-family: Arial; } .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upper { text-transform: uppercase; } .middle { vertical-align: middle; } .background { background-size: contain; background-repeat: no-repeat; background-position: center center; } .hidden-xs { display: block; } .hidden-pc { display: none; } .box-container { width: 15.36rem; margin: 0 auto; } .w1200 { width: 1200px; margin: 0 auto; } .box-container-fluid { width: 100%; margin: 0 auto; } .medium-box-container { width: 80%; margin: 0 auto; } body { font-size: 16px; overflow-x: hidden; } .rl { writing-mode: tb-rl; writing-mode: vertical-lr; } @font-face { font-family: "hr"; src: url('../fonts/HarmonyOS_Sans_SC_Regular.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: "hb"; src: url('../fonts/HarmonyOS_Sans_SC_Bold.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: "hl"; src: url('../fonts/HarmonyOS_Sans_SC_Light.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: "mb"; src: url('../fonts/MontserratBold.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: "mr"; src: url('../fonts/Montserrat-Regular.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: "ml"; src: url('../fonts/Montserrat-ExtraLight-5.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: "mm"; src: url('../fonts/Montserrat-Medium.otf'); font-weight: normal; font-style: normal; } .pic { font-size: 0; overflow: hidden; display: block; width: 100%; } .pic img { width: 100%; display: block; transition: transform 0.8s ease; -webkit-transition: transform 0.8s ease; -moz-transition: transform 0.8s ease; -ms-transition: transform 0.8s ease; -o-transition: transform 0.8s ease; } .pic img.phone { display: none; } .phone-nav { display: none; } .link { font-size: 0; margin-bottom: 0.2rem; } .link a { position: relative; font-size: 14px; margin-right: 0.24rem; display: inline-block; color: #999; vertical-align: top; line-height: 24px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .link a:hover { color: #fff; } .link a:last-child { margin-right: 0; } .content, .desc { text-align: justify; } .content { color: #666; line-height: 0.3rem; } .content img, .content input[type="image"] { max-width: 100%; height: auto!important; display: block; margin: 16px auto 16px; } .swiper-box { position: relative; } :root { --fs16: 16px; } .header-wrapper { position: fixed; left: 0; top: 0; z-index: 30; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .header-wrapper.shadow { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .header-wrapper.active { transform: translate(0, -1.2rem); } .header-wrapper.on { background-color: #fff; } .header-wrapper.on .logo-box img.init { display: none; } .header-wrapper.on .logo-box img.on { display: block; } .header-wrapper.on .pc-nav-box ul li:hover > a { color: #082c7e; } .header-wrapper.on .pc-nav-box ul li:hover > a:after { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .header-wrapper.on .pc-nav-box ul li .nav a:hover { color: #082c7e; font-weight: 700; } .header-wrapper.on .pc-nav-box ul li a { color: #333; } .header-wrapper.on .pc-nav-box ul li a:after { background-color: #082c7e; } .header-wrapper.on .search { background-image: url(../img/search5.png); } .header-wrapper.on .language .caption { color: #333; background-image: url(../img/earth2.png); } .header-wrapper.on .language .caption i { background-image: url(../img/idown2.png); } .header-wrapper .box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; height: 0.9rem; padding: 0 0.6rem 0 0.56rem; } .header-wrapper .logo-box { width: 1.68rem; } .header-wrapper .logo-box a { display: block; } .header-wrapper .logo-box img { width: 100%; } .header-wrapper .logo-box img.on { display: none; } .header-wrapper .other-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .header-wrapper .search-box { position: relative; margin-right: 0.56rem; /* input placeholder */ } .header-wrapper .search-box .text { width: 100%; height: 0.46rem; font-size: var(--fs16); line-height: 0.46rem; padding: 0 0.6rem 0 0.2rem; background-color: transparent; color: #666; } .header-wrapper .search-box ::-webkit-input-placeholder { /* WebKit browsers */ color: #666; font-size: var(--fs16); } .header-wrapper .search-box :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666; font-size: var(--fs16); } .header-wrapper .search-box ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666; font-size: var(--fs16); } .header-wrapper .search-box :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #666; font-size: var(--fs16); } .header-wrapper .form { width: 4rem; background-color: #f8f8f8; position: absolute; right: -0.4rem; top: 100%; z-index: 10; padding: 0.1rem 0.2rem; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); display: none; } .header-wrapper .search, .header-wrapper .submit { z-index: 10; display: block; background-size: contain; background-repeat: no-repeat; background-position: center center; background-size: 16px; cursor: pointer; } .header-wrapper .search { position: relative; width: 24px; height: 0.9rem; background-image: url(../img/search.png); } .header-wrapper .submit { width: 16px; height: 16px; position: absolute; right: 0.4rem; top: 50%; margin-top: -8px; z-index: 10; background-image: url(../img/search5.png); } .header-wrapper .language { position: relative; } .header-wrapper .language.on .caption:after { opacity: 1; visibility: visible; } .header-wrapper .language.on .list { opacity: 1; visibility: visible; } .header-wrapper .language.on .list a { display: block; animation: navInUp50 0.6s ease; animation-fill-mode: forwards; } .header-wrapper .language .caption { color: #fff; font-family: Arial; font-weight: 700; cursor: pointer; background-image: url(../img/earth.png); background-repeat: no-repeat; background-position: left center; padding-left: 33px; line-height: 50px; } .header-wrapper .language .caption:after { content: ""; border: 0.06rem solid transparent; position: absolute; left: 50%; bottom: 0; z-index: 10; margin-left: -0.06rem; border-bottom-color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .header-wrapper .language .caption i { display: inline-block; vertical-align: middle; margin-left: 12px; width: 8px; height: 5px; background-image: url(../img/idown.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } .header-wrapper .list { position: absolute; left: 50%; top: 100%; z-index: 10; text-align: center; width: 1.2rem; margin-left: -0.6rem; padding: 0.16rem; overflow: hidden; opacity: 0; visibility: hidden; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); } .header-wrapper .list:before { content: ""; width: 100%; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0; z-index: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); } .header-wrapper .list a { position: relative; z-index: 1; font-family: Arial; font-weight: 700; line-height: 0.3rem; margin-bottom: 0.1rem; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; display: none; opacity: 0; visibility: hidden; } .header-wrapper .list a:last-child { margin-bottom: 0; } .header-wrapper .list a:hover { color: #082c7e; } .pc-nav-box { margin: 0 2rem; flex: 1; } .pc-nav-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .pc-nav-box li { position: relative; margin-right: 0.58rem; } .pc-nav-box li:hover > a, .pc-nav-box li.on > a { font-weight: 700; } .pc-nav-box li:hover > a:after, .pc-nav-box li.on > a:after { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .pc-nav-box li:hover .nav { opacity: 1; visibility: visible; } .pc-nav-box li:hover .nav:before { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .pc-nav-box li:hover .nav a { display: block; animation: navInUp50 0.6s ease; animation-fill-mode: forwards; } .pc-nav-box li:first-child a:before { display: none; } .pc-nav-box li:hover > a:before { opacity: 1; visibility: visible; } .pc-nav-box li > a { position: relative; font-size: var(--fs16); line-height: 0.9rem; color: #fff; } .pc-nav-box li > a:after { content: ""; width: 100%; height: 0.03rem; background-color: #fff; position: absolute; left: 0; top: 0; z-index: 10; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .pc-nav-box li > a:before { content: ""; border: 0.08rem solid transparent; position: absolute; left: 50%; bottom: 0; z-index: 10; margin-left: -0.08rem; border-bottom-color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .pc-nav-box a { display: block; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .pc-nav-box .nav { position: absolute; left: 50%; top: 100%; z-index: 10; text-align: center; width: 1.8rem; margin-left: -0.9rem; padding: 0.16rem; background-color: #fff; overflow: hidden; opacity: 0; visibility: hidden; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05); } .pc-nav-box .nav:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; transform: translateY(-110%); -webkit-transform: translateY(-110%); -moz-transform: translateY(-110%); -ms-transform: translateY(-110%); -o-transform: translateY(-110%); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .pc-nav-box .nav a { position: relative; z-index: 1; font-size: var(--fs16); line-height: 0.3rem; margin-bottom: 0.1rem; display: none; opacity: 0; visibility: hidden; } .pc-nav-box .nav a:last-child { margin-bottom: 0; } .pc-nav-box .nav a:hover { color: #082c7e; font-weight: 700; } .footer-wrapper { padding: 1.16rem 0 1.24rem; background-color: #2d2d2d; position: relative; } .footer-wrapper .pagebg { position: absolute; left: 0; top: -2.3rem; z-index: 0; opacity: 0.2; width: 100%; height: 4rem; } .footer-wrapper .box-container > div { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .footer-wrapper .copyright, .footer-wrapper .copyright a { color: #999; } .footer-wrapper .copyright { line-height: 24px; text-transform: uppercase; } .footer-wrapper .copyright a { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .footer-wrapper .copyright a:hover { color: #fff; } .footer-wrapper .other-box { width: 2.66rem; text-align: right; } .footer-wrapper .other-box p { color: #fff; line-height: 0.24rem; } .footer-wrapper .qrcodes { margin-bottom: 0.16rem; } .footer-wrapper .qrcodes ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .footer-wrapper .qrcodes li { text-align: center; } .footer-wrapper .qrcodes li img { display: block; width: 1.18rem; } .footer-wrapper .qrcodes p { color: #999; font-size: 0.14rem; margin-top: 0.07rem; } .footer-wrapper .tel { color: #fff; font-family: "mb"; font-size: 0.3rem; line-height: 0.36rem; margin: 0.12rem auto 0.4rem; } .footer-wrapper .box-2 { margin-top: 0.43rem; } .footer-wrapper .other { max-width: 75%; } .gotop { position: fixed; right: 0.12rem; bottom: 15%; z-index: 20; width: 0.74rem; height: 0.74rem; background: url(../img/gotop.png) no-repeat center center; background-color: rgba(0, 0, 0, 0.2); transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; display: none; } .gotop:hover { background-color: #082c7e; } .share { margin-top: 0.46rem; text-align: right; } .share ul { font-size: 0; } .share ul li { position: relative; display: inline-block; vertical-align: top; margin-right: 0.2rem; } .share ul li:last-child { margin-right: 0; } .share ul li.on:before { animation: iconScale 1.5s ease infinite; opacity: 1; visibility: visible; } .share ul li.on .hidebox { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .share ul li.on a { background-color: #082c7e; border-color: #082c7e; } .share ul li a { position: relative; display: block; width: 0.43rem; height: 0.43rem; background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 1; border-radius: 50%; border: solid 1px rgba(255, 255, 255, 0.2); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .share .wechat a { background-image: url(../img/wechat.png); } .share .douyin a { background-image: url(../img/douyin.png); } .share .weibo a { background-image: url(../img/weibo.png); } .share .hidebox { position: absolute; left: 50%; bottom: calc(100% + 0.15rem); z-index: 1; margin-left: -0.6rem; width: 1.2rem; background-color: #fff; box-shadow: 0px 0px 46px 0px rgba(6, 0, 1, 0.16); opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transform: translateY(10px); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } .share .hidebox img { display: block; width: 100%; } .footer-nav-box { width: 69.8%; } .footer-nav-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .footer-nav-box li > a { font-size: 16px; color: #fff; font-weight: 700; margin-bottom: 0.28rem; } .footer-nav-box a { display: block; color: #999; line-height: 30px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .footer-nav-box a:hover { color: #fff; } .friend-link { margin-top: 0.24rem; width: 2.46rem; } .friend-link .box { position: relative; width: 100%; text-align: left; } .friend-link .name { cursor: pointer; color: #999; height: 0.42rem; line-height: 0.42rem; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); padding: 0 0.4rem 0 0.22rem; background-image: url(../img/up.png); background-repeat: no-repeat; border: solid 1px rgba(255, 255, 255, 0.3); background-position: right 0.28rem center; } .friend-link .list { font-size: 0; width: 100%; position: absolute; right: 0; bottom: 100%; z-index: 10; max-height: 2.58rem; overflow-y: auto; display: none; background-color: #272727; border: solid 1px rgba(255, 255, 255, 0.3); border-bottom: none; } .friend-link .list::-webkit-scrollbar { width: 4px; background-color: #eee; } .friend-link .list::-webkit-scrollbar-thumb { background-color: #082c7e; } .friend-link .list a { display: block; color: #999; line-height: 0.42rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: solid 1px rgba(255, 255, 255, 0.3); padding: 0 0.4rem 0 0.2rem; } .friend-link .list a:hover { color: #fff; } .friend-link .list a:last-child { border-bottom: none; } .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .index-banner-wrapper .index-banner-swiper .video > img { display: none; width: 100%; } .index-banner-wrapper .index-banner-swiper .video video { display: block; width: 100%; height: 100vh; object-fit: cover; object-position: left top; } .index-banner-wrapper .index-banner-swiper .box-container { opacity: 0; visibility: hidden; transform: translateY(120px); -webkit-transform: translateY(120px); -moz-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); transition: all 1.5s ease; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -ms-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition-delay: 0.4s; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-banner-wrapper .swiper-slide { overflow: hidden; } .index-banner-wrapper .swiper-slide.swiper-slide-active a > img { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .index-banner-wrapper .swiper-slide a { display: block; } .index-banner-wrapper .swiper-slide a > img { display: block; width: 100%; height: 100vh; object-fit: cover; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transition: transform 6s ease; -webkit-transition: transform 6s ease; -moz-transition: transform 6s ease; -ms-transition: transform 6s ease; -o-transition: transform 6s ease; } .index-banner-wrapper .swiper-slide a > img.phone { display: none; } .index-banner-wrapper .info { position: absolute; left: 0; z-index: 10; width: 100%; } .index-banner-wrapper .info img { width: 7.6rem; display: block; } .index-banner-wrapper .info-1 { top: 3.47rem; } .index-banner-wrapper .info-2 { top: 2.6rem; } .index-banner-wrapper .title { font-size: 0.6rem; line-height: 0.72rem; color: #fff; } .index-banner-wrapper .en { font-size: 0.18rem; color: #fff; text-transform: uppercase; font-family: "mr"; line-height: 0.3rem; margin-top: 0.2rem; } .index-banner-wrapper .swiper-pagination-bullet { width: 0.08rem; height: 0.08rem; background: rgba(255, 255, 255, 0.8); position: relative; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; } .index-banner-wrapper .swiper-pagination-bullet svg { width: 0.38rem; height: 0.38rem; position: absolute; top: 50%; margin-top: -0.19rem; left: 50%; margin-left: -0.19rem; } .index-banner-wrapper .swiper-pagination-bullet svg:nth-child(2) { position: absolute; left: 0; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .index-banner-wrapper .swiper-pagination-bullet { fill: none; } .index-banner-wrapper .circle-chart__circle { stroke-linecap: square; fill: none; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__background { stroke: rgba(255, 255, 255, 0.2); } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__circle { stroke: #fff; stroke-width: 2; stroke-linecap: square; fill: none; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform-origin: center; -webkit-transform-origin: center; -ms-transform-origin: center; -moz-transform-origin: center; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__circle { animation: circle-chart-fill 3.8s linear reverse; -moz-animation: circle-chart-fill 3.8s linear reverse; -webkit-animation: circle-chart-fill 3.8s linear reverse; -ms-animation: circle-chart-fill 3.8s linear reverse; } .index-banner-wrapper .swiper-pagination-bullet.one.swiper-pagination-bullet-active .circle-chart__circle { animation: circle-chart-fill 2.4s linear reverse; -moz-animation: circle-chart-fill 2.4s linear reverse; -webkit-animation: circle-chart-fill 2.4s linear reverse; -ms-animation: circle-chart-fill 2.4s linear reverse; } .index-banner-wrapper .swiper-pagination { bottom: 0.64rem; } .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet { margin: 0 0.17rem; opacity: 1; } .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet:focus, .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet:active, .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet:link { outline: none; } .swiper-btn { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .search-form { width: 100%; position: fixed; left: 0; top: 0.92rem; background: #fff; z-index: 30; padding: 0.7rem 0; display: none; border-top: 1px solid #f7f8f9; /* input placeholder */ } .search-form .w960 { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ width: 9.6rem; margin: 0 auto; align-items: center; border-bottom: 1px solid #f7f8f9; } .search-form .keywords { flex: 1; overflow: hidden; line-height: 0.56rem; margin-left: 20px; font-size: 15px; color: #999; } .search-form ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-size: 15px; } .search-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; font-size: 15px; } .search-form ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; font-size: 15px; } .search-form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; font-size: 15px; } .search-form .close { position: absolute; right: 0; top: 50%; z-index: 10; color: #999; margin-top: -0.15rem; width: 0.2rem; height: 0.2rem; background: url(../img/close.png) no-repeat; background-size: contain; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .search-form .close:hover { color: #082c7e; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } .index-more { display: block; width: 1.46rem; height: 0.5rem; line-height: 0.5rem; font-family: "mb"; text-transform: uppercase; color: #082c7e; text-align: center; position: relative; background-image: url(../img/titbg3.png); background-size: contain; background-repeat: no-repeat; background-position: center center; background-size: 100%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .index-more:hover { color: #fff; background-image: url(../img/titbg.png); } .index-more:hover i { transform: translateX(0.1rem); -webkit-transform: translateX(0.1rem); -moz-transform: translateX(0.1rem); -ms-transform: translateX(0.1rem); -o-transform: translateX(0.1rem); background-image: url(../img/more.png); } .index-more.white { color: #fff; background-image: url(../img/titbg2.png); } .index-more.white i { background-image: url(../img/more.png); } .index-more.white:hover { background-image: url(../img/titbg.png); } .index-more.white:hover i { transform: translateX(0.1rem); -webkit-transform: translateX(0.1rem); -moz-transform: translateX(0.1rem); -ms-transform: translateX(0.1rem); -o-transform: translateX(0.1rem); } .index-more i { display: inline-block; width: 0.14rem; height: 0.12rem; background-image: url(../img/more2.png); background-size: contain; background-repeat: no-repeat; background-position: center center; vertical-align: middle; position: relative; top: -2px; margin-left: 0.18rem; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .more { display: block; color: #999; line-height: 0.3rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; font-weight: 700; } .more.white { color: #fff; } .more.white i { background-image: url(../img/iright3.png); } .more i { display: inline-block; width: 0.17rem; height: 0.07rem; background-image: url(../img/iright4.png); background-size: contain; background-repeat: no-repeat; background-position: center center; vertical-align: middle; position: relative; top: -2px; margin-left: 0.18rem; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .index-title-box { margin-bottom: 0.65rem; } .index-title-box.center { text-align: center; } .index-title-box.center .line { margin: 0 auto; } .index-title-box h3 { font-size: 0.36rem; line-height: 0.48rem; font-weight: 700; letter-spacing: 2px; } .index-title-box .en { font-size: 0.18rem; color: #d3d3d3; font-family: "mr"; text-transform: uppercase; line-height: 0.24rem; margin: 0.05rem auto 0.26rem; } .index-title-box .line { width: 0.4rem; height: 0.05rem; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .index-title-box .brief { font-size: 0.18rem; line-height: 0.36rem; margin-top: 0.3rem; color: #666; } .cat-box { font-size: 0; } .cat-box a { position: relative; display: inline-block; margin-right: 1rem; font-size: 16px; color: #999; line-height: 0.3rem; padding-bottom: 0.07rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .cat-box a:last-child { margin-right: 0; } .cat-box a:hover, .cat-box a.on { color: #082c7e; } .cat-box a:hover:after, .cat-box a.on:after { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .cat-box a:after { content: ""; width: 100%; height: 0.03rem; background-color: #082c7e; position: absolute; left: 0; bottom: 0; z-index: 10; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .index-box-1 { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .index-box-1 .info, .index-box-1 .pic { width: 50%; } .index-box-1 .info { background: url(../img/indexbg.jpg) no-repeat center center; background-size: cover; padding-right: 1.4rem; padding-left: calc((100% - 15.36rem) / 2); } .index-box-1 .pic { position: relative; } .index-box-1 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .index-box-1 .pic:hover .button-svg { stroke-dashoffset: 0; } .index-box-1 .pic img { transition-duration: 2s; } .index-box-1 .play { position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%; left: 50%; top: 50%; margin-top: -0.55rem; margin-left: -0.55rem; cursor: pointer; } .index-box-1 .play svg { width: 100%; height: 100%; } .index-box-1 .play circle { cx: 0.55rem; cy: 0.55rem; r: 0.52rem; } .index-box-1 .play i { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: #fff url(../img/play.png) no-repeat center center; position: absolute; left: 50%; top: 50%; margin-top: -0.36rem; margin-left: -0.36rem; z-index: 10; } .index-box-1 .play .button-svg { stroke-dasharray: 251 251; stroke-dashoffset: 251; stroke: #fff; transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; } .index-box-1 h1 { font-size: 0.36rem; font-weight: 700; } .index-box-1 .since { font-size: 0.48rem; text-transform: uppercase; line-height: 0.48rem; margin-top: 0.2rem; background-image: -webkit-linear-gradient(#0036d6, #03236b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .index-box-1 .desc { line-height: 0.3rem; margin: 0.4rem auto 0.34rem; } .index-box-1 .data { margin-bottom: 0.44rem; } .index-box-1 .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .index-box-1 .data p { line-height: 0.24rem; } .index-box-1 .data .num { font-size: 0.48rem; font-family: "mb"; line-height: 0.48rem; height: 0.48rem; color: #082c7e; } .index-box-1 .data em { font-size: var(--fs16); color: #333; margin-left: 0.08rem; } .index-box-1 .data p { margin-top: 0.07rem; line-height: 0.24rem; } .data em, .data i { display: inline-block; font-style: normal; } .data em { position: relative; } .data i { font-family: "mb"; color: #082c7e; font-size: 22px; line-height: 16px; height: 16px; position: absolute; left: 0; top: -5px; z-index: 10; } .index-box-2 { position: relative; } .index-box-2 .tab-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; } .index-box-2 .tab-box a { position: relative; width: 20%; text-align: center; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ justify-content: center; align-items: center; height: 1.08rem; box-shadow: 0px 0px 46px 0px rgba(0, 0, 0, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(0, 0, 0, 0.4); } .index-box-2 .tab-box a.on:before { opacity: 1; visibility: visible; } .index-box-2 .tab-box a:hover .icon { animation: shake 0.4s ease; } .index-box-2 .tab-box a:before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .index-box-2 .tab-box .icon { margin-right: 0.6rem; } .index-box-2 .tab-box .icon img { height: 0.4rem; } .index-box-2 .tab-box .icon .init { display: none; } .index-box-2 .tab-box .name { font-size: 0.18rem; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 0.36rem; max-width: calc(100% - 1.8rem); } .index-box-2 .swiper-slide.swiper-slide-active .name, .index-box-2 .swiper-slide.swiper-slide-active .ename, .index-box-2 .swiper-slide.swiper-slide-active .desc, .index-box-2 .swiper-slide.swiper-slide-active .index-more { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .index-box-2 .swiper-slide a { display: block; } .index-box-2 .swiper-slide .pic { position: relative; } .index-box-2 .swiper-slide .pic:before { content: ""; width: 100%; height: 100%; background: url(../img/shadow.png) no-repeat center left; background-size: cover; position: absolute; left: 0; top: 0; z-index: 1; } .index-box-2 .swiper-slide .info { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; padding-top: 2.02rem; } .index-box-2 .swiper-slide .name, .index-box-2 .swiper-slide .ename, .index-box-2 .swiper-slide .desc, .index-box-2 .swiper-slide .index-more { opacity: 0; visibility: hidden; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transform: translateY(1rem); -webkit-transform: translateY(1rem); -moz-transform: translateY(1rem); -ms-transform: translateY(1rem); -o-transform: translateY(1rem); } .index-box-2 .swiper-slide .name, .index-box-2 .swiper-slide .ename, .index-box-2 .swiper-slide .desc { width: 42.57%; color: #fff; } .index-box-2 .swiper-slide .name { font-size: 0.48rem; line-height: 0.6rem; font-weight: 700; } .index-box-2 .swiper-slide .ename { font-size: 0.18rem; line-height: 0.3rem; font-family: "mb"; text-transform: uppercase; margin: 0.1rem 0 0.5rem; transition-delay: 0.12s; } .index-box-2 .swiper-slide .desc { line-height: 0.3rem; margin-bottom: 0.43rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; max-height: 1.5rem; transition-delay: 0.24s; } .index-box-2 .swiper-slide .index-more { transition-delay: 0.36s; } .index-box-2 .swiper-slide .index-more:hover { transition-delay: 0s; } .index-box-3 { position: relative; overflow: hidden; padding: 1.2rem 0 1.24rem; background-color: #f7f7f7; } .index-box-3 .top { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .index-box-3 .canvas { position: absolute; left: 0; bottom: -2rem; z-index: 0; opacity: 0.2; width: 100%; height: 5rem; } .index-box-3 .box-container { position: relative; z-index: 10; } .index-box-3 .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ width: 100%; } .index-box-3 .main .item { display: none; } .index-box-3 .main .item.on { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ animation: fadeIn 0.6s ease; } .index-box-3 .main .item.on .left, .index-box-3 .main .item.on .right { opacity: 1; visibility: visible; } .index-box-3 .main .item.on .left { animation: fadeInRight50 0.8s ease; } .index-box-3 .main .item.on .right { animation: fadeInLeft50 0.8s ease; } .index-box-3 .left, .index-box-3 .right { opacity: 0; visibility: hidden; } .index-box-3 .left { width: 67%; } .index-box-3 .left ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .index-box-3 .left li { width: 44.32%; margin-right: 5.68%; background-color: #fff; } .index-box-3 .left li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .index-box-3 .left li:hover .info { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .index-box-3 .left li:hover .title { color: #fff; } .index-box-3 .left li:hover .desc { color: rgba(255, 255, 255, 0.5); } .index-box-3 .left li:hover .time { color: rgba(255, 255, 255, 0.3); } .index-box-3 .left li:hover .more { color: #fff; } .index-box-3 .left li:hover .more i { background-image: url(../img/iright3.png); } .index-box-3 .left .info { position: relative; padding: 0.36rem 0.36rem 0.55rem; } .index-box-3 .left .info div { transition: color 0.32s ease; -webkit-transition: color 0.32s ease; -moz-transition: color 0.32s ease; -ms-transition: color 0.32s ease; -o-transition: color 0.32s ease; } .index-box-3 .left .desc { margin: 0.16rem auto 0.18rem; } .index-box-3 .left .time { margin-bottom: 0.35rem; } .index-box-3 .title { font-size: 0.22rem; font-weight: 700; height: 0.72rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 0.36rem; } .index-box-3 .desc { color: #666; line-height: 24px; height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .index-box-3 .time { font-size: var(--fs16); color: rgba(51, 51, 51, 0.3); line-height: 24px; font-family: "hr"; } .index-box-3 .right { width: 33%; background-color: #fff; padding: 0.36rem 0.4rem 0; } .index-box-3 .right > a { display: block; padding-bottom: 0.24rem; margin-bottom: 0.24rem; border-bottom: 1px solid #e9e9e9; } .index-box-3 .right > a:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .index-box-3 .right > a:hover .title { color: #082c7e; } .index-box-3 .right .desc { -webkit-line-clamp: 2; height: 48px; margin: 0.12rem auto 0.16rem; } .index-box-3 .right ul { margin-top: 0.34rem; } .index-box-3 .right li:hover a { color: #082c7e; font-weight: 700; } .index-box-3 .right li a { font-size: var(--fs16); height: 0.48rem; line-height: 0.48rem; transition: color 0.4s ease; -webkit-transition: color 0.4s ease; -moz-transition: color 0.4s ease; -ms-transition: color 0.4s ease; -o-transition: color 0.4s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .index-box-4 { padding: 1.2rem 0 1.46rem; } .index-box-4 .box-container { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .index-box-4 .info { width: 30.6%; padding-top: 0.1rem; } .index-box-4 .pic { width: 69%; position: relative; height: 100%; } .index-box-4 .pic ul { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; } .index-box-4 .pic li { position: absolute; z-index: 1; display: inline-block; width: 0.4rem; height: 0.4rem; } .index-box-4 .pic li:before, .index-box-4 .pic li:after { content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; } .index-box-4 .pic li:before { z-index: 0; animation: iconScale2 1.8s linear infinite; background-color: rgba(6, 105, 178, 0.4); } .index-box-4 .pic li:after { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; z-index: 1; transform: scale(0.375); -webkit-transform: scale(0.375); -moz-transform: scale(0.375); -ms-transform: scale(0.375); -o-transform: scale(0.375); } .index-box-4 .pic li:first-child { left: 17%; top: 28%; } .index-box-4 .pic li:nth-child(2) { left: 47%; top: 19%; } .index-box-4 .pic li:nth-child(3) { right: 47.5%; top: 6%; } .index-box-4 .pic li:nth-child(4) { left: 28%; bottom: 27%; } .index-box-4 .pic li:nth-child(5) { right: 23%; bottom: 42%; } .index-box-4 .title { font-size: 0.36rem; font-weight: 700; line-height: 0.62rem; margin: 1.3rem auto 1.36rem; } .index-box-4 .title b, .index-box-4 .title em { color: #082c7e; } .index-box-4 .title em { font-style: normal; } .index-box-4 .title b { font-family: "mb"; font-size: 0.55rem; margin-right: 0.1rem; } .index-box-4 .data { position: absolute; left: 0; bottom: 0; z-index: 10; width: 41.66%; } .index-box-4 .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .index-box-4 .data p { line-height: 0.24rem; } .index-box-4 .data .num { font-size: 0.36rem; font-family: "mb"; line-height: 0.36rem; height: 0.36rem; background-image: -webkit-linear-gradient(#03236b, #0036d6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .index-box-4 .data em, .index-box-4 .data i { display: inline-block; font-style: normal; } .index-box-4 .data i { font-family: Arial; font-weight: 700; font-size: 0.24rem; line-height: 0.2rem; background-image: -webkit-linear-gradient(#03236b, #0036d6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left: 0.15rem; position: relative; vertical-align: top; top: 2px; } .index-box-4 .data p { margin-top: 0.18rem; line-height: 0.24rem; } .index-box-5 { margin-bottom: 1.2rem; } .index-box-5 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .index-box-5 li { width: 25%; } .index-box-5 li:hover .pic { opacity: 1; } .index-box-5 li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .index-box-5 li:hover .info { text-align: left; } .index-box-5 li:hover .more { margin: 0; background-image: url(../img/iright.png); } .index-box-5 li:hover .icon { margin: 0; } .index-box-5 li:hover .icon .init { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 0; visibility: hidden; } .index-box-5 li:hover .icon .on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .index-box-5 li:hover .title, .index-box-5 li:hover .en { color: #fff; } .index-box-5 li:hover .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; animation: fadeInUp50 0.5s ease; } .index-box-5 li:hover .en { margin-bottom: 0; } .index-box-5 li a { position: relative; display: block; } .index-box-5 .pic { opacity: 0.2; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .index-box-5 .info { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 1; text-align: center; padding: 0 0.55rem; transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; } .index-box-5 .icon { position: relative; width: 0.44rem; height: 0.44rem; margin: 0 auto; } .index-box-5 .icon img { position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .index-box-5 .icon .on { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); opacity: 0; visibility: hidden; } .index-box-5 .title, .index-box-5 .en { transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } .index-box-5 .title { font-size: 0.24rem; font-weight: 700; line-height: 0.3rem; margin: 0.42rem auto 0.1rem; } .index-box-5 .en { color: #999; line-height: 0.24rem; text-transform: uppercase; margin-bottom: 0.95rem; } .index-box-5 .desc { font-size: 0.2rem; color: #fff; line-height: 0.3rem; margin: 0.32rem auto 0.27rem; display: none; height: 0.9rem; } .index-box-5 .more { width: 0.28rem; height: 0.16rem; background-size: contain; background-repeat: no-repeat; background-position: center center; margin: 0 auto; background-image: url(../img/iright2.png); transition: background 0.5s ease; -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -ms-transition: background 0.5s ease; -o-transition: background 0.5s ease; } .page-banner-wrapper { position: relative; z-index: 10; } .page-banner-wrapper.swiper .info { width: auto; height: auto; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); left: calc((100% - 15.36rem) / 2); } .page-banner-wrapper.swiper .box-container { width: 100%; } .page-banner-wrapper .info { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .page-banner-wrapper h1 { font-size: 0.6rem; font-weight: 700; color: #fff; line-height: 0.7rem; letter-spacing: 1px; } .page-banner-wrapper p { font-size: 0.18rem; text-transform: uppercase; color: #fff; line-height: 0.3rem; font-family: "hr"; margin-top: 0.04rem; } .page-banner-wrapper .swiper-pagination { display: block; bottom: 0.6rem; font-size: 0; } .page-banner-wrapper .swiper-pagination .swiper-pagination-bullet { opacity: 1; background: #fff; margin: 0 0.08rem; width: 0.12rem; height: 0.12rem; border: none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .page-banner-wrapper .swiper-pagination .swiper-pagination-bullet:focus, .page-banner-wrapper .swiper-pagination .swiper-pagination-bullet:active, .page-banner-wrapper .swiper-pagination .swiper-pagination-bullet:link { outline: none; } .page-banner-wrapper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #082c7e; } .page-box { position: relative; padding: 1.2rem 0 2.3rem; } .page-box .top { text-align: center; } .padding { padding: 1.2rem 0; } .mt { margin-top: 1.2rem; } .loading { text-align: center; margin-top: 0.76rem; } .loading a { display: inline-block; color: #082c7e; font-weight: 700; line-height: 0.34rem; } .loading a:hover img { transform: rotateY(180deg); } .loading img { display: inline-block; width: 0.34rem; margin-right: 0.15rem; vertical-align: middle; position: relative; top: -2px; transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; } .culture-wrapper .box-1 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .culture-wrapper .box-1 .info-box { width: 54.6875%; } .culture-wrapper .box-1 .brief { font-size: 0.4rem; line-height: 0.48rem; letter-spacing: 0.08rem; background-image: -webkit-linear-gradient(bottom, #082c7e, #6e8ff1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.35rem; font-weight: 700; } .culture-wrapper .box-1 .pic-box { position: relative; width: 39.71%; height: 100%; padding-left: 0.6rem; } .culture-wrapper .box-1 .pic-box.animated:before { height: 76.66%; } .culture-wrapper .box-1 .pic-box.animated:after { height: 86.66%; } .culture-wrapper .box-1 .pic-box.animated .pic > img { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .culture-wrapper .box-1 .pic-box:before, .culture-wrapper .box-1 .pic-box:after { content: ""; display: block; position: absolute; height: 0; transition: height 2s ease; -webkit-transition: height 2s ease; -moz-transition: height 2s ease; -ms-transition: height 2s ease; -o-transition: height 2s ease; } .culture-wrapper .box-1 .pic-box:before { left: 0; width: 1.04rem; top: -0.4rem; z-index: 1; background: url(../img/dot.png) repeat; transition-delay: 1s; } .culture-wrapper .box-1 .pic-box:after { content: ""; top: 0; left: 0.3rem; width: calc(100% - 0.3rem); background: #f3f3f3; z-index: 0; transition-delay: 1.8s; } .culture-wrapper .box-1 .pic-box .pic { position: relative; overflow: inherit; } .culture-wrapper .box-1 .pic-box .pic > img { position: relative; display: block; z-index: 1; transition: transform 1.5s ease; -webkit-transition: transform 1.5s ease; -moz-transition: transform 1.5s ease; -ms-transition: transform 1.5s ease; -o-transition: transform 1.5s ease; transform: translateX(-30%); -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -ms-transform: translateX(-30%); -o-transform: translateX(-30%); } .culture-wrapper .box-1 .content img { margin: 0; } .culture-wrapper .cate-box { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; } .culture-wrapper .cate-box .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .culture-wrapper .cate-box a { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; width: 25%; background-color: #fff; box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05); padding: 0.39rem 0.2rem 0.39rem 0.5rem; } .culture-wrapper .cate-box a:last-child:after { border-right: solid 1px #eee; } .culture-wrapper .cate-box a:before, .culture-wrapper .cate-box a:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .culture-wrapper .cate-box a:before { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; } .culture-wrapper .cate-box a:after { box-sizing: border-box; border: solid 1px #eee; border-right: none; } .culture-wrapper .cate-box a.on:before { opacity: 1; visibility: visible; } .culture-wrapper .cate-box a.on:after { opacity: 0; visibility: hidden; } .culture-wrapper .cate-box a.on .icon { border-color: #fff; } .culture-wrapper .cate-box a.on .name { color: #fff; } .culture-wrapper .cate-box a.on p { color: rgba(255, 255, 255, 0.6); } .culture-wrapper .cate-box .icon, .culture-wrapper .cate-box .info { position: relative; z-index: 10; } .culture-wrapper .cate-box .icon { width: 0.82rem; height: 0.82rem; background-color: #fff; border: solid 1px #eee; border-radius: 50%; margin-right: 0.3rem; } .culture-wrapper .cate-box .icon img { width: 100%; } .culture-wrapper .cate-box .info { flex: 1; overflow: hidden; } .culture-wrapper .cate-box .name, .culture-wrapper .cate-box p { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .culture-wrapper .cate-box .name { font-size: 0.28rem; color: #222; line-height: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .culture-wrapper .cate-box p { color: rgba(34, 34, 34, 0.3); font-family: "ml"; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 0.24rem; margin-top: 0.1rem; } .culture-wrapper .box-2 { position: relative; } .culture-wrapper .box-2 .swiper-box { position: relative; } .culture-wrapper .box-2 .swiper-slide.swiper-slide-active .info { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .culture-wrapper .box-2 .swiper-slide .info { position: absolute; left: 0; top: 1.18rem; z-index: 10; width: 100%; text-align: center; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transform: translateY(1rem); -webkit-transform: translateY(1rem); -moz-transform: translateY(1rem); -ms-transform: translateY(1rem); -o-transform: translateY(1rem); opacity: 0; visibility: hidden; } .culture-wrapper .box-2 .info h3 { font-size: 0.3rem; color: #fff; line-height: 0.4rem; } .culture-wrapper .box-2 .info .en { font-size: 0.18rem; font-family: "ml"; line-height: 0.3rem; color: #fff; margin-top: 0.08rem; } .culture-wrapper .box-2 .info .inner { position: relative; display: inline-block; padding: 0 1.6rem; } .culture-wrapper .box-2 .info .inner:before, .culture-wrapper .box-2 .info .inner:after { display: inline-block; font-size: 3rem; color: #fff; opacity: 0.1; font-family: Arial; position: absolute; height: 0.8rem; line-height: 0.8rem; } .culture-wrapper .box-2 .info .inner:before { content: "鈥?; left: 0; top: 80%; } .culture-wrapper .box-2 .info .inner:after { content: "鈥?; right: 0; top: 140%; } .culture-wrapper .box-3 .item { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; margin-bottom: 0.82rem; } .culture-wrapper .box-3 .item:last-child { margin-bottom: 0; } .culture-wrapper .box-3 .item:nth-child(even) { flex-direction: row-reverse; } .culture-wrapper .box-3 .pic { width: 50%; } .culture-wrapper .box-3 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .culture-wrapper .box-3 .info { width: 45.57%; } .culture-wrapper .box-3 .title { font-size: 0.3rem; line-height: 0.4rem; margin-bottom: 0.28rem; font-weight: 700; } .culture-wrapper .box-3 .title:after { content: ""; width: 0.35rem; height: 0.02rem; background-color: #e4e4e4; display: block; margin-top: 0.2rem; } .culture-wrapper .box-3 .desc { font-size: var(--fs16); line-height: 0.3rem; text-align: justify; padding-right: 0.38rem; overflow-y: auto; max-height: 4.5rem; } .culture-wrapper .box-3 .desc::-webkit-scrollbar { width: 2px; background-color: #e5e5e5; } .culture-wrapper .box-3 .desc::-webkit-scrollbar-thumb { background-color: #082c7e; } #glass { background: #fff; position: absolute; border-radius: 50%; border: 3px #e2e2e2 solid; display: none; background-repeat: no-repeat; z-index: 11; } .research-wrapper .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .research-wrapper .data li { position: relative; cursor: default; } .research-wrapper .data .num { font-size: 0.42rem; line-height: 0.48rem; } .research-wrapper .data .num span { display: inline-block; font-family: "mm"; color: #fff; background-image: -webkit-linear-gradient(18deg, #03236b, #0f4cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .research-wrapper .data em { font-style: normal; display: inline-block; margin-left: 0.1rem; } .research-wrapper .data em, .research-wrapper .data p { font-size: var(--fs16); color: #666; line-height: 24px; } .research-wrapper .box-1 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } .research-wrapper .box-1 .brief { font-size: 0.36rem; line-height: 0.48rem; background-image: -webkit-linear-gradient(left, #082c7e, #6e8ff1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.36rem; font-weight: 700; } .research-wrapper .box-1 .info { width: 44.27%; } .research-wrapper .box-1 .info .index-title-box { margin-bottom: 0.52rem; } .research-wrapper .box-1 .pic { width: 50%; } .research-wrapper .box-1 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .research-wrapper .box-3 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } .research-wrapper .box-3 .pic { width: 50%; } .research-wrapper .box-3 .info { width: 43.8%; } .research-wrapper .box-3 .data { margin-top: 0.5rem; } .research-wrapper .box-3 .data ul { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .research-wrapper .box-3 .data p { margin-top: 0.1rem; } .research-wrapper .box-3 .index-title-box { margin-bottom: 0.42rem; } .research-wrapper .box-4 { position: relative; background-color: #f9f9f9; } .research-wrapper .box-4 .swiper-box:before { content: ""; width: 100%; height: 0.02rem; background-color: #e3e4e5; position: absolute; left: 0; top: 50%; margin-top: -0.01rem; z-index: -1; } .research-wrapper .box-4 .swiper-container { height: 4.2rem; padding: 0 calc((100% - 15.36rem) / 2 + 0.9rem); } .research-wrapper .box-4 .swiper-slide { position: relative; height: 100%; } .research-wrapper .box-4 .swiper-slide:nth-child(odd) .inner { top: 50%; padding-top: 0.6rem; } .research-wrapper .box-4 .swiper-slide:nth-child(even) .inner:after { top: auto; bottom: -0.06rem; } .research-wrapper .box-4 .swiper-slide .line { width: 0.24rem; height: 0.04rem; background-image: url(../img/line.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } .research-wrapper .box-4 .year { font-size: 0.36rem; color: #082c7e; font-family: "mb"; line-height: 0.4rem; margin: 0.28rem auto 0.11rem; } .research-wrapper .box-4 .desc { font-size: var(--fs16); color: #666; line-height: 0.3rem; } .research-wrapper .box-4 .inner { height: 50%; position: absolute; padding-left: 0.56rem; width: 409px; left: 0; top: 0; z-index: 10; } .research-wrapper .box-4 .inner:before { content: ""; width: 2px; height: 100%; background-color: #e3e4e5; position: absolute; left: 5px; top: 0; z-index: 1; } .research-wrapper .box-4 .inner:after { content: ""; width: 12px; height: 12px; background-color: #fff; border: solid 2px #082c7e; box-sizing: border-box; position: absolute; left: 0; top: -6px; z-index: 10; border-radius: 50%; } .research-wrapper .box-4 .swiper-btn { width: 0.49rem; height: 0.49rem; } .research-wrapper .box-4 .prev { left: calc((100% - 15.36rem) / 2); background-image: url(../img/prev.png); } .research-wrapper .box-4 .prev:hover { background-image: url(../img/prev2.png); } .research-wrapper .box-4 .next { right: calc((100% - 15.36rem) / 2); background-image: url(../img/next.png); } .research-wrapper .box-4 .next:hover { background-image: url(../img/next2.png); } .research-wrapper .box-5 li { width: 16.016%; text-align: center; margin-right: 0.7808%; margin-top: 0.7808%; padding: 0.3rem 0.12rem 0.28rem; box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.08); } .research-wrapper .box-5 li:hover:after { opacity: 1; visibility: visible; } .research-wrapper .box-5 li:hover .num span { background: transparent; -webkit-text-fill-color: #fff; } .research-wrapper .box-5 li:hover * { color: #fff; } .research-wrapper .box-5 li:after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; height: 100%; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .research-wrapper .box-5 li * { position: relative; z-index: 10; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .research-wrapper .box-5 p { margin-top: 0.12rem; } .video-wrapper .btn-box { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 10; width: 100%; font-size: 0; text-align: center; } .video-wrapper .btn-box a { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: rgba(255, 255, 255, 0.75); transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; } .video-wrapper .btn-box a:hover { background-color: #082c7e; } .video-wrapper .play { background-image: url(../img/play.png); } .video-wrapper .play:hover { background-image: url(../img/play2.png); } .video-wrapper .download { background-image: url(../img/download.png); } .video-wrapper .download:hover { background-image: url(../img/download2.png); } .video-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .video-wrapper .list li { cursor: pointer; width: 31.25%; margin-right: 3.125%; margin-top: 0.52rem; } .video-wrapper .list li:nth-child(3n) { margin-right: 0; } .video-wrapper .list li:nth-child(-n+3) { margin-top: 0; } .video-wrapper .list li:hover .title { color: #082c7e; } .video-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .video-wrapper .pic { position: relative; } .video-wrapper iframe { width: 100%; height: 2.8rem; object-fit: cover; } .video-wrapper .title { font-size: var(--fs16); color: #666; line-height: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; margin-top: 0.22rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; font-weight: 700; } .category-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ margin-bottom: 0.74rem; justify-content: center; width: 100%; } .category-box.more a { flex: 1; } .category-box a { position: relative; width: 33.33%; text-align: center; padding: 0 0.2rem; } .category-box a.on .icon .init { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 0; visibility: hidden; } .category-box a.on .icon .on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .category-box a.on p { color: #082c7e; } .category-box a:last-child:after { display: none; } .category-box a:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 10; width: 1px; height: 0.96rem; background: rgba(0, 0, 0, 0.1); } .category-box p { font-size: 0.18rem; color: #222; line-height: 0.3rem; margin-top: 0.16rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; font-weight: 700; } .category-box .icon { position: relative; width: 0.55rem; height: 0.55rem; margin: 0 auto; } .category-box .icon img { position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .category-box .icon .on { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); opacity: 0; visibility: hidden; } .mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 40; background: rgba(0, 0, 0, 0.5); display: none; } .video-modal-box { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 44; } .video-modal-box .box { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 10; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .video-modal-box .w1200 { background: #fff; padding: 0.4rem 0.6rem 0.6rem; } .video-modal-box .top { position: relative; margin-bottom: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid #f7f8f9; } .video-modal-box .name { font-size: 0.24rem; color: #082c7e; line-height: 0.36rem; letter-spacing: 1px; } .video-modal-box .close { display: inline-block; position: absolute; width: 20px; height: 20px; right: 0; top: 0; background-image: url(../img/close.png); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .video-modal-box .close:hover { transform: rotate(90deg); } .video-modal-box .video-box { font-size: 0; overflow: hidden; } .video-modal-box .video-box video { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; } .newspaper-wrapper .btn-box { font-size: 0; position: absolute; width: 100%; left: 0; bottom: 0; z-index: 10; text-align: center; padding: 0.2rem 0; background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .newspaper-wrapper .btn-box a { position: relative; display: inline-block; font-size: var(--fs16); color: #fff; padding-right: 0.28rem; margin-right: 0.28rem; line-height: 0.34rem; } .newspaper-wrapper .btn-box a:last-child { padding-right: 0; margin-right: 0; } .newspaper-wrapper .btn-box a:last-child:after { display: none; } .newspaper-wrapper .btn-box a:hover img { animation: shake 0.5s ease; } .newspaper-wrapper .btn-box a:after { content: ""; width: 1px; height: 90%; background: #fff; position: absolute; right: 0; top: 5%; z-index: 10; } .newspaper-wrapper .btn-box img { display: inline-block; width: 0.24rem; vertical-align: middle; margin-right: 0.14rem; } .newspaper-wrapper .pic { position: relative; } .newspaper-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .newspaper-wrapper .list li { width: 22.14%; margin-right: 3.813%; margin-top: 0.66rem; } .newspaper-wrapper .list li:hover .title { color: #082c7e; } .newspaper-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .newspaper-wrapper .list li:hover .btn-box { opacity: 1; visibility: visible; } .newspaper-wrapper .info { margin-top: 0.22rem; } .newspaper-wrapper .info p { font-family: "ml"; font-size: var(--fs16); line-height: 24px; } .newspaper-wrapper .title { font-size: 0.18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; line-height: 0.3rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .social-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .social-wrapper .list li { width: 48.046%; margin-top: 3.908%; border: solid 1px rgba(0, 0, 0, 0.06); } .social-wrapper .list li:nth-child(-n+2) { margin-top: 0; } .social-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .social-wrapper .list li:hover .i-more { background-image: url(../img/iright2.png); } .social-wrapper .list li:hover .title { color: #082c7e; } .social-wrapper .list li a { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .social-wrapper .info, .social-wrapper .pic { width: 50%; } .social-wrapper .info { padding: 0 0.36rem 0 0.4rem; } .social-wrapper .title { font-size: 0.2rem; line-height: 0.32rem; height: 0.64rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; } .social-wrapper .desc { font-size: 15px; color: #666; line-height: 0.28rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 0.56rem; margin: 0.14rem auto 0.4rem; } .social-wrapper .i-more { width: 0.24rem; } .i-more { display: inline-block; width: 0.28rem; height: 0.16rem; background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; background-image: url(../img/iright6.png); } .i-more:hover { background-image: url(../img/iright2.png); } .activity-wrapper .first-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07); } .activity-wrapper .first-box .pic, .activity-wrapper .first-box .info { width: 50%; } .activity-wrapper .first-box .info { padding: 0 0.9rem 0 1.2rem; } .activity-wrapper .first-box .info > img { display: block; width: 100%; position: relative; z-index: -1; } .activity-wrapper .first-box .index-title-box { margin-top: -0.79rem; margin-bottom: 0.42rem; } .activity-wrapper .tab-box { font-size: 0; text-align: center; margin-bottom: 0.7rem; } .activity-wrapper .tab-box a { display: inline-block; min-width: 1.86rem; height: 0.54rem; line-height: 0.54rem; border-radius: 0.05rem; position: relative; margin-right: 0.3rem; color: #666; font-size: 0.18rem; padding: 0 0.3rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .activity-wrapper .tab-box a:last-child { margin-right: 0; } .activity-wrapper .tab-box a:before, .activity-wrapper .tab-box a:after { content: ""; border-radius: 0.05rem; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .activity-wrapper .tab-box a:before { opacity: 0; visibility: hidden; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .activity-wrapper .tab-box a:after { border: solid 1px #e5e5e5; box-sizing: border-box; } .activity-wrapper .tab-box a.on { color: #fff; } .activity-wrapper .tab-box a.on:before { opacity: 1; visibility: visible; } .activity-wrapper .tab-box a.on:after { opacity: 0; visibility: hidden; } .activity-wrapper .item { display: none; } .activity-wrapper .item.on li { display: block; animation: zoomIn 0.8s ease; animation-fill-mode: forwards; } .activity-wrapper .item ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .activity-wrapper .item li { display: none; opacity: 0; width: 30.73%; margin-top: 0.52rem; margin-right: 3.905%; } .activity-wrapper .item li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .activity-wrapper .item li:hover .title { color: #082c7e; } .activity-wrapper .title { font-size: var(--fs16); color: #666; line-height: 0.36rem; text-align: center; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; margin-top: 0.23rem; } .advice-wrapper .tab-box, .investor-wrapper .tab-box, .contact-wrapper .tab-box { font-size: 0; } .advice-wrapper .tab-box a, .investor-wrapper .tab-box a, .contact-wrapper .tab-box a { text-align: center; display: inline-block; min-width: 1.6rem; height: 0.48rem; line-height: 0.48rem; border-radius: 0.05rem; position: relative; margin-right: 0.3rem; color: #666; font-size: 0.18rem; padding: 0 0.3rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .advice-wrapper .tab-box a:last-child, .investor-wrapper .tab-box a:last-child, .contact-wrapper .tab-box a:last-child { margin-right: 0; } .advice-wrapper .tab-box a:before, .investor-wrapper .tab-box a:before, .contact-wrapper .tab-box a:before, .advice-wrapper .tab-box a:after, .investor-wrapper .tab-box a:after, .contact-wrapper .tab-box a:after { content: ""; border-radius: 0.05rem; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .advice-wrapper .tab-box a:before, .investor-wrapper .tab-box a:before, .contact-wrapper .tab-box a:before { opacity: 0; visibility: hidden; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .advice-wrapper .tab-box a:after, .investor-wrapper .tab-box a:after, .contact-wrapper .tab-box a:after { border: solid 1px #e5e5e5; box-sizing: border-box; } .advice-wrapper .tab-box a.on, .investor-wrapper .tab-box a.on, .contact-wrapper .tab-box a.on { color: #fff; } .advice-wrapper .tab-box a.on:before, .investor-wrapper .tab-box a.on:before, .contact-wrapper .tab-box a.on:before { opacity: 1; visibility: visible; } .advice-wrapper .tab-box a.on:after, .investor-wrapper .tab-box a.on:after, .contact-wrapper .tab-box a.on:after { opacity: 0; visibility: hidden; } .advice-wrapper .detail-box .item, .investor-wrapper .detail-box .item, .contact-wrapper .detail-box .item { display: none; } .contact-wrapper.job { padding-bottom: 0!important; } .contact-wrapper.job:before { display: none; } .contact-wrapper.job .box-1 .box-container { align-items: center; } .contact-wrapper.job .box-1 .map { width: 50%; height: 5.5rem; } .contact-wrapper.job .box-2 { padding-bottom: 2.3rem; } .contact-wrapper.job .box-2 .tab-box { margin-bottom: 0.6rem; text-align: center; } .contact-wrapper.job .box-2 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .contact-wrapper.job .box-2 ul li { position: relative; width: 31.12%; margin-right: 3.32%; margin-top: 0.7rem; background-color: #ffffff; box-shadow: 0px 6px 35px 0px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .contact-wrapper.job .box-2 ul li:nth-child(3n) { margin-right: 0; } .contact-wrapper.job .box-2 ul li:nth-child(-n+3) { margin-top: 0; } .contact-wrapper.job .box-2 ul li:hover:before { opacity: 1; visibility: visible; } .contact-wrapper.job .box-2 ul li:hover .name, .contact-wrapper.job .box-2 ul li:hover .desc { color: #fff; } .contact-wrapper.job .box-2 ul li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .contact-wrapper.job .box-2 ul li:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .contact-wrapper.job .box-2 .pic, .contact-wrapper.job .box-2 .info { position: relative; z-index: 1; } .contact-wrapper.job .box-2 .info { line-height: 0.3rem; padding: 0.4rem 0.36rem; } .contact-wrapper.job .box-2 .name, .contact-wrapper.job .box-2 .desc { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .contact-wrapper.job .box-2 .name { font-size: 0.22rem; font-weight: 700; margin-bottom: 0.11rem; } .contact-wrapper.job .box-2 .desc { font-size: 15px; color: #666; line-height: 0.3rem; } .contact-wrapper .qrcodes { margin-top: 0.5rem; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .contact-wrapper .qrcodes .item { margin-right: 0.2rem; } .contact-wrapper .qrcodes .item:last-child { margin-right: 0; } .contact-wrapper .qrcodes img { display: block; width: 1.5rem; box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 0.1rem; } .contact-wrapper .qrcodes p { color: #666; line-height: 24px; margin-top: 0.2rem; } .contact-wrapper .box-1 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .contact-wrapper .box-1 .info { width: 47.917%; padding-right: 1rem; } .contact-wrapper .box-1 .index-title-box { margin-bottom: 0.5rem; } .contact-wrapper .box-1 .index-title-box .en { margin-bottom: 0; } .contact-wrapper .box-1 .detail-box .item.on ul { display: block; animation: fadeInUp50 0.6s ease; animation-fill-mode: forwards; } .contact-wrapper .box-1 .detail-box { margin-top: 0.5rem; } .contact-wrapper .box-1 .detail-box .item ul { display: none; opacity: 0; } .contact-wrapper .box-1 .detail-box li { position: relative; font-size: var(--fs16); color: #666; line-height: 0.32rem; padding-left: 0.52rem; margin-bottom: 0.28rem; } .contact-wrapper .box-1 .detail-box li:last-child { margin-bottom: 0; } .contact-wrapper .box-1 .detail-box li img { position: absolute; left: 0; top: 0; z-index: 10; width: 0.32rem; } .contact-wrapper .box-1 .map { width: 52.083%; position: relative; overflow: hidden; height: 6.4rem; } .contact-wrapper .box-1 .map .border:before, .contact-wrapper .box-1 .map .border:after, .contact-wrapper .box-1 .map:before, .contact-wrapper .box-1 .map:after { content: ""; position: absolute; z-index: 10; width: 0.34rem; height: 0.5rem; background-size: contain; background-repeat: no-repeat; background-position: center center; } .contact-wrapper .box-1 .map:before { left: 0; top: 0; background-image: url(../img/border_lt.png); background-position: left top; } .contact-wrapper .box-1 .map:after { right: 0; top: 0; background-image: url(../img/border_rt.png); background-position: right top; } .contact-wrapper .box-1 .map .border:before { left: 0; bottom: 0; background-image: url(../img/border_bl.png); background-position: left bottom; } .contact-wrapper .box-1 .map .border:after { right: 0; bottom: 0; background-image: url(../img/border_rb.png); background-position: right bottom; } .contact-wrapper .box-1 .map .img { display: block; width: 100%; height: 100%; object-fit: cover; } .contact-wrapper .box-2 { background: #f9f9f9; } .contact-wrapper .box-2 .index-more { margin-top: 0.5rem; } .contact-wrapper .form { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .contact-wrapper .form .group { position: relative; width: 32.42%; margin-right: 1.37%; margin-top: 1.37%; } .contact-wrapper .form .group.max { width: 100%; margin-right: 0; } .contact-wrapper .form .group.max label { line-height: 0.3rem; top: 0.12rem; } .contact-wrapper .form .text, .contact-wrapper .form .msg { width: 100%; background-color: #fff; border-radius: 0.05rem; border: solid 1px #ededed; transition: border 0.3s ease; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; color: #666; padding-right: 0.3rem; } .contact-wrapper .form .text:focus, .contact-wrapper .form .msg:focus { border-color: #082c7e; } .contact-wrapper .form label { color: #999; position: absolute; left: 0.3rem; top: 0; z-index: 10; line-height: 0.55rem; } .contact-wrapper .form label i { display: inline-block; color: #dc021c; margin-left: 0.1rem; font-style: normal; } .contact-wrapper .form .text { height: 0.55rem; line-height: 0.55rem; padding-left: 1.1rem; } .contact-wrapper .form .msg { height: 2rem; line-height: 0.3rem; resize: none; padding-left: 0.3rem; padding-top: 0.4rem; padding-bottom: 0.3rem; } .contact-wrapper .box-3 .box-container { position: relative; } .contact-wrapper .box-3 .tab-box { position: absolute; right: 0; top: 0; z-index: 10; } .contact-wrapper .box-3 .tab-box a { min-width: 1.68rem; height: 0.5rem; line-height: 0.5rem; } .contact-wrapper .box-3 .detail-box .item.on li { display: block; animation: zoomIn 0.6s ease; animation-fill-mode: forwards; } .contact-wrapper .box-3 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .contact-wrapper .box-3 li { display: none; opacity: 0; text-align: center; width: 9.12%; margin-top: 0.46rem; margin-right: 6.0266%; } .contact-wrapper .box-3 li .pic { box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08); border-radius: 5px; margin: 0 auto; } .contact-wrapper .box-3 li .pic img { height: 1.4rem; object-fit: contain; } .contact-wrapper .box-3 li p { font-size: var(--fs16); color: #888; line-height: 0.3rem; margin-top: 0.14rem; } .goods-cat-box { width: 22.786%; } .goods-cat-box .caption { font-size: 18px; line-height: 30px; margin-bottom: 0.14rem; font-weight: 700; } .goods-cat-box .search { position: relative; margin-bottom: 0.5rem; } .goods-cat-box .search .text { width: 100%; height: 0.56rem; line-height: 0.56rem; background-color: #fff; border-radius: 0px 0px 0.1rem 0px; border: solid 1px #eee; transition: border 0.3s ease; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; padding: 0 0.6rem 0 0.22rem; } .goods-cat-box .search .text:hover { border-color: #082c7e; } .goods-cat-box .search .submit { position: absolute; right: 0; top: 0; z-index: 10; width: 0.56rem; height: 100%; background-color: #082d80; background-image: url(../img/search3.png); background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .goods-cat-box .search .submit:hover { background-color: #082c7e; } .goods-cat-box .goods-cat { border: 1px solid #eee; } .goods-cat-box .goods-cat li { border-bottom: 1px solid #eee; } .goods-cat-box .goods-cat li:last-child { border-bottom: none; } .goods-cat-box .goods-cat li.on > a { color: #fff; background-color: #082c7e; } .goods-cat-box .goods-cat li.on > a:after { background-image: url(../img/g-down.png); } .goods-cat-box .goods-cat li > a { color: #222; font-weight: 700; line-height: 0.7rem; padding: 0 0.44rem 0 0.32rem; } .goods-cat-box .goods-cat li > a:after { content: ""; width: 11px; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; right: 0.27rem; top: 0; background-image: url(../img/g-right.png); } .goods-cat-box .goods-cat .child { padding: 0.16rem 0; display: none; } .goods-cat-box .goods-cat .child a { padding: 0 0.32rem; line-height: 0.44rem; } .goods-cat-box .goods-cat .child a:hover, .goods-cat-box .goods-cat .child a.on { font-weight: 700; color: #082c7e; } .goods-cat-box .goods-cat a { display: block; color: #333; font-size: var(--fs16); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .goods-wrapper .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .goods-wrapper .main.special .goods-cat-box { display: none; } .goods-wrapper .main.special .list { width: 100%; } .goods-wrapper .main.special .list .pic img { height: 3.34rem; } .goods-wrapper .list { width: 71.94%; } .goods-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .goods-wrapper .list li { width: 30.77%; text-align: center; margin-right: 3.845%; margin-top: 0.32rem; } .goods-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .goods-wrapper .list li:hover .title { color: #082c7e; } .goods-wrapper .list .pic img { height: 2.4rem; object-fit: cover; } .goods-wrapper .list .title { font-size: var(--fs16); color: #222; line-height: 0.3rem; height: 0.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.22rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .page-more { display: block; color: #fff; width: 1.6rem; line-height: 0.5rem; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; text-align: center; font-size: var(--fs16); border-radius: 5px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .page-more:hover { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .goodsinfo-wrapper .base-box .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .goodsinfo-wrapper .base-box .pic-box { width: 50%; } .goodsinfo-wrapper .base-box .info-box { width: 42.96%; } .goodsinfo-wrapper .base-box .swiper-slide:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .goodsinfo-wrapper .base-box .swiper-slide img { display: block; width: 100%; transition: transform 0.8s ease; -webkit-transition: transform 0.8s ease; -moz-transition: transform 0.8s ease; -ms-transition: transform 0.8s ease; -o-transition: transform 0.8s ease; } .goodsinfo-wrapper .base-box .caption { color: #222; font-weight: 700; line-height: 0.3rem; margin-bottom: 0.04rem; } .goodsinfo-wrapper .base-box .caption, .goodsinfo-wrapper .base-box .content { font-size: 15px; } .goodsinfo-wrapper .base-box .content { margin-bottom: 0.36rem; } .goodsinfo-wrapper .base-box .page-more { margin-top: 0.55rem; } .goodsinfo-wrapper .info-box h2 { font-size: 0.36rem; color: #222; line-height: 0.36rem; font-weight: 700; margin-bottom: 0.28rem; } .goodsinfo-wrapper .info-box .brief { border-bottom: 1px solid #e5e5e5; margin: 0.28rem auto 0.32rem; padding-bottom: 0.3rem; } .goodsinfo-wrapper .info-box .brief ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .goodsinfo-wrapper .info-box .brief li { width: 25%; padding-right: 0.2rem; color: #989898; line-height: 0.3rem; margin-top: 0.08rem; } .goodsinfo-wrapper .info-box .brief li img { width: 0.3rem; display: inline-block; margin-left: 0.08rem; } .goodsinfo-wrapper .swiper-pagination { display: none; } .goodsinfo-wrapper .thumb-box { position: relative; padding: 0 0.36rem; margin-top: 0.4rem; } .goodsinfo-wrapper .thumb-box .swiper-slide { opacity: 0.3; cursor: pointer; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .goodsinfo-wrapper .thumb-box .swiper-slide.on { opacity: 1; } .goodsinfo-wrapper .swiper-btn { width: 8px; height: 14px; } .goodsinfo-wrapper .prev { left: 0; background-image: url(../img/i-prev.png); } .goodsinfo-wrapper .prev:hover { background-image: url(../img/i-prev2.png); } .goodsinfo-wrapper .next { right: 0; background-image: url(../img/i-next.png); } .goodsinfo-wrapper .next:hover { background-image: url(../img/i-next2.png); } .goodsinfo-wrapper .tab-box { border-bottom: solid 1px #ededed; } .goodsinfo-wrapper .tab-box .box-container { font-size: 0; border-top: solid 1px #ededed; } .goodsinfo-wrapper .tab-box a { display: inline-block; width: 1.8rem; line-height: 0.52rem; text-align: center; font-size: var(--fs16); } .goodsinfo-wrapper .tab-box a:hover, .goodsinfo-wrapper .tab-box a.on { color: #fff; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .goodsinfo-wrapper table { width: 100%; } .goodsinfo-wrapper table td, .goodsinfo-wrapper table th { height: 0.6rem; text-align: center; font-size: 14px; line-height: 20px; } .goodsinfo-wrapper table th { background: #082c7e; color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); } .goodsinfo-wrapper table td { border: 1px solid rgba(0, 0, 0, 0.1); } .goodsinfo-wrapper table tbody tr:nth-child(even) td { background: #f5f5f5; } .goodsinfo-wrapper .detail-box > .box-container > div { padding-top: 1rem; } .case-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .case-box li { width: 30.86%; margin-right: 3.71%; margin-top: 0.6rem; } .case-box li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .case-box li:hover a:after { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .case-box li:hover .title { color: #082c7e; } .case-box li:hover .more { color: #082c7e; } .case-box li a { display: block; position: relative; background-color: #fff; box-shadow: 2px 5px 30px 0px rgba(0, 0, 0, 0.07); } .case-box li a:after { content: ""; width: 100%; height: 0.02rem; background-color: #082c7e; position: absolute; left: 0; bottom: 0; z-index: 10; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .case-box .info { padding: 0.34rem 0.44rem 0.38rem; } .case-box .title { font-size: 0.22rem; color: #222; line-height: 0.3rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .case-box .desc { line-height: 0.27rem; font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 0.54rem; margin: 0.12rem auto 0.22rem; } .case-wrapper .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .case-wrapper .case-box { width: 71.94%; } .brand-wrapper .index-title-box .brief { font-size: var(--fs16); line-height: 0.32rem; width: 78.125%; margin: 0.38rem auto 0; } .brand-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .brand-wrapper .list li { width: 31.12%; margin-right: 3.32%; margin-top: 3.32%; background-color: #fff; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08); } .brand-wrapper .list li:nth-child(3n) { margin-right: 0; } .brand-wrapper .list li:nth-child(-n+3) { margin-top: 0; } .brand-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .brand-wrapper .list li a { display: block; } .brand-wrapper .list .logo img { display: block; width: 100%; } .news-wrapper .first-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 1.2rem; } .news-wrapper .swiper-box { width: 59.9%; } .news-wrapper .swiper-box .info { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; padding: 0.32rem 1.4rem 0.32rem 0.5rem; background-color: rgba(0, 0, 0, 0.7); } .news-wrapper .swiper-box .title, .news-wrapper .swiper-box .date { opacity: 0; visibility: hidden; transform: translateY(0.8rem); -webkit-transform: translateY(0.8rem); -moz-transform: translateY(0.8rem); -ms-transform: translateY(0.8rem); -o-transform: translateY(0.8rem); transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; } .news-wrapper .swiper-box .title { font-size: 0.28rem; color: #fff; height: 0.3rem; -webkit-line-clamp: 1; } .news-wrapper .swiper-box .date { font-family: "mr"; color: #fff; margin-top: 0.13rem; transition-delay: 0.2s; } .news-wrapper .swiper-box .swiper-slide-active .title, .news-wrapper .swiper-box .swiper-slide-active .date { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .news-wrapper .swiper-box .swiper-slide:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .news-wrapper .swiper-box .swiper-slide a { display: block; } .news-wrapper .swiper-box .swiper-pagination { display: block; bottom: 0.35rem; font-size: 0; text-align: right; right: 0.5rem; width: auto; } .news-wrapper .swiper-box .swiper-pagination .swiper-pagination-bullet { opacity: 1; background: none; margin: 0 0.09rem; width: 0.12rem; height: 0.12rem; border: 0.02rem solid #fff; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .news-wrapper .swiper-box .swiper-pagination .swiper-pagination-bullet:focus, .news-wrapper .swiper-box .swiper-pagination .swiper-pagination-bullet:active, .news-wrapper .swiper-box .swiper-pagination .swiper-pagination-bullet:link { outline: none; } .news-wrapper .swiper-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; } .news-wrapper .news-box { width: 36.2%; padding: 0.25rem 0.5rem 0; background-color: #f7f7f8; } .news-wrapper .news-box .title { font-size: 0.22rem; color: #181818; line-height: 0.35rem; height: 0.7rem; } .news-wrapper .news-box .date { font-size: 0.18rem; margin-bottom: 0.1rem; } .news-wrapper .news-box li { padding: 0.48rem 0; border-bottom: 1px solid #efeff1; } .news-wrapper .news-box li:last-child { padding-bottom: 0; border-bottom: none; } .news-wrapper .news-box li.on .title { color: #082c7e; } .news-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .news-wrapper .list li { width: 31.64%; margin-right: 2.54%; margin-top: 0.74rem; background-color: #ffffff; box-shadow: 0px 5px 0.45rem 0px rgba(0, 0, 0, 0.09); } .news-wrapper .list li:nth-child(-n+3) { margin-top: 0; } .news-wrapper .list li:nth-child(3n) { margin-right: 0; } .news-wrapper .list li:hover { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .news-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .news-wrapper .list li:hover .title { color: #fff; } .news-wrapper .list li:hover .desc { color: rgba(255, 255, 255, 0.75); } .news-wrapper .list li:hover .date { color: rgba(255, 255, 255, 0.4); } .news-wrapper .list li a { display: block; } .news-wrapper .list .info { padding: 0.4rem 0.44rem 0.48rem; } .news-wrapper .desc { font-size: 15px; color: rgba(0, 0, 0, 0.75); line-height: 26px; height: 52px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0.16rem auto 0.3rem; } .news-wrapper .date { font-size: 0.2rem; font-family: "mb"; line-height: 0.24rem; color: rgba(51, 51, 51, 0.3); } .news-wrapper .title { font-size: 0.2rem; line-height: 0.3rem; height: 0.6rem; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-wrapper .date, .news-wrapper .title, .news-wrapper .desc { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .newsinfo-wrapper .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .newsinfo-wrapper .top { margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid #eee; } .newsinfo-wrapper .top h1 { font-size: 0.3rem; font-weight: 700; line-height: 0.48rem; margin-bottom: 0.14rem; text-align: left; } .newsinfo-wrapper .top .desc { text-align: left; } .newsinfo-wrapper .top .desc span { display: inline-block; margin-right: 0.5rem; } .newsinfo-wrapper .top .desc span:last-child { margin-right: 0; } .newsinfo-wrapper .left { margin-right: 0.6rem; flex: 1; overflow: hidden; } .newsinfo-wrapper .right { width: 3.36rem; position: sticky; top: 1rem; height: 100%; padding: 0.5rem 0.4rem 0.6rem; background-color: #f5f5f5; } .newsinfo-wrapper .right p, .newsinfo-wrapper .right p a { font-size: var(--fs16); } .newsinfo-wrapper .right p { color: #666; line-height: 0.36rem; margin-bottom: 0.2rem; } .newsinfo-wrapper .right p:hover a { color: #082c7e; font-weight: 700; } .newsinfo-wrapper .right p a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; width: 100%; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .newsinfo-wrapper .right p b { color: #333; } .newsinfo-wrapper .share-box { font-size: 0; margin-top: 0.28rem; } .newsinfo-wrapper .share-box a { display: inline-block; width: 0.36rem; height: 0.36rem; background-repeat: no-repeat; margin-right: 0.2rem; background-size: 0.36rem; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .newsinfo-wrapper .share-box a:last-child { margin-right: 0; } .newsinfo-wrapper .share-box .wechat { background-image: url(../img/ni-wechat.png); } .newsinfo-wrapper .share-box .wechat:hover { background-image: url(../img/ni-wechat2.png); } .newsinfo-wrapper .share-box .weibo { background-image: url(../img/ni-weibo.png); } .newsinfo-wrapper .share-box .weibo:hover { background-image: url(../img/ni-weibo2.png); } .newsinfo-wrapper .share-box .qq { background-image: url(../img/ni-qq.png); } .newsinfo-wrapper .share-box .qq:hover { background-image: url(../img/ni-qq2.png); } .newsinfo-wrapper .return { display: block; width: 100%; line-height: 0.5rem; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; color: #fff; margin-top: 0.4rem; text-align: center; font-size: var(--fs16); } .newsinfo-wrapper .return:hover { background: #082c7e; } .newsinfo-wrapper .return img { vertical-align: middle; position: relative; top: -2px; margin-right: 0.13rem; width: 0.2rem; } .newsinfo-wrapper .content { line-height: 0.30rem; font-size: var(--fs16); } .newsinfo-wrapper .content div { line-height: 0.30rem; font-size: var(--fs16); } .data li { text-align: center; } .stock-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding-top: 0.4rem; } .stock-box li { width: 21.13%; border-right: 1px solid #f0f1f2; padding-right: 20px; } .stock-box li:last-child { width: auto; border-right: none; padding-right: 0; } .stock-box .num { font-size: 0.36rem; color: #666; font-family: "mm"; height: 0.36rem; line-height: 0.36rem; } .stock-box p { font-size: var(--fs16); color: #666; line-height: 0.24rem; margin-bottom: 0.12rem; } .stock-box h2 { font-size: 0.36rem; line-height: 0.4rem; font-weight: 700; } .stock-box .number { color: #f73131; font-size: 0.18rem; text-transform: uppercase; font-family: "mm"; height: 0.6rem; line-height: 0.6rem; margin-top: 0.5rem; } .stock-box .number.down { color: #0ebe98; } .stock-box .number.down i { background-image: url(../img/i-down.png); } .stock-box .number span { font-size: 0.72rem; margin-right: 0.4rem; } .stock-box .number i { display: inline-block; width: 14px; height: 17px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-left: 8px; background-image: url(../img/i-up.png); } .stock-box .tips { font-size: 15px; color: #999; line-height: 24px; text-align: right; } .stock-wrapper .stock-box { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .stock-wrapper .stock { width: 60.16%; height: 100%; } .stock-wrapper .info { width: 30.6%; } .stock-wrapper .caption { font-size: 0.3rem; font-weight: 700; line-height: 0.4rem; margin-bottom: 0.42rem; } .stock-wrapper .item { margin-bottom: 0.74rem; } .stock-wrapper .item:first-child th, .stock-wrapper .item:first-child td { text-align: center; } .stock-wrapper .item:first-child th { height: 40px; } .stock-wrapper .item:nth-child(2) table th { width: 32.562%; } .stock-wrapper .item:nth-child(2) table th:first-child { width: 30.338%; } .stock-wrapper .item:nth-child(2) table th:nth-child(2) { width: 37.1%; } .stock-wrapper .item:last-child { margin-bottom: 0; } .stock-wrapper .item tbody tr:nth-child(even) td { background-color: #f6f7fa; } .stock-wrapper table { width: 100%; border: 1px solid #efefef; text-align: center; } .stock-wrapper table thead th { border: 1px solid rgba(255, 255, 255, 0.2); } .stock-wrapper table th, .stock-wrapper table td { padding-left: 0.2rem; padding-right: 0.2rem; } .stock-wrapper table th { font-size: 0.18rem; background-color: #082c7e; color: #fff; height: 0.74rem; } .stock-wrapper table td { color: #000; height: 0.64rem; font-size: var(--fs16); } .finance-wrapper .main { border-top: 1px solid #e5e5e5; padding-top: 1rem; } .finance-wrapper .main .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .finance-wrapper .box { width: calc(100% - 3.78rem); } .finance-wrapper .box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .finance-wrapper .box li { width: 22.02%; margin-right: 3.973%; margin-top: 0.52rem; } .finance-wrapper .box li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .finance-wrapper .box li:hover .title { color: #082c7e; } .finance-wrapper .box .title { font-size: var(--fs16); color: #595656; line-height: 0.3rem; height: 0.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin: 0.12rem auto 0.06rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; font-weight: 700; } .finance-wrapper .box .bottom { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ line-height: 0.24rem; align-items: center; } .finance-wrapper .box .view { color: #082c7e; background: url(../img/eye2.png) no-repeat left center; background-size: 12px; padding-left: 22px; } .finance-wrapper .time { color: #bababa; font-family: "mr"; line-height: 0.24rem; margin-right: 0.2rem; } .form-box { width: 280px; background-color: #f9f9f9; height: 100%; padding-bottom: 2.07rem; background-image: url(../img/financebg.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: 100%; } .form-box .pic { position: relative; border: solid 1px #f2f2f2; } .form-box .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .form-box .info { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; padding: 0 0.3rem 0.22rem; } .form-box .name { font-size: 0.24rem; color: #fff; line-height: 0.3rem; font-weight: 700; } .form-box .en { font-family: "mr"; line-height: 0.24rem; text-transform: uppercase; margin-top: 0.04rem; color: rgba(255, 255, 255, 0.5); } .form-box .form { padding: 0 0.3rem; } .form-box .form .title { color: #999; line-height: 24px; margin-bottom: 0.1rem; } .form-box .group { position: relative; margin-top: 0.34rem; } .form-box .text, .form-box .caption { height: 45px; line-height: 45px; border: solid 1px #f2f2f2; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "mr"; } .form-box .text { width: 100%; padding: 0 0.5rem 0 0.2rem; } .form-box .submit { position: absolute; right: 0.2rem; bottom: 12px; z-index: 10; } .form-box .submit img { width: 16px; } .form-box .caption { position: relative; padding: 0 0.3rem 0 0.5rem; cursor: pointer; } .form-box .caption.on:after { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } .form-box .caption:before, .form-box .caption:after { content: ""; position: absolute; z-index: 10; top: 0; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; } .form-box .caption:before { width: 16px; left: 20px; background-image: url(../img/clock.png); } .form-box .caption:after { display: block; width: 7px; background-image: url(../img/down2.png); right: 20px; } .form-box .list { width: 100%; position: absolute; left: 0; top: 100%; z-index: 12; background: #fff; max-height: 184px; overflow-y: auto; display: none; border: 1px solid #f2f2f2; border-top: none; } .form-box .list a { display: block; line-height: 45px; padding: 0 0.3rem 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "mr"; border-bottom: 1px solid #f2f2f2; } .form-box .list a:hover, .form-box .list a.on { color: #082c7e; } .form-box .list a:last-child { border-bottom: none; } .advice-wrapper .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; flex-flow: wrap; } .advice-wrapper .tab-box { text-align: center; width: 100%; margin-bottom: 0.8rem; } .advice-wrapper .box { width: calc(100% - 3.78rem); } .advice-wrapper .box li { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding: 0.18rem 0; cursor: default; background: url(../img/line2.png) repeat-x left bottom; } .advice-wrapper .box li:hover { padding-left: 0.3rem; padding-right: 0.3rem; background-color: #fafafa; } .advice-wrapper .box li:hover .title { font-weight: 700; color: #082c7e; } .advice-wrapper .box .info { flex: 1; overflow: hidden; padding-right: 0.6rem; } .advice-wrapper .box .title { font-size: var(--fs16); color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 0.36rem; } .advice-wrapper .box .time { color: #bababa; font-family: "mr"; margin-top: 0.05rem; line-height: 0.24rem; } .advice-wrapper .btn-box { font-size: 0; } .advice-wrapper .btn-box a { display: inline-block; font-size: var(--fs16); color: #666; margin-right: 0.28rem; padding-right: 0.28rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; border-right: 1px solid #f2f2f2; } .advice-wrapper .btn-box a:hover { font-weight: 700; color: #082c7e; } .advice-wrapper .btn-box a:last-child { padding-right: 0; margin-right: 0; border-right: none; } .advice-wrapper .btn-box a img { vertical-align: middle; width: 0.24rem; display: inline-block; position: relative; top: -2px; margin-right: 0.15rem; } .team-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .team-wrapper .list li { width: 23.046%; margin-right: 2.6053%; margin-top: 0.75rem; } .team-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .team-wrapper .name { font-size: 0.26rem; line-height: 0.36rem; font-weight: 700; margin-top: 0.3rem; } .team-wrapper .name i { font-size: var(--fs16); color: #cfcfcf; font-family: "mr"; display: inline-block; margin-left: 0.08rem; font-weight: 500; text-transform: uppercase; } .team-wrapper .desc { font-size: var(--fs16); color: #082c7e; line-height: 0.24rem; margin-top: 0.06rem; } .contactus-wrapper { padding-bottom: 0!important; background: none; } .contactus-wrapper .box-1 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .contactus-wrapper .box-1 .index-title-box { margin-bottom: 0.4rem; } .contactus-wrapper .box-1 .info { width: 45%; } .contactus-wrapper .box-1 .info li { position: relative; font-size: var(--fs16); color: #666; line-height: 0.32rem; padding-left: 0.52rem; margin-bottom: 0.22rem; } .contactus-wrapper .box-1 .info li:last-child { margin-bottom: 0; } .contactus-wrapper .box-1 .info li img { position: absolute; left: 0; top: 0; z-index: 10; width: 0.32rem; } .contactus-wrapper .box-1 .pic { width: 50%; } .contactus-wrapper .box-1 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .contactus-wrapper .box-1 .pic img { height: 100%; object-fit: cover; } .contactus-wrapper .qrcodes { margin-top: 0.5rem; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .contactus-wrapper .qrcodes .item { width: 1.3rem; margin-right: 0.4rem; } .contactus-wrapper .qrcodes .item:last-child { margin-right: 0; } .contactus-wrapper .qrcodes .img { box-shadow: 0px 3px 0.2rem 0px rgba(0, 0, 0, 0.08); border-radius: 0.05rem; overflow: hidden; background-color: #fff; } .contactus-wrapper .qrcodes .img img { display: block; width: 100%; } .contactus-wrapper .qrcodes p { text-align: center; font-size: var(--fs16); line-height: 0.3rem; color: #666; margin-top: 0.12rem; } .contactus-wrapper .box-2 { background: url(../img/contactusbg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; } .contactus-wrapper .form { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; /* input placeholder */ } .contactus-wrapper .form .group { position: relative; width: 32.42%; margin-right: 1.37%; margin-top: 1.37%; } .contactus-wrapper .form .group.max { width: 100%; margin-right: 0; } .contactus-wrapper .form .group.max label { line-height: 0.3rem; top: 0.12rem; } .contactus-wrapper .form .text, .contactus-wrapper .form .msg { width: 100%; background-color: #fff; border-radius: 0.05rem; border: solid 1px #ededed; transition: border 0.3s ease; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; color: #999; padding-right: 0.3rem; padding-left: 0.3rem; } .contactus-wrapper .form .text:focus, .contactus-wrapper .form .msg:focus { border-color: #082c7e; } .contactus-wrapper .form ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-size: 14px; } .contactus-wrapper .form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; font-size: 14px; } .contactus-wrapper .form ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; font-size: 14px; } .contactus-wrapper .form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; font-size: 14px; } .contactus-wrapper .form .text { height: 0.55rem; line-height: 0.55rem; } .contactus-wrapper .form .msg { height: 2rem; line-height: 0.3rem; resize: none; padding-left: 0.3rem; padding-top: 0.15rem; padding-bottom: 0.15rem; } .contactus-wrapper .page-more { width: 1.5rem; margin-top: 0.3rem; font-size: 14px; } .investor-wrapper .tab-box { text-align: center; margin-bottom: 1.4rem; } .investor-wrapper .box-item { display: none; } .investor-wrapper .box-item:nth-child(2) .index-title-box h3 { letter-spacing: 0; text-transform: capitalize; } .investor-wrapper .box-1 .box-container { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .investor-wrapper .box-1 .box-container:before { content: ""; position: absolute; left: 0; top: 0; z-index: 10; width: 0.01rem; margin-left: -0.005rem; left: 50%; background: #eee; height: 100%; } .investor-wrapper .box-1 .info-box { width: 50%; padding-right: 0.84rem; } .investor-wrapper .box-1 .info-box .index-title-box { margin-bottom: 0.4rem; } .investor-wrapper .box-1 .content { line-height: 0.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; height: 1.2rem; margin-bottom: 0.4rem; } .investor-wrapper .box-1 .stock-box { width: 43.32%; position: relative; } .investor-wrapper .box-1 .stock-box .index-title-box { margin-bottom: 0.73rem; } .investor-wrapper .box-1 .stock-box ul { padding-top: 0.2rem; } .investor-wrapper .box-1 .stock-box h2 { font-size: 0.26rem; line-height: 0.36rem; } .investor-wrapper .box-1 .stock-box .number { margin-top: 0.15rem; } .investor-wrapper .box-1 .stock-box .number span { font-size: 0.54rem; margin-right: 0.28rem; } .investor-wrapper .box-1 .stock-box .num { font-size: 0.32rem; } .investor-wrapper .box-1 .info { position: absolute; right: 0; top: 0; z-index: 10; } .investor-wrapper .box-1 .tips { text-align: left; } .investor-wrapper .box-2 { background-color: #f9f9f9; } .investor-wrapper .box-2 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; flex-flow: wrap; } .investor-wrapper .box-2 li { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ width: 49.153%; margin-top: 1.694%; background-color: #fff; box-shadow: 0px 2px 0.3rem 0px rgba(63, 63, 63, 0.04); padding-top: 0.28rem; padding-bottom: 0.28rem; align-items: center; padding-right: 0.4rem; } .investor-wrapper .box-2 li:nth-child(-n+2) { margin-top: 0; } .investor-wrapper .box-2 li:hover .name { color: #082c7e; font-weight: 700; } .investor-wrapper .box-2 .date { text-align: center; width: 1.32rem; line-height: 0.24rem; border-right: 1px solid #ededed; } .investor-wrapper .box-2 .date p { color: #6e6e6e; font-family: "ml"; margin-top: 0.06rem; } .investor-wrapper .box-2 .day { font-size: 0.28rem; color: #6e6e6e; font-family: "mm"; } .investor-wrapper .box-2 .name { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-left: 0.4rem; font-size: 0.2rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .investor-wrapper .box-2 .time { display: none; } .investor-wrapper .box-3 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .investor-wrapper .box-3 li { width: 31.51%; margin-right: 2.735%; margin-top: 2.735%; } .investor-wrapper .box-3 li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .investor-wrapper .box-3 li:hover .name { background-color: rgba(0, 0, 0, 0.8); } .investor-wrapper .box-3 li a { display: block; position: relative; } .investor-wrapper .box-3 .name { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; font-size: 0.22rem; color: #fff; line-height: 0.8rem; padding: 0 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; background-color: rgba(0, 0, 0, 0.4); } .bidding-wrapper .special li { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .bidding-wrapper .special li:hover .icon { background-image: url(../img/pdf4.png); } .bidding-wrapper .special li a { display: block; } .bidding-wrapper .special li .icon { width: 0.3rem; height: 0.42rem; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/pdf3.png); transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .bidding-wrapper li { position: relative; padding-left: 2.1rem; padding-right: 0.4rem; line-height: 0.9rem; height: 0.9rem; border-bottom: 1px solid #e5e5e5; } .bidding-wrapper li:first-child { border-top: 1px solid #e5e5e5; } .bidding-wrapper li:before { content: ""; width: 100%; height: 100%; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; visibility: hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .bidding-wrapper li:hover:before { opacity: 1; visibility: visible; } .bidding-wrapper li:hover .title { color: #fff; } .bidding-wrapper li:hover .time { color: rgba(255, 255, 255, 0.5); } .bidding-wrapper li a { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .bidding-wrapper .time { font-size: 0.18rem; font-family: "mb"; position: absolute; left: 0; top: 0; z-index: 10; width: 1.8rem; text-align: center; color: rgba(51, 51, 51, 0.25); } .bidding-wrapper .title { font-size: var(--fs16); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; flex: 1; padding-right: 1rem; } .question-wrapper li { position: relative; } .question-wrapper li:first-child .top { border-top: 1px solid #e5e5e5; } .question-wrapper li.on .title { color: #fff; } .question-wrapper li.on .icon { border-color: #fff; } .question-wrapper li.on .icon:before, .question-wrapper li.on .icon:after { background-color: #fff; } .question-wrapper li.on .icon:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .question-wrapper li.on .top:before { opacity: 1; visibility: visible; } .question-wrapper li.on .top .tag { color: #082c7e; background: #fff; } .question-wrapper li > div { position: relative; padding-left: 0.8rem; } .question-wrapper li .tag { top: 0.5rem; } .question-wrapper li .icon { width: 0.35rem; height: 0.35rem; border: solid 1px #eee; border-radius: 50%; position: absolute; right: 0.4rem; top: 0.23rem; } .question-wrapper li .icon:before, .question-wrapper li .icon:after { content: ""; background-color: #082c7e; position: absolute; left: 50%; top: 50%; z-index: 1; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .question-wrapper li .icon:before { width: 0.13rem; height: 0.03rem; margin-top: -0.015rem; margin-left: -0.065rem; } .question-wrapper li .icon:after { width: 0.03rem; height: 0.13rem; margin-top: -0.065rem; margin-left: -0.015rem; } .question-wrapper .top { position: relative; cursor: pointer; padding-right: 0.9rem; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ height: 0.8rem; align-items: center; border-bottom: 1px solid #e5e5e5; } .question-wrapper .top:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .question-wrapper .top .tag { top: 0.28rem; } .question-wrapper .detail { display: none; padding-top: 0.45rem; padding-bottom: 0.5rem; padding-right: 0.12rem; background-color: #ffffff; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); } .question-wrapper .detail .tag { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; color: #fff; } .question-wrapper .tag { display: inline-block; width: 0.25rem; height: 0.25rem; line-height: 0.25rem; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; font-family: "ml"; color: #fff; text-align: center; border-radius: 50%; position: absolute; left: 0.28rem; z-index: 1; } .question-wrapper .title { font-size: 16px; line-height: 0.3rem; max-height: 0.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-right: 0.2rem; } .question-wrapper .desc { color: #888; line-height: 0.3rem; } .job-wrapper .index-title-box { margin-bottom: 0.38rem; } .job-wrapper .search-box { text-align: center; margin-bottom: 1rem; } .job-wrapper .form { position: relative; width: 5.7rem; margin: 0 auto; } .job-wrapper .text, .job-wrapper .submit { height: 0.48rem; line-height: 0.46rem; } .job-wrapper .text { width: 100%; border-radius: 6px; border: solid 1px #e6e6e6; opacity: 0.9; font-size: 15px; padding: 0 1.5rem 0 0.26rem; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .job-wrapper .text:focus { border-color: #082c7e; } .job-wrapper .submit { position: absolute; right: 0; top: 0; z-index: 10; width: 1.2rem; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; color: #fff; font-size: 0.17rem; border-radius: 0 6px 6px 0; } .job-wrapper .submit img { vertical-align: middle; position: relative; top: -2px; margin-right: 0.12rem; } .job-box .top { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ padding: 0 0.4rem 0 0.8rem; align-items: center; height: 0.84rem; } .job-box .top div { width: 13.41%; line-height: 0.3rem; font-size: var(--fs16); padding-right: 0.15rem; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .job-box .top div span { display: none; } .job-box .top div.name { width: 16.8%; } .job-box .top div.apartment { width: 16.66%; } .job-box .top div.company { width: 22.32%; } .job-box .top div.number { width: 16.1%; } .job-box .top .icon { width: 13px; height: 13px; padding-right: 0; } .job-box .top .date { flex: 1; overflow: hidden; } .job-box .name img { vertical-align: middle; margin-left: 0.1rem; width: 0.3rem; position: relative; top: -2px; } .job-box .detail { box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08); } .job-box > .top { background: #dcdcdc; } .job-box > .top div { color: #333; font-size: 0.2rem; font-weight: 700; } .job-box ul li { cursor: pointer; } .job-box ul li:last-child { border: none; } .job-box ul li:first-child .top { border-top: 1px solid #e5e5e5; } .job-box ul li.on .top:before { opacity: 1; visibility: visible; } .job-box ul li.on .top div { color: #fff; } .job-box ul li.on .icon { background-image: url(../img/j-down.png) !important; } .job-box ul li .top { position: relative; border-bottom: 1px solid #e5e5e5; } .job-box ul li .top:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .job-box ul li .top div { color: #666; } .job-box ul li .icon { background-image: url(../img/j-right.png); background-repeat: no-repeat; background-size: 100%; background-position: center center; } .job-box ul li .detail { display: none; padding: 0.53rem 0.9rem 0.7rem 0.8rem; background: #fff; } .job-box ul li .desc { color: #808080; line-height: 0.3rem; margin-bottom: 0.36rem; } .job-box ul li .desc:last-child { margin-bottom: 0; } .job-box ul li .caption { font-size: 0.18rem; font-weight: 700; line-height: 0.3rem; margin-bottom: 0.08rem; } .joblist-wrapper .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .joblist-wrapper .other-box { width: 3.45rem; } .joblist-wrapper .other-box .caption { font-size: var(--fs16); color: #222; margin-right: 0.2rem; font-weight: 700; line-height: 38px; height: 38px; } .joblist-wrapper .other-box .item { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 0.2rem; } .joblist-wrapper .other-box .item:last-child { margin-bottom: 0; } .joblist-wrapper .other-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; flex-flow: wrap; width: 2.6rem; } .joblist-wrapper .other-box ul li { cursor: pointer; width: 1.25rem; height: 38px; line-height: 36px; border-radius: 5px; border: solid 1px #eee; text-align: center; margin-top: 0.1rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.1rem; } .joblist-wrapper .other-box ul li.on { background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; color: #fff; } .joblist-wrapper .other-box ul li:nth-child(-n+2) { margin-top: 0; } .joblist-wrapper .form { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 0.2rem; } .joblist-wrapper .form .submit { position: absolute; right: 0; top: 0; z-index: 10; width: 38px; height: 38px; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; border-radius: 0px 5px 5px 0px; } .joblist-wrapper .search { width: 2.6rem; position: relative; } .joblist-wrapper .search .text { height: 38px; border: solid 1px #eee; border-radius: 5px; color: #999; padding: 0 0.55rem 0 0.12rem; width: 100%; transition: border 0.3s ease; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; } .joblist-wrapper .search .text:focus { border-color: #082c7e; } .joblist-wrapper .search .submit { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; justify-content: center; } .joblist-wrapper .cate-box { text-align: center; font-size: 0; margin-bottom: 0.8rem; } .joblist-wrapper .cate-box a { display: inline-block; min-width: 1.64rem; padding: 0 0.3rem; line-height: 0.48rem; position: relative; font-size: var(--fs16); color: #666; border-radius: 5px; margin-right: 0.3rem; border: solid 1px #e5e5e5; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .joblist-wrapper .cate-box a:last-child { margin-right: 0; } .joblist-wrapper .cate-box a.on { border-color: transparent; color: #fff; } .joblist-wrapper .cate-box a.on:after { opacity: 1; visibility: visible; } .joblist-wrapper .cate-box a:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; border-radius: 5px; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .joblist-wrapper .job-box { width: 71.1%; } .joblist-wrapper .job-box .top { padding: 0 0.3rem 0 0.5rem; height: 0.8rem; } .joblist-wrapper .job-box .top div { font-size: 15px; } .joblist-wrapper .job-box > .top div { font-size: 16px; } .joblist-wrapper .job-box ul li .detail { padding: 0.4rem 0.54rem 0.7rem 0.5rem; } .join-wrapper { padding-bottom: 0!important; } .join-wrapper:before { display: none; } .join-wrapper .tab-box { margin-bottom: 0.9rem; border-bottom: solid 1px #eee; } .join-wrapper .tab-box .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .join-wrapper .tab-box a { position: relative; width: 33.33%; border: solid 1px #eee; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; padding: 0.4rem 0.7rem; border-bottom: none; border-right: none; } .join-wrapper .tab-box a:last-child { border-right: solid 1px #eee; } .join-wrapper .tab-box a:hover:before, .join-wrapper .tab-box a.on:before { opacity: 1; visibility: visible; } .join-wrapper .tab-box a:hover .name, .join-wrapper .tab-box a.on .name { color: #fff; } .join-wrapper .tab-box a:hover p, .join-wrapper .tab-box a.on p { color: rgba(255, 255, 255, 0.4); } .join-wrapper .tab-box a:hover .key, .join-wrapper .tab-box a.on .key { background: #fff; color: #082c7e; } .join-wrapper .tab-box a:before { content: ""; width: 100%; height: 100%; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .join-wrapper .tab-box .key { width: 0.82rem; height: 0.82rem; line-height: 0.82rem; background-color: #f2f4f8; border-radius: 50%; text-align: center; font-size: 0.3rem; font-family: "mr"; font-weight: 700; color: #082c7e; margin-right: 0.5rem; } .join-wrapper .tab-box .info { flex: 1; overflow: hidden; line-height: 0.3rem; } .join-wrapper .tab-box .name { font-size: 0.3rem; font-weight: 700; } .join-wrapper .tab-box p { font-size: var(--fs16); color: rgba(34, 34, 34, 0.3); font-family: "light"; text-transform: uppercase; margin-top: 0.1rem; } .join-wrapper .swiper-box .box-container { position: relative; background-color: #fff; box-shadow: 0px 5px 0.35rem 0px rgba(5, 20, 44, 0.08); } .join-wrapper .swiper-box .swiper-slide { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .join-wrapper .swiper-box .swiper-slide:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .join-wrapper .swiper-box .swiper-slide-active .info, .join-wrapper .swiper-box .swiper-slide-active .pic { opacity: 1; visibility: visible; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .join-wrapper .swiper-box .info, .join-wrapper .swiper-box .pic { width: 50%; opacity: 0; visibility: hidden; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .join-wrapper .swiper-box .info { transform: translateX(1rem); -webkit-transform: translateX(1rem); -moz-transform: translateX(1rem); -ms-transform: translateX(1rem); -o-transform: translateX(1rem); } .join-wrapper .swiper-box .pic { transform: translateX(-1rem); -webkit-transform: translateX(-1rem); -moz-transform: translateX(-1rem); -ms-transform: translateX(-1rem); -o-transform: translateX(-1rem); } .join-wrapper .swiper-box .title { font-size: 0.32rem; line-height: 0.6rem; text-align: justify; } .join-wrapper .swiper-box .key { font-size: 2.5rem; color: rgba(51, 51, 51, 0.05); line-height: 2rem; position: absolute; right: 1.04rem; bottom: -0.6rem; z-index: 0; font-family: "mm"; } .join-wrapper .swiper-box .info { position: relative; padding: 1.67rem 1.72rem 0 1.48rem; } .join-wrapper .swiper-box .info:before { content: ""; width: 0.92rem; height: 0.86rem; background-image: url(../img/icon.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0.8rem; top: 1.12rem; z-index: -1; } .join-wrapper .swiper-box .btn-box { font-size: 0; position: absolute; left: 1.48rem; bottom: 1.42rem; z-index: 10; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .join-wrapper .swiper-box .btn-box span { color: #999; font-family: "mr"; } .join-wrapper .swiper-box .btn-box span.current { color: #082c7e; font-size: 18px; } .join-wrapper .swiper-box .swiper-btn { position: relative; transform: none; top: -2px; width: 9px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center center; } .join-wrapper .swiper-box .prev { margin-right: 0.2rem; background-image: url(../img/join-l.png); } .join-wrapper .swiper-box .prev:hover { background-image: url(../img/join-l2.png); } .join-wrapper .swiper-box .next { margin-left: 0.2rem; background-image: url(../img/join-r.png); } .join-wrapper .swiper-box .next:hover { background-image: url(../img/join-r2.png); } .join-wrapper .box-2 { background-color: #f7f7f7; padding-bottom: 2.3rem; } .join-wrapper .box-2 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .join-wrapper .box-2 ul li { width: 30.6%; background-color: #fff; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; box-shadow: 0px 5px 0.4rem 0px rgba(0, 0, 0, 0.06); border-radius: 0.1rem; margin-top: 0.7rem; margin-right: 4.1%; } .join-wrapper .box-2 ul li:nth-child(3n) { margin-right: 0; } .join-wrapper .box-2 ul li:nth-child(-n+3) { margin-top: 0; } .join-wrapper .box-2 ul li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .join-wrapper .box-2 .pic { border-radius: 0.1rem 0.1rem 0 0; } .join-wrapper .box-2 .info, .join-wrapper .box-2 .desc { text-align: center; } .join-wrapper .box-2 .info { padding-left: 0.6rem; line-height: 0.3rem; padding-right: 0.4rem; padding-top: 0.4rem; padding-bottom: 0.4rem; } .join-wrapper .box-2 .title { font-size: 0.22rem; font-weight: 700; } .join-wrapper .box-2 .desc { padding-right: 0.24rem; overflow-y: auto; font-size: 15px; color: #999; height: 0.6rem; margin-top: 0.12rem; } .join-wrapper .box-2 .desc::-webkit-scrollbar { width: 1px; background-color: #e5e5e5; } .join-wrapper .box-2 .desc::-webkit-scrollbar-thumb { background-color: #082c7e; } .development-wrapper { padding-bottom: 0!important; } .development-wrapper:before { display: none; } .development-wrapper .data { margin-top: 0.72rem; width: 100%; } .development-wrapper .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .development-wrapper .data li { position: relative; cursor: default; } .development-wrapper .data .num { font-size: 0.44rem; line-height: 0.48rem; } .development-wrapper .data .num span { display: inline-block; font-family: "mb"; color: #fff; background-image: -webkit-linear-gradient(18deg, #03236b, #0f4cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .development-wrapper .data em { font-style: normal; display: inline-block; margin-left: 0.1rem; } .development-wrapper .data em, .development-wrapper .data p { font-size: var(--fs16); color: #666; line-height: 24px; } .development-wrapper .data i { top: -0.15rem; } .development-wrapper .box-1 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .development-wrapper .box-1 .info { width: 43%; } .development-wrapper .box-1 .pic { width: 50%; } .development-wrapper .box-1 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .development-wrapper .box-1 .index-title-box { margin-bottom: 0; } .development-wrapper .box-1 .content { line-height: 0.3rem; margin: 0.44rem auto 0.3rem; } .development-wrapper .box-1 .more { display: inline-block; font-size: var(--fs16); color: #082c7e; border-bottom: 1px solid #082c7e; line-height: 0.3rem; font-weight: 700; } .development-wrapper .box-1 .more:hover img { transform: translateX(0.1rem); -webkit-transform: translateX(0.1rem); -moz-transform: translateX(0.1rem); -ms-transform: translateX(0.1rem); -o-transform: translateX(0.1rem); } .development-wrapper .box-1 .more img { vertical-align: middle; position: relative; top: -2px; margin-left: 0.1rem; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .development-wrapper .box-2, .development-wrapper .box-4 { background: #f9f9f9; } .development-wrapper .box-3 .index-title-box { margin-bottom: 0.43rem; } .development-wrapper .box-3 .top { text-align: center; margin-bottom: 0.6rem; } .development-wrapper .box-3 .top .title { font-size: 0.24rem; color: #082c7e; line-height: 0.36rem; margin-bottom: 0.06rem; } .development-wrapper .box-3 .top .desc { text-align: center; font-size: var(--fs16); color: #666; line-height: 0.3rem; } .development-wrapper .box-3 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .development-wrapper .box-3 li { width: 28%; margin-right: 8%; margin-top: 0.7rem; text-align: center; } .development-wrapper .box-3 li:nth-child(3n) { margin-right: 0; } .development-wrapper .box-3 li:nth-child(-n+3) { margin-top: 0; } .development-wrapper .box-3 li:hover .icon { transform: rotateY(180deg); } .development-wrapper .box-3 li .info { line-height: 0.3rem; } .development-wrapper .box-3 li .icon { height: 0.68rem; display: inline-block; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .development-wrapper .box-3 li .name { font-size: 0.24rem; font-weight: 700; line-height: 0.36rem; margin: 0.32rem auto 0.05rem; } .development-wrapper .box-3 li .brief { font-size: 0.2rem; color: rgba(0, 0, 0, 0.8); } .development-wrapper .box-3 li .desc { line-height: 0.28rem; font-size: var(--fs16); text-align: center; margin-top: 0.24rem; padding-top: 0.22rem; border-top: 1px solid #e6e6e6; } .development-wrapper .box-4 { position: relative; padding-bottom: 2.3rem; } .about-wrapper .swiper-btn { width: 0.48rem; height: 0.48rem; border-radius: 50%; } .about-wrapper .data { width: 100%; margin-top: 1.12rem; } .about-wrapper .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .about-wrapper .data li { position: relative; text-align: left; cursor: default; padding-left: 0.7rem; } .about-wrapper .data li:hover .icon { transform: rotateX(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .about-wrapper .data .icon { width: 0.45rem; position: absolute; left: 0; top: 0; z-index: 10; display: block; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .about-wrapper .data .num { font-size: 0.6rem; line-height: 0.48rem; } .about-wrapper .data .num span { display: inline-block; font-family: "mb"; color: #fff; background-image: -webkit-linear-gradient(18deg, #03236b, #0f4cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-wrapper .data em { font-style: normal; display: inline-block; margin-left: 0.1rem; } .about-wrapper .data i { font-size: 0.32rem; height: 0.2rem; line-height: 0.2rem; top: -0.26rem; background-image: -webkit-linear-gradient(18deg, #03236b, #0f4cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-wrapper .data em, .about-wrapper .data p { font-size: var(--fs16); color: #666; line-height: 24px; } .about-wrapper .data p { margin-top: 0.11rem; } .about-wrapper .box-1 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .about-wrapper .box-1 .info { position: relative; width: 43.88%; } .about-wrapper .box-1 .pic { width: 50%; } .about-wrapper .box-1 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .about-wrapper .box-1 .pic img { height: 100%; object-fit: cover; } .about-wrapper .box-1 .index-title-box { margin-bottom: 0.4rem; padding-top: 0.38rem; } .about-wrapper .box-1 .index-title-box h3 { font-size: 0.48rem; font-weight: 700; } .about-wrapper .box-1 .index-title-box .en { font-size: 2rem; font-family: "mb"; line-height: 1.4rem; position: absolute; left: 0; top: 0; z-index: -1; color: #fff; -webkit-text-stroke: 1px #e6e6e6; letter-spacing: 0.3rem; } .about-wrapper .box-1 .index-title-box .line { width: 0.46rem; height: 0.02rem; background: #cbcbcb; margin-top: 0.3rem; } .about-wrapper .box-2, .about-wrapper .box-4 { background-color: #f9f9f9; } .about-wrapper .box-2 .box-container { position: relative; } .about-wrapper .box-2 .swiper-btn { background-color: #ddd; top: auto; bottom: -0.03rem; transform: none; } .about-wrapper .box-2 .swiper-btn:before, .about-wrapper .box-2 .swiper-btn:after { content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; } .about-wrapper .box-2 .swiper-btn:before { z-index: -1; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .about-wrapper .box-2 .swiper-btn:after { z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: center center; } .about-wrapper .box-2 .prev { left: 0; } .about-wrapper .box-2 .prev:after { background-image: url(../img/prev3.png); } .about-wrapper .box-2 .next { right: 0; } .about-wrapper .box-2 .next:after { background-image: url(../img/next3.png); } .about-wrapper .category-box a:hover p, .about-wrapper .category-box a.on p { color: #333; } .about-wrapper .category-box p { font-size: 0.24rem; font-weight: 700; margin: 0.22rem auto 0.05rem; } .about-wrapper .category-box .brief { font-size: var(--fs16); color: #666; line-height: 0.24rem; } .about-wrapper .year-box { position: relative; margin-top: 0.55rem; } .about-wrapper .year-box:before { content: ""; width: 100%; height: 1px; background-color: #eaeaea; position: absolute; left: 0; bottom: 0.2rem; z-index: -1; } .about-wrapper .year-box .box-container { padding: 0 1.8rem; } .about-wrapper .year-box .swiper-container { padding-bottom: 0.1rem; } .about-wrapper .year-box .swiper-slide { text-align: center; cursor: pointer; } .about-wrapper .year-box .swiper-slide.on .year { color: #082c7e; font-family: "mb"; } .about-wrapper .year-box .swiper-slide.on .dot:before { background-color: rgba(240, 133, 25, 0.5); } .about-wrapper .year-box .swiper-slide.on .dot i { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); background-color: #082c7e; } .about-wrapper .year-box .swiper-slide.on .dot i:before { background-color: #082c7e; } .about-wrapper .year-box .swiper-slide:hover .dot:before, .about-wrapper .year-box .swiper-slide.on .dot:before { animation: iconScale 2s ease infinite; } .about-wrapper .year-box .year { font-size: 18px; color: #666; font-family: "ml"; line-height: 0.3rem; margin-bottom: 0.05rem; transition: color 0.4s ease; -webkit-transition: color 0.4s ease; -moz-transition: color 0.4s ease; -ms-transition: color 0.4s ease; -o-transition: color 0.4s ease; } .about-wrapper .year-box .dot { position: relative; width: 0.2rem; height: 0.2rem; background-color: #fff; border-radius: 50%; margin: 0 auto; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1); } .about-wrapper .year-box .dot:before { content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; } .about-wrapper .year-box .dot i { display: block; width: 70%; height: 70%; margin: 0 auto; background-color: #d9d9d9; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; position: relative; top: 15%; z-index: 1; transform: scale(0.75); -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); } .about-wrapper .detail-swiper { background: url(../img/aboutbg.png) no-repeat center center; background-size: 100%; } .about-wrapper .detail-swiper .swiper-slide { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .about-wrapper .detail-swiper .swiper-slide-active .pic, .about-wrapper .detail-swiper .swiper-slide-active .info { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); opacity: 1; visibility: visible; } .about-wrapper .detail-swiper .pic, .about-wrapper .detail-swiper .info { opacity: 0; visibility: hidden; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; } .about-wrapper .detail-swiper .pic { width: 50%; transform: translateX(100px); -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); } .about-wrapper .detail-swiper .info { width: 43.62%; padding-top: 0.72rem; transform: translateX(-100px); -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); } .about-wrapper .detail-swiper .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .about-wrapper .detail-swiper .year { position: relative; font-size: 0.54rem; font-weight: 700; line-height: 0.6rem; } .about-wrapper .detail-swiper .year:after { content: ""; display: block; width: 0.46rem; height: 0.02rem; margin-top: 0.26rem; background-color: #cbcbcb; } .about-wrapper .detail-swiper .brief, .about-wrapper .detail-swiper .brief li { color: #666; font-size: var(--fs16); } .about-wrapper .detail-swiper .brief { margin-top: 0.4rem; line-height: 0.36rem; } .about-wrapper .detail-swiper .brief li { position: relative; padding-left: 0.34rem; } .about-wrapper .detail-swiper .brief li:before { content: ""; width: 0.05rem; height: 0.05rem; background-color: #082c7e; position: absolute; left: 0; top: 0.155rem; z-index: 10; } .about-wrapper .box-3 .swiper-box { border-bottom: 1px solid #ebebeb; } .about-wrapper .box-3 .box-container { position: relative; } .about-wrapper .box-3 .icon { position: relative; width: 0.8rem; height: 0.8rem; margin: 0 auto; border-radius: 50%; box-shadow: 0px 5px 25px 0px rgba(0, 55, 148, 0.1); } .about-wrapper .box-3 .icon img { position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .about-wrapper .box-3 .icon .on { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); opacity: 0; visibility: hidden; } .about-wrapper .box-3 .swiper-btn { transform: none; top: auto; bottom: -0.24rem; border-radius: 50%; box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1); } .about-wrapper .box-3 .prev { left: -0.88rem; background-image: url(../img/prev4.png); } .about-wrapper .box-3 .prev:hover { background-image: url(../img/prev5.png); } .about-wrapper .box-3 .next { right: -0.88rem; background-image: url(../img/next4.png); } .about-wrapper .box-3 .next:hover { background-image: url(../img/next5.png); } .about-wrapper .company-swiper { padding-top: 0.3rem; } .about-wrapper .company-swiper .swiper-slide { cursor: pointer; padding: 0 0.3rem 0.3rem; } .about-wrapper .company-swiper .swiper-slide:after { content: ""; width: 100%; height: 0.02rem; background-color: #082c7e; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; position: absolute; left: 0; bottom: 0; z-index: 10; } .about-wrapper .company-swiper .swiper-slide:hover:after, .about-wrapper .company-swiper .swiper-slide.on:after, .about-wrapper .company-swiper .swiper-slide.swiper-slide-active:after { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .about-wrapper .company-swiper .swiper-slide:hover .icon .init, .about-wrapper .company-swiper .swiper-slide.on .icon .init, .about-wrapper .company-swiper .swiper-slide.swiper-slide-active .icon .init { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); opacity: 0; visibility: hidden; } .about-wrapper .company-swiper .swiper-slide:hover .icon .on, .about-wrapper .company-swiper .swiper-slide.on .icon .on, .about-wrapper .company-swiper .swiper-slide.swiper-slide-active .icon .on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .about-wrapper .company-swiper .swiper-slide:hover .title, .about-wrapper .company-swiper .swiper-slide.on .title, .about-wrapper .company-swiper .swiper-slide.swiper-slide-active .title { color: #082c7e; } .about-wrapper .company-swiper .title { text-align: center; color: rgba(23, 23, 29, 0.6); font-size: 0.18rem; line-height: 0.3rem; margin-top: 0.25rem; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .about-wrapper .company-detail-box { margin-top: 0.8rem; } .about-wrapper .company-detail-box .box-container { box-shadow: 0px 0.05rem 0.35rem 0px rgba(14, 41, 86, 0.08); } .about-wrapper .company-detail-box .swiper-slide { display: none; } .about-wrapper .company-detail-box .swiper-slide-active, .about-wrapper .company-detail-box .on { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .about-wrapper .company-detail-box .swiper-slide-active .pic, .about-wrapper .company-detail-box .on .pic, .about-wrapper .company-detail-box .swiper-slide-active .info, .about-wrapper .company-detail-box .on .info { opacity: 1; visibility: visible; } .about-wrapper .company-detail-box .swiper-slide-active .pic, .about-wrapper .company-detail-box .on .pic { animation: fadeInRight50 1.2s ease; } .about-wrapper .company-detail-box .swiper-slide-active .info, .about-wrapper .company-detail-box .on .info { animation: fadeInLeft50 1.2s ease; } .about-wrapper .company-detail-box .pic, .about-wrapper .company-detail-box .info { width: 50%; opacity: 0; visibility: hidden; } .about-wrapper .company-detail-box .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .about-wrapper .company-detail-box .info { padding: 0.78rem 1rem 0.4rem 1.2rem; } .about-wrapper .company-detail-box .name, .about-wrapper .company-detail-box .desc { padding-right: 0.2rem; } .about-wrapper .company-detail-box .name { font-size: 0.36rem; color: #222; font-weight: 700; line-height: 0.48rem; } .about-wrapper .company-detail-box .name:after { content: ""; display: block; width: 0.35rem; height: 0.02rem; margin-top: 0.25rem; background-color: #e4e4e4; } .about-wrapper .company-detail-box .desc { font-size: var(--fs16); color: #666; line-height: 0.32rem; margin-top: 0.42rem; overflow-y: auto; max-height: 1.6rem; } .about-wrapper .company-detail-box .desc::-webkit-scrollbar { width: 0.03rem; background-color: #f7f8f9; } .about-wrapper .company-detail-box .desc::-webkit-scrollbar-thumb { background-color: #082c7e; } .about-wrapper .company-detail-box .index-more { margin-top: 0.6rem; } .about-wrapper .box-4 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .about-wrapper .box-4 .list li { position: relative; width: 32.29%; margin-top: 1.565%; margin-right: 1.565%; background-color: #fff; box-shadow: 0px 5px 0.3rem 0px rgba(0, 0, 0, 0.08); } .about-wrapper .box-4 .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .about-wrapper .box-4 .list li:nth-child(-n+3) { margin-top: 0; } .about-wrapper .box-4 .list li:nth-child(3n) { margin-right: 0; } .about-wrapper .box-4 .pic img { height: 2rem; object-fit: contain; } .about-wrapper .box-4 span { display: none; position: absolute; background: #082c7e; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -ms-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .about-wrapper .box-4 .b_t { top: 0; left: 0; width: 0; height: 2px; } .about-wrapper .box-4 .b_r { top: 0; right: 0; width: 2px; height: 0; } .about-wrapper .box-4 .b_b { right: 0; bottom: 0; height: 2px; width: 0; } .about-wrapper .box-4 .b_l { bottom: 0; left: 0; width: 2px; height: 0; } .about-wrapper .box-5 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; flex-flow: wrap; } .about-wrapper .box-5 li { width: 49.15%; height: 1.1rem; background-color: #fff; box-shadow: 0px 2px 0.3rem 0px rgba(0, 0, 0, 0.08); display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; margin-top: 1.7%; padding: 0 0.4rem; } .about-wrapper .box-5 li:nth-child(-n+2) { margin-top: 0; } .about-wrapper .box-5 li:hover { box-shadow: 0px 2px 0.3rem 0px rgba(8, 44, 126, 0.2); } .about-wrapper .box-5 .year { font-size: 0.28rem; color: #777; font-family: "mr"; width: 0.98rem; padding-right: 0.1rem; border-right: 1px solid #ededed; } .about-wrapper .box-5 .title { font-size: 0.2rem; line-height: 0.3rem; margin: 0 0.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: 1; } .about-wrapper .box-5 .icon { width: 18px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/a-icon.png); } .worldwide-wrapper + .footer-wrapper .pagebg { display: none; } .worldwide-wrapper .box-2 { padding-top: 0.7rem; background-color: #f8f8f8; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .worldwide-wrapper .box-2 .detail-box, .worldwide-wrapper .box-2 .detail-list { position: relative; z-index: 2; } .worldwide-wrapper .box-2 .detail-box { position: relative; width: calc(50% - 0.5rem); border-left: 1px solid rgba(0, 0, 0, 0.08); } .worldwide-wrapper .box-2 .detail-box .index-title-box { display: none; } .worldwide-wrapper .box-2 .detail-list { position: relative; width: 50%; padding-top: 1.14rem; padding-left: calc((100% - 15.36rem) / 2); padding-right: 1.4rem; } .worldwide-wrapper .box-2 .detail-list .item { display: none; } .worldwide-wrapper .box-2 .year { font-size: 0.36rem; font-family: "mm"; line-height: 0.4rem; margin-bottom: 0.2rem; } .worldwide-wrapper .box-2 .desc { font-size: var(--fs16); color: #666; line-height: 0.32rem; } .worldwide-wrapper .box-2 .swiper-box { position: relative; padding-left: 1.12rem; } .worldwide-wrapper .box-2 .swiper-box:before { content: ""; width: 100%; height: 1.54rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); border: 1px solid rgba(0, 0, 0, 0.08); border-left: none; border-right: none; } .worldwide-wrapper .box-2 .swiper-box .swiper-container { height: 6.73rem; } .worldwide-wrapper .box-2 .swiper-box .brief { transition-delay: 0.2s; } .worldwide-wrapper .box-2 .swiper-box .swiper-slide { position: relative; cursor: pointer; font-family: "mr"; font-size: 0.24rem; color: rgba(51, 51, 51, 0.6); display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .worldwide-wrapper .box-2 .swiper-box .swiper-slide.swiper-slide-active { color: #082c7e; font-size: 0.36rem; } .worldwide-wrapper .box-2 .btn-box { position: absolute; left: 4.34rem; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 10; width: 0.41rem; height: 1.69rem; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .worldwide-wrapper .box-2 .btn-box:before { content: ""; display: block; width: 0.98rem; height: 1px; background-color: rgba(0, 0, 0, 0.15); position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); top: 50%; z-index: 10; } .worldwide-wrapper .box-2 .swiper-btn { display: block; width: 100%; height: 0.16rem; margin: 0 auto; top: 0; position: static; transform: none; } .worldwide-wrapper .box-2 .swiper-btn:before { content: ""; display: block; width: 100%; height: 100%; opacity: 1; background-size: 0.16rem; background-position: center center; background-repeat: no-repeat; background-color: #f8f8f8; } .worldwide-wrapper .box-2 .swiper-btn.prev { margin-bottom: 1.37rem; } .worldwide-wrapper .box-2 .swiper-btn.prev:hover:before { background-image: url(../img/i-up3.png); } .worldwide-wrapper .box-2 .swiper-btn.prev:before { background-image: url(../img/i-up2.png); } .worldwide-wrapper .box-2 .swiper-btn.next:hover:before { background-image: url(../img/i-down3.png); } .worldwide-wrapper .box-2 .swiper-btn.next:before { background-image: url(../img/i-down2.png); } .worldwide-wrapper .main .item { padding: 1.2rem 0; } .worldwide-wrapper .main .item:nth-child(even) .box-container { flex-direction: row-reverse; } .worldwide-wrapper .main .item:nth-child(even) { background: #f8f8f8; } .worldwide-wrapper .main .item .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } .worldwide-wrapper .main .index-title-box { margin-bottom: 0.5rem; } .worldwide-wrapper .main .pic { width: 56%; overflow: inherit; } .worldwide-wrapper .main .swiper-slide { width: 58%; overflow: hidden; } .worldwide-wrapper .main .swiper-slide:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .worldwide-wrapper .main .info { width: 38%; } .worldwide-wrapper .main .brief { font-size: 15px; color: #666; text-align: justify; line-height: 0.32rem; } .worldwide-wrapper .main .name { padding: 0 0.2rem; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.6); color: #fff; line-height: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs16); } .worldwide-wrapper .main .swiper-btn { width: 0.36rem; height: 0.36rem; } .worldwide-wrapper .main .prev { left: -0.5rem; background-image: url(../img/prev.png); } .worldwide-wrapper .main .prev:hover { background-image: url(../img/prev2.png); } .worldwide-wrapper .main .next { right: -0.5rem; background-image: url(../img/next.png); } .worldwide-wrapper .main .next:hover { background-image: url(../img/next2.png); } .video-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 40; background-color: #000; display: none; } .video-modal iframe { width: 100%; height: 100%; object-fit: contain; } .video-modal .close { display: inline-block; width: 0.4rem; height: 0.4rem; background-image: url(../img/close2.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; right: 0.2rem; top: 0.2rem; z-index: 10; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .video-modal .close:hover { transform: rotate(90deg); } /*鍒嗛〉*/ .pageNum { font-size: 0; text-align: center; margin-top: 0.62rem; } .pageNum a { display: inline-block; color: #4d4d4d; font-size: 14px; font-family: Arial; vertical-align: middle; margin: 0 0.1rem; width: 0.48rem; height: 0.48rem; line-height: 0.48rem; background-color: #f2f2f2; text-align: center; transition: background 0.5s ease; -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -ms-transition: background 0.5s ease; -o-transition: background 0.5s ease; } .pageNum a:first-child { margin-left: 0; } .pageNum a:last-child { margin-right: 0; } .pageNum .dot { line-height: 0.38rem; } .pageNum a:hover, .pageNum .on { color: #fff; background-image: linear-gradient(-90deg, #0b59c3 0%, #082c7e 100%); background-blend-mode: normal, normal; } .pageNum .btn { font-weight: 700; font-family: "瀹嬩綋"; } .pageMore { display: none; margin-top: 0.6rem; } .pageMore a { display: block; width: 100%; text-align: center; height: 0.8rem; line-height: 0.8rem; background: #082c7e; color: #fff; font-size: 0.24rem; } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; width: 0; height: 0; clear: both; visibility: hidden; } @keyframes navInUp50 { 0% { opacity: 0; visibility: hidden; transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); } 100% { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } } @keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @-webkit-keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @-moz-keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @-ms-keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @keyframes shake { 0%, 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } 0%, 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } @keyframes iconScale2 { from { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); opacity: 1; } to { transform: scale(1.7); -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); opacity: 0; } }