#bback001 {
	display:none;
	background-color:rgba(0,0,0,.6);
	width: 100%;
	height: 100%;
	position:fixed;
	top:0;
	left:0;
	z-index:14;
	overflow: hidden;
}
#bback_box {
	position:fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#bback_box img {
	width: 100%;
	height: auto;
	display: block;
}
#bback_box a {
	display: block;
	text-decoration: none;
}
#bback_box ul {
	list-style: none;
}
.bback_charaarea {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.bback_charabox {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.bback_charabox.active {
	opacity: 1;
}
.bback_charabox > div {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.bback_charabox.cbox001 {
	z-index: 2;
}
.bback_charabox.cbox002,
.bback_charabox.cbox003,
.bback_charabox.cbox004,
.bback_charabox.cbox005 {
	z-index: 1;
}
.bback_charaimg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	opacity: 0;
	transform: translateX(15%);
	transition: all 0.6s ease-in-out;
}
.bback_charabox.active .bback_charaimg {
	opacity: 1;
	transform: translateX(0px);
}
.bback_prof {
	width: 56%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	transform: translateX(-5%);
	transition: all 0.6s ease-in-out 0.3s;
}
.bback_charabox.active .bback_prof {
	opacity: 1;
	transform: translateX(0px);
}
.bback_cbtn {
	width: 23%;
	position: absolute;
	top: 7px;
	right: 7px;
	opacity: 0;
	transform: translateX(15%);
	transition: all 0.6s ease-in-out 0.6s;
	z-index: 5;
}
.bback_charabox.active .bback_cbtn {
	opacity: 1;
	transform: translateX(0px);
}
.bback_charaentry {
	width: 72%;
	height: calc(375 / 750 * 72vw);
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 5;
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.8s ease-in-out 1.2s;
}
.bback_charabox.active .bback_charaentry {
	opacity: 1;
	transform: translateY(0px);
}
.bback_charaentry.updown {
	animation: updown 0.8s infinite linear alternate;
	-webkit-animation: updown 0.8s infinite linear alternate;
}
@keyframes updown {
	0% {
		transform: translate(0, 0px);
	}
	100% {
		transform: translate(0, -10px);
	}
}
@-webkit-keyframes updown {
	0% {
		transform: translate(0, 0px);
	}
	100% {
		transform: translate(0, -10px);
	}
}
.bback_charabox.first_pos {
	opacity: 1;
}
.bback_charabox.first_pos .bback_charaimg {
	opacity: 1;
	transform: translateX(0px);
}
.bback_selectarea {
	width: calc(100% - 2%);
	padding: 8px 1%;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	background-color: rgba(255,88,142,0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.bback_selectarea ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: row;
}
.bback_selectarea ul li {
	width: calc( (100% - 15%) / 6);
	margin-right: 3%;
	position: relative;
}
.bback_selectarea ul li:last-child {
	margin-right: 0%;
}
.bback_selectarea ul li img {
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.bback_selectarea ul li .bback_cion_circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #FFFFFF;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	cursor: pointer;
	display: none;
}
.bback_selectarea ul li.active .bback_cion_circle {
	display: block;
}
.bback_close {
	width: 8em;
	background: rgba(255,255,255,0.8);
	padding: 4px 10px 4px 4px;
	border-radius: 5px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}
.bback_close p {
	font-size: 12px;
	line-height: 1;
	font-weight: bold;
	color: #0084ff;
	display: inline-block;
	position: relative;
	margin: 0;
}
.bback_close p:before {
	content: '';
	display: block;
	width: 3px;
	height: 3px;
	border-top: 2px solid #0084ff;
	border-right: 2px solid #0084ff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: -7px;
	margin: auto;
}
/*---------PC---------*/
#bback_box.pc {
	width: 460px;
	height: 818px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}
#bback_box.pc .bback_charaentry {
	height: calc(375 / 750 * 331px);
}
#bback_box.pc .bback_selectarea {
	width: calc(100% - 10px);
	padding: 8px 5px;
}
#bback_box.pc .bback_selectarea ul li,
#bback_box.pc .bback_close {
	cursor: pointer;
}