/* IMPORT */
@import url(//font.binism.com/ko/pretendard/font.css);


/* RESET */
* {margin: 0; padding: 0;}
body {font-family: 'Pretendard'; font-size: 16px; color: #111; box-sizing: border-box; overflow-x: hidden;}
ul {list-style: none;}
a {text-decoration: none; color: #333;}


/* COMMON */
:root {
  --root-white-color: #ffffff;
  --root-blue-color: #15325f;
  --root-skin-color: #dfceb2;
  --root-black-color: #0f0f0f;
  
  --root-header-m: 84px;
  --root-header-d: 84px;
  --root-darkblue-color: #0a3361;
  --stream-small-gap: 40px;
  --stream-medium-gap: 65px;
  --stream-big-gap: 83px;
  --root-skin-color: #dfceb2;
  --circle-diameter-d: 30vw;
}

.header {position: fixed; top: 0; left: 0; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; width: 90%; height: var(--root-header-d); z-index: 10;}
.header--black {background: #000;}
.header--white {background: #fff;}
.header__link {display: flex; align-items: center;}
.header__svg {width: 35px;}

.hamburger {position: relative; width: 24px; height: 24px; background: none; border: none; cursor: pointer; display:none;}
.hamburger__line {position: absolute; left: 0; width: 100%; height: 2px;}
.hamburger__line:nth-child(1) {top: 4px;}
.hamburger__line:nth-child(2) {top: 11px;}
.hamburger__line:nth-child(3) {bottom: 4px;}
.hamburger__line--black {background: #000;}
.hamburger__line--white {background: #fff;}


.nav { position: fixed; z-index: 11; right:5%; height: var(--root-header-d);}
.nav__list {display: flex; align-items: center; height: 100%; gap: 90px; }
.nav__item {}
.nav__link {}
.nav__link--black {color: #000;}
.nav__link--white {color: #fff;}


.footer {position: relative; padding: 60px 5%; font-size: 14px;}
.footer--blue {background:#041839; color: #fff;}
.footer--black {background: #fff; color: #000;}
.footer--white {background: #000; color: #fff;}
.footer__content {display: flex; border-top: 1px solid #505a6a; justify-content: space-between; align-items: center; padding: 50px 0;}
.footer__logo {width: 200px;}
.footer__main {display: flex;}
.footer__list {display: flex; justify-content: space-between; gap: 4vw;  padding-right:40px;}
.footer__item {line-height: 1.5em;}
.footer__sns {display: flex; align-items: center; gap: 7px;}
.footer__icon {width: 36px; height: 36px;}
.footer__link {}
.footer__image {width: 100%;}

.main { }


/* INDEX */
.visual {overflow: hidden; position: relative;  height: 100vh; justify-content: space-between; /*width: calc(100% - 130px); padding: 40px 65px;*/ width:100%; }
.visual__video {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    /* 하드웨어 가속 강제 적용 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0); /* Webkit 브라우저용 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Webkit 브라우저용 */
    /* 비디오가 컨테이너를 완벽히 채우도록 */
    object-fit: cover;
}
.visual__end { justify-content: space-between; width: calc(100% - 130px);  padding: 40px 65px; position: absolute; bottom: 0; display: flex; align-items: center; }
.visual__logo { width: 96px; height:30px; background-image: url(../images/index/unisonocombined-vertical-pc.svg); background-position: center; background-repeat: no-repeat;}
.visual__text {color: var(--root-darkblue-color); overflow: hidden; text-align: right;}

.stream {position: absolute; top: 50%; transform: translateY(-50%); }
.stream__list { overflow: hidden; display: flex; gap: var(--stream-big-gap);  }
.stream__item { display: flex; gap: 80px; animation: stream-big 20s linear infinite; }
.stream__icon {width: 164px;}
.stream__text {font-size: 120px; font-weight: 800; color: var(--root-darkblue-color); white-space:nowrap}
    @keyframes stream-big {
        to {transform: translateX(calc(-100% - var(--stream-big-gap)));}
    }

    
    

.term { display: flex; flex-direction: column; justify-content: center; height: calc(100vh - var(--root-header-m)); background: #000; color: #fff; text-align: center; padding:0 10px; font-size:clamp(36px, 3vw, 48px);}


.ticker {position: relative; overflow: hidden; background: var(--root-darkblue-color); padding: 44px 0;  }
.ticker_section{  position:fixed; top:0; left:0; width:100%; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:space-aroud; z-index:100;  }
.ticker__title {color: #fff; text-align: center; font-size: clamp(24px, 2vw, 36px);}
.ticker__list {padding: 20px 0;}
.ticker__item { display: flex; justify-content: center; align-items: center; gap: 40px; font-size:8vw; white-space: nowrap; transform: translate3d(0, 0, 0);  will-change: transform;}
.ticker__item:nth-child(1) {transform: translateX(-50px);}
.ticker__item:nth-child(2) {transform: translateX(100px);}
.ticker__item:nth-child(3) {transform: translateX(-80px);}
.ticker-content { white-space: nowrap; }
.ticker__unit {display: flex; justify-content: center; align-items: center; gap: 20px;}
.ticker__big {color: #fff; font-size: clamp(160px, 12vw, 200px); font-weight: 700; letter-spacing: -0.01em}
.ticker__small {color: var(--root-skin-color); font-size: clamp(48px, 5vw ,60px); font-weight: 300; letter-spacing: -0.05em}
.circle {height: 2000px;}
    


.keel {position: relative; background: #000; overflow: hidden;}
.keel__line {position: absolute; /*top: -180px; */width: 2px; height: calc(100%); background: rgba(255, 255, 255, 0.08); transform: translate(-50%, 0); }
.keel__light {width: 2px; height: 180px; background: linear-gradient(rgba(0, 0, 0, 0) 0px, rgb(0, 87, 255) 100%); border-radius: 40px;}
.keel__list {display: grid;}
.keel__item {position: relative; display: grid;}
.keel__text {display: grid; color: #fff;}
.keel__title {transform:translateY(8rem); transition:transform 1s cubic-bezier(.165,.84,.44,1),opacity .6s; opacity:0;}
.keel__desc {transform:translateY(8rem); transition:transform 1s cubic-bezier(.165,.84,.44,1),opacity .6s ;color: #ccc; white-space: nowrap; line-height: 1.4em; opacity: 0;}
.keel__dot {position: absolute; border-radius: 50%; background: rgb(0, 87, 255);}
.keel__image {display: block; transform: translateY(60%) scale(.4); transition: transform 2s cubic-bezier(.165,.84,.44,1),opacity 1s; background-repeat: no-repeat; background-size: cover; background-position: center; }
.keel__item.on .keel__title, .keel__item.on .keel__desc{
  transform:translateY(0); transition:transform 2s cubic-bezier(.165,.84,.44,1),opacity 1s; opacity:1;
}
.keel__item.on .keel__image {
  transform:translateY(0) scale(1); transition:transform 2s cubic-bezier(.165,.84,.44,1),opacity 1s; opacity:1;
}


/* 타임라인 컨테이너 */
.timeline{ position: relative; background:#000; overflow:hidden;}
.timeline-container { width: 80%; max-width: 1200px; margin: 0 auto;}
.timeline-line { position: absolute; height:100%; left: 50%; width:1px; background-color: #fff; transform: translateX(-50%); z-index: 1;}
.timeline-item { position: relative;    z-index: 2; }
.content-wrapper { display: flex; justify-content: space-between;    align-items: center; }

.text-content { width: 40%;    padding: 20px;    box-sizing: border-box;    color:#fff;}
.text-content h2{ padding-bottom:10px;}
.image-placeholder { width: 40%; overflow:hidden;}
.image-placeholder img{ width:100%;}
.right-content .text-content {    order: 1; }
.right-content .image-placeholder {    order: 2; }
.right-content{  padding:200px 0;}
.right-content:last-child{ padding: 0 0;}
.left-content .text-content { order: 2;  }
.left-content .image-placeholder { order: 1;}
.left-content .content-wrapper { justify-content: flex-start;}
.left-content .text-content { margin-left:20%; }
.point { 
    position:absolute; 
    left:50%;
    top:50%; 
    width:10px; 
    height:10px;
    border-radius:50%; 
    background-color: #007bff; /* 파란색 */
    box-shadow: 0 0 10px 5px rgba(0, 123, 255, 0.8), /* 외부 빛 */
                0 0 20px 10px rgba(0, 123, 255, 0.4); 
    transform: translate(-50%, 0); /* 중앙 정렬 (left: 50%와 함께 사용) */
    transition:left 0.1s ease-out, right 0.1s ease-out, opacity 0.3s; 
    opacity:0; 
    z-index:3; 
}
.point.active { opacity: 1;}


/* Split Section 스타일 */
.split-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.split-section__container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 초기 텍스트 래퍼 */
.split-section__text-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* 위아래로 갈라질 텍스트 */
.split-section__text-top,
.split-section__text-bottom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(80px, 12vw, 170px);
  color: #fff;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* 보라색 마스크 (위아래로 펼쳐지는 배경) */
.split-section__mask {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 0;
  background-color: #081837;
  z-index: 2;
  will-change: height;
}

/* 최종 콘텐츠 (마스크가 펼쳐진 후 보이는 내용) */
.split-section__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  opacity: 0; /* 초기에는 숨김 */
}

.split-section__final-text {
  text-align: center;
  color: #fff;
}

.split-section__line1 {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  margin-bottom: 20px;
  line-height: 1.2;
}

.split-section__line2 {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  line-height: 1.2;
}

/* 흰색 직사각형 이미지 */
.split-section__blank-image {
  width: clamp(200px, 30vw, 400px);
  height: 1em; /* 텍스트 높이와 동일 */
  background-color: #fff;
  border-radius: 20px;
  flex-shrink: 0;
}




/* ---------------------------------- */
/* 1. about page */
/* ---------------------------------- */
.main--about {background: #000; color: #fff;  }
.hero--about { background-image: url(../images/about/hero-about-pc.jpg); display: flex; justify-content: center; align-items: center; height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hero__image--about {width: clamp(215px, 25vw ,400px);}

.about__title{ font-size:44px;}
.about__desc { flex-direction: column; margin-top: clamp(23px, 2vw, 10px); font-size: 1rem; font-weight: 300; line-height: 1.5em; text-align:justify; word-break:; inherit; }
.about__title--brandidentity{ font-size:30px;}
.about__desc--brandidentity{ font-soze:12px; }
.aboutgrid {display: grid; margin-top: clamp(21px, 7vw ,145px);}
.aboutgrid__item {display: flex; justify-content: center; align-items: center;}
.aboutgrid__item:nth-child(1) {background: var(--root-white-color);}
.aboutgrid__item:nth-child(2) {background: var(--root-blue-color);}
.aboutgrid__item:nth-child(3) {background: var(--root-skin-color);}
.aboutgrid__item:nth-child(4) {background: var(--root-black-color);}

.brandvision { padding-top: clamp(50px, 8vw ,120px); padding-left:40px; padding-right:40px;}
.m_text{ display:none;}
.brandvision__list {display: flex; flex-direction: column; center; width:60%; margin-left:40%; margin-top: clamp(55px, 3vw ,95px);align-items: flex-end; gap: clamp(20px, 3vw ,45px);}
.brandvision__item {display: flex; flex-direction: column; width:100%; padding-top:20px;  justify-content: margin-left: clamp(20px, 2vw ,30px); height: clamp(65px, 8.5vw, 144px); font-size: clamp(14px, 2vw ,30px);font-weight: 500; color: #fff;background-size: cover;}

.brandvision__item:nth-child(1) {background-image: url(../images/about/about-brandvision1-pc.jpg);}
.brandvision__item:nth-child(2) {background-image: url(../images/about/about-brandvision2-pc.jpg);}
.brandvision__item:nth-child(3) {background-image: url(../images/about/about-brandvision3-pc.jpg);}
.brandvision__item span{padding-left:clamp(20px, 2vw, 30px);}
.brandvision__small {font-size: clamp(12px, 2vw ,24px)}
.brandvision__medium{font-weight:bold; }
.brandvision__slogan { padding-top: clamp(60px, 1vw ,40px); font-weight: 700; opacity: 0.2; font-size:60px;}

.brandidentity{ padding:100px 40px 0 40px; }
.brandidentity__list {display: flex; flex-direction: column; align-items: center; gap: clamp(15px, 3vw ,50px); padding-top:100px;}
.brandidentity__item {width: 100%;}
.brandidentity__image {width: 100%;}


.color-palette {
    width: 100%;
    max-width: 100%;
    height: 400px; 
    margin: 100px auto; 
}
.color-palette:after{ clear:both; display:block; content:"";}

.color-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.color-block p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}


.color-block.unisono-blue {
    height:100%;
    background-color: #041839;
    color: #fff;
    width:50%;
    float:left;
}

.color-row-mobile{ 
    width:50%;
    float:left;}

.color-row-mobile:after{ display:block; clear:both; content:""; }
.color-block.warm-pink {
    background-color: #E84FA3;
    height:200px;
    color: #fff;
}

.color-block.sky-blue {
    background-color: #31A5D3;
    color: #fff;
    float:left;
    width:50%;
    height:200px;
}

.color-block.clear-white {
    background-color: #FFFFFF;
    color: #000; /* 흰색 배경이므로 텍스트는 검정 */
    float:left;
    width:50%;
    height:200px;
}

.color-block {
    padding: 30px;
    box-sizing:border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}       




.brandsymbol{ box-sizing: border-box; width: 100%; background: var(--bs-bg); padding:0 40px; margin: 0 auto; display: block;}
.brandsymbol > * { max-width: var(--bs-max-width); margin-left: auto; margin-right: auto; }
.brandsymbol__title{font-size:44px; line-height: 1.2;  margin: 0 0 0.4rem; font-weight: 600; color: #fff; }
.brandsymbol__desc{ margin:1rem 0 3rem 0; font-size: 1rem; color: #fff; line-height:1.5em; }

.brandsymbol__grid{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bs-gap); grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); /* 기본: 로고 아이템 최소 96px */ align-items: center; justify-items: center; }
.brandsymbol__item{ width: 100%; max-width: 160px;  display: flex; align-items: center; justify-content: center; padding: 0.35rem; transition: transform .18s ease, opacity .18s ease; will-change: transform, opacity;}
.brandsymbol__item img{ display: block; width: 100%;  height: auto; max-height: 100px; object-fit: contain;      /* 로고 비율 유지 */ aspect-ratio: 1 / 1;      /* 로고가 정사각형이라면 유용 (브라우저 지원 체크) */ user-select: none; }

/* 호버/포커스 효과 (데스크톱에서만 약간 적용) */
.brandsymbol__item:focus-within,
.brandsymbol__item:hover{ transform: translateY(-4px); opacity: 0.98; }

.brandsymbol__cta{ margin-top: 1.25rem; text-align: center; }
.brandsymbol__slogan{ margin: 0; font-size: 0.95rem; color: var(--bs-accent); font-weight: 600; }

.brandsymbol__list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2.4rem; margin-top:5rem; margin-bottom:5rem;}
.brandsymbol__item {display: flex; flex-direction: column; align-items: center;}
.brandsymbol__icon {  width:210px; height:210px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.brandsymbol__icon--members {background-image: url(../images/about/about-icon1.png);}
.brandsymbol__icon--creative {background-image: url(../images/about/about-icon2.png);}
.brandsymbol__icon--cooperate {background-image: url(../images/about/about-icon3.png);}
.brandsymbol__icon--unisono {background-image: url(../images/about/about-icon4.png);}
.brandsymbol__text {font-size:16px; padding-top:20px; }




.color-grid-container { width: 100vw; display: grid; padding-top:100px;}
.color-grid-container--pc{  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.color-grid-container--m{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr);  display:none;}
.color-grid-block { display: flex; justify-content: center; align-items: center;  transition: background-color 0.3s; }
.icon-placeholder { max-width: 100px; padding:80px 0; align-items:center; display:flex;}
.icon-placeholder img{ width:100%;}
.color-navy-dark { background-color: #041839; } 
.color-white { background-color: #FFFFFF; }
.color-pink, .color-pink-dark { background-color: #E84FA3; }
.color-navy-light, .color-blue-dark { background-color: #31A5D3; } 
.color-navy-dark .icon-placeholder, 
.color-pink-dark .icon-placeholder, 
.color-navy-light .icon-placeholder { color: white; } 
.color-white .icon-placeholder, 
.color-blue-dark .icon-placeholder,
.color-pink .icon-placeholder { color: #041839; } 




        
.abouttrigger {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.abouttrigger__image {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;display: block;width: 100%;height: 100%;background: radial-gradient(#292423 0%, #050505 59%);}
.abouttrigger__wrapper {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.abouttrigger__scale {font-weight: 700; color: #fff; line-height: 1.1; transform: scale(6); white-space: nowrap; opacity: 0.3;}
.abouttrigger__reveal {position: absolute; top: 24vh; left: 0; padding-left: 10vw; padding-right: 10vw; box-sizing:border-box; transform: translateX(70%); width: 100%; opacity: 0;}
.abouttrigger__title { font-size:100px; font-weight: 600; color: #fff; line-height: 1.08;}
.abouttrigger__desc { display: flex; flex-direction:column; margin-top: clamp(40px,4vw,60px); transform: translate(7%, 0px); font-size: clamp(16px , 1vw, 22px); gap: clamp(12px, 2vw, 30px);}
.abouttrigger__hidden {overflow: hidden;}
.abouttrigger__up {display: inline-block; position: relative; transform: translateY(101%);}
.abouttrigger__slogan { line-height:25px; }
.abouttrigger__text {line-height: 1.5em; font-weight: 300; opacity: 0.5;}























/* TEAM */
.team {color: #fff; background: #000; height:100vh; position:relative;}
.team__header{ position:absolute; top:90px; width:60%; margin-left:35%; }
.team__title{ line-height:50px;}
.team__list { display: flex; justify-content: space-between; border-top: 1px solid #eee; padding-top:10px;}
.team__box { position: relative; width:60%; margin-left:35%; top:20vh; height:80%; overflow:hidden; border-top-right-radius: 40px;border-top-left-radius: 40px;  }
.team__image {display: block; position: absolute; text-align:center; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.team__slogan { transform: translateY(0px); opacity: 0; position: absolute; line-height: 1em; font-size:80px; font-weight:bold; transition: opacity 1s ease-out, transform 1s ease-out; left:40px; }
.team__slogan.is-visible { opacity: 1; transform: translateY(50px); }

.flow{ transform:translate(0px, 0px); left:0px; margin:0 auto; background:#000; color:#fff; height:100vh; }
.flow__box{ max-width:61rem; margin:0 auto; padding:100px 0;}
.flow__slogan__title{ font-size:16px; font-weight:700;}
.flow__slogan__flow__desc{ font-size:30px;}
.flow__title{ font-weight:bold; }
.flow__desc{ font-size:22px; padding-top:5px; }
.flow__list{ position: sticky; top: 0; z-index: 10;
    opacity: 0;                     /* 투명도: 0 (숨김) */
    transform: translateY(50px);    /* 초기 위치: 50px 아래로 이동 */
    will-change: opacity, transform; /* 성능 최적화 */
    /* 애니메이션 전환 정의: 0.8초 동안 부드럽게 변화 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.flow__item:nth-child(1) { transition-delay: 0s; }
.flow__item:nth-child(2) { transition-delay: 0.1s; }
.flow__item:nth-child(3) { transition-delay: 0.2s; }

/* JavaScript가 고정 시 추가할 클래스 정의 */
.flow__list.flow__is-fixed {
    opacity: 1;                     /* 투명도: 1 (보임) */
    transform: translateY(0);       /* 원래 위치로 복귀 */
    
    /* 1. 요소를 화면에 고정 */
    position: fixed;
    
    /* 2. 고정 위치를 화면 상단 0으로 설정 */
    top: 200px; 
    
    /* 3. 너비를 부모 요소의 너비와 동일하게 설정 (fixed 시 필수) */
    max-width: 100%; /* 또는 고정된 값 */
    
    z-index: 10;
}

.flow__item{ background:#0f0f0f; border:1px solid #333; border-radius:20px; padding:40px; border-radius:20px; display:flex; align-items:center; column-gap:3rem; row-gap:1.6rem;}
.flow__item:nth-child(1){transform:translateY(0px);}
.flow__item:nth-child(2){transform:translateY(20px);}
.flow__item:nth-child(3){transform:translateY(40px);}
.flow__item .thumbnail{ width:12.55rem; height:12.55rem; overflow:hidden; }
.flow__item .thumbnail img{ width:100% ;}
.flow__text .flow__title{ font-size:22px; }
.flow__text .flow__desc{ font-size:13px; }







/* Value Cards Section - SK Careers 'How we grow up' 스타일 */
#card-stack.stack-zone.value-cards {
  position: relative;
  background: #000;
  color: #fff;
  padding-top: 200px;
  padding-bottom: 200px;
  min-height: 100vh;
  padding-left:20px;
  padding-right:20px;
 
}

.value-cards__header {
  text-align: left;
  padding-bottom: 50px;
  position: relative;
  z-index: 1;
  max-width:1280px;
  margin:0 auto;
}

.value-cards__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

.value-cards__desc {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.6;
  color: #fff;
}

.card {
  position: sticky;
  top: 140px;
  left: 0;
  max-width:1200px;
  margin:0 auto;
  padding: 40px;
  background: #0f0f0f;
  border-radius: 0.6rem;
  border:1px solid #333;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px 0px;
  display: flex;
  align-items:center;
  gap:3rem;
  transition: transform .8s ease-in-out, opacity .8s ease-in-out;
  z-index:1;
  overflow: hidden;

}

.card__image {
  flex: 1;
  overflow: hidden;
  width:12.55rem;
  height:12.55rem;
  flex-shrink: 0;
}

.card__image img {
  height: 100%;
  object-fit: cover;
}

.card__text {
  flex: 1;
  padding: 20px 40px 20px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card__title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.card__desc {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.8;
  color: #ccc;
}

/* 초기 카드 위치 설정 (스크롤 애니메이션 전) */
.card[data-index="0"] {
  transform: translateX(0) translateY(0px);; 
  opacity: 1;
  z-index: 1;
}

.card[data-index="1"] {
  transform: translateX(0) translateY(90px);
  opacity: 1;
  z-index: 2;
}

.card[data-index="2"] {
  transform: translateX(0) translateY(150px);
  opacity: 1;
  z-index: 3;
}

/* 현재 활성화된 카드: 중앙에 표시, 가장 위에 */
.card.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 10;
}

/* 지나간 카드: 뒤에 남아있으며 세로로 겹쳐 보임 */
.card.left {
  opacity: 0.6;
}

.card[data-index="0"].left {
  transform: translateX(0) translateY(90px);
  z-index: 2;
}

/* By the Value는 Of the Value 제목 아래 영역에 고정 (For the Value가 나와도 위치 유지) */
.card[data-index="1"].left {
  transform: translateX(0) translateY(120px);
  z-index: 1;
}

.card[data-index="2"].left {
  transform: translateX(0) translateY(190px);
  z-index: 1;
}

/* 다음 카드: 오른쪽에서 대기 */
.card.right {
  transform: translateX(100%);
  opacity: 0;
  z-index: 1;
}







.section--third {padding: 0 5%;}
.sticky__header {position: sticky; display: flex; font-size: 28px;}
.sticky__item {position: sticky; background: #0f0f0f; z-index: 2; border: 1px solid #333;}











.ourstyle {background: #000; color: #fff; padding:150px 0; }
.ourstyle .inside{ max-width:1280px; margin:0 auto; padding-left:20px; padding-right:20px; }
.ourstyle__title {padding-bottom: 30px; border-bottom: 1px solid #eee; font-size:30px; }
.ourstyle__entry {display: flex; border-bottom: 1px solid #eee;  padding:40px 0; }
.ourstyle__entry:nth-child(1) {border-top: 1px solid #eee;}

.ourstyle__slogan{  width:20%; text-align:center; font-size: 30px; opacity: 0; transform: translateY(30px); will-change: opacity, transform; transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.ourstyle__list { flex-grow: 1; display: grid; grid-template-columns:repeat(3,1fr);  opacity: 0; transform: translateY(30px); will-change: opacity, transform;  transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.ourstyle__is-visible { opacity: 1; transform: translateY(0); }
.ourstyle__list { transition-delay: 0.2s; }



.ourstyle__term{ font-size: 30px; font-weight:bold; padding-bottom:20px; display:inline-block;  }
.ourstyle__desc {color: #999;}
.teamgrid {display: grid; background: #000;}

.m {height: 2000px;}
.wide {
  background: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wide__content {
  position: absolute;
  width: 8000px;
  top: 170px;
  display: flex;
}

.wide__title {
  width: 100vw;
  
}
.wide__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 200px);
  grid-column-gap: 200px;
}

.wide__item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 50px;
}

.wide__item:nth-child(1){}
.wide__item:nth-child(2){}
.wide__item:nth-child(3){}

.wide__desc {margin-top: 50px;}

.wide__line {position: relative; background: red;}
.wide__svg {position: absolute; top: 0; width: 7500px; height: 1080px;}





/* brand */
.main--brand {position: relative;}
.hero--brand {display: flex; justify-content: center; align-items: center; height: 100vh;}
.brand {padding-top: 50px; background: #fff;}
.brand__title {font-weight: 500; font-size: clamp(18px, 3vw, 48px); text-align: center;}
.brand__desc {font-size: clamp(18px, 2.5vw, 40px); font-weight: 300; line-height: 1.5em; text-align: center;}
.brand__icon {display: block; margin-top: clamp(36px, 10vw, 60px); text-align: center;}
.brand__svg {height: clamp(12px, 4vw, 40px);}
.brand__list {display: flex; flex-direction: column; margin-top: clamp(125px, 3.5vw ,250px); gap: clamp(25px, 12vw ,95px);}
.brand__item {position: relative; height: clamp(184px, 20vw ,440px); background-position: center; background-repeat: no-repeat; background-size: cover;}
.brand__opacity:before {content:""; position: absolute; width: 100%; height: 100%; background: #fff; opacity: 0; transition: all .5s ease;}
.brand__item:hover .brand__opacity:before {opacity: .5; transition: all .5s ease;}
.brand__hidden {position: absolute; z-index: 3; top: 0; left: 0; display: flex; opacity: 0; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; gap: 20px;}
.brand__hidden:hover {opacity: 1;}
.brand__logo {font-size: clamp(24px, 5vw ,48px); color: #000;}
.brand__link {display: flex; justify-content: center; align-items: center; width: clamp(100px,15vw,200px); height: clamp(25px,5vw,50px); font-size: clamp(14px,2vw,24px); font-weight: 500; color: #000; border: 1px solid #000; border-radius: 5px;}


/* brand-page */
.page {}
.page__content {display: flex;}
.page__title {font-size: clamp(24px, 5vw ,40px);}
.page__desc {display: flex; flex-direction: column; gap: clamp(20px,4vw,30px);}
.page__slogan {font-size: clamp(16px, 2vw,18px); font-weight: 600;}
.page__text {font-size: clamp(14px, 2vw,18px); font-weight: 200; line-height: 1.5em;}



/* brand page new*/
.brand_main{ width:100%; }
.brand_top{ background:url('../images/brand/hero-brand-pc.jpg'); width:100%; height:380px; background-size:cover;}

.brand_top_visual img{ max-width:100%; height:auto;}


.business-section { padding: 100px 5%;  max-width: 1200px; margin: 0 auto; }
.business-header { margin-bottom: 60px;}
.business-title { font-size: 40px; font-weight: bold; color: #333; display: inline-block; position: relative; }
.business-description {font-size: 16px; color: #666; line-height: 1.6;   margin-top: 20px;}

.business-card__list-wrapper { display: flex; justify-content: space-between; gap: 20px;}

.business-card{ transition: background-color 0.3s ease, color 0.3s ease;}
.business-card:hover {   background-color: white; color: #333;  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.business-card h3, .business-card p { transition: color 0.3s ease; }
.business-card:hover h3, .business-card:hover p { color: #333 !important;  }
.business-card {flex: 1;  background-color: #001f3f;   color: white;padding: 40px 30px;  height: 350px; display: flex; flex-direction: column;justify-content: space-between;}
.card-title { font-size: 24px;font-weight: bold;line-height: 1.3; margin-bottom: 10px;}
.card-text {font-size: 14px;  line-height: 1.7; color: #cccccc; }
.dot-navigation-container{ display:none;}


.brand-section { padding:0 5% 100px; max-width: 1200px; margin: 0 auto; background-color: white; }
.brand-title { font-size: 40px;font-weight: bold; color: #333; display: inline-block; padding: 10px 0; margin-bottom: 50px;}
.brand-card-container { max-width: 100%; }
.brand-card {  max-width: 400px; height: 350px; border: 1px solid #333;position: relative;overflow: hidden; cursor: pointer; transition: background-color 0.3s ease;}

/* ---------------------------------- */
/* 3. 마우스 오버 전 (로고) 스타일 */
/* ---------------------------------- */
.brand-logo { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; transition: opacity 0.3s ease; }
.logo-img {  max-width: 70%; height: auto; }

/* ---------------------------------- */
/* 4. 마우스 오버 후 (텍스트) 스타일 */
/* ---------------------------------- */
.brand-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; flex-direction:column; background-color: #041839; color: white; font-size:16px; font-weight: bold; display: flex; justify-content: center; align-items: center;  opacity: 0;  transition: opacity 0.3s ease; }
.brand-logo-text{ width:100%; margin:0 auto; }
.brand-logo-text img{  margin: 0 auto; display:block;}
.brand-story-button{ width:40%; border:1px solid #fff; border-radius:20px; line-height:30px;color:#fff; text-align:center; margin-top:20px; }
/* ---------------------------------- */
/* 5. 마우스 오버 효과 (Hover Effect) */
/* ---------------------------------- */
.brand-card:hover .brand-logo { opacity: 0; }
.brand-card:hover .brand-info {  opacity: 1; }
.brand-card:hover {  border-color: #041839; }



.call-to-action-section { background:url('../images/brand/banner-brand2-pc.jpg'); min-height: 380px; background-size:cover;  display: flex; justify-content: center;  align-items: center;   padding: 20px; box-sizing: border-box; }
.cta-text {    color: white;  font-size: 46px; font-weight: bold;   white-space: nowrap; }








/* growpie */
.hero--growpie {display: flex; justify-content: center; align-items: center; height: 100vh;}
.page__link {display: flex; justify-content: center; align-items: center; color: #fff; background: #000; gap: 10px;}
.page__link {width: clamp(120px, 10vw, 180px); height: clamp(40px, 3vw ,50px); font-size: clamp(12px, 1.5vw,18px);}
.page__svg {width: clamp(18px, 2vw, 36px);}
.page__list {display: grid;}
.page__item {background-position: center; background-repeat: no-repeat; background-size: cover;} 






/* brand-detail page : growpie-detail */
.brandP-top-visual {
    background:url('../images/brand/growpie/brandP-top-visual.jpg');  background-size: cover;  margin: 0; min-height: 480px;
    display: flex; 
    justify-content: center;
    align-items: center;
}

.top-growpie-logo{
    max-width:20%;
    overflow:hidden;
}
.top-growpie-logo img{ width:100%; }

.section-middle-info {
    background-color: white;
    padding: 80px 5%;
}

.info-content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex; 
    justify-content: space-between; 
    gap: 40px;
}

.info-text-group {
    flex: 1; 
}

.info-detail-group {
    flex: 1; 
}
 
.main-heading {
    color: black;
    font-size: 36px;
    font-weight: bold;
    margin-top: 0;
    line-height: 1.2;
}

.detail-caption {
    color: black;
    font-size: 18px;
    margin-top: 0;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.detail-description {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.visit-site-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 15px;
    border: 2px solid #333;
    border-radius: 20px;
    transition: background-color 0.3s;
}

.visit-site-btn:hover {
    background-color: #333;
    color:#fff;
}

.arrow {
    margin-left: 8px;
    font-size: 18px;
    font-weight: normal;
}

.section-bottom-cards {
    background-color: white;
    padding: 0 5% 80px;
}

.card-container {
    max-width: 1200px;
    overflow:hidden;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap:2px;
}

.cardwrap {
    width:33.333%;
    flex: 1;
    min-height: 300px; /* 카드 높이 지정 */
    border: 1px solid white; /* 흰색 테두리가 보이도록 */
    box-sizing: border-box;
}

.cardwrap img{ width:100%;text-align:cneter; }




/* ---------------------------------- */
/* 4. news page */
/* ---------------------------------- */
.news-hero-section {
    background:url('../images/news/news-top-img.jpg');
    background-size: cover;
    /* 화면 너비를 꽉 채우고, 높이를 적절히 설정 (여기서는 뷰포트 높이의 30%로 예시) */
    width: 100%; 
    height: 45vh; /* 이미지 크기에 따라 조절 가능 */
    
    /* Flexbox 설정: 내부 항목(h1)을 배치하기 위해 사용 */
    display: flex;
    /* 수평 정렬: 시작 지점(왼쪽)으로 정렬 */
    justify-content: flex-start;
    /* 수직 정렬: 끝 지점(아래)으로 정렬 */
    align-items: flex-end; 
    
    /* 텍스트가 컨테이너 가장자리에 붙지 않도록 패딩 추가 */
    padding: 30px; 
    box-sizing: border-box; /* 패딩이 전체 너비/높이에 포함되도록 설정 */
}

.news-title {
    color:#000;
    font-size: 4vw;
    font-weight: bold;
    margin: 0;
}

.news-content-section {
    padding: 80px 5%;
    max-width: 1200px; 
    margin: 0 auto; 
    background-color: white; 
}

.news-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-bottom: 50px;
}

.news-card {
    border: 1px solid #ddd;
    background-color: white;
    transition: box-shadow 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.news-image-placeholder {
    width: 100%;
    /* 이미지 비율 유지를 위해 padding-top 사용 (예: 16:9 비율) */
    padding-top: 75%; /* (height / width) * 100% */
    background-color: #f0f0f0; /* 이미지 없을 때 배경색 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 16px;
    border-bottom: 1px solid #ddd; /* 이미지와 텍스트 구분을 위한 라인 */
}

.more-button-container {
    text-align: center;
}

.more-button {
    display: inline-block;
    text-decoration: none;
    color: black;
    font-size: 16px;
    padding: 10px 30px;
    border: 1px solid black;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.more-button:hover {
    background-color: black;
    color: white;
}


/* ---------------------------------- */
/* 5. career page */
/* ---------------------------------- */

.career-header-section{
   background:url('../images/career/career-header-section.jpg');  background-size: cover;  margin: 0; min-height: 480px;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    padding: 40px;
    color: #fff;
    max-width:100%;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.header-content {
    text-align: right;
}

.header-title {
    font-size: 3.5rem; /* 제목 폰트 크기 */
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    padding-top:150px;
    padding-right:50px;
}

.career-contents-section{
    padding:80px; 5%;
    max-width:1200px; 
    margin:0 auto;
    background:#fff;
}

.process-container {
    max-width: 100%;
    border-bottom:1px solid #ddd;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 50px;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 50px;
}

.step {
    flex-basis: 22%; 
    text-align: center;
    position: relative;
    padding-bottom:30px;
}

.icon-box {
    width: 100px;
    height: 100px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-box img{ width:100%;}

.step-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 5px;
}

.step-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
}

.no-posting-message {
    text-align: center;
    padding: 100px 0;
    position: relative;
}

.no-posting-message p {
    color: #6b6b6b;
    font-size: 1.8rem;
    font-weight: 500;
    display: inline-block;
}





/*comingsoon*/
.hero--comingsoon {display: flex; justify-content: center; align-items: center; height: 100vh;  color: #fff;}


/* 접근성: 키보드 포커스 스타일을 명확히 */
.brandsymbol__item a:focus,
.brandsymbol__item button:focus,
.brandsymbol__item:focus-within{
  outline: 3px solid rgba(49,165,211,0.18);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 이미지가 로딩되지 않을 경우 대비(대체 텍스트 배치 가능) */
.brandsymbol__item img[alt=""]{ filter: grayscale(100%); opacity: .85; }




/* ---------------------------------- */
/* 반응형 페이지 영역 */
/* ---------------------------------- */

@media screen and (min-width: 1441px){
  /*.wall__text {position: absolute; left: 50%; transform: translateX(-50%); font-size: 160px; line-height: 160px; font-weight: 900; color: #fff;white-space: nowrap;}
  .wall__text--top {bottom: -80px;}
  .wall__text--bottom {top: -80px;}*/
  
      
}

@media (min-width: 1280px) and (max-width:1600px){
   
  :root{ --bs-gap: 1.5rem; --bs-padding: 2.5rem; }
  .brandsymbol__grid{ grid-template-columns: repeat(4, 1fr); }
  .brandsymbol__item{ max-width: 220px; }
  .brandsymbol__item img{ max-height: 160px; }
  
  .brandvision__list{ width:60%; margin-left:40%;  }
}

@media (min-width: 1141px) and (max-width:1279px){

  :root{ --bs-gap: 1.5rem; --bs-padding: 2.5rem; }
  .brandsymbol__grid{ grid-template-columns: repeat(4, 1fr); }
  .brandsymbol__item{ max-width: 220px; }
  .brandsymbol__item img{ max-height: 160px; }
  
  .brandvision__list{ width:60%; margin-left:40%;  }
}

@media (min-width: 1071px) and (max-width:1140px){


}

@media (min-width: 961px) and (max-width:1070px){
    .hamburger{ display:block;}
    .nav {top: 0; left: 0; width: 100%; z-index: 9; background: #999; transform: translateY(-450px); transition: transform .5s ease;}
    .nav.on {transform: translateY(84px);}
    .nav__list { width: 100%; height: 400px; flex-direction: column; justify-content: center; gap: 50px; z-index: 2; background: #eee;}
    .nav__list--black {  }
    .nav__list--white { background: #000;}
    
    
    .footer {font-size: 16px;}
    .footer__content {padding: 40px 0; flex-direction: column; gap: 60px;  align-items:flex-start;}
    .footer__main {flex-direction: column; gap: 25px;}
    .footer__list {flex-direction: column; gap: 25px;}
    .footer__sns {gap: 15px;}
    .footer__logo {width: 250px;}
    .footer__image {width: 36px;}
    
  
    .main {}

    .visual__end {justify-content: space-between; width: calc(100% - 130px); padding: 40px 65px;}
    .visual__logo {width: 96px; height:30px; background-image: url(../images/index/unisonocombined-vertical-pc.svg);}
    .visual__text {text-align: right;}
 

    .term { letter-spacing: -0.025em;}
    .index__break {display: block;}

    .ticker {letter-spacing: -0.01em}
    .ticker__title {margin-top: clamp(10px, 2vw,20px); font-size: clamp(9px, 2vw ,24px); font-weight: 400;}
    .ticker__list {padding: 20px 0;}
    .ticker__item {gap: clamp(12px, 2vw, 24px);}
    .ticker__group {gap: clamp(8px, 2vw,20px);}
    .ticker__big {font-size: clamp(48px, 15vw, 160px); font-weight: 700;}
    .ticker__small {font-size: clamp(12px, 5vw ,48px); font-weight: 500;}
    
    :root{ --bs-gap: 1.25rem; --bs-padding: 2rem; }
    .brandsymbol__grid{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .brandsymbol__item{ max-width: 200px; }
    .brandsymbol__item img{ max-height: 130px; }
    
}

@media (min-width: 768px) and (max-width:960px){
    .hamburger{ display:block;}
    .nav {top: 0; left: 0; width: 100%; z-index: 9; background: #999; transform: translateY(-450px); transition: transform .5s ease;}
    .nav.on {transform: translateY(84px);}
    .nav__list { width: 100%; height: 400px; flex-direction: column; justify-content: center; gap: 50px; z-index: 2; background: #eee;}
    .nav__list--black {  }
    .nav__list--white { background: #000;}
    
    .footer {font-size: 16px;}
    .footer__content {padding: 40px 0; flex-direction: column; gap: 60px;  align-items:flex-start;}
    .footer__main {flex-direction: column; gap: 25px;}
    .footer__list {flex-direction: column; gap: 25px;}
    .footer__sns {gap: 15px;}
    .footer__logo { width: 250px;}
    .footer__image {width: 36px;}
    
    .index__break { display: block;}
    
    .color-grid-container--pc{ display:none;}
    .color-grid-container--m{ display:grid; }
    
    /* news page*/
    .news-grid-container{
        grid-template-columns:repeat(2, 1fr);
        
    }
    
    
    /* career page*/
    .career-header-section{ background:url('../images/career/career-header-section-m.jpg'); background-size:cover;
    background-repeat: no-repeat;}
    
    
   
}

@media (min-width: 481px) and (max-width:767px){
    
    .hamburger{ display:block;}
    .nav {top: 0; left: 0; width: 100%; z-index: 9; background: #999; transform: translateY(-450px); transition: transform .5s ease;}
    .nav.on {transform: translateY(84px);}
    .nav__list { width: 100%; height: 400px; flex-direction: column; justify-content: center; gap: 50px; z-index: 2; background: #eee;}
    .nav__list--black { }
    .nav__list--white { background: #000;}


    .footer {font-size: 16px;}
    .footer__content {padding: 40px 0; flex-direction: column; gap: 60px;  align-items:flex-start;}
    .footer__main {flex-direction: column; gap: 25px;}
    .footer__list {flex-direction: column; gap: 25px;}
    .footer__sns {gap: 15px;}
    .footer__logo {width: 250px;}
    .footer__image {width: 36px;}

    .main {}
   
    .visual__end {flex-direction: column; align-items: center; padding-bottom: 25px;}
    .visual__logo {width: 300px; height: 36px; background-image: url(../images/index/unisonocombined-vertical-m.svg);}
    .visual__text {margin-top: 30px; text-align: center;}
    
    .term {height: calc(100vh - var(--root-header-d)); font-size: clamp(30px, 3vw, 48px);}
    .index__break {display: block;}

    .keel {padding: 90px 0}
    .keel__line {left: 5%;}
    .keel__list {gap: 90px;}

    .keel__item {gap: 20px; grid-template-columns: 1fr; padding: 0 5% 0 10%;}
    .keel__dot {top: 15px; left: 5%; width: 6px; height: 6px;  transform: translate(-50%, -50%)}
    .keel__text {gap: 15px;}
    .keel__title {font-size: clamp(28px, 4vw, 40px);font-weight: 500;}
    .keel__desc {font-size: clamp(16px, .5vw, 20px); font-weight: 300;}
    .keel__image {width: 70vw; height: 70vw; border-radius: 15px}
    .keel__image--first {background-image: url(../images/index/banner-keel1-m.jpg);}
    .keel__image--second {background-image: url(../images/index/banner-keel2-m.jpg);}
    .keel__image--third {background-image: url(../images/index/banner-keel3-m.jpg);}
    
    :root{ --bs-gap: 1.25rem; --bs-padding: 2rem; }
    .brandsymbol__grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .brandsymbol__item img{ max-height: 110px; }
    .brandsymbol__title{ font-size:2.5rem; }

  
    .timeline-line{ left:10%;  }
    .content-wrapper{ display:block; width:100%; padding-left:20px; box-sizing:border-box; }
    .text-content{ width:100%; padding:0 0 20px 0; }
    .left-content{ margin:100px 0;}
    .left-content .text-content{ margin-left:0;}
    .image-placeholder{ width:100%;  box-sizing:border-box;   }
    .point{ left:0; top:60%; }

  
    /* about page */
    .pc_text{ display:none;}
    .m_text{ display:block;}
    .brandvision__list{ width:100%; margin-left:0;}
    .color-palette{ height:auto; }
    .color-block.unisono-blue{ width:100%; }
    .color-row-mobile{ width:100%; }
    .color-block{ height:250px!important;}
    .abouttrigger__title{ font-size:60px;}
    .abouttrigger__desc{ transform:translate(0%, 0px);}

    :root{ --bs-gap: 1rem; }
    .brandsymbol__grid{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .brandsymbol__item img{ max-height: 130px; }

    .color-grid-container--pc{ display:none;}
    .color-grid-container--m{ display:grid;}
    



/*
    
    
    .keel {}
  .keel__line {left: 50%;}
  .keel__list {grid-row-gap: 180px;}

  .keel__item {grid-template-columns: 1fr 1fr; align-items: center;}
  .keel__item:nth-child(even) .keel__text {order: 3;}
  .keel__item:nth-child(even) .keel__dot {order: 2;}
  .keel__item:nth-child(even) .keel__image {order: 1;}
  .keel__text {justify-content: center; gap: 35px;}
  .keel__title {font-size: clamp(34px, 3vw ,40px); font-weight: 500; letter-spacing: -0.025em;}
  .keel__desc {font-size: clamp(16px, 2vw ,20px); font-weight: 200; letter-spacing: 0.025em; color: #ccc;}
  .keel__dot {top: 50%; left: 50%;  width: 10px; height: 10px;  transform: translate(-50%, -50%)}
  .keel__image {margin: 0 9vw; width: 32vw; height: 25vw; border-radius: 25px}
  .keel__image--first {background-image: url(../images/index/banner-keel1-pc.jpg);}
  .keel__image--second {background-image: url(../images/index/banner-keel2-pc.jpg);}
  .keel__image--third {background-image: url(../images/index/banner-keel3-pc.jpg);}
  */
  
    /* news page*/
    .news-grid-container{
        grid-template-columns:repeat(2, 1fr);
        
    }
    
     /* career page */
    .career-header-section{ background:url('../images/career/career-header-section-m.jpg'); background-size:cover;  background-position:bottom center;
    background-repeat: no-repeat; }
    .process-steps{
         grid-template-columns:repeat(2, 1fr);
         display:grid;
    }
  
  
}


@media (min-width: 320px) and (max-width:480px){
    .header {height: var(--root-header-m);}
    .header__svg {width: 50px;}
    .hamburger{ display:block;}
    .nav {top: 0; left: 0; width: 100%; z-index: 9; background: #999; transform: translateY(-450px); transition: transform .5s ease;}
    .nav.on {transform: translateY(84px);}
    .nav__list { width: 100%; height: 400px; flex-direction: column; justify-content: center; gap: 50px; z-index: 2; background: #eee; }
    .nav__list--black {  }
    .nav__list--white { background: #000;}


    .footer {font-size: 16px;}
    .footer__content {padding: 40px 0; flex-direction: column; gap: 60px; align-items:flex-start;}
    .footer__main {flex-direction: column; gap: 25px;}
    .footer__list {flex-direction: column; gap: 25px;}
    .footer__sns {gap: 15px;}
    .footer__logo {width: 250px;}
    .footer__image {width: 36px;}



    .stream__list { gap: var(--stream-small-gap);}
    .stream__item { gap: 42px; animation: stream-small 20s linear infinite; }
    .stream__icon { width: 85px;}
    .stream__text { font-size: 68px; font-weight: 700;}
        @keyframes stream-small {
            to {transform: translateX(calc(-100% - var(--stream-small-gap))); }
        }
    .visual__end{ flex-direction:column; }
    .visual__logo{ background-image:url(../images/index/unisonocombined-vertical-m.svg); padding-bottom:20px;}
    .visual__text{ text-align:center; }
    
    .term {height: calc(100vh - var(--root-header-d)); font-size: clamp(30px, 3vw, 48px);}
    .index__break {display: block;}
    
    .ticker__big{ font-size:clamp(80px, 12vw, 200px);}
    .ticker__small{ font-size:clamp(40px, 12vw, 200px);}
  
    .timeline-line{ left:10%; }
    .content-wrapper{ display:block; width:100%; padding-left:20px; box-sizing:border-box; }
    .text-content{ width:100%; padding:0 0 20px 0; }
    .left-content{ margin:100px 0;}
    .left-content .text-content{ margin-left:0;}
    .image-placeholder{ width:100%;  box-sizing:border-box;   }
    .point{ left:0; top:60%; }



   
    /* about page */
    .pc_text{ display:none;}
    .m_text{ display:block;}
    .brandvision__list{ width:100%; margin-left:0;}
    .color-palette{ height:auto; }
    .color-block.unisono-blue{ width:100%; }
    .color-row-mobile{ width:100%; }
    .color-block{ height:250px!important;}
    .abouttrigger__title{ font-size:60px;}
    .abouttrigger__desc{ transform:translate(0%, 0px);}

    .brandvision__list{ width:100%; margin-left:0;}
    

    :root{ --bs-gap: 1rem; }
    .brandsymbol__grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .brandsymbol__item img{ max-height: 110px; }
    .brandsymbol__title{ font-size:2.5rem; }
    
    .color-grid-container--pc{ display:none;}
    .color-grid-container--m{ display:grid;}
    
    
    /* team page */
    #card-stack.stack-zone.value-cards {
        padding-top: 100px;
        padding-bottom: 100px;
      }
      
      .card {
        width: 90%;
        margin-left: 5%;
        flex-direction: column;
        height: auto;
      }
    
      .card__image {
        height: 200px;
        margin-bottom: 20px;
      }
    
      .card__text {
        padding: 0;
      }
  
   .team__header{ width:80%; margin:0 10%; }
   .team__box{ width:80%; margin:0 10%; }
   .team__slogan{ left:60px; font-size:40px; }
   
    /* brand page */
    .brand_top{ background:url('../images/brand/hero-brand-m.jpg'); background-size:contain; }
    .business-card:hover {   background-color: #001f3f; color: #fff;  box-shadow: none; }
    .business-card:hover h3, .business-card:hover p { color: #fff !important;  }
    .business-card__list-wrapper {
        position:relative;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .business-card__list-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .business-cards-container{ position:relative;}
    
    .business-card {
        flex: 0 0 76vw;
        margin-right: 20px;
        height: 350px; 
    }

    .business-card:last-child {
        margin-right: 0;
    }
    .card-text{ padding-bottom: 40px; }

    .dot-navigation-container {
        display:block;
        position:absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        z-index: 10;
    }
    
    .dot-button {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
    }
    
    .dot-button.active {
        background-color: #31a5d3; 
    }
    
    /* news page*/
    .news-grid-container{
        grid-template-columns:repeat(1, 1fr);
        
    }
    
    
    /* career page */
    .career-header-section{ background:url('../images/career/career-header-section-m.jpg'); background-size:cover; background-position: bottom center;
    background-repeat: no-repeat; }
    .process-steps{
         grid-template-columns:repeat(2, 1fr);
         display:grid;
    }
}