*{margin: 0; padding: 0; box-sizing: border-box;}
@font-face {
    font-family: "阿里妈妈方圆体 VF Regular"; src: url("./AlimamaFangYuanTiVF-Thin.woff2") format("woff2"),
    url("./AlimamaFangYuanTiVF-Thin.woff") format("woff");
    font-display: swap;
}
.apppage{ font-family: "阿里妈妈方圆体 VF Regular"; width: 100vw; height: 100vh; padding-bottom: 40px; overflow-y: auto; overflow-x: hidden;}
.apppage .loading{ display:none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100vh; background-color: #fff; background-image: url('../images/loading.gif'); background-position: center; background-repeat: no-repeat; background-size: 60px 60px;}
.apppage .loading[v-cloak]{ display:block;}
.apppage::-webkit-scrollbar{width:6px}
.apppage::-webkit-scrollbar:horizontal{height:6px}
.apppage::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}
.apppage::-webkit-scrollbar-corner{background:#eee}
.apppage::-webkit-scrollbar-track{background:#eee}
.apppage::-webkit-scrollbar-track-piece{background:#eee;width:6px}
.apppage .top{ display: flex; align-items: center; justify-content: center; padding: 0 0 108px; position: relative; width: 100%; overflow: hidden; height: 288px; z-index: 3;}
.apppage .top::after{ content: ''; position: absolute; top: 180px; left: 0; width: 200%; left: 50%; transform: translateX(-50%); height: 1000px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1000px #FE3F68; z-index: 2;}
.apppage .top .title{ position: relative; color: #fff; font-weight: bold; font-size: 36px; text-align: center; z-index: 3;}
.apppage .top .code{ position: relative; z-index: 3; margin: 0 20px;}
.apppage .top .code .text{ display: block; position: relative; color: #F32247; font-size: 16px; font-weight: 500; padding: 0 18px 0 40px; border-radius: 20px; line-height: 40px; background-color: #fff; cursor: pointer; z-index: 2; background: #fff url('../images/wlgapp_images/code.png') 15px center no-repeat; background-size: 20px; text-decoration: none;}
.apppage .top .code .text.android{ background: #fff url('../images/wlgapp_images/android.png') 15px center no-repeat; background-size: 20px;}
.apppage .top .code .text.ios{ background: #fff url('../images/wlgapp_images/ios.png') 15px center no-repeat; background-size: 20px;}
.apppage .top .code .text.app{ background: #fff url('../images/wlgapp_images/open_app.png') 15px center no-repeat; background-size: 20px;}
.apppage .top .code .mg{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; border-radius: 20px; background: #fff; z-index: 1; opacity: 0; transition: all .3s;}
.apppage .top .code .mg .img{ width: 156px; height: 156px;}
.apppage .top .code .mg .qrcode{ width: 144px; height: 144px;}
.apppage .top .code .mg .a{ display: block; color: #fff; background: #FE3F68; text-align: center; text-decoration: none; width: 140px; height: 40px; line-height: 40px; margin: 0 auto; border-radius: 20px;}
.apppage .top .code:hover .mg{ width: 164px; height: 164px; padding: 4px; top: 50px; opacity: 1; border-radius: 4px; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);}
.apppage .top .code:hover .mg2{ width: 164px; height: 164px; padding: 10px;}
.apppage .pages{ display: flex; justify-content: space-between; max-width: 1200px; width: 100%; margin: 0 auto;}
.apppage .pages .img{ position: relative; width: 320px; overflow: hidden; border-radius: 10px;}
.apppage .pages .img::after{ content: ''; position: absolute; bottom: 120px; left: -190px; width: 700px; height: 800px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1000px #fff; z-index: 2;}
.apppage .pages .img .name{ position: absolute; width: 100%; bottom: 40px; font-size: 18px; text-align: center; z-index: 3; font-weight: bold; background: linear-gradient(0deg, #FF5976 0%, #FE2957 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.8;}
.apppage .pages .img img{ width: 320px; height: auto;}
.apppage .intro{ max-width: 1200px; width: 100%; padding: 0 15px; margin: 0 auto; font-size: 14px; color: #555; line-height: 1.8;}
.apppage .intro .title{ color: #343; font-size: 18px; text-align: center; line-height: 2; margin: 20px 0;}
.apppage .intro .p{ margin: 20px 0;}
.apppage .intro .bold{ font-weight: bold;}
.apppage .intro .img{ width: 160px; height: 160px;}
.apppage .intro .a_kefu{ display: flex; width: 80%; height: 40px; line-height: 40px; text-decoration: none; background: rgba(255,48,91, .05); color: #FE2F5B; align-items:center; justify-content: center; border-radius: 8px; margin: 12px auto;}
.apppage .intro .a_kefu{ display: flex; width: 80%; height: 40px; line-height: 40px; text-decoration: none; background: rgba(255,48,91, .05); color: #FE2F5B; align-items:center; justify-content: center; border-radius: 8px; margin: 12px auto;}
.apppage .intro .a_kefu::before{ content: ""; width: 24px; height: 24px; margin-right: 8px; background: url('../images/wlgapp_images/a_kefu2.png')  center no-repeat; background-size: 24px;}
.apppage .intro .a_kefu2::before{ content: ""; width: 24px; height: 24px; margin-right: 8px; background: url('../images/wlgapp_images/a_kefu4.png')  center no-repeat; background-size: 24px;}
.apppage .intro .span{ color: #255cf3;}
.apppage .footer{ position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 12px; z-index: 99;}
.apppage .footer p{ margin: 0 18px;}
@media (max-width: 750px) {
    .apppage .top{ flex-direction: column; padding-top: 20px; padding-bottom: 48px; height: 320px;}
    .apppage .top .title{ margin-bottom: 12px;}
    .apppage .top .code{ margin: 6px 0;}
    .apppage .top::after{ width: 300%; top: 270px;}
    .apppage .pages{ flex-direction: column; align-items: center;}
	.apppage .top .code:hover .mg{ top: 0; z-index: 3;}
	.apppage .footer{ flex-wrap: wrap;}
}