@charset "utf-8";


.studio-N5 {
  overflow: hidden;
  position: relative; background-size: cover; float: left; width: 100%; padding: 0px!important
}

.studio-N5 .img_box{
  overflow: hidden;
  position:absolute; width: 100%; height: 100%;  z-index: 0

}
.studio-N5 .img_box img{ width:100%;     object-fit: cover;

    height: 100%;

}

.studio-N5 .contents-inner {
  width: 100%; padding: clamp(50px, 7.813vw, 100px) 0px
}

.studio-N5 .title-area {
  margin-bottom:3rem;
  text-align: center;
}

.studio-N5 .title-area h2 {
  font-weight: var(--fw-medium); color: #fff; text-align: left; 
}

.studio-N5 .title-area strong {
  display: block;
  margin: 0.6rem 0 0rem!important; color: #fff; text-align: left; 
}
.studio-N5 .title-area .p1 {
  font-weight: var(--fw-medium); color: #fff; text-align: left; margin-bottom: 20px
}



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.studio-N5 .thumb-area {
  overflow: hidden;
  position: relative; width:60%;  height:250px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.studio-N5 .thumb-area {
  overflow: hidden;
  position: relative; width:100%;
	  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
	  
}
.studio-N5 .thumb-list.row {
  animation: sutdio-N5-Loop 30s infinite linear;
	 display: flex;
flex-direction:row!important; 
}
.studio-N5 .thumb {
  overflow: hidden;
  flex-shrink: 0;
  width: 20rem;
  height: 8rem;
  border-radius: 0.6rem; background-color: #fff; padding: 15px 30px
}	
	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.studio-N5 .thumb-list {
  display: flex;
  gap: 2rem;
  width: max-content;
}

.studio-N5 .thumb-list.row {
  animation: sutdio-N5-Loop 30s infinite linear;
}

.studio-N5 .thumb-list.row-reverse {
  animation: sutdio-N5-LoopReverse 30s infinite linear;
}

.studio-N5 .thumb-list+.thumb-list {
  margin-top: 2rem;
}

.studio-N5 .thumb {
  overflow: hidden;
  flex-shrink: 0;
  width:clamp(180px, 18.750vw, 240px);
  height: clamp(80px, 7.813vw, 100px);
  border-radius: 0.6rem; background-color: #fff; padding:clamp(14px, 1.042vw, 26px) clamp(28px, 2.083vw, 52px) clamp(14px, 1.042vw, 26px) clamp(28px, 2.083vw, 52px);
}

.studio-N5 .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes sutdio-N5-Loop {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(calc(-50% - 1rem), 0, 0);
  }
}

@keyframes sutdio-N5-LoopReverse {
  0% {
    transform: translate3d(calc(-50% - 1rem), 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 992px) {
  .studio-N5 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .studio-N5 .title-area {
    margin-bottom: 4rem;
  }

  .studio-N5 .title-area strong {
    margin: 0.4rem 0 1.6rem;
  }

  .studio-N5 .thumb-area::before,
  .studio-N5 .thumb-area::after {
    width: 20rem;
  }
}