html,
body {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  background-color: #060a10;
  color: #bec2cb;
}
p {
  margin: 0;
}
.board-write-wrap {
  display: none;
}

/* header */
#header,
#header > *,
#header > * > *,
#header > * > * > *,
#header > * > * > * > *,
#header > * > * > * > * > *,
#header > * > * > * > * > * > *,
#header > * > * > * > * > * > * > * {
  transition: all 0.2s ease;
}
#header {
  position: relative;
  z-index: 2;
}
.header-container {
  padding: 0 80px;
  position: fixed;
  width: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
}
.header-container.on {
  background: rgba(6, 10, 16, 0.2);
  backdrop-filter: blur(4px);
}
#header:has(.header-container.zIndex) {
  z-index: 100;
}
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 180px;
}
.logo {
  height: 56px;
}
.logo img {
  object-fit: contain;
  height: 100%;
}
.naviWrap {
  display: flex;
}
.naviWrap ul {
  margin: 0;
  display: flex;
  list-style: none;
  padding: 0;
  gap: 6px;
}
.naviWrap ul li a {
  color: #d7d3cf;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  padding: 12px 24px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.naviWrap ul li a .sub {
  font-size: 12px;
  font-weight: 300;
}
.naviWrap ul li.active a::before,
.naviWrap ul li.active a::after {
  position: absolute;
  content: "";
  bottom: 4px;
  right: 10%;
  width: 80%;
  height: 1px;
  background-color: #d7d3cf;
  transition: all 0.2s ease;
}
.naviWrap ul li.active a::before {
  top: 4px;
}
.naviWrap ul li.active a:hover,
.naviWrap ul li a:hover {
  color: #8a847d;
  transition: all 0.2s ease;
}
.naviWrap ul li.active a:hover::before,
.naviWrap ul li.active a:hover::after {
  background-color: #8a847d;
  transition: all 0.2s ease;
}
.naviWrap ul li.reserv-btn {
  border-radius: 1000px;
  background-color: var(--bs-theme);
  transition: all 0.2s ease;
}
.naviWrap ul li.reserv-btn:hover {
  background-color: var(--bs-theme-sub);
  transition: all 0.2s ease;
}
.naviWrap ul li.reserv-btn:hover a {
  color: var(--bs-theme);
}
.mobile-menuBtn {
  display: none;
  border: none;
  background-color: transparent;
  color: #ededed;
  font-size: 24px;
}
#nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  display: none;
  width: 100%;
  background: rgba(0, 0, 0, 0);
}
#nav.open {
  display: flex;
}
.nav-inner {
  background-color: #060a10;
  min-width: 320px;
  width: 360px;
}
.title-box {
  padding: 0 32px 16px 32px;
  font-size: 20px;
  font-weight: 500;
}
.title-box > div:nth-child(1) {
  font-size: 32px;
  padding-bottom: 16px;
}
.nav-list {
  list-style: none;
  display: block;
  /* height: 100vh; */
  overflow-y: auto;
  padding: 20px 32px;
}
.nav-list > li > a {
  font-weight: 700;
  text-decoration: none;
  color: #d7d3cf;
  display: block;
  padding: 20px 60px 20px 0px;
  font-size: 24px;
  position: relative;
  border-bottom: solid 1px #3a414b;
}
.nav-list > li > a p {
  margin: 0;
}
.nav-list > li > a .sub {
  font-size: 14px;
  font-weight: 300;
}
.nav-list > li > a:hover {
  color: #8a847d;
  text-decoration: none;
  font-weight: 700;
}
.copyright {
  padding: 0 32px;
}
.nav-list li.active > a {
  color: #8a847d !important;
  font-weight: 700;
}
.x-btn-box {
  width: 100%;
  padding: 20px 20px 0 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.x-btn-box .x-btn {
  border: none;
  background: transparent;
  width: 48px;
  height: 48px;
  font-size: 24px;
  color: #d7d3cf;
  text-decoration: none;
}
.x-btn-box .x-btn:hover {
  color: #8a847d;
}
.mobile-nav-backdrop {
  display: none;
}
.mobile-nav-backdrop.show {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.2s ease;
}
#header:has(#nav.open) .mobile-nav-backdrop {
  display: block;
}
#header:has(#nav.open) .mobile-nav-backdrop.show {
  opacity: 1;
  transition: all 0.2s ease;
}
@media (max-width: 1024px) {
  .header-box {
    height: 100px;
  }
  .header-container {
    padding: 0 40px;
  }
  .logo {
    height: 40px;
  }
  .mobile-menuBtn {
    display: flex;
  }
  .naviWrap .navi {
    display: none;
  }
  body:has(#nav.open) {
    overflow-y: hidden;
  }
  #mainContainer::before:has(#nav.open) {
    position: absolute;
    content: "";
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    height: 100vh;
  }
  #nav:has(.open) {
    width: 100%;
  }
  #nav.open {
    display: flex;

    animation-name: fadeIn_Left;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  #nav.open.setTime {
    width: 100%;
    display: flex;

    animation-name: fadeIn_Right;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  @keyframes fadeIn_Left {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(0%);
    }
  }
  @keyframes fadeIn_Right {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-100%);
    }
  }
}
@media (max-width: 480px) {
  .header-container {
    padding: 0 16px;
  }
  .mobile-menuBtn {
    font-size: 20px;
  }
}

/* footer */
#footer,
#footer > *,
#footer > * > *,
#footer > * > * > *,
#footer > * > * > * > *,
#footer > * > * > * > * > *,
#footer > * > * > * > * > * > * {
  transition: all 0.2s ease;
}
#footer {
  margin: 0 auto;
  /* background: url("../img/deco-bg.png") center center no-repeat;
  background-size: cover; */
  border-top: solid 1px var(--bs-theme-sub);
  position: relative;
  z-index: 1;
  background: #060a10;
}
#footer .container {
  display: flex;
  max-width: 1640px;
  padding: 80px 20px;
  margin: 0 auto;
}
#footer .container > div {
  width: 50%;
}
#footer .left {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
#footer .left .text-cont {
  display: flex;
}
#footer .left .text-cont > div {
  width: 50%;
}
#footer .text-box .tit {
  font-size: 32px;
}
#footer .text-box ul {
  list-style: none;
  margin: 0;
  padding-left: 20px;
  padding-top: 12px;
}
#footer .text-box ul li {
  display: flex;
  line-height: 2;
  gap: 12px;
}
#footer .text-box ul li p {
  margin: 0;
}
#footer .sns {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: auto;
}
#footer .sns a {
  background-color: #fff;
  border-radius: 1000px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bs-theme);
  font-size: 24px;
  text-decoration: none;
  transition: all 0.2s ease;
}
#footer .sns a:hover {
  background-color: var(--bs-theme);
  color: #fff;
  transition: all 0.2s ease;
}
#footer .week {
  width: 200px;
}
@media (max-width: 1024px) {
  #footer .container {
    flex-direction: column;
    gap: 60px;
  }
  #footer .container > div {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #footer .container {
    padding: 40px 20px;
    gap: 40px;
  }
  #footer .left {
    gap: 40px;
  }
  #footer .text-box .tit {
    font-size: 24px;
  }
  #footer .text-box ul {
    padding-left: 12px;
    padding-top: 8px;
  }
}
@media (max-width: 480px) {
  #footer .left .text-cont {
    flex-direction: column;
    gap: 40px;
  }
  #footer .text-box ul li {
    line-height: 1.5;
    flex-direction: column;
    margin-bottom: 12px;
    gap: 0;
  }
  #footer .left .text-cont > div {
    width: 100%;
  }
}

/* intro */
#intro-section {
  position: relative;
  height: 200vh;
}
#intro,
#intro > *,
#intro > * > * {
  transition: all 0.2s ease;
}
#intro {
  position: sticky;
  top: 0;

  z-index: 5;
  height: 100vh;
  overflow: hidden;
  background: #060a10;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}
#intro .intro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(6, 10, 16, 0.3), transparent 60%),
    #020611;
  z-index: 1;
}
#intro .fog-wrap {
  position: absolute;
  inset: -10%;
  z-index: 2;
  overflow: hidden;
  will-change: transform, opacity, filter;
}
#intro .fog {
  position: absolute;
  inset: 0;
  background-image: url("../img/fog.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
  opacity: 0.45;
  filter: blur(10px);
  animation: fogFlow 80s linear infinite;
  will-change: background-position;
}
@keyframes fogFlow {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 1920px center;
  }
}
#intro .intro-text {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #d7d3cf;
  will-change: transform, opacity, filter;
}
#intro .intro-text img {
  width: 400px;
}
#intro .intro-text p {
  font-size: 32px;
  padding-top: 20px;
}
@media (max-width: 768px) {
  #intro .intro-text img {
    width: 240px;
  }
  #intro .intro-text p {
    font-size: 16px;
  }
}

/* main */
#main,
#main > *,
#main > * > * {
  transition: all 0.2s ease;
}
#main {
  margin: 0 auto;
  height: 100vh;
  background: url("../img/main.png") center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;

  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(1.08);
  will-change: transform, opacity;
}
#main::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(6, 10, 16, 0.2);
  z-index: 0;
}
#main .text-box {
  font-size: 48px;
  color: #fff;
  padding-left: 10%;
  letter-spacing: 4px;
  position: relative;
  z-index: 1;
}
#main .text-box .sub {
  font-size: 24px;
  font-weight: 300;
  margin-top: -16px;
}
@media (max-width: 1024px) {
  #main .text-box {
    padding-left: 5%;
  }
}
@media (max-width: 768px) {
  #main .text-box {
    font-size: 40px;
    letter-spacing: 2px;
  }
  #main .text-box .sub {
    margin-top: -12px;
  }
}
@media (max-width: 480px) {
  #main .text-box {
    padding: 0 20px;
  }
  #main .text-box .sub {
    margin-top: 0px;
    line-height: 1.2;
  }
}

#contents {
  position: relative;
  z-index: 1;
  background: #fff;
}

/* sec2 */
#sec2,
#sec2 > *,
#sec2 > * > * {
  transition: all 0.2s ease;
}
#sec2 {
  margin: 0 auto;
  height: 100vh;
  background: url("../img/sec2.png") left center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #060a10;
}
#sec2 .text-box {
  max-width: 800px;
  font-size: 24px;
}
#sec2 .text-box p {
  margin-bottom: 24px;
  text-align: center;
}
#sec2 .text-box p:nth-last-child(1) {
  margin: 0;
}
@media (max-width: 1024px) {
  #sec2 .text-box {
    max-width: 600px;
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  #sec2 .text-box {
    font-size: 16px;
    padding: 0 20px;
  }
}
@media (max-width: 480px) {
  #sec2 .text-box p {
    text-align: left;
  }
}

/* sec3 */
#sec3,
#sec3 > *,
#sec3 > * > *,
#sec3 > * > * > *,
#sec3 > * > * > * > *,
#sec3 > * > * > * > * > * {
  transition: all 0.2s ease;
}
#sec3 {
  display: flex;
  width: 100%;
  border-top: solid 0.5px rgba(var(--bs-theme-sub-rgb), 0.4);
  border-bottom: solid 0.5px rgba(var(--bs-theme-sub-rgb), 0.4);
  background-color: #060a10;
}
#sec3 > div {
  width: 50%;
  height: 600px;
  display: flex;
  border-right: solid 0.5px rgba(var(--bs-theme-sub-rgb), 0.4);
}
#sec3 > div:nth-last-child(1) {
  border: none;
}
#sec3 .img-box {
  width: 50%;
  height: 100%;
  background: url("../img/sec3-1.png") center center no-repeat;
  background-size: cover;
}
#sec3 .right .img-box {
  background: url("../img/sec3-2.png") center center no-repeat;
  background-size: cover;
}
#sec3 .right-box {
  width: 50%;
  padding: 90px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#sec3 .text-box .tit {
  font-size: 32px;
  position: relative;
  margin-bottom: 80px;
}
#sec3 .text-box .tit::before {
  position: absolute;
  content: "";
  bottom: -16px;
  left: 0;
  width: 80px;
  height: 4px;
  background-color: var(--bs-theme);
}
#sec3 .text-box ul {
  list-style: "-";
  font-size: 18px;
  line-height: 1.8;
}
#sec3 .right-box a {
  border: solid 2px var(--bs-theme);
  padding: 20px 40px;
  font-size: 18px;
  background-color: transparent;
  color: #bec2cb;
  text-decoration: none;
  transition: all 0.2s ease;
  width: fit-content;
  border-radius: 4px;
}
#sec3 .right-box a:hover {
  background-color: rgba(var(--bs-theme-rgb), 0.4);
  transition: all 0.2s ease;
}
@media (max-width: 1400px) {
  #sec3 > div {
    height: 400px;
  }
  #sec3 .right-box {
    padding: 40px;
  }
  #sec3 .right-box a {
    padding: 16px 24px;
  }
}
@media (max-width: 1024px) {
  #sec3 {
    flex-direction: column;
  }
  #sec3 > div {
    width: 100%;
    border: none;
    border-bottom: solid 0.5px rgba(var(--bs-theme-sub-rgb), 0.4);
  }
}
@media (max-width: 768px) {
  #sec3 .right-box {
    padding: 40px 32px;
  }
  #sec3 .text-box .tit {
    font-size: 24px;
    margin-bottom: 50px;
  }
  #sec3 .text-box ul {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  #sec3 > div {
    height: 500px;
    flex-direction: column;
  }
  #sec3 .img-box,
  #sec3 .right-box {
    width: 100%;
  }
  #sec3 .right-box {
    padding: 28px 20px;
  }
  #sec3 .right-box a {
    padding: 14px 20px;
    margin-left: auto;
  }
}

/* sec4 */
/* #sec4,
#sec4 > *,
#sec4 > * > * {
  transition: all 0.2s ease;
}
#sec4 {
  margin: 0 auto;
  height: 100%;
  background: url("../img/sec4.png") center center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sec4 .text-box {
  max-width: 600px;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 20px;
}
#sec4 .text-box .tit {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}
#sec4 .text-box .sub {
  text-align: center;
}
#sec4 .text-box a {
  margin-top: 40px;
  border: solid 2px var(--bs-theme);
  padding: 16px 40px;
  font-size: 24px;
  background-color: transparent;
  color: var(--bs-theme);
  text-decoration: none;
  transition: all 0.2s ease;
  width: fit-content;
  border-radius: 4px;
}
#sec4 .text-box a:hover {
  background-color: rgba(var(--bs-theme-rgb), 0.2);
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  #sec4 .text-box,
  #sec4 .text-box a {
    font-size: 20px;
  }
  #sec4 .text-box .tit {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  #sec4 .text-box {
    align-items: flex-start;
    font-size: 16px;
  }
  #sec4 .text-box .sub {
    text-align: start;
  }
} */

/* sec5 */
#sec5,
#sec5 > *,
#sec5 > * > * {
  transition: all 0.2s ease;
}
#sec5 {
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #060a10;
}
#sec5 .img-box {
  display: flex;
  padding: 80px 160px;
}
#sec5 .img-box img {
  width: 25%;
}
@media (max-width: 1400px) {
  #sec5 .img-box {
    padding: 60px 80px;
  }
}
@media (max-width: 1024px) {
  #sec5 .img-box {
    padding: 40px;
  }
}
@media (max-width: 768px) {
  #sec5 .img-box {
    flex-wrap: wrap;
  }
  #sec5 .img-box img {
    width: 50%;
  }
}

@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 480px) {
}