.ico, .page-title-wrap .title::before, .page-title-wrap .title::after { display: inline-block; background-image: url(../img/sprite.png); background-size: 6.58rem 5.48rem; } .ico-arrow-l-active, .ico-arrow-l:hover { width: 0.7rem; height: 0.75rem; background-position: -5.8rem -0.9rem; } .ico-arrow-l { width: 0.7rem; height: 0.75rem; background-position: -0.7rem -4.3rem; } .ico-btn-android-active, .ico-btn-android:hover { width: 2.3rem; height: 0.7rem; background-position: 0rem -2.7rem; } .ico-btn-android { width: 2.3rem; height: 0.7rem; background-position: -2.4rem -2.7rem; } .ico-btn-close { width: 0.6rem; height: 1.18rem; background-position: 0rem -4.3rem; } .ico-btn-download { width: 1.4rem; height: 0.48rem; background-position: -4.6rem -1.7rem; } .ico-btn-download2 { width: 3.2rem; height: 0.88rem; background-position: 0rem 0rem; } .ico-btn-enter-site { width: 1.4rem; height: 0.48rem; background-position: -4.8rem -2.7rem; cursor: pointer; } .ico-btn-ios, .ico-btn-android { display: block; margin: 0.4rem auto; cursor: pointer; } .ico-btn-ios-active, .ico-btn-ios:hover { width: 2.3rem; height: 0.7rem; background-position: 0rem -3.5rem; } .ico-btn-ios { width: 2.3rem; height: 0.7rem; background-position: -2.4rem -3.5rem; } .ico-btn-xfgg { width: 3.2rem; height: 0.88rem; background-position: 0rem -0.9rem; } .ico-btn-yygdd { width: 3.2rem; height: 0.88rem; background-position: 0rem -1.8rem; } .ico-btn-yyxf { width: 3.2rem; height: 0.88rem; background-position: -3.3rem 0rem; } .ico-logo { width: 1.22rem; height: 1.53rem; background-position: -3.3rem -0.9rem; } .ico-move-tip { width: 1.09rem; height: 0.77rem; background-position: -4.6rem -0.9rem; } .ico-title-cloud-l, .page-title-wrap .title::before, .page-title-wrap .title::after { width: 1.64rem; height: 0.38rem; background-position: -4.8rem -3.5rem; } .ico-txt { display: inline-block; background-image: url(../img/txt.png); background-size: 2.78rem 6.88rem; } .ico-title-bzxf { width: 2.3rem; height: 0.58rem; background-position: 0rem 0rem; } .ico-title-bbld { width: 2.77rem; height: 0.71rem; background-position: 0rem -0.6rem; } .ico-title-bbmd { width: 2.77rem; height: 0.71rem; background-position: 0rem -1.4rem; } .ico-title-zjxf { width: 2.78rem; height: 0.71rem; background-position: 0rem -2.2rem; } .ico-title-num1 { width: 1.27rem; height: 1.27rem; background-position: 0rem -3rem; } .ico-title-num2 { width: 1.27rem; height: 1.27rem; background-position: 0rem -4.3rem; } .ico-title-num3 { width: 1.27rem; height: 1.27rem; background-position: 0rem -5.6rem; } .ico-award { display: inline-block; background-image: url(../img/award.png); background-size: 6.38rem 4.18rem; } .ico-award1 { width: 3.12rem; height: 1.38rem; background-position: 0rem 0rem; } .ico-award2 { width: 3.12rem; height: 1.38rem; background-position: 0rem -1.4rem; } .ico-award3 { width: 3.12rem; height: 1.38rem; background-position: -3.2rem 0rem; } .ico-award4 { width: 3.12rem; height: 1.38rem; background-position: -3.2rem -1.4rem; } .ico-award5 { width: 3.12rem; height: 1.38rem; background-position: 0rem -2.8rem; } .ico-award6 { width: 3.12rem; height: 1.38rem; background-position: -3.2rem -2.8rem; } body { font-size: 0.24rem; } @media only screen and (max-width: 1200px) { #LTTopBar { display: none; } } .ico, .page-title-wrap .title::before, .page-title-wrap .title::after { overflow: hidden; text-indent: -999em; } .hid { display: none !important; } .wrapper { position: relative; width: 100%; min-height: 100vh; } .wrapper .page { -webkit-box-sizing: border-box; box-sizing: border-box; } .footer-wrap { overflow: auto; } .page1 { overflow: hidden; position: relative; height: 10.8rem; } .page1::after { display: block; position: absolute; bottom: 0.5rem; left: 0; width: 100%; height: 5.23rem; background-repeat: no-repeat; background-size: 100% 100%; content: ""; } .page1::after { background-image: url(../img/home_dec.png); } .page1 .bg { width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .page1 .logo { width: 4rem; height: 1.3rem; position: absolute; top: 1.4rem; left: 2.8rem; /* background: url(../img/wcfml_logo.png) 100% no-repeat; */ display: none; background-size: cover; } .page1 .op-wrap { position: absolute; top: 0.35rem; right: 0.6rem; font-size: 0; } .page1 .op-wrap .btn+.btn { margin-left: 0.16rem; } .page1 .op-wrap .btn:hover { -webkit-filter: brightness(105%); filter: brightness(105%); } .page1 .op-wrap2 { position: absolute; top: 7.2rem; left: 50%; z-index: 1; font-size: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .page1 .op-wrap2 .sub-op-wrap { display: inline-block; vertical-align: top; } .page1 .op-wrap2 .sub-op-wrap .btn { display: block; width: 3.2rem; height: 0.88rem; } .page1 .op-wrap2 .sub-op-wrap .btn+.btn { margin-top: 0.14rem; } .page1 .op-wrap2 .sub-op-wrap .btn:hover { -webkit-filter: brightness(110%); filter: brightness(110%); } .page1 .op-wrap2 .sub-op-wrap .btn img { width: 100%; height: 100%; } .page1 .op-wrap2 .sub-op-wrap+.new-server-wrap { margin-left: 0.14rem; } .page1 .op-wrap2 .new-server-wrap { display: inline-block; width: 1.4rem; height: 1.9rem; vertical-align: top; } .page1 .op-wrap2 .new-server-wrap img { width: 100%; height: 100%; } .page1 .move-tip { position: absolute; top: 8.2rem; left: 50%; z-index: 1; margin-left: -0.55rem; -webkit-animation: moveTip 1.5s linear infinite; animation: moveTip 1.5s linear infinite; } @-webkit-keyframes moveTip { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50%); transform: translateY(50%); } } @keyframes moveTip { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50%); transform: translateY(50%); } } .page-title-wrap { position: relative; font-size: 0; text-align: center; } .page-title-wrap .num { position: absolute; top: -0.7rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .page-title-wrap .title { position: relative; } .page-title-wrap .title::before, .page-title-wrap .title::after { display: block; position: absolute; top: 0.24rem; content: ""; } .page-title-wrap .title::before { left: -2rem; } .page-title-wrap .title::after { right: -2rem; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .page2 { padding-top: 0.25rem; margin-top: 0.5rem; height: 9rem; background-repeat: no-repeat; background-size: 100% 100%; } .page2 { background-image: url(../img/bg1.jpg); } .page2 .award-wrap { position: relative; margin: 0 auto; margin-top: 0.1rem; width: 12.71rem; height: 7.05rem; font-size: 0; background-repeat: no-repeat; background-size: 100% 100%; } .page2 .award-wrap { background-image: url(../img/award_bg.png); } .page2 .award-wrap .new-server-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 1.48rem; left: 50%; font-size: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-align-items: center; align-items: center; -webkit-box-align: center; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack: center; -ms-flex-align: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .page2 .award-wrap .new-server-wrap .name { margin-top: 0.1rem; font-size: 0.28rem; font-weight: 700; color: #fff; } .page2 .award-wrap .new-server-wrap .time { margin-top: 0.04rem; font-size: 0.16rem; color: #fff; } .page2 .award-wrap .new-server-wrap .code-wrap { position: relative; margin-top: 0.18rem; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0.04rem solid #1e5c65; border-radius: 0.16rem; padding: 0.06rem; width: 1.92rem; height: 1.92rem; background-color: #fff; } .page2 .award-wrap .new-server-wrap .code-wrap::before { display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.25rem; margin-left: -0.25rem; width: 0.5rem; height: 0.5rem; /* background-image: url("../img/wd_icon.png"); */ background-size: 100% 100%; content: ""; } .page2 .award-wrap .new-server-wrap .code-wrap::after { position: absolute; bottom: -0.3rem; left: 50%; font-size: 0.18rem; white-space: nowrap; color: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: attr(data); } .page2 .award-wrap .new-server-wrap .code-wrap .canvas-wrap { display: none; } .page2 .award-wrap .new-server-wrap .code-wrap img { width: 100%; height: 100%; } .page2 .award-wrap .new-server-wrap .code-wrap img[src=""] { opacity: 0; } .page2 .award-wrap .award-list { position: relative; z-index: 1; width: 100%; height: 100%; } .page2 .award-wrap .award-list .item:nth-child(1) { position: absolute; top: 0.64rem; left: 1.04rem; } .page2 .award-wrap .award-list .item:nth-child(2) { position: absolute; top: 2rem; left: 0.54rem; } .page2 .award-wrap .award-list .item:nth-child(3) { position: absolute; top: 3.4rem; left: 0.64rem; } .page2 .award-wrap .award-list .item:nth-child(4) { position: absolute; top: 0.64rem; right: 1.04rem; } .page2 .award-wrap .award-list .item:nth-child(5) { position: absolute; top: 2rem; right: 0.54rem; } .page2 .award-wrap .award-list .item:nth-child(6) { position: absolute; top: 3.4rem; right: 0.64rem; } .page2 .award-wrap .award-list .item a { display: block; width: 100%; height: 100%; } .page3 { padding-top: 0.25rem; height: 9.4rem; background-repeat: no-repeat; background-size: 100% 100%; } .page3 { background-image: url(../img/bg2.jpg); } .page3 .act-list { margin-top: 1rem; font-size: 0; text-align: center; } .page3 .act-list .item { display: inline-block; width: 3.26rem; height: 7.32rem; vertical-align: top; -webkit-transition: -webkit-transform 0.3s linear; transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; transition: transform 0.3s linear, -webkit-transform 0.3s linear; will-change: transform; } .page3 .act-list .item:nth-child(1), .page3 .act-list .item:nth-child(4) { position: relative; top: -1.5rem; } .page3 .act-list .item:hover { -webkit-transform: translate3d(0, -5%, 0); transform: translate3d(0, -5%, 0); } .page3 .act-list .item img { width: 100%; height: 100%; } .page4 { padding-top: 0.25rem; height: 8.8rem; background-repeat: no-repeat; background-size: 100% 100%; } .page4 { background-image: url(../img/bg3.jpg); } .page4 .main-swiper-wrap { margin-top: 0.5rem; } .page4 .main-swiper { margin: 0 auto; width: 18rem; height: 6.18rem; } .page4 .main-swiper .swiper-slide { width: 11rem; height: 6.18rem; } .page4 .main-swiper .swiper-slide img { width: 100%; height: 100%; } .page4 .main-swiper .swiper-button-prev { left: 2.94rem; } .page4 .main-swiper .swiper-button-next { right: 2.94rem; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } a { -webkit-tap-highlight-color: transparent; } .modal { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1rem 0; background-color: rgba(0, 0, 0, 0.8); opacity: 0; overscroll-behavior: contain; -ms-scroll-chaining: contain; } .modal.modal-hide { opacity: 0; -webkit-animation: fadeOut 0s linear forwards; animation: fadeOut 0s linear forwards; } .modal.modal-hide .modal-wrapper { opacity: 0; /* 此处可自定义动画 */ -webkit-animation: fadeOut 0s linear forwards; animation: fadeOut 0s linear forwards; } .modal.modal-active { opacity: 1; -webkit-animation: fadeIn 0.3s linear forwards; animation: fadeIn 0.3s linear forwards; } .modal.modal-active .modal-wrapper { opacity: 1; /* 此处可自定义动画 */ -webkit-animation: fadeIn 0.3s linear forwards; animation: fadeIn 0.3s linear forwards; } .modal-open { position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .modal-open-scroll-through { overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .btn-close { display: block; overflow: hidden; position: absolute; bottom: -1.18rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .modal-wrapper { position: relative; z-index: 10001; margin: auto; width: 8rem; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .tip-modal .btn-close { bottom: -0.6rem; } .tip-modal .modal-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0.6rem 0.42rem; width: 5.86rem; height: 6.24rem; font-size: 0.18rem; background-repeat: no-repeat; background-size: 100% 100%; } .tip-modal .modal-wrapper { background-image: url(../img/modal_bg2.png); } .tip-modal .modal-body { -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 1.14rem; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tip-modal .modal-body .des { line-height: 2; text-align: center; color: #c8ab64; } .tip-modal .modal-body .code-wrap { position: relative; margin: 0 auto; margin-top: 0.2rem; width: 1.94rem; height: 1.94rem; } .tip-modal .modal-body .code-wrap::before { display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.25rem; margin-left: -0.25rem; width: 0.5rem; height: 0.5rem; background-image: url("../img/wd_icon.png"); background-size: 100% 100%; content: ""; } .tip-modal .modal-body .code { width: 100%; height: 100%; } .tip-modal .modal-body .code[src=""] { opacity: 0; } .download-modal .modal-wrapper, .ios-tips-modal .modal-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; width: 4.55rem; height: 1.86rem; background-repeat: no-repeat; background-size: 100% 100%; } .download-modal .modal-wrapper, .ios-tips-modal .modal-wrapper { background-image: url(../img/modal_bg1.png); } .ios-tips-modal { line-height: 1.86rem; text-align: center; font-size: 0.3rem; } .download-modal .modal-body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-align-items: center; align-items: center; -webkit-box-align: center; -webkit-box-pack: center; -ms-flex-align: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .download-modal .code-wrap { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0.1rem; padding: 0.02rem; width: 1.52rem; height: 1.52rem; background-color: #fff; -webkit-box-shadow: 0 0 0 0.02rem #d9b675; box-shadow: 0 0 0 0.02rem #d9b675; } .download-modal .code-wrap .des { position: absolute; top: 50%; left: -1.5em; width: 1em; font-size: 0.18rem; line-height: 1.2; color: #b59457; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .download-modal .code-wrap .code { border-radius: 0.1rem; width: 100%; height: 100%; } .download-modal .op-wrap { width: 100%; } .download-modal .op-wrap .qq-icon, .download-modal .op-wrap .email-icon { width: 50%; float: left; cursor: pointer; } .download-modal .op-wrap .qq-icon img, .download-modal .op-wrap .email-icon img { width: 1rem; margin: 0 auto; display: block; } .download-modal .op-wrap .email-icon img { margin-top: 0.17rem; } .download-modal .op-wrap span, .download-modal .op-wrap .email-icon span { color: #a54bae; display: block; height: 0.3rem; text-align: center; } .download-modal .op-wrap .email-icon span { margin-top: 0.15rem; } .download-modal .op-wrap .btn { display: block; } .download-modal .op-wrap .btn+.btn { margin-top: 0.12rem; } /*落地页四要素*/ .header-elements { position: absolute; top: 1.2rem; right: 1.3rem; } .header-elements p { color: #0d86a0; font-size: 0.16rem; line-height: 0.3rem; text-align: right; } .header-elements p a { color: #0d86a0; display: inline-block; margin-left: 0.1rem; text-decoration: underline; } .footer { width: 100%; padding: 0.3rem 0; color: #919395; background-color: #222222; overflow: hidden; text-align: center; font-size: 14px; } .footer p { height: 0.3rem; min-height: 3.5vh; } .footer .main {} .footer .main .footerUl { text-align: center; } .footer .main .footerUl li { margin: 0 2px; display: inline-block; } .footer .main .footerUl li a { color: #919395; } .footer .main p a { color: #919395; border-bottom: 1px solid #919395; } .tips { font-size: 0.3rem; margin-bottom: 0.1rem; }