/* =========================
BASE
========================= */

body {
  margin: 85px 0 0 200px;
  font-family: 'Pretendard', sans-serif;
}


/* =========================
TYPOGRAPHY
========================= */

h1 {
  font-size: 70px;
  font-weight: 900;
}

main {
  font-size: 20px;
}


/* =========================
HEADER
========================= */

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-right: 78px;
}

nav {
  visibility: hidden;
  margin-top: 40px;
}

nav ul {
  display: flex;
  gap: 100px;
}

nav a {
  font-size: 14pt;
  font-weight: 400;
}


/* =========================
MAIN LAYOUT
========================= */

main {
  margin-top: 20px;
  display: flex;
  gap: 108px;
}

.left-column,
.selected {
  flex: 1;
  min-width: 0;
}

.selected {
  padding-right: 78px;
}

.original {
  margin-bottom: 230px;
}


/* =========================
TEXT BLOCK
========================= */

main h2 {
  margin-bottom: 40px;
}

main section h3 {
  margin-bottom: 4px;
}

main section ul li {
  margin-bottom: 40px;
  font-weight: bolder;
  color: #383838;
}

main section ul li p {
  font-weight: 400;
  font-size: .8em;
}


/* =========================
VIDEO SECTION
========================= */

.featured-image {
  text-align: center;
  margin-top: 140px;
  width: 80%;
}

.featured-image h4 {
  font-size: .6em;
  font-weight: 300;
  margin-bottom: 10px;
}

.video-section {
  width: 100%;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-text {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  font-size: .5em;
  color: #404040
}


/* =========================
SLIDE GALLERY
========================= */

.slide-gallery {
  overflow: hidden;
  margin: 30px 0 0 -200px;
  width: calc(80% + 200px);
}

.slide-gallery:hover .slides {
  animation-play-state: running;
}

.slides {
  display: flex;
  gap: 20px;
  animation: slideMove 20s linear infinite;
  animation-play-state: paused;
}

.slides img {
  aspect-ratio: 1/.6;
  object-fit: cover;
  min-width: 40%;
}


/* =========================
SELECTED WORKS
========================= */

.selected .works-list li ul li {
  margin-bottom: 10px;
}

.selected .works-list li ul li small {
  display: block;
  font-size: .7em;
  font-weight: 400;
  color: #404040;
  margin-bottom: -3px;
}

.selected .works-list li ul li p {
  margin-top: -3px;
}


/* =========================
FOOTER
========================= */

footer {
  text-align: center;
  margin: 100px 0 0 -200px;
  padding-bottom: 30px;
  font-size: .8em;
  color: #4CA7F9;
}


/* =========================
ARCHIVE
========================= */

#archive {
  visibility: hidden;
}


/* =========================
ANIMATION
========================= */

@keyframes slideMove {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}


/* =========================
RESPONSIVE
========================= */
@media (max-width:768px){

  body{
    margin:60px 20px;
  }

  h1{
    font-size:40px;
  }
  main{
    flex-direction:column;
    gap:0px;
    margin-top:0px;
    font-size:1em;
  }
  .left-column h2{
    margin-bottom:10px;
  }
  .left-column h3{
    margin-bottom:0;
  }
  .left-column li{
    margin-bottom:10px;
  }
  .selected{
    padding-right:0;
    margin-top:-380px;
  }
  .selected h2{
    margin-bottom:10px;
  }
  .selected li{
    margin-bottom:10px;
  }
  .featured-image{
    margin-top:40px;
    width:100%;
  }
  

  .slide-gallery{
    margin:30px 0 0 0;
    width:100%;
  }

  .slides img{
    min-width:70%;
  }

  footer{
    margin-left:0;
  }

}