.main-area{
    padding: 5.41vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh);

}

.main-area h3{
    font-size: 2.08vw;
    font-weight: 700;
    margin-bottom: 1.25vw;
}

@media (max-width: 1201px) {
    .main-area{
        padding: 13.95vw 2.14vw 10.73vw;
    }
    
    .main-area h3{
        font-size: 5.36vw;
        margin-bottom: 5.36vw;
        line-height: 1.2;
    }
}
@media (max-width: 744px) {
    .main-area{
        padding: 27.73vw 4.26vw 21.33vw;
    }
    
    .main-area h3{
        font-size: 10.66vw;
        margin-bottom: 10.66vw;
    }
}

.main-area .news-list{
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-bottom: 2.08vw;
}

.main-area .news-list .news-card a{
  transition: none;
}

.main-area .news-list .news-card{
  padding: 1.25vw 4.16vw;
  display: flex;
  gap: 2.08vw;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  transition-property: background-color, color;
  transition-duration: 600ms !important;
  will-change: background-color, color;
  cursor: pointer;
}

.main-area .news-list .news-card:hover{
  background-color: #F4F4F4;
  color: #E06E64;
}
.main-area .news-list .news-card .news-card__thumb{
  border-radius: 10px;
  width: 14.58vw;
  height: 8.33vw;
  overflow: hidden;
}
.main-area .news-list .news-card .news-card__thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     
  object-position: 50% 50%;  
}

.main-area .news-list .news-card .news-card__body{
  display: flex;
  flex-direction: column;
  gap: 0.83vw;
  width: 75vw;
}
.main-area .news-list .news-card .news-card__body .news-card__title{
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 140%;
}
.main-area .news-list .news-card .news-card__body .news-card__summary{
  font-size: 0.833vw;
  font-weight: 400;
  line-height: 140%;
}

 .news-card__meta{
  font-size: 0.833vw;
  font-weight: 400;
  line-height: 100%;
  display: flex;
  gap: 0.416vw;

}

.news-card__meta .news-card__sep{
  width: 1px;
  height: 0.83vw;
  background: rgba(0, 0, 0, 0.10);
}

.news-card__meta .news-card__original{
  font-weight: bold;
  display: flex;
  align-items: center;
}
.news-card__meta .news-card__original::after{
  content: ""; 
  display: inline-block;
  width: 0.83vw;
  height: 0.83vw;
  background-color: black;       
  -webkit-mask: url('/img/icn_arrow_go.svg') no-repeat center;
  mask: url('/img/icn_arrow_go.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.22s;
  opacity: 1 !important;
  margin-left: 0.416vw;
}
.main-area .news-list .news-card:hover .news-card__body .news-card__meta .news-card__original::after{
  background-color: #E06E64;
}



/* Pagination */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.83vw;
}

/* Prev/Next button (arrow only) */
.pagination__control{
  width: 1.25vw;
  height: 1.25vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.26vw;
  background: black;
  text-decoration: none;
  position: relative;
  transition: background-color 600ms, border-color 600ms, opacity 600ms;
  cursor: pointer;
}

/* Arrow icon */
.pagination__control::before{
  content: "";
  display: inline-block;
  width: 0.83vw;
  height: 0.83vw;
  background-color: white;       
  -webkit-mask: url('/img/icn_arrow_next.svg') no-repeat center;
  mask: url('/img/icn_arrow_next.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out, ;
  opacity: 1 !important;
}

/* Left arrow */
.pagination__control--prev::before{
  transform: rotate(180deg);
}

/* Hover */
.pagination__control:hover{
  background-color: grey;
}

/* Disabled (aria-disabled="true") */
.pagination__control[aria-disabled="true"]{
  opacity: 0.2;
  pointer-events: none;
  cursor: default;
}

/* List */
.pagination__list{
  display: inline-flex;
  align-items: center;
  gap: 0.83vw;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination__item{ margin: 0; }

/* Page link */
.pagination__link{
  font-size: 0.83vw;
  opacity: 0.4;
  transition: opacity 600ms, color 600ms;
  cursor: pointer;
  font-weight: bold;
}

.pagination__link:hover{
  opacity: 1;
}

.pagination__link.is-active,
.pagination__link[aria-current="page"]{
  opacity: 1;
}


@media (max-width: 1201px){
    .main-area .news-list{
        padding-bottom: 10.73vw;
    }

    .main-area .news-list .news-card{
      padding: 2.14vw 0 3.22vw;
      gap: 2.14vw;
      flex-direction: column;
    }

    .main-area .news-list .news-card .news-card__thumb{
      border-radius: 10px;
      width: 100%;
      height: 54.63vw;
    }

    .main-area .news-list .news-card .news-card__body{
      gap: 2.14vw;
      width: 100%;
    }
    .main-area .news-list .news-card .news-card__body .news-card__title{
      font-size: 3.22vw;
    }
    .main-area .news-list .news-card .news-card__body .news-card__summary{
      font-size: 2.14vw;
    }

     .news-card__meta{
      font-size: 2.14vw;
      gap: 1.07vw;
    }

    .news-card__meta .news-card__sep{
      height: 2.14vw;
    }

    .news-card__meta .news-card__original::after{
      width: 2.14vw;
      height: 2.14vw;
      margin-left: 1.07vw;
    }

    .pagination{
      gap: 2.14vw;
    }

    .pagination__control{
      width: 3.22vw;
      height: 3.22vw;
      border-radius: 0.67vw;
    }

    .pagination__control::before{
      width: 2.14vw;
      height: 2.14vw;
    }

    .pagination__list{
      gap: 2.14vw;
    }

    .pagination__link{
      font-size: 2.14vw;
    }

}
@media (max-width: 744px){
    .main-area .news-list{
        padding-bottom: 21.33vw;
    }

    .main-area .news-list .news-card{
      padding: 6.4vw 0;
      gap: 4.26vw;
    }

    .main-area .news-list .news-card .news-card__thumb{
      height: 52.26vw;
    }

    .main-area .news-list .news-card .news-card__body{
      gap: 4.26vw;
    }
    .main-area .news-list .news-card .news-card__body .news-card__title{
      font-size: 6.4vw;
    }
    .main-area .news-list .news-card .news-card__body .news-card__summary{
      font-size: 4.26vw;
    }

     .news-card__meta{
      font-size: 4.26vw;
      gap: 2.13vw;
    }

    .news-card__meta .news-card__sep{
      height: 4.26vw;
    }

    .news-card__meta .news-card__original::after{
      width: 4.26vw;
      height: 4.26vw;
      margin-left: 2.13vw;
    }

    .pagination{
      gap: 4.26vw;
    }

    .pagination__control{
      width: 6.4vw;
      height: 6.4vw;
      border-radius: 1.33vw;
    }

    .pagination__control::before{
      width: 4.26vw;
      height: 4.26vw;
    }

    .pagination__list{
      gap: 4.26vw;
    }

    .pagination__link{
      font-size: 4.26vw;
    }

}



body.is-layer-open {
  overflow: hidden;
}

.portfolio-layer {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  z-index: 100000;
  background: white;
  overflow-y: auto;
  align-items: flex-start
}

.portfolio-layer .close{
  position: absolute;
  left: 1.25vw;
  top: 4.58vw;
  width: 1.25vw;
  height: 1.25vw;
  z-index: 100001;
  cursor: pointer;
}
.portfolio-layer .close img{
  width: 100%;
  height: 100%;
} 

.portfolio-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-layer__dialog {
  width: 100%;
  position: relative;
  max-width: 100vw;
  background: #fff;

  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 600ms ease, transform 600ms ease;
}

.portfolio-layer.is-open .portfolio-layer__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.portfolio-layer__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
   min-height: calc(100vh - 15.3125vw);
  transition: opacity 600ms ease;
  opacity: 1;
}

.portfolio-layer__content.is-switching{
  opacity: 0;
}

.portfolio-layer .prev{
  font-size: 0.833vw;
  font-weight: bold;
  line-height: 140%;
  position: absolute;
  left: 4.16vw;
  top: 26.66vw;
  display: flex;
  align-items: center;
}
.portfolio-layer .prev::before{
  content: ""; 
  display: inline-block;
  width: 1.25vw;
  height: 1.25vw;
  background-color: black;       
  -webkit-mask: url('/img/icn_arrow_prev.svg') no-repeat center;
  mask: url('/img/icn_arrow_prev.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out;
  margin-right: 0.41vw;
  opacity: 1 !important;
}

.portfolio-layer .next{
  font-size: 0.833vw;
  font-weight: bold;
  line-height: 140%;
  position: absolute;
  right: 4.16vw;
  top: 26.66vw;
  display: flex;
  align-items: center;
}

.portfolio-layer .next::after{
  content: ""; 
  display: inline-block;
  width: 1.25vw;
  height: 1.25vw;
  background-color: black;       
  -webkit-mask: url('/img/icn_arrow_next.svg') no-repeat center;
  mask: url('/img/icn_arrow_next.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out;
  margin-left: 0.41vw;
  opacity: 1 !important;
}


.portfolio-layer__content h3{
  font-size: 2.083vw;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6.66vw 0 2.08vw;
}

.portfolio-layer__content  .portfolio-layer__image-area{
  display: flex;
  gap: 0.833vw;
  margin-bottom: 2.08vw;
}
.portfolio-layer__content .portfolio-layer__image{
  width: 43.75vw;
  aspect-ratio: 28/15;
  border-radius: 10px;
  overflow: hidden;        
}
.portfolio-layer__content .portfolio-layer__image > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     
}

.portfolio-layer__content .description{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.833vw;
  padding-bottom: 2.08vw;
  font-size: 0.833v;
  width: 43.75vw;
  line-height: 140%;
  position: unset;
}

@media (max-width: 1201px){

    .portfolio-layer .close{
      left: 2.14vw;
      top: 10.73vw;
      width: 2.14vw;
      height: 2.14vw;
    }

    .portfolio-layer .prev{
      font-size: 2.14vw;
      left: 2.14vw;
      top: unset;
      bottom: 10.73vw;
    }
    .portfolio-layer .prev::before{
      width: 3.22vw;
      height: 3.22vw;
      margin-right: 1.07vw;
    }

    .portfolio-layer .next{
      font-size: 2.14vw;
      right: 2.14vw;
      top: unset;
      bottom: 10.73vw;
    }

    .portfolio-layer .next::after{
      width: 3.22vw;
      height: 3.22vw;
      margin-right: 1.07vw;
    }
    .portfolio-layer__content{
      padding: 0 2.14vw;
    }


    .portfolio-layer__content h3{
      font-size: 3.22vw;
      padding: 15.03vw 0 2.14vw;
      line-height: 1.4;
    }

    .portfolio-layer__content  .portfolio-layer__image-area{
      display: flex;
      margin-bottom: 2.14vw;
    }
    .portfolio-layer__content .portfolio-layer__image{
      aspect-ratio:unset;  
      width: 100%; 
    }
    .portfolio-layer__content .description{
      width: 100%;
      gap: 2.14vw;
      padding-bottom: 24.16vw;
      font-size: 2.14vw;
    }

  }
@media (max-width: 744px){

    .portfolio-layer .close{
      left: 4.26vw;
      top: 21.33vw;
      width: 4.26vw;
      height: 4.26vw;
    }

    .portfolio-layer .prev{
      font-size: 4.26vw;
      left: 4.26vw;
      bottom: 21.33vw;
    }
    .portfolio-layer .prev::before{
      width: 6.4vw;
      height: 6.4vw;
      margin-right: 2.13vw;
    }

    .portfolio-layer .next{
      font-size: 4.26vw;
      right: 4.26vw;
      bottom: 21.33vw;
    }

    .portfolio-layer .next::after{
      width: 6.4vw;
      height: 6.4vw;
      margin-left: 2.13vw;
    }


    .portfolio-layer__content{
      padding: 0 4.26vw;
    }
    .portfolio-layer__content h3{
      font-size: 6.4vw;
      padding: 29.86vw 0 4.26vw;
    }

    .portfolio-layer__content  .portfolio-layer__image-area{
      margin-bottom: 4.26vw;
    }
    .portfolio-layer__content .portfolio-layer__image{
      /* aspect-ratio: 343 / 200;   */
    }
    .portfolio-layer__content .description{
      gap: 4.26vw;
      padding-bottom: 49.06vw;
      font-size: 4.26vw;
    }

  }