@charset "utf-8";

.sub-content {position: relative; min-height: calc(100dvh - var(--hd-height) - 0.1rem); padding: 10rem 0; overflow-x: hidden;}

@media (min-width: 1921px) {
    .sub-content {padding: 10rem 0 20rem;}
}



/* ============================================================
/* 서브 타이틀 */
/* ============================================================ */
.sub-title {position: relative; margin-top: 16%; margin-bottom: 8%; text-align: center;}
.sub-title::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88%; max-width: 1268px; aspect-ratio: 1268/332; border-radius: 50%; background: rgba(46,15,161,0.7); filter: blur(5rem); z-index: -1;}
.sub-title::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 53%; max-width: 580px; aspect-ratio: 580/326; border-radius: 50%; background: rgba(0,144,246,0.6); filter: blur(14rem); z-index: -1;}
.sub-title h2 {font-size: 6.6rem; font-weight: 500;}
.sub-title h2 br {display: none;}
.sub-title p {max-width: 1097px; margin: 3rem auto 0; font-size: 1.8rem; line-height: 1.75;}
.sub-title p br {display: none;}

.lang-vi .sub-title h2,
.lang-id .sub-title h2 {font-size: 4.6rem;}

@media (max-width: 768px) {
    .sub-title::before,
    .sub-title::after {width: 100%;}
    .sub-title h2 {font-size: 4.6rem;}
    .lang-vi .sub-title h2,
    .lang-id .sub-title h2 {font-size: 4.6rem;}
}
@media (max-width: 576px) {
    .sub-title h2 br {display: block;}
    .sub-title p br {display: block;}
    .lang-vi .sub-title h2,
    .lang-id .sub-title h2 {font-size: 3.6rem;}
}



/* ============================================================
/* Values */
/* ============================================================ */
.value-list {display: flex; flex-wrap: wrap; gap: 2rem;}
.value-list > li {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; width: calc(25% - 1.5rem); padding: 2rem 2rem 3rem; border: 1px solid rgba(67,67,67,0.65); border-radius: 1.2rem; background: #030A38;}
.value-list > li span {display: flex; justify-content: center; align-items: center; width: 12rem; height: 3rem; margin: 0 0 1.6rem auto; border-radius: 5rem; font-size: 12px;}
.value-list > li p {margin-top: 2rem; color: #BBBBBB; font-size: 12px; line-height: 1.65;}
.value-list > li button {display: flex; justify-content: center; align-items: center; width: 100%; height: 4rem; border-radius: 1rem; color: #fff; font-size: 1.4rem; transition: var(--trans-25);}

.value-list > li:nth-child(1) span,
.value-list > li:nth-child(1) button {background: #F93131;}
.value-list > li:nth-child(2) span,
.value-list > li:nth-child(2) button {background: #FF8000;}
.value-list > li:nth-child(3) span,
.value-list > li:nth-child(3) button {background: #F5CB21;}
.value-list > li:nth-child(4) span,
.value-list > li:nth-child(4) button {background: #33DF11;}
.value-list > li:nth-child(5) span,
.value-list > li:nth-child(5) button {background: #009DFF;}
.value-list > li:nth-child(6) span,
.value-list > li:nth-child(6) button {background: #0066FF;}
.value-list > li:nth-child(7) span,
.value-list > li:nth-child(7) button {background: #7B00FF;}
.value-list > li:nth-child(8) span,
.value-list > li:nth-child(8) button {background: #F200FF;}
.value-list > li:nth-child(9) span,
.value-list > li:nth-child(9) button {background: #FF007B;}
.value-list > li:nth-child(10) span,
.value-list > li:nth-child(10) button {background: #3700FF;}
.value-list > li:nth-child(11) span,
.value-list > li:nth-child(11) button {background: #67DD00;}
.value-list > li:nth-child(12) span,
.value-list > li:nth-child(12) button {background: #A9DD00;}
.value-list > li:nth-child(13) span,
.value-list > li:nth-child(13) button {background: #00ddb4;}




/* 모달 */
.valuePage .modal img {margin-bottom: 4.5rem;}
.valuePage .modal-body {line-height: 1.75;}
.valuePage .modal-body::-webkit-scrollbar {width: 8px; height: 8px;}
.valuePage .modal-body::-webkit-scrollbar-track {background-color: transparent;}
.valuePage .modal-body::-webkit-scrollbar-thumb {background-color: #fff; border-radius: 50px;}
.valuePage .modal-body ol > li + li {margin-top: 1rem;}
.valuePage .modal-body ol > li > ul {padding-left: 1em;}

@media (hover: hover) and (pointer: fine) {
    .value-list > li button:hover {background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.3);}
}

@media (max-width: 992px) {
    .value-list > li {width: calc(33.33% - 1.4rem);}
}
@media (max-width: 768px) {
    .value-list > li {width: calc(50% - 1rem);}
}
@media (max-width: 576px) {
    .value-list > li {width: 100%;}
}



/*============================================================*/
/* Bonus */
/*============================================================*/
.bonus-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 8rem;}
.bonus-list > li {position: relative; width: calc(50% - 1rem); padding: 4rem 3.6rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,0.3); overflow: hidden; transition: var(--trans-25);}
.bonus-list > li::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(130deg, transparent, #fff); opacity: .15; pointer-events: none;}
.bonus-list > li .img {aspect-ratio: 627/291; margin-bottom: 3rem; border-radius: 1.6rem; overflow: hidden;}
.bonus-list > li .img img {width: 100%;}
.bonus-list > li h4 {font-size: 3.2rem; font-weight: 700;}
.bonus-list > li p {margin-top: 2rem; font-size: 87.5%; line-height: 1.75;}


@media (hover: hover) and (pointer: fine) {
    .bonus-list > li:hover {border-color: #fff;}
}
@media (max-width: 992px) {
    .bonus-list > li h4 {font-size: 2.8rem;}
}
@media (max-width: 768px) {
    .bonus-list > li {padding: 3rem 2rem;}
}
@media (max-width: 576px) {
    .bonus-list > li {width: 100%;}
}


/*============================================================*/
/* purchase */
/*============================================================*/
.purchase-banner {display: flex; flex-direction: column; justify-content: flex-end; gap: 3rem; height: 45rem; padding: 3.4rem 6.6rem; border-radius: 2rem; background: url("../img/page/purchase.png") center/cover no-repeat; overflow: hidden;}
.purchase-banner h4 {font-size: 4.6rem; font-weight: 500;}
.purchase-banner p {max-width: 700px; line-height: 1.75;}
.purchasePage .purchase-txt{ max-width: 1097px;  margin: 3rem auto 0; font-size: 1.8rem; line-height: 1.75;}


@media (max-width: 768px) {
    .purchase-banner {height: auto; padding: 4rem 3rem;}
    .purchase-banner h4 {font-size: 3rem;}
}