@charset "utf-8";


.studio-N5 {
  overflow: hidden;
  position: relative;
  padding-top: 8rem;
  padding-bottom: 8rem;  background: url("../../resources/images/main_bg04.jpg")no-repeat center top; background-size: cover
}

.studio-N5 .contents-inner {
  width: 100%;
}

.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%
}
}
/**** 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%
	  
}
.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: 24rem;
  height: 10rem;
  border-radius: 0.6rem; background-color: #fff; padding: 20px 40px
}

.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;
  }
}