@charset "utf-8";

@font-face {
    font-family: 'JeongseonArirangHon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/JSArirangHON-RegularA1.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

:root{
    --arirang: 'JeongseonArirangHon';

    /* ===== FONT SIZE ===== */
    --fs-2xs: clamp(10px, 0.52vw, 12px);
    --fs-xs:  clamp(12px, 0.63vw, 14px);
    --fs-sm:  clamp(14px, 0.73vw, 16px);
    --fs-base:clamp(16px, 0.83vw, 18px);
    --fs-md:  clamp(18px, 0.94vw, 20px);
    --fs-lg:  clamp(20px, 1.04vw, 24px);
    --fs-xl:  clamp(24px, 1.25vw, 28px);
    --fs-xl2: clamp(28px, 1.46vw, 32px);
    --fs-2xl: clamp(30px, 1.67vw, 36px);
    --fs-3xl_2: clamp(32px, 1.80vw, 40px);
    --fs-3xl: clamp(34px, 1.88vw, 42px);
    --fs-4xl: clamp(42px, 2.50vw, 56px);
  
    --lh-tight: 1.2; --lh-normal: 1.45; --lh-loose: 1.7;
    --ls-tight: -0.015em; --ls-normal: 0em; --ls-wide: 0.02em;
  
    /* ===== SPACING / PADDING / MARGIN ===== */
    --sp-2xs: clamp(4px, 0.4vw, 8px);
    --sp-xs:  clamp(8px, 0.6vw, 12px);
    --sp-sm:  clamp(12px, 0.9vw, 16px);
    --sp-md_2:  clamp(16px, 1.3vw, 20px);
    --sp-md:  clamp(16px, 1.3vw, 24px);
    --sp-lg_2:  clamp(24px, 2vw, 32px);
    --sp-lg:  clamp(24px, 2vw, 40px);
    --sp-xl:  clamp(40px, 3vw, 64px);
    --sp-2xl: clamp(64px, 5vw, 100px);
    --sp-3xl: clamp(80px, 6vw, 120px);
    --sp-4xl: clamp(100px, 7.5vw, 144px); /* 🔹 최대 144px */
  
  }

*{word-break: keep-all;}


/* 메인 비주얼 ====================================================================== */

.main_visual_wrap {
    position: relative;
    width: 100%;
    height: 725px;
    background: url('/img/main_banner_bg.png') right center / cover no-repeat;
    overflow: hidden;
  }
  
  .main_visual_wrap::before {
    display: none;
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1); /* ✅ 어두운 오버레이 */
    z-index: 1;
  }
  
  .main_visual_wrap > * {
    position: relative;
    z-index: 2; /* 오버레이보다 위로 */
  }
  
.main_visual_wrap .main_visual_box{display: flex; gap: 36px; justify-content: flex-start; align-items: center; height: 100%;}

.main_visual_wrap .main_visual_box .txt_box{
    flex: 0 0 50%; display: flex; flex-direction: column;
}

.main_visual_wrap .main_visual_box .txt_box h2{
    color: #F3EAE3;
    font-family: var(--arirang);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 36.4px */
    letter-spacing: 0.28px;
    margin-bottom: 36px;
}
.main_visual_wrap .main_visual_box .txt_box p{
    color: #D5C7BC;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 23.4px */
    letter-spacing: 0.18px;
    padding-bottom: 20px;
}

@media(max-width:600px){
    .main_visual_wrap .main_visual_box .txt_box h2{font-size: 25px;}
    .main_visual_wrap .main_visual_box .txt_box p{font-size: 18px;}

}

@media(max-width:1280px){
    .main_visual_wrap::before{display: block;}
}

.main_visual_wrap .img_box img:nth-child(2){display: none;}

@media (max-width:1024px){
    .main_visual_wrap .img_box img:nth-child(1){
        display: none;
    }
    .main_visual_wrap .img_box img:nth-child(2){
        display: block; width: 100%;
    }
    .main_visual_wrap .main_visual_box {
        justify-content: center;
        flex-direction: column;
    }
  }

  
/* 운영 방식 ====================================================================== */

.hero_section_wrap {
    width: 100%;
    height: 1200px;
    background: url('/img/hero_bg.png') center center / cover no-repeat;
    display: flex; align-items: center; justify-content: center;
  }

  .hero_section_box{display: flex; flex-direction: column; gap: 72px; align-items: center; justify-content: center;}


  .hero_section_box .title{
    display: flex; align-items: flex-end; gap: 18px;
  }
  .hero_section_box .title img{
    width: 244px;
    height: 100px;
    aspect-ratio: 61/25;
  }

  .hero_section_box .title h2{
    color: #1E1E1E;
    text-align: center;
    font-family: var(--arirang);
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 54.6px */
    letter-spacing: 0.42px;
  }

  .hero_section_wrap .card_wrap{display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; align-items: flex-start;}
  .hero_section_wrap .card_wrap .card{ width: 13.02083%; aspect-ratio: 1/1; display: flex; flex:0 0 calc((100%/3) - 80px); flex-direction: column; align-items: center; justify-content: center;}
  .hero_section_wrap .card_wrap .card span{
    color: #8F2D20;
    font-family: Pretendard;
    font-size: var(--fs-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 31.2px */
    letter-spacing: 0.24px;
    padding-bottom: 9px;
  }

  .hero_section_wrap .card_wrap .card .card_img{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 9px;
    aspect-ratio: 1/1;
    border-radius: 200px;
    background: #8F2D20;
    margin-bottom: 18px;
    max-width: 200px;
  }

  .hero_section_wrap .card_wrap .card .card_img img{width: 60px;}

  .hero_section_wrap .card_wrap .card h3{
    color: #1E1E1E;
    font-family: var(--arirang);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 36.4px */
    letter-spacing: 0.28px;
  }
  .hero_section_wrap .card_wrap .card p{
    color: #1E1E1E;
    text-align: center;
    font-family: Pretendard;
    font-size: var(--fs-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.16px;
    margin-top: 10px;
  }

  .hero_section_wrap .card_wrap .card_line{
    width: 2px;
    height: 350px;
    opacity: 0.9;
    background: rgba(45, 30, 25, 0.10);
  }

  
  @media(max-width:1024px){
    .hero_section_wrap .card_wrap .card {
        width: 13.02083%;
        aspect-ratio: 1 / 1;
        flex: 0 0 calc((100% / 2) - 40px);
        flex-direction: column;
    }

    .hero_section_wrap .card_wrap .card_line{display: none;}

    .hero_section_wrap{
        height: auto; padding: 120px 0;
    }

    .hero_section_box .title {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-direction: column;
  }
}

/* 중간 배너 =============================================== */

.mid_banner_wrap{
    width: 100%;
    aspect-ratio: 1920/1080;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: url('/img/mid_banner_bg.png') center/cover no-repeat;
}

.mid_banner_wrap .mid_banner_box{
    width: 100%; background-color: rgba(45, 30, 25, 0.5); height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;}

.mid_banner_wrap .mid_banner_box .img_box{
    width: 12.86%;
    aspect-ratio: 247/100;
    max-width: 247px;
    flex-shrink: 0;
}

.mid_banner_wrap .mid_banner_box .img_box{
    width: 100%;
    object-fit: cover;
}

.mid_banner_wrap .mid_banner_box h2{
    color: #FFF;
    text-align: center;
    font-family: var(--arirang);
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 54.6px */
    letter-spacing: 0.42px;
    padding: 36px 0;
}
.mid_banner_wrap .mid_banner_box p{
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 23.4px */
    letter-spacing: 0.18px;
    padding-bottom: 18px;
}

@media(max-width:600px){
    .mid_banner_wrap .mid_banner_box h2{font-size: 32px;}
}

/* 가맹점 =============================================== */
.franchise_section_wrap{
    width: 100%;
    height: 2134px;
    background:url('/img/franchise_bg.png') top center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.franchise_section_wrap .franchise_section_box{
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    gap: 72px;
}

.franchise_section_wrap .franchise_section_box .title{display: flex; gap: 18px; align-items: flex-end;}

.franchise_section_wrap .franchise_section_box .title img{
    width: 244px;
    height: 100px;
    aspect-ratio: 61/25;
}
.franchise_section_wrap .franchise_section_box .title h2{
    color: #1E1E1E;
    text-align: center;
    font-family: var(--arirang);
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 80.6px */
    letter-spacing: 0.62px;
}

.franchise_section_wrap .franchise_section_box .title h2 span{
    color: #8F2D20;
    text-align: center;
    font-family: var(--arirang);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 36.4px */
    letter-spacing: 0.28px;
}

.franchise_section_wrap .franchise_section_box .card_wrap{
    display: flex; flex-direction: column; gap: 36px;
}

.franchise_section_wrap .franchise_section_box .card_wrap .card_box{
   display: flex; gap: 36px; align-items: center;
}

.franchise_section_wrap .franchise_section_box .card_wrap .card_box .card_img{
    flex:1 1 calc((66.6%) - 36px); display: flex; gap: 36px;
}

.franchise_section_wrap .franchise_section_box .card_wrap .card_box .card_img>div{
   width: 100%;
}

.franchise_section_wrap .franchise_section_box .card_wrap .card_box .card_img>div img{
    width: 100%; object-fit: cover;
}

.franchise_section_wrap .franchise_section_box .card_wrap .card_box .card_txt{
    flex:1 1 calc((33.3%) - 36px);
}

.franchise_section_wrap .franchise_section_box .card_wrap .card_box .card h2{
    color: #1E1E1E;
    font-family: var(--arirang);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 31.2px */
    letter-spacing: 0.24px;
}
.franchise_section_wrap .franchise_section_box .card_wrap .card_box .card p{
    color: #8F2D20;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 23.4px */
    letter-spacing: 0.18px;
    padding-top: 9px;
}

@media(max-width:1024px){
    .franchise_section_wrap{height: auto; padding: 40px 0;}

    .franchise_section_box .title {
        align-items: center !important;
        flex-direction: column;
        justify-content: flex-start;
    }

    .franchise_section_wrap .franchise_section_box .card_wrap .card_box{flex-direction: column;}
    .franchise_section_wrap .franchise_section_box .card_wrap .card_box .card_txt {
        display: flex;
        gap: 10px;
        align-items: flex-end;
    }

    .franchise_section_wrap .franchise_section_box .card_wrap .card_box {
        gap: 12px;
    }

    .franchise_section_wrap .franchise_section_box .card_wrap .card_box .card_img{gap: 12px;}
    .franchise_section_wrap .franchise_section_box .title h2{font-size: 32px;}

}


/* ======================menu_swiper=============================== */
.meun_swiper {width:100%;height:845px;background:url('/img/menu_swiper_bg.png') top center/cover no-repeat;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:72px;
overflow: hidden;}
    
    .meun_swiper .top {display:flex;justify-content:space-between;align-items:flex-end;width:100%;}
    .meun_swiper .logo {display:flex;align-items:flex-end;gap:18px;}
    .meun_swiper .logo img {width:244px;height:100px;}
    .meun_swiper .logo h2 {
        color: #FFF;
        text-align: center;
        font-family: var(--arirang);
        font-size: 62px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 80.6px */
        letter-spacing: 0.62px;
    }
    
    .meun_swiper .arrow {display:flex;gap:18px;align-items:flex-end;}
    .meun_swiper .arrow > div {width:45px;height:45px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid rgba(234,228,220,0.2);background:rgba(234,228,220,0.2);cursor:pointer;transition:0.3s;}
    .meun_swiper .arrow > div:hover {border-color:#fff;}
    
    .meun_swiper .card_wrap {width:100%;}
    .meun_swiper .swiper-slide {display:flex;flex-direction:column;align-items:center;gap:18px;}
    .meun_swiper .img_box{max-width: 344px; height: auto;}
    .meun_swiper .img_box img {width:100%; height: 100%; object-fit: cover;}
    .meun_swiper .txt {display:flex;flex-direction:column;gap:9px;}
    .meun_swiper .txt h3 {
        color: #FFF;
        font-family: var(--arirang);
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 36.4px */
        letter-spacing: 0.28px;

        text-align: center;
    }
    .meun_swiper .txt p {color:#FFF;font-size:16px;line-height:130%;text-align:center;}
    
    .meun_swiper .swiper-slide {
        transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .meun_swiper .swiper-slide-active {
        transform: scale(1.05);
        opacity: 1;
    }
    .meun_swiper .swiper-slide-next,
    .meun_swiper .swiper-slide-prev {
        opacity: 0.8;
    }
    
@media(max-width:1024px){
    .meun_swiper .logo,.meun_swiper .top{flex-direction: column; align-items: center; gap: 20px;}
    .swiper{
        max-width: 93.75%;
        overflow: visible;
    }
}

@media(max-width:768px){
    .meun_swiper .txt{align-items: center;}
    .meun_swiper .txt p{width: 80%;}
}

    /* =======================전국 가맹점====================== */

    .store_section_wrap {
        width: 100%;
        height: auto;
        min-height: 927px;
        background: url(/img/hero_bg.png) center center / cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 144px 0;
    }

    .store_section_wrap .store_section_box{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 72px;
    }

    .store_section_wrap .store_section_box .title{
        display: flex; gap: 18px; align-items: flex-end;
    }

    .store_section_wrap .store_section_box .title p{
        color: #1E1E1E;
        text-align: center;
        font-family: var(--arirang);
        font-size: 42px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 54.6px */
        letter-spacing: 0.42px;
    }

    .store_section_wrap .store_section_box .card_wrap{
        display: flex;
        flex-wrap: wrap;
        gap: 36px;
    }

    .store_section_wrap .card_wrap .card {
        flex: 0 1 calc((100% - 74px) / 3); /* gap이 36px * (3-1) = 72px */
    }

    .store_section_wrap  .card_wrap .card .txt_box{
        display: flex;
        padding: 18px 36px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        align-self: stretch;
        border-radius: 3px;
        background: rgba(246, 242, 236, 0.60);
        backdrop-filter: blur(5px);
    }

    .store_section_wrap .card_wrap .card .txt_box h2{
        color: #1E1E1E;
        font-family:var(--arirang);
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%; /* 31.2px */
        letter-spacing: 0.24px;
    }
    
    .store_section_wrap .card_wrap .card .txt_box p{
        color: #1E1E1E;
        font-family: Pretendard;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 130%; /* 23.4px */
        letter-spacing: 0.18px;
        text-align: center;
    }


    .store_section_wrap  .card_wrap .card .txt_box .card_line{
        height: 1px;
        align-self: stretch;
        background: rgba(45, 30, 25, 0.10);
    }

    .store_section_wrap  .card_wrap .card img{
        width: 100%;
        object-fit: cover;
    }

    .store_section_wrap .card_wrap .card .txt_box .btn_box{
        width: 100%;
        
    }

    .store_section_wrap  .card_wrap .card .txt_box .btn_box button{
        display: flex;
        width: 100%;
        height: 50px;
        justify-content: center;
        align-items: center;
        gap: 9px;
        align-self: stretch;
        border-radius: 4px;
        background: #8F2D20;
        color: #FFF;
        font-family: Pretendard;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%; /* 23.4px */
        letter-spacing: 0.18px;
        border: none;
    }

    @media(max-width:1024px){
        .store_section_wrap .card_wrap .card {
            flex: 0 1 calc((100% - 40px) / 2); /* gap이 36px * (3-1) = 72px */
        }
    }


    /* 가맹점 창업 절차 */

    .franchise_process_wrap {
        width:100%;
        aspect-ratio: 1920/1013;
    }

    .franchise_process_wrap img{
        width:100%; height: 100%; object-fit: cover;
    }

    .process_m{display: none;}
    
    @media(max-width:1024px){
        .franchise_process_wrap {
            aspect-ratio: 1024/1889;
        }

        .process_pc{display: none;}
        .process_m{display: block;}

    }


        /* 전국 가맹점 현황 */

        .franchise_support_wrap {
            width:100%;
            aspect-ratio: 1920/1158;
        }
    
        .franchise_support_wrap img{
            width:100%; height: 100%; object-fit: cover;
        }
    
        .support_m{display: none;}
        
        @media(max-width:1024px){
            .franchise_support_wrap {
                aspect-ratio: 1024/1398;
            }
    
            .support_pc{display: none;}
            .support_m{display: block;}
            .review_swiper .swiper{ max-width: 100%;}
        }
    

/* 중간 배너 =============================================== */

.review_swiper{
    width: 100%;
    height: 797px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: url('/img/hero_bg.png') center center / cover no-repeat;
    flex-direction: column;
    gap: 72px;
    overflow: hidden;
}

.review_swiper .swiper {
    width: 100%; display: flex; flex-direction: column; 
  }

  .review_swiper .top .logo h2{
    color: #1E1E1E;
    text-align: center;
    font-family: 'JeongseonArirangHon';
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 80.6px */
    letter-spacing: 0.62px;
  }
  
  .review_swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
  }

  .review_swiper .card_wrap{
    background: linear-gradient(to top, #8F2D20 60%, transparent 60%);
}
  

  .review_swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: -20px;
  }

  @media(max-width:768px){
    .review_swiper{
        height: auto;
        padding: 60px 0;
    }
  }


/* 메뉴소개 캐러풀 */

.meun_swiper_c {
    width:100%;height:845px;background:url('/img/menu_swiper_bg.png') top center/cover no-repeat;
overflow: hidden;}

.meun_swiper_c .title_box{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
}

.meun_swiper_c .title_box h2{
    text-align: center;
    color: #FFF;
    text-align: center;
    font-family: var(--arirang);
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 80.6px */
    letter-spacing: 0.62px;
    margin-top: 144px;
}

  .meun_swiper_c .container{ 
 height:390px;
  position:relative;
    margin-top: 72px;
}
  
 .meun_swiper_c  .track{display:flex; align-items:flex-start;
    position: absolute;
    top:0;
    left:0;
    height:100%;
  }
  
  .meun_swiper_c .item{
  width:323px;
  aspect-ratio: 323/369;
  text-align:center;
  margin-right: 56px;
  }

  @media(max-width:768px){
    .meun_swiper_c .item{
        width: 250px;   margin-right: 28px;}
  }

  .meun_swiper_c .item .img_box{
    max-width: 323px;
    aspect-ratio: 323/243;
  }

  .meun_swiper_c .item .img_box img{width: 100%; object-fit: cover;}


  .meun_swiper_c .item .txt h3{
    color: #FFF;
    font-family: var(--arirang);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 36.4px */
    letter-spacing: 0.28px;
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .meun_swiper_c .item .txt p{
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.16px;
  }


  /* 리뷰 캐러풀 */
  .review_swiper_c{
    width: 100%;
    height: 755px;
    background: url('/img/hero_bg.png') center center / cover no-repeat;
    overflow: hidden;
}


 .review_swiper_c .container{ 
    height:755px;
  position:relative;
  margin-top: 80px;
  background: linear-gradient(to top, #8F2D20 80%, transparent 20%);
  }
  
 .review_swiper_c .track{display:flex; align-items:flex-start;
    position: absolute;
    top:0;
    left:0;
  }
  
 .review_swiper_c .item{
  width:323px;
  aspect-ratio: 323/485;
  text-align:center;
  margin-right: 36px;
  }

  .review_swiper_c .item img{
    width: 100%;
    object-fit: cover;
    }

  @media(max-width:768px){
    .review_swiper_c .item{
        width: 250px;
    }


    .review_swiper_c .container{height: 655px; }

        .review_swiper_c{height: 655px;}
  }

  .review_swiper_c .title_box{
    margin-top: 144px;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
  }

  .review_swiper_c .title_box h2{
    text-align: center;
    color: #1E1E1E;
    text-align: center;
    font-family: var(--arirang);
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 80.6px */
    letter-spacing: 0.62px;
  }

  
@media(max-width:600px)
{ .jj{display: none;}
  

}

@media(max-width:768px)
{ 
  
.hero_section_wrap .card_wrap .card p,.meun_swiper_c .item .txt p{font-size: 18px;}

}


@media(max-width:570px)
{
    .mid_banner_wrap .mid_banner_box {
        background-color: rgba(45, 30, 25, 0.5);
        height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .mid_banner_wrap .mid_banner_box h2{padding-top: 15px; padding-bottom: 5px;}

    .mid_banner_wrap .mid_banner_box p{padding: 0 2vw; font-size: 16px;}
}