@charset "utf-8";

#container.main_container {
	min-height:unset;
}
.main_container {
    display: flex;
    flex-direction: column;
    padding: calc(100vw * (10/375)) calc(100vw * (12/375));
    .main_top_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(100vw * (10/375));
        background-color: #fff;
        border-radius: calc(100vw * (18/375));
        padding-left: calc(100vw * (16/375));
    }
    .main_top_user {
        flex: 1;
    }
    .main_user_name {
        font-weight: 700;
        max-width: calc(100vw * (220/375));
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
		font-size: calc(100vw * (18 / 375));
    }
    .main_user_mail {
        font-size: calc(100vw * (14/375));
        color: #767676;
        font-weight: 400;
        max-width: calc(100vw * (220/375));
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .main_top_qr {
        display: flex;
        align-items: center;
        gap: calc(100vw * (10/375));
        padding: calc(100vw * (9/375)) calc(100vw * (8/375));
        border-radius: calc(100vw * (8/375));
        background-color: #f3f3f3;
        font-weight: 700;
    }
    .main_slider {
/*        width: calc(100vw * (331/375));*/
        width: 100%;
        height: calc(100vw * (213/375));
        margin-top: calc(100vw * (8/375));
        overflow: visible;
		margin-left:0;
		margin-right:0;
    }
    .main_slider .swiper-slide {
        width: 100%;
        height: 100%;
        border-radius: calc(100vw * (18/375));
        overflow: hidden;
        padding: calc(100vw * (18/375)) calc(100vw * (16/375));
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
		background-size:100% 100%;
    }
    .text_paging.swiper-pagination {
        position: relative;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        width: 100%;
        display: flex;
        align-items: center;
        padding: calc(100vw * (6/375));
        border-radius: calc(100vw * (18/375));
        background-color: #fff;
        margin-top: calc(100vw * (8/375));
		display:none;
    }
    .text_paging .swiper-pagination-bullet {
        width: fit-content;
        height: calc(100vw * (42/375));
        background-color: transparent;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(100vw * (16/375));
        font-weight: 400;
        margin: 0 !important;
    }
    .text_paging .swiper-pagination-bullet-active {
        background-color: #f2f6f5;
        border-radius: calc(100vw * (12/375));
        color: #202020;
        font-weight: 700;
    }
    .pagination_progress {
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        position: relative !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * (6/375));
        margin-top: calc(100vw * (12/375));
    }
    .pagination_progress .swiper-pagination-bullet {
        margin: 0 !important;
        background-color: #fff;
        opacity: 1;
    }
    .pagination_progress .swiper-pagination-bullet-active {
        background-color: #00A3E4;
    }
    .cash_slide.swiper-slide-active {
        margin-right: calc(100vw * (6/375));
    }
    .card_slide.swiper-slide-active {
        margin-left: calc(100vw * (6/375));
    }
    .cash_slide {
        background-image: url(../image/main/main_cash_bg.png);
        color: #fff;
        box-shadow: 0px 16px 30px -15px rgba(51, 179, 213, 0.70);
    }
    .card_slide {
        background-image: url(../image/main/main_card_bg.png);
        color: #202020;
        box-shadow: 0px 16px 30px -15px #C0C0C0;
    }
	.card_slide.nocard {
        background-image: url(../image/main/main_nocard.png);
    }
    .cash_txt {
        font-size: calc(100vw * (16/375));
        font-weight: 400;
        margin-top: calc(100vw * (35/375));
        margin-left: calc(100vw * (4/375));
    }
    .cash_slide .main_val span {
        font-size: calc(100vw * (42/375));
        font-weight: 700;
        color: #fff;
        letter-spacing: -0.01em;
        line-height: calc(100vw * (42/375));
        display: inline-block;
        margin-right: calc(100vw * (4/375));
    }
    .cash_slide .main_val {
        margin-top: calc(100vw * (21/375));
        font-size: calc(100vw * (24/375));
        color: #83def6;
        font-weight: 500;
        line-height: 1em;
        display: inline-block;
    }
    .main_slide_total {
        margin-top: auto;
        font-size: calc(100vw * (12/375));
        font-weight: 600;
        margin-left: calc(100vw * (10/375));
    }
    .main_slide_total .total {
        margin-left: calc(100vw * (5/375));
        margin-right: calc(100vw * (4/375));
    }
    .main_slide_total .php {
        color: #83def6;
    }
    .main_slide_btn {
        border-radius: calc(100vw * (18/375)) 0 calc(100vw * (18/375)) 0;
        background-color: #fff;
        position: absolute;
        bottom: calc(100vw * (-1/375));
        right: calc(100vw * (-1/375));
        background-color: #fff;
        padding: 0 calc(100vw * (16/375));
        height: calc(100vw * (47/375));
        display: flex;
        align-items: center;
        gap: calc(100vw * (10/375));
        font-size: calc(100vw * (14/375));
        font-weight: 700;
        color: #202020;
    }
    .card_slide .main_slide_btn {
        background-color: #00A3E4;
        color: #fff;
    }
    .card_slide .main_val span {
        font-size: calc(100vw * (42/375));
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: calc(100vw * (42/375));
        display: inline-block;
        margin-right: calc(100vw * (4/375));
    }
    .card_slide .main_val {
        margin-top: calc(100vw * (76/375));
        font-size: calc(100vw * (24/375));
        font-weight: 500;
        line-height: 1em;
        display: inline-block;
    }
	.card_slide .main_val .php {
		display:inline-block;
		color:#C2C2C2;
	}
    .main_slide_num {
        margin-top: auto;
        font-size: calc(100vw * (12/375));
        font-weight: 600;
        margin-left: calc(100vw * (10/375));
    }
    .main_slide_num span {
        margin-left: calc(100vw * (10/375));
    }
    .main_top_btn_group {
        display: flex;
        align-items: center;
        gap: calc(100vw * (6/375));
        margin-top: calc(100vw * (20/375));
    }
    .main_top_btn {
        display: flex;
        flex: 1;
        background-color: #fff;
        border-radius: calc(100vw * (18/375));
        flex-direction: column;
        gap: calc(100vw * (4/375));
        padding: calc(100vw * (16/375)) calc(100vw * (12/375)) 0;
        font-size: calc(100vw * (14/375));
        height: calc(100vw * (100/375));
		text-align:left;
		font-weight:700;
    }
    .main_top_btn img {
        width: calc(100vw * (26/375));
    }
    .main_subtitle {
        font-size: calc(100vw * (16/375));
        font-weight: 700;
    }
    .mission_check {
        padding: calc(100vw * (20/375));
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (12/375));
        border-radius: calc(100vw * (18/375));
        background-color: #fff;
        margin-top: calc(100vw * (12/375));
        box-shadow: 0px 14px 12px -12px rgba(0, 0, 0, 0.12);
    }
    .check_title_row {
        display: flex;
        align-items: flex-start;
        gap: calc(100vw * (12/375));
    }
    .check_title_row img {
        width: calc(100vw * (42/375));
    }
    .chk_title_box {
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (2/375));
    }
    .chk_subtitle {
        font-size: calc(100vw * (14/375));
        color: #767676;
        font-weight: 400;
    }
    .chk_title {
        font-size: calc(100vw * (20/375));
        font-weight: 700;
    }
    .mission_check_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * (10/375));
        font-size: calc(100vw * (12/375));
        font-weight: 700;
        border-radius: calc(100vw * (8/375));
        background-color: #f2f6f5;
        padding: calc(100vw * (10/375)) calc(100vw * (12/375));
    }
    .mission_roulette {
        width: 100%;
        border-radius: calc(100vw * (18/375));
        background-color: #fff;
        overflow: hidden;
        margin-top: calc(100vw * (8/375));
        box-shadow: 0px 14px 12px -12px rgba(0, 0, 0, 0.12);
    }
    .roulette_title {
        font-size: calc(100vw * (22/375));
        font-weight: 700;
    }
    .roulette_txt {
        font-size: calc(100vw * (14/375));
        font-weight: 400;
        margin: calc(100vw * (6/375)) 0 calc(100vw * (12/375));
    }
    .roulette_btn {
        font-size: calc(100vw * (12/375));
        font-weight: 700;
        padding: calc(100vw * (10/375)) calc(100vw * (12/375));
        border-radius: calc(100vw * (8/375));
        background-color: #f2f6f5;
        width: fit-content;
    }
    .roulette_txt_box {
        max-width: calc(100vw * (145/375));
    }
    .mission_thumb {
        min-width: calc(100vw * (42/375));
        max-width: calc(100vw * (42/375));
    }
    .mission_text {
        display: flex;
        flex-direction: column;
    }
    .mission_subtitle {
        color: #767676;
        font-size: calc(100vw * (14/375));
        font-weight: 400;
    }
    .mission_title {
        font-size: calc(100vw * (20/375));
        font-weight: 700;
        margin-top: calc(100vw * (2/375));
    }
    .mission_btn {
        padding: calc(100vw * (3/375)) calc(100vw * (8/375));
        border-radius: calc(100vw * (50/375));
        color: #FFF;
        font-size: calc(100vw * (12/375));
        font-weight: 700;
        background-color: #00A3E4;
        width: fit-content;
        margin-top: calc(100vw * (12/375));
    }
    /* .special_mission::after {
        content: '';
        width: calc(100vw * (10/375));
        height: calc(100vw * (10/375));
        background-image: url(../image/main/mission_circle.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        left: calc(100vw * (-27/375));
        transform: translateY(-50%);
    }
    .special_mission:first-child::after {
        width: calc(100vw * (12/375));
        height: calc(100vw * (15/375));
        background-image: url(../image/main/mission_point.svg);
    } */
    .main_notice {
        display: flex;
        align-items: center;
        gap: calc(100vw * (12/375));
        padding: calc(100vw * (12/375));
        border-radius: calc(100vw * (18/375));
        background-color: #fff;
        margin-top: calc(100vw * (10/375));
    }
    .notice_icon {
        width: calc(100vw * (24/375));
    }
    .main_notice span {
        max-width: calc(100vw * (291/375));
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: calc(100vw * (17/375));
        font-weight: 400;
    }
    .special_mission_group {
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (8/375));
        padding-left: 0;
        margin-top: calc(100vw * (12/375));
    }
      
    .special_mission_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }
      
    .timeline_dot_col {
        position: relative;
        width: calc(100vw * (36/375));
        height: 100%;
    }
      
    .timeline_dot {
        width: calc(100vw * (10/375));
        height: calc(100vw * (10/375));
		max-height:unset;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        object-fit: contain;
        display: block;
    }

    .special_mission_row:first-child .timeline_dot {
        width: calc(100vw * (12/375));
        height: calc(100vw * (15/375));
    }
      
    /* 첫 번째는 포인트, 나머지는 서클 (이미지 src로 구분) */
      
    .timeline_line {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        border-left: 2px dashed #d1d5db;
        transform: translateX(-50%);
        z-index: 1;
        /* JS로 height와 top 조정 */
    }
    .timeline_line.on {
        border-left: 2px dashed #00A3E4;
    }
      
    /* special_mission 카드 스타일 기존 유지 */
    .special_mission {
        flex: 1;
        display: flex;
        gap: calc(100vw * (12/375));
        background-color: #fff;
        border-radius: calc(100vw * (18/375));
        padding: calc(100vw * (20/375));
        box-shadow: 0px 14px 12px -12px rgba(0, 0, 0, 0.12);
        position: relative;
    }
      
    /* 미션 카드 내부 스타일은 기존 코드 유지 */
}

.com_modal_up.main_pay_modal {
    .com_modal_box {
        padding: 0 calc(100vw * (12/375)) calc(100vw * (100/375));
    }
    .main_modal_close {
        display: flex;
        justify-content: center;
		margin-bottom:calc(100vw * (10 / 375));
    }
    .main_modal_title {
        font-size: calc(100vw * (13/375));
        font-weight: 700;
        margin-bottom: calc(100vw * (12/375));
    }
    .main_modal_grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: calc(100vw * (6/375));
    }
    .main_payment_type {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * (4/375));
        border: 1px solid #e4e4e4;
        border-radius: calc(100vw * (8/375));
        height: calc(100vw * (90/375));
        font-size: calc(100vw * (12/375));
        background-color: #fff;
    }
    .main_payment_type.on {
        border: 2px solid #00A3E4;
        background-color: #f3fcff;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    }
    .main_payment_type img {
        width: calc(100vw * (40/375));
    }
    .main_modal_text {
        padding: calc(100vw * (12/375));
        border: 1px solid #b0e8ff;
        background-color: #f3fcff;
        border-radius: calc(100vw * (8/375));
        display: flex;
        align-items: center;
        gap: calc(100vw * (6/375));
        font-size: calc(100vw * (13/375));
        font-weight: 700;
        color: #0093ce;
        margin: calc(100vw * (12/375)) 0 0;
    }
    .main_qr_select {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * (4/375));
        font-size: calc(100vw * (12/375));
        border-radius: calc(100vw * (8/375));
        border: 2px solid #ffb523;
        background-color: #fff9ee;
        height: calc(100vw * (90/375));
		animation: qrchose 0.75s linear infinite alternate;
    }
    .main_qr_select img {
        width: calc(100vw * (40/375));
    }
	.method_group{
		margin-top:calc(100vw * (20/375));
	}
    .method_group2 {
        display: none;
    }
	.method_group3 {
		display:none;
		.main_qr_select {
			background-color: #fff;
			border: 1px solid #e4e4e4;
			animation:none;
			img {
				border-radius:calc(100vw * (4/375));
			}
		}
		.main_qr_select.on {
			box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
			border:2px solid var(--main-color);
			background: #F3FCFF;
		}
		.main_qr_select.unable {
			img {
				filter: grayscale(100%);
			    opacity: 0.4;
			}
			span {
				color:#888;
			}
		}
	}
}

#btn_payment_directpay {
    display: none;
}

.main_pay_modal.on {
    transform: translateY(0%);
}

  
.com_modal_up.guide_modal {
    z-index: 10001;
    .com_modal_box {
        padding: calc(100vw * (40/375)) 0 0;
    }
    .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    .guide_modal_img {
        padding: calc(100vw * (60/375)) calc(100vw * (12/375)) calc(100vw * (200/375));
        height: calc(100vw * (635/375));
		.guide_modal_box {
			display:flex;
			flex-direction:column;
			.guide_modalbox_tit {
				text-align: center;
				font-family: "Noto Serif";
				font-size: calc(100vw * (20/375));
				font-style: italic;
				font-weight: 400;
				text-transform: capitalize;
				span {
					font-weight:700;
				}
			}
			.guide_modalbox_subtit {
				color: var(--gray-color);
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 140%;
                margin: calc(100vw * (20 / 375)) auto 0;
                max-width: calc(100vw * (260 / 375));
			}
			.guide_modalbox_img {
				width:calc(100vw * (311/375));
				margin:0 auto;
			}
			.guide_modalbox_txt {
				color: var(--gray-color);
				text-align: center;
				font-size: calc(100vw * (14/375));
				font-weight: 400;
				line-height: 140%;
				margin: calc(100vw * (20 / 375)) auto 0;
                max-width: calc(100vw * (260 / 375));
			}
		}
    }
    .guide_btn_box {
        border-radius: calc(100vw * (30/375)) calc(100vw * (30/375)) 0 0;
        background-color: #f3f3f3;
        padding: calc(100vw * (20/375)) calc(100vw * (35/375)) calc(100vw * (76/375));
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .guide_btn {
        width: 100%;
        height: calc(100vw * (56/375));
        background-color: #fff;
        border: 1px solid #83a7bd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(100vw * (18/375));
        color: #45667c;
        font-weight: 700;
        border-radius: calc(100vw * (15/375));
        z-index: 2;
    }
    .btn_outer {
        content: '';
        width: 100%;
        height: calc(100vw * (62/375));
        border-radius: calc(100vw * (18/375));
        background-color: #dceffb;
        padding: 3px;
    }
    .guide-pagination {
        position: absolute;
        bottom: calc(100vw * (40/375));
        left: 0;
        width: 100%;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * (8/375));
    }
    .swiper-pagination-bullet {
        margin: 0 !important;
        width: calc(100vw * (6/375)) !important;
        height: calc(100vw * (6/375)) !important;
    }
    .swiper-pagination-bullet-active {
        background-color: #45667c;
        width: calc(100vw * (12/375)) !important;
        height: calc(100vw * (6/375)) !important;
        border-radius: calc(100vw * (50/375));
    }
}

.guide_modal.on {
    transform: translateY(0%);
}


@keyframes qrchose{
	0% {
		border:2px solid #fff9ee;
	}
	100% {
		border:2px solid #ffb523;
	}
}



/* copy 추가본 */
.main_container {
    padding-top: calc(100vw * (80/375));
    background-color: var(--mainbgcolor);
}
.main_card_area .my_card {
    background-image: url('../image/main/main_mycard_bg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    width: 100%;
    height: calc(100vw * (213/375));
    position: relative;
}
.main_card_area .my_card.add_card {
    background-image: url('../image/main/main_add_mycard_bg.png');
}
.main_card_area .my_card .slide_btn {
    width: calc(100vw * (34/375));
    height: calc(100vw * (24/375));
    position: absolute;
    top: calc(100vw * (16/375));
    right: calc(100vw * (20/375));
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.main_card_area .my_card .slide_btn img {
    width: calc(100vw * (10/375));
    transition: 0.35s;
}
.main_card_area.on .my_card .slide_btn img {
    transform: rotate(-180deg);
    transition: 0.35s;
}
.main_card_area .my_card.add_card .slide_btn img {
    transform: rotate(-90deg);
    transition: 0;
}
.main_card_area .my_card .money_tit {
    font-size: calc(100vw * (18/375));
    letter-spacing: calc(100vw * (-0.9/375));
    position: absolute;
    width: fit-content;
    top:calc(100vw * (16/375));
    left: calc(100vw * (86/375));
    font-weight: 400;
    color: #57CFFF;
/*    text-transform: uppercase;*/
    display: flex;
    gap:calc(100vw * (4/375));
    transition: 0.1s;
}
.main_card_area.on .my_card .money_tit {
    font-size:calc(100vw * (38/375));
    top: calc(100vw * (56 / 375));
    left: calc(100vw * (77 / 375));
    transition: 0.1s;
}
.main_card_area.on .my_card.add_card .money_tit {
    font-size:calc(100vw * (18/375));
    top: calc(100vw * (12 / 375));
    left: calc(100vw * (20 / 375));
    transition: 0.1s;
}
.main_card_area .my_card .money_tit span {
    color:#fff;
    font-weight: 700;
    letter-spacing: calc(100vw * (-0.9/375));
}
.main_card_area.on .my_card .money_tit span {
    letter-spacing: calc(100vw * (-1.9/375));
}
.main_card_area.on .my_card.add_card .money_tit span {
    letter-spacing: calc(100vw * (-0.9/375));
}
.main_card_area .my_card.add_card .money_tit {
    display: flex;
    align-items: center;
    left: calc(100vw * (20/375));
    img {
        width: calc(100vw * (14/375));
        height: calc(100vw * (14/375));
    }
	img.visa_icon {
		width: calc(100vw * (52/375));
		height: calc(100vw * (16/375));
	}
}
.main_card_area .my_card .card_info {
    position: absolute;
    top: calc(100vw * (133/375));
    left: calc(100vw * (20/375));
    display: flex;
    align-items: center;
    width: calc(100% - (100vw * (40/375)));
}
.main_card_area .my_card .card_info .card_num {
    color: #FFF;
    font-size: calc(100vw * (14/375));
    font-weight: 700;
}
.main_card_area .my_card .card_info .topup_btn {
    margin-left: auto;
    padding: 10px 20px;
    border-radius: 100px;
    background: #FFF;
    color: #006C98;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    gap: 10px;
}
.main_card_area .my_cash {
    border-radius: calc(100vw * (18/375));
    background: #FFF;
    padding: calc(100vw * (30/375)) calc(100vw * (16/375)) calc(100vw * (20/375));
    align-self: stretch;
    margin-top: calc(100vw * (-158/375));
    transition: 0.1s;
}
.main_card_area.on .my_cash {
    margin-top: calc(100vw * (-15/375));
    transition: 0.1s;
}
.main_card_area.on .my_card.add_card + .my_cash {
    margin-top: calc(100vw * (-165 / 375));
}
.main_card_area .my_cash .mycash_txt {
    font-size: calc(100vw * (16/375));
    font-weight: 400;
}
.main_card_area .my_cash .main_val {
    color: #000;
    font-size: calc(100vw * (38/375));
    font-weight: 400;
    line-height: 100%;
    display: flex;
    gap: calc(100vw * (4/375));
    margin-top: calc(100vw * (14/375));
}
.main_card_area .my_cash .main_val span {
    font-weight: 700;
    letter-spacing: calc(100vw * (-1.9/375));
}
.main_card_area .my_cash .main_val2 {
    display: flex;
    align-items: center;
    margin-top: calc(100vw * (16/375));
    gap: calc(100vw * (4/375));
    font-size: calc(100vw * (19/375));
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
}
.main_card_area .my_cash .main_val2 span.sign {
    color: #006C98;
}
.main_card_area .my_cash .main_val2 span.num {
    font-weight: 500;
    letter-spacing: calc(100vw * (-0.95/375));
}
.main_card_area .my_cash .main_card_btn {
    display: flex;
    gap:calc(100vw * (4/375));
    margin-top: calc(100vw * (36/375));
}
.main_card_area .my_cash .main_card_btn button {
    flex: 1;
    border-radius: calc(100vw * (8 / 375));
    background: #E6F8FF;
    padding: calc(100vw * (16.5 / 375)) calc(100vw * (10 / 375));
    min-height: calc(100vw * (56 / 375));
    display: flex;
    gap: calc(100vw * (10 / 375));
    justify-content: center;
    align-items: flex-start;
}
.main_card_area .my_cash .main_card_btn button img {
    width: calc(100vw * (26/375));
    height: calc(100vw * (26/375));
}
.main_card_area .my_cash .main_card_btn button span {
    color: #006C98;
    text-align: center;
    font-size: calc(100vw * (17/375));
    font-weight: 600;
}


.main_container .main_top_btn_group {
    flex-direction: column;
    gap: 0;
    background-color: #fff;
    padding: calc(100vw * (10/375)) calc(100vw *(20/375));
    border-radius: calc(100vw * (18/375));
    margin-top:calc(100vw * (10/375))
}
.main_container .main_top_btn {
    width: 100%;
    border-radius: 0;
    flex-direction: row;
    gap: calc(100vw * (12 / 375));
    padding: calc(100vw * (14 / 375)) 0;
    border-bottom: 1px solid #E4F0F5;
    align-items: center;
    font-size: calc(100vw * (17/375));
    font-weight: 600;
    line-height: 1.2;
    height: auto;
}
.main_container .main_top_btn:after {
    content:"";
    width: calc(100vw * (20/375));
    height: calc(100vw * (20/375));
    background-image: url('../image/main/main_top_btn_point.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: auto;
}
.main_container .main_top_btn:last-child {
    border-bottom: 0;
}
.main_container .main_top_btn span {
    max-width: calc(100vw * (230 / 375));
}


.recommendation {
    background-color: #fff;
    border-radius: calc(100vw * (18/375));
    padding: calc(100vw * (20/375)) 0;
    margin-top: calc(100vw * (10/375));
}
.recommendation .recom_tit {
    color: #000;
    font-size: calc(100vw * (17/375));
    font-weight: 600;
    padding: 0 calc(100vw * (20/375));
}
.recommendation .recom_tit span {
    color: #006C98;
}


.recommendation .recom_swiper {
    width: 100%;
    margin-top: calc(100vw * (18/375));
    padding: 0 calc(100vw * (20/375));
}
.recommendation .recom_swiper .swiper-slide {
    background: #F6F9FD;
    border-radius: calc(100vw * (8/375));
    padding: calc(100vw * (20/375));
    min-height: calc(100vw * (200/375));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	height:auto;
}
.recommendation .recom_swiper .swiper-slide img {
    width: calc(100vw * (56/375));
    height: calc(100vw * (56/375));
	object-fit: cover;
	margin:auto 0 0 auto;
}
.recommendation .recom_swiper .swiper-slide .recom_subtit {
    font-size: calc(100vw * (15/375));
    font-weight: 400;
    color: #98A2A6;
}
.recommendation .recom_swiper .swiper-slide .recom_title {
    color: #000;
    font-size: calc(100vw * (20/375));
    font-weight: 700;
	margin-top:calc(100vw * (4/375));
}
.recommendation .recommendation-pagination {
	position:unset;
	display:flex;
	gap:calc(100vw * (6/375));
	justify-content: center;
	.swiper-pagination-bullet {
		border-radius: 100%;
		background: #CBDBE0;
		width:calc(100vw * (6/375));
		height:calc(100vw * (6/375));
		margin:0 !important;
		opacity:1;
	}
	.swiper-pagination-bullet-active {
		background:var(--main-color);
	}
}
.recommendation .recommendation-pagination.swiper-pagination-bullets {
	margin-top:calc(100vw * (18/375));
}
/* END - copy 추가본 */