/* 기본 커서 숨기기 */
body { cursor: none; }

/* 커스텀 커서 */
.custom-cursor {position: fixed;top: 0; left: 0;width: 20px; height: 20px;border-radius: 50%;background: rgba(255, 255, 255, 1);pointer-events: none;z-index: 9999;transform: translate(-50%, -50%);transition: width 0.35s ease, height 0.35s ease, background 0.35s ease, opacity 0.3s ease;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 14px;opacity: 0.9;mix-blend-mode: difference; }
.custom-cursor span {opacity: 0;transition: opacity 0.25s ease;pointer-events: none;}
.custom-cursor.active {width: 120px; height: 120px;background: rgba(255, 255, 255, 1);color: #000;}
.custom-cursor.active span {opacity: 1;}

/* 메인 시작 */
#main{overflow:hidden;}
#main .main_movie{width: 100%;height: 100vh;position: relative;top: 0;left: 0;overflow: hidden;}
#main .main_movie video{height: 120%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}



.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", "Pretendard", -apple-system, BlinkMacSystemFont,"Segoe UI", system-ui, sans-serif;font-size: clamp(32px, 5.2vw, 56px);font-weight: 700;line-height: 1.2;text-align: center;}
.slogan-left,
.slogan-right {font-family: "Outfit";display: inline-block;font-weight: 800;color: #fff;white-space: nowrap;font-size: 3em;}
.slogan-middle {position: relative;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: 300;font-size: 80px;color: #555555;}
.center-layer {position: relative;z-index: 1;}
@media (max-width: 768px) {
.main_new_intro.slogan-section {padding: 100px 16px;}
.slogan-title {flex-direction: column;gap: 20px;font-size: clamp(26px, 7vw, 34px);}
.slogan-left,
.slogan-right {font-size: 1.8em;}
.slogan-middle-clip {white-space: normal;font-size: clamp(20px, 6vw, 28px);}
}



.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', sans-serif !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: 100px;}
.main_new_business .business_track .business_item {padding: 50px 50px 130px;color:#000;position: relative;overflow: hidden;}
.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: 60px;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: 30px;font-family: 'Pretendard Variable' !important;}
.main_new_business .business_track .business_item .txt_wrap p em {display: block;font-style: normal;font-family: 'Pretendard Variable' !important;font-size: 20px;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;
}

.btn-svg-box {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.btn-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.morph-path {
    fill: rgba(255,255,255,.9);
    transform-origin: center center;
    transition:
        d 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        fill 0.6s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.business_item:hover .morph-path {
    d: path("M490,420c-22,0-40,18-40,40s-18,40-40,40H20C9,500,0,491,0,480V20C0,9,9,0,20,0h490c11,0,20,9,20,20v361.5c0,21.17-18,38.5-40,38.5Z");
}

.business_item .biz-arrow {position: absolute;right: -100px;bottom: -100px;border: none;background: transparent;padding: 0;transition:.3s; }
.business_item:hover .biz-arrow {right: 10px;bottom: 10px;transition:.3s}


.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;padding-top:80px;}
.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: grid;grid-template-columns: 0.4fr 0.6fr;height: 100%;position: relative;z-index: 2;}
.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;}
.portfolio-left h2 {text-align: left;font-size: 130px;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%}
.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: 24px;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: 30px;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;padding: 100px 0 70px;color: #fff;overflow: hidden;}
.main_new_client h2 {text-align: left;font-size: 100px;line-height: 1.1;font-weight: 400;max-width: 1600px;margin: 0 auto;margin-bottom: 90px;font-family: 'Outfit' !important;}
.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;}
@keyframes slide-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes slide-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
@media (max-width: 768px) {
    .main_new_client h2 { font-size: 20px; margin-bottom: 35px; }
    .client-track ul { gap: 25px; }
    .client-track li img { height: 40px; }
    .client-track, .client-track-reverse {animation-duration: 9s; }
}
.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;}