@charset "UTF-8";

.member-container {
	width: 100%;
	height: 900px;
	display: flex;
	position: relative;
	margin-bottom: 10px;
	cursor: default;
}

.member-container a {
	color: inherit;
	text-decoration: none;
}

.member-memberList-container {
	width: 25%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
}

.member-list-title {
	width: 100%;
	height: 10%;
	display: flex;
	align-items: center;
	font-size: 16pt;
	font-weight: 900;
	font-size: 35pt;
	font-family: "Yusei Magic", sans-serif;
	position: relative;
	padding-left: 10%;
}

.member-list-box {
	width: 100%;
	height: 90%;
	overflow-y: hidden;
	overflow-x: hidden;
	overflow-y: scroll;
	font-family: 'CustomFont', sans-serif;
	font-weight: 900;
}

/*스크롤 숨기기*/
.member-list-box::-webkit-scrollbar {
	display: none;
}

.member-memberList {
	width: 100%;
	height: 8%;
	display: flex;
	align-items: center;
	font-size: 20pt;
	position: relative;
	padding-left: 10%;
}

.member-memberList img {
	width: 20px;
	height: auto;
	margin-left: 10px;
}

.member-memberList:hover {
	width: 100%;
	transition: transform 0.2s ease, font-size 0.2s ease;
	transform: scale(1);
	font-weight: 900;
	font-size: 25pt;
	z-index: 600;
	text-shadow: 3px 3px 2px white;
}

.member-memberList.show {
	width: 100%;
	position: relative;
	transform: scale(1);
	font-weight: 900;
	font-size: 25pt;
	z-index: 600;
	text-shadow: 3px 3px 2px white;
}

.member-img-container {
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	overflow: hidden;
	position: relative;
	left: 0;
	top: 0;
}

.member-backgroundImg {
	width: 100%;
	height: 900px;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.member-backgroundImg.show {
	display: flex;
}


.member-backgroundImg>img {
	width: auto;
	height: 110%;
	object-fit: cover;
	z-index: 0;
	position: absolute;
	top: -5%;
	left: 0;
}

.member-img-box {
	width: 33%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

.member-img {
	height: 100%;
	width: 100%;
}

.member-img>img {
	height: 95%;
	width: auto;
	position: absolute;
	top: 2%;
	right: 0;
}

.member-detail-container {
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 20%;
	z-index: 100;
}

.member-detail-container2 {
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 20%;
	z-index: 100;
}

.member-detail {
	width: 65%;
	height: auto;
	border-radius: 20px;
	position: absolute;
	bottom: 4%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-inline: 4%;
	padding-top: 2%;
	padding-bottom: 3%;
	font-family: 'CustomFont', sans-serif;
	font-weight: 900;
}

#member-name {
	font-size: 30pt;
	font-weight: 900;
	padding-bottom: 3%;
}

#member-birth>span:nth-child(1) {
	font-size: 15pt;
	font-weight: 600;
}

#member-debut>span:nth-child(1) {
	font-size: 15pt;
	font-weight: 600;
}

.member-introduce-box {
	padding-top: 3%;
}

.member-mother-box {
	padding-bottom: 3%;
	padding-top: 3%;
}

#member-mother-name>span:nth-child(1) {
	font-size: 15pt;
	font-weight: 600;
}

#member-mother-name a {
	font-weight: 600;
}

#member-mother-name a:hover {
	color: gray;
}

#member-hashtag-title {
	font-size: 15pt;
	font-weight: 600;
}

.member-hashtag-box {
	display: flex;
	flex-wrap: wrap;
}

#member-hashtag {
	padding-right: 3%;
}

#member-hashtag:hover {
	color: gray;
}

.member-address-container {
	padding-top: 3%;
	padding-bottom: 3%;
}

.member-address-box {
	display: flex;
	flex-wrap: wrap;
}

#member-address-title {
	font-size: 15pt;
	font-weight: 600;
}

.member-address-box>div {
	border-radius: 20px;
	padding: 1%;
	margin: 1%;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	box-shadow: 1px 1px 9px gray;
	display: flex;
	align-items: center;
}

.member-address-box>div:hover {
	transition: transform 0.3s ease;
	transform: scale(1.2);
}

/* address 버튼별 색상처리*/
#X {
	padding-left: 20px;
	padding-right: 20px;
	background-color: black;
	color: white;
}

#youtube {
	background-color: red;
	color: white;
}

#fanbox {
	background-color: white;
	color: black;
}

#marshmallow {
	background-color: pink;
	color: black;
}

#community {
	background-color: black;
	color: white;
}

#tiktok {
	background-color: rgb(183, 0, 152);
	color: white;
}

#showroom {
	background-color: white;
}

#showroom a {
	background-image: linear-gradient(to right,
			red,
			orange,
			yellow,
			green,
			blue,
			indigo,
			purple);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

#twitch {
	background-color: purple;
	color: white;
}

#twitcase {
	background-color: white;
	color: rgb(0, 85, 255);
}

#instagram {
	background-image: linear-gradient(0deg, #ffda6f, #f92887, #5351d9);
	color: white;
}

#bilibili {
	background-color: white;
	color: skyblue;
}

#niconico {
	background-color: white;
	color: black;
}

#subaccount {
	background-color: black;
	color: white;
}

.member-detail-button-box>button {
	border-radius: 20px;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	box-shadow: 5px 5px 20px gray;
	border: none;
	background-color: rgba(240, 240, 240, 0.1);
}

.member-detail-button-box>button:hover {
	transition: transform 0.3s ease;
	transform: scale(1.1);
}