@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap");

.portfolio-pc { padding:40px 0; } 
.portfolio-pc section {padding:0 40px;}
.portfolio-pc section + section { margin-top: 96px; } 
.portfolio-mobile {padding:32px 0 74px 0;}
.portfolio-mobile section + section { margin-top: 40px; } 
.credit-wrap { border-top: 1px solid #E6E6E6; } 

.portfolio-body { padding-top: 0; background-color: #0f1114; } 
.portfolio-body section { margin: 0; } 
.portfolio-body section:last-child { margin-top: 96px; } 
.portfolio-body .section-item-inner { position: relative; max-width: 1366px; } 

.portfolio-pc .section5 .motion-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.portfolio-pc .section5 .motion-wrap img { position: relative; width: 100%; z-index: 2; } 
.portfolio-pc .section5 .motion-wrap .gif { position: absolute; top: 27.22222%; left: 16.1%; width: 26.866764%; } 
.portfolio-pc .section6 .motion { position: absolute; bottom: 9.444444%; right: 5.85%; width: 60.6149341% !important; border: 4px solid #768484; box-shadow: inset 0px 0px 12px #000000; border-radius: 12px; } 

.portfolio-mobile .section5 .motion-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.portfolio-mobile .section5 .motion-wrap img { position: relative; width: 100%; z-index: 2; } 
.portfolio-mobile .section5 .motion-wrap .gif { position: absolute; top: 53.4%; left: 22.1%; width: 39.72222%; } 
.portfolio-mobile .section6 .motion { position: absolute; bottom: 20.091%; left: 16px; width: calc(100% - 32px) !important; border: 4px solid #768484; box-shadow: inset 0px 0px 12px #000000; border-radius: 12px; } 

.hover-img-wrap .hover-img { position: absolute; width: 24.8908%; cursor: default; user-select: none; } 
.hover-img-wrap .hover-img .dimm { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2px; background-color: rgba(0, 0, 0, 0.4); } 
.hover-img-wrap .hover-img .dimm span { margin: auto; font-size: 16px; line-height: 24px; font-weight: bold; color: #fff; letter-spacing: -0.02em; } 
.hover-img-wrap .hover-img:nth-child(1) { bottom: 30.16%; left: 1.24%; } 
.hover-img-wrap .hover-img:nth-child(2) { bottom: 30.16%; left: 29.06%; } 
.hover-img-wrap .hover-img:nth-child(3) { bottom: 9.335%; left: 1.24%; } 
.hover-img-wrap .hover-img:nth-child(4) { bottom: 9.335%; left: 29.06%; } 
.hover-img-wrap .hover-img:hover .dimm { display: flex; } 

.fadeOut-text .text-item { display: flex; align-items: center; position: absolute; z-index: 2; } 
.fadeOut-text .text-item span { height: 100%; } 
.fadeOut-text .text-item .un { margin-right: 4%; transition: all 0.3s; transition-delay: 0.3s; } 
.fadeOut-text .text-item .text { position: absolute; top: 0; left: 108%; transition: all 0.6s; } 
.fadeOut-text .text-item img { width: auto; height: 100%; } 
.fadeOut-text .text-item.item-fadeOut .un { opacity: 0; transition-delay: 0s; } 
.fadeOut-text .text-item.item-fadeOut .text { left: 0%; transition-delay: 0.3s; } 

.portfolio-pc .fadeOut-text .text-item { height: 5.8%; } 
.portfolio-pc .fadeOut-text .text-item:nth-child(1) { bottom: 41.3%; left: 10.3%; } 
.portfolio-pc .fadeOut-text .text-item:nth-child(2) { bottom: 41.3%; left: 39.1%; } 
.portfolio-pc .fadeOut-text .text-item:nth-child(3) { bottom: 41.3%; left: 68.1%; } 

.portfolio-mobile .fadeOut-text .text-item { height: 3.4%; } 
.portfolio-mobile .fadeOut-text .text-item:nth-child(1) { top: 25.93%; left: 25.2%; } 
.portfolio-mobile .fadeOut-text .text-item:nth-child(2) { top: 52.3%; left: 25.2%; } 
.portfolio-mobile .fadeOut-text .text-item:nth-child(3) { top: 78.7%; left: 25.2%; }