::-webkit-scrollbar {
    width: 0px;
}
.dialog-wrapper {
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
@font-face {
    font-family: "SourceHan";
    src: url("../fonts/SourceHan.ttf");
}
@font-face {
    font-family: "SweiSpring";
    src: url("../fonts/SweiSpring.ttf");
}
* img {
    display: block;
    width: 100%;
}
.wrap {
    width: 100%;
    overflow: hidden;
    padding-bottom: 1rem;
}
.floor1AndFloor2 {
    width: 100%;
    height: 23.2rem;
    /* background: url(../img/mo/page1_bg1.jpg) no-repeat top center; */
    background-size: 100% 100%;
}
.floor1 {
    width: 100%;
    height: 13.3rem;
    background: url('../img/mo/floor1_bg.jpg') no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.music,
.login,
.logged {
    width: 0.7rem;
    height: 0.7rem;
    float: right;
    margin: 0.24rem 0.24rem 0 0;
}
.musicActive {
    -webkit-animation: mymove 5s linear infinite;
    animation: mymove 5s linear infinite;
}
@-webkit-keyframes mymove {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes mymove {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.floor2 {
    width: 100%;
    height: 9.92rem;
    overflow: hidden;
    background: url('../img/mo/floor2_bg.jpg') no-repeat;
    background-size: 100%;
}
.joinCount {
    width: 100%;
    font-size: 0.24rem;
    color: #000000;
    margin-top: 9.2rem;
}
.joinCount p {
    display: block;
    width: 100%;
    height: 0.32rem;
    line-height: 0.32rem;
    text-align: center;
}
.joinCount p span {
    color: #e37673;
    font-size: 0.32rem;
    font-weight: bold;
}
.f2_infoBox {
    width: 6.37rem;
    height: 8.16rem;
    background: url(../img/mo/page2_box.png) no-repeat top center;
    background-size: 100% 100%;
    margin: 0.35rem auto 0;
    overflow: hidden;
    padding: 0.25rem 0.48rem;
    box-sizing: border-box;
    font-family: "SourceHan";
    position: relative;
}
.f2_01 {
    width: 5.3rem;
    height: 0.58rem;
    margin: 0.9rem auto 0;
}
.f2_area {
    width: 100%;
    height: 0.58rem;
    overflow: hidden;
    text-align: center;
    position: relative;
    border: 1px solid #bea6c4;
}
.f2_area p {
    height: 100%;
    font-size: 0.21rem;
    color: #9671a7;
    line-height: 0.34rem;
    height: 0.34rem;
    margin: 0.1rem 0;
    float: left;
    width: 1.74rem;
    border-right: 1px solid #a382ae;
}
.f2_area img {
    width: 0.14rem;
    margin: 0.23rem 0 0 -0.2rem;
    float: left;
}
.f2-download {
    width: 6.37rem;
    height: 3.27rem;
    margin: 0.1rem auto 0;
    background: url('../img/mo/page1_box.png') no-repeat center/100% 100%;
    overflow: hidden;
}
.areaLists {
    display: none;
    width: 1.7rem;
    height: auto;
    max-height: 5rem;
    overflow: auto;
    position: absolute;
    top: 0.54rem;
    left: 0;
    background: #fff;
    overflow: hidden;
    padding-bottom: 0.2rem;
}
.areaLists li {
    width: 1.5rem;
    height: 0.5rem;
    margin: 0 auto;
    border-bottom: 0.01rem solid #222;
    font-size: 0.21rem;
    color: #9671a7;
    text-align: center;
    line-height: 0.5rem;
}
.f2_infoBox .title-icon {
    width: 0.56rem;
    height: 0.56rem;
    display: inline-block;
    margin-right: 0.2rem;
}
.f2_infoBox .title-icon.icon1 {
    background: url("../img/page2_1.png") no-repeat;
    background-size: 100%;
}
.f2_infoBox .title-icon.icon2 {
    background: url("../img/page2_2.png") no-repeat;
    background-size: 100%;
}
.f2_infoBox .title-icon.icon3 {
    background: url("../img/page2_3.png") no-repeat;
    background-size: 100%;
}
.f2_infoBox .title1,
.f2_infoBox .title2 {
    font-size: 0.3rem;
    color: #4c3056;
}
.f2_infoBox .title2 {
    margin-top: 0.2rem;
}
.f2_infoBox .title2 span {
    line-height: 0.56rem;
}
.f2_infoBox .title3 {
    margin-top: 0.2rem;
    overflow: hidden;
}
.f2_infoBox .title3 .title-icon {
    float: left;
}
.f2_infoBox .title3 .t3-book {
    font-size: 0.36rem;
    color: #8c649c;
}
.f2_infoBox .title3 .t3-gift {
    display: block;
    line-height: 0.4rem;
    color: #2e2133;
    font-size: 0.3rem;
}
.f2_phone {
    width: 3.6rem;
    height: 0.58rem;
    float: left;
    position: relative;
}
.f2_phone input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    margin: 0;
    padding: 0 0.2rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 0.54rem;
    font-size: 0.21rem;
    color: #9671a7;
}
.f2_01_btn {
    width: 5.34rem;
    height: 1rem;
    margin: 0.17rem auto 0;
    font-size: 0;
    background: url("../img/page2_btn1.png") no-repeat;
    background-size: 100%;
}
.f2_02 {
    width: 5.38rem;
    height: 0.6rem;
    margin: 0.1rem 0 0 0.7rem;
    font-size: 0;
}
.f2_infoBox .reward-bg {
    width: 4.09rem;
    height: 0.64rem;
    background: url("../img/mo/page2_btn6.png") no-repeat;
    background-size: 100%;
    margin: -0.1rem 0 0 0.8rem;
}
.f2_03 {
    width: 3.76rem;
    height: 1.12rem;
    margin: 1.6rem 0 0 0.1rem;
    font-size: 0;
}
.f2_03.google {
    background: url("../img/page2_btn3.png") no-repeat;
    background-size: 100%;
    margin-left: 0.3rem;
    width: 3.26rem;
}
.f2_03.ios {
    background: url("../img/page2_btn4.png") no-repeat;
    background-size: 100%;
}
.f2_rw {
    width: 2.66rem;
    height: 3.42rem;
    background: url("../img/page2_rw.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.1rem;
    bottom: 0.1rem;
    pointer-events: none;
}
.f2_yyCount {
    width: 5.7rem;
    height: 5.74rem;
    margin: 2.45rem auto 0;
    background: url(../img/mo/f2_yyBg.png) no-repeat top center;
    background-size: 100% 100%;
}
.f2_yyCount li {
    width: 1.66rem;
    height: 2.8rem;
    float: left;
    margin: 0 0.36rem 0.18rem 0;
}
.f2_yyCount li:nth-child(3) {
    margin-right: 0;
}
.f2_yyCount li:nth-child(4) {
    margin-left: 1rem;
}
.f2_yyCount li img {
    display: none;
    width: 1.12rem;
    height: 0.68rem;
    margin: 0.74rem 0 0 -0.22rem;
}
.floor3 {
    width: 100%;
    height: 12.13rem;
    background: url(../img/mo/page3_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
}
.f3_login {
    /* display: none; */
    width: 100%;
    text-align: center;
    font-size: 0.2rem;
    color: #855f94;
    text-decoration: underline;
    margin-top: 1.5rem;
}
.f3_logining {
    display: none;
    width: 100%;
    height: 0.5rem;
    text-align: center;
    margin-top: 1.5rem;
}
.f3_logining p {
    display: inline-block;
    font-size: 0.2rem;
    color: #855f94;
}
.f3_logining p:last-child {
    text-decoration: underline;
}
.giftSearch {
    width: 2.24rem;
    height: 0.43rem;
    margin: 0.12rem auto 0;
}
.createBox {
    width: 6.67rem;
    height: 9.3rem;
    margin: 0.16rem auto 0;
    background: url(../img/mo/page3_pass.png) no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
}
.createBtn {
    width: 2.88rem;
    height: 0.7rem;
    margin: 7.58rem auto 0;
    font-size: 0;
}
.floor4 {
    width: 100%;
    height: 12.14rem;
    background: url(../img/mo/page4_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
}
.f4_btns {
    width: 6.94rem;
    margin: 2rem auto 0;
    overflow: hidden;
}
.join-club {
    width: 3.37rem;
    height: 0.92rem;
    float: left;
    font-size: 0;
    background: url("../img/page4_btn4.jpg") no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: all ease 0.2s;
}
.join-club.active {
    background: url("../img/page4_btn3.jpg") no-repeat;
    background-size: 100%;
    transition: all ease 0.2s;
}
.create-club {
    width: 3.37rem;
    height: 0.92rem;
    float: right;
    background: url("../img/page4_btn2_2.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: all ease 0.2s;
}
.create-club.active {
    background: url("../img/page4_btn2.jpg") no-repeat;
    background-size: 100%;
    transition: all ease 0.2s;
}
.my-club {
    display: none;
    width: 3.37rem;
    height: 0.92rem;
    float: right;
    background: url("../img/page4_btn1.jpg") no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: all ease 0.2s;
}
.my-club.active {
    background: url("../img/page4_btn.jpg") no-repeat;
    background-size: 100%;
    transition: all ease 0.2s;
}
.tmListsBox {
    width: 6.94rem;
    height: 6.94rem;
    margin: 0.46rem auto 0;
    display: block;
    position: relative;
}
.f4_page {
    width: 100%;
    height: 0.5rem;
    text-align: center;
}
.f4_page button,
.f4_page .pageWrap {
    display: inline-block;
    float: unset !important;
    vertical-align: bottom;
}
#pageSelect {
    height: 0.5rem;
}
#pageSelect li {
    height: 0.5rem;
    font-size: 0.24rem;
    float: left;
}
.tmListsBox2 {
    display: none;
    width: 6.94rem;
    height: 6.94rem;
    margin: 0.46rem auto 0;
}
.createTmhInfo {
    width: 6.32rem;
    margin: 0.25rem auto 0;
    overflow: hidden;
}
.createTmhInfo li {
    width: 100%;
    position: relative;
    height: 0.55rem;
    border: 0.01rem solid #c1bfc0;
    margin-bottom: 0.23rem;
    box-sizing: border-box;
}
.createTmhInfo li input {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0 0.1rem;
    line-height: 0.5rem;
    box-sizing: border-box;
    font-size: 0.21rem;
    color: #8f8f8f;
}
.createTmhInfo li textarea {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0.1rem;
    box-sizing: border-box;
    text-align: justify;
    font-size: 0.21rem;
    color: #8f8f8f;
}
.createTmhInfo li:last-child {
    height: 3.25rem;
    margin-bottom: 0;
}
.t2_submmit {
    width: 2.81rem;
    height: 0.66rem;
    margin: 0.22rem auto 0;
    background: url(../img/mo/page4_btn8.png) no-repeat top center;
    background-size: 100% 100%;
    text-align: center;
    line-height: 0.66rem;
    font-size: 0.28rem;
    color: #fff;
}
.tmLists_title {
    width: 100%;
    height: 0.56rem;
    color: #87607b;
    font-family: SweiSpringSugarCJKsc;
    font-size: 0.34rem;
    text-align: center;
    line-height: 0.56rem;
}
.tmLists_search {
    width: 6.6rem;
    height: 0.5rem;
    text-align: center;
    line-height: 0.5rem;
    font-size: 0.26rem;
    color: #8e8e8e;
    padding-right: 0.75rem;
    position: relative;
    box-sizing: border-box;
    margin: 0.2rem auto 0;
}
.r_s_sign {
    width: 0.34rem;
    height: 0.33rem;
    position: absolute;
    top: 0.08rem;
    right: 0.2rem;
    z-index: 9;
}
.tmLists_search input {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 0.75rem;
    box-sizing: border-box;
    text-align: center;
    line-height: 0.5rem;
    outline: none;
    border: 0.01rem solid #bab9b7;
}
.tmLists {
    width: 6.6rem;
    height: 4.2rem;
    overflow: hidden;
    margin: 0.2rem auto 0.35rem;
}
.tmLists li {
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
}
.f4_tmName {
    font-size: 0.2rem;
    color: #8d8d8d;
    float: left;
    width: 1.2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.f4_tmCount {
    font-size: 0.2rem;
    color: #8d8d8d;
    float: left;
}
.f4_qunInfo {
    width: 1.6rem;
    height: 0.5rem;
    background: url(../img/mo/page4_btn5.png) no-repeat top center;
    background-size: 100% 100%;
    float: right;
    margin-right: 0.15rem;
    font-size: 0.24rem;
    color: #fffeff;
    text-align: center;
    line-height: 0.5rem;
    margin-top: 0.1rem;
}
.f4_isJoin {
    width: 1.25rem;
    height: 0.5rem;
    background: url(../img/mo/page4_btn6.png) no-repeat top center;
    background-size: 100% 100%;
    float: right;
    font-size: 0.24rem;
    color: #fffeff;
    text-align: center;
    line-height: 0.5rem;
    margin-top: 0.1rem;
}
.floor5 {
    width: 100%;
    height: 12.13rem;
    background: url(../img/mo/page5_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
}
.mySwiper1 {
    width: 100%;
    height: 12.13rem;
    position: relative;
}
.mySwiper1 .swiper-slide {
    width: 100%;
    height: 12.13rem;
}
.mySwiper1 .swiper-pagination {
    width: 7.08rem;
    height: 1.77rem;
    bottom: 1.25rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.mySwiper1 .swiper-pagination-bullet {
    width: 1.77rem;
    height: 1.77rem;
    opacity: 1;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    margin: 0 !important;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(1) {
    background: url(../img/mo/swiper1_btn1.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(2) {
    background: url(../img/mo/swiper1_btn2.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(3) {
    background: url(../img/mo/swiper1_btn3.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(4) {
    background: url(../img/mo/swiper1_btn4.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
    background: url(../img/mo/swiper1_btn1s.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {
    background: url(../img/mo/swiper1_btn2s.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {
    background: url(../img/mo/swiper1_btn3s.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active {
    background: url(../img/mo/swiper1_btn4s.png) no-repeat top center;
    background-size: 100% 100%;
}
.mySwiper1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    filter: transparent;
}
.mySwiper1 .swiper-slide {
    position: relative;
}
.mySwiper1 .swiper-slide > img {
    display: block;
    width: 100%;
}
.f5_btn {
    width: 0.68rem;
    height: 2.44rem;
    position: absolute;
    top: 4.16rem;
    left: 0.64rem;
}
.f5_btn2 {
    width: 0.68rem;
    height: 2.44rem;
    position: absolute;
    top: 2.16rem;
    left: 0.64rem;
}
.floor6 {
    width: 100%;
    height: 12.14rem;
    background: url(../img/mo/page6_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
}
.mySwiper2 {
    width: 5.2rem;
    height: 9.24rem;
    margin: 1.92rem auto 0;
    overflow: hidden;
}
.mySwiper2 .swiper-slide {
    width: 100%;
    height: 100%;
}
.floor6 .swiper-pagination {
    width: 100%;
    height: 0.36rem;
    text-align: center;
    margin-top: 0.32rem;
}
.floor6 .swiper-pagination-bullet {
    width: 0.36rem;
    height: 0.36rem;
    background: url(../img/mo/page6_fy1.png) no-repeat top center;
    background-size: 100% 100%;
}
.floor6 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 0.36rem;
    height: 0.36rem;
    background: url(../img/mo/page6_fy.png) no-repeat top center;
    background-size: 100% 100%;
}
.floor6 .swiper-button-prev,
.floor6 .swiper-button-next {
    width: 0.7rem;
    height: 0.84rem;
    top: 53%;
}
.floor6 .swiper-button-prev {
    background: url(../img/mo/page6_z.png) no-repeat top center;
    background-size: 100% 100%;
    left: 0.2rem;
}
.floor6 .swiper-button-next {
    background: url(../img/mo/page6_y.png) no-repeat top center;
    background-size: 100% 100%;
    right: 0.2rem;
}
.floor7 {
    width: 100%;
    height: 11.14rem;
    background: url(../img/mo/page7_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
}
.zysx_btn {
    width: 2.81rem;
    height: 0.66rem;
    margin: 0.62rem auto 0.35rem;
}
.FB_box {
    width: 5.08rem;
    height: 0.7rem;
    margin: 0 auto;
}
.FB_game {
    width: 2.47rem;
    height: 0.7rem;
    float: left;
}
.FB_player {
    width: 2.47rem;
    height: 0.7rem;
    float: right;
}
.iframeBox {
    width: 5rem;
    height: 8.05rem;
    margin: 0.32rem auto 0;
    overflow: auto;
}
.fb_iframe_widget_fluid.fb-page {
    display: block;
    height: 500px;
}
.bottom-bar {
    width: 7.5rem;
    height: 1.94rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../img/bottom_bar.png") no-repeat;
    background-size: 100%;
    z-index: 20;
}
.footer {
    width: 100%;
    box-sizing: border-box;
    height: 4rem;
    font-size: 0.16rem;
    color: #8e8e8e;
    font-family: "SourceHan";
    overflow: hidden;
    background-color: #f1dbd3;
    padding: 0 0.9rem;
}
.footer .footer-logo {
    overflow: hidden;
}
.footer .logo1 {
    width: 2.5rem;
    height: 0.7rem;
    background: url("../img/mo/footer_logo.png") no-repeat;
    background-size: 100%;
    float: left;
    margin: 0 0.42rem 0 0.78rem;
}
.footer .seprator {
    height: 0.7rem;
    width: 0;
    border-left: 1px solid #76645d;
    float: left;
}
.footer .logo2 {
    width: 0.63rem;
    height: 0.63rem;
    background: url("../img/footer_15.png") no-repeat;
    background-size: 100%;
    float: left;
    margin-left: 0.42rem;
}
.footer .emials {
    margin-top: 0.24rem;
}
.footer .emials p:first-child {
    font-size: 0.2rem;
    margin-bottom: 0.3rem;
}
.footer .link-groups a {
    margin-right: 0.2rem;
}
.footer .emials .tc1Box,
.tc2Box,
.tc3Box,
.tc4Box,
.tc5Box,
.tc6Box,
.tc7Box,
.tc8Box,
.tc9Box,
.tc10Box,
.tc11Box,
.tc12Box,
.tc13Box {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}
.tc_public {
    background-size: 100% 100% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.login_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc_login.png) no-repeat top center;
}
.login_close,
.tc1_close,
.tc2_close,
.tc3_close,
.tc4_close,
.tc5_close,
.tc6_close,
.tc7_close,
.tc8_close,
.tc9_close,
.tc10_close,
.tc11_close,
.tc12_close {
    width: 0.3rem;
    height: 0.3rem;
    float: right;
    margin: 0.18rem 0.18rem 0 0;
    font-size: 0;
}
.login_phone {
    width: 3.8rem;
    height: 0.5rem;
    margin: 1.3rem auto 0;
    position: relative;
}
.login-dialog {
    width: 5.34rem;
    height: 3.84rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("../img/poup_box.png") no-repeat;
    background-size: 100%;
    font-family: "SourceHan";
}
.dialog-close {
    width: 0.24rem;
    height: 0.24rem;
    background: url("../img/poup_close.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.22rem;
    top: 0.18rem;
    cursor: pointer;
}
.login-dialog .dialog-title {
    font-size: 0.4rem;
    color: #ddd1e9;
    font-family: "SweiSpring";
    text-align: center;
    line-height: 0.4rem;
    margin-top: 0.4rem;
}
.login-dialog .di-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background-color: #fff;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0;
    text-align: center;
    font-size: 0.22rem;
}
.login-dialog input::-webkit-outer-spin-button,
.login-dialog input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.login-dialog input::placeholder {
    font-size: 0.22rem;
    font-family: "SourceHan";
    color: #8e8e8e;
}
.login-dialog .phone-wrapper {
    width: 3.8rem;
    display: block;
    margin: 0.16rem auto 0;
    overflow: hidden;
}
.login-dialog .phone-label {
    font-size: 0.22rem;
    font-family: "SourceHan";
    color: #fff;
    float: left;
    line-height: 0.46rem;
}
.login-dialog .area-choose {
    outline: none;
    float: left;
    width: 2.4rem;
    height: 0.46rem;
    margin-left: 0.4rem;
    font-size: 0.2rem;
    font-family: "SourceHan";
    color: #8e8e8e;
}
.login-dialog .code-wrapper {
    overflow: hidden;
    position: relative;
}
.login-dialog .di-input.phone-number {
    width: 3.8rem;
    display: block;
    margin: 0.2rem auto 0;
}
.login-dialog .di-input.verify-code {
    width: 2.3rem;
    float: left;
    margin: 0.17rem 0.16rem 0 0.76rem;
}
.login-dialog .send-code-btn {
    width: 1.34rem;
    height: 0.5rem;
    float: left;
    margin-top: 0.17rem;
    line-height: 0.5rem;
    color: #fff;
    font-size: 0.22rem;
    letter-spacing: 0.02rem;
    text-align: center;
    background-color: #988ebd;
    cursor: pointer;
}
.login-dialog .send-validate {
    width: 1.34rem;
    height: 0.5rem;
    position: absolute;
    margin: 0.17rem 0 0 -1.34rem;
    opacity: 0;
    cursor: pointer;
}
.login-dialog .login-btn {
    width: 2rem;
    height: 0.52rem;
    line-height: 0.52rem;
    background: url("../img/ppoup_btn1.png") no-repeat;
    background-size: 100%;
    margin: 0.28rem auto 0;
    font-size: 0.26rem;
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.region-error-dialog {
    width: 5.34rem;
    height: 2.04rem;
    background: url("../img/poup_box2.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SweiSpring";
    text-align: center;
}
.region-error-dialog .error-message {
    margin-top: 0.54rem;
}
.region-error-dialog p {
    color: #dac3e2;
    font-size: 0.36rem;
    line-height: 0.5rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
}
.login_yzm {
    width: 2.3rem;
    height: 0.5rem;
    margin: 0.18rem 0.16rem 0.34rem 0.77rem;
    position: relative;
    float: left;
}
.login_phone input,
.login_yzm input {
    font-size: 0.21rem;
    color: #8e8e8e;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    text-align: center;
    line-height: 0.5rem;
    outline: none;
    border: 0;
    background: transparent;
}
.login_get_yzm {
    width: 1.34rem;
    height: 0.5rem;
    float: left;
    margin-top: 0.18rem;
}
.login_get_yzm p {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0.21rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.48rem;
}
.login-btn {
    width: 2.08rem;
    height: 0.59rem;
    margin: 0.98rem auto 0;
    font-size: 0;
}
.tc1_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc1.png) no-repeat top center;
}
.tc1_info {
    width: 100%;
    margin-top: 0.66rem;
}
.tc1_info p {
    display: block;
    width: 100%;
    font-size: 0.26rem;
    color: #fff;
    text-align: center;
    margin-bottom: 0.07rem;
}
.tc1_btn {
    width: 4.32rem;
    height: 0.54rem;
    margin: 1.07rem auto 0;
}
.tc1_jlFind,
.tc1_loginOut {
    width: 2.05rem;
    height: 0.54rem;
    float: left;
    font-size: 0;
}
.tc1_loginOut {
    float: right;
}
.tc2_main {
    width: 5.34rem;
    height: 4.14rem;
    background: url(../img/mo/tc2.png) no-repeat top center;
}
.tc2_btn {
    width: 4rem;
    height: 0.54rem;
    margin: 3.32rem auto 0;
}
.tc2_google,
.tc2_ios {
    width: 1.94rem;
    height: 0.56rem;
    float: left;
    font-size: 0;
}
.tc2_ios {
    float: right;
}
.tc3_main {
    width: 5.34rem;
    height: 4.14rem;
    background: url(../img/mo/tc3.png) no-repeat top center;
}
.tc3_btn {
    width: 4rem;
    height: 0.54rem;
    margin: 3.32rem auto 0;
}
.tc3_google,
.tc3_ios {
    width: 1.94rem;
    height: 0.56rem;
    float: left;
    font-size: 0;
}
.tc3_ios {
    float: right;
}
.tc4_main {
    width: 5.34rem;
    height: 2.04rem;
    background: url(../img/mo/tc4.png) no-repeat top center;
}
.tc5_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc5.png) no-repeat top center;
}
.tc5_text {
    width: 4.56rem;
    height: 3rem;
    margin: 0.5rem auto 0;
    overflow: auto;
    box-sizing: border-box;
}
.tc5_text h1 {
    font-size: 0.25rem;
    color: #ddd1e9;
    text-align: justify;
    margin-bottom: 0.12rem;
    font-weight: bold;
}
.tc5_text h2 {
    font-size: 0.18rem;
    color: #ddd1e9;
    text-align: justify;
    margin-bottom: 0.12rem;
    font-weight: bold;
}
.tc5_text p {
    font-size: 0.18rem;
    color: #ddd1e9;
    text-align: justify;
    line-height: 1.8;
}
.tc6_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc6.png) no-repeat top center;
}
.tc6_info {
    width: 4.55rem;
    height: 2.45rem;
    margin: 0.5rem auto 0;
}
.tc6_name,
.tc6_href,
.tc6_message {
    width: 100%;
    font-size: 0.21rem;
    color: #fff;
}
.tc6_name {
    padding: 0.26rem 0 0 1.4rem;
    box-sizing: border-box;
}
.tc6_href {
    padding: 0.42rem 0 0 1.4rem;
    box-sizing: border-box;
}
.tc6_message {
    display: block;
    height: 1.2rem;
    overflow: auto;
    padding: 0.4rem 0 0 0.7rem;
    box-sizing: border-box;
}
.tc6_btn {
    width: 1.96rem;
    height: 0.48rem;
    margin: 0.1rem auto 0;
}
.tc7_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc7.png) no-repeat top center;
}
.tc7_info {
    width: 4.55rem;
    height: 2.45rem;
    margin: 0.5rem auto 0;
}
.tc7_name,
.tc7_href,
.tc7_message {
    width: 100%;
    font-size: 0.21rem;
    color: #fff;
}
.tc7_name {
    padding: 0.26rem 0 0 1.4rem;
    box-sizing: border-box;
}
.tc7_href {
    padding: 0.42rem 0 0 1.4rem;
    box-sizing: border-box;
}
.tc7_message {
    display: block;
    height: 1.2rem;
    overflow: auto;
    padding: 0.4rem 0 0 0.7rem;
    box-sizing: border-box;
}
.tc7_btn {
    width: 1.96rem;
    height: 0.48rem;
    margin: 0.1rem auto 0;
}
.tc8_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc8.png) no-repeat top center;
}
.tc9_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc9.png) no-repeat top center;
}
.tc10_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc10.png) no-repeat top center;
}
.tc10_info {
    width: 4.28rem;
    margin: 1rem auto 0;
}
.tc10_info h1 {
    font-size: 0.21rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0.1rem;
}
.tc10_name {
    display: block;
    width: 100%;
    font-size: 0.21rem;
    color: #fff;
    margin-bottom: 0.07rem;
    word-wrap: break-word;
}
.tc10_href {
    display: block;
    width: 100%;
    font-size: 0.21rem;
    color: #fff;
    margin-bottom: 0.07rem;
    word-wrap: break-word;
    height: 0.6rem;
    overflow: auto;
}
.tc10_btn {
    width: 2rem;
    height: 0.5rem;
    margin: 0.7rem auto 0;
    font-size: 0;
}
.tc11_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc11.png) no-repeat top center;
}
.tc11_btn {
    width: 4.27rem;
    height: 0.8rem;
    margin: 2.2rem auto 0;
    font-size: 0;
}
.tc12_main {
    width: 5.34rem;
    height: 3.84rem;
    background: url(../img/mo/tc12.png) no-repeat top center;
}
.tc12_table {
    width: 4.55rem;
    height: 2.1rem;
    margin: 1rem auto 0;
    overflow: auto;
}
.tc12_title {
    width: 100%;
    height: 0.5rem;
}
.tc12_title li {
    width: 1.51rem;
    height: 0.5rem;
    float: left;
    border-right: 0.01rem solid #917ca3;
    border-bottom: 0.01rem solid #917ca3;
    font-size: 0.23rem;
    color: #7a5f92;
    background: #e8e5ec;
    box-sizing: border-box;
    text-align: center;
    line-height: 0.5rem;
}
.tc12_title li:nth-child(3n) {
    border-right: 0px;
}
.tc12_lists {
    width: 100%;
    height: 1.5rem;
    overflow: auto;
}
.tc12_lists li {
    width: 100%;
    height: 0.5rem;
}
.tc12_lists li p {
    display: block;
    width: 1.51rem;
    height: 0.5rem;
    float: left;
    border-right: 0.01rem solid #917ca3;
    border-bottom: 0.01rem solid #917ca3;
    font-size: 0.21rem;
    color: #7a5f92;
    background: #e8e5ec;
    box-sizing: border-box;
    text-align: center;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.05rem;
}
.tc13_main {
    width: 100%;
    height: 11.25rem;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.mySwiper3 {
    width: 6.29rem;
    height: 11.18rem;
    margin: 0 auto;
    overflow: hidden;
}
.mySwiper3 .swiper-slide {
    display: block;
    width: 100%;
}
.mySwiper3 .swiper-slide img {
    display: block;
    width: 100%;
}
.mySwiper3 .swiper-button-prev {
    width: 0.57rem;
    height: 0.57rem;
    bottom: 1.25rem;
    background: url(../img/mo/tc13_l.png) no-repeat top center;
    background-size: 100% 100%;
    font-size: 0;
}
.mySwiper3 .swiper-button-next {
    width: 0.57rem;
    height: 0.57rem;
    bottom: 1.25rem;
    background: url(../img/mo/tc13_r.png) no-repeat top center;
    background-size: 100% 100%;
    font-size: 0;
}
.tc13_close {
    width: 0.29rem;
    height: 0.31rem;
    float: right;
    background: url(../img/mo/tc13_close.png) no-repeat top center;
    background-size: 100% 100%;
    font-size: 0;
    position: absolute;
    top: 0.1rem;
    right: 0.8rem;
    z-index: 99;
}

.log-info-dialog {
    width: 5.34rem;
    height: 3.84rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("../img/poup_box.png") no-repeat;
    background-size: 100%;
    font-family: "SourceHan";
}
.log-info-dialog .user-info {
    margin: 0.5rem 0 0 0.8rem;
    color: #fff;
    font-size: 0.26rem;
    letter-spacing: 0.02rem;
    width: 4.2rem;
    height: 1.35rem;
    word-wrap: break-word;
    overflow-y: scroll;
}
.log-info-dialog .tips {
    width: 4.14rem;
    margin: 0.04rem 0 0 0.56rem;
    color: #ddd1e9;
    font-size: 0.2rem;
}
.log-info-dialog .btn-groups {
    margin: 0.02rem 0 0 0.5rem;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
}
.log-info-dialog .btn-groups div {
    float: left;
    cursor: pointer;
}
.log-info-dialog .rewards-btn {
    width: 2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: url("../img/ppoup_btn.png") no-repeat;
    background-size: 100%;
    margin-right: 0.24rem;
}
.log-info-dialog .logout-btn {
    width: 2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: url("../img/ppoup_btn1.png") no-repeat;
    background-size: 100%;
    display: inline-block;
}
.floor2 #area {
    width: 1.7rem;
    height: 0.58rem;
    position: absolute;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.book-dialog,
.booked-dialog {
    width: 5.34rem;
    height: 4.14rem;
    background: url("../img/poup_box1.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SweiSpring";
    text-align: center;
}
.book-dialog .title-main,
.booked-dialog .title-main {
    color: #dac3e2;
    font-size: 0.4rem;
    margin-top: 0.4rem;
    margin-left: 0.3rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
}
.book-dialog .title-main .highlight,
.booked-dialog .title-main .highlight {
    color: #ffe4e1;
}
.book-dialog .title-sub,
.booked-dialog .title-sub {
    font-size: 0.24rem;
    font-family: "SweiSpring";
    color: #ddd1e9;
    margin-top: 0.1rem;
    letter-spacing: 0.01rem;
    margin-left: 0.1rem;
}
.book-dialog .title-sub .highlight,
.booked-dialog .title-sub .highlight {
    color: #ffcdc7;
}
.book-dialog .fb-gift,
.booked-dialog .fb-gift {
    width: 4.27rem;
    height: 0.84rem;
    background: url("../img/ppoup_btn6.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 0.12rem auto 0;
    cursor: pointer;
}
.google-btn {
    width: 2.08rem;
    height: 0.7rem;
    background: url("../img/ppoup_btn2.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    float: left;
    margin: 1.9rem 0 0 0.6rem;
}
.apple-btn {
    width: 2.08rem;
    height: 0.7rem;
    background: url("../img/ppoup_btn3.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    float: left;
    margin-top: 1.9rem;
}
.not-open-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
    text-align: center;
}
.not-open-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.9rem;
}
.not-open-dialog .notice-message {
    color: #ddd1e9;
    font-size: 0.24rem;
    margin-top: 0.44rem;
}
.not-open-dialog .notice-message .highlight {
    color: #ffcdc7;
    letter-spacing: 0.02rem;
}
.not-open-dialog .fb-fans-img {
    width: 4.27rem;
    height: 0.84rem;
    background: url("../img/ppoup_btn6.png") no-repeat;
    background-size: 100%;
    margin: 0.14rem auto 0;
    cursor: pointer;
}
.reward-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
    text-align: center;
}
.reward-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    font-family: "SweiSpring";
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.4rem;
}
.reward-dialog .reward-table {
    width: 4.5rem;
    margin: 0.2rem auto 0;
    height: 1.9rem;
    box-sizing: border-box;
    overflow-y: scroll;
}
.reward-dialog .table-head {
    width: 100%;
    color: #786090;
    font-size: 0.24rem;
    line-height: 0.5rem;
    background-color: #e9e5ed;
    display: flex;
}
.reward-dialog .reward-record {
    width: 100%;
    color: #796191;
    background: #c8bed1;
    font-size: 0.14rem;
    display: flex;
    border-bottom: 1px solid #7b6292;
    line-height: 0.4rem;
}
.reward-dialog .reward-record.origin {
    display: none;
}
.reward-dialog .time {
    flex: 3;
    border-right: 1px solid #7b6292;
}
.reward-dialog .content {
    flex: 3;
    border-right: 1px solid #7b6292;
}
.reward-dialog .change-code {
    flex: 3;
    word-break: break-all;
}
.reward-dialog .reward-info {
    color: #fff;
    font-size: 0.2rem;
    text-align: left;
    width: 4.6rem;
    margin: 0rem auto 0;
}
.notice-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
    text-align: left;
    font-size: 0.2rem;
    color: #ddd1e9;
    box-sizing: border-box;
    padding: 0.2rem 0.19rem 0 0.3rem;
}
.notice-dialog .dailog-title {
    font-size: 0.26rem;
    font-weight: bold;
}
.notice-dialog .notice-message {
    height: 3rem;
    overflow-y: scroll;
    padding-right: 0.04rem;
}
.notice-dialog .notice-message p {
    line-height: 0.3rem;
}
.choose-area-dialog {
    width: 5.34rem;
    height: 2.04rem;
    background: url("../img/poup_box2.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.choose-area-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    text-align: center;
    font-family: "SweiSpring";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.link-error-dialog {
    width: 5.34rem;
    height: 2.04rem;
    background: url("../img/poup_box2.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.link-error-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.3rem;
    line-height: 0.4rem;
    /* text-shadow: -0.04rem 0.05rem #6f5886; */
    text-align: center;
    font-family: "SweiSpring";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
}
.page3 .search-box {
    width: 6.94rem;
    height: 6.94rem;
    margin: 0.46rem auto 0;
    /* background: url("../img/page4_box.png") no-repeat;
    background-size: 100%; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #8d8d8d;
    font-size: 0.22rem;
    font-family: "SourceHan";
    padding: 0.24rem;
    padding-top: 0;
    box-sizing: border-box;
}
.page3 .search-box .tmLists_title {
    width: 100%;
    height: 0.56rem;
    color: #87607b;
    font-family: SweiSpringSugarCJKsc;
    font-size: 0.34rem;
    text-align: center;
    line-height: 0.56rem;
    margin-bottom: 0.2rem;
}
.error-info-dialog {
    width: 5.34rem;
    height: 2.04rem;
    background: url("../img/poup_box2.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.error-info-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.3rem;
    line-height: 0.4rem;
    /* text-shadow: -0.04rem 0.05rem #6f5886; */
    text-align: center;
    font-family: "SweiSpring";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
    white-space: pre-wrap;
}
.page3 .re-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #8e8e8e;
    outline: none;
    background-color: #fcf9f9;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: 0.18rem;
}
.page3 input::-webkit-outer-spin-button,
.page3 input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.page3 input::placeholder {
    font-size: 0.18rem;
    font-family: "SourceHan";
    color: #8d8d8d;
}
.page3 .input-wrapper {
    position: relative;
}
.page3 .seach-icon {
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
    width: 0.33rem;
    height: 0.33rem;
    background: url("../img/page4_search.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.page3 .club-info-list {
    height: 4.2rem;
}
.page3 .club-item {
    margin-top: 0.28rem;
    line-height: 0.5rem;
    overflow: hidden;
}
.page3 .club-item .club-info {
    width: 3rem;
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.page3 .club-item .club-name {
    font-family: "auto";
}
.page3 .club-item.origin {
    display: none;
}
.page3 .club-btns {
    /* float: right; */
    display: flex;
    justify-content: space-between;
}
.page3 .club-btns div {
    width: 1.6rem;
    height: 0.5rem;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.page3 .club-btns .club-intro-btn {
    background: url("../img/page4_btn5.png") no-repeat;
    background-size: 100%;
}
.page3 .club-btns .join-club-btn {
    background: url("../img/page4_btn7.png") no-repeat;
    background-size: 100%;
}
.page3 .club-btns .joined-btn {
    background: url("../img/page4_btn6.png") no-repeat;
    background-size: 100%;
}
.page3 .club-btns .fulled-btn {
    background: url("../img/page4_btn6.png") no-repeat;
    background-size: 100%;
}
.page3 .page-tool {
    margin: 0.2rem auto 0;
    width: 5rem;
    /* display: flex; */
    font-size: 0.18rem;
}
.page3 .page-tool .last-page,
.page3 .page-tool .next-page {
    flex: 1.2;
    cursor: pointer;
    text-align: center;
}
.page3 .page-tool .page-num {
    flex: 4.6;
    display: flex;
    justify-content: space-around;
}
.f4_page {
    width: 100%;
    height: 0.4rem;
    text-align: center;
    bottom: 0.86rem;
}
.f4_page button,
.f4_page .pageWrap {
    display: inline-block;
    float: unset !important;
    vertical-align: top;
}
.f4_page button {
    cursor: pointer;
    height: 0.4rem;
}
.page3 .create-box {
    width: 6.94rem;
    height: 6.94rem;
    margin: 0.46rem auto 0;
    /* background: url("../img/page4_box.png") no-repeat;
    background-size: 100%; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #8d8d8d;
    font-size: 0.18rem;
    font-family: "SourceHan";
    box-sizing: border-box;
    padding: 0.02rem 0.04rem;
}
.page3 .create-box .create-club-title {
    width: 100%;
    height: 0.56rem;
    font-size: 0.36rem;
    color: #87607b;
    text-align: center;
    font-family: "SourceHan";
    line-height: 0.56rem;
    background: url("../img/page4_bg_t.png") no-repeat;
    background-size: 100% 100%;
}
.page3 .create-box .input-wrapper {
    position: relative;
    width: 6.5rem;
    margin: 0.3rem auto 0;
}
.page3 .create-box .line-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #8e8e8e;
    outline: none;
    background-color: #fcfafa;
    height: 0.68rem;
    line-height: 0.68rem;
    width: 100%;
    display: block;
    padding: 0;
    font-size: 0.3rem;
    padding-left: 1.7rem;
    box-sizing: border-box;
    color: #8e8e8e;
}
.page3 .create-box .line-textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #8e8e8e;
    outline: none;
    background-color: #fcfafa;
    height: 2.85rem;
    line-height: 0.3rem;
    width: 100%;
    display: block;
    font-size: 0.3rem;
    padding: 0.2rem 0 0 0.96rem;
    box-sizing: border-box;
    color: #8e8e8e;
}
.page3 .create-box .input-wrapper span {
    color: #8e8e8e;
    font-size: 0.24rem;
    position: absolute;
    line-height: 0.68rem;
    left: 0.2rem;
    top: 0;
}
.page3 input::-webkit-outer-spin-button,
.page3 input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.page3 .create-box .create-btn,
.page3 .create-box .share-fb-btn {
    width: 2rem;
    height: 0.48rem;
    background: url("../img/page3_btn.jpg") no-repeat;
    background-size: 100%;
    font-size: 0.24rem;
    color: #fff;
    text-align: center;
    line-height: 0.48rem;
    margin: 0.14rem auto;
    cursor: pointer;
}
.join-line-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "auto";
    text-align: left;
}
.join-line-dialog .main-info {
    margin-top: 0.7rem;
    color: #fff;
    font-size: 0.22rem;
    margin-left: 0.36rem;
    width: 4.78rem;
    height: 2.3rem;
    overflow-y: scroll;
}
.join-line-dialog .main-info div {
    width: 100%;
    /* height: 0.6rem;
    word-wrap: break-word; */
}
.join-line-dialog .main-info .link span {
    display: inline-block;
    word-break:break-all;
}
.join-line-dialog .main-info .note {
    height: 0.5rem;
}
.join-line-dialog .join-btn {
    width: 1.6rem;
    height: 0.5rem;
    background: url("../img/page4_btn7.png") no-repeat;
    background-size: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.26rem;
    cursor: pointer;
    margin: 0.1rem auto 0;
    line-height: 0.5rem;
}
.join-line-dialog .joined-btn {
    width: 1.6rem;
    height: 0.5rem;
    background: url("../img/page4_btn6.png") no-repeat;
    background-size: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.26rem;
    cursor: pointer;
    margin: 0.1rem auto 0;
    line-height: 0.5rem;
}
.join-success-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.join-success-dialog .copy-btn {
    width: 2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: url("../img/ppoup_btn1.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
    margin: 0.4rem auto;
    cursor: pointer;
}
.join-success-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.7rem;
    text-align: center;
    font-family: "SweiSpring";
}
.join-success-dialog .main-msg {
    width: 3.44rem;
    color: #ffc9c3;
    font-size: 0.3rem;
    margin: 0.42rem 0 0 0.45rem;
}
.join-success-dialog .sub-msg {
    width: 3.44rem;
    color: #cac0df;
    font-size: 0.2rem;
    margin: 0.32rem 0 0 0.45rem;
}
.join-success-dialog .icon {
    width: 1.26rem;
    height: 1.38rem;
    background: url("../img/poup_jb.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
}

.create-success-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.create-success-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.7rem;
    text-align: center;
    font-family: "SweiSpring";
}
.create-success-dialog .copy-btn {
    width: 2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: url("../img/ppoup_btn1.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
    margin: 0.4rem auto;
    cursor: pointer;
}
.create-success-dialog .main-msg {
    /* width: 3.44rem; */
    color: #ffc9c3;
    font-size: 0.3rem;
    margin: 0.32rem 0 0 0.45rem;
    font-weight: bold;
}
.create-success-dialog .sub-msg {
    width: 3.44rem;
    color: #cac0df;
    font-size: 0.2rem;
    margin: 0.22rem 0 0 0.45rem;
}
.create-success-dialog .icon {
    width: 1.38rem;
    height: 1.24rem;
    background: url("../img/poup_zs.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
}

.create-confirm-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.create-confirm-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.4rem;
    text-align: center;
    font-family: "SweiSpring";
}
.create-confirm-dialog .main-msg {
    color: #fff;
    font-size: 0.22rem;
    margin: 0.16rem 0 0 0.54rem;
}
.create-confirm-dialog .main-msg p {
    line-height: 0.4rem;
}
/* .create-confirm-dialog .main-msg .link span {
    display: block;
    width: 90%;
    height: 0.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
} */
.create-confirm-dialog .sub-msg {
    color: #cac0df;
    font-size: 0.2rem;
    margin: 0.08rem 0 0 0.28rem;
}
.create-confirm-dialog .confirm-btn {
    width: 1.6rem;
    height: 0.5rem;
    background: url("../img/page4_btn7.png") no-repeat;
    background-size: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.26rem;
    cursor: pointer;
    margin: -0.1rem auto 0;
    line-height: 0.5rem;
}

/* H5部分 */
.diy {
    width: 6.3rem;
    height: 8.93rem;
    margin: 0.16rem auto 0;
    overflow: hidden;
}
.diy-dialog {
    width: 6.3rem;
    height: 8.93rem;
    background: url("../img/mo/diyPic/bg.jpg") no-repeat;
    background-size: 100%;
    z-index: 10;
}
.diy-dialog .diy-loading-wrapper {
    width: 100%;
    height: 100%;
    background: #fff url("../img/mo/diyPic/bg.jpg") no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.diy-dialog .diy-loading-wrapper span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.4rem;
    color: #fff;
    font-family: "SweiSpring";
    margin-bottom: 0.2rem;
}
.diy-dialog .diy-loading {
    width: 2.76rem;
    height: 2.86rem;
    background: url("../img/loading2.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 2rem auto 0.24rem;
    overflow: hidden;
    transition: all 0.06s ease;
}
.diy-dialog .diy-inner {
    position: relative;
}
.diy-dialog .composition {
    margin: 0.2rem 0 0 0.8rem;
    width: 4rem;
    height: 4rem;
    float: left;
    position: relative;
}
.diy-dialog .composition .face {
    /* background: #fff url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%; */
    background-color: #fff;
    width: 100%;
    height: 100%;
}
.diy-dialog .composition .comp-part {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
}
.diy-dialog .composition .comp-face {
    background: url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
    z-index: 9;
}
.diy-dialog .composition .comp-eyes {
    z-index: 13;
}
.diy-dialog .composition .comp-bangs {
    z-index: 12;
}
.diy-dialog .composition .comp-hair {
    z-index: 8;
}
.diy-dialog .composition .comp-clothes {
    z-index: 10;
}
.diy-dialog .composition .comp-decoration {
    z-index: 14;
}
.diy-dialog .composition .comp-eyes {
    z-index: 10;
}
.diy-dialog .composition .finish-btn {
    width: 1.1rem;
    height: 0.52rem;
    background-color: #a8de40;
    color: #fff;
    border-radius: 0.1rem;
    position: absolute;
    left: 0.15rem;
    bottom: 0.15rem;
    font-size: 0.22rem;
    line-height: 0.52rem;
    letter-spacing: 0.02rem;
    font-family: "SourceHan";
    cursor: pointer;
    z-index: 20;
}
.diy-dialog .composition .finish-btn img {
    width: 0.2rem;
    height: 0.14rem;
    margin: 0.2rem 0rem 0 0.14rem;
    display: inline-block;
}
.diy-dialog .composition .btn-group {
    position: absolute;
    right: 0.14rem;
    bottom: 0.14rem;
    z-index: 20;
}
.diy-dialog .composition .btn-group div {
    width: 0.52rem;
    height: 0.52rem;
    float: left;
    margin-left: 0.1rem;
    cursor: pointer;
}
.diy-dialog .composition .btn-group .btn-color {
    background: url("../img/diyPic/btn_color1.png") no-repeat;
    background-size: 100%;
}
.diy-dialog .composition .btn-group .btn-config {
    background: url("../img/diyPic/btn_qh1.png") no-repeat;
    background-size: 100%;
}
.diy-dialog .composition .btn-group .btn-color.active {
    background: url("../img/diyPic/btn_color.png") no-repeat;
    background-size: 100%;
}
.diy-dialog .composition .btn-group .btn-config.active {
    background: url("../img/diyPic/btn_qh.png") no-repeat;
    background-size: 100%;
}
.diy-dialog .config-list {
    float: left;
    margin-top: 0.2rem;
}
.diy-dialog .item {
    width: 0.78rem;
    height: 0.66rem;
    background: #bcb3ca url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
    background-position: 0 1rem;
    cursor: pointer;
}
.diy-dialog .item.eyes {
    background: #bcb3ca url("../img/diyPic/config_eyes.png") no-repeat;
    background-size: 100%;
    background-position: 0 0.06rem;
}
.diy-dialog .item.mouth {
    background: #bcb3ca url("../img/mo/diyPic/config_mouth.png") no-repeat;
    background-size: 100%;
    background-position: 0 0.06rem;
}
.diy-dialog .item.bangs {
    background: #bcb3ca url("../img/mo/diyPic/config_bangs.png") no-repeat;
    background-size: 100%;
    background-position: 0 0.06rem;
}
.diy-dialog .item.hair {
    background: #bcb3ca url("../img/mo/diyPic/config_hair.png") no-repeat;
    background-size: 100%;
    background-position: 0 0.06rem;
}
.diy-dialog .item.clothes {
    background: #bcb3ca url("../img/mo/diyPic/config_clothes.png") no-repeat;
    background-size: 100%;
    background-position: 0 0.06rem;
}
.diy-dialog .item.decoration {
    background: #bcb3ca url("../img/mo/diyPic/config_decoration.png") no-repeat;
    background-size: 100%;
    background-position: 0 0.04rem;
}
.diy-dialog .item.active {
    background-color: #f6f0ff;
    border-bottom: 0.04rem solid #816ba9;
}
.diy-dialog .config-color-picker {
    width: 4.77rem;
    height: 4.6rem;
    background-color: #c2c2c2;
    float: left;
    margin-left: 0.8rem;
    padding-top: 1.4rem;
    box-sizing: border-box;
}
.diy-dialog .config-color-picker .color-wrapper:first-of-type {
    margin: 0 0.6rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.diy-dialog .config-color-picker .color-wrapper:last-of-type {
    margin: 0.2rem 1.3rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.diy-dialog .config-color-picker .outer-color {
    width: 1rem;
    height: 1rem;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.diy-dialog .config-color-picker .outer-color.active {
    width: 1rem;
    height: 1rem;
    background-color: #976ce5;
}
.diy-dialog .config-color-picker .color {
    width: 0.84rem;
    height: 0.84rem;
    border: 0.04rem solid #fff;
    border-radius: 50%;
    float: left;
    cursor: pointer;
}
.diy-dialog .config-color-picker .color.black {
    background-color: #474750;
}
.diy-dialog .config-color-picker .color.yellow {
    background-color: #f8d8a9;
}
.diy-dialog .config-color-picker .color.pink {
    background-color: #f0b6bf;
}
.diy-dialog .config-color-picker .color.blue {
    background-color: #adcaea;
}
.diy-dialog .config-color-picker .color.green {
    background-color: #9ab395;
}
.diy-dialog .config-option {
    width: 4.74rem;
    height: 4.6rem;
    overflow-y: scroll;
    float: left;
    margin-left: 0.8rem;
    background-color: #c2c2c2;
    padding-left: 0.04rem;
    padding-top: 0.03rem;
    overflow-y: scroll;
}
/* 修改滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.diy-dialog .config-option::-webkit-scrollbar {
    width: 0.04rem;
}
/*定义滑块 内阴影+圆角*/
.diy-dialog .config-option::-webkit-scrollbar-thumb {
    background-color: #816ba9;
    position: relative;
    right: -0.4rem;
}
.diy-dialog .option {
    width: 1.5rem;
    height: 1.49rem;
    background-color: #fff;
    float: left;
    border-radius: 0.1rem;
    margin: 0.03rem;
    box-sizing: border-box;
    cursor: pointer;
}
.diy-dialog .option.active {
    border: 0.06rem solid #976ce5;
}
.diy-dialog .option.eyes {
    background-size: 150% !important;
    background-position: center center !important;
}
.diy-dialog .option.mouth {
    background-size: 400% !important;
    background-position: 3.8rem 3rem !important;
}
.diy-dialog .option.bangs {
    background-size: 120% !important;
    background-position: center 1.9rem !important;
}
.diy-dialog .option.clothes {
    background-size: 220% !important;
    background-position: 2.3rem 1.4rem !important;
}
.diy-dialog .option.clothes:nth-child(11) {
    background-size: 100% !important;
    background-position: 3rem 1.5rem !important;
}
.diy-dialog .option.decoration:nth-child(1) {
    background-size: 280% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.diy-success-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.diy-success-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.5rem;
    text-align: center;
    font-family: "SweiSpring";
}
.diy-success-dialog .rectangle {
    width: 0.16rem;
    height: 0.16rem;
    margin: 0.2rem auto 0;
    display: block;
}
.diy-success-dialog .input-tip {
    color: #fff;
    font-size: 0.24rem;
    text-align: center;
    margin-top: 0.14rem;
}
.diy-success-dialog .input-wrapper {
    width: 3.8rem;
    height: 0.5rem;
    position: relative;
    overflow: hidden;
    margin: 0.14rem auto 0;
    background: #fff;
}
.diy-success-dialog .line-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    width: 90%;
    height: 95%;
    font-size: 0.24rem;
    float: left;
}
.diy-success-dialog input::-webkit-outer-spin-button,
.diy-success-dialog input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.diy-success-dialog .input-wrapper img {
    position: absolute;
    right: 0.06rem;
    top: 0.08rem;
    width: 0.3rem;
    height: 0.3rem;
}
.diy-success-dialog .start-btn {
    width: 2.2rem;
    height: 0.52rem;
    display: block;
    margin: 0.32rem auto 0;
    background: url("../img/diyPic/start-btn.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.reservation-tip-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.reservation-tip-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.42rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    margin-top: 0.8rem;
    text-align: center;
    font-family: "SweiSpring";
}
.reservation-tip-dialog .reservation-btn {
    width: 4.27rem;
    height: 0.8rem;
    background: url("../img/page2_btn1.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    margin: 0.4rem auto 0;
}
.reservation-tip-dialog .phone-wrapper {
    margin: 0.3rem auto;
    width: 4.22rem;
    height: 0.46rem;
    border: 1px solid #9773a5;
    position: relative;
    background-color: #fcf9fa;
}
.reservation-tip-dialog .phone-label {
    height: 0.36rem;
    margin: 0.05rem 0;
    line-height: 0.46rem;
    overflow: hidden;
    border-right: 1px solid #9773a5;
    cursor: pointer;
    float: left;
    box-sizing: border-box;
}
.reservation-tip-dialog .phone-wrapper .label {
    width: 1.1rem;
    text-align: center;
    box-sizing: border-box;
    font-size: 0.18rem;
    color: #9773a5;
    line-height: 0.36rem;
    display: inline-block;
    padding: 0 0.1rem 0 0.1rem;
}
.reservation-tip-dialog .phone-wrapper .arrow-down {
    margin-top: 0.16rem;
    margin-right: 0.2rem;
    display: inline-block;
    border: 0.08rem solid #9773a5;
    border-left: 0.08rem solid transparent;
    border-right: 0.08rem solid transparent;
    border-bottom: 0.08rem solid transparent;
}
.reservation-tip-dialog #area2 {
    height: 0.46rem;
    width: 1.72rem;
    position: absolute;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.reservation-tip-dialog .re-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background-color: #fcf9f9;
    height: 0.3rem;
    line-height: 0.3rem;
    margin: 0.08rem 0 0.08rem 0.4rem;
    padding: 0;
    width: 2rem;
    position: absolute;
}
.reservation-tip-dialog input::-webkit-outer-spin-button,
.reservation-tip-dialog input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.reservation-tip-dialog input::placeholder {
    font-size: 0.18rem;
    font-family: "SourceHan";
    color: #8d8d8d;
}

.psy-test {
    width: 6.3rem;
    height: 8.93rem;
    margin: 0.16rem auto 0;
}
.psy-test-dialog {
    width: 100%;
    height: 100%;
    background: url("../img/mo/diyPic/bg.jpg") no-repeat;
    font-family: "SourceHan";
    position: relative;
}
.psy-test-dialog .test-inner {
    width: 5.7rem;
    height: 7.61rem;
    background: url("../img/mo/diyPic/test_box.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.psy-test-dialog .title-icon {
    width: 1.54rem;
    height: 1.19rem;
    background: url("../img/diyPic/title_01.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 0.16rem auto 0;
}
.psy-test-dialog .title-text {
    width: 5.1rem;
    color: #4e4460;
    font-size: 0.26rem;
    display: block;
    margin: 0.34rem auto 0;
    text-align: center;
    line-height: 0.36rem;
}
.psy-test-dialog .problem-wrapper {
    width: 5.12rem;
    margin: 0.38rem auto 0;
}
.psy-test-dialog .problem-item {
    width: 100%;
    height: 0.94rem;
    background: #fff;
    color: #4e4460;
    font-size: 0.26rem;
    margin-top: 0.22rem;
    border-radius: 0.1rem;
    line-height: 0.34rem;
    padding-left: 0.24rem;
    letter-spacing: 0.01rem;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.psy-test-dialog .progress-bar {
    width: 5.23rem;
    height: 0.28rem;
    background: url("../img/mo/diyPic/bar.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 0.34rem auto;
}
.psy-test-dialog .progress-bar .progress {
    height: 0.28rem;
    width: auto;
}

.passport {
    width: 6.3rem;
    height: 8.93rem;
    margin: 0.16rem auto 0;
}
.passport-dialog {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff url("../img/mo/diyPic/bg.jpg") no-repeat;
    background-size: 100%;
    background-position: left top;
    font-family: "SourceHan";
    position: relative;
}
.passport-dialog .card-loading-wrapper {
    width: 100%;
    height: 100%;
    background: #fff url("../img/mo/diyPic/bg.jpg") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.passport-dialog .card-loading-wrapper span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.4rem;
    color: #fff;
    font-family: "SweiSpring";
    margin-bottom: 0.2rem;
}
.passport-dialog .card-loading {
    width: 2.76rem;
    height: 2.86rem;
    background: url("../img/loading2.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 2.8rem auto 0.24rem;
    overflow: hidden;
    transition: all 0.06s ease;
}
.passport-dialog .dialog-title {
    font-size: 0.34rem;
    text-align: center;
    color: #f7dce2;
    margin-top: 0.3rem;
    font-family: "SweiSpring";
    overflow: hidden;
}
.passport-dialog .dialog-title .title-main {
    margin-top: 0.56rem;
}
.passport-dialog .star-icon {
    margin: 0.1rem;
    width: 0.23rem;
    height: 0.23rem;
    display: inline-block;
}
.passport-dialog .dialog-title .highlight {
    display: block;
    margin-top: 0.28rem;
    color: #ffb8bd;
    font-size: 0.6rem;
}

.passport-dialog .card {
    width: 5.78rem;
    height: 3.28rem;
    background: url("../img/diyPic/check0.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 0.6rem auto 0.24rem;
    position: relative;
    overflow: hidden;
}
.passport-dialog .card-face {
    width: 2.8rem;
    height: 2.8rem;
    margin: 0.27rem 0 0 0.32rem;
    position: absolute;
    background: url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
}
.passport-dialog .card-face .face {
    width: 100%;
    height: 100%;
}
.passport-dialog .card-face .face .comp-part {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
}
.passport-dialog .card-face .face .comp-face {
    background: url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
    z-index: 9;
}
.passport-dialog .card-face .face .comp-eyes {
    z-index: 13;
}
.passport-dialog .card-face .face .comp-bangs {
    z-index: 12;
}
.passport-dialog .card-face .face .comp-hair {
    z-index: 8;
}
.passport-dialog .card-face .face .comp-clothes {
    z-index: 10;
}
.passport-dialog .card-face .face .comp-decoration {
    z-index: 14;
}
.passport-dialog .card-info {
    margin-top: 1.2rem;
    margin-left: 3.2rem;
    box-sizing: border-box;
}
.passport-dialog .item-wrapper {
    overflow: hidden;
    height: 0.4rem;
}
.passport-dialog .label-icon {
    width: 0.32rem;
    height: 0.26rem;
}
.passport-dialog .label-text {
    float: left;
    /* display: flex; */
    flex-direction: column;
    margin-left: 0.12rem;
    width: 0.6rem;
}
.passport-dialog .label-text .label-cn {
    display: flex;
    justify-content: space-between;
}
.passport-dialog .label-text .label-en {
    font-size: 0.12rem;
    transform: scale(0.7) translate(-18%, -50%);
}

.passport-dialog .id-wrapper .label-icon {
    background: url("../img/diyPic/id.png") no-repeat;
    background-size: 100%;
    float: left;
}
.passport-dialog .name-wrapper .label-icon {
    background: url("../img/diyPic/mz.png") no-repeat;
    background-size: 100%;
    float: left;
}
.passport-dialog .title-wrapper .label-icon {
    background: url("../img/diyPic/name.png") no-repeat;
    background-size: 100%;
    float: left;
}
.passport-dialog .place-wrapper .label-icon {
    background: url("../img/diyPic/house.png") no-repeat;
    background-size: 100%;
    float: left;
}
.passport-dialog .yinzhang {
    width: 1.01rem;
    height: 1.01rem;
    background: url("../img/diyPic/check0_z.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    z-index: 10;
}

#big-card {
    width: 750px;
    height: 422px;
    background: url("../img/diyPic/check0.png") no-repeat;
    background-size: 100%;
    display: block;
    margin: 24px auto;
    position: fixed;
    z-index: -10;
    overflow: hidden;
    display: none;
}
#big-card .card-face {
    width: 365px;
    height: 365px;
    margin: 27px 0 0 32px;
    position: absolute;
    background: url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
}
#big-card .card-face .face {
    width: 100%;
    height: 100%;
}
#big-card .card-face .face .comp-part {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
}
#big-card .card-face .face .comp-face {
    background: url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
    z-index: 9;
}
#big-card .card-face .face .comp-eyes {
    z-index: 13;
}
#big-card .card-face .face .comp-bangs {
    z-index: 12;
}
#big-card .card-face .face .comp-hair {
    z-index: 8;
}
#big-card .card-face .face .comp-clothes {
    z-index: 10;
}
#big-card .card-face .face .comp-decoration {
    z-index: 14;
}
#big-card .card-info {
    margin-top: 70px;
    margin-left: 440px;
    box-sizing: border-box;
}
#big-card .item-wrapper {
    overflow: hidden;
    height: 40px;
}
#big-card .label-icon {
    width: 32px;
    height: 26px;
}
#big-card .label-text {
    float: left;
    /* display: flex; */
    flex-direction: column;
    margin-left: 12px;
    width: 60px;
}
#big-card .label-text .label-cn {
    display: flex;
    justify-content: space-between;
}
#big-card .label-text .label-en {
    font-size: 8px;
    position: relative;
    bottom: 16px;
}

#big-card .id-wrapper .label-icon {
    background: url("../img/diyPic/id.png") no-repeat;
    background-size: 100%;
    float: left;
}
#big-card .name-wrapper .label-icon {
    background: url("../img/diyPic/mz.png") no-repeat;
    background-size: 100%;
    float: left;
}
#big-card .title-wrapper .label-icon {
    background: url("../img/diyPic/name.png") no-repeat;
    background-size: 100%;
    float: left;
}
#big-card .place-wrapper .label-icon {
    background: url("../img/diyPic/house.png") no-repeat;
    background-size: 100%;
    float: left;
}
#big-card .yinzhang {
    width: 100px;
    height: 100px;
    background: url("../img/diyPic/check0_z.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
}
#big-card .label {
    color: #5e5957;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    float: left;
}
#big-card .card-item {
    float: left;
    width: 160px;
    height: 26px;
    padding-left: 4px;
    font-size: 16px;
    line-height: 26px;
    color: #5e5957;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    margin-left: 4px;
    margin-top: 4px;
}
#big-card .check-ewm {
    position: absolute;
    right: 20px;
    top: 280px;
}
#big-card .check-ewm .ewm-img {
    width: 80px;
    height: 80px;
    background: url('../img/diyPic/check-ewm.png') no-repeat;
    background-size: 100%;
    float: left;
    
}
#big-card .check-ewm .label {
    float: right;
    margin-left: 10px;
    margin-right: 6px;
    line-height: 11px;
    color: #918fcc;
    width: 16px;
    text-align: center;
}
#big-card .check-ewm .label span {
    display: inline-block;
    width: 100%;
    position: relative;
    font-size: 12px;
    text-align: center;
}
#big-card .check-ewm .label span::after {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 19px;
}
#big-card .check-ewm .label span:last-child::after {
    width: 0;
    height: 0;
}
#big-card .l-b-text {
    position: absolute;
    bottom: 6px;
    left: 34px;
    font-size: 12px;
    font-family: 'SweiSpring';
    color: #7469ab;
    letter-spacing: 10px;
    font-style: italic;
}

.passport-dialog .label {
    color: #5e5957;
    font-size: 0.16rem;
    height: 0.28rem;
    line-height: 0.28rem;
    float: left;
}
.passport-dialog .card-item {
    float: left;
    width: 1.26rem;
    height: 0.18rem;
    padding-left: 0.1rem;
    font-size: 0.16rem;
    line-height: 0.16rem;
    color: #5e5957;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 0.04rem;
    margin-left: 0.04rem;
    margin-top: 0.04rem;
}
.passport-dialog .card-download-tips {
    color: #f9e2ff;
    font-size: 0.22rem;
    line-height: 0.24rem;
    text-align: center;
}
.passport-dialog .btn-group {
    padding-top: 0.3rem;
}
.passport-dialog .share-btn {
    width: 3.72rem;
    height: 0.72rem;
    background: url("../img/diyPic/btn.png") no-repeat;
    background-size: 100%;
    margin-left: 0.96rem;
    cursor: pointer;
    float: left;
    color: #6c5981;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.72rem;
    letter-spacing: 0.01rem;
}
.passport-dialog .download-btn {
    width: 0.5rem;
    height: 0.5rem;
    background: url("../img/diyPic/download.png") no-repeat;
    background-size: 100%;

    margin: 0.12rem 0 0 0.3rem;
    cursor: pointer;
    float: left;
}
.passport-dialog .replay-btn {
    width: 0.5rem;
    height: 0.5rem;
    background: url("../img/diyPic/refresh.png") no-repeat;
    background-size: 100%;
    margin: 0.12rem 0 0 0.3rem;
    cursor: pointer;
    float: left;
}

.big-face {
    width: 960px;
    height: 960px;
    position: absolute;
    left: 0px;
    background: url("../img/diyPic/naked.png") no-repeat;
    background-size: 100%;
    z-index: -1;
}
.big-face .face {
    width: 100%;
    height: 100%;
}
.big-face .face .comp-part {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
}
.big-face .face .comp-eyes {
    z-index: 13;
}
.big-face .face .comp-bangs {
    z-index: 12;
}
.big-face .face .comp-hair {
    z-index: 11;
}
.big-face .face .comp-clothes {
    z-index: 10;
}
.big-face .face .comp-decoration {
    z-index: 14;
}


.active-finish-dialog {
    width: 5.34rem;
    height: 3.84rem;
    background: url("../img/poup_box4.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "SourceHan";
}
.active-finish-dialog .dialog-title {
    color: #dac3e2;
    font-size: 0.3rem;
    line-height: 0.4rem;
    text-shadow: -0.04rem 0.05rem #6f5886;
    text-align: center;
    width: 100%;
    height: 0.8rem;
    white-space: pre-line;
    margin-top: 0.4rem;
}
.active-finish-dialog .download-btns {
    margin-top: 1.1rem;
    padding: 0 0.6rem;
    display: flex;
    justify-content: space-around;
}
.active-finish-dialog .download-btns div {
    width: 1.96rem;
    height: 0.62rem;
    cursor: pointer;
}
.active-finish-dialog .download-btns .ios {
    background: url('../img/page2_btn4.png') no-repeat center/100% 100%;
}
.active-finish-dialog .download-btns .google {
    background: url('../img/page2_btn3.png') no-repeat center/100% 100%;
}