@charset "utf-8";

/***********************************************
	폰트
***********************************************/

@font-face {
    font-family: 'iceJaram-Rg';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/iceJaram-Rg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GowunBatang-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/***********************************************
	개인 리스트
***********************************************/

.li-info {
	width:70%;}

.li-name {
	margin: 2% 0 2% 0%;
	position:relative;
	text-align: left;
	line-height: 1.4em;
	font-size:1.4em;}

.li-name-sub {
	margin-top: 3px;
	font-family: 'GmarketSansMedium' !important;}

.character-card-list {
	display:block;	position:relative;	text-align:center; padding:20px 0; overflow:hidden;}
	
.character-card-list li {
	position:relative; padding:5px; box-sizing:border-box;}

.character-card-list li.character-item {
    display: inline-block;}


/***********************************************
	통합 리스트
***********************************************/

/* 캐릭터 프레임 */
.character-card-frame {
	margin-bottom: 3%;
	height: 250px;
	width: 180px;
	display:block;
	position:relative;
	z-index:0;}
	
/* 캐릭터 프레임 이미지 */
.character-card-frame .pic {
	border-radius:5em;
	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);}

/*타이틀*/
.relation-name {
	color:#777777;
	display:block; font-size:1em; height:auto;padding:.3em 0;}

/*캐릭터 이름*/
.ch-name {
	font-family: 'GmarketSansMedium';
	font-size:1.5em;
	display:block;}
	
.character-card-frame .pad {position:relative; z-index:-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;}
}




/***********************************************
	페어 리스트
***********************************************/

/*페어명*/
.ch-krpairname {
	font-family: 'iceJaram-Rg' !important;
	font-size:2em;
	padding-bottom:1%;}

.ch-enpairname {
	font-family: "DM Serif Display", serif !important;
	font-weight: 400;
	font-style: italic;
	font-size:3.5em;
	padding-top: 0.2em;
	padding-bottom:5%;}


/*한마디*/
.ch-says {
	justify-content: center;
	display: flex;
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;}
	
.ch-says1, .ch-says2 {
	text-align:center;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	width: 280px;
	border-radius: 1em;
    background-color: white;
    padding: 4px 10px;
    margin: 0 8% 1%;
	font-family: 'GowunBatang-Regular' !important;
	overflow-wrap: break-word;
    white-space: normal;
    display: inline-block;
	position:relative;}
	
/* 원 화살표 */
.ch-says1::after {
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	z-index:-1;
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: white;
    transform: rotate(100deg) skewX(-40deg);
    bottom: -5px;
    left: calc(50% + 120px);
    margin-left: -7.5px;}
.ch-says2::after {
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	z-index:-1;
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: white;
    transform: scaleX(-1) rotate(100deg) skewX(-40deg);
    bottom: -5px;
    left: calc(50% - 120px);
    margin-left: -7.5px;}

/* 한마디 모바일 */
@media all and (max-width:900px) {
	.ch-says {margin-top: 1%;}
	.ch-says1, .ch-says2 {margin: 0 2% 1%;}
	.ch-says1::after {left: calc(20%);}
	.ch-says2::after {left: calc(80%);}
}


.character-board-wrap {position:relative; max-width:850px; margin:0 auto;}

.character-card-list li.pair-group {
	padding-bottom:7%;
	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:0 0 2% 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 {
	margin: 0 5%;
	display:inline-block;
	position:relative;
	vertical-align:top;
	max-width:50%;
	white-space:normal;
	padding: 15px 15px 0px 15px;
	box-sizing:border-box;}

/* 페어 리스트 썸네일 모바일 */
@media all and (max-width:900px) {
	.character-card-list .pair-bak-box .ch-box {
	margin: 0 1%;
	padding: 15px 0px 0px 0px;}
}
	
.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;}


/*디데이*/
.arrow1, .arrow2 {
	top: 4.5em;
	position: relative;
	height: 1px;
	width: 30px;}

.arrow1 {left: 1px;}
.arrow2 {right: 2px;}

.arrow1::before {
	content: "";
	position: absolute;
	left: -2px;
	top: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;}

.arrow2::before {
	content: "";
	position: absolute;
	left: 28px;
	top: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;}

/* 디데이 */
.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;}

/* 디데이 모바일 */
@media all and (max-width:900px) {
	.character-card-list .pair-bak-box .dday {bottom: -14%;}
}

.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:15%; left:15%; border-radius:0; width:70%; height:70%; 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;}
.character-card-list .pair-bak-box .dday span {font-size:.9em;}






/***********************************************
	캐릭터 뷰어
***********************************************/

/*배경*/
.bg-img {
	position:fixed; 
	width: 105vw; height:70vh;
	z-index: -1; left:-10px; top:-10px;
	background: linear-gradient(to bottom, gray, transparent);
	overflow: hidden; filter: blur(2px); background-size: cover !important;}

.bg-img {
	-webkit-mask-image: linear-gradient(black, transparent);
	filter: brightness(0.7);}


/*뷰어 한마디*/
.ch-view-says {
	font-family: 'iceJaram-Rg' !important;
	text-align:center;
	font-size:1.7em;
	padding-bottom:1.5%;}

/*뷰어 캐릭터 이름*/
.ch-view-name {
	padding:3% 0;
	text-align:center;
	font-family: 'GangwonEduPowerExtraBoldA' !important;
	font-size:2.3em;}
	
/*뷰어 캐릭터 타이틀*/
.ch-view-title {
	text-align:center;
}

.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:20px 5px;
	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 {
	border-radius: 1em;
    display: block;
    position: fixed;
    width: 50%;
    margin: 0;
    top: 2%;
    bottom: 2%;
    right: 2%;}
	
.characterViewer .ch-pannel > .inner {
	overflow:auto;
	/*display:table;*/
	width:100%; height:100%; table-layout:fixed;}
.characterViewer .ch-pannel > .inner > .mid {
	padding:20px 30px;
	/*display:table-cell;*/}
.characterViewer .ch-pannel > .inner::-webkit-scrollbar-track {
	background:transparent;}

.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 .info .info-sub{	
	margin: 0 auto;
	width: 50%;
	border-radius:1em;}

.characterViewer .ch-pannel .control {text-align:center;}

/*항목 제목*/
.characterViewer .ch-pannel .sub-title {
	padding-top: 2px;
	padding-left: 10px;
    width: 20%;
	font-family: 'GmarketSansMedium';
	border-radius:1em;
	display:block;
	position:relative;
	font-size:1em; line-height:1.6; margin-bottom:1em;	}

/*항목 앞 별*/
.characterViewer .ch-pannel .sub-title:before {
	content:"븿";
	font-size:0.7em;
	margin-right:.3em;
	font-family:'YUniverse-B';
	vertical-align:text-top;}
	
.characterViewer .ch-pannel * ~ .sub-title {margin-top:2.5em;}
.characterViewer .ch-pannel .descript {
	margin:1em 0 2em 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;}

}


.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;}