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

@media screen and (min-width:1025px){
/**
  * 변수설정
  */
: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;} 
/* 메뉴에 마우스를 올리면 전체 드롭다운 배경을 펼침 */
header::after{content:"";position:absolute;top:89px;left:0;width:100%;height:0;background-color: var(--header_color);transition:0.2s;}
header:hover::after{height:200px;}
/* 헤더 안의 로고, 메뉴, 문의를 가로로 정렬 */
header > .h_inner{position:relative;z-index:1;min-width:1024px;display: flex;align-items: center;margin:0 auto;height:89px;justify-content: center;}
header > .h_inner > h1{width:174px;flex-shrink:0;}
header > .h_inner > h1 img{display:block;max-width:100%;}
/* 상단 메뉴 항목을 가로로 배치 */
header > .h_inner > nav{font-size:24px;width:1000px;height:100%;}
header > .h_inner > nav > ul{display:flex;justify-content:space-around;height:100%;}
header > .h_inner > nav > ul > li{position:relative;display:flex;align-items:center;padding:0 14px;color:var(--sub_color01);cursor:pointer;}
.h_inner a{text-decoration: none;color:var(--sub_color01)}
.h_inner a:hover{color:var(--sub_color03)}
/* 각 메뉴 아래에 숨겨진 하위 메뉴 */
header .depth{position:absolute;top:89px;left:50%;transform:translateX(-50%);display:none;width:max-content;min-width:100%;padding-top:24px;text-align:center;font-size:20px;line-height:2;color:var(--sub_color01);}
/* 헤더에 마우스를 올리면 하위 메뉴 표시 */
header:hover .depth{display:block;}
header .depth li{white-space:nowrap;cursor:pointer;}
header .depth li:hover{color:var(--sub_color03);}
header > .h_inner > span{flex-shrink:0;color:var(--sub_color01);}

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

/**
  * 배너
  */
main > #banner{width:100%;height:100vh;}

/* 스와이프 */
.mySwiper { 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}


.swiper-pagination-bullet { height:30px; width: 30px; background: transparent; border: 1px solid #ffffff; opacity: 1;background-color: #ffffff; border-radius: 30px;}
.swiper-pagination-bullet-active { height:30px;width: 70px; transition: width .5s; border-radius: 30px; 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;
  margin:0 30px;
}

/* 이미지 */
#b01{background-image: url('../images/main_visual_01_01.jpg');}
#b02{background-image: url('../images/main_visual_01_03.jpg');}
#b03{background-image: url('../images/main_visual_03.jpg');}


.swiper-slide > a{width:100%;height:1024px;background-repeat: no-repeat;background-size: cover;text-decoration: none;}
.swiper-slide > a > p{font-size:80px;padding-top:280px;color:var(--sub_color01);font-weight: 100;}
.swiper-slide > a > h4{text-align:center;color:var(--sub_color01);font-size:80px;line-height:100px;padding-top:20px;}
.swiper-slide > a > span{text-align:center;color:var(--sub_color01);font-size:25px;line-height:90px;opacity: 0.6;}

/**
  * 메뉴
  */ 
.menu {width:100%;height:800px;padding:100px 0;background-color: var(--sub_color01)}
.menu > h2 {font-size:30px;text-align: center;height:50px;color:var(--main_color02);font-weight: bold;}
.menu > div {min-width:1024px;margin: 0 auto;position:relative;}
/* 메뉴카테고리 */
.menu > div > nav{width:490px;margin:30px auto;}
.menu > div >nav > ul{display: flex;height:91px;justify-content: space-around;}
.menu > div > nav > ul > li{width:101px;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;width:91px;font-size:17px;text-align:center;color:var(--main_color01);line-height:1.2;}
.menu > div > nav > ul > li img{width:91px; border:5px solid #fff;border-radius: 25px;transition: 0.3s;}
.menu > div > nav > ul > li:hover img{transform: scale(1.1)};

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

.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:280px;height:360px;font-size:22px;text-align: center;padding : 0 16px;border:1px solid #2e2f2e;border-radius:30px;margin-left: 20px;overflow:hidden;}
.menu > div > article > ul::-webkit-scrollbar {
  display: none;
}
.menu > div > article > ul > li > img{width:240px;height:240px;transition: 0.5s;}
.menu > div > article > ul > li:hover > img{transform: scale(1.1);}
.menu > div > article > ul > li:after > img{transform: scale(1.1);}
.menu > div > article > ul > li > p{padding-top:40px;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:1024px;position:relative;background-image:url('../images/main_visual_06.jpg');background-size:cover;padding:100px 0;}
.store h2{font-size:30px;text-align: center;height:50px;color:var(--sub_color01);font-weight: bold;}
.store > article{position:relative;width :1440px;height:1024px;margin: 0 auto;display:flex; flex-wrap: wrap;justify-content: space-around;top : 100px;}
.store_wrap{width:400px;height:400px;position:relative;}
.store > article > div > img{width:100%;height:285px;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:1024px;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 :400px;margin: 50px auto;display:flex;justify-content: space-around;}
.sns_wrap{width:60px;height:60px;}
.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:1200px;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:255px;height:255px;position:relative;margin-bottom: 20px;}

.sns > article > ul > li  img{position:absolute; width:255px;height:255px;}


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

.sns > article > ul > li:hover::after{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.9;pointer-events:none;}

  /**
  * CSR
  */
.csr{
  width:100%;height:1024px;position:relative;padding:100px 0;background-image:url('../images/main_visual_05_new.jpg');background-size:cover;
}
.csr > article{position:relative;width :1440px;height:1024px;margin: 0 auto;}
.csr_img{display:block;}
.csr .title{font-size:66px;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%}
#notice01{display: block;}


  /**
  * 푸터
  */
footer{width:100%;background-color: var(--sub_color01);color:#666666;}
.f_navi{width: 100%;height:40px;border-bottom:1px solid #333333;display:flex;justify-content: center;}
.f_navi > nav{width:1440px;display:flex;justify-content: space-between}
.f_navi > nav > ul{display:flex;justify-content: space-between;width:700px;}
.f_navi > nav > ul:first-child{padding-right:50px;}
.f_navi > nav > ul:last-child{padding-left:100px;}
.f_navi > nav > ul > li > a{line-height: 40px;text-decoration: none;color:#666666;}
.f_navi > nav > ul > li > a:hover{text-decoration: underline;}
.f_navi > nav > ul > li:nth-child(2) > a{font-weight: 500;}

.f_wrap{width:100%; height:130px;display:flex;justify-content: center;margin-top :20px;}
.f_size{width:1440px;display:flex;justify-content: space-between;}
.f_info{width:700px;}
.f_info > p {line-height: 30px;}
.f_info > span{font-size:13px;}
.f_info p> span:first-child::after{content:'\0020\0020\007C\0020\0020'} 
.f_right{width:600px;display:flex;justify-content: right;}
.f_mark{width:94px;}
.f_sns{width:150px;display:block;text-align: right;}
.f_sns > a{text-decoration: none;}
.f_sns > a > i{font-size:30px;color:#333333}
.f_site{width:150px;margin-top:50px;}

.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:100px;line-height:0;z-index:4}
.top img{display:block;width:100%;height:auto;}

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