@font-face { font-family: 'iconfont'; /* Project id 3969761 */ src: url('//at.alicdn.com/t/c/font_3969761_tg6wdissnvl.woff2?t=1684374961438') format('woff2'), url('//at.alicdn.com/t/c/font_3969761_tg6wdissnvl.woff?t=1684374961438') format('woff'), url('//at.alicdn.com/t/c/font_3969761_tg6wdissnvl.ttf?t=1684374961438') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: iconfont; src: url(//at.alicdn.com/t/font_1811158_g0yz62clb.eot); src: url(//at.alicdn.com/t/font_1811158_g0yz62clb.eot?#iefix) format('embedded-opentype'), url(//at.alicdn.com/t/font_1811158_g0yz62clb.woff2) format('woff2'), url(//at.alicdn.com/t/font_1811158_g0yz62clb.woff) format('woff'), url(//at.alicdn.com/t/font_1811158_g0yz62clb.ttf) format('truetype'), url(//at.alicdn.com/t/font_1811158_g0yz62clb.svg#iconfont) format('svg') } @font-face { font-family: avant; src: url(../fonts/Avant.woff2) } ::-webkit-scrollbar { width: 8px; height: 10px; } ::-webkit-scrollbar-track { border-radius: 0; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px #00c7a1; background-color: #00c7a1; } ::-webkit-scrollbar-thumb:hover { border-radius: 5px; -webkit-box-shadow: inset 0 0 6px #7ccfc0; background-color: #7ccfc0; } body { width: 100%; } @keyframes fadeIniup { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } } .he_fadeup1 { -webkit-animation: fadeIniup 1s ease both; animation: fadeIniup 1s ease both; -ms-animation: fadeInUp 1s ease both; animation-delay: 0.3s; } .c-scrollbar_thumb { background: #00c7a1; } .index { width: 100%; } .index .f1 { width: 100%; position: relative; overflow: visible !important; z-index: 9999; pointer-events: none; } .index .f1 .video { width: 100%; height: 100vh; position: relative; } .index .f1 .video .f2Text { width: 100%; position: absolute; z-index: 10; color: white; top: 50%; opacity: 0; } .index .f1 .video .f2Text .tit { text-align: center; font-size: 2vw; } .index .f1 .video video { width: 100%; height: 100%; position: absolute; top: 0; object-fit: cover !important; } .index .f2 { width: 100%; position: absolute; padding: 0 5vw; z-index: 9; } .index .f2 .imgBox { width: 100%; display: flex; justify-content: space-between; } .index .f2 .imgBox .left { width: 21vw; } .index .f2 .imgBox .left .imgBox { width: 21vw; height: 27vw; overflow: hidden; margin-bottom: 1vw; } .index .f2 .imgBox .left .imgBox .img { width: 21vw; height: 27vw; background-size: cover !important; cursor: pointer; overflow: hidden; transition: 0.5s all; } .index .f2 .imgBox .left .imgBox .img .text { text-align: center; position: relative; padding-top: 23vw; transition: 0.5s all; } .index .f2 .imgBox .left .imgBox .img .text .name { font-size: 1.5vw; color: #ffffff; } .index .f2 .imgBox .left .imgBox .img .text .more { display: block; width: 120px; height: 40px; background-color: #00c8a2; border-radius: 3px; color: white; font-size: 14px; line-height: 40px; text-align: center; margin: 1vw auto 0 auto; opacity: 0; transition: 0.5s all; } .index .f2 .imgBox .left .imgBox .img::before { content: ''; width: 21vw; height: 27vw; position: absolute; background: url('../images/pp_m.png') center no-repeat; background-size: cover !important; } .index .f2 .imgBox .left .imgBox:hover .img { transform: scale(1.1); } .index .f2 .imgBox .left .imgBox:hover .img .text { padding-top: 18.5vw; } .index .f2 .imgBox .left .imgBox:hover .img .text .more { opacity: 1; } .index .f2 .imgBox .left .imgBox2 { width: 21vw; height: 13vw; overflow: hidden; /*margin-bottom: 1vw;*/ display: block; } .index .f2 .imgBox .left .imgBox2 .img { width: 21vw; height: 13vw; background-size: cover !important; cursor: pointer; overflow: hidden; transition: 0.5s all; } .index .f2 .imgBox .left .imgBox2 .img .text { text-align: center; position: relative; padding-top: 9vw; transition: 0.5s all; } .index .f2 .imgBox .left .imgBox2 .img .text .name { font-size: 1.5vw; color: #ffffff; } .index .f2 .imgBox .left .imgBox2 .img .text .more { display: block; width: 120px; height: 40px; background-color: #00c8a2; border-radius: 3px; color: white; font-size: 14px; line-height: 40px; text-align: center; margin: 1vw auto 0 auto; opacity: 0; transition: 0.5s all; } .index .f2 .imgBox .left .imgBox2 .img::before { content: ''; width: 21vw; height: 13vw; position: absolute; background: url('../images/pp_m.png') center no-repeat; background-size: cover !important; } .index .f2 .imgBox .left .imgBox2:hover .img { transform: scale(1.1); } .index .f2 .imgBox .left .imgBox2:hover .img .text { padding-top: 5.5vw; } .index .f2 .imgBox .left .imgBox2:hover .img .text .more { opacity: 1; } .index .f2 .imgBox .middle { width: 51vw; height: 39vw; margin: 0 1vw; background: transparent; } .index .f2 .imgBox .right { width: 21vw; } .index .f2 .imgBox .right .imgBox { width: 21vw; height: 13vw; overflow: hidden; margin-bottom: 1vw; } .index .f2 .imgBox .right .imgBox .img { width: 21vw; height: 13vw; background-size: cover !important; cursor: pointer; overflow: hidden; transition: 0.5s all; } .index .f2 .imgBox .right .imgBox .img .text { text-align: center; position: relative; padding-top: 9vw; transition: 0.5s all; } .index .f2 .imgBox .right .imgBox .img .text .name { font-size: 1.5vw; color: #ffffff; } .index .f2 .imgBox .right .imgBox .img .text .more { display: block; width: 120px; height: 40px; background-color: #00c8a2; border-radius: 3px; color: white; font-size: 14px; line-height: 40px; text-align: center; margin: 1vw auto 0 auto; opacity: 0; transition: 0.5s all; } .index .f2 .imgBox .right .imgBox .img::before { content: ''; width: 21vw; height: 13vw; position: absolute; background: url('../images/pp_m.png') center no-repeat; background-size: cover !important; } .index .f2 .imgBox .right .imgBox:hover .img { transform: scale(1.1); } .index .f2 .imgBox .right .imgBox:hover .img .text { padding-top: 5.5vw; } .index .f2 .imgBox .right .imgBox:hover .img .text .more { opacity: 1; } .index .f2 .imgBox .right .imgBoxs { display: flex; } .index .f2 .imgBox .right .imgBoxs .imgBox2 { width: 10vw; height: 13vw; overflow: hidden; /*margin-bottom: 1vw;*/ } .index .f2 .imgBox .right .imgBoxs .imgBox2 .img { width: 10vw; height: 13vw; background-size: cover !important; cursor: pointer; overflow: hidden; transition: 0.5s all; } .index .f2 .imgBox .right .imgBoxs .imgBox2 .img .text { text-align: center; position: relative; padding-top: 9vw; transition: 0.5s all; } .index .f2 .imgBox .right .imgBoxs .imgBox2 .img .text .name { font-size: 1.5vw; color: #ffffff; } .index .f2 .imgBox .right .imgBoxs .imgBox2 .img .text .more { display: block; width: 120px; height: 40px; background-color: #00c8a2; border-radius: 3px; color: white; font-size: 14px; line-height: 40px; text-align: center; margin: 1vw auto 0 auto; opacity: 0; transition: 0.5s all; } .index .f2 .imgBox .right .imgBoxs .imgBox2 .img::before { content: ''; width: 10vw; height: 13vw; position: absolute; background: url('../images/pp_m.png') center no-repeat; background-size: cover !important; } .index .f2 .imgBox .right .imgBoxs .imgBox2:nth-child(1) { margin-right: 1vw; } .index .f2 .imgBox .right .imgBoxs .imgBox2:hover .img { transform: scale(1.1); } .index .f2 .imgBox .right .imgBoxs .imgBox2:hover .img .text { padding-top: 5.5vw; } .index .f2 .imgBox .right .imgBoxs .imgBox2:hover .img .text .more { opacity: 1; } .index .f3 { width: 100%; display: inline-block; text-align: center; position: relative; margin: 3vw auto; } .index .f3 .item { display: inline-block; text-align: center; margin: 0 3vw; } .index .f3 .item .icon { width: 5vw; margin: 0 auto; display: inline-block; float: left; /*padding-right: .5vw;*/ } .index .f3 .item .infor { display: inline-block; flex-wrap: wrap; align-items: center; /*margin-top: -1vw;*/ } .index .f3 .item .infor .number { color: #00c7a1; font-weight: bold; font-size: 1vw; display: flex; } .index .f3 .item .infor .number font { font-size: 3vw; } .index .f3 .item .infor .number p { position: relative; left: .5vw; top: 1.5vw; font-weight: normal; } .index .f3 .item .infor .text { text-align: left; padding-left: 0.5vw; } .index .f3 .item .infor .text .title { font-size: 1vw; text-align: center; } /*.index .f3 .item .infor .text .subtitle {*/ /* color: #00c7a1;*/ /* font-size: 1vw;*/ /*}*/ .index .f3 .item:nth-child(2) .infor .number { text-align: left; position: relative; } .f3L .textBox { position: absolute; right: 0; height: 100vh; background-color: rgba(255, 255, 255, 0.7); width: 30vw; top: 0; transform: translateX(30vw); transition: 1s all; } .f3L .textBox .text { position: absolute; margin-left: 5vw; top: 40%; transition: 1s all; } .chrg-grid{ width: 100%; display: flex; flex-wrap: wrap; position: relative; } .chrg-grid .chrg-item{ width: 18.6%; margin-right: 1.75%; margin-bottom: 1.35vw; overflow: hidden; cursor: pointer; position: relative; } .chrg-grid .chrg-item::before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; pointer-events: none; } .chrg-grid .chrg-item::after{ width: 100%; height: 70%; position: absolute; left: 0%; bottom: 0%; content: ''; background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); opacity: 0; -webkit-transition: all .5s; } .chrg-grid .chrg-item .name{ -webkit-transition: all .5s; opacity: 0; } .chrg-grid .chrg-item:hover .name,.chrg-grid .chrg-item:hover::after{ opacity: 1; } .chrg-grid .chrg-item:hover::before{ animation: gradient-rectangle 1s 1; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } @-webkit-keyframes gradient-rectangle { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; transform-origin: bottom; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); opacity: 1; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); opacity: 0; } } .chrg-grid .chrg-item:nth-child(5n){ margin-right: 0%; } .chrg-grid .chrg-item:hover .pic{ -webkit-transform: scale(1.1); } .chrg-grid .chrg-item .pic{ background: center center no-repeat; background-size: cover; -webkit-transition: all .5s; } .chrg-grid .chrg-item .name{ width: 100%; height: auto; position: absolute; left: 0%; bottom: 0%; padding: 15px; font-size: 14px; color: #fff; line-height: 1.6; z-index: 5; text-align: center; } .f3L .textBox .tit { color: #00c7a1; font-size: 48px; line-height: 2; position: relative; } .f3L .textBox .tit::before { content: ''; position: absolute; left: 0vw; background: #00c7a1; width: 3vw; height: 5px; border-radius: 5px; bottom: 0px; } .f3L .textBox .des { color: #616161; font-size: 18px; margin: 2.5vw 0 2.5vw; } .f3L .textBox .more { background-color: rgba(0, 199, 161, 0.05); border-radius: 5px; border: 1px solid #00c7a1; color: #00c7a1; font-size: 16px; padding: 14px 22px 14px 32px; transition: 0.3s all; display: inline-block; } .f3L .textBox .more i{ margin-left: 10px; } .f3L .textBox .more:hover { background: #00c7a1; color: white; } .f3L .active { transform: translateX(0); } .f3A { width: 100%; height: 100vh; position: relative; z-index: 5; overflow: hidden; } .f3A .imgBox { width: 100%; height: 100vh; background-size: cover !important; transition: 2s all; } .f3B { width: 100%; height: 100vh; position: relative; z-index: 6; overflow: hidden; } .f3B .imgBox { width: 100%; height: 100vh; background-size: cover !important; transition: 2s all; } .index .f3C { width: 100%; height: 100vh; background-size: cover !important; position: relative; margin-top: -100vh; z-index: 7; overflow: hidden; } .index .f3C .imgBox { width: 100%; height: 100vh; background-size: cover !important; transition: 2s all; } .index .f4 { width: 100%; position: relative; padding: 7vw 8vw; } .index .f4 .f4titBox { width: 100%; display: flex; justify-content: space-between; } .index .f4 .f4titBox .tit { font-size: 48px; color: #00c7a1; } .index .f4 .f4titBox .tabBox { display: flex; } .index .f4 .f4titBox .tabBox .item { color: #656565; font-size: 1vw; margin: 0 0 0 3vw; cursor: pointer; transition: 0.3s all; } .index .f4 .f4titBox .tabBox .item:first-child { margin: 0 3vw 0 0; } .index .f4 .f4titBox .tabBox .item:first-child::after { content: ''; position: absolute; background-color: #a4a4a4; opacity: 0.45; width: 1px; height: 1.2vw; margin-left: 3vw; margin-top: 0.1vw; } .index .f4 .f4titBox .tabBox .active { color: #00c7a1; } .index .f4 .f4titBox .tabBox .active::before { content: ''; position: absolute; background-color: #00c7a1; width: 1vw; height: 5px; border-radius: 3px; margin-top: 0.5vw; margin-left: -2vw; } .index .f4 .f4titBox .tabBox .item:hover { color: #00c7a1; } .index .f4 .f4titBox .tabBox .item:hover::before { content: ''; position: absolute; background-color: #00c7a1; width: 1vw; height: 5px; border-radius: 3px; margin-top: 0.5vw; margin-left: -2vw; } .index .f4 .f4Box { width: 100%; display: flex; margin-top: 2vw; } .index .f4 .f4Box .left { width: 41vw; } .index .f4 .f4Box .left .imgBox { width: 41vw; height: 23vw; overflow: hidden; } .index .f4 .f4Box .left .imgBox .img { width: 41vw; height: 23vw; background-size: cover !important; transition: 0.8s all; } .index .f4 .f4Box .left .text { background: #e5f9f5; color: #00c7a1; text-align: center; padding: 1.5vw 0; font-size: 1vw; } .index .f4 .f4Box .left:hover .imgBox .img { transform: scale(1.1); } .index .f4 .f4Box .right { width: 41vw; margin-left: 2vw; } .index .f4 .f4Box .right .item { display: flex; padding: 1vw 2vw; border: 1px solid #ebebeb; transition: 0.8s all; } .index .f4 .f4Box .right .item .time { color: #666666; text-align: center; padding-top: 2.5vw; transition: 0.8s all; } .index .f4 .f4Box .right .item .time p:nth-child(1) { font-size: 2vw; font-weight: bold; } .index .f4 .f4Box .right .item .time p:nth-child(2) { font-size: 0.9vw; } .index .f4 .f4Box .right .item .imgBox { width: 12vw; height: 7vw; margin-left: 2vw; margin-right: 1vw; overflow: hidden; } .index .f4 .f4Box .right .item .imgBox .img { width: 12vw; height: 7vw; background-size: cover !important; transition: 0.8s all; } .index .f4 .f4Box .right .item .text { width: 18vw; color: #666666; padding-top: 2vw; } .index .f4 .f4Box .right .item .text .tit { font-size: 1vw; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: 0.8s all; } .index .f4 .f4Box .right .item .text .des { opacity: 0.8; font-size: 0.85vw; line-height: 1.7; margin-top: 1vw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; transition: 0.8s all; } .index .f4 .f4Box .right .item:nth-child(1) { border-bottom: transparent; } .index .f4 .f4Box .right .item:nth-child(2) { border-bottom: transparent; } .index .f4 .f4Box .right .item:hover { background: #e5f9f5; } .index .f4 .f4Box .right .item:hover .imgBox .img { transform: scale(1.1); } .index .f4 .f4Box .right .item:hover .time { color: #00c7a1; } .index .f4 .f4Box .right .item:hover .text { color: #00c7a1; } .Effect { width: 100%; overflow: hidden; } .Effect .bannerBox { width: 100%; height: 30vw; background-size: cover !important; margin-top: 84px; } .Effect .title { text-align: center; margin: 4vw 0; color: #00c7a1; font-size: 2vw; z-index: 2; position: relative; } .Effect .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .Effect .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .Effect .EffectBox { width: 100%; padding: 0 5vw; display: inline-block; margin-top: 8vw; } .Effect .EffectBox .item { width: 28vw; height: 41vw; display: inline-block; float: left; margin-right: 2vw; margin-bottom: 2vw; cursor: pointer; overflow: hidden; position: relative; } .Effect .EffectBox .item .imgBox .pic{ background: center center no-repeat; background-size: cover; width: 28vw; height: 41vw; position: absolute; left: 0%; top: 0%; -webkit-transition: all 1.5s ease; -webkit-transform: scale(1.1); } .Effect .EffectBox .item .imgBox .pic::after{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; content: ''; background: #000; content: ''; opacity: .3; -webkit-transition: all .45s; } .Effect .EffectBox .item .imgBox { position: absolute; left: 0%; top: 0%; width: 100%; height: 0%; -webkit-transition: all 1.5s cubic-bezier(0.215, 0.610, 0.355, 1); overflow: hidden; } .Effect .EffectBox .item.animated .imgBox{ height: 100%; } .Effect .EffectBox .item.animated .imgBox .pic{ -webkit-transform: scale(1); } .Effect .EffectBox .item .textBox { width: 28vw; position: absolute; text-align: center; z-index: 1; } .Effect .EffectBox .item .text { width: 100%; text-align: center; padding-top: 8vw; } .Effect .EffectBox .item:hover .text .en { -webkit-text-stroke: 1px rgba(15, 192, 150, 1); } .Effect .EffectBox .item:hover .text .cn { color: #0fc096; } .Effect .EffectBox .item .text .en { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7); color: transparent; font-size: 2.5vw; font-family: avant; -webkit-transition: all .5s; display: none; } .Effect .EffectBox .item .text .cn { color: #ffffff; font-size: 2vw; -webkit-transition: all .5s; } .Effect .EffectBox .item:hover .imgBox .pic::after{ opacity: 0; } .Effect .EffectBox .item:nth-child(3n) { margin-right: 0; } .Effect .EffectBox .item:nth-child(3n + 2) { position: relative; top: -6vw; } .Effect .imageModal { width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.9); position: fixed; top: 0; opacity: 0; pointer-events: none; transition: .5s all; z-index: 997; } .Effect .imageModal.active { opacity: 1; pointer-events: all; } .Effect .imageModal .imageBox { width: 100%; height: 40vw; position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); } .Effect .imageModal .imageBox .imageModals { width: 53vw; height: 40vw; background: white; margin: 0 auto; padding: 2vw; display: flex; box-shadow: 0 1px 15px 5px gainsboro; } .Effect .imageModal .close { position: absolute; font-size: 32px; right: 1vw; top: 1vw; cursor: pointer; } .Effect .imageModal .imageBox .imageModals .left { width: 25vw; position: relative; } .Effect .imageModal .imageBox .imageModals .left img { width: 25vw; position: relative; transition: 0.5s all; } .Effect .imageModal .imageBox .imageModals .left .showImg{ position: relative; cursor: pointer; overflow: hidden; } .Effect .imageModal .imageBox .imageModals .left .showImg img{ transition: 0.5s all; } .Effect .imageModal .imageBox .imageModals .left .showImg:hover img{ -webkit-transform: scale(1.02); } .Effect .imageModal .imageBox .imageModals .left .showTips{ width: 100%; line-height: 20px; font-size: 14px; display: flex; position: relative; margin-top: 10px; justify-content: center; opacity: .4; pointer-events: none; } .Effect .imageModal .imageBox .imageModals .left .showTips img{ width: 20px; height: 20px; top: 0px; } .Effect .imageModal .imageBox .imageModals .right { width: 22vw; margin-left: 2vw; } .Effect .imageModal .imageBox .imageModals .right .name { color: #1c1c1c; font-size: 1.5vw; font-weight: bold; } .Effect .imageModal .imageBox .imageModals .right form { padding: 1vw 0; margin: 1vw 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .Effect .imageModal .imageBox .imageModals .right form .tit { color: #1c1c1c; font-size: 1vw; font-weight: bold; } .Effect .imageModal .imageBox .imageModals .right form .tit span { background: #00c7a1; color: white; font-size: 0.9vw; border-radius: 3px; padding: 1px 5px; } .Effect .imageModal .imageBox .imageModals .right form .inputBox { width: 100%; height: 3vw; background-color: #f7f9fa; border-radius: 3px; margin-bottom: 1vw; padding: 0 1vw; } .Effect .imageModal .imageBox .imageModals .right form .inputBox input { width: 100%; height: 3vw; outline: none; border: transparent; background: transparent; font-size: 0.85vw; } .Effect .imageModal .imageBox .imageModals .right form .sbumit { width: 100%; height: 3vw; background-color: #00c7a1; border-radius: 3px; text-align: center; line-height: 3vw; font-size: 0.9vw; color: white; cursor: pointer; transition: .5s all; } .Effect .imageModal .imageBox .imageModals .right form .sbumit:hover { box-shadow: 0 1px 10px #00c7a1; } .Effect .imageModal .imageBox .imageModals .right form .kefu { width: 100%; height: 3vw; background-color: rgba(0, 199, 161, 0.1); border-radius: 3px; text-align: center; line-height: 3vw; font-size: 0.9vw; color: #00c7a1; border: 1px solid #00c7a1; margin-top: 1vw; cursor: pointer; display: block; transition: .5s all; } .Effect .imageModal .imageBox .imageModals .right form .kefu:hover { box-shadow: 0 1px 10px gainsboro; } .Effect .imageModal .imageBox .imageModals .right .imgBox .tit { font-weight: bold; font-size: 0.9vw; } .Effect .imageModal .imageBox .imageModals .right .imgBox .tit span { font-weight: normal; font-size: 0.8vw; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox { width: 100%; height: 13vw; overflow-y: auto; overflow-x: hidden; margin-top: 1vw; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList { width: 100%; position: relative; transition: .3s all; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList ul li { width: 5vw; cursor: pointer; position: absolute; transition: .3s all; height: 5vw; border: 2px solid transparent; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList ul li img{ width: 100%; height: 100%; object-fit: cover; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList .item.active { border: 2px solid #00c7a1; } .Effect .imageModal .imageBox .leftIcon { width: 3vw; height: 3vw; border: 1px solid #0fc096; border-radius: 50%; color: #0fc096; text-align: center; font-size: 2vw; padding-top: 0.1vw; cursor: pointer; position: absolute; left: 15vw; top: 50%; line-height: 2.8vw; transform: translate(0, -50%); transition: .5s all; } .Effect .imageModal .imageBox .leftIcon:hover { background-color: #00c7a1; color: white; } .Effect .imageModal .imageBox .rightIcon { width: 3vw; height: 3vw; border: 1px solid #0fc096; border-radius: 50%; color: #0fc096; text-align: center; font-size: 2vw; padding-top: 0.1vw; cursor: pointer; position: absolute; right: 15vw; top: 50%; line-height: 2.8vw; transform: translate(0, -50%); transition: .5s all; } .Effect .imageModal .imageBox .rightIcon:hover { background-color: #00c7a1; color: white; } .Grass .bannerBox { width: 100%; height: 30vw; background-size: cover !important; margin-top: 4.5vw; } .Grass .title { text-align: center; margin: 4vw 0; color: #00c7a1; font-size: 2vw; position: relative; z-index: 2; } .Grass .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .Grass .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .Grass .EffectBox { width: 100%; padding: 0 6vw 6vw 6vw; } .Grass .EffectBox .EffectList { width: 100%; position: relative; } .Grass .EffectBox .EffectList ul li { width: calc(24.5% - 15px); margin: 10px; cursor: pointer; transition: .5s all; position: absolute; } .Grass .imageModal { width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.9); position: fixed; top: 0; opacity: 0; pointer-events: none; z-index: 997; } .Grass .imageModal.active { opacity: 1; pointer-events: all; } .Grass .imageModal .close { position: absolute; font-size: 32px; right: 1vw; top: 1vw; cursor: pointer; } .Grass .imageModal .imageBox { width: 100%; height: 40vw; position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); } .Grass .imageModal .imageBox .imageModals { width: 53vw; height: 40vw; background: white; margin: 0 auto; padding: 2vw; display: flex; box-shadow: 0 1px 15px 5px gainsboro; } .Grass .imageModal .imageBox .imageModals .left { width: 25vw; position: relative; } .Grass .imageModal .imageBox .imageModals .left .showImg{ position: relative; cursor: pointer; overflow: hidden; } .Grass .imageModal .imageBox .imageModals .left .showImg:hover img{ -webkit-transform: scale(1.02); } .xzContent{ position: relative; background: #fff; z-index: 250; } .xzContent::before{ width: 100%; height: 10vw; position: absolute; left: 0%; top: -9vw; background: url(../images/qy_wave.png) center center no-repeat; background-size: cover; content: ''; } .Grass .imageModal .imageBox .imageModals .left .showTips { width: 100%; line-height: 20px; font-size: 14px; display: flex; position: relative; margin-top: 10px; justify-content: center; opacity: .4; pointer-events: none; } .Grass .imageModal .imageBox .imageModals .left .showTips img { width: 20px; height: 20px; top: 0px; } .Grass .imageModal .imageBox .imageModals .left img { width: 25vw; position: relative; top: 0vw; transition: 0.5s all; } .Grass .imageModal .imageBox .imageModals .right { width: 22vw; margin-left: 2vw; } .Grass .imageModal .imageBox .imageModals .right .name { color: #1c1c1c; font-size: 1.5vw; font-weight: bold; } .Grass .imageModal .imageBox .imageModals .right form { padding: 1vw 0; margin: 1vw 0; border-bottom: 1px solid #e6e6e6; padding-top: 0px; margin-top: 0px; } .Grass .imageModal .imageBox .imageModals .right form .tit { color: #1c1c1c; font-size: 1vw; font-weight: bold; } .Grass .imageModal .imageBox .imageModals .right form .tit span { background: #00c7a1; color: white; font-size: 0.9vw; border-radius: 3px; padding: 1px 5px; } .Grass .imageModal .imageBox .imageModals .right form .inputBox { width: 100%; height: 3vw; background-color: #f7f9fa; border-radius: 3px; margin-bottom: 1vw; padding: 0 1vw; } .Grass .imageModal .imageBox .imageModals .right form .inputBox input { width: 100%; height: 3vw; outline: none; border: transparent; background: transparent; font-size: 0.85vw; } .Grass .imageModal .imageBox .imageModals .right form .sbumit { width: 100%; height: 3vw; background-color: #00c7a1; border-radius: 3px; text-align: center; line-height: 3vw; font-size: 0.9vw; color: white; cursor: pointer; transition: .5s all; } .Grass .imageModal .imageBox .imageModals .right form .sbumit:hover { box-shadow: 0 1px 10px gainsboro; } .Grass .imageModal .imageBox .imageModals .right form .kefu { width: 100%; height: 3vw; background-color: rgba(0, 199, 161, 0.1); border-radius: 3px; text-align: center; line-height: 3vw; font-size: 0.9vw; color: #00c7a1; border: 1px solid #00c7a1; margin-top: 1vw; cursor: pointer; display: block; transition: .5s all; } .Grass .imageModal .imageBox .imageModals .right form .kefu:hover { box-shadow: 0 1px 10px gainsboro; } .Grass .imageModal .imageBox .imageModals .right .imgBox .tit { font-weight: bold; font-size: 0.9vw; } .Grass .imageModal .imageBox .imageModals .right .imgBox .tit span { font-weight: normal; font-size: 0.8vw; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox { width: 100%; height: 13vw; overflow-y: auto; overflow-x: hidden; margin-top: 1vw; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList { width: 100%; position: relative; transition: .3s all; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList ul li { width: 5vw; cursor: pointer; position: absolute; transition: .3s all; height: 5vw; border: 2px solid transparent; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList ul li img{ width: 100%; height: 100%; object-fit: cover; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList .item.active { border: 2px solid #00c7a1; } .Grass .imageModal .imageBox .leftIcon { width: 3vw; height: 3vw; background-color: #00c7a1; border-radius: 50%; color: white; text-align: center; font-size: 2vw; padding-top: 0.1vw; cursor: pointer; position: absolute; left: 18vw; line-height: 3vw; top: 50%; transform: translate(0, -50%); } .Grass .imageModal .imageBox .rightIcon { width: 3vw; height: 3vw; background-color: #00c7a1; border-radius: 50%; color: white; text-align: center; font-size: 2vw; padding-top: 0.1vw; cursor: pointer; position: absolute; right: 18vw; line-height: 3vw; top: 50%; transform: translate(0, -50%); } .HR { background-color: #f5f5f5; } .HR .bannerBox { width: 100%; height: 45vw; margin-top: 4vw; background-size: cover !important; } .HR .serachBox { width: 50vw; height: 4vw; background-color: #ffffff; box-shadow: 0vw 1vw 1vw 0vw rgba(32, 32, 32, 0.08); border-radius: 3vw; margin: 0 auto; position: relative; top: -2.2vw; padding: 0.5vw 0.5vw; display: flex; justify-content: space-between; } .HR .serachBox input { width: 90%; height: 3vw; font-size: 1vw; padding-left: 2vw; outline: none; background: transparent; border: transparent; } .HR .serachBox .serach { width: 3vw; height: 3vw; background-color: #00c7a1; border-radius: 50%; color: white; font-size: 1.5vw; text-align: center; padding-top: 0.7vw; cursor: pointer; } .HR .f1 { width: 1200px; margin: 0 auto; padding: 4vw 0 6vw 0; } .HR .f1 .text { text-align: center; } .HR .f1 .text .tit { color: #00c7a1; font-size: 2vw; font-weight: bold; } .HR .f1 .text .des { color: #00c7a1; font-size: 1.2vw; margin: 1vw 0 2vw 0; line-height: 1.7; } .HR .f1 .text .info { color: #6f6f6f; font-size: 1vw; line-height: 1.7; } .HR .f1 .itemBox { width: 100%; display: flex; justify-content: space-between; margin-top: 3vw; } .HR .f1 .itemBox .item { width: 32%; height: 21vw; background-color: #ffffff; border-radius: 0.5vw; padding: 2vw; text-align: center; } .HR .f1 .itemBox .item .icon { width: 4.5vw; height: 6vw; margin: 0 auto; } .HR .f1 .itemBox .item .tit { color: #636363; font-size: 1.2vw; font-weight: bold; } .HR .f1 .itemBox .item .info { width: 1vw; height: 2px; margin: 1vw auto 0 auto; background: #00c7a1; } .HR .f1 .itemBox .item .des { height: 3vw; color: #777777; font-size: 0.85vw; margin-top: 2vw; } .HR .f1 .itemBox .item .more { display: block; width: 7vw; height: 2vw; border-radius: 1vw; border: 1px solid #00c7a1; margin: 0 auto; color: #00c7a1; font-size: 0.9vw; line-height: 1.7vw; margin-top: 1vw; transition: .5s all; } .HR .f1 .itemBox .item .more:hover { background: #00c7a1; color: white; } .HR .f1 .itemBox .item .more i { font-size: 1.3vw; position: relative; top: 0.1vw; } .HR .f1 .itemBox .item:nth-child(2) .icon { width: 5vw; } .HR .f1 .itemBox .item:nth-child(3) .icon { width: 3.5vw; } .HR .f2 { width: 100%; height: auto; background: url('../images/renli8.jpg') center no-repeat; background-size: cover !important; padding: 5vw 0; } .HR .f2 .text { text-align: center; } .HR .f2 .text .tit { color: #00c7a1; font-size: 2vw; font-weight: bold; } .HR .f2 .text .des { line-height: 2; color: #777777; font-size: 1vw; margin-top: 2vw; } .HR .f2 .f2Swiper { width: 100%; height: auto; overflow: hidden; margin: 3vw auto; } .HR .f2 .f2Swiper .swiper-slide { transform: scale(0.9); transition: 0.5s all; text-align: center; color: #232323; font-size: 1vw; opacity: 0.5; margin-bottom: 25px; } .HR .f2 .f2Swiper .swiper-slide .img { width: 100%; height: 32vw; background-size: cover !important; margin: 0 auto 1vw auto; } .HR .f2 .f2Swiper .swiper-slide p { opacity: 0; } .HR .f2 .f2Swiper .swiper-slide-active, .HR .f2 .f2Swiper .swiper-slide-duplicate-active { transform: scale(1); opacity: 1; } .HR .f2 .f2Swiper .swiper-slide-active .img, .HR .f2 .f2Swiper .swiper-slide-duplicate-active .img { border: 3px solid #00c7a1; } .HR .f2 .f2Swiper .swiper-slide-active p, .HR .f2 .f2Swiper .swiper-slide-duplicate-active p { opacity: 1; } .HR .f2 .f2Swiper .swiper-pagination { position: relative; bottom: 0px; } .HR .f2 .f2Swiper .swiper-pagination .swiper-pagination-bullet { width: 1vw; height: 5px; border-radius: 3px; background: #00c8a2; } .HR .f2 .f2Swiper .swiper-pagination .swiper-pagination-bullet-active { width: 2vw; } .HR .f2 .f2Swiper .swiper-button-next { top: inherit; margin-top: -1.5vw; right: 29vw; width: 3vw; height: 3vw; background: white; border: 2px solid #00c7a1; border-radius: 50%; transition: 0.3s all; top: 50%; } .HR .f2 .f2Swiper .swiper-button-prev { top: 50%; margin-top: -1.5vw; left: 29vw; width: 3vw; height: 3vw; background: white; border: 2px solid #00c7a1; border-radius: 50%; transition: 0.3s all; } .HR .f2 .f2Swiper .swiper-button-next:after, .HR .f2 .f2Swiper .swiper-button-prev:after { font-size: 1vw; color: #00c7a1; transition: 0.3s all; } .HR .f2 .f2Swiper .swiper-button-prev:hover { background-color: #00c8a2; } .HR .f2 .f2Swiper .swiper-button-prev:hover:after { color: white; } .HR .f2 .f2Swiper .swiper-button-next:hover { background-color: #00c8a2; } .HR .f2 .f2Swiper .swiper-button-next:hover:after { color: white; } .social { background: #f4f4f4; margin-top: 4.5vw; } .social .bannerBox { width: 100%; height: 45vw; margin-top: 4vw; background-size: cover !important; } .social .serachs { width: 100%; background: white; padding: 6vw 0 3vw 0; } .social .serachs .serachBox { width: 1200px; margin: 0 auto; } .social .serachs .serachBox .title { text-align: center; color: #00c7a1; font-size: 2vw; } .social .serachs .serachBox .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .social .serachs .serachBox .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .social .serachs .serachBox .serachItem { width: 100%; display: flex; justify-content: space-between; margin-top: 4vw; } .social .serachs .serachBox .serachItem .item { width: 25%; } .social .serachs .serachBox .serachItem .item .name { color: #383838; font-size: 1vw; } .social .serachs .serachBox .serachItem .item .select { width: 100%; border-radius: 3px; border: solid 1px #d8d8d8; padding: 1vw; margin-top: 1vw; } .social .serachs .serachBox .serachItem .item .select select { width: 100%; outline: none; font-size: 0.9vw; border: transparent; background: transparent; } .social .serachs .serachBox .serachItem .item input { width: 100%; border-radius: 3px; border: solid 1px #d8d8d8; background: transparent; outline: none; padding: 1vw; margin-top: 1vw; font-size: 0.9vw; } .social .serachs .serachBox .serachItem .serachBtn { width: 15%; height: 3vw; background-color: #00c7a1; border-radius: 3vw; line-height: 3vw; text-align: center; font-size: 18px; color: white; margin-top: 2.2vw; cursor: pointer; transition: 0.5s all; } .social .serachs .serachBox .serachItem .serachBtn:hover { border-radius: 0.3vw; } .social .serachList { width: 1200px; margin: 0 auto; padding: 3vw 0 0 0; } .social .serachList .item { background: white; padding: 2vw; margin-bottom: 2vw; } .social .serachList .item:last-child { margin-bottom: 0; } .social .serachList .item .name { color: #636363; font-size: 1.2vw; font-weight: bold; } .social .serachList .item .tabBox { width: 100%; display: inline-block; margin-top: 1vw; } .social .serachList .item .tabBox .tab { color: #bdbdbd; display: inline-block; font-size: 0.9vw; margin-right: 2vw; } .social .serachList .item .tabBox .tab::after { content: ''; position: absolute; width: 2px; height: 1vw; background: gainsboro; margin-left: 1vw; margin-top: 0.15vw; } .social .serachList .item .tabBox .tab:last-child::after { content: inherit; } .social .serachList .item .textBox { width: 100%; border-top: 1px solid gainsboro; margin-top: 1vw; padding: 1vw 0 0 0; display: flex; justify-content: space-between; } .social .serachList .item .textBox .des { width: 80%; color: #555555; font-size: 0.9vw; line-height: 1.7; } .social .serachList .item .textBox .more { display: block; width: 7vw; height: 2vw; border-radius: 1vw; border: 2px solid #00c7a1; text-align: center; line-height: 1.8vw; color: #00c7a1; margin-top: 1vw; transition: 0.5s all; } .social .serachList .item .textBox .more:hover { background: #00c7a1; color: white; } .social .QA { width: 1200px; margin: 0 auto; padding: 0 0 5vw 0; } .social .QA .title { text-align: center; color: #00c7a1; font-size: 2vw; } .social .QA .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .social .QA .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .social .QA .qaBox { margin-top: 1vw; } .social .QA .qaBox .item { margin-top: 2vw; cursor: pointer; } .social .QA .qaBox .item .q { display: flex; justify-content: space-between; padding: 1vw 1vw 1vw 2vw; color: #00c7a1; background: white; } .social .QA .qaBox .item .q .name { font-size: 1vw; font-weight: bold; } .social .QA .qaBox .item .q .name::before { content: ''; width: 2vw; height: 2vw; position: absolute; background: url('../images/renli10.png') center no-repeat; background-size: contain !important; margin-top: -1.5vw; margin-left: -2.5vw; } .social .QA .qaBox .item .q .open { width: 45px; font-size: 14px; display: flex; align-items: center; height: 20px; justify-content: space-between; } .social .QA .qaBox .item .q .open i { position: relative; display: block; font-size: 12px; } .social .QA .qaBox .item .a { /*padding: 2vw;*/ background: white; color: #515151; font-size: 1vw; /*line-height: 1.7;*/ height: 0; opacity: 0; transition: 0.5s all; position: relative; } .social .QA .qaBox .item .a::before { content: ''; position: absolute; width: 0; height: 0; border-width: 0 10px 10px; border-style: solid; border-color: transparent transparent white; margin-top: 0px; top: -10px; } .social .QA .qaBox .active .q .open span i { transform: rotate(180deg); } .social .QA .qaBox .active .a { opacity: 1; margin-top: 2vw; padding: 2vw; height: auto; line-height: 1.7; } .socialDetail { background: #f4f4f4; margin-top: 4vw; } .socialDetail .bannerBox { width: 100%; height: 30vw; background-size: cover !important; } .socialDetail .w1200 { width: 1200px; margin: 0 auto; } .socialDetail .detailBox { width: 100%; margin: 0 auto; padding: 4vw 0; display: inline-block; } .socialDetail .detailBox .left { width: 65%; background: white; padding: 4vw 3vw; display: inline-block; float: left; } .socialDetail .detailBox .left .headBox .head { display: flex; justify-content: space-between; font-size: 1.5vw; } .socialDetail .detailBox .left .headBox .head .tit { color: #222222; } .socialDetail .detailBox .left .headBox .head .salary { color: #00c7a1; } .socialDetail .detailBox .left .headBox .tabBox { width: 100%; display: inline-block; margin-top: 1vw; } .socialDetail .detailBox .left .headBox .tabBox .tab { color: #bdbdbd; display: inline-block; font-size: 0.9vw; margin-right: 2vw; } .socialDetail .detailBox .left .headBox .tabBox .tab::after { content: ''; position: absolute; width: 2px; height: 1vw; background: gainsboro; margin-left: 1vw; margin-top: 0.15vw; } .socialDetail .detailBox .left .headBox .tabBox .tab:last-child::after { content: inherit; } .socialDetail .detailBox .left .desBox { margin-top: 2vw; border-top: 1px solid gainsboro; } .socialDetail .detailBox .left .desBox .item { margin-top: 2vw; } .socialDetail .detailBox .left .desBox .item .tit { color: #242323; font-size: 1vw; } .socialDetail .detailBox .left .desBox .item .tit i { color: #00c7a1; margin-right: 0.5vw; } .socialDetail .detailBox .left .desBox .item .des { color: #505050; font-size: 0.9vw; line-height: 1.7; margin-top: 1vw; } .socialDetail .detailBox .left .deliver { display: block; width: 9vw; height: 2.2vw; line-height: 2.2vw; border-radius: 1vw; text-align: center; color: #00c7a1; font-size: 1vw; border: 1px solid #00c7a1; margin-top: 3vw; transition: 0.5s all; cursor: pointer; } .socialDetail .detailBox .left .deliver:hover { background: #00c7a1; color: white; } .socialDetail .detailBox .right { width: 33%; margin-left: 2%; background: white; display: inline-block; } .socialDetail .detailBox .right .tit { background: #edfbf8; display: flex; justify-content: space-between; padding: 2vw; font-size: 1vw; margin-bottom: 1vw; } .socialDetail .detailBox .right .tit .t { font-weight: bold; } .socialDetail .detailBox .right .tit .more { font-size: 0.9vw; color: #00c7a1; } .socialDetail .detailBox .right .item { padding: 1vw; margin: 0 1vw; display: block; } .socialDetail .detailBox .right .item .name { color: #202020; font-size: 0.9vw; font-weight: bold; } .socialDetail .detailBox .right .item .tabBox { width: 100%; display: inline-block; margin-top: 0.5vw; line-height: 1.7; } .socialDetail .detailBox .right .item .tabBox .tab { color: #bdbdbd; display: inline-block; font-size: 0.85vw; margin-right: 2vw; } .socialDetail .detailBox .right .item .tabBox .tab::after { content: ''; position: absolute; width: 2px; height: 1vw; background: gainsboro; margin-left: 1vw; margin-top: 0.15vw; } .socialDetail .detailBox .right .item .tabBox .tab:last-child::after { content: inherit; } .socialDetail .detailBox .right .item:hover { background: #f9f9f9; } .wall .bannerBox { width: 100%; height: 30vw; background-size: cover !important; margin-top: 84px; } .wall .title { text-align: center; margin: 4vw 0 3vw 0; color: #00c7a1; font-size: 2vw; position: relative; z-index: 2; } .wall .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .wall .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .wallTab { width: 100%; display: inline-block; text-align: center; padding: 1vw 0; position: sticky; top: 4.5vw; background: white; z-index: 22; } .wallTab .item { display: inline-block; width: 9vw; height: 2.2vw; border-radius: 3vw; border: 1px solid #00c7a1; line-height: 2.2vw; font-size: 16px; color: #00c7a1; margin: 0 1vw; } .wallTab .active { background: #00c7a1; color: white; } .wallTab .item:hover { background: #00c7a1; color: white; } .wall .text { margin-top: 3vw; text-align: center; } .wall .text .tit { color: #333333; font-size: 28px; } .wall .text .des { line-height: 2; color: #626262; font-size: 16px; margin-top: 2vw; } .wall .wallBox { margin-bottom: 5vw; } .wall .wallBox .item { display: flex; padding-top: 5vw; } .wall .wallBox .item .imgBox { width: 70vw; height: 38vw; overflow: hidden; } .wall .wallBox .item .imgBox .img { width: 70vw; height: 38vw; background-size: cover !important; } .wall .wallBox .item .imgBox::after { position: absolute; content: ""; width: 100%; height: 100%; z-index: 10; left: 0; top: 0; background-color: #ffffff; transition: all 1s; } .wall .wallBox .item .textBox { width: 25vw; padding-left: 6vw; padding-top: 10vw; padding-right: 6vw; } .wall .wallBox .item .textBox .tit { color: #00c7a1; } .wall .wallBox .item .textBox .tit .cn { font-size: 28px; margin-bottom: 0.7vw; } .wall .wallBox .item .textBox .tit .en { font-size: 16px; } .wall .wallBox .item .textBox .des { color: #686868; font-size: 16px; line-height: 2; margin-top: 2vw; text-align: justify; } .wall .wallBox .item .textBox .more { display: block; width: 9vw; height: 2.2vw; border-radius: 3px; text-align: center; line-height: 2.2vw; font-size: 14px; color: #00c7a1; background: rgba(0, 199, 161, 0.05); border: 1px solid #00c7a1; margin-top: 4vw; transition: .5s all; } .wall .wallBox .item .textBox .more:hover { background: #0fc096; color: white; } .wall .wallBox .active .imgBox::after { height: 0; } .wall .wallDetail { padding: 0 6vw 5vw 6vw; display: inline-block; } .wall .wallDetail .item { width: 42vw; height: 30vw; overflow: hidden; display: inline-block; float: left; margin-right: 2vw; margin-bottom: 2vw; cursor: pointer; } .wall .wallDetail .item img { width: 42vw; height: 30vw; background-size: cover !important; transition: .5s all; } .wall .wallDetail .item:hover img { transform: scale(1.1); } .wall .wallDetail .item:nth-child(2n) { margin-right: 0; } .school { background: #f4f4f4; } .school .bannerBox { width: 100%; height: 55vw; margin-top: 4vw; background-size: cover !important; } .school .serachs { width: 100%; background: white; padding: 6vw 0 3vw 0; } .school .serachs .stroke { width: 1300px; margin: 0 auto; } .school .serachs .stroke .title { text-align: center; color: #00c7a1; font-size: 2vw; } .school .serachs .stroke .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .school .serachs .stroke .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .school .serachs .stroke .strokeTab { width: 100%; display: inline-block; text-align: center; margin: 0 auto; } .school .serachs .stroke .strokeTab .item { display: inline-block; color: #656565; font-size: 1vw; margin: 1vw; cursor: pointer; } .school .serachs .stroke .strokeTab .item::after { content: ''; position: absolute; width: 2px; height: 1vw; background: gainsboro; margin-left: 1vw; margin-top: 0.15vw; } .school .serachs .stroke .strokeTab .item:last-child::after { content: inherit; } .school .serachs .stroke .strokeTab .active { color: #00c7a1; } .school .serachs .stroke .cq, .school .serachs .stroke .xa { display: none; } .school .serachs .stroke .serachsSwiper { width: 1200px; height: 13vw; margin-top: 1vw; margin-bottom: 5vw; padding: 0 1vw; display: none; } .school .serachs .stroke .serachsSwiper .swiper-slide { padding-top: 1vw; } .school .serachs .stroke .serachsSwiper .swiper-slide .item { width: 100% !important; height: 9vw !important; box-shadow: 0 1px 10px 0 gainsboro; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .name { color: #636363; font-size: 1vw; font-weight: bold; padding: 1vw 2vw; background: #f1fcfa; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .text { padding: 1vw 2vw; color: #787878; font-size: 0.9vw; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .text .time { margin-bottom: 0.5vw; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .text i { color: #00c7a1; } .school .serachs .stroke .serachsSwiper .swiper-pagination-bullet { background: #00c7a1; } .school .serachs .serachBox { width: 1200px; margin: 0 auto; } .school .serachs .serachBox .title { text-align: center; color: #00c7a1; font-size: 2vw; } .school .serachs .serachBox .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .school .serachs .serachBox .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .school .serachs .serachBox .serachItem { width: 100%; display: flex; justify-content: space-between; margin-top: 4vw; } .school .serachs .serachBox .serachItem .item { width: 25%; } .school .serachs .serachBox .serachItem .item .name { color: #383838; font-size: 1vw; } .school .serachs .serachBox .serachItem .item .select { width: 100%; height: 3vw; border-radius: 3px; border: solid 1px #d8d8d8; padding: 1vw; margin-top: 1vw; } .school .serachs .serachBox .serachItem .item .select select { width: 100%; outline: none; font-size: 0.9vw; border: transparent; background: transparent; } .school .serachs .serachBox .serachItem .item input { width: 100%; height: 3vw; border-radius: 3px; border: solid 1px #d8d8d8; background: transparent; outline: none; padding: 1vw; margin-top: 1vw; font-size: 0.9vw; } .school .serachs .serachBox .serachItem .serachBtn { width: 15%; height: 3vw; background-color: #00c7a1; border-radius: 3vw; line-height: 3vw; text-align: center; font-size: 0.9vw; color: white; margin-top: 2.2vw; cursor: pointer; transition: 0.5s all; } .school .serachs .serachBox .serachItem .serachBtn:hover { border-radius: 0.3vw; } .school .serachList { width: 1200px; margin: 0 auto; padding: 3vw 0 0 0; } .school .serachList .item { background: white; padding: 2vw; margin-bottom: 2vw; } .school .serachList .item:last-child { margin-bottom: 0; } .school .serachList .item .name { color: #202020; font-size: 1.2vw; font-weight: bold; } .school .serachList .item .tabBox { width: 100%; display: inline-block; margin-top: 1vw; } .school .serachList .item .tabBox .tab { color: #bdbdbd; display: inline-block; font-size: 0.9vw; margin-right: 2vw; } .school .serachList .item .tabBox .tab::after { content: ''; position: absolute; width: 2px; height: 1vw; background: gainsboro; margin-left: 1vw; margin-top: 0.15vw; } .school .serachList .item .tabBox .tab:last-child::after { content: inherit; } .school .serachList .item .textBox { width: 100%; border-top: 1px solid gainsboro; margin-top: 1vw; padding: 1vw 0 0 0; display: flex; justify-content: space-between; } .school .serachList .item .textBox .des { width: 80%; color: #555555; font-size: 0.9vw; line-height: 1.7; } .school .serachList .item .textBox .more { display: block; width: 7vw; height: 2vw; border-radius: 1vw; border: 2px solid #00c7a1; text-align: center; line-height: 1.8vw; color: #00c7a1; margin-top: 1vw; transition: 0.5s all; } .school .serachList .item .textBox .more:hover { background: #00c7a1; color: white; } .school .QA { width: 1200px; margin: 0 auto; padding: 0 0 5vw 0; } .school .QA .title { text-align: center; color: #00c7a1; font-size: 2vw; } .school .QA .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .school .QA .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .school .QA .qaBox { margin-top: 1vw; } .school .QA .qaBox .item { margin-top: 2vw; cursor: pointer; } .school .QA .qaBox .item .q { display: flex; justify-content: space-between; padding: 1vw 1vw 1vw 2vw; color: #00c7a1; background: white; } .school .QA .qaBox .item .q .name { font-size: 1vw; font-weight: bold; } .school .QA .qaBox .item .q .name::before { content: ''; width: 2vw; height: 2vw; position: absolute; background: url('../images/renli10.png') center no-repeat; background-size: contain !important; margin-top: -1.5vw; margin-left: -2.5vw; } .school .QA .qaBox .item .q .open { width: 45px; font-size: 14px; display: flex; align-items: center; height: 20px; justify-content: space-between; } .school .QA .qaBox .item .q .open i { position: relative; display: block; font-size: 12px; } .school .QA .qaBox .item .a { /*padding: 2vw;*/ background: white; color: #515151; font-size: 1vw; line-height: 1.7; opacity: 0; height: 0; transition: 0.5s all; } .school .QA .qaBox .item .a::before { content: ''; position: absolute; width: 0; height: 0; border-width: 0 1.8vw 1.8vw; border-style: solid; border-color: transparent transparent white; margin-top: -3.5vw; } .school .QA .qaBox .active .q .open span i { transform: rotate(180deg); } .school .QA .qaBox .active .a { height: auto; opacity: 1; padding: 2vw; margin-top: 2vw; } .school .process { width: 100%; margin: 0 auto; background: transparent; padding: 0 0 5vw 0; } .school .process .title { text-align: center; color: #00c7a1; font-size: 2vw; } .school .process .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .school .process .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .school .process img { width: 80vw; margin: 0 auto; } .school .cooperation { width: 1200px; margin: 0 auto; padding: 0 0 5vw 0; } .school .cooperation .title { text-align: center; color: #00c7a1; font-size: 2vw; } .school .cooperation .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .school .cooperation .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .school .cooperation .cooperationBox { width: 100%; display: inline-block; margin-top: 4vw; } .school .cooperation .cooperationBox .item { width: calc(20% - 12px); display: inline-block; float: left; margin-right: 15px; margin-bottom: 15px; } .school .cooperation .cooperationBox .item:nth-child(5n) { margin-right: 0; } .development { margin-top: 4.5vw; } .development .bannerBox { width: 100%; height: 45vw; margin-top: 4vw; background-size: cover !important; } .development .f1 { width: 1200px; margin: 0 auto; padding-bottom: 5vw; } .development .f1 .title { text-align: center; margin: 4vw 0; color: #00c7a1; font-size: 2vw; } .development .f1 .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .development .f1 .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .development .f2 { width: 100%; height: auto; background: url('../images/renli15.jpg') center no-repeat; background-size: cover !important; padding: 4vw 0; } .development .f2 .title { text-align: center; color: #00c7a1; font-size: 2vw; } .development .f2 .title::before { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: -4vw; } .development .f2 .title::after { content: ''; position: absolute; width: 2vw; height: 1px; background: #00c7a1; margin-top: 1.4vw; margin-left: 1.5vw; } .development .f2 .w1200 { width: 1200px; margin: 0 auto; } .development .f2 .f2Box { display: flex; margin-top: 3vw; } .development .f2 .f2Box .item { width: 33%; height: 15rem; background-size: contain !important; text-align: center; margin-right: 1.5vw; } .development .f2 .f2Box .item .tit { color: #363636; font-size: 26px; margin-top: 6rem; margin-bottom: 1vw; } .development .f2 .f2Box .item .des { color: #777777; line-height: 2; font-size: 16px; } .development .f2 .f2Box .item:last-child { margin-right: 0; } .development .f2 .info { width: 100%; padding: 1.5vw 0; text-align: center; color: #00c7a1; background: white; display: block; font-size: 24px; margin-bottom: 1vw; border-radius: 5px; overflow: hidden; } .freeAppointment2 { position: fixed; right: 6%; overflow: hidden; top: 40%; transition: ease 0.4s; border-radius: 10px; width: 0; padding-right: 0; opacity: 0; visibility: hidden; } .freeAppointmentOver2 { width: 300px; position: relative; background: white; padding: 24px; } .freeAppointmentOver2:after { content: ''; position: absolute; top: 12%; right: -20px; width: 0; height: 0; border: 11px solid; border-color: transparent transparent transparent white; } .freeAppointment2.active { width: 315px; padding-right: 15px; opacity: 1; visibility: visible; } .freeAppointment2 .btnOff { position: absolute; right: 10px; top: 10px; color: #fff; font-size: 16px; cursor: pointer; transition: ease 0.4s; } .freeAppointmentOver2 .item { margin-bottom: 10px; } .freeAppointmentOver2 .item .tit { color: #303030; font-size: 18px; font-weight: bold; } .freeAppointmentOver2 .item .tit i { color: #00c7a1; margin-right: 3px; margin-bottom: 5px; } .freeAppointmentOver2 .item:nth-child(2) { margin-bottom: 0; } .freeAppointmentOver2 .item:nth-child(2) i { font-size: 20px; } .freeAppointmentOver2 .item .des { color: #727272; line-height: 1.7; font-size: 16px; padding-left: 28px; } @keyframes buzz { 5% { transform: translateX(-3px) rotate(-2deg); } 7.5% { transform: translateX(3px) rotate(2deg); } 10% { transform: translateX(-3px) rotate(-2deg); } 12.5% { transform: translateX(2px) rotate(1deg); } 15% { transform: translateX(-2px) rotate(-1deg); } 17.5% { transform: translateX(2px) rotate(1deg); } 20% { transform: translateX(-2px) rotate(-1deg); } 22.5% { transform: translateX(1px) rotate(0); } 25% { transform: translateX(-1px) rotate(0); } } .phoneBoxModal { position: fixed; top: 40%; right: 2%; z-index: 9; } .phoneBoxModal .phone { width: 56px; height: 56px; background-color: #ffffff; border-radius: 50%; color: #00c7a1; font-size: 28px; text-align: center; line-height: 56px; cursor: pointer; box-shadow: 0 1px 10px 0 grey; } .phoneBoxModal .phone::before { content: ''; position: absolute; width: 68px; height: 68px; background: rgba(255, 255, 255, .4); border-radius: 50%; margin-left: -20px; margin-top: -5px; } .renziFooter { width: 100%; background: #22cdab; padding: 35px 0; } .renziBox { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; } .renziBox .qrcodeBox { display: flex; } .renziBox .qrcodeBox .qrcode { width: 130px; text-align: center; font-size: 14px; color: white; } .renziBox .qrcodeBox .qrcode:first-child { margin-right: 20px; } .renziBox .qrcodeBox .qrcode img { margin-bottom: 5px; } .renziBox .phoneBox { text-align: center; color: white; } .renziBox .phoneBox:nth-child(2) { border-left: 1px solid #91e6d5; border-right: 1px solid #91e6d5; padding: 0 120px; } .renziBox .phoneBox .tit { font-size: 24px; font-weight: bold; } .renziBox .phoneBox .address { font-size: 16px; margin: 15px 0; } .renziBox .phoneBox .phone { font-size: 26px; display: block; } .resumeModal { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .5); opacity: 0; transition: .5s all; pointer-events: none; } .resumeModal.active { opacity: 1; pointer-events: all; } .resumeModal .resumeBox { position: absolute; top: 50%; left: 50%; box-sizing: border-box; padding: 3vw 3vw 6vw 3vw; width: 60%; background-color: #fff; transform: translate(-50%, -50%); } .resumeModal .resumeBox .close { position: absolute; font-size: 26px; right: 1vw; top: 1vw; cursor: pointer; } .resumeModal .resumeBox .tit { font-size: 32px; color: #00c7a1; text-align: center; } .resumeModal .resumeBox form { width: 100%; display: inline-block; } .resumeModal .resumeBox form .inputBox { width: 50%; display: inline-block; float: left; margin-top: 2vw; } .resumeModal .resumeBox form .inputBox .name { display: inline-block; float: left; font-size: 16px; width: 6vw; position: relative; top: .3vw; } .resumeModal .resumeBox form .inputBox .name span { content: '*'; color: red; position: absolute; margin-left: -3px; } .resumeModal .resumeBox form .inputBox input { display: inline-block; width: 15vw; height: 2vw; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; text-indent: 1vw; } .resumeModal .resumeBox form .inputBox input:focus { border: 1px solid #0fc096; } .resumeModal .resumeBox form .inputBox select { display: inline-block; width: 15vw; height: 2vw; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; text-indent: 1vw; } .resumeModal .resumeBox form .inputBox .file { opacity: 0; } .resumeModal .resumeBox form .inputBox .up { width: 15vw; height: 2vw; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; text-indent: 1vw; position: absolute; margin-left: 6vw; color: #cccccc; line-height: 2vw; } .resumeModal .resumeBox form .inputBox .up i { font-size: 1vw; position: absolute; padding-right: 1vw; right: 0; } .resumeModal .resumeBox .resumeBtn { width: 10vw; height: 3vw; line-height: 3vw; font-size: 16px; color: white; margin: 0 auto; border-radius: 5px; text-align: center; background: #00c7a1; clear: both; cursor: pointer; position: relative; top: 3vw; } /* 閫氱敤鍒嗛〉鏍峰紡 */ #page { padding: 3vw 0 5vw 0; display: block; text-align: center; } #page li { display: inline-block; min-width: 40px; height: auto; cursor: pointer; color: #666; font-size: 14px; line-height: 38px; background-color: transparent; border: 1px solid transparent; text-align: center; margin: 0 4px; -webkit-appearance: none; } .xl-nextPage, .xl-prevPage { width: 60px; color: #00c7a1; height: 28px; } #page li.xl-nextPage, #page li.xl-prevPage { display: none; } #page li.xl-disabled { opacity: .5; cursor: no-drop; } #page li.xl-disabled:hover { background-color: #f9f9f9 !important; border: 1px solid #dce0e0 !important; color: #666 !important; } #page li.xl-active { background-color: #00c7a1; border-color: transparent; color: #fff; } #page li:hover { background-color: #00c7a1 !important; border-color: #00c7a1; color: #FFF } #page li.xl-jumpText { background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); opacity: 1; } #page li.xl-jumpText:hover { background-color: rgba(0, 0, 0, 0) !important; border-color: rgba(0, 0, 0, 0) !important; } #page li.xl-jumpButton { padding: 0 5px; } .freeAppointment::before{ position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; background: url(../images/freeAppointmentBg.jpg) center/cover; content: ''; border-radius: 5%; z-index: 3; } .freeAppointment::after{ position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; border-radius: 5%; content: ''; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.5); pointer-events: none; -webkit-transform: rotate(0deg); -webkit-transition: all .5s ease .45s; } .freeAppointment.active::after{ -webkit-transform: rotate(5deg); } .freeAppointment .formBox input::-webkit-input-placeholder { color: #878787; } .freeAppointment { position: fixed; right: 100px; width: 300px; top: 50%; -webkit-transform: translateY(-50%); height: auto; transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1); padding: 40px 25px; z-index: 999; opacity: 0; visibility: hidden; } .freeMask{ width: 100%; height: 100vh; position: fixed; left: 0%; top: 0%; background: rgba(0, 0, 0, .5); pointer-events: none; -webkit-transition: all .45s; opacity: 0; visibility: hidden; z-index: 900; } .freeMask.active{ opacity: 1; visibility: visible; } .freeAppointment::before { position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; background: url(../images/freeAppointmentBg.jpg) center/cover; content: ''; border-radius: 5%; z-index: 3; } .freeAppointment.active { right: 140px; opacity: 1; visibility: visible; } .freeAppointment .btnOff { position: absolute; color: #0fc096; font-size: 16px; cursor: pointer; width: 35px; height: 35px; text-align: center; border-radius: 50%; line-height: 35px; right: 5px; z-index: 5; top: 5px; -webkit-transition: all .45s; } .freeAppointment .btnOff:hover{ -webkit-transform: rotate(45deg); } .freeAppointment .title { display: flex; justify-content: space-between; position: relative; z-index: 5; flex-wrap: wrap; margin-bottom: 25px; } .freeAppointment .name { width: 100%; text-align: center; color: #6d6d6d; font-size: 18px; margin-bottom: 1vw; font-weight: bold; } .freeAppointment .round { font-size: 14px; color: #3dc7a0; } .freeAppointment .round i { width: 55px; height: auto; display: block; position: relative; margin-bottom: 5px; } .freeAppointment .round i img { width: 100%; display: block; } .freeAppointment .formBox { overflow: hidden; position: relative; z-index: 5 } .freeAppointment .formBox .input+.input { margin-top: 10px } .freeAppointment .formBox input { line-height: 45px; height: 45px; border: none; width: 100%; background: #e3f7f1; display: block; padding-left: 15px; border-radius: 5px; } .freeAppointment .btnSubmit { width: 140px; height: auto; line-height: 40px; margin: 0 auto; display: block; text-align: center; background: rgba(61, 199, 160, .1); border: 1px solid #49caa5; color: #49caa5; border-radius: 4px; margin-top: 25px; cursor: pointer; font-size: 14px; font-weight: bold; } .freeAppointment .btnSubmit:hover{ background: #49caa5; color: #fff; } .pc { display: block; } .mobile { display: none; } .header { width: 100%; display: flex; position: fixed; top: 0; padding: 0 3%; justify-content: space-between; align-items: center; -webkit-transition: all .5s; z-index: 400; background: #fff; } .header.active2 { background: transparent; } .header.active2 .nav ul li a { color: white; } .header.active { background: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,.05); } .header .nav ul li a { color: #3e3e3e; -webkit-transition: all .45s; } .header.active .nav ul li a { color: #3e3e3e; } .header.active .nav ul li a:hover { color: #00c7a1; } .nav ul li ul { width: 100%; position: absolute; display: block; background: white; opacity: 0; pointer-events: none; transition: .5s all; border: 1px solid rgba(0, 0, 0, 0.05); border-top: transparent; } .nav ul li.has2.active ul { opacity: 1; pointer-events: all; } .nav ul li ul li { width: 100%; margin: 0; } .nav ul li ul li a { line-height: inherit; justify-content: inherit; display: block; padding: .8vw 0; color: #3e3e3e; } .nav ul li a:hover span:nth-child(2) { animation-delay: .02s; } .nav ul li a:hover span:nth-child(3) { animation-delay: .04s; } .nav ul li a:hover span:nth-child(4) { animation-delay: .06s; } @keyframes buttonHoverKey { 0% { opacity: 1; transform: translateY(0%); } 40% { opacity: 0; transform: translateY(-10%); } 40.5% { opacity: 0; transform: translateY(30%); } 100% { opacity: 1; transform: translateY(0%); } } .subHeader { width: 100%; height: 0px; position: fixed; left: 0%; top: 0%; -webkit-transition: all .55s ease; opacity: 0; visibility: hidden; padding-top: 85px; background: #fff; padding-bottom: 85px; pointer-events: none; z-index: 400; } .subHeader.active { height: 536px; opacity: 1; visibility: visible; pointer-events: all; } .subMenuBar { width: 100%; height: 90px; position: absolute; left: 0%; bottom: 0%; background: #f8f8f8; display: flex; justify-content: center; } .subMenuBar a:hover { color: #2cc9a1; } .subMenuBar a { position: relative; display: flex; align-items: center; margin-right: 15px; margin-left: 15px; } .subMenuBar a.jj .icon { background-position: 0px 0px; } .subMenuBar a.bx .icon { background-position: -40px 0px; } .subMenuBar a.cx .icon { background-position: -80px 0px; } .ligtboxw{ width: 100%; height: 100%; position: fixed; left: 0%; top: 0%; background: rgba(255,255,255,.9); } .ligtboxw .lbox{ width: 800px; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); background-color: #fff; border: 10px solid #f3f3f3; box-shadow: 0px 0px 20px 10px #d3d3d3; padding: 50px 0px; } .lbox .formBox{ width: 100%; padding: 0px 10%; display: flex; flex-wrap: wrap; justify-content: space-between; } .lbox .formBox .input{ width: 48%; height: auto; line-height: 1; border: 0px; } .lbox .formBox .input input{ height: 50px; width: 100%; border: none; outline: none; color: #666; font-size: 16px; background-color: #f5f5f5; border-radius: 5px; text-indent: 20px; } .sjSubmit{ width: 170px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 16px; border-radius: 5px; background-color: #2fc7a0; margin: auto; margin-top: 40px; cursor: pointer; } .li_close{ width: 36px; height: 36px; background: #3dbfa0 url(../images/closeico.png) no-repeat center center; background-size: 20px; border-radius: 20px; position: fixed; right: -50px; top: -40px; cursor: pointer; } .lbox .name{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 35px; } .lbox .name .img{ width: 140px; height: auto; } .lbox .txt{ text-align: center; font-size: 18px; width: 100%; margin-top: 15px; } .subMenuBar a .icon { width: 40px; height: 40px; position: relative; background: url(../images/menu_icon.png) no-repeat; } .subMenuBar a.sj .icon{ background: transparent; padding: 2px; } .subMenuBar a p { display: block; width: 70px; line-height: 40px; font-size: 16px; margin-left: 5px; } .subNav { width: 100%; height: auto; position: relative; padding: 0px 3%; } .subNav ul { display: flex; opacity: 0; visibility: hidden; justify-content: center; width: 100%; height: auto; position: absolute; left: 0%; top: 0%; padding: 0px 3%; } .subNav ul li { width: calc(100% / 8); margin-left: 0.5vw; margin-right: 0.5vw; position: relative; opacity: 0; -webkit-transform: translateY(5%); } .subNav ul.active li { opacity: 1; -webkit-transform: translateY(0%); -webkit-transition: all .5s; } .subNav ul.active li:nth-child(2) { -webkit-transition: all .5s ease .1s; } .subNav ul.active li:nth-child(3) { -webkit-transition: all .5s ease .2s; } .subNav ul.active li:nth-child(4) { -webkit-transition: all .5s ease .3s; } .subNav ul.active li:nth-child(5) { -webkit-transition: all .5s ease .4s; } .subNav ul.active li:nth-child(6) { -webkit-transition: all .5s ease .5s; } .subNav ul.active li:nth-child(7) { -webkit-transition: all .5s ease .6s; } .subNav ul li a { display: block; width: 100%; line-height: 40px; position: relative; font-size: 16px; color: #7a7a7a; -webkit-transition: all .35s; } .subNav ul li a:hover, .subNav ul li a:first-child:hover { color: #2cc9a1; } .subNav ul li a:first-child { color: #3e3e3e; font-size: 18px; /*font-weight: bold;*/ position: relative; line-height: 65px; border-bottom: 1px solid rgba(0, 0, 0, .05); margin-bottom: 10px; } .subNav ul.active { opacity: 1; visibility: visible; } .logo { width: 200px; position: relative; } .socail { width: 200px; display: flex; justify-content: space-between; align-items: center; } .socail a, .socail .a { width: 35px; height: 35px; border-radius: 50%; position: relative; display: block; background: rgba(255, 255, 255, .1); } .socail a .kf_tel { position: absolute; width: 80px; height: auto; background: #fff; padding: 6px 10px; font-size: 14px; left: 50%; margin-left: -40px; text-align: center; top: 50px; box-shadow: 0px 0px 10px rgba(0, 0, 0, .1); border-radius: 4px; line-height: 1.4; padding-top: 8px; color: #2cc9a1; opacity: 0; visibility: hidden; -webkit-transition: all .5s; } .socail a:nth-child(1) .kf_tel{ width: 120px; margin-left: -60px; } .socail a:hover .kf_tel { opacity: 1; visibility: visible; top: 45px; } .socail a .kf_tel::after { width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; position: absolute; left: 50%; margin-left: -5px; top: -5px; content: ''; } .socail .hz img { position: absolute; width: 120px; height: auto; left: 50%; -webkit-transform: translateX(-50%); top: 50px; max-width: none; pointer-events: none; opacity: 0; box-shadow: 0 0 30px rgb(0 0 0 / 10%); transition: .5s all; } .socail .hz:hover img { opacity: 1; pointer-events: all; } .socail a::before, .socail .a::before { width: 100%; height: 100%; background: #2cc9a1; position: absolute; left: 0%; top: 0%; content: ''; -webkit-transition: all .35s; -webkit-transform: scale(0); opacity: 0; border-radius: 50%; } .socail a:hover::before, .socail .a:hover::before { -webkit-transform: scale(1); opacity: 1; } .header.active .socail a:hover::before {} .header.active .socail a, .header.active .socail .a { background: rgba(0, 0, 0, .03); } .socail .icon { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; cursor: pointer; } .socail .icon::after { width: 35px; height: 35px; position: absolute; left: 0px; top: 0px; content: ''; background: url(../images/so_icon.png) no-repeat; background-size: 200% auto; } .header.active .socail .kf .icon::after { background-position: -35px 0px; } .header.active .socail .kf:hover .icon::after { background-position: 0px 0px; } .socail .yy .icon::after { background-position: 0px -35px; } .header.active .socail .yy:hover .icon::after { background-position: 0px -35px; } .header.active .socail .yy .icon::after { background-position: -35px -35px; } .socail .hz .icon::after { background-position: 0px -70px; } .header.active .socail .hz:hover .icon::after { background-position: 0px -70px; } .header.active .socail .hz .icon::after { background-position: -35px -70px; } .header.active .socail .dh:hover .icon::after { background-position: 0px -105px; } .socail .dh .icon::after { background-position: 0px -105px; } .header.active .socail .dh .icon::after { background-position: -35px -105px; } .nav { width: calc(100% - 500px); } .nav ul { width: 100%; display: flex; justify-content: space-between; } .nav ul li { width: calc(100% / 7); position: relative; } .nav ul li a { width: 100%; display: block; position: relative; text-align: center; line-height: 35px; font-size: 16px; /*font-weight: bold;*/ color: #fff; display: flex; justify-content: center; padding: 25px 0px; } .footer { width: 100%; height: auto; position: relative; padding: 40px 3%; display: flex; align-items: center; border-top: 1px solid rgba(0, 0, 0, .05); } .footer .L, .footer .R { width: 25%; position: relative; } .flogo { margin-bottom: 35px; display: block; } .address { width: 100%; font-size: 14px; } .address p { margin-bottom: 15px; } .address p:last-child { margin-bottom: 0px; color: #c0c0c0; } .features { width: 100%; display: flex; justify-content: space-between; text-align: center; margin-bottom: 25px; } .features a::after { width: 1px; height: 100%; position: absolute; right: 0%; top: 0%; content: ''; background: rgba(0, 0, 0, .05); } .features a:last-child::after { display: none; } .features a, .footer .C .link a { display: block; width: 25%; position: relative; } .footer .C .link a { text-align: center; opacity: .7; } .footer .C .link a:hover { opacity: 1; } .features i { width: 50px; line-height: 50px; font-size: 36px; display: block; margin: 0px auto; } .features span { display: block; width: 100%; font-size: 14px; opacity: .7; } .features span:hover { color: #00c7a1; } .footer .C .link { width: 100%; height: auto; display: flex; justify-content: space-between; font-size: 14px; } .footer .C { width: calc(75% - 360px); position: relative; padding: 0px 5%; border-left: 1px solid rgba(0, 0, 0, .05); border-right: 1px solid rgba(0, 0, 0, .05); display: flex; justify-content: space-between; align-items: center; } .footer .cr { width: 120px; text-align: center; font-size: 14px; } .footer .cr img { margin-bottom: 5px; } .footer .cr p{ opacity: .7; } .footer .cl { width: calc(100% - 200px); } .footer .R { width: 360px; padding-left: 5%; } .footer .R .link { width: 100%; height: auto; display: flex; justify-content: space-between; margin-bottom: 15px; } .footer .R .link a .WeChat { position: absolute; width: 120px; height: auto; left: 50%; -webkit-transform: translateX(-50%); top: -130px; max-width: none; display: none; box-shadow: 0px 0px 30px rgb(0 0 0 / 10%); } .footer .R .link a:hover .WeChat { display: block; } .footer .R .link a { display: block; width: 40px; height: 40px; position: relative; } .footer .R .Mall { width: 100%; height: auto; position: relative; font-size: 14px; } .footer .R .Mall p { color: #9b9b9b; } .footer .R .Mall a { color: #2cc9a1; font-family: avant; font-size: 36px; } .search_bto.store { height: auto; padding: 20px 0px; background: transparent; } .sear_nav { width: 100%; display: flex; justify-content: center; } .sear_nav a { display: block; width: 150px; height: auto; line-height: 45px; text-align: center; border: 1px solid #3dc7a0; color: #3dc7a0; border-radius: 50px; margin: 0px 10px; font-size: 16px; } .keyword-box { width: 720px; margin: auto; } .k-box { display: flex; width: 100%; justify-content: center; margin-top: 16px; } .k-box input { width: 515px; height: 46px; background-color: #FFFFFF; border-radius: 5px; margin-right: 10px; font-size: 16px; text-indent: 15px; background: #f7f7f7; color: #3e3e3e; border: none; } .k-box .key-submit { width: 178px; color: #525252; background-color: #fff; height: 46px; font-size: 16px; text-align: center; line-height: 46px; border-radius: 5px; cursor: pointer; color: #fff; background-color: #2fc7a0; border: none; } .city-box, .keyword-box { display: none; } .city-box.active, .keyword-box.active { display: block; } .bug_select .search_bto.store .sear_box .s_input_btn{ color: #fff; background-color: #2fc7a0; border: none; } .bug_select .search_bto.store .s_input_box select{ background: #f7f7f7; color: #3e3e3e; } .sear_nav a.active { background-color: #2fc7a0; color: #fff; } ._mLR30 { margin-left: 30px; margin-right: 30px } ._pLR30 { padding-left: 30px; padding-right: 30px } ._pTB50 { padding-top: 50px; padding-bottom: 50px } ._font16 { font-size: 16px } ._font18 { font-size: 18px } ._font20 { font-size: 20px } ._font24 { font-size: 24px } ._font30 { font-size: 30px } ._font36 { font-size: 36px } ._font46 { font-size: 46px } ._font60 { font-size: 60px } ._BG2fc7a0 { background: #2fc7a0 } ._COLOR2fc7a0 { color: #2fc7a0 } .layer_div .layer { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); } ._COLOR939393 { color: #939393 } ._more { width: 115px; line-height: 32px; display: block; border: 2px solid #2fc7a0; color: #2fc7a0; border-radius: 25px; margin: 0 auto; background: rgba(47, 199, 160, 0); text-align: center; transition: ease .4s } ._pageTitle { text-align: center; position: relative; font-weight: 100; color: #939393 } ._pageTitle span { display: block; width: 205px; margin: 0 auto; position: relative } ._pageTitle span:after, ._pageTitle span:before { content: ''; position: absolute; width: 28px; height: 1px; background: #d4d4d4; top: 50% } ._pageTitle span:after { left: 100% } ._pageTitle span:before { right: 100% } ._pageTitle p { font-weight: 700; text-transform: uppercase; line-height: 3 } ._pageTitle h3 { color: #1b1b1b; font-weight: lighter } ._titlePlate { text-align: center } ._titlePlate .en { font-size: 16px; text-transform: uppercase } ._titlePlate h3 { font-size: 30px; color: #4e4e4e; font-weight: inherit; display: inline-block; padding: 0 20px; position: relative } ._titlePlate span { background: #e3e3e3; height: 1px; width: 30vw; position: absolute; display: block; top: 50% } ._titlePlate span:after { content: ''; height: 3px; width: 60px; background: #bfbfbf; position: absolute; top: 50%; transform: translateY(-50%) } ._titlePlate .lineL { right: 100% } ._titlePlate .lineR { left: 100% } ._titlePlate .lineL:after { right: 0 } ._titlePlate .lineR:after { left: 0 } ._listRaiders ul { width: 100%; height: 100%; position: relative; z-index: 5 } ._listRaiders li { position: relative; width: 100% } ._listRaiders li>a { display: flex; flex-wrap: wrap; position: relative; padding: 40px 25px; height: 100%; align-items: center } ._listRaiders li:after { content: ''; position: absolute; top: 0; left: 20px; height: 1px; background: #e8e8e8; width: calc(100% - 40px) } ._listRaiders li:nth-child(1):after { opacity: 0 } ._listRaiders li .icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 41px; color: #2fc7a0 } ._listRaiders .L { width: 79%; display: flex; flex-wrap: wrap } ._listRaiders .style { color: #363636; display: inline-block; padding-right: 10px; margin-right: 10px; border-right: 1px solid #363636; transition: ease .4s } ._listRaiders .title { width: 100%; color: #737373; margin-top: 20px; transition: ease .4s } ._listRaiders .L span { color: rgba(54, 54, 54, .4); transition: ease .4s } ._listRaiders .icon { width: 21%; text-align: center; display: flex; align-items: center; justify-content: center; align-content: center; font-size: 30px; color: #2fc7a0 } ._listRaiders .description { color: #828282; margin: 20px auto 15px; height: 22px; overflow: hidden; transition: ease .4s } .RBox ._listRaiders ul { float: right } .RBox ._listRaiders .L { width: 100% } .pageSet .setList { margin-top: 30px } .pageSet .setList>li { position: relative } .pageSet .setList .pic { position: relative; overflow: hidden } .pageSet .setList .pic img { width: 100% } .pageSet .setList .setListDetails { padding: 50px 0 70px } .pageSet .setList .content { display: flex; flex-wrap: wrap } .pageSet .setList li:nth-child(2n) .content { flex-direction: row-reverse } .pageSet .setList li:nth-child(2n) .content .R { right: auto; left: 0 } .pageSet .setList li:nth-child(2n) .content .L { justify-content: flex-end } .pageSet .setList .L { width: 50%; color: #7e7e7e; line-height: 2; display: flex; align-items: center } .pageSet .setList .L .text { width: 90% } .pageSet .setList .R { width: 50%; border-radius: 15px; transform: translateY(-145px); position: absolute; right: 0; overflow: hidden } .pageSet .setList .L .title { color: #7e7e7e; font-weight: inherit } .pageSet .setList .L .summary { color: #7e7e7e; line-height: 2 } .pageSet .setList .R .title { line-height: 55px; border-bottom: 1px solid #2fc7a0; display: flex; justify-content: space-between; color: #fff; font-weight: inherit; background: rgba(47, 199, 160, .9); padding: 20px 60px 0; flex-wrap: wrap } .pageSet .setList .R .title span { text-transform: uppercase; } .pageSet .setList .R .style { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; font-size: 16px; padding: 30px 60px; background: #fff } .pageSet .setList .R .style:after { content: ""; display: block; width: 26% } .pageSet .setList .R .style a { width: 33%; padding: 10px 0px; transition: ease .4s; height: auto; text-align: left; display: flex; justify-content: flex-start; align-items: center } .pageSet .setList .R .style a * { display: block; height: auto; line-height: 20px } .pageSet .setList .R .style a:nth-child(3n-1) { } .pageSet .setList .R .style i { color: #2fc7a0 } @keyframes square { 0% { transform: translateZ(0) scale(0) } 30% { transform: translate3d(0, 15px, 0) scale(.35) } 50% { transform: translate3d(0, 30px, 0) scale(1) } 70% { transform: translate3d(0, 45px, 0) scale(.35) } 100% { transform: translate3d(0, 60px, 0) scale(0) } } @keyframes buzz { 5% { transform: translateX(-3px) rotate(-2deg) } 7.5% { transform: translateX(3px) rotate(2deg) } 10% { transform: translateX(-3px) rotate(-2deg) } 12.5% { transform: translateX(2px) rotate(1deg) } 15% { transform: translateX(-2px) rotate(-1deg) } 17.5% { transform: translateX(2px) rotate(1deg) } 20% { transform: translateX(-2px) rotate(-1deg) } 22.5% { transform: translateX(1px) rotate(0) } 25% { transform: translateX(-1px) rotate(0) } } .floatingWindow { position: fixed; right: 1.5%; z-index: 300; top: 50%; transform: translateY(-50%); width: 80px } .floatingWindow .yoyo { position: relative; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: inherit; z-index: 5 } .floatingWindow ul { margin-top: -15px; position: relative; z-index: 1; } .floatingWindow li { color: #6f6f6f; text-align: center; position: relative; transition: ease .4s; background-color: #fff; } .floatingWindow li:nth-child(2) { border-radius: 100px 100px 0px 0px; box-shadow: 0px 0px 30px rgba(0, 0, 0, .05); } .floatingWindow li:last-child { margin-top: -1px; border-radius: 0px 0px 100px 100px; box-shadow: 0px 0px 30px rgba(0, 0, 0, .05); } .floatingWindow li i { width: 35px; height: 35px; margin: 0px auto; display: block; background: url(../images/bar_icon.png) no-repeat; margin-bottom: 5px; } .floatingWindow li:hover i{ -webkit-animation: swing2 2s infinite ; } @-webkit-keyframes swing2 { 10% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 20% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 30% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 40% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .floatingWindow li:nth-child(2) i { background-position: -35px 0px; } .floatingWindow li:nth-child(3) i { background-position: -70px 0px; } .floatingWindow li.btnAppointment { background: #00bb8e; color: #fff; border-radius: 0px 0px 100px 100px; margin-bottom: 20px; } .floatingWindow li.btnAppointment a { padding: 15px 0 25px; } .floatingWindow li a { display: block; padding: 20px 0; position: relative; } .floatingWindow li a:hover { color: #2cc9a1; } .floatingWindow li.btnAppointment a:hover { color: #fff; opacity: .7; } .floatingWindow li:nth-child(1):after { opacity: 0 } .floatingWindow span { font-size: 12px; display: block } .advertising { opacity: 0; visibility: hidden; position: fixed; z-index: 100; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6) } .advertising.active { opacity: 1; visibility: inherit } .advertising .btnNumber { position: absolute; color: #fff; right: 0; top: -45px; display: flex; font-size: 14px } .advertising .btnNumber .text { background: #2fc7a0; display: flex; padding: 5px 15px; border-radius: 20px; align-items: center; align-content: center } .advertising .btnNumber .text+.text { margin-left: 5px } .advertising .btnNumber .text .num { display: block; margin-right: 5px } .advertising .btnNumber .offbtn { cursor: pointer } .advertising .advertisingBox { width: 78%; position: absolute; top: 50%; left: 50%; height: auto; transform: translate(-50%, -50%) } .advertising .pagination { position: absolute; bottom: 20px; z-index: 5; text-align: center } .advertising .pagination span { background: #fff } .advertising .pagination span.swiper-pagination-bullet-active { background: #2fc7a0 } #videobox { display: none } #videobox .anti_box { width: 60%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: inherit } #videobox .closeico { transform: translate(100%, -100%) } #videobox .anti_box video { position: relative } .lightImg{ position: absolute; width: auto; height: auto; background-color: #fff; box-shadow: 0px 0px 50px rgba(0, 0, 0, .1); position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); } .lightClose{ position: absolute; right: 0px; top: 0px; cursor: pointer; width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 36px; } .lightClose::before{ width: 100px; height: 100px; position: absolute; left: 0%; bottom: 0%; background: #00bb8e; content: ''; border-radius: 50%; -webkit-transform: scale(1.2); } .lightClose p{ -webkit-transform: rotate(45deg); -webkit-transition: all .4s; position: relative; } .lightClose:hover p{ -webkit-transform: rotate(90deg); } .lightImg img{ width: auto; height: auto; max-width: 100vw; max-height: 100vh; } .inBanner { margin-top: 84px } .inBanner img { width: 100% } .pageYoYo { background: #f6fbfb; padding: 70px 0 } .pageYoYo ._w1400 { display: flex; justify-content: flex-end; position: relative } .pageYoYo ._w1400:after { content: '' } .pageYoYo .img { position: absolute; left: 0; width: 100% } .pageYoYo .img img { position: absolute; max-width: inherit } .pageYoYo .img .yoyo_text { left: -6%; width: 83% } .pageYoYo .img .yoyo { left: -2% } .pageYoYo .description { position: relative; width: 58% } .pageYoYo .wechat { display: inline-block; float: right; margin-top: 65px } .pageYoYo .wechat p { text-align: center; font-size: 24px; color: #2fc7a0; margin-bottom: 20px; position: relative } .pageYoYo .wechat p:after { content: ''; width: 16%; height: 1px; background: #b5b5b5; right: 0; position: absolute; top: 50% } .pageYoYo .wechat p:before { content: ''; width: 16%; height: 1px; background: #b5b5b5; left: 0; position: absolute; top: 50% } .pageYoYo .wechat span { border: 2px solid #2fc7a0; display: inline-block } .pageYoYo .wechat img { border: 5px solid #fff; width: 170px } .pageYoYo .summary { margin-top: 45px } .pageYoYo .summary .title h3 { font-size: 30px; color: #2fc7a0; font-weight: 100; text-transform: uppercase } .pageYoYo .summary .des { color: #676767; line-height: 2; margin-top: 20px } .pageYoYo .summary .des img { display: inline-block } .pageYoYo .summary .des p { margin-bottom: 5px } ._pageTitle img { margin: 0 auto } .pageMemorabilia { padding: 70px 0; background: url(../images/memorabilia.jpg) center/cover } .tabList.tab { text-align: center; display: flex; justify-content: center; margin: 30px auto 40px } .tabList.tab a { width: 130px; display: block; line-height: 34px; border-radius: 25px; margin: 0 17px; transition: ease .4s; font-size: 14px } .tabList.tab a.active { background: #2cc9a1; color: #fff } .pageMemorabilia .MemorabiliaBox { padding: 0 6%; position: relative; overflow: hidden } .pageMemorabilia .MemorabiliaSwiper { position: relative; z-index: 5; overflow: inherit } .pageMemorabilia .MemorabiliaBox:after { content: ''; background: #c1c1c1 } .pageMemorabilia .MemorabiliaSwiper .li { position: relative } .pageMemorabilia .MemorabiliaSwiper .li.swiper-slide-active .img { border: 3px solid #2cc9a1; opacity: 1 } .pageMemorabilia .MemorabiliaSwiper .pic { background: #fff; border-radius: 15px; position: relative } .pageMemorabilia .MemorabiliaSwiper .pic:after { content: ''; position: absolute; bottom: -32px; width: 130%; background: #c1c1c1; height: 1px; left: 50%; transform: translateX(-50%) } .pageMemorabilia .MemorabiliaSwiper .img { background-size: cover; background-position: center; border-radius: 15px; border: 3px solid #fff; opacity: .3; transition: ease .4s } .pageMemorabilia .MemorabiliaSwiper .icon { position: relative; height: 24px; width: 24px; border-radius: 50%; background: #fff; display: block; margin: 18px auto 16px; border: 2px solid #2cc9a1 } .pageMemorabilia .MemorabiliaSwiper .icon:after { content: ''; position: absolute; border: 1px solid #2cc9a1; height: 60%; width: 60%; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50% } .pageMemorabilia .MemorabiliaSwiper .title { color: #373737; font-size: 24px; font-weight: inherit } .pageMemorabilia .MemorabiliaSwiper .des { line-height: 2; color: #676767 } .pageRaidersTv { background: #f6fbfb; padding: 70px 0 0 } .pageRaidersTv ul { width: 100% } .pageRaidersTv li { height: 26% } .pageRaidersTv .coverBox { overflow: hidden; position: relative; border-radius: 15px 15px 0 0 } .pageRaidersTv .coverBox:after { content: ''; position: absolute; top: 0; width: 100%; background: #fff; height: 190px } .pageRaidersTv .coverBox .minTab { text-align: center; display: flex; justify-content: center; position: relative; z-index: 5; display: none } .pageRaidersTv .coverBox .minTab a { line-height: 84px; width: 94px; display: block; color: #828282; transition: ease .4s; font-size: 14px } .pageRaidersTv .coverBox .minTab a.active { color: #2cc9a1 } .pageRaidersTv .coverBox .minTab.active { display: flex } .pageRaidersTv .coverBox ul { position: relative; z-index: 5 } .pageRaidersTv .coverBox li img { border-radius: 0 0 15px 15px } .pageRaidersTv .coverBox li .text { margin-top: 40px } .pageRaidersTv .coverBox li .title { font-size: 24px; color: #373737 } .pageRaidersTv .coverBox li .summary { color: #676767; margin-top: 15px; line-height: 1.8; position: relative; bottom: 0; width: 100% } .pageRaidersTv .coverBox li.active { display: block } .pageSurrounding { background: #f6fbfb; padding: 40px 0 70px } .pageSurrounding .pageList { margin-top: 30px } .pageSurrounding .pageList ul { position: relative; margin-bottom: 30px } .pageSurrounding .pageList ul:after { content: ''; display: block; clear: both } .pageSurrounding .pageList li { float: left; width: calc(100% / 4 - 12px); margin-right: 15px; position: relative; margin-bottom: 15px } .pageSurrounding .pageList li:nth-child(4n) { margin-right: 0 } .pageSurrounding .pageList .title { position: absolute; z-index: 5; width: 100%; text-align: center; bottom: 50px } .pageSurrounding .pageList .title p { color: #2fc7a0 } .pageSurrounding .pageList .title .cn { color: #4c4c4c; font-size: 18px } .pageSurrounding .pageNumber { display: flex; justify-content: center } .pageSurrounding .pageNumber .btn { border-radius: 50%; width: 34px; height: 34px; display: block; text-align: center; line-height: 34px; color: #2fc7a0; font-weight: 700; cursor: pointer } .pageSurrounding .pageNumber .number { display: flex; justify-content: center; margin: 0 15px } .pageSurrounding .pageNumber .number a { width: 34px; height: 34px; display: block; text-align: center; line-height: 34px; border-radius: 50%; margin: 0 10px } .pageSurrounding .pageNumber .number a.active { background: #2fc7a0; color: #fff } .pageRaiders { background: #f6fbfb; padding: 70px 0 0 } .pageRaiders ul { width: 34%; background: rgba(255, 255, 255, .9) } .pageRaiders .pageRaidersSwiper { margin-top: 30px; position: relative; height: calc(100vh - 94px) } .pageRaiders .pageRaidersSwiper li { height: 24% } .pageRaiders .pageRaidersSwiper ._more { margin: 90px auto 0 } .pageRaiders .pageRaidersSwiper .pic { position: absolute; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center } .pageRaiders .pageRaidersSwiper .content { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; z-index: 5 } .householdItems { padding: 70px 0; background: #f6fbfb } .deviceSwiper { margin-top: 30px } .deviceSwiper .tabBtn { width: 1400px; margin: 15px auto 0; display: flex; justify-content: space-between } .deviceSwiper .tabBtn .btn i { width: 40px; height: 40px; line-height: 40px; display: block; background: #fff; border-radius: 50%; text-align: center; color: #2fc7a0; font-weight: 700; font-size: 20px; transition: ease .4s } .deviceSwiper .tabBtn .btn { max-width: 48%; cursor: pointer; font-size: 14px } .deviceSwiper .tabBtn .BtnL { display: flex; align-items: center } .deviceSwiper .tabBtn .BtnR { display: flex; align-items: center; flex-direction: row-reverse } .deviceSwiper .tabBtn .BtnL i { margin-right: 15px } .deviceSwiper .tabBtn .BtnR i { margin-left: 15px } .deviceSwiper .tabBtn .btnMoreBox { width: 35px; height: 35px; justify-content: space-between; display: flex; align-items: center; position: relative; cursor: pointer } .deviceSwiper .tabBtn .btnMoreBox i { background: #e8e8e8; display: flex; width: 6px; height: 6px; border-radius: 50%; position: relative } .deviceSwiper .tabBtn .btnMoreBox i:after { content: ''; background: #e8e8e8; display: flex; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 0; top: 15px } .deviceSwiper .tabBtn .btnMoreBox i:before { content: ''; background: #e8e8e8; display: flex; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 0; top: -14px } .deviceSwiper .tabBtn .btnMoreBox i:nth-child(1):before { background: #2fc7a0 } .deviceSwiper .tabBtn span { display: block } .deviceSwiper .li { position: relative; width: 1400px } .deviceSwiper .li .pic { background-size: cover; background-position: center } .deviceSwiper .li .title { position: absolute; width: calc(100% - 30px); left: 15px; bottom: 15px; background: #fff; text-align: center; line-height: 70px; font-size: 20px; overflow: hidden; padding: 0 5% } .pageRaidersDetails { padding: 70px 0 70px; background: #f1f4f4 } .pageRaidersDetails li { background: #fff } .pageRaidersDetails li a { padding: 0 } .pageRaidersDetails li .img { background-size: cover; background-position: center } .pageRaidersDetails li:after { opacity: 0 } .pageRaidersDetails li+li { margin-top: 25px } .pageRaidersDetails .summary { padding: 25px 6%; position: relative; width: 100% } .pageRaidersDetails .summary span { color: rgba(54, 54, 54, .4); transition: ease .4s } .pageRaidersDetails .summary:after { display: block; content: ''; clear: both } .pageRaidersDetails .summary ._more { float: left } .pageRaidersDetails .content { margin-top: 30px; overflow: hidden; position: relative } .pageRaidersDetails .content:after { content: ''; display: block; clear: both } .pageRaidersDetails .content .L { width: 70%; float: left } .pageRaidersDetails .content .R { width: 28%; float: right } .pageRaidersDetails .content .R .plateTitle { margin-top: 0; font-size: 24px; color: #2fc7a0; font-weight: inherit; margin-bottom: 15px } .pageRaidersDetails .content .R .pic { display: none; position: relative } .pageRaidersDetails .content .R .pic i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .pageRaidersDetails .content .R li:nth-child(1) .pic { display: block } .pageRaidersDetails .content .R li:after { opacity: 1; left: 0; width: 100% } .pageRaidersDetails .content .R .box { background: #fff; padding: 25px 10px } .pageRaidersDetails .content .R .box+.box { margin-top: 25px } .pageRaidersDetails .content .R li { margin-top: 0 } .pageRaidersDetails .content .R li:nth-child(1) { display: block } .pageRaidersDetails .content .R li { display: none } .pageRaidersDetails .content .R .summary { padding: 24px 0 } .pageRaidersDetails .FixedBox.activeFixed { width: 1400px; position: fixed; left: 50%; transform: translateX(-50%); top: 94px } .pageRaidersDetails .FixedBox.activeFixedBottom { position: relative; top: 0; left: 0; transform: translateX(0); width: 100% } .pageRaidersDetails .FixedBox.activeFixed .asideBox { width: 28%; position: absolute; right: 0 } .pageRaidersDetails .FixedBox.activeFixedBottom .asideBox { width: 100% } .pageRaidersDetails .asideBox { height: calc(100vh - 94px) } .pageSet { background: #f1f4f4; padding: 70px 0 0 } .setDetails { padding: 70px 0 0 } .setDetailsSwiper { position: relative } .setDetailsSwiper .li { position: relative } .setDetailsSwiper .li+.li { margin-top: 25px } .setDetailsSwiper .pic { background-size: cover; background-position: center } .setDetailsSwiper .pic img { display: block; margin: 0 auto } .setDetailsSwiper .pagination { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: auto; height: auto; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; left: 2% } .setDetails .setDetailsSwiper .pagination span { display: block; margin: 7px 0; background: #fff; width: 10px; height: 10px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, .37); opacity: 1; cursor: pointer; position: relative } .setDetails .setDetailsSwiper .pagination span:after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); border: 1px solid #d6d6d6; border-radius: 50%; opacity: 0 } .setDetails .setDetailsSwiper .pagination span.swiper-pagination-bullet-active:after { opacity: 1 } .parHd { width: 1280px; height: 150px; margin: 25px auto 0; position: relative; background: #fff url(/static/assets/img/time_line.png) no-repeat center bottom; background-size: 1000px } .parHd .tempWrap ul { width: 100%; text-align: center; margin: 0 auto; transition: ease .5s } .parHd .tempWrap { margin: 0 auto } .parHd li { color: #dbdbdb; font-size: 24px; line-height: 150px; text-align: center; display: inline-block; cursor: pointer; width: 197px } .parHd li.act { color: #2fc7a0; font-size: 62px; line-height: 120px } .parHd .sPrev { width: 64px; height: 64px; display: block; position: absolute; top: 68px; left: 0; background: url(/static/assets/img/time_prev2.png) no-repeat center center; background-size: 64px } .parHd .sNext { width: 64px; height: 64px; display: block; position: absolute; top: 68px; right: 0; background: url(/static/assets/img/time_next2.png) no-repeat center center; background-size: 64px } .parHd .timesprev { width: 64px; height: 64px; display: none; position: absolute; top: 68px; left: 0; z-index: 1 } .parHd .timesnext { width: 64px; height: 64px; display: none; position: absolute; top: 68px; right: 0; z-index: 1 } .middle-warp { min-width: 1280px } .first-img1 { min-width: 1280px; height: 850px; background: url('/static/assets/img/static-img/green-product01 (1).png') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center } .first-img2 { min-width: 1280px; height: 850px; background: url('/static/assets/img/static-img/green-product01 (2).jpg') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center } .first-img3 { min-width: 1280px; height: 850px; background: url(/static/assets/img/static-img/001.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center } .first-img4 { min-width: 1280px; height: 850px; background: url('/static/assets/img/static-img/green-product01 (4).jpg') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center } .first-img5 { min-width: 1280px; height: 850px; background: url('/static/assets/img/static-img/green-product01 (5).jpg') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center } .first-img6 { min-width: 1280px; height: 850px; background: url('/static/assets/img/static-img/green-product01 (6).png') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center } .tfrl-cont { padding: 0 65px; display: flex; justify-content: space-between; position: relative; flex-flow: wrap } .tfrl-cont::after { content: ''; width: 1px; height: 84%; background: rgba(0, 4, 5, .2); position: absolute; top: 0; left: 50% } .FinanceList { padding: 0; margin-top: 40px; display: block } .Prospectus { margin-top: 20px } .FinanceList:after { display: block; clear: both; position: relative } .FinanceList .tfrlC-img { width: 22%; margin-bottom: 45px; float: left; margin-right: 4% } .FinanceList .tfrlC-img:nth-child(4n) { margin-right: 0 } .tfrlC-img { position: relative } .tfrlC-img img { transition: ease .5s; width: 100% } .tfrlC-img .pic { background-size: cover; background-position: center } .tfrlC-img p { text-align: center; font-size: 16px; padding-top: 30px; padding-bottom: 20px } .tfrlCi-dingwei { width: 58px; height: 66px; color: #fff; text-align: center; background: url(/static/assets/img/tag.png) no-repeat; position: absolute; right: 10px; top: -22px } .tfrlCi-dingwei p { padding: 0 } .tfrlCi-dingwei p:nth-child(1) { font-size: 18px; font-weight: 700; padding-top: 10px } .the-financial-reporting-right { width: 30%; position: relative } .the-financial-reporting-right .summary { background: #fff; padding: 45px 59px } .tfrlC-img2 { padding: 0 34px } .tfrlC-img2 a { display: block } .tfrlC-img a { color: #3e3e3e } .flex-control-nav { width: 1280px; position: absolute; bottom: 40px; left: 50%; margin-left: -640px } .flex-control-nav li { display: inline-block } .flex-control-paging li a { width: 12px; height: 12px; border-radius: 12px; text-indent: -9999px; margin: 0 10px; background: #fff; float: left; cursor: pointer; list-style-type: none; text-align: center } .flex-control-paging li a.flex-active { background: #2fc7a0 } .ConCaseImgListBox .flex-direction-nav { position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: block; width: 1280px; height: auto; z-index: 2 } .ConCaseImgListBox .flex-direction-nav a { width: 64px; height: 64px; line-height: 99em; overflow: hidden; display: block; position: absolute; top: 0; z-index: 3; cursor: pointer } .ConCaseImgListBox .flex-direction-nav .flex-next { right: -32px; background: url(/static/assets/img/time_next.png) no-repeat center center; background-size: 64px } .ConCaseImgListBox .flex-direction-nav .flex-prev { left: -32px; background: url(/static/assets/img/time_prev.png) no-repeat center center; background-size: 64px } .ConCaseImgListBox { position: relative } #ConCaseImgList .pagination { position: absolute; bottom: 2%; z-index: 5 } #ConCaseImgList .pagination span { width: 12px; height: 12px; border-radius: 12px; margin: 0 10px; background: #fff; cursor: pointer; list-style-type: none; text-align: center; opacity: 1 } #ConCaseImgList .pagination span.swiper-pagination-bullet-active { background: #2fc7a0 } .process { background: #f6fbfb; padding: 70px 0 70px } .process .top { display: flex; justify-content: space-between } .process .processList { position: relative; margin-top: 60px } .process .processList li { display: flex; flex-wrap: wrap } .process .processList .box { width: calc(100% / 6); padding: 23px; background: #fff } .process .processList h3 { color: #2fc7a1; font-size: 20px } .process .processList .num { color: #e3e3e3; font-size: 72px; font-weight: 100; margin-right: 15px; font-style: oblique } .process .processList .text { color: #8b8b8b; font-size: 16px; line-height: 1.7 } .process .processList .btn { position: absolute; top: 50%; width: 30px; height: 30px; background: #2fc7a0; color: #fff; border-radius: 50%; text-align: center; line-height: 30px; cursor: pointer; z-index: 5 } .process .processList .btn.swiper-button-disabled { opacity: .2 } .process .processList .BtnL { left: 0; transform: translate(-50%, -50%) } .process .processList .BtnR { right: 0; transform: translate(50%, -50%) } .franchise { padding: 70px 0 } .advantages { width: 100%; height: auto; position: relative; padding: 50px 3%; display: flex; justify-content: space-between } .advantages ul { width: 31%; position: relative; z-index: 5 } .advantages .texL { text-align: right } .advantages .thum { width: 34vw; height: 34vw; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) } .advantages .dot { width: 15px; height: 15px; background: #2fc7a0; position: absolute; border-radius: 50%; top: 50%; z-index: 6 } .advantages .dot.L { transform: translate(-50%, -50%) } .advantages .dot.R { transform: translate(50%, -50%) } .advantages .dot.L:nth-child(1), .advantages .dot.R:nth-child(6) { top: 13% } .advantages .dot.L:nth-child(3), .advantages .dot.R:nth-child(8) { top: 50% } .advantages .dot.L:nth-child(4), .advantages .dot.R:nth-child(9) { top: 71% } .advantages .dot.L:nth-child(5), .advantages .dot.R:nth-child(10) { top: 87% } .advantages .dot:nth-child(2), .advantages .dot:nth-child(4) { left: 4.5% } .advantages .dot:nth-child(2), .advantages .dot:nth-child(7) { top: 29% } .advantages .dot:nth-child(3) { left: 0 } .advantages .dot:nth-child(1), .advantages .dot:nth-child(5) { left: 16.5% } .advantages .dot:nth-child(10), .advantages .dot:nth-child(6) { right: 16.5% } .advantages .dot:nth-child(7), .advantages .dot:nth-child(9) { right: 4.5% } .advantages .dot:nth-child(8) { right: 0 } .advantages .over { position: absolute; top: 50%; height: 85%; width: 85%; transform: translate(-50%, -50%); left: 50%; border-radius: 50%; border: 20px solid #effcf9; z-index: 5 } .advantages .thum img { display: block; transform: scale(1.1); width: 100%; position: absolute; left: 0; top: 0; z-index: 0 } .advantages .thum img.active { opacity: 1; transform: scale(1); z-index: 1 } .advantages .thum:after { content: ''; position: absolute; border: 40px solid #fcfcfc; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97); border-radius: 50%; box-sizing: border-box } .advantages .thum:before { border-radius: 50%; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); border: 1px solid #ebebeb; width: 100%; height: 100% } .advantages ul li { width: 100%; height: auto; position: relative; margin: 45px 0 } .advantages ul li:after { content: ''; position: absolute; width: 16px; height: 16px; background: #c10024; border-radius: 50%; display: block; top: 50%; transform: translateY(-50%); opacity: 0 } .advantages .texL li:after { right: -8% } .advantages .texR li:after { left: -8% } .advantages .texL li:nth-child(1):after, .advantages .texL li:nth-child(4):after { right: -8% } .advantages .texR li:nth-child(1):after, .advantages .texR li:nth-child(4):after { left: -8% } .advantages ul li .num { width: 100px; height: auto; font-size: 80px; line-height: 80px; opacity: .1; float: left; text-align: center; font-family: wygt } .advantages ul:last-child .num { float: right } .advantages ul li .info { height: auto } .advantages ul li .info .name { width: 100%; height: auto; position: relative } .advantages ul li .number { position: absolute; font-size: 54px; color: #f5f5f5; z-index: 1; top: -50% } .advantages .texL .number { right: 0 } .advantages ul li .info .name b { display: block; font-size: 18px; line-height: 35px; font-family: wygt; background: #fff; position: relative; z-index: 5 } .advantages ul li .info .name p { font-size: 12px; text-transform: uppercase; opacity: .5; line-height: 20px; display: block } .advantages ul li .des { width: 85%; line-height: 25px; opacity: .7; display: inline-block; min-height: 50px } .advantages .texL li:nth-child(1), .advantages .texL li:nth-child(5) { margin-left: -5% } .advantages .texL li:nth-child(2), .advantages .texL li:nth-child(4) { margin-left: -25% } .advantages .texL li:nth-child(3) { margin-left: -32% } .advantages .texR li:nth-child(1), .advantages .texR li:nth-child(5) { margin-left: 5% } .advantages .texR li:nth-child(2), .advantages .texR li:nth-child(4) { margin-left: 25% } .advantages .texR li:nth-child(3) { margin-left: 32% } .productStrength .strengthBox { display: flex; flex-wrap: wrap; margin-top: 50px } .productStrength .strengthBox .L { width: 50%; background: url(../images/productStrength_img.jpg) center/cover no-repeat } .productStrength .strengthBox .L img { opacity: 0 } .productStrength .strengthBox .R { background: url(../images/productStrength_bg.jpg) center/cover; width: 50%; position: relative } .productStrength .strengthBox ul { padding: 100px 0; width: 85% } .productStrength .strengthBox li { position: relative; padding: 0 0 0 6% } .productStrength .strengthBox li+li { margin-top: 45px } .productStrength .strengthBox li .icon { width: 70px; height: 70px; display: block; line-height: 70px; background: #fff; border-radius: 50%; font-size: 38px; position: absolute; text-align: center; left: 0; top: 13px; transform: translate(-50%, -50%); color: #20c4a0 } .productStrength .strengthBox li .icon:after { content: ''; border: 5px solid rgba(255, 255, 255, .4); position: absolute; height: 100%; width: 100%; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) } .productStrength .text h3 { font-size: 18px; color: #3f3f3f; margin-bottom: 20px } .productStrength .summary { color: #a3a3a3; line-height: 1.6; font-size: 16px } .productStrength .summary b { color: #595959; margin-top: 15px; display: block } .productStrength .summary .seriesBox { display: flex; align-items: baseline } .productStrength .seriesBox .seriesLi { color: #3e3e3e } .productStrength .seriesBox .line { display: block; margin: 0 15px } .productStrength .seriesLi span { color: #2fc7a0; font-size: 48px; font-weight: 700; position: relative; display: inline-block } .productStrength .seriesLi span:after { content: '+'; font-size: 24px; position: absolute; top: 0 } .communication { padding: 70px 0 } .communication ul { display: flex; justify-content: space-between; margin-top: 50px } .communication li { width: 31%; background: #f7f7f7; border-bottom: 2px solid #2fc7a0; overflow: hidden } .communication li:nth-child(1) { border-radius: 40px 0 0 0 } .communication li:nth-child(3) { border-radius: 0 40px 0 0 } .communication .summary { text-align: center; padding: 25px 0 } .communication .text { position: relative; padding-bottom: 20px } .communication .text:after { content: ''; position: absolute; width: 50px; height: 2px; background: #2fc7a0; left: 50%; bottom: 0; transform: translateX(-50%) } .communication .text .t { color: #4a4a4a; font-size: 18px } .communication .text .b { font-size: 20px; color: #2fc7a0; display: block } .communication .description { color: #a3a3a3; margin-top: 20px; line-height: 1.7 } .marketing { background: url(../images/model_bg.jpg); padding: 70px 0 } .marketing img { margin-top: 70px } .operation { padding: 70px 0 0 } .operation ul { display: flex; justify-content: space-between; margin-top: 50px; flex-wrap: wrap } .operation li { width: 30%; background: #f7f7f7; display: flex; flex-wrap: wrap } .operation li:nth-child(2) { flex-direction: column-reverse } .operation li:nth-child(1) { border-radius: 0 0 0 45px } .operation li:nth-child(3) { border-radius: 0 0 45px 0 } .operation .pic { width: 100% } .operation .text { height: 433px; position: relative; width: 100% } .operation .description { width: 70%; margin: 0 auto; position: absolute; top: 50%; left: 22%; transform: translate(0, -50%); height: 358px } .operation .num { position: absolute; font-size: 60px; color: rgba(74, 74, 74, .2); font-weight: 100; transform: translate(-100%, -50%); left: -10px; top: 50% } .operation .title { font-size: 18px; position: relative; margin-bottom: 25px } .operation .title h3 { color: #4a4a4a } .operation .title h4 { color: #4a4a4a; font-weight: initial } .operation .item { position: relative } .operation .item+.item { margin-top: 15px } .operation .item:after { content: ''; position: absolute; background: #2fc7a0; height: 2px; width: 20px; top: 9px; left: -6px; transform: translateX(-100%) } .operation .item p { color: #4a4a4a; font-size: 16px; font-weight: 700 } .operation .item span { color: #7f7f7f } .joining { padding: 70px 0 0 } .joining .joiningBox { margin-top: 50px } .joining .joiningBox img { width: 108%; max-width: inherit } .joining .joiningBox ul { display: flex; justify-content: space-between } .joining .joiningBox ul:nth-child(2) { flex-direction: row-reverse; margin-top: 100px } .joining .joiningBox .round { width: 6vw; height: 6vw; border: 1px solid #dedede; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center } .joining .joiningBox .round img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .joining .joiningBox .round:after { content: ''; background: #dedede; position: absolute; top: 50%; width: 100%; height: 1px; transform: translateX(11%); left: 100% } .joining .joiningBox .num { width: 28px; height: 28px; background: #2fc7a0; display: block; position: absolute; color: #fff; line-height: 28px; border-radius: 50%; text-align: center; top: 0; left: 0 } .joining .joiningBox i { font-size: 46px; color: #2fc7a0 } .joining .joiningBox p { text-align: center; font-size: 16px; color: #595959; margin-top: 10px } .storePlate { background: url(../images/storePlate_bg.jpg) center/cover no-repeat; margin-top: 140px; position: relative; padding: 70px 0 120px } .storePlate .storeBox { position: relative; width: 880px; height: auto; margin: -140px auto 0; box-shadow: 0 0 13px 3px rgba(187, 187, 187, .37); z-index: 5; border-radius: 25px; display: flex; flex-wrap: wrap; padding: 50px; background: url(../images/worldMap.jpg) bottom/cover no-repeat; justify-content: space-between } .storePlate .storeBox .L { width: 59% } .storePlate .storeBox .Merchants { margin-top: 30px; padding-top: 30px; position: relative } .storePlate .storeBox .Merchants:after { content: ''; background: #e3e3e3; width: 53px; height: 1px; position: absolute; display: block; top: 0 } .storePlate .Merchants p { color: #4e4e4e; font-size: 18px } .storePlate .Merchants a { font-size: 49px; color: #656565 } .storePlate .storeBox ._titlePlate { text-align: left } .storePlate .storeBox ._titlePlate h3 { padding: 0 } .storePlate .storeBox .formBox { width: 33% } .storePlate .storeBox ._form { padding: 0 } .storePlate .storeBox ._titlePlate span { display: none } .storePlate ._form.form1 #distpicker select { height: 40px; margin-top: 5px } .storePlate ._form.form1 #distpicker select, .storePlate ._form.form1 .input { width: 100%; line-height: 40px; margin-bottom: 0 } .storePlate ._form.form1 .input+.input { margin-top: 5px } .storePlate .storeBox .formBox .form_submit { background: #2fc7a0; margin-top: 15px; line-height: 40px; height: 40px; width: 140px } #txtContent img { display: inline-block } .noList{ display: none; margin: 0 auto 5vw auto; text-align: center; font-size: 16px; color: #666666; } .noList img{ margin: 0 auto; } .noList.active{ display: block; } @media screen and (max-width: 1440px) { .footer .R { width: 300px; padding-left: 3%; } .footer .C { width: calc(75% - 300px); padding: 0px 3%; } .footer .cl { width: calc(100% - 160px); } .subNav ul li a:first-child { font-size: 18px; } } @media screen and (max-width: 1366px) { .subNav ul li { width: calc(100% / 7); margin-left: 0vw; margin-right: 0vw; } } @media screen and (min-width:1200px) { .parHd .sPrev:hover { background: url(/static/assets/img/time_prevon.png) no-repeat center center; background-size: 64px } .parHd .sNext:hover { background: url(/static/assets/img/time_nexton.png) no-repeat center center; background-size: 64px } .ConCaseImgListBox .flex-direction-nav .flex-next:hover { right: -32px; background: url(/static/assets/img/time_nexton.png) no-repeat center center; background-size: 64px } .ConCaseImgListBox .flex-direction-nav .flex-prev:hover { left: -32px; background: url(/static/assets/img/time_prevon.png) no-repeat center center; background-size: 64px } ._tabLink a:hover { color: #32b9b0 } ._tabLink a:hover:after { transform: translateY(-50%); opacity: 1 } ._more:hover { background: #2fc7a0; color: #fff } ._listRaiders li:hover .style { color: #2fc7a0 } ._listRaiders li:hover span { color: #2fc7a0 } ._listRaiders li:hover .title { color: #2fc7a0 } ._listRaiders li:hover .description { color: #2fc7a0 } .pageSet .setList .R .style a:hover { color: #2fc7a0 } .tabList.tab a:hover { background: #2cc9a1; color: #fff } .pageRaidersTv .coverBox .minTab a:hover { color: #2fc7a0 } .pageSurrounding .pageNumber .number a:hover { background: #2fc7a0; color: #fff } .pageSurrounding .pageNumber .btn:hover { background: #2fc7a0; color: #fff } } @media screen and (max-width:1800px) { .pageSet .setList .R .style a { width: 33%; justify-content: flex-start; padding: 10px 0px; height: auto; } .pageSet .setList .R .style a:nth-child(3n-1) { margin: 0% } } @media screen and (max-width:1600px) { .process .processList h3 { font-size: 18px } .process .processList .num { font-size: 50px } .process .processList .text { font-size: 14px } .pageRaidersDetails .FixedBox.activeFixed { width: 1300px } .pageRaidersDetails .FixedBox.activeFixedBottom { width: 100% } .pageRaidersDetails .content .L { width: 75% } .pageRaidersDetails .content .R { width: 23% } .pageRaidersDetails .content .R .box { padding: 15px 10px } .pageRaidersDetails .content .R .plateTitle { font-size: 20px; margin-bottom: 10px } ._listRaiders .title { font-size: 14px; margin-top: 10px } .pageRaidersDetails .content .R .summary { padding: 15px 0 0 } .pageRaidersDetails .content .R .box+.box { margin-top: 15px } .pageRaidersDetails .FixedBox.activeFixed .asideBox { width: 23% } .pageRaidersDetails .FixedBox.activeFixedBottom .asideBox { width: 100% } } @media screen and (max-width:1500px) { .pageRaidersDetails .FixedBox.activeFixed { width: 1200px } .pageRaidersDetails .FixedBox.activeFixedBottom { width: 100% } ._font60 { font-size: 40px } ._font36 { font-size: 30px } ._font24 { font-size: 20px } .inBanner { margin-top: 84px } .ConCaseImgListBox .flex-direction-nav .flex-prev { left: 5% } .ConCaseImgListBox .flex-direction-nav .flex-next { right: 5% } ._font46 { font-size: 38px } .pageSet .setList .R .style { padding: 20px 60px } .pageSet .setList .L .text { width: 95% } .pageSet .setList .R .title { line-height: 65px; padding: 10px 40px 0 } .pageSet .setList .R { transform: translateY(-126px) } .brand-text { width: 94% } .brand-container { background-position: right } .process .processList .num { font-size: 50px } .process .processList h3 { font-size: 16px } .process .processList .text { font-size: 14px } } @media screen and (max-width:1400px) { .green-product-text1-content, .green-product-text1-num, .green-product-text1-title { margin-left: 680px; width: 536px } .green-product-text2, .green-product-text5 { width: 1130px } .nav ul li ul li a{ padding: 0.5vw 0; font-size: 14px; } .nav ul li ul{ padding: 10px 0px; } .subNav ul li a{ font-size: 14px; } .subNav ul li a:first-child{ font-size: 16px; } } @media screen and (max-width:1367px) { .advantages .texL li:nth-child(2), .advantages .texL li:nth-child(4), .advantages .texR li:nth-child(2), .advantages .texR li:nth-child(4) { margin-left: 0%; } .advantages .texL li:nth-child(1), .advantages .texL li:nth-child(5) { margin-left: 25%; } .advantages .texR li:nth-child(1), .advantages .texR li:nth-child(5) { margin-left: -25%; } .advantages .texR li:nth-child(3) { margin-left: 10%; } .advantages .texL li:nth-child(3) { margin-left: -10%; } .advantages ul li .des { min-height: auto; width: 80%; } .advantages .texR li:nth-child(1), .advantages .texR li:nth-child(5) { margin-bottom: 15px; } } @media (max-width: 1660px) { .index .f3{ /*margin-top: -10vw;*/ } .index .f3 .item .icon { width: 4.5vw; } } @media (max-width: 1440px) { header nav ul li a { padding: 0 1.5vw; } .resumeModal .resumeBox form .inputBox .name { width: 8vw; } .resumeModal .resumeBox form .inputBox .up { margin-left: 8vw; } } @media (max-width: 1366px) {} @media (max-width: 900px) { .pc { display: none; } .mobile { display: block; } .noList{ margin: 0 auto 10vw auto; font-size: 14px; } .noList img{ width: 50%; } .header { display: none !important; } .floatingWindow { display: none; } .social, .socialDetail, .development { margin-top: 0; } .wall .bannerBox { height: 40vw; margin-top: 0; } .wall .title { font-size: 20px; } .wall .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .wall .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .wallTab { position: relative; } .wallTab .item { width: auto; height: auto; padding: 6px 8px; font-size: 14px; } .wall .text { padding: 5vw; } .wall .text .des .sq{ height: 2vw; } .wall .text .tit { font-size: 18px; } .wall .text .des { font-size: 12px; } .wall .wallBox .item { display: block; padding-top: 0; padding-bottom: 5vw; } .wall .wallBox .item .imgBox { width: 100%; height: auto; } .wall .wallBox .item .imgBox .img { width: 100%; height: 55vw; } .wall .wallBox .item .textBox { width: 100%; padding: 5vw 5vw 8vw 5vw; } .wall .wallBox .item .textBox .tit { text-align: center; } .wall .wallBox .item .textBox .tit .cn { font-size: 18px; } .wall .wallBox .item .textBox .tit .en { font-size: 14px; } .wall .wallBox .item .textBox .des { font-size: 14px; } .wall .wallBox .item .textBox .more { width: 100px; padding: 8px 5px; height: auto; font-size: 14px; line-height: inherit; margin: 3vw auto 0 auto; border-radius: 50px; } .wall .wallDetail { padding: 5vw; } .wall .wallDetail .item { width: 100%; height: auto; margin-right: 0; margin-bottom: 3vw; cursor: pointer; } .wall .wallDetail .item img { width: 100%; height: auto; } .Effect .bannerBox { height: 40vw; margin-top: 0; } .Effect .title { font-size: 20px; } .Effect .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .Effect .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .Effect .EffectBox { margin-top: 0; } .Effect .EffectBox .item:nth-child(3n + 2) { top: 0; } .Effect .EffectBox .item { width: 44vw; height: auto; margin-right: 2vw !important; } .Effect .EffectBox .item:nth-child(2n) { margin-right: 0 !important; } .Effect .EffectBox .item:nth-child(3n) { margin-right: 0; } .Effect .EffectBox .item:last-child { margin-right: 0; } .Effect .EffectBox .item .imgBox { width: 100%; height: 65vw; } .Effect .EffectBox .item .textBox { width: 44vw; } .Effect .EffectBox .item .text { padding-top: 8vw; } .Effect .EffectBox .item .text .en { font-size: 20px; } .Effect .EffectBox .item .text .cn { font-size: 20px; } .Effect .imageModal .imageBox { height: 100vw; top: 50%; } .Effect .imageModal .imageBox .imageModals { width: 95vw; height: 100vw; } .Effect .imageModal .imageBox .imageModals .left { width: 40vw; } .Effect .imageModal .imageBox .imageModals .left img { width: 40vw; } .Effect .imageModal .imageBox .imageModals .right { width: 49vw; } .Effect .imageModal .imageBox .imageModals .right .name { font-size: 16px; } .Effect .imageModal .imageBox .imageModals .right form { padding: 3vw 0; margin: 3vw 0; } .Effect .imageModal .imageBox .imageModals .right form .tit { font-size: 14px; } .Effect .imageModal .imageBox .imageModals .right form .inputBox { height: auto; } .Effect .imageModal .imageBox .imageModals .right form .inputBox input { height: 7vw; font-size: 12px; } .Effect .imageModal .imageBox .imageModals .right form .sbumit { height: 8vw; line-height: 8vw; font-size: 12px; } .Effect .imageModal .imageBox .imageModals .right form .kefu { height: 8vw; line-height: 8vw; font-size: 12px; } .Effect .imageModal .imageBox .leftIcon { display: none; } .Effect .imageModal .imageBox .rightIcon { display: none; } .Effect .imageModal .imageBox .imageModals .right .imgBox .tit { font-size: 14px; } .Effect .imageModal .imageBox .imageModals .right .imgBox .tit span { font-size: 12px; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox { height: 37vw; } .Effect .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList ul li { width: 15vw; } .Grass .bannerBox { height: 40vw; margin-top: 0; } .Grass .title { font-size: 20px; } .Grass .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .Grass .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .Grass .EffectBox { padding: 0 5vw; } .Grass .EffectBox .EffectList ul li { width: calc(33%); margin: 0; } .Grass .EffectBox .EffectList ul li img { transform: scale(.95); } .Grass .imageModal .imageBox { height: 100vw; top: 50%; } .Grass .imageModal .imageBox .imageModals { width: 95vw; height: 100vw; } .Grass .imageModal .imageBox .imageModals .left { width: 40vw; } .Grass .imageModal .imageBox .imageModals .left img { width: 40vw; } .Grass .imageModal .imageBox .imageModals .right { width: 49vw; } .Grass .imageModal .imageBox .imageModals .right .name { font-size: 16px; } .Grass .imageModal .imageBox .imageModals .right form { padding: 3vw 0; margin: 3vw 0; } .Grass .imageModal .imageBox .imageModals .right form .tit { font-size: 14px; } .Grass .imageModal .imageBox .imageModals .right form .inputBox { height: auto; } .Grass .imageModal .imageBox .imageModals .right form .inputBox input { height: 7vw; font-size: 12px; } .Grass .imageModal .imageBox .imageModals .right form .sbumit { height: 8vw; line-height: 8vw; font-size: 12px; } .Grass .imageModal .imageBox .imageModals .right form .kefu { height: 8vw; line-height: 8vw; font-size: 12px; } .Grass .imageModal .imageBox .leftIcon { display: none; } .Grass .imageModal .imageBox .rightIcon { display: none; } .Grass .imageModal .imageBox .imageModals .right .imgBox .tit { font-size: 14px; } .Grass .imageModal .imageBox .imageModals .right .imgBox .tit span { font-size: 12px; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox { height: 37vw; } .Grass .imageModal .imageBox .imageModals .right .imgBox .hotBox .hotList ul li { width: 15vw; } .HR .serachBox { width: 90vw; height: 10vw; border-radius: 5vw; top: -5.2vw; } .HR .serachBox input { width: 90%; height: 9vw; font-size: 14px; padding-left: 5vw; } .HR .serachBox .serach { width: 9vw; height: 9vw; font-size: 16px; padding-top: 2vw; } .HR .f1 { width: 100%; padding: 4vw 0 0 0; } .HR .f2 { padding: 10vw 0 5vw 0; } .HR .f1 .text { padding: 0 5vw; } .HR .f1 .text .tit { font-size: 18px; } .HR .f1 .text .des { font-size: 14px; margin: 2vw auto; } .HR .f1 .text .info { font-size: 14px; } .HR .f1 .itemBox { display: flex; padding: 5vw; flex-wrap: wrap; } .HR .f1 .itemBox .item { width: 100%; height: auto; padding: 35px 10px; border-radius: 10px; } .HR .f1 .itemBox .item:nth-child(1) { width: calc(50% - 5px); display: block; } .HR .f1 .itemBox .item:nth-child(2) { width: calc(50% - 5px); display: block; } .HR .f1 .itemBox .item:nth-child(3) { margin-top: 10px; } .HR .f1 .itemBox .item .icon { width: 40px; height: auto; margin: 0 auto 3vw auto; } .HR .f1 .itemBox .item .tit { font-size: 18px; } .HR .f1 .itemBox .item .info { width: 5vw; margin: 2vw auto 0 auto; } .HR .f1 .itemBox .item .des { height: auto; font-size: 12px; margin: 3vw auto; padding: 0px; line-height: 1.6; } .HR .f1 .itemBox .item .des br{ display: none; } .HR .f1 .itemBox .item:nth-child(3) .des { height: auto; } .HR .f1 .itemBox .item .more { width: 100px; height: auto; font-size: 14px; line-height: inherit; padding: 8px 0px; border-radius: 50px; } .HR .f1 .itemBox .item .more i { font-size: 14px; } .HR .f1 .itemBox .item:nth-child(2) .icon { width: 10vw; } .HR .f1 .itemBox .item:nth-child(3) .icon { width: 7vw; } .HR .f2 .text { padding: 0 5vw; } .HR .f2 .text .tit { font-size: 24px; } .HR .f2 .text .des { font-size: 14px; text-align: justify; } .renziBox { width: 100%; display: block; } .HR .f2 .f2Swiper .swiper-slide { font-size: 14px; margin-bottom: 15px; } .renziBox .qrcodeBox { width: 100%; display: inline-block; text-align: center; } .renziBox .qrcodeBox .qrcode { width: 30vw; display: inline-block; } .renziBox .phoneBox { padding: 0 5vw !important; margin-top: 0vw; } .renziBox .phoneBox .tit { font-size: 20px; } .renziBox .phoneBox .address { font-size: 16px; margin: 5px 0; } .renziBox .phoneBox .phone { font-size: 22px; } .HR .f2 .f2Swiper .swiper-button-next, .HR .f2 .f2Swiper .swiper-button-prev { display: none; } .HR .f2 .f2Swiper { height: auto; width: 90%; } .HR .f2 .f2Swiper .swiper-pagination { position: relative; bottom: 0px; } .HR .f2 .f2Swiper .swiper-slide .img { height: 55vw; border: none; margin-bottom: 10px; } .social .bannerBox { height: 40vw; } .social .serachs { padding: 5vw; } .social .serachs .serachBox { width: 100%; } .social .serachs .serachBox .title { font-size: 20px; } .social .serachs .serachBox .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .social .serachs .serachBox .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .social .serachs .serachBox .serachItem { display: flex; flex-wrap: wrap; justify-content: space-between; } .social .serachs .serachBox .serachItem .item { width: 48%; margin-top: 3vw; } .social .serachs .serachBox .serachItem .item:nth-child(1){ width: 100%; } .social .serachs .serachBox .serachItem .item .name { font-size: 14px; } .social .serachs .serachBox .serachItem .item .select { height: auto; } .social .serachs .serachBox .serachItem .item input { font-size: 12px; height: 10vw; padding: 0 3vw; } .social .serachs .serachBox .serachItem .serachBtn { width: 100%; height: auto; line-height: inherit; font-size: 14px; padding: 10px 0; border-radius: 5px; margin-top: 5vw; } .social .QA { width: 100%; padding: 5vw; } .social .QA .title { font-size: 20px; } .social .QA .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .social .QA .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .social .QA .qaBox .item { margin-top: 5vw; } .social .serachList { width: 100%; padding: 5vw; } .social .serachList .item .textBox .more { width: 100px; height: auto; line-height: inherit; font-size: 12px; padding: 8px 0px; border-width: 1px; border-radius: 50px; } #page li{ min-width: 30px; font-size: 12px; line-height: 28px; } .social .QA .qaBox .item .q { padding: 3vw 5vw; } .social .QA .qaBox .item .q .name::before { width: 20px; height: 20px; margin-top: -4.5vw; margin-left: -6.5vw; } .social .QA .qaBox .item .q .name { font-size: 16px; } .social .QA .qaBox .active .a { font-size: 14px; padding: 5vw; } .school .serachs .stroke { width: 100%; } .school .serachs .stroke .title { font-size: 20px; } .school .serachs .stroke .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .school .serachs .stroke .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .school .serachs .stroke .strokeTab { margin: 5vw auto; } .school .serachs .stroke .strokeTab .item { font-size: 16px; margin: 0 5vw; } .school .serachs .stroke .strokeTab .item::after { height: 4vw; margin-left: 5vw; margin-top: 1vw; } .school .serachs .stroke .serachsSwiper { width: 100%; } .school .serachs .stroke .serachsSwiper { height: 45vw; } .school .serachs .stroke .serachsSwiper .swiper-slide .item { width: 90% !important; height: auto !important; margin: 0 auto; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .name { font-size: 16px; padding: 3vw 5vw; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .text { padding: 5vw; font-size: 14px; } .school .serachs .stroke .serachsSwiper .swiper-slide .item .text i { margin-right: 5px; } .school .serachs .serachBox { width: 100%; } .school .serachs .serachBox .title { font-size: 20px; } .school .serachs .serachBox .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .school .serachs .serachBox .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .school .serachs .serachBox .serachItem { display: flex; padding: 0 5vw; flex-wrap: wrap; justify-content: space-between; } .school .serachs .serachBox .serachItem .item { width: 49%; margin-top: 3vw; } .school .serachs .serachBox .serachItem .item:first-child{ width: 100%; } .school .serachs .serachBox .serachItem .item .name { font-size: 14px; } .school .serachs .serachBox .serachItem .item .select { height: auto; } .school .serachs .serachBox .serachItem .item .select select { height: 8vw; font-size: 12px; padding: 0 3vw; } .school .serachs .serachBox .serachItem .item input { font-size: 12px; height: 10vw; padding: 0 3vw; } .school .serachs .serachBox .serachItem .serachBtn { width: 100%; height: auto; line-height: inherit; font-size: 14px; padding: 10px 0; border-radius: 5px; margin-top: 5vw; } .school .serachList { width: 100%; padding: 5vw; } .school .serachList .item { padding: 5vw; margin-bottom: 5vw; } .school .serachList .item .name { font-size: 16px; } .school .serachList .item .tabBox .tab { font-size: 14px; } .school .serachList .item .tabBox .tab::after { content: inherit; } .school .serachList .item .textBox .des { font-size: 14px; width: 100%; margin: 3vw 0; } .social .serachList .item { padding: 35px 15px; margin-bottom: 5vw; } .social .serachList .item .name { font-size: 16px; margin-bottom: 5px; } .social .serachList .item .tabBox .tab { font-size: 12px; line-height: 1.6; } .social .serachList .item .tabBox .tab::after { content: inherit; } .social .serachList .item .textBox .des { font-size: 14px; width: 100%; padding: 15px 0px; } .socialDetail .w1200 { width: 100%; } .socialDetail .detailBox .left { width: 100%; padding: 5vw; } .school .serachList .item .textBox .more { width: auto; height: auto; line-height: inherit; font-size: 12px; padding: 2vw 3vw; } .school .serachList .item .textBox { display: block; } .school .process .title { font-size: 20px; } .school .process .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .school .process .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .school .process img { width: 100%; margin: 5vw auto 0 auto; padding: 0 5vw; } .social .serachList .item .textBox { display: block; border-top: 1px solid rgba(0,0,0,.05); } .school .QA { width: 100%; padding: 5vw; } .school .QA .title { font-size: 20px; } .school .QA .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .school .QA .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .school .QA .qaBox .item { margin-top: 5vw; } .school .serachList { width: 100%; padding: 5vw; } .school .QA .qaBox .item .q { padding: 3vw 5vw; } .school .QA .qaBox .item .q .name::before { width: 20px; height: 20px; margin-top: -4.5vw; margin-left: -6.5vw; } .school .QA .qaBox .item .q .name { font-size: 16px; } .school .QA .qaBox .active .a { font-size: 14px; padding: 5vw; } .school .cooperation { width: 100%; padding: 5vw; } .school .cooperation .title { font-size: 20px; } .school .cooperation .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .school .cooperation .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .development .f1 { width: 100%; padding-bottom: 0; } .development .f1 .title { font-size: 20px; } .development .f1 .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .development .f1 .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .development .f2 .w1200 { width: 100%; padding: 5vw; } .development .f2 .title { font-size: 20px; } .development .f2 .title::before { width: 10vw; margin-top: 3.4vw; margin-left: -14vw; } .development .f2 .title::after { width: 10vw; margin-top: 3.4vw; margin-left: 3.5vw; } .development .f2 .f2Box { display: none; margin-top: 0; } .development .f2 .f2Box .item { width: 100%; height: 119vw; margin-top: 5vw; background-size: cover !important; } .development .f2 .f2Box .item:nth-child(1) { height: 83vw; background: url(../images/renli16_mobile.png) center no-repeat !important; background-size: cover !important; } .development .f2 .f2Box .item:nth-child(2) { height: 107vw; background: url(../images/renli17_mobile.png) center no-repeat !important; background-size: cover !important; } .development .f2 .f2Box .item:nth-child(3) { height: 107vw; background: url(../images/renli18_mobile.png) center no-repeat !important; background-size: cover !important; } .development .f2 .f2Box .item .tit { margin-top: 0; font-size: 18px; padding-top: 42vw; margin-bottom: 5vw; } .development .f2 .f2Box .item .des { font-size: 14px; } .development .f2 .info { margin-top: 5vw; font-size: 16px; padding: 5vw 0; } .social .serachs .serachBox .serachItem .item .select select { height: 8vw; font-size: 12px; padding: 0 3vw; } .con_content { width: 100% !important; padding: 5vw; } .con_content .con_title { padding: 0 !important; font-size: 22px !important; margin-top: 0 !important; } .con_content .con_mark { font-size: 14px !important; padding-bottom: 10px !important; } .con_content .con_html { padding: 0 !important; font-size: 14px !important; line-height: 1.7 !important; } .con_content .news_link, .news_line { display: none; } .con_content .con_html { margin-top: 20px !important; } .resumeModal .resumeBox { width: 90%; padding: 5vw; } .resumeModal .resumeBox .tit { font-size: 20px; } .resumeModal .resumeBox form .inputBox { width: 100%; } .resumeModal .resumeBox form .inputBox .name { width: 30vw; } .resumeModal .resumeBox form .inputBox input { width: 50vw; height: 8vw; font-size: 12px; } .resumeModal .resumeBox form .inputBox select { width: 50vw; height: 8vw; font-size: 12px; } .resumeModal .resumeBox form .inputBox .up { width: 50vw; height: 8vw; font-size: 12px; line-height: 8vw; margin-left: 30vw; } .resumeModal .resumeBox form .inputBox .up i { font-size: 18px; } .resumeModal .resumeBox .resumeBtn { width: 25vw; height: 8vw; line-height: 8vw; font-size: 12px; top: 8vw; } .resumeModal .resumeBox form { margin: 10vw auto; } .socialDetail .detailBox { padding: 5vw; } .socialDetail .detailBox .left .headBox .head { font-size: 16px; } .socialDetail .detailBox .left .headBox .tabBox .tab { font-size: 14px; } .socialDetail .detailBox .left .headBox .tabBox .tab::after { content: inherit; } .socialDetail .detailBox .left .desBox { margin-top: 5vw; } .socialDetail .detailBox .left .desBox .item .tit { font-size: 14px; } .socialDetail .detailBox .left .desBox .item .des { margin-top: 3vw; font-size: 14px; } .socialDetail .detailBox .left .deliver { width: 30vw; height: 8vw; line-height: 8vw; font-size: 14px; margin: 3vw auto; } .socialDetail .detailBox .right { width: 100%; margin-left: 0; margin-top: 5vw; } .socialDetail .detailBox .right .tit { padding: 3vw 5vw; font-size: 16px; } .socialDetail .detailBox .right .item { padding: 3vw; margin: 0 0; } .socialDetail .detailBox .right .item .name { font-size: 14px; } .socialDetail .detailBox .right .item .tabBox { margin-top: 2vw; } .socialDetail .detailBox .right .item .tabBox .tab { font-size: 14px; } .socialDetail .detailBox .right .tit .more { font-size: 14px; } .socialDetail .detailBox .left .headBox .tabBox { margin-top: 3vw; } .m_inputbox{ width: 100%; display: flex; justify-content: space-between; margin-top: 5vw; } .imageModalMobile { width: 100%; height: 100vh; background: rgba(0, 0, 0, .75); position: fixed; top: 0; z-index: 500; padding: 5vw; display: none; } .imageModalMobile.active { display: block; } .imageModalMobile_Box { width: 90%; height: auto; background: white; padding: 0vw; position: absolute; left: 5%; top: 50%; -webkit-transform: translateY(-50%); } .imageModalMobile_Box .btnOff { width: 30px; position: absolute; border: none; height: 30px; border-radius: 50%; z-index: 999; color: #0fc096; text-align: center; line-height: 28px; right: 10px; margin-top: 0vw; font-size: 16px; top: 10px; } .imageModalMobile_Box .imageModalMobileSwiper { margin-bottom: 0vw; height: auto; margin: 10vw 5vw; margin-bottom: 0px; } .imageModalMobile_Box .imageModalMobileSwiper .swiper-wrapper,.imageModalMobile_Box .imageModalMobileSwiper .swiper-wrapper .swiper-slide{ height: 45vh !important; } .imageModalMobile_Box .imageModalMobileSwiper .swiper-slide .img { width: 100%; height: 45vh; background-size: contain !important; } .imageModalMobile_Box .swiper-pagination { bottom: inherit; } .imageModalMobile_Box .swiper-pagination .swiper-pagination-bullet { background: #0fc096; width: 6px; height: 6px; margin: 0px 2px; } .imageModalMobile_Box .name { font-size: 16px; font-weight: bold; margin-top: 10vw; } .imageModalMobile_Box form { padding: 3vw 5vw 7vw 5vw; } .imageModalMobile_Box form .inputBox { width: 100%; height: auto; background-color: #f7f9fa; border-radius: 3px; margin-bottom: 2vw; padding: 0 1vw; } .imageModalMobile_Box form .inputBox input { width: 100%; height: 40px; outline: none; border: transparent; background: transparent; font-size: 14px; padding: 0 15px; } .imageModalMobile_Box form .sbumit { width: 48%; height: 40px; background-color: #00c7a1; border-radius: 3px; text-align: center; line-height: 10vw; font-size: 14px; color: white; cursor: pointer; transition: .5s all; margin: 0px; } .imageModalMobile_Box form .kefu { width: 48%; height: 40px; background-color: rgba(0, 199, 161, 0.1); border-radius: 3px; text-align: center; line-height: 10vw; font-size: 14px; color: #00c7a1; border: 1px solid #00c7a1; margin-top: 0px; cursor: pointer; display: block; transition: .5s all; } .school .cooperation .cooperationBox .item { width: calc(51% - 12px); } .school .cooperation .cooperationBox .item:nth-child(5n) { margin-right: 15px; } .school .cooperation .cooperationBox .item:nth-child(2n) { margin-right: 0; } .development .bannerBox, .HR .bannerBox { margin-top: 0; } .wallTab{ top: 0px; display: flex; justify-content: center; } .wallTab .item{ display: block; padding: 12px 6px; border-radius: 30px; } .wall .text{ margin-top: 0px; } .Effect .EffectBox{ margin-top: 5vw; display: flex; flex-wrap: wrap; justify-content: space-between; } .Effect .EffectBox .item{ width: 49%; margin-right: 0px !important; } .Effect .EffectBox .item .imgBox{ position: relative; width: 100%; height: auto; } .Effect .EffectBox .item .imgBox .pic{ position: relative; width: 100%; height: 100%; height: 55vw; } .Effect .EffectBox .item .text .en{ font-size: 4vw; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); } .imageModalMobile_Box .name{ display: none; } .imageModalMobile_Box .swiper-pagination{ bottom: 5px; } .Grass .EffectBox{ margin-top: 5vw; } .school .cooperation .cooperationBox{ flex-wrap: wrap; display: flex; justify-content: space-between; } .school .cooperation .cooperationBox .item{ width: calc(50% - 5px); display: block; float: none; margin-bottom: 10px; margin-right: 0px; } .school .cooperation .cooperationBox .item:nth-child(5n){ margin-right: 0px; } .rlzy_list{ width: 100%; position: relative; margin-top: 5vw; } .rlzy_list ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .rlzy_list ul li{ width: calc(50% - 5px); height: auto; padding: 35px 15px; background: #fff; border-radius: 5px; margin-bottom: 10px; } .rlzy_list ul li:first-child{ width: 100%; } .rlzy_list ul li .icon{ width: 50px; margin: 0px auto; } .rlzy_list ul li .tit{ font-size: 16px; text-align: center; padding: 20px 0px 10px; } .rlzy_list ul li .des{ width: 100%; text-align: center; font-size: 14px; line-height: 1.6; opacity: .7; } .renziBox>.qrcodeBox{ display: none; } .renziBox .phoneBox{ margin-bottom: 10vw; } .renziBox .phoneBox .nr{ width: 90%; background: #4dd7bc; border-radius: 5px; padding: 25px 15px 15px; margin-left: 5%; position: relative; margin-top: 20px; } .renziBox .phoneBox .nr .icon{ width: 40px; height: 40px; position: absolute; left: 50%; margin-left: -20px; top: -20px; background: #22cdab; border-radius: 50%; } .renziBox .phoneBox .nr .icon::after{ width: 30px; height: 30px; background: url(../images/rz_tel.png) no-repeat; background-size: cover; content: ''; position: absolute; left: 5px; top: 5px; } .renziBox .phoneBox .phone{ font-family: avant; margin-bottom: 5px; } .chrg-grid{ justify-content: space-between; } .chrg-grid .chrg-item{ width: 49%; margin-right: 0%; margin-bottom: 1.5vw; } .Effect .EffectBox .item:hover .text .cn { color: #fff; } .Effect .EffectBox .item:hover .imgBox .pic::after { opacity: 0.3; } .storePlate{ margin-top: 0px; padding: 20vw 0px; } .storePlate .storeBox{ width: 100%; padding: 0px; box-shadow: none; border-radius: 0px; background: transparent; } .school .bannerBox{ margin-top: 0px; } }