.portfolio-body {background-color: #11151b; color: #fff;}
.portfolio-footer {background-color: #11151b;}
.credit-wrap {background-color: #11151b; color: #fff;}

section .section-item {padding: 0 40px;}
.section1 {background-image: url('img/samsungMagician80_1.png');}
.section1 .device-img-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.section1 .device-img-wrap > div {position: absolute; background-repeat: no-repeat; background-size: 100%;}
.section1 .device-img-wrap .laptop-img {width: 78.28%; height: 72.77%; left: 2.34%; bottom: 5.81%; opacity: 0; background-image: url('img/samsungMagician80_1_2.png');}
.section1 .device-img-wrap .tablet-img {width: 32.5%; height: 69.3%; left: -20%; bottom: 0; background-image: url('img/samsungMagician80_1_3.png');}
.section1 .device-img-wrap .mobile-img {width: 20.3%; height: 56.68%; right: -10%; bottom: 19.05%; background-image: url('img/samsungMagician80_1_4.png');}
.section1 .device-img-wrap .tablet-img,
.section1 .device-img-wrap .mobile-img {opacity: 0; transition: opacity 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;}
.section1 .device-img-wrap.on .tablet-img {opacity: 1; left: 0; bottom: 0;}
.section1 .device-img-wrap.on .mobile-img {opacity: 1; right: 20.31%; bottom: 19.05%;}
.section3 {background-color: #07306D; box-shadow: 0px 0px 43.8px 9px rgba(0, 0, 0, 0.25) inset;}
.section3 .img-area {position: relative; max-width: 868px; margin: 0 auto;}
.section3 .img-area img {width: 100%; height: 100%;}
.section3 .img-area .img-after {position: absolute; top: 0; left: 0; width: 0; height: 100%; background-image: url('img/samsungMagician80_3_2_dark.png'); background-size: cover;}
.section3 .img-bar {position: relative; width: 20%; height: 2px; margin: 7px auto; background-color: rgba(255, 255, 255, 0.40);}
.section3 .img-bar .cursor {position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); display: block; width: 16px; height: 16px; border-radius: 50%; background-color: #fff; cursor: pointer;}
.section3 .img-wrap img {user-select: none;}
.section4 .video-inner {max-width: 1010px; margin: 0 auto;}
.section5 .section-item-inner {position:static;}
.section5 .img-slide-wrap {position: absolute;bottom: 13.68%; left:50%; transform: translate(-50%); width:100%; max-width:1962px; height: 52.48%; overflow:hidden;}
.section5 .img-slide-wrap > div {display: flex; height: 47.5%;}
.section5 .img-slide-wrap > div img {position:relative;width:auto;height:100%;max-height:200px;vertical-align: top;}
.section5 .img-slide-wrap > div img + img {margin-left: 2.2%;}
.section5 .img-slide-wrap .slide-left img {animation: slideLeft 40s linear infinite both;}
.section5 .img-slide-wrap .slide-right {margin-top: 1%; justify-content:flex-end;}
.section5 .img-slide-wrap .slide-right img { animation: slideRight 40s linear infinite both;}
@keyframes slideLeft {
    0% {transform: translateX(0);}
    100% {transform: translateX(calc(-100% - 1.1%));}
}
@keyframes slideRight {
    0% {transform: translateX(0);}
    100% {transform: translateX(calc(100% + 1.1%));}
}

.portfolio-mobile .section1 {background-image: url('img/m_samsungMagician80_1.png');}
.portfolio-mobile .section1 .device-img-wrap .laptop-img {width: 78.66%; height: 40.61%; left: 11.2%; bottom: 30.04%;}
.portfolio-mobile .section1 .device-img-wrap .tablet-img {width: 33.33%; height: 39.67%; left: -25%; bottom: 26.29%;}
.portfolio-mobile .section1 .device-img-wrap .mobile-img {width: 20.53%; height: 31.69%; right: -25%; bottom: 37.32%;}
.portfolio-mobile .section1 .device-img-wrap.on .tablet-img {left: 6.93%;}
.portfolio-mobile .section1 .device-img-wrap.on .mobile-img {right: 12.53%;}
.portfolio-mobile .section3 .img-area {width: 78.6%;}
.portfolio-mobile .section3 .img-bar {position: relative; width: 89.33%;}
.portfolio-mobile .section3 .img-bar + .img-wrap {height: auto; background: none;}
.portfolio-mobile .section4 .video-inner {width: 87.85%;}
.portfolio-mobile .section5 .img-slide-wrap {bottom: 12.81%; height: 58.99%;}
.portfolio-mobile .section5 .img-slide-wrap > div {height: 46.75%;}
.portfolio-mobile .section5 .img-slide-wrap > div img {min-height:158px; max-height: 316px;}
.portfolio-mobile .section5 .img-slide-wrap > div img + img {margin-left: 8%;}
.portfolio-mobile .section5 .img-slide-wrap .slide-left img {animation: slideLeft 20s linear infinite both;}
.portfolio-mobile .section5 .img-slide-wrap .slide-right {margin-top: 6%;}
.portfolio-mobile .section5 .img-slide-wrap .slide-right img {animation: slideRight 20s linear infinite both;}

@media screen and (max-width: 1023px){
    section .section-item {padding: 0;}
}