/* BASIC css start */
#main .mobile-gnb-bar { display: flex; }

@media screen and (min-width: 768px) {
  .Hero-cont-- {width: 50%;}
}

.since object{width:100%}

/* ───────────────────────────────────────────
       HERO SECTION
─────────────────────────────────────────── */
.hero.vh {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ── 배경 이미지 ── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.06);
  animation: bgZoomOut 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-bg picture,
.hero-bg picture img,
.history-bg picture,
.history-bg picture img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


@keyframes bgZoomOut {
  to { transform: scale(1.015);}
}

.hero-title,
.hero-cont-,
.Hero-cont-- {
  opacity: 0;
  transform: translateY(30px); 
  animation: smoothFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


 .hero-title   { animation-delay: 0.2s; }
.hero-cont-   { animation-delay: 0.35s; }
.Hero-cont--  { animation-delay: 0.5s; }

@keyframes smoothFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ── 오버레이 ── */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── 콘텐츠 ── */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 로고 ── */
.logo_tristar {
  display: block;
  height: auto;
  filter: opacity(0.8);
}

.logo_maxta {
  display: block;
  height: auto;
}

/* ── 서브타이틀 ── */
.hero-cont- {
    color: #1D1D1B;
    font-weight: 500;
}

/* ── 본문 ── */
.Hero-cont-- {
    font-family: 'Pretendard';
    color: #2d2d2d;
    line-height: 42px;
    font-weight: 300;
    text-shadow: 0px 0px 10px #FFFFFF80;
    word-break: keep-all;
}

/* ── reveal 애니메이션 ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: fadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────
   PC (1025px 이상)
──────────────────────────────── */
@media (min-width: 1025px) {
  .hero.vh {
    height:85vh;
  }

  .hero-overlay {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.25) 35%,
      rgba(255, 255, 255, 0.0) 58%
    );
  }

  .hero-content {
    height: 100%;
    padding: 0 0 0 14%;
    gap: 0;
    margin-top: -2%;
  }

  .logo_tristar {
    width: clamp(150px, 15vw, 230px);
    margin-bottom: clamp(12px, 1.8vw, 26px);
  }

  .hero-cont- {
    font-size: clamp(15px, 2.45vw, 42px);
    margin-bottom: clamp(12px, 2.5vw, 48px);
    line-height: 42px;
  }

  .Hero-cont-- {
        font-size: clamp(12px, 28px, 28px);
        font-weight: 400;
        line-height: 42px;
  }
  
}

@media @media (min-width: 1025px)  and (max-width :1100px){
    
  .tab-size{display:block; font-style: unset;}
  .tab-size-br{display:none}

}
/* 기본 상태 (PC: 1025px 이상) - 2줄로 표시 */
.br-pc { display: inline; }
.br-tab { display: none; }


/* ────────────────────────────────
   MO (1024px 이하)
──────────────────────────────── */
@media (max-width: 1024px) {
  
  
  
  .hero.vh {
     height:80svh;
    min-height:800px;
  }
  .tab-size{}

  /* MO 오버레이: 상단 텍스트 가독성 */
  .hero-overlay {
    /*background: linear-gradient(
      to bottom,
      rgba(242, 241, 238, 0.62) 0%,
      rgba(242, 241, 238, 0.22) 42%,
      rgba(242, 241, 238, 0.0) 66%
    );*/
  }

  .hero-content {
    height: 100%;
        padding: 35% 15% 0 15%;
    justify-content: flex-start;
    gap: 0;
  }

  .logo_tristar {
    width: clamp(100px, 34vw, 170px);
    margin-bottom: clamp(8px, 2.8vw, 16px);
  }

  .hero-cont- {
    font-size: clamp(14px, 4vw, 42px);
    margin-bottom: clamp(8px, 2.2vw, 14px);
  }

  .Hero-cont-- {
    font-size: clamp(11px, 3vw, 13.5px);
    display:none;
  }

  .Hero-cont-- br {
    display: none;
  }
  
  .Hero-cont-- {
    display: none
  }

  /* 💡 태블릿 환경용 줄바꿈 제어 (3줄로 표시) */
  .br-pc { display: none; }   /* PC 전용 줄바꿈 숨김 (위 HTML 구조상 여기선 생략해도 무방) */
  .br-tab { display: inline; } /* 태블릿용 줄바꿈 활성화 */
   
}



/* ───────────────────────────────────────────
       HISTORY SECTION
─────────────────────────────────────────── */
.history.vh {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ── 배경 이미지 ── */
.history-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.history-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.06);
  transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-detect.active ~ .history-bg img,
.history.active .history-bg img {
  transform: scale(1);
}

/* ── 오버레이 ── */
.history-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── 콘텐츠 ── */
.history-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-top: -2%;
  justify-content: center;
}

/* ── 로고 ── */
.logo_tristar {
  display: block;
  height: auto;
}

/* ── 서브타이틀 ── */
.history-cont- {
    color: #fff;
    font-weight: 500;
}

/* ── 본문 ── */
.History-cont-- {
    font-family: 'Pretendard';
    color: #fff;
    line-height: 42px;
    font-weight: 300;
    word-break: keep-all;
}

/* ── 스크롤 인터랙션 애니메이션  ── */
.history-title,
.history-cont-,
.History-cont-- {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.history-title   { transition-delay: 0.1s; }
.history-cont-   { transition-delay: 0.25s; }
.History-cont--  { transition-delay: 0.4s; }

.scroll-detect.active .history-title,
.scroll-detect.active .history-cont-,
.scroll-detect.active .History-cont-- {
  opacity: 1;
  transform: translateY(0);
}

/* ────────────────────────────────
   PC (1025px 이상)
──────────────────────────────── */
@media (min-width: 1025px) {
  .history.vh {
     height:85vh;
  }

  .history-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0.0) 58%);
  }

  .history-content {
    height: 100%;
    padding: 0 0 0 14%;
    gap: 0;
  }

  .logo_tristar {
        margin-bottom: 80px;
        line-height: 1;
        width: 330px;
  }
  
  .logo_maxta{
        margin-bottom: 80px;
        line-height: 1;
        width: 338px;}

  .history-cont- {
        font-size: clamp(15px, 2.45vw, 42px);
        margin-bottom: clamp(12px, 2.5vw, 48px);
        line-height: 42px;
  }

  .History-cont-- {
    font-size: clamp(12px, 28px, 28px);
    font-weight: 400;
    line-height: 42px;
  }
}

/* ────────────────────────────────
   MO (1024px 이하)
──────────────────────────────── */
@media (max-width: 1024px) {
  .history.vh {
   height:80svh;
    min-height:600px;
  }
  
  .hero-title,.hero-cont-,
  .history-title,.history-cont-{display:none}
  
  .history-overlay {
       /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.0) 66%);*/
  }

  .history-content {
    height: 100%;
    padding: 35% 15% 0 15%;
    justify-content: flex-start;
    gap: 0;
  }

  .logo_tristar {
    width: clamp(100px, 38vw, 300px);
    margin-bottom: clamp(8px, 2.8vw, 16px);
    filter: opacity(1);
  }

  .logo_maxta {
    width: clamp(100px, 38vw, 300px);
    margin-bottom: clamp(8px, 2.8vw, 16px);
    filter: opacity(1);
  }
  
  .history-cont- {
        font-size: clamp(14px, 4vw, 42px);
        margin-bottom: clamp(8px, 2.2vw, 14px);
  }

  .History-cont-- {
    font-size: clamp(11px, 3vw, 13.5px);
    display:none;
  }

  .History-cont-- br {
    display: none;
  }
}

@media (max-width: 380px) {
  .history.vh { aspect-ratio: 9 / 14; }
}


img.only-mo,
img.only-pc{width:100%}



/* ── 미디어쿼리 (1024px 이하 모바일) ── */
@media (max-width: 1024px) {
  .only-pc { display: none; }
  .only-mo { display: block; }  

    /* 메인배너 상하 잘림 현상 해결 */
    .hero.vh, .history.vh{height:auto; min-height: auto;}
    .hero-bg, .history-bg{position:relative;}
    .hero-content, .history-content{display:none;}
    
    
}




.hero-video {
    background-image: url('https://getquash.com/_fm/images/quashmain_1920.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    height: calc(100vh - 30px);
    overflow: hidden;
}

.hero-video .video {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-video .video.portrait {
    display: none;
}




@media (max-width: 1300px) and (orientation: portrait) {
    .main-hero .hero-video {
        background-image: url('https://getquash.com/_fm/images/quashmain_1920_vertical_20260320.jpg');
        padding-top: 148.148%
    }

    .main-hero .hero-video .video.landscape {
        display: none;
    }

    .main-hero .hero-video .video.portrait {
        display: block;
    }
    
    
}

/* BASIC css end */