html { font-size: 1.04166666vw; /* font-family: microsoft yahei; */ } .auth__wrapper { width: 100%; height: 100%; display: flex; justify-content: center; padding-top: 100px; } main { padding-top: 80px; width: 100%; overflow: hidden; } main .zw-content { margin: 0 auto; padding-top: 80px; } .slide { margin: 0 auto; display: flex; width: 796px; height: 382px; background: rgba(12, 109, 239, 0.7); border: 1px solid #f9f9f9; box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.11); border-radius: 33px; } .slide__left { width: 490px; flex: none; padding: 57px 0 0 53px; } .slide__right { position: relative; } .iphone-img1 { z-index: 1; top: 19px; left: 77px; position: absolute; width: 165px; height: 305px; } .iphone-img2 { z-index: 2; top: 60px; position: absolute; width: 154px; height: 305px; } main .swiper { background: url(/uploads/image/lwimages/bg1.png) no-repeat; background-size: cover; width: 100%; height: calc(100vh - 80px); padding-left: 15%; box-sizing: border-box; display: flex; align-items: center; } main .swiper .left { color: #fff; } main .swiper .left .title { margin-bottom: 30px; } main .swiper .left .title p{ font-weight: 600; color: #202020; font-size: 39px; line-height: 39px; } main .swiper .left .title-two { font-size: 21px; line-height: 23px; font-weight: 600; color: #5f5f5f; line-height: 20px; margin-bottom: 40px; } main .swiper .message .message-form { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; background: #e9e9e9; border-radius: 10px; padding: 22px 23px 18px 22px; margin-bottom: 18px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } main .swiper .message .form-title { font-size: 20px; font-family: pingfang sc; font-weight: bold; color: #777777; line-height: 1; padding-bottom: 17px; } main .swiper .message .form-data { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } main .swiper .message .form-data .form-input { height: 37px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 7px; border-radius: 0.15rem; } main .swiper .message .form-data .form-input__label { -webkit-box-flex: 0; -webkit-flex: 0 0 1px; -ms-flex: 0 0 1px; flex: 0 0 1px; text-align: center; font-size: 18px; height: 56px; line-height: 56px; font-family: microsoft yahei; font-weight: 400; color: #333333; background-color: #e4dffe; -webkit-box-sizing: border-box; box-sizing: border-box; } main .swiper .message .form-data .form-input input { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; font-size: 20px; padding-left: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 37px; line-height: 37px; border: 2px solid #e5e5e5; } main .swiper .message .form-data .form-input input:foucs { border: none; outline: none; } main .swiper .message .form-data .form-input input::-webkit-input-placeholder { /* edge */ color: #c6c6c6; } main .swiper .message .form-data .form-input input:-ms-input-placeholder { /* internet explorer 10-11 */ color: #c6c6c6; } main .swiper .message .form-data .form-input input:-moz-input-placeholder { color: #c6c6c6; } main .swiper .message .form-data .form-input input::placeholder { color: #c6c6c6; } .qw-btn__wrapper { } .clearfix::after { content: ''; display: block; clear:both; visibility: hidden; height: 0; font-size: 0; } .qw-btn { flex: none; margin-right: 17px; float: left; margin-bottom: 10px; } .qw-btn__img { width: 170px; height: 30px; object-fit: cover; border-radius: 6px; } .submit-bottom .icon { width: 16px; height: 13px; margin-right: 5px; } main .dy-video { padding-top: 80px; } main .dy-video .video-title { font-size: 23px; text-align: center; color: #202f47; padding-bottom: 18px; } .bg2_wrapper { text-align: center; padding-bottom: 137px; } .bg2 { width: 54%; } .bg4__title { font-size: 25px; text-align: center; color: #202f47; padding-bottom: 18px; font-weight: 600; } .bg4__title2 { font-size: 23px; color: #434343; text-align: center; margin-bottom: 90px; } .bg4__wrapper { text-align: center; padding-bottom: 132px; } .bg4 { width: 45%; } main .dy-video .video-subtitle { font-size: 12px; line-height: 12px; text-align: center; color: #9f9f9f; padding-bottom: 61px; } .video-area__wrapper { display: flex; justify-content: center; padding-top: 90px; } .video-area { width: 65%; } .video-area video { border-radius: 14px; overflow: hidden; width: 100%; -webkit-border-radius: 14px; -moz-border-radius: 14px; -ms-border-radius: 14px; -o-border-radius: 14px; } main .dy-video .video-notice { font-size: 22px; text-align: center; color: #999; padding: 40px 0; } main .function-tw { background: url(/uploads/image/lwimages/bg3.png) no-repeat; background-size: 100% 336px; width: 100%; } main .function-tw .title { padding-top: 91px; text-align: center; font-size: 23px; color: #fafafa; margin-bottom: 43px; } main .function-tw .function-box { margin: 0 auto; display: flex; justify-content: center; margin-bottom: 120px; flex-wrap: wrap; } main .function-tw .function-box .function-box-item { flex: none; width: 219px; height: 311px; background: #fff; border-radius: 7px; overflow: hidden; box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.11); margin-bottom: 10px; } .function-box-item__img { width: 100%; } .function-box-item__text1 { font-size: 17px; line-height: 17px; color: #2f2f2f; margin-bottom: 22px; text-align: center; padding-top: 20px; } .function-box-item__text2 { font-size: 12px; line-height: 12px; color: #2f2f2f; margin-bottom: 20px; text-align: center; } .function-box-item__text3 { font-size: 12px; color: #a7a7a7; line-height: 23px; padding: 0 25.4px; } main .function-tw .function-box .function-box-item:not(:last-of-type) { margin-right: 9px; } main .function-tw .function-box .function-box-item .left { background: url(/uploads/image/lwimages/zu30.png) no-repeat; background-size: 100% 100%; width: 72px; height: 70px; font-size: 29px; line-height: 70px; padding-left: 25px; color: #a5c1ff; box-sizing: border-box; margin-right: 20px; } main .function-tw .function-box .function-box-item .right { color: #7b7b7b; font-size: 19px; line-height: 25px; } main .function-tw-image { width: 1154px; margin: 0 auto; } main .function-tw-image img { width: 100%; } main .system { width: 100%; background: url(/uploads/image/lwimages/bg5.jpg) no-repeat; background-size: cover; padding-top: 80px; height: 634px; } main .system .title { font-size: 23px; color: #fff; line-height: 42px; text-align: center; padding-bottom: 45px; } main .system-title { display: flex; align-items: center; } main .system-title-item { cursor: pointer; width: 78px; height: 26px; text-align: center; line-height: 26px; border-radius: 13px; color: #ffffff; opacity: 0.5; } .system-title-item:not(:last-of-type) { margin-right: 31px; } .system-title__wrapper { position: relative; } main .system-title-item.hover { background: #fff; opacity: 1; background: #77a6e5; } main .system-swiper { margin-top: 50px; overflow: hidden; } main .system-swiper .swiper-slide { width: 100%; padding-left: 10px; } .swiper-arrow { width: 29px; height: 6px; background: url(/uploads/image/lwimages/arrow.png) no-repeat; background-size: cover; position: absolute; } .swiper-arrow.one { top: 10px; left: 80px; } .swiper-arrow.two { top: 10px; left: 188px; } main .system-swiper .swiper-slide .slide-title { font-size: 22px; color: #fff; margin-bottom: 22px; } main .system-swiper .swiper-slide .introduce { font-size: 15px; color: #fff; } main .system-swiper .swiper-slide .introduce-img { width: 100%; text-align: center; } main .system-swiper .swiper-slide .introduce-img image { min-width: 100%; } main .build { padding-bottom: 80px; } main .build .zw-content { padding-top: 129px; } main .build .title { text-align: center; font-size: 23px; margin-bottom: 93px; } main .build-box { display: flex; justify-content: center; flex-wrap: wrap; } main .build-box-item { width: 153px; margin: 0 38px; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; } .build-box-item-icon { width: 53px; height: 57px; margin-bottom: 34px; } main .build-box-item-title { font-size: 19px; font-weight: 600; color: #494949; margin-bottom: 19px; } main .build-box2 { display: flex; justify-content: center; flex-wrap: wrap; } main .build-box-item2 { width: 129px; margin: 0 65px; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; } .build-box-item-icon2 { width: 100%; height: 197px; } main .build-box-item-title2 { font-size: 19px; font-weight: 600; color: #494949; margin-bottom: 40px; } .build-box-item-content { width: 153px; height: 61px; font-size: 15px; font-weight: 400; color: #8b8b8b; line-height: 23px; } .build2-box-item-title { height: 24px; font-size: 23px; font-weight: 400; color: #434343; line-height: 19px; margin-bottom: 23px; text-align: center; } .build2-box-item-content { font-size: 15px; margin-bottom: 95px; font-weight: 400; color: #8b8b8b; line-height: 23px; text-align: center; } main .build-box-item-title.build-box-item-title1 { font-size: 41px; } main .build-box-item-title span { font-size: 32px; line-height: 62px; } main .build-box-item-one { font-size: 20px; line-height: 20px; color: #626262; } main .build-box-item-two { font-size: 14px; line-height: 33px; } main .build-box-item .bottom-right { position: absolute; width: 40px; height: 40px; display: flex; justify-content: flex-end; right: 42px; bottom: 25px; } main .build-box-item .bottom-right::before { content: ""; width: 31px; height: 31px; background: #9ad8ff; border-radius: 50%; position: absolute; right: -12px; top: -8px; z-index: -1; } main .build-box-item .bottom-right img:nth-child(2) { display: none; } main .build-box .build-box-item:nth-child(1) .bottom-right img { width: 31px; height: 29px; } main .build-box .build-box-item:nth-child(2) .bottom-right img { width: 35px; height: 31px; } main .build-box .build-box-item:nth-child(3) .bottom-right img { width: 25px; height: 29px; } main .build-box .build-box-item:nth-child(4) .bottom-right img { width: 33px; height: 36px; } main .build-box .build-box-item:nth-child(5) .bottom-right img { width: 24px; height: 29px; } main .build-box .build-box-item:nth-child(6) .bottom-right img { width: 26px; height: 32px; } main .section-07 { height: 50.2rem; background-color: #3a3a3a; } main .section-07 .section-title { text-align: center; color: #fff; font-size: 42px; } main .section-07 .section-inner { padding-top: 4.3rem; } main .section-07 .custom-area-05 { width: 60rem; height: 27.7rem; margin: 5.6rem auto 0; position: relative; } main .section-07 .custom-area-05 .part { position: absolute; width: 19.5rem; height: 27.7rem; filter: drop-shadow(0.75rem 0.35rem 1.7rem rgba(0, 0, 0, 0.21)); background-color: #4a4a4a; border: 0.25rem solid #626262; cursor: pointer; transition: 0.2s; } main .section-07 .custom-area-05 .part-1 { left: calc(50% - 9.75rem - 21rem); z-index: 1; transform: scale(0.7); } main .section-07 .custom-area-05 .part-2 { left: calc(50% - 9.75rem - 12rem); z-index: 2; transform: scale(0.85); } main .section-07 .custom-area-05 .part-3 { left: calc(50% - 9.75rem); z-index: 3; transform: scale(1); } main .section-07 .custom-area-05 .part-4 { left: calc(50% - 9.75rem 12rem); z-index: 2; transform: scale(0.85); } main .section-07 .custom-area-05 .part-5 { left: calc(50% - 9.75rem 21rem); z-index: 1; transform: scale(0.7); } main .section-07 .custom-area-05 .part-image { margin-top: 2.4rem; margin-left: 1.9rem; } main .section-07 .custom-area-05 .part-image img { width: 8.3rem; height: 8.3rem; } main .section-07 .custom-area-05 .part-description { margin-top: 1.5rem; padding-left: 3rem; font-size: 0.85rem; letter-spacing: 0.05rem; line-height: 1.85rem; color: #ffffff; font-weight: 500; } main .dy-more { background: #277df0; padding-top: 39px; padding-bottom: 35px; } main .dy-more .wx-code__img { width: 114px; } main .dy-more .wx-code { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 40px; } main .dy-more .wx-code__text { font-size: 31px; font-family: alibaba puhuiti 2; font-weight: normal; color: #f7fbfe; padding-bottom: 27px; } main .dy-more a { animation: heartbeat 1s infinite; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-animation: heartbeat 1s infinite; } main .dy-more__text { font-size: 16px; font-family: pingfang sc; font-weight: 400; color: #ffffff; padding-right: 16px; cursor: pointer; } main .dy-more__box{ display: flex; justify-content: center; flex-wrap: wrap; } main .dy-more__item { width: 129px; margin: 0 51px; display: flex; flex-direction: column; align-items: center; margin-bottom: 53px; } .dy-more__bottom { display: flex; align-items: center; justify-content: center; } .dy-more__qrcode { width: 102px; height: 102px; margin-right: 20px; } .dy-more__contact { font-size: 15px; font-weight: 400; color: #ffffff; } .dy-more__contact p { margin-bottom: 0; } .dy-more__icon { width: 35px; } .dy-more__icon-wrap { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border: 1px solid #fafafa; border-radius: 50%; margin-bottom: 23px; } .dy-more__title { font-size: 15px; font-weight: 400; color: #fafafa; line-height: 23px; } main .dy-more__btn { display: block; width: 273px; height: 50px; line-height: 50px; background: #195eff; border-radius: 10px; text-align: center; font-size: 21px; font-family: alibaba puhuiti 2; font-weight: normal; color: #f7fbfe; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .dy-aside { position: fixed; z-index: 2; right: 0; top: 260px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; text-align: center; border-radius: 10px; align-items: center; } .dy-aside__top { background-color: #195eff; padding: 24px 26px 0; box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.05); border-top-left-radius: 10px; border-top-right-radius: 10px; } .dy-aside__totop { font-size: 16px; font-family: microsoft yahei; font-weight: 400; color: #1e1f23; padding-bottom: 20px; cursor: pointer; } .dy-aside__a { -webkit-box-sizing: border-box; box-sizing: border-box; height: 110px; font-size: 14px; text-align: center; padding-top: 56px; text-align: center; } .dy-aside__a-text { -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 17px; padding-bottom: 20px; font-size: 16px; font-family: microsoft yahei; font-weight: 400; color: #ffffff; line-height: 24px; } .dy-aside__a--code { display: block; width: 108px; color: #fff; background-image: ; background-size: cover; background-position: center center; background-repeat: no-repeat; padding-top: 0; } .dy-aside .dy-aside__qq { position: relative; background-image: ; background-size: cover; background-position: center center; background-repeat: no-repeat; width: 34px; height: 40px; display: inline-block; margin-top: 25px; margin-bottom: 14px; } .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; text-align: center; font-size: 18px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-message-success { position: fixed; top: 100px; width: 300px; right: calc(50% - 150px); z-index: 1000; } .alert-message-danger { position: fixed; top: 100px; width: 300px; right: calc(50% - 150px); z-index: 1000; background-color: #fef0f0; border-color: #fde2e2; color: #f56c6c; } @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); opacity: 1; } 25% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.8; } 100% { -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); opacity: 1; } } @keyframes heartbeat { 0% { -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); opacity: 1; } 25% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.8; } 100% { -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); opacity: 1; } } @-webkit-keyframes rubberband { 0% { -webkit-transform: scalex(1); transform: scalex(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scalex(1); transform: scalex(1); } } @keyframes rubberband { 0% { -webkit-transform: scalex(1); transform: scalex(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scalex(1); transform: scalex(1); } } @media screen and (max-width: 1600px) { main .swiper .left .title { font-size: 40px; } main .swiper .left .title-two { font-size: 20px; } } main .footer-mobile { font-size: 0.28rem; color: #fff; background: #1d1d1d; padding: 0 0.3rem; } main .footer-mobile .whole-country { padding: 0.6rem; display: flex; } main .footer-mobile .whole-country span { margin-right: 0.5rem; } main .footer-mobile .contact { display: flex; flex-wrap: wrap; padding-left: 0.6rem; } main .footer-mobile .contact-item { width: 50%; margin-bottom: 0.4rem; } main .footer-mobile .contact-item .title { color: #9ba1a6; font-size: 0.22rem; } main .footer-mobile .address { padding-left: 0.6rem; padding-right: 0.9rem; color: #9ba1a6; font-size: 0.22rem; padding-bottom: 0.3rem; } main .footer-mobile .address-item { margin-bottom: 0.2rem; }