* {font-family: 'Pretendard'; color: #222;}

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.5;
  word-break: keep-all;
}

img {width: 100%;}

.swiper-pagination {display: flex; width: fit-content !important; bottom: 20px !important; right: 20px !important; color: #fff; left: auto !important; padding: 3px 20px; background-color: rgb(157 157 157 / 27%); border-radius: 50px; gap: 5px;}
.swiper-pagination span {color: #fff;}
.swiper-pagination-current {font-weight: bold;}

/* 공통 css */

.pd {padding: 0 20px;}
.pd2 {padding: 20px;}
.pd3 {padding: 60px 20px 90px 20px;}
.pd4 {padding: 60px 20px 20px 20px;}
.pd-tb {padding: 60px 0 80px 0;}
.pd-bt {padding-bottom: 80px;}
.pd-t {padding-top: 60px;}

.mt-1 {margin-top: 60px;}
.mt-3 {margin-top: 80px;}
.mt-2 {margin-top: 100px;}
.de-pd {padding-left: 20px; margin: 40px 0;}
.de-pd2 {padding: 0 20px; margin: 40px 0;}
.de-pd3 {padding: 0 20px !important; margin: 30px 0;}
.price {font-weight: bold !important; color: #222 !important;}
.bx-shadow {border-radius: 8px; overflow: hidden; box-shadow: 0 0 13px rgba(155, 155, 155, 18%);}
.btn-wrap {background-color: #fff; padding: 10px 20px; position: fixed; bottom: 0; left: 0; width: 100%;}
.btn-wrap2 {display: flex; flex-direction: column;}
.btn-fixed {position: fixed; width: 100%; left: 0; bottom: 0; background-color: #fff; padding: 10px 20px; z-index: 10;}

input {width: 100%; height: 50px; border: 1px solid #ddd !important; border-radius: 5px; font-size: 15px;}
input::placeholder {color: #aaa; font-weight: 300;}

/* 버튼 css */
button {height: 50px; border-radius: 5px; font-size: 16px; font-weight: 400;}
button.sm {height: 45px; font-size: 14px;}
button.col1 {width: 100%; background-color: #fb8500; color: #fff;}
button.col2 {width: 100%; background-color: #eee; color: #666;}
button.line1 {width: 100%; border: 1px solid #eee; color: #717171;}
button.line2 {width: 100%; border: 1px solid #fb8500; color: #fb8500;}
.btn-two {display: flex; gap: 10px;}


/* 메인 콘텐츠 */
.main {background-color: #F5F5F8;}
.banner {width: 100%;}
/* .banner img {object-fit: contain;} */
.main-tp {display: flex; flex-direction: column; gap: 30px; padding-bottom: 45px;}
.de-tit {font-size: 20px; font-weight: 600; margin-bottom: 15px; position: relative;}
.de-tit span {font-weight: 700; color: #fb8500; display: inline-block;}
.de-tit span.more {font-size: 12px; color: #777; font-weight: 400; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.re-con {background-color: #fff; border-radius: 8px; padding: 20px 15px;}
.re-con ul {display: flex; flex-direction: column; gap: 15px;}
.re-con ul li {display: flex; align-items: center; justify-content: space-between;}
.re-con ul li div {display: flex; align-items: center; gap: 5px;}
.re-con ul li div em {width: 32px;}
.re-con ul li div p {font-size: 16px; font-weight: 600;}
.re-con ul li span {font-size: 16px; font-weight: 600;}

.te-kcal-con {display: flex; gap: 10px;}
.te-kcal-con > div {width: 50%; padding: 20px 15px; display: flex; flex-direction: column; align-items: center; gap: 12px; background-color: #fff;}
.te-kcal-con > div .tag {padding: 4px 15px; border-radius: 50px; background-color: #D92945; color: #fff; font-size: 13px;}
.te-kcal-con > div .tag.mid {background-color: #051978;}
.te-kcal-con > div p {text-align: center; font-size: 18px; font-weight: bold;}
.te-kcal-con > div p span {font-size: 12px; color: #555;}

.my-kcal-con {padding: 20px 15px; background-color: #fff;}
.my-kcal-con ul li {display: flex; align-items: center; justify-content: space-between;}
.my-kcal-con ul li:first-child {padding-bottom: 15px; border-bottom: 1px solid #eee;}
.my-kcal-con ul li:last-child {padding-top: 15px;}
.my-kcal-con ul li > p {font-size: 16px; font-weight: 600;}
.my-kcal-con ul li div {display: flex; flex-direction: column; align-items: flex-end;}
.my-kcal-con ul li div p {font-size: 18px; font-weight: bold; display: flex; align-items: flex-end; gap: 3px;}
.my-kcal-con ul li div p span {font-size: 12px; color: #555;}
.my-kcal-con ul li div em {font-size: 12px; color: #888;}

.food {padding-left: 20px;}
.food-con {padding: 20px 10px; border-radius: 8px; box-shadow: 0 0 13px rgba(155, 155, 155, 18%); display: flex; flex-direction: column; align-items: center;}
.food-con span {font-size: 13px; color: #888; margin-bottom: 5px;}
.food-con em {width: 51px; margin-bottom: 5px;}
.food-con h4 p {font-size: 16px; font-weight: 500;}
.food-con h4 p b {font-weight: 900;}
.food-con h4 span {font-size: 12px; color: #888;}

.main-bt {background-color: #fff; padding: 45px 20px; display: flex; flex-direction: column; gap: 30px;}
.center-con {display: flex; align-items: center; gap: 10px;}
.center-con .center-img {width: 110px; height: 110px; border-radius: 5px; overflow: hidden;flex-shrink: 0;}
.center-txt {display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: calc(100% - 125px);}
.center-info {display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;}
.center-info em {font-size: 12px; color: #fb8500; }
.center-info p {font-size: 16px; font-weight: 500;}
.center-info div {display: flex; align-items: center; gap: 3px; width: 100%;}
.center-info div em {width: 11px; height: 13px; flex-shrink: 0;}
.center-info div span {font-size: 14px; color: #666; text-overflow: ellipsis; overflow: hidden; text-wrap: nowrap; width: calc(100% - 14px);}
.re-num ul {display: flex; align-items: center; gap: 12px;}
.re-num ul li {display: flex; align-items: center; gap: 3px;}
.re-num ul li p {font-size: 12px; color: #888;}
.re-num ul li span {font-weight: 400; font-size: 14px; color: #333;}
.re-num ul li em {width: 14px;}

.pro-con .pro-img {border-radius: 8px; overflow: hidden; margin-bottom: 12px; height: 150px;}
.pro-con .pro-txt {display: flex; flex-direction: column; align-items: flex-start;}
.pro-con .pro-txt > ul {display: flex; align-items: center;}
.pro-con .pro-txt > ul li {padding: 0 5px; font-size: 12px; color: #888; position: relative;}
.pro-con .pro-txt > ul li:first-child {padding-left: 0; color: #fb8500;}
.pro-con .pro-txt > ul li:first-child::after {content: ""; display: block; width: 2px; height: 2px; border-radius: 50%; background: #d9d9d9; position: absolute; top: 50%; right: -1px; transform: translateY(-50%);}
.pro-con .pro-txt > p {font-size: 16px; text-overflow: ellipsis; overflow: hidden; text-wrap: nowrap; width: 100%; text-align: left;}
.pro-con .pro-txt > span {font-size: 15px; font-weight: 700; margin-top: 4px;}


/* 푸터 */
footer {padding: 35px 20px; background: #f9f9f9;}
footer .foot-top { padding-bottom: 10px;}
footer .foot-logo {width: 55px;}
.foot-center span {font-size: 12px; color: #565656; font-weight: 600;}
.foot-center p {font-size: 18px; color: #333; font-weight: bolder;}
.foot-bt {padding-top: 15px;}
.foot-bt > p {font-size: 12px; color: #999; font-weight: 600; margin-bottom: 8px;}
.foot-bt ul {display: flex; flex-direction: column; gap: 3px;}
.foot-bt.foot-info ul {flex-direction: row; flex-wrap: wrap; column-gap: 15px;}
.foot-bt ul li {display: flex; gap: 15px;}
.foot-bt.foot-info ul li {gap: 8px;}
.foot-bt ul li span {color: #979797; font-size: 12px;}
.foot-bt.foot-info ul li span {color: #979797; font-size: 12px; width: fit-content;}
.foot-bt ul li p { font-size: 12px; color: #666;}