@charset "utf-8";
/* CSS Document */
[id^="sect_0"] {
    padding: var(--sec_pd) 0;
    transition: all var(--q_trans);
}

.half {
    width: 48% !important;
}

.sect_tit {
    line-height: 1.125;
}

.Cont_m_ver {
    display: none !important;
}

.swiper-slide {
    cursor: pointer;
}

.tit_point {
    padding-left: 35px;
    position: relative;
}
    /* 포인트 타이틀 */
    .tit_point::before {
        position: absolute;
        content: url(../images/tit_bar_blue.png);
        display: inline-block;
        width: 31px;
        height: 21px;
        top: -30%;
        left: 0;
    }

    .tit_point ~ p, .tit_point ~ p + p {
        padding-left: 35px;
    }
/* 섹션1 */
#sect_01 {
    padding-top: calc(var(--sec_pd) * 2);
}

    #sect_01 .sect_tit .now_here a {
        line-height: 1;
        display: inline-flex;
    }

        #sect_01 .sect_tit .now_here a:not(:last-child)::after {
            display: inline-flex;
            content: '';
            width: 1px;
            height: 1em;
            background-color: var(--gray_8);
            margin: 0 1.75rem;
        }

        #sect_01 .sect_tit .now_here a:hover {
            color: var(--light_point);
            font-weight: 700;
        }

        #sect_01 .sect_tit .now_here a.on {
            color: var(--point);
            font-weight: 700;
        }

    #sect_01 .sect_01_cont .sect_01_slide_box { /* 슬라이드 박스 */
        border: 1px solid var(--light_point);
        overflow: hidden;
        
    }

    #sect_01 .sect_01_cont .navi_pack { /* 슬라이드 네비 */
        border-right: 1px solid var(--light_point);
        width: 365px;
        overflow: visible;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        #sect_01 .sect_01_cont .navi_pack .menu_navi a {
            color: var(--gray_3);
            font-weight: 500;
            font-size: 1.75rem;
            display: flex;
            padding: 1.25rem;
            border-radius: var(--br_r);
            width: 107%;
            z-index: 3;
        }

            #sect_01 .sect_01_cont .navi_pack .menu_navi a:hover {
                color: var(--point);
            }

            #sect_01 .sect_01_cont .navi_pack .menu_navi a.active {
                background-color: var(--point);
                background-image: url(../images/arrow_r.png);
                background-repeat: no-repeat;
                background-position: right 1rem center;
                color: var(--white);
                font-weight: 700;
                font-size: 2rem;
                box-shadow: 0 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
                margin-bottom: 1rem;
            }

        #sect_01 .sect_01_cont .navi_pack .scroll_navi { /* 스크롤네비 */
            /* display: flex;
            margin-top: 2rem;
            align-items: center;
            gap: 0.75rem; */
            display: none;
        }
            /* #sect_01 .sect_01_cont .navi_pack .scroll_navi a {
                        pointer-events: auto; 
                        width: 40px;
                        aspect-ratio: 1 / 1;
                        background-color: var(--white);
                        border-radius: var(--br_c);
                        border: 1px solid var(--gray_5);
                        color: var(--gray_5);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                
            #sect_01 .sect_01_cont .navi_pack .scroll_navi a:hover {
                        border: 1px solid var(--point);
                        color: var(--point);
                        box-shadow: 0 0.25rem 0.25rem 0rem rgba(25,158,217,0.14);
            }
        #sect_01 .sect_01_cont .sect_01_slide .scroll_navi_m { 
            display: none;
        } */
        #sect_01 .sect_01_cont .sect_01_slide .scroll_navi_m {
        width: 100%;
        display: flex;
        position: absolute;
        top: 50%; 
        left: 0%;
        right: 0;
        transform: translateY(-50%);
        justify-content: space-between;
        align-items: center;
        padding: 0 1.25rem;
        pointer-events: none; 
        z-index: 5;
    }

        #sect_01 .sect_01_cont .sect_01_slide .scroll_navi_m a {
            pointer-events: auto; 
            width: 40px;
            aspect-ratio: 1 / 1;
            /* background-color: var(--white); */
            border-radius: var(--br_c);
            border: 1px solid var(--gray_5);
            color: var(--gray_5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #sect_01 .sect_01_cont .sect_01_slide .scroll_navi_m a:hover {
                border: 1px solid var(--point);
                color: var(--point);
                box-shadow: 0 0.25rem 0.25rem 0rem rgba(25,158,217,0.14);
            }



    #sect_01 .sect_01_cont .sect_01_slide { /* 슬라이드 */
        width: calc(100% - 365px);

        min-height: 916px;
        background-color: var(--bg_sky);
        position: relative;
    }

        #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper {
            gap: 1.25rem;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, minmax(260px, 1fr));
            opacity: 0; /* 기본 상태 */
            transform: translateY(10px);
        }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper.is-animating { /* 래퍼 애니메이션: 페이지 전환될 때마다 한 번씩 */
                animation: wrapperFadeUp .35s ease-out forwards;
            }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card { /* 카드 기본 상태: 숨김 */
                width: 100%;
                max-width: 500px;
                flex: 1 1 calc(50% - .625rem);
                display: none; /* 기본은 숨김 */
                flex-direction: column;
                border: 1px solid var(--white);
                opacity: 0;
                transform: translateY(15px);
            }

                #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card.is-visible {
                    display: inline-flex;
                }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper.is-animating .card.is-visible {
                animation: cardFade .35s ease-out forwards;
                animation-delay: var(--card-delay, 0ms); /* JS에서 넣어줄 딜레이 */
            }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper a.card:hover {
                border: 1px solid var(--point);
            }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card img {
                width: 260px;
                margin: 0 auto 1rem;
            }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card .txt {
                min-height: 70px;
            }

                #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card .txt .code {
                    font-weight: 500;
                    color: var(--point);
                    font-size: 1rem;
                    margin-bottom: 0.25rem;
                }

                #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card .txt .prod_name {
                    font-weight: 600;
                    color: var(--gray_3);
                    font-size: 1.25rem;
                }

@keyframes wrapperFadeUp { /* 래퍼 페이드업 */
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardFade { /* 카드 페이드업 애니메이션 */
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 섹션2 */
#sect_02 {
    padding: calc( var(--sec_pd) / 1.5 ) 0 var(--sec_pd);
    background-image: linear-gradient(135deg, #47baff,#00436d );
}

    #sect_02 .sect_02_cont {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .5rem;
    }

        #sect_02 .sect_02_cont .card {
            aspect-ratio: 500 / 240;
            width: 500px;
            /* flex: 1 1 33%; */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-image: url(../images/sect_02/sect_02_card_bg.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            padding: 3.5rem 1.5rem;
            margin: 0 .1%;
        }

            #sect_02 .sect_02_cont .card img {
                height: 85px;
                width: auto;
                margin-bottom: 1.5rem;
            }


/* 섹션3 */
#sect_03 {
    padding: calc(var(--sec_pd) * 2) 0 var(--sec_pd);
    background-image: url("../images/sect_03/sect_03_bg.png");
    background-repeat: no-repeat;
    background-position: top right;
}

    #sect_03 .sect_03_cont {
        width: 100%;
        max-width: 1175px;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center; */
        align-items: stretch;
        align-self: flex-end;
    }

        #sect_03 .sect_03_cont .card {
            width: 32%;
            border-left: 1px solid var(--point);
            padding: 2rem .5rem 2rem 1.5rem;
            display: flex;
            flex-direction: column;
            margin-bottom: 2rem;
            gap: 1rem;
        }

            #sect_03 .sect_03_cont .card > p {
                line-height: 1.2;
            }

/* 섹션4 */
#sect_04 {
    padding: var(--sec_pd) 0;
}
/* 한 줄 전체 */
.marquee_row {
    width: 140%;
    margin-left: -20%;
    position: relative;
}

/* 트랙: 카드 전체 길이만큼 확장됨 */
.marquee_track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

/* 화면에 5장 보이도록 */
.marquee_item {
    flex: 0 0 calc(100% / 5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; /* 간격 */
}

    /* 카드 디자인 */
    .marquee_item [class^="membership_card_"] {
        width: 100%;
        max-width: 526px;
        aspect-ratio: 526 / 280;
        border-radius: var(--br_l);
        overflow: hidden;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .membership_card_01 { background-image: url("../images/sect_04/01.png");}
        .membership_card_02 { background-image: url("../images/sect_04/02.png");}
        .membership_card_03 { background-image: url("../images/sect_04/03.png");}
        .membership_card_04 { background-image: url("../images/sect_04/04.png");}
        .membership_card_05 { background-image: url("../images/sect_04/05.png");}
        .membership_card_06 { background-image: url("../images/sect_04/06.png");}
        .membership_card_07 { background-image: url("../images/sect_04/07.png");}
        .membership_card_08 { background-image: url("../images/sect_04/08.png");}
        .membership_card_09 { background-image: url("../images/sect_04/09.png");}
        .membership_card_10 { background-image: url("../images/sect_04/10.png");}

/* 섹션5 */
.affiliate_card_slide {
    width: 80%;
    margin-left: 10%;
    position: relative;
}

#affiliate_card_box { /* 카드 박스 */
    width: 490px;
    aspect-ratio: 4.8 / 5;
    position: relative;
    overflow: hidden;
}

.affiliate_card { /* 카드 */
    width: 294px;
    aspect-ratio: 98 / 155;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
    z-index: 1;
    transition: transform 0.5s, opacity 0.5s;
    border-radius: var(--br_l);
    overflow: hidden;
    box-shadow: 0 3px 7px rgba(0,0,0,0.35);
}
.affiliate_card img{width: 100%;}

    .affiliate_card.active { /* 활성화 카드 */
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        z-index: 5;
        border: 1px solid var(--white);
        box-shadow: 0 0px 0.51rem 0.25rem rgba(255, 255, 255, 0.6), 0 0px 1rem 0.5rem rgba(255, 255, 255, 0.6),0 0px 2rem 1rem rgba(255, 255, 255, 0.75);
    }

    .affiliate_card.prev { /* 이전 카드 */
        transform: translate(calc(-50% - 40%), -50%) scale(0.8); opacity: 0.7; z-index: 2; }

    .affiliate_card.next { /* 다음 카드 */
        transform: translate(calc(-50% + 40%), -50%) scale(0.8); opacity: 0.7; z-index: 2;}

    .affiliate_card.active::after {
        display: none; /* 활성화된 카드의 그라디언트 제거 */
    }
        .affiliate_btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer; 
            
            width: 2.5rem;
            height: 2.5rem;
        
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: var(--br_c);
            color: var(--gray_5);
            border: 1px solid var(--gray_5);
            z-index:9;
            transition: all 0.3s ease;
            -webkit-tap-highlight-color:transparent!important;
        }

        .affiliate_arrow_up.affiliate_btn {left: 10%; }
        .affiliate_arrow_down.affiliate_btn {right: 10%;}

            .affiliate_btn:hover {
                border: 1px solid var(--point);
                color: var(--point);
                box-shadow: 0 0.25rem 0.25rem 0rem rgba(25,158,217,0.14);
            }

        #affiliate_card_box_info {
            width: calc(100%- 490px); display: flex; justify-content: center;  align-items: center;
        }

    .info { display: none; transition: opacity 0.5s; }
        .info.active { display: flex;  }
       
/* 섹션6 */
#sect_06 {
    padding: var(--sec_pd) 0;
    }
    .myReview_p,.swiper-pagination-pc { display: flex !important; }
    .myReview_m,.swiper-pagination-m { display: none !important; }
    #sect_06 .swiper-pagination{position: relative !important; width: fit-content!important; right: 0!important; bottom:0 !important; }
        #sect_06 .swiper-pagination-bullet {
            width: 12px;  
            height: 12px;
        } 
        #sect_06 .swiper-pagination-bullet-active {
            background-color: var(--point); /* 강조 색상 */
        }
/* ==================== 모바일 레이아웃 해상도 1280px 이상 ==================== */
@media(max-width: 1280px) {
    .sect_tit .fs_32.mt_10{margin-top: 2rem;}
    .fs_14, .fs_16 {
        font-size: 0.85rem
    }

    .Cont_p_ver {
        display: none !important;
    }

    .Cont_m_ver {
        display: flex !important;
    }

    .sect_tit .fs_32 {
        margin: 0.5rem 0 1.5rem;
    }

    /* 섹션1 */


    #sect_02 > .wrap.d_flex {
        flex-direction: column
    }

    #sect_02 .sect_02_cont {
        max-width: 100%;
    }

    #sect_02 .sect_tit {
        text-align: center;
    }

    /* 섹션2 */
    #sect_02 .sect_02_cont {
        justify-content: center;
        gap: 1rem;
    }

        #sect_02 .sect_02_cont .card {
            width: 48%;
            justify-content: center;
            text-align: center;
            line-height: 1.2;
        }

            #sect_02 .sect_02_cont .card img {
                height: 50px;
                width: auto;
                margin-bottom: 1.5rem;
            }

/* 섹션3 */
#sect_03 {
    background-size:70% auto;
   
}
    #sect_03 .sect_03_cont {
        min-width: 100%;
        align-items: center;
        justify-content: center;
    }

        #sect_03 .sect_03_cont .card {
            width: 48%;
            padding: 1.5rem;
        }

            #sect_03 .sect_03_cont .card .tit {
                align-items: start;
            }

                #sect_03 .sect_03_cont .card .tit img {
                    height: 27px;
                }

                #sect_03 .sect_03_cont .card .tit p {
                    line-height: 1.2;
                }


    /* 섹션4 */
    .marquee_item {
        flex: 0 0 calc(100% / 3);
        padding: 0 6px; /* 간격 */
    }
    /* 오른쪽 슬라이드 전체 너비 조정 */
    .sect4_card_Swiper_Cont {
        width: 100%;
        max-width: 100%;
    }

        .sect4_card_Swiper_Cont .swiper-wrapper {
            max-height: auto;
        }

            .sect4_card_Swiper_Cont .swiper-wrapper .swiper-slide {
                padding-left: 1rem;
                padding-right: 1rem;
                padding-bottom: 1rem;
            }

                .sect4_card_Swiper_Cont .swiper-wrapper .swiper-slide .see_btn {
                    width: 50%;
                    text-align: center;
                    padding: 1.3rem;
                    font-size: 135%;
                    font-weight: 300
                }

    .half {
        width: 100% !important;
    }


/* 섹션5 */
.affiliate_card_slide {
    width: 100%;
    margin-left: 0;
}

    #affiliate_card_box { /* 카드 박스 */
        width: 415px;
    }

    .affiliate_card { /* 카드 */
        width: 250px;
    }
        #affiliate_card_box_info {
            margin-top: 2rem;
            width: 100%;
        }
        .affiliate_card.active { /* 활성화 카드 */
            border: none;
            box-shadow: 0 0px 0.51rem 0.25rem rgba(127, 127, 127, 0.3), 0 0px 1rem 0.5rem rgba(127, 127, 127, 0.3);
        }

        .info img.p_ver {
            display: none !important
        }

        .info img.m_ver {
            display: block !important;
            width: 70%;
            margin: 0 auto;
        }

        /* 섹션6 */
        #sect_06 {
            padding: var(--sec_pd) 0;
            }
            .myReview_pc,.swiper-pagination-pc { display: none !important; }
            .myReview_m,.swiper-pagination-m { display: flex !important;  }
}
@media(max-width: 900px) {
    /* 포인트 타이틀 */
    .tit_point::before {
        transform: scale(.5);
        width: 16px;
        height: auto;
        top: -30%;
        left: 0;
    }

    .tit_point, .tit_point ~ p, .tit_point ~ p + p {
        padding-left: 22px;
    }

    /* 섹션1 */
    #sect_01 .sect_tit .now_here {
        margin-top: 3rem;
    }
    /* 슬라이드 */
    #sect_01 .sect_01_cont .sect_01_slide_box {
        border: none;
        position: relative;
        border-radius: 0;
        overflow: visible;
    }
    /* 슬라이드 네비 */
    #sect_01 .sect_01_cont .navi_pack {
        width: 100%;
        border-right: none;
        padding: 0 !important;
        margin-bottom: 1.5rem;
    }

        #sect_01 .sect_01_cont .navi_pack .menu_navi {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: .5rem;
        }

            #sect_01 .sect_01_cont .navi_pack .menu_navi li {
                flex: 1 1 23%;
                max-width: 23%;
            }

            #sect_01 .sect_01_cont .navi_pack .menu_navi a {
                border: 1px solid var(--light_point);
                width: 100%;
                font-size: 1.75rem;
                display: inline-flex;
                justify-content: center;
                padding: 1rem;
                border-radius: var(--br_m);
            }

                #sect_01 .sect_01_cont .navi_pack .menu_navi a:hover {
                    color: var(--point);
                }

                #sect_01 .sect_01_cont .navi_pack .menu_navi a.active {
                    background-image: none;
                    font-size: 1.75rem;
                    box-shadow: none;
                    margin-bottom: 0;
                    color: var(--white);
                }

    #sect_01 .sect_01_cont .sect_01_slide { /* 슬라이드 */
        margin: 0 auto;
        transform: scale(.94);
        min-height: auto;
        transform-origin: center;
        border: 1px solid var(--light_point);
        padding: 2.5rem 1.5rem !important;
        width: 100% !important;
        border-radius: var(--br_l);
        position: relative;
    }

        #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper {
            grid-template-columns: repeat(2, 1fr); /* 모바일에서 2개 1줄 */
            gap: 0.75rem; /* 선택: 간격 살짝 줄임 */
        }

            #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card {
                max-width: 100%;
                justify-content: flex-end;
            }

    #sect_01 .sect_01_cont .navi_pack .scroll_navi {
        display: none;
    }

    #sect_01 .sect_01_cont .sect_01_slide .scroll_navi_m {
        width: 110%;
        left: -5%;
        right: 0;
        padding: 0 0.75rem;
    }

 #sect_01 .sect_01_cont .sect_01_slide .scroll_navi_m a {
            width: 30px;
            background-color: var(--white);
        }

    /* 섹션5 */
    .affiliate_card_slide {
        width: 100%;
        margin-left: 0;
    }

        #affiliate_card_box { /* 카드 박스 */
            width: 350px;
        }

        .affiliate_card { /* 카드 */
            width: 200px;
        }   
        
        .affiliate_arrow_up, .affiliate_arrow_down {
            width: 3.5rem;
            height: 3.5rem;
        }
        .affiliate_arrow_up.affiliate_btn {left: 8%; }
        .affiliate_arrow_down.affiliate_btn {right: 8%;} 


    
}

@media(max-width: 600px) {
     #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card img {
                width: 100px;
            }

        #sect_01 .sect_01_cont .sect_01_slide .sldie_wrapper .card .txt .prod_name {
            word-break: break-all;
            overflow-wrap: anywhere;
            white-space: normal;
			line-height: 1.2;
        }
    /* 섹션2 */
    #sect_02 .sect_02_cont .card {
        background-image: url(../images/sect_02/sect_02_card_bg_m.png);
        background-size: 100% 100%;
    }
    /*섹션4*/
    #sect_04 .wrap .sect_tit {
        margin-bottom: 2rem;
    }

    #sect_04 .wrap .sect_04_img {
        max-width: 100%;
    }
    /* 카드 디자인 */
    .marquee_item [class^="membership_card_"] .fs_25{
       font-size: 1.25rem !important;
    }w
     #sect_06 .wrap { padding-left: 3rem; padding-right: 3rem;}
   
}

@media screen and (max-width: 400px) {
    .fs_56 {
        font-size: 2rem;
    }
    
}

/* ========================================================================== */
/***** 가로모드 *****/
@media screen and (orientation: landscape) and (max-width: 900px) {
}