@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
html {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 500;
  line-height: 150%;
  background: #fff;
  font-size: 1.25vw;
  color: #000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* {
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

img {
  display: block;
}

button {
  display: block;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.25vw;
}

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

#mask {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  display: none;
}

#loadingImg {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 120;
}

.none {
  display: none !important;
}

.bounce {
  transition: all 800ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.shadow {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.taR {
  text-align: right;
}

.pc {
  display: block;
}

.mb {
  display: none !important;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 0;
}
header .navBar {
  box-shadow: 0 0 0.5vw 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 2vw;
  right: 4vw;
  width: 92%;
  height: 3.2vw;
  padding: 0 1vw;
  background: #fff;
  border-radius: 0.8vw;
  transition: all 0.3s;
}
header .navBar button {
  display: flex;
  align-items: center;
  gap: 1vw;
  font-size: 1.4em;
  font-weight: 700;
  color: #000;
  cursor: pointer;
}
header .navBar button .icon {
  width: 1.6vw;
}
header .navBar .logo {
  width: 2.5vw;
}
header .nav_container {
  box-shadow: 0 0 0.5vw 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  background: #fff;
  padding-top: 2vw;
  transition: transform 0.2s;
  transform: translateX(-100%);
}
header .nav_container a {
  display: block;
}
header .nav_container a img {
  width: 20vw;
}
header.active .navBar {
  width: calc(92% - 20vw);
}
header.active .nav_container {
  transform: translateX(0);
}
header.minimum .navBar {
  width: 5vw;
  right: 2vw;
  justify-content: center;
}
header.minimum .navBar button > span, header.minimum .navBar a {
  display: none;
}
header .navSub {
  display: flex;
  gap: 1vw;
  position: absolute;
  top: 7vw;
  right: 4vw;
}
header .navSub a {
  display: block;
  background: #fff;
  color: #000;
  padding: 0 3vw;
  border-radius: 10vw;
  font-size: 1em;
  line-height: 2.5vw;
  font-weight: 700;
  box-shadow: 0 0 0.5vw 0 rgba(0, 0, 0, 0.5);
}
header .navSub a.btn_resv {
  background: #000;
  color: #fff;
  box-shadow: none;
}
header .navSub a.btn_insta {
  padding: 0;
}
header .navSub a img {
  width: 2.5vw;
}

footer {
  font-size: 0.9em;
  line-height: 210%;
  color: #000;
  padding: 10vw 4vw 2.6vw;
}
footer .logo_footer {
  width: 92vw;
  margin-bottom: 3.6vw;
}
footer.main {
  background: #000;
  color: #fff;
}
footer.main .logo_footer {
  filter: invert(1);
}
footer.about {
  background: #E8EAE1;
}

.parallax {
  object-fit: cover;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  color: #fff;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 5vw;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.noScroll {
  overflow: hidden;
}

#modal {
  display: flex;
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
}
#modal.active {
  display: flex;
}
#modal .modalContent {
  display: none;
  z-index: 10;
  border-radius: 2vw;
  padding: 2.5vw;
  width: 83vw;
  max-height: 90vh;
  background: #fff;
}
#modal .modalContent.active {
  display: block;
}
#modal .modalContent .btn_close {
  position: absolute;
  top: 0vw;
  right: 2vw;
  width: 3vw;
  height: 3vw;
}
#modal .modalContent .btn_close img {
  width: 100%;
}
#modal .modalContent.bk {
  background: #000;
  color: #fff;
}
#modal .modalContent .worksInfo {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
  gap: 4%;
  row-gap: 2vw;
  max-height: calc(90vh - 7vw);
  overflow-y: auto;
}
#modal .modalContent .worksInfo .worksImg {
  display: block;
  width: 32vw;
  border-radius: 0.4vw;
}
#modal .modalContent .worksInfo .main {
  flex: 1 0 auto;
}
#modal .modalContent .worksInfo .main .topper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1vw;
}
#modal .modalContent .worksInfo .main .topper h3 {
  margin: 0;
  font-size: 2em;
  line-height: 100%;
}
#modal .modalContent .worksInfo .main .topper a {
  background: #fff;
  color: #000;
  padding: 0 2vw;
  border-radius: 10vw;
  margin-right: 0.5vw;
}
#modal .modalContent .worksInfo .main .info {
  display: flex;
  gap: 2.5vw;
  opacity: 0.7;
}
#modal .modalContent .worksInfo .main .info .item {
  display: flex;
  align-items: center;
  font-weight: 200;
  gap: 1vw;
  font-size: 0.7em;
}
#modal .modalContent .worksInfo .main .info .item .rate {
  width: 4vw;
  height: 0.8vw;
  display: flex;
  mask-image: none !important;
}
#modal .modalContent .worksInfo .main .info .item .rate .ratebar {
  display: block;
  position: absolute;
  top: 0;
  height: 0.8vw;
  background: #fff;
}
#modal .modalContent .worksInfo .main .description {
  font-size: 0.7em;
  line-height: 160%;
}
#modal .modalContent .worksInfo .subImg {
  display: flex;
  gap: 0.4vw;
  width: 96%;
}
#modal .modalContent .worksInfo .subImg img {
  width: calc((100% - 1.2vw) / 4);
}
#modal .modalContent .worksInfo.worksInfoB2B .worksImg {
  width: 26vw;
}
#modal .modalContent.modalBranch h3 {
  display: block;
  margin: 0 0 1vw;
  border-bottom: 1px #000 solid;
  padding: 0 0.5vw 1vw;
  font-size: 1.6em;
}
#modal .modalContent.modalBranch .btn_close {
  top: 1vw;
  right: 2vw;
}
#modal .modalContent.modalBranch .branch_info {
  display: flex;
  gap: 1.5vw;
}
#modal .modalContent.modalBranch .branch_info .branch_imgs {
  width: 32vw;
}
#modal .modalContent.modalBranch .branch_info .branch_imgs img.branchImgMain {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
#modal .modalContent.modalBranch .branch_info .branch_imgs .img_sub {
  display: flex;
  justify-content: space-between;
  gap: 0.5vw;
  margin-top: 0.5vw;
}
#modal .modalContent.modalBranch .branch_info .branch_imgs .img_sub img {
  width: calc((100% - 1vw) / 3);
  aspect-ratio: 16/9;
}
#modal .modalContent.modalBranch .branch_info .text {
  flex: 1 0 auto;
}
#modal .modalContent.modalBranch .branch_info .text > ul > li {
  display: flex;
  font-size: 0.8em;
  line-height: 180%;
  margin-bottom: 0.5vw;
}
#modal .modalContent.modalBranch .branch_info .text > ul > li .subject {
  width: 20%;
  font-weight: 700;
}
#modal .modalContent.modalBranch .branch_info .text > ul > li .right {
  width: 80%;
}

@media all and (max-width: 768px) {
  body {
    font-size: 2.5vw;
  }
  button {
    font-size: 2.5vw;
  }
  .pc {
    display: none !important;
  }
  .mb {
    display: block !important;
  }
  .shadow {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  }
  header .navBar {
    top: 4vw;
    height: 8vw;
    padding: 0 2vw;
    border-radius: 2vw;
  }
  header .navBar button {
    gap: 2vw;
  }
  header .navBar button .icon {
    width: 4vw;
  }
  header .navBar .logo {
    width: 5vw;
  }
  header .nav_container {
    z-index: 10;
    padding-top: 4vw;
  }
  header .nav_container a img {
    width: 70vw;
  }
  header.minimum .navBar {
    width: 92vw;
    right: 4vw;
    justify-content: space-between;
  }
  header.minimum .navBar button > span, header.minimum .navBar a {
    display: block;
  }
  header.active .navBar {
    width: calc(92% - 70vw);
  }
  header.active .navBar span {
    display: none !important;
  }
  header.active .nav_container {
    transform: translateX(0);
  }
  header .navSub {
    gap: 1.5vw;
    top: 15vw;
  }
  header .navSub.navSubResrv {
    justify-content: center;
    width: 92vw;
  }
  header .navSub a {
    padding: 0.2vh 6vw 0 6vw;
    font-size: 1.3em;
    line-height: 8vw;
  }
  header .navSub a.btn_resv {
    padding: 0.2vh 6vw 0 6vw;
  }
  header .navSub a.btn_insta {
    padding: 0;
  }
  header .navSub a img {
    width: 8vw;
  }
  .main_popup {
    left: 0 !important;
    top: 1.5% !important;
    width: 100% !important;
    height: auto !important;
  }
  footer {
    font-size: 1em;
    padding: 10vw;
  }
  footer .logo_footer {
    width: 100%;
    margin-bottom: 10vw;
  }
  #modal .modalContent {
    padding: 7vw;
    width: 90%;
  }
  #modal .modalContent .btn_close {
    top: 1vw;
    right: 1vw;
    width: 8vw;
    height: 8vw;
  }
  #modal .modalContent .worksInfo {
    display: block;
    max-height: calc(90vh - 14vw);
  }
  #modal .modalContent .worksInfo .worksImg {
    width: 100%;
    margin-bottom: 4vw;
  }
  #modal .modalContent .worksInfo .main {
    width: 100%;
  }
  #modal .modalContent .worksInfo .main .topper h3 {
    font-size: 2em;
    line-height: 120%;
    letter-spacing: -0.05em;
  }
  #modal .modalContent .worksInfo .main .topper a {
    padding: 0.5vw 6vw;
    font-size: 1.2em;
  }
  #modal .modalContent .worksInfo .main .info {
    gap: 4vw;
  }
  #modal .modalContent .worksInfo .main .info .item {
    font-size: 1.1em;
  }
  #modal .modalContent .worksInfo .main .info .item .rate {
    display: flex;
    mask-image: none !important;
    width: 17vw !important;
    height: 3vw !important;
  }
  #modal .modalContent .worksInfo .main .info .item .rate .ratebar {
    height: 3vw;
  }
  #modal .modalContent .worksInfo .main .description {
    font-size: 1em;
  }
  #modal .modalContent .worksInfo .subImg {
    flex-wrap: wrap;
    margin-top: 4vw;
    gap: 1vw;
    width: 100%;
  }
  #modal .modalContent .worksInfo .subImg img {
    width: calc((100% - 1vw) / 2);
  }
  #modal .modalContent .worksInfo.worksInfoB2B .worksImg {
    width: 100%;
  }
  #modal .modalContent.modalBranch h3 {
    display: block;
    margin: 0 0 1vw;
    border-bottom: 1px #000 solid;
    padding: 0 0.5vw 1vw;
    font-size: 1.6em;
  }
  #modal .modalContent.modalBranch .btn_close {
    top: 1.5vw;
    right: 2vw;
  }
  #modal .modalContent.modalBranch .branch_info {
    flex-direction: column;
    gap: 3vw;
    margin-top: 5vw;
  }
  #modal .modalContent.modalBranch .branch_info .branch_imgs {
    width: 100%;
  }
  #modal .modalContent.modalBranch .branch_info .branch_imgs .img_sub {
    gap: 1.5vw;
    margin-top: 1.5vw;
  }
  #modal .modalContent.modalBranch .branch_info .branch_imgs .img_sub img {
    width: calc((100% - 3vw) / 3);
  }
  #modal .modalContent.modalBranch .branch_info .text > ul > li {
    font-size: 1em;
  }
  #modal .modalContent.modalBranch .branch_info .text > ul > li .font12 {
    font-size: 1.2em;
  }
  #modal .modalContent.modalBranch .branch_info .text > ul > li #zizum_memo {
    white-space: break-spaces;
    margin: 0;
  }
  #loadingImg {
    position: absolute;
    left: 35%;
    bottom: 50%;
    z-index: 120;
  }
}/*# sourceMappingURL=style.css.map */