:root {
  --light-gray: #f3f3f3;
  --main-color: #1A3D33;
  --dark-black: #262626;
  --text-color: #202020;
  --dark-gray: #768384;
  --gray-color: #b2bdbe;
  --border-color: #dfdfdf;
  --main-gradation: linear-gradient(to right, #F2A726, #E9365E);
}

/* Layout */
#container {
  flex: 1;
  width: 100%;
  position: relative;
  padding: 0 2rem;
  box-sizing: border-box;
  padding: 9rem 0 0 0;
  background: #fff;
  box-sizing: border-box;
}
.con_inner {
  position: relative;
  width: 100%;
  max-width: 1332px;
  padding: 0 16px;
  height: 100%;
  margin: auto;
  box-sizing: border-box;
}
.inner {
  position: relative;
  width: 100%;
  max-width: 1282px;
  height: 100%;
  padding: 0 16px;
  margin: auto;
  box-sizing: border-box;
}
.inner1200 {
  position: relative;
  width: 100%;
  max-width: 1232px;
  height: 100%;
  padding: 0 16px;
  margin: auto;
  box-sizing: border-box;
}
.section_padding { 
  padding: 7rem 16px; 
  box-sizing: border-box;
}

#skipNav {
  position: relative;
  z-index: 9999;
}

#skipNav a {
  position: absolute;
  top: -200px;
  left: 0;
  width: 200px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  border: none;
  background-color: var(--main-color);
}

#skipNav a:focus,
#skipNav a:active {
  top: 0px;
  outline: none;
}

#header {
  width: 100%;
  margin-bottom: 100px;
  position: relative;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  height: 100px;
  z-index: 99;
  background: #000;
  transition: all .3s ease-in;
}

.header_wrap {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  margin: auto;
  box-sizing: border-box;
}

.nav_menu ul {
  display: flex;
  align-items: center;
  column-gap: 6.2rem;
}
.nav_menu ul li a {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.header_wrap .tel_box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding-right: 2.2rem;
}
.header_wrap .tel_box span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 25px;
  font-size: 16px;
  font-weight: 700;
  color: #060A01;
  background: #fff;
  border-radius: 14px;
}
.header_wrap .tel_box a {
  font-family: 'Recipekorea';
  font-size: 22px;
  font-weight: 500;
  color: #6EE1C1;
}
.header_wrap .tel_box .delivery_img {
  position: absolute;
  top: 73px;
}



#header .menu_btn {
  position: absolute;
  top: 50%;
  right: 16px;
  display: none;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 11;
  transform: translateY(-50%);
}


#header .menu_btn a {
  display: block;
  height: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.ham_nav {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  width: 100%;
  height: 100vh;
  background: var(--text-color);
  z-index: 10;
  transform: scaleX(0);
  opacity: 0;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in;
  overflow: hidden;
  opacity: 0;
}

#header.green { 
  border-bottom: 1px solid #D9D9D9;
  background: #0f2520; 
}
.ham_nav.open {
  background: var(--main-color);
  transform: scaleX(1);
  opacity: 1;
}

.mo_nav_wrap {
  width: 100%;
  margin-top: 100px;
  padding: 0 2rem;
  box-sizing: border-box;
}
.mo_nav_wrap .menu_list li { 
  text-align: center;
  margin-bottom: 30px; 
}
 

.mo_nav_wrap .menu_list li > a {
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

/* Footer */
.footer {
  width: 100%;
  padding: 5rem 0;
  background: #131414;
  box-sizing: border-box;
}
.footer_inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 1332px;
  padding: 0 16px;
  margin: auto;
  box-sizing: border-box;
}
.footer_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 6.5rem;
  width: 100%;
}
.footer_content .com_info { margin-left: -100px; }

.footer .com_info ul li {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 7px;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,.3);
  line-height: 1.4;
  margin-bottom: 6px;
}
.footer .com_info ul li span {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, .3);
  margin: 0 10px;
}
.copyright {
  font-size: 16px;
  font-weight: 400;
  margin-top: 16px;
  color: rgba(255, 255, 255, .3);
}
.baemin_wrap {
  max-width: 108px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.baemin_wrap p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, .3);
}




/* Paging */
.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
  margin-top: 5rem;
}

.paging li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
}


.paging .num.active {
  color: #fff;
  background: #F38F00;
}
.paging .num.active a { 
  font-weight: 700;
  color: #fff; 
}
.paging b li a { font-size: 18px; }
.paging b li a {
  font-weight: 700;
  color: #fff;
}

.paging li.prev_btn,
.paging li.next_btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.paging li.prev_btn i,
.paging li.next_btn i {
  font-size: 1rem;
  font-weight: 700;
  color: #202020;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
}

.paging li a {
  font-size: 1.6rem;
  font-weight: 500;
  color: #202020;
  padding: 1rem;
  box-sizing: border-box;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
}


/* 서브페이지 공통 스타일 */
.tit_container {
  position: relative;
  width: 100%;
  height: 355px;
  border-bottom: 8px solid #D9D9D9;
  box-sizing: border-box;
}
.tit_container::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/tit_green_bg.jpg) no-repeat;
  z-index: -1;
}
.tit_container .inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.tit_container h2 {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 52px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  margin-top: 80px;
  transform: translateY(100px);
  opacity: 0;
  overflow: hidden;
  animation: top_move .8s ease-in-out forwards;
}
.tit_container p {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: rgba(255,255,255,.54);
  transform: translateY(100px);
  opacity: 0;
  overflow: hidden;
  animation: top_move .8s .2s ease-in-out forwards;
}


@keyframes top_move {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


.top_btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  bottom: 70px;
  right: 16px;
  z-index: 1;
  cursor: pointer;
}
.top_btn.show { display: flex; }
.top_btn p {
  font-weight: 500;
  color: var(--main-color);
}


@media screen and (max-width: 1360px) {
  .footer_content { flex-wrap: wrap; }
}


@media screen and (max-width: 1022px) {
  #header .wrap .gnb,
  .ser_btn { display: none; }
  #header .wrap .menu_btn { display: block;}

  .footer_inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
}

@media screen and (max-width: 980px) {
  #header,
  .header_wrap { height: 80px; }
  .header_wrap .tel_box,
  .nav_menu { display: none; }
  #header .menu_btn { display: block; }

  .logo_wrap a {
    width: 90px;
    height: 90px;
  }
  .logo_wrap a img {
    width: 100%;
    object-fit: cover;
  }

  .footer_content { 
    flex-direction: column; 
    align-items: flex-start;
  }
  .footer_content .com_info { margin-left: 0; }
  .footer .com_info ul li { 
    flex-wrap: wrap; 
    gap: 6px;
  }
}


@media screen and (max-width: 480px) {
  .top_btn.show { display: none; }
  #header .wrap { height: 80px; }
  .tit_container { margin-top: 80px; }
  #header .wrap .logo { margin: auto; }
  .footer .com_info ul li span { margin: 0 5px; }
  .footer .com_info ul li,
  .baemin_wrap p { font-size: 15px; }

  .tit_container h2 { font-size: 48px; margin-top: 0; }
}

@media screen and (max-width: 320px) {
  .footer .center_info .info_wrap {
    flex-direction: column;
    gap: 8px;
  }
  .footer .center_info ul li { justify-content: center; }
  .footer .center_info ul li::after { display: none; }
}