html{overflow-x:hidden; overflow-y:auto; background-color: #fff;}
body{ font-size: 12px; -webkit-font-smoothing: antialiased; font-family:  "PingFangSC-Regular","Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;}
a{color:#999; text-decoration:none; cursor:pointer; outline: 0 none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0; padding:0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ol,li,ul,dl,dt,dd{list-style:none;}
fieldset,img{border:0;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
table{border-collapse:collapse; border-spacing:0;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select,button{font-family:inherit; font-size:inherit; font-weight:inherit; outline-style:none; outline-width:0pt; resize:none; padding: 0; margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;-webkit-appearance: none;}
b,em,i{display:inline-block; vertical-align:middle; font-weight:normal; font-style:normal;}
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} 

@media (min-width: 320px) {
    html {
        font-size: 32px;
    }
}
@media (min-width: 360px) {
    html {
        font-size: 36px;
    }
}
@media (min-width: 375px) {
    html {
        font-size: 37.5px;
    }
}
@media (min-width: 384px) {
    html {
        font-size: 38.4px;
    }
}
@media (min-width: 400px) {
    html {
        font-size: 40px;
    }
}
@media (min-width: 414px) {
    html {
        font-size: 41.4px;
    }
}
@media (min-width: 424px) {
    html {
        font-size: 42.4px;
    }
}
@media (min-width: 480px) {
    html {
        font-size: 48px;
    }
}
@media (min-width: 540px) {
    html {
        font-size: 54px;
    }
}
@media (min-width: 720px) {
    html {
        font-size: 72px;
    }   
}
@media (min-width: 750px) {
    html {
        font-size: 75px;
    }
}


/******************/
input::-webkit-input-placeholder {
    color: #999;
}
input:-moz-placeholder {
    color: #999;
}
input::-moz-placeholder {
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}


.main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #b9e5ff;
}
.main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* INDEX */
.index_content {
    position: relative;
    width: 100%;
}
/*.btn_turnOn {
    position: absolute;
    bottom: 7%;
    left: 19%;
    width: 63%;
    height: 6%;
}*/

.btn_turnOn {
    position: absolute;
    bottom: 7%;
    left: 12%;
    width: 77%;
    height: 8%;
}
.PopUp{
    display: none;
}
.active_popup.PopUp{
    display: block;
}
.mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 99;
}
.popup_modular{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    z-index: 100;
}
.popup_rule {
    width: 100%;
    margin-bottom: 0.4rem;
}
.popup_cancel {
    width: 1rem;
    margin: 0 auto;
}


.loadingPopup{
    display: none;
}
.active_popup.loadingPopup{
    display: block;
}
.loading_mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 999;
}
.loading_modular{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    z-index: 1000;
}


.toast_content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    text-align: center;
    background: #000;
    font-size: 0.32rem;
    color: #fff;
    border-radius: 0.2rem;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    z-index: 9999;
}
.hide {
    display: none;
}