/* 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;}
ul {list-style: none;}
a {text-decoration: none; color: #333;}


/* COMMON */
:root {
  --root-header-m: 50px;
  --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-m); 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;}
.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;}
.nav__list {display: flex; align-items: center;}
.nav__item {}
.nav__link {}
.nav__link--black {color: #000;}
.nav__link--white {color: #fff;}

.footer {position: relative; padding: 60px 5%;}
.footer--blue {background: var(--root-darkblue-color); color: #fff;}
.footer--black {background: #000; color: #fff;}
.footer--white {background: #fff; color: #000;}
.footer__content {display: flex; border-top: 1px solid #505a6a;}
.footer__logo {}
.footer__main {display: flex;}
.footer__list {display: flex;}
.footer__item {line-height: 1.5em;}
.footer__sns {display: flex;}
.footer__icon {}
.footer__link {}
.footer__image {}

.main {position: relative;}


/* INDEX */
.visual {overflow: hidden; position: relative; width: 100%; height: 100vh;}
.visual__video {position: absolute; width: 100%; height: 100%; object-fit: cover;}
.visual__end {position: absolute;bottom: 0; display: flex; align-items: center; width: 100%;}
.visual__logo {background-position: center; background-repeat: no-repeat;}
.visual__text {color: var(--root-darkblue-color); overflow: hidden;}

.stream {position: absolute; top: 50%; transform: translateY(-50%);}
.stream__list {overflow: hidden; display: flex; }
.stream__item {display: flex;}
.stream__text {font-size: 120px; font-weight: 700; color: var(--root-darkblue-color); white-space:nowrap}

.term {display: flex; flex-direction: column; justify-content: center; height: calc(100vh - var(--root-header-m)); background: #000; color: #fff; text-align: center;}

.ticker {position: relative; overflow: hidden; background: var(--root-darkblue-color);}
.ticker__title {color: #fff; text-align: center;}
.ticker__list {}
.ticker__item {display: flex; justify-content: center; align-items: center;}
.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__unit {display: flex; justify-content: center; align-items: center;}
.ticker__big {color: #fff;}
.ticker__small {color: var(--root-skin-color);}

.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;
}





/* ABOUT */


/* TEAM */

/* BRAND */



@media screen and (max-width: 959px){
  .nav {top: 0; left: 0; width: 100%; z-index: 9; background: #999; transform: translateY(-250px); transition: transform .5s ease;}
  .nav.on {transform: translateY(50px);}
  .nav__list {width: 100%; height: 200px; flex-direction: column; justify-content: center; gap: 50px; z-index: 2; background: #eee;}
  .nav__list--black {background: #000;}
  .nav__list--white {background: #fff;}

  .footer {font-size: 16px;}
  .footer__content {padding: 40px 0; flex-direction: column; gap: 60px;}
  .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;}

  .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 {font-size: 24px; 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;}

  
  



}


@media screen and (min-width: 480px) and (max-width: 959px){
  .stream__list {gap: var(--stream-medium-gap);}
  .stream__item {gap: 60px; animation: stream-medium 20s linear infinite;}
  .stream__icon {width: clamp(85px, 18vw ,164px);}
  .stream__text {font-size: clamp(68px, 15vw ,120px); font-weight: 700;}

  @keyframes stream-medium {
    to {transform: translateX(calc(-100% - var(--stream-medium-gap)));}
  }

}

@media screen and (max-width: 719px){
  .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);}
  
}

@media screen and (max-width: 479px){
  .footer {transform: translateY(-1px); font-size: 14px;}
  .footer__logo {width: 200px;}
  .footer__sns {gap: 7px;}
  .footer__image {width: 24px;}

  .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)));}
  }
}


@media screen and (min-width: 720px){
  .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);}
  
}


@media screen and (min-width: 960px){
  .header {height: var(--root-header-d);}
  .header__svg {width: 50px;}

  .hamburger {display: none;}

  .nav {right: 5%; height: var(--root-header-d);}
  .nav__list {height: 100%; gap: 90px;}

  .footer {font-size: 14px;}
  .footer__content {justify-content: space-between; align-items: center;}
  .footer__content {padding: 50px 0;}
  .footer__main {align-items: center; gap: 15px;}
  .footer__logo {width: 200px;}
  .footer__list {justify-content: space-between; gap: 4vw;}
  .footer__sns {align-items: center; gap: 7px; }
  .footer__icon {width: 24px; height: 24px;}
  .footer__image {width: 24px;}

  .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;}

  .stream__list {gap: var(--stream-big-gap);}
  .stream__item {gap: 80px; animation: stream-big 20s linear infinite;}
  .stream__icon {width: 164px;}
  .stream__text {font-size: 120px; font-weight: 800;}

  @keyframes stream-big {
    to {transform: translateX(calc(-100% - var(--stream-big-gap)));}
  }

  .term {height: calc(100vh - var(--root-header-d)); font-size: clamp(36px, 3vw, 48px);}

  .ticker {padding: 44px 0;}
  .ticker__title {font-size: clamp(24px, 2vw, 36px);}
  .ticker__list {padding: 20px 0;}
  .ticker__item {gap: 40px;}
  .ticker__unit {gap: 20px;}
  .ticker__big {font-size: clamp(160px, 12vw, 200px); font-weight: 700; letter-spacing: -0.01em}
  .ticker__small {font-size: clamp(48px, 5vw ,60px); font-weight: 300; letter-spacing: -0.05em}


  .circle {height: 2000px;}











  /*.open {position: relative; height: calc(100vh - var(--root-header-d)); background: var(--root-darkblue-color);}
  .wall {position: absolute; width: 100%; height: 50%; overflow: hidden; background: #000;}
  .wall--top {top: 0;}
  .wall--bottom {bottom: 0;}
  .wall__text {position: absolute; left: 50%; transform: translateX(-50%); font-size: 64px; line-height: 1; font-weight: 900; color: #fff; }
  .wall__text--top {bottom: -32px;}
  .wall__text--bottom {top: -32px;}
  .rising {position: relative; padding: 100px 0; margin: -5px 0; height: 1000px; background: var(--root-darkblue-color);}*/
} 

@media screen and (min-width: 1440px){
  /*.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;}*/
}







