.portfolio-body section {max-width: 2560px;}

.img-scroll {margin:0 !important;overflow:auto;}
.img-scroll img {width:auto !important;height:602px;}

.section1 .section-item-2,
.section2 .section-item-1, 
.section2 .section-item-2, 
.section2 .section-item-3,
.section3 .section-item-1, 
.section3 .section-item-2 {padding: 0 40px;} 
.section1 .section-item-1 {background-image: url('img/neungyule_1_1_1.png');}
.section1 .section-item-3 {position: relative;}
.section1 .section-item-3 .video-wrap {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; overflow: hidden;}
.section1 .section-item-3 .video-wrap::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(234, 237, 251, 0.90) 0%, rgba(234, 237, 251, 0.60) 100%);}
.section1 .section-item-3 .video-wrap video {height: 100%; object-fit: cover;}
.section2 {background-image: url('img/neungyule_2.png');}
section .swiper-slide {position: relative;}
.swiper-slide .ani-item-wrap .ani-item {opacity: 0;}
.swiper-slide .ani-item-wrap .ani-item.on {opacity: 1;}
.swiper-slide.swiper-slide-prev .ani-item-wrap .ani-item {opacity: 0;}
.section2 .section-item-1 .animation-item {position: absolute; bottom: 24.76%; left: 40%; width: 18.12%; height: 9.76%;}
.section2 .section-item-2 .swiper-slide {position: relative;}
.section2 .section-item-2 .swiper-slide .item-1 {position: absolute; bottom: 32%; right: 32.5%; width: 21.48%; height: 13.01%; background-image: url('img/neungyule_2_2_2_1.png'); background-size: 100% auto; transition: 0.3s;}
.section2 .section-item-2 .swiper-slide .item-1.on {bottom: 36.98%;}
.section2 .section-item-2 .img-wrap {position: absolute; top: 0; right: 0; width: 28.12%; height: 100%;}
.section2 .section-item-3 .animation-item {position: absolute; bottom: 19.59%; right: 0; width: 18.98%; height: 11.08%;}
.section2 .section-item-5 .animation-item {position: absolute; top: 29.41%; right: 30.89%; width: 22.57%; height: 8.03%;}
.section2 .section-item-5 .bg-swiper {position: absolute; bottom: 28.33%; left: -50%; width: 2560px; height: 27.45%; z-index: -1;}
.section2 .section-item-5 .bg-swiper .swiper-wrapper {transition-timing-function: linear !important;}
.section2 .section-item-5 .bg-swiper .swiper-wrapper .swiper-slide {width: 20%; max-width: 200px;}
.section2 .section-item-5 .bg-swiper .swiper-wrapper .swiper-slide + .swiper-slide {margin-left: 1.5%;}
.section2 .section-item-6 .swiper-slide {position: relative;}
.section2 .section-item-6 .swiper-slide .item-1 {position: absolute; top: 25.17%; right: 13.67%; width: 10.78%; height: 17.4%; background-image: url('img/neungyule_2_6_4_1.png'); background-size: 100% auto; transition: 0.3s;}
.section2 .section-item-6 .swiper-slide .item-1.on {top: 29.17%;}
.section2 .section-item-6 .swiper-slide .item-2 {position: absolute; top: 20.71%; right: 7.42%; width: 18.98%; height: 8.24%; background-image: url('img/neungyule_2_6_4_2.png'); background-size: 100% auto; transition: 0.3s;}
.section2 .section-item-6 .swiper-slide .item-2.on {top: 18.71%;}
.section3 .gradient-bg {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; max-width: 2560px; height: 100%; max-height: 1729px;}
.section3 .gradient-bg > div {position: absolute; right: 0; width: 2560px; height: 50%; background: linear-gradient(45deg, #DFE1EB, #DDCED5, #D9D0E9); background-size: 400% 400%; animation: gradient 5s ease infinite;}
.section3 .gradient-bg .bg-item-1 {top: 0; border-radius: 0 500px 500px 0;}
.section3 .gradient-bg .bg-item-2 {top: calc(50% - 22px); border-radius: 500px 0 0 500px;}
.section3 .section-item-2 .section-item-inner {max-width: 1920px;}
@keyframes gradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* mobile */
.portfolio-mobile .section1 .section-item-3 {background-color: #EAEDFB;}
.portfolio-mobile .section2 {background-image: none;}
.portfolio-mobile .section2 .section-item-1 .animation-item {bottom: 3.97%; right: 3.2%; width: 50.4%; height: 8.82%;}
.portfolio-mobile .section2 .section-item-2 .img-wrap {position: static; width: 100%;}
.portfolio-mobile .section2 .section-item-2 .swiper-slide .item-1 {bottom: 30%; right: 19.73%; width: 60.26%; height: 18.29%; background-image: url('img/m_neungyule_2_2_3_1.png');}
.portfolio-mobile .section2 .section-item-2 .swiper-slide .item-1.on {bottom: 32.31%;}
.portfolio-mobile .section2 .section-item-3 .animation-item {bottom: 20.14%; right: 3.2%; width: 53.06%; height: 8.82%;}
.portfolio-mobile .section2 .section-item-5 {background-image: url('img/m_neungyule_2_5.png');}
.portfolio-mobile .section2 .section-item-5 .bg-swiper {left:0; bottom: 15%; width:675px; height:17.94%; z-index: 1;}
.portfolio-mobile .section2 .section-item-5 .img-wrap {z-index: 2;}
.portfolio-mobile .section2 .section-item-5 .animation-item {top: 40.64%; right: 2.13%; width: 63.46%; height: 7.69%; z-index: 3;}
.portfolio-mobile .section2 .section-item-5 .bg-swiper .swiper-wrapper .swiper-slide {width:auto;}
.portfolio-mobile .section2 .section-item-5 .bg-swiper .swiper-wrapper .swiper-slide + .swiper-slide {margin-left: 2.2%;}
.portfolio-mobile .section2 .section-item-5 .bg-swiper .swiper-wrapper .swiper-slide img {height:100%;width:auto;}
.portfolio-mobile .section2 .section-item-6 .swiper-slide .item-1 {top: 41%; right: 17.6%; width: 64.8%; height: 22.56%; background-image: url('img/m_neungyule_2_6_4_1.png');}
.portfolio-mobile .section2 .section-item-6 .swiper-slide .item-1.on {top: 43.9%;}
.portfolio-mobile .section3 .gradient-bg {top: auto; bottom: 3.51%; left: 50%; transform: translate(-50%); width: 145%; max-width: 1632px; height: 21.22%; max-height: 1632px; border-radius: 50%;}
.portfolio-mobile .section3 .gradient-bg .bg-item-1 {width: 100%; height: 100%; border-radius: 50%; background-size: 200% 200%; animation: gradient 3s ease infinite;}
.portfolio-mobile .section3 .gradient-bg .bg-item-1 {width: 100%; height: 100%; background: linear-gradient(114deg, #DCE0F1, #F3F4F8); background-size: 200% 200%; border-radius: 50%;}

@media screen and (max-width: 1023px) {
  .section1 .section-item-2,
  .section2 .section-item-1, 
  .section2 .section-item-2, 
  .section2 .section-item-3,
  .section3 .section-item-1, 
  .section3 .section-item-2 {padding: 0;} 
}