@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap"); 
@font-face { font-family: "DNFBitBitv2"; font-style: normal; font-weight: 400; src: url("//cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf") format("opentype"); } 

.portfolio-header {background-color: #1b0c48; color: #fff;}
.portfolio-header .project-info .bar { background-color: #fff; height: 14px;} 
.portfolio-header .project-name { word-break: break-all;} 
.portfolio-header .project-name span { font-size: 60px; line-height: 68px; } 
.portfolio-header .project-category ul li { background-color: #2e9bff; color: #fff; } 
.portfolio-body {background-color: #1b0c48; color: #fff;}
.portfolio-body section {max-width: 2560px;}
.portfolio-footer {color: #fff; background: url("img/bg_credit.png") center no-repeat; background-size: auto 100%; background-color: #1b0c48; border-top: none;}
.portfolio-footer .credit-wrap {height: 465px;} 
.portfolio-footer .credit-wrap img { display: none; } 
.portfolio-footer .credit-wrap .title { font-family: "Russo One", sans-serif; font-size: 36px; line-height: 48px; font-weight: normal; } 
.portfolio-footer .credit-wrap .credit-detail-wrap .credit-category {margin-bottom: 12px; font-size: 24px; line-height: 30px; } 
.portfolio-footer .credit-wrap .credit-detail-wrap ul li { color: #b6add7;} 

.section-item-inner .img-wrap { z-index: 5; } 
.section-item .swiper-slide img { width: 100%; } 
.section-item .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; } 
.section-item .animation-item-wrap img { width: 100%; vertical-align: top; } 
.section1 { position: relative; overflow: hidden; } 
.section1 .section-item-1 { background-image: url("img/bg_article_1.png"); } 
.section1 .section-item-2 { background-image: url("img/bg_article_2.png"); } 
.section1 .section-item-2 .typing-box { position: absolute; bottom: 34.54%; left: 50%; transform: translateX(-50%); width: 48.2%; height: 25.15%; } 
.section1 .section-item-2 .typing-box p { width: 100%; color: #fff; text-align: center; font-family: "DNFBitBitv2"; font-size: 3.1vw; line-height: 4.4vw; white-space: nowrap; } 
.section1 .section-item-2 .typing-box p .cursor { display: inline-block; width: 0.42vw; height: 4.48vw; margin-left: 2.6%; vertical-align: top; background-image: url("img/cursor.png"); background-size: 100% 100%; background-repeat: no-repeat; animation: cursorOpacity 1s linear infinite; } 
.section1 .section-item-2 .typing-box p + p { margin-top: -1%; } 
@keyframes cursorOpacity { 
0% { opacity: 1; } 
50% { opacity: 0.3; } 
100% { opacity: 1; } 
}
.section2 { background-image: url("img/bg_section2.png"); } 
.section2 .animation-item-wrap > div { position: absolute; z-index: 10; } 
.section2 .section-item-1 .animation-item-wrap .item1 { top: 19.18%; right: 22.05%; width: 5.78%; height: 7.25%; } 
.section2 .section-item-2 .animation-item-wrap .item1 { top: 1.93%; right: 10.31%; width: 5.78%; height: 10.27%; } 
.section2 .section-item-2 .animation-item-wrap .item2 { bottom: 15.23%; left: 50%; transform: translateX(-50%); width: 43.75%; height: 55.59%; } 
.section2 .section-item-2 .animation-item-wrap .item3 { bottom: 32.22%; right: 31.4%; width: 8.98%; height: 21.94%; } 
.section2 .section-item-3 .animation-item-wrap .item1 { top: 10.66%; left: 34.64%; width: 5.78%; height: 12.33%; } 
.section2 .section-item-4 .animation-item-wrap .item1 { top: 12.73%; right: 4.61%; width: 5.78%; height: 11.93%; } 
.section2 .section-item-5 .animation-item-wrap .item1 { top: 11.96%; left: 2.06%; width: 5.74%; height: 12.04%; } 
.section2 .section-item-5 .animation-item-wrap .item2 { bottom: 66.06%; right: 34.21%; width: 21.09%; height: 10.81%; } 
.section2 .section-item-5 .animation-item-wrap .item3 { bottom: 46.72%; right: 10.54%; width: 21.32%; height: 16.55%; } 
.section2 .section-item-5 .animation-item-wrap .item4 { bottom: 28.52%; right: 10.54%; width: 21.32%; height: 16.55%; } 
.section2 .section-item-5 .animation-item-wrap .item2 img,
.section2 .section-item-5 .animation-item-wrap .item3 img,
.section2 .section-item-5 .animation-item-wrap .item4 img { box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.4); border-radius: 4px; } 
.section2 .section-item-6 .animation-item-wrap .item1 { top: 14.87%; left: 50%; transform: translateX(-50%); width: 7.5%; height: 12%; } 
.section2 .section-item-6 .animation-item-wrap .item2 { bottom: 9.12%; left: 50%; transform: translateX(-50%); width: 77.96%; height: 40.62%; } 
.section2 .section-item-6 .animation-item-wrap .item3 { bottom: 8.37%; left: 25.7%; width: 8.43%; height: 16.25%; } 
.section2 .section-item-7 .animation-item-wrap .item1 { top: 6.22%; left: 30.85%; width: 38.2%; height: 38.5%; z-index: 1; animation: rotateImg2 15s linear infinite both; } 
.section2 .section-item-7 .animation-item-wrap .item2 { top: 6.22%; left: 30.85%; width: 38.2%; height: 38.5%; z-index: 1; animation: rotateImg1 10s linear infinite both; } 
.section2 .section-item-7 .animation-item-wrap .item3 { top: 38.26%; right: 17.89%; width: 10.07%; height: 10.15%; animation: hamsterBounce 1.5s infinite ease-in-out; } 
.section3 { position: relative; overflow: hidden; background-image: url("img/bg_section3.png"); } 
.section3 .star-animation-wrap { top: 85%; transform: translateY(-50%); } 
.section3 .section-item-1 .motion-loading { position: absolute; top: 34%; right: 8.8%; width: 7.3%; height: 8.6%; z-index: 5; } 
.section3 .section-item-1 .motion-loading .loading-img img { width: 100%; height: 100%; } 
.section3 .section-item-1 .motion-speaker { position: absolute; bottom: 8.7%; left: 13.7%; width: 9%; height: 9.9%; z-index: 5; } 
.section3 .section-item-1 .motion-speaker::before,
.section3 .section-item-1 .motion-speaker::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("img/bg_speaker_motion.png"); background-size: cover; animation: speakerWave 1s ease-in-out infinite both; z-index: -1; } 
.section3 .section-item-1 .motion-speaker::after { animation-delay: 0.3s; } 
.section3 .section-item-1 .motion-speaker .speaker-img { position: relative; } 
.section3 .section-item-1 .motion-speaker .speaker-img::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58%; height: 58%; background-image: url("img/speaker_ing.svg"); background-repeat: no-repeat; background-size: auto 100%; animation: speakerIng 0.6s steps(5) infinite both; } 
.section3 .section-item-1 .motion-speaker .speaker-img img { width: 100%; height: 100%; } 
.section3 .section-item-2 .section-item-inner {max-width: 1856px;} 
@keyframes speakerWave { 
0% { transform: scale(1); opacity: 1; } 
100% { transform: scale(1.55); opacity: 0; } 
}
@keyframes speakerIng { 
0% { background-position: 0 0; } 
100% { background-position: 100% 0; } 
}
@keyframes rotateImg1 { 100% { transform: rotate(-360deg); } 
}
@keyframes rotateImg2 { 100% { transform: rotate(360deg); } 
}
@keyframes hamsterBounce { 
0% { transform: translateY(0); } 
50% { transform: translateY(10px); } 
100% { transform: translateY(0); } 
}

.star-animation-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } 
.star-animation-wrap .star { position: absolute; top: -100px; animation: star 3s linear infinite; z-index: 1; } 
.star-animation-wrap .star.star-1 { width: 148px; height: 11px; top: 100px; left: -600px; animation-delay: 0; animation-duration: 2.5s; } 
.star-animation-wrap .star.star-2 { width: 188px; height: 14px; top: 100px; left: -150px; animation-delay: 0.2s; animation-duration: 3.5s; } 
.star-animation-wrap .star.star-3 { width: 96px; height: 8px; top: 100px; left: -200px; animation-delay: 0.4s; animation-duration: 2.5s; } 
.star-animation-wrap .star.star-4 { width: 139px; height: 11px; top: 100px; right: 700px; animation-delay: 0.3s; animation-duration: 3s; } 
.star-animation-wrap .star.star-5 { width: 124px; height: 10px; top: 100px; right: 800px; animation-delay: 0.5s; animation-duration: 2.5s; } 
.star-animation-wrap .star.star-6 { width: 95px; height: 7px; top: 100px; right: 750px; animation-delay: 0.7s; animation-duration: 2.5s; } 
.star-animation-wrap .star img { width: 100%; height: 100%; object-fit: cover; } 
@keyframes star { 
0% { transform: rotate(-140deg) translateX(0); opacity: 1; } 
70% { opacity: 0; } 
100% { transform: rotate(-140deg) translateX(-1050%); opacity: 0; } 
}

/* 모바일 */
.portfolio-mobile .section1 article { position: relative; } 
.portfolio-mobile .section1 .section-item-1 { background-image: none; } 
.portfolio-mobile .section1 .section-item-2 { background-image: url("img/m_bg_article_2.png"); } 
.portfolio-mobile .section1 .section-item-2 .typing-box { position: absolute; bottom: 27.2%; left: 50%; transform: translateX(-50%); width: 82%; height: 14.4%; } 
.portfolio-mobile .section1 .section-item-2 .typing-box p { font-size: 7.8vw; line-height: 9.6vw; } 
.portfolio-mobile .section1 .section-item-2 .typing-box p .cursor { width: 1.6vw; height: 9.62vw; margin-left: 2.6%; } 
.portfolio-mobile .section1 .section-item-2 .typing-box p + p { margin-top: 0; } 
.portfolio-mobile .section2 { background-image: url("img/m_bg_section2.png"); } 
.portfolio-mobile .section2 .section-item-1 .animation-item-wrap .item1 { top: 14.52%; right: 8.17%; width: 16%; height: 9.14%; } 
.portfolio-mobile .section2 .section-item-1 .animation-item-wrap .item2 { bottom: 1.66%; right: 8.17%; width: 16%; height: 9.14%; } 
.portfolio-mobile .section2 .section-item-2 .animation-item-wrap .item1 { top: initial; bottom: 5.88%; right: 8.17%; width: 16%; height: 13.63%; } 
.portfolio-mobile .section2 .section-item-3 .animation-item-wrap .item1 { top: initial; bottom: 13.03%; left: 9.48%; width: 16%; height: 11.02%; } 
.portfolio-mobile .section2 .section-item-4 .animation-item-wrap .item1 { top: initial; bottom: 9.9%; left: 9.48%; width: 16%; height: 11.02%; } 
.portfolio-mobile .section2 .section-item-6 .animation-item-wrap .item1 { top: 0; left: 50%; transform: translateX(-50%); width: 21.33%; height: 8.06%; } 
.portfolio-mobile .section2 .section-item-6 .animation-item-wrap .item2 { bottom: 30.94%; left: 9.86%; transform: initial; width: 80%; height: 30.24%; z-index: 1; animation: rotateImg2 15s linear infinite both; } 
.portfolio-mobile .section2 .section-item-6 .animation-item-wrap .item3 { bottom: 30.94%; left: 9.86%; transform: initial; width: 80%; height: 30.24%; z-index: 1; animation: rotateImg1 10s linear infinite both; } 
.portfolio-mobile .section3 { background-image: none; } 
.portfolio-mobile .section3 .section-item-1 .motion-loading { position: absolute; top: 44.5%; right: 37%; width: 25%; height: 3.9%; z-index: 5; } 
.portfolio-mobile .section3 .section-item-1 .motion-speaker { position: absolute; bottom: 27%; left: 39%; width: 21.33%; height: 3.11%; z-index: 5; } 
.portfolio-mobile .star-animation-wrap { top: 15%; } 
.portfolio-mobile .star-animation-wrap .star { top: 8%; } 
.portfolio-mobile .star-animation-wrap .star.star-1 { left: -50%; } 
.portfolio-mobile .star-animation-wrap .star.star-2 { left: -80%; width: 139px; height: 11px; } 
.portfolio-mobile .star-animation-wrap .star.star-3 { left: -70%; } 

/* 반응형 */
@media screen and (min-width: 1920px){
.section1 .section-item-2 .typing-box p { font-size: 60px; line-height: 86px; } 
.section1 .section-item-2 .typing-box p .cursor { width: 8px; height: 86px; } 
}
@media screen and (max-width: 1023px){
.portfolio-header .project-name span { font-size: 32px; line-height: 38px; letter-spacing: -1.28px; } 
.portfolio-footer { height: auto; padding: 140px 0; background: url("img/m_bg_credit_1.png") center no-repeat; background-size: 100% 100%; background-color: #1b0c48;} 
.portfolio-footer .credit-wrap .title { font-size: 24px; line-height: 24px; text-align: center; } 
.portfolio-footer .credit-wrap .credit-detail-wrap { text-align: center; } 
.portfolio-footer .credit-wrap .credit-detail-wrap ul li { margin-bottom: 8px; font-size: 16px; line-height: 26px; } 
@keyframes star { 
0% { transform: rotate(-140deg) translateX(0); opacity: 1; } 
70% { opacity: 0; } 
100% { transform: rotate(-140deg) translateX(-250vw); opacity: 0; } 
} 
}