html {font-size: 16px;}
.name-welcome { 
    display: flex; 
    align-items: center; 
    box-sizing: border-box; 
    height: 65px;  
}
.name-welcome p { 
    height: 65px; 
    padding-top: 30px;
}

.page-loading {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all .4s .2s ease-in-out;
	transition: all .4s .2s ease-in-out;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	z-index: 9999;
}
.dark-mode .page-loading {
	background-color: #0b0f19;
}
.page-loading.active {
	opacity: 1;
	visibility: visible;
}
.page-loading-inner {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
	opacity: 0;
}
.page-loading.active > .page-loading-inner {
	opacity: 1;
}
.page-loading-inner > span {
	display: block;
	font-size: 1rem;
	font-weight: normal;
	color: #9397ad;
}
.dark-mode .page-loading-inner > span {
	color: #fff;
	opacity: .6;
}
.page-spinner {
	display: inline-block;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: .75rem;
	vertical-align: text-bottom;
	border: .15em solid #b4b7c9;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner .75s linear infinite;
	animation: spinner .75s linear infinite;
}
.dark-mode .page-spinner {
	border-color: rgba(255,255,255,.4);
	border-right-color: transparent;
}
@-webkit-keyframes spinner {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spinner {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

#barcode-swiper {
	position: relative;
	padding-bottom: 50px;
	overflow: hidden;
}
.barcode {
	width: calc(50% - 28px) ;
	text-align: center;
	padding-bottom: 8%;
	margin-bottom: 30px;
	margin-right: 30px;
	background-image: url('../img/bg_barcode.png');
	background-repeat:no-repeat ;
	background-size: 100% 130px;
	cursor: pointer;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
}
.barcode .edit-button {
	position: absolute;
	padding: 0.3rem 0.7rem 0.3rem;
	right: 0.5rem;
	top: 0.7rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #282828;
	background: #fff;
	border-radius: 0.75rem;
}
.barcode .img-wrap {
    text-align: left;
    padding-top: 16px;
	padding-left: 16px;
}
.barcode .barcode-member {margin-top: 70px;}

.barcode .name {
	display: inline-block;
	color: #000;
	border-radius: 20px;
	background-color: #eee;
}
aside { border-right: 1px solid #ddd; }

.complete-wrap ul { 
	padding-left: 0;
}
.complete-wrap h2 { 
    font-size: 20px;
    font-weight: 800;
    color: #00396B;
}
.complete-wrap h3, .complete-wrap span { 
    font-weight: 400;
    font-size: 16px;
    color: #565973;
}
.complete-wrap p { 
	margin-bottom: 0;
}
.payment-method-bx span { font-weight: 700; }
.btn-regi { 
	width: 100%;
	padding: 13px 0;
	border: none; 
	background: #264C8F;
	box-shadow: 0px 8px 18px -8px rgba(99, 102, 241, 0.9);
	border-radius: 6px;
	color: #fff;
}
.btn-kakaotalk {
	color: #00396B;
	font-weight: 700;
	background-color: #FFDA57;
}
.btn-kakaotalk:hover {
	color: #00396B !important;
	background-color: #FFDA57 !important;
}
.btn-address {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	border-radius: 5px;
	padding: 4px 10px;
	margin-bottom: 4px;
	background: #f0f0f0;
	border: 1px solid #d5d5d5;
}
.btn-address a {text-decoration: none;}
.btn-address img {width: 12px;}
.dues-bx, .bank-info { 
	border: 1px solid #D4D7E5;
	padding: 16px 16px 0 16px;
	border-radius: 8px;
}


@media (max-width:768px){
	/* .barcode {
		padding-top: 31%;
		padding-bottom: 12%;
	} */
    .menu-wrap { flex-direction: row; margin-top: 0; }
    .menu-wrap i { display: none; }
    .menu-wrap a { 
		display: inline-block; 
		text-align: center; 
		border-radius: 0; 
		font-size: 13px; 
		border-bottom: 4px solid transparent !important;
	}
    .menu-wrap a.active { 
		color: #000000; 		
		background: #f9f9f9; 
		border-bottom: 4px solid #264C8F !important; 
		box-shadow: none; 
		border-radius: 0; 
	}
	.menu-wrap a span { width: 100%; text-align: center; }
	aside { border-right: none; padding-right: 0 !important; padding-left: 0 !important; }
	.name-welcome { 
		display: block; 
		align-items: center; 
		box-sizing: border-box; 
		height: 65px;  
		padding-top: 10px;
	}
	.name-welcome h2 {
		display: block; 
		text-align: right;
		font-size: 15px;
	}
	.name-welcome p { 
		display: block;
		height: 20px; 
		padding-top: 0;
		text-align: right;
		font-size: 13px;
	}

	/* .name-welcome h2 { font-size: 15px; }
	.name-welcome p { font-size: 13px; } */
}
@media (max-width:500px){
	.barcode {
		width: calc(100%) ;
		text-align: center;
		/* padding-top: 18%; */
		padding-bottom: 8%;
		margin-bottom: 20px;
		margin-right: 0;
		background-image: url('../img/bg_barcode.png');
		background-repeat:no-repeat ;
		background-size: 100% 130px;
		cursor: pointer;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
	}
}