@charset "utf-8";

.mole_titles {display: flex; padding: .75rem 1.25rem;}
.mole_gold_titles {display: flex; padding: .75rem 1.25rem;}
.cpskin-name {flex: 0 0 35%;}
.cpskin-ea {flex: auto; text-align: center;}
.cpskin-date {flex: 0 0 55%; text-align: center;}

.register .list-group-item {
	padding-left:0;
	padding-right:0;
	border-left:0;
	border-right:0;
}
@media all and (max-width:575px) {
	.register .list-group-item {
		padding-left:1.0rem;
		padding-right:1.0rem;
	}
}

/* ===========================
마이페이지
=========================== */

.mypage-head{
	display:flex;
	align-items:center;
	gap:15px;
	margin-bottom: 1rem;
}

.mypage-head::before{
	content:"👤";
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:16px;
	background:#eefaf8;
	font-size:24px;
}

.mypage-head strong{
	font-size:18px;
	font-weight: 600;
}

.mypage-head span{
	display:block;
	color: var(--con-sub);
	font-weight:400;
}

.mypage-head::before{
	content:"🟢";
	display:flex;
	align-items:center;
	justify-content:center;
}

.mypage-body{
	background:#fff;
	border:1px solid #eceef3;
	border-radius:22px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.mypage-form{
	padding:28px;
}

/* ===========================
상단 프로필
=========================== */

.mypage-order1{
	display:flex;
	gap: 20px;
	align-items:center;
}

/* 프로필 */

.my-order1-1{
	flex: 0 0 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.my-order1-1 .my-level img {
	width: 50px !important;
	height: 50px;
}

.my-order1-1 .my-reset {
	display: block;
	width: 100%;
}
.my-order1-1 .my-reset a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--colorblue-row-bg);
	padding: 0.5rem 0;
	border-radius: 50rem;
	font-weight: 500;
}
.my-order1-1 .my-reset a:hover {
	color: var(--bg-in-color-Hover)
}

/* 가운데 */

.my-order1-2{
	flex:1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.my-order1-2>div:nth-child(1){
	font-size: 16px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.my-order1-2>div:nth-child(1) a {
	background: #ff6b6b;
	color: #fff;
	font-size: 13px;
	padding: 1px 10px;
	border-radius: 50rem;
	font-weight: 500;
}

.my-order1-2>div:nth-child(2) span {
	display: inline-flex;
	padding: 3px 10px;
	border-radius: 30px;
	background: var(--colorblue-bg);
	color: var(--colorblue-text);
	font-size: 12px;
	font-weight: 500;
}

/* 레벨 */
.my-exp-text {
	font-size: 12px;
	color: #888;
}

/* ===========================
우측
=========================== */

.my-order1-3{
	flex-shrink:0;
	min-width:120px;
	text-align:center;
}

.my-order1-3>div{
	padding: 1.5rem;
	border-radius: var(--radius);
	background:#f7f9fb;
	border:1px solid #edf0f4;
	font-size:14px;
	color:#666;
}

.my-order1-3 .my-strong{
	display:block;
	margin-bottom:3px;
	font-size:22px;
	color: var(--bg-in-color);
	font-weight:700;
}

/* ===========================
모바일
=========================== */

@media (max-width:768px){
	.mypage-form{	padding:22px;}
	.mypage-order1{	flex-direction:column;text-align:center;}
	.my-order1-1 {flex: auto;}
	.my-order1-1 .my-reset {width: 100px;}
	.my-order1-2 {gap: 10px; width: 100%;}
	.my-order1-2>div:nth-child(1) {justify-content: center; gap: 10px;}
	.my-order1-2>div:nth-child(1) a {font-size: 12px;}
	.my-order1-3{	width:100%;}
	.my-order1-3>div{	width:100%; font-size: 12px;}
	.my-order1-3 .my-strong {font-size: 16px;}
}

/*로그인 페이지*/
#mb_login .form-control {height: calc(2.5em + 1.2rem + 2px); padding: 0.6rem 0.75rem; border-radius: var(--radius) !important; padding-left: 40px;}
#mb_login .outlogin_user_icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	background: url('/img/custom-img/user_icon.png') no-repeat;
	background-size: 100% 100%;
	width: 16px;
	height: 16px;
	z-index: 3;
}
#mb_login .outlogin_lock_icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	background: url('/img/custom-img/lock_icon.png') no-repeat;
	background-size: 100% 100%;
	width: 16px;
	height: 16px;
	z-index: 3;
}
#mb_login .form-group button {
	width: 100%;
	outline: 0;
	padding: 1rem 0;
	border-radius: var(--radius);
	border: 0;
	font-weight: 500;
	font-size: clamp(14px,2vw,16px);
	background: var(--con-btn-o);
	color: var(--colorwhite);
}

#mb_login .form-group a {
	display: block;
	text-align: center;
	color: var(--colorgreen-text);
	font-weight: 500;
	font-size: clamp(14px,2vw,16px);
}