@charset "utf-8";
/* CSS Document */
html{ overflow-x:hidden}

.mem_warp {
width: 94%;
max-width: 800px;
position:relative
}

.mem_warplist {
width: 94%;
max-width: 800px;
padding:0 15px;
position:relative
}

.mem_warpa {
width: 94%;
padding: 15px 2% 15px 2%;
max-width: 800px;
position:relative;
margin-top:5px;
margin-bottom:5px
}


.mem_header{ width:100%; padding:10px 0 20px 0; float:left;display: flex;justify-content: space-between; position:relative}
.mem_header .mem_face{ width:60px !important; height:60px;position: relative; float:left; text-align:right}
.mem_header .mem_face img{ width:60px; height:60px;object-fit: cover; border-radius:50%; overflow:hidden}
.mem_header .mem_tool{ float:right;text-align: right; padding-left:18px; position:relative; padding-top:5px}
.mem_header .mem_tool img{ height:22px;object-fit: cover; filter: brightness(0) invert(1);}
.mem_header .mem_tool .num {
    background: #f4000a;
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 1;
    content: '';
    top: 2px;
    right: 0;
    border-radius: 50px;
}
.mem_header .name {
    margin: 0 !important;
    width: 100%;
	padding-left:15px;
	color:#fff;
	padding-right:10px;
	overflow:hidden;
	position:relative;

}
.mem_header .name .h1{ width:100%; float:left}
.mem_header .name .h1 strong{ font-weight:normal; font-size:16px; padding:5px 0 5px 0; float:left}

.mem_header .name .h2{ width:100%; float:left}
.mem_header .name .h2 .h2_1{float:left; position:relative;}
.mem_header .name .h2 .h2_1 img{ height:24px}
.mem_header .name .h2 .h2_1 strong{ font-size:12px; color:#fff; position:absolute; z-index:1; content:''; top:2px; right:15px; font-weight:normal}
.mem_tj{ width:100%; float:left; margin-bottom:15px; border-radius:5px; background:#fff}
.mem_tj ul{ display:inline}
.mem_tj ul li{ width:25%; float:left; position:relative}
.mem_tj ul li strong{ width:100%; float:left; text-align:center;font-weight:bold; padding-top:14px; font-size:18px; color:#36d89c}
.mem_tj ul li i{ width:100%; float:left; text-align:center; font-size:12px; color:#666; padding-bottom:10px}
.mem_tj ul li:after{ position:absolute; width:1px; background:#eee; height:20px; right:0;transform: translateY(-50%); top:50%; content:''}
.mem_tj ul li:last-child:after{background:#fff;}


.mem_cy{ width:100%; float:left;}
.mem_cy ul{ display:inline}
.mem_cy ul li{ width:25%; float:left; position:relative}
.mem_cy ul li strong{ width:100%; float:left; text-align:center;}
.mem_cy ul li strong img{ height:33px}
.mem_cy ul li i{ width:100%; float:left; text-align:center; font-size:14px; color:#666;}
.mem_menu{ width:100%; float:left}
.mem_menu li{ width:100%; float:left; height:60px; line-height:60px}
.mem_menu li i{ width:20px; float:right; height:60px; text-align:right;display: flex;align-items: center; color:#cbd3d3;justify-content: flex-end;}
.mem_menu li strong{ float:left;height:60px; width:30px;}
.mem_menu li strong img{ height:20px; vertical-align:middle; margin-bottom:4px}

/* 模态框样式 */
.modal-bottom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 初始隐藏，通过 JavaScript 控制显示 */
    justify-content: flex-end; /* 关键：从底部弹出 */
    align-items: flex-end;
    z-index: 9999;
    padding: 0;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.modal-bottom.show {
    display: flex; /* 显示弹窗容器 */
	opacity: 1;
}

.modal-content-bottom {
    width: 100%;
    max-width: 100%;
	height: 80vh;
    max-height:80vh; /* 限制最大高度为屏幕的85% - 可调整 */
    background-color: white;
    border-radius: 12px 12px 0 0; /* 顶部圆角 */
    overflow: hidden;
    position: fixed;
    bottom: 0;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更流畅的动画 */
	transform: translateY(100%); 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.modal-content-bottom.show {
    transform: translateY(0); /* 滑动到最终位置 */
}

/* 关闭按钮 */
.modal-content-bottom .close {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    z-index: 10001;
    cursor: pointer;
    text-decoration: none;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    display: block;
}

.modal-content-bottom .close:hover {
    color: #333;
}

/* 弹窗内部内容区域 */
.modal-content-bottom .modal-inner-content {
	width:100%;
    flex: 1;
    box-sizing: border-box;
    height: calc(100% - 50px); /* 减去关闭按钮等空间 */
}

.modal-bottom.show .modal-content-bottom {
    transform: translateY(0); /* 滑入到最终位置 */
}

.wdl{ width:100%; height:260px; background:#36d89c; position:relative; overflow:hidden}
.wdl:after{ width:200%; height:200px; border-radius:100%; position:absolute; bottom:-180px; background:#f7fafe; content:''; z-index:1; left:-50%}
.wdl:before{ width:80%;  aspect-ratio: 1 / 1; border-radius:100%; position:absolute; bottom:-80px; background:#2dd194; content:''; z-index:1; left:10%}
.wdl .h1{ position:relative; width:100%; text-align:center;z-index:2; padding-top:13%}
.wdl .h1 img{ width:30%}
.wdl .h2{ position:relative; width:100%; text-align:center; padding-top:6px; z-index:2; color:#fff; font-size:14px}
.wdl .h3{ position:absolute; width:100%; text-align:center;z-index:1; bottom:10px}
.wdl .h3 img{ width:30%}