body {}
#wrapper {
    width            : 100%;
    height           : auto;
    background-image : url(../imgs/body_bg.jpg);
    background-repeat: repeat;
    overflow         : hidden;
}

/*Mob display:none*/
.frame_decoration, .frame_left, .frame_right, .flower, .system, .girl, .rabbit { display: none; }

/*------------------------------------------*/
/*Nav*/
/*------------------------------------------*/
.nav {
    position      : fixed;
    width         : 100%;
    height        : 0;
    padding-bottom: 15%;
    overflow      : hidden;
    bottom        : 0;
    z-index       : 1000;
}
.nav_box {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 15%;
}
.btn_reservation {
    position         : fixed;
    width            : 45%;
    height           : 0;
    padding-bottom   : 16%;
    background-repeat: no-repeat;
    background-size  : 100%;
    bottom           : 0;
    left             : 0;
    z-index          : 5000;
}
.btn_reservation_light {
    width            : 100%;
    height           : 0;
    padding-bottom   : 40%;
    background-repeat: no-repeat;
    background-size  : 100%;
    -webkit-animation: shine 1s infinite;
       -moz-animation: shine 1s infinite;
        -ms-animation: shine 1s infinite;
         -o-animation: shine 1s infinite;
            animation: shine 1s infinite;
}
.btn_reservation       { background-image : url(../imgs/btns/btn_reservation.png); }
.btn_reservation_light { background-image : url(../imgs/btns/btn_reservation_light.png); }



.btns {
    position      : absolute;
    width         : 52%;
    height        : 0;
    padding-bottom: 9%;
    top           : 29%;
    left          : 43%;
    z-index       : 50;
}
.btns a {
    float            : left;
    height           : 0;
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 0 4% 0 3%;
}
.btns a:hover { opacity: 0.5; transition: 0.5s;}
.btn_web {
    width           : 29%;
    padding-bottom  : 18%;
    background-image: url(../imgs/btns/nav_btn_web_mob.png);
}
.btn_download {
    width           : 26%;
    padding-bottom  : 18%;
    background-image: url(../imgs/btns/nav_btn_download_mob.png);
}
.btn_FB {
    width           : 24%;
    padding-bottom  : 18%;
    background-image: url(../imgs/btns/nav_btn_fb_mob.png);
}
.nav_bg {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 13.2%;
    background-image : url(../imgs/btns/nav_bg_mob.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    bottom           : 0;
    z-index          : 1;
}
/*------------------------------------------*/
/*Nav---END---*/
/*------------------------------------------*/



/*------------------------------------------*/
/*Vision*/
/*------------------------------------------*/
.vision {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 112%;
}
.vision_box {
    position      : absolute;
    width         : 100%;
    height        : 0;
    padding-bottom: 113%;
    overflow      : hidden;
    z-index       : 5;
}
.premary_vision {
    width            : 100%;
    height           : 0;
    padding-bottom   : 112%;
    overflow         : hidden;
}
.layout {
    position         : absolute;
    width            : 96%;
    height           : 0;
    padding-bottom   : 27%;
    background-image : url(../imgs/vision/layout.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    top              : 72.5%;
    left             : 2%;
    z-index          : 20;
}
.btn_end {
    display: block;
    width: 80%;
    height: 0;
    padding-bottom: 20%;
    background-image: url(../imgs/btns/btn_999_end.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: auto;
}

.time {
    position: absolute;
    width: 72%;
    height: 0;
    padding-bottom: 14%;
    background-image: url(../imgs/vision/layout_02_free.png);
    background-size: 100%;
    background-repeat: no-repeat;
    top: 87.5%;
    left: 14%;
    z-index: 20;
}

.show {
    width         : 75% !important;
    padding-bottom: 38% !important;
    top           : 53% !important;
    left          : 14% !important; 
}
.logo {
    position         : absolute;
    width            : 58%;
    height           : 0;
    padding-bottom   : 30%;
    background-image : url(../imgs/vision/logo.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    top              : 55%;
    left             : 22%;
    z-index          : 19;
    -webkit-animation: layout 1000ms linear both;
       -moz-animation: layout 1000ms linear both;
        -ms-animation: layout 1000ms linear both;
         -o-animation: layout 1000ms linear both;
            animation: layout 1000ms linear both;
}
@keyframes layout { 
    0%     { -webkit-transform: matrix3d(10, 0, 0, 0, 0, 10, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(10, 0, 0, 0, 0, 10, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    5.61%  { -webkit-transform: matrix3d(5.127, 0, 0, 0, 0, 5.127, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(5.127, 0, 0, 0, 0, 5.127, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.41%  { -webkit-transform: matrix3d(2.771, 0, 0, 0, 0, 2.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(2.771, 0, 0, 0, 0, 2.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    11.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    14.91% { -webkit-transform: matrix3d(2.484, 0, 0, 0, 0, 2.484, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(2.484, 0, 0, 0, 0, 2.484, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    18.72% { -webkit-transform: matrix3d(2.909, 0, 0, 0, 0, 2.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(2.909, 0, 0, 0, 0, 2.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    26.03% { -webkit-transform: matrix3d(2.069, 0, 0, 0, 0, 2.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(2.069, 0, 0, 0, 0, 2.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    33.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    41.04% { -webkit-transform: matrix3d(1.353, 0, 0, 0, 0, 1.353, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1.353, 0, 0, 0, 0, 1.353, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    55.66% { -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1.002, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    63.26% { -webkit-transform: matrix3d(1.065, 0, 0, 0, 0, 1.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1.065, 0, 0, 0, 0, 1.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    77.88% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    85.49% { -webkit-transform: matrix3d(1.012, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1.012, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100%   { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
             transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

/*Day*/
.day_00, .day_01, .day_02, .day_03, .day_04, .day_05, .day_06 {
    display          : none;
    position         : absolute;
    width            : 80%;
    height           : 0;
    padding-bottom   : 12%;
    background-size  : 100% auto;
    background-repeat: no-repeat;
    top              : 68%;
    left             : 10%; 
    z-index          : 20;
}
.day_00 { background-image: url(../imgs/day_00.png); }
.day_01 { background-image: url(../imgs/day_01.png); }
.day_02 { background-image: url(../imgs/day_02.png); }
.day_03 { background-image: url(../imgs/day_03.png); }
.day_04 { background-image: url(../imgs/day_04.png); }
.day_05 { background-image: url(../imgs/day_05.png); }
.day_06 { background-image: url(../imgs/day_06.png); }

/*Hot*/
.layout_hot {
    position         : absolute;
    width            : 66%;
    height           : 0;
    padding-bottom   : 15%;
    background-image : url(../imgs/hot.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    top              : 66.5%;
    left             : 17.2%;
    z-index          : 20;
}


/*Video*/
.btn_video {
    position         : absolute;
    width            : 12%;
    height           : 0;
    padding-bottom   : 12%;
    top              : 46%;
    left             : 44%;
    z-index          : 18;
}
.btn_video_box {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 100%;
}
.arrow {
    position         : absolute;
    width            : 40%;
    height           : 0;
    padding-bottom   : 47%;
    background-image : url(../imgs/btns/btn_play.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    top              : 30%;
    left             : 35%;
    z-index          : 1;
}
.circle {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 100%;
    background-image : url(../imgs/btns/btn_play_02.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    -webkit-animation: 2s turn infinite linear;
       -moz-animation: 2s turn infinite linear;
        -ms-animation: 2s turn infinite linear;
         -o-animation: 2s turn infinite linear;
            animation: 2s turn infinite linear;
}
/*Video POP*/
.myboxdiv {
    position: absolute;
    z-index : 9999;
}
.myboxOverlay {
    position  : absolute;
    left      : 0px;
    top       : 0px;
    z-index   : 9998;
    visibility: visible;
    background: black;
    display   : none;
}
.wrapper2 {
    width         : 90%;
    height        : 0;
    padding-bottom: 30%;
    margin        : auto;
    margin-top    : -15%;
}
.pop02 {
    position        : relative;
    width           : 100%;
    height          : 0;
    padding-bottom  : 50%;
    background-color: white;
    margin          : auto;
}
.pop02 iframe {
    display: block;
    width  : 100%;
}
.btn_pop_close {
    position          : absolute;
    display           : block;
    width             : 9%;
    height            : 0;
    padding-bottom    : 9%;
    background-image  : url(../imgs/close.png);
    background-size   : 100% auto;
    background-repeat : no-repeat;
    right             : 0%;
    top               : -21%;
    margin            : auto;
    -webkit-transition: all 0.2s ease-out;     
       -moz-transition: all 0.2s ease-out;      
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}

.sun {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 120%;
    background-image : url(../imgs/vision/light.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    mix-blend-mode   : screen;
    top              : 0;
    z-index          : 11;
    opacity          : 0.5;
    -webkit-animation: shine 3s infinite;
    -moz-animation   : shine 3s infinite;
     -ms-animation   : shine 3s infinite;
      -o-animation   : shine 3s infinite;
         animation   : shine 3s infinite;
}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){.sun{ display: none;}}

.black {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 46%;
    background-image : url(../imgs/vision/black.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    bottom           : 0;
    right            : 0;
    z-index          : 11;
}
.front {
    position         : absolute;
    width            : 180%;
    height           : 0;
    padding-bottom   : 100%;
    background-image : url(../imgs/vision/front.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    bottom           : 0;
    right            : -14%;
    z-index          : 9;
    -webkit-animation: front 5s infinite;
       -moz-animation: front 5s infinite;
        -ms-animation: front 5s infinite;
         -o-animation: front 5s infinite;
            animation: front 5s infinite;
}
@keyframes front  {
    0%   { top: -5%; }
    50%  { top: 0%; }
    100% { top: -5%; }
}

.smoke {
    position         : absolute;
    width            : 140%;
    height           : 0;
    padding-bottom   : 78%;
    background-image : url(../imgs/vision/smoke.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    bottom           : 0%;
    left             : 0;
    z-index          : 9;
    mix-blend-mode   : screen;
    -webkit-animation: smoke 5s infinite;
       -moz-animation: smoke 5s infinite;
        -ms-animation: smoke 5s infinite;
         -o-animation: smoke 5s infinite;
            animation: smoke 5s infinite;
}
@keyframes smoke {
    0%   { bottom: 0%; }
    50%  { bottom: -2%; }
    100% { bottom: 0%; }
}

/*Roles*/
.mob_roles { display: none; }
.roles {
    position      : absolute;
    width         : 100%;
    height        : 0;
    padding-bottom: 115%;
    z-index       : 5;
}
.roles_box {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 115%;
}
.p_01, .p_02, .p_03, .p_04 {
    position         : absolute !important;
    height           : 0;
    background-size  : 100%;
    background-repeat: no-repeat;
} 
.p_01 { width: 130%; padding-bottom: 96%; z-index: 7; top: 20% !important; left: -14% !important; background-image: url(../imgs/vision/p_01.png); }
.p_02 { width: 80%;  padding-bottom: 70%; z-index: 5; top: 13% !important; left: -8% !important;  background-image: url(../imgs/vision/p_02.png); }
.p_03 { width: 105%; padding-bottom: 80%; z-index: 5; top: 7% !important;  left: 20% !important;  background-image: url(../imgs/vision/p_03.png); }
.p_04 { width: 55%;  padding-bottom: 40%; z-index: 4; top: 0% !important;  left: 17% !important;  background-image: url(../imgs/vision/p_04.png); }

.vision_bg {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 113%;
    background-image : url(../imgs/vision/bg_mob.jpg);
    background-size  : 100%;
    background-repeat: no-repeat;
}
/*------------------------------------------*/
/*Vision---END---*/
/*------------------------------------------*/




/*------------------------------------------*/
/*Events*/
/*------------------------------------------*/
/*Main Structure*/
.main {
    position: relative;
    width   : 100%;
    height  : auto;
}

.event_1, .event_2, .event_3 {
    position         : relative;
    width            : 100%;
    height           : auto;
    background-image : url(../imgs/content_bg.png);
    background-repeat: repeat;
    margin           : auto;
    margin-bottom    : 10%;
}
.event_3 { margin-bottom: 5%; }
.event_1 .top, .event_2 .top, .event_3 .top {
    width            : 100%;
    height           : 0;
    padding-bottom   : 4%;
    background-image : url(../imgs/frame_top_mob.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    padding-top      : 8%;
}
.event_1 .top { background-image : url(../imgs/frame_top_mob_event1.png) !important; }
.event_1 .mid, .event_2 .mid, .event_3 .mid {
    position         : relative;
    width            : 100%;
    height           : auto;
    background-image : url(../imgs/frame_mid_mob.png);
    background-size  : 100%;
    background-repeat: repeat-y;
    overflow         : hidden;
}
.event_2 .mid { padding-top: 15%; }
.event_3 .mid { padding-bottom: 5%; }

.event_1 .footer, .event_2 .footer, .event_3 .footer {
    width            : 100%;
    height           : 0;
    padding-bottom   : 12%;
    background-image : url(../imgs/frame_top_mob.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
    
}



/*Event Title*/
.event_1 .top .title, .event_2 .top .title, .event_3 .top .title, .event_4 .top .title {
    position         : relative;
    height           : 0;
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : auto;
    z-index          : 20;
}
.event_1 .top .title { width: 75%; padding-bottom: 8%;  background-image: url(../imgs/title_01-2_pc.png); margin-top: 3%;}
.event_3 .top .title { width: 90%; padding-bottom: 16%; background-image: url(../imgs/title_03_pc.png);   margin-top: 10%;}
.event_2 .top .title {
    position        : absolute;
    width           : 100%;
    padding-bottom  : 70%;
    background-image: url(../imgs/title_02_mob.png);
    top             : -4%;
    left            : 0;
}
.event_4 .top .title {
    width           : 80%;
    padding-bottom  : 14%;
    background-image: url(../imgs/event04/title.png);
}

/*Event 1 step / Event 2 step*/
.step_1, .step_2, .step_3 {
    position: relative;
    width   : 90%;
    height  : auto;
    margin  : 8% auto 12% auto;
}

/*Step Title*/
.step_title {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 9.5%;
}
.step_1 .step_title .step_img, .step_2 .step_title .step_img, .step_3 .step_title .step_img {
    position         : absolute;
    width            : 20%;
    height           : 0;
    padding-bottom   : 6.7%;
    background-size  : 100%;
    bottom           : 0;
    background-repeat: no-repeat;
}
.step_1 .step_title .step_img { background-image : url(../imgs/step_01.png); }
.step_2 .step_title .step_img { background-image : url(../imgs/step_02.png); }
.step_3 .step_title .step_img { background-image : url(../imgs/step_03.png); }

.line {
    position        : absolute;
    width           : 100%;
    height          : 0;
    padding-bottom  : 0.2%;
    background-color: #d40000;
    bottom          : 0;
}
.step_title span {
    display    : block;
    width      : 110%;
    font-size  : 4.5vw;
    font-weight: bold;
    color      : white;
    text-align : center;
    margin-left: 6%;
}




/*------------------------------------------*/
/*Event 1*/
/*------------------------------------------*/
/*STEP 1---------*/
/*Phone Number*/
.information {
    width         : 100%;
    height        : 0;
    padding-bottom: 13%;
    margin        : 5% auto 0 auto;
    overflow      : hidden;
}
.choose {
    float       : left;
    display     : block;
    width       : 30%;
    margin-right: 4%;
}
.choose select {
    display           : block;
    width             : 108%;
    height            : 30%;
    border            : solid #353535 2px;
    color             : #969696;
    background-color  : #090909;
    font-size         : 4vw;
    padding           : 6% 7%;
    border-radius     : 0;
    -webkit-text-align-last: center;
       -moz-text-align-last: center;
        -ms-text-align-last: center;
         -o-text-align-last: center;
            text-align-last: center;
    -webkit-text-align     : center;
       -moz-text-align     : center;
        -ms-text-align     : center;
         -o-text-align     : center;
            text-align     : center;
    -webkit-appearance     : none;
       -moz-appearance     : none;
        -ms-appearance     : none;
         -o-appearance     : none;
            appearance     : none;
}
.phone {
    float: left;
    width: 62%;
}
.phone input {
    display         : block;
    width           : 100%;
    padding         : 3% 1.5%;
    text-align      : center;
    border          : solid #353535 2px;
    color           : #969696;
    background-color: #090909;
    font-size       : 4vw;
}


/*Privacy Policy / btn:Get 999 Diamonds*/
label {
    display: block;
    width  : 77%;
    height : auto;
    margin : 3.5% auto;
    cursor : pointer;
}
input[type=checkbox] { display: none;}
input[type=checkbox]+span {
    display        : inline-block;
    padding-left   : 9%;
    line-height    : 5vw;
    background     : url(../imgs/btns/btn_checked_2.png) no-repeat;
    background-size: 7%;
    user-select    : none;
}
input[type=checkbox]:checked+span {
    background     : url(../imgs/btns/btn_checked.png) no-repeat;
    background-size: 7%;
}
label span {
    font-size: 4vw;
    color    : white;
}
.btn_diamond {
    display          : block;
    width            : 80%;
    height           : 0;
    padding-bottom   : 20%;
    background-image : url(../imgs/btns/btn_999.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : auto;
}
.btn_diamond_light {
    display          : block;
    width            : 100%;
    height           : 0;
    padding-bottom   : 25%;
    background-image : url(../imgs/btns/btn_999_light.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    -webkit-animation: shine 1s infinite;
       -moz-animation: shine 1s infinite;
        -ms-animation: shine 1s infinite;
         -o-animation: shine 1s infinite;
            animation: shine 1s infinite;
}
.btn_done {
    display          : block;
    width            : 70%;
    height           : 0;
    padding-bottom   : 20%;
    background-image : url(../imgs/btns/btn_done.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : auto;
}
/*STEP 1---END---*/

.fb_box {
    width   : 95%;
    margin  : 3% auto 0 auto;
    overflow: hidden;
    border  : solid 2px white;
}

/*STEP 3---------*/
/*APP Store*/
.app_store { display: none; }
.mob_app_store {
    width         : 100%;
    height        : auto;
    margin        : auto;
    overflow      : hidden;
}
.step_3 a {
    position      : relative;
    display       : block;
    width         : 70%;
    height        : 0;
    padding-bottom: 20%;
    margin        : 3% auto 0% auto;
    border-radius : 10px;
    transition    : 0.5s;
    overflow      : hidden;
}
.step_3 a:hover { opacity: .7; transition: 0.5s;}
.step_3 a .frame {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 30%;
    background-image : url(../imgs/btns/btn_store_frame.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    z-index          : 5;
}
.bright_light {
    position         : absolute;
    width            : 10%;
    height           : 0;
    padding-bottom   : 30%;
    background-color : white;
    transform-origin : bottom;
    transform        : skewX(-25deg);
    opacity          : .2;
    left             : -20%;
    z-index          : 2;
    -webkit-animation: light 3s infinite;
       -moz-animation: light 3s infinite;
        -ms-animation: light 3s infinite;
         -o-animation: light 3s infinite;
            animation: light 3s infinite;
}
.ios_store, .android_store {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 30%;
    background-size  : 100%;
    background-repeat: no-repeat;
    top              : 2%;
    z-index          : 1;
}
.ios_store     { background-image : url(../imgs/btns/btn_store_ios.png); }
.android_store { background-image : url(../imgs/btns/btn_store_android.png); }
/*------------------------------------------*/
/*Event 1---END---*/
/*------------------------------------------*/




/*------------------------------------------*/
/*Event 2*/
/*------------------------------------------*/

/*STEP 1---------*/
.event_2 .mid .step_1 { margin-bottom: 5%; }

/*Select Characters*/
.binding_characters {
    width      : 90%;
    height     : auto;
    margin     : 0 auto 3% auto;
    padding-top: 17%;
}
.login, .login_done {
    display          : block;
    width            : 60%;
    height           : 0;
    padding-bottom   : 18%;
    background-size  : 100% auto;
    background-repeat: no-repeat;
    margin           : 3% auto 10% auto;
    transition       : 0.5s;
}
.login      { background-image: url(../imgs/btns/btn_login.png); }
.login_done { background-image: url(../imgs/btns/btn_login_done.png); }
.login:hover{ opacity: .8; transition: 0.5s; }

.select_characters {
    width : 80%;
    height: auto;
    margin: auto;
}
.select_box {
    width   : 100%;
    height  : auto;
    margin  : auto;
    overflow: hidden;
}
.select_title {
    width            : 100%;
    height           : 0;
    padding-bottom   : 24%;
    background-image : url(../imgs/event02/title_select.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
.select_box span {
    display    : block;
    color      : white;
    text-align : center;
    font-size  : 6vw;
    font-weight: bold;
}
.yellow {
    font-size  : 3.5vw  !important;
    font-weight: 200     !important;
    color      : #fff200 !important;
    margin     : 0 0 6% 0;
}

.choose_2 {
    width         : 100%;
    height        : 0;
    padding-bottom: 41%;
    margin        : 0 auto 5% auto;
}
.choose_2 select{
    display         : block;
    width           : 100%;
    padding-bottom  : 3%;
    border          : solid #353535;
    color           : #969696;
    background-color: #090909;
    padding-left    : 3%;
    font-size       : 5vw;
    text-align      : center;
    padding-top     : 2%;
    margin          : 3% auto;
    -webkit-text-align-last: center;
       -moz-text-align-last: center;
        -ms-text-align-last: center;
         -o-text-align-last: center;
            text-align-last: center;
    -webkit-text-align     : center;
       -moz-text-align     : center;
        -ms-text-align     : center;
         -o-text-align     : center;
            text-align     : center;
    -webkit-appearance     : none;
       -moz-appearance     : none;
        -ms-appearance     : none;
         -o-appearance     : none;
            appearance     : none;
}
.btn_binding, .btn_logout {
    display          : block;
    width            : 70%;
    height           : 0;
    padding-bottom   : 27%;
    background-size  : 100% auto;
    background-repeat: no-repeat;
    margin           : 2% auto 10% auto;
    overflow         : hidden;
    transition       : 0.5s;
}
.btn_binding { background-image : url(../imgs/btns/btn_lock.png); }
.btn_logout  { background-image : url(../imgs/btns/btn_logout.png); margin-top: 5%;}
.btn_binding:hover, .btn_logout:hover{ opacity: .8; transition: 0.5s; }

.binding_box {
    width         : 100%;
    height        : 0;
    padding-bottom: 60%;
    margin        : auto;
}
.server, .name {
    display       : block;
    width         : 100%;
    height        : 0;
    padding-bottom: 10%;
    font-size     : 5vw;
    font-weight   : 500;
    color         : white;
    overflow      : hidden;
    margin        : 0 auto 3% auto;
}
.show {font-size: 5vw;font-weight: 300;}
.icon {
    float            : left;
    width            : 6%;
    height           : 0;
    padding-bottom   : 10%;
    background-image : url(../imgs/arrow_2.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    margin           : 2% 2% 0 0;
}



/*STEP 2---------*/
.link_title {
    width            : 100%;
    height           : 0;
    padding-bottom   : 15%;
    background-image : url(../imgs/event02/item_00_mob.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
.link {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 15%;
    margin        : 0 auto 2% auto;
    padding-top   : 3%;
}
.link input {
    float           : left;
    width           : 60%;
    padding         : 1% 2%;
    border          : solid #353535;
    color           : #969696;
    background-color: #090909;
    font-size       : 4vw;
    clip-path       : polygon(0 0, 100% 0%, 94% 100%, 0% 100%);
}
.btn_copy {
    position         : absolute;
    width            : 39%;
    height           : 0;
    padding-bottom   : 10%;
    background-image : url(../imgs/btns/btn_copy.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    right            : 0;
    transition       : 0.5s;
    z-index          : 5;
}
.friends {
    width            : 100%;
    height           : 0;
    padding-bottom   : 10%;
    background-image : url(../imgs/event02/item_01.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin-bottom    : 1%;
}
.friends span {
    display         : block;
    width           : 38%;
    font-size       : 4vw;
    font-weight     : bold;
    border          : solid #353535 1px;
    background-color: #090909;
    color           : white;
    text-align      : center;
    margin-left     : 41.5%;
}

/*STEP 3---------*/
.event_2 .mid .step_3 {
    position: relative;
    width   : 90%;
    height  : auto;
    margin  : 2% auto 0 auto;
}
.event_2 .mid .step_3 .step_title {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 5.6%;
}
.event_2 .mid .step_3 .step_title .step_img {
    position         : absolute;
    width            : 20%;
    height           : 0;
    padding-bottom   : 6.9%;
    background-size  : 100%;
    top              : 92%;
    background-repeat: no-repeat;
}
.event_2 .mid .step_3 .step_title .line { display: none; }
.event_2 .mid .step_3 .step_title span {
    width     : 76%;
    margin    : 0 0 0 24%;
    text-align: left;
}
.description {
    width     : 100%;
    height    : auto;
    margin    : auto;
    font-size : 4vw;
    color     : white;
    text-align: left;
    margin    : 14% auto 0 auto;
}
.description span { color: #fb453e; }

.reward_box {
    width         : 70%;
    height        : 0;
    padding-bottom: 60%;
    margin        : 5% auto 1% auto;
}
.reward {
    width            : 100%;
    height           : 0;
    padding-bottom   : 50%;
    background-image : url(../imgs/event02/reward_S.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
.serial_number {
    width         : 80%;
    height        : 0;
    padding-bottom: 30%;
    margin        : auto;
}
.serial_number div {
    display    : block;
    text-align : center;
    color      : white;
    font-size  : 5vw;
    font-weight: bold;
}
.serial_number span {
    display    : block;
    text-align : center;
    color      : #969696;
    font-size  : 4vw;
    font-weight: bold;
    border     : solid #353535;
    padding    : 3%;
    margin     : 3% auto;
}

.tip_yellow {
    width        : 100%;
    height       : auto;
    margin       : auto;
    overflow     : hidden;
    margin-bottom: 6%;
}
.tip_yellow .tip {
    float            : left;
    width            : 5%;
    height           : 0;
    padding-bottom   : 5%;
    background-image : url(../imgs/tip_2.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
.tip_yellow span {
    float     : left;
    width     : 93%;
    font-size : 4vw;
    color     : #f9d800;
    text-align: justify;
}

/*Ranking Board / Reward List*/
.event_2 .mid .rank_box .step_2 { width: 100%; margin-bottom: 4% !important;}
.rank_box {
    width   : 90%;
    height  : auto;
    margin  : 7% auto 0 auto;
    overflow: hidden;
}
.ranking_box, .reward_list {
    position: relative;
    width   : 100%;
    height  : auto;
    overflow: hidden;
}
.ranking_box { margin: 0 0 10% 1.5%;  }

.ranking_box .title, .reward_title {
    width            : 70%;
    height           : 0;
    padding-bottom   : 14%;
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : auto;
}
.ranking_box .title { background-image : url(../imgs/event02/leaderboard_title_01.png); }
.reward_title       { width: 55%; background-image : url(../imgs/event02/leaderboard_title_02.png); }

.Form_item {
    width      : 96%;
    margin-left: 0%;
}
.Form_item span {
    display   : inline-block;
    padding   : 2% 2%;
    color     : #969696;
    font-size : 4vw;
    text-align: center;
}
.ranking   { width: 10%; }
.cellphone { width: 45%; }
.battle    { width: 30%; }
.ranking_2 { width: 10%; } 
.award     { width: 80%; }

.list {
    width         : 95%;
    height        : 0;
    padding-bottom: 125%;
    margin        : 0 auto 5% auto;
}
.list ul, .reward_list ul { 
    width          : 100%; 
    height         : auto; 
    overflow       : hidden;
    display        : flex;
    flex-direction : column;
    justify-content: center;
}
.list ul { width: 100% !important; }
.list ul li { 
    width           : 97%; 
    height          : 0; 
    padding-bottom  : 10%;
    background-color: #503629;
    border          : solid #f5dca6 2px;
    margin-bottom   : 2%;
}
.list ul li span {
    display   : inline-block;
    text-align: center;
    padding   : 2% 2%;
    color     : white;
    font-size : 4vw;
}

.scroll {
    position      : absolute;
    width         : 5%;
    max-height    : 0;
    padding-bottom: 57vh;
    overflow      : hidden;
    right         : 0;
}
.arrow_1, .arrow_2 {
    width            : 100%;
    height           : 0;
    padding-bottom   : 100%;
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
.arrow_1 { background-image: url(../imgs/arrow.png); }  
.arrow_2 {
    background-image : url(../imgs/arrow.png); 
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}
.scroll_line {
    width           : 2%;
    height          : 0;
    padding-bottom  : 53vh;
    background-color: white;
}

/*Scroll Style*/
/* 整個捲軸 */
::-webkit-scrollbar { width: 5px; }
/* 捲軸的軌道 */
::-webkit-scrollbar-track { background: #fff; }
/*捲軸尚未滑到的軌道*/
::-webkit-scrollbar-track-piece{ background: #6f6f6f; }
/* 滑動的區塊 */
::-webkit-scrollbar-thumb { background: white; }
/* 滑鼠移到滑動的區塊上 */
::-webkit-scrollbar-thumb:hover { background: white; }


/*Reward List*/
.list_box {
    width         : 100%;
    height        : auto;
    margin        : auto;
}
.reward_list ul li, .grand_prize  {
    width           : 99%;
    height          : 0;
    padding-bottom  : 28%;
    background-color: #503629;
    border          : solid #f5dca6 2px;
    margin-bottom   : 2%;
}
.grand_prize { padding-bottom: 46% !important; }
.one {
    float            : left;
    width            : 50%;
    height           : 0;
    padding-bottom   : 45%;
    background-image : url(../imgs/event02/reward_01.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 1.5% 2%;
}
.two, .three {
    float            : left;
    width            : 20%;
    height           : 0;
    padding-bottom   : 13%;
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 7.5% 5%;
}
.four, .five {
    float            : left;
    width            : 15%;
    height           : 0;
    padding-bottom   : 14%;
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 7% 7%;
}
.two   { background-image: url(../imgs/event02/2.png); }
.three { background-image: url(../imgs/event02/3.png); }
.four  { background-image: url(../imgs/event02/4~5.png); }
.five  { background-image: url(../imgs/event02/6~10.png); }
.ss {
    display: block;
    width  : 50%;
}


.reward_box_1 {
    float   : left;
    width   : 44%;
    height  : auto;
    overflow: hidden;
    margin  : 11% 0 0 0;
}
.reward_box_1 div { float: left; width: 100%; height: 0; padding-bottom: 18%; margin-bottom: 3%; }
.reward_box_1 div img { float: left; width: 15%; margin-right: 2%; }
.reward_box_1 div span {
    float    : left;
    font-size: 4vw;
    color    : white;
    padding  : 1% 1%;
}

.reward_box_2, .reward_box_3, .reward_box_4 {
    float   : left;
    width   : 60%;
    height  : 0;
    overflow: hidden;
}
.reward_box_2 { padding-bottom: 23%; margin: 2% 2%; }
.reward_box_3 { padding-bottom: 16%; margin: 6% 0; }
.reward_box_4 { padding-bottom: 6%;  margin: 11% 0 0 0;width: 60% !important; }

.reward_box_2 div, .reward_box_3 div { float: left; width: 90%;}
.reward_box_4 div { float: left; width: 100%; }

.reward_box_2 div img,  .reward_box_3 div img,  .reward_box_4 div img { float: left; width: 14%; margin-right: 2%;}
.reward_box_2 div span, .reward_box_3 div span, .reward_box_4 div span {
    float    : left;
    font-size: 4vw;
    color    : white;
    padding  : 1% 1%;
}

/*Tips*/
.tips, .tips_2 {
    width : 90%;
    height: auto;
    margin: 2% auto;
}
.tips ul,    .tips_2 ul    { width: 100%; height: auto; overflow: hidden; }
.tips ul li, .tips_2 ul li { width: 100%; height: auto; overflow: hidden; margin-bottom: 2%; }
.tip {
    float            : left;
    width            : 5%;
    height           : 0;
    padding-bottom   : 5%;
    background-image : url(../imgs/tip.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 0.6% 1%;
}
.tips ul li span, .tips_2 ul li span {
    display  : block;
    float    : left;
    width    : 93%;
    font-size: 4vw;
    color    : #959595;
}
/*STEP 3---END---*/
/*------------------------------------------*/
/*Event 2---END---*/
/*------------------------------------------*/




/*------------------------------------------*/
/*Event 3*/
/*------------------------------------------*/
/*Number of People*/
.build_up {
    width            : 90%;
    height           : 0;
    padding-bottom   : 8%;
    background-image : url(../imgs/event03/item.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 24% auto 0 auto;
}
.build_up span {
    display         : block;
    width           : 35%;
    font-size       : 4vw;
    font-weight     : bold;
    border          : solid #353535 2px;
    background-color: #090909;
    color           : white;
    text-align      : center;
    margin-left     : 41%;
}
.tips_2 {width: 90% !important;}

/*Number Target*/
.map {
    width         : 98%;
    height        : 0;
    padding-bottom: 105%;
    margin        : 5% auto 0 auto;
}
.map_box {
    position         : relative;
    width            : 100%;
    height           : 0;
    padding-bottom   : 115%;
    background-image : url(../imgs/event03/map_mob.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
/*10000*/
.reservation_1 {
    position      : absolute;
    width         : 50%;
    height        : 0;
    padding-bottom: 31%;
    overflow      : hidden;
    top           : 63%;
    left          : 2%;
    z-index       : 5;
}
.reservation_1 .building {
    width            : 100%;
    height           : 0;
    padding-bottom   : 58%;
    background-image : url(../imgs/event03/building_10000_mob.png);
    background-repeat: no-repeat;
    background-size  : 100%;
}

/*30000*/
.reservation_2 {
    position      : absolute;
    width         : 35%;
    height        : 0;
    padding-bottom: 65%;
    overflow      : hidden;
    top           : 11%;
    left          : 1%;
    z-index       : 1;
}
.reservation_2 .building {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 184%;
    background-image : url(../imgs/event03/building_30000_mob.png);
    background-repeat: no-repeat;
    background-size  : 100%;
}

/*50000*/
.reservation_3 {
    position      : absolute;
    width         : 37%;
    height        : 0;
    padding-bottom: 42%;
    overflow      : hidden;
    top           : 6%;
    left          : 31%;
    z-index       : 1;
}
.reservation_3 .building {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 113%;
    background-image : url(../imgs/event03/building_50000_mob.png);
    background-repeat: no-repeat;
    background-size  : 100%;
}

/*100000*/
.reservation_4 {
    position      : absolute;
    width         : 45%;
    height        : 0;
    padding-bottom: 58%;
    overflow      : hidden;
    top           : 42%;
    left          : 55%;
    z-index       : 1;
}
.reservation_4 .building {
    position         : absolute;
    width            : 100%;
    height           : 0;
    padding-bottom   : 129%;
    background-image : url(../imgs/event03/building_100000_mob.png);
    background-repeat: no-repeat;
    background-size  : 100%;
}
.accomplish { background-position: bottom; }

.copyright {
    width            : 90%;
    height           : 0;
    padding-bottom   : 18%;
    background-image : url(../imgs/copyright.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    margin           : auto;
    padding-top      : 5%;
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}
.copyright span {
    margin    : auto;
    display   : block;
    width     : 90%;
    text-align: center;
    color     : white;
    font-size : 3vw;
}

.event_3 .footer span {
    display          : block;
    width            : 100%;
    color            : white;
    font-size        : 3vw;
    text-align       : center;
    text-align       : justify;
    text-justify     : inter-ideograph;
}
.btn_precautions {
    position         : absolute;
    display          : block;
    width            : 50%;
    height           : 0;
    padding-bottom   : 16%;
    background-image : url(../imgs/btns/btn_precautions.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    bottom           : -1.5%;
    left             : 25%;
    z-index          : 100;
    transition       : 0.5s;
}
.btn_precautions:hover { opacity: 0.8; transition: 0.5s; }
/*------------------------------------------*/
/*Event 3---END---*/
/*------------------------------------------*/




/*------------------------------------------*/
/*Event 4*/
/*------------------------------------------*/
.event_4 {
    position         : relative;
    width            : 100%;
    height           : auto;
    background-image : url(../imgs/content_bg.png);
    background-repeat: repeat;
    margin           : auto;
    margin-bottom    : 40%;
}
.event_4 .top {
    position         : relative;
    width            : 100%;
    height           : 0;
    padding-bottom   : 110%;
    background-image : url(../imgs/event04/frame_top_mob.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    padding-top      : 8%;
}
.event_4 .mid {
    width            : 100%;
    height           : auto;
    background-image : url(../imgs/frame_mid_mob.png);
    background-size  : 100%;
    background-repeat: repeat-y;
    overflow         : hidden;
}
.event_4 .footer {
    width            : 100%;
    height           : 0;
    padding-bottom   : 12%;
    background-image : url(../imgs/frame_top_mob.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}
.event_4 .mid .frame_left, .event_4 .mid .frame_right {
    position         : absolute;
    width            : 5%;
    height           : 0;
    padding-bottom   : 46%;
    background-size  : 100%;
    background-repeat: no-repeat;
    top              : 30%;
}
.event_4 .mid .frame_left  { 
    background-image: url(../imgs/frame_decoration.png); 
    left            : 1%;
}
.event_4 .mid .frame_right { 
    background-image : url(../imgs/frame_decoration.png); 
    right            : 1%;
    -webkit-transform: scaleX(-1);
       -moz-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
         -o-transform: scaleX(-1);
            transform: scaleX(-1);
}



.big_character {
    position      : absolute;
    width         : 110%;
    height        : 0;
    padding-bottom: 90%;
    top           : 16%;
    left          : -10%;
}
.big_character_box {
    position         : relative;
    width            : 100%;
    height           : 0;
    padding-bottom   : 80%;
    background-image : url(../imgs/event04/character_mob.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
}
.character_name {
    position         : absolute;
    width            : 11%;
    height           : 0;
    padding-bottom   : 22%;
    background-image : url(../imgs/event04/name.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    top              : 18%;
    right            : 20%;
    z-index          : 2;
}
.big_weapon {
    position         : absolute;
    width            : 70%;
    height           : 0;
    padding-bottom   : 50%;
    background-image : url(../imgs/weapon.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    top              : 55%;
    right            : 17%;
    z-index          : 5;
    -webkit-animation: big_weapon 5s infinite;
       -moz-animation: big_weapon 5s infinite;
        -ms-animation: big_weapon 5s infinite;
         -o-animation: big_weapon 5s infinite;
            animation: big_weapon 5s infinite;
}
@keyframes big_weapon {
    0%   { top: 55%; }
    50%  { top: 50%; }
    100% { top: 55%; }
}
.min_character_box {display: none;}
.mob_min_character_box {
    width         : 95%;
    height        : 0;
    padding-bottom: 55%;
    margin        : auto;
}
.mob_min_character_box .radar {
    float            : left;
    width            : 41%;
    height           : 0;
    padding-bottom   : 38%;
    background-image : url(../imgs/event04/radar_mob.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    margin           : 10% 0 0 3%;
}
.mob_min_character_box .min_character {
    float            : left;
    width            : 56%;
    height           : 0;
    padding-bottom   : 55%;
    background-image : url(../imgs/event04/stand.gif);
    background-size  : 123% auto;
    background-repeat: no-repeat;
    margin           : auto;
}

.event_4 .mid span {
    display    : block;
    width      : 90%;
    height     : auto;
    font-size  : 3.5vw;
    font-weight: 500;
    color      : white;
    text-align : justify;
    margin     : auto;
}

.skill_introduction {
    width : 90%;
    height: auto;
    margin: 10% auto 15% auto;
}
.skill_introduction ul { width: 100%; height: auto; overflow: hidden; }
.skill_introduction ul li {width: 100%;height: auto;overflow: hidden;margin: 0 0 7% 0;}

.skill_introduction ul li img {
    float : left;
    width : 20%;
    margin: 0 3% 0 0;
}

.skill_description {
    float : left;
    width : 75%;
    height: auto;
}
.skill_name {
    width         : 100%;
    height        : 0;
    padding-bottom: 10%;
}
.icon2 {
    float            : left;
    width            : 8%;
    height           : 0;
    padding-bottom   : 10%;
    background-image : url(../imgs/event04/icon.png);
    background-size  : 100% auto;
    background-repeat: no-repeat;
    margin           : 0.5% 1% 0 0;
}
.skill_name span {
    float      : left;
    font-size  : 5vw   !important;
    font-weight: bold    !important;
    color      : #ffdf01 !important;
}

.skill_introduction ul li .skill_description .txt {
    display   : block;
    width     : 100%;
    float     : left;
    color     : white;
    margin    : left;
    text-align: justify;
    font-size : 3.5vw;
}
.txt p {
    float      : left;
    font-weight: 700;
    color      : #ffdf01 !important;
}
/*------------------------------------------*/
/*Event 4--END---*/
/*------------------------------------------*/




/*------------------------------------------*/
/*POP*/
/*------------------------------------------*/
/*pop 1*/
.pop {
    width      : 90% !important;
    height     : auto;
    padding-top: 5% !important;
}
.pop .top { 
    position         : relative;
    width            : 100%; 
    height           : 0; 
    padding-bottom   : 12%;
    background-image : url(../imgs/pop/top.png);
    background-size  : 100%;
    background-repeat: no-repeat;
}
.pop .footer {
    width            : 100%; 
    height           : 0; 
    padding-bottom   : 13%;
    background-image : url(../imgs/pop/footer.png);
    background-size  : 100%;
    background-repeat: no-repeat;
}
.pop .mid {
    width            : 100%; 
    height           : auto; 
    background-image : url(../imgs/pop/mid.png);
    background-size  : 100%;
    background-repeat: repeat-y;
}
.pop .mid span {
    display    : block;
    width      : 90%;
    font-size  : 3.5vw;
    color      : white;
    text-align : center;
    margin     : auto;
}
.red {
    font-size  : 7vw !important;
    color      : #fb4449 !important;
    font-weight: bold;
}
/*diamond999 number*/
.pop_diamond {
    width           : 40% !important;
    font-size       : 1.5vw;
    border          : solid #353535;
    background-color: #090909;
    color           : #7b7b7b !important;
    margin-top      : 1% !important;
    padding         : 1.5%;
    text-align      : center;
}
.pop_btn_close {
    position      : absolute;
    width         : 10%;
    height        : 0;
    padding-bottom: 10%;
    top           : 0;
    right         : 0;
}

/*App Store*/
.btn_app_store {
    display          : block;
    width            : 60%;
    height           : 0;
    padding-bottom   : 19%;
    background-image : url(../imgs/btns/btn_app_store.png);
    background-size  : 100%;
    background-repeat: no-repeat;
    margin           : 6% auto 0 auto;
}

/*Precautions*/
.pop .mid ul {
    width   : 90%;
    height  : auto;
    margin  : auto; 
    overflow: hidden;
}
.pop .mid ul li { width: 100%; height: auto; overflow: hidden; margin-bottom: 2%; }
.pop .mid ul li .number {
    float       : left;
    width       : 3%;
    margin-right: 3%; 
    text-align  : center;
}
.pop .mid ul li span {
    float       : left;
    width       : 93%;
    text-align  : left;
    text-align  : justify;
    text-justify: inter-ideograph;
}
/*------------------------------------------*/
/*POP---END---*/
/*------------------------------------------*/