html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: #2f3542; border-radius: 10px;}

.wrap {margin: 0 auto; width: 95%;}
.wrap[max='1620'] {max-width: 1620px;}
.wrap[max='1600'] {max-width: 1600px;}

@media screen and (max-width: 820px){
    .wrap{ width: 90%; }
}


/* br */
@media screen and (max-width:1600px) {
	.max-1600{display: block;}
	.min-1601{display: none;}
	.max-1600-none{display: none;}
}
@media screen and (max-width:1440px) {
	.max-1440{display: block;}
	.min-1441{display: none;}
	.max-1440-none{display: none;}
}
@media screen and (max-width:1280px) {
	.max-1280{display: block;}
	.min-1281{display: none;}
	.max-1280-none{display: none;}
}
@media screen and (max-width:1024px) {
	.max-1024{display: block;}
	.min-1025{display: none;}
	.max-1024-none{display: none;}
}
@media screen and (max-width:820px) {
	.max-820{display: block;}
	.min-821{display: none;}
	.max-820-none{display: none;}
}
@media screen and (max-width:500px) {
	.max-500{display: block;}
	.min-501{display: none;}
	.max-500-none{display: none;}
}

@media screen and (max-width:400px) {
	.max-400{display: block;}
	.min-401{display: none;}
	.max-400-none{display: none;}
}
@media screen and (max-width:360px) {
	.max-360{display: block;}
	.min-361{display: none;}
	.max-360-none{display: none;}
}

@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


/* br */
@media screen and (min-width:1601px) {
	.min-1601{display: block;}
	.max-1600{display: none;}
	.min-1601-none{display: none;}
}
@media screen and (min-width:1441px) {
	.min-1441{display: block;}
	.max-1440{display: none;}
	.min-1441-none{display: none;}
}
@media screen and (min-width:1281px) {
	.min-1281{display: block;}
	.max-1280{display: none;}
	.min-1281-none{display: none;}
}
@media screen and (min-width:1025px) {
	.min-1025{display: block;}
	.max-1024{display: none;}
	.min-1025-none{display: none;}
}
@media screen and (min-width:821px) {
	.min-821{display: block;}
	.max-820{display: none;}
	.min-821-none{display: none;}
}
@media screen and (min-width:501px) {
	.min-501{display: block;}
	.max-500{display: none;}
	.min-501-none{display: none;}
}
@media screen and (min-width:321px) {
	.min-321{display: block;}
	.max-320{display: none;}
	.min-321-none{display: none;}
}

/* 공통 기본 폰트 */
body {font-family: 'Pretendard', sans-serif;}


/* 다음버튼 */

.btnFlex{ display: flex; justify-content: center; gap: 50px; }


.btnwrap{ position: relative; display: flex; justify-content: center; }

.btnwrap .in{  font-size: 28px;  font-family: 'FightingGyeongnam'; position: relative; font-weight: 500; cursor: pointer; }
.btnwrap .in .flx{ display: flex; align-items: center; background-color: #eee; gap: 13px; white-space: nowrap; padding: calc(25 / 28 * 1em) calc(35 / 28 * 1em); overflow: hidden; justify-content: center; }
.btnwrap .in::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(255,255,255,0.1); transition-duration: 0.2s; transform: scale(0); transform-origin: center; }

.btnwrap .in .flx strong{ position: relative; z-index: 1; }


@media screen and (min-width: 821px){
    .btnwrap .in:hover::before{ transform: scale(1); }
}

.btnwrap .line{ position: absolute; height: calc(100% + 5px); width: 3px; background-color: #000; }
.btnwrap .line span{ display: block; width: 17px; height: 17px; border-radius: 50%; background-color: #000; position: absolute; left: 50%; transform: translateX(-50%); }

.btnwrap .line._l{ bottom: 0; left: 0; }
.btnwrap .line._l span{ bottom: 99.5%; }
.btnwrap .line._r{ top: 0; right: 0; }
.btnwrap .line._r span{ top: 99.5%; }

.btnwrap .arrows{ display: flex; align-items: center; position: relative; z-index: 1; }
.btnwrap .arrows i{ font-size: calc(24 / 28 * 1em); margin: 0 -0.3em; animation: opacity 0.6s infinite linear alternate; }
.btnwrap .arrows i:nth-of-type(2){ animation-delay: 0.1s; }
.btnwrap .arrows i:nth-of-type(3){ animation-delay: 0.2s; }

@keyframes opacity {
    0%{ opacity: 0.3 }
    100%{ opacity: 1 }
}

.btnwrap.purple .in .flx{ background-color: #a57dff; color: #fff; }
.btnwrap.purple .line{ background-color: #7a7af8; }
.btnwrap.purple .line span{ background-color: #7a7af8; }

.btnwrap.skyblue .in .flx{ background: linear-gradient(0, #c6fbf4, #faeafa); }
.btnwrap.skyblue .in::before{ background-color: rgba(255,255,255,0.5); color: #fff; }
.btnwrap.skyblue .line{ background-color: #4bdbff; }
.btnwrap.skyblue .line span{ background-color: #4bdbff; }

.btnwrap.skyblue.rev .in .flx{ background: linear-gradient(180deg, #c6fbf4, #fffeff); }

.btnwrap.purgrd .in .flx{ background: linear-gradient(180deg, #ebe3f5, #f9f7df); }
.btnwrap.purgrd .in::before{ background-color: rgba(255,255,255,0.5); color: #fff; }
.btnwrap.purgrd .line{ background-color: #b388df; }
.btnwrap.purgrd .line span{ background-color: #b388df; }

.btnwrap.sm{ margin-top: 95px; }
.btnwrap.sm .in{ font-size: 20px; }
.btnwrap.sm .in .flx{ padding: 0; width: 200px; height: 66px; }

@media screen and (max-width: 1280px){
	.btnFlex{ gap: 30px; }
    .btnwrap .in{ font-size: 22px; }

	.btnwrap.sm{ margin-top: 70px; }
	.btnwrap.sm .in{ font-size: 16px; }
    .btnwrap.sm .in .flx{ width: 160px; height: 56px; }
}

@media screen and (max-width: 820px){
	.btnFlex{ gap: 20px; }
    .btnwrap .in{ font-size: 18px; }
    .btnwrap .line span{ width: 12px; height: 12px; }

	.btnwrap.sm{ margin-top: 40px; }
	.btnwrap.sm .in{ font-size: 14px }
	.btnwrap.sm .in .flx{ width: 140px; height: 45px; }
}

@media screen and (max-width: 500px){
    .btnwrap .in{ font-size: 16px; line-height: 1.3; }

	.btnwrap.sm{ margin-top: 25px; }
    
}

@media screen and (max-width: 340px){
	.btnFlex{ flex-direction: column; gap: 0; }
    .btnwrap .in{ font-size: 14px; }
}



/* 상단 스텝 */
._stepArea {display: flex;align-items: center;justify-content: center;position: absolute;width: 100%; left: 0; top: 36px;z-index: 10; }


._stepArea .circle {display: inline-flex;align-items: center;justify-content: center;position: relative; font-family: 'FightingGyeongnam'; }

._stepArea .circle ul {display: flex;align-items: center;position: relative; gap: 22px; }

._stepArea .circle ul li {display: flex;align-items: center;flex-direction: column; position: relative; }

._stepArea .circle ul li:last-child {margin-right: 0; }

._stepArea .circle ul li{ width: 54px; height: 54px; border: 1px solid #000;box-sizing: border-box;border-radius: 50%;display: flex;align-items: center;justify-content: center; }
._stepArea .circle ul li div {width: 100%; height: 100%; border: 3px solid #fff;box-sizing: border-box;border-radius: 50%;display: flex;align-items: center;justify-content: center; transition: all .5s; background-color: #b3b1b5; color: #e0e0e0; }

._stepArea .circle ul li div p {font-size: 17px;font-weight: 500;letter-spacing: -0.045em; }

._stepArea .circle ul li>p {position: absolute;top: calc(100% + 13px);white-space: nowrap;letter-spacing: -0.04em; font-weight: 500; font-size: 16px; opacity: 0; pointer-events: none;}


._stepArea .circle ul li:nth-of-type(1).on div{background-color: #ff8d40; color: #fff; border-color: #94a6ff;}
._stepArea .circle ul li:nth-of-type(2).on div{background-color: #7166ff; color: #fff; border-color: #92e996;}
._stepArea .circle ul li:nth-of-type(3).on div{background-color: #d885ff; color: #fff; border-color: #ffff7b;}
._stepArea .circle ul li:nth-of-type(4).on div{background-color: #66acea; color: #fff; border-color: #ac8bff;}
._stepArea .circle ul li:nth-of-type(5).on div{background-color: #d9f266; color: #000; border-color: #7abbf5;}
._stepArea .circle ul li:nth-of-type(6).on div{background-color: #ff4141; color: #fff; border-color: #f4f4f6;}
._stepArea .circle ul li.on > p{ opacity: 1; pointer-events: unset; }

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
    ._stepArea{top: 24px;}
}
@media screen and (max-width:1280px) {
	._stepArea .circle ul{ gap: 18px; }
    ._stepArea .circle ul li{ width: 40px; height: 40px; }
    ._stepArea .circle ul li>p{font-size: 12px; top: calc(100% + 8px); }
    ._stepArea .circle ul li div p{ font-size: 14px; }

}
@media screen and (max-width:1024px) {
    
}
@media screen and (max-width:820px) {
    ._stepArea .circle ul{ gap: 10px; }
    ._stepArea .circle ul li{ width: 35px; height: 35px; }
}
@media screen and (max-width:500px) {
	._stepArea{top: 25px;}
}
@media screen and (max-width:320px) {}



.tit{ text-align: center; font-family: 'FightingGyeongnam'; font-weight: 700; letter-spacing: -0.04em; color: #fff; font-size: 48px; margin-bottom: 75px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); line-height: 1.3; display: block; }
.tit > div{ position: relative; }
.tit > div.mob{ display: none; }
.tit > div .color{ color: #ffff7b; }
.tit > div::before {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
    top: 0;
    content: attr(data-text);
    -webkit-text-stroke: 2px black;
}

.tit.stroke{ -webkit-text-stroke: 1px #000; }
.tit.stroke > div .color{ color: #bfefff; }
.tit.stroke > div::before{ display: none; }


.tit > div .color.green{ color: #b5ffc5; }
.tit > div .color.purple{ color: #d6cdff; }


@media screen and (max-width: 1440px){
    .tit{ margin-bottom: 30px; }
}

@media screen and (max-width: 1280px){
    .tit{ font-size: 37px; }
}

@media screen and (max-width: 820px){
    .tit{ margin-bottom: 20px; font-size: 30px; }
	.tit > div.mob{ display: block; }
}

@media screen and (max-width: 500px){
    .tit{ margin-bottom: 15px; font-size: 26px; }
}


.box3d{ border: 3px solid #000; box-shadow: 8px 10px 0 #000; }



.marqueewrap{ position: absolute; top: 0; left: 0; transform: rotate(-10deg); transform-origin: 0 0; }
.marquee {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 308px;
    font-weight: 500;
    letter-spacing: -0.04em;
    font-family: 'Inter', sans-serif;
    color: #7185eb;
    opacity: .36;
    white-space: nowrap;
	
}

.marquee .absol{
	width: 100%;
	display: flex;
	align-items: center;
	
}

.marquee._1 .absol .mar_ch{
	animation: marquee1 50s infinite linear;
}

.marquee._2 .absol .mar_ch{
	animation: marquee2 50s infinite linear;
}

@keyframes marquee1 {
	0%{ transform: translateX(-100%); }
	100%{ transform: translateX(0); }
}

@keyframes marquee2 {
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-100%); }
}

@media screen and (max-width: 820px){
	.marquee{ font-size: 200px; }
}




/* 비디오 팝업 */
.__videoPopup{
	display: none;
	position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9999;
}
.__videoPopup .con{
	position: relative; z-index: 1; margin: auto;
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	flex-direction: column;
}

.__videoPopup i{cursor: pointer; font-size: 40px; color: #fff; position: relative;
z-index: 1; margin-bottom: 10px;}
.__videoPopup .con .videoBx{
	position: relative; z-index: 1; width: 95%; max-width: 1200px; max-height: calc(100% - 120px);
}
.__videoPopup .con .videoBx::before{
	content:''; display: block; width: 100%; padding-bottom: 56.6%;
}
.__videoPopup .con .videoBx iframe,
.__videoPopup .con .videoBx video{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.__videoPopup .bg{
	background-color: rgba(0,0,0,0.8); position: absolute; width: 100%; height: 100%;
	left: 0; top: 0; cursor: pointer;
}