#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 } 
@media (max-width: 768px){
 .main_movie .mySwiper .swiper-slide { font-size: 70px; } 
 }

.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: 1700px; margin: 0 auto; width: 92%; display: flex; gap: 5em; 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: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; padding: 0 120px; } 
.main_new_portfolio .inner { display: flex;  height: 100%; position: relative; z-index: 2; justify-content: space-between;} 
.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; cursor: pointer; transition: background 1s ease, color .2s ease; display: flex; align-items: center; font-size: 1.5em; padding: 30px 40px; font-family: 'Outfit' !important; font-weight: 300; } 
.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); } 

@media (max-width: 900px){
 .portfolio-inner { grid-template-columns: 1fr; height: 80vh; } 

 .portfolio-left { padding-bottom: 0; } 

 .portfolio-right { padding: 120px 0 80px; } 
 }

/* 클라이언트 */
.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; height: 250px; 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; filter: brightness(0) } 

@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){
    .portfolio-inner {padding:0 60px;}
    .client-track li {    width: 20rem;
    height: 14rem;}
    .main_new_client h2 {width:92%}
}
@media (max-width: 1199px){
    .service-content .business_track {gap: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}
}
@media (max-width: 1024px){
    .slogan-title {font-size:2.2em}
    .service-content .business_track {gap:1em}
}


@media (max-width: 768px){
 .slogan-title { flex-direction: column; } 
 .slogan-middle-clip {font-size:1em}

 .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-bottom:60px;}
.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%}



 .main_new_portfolio .inner {flex-direction: column;}
 .portfolio-left,
 .portfolio-right {width:100%;}
 .portfolio-left {padding-top:50px;}
 .portfolio-inner {padding:0 30px;}
 .portfolio-list {padding:0}
 .portfolio-right {padding:50px 0 0}
 .main_new_client h2  {margin-bottom:30px;}

 }


 @media (max-width: 768px){
 .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 ; height:9em}
 .client-track li img {width:60%}
 }

@media (max-width: 640px){
    .slogan-title {font-size:1.5em}
    .slogan-middle-clip {font-size:.9em}
}

 .portfolio-left h2{font-size:130px;line-height:1.1}
@media(max-width:1200px){.portfolio-left h2{font-size:100px}}
@media(max-width:1024px){.portfolio-left h2{font-size:80px}}
@media(max-width:768px){.portfolio-left h2{font-size:60px}}