/* common */
/*
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Titillium Web', sans-serif;
*/

@charset "utf-8";

#sVisu {width:100%; height:530px;  margin-top:70px;  background-repeat:no-repeat;  background-position:center 0px; background-size: cover; position:relative; z-index:0}
#sVisu .stxt { position:absolute; top:40%;width:100%; z-index:10;  padding:0 0px 0 0%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; line-height:1.4; 
*text-shadow:2px 2px 4px rgba(0,0,0,0.75);
transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
}

#sVisu .stxt dl {margin-top:4%; text-align:center}
#sVisu .stxt dl dt {font-size:1.2rem; color:#fff; padding:0 15px;  line-height:1.2; letter-spacing:0.5em; font-family: 'Presentation'; font-weight:200;}
#sVisu .stxt dl dd {font-size:3.0rem; margin-top:10px;  color:#fff;   line-height:1.4; letter-spacing:-0.02em;   font-family: 'Aritaburi'; font-weight:500; *max-width:610px}


.sVisu1 {background-image:url(/img/sub/subVisu01.jpg)}
.sVisu2 {background-image:url(/img/sub/subVisu02.jpg)}
.sVisu3 {background-image:url(/img/sub/subVisu03.jpg)}
.sVisu4 {background-image:url(/img/sub/subVisu04.jpg)}
.sVisu5 {background-image:url(/img/sub/subVisu05.jpg)}
.sVisu6 {background-image:url(/img/sub/subVisu06.jpg)}


@media screen and (max-width:1280px){
    #sVisu {width:100%; height:350px;}
    #sVisu .stxt { top:40%;}
    #sVisu .stxt dl dt {font-size:1.0rem; color:#fff; padding:0 15px;  }
    #sVisu .stxt dl dd {font-size:2.4rem; margin-top:10px;  }
}

@media screen and (max-width:768px){
	#sVisu {height:200px;}
	#sVisu .stxt { top:42%;}
    #sVisu .stxt dl dt {font-size:1.0rem; color:#fff; letter-spacing:0.1em; padding:0 15px;  }
    #sVisu .stxt dl dd {font-size:2.0rem; margin-top:10px; line-height:1.2; }
}

@media screen and (max-width:480px){  
    #sVisu .stxt { top:45%;}
    #sVisu .stxt dl dd {font-size:1.4rem; margin-top:10px; line-height:1.2; }
}

/* sub_top */
.sub_top {position:relative;width:100%; margin:-60px auto 0; z-index:10; font-family: 'Noto Sans KR', sans-serif; }
.sub_top .sub_top_in {width:100%; max-width:1400px; margin:0 auto; position:relative; z-index:50; background:#fff; box-sizing:border-box; border-bottom:1px solid #e5e5e5}
.snb:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.snb>div { float:left; position:relative;}
.snb .home>a {display:block; width:60px; height:60px; text-align:center; font-size:0; background:#2b916c url("/img/sub/ico_home.png") no-repeat center;}
.snb>.depth1_area, .snb>.depth2_area { width:280px;}
.snb>.depth1_area, .snb>.depth2_area  a {color:#2b916c;}
.snb .open_depth { display:block; position:relative; height:60px; line-height: 60px; padding:0 20px; border-right:1px solid #e5e5e5; color:#212121; font-size:18px; letter-spacing:-1px; white-space:nowrap;}
.snb .open_depth:after { content:"\e874"; display:inline-block; position:absolute; top:0; right:14px; font-family:'Linearicons-Free'; font-weight:600; font-size:18px; line-height:60px; color:#000;}
.snb .open_depth.on:after { content:"\e873"; top:0;}
.snb .smenu { display:none; position:absolute; top:60px; left:0; width:100%;}
.snb .smenu>li>a { display:block; padding:12px 5px 13px 20px; border:1px solid #ccc; border-top:none; background-color:#f4f4f4; color:#555; font-size:16px;}
.snb .smenu>li>a:hover { background-color:#fff; color:#222;}

@media screen and (max-width:1399px){
	.sub_top {margin-top:0;}
	.snb .home>a { width:50px; height:50px; }
	.snb .open_depth {height:50px; line-height:50px; font-size:1em;}
	.snb .open_depth:after {line-height:50px; font-size:16px;}
	.snb .smenu {top:50px;}
}

@media screen and (max-width:767px){
	.sub_top { height:51px;}
	.snb { padding-left:50px;}
	.snb .home { position:absolute; top:0; left:0; z-index:10;}
	.snb .home>a { width:50px; height:50px; }
	.snb .home>a:before { font-size:13px; line-height:13px;}
	.snb>.depth1_area, .snb>.depth2_area { width:50%;}
	.snb .open_depth { height:50px; line-height: 50px; padding:0px 12px 0px 12px; font-size:1em; overflow:hidden; text-overflow:ellipsis; }
	.snb .open_depth:after { right:6px; font-size:9px; line-height:50px;}
	.snb .open_depth.on:after {}
	.snb .smenu { top:50px;}
	.snb .smenu>li>a { padding:15px 5px 15px 7px; font-size:15px;}

}


#subContent {width:100%; margin:60px 0 90px; word-break: keep-all !important; overflow:hidden}
#subContent2{width:100%; padding:60px 0 90px; background:#fff3e6; word-break: keep-all !important; overflow:hidden}
#subTitle {font-size:2.5rem; color:#212121; letter-spacing:-0.02em; font-weight:500; text-align:center; margin-bottom:50px; font-family: 'DWImpactamin';}
.s-inner {width:100%; max-width:1400px; margin:0px auto 0px; overflow:hidden}
.s-inner13 {width:100%; max-width:1300px; margin:0px auto 0px; overflow:hidden}
.s-inner12 {width:100%; max-width:1200px; margin:0px auto 0px; overflow:hidden}
.s-inner90 {width:100%; max-width:900px; margin:0px auto 0px; overflow:hidden}
.s-inner10 {width:100%; max-width:900px; margin:0px auto 0px; overflow:hidden}
.s-inner70 {width:100%; max-width:700px; margin:0px auto 0px; overflow:hidden}
.sub_ti {padding-bottom: 55px; line-height: 1.4; font-weight: 200;  word-break:keep-all; text-align: center; font-size: 25px; color: #555; letter-spacing:-1px}
.sub_ti b {font-size: 30px; font-weight: 600; color: #c61821;}

@media screen and (max-width:1399px){
	#subContent {margin:7% 0 8%}
	#subTitle {margin-bottom:6%}
}

@media screen and (max-width:767px){
	#subContent {margin:7% 0 10%}
	#subContent2{width:100%; padding:7% 0 10%;}
	#subTitle {font-size:25px; letter-spacing:-1px;  margin-bottom:4%}
	.sub_ti {font-size: 16px; padding:0 5% 5%}
    .sub_ti b {font-size: 18px;}
}



/* lnb */
#lnb { text-align:center; border-bottom:1px solid #e1e1e1;}
#lnb ul { display:inline-block;}
#lnb ul:after { content:""; display:block; clear:both; }
#lnb ul li { float:left; text-align:center; margin-right:90px;}
#lnb ul li:last-child { margin:0;}
#lnb ul li a { display:block; padding:30px 0; position:relative;}
#lnb ul li.on a { color:#c61821; }
#lnb ul li.on a:after { content:""; width:100%; height:1px; background:#c61821; display:block; position:absolute; left:0; bottom:-1px;}
#lnb ul li .depth3 {display: none;}


/* ?섏씠吏€ ?€?댄? */
.pageTit { text-align:center; margin-bottom:78px;}
.pageTit:after { content:""; width:100px; height:3px; background:#c61821; display:block; margin:87px auto 0;}
.pageTit h3 { font-size:50px; color:#333; font-weight:700; font-family: 'Kanit', sans-serif; background:url("/img/sub/tit_bg.png") no-repeat center top; padding-top:53px; text-transform:uppercase;}
.pageTit.products {margin-bottom: 0;}
.pageTit.products::after {background: transparent;}


/* ?꾩떆?쎈찓??*/
.sub1-item {margin-top: 6%;}
.sub1-item ul {margin-top: 0%; display: flex;  flex-wrap: nowrap;  list-style: none;   padding: 0; align-items: center; }
.sub1-img { flex: 0 0 52%; margin-right:3%; max-width: 52%;}
.sub1-img img { width: 100%; display: block; border-radius: 20px;}

/* ?ㅻⅨ履??띿뒪???곸뿭 (40%) */
.sub1-text {  flex: 0 0 40%;    max-width: 40%; padding: 20px;   box-sizing: border-box; display: flex; align-items: center; /* ?띿뒪???몃줈 以묒븰 ?뺣젹 */}
.sub1-text .Txt h3 {font-size: 2.5rem;  letter-spacing:-0.05em; margin-bottom:20px; font-weight:600; display: block;}
.sub1-text .Txt span {font-size: 1.5rem; margin:10px 0 30px 4px;  font-weight:500;  color: #fc5709;   font-family: 'GMarketSans'; display: block; }
.sub1-text .Txt p {font-size: 1.2rem; line-height: 1.4; letter-spacing:-0.05em; color: #666; font-weight:400; }
.sub1-text .Price h4 strong{font-size: 2.0rem;   color: #000; font-weight:700;  line-height: 1.1; font-family: 'GMarketSans';}
.sub1-text .Price h4 { font-size: 1.1rem; margin-top: 8%; line-height: 1.6; letter-spacing:-0.05em; color: #666; font-weight:400; }

.sub1-pop {margin: 6% auto 0; width:100%; max-width:1118px; text-align:center}
.sub1-pop img  {width:90%; }

@media screen and (max-width:1024px) {
   .sub1-item {margin: 3% auto 0; width:90%; }
   .sub1-text {  flex: 0 0 45%;    max-width: 45%; padding: 20px 0 20px 20px;}
   .sub1-text .Txt h3 {font-size: 2.0rem;  margin-bottom:15px;}
   .sub1-text .Txt span {font-size: 1.2rem; margin:0px 0 15px 4px;}
   .sub1-text .Txt p {font-size: 1.0rem;}
   .sub1-text .Price h4 strong{font-size: 1.7rem;}
   .sub1-text .Price h4 { font-size: 1.1rem; margin-top: 6%; }
}

@media screen and (max-width:768px) {
   .sub1-item {margin: 3% auto 0; width:90%; }
   .sub1-item ul {margin-top: 0%; display: block;  flex-wrap: nowrap;  list-style: none;   padding: 0; align-items: center; }
   .sub1-img {flex: 0 0 100%;    max-width: 100%;  margin:0;  display: block;}
   .sub1-text {flex: 0 0 100%;    max-width: 100%;  margin:0;  display: block; padding: 30px 0 10px 10px;}  
   .sub1-text .Txt h3 {font-size: 1.6rem; }
   .sub1-text .Txt span {font-size: 1.2rem; margin:0px 0 15px 4px; }
   .sub1-text .Txt p {font-size: 1.0rem;}
   .sub1-text .Price h4 strong{font-size: 1.5rem;}
   .sub1-text .Price h4 { font-size: 1.0rem; margin-top: 6%; }
}

@media screen and (max-width:540px) {
}

/*
.sub_step {display: flex; align-items: flex-start;  justify-content: center;  gap: 6px;  margin: 0% 0 0;}
.sub_step dt {font-size: 1.0rem; width: 40px; height: 40px; flex-shrink: 0; line-height: 40px; padding-top:1px; border-radius: 50%; background: #d14807;  color: #fff; font-weight: 700; display: flex; align-items: flex-start; justify-content: center;  font-family: 'GMarketSans'; }
.sub_step dd{font-size: 1.6rem; font-weight: 400; color: #222; line-height:1.4; letter-spacing: -0.05em;}
.sub_step .cham{font-size: 1.2rem; font-weight: 400; color: #222; line-height:1.4; letter-spacing: -0.05em;}


@media screen and (max-width:768px) {
 .sub_step dt {margin-top:-20px; width: 35px; height: 35px; line-height: 35px; }
 .sub_step dd{margin-top:-20px;font-size: 1.2rem; font-weight: 400; color: #222; line-height:1.3; letter-spacing: -0.07em;}
 .sub_step .cham{font-size: 1.1rem; font-weight: 400; color: #222; line-height:1.4; letter-spacing: -0.05em;}

}

*/

.sub3-lunch {margin: 6% auto 0; width:90%; text-align:center}
.sub3-lunch p{margin: 20px auto 0;}
.sub3-lunch img  {width:100%; *border-radius: 20px; }



/*자주하는 질문*/
.sub_Faq {width: 100%; background:#fff3e6; padding: 5% 0; margin: 0 auto; overflow:hidden}
}



* { box-sizing: border-box;}


.menu-wrap { background: #f5823c; padding: 40px 20px;border-radius: 20px; max-width: 900px;margin: 30px auto;}

.title h1 { color: #fff; font-size: 36px; margin-bottom: 30px; letter-spacing:-2px; margin-left:20px}

.title span {
  color: #ffe600;
  font-weight: bold;
}

.card-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;     /* 줄바꿈 허용 */
  justify-content: center;
}

.card {
flex: 0 0 calc((100% - 40px) / 3); 
  box-sizing: border-box; 
  background: #fff;
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

/* 鍮?移대뱶 */
.card.empty .card-body {
  height: 250px;
  background: #e8b18c;
  border-radius: 15px;
}

/* 移대뱶 ?ㅻ뜑 */
.card-header {
  text-align: center;
  margin-bottom: 10px;
}

.card-header h2 {
  margin: 10px 0 0 0;
  font-size: 1.7em;   font-family: 'GMarketSans'; font-weight:700;  letter-spacing:-1px;
}

.card-header p {
  margin: 5px 0 0;
  color: #666;
}

.menu-title {
  text-align: center;
  font-weight: bold;
  padding: 10px;
  border-radius: 10px; 
  margin-bottom: 10px; 
}

.menu-title.yellow {
  background: #ffd24d;
}

.card-body {
  background: #eee;
  border-radius: 1em;  font-size: 1.1em; letter-spacing:0px; line-height:1.1;
  padding: 15px;

  /* --- 자동 줄바꿈 핵심 속성 --- */
  word-break: keep-all;       /* 한글 단어 단위로 예쁘게 줄바꿈 (추천) */
  overflow-wrap: break-word;  /* 너무 긴 단어는 강제로 줄바꿈 */
  white-space: normal;        /* 기본값: 너비를 넘어가면 자동으로 줄바꿈 */
}

.card-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.card-body li {
  margin: 5px 0;
}


.point {
  color: #ff5a00;
  font-weight: bold;
}


.salad-title {margin-top:2%;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.salad-title.blue {
  background: #57a9ef; line-height:1.3 !important;
  color:#fff
}



@media (max-width: 768px) {
 .menu-wrap { 
    padding: 30px 10px; /* 외부 여백 살짝 조절 */
  }

  .card-list {
    gap: 10px; /* 카드 사이 간격을 20px에서 10px로 줄임 */
  }

  .card { 
    /* 전체 100%에서 간격(10px)을 뺀 나머지를 2로 나눕니다. 
       기존 40px로 되어 있던 부분을 10px로 수정했습니다.
    */
    flex: 0 0 calc((100% - 10px) / 2); 
    border-radius: 10px; 
    padding: 8px; 
  }
  .title h1 { color: #fff; font-size: 28px; line-height:1.5; text-align:center; margin-left:0px}
  .card-header h2 {margin: 10px 0 0 0; font-size: 1.4em; }
  .card-body { font-size: 0.9em; line-height:1.1; padding: 15px 0px;}
}