@charset "utf-8"; .clearfix { zoom: 1; } .clearfix:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } .marginauto { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; } .linenowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flexCetween { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; } .flexAlign { display: flex; display: -webkit-flex; display: -moz-flex; align-items: center; -webkit-align-items: center; } .header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; } .header.scroll .header-wrap, .header:hover .header-wrap, .header.innerBg .header-wrap { background: #fff; } .header.scroll .header-wrap .logo img.show, .header:hover .header-wrap .logo img.show, .header.innerBg .header-wrap .logo img.show { opacity: 0; visibility: hidden; } .header.scroll .header-wrap .logo img.hide, .header:hover .header-wrap .logo img.hide, .header.innerBg .header-wrap .logo img.hide { opacity: 1; visibility: visible; } .header.scroll .header-wrap .navs > li > a, .header:hover .header-wrap .navs > li > a, .header.innerBg .header-wrap .navs > li > a { color: #333333; } .header.scroll .header-wrap .securities, .header:hover .header-wrap .securities, .header.innerBg .header-wrap .securities { color: #333333; } .header.scroll .header-wrap .securities:before, .header:hover .header-wrap .securities:before, .header.innerBg .header-wrap .securities:before, .header.scroll .header-wrap .securities:after, .header:hover .header-wrap .securities:after, .header.innerBg .header-wrap .securities:after { background: rgba(0, 0, 0, 0.2); } .header.scroll .header-wrap .search span, .header:hover .header-wrap .search span, .header.innerBg .header-wrap .search span { color: #010101; } .header.scroll .header-wrap .oa a, .header:hover .header-wrap .oa a, .header.innerBg .header-wrap .oa a { color: #333333; } .header.innerBg { box-shadow: 0 0 10px rgba(0, 0, 0, 0.16); } .header-wrap { display: flex; justify-content: space-between; align-items: center; padding: 0 6.25vw; transition: 0.5s; } .logo { display: block; position: relative; line-height: 1; width: 180px; height: auto; } .logo img { width: auto; max-width: 100%; transition: 0.5s; } .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: 3; margin-right: 3.02vw; } .navs > li:before { content: ""; width: 0; height: 3px; background: #0061ae; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .navs > li:hover, .navs > li.active { color: #0061ae; } .navs > li:hover:before, .navs > li.active:before { width: 100%; right: auto; left: 0; } .navs > li:last-child { margin-right: 0; } .navs > li > a { display: inline-block; position: relative; color: #fff; font-size: 16px; line-height: 86px; } .navs-down { position: absolute; left: 50%; top: 100%; margin-left: -64px; padding-top: 8px; transform: translateX(-50%); display: none; } .navs-menus { padding: 25px 5%; display: flex; white-space: nowrap; } .navs-menus li { margin-right: 50px; text-align: center; } .navs-menus li:last-child { margin-right: 0; } .navs-menus li a { display: inline-block; line-height: 1.5; color: #999999; font-size: 16px; } .navs-menus li a:hover { color: #0061ae; } .navs-bgs { position: absolute; left: 0; top: 100%; z-index: -1; background: #f3f5f6; height: 90px; width: 100%; display: none; } .solute-wr { display: flex; justify-content: center; } .menu-solutes { position: fixed; left: 0; top: 86px; width: 100%; padding: 40px 0; background: #f3f5f6; display: none; } .solute-items { display: block; margin-right: 4.69vw; } .solute-items:last-child { margin-right: 0; } .solute-items dt { display: block; margin-bottom: 20px; color: #0061ae; font-size: 1.25vw; font-weight: normal; } .solute-items dd { display: block; } .solute-items dd p { margin-bottom: 5px; } .solute-items dd p a { display: inline-block; color: #666666; font-size: 16px; } .solute-items dd p a:hover { color: #0061ae; } .securities { margin-left: 2.19vw; padding: 0 1.67vw 0 1.88vw; color: #fff; position: relative; font-size: 16px; transition: 0.3s; } .securities:before { position: absolute; left: 0; top: 50%; margin-top: -8px; content: ""; width: 1px; height: 16px; background: rgba(255, 255, 255, 0.5); transition: 0.3s; } .securities:after { position: absolute; right: 0; top: 50%; margin-top: -8px; content: ""; width: 1px; height: 16px; background: rgba(255, 255, 255, 0.5); transition: 0.3s; } .search { position: relative; padding-left: 1.98vw; } .search span { display: inline-block; line-height: 1; color: #fff; font-size: 20px; cursor: pointer; transition: 0.3s; } .search:hover .search-down { opacity: 1; visibility: visible; pointer-events: visible; margin-top: 0; } .search-down { position: absolute; right: -10px; top: 100%; margin-top: 30px; padding-top: 18px; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.4s; } .search-down .text { padding: 0; padding-left: 22px; width: 180px; height: 42px; border: none; outline: none; background: #fff; border-radius: 24px; color: #666666; font-size: 14px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .search-down .sub { position: absolute; right: 0; top: 18px; width: 40px; text-align: center; line-height: 42px; border: none; outline: none; color: #666; font-size: 18px; cursor: pointer; background: none; transition: 0.3s; } .search-down .sub:hover { color: #0061ae; } .oa { margin-left: 1.77vw; } .oa a { display: inline-block; color: #fff; font-size: 18px; font-family: "思源黑体 CN"; } .banner { position: relative; } .banner-swiper { position: relative; } .banner-swiper .swiper-pagination { width: auto; left: auto; right: 6.25vw; bottom: 60px; z-index: 3; } .banner-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0; margin-left: 26px; width: 20px; height: 20px; line-height: 1; opacity: 1; background: url(../images/star1.png) center no-repeat; transition: 0.35s; } .banner-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: url(../images/star2.png) center no-repeat; transform: rotateY(180deg); } .banner-slide { overflow: hidden; } .banner-slide a { display: block; } .banner-slide.swiper-slide-active .btext p img { transform: translateY(0); transition-delay: 0.25s; } .banner-slide.swiper-slide-active .btext strong { transform: translateY(0); transition-delay: 0.5s; } .banner-slide.swiper-slide-active .btext small { transform: translateY(0); transition-delay: 0.7s; } .btext { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; } .btext p { margin-bottom: 40px; text-align: center; overflow: hidden; } .btext p img { display: inline-block; margin: auto; width: auto; height: 43px; transform: translateY(120%); transition: 0.65s; } .btext strong { display: block; line-height: 1; color: #fff; font-size: 3.13vw; transform: translateY(100%); transition: 0.65s; } .btext strong b { color: #f6ad02; } .btext small { display: block; margin-top: 32px; color: #fff; font-size: 26px; text-transform: uppercase; line-height: 1.2; transform: translateY(100%); transition: 0.65s; } .banner-arrow { position: absolute; left: 50%; margin-left: -22px; bottom: 52px; z-index: 8; width: 42px; height: 42px; border: 1px dotted #fff; border-radius: 50%; transform: rotate(90deg); } .banner-arrow i { display: block; text-align: center; line-height: 40px; color: #fff; font-size: 16px; font-style: normal; animation: mousedown 1s infinite; } .bhide { overflow: hidden; } @keyframes mousedown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.2; transform: translateX(6px); } } .flex-menu { position: fixed; right: 2px; top: 50%; transform: translateY(-50%); z-index: 10; } .menu-item { margin-bottom: 2px; position: relative; } .menu-item:last-child { margin-bottom: 0; } .menu-item:hover .menu-default b { transform: translateY(-3px); } .menu-item:hover .menu-pop { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: visible; } .menu-default { padding: 8px 0 6px; width: 68px; cursor: pointer; border-radius: 3px; background: #0061ae; text-align: center; line-height: 1; } .menu-default b { display: inline-block; line-height: 1; color: #fff; font-size: 32px; font-style: normal; font-weight: normal; transition: 0.2s; } .menu-default p { margin-top: 8px; line-height: 1; color: #fff; font-size: 14px; } .menu-pop { position: absolute; right: 100%; top: 0; padding-right: 2px; height: 68px; opacity: 0; visibility: hidden; transform: translateX(-60px); pointer-events: none; transition: 0.4s; } .menu-pop p { padding-left: 26px; width: 202px; line-height: 68px; color: #fff; font-size: 24px; font-weight: bold; background: #0061ae; border-radius: 3px; } .solution { padding: 95px 6.25vw 105px; } .home-title { position: relative; z-index: 3; padding-left: 34px; padding-top: 26px; } .home-title:before { position: absolute; left: 0; top: 0; content: ""; width: 20px; height: 20px; background: url(../images/star2.png) center no-repeat; } .home-title small { display: block; position: absolute; left: 0; top: 0; z-index: -1; line-height: 0.85; color: #f5f5f5; font-size: 5.47vw; text-transform: uppercase; font-weight: bold; opacity: 0; } .home-title strong { display: block; margin-bottom: 16px; line-height: 1; color: #333333; font-size: 2.08vw; opacity: 0; } .home-title p { color: #666666; font-size: 18px; opacity: 0; overflow: hidden; } .solution-list { margin-top: 3.63vw; } .solution-list .swiper-wrapper { height: auto !important; } .solution-list li { position: relative; margin: 20px 0; width: 23.8%; background: #fff; border-radius: 10px; box-shadow: 0 0 21px rgba(3, 90, 168, 0.14); } .solution-list li:last-child { margin-right: 0; } .solution-list li:hover .solute-end { opacity: 1; visibility: visible; } .solute-defaul { padding: 4.43vw 2.81vw 3.44vw 3.13vw; } .solute-defaul b { display: block; margin-bottom: 2.81vw; line-height: 1; height: 4.53vw; } .solute-defaul b img { display: inline-block; width: auto; height: 100%; } .solute-defaul strong { display: block; position: relative; padding-bottom: 2.29vw; margin-bottom: 1.35vw; line-height: 1; color: #333333; font-size: 1.46vw; font-weight: normal; } .solute-defaul strong:before { position: absolute; left: 0; bottom: 0; content: ""; width: 30px; height: 4px; background: #dde9fb; } .solute-defaul p { color: #666666; font-size: 16px; line-height: 2; height: 96px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .solute-defaul span { display: inline-block; margin-top: 3.02vw; line-height: 1; color: #0061ae; font-size: 16px; } .solute-end { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 2.92vw 3.02vw 0 3.13vw; width: 100%; height: 100%; background-position: center; background-size: cover; border-radius: 10px; opacity: 0; visibility: hidden; transition: 0.68s; } .solute-top { padding-bottom: 2.92vw; } .solute-top strong { display: block; position: relative; padding-bottom: 2.4vw; margin-bottom: 1.35vw; line-height: 1; color: #fff; font-size: 1.46vw; } .solute-top strong:before { position: absolute; left: 0; bottom: 0; content: ""; width: 30px; height: 4px; background: #fff; } .solute-top p { color: #fff; font-size: 16px; line-height: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .solute-top span { display: inline-block; margin-top: 1.77vw; line-height: 1.1; color: #fff; font-size: 16px; } .solute-name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding-top: 2.08vw; border-top: 1px solid rgba(255, 255, 255, 0.2); } .solute-name p { margin-bottom: 1.04vw; position: relative; padding-left: 14px; color: #fff; font-size: 16px; } .solute-name p:nth-child(2n+1) { width: 50%; } .solute-name p:nth-child(2n+2) { white-space: nowrap; } .solute-name p:before { position: absolute; left: 2px; top: 50%; margin-top: -2.5px; content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; } .product-center { padding: 5.21vw 0 6.77vw 6.25vw; background: #0061ae; } .home-title1:before { background: url(../images/star1.png) center no-repeat; } .home-title1 small { color: rgba(255, 255, 255, 0.02); } .home-title1 strong, .home-title1 p { color: #fff; } .product-swiper { margin-top: 3.54vw; } .product-slide { padding-right: 2.6vw; width: 25.42vw; } .product-slide.active figure img { transform: scale(1.05); } .product-slide.active figure strong { font-weight: bold; } .product-slide.active figure i { opacity: 1; visibility: visible; } .product-slide.active .relevant { opacity: 1; visibility: visible; } .product-slide figure { position: relative; display: block; padding-bottom: 62.55%; height: 0; overflow: hidden; line-height: 1; border-radius: 8px; } .product-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .product-slide figure img { border-radius: 8px; transition: 0.68s; } .product-slide figure:before { position: absolute; left: 0; top: 0; z-index: 3; content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); } .product-slide figure strong { position: absolute; left: 1.67vw; bottom: 30px; line-height: 1; color: #dff1fc; font-size: 1.35vw; z-index: 4; font-weight: normal; } .product-slide figure i { position: absolute; right: 0; bottom: 0; z-index: 4; display: inline-block; box-sizing: border-box; padding-left: 88px; padding-top: 126px; height: 193px; width: 140px; line-height: 1; color: #fff; font-size: 26px; font-style: normal; background: url(../images/probg.png) center no-repeat; background-size: cover; opacity: 0; visibility: hidden; transition: 0.56s; } .relevant { margin-top: 28px; display: flex; align-items: flex-start; opacity: 0; visibility: hidden; transition: 0.65s; pointer-events: none; } .relevant span { display: inline-block; padding-left: 1.56vw; width: 7.6vw; color: #fff; font-size: 16px; font-weight: bold; } .relevant-info { margin-top: -3px; flex: 1; } .relevant-info p { color: #fff; font-size: 16px; line-height: 2; } .product-line { margin-right: 6.25vw; margin-top: 22px; display: flex; justify-content: space-between; align-items: center; } .product-line .swiper-pagination { position: relative; flex: 1; margin-right: 34px; height: 2px; background: rgba(255, 255, 255, 0.2); } .product-line .swiper-pagination .swiper-pagination-progressbar { left: 0; top: 0; width: 100%; height: 100%; background: #f39910; transform-origin: left bottom; } .commonbtn { display: flex; } .commonbtn span { display: inline-block; margin-right: 2.6vw; width: 67px; height: 76px; cursor: pointer; transition: 0.36s; } .commonbtn span.prev { margin-top: 30px; background: url(../images/prev.png) center no-repeat; background-size: cover; } .commonbtn span.prev:hover { background: url(../images/prev1.png) center no-repeat; background-size: cover; } .commonbtn span.next { background: url(../images/next.png) center no-repeat; background-size: cover; } .commonbtn span.next:hover { background: url(../images/next1.png) center no-repeat; background-size: cover; } .commonbtn span:last-child { margin-right: 0; } .home-about { display: flex; justify-content: space-between; align-items: center; background: #f2f4f8; } .about-video { position: relative; width: 50.94vw; line-height: 1; } .about-video figure { display: block; } .about-video figure img { display: block; width: 100%; height: auto; } .about-fix { margin-right: 6.25vw; width: 40.63vw; } .about-title { margin-bottom: 2.6vw; } .about-title span { display: block; margin-bottom: 1.35vw; font-size: 20px; line-height: 1; color: #0061ae; font-weight: bold; } .about-title h2 { display: block; margin-bottom: 1.04vw; line-height: 1.2; color: #333333; font-size: 3.13vw; } .about-title p { color: #333333; font-size: 1.56vw; } .about-info p { color: #333333; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .about-more { margin-top: 2.34vw; } .about-more a { display: inline-block; width: 165px; height: 52px; line-height: 52px; text-align: center; background: url(../images/aboutm.png) center no-repeat; background-size: cover; color: #fff; font-size: 16px; } .about-more a:hover { transform: translateY(-5px); } .about-data { display: flex; margin-top: 4.43vw; } .about-data-item { margin-right: 7.29vw; } .about-data-item p { color: #333333; font-size: 18px; line-height: 1; } .about-data-item p:first-child { margin-bottom: 20px; } .about-data-item p b { margin-right: 0.74vw; font-size: 2.6vw; font-weight: normal; font-family: "Avian"; } .about-data-item:last-child { margin-right: 0; } .video-btn { position: absolute; left: 50%; bottom: 30.08%; z-index: 3; text-align: center; cursor: pointer; } .video-btn span { display: inline-block; width: 60px; height: 60px; background: url(../images/avideo.png) center no-repeat; background-size: cover; } .video-btn p { margin-top: 12px; line-height: 1; color: #0061ae; font-size: 22px; font-weight: bold; background-image: -webkit-linear-gradient(right, #0161af, #1697fe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 38px rgba(255, 255, 255, 0.72); } .home-news { padding: 5.73vw 6.25vw 8.33vw; background: url(../img/newsbg.png) center bottom no-repeat; background-size: 100% auto; } .news-tab { position: relative; margin-top: 3.44vw; display: flex; align-items: flex-start; justify-content: space-between; } .news-btns { position: absolute; right: 0; bottom: -44px; z-index: 5; } .news-swiper { margin: 0; } .news-swiper-left, .news-swiper-right { position: relative; width: 25%; } .news-slide { position: relative; border-radius: 10px; overflow: hidden; } .news-slide.swiper-slide-active .news-time { opacity: 1; visibility: visible; transition-delay: 0.3s; } .news-slide.swiper-slide-active .news-time time { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.5s; } .news-slide.swiper-slide-active .news-infos { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.5s; } .news-slide:hover figure img { transform: scale(1.06); } .news-slide figure { position: relative; display: block; padding-bottom: 66.898%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .news-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-slide figure:before { position: absolute; left: 0; bottom: 0; z-index: 3; content: ""; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); } .news-slide figure img { transition: 0.68s; } .news-infos { position: absolute; left: 26px; right: 26px; bottom: 16px; z-index: 4; opacity: 0; visibility: hidden; transform: translateY(30px); transition: 0.65s; } .news-infos strong { color: #fff; font-size: 18px; font-weight: normal; } .news-infos p { margin-top: 12px; color: #fff; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-time { position: absolute; right: 0; top: 0; width: 149px; height: 166px; background: url(../images/newsbg1.png) left bottom no-repeat; opacity: 0; visibility: hidden; transition: 0.65s; } .news-time time { display: inline-block; position: absolute; left: 35px; top: 20px; line-height: 1; color: #fff; font-size: 16px; opacity: 0; visibility: hidden; transform: translateY(-40px); transition: 0.5s; } .news-swiper-middle { margin-top: 56px; width: 34.166%; } .news-swiper-middle .news-time { width: 189px; height: 178px; background: url(../images/probg1.png) center no-repeat; } .news-swiper-middle .news-time time { left: 60px; top: 27px; } .news-swiper-right { margin-top: -60px; } .news-infos1 strong { font-size: 20px; font-weight: bold; } .footer { padding: 0 6.25vw; background: url(../img/footerbg.jpg) center no-repeat; background-size: cover; } .footer-top { padding: 3.02vw 0 2.71vw; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; justify-content: space-between; align-items: flex-start; } .flogo { width: 260px; } .flogo img { display: block; max-width: 100%; height: auto; } .eq { margin-top: 18px; position: relative; } .eq span { display: block; line-height: 1; font-size: 60px; color: #fff; } .eq:hover .eq-wrap { opacity: 1; visibility: visible; margin-right: 0; pointer-events: visible; } .eq-wrap { position: absolute; right: 100%; margin-right: 50px; top: 50%; padding-right: 26px; margin-top: -57px; opacity: 0; visibility: hidden; pointer-events: visible; transition: 0.5s; pointer-events: none; } .eq-wrap:before { position: absolute; right: 17px; top: 50%; margin-top: -9px; content: ""; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 9px solid #fff; } .eq-wrap figure { display: block; padding: 4px; width: 106px; border-radius: 10px; background: #fff; } .eq-wrap figure img { display: block; width: 100%; height: auto; } .footer-down { padding: 52px 0 6.25vw; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .footer-contact span { display: block; margin-bottom: 30px; line-height: 1; color: #fff; font-size: 16px; font-weight: bold; } .footer-contact strong { display: block; margin-bottom: 25px; line-height: 1; color: #fff; font-size: 1.98vw; } .footer-contact p { color: #fff; font-size: 16px; line-height: 36px; } .footer-navs { display: flex; } .footer-navs-item { margin-right: 6.8vw; } .footer-navs-item:last-child { margin-right: 0; } .footer-navs-item dt { margin-bottom: 30px; } .footer-navs-item dt a { display: inline-block; line-height: 1; color: #fff; font-size: 16px; font-weight: bold; } .footer-navs-item dd { display: block; } .footer-navs-item dd p { margin-bottom: 6px; } .footer-navs-item dd p a { display: inline-block; position: relative; z-index: 2; color: #fff; font-size: 16px; } .footer-navs-item dd p a:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .footer-navs-item dd p a:hover, .footer-navs-item dd p a.active { color: #fff; } .footer-navs-item dd p a:hover:before, .footer-navs-item dd p a.active:before { width: 100%; right: auto; left: 0; } .footer-copy { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; } .footer-copy p { color: #fff; font-size: 16px; } .footer-copy p a { margin-left: 12px; display: inline-block; color: #fff; } .network { display: flex; align-items: center; color: rgba(255, 255, 255, 0.2); } .network a { color: rgba(255, 255, 255, 0.2); font-size: 16px; } .network a:hover { color: #fff; } .pop-video { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; visibility: hidden; pointer-events: none; transition: 0.88s; transform: translateY(100%); overflow: hidden; } .pop-video.show { transform: translateY(0); visibility: visible; pointer-events: visible; } .pop-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; } .pop-video-wrap { position: absolute; left: 50%; margin-left: -37%; top: 50%; transform: translateY(-50%); width: 74%; } .pop-video-wrap .video { display: block; width: 100%; height: auto; } .pop-close { display: block; position: absolute; right: 30px; top: 30px; z-index: 3; cursor: pointer; transition: 0.4s; display: flex; align-items: center; } .pop-close p { margin-right: 12px; color: #fff; font-size: 20px; } .pop-close i { display: inline-block; font-style: normal; text-align: center; line-height: 1; font-size: 18px; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; color: #000; background: #fff; font-weight: bold; transition: 0.38s; } .pop-close:hover i { transform: rotate(180deg); } .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); } .potash-list.article-block .potash-item { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: 1.5s; } .potash-list.article-block .potash-item:nth-child(2) { transition-delay: 0.5s; } .potash-list.articleShow .potash-item { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); } .about-video.article-block { opacity: 0; transform: translateX(-100px); visibility: hidden; transition: 1s 0.25s; } .about-video.articleShow { opacity: 1; transform: translateX(0); visibility: visible; } .pbanner { position: relative; overflow: hidden; } .pbanner figure { position: relative; display: block; padding-bottom: 100vh; height: 0; overflow: hidden; line-height: 1; } .pbanner figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .about-banner { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; } .about-banner h3 { color: #ffffff; font-size: 3.13vw; line-height: 1.2; } .about-btn { margin-top: 28px; cursor: pointer; display: inline-block; } .about-btn:hover b { transform: rotate(360deg); } .about-btn b { display: inline-block; margin: auto; color: #fff; width: 3.85vw; height: 3.85vw; line-height: 1; font-weight: normal; background: url(../images/video1.png) center no-repeat; background-size: cover; transition: 0.45s; } .about-btn p { margin-top: 1.67vw; line-height: 1; color: #fff; font-size: 1.35vw; } .leval-menu { position: absolute; left: 0; bottom: 3.85vw; z-index: 10; width: 100%; } .leval-menu-li { display: flex; justify-content: center; } .leval-menu-li li { margin-right: 20px; } .leval-menu-li li:last-child { margin-right: 0; } .leval-menu-li li:hover a, .leval-menu-li li.active a { background: #ffbb1d; border-color: #ffbb1d; font-weight: bold; } .leval-menu-li li a { display: inline-block; width: 178px; height: 46px; text-align: center; color: #fff; font-size: 18px; line-height: 46px; border: 1px solid #fff; border-radius: 24px; background: rgba(255, 255, 255, 0.1); } .posite { padding: 26px 12.5vw; display: flex; justify-content: flex-end; } .posite-wrap { display: flex; } .posite-wrap span, .posite-wrap b, .posite-wrap a { display: inline-block; color: #999999; font-size: 16px; } .posite-wrap b { margin: 0 6px; font-weight: normal; } .posite-wrap a:hover { color: #0061ae; } .introduct { padding: 4.17vw 12.5vw 23.75vw; background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; } .introduct-wrap { display: flex; justify-content: space-between; align-items: flex-start; } .introduct-title strong { display: block; margin-bottom: 16px; line-height: 1.1; color: #010101; font-size: 2.6vw; font-weight: normal; } .introduct-title p { color: #010101; font-size: 1.56vw; line-height: 1.2; font-weight: lighter; } .introduct-title small { display: flex; align-items: center; margin-top: 2.34vw; } .introduct-title small img { display: inline-block; margin-left: -12.5vw; } .introduct-title small b { display: inline-block; margin-left: 18px; color: #0162af; font-size: 3.02vw; font-family: "JQZongYiFT"; font-weight: normal; } .introduct-info { width: 41.46vw; } .introduct-text { color: #333333; font-size: 16px; line-height: 2.2; } .about-data1 .about-data-item p:first-child { color: #0061ae; } .history { padding: 0 12.5vw 6.67vw; } .history-top { display: flex; justify-content: space-between; } .history-wr { cursor: pointer; } .about-titles { color: #010101; font-size: 2.6vw; line-height: 1; } .about-btn-common { display: flex; } .about-btn-common span { display: inline-block; margin-right: 15px; width: 50px; height: 50px; text-align: center; line-height: 50px; border: 1px solid #d2d2d2; color: #d2d2d2; cursor: pointer; border-radius: 50%; transition: 0.35s; } .about-btn-common span:hover { border-color: #0061ae; color: #0061ae; } .about-btn-common span:last-child { margin-right: 0; } .mtop { height: 85px; } .inner-pbanner { padding: 8.33vw 12.5vw 8.33vw; background-size: cover; background-position: center; background-repeat: no-repeat; } .innerwrap { display: flex; justify-content: space-between; align-items: center; } .innerwrap strong { display: block; line-height: 1; color: #fff; font-size: 2.71vw; } .inner-back a { display: inline-block; width: 54px; height: 54px; text-align: center; line-height: 54px; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 22px; } .inner-back a:hover { background: #fff; color: #0061ae; text-indent: -3px; } .company-honor { padding: 65px 12.5vw 60px; } .company-top { display: flex; justify-content: space-between; align-items: center; } .honor-title { position: relative; padding-left: 30px; line-height: 1; display: flex; align-items: center; } .honor-title:before { position: absolute; left: 0; top: 50%; margin-top: -11px; content: ""; width: 5px; height: 23px; background: #0061ae; } .honor-title strong { display: block; line-height: 1; color: #0061ae; font-size: 26px; } .honor-title small { display: inline-block; margin-left: 20px; color: #0061ae; font-size: 16px; } .honor-btns { display: flex; } .honor-btns a { display: inline-block; margin-right: 60px; color: #333333; font-size: 18px; } .honor-btns a:last-child { margin-right: 0; } .honor-btns a:hover, .honor-btns a.active { color: #0061ae; font-weight: bold; } .honor-b { margin-top: 54px; } .honor-li { display: flex; flex-wrap: wrap; } .honor-li li { margin-right: 0.7%; margin-bottom: 10px; box-sizing: border-box; padding: 2.08vw 1.56vw 1.46vw; width: 19.44%; background: #f6f7fb; border-radius: 10px; } .honor-li li:nth-child(5n+5) { margin-right: 0; } .honor-li li:hover figure img { transform: scale(1.05); } .honor-li li figure { padding-bottom: 11.46vw; position: relative; text-align: center; } .honor-li li figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border: 3px solid #fff; border-radius: 6px; max-width: 100%; max-height: 100%; box-shadow: 0 0 2.08vw #e0e0f9; transition: 0.6s; } .honor-text { margin-top: 1.56vw; text-align: center; } .honor-text p { color: #333333; font-size: 16px; line-height: 1.6; } .load-mores { text-align: center; margin-top: 48px; } .load-mores p { margin-bottom: 6px; line-height: 1; color: #333333; font-size: 16px; } .load-mores span { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: #0061ae; color: #fff; font-size: 34px; font-size: 14px; } .history-tab { margin-top: 4.69vw; display: flex; justify-content: space-between; } .history-swiper { position: relative; margin: 0; box-sizing: border-box; padding-right: 2.92vw; width: 25.16vw; height: 498px; } .history-swiper:before { position: absolute; right: 0; top: 0; content: ""; width: 9px; height: 100%; background: url(../images/line2.png) right center no-repeat; } .history-slide { padding-right: 6.56vw; box-sizing: border-box; position: relative; display: flex; align-items: center; text-align: right; } .history-slide.swiper-slide-active:before { opacity: 1; visibility: visible; right: 0; transition-delay: 0.25s; } .history-slide.swiper-slide-active p { opacity: 1; } .history-slide:before { position: absolute; right: 30px; top: 50%; margin-top: -15px; content: ""; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #0061ae; opacity: 0; visibility: hidden; transition: 0.4s; } .history-slide p { color: #333333; font-size: 1.35vw; opacity: 0.22; line-height: 1.6; transition: 0.38s; } .history-fix { position: relative; width: 41.46vw; } .history-item { padding-top: 34px; position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(40px); display: block !important; } .history-item.show { position: relative; opacity: 1; visibility: visible; transform: translateY(0); transition: 0.5s; } .history-time { padding-bottom: 18px; position: relative; border-bottom: 1px solid #0061ae; } .history-time:before { position: absolute; left: 0; bottom: -4px; content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0061ae; } .history-time time { display: block; line-height: 1; color: #0061ae; font-size: 2.71vw; font-weight: bold; } .history-in { margin-top: 34px; } .history-in strong { display: block; line-height: 1; color: #0061ae; font-weight: normal; font-size: 26px; } .history-li { margin-top: 48px; } .history-year-item { margin-bottom: 1.56vw; display: flex; } .history-year-item span { display: inline-block; text-align: center; width: 81px; height: 27px; line-height: 27px; border-radius: 14px; background: #0061ae; color: #fff; font-size: 16px; } .history-year-item p { flex: 1; margin-left: 30px; color: #333333; font-size: 16px; line-height: 27px; } .honor-boxs { padding: 7.71vw 12.5vw 6.81vw; background-size: 100% auto; background-repeat: no-repeat; overflow: hidden; } .honors-top { display: flex; justify-content: space-between; align-items: flex-start; } .honors-top strong { display: block; color: #010101; font-size: 2.6vw; font-weight: normal; line-height: 1; } .honor-bds { display: flex; justify-content: space-between; width: 206px; border-bottom: 1px solid rgba(1, 98, 175, 0.2); } .honor-bds span { display: inline-block; position: relative; z-index: 2; padding: 16px 0 20px; line-height: 1; color: #010101; font-size: 16px; cursor: pointer; transition: 0.35s; } .honor-bds span:hover, .honor-bds span.active { color: #0061ae; font-weight: bold; } .honor-bds span:hover:before, .honor-bds span.active:before { opacity: 1; transform: scaleX(1); } .honor-bds span:before { position: absolute; left: 0; bottom: -1px; content: ""; width: 100%; height: 1px; background: #0061ae; transform: scaleX(0); opacity: 0; transition: 0.3s; } .honor-tabs { margin-top: 32px; } .honors-swiper { width: auto; margin: 0; margin-right: -12.5vw; padding-bottom: 10px; } .honors-swiper .swiper-pagination { position: relative; margin-right: 12.5vw; height: 2px; margin-top: 50px; background: #eaeff5; } .honors-swiper .swiper-pagination:before { position: absolute; left: 0; top: 50%; margin-top: -6px; content: ""; width: 12px; height: 12px; border-radius: 50%; background: #0061ae; } .honors-swiper .swiper-pagination .swiper-pagination-progressbar { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #0061ae; transform-origin: left top; } .honors-slide { width: auto; padding: 30px 0; } .honor-wr { box-sizing: border-box; padding: 2.6vw 0; width: 276px; background: #fff; box-shadow: 0 0 30px rgba(236, 238, 244, 0.74); border-radius: 12px; text-align: center; } .honor-wr:hover figure img { transform: scale(1.05); } .honor-wr figure { position: relative; margin-bottom: 26px; height: 88px; } .honor-wr figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; transition: 0.5s; } .honor-wr p { max-width: 88%; margin: auto; max-width: 100%; color: #0061ae; font-size: 19px; line-height: 1.5; width: 180px; height: 57px; } .honors-btn { margin-top: 50px; } .honor-tabs { position: relative; } .honor-items { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(40px); } .honor-items.show { position: relative; opacity: 1; visibility: visible; transform: translateY(0); transition: 0.56s; } .honor-items .about-more { position: absolute; right: 0; bottom: 0; z-index: 10; } .culture { position: relative; z-index: 2; overflow: hidden; background-attachment: fixed; background-position: center; background-repeat: no-repeat; padding: 16.67vw 0; background-size: cover; } .culture-text { text-align: center; } .culture-text strong { display: block; color: #fff; font-size: 2.6vw; line-height: 1.6; } .culture-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; } .contact-box { padding: 94px 12.5vw 6.77vw; display: flex; justify-content: space-between; align-items: center; } .contact-info { width: 30.27%; } .contact-info .contact-tt { position: relative; padding-bottom: 39px; line-height: 1; color: #010101; font-size: 2.6vw; font-weight: normal; } .contact-info .contact-tt:before { position: absolute; left: 0; bottom: 0; content: ""; width: 72px; height: 3px; background: #0061ae; } .contact-list { margin-top: 6.25vw; } .contact-items { margin-bottom: 2.81vw; } .contact-items:last-child { margin-bottom: 0; } .contact-items span { display: block; margin-bottom: 15px; line-height: 1.1; color: #999999; font-size: 20px; } .contact-items p { color: #333333; font-size: 26px; font-weight: bold; line-height: 1.3; } .contact-items strong { display: block; color: #333333; font-size: 24px; line-height: 1.6; font-weight: normal; } .contact-map { position: relative; width: 65.4%; } .contact-map figure { display: block; line-height: 1; } .contact-map figure img { display: block; width: 100%; height: auto; } .contact-dit { position: absolute; left: 47.93%; margin-left: 21px; bottom: 26.8%; z-index: 3; padding-top: 12px; } .contact-dit i { display: block; position: relative; z-index: 2; width: 42px; height: 42px; } .contact-dit i:before { position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; width: 100%; height: 100%; border-radius: 50%; background: rgba(1, 98, 175, 0.3); animation: pulse 2.5s infinite; } .contact-dit i:after { position: absolute; left: 50%; top: 50%; margin-left: -11px; margin-top: -11px; content: ""; width: 22px; height: 22px; background: #0061ae; border-radius: 50%; } .contact-dit span { display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; padding: 0 20px; background: #0061ae; border-radius: 10px; height: 37px; line-height: 37px; color: #fff; font-size: 24px; white-space: nowrap; } .contact-dit span:before { position: absolute; left: 50%; margin-left: -6px; bottom: -8px; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #0061ae; } @keyframes pulse { 0% { opacity: 1; transform: scale(0); } 40% { opacity: 1; transform: scale(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } .inner-ptext { position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); z-index: 5; text-align: center; } .inner-ptext .leval-menu { position: relative; bottom: 0; } .pbanner-title { position: relative; z-index: 3; padding-top: 2.08vw; margin-bottom: 2.29vw; } .pbanner-title small { display: block; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; color: rgba(255, 255, 255, 0.1); text-transform: uppercase; font-size: 5.21vw; line-height: 1; font-weight: bold; } .pbanner-title strong { display: block; margin-bottom: 12px; line-height: 1; color: #fff; font-size: 2.81vw; } .pbanner-title p { color: #fff; font-size: 1.25vw; } .mouse-pbanner { position: absolute; left: 50%; margin-left: -30px; bottom: 50px; display: flex; align-items: center; justify-content: center; z-index: 3; width: 58px; height: 58px; border: 1px dotted #fff; border-radius: 50%; } .mouse-pbanner span { display: inline-block; position: relative; width: 18px; height: 26px; background: url(../images/mouse.png) center no-repeat; background-size: cover; } .mouse-pbanner span:before { position: absolute; left: 50%; margin-left: -1px; top: 6px; content: ""; width: 2px; height: 6px; background: #fff; animation: mouseMove 1s infinite; } @keyframes mouseMove { 0% { transform: translateY(0px); opacity: 1; } 100% { transform: translateY(6px); opacity: 0.1; } } .news-tops { padding: 8.85vw 12.5vw 9.38vw; background-repeat: no-repeat; background-size: cover; } .news-slides a { display: flex; justify-content: space-between; flex-direction: row-reverse; position: relative; z-index: 2; background: #fff; border-radius: 10px; } .news-slides a:before { position: absolute; right: 50%; bottom: 0; content: ""; width: 240px; height: 9.69vw; background: url(../images/star3.png) center no-repeat; background-size: cover; } .news-slides a:hover .news-imgs figure img { transform: scale(1.05); } .news-slides a:hover .news-in span:before { right: auto; left: 0; width: 100%; } .news-imgs { width: 49.72%; } .news-imgs figure { border-radius: 10px; position: relative; display: block; padding-bottom: 66.85%; height: 0; overflow: hidden; line-height: 1; } .news-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-imgs figure img { transition: 0.76s; } .news-lefts { margin-left: 5.41%; padding-top: 3.65vw; width: 37.5%; } .news-tts { margin-bottom: 1.67vw; } .news-tts time { display: block; margin-bottom: 16px; line-height: 1; color: #c8c8c8; font-size: 16px; font-weight: bold; } .news-tts strong { display: block; line-height: 1.2; color: #0061ae; font-size: 1.25vw; } .news-in p { color: #878686; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .news-in span { display: inline-block; position: relative; margin-top: 2.4vw; color: #0061ae; line-height: 1.5; font-size: 16px; } .news-in span:before { position: absolute; right: 0; bottom: 0; content: ""; width: 0; height: 1px; background: #0061ae; transition: 0.4s; } .news-swiper .swiper-pagination { width: auto; left: 5.41%; bottom: 3.65vw; line-height: 1; } .news-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0; margin-right: 18px; line-height: 1; width: 6px; height: 6px; border: 2px solid #e0e0e0; opacity: 1; background: none; transition: 0.38s; } .news-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: #0061ae; } .news-inners { padding: 7.5vw 12.5vw 3.85vw; } .news-inner-list { display: flex; flex-wrap: wrap; margin-bottom: -4.69vw; } .news-inner-list li { margin-right: 8%; margin-bottom: 4.69vw; width: 28%; border-bottom: 1px solid #e0e4eb; } .news-inner-list li:nth-child(3n+3) { margin-right: 0; } .news-inner-list li a:hover figure img { transform: scale(1.05); } .news-inner-list li a:hover .news-inner-time span { color: #0061ae; } .news-inner-list li figure { position: relative; display: block; padding-bottom: 67%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .news-inner-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-inner-list li figure img { transition: 0.5s; } .news-inner-text { margin-top: 18px; padding-bottom: 2.08vw; border-bottom: 1px solid #e0e4eb; } .news-inner-text strong { display: block; color: #333333; font-size: 18px; font-weight: normal; height: 64px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-inner-time { display: flex; align-items: center; justify-content: space-between; margin-top: 2.6vw; } .news-inner-time time { display: block; line-height: 1; color: #a7a7a7; font-size: 16px; } .news-inner-time span { display: inline-block; color: #a7a7a7; font-size: 16px; transition: 0.35s; } .views-news { padding: 0 12.5vw 5.94vw; display: flex; justify-content: space-between; align-items: flex-start; } .views-left { width: 72.77%; padding-top: 85px; } .views-top { position: relative; padding: 0 84px 3.54vw 0; border-bottom: 1px solid #e2e2e2; } .views-top strong { display: block; line-height: 1.2; color: #272828; font-size: 1.77vw; font-weight: normal; } .views-top p { margin-top: 34px; display: block; } .views-top p span { margin-right: 20px; position: relative; color: #b4b4b4; font-size: 16px; } .views-top p span:first-child:before { position: absolute; right: -11px; top: 50%; margin-top: -7px; content: ""; width: 2px; height: 15px; background: #b4b4b4; } .views-top .views-back { display: inline-block; position: absolute; right: 0; top: 0; width: 54px; height: 54px; border: 2px solid #0061ae; border-radius: 50%; text-align: center; line-height: 54px; color: #0061ae; font-size: 22px; } .views-top .views-back:hover { background: #0061ae; color: #fff; } .views-info { padding-top: 2.92vw; color: #272828; font-size: 16px; } .views-info img { max-width: 100%; width: auto; height: auto; } .recommend { padding-top: 8.02vw; width: 21.52%; } .recommend-title { line-height: 1; color: #333333; font-size: 26px; } .recommend-list { margin-top: 42px; } .recommend-list li { margin-bottom: 4.38vw; } .recommend-list li:last-child { margin-bottom: 0; } .recommend-list li figure { position: relative; display: block; padding-bottom: 62.58%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .recommend-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .recommend-list li figure img { transition: 0.65s; } .recommend-list li a:hover figure img { transform: scale(1.06); } .recommend-list li a:hover .recommend-text strong { color: #0061ae; } .recommend-text { margin-top: 30px; } .recommend-text time { display: block; margin-bottom: 7px; line-height: 1; color: #999999; font-size: 14px; } .recommend-text strong { display: block; line-height: 1.2; color: #333333; font-size: 16px; font-weight: normal; } .bidings { background-color: #ebeff5; background-position: center bottom; background-size: cover; } .bidings-list li { margin-bottom: 36px; } .bidings-list li a { display: flex; align-items: flex-start; padding: 2.6vw 2.92vw 2.5vw; position: relative; z-index: 3; background: #fff; } .bidings-list li a:before { content: ""; width: 0; height: 2px; background: #0061ae; position: absolute; right: 0; bottom: 0; transition: 1s; z-index: -1; } .bidings-list li a:hover, .bidings-list li a.active { color: #0061ae; } .bidings-list li a:hover:before, .bidings-list li a.active:before { width: 100%; right: auto; left: 0; } .bidings-list li:last-child { margin-bottom: 0; } .biding-time { padding: 20px 15px 18px; box-sizing: border-box; border: 1px solid #0061ae; width: 96px; border-radius: 8px; text-align: center; } .biding-time span { display: block; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid #e7e7e7; line-height: 1; color: #666666; font-size: 16px; } .biding-time b, .biding-time time { display: block; line-height: 1.2; color: #666666; font-size: 18px; font-weight: normal; } .bidngs-text { flex: 1; margin-left: 4.69vw; margin-right: 30px; } .bidngs-text strong { display: block; margin-bottom: 30px; line-height: 1.2; color: #333333; font-size: 26px; font-weight: normal; } .bidngs-text p { color: #666666; font-size: 16px; } .biding-status { margin-top: 22px; padding-top: 22px; width: 92px; display: flex; justify-content: center; border-top: 1px solid #919191; align-items: center; line-height: 1; } .biding-status.start i, .biding-status.start span { color: #0061ae; } .biding-status i { display: inline-block; margin-right: 8px; color: #919191; font-size: 20px; font-style: normal; } .biding-status span { display: inline-block; color: #666666; font-size: 16px; } .product-boxs { padding: 6.04vw 12.5vw 3.65vw; } .product-list { display: flex; flex-wrap: wrap; } .product-list li { margin-right: 3.35%; margin-bottom: 58px; width: 31.1%; background: #fff; border-radius: 6px; box-shadow: 0 0 27px #e7e7e7; } .product-list li:hover figure img { transform: scale(1.05); } .product-list li:hover .product-info strong, .product-list li:hover .product-info span { color: #0061ae; } .product-list li figure { position: relative; display: block; padding-bottom: 56.37%; height: 0; overflow: hidden; line-height: 1; border-radius: 6px 6px 0 0; } .product-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .product-list li figure img { transition: 0.65s; } .product-list li figure strong { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); line-height: 1; color: #fff; font-size: 32px; font-weight: normal; text-align: center; width: 100%; z-index: 3; } .product-list li:nth-child(3n+3) { margin-right: 0; } .product-info { padding: 36px 38px 28px; } .product-info strong { display: block; margin-bottom: 16px; line-height: 1; color: #333333; font-size: 20px; transition: 0.35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-info p { color: #333333; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 57px; } .product-info span { display: inline-block; margin-top: 30px; line-height: 1; color: #959595; font-size: 14px; transition: 0.35s; } .posite-menu { display: flex; justify-content: space-between; padding: 0 12.5vw; align-items: center; } .posite-menu .posite-wrap span, .posite-menu .posite-wrap b, .posite-menu .posite-wrap a { color: #666666; } .menu-levals-li { display: flex; } .menu-levals-li li { margin-right: 3.85vw; position: relative; z-index: 2; } .menu-levals-li li:before { content: ""; width: 0; height: 3px; background: #0061ae; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .menu-levals-li li:hover, .menu-levals-li li.active { color: #0061ae; } .menu-levals-li li:hover:before, .menu-levals-li li.active:before { width: 100%; right: auto; left: 0; } .menu-levals-li li:hover a, .menu-levals-li li.active a { color: #0061ae; } .menu-levals-li li:last-child { margin-right: 0; } .menu-levals-li li a { display: inline-block; position: relative; z-index: 2; color: #333333; font-size: 16px; line-height: 70px; } .solute-item { padding: 6.77vw 12.5vw; background: url(../img/solutebg.jpg) center no-repeat; background-size: cover; } .solute-item:nth-child(2n+2) { background: #fff; } .solute-item:nth-child(2n+2) a { flex-direction: row; } .solute-item a { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .solute-item a:hover figure img { transform: scale(1.05); } .solute-item a figure { display: block; line-height: 1; width: 50%; } .solute-item a figure img { max-width: 100%; width: auto; height: auto; transition: 0.68s; } .solute-info { width: 43.33%; } .solute-info strong { display: block; margin-bottom: 2.6vw; line-height: 1; color: #0061ae; font-size: 1.88vw; } .solute-info p { color: #666666; font-size: 16px; line-height: 2.2; } .solute-detail { display: flex; align-items: center; margin-top: 4.17vw; } .solute-detail span { display: inline-block; color: #0061ae; font-size: 16px; } .solute-detail i { display: inline-block; margin-left: 13px; width: 52px; height: 52px; background: url(../images/star4.png) center no-repeat; background-size: cover; } .programme-leval { position: sticky; left: 0; top: 85px; z-index: 10; display: flex; justify-content: space-between; align-items: center; background: #f9fbff; padding: 0 6.25vw; } .programme-title { position: relative; padding-left: 28px; line-height: 1; color: #0061ae; font-size: 26px; } .programme-title:before { position: absolute; left: 0; top: 50%; margin-top: -13px; content: ""; width: 6px; height: 26px; background: #0061ae; border-radius: 3px; } .programme-list { display: flex; } .programme-list li { margin-right: 3.65vw; position: relative; z-index: 2; } .programme-list li:before { content: ""; width: 0; height: 2px; background: #0061ae; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .programme-list li:hover, .programme-list li.active { color: #0061ae; } .programme-list li:hover:before, .programme-list li.active:before { width: 100%; right: auto; left: 0; } .programme-list li a { display: inline-block; line-height: 68px; color: #666666; font-size: 16px; } .programme-list li:last-child { margin-right: 0; } .case-back { padding: 5.21vw 12.5vw 5.73vw; background: url(../img/52.png) center bottom no-repeat; } .case-tops { position: relative; z-index: 2; padding-top: 21px; text-align: center; } .case-tops strong { display: block; position: relative; padding-bottom: 18px; color: #0061ae; font-size: 1.88vw; line-height: 1; } .case-tops strong:before { position: absolute; left: 50%; margin-left: -21px; bottom: 0; content: ""; width: 42px; height: 3px; background: #0061ae; } .case-tops small { display: block; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; line-height: 1; color: #0061ae; font-size: 1.88vw; text-transform: uppercase; text-align: center; opacity: 0.1; font-weight: bold; } .case-infos { margin-top: 26px; color: #666666; font-size: 16px; } .case-infos img { max-width: 100%; width: auto; height: auto; } .schemes { padding: 92px 12.5vw 86px; background: url(../img/themeBg.png) center no-repeat; background-size: cover; } .schemes-top small { color: #fff; opacity: 0.1; } .schemes-top strong { color: #fff; } .schemes-top strong:before { background: #fff; } .schemes-infos { color: #fff; } .frame { padding: 80px 12.5vw 90px; text-align: center; } .frame figure { display: block; } .frame figure img { display: inline-block; max-width: 100%; height: auto; } .frame strong { display: block; line-height: 1; margin-top: 56px; color: #333333; font-size: 24px; } .values { padding: 6.04vw 10.5vw 7.29vw; background-attachment: fixed; background-repeat: no-repeat; background-position: center; } .value-li { margin-top: 3.65vw; display: flex; justify-content: center; } .value-li li { margin-right: 6.25vw; cursor: pointer; text-align: center; } .value-li li.active p { font-weight: bold; } .value-li li b img { display: inline-block; height: 140px; } .value-li li:last-child { margin-right: 0; } .value-li li p { margin-top: -14px; color: #fff; font-size: 1.04vw; transition: 0.3s; } .values-swiper { margin-top: 3.65vw; } .values-slide { padding: 40px 0; transform: scale(0.8); transition: 0.5s; opacity: 0.6; } .values-slide.swiper-slide-active { z-index: 5; opacity: 1; transform: scale(1); } .values-slide.swiper-slide-prev .value-wrap { transform: translateX(20vw); } .values-slide.swiper-slide-next .value-wrap { transform: translateX(-20vw); } .value-wrap { padding: 3.13vw 4.17vw 2.6vw; border-bottom: 6px solid #1384eb; border-radius: 10px; background: #fff; text-align: center; } .value-wrap strong { display: block; margin-bottom: 30px; line-height: 1.2; color: #1384eb; font-size: 1.56vw; } .value-wrap p { color: #666666; font-size: 18px; line-height: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .value-btn { position: absolute; left: 10vw; right: 10vw; top: 50%; margin-top: -33px; z-index: 20; display: flex; justify-content: space-between; } .value-btn span { display: inline-block; cursor: pointer; width: 66px; height: 66px; text-align: center; line-height: 66px; color: #0061ae; background: #fff; z-index: 3; color: #4676ef; font-size: 22px; border-radius: 50%; } .venues { padding: 5.21vw 12.5vw 5.21vw; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; } .venues-list { margin-top: 65px; display: flex; flex-wrap: wrap; } .venues-list li { margin-right: 2%; position: relative; margin-bottom: 34px; width: 32%; } .venues-list li:nth-child(3n+3) { margin-right: 0; } .venues-list li:hover figure img { transform: scale(1.06); } .venues-list li figure { position: relative; display: block; padding-bottom: 62.6%; height: 0; overflow: hidden; line-height: 1; } .venues-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .venues-list li figure img { transition: 0.68s; } .venues-fix { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 3; } .venues-fix strong { display: block; margin-bottom: 12px; line-height: 1.2; color: #fff; font-size: 22px; font-weight: normal; } .venues-fix span { display: block; color: #fff; line-height: 1; font-size: 16px; } .related { padding: 5.73vw 12.5vw 6.56vw; } .related-swiper { margin-top: 68px; } .related-swiper .swiper-pagination { position: relative; bottom: 0; margin-top: 60px; height: 3px; background: #e5eff7; } .related-swiper .swiper-pagination .swiper-pagination-progressbar { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #0061ae; transform-origin: left top; } .related-slide { padding-bottom: 27px; width: 23.33vw; } .related-slide a:hover figure img { transform: scale(1.05); } .related-slide a:hover .related-info strong { color: #0061ae; } .related-slide figure { position: relative; display: block; padding-bottom: 56.37%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px 10px 0 0; } .related-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .related-slide figure img { transition: 0.65s; } .related-info { padding: 2.08vw 1.88vw 1.88vw; background: #fff; box-shadow: 0 0 27px #e7e7e7; border-radius: 0 0 10px 10px; } .related-info strong { display: block; margin-bottom: 16px; line-height: 1; color: #333333; font-size: 20px; transition: 0.35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .related-info p { color: #333333; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 56px; } .related-info span { display: inline-block; position: relative; line-height: 1.2; margin-top: 26px; color: #959595; font-size: 14px; font-weight: bold; } .cooperate { margin-top: 5.42vw; height: 11.98vw; background-position: center; background-size: cover; border-radius: 10px; display: flex; justify-content: center; align-items: center; } .cooperate strong { display: inline-block; color: #fff; font-size: 1.98vw; } .announcement { padding: 5.42vw 12.5vw 80px; } .investor-title { display: flex; align-items: flex-end; position: relative; padding-left: 30px; } .investor-title:before { position: absolute; left: 0; top: 50%; margin-top: -11px; content: ""; width: 5px; height: 23px; background: #0061ae; } .investor-title strong { display: block; line-height: 1; color: #0061ae; font-size: 26px; } .investor-title small { margin-left: 22px; display: inline-block; color: #0061ae; font-size: 16px; line-height: 1; } .announcement-wrpa { margin-top: 4.69vw; display: flex; justify-content: space-between; } .announcement-list { width: 57.22%; } .announcement-li li { border-bottom: 1px solid #f0f0f0; } .announcement-li li a { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .announcement-li li a time { display: block; color: #898989; font-size: 14px; } .announcement-li li a:hover .announcement-left strong { color: #0061ae; } .announcement-left { position: relative; padding-left: 24px; width: 70%; } .announcement-left:before { position: absolute; left: 0; top: 10px; content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0061ae; } .announcement-left strong { display: block; margin-bottom: 11px; line-height: 1.1; color: #333333; font-size: 16px; font-weight: normal; transition: 0.35s; } .announcement-left p { color: #c2c2c2; font-size: 12px; line-height: 1; } .announcement-imgs { width: 35.41%; } .announcement-imgs img { display: block; width: 100%; height: auto; } .report { padding: 84px 13.02vw 80px; background: #f3f8fd; } .report-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.6vw; } .report-slide { padding: 10px 0; } .report-wr { padding: 38px 36px 32px; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 111, 253, 0.07); } .report-wr strong { display: block; padding-bottom: 20px; line-height: 1; color: #333333; font-size: 22px; border-bottom: 1px dotted #c9dbe7; } .report-li { padding-top: 18px; } .report-li li { margin-bottom: 6px; } .report-li li a { display: flex; justify-content: space-between; align-items: center; } .report-li li a:hover { color: #0061ae; } .report-li li a p { color: #666666; font-size: 16px; transition: 0.3s; width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-li li a span { display: inline-block; color: #999999; font-size: 14px; } .report-li li a span i { display: inline-block; vertical-align: middle; margin-right: 5px; color: #0061ae; font-style: normal; font-size: 24px; } .report-li li:last-child { margin-bottom: 0; } .annual-item { margin-bottom: 45px; } .annual-top { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 54px; background: #0061ae; } .annual-top strong { color: #fff; font-size: 22px; } .annual-top i { display: inline-block; color: #fff; font-size: 20px; font-style: normal; transform: rotate(90deg); } .annual-list li { border-bottom: 1px dotted #e7eef3; } .annual-list li a { height: 49px; padding: 0 20px; align-items: center; } .annual-list li a:hover P { color: #0061ae; } .staff { padding: 5.21vw 0 5.83vw 12.5vw; } .join-staff strong { display: block; margin-bottom: 12px; line-height: 1; color: #0061ae; font-size: 2.81vw; } .join-staff p { color: #000000; font-size: 20px; } .staff-swiper { margin-top: 3.85vw; } .staff-slide figure { position: relative; display: block; padding-bottom: 67%; height: 0; overflow: hidden; line-height: 1; } .staff-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .staff-sbtns { display: flex; align-items: center; margin-top: 55px; } .staff-sbtns .swiper-pagination { flex: 1; position: relative; height: 2px; background: #e9e9e9; } .staff-sbtns .swiper-pagination .swiper-pagination-progressbar { left: 0; top: 0; width: 100%; height: 100%; background: #0061ae; transform-origin: left top; } .staff-prev { margin-right: 5.94vw; display: flex; } .staff-prev span { display: block; margin-right: 20px; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 50px; background: #eeeeee; color: #333333; cursor: pointer; transition: 0.35s; } .staff-prev span:last-child { margin-right: 0; } .staff-prev span:hover { background: #0061ae; color: #fff; } .staff-boxs { position: relative; } .staff-item { float: left; width: 100%; } .staff-item figure { position: relative; display: block; padding-bottom: 44.79%; height: 0; overflow: hidden; line-height: 1; } .staff-item figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .staff-infos { position: absolute; left: 13.02vw; bottom: 4.48vw; z-index: 10; } .staff-text { margin-bottom: 3.85vw; width: 600px; } .staff-text strong { display: block; margin-bottom: 36px; line-height: 1; color: #fff; font-size: 2.71vw; } .staff-text p { color: #fff; font-size: 18px; } .staff-arrow { margin-bottom: 4.58vw; display: flex; } .staff-arrow span { display: inline-block; margin-right: 20px; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 15px; cursor: pointer; text-align: center; line-height: 46px; transition: 0.35s; font-weight: bold; } .staff-arrow span:hover { background: #fff; color: #0061ae; } .staff-min-imgs { display: flex; } .staff-min-item { margin-right: 1.46vw; width: 12.6vw; cursor: pointer; } .staff-min-item figure { position: relative; display: block; padding-bottom: 45.04%; height: 0; overflow: hidden; line-height: 1; } .staff-min-item figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .responsibility { padding: 4.9vw 12.5vw 6.25vw; } .responsibility-swiper { margin-top: 32px; } .responsibility-item { display: flex; } .responsibility-imgs { width: 50%; } .responsibility-imgs figure { position: relative; display: block; padding-bottom: 62.5%; height: 0; overflow: hidden; line-height: 1; } .responsibility-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .responsibility-info { box-sizing: border-box; width: 50%; padding: 3.85vw 3.54vw 0; background: #faf8f8; } .responsibility-info strong { display: block; margin-bottom: 2.08vw; line-height: 1.1; color: #333333; font-size: 1.56vw; } .responsibility-info span { display: block; margin-bottom: 18px; color: #333333; font-size: 18px; font-weight: bold; } .responsibility-info p { color: #333333; font-size: 16px; } .responsibbtn { position: absolute; left: 50%; margin-left: -48px; bottom: 0; z-index: 10; display: flex; } .responsibbtn span { display: inline-block; width: 48px; height: 48px; text-align: center; line-height: 48px; background: #7f7f7f; color: #fff; font-size: 16px; cursor: pointer; transition: 0.35s; } .responsibbtn span:hover { background: #0061ae; } .responsibbtn span:first-child { margin-right: 1px; } .responnumble { position: absolute; right: 3.65vw; bottom: 4.43vw; line-height: 1; z-index: 10; display: flex; align-items: flex-end; color: #333333; font-size: 16px; } .responnumble span { position: relative; top: 2px; margin-right: 6px; font-size: 1.56vw; } .responnumble b { margin-left: 4px; font-weight: normal; } .social-recuite { display: flex; } .social-item { position: relative; width: 50%; } .social-item figure { position: relative; display: block; padding-bottom: 41.66%; height: 0; overflow: hidden; line-height: 1; } .social-item figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .social-item figure img { transition: 0.78s; } .social-item:hover figure img { transform: scale(1.06); } .social-text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; } .social-text strong { position: relative; margin-bottom: 20px; display: inline-block; line-height: 1; color: #fff; font-size: 36px; } .social-text strong i { display: inline-block; position: absolute; left: 100%; margin-left: 10px; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; text-align: center; line-height: 32px; color: #fff; font-size: 14px; } .social-text small { display: block; line-height: 1; color: #fff; font-size: 20px; } .recuitement-in { position: absolute; left: 50%; margin-left: -37.5vw; top: 50%; transform: translateY(-50%); width: 75vw; text-align: center; } .recuitement-in strong { display: block; margin-bottom: 20px; line-height: 1.2; color: #fff; font-size: 2.29vw; font-weight: normal; } .recuitement-in p { color: #fff; font-size: 16px; line-height: 2.2; } .recuite-btns { position: absolute; left: 0; bottom: 8.85vw; z-index: 4; display: flex; justify-content: center; width: 100%; } .recuite-btns a { display: inline-block; width: 210px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 16px; background: #00477f; } .recuite-btns a:hover, .recuite-btns a.active { background: #0061ae; } .select-recuites { padding: 4.17vw 12.5vw 5.73vw; } .recuite-top { margin-bottom: 40px; text-align: center; } .recuite-top h3 { display: block; margin-bottom: 42px; color: #333333; font-size: 34px; font-weight: normal; } .recuite-top p { color: #999999; font-size: 16px; } .select-list { display: flex; justify-content: space-between; margin-bottom: 2.29vw; } .select-item { box-sizing: border-box; padding-left: 16px; height: 60px; line-height: 58px; width: 23.61%; color: #cacaca; font-size: 16px; border: 1px solid #d2d2d2; outline: none; background: url(../images/arrow1.png) 93% center no-repeat; } .recuite-name, .recuite-line { display: flex; align-items: center; height: 76px; background: #f4f4f4; } .recuite-name span, .recuite-line span { display: inline-block; color: #333333; font-size: 18px; } .recuite-name span:first-child, .recuite-line span:first-child { padding-left: 1.98vw; box-sizing: border-box; width: 26.11%; } .recuite-name span:nth-child(2), .recuite-line span:nth-child(2) { width: 80px; text-align: center; } .recuite-name span:nth-child(3), .recuite-line span:nth-child(3) { margin-left: 13.8vw; width: 116px; text-align: center; } .recuite-name span:nth-child(4), .recuite-line span:nth-child(4) { margin-left: 4.17vw; flex: 1; text-align: center; } .recuite-name span:nth-child(4) i, .recuite-line span:nth-child(4) i { display: inline-block; position: absolute; right: 2.29vw; top: 50%; margin-top: -7px; color: #333333; font-size: 14px; line-height: 1; transform: rotate(90deg); } .recuite-li li { position: relative; } .recuite-li li:nth-child(2n+2) .recuite-line { background: #f4f4f4; } .recuite-li li:hover .recuite-line, .recuite-li li.active .recuite-line { background: #0061ae; } .recuite-li li:hover .recuite-line span, .recuite-li li.active .recuite-line span { color: #fff; } .recuite-li li:hover .recuite-line span i, .recuite-li li.active .recuite-line span i { color: #fff; } .recuite-line { background: none; transition: 0.4s; cursor: pointer; } .recuite-line span { transition: 0.4s; } .recuite-hide { display: flex; border: 1px solid #0061ae; display: none; } .recuite-wr { display: flex; } .recuite-item { box-sizing: border-box; padding: 42px 36px 46px; width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .recuite-infos { color: #333333; font-size: 16px; } .recuite-infos strong { display: block; margin-bottom: 12px; } .recuite-dy { margin-top: 33px; color: #333333; font-size: 16px; } .product-tts { position: relative; z-index: 3; } .product-tts:before { position: absolute; left: 50%; margin-left: -190px; bottom: 28px; z-index: -1; content: ""; width: 381px; height: 88px; background: url(../images/productTitle.png) center no-repeat; } .product-tts strong { display: block; position: relative; padding-bottom: 33px; line-height: 1; color: #0061ae; text-align: center; font-size: 1.88vw; } .product-tts strong i { display: block; position: absolute; left: 50%; margin-left: -34px; bottom: 0; width: 68px; height: 3px; } .product-tts strong i:before, .product-tts strong i:after { position: absolute; top: 0; left: 0; content: ""; width: 49%; height: 100%; background: #0061ae; } .product-tts strong i:after { left: auto; right: 0; background: #f6ad02; } .product-tts1 strong { color: #fff; } .product-tts1 strong i:before { background: #fff; } .product-introduct { background: url(../img/probg1.png) center bottom no-repeat; background-size: cover; padding: 7.29vw 12.5vw 11.09vw; } .product-introduct .schemes-infos { margin-top: 3.96vw; font-size: 18px; } .ability { padding: 5.99vw 12.5vw 5.99vw; } .product-frame { margin-top: 4.69vw; } .frame-title { position: relative; height: 64px; background: #0061ae; color: #fff; font-size: 26px; font-weight: bold; text-align: center; line-height: 64px; } .frame-title:before { position: absolute; left: 50%; margin-left: -13px; bottom: -13px; content: ""; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 13px solid #0061ae; } .frame-imgs { margin-top: 4.69vw; } .frame-imgs img { max-width: 100%; width: auto; height: auto; } .frame-list { margin-top: 5.99vw; display: flex; flex-wrap: wrap; } .frame-items { margin-right: 2.6%; margin-bottom: 30px; padding: 1.88vw 1.98vw; box-sizing: border-box; width: 31.6%; border: 1px solid #dadae2; border-radius: 5px; } .frame-items:nth-child(3n+3) { margin-right: 0; } .frame-items:hover figure img { transform: scale(1.06); } .frame-items figure { position: relative; display: block; padding-bottom: 56.31%; height: 0; overflow: hidden; line-height: 1; border-radius: 5px; } .frame-items figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .frame-items figure img { transition: 0.65s; } .frame-in { margin-top: 2.29vw; } .frame-in strong { display: block; margin-bottom: 25px; text-align: center; line-height: 1; color: #333333; font-size: 26px; } .frame-in p { color: #333333; font-size: 18px; } .analysis-fix { position: relative; padding: 75px 12.5vw 4.69vw; background: #f4fcff; } .analysis-wraps { position: relative; } .analysis-wraps .swiper-wrapper { text-align: center; } .analysis-slide { display: inline-block; width: 25%; height: auto; } .analysis-wrap { padding: 2.08vw 1.98vw 3.33vw; box-sizing: border-box; height: 100%; background: #fff; border: 1px solid #eaeaf4; border-radius: 5px; border-bottom: 6px solid #0061ae; text-align: center; } .analysis-wrap strong { display: block; margin-bottom: 30px; line-height: 1; color: #333333; font-size: 24px; } .analysis-wrap p { color: #333333; font-size: 18px; } .adnys-common { position: absolute; left: -6.25vw; right: -6.25vw; display: flex; justify-content: space-between; top: 50%; margin-top: -33px; } .adnys-common span { display: block; width: 66px; height: 66px; border-radius: 50%; background: #fff; text-align: center; line-height: 66px; color: #afc1f7; font-size: 18px; box-shadow: 0 0 13px rgba(63, 116, 254, 0.1); cursor: pointer; transition: 0.4s; } .adnys-common span:hover { background: #0061ae; color: #fff; } .advatages { padding: 6.56vw 12.5vw 90px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .advatages-wrap { position: relative; margin-top: 76px; } .advatages-wrap .swiper-pagination { position: relative; margin-top: 4.17vw; } .advatages-wrap .swiper-pagination .swiper-pagination-bullet { margin: 0 15px; width: 10px; height: 10px; opacity: 1; background: #fff; cursor: pointer; } .advatages-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #f6ad02; } .advatages-slide { padding: 46px 28px 18px 2.6vw; box-sizing: border-box; background: #fff; border-radius: 6px; text-align: center; } .advatages-slide strong { display: block; position: relative; padding-bottom: 26px; margin-bottom: 20px; line-height: 1; color: #0061ae; font-size: 1.46vw; } .advatages-slide strong:before { position: absolute; left: 50%; margin-left: -18px; bottom: 0; content: ""; width: 36px; height: 2px; background: #0061ae; } .advatages-slide img { width: auto; height: 172px; } .advatages-info { padding-right: 1.04vw; color: #333333; font-size: 20px; height: 145px; overflow-y: auto; text-align: left; } .advatages-info::-webkit-scrollbar { width: 2px; height: 2px; background-color: #e5e5e5; } .advatages-info::-webkit-scrollbar-track { background-color: #e5e5e5; } .advatages-info::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #116fd7; } .advantage-numble { position: relative; margin-top: 15px; } .advantage-numble b { display: block; position: absolute; width: 100%; left: 0; top: 50px; line-height: 1; color: #fff; font-size: 28px; font: "JQZongYiFT"; } .advatages-btn span { background: rgba(255, 255, 255, 0.5); color: #0061ae; } .views-case { width: 100%; } .views-prev { margin-top: 54px; } .views-prev p { margin-bottom: 8px; } .views-prev p a { display: inline-block; color: #272828; font-size: 16px; } .views-prev p a:hover { color: #0061ae; } .search-li .announcement-left:before { top: 50%; margin-top: -3px; } .search-li .announcement-left strong { margin-bottom: 0; } .inner-pbanner { position: relative; } .search-result { position: absolute; left: 12.5vw; bottom: 24px; color: #fff; font-size: 20px; z-index: 3; } .culture-swiper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .culture-slide { position: relative; height: 100%; } .culture-slide figure { display: block; height: 100%; } .culture-slide figure img { width: 100%; height: 100%; object-fit: cover; } .culture-btn { position: absolute; left: 130px; right: 130px; display: flex; justify-content: space-between; z-index: 10; top: 50%; margin-top: -26px; }