@charset "utf-8";

#main { width: 100%; overflow: hidden } 
.main_movie { height: 100vh; width: 100%; position: relative; background:#000 } 
.main_movie .bg-video { position: fixed; top: 0; left: 50%; width: 70vw; height: 100vh; transform: translateX(-50%); } 
.main_movie .movie_inner { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background:rgba(0,0,0,.2) } 
.main_movie .mySwiper { height: 100% } 
.main_movie .mySwiper .swiper-wrapper { height: 100%; display: flex; align-items: center; } 
.main_movie .mySwiper .swiper-slide { font-size: 6em; font-family: "outfit" !important; font-weight: 500; color: #fff; position: relative; display: flex; align-items: center; width: auto !important; opacity: .3 } 
.main_movie .mySwiper .swiper-slide.swiper-slide-active { opacity: 1 } 
.main_movie .mySwiper .swiper-slide:before { content: '•'; position: absolute; right: -80px; top: 50%; transform: translateY(-50%); opacity: .3 } 

.main_new_intro.slogan-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 16px; box-sizing: border-box; background: #000; color: #fff; overflow: hidden; } 
.slogan-inner { width: 100%; margin: 0 auto; } 
.slogan-title { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--gap, 24px); font-family: "Outfit"; font-size:3.5em; font-weight: 700; line-height: 1.2; text-align: center; } 
.slogan-left,
.slogan-right { display: inline-block; font-weight: 800; color: #fff; white-space: nowrap; font-size: 3em; } 
.slogan-middle { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 0; opacity: 0; } 
.slogan-middle-clip { font-family: 'Outfit', sans-serif !important; display: block; white-space: nowrap; line-height: 1.5; font-weight: 500; font-size: 1.6em; color: #555555; } 
.center-layer { position: relative; z-index: 1; gap: 20px } 


.main_new_business { position: relative; height: 100vh; background: #000; color: #fff; overflow: hidden; } 

.main_new_business_inner { position: relative; height: 100%; } 
.biz-title { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); font-size: 18vw; font-weight: 900; font-family: 'Outfit'!important; white-space: nowrap; pointer-events: none; z-index: 1; } 
.biz-char { display: inline-block; } 
.service-content { position: absolute; inset: 0; display: flex; align-items: center; z-index: 2; pointer-events: none; } 
.service-content .business_track { pointer-events: auto; max-width: 1600px; margin: 0 auto; width: 92%; display: flex; gap: 4em; align-items: stretch; justify-content: center; } 
.main_new_business .business_track .business_item { background: rgba(255, 255, 255, .9); border: 1px solid #111; padding: 50px 50px 130px; color: #000; overflow: hidden; transition: background-size .6s ease, border-radius .5s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: calc(100%/3); box-sizing:border-box } 
.main_new_business .business_track .business_item a { color:#000; text-decoration: none; cursor:none } 
.main_new_business .business_track .business_item a:hover { color:#000 } 
.main_new_business .business_track .business_item:hover { border-radius: 50px; transition: .5s } 
.main_new_business .business_track .business_item .txt_wrap h2 { font-family: 'Outfit' !important; font-size: 3.5em; word-break: keep-all; font-weight: 500; line-height: 1.1; padding-bottom: 60px; border-bottom: 1px solid #000; margin-bottom: 60px; } 
.main_new_business .business_track .business_item .txt_wrap h2 span { font-size: 0.5em; font-family: 'Pretendard Variable' !important; display:block; margin-top:1em } 
.main_new_business .business_track .business_item .txt_wrap p em { display: block; font-style: normal; font-family: 'Pretendard Variable' !important; font-size: 1.3em; line-height: 1.6 } 

/* 안의 텍스트/원/화살표도 살짝 같이 움직이게 */
.business_item .txt_wrap,
.business_item .biz-arrow,
.business_item .multi-circle { position: relative; z-index: 1; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease; } 
.business_item:hover .txt_wrap,
.business_item:hover .biz-arrow,
.business_item:hover .multi-circle { opacity: 1; } 
.business_item .biz-arrow { position: absolute; right: 30px; bottom: 30px; border: none; background: transparent; padding: 0; transition: .3s; opacity: 0 } 
.business_item:hover .biz-arrow { opacity: 1; transition: .5s } 
.multi-circle { position: relative; width: 68px; aspect-ratio: 1/1; margin-bottom: 30px; } 
.multi-circle .circle { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #000; box-sizing: border-box; transition: transform 0.45s cubic-bezier(.55, .09, .68, .53), opacity 0.45s cubic-bezier(.55, .09, .68, .53); } 
/* 오른쪽으로 흐르는 느낌 */
.main_new_business .business_track .business_item .mc-right .c1 { transform: translateX(-20px); opacity: 0.2; } 
.main_new_business .business_track .business_item .mc-right .c2 { transform: translateX(-10px); opacity: 0.3; } 
.main_new_business .business_track .business_item .mc-right .c3 { transform: translateX(0); opacity: 0.4; } 
.main_new_business .business_track .business_item .mc-right .c4 { transform: translateX(10px); opacity: 0.6; } 
.main_new_business .business_track .business_item .mc-right .c5 { transform: translateX(20px); opacity: 1; } 
/* 커지는 느낌 */
.main_new_business .business_track .business_item .mc-shrink .c1 { transform: scale(0.5); opacity: 1; } 
.main_new_business .business_track .business_item .mc-shrink .c2 { transform: scale(0.65); opacity: 0.5; } 
.main_new_business .business_track .business_item .mc-shrink .c3 { transform: scale(0.8); opacity: 0.4; } 
.main_new_business .business_track .business_item .mc-shrink .c4 { transform: scale(0.95); opacity: 0.3; } 
.main_new_business .business_track .business_item .mc-shrink .c5 { transform: scale(1.1); opacity: 0.2; } 
.main_new_business .business_track .business_item:hover .multi-circle .circle { transform: translateX(0); opacity: 1; } 
.main_new_business .business_track .business_item:hover .multi-circle .circle:not(.main) { opacity: 0; } 


/* 눕혀진 원들이 위아래로 겹쳐진 느낌 */
.main_new_business .business_track .business_item .mc-horizontal .c1 { transform: translateY(10px) scaleY(0.5); opacity: 0.2; } 
.main_new_business .business_track .business_item .mc-horizontal .c2 { transform: translateY(5px) scaleY(0.5); opacity: 0.3; } 
.main_new_business .business_track .business_item .mc-horizontal .c3 { transform: translateY(0) scaleY(0.5); opacity: .4; } 
.main_new_business .business_track .business_item .mc-horizontal .c4 { transform: translateY(-5px) scaleY(0.5); opacity: 0.6; } 
.main_new_business .business_track .business_item .mc-horizontal .c5 { transform: translateY(-10px) scaleY(0.5); opacity: 1; } 
.main_new_business .business_track .business_item:hover .mc-horizontal .circle { transform: translateY(-0) translateX(.5) } 
.main_new_business .business_track .business_item:hover .mc-horizontal .circle:not(.main) { opacity: 0; } 


/* 스킬 */
#bubbleWrap { position: relative; width: 100%; height: 350px; background: #000; overflow: hidden; pointer-events: auto; } 
.bubble { position: absolute; display: flex; gap: 6px; align-items: center; justify-content: center; pointer-events: none; } 
.bubble img { width: 100% } 
.bubble_d { width: 45px; } 
.bubble_w { width: 130px; } 


/* 포트폴리오 */
.main_new_portfolio { height: 100vh; background: #000; display: flex; align-items: center; justify-content: center; } 
.portfolio-inner { position: relative; width: 100%; height: calc(100vh - 100px); border-radius: 30px; overflow: hidden; margin: 0 40px; display: flex; align-items: center; justify-content: center; } 
.main_new_portfolio .inner { display: flex; height: 100%; position: relative; z-index: 2; justify-content: space-between; width: 92%; max-width: 1600px; } 
.portfolio-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1); z-index: 0; } 
.portfolio-left { padding-top: 120px; color: #fff; z-index: 5; width:40% } 
.portfolio-left h2 { text-align: left; font-size: 6.5em; line-height: 1.1; font-weight: 300; margin: 0 0 90px 0; font-family: 'Outfit' !important; } 

.portfolio-right { position: relative; overflow: hidden; z-index: 2; padding-top: 150px; box-sizing: border-box; height: 100%; padding-bottom: 250px; width:60% } 
.portfolio-list { position: relative; z-index: 2; list-style: none; margin: 0; padding: 38px 40px 38px 80px; } 
.portfolio-list li:first-child { border-top: 1px solid rgba(255, 255, 255, .3); } 
.portfolio-list li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background 1s ease, color .2s ease; display: flex; align-items: center; font-size: 1.6em; padding: 30px 40px; font-family: 'Outfit' !important; font-weight: 400; } 
.portfolio-list li.active:before,
.portfolio-list li:hover:before { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); content: ''; background: url(../img/port_arrow.png) no-repeat center center; width: 40px; height: 40px; } 
.portfolio-list li.active,
.portfolio-list li:hover { position: relative; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.25)); font-size: 2em; transition: all .4s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, 0.2); } 


/* 클라이언트 */
.main_new_client { background: #000; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } 
.main_new_client h2 { text-align: left; font-size: 6em; line-height: 1.1; font-weight: 400; max-width: 1600px; margin: 0 auto; margin-bottom: 90px; font-family: 'Outfit' !important; width: 98%; } 
.client-row { overflow: hidden; width: 100%; margin: 0 auto 30px; } 
.client-track { display: flex; width: max-content; animation: slide-left 40s linear infinite; gap: 30px; } 
.client-track-reverse { animation: slide-right 40s linear infinite; } 
.client-track ul { display: flex; gap: 30px; align-items: center; margin: 0; padding: 0; list-style: none; } 
.client-track li { width: 400px; aspect-ratio: 400/250; background: #1C1A1A; border-radius: 20px; display: flex; align-items: center; justify-content: center; } 
.client-track li img.nohover { display: block } 
.client-track li img.hoverimg { display: none } 
.client-track li:hover { background: #fff; } 
.client-track li:hover img.nohover { display: none } 
.client-track li:hover img.hoverimg { display: block } 

@keyframes slide-left { 
 0% { transform: translateX(0); } 

 100% { transform: translateX(-50%); } 
 }

@keyframes slide-right { 
 0% { transform: translateX(-50%); } 

 100% { transform: translateX(0); } 
 }


.portfolioClient-wrap { position: relative; height: 100vh; background: #000; overflow: hidden; } 
#portfolioSec { position: absolute; inset: 0; z-index: 3; } 
#clientSec { position: absolute; inset: 0; z-index: 5; will-change: transform, opacity; } 


@media (max-width: 1399px){
 .slogan-title { font-size:3em } 
 .service-content .business_track { gap:2em } 
 .main_new_business .business_track .business_item { padding:30px 30px 100px; } 
 .portfolio-inner { padding:0 0 0 60px; } 
 .client-track li { width: 20em; padding:0 30px; box-sizing: border-box; } 
 .client-track li img { width:60% } 
 .main_new_client h2 { width:92%; font-size:5em } 
 }
@media (max-width: 1199px){
 .slogan-left, .slogan-right { font-size:2.2em; } 
 .slogan-middle-clip { font-size:1.2em } 
 .main_new_business .business_track .business_item { padding:30px 30px 100px; } 
 .main_new_business .business_track .business_item .txt_wrap h2 { font-size:2.5em; margin-bottom:30px;; padding-bottom:30px } 
 .main_new_business .business_track .business_item .txt_wrap p em { font-size:1.1em } 
 .client-track li { width:18em; } 
 }
@media (max-width: 1024px){
 .slogan-left, .slogan-right { font-size:2em } 
 .slogan-middle-clip { font-size:1em } 
 .service-content .business_track { gap:1em } 
 .main_new_business .business_track .business_item { padding:20px 20px 60px } 
 .multi-circle { width:55px; } 
 .main_new_business .business_track .business_item .txt_wrap h2 { font-size:2.2em; } 
 .main_new_business .business_track .business_item .txt_wrap p em { font-size:1em } 
 .portfolio-left { padding-top:80px; } 
 .portfolio-left h2 { font-size:70px; } 
 .portfolio-list { padding:30px 0 } 
 .portfolio-list li.active, .portfolio-list li:hover { font-size:1.8em; } 
 .portfolio-list li { font-size:1.4em } 
 .main_new_client h2 { font-size:4em } 
 }

@media (max-width: 900px){
 .portfolio-inner { grid-template-columns: 1fr; height: 90vh; } 
 .slogan-title { font-size:3em } 
 .portfolio-inner { padding:0 0 0 30px } 
 .portfolio-left { padding-bottom: 0; } 
 .portfolio-right { padding: 120px 0 0; } 
 }


@media (max-width: 768px) {
 /* ====== 공통 레이아웃 ====== */
 .main_movie .mySwiper .swiper-slide { font-size: 70px; } 

 .slogan-title { flex-direction: column; font-size: 2.5em; } 
 .slogan-middle-clip { font-size: 1em; } 

 /* ====== 비즈니스(서비스) ====== */
 .main_new_business { height: auto; overflow: visible; position: relative; padding: 80px 0; } 
 .biz-title { position: relative; left: auto; top: auto; transform: none; margin-bottom: 40px; text-align: center; font-size: 3em; } 
 .service-content { position: relative; inset: auto; margin-top: 30px; height: auto; } 
 .service-content .business_track { gap: 3em; } 
 .main_new_business .business_track { display: flex; flex-direction: column; align-items: stretch; height: auto; } 
 .main_new_business .business_track .business_item { width: 100%; max-width: none; padding: 40px 40px 70px 40px; } 
 .multi-circle { width: 40px; margin-bottom: 20px; } 
 .main_new_business .business_track .business_item .txt_wrap h2 { padding-bottom: 20px; margin-bottom: 20px; } 
 .main_new_business .business_track .business_item .txt_wrap h2 span { display: block; margin-top: 10px; } 
 .business_item .biz-arrow { width: 50px; } 
 .business_item .biz-arrow img { width: 100%; } 

 #bubbleWrap {height:200px;}
 .bubble_d{width:30px;}
 .bubble_w {width:100px;}
 .bubble_d.mo_no {display:none}
 /* ====== 포트폴리오 + 클라이언트 겹침 해제 ====== */
 .portfolioClient-wrap { position: relative; height: auto; overflow: visible; } 
 #portfolioSec,
 #clientSec { position: relative; inset: auto; } 
 #clientSec { z-index: 2; } 

 /* ====== 포트폴리오(모바일은 sticky/100vh/내부스크롤 금지) ====== */
.main_new_portfolio { height: auto; padding: 60px 0; display: block; /* 가운데 정렬로 생기는 여백 방지 */}
.portfolio-inner { position: relative; top: auto; height: auto;overflow: visible;margin: 0 auto; border-radius: 30px;width: 92%;padding: 0;} 
.main_new_portfolio .inner { flex-direction: column; width: 100%; height: auto; } 
.portfolio-left,
.portfolio-right { width: 100%; } 
.portfolio-left { padding-top: 50px; } 
.portfolio-left h2 { font-size: 60px; margin-bottom: 50px; } 
.portfolio-right { padding: 0; height: auto; overflow: visible;  padding-bottom: 30px; } 
.portfolio-list { padding: 0; position: relative; z-index: 10;}
.portfolio-list li { flex-direction: column; align-items: flex-start; } 
.portfolio-list li:hover { font-size: 1.6em; } 
#portfolioList { transform: none !important; } 
.portfolio-list .mo-preview { width: 100%; max-height: 0; overflow: hidden; transition: max-height .45s ease; margin-top: 0; border-radius: 18px; position: relative; z-index: 10; } 
.portfolio-list .mo-preview .mo-preview-inner { width: 100%; height: 220px; 
background-size: cover; background-position: center; } 
.portfolio-list li.is-open .mo-preview { max-height: 260px; margin-top: 25px; } 
.main_new_client { padding: 60px 0 80px; } 
.main_new_client h2 { margin-bottom: 35px; font-size: 3em; } 
.client-track ul { gap: 25px; } 
.client-track,
.client-track-reverse { animation-duration: 20s; } 
.client-track li { width: 12em; } 
.client-track li img { width: 60%; } 
}



 @media (max-width: 480px){
 .slogan-title { font-size:1.8em } 
 .slogan-left, .slogan-right { font-size:2.5em } 
 .service-content .business_track { gap:3em } 
 .main_new_client h2 { font-size:2.5em } 
 .client-track ul { gap:10px; } 
 .client-track li { width:10em; padding:20px 0 } 
 .client-row { margin-bottom:10px; } 
 .portfolio-list li {padding:30px 20px;}

 }

 @media (max-width: 420px){
 .slogan-title {font-size: 1.3em;}

 }