/*Theme Name: template*/
/* ================== 基础样式 ================== */
*{position:relative;margin:0;padding:0;font-size:12px;line-height:20px;border:0;box-sizing:border-box;text-decoration:none;-ms-overflow-style:none;}
a{position:relative;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent;}
img{position:relative;width:100%;height:auto;background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-user-drag:none;-ms-user-drag:none;}
body{position:relative;color:#000;background:#fff;-webkit-tap-highlight-color:transparent;}
span{position:relative;color:#757575;}
label{position:relative;margin:0 0 10px 0;display:flex;align-items:center;}
button{position:relative;cursor:pointer;}
input{position:relative;outline:none;}
::-webkit-scrollbar{display:none;}
/* ================== 颜色调节表单样式 ================== */
.fixed-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:10px 0 10px 0;width:100%;height:1px;background:#000;border-radius:10px;border:0;}
.fixed-range::-webkit-slider-runnable-track{margin:10px 0 10px 0;width:100%;height:1px;background:#000;border-radius:10px;border:0;}
.fixed-range::-ms-fill-lower{margin:10px 0 10px 0;width:100%;height:1px;background:#000;}
.fixed-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin:-5px 0 0 0;width:10px;height:10px;background:#800;border-radius:50%;border:0;}
.fixed-range::-ms-fill-upper{margin:-5px 0 0 0;width:10px;height:10px;background:#800;border-radius:50%;border:0;}
/* ================== 布局类样式 ================== */
#shoot,#photo,#container{display:none;position:fixed;left:0;right:0;width:100%;height:75%;background-size:contain;background-repeat:no-repeat;background-position:center;z-index:-1;}
#filme{display:block;width:100%;height:100%;object-fit:cover;z-index:1;}
#catch,#whole{position:fixed;bottom:25%;left:0;right:0;margin:0 auto;height:40px;color:#fff;background:#800;display:flex;justify-content:center;align-items:center;z-index:1;}
#girl,#boy{position:fixed;bottom:25%;left:0;right:0;margin:-80px auto;height:40px;color:#fff;background:#000;display:flex;justify-content:center;align-items:center;z-index:1;}
#label{position:fixed;left:0;right:0;margin:0 auto;padding:20px;max-width:500px;z-index:-1;}
#wrapper{position:fixed;top:75%;width:100%;height:25%;color:#fff;background:#000;display:flex;justify-content:center;align-items:center;-webkit-overflow-scrolling:touch;}
#content{position:absolute;top:0;margin:40px 0 0 0;width:100%;height:100%;font-size:0;color:#fff;overflow:auto;white-space:nowrap;}
#feature{position:fixed;top:75%;width:100%;display:flex;justify-content:center;align-items:center;z-index:1;}
#tinge{position:absolute;padding:0;margin:20px 0 0 20px;width:80px;text-align:center;z-index:1;}
#loading{position:absolute;padding:60px 0 0;left:40%;width:20%;transform:scale(1);}
/* ================== 元素类样式 ================== */
.tore{position:relative;color:#000;cursor:pointer;}
.menu{position:relative;float:left;padding:10px 0;width:auto;color:#fff;background:rgb(0 0 0 / 0%);display:flex;justify-content:center;align-items:center;}
.peal{position:relative;color:#000;font-size:20px;font-weight:bold;text-align:center;}
.side{position:relative;padding:10px 60px 10px 20px;width:100%;color:#757575;background:#f2f2f2;border-radius:20px;text-align:left;cursor:auto;display:flex;justify-content:center;align-items:center;}
.side::-webkit-input-placeholder{color:#757575;}.side:-ms-input-placeholder{color:#757575;}.side::placeholder{color:#757575;}
.shut{position:absolute;top:0;right:0;padding:10px 20px;color:#757575;background:rgb(0 0 0 / 0%);cursor:pointer;display:flex;justify-content:center;align-items:center;}
.word{position:relative;margin:10px 0;text-align:justify;}
.fade{position:absolute;padding:5px 10px;width:100%;opacity:0;cursor:pointer;}
.down{position:relative;margin:10px auto;padding:5px 10px;width:50%;color:#fff;background:#000;border-radius:20px;text-align:center;display:flex;justify-content:center;align-items:center;transition:all 0.3s;-webkit-tap-highlight-color:transparent;}
.post{position:relative;display:inline-block;width:10%;filter:brightness(1);transition:all 0.3s;}
.post:active{filter:brightness(0.5);}
.into{position:relative;margin:20px 0 0 0;width:100%;height:100%;text-align:center;}
.page-nav{position:relative;float:left;text-align:center;text-decoration:none;display:flex;justify-content:center;align-items:center;}
.dise{position:relative;padding:10px 20px;width:100%;color:#fff;background:#800;border-radius:20px;text-align:center;display:flex;justify-content:center;transition:all 0.3s;}
.dise:active,.get-sms-code:active,.button-submit:active{background:#000;}
.shap{position:absolute;top:20px;right:20px;color:#000;font-size:20px;font-weight:bold;background:rgb(0 0 0 / 0%);cursor:pointer;justify-content:center;align-items:center;z-index:999;}
.shap:active,a:active{color:#757575;}
.link,.draw{position:relative;float:none;display:flex;margin:0;padding:0;width:100%;color:#fff;text-align:center;z-index:1;}
.book{position:absolute;top:10px;z-index:1;}
/* ================== 用户中心布局样式 ================== */
.user-center-container{position:relative;margin:0 auto;padding:20px;max-width:500px;}
.large-title{position:relative;margin:0 0 10px 0;color:#000;font-size:20px;font-weight:bold;text-align:center;}
.user-nav{position:relative;display:flex;justify-content:center;align-items:center;}
.form-group{position:relative;margin:0 0 10px 0;}
.text-box{position:relative;padding:10px;width:100%;background:#f2f2f2;border-radius:20px;}
.agree-on{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0 5px 0 0;width:15px;height:15px;border:1px solid#757575;background:#fff;border-radius:20px;cursor:pointer;transition:all 0.3s;}
.agree-on:checked{background:#000;}
.custom-notice{position:fixed;top:0;width:100%;height:50px;line-height:50px;color:#fff;opacity:1;text-align:center;transition:all 0.3s;z-index:999;}
.custom-notice.error{background:#800;}
.custom-notice.success{background:#000;}
.custom-notice.hide{opacity:0;}
.links{position:relative;margin:10px 0 0 0;display:flex;justify-content:center;align-items:center;}
.fling{position:relative;color:#757575;text-align:center;display:flex;justify-content:center;align-items:center;}
.each-menu{position:relative;color:#000;transition:all 0.3s;}
.sms-code-group{position:relative;display:flex;width:auto;white-space:nowrap;}
.get-sms-code{position:relative;margin-left:10px;background:#800;color:white;border:none;padding:10px 20px;border-radius:20px;transition:all 0.3s;}
.get-sms-code:disabled{background:#ccc;}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 50%);overflow:auto;z-index:1;}
.modal-content{position:relative;top:200px;max-width:500px;margin:20px auto;padding:20px;}
.modal-box{position:relative;padding:20px;background:#fff;border-radius:10px;text-align:center;}
.recharge-options{position:relative;margin:0 0 10px 0;width:100%;display:flex;justify-content:center;flex-wrap:wrap;z-index:1;}
.recharge-btn{position:relative;float:left;padding:10px;width:25%;color:#fff;background:#000;transition:all 0.3s;}
.recharge-btn:active,.down:active{background:#800;}
.button-submit{position:relative;padding:10px 20px;width:100%;background:#800;color:#fff;border-radius:20px;transition:all 0.3s;}
/* ================== 响应式布局样式 ================== */
@media screen and (max-width: 1440px){#loading{left:38%;width:24%;}.post{width:12%;}}
@media screen and (max-width: 1080px){#loading{left:36%;width:28%;}.post{width:16%;}}
@media screen and (max-width: 800px){#loading{left:34%;width:32%;}.post{width:24%;}}
@media screen and (max-width: 500px){#loading{left:32%;width:36%;}.post{width:28%;}}