body {
    background: #f4f4f4;
}

header {
    position: relative;
}

header h1 {
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -.13rem;
    font-size: .18rem;
    line-height: .26rem;
    color: #FFFFFF;
    text-align: center;
}

.textCenter {
    text-align: center !important;
}

.textLeft {
    text-align: left !important;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../Image/icon.png);
    background-size: 3.6rem;
    background-repeat: no-repeat;
}

.icon-intro {
    width: .14rem;
    height: .14rem;
    background-position: -.18rem -.3rem;
    margin-right: .08rem;
}

.icon-user {
    width: .17rem;
    height: .2rem;
    background-position: -.55rem -.27rem;
}

.icon-mornning {
    width: .17rem;
    height: .2rem;
    background-position: -.97rem -.27rem;
}

.icon-money {
    width: .17rem;
    height: .2rem;
    background-position: -1.4rem -.27rem;
}

.icon-out {
    width: .17rem;
    height: .2rem;
    background-position: -1.82rem -.27rem;
}

.icon-moon {
    width: .17rem;
    height: .2rem;
    background-position: -2.26rem -.27rem;
}

.icon-vip {
    width: .17rem;
    height: .2rem;
    background-position: -2.7rem -.27rem;
}

.icon-flag {
    width: .17rem;
    height: .2rem;
    background-position: -3.17rem -.27rem;
}

.icon-community {
    width: .3rem;
    height: .3rem;
    background-position: -.13rem -.62rem;
}

.icon-content {
    width: .3rem;
    height: .3rem;
    background-position: -.64rem -.62rem;
}

.icon-function {
    width: .3rem;
    height: .3rem;
    background-position: -1.06rem -.62rem;
}

.icon-goods {
    width: .3rem;
    height: .3rem;
    background-position: -1.56rem -.62rem;
}

.icon-ch-type {
    background-image: url(../Image/icon_2.png);
    background-size: 3.75rem;
    width: .15rem;
    height: .15rem;
    background-position: -.92rem -.46rem;
}

.icon-ch-date {
    background-image: url(../Image/icon_2.png);
    background-size: 3.75rem;
    width: .15rem;
    height: .15rem;
    background-position: -2.07rem -.46rem;
}

.icon-ch-time {
    background-image: url(../Image/icon_2.png);
    background-size: 3.75rem;
    width: .15rem;
    height: .15rem;
    background-position: -2.4rem -.46rem;
}

.icon-ch-user {
    background-image: url(../Image/icon_2.png);
    background-size: 3.75rem;
    width: .15rem;
    height: .15rem;
    background-position: -1.3rem -.46rem;
}

.icon-ch-money {
    background-image: url(../Image/icon_2.png);
    background-size: 3.75rem;
    width: .15rem;
    height: .15rem;
    background-position: -2.72rem -.46rem;
}

.icon-copy {
    background-image: url(../Image/icon_2.png);
    background-size: 3.75rem;
    width: .12rem;
    height: .12rem;
    background-position: -1.67rem -.49rem;
    margin-right: .08rem;
}

.btn-box {
    padding-top: .2rem;
    text-align: center;
}

.btn {
    display: inline-block;
    vertical-align: middle;
}

.btn-join {
    background: linear-gradient(90deg, #6CD3FF 0%, #3AA7FF 100%);
    box-shadow: 0 .04rem .08rem 0 rgba(58, 167, 255, 0.50);
    border-radius: 1rem;
    color: #FFFFFF;
    font-size: .14rem;
    line-height: 1;
    padding: .13rem;
    width: 2.2rem;
}

.btn-copy {
    color: #3AA7FF;
    line-height: .18rem;
}

.content {
    width: 100%;
    padding: 0 .16rem .3rem;
}

.panel-title {
    padding: .2rem 0 .08rem;
    text-align: center;
    font-size: .14rem;
    color: #5f6379;
    letter-spacing: .004rem;
    line-height: .2rem;
}

.panel-con {
    background: #F8F8F8;
    box-shadow: 0 .07rem .1rem 0 rgba(0, 0, 0, 0.10);
    border-radius: .1rem;
    padding: .12rem .16rem;
}

.panel-con p {
    opacity: 0.8;
    font-size: .12rem;
    color: #5F6379;
    line-height: .2rem;
}

.reward-box {
    font-size: .13rem;
    color: #5F6379;
    line-height: .18rem;
}

.reward-box p {
    font-size: .1rem;
    color: #5F6379;
    line-height: .14rem;
}

.reward-box h3 {
    font-size: .15rem;
    line-height: .21rem;
    padding: .19rem 0;
}

.reward-box .money {
    font-size: .24rem;
    line-height: 1;
    color: #3AA7FF;
    font-weight: bold;
    margin-right: .06rem;
}

.reward-box .unitPrice {
    padding-bottom: .12rem;
}

.reward-box .unit {
    letter-spacing: .03rem;
    font-size: .13rem;
    color: #5F6379;
    line-height: .18rem;
}

.intro-li-1,
.intro-li-2,
.intro-li-4 {
    display: flex;
}

.intro-li-1 .left {
    width: .29rem;
    height: .2rem;
    padding: 0 .1rem 0 .02rem;
}

.intro-li-1 p.title {
    font-size: .13rem;
    line-height: .2rem;
    opacity: 1;
}

.intro-li-1 p.con {
    line-height: .17rem;
    opacity: .6;
    padding: .04rem 0 .08rem;
}

.intro-li-2 .left {
    width: .13rem;
    height: .16rem;
}

.intro-li-2 .circle {
    display: inline-block;
    vertical-align: middle;
    width: .03rem;
    height: .03rem;
    border-radius: .02rem;
    background: rgba(0, 0, 0, 0.40);
}

.intro-li-2 p.con {
    font-size: .11rem;
    opacity: .6;
    color: #5F6379;
    line-height: .16rem;
    padding-bottom: .1rem;
}

.intro-li-2:last-child p.con {
    padding: 0;
}

.panel-con.desc-box {
    padding: .16rem .18rem .34rem;
}

.desc-box h3 {
    opacity: .6;
    font-size: .12rem;
    padding: .08rem 0 .2rem;
    line-height: .16rem;
}

.desc-box p {
    opacity: .6;
    font-size: .12rem;
    line-height: .16rem;
}

.desc-box img {
    padding: .05rem 0 .2rem;
}

.desc-box img:last-child {
    padding-bottom: 0;
}

.intro-li-3 {
    display: inline-block;
    vertical-align: text-top;
    width: 50%;
    text-align: center;
    padding: .04rem 0;
}

.intro-li-3:nth-child(3),
.intro-li-3:nth-child(4) {
    padding-top: .1rem;
}

.intro-li-3 .title {
    font-size: .13rem;
    color: #3AA7FF;
    line-height: .18rem;
    padding: .16rem 0 .06rem;
}

.intro-li-3 .desc {
    font-size: .11rem;
    color: #5F6379;
    line-height: .14rem;
}

.intro-li-4 {
    padding-bottom: .18rem;
}

.intro-li-4:last-child {
    padding-bottom: 0;
}

.intro-li-4 .title {
    display: inline-block;
    vertical-align: middle;
    line-height: .2rem;
    opacity: 0.6;
    font-size: .14rem;
    color: #5F6379;
    padding: 0 .1rem;
}

.intro-li-4 .right p {
    font-size: .14rem;
    color: #5F6379;
}

.intro-li-4 .right img {
    width: .3rem;
    height: .3rem;
    border-radius: .2rem;
}

.panel-con.home-box {
    width: 2.4rem;
    margin: .22rem auto .25rem;
    background: #F8F8F8;
    border-radius: 6px;
    position: relative;
    border: 1px solid #3AA7FF;
    font-size: .13rem;
    color: #5F6379;
}

.panel-con.home-box .flag {
    width: .34rem;
    height: auto;
    position: absolute;
    top: -.18rem;
    left: .03rem;
}

.panel-con.home-box h2 {
    font-size: .15rem;
    line-height: .21rem;
    color: #5F6379;
    text-align: center;
    padding-bottom: .12rem;
}

.panel-con.home-box #room {
    border: 0;
    background: #F8F8F8;
    width: .8rem;
    color: #3AA7FF;
    font-size: .13rem;
}

#ownerName {
    font-size: .13rem;
    color: #3AA7FF;
    line-height: .18rem;
    margin: 0 .05rem;
}