@charset "UTF-8";
html {
  font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol, li {
  list-style: none;
}

strong, th {
  font-weight: inherit;
}

em, address {
  font-style: normal; /*기울어진 글자를 바르게*/
}

button {
  border: none;
  background: none;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
  /* 오버했을때 마우스 포인터를
     a와 동일한 스타일로 변경 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input, select, textarea {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* 자동완성 스타일 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 9999s ease-out 0s;
}

fieldset {
  border: none;
}

legend {
  display: none;
}

caption {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse; /* border 병합 */
}

select {
  border: none;
  border-radius: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/*
    common.css (layout.css 라고도 함)
    홈페이지 전체에 적용되는 공통스타일
    프로젝트마다 변경됨 - 이 css에 있는 속성을 수정하면 프로젝트 전체가 바뀜
*/
/* 60px */
/* 40px */
/* 32px */
/* 28px */
/* 24px */
/* 20px */
/* 18px */
/*
    common.css (layout.css 라고도 함)
    홈페이지 전체에 적용되는 공통스타일
    프로젝트마다 변경됨 - 이 css에 있는 속성을 수정하면 프로젝트 전체가 바뀜
*/
body {
  font-size: 1.6rem;
  font-family: "SUITE", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #222222;
  word-break: keep-all; /* 단어 단위로 줄바꿈 */
  word-wrap: break-word; /* 단어가 제한된 넓이보다 길면 강제 줄바꿈 */
}

.wrapper {
  width: 1440px;
  margin: 0 auto;
}
@media screen and (max-width: 1500px) {
  .wrapper {
    /* 1440 + 30 + 30 */
    width: auto;
    margin: 0 30px;
  }
}
@media screen and (max-width: 1024px) {
  .wrapper {
    margin: 0 24px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    margin: 0 16px;
  }
}

#wrap {
  position: relative;
}

/* html 표준때문에 입력해야하는 태그이지만 홈페이지에 나오지 않는
   태그에 주는 클래스 */
.sr-only, .skip, .blind {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@font-face {
  font-family: "SUITE";
  font-weight: 400;
  src: url("../fonts/SUITE-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "SUITE";
  font-weight: 700;
  src: url("../fonts/SUITE-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Grandiflora One";
  src: url("../fonts/GrandifloraOne-Regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
.header {
  position: fixed;
}
@media screen and (max-width: 768px) {
  .header {
    position: absolute;
  }
}
.header {
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(48px, 5.859375vw, 60px);
  z-index: 10;
  transition: background-color 0.1s;
}
.header.fixed {
  background-color: #ffffff;
  border-bottom: 1px solid #4B2E26;
}
.header .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .logo {
  display: flex;
  align-items: center;
  height: clamp(48px, 5.859375vw, 60px);
}
.header .logo a {
  display: block;
  background: url(../images/layout/logo_w.svg) no-repeat center center/contain;
  width: 110px;
  height: calc(clamp(48px, 5.859375vw, 60px) / 3);
}
.header.fixed .logo a {
  background-image: url(../images/layout/logo.svg);
}
.header .toc {
  display: block;
}
@media screen and (max-width: 768px) {
  .header .toc {
    display: none;
  }
}
.header .toc ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.1458333333vw;
}
.header .toc ul li a {
  display: flex;
  align-items: center;
  height: clamp(48px, 5.859375vw, 60px);
  font-size: clamp(1.6rem, 1.7578125vw, 1.8rem);
  font-weight: 700;
  color: #ffffff;
  padding: 0 0.6111111111em;
}
.header .toc ul li a.active {
  color: #393F31;
  position: relative;
}
.header .toc ul li a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.25em;
  transform: translateX(-50%);
  width: 0.5em;
  height: 0.5em;
  border: 1px solid #030316;
  border-radius: 50%;
  background-color: #393F31;
}
.header.fixed .toc ul li a {
  color: #030316;
}
.header .inquiry:active {
  outline: 2px solid #030316;
  outline-offset: 2px;
}
.header .inquiry {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .header .inquiry {
    display: none;
  }
}
.header .inquiry {
  font-size: clamp(1.6rem, 1.7578125vw, 1.8rem);
  font-weight: 700;
  padding: 0.2222222222em 1em;
  border-radius: max(100vw, 100vh);
  background-color: #312016;
  color: #ffffff;
}

.footer {
  background-color: #030316;
  color: #9a9aa2;
}
.footer .wrapper {
  padding: clamp(47px, 5.56640625vw, 57px) 0 clamp(122px, 13.4765625vw, 138px) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: clamp(12px, 2.734375vw, 28px) 0;
  position: relative;
}
.footer .wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(23px, 6.4453125vw, 66px);
  width: 153px;
  height: 162px;
  background: url(../images/layout/favicon_footer.svg) transparent no-repeat center center/cover;
  opacity: 0.05;
}
.footer .wrapper .f_nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 2.375em;
  flex-wrap: wrap;
  margin: 0 2.375em;
}
.footer .wrapper .f_nav ul li.privacy {
  font-weight: 700;
}
.footer .wrapper .f_info ul li strong {
  display: inline-block;
  position: relative;
  margin-right: 0.25em;
}
.footer .wrapper .f_info ul li strong::after {
  content: ":";
  position: absolute;
  right: -0.25em;
  top: 0;
}
.footer .wrapper .f_info ul > li > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1.125em;
  flex-wrap: wrap;
}
.footer a:hover {
  text-decoration: underline;
}

.toc_mobile {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(48px, 5.859375vw, 60px);
  z-index: 10;
  display: none;
}
@media screen and (max-width: 768px) {
  .toc_mobile {
    display: block;
  }
}
.toc_mobile {
  background-color: #ffffff;
  color: #030316;
  border-bottom: 1px solid #4B2E26;
}
.toc_mobile ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0 1.1458333333vw;
}
.toc_mobile ul li {
  width: 100%;
}
.toc_mobile ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(48px, 5.859375vw, 60px);
  font-size: clamp(1.6rem, 1.7578125vw, 1.8rem);
  font-weight: 700;
  padding: 0 0.6111111111em;
}
.toc_mobile ul li a.active {
  color: #393F31;
  position: relative;
}
.toc_mobile ul li a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.25em;
  transform: translateX(-50%);
  width: 0.5em;
  height: 0.5em;
  border: 1px solid #030316;
  border-radius: 50%;
  background-color: #393F31;
}

/* draw-border-* 애니메이션 사용 안 함 */
@keyframes draw-border-horizontal {
  0% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes draw-border-vertical {
  0% {
    height: 100%;
  }
  100% {
    height: 100%;
  }
}
@media screen and (min-width: 1025px) {
  [data-aos=draw-border] ul::before {
    animation-name: draw-border-horizontal;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: paused;
  }
  [data-aos=draw-border] ul li:first-child::before, [data-aos=draw-border] ul li::after {
    animation-name: draw-border-vertical;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: paused;
  }
  [data-aos=draw-border] ul li:first-child::before {
    animation-delay: 0;
  }
  [data-aos=draw-border] ul li[data-aos-delay="1000"]::after {
    animation-delay: 0;
  }
  [data-aos=draw-border] ul li[data-aos-delay="1200"]::after {
    animation-delay: 0;
  }
  [data-aos=draw-border] ul li[data-aos-delay="1400"]::after {
    animation-delay: 0;
  }
  [data-aos=draw-border] ul li[data-aos-delay="1600"]::after {
    animation-delay: 0;
  }
  [data-aos=draw-border].aos-animate ul::before {
    animation-play-state: running;
  }
  [data-aos=draw-border].aos-animate ul li:first-child::before {
    animation-play-state: running;
  }
  [data-aos=draw-border].aos-animate ul li::after {
    animation-play-state: running;
  }
}

[data-aos=light-up] {
  opacity: 0.2;
  filter: saturate(0.6);
}
[data-aos=light-up].aos-animate {
  opacity: 1;
  filter: saturate(1);
}

[data-aos=check-up]::after {
  width: 1.1666666667em;
  transform: translateX(0);
}
[data-aos=check-up].aos-animate::after {
  width: 0;
  transform: translateX(1.1666666667em);
}

[data-aos=blur] {
  opacity: 0;
  filter: blur(10px) brightness(1.3);
}
[data-aos=blur].aos-animate {
  opacity: 1;
  filter: blur(0) brightness(1);
}

.visual {
  background: url(../images/main/visual_bg.jpg) #222 no-repeat center center/cover;
  height: clamp(500px, 68.359375vw, 700px);
  color: #ffffff;
}
.visual .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.visual .wrapper .txt_box {
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
}
.visual .wrapper .txt_box > strong {
  display: block;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  color: #F3EAA7;
  margin: 0 0 0.34375em 0;
}
.visual .wrapper .txt_box h2 {
  font-size: clamp(3.2rem, 5.859375vw, 6rem);
  line-height: 1.2;
  margin: 0 0 0.35em 0;
}
.visual .wrapper .txt_box h2 strong {
  font-weight: 700;
}
.visual .wrapper .txt_box span {
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  display: inline-block;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  font-weight: 700;
  margin: 0.65625em 0;
  padding: 0.09375em 0.625em;
  background-color: #F3EAA7;
  color: #030316;
}
.visual .wrapper .txt_box p br {
  display: block;
}
@media screen and (max-width: 768px) {
  .visual .wrapper .txt_box p br {
    display: none;
  }
}

.speciality {
  background-color: #F5F2EB;
  padding: clamp(151px, 15.234375vw, 156px) 0 clamp(76px, 16.2109375vw, 166px) 0;
}
.speciality .tit_box {
  color: #393F31;
  text-align: center;
  margin: 0 0 clamp(75px, 12.98828125vw, 133px) 0;
}
.speciality .tit_box .subtit {
  display: block;
  font-family: "Grandiflora One", cursive;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  margin: 0 0 0.34375em 0;
  opacity: 0.4;
  -webkit-text-stroke: 1px #393F31;
}
.speciality .tit_box h2 {
  font-size: clamp(3.2rem, 5.859375vw, 6rem);
  font-weight: 700;
}
.speciality .contents_box ul {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  align-items: start;
}
.speciality .contents_box ul li {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 41px 0;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 5.9027777778vw, 85px) 0 clamp(30px, 3.6111111111vw, 52px) 0;
}
.speciality .contents_box ul li .photo {
  height: clamp(80px, 12.5vw, 180px);
  overflow: hidden;
}
.speciality .contents_box ul li .photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}
.speciality .contents_box ul li .txt_box {
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
  margin: 0 clamp(16px, 2.2222222222vw, 32px);
}
.speciality .contents_box ul li .txt_box .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 14px;
  margin: 0 0 clamp(11px, 1.3671875vw, 14px) 0;
}
.speciality .contents_box ul li .txt_box .tit > span {
  display: block;
  position: relative;
  color: #030316;
  text-align: center;
  width: 1.5em;
  font-variant-numeric: tabular-nums;
}
.speciality .contents_box ul li .txt_box .tit > span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #030316;
  opacity: 0.15;
}
.speciality .contents_box ul li .txt_box .tit h3 {
  line-height: 1.2;
  font-weight: 700;
  color: #030316;
}
.speciality .contents_box ul li .txt_box p br {
  display: none;
}
.speciality .contents_box ul li:first-child::before {
  /* 왼쪽 세로 선 */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #030316;
  border-width: 0 0 0 1px;
}
.speciality .contents_box ul li::after {
  /* 오른쪽 세로 선들 */
  content: "";
  position: absolute;
  left: -1px;
  top: 2px;
  width: 100%;
  height: 0;
  border-style: solid;
  border-color: #030316;
  border-width: 0 1px 0 0;
}
.speciality .contents_box ul::before {
  /* 위아래 가로 선들 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-style: solid;
  border-color: #030316;
  border-width: 2px 0 2px 0;
}

@media screen and (max-width: 1024px) {
  .speciality .contents_box ul {
    grid-template-columns: 1fr;
  }
  .speciality .contents_box ul li {
    padding: 1.25em 2.7777777778vw 1.875em 8.3333333333vw;
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  .speciality .contents_box ul li .photo {
    flex-grow: 1;
    align-self: flex-end;
  }
  .speciality .contents_box ul li .txt_box {
    flex-grow: 2;
    margin: 0;
  }
  .speciality .contents_box ul li .txt_box p br {
    display: none;
  }
  .speciality .contents_box ul li:first-child::before {
    /* 위쪽 가로 선 */
    left: 1px;
    top: 0px;
    width: 100%;
    border-width: 2px 0 0 0;
  }
  .speciality .contents_box ul li:last-child::after {
    /* 아래쪽 가로 선 */
    left: 1px;
    top: -2px;
    height: 100%;
    border-width: 0 0 2px 0;
  }
  .speciality .contents_box ul li::after {
    /* 중간 가로 선 */
    left: 1px;
    top: 0px;
    height: 100%;
    border-width: 0 0 1px 0;
  }
  .speciality .contents_box ul::before {
    /* 세로 선 */
    width: 100%;
    border-width: 0 1px 0 1px;
  }
}
@media screen and (max-width: 768px) {
  .speciality .contents_box ul li .txt_box p br {
    display: block;
  }
}
@media screen and (max-width: 320px) {
  .speciality .contents_box ul li {
    flex-direction: column;
    align-items: center;
    padding: 1.25em 2.7777777778vw 1.875em 2.7777777778vw;
  }
  .speciality .contents_box ul li .photo {
    align-self: center;
  }
}
.speciality_listing {
  border-style: solid;
  border-color: #030316;
  border-width: 1px 0 1px 0;
}
.speciality_listing .speciality_list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-style: solid;
  border-color: #030316;
  border-width: 1px 0 1px 0;
}
.speciality_listing .speciality_list > li .txt_box {
  width: calc(50% - 3.125vw - 15.4166666667vw);
  margin-left: 15.4166666667vw;
}
.speciality_listing .speciality_list > li .txt_box .tit {
  color: #312016;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 13px;
  margin: 0 0 clamp(23px, 3.80859375vw, 39px) 0;
}
.speciality_listing .speciality_list > li .txt_box .tit > span {
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
  display: block;
  position: relative;
  color: #030316;
  text-align: center;
  width: 1.5em;
  font-variant-numeric: tabular-nums;
}
.speciality_listing .speciality_list > li .txt_box .tit > span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #030316;
  opacity: 0.15;
}
.speciality_listing .speciality_list > li .txt_box .tit h3 {
  font-size: clamp(2.8rem, 3.90625vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
}
.speciality_listing .speciality_list > li .txt_box ul {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px 0;
}
.speciality_listing .speciality_list > li .txt_box ul li {
  font-size: clamp(1.6rem, 1.7578125vw, 1.8rem);
  margin-left: calc(clamp(2rem, 2.34375vw, 2.4rem) * 1.5 + 13px);
  position: relative;
}
.speciality_listing .speciality_list > li .txt_box ul li::before {
  content: "";
  position: absolute;
  left: -2.3888888889em;
  top: -0.25em;
  width: 1.6666666667em;
  height: 1.6666666667em;
  border: 1px solid #222222;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.8' d='M4.78769 7.81737L12.4608 0.267261C12.6419 0.0890869 12.8532 0 13.0946 0C13.3361 0 13.5473 0.0890869 13.7284 0.267261C13.9095 0.445434 14 0.657016 14 0.902004C14 1.14699 13.9095 1.35857 13.7284 1.53675L5.42146 9.73274C5.24038 9.91091 5.02912 10 4.78769 10C4.54625 10 4.33499 9.91091 4.15392 9.73274L0.260751 5.902C0.0796741 5.72383 -0.0070922 5.51225 0.000452693 5.26726C0.00799759 5.02227 0.102309 4.81069 0.283386 4.63252C0.464464 4.45434 0.679493 4.36526 0.928474 4.36526C1.17746 4.36526 1.39249 4.45434 1.57356 4.63252L4.78769 7.81737Z' fill='%23222222'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.8888888889em;
}
.speciality_listing .speciality_list > li .txt_box ul li::after {
  /* 체크마크 애니메이션 */
  content: "";
  position: absolute;
  left: -2.2222222222em;
  top: 0.25em;
  height: 0.8888888889em;
  background-color: #ffffff;
  transition: width 0.5s, transform 0.5s;
}
.speciality_listing .speciality_list > li .txt_box ul li > span {
  position: relative;
}
.speciality_listing .speciality_list > li .txt_box ul li > span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 43%;
  width: 100%;
  height: 0.8333333333em;
  background-color: #DBCCB3;
  opacity: 0.16;
}
.speciality_listing .speciality_list > li .photo {
  border-style: solid;
  border-color: #030316;
  width: calc(50% + 3.125vw);
  height: clamp(180px, 41.1111111111vw, 592px);
  overflow: hidden;
}
.speciality_listing .speciality_list > li .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
.speciality_listing .speciality_list > li:nth-child(odd) .photo {
  border-width: 0 0 0 1px;
}
.speciality_listing .speciality_list > li:nth-child(even) {
  background-color: #F5F2EB;
  flex-direction: row-reverse;
  justify-self: flex-start;
}
.speciality_listing .speciality_list > li:nth-child(even) .txt_box {
  width: calc(50% - 3.125vw - 9.7916666667vw);
  margin-left: 9.7916666667vw;
}
.speciality_listing .speciality_list > li:nth-child(even) .txt_box ul li::after {
  background-color: #F5F2EB;
}
.speciality_listing .speciality_list > li:nth-child(even) .photo {
  border-width: 0 1px 0 0;
}

/* 1440px 부터는 이미지 너비 빠르게 줄임 */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .speciality_listing .speciality_list > li:nth-child(odd) .txt_box {
    margin-left: calc(15.4166666667vw - 81px + 5.625vw);
  }
  .speciality_listing .speciality_list > li:nth-child(even) .txt_box {
    /* 50% - function.vw(60, 1920) - function.vw(188, 1920): 1920에서의 박스 너비 */
    /*  + 252px - (function.vw(252, 1440)): 줄어든 이미지 너비만큼 늘이기 */
    width: calc(50% - 3.125vw - 9.7916666667vw + 252px - 17.5vw);
  }
  .speciality_listing .speciality_list > li .photo {
    width: calc(50% + 3.125vw - 252px + 17.5vw);
  }
} /* @media screen and (min-width: 1025px) and (max-width: 1440px) */
@media screen and (max-width: 1024px) {
  .speciality_listing .speciality_list > li {
    flex-direction: column;
    align-items: flex-start;
  }
  .speciality_listing .speciality_list > li .txt_box {
    border-style: solid;
    border-color: #030316;
    width: 100%;
    padding: 5.625em 0 3.6875em 0;
    padding-left: 4.4444444444vw;
    margin: 0;
    border-width: 0 0 1px 0;
  }
  .speciality_listing .speciality_list > li .txt_box ul {
    gap: 15px 0;
  }
  .speciality_listing .speciality_list > li .photo {
    width: 100%;
  }
  .speciality_listing .speciality_list > li:nth-child(odd) .photo {
    border-width: 0;
  }
  .speciality_listing .speciality_list > li:nth-child(even) {
    flex-direction: column;
    align-items: flex-start;
  }
  .speciality_listing .speciality_list > li:nth-child(even) .txt_box {
    width: 100%;
    margin: 0;
  }
  .speciality_listing .speciality_list > li:nth-child(even) .photo {
    width: 100%;
    border-width: 0;
  }
} /* @media screen and (max-width: 1024px) */
.coffee_bean {
  position: relative;
  background-color: #030316;
  color: #ffffff;
  padding: clamp(100px, 15.33203125vw, 157px) 0 clamp(55px, 12.20703125vw, 125px) 0;
}
.coffee_bean .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: clamp(56px, 8.69140625vw, 89px);
}
.coffee_bean .wrapper .tit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.coffee_bean .wrapper .tit > .photo {
  max-width: 100%;
  overflow: hidden;
}
.coffee_bean .wrapper .tit > .photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}
.coffee_bean .wrapper .list {
  width: 100%;
}
.coffee_bean .wrapper .list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  align-items: start;
  gap: 24px 16px;
}
.coffee_bean .wrapper .list ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  padding: clamp(34px, 3.90625vw, 40px) 0 clamp(38px, 3.90625vw, 40px) 0;
  position: relative;
  overflow: hidden;
}
.coffee_bean .wrapper .list ul li h3 {
  font-size: 3.125vw;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.1666666667em 0;
}
.coffee_bean .wrapper .list ul li p {
  margin: 0 4.1666666667vw 1.25em 4.1666666667vw;
}
.coffee_bean .wrapper .list ul li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid #F5F2EB;
  opacity: 0.4;
}
.coffee_bean .wrapper .coffee_bean_divider {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 45%);
  max-width: 71.1111111111vw;
}
.coffee_bean .wrapper .coffee_bean_divider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}

@media screen and (max-width: 1024px) {
  .coffee_bean .wrapper {
    flex-direction: column-reverse;
  }
  .coffee_bean .wrapper .list ul {
    grid-template-columns: 1fr;
  }
  .coffee_bean .wrapper .list ul li h3 {
    font-size: clamp(3.2rem, 5.859375vw, 6rem);
    margin: 0 0 0.46875em 0;
  }
  .coffee_bean .wrapper .list ul li p {
    word-break: normal;
    margin: 0 22.2222222222vw 1.25em 22.2222222222vw;
  }
} /* @media screen and (max-width: 1024px) */
.beverages {
  background-color: #F5F2EB;
  text-align: center;
  padding: clamp(142px, 27.1484375vw, 278px) 0 clamp(76px, 13.28125vw, 136px);
}
.beverages .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.beverages .wrapper .tit_box {
  color: #393F31;
  text-align: center;
  margin: 0 0 clamp(75px, 12.98828125vw, 133px) 0;
}
.beverages .wrapper .tit_box .subtit {
  display: block;
  font-family: "Grandiflora One", cursive;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  margin: 0 0 0.34375em 0;
  opacity: 0.4;
  -webkit-text-stroke: 1px #393F31;
}
.beverages .wrapper .tit_box h2 {
  font-size: clamp(3.2rem, 5.859375vw, 6rem);
  font-weight: 700;
}
.beverages .wrapper .contents_box {
  position: relative;
  margin: 0 0 clamp(39px, 4.4921875vw, 46px) 0;
}
.beverages .wrapper .contents_box ul {
  border-style: solid;
  border-color: #030316;
  border-width: 2px 0 2px 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: space-between;
  align-items: center;
}
.beverages .wrapper .contents_box ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  border-color: #030316;
  border-width: 0 1px 1px 0;
  height: 100%;
  padding: clamp(13px, 2.34375vw, 24px) 0 clamp(24px, 4.296875vw, 44px) 0;
  background-image: linear-gradient(0deg, #030316 0%, #030316 100%);
  background-color: #F5F2EB;
  background-size: 100% 0%;
  background-repeat: no-repeat;
  background-position: left top;
  transition: background-size 0.3s;
}
.beverages .wrapper .contents_box ul li .photo {
  height: clamp(164px, 35.15625vw, 360px);
  overflow: hidden;
  z-index: 1;
}
.beverages .wrapper .contents_box ul li .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
  filter: drop-shadow(8px 4px 32px rgba(0, 0, 0, 0.1));
}
.beverages .wrapper .contents_box ul li h3 {
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
  font-weight: 700;
  color: #030316;
  z-index: 1;
}
.beverages .wrapper .contents_box ul li span {
  color: #030316;
  z-index: 1;
}
.beverages .wrapper .contents_box ul li:hover {
  background-size: 100% 100%;
}
.beverages .wrapper .contents_box ul li:hover h3, .beverages .wrapper .contents_box ul li:hover span {
  color: #FCFCE9; /* $color-tit 반대 색 */
  mix-blend-mode: difference;
}
.beverages .wrapper .contents_box::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(calc(-50% - 13.125vw));
  width: clamp(96px, 15.8203125vw, 162px);
  height: clamp(89px, 14.6484375vw, 150px);
  background: url(../images/main/beverages_coffeecup.svg) no-repeat center center/contain;
}
.beverages .wrapper .more a {
  display: inline-block;
  padding: 0.4em 1.4em;
  font-size: clamp(1.8rem, 1.953125vw, 2rem);
  font-weight: 700;
  border: 1px solid #030316;
}
.beverages .wrapper .more a:hover {
  background-color: #030316;
  color: #ffffff;
}

@media screen and (min-width: 1025px) {
  .beverages .wrapper .contents_box ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .beverages .wrapper .contents_box ul li:nth-child(4n-3) {
    /* 그리드 왼쪽 열 요소 */
    border-left-width: 1px;
  }
  .beverages .wrapper .contents_box ul li:nth-child(n+5) {
    /* 그리드 마지막 행 요소 */
    border-bottom-width: 0;
  }
}
@media screen and (min-width: 321px) and (max-width: 1024px) {
  .beverages .wrapper .contents_box {
    width: 100%;
  }
  .beverages .wrapper .contents_box ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .beverages .wrapper .contents_box ul li:nth-child(2n-1) {
    /* 그리드 왼쪽 열 요소 */
    border-left-width: 1px;
  }
  .beverages .wrapper .contents_box ul li:nth-child(n+7) {
    /* 그리드 마지막 행 요소 */
    border-bottom-width: 0;
  }
  .beverages .wrapper .contents_box::before {
    transform: translateX(calc(-50% - 28.3333333333vw));
  }
} /* @media screen and (min-width: 321px) and (max-width: 1024px) */
@media screen and (max-width: 320px) {
  .beverages .wrapper .contents_box {
    width: 100%;
  }
  .beverages .wrapper .contents_box ul {
    grid-template-columns: repeat(1, 1fr);
  }
  .beverages .wrapper .contents_box ul li:nth-child(1n-0) {
    /* 그리드 왼쪽 열 요소 */
    border-left-width: 1px;
  }
  .beverages .wrapper .contents_box ul li:nth-child(n+8) {
    /* 그리드 마지막 행 요소 */
    border-bottom-width: 0;
  }
  .beverages .wrapper .contents_box::before {
    transform: translateX(calc(-50% - 20.8333333333vw));
  }
} /* @media screen and (max-width: 320px) */
.procedure {
  background: url(../images/main/procedure_bg.jpg) #222 no-repeat center center/cover;
  padding: clamp(103px, 17.7734375vw, 182px) 0 clamp(76px, 13.57421875vw, 139px) 0;
}
.procedure .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.procedure .wrapper .tit_box {
  color: #393F31;
  text-align: center;
  margin: 0 0 clamp(75px, 12.98828125vw, 133px) 0;
}
.procedure .wrapper .tit_box .subtit {
  display: block;
  font-family: "Grandiflora One", cursive;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  margin: 0 0 0.34375em 0;
  opacity: 0.4;
  -webkit-text-stroke: 1px #393F31;
}
.procedure .wrapper .tit_box h2 {
  font-size: clamp(3.2rem, 5.859375vw, 6rem);
  font-weight: 700;
}
.procedure .wrapper .contents_box {
  background-color: #ffffff;
  width: 100%;
}
.procedure .wrapper .contents_box ul {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: clamp(16px, 5.859375vw, 60px) clamp(16px, 7.8125vw, 80px);
  border-style: solid;
  border-color: #030316;
  border-width: 2px 0;
}
.procedure .wrapper .contents_box ul li {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: clamp(15px, 1.7578125vw, 18px) clamp(20px, 2.9296875vw, 30px) clamp(20px, 4.78515625vw, 49px) clamp(7px, 2.9296875vw, 30px);
  border-style: solid;
  border-color: #030316;
  border-width: 0 1px 1px 0;
  position: relative;
}
.procedure .wrapper .contents_box ul li.numbering {
  gap: 57px 3px;
}
.procedure .wrapper .contents_box ul li.numbering::before {
  /* 절차 숫자 */
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2.375em;
  height: 3.75em;
  margin: 31px 30px 0 0;
  background-position: right top;
  background-repeat: no-repeat;
  background-size: contain;
}
.procedure .wrapper .contents_box ul li.numbering.one::before {
  background-image: url(../images/main/procedure_numbering_01.svg);
}
.procedure .wrapper .contents_box ul li.numbering.two::before {
  background-image: url(../images/main/procedure_numbering_02.svg);
}
.procedure .wrapper .contents_box ul li.numbering.three::before {
  background-image: url(../images/main/procedure_numbering_03.svg);
}
.procedure .wrapper .contents_box ul li.numbering.four::before {
  background-image: url(../images/main/procedure_numbering_04.svg);
}
.procedure .wrapper .contents_box ul li.numbering.five::before {
  background-image: url(../images/main/procedure_numbering_05.svg);
}
.procedure .wrapper .contents_box ul li.numbering.six::before {
  background-image: url(../images/main/procedure_numbering_06.svg);
}
.procedure .wrapper .contents_box ul li.numbering.seven::before {
  background-image: url(../images/main/procedure_numbering_07.svg);
}
.procedure .wrapper .contents_box ul li.numbering.eight::before {
  background-image: url(../images/main/procedure_numbering_08.svg);
}
.procedure .wrapper .contents_box ul li.numbering::after {
  /* 화살표 */
  content: "";
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg);
  width: clamp(24px, 4.6875vw, 48px);
  height: clamp(24px, 4.6875vw, 48px);
  background-color: #ffffff;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='14' viewBox='0 0 25 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.508 3.65495L2.83075 13.5133C2.50159 13.8486 2.11209 14.0106 1.66224 13.9995C1.21239 13.9883 0.822892 13.815 0.493735 13.4797C0.164578 13.1444 2.0046e-08 12.7476 0 12.2893C-2.00169e-08 11.8311 0.164578 11.4343 0.493735 11.099L10.6318 0.804758C10.8951 0.536505 11.1913 0.335316 11.5205 0.201189C11.8496 0.0670625 12.1788 1.43879e-08 12.508 0C12.8371 -1.43879e-08 13.1663 0.0670625 13.4954 0.201189C13.8246 0.335316 14.1208 0.536505 14.3842 0.804758L24.5222 11.1325C24.8513 11.4678 25.0104 11.859 24.9995 12.3061C24.9885 12.7532 24.8184 13.1444 24.4893 13.4797C24.1601 13.815 23.7706 13.9827 23.3208 13.9827C22.8709 13.9827 22.4814 13.815 22.1523 13.4797L12.508 3.65495Z' fill='%23312016'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: clamp(12px, 2.44140625vw, 25px);
}
.procedure .wrapper .contents_box ul li.last_box {
  padding: clamp(20px, 4.78515625vw, 49px) clamp(7px, 2.9296875vw, 30px);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.procedure .wrapper .contents_box ul li.last_box h3 {
  font-size: 1.5em;
  font-weight: 700;
  color: #4B2E26;
}
.procedure .wrapper .contents_box ul li .photo, .procedure .wrapper .contents_box ul li .txt_box {
  z-index: 1;
}
.procedure .wrapper .contents_box ul li .photo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(40px, 10.7421875vw, 110px);
}
.procedure .wrapper .contents_box ul li .photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}
.procedure .wrapper .contents_box ul li .txt_box {
  margin: 0 0 0 20px;
}
.procedure .wrapper .contents_box ul li .txt_box h3 {
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
  font-weight: 700;
  color: #030316;
  line-height: 1.2;
  margin: 0 0 0.375em;
}
.procedure .wrapper .contents_box ul li:hover {
  background-color: rgba(219, 204, 179, 0.1);
}

@media screen and (min-width: 1025px) {
  .procedure .wrapper .contents_box ul li {
    width: calc(33.3333333333% - 0px);
  }
  .procedure .wrapper .contents_box ul li:nth-child(3n-2) {
    /* 그리드 왼쪽 열 요소 */
    border-left-width: 1px;
  }
  .procedure .wrapper .contents_box ul li:nth-child(n+7) {
    /* 그리드 마지막 행 요소 */
    border-bottom-width: 0;
  }
  .procedure .wrapper .contents_box ul li:not(:nth-child(3n))::after {
    display: block;
  }
} /* @media screen and (min-width: 1025px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .procedure .wrapper .contents_box ul li {
    width: calc(50% - 0px);
  }
  .procedure .wrapper .contents_box ul li:nth-child(2n-1) {
    /* 그리드 왼쪽 열 요소 */
    border-left-width: 1px;
  }
  .procedure .wrapper .contents_box ul li:nth-child(n+9) {
    /* 그리드 마지막 행 요소 */
    border-bottom-width: 0;
  }
  .procedure .wrapper .contents_box ul li:not(:nth-child(2n))::after {
    display: block;
  }
} /* @media screen and (min-width: 769px) and (max-width: 1024px) */
@media screen and (max-width: 768px) {
  .procedure .wrapper .contents_box ul li {
    flex-direction: row;
    width: calc(100% - 0px);
    border-width: 0 0 1px 0;
  }
  .procedure .wrapper .contents_box ul li:nth-child(n+10) {
    /* 그리드 마지막 행 요소 */
    border-bottom-width: 0;
  }
  .procedure .wrapper .contents_box ul li.numbering::before {
    display: none;
  }
  .procedure .wrapper .contents_box ul li.numbering::after {
    display: block;
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translate(50%, 50%) rotate(180deg);
  }
  .procedure .wrapper .contents_box ul li .txt_box {
    width: 100%;
    margin: 2.2222222222vw 0 0 0;
  }
} /* @media screen and (max-width: 768px) */
.faq {
  background-color: #EAE7E0;
  padding: clamp(103px, 17.7734375vw, 182px) 0 clamp(57px, 7.51953125vw, 77px) 0;
}
.faq .wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.faq .wrapper .tit_box {
  color: #393F31;
  text-align: center;
  margin: 0 0 clamp(75px, 12.98828125vw, 133px) 0;
}
.faq .wrapper .tit_box .subtit {
  display: block;
  font-family: "Grandiflora One", cursive;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  margin: 0 0 0.34375em 0;
  opacity: 0.4;
  -webkit-text-stroke: 1px #393F31;
}
.faq .wrapper .tit_box h2 {
  font-size: clamp(3.2rem, 5.859375vw, 6rem);
  font-weight: 700;
}
.faq .wrapper .contents_box {
  width: calc(100% - clamp(40px, 5.5555555556vw, 80px) * 2);
  margin: 0 clamp(40px, 5.5555555556vw, 80px);
}
.faq .wrapper .contents_box ul {
  border-style: solid;
  border-color: #030316;
  border-width: 2px 0;
}
.faq .wrapper .contents_box ul li {
  border-style: solid;
  border-color: #030316;
  border-width: 0 0 2px 0;
}
.faq .wrapper .contents_box ul li:last-child {
  border-bottom-width: 0;
}
.faq .wrapper .contents_box ul li .accordion-header {
  position: relative;
}
.faq .wrapper .contents_box ul li .accordion-header .accordion-button {
  position: relative;
  text-align: left;
  width: 100%;
  padding: 1.2727272727em 54px 1.2727272727em 0;
}
.faq .wrapper .contents_box ul li .accordion-header .accordion-button span {
  font-size: clamp(2.2rem, 2.734375vw, 2.8rem);
  font-weight: 700;
  color: #030316;
}
.faq .wrapper .contents_box ul li .accordion-header .accordion-button::after {
  /* 더하기 세로 선 */
  content: "";
  position: absolute;
  right: 11px;
  /* 높이: 패딩 + 글자 높이의 1/4 */
  top: calc(1.2727272727em + clamp(2.2rem, 2.734375vw, 2.8rem) / 4);
  width: 2px;
  height: 23px;
  transform: rotate(0);
  transition: width 0.3s, transform 0.3s;
  background-color: #030316;
  pointer-events: none;
}
.faq .wrapper .contents_box ul li .accordion-header::after {
  /* 더하기 가로 선 */
  content: "";
  position: absolute;
  right: 0;
  /* 높이: 패딩 + 글자 높이의 1/4 + 세로선의 절반 */
  top: calc(1.2727272727em + clamp(2.2rem, 2.734375vw, 2.8rem) / 4 + 11px);
  transform: translateY(-50%);
  width: 23px;
  height: 2px;
  background-color: #030316;
  pointer-events: none;
}
.faq .wrapper .contents_box ul li .accordion-collapse {
  display: grid;
  grid-template-rows: 0fr;
  height: auto;
  margin-bottom: 0;
  transition: grid-template-rows 0.3s, margin-bottom 0.3s;
  transition-timing-function: ease;
}
.faq .wrapper .contents_box ul li .accordion-collapse p {
  overflow: hidden;
  font-size: clamp(1.6rem, 1.7578125vw, 1.8rem);
}
.faq .wrapper .contents_box ul li.active .accordion-header .accordion-button::after {
  width: 0;
  transform: rotate(90deg);
}
.faq .wrapper .contents_box ul li.active .accordion-collapse {
  /* 액티브 설정 */
  grid-template-rows: 1fr;
  margin-bottom: 1.2727272727em;
}
.faq .wrapper .divider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: clamp(122px, 22.265625vw, 228px) 0 0 0;
  width: 100%;
  height: 1px;
  background: #222222;
}
.faq .wrapper .divider .divider_img {
  width: clamp(152px, 29.6875vw, 304px);
  height: clamp(38px, 7.32421875vw, 75px);
  background: url(../images/main/faq_divider_with_bg.svg) no-repeat center center/contain;
}

@media screen and (max-width: 1024px) {
  .faq .wrapper .contents_box {
    /* 1024: 56.8889 => 360: 0px */
    width: calc(100% - max(0px, 5.5555555556vw - 20px) * 2);
    margin: 0 max(0px, 5.5555555556vw - 20px);
  }
  .faq .wrapper .contents_box ul li .accordion-header .accordion-button {
    word-break: normal;
  }
  .faq .wrapper .contents_box ul li .accordion-header .accordion-button::after {
    right: 27px;
  }
  .faq .wrapper .contents_box ul li .accordion-header::after {
    right: 16px;
  }
  .faq .wrapper .contents_box .accordion-collapse p {
    word-break: normal;
  }
}
.expense {
  margin: 0 0 clamp(82px, 14.84375vw, 152px) 0;
  padding-top: clamp(103px, 17.7734375vw, 182px);
}
.expense .tit_box {
  color: #393F31;
  text-align: center;
  margin: 0 0 clamp(75px, 12.98828125vw, 133px) 0;
}
.expense .tit_box .subtit {
  display: block;
  font-family: "Grandiflora One", cursive;
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  margin: 0 0 0.34375em 0;
  opacity: 0.4;
  -webkit-text-stroke: 1px #393F31;
}
.expense .tit_box h2 {
  font-size: clamp(3.2rem, 5.859375vw, 6rem);
  font-weight: 700;
}
.expense .contents_box {
  overflow-x: auto;
}
.expense .contents_box table {
  border-style: solid;
  border-color: #030316;
  border-width: 2px 0;
  min-width: 1186px;
}
.expense .contents_box table colgroup col:nth-child(1) {
  width: 13.75em;
}
.expense .contents_box table colgroup col:nth-child(2) {
  width: 43.9375em;
}
.expense .contents_box table colgroup col:nth-child(3) {
  width: 18.5625em;
}
.expense .contents_box table colgroup col:nth-child(4) {
  width: 13.75em;
}
.expense .contents_box table thead tr th,
.expense .contents_box table tbody tr th,
.expense .contents_box table tfoot tr th {
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  font-weight: 700;
  height: 2.53125em;
  text-align: center;
  line-height: 1.2;
}
.expense .contents_box table thead tr {
  border-style: solid;
  border-color: #030316;
  border-width: 0 0 2px 0;
}
.expense .contents_box table thead tr th {
  background-color: #4B2E26;
  color: #ffffff;
}
.expense .contents_box table tbody tr td:nth-of-type(4n+1),
.expense .contents_box table tfoot tr td:nth-of-type(4n+1) {
  /* 세부내용 */
  padding-left: 1.5em;
}
.expense .contents_box table tbody tr td:nth-of-type(4n+2),
.expense .contents_box table tfoot tr td:nth-of-type(4n+2) {
  /* 금액(원) */
  text-align: right;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 2.0416666667em;
  white-space: nowrap;
}
.expense .contents_box table tbody tr td:nth-of-type(4n+3),
.expense .contents_box table tfoot tr td:nth-of-type(4n+3) {
  /* 비고 */
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}
.expense .contents_box table tbody tr {
  border-style: solid;
  border-color: #030316;
  border-width: 0 0 2px 0;
}
.expense .contents_box table tbody tr th span {
  display: block;
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
  color: #030316;
}
.expense .contents_box table tbody tr td:nth-of-type(4n+2) {
  /* 금액(원) */
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
}
.expense .contents_box table tbody tr td:nth-of-type(4n+3) {
  /* 비고 */
  font-size: clamp(1.8rem, 1.953125vw, 2rem);
}
.expense .contents_box table tbody tr td .price_before {
  display: inline-block;
  margin-right: 1.8333333333em;
  position: relative;
}
.expense .contents_box table tbody tr td .price_before::before, .expense .contents_box table tbody tr td .price_before::after {
  /* 할인 전 가격 취소선 */
  content: "";
  position: absolute;
  right: -0.0833333333em;
  transform: translateY(-50%);
  width: calc(100% + 0.1666666667em);
  height: 2px;
  background-color: #9A3837;
}
.expense .contents_box table tbody tr td .price_before::before {
  top: calc(50% - 0.125em);
}
.expense .contents_box table tbody tr td .price_before::after {
  top: calc(50% + 0.125em);
}
.expense .contents_box table tbody tr td .price_cut {
  display: inline-block;
  position: relative;
}
.expense .contents_box table tbody tr td .price_cut::after {
  /* 화살표 */
  content: "";
  position: absolute;
  right: 1.25em;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75em;
  height: 0.5833333333em;
  background: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.25 14L9.675 12.3083L13.6688 8.16667H0V5.83333H13.6688L9.675 1.69167L11.25 0L18 7L11.25 14Z' fill='%23030316'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.75em;
}
.expense .contents_box table tbody tr td .emphisis {
  font-size: clamp(2rem, 2.34375vw, 2.4rem);
  color: #9A3837;
}
.expense .contents_box table tbody tr td .optional {
  opacity: 0.6;
}
.expense .contents_box table tfoot tr {
  background-color: #F5F2EB;
}
.expense .contents_box table tfoot tr th {
  font-size: clamp(2.4rem, 3.125vw, 3.2rem);
  color: #4B2E26;
}
.expense .contents_box table tfoot tr td:nth-of-type(4n+2) {
  /* 금액(원) */
  font-size: clamp(2.2rem, 2.734375vw, 2.8rem);
  color: #4B2E26;
}
.expense .contents_box table tfoot tr td:nth-of-type(4n+3) {
  /* 비고 */
  font-size: clamp(1.8rem, 1.953125vw, 2rem);
}

.util {
  position: fixed;
  right: 0;
  bottom: clamp(48px, 5.859375vw, 60px);
  z-index: 100;
}
.util .util_wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  margin: 0 clamp(16px, 5.859375vw, 60px);
  gap: 12px 0;
}
.util .util_wrapper .fab:active {
  outline: 2px solid #030316;
  outline-offset: 2px;
}
.util .util_wrapper .fab {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
}
.util .util_wrapper .fab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2.125em;
  width: 100%;
  height: 100%;
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
}
.util .util_wrapper .fab.inquiry {
  display: none;
}
@media screen and (max-width: 768px) {
  .util .util_wrapper .fab.inquiry {
    display: flex;
  }
}
.util .util_wrapper .fab.inquiry {
  background-color: #4B2E26;
}
.util .util_wrapper .fab.inquiry::after {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33333 14C0.966667 14 0.652778 13.8629 0.391667 13.5887C0.130556 13.3146 0 12.985 0 12.6V2.8C0 2.415 0.130556 2.08542 0.391667 1.81125C0.652778 1.53708 0.966667 1.4 1.33333 1.4H4.13333C4.27778 0.98 4.51944 0.641667 4.85833 0.385C5.19722 0.128333 5.57778 0 6 0C6.42222 0 6.80278 0.128333 7.14167 0.385C7.48056 0.641667 7.72222 0.98 7.86667 1.4H10.6667C11.0333 1.4 11.3472 1.53708 11.6083 1.81125C11.8694 2.08542 12 2.415 12 2.8V12.6C12 12.985 11.8694 13.3146 11.6083 13.5887C11.3472 13.8629 11.0333 14 10.6667 14H1.33333ZM3.33333 11.2H6.66667C6.85556 11.2 7.01389 11.1329 7.14167 10.9988C7.26944 10.8646 7.33333 10.6983 7.33333 10.5C7.33333 10.3017 7.26944 10.1354 7.14167 10.0013C7.01389 9.86708 6.85556 9.8 6.66667 9.8H3.33333C3.14444 9.8 2.98611 9.86708 2.85833 10.0013C2.73056 10.1354 2.66667 10.3017 2.66667 10.5C2.66667 10.6983 2.73056 10.8646 2.85833 10.9988C2.98611 11.1329 3.14444 11.2 3.33333 11.2ZM3.33333 8.4H8.66667C8.85556 8.4 9.01389 8.33292 9.14167 8.19875C9.26945 8.06458 9.33333 7.89833 9.33333 7.7C9.33333 7.50167 9.26945 7.33542 9.14167 7.20125C9.01389 7.06708 8.85556 7 8.66667 7H3.33333C3.14444 7 2.98611 7.06708 2.85833 7.20125C2.73056 7.33542 2.66667 7.50167 2.66667 7.7C2.66667 7.89833 2.73056 8.06458 2.85833 8.19875C2.98611 8.33292 3.14444 8.4 3.33333 8.4ZM3.33333 5.6H8.66667C8.85556 5.6 9.01389 5.53292 9.14167 5.39875C9.26945 5.26458 9.33333 5.09833 9.33333 4.9C9.33333 4.70167 9.26945 4.53542 9.14167 4.40125C9.01389 4.26708 8.85556 4.2 8.66667 4.2H3.33333C3.14444 4.2 2.98611 4.26708 2.85833 4.40125C2.73056 4.53542 2.66667 4.70167 2.66667 4.9C2.66667 5.09833 2.73056 5.26458 2.85833 5.39875C2.98611 5.53292 3.14444 5.6 3.33333 5.6ZM6.35833 2.12625C6.45278 2.02708 6.5 1.90167 6.5 1.75C6.5 1.59833 6.45278 1.47292 6.35833 1.37375C6.26389 1.27458 6.14444 1.225 6 1.225C5.85556 1.225 5.73611 1.27458 5.64167 1.37375C5.54722 1.47292 5.5 1.59833 5.5 1.75C5.5 1.90167 5.54722 2.02708 5.64167 2.12625C5.73611 2.22542 5.85556 2.275 6 2.275C6.14444 2.275 6.26389 2.22542 6.35833 2.12625Z' fill='white'/%3E%3C/svg%3E%0A");
}
.util .util_wrapper .fab.top {
  background-color: #030316;
}
.util .util_wrapper .fab.top::after {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.697674 6C0.488372 6 0.319767 5.93617 0.19186 5.80851C0.0639535 5.68085 0 5.53192 0 5.3617C0 5.31915 0.0697674 5.17021 0.209302 4.91489L5.26744 0.287234C5.38372 0.180851 5.5 0.106383 5.61628 0.0638298C5.73256 0.0212766 5.86047 0 6 0C6.13953 0 6.26744 0.0212766 6.38372 0.0638298C6.5 0.106383 6.61628 0.180851 6.73256 0.287234L11.7907 4.91489C11.8605 4.97872 11.9128 5.04787 11.9477 5.12234C11.9826 5.19681 12 5.2766 12 5.3617C12 5.53192 11.936 5.68085 11.8081 5.80851C11.6802 5.93617 11.5116 6 11.3023 6H0.697674Z' fill='white'/%3E%3C/svg%3E%0A");
}
.util .util_wrapper .fab span {
  display: block;
  text-align: center;
  margin-top: 1.5625em;
}

@media screen and (max-width: 768px) {
  .util {
    font-size: 0.875em;
  }
} /* @media screen and (max-width: 768px) */