@charset "utf-8";
:root{
	--ff-happiness: 'Happiness-Sans';
}

@font-face {
	font-family: 'Happiness-Sans';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Happiness-Sans';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}


/* Global Common */
[class*="max-"]{ width: 100%; margin: 0 auto; }
.relative-2{position: relative;}
.bg-mask{
	background-position: center center;
	background-repeat: no-repeat; background-size: cover;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center center;
	mask-position: center center;
}

.ico.reward-open,
.ico.reward-close{width: clamp(23px,6.13vw,46px); height: clamp(23px,6.13vw,46px);}
.ico.reward-open {background-image: url("../images/launching/reward_open.png");}
.ico.reward-close{background-image: url("../images/launching/reward_close.png");}
.ico.scroll-down{
	width: 658px; height: 19px;
	background-image: url("../images/preorder/scrolldown.svg");
}

.ico.sns-mo{
	width: clamp(31px,8.27vw,62px); height: clamp(31px,8.27vw,62px);
}
.ico.youtube-mo{background-image: url("../images/preorder/youtube_mo.svg");}
.ico.facebook-mo{background-image: url("../images/preorder/facebook_mo.svg");}
.ico.line-mo{background-image: url("../images/preorder/line_mo.svg");}
@media all and (max-width: 768px) {
	.ico.scroll-down{
		width: 361px; height: 15px;
		background-image: url("../images/preorder/1P/scrolldown_mo.png");
	}
}

@media all and (min-width: 769px){
	.relative-2{top: -2px;}
}
@media all and (max-width: 768px){
	.relative-2{top: -1px;}
}

#content.launch{}
#content.launch  .float-area{ padding-inline: clamp(12px,3.2vw,25px);
	position: absolute; top: clamp(24px,6.4vw,40px); left: 0; right: 0;
	z-index: 5; transition: all 0.2s ease;
	display: flex; align-items: center;
	width: 100%; gap: 10px; justify-content: space-between;
}
#content.launch  .float-area .btn.home{
	gap: 10px; align-items: center; color: var(--white); font-size: 17px;
}
#content.launch  .float-area .btn.logout{max-width: 25px;}


#content.launch .button-area.utils .btn.sound{color: var(--white); letter-spacing: 0.06px;}
#content.launch .button-area.utils .btn.sound.current .ico{
	background-image: url("../images/@ico/sound.svg");
}
#content.launch .button-area.utils .btn .off{display: none;}
#content.launch .button-area.utils .btn.current .on{display: none;}
#content.launch .button-area.utils .btn.current .off{display: block;}

/*.scroll-down #content.launch .float-area{top: 25px;}*/
#content.launch .btn-top{
	position: fixed;  z-index: 6;
	bottom: clamp(15px,4vw,30px); right: clamp(15px,4vw,30px);
}
#content.launch .btn.top{
	width: clamp(40px,10.67vw,60px); height: clamp(40px,10.67vw,60px);
	background-color: var(--white); border-radius: 100px;
}

#content.launch .section{ width: 100%;
	background-position: center center;
	background-repeat: no-repeat; background-size: cover;
}
#content.launch .title-area{color: var(--white);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 10px;
}
#content.launch .title-area :is(.title,.text){line-height: 1.3; text-align: center;}
#content.launch .title-area .title{font-size: 37px;}
#content.launch .title-area .text,
#content.launch .title-area .data-box span{font-size: 17px;}

#content.launch .title-area .data-box{
	display: flex; align-items: center;
	justify-content: center; margin-top: 6px;
	background-position: center center;
	background-size: cover; background-repeat: no-repeat;
	background-image: url("../images/launching/databox_pc.png");

	width: 258px; aspect-ratio: 258/32;
}
#content.launch .title-area .data-box span{line-height: 1;}
#content.launch .button-area.join-now{
	display: flex; align-items: center;
	justify-content: center; margin-top: 18px;
}
#content.launch .button-area.join-now .btn{ font-weight: 500;
	background-image: url("../images/launching/btn01_pc.png");
	width: 463px; aspect-ratio: 463/82; font-size: 28px;
}
#content.launch .button-area.join-now .btn span{padding-bottom: 10px;}

#content.launch .notice-box{font-size: 12px; color: var(--black-op-60); font-weight: 500;}
/* @media all and (min-width: 1921px) {
	#content.launch .button-area.join-now{margin-top: 0.94vw;}
	#content.launch .button-area.join-now .btn{width: 24.11vw; font-size: 1.46vw;}
	#content.launch .button-area.join-now .btn span{padding-bottom: 0.52vw;}

	#content.launch .title-area{gap: 0.52vw;}
	#content.launch .title-area .title{font-size: 1.93vw;}
	#content.launch .title-area .text,
	#content.launch .title-area .data-box span{font-size: 0.88vw;}

	#content.launch .title-area .data-box{ width: 13.43vw; }
} */

#content.launch .item-reward{ position: absolute; display: none;}
#content.launch .item-reward .btn.reward-btn{position: relative; z-index: 2;}
#content.launch .item-reward .btn.reward-btn.active .ico.reward-open{
	background-image: url("../images/launching/reward_close.png");
}
#content.launch .item-reward .text-wrap{ z-index: 1;
	position: absolute; top: clamp(12px,3.2vw,23px); left: clamp(12px,3.2vw,23px);
	width: clamp(120px,32vw,240px); aspect-ratio: 240/104;
	display: none; align-items: center;
	justify-content: center; text-align: center;
	border: 2px solid #2190A8; background-color: rgba(44, 134, 148, 0.7);
}
#content.launch .item-reward.bottoms .text-wrap{
	top: auto !important; left: auto !important;
	bottom: clamp(12px,3.2vw,23px); right: clamp(12px,3.2vw,23px);

}
#content.launch .item-reward .text-wrap p{ color: #16E7FE; font-size: clamp(9px,2.4vw,14px);}
#content.launch .item-reward .text-wrap.active{display: flex;}

#content.launch .btn{border-radius: 0px;}

@media all and (max-width: 1366px){
	#content.launch .button-area.join-now .btn{
		width: 380px; font-size: 24px;
	}
}
@media all and (max-width: 1024px) {
	#content.launch .title-area .only-mo{display: block !important;}
}
@media all and (max-width: 768px){

	/*#content.launch .float-area{top: calc(var(--header) + 14px);}*/
	#content.launch .float-area .btn.home{
		font-size: clamp(14px,3.73vw,17px);
	}
	#content.launch .float-area .btn.home img{width: 24px;}
	.scroll-down #content.preorder .float-area{top: 14px;}

	#content.launch .button-area.join-now{margin-top: clamp(10px,2.67vw,18px);}
	#content.launch .button-area.join-now .btn{
		width: clamp(263px,70.13vw,463px);
		font-size: clamp(14px,3.73vw,28px);
		background-image: url("../images/launching/btn01_mo.png");
	}
	#content.launch .button-area.join-now .btn span{padding-bottom: clamp(5px,1.33vw,10px);}

	#content.launch .title-area{gap: 8px;}
	#content.launch .title-area .title{font-size: clamp(26px,6.93vw,37px);}
	#content.launch .title-area .text{font-size: clamp(12px,3.2vw,17px);}
	#content.launch .title-area .data-box{
		width: clamp(160px,42.67vw,200px); aspect-ratio: 200/23;
		background-image: url("../images/launching/databox_mo.png");
	}
	#content.launch .title-area .data-box span{font-size: clamp(11px,2.93vw,15px);}

	#content.launch .notice-box{font-size: clamp(8px,2.13vw,14px);}

	#content.launch .item-reward{display: block;}
	#content.launch .btn.top svg{width: 18px; height: 18px;}
}


/*** Section Visual(Page 1) ***/
.section.visual{height: var(--vh100);
	padding-block: calc(var(--header) + 40px) 30px; padding-inline: 15px;
}
.section.visual::after{ content: "";
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%; z-index: 1;
	background: var(--black-op-40) url("../images/preorder/bg-dot.png") center center / cover no-repeat;
}
.section.visual .video-wrap{
	position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
}
.section.visual .video-wrap .img-wrap{position: absolute; top: 0; left: 0; right: 0; z-index: 1;
	width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s;
}
.section.visual .video-wrap .img-wrap img{width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
.section.visual .video-wrap.load-video .img-wrap{opacity: 0; z-index: -10;}

.section.visual .video-wrap video{width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
.section.visual .visual-area{ position: absolute; z-index: 2;
	top: 50%; left: 0 ; right: 0; transform: translateY(-50%);
	width: 100%; height: 100%;
	display: flex; align-items: center;
	justify-content: center; flex-direction: column;
}
.section.visual #lottieAres{ overflow: hidden;
	max-width: 280px; width: 100%; aspect-ratio: 300/300; margin: 0 auto;
}
.section.visual #lottieAres defs + g > g:nth-child(1) path {
	background-color: transparent;
	fill: transparent;
}
.section.visual #btnPlay{ position: relative; z-index: 1;
	max-width: 166px; width: 100%; aspect-ratio: 166/94;
	margin: 30px auto 40px;
}
.section.visual .img-wrap.slogan{ position: relative;
	max-width: 460px; width: 100%; margin: 0 auto; right: -10px;
}
.section.visual .sns-wrap{
	position: absolute; top: 50%; right: 30px;
	transform: translateY(-50%);
}
.section.visual .sns-wrap ul{
	display: flex; gap: 20px;
	flex-direction: column;
}
.section.visual .sns-wrap ul li{position: relative;}
.section.visual .sns-wrap ul li + li::before{ content: "";
	position: absolute; top: -17px; left: 0; right: 0;
	width: 1px; height: 14px; margin: 0 auto;
	background-color: #C4C4C4;
}
.section.visual .sns-wrap .btn.bg-mask{
	position: relative; color: var(--white); font-size: 13px;
	width: 141px; aspect-ratio: 141/32;
	background-image: url("../images/preorder/1P/float.svg");
}
.section.visual .sns-wrap .btn.bg-mask span{position: relative; top: -1px;}


.section.visual .sns-wrap ul li:is(.sns-04, .sns-05)::after{
	content: ""; position: absolute; top: 0; left: -50px; z-index: -1;
	width: 115px; aspect-ratio: 115/33;
	background-position: center center;
	background-repeat: no-repeat; background-size: cover;
}
.section.visual .sns-wrap ul li.sns-04::after{
	background-image: url("../images/preorder/1P/playnow.svg");
}
.section.visual .sns-wrap ul li.sns-05::after{
	background-image: url("../images/preorder/1P/eventnow.svg");
}

.section.visual .event-now{
	position: absolute; z-index: 2;
	bottom: 70px; left: 0; right: 0; margin: 0 auto;
}
.section.visual .event-now .img-wrap{
	display: block; margin: 0 auto;
	width: 310px; aspect-ratio: 310/38;
}
.section.visual .event-now span{position: absolute;
	width: 100%; height: 100%; top: -1px;
	display: flex; align-items: center;
	justify-content: center; color: var(--white); font-size: 20px;
}

.section.visual .scroll-wrap{ z-index: 3;
	position: absolute; bottom: 15px; left: 0; right: 0;
	width: 100%; --gap:4px;
	color: var(--white);  font-size: 10px;
	animation: scrollAni 2.5s infinite;
}
@keyframes scrollAni {
	0%{ filter: drop-shadow(0px 0px 0px white) }
	50%{ filter: drop-shadow(0px 2px 8px white) }
	100%{ filter: drop-shadow(0px 0px 0px white) }
}
@media all and (min-width: 1921px) {
	.section.visual #lottieAres{max-width: 15.63vw;}
	.section.visual #btnPlay{max-width: 8.65vw;}
	.section.visual .img-wrap.slogan{max-width: 26.04vw;}
	.section.visual .img-wrap.openday{max-width: 31.56vw; top: -2.86vw;}
	.section.visual .scroll-wrap{bottom: 30px;}

	.section.visual .sns-wrap{right: 1.56vw;}
	.section.visual .sns-wrap .btn.bg-mask{width: 7.34vw;}
	.section.visual .sns-wrap ul li:is(.sns-04, .sns-05)::after{width: 5.99vw; left: -2.6vw;}

}
@media all and (min-width: 1920px) and (min-height: 1000px) {
	.section.visual{padding-block: 170px 30px;}
	.section.visual #btnPlay{margin: 35px auto 45px;}
}
@media all and (min-width: 1025px) {
	.section.visual .sns-wrap ul li:hover .btn.bg-mask{
		color: var(--black);
		background-image: url("../images/preorder/1P/float_on.png");
	}
}
@media all and (max-width: 1024px) and (orientation: portrait) {
	.section.visual .sns-wrap .btn.bg-mask span,
	.section.visual .sns-wrap li + li::before,
	.section.visual .sns-wrap li:not(.sns-04, .sns-05, .sns-06){display: none !important;}

	.section.visual .sns-wrap{
		position: relative; top: 0; right: 0;
		transform: none; margin-top: 32px;
	}
	.section.visual .sns-wrap ul{
		justify-content: center;
		flex-direction: initial; gap: 90px;
	}

	.section.visual .sns-wrap ul li.sns-04::before{display: block !important;}
	.section.visual .sns-wrap ul li.sns-04::before,
	.section.visual .sns-wrap ul li.sns-05::before{
		display: block !important;
		top: auto; bottom: -24px; left: 0; right: 0;
		width: 0; height: 0; margin: 0 auto;
		border-style: solid; background-color: transparent;
		border-width: 0px 12px 12px 12px;
	}
	.section.visual .sns-wrap ul li.sns-04::after,
	.section.visual .sns-wrap ul li.sns-05::after{
		top: auto; bottom: -50px; left: 50%;
		transform: translateX(-50%);
		width: 100px; height: 28px;
		color: var(--white); font-size: 14px;
		clip-path: polygon(6% 0, 100% 0, 100% 79%, 94% 100%, 0 100%, 0 21%);
		display: flex; align-items: center;
		justify-content: center; background-image: none;
	}

	.section.visual .sns-wrap ul li.sns-04::before{
		border-color: transparent transparent #CC0000 transparent;
	}
	.section.visual .sns-wrap ul li.sns-04::after{
		content: "PLAY NOW";
		background-color: #CC0000;
	}
	.section.visual .sns-wrap ul li.sns-05::before{
		border-color: transparent transparent #00b6dd transparent;
	}
	.section.visual .sns-wrap ul li.sns-05::after{
		content: "EVENT";
		color: var(--black); background-color: #00b6dd;
	}

	.section.visual .sns-wrap .sns-04 .btn.bg-mask,
	.section.visual .sns-wrap .sns-05 .btn.bg-mask,
	.section.visual .sns-wrap .sns-06 .btn.bg-mask{
		width: 62px; aspect-ratio: 62/62;
		background-repeat: no-repeat; background-size: cover;
		background-position: center center;
	}

	.section.visual .sns-wrap .sns-04 .btn.bg-mask{background-image: url("../images/preorder/1P/youtube.png");}
	.section.visual .sns-wrap .sns-05 .btn.bg-mask{background-image: url("../images/preorder/1P/facebook.png");}
	.section.visual .sns-wrap .sns-06 .btn.bg-mask{background-image: url("../images/preorder/1P/line.png");}
}
@media all and (min-width: 769px) and (max-width: 1440px) and (max-height: 820px) {
	.section.visual #lottieAres{max-width: 250px;}
	.section.visual #btnPlay{max-width: 120px; margin: clamp(20px,2.43vw,35px) auto clamp(20px,2.43vw,35px);}
	.section.visual .img-wrap.slogan{max-width: 360px;}

	.section.visual .event-now{ bottom: 60px; }
	.section.visual .event-now .img-wrap{ width: 240px;}
	.section.visual .event-now span{ font-size: 15px; }
}
@media all and (max-width: 768px) {
	.section.visual #lottieAres{max-width: clamp(150px,42.40vw,220px);}
	.section.visual #btnPlay{max-width: clamp(110px,29.33vw,140px); margin: 12px auto 12px;}
	.section.visual .img-wrap.slogan{right: clamp(-11px,-2.93vw,-22px);
		max-width: clamp(240px,64vw,400px);
	}

	.section.visual .visual-wrap .float-list ul{gap: clamp(15px,4vw,30px) 16px;}

	.section.visual .event-now{ bottom: 60px; }
	.section.visual .event-now .img-wrap{
		width: clamp(210px,56vw,266px); aspect-ratio: 266/33;
	}
	.section.visual .event-now span{
		font-size: clamp(14px,3.73vw,17px);
	}

	.section.visual .sns-wrap{margin-top: clamp(12px,3.2vw,24px);}
	.section.visual .sns-wrap ul{gap: clamp(73px,19.47vw,90px);}
	.section.visual .sns-wrap .sns-04 .btn.bg-mask,
	.section.visual .sns-wrap .sns-05 .btn.bg-mask,
	.section.visual .sns-wrap .sns-06 .btn.bg-mask{width: clamp(34px,9.07vw,44px);}

	.section.visual .sns-wrap ul li.sns-04::before,
	.section.visual .sns-wrap ul li.sns-05::before{
		bottom: -16px;
		border-width: 0px 6px 6px 6px;
	}
	.section.visual .sns-wrap ul li.sns-04::after,
	.section.visual .sns-wrap ul li.sns-05::after{
		bottom: -35px;
		width: 73px; height: 20px; font-size: 10px;
		display: flex; align-items: center;
		justify-content: center;
	}
}
@media all and (max-width: 1110px) and (max-height: 690px) {
	.section.visual{position: relative; height: 820px;}
	.section.visual .sns-wrap .btn.bg-mask span,
	.section.visual .sns-wrap li + li::before,
	.section.visual .sns-wrap li:not(.sns-04, .sns-05, .sns-06){display: none !important;}

	.section.visual .sns-wrap{
		position: relative; top: 0; right: 0;
		transform: none; margin-top: 32px;
	}
	.section.visual .sns-wrap ul{
		justify-content: center;
		flex-direction: initial; gap: 90px;
	}

	.section.visual .sns-wrap ul li.sns-04::before{display: block !important;}
	.section.visual .sns-wrap ul li.sns-04::before,
	.section.visual .sns-wrap ul li.sns-05::before{
		display: block !important;
		top: auto; bottom: -24px; left: 0; right: 0;
		width: 0; height: 0; margin: 0 auto;
		border-style: solid; background-color: transparent;
		border-width: 0px 12px 12px 12px;
	}
	.section.visual .sns-wrap ul li.sns-04::after,
	.section.visual .sns-wrap ul li.sns-05::after{
		top: auto; bottom: -50px; left: 50%;
		transform: translateX(-50%);
		width: 100px; height: 28px;
		color: var(--white); font-size: 14px;
		clip-path: polygon(6% 0, 100% 0, 100% 79%, 94% 100%, 0 100%, 0 21%);
		display: flex; align-items: center;
		justify-content: center; background-image: none;
	}

	.section.visual .sns-wrap ul li.sns-04::before{
		border-color: transparent transparent #CC0000 transparent;
	}
	.section.visual .sns-wrap ul li.sns-04::after{
		content: "PLAY NOW";
		background-color: #CC0000;
	}
	.section.visual .sns-wrap ul li.sns-05::before{
		border-color: transparent transparent #00b6dd transparent;
	}
	.section.visual .sns-wrap ul li.sns-05::after{
		content: "EVENT";
		color: var(--black); background-color: #00b6dd;
	}

	.section.visual .sns-wrap .sns-04 .btn.bg-mask,
	.section.visual .sns-wrap .sns-05 .btn.bg-mask,
	.section.visual .sns-wrap .sns-06 .btn.bg-mask{
		width: 62px; aspect-ratio: 62/62;
		background-repeat: no-repeat; background-size: cover;
		background-position: center center;
	}

	.section.visual .sns-wrap .sns-04 .btn.bg-mask{background-image: url("../images/preorder/1P/youtube.png");}
	.section.visual .sns-wrap .sns-05 .btn.bg-mask{background-image: url("../images/preorder/1P/facebook.png");}
	.section.visual .sns-wrap .sns-06 .btn.bg-mask{background-image: url("../images/preorder/1P/line.png");}

	.section.visual .sns-wrap{margin-top: clamp(12px,3.2vw,24px);}
	.section.visual .sns-wrap ul{gap: clamp(73px,19.47vw,90px);}
	.section.visual .sns-wrap .sns-04 .btn.bg-mask,
	.section.visual .sns-wrap .sns-05 .btn.bg-mask,
	.section.visual .sns-wrap .sns-06 .btn.bg-mask{width: clamp(34px,9.07vw,44px);}

	.section.visual .sns-wrap ul li.sns-04::before,
	.section.visual .sns-wrap ul li.sns-05::before{
		bottom: -16px;
		border-width: 0px 6px 6px 6px;
	}
	.section.visual .sns-wrap ul li.sns-04::after,
	.section.visual .sns-wrap ul li.sns-05::after{
		bottom: -35px;
		width: 73px; height: 20px; font-size: 10px;
		display: flex; align-items: center;
		justify-content: center;
	}
}



/*** Section Together(Page 2) ***/
.section.together{
	padding-block: clamp(55px,14.67vw,100px) clamp(45px,12vw,85px);
	padding-inline: 20px;
	background-image: url("../images/launching/2P/section02_pc.png");
}
.section.together .page-content{margin-top: clamp(-20px,-0.8vw,-3px);}
.section.together .max-1390{max-width: 1390px;margin: 0 auto;}
.section.together .max-1390 > ul{ display: flex; gap: clamp(6px,0.78vw,18px); justify-content: center;}
.section.together .box-wrap{
	width: 686px; aspect-ratio: 686/679;
	padding-block: clamp(18px,2.34vw,40px) clamp(10px,1.3vw,20px);
}
.section.together .box-wrap .box{position: relative; color: var(--white); width: 100%; height: 100%;}
.section.together .box-wrap .box h3{
	padding-top: 16px; text-align: center;
	font-size: 35px; font-weight: 500;
}
.section.together .box-wrap .box ul{
	position: absolute; bottom: 20px; left: 0; right: 0;
	width: 100%; margin: 0 auto;
	display: flex; align-items: center;
	justify-content: center;
	flex-wrap: wrap; gap: 8px 2px;
}
.section.together .box-wrap .box ul li{}
.section.together .box-wrap .box ul li .bg-mask{
	width: 159px; aspect-ratio: 159/24;
	display: flex; align-items: center;
	justify-content: center;
}
.section.together .box-wrap .box ul li span{font-size: 13px;}

.section.together .box-01{
	background-image: url("../images/launching/2P/box01_pc.png");
	padding-inline: 20px 0;
}
.section.together .box-01 .box h3{padding-left: 20px;}

.section.together .box-02{
	background-image: url("../images/launching/2P/box02_pc.png");
	padding-inline: 0px 20px;
}
@media all and (min-width:1025px) and (max-width: 1366px){
	.section.together .max-1390{max-width: 980px;}

	.section.together .box-wrap .box h3{font-size: 24px; padding-top: 12px;}
	.section.together .box-01 .box h3{padding-left: 14px;}

	.section.together .box-wrap .box ul li .bg-mask{width: 129px;}
	.section.together .box-wrap .box ul li:first-child .bg-mask{width: 198px;}
	.section.together .box-wrap .box ul li span{font-size: 11px;}

}
@media all and (min-width: 769px) and (max-width: 1024px){
	.section.together .max-1390{max-width: 720px;}
	.section.together .box-wrap .box h3{font-size: 17px; padding-top: 8px;}
	.section.together .box-01 .box h3{padding-left: 10px;}

	.section.together .box-wrap .box ul{gap: 4px 2px;}
	.section.together .box-wrap .box ul li .bg-mask{width: 99px;}
	.section.together .box-wrap .box ul li:first-child .bg-mask{width: 168px;}
	.section.together .box-wrap .box ul li span{font-size: 9px;}

	.section.together .box-01{padding-inline: 10px 0;}
	.section.together .box-02{padding-inline: 0 10px;}
}
@media all and (max-width: 768px) {
	.section.together{
		background-image: url("../images/launching/2P/section02_mo.png");
		padding-inline: clamp(10px,2.67vw,40px);
	}
	.section.together .max-1390 > ul{gap: 2px;}
	.section.together .box-wrap{
		width: clamp(170px,45.33vw,334px); aspect-ratio: 334/468;
		padding-block: clamp(10px,2.67vw,20px) clamp(5px,1.33vw,10px);
	}
	.section.together .box-wrap .box{height: auto;}
	.section.together .box-wrap .box h3{
		padding-top: clamp(6px,1.6vw,12px); font-size: clamp(10px,2.67vw,19px);
	}
	.section.together .box-wrap .box ul{
		position: relative; bottom: auto;
		padding-top: clamp(10px,2.67vw,18px);
		gap: clamp(2px,0.56vw,5px);
	}
	.section.together .box-wrap .box ul li:first-child .bg-mask,
	.section.together .box-wrap .box ul li .bg-mask{
		width: clamp(130px,34.67vw,239px); aspect-ratio: 239/24;
	}
	.section.together .box-wrap .box ul li span{font-size: clamp(7px,1.87vw,14px);}
	.section.together .box-01{
		background-image: url("../images/launching/2P/box01_mo.png");
		padding-inline: clamp(5px,1.33vw,10px) 0;
	}
	.section.together .box-01 .box h3{padding-left: clamp(5px,1.33vw,15px);}
	.section.together .box-01 .box ul li .bg-mask{background-image: url("../images/launching/2P/re01_mo.png");}

	.section.together .box-02{
		background-image: url("../images/launching/2P/box02_mo.png");
		padding-inline: 0px clamp(5px,1.33vw,10px);
	}
}
/*** // Section Together(Page 2) ***/


/*** Section Friend(Page 3) ***/
.section.friend{
	padding-block: clamp(100px,26.67vw,125px) clamp(20px,5.33vw,95px);
	padding-inline: clamp(20px,1.95vw,40px);
	background-image: url("../images/launching/3P/section03_pc.png");
}
.section.friend .max-inner{max-width: 1100px; }

.section.friend .tabs{gap: 4px;
	align-items: center;
	justify-content: center;
}
.section.friend .tabs li{width: 50%;}
.section.friend .tabs li .btn{
	width: 100%; aspect-ratio: 531/56;
	color: #bcb1b1; transition: none;
	font-size: 22px; background-size: contain;
}
.section.friend .tabs li.current .btn{
	color: var(--black); font-weight: 500;
	aspect-ratio: 548/72;
}
.section.friend .tabs li:first-child .btn{
	background-image: url("../images/launching/3P/tab01_pc.png");
}
.section.friend .tabs li:first-child.current .btn{
	background-image: url("../images/launching/3P/tab01_pc_on.png");
}
.section.friend .tabs li:last-child .btn{
	background-image: url("../images/launching/3P/tab02_pc.png");
}
.section.friend .tabs li:last-child.current .btn {
	background-image: url("../images/launching/3P/tab02_pc_on.png");
}
.section.friend .tabsContent-area{margin-top: 30px;}

.section.friend #tab01{padding-bottom: 175px;}
.section.friend #tab01 .box-area{position: relative;}
.section.friend #tab01 .box-area > .notice-box{display: none;}
.section.friend #tab01 .title-box{
	width: 100%; aspect-ratio: 1100/646;
	background-image: url("../images/launching/3P/tab01_bg_pc.png");
}
.section.friend #tab01 .title-box .text-wrap{
	width: 100%;
	color: var(--white); text-align: center;
}
.section.friend #tab01 .title-box h2{
	font-size: 53px; padding-block: 35px 15px;
	text-shadow:0 0 15px #16E7FE; line-height: 1;
}
.section.friend #tab01 .title-box p{font-size: 20px; line-height: 1.3;}

.section.friend #tab01 .box-list{
	position: absolute; top: 175px; width: 100%;
	display: flex; flex-wrap: wrap; gap: 15px 10px;
}
.section.friend #tab01 .box-01 {
	width: 430px; aspect-ratio: 430/456; margin-top: 12px;
	background-image: url("../images/launching/3P/tab01_type_pc.png");
}
.section.friend #tab01 .box-01 dl{color: var(--white); text-align: center;}
.section.friend #tab01 .box-01 dt{font-size: 24px; font-weight: 500; width: 100%;
	aspect-ratio: 430/48;
	display: flex; align-items: center;
	justify-content: center; line-height: 1;
	padding-left: 7px;
}
.section.friend #tab01 .box-01 dd{font-size: 22px; font-weight: 500; width: 100%;
	display: flex; align-items: center;
	justify-content: center;
}
.section.friend #tab01 .box-01 dd:nth-child(2){aspect-ratio: 430/100;}
.section.friend #tab01 .box-01 dd:nth-child(3){aspect-ratio: 430/95;}
.section.friend #tab01 .box-01 dd:nth-child(4){aspect-ratio: 430/98;}
.section.friend #tab01 .box-01 dd:nth-child(5){aspect-ratio: 430/118;}
.section.friend #tab01 .box-01 dd:nth-child(even){color: var(--black);}

.section.friend #tab01 .box-02 { position: relative;
	width: 660px; aspect-ratio: 660/471;
	background-image: url("../images/launching/3P/tab01_reward_pc.png");
}
.section.friend #tab01 .box-02 h3{
	text-align: center;	line-height: 1; padding-block: 28px 34px;
	font-size: 30px; font-weight: 600; color: var(--white);
}
.section.friend #tab01 .box-02 .count-wrap ul,
.section.friend #tab01 .box-02 .reward-wrap ul{
	display: flex; align-items: center;
	justify-content: center;
}

.section.friend #tab01 .box-02 .count-wrap{}
.section.friend #tab01 .box-02 .count-wrap ul{gap: 20px;}
.section.friend #tab01 .box-02 .count-box{
	width: 283px; aspect-ratio: 283/67;
	background-image: url("../images/launching/3P/tab01_reward_count_pc.png");
	display: flex; align-items: center;
	justify-content: center;
}
.section.friend #tab01 .box-02 .count-box .tit{ font-weight: 600;
	width: 155px; aspect-ratio: 155/67; font-size: 17px; color: var(--white);
	display: flex; align-items: center;
	justify-content: center;
}
.section.friend #tab01 .box-02 li:nth-child(2) .count-box .tit{font-size: 15px;}

.section.friend #tab01 .box-02 .count-box .count{
	width: 130px; aspect-ratio: 130/67; font-size: 26px; color: #252731;
	display: flex; align-items: center;
	justify-content: center;
}

.section.friend #tab01 .box-02 .reward-wrap{margin-top: 18px;}
.section.friend #tab01 .box-02 .reward-wrap ul{gap: 22px;}
.section.friend #tab01 .box-02 .reward-wrap li > div.bg-mask{
	width: 171px; aspect-ratio: 171/258; position: relative;
}
.section.friend #tab01 .box-02 .reward-01{
	background-image: url("../images/launching/3P/reward01_pc.png");
}
.section.friend #tab01 .box-02 .reward-02{
	background-image: url("../images/launching/3P/reward02_pc.png");
}
.section.friend #tab01 .box-02 .reward-03{
	background-image: url("../images/launching/3P/reward03_pc.png");
}
.section.friend #tab01 .box-02 .reward-wrap .title{
	font-size: 17px; color: var(--white); padding-top: 10px;
	line-height: 1.3; text-align: center; font-weight: 500;
}
.section.friend #tab01 .box-02 .reward-wrap .title span{
	display: block;
	font-size: 12px; color: #abadb7;
}

.section.friend #tab01 .box-02 .reward-wrap .btn-box,
.section.friend #tab01 .box-02 .reward-wrap .btn-box .btn{
	display: flex; align-items: center;
	justify-content: center;
}
.section.friend #tab01 .box-02 .reward-wrap .btn-box{
	position: absolute; bottom: 8px; left: 0; right: 0;
	flex-direction: column; margin: 0 auto; gap: 4px;
}
.section.friend #tab01 .box-02 .reward-wrap .btn-box .cnt{font-size: 17px; color: var(--white); font-weight: 500;}
.section.friend #tab01 .box-02 .reward-wrap .btn-box .btn{
	width: 153px; aspect-ratio: 153/42;
	background-image: url("../images/launching/3P/tab01_reward_btn_pc.png");
}

.section.friend #tab01 .box-03 { position: relative;
	width: 100%; aspect-ratio: 1080/116; padding: 8px 12px;
	background-image: url("../images/launching/3P/tab01_url_bg_pc.png");
}
.section.friend #tab01 .box-03 .btn.btn-url{
	width: 397px; aspect-ratio: 397/46; color: #23262e;
	background-image: url("../images/launching/3P/tab01_url_btn_pc.png");
	font-size: 26px; font-weight: 600;
}
.section.friend #tab01 .box-03 .url-wrap{
	width: 1021px; aspect-ratio: 1021/75; position: absolute; bottom: 8px;
	background-image: url("../images/launching/3P/tab01_url_pc.png");
	display: flex; align-items: flex-end;
}
.section.friend #tab01 .box-03 .url-wrap input{
	width: calc(100% - 48px); height: 48px; padding: 0 16px;
	font-size: 20px; color: var(--white-op-60);
}
.section.friend #tab01 .box-03 .url-wrap .btn.copy{width: 48px; height: 48px;}
.section.friend #tab01 .box-03 .url-wrap .notice-box{position: absolute; top: 5px; right: 14px;}


.section.friend #tab02{}
.section.friend #tab02{padding-bottom: 175px;}
.section.friend #tab02 .box-area{position: relative;}
.section.friend #tab02 .box-area > .notice-box{display: none;}
.section.friend #tab02 .title-box{
	width: 100%; aspect-ratio: 1080/646;
	background-image: url("../images/launching/3P/tab02_bg_pc.png");
}
.section.friend #tab02 .title-box .text-wrap{
	width: 100%;
	color: var(--white); text-align: center;
}
.section.friend #tab02 .title-box h2{
	font-size: 53px; padding-block: 35px 15px;
	text-shadow:0 0 15px #16E7FE; line-height: 1;
}
.section.friend #tab02 .title-box p{font-size: 20px; line-height: 1.3;}
.section.friend #tab02 .box-list{
	position: absolute; top: 175px; width: 100%;
	display: flex; flex-wrap: wrap; gap: 4px 20px;
}

.section.friend #tab02 .box-01{ position: relative;
	width: 531px; aspect-ratio: 531/507;
	background-image: url("../images/launching/3P/tab02_form_pc.png");
}
.section.friend #tab02 .box-01 .title{
	color: var(--white); font-weight: 500; text-align: center ;
	line-height: 1.2; font-size: 37px; padding-block: 58px 28px;
}
.section.friend #tab02 .box-01 .title span{color: #16e7fe;}
.section.friend #tab02 .box-01 .bg-mask.box{
	aspect-ratio: 420/37; color: var(--white-op-60);
	background-image: url("../images/launching/3P/tab02_form_box_pc.png");
	display: flex; align-items: center;
	justify-content: center;
	width: 420px; font-size: 21px; margin: 0 auto;
}

.section.friend #tab02 .box-01 form{margin-top: 42px;}
.section.friend #tab02 .box-01 .input-box,
.section.friend #tab02 .box-01 .btn.apply{
	width: 476px; aspect-ratio: 476/68;
	margin: 0 auto;
}
.section.friend #tab02 .box-01 .input-box{
	background-image: url("../images/launching/3P/tab02_form_input_pc.png");
	display: flex; align-items: center; margin-bottom: 8px;
}
.section.friend #tab02 .box-01 .input-box input{
	width: 363px; aspect-ratio: 363/68; font-size: 24px;
	color: var(--black-80); text-align: center;
}
.section.friend #tab02 .box-01 .input-box .btn{
	width: 113px; aspect-ratio: 113/68; font-size: 27px; font-weight: 600;
	display: flex; align-items: center;
	justify-content: center;
}

.section.friend #tab02 .box-01 .btn.apply{ font-weight: 500;
	background-image: url("../images/launching/3P/tab02_form_btn_pc.png");
	display: flex; align-items: center; transition: none;
	justify-content: center; font-size: 30px;
}
.section.friend #tab02 .box-01 .notice-box{
	color: var(--white); text-align: center;
	margin-top: 10px; font-size: 18px;
}

.section.friend #tab02 .box-02{
	width: 527px; aspect-ratio: 527/507;
	background-image: url("../images/launching/3P/tab02_reward_pc.png");
}
.section.friend #tab02 .box-02 .title{
	text-align: center; color: var(--white);
	font-weight: 600; line-height: 1;
	font-size: 36px; padding-block: 48px 24px;
}
.section.friend #tab02 .box-02 ul{
	display: flex; justify-content: center;
	gap: 8px;
}
.section.friend #tab02 .box-02 li{position: relative;}
.section.friend #tab02 .box-02 li .text-wrap{text-align: center;}
.section.friend #tab02 .box-02 li .text-wrap :is(p, span){line-height: 1;}
.section.friend #tab02 .box-02 li .text-wrap p{
	font-weight: 500; font-size: 17px;
	padding-block: 18px 16px;
}
.section.friend #tab02 .box-02 li .text-wrap span{
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto; font-size: 15px; color: #a1afc1;
	width: 180px; aspect-ratio: 180/30;
}

.section.friend #tab02 .box-02 .reward-01{
	width: 246px; aspect-ratio: 246/323;
	background-image: url("../images/launching/3P/tab02_reward01_pc.png");
}

.section.friend #tab02 .box-02 .reward-02{
	width: 244px; aspect-ratio: 244/260; height: 100%;
	background-image: url("../images/launching/3P/tab02_reward02_pc.png");
}
.section.friend #tab02 .box-02 .reward-02 .btn.btn-reward{
	position: absolute; bottom: -61px;
	width: 244px; aspect-ratio: 244/53;
	background-image: url("../images/launching/3P/tab02_reward_btn_pc.png");
	font-size: 25px;
}

.section.friend #tab01 .box-02 .pop-notice,
.section.friend #tab02 .box-01 .pop-notice{
	position: absolute;
	left: 0; right: 0; font-size: 14px; color: #c3cad6;
	margin: 0 auto; text-align: center;
}
.section.friend #tab01 .box-02 .pop-notice .btn,
.section.friend #tab02 .box-01 .pop-notice .btn{width: 100%;}

.section.friend #tab01 .box-02 .pop-notice{bottom: 3px;}
.section.friend #tab02 .box-01 .pop-notice{ bottom: 28px; }

@media all and (min-width: 769px) and (max-width: 1920px){
	.section.friend .tabs li .btn{ font-size: clamp(17px,2.21vw,22px); }
}
@media all and (min-width:1025px) and (max-width: 1366px){
	.section.friend .max-inner{max-width: 980px;}

	.section.friend #tab01{}
	.section.friend #tab01 .title-box h2,
	.section.friend #tab02 .title-box h2{font-size: 44px;}
	.section.friend #tab01 .title-box p,
	.section.friend #tab02 .title-box p{font-size: 18px;}

	.section.friend #tab01 .box-list{}
	.section.friend #tab01 .box-01{width: 380px;}
	.section.friend #tab01 .box-01 dt{font-size: 20px; aspect-ratio: 430/55;}
	.section.friend #tab01 .box-01 dd{font-size: 18px;}
	.section.friend #tab01 .box-01 dd:nth-child(2){aspect-ratio: 430/93;}
	.section.friend #tab01 .box-01 dd:nth-child(3){aspect-ratio: 430/95;}
	.section.friend #tab01 .box-01 dd:nth-child(4){aspect-ratio: 430/98;}
	.section.friend #tab01 .box-01 dd:nth-child(5){aspect-ratio: 430/120;}

	.section.friend #tab01 .box-02{width: 590px;}
	.section.friend #tab01 .box-02 h3{ padding-block: 28px 30px; font-size: 24px; }

	.section.friend #tab01 .box-02 .count-wrap ul{gap: 10px;}
	.section.friend #tab01 .box-02 .count-box{ width: 253px; }
	.section.friend #tab01 .box-02 .count-box .tit{font-size: 16px; }
	.section.friend #tab01 .box-02 li:nth-child(2) .count-box .tit{font-size: 14px;}
	.section.friend #tab01 .box-02 .count-box .count{font-size: 22px; }

	.section.friend #tab01 .box-02 .reward-wrap{margin-top: 10px;}
	.section.friend #tab01 .box-02 .reward-wrap ul{gap: 12px;}

	.section.friend #tab01 .box-03{}
	.section.friend #tab01 .box-03 .btn.btn-url{ width: 340px; font-size: 22px; }
	.section.friend #tab01 .box-03 .url-wrap{ width: 920px;}
	.section.friend #tab01 .box-03 .url-wrap input{
		width: calc(100% - 42px); height: 42px; font-size: 18px;
	}
	.section.friend #tab01 .box-03 .url-wrap .btn.copy{width: 42px; height: 42px;}
	.section.friend #tab01 .box-03 .url-wrap .notice-box{right: 10px;}
	.section.friend #tab01 .box-03 .url-wrap .notice-box p{font-size: 11px;}


	.section.friend #tab02 .box-01,
	.section.friend #tab02 .box-02{width: 480px;}

	.section.friend #tab02 .box-01 .title{ font-size: 32px; padding-block: 52px 30px; }
	.section.friend #tab02 .box-01 .bg-mask.box{ width: 360px; font-size: 18px; }

	.section.friend #tab02 .box-01 form{margin-top: 40px;}
	.section.friend #tab02 .box-01 .input-box,
	.section.friend #tab02 .box-01 .btn.apply{ width: 400px; }
	.section.friend #tab02 .box-01 .input-box{ margin-bottom: 8px; }
	.section.friend #tab02 .box-01 .input-box input{ width: 363px; font-size: 22px; }
	.section.friend #tab02 .box-01 .input-box .btn{ width: 113px; font-size: 24px; }

	.section.friend #tab02 .box-01 .btn.apply{ font-size: 26px; }
	.section.friend #tab02 .box-01 .notice-box{ margin-top: 10px; font-size: 16px; }

	.section.friend #tab02 .box-02 .title{ font-size: 32px; padding-block: 44px 24px; }
	.section.friend #tab02 .box-02 li .text-wrap p{ font-size: 15px; padding-block: 16px 12px; }
	.section.friend #tab02 .box-02 li .text-wrap span{ font-size: 13px; width: 180px; }

	.section.friend #tab01 .box-02 .reward-wrap li > div.bg-mask{width: 161px;}
	.section.friend #tab02 .box-02 .reward-01{ width: 220px; }
	.section.friend #tab02 .box-02 .reward-02{ width: 216px; }
	.section.friend #tab02 .box-02 .reward-02 .btn.btn-reward{ bottom: -57px; width: 216px; font-size: 22px; }

	.section.friend #tab01 .box-02 .pop-notice,
	.section.friend #tab02 .box-01 .pop-notice{font-size: 12px;}

	.section.friend #tab02 .box-01 .pop-notice{ bottom: 26px;}

}
@media all and (min-width: 769px) and (max-width: 1024px){
	.section.friend .max-inner{max-width: 720px;}

	.section.friend #tab01{}
	.section.friend #tab01 .title-box h2,
	.section.friend #tab02 .title-box h2{font-size: 38px;}
	.section.friend #tab01 .title-box p,
	.section.friend #tab02 .title-box p{font-size: 16px;}

	.section.friend #tab01 .box-list{top: 140px; gap: 10px 10px}
	.section.friend #tab01 .box-01{width: 280px;}
	.section.friend #tab01 .box-01 dt{font-size: 15px; aspect-ratio: 430/46;}
	.section.friend #tab01 .box-01 dd{font-size: 13px;}
	.section.friend #tab01 .box-01 dd:nth-child(2){aspect-ratio: 430/98;}
	.section.friend #tab01 .box-01 dd:nth-child(3){aspect-ratio: 430/95;}
	.section.friend #tab01 .box-01 dd:nth-child(4){aspect-ratio: 430/98;}
	.section.friend #tab01 .box-01 dd:nth-child(5){aspect-ratio: 430/115;}

	.section.friend #tab01 .box-02{width: 430px;}
	.section.friend #tab01 .box-02 h3{ padding-block: 20px 20px; font-size: 20px; }

	.section.friend #tab01 .box-02 .count-wrap ul{gap: 5px;}
	.section.friend #tab01 .box-02 .count-box{ width: 193px; }
	.section.friend #tab01 .box-02 .count-box .tit{font-size: 14px; }
	.section.friend #tab01 .box-02 li:nth-child(2) .count-box .tit{font-size: 12px;}
	.section.friend #tab01 .box-02 .count-box .count{font-size: 18px; }

	.section.friend #tab01 .box-02 .reward-wrap{margin-top: 5px;}
	.section.friend #tab01 .box-02 .reward-wrap ul{gap: 12px;}
	.section.friend #tab01 .box-02 .reward-wrap li > div.bg-mask{ width: 118px; }
	.section.friend #tab01 .box-02 .reward-wrap .title{ font-size: 12px; padding-top: 4px; }
	.section.friend #tab01 .box-02 .reward-wrap .title span{ font-size: 10px; }

	.section.friend #tab01 .box-02 .reward-wrap .btn-box{ bottom: 4px; gap: 4px; }
	.section.friend #tab01 .box-02 .reward-wrap .btn-box .cnt{font-size: 12px;}
	.section.friend #tab01 .box-02 .reward-wrap .btn-box .btn{ width: 103px; font-size: 12px;}

	.section.friend #tab01 .box-03{}
	.section.friend #tab01 .box-03 .btn.btn-url{ width: 220px; font-size: 14px; }
	.section.friend #tab01 .box-03 .url-wrap{ width: 660px;}
	.section.friend #tab01 .box-03 .url-wrap input{
		width: calc(100% - 30px); height: 30px;
		font-size: 12px;
	}
	.section.friend #tab01 .box-03 .url-wrap .btn.copy{width: 30px; height: 30px;}
	.section.friend #tab01 .box-03 .url-wrap .notice-box{top: 3px; right: 5px;}
	.section.friend #tab01 .box-03 .url-wrap .notice-box p{font-size: 8px;}


	.section.friend #tab02 .box-list{gap: 4px 10px;}
	.section.friend #tab02 .box-01,
	.section.friend #tab02 .box-02{width: 355px;}

	.section.friend #tab02 .box-01 .title{ font-size: 26px; padding-block: 36px 18px; }
	.section.friend #tab02 .box-01 .bg-mask.box{ width: 284px; font-size: 16px; }
	.section.friend #tab02 .box-01 .bg-mask.box span{position: relative; top: -1.5px;}

	.section.friend #tab02 .box-01 form{margin-top: 25px;}
	.section.friend #tab02 .box-01 .input-box,
	.section.friend #tab02 .box-01 .btn.apply{ width: 280px; }
	.section.friend #tab02 .box-01 .input-box{ margin-bottom: 4px; }
	.section.friend #tab02 .box-01 .input-box input{ width: 213px; font-size: 16px; }
	.section.friend #tab02 .box-01 .input-box .btn{ width: 67px; font-size: 18px; }

	.section.friend #tab02 .box-01 .btn.apply{ font-size: 18px; }
	.section.friend #tab02 .box-01 .notice-box{ margin-top: 6px; font-size: 13px; }

	.section.friend #tab02 .box-02 .title{ font-size: 24px; padding-block: 32px 20px; }
	.section.friend #tab02 .box-02 li .text-wrap p{ font-size: 11px; padding-block: 12px 9px; }
	.section.friend #tab02 .box-02 li .text-wrap span{ font-size: 9px; width: 116px; }

	.section.friend #tab02 .box-02 .reward-01{ width: 160px; }
	.section.friend #tab02 .box-02 .reward-02{ width: 156px; }
	.section.friend #tab02 .box-02 .reward-02 .btn.btn-reward{ bottom: -42px; width: 156px; font-size: 18px; }

	.section.friend #tab01 .box-02 .pop-notice,
	.section.friend #tab02 .box-01 .pop-notice{font-size: 10px;}

	.section.friend #tab01 .box-02 .pop-notice{ bottom: 2px;}
	.section.friend #tab02 .box-01 .pop-notice{bottom: 19px;}

}
@media all and (max-width: 768px) {
	.section.friend{
		padding-inline: clamp(10px,2.67vw,40px);
		background-image: url("../images/launching/3P/section03_mo.png");
	}
	.section.friend .tabs li,
	.section.friend .tabs li.current{width: clamp(166px,44.27vw,334px);}
	.section.friend .tabs li .btn{
		aspect-ratio: 334/56;
		font-size: clamp(14px,3.73vw,22px);
	}
	.section.friend .tabs li.current .btn{ aspect-ratio: 346/72; }

	.section.friend .tabs li:first-child .btn{
		background-image: url("../images/launching/3P/tab01_mo.png");
	}
	.section.friend .tabs li:first-child .btn span{padding-left: 12px;}
	.section.friend .tabs li:first-child.current .btn{
		background-image: url("../images/launching/3P/tab01_mo_on.png");
	}
	.section.friend .tabs li:first-child.current .btn span{padding-left: 0px;}

	.section.friend .tabs li:last-child .btn{
		background-image: url("../images/launching/3P/tab02_mo.png");
	}
	.section.friend .tabs li:last-child .btn span{padding-right: 12px;}

	.section.friend .tabs li:last-child.current .btn {
		background-image: url("../images/launching/3P/tab02_mo_on.png");
	}
	.section.friend .tabs li:last-child.current .btn span{padding-right: 0px;}
	.section.friend .tabsContent-area{margin-top: clamp(10px,2.67vw,20px);}


	.section.friend #tab01,
	.section.friend #tab02{padding-bottom: 0;}
	.section.friend #tab01 .box-area > .notice-box{
		display: block; text-align: center;
		position: relative; top: clamp(-25px,-6.67vw,-15px);
	}
	.section.friend #tab01 .box-area > .notice-box p{
		color: var(--white-op-60);
		font-size: clamp(8px,2.13vw,16px);
	}

	.section.friend #tab01 .title-box,
	.section.friend #tab01 .box-01,
	.section.friend #tab01 .box-02,
	.section.friend #tab01 .box-03{width: clamp(340px,90.67vw,670px); margin: 0 auto;}

	.section.friend #tab01 .title-box{
		background-image: url("../images/launching/3P/tab01_bg_mo.png");
		aspect-ratio: 670/181;
	}
	.section.friend #tab01 .title-box h2{
		padding-block: clamp(11px,2.93vw,22px) clamp(6px,1.6vw,12px);
		font-size: clamp(21px,5.6vw,42px);
	}
	.section.friend #tab01 .title-box p{font-size: clamp(10px,2.67vw,20px);}

	.section.friend #tab01 .box-list{
		position: relative; top: clamp(-32px,-8.53vw,-16px);
		gap: clamp(6px,1.6vw,12px);
	}
	.section.friend #tab01 .box-01 { order: 1;
		aspect-ratio: 670/281; margin-top: 12px;
		background-image: url("../images/launching/3P/tab01_type_mo.png");
	}
	.section.friend #tab01 .box-01 dt{font-size: clamp(10px,2.67vw,20px); aspect-ratio: 670/44; padding-left: 0px;}
	.section.friend #tab01 .box-01 dd{font-size: clamp(11px,2.93vw,22px); line-height: 1;}
	.section.friend #tab01 .box-01 dd:nth-child(2){aspect-ratio: 670/46;}
	.section.friend #tab01 .box-01 dd:nth-child(3){aspect-ratio: 670/70;}
	.section.friend #tab01 .box-01 dd:nth-child(4){aspect-ratio: 670/56;}
	.section.friend #tab01 .box-01 dd:nth-child(5){aspect-ratio: 670/65;}

	.section.friend #tab01 .box-02 {
		aspect-ratio: 672/361; order: 3;
		background-image: url("../images/launching/3P/tab01_reward_mo.png");
	}
	.section.friend #tab01 .box-02 h3{
		padding-block: clamp(8px,2.13vw,16px) clamp(11px,2.93vw,22px);
		font-size: clamp(14px,3.73vw,28px);
	}

	.section.friend #tab01 .box-02 .count-wrap ul{gap: clamp(15px,4vw,30px);}
	.section.friend #tab01 .box-02 .count-box{width: clamp(126px,33.6vw,232px);}

	.section.friend #tab01 .box-02 .count-box .tit,
	.section.friend #tab01 .box-02 li:nth-child(2) .count-box .tit{font-size: clamp(8px,2.13vw,14px);}
	.section.friend #tab01 .box-02 .count-box .count{font-size: clamp(10px,2.67vw,20px); }

	.section.friend #tab01 .box-02 .reward-wrap{margin-top: clamp(5px,1.33vw,10px);}
	.section.friend #tab01 .box-02 .reward-wrap ul{gap: clamp(15px,4vw,30px);}
	.section.friend #tab01 .box-02 .reward-wrap li > div.bg-mask{ width: clamp(80px,21.33vw,160px); aspect-ratio: 160/200; }
	.section.friend #tab01 .box-02 .reward-01{
		background-image: url("../images/launching/3P/reward01_mo.png");
	}
	.section.friend #tab01 .box-02 .reward-02{
		background-image: url("../images/launching/3P/reward02_mo.png");
	}
	.section.friend #tab01 .box-02 .reward-03{
		background-image: url("../images/launching/3P/reward03_mo.png");
	}

	.section.friend #tab01 .box-02 .reward-wrap .title{
		font-size: clamp(7.5px,2vw,15px);
		padding-top: clamp(2.5px,0.67vw,5px); line-height: 1.4;
	}
	.section.friend #tab01 .box-02 .reward-wrap .title span{ font-size: clamp(7px,1.87vw,14px); }

	.section.friend #tab01 .box-02 .reward-wrap .btn-box{ bottom: clamp(3px,0.8vw,6px); gap: 4px; }
	.section.friend #tab01 .box-02 .reward-wrap .btn-box .cnt{font-size: clamp(9px,2.4vw,17px);}
	.section.friend #tab01 .box-02 .reward-wrap .btn-box .btn{
		width: clamp(75px,20vw,150px); aspect-ratio: 150/31; font-size: clamp(8px,2.13vw,16px);
		background-image: url("../images/launching/3P/tab01_reward_btn_mo.png");
	}

	.section.friend #tab01 .box-02 .item-reward{bottom: clamp(28px,7.47vw,56px); right: clamp(-6px,-0.8vw,-3px);}
	.section.friend #tab01 .box-02 .item-reward .text-wrap{
		width: clamp(70px,18.67vw,140px); aspect-ratio: 140/70;
		bottom: clamp(8.5px,2.27vw,17px); right: clamp(8.5px,2.27vw,17px);
	}
	.section.friend #tab01 .box-02 .item-reward .text-wrap p{font-size: clamp(6px,1.6vw,10px);}
	.section.friend #tab01 .box-02 .item-reward .ico{
		width: clamp(17px,4.53vw,34px); height: clamp(17px,4.53vw,34px);
	}

	.section.friend #tab01 .box-03 { position: relative;
		aspect-ratio: 670/130; order: 2; padding: clamp(5px,1.33vw,10px) 0 clamp(2px,0.53vw,4px);
		background-image: url("../images/launching/3P/tab01_url_bg_mo.png");
	}
	.section.friend #tab01 .box-03 .btn.btn-url{  margin: 0 auto;
		width: clamp(180px,48vw,360px); aspect-ratio: 360/48; font-size: clamp(14px,3.73vw,28px);
		background-image: url("../images/launching/3P/tab01_url_btn_mo.png");
	}
	.section.friend #tab01 .box-03 .url-wrap{ position: relative; inset: 0 0 0 0;
		width: clamp(250px,66.67vw,500px); aspect-ratio: 500/45; margin: 4px auto 0;
		background-image: url("../images/launching/3P/tab01_url_mo.png");
	}
	.section.friend #tab01 .box-03 .url-wrap input{ text-align: center;
		width: 90%; margin: 0 auto;
		height: clamp(22px,5.87vw,44px); font-size: clamp(9px,2.4vw,18px);
	}
	.section.friend #tab01 .box-03 .url-wrap .btn.copy{
		position: absolute; top: 0; right: 0; z-index: 1;
		width: clamp(22px,5.87vw,44px); height: clamp(22px,5.87vw,44px);
	}
	.section.friend #tab01 .box-03 .url-wrap .notice-box{
		top: auto; bottom: clamp(-20px,-2.67vw,-10px); left: 0; right: 0; width: 100%;
		font-size: clamp(6px,1.6vw,11px); color: var(--black-op-60);
		text-align: center;
	}


	.section.friend #tab02{}
	.section.friend #tab02 .title-box{
		width: clamp(340px,90.67vw,670px); margin: 0 auto;
		background-image: url("../images/launching/3P/tab02_bg_mo.png");
		aspect-ratio: 670/181;
	}
	.section.friend #tab02 .title-box h2{
		padding-block: clamp(11px,2.93vw,22px) clamp(6px,1.6vw,12px);
		font-size: clamp(21px,5.6vw,42px);
	}
	.section.friend #tab02 .title-box p{font-size: clamp(10px,2.67vw,20px);}

	.section.friend #tab02 .box-list{
		position: relative; top: -6.25vw;
		gap: clamp(2px,0.53vw,4px);
	}
	.section.friend #tab02 .box-01,
	.section.friend #tab02 .box-02{
		width: clamp(340px,90.67vw,670px); margin: 0 auto;
	}
	.section.friend #tab02 .box-01{
		aspect-ratio: 670/398;
		background-image: url("../images/launching/3P/tab02_form_mo.png");
	}
	.section.friend #tab02 .box-01 .title{
		font-size: clamp(16px,4.27vw,32px);
		padding-block: clamp(26px,6.93vw,52px) clamp(5px,1.33vw,10px);
	}
	.section.friend #tab02 .box-01 .bg-mask.box{
		width: clamp(173px,46.13vw,346px); aspect-ratio: 346/35; font-size: clamp(10px,2.67vw,20px);
		background-image: url("../images/launching/3P/tab02_form_box_mo.png");
	}
	.section.friend #tab02 .box-01 .bg-mask.box span{position: relative;}

	.section.friend #tab02 .box-01 form{margin-top: clamp(5px,1.33vw,10px);}
	.section.friend #tab02 .box-01 .input-box,
	.section.friend #tab02 .box-01 .btn.apply{
		width: clamp(213px,56.8vw,426px); aspect-ratio: 426/62;
	}
	.section.friend #tab02 .box-01 .input-box{
		background-image: url("../images/launching/3P/tab02_form_input_mo.png");
		margin-bottom: clamp(3px,0.8vw,6px);
	}
	.section.friend #tab02 .box-01 .input-box input{
		aspect-ratio: 326/62;
		width: clamp(163px,43.47vw,326px); font-size: clamp(11px,2.93vw,22px);
	}
	.section.friend #tab02 .box-01 .input-box .btn{
		aspect-ratio: 100/62;
		width: clamp(50px,13.33vw,100px); font-size: clamp(12px,3.2vw,24px);
	}
	.section.friend #tab02 .box-01 .btn.apply{
		background-image: url("../images/launching/3P/tab02_form_btn_mo.png");
		font-size: clamp(14px,3.73vw,28px);
	}
	.section.friend #tab02 .box-01 .notice-box{ margin-top: clamp(4px,1.07vw,8px); font-size: clamp(9px,2.4vw,15px); }


	.section.friend #tab02 .box-02{
		aspect-ratio: 670/401;
		background-image: url("../images/launching/3P/tab02_reward_mo.png");
	}
	.section.friend #tab02 .box-02 .title{
		font-size: clamp(16px,4.27vw,32px);
		padding-block: clamp(14px,3.73vw,28px) clamp(11px,2.93vw,22px);
	}
	.section.friend #tab02 .box-02 li .text-wrap p{
		font-size: clamp(9px,2.4vw,18px);
		padding-block: clamp(9px,2.4vw,18px) 0;
	}
	.section.friend #tab02 .box-02 li .text-wrap span{ display: none; }


	.section.friend #tab02 .box-02 .reward-01,
	.section.friend #tab02 .box-02 .reward-02,
	.section.friend #tab02 .box-02 .reward-02 .btn.btn-reward{
		width: clamp(130px,34.67vw,260px);
	}

	.section.friend #tab02 .box-02 .reward-01{
		aspect-ratio: 260/289;
		background-image: url("../images/launching/3P/tab02_reward01_mo.png");
	}
	.section.friend #tab02 .box-02 .reward-02{
		aspect-ratio: 260/229;
		background-image: url("../images/launching/3P/tab02_reward02_mo.png");
	}
	.section.friend #tab02 .box-02 .reward-02 .btn.btn-reward{
		bottom: -7.81vw; font-size: clamp(12px,3.2vw,24px);
		aspect-ratio: 259/54;
		background-image: url("../images/launching/3P/tab02_reward_btn_mo.png");
	}

	.section.friend #tab02 .box-02 .item-reward{top: clamp(30px,8vw,60px); right: clamp(11px,2.93vw,22px);}
	.section.friend #tab02 .box-02 .item-reward .text-wrap{
		left: auto !important;
		right: clamp(8.5px,2.27vw,17px)
	}
	.section.friend #tab02 .box-02 .item-reward .text-wrap{
		width: clamp(95px,25.33vw,190px); aspect-ratio: 190/130;
		top: clamp(8.5px,2.27vw,17px); right: clamp(8.5px,2.27vw,17px);
	}
	.section.friend #tab02 .box-02 .item-reward .text-wrap p{font-size: clamp(8px,2.13vw,15px); line-height: 1.2;}
	.section.friend #tab02 .box-02 .item-reward .ico{
		width: clamp(17px,4.53vw,34px); height: clamp(17px,4.53vw,34px);
	}


	.section.friend #tab01 .box-02 .pop-notice{
		font-size: clamp(6px,1.6vw,11px);
		bottom: clamp(1.5px,0.4vw,3px);
	}
	.section.friend #tab02 .box-01 .pop-notice{
		font-size: clamp(7px,1.87vw,14px);
		bottom: clamp(10.5px,2.8vw,20px);
	}

}

/*** // Section Friend(Page 3) ***/


/*** Section Guild(Page 4) ***/
.section.guild{
	padding-block: clamp(55px,14.67vw,90px) clamp(25px,6.67vw,65px);
	padding-inline: 20px;
	background-image: url("../images/launching/4P/section04_pc.png");
}
.section.guild .max-inner{max-width: 1295px; }
.section.guild .page-content{margin-top: -15px}

.section.guild .box-area{
	width: 100%; aspect-ratio: 1295/696;
	background-image: url("../images/launching/4P/boxarea_pc.png");
	padding-top: 50px;
}
.section.guild .box-area .box-01{
	width: calc(100% - 36px); aspect-ratio: 1256/259; margin: 0 auto;
	background-image: url("../images/launching/4P/box01_pc.png");
}
.section.guild .box-area .box-01 .text-wrap{
	width: 460px; aspect-ratio: 460/250; margin-left: auto;
	padding-block: 15px; padding-inline: 15px;
}
.section.guild .box-area .box-01 dl{color: var(--white);}
.section.guild .box-area .box-01 dt{
	height: 43px; line-height: 43px;
	font-size: 22px; padding-left: 25px;
}
.section.guild .box-area .box-01 dd{
	display: flex; justify-content: center;
	flex-direction: column; gap: 4px;
	font-size: 16px; padding-block: 10px;
}

.section.guild .box-area .box-02{
	overflow: hidden; position: relative;
	width: calc(100% - 36px); aspect-ratio: 1256/360;
	margin-block: 10px 0; margin-inline: auto;
	padding-block: 21px 15px; padding-inline: 13px;

	background-image: url("../images/launching/4P/box02_pc.png");
	-webkit-mask-image: url("../images/launching/4P/box02_pc_mask.png");
	mask-image: url("../images/launching/4P/box02_pc_mask.png");
}

.section.guild .box-area .box-02 .reward-area{
	display: flex; gap: 14px; text-align: center;
}
.section.guild .box-area .box-02 .reward-area h3{
	font-size: 19px; font-weight: 600;
	padding-block: 4px 8px;
}
.section.guild .box-area .box-02 .reward-area p{
	font-size: 17px; color: var(--white-op-60);
}

.section.guild .box-area .box-02 .reward-01{
	width: 584px; aspect-ratio: 584/325;
}
.section.guild .box-area .box-02 .reward-02{
	width: 310px; aspect-ratio: 310/306;
}
.section.guild .box-area .box-02 .reward-03{
	width: 310px; aspect-ratio: 310/306;
}

.section.guild .box-area .box-02 .notice-box{
	position: absolute; bottom: 7px; right: 280px;
}
@media all and (min-width:1025px) and (max-width: 1366px){
	.section.guild .max-inner{max-width: 980px;}
	.section.guild .box-area {padding-top: 40px;}

	.section.guild .box-area .box-01 .text-wrap{
		width: 345px; padding-block: 10px; padding-inline: 10px;
	}
	.section.guild .box-area .box-01 dt{
		height: 33px; line-height: 33px;
		font-size: 18px; padding-left: 20px;
	}
	.section.guild .box-area .box-01 dd{ gap: 0px;
		font-size: 14px; padding-block: 6px;
	}
	.section.guild .box-area .box-02{padding-block: 15px 10px; padding-inline: 9px;}
	.section.guild .box-area .box-02 .reward-area{gap: 10px;}
	.section.guild .box-area .box-02 .reward-area h3{
		font-size: 15px; padding-block: 3px 7px;
	}
	.section.guild .box-area .box-02 .reward-area p{ font-size: 13px; }

	.section.guild .box-area .box-02 .notice-box{
		font-size: 9px !important; right: 210px; bottom: 6px;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px){
	.section.guild .max-inner{max-width: 720px;}
	.section.guild .box-area {padding-top: 28px;}
	.section.guild .box-area .box-01,
	.section.guild .box-area .box-02{width: calc(100% - 22px);}

	.section.guild .box-area .box-01 .text-wrap{
		width: 255px; padding-block: 8px; padding-inline: 8px;
	}
	.section.guild .box-area .box-01 dt{
		height: 23px; line-height: 23px;
		font-size: 13px; padding-left: 12px;
	}
	.section.guild .box-area .box-01 dd{ gap: 0px;
		font-size: 10px; padding-block: 5px;
	}

	.section.guild .box-area .box-02{margin-block: 5px 0;
		padding-block: 11px 7px; padding-inline: 7px;
	}
	.section.guild .box-area .box-02 .reward-area{gap: 8px;}
	.section.guild .box-area .box-02 .reward-area h3{
		font-size: 11px; padding-block: 2px 6px;
	}
	.section.guild .box-area .box-02 .reward-area p{ font-size: 9px; }


	.section.guild .box-area .box-02 .notice-box{
		font-size: 7px !important; right: 150px; bottom: 4px;
	}

}
@media all and (max-width: 768px) {
	.section.guild{
		padding-inline: clamp(10px,2.67vw,40px);
		background-image: url("../images/launching/4P/section04_mo.png");
	}
	.section.guild .page-content{margin-top: clamp(-12px,-1.6vw,-6px)}
	.section.guild .box-area{
		padding-top: clamp(22px,5.87vw,44px);
		width: clamp(340px,90.67vw,670px); aspect-ratio: 670/958; margin: 0 auto;
		background-image: url("../images/launching/4P/boxarea_mo.png");
	}
	.section.guild .box-area .box-01{
		width: clamp(325px,86.67vw,640px); aspect-ratio: 640/404;
		background-image: url("../images/launching/4P/box01_mo.png");
		display: flex; align-items: flex-end;
	}
	.section.guild .box-area .box-01 .text-wrap{
		width: 100%; aspect-ratio: 630/194; padding-block: 0; padding-inline: 0;
		text-align: center;
	}
	.section.guild .box-area .box-01 dt{ line-height: 1;
		height: auto; aspect-ratio: 640/35; padding-block: 0;
		font-size: clamp(10px,2.67vw,19px); padding-left: 0;
		display: flex; align-items: center;
		justify-content: center;
	}
	.section.guild .box-area .box-01 dd{ gap: 0px;
		font-size: clamp(8px,2.13vw,16px); padding-block: 0;
		aspect-ratio: 640/37;
	}
	.section.guild .box-area .box-01 dl:nth-child(2) dd{
		padding-block: clamp(4px,1.07vw,8px);
		aspect-ratio: 640/90;
	}

	.section.guild .box-area .box-02{
		width: clamp(320px,85.33vw,630px); aspect-ratio: 630/497;
		margin-block: clamp(2px,0.53vw,4px);
		padding-block: clamp(6px,1.6vw,12px); padding-inline: clamp(4.5px,1.2vw,9px);
		background-image: url("../images/launching/4P/box02_mo.png");
		-webkit-mask-image: url("../images/launching/4P/box02_mo_mask.png");
		mask-image: url("../images/launching/4P/box02_mo_mask.png");
	}
	.section.guild .box-area .box-02 .reward-area{
		flex-wrap: wrap;
		gap: clamp(4px,0.8vw,6px) clamp(5px,1.33vw,10px);
	}
	.section.guild .box-area .box-02 .reward-01{
		width: 100%; aspect-ratio: 611/241;
	}
	.section.guild .box-area .box-02 .reward-02,
	.section.guild .box-area .box-02 .reward-03{
		width: calc(50% - clamp(3px,0.8vw,6px));
		aspect-ratio: 306/200;
	}
	.section.guild .box-area .box-02 .reward-area h3{
		font-size: clamp(9.5px,2.53vw,19px);
		padding-block: clamp(1px,0.27vw,2px) clamp(4px,1.07vw,8px); line-height: 1;
	}
	.section.guild .box-area .box-02 .reward-area p{ font-size: clamp(8px,2.13vw,16px); }




	.section.guild .box-area .box-02 .notice-box{
		bottom: clamp(5px,1.33vw,10px);
		left: 0; right: 0; text-align: center;
	}
}
/*** // Section Guild(Page 4) ***/


/*** Section Ranking(Page 5) ***/
.section.ranking{
	padding-block: clamp(55px,14.67vw,110px) clamp(25px,6.67vw,85px);
	padding-inline: 20px;
	background-image: url("../images/launching/5P/section05_pc.png");
}
.section.ranking .max-inner{}
.section.ranking .page-content{padding-top: 30px;}

.section.ranking .bg-mask{
	width: 1260px; margin: 0 auto;
	aspect-ratio: 1257/593;
	background-image: url("../images/launching/5P/box.png");
}
.section.ranking ul{position: relative; display: flex; height: 100%;}
.section.ranking li{
	position: relative; width: 50%; height: 100%;
	display: flex;
}
.section.ranking .box-wrap .text-wrap{width: 100%; height: fit-content;}
.section.ranking .box-wrap .text-wrap :is(h3, p){
	display: flex; align-items: center;
}

.section.ranking .box-wrap .text-wrap h3{
	font-size: 24px; font-weight: 500;
	line-height: 1; aspect-ratio: 586/48;
}
.section.ranking .box-wrap .text-wrap p{
	font-size: 17px; line-height: 1.2; color: var(--white);
	aspect-ratio: 586/66;
}

.section.ranking .box-01{padding: 12px 22px;}
.section.ranking .box-01 .text-wrap{aspect-ratio: 586/100; padding-left: 10px;}
.section.ranking .box-02{
	padding: 12px 24px;
	align-items: flex-end; justify-content: flex-end;
}
.section.ranking .box-02 .text-wrap{
	aspect-ratio: 586/115; text-align: right; padding-right: 9px;
}
.section.ranking .box-02 .text-wrap :is(h3, p){
	justify-content: flex-end;
}

@media all and (min-width:1025px) and (max-width: 1366px){
	.section.ranking .bg-mask{ width: 980px; }
	.section.ranking .box-wrap .text-wrap h3{ font-size: 20px;}
	.section.ranking .box-wrap .text-wrap p{font-size: 15px;}

	.section.ranking .box-01{padding: 9px 18px;}
	.section.ranking .box-01 .text-wrap{padding-left: 6px;}
	.section.ranking .box-02{padding: 9px 18px;}
	.section.ranking .box-02 .text-wrap{padding-right: 6px;}
}

@media all and (min-width: 769px) and (max-width: 1024px){
	.section.ranking .bg-mask{ width: 720px; }
	.section.ranking .box-wrap .text-wrap h3{ font-size: 15px;}
	.section.ranking .box-wrap .text-wrap p{font-size: 12px;}

	.section.ranking .box-01{padding: 7px 11px;}
	.section.ranking .box-01 .text-wrap{padding-left: 4px;}
	.section.ranking .box-02{padding: 6px 11px;}
	.section.ranking .box-02 .text-wrap{padding-right: 4px;}
}
@media all and (max-width: 768px) {
	.section.ranking{
		padding-inline: clamp(10px,2.67vw,40px);
		background-image: url("../images/launching/5P/section05_mo.png");
	}
	.section.ranking .bg-mask:not(.btn){ overflow: hidden;
		width: clamp(340px,90.67vw,670px); aspect-ratio: 670/508; margin: 0 auto;
		background-image: url("../images/launching/5P/box_mo.png");
		-webkit-mask-image: url("../images/launching/5P/box_mo_mask.png");
		mask-image: url("../images/launching/5P/box_mo_mask.png");
	}
	.section.ranking .box-wrap .text-wrap{}
	.section.ranking .box-wrap .text-wrap h3{
		font-size: clamp(9.5px,2.53vw,19px); font-weight: 700;
		align-self: start; aspect-ratio: 309/40;
	}
	.section.ranking .box-wrap .text-wrap p{
		padding-top: clamp(4px,1.07vw,8px);
		font-size: clamp(8px,2.13vw,16px);
		aspect-ratio: 309/68; line-height: 1.3;
	}

	.section.ranking .box-01{padding: clamp(3.5px,0.93vw,7px) clamp(6.5px,1.73vw,13px);}
	.section.ranking .box-01 .text-wrap{padding-left: clamp(3px,0.8vw,6px); aspect-ratio: 309/108;}
	.section.ranking .box-02{padding: clamp(3.5px,0.93vw,7px) clamp(6.5px,1.73vw,13px);}
	.section.ranking .box-02 .text-wrap{padding-right: clamp(3px,0.8vw,6px); aspect-ratio: 309/108;}

	.section.ranking .box-01 .item-reward{top: clamp(70px,18.67vw,140px); left: clamp(13px,3.47vw,35px);}
	.section.ranking .box-02 .item-reward{ bottom: clamp(70px,18.67vw,140px); right: clamp(13px,3.47vw,35px);}
}
@media all and (max-width: 375px){
	.section.ranking .box-wrap .text-wrap h3{}
	.section.ranking .box-wrap .text-wrap h3 span{position: relative; top: 2px;}
}
/*** // Section Ranking(Page 5) ***/


/*** Section Create(Page 7) ***/
.section.create{
	width: 100%; padding-block: calc(var(--header) + 60px) 120px; padding-inline: 25px;
	background-repeat: no-repeat; background-size: cover;
	background-position: center center;
	background-image: url("../images/preorder/7P/p7.jpg");
}
.section.create .page-content{
	padding-top: clamp(16px,4.27vw,24px);
	flex-direction: column;
}
.section.create .download-area{
	width: 100%; justify-content: center;
	gap: clamp(6px,1.6vw,12px); padding-bottom: 6px;
}
/*.section.create .download-area .btn{height: 64px; aspect-ratio: 215/64;}*/
.section.create .download-area .btn{width: 169px; aspect-ratio: 169/50;}
.section.create .download-area .btn img{
	width: 100%; height: 100%;
	object-position: center center;
}
/*.section.create .download-area .download-01{aspect-ratio: 215/64; }
.section.create .download-area .download-02{aspect-ratio: 176/64; }
.section.create .download-area .download-03{aspect-ratio: 215/64; }*/

.section.create .setup-area{
	width: 100%; display: flex; justify-content: center;
	gap: 25px;
}
.section.create .setup{
	width: 625px; height: auto; aspect-ratio: 625/409;
	background-repeat: no-repeat; background-size: cover;
	background-position: center center;
}
.section.create .setup .title-wrap{text-align: center; padding-top: 32px;}
.section.create .setup .title-wrap h3{font-size: 24px; color: var(--white); padding-bottom: 22px; line-height: 1;}
.section.create .setup .title-wrap p{font-size: 17px; color: #c8cbdb;  line-height: 1;}

.section.create .setup .setup-box{
	display: flex; justify-content: center;
	gap:11px; padding-block: 16px 14px;
}
.section.create .setup .reward-box{ position: relative;
	width: 317px; aspect-ratio: 317/283;
	color: #a6a8b7; text-align: center; font-size: 12px;
}
.section.create .setup .reward-box .btn{ z-index: 1;
	position: absolute; top: 10px; right: 5px; width: 46px; aspect-ratio: 1/1;
	background-repeat: no-repeat; background-size: cover;
	background-position: center center;
	background-image: url("../images/preorder/7P/plus.png");
	display: none;
}
.section.create .setup .reward-box .btn.active{
	background-image: url("../images/preorder/7P/min.png");
}

.section.create .setup .reward-box div{padding-top: 8px;}

.section.create .setup .step-wrap{ width:275px; aspect-ratio: 275/283;}
.section.create .setup .step-wrap ul + .btn{margin-top: 12px;}
.section.create .setup .step-wrap ul{width: 100%; aspect-ratio: 275/213; padding: 5px;}
.section.create .setup .step-wrap ul li{font-size: 14px; color: var(--white); text-align: center;
	display: flex; align-items: center;
	justify-content: center;
}
.section.create .setup .step-wrap .btn{width: 100%; aspect-ratio: 275/58; color: var(--white);}

.section.create .setup-01{background-image: url("../images/preorder/7P/left_pc.png");}
.section.create .setup-01 .step-wrap ul li{width: 100%; aspect-ratio: 275/70;}

.section.create .setup-02{background-image: url("../images/preorder/7P/right_pc.png");}
.section.create .setup-02 .step-wrap ul li{width: 100%; aspect-ratio: 275/40;}
.section.create .setup-02 .step-wrap ul li:nth-child(2),
.section.create .setup-02 .step-wrap ul li:nth-child(3){aspect-ratio: 275/62;}
.section.create .setup-02 .step-wrap ul li:nth-child(4){aspect-ratio: 275/45;}

.section.create .reward-area{
	width: 100%; padding-top: 22px;
}
.section.create .reward-area h3{
	position: relative; padding-bottom: 16px;
	text-align: center; font-size: 26px;
	color: var(--white);
}
.section.create .reward-area h3::after{ content: "";
	position: absolute; bottom: 0; left: 0; right: 0;
	width: 387px; aspect-ratio: 387/31; margin: 0 auto;
	background: url("../images/preorder/7P/line-deco.png") center center / cover no-repeat;

}
.section.create .reward-area ul{
	display: flex; justify-content: center;
	gap: 18px;
}
.section.create .reward-area .reward-box{
	width: 410px; aspect-ratio: 410/237; padding: 18px 10px 19px;
	background-repeat: no-repeat; background-size: cover;
	background-position: center center;
	display: flex; flex-direction: column;
	align-items: center; justify-content: space-between;
}

.section.create .reward-area h4{font-size: 24px; color: #252525; line-height: 1;}
.section.create .reward-area p{font-size: 17px; color: #222d38;  line-height: 1;}
.section.create .reward-area .reward-01{background-image: url("../images/preorder/7P/reward01_pc.jpg");}
.section.create .reward-area .reward-02{background-image: url("../images/preorder/7P/reward02_pc.jpg");}
.section.create .reward-area .reward-03{background-image: url("../images/preorder/7P/reward03_pc.jpg");}


@media all and (max-width: 1440px){
	.section.create .setup-area{gap: 20px;}
	.section.create .setup{width: 470px;}
	.section.create .setup .title-wrap{padding-top: 22px;}
	.section.create .setup .title-wrap h3{font-size: 19px; padding-bottom: 16px;}
	.section.create .setup .title-wrap p{font-size: 16px;}

	.section.create .setup .setup-box{ gap:8px; padding-block: 10px 12px;}
	.section.create .setup .reward-box{ width: 238px;font-size: 11px; letter-spacing: -0.4px}
	.section.create .setup .reward-box div{padding-top: 4px;}

	.section.create .setup .step-wrap{width:206px;}
	.section.create .setup .step-wrap ul li{font-size: 12px;}
	.section.create .setup .step-wrap .btn{font-size: 14px;}



	.section.create .reward-area .reward-box{width: 308px; padding: 12px 10px 13px;}
	.section.create .reward-area h4{font-size: 18px;}
	.section.create .reward-area p{font-size: 14px;}

}
@media all and (max-width: 1366px){
	.section.create .download-area .btn.pc-download{display: none !important;}
}
@media all and (max-width: 1024px) {
	.section.create .setup-area{gap: 10px;}
	.section.create .setup{width: 318px; aspect-ratio: 318/563;}
	.section.create .setup .title-wrap p{line-height: 1.2;}
	.section.create .setup .title-wrap p br{display: block !important;}
	.section.create .setup-01{background-image: url("../images/preorder/7P/left_mo.png");}
	.section.create .setup-02{background-image: url("../images/preorder/7P/right_mo.png");}

	.section.create .setup .setup-box{
		max-width: 295px; width: 100%; margin: 0 auto;
		gap:8px; padding-block: 6px 15px;
		flex-direction: column;
	}
	.section.create .setup .reward-box{ width: 100%; aspect-ratio: 295/155; font-size: 11px; letter-spacing: normal;}
	.section.create .setup .reward-box div{position: absolute;
		top: 30px; right: 30px;
		width: 242px; aspect-ratio: 242/103; padding: 0;
		display: none; align-items: center;
		justify-content: center; font-size: 14px;
		border: 2px solid #2190A8; color: #16E7FE;
		background-color: rgba(44, 134, 148, 0.7);
	}
	.section.create .setup .reward-box div.active{display: flex;}
	.section.create .setup .reward-box div p{line-height: 1.3;}

	.section.create .setup .reward-box .btn{display: flex;}

	.section.create .setup .step-wrap{width: 100%; aspect-ratio: 295/288;}

	.section.create .setup .step-wrap ul,
	.section.create .setup .step-wrap ul li{aspect-ratio: auto;}

	.section.create .setup .step-wrap ul{}
	.section.create .setup .step-wrap ul li{font-size: 16px;}
	.section.create .setup .step-wrap ul li span > span{display: none;}
	.section.create .setup .step-wrap ul li span > br{display: none !important;}

	.section.create .setup-01 .step-wrap ul li{height: 68px;}
	.section.create .setup-02 .step-wrap ul li{height: 51px;}
	.section.create .setup .step-wrap .btn{
		margin-top: 16px; font-size: 16px;
	}

	.section.create .reward-area ul{gap:8px;}
	.section.create .reward-area .reward-box{ width: 211px; aspect-ratio: 211/285; padding: 16px 10px 18px;}
	.section.create .reward-area .reward-01{background-image: url("../images/preorder/7P/reward01_mo.jpg");}
	.section.create .reward-area .reward-02{background-image: url("../images/preorder/7P/reward02_mo.jpg");}
	.section.create .reward-area .reward-03{background-image: url("../images/preorder/7P/reward03_mo.jpg");}
	.section.create .reward-area p{font-size: 16px;}

}
@media all and (max-width: 768px) {
	.section.create{
		padding-block: calc(var(--header) + 30px) 80px; padding-inline: clamp(16px,4.44vw,50px);
		background-image: url("../images/preorder/7P/p7_mo.jpg");
	}

	.section.create .page-header{gap: 8px !important;}

	/*.section.create .download-area .btn {height: clamp(32px,8.53vw,64px);}*/
	.section.create .download-area .btn {width: clamp(100px,26.67vw,169px);}

	.section.create .setup .title-wrap{padding-top: clamp(11px,3.06vw,22px);}
	.section.create .setup .title-wrap h3{font-size: clamp(10px,2.78vw,19px); padding-bottom: clamp(6px,1.67vw,15px);}
	.section.create .setup .title-wrap p{font-size: clamp(8px,2.22vw,16px);}

	.section.create .setup-area{gap: clamp(10px,2.78vw,26px);}
	.section.create .setup .setup-box{
		max-width: clamp(146px,40.56vw,295px); width: 100%;
		gap:clamp(4px,1.11vw,8px); padding-block: clamp(5px,1.39vw,6px) clamp(7px,1.94vw,15px);
	}
	.section.create .setup .reward-box{ width: 100%; aspect-ratio: 295/155; font-size: 11px;}
	.section.create .setup .reward-box .btn{
		top: 1.33vw; right: 0.67vw;
		width: 6.13vw;
	}
	.section.create .setup .reward-box div{
		top: 4vw; right: 4vw;
		width: 32.27vw; font-size: 1.87vw;
	}
	.section.create .setup .step-wrap{position: relative;}
	.section.create .setup .step-wrap ul{
		display: flex; flex-direction: column;
		padding: 0.67vw; gap:2px;
	}
	.section.create .setup.setup-02 .step-wrap ul{ gap: 1px; }

	.section.create .setup .step-wrap ul li{font-size: clamp(8px,2.22vw,16px);}

	.section.create .setup-01 .step-wrap ul li{height: 9.3vw;}
	.section.create .setup-02 .step-wrap ul li{height: 7vw;}
	.section.create .setup .step-wrap {
		aspect-ratio: 295/290;
	}
	.section.create .setup .step-wrap .btn{ margin-top: 2.13vw; font-size: 2.13vw; }
	/* .section.create .setup .step-wrap li span{position: relative; top: 5px;} */

	.section.create .reward-area{width: 100%; padding-top: 4vw;}
	.section.create .reward-area h3{padding-bottom: 2.13vw; font-size: 3.47vw;}
	.section.create .reward-area h3::after{width: 51.6vw;}
	.section.create .reward-area .reward-box{width: 28.13vw; padding: 2.4vw 0 2vw;}
	.section.create .reward-area h4{font-size: 2.67vw;}
	.section.create .reward-area p{font-size: 2.27vw;}

	.section.create .setup .step-wrap ul + .btn{
		margin-top: 0; position: absolute; bottom: 0px;
	}
	.section.create .setup .step-wrap ul + .btn span{position: relative; top: 1px;}
}
/*** // Section Create(Page 7) ***/




/* ========================================
[Preorder Popup Common] 사전예약 팝업 공통
======================================== */
.overlay.popup-policy{padding-inline: 8px; overflow-y: auto;}
.overlay.popup-policy .popup,
.overlay.popup-policy .popup .button-area .btn{ background-color: transparent;
	max-height: none; min-height: auto;
	background-position: center center;
	background-repeat: no-repeat; background-size: cover;

	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover;

	transition: none;
}
.overlay.popup-policy .popup{height: auto;}
.overlay.popup-policy .popup-header{position: relative; padding: 0;  height: 96px;
	display: flex; align-items: center;
	justify-content: center;
}
.overlay.popup-policy .popup-header .btn.btn-close{position: absolute; top: 10px; right: 10px;}

.overlay.popup-policy .popup-header h3{
	padding-left: 10px;
	font-size: 30px; color: var(--white); line-height: 1;
}
.overlay.popup-policy .popup-body *{font-size: 18px; color: #A5A5A5; line-height: 1.3;}
.overlay.popup-policy .popup-body{overflow-y: auto; padding: 25px; background-color: #1D1E23;}
.overlay.popup-policy .popup-body a{}
.overlay.popup-policy .popup-body table{border: 1px solid #A5A5A5;}
.overlay.popup-policy .popup-body tr + tr{border-top: 1px solid #A5A5A5;}
.overlay.popup-policy .popup-body td + td{border-left: 1px solid #A5A5A5;}
.overlay.popup-policy .popup-body td{padding: 2px 2px; text-align: center;}
.overlay.popup-policy .button-area{padding-top: 17px; justify-content: center;}
.overlay.popup-policy .button-area .btn{font-size: 18px; border-radius: 0;}


.overlay.popup-policy .popup.type2{
	max-width: 804px; width: 100%; aspect-ratio: 804/750;
	padding-top: 0px; padding-inline: 40px 25px;
	background-image: url("../images/launching/popup_bg.png");
}
.overlay.popup-policy .popup.type2 .popup-body{
	width: 100%; height: 560px; padding: 20px 20px;
	line-height: 1.2 !important; background-color: transparent;
}

.overlay.popup-policy .popup.type2 .button-area{padding-top: 8px; }
.overlay.popup-policy .popup.type2 .button-area .btn{
	max-width: 447px; width: 100%; aspect-ratio: 447/60;
	background-image: url("../images/launching/popup_bg_btn.png"); font-size: 28px; font-weight: 500;
}
@media all and (min-width:1025px) and (max-width: 1366px){
	.overlay.popup-policy .popup.type2{max-width: 740px;}

	.overlay.popup-policy .popup.type2 .popup-header{ height: 82px;}
	.overlay.popup-policy .popup.type2 .popup-header h3{font-size: 24px;}
	.overlay.popup-policy .popup.type2 .popup-body{height: 505px;}
	.overlay.popup-policy .popup.type2 .popup-body *{font-size: 16px;}
	.overlay.popup-policy .popup.type2 .button-area{padding-top: 10px;}
	.overlay.popup-policy .popup.type2 .button-area .btn{max-width: 400px; font-size: 22px;}
}
@media all and (min-width: 769px) and (max-width: 1024px){

	.overlay.popup-policy .popup.type2{max-width: 680px;}
	.overlay.popup-policy .popup.type2 .popup-header{ height: 76px;}
	.overlay.popup-policy .popup.type2 .popup-header h3{font-size: 24px;}

	.overlay.popup-policy .popup.type2 .popup-body{height: 475px;}
	.overlay.popup-policy .popup.type2 .popup-body *{font-size: 14px;}
	.overlay.popup-policy .popup.type2 .button-area{padding-top: 8px;}
	.overlay.popup-policy .popup.type2 .button-area .btn{max-width: 360px; font-size: 20px;}
}

@media all and (max-width:768px){
	.overlay.popup-policy .popup.type2{
		max-width: clamp(321px,85.6vw,642px);
		padding-inline: clamp(20px,5.33vw,40px) clamp(10px,2.67vw,20px);
	}
	.overlay.popup-policy .popup.type2 .popup-header{ height: clamp(38px,10.13vw,76px);}
	.overlay.popup-policy .popup.type2 .popup-header h3{font-size: clamp(12px,3.2vw,24px);}
	.overlay.popup-policy .popup.type2 .popup-header .btn.btn-close{top: clamp(3px,0.8vw,6px); right: -2.67vw;}

	.overlay.popup-policy .popup.type2 .popup-body{
		height: clamp(220px,58.67vw,448px); word-break: break-all;
		padding: clamp(10px,2.67vw,20px);
	}
	.overlay.popup-policy .popup.type2 .popup-body *{font-size: clamp(9px,2.4vw,14px);}
	.overlay.popup-policy .popup.type2 .button-area{padding-top: clamp(4px,1.07vw,8px);}
	.overlay.popup-policy .popup.type2 .button-area .btn{max-width: clamp(180px,48vw,360px); font-size: clamp(11px,2.93vw,22px);}

}

.overlay.popup-policy .popup.type3{
	max-width: 540px; width: 100%; height: auto; aspect-ratio: 540/263;
	padding: 20px 10px;
	background-image: url("../images/launching/popup_alert.png");
}
.overlay.popup-policy .popup.type3 .popup-body{
	width: 100%; height: calc(100% - 50px); padding: 0;
	background-color: transparent !important;
	display: flex; align-items: center;
	justify-content: center;
}
.overlay.popup-policy .popup.type3 .popup-body *{font-size: 20px; color: var(--black);}
.overlay.popup-policy .popup.type3 .popup-body .text-wrap{text-align: center;}
.overlay.popup-policy .popup.type3 .button-area{padding-top: 0; position: absolute; left: 0; right: 0; bottom:15px;}
.overlay.popup-policy .popup.type3 .button-area .btn{ color: var(--white);
	max-width: 174px; width: 100%; height: auto; aspect-ratio: 174/48;
	background-image: url("../images/launching/popup_alert_btn.png");
}
@media all and (min-width:1025px) and (max-width: 1366px){
	.overlay.popup-policy .popup.type3{ max-width: 480px; }
	.overlay.popup-policy .popup.type3 .popup-body *{font-size: 18px;}
	.overlay.popup-policy .popup.type3 .button-area .btn{max-width: 144px;}
}
@media all and (min-width: 769px) and (max-width: 1024px){
	.overlay.popup-policy .popup.type3{ max-width: 420px; }
	.overlay.popup-policy .popup.type3 .popup-body *{font-size: 16px;}
	.overlay.popup-policy .popup.type3 .button-area .btn{max-width: 124px;}
}

@media all and (max-width:768px){

	.overlay.popup-policy .popup.type3{
		max-width: clamp(270px,72vw,540px);
		padding: clamp(8px,2.13vw,15px) clamp(5px,1.33vw,10px);
	}
	.overlay.popup-policy .popup.type3 .popup-body{height: 80%;}
	.overlay.popup-policy .popup.type3 .popup-body *{font-size: clamp(10px,2.67vw,20px);}
	.overlay.popup-policy .popup.type3 .button-area{ bottom: clamp(8px,2.13vw,15px); }
	.overlay.popup-policy .popup.type3 .button-area .btn{
		max-width: clamp(87px,23.2vw,174px);
		font-size: clamp(9px,2.4vw,18px);
	}
}

@media all and (min-width:768px) and (max-width: 1440px) and (max-height: 740px){
	.overlay.popup-policy{align-items: flex-start;}
}