@charset "utf-8"; /* CSS Document */
/* [id^="circlesect] {
    padding: calc(var(--sec_pd) / 1.25) 0;
} */
 [id^="sect_0"], section {
    padding: calc(var(--sec_pd) / 1.25) 0;
}

 .half {
    max-width: 49%;
    width: 100%;
}

.sect_tit {
    line-height: 1.23;
}

.card_h{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.3;
}
.txt_bg {
    background: url("../images/txt_bg.jpg") repeat-x center 92%;
}
.txt_bar {
    position: relative; 
    display: inline-block;
}
.txt_dot{
    background-image: url("../images/dot.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size:4px;
    padding-left: 5px;
    
}


.txt_bar::before, .txt_bar::after{
    content: "";
    position: absolute;
    top: 50%;
    width: 80px;
    height: 2px;
    background: var(--gray_6);
    transform: translateY(-50%);
}
.txt_bar::before {
    right: calc(100% + 1.5rem);
}

.txt_bar::after {
    left: calc(100% + 1.5rem);
}
/* 스마트330 */
#smart330{
    background-image: url("../images/smart330/smart330_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
    #smart330 .sect_cont .card_h{
        width: 100%;
        max-width: 500px;
        background: linear-gradient(to bottom, #cfe0ff, #ffffff 72%);
    }
    #smart330 .step{
        
        max-width: 1000px;
        margin: var(--sec_pd) auto 0;
    }
    #smart330 .step .card_h{ width: 100%; flex:1 1 15%;}
    #smart330 .step .card_h .fs_25.bold{line-height: 2;}

/* 스마트케어 */
#smartcare .sect_cont .image_box_control a{ 
		padding: .5rem 2rem;
		background-color: var(--white);
		color: var(--point);
		text-decoration: none;
	}

	#smartcare .sect_cont .image_box_control a.active{
		background-color: var(--point);
		color: var(--white);
	}

	#smartcare .sect_cont .image_box_control a:hover{
		background-color: var(--dark_point);
		color: var(--white);
	}

	#smartcare .sect_cont .image_box {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	#smartcare .sect_cont .image_box .image_box_track {
		display: flex;
		width: 100%;
		transition: transform 0.45s ease;
		will-change: transform;
	}

	#smartcare .sect_cont .image_box .image_box_item {
		flex: 0 0 100%;
		width: 100%;
	}

/* 이래서 */
#circlesect .circle {
    background-color: #f0f0f066;
    border: 1px solid var(--point);
    border-radius: 9999px;
    transition: all var(--transition);
    aspect-ratio: 1 / 1;
    width: 280px;
    margin: -1rem;
    line-height: 1.1;
}

    #circlesect .circle .divider {
        display: block;
        content: "";
        width: 1.25rem;
        height: 2px;
        background-color: var(--gray_6);
        margin: 1rem auto;
    }

    #circlesect .circle p:not(.divider) {
        display: flex;
        flex-direction: column;
        min-height: 30%;
    }

    #circlesect .circle p:first-child {
        justify-content: flex-end
    }
/* 왜 */
    #whysect .sect_cont{
        max-width: 1000px;
        margin: 0 auto;
    }
    #whysect .sect_cont .card_h{
        gap: 2rem;
        width: 24%;
        min-width: 300px;
        min-height: 340px;
        justify-content: space-between;
        border-radius: var(--br_l);
        transition: all var(--transition);
    }

    #whysect .sect_cont .card_h p.fc_gray_6{
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        gap: 3px;
    }
/* 업데이트 */
 #upsect{
    padding-top: 0;
    padding-bottom: 0;
    background-image: url("../images/up_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
 }   
  #upsect .sect_tit{margin: 6rem 0 0; flex-shrink: 1;}
  #upsect .sect_cont {width: 25%; }

/* 라이프 */
#lifesect .sect_cont{
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
#lifesect .sect_cont .card{
    flex: 1 1 23%;
    border-radius: var(--br_s);
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 1.25rem;
    display: flex;
    align-items: end;
    aspect-ratio: 3 / 2.14;
    
}
#lifesect .sect_cont .card p{position: relative;}
#lifesect .sect_cont .card p::before{
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    position: absolute;
    top:-15px;
    background-color: rgba(255, 255, 255, 0.215);
}
#lifesect .sect_cont .card:nth-child(1){ background-image: url(../images/life/life_01.png);}
#lifesect .sect_cont .card:nth-child(2){ background-image: url(../images/life/life_02.png);}
#lifesect .sect_cont .card:nth-child(3){ background-image: url(../images/life/life_03.png);}
#lifesect .sect_cont .card:nth-child(4){ background-image: url(../images/life/life_04.png);}
#lifesect .sect_cont .card:nth-child(5){ background-image: url(../images/life/life_05.png);}
#lifesect .sect_cont .card:nth-child(6){ background-image: url(../images/life/life_06.png);}
#lifesect .sect_cont .card:nth-child(7){ background-image: url(../images/life/life_07.png);}
#lifesect .sect_cont .card:nth-child(8){ background-image: url(../images/life/life_08.png);}

/* 멤버십섹션 */
/*카드슬라이드*/
#onlysect .membership_slide {
    width: 100%;
    height: 100%;
}

    #onlysect .membership_slide .swiper {
        width: 180%;
        height: 100%;
        margin-left: calc( -40% + 10px);
    }

        #onlysect .membership_slide .swiper .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #onlysect .membership_slide .swiper .swiper-slide [class^= "membership_card_0"] {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: var(--br_l);
                overflow: hidden;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 550px;
                aspect-ratio: 5.5 / 3;
                position: relative;
                isolation: isolate;
            }

                #onlysect .membership_slide .swiper .swiper-slide [class^="membership_card_0"]::after {
                    content: '';
                    position: absolute;
                    background: var(--black);
                    z-index: -1;
                    inset: 0;
                    opacity: 0.48;
                }

#onlysect .membership_card_01 {
    background-image: url("../images/membership_01.png")
}

#onlysect .membership_card_02 {
    background-image: url("../images/membership_06.png")
}

#onlysect .membership_card_03 {
    background-image: url("../images/membership_03.png")
}

#onlysect .membership_card_04 {
    background-image: url("../images/membership_05.png")
}


/* 제휴카드섹션 */
.affiliate_card_slide {
	width: 100%;
    position: relative;
}

#affiliate_card_box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* overflow: hidden; */
    width:50%;
	aspect-ratio: 4.8 / 5;
}

.affiliate_card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 100%;
    max-width: 465px;
    aspect-ratio: 5 / 3.15;
    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);
    /*border: var(--op_white);*/
}

    .affiliate_card::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        pointer-events: none;
        z-index: 1;
    }

    .affiliate_card.active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        z-index: 5;
        box-shadow: 0 4px 9px rgba(0,0,0,0.55);
    }

    .affiliate_card.prev { /*calc(-50% - 40%) 원래 음수로 세팅해서 위에 올리지만 카드가 두개만 남아서 아래로 보냄 */
        transform: translate(-50%, calc(-50% - 40%)) scale(0.8);
        opacity: 0.7;
        z-index: 2;
    }

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

    .affiliate_card.prev::after {
        top: 0;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%);
    }

    .affiliate_card.next::after {
        bottom: 0;
        top: auto;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%);
    }

    .affiliate_card.active::after {
        display: none; /* 활성화된 카드의 그라디언트 제거 */
    }

.affiliate_arrow_up, .affiliate_arrow_down {
    position: absolute;
    display: flex;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    height: 6rem;
    z-index: 4;
}

.affiliate_arrow_up {
    top: 0rem;
    align-items: flex-end;
}

.affiliate_arrow_down {
    bottom: 0rem;
    align-items: flex-start;
}

    .affiliate_arrow_up img, .affiliate_arrow_down img {
        width: 2rem;
        height: 2rem;
        margin: 1rem auto;
        border-radius: 50%;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
        transition: box-shadow 0.3s ease;
    }

        .affiliate_arrow_up img:hover, .affiliate_arrow_down img:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
        }

#affiliate_card_box_info {
    width: 45%;
    margin-left: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#affiliate_card_box_info img{width: 100%;}

.info {
    display: none;
    transition: opacity 0.5s;
}
.info img{ filter: drop-shadow(0 0.25rem 0.5rem #00000033)}
    .info.active {
        display: block;
    }
/* 카드혜택 */
#cardsect{
    padding-top: 0;
    position: relative;
}
#cardsect .sect_cont{max-width: 409px;}
.tail_left{
    position: relative;
    background-color: var(--white);
    border-width: 2px;
}
.tail_left::before{
    content: '';
    background-image:linear-gradient(to left, var(--point), #ffffff00 95%); 
    width: 300px;
    height: 4px;
    position: absolute;
    left: -100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.tail_right{
    position: relative;
    background-image:  url(../images/card/Union.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 7.25 / 1;
    height: 52px;
}
.img_tail_right{
   position: relative!important;
}
.tail_right::before, .img_tail_right::before{
    content: '';
    background-image:linear-gradient(to right, var(--point), #ffffff00 95%); 
    width: 400px;
    height: 4px;
    position: absolute;
    left: 370px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
/* 질문섹션 */
#qnasect .sect_tit{ margin: 0; margin-bottom: -3rem;}
#qnasect .QA_icon{ transform: translateY(-80%);}
#qnasect .sect_cont.column_md > div{ width: 46%;}
    #qnasect .qna_card{
        display: flex;
        flex-direction: column;
        align-items: flex-start!important;
        padding: calc(var(--base-px) * 6) calc(var(--base-px) * 9) calc(var(--base-px) * 6) 0;
        border-bottom: 2px solid #e1e1e1;
        line-height: 1.3;
    }
/* 후기섹션 */
#reviewsect {
    padding: var(--sec_pd) 0;
}

    #reviewsect .review_wrap {
        position: relative;
        overflow: hidden;
    }

    #reviewsect .swiper {
        width: 570px;
        aspect-ratio: 5 / 5.5;
    }

        #reviewsect .swiper .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
        }

            #reviewsect .swiper .swiper-slide .review_card {
                width: 100%;
                max-width: 550px;
                display: flex;
                flex-direction: column;
                padding: 1.5rem 4rem;
                gap: 0.75rem;
                border-radius: 30px;
                background-color: var(--bg_gray_f5);
                text-align: left;
                box-shadow: 0 4px 7px rgba(0,0,0,0.25);
            }

                #reviewsect .swiper .swiper-slide .review_card img {
                    display: block;
                    width: 45px;
                    height: 100%;
                    object-fit: cover;
                    aspect-ratio: 1 / 1;
                }


    #reviewsect #gradient_overlay_top {
        position: absolute;
        top: -15px;
        left: 0;
        width: 100%;
        height: 6rem;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0));
        z-index: 2;
        pointer-events: none;
    }

    #reviewsect #gradient_overlay_bottom {
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: 6rem;
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0));
        z-index: 2;
        pointer-events: none;
    }

/* ==================== 해상도 1280px 이상 ==================== */
@media screen and (min-width: 1281px) {
    
    #reviewsect .half {
        width: 100%;
    }


    #reviewsect .review_wrap {
        margin: 0 auto;
    }
    .info img.p_ver{display: none!important}	
	.info img.m_ver{display: block!important; width: 80%; margin: 0 auto;}
    
}
/* ==================== 모바일 레이아웃 ==================== */
@media(max-width: 1280px) {
  
   /* 멤버십섹션 */
    #onlysect .membership_slide .swiper .swiper-slide [class^= "membership_card_0"] {
        width: 500px;
        aspect-ratio: 5 / 3;
    }
}

@media(max-width: 900px) {
.half {
    max-width: 100%;
}

.sect_tit {margin-bottom: 3rem;}
.sect_tit .fs_50 {font-size: 2.15em;}
.sect_tit .fs_25 {font-size: 1.5em;}
/* 스마트330 */
    #smart330 .sect_cont{gap:10px;}
    #smart330 .sect_cont .card_h{
        flex-direction: row;
            max-width: 100%;
        }
    /* #smart330 .step .card_h .fs_25.bold{font-size: 2rem;} */
    #smart330 .step .card_h hr{width: 16%; }
    #smart330 .step img{ transform: rotate(90deg);}
    /* 이래서 */
    #circlesect .circle {
        width: 250px;
    }
    /* 왜 */
    #whysect .sect_cont .card_h{
        width: 100%;
        min-height: unset;
        justify-content: center;
        border-radius: var(--br_m);
        padding: 1.25rem!important;
    }

    #whysect .sect_cont .card_h p.fc_gray_6{
        flex-direction: row; 
        font-size: 1.15rem;
    }
    #whysect .sect_cont .card_h p.fc_gray_6 .fs_40{font-size: 1.5rem}
    /* 업데이트*/
    #upsect{
        padding-top: 0;
        padding-bottom: 0;
        background-image: url("../images/up_bg.png");
        background-repeat: no-repeat;
        background-position: left -60px center;
        background-size: scale-down;
        overflow: hidden;
    }   
        #upsect .sect_tit{margin: 4rem 0 0; }
        #upsect .sect_tit .fs_50{font-size: 2rem;}
        #upsect .sect_tit .fs_32{font-size: 1.5rem;}
        #upsect .sect_cont {width: 30%; }
        #upsect .sect_cont .up_obj{transform: scale(1.2); transform-origin: right;}

    /* 라이프 */
    #lifesect .sect_cont{
        gap: 1rem;
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35));
    }
    #lifesect .sect_cont .card{
        flex: 1 1 48%;
    }
    #lifesect .sect_cont .card p::before{
        width: 24px;
        top:-10px;
    }
    /* 멤버십섹션 */
    #onlysect .membership_slide .swiper .swiper-slide [class^= "membership_card_0"] {
        width: 380px;
        aspect-ratio: 5 / 3;
    }
    /* 제휴카드섹션 */
    #affiliate_card_box{
        width: 40%;
    }
    .affiliate_arrow_up {
        top: -5rem;
    }

    .affiliate_arrow_down {
        bottom: -5rem;
    }
    /* 카드혜택 */
    #cardsect{
        padding-top: 0;
        position: relative;
    }
    #cardsect .sect_cont{max-width: 100%;}
    .tail_left{
        padding-left: 4rem;
        padding-right: 4rem;
        border-width: 1.75px;
    }
    .tail_left::before{
        height: 2px;
        
    }
    .tail_right{
      height: auto;
    }
    
    .img_tail_right{
    position: relative!important;
    }
    .tail_right::before, .img_tail_right::before{
        width: 250px;
        height: 2px;
        left:200px;
    }
    .card_pack{ width: 75%;}
    #cardsect .bottom{text-align: right; margin-top: 3rem;}
    
    /* 질문섹션 */
    #qnasect .wrap .sect_tit{ margin-bottom: 0;}
    #qnasect .wrap .sect_tit .QA_icon{ width: 40px;}
    #qnasect .sect_cont.column_md {flex-direction: column-reverse;}
    #qnasect .sect_cont.column_md > div{ width: 100%; }
    #qnasect .qna_card{    
        padding: calc(var(--base-px) * 8) calc(var(--base-px) * 6) calc(var(--base-px) * 8) 0;
    }
    /* 후기섹션 */
#reviewsect .sect_tit{
    text-align: center;
}

    #reviewsect .swiper {
    width: 500px;
    aspect-ratio: 1 / 1;
    }

        #reviewsect .swiper .swiper-slide .review_card {
            max-width: 450px;
            gap: 0.45rem;

    }
}

@media(max-width: 600px) {
    /* 이래서 */
    #circlesect .circle {
        width: 200px;
    }
    /* 업데이트*/
    #upsect .sect_tit .fs_50{font-size: 1.5rem;}
    #upsect .sect_tit .fs_32{font-size: 1.15rem;}

    /* 멤버십섹션 */
    #onlysect .membership_slide .swiper {
        width: 150%;
        height: 100%;
        margin-left: -23.5%;
    }

        #onlysect .membership_slide .swiper .swiper-slide [class^= "membership_card_0"] {
            width: 230px;
            aspect-ratio: 5 / 3;
        }
     /* 후기섹션 */
     #reviewsect .swiper {
        width: 340px;
        aspect-ratio: 3 / 4;
    }

        #reviewsect .swiper .swiper-slide .review_card {
            max-width: 320px;
            gap: 0.45rem;
        }

        
    /* 카드혜택 */
    .tail_right{
      height: 32px;
    }
}