/* ----- 기반 -----*/
html {scrollbar-gutter: stable;}
body {background-color: #161616;}
#wrap {width: 100%; background-color: #161616;}
.container {width: 100%;}
.wrapper {max-width: 1800px; margin: 0 auto; padding: 0 5%;}




/*----- hero 영역 시작 -----*/
/* 헤더, 네비 */
header {width: 100%; position: relative; z-index: 9999;}
/*header {width: 100%; background-color: #161616e0; position: fixed; top: 0; z-index: 9999;}*/
header .wrapper {display: flex; flex-wrap: wrap; justify-content: space-between;}
h1 {width: clamp(120px, 5vw, 18rem); padding: 5rem 0;}
nav {display: grid; align-items: center;}
nav ul {display: flex; flex-wrap: wrap; gap: 0 4rem; align-items: center;}
nav ul li {opacity: 0.4;}
nav .nav-contact {opacity: 1;}
nav .nav-contact a {padding: 1.5rem; border-radius: 50%; background-color: var(--color-primary); aspect-ratio: 1 / 1; display: grid; align-items: center;}
nav ul li img {width: 2rem;}
nav ul li:hover {opacity: 1; transition: 0.2s;}
nav ul li a {font-size: 1.8rem; color: #fff;}
nav .active {opacity: 1!important;}
.btn-menu {display: none;}
.btn-menu .line-off {margin: 5px 0;}
.menu-line span {display: block; width: 30px; height: 2px; border-radius: 1rem; background-color: #fff; transition: transform 0.3s ease;}
.btn-menu.active .line-top {transform: rotate(135deg) translate(0.2rem, 0);}
.btn-menu.active .line-off {display: none;}
.btn-menu.active .line-bottom {transform: rotate(-135deg) translate(0.2rem, 0);}
@media only screen and (max-width:960px){
    h1 {padding: 3rem 0;}
    nav {width: 70%; max-width: 500px; height: 100%; padding: 10rem 0; display: block; background-color: #505050; transform: translateX(100%); transition: transform .28s ease-out; position: fixed; top: 0; right: 0;}
    nav.active {transform: translateX(0) !important;}
    nav ul li {width: 100% !important; margin: 3rem 4rem !important;}
    nav ul li a {font-size: 16px !important;}
    nav .nav-contact {width: unset !important;}
    .btn-menu {display: grid; align-items: center; margin: 3rem 0; cursor: pointer; z-index: 2;}
}
@media only screen and (max-width:499px){
    nav {width: 100%;}
}

/* 프로젝트 타이틀 */
.project-area {margin-top: 10rem;}
.project-tit {width: 90%; position: relative;}
h2 {display: inline; color: #fff; font-size: clamp(50px, 10vw, 8.8rem); font-weight: bold; line-height: 1.3;}
.badge {width: 3rem; margin: 1rem; display: inline-block; vertical-align: top; position: relative;}
.badge-year-popup {width: 10rem; position: absolute; top: -5rem; left: 10px; opacity: 0;}
.badge-year img:hover + .badge-year-popup {transition: 0.2s; opacity: 1;}
@media only screen and (max-width:499px){
    .badge-year-popup {left: unset; right: 2vw;}
}

/* 프로젝트 소개 */
.project-about {margin: 7rem 0;}
.project-about ul {display: flex; flex-wrap: wrap; gap: 3.5rem;}
.project-about ul li {width: calc(20% - 2.8rem);}
.project-about ul li span {color: #fff; font-size: 1.8rem; opacity: 0.4;}
.project-about ul li p {margin-top: 1.5rem; color: #fff; font-size: 2rem; line-height: 1.7;}
.about-overview {width: 100% !important;}
.read-more {position: relative;}
@media only screen and (max-width:960px){
    br {display: none;}
    .project-about ul li {width: calc((100% - 3.5rem) / 2);}
    .project-about ul li p {margin-top: 1rem;}
    .read-more{--lh:1.6; --lines:2; line-height:calc(1em * var(--lh)); max-height:calc(1em * var(--lh) * var(--lines)); overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); cursor:pointer; position:relative;}
    .read-more::after{content:"... 더보기"; position:absolute; right:0; bottom:-0.1rem; padding-left: 7rem; background: linear-gradient(to right, #16161600, #161616 50%); font-size: 1.8rem; font-weight: 300; color: #ffffff80;}
    .read-more.open{max-height: 9999px;}
    .read-more.open::after{content:" 접기"; background: none;}
}
@media only screen and (max-width:499px){
    h2 {font-size: 13vw;}
}

/* 프로젝트 이동 버튼 */
.project-btn {display: flex; flex-wrap: wrap; gap: 2rem;}
.btn-primary {width: calc(50% - 1rem); max-width: 29rem; padding: clamp(18px, 3.5vw, 2.9rem) 0; border-radius: 5rem; background-color: var(--color-primary); color: #fff; font-size: clamp(16px, 3vw, 2.4rem); text-align: center;}
.btn-primary:hover {color: var(--color-primary); font-weight: 600; background-color: #fff; transition: 0.2s;}
.btn-color-gray {background-color: var(--color-secondary);}
@media only screen and (max-width:499px){
    .btn-primary {width: 100%;}
}
/*----- hero 영역 끝 -----*/



/*----- image 영역 시작 -----*/
/* 슬라이드 */
.slide-wrap {position: relative; overflow: hidden;}
.slide-controller {display: flex; gap: 2rem; justify-content: center; scroll-behavior: smooth; transition: transform 0.4s ease;}
.slide-wrap .slide-controller {justify-content: left;}
.slide-btn {position: absolute; top: 0; right: 1px; border: none;}
.slide-btn-prev,
.slide-btn-next {width: 3rem; height: 3rem; border: 1px solid #ffffff; color:#ffffff; font-size: 1.2rem; border-radius: 0.3rem; cursor: url('https://creative.neodigm.com/pf/web-pf-new/resource/images/click.png') 10 10, auto;}
.slide-btn-prev:hover,
.slide-btn-next:hover {background: #ffffff; color: #161616; transition: 0.2s;}
.slide-btn-prev:disabled,
.slide-btn-next:disabled {color: #ffffff30; pointer-events: none; cursor: default;}
@media only screen and (max-width:960px){
    .slide-btn {display: none;}
    .slide-controller {flex-wrap: wrap;}
}

/* 목업 */
.mockup-image {position: relative; width: 100%; max-width: 1920px; aspect-ratio: 1920 / 1081; margin: 0 auto; margin-top: 15rem; overflow: hidden;}
.mockup-bg {width: 100%; height: 100%; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; pointer-events: none;}
.pc-mockup .mockup-bg {background: url(https://creative.neodigm.com/pf/web-pf-new/resource/images/mockup_pc.png) center center / cover no-repeat;}
.mo-mockup .mockup-bg {background: url(https://creative.neodigm.com/pf/web-pf-new/resource/images/mockup_mo.png) center center / cover no-repeat;}
.mockup-img {position: absolute; transform: translate(-50%, -50%);}
.pc-mockup .mockup-img {width: 51.5%; top: 41%; left: 50%;}
/*.pc-mockup .mockup-img img {rotate: 10.3deg;}*/
.mo-mockup .mockup-img {top: 47%; left: 49.8%; width: 19.5%;}
/*.mo-mockup .mockup-img img {transform: skewY(3.7deg);}*/
@media only screen and (max-width:960px){
    .mockup-image {display: none;}
}

/* 작업물 */
.image-area {padding-top: 12rem;}
h3:not(.year-area h3) {width: 12.5rem; height: 5rem; margin: 0 auto; border-radius: 4rem; font-size: 1.8rem; font-weight: 900; color: #000000; text-align: center; display: grid; align-items: center; background-color: #ffffff;}
.image-tab-menu {width: 100%; padding: 1rem 0; position: sticky; top: 0; z-index: 1; background-color: #161616;}
.image-tab-menu ul {width: fit-content; margin: 0 auto; padding: 0.5rem; border-radius: 5rem; display: flex; flex-wrap: wrap; justify-content: center; background-color: #2a2a2a;}
.image-tab-menu ul li {width: 12.5rem; height: 5rem; border-radius: 4rem; font-size: 1.8rem; font-weight: 900; color: #ffffff20; transition: background-color 0.2s ease, color 0.2s ease; text-align: center; display: grid; align-items: center; cursor: pointer;}
.image-tab-menu .longwords {width: 19rem;}
.image-tab-menu ul li:hover {background-color: #ffffff; color: #000000;}
.image-tab-menu .active{background-color: #ffffff; color: #000000;}
.image-tab-list {position: relative; overflow: hidden;}
.image-tab-list > div {height: 0; overflow: hidden; visibility: hidden;}
.image-tab-list > div.active {padding-top: 4rem; height: auto; visibility: visible;}
.image-area .wrapper > div.active {padding-top: 4rem;}

.list-item {position: relative; display: inline-block; border-radius: 1rem; flex: 0 0 calc((100% - 4rem) / 3);}
.list-item.landing-list {flex: 0 0 43%;}
.list-item img {border-radius: 1rem;}

.image-designsystem .scroll-controller {width: 100%;}
.image-banner .scroll-controller {width: 100%; height: 71rem; border-radius: unset;}
.mo-banner {display: none;}

.year-area {padding-top: 15rem;}
.year-area h3 {color: #fff; font-size: 1.8rem;}
.year-area .slide-controller {padding-top: 4rem; justify-content: left;}
.year-list img {border-radius: 1rem;}
.year-list::before {border-radius: 1rem; content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 50%);}
.year-list .year {color: #fff; font-size: 1.8rem; position: absolute; bottom: 5rem; left: 5rem; pointer-events: none; z-index: 2;}

/* 모달 */
.modal{position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s ease; z-index: 1000;}
.modal.show{opacity: 1; visibility: visible;}
.modal-inner{width: auto; max-height: 90vh; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%;}

/* 버튼 */
.modal-btn {display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem; border-radius: 5rem; background-color: #2a2a2a; position: absolute; z-index: 1; transform: translate(-50%, -50%); top: 98%; left: 50%;}
.modal-prev,
.modal-next,
.modal-close{width:5rem; aspect-ratio: 1/1; border-radius: 4rem; font-size: 1.8rem; font-weight: 900; color: #ffffff20; transition: background-color 0.2s ease, color 0.2s ease; text-align: center; display: grid; align-items: center; cursor: pointer;}
.modal-btn button:hover {background-color: #ffffff; color: #000000;}

/* 이미지 애니메이션 */
.modal-list-container {height: 90vh;}
.modal-list {max-height: 90vh; overflow-y: auto; display: none;}
.modal-list img {width: 100%; height: auto; display: block; transform: scale(.9); opacity: 0; transition: all .45s cubic-bezier(.22,.61,.36,1);}
.modal-list.active {display: block;}
.modal-list.active img {transform: scale(1); opacity: 1;}

@media only screen and (max-width:960px){
    .mo-banner {display: block; width: 100%;}
    .pc-banner {display: none;}
    .list-item {width: 100% !important; height: unset !important; flex: unset !important; aspect-ratio: unset !important;}
    .image-banner .scroll-controller {height: unset;}
    .modal-inner {width: 80%; max-height: unset; aspect-ratio: 1/0.7;}
}
/*----- image 영역 끝 -----*/




/*----- footer 영역 시작 -----*/
footer {margin-top: 15rem; padding: 3rem 0; background-color: #060606; opacity: 0.9;}
footer .wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;}
.footer-adress {color:#878787; font-size: 14px;}
.footer-icon ul {display: flex; flex-wrap: wrap; gap: 2rem;}
.footer-icon ul li {width: 2.2rem; display: grid; align-items: center;}
/*----- footer 영역 끝 -----*/





/* 마우스 커서 커스텀 */
body {cursor: url('https://creative.neodigm.com/pf/web-pf-new/resource/images/cursor.png') 10 10, auto;}
a, .badge-year > img {cursor: url('https://creative.neodigm.com/pf/web-pf-new/resource/images/click.png') 10 10, auto;}



/*----- 등장 애니메이션 -----*/
/* 순차 등장 */
.reveal,
.reveal-hero {opacity:0; transform:translateY(24px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); will-change: transform, opacity;}
/* 등장 상태 */
.reveal.show,
.reveal-hero.show {opacity:1; transform:translateY(0) scale(1);}
/* 순차 등장 */
.delay-1{transition-delay:.1s;}
.delay-2{transition-delay:.15s;}
.delay-3{transition-delay:.2s;}
.delay-4{transition-delay:.25s;}
.delay-5{transition-delay:.3s;}
.delay-6{transition-delay:.35s;}
.delay-7{transition-delay:.4s;}



/*----- 최상단 가기 버튼 -----*/
.btn-moveTop {width: 4.5rem; height: 4.5rem; border-radius: 50%; border: none; background: #ffffff80; box-shadow: 0 0 12px rgba(0,0,0,0.3); font-size: 1.6rem; color: #161616; cursor: pointer; opacity: 0; pointer-events: none; position: fixed; right: 30px; bottom: 30px; z-index: 2; transform: translateY(4.5rem); transition: 0.2s;}
.btn-moveTop:hover {background: #ffffff; transform: translateY(-0.5rem) !important;}
.btn-moveTop.show {opacity: 1; transform: translateY(0); pointer-events: auto;}



/*----- 스크롤바 커스텀 -----*/
/* 전체 스크롤바 */
::-webkit-scrollbar {width:6px;}
/* 스크롤 트랙 (배경) */
::-webkit-scrollbar-track {background:transparent;}
/* 움직이는 바 */
::-webkit-scrollbar-thumb {background:linear-gradient(180deg, #474747, #50505060); border-radius:10px;}