@charset "utf-8";

/* ========================================
[Style Import] UI 임포트
======================================== */
/* lib */
/* @import url("../css/lib/jquery-ui.min.css");
@import url("../css/lib/yearpicker.css"); */
@import url("../css/lib/selectric.css");
@import url("../css/lib/aos.css");
@import url("../css/lib/swiper-bundle.min.css");

/* styles */
@import url("../css/@styles/reset.css");
@import url("../css/@styles/font.css");

@import url("../css/@styles/var.css");
@import url("../css/@styles/color.css");

@import url("../css/@styles/icon.css");

@import url("../css/@styles/button.css");
@import url("../css/@styles/form.css");

@import url("../css/@styles/global.css");

/*** [오픈 이후 기존 레이아웃으로 사용] ***/
@import url("../css/@styles/layout_1280.css?t=1");
/*@import url("../css/@styles/layout.css");*/

@import url("../css/@styles/customize.css");
/* // [Style Import End] UI 임포트 종료 */

/*** [구글 폰트] ***/
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* ========================================
[Ares Main Content] 메인 페이지 콘텐츠
======================================== */
#container.main{padding-top: 0;}
.main{background-color: var(--black);}
.main .section .title-wrap .title{
	color: var(--white); padding-bottom: 2px;
	font-size: clamp(24px,6.4vw,30px); font-weight: 700; line-height: 1.2;
}
.main .section .title-wrap .text{
	line-height: 1.6;
	font-size: clamp(14px,3.73vw,16px); color: var(--gray-2);
}
.main .section .pc-inner,
.main .section .mo-inner{width: 100%;}
.main .section .inner{width: 100%; padding-inline: 20px;}
@media all and (min-width: 769px) {
	.main .section .pc-inner{padding-inline: 20px;}
}
@media all and (max-width: 768px){
	.main .section .mo-inner{padding-inline: 20px;}
}

/*** [Section Visual] ***/
.main .section.visual{}
.main .section.visual .banner-box,
.main .section.visual .banner-box .banners,
.main .section.visual .banner-box .max-1440{position: relative;}

.main .section.visual .banner-box{ width: 100%; }
.main .section.visual .banner-box .banners{width: 100%; height: 460px;}
.main .section.visual .banner-box .max-1440,
.main .section.visual .banner-box .swiper{width: 100%; height: 100%;}

.main .section.visual .banners .item{ 
	position: relative; width: 100%; height: 100%; 
	
}
.main .section.visual .banners .title-wrap{
	position: absolute; top: 50%; left: 80px; z-index: 2;
	transform: translateY(-50%);
	max-width: 615px; width: 100%;
}
.main .section.visual .banners .title{
	background: linear-gradient(180deg, #FFF 50%, #999 117.65%);
	background-clip: text; -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 40px; padding-bottom: 16px;
}
.main .section.visual .banners .text{color: var(--white-op-60);}

.main .section.visual .banners .img-wrap{
	height: 100%; aspect-ratio: 1280/720;
	margin-left: auto; 
}
.main .section.visual .banners .img-wrap img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}

.main .section.visual .banners li{opacity: 0 !important; }
.main .section.visual .banners li.swiper-slide-active{opacity: 1 !important;}

.main .section.visual .banner-box .swiper-title-box{
	overflow: hidden; position: relative;
	width: 100%; height: 48px;
	background-color: var(--gray-0);
}
.main .section.visual .banner-box .swiper-title-box::after,
.main .section.visual .banner-box .swiper-title-box::before{
	position: absolute; bottom: 0;
	content: ""; width: 8px; height: 8px;
	background-repeat: no-repeat; background-size: cover;
	background-position: center center;
	background-image: url("../images/main/swiper-title-box.svg");
}
.main .section.visual .banner-box .swiper-title-box::before{left: 0; transform: rotate(90deg);}
.main .section.visual .banner-box .swiper-title-box::after{right: 0;}

.main .section.visual .banners .btn-swiper{
	position: absolute; top: 50%; right: 0; z-index: 1;
	transform: translateY(-50%);
}
.main .section.visual .banners .btn.prev{left: -40px;}
.main .section.visual .banners .btn.next{right: -40px; 
	transform: translateY(-50%) rotate(180deg);
}
.main .section.visual .banners .swiper-pagination {
	bottom: 60px; padding-inline: 80px; z-index: 3;
	display: flex; align-items: center;
}





.main .section.visual .special-box{
	width: 100%; height: 80px;
	background-image: url("../images/main/special_pc.jpg");
}
.main .section.visual .special-box .item{
	position: relative; z-index: 1; padding-inline: 80px;
	display: flex; align-items: center; gap: 80px;
	justify-content: space-between;
}
.main .section.visual .special-box :is(.title, .text){line-height: 1.6;}
.main .section.visual .special-box .title{color: var(--primary);}
.main .section.visual .special-box .text{font-size: 14px; color: var(--white-op-80);}
.main .section.visual .special-box .img-wrap{ width: 170px; aspect-ratio: 170/80; margin-right: 210px}
.main .section.visual .special-box .img-wrap img{width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}

.main .section.visual .rolling-box{
	padding: 10px 12px; background-color: var(--gray-1);
}
.main .section.visual .rolling-wrap{overflow: hidden; width: 100%;}
.main .section.visual .rolling-box ul{
	display: flex; align-items: center; justify-content: flex-start;
	white-space: nowrap;
}
.main .section.visual .rolling-box li{width: fit-content; margin-right: 40px; flex: 1 auto;}
.main .section.visual .rolling-box .item{color: var(--gray-4); align-items: center; gap: 8px;}
.main .section.visual .rolling-box .item span{position: relative; top: -1px;}

@media all and (max-width: 1560px) {
	.main .section.visual .banner-box .btn.prev{left: 0;}
	.main .section.visual .banner-box .btn.next{right: 0;}
}
@media all and (min-width:1241px) and (max-width: 1440px){
	/*.main .section.visual .special-box .item{gap: 24.31vw;}*/
	.main .section.visual .special-box .img-wrap{margin-right: 14.58vw;}
}
@media all and (min-width:769px) and (max-width: 1240px){
	.main .section.visual .banner-box .title{font-size: 34px; padding-bottom: 10px;}
	.main .section.visual .banner-box .text{font-size: 15px;}
	.main .section.visual .banners .btn-swiper{width: 60px;}


	.main .section.visual .special-box .item{
		padding-inline: 20px 40px;
		justify-content: space-between;
	}
	.main .section.visual .special-box .title{font-size: 15px;}
	.main .section.visual .special-box .text{font-size: 12px;}
	.main .section.visual .special-box .img-wrap{margin-right: 0px;}
}
@media all and (min-width: 769px) {
	.main .section.visual .banner-box .swiper-title-box{display: none;}

	.main .section.visual .banner-box .swiper-pagination span{
		width: 20px; height: 20px; opacity: 1 !important;
		background-color: transparent;
		background-size: cover; background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/@common/dot-inactive.svg");
	}
	.main .section.visual .banner-box .swiper-pagination .swiper-pagination-bullet{display:  block !important;}
	.main .section.visual .banner-box .swiper-pagination .swiper-pagination-bullet-active{
		background-image: url("../images/@common/dot-active.svg");
	}
	
}
@media all and (max-width: 768px) {

	.main .section.visual .banner-box .swiper{overflow: visible;}
	.main .section.visual .banner-box{padding-bottom: 35px;}
	.main .section.visual .banner-box .banners{height: auto;}

	.main .section.visual .banners .title-wrap{
		top: auto; left: 0;  bottom: -34px;
		transform: translateY(0);
		max-width: none; width: 100%; padding-inline: 24px;
	}
	.main .section.visual .banners .title{font-size: 16px; padding-bottom: 0;}
	.main .section.visual .banners .text{display: none !important;}

	.main .section.visual .banners .img-wrap{margin: 0 auto;}
	.main .section.visual .banners .btn-swiper{display: none !important;}

	.main .section.visual [class*="-dot"]{
		position: static; justify-content: center; 
		margin-top: 16px;
	}
	.main .section.visual [class*="-dot"] span{
		width: 8px;height: 8px; border-radius: 100px;
		background-color: var(--white-op-50); opacity: 1;
	}
	.main .section.visual [class*="-dot"] [class*="-bullet-active"]{
		background-color: var(--white);
	}

	.main .section.visual .box-area{overflow: hidden; border-radius: 4px;}
	
	.main .section.visual .special-box{height: 60px; background-position: 60% center;}
	.main .section.visual .special-box .max-1440{height: 100%;}
	.main .section.visual .special-box .item{gap: 20px; padding-inline: 20px 5px; height: 100%;}
	.main .section.visual .special-box .text-wrap{width: calc(100% - 115px);}
	.main .section.visual .special-box .title{font-size: 14px; line-height: 1.3 !important; word-break: break-all;}
	.main .section.visual .special-box .text{display: none;}
	.main .section.visual .special-box .img-wrap{width: 116px; margin-right: 0;}


	.main .section.visual .rolling-box{padding: 4px 12px 4px 24px;}
	.main .section.visual .rolling-box li{margin-right: 20px;}
	.main .section.visual .rolling-box .item{font-size: 14px; gap: 4px;}
}
@media all and (max-width: 460px){
	.main .section.visual .special-box{
		background-position: center center;
		background-image: url("../images/main/special_mo.png"); 
	}
}


/***** [Section Ares] *****/
.main .section.ares{
	display: flex; flex-direction: column;
	gap: 80px; padding-block: 80px clamp(80px,21.33vw,120px);
}
/*** Type Arena ***/
.main .section.arena .box-area{
	display: flex; gap: clamp(25px,4.17vw,60px);
	justify-content: space-between;
}
.main .section.arena .title-wrap .text{font-size: 14px;}
.main .section.arena .box-wrap{ width: calc(50% - 30px);}
.main .section.arena .list-box{margin-top: 20px; border-top: 2px solid var(--white);}
.main .section.arena .list-box li + li{border-top: 1px solid var(--gray-0);}

.main .section.arena .notice-box{}
.main .section.arena .notice-box li,
.main .section.arena .notice-box .tags,
.main .section.arena .notice-box .item,
.main .section.arena .notice-box .text-wrap{
	display: flex; align-items: center;
}

.main .section.arena .notice-box li{
	padding-inline: clamp(20px,2.6vw,24px);
	gap: clamp(10px,2.67vw,12px);
}
.main .section.arena .notice-box li + li{border-top: 1px solid var(--gray-0);}

.main .section.arena .notice-box .tags{
	width: 90px; aspect-ratio: 90/28;
	justify-content: center;
	color: var(--white);
	border-radius: 2px; font-size: 14px;
}
.main .section.arena .notice-box .tags.notice{background-color: #6FA1AF;}
.main .section.arena .notice-box .tags.event{background-color: #898A90;}
.main .section.arena .notice-box .tags.dev{background-color: #126482;}

.main .section.arena .notice-box .item{
	width: calc(100% - 102px);
	gap: 6px 0; height: 72px;
	justify-content: space-between;
}

.main .section.arena .notice-box .text-wrap{
	width: calc(100% - 140px);
	 gap:8px; color: var(--white); 
}
.main .section.arena .notice-box .text-wrap span{color: var(--gray-4); font-size: var(--fs-16-14);}
.main .section.arena .notice-box .text-wrap p{
	max-width: 350px; width: 100%;
	font-size: clamp(14px,3.73vw,18px);
}
.main .section.arena .notice-box .data{color: var(--gray-2); font-size: 14px;}

.main .section.arena .rank-box{}
.main .section.arena .rank-box .rank-list{overflow-y: auto; height: 365px;}
.main .section.arena .rank-box .rank-list::-webkit-scrollbar-thumb	{background-color: rgba(255,255,255, 0.05);}
.main .section.arena .rank-box .item{
	height: 72px; color: var(--white); gap: 0;
}
.main .section.arena .rank-box .item-box{
	width: calc(100% - 120px); padding-inline: 0; gap: 0;
}
.main .section.arena .rank-box .ranking-wrap{width: 110px; justify-content: center;}
.main .section.arena .rank-box .ranking-wrap p{
	font-family: var(--ff-pt); font-weight: 600;
	font-size: 20px; color: var(--white); display: block;
}
.main .section.arena .rank-box .profile-wrap{width: calc(100% - 110px); gap:20px;}
.main .section.arena .rank-box .profile-wrap .text-wrap{width: calc(100% - 60px);}
.main .section.arena .rank-box .profile-wrap .title{font-size: 18px; font-weight: 500;}

.main .section.arena .rank-box .item-info{width: 120px;}
.main .section.arena .rank-box .item-info li{
	width: 100%;  padding-inline: 0 28px;
	text-align: right; color: var(--gray-3);
}
.main .section.arena .rank-box .item.my-ranking{
	background-color: var(--gray-1);
}
.main .section.arena .rank-box .no-login{}
@media all and (max-width: 1240px) {
	.main .section.arena .box-area{ flex-direction: column; gap: 80px;}
	.main .section.arena .box-wrap{width: 100%;}
	.main .section.arena .notice-box .text-wrap p{width: 100%; max-width: none;}
}
@media all and (max-width: 768px) {
	.main .section.arena .box-wrap .items-end{align-items: center;}

	.main .section.arena .notice-box li,
	.main .section.arena .notice-box .item{flex-direction: column; align-items: flex-start;}

	.main .section.arena .notice-box li{min-height: 120px; padding-block: 18px; gap:10px;}
	.main .section.arena .notice-box .item{width: 100%; height: auto;}
	.main .section.arena .notice-box .text-wrap{width: 100%;}
	.main .section.arena .notice-box .text-wrap P{font-size: 14px;}

	.main .section.arena .rank-box .rank-list{height: 425px;}
	.main .section.arena .rank-box .profile-wrap .title,
	.main .section.arena .rank-box .item-info li{font-size: 14px;}
	
	.main .section.arena .rank-box .item{padding-inline: 20px; height: 84px; gap: 12px;}
	.main .section.arena .rank-box .item-box{width: calc(100% - 92px); gap: 12px;}
	.main .section.arena .rank-box .ranking-wrap{width: 65px;}
	.main .section.arena .rank-box .ranking-wrap p{font-size: 16px;}

	.main .section.arena .rank-box .profile-wrap{width: calc(100% - 82px); gap: 8px;}
	.main .section.arena .rank-box .profile-wrap .img-wrap{width: 48px; height: 48px;}
	.main .section.arena .rank-box .profile-wrap .text-wrap{width: calc(100% - 60px);}

	.main .section.arena .rank-box .item-info{width: 80px;}
	.main .section.arena .rank-box .item-info li{padding-inline: 0;}

	.main .section.arena .rank-box .no-login{font-size: 14px;}
}

/*** Type Game ***/
.main .section.game{
	width: 100%; /*aspect-ratio: 1920/772;*/
	background-image: url("../images/main/game_bg_pc.png");
	display: flex; align-items: center;
	justify-content: center;
}
.main .section.game .go-btn{transform: rotate(180deg);}

.main .section.game ul{
	display: flex; flex-direction: column;
	gap: 24px;
}
.main .section.game li{}

.main .section.game .btn.game{ position: relative;
	width: 100%; aspect-ratio: 1440/260; border-radius: 0px;
	-webkit-mask-image: url("../images/main/game_mask.png");
			mask-image: url("../images/main/game_mask.png");

	background-color: transparent;		
}
.main .section.game .btn.game .img-wrap,
.main .section.game .btn.game .video-wrap,
.main .section.game .btn.game .title-wrap{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
}

.main .section.game .btn.game .title-wrap{
	z-index: 2;
	display: flex; flex-direction: column; 
	align-items: center; justify-content: center;
	gap: clamp(10px,1.08vw,16px);
}
.main .section.game .btn.game .title-wrap .title{
	padding-bottom: 0;
	font-size: clamp(32px,2.7vw,40px); line-height: 1;
}
.main .section.game .btn.game .title-wrap .text{
	font-size: clamp(12px,3.2vw,16px); 
	color: var(--white-op-60);
}

.main .section.game .btn.game .img-wrap{z-index: 1;}
.main .section.game .btn.game .img-wrap,
.main .section.game .btn.game .video-wrap{}

.main .section.game .btn.game .img-wrap img,
.main .section.game .btn.game .video-wrap video{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}

.main .section.game .btn .go-btn{width: 50px; aspect-ratio: 1/1;}
@media all and (min-width: 769px) and (max-width: 1440px){
	.main .section.game .btn.game .title-wrap .title{font-size: 32px;}
	.main .section.game .btn.game .title-wrap .text{font-size: 12px;}
}
@media all and (min-width: 769px) {
	.main .section.game .btn.game:hover .img-wrap{display: none;}
}
@media all and (max-width: 768px) {
	.main .section.game{
		width: 100%; aspect-ratio: 750/2136;
		background-image: url("../images/main/game_bg_mo.png");
	}

	.main .section.game .btn.game{
		width: 100%; aspect-ratio: 670/680;
		-webkit-mask-image: url("../images/main/game_mask_mo.png");
				mask-image: url("../images/main/game_mask_mo.png");
	}
	.main .section.game .btn.game .title-wrap .title{line-height: 1.2;}
	.main .section.game .btn .go-btn{margin-top: 20px;}
	.main .section.game .btn.game .video-wrap{display: none !important;}
}


/*** Type Content ***/
/* Common */
.main .section.content{}
.main .section.content .title-wrap .title{
	padding-bottom: 0;
	line-height: 1.5;
}
.main .section.content .max-1440 > .title-wrap{padding-bottom: 40px;}
.main .section.content .swiper-slide{width: auto !important;}
.main .section.content [class*="-dot"]{
	position: relative; bottom: auto;
	display: flex; align-items: center;
	justify-content: center; gap: 8px;
	margin-top: 20px;
}
.main .section.content [class*="-dot"] span{
	width: 8px;height: 8px; border-radius: 100px;
	background-color: var(--white-op-50); opacity: 1;
}
.main .section.content [class*="-dot"] [class*="-bullet-active"]{
	background-color: var(--white);
}
@media all and (min-width: 769px) {
	.main .section.content [class*="-dot"]{display: none !important;}
}
@media all and (max-width:768px) {
	.main .section.content .max-1440 > .title-wrap{padding-bottom: 50px;}
}
@media all and (max-width: 480px) {
	.main .section.content .swiper-slide{width: 100% !important;}
}


/* Video */
.main .video-box {overflow: hidden;}
.main .video-box .max-1440{position: relative;}
.main .video-box  .swiper-btns{
	position: absolute; top: 0; right: 0;
	display: flex; align-items: center; gap: 12px;
}
.main .video-box  .swiper-btns .btn{
	width: 48px; height: 48px;
	border-radius: 100px; border: 1px solid var(--gray-2);
	display: flex; align-items: center;
	justify-content: center;
}
.main .video-box .swiper-btns .btn .ico{background-color: var(--gray-2);}
.main .video-box .swiper-btns .btn:hover{ background-color: var(--gray-2); }
.main .video-box .swiper-btns .btn:hover .ico{background-color: var(--black);}

.main .video-box .video-swiper .btn{
	width: 464px;; aspect-ratio: 16/9;
	position: relative; border-radius: 0px;

	-webkit-mask-image: url("../images/main/videoimg_01.png");
			mask-image: url("../images/main/videoimg_01.png");

	mask-position: center top;
}
/*.main .video-box .video-swiper .btn::before{
	content: "";
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 80px; aspect-ratio: 80/80; z-index: 1; margin: 0 auto;
	background: url("../images/@common/play_02.svg") center center / cover no-repeat;
}*/

.main .video-box .video-swiper .img-wrap,
.main .video-box .video-swiper .video-wrap{width: 100%; height: 100%;}
.main .video-box .video-swiper .img-wrap img,
.main .video-box .video-swiper .video-wrap video{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
.main .video-box .video-swiper .text-wrap{
	position: absolute; bottom: 0; left: 0; padding-inline: 40px;
	width: 100%; aspect-ratio: 464/60; color: var(--white);
	background-image: url("../images/main/videoinfo_bxo.svg");
	display: flex; align-items: center;
	justify-content: flex-start; font-weight: 700;
	background-position: center top;
}
@media all and (min-width:769px) and (max-width:1240px) {
	.main .video-box .video-swiper .btn{ width: clamp(404px,37.42vw,464px) }
}
@media all and (max-width:768px) {
	.main .video-box .swiper-btns{display: none !important;}
	.main .video-box .video-swiper .btn{ width: clamp(375px,100vw,404px) }
}
@media all and (max-width: 480px) {
	.main .video-box .video-swiper .btn{width: 100%;}
}

/* Guide */
.main .section.content .guide-box{overflow: hidden;}
.main .section.content .guide-box .lottie-wrap{overflow: hidden; padding-block: 40px;}
.main .section.content .guide-box .lottie-wrap #fullBar{width: 1440px;}

.main .section.content .guide-swiper{overflow: visible;}
.main .section.content .guide-swiper li{width: auto !important;}
.main .section.content .guide-swiper .btn{ border-radius: 0px;
	position: relative; justify-content: flex-start;
	width: clamp(335px,89.33vw,464px); aspect-ratio: 464/128; 
	padding-inline: clamp(24px,6.4vw,40px);
	background-image: url("../images/main/guide_bg.png");
}
.main .section.content .guide-swiper .img-wrap{
	position: absolute; bottom: 0; right: 0;
	width: clamp(170px,45.33vw,190px); aspect-ratio: 190/140;
}
.main .section.content .guide-swiper .title-wrap{position: relative; text-align: left; z-index: 1;}
.main .section.content .guide-swiper .title{font-size: clamp(16px,4.27vw,20px);}
.main .section.content .guide-swiper .text{font-size: 14px; color: var(--white-op-80);}


/***** [Section Store] *****/
.main .section.store{
	overflow: hidden; position: relative;
	width: 100%; height: 720px;
	background-color: gray;
}
.main .section.store #bgSwiper{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
}
.main .section.store #bgSwiper li .bg-mask{
	width: 100%; height: 100%;
	transform: scale(1); transition: transform 12s ease;
}
.main .section.store #bgSwiper li[class*="-slide-active"] .bg-mask{transform: scale(1.1);}
.main .section.store #bgSwiper .bg-01{ background-image: url("../images/main/storeBG01_pc.jpg"); }
.main .section.store #bgSwiper .bg-02{ background-image: url("../images/main/storeBG02_pc.jpg"); }

.main .section.store .title-area{
	position: absolute; top: 50%; left: 0; right: 0; z-index: 2;
	transform: translateY(-50%); 
	display: flex; flex-direction: column;
	gap: 8px;
}
.main .section.store .title-wrap{
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
}
.main .section.store .title-wrap .info{
	color: var(--white-op-80); font-weight: 500;
	line-height: 1.8; font-size: clamp(14px,3.73vw,18px);
}
.main .section.store .title-wrap .title{
	background: linear-gradient(180deg, #FFF 50%, #999 117.65%);
	background-clip: text; -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
	line-height: 1.3; font-size: 48px; padding-bottom: 16px;
}
.main .section.store .title-wrap .text{font-size: clamp(16px,4.27vw,24px); color: var(--white);}
.main .section.store .title-wrap + .button-area{margin-top: 40px;}
.main .section.store .button-area{
	align-items: center; justify-content: center;
	gap: 12px;
}
.main .section.store .button-area .btn{ border-radius: 0px;
	width: 200px; aspect-ratio: 200/56; gap: 9px;
	background-image: url("../images/main/download_bg.svg");
	align-items: center; justify-content: center;
	font-size: 14px; font-weight: 500;
}
@media all and (min-width:1921px) {
	.main .section.store #bgSwiper li .bg-mask{ background-position: center top; }
}
@media all and (max-width: 1240px) {
	.main .section.store .title-wrap .title{font-size: 40px;}
}
@media all and (max-width: 768px) {
	.main .section.store{height: 182.67vw;}
	.main .section.store #bgSwiper .bg-01{ background-image: url("../images/main/storeBG01_mo.jpg"); }
	.main .section.store #bgSwiper .bg-02{ background-image: url("../images/main/storeBG02_mo.jpg"); }

	.main .section.store .title-wrap .title{padding-bottom: 24px; font-size: 32px;}
	.main .section.store .button-area{flex-direction: column; gap: 12px;}
}
/* // [Ares Main Content End] 메인 페이지 콘텐츠 종료 */



/* ========================================
[Ares Sub Content] 서브 페이지 콘텐츠
======================================== */
/*** 전체 공통 ***/
#content.sub{padding-top: var(--header);}
#content.sub.list .page-content{padding-top: 60px;}
#content.sub.list .page-content .page-title{font-size: 36px;}
.max-800-media{max-width: 800px !important;}
@media all and (min-width:1921px) {
	.max-800-media{max-width: 41.67vw !important;}
}
@media all and (max-width: 1366px) {
	#content.sub.list .page-content{padding-top: 0px;}
	#content.sub.list .page-content .page-title{display: none;}
}


/*** [게임소개 섹션] ***/
#content.game{
	width: 100%; height: var(--vh100); min-height: 820px;
	background-position: center center;
	background-repeat: no-repeat; background-size: cover;
} 
#content.game .title-area{ color: var(--white);
	display: flex; flex-direction: column;
	align-items: center; gap:clamp(16px,4.27vw,24px);
}
#content.game .title-area .title{
	font-family: var(--ff-bs); font-size: 100px; line-height: 1 ;
	font-weight: 900;
}
#content.game .title-area .text{font-size: clamp(16px,4.27vw,20px);}

#content.game .btn{border-radius: 0;}
#content.game .btn.home,
#content.game .btn.back{position: absolute; z-index: 5;
	top: calc(var(--header) + clamp(24px,6.4vw,40px)); 
	left: clamp(20px,5.33vw,40px)
}
#content.game .trans-180{ transform: rotate(180deg);}
@media all and (min-width: 769px) and (max-width: 1240px){
	#content.game .title-area .title{font-size: 70px;}
}
@media all and (max-width: 768px) {
	#content.game .title-area{}
	#content.game .title-area .title{font-size: clamp(40px,10.67vw,70px);}
	#content.game .btn.home,
	#content.game .btn.back{width: 105px;}	
}

/*** GAME 1 Story ***/
#content.story{
	position: relative; background-color: var(--black);
	padding-top: 0; height: auto; min-height: auto;
}
#content.story .content-area{position: relative; overflow: hidden; z-index: 2;}
#content.story .section{ height: var(--vh100); min-height: 768px;}
/*** intro ***/
#content.story .intro{position: relative;
	width: 100%;
}
#content.story .intro .box-area{
	position: relative; z-index: 2; width: 100%; height: 100%;
	opacity: 1; transform: scale(1);
	transition: opacity .6s,transform .7s;
	background: url("../images/games/GAME01.jpg") center center / cover no-repeat;

	display: flex; flex-direction: column;
	align-items: center; justify-content: space-between;
}
#content.story .intro.active-hide{ z-index: -10; height: var(--vh100); min-height: auto !important;}
#content.story .intro.active-hide .box-area{opacity: 0; transform: scale(1.3);}


#content.story .intro .title-area{
	padding-top: calc(var(--header) + 20px); --gap:12px; text-align: center;
	display: flex; align-items: center; height: 100%; padding-inline: 20px;
	justify-content: center;
}
#content.story .intro .title-area .title{font-size: clamp(30px,8vw,40px);}
#content.story .intro .title-area .text{font-size: var(--fs-16-14); color: var(--white-op-80)}

#content.story .intro .visual-area{width: 100%;}
#content.story .intro #fullLine{width: 1920px; margin-bottom: 16px; padding-inline: 15px;}
#content.story .intro #fullLine defs + g g:nth-child(1) > g > path{fill: transparent;}

#content.story .intro .story-list{
	display: flex; align-items: center;
	width: 100%;
}
#content.story .intro .story-list li{width: calc(100% / 6);}

#content.story .intro .story-list .chapter{ overflow: hidden;
	position: relative; width: 100%; height: auto; border-radius: 0;
	display: flex; align-items: flex-end; padding-bottom: 50px;
	aspect-ratio: 320/528; cursor: pointer;
}
#content.story .intro .story-list .img-wrap{
	position: absolute; top: 0;  overflow: hidden;
	width: 100%; height: 100%; transform: scale(1); transition: transform 0.6s;
}
#content.story .intro .story-list .img-wrap img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
#content.story .intro .story-list .text-area{
	position: relative;
	max-width: 259px; width: 100%; margin: 0 auto;

}
#content.story .intro .story-list .text-wrap{
	position: relative; width: 100%; padding: 32px 22px;
	font-family: "Chakra Petch", sans-serif;
}
#content.story .intro .story-list :is(.chapter-num, .chapter-name){
	display: inline-block;
	background: linear-gradient(to bottom, rgba(201, 221, 222, 1), rgba(165, 192, 194, 1));
	-webkit-text-fill-color: transparent; -webkit-background-clip: text;
	font-weight: 700; line-height: 1;
}
#content.story .intro .story-list .chapter-num{font-size: 30px; padding-bottom: 30px;}
#content.story .intro .story-list .pack-both{
	width: 100%; padding-top: 14px;
	display: flex; justify-content: space-between;
}
#content.story .intro .story-list .chapter-name{font-size: 26px;}


#content.story .intro .story-list .chapt-lottie{
	position: absolute; top: 0; left: 0; right: 0; width: 100%;
	background-position: center center; background-repeat: no-repeat;
	background-size: cover; background-image: url("../images/games/chapt-lottie_pc.svg");
	width: 260px; aspect-ratio: 260/205;
}

#content.story .intro .story-list .icon-wrap{width: 40px; aspect-ratio: 40/40;}

@media all and (min-width: 1921px) {
	#content.story .intro .title-area{
		padding-top: calc(var(--header) + 2vw);
	}

	#content.story .intro #fullLine{width: 100%;}
	#content.story .intro .story-list .chapt-lottie{width: 13.54vw;}

	#content.story .intro .title-area .title{font-size: 2.08vw;}
	#content.story .intro .title-area .text{font-size: 0.94vw;}

	#content.story .intro .story-list li{width: 16.66%;}

	#content.story .intro .story-list .text-area{max-width: 13.49vw;}
	#content.story .intro .story-list .text-wrap{padding: 1.67vw 1.15vw;}

	#content.story .intro .story-list .ico.chapt-line{width: 11vw;}
	#content.story .intro .story-list .chapter-num{padding-bottom: 1.56vw;}
	#content.story .intro .story-list .pack-both{padding-top: 0.73vw;}

	#content.story .intro .story-list .icon-wrap{width: 2.08vw;}
}
@media all and (max-width: 1660px) {
	#content.story .intro .story-list .chapter{padding-bottom: 30px;}
	#content.story .intro .story-list .chapter-name{font-size: 16px;}
}
@media all and (min-width: 1495px) and (max-width: 1660px) {
	#content.story .intro .story-list .chapt-lottie{width: 224px;}

	#content.story .intro .story-list .text-area{max-width: 225px;}
	#content.story .intro .story-list .text-wrap{padding: 24px 10px;}
	#content.story .intro .story-list .chapter-num{font-size: 28px; padding-bottom: 20px;}
	#content.story .intro .story-list .chapter-name{font-size: 24px;}
	#content.story .intro .story-list .ico.chapt-line{width: 203px;}
}
@media all and (min-width: 1241px) and (max-width: 1494px) {
	#content.story .intro .story-list .chapt-lottie{width: 180px;}

	#content.story .intro .story-list .text-area{max-width: 180px;}
	#content.story .intro .story-list .text-wrap{padding: 24px 10px;}
	#content.story .intro .story-list .chapter-num{font-size: 26px; padding-bottom: 7px;}
	#content.story .intro .story-list .chapter-name{font-size: 22px;}
	#content.story .intro .story-list .pack-both{padding-top: 5px;}
	#content.story .intro .story-list .ico.chapt-line{width: 160px;}
}
@media all and (min-width: 1241px) {
	#content.story .intro .story-list li:hover .img-wrap{transform: scale(1.1);}
}
@media all and (max-width: 1240px) {
	#content.story .intro{height: auto; min-height: var(--vh100);}
	#content.story .intro .story-list .chapt-lottie{
		width: 100%; aspect-ratio: 315/153;
		background-image: url("../images/games/chapt-lottie_mo.svg");
	}

	#content.story .intro .title-area{padding-top: calc(var(--header) + 40px); padding-bottom: 40px;}
	#content.story .intro .story-list{flex-wrap: wrap; }
	#content.story .intro .story-list li{width: calc(100% / 3);}
	#content.story .intro .story-list .chapter{aspect-ratio: 750/558; padding-bottom: 24px;}
	#content.story .intro .story-list .text-area{max-width: none; width: calc(100% - clamp(40px,10.67vw,60px));}
	#content.story .intro .story-list .text-wrap{padding: 1.61vw 1.94vw;}

	#content.story .intro .story-list .chapter-num{font-size: 34px; padding-bottom: clamp(10px,1.61vw,20px);}
	#content.story .intro .story-list .chapter-num + span{display: block; width: 100%;}
	#content.story .intro .story-list .chapter-num + span .ico{width: 100%;}

	#content.story .intro .story-list .icon-wrap{width: 32px;}

	#content.story .intro .story-list .pack-both{padding-top: clamp(10px,1.61vw,20px);}
	#content.story .intro .story-list .chapter-name{font-size: 28px;}


}
@media all and (max-width: 1024px) {
	#content.story .intro .title-area{padding-bottom: 52px;}
	#content.story .intro{height: auto; min-height: var(--vh100);}
	#content.story .intro .story-list li{width: calc(100% / 2);}

	#content.story .intro .story-list .text-area{max-width: 370px; width: 100%;}
	#content.story .intro .story-list .text-wrap{ padding: 24px 22px; }
	#content.story .intro .story-list .chapter-num{font-size: 36px; padding-bottom: 15px;}
	#content.story .intro .story-list .chapter-num + span{width: calc(100% - 1px);}

	#content.story .intro .story-list .pack-both{padding-top: 15px;}
	#content.story .intro .story-list .chapter-name{font-size: 28px;}
}

@media all and (max-width: 768px) {
	#content.story .intro .title-area{padding-top: calc(var(--header) + 60px); width: 100%;}
	#content.story .intro .title-area .title{line-height: 1.2;}
	#content.story .intro .title-area .text{ font-size: 13px;}

	#content.story .intro .story-list li{width: 100%;}
	#content.story .intro .story-list .text-area{max-width: none; width: calc(100% - clamp(40px,10.67vw,60px));}
	#content.story .intro .story-list .text-wrap{padding: 5.33vw 6.4vw;}
	#content.story .intro .story-list .chapter-num{font-size: 9.11vw; padding-bottom: 3.91vw;}

	#content.story .intro .story-list .pack-both{padding-top: 4.17vw;}
	#content.story .intro .story-list .chapter-name{font-size: 7.81vw;}

	#content.story .intro .story-list .icon-wrap{width: 10.67vw;}
	#content.story .intro .story-list .icon-wrap .chapt-btn-arrow{width: 100%; height: 100%;}
}


/*** Detail ***/
#content.story .detail{
	position: absolute; inset: 0 0 0 0; width: 100%;
	opacity: 0; transition: opacity 0.6s;  z-index: -10;
}
#content.story .detail.active{opacity: 1; z-index: 2;}
#content.story .detail .box-area{width: 100%; height: 100%;}
#content.story .detail .swiper,
#content.story .detail .video-wrap{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
}
#content.story .detail .video-wrap::after{
	content: "";
	position: absolute; top: 0; width: 100%; height: 100%;
	background: var(--black-op-40) url("../images/@common/bg-dot.png") center center / cover no-repeat;
}

#content.story .detail .video-wrap{ overflow: hidden; transform: scale(1.5); transition: transform 8.5s ease-in-out;}
#content.story .detail .video-wrap video,
#content.story .detail .video-wrap img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
#content.story .detail .visual-area{position: absolute; z-index: 2;
	width: 100%; height: 100%; color: var(--white);
	display: flex; align-items: center;
	justify-content: center; flex-direction: column; gap: 40px ;
}
#content.story .detail .visual-area .lottie-wrap{position: relative; max-width: 850px; width: 100%;}
#content.story .detail .visual-area .lotties{width: 100%; aspect-ratio: 850/270;}
#content.story .detail .visual-area .lotties defs + g g:nth-child(1) > g > path{fill: transparent;}
#content.story .detail .visual-area .lottie-wrap h3{ position: absolute;
	top: 50%; transform: translateY(-50%); left: 0; right: 0;
	font-family: "Chakra Petch", sans-serif; text-align: center;
	font-weight: 700; font-size: 40px; letter-spacing: 0.2em;
}

#content.story .detail #StorySwiper li.swiper-slide-active .video-wrap{ transform: scale(1); }

#content.story .detail .visual-area .text-wrap{
	position: relative; text-align: center;
	max-width: 820px; width: calc(100% - 40px);
	max-height: 250px; overflow-y: hidden; overflow-x: hidden;

	/* 사파리 대응 추가 */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

#content.story .detail .visual-area .text-wrap .scroll-box{
	display: flex; flex-direction: column;
	text-align: center;
	width: 100%; height: 100%; padding: 10px;
}

#content.story .detail .visual-area .text-wrap h4{
	font-size: 40px; line-height: 1.2; font-weight: 700;
}
#content.story .detail .visual-area .text-wrap h4 + p{padding-top: clamp(16px,4.27vw,24px);}
#content.story .detail .visual-area .text-wrap p{
	font-size: var(--fs-16-14); line-height: 1.6;
	word-break: keep-all; color: var(--white-op-80);
}
#content.story .swiper-utils{position: absolute; bottom: 0; left: 0; right: 0;
	max-width: 1280px;width: 100%; margin: 0 auto;
}
#content.story #StoryDot{ position: absolute; bottom: 40px; left: 0; right: 0; width: 100%;}
#content.story #StoryDot ul{
	display: flex; align-items: flex-end;
	justify-content: center;
}
#content.story #StoryDot li{ position: relative;
	width: fit-content; height: fit-content; opacity: 1 !important;
	background-color: transparent;
	width: 16%; margin: 0;
}

#content.story #StoryDot li .tit{color: var(--primary); font-weight: 700; letter-spacing: 0.05em}
#content.story #StoryDot li:not([class*="-bullet-active"]) .tit{color: var(--white-op-60); font-weight: 400;}

@media all and (max-width: 1024px) {
	#content.story #StoryDot li .tit{font-size: 14px;}
}
@media all and (min-width: 769px) and (max-width: 1024px){
	#content.story .detail .visual-area{gap: 60px;}
	#content.story .detail .visual-area .lottie-wrap h3,
	#content.story .detail .visual-area .text-wrap h4{font-size: 32px;}
}
@media all and (min-width: 769px){
	#content.story #StoryDot li::after,
	#content.story #StoryDot li::before{content: "";
		position: absolute; z-index: -1;
		top: 10px; left: 55%;
		background-color: var(--primary);
	}
	#content.story #StoryDot li::after{
		width: calc(100% - 20px); height: 1px;
	}
	#content.story #StoryDot li::before{
		top: 9px; width: 0; height: 3px;
	}
	#content.story #StoryDot li:last-child::after,
	#content.story #StoryDot li:last-child::before{display: none;}
	#content.story #StoryDot li:not([class*="-bullet-active"])::after{
		background-color: var(--white-op-60); top: 14px;
	}
	#content.story #StoryDot li:not([class*="-bullet-active"])::after,
	#content.story #StoryDot li:not([class*="-bullet-active"])::before{ left: 54.2%; }
	#content.story #StoryDot li:not([class*="-bullet-active"])::after{
		width: calc(100% - 14px); height: 1px;
	}
	#content.story #StoryDot li:not([class*="-bullet-active"])::before{width: 0;}
	#content.story #StoryDot li[class*="-bullet-active"]::before{width: calc(100% - 18px);
		transition: width 6s;
	}
	#content.story #StoryDot li .btn{ flex-direction: column; margin: 0 auto}
	#content.story #StoryDot li .progress-span{
		width: 28px; aspect-ratio: 40/35;
		background-position: center center;
		background-repeat: no-repeat; background-size: cover;
		background-image: url("../images/@common/story-active.svg");
	}
	#content.story #StoryDot li:not([class*="-bullet-active"]) .progress-span{
		width: 28px; background-size: 20px 20px; aspect-ratio: 20/20;
		background-image: url("../images/@common/story-no.svg");
	}
	#content.story #StoryDot li.passed .progress-span{background-image: url("../images/@common/story-passed.svg");
		opacity: 1;
	}
	#content.story .swiper-utils .swiper-btns{display: none !important;}
}
@media all and (max-width: 768px) {
	#content.story .detail{min-height: 640px;}
	#content.story .detail .visual-area{padding-top: 30px; gap: 20px;}
	#content.story .detail .visual-area .lottie-wrap{max-width: none; width: 420px;}
	#content.story .detail .visual-area .lottie-wrap h3{
		font-size: clamp(18px,4.8vw,32px); letter-spacing: 0.1em;
	}
	#content.story .detail .visual-area .text-wrap{max-height: 236px;}
	#content.story .detail .visual-area .text-wrap h4{font-size: clamp(28px,7.47vw,32px);}


	#content.story .swiper-utils{bottom: 24px;}
	#content.story .swiper-utils .swiper-btns{
		position: absolute; bottom: 0px; z-index: 1;
		width: 100%;
	}
	#content.story .swiper-utils .swiper-btns .btn{width: 60px; height: 60px;}
	#content.story .swiper-utils .swiper-btns .btn[class*="-button-disabled"]{display: none;}
	#content.story .swiper-utils .swiper-btns .btn.next{margin-left: auto;}

	#content.story #StoryDot{width: fit-content; bottom: 20px;	margin: 0 auto;}
	#content.story #StoryDot ul{gap: 6px;}
	#content.story #StoryDot li{position: static; width: auto;}
	#content.story #StoryDot li .btn{position: inherit;}
	#content.story #StoryDot li .progress-span{display: none;}
	#content.story #StoryDot li .tit{position: absolute; bottom: -38px; left: 0; right: 0;
		text-align: center; color: var(--white); width: 100%; display: none !important;
	}
	#content.story #StoryDot li:not([class*="-bullet-active"]) .tit{display: none;}

	#content.story .detail .visual-area .text-wrap p{ font-size: 13px;}
}




/*** GAME 2 Suit ***/
#container:has(.sub.suits){overflow: visible;}

#content.suits{ position: relative;
	height: auto; min-height: auto; padding-top: 0;
	background-color: var(--black);
}
#content.suits.active{
	height: var(--vh100); min-height: 768px;
}
#content.suits .content-area{ overflow: hidden;
	position: relative; z-index: 2;
}
#content.suits .section{ 
	height: var(--vh100); 
	min-height: 768px;
}
#content.suits .absolute-inset{ position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%; inset: 0 0 0 0;
}


#content.suits .intro{
	position: relative; overflow:hidden;
}
#content.suits .intro .box-area{
	width: 100%; height: 100%;
	padding-top: calc(var(--header) + 52px); padding-bottom: 100px;
	opacity: 1; transform: scale(1);
	transition: opacity .6s,transform .7s;

	display: flex; align-items: center;
	justify-content: center;
}
#content.suits .intro.active-hide{
	z-index: -10; height: var(--vh100); /* min-height: auto ; */
}
#content.suits .intro.active-hide .box-area{opacity: 0; transform: scale(1.3);}

#content.suits .intro .video-area{z-index: 1;}
#content.suits .intro .video-area video{
	width: 100%; height: 100%; 
	object-fit: cover; object-position: center center;
}
#content.suits .intro .video-area::after{content: "";
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
	background: var(--black-op-40) url("../images/@common/bg-dot.png") center center / cover no-repeat;
}
#content.suits .intro .video-area #introVideoMo{display: none;}

#content.suits .intro .intro-area{position: relative; z-index: 2;}
#content.suits .intro .title-area{padding-bottom: 40px;}
#content.suits .intro .title-area .title{font-size: 80px;}

#content.suits .intro .swiper-area{padding-inline: 40px;}
#content.suits #suitSwiper{max-width: 1280px; width: 100%;}
#content.suits #suitSwiper ul{gap: 40px;}
#content.suits #suitSwiper li{
	max-width: 290px; height: auto;
	transition: all 0.2s; 
}
#content.suits #suitSwiper .btn.suit{ position: relative;
	width: 100%; height: auto;
	aspect-ratio: 290/513;
}
#content.suits #suitSwiper .img-wrap{position: relative;}
#content.suits #suitSwiper .img-wrap::after{ content: ""; z-index: -1;
	position: absolute; top: 10px; left: 80px; width: 95px; aspect-ratio: 95/10;
	background: url("../images/games/Suit_Box_Deco.svg") 50% 50% / cover no-repeat;
	transition: left 0.6s;
}
#content.suits #suitSwiper .img-wrap.active::after{left: 130px;}

#content.suits #suitSwiper .suit-wrap{width: 100%; height: 100%;}
#content.suits #suitSwiper .suit-wrap img{
	width: 100%; height: 100%; 
	object-fit: cover; object-position: center center;
}
#content.suits #suitSwiper .suit-info{
	top: auto; height: auto;
	color: var(--white);
}
#content.suits #suitSwiper .suit-info :is(h3, p){text-shadow: 0 0 15px rgba(0,0,0,1);}
#content.suits #suitSwiper .suit-info h3{
	font-size: 28px; 
	letter-spacing: 0.02em;
}
#content.suits #suitSwiper .suit-info p{
	position: relative; left: 5px; 
	letter-spacing: 0.5em; text-transform: uppercase;
}
#content.suits #suitSwiper .suit-info .ico{filter: drop-shadow(0 0 10px black);}
#content.suits #suitSwiper .btn-swiper{ position: absolute;
	z-index: 2; top: 50%; transform: translateY(-50%);
	width: clamp(60px,16vw,80px); height: clamp(60px,16vw,80px);
	display: none;
}
#content.suits #suitSwiper .btn-swiper.prev{left: -40px;}
#content.suits #suitSwiper .btn-swiper.next{right: -40px;}
#content.suits #suitSwiper .btn-swiper[class*="-button-disabled"]{display: none;}

#content.suits #suitSwiper #suitDot{
	display: none; width: 100%;
	bottom: -60px;
}
#content.suits #suitSwiper #suitDot ul{
	display: flex; align-items: center; 
	justify-content: center; gap: 6px;
}
#content.suits #suitSwiper #suitDot ul li{
	width: fit-content; height: fit-content; 
	opacity: 1 !important;
}
@media all and (min-width:1921px) {
	#content.suits .intro .title-area{padding-bottom: 2.08vw;}
	#content.suits .intro .title-area .title{font-size: 4.17vw;}

	#content.suits #suitSwiper .img-wrap::after{ top: 0.52vw; left: 4.17vw; width: 4.95vw; }
	#content.suits #suitSwiper .img-wrap.active::after{left: 6.77vw;}

	#content.suits #suitSwiper{max-width: 66.67vw;}
	#content.suits #suitSwiper li{max-width: 15.1vw;}
	#content.suits #suitSwiper .suit-info h3{font-size: 1.46vw;}
	#content.suits #suitSwiper .suit-info p{font-size: 0.83vw;}

}
@media all and (max-width: 1366px) {
	#content.suits .intro .title-area{padding-bottom: 40px;}
	#content.suits .intro .title-area .title{font-size: 80px;}

	#content.suits #suitSwiper{overflow: visible;}
	#content.suits #suitSwiper ul{gap: 20px;}
	#content.suits #suitSwiper li{max-width: 230px;}

	#content.suits #suitSwiper .img-wrap::after{ top: 7px; left: 40px;}
	#content.suits #suitSwiper .img-wrap.active::after{left: 105px;}
}
@media all and (min-width: 1081px){
	#content.suits #suitSwiper li{margin-right: 0 !important;}
}
@media all and (max-width: 1080px){
	#content.suits #suitSwiper{max-width: 1280px;}
	#content.suits #suitSwiper ul{gap: 0px;}
	#content.suits #suitSwiper .btn-swiper{ display: flex; }
}
@media all and (min-width: 769px) and (max-width: 1440px) and (max-height: 860px) {
	#content.suits .intro .title-area{padding-bottom: 30px;}
	#content.suits .intro .title-area .title{font-size: 70px;}

	#content.suits #suitSwiper li{max-width: 220px;}
}
@media all and (max-width: 768px) {
	#content.suits .intro .video-area #introVideo{display: none;}
	#content.suits .intro .video-area #introVideoMo{display: block;}
	#content.suits .intro{min-height: 640px; }
	#content.suits .intro .title-area{padding-bottom: clamp(15px,4vw,40px); gap: clamp(12px,3.2vw,24px);}
	#content.suits .intro .title-area .title{font-size: clamp(36px,9.6vw,80px);}
}
@media all and (max-width: 767px){
	#content.suits .intro.active-hide{
		height: var(--vh100); min-height: 1380px;
		 transition: min-height 0.6s 0.6s; 
	}
}

@media all and (max-width: 640px) {
	#content.suits #suitSwiper li{max-width: none; width: 100%;}
	#content.suits #suitSwiper .btn.suit{max-width: 240px; margin: 0 auto;}

	#content.suits #suitSwiper #suitDot{display: block;}
}
@media all and (max-width: 768px) and (max-height: 670px){
	#content.suits .intro .swiper-area{padding-inline: 30px;}
	#content.suits #suitSwiper .btn.suit{max-width: 190px;}
	#content.suits #suitSwiper .btn-swiper.prev{left: -30px;}
	#content.suits #suitSwiper .btn-swiper.next{right: -30px;}

	#content.suits #suitSwiper #suitDot{bottom: -40px;}
}

/* Detail */
#content.suits .detail{
	z-index: -10; height: var(--vh100); min-height: 768px;
	opacity: 0; transition: opacity 0.4s 0.1s;  
}
#content.suits .detail.active{opacity: 1; z-index: 4; transition: opacity 0.4s 0s;  }
#content.suits .detail .video-wrap{}
#content.suits .detail .video-wrap::after{content: "";
	position: absolute; top: 0; width: 100%; height: 100%;
	background: var(--black-op-40) url("../images/@common/bg-dot.png") center center / cover no-repeat;
}
#content.suits .detail .video-wrap video{
	width: 100%; height: 100%; 
	object-fit: cover; object-position: center center;
}

#content.suits .detail .swiper-area,
#content.suits #typeSwiper{position: relative; width: 100%; height: 100%;}

#content.suits #typeSwiper .suit-info{ position: relative;
	width: 100%; height: 100%; margin: 0 auto; 
	padding-top: calc(var(--header) + 4vw);
	padding-left: 12.24vw; z-index: 4;
	
	display: flex; flex-direction: column;
	gap: 40px;
}
#content.suits #typeSwiper :is(.title-wrap, .weapon-wrap){color: var(--white);}

#content.suits #typeSwiper .title-wrap{}
#content.suits #typeSwiper .title-wrap h3{
	font-size: 140px; font-weight: 800;
	line-height: 1.2;
}
#content.suits #typeSwiper .title-wrap p{line-height: 1.6;}

#content.suits #typeSwiper .weapon-wrap{
	display: flex; flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
#content.suits #typeSwiper .weapon-list{
	display: flex; gap:40px;
}
#content.suits #typeSwiper .weapon-list .pack-start{
	padding-top: 24px; text-align: right;
	justify-content: space-between;
}
#content.suits #typeSwiper .weapon-list p span{color: var(--white-op-60);}


#content.suits #typeSwiper .trailer-wrap{max-width: 360px; width: 100%;}
#content.suits #typeSwiper .trailer-box{
	width: 100%; margin-bottom: 16px;
	display: flex; align-items: center;
	justify-content: space-between;
}
#content.suits #typeSwiper .trailer-box p{
	font-size: 20px; font-weight: 800;
	line-height: 1.2;
}
#content.suits #typeSwiper .trailer-video{position: relative; width: 100%; aspect-ratio: 360/200;}
#content.suits #typeSwiper .trailer-video .btn span{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
	display: flex; align-items: center;
	justify-content: center; background-color: var(--black-op-20);
}
#content.suits #typeSwiper .trailer-video .btn .ico{width: 80px; height: 80px;}



#content.suits #typeSwiper .suit-section{position: absolute; top: 0; right: 0; height: 100%;}
#content.suits #typeSwiper .suit-section .img-wrap{ display: block;
	position: absolute; bottom: 0; right: 0; z-index: 2; 
	width: 1015px; opacity: 0; transform: translateY(40px); aspect-ratio: 1015 / 966;
}
#content.suits #typeSwiper .suit-section .img-wrap img{
	width: 100%; height: 100%; object-fit: cover; object-position: center center;
}

#content.suits #typeSwiper .suit-lottie{
	position: absolute; top: 0; right: 0;
	max-width: 599px; width: 100%; height: 100%;
	aspect-ratio: 599/980;
}
#content.suits #typeSwiper .suit-lottie .lotties{
	width: 100%; height: 100%;
	aspect-ratio: 599/980;
}
#content.suits #typeSwiper .suit-mo-back{display: none !important;
	position: absolute; bottom: -2px; left: 0;
	max-width: 375px; width: 100%; aspect-ratio: 375/747;
	transform: translateY(80px); opacity: 0;
}


#content.suits #typeSwiper .marquee-area{
	position: absolute; bottom: 0; left: 0;
	width: 100%; aspect-ratio: 599/140; padding: 0;
	display: flex; align-items: center;
	opacity: 0; transform: translateY(20px);
}
#content.suits #typeSwiper .marquee{
	top: 5px; 
	font-size: 80px; font-family: var(--ff-bs);
}
#content.suits #typeSwiper .marquee-text{
	margin-right: 62px;
	line-height: 1; color: rgba(134, 136, 137, 1); font-weight: 900;
}
#content.suits #typeSwiper .marquee-text::before{
	content: ""; top: 50%; transform: translateY(-50%);
	width: 4px; height: 4px; left: -29px;
	border-radius: 100px; background-color: rgba(134, 136, 137, 1);
}


#content.suits #DetailDot{position: absolute; 
	top: 50%; left: 33px; transform: translateY(-50%); z-index: 2;
}
#content.suits #DetailDot ul{ gap: 8px;
	display: flex; flex-direction: column;
}
#content.suits #DetailDot ul li{
	width: fit-content; height: fit-content; margin: 0;
	opacity: 1 !important; background-color: transparent;
}
#content.suits #DetailDot ul li:not([class*="-bullet-active"]) .btn{opacity: 0.6;}
#content.suits #DetailDot .btn{
	width: 55px; gap: 0;
	display: flex !important;  flex-direction: column;
	font-family: "Space Mono", monospace; font-size: 14px;
	color: var(--white);
}
#content.suits #DetailDot .btn .ico{width: 100%;}
#content.suits #DetailDot .btn span{margin-top: -6px;}


@media all and (min-width: 1921px) {
	#content.suits #typeSwiper .suit-info{padding-top: calc(var(--header) + 8.29vw);}
	#content.suits #typeSwiper .suit-section .img-wrap{width: 52.86vw;}
	#content.suits #typeSwiper .suit-lottie{max-width: 31.2vw;}
	#content.suits #typeSwiper .marquee{font-size: 4.17vw;}

	#content.suits #typeSwiper .trailer-wrap{max-width: 18.75vw;}
	#content.suits #typeSwiper .trailer-video .btn .ico{width: 4.17vw; height: 4.17vw;}
}
@media all and (max-width: 1440px) {
	#content.suits #typeSwiper .title-wrap h3{font-size: 100px;}
	#content.suits #typeSwiper .trailer-wrap{max-width: 280px;}
	#content.suits #DetailDot{left: 24px;}
	#content.suits #DetailDot .btn{width: 45px;}
}
@media all and (max-width: 1920px) and (max-height:910px) {
	#content.suits #typeSwiper .suit-info{padding-top: calc(var(--header) + 60px); gap: 20px;}
	#content.suits #typeSwiper .title-wrap h3{font-size: 110px;}

	#content.suits #typeSwiper .weapon-list .pack-start{padding-top: 12px;}
	#content.suits #typeSwiper .weapon-list .ico[class*="weapon-"]{width: 40px;}
	#content.suits #typeSwiper .trailer-wrap{max-width: 300px;}

	#content.suits #typeSwiper .suit-section .img-wrap{width: 900px;}
	
}
@media all and (min-width: 769px) and (max-width: 1440px) and (max-height: 810px) {
	#content.suits #typeSwiper .title-wrap h3{font-size: 100px;}
	#content.suits #typeSwiper .trailer-wrap{max-width: 280px;}
}
@media all and (min-width:768px) and (max-width: 1024px) and (orientation: portrait) {
	#content.suits #typeSwiper .title-wrap h3{font-size: 100px;}
	#content.suits #typeSwiper .suit-info{padding-top: calc(var(--header) + 14.65vw);}
	#content.suits #typeSwiper .suit-section .img-wrap{ width: 78.89vw; }
	#content.suits #typeSwiper .suit-lottie{top: auto; bottom: 0; max-width: 45.9vw; height: 74.22vw;}
	#content.suits #typeSwiper .marquee-area{height: auto; bottom: 5px;}
	#content.suits #typeSwiper .weapon-list .ico.suit-line{width: 180px;}
}
@media all and (max-width: 767px) {
	#content.suits .content-area{overflow: visible;}

	#content.suits .detail,
	#content.suits .detail.active{min-height: 1370px;}
	#content.suits #typeSwiper .suit-info{
		padding-top: calc(var(--header) + 120px);
		padding-left: clamp(20px,5.33vw,40px);
		justify-content: space-between;
	}
	#content.suits #typeSwiper .title-wrap h3{font-size: 80px;}
	#content.suits #typeSwiper .title-wrap p{font-size: 14px;}


	#content.suits #typeSwiper .weapon-wrap{
		height: auto; gap: 40px;
		margin-left: auto; padding-bottom: 60px;
	}
	#content.suits #typeSwiper .weapon-list{
		flex-direction: column; width: fit-content;
		gap: 24px; order: 2;
	}
	#content.suits #typeSwiper .weapon-list .pack-start{padding-top: 12px;}
	#content.suits #typeSwiper .weapon-list p span{font-size: 14px;}
	#content.suits #typeSwiper .weapon-list .ico.suit-line{width: 216px;}
	#content.suits #typeSwiper .weapon-list .ico[class*="weapon-"]{width: 48px;}

	#content.suits #typeSwiper .trailer-wrap{max-width: 280px; order: 1;}
	#content.suits #typeSwiper .trailer-box{width: calc(100% - 34px); margin-bottom: 12px;}
	#content.suits #typeSwiper .trailer-box p{font-size: 16px;}
	
	#content.suits #typeSwiper .suit-lottie{max-width: none; aspect-ratio: auto;}
	#content.suits #typeSwiper .suit-lottie .lotties{display: none;}

	#content.suits #typeSwiper .suit-section{width: 100%;}
	#content.suits #typeSwiper .suit-section .img-wrap{width: 375px; transform: translateY(20px); }
	#content.suits #typeSwiper .suit-mo-back{display: block !important;
		
	}
	 
	#content.suits #typeSwiper .type-00 .suit-section .img-wrap{bottom: auto; top: 280px; aspect-ratio: 375/731;}
	#content.suits #typeSwiper .type-01 .suit-section .img-wrap{bottom: auto; top: 120px; aspect-ratio: 375/776;}
	#content.suits #typeSwiper .type-02 .suit-section .img-wrap{bottom: auto; top: 195px; aspect-ratio: 375/744;}
	#content.suits #typeSwiper .type-03 .suit-section .img-wrap{bottom: auto; top: 245px; aspect-ratio: 375/872;}

	
	#content.suits #typeSwiper .marquee-area{
		width: 747px; transform: rotate(90deg) !important;
  		bottom: 747px; left: 10px; right: auto;
		transform-origin: left bottom;
		aspect-ratio: auto;
	}
	#content.suits #typeSwiper .marquee-area .marquee{font-size: 40px;}

	#content.suits .detail.active .swiper-area{height: calc(100% - 80px);}
	#content.suits .detail.active #typeSwiper{}
	#content.suits .detail #DetailDot{
		position: sticky; top: auto; bottom: 0; left: 0; right: 0;
		width: 100%;
		display: flex; align-items: flex-end; justify-content: center;
		transform: translateY(0);
	}
	#content.suits #DetailDot ul{ /* position: sticky; bottom: 0; */ gap: 34px;
		flex-direction: inherit; justify-content: center; height: 80px;
		padding-inline: 21px; background-color: var(--black);  
	}
	#content.suits #DetailDot ul li{width: 25%;}
	#content.suits #DetailDot .btn{font-size: 11px; margin: 0 auto;}
	#content.suits #DetailDot .btn .ico{width: 33px; height: 48px;}
	#content.suits #DetailDot .btn span{margin-top: 0px;}
}



/*** GAME 3 World ***/
#content.world{
	position: relative; background-color: var(--black);
	padding-top: 0; height: auto; min-height: auto;
}
#content.world .content-area{position: relative; overflow: hidden; z-index: 2;}
#content.world .section{height: var(--vh100); min-height: 768px;}
#content.world .section .box-area{position: relative; width: 100%; height: 100%;}
#content.world .section .trans-180{ transform: rotate(180deg);}
#content.world .section .btn{border-radius: 0;}

/*** Intro ***/
#content.world .section.intro{position: relative;}
#content.world .section.intro .box-area{
	position: relative; z-index: 2;
	opacity: 1; transform: scale(1);
	transition: opacity .6s,transform .7s;	
}
#content.world .section.intro .title-area{}
#content.world .section.intro.active-hide{ z-index: -10; height: var(--vh100); min-height: auto !important;}
#content.world .section.intro.active-hide .box-area{opacity: 0; transform: scale(1.3);}

#content.world .section.intro .video-wrap{ z-index: 1;
	position: absolute; width: auto; top: 0; height: 100%;
	left: 50%; transform: translateX(-50%);
	aspect-ratio: 21/9;
	transition: opacity 0.3s, visibility 0.3s;
}
#content.world .section.intro .video-wrap video{
	width: 100%; height: 100%;
	object-fit: cover; object-position: 50% center;
}
#content.world .section.intro .video-wrap.intros{opacity: 1; visibility:visible;}
#content.world .section.intro .video-wrap.intros.out{opacity: 0; visibility: hidden;}

#content.world .section.intro .visual-wrap.space{position: absolute;
	width: 100%; height: 100%; inset: 0 0 0 0;  z-index: -2; opacity: 0;
	/* background: url("../images/games/GAME03.jpg") center center no-repeat;
	background-size: cover; */
}
#content.world .section.intro .bg-space{
	position: absolute; top: 0; left: 50%;
    width: auto; height: 100%; aspect-ratio: 21 / 9;
	transform: translateX(-50%);
}
#content.world .section.intro .bg-space img{
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
    -o-object-fit: cover; object-fit: cover;
	object-position: 50% center;
}


#content.world .space-list{position: absolute; 
	top: calc(50% + calc(var(--header) / 2)); left: 50%;
	aspect-ratio: 752/389;
	transform: translate(-50%, -50%);
	width: auto; height: 76%; margin: 0 auto;
}
#content.world .space-list li{position: absolute; width: auto;}
#content.world .space-list li:nth-child(1){top: 60%; left: 32%;}
#content.world .space-list li:nth-child(2){bottom: 3%; left: 32%;}
#content.world .space-list li:nth-child(3){top: 20%; left: 2.5%;}
#content.world .space-list li:nth-child(4){top: 15%; right: -2.4%;}
#content.world .space-list li:nth-child(5){bottom: 10%; right: -2%;}

#content.world .space-list .btn{
	position: relative; color: var(--white);
	width: 266px; aspect-ratio: 266/89;
}
#content.world .space-list .btn .motion-btn{
	position: absolute; inset: 0 0 0 0; z-index: 2;
	width: 100%; height: 100%;
}
#content.world .space-list li:nth-child(2) .motion-btn,
#content.world .space-list li:nth-child(4) .motion-btn{transform: scale(-1, 1);}

#content.world .space-list .name-box{ 
	position: absolute; top: 4px; left: 136px; z-index: 2;
	opacity: 1; transition: opacity 0.2s;
}
#content.world .space-list .name-box .name{
	font-family: "Space Mono", monospace;
	font-weight: 400; letter-spacing: 6px;
	line-height: 1.6;
}
#content.world .space-list li:nth-child(2) .name-box{left: 56px;}
#content.world .space-list li:nth-child(4) .name-box{left: 28px;}

#content.world .space-list .name-box2{
	opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0.3s 0s;
	color: var(--black); top: 18px; left: -25px;
	width: 100%; height: 100%;
	display: flex; align-items: center;
	justify-content: center; gap: 26px;
}
#content.world .space-list .name-box2 .name{font-weight: 700;}
#content.world .space-list .name-box2 .name + span{position: relative;}
#content.world .space-list .name-box2 .name + span::after{content: "";
	position: absolute; top: 50%; left: -16px; transform: translateY(-50%);
	width: 4px; height: 4px; border-radius: 100px; background-color: var(--black);
}
@media all and (min-width: 1921px) and (min-height: 1000px) {
	#content.world .space-list li:nth-child(1){top: 64%; left: 39%; margin: 0 auto;}
	#content.world .space-list li:nth-child(3){top: 23%; left: 8%;}
	#content.world .space-list li:nth-child(4){top: 17%; right: 4%;}
	#content.world .space-list li:nth-child(5){bottom: 10%;}
}
@media all and (min-width: 1441px){
	#content.world .space-list li:nth-child(2):hover .name-box2{left: 22px;}
	#content.world .space-list li:nth-child(4):hover .name-box2{left: 24px;}
}
@media all and (max-width: 1440px) {
	
	#content.world .section.intro .video-wrap,
	#content.world .section.intro .bg-space{
		left: 45%; aspect-ratio: 17/9;
	}
	#content.world .space-list{aspect-ratio: 630/389;}
	#content.world .space-list li:nth-child(1){top: 58%; left: 30%;}
	#content.world .space-list li:nth-child(2){bottom: 13%; left: 26%;}
	#content.world .space-list li:nth-child(3){top: 24%; left: -1.7%;}
	#content.world .space-list li:nth-child(4){top: 18%; right: 8%;}
	#content.world .space-list li:nth-child(5){bottom: 18%; right: 8%;}

	#content.world .space-list .btn{width: 180px;}
	#content.world .space-list .btn .name{font-size: 14px; letter-spacing: 2px;}
	#content.world .space-list .btn .name-box1{left: 94px;}
	#content.world .space-list li:nth-child(2) .name-box1{left: 38px;}
	#content.world .space-list li:nth-child(4) .name-box1{left: 16px;}
}
@media all and (min-width: 1367px){
	#content.world .space-list li:hover .name-box{opacity: 0;}
	#content.world .space-list li:hover .name-box2{
		opacity: 1; visibility: visible;
		transition: opacity 0.3s, visibility 0.3s 0.7s;
	}
}
@media all and (min-width: 1367px) and (max-width: 1440px){
	#content.world .space-list .name-box2{top: 12px; left: -15px; gap: 14px;}
	#content.world .space-list .name-box2 .name + span{font-size: 14px;}
	#content.world .space-list .name-box2 .name + span::after{left: -11px;}
	#content.world .space-list li:nth-child(2):hover .name-box2{left: 20px;}
	#content.world .space-list li:nth-child(4):hover .name-box2{left: 18px;}
}
@media all and (min-width:1025px) {
	#content.world .section.intro .title-area{display: none !important;}
}
@media all and (max-width: 1024px) {
	#content.world .section.intro .video-wrap,
	#content.world .section.intro .btn .motion-btn{display: none !important;}

	/* #content.world .section.intro{height: auto; min-height: var(--vh100);} */
	#content.world .section.intro .title-area{ position: relative; z-index: 2; padding-top: 0; }

	#content.world .section.intro .visual-wrap.space{position: relative;
		padding-top: calc(var(--header) + 52px); padding-bottom: 60px;
		opacity: 1; z-index: 2;
	}
	#content.world .section.intro .visual-wrap.space::after{ content: "";
		position: absolute; inset: 0 0 0 0; width: 100%; height: 100%;
		background-color: var(--black-op-80); 
	}
	#content.world .space-list{position: relative; padding-top: 70px; z-index: 1;
		max-width: none; height: auto;
		display: flex; flex-wrap: wrap;
		justify-content: center; gap: 12px; padding-inline: 20px;
		transform: translate(0, 0); top: 0; left: 0; aspect-ratio: auto;
		width: 100%; 
	}
	#content.world .space-list li{position: static; transform: none; margin: 0 !important;}
	#content.world .space-list .btn{
		width: 335px; aspect-ratio: 669/360;
		background-size: cover; background-repeat: no-repeat;
		background-position: center center;
	}
	#content.world .space-list .btn .name-box1{display: none;}
	#content.world .space-list .btn .name-box2{ position: static; opacity: 1;
		max-width: 130px; width: 100%; height: 100%; margin-left: auto;
		display: flex; flex-direction: column; align-items: center;
		justify-content: center; gap: 4px; color: var(--white); visibility: visible;
	}
	#content.world .space-list .btn .name-box2 .name{font-size: clamp(14px,3.73vw,16px);}
	#content.world .space-list .btn .name-box2 .name + span{
		font-size: clamp(14px,3.73vw,16px);
		opacity: 0.6 !important; color: var(--gray-3); 
	}
	#content.world .space-list .btn .name-box2 .name + span::after{display: none;}

	#content.world .space-list li:nth-child(1) .btn{
		background-image: url("../images/games/GAME03_world1.png");
	}
	#content.world .space-list li:nth-child(2) .btn{
		background-image: url("../images/games/GAME03_world2.png");
	}
	#content.world .space-list li:nth-child(3) .btn{
		background-image: url("../images/games/GAME03_world3.png");
	}
	#content.world .space-list li:nth-child(4) .btn{
		background-image: url("../images/games/GAME03_world4.png");
	}
	#content.world .space-list li:nth-child(5) .btn{
		background-image: url("../images/games/GAME03_world5.png");
	}
}
@media all and (max-width: 1024px) and (max-height: 800px){
	#content.world .section.intro{height: auto; min-height: var(--vh100);}
	#content.world .space-list{height: 100%;}
}

@media all and (max-width: 768px) {
	#content.world .section.intro{height: auto; min-height: var(--vh100);}
	#content.world .space-list li{width: 100%; }
	#content.world .space-list li .btn{margin: 0 auto;}
}

@media all and (max-width: 680px){
	#content.world .space-list{padding-inline: 40px;}
	#content.world .space-list .btn{ width: 100%;}
}


/*** Detail ***/
#content.world .section.detail{
	position: absolute; inset: 0 0 0 0; width: 100%;
	opacity: 0; transition: opacity 0.6s;  z-index: -10;
}
#content.world .section.detail.active{opacity: 1; z-index: 2;}

#content.world .section.detail .btn.back{position: absolute; z-index: 5;
	top: calc(var(--header) + clamp(24px,6.4vw,40px));
	left: clamp(20px,5.33vw,40px)
}

#content.world .section.detail .detail-area,
#content.world .section.detail .swiper{width: 100%; height: 100%;}

/* visual */
#content.world .section.detail .video-wrap{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
}
#content.world .section.detail .video-wrap::after{content: "";
	position: absolute; top: 0; width: 100%; height: 100%;
	background: var(--black-op-40) url("../images/@common/bg-dot.png") center center / cover no-repeat;
}
#content.world .section.detail .video-wrap video{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
#content.world .section.detail .visual-wrap{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
	display: flex; align-items: center;
	justify-content: center; padding-bottom: 50px;
}
#content.world .section.detail .title-wrap{
	/* max-width: clamp(340px,90.67vw,610px); */ max-width: fit-content;
	width: calc(100% - 24px); text-align: center; color: var(--white);
}
#content.world .section.detail .title-wrap :is(.world, .text){
	opacity: 0; transform: translateY(20px);
	transition: transform 0.4s 0s ease, opacity 0.4s 0s ease;
}
#content.world .section.detail .title-wrap .world{font-size: clamp(16px,4.27vw,24px); line-height: 1.6;}
#content.world .section.detail .title-wrap .title{ overflow: hidden;
	height: 0px; line-height: 1.2;
	font-size: 62px; text-align: center;
	transition: height 0.4s 0s ease;
	margin-right: -25px; letter-spacing: 25px;
}
#content.world .section.detail .title-wrap .text{font-size: clamp(16px,4.27vw,18px);}
#content.world .section.detail .title-box{
	gap: clamp(4px,1.07vw,16px);
	margin-block: clamp(12px,3.2vw,20px) clamp(20px,5.33vw,46px);
}
#content.world .section.detail .title-box .lines{min-height: clamp(18px,4.8vw,32px)}

/* Swiper Main & Bullet */
#content.world #MainSwiper > ul > li{position: relative;}
#content.world #MainSwiper > ul > li{opacity: 0 !important; transition: opacity 0.5s !important;}
#content.world #MainSwiper > ul > li[class*="-slide-active"]{opacity: 1 !important;}

#content.world #MainSwiper > ul > li[class*="-slide-active"] ul li.swiper-slide-active .title-wrap :is(.world, .text){
	opacity: 1; transform: translateY(0px);
	transition: transform 0.4s 0.4s ease, opacity 0.4s 0.4s ease;
}
#content.world #MainSwiper > ul > li[class*="-slide-active"] ul li.swiper-slide-active .title-wrap .title{
	height: 85px; transition: height 0.4s 0.4s ease;
}

#content.world #MainDot{ position: absolute; z-index: 2;
	bottom: 0; left: 0; right: 0;
	padding-bottom: clamp(24px,6.4vw,40px); color: var(--white);
}
#content.world #MainDot ul{
	display: flex; gap: clamp(4px,1.07vw,16px);
	justify-content: center;
}
#content.world #MainDot li::before,
#content.world #MainDot .btn::after{content: ""; position: absolute;}

#content.world #MainDot li{ position: relative;
	width: fit-content; height: fit-content; margin: 0;
	opacity: 1 !important; background-color: transparent;
}
#content.world #MainDot li::before{
	display: none;
	width: clamp(6px,1.6vw,10px); height: clamp(6px,1.6vw,10px); top: 0px; left: 0px;
	background: url("../images/games/world_plus.svg") center center / cover no-repeat;
}

#content.world #MainDot .btn{
	width: 68px; height: fit-content; aspect-ratio: 68/68;

	background-size: cover; background-repeat: no-repeat;
	background-position: center center;
	-webkit-mask-size: cover;-webkit-mask-repeat: no-repeat;
	mask-size: cover;		 mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-image: url("../images/games/world01.svg");
	mask-image: url("../images/games/world01.svg");

	font-weight: 700; font-size: var(--fs-16-14);
}
#content.world #MainDot li:nth-child(1) .btn{ background-image: url("../images/games/world01.svg"); }
#content.world #MainDot li:nth-child(2) .btn{ background-image: url("../images/games/world02.svg"); }
#content.world #MainDot li:nth-child(3) .btn{ background-image: url("../images/games/world03.svg"); }
#content.world #MainDot li:nth-child(4) .btn{ background-image: url("../images/games/world04.svg"); }
#content.world #MainDot li:nth-child(5) .btn{ background-image: url("../images/games/world05.svg"); }

#content.world #MainDot .btn span{position: relative; z-index: 1; opacity: 0; transition: opacity 0.2s;}
#content.world #MainDot [class*="-bullet-active"]::before{display: block;}
#content.world #MainDot [class*="-bullet-active"] .btn{width: 88px;}
#content.world #MainDot [class*="-bullet-active"] .btn span{ opacity: 1;}
#content.world #MainDot [class*="-bullet-active"] .btn::after{
	width: 100%; height: 100%;
	background-color: var(--black-op-40);
}

#content.world .swipe-utilWrap{width: 100%; position: absolute; bottom: 150px; left: 0; right: 0;}

#content.world .swiper-btns{ position: absolute; z-index: 1;
	top: 50%; left: 0; right: 0; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: space-between;
}
#content.world .swiper-btns .btn{width: 60px; height: 60px;}

#content.world .sub-dot{position: relative;}
#content.world .sub-dot ul{
	display: flex; align-items: center;
	justify-content: center;
}
#content.world .sub-dot .btn{width: 200px; padding: 12px;}
#content.world .sub-dot .btn::after{font-size: 18px;}

@media all and (min-width: 769px) and (max-width:1024px) {
	#content.world .section.detail .title-wrap .title{
		font-size: 54px;
		margin-right: -20px; letter-spacing: 20px;
	}
	#content.world #MainSwiper > ul > li[class*="-slide-active"] ul li.swiper-slide-active .title-wrap .title{
		height: 70px;
	}

	/* #content.world #MainSwiper > ul > li[class*="-slide-active"] .title-wrap .title{ } */

	#content.world #MainDot .btn{width: 58px;}
	#content.world #MainDot [class*="-bullet-active"] .btn{width: 68px;}

	#content.world .swipe-utilWrap{bottom: 125px;}
	#content.world .sub-dot .btn{width: 165px; padding: 8px;}
	#content.world .sub-dot .btn::after{font-size: 16px;}
}
@media all and (min-width: 769px) and (max-width:1440px) and (max-height: 820px){
	#content.world .section.detail .title-wrap .title{ font-size: 48px; margin-right: -26px; letter-spacing: 26px; }

	#content.world #MainSwiper > ul > li[class*="-slide-active"] ul li.swiper-slide-active .title-wrap .title{
		height: 62px;
	}
	/* #content.world #MainSwiper > ul > li[class*="-slide-active"] .title-wrap .title{ height: 62px;} */
	#content.world .section.detail .title-box{ margin-block: 10px 20px;}

	#content.world #MainDot{padding-bottom: 24px;}
	#content.world #MainDot .btn{width: 58px;}
	#content.world #MainDot [class*="-bullet-active"] .btn{width: 68px;}

	#content.world .swipe-utilWrap{bottom: 115px;}
	#content.world .sub-dot .btn{width: 165px;}
}
@media all and (min-width: 769px) {
	/* Swiper Sub & Bullet */
	#content.world .swipe-utilWrap .swiper-btns{display: none !important;}
	#content.world .sub-dot{z-index: 1; left: 0 ; right: 0;}
	#content.world .sub-dot ul{
		display: flex; justify-content: center;
		gap: clamp(6px,0.78vw,20px);
	}
	#content.world .sub-dot li{position: relative;
		width: fit-content; height: fit-content; opacity: 1 !important;
		display: block !important; background-color: transparent;
	}
	#content.world .sub-dot li::after,
	#content.world .sub-dot li::before{ content: "";
		position: absolute;
		width: 10px; height: 10px;
		background: url("../images/games/world_plus.svg") center center / cover no-repeat;
		display: none;
	}
	#content.world .sub-dot li::after{top: 0; left: 0;}
	#content.world .sub-dot li::before{bottom: 0; right: 0;}


	#content.world .sub-dot .btn{
		aspect-ratio: 200/120; color: var(--white);
		align-items: flex-end; padding: 12px;

		background-size: cover; background-repeat: no-repeat;
		background-position: center center;
		-webkit-mask-size: cover;-webkit-mask-repeat: no-repeat;
		mask-size: cover;		 mask-repeat: no-repeat;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-image: url("../images/games/GAME03_mask_dot.svg");
		mask-image: url("../images/games/GAME03_mask_dot.svg");

		background-color: var(--black);
	}
	#content.world .sub-dot .btn::after{content: "";
		position: absolute; inset: 0 0 0 0; width: 100%; height: 100%;
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.21) 30%,rgba(0,0,0,0.7) 100%);
	}
	#content.world .sub-dot .btn span{position: relative; z-index: 1; width: 100%; height: 100%;}
	#content.world .sub-dot .btn span::after{ content: "";
		position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
		margin: 0 auto;
	}

	#content.world .sub-dot [class*="-bullet-active"]::after,
	#content.world .sub-dot [class*="-bullet-active"]::before{display: block;}
	#content.world .sub-dot [class*="-bullet-active"] .btn{ clip-path: polygon(13% 0, 100% 0, 100% 79%, 87% 100%, 0 100%, 0 21%); }
	#content.world .sub-dot [class*="-bullet-active"] .btn span{opacity: 0;}

	#content.world #SubDot-01 li:first-child .btn{background-image: url("../images/games/world01-1.png");}
	#content.world #SubDot-01 li:first-child .btn span::after{content: "守護者之塔";}
	#content.world #SubDot-01 li:last-child	.btn {background-image: url("../images/games/world01-2.png");}
	#content.world #SubDot-01 li:last-child	.btn span::after {content: "埃丹平原";}

	#content.world #SubDot-02 li:first-child .btn{background-image: url("../images/games/world02-1.png");}
	#content.world #SubDot-02 li:first-child .btn span::after{content: "艾莉亞平原";}
	#content.world #SubDot-02 li:last-child	.btn {background-image: url("../images/games/world02-2.png");}
	#content.world #SubDot-02 li:last-child	.btn span::after {content: "露娜山脈";}

	#content.world #SubDot-03 li:first-child .btn{background-image: url("../images/games/world03-1.png");}
	#content.world #SubDot-03 li:first-child .btn span::after{content: "扎里斯遺跡區";}
	#content.world #SubDot-03 li:last-child	.btn {background-image: url("../images/games/world03-2.png");}
	#content.world #SubDot-03 li:last-child	.btn span::after {content: "奧庫魯斯群島";}

	#content.world #SubDot-04 li:first-child .btn{background-image: url("../images/games/world04-1.png");}
	#content.world #SubDot-04 li:first-child .btn span::after{content: "加拉蒂亞冰原";}

	#content.world #SubDot-05 li:first-child .btn{background-image: url("../images/games/world05-1.png");}
	#content.world #SubDot-05 li:first-child .btn span::after{content: "莫蘭荒原";}
	#content.world #SubDot-05 li:last-child	.btn {background-image: url("../images/games/world05-2.png");}
	#content.world #SubDot-05 li:last-child	.btn span::after {content: "灰燼山";}
}
@media all and (max-width: 768px) {
	#content.world .section.detail{min-height: 640px;}
	#content.world .section.detail .btn.back{width: 105px;}
	#content.world .section.detail .title-wrap .title{
		font-size: clamp(28px,7.47vw,54px);
		margin-right: clamp(-25px,-3.2vw,-12px); letter-spacing: clamp(12px,3.2vw,25px);
	}
	#content.world #MainSwiper ul{ align-items: flex-end; }


	#content.world #MainSwiper > ul > li[class*="-slide-active"] ul li.swiper-slide-active .title-wrap .title{
		height: clamp(40px,10.67vw,70px);
	}

	/* #content.world #MainSwiper > ul > li[class*="-slide-active"] .title-wrap .title{  } */
	#content.world .section.detail .title-wrap .text{font-size: 14px;}

	#content.world #MainDot .btn{width: clamp(48px,12.8vw,58px);}
	#content.world #MainDot [class*="-bullet-active"] .btn{width: clamp(60px,16vw,68px);}

	#content.world .swipe-utilWrap{bottom: 128px;}
	#content.world .sub-dot{width: fit-content; margin: 0 auto;}
	#content.world .sub-dot .btn{width: 20px; padding: 8px;}
}


/*** GAME 4 Content ***/
#content.game-content{ position: relative; background-image: url("../images/games/GAME04.jpg"); }
#content.game-content::after{content: "";
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
	background: url("../images/@common/bg-dot.png") center center / cover no-repeat;
}

#content.game-content .page-content{ position: relative; z-index: 1;
	width: 100%; height: 100%; padding-bottom: 30px;
	display: flex; align-items: center;
	flex-direction: column;
	justify-content: space-between;
}
#content.game-content .visual-area{position: relative; 
	width: 100%; height: 100%; padding-inline: 24px;
	display: flex; align-items: center;
}
#content.game-content .visual-area #fullLine{
	position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto;
	width: calc(100% - 32px); margin: 0 auto;
}
#content.game-content .visual-area #fullLine defs + g g:nth-child(1) > g > path{fill: transparent;}
#content.game-content .visual-wrap{ 
	position: relative; z-index: 2; overflow: hidden;
	max-width: 750px; width: 100%; margin: 0 auto;
}
#content.game-content .visual-wrap .title-wrap{ 
	overflow: hidden; display: flex; align-items: center; gap: 14px;
	margin-bottom: 20px; justify-content: space-between;
}
#content.game-content .visual-wrap .title-wrap .title{
	height:  clamp(30px,8vw,48px);
	font-size: clamp(24px,6.4vw,40px); color: var(--white);
	transform: translateY(50px); opacity: 0;
}
#content.game-content .visual-wrap .title-wrap .text{color: var(--white);}
#content.game-content .visual-wrap #DSLine{
	max-width: 566px; width: 100%; aspect-ratio: 566/28; transform: rotate(-180deg);
}
#content.game-content .video-wrap{overflow: hidden; position: relative;
	width: 100%;  aspect-ratio: 880/495; background-color: var(--black);
}
#content.game-content .video-wrap video{
	width: 100%; height: 100%; object-fit: cover; object-position: center center;
	transition: transform 0.4s ease-in-out;
	transform: scale(1); transition: transform 0.6s ease-in-out;
}
#content.game-content .video-wrap.active video{transform: scale(1.2);}
#content.game-content .video-wrap .btn{position: absolute; border-radius: 0;
	width: 100%; height: 100%; top: 0;
	background-color: var(--black-op-40);
	opacity: 1; visibility: visible;
	transition: opacity 0.2s ease, visibility 0.3s ease;
}
#content.game-content .video-wrap .btn.active{opacity: 0; visibility: hidden;}

#content.game-content .swiper-area{
	position: relative; max-width: 1300px; width: 100%; 
	transform: translateY(150px); opacity: 0;
}
#content.game-content .tabs-area ul{width: fit-content; margin: 0 auto;}
#content.game-content .tabs-area li{width: auto !important;}
#content.game-content .tabs-area li .btn{overflow: hidden; position: relative;  color: var(--white);
	width: clamp(140px,37.33vw,220px) !important;
	height: auto; aspect-ratio: 240/128; 
	padding-top: clamp(15px,4vw,25px); padding-inline: clamp(16px,4.27vw,24px);
	background: url("../images/games/GAME04_box.svg") center center / cover no-repeat;
	border-radius: 0;
	display: flex; align-items: flex-start;
	justify-content: flex-start; font-size: 16px;
}
#content.game-content .tabs-area .pack-down{--gap: 14px; position: relative; z-index: 1;}
#content.game-content .tabs-area .pack-down span{line-height: 1.8; font-size: var(--fs-16-14);}
#content.game-content .tabs-area .pack-down .ico{background-color: var(--white);}
#content.game-content .tabs-area .img-wrap{position: absolute; top: 0; right: 0;
	width: clamp(105px,28vw,150px); aspect-ratio: 160/128;
	transition: transform 0.25s ease; transform: translateX(0px);
}
#content.game-content .tabs-area li.current .btn .ico{
	background-color: var(--primary); transition: all 0.25s ease;
}
#content.game-content .tabs-area li.current .btn .img-wrap{ transform: translateX(10px);}


#content.game-content .tabs-area .swiper-btns{
	position: absolute; top: 0; left: 0; right: 0; z-index: 1; 
	margin: 0 auto; justify-content: space-between;
}
#content.game-content .tabs-area .swiper-btns .btn{position: absolute; top: 0; border-radius: 0;}
#content.game-content .tabs-area .swiper-btns .btn.prev{left: 0;}
#content.game-content .tabs-area .swiper-btns .btn.next{right: 0;}

#content.game-content .tabs-area .swiper-btns .btn{width: 80px; height: 80px; aspect-ratio: 1/1;}
#content.game-content .tabs-area .swiper-btns .next{transform: rotate(-180deg);}

@media all and (min-width: 1921px){
	#content.game-content .page-content{padding-bottom: 3.13vw;}
	#content.game-content .visual-wrap{ max-width: 39.06vw; }
	#content.game-content .visual-wrap #DSLine{max-width: none; width: 29.48vw;}
	#content.game-content .visual-wrap .title-wrap .title{font-size: 2.08vw; height: 2.5vw;}
	#content.game-content .visual-wrap .title-wrap .text{font-size: 0.83vw;}

	#content.game-content .swiper-area{max-width: 67.71vw;}
	#content.game-content .tabs-area li .btn{width: 11.46vw !important ;}
	#content.game-content .tabs-area .img-wrap{width: 7.81vw;}
	#content.game-content .tabs-area .pack-down span{font-size: 0.83vw;}
	#content.game-content .tabs-area .pack-down .ico{width: 1.56vw; height: 1.56vw;}
}
@media all and (min-width: 1367px) {
	#content.game-content .tabs-area li:hover .btn .ico{
		/*background-color: var(--primary); transition: all 0.25s ease;*/
	}
	#content.game-content .tabs-area li:hover .btn .img-wrap{ transform: translateX(10px);}
}
@media all and (max-width: 1366px) {
	#content.game-content .page-content{padding-bottom: 0;}
	#content.game-content .tabs-area .swiper-btns{display: none;}
}
@media all and (min-width: 1121px){
	#content.game-content .tabs-area ul{transform: none !important;}
}
@media all and (max-width: 1024px){
	#content.game{min-height: 640px;}
	#content.game-content .visual-wrap .title-wrap{ text-align: center;
		flex-direction: column; align-items: flex-start; gap:10px;
	}
	#content.game-content .visual-wrap .title-wrap .title,
	#content.game-content .visual-wrap .text-wrap{width: 100%;}
	#content.game-content .visual-wrap #DSLine{max-width: none; width: 100%; margin-top: 20px;}
}
@media all and (max-width: 768px) {
	#content.game-content .visual-area #fullLine{display: none;}
	#content.game-content .visual-wrap .title-wrap .title{transform: translateY(20px);}

	#content.game-content .video-wrap .btn.play .ico{width: 120px; height: 120px;}
	#content.game-content .tabs-area .pack-down{--gap:4px}
	#content.game-content .tabs-area .btn .ico{width: 25px; height: 25px;}
	#content.game-content .swiper-area{transform: translateY(100px);}
} 
/* // [Ares Sub Content End] 서브 페이지 콘텐츠 종료 */



/* [Ares 시세&랭킹 Content] 서브 페이지 콘텐츠 */
/*** 시세 ***/
.content.quote .board_head .head-01,
.content.quote .board_item .item-box{max-width: 640px; width: 45%;}

.content.quote .board_head .head-01{ padding-inline: 40px;}

.content.quote .board_head .head-02,
.content.quote .board_item .item-info{width: 55%;}
.content.quote .board_head .head-02 li:nth-child(1),
.content.quote .board_item .item-info li:nth-child(1){max-width: 600px; width: 76%;}
.content.quote .board_head .head-02 li:nth-child(2),
.content.quote .board_item .item-info li:nth-child(2){max-width: 200px; width: 24%;}

.content.quote .board_head{/*display: block !important;*/ color: var(--gray-1)}
.content.quote .board_head .head-01{}
.content.quote .board_head .head-01 p > span{display: none}

.content.quote .board_head .head-02 p{text-align: center;}

.content.quote .board_item a{display: flex; align-items: center; flex-direction:revert; gap: 0px;}
.content.quote .board_item .item-info li:nth-child(2) p{justify-content: flex-end;}
@media all and (min-width: 1366px){
	.content.quote .board_item .item-info li:nth-child(2){padding-inline: 10px clamp(15px,2.08vw,40px); }
}
@media all and (min-width: 1201px) and (max-width:1366px){
	.content.quote .board_head .head-02 li:nth-child(1),
	.content.quote .board_item .item-info li:nth-child(1){max-width: 540px; width: 75%;}
	.content.quote .board_head .head-02 li:nth-child(2),
	.content.quote .board_item .item-info li:nth-child(2){max-width: 260px; width: 25%;}
	.content.quote .board_item .item-info li:nth-child(2){padding-inline: 10px 40px; }
}
@media all and (max-width: 1200px) {
	.content.quote .board_head .head-02 li:nth-child(1),
	.content.quote .board_item .item-info li:nth-child(1){display: none;}

	.content.quote .board_head{ font-size: 14px;}
	.content.quote .board_head .head-01 p > span{display: block;}

	.content.quote .board_head .head-01,
	.content.quote .board_item .item-box{max-width: none; width: calc(100% - 120px);}

	.content.quote .board_head .head-02,
	.content.quote .board_item .item-info{max-width: none; width: 120px}

	.content.quote .board_head .head-02 li:nth-child(2),
	.content.quote .board_item .item-info li:nth-child(2){max-width: none; width: 100%;}
}
/*** 시세 상세 ***/
.content.quote.view{}
.content.quote.view .board_content .title_wrap{
	display: flex; align-items: center;
	gap: 20px;
}
.content.quote.view .board_content .title_wrap .title{ font-size: 28px; font-weight: 700;}
.content.quote.view .board_content .title_wrap .title span{
	display: block; font-size: 16px; color: var(--gray-2);
	font-weight: 500;
}

.content.quote.view .board_content .img-wrap{
	width: 80px; aspect-ratio: 80/80
}
.content.quote.view .board_content .img-wrap img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
.content.quote.view .board_content .info.items{
	display: flex; align-items: center;
	gap: 20px; font-weight: 500;
}
.content.quote.view .board_content .info.items dd{color: var(--gray-2);}

.content.quote.view .board_content .post .title,
.content.quote.view .board_content .post .price-current{margin-bottom: 20px}
.content.quote.view .board_content .post .price-month{padding-bottom: 60px;}

.content.quote.view .board_content .price-month{ width: 100%;}
.content.quote.view .board_content .price-month span:not(.price){color: var(--gray-1);}
.content.quote.view .board_content .price-month .price{
	display: flex; align-items: center; gap:10px;
	color: var(--gray-2);
}

.content.quote.view .board_content .price-current,
.content.quote.view .board_content .price-month ul,
.content.quote.view .board_content .price-month li{
	width: 100%;
	display: flex; align-items: center;
	justify-content: space-between;
}
.content.quote.view .board_content .price-current,
.content.quote.view .board_content .price-month ul{padding-inline: 30px;}

.content.quote.view .board_content .price-current{height: 100px; background-color: #F3F4F8;}
.content.quote.view .board_content .price-current span{color: var(--black) !important; font-weight: 700;}
.content.quote.view .board_content .price-current .price{ font-size: 20px; }
.content.quote.view .board_content .price-month ul{
	flex-direction: column; justify-content: revert;
	gap:8px;
}

.content.quote.view .board_content .price-chart{ width: 100%; height: clamp(200px,53.33vw,300px); }
.content.quote.view .board_content .price-chart > div{ width: 100%; height: 100%;}

@media all and (min-width: 769px) and (max-width: 1200px){
	.content.quote.view .board_content .img-wrap{width: 60px;}
	.content.quote.view .board_content .title_wrap .title{font-size: 22px}
	.content.quote.view .board_content .price-current .price{font-size: 18px;}
}
@media all and (max-width: 768px) {
	.content.quote.view .board_content .title_wrap{gap: 10px;}
	.content.quote.view .board_content .title_wrap .title{font-size: 16px;}
	.content.quote.view .board_content .title_wrap .title span{font-size: 14px;}
	.content.quote.view .board_content .img-wrap{width: 48px}

	.content.quote.view .board_content .info.items{gap:16px; font-size: 14px;}
	.content.quote.view .board_content .price-month span,
	.content.quote.view .board_content .price-current .price{font-size: 14px;}
	.content.quote.view .board_content .price-current{height: 80px;}
	.content.quote.view .board_content .price-current,
	.content.quote.view .board_content .price-month ul{padding-inline: 16px;}

	.content.quote.view .board_content .post .title,
	.content.quote.view .board_content .post .price-current{margin-bottom: 12px;}
}

/*** 랭킹 ***/
.content.ranking{}
.content.ranking .my-server{
	display: flex; align-items: center;
	gap: 4px;
}
.content.ranking .my-server .server{
	width: 37px; height: 24px;
	display: flex; align-items: center;
	justify-content: center;
	font-family: var(--ff-pt); font-size: 12px; color: var(--white);
	background-color: #32C1D0; border-radius: 100px;
	line-height: 1;
}

.content.ranking .head-01,
.content.ranking .item-box{max-width: 700px; width: 51%; display: flex; align-items: center; }

.content.ranking .head-01 p:nth-child(1),
.content.ranking .item-box .ranking-wrap{width: 120px; text-align: center;}
.content.ranking .head-01 p:nth-child(2),
.content.ranking .item-box .profile-wrap{ width: calc(100% - 120px); padding-inline: 40px;}

.content.ranking .head-02,
.content.ranking .item-info{ width: 49%;}
.content.ranking .head-02 li,
.content.ranking .item-info li{ width: calc(100% / 4); }
.content.ranking .head-02 li p,
.content.ranking .item-info li p{text-align: center;}
.content.ranking .item-info li{padding-inline: 10px;}


.content.ranking .board_item a{display: flex; align-items: center; flex-direction:revert;}
.content.ranking .item-box{padding-inline: 0px}
.content.ranking .item-box .ranking-wrap{justify-content: center;}

.content.ranking .rank-list{height: 882px; overflow-y: auto;}
.content.ranking .board_item.my-ranking{position: sticky; top: 0; z-index: 1;}

@media all and (min-width: 1367px){}

@media all and (min-width: 1201px) and (max-width:1366px){}

@media all and (max-width: 1200px) {
	.content.ranking .my-server .server{
		width: 32px; height: 20px; font-size: 11px;
	}

	.content.ranking .board_item a{gap:12px;}

	.content.ranking .item-box{max-width: none; width: calc(100% - 80px)}
	.content.ranking .item-box .ranking-wrap{width: 50px;}
	.content.ranking .item-box .profile-wrap{width: calc(100% - 50px); padding-inline: 0;}

	.content.ranking .item-info{ width: 80px;}
	.content.ranking .item-info li{width: 100%}
	.content.ranking .item-info li:not(:last-child){display: none !important;}
}
/* // [Ares 시세&랭킹 Content] 서브 페이지 콘텐츠 종료 */