@charset "utf-8"; .clearfix { zoom: 1; } .clearfix:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } .marginauto { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; } .linenowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flexCetween { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; } .flexAlign { display: flex; display: -webkit-flex; display: -moz-flex; align-items: center; -webkit-align-items: center; } .header { position: fixed; left: 0; top: 0; z-index: 99; width: 100%; } .header.scroll .header-wrap, .header.innerbg .header-wrap, .header:hover .header-wrap { background: #fff; } .header.scroll .navs > li.active > a, .header.innerbg .navs > li.active > a, .header:hover .navs > li.active > a, .header.scroll .navs > li:hover > a, .header.innerbg .navs > li:hover > a, .header:hover .navs > li:hover > a { color: #0097e0; } .header.scroll .navs > li > a, .header.innerbg .navs > li > a, .header:hover .navs > li > a { color: #666666; } .header.scroll .navs > li > a:before, .header.innerbg .navs > li > a:before, .header:hover .navs > li > a:before { background: #0097e0; box-sizing: border-box; border-top: 2px solid #0097e0; } .header.scroll .header__search, .header.innerbg .header__search, .header:hover .header__search { border-right: 1px solid rgba(0, 0, 0, 0.2); } .header.scroll .header__search a, .header.innerbg .header__search a, .header:hover .header__search a { color: #818181; } .header.scroll .header__search a:hover, .header.innerbg .header__search a:hover, .header:hover .header__search a:hover { color: #0097e0; } .header.scroll .lang-defaul span, .header.innerbg .lang-defaul span, .header:hover .lang-defaul span, .header.scroll .lang-defaul i, .header.innerbg .lang-defaul i, .header:hover .lang-defaul i { color: #666666; } .header-wrap { padding: 0 60px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: 0.4s; } .logo { display: block; line-height: 1; width: auto; } .logo img { display: block; width: auto; height: 49px; } .header-right { display: flex; align-items: center; } .navs { display: flex; } .navs > li { margin-right: 2.8125vw; } .navs > li:last-child { margin-right: 0; } .navs > li:hover > a:before, .navs > li.active > a:before { transform: scaleX(1); visibility: visible; } .navs > li > a { display: inline-block; position: relative; padding: 0 2px; color: #fff; font-size: 16px; height: 80px; line-height: 80px; } .navs > li > a:before { position: absolute; left: 0; bottom: -2px; content: ""; width: 100%; height: 3px; background: #fff; border-radius: 2px; transform: scaleX(0); transition: 0.4s; } .navs-menu { position: absolute; left: 0; top: 100%; width: 100%; background: #fff; display: none; } .navs-wrap { display: flex; justify-content: space-between; } .navs-left { position: relative; display: flex; justify-content: flex-end; z-index: 2; width: 28.6458vw; background: linear-gradient(to right, #fff 0%, #fff 64%, #d5e9f7 100%); } .navs-leftwr { margin-right: 2.6042vw; } .navs-li { padding-left: 38px; padding-top: 53px; padding-bottom: 3.4375vw; border-bottom: 1px solid #e0e0e0; box-sizing: border-box; min-height: 340px; } .navs-li li { margin-bottom: 10px; } .navs-li li a { display: inline-block; color: #333333; font-size: 16px; } .navs-li li a:hover { color: #0097e0; } .header__search { position: relative; } .header__search:hover .search__down { opacity: 1; visibility: visible; pointer-events: visible; } .search__down { position: absolute; right: 0; top: 100%; padding-top: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.4s; } .search__down .text { box-sizing: border-box; padding-left: 12px; width: 180px; height: 40px; line-height: 40px; background: #fff; border: none; color: #000; font-size: 14px; } .search__down .text:focus::-webkit-input-placeholder { opacity: 0; visibility: hidden; } .search__down .sub { position: absolute; right: 0; top: 20px; width: 40px; height: 40px; background: none; outline: none; border: none; line-height: 40px; text-align: center; color: #171a1d; font-size: 18px; transition: 0.4s; cursor: pointer; } .search__down .sub:hover { color: #0097e0; } .header__wrs { display: flex; align-items: center; } .language { position: absolute; left: 0; top: 0; padding: 136px 124px 68px; width: 100%; background: rgba(255, 255, 255, 0.9); box-sizing: border-box; font-family: "Geometric 415"; display: none; } .language h3 { display: block; font-weight: 500; color: #333333; font-size: 24px; } .language-list { margin-top: 30px; display: flex; } .language-list li { margin-right: 10.4167vw; } .language-list li:last-child { margin-right: 0; } .language-list li:hover a, .language-list li.active a { color: #0097e0; } .language-list li a { display: inline-block; color: #999999; font-size: 20px; font-weight: 400; } .header-tel { padding: 30px 0 30px 64px; background: url(../images/tel1.png) left center no-repeat; } .header-tel p { margin-bottom: 10px; line-height: 1; color: #0097e0; font-size: 14px; } .header-tel b { display: block; position: relative; left: 0; line-height: 1; color: #0097e0; font-size: 30px; font-weight: bold; } .navs-info { width: 0; flex: 1; padding-top: 48px; background-position: right center; background-repeat: no-repeat; background-size: auto 100%; } .navs-text { margin-left: 4.1667vw; width: 440px; } .navs-text strong { display: block; margin-bottom: 40px; color: #333333; font-size: 28px; font-weight: normal; line-height: 1.2; } .navs-text p { color: #666666; font-size: 16px; } .navs-more { margin-top: 2.3438vw; } .navs-more a { display: inline-flex; align-items: center; justify-content: center; padding: 0 30px; background: #0097e0; height: 38px; } .navs-more a:hover i { left: 3px; } .navs-more a span { display: inline-block; color: #fff; font-size: 16px; } .navs-more a i { display: inline-block; position: relative; left: 0; margin-left: 10px; font-style: normal; color: #fff; font-size: 16px; transition: 0.25s; } .header-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: rgba(0, 0, 0, 0.35); pointer-events: none; display: none; } .loaders { position: fixed; left: 0; top: 0; z-index: 299; background: #fff; width: 100%; height: 100%; display: none; } .loaders.active { animation: circleScale 0.8s 2s linear forwards; } .loaders.active .loaders-line:before { clip-path: inset(0 0 0 0); } .loaders.active .loaders-line:after { clip-path: inset(0 0 0 0); transition-delay: 0.8s; } .loaders-line { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; } .loaders-line:before, .loaders-line:after { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; } .loaders-line:before { z-index: -2; background: url(../img/loadbg.png) center no-repeat; background-size: cover; clip-path: inset(100% 0 0 0); transition: 1.5s; } .loaders-line:after { z-index: -1; background: url(../img/loadbg1.png) center no-repeat; background-size: cover; clip-path: inset(100% 0 0 0); transition: 2s; } @keyframes circleScale { from { clip-path: circle(100% at center); } to { clip-path: circle(0% at center); } } .loader-text { position: absolute; left: 0; top: 65%; transform: translateY(-50%); z-index: 3; width: 100%; text-align: center; } .loader-text img { display: inline-block; width: auto; height: 99px; } .loader-numble { display: flex; justify-content: center; align-items: flex-end; margin-top: 5.3125vw; font-family: "Avian"; } .loader-numble b { display: block; line-height: 1; color: #076ab4; font-size: 60px; font-weight: normal; } .loader-numble span { margin-left: 10px; display: inline-block; color: #076ab4; font-size: 26px; } .header__search { margin-left: 2.0833vw; padding-right: 1.3542vw; border-right: 1px solid rgba(255, 255, 255, 0.3); line-height: 1; } .header__search a { display: inline-block; color: #fff; font-size: 18px; line-height: 20px; } .header__search a:hover { color: #0097e0; } .lang { margin-left: 18px; } .lang-defaul { display: flex; align-items: center; cursor: pointer; } .lang-defaul img { display: inline-block; width: auto; height: 20px; } .lang-defaul span { display: inline-block; margin-left: 6px; margin-right: 8px; color: #fff; font-size: 16px; transition: 0.25s; } .lang-defaul i { display: inline-block; color: #fff; font-size: 12px; line-height: 1; transform: scale(0.8); transition: 0.25s; } .banner { position: static; overflow: hidden; } .banner .swiper-pagination { left: 9.375vw; width: auto; bottom: 4.4792vw; line-height: 1; } .banner .swiper-pagination .swiper-pagination-bullet { margin: 0; margin-right: 28px; width: 22px; height: 5px; border-radius: 3px; background: #fff; opacity: 0.5; transition: 0.4s; } .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .banner .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .banner-slide { overflow: hidden; position: relative; } .banner-slide a { display: block; } .banner-slide.swiper-slide-active figure img { animation-name: centerBig; animation-delay: 0s; } .banner-slide.swiper-slide-active .btext p, .banner-slide.swiper-slide-active .btext strong, .banner-slide.swiper-slide-active .btext small { opacity: 1; visibility: visible; transform: translateY(0); } .banner-slide.swiper-slide-active .btext strong { transition-delay: 0.3s; } .banner-slide.swiper-slide-active .btext small { transition-delay: 0.7s; } .banner-slide figure { display: block; height: 100vh; overflow: hidden; line-height: 1; } .banner-slide figure img { display: block; position: relative; width: 100%; height: 100%; object-fit: cover; animation-duration: 6s; animation-timing-function: linear; animation-fill-mode: forwards; -webkit-animation-duration: 6s; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-delay: 0s; -webkit-animation-delay: 0s; } .bhide { overflow: hidden; margin-bottom: 24px; } .bhide:last-child { margin-bottom: 0; } .btext { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; z-index: 5; } .btext p { line-height: 1; color: #fff; font-size: 26px; opacity: 0; transform: translateY(120%); transition: 0.68s 0.5s; } .btext strong { display: block; line-height: 1.1; color: #fff; font-size: 3.6458vw; opacity: 0; transform: translateY(130%); transition: 0.8s 0.5s; } .btext small { display: block; line-height: 1.2; color: #fff; font-size: 26px; text-transform: uppercase; opacity: 0; transform: translateY(110%); transition: 0.68s 0.5s; } .leftUp img { -webkit-animation-name: leftUp; animation-name: leftUp; } @-webkit-keyframes leftUp { 0% { transform: scale(1.1, 1.1) translate(4.545%, 4.545%); } 100% { transform: scale(1.1, 1.1) translate(-4.545%, -4.545%); } } @keyframes leftUp { 0% { transform: scale(1.1, 1.1) translate(4.545%, 4.545%); } 100% { transform: scale(1.1, 1.1) translate(-4.545%, -4.545%); } } .moveRight img { -webkit-animation-name: moveRight; animation-name: moveRight; } @-webkit-keyframes moveRight { 0% { transform: scale(1.1, 1.1) translate(-4.545%, 0); } 100% { transform: scale(1.1, 1.1) translate(4.545%, 0); } } @keyframes moveRight { 0% { transform: scale(1.1, 1.1) translate(-4.545%, 0); } 100% { transform: scale(1.1, 1.1) translate(4.545%, 0); } } .moveDown img { -webkit-animation-name: moveDown; animation-name: moveDown; } @-webkit-keyframes moveDown { 0% { transform: scale(1.1, 1.1) translate(0, -4.545%); } 100% { transform: scale(1.1, 1.1) translate(0, 4.545%); } } @keyframes moveDown { 0% { transform: scale(1.1, 1.1) translate(0, -4.545%); } 100% { transform: scale(1.1, 1.1) translate(0, 4.545%); } } .centerBig img { -webkit-animation-name: centerBig; animation-name: centerBig; } @-webkit-keyframes centerBig { 100% { transform: scale(1.1, 1.1); } } @keyframes centerBig { 100% { transform: scale(1.1, 1.1); } } .rightDownBig img { -webkit-animation-name: rightDownBig; animation-name: rightDownBig; } @-webkit-keyframes rightDownBig { 100% { transform: scale(1.1, 1.1) translate(4%, 4%); } } @keyframes rightDownBig { 100% { transform: scale(1.1, 1.1) translate(4%, 4%); } } .business { padding: 0 60px; } .enter-top { text-align: center; padding: 52px 0 56px; } .enter { display: inline-flex; align-items: center; padding: 16px 20px 16px 46px; background: #eef9ff; border-radius: 38px; } .enter figure { display: block; line-height: 1; } .enter figure img { display: inline-flex; width: auto; height: 50px; } .enter-href { margin-left: 3.8021vw; } .enter-href a { display: block; width: 152px; height: 44px; line-height: 44px; border-radius: 22px; color: #fff; font-size: 16px; font-weight: bold; background: linear-gradient(to right, #2d73d8 0%, #109bee 100%); } .industry { position: relative; z-index: 2; padding: 74px 12.2917vw; overflow: hidden; box-sizing: border-box; } .industry-bg { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: url(../img/industrybg.png) center no-repeat; background-size: cover; border-radius: 5.2083vw; } .industry-row { display: flex; justify-content: center; align-items: flex-start; } .industry-row.article-block .industry-item { position: absolute; transition: all 0.5s ease-out 0s; } .industry-row.article-block .industry-item a { display: block; opacity: 0; transform: scale(0); transition: all 0.6s ease-out; } .industry-row.article-block .industry-item1 { left: 50%; top: 50%; transform: translate(-50%, -50%); transition-delay: 0s; } .industry-row.article-block .industry-item2 { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; } .industry-row.article-block .industry-item3 { right: 50%; top: 50%; transform: translate(50%, -50%); } .industry-row.article-block .industry-item4 { left: 50%; bottom: 50%; transform: translate(-50%, 50%); } .industry-row.article-block .industry-item5 { left: 50%; bottom: 50%; margin-left: 0; transform: translate(-50%, 50%); } .industry-row.article-block .industry-item6 { right: 50%; bottom: 50%; transform: translate(50%, 50%); } .industry-row.articleShow .industry-item { transition: all 0.7s ease-out 0.3s; } .industry-row.articleShow .industry-item a { opacity: 1; transform: scale(1); transition-delay: 1s; } .industry-row.articleShow .industry-item1 { left: 3.3%; top: 0; transform: translate(0%, 0%); transition-delay: 1.2s; } .industry-row.articleShow .industry-item2 { left: 50%; top: 0; margin-left: -14.11%; transform: translate(0%, 0%); transition-delay: 1.2s; } .industry-row.articleShow .industry-item3 { right: 3.3%; top: 0; transform: translate(0%, 0%); transition-delay: 1.2s; } .industry-row.articleShow .industry-item4 { left: 0; bottom: 8.88%; transform: translate(0%, 0%); transition-delay: 1.2s; } .industry-row.articleShow .industry-item5 { width: 24.77%; left: 50%; margin-left: -12.38%; bottom: 0; transform: translate(0%, 0%); transition-delay: 1.2s; } .industry-row.articleShow .industry-item6 { right: 0; bottom: 8.88%; transform: translate(0%, 0%); transition-delay: 1.2s; } .industry-row.articleShow .industry-item:nth-child(1), .industry-row.articleShow .industry-item:nth-child(3) { margin-top: 6.3542vw; width: 24.77%; } .industry-item { position: absolute; width: 28.22%; overflow: hidden; border-radius: 10px; } .industry-item a:hover figure { transform: scale(1.06); } .industry-item figure { z-index: 2; border-radius: 10px; position: relative; display: block; padding-bottom: 75%; height: 0; overflow: hidden; line-height: 1; transition: 0.68s; } .industry-item figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .industry-item figure:before { position: absolute; left: 0; top: 0; z-index: 1; content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7)); } .industry-item strong { position: absolute; left: 4px; right: 4px; bottom: 26px; z-index: 3; text-align: center; line-height: 1.2; color: #fff; font-size: 20px; font-weight: normal; } .industry-down .industry-item:nth-child(1), .industry-down .industry-item:nth-child(3) { margin-top: 0; } .industry-down .industry-item:nth-child(2) { margin: 0 6.9792vw; margin-top: 6.25vw; width: 24.77%; } .industry-list { position: relative; margin-bottom: 3.2292vw; padding-bottom: 42.1875vw; } .industry-more { text-align: center; } .industry-more a { display: inline-block; position: relative; z-index: 3; overflow: hidden; width: 150px; height: 42px; line-height: 42px; border-radius: 22px; color: #f7ab00; font-size: 16px; border: 1px solid #f7ab00; } .industry-more a:hover { color: #fff; } .industry-more a:hover:before { width: 100%; } .industry-more a:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: #f7ab00; width: 0; transition: 0.5s; } .industry-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 1.5vw; transition: 0.5s; } .industry-logo img { display: inline-block; width: auto; height: 5vw; } .introduct { position: relative; z-index: 2; padding: 15.73vw 0 0; } .introduct-scroll { height: auto; } .introduct-vh { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 60px; text-align: center; } .introduct-wrap { margin: auto; height: auto; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 1224px; background-image: url(../img/industrybg.png); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 5.21vw; will-change: transform; } .introduct-top { margin: auto; max-width: 80%; width: 1224px; margin-bottom: 60px; text-align: center; } .introduct-time { display: flex; justify-content: center; align-items: center; margin-bottom: 3.23vw; } .introduct-time strong { display: inline-block; margin-right: 24px; color: #171a1d; font-size: 3.13vw; line-height: 1; font-weight: normal; } .introduct-line { position: absolute; left: 0; top: 4vw; z-index: 3; width: 88.54vw; pointer-events: none; } .introduct-line.article-block svg { clip-path: inset(0 100% 0 0); transition: 3s; } .introduct-line.articleShow svg { clip-path: inset(0 0 0 0); } .introduct-line img { display: inline-block; width: 100%; height: auto; } .introduct-line svg { width: 100%; } .introduct-year { display: flex; padding: 0 35px; height: 94px; align-items: center; line-height: 1; border-radius: 50px; background: linear-gradient(to right, #2d73d8 0%, #109bee 100%); color: #fff; font-size: 27px; } .introduct-year time { display: inline-block; margin-right: 14px; position: relative; top: 3px; line-height: 1; color: #fff; font-size: 3.02vw; font-weight: normal; font-family: "Neutraface 2 Display Titling"; } .introduct-info { color: #171a1e; font-size: 1.35vw; line-height: 2.3; } .introduct-data { padding: 7.29vw 0 3.85vw; position: relative; z-index: 3; } .introduct-data .industry-more { margin-top: 0; } .introduct-data-list { display: flex; justify-content: center; padding-left: 3.13vw; margin-bottom: 5.63vw; } .introduct-data-item { width: 15.94vw; } .introduct-data-item:last-child { width: auto; } .introduct-data-item p { margin-bottom: 16px; line-height: 1; color: #fff; font-size: 16px; } .introduct-data-item p b { display: inline-block; margin-right: 8px; color: #fff; font-size: 3.13vw; line-height: 1; font-weight: normal; font-family: "Geometric 415"; } .introduct-data-item span { display: block; line-height: 1; color: #fff; font-size: 16px; } .introbg1 { position: absolute; left: 0; top: -9.69vw; width: 17.19vw; height: 56.35vw; background: url(../img/shadow1.png) center no-repeat; background-size: cover; z-index: -1; } .introbg2 { position: absolute; left: 0; bottom: -14.79vw; width: 23.44vw; height: 30.42vw; background: url(../img/shadow2.png) center no-repeat; background-size: cover; } .introbg3 { position: absolute; left: 16.67vw; top: 10.31vw; z-index: -1; width: 27.5vw; height: 27.5vw; background: url(../img/shadow3.png) center no-repeat; background-size: cover; } .introbg4 { position: absolute; right: 0; bottom: -30.83vw; z-index: -1; width: 20.16vw; height: 58.44vw; background: url(../img/shadow4.png) center no-repeat; background-size: cover; } .introbg5 { position: absolute; right: 0; top: 14.79vw; z-index: -1; width: 15.21vw; height: 16.67vw; background: url(../img/shadow5.png) center no-repeat; background-size: cover; } .news-center-item { display: none; } .news-center-item:first-child { display: block; } .news-center { position: relative; z-index: 4; padding: 7.81vw 9.38vw 6.15vw; } .news-center-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4.17vw; } .news-title { display: block; line-height: 1; color: #0097e0; font-weight: normal; font-size: 3.13vw; } .news-center-class { display: flex; align-items: center; } .news-center-btn { display: flex; } .news-center-btn li { margin-right: 46px; color: #999999; font-size: 20px; cursor: pointer; transition: color 0.2s; } .news-center-btn li:hover, .news-center-btn li.active { color: #f7ab00; font-weight: bold; } .news-center-t { display: flex; justify-content: space-between; align-items: flex-start; } .news-center-info { position: relative; width: 48.2%; } .news-center-info:hover figure img { transform: scale(1.05); } .news-center-info figure { position: relative; display: block; padding-bottom: 62.666%; height: 0; overflow: hidden; line-height: 1; border-radius: 1.88vw; } .news-center-info figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-center-info figure img { transition: 0.68s; } .news-center-info figure:before { position: absolute; left: 0; top: 0; z-index: 2; content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 151, 224, 0) 0%, rgba(0, 151, 224, 0) 50%, rgba(0, 151, 224, 0.9) 100%); } .news-center-time { position: absolute; left: 1.67vw; right: 1.67vw; bottom: 1.67vw; z-index: 3; } .news-center-time strong { display: block; margin-bottom: 18px; line-height: 1.1; color: #fff; font-size: 1.25vw; font-weight: normal; } .news-center-time time { display: block; line-height: 1; color: #fff; font-size: 14px; } .news-center-right { width: 48.07%; margin-top: -1.46vw; } .news-c-list li { border-bottom: 1px solid #dddddd; } .news-c-list li a { display: flex; justify-content: space-between; align-items: center; padding: 1.46vw 0; } .news-c-list li a:hover .news-c-in strong { color: #0097e0; } .news-c-list li a:hover .news-c-imgs figure img { transform: scale(1.1); } .news-c-in { flex: 1; width: 0; margin-right: 40px; } .news-c-in strong { display: block; margin-bottom: 1.25vw; line-height: 1.2; color: #000000; font-size: 1.25vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s; } .news-c-in time { display: block; position: relative; z-index: 2; margin-bottom: 8px; line-height: 1; color: #333333; font-size: 14px; } .news-c-in time:before { position: absolute; left: 0; top: -16px; z-index: -1; content: ""; width: 34px; height: 34px; border-radius: 50%; background: #eef7fd; } .news-c-in p { line-height: 1.2; color: #333333; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-c-imgs { width: 23.2%; } .news-c-imgs figure { position: relative; display: block; padding-bottom: 62.64%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .news-c-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-c-imgs figure img { transition: 0.65s; } .news-center-fix { margin-top: 2.81vw; } .news-center-list { display: flex; flex-wrap: wrap; } .news-center-list li { margin-right: 4%; width: 48%; border-bottom: 1px solid #dddddd; } .news-center-list li:nth-child(2n+2) { margin-right: 0; } .news-center-list li a { display: flex; justify-content: space-between; align-items: center; padding: 1.46vw 0; } .news-center-list li a:hover strong { color: #0097e0; } .news-center-list li a strong { display: block; margin-right: 20px; width: 0; flex: 1; color: #000000; font-size: 16px; font-weight: normal; line-height: 1.2; transition: 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-center-list li a time { display: block; line-height: 1; color: #999999; font-size: 16px; } .join { padding: 0 60px 135px; position: relative; z-index: 3; } .join-fix { padding: 8.33vw 6.25vw 7.4vw; border-radius: 4.79vw; position: relative; overflow: hidden; } .join-bg { position: absolute; left: 0; top: 0; width: 100%; height: 120%; z-index: -1; background-position: center; background-repeat: no-repeat; background-size: cover; } .join-bg:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; z-index: 3; background: rgba(0, 0, 0, 0.5); } .join-bg video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .join-wrap { width: 565px; } .join-wrap strong { display: block; margin-bottom: 28px; line-height: 1; color: #fff; font-size: 3.13vw; font-weight: normal; } .join-wrap p { margin-bottom: 2.29vw; color: #fff; font-size: 20px; } .join-wrap .industry-more { text-align: left; } .join-wrap .industry-more a { text-align: center; } .footer { position: relative; z-index: 3; } .footer-top { position: relative; z-index: 2; padding: 0 9.38vw; background-size: cover; background-repeat: no-repeat; background-position: center; } .footer-top:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: rgba(7, 106, 180, 0.94); } .footer-menu { padding: 5vw 0 3.65vw; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.11); } .footer-menu-item { flex: 1; padding-right: 12px; display: block; } .footer-menu-item:last-child { padding-right: 0; flex: none; } .footer-menu-item dt { display: block; margin-bottom: 22px; } .footer-menu-item dt a { display: inline-block; position: relative; z-index: 2; color: #fff; line-height: 1; font-size: 16px; font-weight: bold; } .footer-menu-item dd { display: block; } .footer-menu-item dd p { margin-bottom: 8px; } .footer-menu-item dd p a { display: inline-block; position: relative; z-index: 2; color: #fff; font-size: 16px; } .footer-menu-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-menu-item dd p a:hover, .footer-menu-item dd p a.active { color: #fff; } .footer-menu-item dd p a:hover:before, .footer-menu-item dd p a.active:before { width: 100%; right: auto; left: 0; } .footer-address { padding: 2.19vw 0 1.98vw; display: flex; justify-content: space-between; } .footer-address-li p { margin-bottom: 8px; color: #fff; font-size: 15px; font-weight: bold; } .footer-navs { display: flex; } .footer-navs li { margin-right: 16px; position: relative; } .footer-navs li:last-child:after { display: none; } .footer-navs li:after { position: absolute; right: -9px; top: 50%; margin-top: -8px; content: ""; width: 2px; height: 16px; background: #fff; } .footer-navs li a { display: inline-block; position: relative; z-index: 2; color: #fff; font-size: 15px; font-weight: bold; } .footer-navs li a:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .footer-navs li a:hover, .footer-navs li a.active { color: #fff; } .footer-navs li a:hover:before, .footer-navs li a.active:before { width: 100%; right: auto; left: 0; } .footer-eq { display: flex; } .footer-eq-item { margin-right: 25px; width: 100px; } .footer-eq-item figure { display: block; padding: 7px; background: #fff; border-radius: 10px; line-height: 1; } .footer-eq-item figure img { display: inline-block; width: 100%; height: auto; } .footer-eq-item:last-child { margin-right: 0; } .footer-eq-item p { margin-top: 12px; text-align: center; color: #fff; line-height: 1; font-size: 15px; font-weight: bold; } .footer-icp { padding: 22px 9.38vw; display: flex; justify-content: space-between; align-items: center; margin-top: -1px; background: #005b9f; } .footer-icp-info { display: flex; flex-wrap: wrap; } .footer-icp-info p, .footer-icp-info a { display: inline-block; color: #fff; font-size: 16px; opacity: 0.5; } .footer-icp-info p { margin-right: 14px; } .footer-icp-info a:hover { opacity: 1; } .network { display: flex; } .network a { display: inline-block; color: #ffffff; font-size: 16px; opacity: 0.33; } .network a:hover { opacity: 1; } .pbanner { position: relative; overflow: hidden; } .pbanner figure { display: block; line-height: 1; height: 100vh; } .pbanner figure .video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .pbanner figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .ptext { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 4; text-align: center; } .ptitle { margin-bottom: 2.0833vw; } .ptitle strong { display: block; line-height: 1.3; color: #fff; font-size: 2.6042vw; font-weight: normal; font-family: "Noto Sans SC"; font-weight: 500; } .video-btn { display: inline-flex; align-items: center; cursor: pointer; } .video-btn.play i { background-image: url(../images/pause.png); } .video-btn i { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-color: #0097e0; background-image: url(../images/play.png); background-repeat: no-repeat; background-position: center; } .video-btn span { display: inline-block; margin-left: 8px; color: #fff; font-size: 14px; font-family: "Noto Sans SC"; font-weight: 500; } .mouse-down { position: absolute; left: 50%; transform: translateX(-50%); bottom: 54px; z-index: 5; text-align: center; } .mouse-down p { line-height: 1; color: #fff; font-size: 14px; } .mouse-dit { margin: auto; margin-bottom: 24px; position: relative; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; line-height: 1; } .mouse-dit:before { position: absolute; left: 50%; top: 100%; margin-top: 2px; content: ""; width: 1px; height: 10px; background: #fff; animation: move2 1s infinite; transform-origin: center top; } @keyframes move2 { 0% { opacity: 1; transform: scaleY(1); } 50% { transform: scaleY(0); opacity: 0.2; } } .introduct-about { padding: 7.29vw 9.38vw 14.43vw; background-position: center bottom; background-size: cover; background-repeat: no-repeat; } .brief-title { position: relative; margin-bottom: 3.54vw; } .brief-title strong { display: block; margin-bottom: 20px; line-height: 1; color: #333333; font-size: 3.13vw; font-weight: normal; } .brief-title p { color: #666666; font-size: 24px; } .brief-info { display: flex; justify-content: space-between; } .brief-introduct { width: 45.25%; color: #666666; font-size: 16px; text-indent: 28px; line-height: 2; } .brief-text { margin-bottom: 6.35vw; color: #666666; font-size: 16px; text-indent: 28px; line-height: 2; } .brief-over { padding: 4.48vw 0 0 30px; margin-top: -4.48vw; box-sizing: border-box; width: 50%; border-top: 1px solid #666666; } .brief-over .industry-more { text-align: left; } .brief-over .industry-more a { text-align: center; border-color: #0097e0; color: #0097e0; } .brief-over .industry-more a:hover { color: #fff; } .brief-over .industry-more a:before { background: #0097e0; } .history { padding: 5.99vw 0 5.63vw; } .history-tops { display: flex; justify-content: space-between; align-items: center; padding: 0 9.38vw; } .about-title { position: relative; padding-bottom: 22px; } .about-title.article-block:before { transform-origin: left center; transform: scale(0); transition: 0.88s 0.7s; } .about-title.articleShow:before { transform: scale(1); transition: 0.88s; } .about-title:before { position: absolute; left: 0; bottom: 0; content: ""; width: 32px; height: 5px; background: #0097e0; border-radius: 3px; } .about-title strong { display: block; line-height: 1; color: #171a1d; font-size: 3.13vw; font-weight: normal; } .about-title p { margin-top: 22px; color: #999999; font-size: 20px; } .common-btn { display: flex; } .common-btn span { display: inline-block; margin-right: 16px; width: 50px; height: 50px; border: 1px solid #c1c1c1; color: #c1c1c1; text-align: center; line-height: 50px; transition: 0.3s; cursor: pointer; border-radius: 50%; } .common-btn span:last-child { margin-right: 0; } .common-btn span:hover { border-color: #0097e0; color: #0097e0; } .history-hide { padding-top: 92px; padding-left: 9.38vw; overflow: hidden; } .history-swiper { padding-right: 13.02vw; } .history-slide { position: relative; box-sizing: border-box; padding: 2.92vw 2.08vw 4.9vw; width: 19.43vw; border-right: 1px solid #f5f5f5; height: auto; } .history-slide.swiper-slide-active { box-shadow: 0 0 29px rgba(0, 151, 224, 0.08); border-right: 1px solid #fff; } .history-slide.swiper-slide-active:before { transform: scale(1); } .history-slide:before { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 4px; background: #0097e0; transform: scaleX(0); transition: 0.88s; } .history-slide strong { display: block; margin-bottom: 44px; line-height: 1; color: #0097e0; font-size: 2.6vw; font-weight: bold; } .history-slide p { color: #333333; font-size: 16px; line-height: 2; } .culture { padding: 4.38vw 9.38vw 14.58vw; position: relative; z-index: 3; } .culture-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .about-title-center { text-align: center; padding-bottom: 44px; } .about-title-center:before { left: 50%; margin-left: -16px; } .culture-list { display: flex; justify-content: space-between; margin-top: 4.95vw; } .culture-list li { flex: 1; margin-right: 7.71vw; text-align: center; } .culture-list li:last-child { margin-right: 0; } .culture-list li:hover strong:before { transform: scaleX(1); } .culture-list li strong { display: block; position: relative; color: #0097e0; line-height: 1; height: 75px; border-bottom: 1px solid #e5e5e5; font-size: 30px; } .culture-list li strong:before { position: absolute; left: 0; bottom: -1px; content: ""; width: 100%; height: 1px; background: #0097e0; transform: scaleX(0); transition: 1s; } .culture-list li p { margin-top: 26px; color: #333333; font-size: 20px; line-height: 2; } .strategy { padding: 5.21vw 9.38vw 0 0; display: flex; justify-content: space-between; align-items: center; } .strategy-imgs { width: 54.59%; } .strategy-imgs figure { position: relative; display: block; padding-bottom: 67.57%; height: 0; overflow: hidden; line-height: 1; border-radius: 0 5.21vw 5.21vw 0; } .strategy-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .strategy-info { width: 37.52%; } .strategy-text { margin-top: 56px; color: #171a1d; font-size: 16px; line-height: 2; } .honor-box { padding: 6.7708vw 0 6.275vw; background: url(../img/honorbg.png) center top no-repeat; background-size: auto 100%; } .honor-hide { margin-left: 9.375vw; padding-top: 5.2083vw; overflow: hidden; } .honor-swiper { padding-right: 12.2917vw; overflow: visible; padding-bottom: 30px; } .honor-slide { box-sizing: border-box; position: relative; z-index: 2; padding: 5.625vw 20px 44px; width: 33.333%; background: #fff; border-radius: 20px; text-align: center; box-shadow: 0 0 29px rgba(0, 151, 224, 0.08); height: auto; } .honor-slide:hover:before { height: 50%; } .honor-slide:hover figure img { transform: scale(1.06); } .honor-slide:hover strong { color: #fff; } .honor-slide:before { position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; width: 100%; height: 0; border-radius: 0 0 20px 20px; background: #0097e0; transition: 0.68s; } .honor-slide figure { position: relative; height: 180px; text-align: center; } .honor-slide figure img { display: inline-block; margin: auto; max-width: 100%; max-height: 100%; transition: 0.68s; } .honor-slide strong { display: block; margin-top: 36px; color: #333333; font-size: 20px; font-weight: bold; line-height: 1.5; transition: 0.35s; } .strategy-imgs.article-block figure { border-radius: 0; transition: 0.88s; } .strategy-imgs.articleShow figure { border-radius: 0 5.2083vw 5.2083vw 0; } .companys { display: flex; justify-content: space-between; } .companys-info { width: 45.38%; color: #666666; font-size: 16px; line-height: 2; } .company-data { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 3.125vw; margin-top: 80px; } .company-move { animation: move5 2s infinite linear alternate; } .company-data-item { text-align: center; } .company-data-item:nth-child(2n+2) .company-move { animation: move5 2s 1s infinite linear alternate; } .company-data-item:nth-child(1) { padding-top: 2.7083vw; } .company-data-item:nth-child(1) .compant-dit { height: 78px; background: url(../img/company2.png) center top no-repeat; } .company-data-item:nth-child(2) b { font-size: 3.9583vw; } .company-data-item:nth-child(3) { padding-top: 3.6458vw; } .company-data-item:nth-child(3) .compant-dit { height: 56px; background: url(../img/company3.png) center top no-repeat; } .company-data-item:nth-child(4) { padding-top: 2.6042vw; } .company-data-item:nth-child(4) .compant-dit { height: 78px; background: url(../img/company2.png) center top no-repeat; } .company-data-item b { display: inline-block; font-size: 3.125vw; line-height: 1; font-weight: normal; font-family: "Geometric 415"; background-image: -webkit-linear-gradient(right, #2d73d8, #109aee); -webkit-background-clip: text; color: transparent; } .company-data-item p { margin-top: 18px; color: #333333; font-size: 16px; line-height: 1; } @keyframes move5 { 0% { transform: translateY(0px); } 100% { transform: translateY(40px); } } .company-boxs { background-size: 100% auto; padding-bottom: 11.4583vw; } .compant-dit { margin: auto; margin-top: 22px; position: relative; width: 1px; height: 129px; background: url(../img/company1.png) center top no-repeat; } .compant-dit:before { position: absolute; left: -3px; top: -3px; content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0097e0; } .operate-banner { position: relative; overflow: hidden; } .operate-banner figure { position: relative; display: block; padding-bottom: 37.18%; height: 0; overflow: hidden; line-height: 1; } .operate-banner figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .operate-banner-info { position: absolute; left: 9.38vw; right: 9.38vw; bottom: 156px; z-index: 3; } .operate-banner-info strong { display: block; margin-bottom: 18px; line-height: 1; color: #fff; font-size: 2.29vw; } .operate-banner-info p { color: #fff; font-size: 1.25vw; } .operate-arrow { position: absolute; right: 0; bottom: 5px; width: 52px; height: 52px; border: 1px solid #fff; border-radius: 50%; text-align: center; line-height: 52px; } .operate-arrow i { display: inline-block; color: #fff; font-size: 18px; animation: move1 1s infinite; } @keyframes move1 { 0% { opacity: 1; transform: translateY(0px); } 50% { transform: translateY(8px); opacity: 0.2; } } .operate-menu { position: absolute; left: 9.38vw; right: 9.38vw; bottom: 0; display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.3); } .operate-navs-li { display: flex; } .operate-navs-li > li { margin-right: 3.85vw; position: relative; z-index: 2; } .operate-navs-li > li:last-child { margin-right: 0; } .operate-navs-li > li:hover > a:before, .operate-navs-li > li.active > a:before { opacity: 1; visibility: visible; } .operate-navs-li > li.third-menu > a:before { display: none; } .operate-navs-li > li:hover > a i { transform: rotate(180deg); } .operate-navs-li > li:hover .third-menu-list { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: visible; } .operate-navs-li > li > a { display: inline-flex; position: relative; align-items: center; justify-content: center; height: 88px; color: #fff; font-size: 16px; } .operate-navs-li > li > a i { display: inline-block; margin-left: 10px; color: #fff; font-size: 15px; font-weight: bold; transition: 0.3s; } .operate-navs-li > li > a:before { position: absolute; right: -20px; top: 50%; margin-top: -3px; content: ""; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #fff; opacity: 0; visibility: hidden; transition: 0.3s; } .third-menu-list { position: absolute; left: 50%; margin-left: -65px; bottom: 100%; z-index: 5; width: 130px; background: #fff; padding: 20px 0; text-align: center; opacity: 0; visibility: hidden; transform: translateY(-40px); pointer-events: none; transition: 0.5s; } .third-menu-list:before { position: absolute; left: 50%; margin-left: -6px; top: 100%; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #fff; } .third-menu-list p { margin-bottom: 5px; } .third-menu-list p:last-child { margin-bottom: 0; } .third-menu-list p a { display: inline-block; color: #666; font-size: 14px; } .third-menu-list p a:hover { color: #0097e0; } .posites { display: flex; } .posites span, .posites a, .posites b { display: inline-block; color: #fff; font-size: 14px; font-weight: normal; } .posites b { margin: 0 3px; } .operate-introduct { padding: 8.125vw 9.375vw 9.375vw; position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .operate-introduct:before { position: absolute; left: 0; bottom: -12.0833vw; content: ""; width: 13.6979vw; height: 36.3021vw; background: url(../img/introducts.png) center no-repeat; background-size: cover; } .operate-intro-imgs { width: 45.51%; } .operate-intro-imgs figure { position: relative; display: block; padding-bottom: 94.233%; height: 0; overflow: hidden; line-height: 1; border-radius: 1.5625vw; } .operate-intro-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .operate-intro-imgs figure img { height: 115%; } .operate-company { width: 40.25%; } .operate-tops { margin-bottom: 36px; } .operate-tops h3 { display: block; margin-bottom: 3.9583vw; line-height: 1; color: #0097e0; font-size: 44px; } .operate-tops strong { display: block; line-height: 1; color: #0097e0; font-weight: normal; font-size: 24px; } .operate-in { color: #666666; font-size: 16px; } .product-service { padding: 0 9.375vw 5.7292vw; position: relative; z-index: 3; } .proservice-tt { display: block; line-height: 1; color: #0097e0; font-weight: normal; font-size: 24px; } .product-service-list { margin-top: 2.6042vw; } .product-service-item { margin-bottom: 10px; padding: 20px 0 12px; display: flex; align-items: flex-start; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .product-service-item strong { display: flex; width: 118px; color: #2d74d8; font-size: 16px; } .product-service-li { width: 0; flex: 1; display: flex; flex-wrap: wrap; } .product-service-li span { display: inline-block; position: relative; margin-right: 32px; margin-bottom: 8px; color: #999999; font-size: 16px; } .product-service-li span:before { position: absolute; right: -17px; top: 50%; margin-top: -8px; content: ""; width: 2px; height: 16px; background: #a9a9a9; } .product-service-li span:last-child:before { display: none; } .operate-prev { margin-top: 4.375vw; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; height: 70px; border-radius: 10px; background: #0097e0; } .operate-prev a { display: inline-block; position: relative; z-index: 2; color: #fff; font-size: 16px; } .operate-prev a:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .operate-prev a:hover, .operate-prev a.active { color: #fff; } .operate-prev a:hover:before, .operate-prev a.active:before { width: 100%; right: auto; left: 0; } .inner-banner figure { position: relative; display: block; padding-bottom: 46.35%; height: 0; overflow: hidden; line-height: 1; } .inner-banner figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-inner { padding: 6.5104vw 9.375vw 68px; } .news-boxs { padding: 80px 9.375vw; background: #f5f7fb; } .news-list { display: flex; flex-wrap: wrap; padding-bottom: 2.5vw; } .news-list li { margin-right: 2.05%; margin-bottom: 42px; width: 23.46%; } .news-list li:nth-child(4n+4) { margin-right: 0; } .news-list li a { display: block; padding: 32px 26px 30px; background: #fff; border-radius: 10px; box-shadow: 0 0 24px rgba(193, 200, 214, 0.22); } .news-list li a:hover strong { color: #0097e0; } .news-list li a:hover figure img { transform: scale(1.06); } .news-list li a time { display: block; position: relative; z-index: 2; line-height: 1; color: #333333; font-size: 14px; } .news-list li a time:before { position: absolute; left: 0; top: -16px; z-index: -1; content: ""; width: 34px; height: 34px; border-radius: 50%; background: #eef7fd; } .news-list li a strong { display: block; margin-top: 22px; margin-bottom: 36px; height: 94px; height: 58px; color: #000000; font-size: 16px; font-weight: bold; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-list li a figure { position: relative; display: block; padding-bottom: 62.5%; height: 0; overflow: hidden; line-height: 1; border-radius: 8px; } .news-list li a figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .news-list li a figure img { transition: 0.6s; } .news-list li a figure:before { position: absolute; left: 0; top: 0; z-index: 3; content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 151, 224, 0) 0%, rgba(0, 151, 224, 0.5) 100%); } .news-detais { display: flex; align-items: center; margin-top: 2.1875vw; } .news-detais i { display: inline-block; margin-right: 10px; width: 28px; height: 28px; background: #0097e0; border-radius: 50%; color: #fff; font-size: 12px; text-align: center; line-height: 28px; transform: scale(0.7); } .news-detais span { display: inline-block; color: #0097e0; font-size: 16px; } .news-page { display: flex; justify-content: center; } .news-page a { display: inline-block; margin-right: 7px; height: 45px; line-height: 45px; min-width: 45px; text-align: center; border-radius: 28px; color: #949494; font-size: 14px; } .news-page a:hover, .news-page a.active { background: #0097e0; color: #fff; } .news-page a:last-child { margin-right: 0; } .news-page a:first-child, .news-page a:last-child { padding: 0 14px; background: #fff; } .news-page a:first-child:hover, .news-page a:last-child:hover { background: #0097e0; } .news-views { margin-top: 81px; padding: 0 9.38vw; display: flex; border-top: 1px solid #ebebeb; } .news-v-left { box-sizing: border-box; padding-top: 40px; width: 69.23%; border-right: 1px solid #ebebeb; } .news-v-left .posites span, .news-v-left .posites a, .news-v-left .posites b { color: #999999; } .news-v-top { position: relative; padding-right: 200px; margin-top: 3.23vw; padding-bottom: 26px; border-bottom: 1px solid #ebebeb; } .news-v-top h3 { display: block; margin-bottom: 12px; line-height: 1.2; color: #000000; font-size: 30px; font-weight: normal; } .news-v-top p { display: flex; } .news-v-top p span { display: inline-block; margin-right: 1.56vw; color: #999999; font-size: 16px; } .news-back { position: absolute; right: 4.43vw; top: 0; } .news-back a { display: block; width: 116px; height: 36px; line-height: 36px; border-radius: 18px; text-align: center; background: #0097e0; color: #fff; font-size: 14px; } .news-back a:hover { background: #f7ab00; } .news-v-info { padding: 34px 0 135px; padding-right: 4.48vw; color: #333333; font-size: 16px; } .news-v-info img { width: auto; max-width: 100%; height: auto; } .news-compents { padding-left: 4.38vw; padding-top: 5.83vw; width: auto; flex: 1; } .commpent-tt { display: block; margin-bottom: 2.19vw; line-height: 1; color: #000000; font-size: 1.56vw; font-weight: normal; } .commpent-list li { margin-bottom: 2.81vw; padding-bottom: 26px; border-bottom: 1px solid #dddddd; } .commpent-list li:hover figure img { transform: scale(1.05); } .commpent-list li:hover strong { color: #0097e0; } .commpent-list li figure { position: relative; display: block; padding-bottom: 62.53%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .commpent-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .commpent-list li figure img { transition: 0.68s; } .commpent-list li strong { display: block; margin-top: 20px; margin-bottom: 20px; line-height: 1.5; color: #000000; font-size: 16px; font-weight: normal; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .commpent-list li time { display: block; line-height: 1; color: #999999; font-size: 16px; } .news-prevs-item { margin-bottom: 10px; } .news-prevs-item a { display: flex; align-items: center; } .news-prevs-item a i { display: inline-block; margin-right: 16px; text-align: center; width: 22px; height: 22px; font-size: 12px; color: #fff; font-style: normal; background: #0097e0; border-radius: 50%; } .news-prevs-item a p { color: #0097e0; font-size: 14px; width: 0; flex: 1; } .industrys-box { position: relative; overflow: hidden; } .industry-slide { height: 100vh; overflow: hidden; } .industry-slide:nth-child(2n+2) .industry-info { left: auto; right: 9.375vw; } .industry-slide:last-child { height: auto; } .industry-slide.swiper-slide-active .industry-tt strong { opacity: 1; visibility: visible; transform: translateY(0); } .industry-slide.swiper-slide-active .industry-li { opacity: 1; visibility: visible; transform: translateY(0); } .industry-slide > figure { display: block; height: 100vh; overflow: hidden; line-height: 1; } .industry-slide > figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .industry-wr { height: 100vh; } .industry-wr > figure { display: block; height: 100vh; overflow: hidden; line-height: 1; } .industry-wr > figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .industrys-swiper { height: 100vh; } .industrys-swiper .swiper-pagination { right: 60px; } .industrys-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0; margin-bottom: 32px; width: 30px; height: 30px; position: relative; background: none; opacity: 1; } .industrys-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after { transform: scale(1) rotate(180deg); } .industrys-swiper .swiper-pagination .swiper-pagination-bullet:last-child { margin-bottom: 0; display: none; } .industrys-swiper .swiper-pagination .swiper-pagination-bullet:after { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 2px dotted rgba(255, 255, 255, 0.2); transform: scale(0); transition: 0.4s; } .industrys-swiper .swiper-pagination .swiper-pagination-bullet:before { position: absolute; left: 50%; top: 50%; margin-left: -3px; margin-top: -3px; content: ""; width: 6px; height: 6px; background: #fff; border-radius: 50%; } .industry-wr { position: relative; } .industry-slide:last-child { overflow: hidden; overflow-y: auto; } .industry-info { position: absolute; left: 9.38vw; top: 50%; transform: translateY(-50%); width: 530px; z-index: 3; } .industry-tt { margin-bottom: 2.34vw; } .industry-tt strong { display: block; line-height: 1; color: #fff; font-size: 2.29vw; opacity: 0; visibility: hidden; transform: translateY(100%); transition: 0.78s; } .industry-li { opacity: 0; visibility: hidden; transform: translateY(40px); transition: 0.65s 0.5s; } .industry-li li:hover a:after, .industry-li li.active a:after { transform: scale(1); } .industry-li li:hover a:before, .industry-li li.active a:before { width: 70px; } .industry-li li:hover a p, .industry-li li.active a p { opacity: 1; } .industry-li li:hover a i, .industry-li li.active a i { opacity: 1; visibility: visible; } .industry-li li a { display: flex; position: relative; justify-content: space-between; align-items: center; padding: 20px 0; z-index: 2; } .industry-li li a:after { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); z-index: -2; transform: scaleX(0); transition: 1s; } .industry-li li a:before { position: absolute; left: 0; bottom: 0; content: ""; width: 70px; width: 0; height: 1px; background: #fff; z-index: 2; transition: 0.4s; } .industry-li li a p { width: 0; flex: 1; padding-right: 10px; color: #fff; line-height: 1; font-size: 1.25vw; opacity: 0.5; transition: 0.4s; } .industry-li li a i { display: inline-block; position: relative; padding-right: 46px; color: #ffffff; font-size: 16px; line-height: 1.2; font-style: normal; opacity: 0; visibility: hidden; transition: 0.38s; } .industry-li li a i:before { position: absolute; right: 0; top: 50%; margin-top: -6.5px; content: ""; width: 28px; height: 13px; background: url(../images/arrow.png) center no-repeat; animation: move3 1s infinite; } @keyframes move3 { 0% { opacity: 1; transform: translateX(0px); } 50% { transform: translateX(8px); opacity: 0.2; } } .cooperate-box { padding: 5vw 9.375vw 100px; background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; } .cooperate-btn { display: flex; justify-content: center; margin-bottom: 3.4375vw; } .cooperate-btn span { display: inline-block; margin-right: 18px; text-align: center; width: 180px; height: 40px; line-height: 40px; border: 1px solid #0097e0; border-radius: 3px; color: #0097e0; font-size: 18px; cursor: pointer; transition: 0.4s; } .cooperate-btn span:hover, .cooperate-btn span.active { background: #0097e0; color: #fff; font-weight: bold; } .cooperate-btn span:last-child { margin-right: 0; } .cooperate-item { display: none; } .cooperate-item:first-child { display: block; } .cooperate-list { display: flex; flex-wrap: wrap; } .cooperate-list li { margin-right: 2.6666%; margin-bottom: 32px; box-sizing: border-box; width: 23%; } .cooperate-list li:nth-child(4n+4) { margin-right: 0; } .cooperate-list li figure { display: block; position: relative; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; height: 138px; } .cooperate-list li figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; max-width: 80%; max-height: 70%; } .negotiate { padding: 5.9896vw 9.375vw 7.8125vw; background: #ffffff; } .negotiate-top { display: flex; } .map { width: 69.1%; height: 454px; border-radius: 8px 0 0 8px; } .negotiate-address { flex: 1; width: 0; display: flex; align-items: center; background: #0097e0; border-radius: 0 8px 8px 0; } .negotiate-address-wr { padding: 0 3.0208vw; } .negotiate-address-wr strong { display: block; margin-bottom: 2.8125vw; line-height: 1.2; color: #fff; font-size: 30px; } .negotiate-address-wr p { margin-bottom: 10px; color: #fff; font-size: 16px; } .negotiate-address-wr p:last-child { margin-bottom: 0; } .anchorBL { display: none !important; } .negotiate-list { display: flex; flex-wrap: wrap; margin-top: 6.25vw; } .negotiate-list li { margin-bottom: 50px; position: relative; padding: 2.1875vw 2.6042vw 1.9792vw; width: 31%; margin-right: 3.5%; box-sizing: border-box; border-radius: 10px; box-shadow: 0 0 24px rgba(184, 205, 235, 0.3); overflow-y: hidden; transition: 0.48s; } .negotiate-list li:hover { transform: translateY(-8px); } .negotiate-list li:nth-child(3n+3) { margin-right: 0; } .negotiate-list li:before { position: absolute; right: 0; top: 0; content: ""; border-left: 35px solid transparent; border-top: 34px solid #0097e0; } .negotiate-list li strong { display: block; margin-bottom: 22px; line-height: 1.2; color: #333333; font-size: 20px; } .negotiate-list li p { color: #666666; font-size: 16px; } .architecture { padding: 8.8542vw 5.625vw 11.3542vw; } .architecture figure { display: block; text-align: center; } .architecture figure img { display: inline-block; max-width: 100%; width: auto; height: auto; } .investor-top { padding: 4.6875vw 9.375vw 3.4375vw; display: flex; justify-content: space-between; align-items: flex-start; } .investor-left { position: relative; padding-right: 5.8333vw; } .investor-left:before { position: absolute; right: 0; top: 50%; margin-top: -100px; content: ""; width: 1px; height: 200px; background: url(../img/line2.png) center no-repeat; } .investor-left h3 { display: block; line-height: 1; color: #101010; font-size: 22px; font-weight: normal; } .investor-change { margin-top: 35px; display: flex; align-items: center; } .investor-HKD { display: flex; align-items: center; } .investor-HKD.down span:before { transform: rotate(180deg); } .investor-HKD strong { display: block; line-height: 1; color: #0097e0; font-size: 3.125vw; } .investor-HKD span { display: inline-block; margin-left: 22px; position: relative; padding-top: 28px; color: #0097e0; font-size: 20px; line-height: 1; } .investor-HKD span:before { position: absolute; top: 0; left: 50%; margin-left: -13px; content: ""; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 18px solid #0097e0; } .investor-down { display: flex; margin-top: 10px; } .investor-down p { color: #0097e0; font-size: 16px; } .investor-down p.down i { transform: rotate(0deg); } .investor-down p:nth-child(2) { margin: 0 15px; } .investor-down p i { display: inline-block; transform: rotate(180deg); } .investor-tong { margin-left: 40px; } .investor-tong img { display: inline-block; } .investor-right { flex: 1; width: 0; margin-left: 6.1458vw; } .investor-list { margin-right: -60px; display: flex; flex-wrap: wrap; } .investor-list p { width: 20%; margin-bottom: 6px; color: #333333; font-size: 16px; } .as-of { padding-top: 22px; } .as-of p { color: #dcdcdc; font-size: 16px; } .periodical { padding: 5.7292vw 9.375vw 100px; background: #f7f8fa; } .investor-titles { margin-bottom: 65px; display: flex; justify-content: space-between; align-items: center; } .investor-titles h3 { display: block; line-height: 1; color: #333333; font-size: 40px; } .investor-titles a { display: block; position: relative; z-index: 2; width: 150px; height: 42px; text-align: center; line-height: 42px; color: #0097e0; border: 1px solid #0097e0; border-radius: 22px; font-size: 16px; overflow: hidden; } .investor-titles a:before { content: ""; width: 0; height: 100%; background: #0097e0; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .investor-titles a:hover, .investor-titles a.active { color: #0097e0; } .investor-titles a:hover:before, .investor-titles a.active:before { width: 100%; right: auto; left: 0; } .investor-titles a:hover { color: #fff; } .periodical-list { display: flex; flex-wrap: wrap; } .periodical-list li { margin-right: 3.06%; margin-bottom: 30px; width: 22.7%; } .periodical-list li:nth-child(4n+4) { margin-right: 0; } .periodical-list li a { display: block; padding: 2.3438vw 2.3958vw 2.1875vw; box-sizing: border-box; height: 100%; border-bottom: 6px solid #0097e0; background: #fff; } .periodical-list li a:hover strong { color: #0097e0; } .periodical-list li a time { display: block; margin-bottom: 16px; line-height: 1; color: #0097e0; font-size: 16px; font-weight: bold; } .periodical-list li a strong { display: block; line-height: 1.2; color: #101010; font-size: 24px; height: 105px; transition: 0.35s; } .periodical-list li a span { display: inline-flex; align-items: center; line-height: 1.2; color: #0097e0; font-size: 16px; font-weight: bold; } .periodical-list li a span i { display: inline-block; margin-right: 10px; color: #0097e0; font-size: 22px; font-style: normal; font-weight: normal; } .bulletin { padding: 4.6875vw 9.375vw 5.3125vw; } .bulletin-list li { border-bottom: 1px solid #f0f0f0; } .bulletin-list li a { display: block; position: relative; padding: 22px 0 22px 24px; } .bulletin-list li a:hover strong { color: #0097e0; } .bulletin-list li a strong { display: block; padding-right: 88px; position: relative; margin-bottom: 10px; line-height: 1.2; color: #333333; font-size: 16px; font-weight: normal; transition: 0.35s; } .bulletin-list li a strong:before { position: absolute; left: -24px; top: 5px; content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0097e0; } .bulletin-list li a p { line-height: 1; color: #c2c2c2; } .bulletin-list li a time { display: block; position: absolute; right: 0; top: 50%; margin-top: -7px; line-height: 1; color: #898989; font-size: 14px; } .exchange { padding: 5.2083vw 9.375vw 90px; background: #f7f8fa; } .exchange-list { display: flex; flex-wrap: wrap; } .exchange-list li { margin-right: 2%; margin-bottom: 36px; padding: 2.5vw 2.6042vw 2.7083vw 1.5625vw; width: 32%; box-sizing: border-box; background: #fff; } .exchange-list li:nth-child(3n+3) { margin-right: 0; } .exchange-list li:hover .exchange-info strong { color: #0097e0; } .exchange-info { display: flex; align-items: flex-start; margin-bottom: 1.5625vw; } .exchange-info:last-child { margin-bottom: 0; } .exchange-info:last-child span { background: #7d7d7d; } .exchange-info span { display: inline-block; width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 32px; background: #0097e0; color: #fff; font-size: 16px; } .exchange-info strong { display: block; width: 0; flex: 1; margin-left: 22px; color: #333333; font-size: 18px; line-height: 30px; transition: 0.35s; } .exchange-info p { width: 0; flex: 1; margin-left: 22px; color: #666666; font-size: 18px; line-height: 30px; } .idea-box { padding: 5.9896vw 9.375vw 8.3333vw; background-position: center bottom; background-repeat: no-repeat; background-size: cover; } .research-title strong { display: block; position: relative; padding-bottom: 32px; margin-bottom: 22px; line-height: 1; color: #171a1d; font-size: 3.125vw; font-weight: normal; } .research-title strong:before { position: absolute; left: 0; bottom: 0; content: ""; width: 32px; height: 5px; border-radius: 3px; background: #0097e0; } .research-title p { color: #333333; font-size: 16px; } .idea-list { display: flex; flex-wrap: wrap; margin-top: 64px; } .idea-list li { margin-right: 3%; position: relative; width: 48.5%; } .idea-list li:nth-child(2n+2) { margin-right: 0; } .idea-list li:hover figure img { transform: scale(1.05); } .idea-list li figure { position: relative; display: block; padding-bottom: 58.3333%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .idea-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .idea-list li figure img { transition: 0.68s; } .idea-text { position: absolute; left: 40px; right: 40px; bottom: 32px; z-index: 3; text-align: center; } .idea-text strong { display: block; margin-bottom: 16px; line-height: 1; color: #fff; font-size: 30px; font-weight: normal; } .idea-text p { color: #ffffff; font-size: 16px; } .workstation { position: relative; } .workstation figure { display: block; line-height: 1; } .workstation figure img { display: block; width: 100%; height: auto; } .workstation .research-title { position: absolute; left: 9.375vw; width: 34.6354vw; top: 8.3333vw; } .researchs { padding: 8.5417vw 9.375vw 88px; background: url(../img/honorbg.png) -20vw center no-repeat; background-position: center; background-repeat: no-repeat; } .researchs-wrap { position: relative; margin-top: 35px; display: flex; justify-content: space-between; align-items: center; } .researchs-text { width: 42.82%; } .researchs-text p { color: #333333; font-size: 16px; } .researchs-text p b { color: #0097e0; font-size: 36px; } .researchs-tabs { position: relative; width: 46.4%; } .researchs-tabs .common-btn { position: absolute; right: 0; top: -132px; } .researchs-slide { width: 50%; } .researchs-slide figure { position: relative; height: 350px; } .researchs-slide figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; } .researchs-slide p { margin-top: 36px; color: #333333; font-size: 18px; font-weight: bold; text-align: center; } .publicity { padding: 3.6458vw 9.375vw 6.1458vw; } .publicity-list { margin-bottom: 4.1667vw; } .publicity-list li { position: relative; border-bottom: 1px solid #ebebeb; } .publicity-list li a { display: flex; padding: 3.6458vw 0 2.1875vw; align-items: flex-start; } .publicity-list li a:hover .publicity-info strong { color: #0097e0; } .publicitytime { position: relative; padding-left: 31px; } .publicitytime span { display: block; margin-bottom: 10px; line-height: 1; color: #0097e0; font-size: 24px; font-weight: bold; } .publicitytime p { line-height: 1; color: #0097e0; font-size: 16px; } .publicitytime i { display: inline-block; position: absolute; left: 0; top: 0; color: #0097e0; font-size: 22px; line-height: 1; } .publicity-info { flex: 1; margin-left: 6.7708vw; margin-right: 8.6458vw; width: 0; } .publicity-info strong { display: block; margin-bottom: 18px; line-height: 1.2; color: #333333; font-size: 18px; font-weight: bold; transition: 0.35s; } .publicity-info p { color: #999999; font-size: 16px; } .publicity-more { display: flex; align-items: center; margin-top: 40px; } .publicity-more i { display: inline-block; margin-right: 15px; width: 22px; height: 22px; border-radius: 50%; text-align: center; line-height: 22px; color: #fff; font-size: 12px; background: #0097e0; } .publicity-more span { display: inline-block; color: #0097e0; font-size: 16px; } .party-box { padding: 6.1458vw 9.375vw 100px; background: #ffffff; } .party-wr { padding: 3.125vw; border-bottom: 2px solid #f7ab00; box-shadow: 0 0 24px rgba(193, 200, 214, 0.22); } .party-swiper .swiper-pagination { width: auto; left: auto; right: 0; bottom: 20px; line-height: 1; z-index: 10; } .party-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0; margin-left: 20px; width: 10px; height: 10px; background: #f7ab00; transition: 0.38s; } .party-info a { display: flex; align-items: center; justify-content: space-between; } .party-info a:hover figure img { transform: scale(1.06); } .party-info a:hover .party-texts strong { color: #f7ab00; } .party-info a:hover .party-texts span { background: #f7ab00; color: #fff; } .party-imgs { width: 43.916%; } .party-imgs figure { position: relative; display: block; padding-bottom: 63.89%; height: 0; overflow: hidden; line-height: 1; border-radius: 5px; } .party-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .party-imgs figure img { transition: 0.68s; } .party-texts { width: 49.37%; } .party-texts strong { display: block; margin-bottom: 26px; line-height: 1.2; color: #1f1a17; font-size: 24px; } .party-texts time { display: block; margin-bottom: 2.0833vw; line-height: 1; color: #666666; font-size: 16px; } .party-texts p { color: #666666; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .party-texts span { display: inline-block; margin-top: 2.9167vw; width: 150px; height: 42px; color: #f7ab00; font-size: 16px; text-align: center; line-height: 42px; border: 1px solid #f7ab00; border-radius: 22px; transition: 0.4s; } .party-list { margin-top: 3.6458vw; padding-bottom: 2.6042vw; } .party-list li { margin-bottom: 40px; box-shadow: 0 0 24px rgba(193, 200, 214, 0.22); } .party-list li a { display: flex; align-items: flex-start; justify-content: space-between; align-items: center; padding: 2.6042vw 3.0208vw 2.0833vw; } .party-list li a:hover .party-content strong, .party-list li a:hover .party-content span { color: #f7ab00; } .party-time { width: 70px; text-align: center; margin-right: 5.625vw; } .party-time b { display: block; padding-bottom: 16px; line-height: 1; color: #666666; font-size: 2.9167vw; font-weight: normal; border-bottom: 1px solid #cccccc; } .party-time time { display: block; margin-top: 1.1458vw; line-height: 1; color: #666666; font-size: 16px; } .party-content { flex: 1; width: 0; } .party-content strong { display: block; margin-bottom: 20px; line-height: 1.2; color: #1f1a17; font-size: 24px; font-weight: normal; transition: 0.4s; } .party-content p { color: #666666; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .party-content span { display: inline-block; margin-top: 1.1458vw; color: #999999; font-size: 16px; transition: 0.4s; } .party-page a:hover, .party-page a.active { background: #f7ab00; } .party-views { margin-top: 81px; padding: 0 9.375vw 5.5208vw; border-top: 1px solid #ebebeb; } .party-view-top { padding: 6.3542vw 0 2.9167vw; border-bottom: 1px solid #ebebeb; text-align: center; } .party-view-top strong { display: block; margin-bottom: 18px; line-height: 1.2; color: #333333; font-size: 36px; } .party-view-top p { display: flex; justify-content: center; } .party-view-top p span { display: inline-block; margin-right: 12px; color: #333333; font-size: 16px; } .party-view-top p span:last-child { margin-right: 0; } .party-view-info { padding: 46px 0 66px; color: #333333; font-size: 16px; } .party-view-info img { width: auto; max-width: 100%; height: auto; } .party-prevs { padding: 32px 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .party-prevs p { width: 46%; } .party-prevs p a { display: inline-block; color: #333333; font-size: 16px; } .party-prevs p a:hover { color: #0097e0; } .party-prevs p:last-child { text-align: right; } .party-back a { display: inline-block; position: relative; width: 29px; height: 14px; } .party-back a:hover:before, .party-back a:hover:after { background: #0097e0; } .party-back a:before, .party-back a:after { position: absolute; left: 0; content: ""; width: 100%; height: 4px; border-radius: 2px; background: #ebebeb; transition: 0.35s; } .party-back a:after { bottom: 0; } .join-btns-list { display: flex; justify-content: center; padding-top: 3.5417vw; } .join-btn-item { margin-right: 2.3438vw; } .join-btn-item:last-child { margin-right: 0; } .join-btn-item:hover a, .join-btn-item.active a { background: #0097e0; } .join-btn-item:hover a i, .join-btn-item.active a i { color: #fff; } .join-btn-item:hover a span, .join-btn-item.active a span { color: #fff; } .join-btn-item a { display: flex; justify-content: center; align-items: center; width: 360px; height: 62px; border-radius: 8px; border: 1px solid #0097e0; } .join-btn-item a i { display: inline-block; color: #0097e0; font-size: 36px; font-style: normal; transition: 0.35s; } .join-btn-item a span { display: inline-block; margin-left: 14px; color: #0097e0; font-size: 20px; transition: 0.35s; } .join-company { padding: 6.1458vw 9.375vw 5.2083vw; background: #f6f9fc; } .join-company-list { display: flex; flex-wrap: wrap; } .join-company-list li { box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin-right: 1.7333%; margin-bottom: 26px; padding: 1.0417vw 1.3021vw; width: 12.8%; border-radius: 10px; background: #fff; transition: 0.4s; text-align: center; color: #333333; font-size: 16px; } .join-company-list li:hover { background: #0097e0; color: #fff; } .join-company-list li:nth-child(7n+7) { margin-right: 0; } .involvement { padding: 5.4688vw 9.375vw 6.25vw; } .involvement-top { margin-bottom: 60px; text-align: center; } .involvement-top h3 { display: block; line-height: 1; color: #333333; font-size: 2.2917vw; font-weight: normal; } .involvement-searchs { margin-top: 40px; display: flex; justify-content: center; } .involvement-searchs .text { box-sizing: border-box; padding-left: 40px; width: 40.1042vw; height: 60px; line-height: 60px; border: none; color: #c1d2e3; font-size: 16px; border-radius: 30px 0 0 30px; background: #f6f9fc; } .involvement-searchs .text:focus::-webkit-input-placeholder { opacity: 0; visibility: hidden; } .involvement-searchs .text::-webkit-input-placeholder { color: #c1d2e3; } .searchs-btns { display: flex; align-items: center; justify-content: center; padding: 0 44px 0 26px; height: 60px; border-radius: 0 30px 30px 0; cursor: pointer; background: linear-gradient(90deg, #2d73d8, #109bee); } .searchs-btns i { display: inline-block; margin-right: 12px; color: #fff; font-size: 22px; font-style: normal; } .searchs-btns span { display: inline-block; color: #fff; font-size: 16px; } .involvement-name { display: flex; align-items: center; margin-bottom: 26px; background: #f6f9fc; height: 80px; border-radius: 10px; } .involvement-name span { display: inline-block; color: #333333; font-size: 16px; font-weight: bold; flex: 1; text-align: center; } .involvement-name span:nth-child(1) { width: 12.3%; flex: none; } .involvement-name span:nth-child(2) { width: 13.65%; flex: none; } .involvement-name span:nth-child(3) { width: 19.23%; flex: none; } .involvement-list li { margin-bottom: 28px; border: 1px solid #e5ecf4; border-radius: 8px; height: 78px; display: flex; align-items: center; cursor: pointer; transition: 0.4s; } .involvement-list li:hover { border-color: #0097e0; } .involvement-list li p { display: inline-block; color: #92a2b2; font-size: 16px; flex: 1; text-align: center; } .involvement-list li p:nth-child(1) { width: 12.3%; flex: none; } .involvement-list li p:nth-child(2) { width: 13.65%; flex: none; } .involvement-list li p:nth-child(3) { width: 19.23%; flex: none; } .involvement-list li p span { display: inline-block; width: 110px; height: 34px; line-height: 34px; border-radius: 17px; background: #0097e0; color: #fff; font-size: 16px; } .more-posite { padding-top: 48px; text-align: center; } .more-posite a { display: inline-block; width: 218px; height: 50px; line-height: 50px; border-radius: 10px; color: #fff; font-size: 18px; font-weight: bold; background: linear-gradient(90deg, #2d73d8, #109bee); } .join-pop { position: fixed; z-index: 199; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.78s; } .join-pop.show { opacity: 1; visibility: visible; pointer-events: visible; } .pop-bgs { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: rgba(0, 0, 0, 0.5); } .join-pop-content { position: absolute; left: 50%; margin-left: -720px; top: 50%; transform: translateY(-50%); width: 1440px; background: #fff; box-sizing: border-box; max-height: 90vh; overflow-y: auto; } .join-pop-wr { padding: 72px 80px 80px; } .close-pop { position: absolute; right: 45px; top: 50px; z-index: 3; line-height: 1; color: #333333; font-size: 28px; cursor: pointer; transition: 0.3s; } .close-pop:hover { color: #0097e0; transform: rotate(180deg); } .join-pop-top { margin-bottom: 30px; } .join-pop-top strong { display: block; margin-bottom: 40px; line-height: 1; color: #000000; font-size: 38px; font-weight: normal; } .join-pop-top p { display: flex; flex-wrap: wrap; } .join-pop-top p span { display: inline-block; margin-right: 30px; color: #999999; font-size: 16px; } .join-pop-info { color: #999999; font-size: 16px; } .join-email { margin-top: 45px; } .join-email a { display: inline-block; width: 196px; height: 54px; line-height: 52px; color: #fff; font-size: 16px; font-weight: bold; border-radius: 8px; background: linear-gradient(90deg, #2d73d8, #109bee); text-align: center; } .train-box { padding: 9.7917vw 9.375vw 7.2917vw; display: flex; justify-content: space-between; flex-direction: row-reverse; } .train-imgs { width: 55.12%; } .train-imgs figure { border-radius: 10px; position: relative; display: block; padding-bottom: 57.44%; height: 0; overflow: hidden; line-height: 1; } .train-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .train-info { padding-top: 3.0208vw; width: 38.56%; } .train-info strong { display: block; margin-bottom: 2.0833vw; position: relative; padding-bottom: 2.3958vw; line-height: 1.2; color: #333333; font-size: 24px; border-bottom: 1px solid #eaebe8; } .train-info strong:before { position: absolute; left: 0; bottom: -1px; content: ""; width: 86px; height: 1px; background: #0097e0; } .train-info p { color: #333333; font-size: 18px; line-height: 2; } .train-info b { display: block; margin-top: 2.2917vw; line-height: 1; color: #f8f9fa; font-size: 6.25vw; font-weight: normal; } .train-tab { padding: 0 0 7.5vw; overflow: hidden; } .train-tt { display: block; line-height: 1; color: #333333; font-size: 2.6042vw; font-weight: normal; text-align: center; } .train-swiper { margin-top: 3.8542vw; position: relative; padding: 0 46px; } .train-slide.swiper-slide-active p { opacity: 1; visibility: visible; } .train-slide figure { margin-bottom: 28px; position: relative; display: block; padding-bottom: 59.1%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .train-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .train-slide figure img { transition: 0.65s; } .train-slide:hover figure img { transform: scale(1.05); } .train-slide p { margin-top: 24px; color: #90837a; font-size: 16px; text-align: center; transition: 0.68s; } .channel { padding: 8.3333vw 9.375vw 5vw; position: relative; z-index: 2; overflow: hidden; } .channel:before { position: absolute; right: 0; bottom: -9.5833vw; z-index: -1; content: ""; width: 14.6875vw; height: 36.6146vw; background: url(../img/shadow4.png) center no-repeat; background-size: cover; } .channel-tt { display: inline-block; line-height: 1; background-image: -webkit-linear-gradient(right, #2d73d8, #109bee); -webkit-background-clip: text; color: transparent; font-size: 30px; } .channel-wrap { margin-top: 42px; display: flex; justify-content: space-between; align-items: center; } .channel-imgs { width: 43.07%; } .channel-imgs img { display: block; width: 100%; height: auto; } .channel-info { width: 41.41%; } .channel-texts { margin-top: 2.7083vw; color: #333333; font-size: 18px; } .welfare { padding: 6.3542vw 60px 120px; } .welfare-top { margin: auto; text-align: center; width: 39.4792vw; } .welfare-top img { display: inline-block; width: auto; height: 4.0625vw; line-height: 1; } .welfare-top strong { display: block; margin-top: 2.8125vw; margin-bottom: 2.9167vw; line-height: 1; color: #333333; font-size: 2.6042vw; font-weight: normal; } .welfare-top p { color: #333333; font-size: 16px; } .welfare-imgs { margin-top: -5.9375vw; text-align: center; } .welfare-imgs img { display: inline-block; width: auto; max-width: 100%; height: auto; } .incentive { padding: 6.4583vw 0 8.125vw 9.375vw; background: #f5f5f5; } .incentive-tt { display: block; margin-bottom: 56px; line-height: 1; color: #333333; font-size: 40px; font-weight: normal; } .incentive-swiper { padding-right: 17.9688vw; } .incentive-swiper .swiper-pagination { top: auto; bottom: 0; height: 1px; background: #dedede; } .incentive-swiper .swiper-pagination .swiper-pagination-progressbar-fill { background: #0097e0; } .incentive-slide figure { position: relative; display: block; padding-bottom: 56.352%; height: 0; overflow: hidden; line-height: 1; border-radius: 10px; } .incentive-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .incentive-slide figure img { transition: 0.65s; } .incentive-slide:hover figure img { transform: scale(1.05); } .incentive-slide:hover .incentive-info strong { color: #0097e0; } .incentive-info { margin-top: 2.9167vw; padding-bottom: 4.4271vw; } .incentive-info strong { display: block; margin-bottom: 24px; line-height: 1.2; color: #333333; font-size: 24px; font-weight: normal; transition: 0.35s; } .incentive-info p { color: #999999; font-size: 16px; } .contact-fs { display: flex; justify-content: space-between; } .contact-map { width: 68.75%; } .contact-right { padding: 5.7292vw 0 5.625vw 5.2083vw; position: relative; width: 0; flex: 1; box-sizing: border-box; background: url(../img/contactbgs.png) right center no-repeat; background-size: cover; } .contact-item { margin-bottom: 3.6458vw; display: flex; align-items: flex-start; } .contact-item:last-child { margin-bottom: 0; } .contact-item b { display: inline-block; background-image: -webkit-linear-gradient(right, #2d73d8, #109bee); -webkit-background-clip: text; color: transparent; font-weight: normal; font-size: 2.5vw; line-height: 1; } .contact-infos { margin-left: 2.3438vw; width: 226px; } .contact-infos span { display: block; line-height: 1.4; color: #333333; font-size: 24px; font-weight: bold; } .contact-infos p { margin-top: 12px; color: #333333; font-size: 16px; line-height: 1; } .website-map { padding: 5.21vw 9.38vw 8.75vw; } .website-item { margin-bottom: 3.33vw; } .website-item:last-child { margin-bottom: 0; } .website-tt { display: block; padding-left: 3.13vw; height: 76px; line-height: 76px; background: #f5f5f5; font-weight: normal; font-size: 24px; } .website-list { padding: 2.29vw 3.13vw; display: flex; flex-wrap: wrap; border: 1px solid #f5f5f5; } .website-list li { margin-right: 3.13vw; } .website-list li:last-child { margin-right: 0; } .website-list li a { display: inline-block; position: relative; z-index: 2; color: #333333; font-size: 16px; } .website-list li a:before { content: ""; width: 0; height: 1px; background: #a3cff0; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .website-list li a:hover, .website-list li a.active { color: #a3cff0; } .website-list li a:hover:before, .website-list li a.active:before { width: 100%; right: auto; left: 0; } .website-list li a:hover { color: #0097e0; } .website-list li a:before { bottom: 5px; } .privacy { padding: 4.27vw 9.38vw 11.98vw; } .privacy-tt { margin-bottom: 3.13vw; line-height: 1; color: #333333; font-size: 1.88vw; } .privacy-info { color: #333333; font-size: 16px; } .report-boxs { padding: 3.8542vw 9.375vw 3.6458vw; background: #f7f8fa; } .report-lists { display: flex; flex-wrap: wrap; } .report-lists li { margin-right: 3.5%; width: 31%; } .report-lists li:nth-child(3n+3) { margin-right: 0; } .report-lists li a { position: relative; display: flex; justify-content: flex-end; border-radius: 10px; background: #fff; box-shadow: 0 0 24px rgba(184, 205, 235, 0.3); } .report-lists li a:hover figure img { transform: scale(1.05); } .report-lists li a figure { display: block; position: relative; line-height: 1; height: 190px; overflow: hidden; border-radius: 0 10px 10px 0; } .report-lists li a figure:before { position: absolute; right: 0; top: 0; z-index: 3; content: ""; border-left: 34px solid transparent; border-top: 34px solid #0097e0; } .report-lists li a figure img { display: inline-block; height: 100%; width: auto; transition: 0.54s; } .report-info { position: absolute; left: 2.7083vw; top: 50%; transform: translateY(-50%); } .report-info strong { display: block; margin-bottom: 34px; line-height: 1; color: #333333; font-size: 30px; font-weight: bold; } .report-info span { display: inline-block; position: relative; z-index: 2; width: 150px; height: 42px; border: 1px solid #0097e0; text-align: center; line-height: 42px; color: #0097e0; font-size: 16px; border-radius: 22px; overflow: hidden; transition: 0.35s; } .report-info span:before { content: ""; width: 0; height: 100%; background: #0097e0; position: absolute; right: 0; bottom: 0; transition: 0.4s; z-index: -1; } .report-info span:hover, .report-info span.active { color: #0097e0; } .report-info span:hover:before, .report-info span.active:before { width: 100%; right: auto; left: 0; } .report-info span:hover { color: #fff; } .contact-boxs { padding: 70px 10.4167vw; display: flex; } .contact-m { width: 69%; height: 455px; border-radius: 10px 0 0 10px; } .contact-tetxs { display: flex; align-items: center; background: #0097e0; flex: 1; border-radius: 0 10px 10px 0; } .contact-wrs { padding: 0 2.0833vw 0 3.125vw; } .contact-wrs strong { display: block; margin-bottom: 2.5vw; line-height: 1.2; color: #fff; font-size: 30px; font-weight: normal; } .contact-wrs p { color: #fff; font-size: 16px; line-height: 42px; } .joun-btn-fixs { margin-bottom: 60px; } .incentive-imgs { padding: 5vw 10.4167vw 8.5938vw; background: #f5f5f5; } .incentive-imgs figure { display: block; line-height: 1; text-align: center; } .incentive-imgs figure img { display: inline-block; max-width: 100%; width: auto; height: auto; } .train-dits { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 40px; } .train-dits .common-trainbtn { display: inline-block; color: #c1c1c1; text-align: center; font-size: 22px; line-height: 1.2; transition: 0.3s; cursor: pointer; border-radius: 50%; } .train-dits .common-trainbtn:hover { color: #0097e0; } .train-dits .swiper-pagination { position: relative; margin: 0 10px; } .train-dits .swiper-pagination .swiper-pagination-bullet { margin-right: 12px; width: 10px; height: 10px; background: #333333; } .train-dits .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #0097e0; opacity: 1; } .train-dits .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .industry-names { position: absolute; left: 62px; right: 62px; z-index: 20; bottom: 0; display: flex; justify-content: center; align-items: center; height: 100px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .industry-names-list { display: flex; justify-content: center; } .industry-names-list li { margin-right: 3.13vw; position: relative; color: #fff; font-size: 16px; cursor: pointer; } .industry-names-list li:hover:before, .industry-names-list li.active:before { transform: scale(1); visibility: visible; } .industry-names-list li:before { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 1px; background: #fff; transform: scaleX(0); transition: 0.3s; } .industry-numble { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: flex-end; line-height: 1; color: #fff; font-size: 16px; } .industry-numble span.start { margin-right: 10px; position: relative; top: 3px; font-size: 34px; } .industry-numble b { display: inline; margin: 0 4px; font-weight: normal; }