@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');

.portfolio-body {background-color:#B3D7F9;}
.portfolio-body section {max-width: 100%;}
.portfolio-header .project-name {word-break: break-all;}
.portfolio-header .project-name span {font-size: 60px; line-height: 68px;}
.portfolio-footer {background-color: #B3D7F9;}
.portfolio-footer .credit-wrap .title {font-family:'Nunito'; font-size: 36px; line-height: 48px; color: #333;}
.portfolio-footer .credit-wrap ul li {color: #333;}

section .section-item {padding: 0 40px;}
.section1 {position: relative; overflow: hidden;}
.section1 .section-item-1 {background-image: url("img/ap_learning_renewal_1_1_1.png");}
.section1 .section-item-2 {background-image: url("img/ap_learning_renewal_1_2_1.png");}
.section1 .section-item-3 {background-image: url("img/ap_learning_renewal_1_3_1.png");}
.section2 {background-image: url("img/ap_learning_renewal_2.png");}
.section2 .section-item-2 .section-item-inner {position: relative;}
.section2 .section-item-2 .swiper {position: absolute; top: 0; left: 27%; width: 49.8%; height: 100%;}
.section2 .section-item-2 .swiper-wrapper {position: absolute; top: 25.83%; left: 0; height: 100%;}
.section2 .section-item-2 .swiper-wrapper .swiper-slide img {width: 100%;}
.section2 .section-item-2 .slide-pagination {position: absolute; bottom: 2.02%; left: 47.5%; transform: translateX(-50%);}
.section2 .section-item-2 .slide-pagination span {width: 16px; height: 16px; margin: 0 8px; background: #DFDFDF; opacity: 1;}
.section2 .section-item-2 .slide-pagination span.swiper-pagination-bullet-active {background: #4B96DB;}
.section2 .section-item-3 {padding: 0;}
.section2 .section-item-3 .section-item-inner {position: relative; max-width: 100%; padding: 0 43px;}
.section2 .section-item-3 .section-item-inner .img-wrap {max-width: 1280px; margin: 0 auto;}
.section2 .section-item-3 .swiper {position: absolute; top: 4.67%; left: 50%; width: 100%; transform: translateX(-50%);}
.section2 .section-item-3 .swiper-wrapper .swiper-slide {width: 40%; max-width: 768px; padding: 3.2% 0;}
.section2 .section-item-3 .swiper-wrapper .swiper-slide.swiper-slide-active {animation: activeRotate 0.5s linear 1 both;}
.section2 .section-item-3 .swiper-wrapper .swiper-slide img {width: 100%; height: 100%; max-height: 432px;}
.section3 {background-image: url("img/ap_learning_renewal_3.png");}
.section3 .section-item .section-item-inner {position: relative;}
.section3 .section-item-2 .bounce-item-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.section3 .section-item-2 .bounce-item-wrap .bounce-item {position: absolute; width: 15.62%; height: 20.85%; background-size: cover; background-repeat: no-repeat; animation: charBounce 1.5s infinite ease-in-out;}
.section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(1) {top: 35.45%; left: 3.67%; background-image: url('img/char_bounce_1.png');}
.section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(2) {top: 35.45%; left: 27.1%; background-image: url('img/char_bounce_2.png');}
.section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(3) {bottom: 28.25%; left: 41.56%; background-image: url('img/char_bounce_3.png');}
.section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(4) {bottom: 28.25%; right: 21.64%; background-image: url('img/char_bounce_4.png');}
.section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(5) {top: 35.45%; right: 6.71%; background-image: url('img/char_bounce_5.png');}
.section4 .section-item-1 {padding: 0;}
.section4 .section-item-1 .section-item-inner {max-width: 100%; position: relative;}
.section4 .section-item-1 .steps-item-wrap {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; display: flex; flex-wrap: wrap;}
.section4 .section-item-1 .steps-item-wrap .steps-item {position: relative; width: calc(100% / 3); height: 50%; background-repeat: no-repeat;}
.section4 .section-item-1 .steps-item-wrap .steps-item .steps-item-img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size:auto 100%; background-repeat: no-repeat;}
.section4 .section-item-1 .steps-item-wrap .steps-item-1 {background: url('img/steps_img_1.png'); background-size: auto 100%;}
.section4 .section-item-1 .steps-item-wrap .steps-item-2 {background: #FFD5D2;}
.section4 .section-item-1 .steps-item-wrap .steps-item-2 .steps-item-img {width: 43.12%; height: 72.8%; background-image: url('img/steps_img_2.png'); animation: stepsAni 0.8s steps(4) infinite; animation-fill-mode:both;}
.section4 .section-item-1 .steps-item-wrap .steps-item-3 {background: #CAFFD0;}
.section4 .section-item-1 .steps-item-wrap .steps-item-3 .steps-item-img {width: 50.6%; height: 72.8%; background-image: url('img/steps_img_3.png'); animation: stepsAni 0.8s steps(4) infinite; animation-fill-mode:both;}
.section4 .section-item-1 .steps-item-wrap .steps-item-4 {background: #FFD6B0;}
.section4 .section-item-1 .steps-item-wrap .steps-item-4 .steps-item-img {width: 54.68%; height: 72.8%; background-image: url('img/steps_img_4.png'); animation: stepsAni 0.8s steps(4) infinite; animation-fill-mode:both;}
.section4 .section-item-1 .steps-item-wrap .steps-item-5 {background: #D2FCFF;}
.section4 .section-item-1 .steps-item-wrap .steps-item-5 .steps-item-img {width: 52.18%; height: 72.8%; background-image: url('img/steps_img_5.png'); animation: stepsAni 0.8s steps(4) infinite; animation-fill-mode:both;}
.section4 .section-item-1 .steps-item-wrap .steps-item-6 {background: #FFF6A7;}
.section4 .section-item-1 .steps-item-wrap .steps-item-6 .steps-item-img {width: 39.06%; height: 72.8%; background-image: url('img/steps_img_6.png'); animation: stepsAni 0.8s steps(4) infinite; animation-fill-mode:both;}
.section4 .section-item-2 {background-color: #E0EDBC;}
.section4 .section-item-3 {padding: 0;}
.section4 .section-item-3 .section-item-inner {max-width: 100%; position: relative;}
.section4 .section-item-3 .gif-item-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.section4 .section-item-3 .gif-item-wrap .group-1 {display: flex; height: 55.77%;}
.section4 .section-item-3 .gif-item-wrap .group-1 .gif-item {position: relative; width: 50%; height: 100%;}
.section4 .section-item-3 .gif-item-wrap .gif-item-img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.section4 .section-item-3 .gif-item-wrap .gif-item-img img {width: 100%;}
.section4 .section-item-3 .gif-item-wrap .group-1 .gif-item-1 {background: #A2D0CD;}
.section4 .section-item-3 .gif-item-wrap .group-1 .gif-item-2 {background: #FF98C4;}
.section4 .section-item-3 .gif-item-wrap .group-1 .gif-item-img {width: 58.33%; height: 56.75%;}
.section4 .section-item-3 .gif-item-wrap .group-2 {display: flex; height: 44.23%;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item {position: relative; width: calc(100% / 4); height: 100%;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-1 {background: url('img/gif_item_1.png');background-size: cover;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-2 {background: #71B0E3;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-2 .gif-item-img {width: 62.08%; height: 63.63%;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-3 {background: #8E8EC5;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-3 .gif-item-img {width: 67.5%; height: 73.63%;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-4 {background: #237E9A;}
.section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-4 .gif-item-img {width: 53.33%; height: 63.63%;}
.section5 {background-image: url("img/ap_learning_renewal_4.png");}
.section5 .section-item-1 .section-item-inner {max-width: 1366px;}
@keyframes activeRotate {
  100% {transform: rotate(-4deg);}
}
@keyframes charBounce {
  0% {transform:translateY(0)} 50% {transform:translateY(10px)} 100% {transform:translateY(0)}
}
@keyframes stepsAni {
  0%{background-position:0 0;} 100%{background-position: 100% 0;}
}

.portfolio-mobile .section2 {background-image: url("img/m_ap_learning_renewal_2.png");}
.portfolio-mobile .section2 .section-item-3 .section-item-inner {padding: 0;}
.portfolio-mobile .section2 .section-item-3 .section-item-inner .img-wrap {max-width: 100%;}
.portfolio-mobile .section2 .section-item-2 .swiper {left: 14.2%; width: 78%;}
.portfolio-mobile .section2 .section-item-2 .swiper-wrapper {top: 33%;}
.portfolio-mobile .section2 .section-item-2 .slide-pagination {bottom: 8.33%; left: 47%;}
.portfolio-mobile .section2 .section-item-2 .slide-pagination span {width: 8px; height: 8px; margin: 0 5px;}
.portfolio-mobile .section2 .section-item-3 .swiper {top: 5%;}
.portfolio-mobile .section2 .section-item-3 .swiper-wrapper .swiper-slide {margin: 0;}
.portfolio-mobile .section3 .section-item-2 .bounce-item-wrap .bounce-item {width: 40%; height: 15.82%;}
.portfolio-mobile .section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(1) {top: 24.78%; left: 20.53%;}
.portfolio-mobile .section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(2) {top: 40.4%; left: 8.8%;}
.portfolio-mobile .section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(3) {top: 40.4%; left: 47.46%;}
.portfolio-mobile .section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(4) {bottom: 12.76%; left: 5.06%;}
.portfolio-mobile .section3 .section-item-2 .bounce-item-wrap .bounce-item:nth-child(5) {top: 54.95%; right: 5.86%;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap {flex-wrap: nowrap; flex-direction: column;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item {width: 100%; height: 100%;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item-1 {background: url('img/m_steps_img_1.png'); background-size: cover;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item-2 .steps-item-img {width: 60.61%; height: 72.16%;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item-3 .steps-item-img {width: 71.15%; height: 72.16%;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item-4 .steps-item-img {width: 76.86%; height: 72.16%;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item-5 .steps-item-img {width: 73.34%; height: 72.16%;}
.portfolio-mobile .section4 .section-item-1 .steps-item-wrap .steps-item-6 .steps-item-img {width: 54.9%; height: 72.16%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-1 {flex-direction: column; height: 56.68%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-1 .gif-item {width: 100%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-1 .gif-item-img {width: 80%; height: 67.74%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-2 {flex-wrap: wrap; height: 43.32%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-2 .gif-item {width: 50%; height: 50%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-2 .gif-item-img {width: 74.66%; height: 75.58%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-3 .gif-item-img {width: 70.46%; height: 75.58%;}
.portfolio-mobile .section4 .section-item-3 .gif-item-wrap .group-2 .gif-item-4 .gif-item-img {width: 63.46%; height: 75.58%;}

@media screen and (max-width:1023px) {
  section .section-item {padding: 0;}
  .portfolio-header .project-name span {font-size: 32px; line-height: 38px; letter-spacing: -1.28px;}
}