@charset "utf-8";

/* font-family: 'Montserrat', 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500&family=Noto+Sans+KR:wght@400;700&display=swap');

/* 변수선언 */
@import url(./variable.css);

/* 공통 */
body {
  font-family: var(--font-family-en);
  color: #fff;
  background-color: var(--color-black);
  font-size: 10px;

  transition: 0.5s;
}

.italic {
  font-style: italic;
  font-weight: 400;
}

.block {
  display: block;
}

.title-mini {
  font-size: var(--font-size-10);
  line-height: 1.6;
  text-transform: uppercase;
}

.bold {
  font-weight: 700;
}

.flex {
  display: flex;
}

.sub-nav {
  font-weight: 500;
  font-size: var(--font-size-12);

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 1.2vw;
}

.sub-nav li:nth-child(2) {
  justify-self: center;
}

.sub-nav li:nth-child(3) {
  justify-self: end;
}

/* @media screen and (max-width : 1400px) */
@media screen and (width < 1400px) {
  /* 서브네브 */
  .sub-nav {
    font-weight: 500;
    font-size: var(--font-size-10);

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 1.2vw;
  }

  .sub-nav li:nth-child(2) {
    justify-self: center;
  }

  .sub-nav li:nth-child(3) {
    justify-self: end;
  }
}

/* --------------마우스커서-------------- */

/* --------------상단 header-------------- */
/* 상단 nav */

.header {
  width: 100%;
}

.header .nav {
  width: 97%;
  margin: 0 auto;
}

.header .nav .global-nav {
  width: 100%;
  font-size: var(--font-vw-4);
  letter-spacing: -0.2vw;
  font-weight: 500;

  justify-content: space-between;

  margin-bottom: 0.5vw;
}

.header .nav .global-nav .gray {
  color: var(--color-gray);
}

.header .nav .global-nav .gray :hover {
  color: #fff;
  font-style: italic;
}

.header .nav h1 {
  width: 100%;
  height: 17vw;

  font-size: 17.5vw;
  letter-spacing: -0.5vw;
  line-height: 17vw;
  text-align: center;

  border-top: #fff solid 1px;
  border-bottom: #fff solid 1px;
}

/* .sub-nav 공통은 상단에 기재되어 있음 */

.header .nav .sub-nav .italic {
  font-weight: 700;
}

/* 상단 배너 */

.header .m-banner {
  width: 100%;
}

.header .m-banner .banner-wrapper {
  width: 40vw;
  height: 56vw;
  margin: 5vw auto 0;
  overflow: hidden;

  position: relative;
}

.header .m-banner .banner-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
}

.header .m-banner .banner-wrapper .video {
  height: 56vw;
  object-fit: cover;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --------------메인-------------- */
/*  -- 팀워커 키워드 m-keyword -- */

.m-keyword {
  width: 100%;
  text-align: center;
  padding-top: 12vw;
}

.m-keyword h2 {
  margin-bottom: 4vw;
}

/* 이미지와 큰 글씨 */

.m-keyword .key-wrapper1 {
  width: 100%;
  height: 65vw;
  font-size: var(--font-vw-10);
  letter-spacing: -0.65vw;
  font-weight: 700;
  line-height: var(--font-vw-10);

  position: relative;
}

.m-keyword .key-wrapper1 img {
  width: 7vw;
  height: 9vw;
  object-fit: cover;
  border-radius: 100px;

  transition: 0.3s;
}

.m-keyword .key-wrapper1 .mini-img1 {
  position: absolute;
  top: 18vw;
  left: 36vw;

  z-index: 99;
}

.m-keyword .key-wrapper1 .mini-img2 {
  position: absolute;
  top: 40vw;
  right: 31.5vw;

  z-index: 99;
}

.m-keyword .key-wrapper1 .mini-img3 {
  position: absolute;
  top: 50vw;
  left: 36vw;

  z-index: 99;
}

.m-keyword .key-wrapper1 .txt-boxs {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.m-keyword .key-wrapper1 p {
  height: 11vw;
  line-height: -15vw;
}

.m-keyword .key-wrapper1 .txt1 {
  position: relative;
}

.m-keyword .key-wrapper1 .small {
  font-weight: 400;
  font-size: var(--font-size-13);
  letter-spacing: 0;
  line-height: 10vw;
  margin-bottom: 8vw;

  position: absolute;
  top: -4.6vw;
}

.m-keyword .key-wrapper1 .txt1 .small {
  right: 1vw;
}

.m-keyword .key-wrapper1 .txt2 .small {
  right: 1vw;
}

.m-keyword .key-wrapper1 .txt3 .small {
  right: -2vw;
}

/* 밑줄  */
.m-keyword .key-wrapper1 .link {
  display: block;
  width: 100%;
  text-decoration: underline;
}

/* key-wrapper2 */

.m-keyword .key-wrapper2 {
  width: 100%;
  font-size: var(--font-vw-3);
  letter-spacing: -0.2vw;
  font-weight: 500;
  margin-top: 10vw;
}

.m-keyword .key-wrapper2 > .flex {
  justify-content: center;
  gap: 0.6vw;
}

.m-keyword .key-wrapper2 ul {
  margin-bottom: 0.8vw;
}

.m-keyword .key-wrapper2 ul li {
  padding: 0.3vw 1.5vw;
  border: 1px #000 solid;
  border-radius: 80px;
}

.m-keyword .key-wrapper2 ul .a-tag {
  background-color: #000;
  color: #fff;
  width: 14vw;
  padding: 0;
}

.m-keyword .key-wrapper2 ul .a-tag a {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5vw;

  font-weight: 500;
}

.m-keyword .key-wrapper2 ul .a-tag svg {
  width: 3vw;
  height: 3vw;
  fill: #fff;
}

/*  -- 작품 슬라이드 m-slider -- */

.m-slider {
  width: 100%;
  height: 400vh;
  margin-top: 20vw;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;

  background-color: black;

  position: relative;
}

/* 텍스트 */
.m-slider .slider-txt {
  width: 100%;
  height: 400vh;
  position: absolute;
  top: 0;
}

.m-slider .slider-txt h2 {
  width: 100%;
  height: 100vh;
  text-align: center;
  color: #fff;
  font-size: 5vw;
  font-weight: 700;
  letter-spacing: -0.2vw;
  line-height: 100vh;
}

.m-slider .slider-txt .project {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* 이미지 */
.m-slider .inner-box {
  width: 100%;
  height: 400vh;

  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  z-index: 99;
}

.m-slider .inner-box .slider {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  transform-origin: top center;
}

.m-slider .inner-box .slider img {
  object-position: 50%;
  vertical-align: top;

  /* 이미지 해상도 문제해결: 뒷면을 숨김으로써 흐림 효과를 제거 */
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.m-slider .inner-box .slider2,
.m-slider .inner-box .slider3,
.m-slider .inner-box .slider4 {
  height: 0;
  overflow: hidden;
  transition: height 0.6s, opacity 0.6s;
}

/*  -- 책, 영상 m-content -- */

.m-content {
  width: 100%;
  text-align: center;
}

.m-content .content1 {
  width: 100%;
  justify-content: center;

  margin-bottom: 12vw;
}

.m-content .content1 h2 {
  font-size: 23.4vw;
  font-weight: 700;
  letter-spacing: -1.5vw;
  text-indent: -1vw;

  position: relative;

  overflow: visible;
}

.m-content .content1 .number {
  text-indent: 0.4vw;
}

.m-content .content1 .book::after {
  content: '';
  display: block;
  width: 102%;
  height: 3vw;
  background-color: #000;

  position: absolute;
  left: 1vw;
  bottom: 1.5vw;
}

.m-content .content1 .number::after {
  content: '';
  display: block;
  width: 40%;
  height: 3vw;
  background-color: #000;

  position: absolute;
  right: 7.4vw;
  bottom: 1.5vw;
}

/* .content2 이미지 고정 글자 스크롤 */

.content2 {
  width: 100%;
}

/* 이미지 고정 */

.m-content .content2 .sticky {
  width: 100%;
  height: 300vh;

  position: relative;
}

.m-content .content2 .imgBox {
  width: 100%;
  height: 145vh;
  overflow: hidden;

  position: sticky;
  top: 0.5vw;
  left: 0;
  z-index: 999;
}

.m-content .content2 .bookimg1 {
  width: 10%;

  position: absolute;
  top: 0;
  left: 20vw;
}

.m-content .content2 .bookimg2 {
  width: 8%;

  position: absolute;
  top: 13vw;
  right: 20vw;
}

.m-content .content2 .bookimg3 {
  width: 25%;

  position: absolute;
  top: 15vw;
  left: -12.5%;
}

.m-content .content2 .bookimg4 {
  width: 34%;

  position: absolute;
  top: 30vw;
  right: -15%;
}

.m-content .content2 .bookimg5 {
  width: 7%;

  position: absolute;
  top: 50vw;
  left: 16vw;
}

/* 지나가는 글 */
.m-content .content2 .txtBox {
  width: 100%;
  position: absolute;
  top: 20vw;

  z-index: 99;
}

.m-content .content2 .txtBox .title-mini {
  margin-bottom: 3vw;
}

.m-content .content2 .txtBox .book-name {
  font-size: var(--font-vw-6);
  initial-letter: -0.3vw;
}

.m-content .content2 .txtBox .book-name p {
  margin-bottom: -0.3vw;
  position: relative;
}

.m-content .content2 .txtBox .book-name .margin {
  margin-bottom: -1.3vw;
}

.m-content .content2 .txtBox .book-name .small {
  font-size: var(--font-size-10);
  font-weight: 400;
  font-style: normal;

  position: absolute;
  top: 2.3vw;
}

.m-content .content2 .txtBox .title-mini {
  margin-top: 5vw;
}

.m-content .content2 .txtBox .title-mini p:nth-child(2) {
  margin-top: 1vw;
}

/* content3 비디오 영역 */

.m-content .content3 {
  width: 100%;
  margin-top: -20vw;
}

.m-content .content3 .video {
  width: 65%;
  height: 160vh;
  margin: 0 auto;
  border-radius: 600px;
  overflow: hidden;

  position: relative;
}

.m-content .content3 .video .youtube {
  height: 100%;
  width: auto;
  aspect-ratio: 16/9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 9;
}

.m-content .content3 .video .video-txt {
  width: 100%;
  height: 80vh;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);

  z-index: 999;
}

.m-content .content3 .video .video-txt h3 {
  text-align: center;
  color: #fff;
  font-size: var(--font-vw-3);
  font-weight: 700;
  letter-spacing: -0.1vw;
}

.m-content .content3 .video .video-txt .bold {
  font-size: var(--font-vw-4);
  font-weight: 800;
}

.m-content .content3 .video .video-txt p {
  font-size: var(--font-size-10);
  text-transform: uppercase;

  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* @media screen and (max-width : 1400px) */
@media screen and (width < 1400px) {
  /* 하단 비디오영역 */
  .m-content .content3 .video {
    width: 65%;
    height: 170vh;
    margin: 0 auto;
    border-radius: 500px;
    overflow: hidden;

    position: relative;
  }

  .m-content .content3 .video .video-txt {
    width: 100%;
    height: 85vh;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);

    z-index: 999;
  }
}

/* --------------하단-------------- */

.footer {
  width: 100%;
}

.footer .sub-nav {
  width: 97%;
  margin: 10vw auto 22vw;
  border-top: 1px solid #fff;
  padding-top: 1vw;
}

.footer .sub-nav li:nth-child(1) {
  text-align: left;
}

.footer .f-txtBox {
  width: 100%;
  text-align: center;

  position: relative;
}

.footer .f-txtBox .ft-wrapper1 {
  font-size: 15.5vw;
  letter-spacing: -1.5vw;
}

.footer .f-txtBox .ft-wrapper1 p {
  margin-top: -8vw;
}

.footer .f-txtBox .ft-wrapper1 .italic {
  letter-spacing: -1.5vw;
}

.footer .f-txtBox .ft {
  width: 12vw;
  height: 15vw;
  border: 1px solid #fff;
  border-radius: 240px;
  background-color: var(--color-black);

  display: grid;
  place-content: center;
}

.footer .f-txtBox .ft h3 {
  font-size: var(--font-size-13);
  font-weight: 700;
}

.footer .f-txtBox .ft p {
  font-size: var(--font-size-10);
  margin-top: 0.5vw;
}

/* 글자 박스도 함께 움직이는 애니매이션 */
.footer .f-txtBox .ft-wrapper2 {
  position: absolute;
  top: -4vw;
  left: 25vw;

  transition: 0.3s;
}

.footer .f-txtBox .ft-wrapper3 {
  position: absolute;
  bottom: 28vw;
  right: 22.5vw;

  transition: 0.3s;
}

.footer .title-mini {
  text-align: center;

  margin-top: 7vw;
  font-weight: 500;
}

.footer .contact {
  text-align: center;
}

.footer .contact .title-mini {
  color: var(--color-gray);
  margin-top: 3vw;
}

.footer .contact .under {
  justify-content: center;
}

.footer .contact .under h3 {
  font-size: var(--font-vw-3);
  font-weight: 700;
  letter-spacing: -0.1vw;

  position: relative;
}

.footer .contact .under .line1::after {
  content: '';
  display: block;
  width: 101%;
  height: 0.3vw;
  background-color: #fff;

  position: absolute;
  bottom: 0.3vw;
  left: 0.25vw;
}

.footer .contact .under .line2::after {
  content: '';
  display: block;
  width: 77%;
  height: 0.3vw;
  background-color: #fff;

  position: absolute;
  bottom: 0.3vw;
  right: 0.25vw;
}

.footer .contact .under .line3::after {
  content: '';
  display: block;
  width: 93%;
  height: 0.3vw;
  background-color: #fff;

  position: absolute;
  bottom: 0.3vw;
  left: 0.25vw;
}

.footer .contact .under .line4::after {
  content: '';
  display: block;
  width: 88%;
  height: 0.3vw;
  background-color: #fff;

  position: absolute;
  bottom: 0.3vw;
  left: 1vw;
}

.footer .contact .under .line5::after {
  content: '';
  display: block;
  width: 72%;
  height: 0.3vw;
  background-color: #fff;

  position: absolute;
  bottom: 0.3vw;
  right: 0.15vw;
}

/* upto 버튼 */

.footer .upto {
  border: 1px solid #fff;
  border-radius: 120px;
  width: 5vw;
  height: 6vw;

  margin: 10vw auto;

  display: grid;
  place-content: center;
}

.footer .upto a {
  display: block;
  width: 100%;
  height: 100%;
}

.footer .upto svg {
  width: 3vw;
  fill: #fff;
}

/* 포트폴리오 */
.footer .f-info {
  width: 97%;
  margin: 0 auto 2vw;
  font-size: var(--font-size-10);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer .f-info li:nth-child(1) {
  text-align: left;
}

.footer .f-info li:nth-child(3) {
  text-align: right;
}

.footer .f-info a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
}

.footer .f-info p {
  font-family: var(--font-family-ko);
  font-weight: 400;
}

.footer .f-info a:hover p {
  font-style: italic;
  color: var(--color-gray);
  font-weight: 700;
}