@charset "utf-8";

/*============================================================*/
/* 타이틀 */
/*============================================================*/
.main-title {margin-bottom: 10rem;}
.main-title h3 {color: var(--col-black); font-size: 4.8rem; font-weight: 500;}
.main-title p {color: var(--col-gray); font-size: 2.4rem; font-weight: 400;}
.gradient {display: inline-block; background: linear-gradient(90deg, #FF3B7D 0%, #FFC548 50%, #FF3B7D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradientMove 4s ease infinite;}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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




/*============================================================*/
/* 비주얼 */
/*============================================================*/
.main-visual {position: relative; display: flex; align-items: center; gap: 10.8rem; z-index: 1;}
.main-visual .video-area {flex: 0 0 auto; position: relative; width: 55%;}
.main-visual .video-area::before {content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(270deg, rgba(255, 59, 125, 0) 0%, rgba(255, 59, 125, 0.7) 90%); z-index: 1;}
.main-visual .video-wrap {position: relative; width: 100%; aspect-ratio: 1070 / 776;}
.main-visual .video-wrap video {display: block; width: 100%; height: 100%; object-fit: cover;}

.main-visual .txt-area {padding: 0 4rem; background: #fff; font-family: 'GmarketSans';}
.main-visual .txt-area h2 {font-size: 5rem; font-weight: 500;}
.main-visual .txt-area h2 strong {color: var(--col-theme);}
.main-visual .txt-area p {color: var(--col-theme); font-size: 2.4rem; font-weight: 500; word-break: break-all;}
.main-visual .txt-area p small {color: var(--col-black);}

.main-visual .download-wrap {display: flex; gap: 1.6rem; margin-top: 5.5rem;}
.main-visual .download-wrap .btn-download {width: 16rem; aspect-ratio: 160/53; background-color: #fff; background-position: center; background-repeat: no-repeat; border: 1px solid #000; border-radius: 0.6rem; overflow: hidden; transition: var(--trans-25);}
.main-visual .download-wrap .btn-download.google {background-image: url("/img/download_googleplay.png"); background-size: auto 60%;}
.main-visual .download-wrap .btn-download.apple {background-image: url("/img/download_appstore.png"); background-size: auto 56%;}

@media (hover: hover) and (pointer: fine) {
    .main-visual .download-wrap .btn-download:hover {border-color: var(--col-theme);}
}

@media (max-width: 1510px) {
    .main-visual {gap: 6rem;}
}
@media (max-width: 1200px) {
    .main-visual {gap: 2rem;}
    .main-visual .video-area {width: 45%;}
    .main-visual .txt-area {padding: 0 2rem;}
    .main-visual .txt-area h2 {font-size: 4.6rem;}
}
@media (max-width: 992px){
    .main-visual {gap: 3.8rem;}
    .main-visual .txt-area {padding: 0 2rem 0 0;}
    .main-visual .txt-area h2 {font-size: 3.8rem;}
    .main-visual .txt-area h2 br {display: none;}
    .main-visual .txt-area p {font-size: 1.8rem;}
}
@media (max-width: 767px) {
    .main-visual {flex-direction: column;}
    .main-visual .video-area,
    .main-visual .txt-area {width: 100%;}
    .main-visual .txt-area {padding: 0 2rem;}
}




/*============================================================*/
/* 미션 */
/*============================================================*/
.main-mission {padding: 17rem 4rem 18rem; text-align: center; color: var(--col-theme); border-bottom: 1px solid var(--col-theme);}
.main-mission .txt {font-size: 7.2rem; font-weight: 300;}
.main-mission p {font-size: 2rem; font-weight: 300; word-break: break-all;}

@media (max-width: 1200px) {
    .main-mission .txt {font-size: 5.3rem;}
}
@media (max-width: 992px){
    .main-mission {padding: 17rem 2rem 18rem;}
    .main-mission .txt {font-size: 3.2rem;}
}




/*============================================================*/
/* 번역 */
/*============================================================*/
.main-translate {padding: 10rem 0 20rem;}
.main-translate .img-wrap .mobile {display: none;}
@media (max-width: 992px){
    .main-translate {padding: 10rem 0 20rem;}
}
@media (max-width: 767px) {
    .main-translate .img-wrap .pc {display: none;}
    .main-translate .img-wrap .mobile {display: block; width: 56rem; margin: 0 auto;}
}




/*============================================================*/
/* 제안 */
/*============================================================*/
.main-suggest {position: relative; overflow: hidden; z-index: 1;}
.main-suggest::before,
.main-suggest::after {content: ""; position: absolute; width: 45%; aspect-ratio: 1; border-radius: 50%; opacity: .2; filter: blur(200px); z-index: -1;}
.main-suggest::before {top: 32rem; left: -22%; background: linear-gradient(246deg, rgba(255, 59, 125, 1) 0%, rgba(255, 59, 125, 0.95) 11%, rgba(255, 59, 125, 0.92) 22%, rgba(255, 59, 125, 0.9) 33%, rgba(255, 59, 125, 0.75) 44%, rgba(255, 59, 125, 0.6) 56%, rgba(255, 59, 125, 0.3) 67%, rgba(255, 59, 125, 0) 78%, rgba(255, 59, 125, 0) 100%);}
.main-suggest::after {bottom: 17rem; right: -22%; background: linear-gradient(112deg, rgba(255,184,33,1) 0%, rgba(255,184,33,0.9) 33%, rgba(255,184,33,0.6) 56%, rgba(255,184,33,0.3) 67%, rgba(255,184,33,0) 78%);}

.main-suggest ul {width: 100%; max-width: 1294px; margin: 0 auto;}
.main-suggest ul li {display: flex; justify-content: space-between; align-items: center; gap: 4rem;}
.main-suggest ul li:nth-child(odd) {flex-direction: row-reverse;}
.main-suggest ul li + li {margin-top: 10rem;}
.main-suggest ul li .img {flex: 0 0 auto; width: 40rem; max-width: 100%;}
.main-suggest ul li .txt div {margin-bottom: 2.6rem; font-size: 3.8rem; font-weight: 700;}
.main-suggest ul li .txt div > span {color: var(--col-theme);}
.main-suggest ul li .txt p {color: var(--col-gray); font-size: 2.4rem;}

@media (max-width: 1200px) {
    .main-suggest ul li .txt p br {display: none;}
    .main-suggest::before {left: -10rem;}
    .main-suggest::after {right: -10rem;}
}
@media (max-width: 992px){
    .main-suggest ul li {gap: 2rem;}
    .main-suggest ul li .txt div {font-size: 3rem;}
    .main-suggest ul li .txt p {font-size: 2rem;}
    .main-suggest ul li:nth-child(even) .txt p {padding-right: 2rem;}
}
@media (max-width: 767px) {
    .main-suggest::before,
    .main-suggest::after {width: 80%;}
    .main-suggest ul li,
    .main-suggest ul li:nth-child(odd) {flex-direction: column; gap: 10rem;}
    .main-suggest ul li .txt {width: 100%;}
}




/*============================================================*/
/* 지도 */
/*============================================================*/
.main-map {padding-top: 20rem; text-align: center; font-size: 7.2rem; font-weight: 300;}
.main-map strong {color: var(--col-theme);}
.main-map .img-wrap {margin-top: 22rem;}
.main-map .img-wrap .mobile {display: none;}

@media (max-width: 1200px) {
    .main-map {font-size: 5.3rem;}
}
@media (max-width: 992px){
    .main-map {padding-top: 20rem; font-size: 4.4rem;}
    .main-map .img-wrap {margin-top: 10rem;}
}
@media (max-width: 767px) {
    .main-map {font-size: 2.8rem;}
    .main-map .txt {padding: 0 2rem;}
    .main-map .img-wrap .pc {display: none;}
    .main-map .img-wrap .mobile {display: block;}
}




/*============================================================*/
/* 마키 */
/*============================================================*/
.main-marquee {width: 100%; padding: 12rem 0; overflow: hidden;}
.main-marquee .marquee-track {display: flex; width: max-content; animation: marquee 140s linear infinite;}
.main-marquee .marquee-track span {background: linear-gradient(90deg, #FEEEFF 0%, #ECDEFF 50%, #EEF3FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20rem; font-weight: 900; letter-spacing: 2px; white-space: nowrap; user-select: none;}
@keyframes marquee {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
}

@media (hover: hover) and (pointer: fine) {
    .marquee:hover .marquee-track {animation-play-state: paused;}
}
@media (max-width: 992px) {
    .main-marquee {padding: 6rem 0;}
    .main-marquee .marquee-track span {font-size: 10rem;}
}




/*============================================================*/
/* 스크린샷 슬라이드 */
/*============================================================*/
.main-slide-screen {width: 100%; display: flex; justify-content: flex-end; align-items: center; padding: 16rem 0 16rem 4rem; overflow: hidden;}

/* 배경 라인 */
.main-slide-screen {position: relative;}
.gradient-line {position: absolute; bottom: 0.4%; right: 0; width: 100%; height: auto; pointer-events: none; z-index: 2;}
.gradient-path {}

@media (max-width: 767px) {
    .gradient-line {display: none;}
}

/* 그라디언트 배경 */
.main-slide-screen {position: relative; z-index: 1;}
.main-slide-screen::before {content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; opacity: .2; filter: blur(200px); z-index: -1;}
.main-slide-screen::before {top: 50%; left: -22%; transform: translateY(-50%); background: linear-gradient(246deg, rgba(255, 59, 125, 1) 0%, rgba(255, 59, 125, 0.95) 11%, rgba(255, 59, 125, 0.92) 22%, rgba(255, 59, 125, 0.9) 33%, rgba(255, 59, 125, 0.75) 44%, rgba(255, 59, 125, 0.6) 56%, rgba(255, 59, 125, 0.3) 67%, rgba(255, 59, 125, 0) 78%, rgba(255, 59, 125, 0) 100%);}

/* 텍스트 슬라이드 */
.main-slide-screen .swiper-txt {flex: 0 0 auto; width: calc(100% - calc(383px * 3));}
.screen-txt-swiper .swiper-slide div {font-size: 4.8rem; font-weight: 700;}
.screen-txt-swiper .swiper-slide p {margin-top: 2.8rem; color: var(--col-gray); font-size: 2.4rem; line-height: 1.4;}

/* 슬라이드 네비게이션 */
.screen-txt-nav {display: flex; gap: 1.2rem; margin-top: 6rem;}
.screen-txt-nav button {display: flex; justify-content: center; align-items: center; width: 5rem; aspect-ratio: 1; border: 1px solid var(--col-gray); border-radius: 50%;}
.screen-txt-nav .screen-prev {transform: rotate(180deg);}
@media (hover: hover) and (pointer: fine) {
    .screen-txt-nav button:hover {border-color: var(--col-theme);}
}

/* 스크린샷 슬라이드 - 프레임 */
.screen-swiper-wrap {position: relative;}
.screen-swiper-wrap .phone-frame {content: ""; position: absolute; left: 0; top: 0; width: 343px; aspect-ratio: 343/698; background: url("/img/mainScreenFrame.png") 100%/100% no-repeat; z-index: 2; pointer-events: none;}

/* 스크린샷 슬라이드 */
.screen-swiper-container {flex: 0 0 auto; width: calc(383px * 3); overflow: hidden;}
.screen-swiper-wrap {width: 343px;}
.screen-swiper {padding-bottom: 4rem; overflow: visible;}
.screen-swiper .swiper-slide {position: relative; width: 343px; aspect-ratio: 343/698; padding: 2rem; border-radius: 7rem; box-shadow: 1.5rem 1.4rem 2rem .4rem rgba(119,119,119,0.25); overflow: hidden;}
.screen-swiper .swiper-slide::before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255,255,255, 0.5);}
.screen-swiper .swiper-slide-active::before {display: none;}

@media (min-width: 1921px) {
    .main-slide-screen {max-width: 192rem; margin: 0 auto; overflow: visible;}
}
@media (max-width: 1365px) {
    .main-slide-screen::before {left: -10rem;}

    .screen-swiper-wrap,
    .screen-swiper-wrap .phone-frame,
    .screen-swiper .swiper-slide {width: 383px;}
    .main-slide-screen .swiper-txt {width: calc(100% - calc(383px * 1.3) - 4rem);}
    .screen-swiper-container {width: calc(383px * 1.3);}

    .main-slide-screen {gap: 2rem; padding: 16rem 0 16rem 2rem;}
}
@media (max-width: 1025px) {
    .main-slide-screen {padding: 20rem 2rem;}

    .screen-swiper-wrap,
    .screen-swiper-wrap .phone-frame,
    .screen-swiper .swiper-slide {width: 300px;}
    .main-slide-screen .swiper-txt {width: calc(100% - 300px - 8rem);}
    .screen-swiper-container {width: calc(300px + 4rem); padding-right: 4rem;}
}
@media (max-width: 992px) {
    .main-slide-screen {padding: 10rem 2rem;}
    .main-slide-screen::before {width: 20%;}

    .screen-txt-swiper .swiper-slide div {font-size: 3rem;}
    .screen-txt-swiper .swiper-slide p {font-size: 2rem;}
}
@media (max-width: 767px) {
    .main-slide-screen {flex-direction: column; gap: 6rem;}
    .main-slide-screen .swiper-txt {width: 100%;}
    .screen-txt-swiper .swiper-slide div br,
    .screen-txt-swiper .swiper-slide p br {display: none;}
    .screen-txt-nav {margin-top: 3rem;}
    .screen-swiper-container {width: auto; padding: 0 2rem; overflow: visible;}
}




/*============================================================*/
/* 인재 슬라이드 */
/*============================================================*/
.main-talent {position: relative; display: flex; flex-direction: row-reverse; align-items: center; padding: 24rem 0; overflow: hidden;}
.main-talent::after {content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; opacity: .2; filter: blur(200px); z-index: -1;}
.main-talent::after {bottom: 50%; right: -22%; transform: translateY(50%); background: linear-gradient(112deg, rgba(255,184,33,1) 0%, rgba(255,184,33,0.9) 33%, rgba(255,184,33,0.6) 56%, rgba(255,184,33,0.3) 67%, rgba(255,184,33,0) 78%);}

.talent-swiper {width: 70%; padding-right: 2rem;}
.talent-swiper .swiper-slide {padding: 0 2rem 4rem;}
.talent-swiper .swiper-slide .wrap {border-radius: 3.2rem; box-shadow: 1.5rem 1.4rem 2rem .4rem rgba(119,119,119,0.25); overflow: hidden;}
.talent-swiper .swiper-slide .wrap img {width: 100%;}

/* 슬라이드 텍스트 */
.main-talent .swiper-txt {flex: 1 0 0; padding-left: 2rem;}
.main-talent .swiper-txt div {font-size: 4.8rem; font-weight: 700;}
.main-talent .swiper-txt p {margin-top: 2.8rem; color: var(--col-gray); font-size: 2.4rem; line-height: 1.4;}

/* 슬라이드 네비게이션 */
.talent-txt-nav {display: flex; gap: 1.2rem; margin-top: 6rem;}
.talent-txt-nav button {display: flex; justify-content: center; align-items: center; width: 5rem; aspect-ratio: 1; border: 1px solid var(--col-gray); border-radius: 50%;}
.talent-txt-nav .talent-prev {transform: rotate(180deg);}
@media (hover: hover) and (pointer: fine) {
    .talent-txt-nav button:hover {border-color: var(--col-theme);}
}

@media (min-width: 1921px) {
    .main-talent {max-width: 192rem; margin: 0 auto; overflow: visible;}
}
@media (max-width: 1725px) {
    .main-talent::after {width: 30%;}
}
@media (max-width: 1280px) {
    .main-talent::before {left: -10rem;}
    .main-talent {gap: 2rem; padding: 10rem 0;}
    .talent-swiper {width: 50%; gap: 1rem;}
}
@media (max-width: 1110px) {
    .main-talent {padding: 10rem 0;}
}
@media (max-width: 992px) {
    .main-talent::before {width: 80%;}
    .main-talent .swiper-txt div {font-size: 3rem;}
    .main-talent .swiper-txt p {font-size: 2rem;}
}
@media (max-width: 767px) {
    .main-talent {flex-direction: column; gap: 6rem;}
    .main-talent .swiper-txt {padding: 0 2rem;}
    .main-talent .swiper-txt div br,
    .main-talent .swiper-txt p br {display: none;}
    .talent-txt-nav {margin-top: 3rem;}
    .talent-swiper {width: 100%; max-width: calc(400px + 8rem); padding: 0;}
    .talent-swiper .swiper-slide {padding: 0 4rem 4rem;}
}
@media (max-width: 576px) {
    .talent-swiper .swiper-slide {padding: 0 1rem 4rem;}
}



/*============================================================*/
/* 스토어 버튼 */
/*============================================================*/
.main-link .container {display: flex; gap: 2rem;}

.main-link a {flex: 1 0 0; position: relative; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 700/361; padding: 2rem 5.6rem; border-radius: 4.8rem; overflow: hidden; transition: var(--trans-45); z-index: 1;}
.main-link a:before {content: ""; position: absolute; width: 66%; aspect-ratio: 1; border-radius: 50%; transition: var(--trans-45); z-index: -1;}
.main-link a:after {content: ""; position: absolute; background-size: contain; background-repeat: no-repeat; transition: var(--trans-25); z-index: -1;}

.main-link a .txt small {display: block; margin-bottom: 0.5rem; color: var(--col-theme);}
.main-link a .txt p {font-size: 2.4rem; font-weight: 500;}
.main-link a img {margin-top: 3rem;}

.main-link .btn-download.google {background-color: #F5F7F8;}
.main-link .btn-download.google img {width: 11rem;}
.main-link .btn-download.apple {background-color: #FFF5FA;}
.main-link .btn-download.apple img {width: 10rem;}

.main-link .btn-download.google::before {top: calc(50% + 10rem); left: calc(50% + 5rem); transform: translate(-50%, -50%); background: #EFEFEF;}
.main-link .btn-download.apple::before {top: 50%; left: 56%; transform: translate(-50%, -50%); background: #FFEBF5;}

.main-link .btn-download.google::after {top: 10rem; right: -6rem; width: 105%; aspect-ratio: 704/690; background-image: url("/img/banner_phone_01.png"); background-position: right top;}
.main-link .btn-download.apple::after {top: -8%; right: -35%; width: 110%; aspect-ratio: 765/592; background-image: url("/img/banner_phone_02.png"); background-position: right top;}

@media (hover: hover) and (pointer: fine) {
    .main-link .btn-download.google:hover::before {top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2.2); border-radius: 0;}
    .main-link .btn-download.apple:hover::before {top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2.2); border-radius: 0;}

    .main-link .btn-download.google:hover::after {top: 8rem;}
    .main-link .btn-download.apple:hover::after {right: -30%;}
}
@media (max-width: 1280px) {
    .main-link a {flex: auto; height: 36rem; aspect-ratio: auto;}
    .main-link .btn-download.google::after {top: 12rem; right: -8rem;}
    .main-link .btn-download.apple::after {top: 0; right: -40%;}
}
@media (max-width: 992px) {
    .main-link a {height: 23rem;}
}
@media (max-width: 767px) {
    .main-link .container {flex-direction: column;}
    .main-link a {padding: 2rem 4rem;}
}




/*============================================================*/
/* 배너 */
/*============================================================*/
.main-banner {height: 57rem; margin-top: 22rem; background: url("/img/mainBanner01.png") center top/cover no-repeat;}
.main-banner .container {display: flex; justify-content: center; align-items: center; height: 47rem; text-align: center;}
.main-banner .txt {font-size: 4.8rem; font-weight: 700; word-break: break-all;}
.main-banner .txt small {display: block; font-weight: 300;}

@media (max-width: 992px) {
    .main-banner .txt {font-size: 4rem;}
}
@media (max-width: 767px) {
    .main-banner {height: 44rem;}
    .main-banner .container {height: 37rem;}
    .main-banner .txt {font-size: 3.6rem; line-height: 1.3;}
}