@import url(../../cckm-box.css);

/** 背景 **/
.member > .bg-container {
	background-image:url(https://d1r4509tniam8v.cloudfront.net/img/funcSubscribeBg.png);
    background-size: cover; background-position: center 60%; background-repeat: no-repeat; opacity: 0.15;
	position: absolute; height: 200px; width: 100%; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
} 
@media (max-width:767px) {
	.member > .bg-container { height: 230px; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%; }
}

.member .content { margin: auto 50px; display: grid; grid-template-columns: 270px 1fr; grid-column-gap: 15px; }
.member .content .menu { margin: 30px auto 0; }
.member .content .menu ul li { padding: 15px;  border-top: 1px solid rgb(var(--gray-ccc-color)); }
.member .content .menu ul li.active { background-color: rgb(var(--gray-eee-color)); }
.member .content .menu ul li.active a { color: rgb(var(--success-color)) !important; }
.member .content .menu ul li a span { padding-left: 6px; }
@media (max-width: 991px) {
	.member .content { grid-template-columns: 1fr;  margin-left: 20px; margin-right: 20px; }
	.member .content .menu { display: flex; flex-direction: row; overflow: hidden; overflow-x: auto; justify-content: center; padding: 0;  }
	.member .content .menu ul { display: flex; }
	.member .content .menu ul li { flex-shrink: 0; padding: 10px; border-top: none; }
	.member .content .menu ul li.active { border-bottom: 5px solid rgb(var(--gold-color)); }
}