:root, html, body{
    font-size: calc(100vw / 10);
    /*font-family: "PingFang SC", "微软雅黑", serif;*/
    font-family: "Microsoft YaHei", Arial, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    /*状态栏高度*/
    --status-bar-height: .3rem;
    /* 导航高度 */
    --header-height: 1.3rem;
    /* 间隙 */
    --xs-gap: .2rem;
    --sm-gap: .25rem;
    --gap: .3rem;
    --md-gap: .4rem;
    --lg-gap: .5rem;
    --xl-gap: .6rem;
    --xxl-gap: .7rem;
    /* 圆角弧度 */
    --xs-radius: .14rem;
    --sm-radius: .2rem;
    --radius: .3rem;
    --md-radius: .45rem;
    --lg-radius: .5rem;
    --xl-radius: .6rem;
    --xxl-radius: .7rem;
    --xxxl-radius: .8rem;
    --animate-delay: 1s;
    /* 背景颜色 */
    --bg-white: #FFF;
    --bg-blue: #489AFF;
    --bg-grey: #F9FAFC;
    --bg-grey-2: #e4e4e4;
    --bg-gradient-blue: linear-gradient(to right, #43D0FF, #3586FF);
    --bg-gradient-light-blue: linear-gradient(to bottom, #0051FE, #07CBFF);
    --bg-red: #EE4646;
    /*颜色*/
    --grey-1: #ecedef;
    --grey: #8288A5;
    --black: #333333;
    --white: #FFFFFF;
    --blue: #488BFF;
    --green: #01D099;
    --red: #EE4242;
    --red-1: #cf5852;
    --blue-1: #5b6a91;
    --orange: #FF8D46;
    --orange-1: #ffbe5a;
    /*边框默认宽度*/
    --border-width: 2px;
    /*字体大小*/
    --size: .4rem;
    --xs-size: calc(var(--size) * .8);
    --sm-size: calc(var(--size) * .9);
    --md-size: calc(var(--size) * 1.1);
    --lg-size: calc(var(--size) * 1.3);
    --xl-size: calc(var(--size) * 1.4);
    --xxl-size: calc(var(--size) * 1.5);
    --xxxl-size: calc(var(--size) * 1.6);
    --xxxxl-size: calc(var(--size) * 1.7);
    --xxxxxl-size: calc(var(--size) * 1.8);
    --xxxxxxl-size: calc(var(--size) * 1.9);
    --xxxxxxxl-size: calc(var(--size) * 2);
    /*  宽度  */
    --w-xs: calc(100% - var(--xs-gap) * 2);
    --w-sm: calc(100% - var(--sm-gap) * 2);
    --w: calc(100% - var(--gap) * 2);
    --w-md: calc(100% - var(--md-gap) * 2);
    --w-lg: calc(100% - var(--lg-gap) * 2);
    --w-xl: calc(100% - var(--xl-gap) * 2);
    /* 默认内容 */
    color: #1A1A1A;
    background-color: #F7F7F7;
}
*{margin: 0;padding: 0;outline: none;}
div{display: flex;justify-content: flex-start;align-items: center;flex-flow: column nowrap;}
div p{width: 100%;}
a, a:hover{color: #488BFF;text-decoration: none;}
img{max-width: 100%;width: auto;height: auto;}
.-init{width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;flex-flow: column nowrap;position: fixed;left: 0;top: 0;z-index: 9999999;}
.-init-cover{width: 100%;height: 100%;background-color: rgba(255, 255, 255, 1);position: absolute;left: 0;top: 0;z-index: -1;}
.-init-text{font-size: .4rem;margin-top: .2rem;width: 2rem;color: #000;}
.-modal{position: fixed;left: 0;top: 0;height: 100vh;width: 100vw;z-index: 6000;display: none;justify-content: center;align-items: center;animation: fadeIn 900ms 1;}
@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
}
@keyframes fadeOut{
    from{opacity: 1;}
    to{opacity: 0;}
}
@keyframes enlarge{
    from{transform: scale(0);}
    to{transform: scale(1);}
}
.-modal .-modal-cover{background: rgba(0, 0, 0, .66);width: 100%;height: 100%;position: absolute;z-index: 6000;}
.-modal .-modal-content{width: 100%;height: 100%;position: absolute;z-index: 6001;display: flex;justify-content: center;align-items: center;}
.-container{background: #F4F4F4;font-size: var(--size);width: 100vw;display: flex;justify-content: center;align-items: center;flex-flow: column wrap;}
.-btn{border-radius: var(--xs-radius);border: none;outline: none;padding: var(--sm-gap);}
.-center{display: flex;align-items: center;justify-content: center;}
/* 支付确认框 */
.-modal-pay{width: calc(100% - 1rem);background: #FFF;font-size: var(--xs-size);border-radius: var(--xs-radius);}
.pay-modal-tit{color: #333;font-weight: 800;padding: .4rem .2rem .2rem .2rem;border-top-left-radius: .2rem;border-top-right-radius: .2rem;display: flex;justify-content: center;align-items: center;width: calc(100% - .4rem);border-bottom: 1px solid #EEE;}
.pay-modal-tit span{font-size: .4rem;}
.pay-modal-content{text-align: center;color: #333;line-height: 1.85em;font-size: .4rem;min-height: 2.8rem;display: flex;justify-content: center;align-items: center;}
.-modal-pay-body{display: flex;justify-content: center;align-items: center;flex-flow: column nowrap;}
.pay-modal-btn {
    width: calc(100% - .9rem);display: flex;justify-content: space-between;align-items: center; flex-flow: row nowrap; margin-top: .3rem;margin-bottom: .3rem;
}
.pay-modal-btn button{
    width: 48%;border-radius: .1rem;font-size: .35rem;border: none;background-image: linear-gradient(to bottom, #B61919, #B61919);color: #FFF;height: 3em;display: flex;justify-content: center;align-items: center;
}
.pay-modal-btn button:nth-child(1){background-image: linear-gradient(#FFFFFF, #FFFFFF);border: 1px solid #B61919;color: #B61919;}
/*支付确认框结束*/
/* 支付挽留功能1开始 */
.-retain {
    width: calc(100% - 80px);
    position: relative;
    font-size: 14px;
    border-radius: 1em;
    padding: var(--md-gap) 0;
    background-image: linear-gradient(to bottom, #FEC047,#FB6528);
}
.-retain-title {
    position: absolute;
    width: 70%;
    top: -7%;
}

.-retain-bg {
    width: 100%;
}

.-retain-close {
    position: absolute;
    right: 0;
    top: -2.5em;
    width: 2em;
    cursor: pointer;
}

.-retain-line {
    width: calc(90% - var(--gap) * 2);
    background-image: linear-gradient(to bottom ,#FDFDFA, #FDFAAA);
    border-radius: 1em;
    padding: var(--xl-gap) var(--gap);
    position: relative;
}
.-retain-line .-t1 {
    width: var(--w);
    position: absolute;
    flex-flow: row nowrap;
    justify-content: space-between;
    text-align: center;
    left: var(--gap);
    top: 3%;
    color: #F57A31;
}

.-retain-line .-t2 {
    width: var(--w);
    position: absolute;
    flex-flow: row nowrap;
    justify-content: center;
    left: var(--gap);
    top: 35%;
    color: #F4F275;
    font-size: .45rem;
    line-height: 1.5em;
}

.-retain-line .-t3 {
    flex-flow: row nowrap;
    align-items: baseline;
}

.-retain-line .-t3 span {
    color: #FF2A2A;
}
.-retain-line .-t3 span:nth-child(1) {
    margin-right: var(--xs-gap);
    font-weight: bolder;
}
.-retain-line .-t3 span:nth-child(2) {
    font-size: 24px;
    /*margin-right: var(--xs-gap);*/
    /*font-weight: bolder;*/
}

.-retain-countdown {
    width: 35%;
    flex-flow: row nowrap;
    margin-top: 35px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: center;
    height: 2em;
    background-image: linear-gradient(to right, rgba(111, 0, 0, 0), rgba(220, 61, 61, 0.5), rgba(220, 61, 61, 0.5),rgba(111,0,0,0));
    color: #fff;
    font-size: .4rem;
}
.-retain-countdown span {
    width: 1.5em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.-retain .-pay-type {
    width: 80%;
    color: #fff;
}

.-retain-btn {
    width: 40%;
    min-width: 150px;
    max-width: 300px;
    background-image: url('../img/retain/btn.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: var(--gap) 0;
    margin-top: var(--gap);
    color: #FDF887;
    font-size: 16px;
}
.-retain-qrcode {
    width: 100%;
    margin: var(--lg-gap) 0;
}
.-retain-qrcode .-pay-wechat-qrcode,
.-retain-qrcode .-pay-alipay-qrcode {
    width: 140px;
    height: 140px;
    display: none;
    border-radius: .3rem;
    border: 8px solid #01D099;
    background: #fff url('../img/loading24.gif') center no-repeat;
    position: relative;
}
.-retain-qrcode .-pay-wechat-qrcode::-webkit-scrollbar,.-retain-qrcode .-pay-alipay-qrcode::-webkit-scrollbar {
    width: 0;
}
.-retain-qrcode .-pay-wechat-qrcode canvas, .-retain-qrcode .-pay-alipay-qrcode iframe{
    width: 130px;
    height: 130px;
    overflow:hidden;
    border:none;
    position: absolute;
    left: 5px;
    top: 5px;
}
.-retain-qrcode .-pay-alipay-qrcode iframe {
    width: 130px;
    height: 130px;
    overflow: hidden;
    border: none;
    position: absolute;
    left: 10px;
    top: 10px;
}
.-retain-qrcode.alipay .-pay-alipay-qrcode ,.-retain-qrcode.wechat .-pay-wechat-qrcode {
    display: flex;
}
.-retain-qrcode .-pay-price {
    /*color: #ccc;*/
    align-items: baseline;
    line-height: 1em;
    color: #fff;
}
.-retain-qrcode .-pay-price > span:nth-child(2){
    font-size: .55rem;
    color: #fff;
    margin-left: .1rem;
    line-height: 1em;
}
.-retain-qrcode .-pay-price > span:nth-child(3) {
    font-size: .8rem;
    font-weight: bolder;
    color: #fff;
    line-height: 1em;
}
/* 支付挽留功能1结束 */
/* 加载中 start*/
.-load{width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;flex-flow: column nowrap;position: fixed;left: 0;top: 0;z-index: 9999999;color: #fff;}
.-load-cover{width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: absolute;left: 0;top: 0;z-index: -1;}
.-icon-load{width: 15%;}
.-load-text{font-size: .4rem;margin-top: .2rem;}
.-icon-load svg{width: 100%;height: auto;}
@keyframes icon-rotate{
    from{transform: rotate(0);}
    to{transform: rotate(360deg);}
}
/* 加载中 end*/
main{width: 100%;min-height: 100vh;position: relative;z-index: 0;display: flex;justify-content: flex-start;align-items: center;flex-flow: column nowrap;}
.-status-bar{width: 100%;height: var(--status-bar-height);}
.-gradient-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    /*max-height: 30vh;*/
}
.-gradient-bg .-cover {
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(0,0,0,.7),rgba(0,0,0,.6),rgba(0,0,0,.5),rgba(0,0,0,.4),rgba(0,0,0,.3),rgba(0,0,0,.2),rgba(0,0,0,.1),rgba(0,0,0,0));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.-header {
    font-size: var(--md-size);
    height: var(--header-height);
    width: 100%;
    position: relative;
    color: #fff;
}
.-header svg{width: 1.65em;height: 1.65em;}
.-header .center{width: 100%;height: 100%;flex-direction: row;justify-content: center;}
.-header .center .-item{color: #fff;}
.-header .center .-item:nth-child(2){margin-left: var(--lg-gap);}
.-header .center .-item.active{position: relative;color: #333333;}
.-header .center .-item.active::before{content: '';background-color: #488BFF;position: absolute;bottom: -.2rem;width: 1.5em;height: .12rem;border-radius: var(--radius);}
.-header .left, .-header .right{position: absolute;left: var(--gap);top: 0;height: 100%;display: flex;justify-content: center;align-items: center;}
.-header .right{left: auto;right: var(--gap);}
/** 顶部右侧分享 start */
.-header-share{flex-direction: row;font-size: var(--sm-size);font-weight: 400;color: #333333;border-radius: var(--xl-radius);background: #F3F3F3;line-height: 1.85em;padding: 0 var(--gap);}
.-header-share img, .-header-share svg{width: 1em;margin-right: var(--xs-gap);}
/** 顶部右侧分享 end */
/* 顶部滚动条 start */
.-scrollable {
    width: var(--w);
    background: rgba(255,255,255, .3);
    color: #fff;
    overflow: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: .3rem;
    flex-shrink: 1;
    padding: 5px 0;
}
.-scrollable .-scrollable-item {
    white-space: nowrap;
    font-size: .35rem;
    animation: scroll 20s linear infinite; /* 定义动画，10秒完成一次循环 */
}
/* 定义滚动动画 */
@keyframes scroll {
    0% {
        transform: translateX(50%); /* 从初始位置开始 */
    }
    100% {
        transform: translateX(-100%); /* 移动到容器外部 */
    }
}
/* 顶部滚动条 end */
.-body{width: 100%;height:auto; padding: 0;flex-direction: column;position: relative;}
.-body-banner{position: absolute;z-index: -1;left: 0;}
.-body-banner-text{color: #FFF;margin-top: var(--gap);margin-bottom: var(--gap);width: calc(100% - var(--gap) * 2 - var(--gap));line-height: 1.85em;justify-content: center;padding-left: var(--gap);}
.-body-banner-text .title{flex-direction: row;width: 100%;font-size: var(--size);}
.-body-banner-text .title img{width: 1.2em;height: 1.2em;border-radius: 50%;}
.-body-banner-text .subtitle{width: 100%;flex-direction: row;font-size: var(--sm-size);color: #B7D7FF;}
.-btn{color: var(--grey);border: none;border-radius: var(--sm-radius);width: 100%;padding: var(--gap) 0;text-align: center;font-size: var(--size);position: relative;z-index: 0;background-color: #EAEAEA;}
.-btn.-btn-xs{padding: var(--xs-gap) 0;}
.-btn.-btn-md{padding: var(--md-gap) 0;}
.-btn.-btn-sm{padding: var(--sm-gap) 0;}
.-btn.-btn-blue{background-color: var(--blue);color: var(--white);}
.-btn.-btn-green{background-color: var(--green);color: var(--white);}
.-btn.-btn-green-border{background-color: #FFF;border: 1px solid var(--green);color: var(--green);}
.-btn.-btn-orange{background-color: var(--orange);color: var(--white);}
.-btn.-btn-grey{background-color: #999999;color: var(--white);}
.-btn.-btn-red-1{background-color: #FF4844; color: var(--white);}
.-btn.-btn-blue-border{background-color: #FFF;border: 1px solid var(--blue);color: var(--blue);}
.-btn.-btn-white{background-color: #FFF;color: #333;}
.-btn.-btn-red{background-color: #EE4646;color: var(--white);}
.-btn.-btn-transparent{background-color: transparent;color: var(--grey);}
.-btn.-btn-brown{background-color: #4E1C00;color: var(--white);}
.-btn span{position: absolute;right: 0;top: 0;background-color: #FF3434;font-size: var(--xs-size);border-radius: 0 var(--sm-radius) 0 var(--sm-radius);padding: 0 .2rem;line-height: 2em;}
/*删除弹窗 start */
.-modal-delete{background: #FFF;width: calc(100% - var(--gap) * 4);padding: var(--gap);border-radius: var(--radius);}
.-modal-delete .-modal-title{font-size: var(--size);margin-bottom: var(--gap);text-align: center;letter-spacing: .1em;}
.-modal-delete .-modal-btn{width: 100%;justify-content: space-between;flex-flow: row nowrap;}
.-modal-delete .-modal-btn .-btn{width: calc((100% - var(--sm-gap)) / 2);}
/* 删除弹窗 end */
/* 提示弹窗 start */
.-modal-alert{background: #FFF;width: calc(100% - var(--gap) * 4);padding: var(--gap);border-radius: var(--radius); position: relative;}
.-modal-alert .-modal-title{font-size: var(--md-size);margin-bottom: var(--gap);text-align: center;letter-spacing: .1em; font-weight: bolder;}
.-modal-alert .-modal-body{font-size: var(--size);margin-bottom: var(--gap); color: #666; /*text-align: center;*/letter-spacing: .1em; width: 100%;}
.-modal-alert .-modal-body p{margin-bottom: var(--gap);}
.-modal-alert .-modal-btn{width: 100%;}
.-modal-alert .-modal-btn .-btn{width: var(--w);}
.-modal-alert .-modal-close{position: absolute; right: 0; top: 0; width: 1em; height: 1em; justify-content: center;}
.-modal-alert .-modal-body .-device-info{width: 100%;}
.-modal-alert .-modal-body .-device-info .-item{flex-flow: row nowrap;width: 100%;line-height: 1.85em;margin-bottom: var(--gap);}
.-modal-alert .-modal-body .-device-info .-item > div{border-radius: 2em;padding: .1em var(--xs-gap);color: #fff;}
.-modal-alert .-modal-body .-device-info .-item > div:nth-child(1){background-color: #fcbe51;border-top-right-radius: 0;border-bottom-right-radius: 0;width: 14em;}
.-modal-alert .-modal-body .-device-info .-item > div:nth-child(2){border-top-left-radius: 0;border-bottom-left-radius: 0;background-color: #188c7d;width: 100%;flex-shrink: 1;align-items: flex-start;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.-modal-alert .-modal-body .-device-info .-item > div:nth-child(3){margin-left: var(--gap);background-color: #30303a;width: 10em;}
/* 提示弹窗 end */
/* 行高 start */
.lh-0{line-height: 1em;}
.lh-xs{line-height: 1.1em;}
.lh-sm{line-height: 1.2em;}
.lh{line-height: 1.5em;}
.lh-md{line-height: 1.65em;}
.lh-lg{line-height: 1.85em;}
.lh-xl{line-height: 2em;}
.lh-xxl{line-height: 2.5em;}
.lh-xxxl{line-height: 3em;}
/* 行高 end */
/* confirm 弹窗 start */
.-modal-confirm{background: #FFF;width: calc(100% - var(--gap) * 4);padding: var(--gap);border-radius: var(--radius);}
.-modal-confirm .-modal-title{font-size: var(--lg-size);margin-bottom: var(--gap);text-align: center;letter-spacing: .1em;}
.-modal-confirm .-modal-input{width: 100%;margin-bottom: var(--gap);}
.-modal-confirm .-modal-input input{width: calc(100% - var(--xs-gap) * 2);padding: var(--xs-gap);border: 1px solid #D5D6D9;border-radius: var(--sm-radius);font-size: var(--size);line-height: 1.85em;outline: none;text-indent: 1em;}
.-modal-confirm .-modal-input input::placeholder{color: #9E9E9E;}
.-modal-confirm .-modal-btn{width: 100%;justify-content: space-between;flex-flow: row nowrap;}
.-modal-confirm .-modal-btn .-btn{width: calc((100% - var(--sm-gap)) / 2);}
/* confirm 弹窗 end */
/* 底部弹窗 start */
.-modal-bottom{background: #FFF;width: 100%;border-top-left-radius: var(--radius);border-top-right-radius: var(--radius);}
.-modal-bottom .-modal-bottom-header{position: relative; width: 100%;font-size: var(--size);text-align: center;letter-spacing: .1em;border-bottom: 1px solid #F6F6F6;background-color: #F1F3F5;color: #333;border-top-left-radius: var(--radius);border-top-right-radius: var(--radius);}
.-modal-bottom .-modal-bottom-header .-col-3 .right{color: var(--blue);}
.-modal-bottom .-modal-bottom-header .cancel{position: absolute; right: 0;top: 0; width: 1rem; height: 1rem; align-items: center;justify-content: center;}
.-modal-bottom .-modal-bottom-body{width: var(--w);font-size: var(--size);text-align: center;flex-flow: row wrap;padding-top: var(--gap);min-height: 3rem;align-items: flex-start;}
/* 底部弹窗 end */
/* label 标签 start*/
.-label{padding: 0 var(--xs-gap);font-size: var(--xs-size);line-height: 2em;background-color: #F7F7F7;border-radius: var(--xs-radius);color: #9E9E9E;}
.-label.-label-orange{color: #B38332;background-color: #FFEFCA;}
.-label.-label-blue{color: #FFFFFF;background-color: #0C6DFF;}
.-label.-label-green{color: #FFFFFF;background-color: #57D180;}
.-label.-label-light-green{color: #01D099;background-color: #EBFCF7;}
.-label.-label-red{color: #FFFFFF;background-color: #FF3D3D;}
.-label.-label-light-blue{color: #FFFFFF;background-color: #3CC8FF;}
.-label.-label-black{color: #FFFFFF;background-color: #09384A;}
/* label 标签 end*/

/* 白色卡片 start */
.-card{width: var(--w);border-radius: var(--radius);font-size: var(--size);margin-bottom: var(--gap);}
.-card .-card-header{margin-top: var(--sm-gap);width: var(--w);flex-direction: row;justify-content: space-between;}
.-card .-card-header .-card-title{line-height: 1.85em;font-size: var(--md-size);font-weight: bolder;}
.-card .-card-body{margin: var(--sm-gap) 0;width: var(--w);}
.-card .-card-footer{width: var(--w);margin-bottom: var(--gap);}
.-bg-white{background-color: var(--bg-white);}
.-bg-blue{background-color: var(--bg-blue);}
.-bg-grey{background-color: var(--bg-grey);}
/* 白色卡片 end */

.c-blue{color: var(--blue) !important;}
.c-blue-1{color: var(--blue-1) !important;}
.c-red{color: var(--red) !important;}
.c-red-1{color: var(--red-1) !important;}
.c-white{color: var(--white) !important;}
.c-grey{color: var(--grey) !important;}
.c-grey-1{color: var(--grey-1) !important;}
.c-orange{color: var(--orange) !important;}
.c-orange-1{color: var(--orange-1) !important;}
.c-999{color: #999 !important;}
.c-666{color: #666 !important;}
.c-333{color: #333 !important;}
.c-222{color: #222 !important;}
.c-aaa{color: #aaa !important;}
.rotate-180{transform: rotate(180deg);}
.rotate-90{transform: rotate(90deg);}
.rotate-45{transform: rotate(45deg);}
.m-0{margin: 0 !important;}
.mt-0{margin-top: 0 !important;}
.mb-0{margin-bottom: 0 !important;}
.mr-0{margin-right: 0 !important;}
.ml-0{margin-left: 0 !important;}
.mt-xs{margin-top: var(--xs-gap) !important;}
.mb-xs{margin-bottom: var(--xs-gap) !important;}
.ml-xs{margin-left: var(--xs-gap) !important;}
.mr-xs{margin-right: var(--xs-gap) !important;}
.m-xs{margin: var(--xs-gap) !important;}
.mt-sm{margin-top: var(--sm-gap) !important;}
.mb-sm{margin-bottom: var(--sm-gap) !important;}
.ml-sm{margin-left: var(--sm-gap) !important;}
.mr-sm{margin-right: var(--sm-gap) !important;}
.m-sm{margin: var(--sm-gap) !important;}
.mt{margin-top: var(--gap) !important;}
.mb{margin-bottom: var(--gap) !important;}
.ml{margin-left: var(--gap) !important;}
.mr{margin-right: var(--gap) !important;}
.m{margin: var(--gap) !important;}
.mt-md{margin-top: var(--md-gap) !important;}
.mb-md{margin-bottom: var(--md-gap) !important;}
.ml-md{margin-left: var(--md-gap) !important;}
.mr-md{margin-right: var(--md-gap) !important;}
.m-md{margin: var(--lg-gap) !important;}
.mt-lg{margin-top: var(--lg-gap) !important;}
.mb-lg{margin-bottom: var(--lg-gap) !important;}
.ml-lg{margin-left: var(--lg-gap) !important;}
.mr-lg{margin-right: var(--lg-gap) !important;}
.m-lg{margin: var(--lg-gap) !important;}
.mt-xl{margin-top: var(--xl-gap) !important;}
.mb-xl{margin-bottom: var(--xl-gap) !important;}
.ml-xl{margin-left: var(--xl-gap) !important;}
.mr-xl{margin-right: var(--xl-gap) !important;}
.m-xl{margin: var(--xl-gap) !important;}
.p-0{padding: 0 !important;}
.pl-0{padding-left: 0 !important;}
.pr-0{padding-right: 0 !important;}
.pt-0{padding-top: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.pt-xs{padding-top: var(--xs-gap) !important;}
.pb-xs{padding-bottom: var(--xs-gap) !important;}
.pl-xs{padding-left: var(--xs-gap) !important;}
.pr-xs{padding-right: var(--xs-gap) !important;}
.p-xs{padding: var(--sm-gap) !important;}
.p{padding: var(--gap) !important;}
.pt{padding-top: var(--gap) !important;}
.pb{padding-bottom: var(--gap) !important;}
.pl{padding-left: var(--gap) !important;}
.pr{padding-right: var(--gap) !important;}
.p-xs{padding: var(--sm-gap) !important;}
.pt-sm{padding-top: var(--sm-gap) !important;}
.pb-sm{padding-bottom: var(--sm-gap) !important;}
.pl-sm{padding-left: var(--sm-gap) !important;}
.pr-sm{padding-right: var(--sm-gap) !important;}
.p-md{padding: var(--md-gap) !important;}
.pt-md{padding-top: var(--md-gap) !important;}
.pb-md{padding-bottom: var(--md-gap) !important;}
.pl-md{padding-left: var(--md-gap) !important;}
.pr-md{padding-right: var(--md-gap) !important;}
.p-md{padding: var(--md-gap) !important;}
.pt-lg{padding-top: var(--lg-gap) !important;}
.pb-lg{padding-bottom: var(--lg-gap) !important;}
.pl-lg{padding-left: var(--lg-gap) !important;}
.pr-lg{padding-right: var(--lg-gap) !important;}
.p-lg{padding: var(--lg-gap) !important;}
.pt-xl{padding-top: var(--xl-gap) !important;}
.pb-xl{padding-bottom: var(--xl-gap) !important;}
.pl-xl{padding-left: var(--xl-gap) !important;}
.pr-xl{padding-right: var(--xl-gap) !important;}
.p-xl{padding: var(--xl-gap) !important;}
.fb{font-weight: bolder;}
.fb-1{font-weight: 100 !important;}
.fb-2{font-weight: 200 !important;}
.fb-3{font-weight: 300 !important;}
.fb-4{font-weight: 400 !important;}
.fb-5{font-weight: 500 !important;}
.fb-6{font-weight: 600 !important;}
.fb-7{font-weight: 700 !important;}
.fb-8{font-weight: 800 !important;}
.fb-9{font-weight: 900 !important;}
.b-r-half{border-radius: 50% !important;overflow: hidden;}
.b-r-xs{border-radius: var(--xs-radius) !important;}
.b-r-sm{border-radius: var(--sm-radius) !important;}
.b-r{border-radius: var(--radius) !important;}
.b-r-md{border-radius: var(--md-radius) !important;}
.b-r-lg{border-radius: var(--lg-radius) !important;}
.b-r-xl{border-radius: var(--xl-radius) !important;}
.b-r-0{border-radius: 0 !important;}
.ft{font-size: var(--size) !important;}
.ft-xs{font-size: var(--xs-size) !important;}
.ft-sm{font-size: var(--sm-size) !important;}
.ft-md{font-size: var(--md-size) !important;}
.ft-lg{font-size: var(--lg-size) !important;}
.ft-xl{font-size: var(--xl-size) !important;}
.ft-xxl{font-size: var(--xxl-size) !important;}
.ft-xxxl{font-size: var(--xxxl-size) !important;}
.ft-xxxxl{font-size: var(--xxxxl-size) !important;}
.b-c-grey{border-color: var(--grey);}
.border{border: 0 solid #dbdbdb;}
.b-w-0{border-width: 0 !important;}
.b-w-1{border-width: 1px !important;}
.bl-w-xs{border-left-width: 1px !important;}
.br-w-xs{border-right-width: 1px !important;}
.bb-w-xs{border-bottom-width: 1px !important;}
.bt-w-xs{border-top-width: 1px !important;}
.bl-w{border-left-width: var(--border-width) !important;}
.br-w{border-right-width: var(--border-width) !important;}
.bt-w{border-top-width: var(--border-width) !important;}
.bb-w{border-bottom-width: 0 !important;}
.bl-w-0{border-left-width: 0 !important;}
.br-w-0{border-right-width: 0 !important;}
.bt-w-0{border-top-width: 0 !important;}
.bb-w-0{border-bottom-width: 0 !important;}
.w-xs{width: var(--w-xs) !important;}
.w-sm{width: var(--w-sm) !important;}
.w{width: var(--w) !important;}
.w-md{width: var(--w-md) !important;}
.w-lg{width: var(--w-lg) !important;}
.w-xl{width: var(--w-xl) !important;}
.w-full{width: 100% !important;}
.w-half{width: 50% !important;}
.w-1em{width: 1.2em;margin-bottom: -.1em;}
.w-1-5em{width: 1.5em !important;}
.w-2em{width: 2.2em !important;}
.w-2-5em{width: 2.6em !important;}
.w-3em{width: 3.2em !important;}
.w-1{width: 1rem;}
.w-2{width: 2rem;}
.w-3{width: 3rem;}
.w-4{width: 4rem;}
.w-5{width: 5rem;}
.w-6{width: 6rem;}
.w-7{width: 7rem;}
.w-8{width: 8rem;}
.w-9{width: 9rem;}
.h-1{height: 1rem;}
.h-2{height: 2rem;}
.h-3{height: 3rem;}
.h-4{height: 4rem;}
.h-5{height: 5rem;}
.h-6{height: 6rem;}
.h-7{height: 7rem;}
.h-8{height: 8rem;}
.h-9{height: 9rem;}
.flex-justify-center{justify-content: center !important;}
.flex-justify-start{justify-content: flex-start !important;}
.flex-justify-between{justify-content: space-between !important;}
.flex-justify-around{justify-content: space-around !important;}
.flex-justify-end{justify-content: flex-end !important;}
.flex-column{flex-flow: column nowrap !important;}
.flex-row{flex-direction: row !important;}
.flex-wrap{flex-wrap: wrap !important;}
.flex-nowrap{flex-wrap: nowrap !important;}
.flex-shrink-1{flex-shrink: 1 !important;}
.flex-shrink-0{flex-shrink: 0 !important;}
.flex-column-wrap{flex-flow: column wrap !important;}
.flex-align-center{align-items: center !important;}
.flex-align-start{align-items: start !important;}
.flex-align-baseline{align-items: baseline !important;}
.flex-align-end{align-items: end !important;}
/* index 内容 start */
.-index-list {
    flex-flow: row wrap;
    width: 100%;
    margin-top: .3rem;
}
.-index-item {
    width: calc( ( 100% - var(--gap)) / 2);
    margin-bottom: var(--gap);
    background-color: #fff;
    cursor: pointer;
    border-radius: .4rem;
}
.-index-item-img {
    width: 100%;
    position: relative;
}
.-index-item-img > img {
    width: 100%;
}
.-index-item:nth-child(2n){
    margin-left: var(--gap);
}
.-index-item-cover {
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    line-height: 2.55em;
    width: 100%;
    color: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.-index-item-bottom {
    font-size: .45rem;
    line-height: 2.5em;
    width: 100%;
}
.-sidebar {
    background-color: #fff;
    position: fixed;
    right: -1px;
    top: 6rem;
    font-size: .4rem;
    padding: .3rem;
    /*font-weight: bolder;*/
    line-height: 1.2em;
    border: 1px solid #eee;
    border-top-left-radius: .35rem;
    border-bottom-left-radius: .35rem;
    z-index: 3;
}
.-contact-us {
    top: auto;
    bottom: 3rem;
    color:#fff;
    background-color: #01D099;
}
/* index 内容 end */
p {
    line-height: 1.5em;
    margin-bottom: .3rem;
    color: #1a1a1a;
}
.-p-i-title {
    color: #01D099;
    width: 100%;
    font-size: .6rem;
    margin: .2rem 0;
}
.-btn-group {
    padding: .6rem 0;
    background-color: #F7F7F7;
    position: fixed;
    bottom: 0;
    border: 0;
}
/* 进度条 start */
.-progress-bar {
    width: 100%;
    padding: var(--gap);
}
.-progress-bar-bg {
    background-color: #F7F7F7;
    width: calc(100% - (var(--gap) * 2));
    height: 10px;
    align-items: flex-start;
}
.-progress-bar-item {
    height: 10px;
    background-color: #01D099;
}
.-question {
    width: var(--w);
    align-items: flex-start;
    padding: calc(var(--gap) * 2) 0;
    color: #000;
    line-height: 1.5em;
}
.-option {
    width: var(--w);
    align-items: flex-start;
}

.-option-item {
    width: 100%;
    align-items: flex-start;
    background-color: #fff;
    padding: var(--gap) 0;
    margin-bottom: var(--gap);
    position: relative;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.-option-item > span{
    margin-left: calc(var(--gap) * 3);
    line-height: 1.5em;
}

.-option-item:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #01D099;
}
.-option-item:active:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background-color: #01D099;
    animation: click-animation 100ms ease 1; /* 定义动画，10秒完成一次循环 */
}
@keyframes click-animation{
    from{width: 0;}
    to{width: 100%;}
}
.-question-btn-group {
    width: var(--w);
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: .6rem 0;
    background-color: #F7F7F7;
    position: fixed;
    bottom: 0;
    border: 0;
}
.-question-btn-group .-question-btn-item {
    width: 80%;
    flex-shrink: 1;
    display: none;
}
.-question-btn-group .-question-btn-item:nth-child(2),.-question-btn-group .-question-btn-item:nth-child(3){
    margin-left: var(--gap);
}

.-report-left {
    align-items: flex-start;
}
.-report-result-text {
    font-weight: bolder;
    position: relative;
    font-size: .55rem;
    z-index: 2;
}
.-report-result-text > span {
    position: relative;
    z-index: 3;
}
.-report-result-text:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 50%;
    height: .5em;
    z-index: 1;
    background-color: #01D099;
}

.-report-right {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: .35rem;
    line-height: 1.7em;
    color: #01D099;
    background-color: rgba(1, 208, 153, 0.12);
    justify-content: center;
}
.-report-right > div {
    flex-flow: row nowrap;
    align-items: baseline;
}
.-report-right > div > span {
    font-size: .6rem;
    font-weight: 800;
    margin-right: .1em;
}
.-p-title {
    color: #1A1A1A;
    width: 100%;
    font-size: .6rem;
    /*margin-top: var(--gap);*/
    font-weight: bolder;
}
/* 付费页内容 start */

.-modal-slider {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
}
.-modal-slider-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);
}

.-modal-slider-body {
    width: 100%;
    height: 80%;
    position: relative;
    top: 100%;
    overflow-y: auto;
    background-color: #fff;
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
}
.-modal-slider-body::-webkit-scrollbar {
    display: none;
    scrollbar-width: none; /* Firefox */
    scrollbar-face-color: #FFFFFF; /* IE和Edge的滚动条颜色 */
    scrollbar-3dlight-color: #FFFFFF; /* IE和Edge的滚动条边缘颜色 */
}
.-modal-slider.-show {
    display: flex;
    z-index: 9999;
}
.-modal-slider.-show .-modal-slider-body {
    animation: -modal-slider-show 300ms ease 1 forwards; /* 定义动画，10秒完成一次循环 */
}
@keyframes -modal-slider-show{
    from{top: 100%;}
    to{top: 20%;}
}

.-pay-template {
    background-image: url("../svg/buy-banner.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    border-radius: .3rem;
}

.-pay-3-price {
    width: 100%;
    flex-flow: row wrap;
    overflow-x: auto;
}
.-pay-3-price .-pay-item {
    width: calc((100% - var(--gap) * 8 - (8px)) / 3);
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: .3rem;
    padding: var(--gap);
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.-pay-3-price .-pay-item:nth-child(2n){
    margin: 0 var(--gap);
}
.-pay-3-price .-pay-price {
    flex-flow: row nowrap;
}
.-pay-3-price .-pay-tips {
    position: absolute;
    left: 0;
    top: 0;
    font-size: .3rem;
    background-image: linear-gradient(to right, #FF3A46, #F67852);
    color: #fff;
    padding: .1rem .2rem;
    border-bottom-right-radius: .2rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .2rem;
}
.-pay-3-price .-pay-1 {
    font-weight: bolder;
    margin-top: var(--gap);
    white-space: nowrap;
}
.-pay-3-price .-pay-price {
    white-space: nowrap;
    align-items: baseline;
}
.-pay-3-price .-pay-price span {
    font-weight: bolder;
    font-size: .9rem;
    line-height: 1.5em;
}
.-pay-3-price .-pay-2 {
    font-size: .3rem;
    white-space: nowrap;
    color: #767676;
}
.-pay-3-price .-pay-3 {
    font-size: .3rem;
    white-space: nowrap;
    color: #AAAAAA;
    line-height: 2.5em;
}
.-pay-3-price .-pay-item.active {
    border: 2px solid #FFCE6F;
    background-color: #FFFCF6;
    color: #784F00;
}
.-pay-3-price .-pay-item.active .-pay-price {
    color: #FF3F22;
}
.-pay-3-price .-pay-item.active .-pay-2 {
    color: #784F00;
}

.-pay-2-price {
    width: 100%;
    flex-flow: row wrap;
    overflow-x: auto;
}
.-pay-2-price .-pay-item {
    width: calc((100% - var(--gap) * 5 - (6px)) / 2);
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: .3rem;
    padding: var(--gap);
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.-pay-2-price .-pay-item:nth-child(2){
    margin-left: var(--gap);
}
.-pay-2-price .-pay-price {
    flex-flow: row nowrap;
}
.-pay-2-price .-pay-tips {
    position: absolute;
    right: 0;
    top: 0;
    font-size: .3rem;
    background-image: linear-gradient(to right, #FF3A46, #F67852);
    color: #fff;
    padding: .1rem .2rem;
    border-bottom-left-radius: .3rem;
    border-top-right-radius: .3rem;
}
.-pay-2-price .-pay-1 {
    font-weight: bolder;
    margin-top: var(--gap);
    white-space: nowrap;
}
.-pay-2-price .-pay-price {
    white-space: nowrap;
    align-items: baseline;
}
.-pay-2-price .-pay-price span {
    font-weight: bolder;
    font-size: .9rem;
    line-height: 1.5em;
}
.-pay-2-price .-pay-2 {
    font-size: .3rem;
    white-space: nowrap;
    color: #767676;
}
.-pay-2-price .-pay-3 {
    font-size: .3rem;
    white-space: nowrap;
    color: #AAAAAA;
    line-height: 2.5em;
}
.-pay-2-price .-pay-item.active {
    border: 2px solid #FFCE6F;
    background-color: #FFFCF6;
    color: #784F00;
}
.-pay-2-price .-pay-item.active .-pay-price {
    color: #FF3F22;
}
.-pay-2-price .-pay-item.active .-pay-2 {
    color: #784F00;
}

.-pay-1-price {
    width: 100%;
    flex-flow: row wrap;
    overflow-x: auto;
}
.-pay-1-price .-pay-item {
    width: calc((100% - 4px));
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: .3rem;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.-pay-1-price .-pay-price {
    flex-flow: row nowrap;
}
.-pay-1-price .-pay-tips {
    position: absolute;
    right: 0;
    top: 0;
    font-size: .3rem;
    background-image: linear-gradient(to right, #FF3A46, #F67852);
    color: #fff;
    padding: .1rem .2rem;
    border-bottom-left-radius: .3rem;
    border-top-right-radius: .3rem;
}
.-pay-1-price .-pay-1 {
    font-weight: bolder;
    margin-top: var(--gap);
    white-space: nowrap;
}
.-pay-1-price .-pay-price {
    white-space: nowrap;
    align-items: baseline;
}
.-pay-1-price .-pay-price span {
    font-weight: bolder;
    font-size: .9rem;
    line-height: 1.5em;
}
.-pay-1-price .-pay-2 {
    font-size: .3rem;
    white-space: nowrap;
    color: #767676;
}
.-pay-1-price .-pay-3 {
    font-size: .3rem;
    white-space: nowrap;
    color: #AAAAAA;
    line-height: 2.5em;
}
.-pay-1-price .-pay-item.active {
    border: 2px solid #FFCE6F;
    background-color: #FFFCF6;
    color: #784F00;
}
.-pay-1-price .-pay-item.active .-pay-price {
    color: #FF3F22;
}
.-pay-1-price .-pay-item.active .-pay-2 {
    color: #784F00;
}

.-pay-type {
    width: var(--w);
    flex-flow: row nowrap;
    margin-top: .3rem;
    justify-content: space-between;
}
.-pay-type .-pay-type-left, .-pay-type .-pay-type-right {
    flex-flow: row nowrap;
}
.-pay-type .-pay-type-icon {
    width: 1.2em;
    height: 1.2em;
    font-size: 1.2em;
    margin-right: .2rem;
}
.-pay-agreement {
    width: 100%;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: var(--gap) 0;
}
.-pay-agreement a{
    color: #9D5B19;
    font-size: .4rem;
}
.-pay-qrcode {
    width: 100%;
    margin: var(--lg-gap) 0;
}
.-pay-qrcode .-pay-wechat-qrcode,
.-pay-qrcode .-pay-alipay-qrcode {
    width: 140px;
    height: 140px;
    display: none;
    border-radius: .3rem;
    border: 8px solid #01D099;
    background: #fff url('../img/loading24.gif') center no-repeat;
    position: relative;
}
.-pay-qrcode .-pay-wechat-qrcode::-webkit-scrollbar,.-pay-qrcode .-pay-alipay-qrcode::-webkit-scrollbar {
    width: 0;
}
.-pay-qrcode .-pay-wechat-qrcode canvas, .-pay-qrcode .-pay-alipay-qrcode iframe{
    width: 130px;
    height: 130px;
    overflow:hidden;
    border:none;
    position: absolute;
    left: 5px;
    top: 5px;
}
.-pay-qrcode .-pay-alipay-qrcode iframe {
    width: 130px;
    height: 130px;
    overflow: hidden;
    border: none;
    position: absolute;
    left: 10px;
    top: 10px;
}
.-pay-qrcode.alipay .-pay-alipay-qrcode ,.-pay-qrcode.wechat .-pay-wechat-qrcode {
    display: flex;
}
.-pay-qrcode .-pay-price {
    /*color: #ccc;*/
    align-items: baseline;
    line-height: 1em;
}
.-pay-qrcode .-pay-price > span:nth-child(2){
    font-size: .55rem;
    color: #01D099;
    margin-left: .1rem;
    line-height: 1em;
}
.-pay-qrcode .-pay-price > span:nth-child(3) {
    font-size: .8rem;
    font-weight: bolder;
    color: #01D099;
    line-height: 1em;
}
.-pay-btn {
    margin-top: var(--lg-gap);
    width: var(--w);
}
/* 付费页内容 end */
.-checkbox {
    display: inline-flex; cursor: pointer;
    font-size: 1.2em;
    margin-right: var(--xs-gap);
}
.-checkbox img {
    content: url("../svg/icon-uncheck.svg");
    font-size: 1.2em;
    width: 1em;
    height: 1em;
}
.-checkbox.active img {
    content: url("../svg/icon-check.svg");
}

.-history-query {
    width: 100%;
    flex-flow: row nowrap;
}
.-history-query input {
    width: 100%;
    border-radius: .3rem;
    border: 0;
    background-color: #F7F7F7;
    height: 1.2em;
    padding: var(--gap);
    font-size: .45rem;
}
.-history-query button {
    width: 3em;
    margin-left: var(--gap);
}

.-card5 .bg-watermark {
    position: absolute;
    width: 60%;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
}
.-card5 .-card-body {
    position: relative;
    z-index: 2;
}
.-card5 .-card-subtitle {
    width: var(--w);
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: #01D099;
    color: #fff;
    padding: var(--gap);
    border-radius: var(--radius);
    margin-bottom: var(--gap);
}
.-card5 .-card-subtitle-body {
    width: 100%;
    display: none;
    overflow: hidden;
    animation: -card-subtitle-body-hide 300ms ease 1 forwards;
}
.-card5 .-p- {
    width: 100%;
    flex-flow: row wrap;
    align-items: flex-start;
    padding: var(--gap) 0;
}
.-card5 .-p- .-p-item {
    width: calc((100% - var(--gap) * 2) / 3);
    border-radius: var(--radius);
    padding: var(--gap) 0;
    margin-bottom: var(--gap);
    color: #1A1A1A;
}
.-card5 .-p- .-p-item div {
    line-height: 2em;
    font-size: var(--sm-size);
}
.-card5 .-p- .-p-item > .-p-item {
    width: 100%;
}
.-card5 .-p- > .-p-item:nth-child(2),.-card5 .-p- > .-p-item:nth-child(3){
    margin-left: var(--gap);
}
.-card5 .-bg-pink {
    background-color: #FFE8EA;
}
.-card5 .-bg-green {
    background-color: #DDFDFC;
}
.-card5 .-bg-blue {
    background-color: #D6F0FF;
}
.-card5 .-bg-yellow {
    background-color: #FFF3D9;
}
.-put-away {
    flex-flow: row nowrap;
    background-color: #F7F7F7;
    color: #1a1a1a;
    padding: var(--sm-gap) var(--gap);
    font-size: var(--xs-size);
    border-radius: var(--radius);
    cursor: pointer;
}
.-put-away img {
    width: 1em;
    margin-left: .2em;
}
.-card5 .-card-subtitle-body.active {
    display: flex;
    animation: -card-subtitle-body-show 300ms ease 1 forwards;
}
@keyframes -card-subtitle-body-show{
    from {
        height: 0;
    }
    to {
        height: auto;
    }
}
@keyframes -card-subtitle-body-hide{
    from {
        height: auto;
    }
    to {
        height: 0;
    }
}
.-card5 .bg-watermark {
    display: flex;
}

@media screen and (min-width: 501px){
    .-modal .-modal-content{width: 500px;}
    .-btn-group {width: 500px !important; left: calc((100vw - 500px) / 2);}

    .-container > main{width: 500px;}

    .bottom-btn-group{width: 500px; left: calc((100% - 500px) / 2); }

    :root, html, body{font-size: calc(400px / 10);}
    .-question-btn-group {
        width: 500px; left: calc((100% - 500px) / 2);
    }
}

.mobileConsole_base div {
    display: block;
}