.box {
    position: relative;
    font-size: 0.27rem;
    color: #333333;
    background: linear-gradient(180deg, rgba(89,132,245,1) 0%, rgba(245,245,245,1) 100%);
}

/* 顶部banner图 */

.banner img {
    /* position: relative; */
    width: 100%;
    height: 2.93rem;
    /* background-image: url("../../resource/images/banner.png"); */
    /* background-size: 100% 100%; */
}

.city {
    position: absolute;
    top: 0.26rem;
    right: 0.24rem;
    padding: 0.08rem 0.16rem 0.08rem 0.3rem;
    border-radius: 0.3rem;
    font-size: 0.23rem;
    background-color: #ffffff;
}

.city img {
    width: 0.14rem;
    height: 0.09rem;
    margin-left: 0.1rem;
    margin-bottom: 0.02rem;
    vertical-align: middle;
}

.container {
    padding: 0.24rem;
}

/*  */
.content {
    padding: 0.24rem 0.24rem 0.4rem;
    border-radius: 0.2rem;
    background-color: #fff;       
}

.content ul {
    padding: 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.3rem;
    color: #333333;
    background-color: #F5F5F5;
}

.content ul li {
    margin-bottom: 0.16rem;
}

.content ul li:last-child {
    margin-bottom: 0;
}

.content ul li .value {
    color: #666;
}

.content ul li input {
    width: 2.6rem;
    font-size: 0.3rem;
    background: transparent;
}

.switch-one,.switch-two {
    margin-top: 0.24rem;
}

.switch-one img,.switch-two img {
    width: 0.8rem;
    height: 0.4rem;
}

.content .open {
    display: none;
}

.calculate,.blue-btn {
    margin-top: 0.58rem;
    padding: 0.18rem 0;
    border-radius: 0.5rem;
    color: #fff;
    text-align: center;
    background-color: #3372FD;
}

.restart {
    margin-top: 0.32rem;
    padding: 0.18rem 0;
    border-radius: 0.5rem;
    border: 0.01rem solid #3372FD;
    color: #3372FD;
    text-align: center;
    background-color: #fff;
}

.other {
    margin-top: 0.4rem;
    padding: 0.3rem 0.8rem 0.34rem;
    border-radius: 0.2rem;
    background-color: #ffffff;
}

.other a {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #000000;
}

.other img {
    width: 0.88rem;
    height: 0.88rem;
    margin-bottom: 0.16rem;
}

.result-box {
    padding: 0.48rem 0.24rem;
    border-radius: 0.2rem;
    background-color: #ffffff;
}

.result-box .name {
    font-size: 0.3rem;
    color: #000;
    text-align: center;
}

.result-box .money {
    margin-top: 0.2rem;
    font-size: 0.6rem;
    color: #000;
    text-align: center;
}

.result-box ul {
    margin-top: 0.32rem;
    padding: 0.24rem;
    border-radius: 0.2rem;
    background-color: #F5F5F5;
}

/* .result-box ul li {
    margin-bottom: 0.24rem;
} */

.result-box ul li:first-child {
    font-size: 0.34rem;
    margin-bottom: 0.24rem;
}

.result-box ul li:nth-child(2) {
    font-size: 0.3rem;
    margin-bottom: 0.24rem;
}

.result-box ul li:nth-child(3) {
    font-size: 0.24rem;
    color: #999999;
}

.result-box .spread {
    margin-top: 0.24rem;
    padding: 0.24rem 1.9rem 0;
    padding-top: 0.24rem;
    border-top: 0.01rem solid rgba(0,0,0,.1);
}

.result-box .spread img {
    width: 0.24rem;
    height: 0.12rem;
    margin-left: 0.24rem;
    margin-top: 0.05rem;
}

.result-box .gongshi {
    display: none;
    margin-top: 0.24rem;
    padding: 0.32rem;
    border-radius: 0.2rem;
    background-color: #ffffff;
}

.share-box {
    margin: 1rem 0.9rem 0.4rem;
}

.share-box .line {
    width: 1.5rem;
    height: 0.01rem;
    background-color: #c7c7c7;
}

.share-box .share-pic {
    margin-top: 0.4rem;
    padding: 0 0.8rem 0 0.7rem;
}

.share-box .share-pic img {
    width: 0.8rem;
    height: 0.8rem;
    margin-bottom: 0.16rem;
}

.popup {
    position: absolute;
    /* top: 50%; */
    display: none;
    max-height: 70%;
    margin: 0 0.35rem;
    z-index: 1001;
}

.popup .shuibiao-img {
    width: 1.2rem;
    height: 1.04rem;
}

.popup .pic img {
    width: 100%;
}

.modal-content {
    /* position: relative; */
    /* display: none; */
    /* margin: 0 0.75rem; */
    padding: 0.88rem 0.4rem 0.4rem;
    border-radius: 0.2rem;
    background: linear-gradient(180deg, rgba(139,175,255,1) 0%, rgba(245,245,245,1) 100%);
}

.modal-content .logo {
    position: absolute;
    top: 0;
    left: 0.4rem;
    width: 1.28rem;
    padding: 0.05rem 0.13rem 0;
    border-radius: 0 0 0.16rem 0.16rem;
    background-color: #3372FD;
}

.modal-content .logo img {
    width: 1.02rem;
    height: 0.48rem;
}

.modal-content .money-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.05rem;
    height: 2.39rem;
}

.modal-content .img-box {
    position: relative;
}

/* .modal-content .img-box img {
   width: 100%;
   border-radius: 0.2rem;
} */

.bushui-img,.tuishui-img {
    position: absolute;
    display: none;
    right: 0;
}

.bushui-img {
    width: 0.97rem;
    height: 0.79rem;
    margin-top: 0.6rem;
    margin-right: 0.54rem;
}

.tuishui-img {
    width: 1.1rem;
    height: 0.98rem;
    margin-top: 0.45rem;
    margin-right: 0.41rem;
}

.saveImg {
    position: relative;
    display: none;
    margin: 0 0.75rem;
    border-radius: 0.2rem;
}

.share-img {
    width: 100%;
    border-radius: 0.2rem;
}

/* #result_canvas {
    transform: scale(0.8);
} */