@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; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .center { display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-justify-content: space-between; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; } .header { position: fixed; left: 0; top: 0; z-index: 99; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 5%; width: 100%; background: #fff; height: 90px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .logo { display: block; width: 27.55vw; height: auto; } .header-right { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .navs { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .navs > li { position: relative; margin-left: 1vw; } .navs > li:first-child { margin-left: 0; } .navs > li:last-child { position: relative; } .navs > li:hover > a:before, .navs > li.active > a:before { right: auto; left: 0; width: 100%; } .navs > li > a { position: relative; z-index: 3; display: inline-block; padding: 0 9px; color: #333333; font-size: 16px; line-height: 90px; white-space: nowrap; } .navs > li > a:before { content: ""; width: 0; height: 3px; background: #0066d9; position: absolute; right: 0; bottom: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; z-index: -1; } .navs > li > a:hover:before, .navs > li > a.active:before { width: 100%; right: auto; left: 0; } .navs > li:hover .join-menu { opacity: 1; visibility: visible; top: 100%; pointer-events: visible; } .join-menu { position: absolute; left: 50%; margin-left: -60px; top: 70%; padding-top: 12px; width: 120px; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.5s; } .join-wrap { position: relative; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); border-radius: 4px; padding: 14px 0; } .join-wrap:before { position: absolute; left: 50%; margin-left: -6px; top: -6px; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; } .join-wrap p { margin-bottom: 10px; text-align: center; } .join-wrap p:last-child { margin-bottom: 0; } .join-wrap p a { display: inline-block; color: #333333; font-size: 14px; } .join-wrap p a:hover { color: #0066d9; } .header-tel { margin-left: 26px; margin-right: 24px; } .header-tel a { display: block; width: 162px; height: 38px; line-height: 38px; color: #0066d9; border: 1px solid #0066d9; text-align: center; border-radius: 20px; font-size: 16px; font-weight: bold; } .header-tel a i { display: inline-block; margin-right: 6px; color: #0066d9; font-style: normal; font-size: 16px; } .edite { position: relative; } .edite span { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 0 4px; height: 90px; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #333333; font-size: 14px; cursor: pointer; } .edite span img { display: inline-block; height: 20px; } .edite span b { display: inline-block; margin-left: 10px; font-weight: normal; } .edite span b i { display: inline-block; vertical-align: middle; margin-left: 8px; color: #333; font-size: 16px; font-style: normal; } .edite:hover .edite__down { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); pointer-events: visible; } .edite__down { position: absolute; left: 50%; margin-left: -60px; top: 70%; width: 120px; padding-top: 14px; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 0.48s; -o-transition: 0.48s; -moz-transition: 0.48s; transition: 0.48s; pointer-events: none; } .edite__wrap { position: relative; padding: 16px 0; z-index: 5; background: #fff; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .edite__wrap:before { position: absolute; left: 50%; margin-left: -6px; top: -6px; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; } .edite__wrap p { text-align: center; margin-bottom: 12px; } .edite__wrap p:last-child { margin-bottom: 0; } .edite__wrap p a { display: inline-block; color: #4872c4; font-size: 14px; min-width: 69px; } .edite__wrap p a img { display: inline-block; vertical-align: middle; margin-right: 10px; position: relative; top: -2px; } .edite__wrap p a:hover { color: #e97d3c; } .navs-menu { position: fixed; left: 0; top: 90px; width: 100%; background: #fff; height: 0; overflow: hidden; } .navs-menu-wrap { padding: 58px 10% 65px; border-top: 1px solid #e2e2e2; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; box-shadow: 0 35px 35px inset rgba(214, 214, 214, 0.2); } .navs-menu-item { display: inline-block; } .navs-menu-item dt { display: block; margin-bottom: 35px; } .navs-menu-item dt a { display: inline-block; padding-left: 10px; line-height: 20px; color: #000000; font-size: 18px; font-weight: bold; border-left: 4px solid #0066d9; } .navs-menu-item dt a:hover { color: #0066d9; } .navs-menu-item dd { display: block; } .navs-menu-item dd p { margin-bottom: 13px; } .navs-menu-item dd p:last-child { margin-bottom: 0; } .navs-menu-item dd p a { display: inline-block; color: #666666; font-size: 16px; } .navs-menu-item dd p a:hover { color: #0066d9; } .mtop { height: 90px; } .banner-box { height: 100vh; } .banner { position: relative; } .banner .swiper-pagination { z-index: 10; bottom: 53px; } .banner .swiper-pagination .swiper-pagination-bullet { margin: 0 17px; width: 12px; height: 12px; background: #fff; opacity: 0.2; } .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .banner-slide { overflow: hidden; } .banner-slide figure { display: block; line-height: 1; overflow: hidden; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .banner-slide figure img { display: block; position: relative; width: 100%; height: auto; } .banner__text { position: absolute; left: 10%; top: 50%; display: none !important; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .banner__text img { display: block; height: 67px; width: auto; } .banner__text small { display: block; margin: 28px 0 38px; line-height: 1; color: #fff; font-size: 20px; font-weight: lighter; text-transform: uppercase; } .banner__text p { color: #fff; font-size: 38px; line-height: 1.2; } .banner__text__warp { visibility: hidden; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .banner-slide figure { -webkit-transition: 1s linear 2s; -o-transition: 1s linear 2s; -moz-transition: 1s linear 2s; transition: 1s linear 2s; } .banner-slide.swiper-slide-active figure { -webkit-transition: 8s linear; -o-transition: 8s linear; -moz-transition: 8s linear; transition: 8s linear; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .banner-slide.swiper-slide-active .banner__text__warp { visibility: visible; -webkit-animation: letterL 2s; -moz-animation: letterL 2s; -o-animation: letterL 2s; animation: letterL 2s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes letterL { 0% { opacity: 0; text-shadow: #ffffff 0px 0px 40px; } 60% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } 100% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } } @-moz-keyframes letterL { 0% { opacity: 0; text-shadow: #ffffff 0px 0px 40px; } 60% { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } 100% { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } } @-o-keyframes letterL { 0% { opacity: 0; text-shadow: #ffffff 0px 0px 40px; } 60% { opacity: 1; transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } 100% { opacity: 1; transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } } @keyframes letterL { 0% { opacity: 0; text-shadow: #ffffff 0px 0px 40px; } 60% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } 100% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); text-shadow: #ffffff 0px 0px 0px; } } .solutions { position: relative; z-index: 3; padding: 128px 10% 102px; background: #eff5fb; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .particles { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; } .solute-img { margin-right: -15px; width: 49.47%; } .solute-img img { display: block; width: 100%; height: auto; } .solute-left { width: 45.11%; } .solute-title strong { display: block; margin-bottom: 22px; line-height: 1; color: #0066d9; font-weight: normal; font-size: 38px; } .solute-title small { display: block; line-height: 1; color: #999999; font-size: 28px; font-weight: lighter; text-transform: uppercase; } .solute-btn { margin-top: 96px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .solute-btn li { text-align: center; cursor: pointer; } .solute-btn li:hover b, .solute-btn li.active b { -webkit-text-fill-color: #fff; } .solute-btn li:hover b:before, .solute-btn li.active b:before { opacity: 1; visibility: visible; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .solute-btn li:hover span, .solute-btn li.active span { color: #0066d9; } .solute-btn li b { display: block; position: relative; margin: auto; width: 70px; height: 70px; text-align: center; line-height: 70px; color: #2972ff; font-size: 35px; font-weight: normal; background-image: -webkit-linear-gradient(right, #2971ff, #4db8ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; } .solute-btn li b:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #095db7; z-index: -1; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; } .solute-btn li span { display: block; margin-top: 15px; line-height: 1; color: #333333; font-size: 16px; text-align: center; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; } .solute-tab { position: relative; } .solute-btns { position: absolute; top: 50%; margin-top: -36px; z-index: 10; width: 72px; height: 72px; text-align: center; border-radius: 50%; background: #e5e5e5; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; color: #fff; font-size: 30px; line-height: 72px; } .solute-btns:hover { background: #0066d9; } .solute-btns.prev { left: 10%; } .solute-btns.next { right: 10%; } .solute-tab-swiper { margin-top: 114px; padding-left: 15px; margin-left: -15px; padding-bottom: 30px; } .solute-tab-slide strong { display: block; margin-bottom: 38px; line-height: 1; color: #095db7; font-size: 26px; } .solute-tab-slide .z_index_more { margin-top: 50px; } .solute-text { padding-right: 32px; height: 120px; line-height: 2; overflow-y: auto; -webkit-overflow-scrolling: touch; } .solute-text p { color: #0066d9; font-size: 16px; } .z_index_more { display: block; position: relative; -webkit-animation: moves2 2s linear infinite; -moz-animation: moves2 2s linear infinite; -o-animation: moves2 2s linear infinite; animation: moves2 2s linear infinite; width: 96px; height: 96px; background: -webkit-linear-gradient(116deg, #43A2DB, #DC87B3); background: -moz-linear-gradient(116deg, #43A2DB, #DC87B3); background: -o-linear-gradient(116deg, #43A2DB, #DC87B3); background: linear-gradient(-26deg, #43A2DB, #DC87B3); border-radius: 50%; color: #fff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2; } .z_index_more i { display: block; line-height: 1; text-align: center; color: #fff; font-size: 16px; text-transform: uppercase; font-style: normal; } .z_index_more em { display: block; text-align: center; color: #fff; font-style: normal; font-size: 24px; line-height: 1; } .z_index_more .iconfont { display: block; } .z_index_more::before { content: ""; display: block; z-index: -1; width: 100%; opacity: 0; -webkit-transition: ease 2s; -o-transition: ease 2s; -moz-transition: ease 2s; transition: ease 2s; height: 100%; border-radius: 34px; position: absolute; left: 0; top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background: -webkit-linear-gradient(116deg, #43A2DB, #DC87B3); background: -moz-linear-gradient(116deg, #43A2DB, #DC87B3); background: -o-linear-gradient(116deg, #43A2DB, #DC87B3); background: linear-gradient(-26deg, #43A2DB, #DC87B3); } .z_index_more:hover::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 1; } @-webkit-keyframes moves2 { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes moves2 { 0% { -moz-transform: translateY(0px); transform: translateY(0px); } 50% { -moz-transform: translateY(15px); transform: translateY(15px); } 100% { -moz-transform: translateY(0px); transform: translateY(0px); } } @-o-keyframes moves2 { 0% { -o-transform: translateY(0px); transform: translateY(0px); } 50% { -o-transform: translateY(15px); transform: translateY(15px); } 100% { -o-transform: translateY(0px); transform: translateY(0px); } } @keyframes moves2 { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } .news-center { position: relative; z-index: 3; padding: 114px 0 112px 10%; background: url(../images/newsbg.jpg) repeat; overflow: hidden; } .waves { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; } .large-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .news-center-top { padding-right: 10vw; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } .home-title1 strong, .home-title1 small { color: #fff; } .news-swiper { margin-top: 78px; min-height: 420px; } .news-slide { margin-right: 5vw; width: 70vw; } .news-slide a { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .news-slide a:hover .news-imgs figure img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .news-imgs { position: relative; width: 50%; } .news-imgs figure { position: relative; display: block; padding-bottom: 62.5%; height: 0; overflow: hidden; line-height: 1; } .news-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .news-time { position: absolute; left: 0; top: 0; z-index: 3; width: 96px; padding-top: 24px; height: 80px; background: #1977f3; text-align: center; font-family: "Helvetica"; color: #fff; } .news-time time { display: block; margin-bottom: 10px; line-height: 1; font-size: 16px; } .news-time b { display: block; line-height: 1; font-size: 38px; } .news-text { width: 42.82%; color: #fff; } .news-text strong { display: block; margin-bottom: 30px; line-height: 1.5; font-size: 34px; font-weight: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; } .news-text p { font-size: 16px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4; } .more { margin-top: 45px; display: inline-block; color: #fff; line-height: 54px; font-size: 16px; -webkit-transition: 0.48s; -o-transition: 0.48s; -moz-transition: 0.48s; transition: 0.48s; } .more:hover i { background: #fff; color: #0066d9; text-indent: 16px; } .more i { display: inline-block; text-align: left; margin-left: 15px; width: 54px; height: 54px; line-height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 18px; text-indent: 6px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .news-inner a { display: inline-block; position: relative; z-index: 3; padding-right: 24px; line-height: 1.2; color: #fff; font-size: 18px; } .news-inner a:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; right: 0; bottom: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; z-index: -1; } .news-inner a:hover:before, .news-inner a.active:before { width: 100%; right: auto; left: 0; } .news-inner a:hover:after { right: -3px; } .news-inner a:after { position: absolute; right: 2px; top: 50%; margin-top: -6px; content: ""; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 7px solid #fff; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; } .news-swiper .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } .about-us { position: relative; z-index: 3; padding: 140px 0 128px 10%; background: #fff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } #particles-js { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; } .about-us-content { width: 38.888%; } .about-us-title { margin-top: 70px; margin-bottom: 42px; } .about-us-title strong { display: block; margin-bottom: 20px; line-height: 1; color: #333333; font-size: 38px; font-weight: normal; } .about-us-title span { display: inline-block; padding: 0 20px; border-radius: 25px; height: 50px; line-height: 50px; color: #fff; font-size: 28px; font-weight: lighter; background: #0066d9; } .about-us-text { margin-bottom: 46px; } .about-us-text p { color: #666666; font-size: 16px; text-align: justify; line-height: 2; } .about-swiper { width: 50%; margin: 0; cursor: url('../images/curse.png'), -webkit-grab; cursor: url('../images/curse.png'), -moz-grab; cursor: url('../images/curse.png'), grab; } .about-slide { margin-right: 5vw; width: 55.5555%; position: relative; overflow: hidden; border-radius: 10px; } .about-slide a { cursor: url('../images/curse.png'), -webkit-grab; cursor: url('../images/curse.png'), -moz-grab; cursor: url('../images/curse.png'), grab; } .about-slide a:hover figure:before { background: rgba(0, 102, 217, 0.5); } .about-slide a:hover figure img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .about-slide a:hover .about-fix:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .about-slide figure { z-index: 3; border-radius: 10px; position: relative; display: block; padding-bottom: 114.58%; height: 0; overflow: hidden; line-height: 1; } .about-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .about-slide figure:before { position: absolute; left: 0; top: 0; border-radius: 10px; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); z-index: 3; -webkit-transition: 0.68s; -o-transition: 0.68s; -moz-transition: 0.68s; transition: 0.68s; } .about-fix { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 240px; padding-top: 72px; height: 93px; text-align: center; z-index: 4; } .about-fix:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: url(../images/aboutbg.png) center no-repeat; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; } .about-fix span { display: block; line-height: 1; color: #fff; font-size: 24px; -webkit-transition: 0.48s; -o-transition: 0.48s; -moz-transition: 0.48s; transition: 0.48s; } .team { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .expert-team { width: 50%; } .expert-top { position: relative; } .expert-top figure { position: relative; display: block; padding-bottom: 66.45%; height: 0; overflow: hidden; line-height: 1; } .expert-top figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .expert-text { position: absolute; left: 10vw; top: 50%; color: #fff; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .expert-text strong { display: block; margin-bottom: 21px; line-height: 1; font-size: 38px; font-weight: normal; } .expert-text small { display: block; margin-bottom: 100px; line-height: 1; color: #fff; font-size: 28px; font-weight: lighter; text-transform: uppercase; } .expert-text p { font-size: 20px; } .expert-list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .expert-list li { position: relative; width: 50%; } .expert-list li:hover figure img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .expert-list li figure { position: relative; display: block; padding-bottom: 76.25%; height: 0; overflow: hidden; line-height: 1; } .expert-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .expert-list li figure:before { position: absolute; left: 0; top: 0; z-index: 3; content: ""; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%); opacity: 0.58; } .expert-list li span { position: absolute; left: 0; bottom: 29px; width: 100%; display: block; text-align: center; color: #fff; font-size: 22px; line-height: 1; z-index: 4; } .expert-swiper { position: relative; width: 50%; overflow: hidden; } .expert-slide { background: #eff5fb; overflow: hidden; } .expert-slide figure { position: relative; display: block; padding-bottom: 66.45%; height: 0; overflow: hidden; line-height: 1; } .expert-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .expert-content { padding: 8.854% 5vw 0; } .expert-hidden { padding-right: 30px; height: 165px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .expert-hidden p { color: #333333; font-size: 20px; line-height: 2; } .cooperate { padding: 134px 10% 50px; } .cooperate-title { margin-bottom: 60px; text-align: center; } .cooperate-title strong { display: block; margin-bottom: 18px; line-height: 1; color: #333333; font-size: 38px; font-weight: normal; } .cooperate-title p { line-height: 1; color: #999999; font-size: 16px; } .cooperate-slide figure { position: relative; display: block; height: 87px; border: 1px solid #f2f2f2; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .cooperate-slide figure img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; } .cooperate-slide figure:hover { border-color: #0066d9; } .cooperate-slide figure:hover img { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } .cooperate-swiper .swiper-pagination1 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 60px; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cooperate-swiper .swiper-pagination1 .swiper-pagination-bullet { margin: 0 4px; width: 10px; height: 10px; border-radius: 5px; opacity: 1; background: #e5e5e5; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; cursor: pointer; } .cooperate-swiper .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #0066d9; width: 40px; } .footer { padding: 36px 10% 0; background: #091924; } .footer-top { overflow: hidden; } .footer-navs { float: left; border-bottom: 1px solid rgba(255, 255, 255, 0.11); width: 81.25%; padding-top: 6px; -moz-box-sizing: border-box; box-sizing: border-box; height: 108px; overflow: hidden; } .footer-navs li { float: left; margin-right: 16px; margin-bottom: 10px; } .footer-navs li:first-child { margin-right: 7px; } .footer-navs li a { display: inline-block; color: #7b8c97; font-size: 16px; } .footer-navs li a:hover { color: #fff; } .footer-eq { float: right; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .footer-eq img { display: block; margin-right: 1px; width: 108px; height: auto; } .footer-eq span { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; text-align: center; height: 107px; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; font-size: 16px; line-height: 1.1; width: 39px; background: -webkit-linear-gradient(left, #0b3351 0%, #0f75c6 100%); background: -moz-linear-gradient(left, #0b3351 0%, #0f75c6 100%); background: -o-linear-gradient(left, #0b3351 0%, #0f75c6 100%); background: linear-gradient(to right, #0b3351 0%, #0f75c6 100%); } .footer-bottom { padding: 32px 0 30px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } .copy p, .copy a { color: #7b8c97; font-size: 16px; } .copy p img, .copy a img { position: relative; top: -1px; display: inline-block; margin-left: 10px; vertical-align: middle; } .networks { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .networks a { display: inline-block; color: #7b8c97; font-size: 16px; } .networks a:hover { color: #fff; } .navs__menu { position: fixed; left: 0; top: 60px; bottom: 0; padding-bottom: 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; background: #fff; z-index: 10; opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.78s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: 0.78s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: 0.78s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.78s cubic-bezier(0.77, 0, 0.175, 1); } .navs__menu.show { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .navs__menu__list { width: 90%; margin: auto; padding-top: 100px; } .navs__menu__list > li { text-align: center; margin-bottom: 20px; } .navs__menu__list > li:last-child { margin-bottom: 0; } .navs__menu__list > li > a { display: inline-block; margin: auto; font-size: 18px; color: #0066d9; } .navs-menu-leval { display: none; margin-top: 8px; padding: 12px 0; background: #eff5fb; } .navs-menu-leval li { text-align: center; } .navs-menu-leval li a { display: inline-block; font-size: 15px; color: #666666; line-height: 2.2; } .pabnner { position: relative; line-height: 1; } .pabnner figure { position: relative; display: block; padding-bottom: 26.04%; height: 0; overflow: hidden; line-height: 1; } .pabnner figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .pabnner figure img { -webkit-transition: 0s; -o-transition: 0s; -moz-transition: 0s; transition: 0s; } .ptext { position: absolute; left: 10%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; overflow: hidden; } .ptext strong { display: block; margin-bottom: 26px; line-height: 1; font-size: 54px; font-weight: normal; } .ptext small { display: block; line-height: 1; color: #ffffff; font-size: 24px; text-transform: uppercase; font-family: "Microsoft Tai Le"; opacity: 0.5; } .ptext.article-block strong, .ptext.article-block small { opacity: 0; visibility: hidden; -webkit-transform: translateY(110%); -moz-transform: translateY(110%); -ms-transform: translateY(110%); -o-transform: translateY(110%); transform: translateY(110%); -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .ptext.articleShow strong, .ptext.articleShow small { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ptext.articleShow small { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .phide { overflow: hidden; } .leval-menu { position: relative; height: 64px; padding: 0 10%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; background: #0066d9; } .meval-menu-list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .meval-menu-list li { margin-right: 46px; } .meval-menu-list li:hover a:before, .meval-menu-list li.active a:before { opacity: 1; visibility: visible; bottom: 0; } .meval-menu-list li a { display: inline-block; position: relative; padding: 16px 0; color: #fff; line-height: 1; font-size: 16px; } .meval-menu-list li a:before { position: absolute; left: 50%; margin-left: -6px; bottom: 0; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 5px solid #fff; opacity: 0; visibility: visible; bottom: -5px; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; } .posites { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .posites a { color: #fff; font-size: 16px; } .posites b { width: 0; height: 0; line-height: 1; margin: 0 10px 0 16px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff; } .statistics { position: relative; z-index: 3; padding: 134px 10% 112px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #f5faff; } .statistics-content { width: 36.07%; } .statistics-content strong { display: block; line-height: 1; color: #0066d9; font-size: 38px; } .statistics-text { margin-top: 32px; margin-bottom: 92px; } .statistics-text p { color: #333333; font-size: 16px; text-align: justify; line-height: 2.2; } .common-arrow { position: relative; z-index: 3; width: 80px; height: 80px; border-radius: 50%; background: rgba(0, 102, 217, 0.3); } .common-arrow:before { position: absolute; left: 50%; top: 50%; margin-left: -36.25%; margin-top: -36.25%; content: ""; width: 72.5%; height: 72.5%; background: #0066d9; border-radius: 50%; } .common-arrow i { display: block; position: relative; text-align: center; line-height: 80px; color: #fff; font-style: normal; font-size: 15px; -webkit-animation: moveDownSpot 1000ms infinite; -moz-animation: moveDownSpot 1000ms infinite; -o-animation: moveDownSpot 1000ms infinite; animation: moveDownSpot 1000ms infinite; } @-webkit-keyframes moveDownSpot { from { opacity: 1; top: 0; } to { opacity: 0; top: 5px; } } @-moz-keyframes moveDownSpot { from { opacity: 1; top: 0; } to { opacity: 0; top: 5px; } } @-o-keyframes moveDownSpot { from { opacity: 1; top: 0; } to { opacity: 0; top: 5px; } } @keyframes moveDownSpot { from { opacity: 1; top: 0; } to { opacity: 0; top: 5px; } } .computer { position: relative; width: 45.76%; margin-right: 39px; } .computer-imgs { position: relative; z-index: 3; } .computer-imgs .computer-bg { display: block; width: 100%; height: auto; } .computer-imgs .computer-inner { display: block; position: absolute; /*left: 6.685%;*/ top: 4.954%; /*width: 81.22%;*/ max-width: 600px; height: auto; } .computer-imgs:before { position: absolute; left: -5.974%; top: -38px; z-index: -1; content: ""; width: 115.93%; height: 100%; background: url(../img/pattern.png) center top no-repeat; -o-background-size: 100% auto; background-size: 100% auto; } .people { position: absolute; left: 100%; margin-left: -78px; width: 40.96%; bottom: 29px; z-index: 3; } .people img { display: block; width: 100%; height: auto; } .computer-name { position: absolute; left: -12.23%; bottom: 42px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 28.733%; z-index: 3; } .computer-name img { display: block; width: 100%; height: auto; } .computer-name strong { display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 1.4; color: #fff; font-size: 16.5px; font-weight: bold; } .technology-title { position: relative; padding: 85px 0 65px; line-height: 1; z-index: 3; } .technology-title:before { position: absolute; left: 50%; margin-left: -18px; bottom: -6px; content: ""; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 16px solid #489afd; } .technology-title strong { display: block; width: 90%; margin: auto; line-height: 1; color: #fff; font-size: 38px; text-align: center; font-weight: normal; } .technology-title p { width: 90%; margin: auto; margin-top: 16px; color: #fff; font-size: 16px; text-align: center; } .technology-flex { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .technology-flex .technology-bgs { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 120%; background: url(../img/titlebg.jpg) center no-repeat; -o-background-size: cover; background-size: cover; } .solute-tab { padding: 105px 10% 0; text-align: center; } .solute-computer { display: inline-block; width: 77.47%; position: relative; z-index: 3; text-align: center; } .solute-computer:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 102.8%; height: 100%; background: url(../img/decorate.png) center top no-repeat; -o-background-size: 100% auto; background-size: 100% auto; } .computer-bgs { display: block; width: 100%; margin: auto; } .solute-computer-swiper { position: absolute; left: 17.226%; top: 3.8%; width: 65.37%; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d6d6d6; } .solute-slide { overflow: hidden; } .solute-slide figure { position: relative; display: block; padding-bottom: 56.68%; height: 0; overflow: hidden; line-height: 1; } .solute-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .solute-items { position: relative; padding: 60px 0 42px; background: #fff; } .solute-wraps { margin: auto; max-width: 90%; width: 1344px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .solute-contents { width: 46.13%; } .solute-tit { position: relative; z-index: 3; padding-top: 64px; padding-bottom: 35px; } .solute-tit:before { position: absolute; left: 0; bottom: 0; content: ""; width: 73px; height: 3px; background: #0066d9; } .solute-tit b { display: block; position: absolute; left: 0; top: 4px; z-index: -1; line-height: 1; color: #0066d9; font-size: 66px; font-weight: normal; font-family: "Geometric415BlackBT"; opacity: 0.11; background-image: -webkit-linear-gradient(top, #0066d9, #e4effb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .solute-tit strong { display: block; line-height: 1.2; color: #0066d9; font-size: 38px; font-weight: normal; } .solute-info { margin-top: 34px; } .solute-info span { margin-bottom: 24px; display: block; color: #0066d9; font-size: 16px; } .solute-info p { color: #333333; font-size: 16px; } .solute-scale { width: 45.677%; padding-bottom: 34px; margin: 0; } .solute-scale .swiper-pagination { bottom: 0; line-height: 0; } .solute-scale .swiper-pagination .swiper-pagination-bullet { margin: 0 9px; width: 12px; height: 12px; background: #c3d9f6; opacity: 1; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .solute-scale .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #0066d9; } .solute-s-slide { overflow: hidden; } .solute-s-slide figure { position: relative; display: block; padding-bottom: 62.62%; height: 0; overflow: hidden; line-height: 1; } .solute-s-slide figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .solute-s-slide figure img { object-fit: contain; } .solute-s-slide span { display: block; position: absolute; right: 0; bottom: 0; z-index: 3; width: 54px; height: 54px; line-height: 54px; text-align: center; color: #fff; font-size: 22px; background: #0066d9; } .solute-items:nth-child(2n+2) { background: #f5faff; } .solute-items:nth-child(2n+2) .solute-wraps { -webkit-flex-direction: row-reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .customer-service { position: relative; z-index: 3; padding: 84px 10% 146px; } .customer-swiper { padding-left: 12px; margin-left: -12px; } .customer-swiper .swiper-pagination { position: relative; bottom: 0; margin-top: 32px; } .customer-swiper .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #cce0f7; opacity: 1; margin: 0 10px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .customer-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #0066d9; } .customer-slide { padding: 12px 0; } .customer-slide:hover figure { box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); } .customer-slide figure { position: relative; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: 112px; padding: 0 10px; border: 1px solid #e8e8e8; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .customer-slide figure img { display: block; width: auto; max-height: 68px; } .customer-slide figure span { display: inline-block; margin-left: 14px; color: #000000; font-size: 18px; } .slidetop.article-block, .list-animate.article-block li, .list-animate.article-block > div { 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.6s; -o-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s; } .slidetop.articleShow, .list-animate.articleShow li, .list-animate.articleShow > div { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .slidetop.detay1.article-block, .list-animate.article-block li:nth-child(2), .list-animate.article-block div:nth-child(2) { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .slidetop.detay2.article-block, .list-animate.article-block li:nth-child(3), .list-animate.article-block div:nth-child(3) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .slidetop.detay3.article-block, .list-animate.article-block li:nth-child(4), .list-animate.article-block div:nth-child(4) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .slidetop.detay4.article-block, .list-animate.article-block li:nth-child(5), .list-animate.article-block div:nth-child(5) { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .slidetop.detay6.article-block, .list-animate.article-block li:nth-child(6), .list-animate.article-block div:nth-child(5) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .waves-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 185px; margin-bottom: -7px; /*Fix for safari gap*/ min-height: 100px; max-height: 150px; pointer-events: none; } /* Animation */ .parallax > use { -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; -moz-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; -o-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { -webkit-animation-delay: -2s; -moz-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; -webkit-animation-duration: 7s; -moz-animation-duration: 7s; -o-animation-duration: 7s; animation-duration: 7s; } .parallax > use:nth-child(2) { -webkit-animation-delay: -3s; -moz-animation-delay: -3s; -o-animation-delay: -3s; animation-delay: -3s; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; animation-duration: 10s; } .parallax > use:nth-child(3) { -webkit-animation-delay: -4s; -moz-animation-delay: -4s; -o-animation-delay: -4s; animation-delay: -4s; -webkit-animation-duration: 13s; -moz-animation-duration: 13s; -o-animation-duration: 13s; animation-duration: 13s; } .parallax > use:nth-child(4) { -webkit-animation-delay: -5s; -moz-animation-delay: -5s; -o-animation-delay: -5s; animation-delay: -5s; -webkit-animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; animation-duration: 20s; } @-webkit-keyframes move-forever { 0% { -webkit-transform: translate3d(-90px, 0, 0); transform: translate3d(-90px, 0, 0); } 100% { -webkit-transform: translate3d(85px, 0, 0); transform: translate3d(85px, 0, 0); } } @-moz-keyframes move-forever { 0% { -moz-transform: translate3d(-90px, 0, 0); transform: translate3d(-90px, 0, 0); } 100% { -moz-transform: translate3d(85px, 0, 0); transform: translate3d(85px, 0, 0); } } @-o-keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } @keyframes move-forever { 0% { -webkit-transform: translate3d(-90px, 0, 0); -moz-transform: translate3d(-90px, 0, 0); transform: translate3d(-90px, 0, 0); } 100% { -webkit-transform: translate3d(85px, 0, 0); -moz-transform: translate3d(85px, 0, 0); transform: translate3d(85px, 0, 0); } } .solute-js { margin: auto; max-width: 90%; width: 1344px; margin-top: 65px; } .solute-js p { color: #333333; font-size: 16px; line-height: 2; text-align: center; } .core { padding: 78px 0 60px; text-align: center; } .core strong { display: block; position: relative; margin-bottom: 30px; padding-bottom: 26px; line-height: 1; color: #0066d9; font-size: 38px; } .core strong:before { position: absolute; left: 50%; margin-left: -27px; bottom: 0; content: ""; width: 54px; height: 4px; background: #0066d9; } .core p { color: #333333; font-size: 16px; line-height: 2.2; } .core-technology { position: relative; overflow: hidden; } .core-bg { position: absolute; left: 0; top: 3px; width: 100%; height: 100vh; background: #0c40b8; z-index: 1; } .core-item { position: relative; z-index: 2; padding: 138px 10%; background: #f5faff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .core-imgs { width: 47.52%; } .core-imgs figure { position: relative; display: block; padding-bottom: 62.5%; height: 0; overflow: hidden; line-height: 1; } .core-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .core-text { width: 47.85%; } .core-text strong { display: block; color: #0066d9; font-size: 30px; } .core-hidden { margin-top: 26px; height: 380px; overflow-y: auto; padding-right: 60px; } .core-hidden p { color: #333333; font-size: 16px; line-height: 2; } .core-hidden::-webkit-scrollbar { width: 3px; background-color: #e4e4e4; } .core-hidden::-webkit-scrollbar-track { width: 3px; background-color: #e4e4e4; } .core-hidden::-webkit-scrollbar-thumb { background-color: #0066d9; } .core-item:nth-child(2n+2) { background: none; -webkit-flex-direction: row-reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .core-item:nth-child(2n+2) .core-hidden::-webkit-scrollbar { width: 3px; background-color: rgba(255, 255, 255, 0.1); } .core-item:nth-child(2n+2) .core-hidden::-webkit-scrollbar-track { width: 3px; background-color: rgba(255, 255, 255, 0.1); } .core-item:nth-child(2n+2) .core-hidden::-webkit-scrollbar-thumb { background-color: #fff; } .core-item:nth-child(2n+2) .core-text strong { color: #fff; } .core-item:nth-child(2n+2) .core-text p { color: #fff; } .arrow { display: block; margin: auto; margin-top: 65px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #0066d9; } .arrow i { display: block; position: relative; text-align: center; line-height: 50px; color: #0066d9; font-size: 26px; -webkit-animation: moveDownSpot 1000ms infinite; -moz-animation: moveDownSpot 1000ms infinite; -o-animation: moveDownSpot 1000ms infinite; animation: moveDownSpot 1000ms infinite; } .academician { position: relative; z-index: 3; background: #f5faff; padding-left: 10%; } .academician-tab { position: relative; width: 34.43%; } .academician-item { float: left; position: relative; } .academician-content { padding-top: 112px; padding-bottom: 110px; } .academician-top strong { display: block; position: relative; padding-bottom: 38px; margin-bottom: 42px; line-height: 1; color: #0066d9; font-size: 40px; } .academician-top strong b { margin-left: 12px; display: inline-block; font-weight: normal; font-size: 28px; } .academician-top strong:before { position: absolute; left: 0; bottom: 0; content: ""; width: 56px; height: 3px; background: #0066d9; } .academician-tt { margin-bottom: 22px; height: 200px; } .academician-tt p { color: #0066d9; font-size: 16px; } .academician-text { height: 230px; padding-right: 10.1%; overflow-y: auto; } .academician-text p { color: #333333; font-size: 16px; line-height: 2; } .academician-btn { margin-top: 42px; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 1px solid #0066d9; } .academician-btn span { display: block; position: relative; height: 38px; width: 103px; line-height: 38px; color: #0066d9; font-size: 16px; font-weight: bold; margin-right: 10px; cursor: pointer; text-align: center; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; background: #fff; } .academician-btn span:nth-child(2n+2):before { right: auto; left: -10px; border-left: 10px solid transparent; border-right: none; border-top: none; border-bottom: 38px solid #fff; } .academician-btn span:before { position: absolute; right: -10px; top: 0; content: ""; border-right: 10px solid transparent; border-top: 38px solid #fff; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .academician-btn span:hover, .academician-btn span.active { background: #0066d9; color: #fff; } .academician-btn span:hover:before, .academician-btn span.active:before { border-top: 38px solid #0066d9; } .academician-btn span:hover:nth-child(2n+2):before, .academician-btn span.active:nth-child(2n+2):before { border-top: none; border-bottom: 38px solid #0066d9; } .academician-btn span:last-child { margin-right: 0; } .academician-imgs { position: absolute; right: 0; top: 0; width: 53.43%; height: 100%; overflow: hidden; -webkit-clip-path: polygon(19.88% 0, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(19.88% 0, 100% 0%, 100% 100%, 0% 100%); } .academician-info { position: relative; height: 100%; overflow: hidden; display: none; } .academician-info:first-child { display: block; } .academician-info figure { position: relative; top: -10%; display: block; width: 100%; height: 130%; background-position: center top; -o-background-size: cover; background-size: cover; } .technicians { padding: 100px 10% 50px; } .technician-title { position: relative; margin-bottom: 92px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .technician-title:before { content: ""; position: absolute; left: 155px; right: 44px; top: 50%; background: #f2f2f2; height: 1px; } .technician-title strong { display: block; position: relative; padding-left: 20px; line-height: 1; color: #0066d9; font-size: 24px; border-left: 5px solid #0066d9; } .technician-title i { color: #000000; font-style: normal; font-size: 20px; line-height: 1; } .technicians-list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .technicians-list li { width: 31.25%; margin-bottom: 50px; } .technicians-list li:hover figure img { -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06); } .technicians-list li:hover span { background: #0066d9; color: #fff; } .technicians-list li figure { position: relative; display: block; padding-bottom: 66.458%; height: 0; overflow: hidden; line-height: 1; } .technicians-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .technicians-list li span { display: block; height: 60px; line-height: 60px; color: #333333; font-weight: bold; text-align: center; background-color: #c7c7c7; font-size: 16px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .technician-pop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 299; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: 0.88s; -o-transition: 0.88s; -moz-transition: 0.88s; transition: 0.88s; } .technician-pop.show { opacity: 1; visibility: visible; pointer-events: visible; } .technician-pop.show .technicians-fix { opacity: 1; visibility: visible; top: 50%; } .pop-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .technicians-fix { position: absolute; left: 50%; margin-left: -40%; top: 60%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 80%; background: #fff; opacity: 0; visibility: hidden; -webkit-transition: 0.78s; -o-transition: 0.78s; -moz-transition: 0.78s; transition: 0.78s; } .technicians-fix .closes { position: absolute; right: 0; top: -75px; display: block; line-height: 1; color: #fff; font-size: 44px; cursor: pointer; -webkit-transition: 0.48s; -o-transition: 0.48s; -moz-transition: 0.48s; transition: 0.48s; } .technicians-fix .closes:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .technicians-info { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 56px; } .technicians-imgs { width: 59.8%; } .technicians-imgs figure { position: relative; display: block; padding-bottom: 66.43%; height: 0; overflow: hidden; line-height: 1; } .technicians-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .technician-right { width: 34.2%; } .news-boxs { position: relative; z-index: 3; padding: 100px 10%; overflow: hidden; } .news-boxs .swiper-pagination { position: relative; margin-top: 60px; text-align: left; } .news-boxs .swiper-pagination .swiper-pagination-bullet { margin: 0; margin-right: 20px; width: 10px; height: 10px; background: #bdd9fb; opacity: 1; } .news-boxs .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #1977f3; } .n-slide { overflow: hidden; } .n-slide a { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .n-slide a:hover figure img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .n-slide a:hover .news-contents strong { color: #0066d9; } .news-img { width: 43.81%; } .news-img figure { position: relative; display: block; padding-bottom: 62.5%; height: 0; overflow: hidden; line-height: 1; } .news-img figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .news-contents { width: 50%; } .news-contents strong { display: block; margin-bottom: 36px; line-height: 1.4; color: #333333; font-size: 34px; font-weight: normal; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .news-contents p { color: #333333; font-size: 16px; line-height: 2; text-indent: 36px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; } .news-contents span { margin-top: 70px; display: inline-block; color: #0066d9; font-size: 16px; } .news-contents span i { display: inline-block; top: 2px; margin-left: 20px; font-size: 20px; position: relative; left: 0; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; font-style: normal; } .news-contents span:hover i { left: 4px; } .dynamic-bix { padding: 85px 10%; background: #fff; } .dynamic-list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 28px; } .dynamic-list li { margin-right: 2.8%; margin-bottom: 46px; width: 22.9%; } .dynamic-list li:nth-child(4n+4) { margin-right: 0; } .dynamic-list li a { display: block; position: relative; z-index: 3; padding: 38px 8.522% 35px; background: #f5f5f5; border-radius: 8px; overflow: hidden; } .dynamic-list li a:before { content: ""; width: 0; height: 5px; background: #0066d9; position: absolute; right: 0; bottom: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; z-index: -1; } .dynamic-list li a:hover:before, .dynamic-list li a.active:before { width: 100%; right: auto; left: 0; } .dynamic-list li a:hover { background: #f1f8ff; } .dynamic-list li a:hover figure img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .dynamic-list li a:hover .dynamic-top time, .dynamic-list li a:hover .dynamic-top strong { color: #0066d9; } .dynamic-list li a:hover .dynamic-top strong { font-weight: bold; } .dynamic-list li a:hover .dynamic-arrow span { color: #0066d9; } .dynamic-list li figure { position: relative; display: block; padding-bottom: 62.413%; height: 0; overflow: hidden; line-height: 1; } .dynamic-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .dynamic-top { margin-bottom: 32px; } .dynamic-top time { display: block; margin-bottom: 28px; line-height: 1; color: #999999; font-size: 14px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .dynamic-top strong { display: block; color: #333333; font-size: 18px; font-weight: normal; line-height: 1.6; height: 56px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; } .lazy { background: url(../images/loading.gif) center no-repeat; } .dynamic-arrow { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 44px; } .dynamic-arrow span { display: block; line-height: 1; color: #999999; font-size: 14px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .dynamic-arrow i { display: inline-block; color: #0066d9; font-size: 18px; font-style: normal; font-weight: bold; } .pages { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pages a { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; color: #666666; font-size: 12px; border: 1px solid #dddddd; margin-right: 9px; } .pages a:last-child { margin-right: 0; } .pages a.w1 { width: 63px; } .pages a:hover, .pages a.active { border-color: #0066d9; background: #0066d9; color: #fff; } .pages span { display: inline-block; margin-right: 9px; color: #7a7a7a; font-size: 12px; } .news-view { padding: 92px 0 62px; } .news-wraps { overflow: hidden; width: 1200px; margin: auto; } .views { float: right; width: 82.16%; } .view-top { margin-bottom: 38px; } .view-top strong { display: block; margin-bottom: 38px; color: #333333; font-size: 28px; line-height: 1.2; font-weight: normal; } .view-top p { color: #bfbfbf; font-size: 16px; } .view-prev { margin-top: 130px; } .view-info { margin-bottom: 40px; } .view-info:last-child { margin-bottom: 0; } .view-info a { display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .view-info a i { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background: #0066d9; color: #fff; font-size: 14px; } .view-info a span { display: inline-block; margin-left: 10px; color: #666666; font-size: 16px; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; } .view-info a:hover span { color: #0066d9; } .view-texts { color: #666666; font-size: 16px; } .view-texts img { max-width: 100%; width: auto; height: auto; } .view-flex { float: left; width: 134px; } .view-time { padding: 22px 22px 25px; background: #0066d9; text-align: center; color: #fff; font-family: "Helvetica"; } .view-time b { display: block; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); line-height: 1; font-size: 50px; font-weight: normal; } .view-time time { display: block; margin-top: 14px; line-height: 1; font-size: 16px; } .introduct { position: relative; z-index: 3; padding: 65px 10% 158px; } .introduct-fix strong { display: block; text-align: center; line-height: 1.2; color: #0066d9; font-size: 38px; font-weight: normal; } .introduct-text { margin-top: 42px; } .introduct-text p { color: #333333; font-size: 16px; } .introduct-data { margin-top: 90px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .introduct-item { text-align: center; } .introduct-item p { margin-bottom: 20px; line-height: 1; color: #333333; font-size: 16px; } .introduct-item p b { display: inline-block; margin-right: 8px; color: #0066d9; font-size: 54px; font-family: "Swiss721BTBlackCondensed"; } .introduct-item span { display: block; color: #666666; font-size: 16px; line-height: 1.8; } .history { position: relative; z-index: 3; padding: 100px 0 150px; overflow: hidden; } .history-bg { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 130%; background-position: center top; -o-background-size: cover; background-size: cover; } .history-title { text-align: center; } .history-title strong, .history-title small { color: #fff; } .z_about_process { width: 100%; padding: 8.85416vw 0; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background-position: center; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; } .z_about_process .z_index_tit { margin-bottom: 6.77083vw; padding: 0 10.41666vw; -moz-box-sizing: border-box; box-sizing: border-box; } .z_process_warp { position: relative; padding: 0 10.6vw; margin-top: 150px; -moz-box-sizing: border-box; box-sizing: border-box; } .z_process_swiper { height: 360px; position: relative; width: 100%; color: #fff; } /* .z_process_swiper::before{ content: ""; display: block; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; top: 50%; z-index: 1;} */ .z_process_warp::after { content: ""; z-index: 1; display: block; width: 100%; background: #fff; height: 1px; position: absolute; left: 0; top: 180px; } .z_process_swiper .item { position: relative; font-size: 16px; line-height: 24px; height: 180px; -moz-box-sizing: border-box; padding-left: 24px; box-sizing: border-box; } .z_process_swiper .swiper-slide::before { content: ""; display: block; width: 100%; height: 180px; background: url(../images/line.png) no-repeat left bottom; -o-background-size: 100% auto; background-size: 100% auto; position: absolute; left: 0; top: 0; } .z_process_swiper .item::after { content: ""; display: block; width: 1px; height: 100%; position: absolute; left: -1px; top: 0; z-index: 1; background: #fff; } .z_process_swiper .item .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; left: -6px; top: 0px; z-index: 1; } .z_process_swiper .item .dot::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); position: absolute; -webkit-animation: circle-opacity 1s infinite; -moz-animation: circle-opacity 1s infinite; -o-animation: circle-opacity 1s infinite; animation: circle-opacity 1s infinite; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(0, 0); -moz-transform: translate(-50%, -50%) scale(0, 0); -ms-transform: translate(-50%, -50%) scale(0, 0); -o-transform: translate(-50%, -50%) scale(0, 0); transform: translate(-50%, -50%) scale(0, 0); } .z_process_swiper .item:nth-child(even) { margin-top: 180px; } .z_process_swiper .item:nth-child(even) .dot { bottom: 0px; top: auto; } .z_process_swiper .item:nth-child(2n)::before { left: -1px; } .z_process_swiper .item { width: 50%; float: left; text-align: left; } .z_process_swiper .item:nth-child(2n) { margin-bottom: -4px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-flex-direction: column-reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .z_process_swiper .item:nth-child(2n) span { margin-bottom: -4px; } .z_process_swiper .item:nth-child(2n) p { margin-top: 0; margin-bottom: 8px; } .z_process_swiper .item .con { display: block; font-weight: bold; width: 100%; } .z_process_swiper .item p { white-space: nowrap; width: 100%; margin-top: 8px; font-size: 16px; font-weight: normal; } .z_process_warp .btn { display: block; color: #fff; outline: none; -webkit-transition: ease 1s; -o-transition: ease 1s; -moz-transition: ease 1s; transition: ease 1s; position: absolute; z-index: 2; top: 240px; cursor: pointer; width: 64px; height: 64px; background: -webkit-linear-gradient(116deg, #43A2DB, #DC87B3); background: -moz-linear-gradient(116deg, #43A2DB, #DC87B3); background: -o-linear-gradient(116deg, #43A2DB, #DC87B3); background: linear-gradient(-26deg, #43A2DB, #DC87B3); border-radius: 50%; line-height: 64px; text-align: center; } .z_process_warp .prev { left: 40px; } .z_process_warp .next { right: 40px; } .z_process_warp .btn:hover { border-radius: 30%; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); } .z_process_warp .btn:hover .iconfont { -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); transform: rotate(-40deg); } .z_process_warp .iconfont { -webkit-transition: ease 0.5s; -o-transition: ease 0.5s; -moz-transition: ease 0.5s; transition: ease 0.5s; display: inline-block; } @-webkit-keyframes circle-opacity { from { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } to { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2); } } @-moz-keyframes circle-opacity { from { opacity: 1; -moz-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } to { opacity: 0; -moz-transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2); } } @-o-keyframes circle-opacity { from { opacity: 1; -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } to { opacity: 0; -o-transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2); } } @keyframes circle-opacity { from { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } to { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(2); -moz-transform: translate(-50%, -50%) scale(2); -o-transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2); } } .article-block.list-left .swiper-slide .item { opacity: 0; visibility: hidden; -webkit-transform: translateX(80px); -moz-transform: translateX(80px); -ms-transform: translateX(80px); -o-transform: translateX(80px); transform: translateX(80px); -webkit-transition: 0.8s; -o-transition: 0.8s; -moz-transition: 0.8s; transition: 0.8s; } .articleShow.list-left .swiper-slide .item { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .articleShow.list-left .swiper-slide .item:nth-child(2) { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .articleShow.list-left .swiper-slide:nth-child(2) .item { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .articleShow.list-left .swiper-slide:nth-child(2) .item:nth-child(2) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .articleShow.list-left .swiper-slide:nth-child(3) .item { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .articleShow.list-left .swiper-slide:nth-child(3) .item:nth-child(2) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .articleShow.list-left .swiper-slide:nth-child(4) .item { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } .articleShow.list-left .swiper-slide:nth-child(4) .item:nth-child(2) { -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } .articleShow.list-left .swiper-slide:nth-child(5) .item { -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } .articleShow.list-left .swiper-slide:nth-child(5) .item:nth-child(2) { -webkit-transition-delay: 1.8s; -moz-transition-delay: 1.8s; -o-transition-delay: 1.8s; transition-delay: 1.8s; } .corporate { position: relative; z-index: 3; padding: 115px 10% 96px; background: #f5faff; overflow: hidden; } .corporate-bg { position: absolute; right: -18.6%; top: 0; z-index: -1; width: 85%; height: 100%; background-position: right center; background-repeat: no-repeat; } .corporate-fix { margin-top: 20px; width: 700px; max-width: 100%; } .corporate-item { padding: 38px 0 32px; border-bottom: 2px solid #e9f0f8; } .corporate-info { margin-bottom: 22px; } .corporate-info:last-child { margin-bottom: 0; } .corporate-info dt { display: block; float: left; position: relative; padding-left: 18px; margin-top: 4px; width: 110px; line-height: 1; border-right: 1px solid #c9d4df; font-size: 18px; } .corporate-info dt:before { position: absolute; left: 0; top: 50%; margin-top: -3px; content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0066d9; } .corporate-info dd { margin-left: 150px; margin-top: -6px; color: #666666; font-size: 16px; } .vision { position: relative; z-index: 3; padding: 80px 10% 76px; overflow: hidden; } .vision-bg { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 200%; background-position: center top; -o-background-size: 100% auto; background-size: 100% auto; } .vision-wrap { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .vision-title small { color: #fff; opacity: 0.5 !important; } .vision-title strong { color: #fff; } .vision-texts { margin-left: 156px; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: -10px; } .vision-texts p { color: #fff; font-size: 26px; line-height: 2; } .company-culture { position: relative; z-index: 3; padding: 92px 10% 67px; overflow: hidden; } .company-bg { position: absolute; right: 0; top: 0; z-index: -1; width: 80.8333%; height: 130%; background-position: center top; -o-background-size: cover; background-size: cover; } .culture-title { text-align: center; } .culture-list { margin-top: 116px; width: 1170px; max-width: 100%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .culture-list li { position: relative; z-index: 3; padding-bottom: 42px; border-bottom: 2px solid #c5c5c5; width: 30.08%; margin-right: 4.88%; margin-bottom: 68px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .culture-list li:before { content: ""; width: 0; height: 2px; background: #0066d9; position: absolute; right: 0; bottom: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; z-index: -1; } .culture-list li:hover:before, .culture-list li.active:before { width: 100%; right: auto; left: 0; } .culture-list li:before { bottom: -2px; } .culture-list li:hover em { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .culture-list li:hover b { background: #0066d9; color: #fff; } .culture-list li:hover .culture-text strong { color: #0066d9; } .culture-list li:nth-child(3n+3) { margin-right: 0; } .culture-list li em { display: block; position: absolute; right: 0; top: -20px; font-style: normal; line-height: 1; color: #e5e3e3; font-size: 180px; font-family: "Geometric415BlackBT"; z-index: -1; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; } .culture-list li b { display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 50%; color: #000000; font-size: 30px; background: #f2f2f2; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .culture-text { -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 14px; min-height: 174px; } .culture-text strong { display: block; margin-bottom: 23px; line-height: 60px; color: #333333; font-size: 24px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .culture-text p { color: #999999; font-size: 14px; line-height: 2.2; } .status-box { position: relative; z-index: 3; padding: 84px 10% 100px; overflow: hidden; } .status-bg { position: absolute; left: 0; top: 0; background-position: center; -o-background-size: cover; background-size: cover; width: 100%; height: 130%; z-index: -1; } .status-title { margin: auto; margin-bottom: 96px; max-width: 100%; width: 1030px; text-align: center; } .status-title strong { display: block; margin-bottom: 22px; line-height: 1; color: #fff; font-size: 44px; font-weight: normal; } .status-title p { color: #ffffff; font-size: 16px; line-height: 2; } .status-list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .status-item { padding: 38px 42px 42px; width: 47.91%; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .status-imgs { width: 52.833%; } .status-imgs figure { position: relative; display: block; padding-bottom: 75.792%; height: 0; overflow: hidden; line-height: 1; } .status-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .status-text { width: 42.878%; } .status-text strong { margin-bottom: 16px; display: block; color: #333333; font-size: 18px; line-height: 1.6; height: 56px; } .status-hidden { padding-right: 30px; height: 196px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .status-hidden p { color: #333333; font-size: 16px; } .honor-box { position: relative; z-index: 3; background: #f5faff; padding: 94px 10% 188px; } .honor-title { width: 872px; } .honor-title strong { color: #0066d9; } .honor-title p { color: #333333; } .honor-tbas { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .honor-list { width: 26.367%; position: relative; z-index: 3; } .honor-list:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; background: #eeeeee; width: 2px; height: 100%; } .honor-list li { position: relative; margin-bottom: 11px; padding-left: 30px; height: 41px; line-height: 41px; color: #999999; font-size: 16px; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .honor-list li.active { color: #333333; font-weight: bold; } .honor-list li.active:before { height: 100%; bottom: auto; top: 0; } .honor-list li:last-child { margin-bottom: 0; } .honor-list li:before { position: absolute; left: 0px; bottom: 0; content: ""; width: 2px; height: 0; background: #0066d9; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; } .honor-swiper { width: 67.838%; } .honor-slide { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .honor-imgs { width: 52.69%; -moz-box-sizing: border-box; box-sizing: border-box; } .honor-imgs figure { border: 6px solid #0066d9; position: relative; display: block; padding-bottom: 74.9%; height: 0; overflow: hidden; line-height: 1; } .honor-imgs figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; } .honor-texts { padding-top: 16px; width: 34%; } .honor-texts strong { display: block; margin-bottom: 22px; line-height: 1.5; color: #0066d9; font-size: 22px; } .honor-texts p { color: #666666; font-size: 16px; line-height: 2; } .download { position: relative; z-index: 3; padding: 75px 10% 228px; background: #f5faff; } .common-center { text-align: center; } .searchs { width: 944px; max-width: 100%; position: relative; margin: auto; margin-top: 43px; background: #fff; border-radius: 24px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.05); } .searchs .text { -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 26px; width: 100%; height: 48px; line-height: 48px; color: #999999; font-size: 16px; font-family: "寰蒋闆呴粦"; background: none; outline: none; border: none; } .searchs .sub { position: absolute; right: 26px; line-height: 48px; color: #000000; font-size: 22px; border: none; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; cursor: pointer; background: none; } .searchs .sub:hover { color: #0066d9; } .download-list { margin-top: 60px; } .download-list li { margin-bottom: 22px; } .download-list li a { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: 68px; padding: 0 28px 0 30px; background: #fff; border-radius: 10px; } .download-list li a:hover span { color: #0066d9; } .download-list li a span { display: block; max-width: 80%; color: #333333; font-size: 16px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .download-list li a span i { display: inline-block; position: relative; top: -1px; vertical-align: middle; margin-right: 15px; color: #0066d9; font-size: 24px; font-style: normal; } .download-list li a p { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #666666; font-size: 16px; font-family: "Helvetica"; } .download-list li a b { display: inline-block; margin-left: 11px; color: #bcbcbc; font-size: 22px; font-weight: normal; } .complaint { padding: 85px 10% 104px; background-position: center bottom; -o-background-size: cover; background-size: cover; } .complaint-wrap { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 82px 58px 92px 67px; background: #fff; border-radius: 10px; overflow: hidden; border-bottom: 7px solid #0066d9; } .complaint-text strong { display: block; line-height: 1.5; color: #0066d9; font-size: 38px; font-weight: normal; } .complaint-info { margin-top: 80px; margin-bottom: 155px; } .complaint-info p { color: #333333; font-size: 16px; } .tels p { margin-bottom: 22px; line-height: 1; color: #333333; font-size: 16px; } .tels b { display: block; line-height: 1; color: #0066d9; font-size: 32px; font-weight: normal; } .messages { width: 65.67%; } .row { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .row .text { -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 24px; padding-left: 20px; width: 49.13%; height: 46px; line-height: 46px; color: #999999; font-size: 16px; border: 1px solid #dadada; border-radius: 6px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; } .row .text::-webkit-input-placeholder { color: #999; } .row .text:focus { border-color: #0066d9; } .row .text:focus::-webkit-input-placeholder { opacity: 0; visibility: hidden; } .row1 .text { width: 100%; } .row1 .textarea { font-family: "寰蒋闆呴粦"; height: 135px; padding: 12px 20px; line-height: 1.6; resize: none; } .lzsub input { -moz-box-sizing: border-box; box-sizing: border-box; border: none; padding: 0; margin: 0; width: 454px; max-width: 100%; height: 50px; line-height: 50px; text-align: center; border-radius: 8px; background: #0066d9; outline: none; color: #fff; font-size: 16px; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; cursor: pointer; } .row2 .text { width: 32%; } .complaint-info1 { margin-top: 80px; margin-bottom: 100px; } .contact-uss { padding: 97px 10% 90px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .add-list { width: 42.578%; } .add-list p { position: relative; height: 74px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 10px; border-bottom: 1px solid #eeeeee; color: #333333; font-size: 16px; } .add-list p:before { position: absolute; left: 0; bottom: -1px; content: ""; width: 54px; height: 1px; background: #0066d9; } .tels1 b { font-weight: bold; } .map { height: 634px; } .anchorBL { display: none !important; } .BMap_bubble_title { color: #0066d9; font-size: 14px !important; } .flex-search { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 99; } .flex-item { position: relative; margin-bottom: 3px; cursor: pointer; } .flex-item:last-child { margin-bottom: 0; } .flex-item:hover span { background: #095db7; color: #fff; } .flex-item:hover span i { color: #fff; } .flex-item span { display: block; box-sizing: border-box; text-align: center; padding-top: 12px; width: 70px; height: 70px; border-radius: 3px; background: #f3f9f4; color: #333333; font-size: 12px; line-height: 1; transition: 0.38s; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); } .flex-item span i { display: block; margin-bottom: 10px; line-height: 1; color: #095db7; font-style: normal; font-size: 24px; font-weight: bold; transition: 0.38s; } .flex-item:hover .search-box { opacity: 1; visibility: visible; pointer-events: visible; transform: translateX(0px); } .search-box { position: absolute; right: 100%; top: 12px; padding-right: 25px; opacity: 0; visibility: hidden; transform: translateX(-40px); pointer-events: none; transition: 0.4s; } .search-wr { position: relative; } .search-wr:before { position: absolute; right: -8px; top: 50%; margin-top: -6px; content: ""; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #095db7; } .search-wr .text { padding-left: 48px; width: 150px; box-sizing: content-box; height: 46px; line-height: 46px; background: #095db7; font-size: 14px; border: none; border-radius: 4px; color: #fff; } .search-wr .text::-webkit-input-placeholder { color: #fff; } .search-wr .text:focus::-webkit-input-placeholder { opacity: 0; visibility: hidden; } .search-wr .sub { display: block; position: absolute; left: 13px; top: 0; line-height: 45px; color: #fff; font-size: 22px; border: none; background: none; cursor: pointer; }