@charset "utf-8"; .c333 { color: #333333; } .cblue { color: #004E7B; } .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: 99; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 5%; width: 100%; height: 84px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: 0.5s; } .header.scroll, .header.innerbg { background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); } .header.scroll .logo img.show, .header.innerbg .logo img.show { opacity: 0; visibility: hidden; } .header.scroll .logo img.hide, .header.innerbg .logo img.hide { opacity: 1; visibility: visible; } .header.scroll .navs > li.active > a, .header.innerbg .navs > li.active > a { color: #004E7B; } .header.scroll .navs > li:after, .header.innerbg .navs > li:after { background: #004E7B; } .header.scroll .navs > li > a, .header.innerbg .navs > li > a { color: #333333; } .header.scroll .search span, .header.innerbg .search span { background: rgba(221, 221, 221, 0.29); color: #999999; } .header.scroll .search-down, .header.innerbg .search-down { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); } .header.scroll .menubtn span, .header.innerbg .menubtn span { background: #004E7B; } .header.scroll .menubtn span:before, .header.innerbg .menubtn span:before, .header.scroll .menubtn span:after, .header.innerbg .menubtn span:after { background: #004E7B; } .header.scroll .menubtn.active span { background-color: transparent; } .logo { display: block; position: relative; width: 317px; height: auto; } .logo img { display: block; width: 100%; height: auto; transition: 0.4s; } .logo img.hide { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } .header-right { display: flex; align-items: center; } .navs { display: flex; } .navs > li { position: relative; z-index: 2; margin-left: 2px; } .navs > li:first-child > a { min-width: auto; } .navs > li.active > a { color: #fff; } .navs > li.active:before { height: 0; bottom: 0; top: auto; display: block; } .navs > li.active:after { width: 100%; right: auto; left: 0; background: #fff; } .navs > li:hover:before { height: 100%; bottom: auto; top: 0; } .navs > li:after { position: absolute; right: 0; bottom: 0; content: ""; width: 0; height: 4px; background: #fff; transition: 0.4s; } .navs > li > a { display: block; box-sizing: border-box; text-align: center; position: relative; z-index: 2; padding: 0 22px; height: 84px; line-height: 84px; color: #fff; font-size: 16px; font-weight: bold; } .navs > li:first-child { margin-left: 0; } .common-menu { position: absolute; left: 0; top: 100%; z-index: 5; } .menu-box { left: 0; width: 100%; position: fixed; top: 84px; } .menu-wrap { position: relative; display: flex; background-color: rgba(255, 255, 255, 0.95); } .menu-wnav { width: 25%; padding: 35px 5% 35px 20%; } .menu-wnav .item { display: none; } .menu-wnav p { display: block; margin-bottom: 25px; position: relative; } .menu-wnav p:hover a, .menu-wnav p.now a { color: #004E7B; font-weight: bold; } .menu-wnav p:hover i, .menu-wnav p.now i { opacity: 1; right: 0; } .menu-wnav p a { position: relative; font-size: 16px; display: block; color: #333333; line-height: 1.2; transition: 0.35s; padding-right: 30px; } .menu-wnav p i { display: inline-block; position: absolute; right: 15px; top: 7px; color: #004E7B; font-size: 14px; font-style: normal; line-height: 1; font-weight: normal; opacity: 0; transition: 0.35s; } .menu-wnav1 { background-color: #F8F8F8; } .menu-wnav2 { background-color: #FFFFFF; display: none; } .menu-wnav3 { background-color: #FFFFFF; display: none; flex: 1; padding: 35px 20% 35px 5%; } .menu-li { padding: 28px 0 30px 35px; width: 234px; border-right: 1px solid rgba(112, 112, 112, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); background: #fff; } .menu-li p { position: relative; padding: 7px 0; padding-right: 30px; } .menu-li p:hover a, .menu-li p.now a { color: #004E7B; } .menu-li p:hover i, .menu-li p.now i { opacity: 1; right: 20px; } .menu-li p:last-child { margin-bottom: 0; } .menu-li p > a { display: inline-block; color: #333333; font-size: 16px; line-height: 1.2; transition: 0.35s; } .menu-li p i { display: inline-block; position: absolute; right: 25px; top: 15px; color: #004E7B; font-size: 14px; font-style: normal; line-height: 1; font-weight: normal; opacity: 0; transition: 0.35s; } .common-menu { display: none; } .menu-tab { position: absolute; left: 100%; top: 0; width: 380px; min-height: 100%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); display: none; } .menu-item { padding-left: 35px; box-sizing: border-box; display: none; } .menu-fix { display: flex; flex-wrap: wrap; position: relative; padding: 38px 0; box-sizing: border-box; } .menu-fix li { position: relative; width: 100%; margin-bottom: 12px; } .menu-fix li a { display: inline-block; color: #999999; font-size: 15px; } .menu-fix li a:hover { color: #004E7B; } .navs > li.sv:after { display: none; } .menu-leval { padding: 18px 0; left: 50%; margin-left: -62.5px; width: 125px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .menu-leval li { margin-bottom: 4px; text-align: center; } .menu-leval li:last-child { margin-bottom: 0; } .menu-leval li a { display: inline-block; color: #333333; font-size: 15px; } .menu-leval li a:hover { color: #004E7B; } .menubarM a:link, .menubarM a:visited { color: #333; } .menubarM a:active, .menubarM a:hover { color: #333; } .menubarM { background-color: #fff; color: #333; position: fixed; display: none; right: 0px; top: 84px; bottom: 0; width: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); z-index: 995; -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .menubarM-box { height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .menubarM-list { padding: 30px 5% 30px; } .menubarM-list > li { border-bottom: 1px solid #dcdcdc; } .menubarM-list > li a { display: block; } .menubarM-list > li > a { position: relative; font-size: 15px; padding: 10px 15px; font-weight: bold; } .menubarM-list > li > a::before { content: ""; position: absolute; width: 3px; height: 3px; top: 0; bottom: 0; margin: auto 0; left: 0; background-color: #004E7B; border-radius: 50%; } .menubarM-list > li > a i { position: absolute; right: 3%; top: 50%; font-size: 18px; line-height: 1; margin-top: -9px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .menubarM-list .cur > a i { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .menubarM-list .subnav > dd { background-color: #f4f4f4; margin-bottom: 10px; } .menubarM-list .subnav > dd > a { position: relative; line-height: 1.4; padding: 6px 0 6px 15px; font-weight: 500; font-size: 14px; background-color: #f4f4f4; color: #004E7B; } .menubarM-list .subnav > dd > dl { padding: 6px 0 6px 15px; } .menubarM-list .subnav > dd > dl > dd > a { font-size: 13px; position: relative; padding: 0 0 0 15px; line-height: 1.4; margin-bottom: 10px; } .menubarM-list .subnav > dd > dl > dd > a::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 1px; background-color: #004E7B; } .menubarM-list .subnav > dd > dl > dd > dl { padding: 0 0 10px 15px; display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; } .menubarM-list .subnav > dd > dl > dd > dl > dd > a { padding: 2px 8px; background-color: #fbfbfb; margin: 0 5px 5px 0; border-radius: 5px; color: #004E7B; } .menuOpen .pusher-black { visibility: visible; opacity: 1; } .menuOpen .menubarM { -moz-transform: translateX(0); transform: translateX(0); } .header-search { display: flex; align-items: center; margin-left: 80px; } .search { position: relative; } .search:hover span { background: #004E7B; } .search:hover .search-down { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: visible; } .search span { display: block; width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); text-align: center; line-height: 45px; color: #fff; font-size: 20px; cursor: pointer; transition: 0.38s; } .search-down { position: absolute; left: 0; top: 100%; padding-top: 12px; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.4s; transform: translateY(30px); } .search-down:before { position: absolute; left: 18px; top: 4px; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #fff; } .search-down .text { box-sizing: border-box; padding-left: 13px; width: 200px; height: 38px; line-height: 38px; color: #004E7B; background: #fff; outline: none; border: none; color: #333; font-size: 14px; } .search-down .sub { display: block; padding-right: 12px; position: absolute; right: 0; bottom: 0; cursor: pointer; height: 38px; color: #333333; font-size: 18px; background: none; border: none; outline: none; transition: 0.4s; } .search-down .sub:hover { color: #004E7B; } .en { margin-left: 15px; } .en a { display: block; width: 45px; height: 45px; border-radius: 50%; text-align: center; line-height: 45px; background: #004E7B; color: #fff; font-size: 16px; font-weight: bold; } .banner { position: relative; z-index: 2; } .banner:hover .banner-btn { opacity: 1; visibility: visible; } .banner:hover .banner-btn.prev { transform: translateX(0px); } .banner:hover .banner-btn.next { transform: translateX(0px); } .banner-slide { position: relative; overflow: hidden; } .banner-slide.swiper-slide-active .btext strong, .banner-slide.swiper-slide-active .btext p { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.5s; } .banner-slide.swiper-slide-active .btext p { transition-delay: 0.7s; } .banner-slide a { display: block; } .banner-slide figure { display: block; overflow: hidden; } .banner-slide figure img { position: relative; display: block; } .btext { position: absolute; left: 50%; margin-left: -700px; top: 50%; transform: translateY(-50%); text-align: center; } .btext strong { display: block; margin-bottom: 62px; line-height: 1.3; color: #fff; font-size: 2.91vw; font-weight: normal; opacity: 0; visibility: hidden; transform: translateY(30px); transition: 0.65s; } .btext p { color: #FFFFFF; font-size: 28px; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(30px); transition: 0.65s; } .btext-en { position: relative; margin-bottom: -10px; line-height: 1; color: rgba(255, 255, 255, 0.1); font-size: 6.77vw; font-family: "DINCond"; font-weight: bold; text-transform: uppercase; opacity: 0; visibility: hidden; transform: translateY(30px); transition: 0.65s; } .btext-en small { display: block; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 24px; } .banner-btn { position: absolute; top: 50%; margin-top: -30px; z-index: 20; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; text-align: center; line-height: 60px; color: #fff; font-size: 17px; background: rgba(0, 0, 0, 0.15); transition: 0.4s; opacity: 0; visibility: hidden; } .banner-btn:hover:before { opacity: 1; visibility: visible; transform: rotate(0deg); } .banner-btn:before { position: absolute; left: 0; top: 0; content: ""; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: #004E7B; opacity: 0; visibility: hidden; transform: rotateY(-180deg); transition: 0.4s; } .banner-btn.prev { left: 3.125%; transform: translateX(-20px); } .banner-btn.next { right: 3.125%; transform: translateX(20px); } .pagetion { position: absolute; left: 0; bottom: 10% !important; z-index: 10; display: flex; justify-content: center; } .pagetion .swiper-pagination-bullet { display: block; margin-right: 16px; width: 8px; height: 8px; border-radius: 50%; background: #fff; cursor: pointer; transition: 0.38s; opacity: 1; } .pagetion .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #004E7B; } .pagetion .swiper-pagination-bullet:last-child { margin-right: 0; } .home-introduct { padding: 100px 0 62px; background-position: left top; background-size: 100% auto; } .introduct-top { display: flex; } .introduct-imgs { position: relative; z-index: 2; width: 53.57%; display: flex; justify-content: space-between; align-items: flex-start; } .introduct-imgs:before { position: absolute; right: -65px; bottom: -34px; z-index: -1; content: ""; width: 260px; height: 179px; background: #0A8FDC; opacity: 0.11; } .introduct-imgs .introduct-max { display: block; width: 100%; height: auto; } .introduct-imgs .introduct-min { display: block; position: absolute; right: -46px; bottom: -157px; width: 260px; height: auto; } .introduct-fix { margin-left: 12.7%; width: 41.28%; } .introduct-info b { display: block; margin-bottom: 14px; line-height: 1; color: #666666; font-size: 20px; font-weight: normal; } .introduct-info strong { display: block; margin-bottom: 36px; color: #004E7B; font-size: 44px; line-height: 1.2; font-weight: normal; } .introduct-info p { color: #666666; font-size: 16px; } .check-more { margin-top: 60px; } .check-more a, .check-more span { display: inline-block; position: relative; padding-left: 44px; color: #004E7B; font-size: 16px; transition: 0.35s; } .check-more a:hover, .check-more span:hover { padding-left: 34px; letter-spacing: 3px; } .check-more a:hover:before, .check-more span:hover:before { width: 25px; } .check-more a:before, .check-more span:before { position: absolute; left: 0; top: 50%; margin-top: -1px; content: ""; width: 30px; height: 2px; background: #004E7B; transition: 0.2s; } .introduct-data { display: flex; justify-content: space-between; margin-top: 140px; } .introduct-data-item { position: relative; flex: 1; } .introduct-data-item:last-child { flex: none; } .introduct-data-item:last-child:before { display: none; } .introduct-data-item:before { position: absolute; right: 37.62%; top: 50%; margin-top: -48px; content: ""; width: 1px; height: 96px; background: #707070; opacity: 0.2; } .introduct-data-item p { position: relative; display: flex; align-items: flex-end; padding: 20px 0; color: #666666; font-size: 16px; line-height: 1; } .introduct-data-item p b, .introduct-data-item p i { display: inline-block; color: #000000; font-size: 70px; font-family: "DINCond"; font-style: normal; font-weight: normal; } .introduct-data-item p em { position: relative; margin-left: 10px; top: -8px; font-style: normal; } .introduct-data-item p:before, .introduct-data-item p:after { position: absolute; left: 8px; content: ""; width: 23px; height: 5px; background: #004E7B; } .introduct-data-item p:before { top: 0; } .introduct-data-item p:after { bottom: 0; } .introduct-data-item span { display: block; margin-top: 22px; line-height: 1; color: #666666; font-size: 16px; } .service-imgs { position: relative; padding-bottom: 23.43%; background-attachment: fixed; background-position: center; background-size: cover; } .solute-box { background-position: center; background-size: cover; } .solute-wrap { padding: 150px 0; } .common-top strong { display: block; text-align: center; position: relative; margin-bottom: 50px; padding-bottom: 26px; line-height: 1; color: #333333; font-size: 50px; font-weight: normal; } .common-top strong:before { position: absolute; left: 50%; margin-left: -11px; bottom: 0; content: ""; width: 23px; height: 5px; background: #004E7B; } .common-top p { margin: auto; width: auto; color: #666666; font-size: 16px; } .common-top img { max-width: 100%; width: auto; height: auto; } .solute-swiper { padding: 40px 6px 6px; margin-left: -6px; margin-right: -6px; margin-top: 48px; } .solute-slide { position: relative; z-index: 2; padding: 60px 0; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); text-align: center; transition: 0.4s; } .solute-slide:hover { transform: translateY(-40px); } .solute-slide:hover figure { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); } .solute-slide:hover b { background: #fff; color: #004E7B; } .solute-slide:hover p { color: #fff; } .solute-slide:hover p:before { transform: scaleX(0); opacity: 0; } .solute-slide:hover i { opacity: 1; visibility: visible; } .solute-slide figure { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; transition: 0.5s; } .solute-slide figure:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: rgba(0, 78, 123, 0.8); z-index: 2; } .solute-slide figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .solute-slide b { display: block; margin: auto; width: 128px; height: 128px; text-align: center; line-height: 128px; border-radius: 50%; color: #fff; background: #004E7B; font-weight: normal; font-size: 58px; transition: 0.4s; } .solute-slide p { margin-top: 40px; position: relative; height: 84px; padding-bottom: 0 !important; color: #666666; font-size: 25px; line-height: 1.3; transition: 0.4s; } .solute-slide p:before { position: absolute; left: 50%; margin-left: -12px; bottom: 0; content: ""; width: 24px; height: 5px; background: #004E7B; transition: 0.4s; } .solute-slide i { display: block; position: absolute; left: 0; bottom: 60px; line-height: 1; width: 100%; text-align: center; color: #FFFFFF; font-size: 28px; opacity: 0; visibility: hidden; transition: 0.4s; } .solute-pagete { margin-top: 48px; display: flex; justify-content: center; } .solute-pagete .swiper-pagination-bullet { margin-right: 15px; display: block; opacity: 1; width: 71px; height: 6px; background: #DDDDDD; border-radius: 3px; cursor: pointer; transition: 0.35s; } .solute-pagete .swiper-pagination-bullet:last-child { margin-right: 0; } .solute-pagete .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 48px; background: #004E7B; } .news-dynamic { position: relative; padding: 80px 0 120px; } .news-dynamic:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: #F6F6F6; } .dynamic-swiper { position: relative; margin-top: 80px; } .dynamic-tab { padding-top: 23px; padding-bottom: 23px; } .dynamic-slide { position: relative; width: 25%; } .dynamic-slide a { display: block; position: relative; z-index: 2; padding: 45px 20px 0; box-sizing: border-box; height: 386px; border: 1px solid #E9E9E9; background: #FFFFFF; transition: 0.4s; } .dynamic-slide a:hover { padding-top: 115px; transform: translateY(-23px); } .dynamic-slide a:hover figure { opacity: 1; visibility: visible; filter: brightness(1); } .dynamic-slide a:hover b, .dynamic-slide a:hover strong { color: #fff; } .dynamic-slide a:hover p { opacity: 0; height: 0px; overflow: hidden; } .dynamic-slide a:hover span { opacity: 1; visibility: visible; } .dynamic-slide a:hover time { color: #fff; } .dynamic-slide a:hover time i { color: #fff; } .dynamic-slide a figure { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; transition: 0.5s; filter: brightness(2); } .dynamic-slide a figure:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 2; } .dynamic-slide a figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .dynamic-slide a b { display: block; margin-bottom: 24px; line-height: 1; color: #004E7B; font-size: 14px; transition: 0.35s; } .dynamic-slide a strong { display: block; margin-bottom: 25px; line-height: 1.4; color: #333333; font-size: 18px; transition: 0.35s; } .dynamic-slide a p { height: 75px; overflow: hidden; color: #999999; font-size: 14px; transition: 0.4s; } .dynamic-slide a span { display: inline-block; position: relative; margin-top: 10px; padding-left: 45px; color: #fff; font-size: 14px; transition: 0.4s; opacity: 0; visibility: hidden; } .dynamic-slide a span:before { display: none; position: absolute; left: 0; top: 50%; margin-top: -1px; content: ""; width: 30px; height: 2px; background: #fff; } .dynamic-slide a time { display: block; position: absolute; left: 20px; bottom: 24px; padding-left: 33px; color: #999999; font-size: 14px; transition: 0.38s; } .dynamic-slide a time i { display: inline-block; position: absolute; left: 0; top: 50%; margin-top: -10px; line-height: 1; color: #999; font-size: 20px; transition: 0.38s; } .dynamic-btn { position: absolute; top: 50%; margin-top: -30px; z-index: 10; width: 60px; height: 60px; text-align: center; line-height: 60px; cursor: pointer; border-radius: 50%; background: rgba(0, 0, 0, 0.15); color: #fff; font-size: 17px; transition: 0.5s; } .dynamic-btn:hover { background: #004E7B; } .dynamic-btn.prev { left: -110px; } .dynamic-btn.next { right: -110px; } .footer { background: #004E7B; position: relative; z-index: 4; color: #7da5bc; font-size: 14px; } .footer-address { padding: 49px 0 36px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .address-item { position: relative; padding: 28px 0; width: 29%; } .address-item:before { position: absolute; top: 0; right: -11%; bottom: 0; content: ""; width: 1px; background: #fff; opacity: 0.3; } .address-item:last-child:before { display: none; } .address-item .iconfont { display: block; line-height: 1; font-size: 60px; font-weight: normal; } .address-item .title { display: block; margin-top: 24px; margin-bottom: 20px; line-height: 1.2; color: #fff; font-size: 18px; font-weight: normal; } .address-item .re { display: flex; } .footer-bottom { padding: 46px 0 56px; display: flex; justify-content: space-between; align-items: flex-end; } .tel-item { display: flex; margin-bottom: 12px; } .tel-item i { display: inline-block; position: relative; top: 2px; vertical-align: middle; width: 27px; font-size: 18px; line-height: 1; font-style: normal; } .links { position: relative; margin-top: 8px; } .links span { display: block; position: relative; padding-left: 10px; width: 221px; height: 36px; line-height: 36px; color: #FFFFFF; font-size: 14px; opacity: 0.6; background: rgba(255, 255, 255, 0.22); cursor: pointer; } .links span:before { position: absolute; right: 22px; top: 50%; margin-top: -5px; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255, 255, 255, 0.6); transition: 0.28s; } .links:hover span:before { transform: rotate(180deg); } .links:hover .link-list { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: visible; } .link-list { position: absolute; left: 0; bottom: 100%; width: 100%; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-30px); transition: 0.4s; pointer-events: none; } .link-list li { border-bottom: 1px solid #E9E9E9; } .link-list li > a { display: inline-block; margin-left: 10px; height: 38px; line-height: 38px; font-size: 14px; color: #666; } .link-list li > a:hover { color: #004E7B; } .footer-share { display: flex; } .footer-share a { display: inline-block; margin-right: 20px; width: 45px; height: 45px; text-align: center; line-height: 45px; border-radius: 50%; color: rgba(255, 255, 255, 0.6); font-size: 20px; background: rgba(255, 255, 255, 0.12); } .footer-share a:last-child { margin-right: 0; } .footer-share a:hover { background: rgba(255, 255, 255, 0.6); color: #fff; opacity: 1; } .footer-copy { line-height: 2; } .footer-copy p { text-align: right; } .footer-copy p a { display: inline-block; margin-left: 5px; } .footer-copy p a:hover { color: #fff; } .article-block.slideinset li, .article-block.slideinset > div { opacity: 0; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); -webkit-transition: 0.9s; -o-transition: 0.9s; -moz-transition: 0.9s; transition: 0.9s; } .article-block.slideinset li:nth-child(2), .article-block.slideinset > div:nth-child(2) { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .article-block.slideinset li:nth-child(3), .article-block.slideinset > div:nth-child(3) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .article-block.slideinset li:nth-child(4), .article-block.slideinset > div:nth-child(4) { -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } .articleShow.slideinset li, .articleShow.slideinset > div { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .article-block.slidetopList li, .article-block.slidetopList > div { opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: 0.7s; -o-transition: 0.7s; -moz-transition: 0.7s; transition: 0.7s; } .article-block.slidetopList li:nth-child(2), .article-block.slidetopList > div:nth-child(2) { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .article-block.slidetopList li:nth-child(3), .article-block.slidetopList > div:nth-child(3) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .article-block.slidetopList li:nth-child(4), .article-block.slidetopList > div:nth-child(4) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .article-block.slidetopList li:nth-child(5), .article-block.slidetopList > div:nth-child(5) { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .article-block.slidetopList li:nth-child(6), .article-block.slidetopList > div:nth-child(6) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .articleShow.slidetopList li, .articleShow.slidetopList > div { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .article-block.slideTop { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); -webkit-transition: 0.65s cubic-bezier(0.55, 0.05, 0.22, 0.99); -o-transition: 0.65s cubic-bezier(0.55, 0.05, 0.22, 0.99); -moz-transition: 0.65s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: 0.65s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .article-block.slideTop.detay1 { -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } .article-block.slideTop.detay2 { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .articleShow.slideTop { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .pbanner { position: relative; overflow: hidden; z-index: 5; } .pbanner figure { position: relative; display: block; padding-bottom: 41.66%; height: 0; overflow: hidden; line-height: 1; } .pbanner figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .pbanner1 figure { position: relative; display: block; padding-bottom: 26.04%; height: 0; overflow: hidden; line-height: 1; } .pbanner1 figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .pbanner1 strong { margin-bottom: 0; } .lazy { background: url(../images/loading.gif) center no-repeat; } .ptext { position: absolute; left: 50%; margin-left: -45%; top: 50%; transform: translateY(-50%); width: 90%; z-index: 10; text-align: center; } .ptext strong { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; line-height: 1; color: #fff; font-size: 50px; font-weight: normal; } .pen { position: relative; color: rgba(255, 255, 255, 0.1); line-height: 0.9; text-transform: uppercase; font-family: "DINCond"; text-align: center; font-size: 5.2083vw; } .pen small { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; line-height: 1; color: #FFFFFF; font-size: 24px; display: none; } .parrow { position: absolute; left: 50%; margin-left: -50px; bottom: 80px; z-index: 10; width: 98px; height: 98px; border-radius: 50%; text-align: center; line-height: 98px; border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.5); font-style: normal; } .parrow i { display: block; position: relative; font-size: 26px; animation: moveDownSpot 1000ms infinite; } @keyframes moveDownSpot { from { opacity: 1; top: 0px; } to { opacity: 0; top: 8px; } } .technologys { padding: 50px 0 150px; } .technology-list li { position: relative; z-index: 2; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .technology-list li:before { content: ""; width: 100%; height: 0; background: #F3F3F3; position: absolute; left: 0; bottom: 0; transition: 0.6s; z-index: -1; } .technology-list li:hover:before, .technology-list li.active:before { height: 100%; bottom: auto; top: 0; } .technology-list li a { display: block; position: relative; z-index: 2; padding: 50px 0; } .technology-list li a:hover .technology-wrap figure img { transform: scale(1.06); } .technology-list li a:hover .technology-info span { color: #004E7B; } .technology-list li a:hover .technology-info span i { color: #004E7B; } .technology-list li a:hover .technology-info strong { color: #004E7B; } .technology-list li a:hover .technology-more { background: #004E7B; } .technology-list li a:hover .technology-more span, .technology-list li a:hover .technology-more i { color: #fff; } .technology-wrap { display: flex; justify-content: space-between; align-items: flex-start; } .technology-wrap figure { display: block; width: 420px; overflow: hidden; } .technology-wrap figure img { display: block; width: 100%; height: auto; transition: 0.68s; } .technology-text { position: relative; box-sizing: border-box; width: 65%; } .technology-info { margin-bottom: 35px; } .technology-info span { display: none; line-height: 1.2; color: #999999; transition: 0.4s; } .technology-info span i { display: inline-block; margin-right: 8px; color: #999999; font-size: 18px; font-style: normal; transition: 0.4s; } .technology-info strong { display: block; margin-bottom: 22px; line-height: 1.2; color: #333333; font-size: 24px; font-weight: bold; transition: 0.4s; } .technology-info p { color: #666666; font-size: 16px; text-align: justify; } .technology-more { position: absolute; right: 0; top: 80px; padding: 18px 0 15px; width: 80px; text-align: center; background: #F7F7F7; transition: 0.4s; } .technology-more span { display: block; line-height: 1.1; color: #999999; font-size: 14px; transition: 0.4s; } .technology-more i { display: block; margin-top: 11px; font-style: normal; color: #999999; font-size: 18px; line-height: 1; transition: 0.4s; } .technology-more2 { display: block; width: 138px; height: 41px; line-height: 41px; border: 1px solid #DDDDDD; text-align: center; color: #999999; font-size: 14px; transition: 0.36s; } .technology-more2:hover { border-color: #004E7B; background: #004E7B; color: #fff; } .technology-more2:hover i { color: #fff; } .technology-more2 i { display: inline-block; margin-left: 12px; color: #004E7B; font-size: 12px; font-style: normal; font-weight: bold; transition: 0.36s; } .technology-more3 .iconfont { margin-left: 12px; font-size: 14px; } .technology-more3:hover { color: #004E7B; } .technology-more3:hover i { color: #004E7B; } .technology-more4 { color: #fff; } .technology-more4 .iconfont { margin-left: 12px; font-size: 14px; } .container { position: relative; z-index: 0; overflow: hidden; } #particles-js { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .posites { position: absolute; left: 50%; margin-left: -700px; bottom: 50px; z-index: 5; } .posites a, .posites b { display: inline-block; color: #fff; font-size: 16px; font-weight: normal; line-height: 1.4; } .posites b { margin: 0 10px; } .solution { padding: 100px 0; margin: auto; width: 1190px; max-width: 90%; } .solute-list { display: flex; flex-wrap: wrap; margin-top: 75px; } .solute-list li { margin-right: 5%; margin-bottom: 32px; width: 30%; position: relative; } .solute-list li:nth-child(3n+3) { margin-right: 0; } .solute-list li a { display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; height: 80px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; } .solute-list li a:before { content: ""; width: 100%; height: 0; background: #004E7B; position: absolute; left: 0; bottom: 0; transition: 0.4s; z-index: -1; } .solute-list li a:hover:before, .solute-list li a.active:before { height: 100%; bottom: auto; top: 0; } .solute-list li a:hover { border-color: #004E7B; } .solute-list li a:hover p, .solute-list li a:hover i { color: #fff; } .solute-list li a p { color: #333333; font-size: 18px; transition: 0.38s; } .solute-list li a i { display: inline-block; margin-left: 30px; color: #004E7B; font-size: 20px; line-height: 1; font-style: normal; transition: 0.38s; } .leval-menu { position: absolute; left: 8.335%; width: 83.33%; bottom: 0; z-index: 5; border-top: 1px solid rgba(255, 255, 255, 0.34); } .leval-menu-li { display: flex; justify-content: center; } .leval-menu-li li { margin-right: 160px; position: relative; } .leval-menu-li li:hover:before, .leval-menu-li li.active:before { transform: scaleX(1); opacity: 1; visibility: visible; } .leval-menu-li li:before { position: absolute; left: 0; top: -1px; content: ""; width: 100%; height: 5px; background: #fff; transform: scaleX(0); opacity: 0; visibility: hidden; transition: 0.5s; } .leval-menu-li li:last-child { margin-right: 0; } .leval-menu-li li a { display: block; text-align: center; height: 80px; line-height: 80px; color: #fff; font-size: 18px; } .news-box { padding: 110px 0 89px; } .news-top { position: relative; } .news-top .pagetion { bottom: 46px !important; padding-right: 48px; width: 50%; box-sizing: border-box; display: flex; justify-content: flex-end; } .news-top .pagetion .swiper-pagination-bullet { margin-left: 7px; width: 8px; height: 8px; background: #fff; opacity: 0.57; } .news-top .pagetion .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .news-slide { position: relative; overflow: hidden; } .news-slide .item { display: flex; } .news-slide .item:hover figure img { transform: scale(1.06); } .news-slide .item:hover .news-texts strong { color: #004E7B; } .news-slide .item figure { display: block; line-height: 1; width: 50%; overflow: hidden; } .news-slide .item figure img { display: block; width: 100%; height: auto; transition: 0.76s; } .news-info { display: flex; align-items: center; justify-content: center; width: 50%; border: 1px solid #DDDDDD; border-left: none; background: #fff; } .news-info .technology-more2 { margin-top: 60px; } .mt60 { margin-top: 60px; } .mt40 { margin-top: 40px; } .news-wrap { width: 81.71%; } .news-time { margin-bottom: 22px; display: flex; } .news-time .ispan { display: inline-block; margin-right: 22px; color: #999999; font-size: 14px; font-family: "DINCond"; line-height: 1.2; } .news-time .ispan i { display: inline-block; position: relative; top: 1px; margin-right: 14px; color: #004E7B; font-style: normal; font-size: 17px; font-weight: bold; } .news-texts strong { display: block; margin-bottom: 28px; line-height: 1.2; color: #333333; font-size: 18px; transition: 0.38s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-texts p { color: #999999; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: justify; } .news-dit { position: absolute; right: 5%; bottom: 10%; z-index: 10; display: flex; } .news-dit span { display: block; margin-left: 28px; width: 42px; height: 42px; text-align: center; line-height: 42px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.15); cursor: pointer; transition: 0.4s; } .news-dit span:first-child { margin-left: 0; } .news-dit span:hover { background: #004E7B; } .news-li { margin-top: 94px; padding-bottom: 19px; display: flex; flex-wrap: wrap; } .news-li li { position: relative; z-index: 2; box-sizing: border-box; margin-right: 2.87%; margin-bottom: 70px; width: 31.42%; border: 1px solid #DDDDDD; background: #fff; } .news-li li:before { content: ""; width: 0; height: 10px; background: #004E7B; position: absolute; right: 0; bottom: 0; transition: 0.5s; z-index: -1; } .news-li li:hover, .news-li li.active { color: #004E7B; } .news-li li:hover:before, .news-li li.active:before { width: 100%; right: auto; left: 0; } .news-li li:before { bottom: -1px; } .news-li li:hover { border-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16); } .news-li li:hover figure img { transform: scale(1.08); } .news-li li:nth-child(3n+3) { margin-right: 0; } .news-li li a { display: block; padding: 29px 33px 80px; transition: 0.5s; } .news-li li a figure { overflow: hidden; } .news-li li a figure img { transition: 0.6s; width: 100%; display: block; } .news-down { padding-top: 16px; } .news-texts1 { height: 122px; } .news-texts1 strong { margin-bottom: 26px; } .news-texts1 p { line-height: 1.5; } .pages { display: flex; justify-content: center; } .pages a { display: block; margin-right: 18px; width: 42px; height: 42px; border-radius: 50%; color: #999999; font-size: 16px; text-align: center; line-height: 42px; } .pages a:hover, .pages a.active { background: #004E7B; color: #fff; } .pages a:last-child { margin-right: 0; } .pages a:first-child, .pages a:last-child { background: rgba(0, 0, 0, 0.15); color: #fff; } .pages a:first-child:hover, .pages a:last-child:hover { background: #004E7B; } .essay { padding: 126px 0 90px; } .news-common { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 32px; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .news-ftitle { display: flex; align-items: center; line-height: 1; } .news-ftitle i { display: inline-block; color: #6FDDE8; font-size: 46px; font-style: normal; line-height: 1; background-image: linear-gradient(to bottom, #6FDDE8, #131DEE); background-clip: text; -webkit-background-clip: text; color: transparent; } .news-ftitle span { display: inline-block; margin-left: 20px; color: #004E7B; font-size: 30px; font-weight: bold; } .news-navs { display: flex; } .news-navs li { margin-left: 66px; } .news-navs li a { display: inline-block; color: #666666; font-size: 20px; line-height: 1.3; } .news-navs li a:hover { color: #004E7B; } .news-navs li.active a { color: #004E7B; } .essay-fix { margin-top: 74px; } .essay-list { display: flex; flex-wrap: wrap; } .essay-list li { position: relative; z-index: 2; margin-right: 2%; margin-bottom: 32px; box-sizing: border-box; width: 32%; } .essay-list li:nth-child(3n+3) { margin-right: 0; } .essay-list li a { display: block; position: relative; z-index: 2; padding: 35px ; border: 1px solid #E9E9E9; background: #fff; } .essay-list li a:before { content: ""; width: 100%; height: 0; background: #F3F3F3; position: absolute; left: 0; bottom: 0; transition: 0.6s; z-index: -1; } .essay-list li a:hover:before, .essay-list li a.active:before { height: 100%; bottom: auto; top: 0; } .essay-list li a:hover strong { color: #004E7B; } .essay-list li a b { display: block; margin-bottom: 15px; line-height: 1.2; color: #004E7B; font-size: 18px; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .essay-list li a strong { display: block; margin-bottom: 25px; height: 63px; color: #333333; font-size: 14px; font-weight: normal; line-height: 1.5; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .essay-list li a span { display: inline-block; position: relative; padding-left: 44px; line-height: 1.1; color: #999999; font-size: 16px; transition: 0.4s; } .essay-list li a span:before { position: absolute; left: 0; top: 50%; margin-top: -1px; content: ""; width: 30px; height: 2px; background: #999999; transition: 0.4s; } .load-more { padding-top: 48px; text-align: center; } .load-more a { display: inline-block; position: relative; padding-left: 35px; color: #999999; font-size: 22px; } .load-more a:hover { color: #004E7B; } .load-more a:hover:before { background: url(../images/arrow2.png) center no-repeat; } .load-more a:before { position: absolute; left: 0; top: 50%; margin-top: -9px; content: ""; width: 16px; height: 17px; background: url(../images/arrow1.png) center no-repeat; transition: 0.4s; } .literature { padding: 70px 0 78px; background: #F8FCFF; } .literature-fix { margin-top: 104px; } .literature-top { display: flex; justify-content: space-between; flex-wrap: wrap; } .literature-item { margin-bottom: 60px; width: 49.28%; } .literature-item a { display: flex; justify-content: space-between; align-items: flex-start; position: relative; padding: 23px 50px 30px 35px; background: #fff; } .literature-item a:hover figure img { transform: scale(1.1); } .literature-item a:hover .literature-text span { color: #004E7B; } .literature-item a:hover .literature-text span:before { background: #004E7B; } .literature-item a figure { display: block; position: relative; margin-top: -66px; width: 33.88%; line-height: 1; } .literature-item a figure img { display: block; width: 100%; height: auto; transition: 0.78s; } .literature-text { width: 59.5%; } .literature-text b { display: block; margin-bottom: 18px; line-height: 1; color: #0A8FDC; font-size: 16px; } .literature-text strong { display: block; margin-bottom: 15px; line-height: 1.4; color: #333333; font-size: 18px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .literature-text p { color: #999999; font-size: 14px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .literature-text span { display: inline-block; margin-top: 34px; position: relative; padding-left: 42px; color: #999999; font-size: 16px; line-height: 1.1; transition: 0.38s; } .literature-text span:before { position: absolute; left: 0; top: 50%; margin-top: -1px; content: ""; width: 30px; height: 2px; background: #999999; transition: 0.38s; } .literature-list { display: flex; flex-wrap: wrap; } .literature-list li { margin-right: 1.44%; margin-bottom: 32px; width: 49.28%; } .literature-list li:nth-child(2n+2) { margin-right: 0; } .literature-list li a { display: block; padding: 35px 40px 42px; background: #fff; } .literature-list li a:hover { box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.16); } .literature-list li a b { display: block; margin-bottom: 18px; line-height: 1.1; color: #0A8FDC; font-size: 16px; } .literature-list li a strong { display: block; margin-bottom: 24px; line-height: 1.4; color: #333333; font-size: 18px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .literature-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; } .train { padding: 80px 0 88px; } .train-list { margin-top: 86px; display: flex; flex-wrap: wrap; } .train-list li { margin-right: 2%; margin-bottom: 50px; width: 32%; } .train-list li:nth-child(3n+3) { margin-right: 0; } .train-list li a:hover figure img { transform: scale(1.08); } .train-list li a:hover .train-text span { color: #004E7B; } .train-list li a:hover .train-text span:before { background: #004E7B; } .train-list li figure { position: relative; display: block; padding-bottom: 66.6666%; height: 0; overflow: hidden; line-height: 1; } .train-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .train-list li figure img { transition: 0.68s; } .train-text { position: relative; z-index: 2; margin: 0 30px; margin-top: -45px; padding: 35px; background: #fff; border: 1px solid #E9E9E9; } .train-text small { display: block; margin-bottom: 20px; line-height: 1.2; color: #004E7B; font-size: 18px; font-weight: bold; } .train-text strong { display: block; margin-bottom: 25px; line-height: 1.5; color: #333333; font-size: 14px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .train-text span { display: inline-block; position: relative; padding-left: 43px; line-height: 1.2; color: #999999; font-size: 16px; transition: 0.4s; } .train-text span:before { position: absolute; left: 0; top: 50%; margin-top: -1px; content: ""; width: 30px; height: 2px; background: #999999; transition: 0.4s; } .news-view { padding: 130px 0 120px; } .news-posite { display: flex; padding-bottom: 26px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); } .news-posite a, .news-posite b { display: inline-block; color: #666666; font-size: 16px; line-height: 1.3; } .news-posite b { margin: 0 10px; font-weight: normal; } .news-posite a:hover { color: #004E7B; } .v-view { margin-top: 100px; display: flex; justify-content: space-between; } .view-box { width: 72.42%; } .view-top { margin-bottom: 70px; } .view-top strong { display: block; position: relative; line-height: 1.2; color: #1F1A17; font-size: 30px; font-weight: normal; } .views-time { display: flex; align-items: center; margin-top: 30px; } .views-time .news-time { margin-bottom: 0; } .share { display: flex; margin-left: 60px; } .share a { display: inline-block; margin-right: 14px; color: #999B9F; font-size: 20px; line-height: 1; } .share a:hover { color: #004E7B; } .view-texts { min-height: 32vw; box-sizing: border-box; padding-bottom: 40px; color: #666666; font-size: 16px; text-align: justify; line-height: 1.5; } .view-texts img { max-width: 100% !important; height: auto !important; } .view-texts ol, .view-texts ul { margin-left: 20px; } .view-texts table tr td { padding: 10px 4%; } .view-page { display: flex; justify-content: space-between; align-items: center; } .view-page a { display: inline-block; width: 171px; height: 46px; line-height: 46px; text-align: center; border: 1px solid #DDDDDD; color: #999999; font-size: 18px; } .view-page a:hover { background: #004E7B; border-color: #004E7B; color: #fff; } .interest { width: 22.85%; } .interest-title { display: block; padding-bottom: 26px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); color: #333333; font-size: 20px; line-height: 1; } .news-vlist { display: block; margin-top: 32px !important; } .news-vlist li { margin-bottom: 36px; width: 100%; box-shadow: none; border: none; } .news-vlist li:hover { border: none; box-shadow: none; } .news-vlist li a { padding: 0 !important; padding-bottom: 36px !important; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .news-vlist li a figure { position: relative; display: block; padding-bottom: 56.25%; height: 0; overflow: hidden; line-height: 1; } .news-vlist li a figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-vlist li a .news-texts1 { height: auto; } .news-vlist li a .news-texts1 strong { margin-bottom: 15px; } .news-vlist li a .news-time { margin-bottom: 0; } .leval-menu-li1 li { margin-right: auto; } .leval-menu-li1 li a { width: auto; } .about-introduct { padding-top: 102px; } .introduct-title { position: relative; padding-left: 136px; padding-right: 0; box-sizing: border-box; width: 59.28%; color: #333333; font-size: 40px; line-height: 1.2; } .introduct-title:before { position: absolute; left: 0; top: 20px; content: ""; width: 92px; height: 5px; background: #004E7B; } .introduct-wrap { display: flex; justify-content: space-between; position: relative; } .introduct-wrap:before { position: absolute; right: 95px; top: -52px; content: ""; width: 314px; height: 371px; background: url(../img/about.png) center no-repeat; z-index: 3; pointer-events: none; } .introduct-wrap .introduct-img { display: block; line-height: 1; overflow: hidden; width: 53.57%; } .introduct-wrap .introduct-img img { display: block; width: 100%; height: auto; } .company-introduct { box-sizing: border-box; padding-top: 25px; width: 42.85%; background: #fff; z-index: 2; } .company-introduct strong { display: block; margin-bottom: 30px; line-height: 1.1; color: #333333; font-size: 24px; } .company-introduct .c { color: #666666; font-size: 16px; text-align: justify; } .company-introduct .technology-more2 i { font-size: 22px; font-weight: normal; position: relative; top: 2px; } .division { padding: 130px 0 68px; } .division a { display: flex; justify-content: space-between; align-items: center; } .division a figure { display: block; overflow: hidden; line-height: 1; width: 46.42%; margin-right: 5%; } .division a figure img { display: block; width: 100%; height: auto; } .division-info { width: 48.42%; } .division-info .t { display: block; margin-bottom: 25px; line-height: 1.2; color: #333333; font-size: 24px; } .division-info .c { color: #666666; font-size: 16px; text-align: justify; } .division-info .more { display: inline-block; margin-top: 40px; width: 138px; height: 41px; line-height: 41px; border: 1px solid #DDDDDD; text-align: center; color: #999999; font-size: 14px; transition: 0.36s; } .division-info .more:hover { border-color: #004E7B; background: #004E7B; color: #fff; } .division-info .more:hover i { color: #fff; } .division-info .more i { display: inline-block; margin-left: 12px; color: #004E7B; font-size: 12px; font-style: normal; font-weight: bold; transition: 0.36s; } .cdmo { position: relative; z-index: 3; overflow: hidden; padding: 145px 0 120px; } .cdmo-bg { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 140%; background-position: center; background-size: cover; background-repeat: no-repeat; } .cdmo-text { margin: auto; width: 678px; text-align: center; } .cdmo-text .division-info { width: 100%; } .cdmo-text .division-info .t, .cdmo-text .division-info .c { color: #fff; } .cdmo-text .division-info .more { color: #fff; border-color: #fff; } .cdmo-text .division-info .more i { color: #fff; } .cdmo-text .division-info .more:hover { background: #fff; color: #004E7B; } .cdmo-text .division-info .more:hover i { color: #004E7B; } .cro { padding: 82px 0 68px; } .cro a { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .cro-imgs { width: 46.42%; } .cro-imgs img { width: 100%; height: auto; } .cro-two a { flex-direction: row; } .team-t { padding: 100px 0; } .team-btnfix { margin-bottom: 80px; display: flex; justify-content: center; } .team-btnfix a { display: inline-block; text-align: center; position: relative; margin-right: 1px; line-height: 1; padding: 0 2% 25px; color: #333333; width: 21%; font-size: 18px; } .team-btnfix a:last-child { margin-right: 0; } .team-btnfix a:hover:before, .team-btnfix a.active:before { transform: scaleX(1); visibility: visible; } .team-btnfix a:hover:after, .team-btnfix a.active:after { opacity: 1; visibility: visible; } .team-btnfix a:before { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 4px; background: #004E7B; transform: scaleX(0); visibility: hidden; transition: 0.4s; } .team-btnfix a:after { position: absolute; left: 50%; margin-left: -4px; bottom: -6px; content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #004E7B; opacity: 0; visibility: hidden; transition: 0.38s; } .team-t .team-in { padding-bottom: 100px; } .team-t .team-in a { display: flex; justify-content: space-between; } .team-lis { display: flex; flex-wrap: wrap; } .team-lis li { margin-right: 4%; margin-bottom: 70px; text-align: center; border-bottom: 1px solid rgba(112, 112, 112, 0.3); width: 22%; } .team-lis li:nth-child(4n+4) { margin-right: 0; } .team-lis li:hover figure img { transform: scale(1.06); } .team-lis li figure { display: block; margin: auto; width: 90%; line-height: 1; overflow: hidden; } .team-lis li figure img { display: block; width: 100%; height: auto; transition: 0.76s; } .team-down { padding: 20px 0; text-align: center; } .team-down strong { display: block; margin-bottom: 15px; line-height: 1.2; color: #333333; font-size: 20px; font-weight: bold; } .team-down p { color: #666666; font-size: 14px; } .team-view { padding: 90px 0 120px; display: flex; justify-content: space-between; width: 77.85%; align-items: center; margin: auto; } .team-imgs { width: 38.5%; } .team-imgs img { display: block; line-height: 1; width: 100%; height: auto; } .team-v-info { width: 48%; text-align: justify; } .team-v-info strong { display: block; padding-bottom: 30px; margin-bottom: 45px; border-bottom: 3px solid #004E7B; line-height: 1.2; color: #333333; font-size: 20px; } .team-v-in { color: #666666; font-size: 14px; } .team-v-in p { padding-left: 25px; position: relative; } .team-v-in p .iconfont { position: absolute; left: 0; top: 0; line-height: 1.5; } .honor-tops { background: #F5FBFF; } .honor-tops .innovate-fixs { padding: 120px 0; } .honor-list-box { padding: 93px 0 130px; } .honor-list { position: relative; margin: auto; width: 890px; } .honor-list:after { position: absolute; left: 50%; top: 26px; bottom: 25px; content: ""; width: 1px; background: linear-gradient(to bottom, #0A8FDC 0%, #004E7B 100%); } .honor-item { position: relative; margin-bottom: 103px; display: flex; justify-content: space-between; align-items: center; } .honor-item:last-child { margin-bottom: 0; } .honor-item:nth-child(2n+2) { flex-direction: row-reverse; } .honor-item:before { position: absolute; left: 50%; margin-left: -8px; top: 0; content: ""; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(to bottom, #0A8FDC 0%, #004E7B 100%); } .honor-item:hover .honor-year time { color: #004E7B; } .honor-item:hover .honor-img img { transform: scale(1.06); } .honor-year time { display: block; line-height: 1; color: #DDDDDD; font-size: 10.41vw; font-family: "DINCond"; font-weight: bold; transition: 0.6s; } .honor-texts { width: 39.32%; } .honor-infos p { color: #666666; font-size: 16px; } .honor-img { margin-top: 60px; } .honor-img img { width: auto; height: auto; max-width: 100%; transition: 0.65s; } .honor-mores { margin-top: 110px; text-align: center; } .honor-mores span { display: inline-block; position: relative; z-index: 2; color: #004E7B; font-size: 14px; font-weight: bold; cursor: pointer; } .honor-mores span:before { content: ""; width: 0; height: 1px; background: #004E7B; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .honor-mores span:hover, .honor-mores span.active { color: #004E7B; } .honor-mores span:hover:before, .honor-mores span.active:before { width: 100%; right: auto; left: 0; } .partner-top { padding: 60px 0 !important; align-items: center; } .partner-boxs { padding-bottom: 70px; } .partner-items { margin-top: -1px; padding: 60px 0; border-top: 1px solid rgba(102, 102, 102, 0.3); border-bottom: 1px solid rgba(102, 102, 102, 0.3); } .partner-items:last-child { border-bottom: none; } .partner-items .partner-tt { display: block; margin-bottom: 60px; padding-left: 75px; line-height: 1; color: #004E7B; font-size: 24px; font-weight: bold; } .partner-list { display: flex; flex-wrap: wrap; } .partner-list li { position: relative; float: left; text-align: center; height: 106px; margin-bottom: 40px; width: 25%; } .partner-list li:hover img { transform: translateY(-15px) scale(1.1); } .partner-list li figure { display: block; line-height: 1; text-align: center; height: 100%; } .partner-list li figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 90%; max-height: 100%; transition: 0.4s; } .contact-box { padding: 80px 0 150px; } .contact-items { padding: 45px 0; display: flex; justify-content: space-between; flex-direction: row-reverse; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .contact-map { margin-right: 40px; width: 41.42%; } .contact-map > div { height: 320px; } .contact-info { margin-left: 6.71%; padding-top: 12px; width: 35.7%; } .contact-info strong { display: block; line-height: 1.2; color: #333333; font-size: 22px; font-weight: bold; } .contact-li { margin-top: 35px; } .contact-li p { position: relative; padding-left: 28px; margin-bottom: 8px; color: #666666; font-size: 16px; line-height: 1.4; } .contact-li p:last-child { margin-bottom: 0; } .contact-li p i { display: inline-block; position: absolute; left: 0; top: 1px; color: #004E7B; font-size: 18px; font-style: normal; } .contact-title { margin: 35px 0 20px; } .contact-business { font-size: 16px; display: flex; flex-wrap: wrap; line-height: 1.4; } .contact-business a { margin-right: 20px; margin-bottom: 5px; } .contact-business a:hover { color: #004E7B; } .team-in a { display: flex; justify-content: space-between; align-items: center; } .solute-fixs { padding: 100px 0 80px; } .solute-li { display: flex; flex-wrap: wrap; } .solute-li li { margin-bottom: 66px; margin-right: 4%; width: 48%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .solute-li li:nth-child(2n+2) { margin-right: 0; } .solute-li li a { display: block; position: relative; padding: 52px 14.28% 85px 8.96%; background: #fff; } .solute-li li a:hover strong { color: #004E7B; } .solute-li li a:hover span { background: #004E7B; border-color: #004E7B; color: #fff; } .solute-li li a strong { display: block; margin-bottom: 30px; line-height: 1.2; color: #333333; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.3s; } .solute-li li a p { color: #666666; font-size: 16px; text-align: justify; } .solute-li li a span { display: block; position: absolute; right: 6.68%; bottom: 28px; width: 48px; height: 48px; text-align: center; line-height: 48px; border: 1px solid #707070; color: #666666; font-size: 18px; border-radius: 50%; transition: 0.36s; } .analysis { margin: auto; padding: 80px 0; width: 1100px; max-width: 90%; } .analysis-title { display: block; position: relative; padding-bottom: 24px; line-height: 1; color: #333333; font-size: 24px; font-weight: bold; text-align: center; } .analysis-title:before { position: absolute; left: 50%; margin-left: -13px; bottom: 0; content: ""; width: 27px; height: 4px; background: #004E7B; } .analysis-info { margin-top: 46px; color: #666666; font-size: 16px; } .analysis-info img { height: auto !important; max-width: 100% !important; } .programme { padding: 88px 0 98px; background-attachment: fixed; background-position: center; background-size: cover; } .analysis-title1 { color: #fff; } .analysis-title1:before { background: #fff; } .programme-swiper { margin-top: 80px; } .programme-slide { display: flex; justify-content: space-between; align-items: center; } .programme-imgs { position: relative; width: 54.5%; text-align: center; } .programme-imgs img { width: 100%; display: block; } .programme-texts { margin-top: -40px; width: 36%; margin-right: 1px; max-height: 100%; color: #fff; font-size: 16px; text-align: justify; } .programme-page { position: absolute; right: 0; bottom: 22px; z-index: 10; width: 36%; display: flex; justify-content: space-between; align-items: center; } .programme-page span { display: block; position: relative; flex: 1; } .programme-page span.active:before { left: 84px; } .programme-page span.active i { width: 40px; height: 40px; line-height: 40px; background: #fff; color: #004E7B; font-size: 20px; } .programme-page span.active i:after { opacity: 1; visibility: visible; transform: scale(1); } .programme-page span i { display: block; position: relative; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; text-align: center; color: #FFFFFF; font-size: 16px; font-family: "DINCond"; font-weight: bold; background: rgba(255, 255, 255, 0.4); font-style: normal; transition: 0.36s; cursor: pointer; } .programme-page span i:after { position: absolute; left: -10px; top: -10px; right: -10px; bottom: -10px; border-radius: 50%; content: ""; border: 1px dashed #fff; opacity: 0; visibility: hidden; transform: scale(0); transition: 0.4s; } .programme-page span:before { content: ""; position: absolute; left: 34px; right: 10px; top: 50%; z-index: -1; border-top: 1px dashed #fff; transition: 0.36s; } .programme-page span:last-child { flex: none; } .solute-grames { flex-direction: row-reverse; } .honor-tops2 { background: transparent; } .examples { padding: 128px 0 70px; } .examples-lpage { padding-bottom: 120px; } .w1100 { width: 1100px; max-width: 90%; margin: 0 auto; } .examples-list { max-width: 100%; } .examples-list li { border-bottom: 1px solid #DDDDDD; } .examples-list li a { display: flex; align-items: center; padding: 25px 0; } .examples-list li a:hover p { color: #004E7B; } .examples-list li a p { box-sizing: border-box; color: #333333; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.35s; } .examples-list li a i { display: inline-block; color: #004E7B; font-size: 20px; font-style: normal; margin-left: 20px; } .solute-wr .innovate-imgs { width: 51.42%; } .solute-wr .innovate-infos { width: 39.78%; } .core { padding-top: 110px; padding-bottom: 100px; } .core-title { display: block; line-height: 1.2; padding-left: 30px; color: #333333; font-size: 40px; font-weight: normal; } .core-list { margin-top: 55px; display: flex; justify-content: space-between; } .core-list li { position: relative; width: 23.57%; } .core-list li figure { position: relative; display: block; padding-bottom: 142.7%; height: 0; overflow: hidden; line-height: 1; } .core-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .core-list li figure img { transition: 0.56s; } .core-list li:hover figure img { transform: scale(1.08); } .core-list li:hover .core-text { margin-left: 0; margin-top: -80px; left: 18.18%; width: 63.64%; } .core-list li:hover .core-text p { opacity: 1; visibility: visible; transition-delay: 0.3s; } .core-text { position: absolute; left: 50%; margin-left: -32px; top: 50%; margin-top: -57px; transition: 0.48s; } .core-text b { display: block; line-height: 1; color: #fff; font-size: 50px; font-weight: normal; transition: 0.45s; width: 64px; text-align: center; } .core-text strong { display: block; margin-top: 20px; color: #fff; font-size: 32px; line-height: 1; font-weight: normal; transition: 0.45s; } .core-text p { position: absolute; left: 0; top: 100%; width: 198px; margin-top: 30px; color: #fff; font-size: 22px; line-height: 1.4; opacity: 0; visibility: hidden; transition: 0.5s; } .innovate { padding: 100px 0; } .innovate-list { display: flex; } .innovate-list:hover li { width: 20%; } .innovate-list li { position: relative; width: 25%; transition: 0.68s; } .innovate-list li:hover { width: 40% !important; } .innovate-list li:hover .innovate-text { bottom: 50%; height: 200px; margin-bottom: -102px; } .innovate-list li:hover .innovate-text b { font-size: 65px; } .innovate-list li:hover .innovate-text strong { font-size: 28px; } .innovate-list li:hover .innovate-text p { opacity: 1; visibility: visible; } .innovate-list li figure { display: block; line-height: 1; overflow: hidden; } .innovate-list li figure:before { position: absolute; left: 0; top: 0; z-index: 2; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .innovate-list li figure img { position: relative; left: 50%; transform: translateX(-50%); height: 450px; } .innovate-text { position: absolute; left: 0; bottom: 96px; margin-bottom: 0; height: 80px; width: 100%; transition: 0.45s; z-index: 4; text-align: center; } .innovate-text b { display: block; line-height: 1; color: #fff; font-size: 35px; font-weight: normal; transition: 0.36s; } .innovate-text strong { display: block; margin-top: 25px; line-height: 1; color: #fff; font-size: 20px; transition: 0.36s; } .innovate-text p { margin-top: 24px; color: #fff; font-size: 16px; line-height: 1.5; opacity: 0; visibility: hidden; transition: 0.58s; } .innovate-fixs { display: flex; justify-content: space-between; padding-bottom: 150px; } .innovate-imgs { width: 36.42%; line-height: 1; } .innovate-imgs img { display: block; width: 100%; height: auto; } .innovate-infos { padding-top: 12px; width: 56.42%; } .innovate-infos strong { display: block; position: relative; margin-bottom: 36px; line-height: 1; font-size: 24px; color: #333333; font-weight: bold; } .innovate-infos strong:before { position: absolute; left: 0; bottom: 0; content: ""; width: 27px; height: 4px; background: #004E7B; display: none; } .innovate-infos p { color: #666666; font-size: 16px; text-align: justify; } .team { position: relative; display: flex; flex-direction: row-reverse; } .team-info { padding-bottom: 688px; position: relative; width: 37.5%; background-position: center; background-size: cover; } .team-introduct { position: absolute; right: 0; bottom: 0; z-index: 10; background: #004E7B; box-sizing: border-box; width: 480px; padding: 80px 49px 0; height: 415px; } .team-intro-item { display: none; } .team-intro-item:first-child { display: block; } .team-intro-item strong { display: block; margin-bottom: 35px; line-height: 1.2; color: #FFFFFF; font-size: 20px; } .team-intro-item p { color: #FFFFFF; font-size: 14px; line-height: 1.5; opacity: 0.6; } .team-btn { position: absolute; right: 49px; bottom: 50px; display: flex; z-index: 10; } .team-btn:before { position: absolute; left: 50%; top: 50%; margin-top: -7.5px; content: ""; width: 1px; height: 15px; background: #fff; opacity: 0.5; } .team-btn span { display: inline-block; color: #fff; font-size: 18px; cursor: pointer; transition: 0.4s; line-height: 1; } .team-btn span:hover { opacity: 0.8; } .team-btn span:first-child { margin-right: 56px; } .team-fix { position: relative; z-index: 2; width: 62.5%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 52px; } .team-fix:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 71.22%; background: #F6F6F6; } .team-tabs { position: relative; margin-left: 59px; overflow: hidden; line-height: 0; } .team-swiper { margin-right: -132px; line-height: 0; } .team-tt { display: block; margin-left: 82px; line-height: 1.2; color: #333333; font-size: 40px; font-weight: normal; } .team-slide { box-sizing: border-box; position: relative; z-index: 2; padding: 24px; } .team-slide.swiper-slide-active:before { height: 286px; } .team-slide figure { overflow: hidden; line-height: 0; } .team-slide figure img { display: block; width: 100%; height: auto; } .team-slide:before { position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; width: 100%; height: 286px; height: 0; background: #004E7B; transition: 0.65s; } .scientific { padding: 135px 0 100px; } .about-title { text-align: center; color: #333333; font-size: 40px; line-height: 1; } .scientific-swiper { margin-left: -106px; margin-right: -106px; } .scientific-slide { position: relative; float: left; text-align: center; padding-top: 125px; } .scientific-slide.slick-prev .scientific-imgs { margin-left: -80px; } .scientific-slide.slick-next .scientific-imgs { margin-left: 80px; } .scientific-slide.slick-current .scientific-imgs figure { margin: auto; transform: scale(1.2); } .scientific-slide.slick-current .scientific-imgs:before { opacity: 1; visibility: visible; transform: scale(1.4); transition-delay: 0.2s; } .scientific-slide.slick-current .scientific-imgs figure:before { opacity: 1; visibility: visible; transform: scale(1.4); transition-delay: 0.2s; } .scientific-slide.slick-current .scientific-imgs .scientific-text { opacity: 1; visibility: visible; transition-delay: 0.35s; } .scientific-slide.slick-current .scientific-in { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.5s; } .scientific-imgs { position: relative; z-index: 2; border-radius: 50%; } .scientific-imgs:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; border-radius: 50%; border: 1px dotted #004E7B; opacity: 0; visibility: hidden; transform: scale(0); transition: 0.5s; } .scientific-imgs figure { display: block; position: relative; line-height: 1; overflow: hidden; border-radius: 50%; z-index: 2; transform: scale(0.4); transition: 0.65s; } .scientific-imgs figure img { display: block; width: 100%; height: auto; border-radius: 50%; } .scientific-text { position: absolute; left: 0; top: 73%; transform: translateY(-50%); width: 100%; z-index: 4; box-sizing: border-box; opacity: 0; visibility: hidden; transition: 0.5s; } .scientific-text small { display: block; margin: auto; padding-bottom: 15px; width: 234px; line-height: 1; color: #FFFFFF; font-size: 20px; } .scientific-text span { display: block; margin-top: 20px; margin-bottom: 8px; line-height: 1; color: #fff; font-size: 16px; } .scientific-text p { color: #fff; line-height: 1.1; font-size: 16px; } .scientific-in { margin: auto; margin-top: 102px; position: relative; left: 50%; margin-left: -330px; width: 660px; text-align: left; opacity: 0; visibility: hidden; transform: translateY(40px); transition: 0.5s; } .scientific-in p { color: #666666; font-size: 16px; line-height: 1.5; } .scientific { overflow: hidden; } .scientifc-wr { position: relative; } .scientific-btn { position: absolute; left: 50%; margin-left: -38%; bottom: 80px; width: 76%; z-index: 10; display: flex; justify-content: space-between; align-items: center; } .scientific-btn span { display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; cursor: pointer; background: rgba(0, 0, 0, 0.15); border-radius: 50%; font-size: 18px; color: #fff; transition: 0.4s; } .scientific-btn span:hover { background: #004E7B; } .honor-box { position: relative; overflow: hidden; display: flex; flex-direction: row-reverse; } .honor-imgs { float: right; width: 36.45%; } .honor-imgs img { display: block; width: auto; height: auto; } .honor-fix { float: left; position: relative; z-index: 2; width: 63.56%; } .honor-fix:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 490px; background: #F6F6F6; } .honor-top { margin-left: calc((100vw - 1400px)/2); width: 43vw; padding-top: 64px; } .honor-top strong { display: block; margin-bottom: 34px; color: #333333; font-size: 40px; line-height: 1.2; font-weight: normal; } .honor-top p { color: #666666; font-size: 16px; } .honor-swiper { position: absolute; z-index: 2; left: -34px; bottom: 54px; right: -202px; padding-right: 117px; } .honor-slide { position: relative; } .honor-slide.swiper-slide-active figure { transform: scale(1); } .honor-slide figure { display: block; line-height: 1; overflow: hidden; transform: scale(0.85); } .honor-slide figure img { display: block; width: 100%; height: auto; } .honor-btn { position: absolute; right: 0; bottom: 0; z-index: 10; } .honor-btn span { display: block; width: 60px; height: 60px; border-radius: 50%; text-align: center; line-height: 60px; color: #fff; font-size: 18px; background: rgba(0, 0, 0, 0.15); transition: 0.4s; cursor: pointer; } .honor-btn span:first-child { margin-bottom: 44px; } .honor-btn span:hover { background: #004E7B; } .strategy { padding: 140px 0 128px; } .strategy-swiper { margin-top: 70px; } .strategy-swiper .pagetion { position: relative; margin-top: 90px; bottom: auto; display: flex; justify-content: center; } .strategy-swiper .pagetion .swiper-pagination-bullet { display: block; margin: 0 7px; width: 70px; height: 6px; border-radius: 3px; background: #DDDDDD; transition: 0.38s; } .strategy-swiper .pagetion .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #004E7B; width: 48px; } .strategy-slide { padding-bottom: 15px; } .strategy-slide:hover figure img { filter: grayscale(0); } .strategy-wrap { padding: 112px 48px 82px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); text-align: center; background: #fff; } .strategy-wrap figure { display: block; margin-bottom: 60px; position: relative; height: 106px; text-align: center; } .strategy-wrap figure img { display: block; margin: auto; max-width: 100%; max-height: 100%; transition: 0.58s; } .strategy-wrap p { height: 60px; color: #333333; font-size: 22px; font-weight: normal; line-height: 1.5; } .contact-us { display: flex; align-items: center; } .map { width: 50%; height: 780px; } .contact { margin-left: 6.25%; width: 26%; } .contact .about-title { text-align: left; } .addresss { display: block; margin-top: 80px; } .addresss p { position: relative; margin-bottom: 35px; padding-left: 26px; color: #666666; font-size: 16px; font-style: normal; } .addresss p i { display: inline-block; position: absolute; left: 0; top: 3px; line-height: 1; color: #004E7B; font-size: 22px; } .anchorBL { display: none !important; } .BMap_bubble_title { color: #004E7B; font-size: 16px; } .ptext .join-text { margin-top: -4.3vw; text-align: center; } .ptext .join-text strong { position: relative; left: 0; top: 0; transform: translateY(0px); margin-bottom: 14px; color: #fff; font-size: 50px; } .ptext .join-text p { color: #fff; font-size: 24px; line-height: 1.5; } .recruitment { padding-top: 100px; } .recruitment-top { display: flex; justify-content: space-between; align-items: center; } .recruite-select { position: relative; z-index: 10; } .recruite-select span { cursor: pointer; position: relative; display: block; padding-left: 30px; width: 370px; height: 40px; line-height: 40px; background: #004E7B; color: #fff; font-size: 14px; } .recruite-select span:before { position: absolute; right: 18px; top: 50%; margin-top: -3px; content: ""; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid #fff; } .recruite-select:hover .recruite-li { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: visible; } .recruite-li { position: absolute; left: 0; top: 100%; width: 100%; padding: 18px 30px; background: #F8FCFF; opacity: 0; visibility: hidden; transform: translateY(40px); pointer-events: none; transition: 0.4s; } .recruite-li li a { display: inline-block; color: #666666; font-size: 15px; line-height: 2; } .recruite-li li a:hover { color: #004E7B; text-decoration: underline; } .recruitment-list { margin-top: 35px; } .recruitment-show { position: relative; display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 35px 0; border-top: 1px dotted rgba(112, 112, 112, 0.25); } .recruitment-wrap { position: relative; z-index: 2; } .recruitment-wrap:before { content: ""; width: 100%; height: 0; background: #F3F3F3; position: absolute; left: 0; bottom: 0; transition: 0.4s; z-index: -1; } .recruitment-wrap:hover:before, .recruitment-wrap.active:before { height: 100%; bottom: auto; top: 0; } .recruitment-title { display: flex; align-items: center; padding-left: 40px; } .recruitment-title strong { position: relative; display: block; width: 500px; padding-left: 40px; margin-right: 20px; color: #333333; font-size: 18px; font-weight: normal; transition: 0.38s; } .recruitment-title strong i { position: absolute; left: 0; top: 0; display: inline-block; margin-right: 20px; color: #004E7B; font-size: 16px; font-style: normal; transition: 0.38s; } .recruitment-title p { display: flex; color: #999999; font-size: 14px; transition: 0.38s; } .recruitment-title p span { position: relative; margin-right: 20px; display: inline-block; line-height: 1; transition: 0.38s; } .recruitment-title p span:last-child:before { display: none; } .recruitment-title p span:before { position: absolute; right: -10px; top: 50%; margin-top: -6px; content: ""; width: 1px; height: 12px; background: #999999; transform: scaleX(0.5); transition: 0.38s; } .recruite-map { display: flex; align-items: center; } .recruite-map span { display: inline-block; color: #004E7B; padding-right: 20px; font-size: 15px; transition: 0.38s; } .recruite-map span i { display: inline-block; margin-right: 9px; color: #004E7B; font-style: normal; font-size: 18px; transition: 0.38s; } .recruite-map b { display: inline-block; color: #999999; font-size: 18px; font-weight: normal; transition: 0.38s; } .recruite-hide { box-sizing: border-box; padding: 66px 80px 54px; background: #FFFFFF; color: #666666; font-size: 14px; display: none; } .recruite-hide .apply { display: block; text-align: center; margin-top: 60px; width: 160px; height: 46px; line-height: 46px; border-radius: 23px; background: #004E7B; font-size: 14px; color: #fff; } .recruite-hide .apply:hover { background: rgba(0, 78, 123, 0.8); } .recruite-hide .apply i { display: inline-block; vertical-align: middle; margin-right: 10px; font-style: normal; color: #fff; font-size: 20px; } .recrite-page { padding: 38px 0; background: #F6F6F6; } .process { padding: 118px 0 130px; } .process-list { margin-top: 90px; display: flex; } .process-list li { margin-right: 7%; position: relative; width: 20%; } .process-list li:last-child { margin-right: 0; } .process-list li strong { display: flex; position: relative; z-index: 2; height: 140px; padding-bottom: 20px; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 20px; background: linear-gradient(to bottom, #0A8FDC 0%, #004E7B 100%); font-weight: normal; border-radius: 5px; } .process-list li strong i { display: block; position: absolute; left: 0; top: 40%; transform: translateY(-50%); width: 100%; font-style: normal; z-index: -1; text-align: center; color: #fff; opacity: 0.05; font-size: 5.57vw; font-family: "DINCond"; } .process-list li b { display: block; position: absolute; left: 50%; margin-left: -46px; bottom: -46px; width: 77px; height: 77px; text-align: center; line-height: 77px; background: linear-gradient(to bottom, #0A8FDC 0%, #004E7B 100%); border: 8px solid #fff; border-radius: 50%; z-index: 3; color: #fff; font-size: 39px; font-weight: normal; } .process-list li span { display: block; position: absolute; z-index: 2; left: 100%; margin-left: 23px; top: 74px; width: 44px; height: 29px; background: url(../images/arrow3.png) center no-repeat; } .idea { padding: 88px 0 200px; } .idea-list li { margin-bottom: 48px; display: flex; justify-content: space-between; flex-direction: row-reverse; } .idea-list li:nth-child(2n+2) { flex-direction: row; } .idea-list li:nth-child(2n+2) .idea-imgs .idea-dit { background: #88FEAF; } .idea-list li:nth-child(2n+2) .idea-imgs .idea-dit.dit2 { background: #78D0FE; } .idea-imgs { position: relative; z-index: 2; width: 48.42%; } .idea-imgs .idea-bg { display: block; position: absolute; left: 3%; top: 0; z-index: -2; width: 94%; animation: rotemove 6s infinite linear; } .idea-imgs .idea-dit { display: block; position: absolute; left: -56px; bottom: 10.68%; z-index: -1; width: 150px; height: 150px; border-radius: 50%; background: #B388FE; } .idea-imgs .idea-dit.dit2 { right: -13px; top: 11.55%; left: auto; bottom: auto; background: #FECB78; } .idea-imgs figure { display: block; line-height: 1; } .idea-imgs figure img { display: block; width: 100%; height: auto; } @keyframes rotemove { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .idea-text { width: 32.857%; } .idea-top { padding-top: 44px; margin-bottom: 56px; } .idea-top strong { display: block; margin-bottom: 18px; line-height: 1; color: #004E7B; font-size: 40px; font-weight: normal; } .idea-top p { color: #333333; font-size: 18px; line-height: 1.5; } .idea-info { color: #666666; font-size: 15px; } .idea-info strong { display: block; line-height: 2.2; color: #333333; } .project-item { margin-bottom: 25px; } .project-item:first-child .project-info { display: block; } .project-item span { display: inline-block; color: #333333; font-size: 16px; font-weight: bold; cursor: pointer; line-height: 1.5; transition: 0.4s; } .project-item span.active, .project-item span:hover { color: #004E7B; } .project-info { margin-left: -54px; padding: 24px 54px 22px; border-bottom: 1px solid rgba(112, 112, 112, 0.3); color: #666666; font-size: 15px; display: none; } .welfare { padding-bottom: 99px; } .welfare-title { color: #004E7B; } .welfare-wrap { margin-top: 80px; display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .welfare-imgs { position: relative; width: 37.14%; } .welfare-imgs figure { display: block; line-height: 1; overflow: hidden; } .welfare-imgs figure img { display: block; width: 100%; height: auto; border-radius: 20px; } .welfare-imgs strong { display: block; position: absolute; left: 0; top: 50%; margin-top: -22px; line-height: 1; color: #fff; font-size: 44px; width: 100%; font-weight: normal; text-align: center; } .welfare-text { width: 57.14%; color: #333333; font-size: 16px; } .welfare-text p { position: relative; margin-bottom: 10px; line-height: 2.2; } .welfare-text p span { color: #004E7B; } .welfare-text .reward { padding-left: 50px; } .welfare-text .reward p { padding-left: 20px; } .welfare-text .reward p:before { position: absolute; top: 6px; content: ""; width: 6px; height: 6px; top: 12px; left: 0; background: #004E7B; } .organizate { padding: 90px 0 85px; } .organizate-list { margin-top: 100px; } .organizate-list li { display: flex; position: relative; padding-left: 72px; margin-bottom: 56px; } .organizate-list li:nth-child(2n+2) a { flex-direction: row-reverse; } .organizate-list li:nth-child(2n+2) a .organizate-imgs span { left: auto; right: 30px; } .organizate-list li:nth-child(2n+2) a .organizate-text { margin-left: 0; margin-right: -27px; } .organizate-list li a { display: flex; align-items: flex-start; } .organizate-list li a:hover figure img { transform: scale(1.08); } .organizate-list li:last-child { margin-bottom: 0; } .organizate-imgs { position: relative; z-index: 2; } .organizate-imgs figure { display: block; line-height: 1; overflow: hidden; } .organizate-imgs figure img { display: block; width: 100%; height: auto; transition: 0.78s; } .organizate-imgs span { display: none; position: absolute; left: -47px; top: -80px; line-height: 1; z-index: -1; color: transparent; font-size: 8.333vw; -webkit-text-stroke: 1px #0A8FDC; font-family: "DINCond"; } .organizate-text { position: relative; z-index: 3; box-sizing: border-box; padding: 60px 80px ; margin-left: -27px; background: #fff; width: 49%; } .organizate-text strong { display: block; margin-bottom: 34px; line-height: 1.2; color: #333333; font-size: 24px; } .organizate-text p { color: #666666; font-size: 16px; text-align: justify; } .activity-top { margin-top: 68px; display: flex; } .activity-top li { position: relative; flex: 1; } .activity-top li:first-child { flex: none; width: 38%; } .activity-top li:nth-child(2n+2) .activity-text { background: rgba(255, 103, 31, 0.5); } .activity-top li:hover figure img { transform: scale(1.08); opacity: 1; filter: grayscale(0%); } .activity-top li:hover .activity-text { opacity: 1; visibility: visible; } .activity-top li:hover .activity-wr { opacity: 1; visibility: visible; margin-bottom: 0; } .activity-top li figure { overflow: hidden; height: 100%; } .activity-top li figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.68s; } .activity-text { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 78, 123, 0.5); z-index: 3; opacity: 0; visibility: hidden; transition: 0.68s; } .activity-wr { position: absolute; left: 10.8%; right: 14.1%; bottom: 88px; z-index: 3; margin-bottom: -40px; opacity: 0; visibility: hidden; transition: 0.58s; } .activity-wr strong { display: block; margin-bottom: 20px; color: #fff; font-size: 30px; font-weight: normal; } .activity-wr p { color: #FFFFFF; font-size: 15px; line-height: 1.4; } .activity-top1 { margin-top: 0; } .activity-top1 li:first-child { width: auto; flex: 1; } .activity-top1 li:last-child { flex: none; width: 42.96%; } .activity-top-img, .activity-top1-img { display: none; } .food { display: flex; } .food li { position: relative; flex: 1; } .food li:hover figure img { transform: scale(1.05); } .food li figure { position: relative; display: block; overflow: hidden; } .food li figure:before { position: absolute; left: 0; top: 0; z-index: 2; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .food li figure img { display: block; width: 100%; height: auto; transition: 0.7s; } .food-fix { position: absolute; left: 50%; margin-left: -32%; top: 50%; transform: translateY(-50%); width: 64%; z-index: 3; text-align: center; } .food-fix b { display: block; width: 120px; height: 120px; border-radius: 50%; margin: auto; color: #fff; font-size: 40px; line-height: 120px; background: #DC0A8F; text-align: left; font-weight: normal; } .food-fix img { display: block; width: 120px; margin: auto; transition: 0.65s; } .food-fix p { margin-top: 46px; color: #fff; font-size: 16px; line-height: 1.4; } .join-view { padding: 110px 0 130px; } .join-views-top { margin: 100px auto 0; width: 70%; } .join-views-top .title { display: block; margin-bottom: 45px; color: #333333; font-size: 24px; line-height: 1.2; text-align: center; } .join-views-top .pageC { color: #666666; font-size: 16px; } .join-views-top .pageC b { font-weight: normal; color: #004E7B; } .view-swipers { margin: auto; width: 66%; position: relative; } .v-slides.swiper-slide-prev figure, .v-slides.swiper-slide-next figure, .v-slides.swiper-slide-active figure { opacity: 1; } .v-slides figure { position: relative; overflow: hidden; opacity: 0.3; transition: 0.4s; } .v-slides figure img { display: block; width: 100%; height: auto; } .views-btn span { position: absolute; top: 50%; margin-top: -30px; z-index: 10; width: 60px; height: 60px; text-align: center; line-height: 60px; cursor: pointer; border-radius: 50%; background: rgba(0, 0, 0, 0.15); color: #fff; font-size: 17px; transition: 0.5s; } .views-btn span:hover { background: #004E7B; } .views-btn span.prev { left: -5%; } .views-btn span.next { right: -5%; } .investor { padding: 90px 0 73px; } .investor-list { margin-top: 66px; padding-bottom: 50px; display: flex; flex-wrap: wrap; } .investor-list li { margin-right: 2%; margin-bottom: 30px; width: 32%; } .investor-list li:nth-child(3n+3) { margin-right: 0; } .investor-list li a { display: flex; align-items: center; padding: 0 30px 0 30px; height: 130px; border: 1px solid #DDDDDD; background: #fff; } .investor-list li a:hover { border-color: #fff; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.16); } .investor-list li a img { display: inline-block; width: 86px; } .investor-list li a span { display: inline-block; flex: 1; margin-left: 18px; color: #333333; font-size: 20px; line-height: 1.4; } .investor-list2 { margin-top: 66px; padding-bottom: 50px; display: flex; flex-wrap: wrap; } .investor-list2 li { margin-right: 2%; margin-bottom: 30px; width: 23.5%; } .investor-list2 li:nth-child(4n+4) { margin-right: 0; } .investor-list2 li a { display: flex; align-items: center; padding: 0 30px 0 30px; background: #fff; } .investor-list2 li a img { width: 100%; transition: 0.4s; } .investor-list2 li a:hover img { transform: translateY(-15px) scale(1.1); } .message { position: fixed; right: 29px; bottom: 10%; z-index: 99; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; text-align: center; transition: 0.48s; } .message:before { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 50%; content: ""; width: 100%; height: 100%; background: rgba(0, 78, 123, 0.14); transition: 0.34s; animation: move3 1s infinite linear alternate; } .message i { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; text-align: center; line-height: 60px; color: #fff; font-size: 24px; background: #004E7B; transition: 0.3s; } .message.fbshow i { background-color: #fff; color: #004E7B; } .message.fbshow:before { background: rgba(255, 255, 255, 0.14); } @keyframes move3 { 0% { transform: scale(1); } 100% { transform: scale(0.8); } } .message-pop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 299; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.8s; } body.show { overflow: hidden; } body.show .message-pop { opacity: 1; visibility: visible; pointer-events: visible; } body.show .message-pop .message-text { opacity: 1; visibility: visible; margin-top: 0; } .message-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 78, 123, 0.5); } .message-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; padding: 80px; width: 1682px; max-width: 90%; background: #fff; z-index: 10; opacity: 0; visibility: hidden; margin-top: 80px; transition: 0.78s; } .message-close { display: block; position: absolute; right: 40px; top: 42px; color: #999999; font-size: 30px; line-height: 1; cursor: pointer; transition: 0.4s; } .message-close:hover { transform: rotate(180deg); } .message-title { display: block; text-align: center; line-height: 1; color: #333333; font-size: 40px; font-weight: normal; } .message-form { margin-top: 50px; } .message-row { display: flex; justify-content: space-between; } .message-item { position: relative; width: 32.25%; margin-bottom: 30px; } .message-item .text { box-sizing: border-box; padding-left: 28px; width: 100%; height: 56px; line-height: 56px; border: 1px solid #DDDDDD; color: #666666; font-size: 16px; background: #FFFFFF; transition: 0.35s; } .message-item .text:focus, .message-item .text.active { border-color: #FF0000; } .message-item i { display: block; position: absolute; right: 30px; top: 0; line-height: 64px; font-style: normal; color: #FF0000; font-size: 16px; } .message-item .sel { appearance: none; -moz-appearance: none; -webkit-appearance: none; position: relative; } .message-item .sel:focus, .message-item .sel.active { border-color: #FF0000; } .message-item2 { width: 66.1%; position: relative; } .message-item2::before { content: "\edbe"; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); line-height: 1; display: block; font-family: "iconfont" !important; font-size: 16px; color: #666; z-index: 10; } .message-yz { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .message-textarea { position: relative; width: 66.28%; } .message-textarea .text { box-sizing: border-box; padding-left: 28px; padding-right: 28px; padding-top: 16px; padding-bottom: 10px; width: 100%; height: 150px; line-height: 1.8; border: 1px solid #DDDDDD; color: #666666; font-size: 16px; background: #FFFFFF; transition: 0.35s; font-family: "SourceHanSansCN-Regular"; resize: none; } .message-textarea .text:focus, .message-textarea .text.active { border-color: #FF0000; } .message-textarea i { display: block; position: absolute; right: 30px; top: 0; line-height: 64px; font-style: normal; color: #FF0000; font-size: 16px; } .verificate { width: 32.25%; display: flex; align-items: center; justify-content: space-between; } .verificate .message-item { margin-bottom: 0; width: 59.111%; } .verificate img { display: block; height: auto; max-width: 160px; cursor: pointer; } .message-btns { margin-top: 70px; text-align: center; } .message-btns input { border: none; margin: auto; width: 266px; height: 60px; line-height: 60px; background: #004E7B; color: #fff; font-size: 16px; cursor: pointer; transition: 0.4s; } .message-btns input:hover { background: rgba(0, 78, 123, 0.8); } .c004E7B { color: #004E7B; } .message-lb { padding-top: 5px; line-height: 18px; } .message-lb .lb { cursor: pointer; } .message-lb input { margin: 3px 8px 0 0; padding: 0; float: left; } .message-lb a { color: #004E7B; } .tinner { width: 70%; margin: 0 auto; } .pagePadding { padding: 100px 0; } .bge5 { background-color: #E5E5E5; } .imgw { width: 100%; display: block; } .imgwho { width: 100%; height: 100%; display: block; object-fit: cover; } .solution-ttbox1 { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: nowrap; justify-content: space-between; -webkit-justify-content: space-between; } .solution-ttbox1 .img { width: 44.0625%; } .solution-ttbox1 .box { width: 52.1875%; } .solution-ttbox1 .title { color: #004E7B; font-size: 44px; line-height: 1.4; margin-bottom: 5%; font-weight: normal; } .solution-ttbox1 .desc { position: relative; font-size: 16px; text-align: justify; color: #333333; } .tpage-T { margin-bottom: 60px; text-align: center; } .tpage-T .t { padding-bottom: 15px; font-weight: normal; font-size: 40px; } .tpage-T .bot { width: 24px; height: 5px; background-color: #004E7B; display: block; margin: 0 auto; } .tpage-T .bot2 { background-color: #fff; } .f40 { font-size: 40px; } .c333 { color: #333333; } .cfff { color: #fff; } .tpage-T2 { text-align: left; } .tpage-T2 .bot { margin: 0; } .linkA { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; display: block; } .solution-listTT { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; margin-left: -2%; color: #fff; } .solution-listTT dd { width: 31.33%; margin-left: 2%; margin-bottom: 2%; position: relative; overflow: hidden; } .solution-listTT .img-box { position: relative; overflow: hidden; } .solution-listTT .img-box::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #007AC1; opacity: 0.2; filter: alpha(opacity=20); transition: 0.3s; -webkit-transition: 0.3s; } .solution-listTT .title { position: absolute; left: 5%; width: 90%; text-align: center; top: 50%; transform: translateY(-50%); font-weight: 500; line-height: 1.5; transition: 0.3s; -webkit-transition: 0.3s; font-size: 24px; } .solution-listTT .desc { position: absolute; left: 8%; width: 84%; top: 10%; transition: 0.3s; -webkit-transition: 0.3s; opacity: 0; filter: alpha(opacity=0); transform: translateY(-10%); -webkit-transform: translateY(-10%); } .solution-listTT .t { line-height: 1.5; margin-bottom: 30px; font-size: 18px; } .solution-listTT .list { font-size: 16px; padding-left: 20px; list-style-type: disc; } .solution-listTT .more { width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; border-radius: 50%; border: 1px solid #fff; position: absolute; right: 10%; bottom: 10%; } .fg-line { height: 1px; background-color: #707070; } .business-pagett { background-size: cover; background-repeat: no-repeat; background-position: center center; color: #fff; overflow: hidden; } .business-boxtt .list { width: 27%; margin-left: 5%; text-align: right; float: right; } .business-boxtt .list li { border-bottom: 1px solid #ccc; font-weight: bold; padding: 15px 0 15px 15px; line-height: 1.5; position: relative; transition: 0.4s; -webkit-transition: 0.4s; cursor: pointer; } .business-boxtt .list li::before { content: ""; position: absolute; left: 0; width: 0; height: 1px; bottom: -1px; background-color: rgba(10, 143, 220, 0.5); transition: 0.4s; -webkit-transition: 0.4s; } .business-boxtt .list li.active { text-align: left; background-color: rgba(10, 143, 220, 0.5); } .business-boxtt .list li.active::before { width: 100%; } .business-boxtt .box { position: relative; display: block; float: left; width: 68%; font-size: 16px; } .business-boxtt .box-list { padding-left: 20px; list-style-type: disc; position: relative; } .business-boxtt .box-list li { margin-bottom: 5px; } .business-boxtt-swiper { position: relative; overflow: hidden; width: 100%; } .yanfa-ttpage { overflow: hidden; } .yanfa-ttlist { display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; text-align: center; margin-left: -8.33%; } .yanfa-ttlist dd { width: 25%; margin-left: 8.33%; display: flex; display: -webkit-flex; display: -moz-flex; flex-direction: column; } .yanfa-ttlist .t, .yanfa-ttlist .title { color: #004E7B; line-height: 1.4; margin-bottom: 25px; font-size: 24px; } .yanfa-ttlist .item { background-color: #fff; border-radius: 30px; padding: 35px 5% 70px; position: relative; flex: 1; } .yanfa-ttlist .item .f18 { font-size: 16px; text-align: justify; } .yanfa-ttlist .item::before { content: "\e60d"; font-family: "iconfont" !important; font-size: 50px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #004E7B; line-height: 1; position: absolute; left: -25%; top: 50%; } .yanfa-ttlist .ico { width: 158px; margin: 0 auto 30px; } .solution-tpage { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; } .fanwei-ttpage { width: 32.5%; padding-right: 5%; border-right: 1px solid #DDDDDD; } .contact-ttpage { width: 56.875%; } .contact-ttpage .tpage-T { margin-bottom: 0; } .contact-ttpage .tpage-T .t { padding-right: 25px; text-align: right; } .contact-tt-by { text-align: right; background-color: #BAD5EA; padding: 25px; font-weight: bold; line-height: 1.5; margin-bottom: 45px; } .fanwei-ttlist > li { padding-top: 20%; } .fanwei-ttlist > li:first-child { padding-top: 0; } .fanwei-ttlist li { display: flex; display: -webkit-flex; display: -moz-flex; } .fanwei-ttlist .ico { width: 20%; font-size: 50px; color: #004E7B; line-height: 1.5; } .fanwei-ttlist .title { line-height: 1.5; color: #004E7B; margin-bottom: 15%; } .fanwei-ttlist .link { font-size: 16px; } .fanwei-ttlist .link a { display: block; margin-bottom: 8px; } .fanwei-ttlist .link a:hover { color: #004E7B; } .contact-tico { color: #004E7B; font-size: 48px; text-align: right; margin: 60px 0 40px; line-height: 1; } .contact-ttpage .tname { font-weight: bold; margin-bottom: 8px; line-height: 1.5; font-size: 14px; } .contact-ttpage .ctxt { width: 100%; box-sizing: border-box; border: 1px solid #999999; border-radius: 5px; padding: 8px 15px; font-size: 15px; line-height: 1.5; } .contact-ttpage .ctxt:focus, .contact-ttpage .ctxt.active { border-color: #BAD5EA; } .contact-ttpage .tse { width: 100%; box-sizing: border-box; border: 1px solid #999999; border-radius: 5px; padding: 8px 15px; font-size: 15px; line-height: 1.5; background: url(../img/sj.svg) no-repeat scroll 97% center; } .contact-ttpage .btn-ok { width: 110px; height: 52px; border-radius: 5px; background-color: #BAD5EA; text-align: center; line-height: 52px; display: block; font-weight: bold; } .contact-ttpage .btn-ok:hover { background-color: #004E7B; color: #fff; } .contact-ttform { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; } .contact-ttform dd { width: 48%; margin-bottom: 20px; } .contact-ttform2 dd { margin-bottom: 35px; } .contact-ttform3 { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; align-items: flex-end; } .contact-ttform3 a { color: #004E7B; } .contact-ttform3 .lb input { margin: 4px 8px 0 0; padding: 0; float: left; } .analysis-table table { width: 100% !important; border-collapse: collapse; margin: 45px 0 !important; border: 0 none !important; font-size: 14px; line-height: 1.4; text-align: center; } .analysis-table table td { padding: 15px 20px; } .analysis-table table td:first-child { text-align: left; } .analysis-table table tr { transition: 0.3s; -webkit-transition: 0.3s; } .analysis-table table tr:nth-child(odd) { background-color: #F8F8F8; } .analysis-table table tr:first-child { background-color: #DDDDDD; font-weight: bold; font-size: 16px; color: #333333; } .analysis-table table tr:first-child:hover { background-color: #DDDDDD; color: #333333; } .analysis-table table tr:hover { background-color: #004E7B; color: #fff; } .analysis-list { padding-top: 45px; display: flex; display: -webkit-flex; display: -moz-flex; margin-left: -6%; font-size: 14px; line-height: 1.5; flex-wrap: wrap; } .analysis-list li { margin-left: 6%; width: 44%; margin-bottom: 45px; } .analysis-list li .item:hover .c { opacity: 1; filter: alpha(opacity=100); transform: translateY(0); -webkit-transform: translateY(0); } .analysis-list .title { text-align: center; color: #004E7B; font-size: 18px; font-weight: bold; margin-bottom: 15px; } .analysis-list .desc { display: flex; display: -webkit-flex; display: -moz-flex; margin-left: -2%; } .analysis-list .desc .item { width: 48%; margin-left: 2%; position: relative; overflow: hidden; cursor: pointer; } .analysis-list .desc .img { position: relative; } .analysis-list .desc .img img { width: 100%; display: block; } .analysis-list .desc .t { position: absolute; left: 0; bottom: 0; background-color: rgba(80, 147, 199, 0.7); width: 90%; padding: 6px 5%; color: #fff; text-align: center; } .analysis-list .desc .c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 5%; color: #fff; background-color: #5093c7; transition: 0.4s; -webkit-transition: 0.4s; opacity: 0; text-align: justify; filter: alpha(opacity=0); transform: translateY(-10%); -webkit-transform: translateY(-10%); } .pt80 { padding-top: 80px; } .pb80 { padding-bottom: 80px; } .pt60 { padding-top: 60px; } .pb60 { padding-bottom: 60px; } .add-titlte1 { font-size: 40px; line-height: 1.4; color: #004E7B; font-weight: normal; } .mb15 { margin-bottom: 15px; } .mb25 { margin-bottom: 25px; } .mb40 { margin-bottom: 40px; } .mb50 { margin-bottom: 50px; } .page-tab1 table { width: 100% !important; font-size: 15px; line-height: 1.5; } .page-tab1 table tr:first-child { background-color: #004E7B !important; color: #FFFFFF !important; font-size: 18px !important; } .page-tab1 table td { padding: 12px 3%; text-align: center; } .page-tab1 table td:first-child { text-align: left; } .page-tab2 table { width: 100% !important; font-size: 15px; line-height: 1.5; } .page-tab2 table tr { background-color: #F8FCFF; } .page-tab2 table tr:first-child { background-color: #004E7B !important; color: #FFFFFF !important; font-size: 18px !important; } .page-tab2 table tr:first-child td { border: 1px solid transparent !important; } .page-tab2 table td { padding: 12px 3%; border: 1px solid #DDDDDD !important; } .bt-wz { color: #333333; line-height: 1.5; } .bt-bot { width: 27px; height: 4px; background-color: #004E7B; display: block; margin-top: 24px; } .fc .bt-bot { margin-left: auto; margin-right: auto; } .f16 { font-size: 16px; } .lhjc-ul { display: flex; flex-wrap: wrap; margin-left: -2%; } .lhjc-ul li { width: 23%; margin-left: 2%; box-shadow: 0 10px 15px rgba(153, 153, 153, 0.15); text-align: center; padding: 35px 0; margin-top: 20px; transition: 0.3s; } .lhjc-ul li:hover { transform: translateY(-5%); } .lhjc-ul .ico { width: 85px; height: 85px; position: relative; display: block; margin: 0 auto 30px; font-size: 70px; line-height: 1; color: #004E7B; } .lhjc-ul .ico img { max-width: 100%; max-height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .lhjc-ul .txt { line-height: 1.5; color: #333333; margin: 0 5%; } .add-tt-ul2 { display: flex; flex-wrap: wrap; margin-left: -2%; } .add-tt-ul2 li { width: 23%; margin-left: 2%; margin-bottom: 4%; } .add-tt-ul2 li:hover .imgBox img { transform: scale(1.05); } .add-tt-ul2 li:hover .txt { color: #004E7B; } .add-tt-ul2 .txt { line-height: 1.5; text-align: center; } .add-tt-ul2 .imgBox { position: relative; overflow: hidden; padding-bottom: 95%; } .add-tt-ul2 .imgBox img { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 80%; max-height: 80%; transition: 0.45s; } .lcsy-page { display: flex; justify-content: space-between; } .lcsy-page .imgBox { width: 42%; } .lcsy-page .desc { flex: 1; margin-left: 5%; } .pageC-ul ol, .pageC-ul ul { margin-left: 1.2em; list-style: disc; } .pageC-ul li::marker { color: #004E7B; } .pageC-ul2 ol, .pageC-ul2 ul { margin-left: 1.2em; list-style: disc; } .lcsy-list { display: flex; } .lcsy-list li { background-color: rgba(153, 153, 153, 0.15); box-shadow: -1px 3px 4px rgba(0, 0, 0, 0.1); position: relative; width: 33.33%; display: flex; transition: 0.5s; } .lcsy-list li.wf-w { width: 54%; } .lcsy-list li.sx-w { width: 23%; } .lcsy-list li.active .tbox1 { opacity: 0; visibility: hidden; } .lcsy-list li.active .tbox2 { opacity: 1; visibility: visible; pointer-events: all; } .lcsy-list .tbox1 { display: flex; flex-direction: column; padding: 40px 6%; text-align: center; position: absolute; justify-content: center; left: 0; top: 0; bottom: 0; right: 0; transition: 0.3s; } .lcsy-list .tbox1 .ico { font-size: 52px; color: #004E7B; line-height: 1; display: block; margin: 0 auto; } .lcsy-list .tbox1 .title { color: #333333; font-weight: normal; padding: 25px 0; min-height: 70px; } .lcsy-list .tbox1 .bot { width: 20px; height: 2px; background-color: #004E7B; display: block; margin: 0 auto; } .lcsy-list .tbox2 { background-color: #004E7B; color: #FFFFFF; padding: 40px 6%; transition: 0.3s; opacity: 0; pointer-events: none; visibility: hidden; } .lcsy-list .tbox2 .ico { font-size: 68px; line-height: 1; position: absolute; right: 6%; bottom: 6%; opacity: 0.2; } .lcsy-list .tbox2 .title { line-height: 1.4; margin-bottom: 20px; } .lcsy-list .tbox2 .pageC { opacity: 0.67; font-size: 15px; } .bgF6 { background-color: #F6F6F6; } .ywfw-ul1 { display: flex; flex-wrap: wrap; color: #004E7B; justify-content: space-between; line-height: 1.4; } .ywfw-title { background-color: #004E7B; color: #FFFFFF; text-align: center; padding: 12px 5%; margin: 45px 0 40px; font-size: 20px; line-height: 1.5; } .ywfw-ul2 { display: flex; margin-left: -2%; flex-wrap: wrap; } .ywfw-ul2 li { width: 23%; margin-left: 2%; margin-bottom: 2%; background-color: #FFFFFF; position: relative; } .ywfw-ul2 li::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1px solid #004E7B; } .ywfw-ul2 .item { padding: 30px 8% 45px; } .ywfw-ul2 .item p { position: relative; display: flex; } .ywfw-ul2 .item p::before { content: ""; width: 3px; height: 3px; background-color: #004E7B; border-radius: 50%; display: block; margin-right: 8px; margin-top: 10px; flex-shrink: 0; } .ywfw-ul2 .title { color: #FFFFFF; padding: 10px 8%; line-height: 1.4; background-color: #447BA9; } .ywfw-ul2 li:nth-child(2n) .title { background-color: #195D95; } .ywfw-ul2 li:nth-child(3n) .title { background-color: #0A6CA4; } .ywfw-ul2 li:nth-child(4n) .title { background-color: #004E7B; } .ywfw-ul3 { display: flex; justify-content: space-between; flex-wrap: wrap; line-height: 1.4; color: #004E7B; } .ywfw-ul3 li { margin-bottom: 15px; } .ywfw-ul3 .txt { text-align: center; } .ywfw-ul3 .tb { font-size: 34px; text-align: center; display: block; margin-bottom: 12px; } .ywfw-ul3 .jt { display: flex; align-items: center; } .map-page { display: flex; justify-content: space-between; flex-direction: row-reverse; } .map-page .desc { margin-right: 5%; flex: 1; } .map-page .imgBox { width: 50.4%; } .map-page .tn { margin-bottom: 18px; } .yqsb-demo-box { position: relative; } .yqsb-demo-box .yqsb-btn { top: 45%; } .yqsb-demo { position: relative; overflow: hidden; } .yqsb-demo .swiper-slide { position: relative; } .yqsb-demo .txt { text-align: center; line-height: 1.5; margin-top: 18px; } .yqsb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; background: rgba(0, 0, 0, 0.15); z-index: 10; transition: 0.5s; font-size: 17px; color: #FFFFFF; line-height: 1; } .yqsb-btn.prev { left: -100px; } .yqsb-btn.next { right: -100px; } .yqsb-btn:hover { background-color: #004E7B; } .cjbz-ul { display: flex; overflow: hidden; } .cjbz-ul > li { display: flex; width: 10%; background-color: #195D95; color: #FFFFFF; position: relative; cursor: pointer; transition: 0.5s; } .cjbz-ul > li.active { width: 90%; } .cjbz-ul > li.active .desc { opacity: 1; } .cjbz-ul > li:nth-child(2n) { background-color: #004E7B; } .cjbz-ul > li:hover .desc { opacity: 1; } .cjbz-ul .imgBox { width: 50%; flex-shrink: 0; } .cjbz-ul .desc { flex-shrink: 0; width: 425px; padding: 35px; opacity: 0.4; transition: 0.4s; }