body{background: #000;}



.left{text-align: left;}
.right{text-align: right;}
.no-scroll{overflow: hidden;height: 100%;touch-action: none;}

.intro-loader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.intro-content {position: relative; text-align: center; z-index: 10;}
.intro-logo {opacity: 0; filter: blur(20px); transform: scale(0.8); margin-bottom: 20px;}
.intro-logo img{filter: brightness(0) invert(1);}
.intro-bar-wrap {width:100%; height: 5px; background: rgba(255,255,255,0.1);  overflow: hidden;position: absolute;left: 0;bottom: 0;}
.intro-bar {width: 0%; height: 100%; background: #fff;}
.intro-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/common/bg_footer.png) no-repeat center / cover; opacity: 0.3; filter: grayscale(1);}

/* sub 로딩 */
.loading{background: #000;position: fixed;left: 0;top: 0;width: 100%;height: 100vh;z-index: 9999999;display: flex;flex-direction: column;align-items: center;justify-content:center}
.loading-wrap {display: flex;flex-direction: column;align-items: center;}
.logo-container {max-width: 256px;width: calc(100% - 40px);}
.logo-svg {width: 100%;}
.logo-path-stroke {fill: none;stroke: white;stroke-width: 0.5;stroke-dasharray: 500;stroke-dashoffset: 500;transition: stroke-dashoffset 0.05s linear;}

.logo-path-fill {fill: white;opacity: 0;transition: opacity 0.4s ease;}

.progress-bar {width:calc(100% - 40px);margin:3rem auto 0 auto;max-width: 256px;height: 1px;background: #2a2a2a;}
.progress-fill {height: 100%;background: white;width: 0%;transition: width 0.05s linear;}

@media screen and (max-width:768px) {
  .intro-logo img{width: 70px;}
  .intro-bar-wrap{height: 3px;}
}

.sub_layout{position: relative;padding: 7.5rem 0 0 0;background: url(../../images/sub/bg_work.png) no-repeat}
/*.sub_layout:after{content: '';display: block;width:100%;height: 300px;background: #000;filter: blur(15.334163665771484px);position: absolute;left: 0;top: 550px;z-index: 0;}
*/
.sub_visual.works{height: 43.4375rem;position: relative;width: 100%;overflow: hidden;}
.sub_visual.works .txt_box{display: flex;flex-direction: column;gap:3.125rem ;color: #fff;}
.sub_visual.works h2{font-family: "Albert Sans";font-size: 5rem;font-weight: 300;line-height: 100%;letter-spacing: -0.1rem;text-transform: uppercase;perspective:1000px;}
.sub_visual.works h2 .m-char{display:inline-block;transform-origin:bottom;transform-origin:50% 100%;;will-change:transform;}
.sub_visual.works p{font-size: 1.125rem;font-weight: 400;line-height: 160%;letter-spacing: -0.045rem;word-break: keep-all;}
.sub_visual.work p .line-wrap{overflow:hidden;}
.sub_visual p.line{display:block;}
.sub_visual.works .visual-bg-text{display: block;color: #FFF;text-align: right;font-family: "Albert Sans";font-size: 11.0625rem;font-style: normal;font-weight: 700;line-height: 70%;letter-spacing: -0.66375rem;text-transform: uppercase;width: 100%;position: absolute;right: 40px;bottom: 0;opacity: 0.13; white-space: pre;pointer-events:none;z-index: 6}

@media screen and (max-width:1440px) {
  .sub_visual.works .visual-bg-text{right: 20px;}
}

@media screen and (max-width:768px) {
  .sub_visual.works{height: 25rem;}
  .sub_visual.works{overflow: hidden;}
  .sub_visual.works .txt_box{gap: 1.5625rem;}
  .sub_visual.works h2{font-size: 2.5rem;}
  .sub_visual.works h2 br{display: none;}
  .sub_visual.works .visual-bg-text{font-size: 3.5rem;letter-spacing:-0.125rem;line-height: 80%;}
}


/* contact */
.vs-contact{position: fixed;right: 0;bottom: 0;display: flex;gap: .625rem;color: #FFF;font-size: 0.9375rem;font-weight: 400;line-height: 140%;letter-spacing: -0.0375rem;align-items: center;z-index: 99;transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);background: rgba(0, 0, 0, 0.60);padding: 0.625rem 1.875rem;}
.vs-contact::before{content: '';display: block;width: 40px;height: 40px;background: url(../../images/common/s_logo.svg) no-repeat center #fff;border-radius: 50%;transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
/* Hover 효과 */
.vs-contact:hover {letter-spacing: 0.05em;}
.vs-contact:hover::before {transform: scale(1.2) rotate(360deg); box-shadow: 0 10px 20px rgba(0,0,0,0.2);}
.vs-contact:hover::after {width: calc(100% - 60px);}


@media screen and (max-width:768px) {
  .vs-contact{padding: 0.625rem 1.25rem}
  .vs-contact::before{width: 25px;height: 25px;background-size: 15px;}
}


/* 프로젝트 hover 효과 */
.circle-hover {position: absolute;width: 120px; height: 120px;border-radius: 50%;display: flex;align-items: center;justify-content: center;pointer-events: none;z-index: 10;background: #fff;color: #000;mix-blend-mode: difference;font-family: "Zalando", sans-serif;font-size: 0.8rem;letter-spacing: 0.1em;font-weight: 700;text-transform: uppercase;transform: scale(0);opacity: 0;transition: opacity 0.3s ease;pointer-events: none;}
.circle-hover span {display: inline-block;}

.circle-hover.more-view {width: 150px;height: 150px;background: #739CF2; color: #fff;mix-blend-mode: normal;}

.circle-hover.more-view span {font-size: 0.75rem;line-height: 1.2;text-align: center;font-weight: 800;}


/* 서브 타이틀 */
.sub-main-title-wrap{overflow: hidden;}
.sub-main-title{margin-bottom:6.8125rem;color: rgba(255, 255, 255, 0.40);font-family: "Albert Sans";font-size: 9.375rem;font-weight: 700;line-height: 80%;letter-spacing: -0.5625rem;text-transform: uppercase;}

/* webp 지원 */
@supports (background-image: url("../../images/common/bg_footer.webp")) {
  .intro-bg {
    background: url(../../images/common/bg_footer.webp) no-repeat center / cover;
  }
}
@supports (background-image: url("../../images/sub/bg_work.webp")) {
  .sub_layout {
    background: url(../../images/sub/bg_work.webp) no-repeat;
  }
}