@charset "utf-8";
/* 564379992@qq.com */
* { margin: 0px; padding: 0px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); box-sizing:border-box; -webkit-box-sizing:border-box; }
body { margin: 0px; padding: 0px; font-family: 'Microsoft Yahei'; font-size: 12px; color: #333; max-width:750px; margin:0 auto; padding-top:50px;  position: relative; background:#fff; -webkit-text-size-adjust: none;}
html{
	width:100%;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
}
body{
	width:100%;
	min-height:100%;
}
ul, li, p, span, h1, h2, h3, h4, dl, dt, dd, form, input, textarea, select { margin: 0px; padding: 0px; }
input, textarea, select { color: #666;font-family: 'Microsoft Yahei'; }
i { display: inline-block; font-style:normal; }
*:focus { outline: none }
img { border: 0px; max-width:100%; }
ul, li { list-style-type: none; }
a:link, a:visited, a:active { color: #333; text-decoration: none; border: none; outline: none; }
a:hover { color: #db082a; }
.clear{ clear:both; content:''; height:0px; overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}

input[type=checkbox]{ -webkit-appearance:none; width:15px; height:15px; border-radius:2px; cursor:pointer; transition:all 0.3s ease; border:1px solid #ddd; background-position:2px 1px; vertical-align:-3px; margin-right:5px;}
input[type=checkbox]:hover{ border-color:#db241c;}
input[type=checkbox]:checked{ background:#db241c url(../img/mem/gou.png) no-repeat 2px 2px; background-size:10px auto; border-color:#db241c;}
input[type=radio]{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; cursor:pointer; transition:all 0.3s ease; border:1px solid #ddd; background-position:center center; position: relative; vertical-align:-3px; margin-right:5px;}
input[type=radio]:checked{  border-color:#db241c;}
input[type=radio]:checked:after{ width:8px; height:8px; background:#db241c; content:''; border-radius:50%; position: absolute; left:0; right:0; margin:auto; top:50%; transform: translateY(-50%);}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#bfbfbf;}

.menu .menutop{ border-bottom:1px solid #222; padding:40px 0;}
.menu .menutop .headimg{ border:1px solid #000; width:60px; height:60px; margin:0px auto; border-radius:50%; overflow:hidden; }
.menu .menutop .headimg img{ display:block; width:100%; height:100%; }
.menu .menutop p{ text-align:center; margin-top:5px; white-space: nowrap; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; color:#fff;}
.menu .menutop p a{color:#db241c}


/***会员中心***/
.mhead{ height:50px; z-index:222; position: fixed; top:0; left:0; width:100%; background:#fd5341; line-height:50px; color:#fff; overflow: hidden;}
.mhead h1{ text-align:center; font-size:16px;}
.mhead a{ width:50px; height:100%; position: absolute; left:0; top:0; background:url(../img/mem/return.png) no-repeat center; background-size:12px auto; }

.membox{
    background-image: url("../img/head_bg.png"); /* 这里替换成你想要作为背景的图片路径 */
    background-position: center;
    background-size: cover; /* 保持比例不变地调整背景图像来完全覆盖容器 */
    margin-top:-50px;
    height: 210px;
    position: relative;
}
.membox .memnav{width:39px ; height: 28px; position: absolute; top: 25px;left:5%; }
.memnav span {cursor: pointer; display:block; height:3px; background:#ffffff; margin-top:6px; transition:all .5s; -webkit-transition:all .5s; border-radius:15px}
.memnav :nth-child(1){width:20px;}
.memnav :nth-child(2){width:25px;}
.memnav :nth-child(3){width:30px;}
.memnav.on span:nth-child(2){transform:translateX(-100px); -webkit-transform:translateX(-100px);width:30px;}
.memnav.on span:nth-child(1){transform:translateY(9px) rotate(40deg); -webkit-transform:translateY(9px) rotate(40deg); width:30px;}
.memnav.on span:nth-child(3){transform:translateY(-9px) rotate(-40deg); -webkit-transform:translateY(-9px) rotate(-40deg);width:30px;}
.memsetting{width: 25px; height: 25px; position: absolute; top: 28px;right:5%; background: url('../img/mem/setting.png') no-repeat center; background-size: cover;}
.meminfo{width: 90%;text-align:center; color:#fff;margin:80px 5% 18px 5%;float:left;position: relative;}
.meminfo dt{width: 85px;height: 85px;border-radius:50%; overflow:hidden;float: left; position: relative;}
.meminfo .vip{position: absolute;top: -20px;left: 50px;width: 40px;height: 37px;background: url("../img/mem/icon_avatar.png") no-repeat center;background-size: cover;z-index: 99;}
.meminfo dt img{display: block; }
.meminfo dd{float: left; text-align: left;margin-left: 10px;}
.meminfo dd h3{ font-size:18px; font-weight:normal;}
.meminfo dd p{height:26px;margin-top:40px;font-size:16px; font-weight:normal;}
.meminfo dd p b{background: url("../img/mem/mobile.png") no-repeat left;background-size:60%;width: 20px;float: left;height:20px;padding-right:10px;}
.meminfo dd p span{display: block;float: right;margin-left:40px}
.membox .card{width: 94%;height: 145px;margin:0 3%;float:left;background-size:cover;background-repeat: no-repeat;border-radius:25px;color:#e8c72c }
.membox .card_novip{background-image: url("../img/mem/card_bg.png");}
.membox .card_vip{background-image: url("../img/mem/vip_card_bg.png");}
.membox .card .cardtop{border-bottom: #e8c72c 1px solid;padding:25px;height: 100px;}
.card .cardtop h1{font-size: 18px;font-weight: normal;margin-bottom: 10px;}
.card .cardtop h2{font-size: 20px;font-weight: bold;}
.membox .card .cardbot{width: 100%; font-size: 14px;padding-top: 5px;}
.membox .card .cardbot a{color:#e8c72c}
.card .cardbot span{float: left; text-align: center; width: 50%;height:34px;line-height: 34px;}
.card .cardbot span:first-child{border-right: #e8c72c 1px solid;}
.card .cardbot span:first-child i{background:url('../img/mem/icon_recharge.png'); background-size: cover; width: 16px; height: 16px;margin-bottom: -3px;margin-right:5px}
.card .cardbot span i{background:url('../img/mem/icon_writeoff.png'); background-size: cover; width: 16px; height: 16px;margin-bottom: -3px;margin-right:5px}
.sector_box{width: 94%;float: left; margin:20px 3%;}
.sector_box .title{width: 100%;font-size:16px; text-align:left;padding-left:20px;float:left;background: url("../img/mem/title_bg.png") no-repeat left;height:30px}
.sector_box .title span{ margin-top: -15px;}
.sector_box .title .on{color:#cf142b}
.sector_box .title .left{float: left;}
.sector_box .title .right{float: right; color:#cf142b}

/**充值***/
.sector_box .recharge_box{width: 100%;}
.sector_box .recharge_box .box{width: 119px; height:81px;background: url('../img/mem/recharge_bg.png') no-repeat center; background-size: cover; float: left; margin:20px;text-align: center;  padding:18px 0;font-size:30px;color:#cf152c;font-weight: bold;}
.sector_box .recharge_box .box i{font-size: 18px; font-weight: normal;}
.sector_box .recharge_box .recharge_btn{height:40px; line-height:40px;float:left; margin:90px auto 0 30px;text-align:center; font-size:16px; transition:0.3s ease;background-image: linear-gradient(45deg,#e22634,#e22634) ; color:#fff; border-radius:22px; border:0px; width:85%;}
.sector_box .recharge_box .wechat_btn{height:40px; line-height:40px;float:left; margin:90px auto 0 30px;text-align:center; font-size:16px; transition:0.3s ease;background-image: linear-gradient(45deg,#1AAD19,#1AAD19) ; color:#fff; border-radius:22px; border:0px; width:85%;}
.sector_box .benefits{display:none;width: 100%; border-radius:5px;overflow: hidden; background: #f3f3f3; padding: 20px; line-height: 30px;font-size: 14px;margin-bottom: 20px; float: left;}
.sector_box .benefits span{float: right; font-size: 10px;margin-top:20px}
/***核销记录***/
.sector_box .writeoff_box{width: 90%; margin: 0 5%; color:#313131}
.sector_box .writeoff_box .writeoff_list{width:100%;padding:20px; border-radius:10px;float: left; margin:20px 0; background: #efefef; height: 140px; margin-bottom: 10px;}
.sector_box .writeoff_box .writeoff_list .list_top{width: 100%;font-size: 12px;float: left;}
.writeoff_box .writeoff_list .list_top .left{float: left; }
.writeoff_box .writeoff_list .list_top .right{float: right;}
.writeoff_box .writeoff_list .list_mid {width:100%; height:70px;line-height:70px;font-size: 22px; font-weight: bold; text-align: center;float: left;}
.writeoff_box .writeoff_list .list_mid i{font-size: 10px;}
.writeoff_box .writeoff_list .list_bot{width: 100%;font-size: 12px;float: left;}

/***登录***/
.memForm{ padding:0 10%;}
.memForm .login_txt{height:20px;line-height: 20px;font-size:16px;}
.memForm .login_txt a{color:#db241c;}
.memForm h2{display:block; font-size:20px; padding:20px 0; text-align: left;}
.memForm ul{margin-top:70px;}
.memForm ul li{margin-bottom:30px; position: relative;}
.memForm ul li .intxt{ border: 1px solid #eee; border-radius:19px; height:40px; transition: 0.3s ease; line-height:40px; font-size:14px; padding-left:20px; width:100%;}
.memForm ul li .intxt:focus{border-color:#db241c;}
.memForm ul li .codeimg { height:36px; width:100px; margin: 2px auto;border:0px; cursor: pointer; position: absolute; background:none; right:0px; top:0;  color:#db241c; font-size:14px; border-top-right-radius:22px;border-bottom-right-radius:22px;}
.memForm ul li .getcode{ height:40px; border:0px; cursor: pointer; padding:0 12px; position: absolute; background:none; right:5px; top:0;  color:#1b1b1b; font-size:14px; border-top-right-radius:22px;border-bottom-right-radius:22px;}
.memForm ul li .getcode[disabled]{  cursor: default; }
.memForm ul li.li1{color:#666; display: flex; align-items:center; position: absolute; bottom: 20px;}
.memForm ul li.li1 a{float:right; color:#db241c; text-decoration: underline; margin-left:5px;}
.memForm ul li.li1 a.l{float:none;}
.memForm ul li.li2{ text-align: right; color:#666; font-size:14px;}
.memForm ul li.li2 a{color:#db241c;}
.memForm ul li.li2 a:hover{ text-decoration: underline;}
.memForm .invite_box{display: none;}
.btns{ height:40px; line-height:40px; display: block; text-align:center; font-size:16px; cursor:pointer; transition:0.3s ease; background-image: linear-gradient(45deg,#e22634,#e22634) ; color:#fff; border-radius:22px; border:0px; width:100%;}
.btns:hover{ opacity:0.9;}

/***个人资料***/
.mem-form { padding-right:12px; margin-top:10px; }
.mem-form .mem-head img{ display: block; width:100%; height:100%;}
.mem-form .mem-head .pic{ border:1px solid #eee; border-radius:50%; width:60px; overflow:hidden; height:60px; background: #eee; text-align: center; background:url(../img/mem/head.png) no-repeat center 28px; cursor: pointer; position: relative; color:#ccc; font-size:13px;  margin-bottom:5px;}
.mem-form .mem-head .pic h3{ font-weight: normal;font-size:18px; padding:120px 0px 12px 0;}
.mem-form .mem-head .pic span{ background:rgba(0,0,0,0.7); position: absolute; left:0; bottom:0; color:#fff; padding:10px 0; width:100%;}
.mem-form .mem-head .layui-upload-file{display:none;}
.mem-form .form li{ position: relative; display: flex; align-items: center; clear: both; margin-bottom:14px; font-size:14px; }
.mem-form .form li span{ margin-right:5px; display: flex; align-items: center; justify-content: flex-end; width:110px; text-align: right;}
.mem-form .form li span i{ color:red;}
.mem-form .form li .intxt{ flex:1; height:40px; line-height:40px; display: block; width:100%; border:1px solid #e5e5e5; padding:0 14px; border-radius: 3px; background: none; font-size:14px;}
.mem-form .form li .intxt:hover{ border-color:#15d79e}
.mem-form .form li .btns{ width:84px; font-size:14px; line-height:40px; margin-right:12px; height:40px; border-radius:3px;}
.mem-form fieldset {border:1px solid #ccc;padding:20px 10px 10px 10px;width: 93%;margin-bottom: 20px;margin-left:5%;font-size: 14px;}
.mem-form fieldset legend{font-weight: bold;}
.mem-form fieldset select{border:1px solid #ddd; padding:5px 20px;}
.mem-form fieldset input{border:1px solid #ddd; padding:5px 10px; width: 78px;}
.mem-form fieldset .item{margin-bottom: 10px;}
.mem-form fieldset .item label{width: 120px;float: left;line-height: 26px;}