html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
  margin: 0;
  padding: 0;
}

img, fieldset {
  border: 0;
}

/* set image max width to 100% */
img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
input, textarea, button, a,div{-webkit-tap-highlight-color:rgba(0,0,0,0);}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
html{ -webkit-text-size-adjust:none;}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/

a {
  color: #027B7E;
  text-decoration: none;
  outline: none;
}
a:hover {
  text-decoration: none;
}

p {
  padding: 0;
}

/* list */
ul, ol {

}
li {
  margin: 0 0 .5em 0;
  padding: 0;
}

/* headings */


/* reset webkit search input styles */
input[type=search] {
  -webkit-appearance: none;
  outline: none;
}
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

*{   
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
    /*-webkit-user-select:none; webkit浏览器*/   
    user-select:none;   
    -webkit-user-select:initial
} 
@-webkit-keyframes cc {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    100% {
        -webkit-transform: rotate(10deg)
    }
}

@keyframes cc {
    0% {
        transform: rotate(-10deg)
    }
    100% {
        transform: rotate(10deg)
    }
}

@keyframes opener {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(15px);
    }
}

@-webkit-keyframes opener {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(15px);
    }
}
@keyframes opener {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(15px);
    }
}
@-webkit-keyframes opener1 {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(10px);
    }
}
@keyframes opener1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}
@-webkit-keyframes sf {
    0% {
        -webkit-transform:scale(0.95)
    }
    100% {
        -webkit-transform: scale(1)
    }
}
@keyframes sf {
    0% {
        transform:scale(0.95)
    }
    100% {
        transform: scale(1)
    }
} 
#zz_record_box::-webkit-scrollbar{
    width: 5px;
    height: 5px;
    background-color:#c9b7ab;
    border-radius: 10px;
}
#zz_record_box::-webkit-scrollbar-thumb{
    background-color: #fff;
    border-radius: 10px;
}
#zz_record_box::-webkit-scrollbar-track{
    background-color:#c9b7ab;
    border-radius: 10px;
}
body,html{
    overflow-x: hidden;
    background:none;
    height:100%;
}
body{
    overflow: hidden !important;
    height:100%;
    font-family: Microsoft JhengHei !important;
    margin:0 auto !important;
    max-width:100% !important;
    font-size:14px;
}
*{touch-action:pan-y;} 
html { touch-action: none; }
.scroll{position: absolute;z-index: 1;-webkit-tap-highlight-color: rgba(0,0,0,0);width: 100%;-webkit-transform: translateZ(0);transform: translateZ(0);-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-text-size-adjust: none;text-size-adjust: none;}
.clear:after { 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear {
  display: inline-block;
  }
.app{
    overflow: hidden;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:3;
}
#pc{
    width:100%;
    height:100%;
}
.home{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: url('../img/home_bg.jpg') center center no-repeat;
    background-size: cover;
    z-index:2;
}
.m_home{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: url('../img/m_home_bg.jpg') center center no-repeat;
    background-size: cover;
}
#cvs,#m_cvs{
    width: 73.75vw;
    height:45.364vw;
    position:absolute;
    left:50%;
    top:50%;
    overflow: hidden;
    margin:-22.682vw 0 0 -36.875vw;

}
#cvs canvas,#m_cvs canvas{
    display: block;
    width: 173.333vw;
    height: 85.625vw;
    position:absolute;
    z-index: 1;
    left:50%;
    top:50%;
    margin:-42.812vw 0 0 -86.666vw;
}
.kuang{
    width: 74.75vw;
    height: 46.364vw;
    position: absolute;
    background: url('../img/kuang.png') center center no-repeat;
    background-size:100%;
    pointer-events:none;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    z-index: 1;
}
.wupin_box{
    width: 20vw;
    height: 31.614vw;
    position: absolute;
    background: url(../img/wupin_bg.png) center center no-repeat;
    background-size: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(69%,-50%);
    z-index:2;
}
#fz_btn{
    display: block;
    width:5.677vw;
    height:2.708vw;
    background: url(../img/fz_btn.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.8vw;
    top: 1.78vw;
}
#fz_btn:hover,#fz_btn.pitch{
    background: url(../img/fz_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn{
    display: block;
    width:5.677vw;
    height:2.708vw;
    background: url(../img/jz_btn.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.8vw;
    top: 4.44vw;
}
#jz_btn:hover,#jz_btn.pitch{
    background: url(../img/jz_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#single_recovery_btn{
    display: block;
    width:3.541vw;
    height:3.906vw;
    background: url(../img/single_recovery_btn.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 1.8vw;
    bottom: 1.8vw;
}
#all_recovery_btn{
    display: block;
    width:3.541vw;
    height:3.906vw;
    background: url(../img/all_recovery_btn.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 5.7vw;
    bottom: 1.8vw;
}
#random_btn{
    display: block;
    width:3.541vw;
    height:3.906vw;
    background: url(../img/random_btn.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 9.5vw;
    bottom: 1.8vw;
}
#camera_btn{
    width:2.605vw;
    height:2.605vw;
    display: block;
    background: url(../img/camera_btn.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 16vw;
    bottom: 1.8vw;
}
#jz_btn_list{
    width:5.104vw;
    position: absolute;
    right: 1.09vw;
    top: 7.5vw;
}
#jz_btn_list a{
    display: block;
    width:5.104vw;
    height:2.291vw;
    margin-bottom:0.104vw;
}
#jz_btn_list a#ms_btn{
    background: url(../img/ms_btn.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#ms_btn:hover,#jz_btn_list a#ms_btn.pitch{
    background: url(../img/ms_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#zs_btn{
    background: url(../img/zs_btn.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#zs_btn:hover,#jz_btn_list a#zs_btn.pitch{
    background: url(../img/zs_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#sy_btn{
    background: url(../img/sy_btn.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#sy_btn:hover,#jz_btn_list a#sy_btn.pitch{
    background: url(../img/sy_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#dm_btn{
    background: url(../img/dm_btn.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#dm_btn:hover,#jz_btn_list a#dm_btn.pitch{
    background: url(../img/dm_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#qw_btn{
    background: url(../img/qw_btn.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#qw_btn:hover,#jz_btn_list a#qw_btn.pitch{
    background: url(../img/qw_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#gy_btn{
    background: url(../img/gy_btn.png) center center no-repeat;
    background-size: 100%;
}
#jz_btn_list a#gy_btn:hover,#jz_btn_list a#gy_btn.pitch{
    background: url(../img/gy_btn_hover.png) center center no-repeat;
    background-size: 100%;
}
ul{
    list-style:none;
}
li{
    margin:0;
    padding:0;
}

.box_list{
    width: 11.4vw;
    height: 24.583vw;
    overflow-y: auto;
    position: absolute;
    left: 1.8vw;
    top: 0.937vw;
    box-sizing: border-box;
    padding:0 0 0.26vw 0;
}
.box_list::-webkit-scrollbar{
    width:0.364vw;
    height:0.364vw;
    /*background-color:#744d48;*/
    border-radius: 10px;
    cursor: pointer;
}
.box_list::-webkit-scrollbar-thumb{
    background-color: #453224;
    border-radius: 10px;
    cursor: pointer;
}
.box_list::-webkit-scrollbar-track{
    /*background-color:#744d48;*/
    border-radius: 10px;
    cursor: pointer;
}

.box_list li{
    width:5.208vw;
    height:6.614vw;
    position: relative;
    background: url(../img/no_box.png) center center no-repeat;
    background-size: 100%;
    margin-right:0.312vw;
    margin-bottom: 0.26vw;
    float: left;
    cursor: pointer;
}
.box_list li span{
    display: block;
    color:#fff;
    position: absolute;
    width:100%;
    font-size:1vw;
    text-align: center;
    left:0;
    bottom:0.02vw;
    font-weight: bold;
}
.box_list li .img{
    position: relative;
    width:5.15vw;
    height:5.15vw;
}
.box_list li img{
    width:100%;
    display: block;
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.box_list li.yes{
    background: url(../img/yes_box.png) center center no-repeat;
    background-size: 100%;
}
.logo{
    width:20.05vw;
    height:4.27vw;
    background: url('../img/wlogo.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    left:0.937vw;
    top:0.937vw;
}
.ft{
    width:22.083vw;
    height:3.75vw;
    background: url('../img/ft.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    right:0.572vw;
    bottom:0.572vw;
}
#pop{
    width:63.75vw;
    height:56.25vw;
    position: absolute;
    left:50%;
    top:50%;
    background: url('../img/pc_pop.png') center center no-repeat;
    background-size: 100%;
    z-index:2;
    transform: translate(-50%,-50%);
}
#pop #pop_con{
    width: 43vw;
    height: 35.197vw;
    overflow-y: auto;
    position: relative;
    left: 11vw;
    top: 9vw;
    overflow-x: hidden;
}
#pop_con::-webkit-scrollbar{
    width:8px;
    height:8px;
    /*background-color:#744d48;*/
    border-radius: 10px;
    cursor: pointer;
}
#pop_con::-webkit-scrollbar-thumb{
    background-color: #7a4241;
    border-radius: 10px;
    cursor: pointer;
}
#pop_con::-webkit-scrollbar-track{
    /*background-color:#744d48;*/
    border-radius: 10px;
    cursor: pointer;
}
#pop #pop_con .tu{
    width:43.125vw;
    height:71.979vw;
    background: url('../img/gz.png') center center no-repeat;
    background-size: 100%;
    position: relative;
    top:-2vw;
}
#pop #pop_con .tu a{
    display: block;
    color: #080808;
    font-size: 1.36vw;
    position: absolute;
    left: 2.42vw;
    top: 57.1vw;
    font-weight: bold;
}
#close_pop{
    width:2.812vw;
    height:2.812vw;
    cursor: pointer;
    position: absolute;
    right: 9.5vw;
    top: 6vw;

}
#go_game{
    width: 21.666vw;
    height: 5.104vw;
    cursor: pointer;
    position: absolute;
    left: 20.8vw;
    bottom: 6.2vw;
}
#load_box{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background: rgba(0,0,0,0.7);
    z-index:3000;
}
#load_txt{
    width: 17.552vw;
    height: 3.541vw;
    background: url(../img/hdi.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 3vw;
    bottom: 3vw;
    box-sizing: border-box;
    font-size: 1.1vw;
    color: #fff;
    font-weight: bold;
}
#load_txt img{
    display: block;
    width:14.583vw;
    top: -1.3vw;
    left: -2vw;
    position: relative;
}
#tiao{
    width: 28.2vw;
    height: 1.8vw;
    position: absolute;
    left: 0.81vw;
    top: 0.34vw;
}
#tiao div{
    height:100%;
    background:#43875f;
    position:absolute;
    left:0;
    top:0;
    border-radius: 0 10px 10px 0;
}
#tiao i{
    height:100%;
    background:#211810;
    display: block;
    width:100%;
    left:0;
    top:0;
}
#tiao strong{
    display: block;
    color:#fff;
    width:100%;
    text-align: center;
    position: absolute;
    left:0;
    top:0;
    font-size:1vw;
    padding:0.1vw 0 0 0;
}
#tiao span{
    width: 30vw;
    height: 2.5vw;
    background: url(../img/load_tiao.png) center center no-repeat;
    background-size: 100%;
    display: block;
    position: absolute;
    left: -0.6vw;
    top: -0.4vw;
}
#ren{
    width:2.708vw;
    position: absolute;
    z-index: 1;
    left:1%;
    top:-1vw;
    transform: scale(1.1);
    -webkit-transform: scale(1.1)
}
#ren img{
    display: block;
    width:100%;
    position: relative;
    left:-1.2vw;
    -webkit-animation: cc 0.3s linear alternate infinite;
    animation: cc 0.3s linear alternate infinite;
}
#txt0{
    width: 13.125vw;
    height: 5.416vw;
    background: url(../img/txt_0.png) center center no-repeat;
    background-size: 100%;
    position: absolute;
    top: -5vw;
    left: 9.3vw;
}
#load_con{
    width:30vw;
    height:2.5vw;
    background-size: 100%;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.m_logo{
    width:3.3rem;
    height:0.7rem;
    background: url('../img/m_logo.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    left:0.2rem;
    top:0.7rem;
}

.m_ft{
    width:3.31rem;
    height:0.47rem;
    background: url('../img/m_ft.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    right:0rem;
    bottom:0.7rem;
}
.jconfirm .jconfirm-box-container{
    position: absolute;
    left: 16%;
    top: 50%;
    transform: translate(-50%,-50%) !important;
    -webkit-transform: translate(-50%,-50%) !important;
    width:20%;
}
#home_btn{
    width:17.968vw;
    height:2.552vw;
    background: url('../img/home_btn.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    left:50%;
    bottom:2.555vw;
    margin:0 0 0 -8.948vw;
    cursor: pointer;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
#m_home_btn{
    width:4.46rem;
    height:0.56rem;
    background: url('../img/m_home_btn.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    left:50%;
    top:50%;
    margin:2.5rem 0 0 -2.23rem;
    cursor: pointer;
}
@media (max-width: 1000px){
    .jconfirm .jconfirm-box-container {
        position: absolute;
        left: 21%;
        top: 50%;
        transform: translate(-24%,-51%) !important;
        -webkit-transform: translate(-24%,-51%) !important;
        width: 77%;
    }
    .col-sm-offset-3 {
        margin-left: 10% !important;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2){
    #m_home_btn{
        margin:3.4rem 0 0 -2.23rem;
    }
    .m_logo{
        top:0.1rem;
    }
    .m_ft{
        bottom:0;
    }
}

/* iphone6 Plus,iphone7 Plus,iphone8 Plus */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3){
    #m_home_btn{
        margin:3rem 0 0 -2.23rem; 
    }
    .m_logo{
        top:0.1rem;
    }
    .m_ft{
        bottom:0;
    }
       
}