/* * Created by Edward on 22/12/01 * Copyright (c) 2022 ishutime.com All rights reserved */ * { margin: 0px; padding: 0px; box-sizing: border-box; } html,body{ -webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); } * { touch-action: pan-y; } @font-face { font-family: 'iconfont'; src: url('iconfont.woff2?t=1665396957536') format('woff2'), url('iconfont.woff?t=1665396957536') format('woff'), url('iconfont.ttf?t=1665396957536') format('truetype'); } .sbox { width: 60px; height: auto; position: absolute; left: 50%; margin-left: -30px; bottom: 120px; } .sbox.active{ display: none; } .sbox span { position: absolute; top: 0; left: 50%; width: 46px; height: 46px; margin-left: -23px; border: none; border-radius: 100%; box-sizing: border-box; background: rgba(0,0,0,.4); } .sbox span::after { position: absolute; top: 50%; left: 50%; content: ''; width: 12px; height: 12px; margin: -8px 0 0 -6px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; -webkit-animation:lops 1s ease infinite; } @-webkit-keyframes lops { 0%,100%{ top: 50%; } 50%{ top: 60%; } } .mouse { border: 1px solid #fff; position: relative; width: 20px; height: 35px; border-radius: 100px; background-size: 100% 200%; -webkit-animation: nudgeMouse 5s ease-out infinite; margin: auto } .mouse:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .mouse::before { width: 12px; height: 12px; position: absolute; left: 50%; margin-left: -6px; background-size: cover; content: ''; display: block; top: 40px } .mouse:after { background-color: #fff; width: 5px; height: 5px; border-radius: 100%; -webkit-animation: trackBallSlide 5s linear infinite; animation: trackBallSlide 5s linear infinite } @-webkit-keyframes colorSlide { 0% { background-position: 0 100% } 20% { background-position: 0 0 } 21% { background-color: #fc5f72 } 29.99% { background-color: #fff; background-position: 0 0 } 30% { background-color: #fc5f72; background-position: 0 100% } 50% { background-position: 0 0 } 51% { background-color: #fc5f72 } 59% { background-color: #fff; background-position: 0 0 } 60% { background-color: #fc5f72; background-position: 0 100% } 80% { background-position: 0 0 } 81% { background-color: #fc5f72 } 100%, 90% { background-color: #fff } } @keyframes colorSlide { 0% { background-position: 0 100% } 20% { background-position: 0 0 } 21% { background-color: #fc5f72 } 29.99% { background-color: #fff; background-position: 0 0 } 30% { background-color: #fc5f72; background-position: 0 100% } 50% { background-position: 0 0 } 51% { background-color: #fc5f72 } 59% { background-color: #fff; background-position: 0 0 } 60% { background-color: #fc5f72; background-position: 0 100% } 80% { background-position: 0 0 } 81% { background-color: #fc5f72 } 100%, 90% { background-color: #fff } } @-webkit-keyframes trackBallSlide { 0% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 6% { opacity: 1; -webkit-transform: scale(.9) translateY(5px); transform: scale(.9) translateY(5px) } 14% { opacity: 0; -webkit-transform: scale(.4) translateY(30px); transform: scale(.4) translateY(30px) } 15%, 19% { opacity: 0; -webkit-transform: scale(.4) translateY(-5px); transform: scale(.4) translateY(-5px) } 28%, 29.99% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 30% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 36% { opacity: 1; -webkit-transform: scale(.9) translateY(5px); transform: scale(.9) translateY(5px) } 44% { opacity: 0; -webkit-transform: scale(.4) translateY(30px); transform: scale(.4) translateY(30px) } 45%, 49% { opacity: 0; -webkit-transform: scale(.4) translateY(-5px); transform: scale(.4) translateY(-5px) } 58%, 59.99% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 60% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 66% { opacity: 1; -webkit-transform: scale(.9) translateY(5px); transform: scale(.9) translateY(5px) } 74% { opacity: 0; -webkit-transform: scale(.4) translateY(30px); transform: scale(.4) translateY(30px) } 75%, 79% { opacity: 0; -webkit-transform: scale(.4) translateY(-5px); transform: scale(.4) translateY(-5px) } 100%, 88% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } } @keyframes trackBallSlide { 0% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 6% { opacity: 1; -webkit-transform: scale(.9) translateY(5px); transform: scale(.9) translateY(5px) } 14% { opacity: 0; -webkit-transform: scale(.4) translateY(30px); transform: scale(.4) translateY(30px) } 15%, 19% { opacity: 0; -webkit-transform: scale(.4) translateY(-5px); transform: scale(.4) translateY(-5px) } 28%, 29.99% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 30% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 36% { opacity: 1; -webkit-transform: scale(.9) translateY(5px); transform: scale(.9) translateY(5px) } 44% { opacity: 0; -webkit-transform: scale(.4) translateY(30px); transform: scale(.4) translateY(30px) } 45%, 49% { opacity: 0; -webkit-transform: scale(.4) translateY(-5px); transform: scale(.4) translateY(-5px) } 58%, 59.99% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 60% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } 66% { opacity: 1; -webkit-transform: scale(.9) translateY(5px); transform: scale(.9) translateY(5px) } 74% { opacity: 0; -webkit-transform: scale(.4) translateY(30px); transform: scale(.4) translateY(30px) } 75%, 79% { opacity: 0; -webkit-transform: scale(.4) translateY(-5px); transform: scale(.4) translateY(-5px) } 100%, 88% { opacity: 1; -webkit-transform: scale(1) translateY(-5px); transform: scale(1) translateY(-5px) } } @-webkit-keyframes nudgeMouse { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { -webkit-transform: translateY(8px); transform: translateY(8px) } 30% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(8px); transform: translateY(8px) } 60% { -webkit-transform: translateY(0); transform: translateY(0) } 80% { -webkit-transform: translateY(8px); transform: translateY(8px) } 90% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes nudgeMouse { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { -webkit-transform: translateY(8px); transform: translateY(8px) } 30% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(8px); transform: translateY(8px) } 60% { -webkit-transform: translateY(0); transform: translateY(0) } 80% { -webkit-transform: translateY(8px); transform: translateY(8px) } 90% { -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes nudgeText { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { -webkit-transform: translateY(2px); transform: translateY(2px) } 30% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(2px); transform: translateY(2px) } 60% { -webkit-transform: translateY(0); transform: translateY(0) } 80% { -webkit-transform: translateY(2px); transform: translateY(2px) } 90% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes nudgeText { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { -webkit-transform: translateY(2px); transform: translateY(2px) } 30% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(2px); transform: translateY(2px) } 60% { -webkit-transform: translateY(0); transform: translateY(0) } 80% { -webkit-transform: translateY(2px); transform: translateY(2px) } 90% { -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes colorText { 21% { opacity: 0; } 30% { opacity: 1; } 51% { opacity: 0; } 60% { opacity: 1; } 81% { opacity: 0; } 90% { opacity: 1; } } .iconfont { font-family: "iconfont" ; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: montserrat; src: url(../fonts/montserrat-regular-webfont.woff2) } @font-face { font-family: BrownBlod; src: url(../fonts/brown/brown-regular.woff2) } header { width: 100%; display: flex; position: fixed; top: 0; justify-content: space-between; padding: 0px 3%; z-index: 100; align-items: center; -webkit-transition: all .5s; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); } .menu_bar.active a{ background: #fff; } .menu_bar.active a p{ color: #fff; } header .logo { width: 180px; position: relative; } header .logo img { position: relative; -webkit-transition: all .35s; width: 150px; } header .logo img:nth-child(1) { opacity: 1; } header .logo img:nth-child(2) { position: absolute; opacity: 0; left: 0%; top: 0%; } .vision_word.p3 .winsion_warp{ width: 400%; -webkit-animation: loop_animate 20s linear infinite; } .marquee_word{ width: 100%; margin-top: 3vw; text-transform: uppercase; font-family: BrownBlod; font-size: 3vw; margin-bottom: 3vw; color: #0061ae; font-weight: bold; line-height: 1; text-align: center; } .ms_logo{ width: 100%; display: none; } header nav { width: 100%; position: relative; display: flex; } header nav ul { display: flex; width: 100%; justify-content: space-between; } header nav ul li { width: calc(100% / 6); position: relative; } header nav ul li>a:after{ width: 0%; height: 3px; position: absolute; left: 50%; bottom: 0%; content: ''; background: #0061ae; -webkit-transition:all .45s; } header nav ul li:hover>a:after{ width: 50%; left: 25%; } header nav ul li .list{ width: 120px; height: auto; position: absolute; left: 50%; margin-left: -60px; top: 75px; opacity: 0; visibility: hidden; -webkit-transition:all .5s; padding: 10px 0px; background: #fff; background: rgba(255,255,255,.8); border-radius: 0px 0px 5px 5px; backdrop-filter: blur(10px); } header nav ul li:hover .list{ opacity: 1; visibility: visible; top: 50px; } header nav ul li .list a{ width: 100%; height: auto; line-height: 35px; text-align: center; color: #3e3e3e; font-size: 14px; font-weight: normal; padding-bottom: 0px; } header nav ul li .list a:hover{ color: #0061ae; } .sub_header ul li:after{ width: 0px; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; position: absolute; left: 50%; margin-left: -8px; top: 0px; content: ''; -webkit-transition:all .5s; opacity: 0; } .sub_header ul li:hover:after{ opacity: 1; top: -8px; } .vision_word.p4 .winsion_warp{ width: 600%; -webkit-animation: loop_animate 20s linear infinite; } header nav ul li a { color: #fff; font-size: 16px; font-weight: bold; display: block; text-align: center; line-height: 45px; position: relative; padding-bottom: 5px; } header nav ul li a:hover{ opacity: .9; } .star_right ul li .info{ display: none; } header .phone { width: 190px; height: 50px; border-radius: 40px; border: solid 1px #ffffff; display: flex; color: #fff; font-weight: bold; font-size: 20px; transition: 0.3s all ease-in-out; position: relative; align-items: center; } header .phone .text b { font-family: montserrat; font-size: 18px; margin-top: 3px; } header .phone .img { width: 40px; height: 40px; background: white; border-radius: 30px; transition: 0.3s all ease-in-out; position: absolute; display: flex; color: #b21b21; line-height: 40px; justify-content: center; font-size: 24px; left: 4px; top: 4px; -webkit-animation: rotateIns 2s ease infinite; } @-webkit-keyframes rotateIns { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } header .phone .img img { width: 22px; position: absolute; top: 50%; margin-top: -12px; left: 14px; } header .phone .text { position: absolute; transition: 0.3s all ease-in-out; font-size: 12px; width: calc(100% - 60px); left: 50px; line-height: 1; display: flex; flex-wrap: wrap; } header.active { background: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,.05); } header.active:before{ opacity: 0; } header.active nav ul li a::before { top: -16px; } header.active nav ul li a:hover:before { height: 76px; } .main-swiper { width: 100%; height: 100vh; position: relative; overflow: hidden; } .banner-swiper { height: 100vh; } .banner-swiper .swiper-slide { background: center center no-repeat; background-size: cover; position: relative; overflow: hidden; } .banner-swiper .swiper-slide:before{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; content: ''; background: rgba(0,0,0,.1); } .banner-swiper .swiper-slide:nth-child(even) .line { left: 0%; } .banner-swiper .swiper-slide .line { width: 0%; position: absolute; top: 15%; left: 20%; overflow: hidden; -webkit-transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) .5s; } .banner-swiper .swiper-slide.swiper-slide-active .line { width: 80vw; } .banner-swiper .swiper-slide:nth-child(even).swiper-slide-active .line { width: 70vw; } .banner-swiper .swiper-slide .line .ls { background: center center no-repeat; background-size: cover; width: 80vw; height: calc(28vw * .8); } .banner-swiper .swiper-slide:nth-child(even) .line .ls { width: 70vw; height: calc(28vw * .7); } .banner-swiper .swiper-slide .txt { width: 100%; height: auto; text-align: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); color: #fff; font-size: 3vw; font-weight: bold; line-height: 1.4; } .banner-swiper .swiper-slide .txt .p { width: 100%; height: auto; position: relative; overflow: hidden; } .banner-swiper .swiper-slide .txt .p p { -webkit-transform: translateY(100%); -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .7s; text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1); } .banner-swiper .swiper-slide .txt .p:nth-child(2) p { -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1) .8s; } .banner-swiper .swiper-slide.swiper-slide-active .txt .p p { -webkit-transform: translateY(0%); } .banner-swiper .swiper-pagination-bullet { width: 30px; height: 30px; background: url(../images/banner_icon.png) no-repeat; background-size: 60px auto; background-position: -30px 0px; -webkit-transform: scale(0.7); opacity: .5; -webkit-transition: all .35s; } .banner-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { -webkit-transform: scale(1); opacity: 1; } .banner-swiper .swiper-button-next { right: 10%; } .banner-swiper .swiper-button-prev { left: 10%; } .banner-swiper .swiper-button-next:after, .banner-swiper .swiper-button-prev:after { color: #fff; font-size: 36px; } #nav-icon2 { display: none; } .header_r { width: 180px; display: flex; align-items: center; justify-content: space-between; } .navC { width: calc(100% - 560px); display: flex; flex-wrap: wrap; position: relative; } .nav_bar { width: 100%; display: flex; margin-bottom: 0px; margin-top: 10px; padding-left: 7%; } nav { width: 100%; display: flex; } .nav_bar .a { display: flex; width: auto; color: #fff; margin-right: 25px; align-items: center; position: relative; cursor: pointer; font-size: 12px; } .nav_bar .a .langue_bar{ width: 140%; height: auto; position: absolute; left: -20%; top: -10px; background: rgba(255,255,255,1); color: #3e3e3e; font-size: 12px; padding: 15px 0px; border-radius: 5px; padding-top: 35px; -webkit-transition:all .35s; opacity: 0; visibility: hidden; box-shadow: 0px 0px 30px rgb(0 0 0 / 10%); } .nav_bar .a:hover .langue_bar{ opacity: 1; visibility: visible; } .nav_bar .a .langue_bar a{ display: block; width: 100%; font-size: 12px; text-align: center; line-height: 20px; color: #3e3e3e; } .nav_bar .a .langue_bar a:hover{ opacity: .7; } .nav_bar .a .icon{ width: 15px; height: 15px; background: url(../images/icon1.png) no-repeat; background-size: auto 200%; position: relative; z-index: 1; } .nav_bar .a:nth-child(2) .icon{ background-position: -15px 0px; } .nav_bar .a:nth-child(3) .icon{ background-position: -30px 0px; } .nav_bar .a:nth-child(4){ z-index: 10; } .nav_bar .a:nth-child(4) .icon{ background-position: -45px 0px; } header.active .nav_bar .a .icon{ background-position: 0px -15px; } header.active .nav_bar .a:nth-child(2) .icon{ background-position: -15px -15px; } header.active .nav_bar .a:nth-child(3) .icon{ background-position: -30px -15px; } header.active .nav_bar .a:nth-child(4) .icon{ background-position: -45px -15px; } .nav_bar .a:nth-child(4):hover .icon { background-position: -45px -15px; } .nav_bar .a:nth-child(4):hover p{ color: #3e3e3e; } .nav_bar .a p { width: auto; margin-left: 5px; position: relative; z-index: 1; } .order_btn { width: 120px; height: 50px; border: 1px solid #fff; line-height: 48px; text-align: center; border-radius: 50px; color: #fff; cursor: pointer; position: relative; overflow: hidden; -webkit-transition: all .5s; } .order_btn .txt{ width: 100%; height: 20px; position: absolute; left: 0%; top: 50%; -webkit-transform: translateY(-50%); overflow: hidden; line-height: 20px; } .order_btn .txt p{ display: block; width: 100%; -webkit-transition: all .45s; position: relative; top: 0px; } header.active .order_btn:hover .txt{ color: #fff; } header.active .search_btn:hover { color: #fff; background: #0061ae; } .order_btn:hover .txt p:nth-child(1){ top: -20px; } .order_btn:hover .txt p:nth-child(2){ top: -20px; } .order_btn:before{ width: 150px; height: 150px; position: absolute; left: 50%; -webkit-transform: translateX(-50%) scale(0); border-radius: 50%; content: ''; background: #0061ae; -webkit-transition: all .5s; } .order_btn:hover{ border-color: #0061ae; } .order_btn:hover:before{ -webkit-transform: translateX(-50%) scale(1.5); } .search_btn { width: 50px; height: 50px; border: 1px solid #fff; line-height: 48px; text-align: center; color: #fff; border-radius: 50%; font-size: 20px; cursor: pointer; position: relative; overflow: hidden; -webkit-transition: all .45s; } .search_btn i{ position: relative; display: block; } .search_btn:hover i{ -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; } @keyframes gelatine { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } .search_btn:before{ width: 50px; height: 50px; position: absolute; left: 0%; top: 50px; background: #0061ae; border-radius: 50px 50px 0px 0px; content: ''; -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1); } .search_btn:hover{ border-color: #0061ae; } .search_btn:hover:before{ top: 0%; -webkit-transform: scale(1.2); } .inner { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: center center no-repeat; background-size: cover; } .swiper-pagination-bullet { position: relative; } .swiper-pagination-bullet p { width: 60px; height: 20px; line-height: 20px; font-size: 12px; -webkit-transform: translateX(-95%); color: #fff; display: block; text-align: right; position: absolute; top: -6px; padding: 0px 5px; opacity: 0; -webkit-transition: all .5s; } .swiper-pagination-bullet p:before { width: 0%; height: 100%; position: absolute; right: 0%; top: 0px; content: ''; background: #000; -webkit-transition: all .5s ease 0.5s; z-index: -1; } .swiper-pagination.sp:before { width: 90vh; height: 90vh; position: absolute; right: -60vh; top: 50%; border-radius: 50%; -webkit-transform: translateY(-50%) scale(0.8); background: rgba(0, 0, 0, 0.4); content: ''; pointer-events: none; transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0; } .swiper-pagination.sp:hover:before { -webkit-transform: translateY(-50%) scale(1); opacity: 1; } .swiper-pagination-bullet:nth-child(2) p { -webkit-transition: all .5s ease 0.05s; } .swiper-pagination.sp .swiper-pagination-bullet p::after { width: 100%; height: 150%; position: absolute; left: 0%; top: -25%; content: ''; } .swiper-pagination-bullet:nth-child(3) p { -webkit-transition: all .5s ease 0.1s; } .swiper-pagination-bullet:nth-child(4) p { -webkit-transition: all .5s ease 0.15s; } .swiper-pagination-bullet:nth-child(5) p { -webkit-transition: all .5s ease 0.2s; } .swiper-pagination-bullet:nth-child(6) p { -webkit-transition: all .5s ease 0.25s; } .sp .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #00944b; } .sp .swiper-pagination-bullet.swiper-pagination-bullet-active p:before { width: 100%; } .sp:hover .swiper-pagination-bullet p { opacity: 1; -webkit-transform: translateX(-105%); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 20px 0px; opacity: 1; } .main-swiper>.swiper-wrapper>.swiper-slide { background: #fff; } /* .box1::after{ width: 100vw; height: 100vw; position: absolute; left: 50%; top: 50%; background: url(../images/rect.svg) center center no-repeat; background-size: cover; -webkit-transform: translate(-50%, -50%) scale(0.8); pointer-events: none; opacity: 1; content: ''; -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } */ .box2 .lines { width: 0%; position: absolute; bottom: 0%; left: 0%; overflow: hidden; -webkit-transition: all 2.5s cubic-bezier(0.39, 0.575, 0.565, 1); } .box2.active .lines { width: 100%; } .box2 .lines .lls { background: center center no-repeat; background-size: cover; width: 70vw; height: calc(28vw * .7); } /* .box1.active::after{ -webkit-transform: translate(-50%, -50%) scale(4); } */ .container .banner-swiper { -webkit-transform: scale(1.2); clip-path: circle(0vw at 50vw 50vh); -webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .active .banner-swiper { -webkit-transform: scale(1); clip-path: circle(70vw at 50vw 50vh); background: #fff; } .con_bg .bgs { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: center center no-repeat; background-size: cover; opacity: 0; -webkit-transition: all .5s; } .con_bg .bgs.active { opacity: 1; } header.active .logo img:nth-child(2) { opacity: 1; } header.active .logo img:nth-child(1) { opacity: 0; } header.show { top: -90px; } header.active nav ul li a { color: #3e3e3e; } header.active .nav_bar a,header.active .nav_bar .a { color: #3e3e3e; } header.active .nav_bar .a{ opacity: .5; } header.active .nav_bar .a:hover{ opacity: 1; } header.active .search_btn { border-color: rgba(0,0,0,.2); color: #3e3e3e; } header.active .order_btn { border-color: rgba(0,0,0,.2); color: #3e3e3e; } body.home { overflow: hidden; } .container { width: 100%; height: 100vh; position: relative; overflow: hidden; } .container .box { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; -webkit-transition: all 1s; } .container .box.active { z-index: 5; } .box .contrl { width: 30vw; height: 30vw; position: absolute; left: 10%; top: 15%; border-radius: 50%; opacity: 0; -webkit-backface-visibility: hidden; -webkit-transform: scale(1.5); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); box-shadow: 0px 0px 50px rgb(0 0 0 / 10%); overflow: hidden; } .box .contrl img { width: 30vw; height: 30vw; position: absolute; left: 0px; top: 0px; -webkit-transition: all 1s; opacity: 0; -webkit-transform: scale(1.1); } .box .contrl img.active { opacity: 1; -webkit-transform: scale(1); } .box2.active .contrl { opacity: 1; -webkit-transform: scale(1); } .ball { width: 5vw; height: 5vw; position: absolute; left: 13%; bottom: 13%; border-radius: 50%; overflow: hidden; opacity: 0; -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1) .1s; -webkit-transform: scale(0.5); cursor: pointer; border: 4px solid #fff; } .ball img { -webkit-transition: all .45s; } .ball:hover img,.ball.active img { -webkit-transform: scale(1.1); } .ball.active { border-color: #00944b; } .ball.ball2 { left: 20.5%; bottom: 8%; -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1) .2s; } .ball.ball3 { left: 28%; bottom: 10%; -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1) .3s; } .active .ball, .active .ball.ball2, .active .ball.ball3 { -webkit-transform: scale(1); opacity: 1; } .box2 .right { width: 40%; height: auto; position: absolute; left: 45%; top: 45%; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform: translateY(-50%); } .box2 .right .name, .box3 .name, .box4 .name { font-weight: bold; color: #0061ae; line-height: 1.6; margin-bottom: 3vw; } .box2 .right .name p, .box3 .name .cn p { -webkit-transform: translateY(100%); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); opacity: 0; } .box3.active .name .cn p { -webkit-transform: translateY(0%); opacity: 1; } .box2.active .right .name .en p { -webkit-transform: translateY(0%); opacity: 1; } .box2.active .right .name p { -webkit-transform: translateY(0%); opacity: 1; } .box2 .right .singePage { margin-bottom: 6vw; opacity: 0; -webkit-transform: translateY(100px); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); } .box2 .right .common_more, .box3 .common_more { opacity: 0; -webkit-transform: translateY(200px); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); } .box3 .common_more { -webkit-transform: translateY(200px); } .box2 .right .name .cn, .box3 .name .cn, .box4 .name .cn { font-size: 36px; } .box4 .name .cn p { -webkit-transform: translateY(100%); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); opacity: 0; } .box2 .right .name .en { font-size: 1.5vw; } .box2 .right .name .en p { -webkit-transform: translateY(200%); opacity: 0; } .box2.active .right .name, .box2.active .right .singePage, .box2.active .right .common_more { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(0px); } .box3.active .name, .box3.active .news, .box3.active .common_more { opacity: 1; -webkit-transform: translateY(0px); } .common_more { width: 205px; height: 55px; position: relative; background: #0061ae; line-height: 55px; color: #fff; display: block; border-radius: 50px; overflow: hidden; cursor: pointer; } .common_more:before { width: 200px; height: 200px; position: absolute; top: -75%; left: 62%; background: #00944b; content: ''; border-radius: 50%; -webkit-transition: all .5s; } .common_more:hover:before { -webkit-transform: scale(1.1); } .common_more .txt { padding-left: 35px; font-size: 14px; -webkit-transition: all .5s; letter-spacing: 3px; font-size: 16px; font-weight: bold; } .common_more:hover .txt { letter-spacing: 0px; } .common_more .icon { position: absolute; line-height: 55px; right: 25px; width: 25px; top: 50%; margin-top: -12.5px; -webkit-transition: all .5s; } .common_more:hover .icon { -webkit-transform: rotateX(180deg); } #bg { position: absolute; width: 1000px; height: 1000px; top: 50%; left: 50%; margin-left: -500px; margin-top: -500px; -webkit-transition: all 2.5s cubic-bezier(0.215, 0.61, 0.355, 1); } #bg div div { position: absolute; } #bg.active { -webkit-transform: translateX(-200px) translateY(300px) rotateZ(-60deg); } #bg .row1 div { -webkit-animation: orbmove 96s linear infinite; animation: orbmove 96s linear infinite; opacity: 0.3; } #bg .row1 .orb1 { position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; margin-left: -30px; margin-top: -380px; } #bg .row1 .orb1 div { width: 100%; height: 100%; border-radius: 60px; background: -webkit-linear-gradient(top, #ffffff, #dedede); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row1 .orb2 { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin-left: 450px; margin-top: 350px; } #bg .row1 .orb2 div { width: 100%; height: 100%; border-radius: 100px; background: -webkit-linear-gradient(top, #ffffff, #dedede); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row1 .orb1c { position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; margin-left: 1970px; margin-top: -380px; } #bg .row1 .orb1c div { width: 100%; height: 100%; border-radius: 60px; background: -webkit-linear-gradient(top, #ffffff, #dedede); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row1 .orb2c { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin-left: 2450px; margin-top: 50px; } #bg .row1 .orb2c div { width: 100%; height: 100%; border-radius: 100px; background: -webkit-linear-gradient(top, rgba(0, 111, 185, .3), #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row2 div { -webkit-animation: orbmove 48s linear infinite; animation: orbmove 48s linear infinite; opacity: 0.6; } #bg .row2 .orb1 { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -500px; margin-top: -300px; } #bg .row2 .orb1 div { width: 100%; height: 100%; border-radius: 200px; background: -webkit-linear-gradient(top, rgba(20, 155, 71, .3), #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row2 .orb2 { position: absolute; width: 250px; height: 250px; top: 50%; left: 50%; margin-left: 175px; margin-top: -125px; } #bg .row2 .orb2 div { width: 100%; height: 100%; border-radius: 250px; background: -webkit-linear-gradient(top, rgba(20, 155, 71, .3), #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row2 .orb1c { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: 1500px; margin-top: -300px; } #bg .row2 .orb1c div { width: 100%; height: 100%; border-radius: 200px; background: -webkit-linear-gradient(top, rgba(0, 111, 185, .3), #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row2 .orb2c { position: absolute; width: 400px; height: 400px; top: 50%; left: 50%; margin-left: 2100px; margin-top: -200px; } #bg .row2 .orb2c div { width: 100%; height: 100%; border-radius: 400px; background: -webkit-linear-gradient(top, #dedede, #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row3 div { -webkit-animation: orbmove 24s linear infinite; animation: orbmove 24s linear infinite; opacity: 0.7; } #bg .row3 .orb1 { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; margin-left: 850px; margin-top: -300px; } #bg .row3 .orb1 div { width: 100%; height: 100%; border-radius: 300px; background: -webkit-linear-gradient(top, rgba(0, 111, 185, .3), #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row3 .orb2 { position: absolute; width: 600px; height: 600px; top: 50%; left: 50%; margin-left: 0px; margin-top: 0px; } #bg .row3 .orb2 div { width: 100%; height: 100%; border-radius: 600px; background: -webkit-linear-gradient(top, rgba(20, 155, 71, .3), #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row3 .orb1c { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; margin-left: 2850px; margin-top: -300px; } #bg .row3 .orb1c div { width: 100%; height: 100%; border-radius: 300px; background: -webkit-linear-gradient(top, #dedede, #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } #bg .row3 .orb2c { position: absolute; width: 600px; height: 600px; top: 50%; left: 50%; margin-left: 2000px; margin-top: 0px; } #bg .row3 .orb2c div { width: 100%; height: 100%; border-radius: 600px; background: -webkit-linear-gradient(top, #dedede, #ffffff); -webkit-animation: orbloop 6s linear infinite; animation: orbloop 6s linear infinite; } @-webkit-keyframes orbloop { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes orbmove { from { -webkit-transform: translateX(0px); } to { -webkit-transform: translateX(-2000px); } } .box3 .left { width: 45%; height: auto; position: absolute; left: 5%; top: 55%; -webkit-transform: translateY(-50%); -webkit-perspective: 1000px; perspective: 1000px; } .news { width: 100%; margin-bottom: 4vw; opacity: 0; -webkit-transform: translateY(100px); -webkit-transition: 1.5s cubic-bezier(.16, 1, .3, 1) .1s; } .news ul li { position: relative; width: 100%; margin-bottom: 1vw; } .news ul li:last-child { margin-bottom: 0vw; } .news ul li a { width: 100%; display: flex; justify-content: space-between; align-items: center; } .news ul li a .thum .pic { -webkit-transition: all 1s; } .news ul li a:hover .pic { -webkit-transform: scale(1.2); } .news ul li a:hover .title { color: #0061ae; } .news ul li a .thum { width: 25%; height: auto; position: relative; overflow: hidden; border-radius: 50%; } .news ul li a .info { width: calc(75% - 20px); } .box3 .name { margin-bottom: 2vw; } .news ul li a .title { font-size: 20px; font-weight: bold; width: 100%; line-height: 1.5; margin-bottom: 0.5vw; } .news ul li a .des { width: 100%; height: auto; line-height: 1.7; font-size: 16px; opacity: .7; margin-bottom: 1vw; } .news ul li a .time { font-size: 14px; opacity: .5; } .box3 .right { position: absolute; left: 50vw; bottom: auto; top: -35vw; width: 78vw; height: 78vw; clip-path: circle(0vw at 60vw 20vw); overflow: hidden; transition: clip-path 2.5s cubic-bezier(0.215, 0.61, 0.355, 1); backface-visibility: hidden; /* -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1); */ /* -webkit-transition: all 2s cubic-bezier(0.39, 0.575, 0.565, 1); */ } .box3.active .right { clip-path: circle(39vw at 39vw 39vw); } .box3 .right .pic { width: 78vw; height: 78vw; position: absolute; right: 0%; top: 0%; border-radius: 50%; } .box3 .right .info { width: 30vw; height: auto; position: absolute; left: 15vw; bottom: 15%; color: #fff; } .box3 .right .info .time { font-size: 14px; margin-bottom: 0.5vw; } .box3 .right .info .title { width: 100%; font-size: 28px; font-weight: bold; line-height: 1.5; } .box4 .left { width: 45%; height: auto; position: absolute; left: 5%; top: 55%; -webkit-transform: translateY(-50%); -webkit-perspective: 1000px; perspective: 1000px; } .box4 .list { width: 100%; margin-bottom: 4vw; opacity: 0; -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); -webkit-transform: translateY(100px); } .box4.active .list { -webkit-transform: translateY(0px); opacity: 1; } .box4 .list ul { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .box4 .common_more { opacity: 0; -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); -webkit-transform: translateY(200px); } .box4.active .common_more { -webkit-transform: translateY(0px); opacity: 1; } .box4.active .name .cn p { -webkit-transform: translateY(0%); opacity: 1; } .box4 .list ul li { width: 25%; height: auto; position: relative; margin-bottom: 2vw; } .box4 .list ul li:nth-child(n+4) { margin-bottom: 0px; } .box4 .list ul li .txt { font-size: 16px; } .box4 .list ul li:nth-child(1), .box4 .list ul li:nth-child(4) { width: 35%; } .box4 .list ul li:nth-child(2), .box4 .list ul li:nth-child(5) { width: 40%; } .box4 .list ul li .icon { width: 50px; } .box4 .list ul li .title { width: 100%; display: flex; line-height: 1; align-items: center; color: #00944b; margin-bottom: 0.5vw; } .box4 .list ul li .title span { font-size: 18px; font-weight: bold; } .box4 .list ul li .title p { font-family: BrownBlod; font-size: 46px; font-weight: bold; } .box4 .right { width: 100vw; height: 100vh; position: absolute; left: 55%; top: 0%; overflow: hidden; clip-path: circle(0vw at 100vw 50vh); transition: clip-path 2.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .box4 .right .pic { width: 100vw; height: 100vh; position: absolute; left: -50%; top: 0%; -webkit-transform: translateY(0%); opacity: 1; } .box4.active .right { clip-path: circle(50vw at 50vw 50vh); } .box4 .line { width: 55vw; height: 0px; position: absolute; overflow: hidden; -webkit-transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1); } .box4.active .line { height: calc(55vw * 0.73); } .box4 .line .ls { width: 55vw; height: calc(55vw * 0.73); position: absolute; left: 0%; top: 0%; } .box5 .line { width: 0vw; height: calc(59vw * 0.32); position: absolute; overflow: hidden; -webkit-transition: all 2.5s cubic-bezier(0.39, 0.575, 0.565, 1); left: 41%; bottom: 5%; } .box5 .line .ls { width: 59vw; height: calc(59vw * 0.32); position: absolute; left: 0%; top: 0%; } .box5.active .line { width: 59vw; } .box5 .right { width: 35%; left: 50%; top: 50%; -webkit-transform: translateY(-50%); position: absolute; } .box5 .right .name { font-weight: bold; color: #0061ae; line-height: 1.4; margin-bottom: 3vw; } .box5 .right .name .cn { font-size: 2.6vw; } .box5 .right .name .cn p { -webkit-transform: translateY(100%); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); opacity: 0; } .box5.active .right .name .cn p { -webkit-transform: translateY(0%); opacity: 1; } .box5 .right .singePage { margin-bottom: 6vw; opacity: 0; -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); -webkit-transform: translateY(100px); } .box5 .common_more { opacity: 0; -webkit-transform: translateY(200px); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); } .box5.active .right .singePage { opacity: 1; -webkit-transform: translateY(0px); } .box5.active .right .common_more { opacity: 1; -webkit-transform: translateY(0px); } .box5 .left { width: 50%; height: 100vh; position: absolute; left: 0%; top: 0%; -webkit-perspective: 1000px; perspective: 1000px; transform-style: preserve-3d; } .box5 .left .v_dot { position: absolute; width: 40%; left: 10%; top: 10%; opacity: 0; cursor: pointer; } .box5 .left .v_dot .thum { border-radius: 50%; overflow: hidden; } .box5 .left .v_dot .thum .btn { width: 60px; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); } .box5 .left .v_dot .thum .pic { -webkit-transition: all 1s ease; } .box5 .left .v_dot:hover .pic { -webkit-transform: scale(1.2); } .box5 .left .v_dot:hover .img { -webkit-transform: rotate(15deg); } .box5 .left .v_dot .img { width: 120%; height: auto; position: absolute; left: -10%; top: -10%; -webkit-transition: all 1s ease; } .box5.active .left .v_dot.dot1, .box5.active .left .v_dot.dot2, .box5.active .left .v_dot.dot3 { opacity: 1; -webkit-transform: scale(1); -webkit-transform: rotate(0deg); } .box5 .left .v_dot.dot1 { top: 15%; -webkit-transition: all 1.2s cubic-bezier(0.215, 0.610, 0.355, 1); -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; } .box5 .left .v_dot.dot2 { top: 35%; width: 25%; left: 55%; -webkit-transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1); -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; } .box5 .left .v_dot.dot2 .img { width: 130%; left: -15%; top: -15%; } .box5 .left .v_dot.dot3 { top: 62%; width: 30%; left: 35%; -webkit-transition: all 0.8s cubic-bezier(0.215, 0.610, 0.355, 1); -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; } .box6 .left { width: 85vh; height: 100vh; position: absolute; left: 0%; top: 0%; clip-path: circle(50vh at -50vh 50vh); transition: clip-path 1.5s cubic-bezier(0.39, 0.575, 0.565, 1); } .box6.active .left { clip-path: circle(85vh at 42.5vh 50vh); } .box6 .left .img { width: 85vh; height: 100vh; position: absolute; left: 0%; top: 0%; } .box6 .right { width: 35%; height: auto; position: absolute; left: 50%; top: 55%; -webkit-transform: translateY(-50%); } .box6 .address { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding-left: 15px; opacity: 0; -webkit-transform: translateY(200px); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); } .box6 .list { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2vw; opacity: 0; -webkit-transform: translateY(100px); -webkit-transition: all 1.5s cubic-bezier(.16, 1, .3, 1); } .box6.active .list, .box6.active .address { opacity: 1; -webkit-transform: translateY(0px); } .box6 .list a { width: 45%; height: auto; background: #f8f9fa; padding: 15px 25px; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; position: relative; overflow: hidden; -webkit-transition: all .5s; } .box6 .list a:hover { box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3); } .box6 .list a:before { width: 200px; height: 200px; position: absolute; right: 15%; top: 0%; content: ''; background: #0061ae; border-radius: 50%; -webkit-transform: scale(0); -webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .box6 .list a:hover:before { -webkit-transform: scale(2); } .box6 .list a:nth-child(n+3) { margin-bottom: 0px; } .box6 .list a .icon { width: 45px; height: 45px; position: relative; background: url(../images/address_icon.png) no-repeat; background-size: auto 90px; background-position: 0px -45px; -webkit-transform: scale(0.8); -webkit-transition: all .45s; } .box6 .list a:hover .icon { background-position: 0px 0px; } .box6 .list a:hover:nth-child(2) .icon { background-position: -45px 0px; } .box6 .list a:nth-child(2) .icon { background-position: -45px -45px; } .box6 .list a:nth-child(3) .icon { background-position: -90px -45px; } .box6 .list a:hover:nth-child(3) .icon { background-position: -90px 0px; } .box6 .list a:nth-child(4) .icon { background-position: -135px -45px; } .box6 .list a:hover:nth-child(4) .icon { background-position: -135px 0px; } .box6 .list a .txt { width: calc(100% - 50px); position: relative; -webkit-transition: all .45s; } .box6 .list a:hover .txt { color: #fff; } .box6 .list a .txt b { font-size: 18px; font-weight: bold; text-transform: uppercase; } .box6 .list a .txt p { font-size: 12px; text-transform: uppercase; opacity: .5; } .flogo { width: 100%; margin-bottom: 1vw; } .flogo img { width: 200px; } .box6 .info { width: calc(100% - 150px); } .box6 .socails { width: 100px; } .box6 .socails .dt { width: 100%; text-align: center; font-size: 14px; margin-bottom: 1.5vw; color: rgba(0, 0, 0, 0.7); } .box6 .socails .dt:last-child{ margin-bottom: 0%; } .box6 .socails .dt img { margin-bottom: 5px; } .box6 .info .in_box { width: 100%; height: auto; position: relative; margin-bottom: 2.5vw; } .box6 .info .in_box:last-child{ margin-bottom: 0vw; } .box6 .info .in_box b { display: block; width: 100%; font-size: 20px; margin-bottom: 5px; } .box6 .info .in_box p { line-height: 1.7; font-size: 16px; } .copyright { width: 100%; height: auto; position: relative; display: flex; text-transform: uppercase; line-height: 25px; color: rgba(0, 0, 0, 0.5); margin-top: 2vw; font-size: 12px; flex-wrap: wrap; } .copyright a { color: rgba(0, 0, 0, 0.5); margin-left: 10px; } .con_bg, .or_box { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; overflow: hidden; } .menu_bar { width: auto; height: auto; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); z-index: 10; } .menu_bar:before { width: 90vh; height: 90vh; position: absolute; right: -60vh; top: 50%; border-radius: 50%; -webkit-transform: translateY(-50%) scale(0.8); background: rgba(0, 0, 0, 0.2); content: ''; pointer-events: none; transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0; backdrop-filter: blur(1px); display: none; } .menu_bar:hover:before { -webkit-transform: translateY(-50%) scale(1); opacity: 1; } .menu_bar:hover a p { opacity: 1; -webkit-transform: translateX(-105%); } .menu_bar a.active p:before { width: 100%; } .menu_bar a { display: block; width: 8px; height: 8px; background-color: #000; border-radius: 50%; cursor: pointer; position: relative; margin: 20px 0px; } .menu_bar a.active { background-color: #00944b; } .menu_bar a p { width: 60px; height: 20px; line-height: 20px; font-size: 12px; -webkit-transform: translateX(-105%); color: #3e3e3e; display: block; text-align: right; position: absolute; top: -6px; padding: 0px 5px; opacity: 1; -webkit-transition: all .5s; } .menu_bar a.active p{ color: #fff; } .menu_bar a p:before { width: 0%; height: 100%; position: absolute; right: 0%; top: 0px; content: ''; background: #00944b; -webkit-transition: all .5s ease 0.1s; z-index: -1; border-radius: 50px; } .menu_bar a p::after { width: 100%; height: 150%; position: absolute; left: 5%; top: -25%; content: ''; } .menu_bar a.active:nth-child(1) p:before { width: 35px; } .vlightBox { width: 100%; height: 100vh; position: fixed; left: 0%; top: 0%; z-index: 200; background: rgba(0, 0, 0, .5); backdrop-filter: blur(15px); padding: 0px 5%; display: flex; align-items: center; justify-content: center; overflow: hidden; -webkit-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1); visibility: hidden; opacity: 0; } .inner-player video { display: block; width: 70%; height: auto; max-height: 80%; } .pro_close { width: 50px; height: auto; line-height: 60px; text-align: center; border: 1px solid rgba(255, 255, 255, .3); padding: 17px; position: absolute; right: 5%; top: 5%; border-radius: 50%; cursor: pointer; -webkit-transition: all .35s; background: #0061ae; } .pro_close:hover { -webkit-transform: rotate(45deg); } .pro_close img { opacity: 1; } .vlightBox.active { opacity: 1; visibility: visible; } .inner-player { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; } .nboxes .w1400 { display: flex; justify-content: space-between; align-items: flex-start; } .news_l { width: 450px; position: sticky; height: auto; top: 125px; } .sum_title { width: 100%; font-size: 4vw; font-weight: bold; font-family: BrownBlod; color: #0061ae; text-align: center; margin-bottom: 1vw; } .sub_nav { width: 100%; display: flex; justify-content: center; margin-bottom: 2vw; } .c_page { width: 100%; height: auto; position: absolute; left: 0%; top: 50%; -webkit-transform: translateY(-50%); text-align: center; display: flex; justify-content: center; font-family: BrownBlod; font-size: 5vw; } .c_page p { margin: 0px 0.5vw; color: #0061ae; } .sub_nav a { width: 25%; text-align: center; height: auto; line-height: 45px; border: 1px solid #0061ae; border-radius: 50px; color: #0061ae; margin: 0px 10px; font-size: 16px; } .sub_nav a.active { background: #0061ae; color: #fff; } .n_rect { width: 100%; position: relative; } .n_rect .line { width: 1px; height: 100%; position: absolute; left: 50%; top: 0%; background: #b0cde4; } .pager { width: 70%; margin-left: 15%; } .n_wx { width: 130px; height: auto; margin: 0px auto; margin-top: 2vw; font-size: 14px; } .n_wx p { text-align: center; margin-top: 5px; font-size: 12px; } .n_rect .line:before, .n_rect .line::after { width: 9px; height: 9px; border-radius: 50%; background: #0061ae; left: -4px; top: -4px; content: ''; display: block; position: absolute; } .n_rect .line::after { top: auto; bottom: -4px; } .pager svg { width: 100%; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); } .pager svg circle { fill: none; stroke: rgba(237, 243, 247, 1); stroke-dashoffset: 300%; stroke-dasharray: 300%; transition: stroke-dashoffset 2s ease-in-out; } .pager.go svg circle { stroke-dashoffset: 50%; } .news_r { width: calc(100% - 500px); margin-bottom: 5vw; } .news_r ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .news_r ul li { width: 45%; position: relative; margin-bottom: 10vw; } .news_r ul li:hover .pic{ -webkit-transform: scale(1.05); } .news_r ul li:hover .name{ color: #0061ae; } .news_r ul li:nth-child(odd) { top: 10vw; } .news_r ul li .thum { border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #fff; box-shadow: 0px 0px 30px rgb(0 0 0 / 10%); } .news_r.vo ul li{ cursor: pointer; } .news_r.vo ul li .thum{ background: #000; } .news_r.vo ul li .thum .pic{ opacity: .7; } .news_r ul li .thum .v_icon{ width: 50px; height: auto; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; } .news_r ul li .info { width: 100%; height: auto; position: relative; } .news_r ul li .info .name { font-size: 16px; line-height: 1.4; margin-bottom: 5px; } .news_r ul li .info .des { width: 100%; font-size: 14px; line-height: 1.4; margin-bottom: 15px; opacity: .7; } .news_r ul li .info .date { opacity: .7; font-size: 12px; } .boxes.in { background: url(../images/logo_line.png) center top no-repeat; background-size: contain; background-attachment: fixed; } .boxes.in.f { background-color: #f8f7f6; } .tz_left { width: 50%; position: relative; margin-top: 6vw; } .tz_name { width: 100%; height: auto; position: relative; color: #0061ae; margin-bottom: 2vw; line-height: 1.4; } .tz_name p { font-size: 32px; font-family: BrownBlod; text-transform: capitalize; } .tz_name b { font-size: 36px; } .tz_des { width: 100%; height: auto; line-height: 2; font-size: 16px; margin-bottom: 4vw; } .tz_des p { margin-bottom: 10px; } .tz_logo { width: 25vw; margin-bottom: 2vw; } .tz_add { width: 100%; margin-bottom: 5vw; } .tz_add ul li { width: 100%; display: flex; line-height: 1.4; font-size: 16px; margin-bottom: 10px; } .tz_right { width: 55%; height: auto; position: absolute; right: -5%; top: 0%; -webkit-mask-image: url(../images/logo_mask.png); -webkit-mask-size: auto 100%; -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; } .tz_right2 { width: 40%; height: auto; position: absolute; left: 60%; top: 0%; top: 0vw; } .tz_right2 img:nth-child(1) { border-radius: 50%; -webkit-transform: scale(0.8); } .tz_right img:nth-child(2), .tz_right2 img:nth-child(2) { position: absolute; width: 100%; height: auto; left: 0%; top: 0%; } .tz_right img:nth-child(2){ -webkit-transition:all 0.5s linear; } .annout_box { width: 100%; height: auto; position: relative; } .sub_title { width: 100%; height: auto; position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2vw; } .sub_title .tz_name { margin-bottom: 0px; } .annout_list { width: 100%; height: auto; position: relative; display: flex; flex-wrap: wrap; margin-bottom: 5vw; justify-content: space-between; } .annout_list a { width: 48%; height: auto; position: relative; background: #fff; display: flex; padding: 25px; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05); border-radius: 10px; margin-bottom: 2vw; } .annout_list a:hover{ background: #0061ae; color: #fff; } .annout_list a .icon { width: 40px; height: auto; position: relative; line-height: 30px; font-size: 22px; opacity: .5; } .annout_list a .info { width: calc(100% - 40px); } .annout_list a .info .name { font-size: 16px; line-height: 30px; } .annout_list a .date { line-height: 25px; opacity: .7; } .report_list { width: 100%; position: relative; display: flex; flex-wrap: wrap; } .report_list a { display: block; width: 23.5%; margin-right: 2%; position: relative; margin-bottom: 2vw; } .report_list a:nth-child(4n) { margin-right: 0%; } .report_list a .thum { border-radius: 10px; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05); } .report_list a .info { width: 100%; height: auto; position: relative; padding: 15px 0px; display: flex; align-items: center; } .report_list a .info .icon { width: 30px; height: auto; font-size: 20px; opacity: .5; line-height: 30px; } .report_list a .info .name { width: calc(100% - 30px); line-height: 30px; font-size: 16px; } .other_box { width: 100%; display: flex; flex-wrap: wrap; position: relative; justify-content: space-between; padding-top: 3vw; } .other_box .name { position: absolute; left: 35px; top: 45px; color: #fff; } .other_box .name p { font-size: 1.6vw; font-family: BrownBlod; text-transform: capitalize; } .other_box .name b { font-size: 1.6vw; font-weight: normal; } .other_box .thum, .other_box .pic { height: 100%; } .other_box .thum { border-radius: 10px; } .other_box .more { position: absolute; left: 35px; bottom: 35px; color: #fff; display: flex; align-items: center; line-height: 25px; } .other_box .more .icon { width: 25px; height: 25px; position: relative; background: url(../images/more_icon.png) no-repeat; background-size: cover; } .zg_links { width: 40%; height: 60vh; display: block; position: relative; } .gz_links { width: calc(60% - 50px); height: 60vh; display: block; position: relative; } .mb5 { margin-bottom: 5vw; } .annout_list.full a .info { width: 100%; } .zb_list { width: 100%; height: auto; position: relative; } .zb_list ol li { width: 100%; display: flex; font-weight: bold; font-size: 20px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .zb_list .title { width: calc(65% - 180px); } .zb_list .comp { width: 35%; text-align: center; } .zb_list .date { width: 130px; text-align: center; } .zb_list .icon { width: 50px; height: 35px; position: relative; } .zb_list .icon img { position: absolute; width: 20px; right: 0%; top: 50%; -webkit-transform: translateY(-50%); } .zb_list ul li a { display: flex; width: 100%; align-items: center; line-height: 35px; padding: 10px 0px; opacity: .7; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: 16px; } .zb_list ul li a:hover { opacity: 1; } .dj_img { width: 70%; margin-left: 15%; border-radius: 10px; overflow: hidden; position: relative; margin-bottom: 5vw; } .dj_title { text-align: center; color: #c80000; font-size: 2vw; font-weight: bold; margin-bottom: 3vw; margin-top: 5vw; } .dj_des { margin-bottom: 3vw; text-align: center; line-height: 2; font-size: 16px; } .tz_name.c { text-align: center; } .tz_name.r { color: #c80000; } .djSwiper { width: 100%; } .djSwiper ul{ display: flex; flex-wrap: wrap; width: 100%; } .djSwiper ul li{ width: 32%; height: auto; position: relative; margin-right: 2%; margin-bottom: 35px; } .djSwiper ul li:nth-child(3n){ margin-right: 0%; } .djSwiper .name { width: 100%; text-align: center; font-size: 16px; font-weight: bold; line-height: 1.7; margin-top: 1vw; overflow: hidden; position: relative; } .djSwiper .name p { -webkit-transition: all 1s; -webkit-transform: translateY(0%); } .djSwiper .thum { border-radius: 10px; background: #000; } .djSwiper .thum .pic { opacity: .7; -webkit-transform: scale(1); -webkit-transition: all 1s; } .djSwiper .swiper-slide-active .thum .pic { opacity: 1; -webkit-transform: scale(1.1); } .djSwiper .swiper-button-next, .djSwiper .swiper-button-prev { width: 25px; height: auto; } .djSwiper .swiper-button-prev { left: 15%; } .djSwiper .swiper-button-next { right: 15%; } .djSwiper .swiper-button-next::after, .djSwiper .swiper-button-prev::after { display: none; } .djSwiper img { outline: none; } .abox { z-index: 3; padding-bottom: 0px; margin-top: -6vw; } .wave { position: relative; z-index: 2; } .zrbox { width: 100%; height: auto; background: url(../images/about_bg.jpg) center top no-repeat; background-attachment: fixed; background-size: cover; margin-top: -16vw; padding-top: 20vw; } .about_left { width: 50%; position: absolute; left: -15%; top: 40%; -webkit-transform: translateY(-50%); } .about_left img:nth-child(1) { border-radius: 50%; position: relative; -webkit-transform: scale(0.85); } .about_left img:nth-child(2) { position: absolute; width: 100%; height: auto; left: 0%; top: 0%; -webkit-transition: all .5s; } .about_right { width: 60%; position: relative; margin-left: 40%; overflow: hidden; margin-top: 5vw; } .socialSwiper { padding-bottom: 50px; } .socialSwiper .thum { border-radius: 10px; } .socialSwiper .name { width: 100%; height: auto; position: relative; text-align: center; font-size: 18px; line-height: 1.5; margin-top: 15px; opacity: 0; -webkit-transition: all 1s; -webkit-transform: translateY(20px); } .socialSwiper .swiper-slide-active .name { opacity: 1; -webkit-transform: translateY(0px); } .zrbox:before { width: 100%; height: 50%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)); content: ''; top: auto; } .stu_box{ padding-top: 0px; } .stu_box .w1400 { display: flex; justify-content: space-between; flex-wrap: wrap; } .stu_thum { width: 475px; position: relative; margin-left: 5%; } .stu_thum .thum { top: 0vw; } .stu_thum .thums { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; border-radius: 50%; overflow: hidden; } .stu_thum .thums img { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; -webkit-transition: all .5s; opacity: 0; -webkit-transform: scale(1.1); } .stu_thum .thums img.active { opacity: 1; -webkit-transform: scale(1); } .stu_thum .dot { width: 100%; height: 6vw; position: relative; left: 0%; top: 0vw; } .stu_thum .dot .p { width: 6vw; height: 6vw; border-radius: 50%; position: absolute; overflow: hidden; cursor: pointer; box-shadow: 5px 5px 10px rgb(0 0 0 / 10%); background: #fff; border: 3px solid #fff; -webkit-transition: all .45s; } .stu_thum .dot .p img{ -webkit-transition: all .4s; -webkit-transform: scale(1); } .stu_thum .dot .p.active{ border-color: #0061ae; } .stu_thum .dot .p.active img{ -webkit-transform: scale(1.1); } .stu_thum .dot .p:nth-child(1) { top: -40px; } .stu_thum .dot .p:nth-child(2) { left: 125px; top: 20px; } .stu_thum .dot .p:nth-child(3) { left: 265px; top: 15px; } .stu_thum .dot .p:nth-child(4) { left: 390px; top: -40px; } .stu_info { width: 40%; margin-right: 10%; position: relative; } .stu_info .sib{ width: 100%; height: auto; position: absolute; opacity: 0; visibility: hidden; -webkit-transition:all .45s; top: 50%; -webkit-transform: translateY(-50%); } .stu_info .sib.active{ opacity: 1; visibility: visible; } .stu_info .name { width: 100%; height: auto; position: relative; opacity: 0; -webkit-transition:all .6s; top: 30px; } .stu_info .sib.active .name{ opacity: 1; top: 0px; } .stu_info .name .title { width: 100%; height: auto; position: relative; font-size: 1.8vw; color: #0061ae; font-weight: bold; margin-bottom: 1vw; } .stu_info .name .des { width: 100%; height: auto; position: relative; font-size: 16px; line-height: 1.7; margin-bottom: 2vw; } .stu_info .list { width: 100%; height: auto; position: relative; } .stu_info .list ul li { width: 46%; display: flex; align-items: center; margin-bottom: 1vw; opacity: 0; -webkit-transition: all .45s; top: 30px; position: relative; } .stu_info .list ul li:nth-child(2){ -webkit-transition: all .55s ease .1s; } .stu_info .list ul li:nth-child(3){ -webkit-transition: all .55s ease .2s; } .stu_info .list ul li:nth-child(4){ -webkit-transition: all .55s ease .3s; } .stu_info .sib.active .list ul li{ top: 0px; opacity: 1; } .stu_info .list ul li .icon { width: 60px; height: 60px; border-radius: 50%; background: #0061ae; position: relative; } .stu_info .list ul li .icon::after { width: 50px; height: 50px; position: absolute; left: 5px; top: 5px; background: url(../images/gg_icon.png) no-repeat; content: ''; -webkit-transform: scale(0.8); } .stu_info .sib:nth-child(2) .list ul li .icon::after{ background-image: url(../images/gg_icon2.png); } .stu_info .sib:nth-child(3) .list ul li .icon::after{ background-image: url(../images/gg_icon3.png); } .stu_info .sib:nth-child(4) .list ul li .icon::after{ background-image: url(../images/gg_icon4.png); } .stu_info .list ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } .stu_info .list ul li:nth-child(2) .icon::after { background-position: -50px 0px; } .stu_info .list ul li:nth-child(3) .icon::after { background-position: -100px 0px; } .stu_info .list ul li:nth-child(4) .icon::after { background-position: -150px 0px; } .stu_info .list ul li .txt { width: calc(100% - 70px); margin-left: 10px; } .stu_info .list ul li .txt b { width: 100%; line-height: 30px; font-size: 16px; } .stu_info .list ul li .txt p { font-size: 14px; line-height: 20px; opacity: .7; } .alumdes { width: 100%; height: auto; position: relative; text-align: center; font-size: 24px; font-weight: bold; color: #0061ae; line-height: 1.4; margin-bottom: 1vw; } .aluminfo { width: 100%; font-size: 16px; line-height: 2; text-align: center; margin-bottom: 2vw; position: relative; } .logoWall { width: 100%; height: 60vh; position: relative; display: flex; margin-bottom: 5vw; } .logoWall a { position: absolute; left: 50%; top: 50%; } .logoWall a img{ position: relative; } .logoWall a:nth-child(1) { -webkit-transform: translate(-50%, -50%); width: 190px; } .logoWall a:nth-child(2) { left: 0% ; top: 0% ; width: 93px; } .logoWall a:nth-child(3) { left: 15% ; top: 30% ; width: 93px; } .logoWall a:nth-child(4) { left: 25%; top: 50%; width: 124px; } .logoWall a:nth-child(5) { left: 35%; top: 70%; opacity: .5; width: 124px; } .logoWall a:nth-child(6) { left: 0%; top: 70%; opacity: .4; width: 124px; } .logoWall a:nth-child(7) { left: 30%; top: 5%; opacity: .3; width: 95px; } .logoWall a:nth-child(8) { left: 70%; top: 0%; width: 160px; } .logoWall a:nth-child(9) { left: 60%; top: 65%; opacity: .6; width: 110px; } .logoWall a:nth-child(10) { left: auto; right: 5%; top: 0%; opacity: .2; width: 90px; } .logoWall a:nth-child(11) { left: auto; right: 15%; top: 40%; width: 60px; opacity: .7; } .logoWall a:nth-child(12) { left: auto; right: 5%; top: 65%; opacity: .4; width: 110px; } .logoWall a:nth-child(13) { left: 0%; top: 35%; opacity: .4; width: 110px; } .logoWall a:nth-child(14) { left: 15%; top: 70%; opacity: .4; width: 124px; } .logoWall a:nth-child(15) { left: 50%; top: 5%; opacity: .3; width: 125px; } .logoWall a:nth-child(16){ left: 75%; top: 65%; opacity: .6; width: 70px; } .logoWall a:nth-child(17){ left: 65%; top: 35%; width: 80px; opacity: .5; } .logoWall a:nth-child(18){ left: auto; right: 0%; top: 35%; opacity: .4; width: 70px; } .yx_teacher { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1em; color: #fff; font-weight: 200; display: -webkit-box; display: box; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; } .yx_teacher ul { display: -webkit-box; display: box; display: flex; -webkit-animation: marquee 80s linear infinite running; animation: marquee 80s linear infinite running; } .yx_teacher ul:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes marquee { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translate(-50%); transform: translate(-50%); } } .yx_teacher ul li { width: 60vw; position: relative; height: 60vh; display: flex; justify-content: space-between; margin-right: 50px; } .yx_teacher ul li .yx_l { width: 55%; position: relative; height: 100%; } .mob_nav{ width: 100%; height: 0px; position: fixed; left: 0px; top: 0px; background: #fff; overflow: hidden; transition: all .5s ease; z-index: 90; } .yx_box { width: 49%; position: absolute; height: auto; cursor: pointer; display: block; overflow: hidden; border-radius: 10px; } .yx_box:after{ width: 100%; height: 70%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); content: ''; -webkit-transition:all .5s; opacity: 0; } .yx_box:hover:after{ opacity: 1; } .yx_box.y1 { bottom: 0%; } .yx_box.y2 { left: 51%; } .yx_box.y3, .yx_box.y4 { width: 20%; } .yx_box.y3 { left: 29%; top: auto; bottom: 16.7vw; } .yx_l:before { width: 6vw; height: 6vw; position: absolute; left: 0%; top: 0px; background: #cbddf0; border-radius: 5px; content: ''; } .yx_l::after { width: 7vw; height: 7vw; position: absolute; left: 51%; bottom: 0%; background-color: rgb(212, 255, 229); content: ""; border-radius: 10px; } .yx_box.y4 { left: auto; top: auto; bottom: 0%; right: 0%; } .yx_box .info { width: 100%; height: auto; position: absolute; left: 0%; bottom: 0%; padding: 15px; color: #fff; text-align: center; font-size: 16px; opacity: 0; -webkit-transform: translateY(100%); -webkit-transition: all .5s; z-index: 2; } .yx_box:hover .pic{ -webkit-transform: scale(1.1); } .yx_box:hover .info{ -webkit-transform: translateY(0%); opacity: 1; } .yx_box .info .name{ font-size: 18px; font-weight: bold; margin-bottom: 5px; } .yx_box .info .des{ line-height: 1.7; font-size: 14px; } .yx_box.y3 .info .name,.yx_box.y4 .info .name{ font-size: 14px; margin-bottom: 0px; } .yx_teacher ul li .yx_r { width: calc(45% - 30px); height: 100%; } .yx_r .yx_box { width: 100%; height: 100%; position: relative; } .yx_r .yx_box .pic { height: 100%; } .vision_word.p4{ color: transparent; text-stroke: 1px #0061ae; font-family: BrownBlod; -webkit-text-stroke: 1px #0061ae; text-transform: uppercase; } .marquee_word .marquee_box{ width: 200vw; height: auto; position: relative; display: flex; -webkit-transition: all .5s; } .marquee_word .marquee_box span{ display: block; width: 100vw; height: auto; } .lida_nav{ width: 100%; height: auto; display: flex; margin-bottom: 2vw; } .lida_nav a{ width: auto; height: auto; line-height: 45px; color: #0061ae; border: 1px solid #0061ae; border-radius: 50px; padding: 0px 35px; margin-right: 10px; font-size: 16px; cursor: pointer; -webkit-transition: all .5s; } .lida_nav a.active{ background: #0061ae; color: #fff; } .lida_info{ width: 100%; } .lida_info .l_box{ width: 100%; line-height: 2; font-size: 16px; display: none; } .lida_info .l_box.active{ display: block; } .lida_left{ width: 45%; position: relative; margin-left: 5%; } .lida_right{ width: 40%; position: absolute; right: 5%; top: -5vw; } .lida_box{ padding-bottom: 0%; position: relative; z-index: 5; } .tz_word{ width: 100%; text-align: center; display: flex; justify-content: center; position: relative; font-size: 4vw; font-family: "瀹嬩綋"; margin-bottom: 2vw; } .tz_word p{ margin: 0px 2vw; width: 70px; height: 70px; position: relative; cursor: pointer; background: url(../images/words.png) no-repeat; background-size: auto 200%; } .tz_word p:nth-child(2){ background-position: -70px 0px; } .tz_word p:nth-child(3){ background-position: -140px 0px; } .tz_word p:nth-child(4){ background-position: -210px 0px; } .tz_word p:nth-child(5){ background-position: -280px 0px; } .tz_word p:nth-child(6){ background-position: -350px 0px; } .tz_word p:nth-child(7){ background-position: -420px 0px; } .tz_word p:nth-child(8){ background-position: -490px 0px; } .tz_word p.active{ background-position: 0px -70px; } .tz_word p.active:nth-child(2){ background-position: -70px -70px; } .tz_word p.active:nth-child(3){ background-position: -140px -70px; } .tz_word p.active:nth-child(4){ background-position: -210px -70px; } .tz_word p.active:nth-child(5){ background-position: -280px -70px; } .tz_word p.active:nth-child(6){ background-position: -350px -70px; } .tz_word p.active:nth-child(7){ background-position: -420px -70px; } .tz_word p.active:nth-child(8){ background-position: -490px -70px; } .tz_word p::after{ width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; position: absolute; right: calc(-2vw - 5px); top: 50%; margin-top: -5px; border-radius: 50%; content: ''; } .tz_word p:last-child::after{ display: none; } .jion_box{ background: url(../images/bg3.jpg) top center no-repeat; background-size: cover; background-attachment: fixed; margin-top: -16vw; padding-top: 20vw; } .tz_name.w{ color: #fff; } .tz_info{ width: 100%; text-align: center; position: relative; color: #fff; font-size: 16px; line-height: 2; height: 20vw; } .tz_info .des{ width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); padding: 4vw 0px; opacity: 0; visibility: hidden; -webkit-transition: all .5s; font-size: 18px; line-height: 1.6; } .tz_info .des span{ width: 100%; height: auto; position: absolute; top: 50%; left: 0%; font-size: 12vw; font-family: "瀹嬩綋"; -webkit-transform: translateY(-50%); opacity: .2; font-weight: bold; line-height: 1; } .tz_info .des.active{ top: 40%; opacity: 1; visibility: visible; } .join_box{ width: 100%; display: flex; justify-content: space-between; padding: 0px 10%; position: relative; z-index: 1; } .join_box .box{ width: 40%; height: auto; position: relative; border-radius: 50%; perspective: 1000px; transform-style: preserve-3d; top: 0vw; } .join_box .box .name,.join_box .box .des,.join_box .box .common_more{ position: absolute; -webkit-transition: all 2s cubic-bezier(.5,.3,.3,1); transform-style: preserve-3d; } .join_box .box .pic,.join_box .box .info{ height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; transition: ease-in-out 600ms; position: relative; left: 0%; top: 0%; border-radius: 50%; overflow: hidden; } .join_box .box .info{ position: absolute; background:center center no-repeat; background-size: cover; color: #fff; transform: rotateY(-180deg); } .join_box .box .info:before{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: rgba(0, 97, 174, .9); content: ''; } .join_box .box:hover .pic{ transform: rotateY(180deg); } .join_box .box:hover .info{ transform: rotateY(0deg); } .join_box .box .name{ top: 25%; text-align: center; width: 100%; font-size: 2vw; font-weight: bold; -webkit-transform: translateZ(500px); } .join_box .box .des{ width: 100%; height: auto; padding: 0px 10%; font-size: 14px; line-height: 1.7; text-align: center; top: 40%; -webkit-transform: translateZ(800px); } .join_box .box .common_more{ left: 50%; margin-left: -102.5px; top: 70%; -webkit-transform: translateZ(1100px); } .join_box .box:hover .name,.join_box .box:hover .des,.join_box .box:hover .common_more{ -webkit-transform: translateZ(0px) scale(1); } .join_box .box .pic .title{ font-size: 2vw; position: absolute; text-align: center; left: 0%; top: 70%; color: #fff; font-weight: bold; width: 100%; } .contact_box .address{ width: 35%; position: relative; margin-left: 10%; display: flex; flex-wrap: wrap; justify-content: space-between; } .contact_box .info { width: calc(100% - 150px); } .contact_box .socails { width: 120px; } .contact_box .socails .dt { width: 100%; text-align: center; font-size: 14px; margin-bottom: 15px; color: rgba(0, 0, 0, 0.7); } .contact_box .socails .dt img { margin-bottom: 5px; } .contact_box .info .in_box { width: 100%; height: auto; position: relative; margin-bottom: 2vw; } .contact_box .info .in_box b { display: block; width: 100%; font-size: 20px; margin-bottom: 5px; } .contact_box .info .in_box p { line-height: 1.7; font-size: 16px; } .contact_box .flogo{ margin-bottom: 2vw; } .contact_box .right{ width: 50%; height: auto; position: absolute; right: 0%; bottom: 0%; } .jion_box:before { width: 100%; height: 50%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)); content: ''; top: auto; } .boxes.vh100{ height: 100vh; } .balls{ width: 20vw; height: 20vw; position: absolute; border-radius: 50%; overflow: hidden; } .balls.bs1{ top: 0vw; width: 28vw; height: 28vw; left: -10vw; opacity: .7; max-width: 500px; max-height: 500px; } .balls.bs2{ top: 30vw; width: 16vw; height: 16vw; left: 20vw; } .balls.bs3{ top: 20vw; left: 60vw; opacity: .2; } .balls.bs4{ width: 5vw; height: 5vw; top: 0vh; left: 75vw; } .balls.bs5{ width: 25vw; height: 25vw; top: 5vw; left: -5vw; opacity: .2; max-width: 400px; max-height: 400px; } .balls.bs6{ width: 10vw; height: 10vw; top: 30vw; left: 75vw; max-width: 200px; max-height: 200px; } .mb50{ margin-bottom: 35vw; } .alumdes.l{ text-align: left; } .vision_left{ width: 50%; position: relative; } .vision_word{ width: 100%; margin-top: 3vw; text-transform: uppercase; font-family: BrownBlod; font-size: 3vw; margin-bottom: 3vw; color: #0061ae; font-weight: bold; line-height: 1; } .vision_word .winsion_warp{ width: 200%; height: auto; position: relative; display: flex; -webkit-animation: loop_animate 10s linear infinite; } @-webkit-keyframes loop_animate{ 0%{ -webkit-transform: translateX(0%); } 100%{ -webkit-transform: translateX(-50%); } } .vision_word .winsion_warp span{ display: block; width: 25%; } .vision_word.mb{ margin-bottom: 5vw; } .vision_img{ position: absolute; width: 50vw; height: 50vw; overflow: hidden; left: 60%; top: -7vw; -webkit-mask-image: url(../images/masks.png); -webkit-mask-size: auto 100%; -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; } .logo_list{ width: 100%; height: auto; position: relative; margin-bottom: 10vw; } .logo_list ul{ display: flex; width: 100%; flex-wrap: wrap; } .logo_list ul li{ width: 23.5%; background: #fff; margin-right: 2%; margin-bottom: 1.5vw; padding: 25px; border-radius: 5px; box-shadow: 0px 0px 50px rgba(0, 0, 0, .05); } .logo_list ul li .icon{ width: 60px; height: auto; margin: 0px auto; margin-bottom: 15px; } .logo_list ul li .des{ font-size: 16px; line-height: 2; } .logo_list ul li:nth-child(4){ margin-right: 0%; } .logo_list ul li:last-child{ width: 100%; margin-right: 0%; margin-bottom: 0%; } .logo_list ul li:last-child .img{ width: 50%; margin-left: 25%; } .xiaoxun .vision_left{ margin-left: 50%; margin-bottom: 5vw; } .xiaoxun .vision_img{ left: -10vw; width: 40vw; height: 40vw; -webkit-mask-image: url(../images/masks2.png); top: -10vw; max-width: 800px; max-height: 800px; } .aluminfo ul{ width: 90%; margin-left: 5%; } .aluminfo ul li{ margin-bottom: 2vw; } .marquee_word.s{ font-size: 5vw; } .lida_right.s{ width: 40vw; height: 40vw; right: -5vw; border-radius: 50%; overflow: hidden; z-index: 1; top: -10vw; } .wenhua_img{ width: 100%; height: auto; position: relative; } .msg_box .w1400{ display: flex; justify-content: space-between; } .msg_left{ width: 40%; position: relative; } .msg_left .alumdes{ text-align: left; } .msg_right{ width: 50%; background-color: #fff; padding: 55px 35px; border-radius: 5px; box-shadow: 0px 0px 30px rgba(0, 0, 0, .05); position: relative; } .msg_right .info{ width: 100%; height: auto; position: relative; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, .1); } .msg_right .info b{ display: block; font-size: 16px; margin-bottom: 5px; } .msg_right .info p{ font-size: 14px; line-height: 2; } .c-table{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .c-table .row{ width: 48%; height: auto; position: relative; border-bottom: 1px solid rgba(0, 0, 0, .1); margin-bottom: 25px; } .c-table .row:first-child{ border-bottom: none; } .toggleWrapper { position: relative; overflow: hidden; } .toggleWrapper input { position: absolute; left: -99em; } .toggle { cursor: pointer; display: inline-block; position: relative; width: 120px; height: 40px; background: #00944b; border-radius: 5px; transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } .toggle:before, .toggle:after { position: absolute; line-height: 40px; font-size: 14px; z-index: 2; transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } .toggle:before { content: attr(data-before); left: 20px; color: #00944b; } .toggle:after { content: attr(data-after); right: 20px; color: #fff; } .toggle__handler { display: inline-block; position: relative; z-index: 1; background: #fff; width: 50px; height: 34px; border-radius: 3px; top: 3px; left: 3px; transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transform: translateX(0px); } input:checked + .toggle { background: #0061ae; } input:checked + .toggle:before { color: #fff; } input:checked + .toggle:after { color: #0061ae; } input:checked + .toggle .toggle__handler { width: 54px; transform: translateX(60px); border-color: #fff; } .c-table .row .label{ width: 100%; height: auto; font-size: 14px; line-height: 25px; } .c-list{ width: 100%; height: 40px; position: relative; } .c-list select{ width: 100%; height: 40px; position: relative; border: none; outline: none; } .c-list .result{ width: 100%; height: 40px; line-height: 40px; position: relative; color: rgba(0,0,0,.3); } .c-list ul{ width: 100%; height: auto; background: #fff; line-height: 35px; position: absolute; left: 0px; top: 40px; color: #3e3e3e; display: none; } .c-list:before{ width: 40px; height: 40px; position: absolute; right: 0%; top: 0%; content: ''; background: #fff; z-index: 2; } .c-list::after{ width: 20px; height: 20px; position: absolute; right: 0%; top: 10px; background: url(../images/green_icon.png) no-repeat; background-size: cover; content: ''; -webkit-transform: rotate(90deg); z-index: 5; } .c-table .row>input{ height: 40px; outline: none; border: none; width: 100%; font-size: 14px; } .c-table .row>input::-webkit-input-placeholder { color: rgba(0, 0, 0, .3); } .c-table .row.full{ width: 100%; } .c-table .tips{ width: 100%; font-size: 12px; color: rgba(0, 0, 0, .5); margin-bottom: 25px; word-break: break-all; line-height: 1.6; } .c-table .common_more .txt{ padding-left: 55px; } .msg_bg{ width: 45%; height: auto; position: absolute; left: 0px; bottom: 0%; } .star_list{ width: 100%; height: auto; position: relative; margin-top: 3vw; } .star_list ul{ display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; } .star_list ul li{ width: 48%; display: flex; align-items: center; margin-bottom: 25px; } .star_list ul li .icon{ width: 75px; height: 75px; border-radius: 50%; border: 1px solid #0061ae; background: url(../images/star_icon.png) no-repeat; } .star_list ul li:nth-child(2) .icon{ background-position: -75px 0px; } .star_list ul li:nth-child(3) .icon{ background-position: -150px 0px; } .star_list ul li:nth-child(4) .icon{ background-position: -225px 0px; } .star_list ul li:nth-child(5) .icon{ background-position: -300px 0px; } .star_list ul li:nth-child(6) .icon{ background-position: -375px 0px; } .star_list ul li:nth-child(7) .icon{ background-position: -450px 0px; } .star_list ul li:nth-child(8) .icon{ background-position: -525px 0px; } .star_list ul li .txt{ width: calc(100% - 95px); margin-left: 20px; } .star_list ul li .txt .n{ width: 100%; font-size: 20px; font-weight: bold; color: #00944b; margin-bottom: 7px; } .star_list ul li .txt .d{ width: 100%; height: auto; font-size: 14px; line-height: 1.4; } .star_box{ border-radius: 0px 0px 10vw 10vw; overflow: hidden; } .star_box2{ margin-top: -6vw; overflow: hidden; display: flex; justify-content: flex-start; padding: 0px; } .star_nav{ width: 100%; display: flex; align-items: center; margin-bottom: 3vw; position: relative; } .star_nav b{ color: #0061ae; font-size: 28px; width: 15vw; } .star_warp{ width: 100%; display: flex; justify-content: space-between; padding: 0px; zoom: 1; align-items: flex-start; } .star_left{ width: 40%; position: relative; padding-left: 25px; position: sticky; float: right; height: auto; top: 15%; } .star_left .line{ width: 1px; height: 100%; position: absolute; left: 0%; top: 0%; background: #b0cae0; } .star_left .line span{ width: 1px; height: 0%; position: absolute; left: 0%; top: 0%; background: #0061ae; display: block; } .star_left .line:before{ width: 9px; height: 9px; background: #0061ae; border-radius: 50%; position: absolute; left: -4px; top: -4px; content: ''; } .star_right{ width: 50%; float: left; } .star_right ul li{ width: 100%; height: auto; position: relative; margin-bottom: 50px; -webkit-transition: all .5s; opacity: .3; } .star_right ul li.active{ opacity: 1; -webkit-transform: scale(1); } .star_right ul li .thum{ border-radius: 10px; margin-bottom: 10px; } .star_right ul li .name{ width: 100%; line-height: 2; font-size: 20px; font-weight: bold; margin-bottom: 5px; } .star_right ul li .site{ display: inline; width: auto; color: #0061ae; opacity: .7; } .star_right ul li .site:hover{ opacity: 1; } .boxes.school_box{ background: url(../images/star_bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; } .boxes.school_box:before{ width: 100%; height: 100%; position: absolute; left: 0%; bottom: 0%; background: linear-gradient(-180deg, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)); content: ''; top: auto; } .star_left ul li{ width: 100%; height: auto; position: relative; margin-bottom: 15px; } .star_left ul li .name{ width: 100%; font-size: 16px; font-weight: bold; line-height: 25px; color: rgba(0, 0, 0, .3); } .star_left ul li.active .name{ color: #3e3e3e; } .star_left ul li .info{ width: 100%; height: auto; margin-top: 5px; display: none; } .star_left ul li.active .info{ display: block; } .star_left ul li .info .star_dot{ width: 100%; height: auto; display: flex; margin-bottom: 5px; } .star_left ul li .info .star_dot .dot{ width: 20px; height: 20px; } .star_left ul li .info .star_dot:nth-child(2) .dot{ background-position: 0px -25px; } .star_left ul li .info .star_dot:nth-child(3) .dot{ background-position: 0px -50px; } .star_left ul li .info .star_dot .txt{ width: calc(100% - 25px); margin-left: 0px; line-height: 20px; display: inline-block; font-size: 12px; } .order_box{ width: 100%; height: auto; position: relative; z-index: 1; } .order_form{ width: 45%; height: auto; position: relative; background-color: #fff; padding: 50px 35px; box-shadow: 0px 0px 50px rgba(0, 0, 0, .1); border-radius: 10px; } .order_form .alumdes{ text-align: left; } .order_bg{ width: 40%; height: auto; position: absolute; right: 0%; bottom: 0%; } .search_box{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: #fff; display: flex; justify-content: center; align-items: center; -webkit-transition: all .45s; -webkit-transform: translateY(-100%); z-index: 10; } .search_box.active{ -webkit-transform: translateY(0%); } .search_box .s_box{ width: 500px; display: flex; align-items: center; justify-content: space-between; } .search_box .row{ width: calc(100% - 100px); display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.1); } .search_box .row input{ width: calc(100% - 50px); outline: none; height: 50px; border: none; font-size: 14px; } .search_box .row input::-webkit-input-placeholder { color: rgba(0,0,0,.3); } .search_box .row .s_btn{ width: 50px; height: 50px; line-height: 50px; text-align: right; font-size: 20px; opacity: .5; cursor: pointer; } .search_box .s_close{ width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 22px; color: rgba(0,0,0,.3); cursor: pointer; -webkit-transition: all .4s; } .search_box .s_close:hover{ -webkit-transform: rotate(90deg); } .morePrince{ cursor: pointer; } .tianli_map{ width: calc(15vw + 205px); z-index: 10; height: auto; position: absolute; left: 0%; top: 105px; background-color: #fff; padding: 45px 35px; border-radius: 5px; box-shadow: 0px 0px 30px rgba(0, 0, 0, .05); opacity: 0; visibility: hidden; -webkit-transition: all .45s; } .tianli_map.active{ top: 65px; opacity: 1; visibility: visible; } .star_nav .tianli_map b{ font-size: 20px; margin-bottom: 15px; display: block; width: 100%; } .tianli_map .list{ width: 100%; display: flex; flex-wrap: wrap; } .tianli_map .list p{ cursor: pointer; font-size: 16px; margin-right: 20px; margin-bottom: 15px; line-height: 20px; display: block; position: relative; } .tianli_map .list p::after{ width: 0%; height: 1px; position: absolute; left: 0%; bottom: -5px; content: ''; background: #0061ae; -webkit-transition: all .4s; } .tianli_map .list p:hover{ color: #0061ae; } .tianli_map .list p:hover::after{ width: 100%; } .c-table.c .row:first-child{ border-bottom: 1px solid rgba(0, 0, 0, .1); } .msg_left.stars{ position: relative; margin: 15vw 0px 6vw 10vw; } .earth_map{ width: 714px; height: 1000px; position: absolute; right: 0%; background: url(../images/earth3.png) no-repeat; top: 50%; -webkit-transform: translateY(-50%); } .earth_map ul{ width: 600px; height: 400px; position: absolute; left: 10%; top: 30%; } .earth_map ul li{ width: 24px; height: 24px; position: absolute; left: 100px; top: 100px; background: url(../images/dbx.png) no-repeat; opacity: 0; -webkit-transition: all .5s; visibility: hidden; } .earth_map ul li.active{ opacity: 1; visibility: visible; } .earth_map ul li .s_box{ width: 170px; height: 50px; background: #fff; padding: 10px; border-radius: 5px; position: absolute; left: -73px; top: -15px; display: flex; opacity: 0; visibility: hidden; -webkit-transition: all .45s; } .earth_map ul li .s_box::after{ width: 0px; height: 0px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; content: ''; position: absolute; left: 50%; margin-left: -7px; bottom: -7px; } .earth_map ul li .s_box .icon{ width: 30px; height: 30px; border-radius: 5px; overflow: hidden; } .earth_map ul li .s_box .text{ width: calc(100% - 35px); font-size: 12px; margin-left: 5px; } .earth_map ul li.active .s_box{ top: -65px; opacity: 1; visibility: visible; } .earth_map ul li:nth-child(1){ left: 250px; top: 239px; } .earth_map ul li:nth-child(2){ left: 273px; top: 239px; } .earth_map ul li:nth-child(3){ left: 238px; top: 260px; } .earth_map ul li:nth-child(4){ left: 262px; top: 259px; } .earth_map ul li:nth-child(5){ left: 274px; top: 280px; } /*.earth_map ul li:nth-child(6){*/ /* left: 297px;*/ /* top: 279px;*/ /*}*/ /*.earth_map ul li:nth-child(7){*/ /* left: 285px;*/ /* top: 259px;*/ /*}*/ .earth_map ul li:nth-child(6){ left: 296px; top: 239px; } .earth_map ul li:nth-child(7){ left: 308px; top: 259px; } .earth_map ul li:nth-child(8){ left: 307px; top: 219px; } .earth_map ul li:nth-child(9){ left: 238px; top: 219px; } .earth_map ul li:nth-child(10){ left: 261px; top: 219px; } .earth_map ul li:nth-child(11){ left: 377px; top: 218px; } .earth_map ul li:nth-child(12){ left: 365px; top: 199px; } .earth_map ul li:nth-child(13){ left: 317px; top: 158px; } .earth_map ul li:nth-child(14){ left: 387px; top: 118px; } .subBanner{ overflow: hidden; clip-path: ellipse(80% 5% at 50% 0%); background: transparent; z-index: 5; transition: clip-path 2.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .subBanner img{ -webkit-transition:all 3.5s linear; -webkit-transform: scale(1.1); } .subBanner.active img{ -webkit-transform: scale(1); } .subBanner.active{ clip-path: ellipse(80% 60% at 50% 40%); } .boxfirst{ position: relative; margin-top: -6vw; } .boxes.wh{ overflow: hidden; padding-bottom: 0%; padding-top: 12vw; } .msg_box{ padding-top: 12vw; } .detail_top{ width: 100%; height: auto; position: relative; background: #F8F8F9; background: #0061ae; margin-top: 0px; padding: 150px 0px 75px; color: #fff; } .w1200{ width: 1200px; height: auto; margin: 0px auto; } .detail_top .title{ font-size: 40px; line-height: 1.5; font-weight: bold; } .detail_top .info{ margin-top: 20px; line-height: 1; font-size: 16px; line-height: 1.5; opacity: .6; } .detail_box{ width: 1200px; padding: 70px 0 100px; } .dpl{ width: calc(100% - 250px); padding: 0px; padding-right: 80px; border: none; } .dpr{ width: 250px; } .ndc_npnews{ justify-content: space-between; margin-top: 55px; } .ndc_npnews .post_next, .ndc_npnews .post_prev{ padding: 0px; width: 49%; font-size: 16px; } .ndc_npnews .post_next .icon, .ndc_npnews .post_prev .icon{ width: 64px; } .ndc_npnews .post_next .name, .ndc_npnews .post_prev .name{ width: calc(100% - 64px); } .ndc_npnews .post_next .icon:before, .ndc_npnews .post_prev .icon:before{ display: none; } .ndc_npnews .post_prev{ border: none; } .dpr .name{ color: #3e3e3e; font-size: 28px; line-height: 1.5; font-weight: bold; } .dpr .sames{ margin-top: 22px; } .dpr .sames a{ width: 100%; display: block; border-top: 1px solid #E3DDDD; padding: 22px 0; } .dpr .sames a .title{ font-size: 14px; line-height: 1.6; color: #3e3e3e; transition: all 0.36s; } .dpr .sames a:hover .title{ color: #0061ae; } .dpr .sames a .time{ margin-top: 10px; font-size: 12px; line-height: 1.5; color: #848484; } header.active .order_btn:hover{ background: #0061ae; } #page{ text-align: left; position: relative; z-index: 2; padding-top: 0px; } .newspage #page{ width: calc(100% - 500px); margin-left: 500px; } #page ul{ display: flex; justify-content: center; } #page ul li{ width: 35px; height: 35px; display: block; margin: 0px; margin-right: 5px; border: none; line-height: 35px; text-align: center; color: #0061ae; min-width: 35px; font-size: 12px; border-radius: 5px; } #page li:hover{ color: #fff; } #page ul li.xl-active{ } .upload_btn{ width: 100px; height: 40px; position: absolute; right: 0%; top: 0%; background: #00944b; border-radius: 50px; color: #fff; line-height: 40px; text-align: center; cursor: pointer; } .upload_btn input{ position: absolute; width: 100%; height: 100%; opacity: 0; top: 0px; left: 0%; } .lida_warp{ width: 100%; } .warp_box{ width: 100%; display: none; min-height: 650px; } .warp_box.active{ display: block; } .jd_box{ width: 100%; height: auto; position: relative; } .jd_name{ width: 100%; height: auto; font-size: 24px; font-weight: bold; margin-bottom: 20px; text-align: center; } .jd_box{ background: #f9f9f9; padding: 55px 35px; border: 1px solid rgba(0,0,0,.05); } .jd_row{ width: 100%; } .jd_row.active{ display: none; } .jd_row input{ width: 100%; height: 50px; text-align: center; border: none; box-shadow: 0px 0px 10px rgb(0 0 0 / 2%); outline: none; } .jd_submit{ width: 150px; height: 50px; text-align: center; line-height: 50px; background: #00944b; cursor: pointer; color: #fff; margin: 0px auto; display: block; border-radius: 50px; margin-top: 25px; } .zcityGroup .zcityItem .zcityItem-head:before{ width: 20px; height: 20px; position: absolute; right: 0%; top: 10px; background: url(../images/green_icon.png) no-repeat; background-size: cover; content: ''; -webkit-transform: rotate(90deg); z-index: 5; } .zcityGroup .zcityItem .zcityItem-head{ border: none; } .zcityGroup .zcityItem{ width: 100%; } #distpicker3{ margin-top: 5px; } .jd_row.active{ display: none; } .re-li-second{ width: 100%; border: 1px solid rgba(0,0,0,.1); border-right: none; } .re-li-second .r-l-li,.re-li-second .re-li-top{ width: 100%; height: auto; position: relative; display: flex; } .re-li-second .re-li-top{ border-bottom: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.05); } .re-li-second .re-li-top .rl,.re-li-second .li-xh{ width: calc(100% / 3); text-align: center; padding: 10px 0px; border-right: 1px solid rgba(0,0,0,.1); } .re-li-second .re-li-top .rl{ font-size: 14px; font-weight: bold; } .re-li-second .li-xh{ font-size: 12px; font-weight: normal; } .re-li-second.active{ display: none; } .date_selector, .date_selector *{width: auto;height: auto;border: none;background: none;margin: 0;padding: 0;text-align: left;text-decoration: none;} .date_selector{background:#fbfbfb;border: 1px solid #ccc;padding: 10px;margin:0;margin-top:-1px;position: absolute;z-index:100000;display:none;border-radius: 3px;box-shadow: 0 0 5px #aaa;box-shadow:0 2px 2px #ccc; width:220px; top:-190px;} .date_selector_ieframe{position: absolute;z-index: 99999;display: none;} .date_selector .nav{width: 100%;} .date_selector .nav p{clear: none;} .date_selector .month_nav, .date_selector .year_nav{margin: 0 0 3px 0;padding: 0;display: block;position: relative;text-align: center;} .date_selector .month_nav{float: left;width: 55%;} .date_selector .year_nav{float: right;width: 42%;} .date_selector .month_name, .date_selector .year_name{font-weight: bold;line-height: 20px;} .date_selector .button{display: block;position: absolute;top: 0;width:18px;height:18px;line-height:16px;font-weight:bold;color:#5985c7;text-align: center;font-size:12px;overflow:hidden;border: 1px solid #ccc;border-radius:2px;} .date_selector .button:hover, .date_selector .button.hover{background:#5985c7;color: #fff;cursor: pointer;border-color:#3a930d;} .date_selector .prev{left: 0;} .date_selector .next{right: 0;} .date_selector table{border-spacing: 0;border-collapse: collapse;clear: both;margin: 0; } .date_selector th, .date_selector td{width: 2.5em;height: 2em;padding: 0 !important;text-align: center !important;color: #666;font-weight: normal;} .date_selector th{font-size: 12px;} .date_selector td{border:1px solid #f1f1f1;line-height: 2em;text-align: center;white-space: nowrap;color:#5985c7;background: #fff;} .date_selector td.today{background: #eee;} .date_selector td.unselected_month{color: #ccc;} .date_selector td.selectable_day{cursor: pointer;} .date_selector td.selected{background:#2b579a;color: #fff;font-weight: bold;} .date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover{background:#5985c7;color: #fff;} .lida_infos{ width: 50%; position: absolute; left: 50%; top: 5%; } .zcityGroup .zcityItem .zcityItem-head .currentValue{ outline: none; } .lida_infos img{ position: absolute; width: 100%; opacity: 0; top: 30px; -webkit-transition:all .45s; } .lida_infos img:nth-child(1){ width: 70%; left: 15%; } .lida_infos img.active{ opacity: 1; top: 0%; } .lida_infos img:nth-child(2){ margin-top: 5vw; } .msg_left .singePage p{ text-indent: 32px; } .msg_left.stars .singePage p{ text-indent: 0px; } body{ background: #f8f7f6; } .sub_header { width: 100%; height: 100vh; position: fixed; left: 0%; top: 0%; background-color: rgba(0, 0, 0, .2); opacity: 0; visibility: hidden; z-index: 10; pointer-events: none; -webkit-transition: all 0.5s; display: block; } .sub_header .must{ position: absolute; width: 94%; height: 425px; -webkit-transition: all 0.5s; background: rgba(255,255,255,.3); top: 94px; left: 3%; border-radius: 10px; backdrop-filter: blur(10px); } .sub_header .must:before{ width: 100%; height: 20px; position: absolute; top: -20px; content: ''; display: block; left: 0%; } .sub_header .m_pic{ width: 320px; height: 425px; position:absolute; left: 0%; top: 0%; border-radius: 10px 0px 0px 10px; overflow: hidden; } .sub_header .m_pic img{ width: 0px; height: 100%; -webkit-transition: all .5s; position: absolute; left: 50%; top: 0%; object-fit: cover; -webkit-object-fit: cover; -webkit-transform: scale(1.05); } .sub_header .m_pic img.active{ left: 0%; width: 320px; -webkit-transform: scale(1); } .sub_header.active { opacity: 1; visibility: visible; pointer-events: all; } .sub_header ul { display: flex; width: calc(100% - 550px); justify-content: space-between; position: absolute; left: 50%; top: 0px; -webkit-transform: translateX(-50%); height: 100%; } .sub_header ul li { display: block; width: 100%; position: relative; padding: 25px 0px; -webkit-transition:all .45s; height: 100%; border-right: 1px solid rgba(255,255,255,.05); } .sub_header ul li:last-child{ border-right: none; } .sub_header ul li:hover{ box-shadow: 0px 0px 80px rgb(0 0 0 / 10%); background: #fff; } .sub_header ul li:hover a{ color: #3e3e3e; } .sub_header ul li:nth-child(1):after{ display: none; } .sub_header ul li:nth-child(1):hover{ box-shadow: none; background: transparent; } .sub_header ul li.active { opacity: 1; visibility: visible; } .sub_header ul li a { display: block; position: relative; line-height: 50px; text-align: center; opacity: 1; font-size: 16px; color: #fff; } .sub_header ul li a:hover{ color: #0061ae; } .sub_header ul li a .thum { background: #000; border-radius: 0px 0px 20px 20px; overflow: hidden; -webkit-transition: all .35s; } .sub_header ul li a:hover .thum { background-color: #d6b464; } .sub_header ul li a:hover .pic { -webkit-transform: scale(1.05); } .sub_header ul li a:hover .more .r { background-color: #fff; color: #a38c50; } .sub_header ul li a .thum .pic { opacity: .6; } .sub_header ul li a .thum .name { width: 100%; height: auto; position: absolute; left: 0%; top: 5%; padding: 20px 7%; color: #fff; font-size: 24px; font-family: BrownBlod; line-height: 1.2; } .sub_header ul li a .thum .more { width: 86%; height: auto; position: absolute; left: 7%; bottom: 2%; padding: 15px 0px; border-top: 2px solid rgba(255, 255, 255, .5); display: flex; align-items: center; color: #fff; justify-content: space-between; } .sub_header ul li a .thum .more .t { font-size: 18px; } .sub_header ul li a .thum .more .r { width: 40px; height: 40px; position: relative; border-radius: 50%; text-align: center; line-height: 38px; border: 1px solid rgba(255, 255, 255, .5); -webkit-transition: all .35s; } .sub_header ul li a:nth-child(4n) { margin-right: 0%; } .detail_page{ background: #fff; } .controlList { margin-top: 40px } .inforMationTitle { text-align: center; font-size: 28px; color: #0065b6; margin-bottom: 35px; font-weight: inherit } .controlList li { display: flex; justify-content: space-between; flex-wrap: wrap } .controlList .name { width: 100%; line-height: 85px; font-size: 20px; padding: 0 50px; position: relative; background: #fff; transition: ease .5s; cursor: pointer; z-index: 5 } .controlList .name:after { content: ''; position: absolute; width: 100%; height: 100%; background: url(../images/informationList_bg.jpg); left: 0; top: 0; z-index: -1; opacity: 0; transition: ease .5s } .controlList .btnOpen { width: 30px; height: 30px; background: #fff; position: absolute; border-radius: 50%; right: 4%; top: 50%; transform: translateY(-50%); background: #0065b6; transition: ease .5s; opacity: .5 } .controlList .btnOpen i { position: absolute; width: 17px; height: 2px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: ease .5s } .controlList .btnOpen i.h { transform: translate(-50%, -50%) rotate(90deg) } .controlList .summary { display: flex; background: #fff; padding: 50px; justify-content: inherit; display: none } .controlList li+li { margin-top: 12px } .controlList li .pic { width: 250px } .controlList li .content { width: calc(100% - 300px) } .controlList li h2 { margin-bottom: 15px; color: #0065b6; font-size: 24px } .controlList .active .name { color: #fff } .controlList .active .name:after { content: ''; opacity: 1 } .stu_prev,.stu_next{ display: none; } .controlList .active .summary { display: flex } .controlList .active .btnOpen { background: #fff } .controlList .active .btnOpen i { background: #024a9a } .controlList .active .btnOpen i.h { transform: translate(-50%, -50%) rotate(0) } .controlList .description { color: #7d7d7d; line-height: 1.7; font-size: 16px } .searchContent{width:100%;height:auto} .searchContent .scResult{width:300px;height:auto;background:#0050a6;color:#fff;font-weight:700;text-indent:45px;font-size:20px;line-height:40px;position:relative} .searchContent .scResult:after{width:25px;height:25px;position:absolute;left:10px;top:7.5px;background:url(../images/result_icon.png) no-repeat;background-size:cover;content:''} .resultTips{width:100%;height:auto;line-height:40px;font-size:14px} .resultTips span{color:#e10101;padding:0 3px;font-weight:700} .noData{width:100%;height:auto;padding:50px 0;line-height:50px;font-size:24px;text-align:center;color:#e10101;display:none} .noData.active{display:block} .searchContent{ background:#0050a6; padding-top: 150px;} .news5{ width:100%;margin-top: 50px; } .news5 ul{ display:flex; flex-wrap:wrap;} .news5 ul li{ width:32%; height:auto; margin-right:2%; margin-bottom:35px;} .news5 ul li:nth-child(3n){ margin-right:0px;} .resultTips{ color:#fff;} .news5 .thum{ margin-bottom:10px} .vision_word.c{ text-align:center;} #nav-icon2{ width: 30px; height: 30px; position: absolute; right: 3%; top: 19px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 5; } /* Icon 2 */ #nav-icon2 { display: none; } #nav-icon2 span { display: block; position: absolute; height: 3px; width: 50%; background: #fff; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon2 span:nth-child(even) { left: 50%; border-radius: 0 9px 9px 0; } #nav-icon2 span:nth-child(odd) { left:0px; border-radius: 9px 0 0 9px; } #nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) { top: 0px; } #nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) { top: 10px; } #nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) { top: 20px; } #nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon2.open span:nth-child(1) { left: 5px; top: 7px; } #nav-icon2.open span:nth-child(2) { left: calc(50% - 5px); top: 7px; } #nav-icon2.open span:nth-child(3) { left: -50%; opacity: 0; } #nav-icon2.open span:nth-child(4) { left: 100%; opacity: 0; } #nav-icon2.open span:nth-child(5) { left: 5px; top: 12px; } #nav-icon2.open span:nth-child(6) { left: calc(50% - 5px); top: 12px; } .studentSwiper{ display: none; } @media screen and (max-width: 1440px) { .msg_left.stars{ margin: 15vw 0px 6vw 5vw; width: 40%; } .msg_left.stars .singePage p{ text-indent: 0px; } .aluminfo.half{ width: 60%; margin-left: 20%; } .balls.bs1{ left: -15vw; } .news_l{ width: 350px; } .news_r{ width: calc(100% - 400px); } } @media screen and (max-width: 1366px) { .nav_bar{ padding-left: 3.5vw; } .earth_map{ right: -5%; } .navC{ width: calc(100% - 450px); } .sub_header ul li:first-child{ border-right: none; } .sub_header ul{ width: calc(100% - 450px); } .box6 .list a{ width: 49%; padding: 10px 15px; } .box6 .list a .txt b{ font-size: 16px; } .about_left{ left: -10%; top: 50%; } .tz_name b{ font-size: 28px; } .tz_name p{ font-size: 24px; } .singePage p{ margin-bottom: 10px; } .socialSwiper .name{ font-size: 16px; margin-top: 10px; } .alumdes{ font-size: 20px; } .star_list ul li .txt .n{ font-size: 18px; } .news_r ul li{ margin-bottom: 5vw; } .news_r ul li:nth-child(odd){ top: 5vw; } .tz_right{ width: 45%; right: 5%; } .box .contrl{ top: 20%; } .box2 .right{ top: 50%; } .box4 .list ul li .title p{ font-size: 38px; } .flogo{ margin-bottom: 2vw; } .flogo img{ width: 150px; } .box6 .info .in_box p{ font-size: 14px; } .box6 .socails .dt{ font-size: 12px; } .box6 .left{ left: -10vw; } .box6 .right{ width: 40%; left: 45%; } .zb_list ul li a{ font-size: 14px; } .singePage{ font-size: 14px; } .aluminfo,.logo_list ul li .des{ font-size: 14px; } .balls.bs5{ left: -15vw; } .balls.bs6{ left: 80vw; } } @media screen and (max-width: 1200px) { header .logo{ width: 150px; } .navC { width: calc(100% - 400px); } .sub_header .m_pic{ width: 250px; } .box6 .left{ left: -20vw; } .box5 .left{ left: 5%; } .box4 .list ul li .title p{ font-size: 32px; } .box4 .list ul li .txt{ font-size: 12px; } .box4 .list ul li .title span{ font-size: 14px; } .stu_thum{ width: 45%; margin-left: 0%; } .stu_info{ width: 45%; margin-right: 0%; } .stu_info .list ul li .txt p{ font-size: 12px; } .stu_info .name .title{ font-size: 24px; } .stu_info .name .des,.lida_info .l_box{ font-size: 14px; } .logoWall a:nth-child(1){ width: 150px; } .contact_box .info .in_box p,.dj_des{ font-size: 14px; } .contact_box .info .in_box b{ font-size: 16px; } .contact_box .socails{ width: 100px; } .djSwiper .name{ font-size: 14px; line-height: 1.5; } .djSwiper ul li{ margin-bottom: 25px; } .dj_title{ margin-bottom: 2vw; } .logo_list ul li:last-child .img{ width: 70%; margin-left: 15%; } .xiaoxun .vision_img{ left: 0%; top: 0%; } .aluminfo{ padding: 0px 10%; } .alumdes{ font-size: 16px; } .vision_left .singePage p{ margin-bottom: 0%; } .earth_map{ right: -15%; } .msg_left.stars{ width: 35%; } .star_list ul li .icon{ width: 55px; height: 55px; background-size: auto 100%; } .star_list ul li .txt{ width: calc(100% - 65px); margin-left: 10px; } .star_list ul li .txt .n{ font-size: 16px; margin-bottom: 4px; } .star_list ul li .txt .d{ font-size: 12px; line-height: 1.6; } .star_list ul li:nth-child(2) .icon { background-position: -55px 0px; } .star_list ul li:nth-child(3) .icon { background-position: -105px 0px; } .star_list ul li:nth-child(4) .icon { background-position: -160px 0px; } .star_list ul li:nth-child(5) .icon { background-position: -212px 0px; } .star_list ul li:nth-child(6) .icon { background-position: -265px 0px; } .star_list ul li:nth-child(7) .icon { background-position: -318px 0px; } .star_list ul li:nth-child(8) .icon { background-position: -370px 0px; } .star_left ul li{ margin-bottom: 15px; } .star_left ul li .info .star_dot .dot{ width: 15px; height: 15px; } .star_left ul li .info .star_dot .txt{ width: calc(100% - 20px); line-height: 15px; } .news_r { width: calc(100% - 350px); } .news_r ul li{ width: 48%; margin-bottom: 3vw; } .n_wx{ width: 100px; font-size: 12px; } .n_wx p{ width: 150%; margin-left: -25%; } .sub_nav{ justify-content: space-between; } .sub_nav a{ width: 32%; margin: 0px; line-height: 40px; font-size: 14px; } .news_l{ width: 300px; } .newspage #page { width: calc(100% - 350px); margin-left: 350px; } .tz_right2{ top: 10vw; } .tz_des{ font-size: 14px; } .zb_list ol li{ font-size: 16px; } .msg_left { width: 35%; } .msg_right{ width: 60%; padding: 35px 25px; } .c-table .row>input{ height: 30px; } .c-table .row{ margin-bottom: 20px; } .c-table .row .label{ line-height: 15px; } .toggleWrapper{ margin-top: 10px; } .tz_logo{ width: 20vw; } .w1200,.detail_box{ width: 80%; } .report_list a .info{ padding: 10px 0px; } .report_list a .info .name{ font-size: 14px; } } @media screen and (max-width: 900px) { #nav-icon2{ display: block; } .navC{ display: none; } header { height: 60px; left: 0%; top: 0px; padding: 0px; width: 100%; margin-left: 0%; } header .logo{ width: 100px; margin-left: 3%; } .header_r{ width: auto; margin-right: 55px; } .search_btn{ width: 40px; height: 40px; font-size: 14px; line-height: 38px; } .order_btn{ width: 80px; height: 40px; line-height: 38px; margin-right: 10px; } .order_btn .txt p{ font-size: 12px; } .search_box .s_box{ width: 100%; } .search_box .row{ margin-left: 30px; } .news5 ul li{ width: 100%; margin-right: 0%; margin-bottom: 15px; } .news5 ul li .time{ opacity: .5; font-size: 12px; } .active .banner-swiper{ clip-path: circle(150vw at 50vw 50vh); } .banner-swiper .swiper-button-prev,.banner-swiper .swiper-button-next{ display: none; } .menu_bar:before{ width: 60vh; height: 60vh; right: -40vh; } .banner-swiper .swiper-slide .txt{ font-size: 8vw; padding: 0px 5%; line-height: 1.4; } .box2 .right .singePage{ display: none; } .box .contrl{ width: 80vw; height: 80vw; left: 10%; top: 50%; margin-top: -65vw; } .box .contrl img{ width: 100%; height: 100%; } .ball{ width: 15vw; height: 15vw; border-width: 2px; top: 50%; margin-top: 15vw; left: 20vw; -webkit-transform: scale(1.5); } .ball.ball2{ left: 42.5vw; margin-top: 20vw; bottom: auto; } .ball.ball3{ left: 65%; bottom: auto; } .box2 .right{ width: 80%; left: 10%; top: 82%; } .box2 .right .name .cn, .box3 .name .cn, .box4 .name .cn{ font-size: 28px; } .box2 .right .common_more{ margin: 0px auto; } .common_more{ width: 145px; height: 50px; line-height: 50px; } .box2 .right .name{ text-align: center; } .box2 .right .name, .box3 .name, .box4 .name{ margin-bottom: 6vw; line-height: 1.6; } .box3 .left{ width: 80%; left: 10%; } .box3.active .right { clip-path: circle(100vw at 39vw 39vw); } .box3 .right{ left: 0vw; bottom: calc(100vh - 70vw); width: 100vw; height: 100vw; } .box3 .right .pic{ width: 100%; height: 100%; } .box3 .right .info{ width: 60%; } .box3 .right .info .time{ font-size: 12px; } .box3 .right .info .title{ font-size: 14px; } .box3 .left{ top: 65%; } .news ul li a .title{ font-size: 16px; } .news ul li a .des{ display: none; } .news ul li a .time{ font-size: 12px; } .news ul li a .info { width: calc(75% - 10px); } .news ul li{ margin-bottom: 5vw; } .news{ margin-bottom: 10vw; } .box4 .right .pic{ width: 100%; height: 100%; left: 0%; top: 30%; } .box4.active .right { clip-path: circle(60vw at 60vw 60vw); } .box4 .right{ width: 120vw; height: 120vw; left: -10vw; top: -45vw; clip-path: circle(0vw at 50vw 50vw); transition: clip-path 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .box4 .left{ width: 80%; left: 10%; top: 70%; } .box4 .list ul li .title p{ font-size: 20px; } .box4 .list ul li .txt{ padding-right: 10%; } .box4 .list ul li .icon{ width: 35px; } .common_more .txt{ padding-left: 25px; font-size: 14px; } .box5 .left{ width: 80%; left: 10%; height: 50vh; top: 0%; } .box5 .right{ width: 80%; left: 10%; top: 72%; } .box5 .right .name .cn{ font-size: 28px; } .box5 .right .singePage p:nth-child(2){ display: none; } .box5 .left .v_dot.dot1{ top: 18%; } .box5 .left .v_dot{ width: 50%; left: 5%; } .box5 .left .v_dot.dot2{ top: 35%; width: 35%; left: 65%; } .box5 .left .v_dot.dot3{ top: 70%; width: 40%; left: 35%; } .box6 .left{ display: none; } .box6 .right{ width: 80%; left: 10%; top: 55%; } .box6 .list a{ background: #fff; } .box6 .list a .txt p,.flogo{ display: none; } .box6 .list{ margin-bottom: 10vw; } .box6 .info .in_box b{ font-size: 16px; } .box6 .info .in_box p{ font-size: 12px; } .box6 .address{ padding-left: 0%; } .copyright a{ margin-left: 0px; margin-right: 10px; } header.active #nav-icon2 span{ background: #3e3e3e; } .box4 .list ul li{ margin-bottom: 2vw; } .subBanner img{ width: 200vw; max-width: none; left: -50vw; } .about_left{ display: none; } .about_right{ width: 100%; margin-left: 0%; } .yx_teacher,.logoWall{ display: none; } .stu_thum .dot .p:nth-child(4){ left: 200px; } .stu_thum{ width: 100%; margin-left: 0%; margin-bottom: 5vw; } .stu_thum .thum{ width: 70%; margin-left: 15%; } .stu_info{ width: 100%; } .stu_thum .dot{ display: none; } .stu_info .sib{ position:absolute; top: 0%; -webkit-transform: translateY(0%); } .socialSwiper .name{ font-size: 14px; } .socialSwiper{ padding-bottom: 30px; } .stu_info .name .title{ text-align: center; } .stu_info .list ul li{ width: 48%; flex-wrap: wrap; } .stu_info .list ul li .icon{ -webkit-transform: scale(0.8); margin: 0px auto; } .stu_info .list ul li .txt{ width: 100%; margin-left: 0%; text-align: center; } .lida_left{ width: 100%; margin-left: 0%; } .lida_infos{ width: 100%; position: relative; left: 0%; top: 0%; height: 80vw; } .lida_infos img:nth-child(1) { width: 80%; left: 10%; } .lida_nav a{ font-size: 14px; padding: 0px 20px; } .tz_word{ flex-wrap: wrap; } .tz_word p { margin: 0px 1.5vw 0px 0px; width: 35px; height: 35px; } .contact_box .right{ width: 100%; position: relative; } .contact_box .address{ width: 90%; margin-left: 5%; } .contact_box .info { width: calc(100% - 120px); } .contact_box .info .in_box p, .dj_des { font-size: 12px; } .contact_box .info .in_box b { font-size: 14px; } .tz_info .des{ font-size: 14px; } .tz_word p::after{ display: none; } .join_box{ padding: 0px; } .join_box .box{ width: 48%; } .nboxes .w1400{ flex-wrap: wrap; } .news_l { width: 100%; position: relative; top: 0px; } .news_r{ width: 100%; margin-top: 3vw; } .box4 .list ul li .title{ margin-bottom: 5px; } .n_rect,.n_wx{ display: none; } .news_r ul li:nth-child(odd){ top: 0%; } .news_r ul li .info .des{ display: none; } .news_r ul li .info .name{ font-size: 14px; } .newspage #page{ width: 100%; margin-left: 0px; } #page ul li{ width: 28px; height: 28px; line-height: 28px; min-width: 28px; font-size: 12px; margin-right: 0%; } .sum_title{ display: none; } .news_r ul li .thum .v_icon{ width: 30px; margin-left: -15px; margin-top: -15px; } .inner-player video{ width: 100%; } .earth_map{ display: none; } .msg_left.stars{ width: 90%; } .star_nav b{ font-size: 24px; width: calc(100% - 175px); } .star_left{ display: none; } .star_right { width: 100%; float: none; } .star_right ul li{ opacity: 1; } .star_right ul li{ margin-bottom: 20px; } .star_right ul li .name{ font-size: 16px; font-weight: bold; line-height: 1.7; margin-bottom: 0px; } .star_right ul li .site{ font-size: 12px; } .tianli_map{ width: 100%; padding: 25px; } .tianli_map.active { top: 55px; } .common_more .icon{ right: 15px; width: 20px; } .common_more:before{ left: 65%; } .tianli_map .list p{ font-size: 14px; margin-right: 10px; margin-bottom: 10px; } .star_nav .tianli_map b { font-size: 16px; margin-bottom: 10px; } .order_form{ width: 100%; padding: 25px; } .c-table .row>input{ font-size: 12px; } .order_form .alumdes{ font-size: 20px; margin-bottom: 10px; } .aluminfo.half{ width: 100%; margin-left: 0%; } .mb50 { margin-bottom: 0vw; } .balls{ display: none; } .aluminfo { padding: 0px 0%; } .tz_name p { font-size: 16px; } .tz_name b { font-size: 24px; } .vision_img{ width: 100%; height: 30vh; position: relative; left: 0%; -webkit-mask-image:none; top: 0px; margin-bottom: 5vw; } .vision_word{ font-size: 10vw; } .w1400.sec{ width: 100%; } .vision_img img{ position: relative; top: -25%; } .vision_left { width: 100%; position: relative; padding: 0px 5%; margin-bottom: 5vw; } .vision_word.mb { margin-bottom: 3vw; } .tz_name{ margin-bottom: 3vw; } .logo_list{ padding: 0px 5%; } .logo_list ul li{ width: 100%; background: #fff; margin-bottom: 3vw; display: flex; align-items: center; padding: 15px; justify-content: space-between; margin-right: 0%; } .logo_list ul li .icon{ width: 50px; margin: 0px; } .logo_list ul li .des{ width: calc(100% - 60px); } .logo_list ul li:last-child .img { width: 100%; margin-left: 0%; } .xiaoxun .vision_img{ width: 100vw; height: 30vh; -webkit-mask-image:none; } .w1400.xiaoxun{ width: 100%; } .xiaoxun .vision_left { margin-left: 0%; margin-bottom: 5vw; } .aluminfo ul { width: 100%; margin-left: 0%; } .aluminfo ul li b{ font-size: 16px; } .lida_right.s{ width: 100vw; height: 30vh; right: 0vw; border-radius: 0%; overflow: hidden; z-index: 1; top: 0vw; position: relative; margin-bottom: 5vw; } .lida_right.s img{ position: relative; top: -65%; } .msg_box .w1400{ flex-wrap: wrap; } .msg_left { width: 100%; margin-bottom: 5vw; margin-top: 10vw; } .msg_right { width: 100%; padding: 25px 25px; } .zcityGroup .zcityItem .zcityItem-head .currentValue{ font-size: 12px; } .upload_btn{ width: 80px; font-size: 12px; } .tz_left{ width: 100%; margin-top: 12vw; } .tz_logo { width: 60%; } .tz_right{ display: none; } .sub_title .tz_name{ width: calc(100% - 155px); } .annout_list a{ width: 100%; padding: 15px; margin-bottom: 3vw; } .annout_list a .icon{ width: 30px; } .annout_list a .info { width: calc(100% - 30px); } .annout_list a .info .name { font-size: 14px; line-height: 25px; } .annout_list a .date { line-height: 20px; opacity: .7; font-size: 12px; } .report_list a{ width: 49%; } .report_list a:nth-child(even){ margin-right: 0%; } .sub_title{ margin-bottom: 5vw; } .report_list a .info .icon { width: 25px; font-size: 18px; } .report_list a .info .name { width: calc(100% - 25px); } .zg_links { width: 100%; height: 30vh; } .other_box .name { position: absolute; left: 25px; top: 25px; } .other_box .name p { font-size: 16px; } .other_box .name b { font-size: 24px; font-weight: bold; } .gz_links { width: 100%; height: 30vh; margin-top: 5vw; } .other_box .more { left: 25px; bottom: 25px; } .inforMationTitle{ font-size: 20px; margin-bottom: 15px; font-weight: bold; } .controlList .name { width: 100%; line-height: 55px; font-size: 16px; padding: 0 20px; } .controlList .btnOpen i{ width: 12px; } .controlList .summary{ padding: 20px; } .controlList li .pic { width: 50%; margin-left: 25%; margin-bottom: 5vw; } .controlList li .content { width: 100%; } .controlList .active .summary { display: flex; flex-wrap: wrap; } .controlList li h2 { margin-bottom: 5px; color: #0065b6; font-size: 20px; text-align: center; } .controlList .description { line-height: 2; font-size: 14px; } .tz_right2{ display: none; } .tz_left .common_more{ width: 165px; } .tz_left.sec{ width: 90%; margin-left: 5%; margin-bottom: 10vw; margin-top: 12vw; } .annout_box{ background: #fff; padding: 25px 5%; } .zb_list .date{ display: none; } .zb_list .title { width: 60%; } .zb_list .comp { width: calc(40% - 50px); text-align: center; } .zb_list ul li a{ padding: 5px 0px; justify-content: space-between; } .zb_list .icon{ width: 20px; } .zb_list ol li { font-size: 14px; margin-bottom: 5px; } .tz_name.sec{ width: 100%; } .boxfirst { margin-top: -12vw; } .stu_info .sib{ display: none; } .stu_info .sib.active{ position: relative; display: block; } .logoWall{ display: block; } .logoWall a:nth-child(1){ width: 75px; top: 40%; } .logoWall a:nth-child(2),.logoWall a:nth-child(3),.logoWall a:nth-child(7){ width: 45px; } .logoWall a:nth-child(4),.logoWall a:nth-child(5),.logoWall a:nth-child(6){ width: 62px; } .logoWall a:nth-child(8){ width: 80px; } .logoWall a:nth-child(9){ width: 55px; } .logoWall a:nth-child(10){ width: 40px; } .logoWall a:nth-child(11){ width: 30px; } .logoWall a:nth-child(12){ width: 55px; } .logoWall{ height: 50vh; } .studentSwiper{ display: block; padding-bottom: 20px; margin-top: 5vw; margin-bottom: 10vw; } .studentSwiper .swiper-slide{ height: auto; -webkit-transition:all .35s; -webkit-transform: scale(0.8); opacity: .5; } .studentSwiper .swiper-slide.swiper-slide-active{ -webkit-transform: scale(1); opacity: 1; } .studentSwiper .swiper-slide .pic{ height: 50vh; border-radius: 10px; overflow: hidden; position: relative; } .studentSwiper .swiper-slide .name{ line-height: 30px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 5px; } .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{ top: auto; bottom: 0px; width: 60%; left: 20%; border-radius: 5px; overflow: hidden; } .studentSwiper .swiper-slide .pic .info{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: linear-gradient(-0deg, rgba(0,97,174,.7), rgba(0,97,174,0)); padding:0px; color: #fff; } .studentSwiper .swiper-slide .pic .des{ width: 100%; height: auto; position: absolute; left: 0%; bottom: 0%; color: #fff; font-size: 12px; line-height: 1.7; padding: 15px; text-align: center; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #0061ae; } .join_box .box .pic .title{ font-size: 16px; } .join_box .box .des{ display: none; } .join_box .box .common_more{ margin-left: -72.5px; top: 50%; } .join_box .box .name{ font-size: 18px; } .boxes.contact_box{ padding-bottom: 0px; } .star_right ul li .info{ display: block; } .star_right ul li .site{ display: none; } .star_right ul li .info .star_dot{ width: 100%; display: flex; justify-content: space-between; } .star_right ul li .info .star_dot .dot{ width: 20px; } .star_right ul li .info .star_dot .txt{ width: calc(100% - 20px); font-size: 12px; line-height: 20px; } .mob_nav ul{ width: 100%; margin-left: 0%; padding-top: 60px; border-top: 1px solid rgba(0,0,0,.1); } .mob_nav ul li a,.mob_nav ul li .one-level{ display: block; width: 90%; height: 100%; margin-left: 5%; border-bottom: 1px solid rgba(0,0,0,.1); } .mob_nav ul li{ width: 100%; height: auto; line-height: 50px; position: relative; font-size: 16px; transition: all .5s ease; } .mob_nav.active{ height: 100vh; } .mob_nav ul li .two-leval{ width: 90%; max-height: 0; transition: all .5s ease; overflow: hidden; margin-left: 5%; } .mob_nav ul li .two-leval a{ font-size: 14px; line-height: 40px; border: none; } .mob_nav ul li.active .two-leval{ max-height: 100vh; } .mob_nav ul li.active{ background: rgba(0,97,174,.1); } .mob_nav ul li:last-child{ display: flex; border-bottom: none; width: 90%; margin-left: 5%; } .mob_nav ul li:last-child a{ margin-left: 0%; border-bottom: none; width: auto; font-size: 14px; margin-right: 15px; } .mob_nav ul li .one-level{ position: relative; } .mob_nav ul li .one-level:after{ width: 30px; height: 30px; position: absolute; right: 0%; top: 10px; background: url(../images/arrow_icon.png) no-repeat; background-size: cover; content: ''; -webkit-transition:all .35s; } .mob_nav ul li.active .one-level:after{ -webkit-transform: rotate(180deg); } .lida_left .tz_name{ text-align: center; } .lida_nav{ justify-content: center; margin-bottom: 5vw; } .lida_nav.left{ justify-content: flex-start; } .detail_top{ padding: 100px 0px 25px; } .w1200, .detail_box { width: 90%; } .detail_top .title{ font-size: 24px; } .detail_top .info{ font-size: 12px; margin-top: 10px; } .detail_box{ padding: 30px 0 30px; flex-wrap: wrap; } .dpl{ width: 100%; padding-right: 0px; } .detail_box .dpr{ width: 100%; } .ndc_npnews{ flex-wrap: wrap; margin-bottom: 10vw; } .ndc_npnews .post_next, .ndc_npnews .post_prev{ width: 100%; font-size: 14px; } .ndc_npnews .post_next .icon, .ndc_npnews .post_prev .icon{ width: 54px; } .dpr .name{ font-size: 24px; } .dpr .sames a{ padding: 15px 0px; } .dpr .sames { margin-top: 15px; } .box2 .right .name .en { font-size: 14px; } .tz_word p:nth-child(2) { background-position: -35px 0px; } .tz_word p:nth-child(3) { background-position: -70px 0px; } .tz_word p:nth-child(4) { background-position: -105px 0px; } .tz_word p:nth-child(5) { background-position: -140px 0px; } .tz_word p:nth-child(6) { background-position: -175px 0px; } .tz_word p:nth-child(7) { background-position: -210px 0px; } .tz_word p:nth-child(8) { background-position: -245px 0px; } .tz_word p.active:nth-child(1) { background-position: 0px -35px; } .tz_word p.active:nth-child(2) { background-position: -35px -35px; } .tz_word p.active:nth-child(3) { background-position: -70px -35px; } .tz_word p.active:nth-child(4) { background-position: -105px -35px; } .tz_word p.active:nth-child(5) { background-position: -140px -35px; } .tz_word p.active:nth-child(6) { background-position: -175px -35px; } .tz_word p.active:nth-child(7) { background-position: -210px -35px; } .tz_word p.active:nth-child(8) { background-position: -245px -35px; } .dj_title{ margin-top: 15vw; font-size: 24px; } .dj_des{ font-size: 14px; } .dj_img { width: 100%; margin-left: 0%; } .djSwiper ul li{ width: 100%; margin-right: 0%; margin-bottom: 15px; } .djSwiper .name { font-size: 14px; line-height: 1.5; margin-top: 10px; } .c-list select{ background: transparent; } .box5 .left .v_dot .thum .btn{ width: 40px; } .stu_prev,.stu_next{ display: block; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 1px solid #0061ae; } .stu_prev{ left: 0%; } .stu_next{ right: 0%; } .stu_prev img, .stu_next img{ -webkit-transform: scale(0.6); } .box4 .name .cn{ line-height: 1.2; } .tz_name.sm{ margin-top: 10vw; } .pro_close{ top: 10%; } .jion_box{ background-attachment: inherit; } .contact_box .info .in_box{ margin-bottom: 5vw; } .logoWall a:nth-child(13){ width: 50px; } .logoWall a:nth-child(14){ width: 62px; } .logoWall a:nth-child(15){ width: 60px; } .logoWall a:nth-child(16){ width: 40px; } .logoWall a:nth-child(17){ width: 40px; } .logoWall a:nth-child(18){ width: 35px; } .ms_logo{ display: block; margin-bottom: 5vw; } .logoWall{ display: none; } .menu_bar,.menu_bar.active{ display: none; } .sbox{ bottom: 50px; } .sbox span{ -webkit-transform: scale(0.7); } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{ bottom: 50px; } } @media screen and (max-width: 375px) { .box .contrl{ width: 70vw; height: 70vw; left: 15%; } .ball{ top: 45%; } .box2 .right{ top: 78%; } .box2 .right .name .cn, .box3 .name .cn, .box4 .name .cn{ font-size: 20px; } .news ul li a .title{ font-size: 14px; } .box4 .right{ width: 100vw; height: 100vw; left: 0vw; top: -40vw; } .box4.active .right { clip-path: circle(50vw at 50vw 50vw); } .box4 .left{ top: 65%; } .box4 .list ul li .title p{ font-size: 18px; } .box4 .name .cn { line-height: 1.4; } .box5 .right .name .cn{ font-size: 20px; } .box6 .list a .txt b { font-size: 14px; } .copyright{ line-height: 18px; } .box6 .list a{ margin-bottom: 10px; } .box6 .info .in_box b { font-size: 14px; } .box6 .info .in_box{ margin-bottom: 3.5vw; } .copyright{ margin-top: 5vw; } .tz_name b{ font-size: 20px; } .stu_info .name .title { font-size: 20px; } .tz_name p { font-size: 14px; } .stu_info .list ul li .txt b{ line-height: 20px; font-size: 14px; } .lida_nav a{ line-height: 35px; } .tz_word{ margin-bottom: 5vw; } .join_box .box .pic .title { font-size: 14px; } .tz_name { margin-bottom: 5vw; } .dj_title,.tz_name b{ font-size: 20px; } .logo_list ul li .icon{ width: 40px; } .logo_list ul li .des { width: calc(100% - 50px); font-size: 12px; } .star_right ul li .name{ font-size: 14px; } .star_right ul li .thum{ margin-bottom: 5px; } }