@charset "utf-8";
/*==============================================
@ PC 기본
==============================================*/


/*----------------------------------------------------------------------
- 공통
-------------------------------------------------------------------------*/
/* 레이아웃 */
.inner {position:relative; width:100%; max-width:1280px; margin:0 auto; padding-left:24px; padding-right:24px;}

.pc-block {display:block;}
.mobile-block {display:none;}
.blind-audio {position:absolute;top:0;left:-99999px;}

#wrap {opacity:0; transition:opacity 0.2s ease;}
#wrap.actived {opacity:1;}

.page-ui-top {padding-top:72px; display:flex; justify-content:space-between;}
.page-ui-top .page-ui-left {margin-right:auto; gap:16px; display:flex;}
.page-ui-top .page-ui-right {margin-left:auto; gap:16px; display:flex;}
.page-ui-top ~ .board-view-wrap {margin-top:36px;}

.display-table {display:table; width:100%; height:100%;}
.display-table-cell {display:table-cell; width:100%; height:100%;}

.grid-layout {}
.grid-layout-inner {display:flex; margin:-5px -5px; flex-wrap:wrap;}
.grid-layout-cell {box-sizing:border-box; padding:5px 5px;}

/* 서브배경 */
.sub-background {position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;}
.sub-background img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* 타이틀 */
.con-title {position:relative; display:inline-flex; font-size:24px; color:#fff; font-weight:400; align-items:center; height:40px;}
.con-title:before {content:''; position:absolute;top:0;left:-50px;width:calc( 100% + 135px );height:100%;background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(87,84,171,1) 50%, rgba(255,255,255,0) 100%); z-index:0; opacity:0.4;}
.con-title > em {position:relative; display:inline-flex; align-items:center; font-weight:400;}
.con-title > em:before {content:''; display:block; width:16px;height:14px;margin-right:15px;background:url(../images/icons/icon-con-title-unit.png) center center no-repeat; background-size:100% 100%;}
.con-title.black:before {background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);  opacity:0.7;}
.con-title.black > em:before {background:url(../images/icons/icon-con-title-unit-black.png) center center no-repeat; background-size:100% 100%;}

.page-title-group {padding-top:44px;}
.page-title-group + .page-tab {margin-top:40px;}

/* swiper.js */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {bottom:auto;}

.swiper-pagination {position:relative; top:auto; bottom:auto; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; transition:none;}
.swiper-pagination .swiper-pagination-bullet {position:relative;display:block; font-size:0; width:16px; height:16px; margin:0; border:none; transition:none; opacity:1; box-sizing:border-box; background:none;}
.swiper-pagination .swiper-pagination-bullet:before {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;background:url(../images/icons/icon-swiper-pagination-star-off.png) center center no-repeat; background-size:100% 100%; opacity:1; transition:opacity 0.2s ease;}
.swiper-pagination .swiper-pagination-bullet:after {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;background:url(../images/icons/icon-swiper-pagination-star-on.png) center center no-repeat; background-size:100% 100%; opacity:0; transition:opacity 0.2s ease;}
.swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:9px;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {opacity:0;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {opacity:1;}

.swiper-page {display:none; align-items:center; font-size:16px; line-height:1.5; height:32px; color:#808080; letter-spacing:0; white-space:nowrap;}
.swiper-page > em {font-size:18px; color:#f2c140; margin-right:3px; font-weight:400;}

.video-wrap {}
.video-wrap .video-outer {position:relative; padding-top:56.25%;}
.video-wrap .video-inner {position:absolute;top:0;left:0;width:100%;height:100%;background:#000;}
.video-wrap video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}



/*----------------------------------------------------------------------
- 메인
-------------------------------------------------------------------------*/
.main-wrap {position:fixed;top:0;right:0;bottom:0;left:0;width:auto;height:auto;z-index:100;overflow:hidden;}
.main-wrap .btn-page-more {max-width:220px;}
.main-wrap .more {text-align:center;}
.main-wrap > .section {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transform:translate(0% , 100%); /*transition:transform 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940);*/}

.main-side-float-banner {position:fixed; top:0; left:50%; margin-left:-960px; z-index:150;}
.main-side-float-banner .item-inner {position:relative; padding:105px 0 0 89px;}
.main-bottom-float-banner {position:fixed; bottom:0; left:0; display:none; z-index:150; transform:translate(0% , 100%); transition:transform 0.4s var(--transition-easeOutQuart);}
.main-bottom-float-banner .item-inner {position:relative; }
.main-bottom-float-banner .item-inner > a {display:block; width:100%;}
.main-bottom-float-banner.show {transform:translate(0% , 0%);}
.main-intro {position:relative;width:100%;height:100%;}
.main-intro .data-group {position:relative; width:100%; height:100%; z-index:5;}
.main-intro .data-group .inner {height:100%; display:flex; align-items:flex-end;}
.main-intro .data-group .item-data { width:100%; padding-bottom:76px;}
.main-intro .data-group .item-btns {position:relative;display:flex; align-items:center; justify-content:center;margin-top:40px; z-index:5;}
.main-intro .data-group .item-btns > a {margin:0 8px;}
.main-intro .data-group .item-headline {position:relative;}
.main-intro .data-group .item-headline .item-row {display:flex; align-items:center; justify-content:center;}
.main-intro .data-group .item-headline .item-row .txt {position:relative; display:inline-block;}
.main-intro .data-group .item-headline .txt-1 {position:relative; z-index:5;}
.main-intro .data-group .item-headline .txt-2 {position:relative; margin-top:-7px;}
.main-intro .data-group .item-headline .txt-2 .text {position:relative; z-index:5;}
.main-intro .data-group .item-headline .txt-2 .particle {position:absolute; top:50%; left:50%; max-width:none; width:907px; height:162px; margin:-118px 0 0 -468px; z-index:1;}
.main-intro .data-group .item-headline .txt-2 .shadow {position:absolute; top:50%; left:50%; max-width:none; width:1624px; height:503px; margin:-263px 0 0 -775px; z-index:0;}
.main-intro .data-group .btn-client-download {display:none;}
.main-intro .visual-group {position:absolute; top:0; left:0;width:100%; height:100%; z-index:0; overflow:hidden;}
.main-intro .visual-group .video-wrap {position:absolute;top:0; left:0; width:100%; height:100%; background:#000;}
.main-intro .visual-group .video-wrap.actived .cover {opacity:0;}
.main-intro .visual-group .video-wrap.actived .video {opacity:1;}
.main-intro .visual-group .video-outer,
.main-intro .visual-group .video-inner {position:absolute;top:0; left:0; width:100%; height:100%; padding:0;}
.main-intro .visual-group .visual-wrap {position:absolute; top:50%;left:50%;width:3000px; height:1080px; margin:-540px 0 0 -1500px;}
.main-intro .visual-group .video-wrap .cover,
.main-intro .visual-group .video-wrap .video {position:absolute;top:0; left:0; width:100%; height:100%;}
.main-intro .visual-group .video-wrap .cover {z-index:5; opacity:1; transition:opacity 0.2s ease;}
.main-intro .visual-group .video-wrap .video {z-index:0;  opacity:0; transition:opacity 0.2s ease;;}
.main-intro .visual-group .visual-wrap img ,
.main-intro .visual-group .video-wrap img,
.main-intro .visual-group .video-wrap video {position:absolute; width:100%; height:100%; top:0; left:0; object-fit:cover;}

@media screen and (min-height:1081px) {
	.main-intro .visual-group .visual-wrap {height:100vh; margin:-50vh 0 0 -1500px;}
}

.main-intro .scroller {position:absolute; bottom:0; left:50%; z-index:150; margin-left:-960px;}
.main-intro .scroller .item-inner {position:absolute; bottom:0; left:60px; display:inline-block; padding-bottom:165px;}
.main-intro .scroller .item-inner:after {content:''; position:absolute; bottom:0; left:12px;width:1px;height:94px;background:#b3b3b3;}
.main-intro .scroller .icons {position:relative; width:26px; height:43px; background:url(../images/contents/main-intro-scroller-icons.png) center center no-repeat;}
.main-intro .scroller .icons:before {content:''; position:absolute; top:16px; left:50%;display:block;width:2px;height:9px; margin:0 0 0 -1px; background:#b3b3b3;}
.main-intro .scroller .txt {position:absolute; top:40px; left:50%; font-size:14px; color:#808080; transform-origin:0% 50%; transform:rotate(90deg);white-space:nowrap;}
.main-intro .btn-main-intro-play {position:relative; width:79px; height:79px; z-index:10;}
.main-intro .btn-main-intro-play:before {content:''; position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:5;background:url(../images/contents/btn-main-intro-play-arrow.png) center center no-repeat;}
.main-intro .btn-main-intro-play > em {position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:0;}
.main-intro .btn-main-intro-play > em:before {content:''; position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:5;background:url(../images/contents/btn-main-intro-play-box-off.png) center center no-repeat;}
.main-intro .scroller .icons:before {animation:scroller 0.6s linear alternate infinite;}
@media screen and (min-width:801px) {
	@keyframes scroller {
		0%{
			transform:translateY(0%);
		}
		100%{
			transform:translateY(10px);
		}
	}
}
.main-news {position:relative; display:flex; align-items:center; justify-content:center; padding:145px 0 86px 0; min-height:100vh; overflow:hidden; box-sizing:border-box; background:url(../images/contents/main-news-bg.jpg) center center no-repeat; background-size:cover;}
.main-news .more {margin-top:72px;}
.main-news-data {display:block; margin-top:50px; position:relative; padding-right:calc( 36.71% + 18px );}
.main-news-headline {width:100%;}
.main-news-headline .btn-gallery-list-nav {border-width:2px;}
.main-news-headline .btn-gallery-list-nav .item-inner {width:100%;}
.main-news-headline .card-thumb {padding-top:57.74%;}
.main-news-list {position:absolute; top:0; right:0; width:calc( 36.71% + 18px ); padding-left:18px; height:100%; box-sizing:border-box;}
.main-news-list .swiper-slide {height:calc((100% - 18px) / 2);}
.main-news-list .swiper {width:20%; height:calc( 100% - 4px ); margin-left: 0; margin-right: auto;  overflow:visible;}
.main-news-list .swiper-data {width:500%; height:100%; overflow:hidden;}
.main-news-list .swiper-slide.show .btn-gallery-list-nav .item-inner:before {opacity:0; visibility:hidden; transition-delay:0s;}
.main-news-list .btn-gallery-list-nav {}
.main-news-list .btn-gallery-list-nav .item-inner {position:relative; display:flex; height:100%; flex-direction:column; width:100%;}
.main-news-list .btn-gallery-list-nav .item-inner:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;visibility:visible; opacity:1; transition:opacity 0.2s 0s ease, visibility 0.2s 0.2s ease; z-index:15; background:rgba(0,0,0,0.5);}
.main-news-list .btn-gallery-list-nav .item-thumb {flex:0 0 auto; width:100%; height:63.54%; box-shadow: 0px -16px 16px 0px rgba(0,0,0,0.7) inset;}
.main-news-list .btn-gallery-list-nav .card-thumb {width:100%; height:100%; padding-top:0;}
.main-news-list .btn-gallery-list-nav .item-info {flex:1; height:100%; padding:8px 18px 18px 18px;}
.main-news-list .btn-gallery-list-nav .item-subject {font-size:16px; line-height:1.4; font-weight:400; color:#b2b2b2;}
.main-news-list .btn-gallery-list-nav .item-subject .txt {-webkit-line-clamp: 2;}
.main-news-list .btn-gallery-list-nav .item-desc {display:none;}
.main-news-list .btn-gallery-list-nav .item-more { top:8px; right:18px; font-size:16px; line-height:1.4; font-weight:400; color:#f2c140;}
.main-news-list .btn-gallery-list-nav .item-date + .item-subject {margin-top:8px;}
.main-news-list .swiper-ui {margin-top:12px; display:flex; align-items:center; height:49px; position:relative; width:100%;}
.main-news-list .swiper-pagination {justify-content:flex-start;}
.main-news-list .btn-swiper-slider-prev {position:absolute;top:0;right:119px;display:block;width:49px;height:49px;z-index:15; cursor:pointer;}
.main-news-list .btn-swiper-slider-next {position:absolute;top:0;right:0;display:block;width:49px;height:49px;z-index:15; cursor:pointer;}
.main-news-list .btn-swiper-slider-prev:before,
.main-news-list .btn-swiper-slider-next:before {content:''; position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:0;opacity:1;transition:opacity 0.2s ease; background-repeat:no-repeat;background-position:center center; background-size:100% 100%;}
.main-news-list .btn-swiper-slider-prev:after,
.main-news-list .btn-swiper-slider-next:after {content:''; position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 0.2s ease; background-repeat:no-repeat;background-position:center center; background-size:100% 100%;}
.main-news-list .btn-swiper-slider-prev:before {background-image:url(../images/icons/icon-swiper-prev-circle-off.png);}
.main-news-list .btn-swiper-slider-prev:after {background-image:url(../images/icons/icon-swiper-prev-circle-on.png);}
.main-news-list .btn-swiper-slider-next:before {background-image:url(../images/icons/icon-swiper-next-circle-off.png);}
.main-news-list .btn-swiper-slider-next:after {background-image:url(../images/icons/icon-swiper-next-circle-on.png);}
@media screen and (min-width:801px) {
.main-news-list .btn-swiper-slider-prev:hover:before,
.main-news-list .btn-swiper-slider-next:hover:before {opacity:0;}
.main-news-list .btn-swiper-slider-prev:hover:after,
.main-news-list .btn-swiper-slider-next:hover:after {opacity:1;}
}
.main-news-list .btn-swiper-slider-prev.swiper-button-disabled,
.main-news-list .btn-swiper-slider-next.swiper-button-disabled {opacity:0.2;}
.main-news-list .btn-swiper-slider-prev.swiper-button-disabled:before,
.main-news-list .btn-swiper-slider-next.swiper-button-disabled:before {opacity:1 !important;}
.main-news-list .btn-swiper-slider-prev.swiper-button-disabled:after,
.main-news-list .btn-swiper-slider-next.swiper-button-disabled:after {opacity:0 !important;}

.main-character {position:relative; display:flex; align-items:center; justify-content:center; padding:145px 0 95px 0; min-height:100vh; box-sizing:border-box; background:url(../images/contents/main-character-bg.jpg) center center no-repeat; background-size:cover;}
.main-character-list {margin-top:92px;}
.main-character-list > ul {margin-left:-10px; margin-right:-10px; display:flex;}
.main-character-list > ul > li {width:25%; padding:0 10px; box-sizing:border-box;}
.main-character-list > ul > li:nth-child(1) .btn-main-character-nav .item-visual {width:123.93%;}
.main-character-list .btn-main-character-nav {position:relative; padding-top:203.27%; display:block;}
.main-character-list .btn-main-character-nav .item-outer {position:absolute;top:0;left:0;width:100%;height:100%;}
.main-character-list .btn-main-character-nav .item-inner {position:absolute;top:0;left:0;width:100%;height:100%;}
.main-character-list .btn-main-character-nav .item-visual {position:absolute;bottom:0;right:0;width:100%;height:100%;z-index:1;}
.main-character-list .btn-main-character-nav .item-visual .on {position:absolute;bottom:0;right:0;width:100%;height:100%; opacity:0; transition:opacity 0.4s ease; z-index:5;}
.main-character-list .btn-main-character-nav .item-visual .off {position:absolute;bottom:0;right:0;width:100%;height:100%; opacity:1; transition:opacity 0.4s ease;}
.main-character-list .btn-main-character-nav .item-visual img {position:absolute; bottom:0; right:0; max-width:none; width:100%;}
@media screen and (min-width:801px) {
	.main-character-list .btn-main-character-nav:hover .item-visual .on {opacity:1;}
	.main-character-list .btn-main-character-nav:hover .item-visual .off {opacity:0;}
}
.main-character .more {margin-top:42px;}

.main-intro {position:absolute; top:0;left:0;width:100%;height:100%;}
.main-intro-inner {position:absolute; top:0;left:0;width:100%;height:100%;}
.main-view {position:absolute; top:100%;left:0;width:100%;height:100%;z-index:5;}
.main-view-outer {}


@media screen and (min-width:801px) {
	.main-intro .visual-group {opacity:0; transition:opacity 0.5s var(--transition-easeOutQuart);}
	.main-intro .visual-group .visual-wrap {transform:scale(1.3); transition:transform 1.9s var(--transition-easeInOutQuad);}
	.main-intro .visual-group .video-wrap {transform:scale(1.3); transition:transform 1.9s var(--transition-easeInOutQuad);}
	.main-intro .txt-1 .txt {transform:scale(1.1) translate(0px , 70px); transform-origin:50% 50%; opacity:0; filter:blur(5px); transition:filter 0.9s var(--transition-easeOutQuart), transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .txt-2 .txt {transform:scale(1.1) translate(0px , 70px); transform-origin:50% 50%; opacity:0; filter:blur(5px); transition:filter 0.9s var(--transition-easeOutQuart), transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .btn-main-intro-play {transform:translate(0px , 70px); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .item-btns {transform:translate(0px , 70px); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .scroller .item-inner {transform:translate(0px , 100%); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	
	
	.main-intro.actived .visual-group {opacity:1;}
	.main-intro.actived .visual-group .visual-wrap {transform:scale(1);}
	.main-intro.actived .visual-group .video-wrap {transform:scale(1);}
	.main-intro.actived .txt-1 .txt {transform:scale(1) translate(0px , 0px); opacity:1; filter:blur(0px); transition-delay:0.4s;}
	.main-intro.actived .txt-2 .txt {transform:scale(1) translate(0px , 0px); opacity:1; filter:blur(0px); transition-delay:0.6s;}
	.main-intro.actived .item-btns {transform:translate(0px , 0px); opacity:1; transition-delay:0.8s;}
	.main-intro.actived .btn-main-intro-play {transform:translate(0px , 0px); opacity:1; transition-delay:1.0s;}
	.main-intro.actived .scroller .item-inner {transform:translate(0px , 0%); opacity:1; transition-delay:1.0s;}
	
	/*
	.main-side-float-banner {transform:translate(0px , -100%); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-side-float-banner.actived {transform:translate(0px , 0%); opacity:1; transition-delay:1.0s;}
	*/

	.main-side-float-banner {top:-400px; opacity:0; transition:top 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-side-float-banner.actived {top:0; opacity:1; transition-delay:1.0s;}

	#header.main.effect .header-wrap {opacity:0; transition:height 0.6s 0s cubic-bezier(0.165, 0.840, 0.440, 1.000);}
	#header.main.effect.open .header-wrap {opacity:1; transition:height 0.6s 0s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.6s 0.0s ease;}
}

@media screen and (min-width:320px) and (max-width:800px) {
	.main-intro .visual-group {opacity:0; transition:opacity 0.5s var(--transition-easeOutQuart);}
	.main-intro .visual-group .video-wrap {transform:scale(1.3); transition:transform 1.5s var(--transition-easeInOutQuad);}
	.main-intro .txt-1 .txt {transform:scale(1.1) translate(0px , 70px); transform-origin:50% 50%; opacity:0; filter:blur(5px); transition:filter 0.9s var(--transition-easeOutQuart), transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .txt-2 .txt {transform:scale(1.1) translate(0px , 70px); transform-origin:50% 50%; opacity:0; filter:blur(5px); transition:filter 0.9s var(--transition-easeOutQuart), transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .btn-client-download {transform:translate(0px , 70px); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .btn-main-intro-play {transform:translate(0px , 70px); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-intro .scroller .item-inner {transform:translate(0px , 100%); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
		
	.main-intro.actived .visual-group {opacity:1;}
	.main-intro.actived .visual-group .video-wrap {transform:scale(1);}
	.main-intro.actived .txt-1 .txt {transform:scale(1) translate(0px , 0px); opacity:1; filter:blur(0px); transition-delay:0.4s;}
	.main-intro.actived .txt-2 .txt {transform:scale(1) translate(0px , 0px); opacity:1; filter:blur(0px); transition-delay:0.6s;}
	.main-intro.actived .btn-main-intro-play {transform:translate(0px , 0px); opacity:1; transition-delay:0.8s;}
	.main-intro.actived .btn-client-download {transform:translate(0px , 0px); opacity:1; transition-delay:1.0s;}
	.main-intro.actived .scroller .item-inner {transform:translate(0px , 0%); opacity:1; transition-delay:1.0s;}
		
	#header.main.effect .header-inner:before {transform:translate(0px , -112px); transition:transform 0.9s var(--transition-easeOutQuart);}
	#header.main.effect .logo {transform:translate(0px , -112px); transition:transform 0.9s var(--transition-easeOutQuart);}
	#header.main.effect .btn-mobile-header-open {transform:translate(0px , -112px); transition:transform 0.9s var(--transition-easeOutQuart);}
	
	#header.main.effect.open .header-inner:before {transform:translate(0px , 0px); transition-delay:0.0s;}
	#header.main.effect.open .logo {transform:translate(0px , 0px); transition-delay:0.0s;}
	#header.main.effect.open .btn-mobile-header-open {transform:translate(0px , 0px); transition-delay:0.0s;}

	/*
	.main-side-float-banner {transform:translate(0px , -100%); opacity:0; transition:transform 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-side-float-banner.actived {transform:translate(0px , 0%); opacity:1; transition-delay:1.0s;}
	.main-side-float-banner .item-inner { transform:translate(0% , -100%); transition:transform 0.6s var(--transition-easeInOutQuart);}
	.main-side-float-banner.show .item-inner {transform:translate(0% , 0%);}
	*/	
	.main-side-float-banner {top:-400px; opacity:0; transition:top 0.9s var(--transition-easeOutQuart), opacity 0.9s var(--transition-easeOutQuart);}
	.main-side-float-banner.actived {top:0; opacity:1; transition-delay:1.0s;pointer-events: none;}
	.main-side-float-banner.actived.show {pointer-events: all;}
	.main-side-float-banner .item-inner {top:-400px; transition:top 0.6s var(--transition-easeInOutQuart);}
	.main-side-float-banner.ready {transition-delay:0s;}
	.main-side-float-banner.show .item-inner {top:0;}	
	.main-side-float-banner.hide {top:-400px;transition-delay:0s;}

}



/*----------------------------------------------------------------------
- 게임소식
-------------------------------------------------------------------------*/


/*----------------------------------------------------------------------
- 노아의 대도서관
-------------------------------------------------------------------------*/
/* 노아의 대도서관 > 가이드 */
.page-title-group + .side-layout-wrap {margin-top:16px;}
.side-layout-wrap {display:flex; flex-direction:row-reverse;}
.side-layout-view {flex:0 0 auto; width:870px; padding-top:71px;}
.side-layout-view .board-view-area {width:100%;}
.side-layout-data {flex:1; width:100%; margin-left:48px; }

.btn-mobile-side-menu {position:relative; display:none; align-items:center; justify-content:center; width:100%; height:50px; font-size:16px; font-weight:400; color:#fff;text-align:center; box-sizing:border-box;border-radius:0px 16px; background:rgba(0,0,0,0.3);border:1px solid #808080;}
.btn-mobile-side-menu:after {position:absolute;content:'';top:50%;right:16px;display:block;width:16px;height:16px;background:url(../images/icons/icon-select-arrow-white.png) center center no-repeat; background-size:100% auto; margin-top:-8px;}

.board-search + .side-layout-menu {margin-top:24px;}
.side-menu-inner .item-list {padding:26px 24px; border-top:2px solid #F2C140; background:#141414; text-align:left;}
.side-menu-inner .item-list-cell + .item-list-cell {margin-top:24px;padding-top:24px;border-top:1px solid #333;}
.side-menu-inner h3 {font-size:20px; line-height:1.35; color:#fff; font-weight:500;}
.side-menu-inner .item-menu {margin-top:24px;}
.side-menu-inner .item-menu > li + li {margin-top:24px;}
.side-menu-inner .item-menu > li > a {font-size:16px; color:#b2b2b2; font-weight:400; line-height:1.38;}
.side-menu-inner .item-menu > li.actived > a {color:#F2C140;}
.side-menu-inner .btn-side-close {display:none;}

/* 노아의 대도서관 > 세계관 */
.world-wrap {position:relative; z-index:1; overflow:hidden;}
.world-wrap .page-title-group {padding-top:75px;}
.word-visual-gallery {margin-top:44px; position:relative; padding:0 40px;}
.word-visual-gallery .swiper {position:relative; overflow:visible;}
.word-visual-gallery .swiper .obj {position:relative; border-radius:24px; overflow:hidden;border:1px solid #525252; box-sizing:border-box;}
.word-visual-gallery .swiper .obj:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6); opacity:1;}
.word-visual-gallery .swiper .obj img {max-width:none; width:100%;}
.word-visual-gallery .swiper-slide.swiper-slide-active .obj:before {opacity:0;}
.word-visual-gallery .item-ui {position:absolute; bottom:100%; right:0; margin-bottom:36px;}
.word-visual-gallery .btn-swiper-slider-prev {position:absolute;top:50%;left:0;display:block;width:56px;height:76px;z-index:15; cursor:pointer; margin:-38px 0 0 -56px;}
.word-visual-gallery .btn-swiper-slider-prev:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/icons/world-swiper-arrow-prev.png) center center no-repeat; background-size:100% 100%;}
.word-visual-gallery .btn-swiper-slider-next {position:absolute;top:50%;right:0;display:block;width:56px;height:76px;z-index:15; cursor:pointer; margin:-38px -56px 0 0;}
.word-visual-gallery .btn-swiper-slider-next:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/icons/world-swiper-arrow-next.png) center center no-repeat; background-size:100% 100%;}
.word-visual-gallery .btn-swiper-slider-prev.swiper-button-disabled,
.word-visual-gallery .btn-swiper-slider-next.swiper-button-disabled {display:none;}
.word-txt-group {margin-top:24px; display:flex; padding:0;}
.word-txt-group .swiper-page {flex:0 0 auto; display:inline-flex; font-size:32px; line-height:1; font-weight:400; color:rgba(255,255,255,0.5); height:auto;  align-items:flex-start; margin-right:30px;}
.word-txt-group .swiper-page > em {display:block;font-size:46px; color:#f2c140; font-weight:400;}
.word-txt-group .swiper-page > span {display:block;padding-top:25px;}
.word-txt-group .txt-list {flex:1; width:100%;}
.word-txt-group .txt-list-item {display:none;font-size:20px; line-height:1.6; font-weight:300; color:#fff; text-align:left; opacity:1;}
.word-txt-group .txt-list-item.actived {display:block; opacity:1;}

.world-background-gallery {position:fixed; top:0;left:0;width:100%;height:100%; overflow:hidden;}
.world-background-gallery .swiper-view {position:absolute; top:0;left:0;width:100%;height:100%;}
.world-background-gallery .swiper {height:100%;}
.world-background-gallery .swiper-slide {height:100%; position:relative;}
.world-background-gallery .swiper-slide img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* 노아의 대도서관 > 노아의 지도 */
.map-wrap {position:relative; width:100%; height:100vh; overflow:hidden;}
.map-background {position:absolute; top:0; left:0;width:100%;height:100%;z-index:0;}
.map-background-data {position:absolute;top:0;left:0;width:100%; z-index:50;}
.map-background-data .page-title-group {padding-top:145px;}
.map-background-guide {position:absolute; bottom:0; left:0; width:100%; padding:21px 20px 39px 20px; z-index:5; text-align:center; box-sizing:border-box; display:none;}
.map-background-guide:before {content:''; position:absolute; top:0;left:50%;display:block;width:22px;height:19px;margin-left:-11px;background:url(../images/contents/map-guide-icon.png) center center no-repeat; background-size:22px auto;}
.map-background-guide .txt {font-size:12px; line-height:1.5; color:rgba(255,255,255,0.7);}
.map-background-outer,
.map-background-inner ,
.map-background-view ,
.map-background-view .img {position:absolute; top:0; left:0;width:100%;height:100%; max-width:none;}

.btn-map-bg-nav {position:absolute; display:block; background:rgba(0,0,0,0); z-index:20;}
.btn-map-bg-nav:nth-child(1) {top:55.4%; left:34.7%; width:6.1%; height:10.9%;}
.btn-map-bg-nav:nth-child(2) {top:47.9%; left:46.0%; width:6.1%; height:10.9%;}
.btn-map-bg-nav:nth-child(3) {top:31.6%; left:52.2%; width:6.1%; height:10.9%;}

.map-background-item {position:absolute; display:block;z-index:15;}
.map-background-item img {width:100%; height:100%; max-width:none;}
.map-background-item:nth-child(1) {top:49.5%; left:27.9%; width:19.8%; height:25.2%;}
.map-background-item:nth-child(2) {top:41.7%; left:39.6%; width:18.8%; height:26.5%;}
.map-background-item:nth-child(3) {top:21.9%; left:47.0%; width:16.3%; height:31.3%;}

.map-background-item.active .on,
.map-background-item .off{display: block;transition: all 0.5s ease;}
.map-background-item.active .off,
.map-background-item .on{display: none;transition: all 0.5s ease;}


.map-detail-wrap {position:absolute; top:0;left:100%; visibility:hidden; width:100%;height:100%;overflow:hidden;z-index:1;}
.map-detail-wrap.actived {left:0; visibility:visible;}
.map-detail-wrap .page-ui {position:absolute; top:145px; left:50%; margin-left:-664px; padding:0 24px; z-index:50;}
.map-detail-wrap .audio-ui {position:absolute; top:145px; right:50%; margin-right:-664px; padding:0 24px; z-index:50;}
.map-detail-wrap .visual-group,
.map-detail-wrap .visual-inner,
.map-detail-wrap .visual-cell {position:absolute; top:0; left:0;width:100%;height:100%;}
.map-detail-wrap .visual-cell img { position:absolute; top:0; left:0;width:100%;height:100%; object-fit:cover;}
.map-detail-wrap .visual-cell {z-index:0;}
.map-detail-wrap .visual-cell.actived {z-index:5;}
.map-detail-wrap .visual-group {z-index:0;}
.map-detail-wrap .txt-group { position:absolute; bottom:170px; left:0; width:100%; z-index:5;}
.map-detail-wrap .txt-group-inner {position:relative; max-width:1280px; margin:0 auto;text-align:center;}
.map-detail-wrap .txt-group-inner .txt-cell {position:absolute;bottom:0;left:0;width:100%; z-index:0; display:none; padding:0 100px; box-sizing:border-box;}
.map-detail-wrap .txt-group-inner .txt-cell.actived {z-index:2;display:block;}
.map-detail-wrap .txt-group .subject {font-size:28px; line-height:1.5; font-weight:700; position:relative; width:100%; color:#ffc445;  text-shadow: 0px 0px 7px rgba(0,0,0,1);}
.map-detail-wrap .txt-group .desc {margin-top:12px; font-size:18px; line-height:1.55; font-weight:400; position:relative; width:100%; color:#fff;  text-shadow: 0px 0px 7px rgba(0,0,0,1);}
.map-detail-wrap .nav-ui {position:absolute; bottom:104px; left:0; width:100%;}
.map-detail-wrap .nav-ui-inner {position:relative; max-width:1280px; margin:0 auto; padding:0 24px;}
.map-detail-wrap .nav-list {position:relative; margin:0 50px; z-index:1;}
.map-detail-wrap .nav-items {position:relative; margin:0 90px; display:flex; align-items:flex-start; justify-content:space-between;}
.map-detail-wrap .nav-items .btn-ui-nav {position:relative; display:inline-block;}
.map-detail-wrap .nav-items .btn-ui-nav .unit {position:absolute;top:0;left:50%;margin:-11px 0 0 -11px;display:block;width:22px;height:22px;z-index:1;}
.map-detail-wrap .nav-items .btn-ui-nav .unit:before {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;opacity:1;background:url(../images/contents/map-nav-unit-off.png) center center no-repeat; transition:opacity 0.2s ease; background-size:100% 100%;}
.map-detail-wrap .nav-items .btn-ui-nav .unit:after {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;opacity:0;background:url(../images/contents/map-nav-unit-on.png) center center no-repeat; transition:opacity 0.2s ease; background-size:100% 100%;}
.map-detail-wrap .nav-items .btn-ui-nav .unit > em {position:absolute;top:0;left:0;display:block;width:100%;height:100%;opacity:0;background:url(../images/contents/map-nav-unit-ing.png) center center no-repeat; transition:opacity 0.2s ease; background-size:100% 100%;}
.map-detail-wrap .nav-items .btn-ui-nav .txt {position:absolute;top:0;left:0;display:inline-block;padding-top:16px; font-size:16px;line-height:1.5;color:rgba(181,181,182,0.6); transform:translate(-50% , 0%); white-space:nowrap; transition:color 0.2s ease;}
.map-detail-wrap .nav-items .btn-ui-nav.ing .unit:before {opacity:0;}
.map-detail-wrap .nav-items .btn-ui-nav.ing .unit:after {opacity:0;}
.map-detail-wrap .nav-items .btn-ui-nav.ing .unit > em {opacity:1;}
.map-detail-wrap .nav-items .btn-ui-nav.ing .txt {color:rgba(181,181,182,0.6);}
.map-detail-wrap .nav-items .btn-ui-nav.actived .unit:before {opacity:0;}
.map-detail-wrap .nav-items .btn-ui-nav.actived .unit:after {opacity:1;}
.map-detail-wrap .nav-items .btn-ui-nav.actived .unit > em {opacity:0;}
.map-detail-wrap .nav-items .btn-ui-nav.actived .txt {color:#ffc445;}

.map-detail-wrap .nav-line {position:absolute; top:0; left:0; width:100%; height:1px; z-index:0;
	-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);;
	mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);;
	-webkit-mask-position : center center;
	mask-position : center center;
	-webkit-mask-size :100% 100%;
	mask-size :100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

}

.map-detail-wrap .nav-line .on {position:absolute; top:0; left:90px; width:calc( 100% - 180px ); height:1px; z-index:2;}
.map-detail-wrap .nav-line .bar {position:absolute;top:0;left:0;width:0%;height:100%;background:#ffc445;}
.map-detail-wrap .nav-line:before {content:''; position:absolute; top:0;left:0;width:100%;height:1px;background:#b6b6b6; z-index:0;}
.map-detail-wrap .nav-line:after {content:''; position:absolute; top:0;left:0;width:90px;height:1px;background:#ffc445; z-index:1;}
.map-detail-wrap .btn-slider-prev {position:absolute; top:0; left:24px; display:block; width:24px;height:43px; margin:-22px 0 0 0; background:url(../images/contents/map-nav-arrow-prev.png) center center no-repeat; z-index:5; font-size:0;}
.map-detail-wrap .btn-slider-next {position:absolute; top:0; right:24px; display:block; width:24px;height:43px; margin:-22px 0 0 0; background:url(../images/contents/map-nav-arrow-next.png) center center no-repeat; z-index:5; font-size:0;}


/* 노아의 대도서관 > 세력소개 */
.group-wrap {position:relative; overflow:hidden;}
.group-wrap .page-title-group {position:absolute; top:144px; left:0;  width:100%; z-index:55; padding:0;}
.group-wrap > .inner {position:relative; z-index:50;}
.group-data {position:relative; width:100%; z-index:30;}
.group-data .inner {}
.group-data .swiper {overflow:visible;}
.group-data .swiper-slide.swiper-slide-active {z-index:5;}
.group-data .swiper-slide.swiper-slide-active .item-visual {opacity:1;}
.group-data .swiper-slide.swiper-slide-active .item-detail:before {opacity:1; visibility:hidden; transition:opacity 0.4s 0s ease, visibility 0s 0s ease;}
.group-data .group-items {position:relative; display:flex;}
.group-data .group-items .item-visual {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0; opacity:0;transition:opacity 0.4s ease;}
.group-data .group-items .item-visual .item-nav {position:absolute;top:50%;left:50%;}
.group-data .item-detail {position:relative; margin:757px 40px 120px 40px;}
.group-data .item-detail:before {content:''; position:absolute; top:0;left:0;right:0;bottom:0;width:auto;height:auto;margin:auto; background:rgba(0,0,0,0.4); border-radius:0 54px; box-sizing:border-box; z-index:10; visibility:visible; opacity:1; transition:opacity 0.4s 0s ease, visibility 0s 0s ease;}
.group-data .item-detail-outer {position:relative; min-height:406px;}
.group-data .item-detail-outer:before {content:''; position:absolute; top:0;left:0;right:0;bottom:0;width:auto;height:auto;margin:auto; background:rgba(20,20,20,0.9); border-radius:0 54px; box-sizing:border-box; z-index:0;}
.group-data .item-detail-outer:after {content:''; position:absolute; top:0;left:0;right:0;bottom:0;width:auto;height:auto;margin:5px; border:1px solid rgba(255,196,69,0.1); border-radius:0 54px; box-sizing:border-box; z-index:1;}
.group-data .item-detail-inner {position:relative; padding:5px; z-index:5; box-sizing:border-box; display:flex;}
.group-data .item-detail-inner .item-mark {flex:0 0 auto; width:336px; display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
.group-data .item-detail-inner .item-info {flex:1; width:100%; padding:24px 35px 34px 0;}
.group-data .item-detail-inner .item-subject {font-size:28px; line-height:1.5; font-weight:600;}
.group-data .item-detail-inner .item-headline {margin-top:1px; font-size:22px; line-height:1.5; font-weight:600; color:#fff;}
.group-data .item-detail-inner .item-m-desc {display:none;}
.group-data .item-detail-inner .item-characters {margin-top:19px;gap:14px; display:flex; flex-wrap:wrap;}
.group-data .item-detail-inner .item-characters-cell {display:inline-flex; text-align:left; position:relative; height:48px; padding:5px 27px 5px 5px; min-width:160px; align-items:center; background:rgba(255,255,255,0.08); border-radius:24px; box-sizing:border-box;}
.group-data .item-detail-inner .item-characters-cell .thumb {flex:0 0 auto; align-items:center; display:inline-flex; width:40px; margin-right:3px;}
.group-data .item-detail-inner .item-characters-cell .thumb .obj {width:40px; height:40px; overflow:hidden; border-radius:50%;}
.group-data .item-detail-inner .item-characters-cell .data {flex:1; width:100%;}
.group-data .item-detail-inner .item-characters-cell .name {display:flex; align-items:center; justify-content:flex-start; margin-top:-4px;}
.group-data .item-detail-inner .item-characters-cell .name > em {display:inline-block; font-size:20px; line-height:1.2; font-weight:500; color:#fff;
	text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
}
.group-data .item-detail-inner .item-characters-cell .grade {margin-top:1px; padding:0 4px;}
.group-data .item-detail-inner .item-characters-cell .grade-data {display:flex; align-items:center;}
.group-data .item-detail-inner .item-characters-cell .grade-unit {position:relative; display:inline-flex; width:12px;height:15px;background:url(../images/icons/icon-grade-star.png) center center no-repeat; background-size:100% 100%; }

.group-data .item-detail-inner .item-characters-cell .property {position:relative; flex:0 0 auto; margin-right:2px; display:inline-flex; width:28px; height:28px;}
.group-data .item-detail-inner .item-characters-cell .property.fire {background:url(../images/contents/guide-character-property-fire.png) center center no-repeat; background-size:100% 100%;}
.group-data .item-detail-inner .item-characters-cell .property.light {background:url(../images/contents/guide-character-property-light.png) center center no-repeat; background-size:100% 100%;}
.group-data .item-detail-inner .item-characters-cell .property.lighting {background:url(../images/contents/guide-character-property-lighting.png) center center no-repeat; background-size:100% 100%;}
.group-data .item-detail-inner .item-characters-cell .property.land {background:url(../images/contents/guide-character-property-land.png) center center no-repeat; background-size:100% 100%;}
.group-data .item-detail-inner .item-characters-cell .property.water {background:url(../images/contents/guide-character-property-water.png) center center no-repeat; background-size:100% 100%;}
.group-data .item-detail-inner .item-characters-cell .property.blood {background:url(../images/contents/guide-character-property-blood.png) center center no-repeat; background-size:100% 100%;}
.group-data .item-detail-inner .item-desc {position:relative; margin-top:27px; font-size:18px; line-height:28px; color:#fff; text-align:left; height:168px;
	text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
}
.group-data .item-1 .item-nav {width:1498px;height:1365px; transform:translate(-49.39% , -50.69%); /* margin:-692px 0 0 -740px */}
.group-data .item-1 .item-mark .obj {width:251px;}
.group-data .item-1 .item-subject {color:#ee9191;}
.group-data .item-2 .item-nav {width:1624px;height:1251px; transform:translate(-49.81% , -45.72%); /* margin:-572px 0 0 -809px */}
.group-data .item-2 .item-mark .obj {width:281px;}
.group-data .item-2 .item-subject {color:#9b65d4;}
.group-data .item-3 .item-nav {width:1860px;height:1938px; transform:translate(-50% , -50%); /* margin:-969px 0 0 -930px */}
.group-data .item-3 .item-mark .obj {width:215px;}
.group-data .item-3 .item-subject {color:#a8a8ff;}
.group-data .item-4 .item-nav {width:1360px;height:1362px; transform:translate(-47.05% , -57.48%); /* margin:-783px 0 0 -640px */}
.group-data .item-4 .item-mark .obj {width:251px;}
.group-data .item-4 .item-subject {color:#b17e26;}
.group-data .btn-swiper-slider-prev {position:absolute;top:calc( 757px + 203px );left:0;display:block;width:24px;height:43px;z-index:15; cursor:pointer; margin:-22px 0 0 0;}
.group-data .btn-swiper-slider-prev:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/contents/guide-nav-arrow-prev.png) center center no-repeat; background-size:100% 100%;}
.group-data .btn-swiper-slider-next {position:absolute;top:calc( 757px + 203px );right:0;display:block;width:24px;height:43px;z-index:15; cursor:pointer; margin:-22px 0 0 0;}
.group-data .btn-swiper-slider-next:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/contents/guide-nav-arrow-next.png) center center no-repeat; background-size:100% 100%;}
.group-data .btn-swiper-slider-prev.swiper-button-disabled,
.group-data .btn-swiper-slider-next.swiper-button-disabled {display:none;}
.group-data .mCSB_inside>.mCSB_container {margin-right:40px;}
.group-data .mCSB_scrollTools {width:30px; opacity:1;}
.group-data .mCSB_scrollTools .mCSB_draggerRail {background:#808080; opacity:1; width:1px; border-radius:0; z-index:1;display:none;}
.group-data .mCSB_scrollTools .mCSB_dragger {opacity:1;}	
.group-data .mCSB_scrollTools .mCSB_dragger:before {content:''; position:absolute; top:50%;left:50%;display:block;width:22px;height:22px;background:#000;border:1px solid #808080; box-sizing:border-box; z-index:0; transform:translate(-50% , -50%) rotate(-45deg); z-index:-1;}
.group-data .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:#ffc445; width:10px; height:10px; border-radius:0; position:absolute;top:50%;left:50%;transform:translate(-6px , -5px) rotate(-45deg); opacity:1;}
.group-data .mCSB_scrollTools .mCSB_draggerContainer:before {content:''; position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:1px;height:auto;margin:10px auto;background:#808080;}
.group-data .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
.group-data .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,
.group-data .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
.group-data .mCS-rounded.mCSB_scrollTools .mCSB_dragger {width:30px; height:30px;}


.group-background {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; background:#000;}
.group-background-list {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.group-background-list .list-cell {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; opacity:0;}
.group-background-list .list-cell.actived {opacity:1; z-index:5; transition:opacity 0.4s ease;}
.group-background-list .list-cell img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}




/*----------------------------------------------------------------------
- 캐릭터
-------------------------------------------------------------------------*/
.sk-circle {margin:0; width:40px;  height:40px;  position: relative; }  .sk-circle .sk-child {    width: 100%;    height: 100%;    position: absolute;    left: 0;    top: 0; }  .sk-circle .sk-child:before {    content: '';    display: block;    margin: 0 auto;    width: 15%;    height: 15%;    background-color: #fff;    border-radius: 100%;    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }  .sk-circle .sk-circle2 {    -webkit-transform: rotate(30deg);        -ms-transform: rotate(30deg);            transform: rotate(30deg); }  .sk-circle .sk-circle3 {    -webkit-transform: rotate(60deg);        -ms-transform: rotate(60deg);            transform: rotate(60deg); }  .sk-circle .sk-circle4 {    -webkit-transform: rotate(90deg);        -ms-transform: rotate(90deg);            transform: rotate(90deg); }  .sk-circle .sk-circle5 {    -webkit-transform: rotate(120deg);        -ms-transform: rotate(120deg);            transform: rotate(120deg); }  .sk-circle .sk-circle6 {    -webkit-transform: rotate(150deg);        -ms-transform: rotate(150deg);            transform: rotate(150deg); }  .sk-circle .sk-circle7 {    -webkit-transform: rotate(180deg);        -ms-transform: rotate(180deg);            transform: rotate(180deg); }  .sk-circle .sk-circle8 {    -webkit-transform: rotate(210deg);        -ms-transform: rotate(210deg);            transform: rotate(210deg); }  .sk-circle .sk-circle9 {    -webkit-transform: rotate(240deg);        -ms-transform: rotate(240deg);            transform: rotate(240deg); }  .sk-circle .sk-circle10 {    -webkit-transform: rotate(270deg);        -ms-transform: rotate(270deg);            transform: rotate(270deg); }  .sk-circle .sk-circle11 {    -webkit-transform: rotate(300deg);        -ms-transform: rotate(300deg);            transform: rotate(300deg); }  .sk-circle .sk-circle12 {    -webkit-transform: rotate(330deg);        -ms-transform: rotate(330deg);            transform: rotate(330deg); }  .sk-circle .sk-circle2:before {    -webkit-animation-delay: -1.1s;            animation-delay: -1.1s; }  .sk-circle .sk-circle3:before {    -webkit-animation-delay: -1s;            animation-delay: -1s; }  .sk-circle .sk-circle4:before {    -webkit-animation-delay: -0.9s;            animation-delay: -0.9s; }  .sk-circle .sk-circle5:before {    -webkit-animation-delay: -0.8s;            animation-delay: -0.8s; }  .sk-circle .sk-circle6:before {    -webkit-animation-delay: -0.7s;            animation-delay: -0.7s; }  .sk-circle .sk-circle7:before {    -webkit-animation-delay: -0.6s;            animation-delay: -0.6s; }  .sk-circle .sk-circle8:before {    -webkit-animation-delay: -0.5s;            animation-delay: -0.5s; }  .sk-circle .sk-circle9:before {    -webkit-animation-delay: -0.4s;            animation-delay: -0.4s; }  .sk-circle .sk-circle10:before {    -webkit-animation-delay: -0.3s;            animation-delay: -0.3s; }  .sk-circle .sk-circle11:before {    -webkit-animation-delay: -0.2s;            animation-delay: -0.2s; }  .sk-circle .sk-circle12:before {    -webkit-animation-delay: -0.1s;            animation-delay: -0.1s; }@-webkit-keyframes sk-circleBounceDelay {  0%, 80%, 100% {    -webkit-transform: scale(0);            transform: scale(0); }  40% {    -webkit-transform: scale(1);            transform: scale(1); } }@keyframes sk-circleBounceDelay {  0%, 80%, 100% {    -webkit-transform: scale(0);            transform: scale(0); }  40% {    -webkit-transform: scale(1);            transform: scale(1); } }

.character-wrap {position:relative;width:100%;height:100vh;overflow:hidden; opacity:0; transition:opacity 0.2s ease;}
.character-wrap.actived {opacity:1;}
.character-wrap.actived ~ .character-loading {display:none;}
.character-loading {position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;}
.character-loading .item {position:absolute;top:0;left:0;display:flex;width:100%;height:100%;align-items:center;justify-content:center;}
.character-loading .sk-circle {width:120px; height:120px;}

.character-background {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0;background:#000; transition:background 0.4s ease;}
.character-background-visual {position:absolute; top:0;left:0;width:100%;height:100%;}
.character-background-visual .visual-cell {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0;opacity:0;}
.character-background-visual .visual-cell.actived {z-index:5;}
.character-background-visual .visual-cell img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.character-background .cate-mark {position:absolute; top:50%;left:50%;width:56.24vw;height:56.24vw; margin:-28.12vw 0 0 -28.12vw; z-index:7;} 
.character-background .cate-mark .mark-cell {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0; opacity:0;}
.character-background .cate-mark .mark-cell.actived {z-index:5;}
.character-background .cate-mark .mark-cell img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; mix-blend-mode:lighten; opacity:0.03;}
.character-background .star {position:absolute; top:0;left:0;width:100%;height:100%;z-index:8; object-fit:cover; mix-blend-mode:color-dodge;}
.character-background .light {position:absolute; top:50%;left:50%;width:1700px;height:1700px; margin:-850px 0 0 -850px; z-index:3; opacity:0.2;}
.character-background .shadow {position:absolute; top:0;left:0;width:100%;height:100%;z-index:4; background: radial-gradient(circle, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%); opacity:0.26; mix-blend-mode:multiply}
.character-background .cate-line {position:absolute; top:0;left:7.40vw; width:200px;height:100%; 
	-webkit-mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	-webkit-mask-position : center center;
	mask-position : center center;
	-webkit-mask-size :100% 100%;
	mask-size :100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	z-index:15;
}
.character-background .cate-line .line {position:absolute; top:50%;left:0; width:104.16vw; height:104.16vw; margin-top:-52.08vw; border-radius:50%; box-sizing:border-box; border:2px solid #fff; transition:border 0.4s ease;}
.character-background .thumb-line {position:absolute; top:0;left:16.25vw; width:200px;height:100%;
	-webkit-mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	-webkit-mask-position : center center;
	mask-position : center center;
	-webkit-mask-size :100% 100%;
	mask-size :100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	z-index:15;
}
.character-background .thumb-line .line {position:absolute; top:50%;left:0; width:104.16vw; height:104.16vw; margin-top:-52.08vw; border-radius:50%; box-sizing:border-box; border:2px solid #fff; transition:border 0.4s ease;}

.character-cate {position:absolute; top:50%;left:7.40vw; z-index:15;}
.character-cate-list {position:absolute;top:0;left:0;width:52.08vw; height:1px; transform-origin:100% 50%;}
.character-cate-list-cell {position:absolute; top:0; left:0; width:100%; height:1px; transform-origin:100% 50%;}
.character-cate-list-cell .btn-cate-nav {position:absolute; top:0;left:0;display:block;width:10.62vw;height:10.62vw; margin:-5.31vw 0 0 -5.31vw; transform:scale(0.57); transition:transform 0.6s var(--transition-easeOutQuart);}
.character-cate-list-cell .btn-cate-nav img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;max-width:none;filter: grayscale(100%); transition:filter 0.6s var(--transition-easeOutQuart);}
.character-cate-list-cell.actived .btn-cate-nav {transform:scale(1);}
.character-cate-list-cell.actived .btn-cate-nav img {filter: grayscale(0%);}

.character-thumbs {position:absolute; top:50%; left:16.25vw; z-index:15;}
.character-thumbs .swiper {overflow:visible; position:absolute;top:0;left:0;width:52.08vw; height:1px; transform-origin:100% 50%;}
.character-thumbs .swiper-slide {position:absolute; top:0; left:0; width:100%; height:1px; transform-origin:100% 50%; opacity:0;}
.character-thumbs .swiper-slide .btn-thumbs-nav {position:absolute; top:0;left:0;display:block;width:4.38vw;height:4.38vw; margin:-2.19vw 0 0 -2.19vw;}
.character-thumbs .swiper-slide .btn-thumbs-nav img {filter: grayscale(100%); transition:filter 0.2s var(--transition-easeOutQuart); position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.character-thumbs .swiper-slide .btn-thumbs-nav > span {display:block; position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; background:#000; z-index:1;}
.character-thumbs .swiper-slide .btn-thumbs-nav > span:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;border:1px solid #000; border-radius:50%; z-index:1;}
.character-thumbs .swiper-slide .btn-thumbs-nav:before {content:''; position:absolute; top:50%; left:50%;display:block;width:114%; height:114%; transform:translate(-50% , -50%); background:#000; border:1px solid #000; box-sizing:border-box; border-radius:50%; z-index:0;}
.character-thumbs .swiper-slide .btn-thumbs-nav:after {content:''; position:absolute; top:50%; left:50%;display:block;width:114%; height:114%; transform:translate(-50% , -50%); background:none; border:1px solid #fff; box-sizing:border-box; border-radius:50%; z-index:5; opacity:0; transition:opacity 0.2s ease; mix-blend-mode:overlay}
.character-thumbs .swiper-slide.show {display:block;}
.character-thumbs .swiper-slide.hide {display:none;}
.character-thumbs .swiper-slide.actived .btn-thumbs-nav {transform:scale(1);}
.character-thumbs .swiper-slide.actived .btn-thumbs-nav img {filter: grayscale(0%);}
.character-thumbs .swiper-slide.actived .btn-thumbs-nav:after {opacity:1;}

.character-view {position:absolute; top:0;left:0;width:100%;height:100%;z-index:5;}
.character-view .swiper {overflow:visible; position:absolute;top:0;left:0;width:100%; height:100%;}
.character-view .swiper-slide {position:absolute; top:0;left:0; width:100%;height:100%; z-index:0; display:none;}
.character-view .swiper-slide.actived {z-index:5;display:block;}

.character-detail-ui {position:absolute; bottom:7.59%; left:0; width:100%; z-index:50; display:flex; justify-content:center; align-items:center; gap:0 45px;}
.character-voice-wrap {position:relative; display:inline-flex; padding:0 30px 0 70px; flex-direction:column; align-items:flex-start; justify-content:center; min-height:76px; background:#000; border:2px solid #646464; border-radius:38px;}
.character-voice-wrap .voice-ui-icon {position:absolute; top:0;left:13px; width:48px; height:100%; display:flex; align-items:center; justify-content:center;}
.character-voice-wrap .voice-name {display:flex; align-items:center; font-size:18px; line-height:1.5; color:#fff; font-weight:400; text-align:left;}
.character-voice-wrap .voice-name-unit {flex:0 0 auto; margin-right:6px;}
.character-voice-wrap .voice-name-group {flex:1;}
.character-voice-wrap .voice-name-group .name-cell {display:none;}
.character-voice-wrap .voice-name-group .name-cell.actived {display:block;}
.character-voice-wrap .voice-ui-btns {display:inline-flex; align-items:center; gap:0 12px; margin-top:7px;}
.character-voice-wrap .voice-ui-btns .btn-voice-nav {position:relative; display:inline-flex; height:24px; white-space:nowrap; line-height:1;padding:0 9px; font-size:16px; color:#fff; text-align:center; justify-content:center; align-items:center; border:1px solid #fff; border-radius:12px; transition:background 0.2s ease, border 0.2s ease, color 0.2s ease; box-sizing:border-box;}
.character-voice-wrap .voice-ui-btns .btn-voice-nav.actived {color:#000; background:#ffc445; border-color:#ffc445;}
.btn-character-skill {position:relative; display:inline-flex; width:76px; height:76px;}
.btn-character-skill .icon {width:100%;height:100%;}
.btn-character-toggle {position:relative; display:inline-flex; width:76px; height:76px;}
.btn-character-toggle .off {position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;}
.btn-character-toggle .on {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}
.btn-character-toggle.hide {display:none;}

.character-detail-items.weapon .btn-character-toggle .off {opacity:0;}
.character-detail-items.weapon .btn-character-toggle .on {opacity:1;}

.character-detail-view {position:absolute; top:50%; right:0; display:block;}
.character-detail-view .item-outer {position:relative;display:inline-block; width:548px; background:rgba(20,20,20,0.89); transform:translate(0% , -50%); border-radius:0px 0px 0px 54px;}
.character-detail-view .item-outer:before {content:''; position:absolute; top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:4px auto 4px 4px; border-radius:0px 0px 0px 54px; border:1px solid rgba(255,196,69,0.1); border-right:none;}
.character-detail-view .item-inner {position:relative; padding:35px 60px 35px 42px; z-index:5;}
.character-detail-view .item-cate {position:relative; display:flex; height:48px; padding:0 9px 0 23px;}
.character-detail-view .item-cate .mark {position:absolute; font-size:0; width:70px; height:70px; top:50%; margin:-35px 0 0 -35px; z-index:1;}
.character-detail-view .item-cate .mark img {width:100%; max-width:none;}
.character-detail-view .item-cate .name {position:relative; display:flex; width:100%; height:48px; align-items:center; box-sizing:border-box; padding:0 0 0 53px;}
.character-detail-view .item-cate .name > em {font-weight:400; position:relative; display:inline-block; z-index:5; font-size:22px; color:#fff;}
.character-detail-view .item-cate .name:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%; background:#000;}
.character-detail-view .item-data .item-info {display:none; position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:7px 12px;}
.character-detail-view .item-data {margin-top:28px; position:relative;}
.character-detail-view .item-data:before {content:''; position:absolute; bottom:100%;left:0;display:block;width:100%;height:2px;background:#000;}
.character-detail-view .item-data .item-headline {font-size:26px; line-height:1.23; color:#fff;}
.character-detail-view .item-data .item-name {font-size:46px; line-height:1.24; font-weight:600; color:#fff;}
.character-detail-view .item-data .item-preview {}
.character-detail-view .item-data .item-grade .grade-data {display:flex; align-items:center;}
.character-detail-view .item-data .item-grade .grade-unit {position:relative; display:inline-flex; width:20px;height:24px;background:url(../images/icons/icon-grade-star-large.png) center center no-repeat; background-size:100% 100%; }
.character-detail-view .item-data .item-property {position:absolute; bottom:0; left:0;display:inline-flex;padding:7px 10px; gap:0px 5px;}
.character-detail-view .item-desc {text-align:left; margin-top:24px;}
.character-detail-view .item-desc-scroller {overflow:hidden; min-height:244px; height:37.96vh;
	-webkit-mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%);
	mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
	-webkit-mask-position : center center;
	mask-position : center center;
	-webkit-mask-size :100% 100%;
	mask-size :100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.character-detail-view .item-desc-title {font-size:22px; line-height:34px; font-weight:600; color:#fff;}
.character-detail-view .item-desc-txt {font-size:18px; line-height:30px; font-weight:400; color:#fff;}
.character-detail-view .item-desc-title + .item-desc-txt {margin-top:3px;}
.character-detail-view .item-desc-txt + .item-desc-title {margin-top:39px;}
.character-detail-view .item-character {display:block;}
.character-detail-view .item-weapon {display:none;}
.character-detail-view .mCSB_inside>.mCSB_container {margin-right:34px;}
.character-detail-view .mCSB_inside>.mCSB_container > *:last-child {padding-bottom:40px;}
.character-detail-view .mCSB_scrollTools {width:30px; opacity:1;}
.character-detail-view .mCSB_scrollTools .mCSB_draggerContainer {margin-bottom:80px;}
.character-detail-view .mCSB_scrollTools .mCSB_draggerRail {position:absolute; top:0;right:0;bottom:0;left:0; width:1px;height:auto; margin:15px auto; border-radius:0; background:#808080; opacity:1; z-index:0;}
.character-detail-view .mCSB_scrollTools .mCSB_draggerRail:before {content:'';position:absolute;top:0;left:50%;display:block;width:5px;height:5px;background:#808080; transform:translate(-2px , -2px) rotate(45deg);}
.character-detail-view .mCSB_scrollTools .mCSB_draggerRail:after {content:'';position:absolute;bottom:0;left:50%;display:block;width:5px;height:5px;background:#808080; transform:translate(-2px , 2px) rotate(45deg);}
.character-detail-view .mCSB_scrollTools .mCSB_dragger {opacity:1;}	
.character-detail-view .mCSB_scrollTools .mCSB_dragger:before {content:''; position:absolute; top:50%;left:50%;display:block;width:22px;height:22px;background:#000;border:1px solid #808080; box-sizing:border-box; z-index:0; transform:translate(-50% , -50%) rotate(-45deg); z-index:-1;}
.character-detail-view .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:#ffc445; width:10px; height:10px; border-radius:0; position:absolute;top:50%;left:50%;transform:translate(-6px , -5px) rotate(-45deg); opacity:1;}
.character-detail-view .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
.character-detail-view .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,
.character-detail-view .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
.character-detail-view .mCS-rounded.mCSB_scrollTools .mCSB_dragger {width:30px; height:30px;}

.character-detail-visual {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0;}
.character-detail-visual .obj {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0;}
.character-detail-visual .obj img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.character-weapon-visual {position:absolute; top:0;left:0;width:100%;height:100%;z-index:0; display:none;}
.character-weapon-visual .obj {position:absolute; top:50%;left:50%;width:41.66vw;height:41.66vw; margin:-20.83vw 0 0 -20.83vw;}
.character-weapon-visual .obj img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.character-illustration-visual {position:absolute; top:0;left:0;width:100%;height:100%;z-index:100; display:none;background:rgba(0,0,0,0.9);}
.character-illustration-visual .obj {display:flex;width:100%;height:100%;align-items:center;justify-content:center;}
.character-illustration-visual .obj img {width:100%;object-fit:cover;}
.btn-illustration-toggle.close {position:absolute;top:67px;right:20px;display:none;width:32px;height:32px;background:url(../images/contents/character-illustration-close.png) center center no-repeat; background-size:100% 100%; z-index:15;}
.btn-illustration-toggle.open {position:absolute;top:67px;right:20px;display:none;width:32px;height:32px;background:url(../images/contents/character-illustration-open.png) center center no-repeat; background-size:100% 100%; z-index:15;}



/* 무기 활성화 시 */
.character-detail-items.weapon .character-detail-visual {display:none;}
.character-detail-items.weapon .character-weapon-visual {display:block; z-index:5;}
.character-detail-items.weapon .character-detail-view .item-character {display:none;}
.character-detail-items.weapon .character-detail-view .item-weapon {display:block;}

/* 기사단별 색상 정의 */
/*
	0 : 구원기사단
	1 : 황금기사단
	2 : 바타르
	3 : 그랑리벨 정의단
	4 : 기타
*/
/*
.character-background.cate-1  {background:#151825;}
.character-background.cate-2  {background:#1f160e;}
.character-background.cate-3  {background:#191425;}
.character-background.cate-4  {background:#211616;}
.character-background.cate-5  {background:#211e23;}
*/
.character-background.cate-1 .cate-line .line {border-color:#ee9191;}
.character-background.cate-2 .cate-line .line {border-color:#9b65d4;}
.character-background.cate-3 .cate-line .line {border-color:#a8a8ff;}
.character-background.cate-4 .cate-line .line {border-color:#b17e26;}
.character-background.cate-5 .cate-line .line {border-color:#c2aad0;}
.character-background.cate-1 .thumb-line .line {border-color:#ee9191;}
.character-background.cate-2 .thumb-line .line {border-color:#9b65d4;}
.character-background.cate-3 .thumb-line .line {border-color:#a8a8ff;}
.character-background.cate-4 .thumb-line .line {border-color:#b17e26;}
.character-background.cate-5 .thumb-line .line {border-color:#c2aad0;}
.character-background.cate-1 .light {background: radial-gradient(circle, rgba(40,44,63,1) 0%, rgba(40,44,63,0) 70%); }
.character-background.cate-2 .light {background: radial-gradient(circle, rgba(178,126,96,1) 0%, rgba(178,126,96,0) 70%); }
.character-background.cate-3 .light {background: radial-gradient(circle, rgba(131,108,165,1) 0%, rgba(131,108,165,0) 70%);}
.character-background.cate-4 .light {background: radial-gradient(circle, rgba(192,82,82,1) 0%, rgba(192,82,82,0) 70%); }
.character-background.cate-5 .light {background: radial-gradient(circle, rgba(144,127,147,1) 0%, rgba(144,127,147,0) 70%);}

.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="0"]:before {background:#1a1a1a; border-color:#ee9191;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="0"] > span {background:#1a1a1a; box-shadow: 0px 0px 18px 0px rgba(117,121,178,0.39);}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="0"] > span:before {border-color:#ee9191;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="1"]:before {background:#1a1a1a; border-color:#9b65d4;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="1"] > span {background:#1a1a1a; box-shadow: 0px 0px 18px 0px rgba(100,76,36,0.5);}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="1"] > span:before {border-color:#9b65d4;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="2"]:before {background:#1a1a1a; border-color:#a8a8ff;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="2"]> span {background:#1c1423; box-shadow: 0px 0px 18px 0px rgba(80,49,122,0.5);}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="2"] > span:before {border-color:#a8a8ff;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="3"]:before {background:#1a1a1a; border-color:#b17e26;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="3"] > span {background:#1a1a1a; box-shadow: 0px 0px 18px 0px rgba(154,98,98,0.39);}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="3"] > span:before {border-color:#b17e26;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="4"]:before {background:#1a1a1a; border-color:#c2aad0;}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="4"] > span {background:#1a1a1a; box-shadow: 0px 0px 18px 0px rgba(98,78,109,0.5);}
.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="4"] > span:before {border-color:#c2aad0;}

.character-detail-items[data-cate="0"] .item-cate .name:before {background: linear-gradient(90deg, rgba(73,31,31,1) 75%, rgba(73,31,31,0) 100%); }
.character-detail-items[data-cate="0"] .item-data:before {background: linear-gradient(90deg, rgba(73,31,31,1) 75%, rgba(73,31,31,0) 100%); }
.character-detail-items[data-cate="0"] .character-detail-view .item-data .item-name {color:#ee9191;}
.character-detail-items[data-cate="1"] .item-cate .name:before {background: linear-gradient(90deg, rgba(46,28,69,1) 75%, rgba(46,28,69,0) 100%); }
.character-detail-items[data-cate="1"] .item-data:before {background: linear-gradient(90deg, rgba(46,28,69,1) 75%, rgba(46,28,69,0) 100%);; }
.character-detail-items[data-cate="1"] .character-detail-view .item-data .item-name {color:#9b65d4;}
.character-detail-items[data-cate="2"] .item-cate .name:before {background: linear-gradient(90deg, rgba(37,32,64,1) 75%, rgba(37,32,64,0) 100%); }
.character-detail-items[data-cate="2"] .item-data:before {background: linear-gradient(90deg, rgba(37,32,64,1) 75%, rgba(37,32,64,0) 100%); }
.character-detail-items[data-cate="2"] .character-detail-view .item-data .item-name {color:#a8a8ff;}
.character-detail-items[data-cate="3"] .item-cate .name:before {background: linear-gradient(90deg, rgba(58,43,23,1) 75%, rgba(58,43,23,0) 100%); }
.character-detail-items[data-cate="3"] .item-data:before {background: linear-gradient(90deg, rgba(58,43,23,1) 75%, rgba(58,43,23,0) 100%); }
.character-detail-items[data-cate="3"] .character-detail-view .item-data .item-name {color:#b17e26;}
.character-detail-items[data-cate="4"] .item-cate .name:before {background: linear-gradient(90deg, rgba(49,40,54,1) 75%, rgba(49,40,54,0) 100%); }
.character-detail-items[data-cate="4"] .item-data:before {background: linear-gradient(90deg, rgba(49,40,54,1) 75%, rgba(49,40,54,0) 100%); }
.character-detail-items[data-cate="4"] .character-detail-view .item-data .item-name {color:#c2aad0;}

/*
.character-detail-items[data-cate="0"] .item-cate .name:before {background: linear-gradient(90deg, rgba(37,32,64,1) 75%, rgba(37,32,64,0) 100%); }
.character-detail-items[data-cate="0"] .item-data:before {background: linear-gradient(90deg, rgba(37,32,64,1) 75%, rgba(37,32,64,0) 100%); }
.character-detail-items[data-cate="0"] .character-detail-view .item-data .item-name {color:#ee9191;}
.character-detail-items[data-cate="1"] .item-cate .name:before {background: linear-gradient(90deg, rgba(58,43,23,1) 75%, rgba(58,43,23,0) 100%); }
.character-detail-items[data-cate="1"] .item-data:before {background: linear-gradient(90deg, rgba(58,43,23,1) 75%, rgba(58,43,23,0) 100%); }
.character-detail-items[data-cate="1"] .character-detail-view .item-data .item-name {color:#9b65d4;}
.character-detail-items[data-cate="2"] .item-cate .name:before {background: linear-gradient(90deg, rgba(46,28,69,1) 75%, rgba(46,28,69,0) 100%); }
.character-detail-items[data-cate="2"] .item-data:before {background: linear-gradient(90deg, rgba(46,28,69,1) 75%, rgba(46,28,69,0) 100%); }
.character-detail-items[data-cate="2"] .character-detail-view .item-data .item-name {color:#a8a8ff;}
.character-detail-items[data-cate="3"] .item-cate .name:before {background: linear-gradient(90deg, rgba(73,31,31,1) 75%, rgba(73,31,31,0) 100%); }
.character-detail-items[data-cate="3"] .item-data:before {background: linear-gradient(90deg, rgba(73,31,31,1) 75%, rgba(73,31,31,0) 100%); }
.character-detail-items[data-cate="3"] .character-detail-view .item-data .item-name {color:#b17e26;}
.character-detail-items[data-cate="4"] .item-cate .name:before {background: linear-gradient(90deg, rgba(49,40,54,1) 75%, rgba(49,40,54,0) 100%); }
.character-detail-items[data-cate="4"] .item-data:before {background: linear-gradient(90deg, rgba(49,40,54,1) 75%, rgba(49,40,54,0) 100%); }
.character-detail-items[data-cate="4"] .character-detail-view .item-data .item-name {color:#c2aad0;}
*/



/*----------------------------------------------------------------------
- 다운로드
-------------------------------------------------------------------------*/




/*==============================================
@ PC 고해상도
==============================================*/
@media screen and (min-width:1921px) {
	/*
	.character-cate {left:50%; margin:0 0 0 -817px;}
	.character-cate-list-cell .btn-cate-nav {width:204px;height:204px; margin:-103px 0 0 -103px;}
	.character-thumbs {left:50%; margin:0 0 0 -649px;}		
	.character-thumbs .swiper-slide .btn-thumbs-nav {width:84px;height:84px; margin:-42px 0 0 -42px;}
	.character-background .cate-line {left:50%; margin:0 0 0 -817px;}
	.character-background .thumb-line {left:50%; margin:0 0 0 -649px;}
	.character-background .cate-mark {width:1080px;height:1080px; margin:-540px 0 0 -540px;} 		
	*/
}

@media screen and (max-width:1920px) {
	.main-side-float-banner {left:0; margin-left:0;}
	.main-intro .scroller {left:0; margin-left:0;}
}


/*==============================================
@ PC 저해상도
==============================================*/
@media screen and (max-width:1600px) {
	.group-data .item-1 .item-nav {width:calc( 1498px * 0.8 );height:calc( 1365px * 0.8 ); transform:translate(-49.39% , -56.69%);}
	.group-data .item-2 .item-nav {width:calc( 1624px * 0.8 );height:calc( 1251px * 0.8 ); transform:translate(-49.81% , -51.72%);}
	.group-data .item-3 .item-nav {width:calc( 1860px * 0.8 );height:calc( 1938px * 0.8 ); transform:translate(-50% , -56%);}
	.group-data .item-4 .item-nav {width:calc( 1360px * 0.8 );height:calc( 1362px * 0.8 ); transform:translate(-47.05% , -63.48%);}
	.group-data .item-detail {margin-top:calc( 757px * 0.8 );}
	.group-data .btn-swiper-slider-prev {top:calc( 757px * 0.8 + 203px );}
	.group-data .btn-swiper-slider-next {top:calc( 757px * 0.8 + 203px );}

	.character-detail-view .item-outer {width:28.54vw;}
	.character-detail-view .item-inner {padding:30px;}
}

@media screen and (max-width:1400px) {
	.character-detail-ui {bottom:40px; gap:0 20px;}
	.btn-character-skill {width:52px; height:52px;}
	.btn-character-toggle {width:52px; height:52px;}
	.character-voice-wrap {min-height:52px; padding:0 20px 0 52px;}	
	.character-voice-wrap .voice-ui-icon {width:32px;}
	.character-voice-wrap .voice-ui-icon .icon {width:32px; height:32px;}
	.character-voice-wrap .voice-name {font-size:14px;}
	.character-voice-wrap .voice-ui-btns {margin-top:2px; gap:0 6px;}
	.character-voice-wrap .voice-ui-btns .btn-voice-nav {font-size:12px; height:18px;}
}

@media screen and (max-width:1366px) {
	/*
	.main-side-float-banner .item-inner {padding-left:30px;}
	.main-intro .scroller .item-inner {left:30px;}
	*/
}
@media screen and (max-width:1328px) {
	.inner {box-sizing:border-box;}
	
	.side-layout-view {width:68%;}
	
	.map-detail-wrap .page-ui {left:0; margin-left:0;}
	.map-detail-wrap .audio-ui {right:0; margin-right:0;}

}
@media screen and (max-width:1280px) {
	.main-intro .data-group .item-data {padding-bottom:36px;}
	.main-intro .data-group .item-headline .txt-1 .txt {width:22.66vw;}
	.main-intro .data-group .item-headline .txt-2 .txt {width:66.17vw;}
	
	
	.group-data .item-1 .item-nav {width:calc( 1498px * 0.7 );height:calc( 1365px * 0.7 ); transform:translate(-49.39% , -56.69%);}
	.group-data .item-2 .item-nav {width:calc( 1624px * 0.7 );height:calc( 1251px * 0.7 ); transform:translate(-49.81% , -51.72%);}
	.group-data .item-3 .item-nav {width:calc( 1860px * 0.7 );height:calc( 1938px * 0.7 ); transform:translate(-50% , -56%);}
	.group-data .item-4 .item-nav {width:calc( 1360px * 0.7 );height:calc( 1362px * 0.7 ); transform:translate(-47.05% , -63.48%);}
	.group-data .item-detail {margin-top:calc( 757px * 0.7 );}
	.group-data .btn-swiper-slider-prev {top:calc( 757px * 0.7 + 203px );}
	.group-data .btn-swiper-slider-next {top:calc( 757px * 0.7 + 203px );}
	
	.group-data .item-detail-inner .item-mark {width:calc( 336px * 0.7 ); padding:0 40px;}
	.group-data .item-detail-inner .item-mark .obj {width:100%;}

	.character-detail-view .item-cate .name > em {font-size:16px;}

	.character-detail-view .item-desc-title {font-size:16px; line-height:1.5;}
	.character-detail-view .item-desc-txt  {font-size:14px; line-height:1.5;}
	
}


/*==============================================
@ 태블릿 기본
==============================================*/
@media screen and (max-width:1024px) {
	/*----------------------------------------------------------------------
	- 공통
	-------------------------------------------------------------------------*/
	/* 레이아웃 */
	.page-ui-top {padding-top:35px;}
	.page-ui-top .page-ui-left {gap:10px;}
	.page-ui-top .page-ui-right {gap:10px;}
	.page-ui-top ~ .board-view-wrap {margin-top:20px;}

	/*  타이틀 */
	.page-title-group {padding-top:30px;}
	.page-title-group + .page-tab {margin-top:20px;}


	/*----------------------------------------------------------------------
	- 메인
	-------------------------------------------------------------------------*/	
	.main-news-list .btn-gallery-list-nav .item-subject .txt {-webkit-line-clamp: 1;}	
	

	
	/*----------------------------------------------------------------------
	- 노아의 대도서관
	-------------------------------------------------------------------------*/
	/* 노아의 대도서관 > 가이드 */
	.side-layout-data {margin-left:24px;}
	

	/* 노아의 대도서관 > 세계관 */
	.world-wrap .page-title-group {padding-top:40px;}

	/* 노아의 대도서관 > 노아의 지도 */
	.map-background-data .page-title-group {padding-top:96px;}
	.map-detail-wrap .page-ui,
	.map-detail-wrap .audio-ui {top:104px;}
	
	/* 노아의 대도서관 > 세력소개 */
	.group-wrap .page-title-group { top:96px;}
	.group-data .item-1 .item-nav {transform:translate(-49.39% , -58.69%);}
	.group-data .item-2 .item-nav {transform:translate(-49.81% , -53.72%);}
	.group-data .item-3 .item-nav {transform:translate(-50% , -58%);}
	.group-data .item-4 .item-nav {transform:translate(-47.05% , -65.48%);}
	.group-data .item-detail {margin-top:calc( 757px * 0.5 ); margin-bottom:60px;}
	.group-data .btn-swiper-slider-prev {top:calc( 757px * 0.5 + 203px );}
	.group-data .btn-swiper-slider-next {top:calc( 757px * 0.5 + 203px );}
	

}


/*==============================================
@ 모바일 기본
==============================================*/
@media screen and (max-width:900px) {
	/*----------------------------------------------------------------------
	- 노아의 대도서관
	-------------------------------------------------------------------------*/
	/* 노아의 대도서관 > 가이드 */
	.page-title-group + .side-layout-wrap {margin-top:24px;}
	.side-layout-wrap {display:block;}
	.side-layout-view {width:100%; padding-top:0; margin-top:24px;}
	.side-layout-view .board-view-area {width:auto;}
	.side-layout-data {width:100%; margin-left:0; margin-top:24px;}

	.btn-mobile-side-menu {display:flex; margin-top:24px;}
	#header.not .header-inner:before {z-index:2;}
	#header.not .header-inner .logo {z-index:3;}
	#header.not .btn-mobile-header-open {z-index:3;}
	.side-menu-wrap {display:block; position:fixed;top:0;left:100%;right:0;bottom:0;width:auto;height:auto;visibility:hidden; transition:left 0s 0.4s ease, visibility 0s 0.4s ease; z-index:15200;}	
	.side-menu-wrap.actived {left:0; visibility:visible; transition-delay:0s;}
	.side-menu-wrap.actived .side-menu-inner {opacity:1;}
	.side-menu-inner {position:absolute;top:0;left:0;width:100%;height:100%;display:flex; align-items:flex-start; justify-content:center; padding:36px; background:rgba(0,0,0,0.5); overflow-x:hidden;overflow-y:auto; transition:opacity 0.4s ease; opacity:0; box-sizing:border-box;}
	.side-menu-inner .item-list {position:relative; width:100%; padding:42px 24px 26px 24px;box-sizing:border-box;}
	.side-menu-inner h3 {font-size:18px; line-height:1.4;}
	.side-menu-inner .btn-side-close {position:absolute; top:2px;right:0;display:block;width:64px; height:64px; z-index:5; background:url(../images/icons/icon-side-menu-close.png) center center no-repeat; background-size:16px auto;}

}

@media screen and (max-width:800px) {
	/*----------------------------------------------------------------------
	- 메인
	-------------------------------------------------------------------------*/
	.main-side-float-banner {position:absolute;}
	.main-side-float-banner .item-inner {padding:70px 0 0 15px;}
	.main-intro {text-align:center;}
	.main-intro .scroller {bottom:12px; left:50%; margin-left:-12px;}
	.main-intro .scroller .item-inner {left:0;padding:0;width:23px;height:37px;}
	.main-intro .scroller .item-inner:after {display:none;}
	.main-intro .scroller .icons {position:relative; width:23px; height:37px; background:url(../images/contents/main-intro-scroller-icons-m.png) center center no-repeat; background-size:100% 100%;}
	.main-intro .scroller .icons:before {display:none;}
	.main-intro .scroller .txt {display:none;}	
	.main-intro .data-group .item-data {padding-bottom:64px;}
	.main-intro .data-group .item-headline .item-row {display:block;}
	.main-intro .data-group .item-headline .item-row .txt {display:inline-block;}	
	.main-intro .data-group .item-headline .txt-1 .txt {width:217px;}
	.main-intro .data-group .item-headline .txt-2 .txt {width:273px;}
	.main-intro .data-group .item-headline .txt-2 .particle {width:359px; height:207px; margin:-118px 0 0 -186px; z-index:1;}
	.main-intro .data-group .item-headline .txt-2 .shadow {width:360px; height:314px; margin:-178px 0 0 -180px; z-index:0;}
	.main-intro .data-group .item-headline .txt-1 {}
	.main-intro .data-group .item-headline .txt-2 {margin-top:-10px;}
	.main-intro .data-group .btn-client-download {display:flex; margin:32px auto 0 auto;}
	.main-intro .btn-main-intro-play {position:relative; width:66px; height:66px; z-index:10; display:block;margin:-4px auto 0 auto;}
	.main-intro .btn-main-intro-play:before {background:url(../images/contents/btn-main-intro-play-arrow-m.png) center center no-repeat; background-size:100% 100%;}
	.main-intro .btn-main-intro-play > em:before {background:url(../images/contents/btn-main-intro-play-box-off-m.png) center center no-repeat; background-size:100% 100%;}
	.main-intro .data-group .item-btns {display:none;}	
	.main-intro .scroller .icons {animation:scroller 0.6s linear alternate infinite;}	
	@keyframes scroller {
		0%{
			transform:translateY(0%);
		}
		100%{
			transform:translateY(10px);
		}
	}
	
	
	.main-intro .visual-group .visual-wrap {position:absolute; top:0;left:0;width:100%; height:100%; margin:0;}
	
	.main-news {padding:89px 0 27px 0; min-height:0;}
	.main-news .more {margin-top:33px;}
	.main-news .btn-gallery-list-nav:hover {border-color:#4d4d4d;}
	.main-news-data {margin-top:28px; padding-right:0;}
	.main-news-headline {width:100%;}
	.main-news-headline .btn-gallery-list-nav {border-width:2px;}
	.main-news-headline .btn-gallery-list-nav .item-desc {display:none;}
	.main-news-headline .card-thumb {padding-top:38.29%;}
	.main-news-list {position:relative; top:auto; right:auto; width:100%; padding-left:0; height:auto;margin-top:17px;}
	.main-news-list .swiper-slide {height:auto;}
	.main-news-list .swiper {width:100%; height:auto; margin-left: 0; margin-right: auto;  overflow:visible;}
	.main-news-list .swiper-data {width:auto; height:auto; margin-left:-20px;margin-right:-20px;padding:0 20px; overflow:hidden;}
	.main-news-list .swiper-slide.show .btn-gallery-list-nav .item-inner:before {opacity:0; visibility:hidden; transition-delay:0s;}	
	/*
	.main-news-list .swiper-slide.swiper-slide-active .btn-gallery-list-nav {border-color:rgba(242,193,64,1);}
	*/
	.main-news-list .swiper-slide.swiper-slide-active .btn-gallery-list-nav .item-inner:before {opacity:0; visibility:hidden; transition-delay:0s;}	
	.main-news-list .btn-gallery-list-nav {border-width:2px;}
	.main-news-list .btn-gallery-list-nav .item-inner {display:block; height:auto; }
	.main-news-list .btn-gallery-list-nav .item-thumb {width:100%; height:auto; box-shadow:none;}
	.main-news-list .btn-gallery-list-nav .card-thumb {width:auto; height:auto; padding-top:38.29%;}	
	.main-news-list .swiper-ui {margin-top:16px; display:flex; align-items:center; height:32px; justify-content:center;}
	.main-news-list .swiper-pagination {display:none;}
	.main-news-list .swiper-page {display:block;}
	.main-news-list .btn-swiper-slider-prev {right:auto; left:0;width:32px;height:32px;}
	.main-news-list .btn-swiper-slider-next {top:0;right:0;width:32px;height:32px;}

	.main-character {padding:26px 0 105px 0; min-height:0;}
	.main-character-list {margin-top:28px;}
	.main-character-list > ul {margin:0; display:block;}
	.main-character-list > ul > li {width:100%; padding:0; box-sizing:border-box;}
	.main-character-list > ul > li + li {margin-top:17px;}
	.main-character-list > ul > li:nth-child(1) .btn-main-character-nav .item-visual {width:100%;}
	.main-character-list .btn-main-character-nav {position:relative; padding-top:0; display:block;}
	.main-character-list .btn-main-character-nav .item-outer {position:relative;top:auto;left:auto;width:auto;height:auto;}
	.main-character-list .btn-main-character-nav .item-inner {position:relative;top:auto;left:auto;width:auto;height:auto;}
	.main-character-list .btn-main-character-nav .item-visual {position:relative;bottom:auto;right:auto;width:auto;height:auto;}
	.main-character-list .btn-main-character-nav .item-visual .on {position:absolute;bottom:auto; top:0; left:0; right:auto; width:100%;height:100%; opacity:0 !important;}
	.main-character-list .btn-main-character-nav .item-visual .off {position:relative;bottom:auto;right:auto;width:100%;height:auto;}
	.main-character-list .btn-main-character-nav .item-visual img {position:relative; bottom:auto; right:auto; max-width:none; width:100%;}
	.main-character .more {margin-top:49px;}
	
	.main-news ,
	.main-character {background:none;}
	
	.main-view-inner {background:url(../images/contents/main-view-bg-m.jpg) center top no-repeat; background-size:cover;}
	
	.main-bottom-float-banner {display:block; width:100%;}
	.main-bottom-float-banner .btn-purple-line {display:block;}
	.main-bottom-float-banner .btn-purple-line img {position:relative; max-width:none; display:block; left:50%; width:360px; z-index:5; margin-left:-180px;}
	.main-bottom-float-banner .btn-purple-line:before{content:''; position:absolute;bottom:0;left:0;width:100%;height:35px;background:#4b3c96;}


	/*----------------------------------------------------------------------
	- 노아의 대도서관
	-------------------------------------------------------------------------*/
	/* 노아의 대도서관 > 세계관 */
	.world-wrap .page-title-group {padding-top:20px;}
	.word-visual-gallery {margin:20px -20px 0 -20px; padding:0;}	
	.word-visual-gallery .swiper .obj {border-radius:0 20px;}
	.word-visual-gallery .swiper-slide {padding:0 25px; box-sizing:border-box;}
	.word-visual-gallery .item-ui {position:relative; bottom:auto; right:auto; margin:20px 0 0 0; padding:0 26px;}
	.word-visual-gallery .btn-swiper-slider-prev {width:43px;height:43px; margin:-22px 0 0 0;}
	.word-visual-gallery .btn-swiper-slider-prev:before {background:url(../images/icons/world-swiper-arrow-prev-m.png) left center no-repeat; background-size:20px auto;}
	.word-visual-gallery .btn-swiper-slider-next {width:43px;height:43px;z-index:15; cursor:pointer; margin:-22px 0 0 0;}
	.word-visual-gallery .btn-swiper-slider-next:before {background:url(../images/icons/world-swiper-arrow-next-m.png) right center no-repeat; background-size:20px auto;}
	.word-txt-group {margin-top:16px; display:block; padding:0 26px;}
	.word-txt-group .swiper-page {font-size:20px;}
	.word-txt-group .swiper-page > em {font-size:24px;}
	.word-txt-group .swiper-page > span {padding-top:10px;}
	.word-txt-group .txt-list {margin-top:10px;}
	.word-txt-group .txt-list-item {font-size:14px; line-height:1.58;}

	.world-background-gallery {position:fixed; top:0;left:0;width:100%;height:100%;}
	.world-background-gallery .swiper-view {position:absolute; top:0;left:0;width:100%;height:100%;}
	.world-background-gallery .swiper {height:100%;}
	.world-background-gallery .swiper-slide {height:100%; position:relative;}
	.world-background-gallery .swiper-slide img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
	
	
	/* 노아의 대도서관 > 노아의 지도 */
	.map-wrap {height:740px;}
	.map-background-data .page-title-group {padding-top:75px;}
	.map-background-guide {display:block;}
	.map-background-inner {overflow-x:auto; overflow-y:hidden;}
	.map-background-view {position:relative; top:auto; left:auto; width:auto; height:100%;display:inline-block;}
	.map-background-view .img {position:relative; top:auto; left:auto;width:auto;height:100%;}
	.map-background-view::after{display: block;content:"";position: absolute;top:0;left:0;width:100%;height:100%;background: radial-gradient(circle, rgba(255,255,255,0) 30%, rgba(0,0,0,1) 95%);}
	
	.btn-map-bg-nav:nth-child(1) {top:55.5%; left:22.8%; width:15.0%; height:16.2%;}
	.btn-map-bg-nav:nth-child(2) {top:45.9%; left:46.3%; width:15.0%; height:16.2%;}
	.btn-map-bg-nav:nth-child(3) {top:23.4%; left:59.4%; width:15.0%; height:16.2%;}
	
	.map-background-item:nth-child(1) {top:50.9%; left:11.4%; width:38.1%; height:29.5%;}
	.map-background-item:nth-child(2) {top:40.8%; left:35.8%; width:36.3%; height:31.0%;}
	.map-background-item:nth-child(3) {top:15.1%; left:51.7%; width:30.9%; height:36.2%;}

	.map-detail-wrap .page-ui,
	.map-detail-wrap .audio-ui {top:68px;}

	.map-detail-wrap .txt-group {bottom:94px;}
	.map-detail-wrap .txt-group-inner .txt-cell {padding:0 20px; text-align:left;}
	.map-detail-wrap .txt-group .subject {font-size:24px;}
	.map-detail-wrap .txt-group .desc {margin-top:5px; height:89px; overflow:hidden; font-size:14px; line-height:22px;}
	.map-detail-wrap .txt-group .mCSB_inside>.mCSB_container {margin-right:0;}
	.map-detail-wrap .txt-group .mCSB_scrollTools {width:3px; opacity:1;}
	.map-detail-wrap .txt-group .mCSB_scrollTools .mCSB_draggerRail {width:100%; border-radius:3px; background:transparent;}
	.map-detail-wrap .txt-group .mCSB_scrollTools .mCSB_dragger {opacity:1;}	
	.map-detail-wrap .txt-group .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:#ffc445; width:100%; border-radius:3px; opacity:1;}
	
	/*
	.map-detail-wrap .txt-group .desc::-webkit-scrollbar {width:3px;background-color: transparent}
	.map-detail-wrap .txt-group .desc::-webkit-scrollbar-thumb { border:0 solid transparent; border-radius:3px; background-clip: padding-box; background-color:#ffc445}
	.map-detail-wrap .txt-group .desc::-webkit-scrollbar-track { padding:0; background-color: transparent;  border-radius:0;}
	*/
	.map-detail-wrap .nav-ui {bottom:53px; height:1px;}
	.map-detail-wrap .nav-ui-inner {padding:0; height:1px;}
	.map-detail-wrap .nav-list {margin:0; height:1px;}
	.map-detail-wrap .nav-items {margin:0; padding:0 29px; position:absolute;top:0;left:0;width:100%;box-sizing:border-box; height:1px;}
	.map-detail-wrap .nav-items .btn-ui-nav {}
	.map-detail-wrap .nav-items .btn-ui-nav .unit {margin:-9px 0 0 -9px;width:18px;height:18px;}
	.map-detail-wrap .nav-items .btn-ui-nav .txt {padding-top:6px; font-size:10px;white-space:normal; min-width:40px;}
	.map-detail-wrap .nav-line {-webkit-mask-image:none;mask-image:none;}
	.map-detail-wrap .nav-line .on {left:29px; width:calc( 100% - 58px );}
	.map-detail-wrap .nav-line:after {width:29px;}
	.map-detail-wrap .btn-slider-prev ,
	.map-detail-wrap .btn-slider-next {display:none;}
	.map-detail-wrap .scrollbar-track-y {width:3px; opacity:1; background:transparent;}
	.map-detail-wrap .scrollbar-thumb {background:#ffc445; border-radius:3px; width:3px;}
	
	
	/* 노아의 대도서관 > 세력소개 */
	.group-wrap .page-title-group {top:76px;}
	.group-wrap > .inner {position:relative; z-index:50;}
	.group-data {position:relative; width:100%;  box-sizing:border-box;}
	.group-data .inner {padding:0; padding:132px 35px 28px 35px; max-width:420px; margin:0 auto;}
	.group-data .swiper-slide.swiper-slide-active .item-visual {opacity:1;}
	.group-data .swiper-slide.swiper-slide-active .item-detail {opacity:1;}
	.group-data .swiper-slide.swiper-slide-active .item-detail:before {opacity:0; visibility:hidden;}
	.group-data .group-items {position:relative; display:block;}
	.group-data .group-items .item-visual {position:relative; top:auto;left:auto;width:auto;height:auto; padding-top:286.89%; opacity:0.5;}
	.group-data .group-items .item-visual .item-nav {position:absolute;top:auto;left:0; bottom:0; right:auto;}
	.group-data .group-items .item-visual .item-nav img {position:absolute; bottom:0; left:0; width:100%; max-width:none; height:auto;}
	.group-data .item-1 .item-nav {width:100%;height:100%; transform:none;}
	.group-data .item-2 .item-nav {width:100%;height:100%; transform:none;}
	.group-data .item-3 .item-nav {width:100%;height:100%; transform:none;}
	.group-data .item-4 .item-nav {width:100%;height:100%; transform:none;}	
	.group-data .item-1 .item-mark .obj {width:190px;}
	.group-data .item-2 .item-mark .obj {width:196px;}
	.group-data .item-3 .item-mark .obj {width:147px;}
	.group-data .item-4 .item-mark .obj {width:176px;}
	.group-data .item-detail {position:absolute; top:auto; left:0; bottom:0; margin:0; width:100%; opacity:0.5; transition:opacity 0.4s ease;}
	.group-data .item-detail:before {display:none;}
	.group-data .item-detail-outer {position:relative; min-height:0;}
	.group-data .item-detail-outer:before,
	.group-data .item-detail-outer:after {display:none;}
	.group-data .item-detail-inner {padding:0; display:block; text-align:center;}
	.group-data .item-detail-inner .item-mark {width:100%; display:flex; justify-content:center;}
	.group-data .item-detail-inner .item-info {width:100%; padding:10px 20px 22px 20px; box-sizing:border-box;}
	.group-data .item-detail-inner .item-subject {margin-top:0; font-size:32px; line-height:38px;}
	.group-data .item-detail-inner .item-headline {margin-top:10px; font-size:16px;}
	.group-data .item-detail-inner .item-m-desc {margin-top:5px; display:block; min-height:54px; font-size:14px; line-height:18px; color:#fff; font-weight:300;}
	.group-data .item-detail-inner .item-line {position:relative; background:#4a4a4a; height:1px; margin:13px 3px 0 3px;}
	.group-data .item-detail-inner .item-line:before {content:''; position:absolute;top:0;left:0;width:5px; height:5px; background:#4a4a4a; transform:translate(-2px , -2px) rotate(45deg);}	
	.group-data .item-detail-inner .item-line:after {content:''; position:absolute;top:0;right:0;width:5px; height:5px; background:#4a4a4a; transform:translate(2px , -2px) rotate(45deg);}	
	.group-data .item-detail-inner .item-characters {margin-top:25px;gap:0; display:block;}
	.group-data .item-detail-inner .item-characters-cell + .item-characters-cell {margin-top:8px;}
	.group-data .item-detail-inner .item-characters-cell {display:flex; height:28px; overflow:hidden; padding:0 0px 0px 50px; min-width:0; width:100%;}
	.group-data .item-detail-inner .item-characters-cell .thumb {position:absolute; top:0;left:0; display:inline-flex; width:77px; margin-right:0;}
	.group-data .item-detail-inner .item-characters-cell .thumb .obj {width:77px; height:28px; overflow:visible; border-radius:0;}
	.group-data .item-detail-inner .item-characters-cell .name {margin-top:0;}
	.group-data .item-detail-inner .item-characters-cell .name > em {font-size:14px;  font-weight:400;}
	.group-data .item-detail-inner .item-characters-cell .grade {display:none;}
	.group-data .item-detail-inner .item-characters-cell .property {margin-right:0;}
	.group-data .item-detail-inner .item-desc {display:none;}	
	.group-data .btn-swiper-slider-prev {top:33%;width:42px;height:42px;margin:0;}
	.group-data .btn-swiper-slider-prev:before {background:url(../images/contents/guide-nav-arrow-prev-m.png) left center no-repeat; background-size:20px auto;}
	.group-data .btn-swiper-slider-next {top:33%;width:42px;height:42px; margin:0;}
	.group-data .btn-swiper-slider-next:before {background:url(../images/contents/guide-nav-arrow-next-m.png) right center no-repeat; background-size:20px auto;}
	
	


	/*----------------------------------------------------------------------
	- 캐릭터
	-------------------------------------------------------------------------*/
	.character-wrap {position:relative;width:auto;height:auto;padding-top:205.55%;}
	.character-loading .sk-circle {width:60px; height:60px;}

	.character-background .cate-mark {top:68px;left:0;width:100vw;height:100vw; margin:0;}
	.character-background .light {top:68px;left:0;width:100vw;height:100vw; margin:0;}
	.character-background .cate-line ,
	.character-background .thumb-line {display:none;}
	.character-cate {display:none;}
	/*
	.character-detail-visual .obj:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1; background:url(../images/contents/character-visual-shadow.png) center center no-repeat; background-size:cover;}
	*/

	.character-thumbs {top:auto; bottom:0; left:0; width:100%; padding:27px 20px; box-sizing:border-box;}
	.character-thumbs .swiper {position:relative;top:auto;left:auto;width:auto; height:auto; transform-origin:none;}
	.character-thumbs .swiper-slide {position:relative; top:auto; left:auto; width:auto; height:auto; transform-origin:none; opacity:1; padding-bottom:22px;}
	.character-thumbs .swiper-slide:after {content:'';position:absolute;bottom:0;left:0;display:block;width:100%;height:16px;background:url(../images/contents/character-thumb-active-arrow.png) center center no-repeat; background-size:12px auto; opacity:0;}
	.character-thumbs .swiper-slide + .swiper-slide {margin-left:17px;}
	.character-thumbs .swiper-slide .btn-thumbs-nav {position:relative; top:auto;left:auto;display:block;width:56px;height:56px; margin:0; overflow:hidden; border-radius:0px;}
	.character-thumbs .swiper-slide .btn-thumbs-nav img {filter: grayscale(0%); transition:none; position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
	.character-thumbs .swiper-slide .btn-thumbs-nav > span {display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:0px 7px; overflow:hidden; background:#000; z-index:1;}
	.character-thumbs .swiper-slide .btn-thumbs-nav > span:before {display:none;}
	.character-thumbs .swiper-slide .btn-thumbs-nav > span:after {content:'';position:absolute;top:0;left:0;margin:0;width:100%;height:100%;border-radius:0px 7px; border:1px solid #444; box-sizing:border-box; transform:none; z-index:5;display:block;}
	.character-thumbs .swiper-slide .btn-thumbs-nav:before ,
	.character-thumbs .swiper-slide .btn-thumbs-nav:after {display:none;}
	.character-thumbs .swiper-slide.show {display:block;}
	.character-thumbs .swiper-slide.hide {display:block;}
	.character-thumbs .swiper-slide.actived:after {opacity:1;}
	.character-thumbs .swiper-slide.actived .btn-thumbs-nav {transform:none;}
	.character-thumbs .swiper-slide.actived .btn-thumbs-nav img {filter: grayscale(0%);}
	.character-thumbs .swiper-slide.actived .btn-thumbs-nav > span:after {border-color:#f2c140;}
	.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="0"] > span {background:#000; box-shadow:none;}
	.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="1"] > span {background:#000; box-shadow:none;}
	.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="2"] > span {background:#000; box-shadow:none;}
	.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="3"] > span {background:#000; box-shadow:none;}
	.character-thumbs .swiper-slide .btn-thumbs-nav[data-cate="4"] > span {background:#000; box-shadow:none;}
	
	.character-detail-items {position:absolute;top:0;left:0;width:100%;height:100%; box-sizing:border-box; padding-top:0%;}
	.character-view .swiper-slide {position:relative; top:auto;left:auto; width:100%; height:100%; display:block;}
	.character-detail-info {position:absolute;top:0;left:0;width:100%;height:100%;}

	.character-detail-ui {position:absolute; bottom:auto; left:0; top:calc( 88.05vw + 0px ); width:100%; display:flex; justify-content:center; align-items:center; gap:0;}
	.character-voice-wrap {position:relative; display:block; line-height:1; padding:0 36px; min-height:0; background:none; border:none; border-radius:0; width:100%; box-sizing:border-box; margin-top:calc( 36% + 10px );}
	.character-voice-wrap .voice-name {position:absolute; top:0; right:36px; height:22px; font-size:12px; text-align:right;}
	.character-voice-wrap .voice-name-unit {margin-right:4px; color:#808080;}
	.character-voice-wrap .voice-ui {display:inline-flex; padding:0 11px 0 3px; align-items:flex-start; justify-content:center; height:20px; background:#000; border:1px solid #808080; border-radius:40px;}
	.character-voice-wrap .voice-ui-icon {flex:0 0 auto; position:relative; top:auto;left:auto; width:20px; height:20px;}
	.character-voice-wrap .voice-ui-btns {flex:0 0 auto; display:inline-flex; align-items:center; gap:0; margin-top:0;}
	.character-voice-wrap .voice-ui-btns .btn-voice-nav {height:20px; padding:0; font-size:12px;  border:none; border-radius:0; position:relative;}
	.character-voice-wrap .voice-ui-btns .btn-voice-nav + .btn-voice-nav {margin-left:10px; padding-left:11px;}
	.character-voice-wrap .voice-ui-btns .btn-voice-nav + .btn-voice-nav:before {content:'';position:absolute;top:50%;left:0;display:block;width:1px;height:10px;margin-top:-5px;background:#4d4d4d;}
	.character-voice-wrap .voice-ui-btns .btn-voice-nav.actived {color:#ffc445; background:none; border-color:none;}
	.btn-character-skill {display:none;}
	.btn-character-toggle {display:none;}

	.character-detail-view {position:absolute; top:0; right:auto; left:0; width:100%; height:100%; box-sizing:border-box;}
	.character-detail-view .item-outer {position:relative;display:block; width:100%; height:100%; width:auto; background:none; transform:none; border-radius:0;}
	.character-detail-view .item-outer:before {display:none;}
	.character-detail-view .item-inner {padding:88.05vw 20px 0 20px; z-index:5;}
	.character-detail-view .item-cate {position:absolute; top:74px; left:20px;  height:auto; padding:0; line-height:20px;}
	.character-detail-view .item-cate .mark {flex:0 0 auto; position:relative; font-size:0; width:auto; height:auto; top:auto; margin:0 4px 0 0;font-size:14px;color:#808080;}
	.character-detail-view .item-cate .mark img {display:none;}
	.character-detail-view .item-cate .name {flex:0 0 auto; position:relative; display:block; width:auto; height:auto; padding:0;}
	.character-detail-view .item-cate .name > em {font-size:14px; color:#fff;}
	.character-detail-view .item-cate .name:before {display:none;}
	.character-detail-view .item-data {visibility:hidden; padding-top:36%;}
	.character-detail-view .item-data .item-info {display:none; position:relative;top:auto;left:auto;width:auto;height:auto;box-sizing:border-box;padding:0; text-align:center;}
	.character-detail-view .item-data .item-preview {display:none;}
	.character-detail-view .item-data {margin-top:0; position:relative;}
	.character-detail-view .item-data:before {display:none;}
	.character-detail-view .item-data .item-headline {font-size:20px; line-height:25px; filter: drop-shadow(0px 0px 6px #000);}
	.character-detail-view .item-data .item-name {font-size:32px; line-height:39px; filter: drop-shadow(0px 0px 6px #000);}
	.character-detail-view .item-data .item-grade {margin-top:4px;}
	.character-detail-view .item-data .item-grade .grade-data {justify-content:center;}
	.character-detail-view .item-data .item-grade .grade-unit {width:14px;height:17px; filter: drop-shadow(0px 0px 6px #000);}
	.character-detail-view .item-data .item-property {position:relative; bottom:auto; left:auto; display:flex;padding:0; gap:0; margin-top:5px; justify-content:center;}
	.character-detail-view .item-data .item-property .icon {width:32px; height:32px; filter: drop-shadow(0px 0px 6px #000);}
	.character-detail-view .item-line {position:relative; background:#808080; height:1px; margin:12px 3px 0 3px; opacity:0.5;}
	.character-detail-view .item-line:before {content:''; position:absolute;top:0;left:0;width:5px; height:5px; background:#808080; transform:translate(-2px , -2px) rotate(45deg);}	
	.character-detail-view .item-line:after {content:''; position:absolute;top:0;right:0;width:5px; height:5px; background:#808080; transform:translate(2px , -2px) rotate(45deg);}	
	.character-detail-view .item-desc {text-align:center; margin-top:56px;}
	.character-detail-view .item-desc-scroller {overflow:visible; min-height:115px; height:115px; -webkit-mask-image:none; mask-image:none;}
	.character-detail-view .item-desc-title {font-size:16px; line-height:20px; font-weight:600; color:#fff; filter: drop-shadow(0px 0px 6px #000);}
	.character-detail-view .item-desc-title ~ .item-desc-title {margin-top:8px; font-size:14px; line-height:30px; font-weight:300; color:#fff;}
	.character-detail-view .item-desc-txt {display:none;}
	.character-detail-view .item-character {display:block;}
	.character-detail-view .item-weapon {display:none;}
	.character-detail-view .mCSB_inside>.mCSB_container {margin:0;}
	.character-detail-view .mCSB_inside>.mCSB_container > *:last-child {padding-bottom:0;}

	.character-weapon-visual {display:none;}
	.character-illustration-visual {top:-200vh; display:block; visibility:hidden; opacity:0; transition:top 0s 0.4s ease, visibility 0s 0.4s ease, opacity 0.4s 0s ease;}
	.character-illustration-visual.actived {top:0; visibility:visible; opacity:1; transition-delay:0s;}
	.character-illustration-visual.actived .obj {transform:scale(1);}
	.character-illustration-visual .obj {transform:scale(0.9); transition:transform 0.4s var(--transition-easeOutQuart);}
	.btn-illustration-toggle.close {display:block;}
	.btn-illustration-toggle.open {display:block;}

	.character-wrap.illust .character-thumbs {bottom:-9999px;}
	.character-wrap.illust .btn-swiper-slider-prev,
	.character-wrap.illust .btn-swiper-slider-next {z-index:0;}

	/* 무기 활성화 시 */
	.character-detail-items.weapon .character-detail-visual {display:block;}
	.character-detail-items.weapon .character-weapon-visual {display:none;}
	.character-detail-items.weapon .character-detail-view .item-character {display:block;}
	.character-detail-items.weapon .character-detail-view .item-weapon {display:none;}

	.character-wrap .btn-swiper-slider-prev {position:absolute;top:88.05vw;left:0;display:block;width:44px;height:44px;z-index:15; cursor:pointer; margin:-44px 0 0 0; z-index:100;}
	.character-wrap .btn-swiper-slider-prev:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/contents/character-nav-arrow-prev-m.png) left center no-repeat; background-size:20px auto;}
	.character-wrap .btn-swiper-slider-next {position:absolute;top:88.05vw;right:0;display:block;width:44px;height:44px;z-index:15; cursor:pointer; margin:-44px 0 0 0; z-index:100;}
	.character-wrap .btn-swiper-slider-next:before {content:''; position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/contents/character-nav-arrow-next-m.png) right center no-repeat; background-size:20px auto;}


}

@media screen and (max-width:768px) {
	/*----------------------------------------------------------------------
	- 공통
	-------------------------------------------------------------------------*/
	/* 레이아웃 */
	.inner {padding-left:20px; padding-right:20px;}

	.pc-block {display:none;}
	.mobile-block {display:block;}

	/* 레이아웃 */
	.page-ui-top {padding:12px 16px; margin-left:-20px; margin-right:-20px;}
	.page-ui-top .page-ui-left {gap:5px;}
	.page-ui-top .page-ui-right {gap:5px; }
	.page-ui-top ~ .board-view-wrap {margin-top:0;}

	/* 타이틀 */
	.con-title {font-size:16px; color:#fff; font-weight:400; align-items:center; height:32px;}
	.con-title:before {left:-37px;width:calc( 100% + 131px ); opacity:1; background:linear-gradient(90deg, rgba(87, 84, 171, 0.00) 0%, rgba(87, 84, 171, 0.40) 43.82%, rgba(87, 84, 171, 0.40) 55.8%, rgba(87, 84, 171, 0.00) 99.97%);}
	.con-title > em {}
	.con-title > em:before {width:15px;height:11px;margin-right:5px;}

	.page-title-group {padding-top:24px;}
	

}


/*==============================================
@ 모바일 해상도별 분기
==============================================*/
@media screen and (max-width:420px) {

}