@charset "utf-8"; .clearfix { zoom: 1; } .clearfix:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } .marginauto { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; } .linenowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flexCetween { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; } .flexAlign { display: flex; display: -webkit-flex; display: -moz-flex; align-items: center; -webkit-align-items: center; } .header { position: fixed; left: 0; top: 0; z-index: 999; box-sizing: border-box; padding: 0 4.42%; display: flex; justify-content: space-between; align-items: center; width: 100%; background: #fff; height: 88px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .logo { display: block; height: 65px; } .header-navs { display: flex; align-items: center; } .navs { display: flex; align-items: center; } .navs > li { margin-left: 52px; position: relative; } .navs > li:first-child { margin-left: 0; } .navs > li:first-child a:before { display: none; } .navs > li:hover > a, .navs > li.active > a { color: #004485; } .navs > li:hover > a:before, .navs > li.active > a:before { width: 100%; right: auto; left: 0; } .navs > li > a { display: flex; align-items: center; justify-content: center; position: relative; height: 88px; color: #333333; font-size: 16px; } .navs > li > a:before { content: ""; width: 0; height: 2px; background: #004485; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .navs > li > a:hover, .navs > li > a.active { color: #004485; } .navs > li > a:hover:before, .navs > li > a.active:before { width: 100%; right: auto; left: 0; } .navs-menu { position: absolute; left: 50%; margin-left: -50px; top: 100%; padding: 15px 0; width: 100px; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); display: none; } .navs-menu li { position: relative; text-align: center; } .navs-menu li:hover > a { background: #004485; color: #fff; } .navs-menu li > a { display: block; color: #fff; font-size: 13px; line-height: 2.2; } .open-menu { position: absolute; left: 50%; top: 100%; margin-left: -65px; width: 130px; background: rgba(0, 0, 0, 0.5); } .open-menu > li { position: relative; } .open-menu > li > a i { display: inline-block; color: #fff; margin-left: 5px; } .navs-menu-leval { position: absolute; left: 100%; top: -10px; background: #004485; padding: 10px 0; display: none; } .navs-leval-item { line-height: 2.2; width: 120px; position: relative; font-size: 13px; } .navs-leval-item p { text-align: center; } .navs-leval-item p a { display: inline-block; position: relative; z-index: 2; line-height: 35px; color: #fff; font-size: 13px; } .navs-menu-wrap { display: flex; padding-right: 20px; } .navs-menu-tress { display: flex; background: #004485; } .navs-menu-in p { width: 70px; line-height: 35px; text-align: left; } .navs-menu-in p a { display: inline-block; position: relative; z-index: 2; line-height: 35px; color: #fff; font-size: 12px; white-space: nowrap; } .navs-menu-in p a:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; right: 0; bottom: 0; transition: 0.35s; z-index: -1; } .navs-menu-in p a:hover, .navs-menu-in p a.active { color: #fff; } .navs-menu-in p a:hover:before, .navs-menu-in p a.active:before { width: 100%; right: auto; left: 0; } .open-menu-first > li { position: relative; text-align: center; } .open-menu-first > li > a { display: inline-block; color: #fff; font-size: 13px; line-height: 2.4; } .header-system { display: flex; margin-left: 45px; } .system-item { position: relative; } .system-item:hover > a { border-color: #004485; color: #004485; } .system-item:hover > a > i { color: #004485; } .system-item:hover > a b { color: #004485 !important; transform: rotate(180deg); } .system-item > a { display: block; padding: 0 13px; height: 30px; line-height: 30px; color: #999999; font-size: 14px; border: 1px solid #C6C4C5; } .system-item > a > i { display: inline-block; margin-right: 9px; color: #999999; font-size: 16px; font-style: normal; line-height: 1; transition: 0.35s; } .system-item:last-child { margin-left: -1px; } .system-item:last-child > a { padding-right: 20px; } .system-item:last-child > a b { display: inline-block; margin-left: 10px; color: #999999; font-size: 16px; transition: 0.34s; } .system-item:hover .system-down { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: visible; } .system-down { position: absolute; left: 0; top: 100%; width: 100%; background: #F2F2F2; padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(30px); pointer-events: none; transition: 0.4s; } .system-down > li > a { display: inline-block; margin-left: 13px; color: #999; height: 30px; line-height: 30px; font-size: 14px; } .system-down > li > a:hover { color: #004485; } .banner { position: relative; height: 100vh; overflow: hidden; } .banner-slide { position: relative; overflow: hidden; } .banner-slide.swiper-slide-active .btext small, .banner-slide.swiper-slide-active .btext strong { opacity: 1; visibility: visible; transform: translateY(0px); } .banner-slide.swiper-slide-active figure img { transform: scale(1); -webkit-transform: scale(1); } .banner-slide a { display: block; } .banner-slide figure { display: block; line-height: 1; overflow: hidden; height: 100%; } .banner-slide figure img { display: block; position: relative; transition: transform 3.5s; -webkit-transition: transform 3.5s; transform: scale(1.1); -webkit-transform: scale(1.1); } .btext { position: absolute; left: 50%; margin-left: -45%; top: 50%; transform: translateY(-50%); width: 90%; text-align: center; padding-top: 25px; } .btext small { display: block; line-height: 1; color: #fff; font-size: 30px; font-family: arial; font-weight: bold; text-transform: uppercase; opacity: 0; visibility: hidden; transform: translateY(100%); transition: 0.6s 0.5s; } .btext strong { display: block; margin-top: 18px; line-height: 1.1; color: #fff; font-size: 3.38vw; opacity: 0; visibility: hidden; transform: translateY(100%); transition: 0.6s 0.7s; } .bhide { overflow: hidden; } .mouse-down { position: absolute; left: 40px; bottom: 46px; z-index: 10; width: 29px; height: 40px; border: 2px solid #fff; border-radius: 10px 10px 20px 20px; } .mouse-down i { display: block; position: absolute; left: 0; top: 10px; width: 100%; line-height: 1; text-align: center; color: #fff; font-size: 18px; font-style: normal; animation: moveDownSpot 1000ms infinite; } @keyframes moveDownSpot { from { opacity: 1; transform: translateY(0px); } to { opacity: 0; transform: translateY(6px); } } .banner-dit { position: absolute; left: 13.645%; right: 0; bottom: 55px; display: flex; align-items: center; z-index: 10; } .pagetion { margin-right: 24px; display: flex; } .pagetion .swiper-pagination-bullet { display: block; position: relative; margin-right: 20px; width: 22px; height: 22px; border-radius: 50%; opacity: 1; background: none; text-align: center; } .pagetion .swiper-pagination-bullet.swiper-pagination-bullet-active:before { width: 100%; height: 100%; margin-left: -11px; margin-top: -11px; } .pagetion .swiper-pagination-bullet.swiper-pagination-bullet-active:after { opacity: 1; visibility: visible; } .pagetion .swiper-pagination-bullet:last-child { margin-right: 0; } .pagetion .swiper-pagination-bullet:before { position: absolute; left: 50%; top: 50%; margin-left: -4px; margin-top: -4px; content: ""; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid #fff; border-radius: 50%; transition: 0.35s; } .pagetion .swiper-pagination-bullet:after { position: absolute; left: 50%; top: 50%; margin-left: -1px; margin-top: -1px; content: ""; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: 0; visibility: hidden; transition: 0.3s; } .banner-line { position: relative; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); } .banner-line span { display: block; position: absolute; left: 0; top: 0; width: 20%; height: 100%; background: #fff; } .about-home { position: relative; padding: 149px 0 112px; background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; } .about-home-wrap { display: flex; justify-content: space-between; flex-direction: row-reverse; padding-left: calc((100% - 1280px)/2); } .about-imgs { margin-top: 50px; width: 60%; } .about-imgs img { display: block; width: 100%; height: auto; line-height: 1; } .about-home-fix { width: 28.375%; } .about-tops small { display: block; color: #004485; font-size: 48px; font-family: arial; line-height: 1; font-weight: normal; text-transform: uppercase; } .about-tops b { display: block; white-space: nowrap; opacity: 0; } .about-tops strong { display: block; margin-top: 8px; color: #004485; font-weight: normal; font-size: 20px; line-height: 1; opacity: 0; } .about-fix { margin-top: 80px; margin-bottom: 50px; } .about-fix p { color: #666666; font-size: 18px; font-weight: normal; } .about-btn-list { display: flex; flex-wrap: wrap; } .about-btn-list li { margin-right: 8%; width: 44%; } .about-btn-list li:nth-child(2n+2) { margin-right: 0; } .about-btn-list li a { display: block; position: relative; height: 54px; line-height: 54px; border-bottom: 1px solid #707070; color: #333333; font-size: 18px; } .about-btn-list li a:hover { color: #004485; } .about-btn-list li a:hover i { color: #004485; } .about-btn-list li a i { position: absolute; right: 0; top: 0; line-height: 54px; color: #333333; font-size: 12px; transition: 0.36s; } .check-more { text-align: right; margin-top: 64px; } .check-more a { display: inline-block; color: #333333; font-size: 14px; } .check-more a:hover { color: #004485; } .check-more a:hover i { color: #004485; } .check-more a i { display: inline-block; vertical-align: middle; position: relative; top: -2px; margin-left: 10px; font-style: normal; color: #2C2C2C; font-size: 24px; } .group-news { padding: 55px 0 74px; } .group-top { display: flex; justify-content: space-between; align-items: center; } .group-top .about-tops { margin-bottom: 0; } .check-more1 a { display: inline-block; color: #333333; font-size: 14px; } .check-more1 a:hover { color: #004485; } .check-more1 a:hover i { color: #004485; } .check-more1 a i { display: inline-block; position: relative; top: -1px; vertical-align: middle; margin-left: 13px; color: #2C2C2C; font-size: 24px; font-style: normal; } .group-list { margin-top: 32px; margin-left: -20px; margin-right: -20px; } .group-list .slick-dots { display: flex; justify-content: center; margin-top: 40px; } .group-list .slick-dots li.slick-active button { background: #004485; } .group-list .slick-dots li button { margin: 0 5px; border: none; padding: 0; width: 8px; height: 8px; background: #C6C4C5; opacity: 1; border-radius: 50%; text-indent: 8888px; overflow: hidden; transition: 0.35s; cursor: pointer; } .group-list .item { float: left; } .group-list .item a { display: block; margin: 0 20px; } .group-list .item figure { position: relative; display: block; padding-bottom: 63.3%; height: 0; overflow: hidden; line-height: 1; } .group-list .item figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .group-list .item figure img { transition: 0.68s; } .group-list .item a:hover figure img { transform: scale(1.06); } .group-list .item a:hover p { color: #004485; } .group-list .item p { margin-top: 25px; color: #333333; font-size: 16px; line-height: 2; transition: 0.4s; } .core-business { padding: 65px 0 80px; background-size: cover; background-position: center; background-repeat: no-repeat; } .common-title1 small, .common-title1 strong { color: #fff; } .core-text { margin-top: 20px; padding-top: 32px; position: relative; width: 600px; } .core-text:before { position: absolute; left: 0; top: 0; content: ""; width: 80px; height: 1px; background: #fff; } .core-text p { color: #fff; font-size: 15px; line-height: 2; } .core-list { margin-top: 9.375vw; display: flex; } .core-list:hover li { width: 18%; } .core-list li { position: relative; padding-right: 2.666%; width: 23%; transition: 0.5s; } .core-list li:last-child { padding-right: 0; } .core-list li:hover { flex: none; width: 46%; } .core-list li:hover a figure { opacity: 1; visibility: visible; transition-delay: 0.15s; } .core-list li:hover a .core-title b { height: 0; margin-bottom: 0; opacity: 0; visibility: hidden; } .core-list li:hover a .core-title strong { color: #fff; } .core-list li:hover a .core-title p { width: 353px; opacity: 1; visibility: visible; } .core-list li:hover a i { background: #fff; transform: rotate(0deg); color: #004485; } .core-list li a { display: block; position: relative; z-index: 2; padding: 23px 30px 21px; box-sizing: border-box; height: 198px; background: #fff; } .core-list li a figure { display: block; position: absolute; left: 0; bottom: 0; z-index: -1; height: 100%; width: 100%; opacity: 0; visibility: hidden; transition: 0.7s; } .core-list li a figure:before { position: absolute; left: 0; top: 0; z-index: 2; content: ""; width: 100%; height: 100%; background: linear-gradient(to right, #004485 0%, rgba(89, 158, 225, 0) 100%); } .core-list li a figure:after { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: linear-gradient(to right, #004485 0%, #599EE1 100%); } .core-list li a figure img { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; } .core-list li a i { display: block; position: absolute; left: 30px; bottom: 20px; width: 32px; height: 32px; border-radius: 50%; background: #C6C4C5; color: #fff; font-size: 18px; text-align: center; line-height: 32px; font-style: normal; transform: rotate(-45deg); transition: 0.38s; } .core-title b { display: block; margin-bottom: 14px; color: #599EE1; font-weight: normal; line-height: 1; font-size: 33px; transition: 0.35s; height: 34px; } .core-title strong { display: block; margin-bottom: 16px; line-height: 1; color: #333333; font-size: 18px; transition: 0.38s; } .core-title p { max-width: 100%; color: #fff; font-size: 13px; opacity: 0; visibility: hidden; transition: 0.5s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .party-box { position: relative; z-index: 2; padding: 70px 0 116px; background: #ECEDEE; } .party-box:before { position: absolute; right: 0; top: 0; z-index: -1; content: ""; width: 50%; height: 100%; background: #929292; opacity: 0.25; } .party-wrap { display: flex; justify-content: space-between; } .party-builds { width: 44.37%; } .group-top { display: flex; justify-content: space-between; align-items: center; } .build-list { margin-top: 70px; } .build-list li { margin-bottom: 28px; } .build-list li a { display: flex; align-items: center; justify-content: space-between; } .build-list li a:hover .build-time { background: #004485; } .build-list li a:hover .build-time b, .build-list li a:hover .build-time time { color: #fff; } .build-list li a:hover p { color: #004485; } .build-list li a p { flex: 1; margin-left: 16px; color: #333333; font-size: 16px; transition: 0.4s; } .build-time { padding: 8px 0; width: 64px; background: #D6D7D8; text-align: center; transition: 0.4s; } .build-time b { display: block; margin-bottom: 6px; color: #999999; font-size: 34px; font-family: arial; line-height: 1; transition: 0.4s; } .build-time time { display: block; line-height: 1; color: #999999; font-size: 14px; transition: 0.4s; } .party-info { width: 45.78%; } .party-info:hover figure img { transform: scale(1.06); } .party-info:hover .party-down strong { color: #004485; } .party-info figure { display: block; line-height: 1; overflow: hidden; } .party-info figure img { display: block; width: 100%; height: auto; transition: 0.65s; } .party-down { margin-top: 42px; } .party-down strong { display: block; margin-bottom: 35px; line-height: 1.4; color: #333333; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s; } .party-down p { color: #333333; font-size: 14px; opacity: 0.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .party-down span { display: inline-block; margin-top: 90px; color: #333333; font-size: 14px; opacity: 0.5; transition: 0.45s; } .enterprises { padding: 70px 0; } .enterprises-wrap { position: relative; margin-top: 44px; } .enterprises-slide { padding-top: 10px; position: relative; } .enterprises-slide figure { display: block; position: relative; text-align: center; height: 78px; border: 1px solid #E4E4E4; overflow: hidden; transition: 0.38s; } .enterprises-slide figure:hover { transform: translateY(-10px); } .enterprises-slide figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; } .enterprises-btn { display: flex; position: absolute; right: 0; top: -98px; z-index: 3; } .enterprises-btn span { display: block; margin-left: 14px; width: 30px; height: 30px; border: 2px solid #C6C4C5; border-radius: 50%; text-align: center; line-height: 30px; color: #C6C4C5; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.4s; } .enterprises-btn span:hover { border-color: #004485; color: #004485; } .footer { padding: 40px 0; background: #333333; font-size: 14px; color: #999999; } .footer a { color: #999999; } .footer a:hover { color: #fff; } .foote-wrap { display: flex; justify-content: space-between; flex-direction: row-reverse; } .footer-eq { width: 40%; display: flex; align-items: center; justify-content: right; } .eq { width: 126px; padding-left: 12%; margin-left: 12%; border-left: 1px solid rgba(255, 255, 255, 0.31); } .eq img { display: block; width: 100%; height: auto; } .eq span { display: block; margin-top: 17px; text-align: center; line-height: 1; color: #fff; font-size: 16px; } .relative-tel { display: flex; align-items: center; } .relative-tel i { display: block; color: #fff; font-size: 38px; font-style: normal; } .tel-text { margin-left: 8px; } .tel-text span { display: block; margin-bottom: 6px; line-height: 1; } .tel-text b { display: block; line-height: 1; color: #fff; font-size: 27px; font-family: "Bahnschrift"; } .footer-text { margin-right: 30px; flex: 1; } .footer-navs { display: flex; margin-left: -18px; margin-bottom: 38px; } .footer-navs li { position: relative; } .footer-navs li:last-child:before { display: none; } .footer-navs li:before { position: absolute; right: 0; top: 50%; margin-top: -6px; content: ""; width: 1px; height: 12px; background: #fff; opacity: 0.5; } .footer-navs li a { display: inline-block; padding: 0 18px; line-height: 1.2; font-size: 14px; } .footer-navs li a:hover { opacity: 1; } .footer-address p { margin-bottom: 16px; } .footer-address p span { display: inline-block; margin-right: 28px; } .footer-address p span:last-child { margin-right: 0; } .footer-address p img { display: inline-block; vertical-align: middle; width: 20px; height: auto; opacity: 1; margin-right: 12px; } .foot-yq { display: flex; padding-top: 28px; } .foot-yq .c a { margin-right: 10px; } .foot-yq .c a:last-child { margin-right: 0; } .net-works a { display: inline-block; font-size: 14px; } .mtop { height: 88px; } .pbanner { position: relative; overflow: hidden; } .pbanner figure { position: relative; display: block; line-height: 1; overflow: hidden; } .pbanner figure img { display: block; width: 100%; height: auto; } .pbanner .mouse-down { left: calc((100% - 1280px) / 2); } .inner-title { position: absolute; left: 50%; margin-left: -628px; top: 26.25%; padding-top: 15px; padding-left: 26px; padding-bottom: 20px; border-left: 4px solid #fff; z-index: 20; } .inner-title strong { display: block; margin-bottom: 12px; line-height: 1.2; color: #fff; font-size: 2.4vw; opacity: 0; overflow: hidden; } .inner-title small { display: block; line-height: 1; color: #fff; font-size: 24px; opacity: 0; font-family: "GilroyR"; } .inner-title i { display: block; position: absolute; left: 0; top: 100%; margin-top: 45px; width: 1px; height: 160%; background: rgba(255, 255, 255, 0.3); } .inner-title i:before { position: absolute; left: 0; top: 0; content: ""; width: 1px; height: 70%; background: #FFFFFF; } .leval-menu { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 29; background: rgba(6, 22, 46, 0.5); } .leval-menu-list { width: 120px; } .leval-menu-list li > a { display: block; text-align: center; padding: 10px 5px; color: #fff; font-size: 14px; overflow: hidden; } .leval-menu-list li:hover > a, .leval-menu-list li.active > a { background: #004485; } .about-title { position: relative; padding-bottom: 32px; line-height: 1; color: #06162E; font-size: 30px; opacity: 0; } .about-title:before { position: absolute; left: 0; bottom: 0; content: ""; width: 22px; height: 7px; background: #004485; } .introduct-tt { margin-bottom: 36px; } .introduct-tt strong { display: block; margin-bottom: 34px; line-height: 1.1; color: #06162E; font-size: 40px; font-weight: normal; } .introduct-tt small { display: block; position: relative; padding-top: 32px; font-family: "Times New Roman"; } .introduct-tt small:before { position: absolute; left: 0; top: 0; content: ""; width: 1px; height: 24px; background: #999999; line-height: 1.4; } .introduct-info { color: #666666; text-align: justify; } .speed { background-color: #f5f5f5; } .speed-imgs { width: 36%; float: left; margin: 0 25px 25px 0; } .speed-imgs img { display: block; width: 100%; height: auto !important; } .speed-texts { text-align: justify; } .framework { background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; } .framework-title { position: relative; padding-bottom: 28px; text-align: center; } .framework-title .about-title { padding-bottom: 0; } .framework-title .about-title:before { display: none; } .framework-title:before { position: absolute; left: 50%; margin-left: -11px; bottom: 0; content: ""; width: 22px; height: 7px; background: #004485; } .framework-title small { display: block; margin-top: 12px; line-height: 1; color: #004485; font-size: 38px; text-transform: uppercase; font-family: arial; font-weight: bold; } .about-title1 { text-align: center; } .about-title1:before { left: 50%; margin-left: -11px; } .leader-swiper .swiper-pagination { position: relative; display: flex; justify-content: center; bottom: auto; margin-top: 48px; } .leader-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0 9px; width: 13px; height: 13px; background: #D9D9D9; opacity: 1; cursor: pointer; } .leader-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #004485; } .leader-head { display: flex; height: 60px; background: #004485; } .leader-head span { display: block; line-height: 60px; color: #fff; font-size: 18px; overflow: hidden; } .leader-head span:nth-child(1) { padding-left: 6.71%; width: 13.6%; } .leader-head span:nth-child(2) { width: 54%; text-align: center; } .leader-head span:nth-child(3) { padding-left: 28px; flex: 1; } .leader-info { background: none; border-bottom: 1px solid #D9D9D9; } .leader-info span { color: #333333; font-size: 16px; font-weight: normal; } .leader-info span:nth-child(3) { padding-left: 0; } .history { background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; } .about-color { color: #fff; } .about-color:before { background: #fff; } .history-item { float: left; } .history-wr { padding: 0 5%; display: flex; justify-content: space-between; align-items: center; } .history-year { padding-top: 25px; color: #fff; font-size: 3vw; line-height: 1; font-family: arial; flex: 1; margin-left: 5%; white-space: nowrap; display: none; } .hostory-li .name { margin-bottom: 10px; color: #fff; font-size: 22px; display: flex; } .hostory-li .name time { margin-right: 20px; white-space: nowrap; } .gistory-fix { position: relative; margin-top: 85px; padding: 0 45px; } .history-down { position: relative; z-index: 2; } .history-down:before { position: absolute; left: 0; top: 6px; content: ""; width: 100%; height: 3px; background: #599EE1; } .year-item { float: left; text-align: center; cursor: pointer; } .year-item.slick-current b { background: #599EE1; } .year-item.slick-current span { color: #599EE1; } .year-item b { display: block; margin: auto; width: 10px; height: 10px; border: 3px solid #fff; background: #666666; border-radius: 50%; transition: 0.35s; } .year-item span { display: block; margin-top: 14px; text-align: center; line-height: 1; color: #fff; font-size: 20px; transition: 0.35s; } .history-btn span { display: block; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; text-align: center; line-height: 40px; background: #fff; color: #C6C4C5; font-size: 12px; cursor: pointer; z-index: 300; transition: 0.4s; } .history-btn span:hover { background: #599EE1; color: #fff; } .history-btn span.prev { left: 5%; } .history-btn span.next { right: 5%; } .history-btn span.slick-disabled, .history-btn span.swiper-button-disabled { display: none; } .strategy { background-size: cover; background-position: center; background-repeat: no-repeat; } .strategy-wrap { box-sizing: border-box; } .strategy-text { padding: 68px 0 130px; } .strategy-text .about-title { color: #fff; } .strategy-text .about-title:before { background: #fff; } .strategy-info { margin-top: 56px; } .strategy-info p { color: #fff; font-size: 16px; text-align: justify; line-height: 2; } .culture-box { display: flex; } .culture-item { flex: 1; position: relative; } .culture-item:hover figure img { transform: scale(1.06); } .culture-item:hover figure:before { background: rgba(0, 0, 0, 0.6); } .culture-item:hover .culture-info { margin-top: 0; } .culture-item:hover .culture-info i { opacity: 1; visibility: visible; } .culture-item figure { display: block; position: relative; line-height: 1; overflow: hidden; } .culture-item figure:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; z-index: 2; background: rgba(0, 0, 0, 0.3); transition: 0.3s; } .culture-item figure img { display: block; width: 100%; height: auto; transition: 0.6s; } .culture-info { position: absolute; left: 0; width: 100%; text-align: center; top: 50%; transform: translateY(-50%); margin-top: 30px; z-index: 10; transition: 0.5s; } .culture-info .about-title:before { left: 50%; margin-left: -11px; } .culture-info .page-titleT { padding-bottom: 0; width: 90%; margin: 0 auto; } .culture-info i { display: inline-block; margin-top: 40px; width: 111px; height: 33px; border: 1px solid #fff; text-align: center; line-height: 33px; color: #fff; font-size: 14px; opacity: 0; visibility: hidden; transition: 0.4s; font-style: normal; } .member { padding: 70px 0 78px; } .member-btn { display: flex; justify-content: center; margin-top: 30px; margin-bottom: 50px; } .member-btn span { display: inline-block; margin-left: -1px; width: 123px; text-align: center; height: 33px; line-height: 33px; border: 1px solid #707070; color: #333333; font-size: 16px; transition: 0.4s; cursor: pointer; } .member-btn span:hover, .member-btn span.active { background: #004485; color: #fff; border-color: #004485; } .member-item { display: none; } .member-item:first-child { display: block; } .member-list { display: flex; flex-wrap: wrap; } .member-list li { margin-right: 1.25%; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; width: 19%; height: 99px; border: 2px solid #F9F9F9; box-sizing: border-box; background: #F9F9F9; transition: 0.4s; } .member-list li:hover { border-color: #004485; } .member-list li:hover p { color: #004485; } .member-list li:nth-child(5n+5) { margin-right: 0; } .member-list li p { color: #666666; font-size: 16px; text-align: center; max-width: 90%; transition: 0.38s; } .inner-menu { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; background: rgba(0, 68, 133, 0.8); } .inner-menu-list { display: flex; } .inner-menu-list li { margin-right: 96px; } .inner-menu-list li:first-child { margin-left: 48px; } .inner-menu-list li:hover a, .inner-menu-list li.active a { opacity: 1; } .inner-menu-list li a { display: inline-block; height: 50px; line-height: 50px; color: #FFFFFF; opacity: 0.6; font-size: 16px; } .prospect { padding: 120px 0 80px; } .prospect-top { text-align: center; } .prospect-top span { display: inline-block; margin: auto; position: relative; box-sizing: border-box; padding: 0 32px; min-width: 126px; height: 52px; line-height: 52px; background: #004485; text-align: center; color: #fff; font-size: 30px; } .prospect-top span:before { position: absolute; left: 50%; margin-left: -7px; top: 100%; content: ""; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #004485; } .prospect-top strong { display: block; margin-top: 28px; color: #666666; font-size: 32px; } .explain { margin-top: 50px; padding: 22px 45px 34px; border: 1px solid #CCCCCC; } .explain strong { display: block; margin-bottom: 20px; line-height: 1; color: #666666; font-size: 20px; font-weight: normal; } .explain p { color: #999999; font-size: 14px; } .mission { padding: 123px 0 170px; background-attachment: fixed; background-position: center; background-size: cover; } .mission-text { display: inline-block; padding: 42px 46px 55px; box-sizing: border-box; width: 503px; max-width: 100%; background: rgba(0, 68, 133, 0.5); } .mission-text strong { display: block; margin-bottom: 15px; line-height: 1; color: #fff; font-size: 30px; } .mission-text p { color: #fff; font-size: 30px; line-height: 1.2; } .ideas { padding: 87px 0 90px; } .idea-list { margin-top: 70px; display: flex; justify-content: space-between; } .idea-list li { width: 23.5%; } .idea-list li span { box-sizing: border-box; padding: 0 10px; border: 2px solid #707070; height: 160px; display: flex; justify-content: center; align-items: center; text-align: center; color: #666666; font-size: 32px; transition: 0.4s; } .idea-list li span:hover { border-color: #004485; color: #004485; } .value-wrap { display: flex; justify-content: flex-end; } .mission-text.article-block { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: 0.68s; } .mission-text.articleShow { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); } .activity-box { background: #F1F1F1; } .activity { padding: 145px 0 185px; } .lazy { background: url(../images/loading.gif) center no-repeat; } .activity-list { display: flex; flex-wrap: wrap; padding-bottom: 50px; } .activity-list li { margin-right: 3.125%; margin-bottom: 50px; width: 31.25%; background: #fff; } .activity-list li:nth-child(3n+3) { margin-right: 0; } .activity-list li a { display: block; padding: 18px 19px 62px; } .activity-list li a figure { position: relative; display: block; padding-bottom: 72.57%; height: 0; overflow: hidden; line-height: 1; } .activity-list li a figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .activity-list li a figure img { transition: 0.68s; } .activity-list li a:hover figure img { transform: scale(1.06); } .activity-list li a:hover .activity-info strong { color: #004485; } .activity-list li a:hover .activity-info span { color: #004485; border-color: #004485; } .activity-data { position: absolute; right: 0; top: 0; z-index: 3; padding: 10px 0; width: 64px; background: #333333; text-align: center; } .activity-data b { display: block; color: #fff; font-size: 34px; font-family: arial; line-height: 1; } .activity-data time { display: block; margin-top: 6px; color: #fff; font-size: 14px; font-family: arial; line-height: 1; } .activity-info { margin-top: 34px; } .activity-info strong { display: block; margin-bottom: 24px; line-height: 1.2; color: #333333; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s; } .activity-info p { color: #333333; font-size: 14px; height: 50px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .activity-info span { display: inline-block; line-height: 2; margin-top: 40px; color: #333333; font-size: 14px; border-bottom: 1px solid #333333; transition: 0.4s; } .pages { display: flex; justify-content: center; } .pages a { display: inline-block; margin-right: 14px; width: 76px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #CCCCCC; color: #333333; font-size: 14px; } .pages a:last-child { margin-right: 0; } .pages a:hover, .pages a.active { background: #004485; border-color: #004485; color: #fff; } .culture-fixs { padding: 50px 11.14% 130px; background: #F1F1F1; } .posite { display: flex; margin-bottom: 42px; } .posite a, .posite span, .posite b { display: inline-block; color: #999999; font-size: 14px; font-weight: normal; } .posite a:hover { color: #004485; } .posite b { margin: 0 11px; } .culture-flex { float: left; box-sizing: border-box; position: relative; z-index: 2; padding: 43px 28px 58px; display: inline-block; width: 33%; vertical-align: top; position: sticky; top: 120px; } .culture-flex:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: #fff; } .culture-flex:after { position: absolute; left: 12px; top: 12px; z-index: -2; content: ""; width: 100%; height: 100%; background: #004485; } .culture-flex strong { display: block; color: #333333; font-size: 24px; font-weight: normal; line-height: 1.4; } .culture-flex .info-t2 { font-size: 16px; color: #004485; line-height: 1.5; margin-top: 10px; } .culture-time { display: flex; margin-top: 28px; padding-top: 15px; border-top: 1px solid rgba(112, 112, 112, 0.5); } .culture-time p { margin-right: 20px; line-height: 1.3; color: #999999; font-size: 14px; } .culture-time p:last-child { margin-right: 0; } .shares { margin-top: 26px; display: flex; } .shares a { display: inline-block; margin-right: 22px !important; width: 47px !important; height: 47px !important; text-align: center; line-height: 47px !important; border-radius: 50%; background: #CCCCCC !important; color: #fff !important; font-size: 23px; padding: 0 !important; text-decoration: none !important; } .shares a:hover { background: #004485 !important; } .shares a:last-child { margin-right: 0; } .c-view { float: left; display: inline-block; margin-left: 9%; width: 58%; } .views-info { color: #000; line-height: 2 ; font-family: "瀹嬩綋", SimSun; font-size: 16px; } .views-info * { line-height: 2 !important; font-size: 12pt !important; font-family: "瀹嬩綋", SimSun !important; background: none !important; color: #000 !important; } .views-info img { max-width: 88% !important; height: auto !important; } .page-prev { margin-top: 130px; padding-top: 52px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #707070; } .page-prev a { display: inline-block; color: #666666; font-size: 16px; } .page-prev a i { display: inline-block; top: 1px; position: relative; margin-right: 10px; font-style: normal; font-size: 22px; } .page-prev a:last-child i { margin-right: 0; margin-left: 10px; } .page-prev a:hover { color: #004485; } .page-prev a:hover i { color: #004485; } .container { position: relative; } .flex-menu { position: absolute; left: 0; top: 110px; z-index: 10; width: 120px; } .flex-menu.flex { position: fixed; } .flex-menu-li { background: rgba(0, 0, 0, 0.5); } .flex-menu-li li:hover a, .flex-menu-li li.active a { background: #EC0000; } .flex-menu-li li a { display: block; line-height: 1.4; padding: 10px 5px; font-size: 13px; text-align: center; overflow: hidden; color: #fff; font-size: 14px; } .build-wrap { padding: 108px 0 200px; } .build-li { margin-bottom: 70px; } .build-li li { margin-bottom: -2px; } .build-li li a { position: relative; display: flex; padding: 60px 0 65px; border-top: 2px solid #333333; border-bottom: 2px solid #333333; } .build-li li a:hover figure img { transform: scale(1.05); } .build-li li a:hover .build-text strong { color: #004485; } .build-li li a figure { display: block; position: absolute; right: 12.73%; top: 65px; width: 28.9%; line-height: 1; overflow: hidden; } .build-li li a figure img { display: block; width: 100%; height: auto; transition: 0.5s; } .party-list li { margin-bottom: 20px; } .party-list li a { border-bottom-color: #EC0000; border-top-color: #EC0000; border: 0px none; background-color: #F8F8F8; padding: 40px 35px; } .party-list li a .build-data { position: relative; right: auto; top: auto; margin-right: 5%; } .party-list li a figure { position: relative; right: auto; top: auto; margin-right: 5%; } .build-text { width: 53.125%; } .build-text strong { display: block; margin-bottom: 48px; line-height: 1.2; color: #06162E; font-size: 30px; font-weight: normal; transition: 0.4s; } .build-text p { font-size: 15px; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .build-text span { display: inline-block; margin-top: 65px; color: #333333; font-size: 14px; opacity: 0.5; } .build-data { position: absolute; right: 0; top: 58px; } .build-data b { display: block; margin-bottom: 12px; line-height: 1; color: #06162E; font-size: 40px; font-weight: normal; } .build-data p { text-align: right; line-height: 1; color: #06162E; font-size: 16px; } .special-item { padding: 20px 38px 20px 20px; margin-bottom: 48px; display: flex; justify-content: space-between; align-items: flex-start; background: #fff; } .special-imgs { width: 39.7%; line-height: 1; } .special-imgs img { display: block; width: 100%; height: auto; } .special-fix { width: 55.48%; } .special-top { margin-bottom: 22px; } .special-top strong { display: block; position: relative; padding-left: 24px; margin-bottom: 26px; color: #06162E; font-size: 26px; line-height: 1; } .special-top strong:before { position: absolute; left: 0; top: 0; content: ""; width: 4px; height: 100%; background: #DF0000; } .special-info { padding: 18px 24px 12px; background: #F1F1F1; border-radius: 6px; } .special-info p { color: #999999; font-size: 15px; } .special-list li { border-bottom: 1px dashed #C6C4C5; } .special-list li a:hover p { color: #DF0000; } .special-list li p { color: #999999; font-size: 15px; line-height: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.38s; } .specail-more { margin-top: 24px; } .specail-more a { display: inline-block; width: 99px; height: 31px; text-align: center; line-height: 31px; border-radius: 6px; background: #DF0000; color: #FFFFFF; } .specail-more a:hover { background: rgba(233, 0, 0, 0.8); } .posite-box { background: #fff; border-bottom: 1px solid #DC0000; } .posite-box .posite { padding: 18px; margin-bottom: 0; } .posite-box .posite a:hover { color: #DC0000; } .posite-box .posite a:hover i { color: #DC0000; } .posite a i { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 12px; color: #999999; font-size: 21px; font-style: normal; line-height: 1; } .case-wrap { padding: 99px 0 125px; } .case-box { background: #F1F1F1; } .case-li { padding-bottom: 78px; } .case-li li { margin-bottom: 20px; background: #fff; } .case-li li a { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; } .case-li li a:hover .case-text strong { color: #EC0000; } .case-time { box-sizing: border-box; padding: 20px 13px 19px; width: 99px; background: #EC0000; text-align: center; } .case-time b { display: block; line-height: 1; padding-bottom: 10px; color: #fff; font-size: 28px; font-weight: normal; border-bottom: 1px solid #fff; } .case-time span { display: block; margin-top: 16px; line-height: 1; color: #fff; font-size: 13px; } .case-text { margin-left: 40px; flex: 1; } .case-text strong { display: block; width: 100%; margin-bottom: 15px; line-height: 1.2; color: #333333; font-size: 22px; transition: 0.4s; } .case-text p { color: #999999; font-size: 14px; } .pages1 a:hover, .pages1 a.active { background: #EC0000; border-color: #EC0000; } .industry { padding: 100px 0 100px; } .industry-top { margin-bottom: 36px; text-align: center; } .industry-top strong { display: block; margin-bottom: 10px; line-height: 1; color: #333333; font-size: 40px; } .industry-top p { color: #666666; font-size: 32px; line-height: 1.2; } .flex-menu-li1 li.active a { background: #004485; } .flex-menu-li1 li a:hover { background: #004485; } .industry-info { padding: 55px 0; border-top: 2px solid #004485; border-bottom: 2px solid #004485; } .industry-info p { color: #666666; font-size: 20px; } .achievements { padding: 45px 0 125px; background: #F1F1F1; } .achievements-tt { position: relative; display: inline-block; padding-bottom: 18px; border-bottom: 2px solid #004485; color: #333333; font-size: 28px; line-height: 1; } .achievements-top { text-align: center; } .achievements-list { display: flex; flex-wrap: wrap; margin-top: 54px; } .achievements-list li { margin-right: 2%; margin-bottom: 28px; width: 32%; } .achievements-list li:nth-child(3n+3) { margin-right: 0; } .achievements-list li a:hover figure img { transform: scale(1.06); } .achievements-list li figure { position: relative; display: block; padding-bottom: 69.58%; height: 0; overflow: hidden; line-height: 1; } .achievements-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .achievements-list li figure img { transition: 0.78s; } .achievements-list li p { display: flex; justify-content: center; align-items: center; text-align: center; height: 70px; background: #fff; color: #999999; font-size: 16px; } .business-view { background: #F1F1F1; } .business-wraps { position: relative; padding-top: 30px; } .tt-mb45 { margin-bottom: 45px; } .business-logoList { margin-left: -3%; } .business-logoList li { float: left; width: 22%; margin-left: 3%; margin-bottom: 3%; } .business-logoList a { display: block; height: 120px; position: relative; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .business-logoList img { position: absolute; left: 5%; top: 5%; right: 5%; bottom: 5%; max-width: 90%; max-height: 90%; margin: auto; } .posite-right { justify-content: flex-end; } .business-tops { position: absolute; left: 0; top: -94px; z-index: 3; padding: 42px 90px 50px; width: 550px; box-sizing: border-box; background: #004485; } .business-tops strong { display: block; margin-bottom: 12px; line-height: 1.2; color: #fff; font-size: 32px; font-weight: normal; } .business-v { margin-left: 0; padding: 88px 0 110px; width: 100%; float: none; } .posite-wr { display: flex; justify-content: space-between; align-items: center; } .posite-menu { display: flex; } .posite-menu a { display: block; margin-left: 1px; padding: 0 44px; height: 66px; line-height: 66px; color: #333333; font-size: 16px; } .posite-menu a:hover, .posite-menu a.active { background: #EC0000; color: #fff; } .establish { padding: 110px 0 85px; } .establish strong { display: block; margin-bottom: 30px; line-height: 1.2; color: #EC0000; font-size: 36px; font-weight: normal; } .establish p { color: #333333; font-size: 18px; line-height: 2; } .vanguard { padding: 60px 0; background-attachment: fixed; background-position: center; background-size: cover; } .vanguard-wrap { position: relative; text-align: center; max-width: 1240px; margin: 0 auto; width: 90%; overflow: hidden; } .vanguard-wrap img { width: 100%; display: block; } .vanguard-wrap .itemA { position: absolute; width: 11%; height: 11%; display: block; } .vanguard-wrap .itemA2 { position: absolute; width: 7.7%; height: 4.8%; display: block; } .vanguard-wrap .item1 { width: 12.4%; height: 11%; left: 20.3%; top: 0%; } .vanguard-wrap .itemx1 { width: 9.3%; height: 8.6%; left: 9.1%; top: 1.1%; } .vanguard-wrap .item2 { left: 9.8%; top: 13%; } .vanguard-wrap .itemx2 { left: 0; top: 16.2%; } .vanguard-wrap .item3 { left: 22%; top: 26.2%; width: 10.8%; } .vanguard-wrap .itemx3 { left: 10.8%; top: 29.4%; width: 9.2%; } .vanguard-wrap .item4 { left: 9.8%; top: 39.2%; } .vanguard-wrap .itemx4 { left: 0.1%; top: 40.4%; height: 8.6%; } .vanguard-wrap .item5 { left: 22.2%; top: 51.5%; width: 10.6%; } .vanguard-wrap .itemx5 { left: 12.5%; top: 54.6%; } .vanguard-wrap .item6 { left: 9.8%; top: 64.2%; } .vanguard-wrap .itemx6 { left: 0.1%; top: 65.4%; height: 8.6%; } .vanguard-wrap .item7 { left: 21.6%; top: 76.7%; } .vanguard-wrap .itemx7 { left: 11.9%; top: 79.8%; } .vanguard-wrap .item8 { left: 10%; top: 89.2%; } .vanguard-wrap .itemx8 { left: 0.3%; top: 90.4%; height: 8.5%; } .vanguard-wrap .item9 { width: 12.4%; height: 11%; right: 20.4%; top: 0; } .vanguard-wrap .itemx9 { right: 9.2%; top: 3.2%; width: 9.2%; } .vanguard-wrap .item10 { right: 9.7%; top: 13%; } .vanguard-wrap .itemx10 { right: 0%; top: 16.3%; } .vanguard-wrap .item11 { right: 21.9%; top: 26.1%; } .vanguard-wrap .itemx11 { right: 12%; top: 27.4%; width: 8.1%; height: 8.5%; } .vanguard-wrap .item12 { right: 9.8%; top: 39.2%; } .vanguard-wrap .itemx12 { right: 0.2%; top: 42.4%; } .vanguard-wrap .item13 { right: 22%; top: 51.5%; } .vanguard-wrap .itemx13 { right: 12.5%; top: 54.6%; } .vanguard-wrap .item14 { right: 9.9%; top: 64.2%; } .vanguard-wrap .itemx14 { right: 0.2%; top: 67.4%; } .vanguard-wrap .item15 { right: 21.8%; top: 76.5%; } .vanguard-wrap .itemx15 { right: 12.1%; top: 79.8%; } .vanguard-wrap .item16 { right: 10%; top: 89.2%; } .vanguard-wrap .itemx16 { right: 0.4%; top: 92.2%; } .advance { padding: 80px 0; display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; } .advance-imgs { width: 46.09%; } .advance-imgs img { display: block; width: 100%; height: auto; } .advance-text { width: 44.5%; } .advance-text strong { display: block; margin-bottom: 32px; line-height: 1.2; color: #EC0000; font-size: 36px; font-weight: normal; } .advance-text p { color: #333333; font-size: 16px; } .brands { padding: 88px 0 130px; background-attachment: fixed; background-position: center; background-size: cover; } .page-title { margin-bottom: 45px; line-height: 1.2; color: #EC0000; font-size: 36px; font-weight: normal; } .cEC0000 { color: #EC0000; } .brand-list li { margin-bottom: 6px; } .brand-list li.active .brand-tops b:after { opacity: 0; visibility: hidden; transform: translateY(6px); } .brand-list .brand-tops { height: auto; padding: 15px 5%; } .brand-tops { display: flex; justify-content: space-between; align-items: center; padding: 0 45px 0 22px; height: 61px; background: #EC0000; cursor: pointer; } .brand-tops strong { display: block; color: #fff; font-size: 21px; font-weight: normal; } .brand-tops b { display: block; width: 16px; height: 16px; position: relative; } .brand-tops b:before { position: absolute; left: 0; top: 50%; margin-top: -1px; content: ""; width: 100%; height: 2px; background: #fff; } .brand-tops b:after { position: absolute; left: 50%; top: 0; margin-left: -1px; content: ""; width: 2px; height: 100%; background: #fff; transition: 0.3s; } .brand-text { padding: 27px 35px 42px; background: #fff; color: #333333; font-size: 16px; display: none; } .banenr-video { position: absolute; right: 5%; bottom: 5%; background-color: #fff; z-index: 100; width: 164px; cursor: pointer; } .banenr-video .img { border: 1px solid #fff; border-bottom: 0 none; position: relative; } .banenr-video .img .iconfont { position: absolute; width: 90%; text-align: center; color: #fff; left: 5%; top: 50%; transform: translateY(-50%); font-size: 20px; } .banenr-video .img img { width: 100%; display: block; } .banenr-video .txt { text-align: center; color: #333333; padding: 5px 0; font-size: 14px; } .pvideo-bg { position: fixed; z-index: 1000; left: -9999px; top: -9999px; bottom: 0; right: 0; background: none rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s; transition: opacity 0.4s 0.3s, visibility 0.4s 0.3s; } .pvideo-box { position: absolute; top: 40%; transform: translateY(-50%); width: 900px; left: 50%; margin-left: -450px; -webkit-transition: top 0.3s ease, opacity 0.3s ease; transition: top 0.3s ease, opacity 0.3s ease; opacity: 0; background-color: #fff; } .pvideo-box .videon { width: 100%; display: block; } .pvideo-box .pv-close { position: absolute; right: -42px; top: 0; width: 32px; height: 32px; font-size: 26px; line-height: 32px; text-align: center; color: #fff; -webkit-transition: 0.4s; transition: 0.4s; } .pvideo-box .pv-close:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .overlay { opacity: 1; visibility: visible; left: 0; top: 0; transition-delay: 0; } .overlay .pvideo-box { top: 50%; opacity: 1; transition-delay: 0.4s; } .honor-list { width: 82%; margin: 0 auto; } .honor-list dd { padding: 50px 0; border-bottom: 1px solid #FDE3E3; } .honor-list .title { font-size: 36px; color: #EC0000; font-weight: normal; font-family: Arial, Helvetica, sans-serif; line-height: 1.2; margin-bottom: 20px; } .honor-list .c { font-size: 18px; color: #333333; } .honor-list .img-item { display: flex; display: -webkit-flex; align-items: center; } .honor-list .img-item .desc { flex: 1; } .honor-list .con-item .desc { display: flex; display: -webkit-flex; align-items: center; } .honor-list .con-item .title { width: 38%; margin-right: 50px; } .honor-list .con-item .c { flex: 1; } .honor-demo { position: relative; width: 38%; margin-right: 50px; } .honor-demo .swiper-slide .imgw { width: 100%; display: block; } .honor-arrow { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; background-color: rgba(0, 0, 0, 0.24); border-radius: 50%; z-index: 400; font-size: 16px; cursor: pointer; } .honor-prev { left: 3%; } .honor-next { right: 3%; } .success { padding: 88px 0 110px; } .success-top { margin-bottom: 44px; text-align: center; } .success-top strong { display: block; line-height: 1.2; color: #EC0000; font-size: 36px; font-weight: normal; } .success-top p { margin: auto; margin-top: 24px; width: 980px; max-width: 100%; color: #333333; font-size: 18px; } .success-list { display: flex; } .success-item { margin-left: -1px; flex: 1; border: 1px solid #D9D9D9; } .success-title { display: flex; justify-content: center; align-items: center; height: 86px; background: #F1F1F1; border-bottom: 1px solid #D9D9D9; color: #333333; font-size: 24px; } .success-info { padding: 44px 27px 55px; color: #666666; font-size: 15px; } .cleam-box { padding: 62px 0 76px; background: #F5F5F5; } .cleam-top { display: flex; } .cleam-swiper { margin: 0; width: 47.34%; } .cleam-swiper .swiper-pagination { width: auto; left: auto; right: 3%; bottom: 5%; line-height: 1; } .cleam-swiper .swiper-pagination .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0; margin-left: 11px; opacity: 0.3; background: #fff; } .cleam-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .cleam-slide { overflow: hidden; position: relative; } .cleam-slide a { display: block; } .cleam-slide a:hover figure img { transform: scale(1.05); } .cleam-slide figure { line-height: 1; overflow: hidden; height: 398px; } .cleam-slide figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.68s; } .cleam-texts { position: relative; display: flex; justify-content: start; align-items: center; padding: 33.5px 80px 36px 15px; background: linear-gradient(to bottom, #599EE1 0%, #004485 100%); } .cleam-texts strong { display: block; flex: 1; color: #fff; font-size: 18px; font-weight: normal; line-height: 1.4; } .cleam-data { position: relative; line-height: 1; padding-right: 14px; margin-right: 15px; text-align: center; } .cleam-data:before { position: absolute; right: 0; top: 50%; margin-top: -31px; content: ""; width: 1px; height: 62px; background: rgba(255, 255, 255, 0.42); } .cleam-data b { display: block; margin-bottom: 8px; line-height: 1; color: #fff; font-size: 44px; } .cleam-data time { display: block; line-height: 1; color: #fff; font-size: 12px; } .job-work { box-sizing: border-box; padding: 0 56px 0 50px; width: 52.66%; border-top: 3px solid #004485; background: #fff; } .jobs-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; } .jobs-top strong { display: block; position: relative; margin-top: -3px; z-index: 2; padding: 22px 11px 34px; line-height: 1; color: #FFFFFF; font-size: 24px; font-weight: normal; } .jobs-top strong:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, #599EE1 0%, #004485 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 75%); } .jobs-top a { display: inline-block; margin-top: 22px; color: #999999; font-size: 14px; } .jobs-top a:hover { color: #004485; } .job-list { margin-top: -15px; } .job-list li { border-bottom: 1px solid #D8D8D8; } .job-list li:last-child { border-bottom: none; } .job-list li a { display: block; padding: 25px 0 18px; } .job-list li a strong { display: block; position: relative; padding-left: 16px; color: #06162E; font-size: 18px; font-weight: normal; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-list li a strong:before { position: absolute; left: 0; top: 50%; margin-top: -5px; content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid #004485; } .job-list li a p { color: #999999; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .job-time { display: flex; align-items: center; margin-top: 5px; margin-bottom: 13px; } .job-time b { display: inline-block; padding-right: 10px; margin-right: 8px; border-right: 1px solid #BBBBBB; color: #06162E; font-size: 12px; line-height: 14px; } .job-time time { display: inline-block; color: #BBBBBB; font-size: 12px; } .cleam-list { margin-top: 36px; display: flex; justify-content: space-between; } .cleam-items { box-sizing: border-box; padding: 0 20px; width: 32%; background: #fff; border-top: 3px solid #004485; } .cleam-titles { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 13px; border-bottom: 1px solid #D9D9D9; } .cleam-titles strong { display: block; line-height: 1.5; color: #004485; font-size: 20px; font-weight: normal; } .cleam-titles strong i { display: inline-block; position: relative; top: 3px; margin-right: 4px; font-style: normal; font-size: 36px; background-image: linear-gradient(to bottom, #599EE1 0%, #004485 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } .cleam-titles a { display: inline-block; padding-top: 15px; color: #999999; font-size: 14px; } .cleam-titles a:hover { color: #004485; } .cleam-fix { padding: 30px 0; } .cleam-li li { margin-bottom: 10px; } .cleam-li li:last-child { margin-bottom: 0; } .cleam-li li a { display: flex; justify-content: space-between; align-items: center; } .cleam-li li a:hover p { color: #004485; } .cleam-li li a p { color: #999999; font-size: 14px; width: 74%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.45s; } .cleam-li li a time { display: block; color: #999999; font-size: 12px; } .special-area { margin-top: 36px; } .special-area a { display: block; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 58px 0 64px; text-align: center; } .special-area a strong { display: block; margin-bottom: 20px; line-height: 1.2; color: #fff; font-size: 26px; } .special-area a span { display: inline-block; width: 105px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #fff; color: #fff; font-size: 14px; transition: 0.4s; } .special-area a span:hover { background: #fff; color: #004485; } .honest { padding: 0 20px 45px; margin-top: 42px; border-top: 3px solid #004485; background: #fff; } .honest-tab { position: relative; margin-top: 26px; } .honest-slide { text-align: center; } .honest-slide:hover figure img { transform: scale(1.08); } .honest-slide:hover p { color: #004485; } .honest-slide figure { display: block; line-height: 1; overflow: hidden; } .honest-slide figure img { display: block; width: 100%; height: auto; transition: 0.68s; } .honest-slide p { margin-top: 10px; color: #999999; font-size: 14px; transition: 0.4s; } .honest-btn span { display: block; position: absolute; top: 84px; z-index: 10; line-height: 1; color: #C6C4C5; font-size: 26px; font-weight: bold; cursor: pointer; transition: 0.4s; } .honest-btn span:hover { color: #004485; } .honest-btn span.prev { left: -56px; } .honest-btn span.next { right: -56px; } .case-li1 li a { background: none; border: 1px solid #CCCCCC; } .case-li1 li a:hover .case-time { background: #004485; } .case-li1 li a:hover .case-text strong { color: #004485; } .case-li1 li a .case-time { background: #C6C4C5; transition: 0.45s; } .policy-box { background: #fff; } .report { padding: 106px 0 150px; } .report-title { display: block; text-align: center; color: #06162E; font-size: 30px; font-weight: normal; line-height: 1.2; } .report-list { display: flex; margin-top: 60px; } .report-item { margin-right: 55px; flex: 1; text-align: center; padding: 90px 0; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .report-item:last-child { margin-right: 0; } .report-item i { display: block; line-height: 1; color: #004485; font-style: normal; font-size: 38px; } .report-item b { display: block; margin-top: 44px; margin-bottom: 10px; line-height: 1; color: #666666; font-size: 16px; font-weight: normal; } .report-item p { color: #999999; font-size: 22px; line-height: 1.3; } .develop-title { margin-bottom: 45px; text-align: center; font-size: 30px; font-weight: 600; line-height: 1.2; position: relative; color: #fff; padding-bottom: 20px; } .develop-title .t img { max-width: 100%; } .develop-title::before { content: ""; position: absolute; width: 22px; height: 7px; background-color: #fff; display: block; margin: 0 auto; left: 0; right: 0; bottom: 0; } .zl-box { color: #fff; } .zl-box .desc { text-align: center; width: 72%; margin: 0 auto 8%; font-size: 15px; } .personnel-list { display: flex; flex-wrap: wrap; } .personnel-list li { margin-right: 3.125%; margin-bottom: 48px; width: 31.25%; } .personnel-list li:nth-child(3n+3) { margin-right: 0; } .personnel-list li a:hover figure img { transform: scale(1.06); } .personnel-list li a:hover .timebox { background-color: #004485; } .personnel-list li a:hover .personnel-info strong { color: #004485; } .personnel-list li figure { position: relative; display: block; padding-bottom: 66.08%; height: 0; overflow: hidden; line-height: 1; } .personnel-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .personnel-list li figure img { transition: 0.68s; } .personnel-list .timebox { position: absolute; top: 12px; right: 15px; background-color: #333333; display: block; color: #fff; padding: 6px; text-align: center; line-height: 1; transition: 0.4s; } .personnel-list .timebox span { display: block; font-family: Arial, Helvetica, sans-serif; } .personnel-list .timebox .day { font-size: 34px; margin-bottom: 2px; } .personnel-info { padding: 20px; background-color: #F1F1F1; } .personnel-info strong { display: block; line-height: 1.2; color: #333333; font-size: 16px; transition: 0.4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .personnel-info p { color: #999999; font-size: 14px; } .personnel-more { text-align: center; } .personnel-more a { display: inline-block; width: 154px; height: 40px; line-height: 40px; text-align: center; color: #333333; background-color: #fff; font-size: 14px; } .personnel-more a:hover { border-color: #004485; background: #004485; color: #fff; } .personnel-more a:hover i { color: #fff; } .personnel-more a i { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-left: 13px; color: #2C2C2C; font-size: 23px; font-style: normal; transition: 0.4s; } .strategys { padding-top: 20%; position: relative; } .strategys .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .strategys .img img { height: 100%; object-fit: cover; } .strategy-texts { position: relative; box-sizing: border-box; padding: 35px 5% 50px; background: rgba(0, 68, 133, 0.8); color: #fff; } .strategy-texts .title { margin-bottom: 18px; line-height: 1.2; font-size: 30px; text-align: center; } .recruit-box { position: relative; } .recruit-box .build-ilist { margin-bottom: 25px; } .recruit-box .build-ilist dd::before { background-color: #004485; } .recruit-box .build-ilist dd:hover .time { color: #004485; } .recruit-list { padding-bottom: 35px; display: flex; flex-wrap: wrap; } .recruit-list li { margin-bottom: 23px; width: 48%; margin-right: 4%; } .recruit-list li:nth-child(2n+2) { margin-right: 0; } .recruit-list li a { display: flex; justify-content: space-between; align-items: center; padding: 17px 21px 24px; background: #fff; } .recruit-list li a:hover .recruit-data { background: #004485; } .recruit-data { position: relative; padding: 22px 0; width: 76px; background: #999999; text-align: center; transition: 0.4s; } .recruit-data:before, .recruit-data:after { position: absolute; top: 0; content: ""; width: 6px; height: 10px; background: #fff; } .recruit-data:before { left: 13px; } .recruit-data:after { right: 13px; } .recruit-data b { display: block; margin-bottom: 5px; color: #FFFFFF; font-size: 41px; line-height: 1; font-weight: normal; font-family: "Gilroy"; } .recruit-data time { display: block; line-height: 1; color: #fff; font-size: 13px; font-family: "Gilroy"; } .recruit-info { margin: 0 22px; flex: 1; } .recruit-info p { color: #333333; font-size: 20px; line-height: 1.5; } .message-li { display: flex; flex-wrap: wrap; } .message-li li { margin-right: 3.125%; margin-bottom: 56px; width: 31.25%; background-color: #fff; } .message-li li:nth-child(3n+3) { margin-right: 0; } .message-li li a { color: #999999; display: block; padding: 35px 24px 40px; } .message-li li a:hover { background-color: #004485; color: #fff; } .message-li li a:hover strong { color: #fff; } .message-li li a time { display: block; margin-bottom: 12px; line-height: 1.2; font-size: 14px; } .message-li li a strong { display: block; margin-bottom: 18px; line-height: 1.5; color: #333333; font-size: 20px; height: 60px; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .message-li li a p { font-size: 14px; height: 100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .message-li li a span { display: block; margin-top: 55px; padding-top: 12px; font-size: 14px; border-top: 1px solid #C6C4C5; } .communicates { padding: 88px 0 125px; display: flex; justify-content: space-between; } .communicates-item { position: relative; width: 31.25%; } .communicates-item:hover figure:before { background: rgba(0, 68, 133, 0.8); } .communicates-item:hover figure img { transform: scale(1.06); } .communicates-item:hover .communicate-title { opacity: 0; visibility: hidden; } .communicates-item:hover .communicate-texts { opacity: 1; visibility: visible; } .communicates-item figure { display: block; position: relative; line-height: 1; overflow: hidden; } .communicates-item figure:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; z-index: 3; background: rgba(0, 0, 0, 0.5); transition: 0.65s; } .communicates-item figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.68s; } .communicates-item2:hover figure:before { background: rgba(0, 68, 133, 0.8); } .communicates-item2:hover figure img { transform: scale(1.06); } .communicates-item2:hover .communicate-title { opacity: 1; visibility: visible; } .communicates-item2 .linkA { z-index: 10; } .communicate-title { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; line-height: 1; z-index: 4; transition: 0.45s; } .communicate-title i { display: block; margin-bottom: 30px; line-height: 1; font-style: normal; color: #fff; font-size: 48px; } .communicate-title p { color: #fff; line-height: 1.2; font-size: 30px; } .communicate-texts { position: absolute; left: 34px; right: 34px; top: 7%; z-index: 5; opacity: 0; visibility: hidden; transition: 0.5s; } .communicate-texts strong { display: block; text-align: center; line-height: 1; color: #fff; font-size: 24px; font-weight: normal; } .communicate-info { margin-top: 20px; padding: 20px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .communicate-it { margin-bottom: 15px; } .communicate-it:last-child { margin-bottom: 0; } .communicate-it p { color: #fff; font-size: 14px; } .vanguard-wrap.article-block { clip-path: circle(0 at center); visibility: hidden; transition: 5s; } .vanguard-wrap.articleShow { clip-path: circle(100% at center); visibility: visible; } .platform { display: flex; justify-content: space-between; padding-bottom: 100px; } .platform-item { position: relative; width: 47.42%; } .platform-item:hover figure img { transform: scale(1.05); } .platform-item:hover .platform-text:before { height: 100%; bottom: auto; top: 0; } .platform-item:hover .platform-text .platform-wr { opacity: 1; visibility: visible; } .platform-item:hover p { opacity: 0; visibility: hidden; } .platform-item figure { display: block; position: relative; line-height: 1; overflow: hidden; } .platform-item figure img { display: block; width: 100%; height: auto; transition: 0.68s; } .platform-item p { margin-top: 24px; text-align: center; color: #000000; font-size: 24px; transition: 0.4s; } .platform-text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; } .platform-text:before { position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; width: 100%; height: 0; background: rgba(0, 68, 133, 0.6); transition: 0.6s; } .platform-wr { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; width: 100%; text-align: center; opacity: 0; visibility: hidden; transition: 0.58s; } .platform-wr b { display: block; margin: auto; line-height: 1; color: #fff; font-size: 40px; font-weight: normal; } .platform-wr span { display: block; margin-top: 22px; line-height: 1; color: #FFFFFF; font-size: 24px; font-weight: bold; } .honor-pdemo .swiper-slide { width: 470px; } .honor-pdemo .img img { width: 100%; display: block; } .honor-pdemo .txt { text-align: center; padding: 10px 0; font-size: 14px; line-height: 1.5; opacity: 0; transition: 0.3s; } .honor-pdemo .swiper-btnbox { margin-top: 20px; } .honor-pdemo .swiper-slide-active .txt { opacity: 1; } .swiper-btnbox { display: flex; justify-content: center; } .swiper-arrow { display: block; width: 50px; height: 50px; border: 1px solid #C6C4C5; border-radius: 50%; text-align: center; line-height: 50px; color: #C6C4C5; font-size: 24px; margin: 0 10px; cursor: pointer; transition: 0.4s; } .swiper-arrow:hover { border-color: #004485; color: #004485; } .pagePadding { padding: 100px 0; } .pagePadding2 { padding: 80px 0 100px; } .pagePadding3 { padding: 60px 0 100px; } .pb100 { padding-bottom: 100px; } .bgf1 { background-color: #F1F1F1; } .w1480 { width: 77%; max-width: 1480px; margin: 0 auto; } .news-ibox { padding: 70px 0 80px; } .ibox-title { margin-bottom: 38px; display: flex; justify-content: space-between; align-items: center; } .ibox-title .name { font-size: 36px; line-height: 1.5; color: #333333; } .ibox-title .more { font-size: 14px; } .ibox-title .more:hover { color: #CE0000; } .news-ibox .ibox-title { padding-bottom: 30px; border-bottom: 1px solid #DFDFDF; } .abouti-swiper .swiper-slide { position: relative; } .abouti-swiper .img { position: relative; overflow: hidden; } .abouti-swiper .img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: -webkit-linear-gradient(rgba(17, 17, 17, 0), #333333); background: linear-gradient(rgba(17, 17, 17, 0), #333333); z-index: 1; } .abouti-swiper .time { position: absolute; right: 0; top: 0; padding: 8px 20px 12px 10px; background-color: #fff; background-color: rgba(255, 255, 255, 0.8); line-height: 1.4; font-family: 'Gilroy'; color: #9F9F9F; transition: 0.3s; -webkit-transition: 0.3s; } .abouti-swiper .time span { display: block; } .abouti-swiper .time .day { font-size: 20px; } .abouti-swiper .txt { font-size: 18px; text-align: center; position: absolute; left: 5%; right: 5%; bottom: 8%; color: #fff; line-height: 1.5; z-index: 2; height: 54px; overflow: hidden; transition: 0.3s; -webkit-transition: 0.3s; } .abouti-swiper .line { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 6%; background-color: #fff; height: 1px; width: 0; transition: 0.3s; -webkit-transition: 0.3s; z-index: 2; } .abouti-swiper .linkA { z-index: 3; } .abouti-swiper .swiper-slide:hover .time { background-color: #004485; background-color: rgba(0, 68, 133, 0.8); color: #fff; } .abouti-swiper .swiper-slide:hover .img::after { background: -webkit-linear-gradient(rgba(0, 68, 133, 0), #004485); background: linear-gradient(rgba(0, 68, 133, 0), #004485); } .abouti-swiper .swiper-slide:hover .txt { bottom: 15%; } .abouti-swiper .swiper-slide:hover .line { width: 30px; } .swiper-tbtn .arrow { float: left; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 1px solid #707070; text-align: center; font-size: 18px; margin-left: 20px; color: #000000; transition: 0.3s; -webkit-transition: 0.3s; position: relative; } .swiper-tbtn .arrow:hover { background-color: #004485; color: #fff; border-color: #004485; } .swiper-tbtn .arrow::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); border-radius: 50%; visibility: hidden; z-index: -1; } .swiper-tbtn .arrow:hover:before { opacity: 0; visibility: visible; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: 0.5s; transition: 0.5s; } .build-ibox { padding: 50px 0 80px; background-position: left center; } .build-ilist { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; } .build-ilist dd { position: relative; background-color: #fff; width: 49%; margin-right: 2%; margin-bottom: 22px; } .build-ilist dd:nth-child(2n+2) { margin-right: 0; } .build-ilist dd::before { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background-color: #D40000; transition: 0.6s; -webkit-transition: 0.6s; } .build-ilist .item { padding: 16px; display: flex; display: -webkit-flex; display: -moz-flex; } .build-ilist .img { width: 144px; margin-right: 25px; overflow: hidden; } .build-ilist .desc { flex: 1; } .build-ilist .time { font-size: 14px; font-family: "Gilroy"; font-weight: lighter; line-height: 1; } .build-ilist .t { font-size: 18px; color: #2F3439; line-height: 1.2; margin-bottom: 20px; } .build-ilist .c { font-size: 14px; color: #96999B; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .build-ilist dd:hover::before { width: 100%; } .build-ilist dd:hover .time { color: #CE0000; } .build-ilist2 dd { background-color: #F7F7F7; } .cy-ibox .ibox-title { display: block; width: 1020px; margin: 0 auto; text-align: center; color: #fff; } .cy-ibox .ibox-title .name { margin-bottom: 35px; color: #fff; } .f16 { font-size: 16px; } .about-itype { position: relative; color: #fff; margin-top: 120px; } .about-itype::before { content: ""; position: absolute; left: 0; top: 75px; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.3); } .about-ilist { display: flex; display: -webkit-flex; display: -moz-flex; align-items: center; justify-content: space-between; } .about-ilist dd { text-align: center; width: 157px; position: relative; } .about-ilist .ico { height: 73px; } .about-ilist .ico .iconfont { font-size: 50px; line-height: 1; display: block; margin: 0 auto; } .about-ilist .txt { border-top: 4px solid #FFFFFF; font-size: 18px; line-height: 1.2; font-weight: bold; padding: 35px 0; } .about-ilist .arrow { font-size: 16px; font-weight: bold; width: 32px; height: 32px; line-height: 32px; text-align: center; color: #004485; background-color: #fff; border-radius: 50%; display: block; margin: 0 auto; transition: 0.3s; -webkit-transition: 0.3s; transform: translateX(-10px); -webkit-transform: translateX(-10px); opacity: 0; visibility: hidden; } .about-ilist dd:hover { color: #599EE1; } .about-ilist dd:hover .arrow { opacity: 1; visibility: visible; transform: translateX(0); -webkit-transform: translateX(0); } .about-ilist dd:hover .ico { -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; } .about-ilist dd:hover .txt { border-color: #599EE1; } @keyframes gelatine { from, to { -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); } from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes gelatine { from, to { -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); } } .link-ilist { display: flex; display: -webkit-flex; display: -moz-flex; } .link-ilist dd { position: relative; overflow: hidden; width: 50%; } .link-ilist .img { position: relative; } .link-ilist .img:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; transition: 0.3s; background: rgba(0, 0, 0, 0.2); } .link-ilist .title { position: absolute; color: #fff; font-size: 36px; left: 5%; right: 5%; top: 50%; margin: 0 auto; transform: translateY(-50%); -webkit-transform: translateY(-50%); text-align: center; z-index: 2; } .link-ilist .linkA { z-index: 3; } .link-ilist dd:hover .img::before { background: rgba(0, 0, 0, 0.5); } .tbanner { color: #fff; } .tbanner .item { position: relative; } .tbanner .img { position: relative; overflow: hidden; } .tbanner .imgw { transition: transform 3.5s; -webkit-transition: transform 3.5s; transform: scale(1.1); -webkit-transform: scale(1.1); } .tbanner .swiper-slide-active .imgw { visibility: visible !important; transform: scale(1); -webkit-transform: scale(1); } .tbanner video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .tbanner .desc { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-left: -740px; } .tbanner .by { font-size: 30px; line-height: 1.5; display: flex; display: -webkit-flex; display: -moz-flex; align-items: center; margin-bottom: 5px; } .tbanner .t { font-size: 60px; line-height: 1.2; } .tbanner .t2 { font-size: 40px; line-height: 1.2; } .tbanner .by, .tbanner .t, .tbanner .t2 { opacity: 0; visibility: visible; transform: translateX(10%); -webkit-transform: translateX(10%); } .tbanner .line { position: relative; padding-left: 216px; height: 2px; background-color: #fff; margin-left: 25px; } .tbanner .line::before { content: ""; position: absolute; left: 0; width: 0; height: 100%; background-color: #3C78AD; } .tbanner .bot { width: 38px; height: 6px; background-color: #fff; margin-top: 40px; display: block; } .tbanner .swiper-pag { position: absolute; left: 0; width: 100%; bottom: 5%; z-index: 5; text-align: center; } .tbanner .swiper-pag .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid #fff; background-color: transparent; opacity: 1; margin: 0 9px; } .tbanner .swiper-pag .swiper-pagination-bullet-active { background-color: #fff; } .tbanner .swiper-slide-active .line::before { -webkit-animation: bannerline 4.1s 1s linear; animation: bannerline 4.1s 1s linear; } .tbanner .swiper-slide-active .t, .tbanner .swiper-slide-active .t2, .tbanner .swiper-slide-active .by { opacity: 1; visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); transition: 0.6s; -webkit-transition: 0.6s; } .tbanner .swiper-slide-active .by { -webkit-transition: all 0.68s 0.5s; transition: all 0.68s 0.5s; } .tbanner .swiper-slide-active .t, .tbanner .swiper-slide-active .t2 { -webkit-transition: all 0.68s 0.8s; transition: all 0.68s 0.8s; } @-webkit-keyframes bannerline { from { width: 0%; } to { width: 100%; } } @keyframes bannerline { from { width: 0%; } to { width: 100%; } } .page-titleT { color: #06162E; line-height: 1.5; padding-bottom: 55px; } .page-titleT .zh { font-size: 30px; line-height: 1.2; font-weight: bold; } .page-titleT .en { font-size: 20px; font-family: "GilroyR"; opacity: 0.5; } .page-titleTB { color: #fff; } .leader-list-T dt, .leader-list-T dd { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: nowrap; } .leader-list-T dt { background-color: #94B0CC; color: #fff; } .leader-list-T dd:nth-child(odd) { background-color: #F0F4F8; } .leader-list-T .item { position: relative; box-sizing: border-box; padding: 20px 20px 20px 8%; line-height: 1.5; } .leader-list-T .item:first-child { width: 35%; } .leader-list-T .item:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; height: 100%; background-color: rgba(217, 217, 217, 0.33); } .leader-list-T .item:last-child { width: 65%; } .hide { display: none; } .leader-list-T2 dd:nth-child(odd) { background-color: #fff; } .leader-list-T2 dd:nth-child(even) { background-color: #F0F4F8; } .leader-more-box { padding-top: 50px; } .leader-more:hover { color: #004485; } .historiy-pbox-T { position: relative; color: #fff; } .historiy-pbox-T::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.6); } .historiy-pw-T .item { height: auto; position: relative; } .historiy-pw-T .item-desc { height: 180px; position: relative; } .historiy-pw-T .item-desc::before { content: ""; position: absolute; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%; background-color: #599EE1; left: 0; bottom: -8px; } .historiy-pw-T .year { color: #599EE1; font-family: "GilroyR"; line-height: 1.2; margin-bottom: 18px; } .historiy-pw-T .year .y { font-size: 28px; color: #599EE1; } .historiy-pw-T .year .by { padding-left: 10px; } .historiy-pw-T .c { font-weight: lighter; height: 87px; font-size: 16px; overflow: hidden; } .historiy-pw-T .item:nth-child(even) .item-desc { margin-top: 180px; } .historiy-pw-T .item:nth-child(even) .item-desc::before { top: -8px; bottom: auto; } .historiy-pw-T .item:nth-child(even) .year { padding-top: 40px; } .member-list-T { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; margin-left: -1%; } .member-list-T li { width: 19%; margin-left: 1%; margin-bottom: 20px; } .member-list-T a { display: block; border: 1px solid #D9D9D9; height: 98px; position: relative; } .member-list-T a img { max-width: 90%; max-height: 90%; object-fit: cover; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .member-list-T a:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); } .news-list-t { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; margin-left: -2%; padding-bottom: 2%; } .news-list-t li { width: 31.33%; margin-left: 2%; position: relative; margin-bottom: 3%; padding-bottom: 24px; } .news-list-t li::before { content: ""; position: absolute; width: 0; height: 4px; left: 0; bottom: 0; background-color: #004485; transition: 0.6s; -webkit-transition: 0.6s; } .news-list-t li:hover::before { width: 100%; } .news-list-t li:hover .time { background-color: #004485; } .news-list-t li:hover .title { color: #004485; } .news-list-t li:hover .bot a { color: #004485; } .news-list-t li:hover .bot a .iconfont { transform: rotate(0deg); -webkit-transform: rotate(0deg); } .news-list-t .img { position: relative; overflow: hidden; } .news-list-t .time { position: absolute; right: 0; top: 0; color: #fff; padding: 8px 20px 8px 10px; background-color: #333333; line-height: 1.2; font-family: "GilroyR"; transition: 0.3s; -webkit-transition: 0.3s; } .news-list-t .time span { display: block; } .news-list-t .time .year { font-size: 10px; } .news-list-t .time .day { font-size: 22px; } .news-list-t .title { margin: 25px 0; font-size: 20px; color: #333333; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.3s; -webkit-transition: 0.3s; } .news-list-t .c { color: #8F8F8F; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 40px; } .news-list-t .bot a { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: nowrap; align-items: center; } .news-list-t .bot a .ico { width: 28px; height: 28px; line-height: 28px; color: #fff; background-color: #004485; margin-left: 12px; text-align: center; transition: 0.3s; -webkit-transition: 0.3s; } .news-list-t .bot a .iconfont { display: block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: 0.3s; -webkit-transition: 0.3s; } .news-list2-T { padding-bottom: 80px; } .news-list2-T li { margin-bottom: 10px; } .news-list2-T .item { position: relative; display: block; height: 68px; line-height: 68px; font-size: 20px; padding-left: 28px; color: #333333; transition: 0.3s; -webkit-transition: 0.3s; border-bottom: 1px solid #333333; overflow: hidden; } .news-list2-T .item::before { content: ''; width: 0px; height: 0px; border: 6px solid transparent; border-left: 10px solid #333333; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; transition: 0.3s; -webkit-transition: 0.3s; } .news-list2-T .item .time { float: right; margin-left: 20px; font-family: "GilroyR"; font-size: 16px; color: #666666; transition: 0.3s; -webkit-transition: 0.3s; } .news-list2-T .item:hover { color: #004485; border-bottom: 1px solid #004485; } .news-list2-T .item:hover .time { color: #004485; } .build-title-t { padding: 55px 0; text-align: center; font-size: 36px; color: #BF0000; line-height: 1.5; } .build-page-t { display: flex; display: -webkit-flex; display: -moz-flex; } .build-swiper-t { margin: 0; width: 62%; } .build-swiper-t .swiper-pagination { width: auto; left: auto; right: 3%; bottom: 5%; line-height: 1; } .build-swiper-t .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0; margin-left: 7px; opacity: 0.6; background: #fff; } .build-swiper-t .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .build-slide { overflow: hidden; position: relative; } .build-slide a { display: block; } .build-slide a:hover figure img { transform: scale(1.05); } .build-slide figure { overflow: hidden; height: 555px; } .build-slide figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.68s; } .build-slide .t { position: absolute; left: 5%; right: 20%; bottom: 3%; color: #fff; font-size: 18px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .build-right-t { width: 35%; padding-left: 3%; border-top: 7px solid #BF0000; } .build-right-title { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 15px 0 10px; } .build-right-title .t { color: #BF0000; } .build-right-title a { color: #999999; } .build-right-title a:hover { color: #BF0000; } .f26 { font-size: 26px; } .f22 { font-size: 22px; } .build-right-list li { margin-bottom: 20px; } .build-right-list li:last-child { margin-bottom: 0; } .build-right-list li:hover .title { color: #BF0000; } .build-right-list a { display: block; } .build-right-list .title { font-size: 18px; color: #333333; line-height: 1.5; height: 54px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .build-type-title { border-bottom: 1px solid #dbdbdb; padding-bottom: 15px; line-height: 1; display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 14px; } .build-type-title .t { color: #BF0000; position: relative; padding-left: 20px; } .build-type-title .t::before { content: ""; position: absolute; left: 0; width: 5px; height: 100%; background-color: #BF0000; } .build-type-title a { color: #999999; transition: 0.3s; -webkit-transition: 0.3s; } .build-type-title a:hover { color: #BF0000; } .build-type-list { display: flex; display: -webkit-flex; display: -moz-flex; margin-left: -3%; } .build-type-list .build-type-title { background-color: #fff; } .build-type-list dd { margin-top: 60px; width: 30.33%; margin-left: 3%; } .build-type-list .img { position: relative; overflow: hidden; } .build-type-list .img img { transition: 0.68s; } .build-type-list .img:hover img { transform: scale(1.05); } .build-type-item { padding: 18px; background-color: #F7F7F7; } .build-type-item1 { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: nowrap; } .build-type-item1 .t { color: #BF0000; margin-right: 20px; } .build-type-item1 .c { flex: 1; text-align: justify; } .build-type-ul li a { line-height: 34px; height: 34px; position: relative; display: block; padding-left: 20px; transition: 0.3s; -webkit-transition: 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .build-type-ul li a::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #999999; top: 50%; transform: translateY(-50%); transition: 0.3s; -webkit-transition: 0.3s; } .build-type-ul li a:hover { color: #333333; font-weight: 600; } .build-type-ul li a:hover::before { background-color: #333333; } .remond-build .build-type-title { margin-bottom: 40px; justify-content: center; } .remond-build .build-ilist dd { background-color: #F7F7F7; } .ttbanner-box { position: relative; } .ttbanner-box .page-cur { position: absolute; left: 0; top: 10px; width: 100%; } .ttbanner-box .inner-title { top: auto; bottom: 10%; } .page-cur { color: #fff; } .page-cur a { color: #fff; } .page-cur a i { margin-right: 10px; } .page-cur .line { padding: 0 5px; } .strategy-pdesc { font-size: 20px; color: #333333; } .strategy-box { width: 36.6406%; position: relative; margin: 0 auto; } .strategy-box .box { position: relative; } .strategy-box .box .title { position: absolute; left: 14%; right: 14%; top: 50%; transform: translateY(-50%); font-size: 26px; color: #fff; text-align: center; line-height: 1.5; } .strategy-box .item { position: absolute; } .strategy-box .item .line1 { position: absolute; } .strategy-box .item .num { position: absolute; border-radius: 50%; background-color: #fff; color: #004485; display: block; width: 42px; height: 42px; font-size: 20px; text-align: center; line-height: 42px; box-shadow: 3px 3px 8px rgba(0, 68, 133, 0.16); } .strategy-box .item .name { display: inline-block; border-radius: 26px; border: 2px solid #004485; background-color: #fff; padding: 4px 20px; font-size: 26px; font-weight: 600; color: #004485; line-height: 1.4; position: relative; z-index: 2; } .strategy-box .item .c { margin-top: 8px; padding-left: 6%; } .strategy-box .item1 { right: 80%; top: 10%; width: 85.7142%; } .strategy-box .item1 .line1 { right: 0; bottom: 0; width: 44.2786%; } .strategy-box .item1 .num { right: -5%; bottom: -5%; } .strategy-box .item2 { left: 80%; top: 10%; width: 85.7142%; } .strategy-box .item2 .line1 { left: 0; bottom: 0; width: 44.2786%; } .strategy-box .item2 .num { left: -5%; bottom: -5%; } .strategy-box .item2 .name { margin-left: 50%; } .strategy-box .item2 .c { padding-left: 56%; } .strategy-box .item3 { right: 80%; bottom: 0%; width: 90%; } .strategy-box .item3 .line1 { right: 0; top: 0; margin-top: -25px; width: 49%; } .strategy-box .item3 .num { right: -5%; top: -5%; } .strategy-box .item4 { left: 80%; bottom: 10%; width: 85.7142%; } .strategy-box .item4 .line1 { left: 0; top: 0; margin-top: -25px; width: 44.2786%; } .strategy-box .item4 .num { left: -5%; top: -5%; } .strategy-box .item4 .name { margin-left: 50%; } .strategy-box .item4 .c { padding-left: 56%; } .tpage-title { font-size: 26px; color: #333333; margin-bottom: 45px; } .strategy-list { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; } .strategy-list li { position: relative; width: 50%; } .strategy-list li:hover .img::after { background-color: rgba(0, 68, 133, 0.67); } .strategy-list li:hover .c { height: auto; opacity: 1; transform: translateY(0); } .strategy-list .img { position: relative; overflow: hidden; } .strategy-list .img img { height: 100%; object-fit: cover; } .strategy-list .img::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.49); transition: 0.3s; -webkit-transition: 0.3s; } .strategy-list .desc { position: absolute; left: 5%; bottom: 10%; color: #fff; right: 5%; } .strategy-list .title { position: relative; padding-bottom: 15px; font-size: 20px; font-weight: 400; line-height: 1.5; } .strategy-list .title::before { content: ""; position: absolute; width: 20px; height: 5px; left: 0; bottom: 0; background-color: #fff; } .strategy-list .c { margin-top: 40px; height: 0; opacity: 0; transform: translateY(5%); transition: 0.5s; -webkit-transition: 0.5s; overflow: hidden; } .gg-imgbox { position: relative; overflow: hidden; margin-top: 36px; } .gg-imgbox .swiper-pag { position: absolute; left: 0; bottom: 6%; line-height: 1; text-align: center; z-index: 500; } .gg-imgbox .swiper-pagination-bullet { background-color: #FFFFFF; opacity: 0.5; width: 9px; height: 9px; margin: 0 6px !important; } .gg-imgbox .swiper-pagination-bullet-active { opacity: 1; }