@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; } .center { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; } .loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #065396; z-index: 199; } .loader.active .circular { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } .loader.active .loader-logo img { opacity: 1; transition: 1s; } .loader.active .loader-line.left, .loader.active .loader-line.right { transform: scaleX(1); } .loader-circular { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 1210px; padding-bottom: 1210px; } .circular { position: absolute; left: 50%; top: 50%; width: 34.26%; height: 34.26%; border-radius: 50%; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); background: rgba(255, 255, 255, 0.05); transition: 1.8s; } .circular.circular2 { width: 54.64%; height: 54.64%; background: rgba(255, 255, 255, 0.02); } .circular.circular3 { width: 76.41%; height: 76.41%; background: rgba(255, 255, 255, 0.02); transition: 2.6s; } .circular.circular4 { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.02); transition: 3.4s; } .loader-text { position: absolute; left: 0; top: 50%; margin-top: -17px; width: 100%; z-index: 3; } .loader-line { position: absolute; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.3); } .loader-line:before { position: absolute; content: ""; width: 200px; height: 1px; background: #fff; } .loader-line.left { left: 0; right: 50%; margin-right: 230px; transform-origin: right center; transform: scaleX(0); transition: 4s; } .loader-line.left:before { right: 0; } .loader-line.right { right: 0; left: 50%; margin-left: 230px; transform-origin: left center; transform: scaleX(0); transition: 4s; } .loader-line.right:before { left: 0; } .loader-logo { position: relative; text-align: center; margin: auto; width: 233px; } .loader-logo img { display: block; width: 100%; height: auto; opacity: 0; } .loader-logo p { position: absolute; left: 0; top: 100%; width: 100%; margin-top: 24px; color: #fff; text-align: center; font-size: 30px; font-family: "Century Gothic"; line-height: 1; } .loader-logo p b { font-weight: normal; } .header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; height: 79px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: 0.65s; } .header:hover, .header.scroll { background: #008bc4; } .header__logo { float: left; } .menubtn { float: left; padding-top: 39px; width: 80px; height: 80px; background: #008bc4; box-sizing: border-box; } .logo { float: left; position: relative; margin-left: 18px; margin-top: 22px; width: 232px; } .logo img { display: block; width: auto; max-width: 100%; height: auto; transition: 0.45s; } .logo img.hide { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } .header__rights { float: right; } .navs { float: left; } .navs > li { float: left; padding: 0 32px; } .navs > li:hover a:before, .navs > li.active a:before { width: 32px; margin-left: -16px; } .navs > li:first-child { padding-left: 0; } .navs > li > a { display: block; position: relative; line-height: 79px; color: #fff; font-size: 16px; } .navs > li > a:before { position: absolute; left: 50%; bottom: 0; content: ""; height: 3px; background: #fff; transition: 0.4s; width: 0; margin-left: 0; } .header__menus { position: absolute; left: 0; top: 100%; background: #008bc4; width: 100%; padding: 20px 0 46px; border-top: 1px solid rgba(255, 255, 255, 0.2); z-index: 20; text-align: right; display: none; } .header__menu--wrap { padding-right: 169px; display: inline-flex; display: inline-flexbox; text-align: center; font-size: 0; } .header__menu__item { display: inline-block; width: 128px; vertical-align: top; } .header__menu__item li { margin-bottom: 10px; } .header__menu__item li:last-child { margin-bottom: 0; } .header__menu__item li a { display: inline-block; color: #ffffff; font-size: 14px; opacity: 0.5; } .header__menu__item li a:hover { opacity: 1; } .header__href { margin-left: 12px; display: flex; display: -webkit-flex; float: left; } .header__href .search .serachbtn, .header__href .enterclose > a { display: block; box-sizing: border-box; padding: 20px 0; width: 78px; height: 79px; line-height: 70px; color: #fff; line-height: 1.4; font-size: 20px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; border-left: 1px solid rgba(255, 255, 255, 0.2); } .header__href .search .serachbtn:last-child, .header__href .enterclose > a:last-child { font-size: 20px; } .enterclose { position: relative; } .enterclose:hover .enter-down { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: visible; } .search { position: relative; } .search:hover .sub { color: #008bc4; } .search:hover .serch-text { opacity: 1; visibility: visible; right: 0; } .search .sub { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; background: none; line-height: 70px; color: #fff; font-size: 20px; transition: 0.4s; z-index: 4; cursor: pointer; font-weight: bold; } .serch-text { position: absolute; right: -260px; top: 0; height: 100%; opacity: 0; visibility: hidden; transition: 0.5s; } .serch-text input { box-sizing: border-box; width: 240px; padding-left: 20px; height: 79px; line-height: 79px; color: #333; background: #fff; border: none; outline: none; font-size: 14px; } .banner { position: relative; overflow: hidden; height: 100vh; } .banner-slide { overflow: hidden; } .banner-slide figure { display: block; line-height: 1; overflow: hidden; transform: scale(1.15, 1.15); transition: 1s linear 2s; } .banner-slide figure img { display: block; position: relative; } .banner-slide.swiper-slide-active figure { transition: 6s linear; transform: scale(1); } .banner-slide.swiper-slide-active .bhide { visibility: visible; animation: letterL 2s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @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; } } .bhide { visibility: hidden; transform: translateY(-100px); } .btext { position: absolute; left: 12.5%; right: 12.5%; top: 50%; margin-top: -88px; z-index: 5; } .btext p { color: #ffffff; font-size: 20px; letter-spacing: 3px; } .btitle { display: inline-block; position: relative; padding-bottom: 35px; margin-bottom: 30px; } .btitle i { display: block; position: absolute; left: 0; right: 16px; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.3); } .btitle i:before { position: absolute; left: 0; bottom: 0px; content: ""; width: 113px; height: 2px; background: #fff; } .btitle strong { display: block; line-height: 1.2; color: #fff; font-size: 48px; letter-spacing: 16px; } .btitle small { display: block; letter-spacing: 3px; margin-top: 14px; line-height: 1.1; color: #ffffff; font-size: 15px; text-transform: uppercase; font-family: "Helvetica"; } .banner-prev { position: absolute; left: 12.5%; bottom: 65px; z-index: 10; overflow: hidden; } .banner-prev span { display: block; float: left; position: relative; z-index: 3; margin-right: 30px; width: 48px; height: 48px; border: 1px solid #fff; text-align: center; line-height: 48px; color: #fff; font-size: 26px; cursor: pointer; transition: 0.4s; overflow: hidden; } .banner-prev span:hover { color: #000; } .banner-prev span:hover:before { transform: scale(1); } .banner-prev span:before { content: ""; position: absolute; left: -150%; top: -150%; background: #fff; width: 300%; height: 300%; border-radius: 50%; z-index: -1; transition: 0.5s; transform: scale(0); } .navs__pop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(6, 83, 150, 0.9); z-index: 5; overflow: hidden; height: 0; transition: 1.5s cubic-bezier(0.77, 0, 0.175, 1); } .navs__pop.show { height: 100%; } .navs__menu-wrap { position: relative; height: 100vh; } .Circles { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none !important; z-index: 0; } .Circles-circle { display: block; position: absolute; will-change: transform; transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(1) { width: 21.87vw; height: 21.87vw; top: -7.26vw; left: -7.26vw; } .Circles-circle:nth-child(1) .Circles-dot { opacity: 0.05; } .Circles-circle:nth-child(2) { width: 35vw; height: 35vw; top: -11.7vw; left: -11.7vw; transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(2) .Circles-dot { opacity: 0.04; } .Circles-circle:nth-child(3) { width: 48vw; height: 48vw; top: -16vw; left: -16vw; transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(3) .Circles-dot { opacity: 0.03; } .Circles-circle:nth-child(4) { width: 63.4vw; height: 63.4vw; top: -21.1vw; left: -21.1vw; transition: 3.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(4) .Circles-dot { opacity: 0.02; } .Circles-circle:nth-child(5) { width: 92vw; height: 92vw; top: -30.7vw; left: -30.7vw; transition: 3.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(5) .Circles-dot { opacity: 0.02; } .Circles-dot { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .Circles-dot:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f2f2f2; border-radius: 50%; transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s; will-change: transform; } .navs__menus { position: absolute; left: 0; top: 50%; margin-top: -263px; width: 100%; } .navs__logos { text-align: center; } .navs__logos img { display: block; width: 233px; margin: auto; } .navs__li { margin-top: 90px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .navs__item { display: block; width: 194px; } .navs__item:last-child { width: auto; } .navs__item dt { display: block; margin-bottom: 42px; } .navs__item dt a { display: inline-block; color: #ffffff; font-size: 16px; line-height: 1.6; } .navs__item dd { display: block; } .navs__item dd p { margin-bottom: 14px; } .navs__item dd p a { display: inline-block; color: #ffffff; font-size: 16px; opacity: 0.5; } .navs__item dd p a:hover { opacity: 1; } .introduct { position: relative; height: 100vh; background-position: center; background-size: cover; } .introduct__wrap { position: absolute; left: 50%; top: 50%; margin-left: -600px; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 1200px; } .introduct__text { float: left; width: 60%; } .intro__title { position: relative; padding-bottom: 48px; } .intro__title:before { position: absolute; left: 0; bottom: 0; content: ""; width: 43px; height: 3px; background: #fff; } .intro__title strong { display: block; margin-bottom: 10px; line-height: 1; color: #fff; font-size: 36px; font-weight: normal; } .intro__title small { display: block; line-height: 1; color: #fff; font-size: 18px; font-family: "Century Gothic"; text-transform: uppercase; } @media screen and (min-width: 1025px) { .intro__title:before { transform: scaleX(0); transition: 0.6s; transform-origin: left center; } .intro-hide { overflow: hidden; } .intro-hide strong, .intro-hide small { opacity: 0; visibility: hidden; transform: translateY(100%); transition: 0.68s; } .intro__content { opacity: 0; visibility: hidden; transform: translateY(60px); transition: 0.78s; } .introduct__item, .chack__more, .informate__dit { opacity: 0; visibility: hidden; transform: translateY(50px); transition: 0.58s; } .introduct__sun:before { transform: scaleY(0); transition: 0.88s; } .introduct__sun:after { transform: scaleX(0); transition: 0.88s; } .introduct__sun li { opacity: 0; visibility: hidden; transition: 0.7s; transform: translateY(30px); } .business__earth .circulars { transform: rotate(180deg); transition: 1.8s; } .business__ico { opacity: 0; transform: translateY(-30px); transition: 0.65s; } .informate__line { transform: scaleY(0); transform-origin: center top; transition: 0.78s; } .informate__li li, .party__list li { opacity: 0; visibility: hidden; transform: translateY(60px); transition: 0.68s; } .contact__left, .contact__area { opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.8s; } } .home-slide.swiper-slide-active .intro-hide strong, .home-slide.swiper-slide-active .intro-hide small { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.45s; } .home-slide.swiper-slide-active .intro-hide small { transition-delay: 0.65s; } .home-slide.swiper-slide-active .intro__title:before { transform: scaleX(1); transition: 0.6s 0.8s; } .home-slide.swiper-slide-active .intro__content, .home-slide.swiper-slide-active .chack__more, .home-slide.swiper-slide-active .informate__dit { opacity: 1; visibility: visible; transform: translateY(0px); transition: 0.78s 0.5s; } .home-slide.swiper-slide-active .chack__more, .home-slide.swiper-slide-active .informate__dit { transition-delay: 0.7s; } .home-slide.swiper-slide-active .introduct__item { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.5s; } .home-slide.swiper-slide-active .introduct__item:nth-child(2) { transition-delay: 0.7s; } .home-slide.swiper-slide-active .introduct__item:nth-child(3) { transition-delay: 0.9s; } .home-slide.swiper-slide-active .introduct__item:nth-child(4) { transition-delay: 1.1s; } .home-slide.swiper-slide-active .introduct__item:nth-child(5) { transition-delay: 1.3s; } .home-slide.swiper-slide-active .introduct__sun:before { transform: scaleY(1); transition: 1s 0.5s; } .home-slide.swiper-slide-active .introduct__sun:after { transform: scaleX(1); transition: 1s 0.5s; } .home-slide.swiper-slide-active .introduct__sun li { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.5s; } .home-slide.swiper-slide-active .introduct__sun li:nth-child(2) { transition-delay: 0.7s; } .home-slide.swiper-slide-active .introduct__sun li:nth-child(3) { transition-delay: 0.9s; } .home-slide.swiper-slide-active .introduct__sun li:nth-child(4) { transition-delay: 1.1s; } .home-slide.swiper-slide-active .business__earth .circulars { transform: rotate(0deg); transition: 1.8s 0.5s; } .home-slide.swiper-slide-active .business__ico { opacity: 1; transform: translateY(0px); transition-delay: 0.7s; } .home-slide.swiper-slide-active .business__ico.business__ico2 { transition-delay: 0.9s; } .home-slide.swiper-slide-active .business__ico.business__ico3 { transition-delay: 1.1s; } .home-slide.swiper-slide-active .business__ico.business__ico4 { transition-delay: 1.3s; } .home-slide.swiper-slide-active .business__ico.business__ico5 { transition-delay: 1.5s; } .home-slide.swiper-slide-active .business__ico.business__ico6 { transition-delay: 1.7s; } .home-slide.swiper-slide-active .business__ico.business__ico7 { transition-delay: 1.9s; } .home-slide.swiper-slide-active .business__ico.business__ico8 { transition-delay: 2.1s; } .home-slide.swiper-slide-active .informate__line { transform: scaleY(1); transition-delay: 0.5s; } .home-slide.swiper-slide-active .informate__li li, .home-slide.swiper-slide-active .party__list li { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.45s; } .home-slide.swiper-slide-active .informate__li li:nth-child(2), .home-slide.swiper-slide-active .party__list li:nth-child(2) { transition-delay: 0.65s; } .home-slide.swiper-slide-active .informate__li li:nth-child(3), .home-slide.swiper-slide-active .party__list li:nth-child(3) { transition-delay: 0.85s; } .home-slide.swiper-slide-active .informate__li li:nth-child(4), .home-slide.swiper-slide-active .party__list li:nth-child(4) { transition-delay: 1.05s; } .home-slide.swiper-slide-active .informate__li li:nth-child(5), .home-slide.swiper-slide-active .party__list li:nth-child(5) { transition-delay: 1.25s; } .home-slide.swiper-slide-active .contact__left, .home-slide.swiper-slide-active .contact__area { opacity: 1; visibility: visible; transform: translateY(0px); transition: 0.8s 0.45s; } .home-slide.swiper-slide-active .contact__area { transition-delay: 0.7s; } .intro__content { margin-top: 32px; margin-bottom: 60px; } .intro__content p { color: #fff; font-size: 14px; line-height: 2.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .introduct__data { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .introduct__item { position: relative; } .introduct__item span { display: block; line-height: 1; color: #fff; opacity: 0.5; font-size: 16px; } .introduct__item p { margin-top: 12px; color: #fff; font-size: 18px; line-height: 1; } .introduct__item p b { display: inline-block; margin-right: 5px; color: #ffa800; font-size: 48px; font-weight: normal; font-family: "Avian Regular"; } .introduct__item p i { display: block; position: absolute; right: 0px; top: 13px; color: #ffa800; font-size: 30px; line-height: 1; font-style: normal; font-family: "Avian Regular"; } .introduct__sun { float: right; position: relative; top: 43px; width: 310px; } .introduct__sun:before { position: absolute; left: 50%; top: 0; content: ""; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.2); } .introduct__sun:after { position: absolute; left: 0; top: 50%; content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); } .introduct__sun li { box-sizing: border-box; padding: 22px 0 40px; width: 50%; float: left; } .introduct__sun li a:hover .introduct__ico > b:first-child { opacity: 0; transition-delay: 0.3s; } .introduct__sun li a:hover .introiconhide { height: 100%; } .introduct__sun li a:hover span { color: #ffa800; } .introduct__sun li:nth-child(2n+2) { border-right: none; text-align: right; } .introduct__sun li:nth-child(n+3) { padding: 48px 0 14px; border-bottom: none; } .introduct__wr { display: inline-block; text-align: center; } .introduct__wr b { display: inline-block; margin: auto; margin-bottom: 20px; position: relative; line-height: 1; z-index: -1; text-align: center; color: #fff; font-size: 47px; font-weight: normal; transition: 0.48s; } .introduct__wr span { display: block; line-height: 1; color: #fff; font-size: 20px; transition: 0.4s; } .introduct__ico { position: relative; } .introiconhide { position: absolute; width: 100%; height: 0; left: 0; bottom: 0; overflow: hidden; transition: 0.58s; } .introiconhide b { position: absolute; width: 100%; left: 0; bottom: 0; color: #ffa800; text-align: center; } .common__height { position: relative; height: 100vh; background-position: center; background-size: cover; } .business { position: relative; z-index: 3; background-position: center; background-size: cover; } .business-swipers { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; } .business-slide { overflow: hidden; } .business-slide.swiper-slide-active .business-bg { transform: scale(1); transition: 1.5s 0s; } .business-bg { height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.1); transition: 1s 0.5s; } .business__wrap { position: absolute; left: 50%; margin-left: -720px; top: 55%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 1440px; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; } .businee__left { width: 430px; } .business__con p { font-size: 16px; letter-spacing: 1px; } .chack__more a { display: block; position: relative; z-index: 3; text-align: center; width: 134px; height: 48px; line-height: 48px; border: 1px solid #fff; color: #fff; font-size: 16px; letter-spacing: 2px; overflow: hidden; } .chack__more a:hover { color: #008bc4; } .chack__more a:hover:before { top: -25%; } .chack__more a:before { content: ""; position: absolute; left: 0; top: 130%; z-index: -1; width: 100%; height: 150%; background: #fff; transform: skewY(10deg); transition: 0.48s; } .business__right { position: relative; margin-right: 15%; width: 587px; } .business__earth { position: relative; } .business__earth .circulars { width: 100%; height: auto; } .business__earth .earth { width: 82.53%; height: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; animation: moveScroll 20s linear infinite; } @keyframes moveScroll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .business__ico { position: absolute; } .business__ico:hover b { border-color: #008bc4; transition-delay: 0.25s; } .business__ico:hover b:before { opacity: 1; visibility: visible; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .business__ico b { display: block; position: relative; z-index: 3; width: 66px; height: 66px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; text-align: center; line-height: 66px; color: #fff; font-size: 30px; font-weight: normal; transition: 0.35s; } .business__ico b:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: #008bc4; border-radius: 50%; opacity: 0; visibility: hidden; transform: rotateY(180deg); transition: 0.56s; } .business__ico span { display: block; line-height: 1; color: #ffffff; font-size: 16px; white-space: nowrap; } .business__ico1 { left: 50%; margin-left: -34px; top: -35px; transform: translateX(-3px); } .business__ico1 span { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 18px; } .business__ico2 { left: 80.74%; top: 10.58%; } .business-l a { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .business-l a span { margin-left: 9px; } .business__ico3 { left: 94%; top: 44.1%; } .business__ico4 { left: 80.91%; bottom: 11%; } .business__ico5 { left: 50%; margin-left: -34px; bottom: -35px; } .business__ico5 span { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; margin-top: 18px; } .business__ico6 { right: 80.91%; bottom: 11.5%; } .business-r a { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; flex-direction: row-reverse; -webkit-flex-direction: row-reverse; } .business-r a span { margin-right: 9px; } .business__ico7 { right: 94%; top: 44.1%; } .business__ico8 { right: 80.74%; top: 10.58%; } .informate { background-position: center; background-size: cover; } .informate__wr { position: absolute; left: 0; top: 80px; bottom: 0; width: 100%; } .informate__title { position: absolute; left: 13.54%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 86px 0; width: 396px; background: rgba(0, 0, 0, 0.05); text-align: center; } .informate__title .intro__title { padding-bottom: 0; } .informate__title .intro__title strong { margin-bottom: 16px; } .informate__title .intro__title:before { display: none; } .informate__line { position: relative; margin: 33px auto 24px; width: 1px; height: 68px; background: rgba(255, 255, 255, 0.2); } .informate__line:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 30px; background: #ffa800; } .informate__dit { padding-bottom: 50px; position: relative; } .informate__dit:before { position: absolute; left: 50%; margin-left: -8px; bottom: 0; content: "/"; color: #fff; font-size: 16px; line-height: 1; } .informate__dit p { margin-bottom: 8px; text-align: center; } .informate__dit p a { display: inline-block; color: #fff; font-size: 16px; } .informate__dit p a:hover { color: #ffa800; } .informate__fix { position: absolute; right: 78px; top: 0; height: 100%; width: 50%; box-sizing: border-box; padding: 130px 0; border-left: 1px solid rgba(255, 255, 255, 0.2); } .informate__li { height: 100%; } .informate__li li { position: relative; height: 33.3333%; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .informate__li li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); } .informate__li li a { display: block; position: relative; padding: 0 16.84% 0 6%; } .informate__li li a:hover strong { color: #ffa800; } .informate__li li a:hover .informate__data:before { background: #ffa800; } .informate__li li a:hover .informate__data b, .informate__li li a:hover .informate__data i { color: #ffa800; } .informate__li li a strong { display: block; margin-bottom: 17px; line-height: 1.1; color: #fff; font-size: 18px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.38s; } .informate__li li a p { color: #ffffff; font-size: 14px; opacity: 0.5; line-height: 2.2; } .informate__data { position: absolute; left: -118px; top: 0; padding-right: 38px; font-family: "Century Gothic"; text-align: right; } .informate__data:before { position: absolute; right: -8px; top: 3px; content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; transition: 0.38s; } .informate__data b { display: block; margin-bottom: 7px; color: #fff; line-height: 1; font-weight: normal; font-size: 30px; transition: 0.38s; } .informate__data i { display: block; line-height: 1; color: #fff; font-size: 18px; font-style: normal; transition: 0.38s; } .party-wrok { position: absolute; left: 0; top: 55%; width: 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); text-align: center; } .party-wrok .intro__title { padding-bottom: 0; } .party-wrok .intro__title strong { margin-bottom: 12px; } .party-wrok .intro__title:before { display: none; } .party__list { margin-top: 80px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .party__list li { position: relative; padding: 0 62px; } .party__list li:before { position: absolute; right: 0; top: 50%; margin-top: -18px; content: ""; width: 1px; height: 36px; background: rgba(255, 255, 255, 0.2); } .party__list li:last-child:before { display: none; } .party__list li a { display: block; position: relative; z-index: 3; padding: 44px 0 40px; width: 102px; text-align: center; color: #fff; } .party__list li a:hover b { transform: translateY(-4px); } .party__list li a:hover:before { transform: scaleY(1); } .party__list li a:hover:after { opacity: 1; visibility: visible; transition-delay: 0.2s; } .party__list li a:before { position: absolute; left: 0; top: 0; z-index: -2; content: ""; width: 100%; height: 100%; border-radius: 51px; background: #008bc4; transition: 0.52s; transform: scaleY(0); } .party__list li a:after { position: absolute; left: 0; bottom: -10px; content: ""; width: 100%; height: 100px; border-radius: 51px; box-sizing: border-box; border: 1px solid #008bc4; z-index: -1; opacity: 0; visibility: hidden; transition: 0.4s; } .party__list li a b { display: block; line-height: 1; color: #fff; font-size: 29px; font-weight: normal; transition: 0.38s; } .party__list li a span { display: block; margin-top: 16px; line-height: 1; color: #fff; font-size: 18px; } .contact__wrap { position: absolute; left: 50%; margin-left: -720px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 1440px; } .contact__left { float: left; width: 46%; } .contact__tt { margin-bottom: 52px; } .contact__tt h4 { margin-bottom: 45px; color: #fff; font-size: 36px; line-height: 1.2; font-weight: normal; } .contact__adress p { margin-bottom: 16px; color: #fff; font-size: 16px; } .contact__adress p i { display: inline-block; margin-right: 18px; color: #fff; font-size: 16px; font-style: normal; } .contact-add p { color: #fff; font-size: 16px; font-weight: bold; line-height: 2; } .map { margin-top: 16px; height: 196px; width: 340px; border-radius: 10px; } .anchorBL { display: none !important; } .BMap_bubble_title { color: #008bc4; font-size: 16px; } .contact__area { float: right; box-sizing: border-box; padding: 45px 7.777% 60px; width: 50%; background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .measge__tt { display: block; margin-bottom: 34px; text-align: center; color: #fff; font-size: 24px; line-height: 1; } .contact__row { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .contact__row .text { box-sizing: border-box; margin-bottom: 38px; padding-left: 19px; width: 46.87%; height: 52px; line-height: 52px; color: #fff; font-size: 16px; border-radius: 6px; border: none; background: rgba(255, 255, 255, 0.3); } .contact__row .text::-webkit-input-placeholder { color: #fff; } .contact__row .text:focus::-webkit-input-placeholder { opacity: 0; } .contact__row .textarea { width: 100%; line-height: 1.5; padding: 12px 19px; height: 138px; resize: none; font-family: "微软雅黑"; } .contact__s { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .contact__s input { border: none; padding: 0; margin: 0; width: 46.87%; height: 52px; line-height: 52px; text-align: center; border-radius: 5px; color: #fff; font-size: 16px; transition: 0.48s; background: #9f9f9f; cursor: pointer; } .contact__s input:hover, .contact__s input:last-child { background: #008bc4; } .home__footer { position: absolute; left: 0; bottom: 0; padding: 17px 0; z-index: 5; width: 100%; background: rgba(50, 66, 73, 0.5); text-align: center; } .home__footer p, .home__footer a { display: inline-block; color: #fff; font-size: 14px; } .home__footer p { margin-right: 19px; } .enter { position: relative; display: inline-block; margin-left: 10px; cursor: pointer; } .enter span { position: relative; display: inline-block; padding-right: 30px; color: #fff; font-size: 14px; } .enter span i { position: absolute; right: 0; top: 50%; margin-top: -8px; display: inline-block; line-height: 1; font-style: normal; font-size: 16px; color: #fff; } .enter .enter-down { top: auto; bottom: 100%; padding-top: 0; padding-bottom: 18px; transform: translateY(-40px); } .enter .enter-down .enter-list:before { bottom: -7px; top: auto; border-bottom: none; border-top: 7px solid #fff; } .enter:hover .enter-down { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: visible; } .enter-down { position: absolute; left: 50%; margin-left: -80px; top: 100%; width: 160px; padding-top: 18px; opacity: 0; visibility: hidden; transform: translateY(40px); transition: 0.56s; pointer-events: none; } .enter-list { position: relative; background: #fff; border-radius: 8px; padding: 10px 0; text-align: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.16); } .enter-list:before { position: absolute; left: 50%; margin-left: -5px; top: -7px; content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #fff; } .enter-list li { margin-bottom: 8px; text-align: center; } .enter-list li:last-child { margin-bottom: 0; } .enter-list li a { display: inline-block; color: #2c3441; font-size: 14px; } .enter-list li a:hover { color: #008bc4; } .flex__menu { position: fixed; left: 0; top: 80px; width: 100%; z-index: 88; } .flex__menu:before { content: ""; width: 1px; position: fixed; top: 80px; bottom: 0; left: 79px; background: rgba(255, 255, 255, 0.2); } .flex__menu__right { width: 77px; position: fixed; right: 0; top: 80px; bottom: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); z-index: 88; } .wrapper .swiper-pagination1 { position: absolute; right: 33px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 8px; z-index: 10; } .wrapper .swiper-pagination1 span { position: relative; margin: 0; margin-bottom: 30px; cursor: pointer; width: 8px; height: 8px; background: none; opacity: 1; } .wrapper .swiper-pagination1 span.swiper-pagination-bullet-active:before { width: 19px; } .wrapper .swiper-pagination1 span:before { position: absolute; right: 0; top: 0; content: ""; width: 8px; height: 8px; background: #fff; border-radius: 4px; transition: 0.4s; } .wrapper .swiper-pagination1 span:last-child { margin-bottom: 0; } .flex__text { position: absolute; right: 0; bottom: 85px; width: 100%; } .flex__text__item { display: block; color: #ffffff; font-size: 14px; opacity: 0.2; line-height: 1; text-transform: uppercase; font-family: "Helvetica"; white-space: nowrap; transform: rotate(90deg); display: none; } .flex__text__item:first-child { display: block; } .flex__numble { position: absolute; right: 6px; bottom: 165px; font-family: "Helvetica"; color: #fff; font-size: 16px; line-height: 1; transform: rotate(90deg); -webkit-transform: rotate(90deg); } .flex__numble b { display: inline-block; opacity: 1; font-size: 24px; font-weight: normal; } .flex__numble span { display: inline-block; opacity: 0.2; } .flex__numble span.middles { margin: 0 4px; } .home-swiper { position: relative; height: 100vh; } .home-slide { overflow: hidden; } .pbanner { position: relative; overflow: hidden; } .pbanner figure { position: relative; display: block; padding-bottom: 45.8333%; height: 0; overflow: hidden; line-height: 1; } .pbanner figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .pbanner figure img { transition: 0s; } .ptext { position: absolute; left: 10%; top: 50%; margin-top: -120px; color: #fff; } .ptext small { display: block; margin-bottom: 22px; line-height: 1; text-transform: uppercase; font-size: 62px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 6px; } .ptext strong { display: block; position: relative; padding-bottom: 46px; margin-bottom: 36px; line-height: 1; color: #fff; font-size: 40px; letter-spacing: 4px; font-weight: normal; overflow: hidden; } .ptext strong:before { position: absolute; left: 0; bottom: 0; content: ""; width: 48px; height: 3px; background: #fff; } .ptext p { color: #fff; font-size: 18px; overflow: hidden; } .innerpage-menu { border-top: 5px solid #008bc4; } .innerpage-wrap { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; } .posite { display: flex; display: -webkit-flex; height: 84px; align-items: center; -webkit-align-items: center; } .posite span, .posite a, .posite b { display: block; color: #666666; font-size: 16px; font-weight: normal; } .posite a:hover { color: #008bc4; } .posite b { margin: 0 10px; } .leval-menu { display: flex; display: -webkit-flex; } .leval-menu li { margin-left: 74px; } .leval-menu li:first-child { margin-left: 0; } .leval-menu li:hover a, .leval-menu li.active a { color: #008bc4; } .leval-menu li a { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; line-height: 1.3; height: 84px; color: #666666; font-size: 16px; } .intro-wrap { padding-left: 10vw; } .introduct-texts { float: left; padding-top: 83px; width: 38.8888%; } .introduct-title { margin-bottom: 58px; } .introduct-title small { display: block; margin-bottom: 20px; color: #008bc4; font-size: 36px; text-transform: uppercase; font-family: "Avian Regular"; line-height: 1.2; } .introduct-title strong { display: block; line-height: 1.2; color: #333333; font-size: 36px; font-weight: normal; } .itroduct-contents p { color: #666666; font-size: 14px; line-height: 2.6; text-indent: 34px; } .introduct-rights { position: relative; float: right; width: 55.5555%; } .introduct-data { display: flex; display: -webkit-flex; } .introduct-data-item { flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; height: 358px; background: #008bc4; } .introduct-data-item:nth-child(2n+2) { background: #3ab3e5; } .intros-wrap { display: inline-block; position: relative; } .intros-wrap .introduct__item { opacity: 1; visibility: visible; transform: translateY(0px); } .intros-wrap .introduct__item span { color: #fff; opacity: 0.5; } .intros-wrap .introduct__item p { color: #ffffff; } .intros-wrap .introduct__item p b { color: #fff; } .intros-wrap .introduct__item p i { color: #fff; } .intorduct-imgs { height: 570px; background-position: center; background-size: cover; } .culture { padding: 156px 0 186px; background-attachment: fixed; background-position: center; background-size: cover; text-align: center; } .culture-wrap { margin: auto; width: 1010px; } .culture-title { margin-bottom: 124px; } .culture-title strong { display: block; margin-bottom: 10px; line-height: 1.2; letter-spacing: 2px; color: #fff; font-size: 36px; font-weight: normal; } .culture-title p { color: #fff; font-size: 18px; } .culture-item { position: relative; z-index: 3; width: 47.52%; float: left; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; box-sizing: border-box; height: 200px; border: 1px solid rgba(255, 255, 255, 0.46); } .culture-item:before { content: ""; width: 100%; height: 0; background: #008bc4; position: absolute; left: 0; bottom: 0; transition: 0.56s; z-index: -1; } .culture-item:hover, .culture-item.active { color: #008bc4; } .culture-item:hover:before, .culture-item.active:before { height: 100%; bottom: auto; top: 0; } .culture-item:hover { border-color: #008bc4; } .culture-item:hover figure img { transform: translateY(-8px); } .culture-item:hover .culture-text strong, .culture-item:hover .culture-text p { color: #fff; } .culture-item:nth-child(2n+2) { float: right; } .culture-item figure { display: block; position: relative; width: 100px; line-height: 1; } .culture-item figure img { display: block; width: 100%; height: auto; transition: 0.4s; } .culture-item figure img.hide { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } .culture-text { margin-left: 28px; padding-top: 12px; text-align: left; } .culture-text strong { display: block; margin-bottom: 20px; line-height: 1; letter-spacing: 3px; color: #fff; font-size: 24px; font-weight: normal; transition: 0.4s; } .culture-text p { color: #fff; font-size: 14px; transition: 0.4s; } .idea { position: relative; } .idea-left { float: left; position: relative; height: 800px; width: 30%; background: #008bc4; z-index: 3; } .idea-left:before { position: absolute; right: -18px; top: 50%; margin-top: -18px; content: ""; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 18px solid #008bc4; } .idea-wrap { position: absolute; left: 50%; margin-left: -192px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 384px; } .idea-title { margin-bottom: 56px; } .idea-title small { display: block; line-height: 1.2; color: #fff; font-size: 44px; font-family: "Avian Regular"; text-transform: uppercase; } .idea-title strong { display: block; margin-top: 12px; line-height: 1; color: #fff; font-size: 24px; font-weight: normal; letter-spacing: 2px; } .idea-fix p { color: #ffffff; font-size: 14px; line-height: 2; letter-spacing: 2px; } .idea-list { position: absolute; left: 30%; top: 0; width: 70%; height: 100%; } .idea-item { float: left; position: relative; width: 50%; height: 400px; box-sizing: border-box; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; } .idea-item:nth-child(2n+2) { border-right: none; } .idea-item:nth-child(n+3) { border-bottom: none; } .idea-inner { display: block; position: relative; line-height: 1; height: 100%; background-position: center; background-size: cover; opacity: 0; transition: 0.6s; } .idea-inner-text { position: absolute; left: 14.28%; right: 14.28%; top: 82px; } .idea-icon { margin-bottom: 46px; } .idea-icon b { display: block; margin-bottom: 20px; line-height: 1; color: #fff; font-size: 48px; font-weight: normal; } .idea-icon strong { display: block; line-height: 1; color: #fff; font-size: 24px; font-weight: normal; letter-spacing: 2px; } .idea-in p { color: #fff; font-size: 16px; line-height: 2.2; } .idea-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: #fff; overflow: hidden; transition: 0.6s; } .idea-w-icon { position: absolute; left: 0; top: 50%; margin-top: -46px; width: 100%; text-align: center; } .idea-w-icon .idea-icon { transition: 0.5s; } .idea-w-icon .idea-icon b { color: #008bc3; } .idea-w-icon .idea-icon strong { color: #333333; } .idea-item:hover .idea-inner { opacity: 1; } .idea-item:hover .idea-w-icon .idea-icon { opacity: 0; visibility: hidden; } .idea-item:hover .idea-content { top: auto; bottom: 0; height: 0px; } .history { padding: 96px 10%; background-position: center; background-size: cover; background-attachment: fixed; } .about-title strong, .about-title small { color: #008bc4; } .history-wrap { width: 576px; overflow: hidden; } .history-year { width: 660px; } .history-year-item { float: left; position: relative; width: 25%; cursor: pointer; } .history-year-item:hover time, .history-year-item.slick-current time { color: #008bc4; } .history-year-item:hover time:before, .history-year-item.slick-current time:before { opacity: 1; visibility: visible; transform: rotateY(0deg); } .history-year-item time { display: block; position: relative; z-index: 3; width: 80px; height: 93px; line-height: 93px; text-align: center; color: #fff; font-size: 24px; background: url(../images/corners.png) center no-repeat; background-size: cover; font-family: "Avian Regular"; transition: 0.4s; } .history-year-item time:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: url(../images/corners1.png) center no-repeat; background-size: cover; z-index: -1; opacity: 0; visibility: hidden; transition: 0.5s; transform: rotateY(180deg); } .history-year-item i { display: block; position: absolute; left: 96px; top: 50%; width: 48px; height: 1px; background: #fff; } .history__down { position: relative; padding-right: 90px; margin-top: 70px; } .history__item { float: left; } .history__item p { color: #fff; font-size: 16px; line-height: 2.4; } .history__prev { position: absolute; right: 0; top: 48px; width: 48px; } .history__prev span { display: block; margin-bottom: 20px; height: 48px; line-height: 48px; text-align: center; border-radius: 50%; color: #008bc4; background: #fff; transition: 0.45s; cursor: pointer; font-size: 30px; } .history__prev span.slick-disabled { opacity: 0.4; } .history__prev span:hover { background: #008bc4; color: #fff; } .honors { padding: 123px 0; background-attachment: fixed; background-position: center; background-size: cover; } .honor-left { float: left; } .honor-left .about-title { margin-bottom: 35px; } .honor-left .about-title small { font-size: 36px; } .honor-btns { margin-bottom: 38px; } .honor-btns li { margin-bottom: 18px; } .honor-btns li:last-child { margin-bottom: 0; } .honor-btns li:hover a, .honor-btns li.active a { color: #008bc4; font-weight: bold; } .honor-btns li a { display: inline-block; color: #666666; font-size: 16px; } .honor-more a { position: relative; display: inline-block; } .honor-more a:hover i { color: #008bc4; } .honor-more a i { display: block; line-height: 1; color: #cccccc; font-style: normal; font-size: 80px; transition: 0.4s; } .honor-more a span { display: block; position: absolute; left: 0; top: 0; text-align: center; width: 100%; line-height: 80px; color: #008bc4; font-size: 18px; font-weight: bold; } .lazy { background: url(../images/loading.gif) center no-repeat; } .honor-tabs { position: relative; margin-left: 308px; } .honors-li { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; } .honors-li.active { position: relative; z-index: 3; opacity: 1; visibility: visible; transition: 0.5s; } .honors-li li { float: left; margin-right: 2.66666%; width: 23%; } .honors-li li:nth-child(4n+4) { margin-right: 0; } .honors-li li:hover figure { transform: translateY(-8px); } .honors-li li figure { position: relative; display: block; padding-bottom: 141.66%; height: 0; overflow: hidden; line-height: 1; transition: 0.5s; } .honors-li li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .honors-li li span { display: block; margin-top: 16px; text-align: center; color: #333333; font-size: 16px; } .footer { padding: 98px 0 90px; background: #313333; } .footer-wrap { position: relative; } .footer-contact { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .footer-contact-title { margin-bottom: 28px; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .footer-contact-title h3 { color: #fff; font-size: 24px; font-weight: bold; line-height: 1.2; } .footer-contact-title p { margin-top: 5px; margin-left: 20px; color: #fff; font-size: 16px; line-height: 1.6; } .footer-eq img { display: block; width: 122px; } .footer-eq span { display: block; text-align: center; margin-top: 10px; line-height: 1; color: #fff; font-size: 16px; } .footer-address { margin-bottom: 17px; } .footer-address p { float: left; margin-right: 34px; color: #fff; font-size: 16px; } .footer-address p:first-child i { font-size: 16px; } .footer-address p i { display: inline-block; margin-right: 6px; font-style: normal; font-size: 18px; } .footer-copy p, .footer-copy > a { display: block; float: left; color: #fff; font-size: 16px; } .footer-copy p { margin-right: 20px; } .footer-copy a:hover { color: #008bc4; } .footer-copy .enter span { font-size: 16px; } .slidetop.article-block, .list-animate.article-block > li, .list-animate.article-block > div { opacity: 0; visibility: hidden; transform: translateY(80px); transition: 0.78s cubic-bezier(0.77, 0, 0.175, 1); } .slidetop.articleShow, .list-animate.articleShow > li, .list-animate.articleShow > div { opacity: 1; visibility: visible; transform: translateY(0px); } .slidetop.detay1.article-block, .list-animate.article-block > li:nth-child(2), .list-animate.article-block > div:nth-child(2) { transition-delay: 0.2s; } .slidetop.detay2.article-block, .list-animate.article-block > li:nth-child(3), .list-animate.article-block > div:nth-child(3) { transition-delay: 0.4s; } .slidetop.detay3.article-block, .list-animate.article-block > li:nth-child(4), .list-animate.article-block > div:nth-child(4) { transition-delay: 0.6s; } .slidetop.detay4.article-block, .list-animate.article-block > li:nth-child(5), .list-animate.article-block > div:nth-child(5) { transition-delay: 0.8s; } .slidetop.detay5.article-block, .list-animate.article-block > li:nth-child(6), .list-animate.article-block > div:nth-child(6) { transition-delay: 1s; } .slidetop.detay6.article-block, .list-animate.article-block > li:nth-child(7), .list-animate.article-block > div:nth-child(7) { transition-delay: 1.2s; } .slidetop.detay7.article-block, .list-animate.article-block > li:nth-child(8), .list-animate.article-block > div:nth-child(8) { transition-delay: 1.4s; } .slidetop.detay8.article-block, .list-animate.article-block > li:nth-child(9), .list-animate.article-block > div:nth-child(9) { transition-delay: 1.6s; } .slidetop.detay9.article-block, .list-animate.article-block > li:nth-child(10), .list-animate.article-block > div:nth-child(10) { transition-delay: 1.8s; } .honor-box { background: #f1f1f1; } .honor-top { padding: 78px 0 72px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .honor-top a { display: inline-block; margin-right: 82px; color: #2c3441; font-size: 18px; } .honor-top a:last-child { margin-right: 0; } .honor-top a:hover, .honor-top a.active { color: #008bc4; } .honor-top a.active { font-weight: bold; } .honor-li { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .honor-li li { position: relative; z-index: 3; margin-right: 2.96%; margin-bottom: 70px; width: 22.78%; padding: 32px 32px 0; box-sizing: border-box; background: #fff; } .honor-li li:before { content: ""; width: 100%; height: 0; background: #008bc4; position: absolute; left: 0; bottom: 0; transition: 0.56s; z-index: -1; } .honor-li li:hover, .honor-li li.active { color: #008bc4; } .honor-li li:hover:before, .honor-li li.active:before { height: 100%; bottom: auto; top: 0; } .honor-li li:nth-child(4n+4) { margin-right: 0; } .honor-li li:hover figure img { transform: scale(1.05); } .honor-li li:hover span { color: #fff; transition-delay: 0.25s; } .honor-li li figure { position: relative; display: block; padding-bottom: 141.666%; height: 0; overflow: hidden; line-height: 1; } .honor-li li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .honor-li li span { display: block; text-align: center; margin-top: 16px; padding-bottom: 14px; line-height: 1.2; color: #333333; font-size: 16px; transition: 0.38s; } .pagelists { padding: 25px 0 90px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .pagelists a { display: inline-block; margin-right: 12px; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #999999; font-size: 16px; } .pagelists a:last-child { margin-right: 0; transform: rotate(180deg); } .pagelists a:hover, .pagelists a.active { background: #008bc4; color: #fff; } .pagelists a:first-child:hover, .pagelists a:last-child:hover { color: #008bc4; background: none; font-weight: bold; } .subsidiary-text { position: absolute; left: 50%; margin-left: -45%; bottom: 25.45%; width: 90%; text-align: center; } .subsidiary-text b { display: block; margin-bottom: 15px; line-height: 1; color: #fff; font-size: 40px; letter-spacing: 4px; font-weight: lighter; } .subsidiary-text strong { display: block; line-height: 1; color: #fff; font-size: 40px; letter-spacing: 4px; } .subsidiary-text i { display: inline-block; position: relative; margin-top: 126px; color: #fff; font-size: 40px; font-style: normal; font-weight: bold; line-height: 1; animation: moveDownSpot 1000ms infinite; } @keyframes moveDownSpot { from { opacity: 1; top: 0; } to { opacity: 0; top: 8px; } } .subsidiary-introduct { padding: 84px 10% 115px; } .subsidiary-introduct strong { display: block; margin-bottom: 52px; line-height: 1.2; color: #008bc4; font-size: 36px; font-weight: normal; letter-spacing: 4px; } .subsidiary-introduct p { text-indent: 35px; color: #666666; font-size: 16px; line-height: 2.4; } .history-subsidiary { padding: 92px 0 76px; background-position: center; background-size: cover; } .subsidiary-titles { display: block; line-height: 1.2; color: #008bc4; font-size: 36px; letter-spacing: 4px; font-weight: normal; } .subsidiary-swiper { padding-bottom: 78px; position: relative; z-index: 2; } .subsidiary-info { width: 63.888%; opacity: 0; visibility: hidden; transform: translateY(50px); transition: 0.8s; min-height: 175px; } .subsidiary-info p { color: #666666; font-size: 16px; line-height: 2.2; } .subsidiary-slide { float: left; position: relative; padding-top: 50px; } .subsidiary-slide.slick-current .subsidiary-info { opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.2s; } .subsidiary-slide.slick-current .subsidiary-year { opacity: 0.1; transform: scale(1); transition-delay: 0.3s; } .subsidiary-slide .subsidiary-year { display: block; position: absolute; right: 0; top: 0; color: #1b8bcb; font-size: 227px; font-family: Arial, Helvetica, sans-serif; line-height: 1; font-weight: bold; opacity: 0.1; opacity: 0; transform: scale(1.3); transition: 1s; } .subsidiary-min { position: relative; z-index: 2; } .subsidiary-min:before { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #e2e4e5; content: ""; } .subsidiary-slide-year { float: left; text-align: center; height: 145px; position: relative; } .subsidiary-slide-year.slick-current .year-time:before { background: #008bc4; transform: scale(1); } .subsidiary-slide-year.slick-current .year-time b { margin-top: -18px; color: #fff; font-size: 36px; } .year-time { position: relative; z-index: 3; margin: auto; width: 145px; height: 0; padding-bottom: 145px; border-radius: 50%; line-height: 0; cursor: pointer; } .year-time:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #eeeeee; border-radius: 50%; transform: scale(0.69); transition: 0.6s; } .year-time b { display: block; position: absolute; left: 0; top: 50%; margin-top: -10px; letter-spacing: 3px; text-align: center; width: 100%; line-height: 1; color: #999999; font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; transition: 0.5s; } .subsidiary-btn { position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #eeeeee; cursor: pointer; line-height: 32px; text-align: center; color: #cfcfcf; font-size: 16px; transition: 0.4s; } .subsidiary-btn:hover { background: #008bc4; color: #fff; } .subsidiary-btn.slick-disabled { cursor: no-drop; } .subsidiary-btn.prev { left: 0; } .subsidiary-btn.next { right: 0; } .subsidiary-area { padding: 104px 0; } .subsidiary-in { position: relative; float: left; margin-right: 1.415%; width: 32.39%; } .subsidiary-in:last-child { margin-right: 0; } .subsidiary-in figure { position: relative; display: block; padding-bottom: 63.5%; height: 0; overflow: hidden; line-height: 1; } .subsidiary-in figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .subsidiary-in:hover figure img { transform: scale(1.1); } .sub-line { position: absolute; left: 8.34%; right: 8.34%; bottom: 32px; padding-top: 29px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .sub-line:before { position: absolute; left: 0; top: -2px; content: ""; width: 90px; height: 3px; background: #fff; } .sub-line strong { display: block; margin-bottom: 12px; line-height: 1; color: #fff; font-size: 20px; font-weight: bold; } .sub-line small { display: block; line-height: 1; color: #ffffff; font-size: 16px; font-family: "Avian Regular"; text-transform: uppercase; opacity: 0.5; } .sub-line i { display: block; position: absolute; right: 10px; top: 40px; line-height: 1; color: #ffffff; font-size: 28px; font-style: normal; } .pbanner-wr { position: relative; padding: 220px 0 52px; background-position: center; background-size: cover; } .pbanner-wr .subsidiary-text { position: relative; top: 0; bottom: auto; } .leval-navs { border-bottom: 1px solid #eeeeee; } .laval-navs-list { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .laval-navs-list li { margin-right: 74px; } .laval-navs-list li:last-child { margin-right: 0; } .laval-navs-list li:hover a, .laval-navs-list li.active a { font-weight: bold; color: #008bc4; } .laval-navs-list li:hover a:before, .laval-navs-list li.active a:before { transform: scaleX(1); } .laval-navs-list li a { display: block; position: relative; z-index: 3; height: 59px; line-height: 59px; color: #666666; font-size: 16px; } .laval-navs-list li a:before { position: absolute; left: 50%; margin-left: -14px; bottom: -1px; content: ""; width: 28px; height: 2px; background: #008bc4; transform: scaleX(0); transition: 0.5s; } .contacts-us { padding: 100px 0 120px; } .contact-wrap { margin: auto; width: 1344px; } .contact-map { float: right; width: 57.14%; height: 372px; } .contact-map .BMap_bubble_title { color: #4c4c4c; text-align: center; font-weight: bold; } .contact-address { float: left; padding-top: 28px; width: 40%; } .contact-titles { margin-bottom: 38px; } .contact-titles small { display: block; margin-bottom: 15px; line-height: 1; color: #008bc4; font-size: 48px; text-transform: uppercase; font-family: "Avian Regular"; } .contact-titles strong { display: block; line-height: 1; color: #008bc4; font-size: 24px; font-weight: normal; } .contact-down p { color: #333333; font-size: 16px; line-height: 2.2; } .cooperate-li li { position: relative; float: left; width: 33.3333%; box-sizing: border-box; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; } .cooperate-li li:hover figure { opacity: 1; visibility: visible; } .cooperate-li li:hover .cooperate-wr b { color: #fff; transform: rotateY(180deg); } .cooperate-li li:hover .cooperate-wr small, .cooperate-li li:hover .cooperate-wr strong { color: #fff; } .cooperate-li li:hover .cooperate-wr i { background: #fff; color: #008bc4; } .cooperate-li li figure { position: relative; display: block; padding-bottom: 88.75%; height: 0; overflow: hidden; line-height: 1; opacity: 0; visibility: hidden; transition: 0.68s; } .cooperate-li li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .cooperate-li li figure:before { position: absolute; left: 0; top: 0; z-index: 2; content: ""; width: 100%; height: 100%; background: #1b8bcb; opacity: 0.8; } .cooperate-wr { position: absolute; z-index: 3; left: 25.625%; top: 50%; transform: translateY(-50%); } .cooperate-wr b { display: inline-block; margin-bottom: 56px; line-height: 1; color: #008bc4; font-size: 54px; font-weight: normal; transition: 0.45s; } .cooperate-wr small { display: block; margin-bottom: 25px; line-height: 1; color: #333333; font-size: 36px; transition: 0.45s; } .cooperate-wr strong { display: block; line-height: 1; color: #333333; font-size: 30px; font-weight: normal; transition: 0.45s; } .cooperate-wr i { display: block; margin-top: 75px; width: 55px; height: 55px; text-align: center; line-height: 55px; color: #fff; font-size: 24px; border-radius: 50%; background: #008bc4; transition: 0.45s; } .joins { padding: 100px 0 110px; } .join-wraps { position: relative; } .join-title { position: relative; padding-bottom: 42px; } .join-title:before { position: absolute; left: 0; bottom: 0; content: ""; width: 54px; height: 1px; background: #cccccc; } .join-title strong { display: block; margin-bottom: 14px; line-height: 1; color: #008bc4; font-size: 30px; } .join-title small { display: block; line-height: 1; color: #999999; font-size: 24px; font-family: "Avian Regular"; text-transform: uppercase; } .join-contents { margin-top: 32px; } .join-contents p { text-indent: 36px; color: #999999; font-size: 16px; line-height: 2.4; letter-spacing: 1px; } .advantages { margin-top: 36px; } .advantages strong { display: block; margin-bottom: 15px; color: #008bc4; font-size: 18px; } .advantages p { text-indent: 36px; color: #999999; font-size: 16px; line-height: 2.4; letter-spacing: 1px; } .join-backs { position: absolute; right: 0; top: 0; display: flex; display: -webkit-flex; } .join-backs a { display: inline-block; margin-left: 26px; width: 58px; height: 58px; border: 1px solid #dddddd; font-size: 20px; border-radius: 50%; color: #dddddd; line-height: 58px; text-align: center; } .join-backs a:hover { border-color: #008bc4; background: #008bc4; color: #fff; } .join-backs a:first-child { margin-left: 0; } .performance { padding: 100px 0 0; } .performance-top { margin: auto; margin-bottom: 70px; text-align: center; width: 1152px; max-width: 100%; } .performance-top strong { display: block; margin-bottom: 24px; color: #008bc4; line-height: 1.2; font-size: 24px; } .performance-top p { color: #666666; font-size: 16px; line-height: 1.8; } .performance-list li { float: left; margin-right: 1.25%; margin-bottom: 58px; width: 32.5%; cursor: pointer; } .performance-list li:nth-child(3n+3) { margin-right: 0; } .performance-list li figure { position: relative; display: block; padding-bottom: 62%; height: 0; overflow: hidden; line-height: 1; } .performance-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .performance-list li:hover figure img { transform: scale(1.06); } .performance-list li:hover .performance-info:before { width: 100%; right: auto; left: 0; } .performance-list li:hover .performance-info strong, .performance-list li:hover .performance-info p { color: #008bc4; } .performance-list li:hover .performance-info strong { font-weight: bold; } .performance-info { position: relative; padding-top: 26px; padding-bottom: 28px; } .performance-info:before { position: absolute; right: 0; bottom: 0; content: ""; width: 0; height: 2px; background: #008bc4; transition: 0.58s; } .performance-info strong { display: block; margin-bottom: 16px; line-height: 1.1; color: #2c3441; font-size: 20px; font-weight: normal; transition: 0.4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .performance-info p { color: #999999; font-size: 16px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s; } .performance-pop { position: fixed; left: 0; top: 0; z-index: 299; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.88s; } .performance-pop.show { opacity: 1; visibility: visible; pointer-events: visible; } .performance-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: -1; } .performance-fix { position: absolute; left: 50%; margin-left: -672px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 64px 62px ; width: 1344px; box-sizing: border-box; background: #fff; } .performance-wr { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; } .perClose { display: block; position: absolute; right: 80px; top: 64px; z-index: 10; width: 45px; height: 45px; border: 1px solid #d1e8f5; color: #008bc4; line-height: 45px; text-align: center; cursor: pointer; transition: 0.45s; } .perClose:hover { transform: rotate(180deg); } .performance-swiper { width: 61.88%; margin: 0; } .performance-swiper .swiper-pagination { bottom: 16px; line-height: 1; } .performance-swiper .swiper-pagination .swiper-pagination-bullet { margin: auto; margin-right: 28px; opacity: 1; background: #fff; } .performance-swiper .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .performance-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #008bc4; } .performance-slide { overflow: hidden; } .performance-slide figure { display: block; line-height: 1; overflow: hidden; } .performance-slide figure img { display: block; width: 100%; height: auto; } .performance-texts { width: 32%; } .performance-texts strong { display: block; margin-bottom: 38px; line-height: 1.2; color: #333333; font-size: 30px; letter-spacing: 3px; font-weight: normal; } .performance-texts p { color: #666666; font-size: 16px; line-height: 2.2; } .subsidiary-text1 b { margin-bottom: 30px; font-weight: bold; text-shadow: 0 5px 7px rgba(65, 65, 65, 0.4); } .subsidiary-text1 strong { font-weight: normal; font-size: 30px; text-shadow: 0 5px 7px rgba(65, 65, 65, 0.4); } .company-introduct { position: relative; padding: 120px 0 150px; z-index: 3; background: #f5f5f5; } .company-introduct:before { position: absolute; left: 32px; right: 32px; bottom: 0; z-index: -1; content: ""; height: 261px; background: url(../images/house.png) center bottom no-repeat; background-size: 100% auto; } .company-content { float: left; width: 50%; } .company-title { position: relative; z-index: 2; margin-bottom: 38px; } .company-title img { position: absolute; left: 0; top: -14px; z-index: -1; } .company-title strong { display: block; line-height: 1; color: #333333; font-size: 30px; font-weight: normal; letter-spacing: 2px; } .company-text p { color: #666666; font-size: 16px; line-height: 2; font-family: "SourceHanSansCN-Regular"; } .company-data { float: right; padding-top: 30px; } .company-items { float: left; margin-left: 96px; } .company-items:first-child { margin-left: 0; } .company-items p { margin-bottom: 22px; color: #666666; font-size: 18px; line-height: 1; font-family: "SourceHanSansCN-Regular"; } .company-items span { display: block; position: relative; line-height: 1; color: #e99c28; font-size: 24px; } .company-items span b { display: inline-block; margin-right: 15px; font-weight: normal; font-size: 98px; } .company-items span i { display: block; position: absolute; right: 30px; top: 0; line-height: 1; color: #e99c28; font-size: 36px; font-style: normal; } .show-business { padding: 70px 0 136px; } .show-business-top { margin-bottom: 48px; text-align: center; } .show-title strong { display: block; margin-bottom: 18px; text-align: center; color: #333333; font-size: 40px; font-weight: normal; line-height: 1; letter-spacing: 4px; font-family: "SourceHanSansCN-Regular"; } .show-title strong b { color: #008bc4; font-weight: normal; } .show-title small { display: block; line-height: 1; color: #999999; font-size: 16px; text-transform: uppercase; } .show-texts { margin-top: 38px; } .show-texts p { margin: auto; max-width: 100%; color: #666666; font-size: 16px; width: 960px; font-family: "SourceHanSansCN-Regular"; } .show-business-li li { float: left; margin-right: 1.175%; width: 32.55%; } .show-business-li li:nth-child(3n+3) { margin-right: 0; } .show-business-li li figure { position: relative; display: block; padding-bottom: 52.4%; height: 0; overflow: hidden; line-height: 1; } .show-business-li li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .show-business-li li:hover figure img { transform: scale(1.05); } .show-business-text { margin-top: 18px; display: flex; display: -webkit-flex; font-family: "SourceHanSansCN-Regular"; } .show-business-text b { display: block; width: 61px; height: 84px; text-align: center; line-height: 84px; color: #fff; font-size: 34px; background: #008bc4; font-weight: normal; } .show-business-fix { flex: 1; -webkit-flex: 1; margin-left: 8px; } .show-business-fix strong { display: block; margin-bottom: 12px; line-height: 1; font-size: 20px; color: #008bc4; font-weight: normal; } .show-business-fix p { color: #666666; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cooperats { padding: 190px 0 185px; background-attachment: fixed; background-position: center; background-size: cover; text-align: center; } .cooperats-text { display: inline-block; position: relative; padding: 0 234px; } .cooperats-text:before, .cooperats-text:after { position: absolute; top: 50%; content: ""; width: 190px; height: 1px; background: #fff; opacity: 0.2; } .cooperats-text:before { left: 0; } .cooperats-text:after { right: 0; } .cooperats-text img { display: block; width: 318px; height: auto; } .cooperats-text.article-block:before, .cooperats-text.article-block:after { width: 0; transition: 2s; } .cooperats-text.articleShow:before, .cooperats-text.articleShow:after { width: 190px; } .subsidiary-text2 { font-family: "SourceHanSansCN-Regular"; } .subsidiary-text2 b { font-size: 60px; } .subsidiary-text2 strong { font-size: 30px; letter-spacing: 3px; } .equipment { padding: 100px 0 135px; } .about-right { position: relative; padding-top: 26px; margin-right: 40px; float: right; width: 42.31%; } .about-right figure { display: block; position: relative; z-index: 2; line-height: 1; } .about-right figure:before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: 16px; bottom: -16px; border: 1px solid #008bc4; } .about-right figure img { display: block; width: 100%; height: auto; } .about-line { position: absolute; left: -32px; top: 0; width: 23px; height: 1px; background: #008bc4; } .about-line:before { position: absolute; left: 0; top: 2px; content: ""; width: 1px; height: 23px; background: #008bc4; } .about-line.line1 { left: auto; right: -32px; top: auto; bottom: -38px; } .about-line.line1:before { top: auto; bottom: 0; left: auto; right: 0; } .equipment-content { float: left; width: 50%; } .equitment-tt { position: relative; margin-bottom: 28px; padding-bottom: 34px; } .equitment-tt:before { position: absolute; left: 0; bottom: 0; content: ""; width: 48px; height: 1px; background: #008bc4; } .equitment-tt small { display: block; margin-bottom: 16px; letter-spacing: 5px; color: #008bc4; font-size: 48px; font-family: "Avian Regular"; line-height: 1; } .equitment-tt strong { display: block; line-height: 1; color: #008bc4; font-size: 24px; font-weight: normal; font-family: "SourceHanSansCN-Regular"; letter-spacing: 2px; } .equit-text p { color: #666666; font-size: 16px; font-family: "SourceHanSansCN-Regular"; letter-spacing: 1px; } .equipment-list { padding-bottom: 130px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .equipment-item { position: relative; z-index: 3; width: 19.14%; border: 1px solid #dddddd; text-align: center; } .equipment-item:before { content: ""; width: 100%; height: 0; background: #1b8bcb; position: absolute; left: 0; bottom: 0; transition: 0.58s; z-index: -1; } .equipment-item:hover, .equipment-item.active { color: #1b8bcb; } .equipment-item:hover:before, .equipment-item.active:before { height: 100%; bottom: auto; top: 0; } .equipment-item:hover b, .equipment-item:hover strong, .equipment-item:hover p { color: #fff; } .equip-wrap { padding: 79px 30px 57px; font-family: "SourceHanSansCN-Regular"; } .equip-wrap b { display: block; margin-bottom: 42px; color: #1b8bcb; font-size: 64px; font-weight: normal; line-height: 1; transition: 0.4s; } .equip-wrap strong { display: block; margin-bottom: 30px; line-height: 1; color: #333333; font-size: 24px; font-weight: normal; transition: 0.4s; } .equip-wrap p { color: #666666; font-size: 16px; transition: 0.4s; } .corporate-culture { padding: 106px 0 110px; background-attachment: fixed; background-position: center; background-size: cover; } .corporate-tt { text-align: center; margin-bottom: 74px; } .corporate-tt small { display: block; margin-bottom: 12px; line-height: 1; color: #fff; font-size: 36px; text-transform: uppercase; font-family: "Avian Regular"; } .corporate-tt strong { display: block; line-height: 1; color: #fff; font-size: 48px; letter-spacing: 5px; font-family: "SourceHanSansCN-Regular"; font-weight: normal; } .corporate-list li { float: left; width: 33.3333%; background: rgba(27, 139, 203, 0.7); } .corporate-list li:nth-child(2n+2) { background: rgba(27, 139, 203, 0.5); } .corporate-list li:hover b { transform: translateY(-8px); } .corporate-wr { padding: 76px 11.718% 0; height: 224px; } .corporate-wr b { display: block; margin-bottom: 24px; line-height: 1; color: #fff; font-size: 69px; font-weight: lighter; transition: 0.45s; } .corporate-wr strong { display: block; margin-bottom: 12px; line-height: 1; color: #fff; font-size: 24px; font-weight: normal; } .corporate-wr p { color: #ffffff; font-size: 16px; } .service-case { margin: auto; max-width: 90%; width: 1290px; padding: 94px 0 100px; } .service-tt { margin-bottom: 40px; text-align: center; } .service-tt strong { display: block; margin-bottom: 19px; color: #008bc4; font-size: 48px; line-height: 1; font-weight: normal; letter-spacing: 4px; } .service-tt p { letter-spacing: 5px; color: #333333; font-size: 24px; font-family: "SourceHanSansCN-Regular"; } .service-slide { overflow: hidden; } .service-slide figure { display: block; line-height: 1; overflow: hidden; } .service-slide figure img { display: block; width: 100%; height: auto; } .service-btn { position: absolute; left: 50%; margin-left: -75px; bottom: 38px; width: 150px; z-index: 10; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; } .service-btn span { display: block; width: 57px; height: 57px; border-radius: 4px; background: #fff; text-align: center; line-height: 57px; color: #008bc4; font-size: 16px; cursor: pointer; transition: 0.4s; font-weight: bold; } .service-btn span:hover { background: #008bc4; color: #fff; } .service-project { padding: 84px 0 130px; } .service-tops { margin-bottom: 38px; text-align: center; font-family: "SourceHanSansCN-Regular"; } .service-tops strong { display: block; margin-bottom: 12px; line-height: 1; font-size: 40px; color: #2c3441; font-weight: normal; letter-spacing: 4px; } .service-tops p { color: #999999; font-size: 18px; } .servicelist { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .servicelist li { position: relative; width: 23.43%; } .servicelist li:hover figure img { transform: scale(1.05); } .servicelist li figure { position: relative; display: block; padding-bottom: 167.13%; height: 0; overflow: hidden; line-height: 1; } .servicelist li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .service__text { position: absolute; left: 22px; right: 22px; bottom: 24px; text-align: center; font-family: "SourceHanSansCN-Regular"; } .service__text strong { display: block; margin-bottom: 25px; position: relative; padding-bottom: 34px; line-height: 1; color: #fff; font-size: 22px; } .service__text strong:before { position: absolute; left: 50%; margin-left: -19px; bottom: 0; content: ""; width: 38px; height: 3px; background: #fff; } .service__text p { margin: auto; max-width: 100%; width: 280px; color: #fff; font-size: 16px; line-height: 2; height: 64px; } .heigh-brand { padding: 158px 0; background-attachment: fixed; background-position: center; background-size: cover; } .heigh-brand-text { margin: auto; text-align: center; width: 90%; font-family: "SourceHanSansCN-Regular"; } .heigh-brand-text strong { display: block; color: #fff; font-size: 40px; font-weight: normal; line-height: 1.2; } .heigh-brand-text p { margin-top: 56px; display: block; color: #fff; font-size: 14px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; line-height: 1.6; } .regard { padding: 114px 0 156px; } .regard-imgs { float: left; position: relative; z-index: 3; width: 43.75%; } .regard-imgs:before { position: absolute; left: 13px; bottom: -17px; top: 3px; right: -14px; content: ""; border: 2px solid #d1e8f5; z-index: -1; } .regard-imgs figure { display: block; line-height: 1; overflow: hidden; } .regard-imgs figure img { display: block; width: 100%; height: auto; } .regard-list { float: right; padding-top: 65px; width: 50%; } .regard-item { margin-bottom: 70px; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .regard-item:hover b { background: #008bc4; border-color: #008bc4; color: #fff; } .regard-item:hover .regard-texts strong, .regard-item:hover .regard-texts p { color: #008bc4; } .regard-item:last-child { margin-bottom: 0; } .regard-item b { display: block; width: 90px; height: 66px; line-height: 66px; border-radius: 35px; border: 2px solid #d1e8f5; text-align: center; color: #008bc4; font-size: 30px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; transition: 0.45s; } .regard-texts { margin-left: 50px; flex: 1; -webkit-flex: 1; font-family: "SourceHanSansCN-Regular"; } .regard-texts strong { display: block; margin-bottom: 6px; line-height: 1.2; color: #333333; font-size: 24px; font-weight: normal; transition: 0.38s; } .regard-texts p { color: #666666; font-size: 16px; transition: 0.38s; } .regard-about { position: relative; z-index: 3; padding: 54px 0 188px; background: #f5f9fb; } .regrard-bgs { position: absolute; right: 0; top: 0; bottom: 130px; width: 71.25%; z-index: -1; } .ragard-us { margin-left: 10%; padding: 80px 76px 74px; box-sizing: border-box; width: 780px; background: #fff; } .ragard-us-text { font-family: "SourceHanSansCN-Regular"; } .ragard-us-text P { color: #666666; font-size: 16px; line-height: 2; text-indent: 28px; } .profile { padding: 84px 0 144px; background: #f4f4f4; } .profile-imgs { float: right; width: 45.57%; position: relative; z-index: 2; } .profile-imgs:before { position: absolute; left: -79px; bottom: 25px; z-index: -1; content: ""; width: 142px; height: 175px; background: url(../images/profile.png) center no-repeat; } .profile-imgs img { display: block; width: 100%; height: auto; } .profile-content { font-family: "SourceHanSansCN-Regular"; float: left; width: 43.75%; } .profile-dit { color: #999999; font-size: 16px; letter-spacing: 24px; line-height: 1; } .profile-text { margin-top: 104px; } .profile-text strong { display: block; margin-bottom: 40px; line-height: 1.1; color: #008bc4; font-size: 36px; font-weight: normal; text-transform: uppercase; } .profile-text p { color: #666666; font-size: 16px; line-height: 2; text-indent: 34px; letter-spacing: 1px; } .us-project { padding: 108px 0 100px; } .project-tt { margin-bottom: 52px; text-align: center; } .project-tt strong { display: block; margin-bottom: 10px; line-height: 1.1; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 2px; } .project-tt p { color: #666666; font-size: 18px; } .project-list li { float: left; margin-right: 2.45%; width: 31.7%; margin-bottom: 42px; text-align: center; } .project-list li:nth-child(3n+3) { margin-right: 0; } .project-list li figure { position: relative; display: block; padding-bottom: 55.5555%; height: 0; overflow: hidden; line-height: 1; } .project-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .project-list li:hover figure img { transform: scale(1.1); } .project-list li:hover .project-texts strong { color: #008bc4; } .project-texts { margin-top: 28px; font-family: "SourceHanSansCN-Regular"; } .project-texts strong { display: block; margin-bottom: 12px; line-height: 1; color: #2c3441; font-size: 22px; letter-spacing: 1px; font-weight: normal; transition: 0.4s; } .project-texts p { color: #666666; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team { padding: 98px 0 0; background-attachment: fixed; background-position: center; background-size: cover; } .team-wrap { margin: auto; width: 960px; font-family: "SourceHanSansCN-Regular"; } .team-title { text-align: center; margin-bottom: 48px; } .team-title strong { display: block; margin-bottom: 20px; color: #fff; line-height: 1; font-size: 36px; font-weight: normal; } .team-title p { color: #fff; font-size: 16px; line-height: 1; letter-spacing: 16px; } .team-content { padding: 56px 8.333% 74px; background: #fff; text-align: center; } .team-content p { color: #666666; font-size: 16px; line-height: 2.2; } .team-content img { margin: auto; width: auto; height: auto; max-width: 100%; } .service-tt1 { font-family: "SourceHanSansCN-Regular"; } .service-tt1 strong { font-size: 36px; text-transform: uppercase; } .service-tt1 p { font-size: 16px; letter-spacing: 0px; } .profile-about .profile-imgs { margin-top: 80px; width: 47.135%; } .profile-about .profile-imgs:before { display: none; } .profile-about .profile-content { position: relative; width: 46.54%; } .profile-about .profile-content:before { position: absolute; left: -87px; top: 50px; content: ""; width: 49px; height: 60px; background: url(../images/profile.png) center no-repeat; background-size: cover; } .profile-about .profile-content .profile-text { margin-top: 50px; } .profile-about .profile-content .profile-text p { text-indent: 0px; letter-spacing: 0px; } .scopes { padding: 82px 0 0; text-align: center; } .scopes-lists { margin-top: 35px; display: flex; display: -webkit-flex; } .scopes-lists li { position: relative; height: 642px; width: 20%; } .scopes-lists li:nth-child(2n+2) { display: flex; display: -webkit-flex; flex-direction: column-reverse; } .scopes-lists li:nth-child(2n+2) .scopes-content:before { top: auto; bottom: -10px; } .scopes-lists li figure { display: block; height: 74%; background-position: center top; background-size: cover; transition: 0.5s; } .scopes-lists li:hover figure { height: 58.2%; } .scopes-lists li:hover .scopes-content { height: 41.8%; background: #1b8bcb; } .scopes-lists li:hover .scopes-content:before { opacity: 0; visibility: hidden; } .scopes-lists li:hover .scopes-content strong { font-size: 32px; color: #fff; } .scopes-lists li:hover .scopes-content b { color: #fff; font-size: 94px; opacity: 0.24; top: -80px; } .scopes-content { position: relative; box-sizing: border-box; padding-top: 50px; text-align: center; height: 26%; font-family: "SourceHanSansCN-Regular"; background: #f5f5f5; transition: 0.5s; } .scopes-content:before { position: absolute; left: 50%; margin-left: -1.5px; top: -10px; content: ""; width: 3px; height: 40px; background: #eaeaea; transition: 0.45s; } .scopes-content strong { display: block; position: relative; z-index: 2; margin-bottom: 15px; line-height: 1; color: #333333; font-size: 24px; font-weight: normal; letter-spacing: 2px; transition: 0.45s; } .scopes-content b { display: block; position: relative; top: 0; line-height: 1; color: #000000; font-size: 44px; font-family: Arial, Helvetica, sans-serif; opacity: 0.4; transition: 0.45s; } .product-center { padding: 120px 0 60px; } .product-center-list { margin-top: 44px; font-size: 0; text-align: center; } .product-center-list li { display: inline-block; vertical-align: top; margin-right: 226px; text-align: center; } .product-center-list li:last-child { margin-right: 0; } .product-center-list li:hover b { color: #008bc4; } .product-center-list li:hover b:before { background: url(../images/corners3.png) center no-repeat; background-size: cover; transform: rotateY(180deg); } .product-center-list li:hover span { color: #008bc4; } .product-center-list li b { display: block; margin: auto; position: relative; z-index: 3; width: 82px; height: 95px; text-align: center; line-height: 95px; color: #aaaaaa; font-size: 35px; font-weight: normal; transition: 0.4s; } .product-center-list li b:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: url(../images/corners2.png) center no-repeat; z-index: -1; transition: 0.5s; } .product-center-list li span { display: block; margin-top: 14px; line-height: 1; color: #666666; font-size: 16px; letter-spacing: 1px; transition: 0.4s; } .platform { padding: 106px 0 110px; background: #f6f8fa; } .platform-wrap { margin: auto; max-width: 90%; width: 1152px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; } .platform-img { width: 50%; } .platform-img img { width: 100%; height: auto; } .platform-texts { font-family: "SourceHanSansCN-Regular"; width: 41.6666%; } .platform-texts strong { margin-bottom: 5px; color: #333333; font-size: 24px; font-weight: normal; } .platform-texts p { color: #666666; font-size: 16px; line-height: 2; } .solution { padding-top: 150px; background-position: center; background-size: cover; } .solute-numble { position: relative; padding-bottom: 42px; color: #fff; font-size: 16px; font-family: Arial, Helvetica, sans-serif; line-height: 1; display: flex; display: -webkit-flex; } .solute-numble:before { position: absolute; left: 0; bottom: 0; content: ""; width: 46px; height: 3px; background: #008bc4; border-radius: 2px; } .solute-numble b { display: inline-block; vertical-align: top; margin-right: 14px; color: #008bc4; font-size: 36px; font-weight: normal; } .solute-numble span { display: inline-block; position: relative; top: 16px; } .solute-top { margin: 0; width: 980px; max-width: 100%; } .solute-text-item { overflow: hidden; font-family: "SourceHanSansCN-Regular"; } .solute-text-item strong { display: block; margin-bottom: 16px; color: #fff; font-size: 30px; line-height: 1.2; font-weight: normal; } .solute-text-item p { color: #fff; font-size: 16px; opacity: 0.5; } .solute-btn-box { position: relative; margin-top: 168px; padding-bottom: 70px; z-index: 3; } .solute-btn-box:before { position: absolute; left: 0; top: 49px; content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); } .solute-list { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .solute-list li { text-align: center; cursor: pointer; } .solute-list li:hover span, .solute-list li.active span { color: #008bc4; } .solute-list li:hover i:after, .solute-list li.active i:after { opacity: 1; visibility: visible; transform: scale(1); } .solute-list li span { display: block; margin-bottom: 23px; line-height: 1.1; color: #fff; font-size: 18px; font-family: "SourceHanSansCN-Regular"; transition: 0.4s; } .solute-list li i { display: block; margin: auto; position: relative; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .solute-list li i:before { position: absolute; left: 50%; top: 50%; margin-left: -4px; margin-top: -4px; content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; } .solute-list li i:after { position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; content: ""; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); opacity: 0; visibility: hidden; transform: scale(0); transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .suolte-swiper { margin-top: 40px; position: relative; } .suolte-swiper .service-btn { left: auto; margin-top: 0; bottom: auto; top: 72px; right: 0; } .news-dynamic { padding: 93px 0 110px; background: #f1f1f1; } .news-hiddens { padding: 32px; background: #fff; } .news-swiper { position: relative; } .news-swiper .swiper-pagination { position: absolute; left: auto; right: 0; bottom: 0; width: auto !important; } .news-swiper .swiper-pagination .swiper-pagination-bullet { position: relative; margin: 0; margin-left: 30px; opacity: 1; width: 12px; height: 12px; border: 1px solid #fff; background: none; } .news-swiper .swiper-pagination .swiper-pagination-bullet:first-child { margin-left: 0; } .news-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: #008bc4; } .news-swiper .swiper-pagination .swiper-pagination-bullet:before { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; content: ""; width: 4px; height: 4px; background: #008bc4; border-radius: 50%; } .news-slide a { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; } .news-slide a:hover figure img { transform: scale(1.04); } .news-slide a figure { display: block; width: 42.74%; overflow: hidden; } .news-slide a figure img { display: block; width: 100%; height: auto; transition: 0.68s; } .news-infos { width: 53.58%; } .news-infos strong { display: block; margin-bottom: 32px; line-height: 1.2; color: #008bc4; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; } .news-infos p { color: #999999; font-size: 14px; line-height: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .news-infos span { display: inline-block; position: relative; margin-top: 40px; line-height: 2; color: #008bc4; font-size: 16px; } .news-infos span:before { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 1px; background: #008bc4; } .group-news { padding: 80px 0 0; } .group-tt { margin-bottom: 50px; color: #333333; font-size: 36px; line-height: 1; } .group-list li { float: left; margin-right: 3.125%; margin-bottom: 90px; width: 31.25%; } .group-list li:nth-child(3n+3) { margin-right: 0; } .group-list li figure { position: relative; display: block; padding-bottom: 58.3333%; height: 0; overflow: hidden; line-height: 1; } .group-list li figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .group-list li a:hover figure img { transform: scale(1.05); } .group-list li a:hover .group-down:before { width: 100%; } .group-list li a:hover .group-down strong { color: #008bc4; } .group-down { padding: 22px 14px 22px; position: relative; } .group-down:before { position: absolute; left: 0; bottom: 0; content: ""; width: 0; height: 2px; background: #008bc4; transition: 0.6s; } .group-down strong { display: block; line-height: 1.6; color: #333333; font-size: 20px; font-weight: normal; transition: 0.4s; height: 64px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .group-down time { display: block; margin-top: 26px; line-height: 1; color: #999999; font-size: 16px; font-family: Arial, Helvetica, sans-serif; } .group-down span { display: block; position: absolute; right: 14px; bottom: 22px; line-height: 1; color: #008bc4; font-size: 16px; } .party { padding-top: 74px; background-position: center bottom; background-size: cover; } .party-wrap { margin: auto; width: 1523px; max-width: 90%; line-height: 0; } .party-wrap img { width: 100%; height: auto; } .branch-title { padding: 64px 0 50px; text-align: center; } .branch-title strong { display: block; margin-bottom: 16px; line-height: 1; color: #2c3441; font-size: 36px; font-weight: normal; } .branch-title small { display: block; line-height: 1; color: #999999; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; } .branch { position: relative; background-attachment: fixed; background-position: center; background-size: cover; padding: 180px 0; } .branch-btn { position: absolute; top: 50%; margin-top: -24px; color: #fff; font-size: 48px; line-height: 1; cursor: pointer; transition: 0.4s; z-index: 10; } .branch-btn.prev { left: 6.77%; } .branch-btn.next { right: 6.77%; } .branch-btn:hover { color: #008bc4; } .branch-wraps { position: relative; width: 1440px; margin: auto; max-width: 90%; overflow: hidden; z-index: 2; } .branch-swiper { position: relative; width: 130%; } .branch-img-swiper { line-height: 0; } .branch-img-item { display: flex; display: -webkit-flex; } .branch-img-item { float: left; width: 50%; } .branch-img-item.swiper-slide-active figure { transform: scale(1); } .branch-img-item.swiper-slide-active figure:before { opacity: 0; visibility: hidden; } .branch-img-item figure { position: relative; z-index: 3; width: 544px; display: block; line-height: 1; overflow: hidden; transform: scale(0.66); transition: 0.5s; } .branch-img-item figure:before { position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.2); content: ""; width: 100%; height: 100%; transition: 0.5s; } .branch-img-item figure img { display: block; width: 100%; height: auto; } .branch-text-item { margin-left: 64px; margin-top: 92px; flex: 1; -webkit-flex: 1; } .branch-text-item strong { display: block; margin-bottom: 30px; color: #fff; font-size: 28px; line-height: 1; } .branch-text-item span { display: block; margin-bottom: 26px; line-height: 1; color: #fff; font-size: 24px; } .branch-text-item p { color: #ffffff; font-size: 14px; line-height: 2; } .branch-min { position: absolute; right: -15px; bottom: 9.215%; width: 54.3333%; padding: 0 15px; } .branch-min-item { float: left; width: 25%; cursor: pointer; } .branch-min-item.slick-current .brand-margin:before { opacity: 1; visibility: visible; } .branch-min-item .brand-margin { margin: 0 15px; position: relative; } .branch-min-item .brand-margin:before { content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #008bc4; opacity: 0; visibility: hidden; transition: 0.35s; } .branch-min-item:hover figure img { transform: scale(1.1); } .branch-min-item figure { position: relative; display: block; padding-bottom: 133.159%; height: 0; overflow: hidden; line-height: 1; } .branch-min-item figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .branch-min-item figure img { height: auto; } .party-box { padding-top: 92px; background: #f1f1f1; } .partys-list li { margin-bottom: 40px; } .partys-list li a { display: block; position: relative; padding: 15px 25px; border: 1px solid #dbdbdb; overflow: hidden; } .partys-list li a:before { position: absolute; right: 0; top: 0; content: ""; border-left: 24px solid transparent; border-top: 26px solid #008bc4; opacity: 0; visibility: hidden; transition: 0.38s; } .partys-list li a:hover { border-color: #008bc4; } .partys-list li a:hover:before { opacity: 1; visibility: visible; } .partys-list li a:hover figure img { transform: scale(1.1); } .partys-list li a:hover .party-fixs strong, .partys-list li a:hover .party-fixs p { color: #008bc4; } .partys-news { float: left; width: 280px; } .partys-news figure { position: relative; display: block; padding-bottom: 67.14%; height: 0; overflow: hidden; line-height: 1; } .partys-news figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.58s; } .partys-news figure img { height: auto; } .party-fixs { padding-top: 20px; margin-left: 336px; } .party-fixs strong { display: block; margin-bottom: 26px; line-height: 1.2; color: #333333; font-size: 18px; font-weight: normal; letter-spacing: 2px; transition: 0.35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .party-fixs p { color: #666666; font-size: 14px; line-height: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.35s; } .party-fixs span { display: inline-block; margin-top: 22px; color: #008bc4; font-size: 14px; } .party-view { padding: 72px 0 100px; background: #f1f1f1; } .manage { position: relative; height: 100vh; } .manage-tab { position: relative; } .manage-item { position: absolute; height: 300px; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(80px); } .manage-item.show { position: relative; opacity: 1; visibility: visible; transform: translateY(0px); transition: 0.58s; } .manage-btns { position: absolute; left: 20%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 370px; } .manage-btn-item { position: relative; cursor: pointer; border-bottom: 2px solid rgba(255, 255, 255, 0.2); } .manage-btn-item:first-child { margin-bottom: 90px; } .manage-btn-item:hover span:before, .manage-btn-item.active span:before { width: 100%; } .manage-btn-item:hover i, .manage-btn-item.active i { opacity: 1; visibility: visible; right: 0; } .manage-btn-item span { display: inline-block; position: relative; color: #fff; font-size: 24px; font-weight: bold; line-height: 58px; } .manage-btn-item span:before { position: absolute; left: 0; bottom: -2px; content: ""; width: 0; height: 2px; background: #fff; transition: 0.45s; } .manage-btn-item i { display: block; position: absolute; right: 6px; top: 50%; margin-top: -10px; color: #fff; font-size: 20px; line-height: 1; font-weight: bold; opacity: 0; visibility: hidden; transition: 0.4s; } .manage-slide { position: relative; height: 100vh; overflow: hidden; } .manage-slide:last-child { overflow: visible; } .manage-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: cover; } .manage-slide.swiper-slide-active .manage-fix { opacity: 1; visibility: visible; margin-top: 0; transition-delay: 0.4s; } .manage-fix { position: absolute; left: 10%; top: 44%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 670px; opacity: 0; visibility: hidden; margin-top: 120px; transition: 0.8s; } .manage-fix .solute-numble:before { display: none; } .manage-fix .solute-numble b { font-size: 36px; } .manage-fix strong { display: block; margin-bottom: 46px; color: #fff; font-size: 36px; font-weight: normal; } .manage-fix p { color: #f1f1f1; font-size: 16px; line-height: 2; letter-spacing: 2px; } .manage-slide:nth-child(2n+2) .manage-fix { left: auto; right: 10%; } .manage-down { position: absolute; left: 0; bottom: 62px; z-index: 10; width: 100%; } .manage-down:before { position: absolute; z-index: -1; left: 0; top: 25px; content: ""; width: 100%; height: 1px; background: #fff; opacity: 0.2; } .manage-hidden { height: 100%; } .manage-li { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .manage-li li { cursor: pointer; height: 50px; line-height: 50px; color: #fff; font-size: 16px; padding: 0 40px; border-radius: 25px; transition: 0.4s; white-space: nowrap; } .manage-li li:hover, .manage-li li.active { background: #008bc4; } .ralate { position: relative; background: url(../images/house1.png) right bottom no-repeat; } .ralate .service-btn { left: 60%; margin-left: 0; bottom: 120px; z-index: 10; } .ralate .service-btn span { border-radius: 50%; border: 1px solid #dddddd; color: #dddddd; } .relate-swiper { float: left; width: 50%; } .relate-slide { overflow: hidden; } .relate-slide figure { display: block; line-height: 1; overflow: hidden; } .relate-slide figure img { display: block; width: 100%; height: auto; } .ralate-content { float: right; margin-right: 10%; padding-top: 130px; width: 30.1%; } .ralate-content .solute-numble { padding-bottom: 0; margin-bottom: 54px; color: #666666; } .ralate-content .solute-numble:before { display: none; } .relate-text { position: relative; } .relate-item { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(60px); } .relate-item.active { opacity: 1; visibility: visible; transform: translateY(0px); transition: 0.65s; } .relate-item strong { display: block; margin-bottom: 24px; line-height: 1; color: #333333; font-size: 36px; font-weight: normal; letter-spacing: 3px; } .relate-item strong small { display: inline-block; margin-left: 13px; color: #008bc4; line-height: 1; font-size: 24px; font-weight: lighter; padding-left: 18px; border-left: 1px solid #008bc4; text-transform: uppercase; } .relate-item p { color: #666666; font-size: 16px; line-height: 2.2; text-indent: 34px; letter-spacing: 1px; } .customer { padding: 92px 0 168px; background-position: center bottom; background-size: cover; } .maps { float: right; width: 32.55%; height: 392px; } .customer-contact { float: left; width: 62.5%; } .customer-top { margin-bottom: 8.3333%; } .customer-top strong { display: block; margin-bottom: 24px; line-height: 1.1; color: #008bc4; font-size: 30px; font-weight: normal; } .customer-top p { color: #666666; font-size: 16px; line-height: 2.4; } .customer-list { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .customer-item { text-align: center; } .customer-item b { display: block; margin-bottom: 44px; text-align: center; color: #666666; font-size: 40px; font-weight: normal; line-height: 1; } .customer-item span { display: block; margin-bottom: 12px; line-height: 1; color: #333333; font-size: 16px; } .customer-item p { color: #333333; font-size: 18px; font-family: "Avian Regular"; } .maps .BMap_bubble_title { text-align: center; margin: auto; height: auto !important; color: #666666; width: 126px !important; white-space: normal !important; font-size: 14px !important; font-weight: bold; } .view-wrap { padding: 90px 6.25% 110px; background: #fff; font-size: 0; } .party-time { display: inline-block; position: sticky; left: 0; top: 100px; width: 9.82%; } .party-year { padding: 24px 22px; text-align: center; background: #008bc4; } .party-year b { display: block; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-size: 50px; line-height: 1; font-weight: normal; font-family: "Helvetica"; } .party-year time { display: block; margin-top: 15px; line-height: 1; color: #fff; font-size: 16px; } .view-prev { margin-top: 132px; } .view-btn { margin-bottom: 38px; } .view-btn a { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .view-btn a:hover span { color: #008bc4; } .view-btn a i { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; font-size: 16px; border-radius: 50%; background: #008bc4; } .view-btn a span { display: block; margin-left: 8px; line-height: 40px; color: #666666; font-size: 16px; transition: 0.4s; } .views-content { display: inline-block; margin-left: 5.58%; width: 84.59%; vertical-align: top; } .views-title { margin-bottom: 34px; } .views-title strong { display: block; margin-bottom: 40px; color: #333333; font-size: 28px; font-weight: normal; } .views-title p { color: #008bc4; font-size: 16px; } .views-text { color: #333333; font-size: 16px; } .views-text img { max-width: 100%; width: auto !important; height: auto !important; }