@charset "utf-8";
@import url('https://googleapis.com');

@media screen and (max-width:767px){
/**
  * 변수설정
  */
:root{
  --header_color: rgba(3, 3, 3, 0.5);
  --main_color01: #1a4a31;
  --main_color02: #153a25;
  --sub_color01: #E8E5DF;
  --sub_color02: #2e2f2e;
  --sub_color03: #c99963;
  --cont_width: 1300px;
  --cont_center: 0px auto;
}

/**
  * 기본설정
  */
header, main, footer{ width:100%;font-family: 'Noto Sans KR', sans-serif; }
body{overflow-x: hidden;}
/**
  * 헤더
  */
header{background-color: var(--header_color);position:fixed;top:0;left:0;border-bottom: 1px solid #E8E5DF;z-index: 1000;transition:0.2s;display:flex;justify-content: space-between;} 

label[for=gnb_toggle]{position:absolute;top:0;right:5%;width:2rem;height:52px;text-align:center;text-decoration:none;color:var(--sub_color01);cursor:pointer;user-select:none;-webkit-user-select:none;}

label[for=gnb_toggle] i.fa-bars{display:block;font-size:2rem;line-height:52px;}
label[for=gnb_toggle] i.fa-times{display:none;font-size:2rem;line-height:52px;}

i.fa-angle-down{display:block;float:right;line-height: 52px;transition: 0.5s;}
#gnb_toggle:checked ~ header label[for=gnb_toggle] i.fa-bars{display:none;}
#gnb_toggle:checked ~ header label[for=gnb_toggle] i.fa-times{display:block;}
#gnb_toggle:checked ~ header .gnb{width:100%;height:100%;background-color: rgba(3, 3, 3, 0.8);right:0;}

body:has(#gnb_toggle:checked) {
  overflow: hidden;
}


/* 헤더 안의 로고, 메뉴, 문의를 가로로 정렬 */
header > .h_inner{position:relative;z-index:5;height:52px;}
header > .h_inner > h1{width:100px;line-height:30px;padding:5px 0 0 10%;}
header > .h_inner > h1 img{width:100%;}
header > .h_inner > a{display:none;}

header .gnb{position:absolute;right:-100%;transition: 0.5s;height:100%;}
header .gnb > ul{padding:30px 20px 0 100px;}
header .gnb > ul > li{border-bottom:1px solid #E8E5DF}
header > .h_inner > nav{position:fixed;}

header > .h_inner > nav > ul{}
header > .h_inner > nav > ul > li{}
.h_inner .gnb >ul>li>a{color:#ffffff;text-decoration: none;font-size:1rem;line-height:52px;}
/* 각 메뉴 아래에 숨겨진 하위 메뉴 */
header .h_inner .gnb .depth{display:none;}
/* 헤더에 마우스를 올리면 하위 메뉴 표시 */

header .depth li{transition: 0.5s;}
header .depth li > a {font-size: 0.9rem;color:#E8E5DF;text-decoration: none;padding-left:20px;line-height: 1.8rem;}


.h_bottom{display:flex;justify-content: space-around;position:fixed;width:100%;height:10%;bottom:10px;}

.h_bottom a {font-size: 1rem;display: inline-flex;align-items: center;justify-content: center;box-sizing: border-box;height: 2rem;padding: 0 10px;border-radius: 20px;background-color: #E8E5DF;text-decoration: none;width:200px;}

.h_bottom a:first-child {border: 1px solid #1a4a31;color: #1a4a31;}

.h_bottom a:last-child {border: 1px solid #C8102E;color: #C8102E;}

/**
  * 메인
  */
main{width:100%;}

/**
  * 배너
  */
main > #banner{width:100%;height:70vh;min-height:420px;max-height:820px;overflow:hidden;}

/* 스와이프 */
.mySwiper,
.swiper-wrapper,
.swiper-slide { width: 100%; height: 100%; }

.swiper-slide {display: flex;align-items:center;justify-content:center;font-size: 18px;background: #444;text-align: center; font-size: 18px; background: #fff;position:relative;overflow:hidden;}


.swiper-pagination-bullet { width: 20px; height: 20px; background: transparent; border: 1px solid #ffffff; opacity: 1; background-color: #ffffff;}
.swiper-pagination-bullet-active { width: 60px; transition: width .5s; border-radius: 20px; background: #1a4a31; border: 1px solid #ffffff;}

.swiper-button-prev,
.swiper-button-next {
  width: calc(var(--swiper-navigation-size) / 44 * 24);
  height: 56px;
  background-color: #E8E5DF; color: #1a4a31;
  border: 1px solid var(--sub_color01);border-radius: 20px;
}

/* 이미지 */
#b01{background-image: url('../images/main_visual_02_01.png');}
#b02{background-image: url('../images/main_visual_02_02.png');}
#b03{background-image: url('../images/main_visual_02_03.png');}


.swiper-slide > a{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;text-decoration:none;}
.swiper-slide > a > p{font-size:22px;padding-top:64px;color:var(--sub_color01);font-weight:100;}
.swiper-slide > a > h4{text-align:center;color:var(--sub_color01);font-size:24px;line-height:1.2;padding-top:10px;}
.swiper-slide > a > span{text-align:center;color:var(--sub_color01);font-size:12px;line-height:1.4;opacity:0.6;}

@media screen and (min-width:375px){
  .swiper-slide > a > p{font-size:28px;padding-top:120px;}
  .swiper-slide > a > span{font-size:14px;}
}

@media screen and (min-width:481px){
  .swiper-slide > a > p{font-size:32px;}
  .swiper-slide > a > h4{font-size:32px;}
  .swiper-slide > a > span{font-size:16px;}
}

/**
  * 메뉴
  */ 
.menu {width:100%;padding-top:100px;background-color: var(--sub_color01)}
.menu > h2 {font-size:30px;text-align: center;height:50px;color:var(--main_color02);font-weight: bold;}
.menu > div {width:100%;margin: 0 auto;position:relative;}
/* 메뉴카테고리 */
.menu > div > nav{width:90%;margin:10px auto;}
.menu > div > nav > ul{display: flex;height:91px;justify-content: space-around;}
.menu > div > nav > ul > li{width:50%;height:101px;font-size:17px;text-align: center;}
.menu > div > nav > ul > li label{display:block;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
.menu > div > nav > ul > li label > span{display:block;font-size:17px;text-align:center;color:var(--main_color01);line-height:1.2;}
.menu > div > nav > ul > li img{width:75px; border:5px solid #fff;border-radius: 25px;transition: 0.3s;}


/*메뉴 목록*/ 
.menu > div > article{position: relative;height:300px;}

.menu > div > article > ul {display:none;position: absolute;width:100%;margin-top:50px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;touch-action:pan-x;cursor:grab;user-select:none;-webkit-user-select:none;}
.menu > div > article > ul.is-dragging {cursor:grabbing;}
.menu > div > article > ul > li {flex:0 0 auto;width:140px;height:160px;font-size:16px;text-align: center;padding : 0 16px;border:1px solid #2e2f2e;border-radius:20px;margin-left: 5px;overflow:hidden;}
.menu > div > article > ul::-webkit-scrollbar {
  display: none;
}
.menu > div > article > ul > li > img{width:90%;}
.menu > div > article > ul > li > p{padding-top:5px;color:var(--main_color01)}


/* 메뉴카테고리버튼액션*/
.menu_category{display:none;}
#ssal:checked ~ article .pho{display:flex;justify-content: flex-start;}
#ssam:checked ~ article .ssam{display:flex;justify-content: flex-start;}
#bab:checked ~ article .bokumbab{display:flex;justify-content: flex-start;}
#appe:checked ~ article .appetizer{display:flex;justify-content: flex-start;}
#ssal:checked ~ nav .category1 img{border:3px solid #153a25}
#ssam:checked ~ nav .category2 img{border:3px solid #153a25}
#bab:checked ~ nav .category3 img{border:3px solid #153a25}
#appe:checked ~ nav .category4 img{border:3px solid #153a25}


/**
  * 이달의 매장
  */
.store{width:100%;height:auto;box-sizing:border-box;position:relative;background-image:url('../images/main_visual_06.jpg');background-size:cover;padding:50px 0;}
.store h2{font-size:30px;text-align: center;height:50px;color:var(--sub_color01);font-weight: bold;}
.store > article{position:relative;width:90%;height:auto;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;}
.store_wrap{width:auto;height:auto;min-width:0;position:relative;}
.store > article > div > img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:20px;}
.store > article > div > span{height:20px;color:var(--sub_color01);font-size:16px;line-height:20px;}
.store > article > div > p{height:30px;color:var(--sub_color01);font-size:20px;line-height:30px;}

/**
  * SNS소개
  */
.sns{width:100%;height:100%;position:relative;padding:100px 0;background-color: var(--sub_color01)}
.sns h2{font-size:30px;text-align: center;height:50px;color:var(--main_color02);font-weight: bold;}

/* SNS카테고리 */
.sns_category{width :50%;margin: 50px auto;display:flex;justify-content: space-around;}
.sns_wrap{width:50px;height:50px;}
.sns_wrap span{display:none;}
#insta{background-image:url('../images/insta.png');cursor:pointer;background-size: cover;}
#youtube{background-image:url('../images/utube.png');cursor:pointer;background-size: cover;}
#facebook{background-image:url('../images/facebook.png');cursor:pointer;background-size: cover;}

/* SNS게시물 */
.sns > article{width:95%;margin: 0 auto;display:flex; flex-wrap: wrap;justify-content: space-around;top : 100px;}
.sns > article > ul{display:flex;flex-wrap: wrap;justify-content: space-around;}
.sns > article > ul > li {width: 45%;aspect-ratio: 1;position: relative;margin-bottom: 20px;}
.sns > article > ul > li img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}

/* SNS 게시물 호버 효과 */
#s01::after{content: "쌀국수부터 반미, 스프링롤, 덮밥까지 오늘의 기분 따라 골라보세요!";}
#s02::after{content: "Fresh mood? Right this way";}
#s03::after{content: "오늘은 조금 SPICY하게!";}
#s04::after{content: "짜조부터 스프링롤, 치킨윙까지 포메인의 인기 애피타이저를 한 접시에!";}
#s05::after{content: "Fresh, Light, Bun Bo Xao";}
#s06::after{content: "PICK YOUR FAVORITE!";}
#s07::after{content: "프리미엄 와규와 아삭한 채소, 포메인 특제 소스에 마늘 후레이크 킥까지!";}
#s08::after{content: "오늘 저녁은 포메인의 RICE 메뉴!";}

.sns > article > ul > li::after{content:"";color:#fff;font-size:16px;line-height:20px;text-align: center;align-items: center;display:flex;justify-content: center;position: absolute;inset: 0;background-image:url('../images/Instagram_bg.png');background-size:cover;opacity: 0.8;pointer-events:none;inset: 0;}


  /**
  * CSR
  */
.csr{
  width:100%;height:100%;position:relative;padding:100px 0;background-image:url('../images/main_visual_02_04.png');background-size:cover;
}
.csr > article{position:relative;width :100%;height:100%;margin: 0 auto;}
.m_csr_img{display:block;}
.csr .title{font-size:54px;text-align: center;color:var(--sub_color01);line-height:70px;margin-top:20%;font-weight: 300;}
.csr span{font-weight: 500;}
.csr .txt{font-size:17px;line-height:20px;text-align: center;color:var(--sub_color01);margin-top:20px;margin-bottom:50px;}
.csr > article > a{display:block;width:100px;height:100px;margin: 0 auto;}
.csr > article > a img{width:100%;height:100%;} 

  /**
  * 공지사항
  */
.notice{width:100%;}

.notice > article{width:100%;}
.notice > article > img{width:100%}
#notice02{display: block;}

  /**
  * 푸터
  */
footer{width:100%;background-color:var(--sub_color01);color:#666666;}
.f_navi{width:100%;height:auto;display:block;border:0;}
.f_navi > nav{width:100%;display:flex;flex-direction:column;}
.f_navi > nav > ul{float:none;display:grid;width:100%;box-sizing:border-box;padding:4px 14px;}
.f_navi > nav > ul:first-child{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #999;}
.f_navi > nav > ul:last-child{grid-template-columns:repeat(4,minmax(0,1fr));}
.f_navi > nav > ul > li > a{display:block;font-size:16px;line-height:24px;white-space:nowrap;text-decoration: none;color:#666666;}
.f_navi > nav > ul > li:nth-child(2) > a{font-weight: 500;}

.f_wrap{width:100%;height:auto;display:block;box-sizing:border-box;margin:0;padding:10px 14px 8px;}
.f_size{position:relative;width:100%;display:flex;flex-direction:column;gap:4px;box-sizing:border-box;padding-bottom:20px;}
.f_info{width:100%;}
.f_info > p{line-height:normal;margin-bottom:2px;}
.f_info > p img{display:block;width:170px;max-width:100%;height:auto;}
.f_info > adress{display:block;}
.f_info > adress > p{font-size:12px;line-height:15px;}
.f_info > adress > p > span:first-child::after{content:'  ';}
.f_info > adress > span{position:absolute;right:0;bottom:0;left:0;text-align:center;font-size:11px;line-height:20px;}
.f_right{width:100%;display:flex;align-items:flex-start;justify-content:space-between;}
.f_mark{width:80px;}
.f_mark img{display:block;width:100%;height:auto;}
.f_sns{width:auto;display:flex;gap:10px;text-align:right;}
.f_sns > a{text-decoration: none;}
.f_sns > a > i{font-size:22px;color:#333333}
.f_site{display:none;}

.top{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:1000;display:none;width:70px;line-height:0;z-index:4}
.top img{display:block;width:100%;height:auto;}

.top.is-visible {display:block;}
}