@charset "utf-8";

.col-gradient {background: #31339C; background: linear-gradient(213deg, rgba(49, 51, 156, 1) 0%, rgba(51, 128, 200, 1) 100%);}

.border-wrap {padding: 11rem 2rem; border-left: 1px solid rgba(237,254,249,0.5); border-right: 1px solid rgba(237,254,249,0.5);}

/*============================================================*/
/* 메인 타이틀 */
/*============================================================*/
.main-title {margin-bottom: 6rem; text-align: center;}
.main-title h3 {font-size: 4rem; font-weight: 700;}
.main-title p {margin-top: 2rem; font-size: 1.8rem; font-weight: 400;}

@media (max-width: 768px) {
    .main-title h3 {font-size: 3.8rem;}
}



/*============================================================*/
/* 섹션 1 = 비주얼 */
/*============================================================*/
.main-visual {position: relative; height: 100dvh; background: url("../img/main/bg_visual.png") center/cover no-repeat; overflow: hidden;}
.main-visual::before {content: ""; position: absolute; top: 3rem; bottom: 3rem; left: 3rem; right: 3rem; background-image: url("../img/main/bg_visual_deco.png"); background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat;}

.main-visual .content-wrap {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100dvh;}
.main-visual .content {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.main-visual .content .subtitle {margin-bottom: 1rem; font-size: 2.6rem; font-weight: 700;}
.main-visual .content .logo {display: block; width: 35rem; aspect-ratio: 354/122; background-image: url("../img/logo/horiz_bk.png"); background-position: center; background-size: contain; background-repeat: no-repeat; z-index: 1; opacity: 0.9; transform: scale(0.8); animation: fadeScaleIn 0.5s ease-out forwards;}
@keyframes fadeScaleIn {
    0% {opacity: 0; transform: scale(0.8);}
    100% {opacity: 1; transform: scale(1);}
}

.main-visual .btn-link {display: inline-flex; justify-content: center; align-items: center; text-align: center; min-width: 18rem; aspect-ratio: 181/46; margin-top: 2rem; border-radius: 20rem; font-size: 1.6rem; font-weight: 500; line-height: 1;}
.main-visual .content-wrap .btm-txt {position: absolute; bottom: 12%; left: 10rem; right: 10rem; font-size: 1.8rem;}

.hover-glass {position: relative; overflow: hidden;}
.hover-glass::before {position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg);}
@-webkit-keyframes shine {
    100% { left: 125%; }
}
@media (hover: hover) and (pointer: fine) {
    .hover-glass:hover::before {animation: shine .75s;}
}

.coin {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8rem; opacity: 0;}
.coin img {transform: translate(0, 0) scale(0.3); transition: transform 0.8s ease-out, opacity 0.8s ease-out; opacity: 0;}
.coin.show {opacity: 1;}
.coin.show img {transform: translate(var(--x), var(--y)) scale(var(--scale, 1)); opacity: 1;}
.coin.float img {animation: float 3.5s ease-in-out infinite; animation-delay: var(--float-delay, 0s);}

.coin--1 { --x: -180px; --y: -160px; --scale: 2.5; --float-delay: 0s; }
.coin--2 { --x: -290px; --y: -30px; --scale: 1.0; --float-delay: 0.2s; }
.coin--3 { --x: -160px; --y: 130px; --scale: 1.3; --float-delay: 0.4s; }
.coin--4 { --x: 230px; --y: 70px; --scale: 1.8; --float-delay: 0.1s; }
.coin--5 { --x: 170px; --y: -130px; --scale: 1.4; --float-delay: 0.3s; }

@keyframes float {
    0%   { transform: translate(var(--x), var(--y)) scale(var(--scale, 1)) translateY(0); }
    50%  { transform: translate(var(--x), var(--y)) scale(var(--scale, 1)) translateY(-12px); }
    100% { transform: translate(var(--x), var(--y)) scale(var(--scale, 1)) translateY(0); }
}

@media (max-width: 992px) {
    .main-visual::before {display: none;}
}
@media (max-width: 768px) {
    .main-visual .content .subtitle {font-size: 1.6rem;}
    .main-visual .content .logo {width: 24rem;}
    .main-visual .btn-link {min-width: 15rem; aspect-ratio: 150/40; font-size: 14px;}
    .main-visual .content-wrap .btm-txt {font-size: 14px; line-height: 1.7;}

    .coin--1 { --x: -80px; --y: -120px; --scale: 1.4; --float-delay: 0s; }
    .coin--2 { --x: -130px; --y: -10px; --scale: 0.7; --float-delay: 0.2s; }
    .coin--3 { --x: -100px; --y: 110px; --scale: 1; --float-delay: 0.4s; }
    .coin--4 { --x: 120px; --y: 40px; --scale: 0.9; --float-delay: 0.1s; }
    .coin--5 { --x: 100px; --y: -60px; --scale: 0.6; --float-delay: 0.3s; }
}
@media (max-width: 576px) {
    .main-visual .content-wrap .btm-txt {left: 0; right: 0;}
}



/*============================================================*/
/* 섹션 2 = 역할 */
/*============================================================*/
.main-role {background: #000014; background: linear-gradient(180deg, rgba(0, 0, 20, 1) 0%, rgba(0, 0, 54, 1) 100%); border-top: 1px solid rgba(237,254,249,0.5); overflow: hidden;}

.main-role ul {display: flex; justify-content: center; gap: 2rem; max-width: 1210px; margin: 0 auto;}
.main-role ul li {flex: 1 0 0;}
.main-role ul li .img {width: 100%; aspect-ratio: 1; margin-bottom: 2.6rem; border-radius: 3.2rem; background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 0.3s ease;}
.main-role ul li:hover .img {transform: rotate(2deg); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);}
.main-role ul li:nth-child(1) .img {background-image: url("../img/main/role01.png");}
.main-role ul li:nth-child(2) .img {background-image: url("../img/main/role02.png");}
.main-role ul li:nth-child(3) .img {background-image: url("../img/main/role03.png");}
.main-role ul li div {font-family: 'EF_MACHO'; font-size: 2.4rem;}
.main-role ul li p {margin-top: 2rem; color: #FAFAFA; font-size: 2rem; line-height: 1.6;}

@media (min-width: 1921px) {
    .main-role ul {max-width: 72%;}
}
@media (max-width: 992px) {
    .main-role ul li p {margin-top: 1rem; font-size: 1.5rem;}
}
@media (max-width: 576px) {
    .main-role ul {flex-direction: column; gap: 5rem; max-width: 390px;}
}



/*============================================================*/
/* 마키 효과 */
/*============================================================*/
.main-marquee {padding: 1.8rem 0; background: #010135; border-top: 1px solid rgba(237,254,249,0.5); border-bottom: 1px solid rgba(237,254,249,0.5); overflow: hidden}
.logo-marquee-wrapper {overflow: hidden; white-space: nowrap;}
.logo-marquee {display: flex; align-items: center; gap: 1.2rem; animation: marquee 20s linear infinite;}
.logo-marquee img {flex: 0 0 auto;}

@keyframes marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) {
    .logo-marquee {animation: marquee 10s linear infinite;}
}


/*============================================================*/
/* 섹션 3 = 수입 성장 모델 */
/*============================================================*/
.main-model {background: #010135; background: linear-gradient(180deg, rgba(1, 1, 53, 1) 0%, rgba(0, 0, 20, 1) 100%); overflow: hidden;}
.main-model .border-wrap {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 1200px;}

.main-model .txt {text-align: center;}
.main-model .txt small {display: block; margin-bottom: 2.4rem; color: #0095FF; font-size: 1.8rem; font-weight: 700;}
.main-model .txt > div {max-width: 73rem; margin: 0 auto; font-family: 'EF_MACHO'; font-size: 3.2rem; font-weight: 400; line-height: 1.5;}
.main-model .txt div + p {margin-top: 2.4rem;}
.main-model .txt p {margin: 0 auto; color: #FAFAFA; font-size: 1.8rem; font-weight: 300; line-height: 1.65;}
.main-model .txt p:nth-of-type(1) {max-width: 44rem;}

.model-img-wrap {position: relative;}
.main-model .model-img {position: absolute; top: 50%; left: 50%; transform: translate(var(--x), var(--y)) scale(var(--scale, 1)); width: 18.4rem; overflow: hidden;}
.main-model .model-img,
.main-model .model-img img {border-radius: 1.8rem;}

.model--1 { --x: -380px; --y: -440px; --scale: 1.7; --float-delay: 0s; }
.model--2 { --x: -570px; --y: -280px; --scale: 1.2; --float-delay: 0.2s; }
.model--3 { --x: 170px; --y: -370px; --scale: 1.4; --float-delay: 0.4s; }
.model--4 { --x: 370px; --y: -230px; --scale: 1; --float-delay: 0.1s; }
.model--5 { --x: -610px; --y: 100px; --scale: 1.4; --float-delay: 0.3s; }
.model--6 { --x: -230px; --y: 280px; --scale: 1.4; --float-delay: 0.3s; }
.model--7 { --x: 390px; --y: 120px; --scale: 1.6; --float-delay: 0.3s; }
.model--8 { --x: 200px; --y: 240px; --scale: 1.1; --float-delay: 0.3s; }

@keyframes fadeIn {
    0% {opacity: 0; transform: translate(-50%, -50%) scale(0.8);}
    100% {opacity: 1; transform: translate(-50%, -50%) scale(1);}
}
@media (max-width: 992px) {
    .model--1 { --x: -250px; --y: -480px;}
    .model--2 { --x: -430px; --y: -300px;}
    .model--3 { --x: 170px; --y: -370px;}
    .model--4 { --x: 370px; --y: -230px;}
    .model--5 { --x: -510px; --y: 100px;}
    .model--6 { --x: -230px; --y: 280px;}
    .model--7 { --x: 280px; --y: 240px;}
    .model--8 { --x: 90px; --y: 220px;}
}
@media (max-width: 767px) {
    .main-model .border-wrap {height: 1060px;}
    .main-model .txt > div {font-size: 2rem; line-height: 1.75;}
    .main-model .model-img {width: 11.8rem;}
    .main-model .model-img,
    .main-model .model-img img {border-radius: 1.8rem;}
    .model--1 { --x: -190px; --y: -410px;}
    .model--2 { --x: -210px; --y: -270px;}
    .model--3 { --x: 60px; --y: -330px;}
    .model--4 { --x: 110px; --y: -230px;}
    .model--5 { display: none; --x: -610px; --y: 100px;}
    .model--6 { --x: -190px; --y: 220px;}
    .model--7 { --x: 110px; --y: 210px;}
    .model--8 { --x: 40px; --y: 310px;}
}



/*============================================================*/
/* 섹션 4 = 컬쳐 */
/*============================================================*/
.main-culture {padding: 12.4rem 0; background: #000017; background: linear-gradient(180deg, rgba(0, 0, 23, 1) 0%, rgba(1, 1, 47, 1) 100%); overflow: hidden;}
.main-culture .title {margin-bottom: 12rem; text-transform: uppercase; font-size: 8rem; font-weight: 900;}

@media (max-width: 992px) {
    .main-culture .title {margin-bottom: 6rem; font-size: 4rem;}
}



/*============================================================*/
/* 섹션 5 = 커뮤니티 */
/*============================================================*/
.main-community {position: relative; padding-top: 14rem; background: #01012F; overflow: hidden; z-index: 1;}
.main-community::before {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; aspect-ratio: 1920/564; background-image: url("../img/main/bg_community.png"); background-position: center bottom; background-size: contain; background-repeat: no-repeat; z-index: -1;}

.main-community ol {display: flex; border-top: 1px solid rgba(237,254,249,0.5); border-bottom: 1px solid rgba(237,254,249,0.5);}
.main-community ol li {flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5rem; padding: 14rem 2rem; text-align: center;}
.main-community ol li:not(:last-child) {border-right: 1px solid rgba(237,254,249,0.5);}
.main-community ol li .number {position: relative; display: inline-block; aspect-ratio: 1; font-size: 2rem;}
.main-community ol li .number::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg) scale(1.4); display: block; width: 100%; aspect-ratio: 1; border: 1px solid rgba(237,254,249,50%);}
.main-community ol li .title {color: #EDEDED; font-family: 'EF_MACHO'; font-size: 3rem;}
.main-community ol li p {max-width: 375px; min-height: 9rem; margin-top: 2rem; color: #F5F5F5; font-size: 1.8rem; line-height: 1.65;}

@media (max-width: 992px) {
    .main-community {padding: 6rem 2rem;}
    .main-community::before {height: 80%; aspect-ratio: auto; background-size: cover;}
    .main-community ol {flex-direction: column; gap: 2rem; margin: 0 auto;}
    .main-community ol li {padding: 6rem 2rem; border: 1px solid rgba(237,254,249,0.5);}
}