:root {
  --main-color: #004730;
  --sub-color: #f3c400;
  --ivory-color: #ffeece;
  --bg-color: #F9F9F9;
  --txt-color: #333333;
  --sub-txt-color: #999999;
  --border-color: #D9D9D9;
  --gradation-color: #56825b;
}
* {
  box-sizing: border-box;
  /*
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  */
  -webkit-tap-highlight-color : transparent;
}
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-thumb {
  height: 20%;
  background: var(--sub-color);
  border-radius: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(33, 122, 244, .1);
}
html {
  scroll-behavior : smooth;
}
body {
  font-family: "Pretendard", "MaruBuri", "Open Sans";
  font-size: 100%;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: auto;
}
/*공통*/
.of-hidden {
  overflow: hidden;
}
.p-0 {
  padding: 0 !important;
}
.pt-150 {
  padding-top: 150px !important;
}
.pb-150 {
  padding-bottom: 150px;
}
.pl-60 {
  padding-left: 60px;
}
.mb-100 {
  margin-bottom: 100px;
}
.wrap {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
}
.wrap-sm {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.wrap-mc {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.bg-wrap {
  width: 100%;
  padding: 100px 0;
  background-color: var(--bg-color);
  position: relative;
}
.bg-wrap.yellow {
  background-color: var(--ivory-color);
}
.bg-wrap.green {
  background-color: var(--main-color);
}
.bg-wrap.pt-0 {
  padding-top: 0;
}
.gradation-wrap {
  width: 100%;
  padding: 100px 0;
  background: rgb(0,71,48);
  background: linear-gradient(180deg, rgba(0,71,48,1) 20%, rgba(86,130,91,1) 40%, rgba(255,238,206,1) 60%);
  position: relative;
}
/*floating*/
.floating {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.floating > a {
  cursor: pointer;
  padding: 12px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
  transition: .2s;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}
.floating > a:hover {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  transition: .2s;
  border: 1px solid transparent;
}
.floating > a > img {
  height: 25px;
}
.floating > a.floating-kakao > span {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url('../images/icons/kakaotalk_bc.png');
  background-size: 22px auto;
  background-repeat: no-repeat;
}
.floating > a.floating-kakao:hover > span {
  background-image: url('../images/icons/kakaotalk_wc.png');
  transition: .2s;
}
.floating > a.floating-call > span {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url('../images/icons/call_bc.png');
  background-size: 22px auto;
  background-repeat: no-repeat;
}
.floating > a.floating-call:hover > span {
  background-image: url('../images/icons/call_wc.png');
  transition: .2s;
}
.floating > a.floating-contact > span {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url('../images/icons/contact_bc.png');
  background-size: 22px auto;
  background-repeat: no-repeat;
}
.floating > a.floating-contact:hover > span {
  background-image: url('../images/icons/contact_wc.png');
  transition: .2s;
}
.floating > a.floating-top > span {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url('../images/icons/top_bc.png');
  background-size: 22px auto;
  background-repeat: no-repeat;
}
.floating > a.floating-top:hover > span {
  background-image: url('../images/icons/top_wc.png');
  transition: .2s;
}
/*header*/
.ham {
  display: none;
}
#ham_btn {
  display: none;
}
#ham_btn + label {
  position: relative;
  display: block;
  width: 32px;
  height: 20px;
  cursor: pointer;
  z-index: 10;
}
#ham_btn + label > span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--main-color);
  border-radius: 5px;
  transition: all 300ms;
}
#ham_btn:checked + label > span:nth-child(1) {
  top: 50%;
  transform: translate(0, -50%);
  transform: rotate(45deg);
}
#ham_btn + label > span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
#ham_btn:checked + label > span:nth-child(2) {
  opacity: 0;
}
#ham_btn + label > span:nth-child(3) {
  bottom: 0;
}
#ham_btn:checked + label > span:nth-child(3) {
  top: 50%;
  transform: translate(0, -50%);
  transform: rotate(-45deg);
}

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 100;
  transition: .3s;
  background-color: transparent;
}
.header-wrap.header-active {
  transform: translateY(-100%);
}
.header-wrap::after {
  content: "";
  height: 1px;
  width: 100%;
  border-bottom: 1px solid var(--sub-color);
  position: absolute;
  top: 195px;
  left: 0;
  z-index: 1;
  transition: .01s;
  opacity: 0;
}
.header-wrap:has(.gnb:hover)::after {
  opacity: 1;
  transition: 1s;
}
.header-wrap .mobile-logo {
  display: none;
}
.gnb {

  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 80px;
  padding: 80px 0 0 0;
  transition: .3s;
  position: relative;
  overflow: hidden;
}
.gnb.bg-on {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 30px 0 30px;
}
.gnb > li {
  position: relative;
}
.gnb > li > a {
  position: relative;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  display: inline-block;
}
.gnb > li > a.gnb-on {
  color: var(--sub-color);
}
.gnb:hover > li > a {
  color: var(--txt-color);
}
.gnb:hover > li:hover > a {
  color: var(--sub-color);
}
.gnb:hover > li > a:hover:before{
  width : 100%;
}
.gnb:hover > li > a.gnb-on:before {
  width: 100%;
}
.gnb:hover {
  column-gap: 100px;
  padding: 150px 0 170px 0;
  transition: .3s;
  background-color: rgba(255, 255, 255, 1);
}
.gnb:hover > li > .lnb {
  transition: .3s;
}
.gnb:hover .header-logo {
  top: 30px;
  transition: .3s;
}
.gnb .header-logo {
  width: 100px;
  height: 100px;
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  transition: .3s;
  z-index: 3;
}
.gnb .header-logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gnb > li > .lnb {
  position: absolute;
  margin-top: 20px;
  padding-top: 60px;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  row-gap: 25px;
  transition: .3s;
}
.gnb > li > .lnb > li > a {

  color: var(--txt-color);;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}
.gnb > li > .lnb > li > a:hover {
  color: var(--main-color);
  color: #999;
}
.header-wrap:has(> .gnb:hover) {
  transition: .3s;
  background-color: #fff;
}

/*footer*/
.footer-wrap {
  width: 100%;
}
.footer-wrap .logo-box {
  padding: 30px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.footer-wrap .logo-box .wrap-sm {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-wrap .logo-box .wrap-sm > a {
  display: inline-block;
}
.footer-wrap .logo-box .wrap-sm > a img {
  width: 200px;
}
.footer-wrap .logo-box .wrap-sm .social-box {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
.footer-wrap .logo-box .wrap-sm .social-box > a {
  display: inline-block;
}
.footer-wrap .logo-box .wrap-sm .social-box > a img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.fnb-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 40px;
  padding: 50px 0 130px;
  transition: .3s;
}
.fnb-box .info-box {
  width: 30%;
  display: flex;
  flex-direction: column;
  row-gap: 35px;
}
.fnb-box .info {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px 40px;
}
.fnb-box .info > div {
  display: flex;
  align-items: center;
  column-gap: 10px;

  font-weight: 500;
}
.fnb-box .info > div > span {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.fnb-box .info > div > span:first-child {
  color: #555;
}
.fnb-box .info > div > span:last-child {
  color: #999;
}
.fnb-box .info-box .copy {
  font-size: 14px;
  font-weight: 500;
  color: #555;
}
.fnb-box .info-box .copy b {
  font-weight: 700;
}

.fnb {

  width: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.fnb > li {
  text-align: center;
}
.fnb > li > a {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  color: var(--txt-color);
  padding-bottom: 30px;
}
.fnb > li > a:hover {
  color: var(--sub-color);
}
.fnb > li > .lnb {
  display: flex;
  flex-direction: column;
  row-gap: 25px;
}
.fnb > li > .lnb > li a {
  font-weight: 400;
  color: #777;
}
.fnb > li > .lnb > li a:hover {
  color: #999;
}
.contact-area {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--txt-color);;
  z-index: 4;
}
.contact-area > button {
  width: 100%;
  border-bottom: 1px solid #444;
  padding: 12px 0;
}
.contact-area > button img {
  height: 10px;
}
.contact-area .contact-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.contact-area .contact-input .call {
  display: flex;
  align-items: center;
}
.contact-area .contact-input .call span {

  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.contact-area .contact-input .call span:first-child::after {
  content: "";
  height: 16px;
  border-right: 1px solid #fff;
  margin: 0 15px;
}
.contact-area .contact-input .call span:last-child {
  margin-left: 20px;
}
.contact-area .contact-input .call span > img {
  width: 22px;
  height: 22px;
  margin-right: 5px;
}
.contact-area .contact-input .input {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.contact-area .contact-input .input > input[type="text"] {
  width: 200px;
  padding: 16px;
  border-radius: 3px;
  font-size: 14px;
  border: none;
}
.contact-area .contact-input .input > button {
  width: 200px;
  background-color: var(--main-color);
  color: #fff;
  font-size: 14px;
  border-radius: 3px;
  padding: 16px;
  white-space: nowrap;
}
.contact-area .contact-input .input > button span{
    font-size: 14px;
    color:#fff;
}

.contact-area .contact-input .input > button:hover {
  opacity: 0.8;
}
.contact-area .contact-input .input > button img{
    display: none;
    object-fit: cover;
    max-width: 20px;
}

/*메인*/
.main-banner-area {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.main-banner-area .banner-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 35px;
}
.main-banner-area .banner-txt .txt-f {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -2px;
  color: #fff;
}
.main-banner-area .banner-txt .txt-f b {
  font-weight: 700;
  font-size: 36px;
}
.main-banner-area .banner-txt .logo-nt {
  width: 200px;
}
.main-banner-area .banner-txt .logo-ot {
  width: 250px;
}
.banner-slider .swiper-slide {
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.banner-slider .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.banner-slider .swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-pagination {
  position: absolute;
  top: inherit !important;
  left: 50% !important;
  bottom: 80px !important;
  transform: translateX(-50%) !important;
  z-index: 2;
}
.swiper-pagination-bullet-active {
  background-color: var(--sub-color) !important;
}
.swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 0 10px !important;
  background-color: transparent;
  border: 2px solid var(--sub-color);
  opacity: 1;
}


.swiper-progress-bar {
  position: relative;
  width: 100%;
  display: block;
  z-index: 1;
  height: 3px;
  .slide_progress-bar {
    width: 100%;
    position: absolute;
    height: 3px;
    background: rgba(0, 0, 0, 0.3);
    width: auto;
    clear: both;
    opacity: 0;
    left: 0;
    right: 0;
    bottom: 3px;
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      background: var(--sub-color);
      height: 100%;
      width: 0;
      content: "";
      transition: 0.1s width linear;
    }
  }
  &.active {
    .slide_progress-bar {
      opacity: 1;
    }
  }
  &.animate {
    .slide_progress-bar {
      &:after {
        transition: width linear;
        transition-delay: unset;
        width: 100%;
        transition-duration: 3s;
      }
    }
  }
}

.fir-section {
  padding: 150px 0;
  background-image: url('../images/common/main_bg_1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}
.sec-section {
  padding: 150px 0;
  background-image: url('../images/common/fr_basic_img_1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  position: relative;
}
.sec-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.flex-box-40 {
  display: flex;
  align-items: center;
  column-gap: 40px;
}
.flex-box {
  display: flex;
  align-items: center;
  column-gap: 80px;
}
.flex-box > .text-box {
  flex: 1;
  color: #fff;
  position: relative;
  z-index: 1;
}
.flex-box > .text-box.text-bc {
  color: var(--txt-color);;
}
.flex-box > .text-box.align-right {
  text-align: right;
}
.flex-box > .text-box .tag {
  color: var(--sub-color);
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 20px;
}
.flex-box > .text-box .main-tit {
  font-size: 58px;
  line-height: 1.3;
  word-break: keep-all;
}
.flex-box > .text-box.align-right .main-tit::after {
  margin: 40px 0 40px auto;
}
.flex-box > .text-box .main-tit::after {
  content: "";
  display: block;
  margin: 40px 0;
  width: 80px;
  height: 1px;
  background-color: #fff;
}
.flex-box > .text-box.text-bc .main-tit::after {
  background-color: var(--txt-color);;
}
.flex-box > .text-box .main-tit span {
  display: inline-block;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.flex-box > .text-box .main-tit span::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 15px;
  z-index: -1;
  background-color: var(--sub-color);
}
.flex-box > .img-box {
  flex: 1;
  position: relative;
  z-index: 1;
}
.flex-box > .img-box > img {
  width: 100%;
  object-fit: contain;
}
.flex-box > .text-box .sub-tit {
  font-size: 20px;
  line-height: 1.3;
  font-family: 'MaruBuri';
  font-weight: 300;
  word-break: keep-all;
}
.text-box-ho {
  text-align: center;
  margin-bottom: 70px;
  color: var(--txt-color);;
}
.text-box-ho .tag {
  color: var(--main-color);
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 20px;
}
.text-box-ho .main-tit {
  font-size: 58px;
  line-height: 1.3;
  word-break: keep-all;
}
.text-box-ho .main-tit::after {
  content: "";
  display: block;
  margin: 40px auto;
  width: 80px;
  height: 1px;
  background-color: var(--txt-color);;
}
.text-box-ho .main-tit.divider-none::after {
  display: none;
}
.text-box-ho .main-tit span {
  display: inline-block;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.text-box-ho .main-tit span::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 15px;
  z-index: -1;
  background-color: var(--sub-color);
}
.text-box-ho .sub-tit {
  font-size: 20px;
  line-height: 1.3;
  font-family: 'MaruBuri';
  font-weight: 300;
  word-break: keep-all;
}

.fr-slider {
  width: 100%;
  margin-left: 170px;

  color: var(--txt-color);;
}
.fr-slider .swiper-slide .img-box {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 20px;
}
.fr-slider .swiper-slide .img-box::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.fr-slider .swiper-slide .img-box > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fr-slider .swiper-slide .area {
  background-color: var(--main-color);
  color: var(--sub-color);
  font-size: 16px;
  padding: 5px 20px;
  display: inline-block;
  border-radius: 50px;
  margin-bottom: 10px;
}
.fr-slider .swiper-slide .name {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.3;
}
.fr-slider .swiper-slide .address {
  font-size: 16px;
  line-height: 1.3;
}
.swiper-arrow-box {
  position: absolute;
  top: 50%;
  left: 70px;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.swiper-arrow-box > span {
  display: inline-block;
  cursor: pointer;
}
.swiper-arrow-box > span:hover {
  opacity: 0.6;
}
.swiper-arrow-box > span img {
  width: 40px;
}
.logo-bg {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 90%;
  right: 0;
  transform: translateY(-50%);
  background-image: url('../images/logo/logo_circle.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 150% 150%;
  z-index: 1;
  opacity: .1;
}
.chart-box {
  display: flex;
  background-color: var(--bg-color);
}
.chart-box .step {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.chart-box .step .item {
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: center;
  justify-content: center;
}
.chart-box .step .item .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.chart-box .step .item .img-box::before {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 0;
}
.chart-box .step .item .img-box > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chart-box .chart {
  width: 50%;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-box .chart > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chart-box .step .item > p {
  position: relative;
  z-index: 1;
}
.chart-box .step .item .num {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}
.chart-box .step .item .content {
  color: #fff;
  font-size: 20px;
  
  line-height: 1.3;
}
.video-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
  padding: 0 100px;
}
.video-box iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}
.video-box .expl-box {
  display: flex;
  align-items: flex-start;
  column-gap: 60px;
  color: var(--txt-color);;
}
.video-box .expl-box .tit {
  flex: 1;
  font-size: 48px;
  line-height: 1.3;
  word-break: keep-all;
}
.video-box .expl-box .tit span {
  display: inline-block;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.video-box .expl-box .tit span::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 15px;
  z-index: -1;
  background-color: var(--sub-color);
}
.video-box .expl-box .content {
  flex: 1;
  font-family: 'MaruBuri';
  font-weight: 300;
}
.video-box .expl-box .content p:first-child {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 30px;
}
.video-box .expl-box .content p:last-child {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 30px;
  font-weight: 500;
}

.main-menu-box .grid-tit {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
.main-menu-box .grid-tit .item {
  background-color: var(--sub-color);
  font-size: 68px;
  color: var(--txt-color);
  line-height: 1.3;
  letter-spacing: -2px;
  padding: 100px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 100px;
}
.main-menu-box .grid-tit .item b {
  font-weight: 800;
  color: var(--main-color);
}
.main-menu-box .grid-tit .item > div {
  text-align: center;
}
.main-menu-box .grid-tit .item .btn-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.main-menu-box .grid-tit .item .btn-area a {
  background-color: var(--main-color);
  font-family: 'MaruBuri';
  font-size: 16px;
  color: #fff;
  padding: 16px 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  border-radius: 50px;
  transition: .2s;
}
.main-menu-box .grid-tit .item .btn-area a:hover {
  opacity: .8;
  transition: .2s;
}
.main-menu-box .grid-tit .item .btn-area a > img {
  height: 14px;
}
.menu-bg {
  padding: 100px;
  background-color: var(--txt-color);
}
.menu-slider {
  width: 100%;
  background-color: var(--txt-color);
  overflow: hidden !important;
}
.menu-slider .swiper-slide a {
  position: relative;
  display: flex;
  flex-direction: column;
}
.menu-slider .swiper-slide .img-box {
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
  margin-bottom: 24px;
}
.menu-slider .swiper-slide .img-box > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 20px;
}
.menu-slider .swiper-slide .cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;

}
.menu-slider .swiper-slide .name {
  width: 100%;
  padding: 0 16px;
  font-size: 20px;
  color: #fff;
  line-height: 1.3;
  word-break: keep-all;
  text-align: center;
}
.interior-box .intro {
  background-color: var(--bg-color);
  padding: 50px;
  display: flex;
  align-items: center;
  column-gap: 50px;
  margin-bottom: 100px;
}
.interior-box .intro .img-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 450px;
}
.interior-box .intro .img-box::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.interior-box .intro .img-box > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interior-box .intro .content p:first-child {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 30px;
  color: var(--txt-color);;
}
.interior-box .intro .content p:nth-child(n+2):nth-child(-n+4) {
  font-family: 'MaruBuri';
  font-weight: 500;
  font-size: 20px;
  color: #555;
  text-indent: -14px;
  margin-left: 13px;
  line-height: 1.3;
  margin-bottom: 30px;
  word-break: keep-all;
}
.interior-box .intro .content p:nth-child(4) {
  margin-bottom: 50px !important;
}
.interior-box .intro .content a {

  width: max-content;
  background-color: var(--txt-color);
  font-size: 14px;
  color: #fff;
  padding: 20px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  border-radius: 50px;
  transition: .2s;
}
.interior-box .intro .content a:hover {
  background-color: #777;
  transition: .2s;
}
.interior-box .intro .content a > img {
  height: 12px;
}
.interior-tit {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
  color: var(--txt-color);;
}
.interior-color {
  margin-bottom: 100px;
}
.interior-color .color-box {
  display: flex;
}
.interior-color .color-box .item {
  width: calc(100% / 3);
  height: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  row-gap: 5px;

  font-size: 20px;
  font-weight: 500;
}
.interior-color .color-box .item:first-child {
  background-color: var(--sub-color);
  color: var(--txt-color);
}
.interior-color .color-box .item:nth-child(2) {
  background-color: var(--main-color);
  color: #fff;
}
.interior-color .color-box .item:last-child {
  background-color: #FFEC9D;
  color: var(--txt-color);
}
.interior-content .icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 100px;
  margin-bottom: 70px;
}
.interior-content .icon-box .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
}
.interior-content .icon-box .item > img {
  width: 150px;
  height: 150px;
}
.interior-content .icon-box .item > p {

  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  color: var(--txt-color);
}
.interior-content .img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}
.interior-content .img-grid .item {
  width: 100%;
  position: relative;
}
.interior-content .img-grid .item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.interior-content .img-grid .item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delivery-slider {
  width: 55%;
}
.delivery-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: -1px;
  z-index: 2;
  background: url('../images/review/phone_frame.png') no-repeat;
  width: calc(100% / 2.5 - 20px);
  height: calc(100%);
  background-size: contain;
}
.delivery-slider .swiper-slide > img {
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.05);
}

.order-area > .tit-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 100px;
}
.order-area > .tit-box > img {
  width: 250px;
}
.order-area > .tit-box > div {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.order-area > .tit-box > div > div {
  font-size: 78px;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
}
.order-area > .tit-box > div > div > span {
  display: inline-block;
  color: var(--sub-color);
  font-weight: 800;
}
.order-area > .tit-box > div > span {
  display: inline-block;
  width: max-content;
  font-size: 34px;
  letter-spacing: -2px;
  font-weight: 800;
  color: var(--main-color);
  padding: 16px;
  background: rgb(176,117,21);
  background: linear-gradient(90deg, rgba(176,117,21,1) 0%, rgba(245,215,127,1) 13%, rgba(255,255,215,1) 25%, rgba(245,215,127,1) 37%, rgba(176,117,21,1) 50%, rgba(245,215,127,1) 63%, rgba(255,255,215,1) 76%, rgba(245,215,127,1) 88%, rgba(176,117,21,1) 100%);
}
.order-slider {
  width: 100%;
  margin-bottom: 150px;
  overflow: hidden !important;
}
.order-slider .swiper-slide > img {
  width: 100%;
}

.review-area .tit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 32px;
  margin-bottom: 100px;
}
.review-area .tit-box > img {
  width: 350px;
}
.review-area .tit-box > div > div {
  display: flex;
  align-items: center;
  font-size: 68px;
  font-weight: 300;
  letter-spacing: -2px;
  text-align: center;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 12px;
}
.review-area .tit-box > div > div > div > span {
  display: inline-block;
  position: relative;
}
.review-area .tit-box > div > div > div > span::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #fff;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.review-area .tit-box > div > div >  div {
  font-weight: 600;
}
.review-area .tit-box > div > p {
  font-size: 42px;
  color: #fff;
  letter-spacing: -2px;
  text-align: center;
  font-weight: 300;
  text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
}
.review-area .tit-box > div > p > b {
  font-weight: 700;
}
.review-slider {
  width: 100%;
  margin-bottom: 150px;
  overflow: hidden !important;
}
.review-slider .swiper-slide > img {
  width: 100%;
}

.table-area .tit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 32px;
  margin-bottom: 100px;
}
.table-area .tit-box > img {
  width: 200px;
}
.table-area .tit-box > div {
  font-size: 68px;
  font-weight: 300;
  letter-spacing: -2px;
}
.table-area .tit-box > div > span {
  display: inline-block;
  font-weight: 700;
  color: var(--main-color);
}
.web-box {
  width: 100%;
}
.table-area .sales-table-img {
  width: 100%;
}
.table-area .web-box {
  width: 100%;
}
.table-area .mobile-box {
  display: none;
}
.table-area .mobile-box  img {
  width: 100%;
  padding: 50px 0;
}
.main-contact-area > .tit-box {
  text-align: center;
  font-size: 68px;
  font-weight: 500;
  font-family: 'MaruBuri';
  color: var(--ivory-color);
  margin-bottom: 50px;
}
.terms-area {
  background-color: var(--ivory-color);
  padding: 24px 52px;
  margin-bottom: 50px;
}
.terms-area .chk-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.terms-area .chk-box .input-box {
  display: flex;
  align-items: center;
  row-gap: 5px;
}
.terms-area .chk-box label {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 30px;
}
.terms-area .chk-box .input-box label > span {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--main-color);
  padding-left: 40px;
}
.terms-area .chk-box > button {
  background-color: var(--main-color);
  font-size: 20px;
  font-weight: 500;
  color: var(--ivory-color);
  padding: 8px 24px;
}
.terms-area .chk-box input[type="checkbox"] {
  width: 1px;
  height: 1px;
  opacity: 0;
}
.main-content-input > .tit-box {
  display: flex;
  align-items: flex-end;
  column-gap: 20px;
  color: var(--ivory-color);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 32px;
  letter-spacing: -2px;
}
.main-content-input > .tit-box > span {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: 300;
}
.main-content-input > .tit-box > span:before {
  display: inline-block;
  content: "";
  background-color: var(--sub-color);
  width: 7px;
  height: 7px;
  border-radius: 100%;
  margin-right: 7px;
}

.main-input-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}
.main-input-grid .item {
  display: flex;
  align-items: flex-start;
}
.main-input-grid .item > span {
  display: inline-flex;
  align-items: center;
  width: 150px;
  min-width: 150px;
  white-space: nowrap;
  font-size: 18px;
  color: var(--ivory-color);
  padding-top: 16px;
  letter-spacing: -2px;
}
.main-input-grid .item > span::before {
  display: inline-block;
  content: "";
  background-color: var(--sub-color);
  width: 7px;
  height: 7px;
  border-radius: 100%;
  margin-right: 7px;
}
.main-input-grid .item > input[type="text"] {
  width: 50%;
  padding: 16px;
  background-color: var(--ivory-color);
  border: none;
  font-size: 18px;
}
.main-input-grid .item > input[type="text"]::placeholder {
  color: var(--main-color);
}
.main-input-grid .item > textarea {
  width: 100%;
  padding: 16px;
  background-color: var(--ivory-color);
  border: none;
  height: 200px;
  font-size: 18px;
}
.main-input-grid .item > textarea::placeholder {
  color: var(--main-color);
}

.main-content-input .contact-btn {
  text-align: center;
}
.main-content-input .contact-btn > button {
  color: var(--main-color);
  background-color: var(--sub-color);
  border-radius: 100px;
  font-size: 32px;
  font-weight: 800;
  padding: 16px 52px;
  margin: 50px 0;
}
.main-content-input .contact-btn > button:hover {
  opacity: .8;
}
.main-content-input .call-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ivory-color);
}
.main-content-input .call-box > div {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.main-content-input .call-box > div {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
}
.main-content-input .call-box > div > img {
  width: 42px;
}
.main-content-input .call-box > p {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -2px;
}

/* off */
.terms-area .chk-box #check + label{ 
  background-repeat: no-repeat; /* 반복 방지 */
  background-image: url('../images/icons/chk_off.png'); /*off 이미지*/
  background-size: 30px 30px;
}
/* on */
.terms-area .chk-box #check:checked + label{
  background-repeat: no-repeat; /* 반복 방지 */
  background-image: url('../images/icons/chk_on.png'); /*on 이미지*/
  background-size: 30px 30px;
}
.terms-area .terms-content {
  width: 100%;
  margin-top: 24px;
  display: none;
  background-color: #fff;
  padding: 16px;
  height: 300px;
  overflow: hidden;
  overflow-y: auto;
}
.terms-area .terms-content textarea {
  width: 100%;
  padding: 16px;
  height: 250px;
  background-color: #fff;
  border: none;
  font-size: 16px;
  line-height: 1.3;
}


/*브랜드*/
.banner-area {
  position: relative;
  width: 100%;
  height: 550px;
}
.page-banner {
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  background-image: url('../images/common/page_banner_bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.banner-area > .content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.banner-area .wrap-sm {
  height: 100%;
}
.page-banner-content {
  position: absolute;
  left: 0;
  bottom: 50px;
  z-index: 1;
}
.page-banner-content .name {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
}
.page-banner-content .name::after {
  content: "";
  width: 50px;
  height: 1px;
  background-color: #fff;
  margin-left: 15px;
}
.page-banner-content .sub-name {
  font-size: 58px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 50px;
}
.page-banner-content .content {
  font-family: 'MaruBuri';
  font-weight: 300;
  font-size: 20px;
  color: #fff;
  line-height: 1.3;
}
.page-tab {
  border-bottom: 1px solid var(--border-color);
}
.page-tab ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-tab ul > li > a {

  font-size: 20px;
  font-weight: 400;
  color: var(--txt-color);
  display: inline-block;
  width: 200px;
  padding: 25px 0;
  text-align: center;
}
.page-tab ul > li > a.tab-on {
  border-bottom: 3px solid var(--sub-color);
  padding: 25px 0 22px;
}

.about-area {
  background-color: var(--ivory-color);
  padding: 100px 0;
}
.page-basic-tit {
  flex: 1.2;
}
.page-basic-tit > .tit {
  font-size: 68px;
  font-weight: 300;
  line-height: 1.1;
  word-break: keep-all;
  color: var(--txt-color);
  letter-spacing: -2px;
}
.page-basic-tit > .tit b {
  font-weight: 800;
}
.page-basic-tit > .tit::after {
  content: "";
  display: block;
  margin: 30px 0;
  width: 80px;
  height: 1px;
  background-color: var(--txt-color);
}
.page-basic-tit > .expl-tit {
  font-size: 18px;
  line-height: 1.3;
  font-family: 'MaruBuri';
  word-break: keep-all;
  color: var(--txt-color);
  font-weight: 300;
}
.page-basic-tit > .expl-tit > b {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.about-img-box {
  flex: 1.3;
}
.about-img-box > img {
  width: 100%;
}

.expl-area {
  display: flex;
  align-items: center;
  position: relative;
}
.expl-area::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url('../images/common/brand_pattern_2.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  z-index: -1;
}
.expl-area .content {
  flex: 0.6;
  padding: 160px 0;
  color: #fff;
}
.expl-area .content p:first-child {
  font-size: 68px;
  font-weight: 800;
  margin-bottom: 50px;
  letter-spacing: -2px;
}
.expl-area .content p:nth-child(n+2):nth-child(-n+3) {
  font-size: 18px;
  font-weight: 300;
  font-family: 'MaruBuri';
  line-height: 1.5;
  margin-bottom: 30px;
}
.expl-area .content p:last-child {
    font-size: 18px;
    font-weight: 300;
  font-family: 'MaruBuri';
  line-height: 1.5;
}
.secret-area {
  margin-top: 100px;
}
.secret-tit {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 300;
  color: var(--txt-color);
  letter-spacing: -2px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
}
.secret-tit > b {
  font-weight: 600;
}
.secret-tit > span {
  display: inline-block;
  color: #D31616;
  font-weight: 600;
}

.seven-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 80px;
}
.seven-grid > .item {

  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 30px;
  padding: 80px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.seven-grid > .item:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 1px;
  height: calc(100% - 80px);
  background-color: var(--border-color);
}
.seven-grid > .item > .tit {
  color: var(--txt-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.seven-grid > .item > .content {
  color: #777;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.seven-grid > .item > img {
  width: 50px;
  height: 50px;
}
.seven-grid > .item:last-child {
  grid-column: 1 / span 2;
  border-bottom: none;
}

.start-area {
  padding: 100px 0;
  background-color: var(--ivory-color);
}
.start-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 40px;
  margin-top: 100px;
}
.start-grid > .item {
  display: flex;
  align-items: center;
  column-gap: 25px;
}
.start-grid > .item > img {
  width: 160px;
}
.start-grid > .item > div {
  display: flex;
  flex-direction: column;
  row-gap: 16px;

}
.start-grid > .item > div p:first-child {
  font-size: 20px;
  font-weight: 500;
  color: #777;
  line-height: 1.3;
  letter-spacing: -2px;
}
.start-grid > .item > div p:last-child {
  font-size: 28px;
  font-weight: 600;
  color:var(--txt-color);
  letter-spacing: -2px;
}
.map-area {
  margin: 50px 0 150px;
}
.map-area > .daum-map {
  width: 100%;
  margin-bottom: 50px;
}

.map-area > .info {
  display: flex;
  padding: 40px 16px;
  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--border-color);
}
.map-area > .info > div {
  flex: 1;
}
.map-area > .info > div > p:first-child {
  font-size: 18px;
  font-weight: 700;
  color: var(--txt-color);
  margin-bottom: 25px;
  text-align: center;
}
.map-area > .info > div > p:last-child {
  font-size: 20px;
  font-weight: 500;
  color: #777;
  text-align: center;
}

/*메뉴*/
.menu-board-box {
  width: 100%;
}
.menu-board-box > a > .menu-board-img {
  width: 100%;
  scale: 1;
  transition: .2s;
}
.menu-board-box > a {
  display: block;
  width: 100%;
  height: 100%;
}
.menu-board-box:hover > a > .menu-board-img {
  scale: 1.1;
  transition: .2s;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  background-color: var(--ivory-color);
}
.menu-grid > .item {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: center;
}
.menu-grid > .item.empty {
  grid-column: 1 / span 4;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--txt-color);
}
.menu-grid > .item a {
  display: inline-block;
}
.menu-grid > .item .img-box {
  width: 100%;
  position: relative;
  aspect-ratio: 2 / 1.5;
  border-radius: 5px;
  overflow: hidden;
}
.menu-grid > .item .img-box:hover .photo-gallery {
  scale: 0.95;
  transition: .2s;
}
.menu-grid > .item .img-box a {
  display: block;
  width: 100%;
  height: 100%;
}
.menu-grid > .item .img-box .photo-gallery {
  width: 100%;
  height: 100%;
  object-fit: contain;
  scale: 1;
  transition: .2s;
  position: relative;
}
.menu-grid > .item .img-box::after {
  /*
  content: "";
  */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  opacity: 0;
  transition: 0.2s;
  cursor: pointer;
  background-image: url('../images/logo/logo_circle.png');
  background-position: center center;
  background-size: 80px 80px;
  background-repeat: no-repeat;
}
.menu-grid > .item .img-box:hover::after {
  opacity: 1;
  transition: 0.2s;
}
.menu-grid > .item .category-tag {
  display: inline-block;
  width: max-content;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  border-radius: 30px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
.menu-grid > .item .category-tag.cup {
  background-color: var(--txt-color);
}
.menu-grid > .item .category-tag.fry {
  background-color: #DE2222;
}
.menu-grid > .item .category-tag.soup {
  background-color: #54C1CD;
}
.menu-grid > .item .category-tag.side {
  background-color: #389256;
}
.menu-grid > .item .category-tag.lunch-box {
  background-color: #a52020;
}
.menu-grid > .item .name {
  width: 100%;
  display: inline-block;
  line-height: 1.3;
  font-family: 'MaruBuri';
  font-weight: 300;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background-image: url('../images/common/name_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 12px 0;
}

/*소식*/
.promotion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 100px 0 150px;
}
.promotion-grid .item {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.promotion-grid .item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.promotion-grid .item a {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}
.promotion-grid .item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*가맹안내*/
.franchise-area {
  margin: 100px 0;
}
.franchise-area > .franchise-tit {
  margin-bottom: 50px;
}
.franchise-area > .franchise-tit > p:first-child {
  display: block;
  font-size: 42px;
  font-weight: 800;
  color: var(--txt-color);
  line-height: 1.3;
  text-align: center;
  letter-spacing: -2px;
}
.franchise-area > .franchise-tit > p:last-child {
  display: block;
  font-size: 58px;
  font-weight: 800;
  color: var(--main-color);
  line-height: 1.1;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: -2px;
}
.franchise-area .step-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.franchise-area .step-grid .item {
  padding: 50px 24px;
  text-align: center;
}
.franchise-area .step-grid .item:not(:last-child) {
  border-right: 1px solid var(--border-color);
}
.franchise-area .step-grid .item > img {
  width: 58px;
  margin-bottom: 50px;
}
.franchise-area .step-grid .item .num {
  font-size: 20px;
  font-weight: 700;
  color: var(--sub-color);
  margin-bottom: 8px;
}
.franchise-area .step-grid .item .tit {
  font-size: 32px;
  font-weight: 800;
  color: var(--main-color);
  margin-bottom: 12px;
  word-break: keep-all;
  letter-spacing: -2px;
}
.franchise-area .step-grid .item .content {
  font-size: 20px;
  font-weight: 500;
  color: var(--txt-color);
  line-height: 1.3;
  word-break: keep-all;
  letter-spacing: -2px;
}

.funds-area > .tit {
  font-size: 42px;
  font-weight: 300;
  text-align: right;
  margin-bottom: 50px;
  color: var(--txt-color);
}
.funds-area .tit > b {
  font-weight: 600;
}
.funds-area .funds-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.funds-area .funds-grid .item {
  background-color: #fff;
  padding: 25px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
  border-left: 2px solid var(--border-color);
  border-top: 2px solid var(--border-color);
  color: var(--txt-color);
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  justify-content: space-between;
  position: relative;
}
.funds-area .funds-grid .item .tit {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}
.funds-area .funds-grid .item .content {
  font-family: 'MaruBuri';
  font-weight: 300;
  line-height: 1.3;
}
.funds-area .funds-grid .item .focus {
  color: #D31616;
  font-size: 13px;
  text-align: right;
  margin-bottom: 5px;
}
.funds-area .funds-grid .item .cost {
  color: #999;
  font-size: 20px;
  font-weight: 600;
  text-align: right;
}
.funds-area .equal {
  text-align: center;
  margin: 50px 0;
}
.funds-area .equal > img {
  width: 20px;
}
.funds-area .total-cost-area {
  background-color: #fff;
  border-radius: 15px;
  padding: 50px 80px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.funds-area .total-cost-area .total-cost {
  white-space: nowrap;
}
.funds-area .total-cost-area .total-cost p:first-child {
  font-size: 24px;
  margin-bottom: 15px;
}
.funds-area .total-cost-area .total-cost p:nth-child(2) {
  font-size: 32px;
  font-weight: 600;
  color: var(--main-color);
}
.funds-area .total-cost-area .expl {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-left: 60px;
  border-left: 1px solid var(--border-color);
  padding: 20px 0 20px 60px;
}
.funds-area .total-cost-area .expl > span {
  display: block;
  font-family: 'MaruBuri';
  font-weight: 300;
  line-height: 1.3;
}
.qna-area {
  padding: 100px 0 50px;
  display: flex;
  position: relative;
  column-gap: 150px;
}
.qna-area > .sticky-area {
  flex: 1;
}
.qna-area > .sticky-area > div {
  position: sticky;
  top: 100px;
}
.qna-area > .sticky-area > div > .tit {
  font-size: 42px;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 50px;
  color: var(--txt-color);
  letter-spacing: -2px;
}
.qna-area > .sticky-area > div > .tit > b {
  font-weight: 600;
}
.qna-area > .sticky-area .question {
  width: max-content;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  line-height: 1.3;
  padding: 30px;
  background-color: var(--sub-color);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  position: relative;
  letter-spacing: -2px;
}
.qna-area > .sticky-area .question::after {
  content:'';
  position: absolute;
  left: 20px;
  bottom: -16px;
  border-left: 0px solid transparent;
  border-right: 24px solid transparent;
  border-top: 16px solid var(--sub-color);
}
.qna-area > .sticky-area .question > b {
  font-weight: 600;
}
.qna-area .answer-area {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  flex: 1;
  padding-top: 160px;
}
.qna-area .answer-area .item {
  padding: 30px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  color: var(--txt-color);
}
.qna-area .answer-area .item::after {
  content:'';
  position: absolute;
  right: 20px;
  bottom: -16px;
  border-right: 0px solid transparent;
  border-left: 24px solid transparent;
  border-top: 16px solid var(--bg-color);
}
.qna-area .answer-area .item.iv::after {
  border-top: 16px solid var(--ivory-color);
}
.qna-area .answer-area .item.mc {
  background-color: var(--bg-color);
}
.qna-area .answer-area .item.iv {
  background-color: var(--ivory-color);
}
.qna-area .answer-area .item > .tit {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 20px;
}
.qna-area .answer-area .item > .tit > b {
  font-weight: 600;
}
.qna-area .answer-area .item > .content {
  font-family: 'MaruBuri';
  font-weight: 300;
  line-height: 1.3;
}
.btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.btn-wrap.justify-right {
  justify-content: flex-end;
}
.btn-wrap button {
  font-size: 14px;
  background-color: var(--txt-color);
  color: #fff;
  padding: 20px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  border-radius: 50px;
  transition: .2s;
}
.btn-wrap button:hover {
  background-color: #777;
  transition: .2s;
}
.btn-wrap button > img {
  height: 12px;
}

.interior-area {
  padding: 100px 0;
}
.interior-area .item {
  display: flex;
  align-items: center;
}
.interior-area .item.fl-reverse {
  flex-direction: row-reverse;
}
.interior-area .item .content-box {
  flex: 1;
  padding: 0 50px;
  color: var(--txt-color);
}
.interior-area .item .content-box > .tit {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.3;
  position: relative;
}
.interior-area .item .content-box > .tit > b {
  font-weight: 600;
}
.interior-area .item .content-box > .tit::after {
  content: "";
  display: block;
  width: 100px;
  height: 1px;
  background-color: var(--txt-color);
  margin: 30px 0;
}
.interior-area .item .content-box > .content {
  font-family: 'MaruBuri';
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 50px;
}
.interior-area .item .img-box {
  flex: 1;
  position: relative;
}
.interior-area .item .img-box::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.interior-area .item .img-box > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interior-area .item .gallery-box {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.interior-area .item .gallery-box > img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  cursor: pointer;
}
.branch-area {
  position: relative;
  margin-bottom: 100px;
}
.branch-area > .cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 50%);
}
.branch-area > .img-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.branch-area > .img-box > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.branch-area > .content {
  width: calc(100% - 100px);
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: #fff;
}
.branch-area > .content .left > p:first-child {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 50px;
}
.branch-area > .content .left > p:nth-child(2) {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 10px;
}
.branch-area > .content .left > p:last-child {
  font-size: 16px;
  font-weight: 300;
}
.branch-area > .content .right {
  font-size: 32px;
  font-weight: 600;
} 

.franchise-contact-area {
  margin: 100px 0 150px;
  display: flex;
  column-gap: 40px;
}
.franchise-contact-area .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  order: 1;
  flex: 1;
}
.franchise-contact-area .left .sticky {
  position: sticky;
  top: 100px;
}
.franchise-contact-area .left .tit-box {
  color: var(--txt-color);
  margin-bottom: 50px;
}
.franchise-contact-area .left .tit-box .tit {
  font-size: 42px;
  font-weight: 300;
  line-height: 1.3;
}
.franchise-contact-area .left .tit-box .tit > b {
  font-weight: 600;
}
.franchise-contact-area .left .tit-box .tit::after {
  content: "";
  display: block;
  margin: 30px auto 30px 0;
  width: 80px;
  height: 1px;
  background-color: var(--txt-color);
}
.franchise-contact-area .left .tit-box .sub-tit {
  font-size: 20px;
  line-height: 1.3;
  font-family: 'MaruBuri';
  word-break: keep-all;
  font-weight: 300;
}
.franchise-contact-area .left .call {
  margin-top: 32px;
}
.franchise-contact-area .left .call > p:first-child {
  font-family: 'MaruBuri';
  display: block;
  font-size: 20px;
  font-weight: 300;
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
  color: var(--txt-color);
}
.franchise-contact-area .left .call > p:first-child > span {
  display: inline-block;
  font-size: 14px;
}
.franchise-contact-area .left .call > p:last-child {
  display: block;
  font-size: 42px;
  font-weight: 600;
  color: var(--main-color);
}
.franchise-contact-area .right {
  order: 2;
  flex: 1.5;
}
.franchise-contact-area .border-box {
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--txt-color);
  column-gap: 5px;
}
.franchise-contact-area .border-box::before {
  content: "*";
  color: #D31616;
  font-weight: 500;
  margin-right: 5px;
}
.franchise-contact-area .border-box.ns::before {
  display: none;
}
.franchise-contact-area .input-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
  margin: 30px 0;
}
.franchise-contact-area .input-grid .item:nth-child(n+3):nth-child(-n+5) {
  grid-column: 1 / span 2;
}
.franchise-contact-area .input-grid .item > p {
  font-weight: 400;
  margin-bottom: 10px;
}
.franchise-contact-area .input-grid .item > p::after {
  content: "*";
  color: #D31616;
  font-weight: 500;
  margin-left: 5px;
}
.franchise-contact-area .input-grid .item input[type="text"] {
  width: 100%;
  background-color: var(--bg-color);
  border: none;
  padding: 16px 20px;
  font-size: 16px;
}
.franchise-contact-area .input-grid .item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 3px 0 0;
}
.franchise-contact-area .input-grid .item label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.franchise-contact-area .input-grid .item label > span {
  display: inline-block;
}
.franchise-contact-area .input-grid .item textarea {
  width: 100%;
  background-color: var(--bg-color);
  border: none;
  padding: 16px 20px;
  min-height: 200px;
  line-height: 1.3;
  font-size: 16px;
}
.franchise-contact-area .border-box > input[type="text"] {
  width: 100%;
  background-color: var(--bg-color);
  border: none;
  padding: 16px 20px;
  font-size: 16px;
}
.franchise-contact-area .border-box > button {
  background-color: var(--txt-color);
  color: #fff;
  padding: 16px 50px;
  white-space: nowrap;
}
.franchise-contact-area .border-box > button:hover {
  background-color: #555;
}
.franchise-list {
  border-bottom: 1px solid var(--border-color);
}
.franchise-list > div {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 25px 0;
  column-gap: 10px;
}
.franchise-list > div > span {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--txt-color);
  padding: 0 16px;
}
.franchise-list > div > span:first-child {
  width: 20%;
}
.franchise-list > div > span:nth-child(2) {
  width: 20%;
}
.franchise-list > div > span:last-child {
  width: 60%;
}
.franchise-list > ul {
  border-top: 1px solid var(--border-color);
  max-height: 800px;
  overflow: hidden;
  overflow-y: auto;
}
.franchise-list > ul > li {
  padding: 25px 0;
  display: flex;
  align-items: center;
  column-gap: 10px;
  border-bottom: 1px solid var(--border-color);
}
.franchise-list > ul > li.empty {
  justify-content: center;
  color: var(--txt-color);
}
.franchise-list > ul > li:last-child {
  border-bottom: none;
}
.franchise-list > ul > li > span {
  display: inline-block;
  padding: 0 16px;
  text-align: center;
  color: #999;
  font-weight: 400;
  line-height: 1.3;
}
.franchise-list > ul > li > span:first-child {
  width: 20%;
}
.franchise-list > ul > li > span:nth-child(2) {
  width: 20%;
}
.franchise-list > ul > li > span:last-child {
  width: 60%;
}
.franchise-map-area {
  position: relative;
  text-align: center;
}
.franchise-map-area > img {
  width: 100%;
}
.franchise-map-area > map {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
}
.franchise-map-area > map > area {
  cursor: pointer;
  width: 13%;
  height: 4%;
  display: inline-block;
  position: absolute;
}
.map-seoul {
  top: 18%;
  left: 21%;
}
.map-ic {
  top: 22%;
  left: 9%;
}
.map-cb {
  top: 36%;
  left: 43%;
}
.map-cn {
  top: 49%;
  left: 14%;
}
.map-dj {
  top: 51%;
  left: 33%;
}
.map-jb {
  top: 62%;
  left: 25%;
}
.map-jn {
  top: 79%;
  left: 20%;
}
.map-gw {
  top: 17%;
  left: 52%;
}
.map-gb {
  top: 48%;
  left: 62%;
}
.map-gn {
  top: 69%;
  left: 50%;
}
.map-dg {
  top: 58%;
  left: 59%;
}
.map-us {
  top: 64%;
  left: 78%;
}
.map-bs {
  top: 72%;
  left: 70%;
}
.map-jj {
  top: 89%;
  left: 80%;
}
.map-gg {
  top: 26%;
  left: 30%;
}
.map-sj {
  top: 43%;
  left: 27%;
}
.map-gj {
  top: 72%;
  left: 18%;
}
.store-tit {
  text-align: center;
  margin: 100px 0 50px;
}
.store-tit span {
  width: max-content;
  display: inline-block;
  line-height: 1.3;
  font-family: 'MaruBuri';
  font-weight: 700;
  font-size: 42px;
  text-align: center;
  color: #fff;
  background-image: url('../images/common/name_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 22px 52px;
}
.store-area {
  display: flex;
  flex-direction: column;
  row-gap: 42px;
}
.store-area .item {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  letter-spacing: -2px;
}
.store-area .item > span {
  white-space: nowrap;
  display: inline-block;
  font-size: 32px;
  font-weight: 600;
  color: var(--main-color);
}
.store-area .item > div {
  font-size: 28px;
  line-height: 1.3;
  word-break: keep-all;
  letter-spacing: -2px;
}

/*메인팝업*/
.popup-area {
  position: fixed;
  z-index: 101;
  width: 500px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  display: none;
}
.popup-area .img-box {
    width: 100%;
    height: 100%;
  background-color: #fff;
}
.popup-area .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: bottom;
}
.popup-area .pop-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  font-weight: 400;
  padding: 12px 16px 16px;
}
.popup-area .pop-btn label {
  display: flex;
  align-items: center;
  column-gap: 5px;
  cursor: pointer;
}
.popup-area .pop-btn label input {
  margin: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
.popup-area .pop-btn label span {
  display: inline-block;
  color: #999;
  font-size: 14px;
}
.popup-area .pop-btn button {
  font-size: 14px;
}