* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* .no-scrollbar::-webkit-scrollbar{
    width: 0;
    height: 0; 
} */

/* a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);} */

button {
    border: none;
    outline: none;
}

button:active {
    transform: scale(0.96)
}

button a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.lb {
    display: inline-block
}

.hide {
    display: none
}

.visib0 {
    opacity: 0;
}

#main {
    width: 7.5rem;
    height: 100%;
    margin: 0 auto;
    background: #fff;
    overflow: auto;
}

/* =============================================================*/
/* ============================第一屏 ===========================*/
/* ===============================================================*/

#home {
    position: relative;
    width: 100%;
    height: 12.8rem;
    background-image: url(../img/home/bg.jpg);
    background-size: 100% 100%;
}

#home .home_play {
    position: absolute;
    top: 7.4rem;
    left: 3.34rem;
    width: 1.16rem;
    height: 1.31rem;
    background-image: url(../img/home/btn_play.png);
    background-size: 100% 100%;
    animation: scale 1s ease-in-out alternate infinite;
}

#top_bar {
    position: fixed;
    top: 0;
    width: 7.5rem;
    background-image: url(../img/top_bar/bg.jpg);
    background-size: 100%;
    z-index: 1000;
    font-size: 0;
}

#top_bar .bar_normal {
    width: 100%;
    height: 0.74rem;
}

#top_bar .bar_normal a {
    display: inline-block;
    width: 100%;
    height: 0.74rem;
}

#top_bar .bar_btn {
    background-image: url(../img/top_bar/btn_sns.png);
    background-size: 7.5rem 0.74rem;
}

#top_bar .menu {
    margin-left: 0.2rem;
    width: 0.68rem;
    height: 0.74rem;
    background-position: -0.6rem 0rem;
    transition: 0.3s transform;
}

#top_bar .menu.inopen {
    transform: rotate(90deg);
    background-position: -0.05rem -0rem;
}

#top_bar .coffee {
    width: 0.74rem;
    height: 0.74rem;
    background-position: -5.2rem 0rem;
}

#top_bar .fb {
    width: 0.74rem;
    height: 0.74rem;
    background-position: -6rem 0rem;
}

#top_bar .youtobe {
    width: 0.74rem;
    height: 0.74rem;
    background-position: -6.8rem 0rem;
}

#top_bar .sound {
    display: inline-block;
    margin-top: 0.04rem;
    margin-right: 0.2rem;
    height: 0.7rem;
    color: #aaa;
    width: auto;
    line-height: 0.74rem;
    background: none;
}

#top_bar .sound .music {
    display: inline-block;
    margin-left: 0.1rem;
    width: 0.28rem;
    height: 0.24rem;
    background: url(../img/music.png);
    background-size: 100%;
    vertical-align: middle;
}

#top_bar .sound.on .music {
    animation: 300s move alternate infinite;
}

#top_bar .sound span {
    font-size: 0.24rem;
    overflow: hidden;
    vertical-align: middle;
}

#top_bar .sound .ON {
    display: none;
}

#top_bar .sound .Off {
    display: inline;
}

#top_bar .sound.on .ON {
    display: inline;
}

#top_bar .sound.on .Off {
    display: none;
}

#top_bar .bar_open {
    width: 100%;
    height: 0rem;
    background-size: 100%;
    transition: 0.5s;
    overflow: hidden;
    box-sizing: border-box;
}

#top_bar .bar_open.open {
    height: 2.68rem;
    overflow: hidden;
}

#top_bar .bar_open .menu_item {
    margin: 0.1rem 0;
    display: inline-block;
    width: 33%;
    height: 1rem;
    list-style: none;
    font-size: 0.32rem;
    color: #cecdcc;
    vertical-align: middle;
    text-align: center;
    background-image: url(../img/top_bar/btn.png);
    background-size: 7.5rem 5.4rem;
}

#top_bar .bar_open .menu_item:nth-child(1) {
    background-position: 0 0rem;
}

#top_bar .bar_open .menu_item:nth-child(2) {
    background-position: -2.5rem 0rem;
}

#top_bar .bar_open .menu_item:nth-child(3) {
    background-position: -5rem 0rem;
}

#top_bar .bar_open .menu_item:nth-child(4) {
    background-position: 0 -1.1rem;
}

#top_bar .bar_open .menu_item:nth-child(5) {
    background-position: -2.5rem -1.1rem;
}

#top_bar .bar_open .menu_item:nth-child(6) {
    background-position: -5rem -1.1rem;
}

#top_bar .bar_open .menu_item:nth-child(1).active {
    background-position: 0 -2.25rem;
}

#top_bar .bar_open .menu_item:nth-child(2).active {
    background-position: -2.5rem -2.25rem;
}

#top_bar .bar_open .menu_item:nth-child(3).active {
    background-position: -5rem -2.25rem;
}

#top_bar .bar_open .menu_item:nth-child(4).active {
    background-position: 0 -3.35rem;
}

#top_bar .bar_open .menu_item:nth-child(5).active {
    background-position: -2.5rem -3.35rem;
}

#top_bar .bar_open .menu_item:nth-child(6).active {
    background-position: -5rem -3.35rem;
}




/* =============================================================*/
/* ============================ 预约 ===========================*/
/* =============================================================*/

#order {
    position: relative;
    width: 100%;
    height: 17rem;
    background-image: url(../img/order/bg2.jpg);
    background-size: 100% 100%;
}

#order .content {
    position: absolute;
    top: 7.32rem;
    width: 100%;
    min-height: 5rem;
    /* background: rgba(0, 0, 0, 0.1); */
}

#order .sys_select .check {
    display: inline-block;
    margin-top: 0.22rem;
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    background: #9aa1b1;
}

#order .check div {
    margin: 0.08rem;
    border-radius: 50%;
    transition: 0.3s;
}

#order .check.active div {
    width: 0.1rem;
    height: 0.1rem;
    background: #eee;
}

#order .sys {
    display: inline-block;
    width: 1.5rem;
}

#order .android {
    margin-left: 1.92rem;
}

#order .ios {
    margin-left: 0.64rem;
}

#order .agree .mark {
    margin-left: 1.15rem;
    margin-top: 0.16rem;
    width: 0.5rem;
    height: 0.5rem;
    font-size: 0.3rem;
    color: #666;
    overflow: hidden;
}

#order .agree em {
    width: 100%;
    height: 100%;
}

#order .note {
    position: absolute;
    top: 5%;
    padding: 0.2rem;
    width: 100%;
    font-size: 0.28rem;
    color: #d6ccc0;
    background: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

#order .note_btn {
    text-align: center;
    color: #56585c;
    font-size: 0.24rem;
    line-height: 0.3rem;
    font-weight: bold;
}

#order .note p {
    margin: 0.2rem 0;
}

#order .phone {
    position: relative;
}

#order .phone input {
    position: absolute;
    left: 2.4rem;
    top: 0.5rem;
    width: 4.2rem;
    height: 0.6rem;
    font-size: 0.4rem;
    line-height: 0.6rem;
    color: #eee6e8;
    background: none;
    border: 0;
    outline: none;
}

#order .phone .area_num {
    position: absolute;
    display: inline-block;
    left: 1.6rem;
    top: 0.6rem;
    font-size: 0.4rem;
    line-height: 0.4rem;
    color: #eee6e8;
}

#order .phone input::-webkit-input-placeholder {
    color: #eee6e8;
    line-height: 0.6rem;
    font-size: 0.24rem;
}


#order .send {
    margin-top: 2.3rem;
}

#order .booking {
    margin-left: 0.6rem;
    width: 4.33rem;
    height: 1.2rem;
    background-image: url(../img/order/btn.png);
    background-size: 4.33rem 2.6rem;
    background-position: 0 0;
}


#order .store_booking {
    margin-left: 0.6rem;
    width: 4.33rem;
    height: 1.2rem;
    background-image: url(../img/order/btn.png);
    background-size: 4.33rem 2.6rem;
    background-position: 0 -1.4rem;
}

#order .booking.dday {
    background-image: url(../img/order/btn2.png);
}


#order .store_booking.dday {
    background-image: url(../img/order/btn2.png);
}

button a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* =============================================================*/
/* ============================ 预约达成 ========================*/
/* =============================================================*/

#step {
    position: relative;
    width: 100%;
    height: 14rem;
    background-image: url(../img/step/bg.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

p.validity {
    display: block;
    margin: 3.35rem auto 0 auto;
    font-size: 0.3rem;
    color: #e7cba3;
    text-align: center
}

#step ul {
    display: block;
    margin: 4rem auto 0 auto;
    width: 7.2rem;
    font-size: 0;
}

#step .step_item {
    display: inline-block;
    margin-bottom: 0.2rem;
    width: 2.4rem;
    height: 3.2rem;
    background-size: 2.9rem;
    background-position: center;
}

#step .step_item:nth-child(1) {
    margin-left: 1.2rem;
}

#step .step_item:nth-child(3) {
    margin-left: 33.3%;
}

#step .step_1.achieve {
    background-image: url(../img/step/achieve/01.png)
}

#step .step_2.achieve {
    background-image: url(../img/step/achieve/02.png)
}

#step .step_3.achieve {
    background-image: url(../img/step/achieve/03.png)
}

#step .step_4.achieve {
    background-image: url(../img/step/achieve/04.png)
}

#step .step_1.doing {
    background-image: url(../img/step/doing/01.png)
}

#step .step_2.doing {
    background-image: url(../img/step/doing/02.png)
}

#step .step_3.doing {
    background-image: url(../img/step/doing/03.png)
}

#step .step_4.doing {
    background-image: url(../img/step/doing/04.png)
}


#step .step_1.undo {
    background-image: url(../img/step/undo/01.png)
}

#step .step_2.undo {
    background-image: url(../img/step/undo/02.png)
}

#step .step_3.undo {
    background-image: url(../img/step/undo/03.png)
}

#step .step_4.undo {
    background-image: url(../img/step/undo/04.png)
}

/* =============================================================*/
/* ============================ 加入社区 ========================*/
/* =============================================================*/

#community {
    position: relative;
    width: 100%;
    height: 17.3rem;
    background-image: url(../img/community/bg.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

#community p.validity {
    margin: 4.5rem auto 0 auto;
}

.add_community {
    display: block;
    margin: 14.5rem auto 0 auto;
    width: 5.28rem;
    height: 1.14rem;
    background: url(../img/community/btn.png);
    background-size: 100% 100%;
    /* overflow: hidden; */
}

/* =============================================================*/
/* ============================ 邀请 ========================*/
/* =============================================================*/

#invite {
    position: relative;
    width: 100%;
    height: 19.5rem;
    background-image: url(../img/invite/bg.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

#invite p.validity {
    margin: 4.5rem auto 0 auto;
}

#invite .to_invite {
    position: absolute;
    display: block;
    top: 17rem;
    left: 1.06rem;
    width: 5.28rem;
    height: 1.14rem;
    background: url(../img/invite/btn.png);
    background-size: 100% 100%;
    /* overflow: hidden; */
}


#invite .code {
    position: absolute;
    top: 7.98rem;
    width: 2.1rem;
    height: 0.42rem;
    text-align: center;
    color: #c5b090;
    color: -webkit-linear-gradient(#c5b090, #b2926f, #c1a77e);
    color: -o-linear-gradient(#c5b090, #b2926f, #c1a77e);
    color: -moz-linear-gradient(#c5b090, #b2926f, #c1a77e);
    color: linear-gradient(#c5b090, #b2926f, #c1a77e);
    font-size: 0.26rem;
    line-height: 0.40rem;
    text-shadow: 0 0 5px #000;
    background: #2f2937;
}


#invite .code_1 {
    left: 1.06rem;
}

#invite .code_2 {
    left: 4.25rem;
}

#invite .code_3 {
    top: 10.73rem;
    left: 2.64rem;
}







/* =============================================================*/
/* ============================ 特色 ========================*/
/* =============================================================*/

#features {
    position: relative;
    width: 100%;
    height: 14.8rem;
    /* height: 18rem; */
    background-image: url(../img/features/bg.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

#features .thumbs {
    position: relative;
    margin: 13.2rem auto 0 auto;
    width: 100%;
}

#features .thumbs .swiper {
    margin: 0 auto;
    width: 6.18rem;
}


#features .swiper .content {
    width: 6.2rem;
    height: 1.3rem;
}

#features .arrow {
    position: absolute;
    top: 0.3rem;
    left: 0.2rem;
    width: 0.38rem;
    height: 0.66rem;
    transform: scaleX(-1);
    background: url(../img/features/arrow.png);
    background-size: 100% 100%;
}

#features .arrow.left {
    left: inherit;
    right: 0.2rem;
    transform: scaleX(1);
    transform-origin: center;
}

#features .swiper-slide {
    position: relative;
}

#features .swiper-slide img {
    width: 2rem;
}

#features .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0.6rem 0.6rem;
    opacity: 0.7;
}

#features .icon_video {
    background-image: url(../img/features/icon_movie.png);
}

#features .icon_img {
    background-image: url(../img/features/icon_image.png);
}

/* =============================================================*/
/* ============================ dialog ========================*/
/* =============================================================*/
#footer {
    position: relative;
    width: 100%;
    height: 1.17rem;
    font-size: 0;
    background-image: url(../img/footer.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

#footer .link a {
    display: inline-block;
    width: 30%;
    height: 1.17rem;
}

/* =============================================================*/
/* ============================ dialog ========================*/
/* =============================================================*/
.all_dialog {
    width: 0;
    height: 0;
    overflow: hidden;
}

.dialog {
    position: relative;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #0000008f;
    opacity: 0;
    transition: 0.5s;
}

.dialog .dialog_body {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -3.75rem;
    width: 7.5rem;
    text-align: center;
    transform: translateY(-5rem);
    transition: transform 0.5s, opacity 0.5s;
}

.dialog .header {
    margin: 0 auto 0 auto;
    width: 7rem;
    height: 0.68rem;
    background: url(../img/dialog/header.png);
    background-size: 100%;
}


.dialog .dialog_inner {
    margin: 0 auto 0 auto;
    width: 7rem;
}

.dialog .dialog_body img {
    width: 7rem;
}

.dialog .dialog_body .close {
    float: right;
    width: 0.68rem;
    height: 0.68rem;
}

.dialog .dialog_body .msg_text {
    display: inline-block;
    padding: 0.2rem 0.3rem;
    max-width: 6rem;
    font-size: 0.3rem;
    color: #d6ccc0;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0.1rem;
}

.dialog_msg {
    position: relative;
    top: 40%;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
}

/*.dialog_video .video_box .close{
    float: right;
    margin: -0.41rem 0.4rem 0.2rem 0;
    width: 0.63rem;
    height: 0.63rem;
    background: url(../img/dialog/close.png);
    background-size: 100%;
}*/

.dialog_video .video_box .close_bottom {
    margin: 0 auto;
    width: 0.63rem;
    height: 0.63rem;
    background: url(../img/dialog/close.png);
    background-size: 100%;
    transform: translateY(-0.5rem);
    animation: 0.8s flash alternate infinite;

}

.dialog_video video {
    width: 100%;
    background: #000;
}

.dialog_video .video_box {
    /* margin-top: 1rem; */
    width: 100%;
}

/* =============================================================*/
/* ============================ gallery ========================*/
/* =============================================================*/

.gallery {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -3.75rem;
    ;
    width: 7.5rem;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.5s;
    opacity: 0;
    z-index: -10;
}

.gallery .swiper-container {
    position: absolute;
    top: -50%;
    margin-top: -5rem;
    width: 100%;
}

.gallery .swiper-slide {
    width: 70%;
    text-align: center;
}

.gallery .swiper-slide img {
    width: 70%;
    border: 1px solid #987b5f;
}

.gallery .gallery .swiper-slide video {
    width: 100%;
    border: 1px solid #987b5f;
}

.gallery .video_box {
    margin-top: 2rem;
}

.gallery .video_box video {
    width: 100%;
    border: 1px solid #987b5f;
}

.box-top.box-side {
    width: 7.5rem;
    height: 0.42rem;
}

.layer {
    width: 1.09rem;
    height: 0.42rem;
    margin: 0 auto;
    background: url(../img/dialog/layer.png);
    background-size: 100%;
}

.box-bottom {
    transform: scaleY(-1);
}

@keyframes scale

/* Firefox */
    {
    from {
        transform: scale(0.94);
    }

    to {
        transform: scale(1);
    }
}

@keyframes updown

/* Firefox */
    {
    from {
        transform: translateY(-0.1rem)
    }

    to {
        transform: translateY(0);
    }
}

@keyframes flash

/* Firefox */
    {
    from {
        filter: brightness(1.8)
    }

    to {
        filter: brightness(1.2)
    }
}

@keyframes move

/* Firefox */
    {
    from {
        background-position-x: 100rem
    }

    to {
        background-position-x: 0rem
    }
}

.la-ball-circus,
.la-ball-circus>div {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.la-ball-circus {
    display: block;
    font-size: 0;
    color: #fff
}

.la-ball-circus.la-dark {
    color: #333
}

.la-ball-circus>div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor
}

.la-ball-circus {
    width: 16px;
    height: 16px
}

.la-ball-circus>div {
    position: absolute;
    top: 0;
    left: -100%;
    display: block;
    width: 16px;
    width: 100%;
    height: 16px;
    height: 100%;
    border-radius: 100%;
    opacity: .5;
    -webkit-animation: ball-circus-position 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1), ball-circus-size 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
    -moz-animation: ball-circus-position 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1), ball-circus-size 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
    -o-animation: ball-circus-position 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1), ball-circus-size 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
    animation: ball-circus-position 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1), ball-circus-size 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1)
}

.la-ball-circus>div:nth-child(1) {
    -webkit-animation-delay: 0s, -0.5s;
    -moz-animation-delay: 0s, -0.5s;
    -o-animation-delay: 0s, -0.5s;
    animation-delay: 0s, -0.5s
}

.la-ball-circus>div:nth-child(2) {
    -webkit-animation-delay: -0.5s, -1s;
    -moz-animation-delay: -0.5s, -1s;
    -o-animation-delay: -0.5s, -1s;
    animation-delay: -0.5s, -1s
}

.la-ball-circus>div:nth-child(3) {
    -webkit-animation-delay: -1s, -1.5s;
    -moz-animation-delay: -1s, -1.5s;
    -o-animation-delay: -1s, -1.5s;
    animation-delay: -1s, -1.5s
}

.la-ball-circus>div:nth-child(4) {
    -webkit-animation-delay: -1.5s, -2s;
    -moz-animation-delay: -1.5s, -2s;
    -o-animation-delay: -1.5s, -2s;
    animation-delay: -1.5s, -2s
}

.la-ball-circus>div:nth-child(5) {
    -webkit-animation-delay: -2s, -2.5s;
    -moz-animation-delay: -2s, -2.5s;
    -o-animation-delay: -2s, -2.5s;
    animation-delay: -2s, -2.5s
}

.la-ball-circus.la-sm {
    width: 8px;
    height: 8px
}

.la-ball-circus.la-sm>div {
    width: 8px;
    height: 8px
}

.la-ball-circus.la-2x {
    width: 32px;
    height: 32px
}

.la-ball-circus.la-2x>div {
    width: 32px;
    height: 32px
}

.la-ball-circus.la-3x {
    width: 48px;
    height: 48px
}

.la-ball-circus.la-3x>div {
    width: 48px;
    height: 48px
}

@-webkit-keyframes ball-circus-position {
    50% {
        left: 100%
    }
}

@-moz-keyframes ball-circus-position {
    50% {
        left: 100%
    }
}

@-o-keyframes ball-circus-position {
    50% {
        left: 100%
    }
}

@keyframes ball-circus-position {
    50% {
        left: 100%
    }
}

@-webkit-keyframes ball-circus-size {
    50% {
        -webkit-transform: scale(0.3, 0.3);
        transform: scale(0.3, 0.3)
    }
}

@-moz-keyframes ball-circus-size {
    50% {
        -moz-transform: scale(0.3, 0.3);
        transform: scale(0.3, 0.3)
    }
}

@-o-keyframes ball-circus-size {
    50% {
        -o-transform: scale(0.3, 0.3);
        transform: scale(0.3, 0.3)
    }
}

@keyframes ball-circus-size {
    50% {
        -webkit-transform: scale(0.3, 0.3);
        -moz-transform: scale(0.3, 0.3);
        -o-transform: scale(0.3, 0.3);
        transform: scale(0.3, 0.3)
    }
}

.la-ball-circus.la-2x {
    width: 0.32rem;
    height: 0.32rem;
    margin: 0 auto;
}
.la-ball-circus.la-2x>div {
    width: 0.32rem;
    height: 0.32rem;
}