/* 메인 */
/* 메인 - 베너 이미지 */
/* .hero-image { display: flex; justify-content: center; align-items: center; height: calc(100vh - 100px); overflow: hidden;} 
.hero-image img { height: 100%; width: auto !important; transition: all 0.3s ease; } */
.hero-image { height: calc(100vh - 100px); overflow: hidden; }
.hero-image .swiper,
.hero-image .swiper .swiper-wrapper,
.hero-image .swiper .swiper-wrapper .swiper-slide { height: 100%; }
.hero-image .swiper-wrapper { height: 100%; }
.hero-image .swiper-slide { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  overflow: hidden; }
.hero-image .swiper-slide img {   height: 100%; width: auto !important; object-fit: cover; object-position: center; transition: all 0.3s ease; }

/* 메인 앱/스토어 버튼 */
main .button-container { width: 100%; display: flex; }
main .button-container .btn { display: flex; flex-direction: column; justify-content: space-between; color: var(--text-accent1 ); background: var(--bg-accent1);  width: 50%; display: inline-block; overflow: hidden; position: relative; }
main .button-container .btn:hover { color: var(--text-reverse); background: var(--bg-accent2); }
main .button-container .btn.btn-app-download { border-right: 2px solid #FCD7E4; border-bottom: none; }
main .button-container .btn .text { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; padding: var(--Spacing-XXL)  var(--Spacing-XXL) 0  var(--Spacing-XXL); }
main .button-container .btn .text b { text-align: center; font-family: "EB Garamond"; font-size: 80px; font-style: italic; font-weight: 800; line-height: 100%; }
main .button-container .btn .text p { text-align: center;  font-size: var(--Font-Size-Body_Short); font-style: normal; font-weight: 500; line-height: 140%;  }
main .button-container .btn img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; transform-origin: center center; }
main .button-container .btn:hover img { transform: scale(1.2); }

/* 메인 - 메뉴 리스트 */
main .main-menu { background-color: var(--bg-pure); }
main .main-menu .top { margin-top: 160px; display: flex; flex-direction: column; align-items: center; gap: var(--Spacing-M); }
main .main-menu .top h1 {  color: var(--text-accent1); text-align: center; font-family: "EB Garamond"; font-size: var(--Font-Size-Display); font-weight: 800; line-height: 100%; }
main .main-menu .top a { display: inline-flex; align-items: center; justify-content: center;  padding: var(--Spacing-XS) var(--Spacing-M); font-size: var(--Font-Size-Title); font-weight: 500; border: 1px solid var(--btn-pressed); background: var(--bg-pure); color: var(--btn-pressed);  transition: all 0.4s ease; cursor: pointer; z-index: 10; }
main .main-menu .top a:hover { background: var(--btn-pressed); color: #fff; }

main .main-menu .tab { position: absolute; z-index: 11; }
main .main-menu .tab li { margin-bottom: 16px; }
main .main-menu .tab li a { display: flex; color: var(--btn-pressed); font-size: var(--Font-Size-Title); font-weight: 500; }
main .main-menu .tab li a span { border-bottom: 1px solid var(--btn-pressed); }
main .main-menu .tab li a p { display: none; font-weight: 500; }
main .main-menu .tab li.on a p { display: block; }
main .main-menu .tab li a > span, main .main-menu .tab li a > p { padding: var(--Spacing-XS) 0 var(--Spacing-XS) 24px ; }

main .main-menu .swiper { padding-top: 250px; }
main .main-menu .swiper-slide a { display: flex; flex-direction: column; align-items: center; }
main .main-menu .swiper-slide a p { color: var(--main-003); text-align: center; font-size: var(--Font-Size-Body_Short); font-weight: 500; }
main .main-menu .swiper-slide img { display: block; width: 345px; transition: transform .3s ease;  transform-origin: bottom center;}
main .main-menu .swiper-slide-active img { transform: scale(1.5); }
main .main-menu .swiper .arrow-wrap {padding: var(--Spacing-M) 0; display: flex; justify-content: center;}
main .main-menu .swiper .arrow-wrap span { display: block; width: 24px; height: 24px; padding: var(--Spacing-XS); background: url(../img/icon/line-md_arrow-left.svg) center no-repeat; border-radius: var(--Radius-full); background-color: var(--gray-002); }
main .main-menu .swiper .arrow-wrap span.arrow-prev { margin-right: var(--Spacing-M); }
main .main-menu .swiper .arrow-wrap span.arrow-next { transform: rotate(180deg); }

/* 메인 - sns 뉴스 */
main .sns-news { display: flex; flex-direction: column; align-items: center; padding: 120px 0; gap: var(--Spacing-XL); background: var(--bg-accent1); }
main .sns-news h1 { transition: all 0.6s ease-out; display: flex; align-items: center; justify-content: center; gap: var(--Spacing-S); color: var(--text-accent1); font-size: var(--Font-Size-Headline); font-style: normal; font-weight: 700; line-height: 140%; }
main .sns-news h1 .icon { display: block; width: 73px; height: 73px; background-image: url(../img/BI/lets-icons_insta.svg); }
main .sns-news .swiper { transition: all 0.9s ease-out; width: 100%; max-width: 1500px; padding: 0 100px; box-sizing: border-box; }
main .sns-news .swiper .swiper-wrapper .swiper-slide { aspect-ratio: 3/4; }
main .sns-news .swiper .swiper-wrapper .swiper-slide a img {  border-radius: var(--Radius-M); }
main .sns-news h1, main .sns-news .swiper { opacity: 0; transform: translateY(50px); }
main .sns-news h1.active, main .sns-news .swiper.active { opacity: 1; transform: translateY(0); }

/* 메인 - media */
@media (max-width: 1199px) { 
    /* 메인 - 베너 이미지 */
    .hero-image { height: 250px; }
    .hero-image img { object-fit: cover; }

    /* 메인 - 앱/스토어 버튼 */
    main .button-container { flex-direction: column; }
    main .button-container .btn { box-sizing: border-box; width: 100%; } 
    main .button-container .btn .text b { font-size: 48px; }
    main .button-container .btn.btn-app-download { border-right:none; border-bottom: 2px solid #FCD7E4; }

    /* 메인 - 메뉴 리스트 */
    main .main-menu .top { margin-top: 60px  ; margin-bottom: var(--Spacing-M); }
    main .main-menu .top a { display: none  ; }

    main .main-menu .tab { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--Spacing-M); padding: var(--Spacing-S) 0; }
    main .main-menu .swiper { padding-top: 20px; }
    main .main-menu .tab li a span { display: none; }
    main .main-menu .tab li a p { display: block; }
    main .main-menu .tab li.on a p { border-top: 2px solid var(--btn-pressed); font-weight: 700; padding: calc( var(--Spacing-XS) - 2px ) 0 var(--Spacing-XS) !important; }
    main .main-menu .tab li a > p { padding: var(--Spacing-XS) 0  t;  }

    /* 메인 - sns */
    main .sns-news { padding: var(--Spacing-XXL) 0; }
    main .sns-news .swiper { padding: 0 var(--Spacing-M); } 
    }

@media (max-width: 767px) { 
    /* 메인 - 메뉴 리스트 */
    main .main-menu .swiper-slide img { width: 140px; } 

    /* 메인 - sns */  
    main .sns-news h1 .icon { width: 24px; height: 24px; background-image: url(../img/BI/M-lets-icons_insta.svg);  }
    }

/* 브랜드 */
/* 브랜드 - 소개 */
main .identity { box-sizing: border-box; color: var(--text-reverse); width: 100%; display: flex;  padding: 295px var(--Spacing-XXL); flex-direction: column; align-items: flex-start; gap: var(--Spacing-M); flex-shrink: 0; background: center linear-gradient(283deg, rgba(255, 152, 195, 0.00) 0%, #FF98C3 102.44%), url(../img/brand/brand_banner.png) lightgray 50% / cover no-repeat; }
main .identity p { font-size: var(--Font-Size-Body_Short); font-weight: 500; }
main .identity .title { display: flex; flex-direction: column; gap: var(--Spacing-XS); }
main .identity .title b { font-size: var(--Font-Size-Headline ); font-weight: 700; }
main .identity .title p { font-size: var(--Font-Size-Body_Short); font-weight: 500; }

/* 브랜드 - 특징 */
main .features { background-color: var(--bg-accent1); }
main .features ul { display: flex; justify-content: center; }
main .features ul li.feature-item { color: var(--text-accent1); display: flex;  padding: var(--Spacing-XL) var(--Spacing-M); flex-direction: column; justify-content: center; align-items: center;  flex-shrink: 0; }
main .features ul li.feature-item:nth-child(2) { background-color: var(--bg-pure); }
main .features ul li.feature-item .img { margin-bottom: var(--Spacing-S); width: 100%; max-width: 377px;  aspect-ratio: 1 / 1;  overflow: hidden; }
main .features ul li.feature-item .img img { width: 100%; height: 100%; object-fit: cover;  }
main .features ul li.feature-item h3 { text-align: center; font-size: var(--Font-Size-Headline);  }
main .features ul li.feature-item p { font-size: var(--Font-Size-Body_Short); text-align: center; }
    
/* 브랜드 - 비전 */
main .vision { display: flex; margin: var(--Spacing-XXL) 192px; padding: 0 5%; flex-direction: column; align-items: center; gap: var(--Spacing-L); }
main .vision .title { width: 100%; padding-top: 14px; color: var(--text-accent1); border-top:  solid 2px var(--border-accent); }
main .vision .title h2 { font-size: var(--Font-Size-Headline); font-weight: 700; }
main .vision .title p { font-size: var(--Font-Size-Title); font-weight: 500; }
main .vision .vision-cards { display: flex; gap: var(--Spacing-M ); }
main .vision .vision-cards .card { position: relative; }
main .vision .vision-cards .card .text { color: var(--text-reverse); position: absolute; padding: 10% 5%; }
main .vision .vision-cards .card .text h3 { font-size: var(--Font-Size-Headline); margin-bottom: 38px; }
main .vision .vision-cards .card .text p { font-size: var(--Font-Size-Body_Long); font-weight: 500; }
main .vision .vision-cards .card .text { bottom: 0; } 

/* 브랜드 - media */
@media (max-width: 1500px) { 
    /* 브랜드 - 비전 */
    main .vision .vision-cards .card .text { padding: 5% 2%; }
}
@media (max-width: 1400px) { 
    /* 브랜드 - 특징 */
    main .features ul li.feature-item .img { max-width: 300px; }
    /* 브랜드 - 비전 */
    main .vision .vision-cards { width: 100%; flex-direction: column; }
    main .vision .vision-cards .card .text { padding: 10% 5%; }
}
@media (max-width: 1199px) { 
    /* 브랜드 - 특징 */
    main .features ul li.feature-item .img { max-width: 150px; }
    /* 브랜드 - 비전 */
    main .vision { margin: var(--Spacing-XXL) 100px; }
    }
@media (max-width: 767px) {  
    /* 브랜드 - 소개 */
    main .identity {   padding: var(--Spacing-XXL) 5%; height: 400px; justify-content: center; }
    /* 브랜드 - 특징 */
    main .features ul li.feature-item p { width: 86px; }
    main .features ul li.feature-item .img { max-width: 88px; }
    /* 브랜드 - 비전 */
    main .vision { margin: var(--Spacing-XXL) 18px ;}
    main .vision .vision-cards img { width: 100%; height: 157px; object-fit: cover; border-radius: var(--Radius-L); }
    main .vision .vision-cards .card .text h3 { margin-bottom: 11px; }
    main .vision .vision-cards .card-1 .text { padding: 26px var(--Spacing-M); }
    main .vision .vision-cards .card-2 .text { padding: 22px var(--Spacing-M); } 
    }

/* BI */
/* BI - 공용 스타일 */
.section-header { padding: 0 10%;  }
.section-header h1 { text-align:center; font-size: var(--Font-Size-Display ); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 32px 0; grid-gap: 22px 32px; }
.section-header h1:after,.section-header h1:before { content: " "; display: block; }

/* BI - logo */
main .BI-logo { background-color: var(--bg-base); padding: 10% 20% }
main .BI-logo .section-header { color: var(--text-accent1); margin-bottom: var(--Spacing-M ); }
main .BI-logo .section-header h1:after, main .BI-logo .section-header h1:before { border-bottom: 2px solid var(--border-accent); }

/* BI - color */
main .BI-color { background: linear-gradient(0deg, rgba(79, 2, 30, 0.40) 0%, rgba(79, 2, 30, 0.40) 100%), url(../img/brand/color_system_bg.jpg) lightgray 50% / cover no-repeat; padding: 10% 20%; }
main .BI-color .section-header { color: var(--text-reverse); margin-bottom: var(--Spacing-XXL ); }
main .BI-color .section-header h1:after, .main .BI-color .section-header h1:before { border-bottom: 2px solid var(--border-default); }
main .BI-color .color-grid { display: grid; grid-template-columns: repeat(4, 200px); justify-content: center; gap: var(--Spacing-XXL); }
main .BI-color .color-grid .color-box { color: var(--text-reverse); width: 200px; display: flex; align-items: center; flex-direction: column; }
main .BI-color .color-grid .color-box .swatch { height: 200px; flex-shrink: 0; aspect-ratio: 1/1; border-radius: 16px; }
main .BI-color .color-grid .color-box.main .swatch { background: #E62F88; }
main .BI-color .color-grid .color-box.sub1 .swatch { background: var(--main-003); } 
main .BI-color .color-grid .color-box.sub2 .swatch { background: var(--main-004); }
main .BI-color .color-grid .color-box.point .swatch { background: #FFF8B2; }
main .BI-color .color-grid .color-box .title { margin-top: var(--Spacing-S); text-align: center;  font-size: var(--Font-Size-Headline); }
main .BI-color .color-grid .color-box .code, .color-box .rgb { margin-top: var(--Spacing-XS); text-align: center; font-size: var(--Font-Size-Body_Short); }

/* BI - character */
main .BI-character { background: var(--bg-accent1); padding: 10% 0 1200px; position: relative; }
main .BI-character .section-header { color: var(--text-accent1); margin: 0 20% var(--Spacing-XXL); padding: 0 5%; }
main .BI-character .section-header h1:after, .main .BI-character .section-header h1:before { border-bottom: 2px solid var(--border-accent); }
main .BI-character .character-bg { position: absolute; width: 70%; left: 50%; bottom: 0; transform: translateX(-50%);  }
main .BI-character .character-area { position: absolute; z-index: 10; width: 100%; display: flex; justify-content: center; gap: var(--Spacing-M); }
main .BI-character .character-area .character-card { width: 25%; border-radius: var(--Radius-M); }
main .BI-character .character-area .character-card .character-box { background-color: var(--bg-pure); padding: var(--Spacing-XL) var(--Spacing-L); border-radius: var(--Radius-M) var(--Radius-M) 0 0; overflow: hidden; transition: all 0.4s ease; display: flex; flex-direction: column; align-items: center; }
main .BI-character .character-area .character-card .character-box .character-name { color: var(--text-accent1); text-align: justify; font-size: var(--Font-Size-Title); font-weight: 400; display: flex; align-items: center; gap: var(--Spacing-XS); }
main .BI-character .character-area .character-card .character-box .character-name b{font-size: var(--Font-Size-Headline);}
main .BI-character .character-area .character-card .character-box .character-img { width: 236px; height: 236px; margin: var(--Spacing-L) 0; object-fit: contain; flex-shrink: 0;  background-color: #FFF0F6; border-radius: var(--Radius-full); }
main .BI-character .character-area .character-card .toggle-btn { display: flex; align-items: center; justify-content: center; gap: var(--Spacing-S); padding: var(--Spacing-M) 0; background-color: var(--btn-default); border-radius: 0 0 var(--Radius-M) var(--Radius-M); color: var(--text-reverse); text-align: justify; font-size: var(--Font-Size-Title);  text-decoration: none; cursor: pointer; }
main .BI-character .character-area .character-card .toggle-btn .icon { background: url(../img/icon/Arrow_P.svg); width: 24px; height: 24px;  display: inline-block; transition: transform 0.4s ease; }
main .BI-character .character-area .character-card .active .toggle-btn .icon { transform: rotate(180deg); }
main .BI-character .character-area .character-card .character-box .character-text { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; color: var(--text-secondary); text-align: justify; font-size: var(--Font-Size-Body_Short); font-weight: 400; }
main .BI-character .character-area .character-card .character-box.active .character-text { max-height: 50%; }

/* BI - media */
@media (max-width: 1400px) {
    main .BI-character .character-area { flex-direction: column; align-items: center; }
    main .BI-character .character-area .character-card {  width: 90%; }
    main .BI-character .character-area { position: relative; }
    main .BI-character { padding: 10% 0 20%; }
    main .BI-character .character-area .character-card .toggle-btn .icon { background: url(../img/icon/Arrow_M.svg); width: 16px; height: 16px;  }
    main .BI-character .character-area .character-card .character-box .character-text { height: auto;  }
} 
@media (max-width: 1199px) { 
    main .BI-color .color-grid { grid-template-columns: repeat(2, 200px); }
    main .BI-logo, main .BI-color, .BI-character { padding: 10% 10%; }
    main .BI-character .section-header { margin: 0 10% var(--Spacing-XXL); }
    main .BI-character .character-bg { width: 100%; }
    
    } 
@media (max-width: 767px) {  
    .section-header { padding: 0 10%; }
    main .BI-logo, main .BI-color, .BI-character { padding: 30% 0; }
    main .BI-logo .section-header h1, main .BI-color .section-header h1, .BI-character .section-header h1 { grid-template-rows: 14px 0; grid-gap: 22px 32px; }
    main .BI-character .section-header { margin: 0 0 var(--Spacing-XXL); }

    .color-grid { grid-template-columns: repeat(2, 84px) !important;  }
    .color-box { width: 84px !important; }
    .color-box .swatch { height: 84px !important; }
}

















/* app */
.app-banner{background: #FFDDEA; overflow: hidden;}
.app-banner .inner{max-width: 1920px;margin:auto;display: flex; align-items: center;justify-content:space-between; height: 60vh; }
.app-banner .inner .text{padding-left: 190px;}
.app-banner .inner .text h2{color:var(--main-001); font-size: var(--Font-Size-Headline); font-weight: 700; line-height: 140%; padding-bottom: var(--Spacing-L);}
.app-banner .inner .text p{
    -webkit-text-size-adjust: none;
    font-size: var(--Font-Size-Body_Short);
    line-height: 140%;
    color:var(--text-secondary);
    font-weight: 400;
}
.app-banner .inner .text p span{color:var(--main-001);}
.app-banner .inner .img {height: 100%; background-color: #FFDDEA;}
.app-banner .inner .img img{height: 100%;}

.benefits-wrap{padding: var(--Spacing-XXL) 192px;max-width: 1920px;margin: auto; box-sizing: border-box;}
.benefits-wrap h2{color:var(--main-001); font-weight: 700; line-height: 140%; font-size: var(--Font-Size-Headline); padding-bottom: var(--Spacing-M);}
.benefits-wrap .benefits{display: flex; padding-bottom: var(--Spacing-XXL);}
.benefits-wrap .benefits .benefit-item{width: 33%; height: 440px; padding: var(--Spacing-L) var(--Spacing-L) 0; box-sizing: border-box; border-radius: var(--Radius-L); margin-right: var(--Spacing-M); overflow: hidden;}
.benefits-wrap .benefits .benefit-item:last-child{margin-right: 0;}
.benefits-wrap .benefits .benefit-item.pickup{width: 66%;background: var(--main-001) url(../img/App/pickup_mockup.png) no-repeat right bottom; background-size:457px;}
.benefits-wrap .benefits .benefit-item.pickup h3{color:var(--text-reverse)}
.benefits-wrap .benefits .benefit-item.pickup p{color:var(--text-reverse)}
.benefits-wrap .benefits .benefit-item.pickup img{left: auto; width: 457px;height: 408px;}
.benefits-wrap .benefits .benefit-item.membership{background: var(--main-004) url(../img/App/membership_mockup.png) no-repeat center bottom;}
.benefits-wrap .benefits .benefit-item.news{background: var(--main-004) url(../img/App/news_mockup.png) no-repeat center bottom;}
.benefits-wrap .benefits .benefit-item h3{color:var(--text-primary); font-size: var(--Font-Size-Title); font-weight: 700; line-height: 140%; padding-bottom: var(--Spacing-XS);}
.benefits-wrap .benefits .benefit-item p{color:var(--text-primary); font-size: var(--Font-Size-Body_Short); font-weight: 400; line-height: 140%;}
.benefits-wrap .benefits .benefit-item img{width: 302px; position: absolute; bottom:0; left:0; right:0; margin:auto;}
.benefits-wrap .benefits.swiper{display: none;}

.benefits-wrap .qr-section{padding: 120px; background: var(--bg-pure) url(../img/App/phone_home_mockup.png) no-repeat right center; background-size: contain; border-radius: var(--Radius-L);}
.benefits-wrap .qr-section .qr-text h3{font-size: var(--Font-Size-Headline); font-weight: 700; line-height: 140%; color:var(--main-001); padding-bottom: var(--Spacing-L);}
.benefits-wrap .qr-section .qr-text a{display:none;}
.benefits-wrap .qr-section .img{display: none;}


/* menu */
.container {padding-top: 100px;}
.menu-section {padding: var(--Spacing-XL) 10%;}
.menu-section .menu-bar {padding-bottom: var(--Spacing-L);}
.menu-section .menu-bar .swiper .swiper-wrapper .swiper-slide{width:auto; border-radius: var(--Radius-full);margin-right: var(--Spacing-S);}
.menu-section .menu-bar .swiper .swiper-wrapper .swiper-slide.on{background: var(--main-003); border-color: var(--main-003);}
.menu-section .menu-bar .swiper .swiper-wrapper .swiper-slide a{display: inline-block; color:var(--text-secondary); font-size: var(--Font-Size-Title); font-weight: 500; line-height: 140%; padding:var(--Spacing-XS) var(--Spacing-M);}
.menu-section .menu-bar .swiper .swiper-wrapper .swiper-slide.on a{color:var(--text-reverse);}

.menu-section .menu-list{margin:auto;}
.menu-section .menu-list ul{display: grid; width: 90%;margin: auto;grid-template-columns: repeat(auto-fill, minmax(307px, 1fr));}
.menu-section .menu-list ul li{padding: var(--Spacing-L) 0; width: 307px;margin: auto;}
.menu-section .menu-list ul li a{display:block; color: var(--text-secondary);text-align: center;}
.menu-section .menu-list ul li a .img{width: 307px;height: 307px;display: flex;justify-content: center;overflow: hidden;align-items: center;}
.menu-section .menu-list ul li a .img:hover{background: #FFDDEA;border-radius: 50%;}
.menu-section .menu-list ul li a .img img{width: 100%;}
.menu-section .menu-list ul li a p{font-size: var(--Font-Size-Body_Short, 24px); font-style: normal; font-weight: 500; line-height: 140%; padding-top: var(--Spacing-S); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}


/* menu_detail */
.menu-detail-wrap .box{padding: var(--Spacing-L) 192px; display: flex; flex-wrap:wrap;justify-content: flex-start;}
.menu-detail-wrap .box .img{width: 350px;height: 400px;background: var(--main-004); border-radius: 1000px 1000px 0 0;margin-right: var(--Spacing-XL);}
.menu-detail-wrap .box .img img{width:100%; padding-top: 50px;}
.menu-detail-wrap .box .text{padding-top: 5px;}
.menu-detail-wrap .box .text em{color: var(--main-001); font-size: var(--Font-Size-Body_Long); font-weight: 500;}
.menu-detail-wrap .box .text p{color: var(--text-primary); font-size: var(--Font-Size-Body_Short); padding:var(--Spacing-S) 0; font-weight: 500;}
.menu-detail-wrap .box .text h2{color: var(--text-primary); font-size: var(--Font-Size-Headline); font-weight: 700;}
.menu-detail-wrap .box .text span{display:block; color: var(--text-secondary); font-size: var(--Font-Size-Body_Long); padding: var(--Spacing-S) 0 var(--Spacing-M); font-weight: 400;}
.menu-detail-wrap .box .text table tr:last-child{padding-bottom: 0;}
.menu-detail-wrap .box .text table tr td{color:var(--text-secondary); font-size: var(--Font-Size-Body_Long); font-weight: 400; padding-bottom: 8px;}
.menu-detail-wrap .box .text table tr td:first-child{width: 120px;}

.menu-detail-wrap h2{color: var(--text-primary); font-size: var(--Font-Size-Title); font-weight: 700; padding-bottom: var(--Spacing-M);}
.menu-detail-wrap .menu-detail-swiper{padding: var(--Spacing-L) 192px;}
.menu-detail-wrap .menu-detail-swiper h2{font-size: var(--Font-Size-Body_Long);}
.menu-detail-wrap .menu-detail-swiper h3{font-size: var(--Font-Size-Title);color:var(--text-primary);padding-bottom: var(--Spacing-M);}
.menu-detail-wrap .menu-detail-swiper .swiper-wrapper{padding: var(--Spacing-L) 0;}
.menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide{width: 250px; margin-right: 24px;}
.menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide .img{width: 100%; height: 250px;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide img{width: 100%;}
.menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide p{text-align: center; font-size: var(--Font-Size-Body_Short); font-weight: 500; color: var(--text-secondary); padding-top: var(--Spacing-S);}
.menu-detail-wrap .menu-detail-swiper .swiper .arrow-wrap{padding:var(--Spacing-M) 0; display: flex; justify-content: center;}
.menu-detail-wrap .menu-detail-swiper .swiper .arrow-wrap span{display:block; width: 24px;height: 24px;padding: var(--Spacing-XS);background: url(../img/icon/line-md_arrow-left.svg) center no-repeat; border-radius: var(--Radius-full); background-color: var(--gray-002);}
.menu-detail-wrap .menu-detail-swiper .swiper .arrow-wrap span.arrow-prev{margin-right: var(--Spacing-M);}
.menu-detail-wrap .menu-detail-swiper .swiper .arrow-wrap span.arrow-next{transform: rotate(180deg);}
.menu-detail-wrap .menu-detail-swiper .add-btn{text-align: center;}
.menu-detail-wrap .menu-detail-swiper .add-btn a{display: inline-block; padding: var(--Spacing-S) var(--Spacing-L); font-size: var(--Font-Size-Title); font-weight: 500; color: var(--main-001); border: 1px solid var(--main-003); box-sizing: border-box;}


/* store */
.map-wrap{display: flex;position: relative;}
#map{width:calc(100% - 462px); min-height:60vh;}
.map-wrap .search-bar-wrap{position: absolute;top: 0;right: 0; left:auto;width:414px; padding: var(--Spacing-L) 24px 0;z-index: 1;}
.map-wrap .search-bar-wrap .search-bar{position: relative;width: 100%;}
.map-wrap .search-bar-wrap input{width:100%; height: 57px; padding: 0 var(--Spacing-M); outline: none;border-radius: var(--Radius-S); border: 1px solid var(--border-default); font-size: var(--Font-Size-Body_Short); box-sizing: border-box; font-weight: 400;background:var(--btn-unselected);}
.map-wrap .search-bar-wrap input::placeholder {color: var(--text-unselected);}
.map-wrap .search-bar-wrap a{position: absolute;top: 0;right: 0;width:24px; height: 100%; display:block;background:url(../img/icon/Search_pc.svg) center no-repeat; padding: 0 var(--Spacing-M) 0 var(--Spacing-S); }

.store-list-wrap{width: 100%;padding: 153px 24px var(--Spacing-L); max-width:462px;box-sizing: border-box;}
.store-list .store{display:flex; flex-wrap:wrap; padding-bottom: 32px;}
.store-list .store:last-child{padding-bottom: 0;}
.store-list .store .img{width: 120px;height: 120px;display: flex;justify-content: center; overflow: hidden; border-radius: var(--Radius-S);}
.store-list .store .img img{height: 100%;}
.store-list .store .text{width:calc(100% - 120px); padding-left:var(--Spacing-S); box-sizing: border-box;}
.store-list .store .text .name{color: var(--text-primary); font-size: var(--Font-Size-Title); font-weight: 500;}
.store-list .store .text .addr{color: var(--text-secondary); font-size: var(--Font-Size-Body_Long); font-weight: 400; padding-bottom: 7px;}

.store-list .opt{display:flex; flex-wrap:wrap;}
.store-list .opt li{display:none; align-items: center; padding-right: var(--Spacing-S); padding-bottom: var(--Spacing-S); line-height: 140%;}
.store-list .opt li span{display:block; padding-right:var(--Spacing-XS)}
.store-list .opt li span img{width: 16px;height: 16px;}
.store-list .opt li p{font-size: var(--Font-Size-Body_Long); color:var(--text-secondary); float: left; line-height: 140%; font-weight: 400;}

.store-list .result-none{padding: var(--Spacing-L) 0;}
.store-list .result-none p{font-size: var(--Font-Size-Title); font-weight: 400;line-height: 140%;color:#AFA8A5;text-align: center;}

@media (min-width: 1401px) {
    /* app */
    .app-banner .inner .text{min-width:590px;}
}

@media (max-width:1400px) {
    /* app */
    .app-banner .inner .text{padding-left: 80px;min-width:590px;}
    .app-banner .inner .text h2{padding-bottom: 0;}
    .benefits-wrap{padding: var(--Spacing-XXL) 80px;}

    /* menu_detail */
}

@media (max-width:1199px) {
    /* app */
    .app-banner .inner{height:auto; flex-direction: column-reverse;align-items: normal;}
    .app-banner .inner .text{padding:var(--Spacing-XXL) 5%; background: var(--gray-001);}
    .app-banner .inner .text h2{color:var(--main-001); font-size: var(--Font-Size-Headline); font-weight: 700; line-height: 140%; padding-bottom: var(--Spacing-L);}
    .app-banner .inner .text p span{color:var(--main-001);}
    .app-banner .inner .img{display:block;width: 100%;}
    .app-banner .inner .img img{width: 100%;height: auto;}

    .benefits-wrap {padding: var(--Spacing-XXL) 5%;}
    .benefits-wrap .benefits.pc{display: none;}
    .benefits-wrap .benefits.swiper{display: block;}
    .benefits-wrap .qr-section{padding: 0; background-image: none;}
    .benefits-wrap .qr-section .qr-text{padding: 25px 0 75px;text-align: center;}
    .benefits-wrap .qr-section .qr-text img{margin: auto;}
    .benefits-wrap .qr-section .qr-text a{display:inline-block;padding: var(--Spacing-XS) var(--Spacing-S); border-radius: 100px; background: var(--main-003); color:var(--text-reverse);font-size: var(--Font-Size-Body_Long);margin-bottom: var(--Spacing-L);}
    .benefits-wrap .qr-section .img{display: block;}
    .benefits-wrap .qr-section .img img{width: 100%;}

    /* menu */
    .menu-section{padding: var(--Spacing-XL) 5% 0;}
    .menu-section .menu-list ul{grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}
    .menu-section .menu-list ul li{width: 280px;}
    .menu-section .menu-list ul li a .img{width: 280px;height: 280px;}

    /* menu_detail */
    .menu-detail-wrap .box {padding: var(--Spacing-L); justify-content: space-between;}
    .menu-detail-wrap .box .text{padding-top: 15px;}
    .menu-detail-wrap .box .img{margin:auto;}
    .menu-detail-wrap .menu-detail-swiper{padding: var(--Spacing-L);}

    /* store */
    .map-wrap{display: block;}
    #map{width: 100%;height: 50vh;}
    .store-list-wrap{padding: var(--Spacing-L); max-width:none;}
    .inavi-ctrl-top-right{display:none;}
    .inavi-ctrl-bottom-right{display:none;}
    .inavi-ctrl-bottom-left{display:none;}
    .map-wrap .search-bar-wrap{padding: var(--Spacing-L) 18px 0; width: auto;left:0;}
    .map-wrap .search-bar-wrap input{border-color:var(--main-002); background: var(--bg-pure);height: 40px;}
    .map-wrap .search-bar-wrap a{background:url(../img/icon/Search.svg) center no-repeat;}
}


@media (max-width:767px) {
    .container{padding-top: 80px;}
    /* app */
    .benefits-wrap .benefits .benefit-item{height: 360px;}
    .benefits-wrap .benefits .benefit-item.pickup{background-size: 292px;}

    /* menu */
    .menu-section .menu-bar .swiper .swiper-wrapper .swiper-slide{ border:1px solid var(--border-default);}
    .menu-section .menu-list ul{grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));}
    .menu-section .menu-list ul li{width: 98px;padding: 0 0 64px;}
    .menu-section .menu-list ul li a .img{width: 98px;height: 98px; margin: auto;}
    .menu-section .menu-list ul li a .img:hover{background: none;}

    /* menu_detail*/
    .menu-detail-wrap .box{display:block;}
    .menu-detail-wrap .box .img{width: 240px; height: 274px; margin:auto;}
    .menu-detail-wrap .box .img img{padding-top: 34px;}
    .menu-detail-wrap .box .text{padding: var(--Spacing-XL) 0 0;}
    /* .menu-detail-wrap .menu-detail-swiper{padding: var(--Spacing-L);} */
    .menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide{width: 98px; margin-right: 16px;}
    .menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide:last-child{margin-right: 0;}
    .menu-detail-wrap .menu-detail-swiper .swiper .swiper-slide .img{height: 98px;}
    
    /* store */
    .store-list .result-none{padding: var(--Spacing-XL) 0;}
}