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

@media screen and (max-width:1024px) and (min-width:768px){
/**
  * 변수설정
  */
: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: 768px;
  --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:90px;left:0;width:100%;height:0;background-color: var(--header_color);transition:0.2s;}
label[for=gnb_toggle]{position:absolute;right:10px;top:35.4px;z-index:5;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
label[for=gnb_toggle] i{cursor:pointer;pointer-events:none;user-select:none;-webkit-user-select:none;caret-color:transparent;}
label[for=gnb_toggle] .fa-bars{display:block;text-decoration:none;color:var(--sub_color01);font-size:1.2rem;}

#gnb_toggle:checked ~ header::after{height:150px;}
#gnb_toggle:checked ~ header .depth{display:block}

/* 헤더 안의 로고, 메뉴, 문의를 가로로 정렬 */
header > .h_inner{position:relative;z-index:1;width:768px;display: flex;align-items: center;margin:0 auto;height:90px;}
header > .h_inner > h1{width:100px;flex-shrink:0;}
header > .h_inner > h1 img{display:block;max-width:100%;}
/* 상단 메뉴 항목을 가로로 배치 */
header > .h_inner > nav{font-size:18px;width:580px;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);font-size:1rem}
/* 각 메뉴 아래에 숨겨진 하위 메뉴 */
header .depth{position:absolute;top:90px;left:50%;transform:translateX(-50%);display:none;width:max-content;min-width:100%;padding-top:24px;text-align:center;line-height:2rem;color:var(--sub_color01);}
/* 헤더에 마우스를 올리면 하위 메뉴 표시 */

header .depth li{white-space:nowrap;cursor:pointer;}
header .depth li a {font-size:0.9rem}
header > .h_inner > a > span{font-size:11px;color:var(--sub_color01);text-align: center;line-height:20px;padding: 0 2px;}
header > .h_inner > a {display:flex;align-items:center;justify-content:center;border:1px solid var(--sub_color01);border-radius: 10px;}

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

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

/* 스와이프 */
.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 { 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_01_01.jpg');background-position: center;}
#b02{background-image: url('../images/main_visual_01_03.jpg');background-position: center;}
#b03{background-image: url('../images/main_visual_03.jpg');background-position: center;}


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

/**
  * 메뉴
  */ 
.menu {width:100%;height:500px;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 {width:768px;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 p{line-height:200%;width:91px;font-size:17px;text-align: center;color:var(--main_color01)}
.menu > div > nav > ul > li img{width:91px; border:5px solid #fff;border-radius: 25px;transition: 0.3s;}

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

.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:160px;height:205px;font-size:16px;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:150px;height:150px;transition: 0.5s;}
.menu > div > article > ul > li:after > img{transform: scale(1.1);}
.menu > div > article > ul > li > p{padding-top:20px;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:570px;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 :768px;height:500px;margin: 0 auto;display:flex; flex-wrap: wrap;justify-content: space-around;top : 30px;}
.store_wrap{width:200px;height:200px;position:relative;}
.store > article > div > img{width:100%;height:200px;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:600px;position:relative;padding:50px 0;background-color: var(--sub_color01)}
.sns h2{font-size:30px;text-align: center;height:30px;color:var(--main_color02);font-weight: bold;}

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

/* SNS게시물 */
.sns > article{width:768px;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:180px;height:180px;position:relative;margin-bottom: 20px;}

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


  /**
  * CSR
  */
.csr{
  width:100%;height:500px;position:relative;padding:100px 0;background-image:url('../images/main_visual_05_new.jpg');background-size:cover;
}
.csr > article{position:relative;width :768px;height:500px;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%;height:auto;}
.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: 768px;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:20px;width:468px;}
.f_navi > nav > ul:last-child{padding-left:10px;width:300px}
.f_navi > nav > ul:first-child{padding-right:20px;font-size:13px;}
.f_navi > nav > ul:last-child{padding-left:20px;font-size:12px; letter-spacing: 1px;}
.f_navi > nav > ul > li > a{line-height: 40px;text-decoration: none;color:#666666;}
.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:768px;display:flex;justify-content: space-between;}
.f_info{width:700px;}
.f_info > p {line-height: 15px;font-size:13px;}
.f_info p> span:first-child::after{content:'\0020\0020\007C\0020\0020'} 
.f_info > span{font-size: 11px;}
.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:25px;color:#333333}
.f_site{width:150px;margin-top:50px;}

.top{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:80px;z-index:1000;display:none;width:80px;line-height:0;z-index:4}
.top img{display:block;width:100%;height:auto;}
.top:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:50%;}
.top.is-visible {display:block;}

}