@charset "utf-8";

.loading {display:none; position:fixed; z-index:99999; top:0; left:0; right:0; bottom:0; text-align:center; background:rgba(0,0,0,.5); backdrop-filter:blur(2px);}
.loading.mask {display:block;}
.loading > div {display:block; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.loading p {font-size:15px; font-weight:600; color:#fff;}
.lds-roller {display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-roller div {animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px;}
.lds-roller div:after {content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin: -4px 0 0 -4px;}
.lds-roller div:nth-child(1) {animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after {top: 63px; left: 63px;}
.lds-roller div:nth-child(2) {animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after {top: 68px; left: 56px;}
.lds-roller div:nth-child(3) {animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after {top: 71px; left: 48px;}
.lds-roller div:nth-child(4) {animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after {top: 72px; left: 40px;}
.lds-roller div:nth-child(5) {animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after {top: 71px; left: 32px;}
.lds-roller div:nth-child(6) {animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after {top: 68px; left: 24px;}
.lds-roller div:nth-child(7) {animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after {top: 63px; left: 17px;}
.lds-roller div:nth-child(8) {animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after {top: 56px; left: 12px;}
@keyframes lds-roller {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

.empty_list {display:block; width:100% !important; text-align:center; line-height:150px; float:none !important; margin:0;}

/** Thumb Frame */
.character-card-frame {display:block; position:relative; width:100%; z-index:0;}
.character-card-frame .pad {position:relative; z-index:-1;}
.character-card-frame .pic {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; background:transparent; border:none; 
	-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
}
.character-card-frame button.pic {width:100%; height:100%;}
.character-card-frame .pic > em {display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background:no-repeat 50% 50%; background-color:var(--thumb-bak); background-size:cover;}
.character-card-frame .pic > em {transform:translate(-50%, -50%) scale(1.05); -webkit-transform:translate(-50%, -50%) scale(1.05);}
.character-card-frame .pic .cover {display:block; position:absolute; left:0; right:0; bottom:0; top:0; font-size:16px; overflow:hidden; background:var(--cover-bak); backdrop-filter:blur(2px); transform:translateY(100%); -webkit-transform:translateY(100%); transition:.3s all; -webkit-transition:.3s all;}
.character-card-frame .pic .cover > * {display:table; width:100%; height:100%;}
.character-card-frame .pic .cover > * > * {display:table-cell; vertical-align:middle; text-align:center;}
.character-card-frame .pic .cover .subject,
.character-card-frame .pic .cover .sub-subject {position:relative; word-break:keep-all; line-height:1.2; text-align:center;}
.character-card-frame .pic .cover .subject {display:block; color:var(--cover-color); font-size:1em; padding:0 1.5em;}
.character-card-frame .pic .cover .sub-subject {display:inline-block; font-size:.8em; color:var(--thumb-bak); background:var(--cover-color); margin-bottom:.5em; padding:0 .5em;}

.character-card-frame a.pic:hover > em {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); opacity:.2;}
.character-card-frame .pic .cover.fix,
.character-card-frame a.pic:hover .cover {transform:translate(0); -webkit-transform:translate(0);}

@media all and (max-width:740px) {
	.character-card-frame .pic .cover {font-size:15px;}
}
@media all and (max-width:540px) {
	.character-card-frame .pic .cover{font-size:14px;}
}
@media all and (max-width:430px) {
	.character-card-frame .pic .cover {font-size:13px;}
}


/***********************************************
	List
***********************************************/

/** List */
.character-board-wrap {position:relative; max-width:850px; margin:0 auto;}
.character-card-list {display:block; position:relative; text-align:center; padding:20px 0; overflow:hidden;}
.character-card-list li {display:inline-block; position:relative; max-width:47%; padding:5px; box-sizing:border-box;}

.character-card-list li.pair-group {display:block; max-width:100%; clear:both;}
.character-card-list:after {content:""; display:block; clear:both;}

.character-card-list .pair-bak-box {display:block; position:relative; padding:5% 0; background:no-repeat 50% 50%; background-size:contain; white-space:nowrap;}
.character-card-list .pair-bak-box .row {position:relative;}
.character-card-list .pair-bak-box .row:after {content:""; display:block; clear:both;}
.character-card-list .pair-bak-box .ch-box {display:inline-block; position:relative; vertical-align:top; max-width:50%; white-space:normal; padding:10px; box-sizing:border-box;}
.character-card-list .pair-bak-box .ch-box .ui-btn {cursor:default !important;}
.character-card-list .pair-bak-box .character-card-frame a.pic:hover > em {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); opacity:1;}
.character-card-list .pair-bak-box .relation-name {display:block; font-size:1em; height:auto; margin:1em 0; padding:.3em 0;}
.character-card-list .pair-bak-box .ch-name {display:block;}
.character-card-list .pair-bak-box .dday {position:absolute; left:50%; bottom:0; transform:translateX(-50%); -webkit-transform:translateX(-50%); width:9em; max-width:30%; z-index:2;}
.character-card-list .pair-bak-box .dday:before {content:""; display:block; position:relative; padding-top:100%; z-index:-1;}
.character-card-list .pair-bak-box .dday > * {display:block; position:absolute; }
.character-card-list .pair-bak-box .dday .bak {top:50%; left:50%; border-radius:0; top:0; left:0; width:100%; height:100%; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.character-card-list .pair-bak-box .dday .ui-btn {cursor:default !important;}
.character-card-list .pair-bak-box .dday .days {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.character-card-list .pair-bak-box .dday .days .mid {display:table; width:100%; height:100%;}
.character-card-list .pair-bak-box .dday .days .mid > div {display:table-cell; vertical-align:middle; text-align:center;}
.character-card-list .pair-bak-box .dday p,
.character-card-list .pair-bak-box .dday span {display:block; padding:0; border-radius:0; border:none; background:transparent; height:auto; line-height:1.2;}
.character-card-list .pair-bak-box .dday p {font-size:2em; font-weight:800; margin-bottom:.4em;}
.character-card-list .pair-bak-box .dday span {font-size:.9em;}


/***********************************************
	Viewer
***********************************************/

.characterViewer {display:block; position:relative;}
.characterViewer:after {content:""; display:block; clear:both;}

.characterViewer .ch-body {position:fixed; top:0; bottom:0; right:40%; left:0px; text-align:center; z-index:0;}
.characterViewer .ch-body .img {display:table; width:100%; height:100%; table-layout:fixed;}
.characterViewer .ch-body .img > div {display:table-cell; vertical-align:middle; text-align:center;}
.characterViewer .ch-body .img em {display:none;}
.characterViewer .ch-body.pop {display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:var(--pannel-bak); backdrop-filter:blur(2px); overflow:auto;}
.characterViewer .ch-body.pop::-webkit-scrollbar {width:0; height:0;}
.characterViewer .ch-body.pop .img > div {display:block;}

.characterViewer .ch-pannel {position:relative; margin:0 auto; max-width:640px; padding:80px 40px; box-sizing:border-box; border:1px solid var(--pannel-line); background:var(--pannel-bak); backdrop-filter:blur(2px);
	-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
}
.characterViewer .ch-body ~ .ch-pannel {display:block; position:fixed; width:50%; margin:0; top:0; bottom:0; right:0; overflow:auto; }

.characterViewer .ch-pannel > .inner {display:table; width:100%; height:100%; table-layout:fixed;}
.characterViewer .ch-pannel > .inner > .mid {display:table-cell;}

.characterViewer .ch-pannel .name-box {display:block; padding:20px 0; text-align:center;}
.characterViewer .ch-pannel .name-box span {display:block; position:relative; font-size:1.4em; margin-bottom:1em; opacity:.8;}
.characterViewer .ch-pannel .name-box strong {display:block; position:relative; font-size:2em;}
.characterViewer .ch-pannel .line {opacity:.3;}
.characterViewer .ch-pannel .info {text-align:center; padding:1em 0;}
.characterViewer .ch-pannel .control {text-align:center;}

.characterViewer .ch-pannel .sub-title {display:block; position:relative; font-size:1.2em; line-height:1.6; margin-bottom:1em; font-weight:800;}
.characterViewer .ch-pannel .sub-title:before {content:"⧫"; font-weight:400; margin-right:.3em; font-family:'Malgun Gothic'; vertical-align:middle;}
.characterViewer .ch-pannel * ~ .sub-title {margin-top:2em;}
.characterViewer .ch-pannel .descript {margin:1em 0; font-size:1em; line-height:1.8;}


.ch-pannel .body-add-form {display:none; margin-top:10px;}
.body-add-form input[type="radio"] {display:none;}
.body-add-form label {display:block; float:left; width:50%; text-align:center; opacity:.4; height:30px; line-height:30px;}
.body-add-form input[type="radio"]:checked + label {font-weight:800; opacity:1;}
.body-add-form input#add_new_body_type1:checked ~ * input[type="file"] {display:none;}
.body-add-form input#add_new_body_type2:checked ~ * input[type="text"] {display:none;}
.body-add-form input[type="file"],
.body-add-form input[type="text"] {width:100%;}
.body-add-form button {margin-top:10px; height:30px; padding:0; width:100%;}
.body-add-form .input-box {clear:both; padding-top:10px;}
.body-add-form .input-box > * {height:25px !important;}

.chaBodyList {display:block; position:relative; overflow:hidden; clear:both; padding:10px 40px;}
.chaBodyList .control > * {position:absolute; width:40px; height:40px; top:50%; margin-top:-20px; font-size:20px;}
.chaBodyList .control .prev {left:0;}
.chaBodyList .control .next {right:0;}
.chaBodyList .swiper-slide {width:60px; height:60px;}
.chaBodyList .swiper-slide > a {display:block; position:relative; width:100%; height:100%; overflow:hidden; padding:0 !important;}
.chaBodyList .swiper-slide > a > img {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); max-width:500%; transition:.3s all; -webkit-transition:.3s all;}
.chaBodyList .swiper-slide > a.checked > img {opacity:.2;}

#control_body_box {position: relative; text-align:center; }
#control_body_box .body-control > *  + * {margin-left:5px;}

@media all and (max-width:1024px) {
	.characterViewer .ch-body {right:0;}
	.characterViewer .ch-body .img,
	.characterViewer .ch-body .img > div {display:block; position:relative; text-align:center; width:100%; height:100%; overflow:hidden;}
	.characterViewer .ch-body .img em {display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat 50% 0%; background-size:auto 100%;}
	.characterViewer .ch-body .img div img {max-width:unset; display:none; }
	.characterViewer .ch-body.pop {overflow:hidden;}
	.characterViewer .ch-body.pop .img > div {overflow:auto;}
	.characterViewer .ch-body.pop .img em {display:none;}
	.characterViewer .ch-body.pop .img div img {display:block;}

	.characterViewer .ch-pannel {width:95%; background:var(--pannel-bak-over); padding-top:40px; padding-bottom:40px;}
	.characterViewer .ch-body ~ .ch-pannel {position:relative; top:auto; bottom:auto; right:auto; width:auto; height:auto; float:none; margin:60vh auto 0;}
}

.characterViewer .extend-icon-links .material-icons {font-size:1.3em;}

@media all and (min-width:1025px) {
	.characterViewer .extend-icon-links {display:block; position:fixed; top:50%; left:50%; margin-left:-320px; transform:translate(-50%, -50%); -webkit-transform:translateY(-50%, -50%); font-size:15px; z-index:5;}
	.characterViewer .ch-body ~ .extend-icon-links {margin-left:0; left:auto; right:640px; transform:translate(50%, -50%); -webkit-transform:translateY(50%, -50%);}
}
@media all and (max-width:1280px) and (min-width:1025px) {
	.characterViewer .ch-body ~ .extend-icon-links {right:50%;}
}
@media all and (max-width:1024px) {
	.characterViewer .extend-icon-links {display:block; position:fixed; top:50%; left:0; transform:translate(0, -50%); -webkit-transform:translateY(0, -50%); font-size:15px; z-index:5;}

}