#app{max-width:640px;margin:0 auto;z-index:2;min-height:100%;background:#1a0c09}
#app #top{position:fixed;background:url(../images/top_bg.png) center no-repeat;background-size:100% 100%;height:13.33334vw;max-height:85.3334px;width:100vw;left:0;top:0;z-index:9;touch-action:none}
#app #top .logo{height:100%;text-align:center}
#app #top .logo img{height:100%}
#app #top .custom{position: absolute;right: 0;top: 0;width: 13.3334vw;height: 13.33334vw;line-height: 1em;text-align: center;display: block;font-size: 24px;transition: none;color:#dec592;display: flex;justify-content: center;flex-direction: column}
#app #top .custom small{font-size: 10px;line-height: 10px;padding-top: 4px}
#app .menu{position:absolute;width:13.33334vw;height:13.33334vw;left:0;top:0;max-width:85px;max-height:85px}
#app .menu>a{text-align:center;height:100%;display:flex;justify-content:center;flex-direction:column}
#app .menu img{width:8vw;max-width:50px;margin:0 auto}
#page_one{width:100%;height:100vh;background:url(../images/page_one_bg.jpg) top center no-repeat;background-size:100% auto}
#page_one .banner{height:83vw;position:relative;}
#page_one .banner .fly{position:absolute;width:100%;left:0;bottom:4vw}
#page_one .banner .fly .ico{position:absolute;left:0;bottom:0;width:100%;animation:moving 10s infinite;opacity:0}
#page_one .banner .fly .ico.fly1{animation-delay:0s}
#page_one .banner .fly .ico.fly2{animation-delay:-5.2s}
#page_one .banner .fly .ico.fly3{animation-delay:3.6s}
#page_one .banner .fly .ico.fly4{animation-delay:4.5s}
#page_one .banner .fly .ico.fly5{animation-delay:-1.8s}
#page_one .banner .fly .ico.fly6{animation-delay:-1.3s}
#page_one .banner .fly .ico.fly7{animation:tan 10s infinite;opacity:1}
#page_one .button{width:100vw;margin:0 auto;display: flex;text-align:center;justify-content: center; }
#page_one .button .single{position: relative;display: inline-block;width: 80%;flex-shrink: 0;padding: 0 10px;text-align: center}

#page_one .button .base{position: relative;display: inline-block;flex-shrink: 0;text-align:}

#page_one .button .single.full{width:74%;flex-shrink: 0;padding: 0 10px;text-align: center;margin: 0 auto}
#page_one .animate{position:absolute;height:100%;left:10px;top:-2px;animation:btn .6s infinite}
#page_one .animate.delay{animation-delay: .3s;}
#app .arrow{text-align:center;padding:4vw 0;position:relative}
#app .arrow p{position: relative;display: inline-block;width: 40px;height: 20px}
#app .arrow p span{display: block;position: absolute;left: 0;top: 0;background: url(../images/arrow.png) no-repeat;background-size: contain;width: 100%;height: 100%;animation:star 1s infinite;animation-delay: 0.3s;opacity: .7;}
#app .arrow p::before{content: '';display: block;position: absolute;left: 0;top: -10px;background: url(../images/arrow.png) no-repeat;background-size: contain;width: 100%;height: 100%;animation:star 1s infinite;animation-delay: 0;opacity: .7;}
#app .arrow p::after{content: '';display: block;position: absolute;left: 0;top: 10px;background: url(../images/arrow.png) no-repeat;background-size: contain;width: 100%;height: 100%;animation:star 1s infinite;animation-delay: 0.6s;opacity: .7;}
#app .azjc{position:absolute;left:0;top:36vw;width: 24vw}
#app .cesu {padding-top: 10px}
#app .cesu .list{margin:0 2vw;padding-top:10px}
#app .cesu .list dl{display:flex;justify-content:space-between;padding:6px 0}
#app .cesu .list dl dt{background:#a70503;color:#fff;font-size:14px;height:30px;line-height:30px;width:18vw;text-align:center;flex-shrink:0;border:red 1px solid;border-right:none}
#app .cesu .list dl dd{flex-grow:1}
#app .cesu .list dl dd.btns{flex-grow:0;flex-shrink:0;width:22vw;padding-left:14px}
#app .cesu .list dl dd.btns button{height:30px;line-height:30px;display:block;width:100%;background:red;border-radius:6px;color:#fff;border-bottom:#a70503 3px solid}
#app .cesu .list dl dt+dd{background:#e8e8e8;line-height:30px;position:relative}
#app .cesu .list dl dt+dd cite{position:absolute;left:0;top:0;font-size:10px;background:#d6d6d6;color:#666;height:14px;line-height:14px;font-style:normal;padding:0 4px}
#app .cesu .list dl dt+dd span{display:block;padding-left:40px;font-size:14px}
#app .cesu .list dl dt+dd span b{color:red;font-weight:400}
#bottom{text-align:center;position:fixed;left:0;bottom:0;height:32px;line-height:32px;background:#242323;color:#999;width:100vw;font-size:12px;touch-action:none;}
#page_two{height:100vh;background:url(../images/page_two_bg.jpg) top center no-repeat;background-size:100% auto;}
#page_one .arrow{position:absolute;bottom:16px;left:0;width:100vw}
#page_three .arrow{position:absolute;bottom:16px;left:0;width:100vw;}
#app #page_three .arrow p span{background-image: url(../images/arrow_up.png) ;}
#app #page_three .arrow p::before{background-image: url(../images/arrow_up.png);}
#app #page_three .arrow p::after{background-image: url(../images/arrow_up.png);}
#page_three{height:100vh;background:#160336 url(../images/page_three_bg.jpg) top center no-repeat;background-size:100% auto;position: relative;}
#notice{position:fixed;left:0;top:13.26vw;z-index:8;background:#1c0e04;width:100%;padding:0 6px;touch-action:none;display:none}
#notice dl{display:flex;line-height:34px;color:#fff}
#notice dl dt{line-height:30px;flex-shrink:0}
#notice dl dt img{height:21px}
#notice .swiper-slide{white-space:nowrap;overflow:hidden}
.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;-ms-transition-timing-function:linear;-o-transition-timing-function:linear;transition-timing-function:linear;margin:0 auto}
#page_three #slider{padding-top:37.6vw}
#page_three #slider img{width:140px}
#certify .swiper-slide{width:190px;text-align:center}
#certify .swiper-slide img{display:block;margin:0 auto}
#certify .swiper-slide.swiper-slide-next img{transform:rotate(6deg)}
#certify .swiper-slide.swiper-slide-prev img{transform:rotate(-6deg)}
#background{position:fixed;width:100%;height:100%;background:#000;opacity:0;left:0;top:0;z-index:0;touch-action:none;visibility:hidden;transition:all .6s}
#app.show #background{visibility:visible;opacity:.65;z-index: 9;}
#menu{position:fixed;background:#211913;width:46vw;height:calc(100vh - 13.333vw);top:13.333vw;left:-46vw;z-index:10;transition:all .6s;touch-action:none}
#app.show #menu{left:0}
#app #menu ul{border-bottom:rgba(255,255,255,.05) 1px solid}
#app #menu ul li{border-top:rgba(255,255,255,.05) 1px solid;border-bottom:rgba(0,0,0,.15) 1px solid}
#app #menu ul li a{color:#fff;color:rgba(255,255,255,.8);font-size:15px}
#app #menu ul li a.green{color:#14de7e;}
#app #menu ul li dl{display:flex;padding:0 14px}
#app #menu ul li dl dt{height:46px;display:flex;flex-direction:column;justify-content:center;font-size:18px;padding-right:8px}
#app #menu ul li dl dd{display:flex;justify-content:center;flex-direction:column;text-align:center;line-height:1em}
#app #menu ul li dl dd small{color:#14de7e;display:inline-block;border:#14de7e 1px solid;border-radius:4px;font-size:8px}
#xrBox{visibility:hidden;opacity:0;position:fixed;left:0;top:0;width:100%;height:100vh;z-index:-9999;transition:none;}
#xrBox .inner{width: 100vw;height: 100vh;position: relative;overflow-y: scroll;}
#xrBox.show{z-index:9999;visibility:visible;opacity:1;transition:all 1.3s;}
#xrBox .close{width:100%;height:14vw;left:0;top:0;cursor:pointer;position:absolute}
#xrBox .install{width:100%;height:24vw;left:0;bottom:0;cursor:pointer;position:fixed}
#hide{position:absolute;left:-1000px;top:-1000px}
#app .hide{display: none}
#red_bag{position: fixed;width: 100vw;height: 100vh;left: 0;top: 0;z-index: 999;display: flex;flex-direction: column;justify-content: center;opacity: 0;background: rgba(0,0,0,.65);visibility: hidden;transition: all .6s}
#red_bag.show{visibility: visible;opacity: 1;}
#red_bag .inner{width: 100vw;margin: 0 auto;background: url(../images/regbag.png);height: 106vw;background-size: 100% auto;position: relative;color:#fff}
#red_bag button{border:none;background:none;}
#red_bag .form{position: absolute;width: 56vw;left: 22vw;bottom: 12vw;text-align: center;}
#red_bag .form ul {padding: 6px 0 6px 0}
#red_bag .form ul li{display: flex;text-align: left;background:#760c03;margin-bottom: 10px;font-size: 12px;}
#red_bag .form ul li label{flex-shrink: 0;line-height: 28px;padding-left: 4px;}
#red_bag .form ul li input{background: transparent;height: 28px;line-height: 28px;color:#ff0}
#red_bag .form h4{padding:0 0 10px 0}
#red_bag .close{position: absolute;width: 100%;height: 13vw;background:transparent;left: 0;top: 0;}
@keyframes btn{0%{top:-2px}50%{top:2px}100%{top:-2px}}
@keyframes moving{
0%{opacity:0;transform:scale(.3)}
30%{opacity:0;transform:scale(.3)}
50%{opacity:1;transform:scale(1)}
90%{opacity:1;transform:scale(1)}
100%{opacity:0;transform:scale(.3)}
}
@keyframes tan{
0%{opacity:1}
47%{opacity:1}
50%{opacity:0}
52%{opacity:1}
100%{opacity:1}
}
@keyframes star{
  0%{opacity:.2}
  50%{opacity:.7}
  100%{opacity:.2}
  }
  
.ios_mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    text-align: center;
    display: none;
    z-index: 1000;
}

.ios_mask img {
    position: absolute;
    top: 8.9rem;
    left: 1.1rem;
    width: 5.28rem;
    height: 1.31rem;
    transform-origin: center 0.9rem;
    animation: iosWobble 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    -moz-animation: iosWobble 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    -webkit-animation: iosWobble 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.ios_mask button {
    width: 4.4rem;
    height: 0.94rem;
    font-weight: bold;
    border: 1px #fff solid;
    border-radius: 0.94rem;
    text-align: center;
    background: #ffffff;
    line-height: 0.94rem;
    font-size: 0.37rem;
    color: #007aff;
    box-shadow: 0px 0px 7px 2px #007fff;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (device-height: 736px) {
    .ios_mask img {
        top: 8rem;
    }

    .ios_mask button {
        bottom: 0.6rem;
    }
}

@media screen and (device-height: 667px) {
    .ios_mask img {
        top: 8rem
    }

    .ios_mask button {
        bottom: 0.6rem;
    }
}


@keyframes iosWobble {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(5deg);
    }
    20% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(0deg);
    }
    70% {
        transform: rotate(-5deg);
    }
    80% {
        transform: rotate(-10deg);
    }
    90% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}