header {
  position: fixed;
  padding-top: 2.6041666667vw;
  top: 0;
  left: 3.4375vh;
  right: 12.34375vw;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
header .menu {
  display: flex;
  flex-direction: row;
  font-family: "poppins", sans-serif;
}
header .menu li {
  margin-left: 2rem;
  text-transform: uppercase;
  color: #4E4E4E;
}
header .menu li a {
  font-size: 1.25rem;
  text-decoration: none;
  color: #4e4e4e;
}
header .menu li a:hover {
  border-bottom: 4px solid #4e4e4e;
}

@media (min-width: 335px) and (max-width: 757px) {
  header {
    left: 5vw;
    right: 5vw;
  }
  header a:has(.logo) {
    width: 30%;
  }
  header .menu li a {
    font-size: 1rem;
  }
}
main {
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
main header {
  position: relative;
  left: 0;
  right: 0;
}
main .content {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-top: calc(2.6041666667vw + 60px + 24px);
}
main .content gnb {
  text-align: right;
}
main .content gnb ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
main .content gnb ul li {
  font-size: 2.5rem;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  line-height: 125%;
  letter-spacing: -0.8px;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  margin-left: 0.7rem;
  margin-right: 0.7rem;
  border: solid 1px #000;
  border-radius: 5rem;
}
main .content gnb ul li.active {
  background-color: #000;
  color: #fff;
}
main .top {
  margin-top: 5.2083333333vw;
  display: flex;
  flex-direction: row;
}
main .top .title {
  flex-basis: 60%;
  flex-grow: 1;
}
main .top .title h1 {
  font-size: 18rem;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.75rem;
  margin: 0;
}
main .top .title h1 .title_en {
  font-size: 2.5rem;
  font-family: "Manrope", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 95%;
  letter-spacing: -1.2px;
}
main .top .info {
  flex-basis: 30%;
  display: flex;
  flex-direction: row;
}
main .top .info .services, main .top .info .channels {
  margin-right: 5rem;
  flex-wrap: nowrap;
}
main .top .info .services h3, main .top .info .channels h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.4px;
}
main .top .info .services ul, main .top .info .channels ul {
  margin: 2.5rem 0 0 0;
  padding: 0;
}
main .top .info .services ul li, main .top .info .channels ul li {
  list-style: none;
  margin-left: 0;
  color: #000;
}
main .top .info .services ul a, main .top .info .channels ul a {
  text-decoration: none;
  color: #000;
  font-size: 1rem;
}
main .top-visual .visual-wrap {
  width: 100%;
}
main .top-visual .visual-wrap img {
  width: 100%;
}

.work-visual .work-visual-wrap {
  width: 100%;
}
.work-visual .work-visual-wrap.image img {
  width: 100%;
  max-width: 100%;
}
.work-visual .work-visual-wrap[class*=grid-], .work-visual .work-visual-wrap[class^=grid-] {
  margin: 5rem auto;
}
.work-visual .work-visual-wrap[class*=grid-][class$=-row-3] .gallery-item {
  flex-basis: 33.3333333333%;
}
.work-visual .work-visual-wrap.grid-50p-row-3 {
  width: 50%;
}
.work-visual .work-visual-wrap.grid-55p-row-3 {
  width: 55%;
}
.work-visual .work-visual-wrap.grid-60p-row-3 {
  width: 60%;
}
.work-visual .work-visual-wrap.grid-65p-row-3 {
  width: 65%;
}
.work-visual .work-visual-wrap.grid-70p-row-3 {
  width: 70%;
}
.work-visual .work-visual-wrap.grid-75p-row-3 {
  width: 75%;
}
.work-visual .work-visual-wrap.grid-80p-row-3 {
  width: 80%;
}
.work-visual .work-visual-wrap.grid-85p-row-3 {
  width: 85%;
}
.work-visual .work-visual-wrap.grid-90p-row-3 {
  width: 90%;
}
.work-visual .work-visual-wrap.grid-100p-row-3 {
  width: 100%;
}

.board-wrapper .board {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.board-wrapper .board .card {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}
.board-wrapper .board .card:nth-child(12n+1) {
  flex-basis: 50%;
  aspect-ratio: 837/565;
}
.board-wrapper .board .card:nth-child(12n+2) {
  flex-basis: 50%;
  aspect-ratio: 837/565;
}
.board-wrapper .board .card:nth-child(12n+3) {
  flex-basis: 100%;
  aspect-ratio: 1767/776;
}
.board-wrapper .board .card:nth-child(12n+4) {
  flex-basis: 50%;
  aspect-ratio: 837/565;
}
.board-wrapper .board .card:nth-child(12n+5) {
  flex-basis: 50%;
  aspect-ratio: 837/565;
}
.board-wrapper .board .card:nth-child(12n+6) {
  flex-basis: 60%;
  aspect-ratio: 1219/776;
}
.board-wrapper .board .card:nth-child(12n+7) {
  flex-basis: 40%;
  aspect-ratio: 466/776;
}
.board-wrapper .board .card:nth-child(12n+8) {
  flex-basis: 100%;
  aspect-ratio: 1767/776;
}
.board-wrapper .board .card:nth-child(12n+9) {
  flex-basis: 50%;
  aspect-ratio: 837/565;
}
.board-wrapper .board .card:nth-child(12n+10) {
  flex-basis: 50%;
  aspect-ratio: 837/565;
}
.board-wrapper .board .card:nth-child(12n+11) {
  flex-basis: 40%;
  aspect-ratio: 466/776;
}
.board-wrapper .board .card:nth-child(12n+12) {
  flex-basis: 60%;
  aspect-ratio: 1219/776;
}
.board-wrapper .board .card .thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -web-kit-transition: 0.3s ease;
}
.board-wrapper .board .card .thumb:hover {
  transform: scale(1.1);
}
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive-4by3 {
  padding-bottom: 75%;
}

@media (min-width: 335px) and (max-width: 757px) {
  main header {
    position: fixed;
    width: 100vw;
    left: 0;
    right: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    background-color: #fff;
  }
  main .content gnb ul {
    justify-content: start;
  }
  main .content gnb ul li {
    font-size: 0.85rem;
  }
  .board-wrapper .board {
    flex-direction: column;
  }
  .board-wrapper .board .card {
    flex-basis: 100% !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 335px) and (max-width: 757px) {
  main .content {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
  }
  main .content .top {
    flex-direction: column;
  }
  main .content .top .title h1 {
    font-size: 5rem;
  }
  main .content .top .title h1 .title_en {
    font-size: 1.5rem;
    padding-left: 2vw;
  }
  main .content .top .info {
    margin-top: 2rem;
    justify-content: flex-end;
  }
  main .content .top .info .services, main .content .top .info .channels {
    flex-basis: 50%;
    margin-right: 0;
  }
  main .content .top .info ul {
    margin-top: 1rem !important;
  }
  main .content .top-visual img,
  main .content .work-visual img {
    margin: 0 !important;
  }
  main .content .work-visual .work-visual-wrap.grid-50p-row-3 {
    width: 70%;
  }
  main .content .work-visual .work-visual-wrap.grid-55p-row-3 {
    width: 77%;
  }
  main .content .work-visual .work-visual-wrap.grid-60p-row-3 {
    width: 84%;
  }
  main .content .work-visual .work-visual-wrap.grid-65p-row-3 {
    width: 91%;
  }
  main .content .work-visual .work-visual-wrap.grid-70p-row-3 {
    width: 98%;
  }
  main .content .work-visual .work-visual-wrap.grid-75p-row-3 {
    width: 100%;
  }
  main .content .work-visual .work-visual-wrap.grid-80p-row-3 {
    width: 100%;
  }
  main .content .work-visual .work-visual-wrap.grid-85p-row-3 {
    width: 100%;
  }
  main .content .work-visual .work-visual-wrap.grid-90p-row-3 {
    width: 100%;
  }
  main .content .work-visual .work-visual-wrap.grid-100p-row-3 {
    width: 100%;
  }
}

/*# sourceMappingURL=work.css.map */