@charset "utf-8";




.main_container {
	position:relative;
    width: calc(100vw * (375 / var(--design-width)));
    background-color: var(--black-color);
    overflow: hidden;
    padding-top: calc(100vw * (70 / var(--design-width)));
}



/* 카드 */



.card_box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vw * (190 / var(--design-width)));
    /* margin: 0 calc(100vw * (12 / var(--design-width))) 0; */
    padding: calc(100vw * (20 / var(--design-width)));
    box-sizing: border-box;
    border-radius: calc(100vw * (16 / var(--design-width)));
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 50%
    ),#1a1f2c;
    box-shadow: 0 calc(100vw * (-6 / var(--design-width))) calc(100vw * (8 / var(--design-width))) 0 rgba(0, 0, 0, 0.16);
    color: var(--white-color);
}

/*상태: 카드있음*/
.card_box_wrpper .has_card_box{
	display: flex;
}
.card_box_wrpper .no_card_box{
	display: none;
}

/*상태: 카드없음*/
.card_box_wrpper.no-card .has_card_box{
	display: none;
}
.card_box_wrpper.no-card .no_card_box{
	display: flex;
}



.card_box.no_card_box .card_bottom {
    justify-content: center;
}
.card_box.no_card_box .card_detail {
    display: flex;
    justify-content: center;
}
.card_header{
    display: flex;
    align-items: center;
    
}
.card_brand img{
    width: calc(100vw * (29 / var(--design-width)));
    height: auto;
}
.card_header .title{
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: calc(100vw * (12 / var(--design-width)));
}
.card_header .amount{
    display: flex;
    align-items: center;
    font-size: calc(100vw * (20 / var(--design-width)));
    margin-left: auto;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.card_header .no_card_message{
    display: flex;
    align-items: center;
    font-size: calc(100vw * (16 / var(--design-width)));
    margin-left: auto;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.card_header .amount span{
    color: var(--main-color);
}

.card_detail{
    opacity: 0;
    transform: translateY(10%);
    transition: transform 0.2s ease, opacity 0.1s ease;
}
.card_detail .amount{
    display: flex;
    align-items: center;
    font-size: calc(100vw * (36 / var(--design-width)));
    margin-left: calc(100vw * (10 / var(--design-width)));
    margin-top: calc(100vw * (34 / var(--design-width)));
}
.card_detail .no_card_message{
    display: flex;
    align-items: center;
    font-size: calc(100vw * (36 / var(--design-width)));
    margin-left: calc(100vw * (10 / var(--design-width)));
    margin-top: calc(100vw * (34 / var(--design-width)));
    font-weight: 600;
}
.card_detail .amount span {
    color: var(--main-color);
}



.card_header .tag_stop {
    color: var(--caution-color);
    font-size: calc(100vw * (16 / var(--design-width)));
	display: none;
}
.card_header .tag_stop.is_paused {
    display: inline-block;
}
.card_bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(30%);
    transition: transform 0.3s ease, opacity 0.1s ease;
}
.card_number{
    display: flex;
    align-items: center;
    gap: calc(100vw * (10 / var(--design-width)));
}
.card_number span {
    color: var(--white-color);
    font-size: calc(100vw * (14 / var(--design-width)));
    font-weight: 600;
    letter-spacing: 0.06em;
}
.btn_card_topup {
    display: flex;
    align-items: center;
    gap: calc(100vw * (10 / var(--design-width)));
    border-radius: calc(100vw * (20 / var(--design-width)));
    height: calc(100vw * (40 / var(--design-width)));
    padding: 0 calc(100vw * (20 / var(--design-width)));
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: var(--white-color);
}
.btn_card_apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * (10 / var(--design-width)));
    border-radius: calc(100vw * (20 / var(--design-width)));
    height: calc(100vw * (40 / var(--design-width)));
    padding: 0 calc(100vw * (40 / var(--design-width)));
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: var(--white-color);
}


.main_container.is-open .card_header .amount,
.main_container.is-open .card_header .no_card_message {
    opacity: 0;
    transform: translateY(10%);
}

.main_container.is-open .card_detail,
.main_container.is-open .card_bottom {
    opacity: 1;
    transform: translateY(0);
}



.contents_box {
    position: relative;
    z-index: 10;
    width: 100%;
    background: #ffffff;
    padding: calc(100vw * (8 / var(--design-width))) 0 calc(100vw * (100 / var(--design-width)));
    box-sizing: border-box;
    margin-top: calc(100vw * (-110 / var(--design-width)));
    transition: margin-top 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contents_box::before {
    content: '';
    position: absolute;
    top: calc(100vw * (-23.8 / var(--design-width))); 
    left: 0;
    width: calc(100vw * (375.2 / var(--design-width)));
    height: calc(100vw * (24 / var(--design-width)));
    border-radius: calc(100vw * (24 / var(--design-width))) calc(100vw * (24 / var(--design-width))) 0 0; 
    background: url("../image/main/notch.svg") repeat-x left bottom;
    background-size: 100% auto;
    z-index: 1;
}


.btn_card_toggle {
    position: absolute;
    left: 50%;
    top: calc(100vw * (-46 / var(--design-width)));
    transform: translateX(-50%);
    width: calc(100vw * (46 / var(--design-width)));
    height: calc(100vw * (46 / var(--design-width)));
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.30) 100%);

    cursor: pointer;
    z-index: 100;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_card_toggle span{
    display: block;
    width: calc(100vw * (17 / var(--design-width)));
    height: calc(100vw * (9 / var(--design-width)));
}





.main_container.is-open .contents_box {
    margin-top: calc(100vw * (60 / var(--design-width))); /* 펼쳐졌을 때 내려가는 거리 */
}

.main_container.is-open .btn_card_toggle {
    transform: translateX(-50%) rotate(180deg);
    top: calc(100vw * (-46 / var(--design-width)));
}



.wallet_box{
    min-height: calc(100vw * (173 / var(--design-width)));
    border-radius: calc(100vw * (16 / var(--design-width)));
    border: 1px solid var(--border-color);
    background: var(--white-color);
    box-shadow: 0 calc(100vw * (2 / var(--design-width))) calc(100vw * (6 / var(--design-width))) 0 rgba(0, 0, 0, 0.06);
    padding: calc(100vw * (20 / var(--design-width))) calc(100vw * (20 / var(--design-width))) calc(100vw * (10 / var(--design-width)));
    margin: 0 calc(100vw * (16 / var(--design-width)));
}

.wallet_box .title{
    color: var(--gray-color);
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 600;
    margin-bottom: calc(100vw * (6 / var(--design-width)));
}
.wallet_amount {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100vw * (64 / var(--design-width)));
    padding: 0 calc(100vw * (15 / var(--design-width)));
    border-radius: calc(100vw * (8 / var(--design-width)));
    background: var(--box-bg-color);
    margin-bottom: calc(100vw * (10 / var(--design-width)));
    font-size: calc(100vw * (28 / var(--design-width)));
}
.wallet_amount .icon_quick {
    margin-left: auto;
	background: var(--black-color);
}
.wallet_btn_group{
    display: flex;
    align-items: center;
}
.wallet_btn_group button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * (6 / var(--design-width)));
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 600;
    color: var(--black-color);
    height: calc(100vw * (44 / var(--design-width)));
}
.wallet_btn_group button::before {
    content: "";
    display: inline-block;
    width: calc(100vw * (20 / var(--design-width)));
    height: calc(100vw * (20 / var(--design-width)));
    background: var(--black-color);
    mask: url("../image/main/icon_deposit.svg") no-repeat center / contain;
    -webkit-mask: url("../image/main/icon_deposit.svg") no-repeat center / contain;
}
button.btn_wallet_gift::before{
    mask-image: url("../image/main/icon_gift.svg");
    -webkit-mask-image: url("../image/main/icon_gift.svg");
}

.service_list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * (18 / var(--design-width)));
    margin-top: calc(100vw * (30 / var(--design-width)));
}
.service_list button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * (10 / var(--design-width)));
    min-width: 0;
    color: var(--black-color);
    text-align: center;
    font-size: calc(100vw * (13 / var(--design-width)));
    font-weight: 600;
    word-break: keep-all;
}
.service_list button span{
    display: flex;
    width: calc(100vw * (66 / var(--design-width)));
    height: calc(100vw * (66 / var(--design-width)));
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--box-bg-color);
}
.service_list button span img{
    width: calc(100vw * (33 / var(--design-width)));
    height: auto;
    object-fit: contain;
}

/* Swiper */
.event_banner {
    position: relative;
    margin: calc(100vw * (40 / var(--design-width))) 0 0;
    padding: 0 calc(100vw * (16 / var(--design-width)));
}

/* 배너 내부 */
.banner_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--box-bg-color);
    border-radius: calc(100vw * (16 / var(--design-width)));
    height: calc(100vw * (100 / var(--design-width)));
	overflow: hidden;
}

.banner_content .text_area strong {
    display: block;
    font-size: calc(100vw * (20 / var(--design-width)));
    font-weight: 600;
    color: var(--black-color);
    margin-bottom: calc(100vw * (8 / var(--design-width)));
}

.banner_content .text_area p {
    font-size: calc(100vw * (14 / var(--design-width)));
    color: var(--gray-color);
}

.banner_content .img_area {
    width: calc(100vw * (52 / var(--design-width))); 
    height: calc(100vw * (52 / var(--design-width)));
    flex: 0 0 auto;
}

.banner_content .img_area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.event_banner .swiper-pagination{
    top: auto;
    bottom: -18px;
}
.event_banner .swiper-pagination-bullet {
    width: calc(100vw * (6 / var(--design-width)));
    height: calc(100vw * (6 / var(--design-width)));
    background: #E7E7E7;
    opacity: 1; 
    margin: 0 calc(100vw * (3 / var(--design-width))) !important;
}

.event_banner .swiper-pagination-bullet-active {
    background: var(--main-color);
}


/* product */
.product_wrapper {
    background: var(--box-bg-color);
    margin-top: calc(100vw * (40 / var(--design-width)));
    border-top: 1px solid var(--border-color);
    padding: calc(100vw * (50 / var(--design-width))) calc(100vw * (16 / var(--design-width))) calc(100vw * (30 / var(--design-width)));
}
.product_header {
    display: flex;
    align-items: center;
}
.product_header .title{
    color: var(--black-color);
    font-size: calc(100vw * (22 / var(--design-width)));
    font-weight: 600;
    width: 60%;
    line-height: 1.3;
}
.product_header .title button {
    display: flex;
    align-items: center;
    gap: calc(100vw * (8 / var(--design-width)));
    color: var(--gray-color);
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 400;
    margin-top: calc(100vw * (8 / var(--design-width)));
}
.product_header .title button .icon_quick{
    background: var(--black-color);
}
.product_header .object {
    flex: 0 0 auto;
    width: calc(100vw * (62 / var(--design-width)));
    height: auto;
    margin-left: auto;
}

.product_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: calc(100vw * (24 / var(--design-width)));
    column-gap: calc(100vw * (12 / var(--design-width)));
    margin-top: calc(100vw * (30 / var(--design-width)));
}

.product_img_box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--white-color);
    aspect-ratio: 1/1;
    padding-bottom: 100%;
}
.product_img_box .item_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 내부 요소 정중앙 배치 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.product_txt_box {
    margin-top: calc(100vw * (10 / var(--design-width)));
}
.product_brand{
    font-size: calc(100vw * (12 / var(--design-width)));
    color: var(--gray-color);
}
.product_name{
    font-size: calc(100vw * (12 / var(--design-width)));
    color: var(--black-color);
    font-size: calc(100vw * (16 / var(--design-width)));
    font-weight: 600;
    margin-top: calc(100vw * (4 / var(--design-width)));
	line-height: 1.3;
}
.product_amount{
    color: var(--black-color);
    font-size: calc(100vw * (14 / var(--design-width)));
    font-weight: 600;
    margin-top: calc(100vw * (11 / var(--design-width)));
}
.product_amount .per{
    margin-right: calc(100vw * (5 / var(--design-width)));
}
.btn_more{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 100%;
    height: calc(100vw * (62 / var(--design-width)));
    margin-top: calc(100vw * (30 / var(--design-width)));
    background: var(--white-color);
    box-shadow: var(--btn-shadow);
}
.btn_more .icon_quick {
    margin-left: calc(100vw * (8 / var(--design-width)));
    background: var(--black-color);
}
/* End product */


/* mall */
.mall_wrap{
    padding: calc(100vw * (40 / var(--design-width))) 0 0;
}

.mall_header{
    color: var(--black-color);
    font-size: calc(100vw * (22 / var(--design-width)));
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 calc(100vw * (16 / var(--design-width)));
}
.mall_header .btn_mall_more{
    margin-left: auto;
}
.mall-swiper .swiper-slide {
    width: calc(100vw * (275 / var(--design-width))); 
}
.mall_content{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: calc(100vw * (44 / var(--design-width))) calc(100vw * (20 / var(--design-width)));
    flex-shrink: 0;
    border-radius: var(--common-radius);
    background: var(--white-color);
    box-shadow: var(--box-shadow);
}


.mall-swiper{
    padding: calc(100vw * (30 / var(--design-width))) 0;
}

.mall_content .img_area{
    width: calc(100vw * (200 / var(--design-width)));
    height: calc(100vw * (200 / var(--design-width)));
    overflow: hidden;
    border-radius: var(--common-radius);
}
.mall_content .text_area{
    width: 100%;
    margin-top: calc(100vw * (24 / var(--design-width)));
}
.mall_content .text_area .origin{
    margin-right: calc(100vw * (5 / var(--design-width)));
}

.mall_wrap .btn_more{
    padding-top: 0;
    width: calc(100% - (100vw * (32 / var(--design-width))));
    margin: 0 auto;
}


/* End mall */

/* footer */
footer {
    background: var(--background-color);
    padding: 0 0 calc(100vw * (160 / var(--design-width)));
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer_ling_group {
    display: flex;
    align-items: center;
    gap: calc(100vw * (16 / var(--design-width)));
    margin-bottom: calc(100vw * (6 / var(--design-width)));
}
.footer_ling_group button {
    color: var(--gray-color);
    font-size: calc(100vw * (14 / var(--design-width)));
}
.footer_copyright {
    color: var(--gray-color);
    font-size: calc(100vw * (14 / var(--design-width)));
    margin-bottom: calc(100vw * (20 / var(--design-width)));
}
.footer_logo {
    width: calc(100vw * (120 / var(--design-width)));
    height: auto;
    filter: grayscale();
}
/* End footer */