@import url(//font.binism.com/ko/pretendard/font.css);
* {margin: 0; padding: 0;}
html {overflow-x: hidden;}
body {font-family: 'Pretendard'; font-size: 16px; color: #111; box-sizing: border-box; background: #000;}
ul {list-style: none;}
a {text-decoration: none; color: #333;}
:root {
  --root-white-color: #ffffff;
  --root-blue-color: #15325f;
  --root-darkblue-color: #0a3361;
  --root-skin-color: #dfceb2;
  --root-black-color: #0f0f0f;
  --ticker-small-gap: 40px;
  --ticker-medium-gap: 65px;
  --ticker-big-gap: 83px;
}



/* common */
.header {position: fixed; left: 0; padding: 0 5%; width: 90%; display: flex; justify-content: space-between; align-items: center; height: 50px; z-index: 5;}
.header--black {background: #000;}
.header--white {background: #fff; color: #333;}
.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: #fff;}
.hamburger__line--white {background: #000;}
.nav__list {display: flex; align-items: center;}
.nav__link--black {color: #fff;}
.nav__link--white {color: #000;}
.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__main {display: flex;}
.footer__list {display: flex;}
.footer__item {line-height: 1.5em;}
.footer__sns {display: flex;}
.hero {background-position: top center; background-repeat: no-repeat; background-size: cover;}




/* index */
.main--index {}
.visual {overflow: hidden; position: relative;width: 100%; height: 100vh; z-index: 1;}
.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;}
.autoticker {position: absolute; top: 50%; transform: translateY(-50%);}
.autoticker__list {overflow: hidden; display: flex; }
.autoticker__item {display: flex;}
.autoticker__icon {}
.autoticker__text {font-size: 120px; font-weight: 700; color: var(--root-darkblue-color); white-space:nowrap}



.black {position: relative; display: flex; flex-direction: column; justify-content: center; height: 100vh; background: #000; color: #fff; text-align: center; z-index: 1;}

.scrollticker {position: relative; overflow: hidden; background: var(--root-darkblue-color);z-index: 1;}
.scrollticker__title {color: #fff; text-align: center;}
.scrollticker__list {}
.scrollticker__item {display: flex; justify-content: center; align-items: center;}
.scrollticker__item:nth-child(1) {transform: translateX(-50px);}
.scrollticker__item:nth-child(2) {transform: translateX(100px);}
.scrollticker__item:nth-child(3) {transform: translateX(-80px);}
.scrollticker__unit {display: flex; justify-content: center; align-items: center;}
.scrollticker__big {color: #fff;}
.scrollticker__small {color: var(--root-skin-color);}


.keel {position: relative; /*background: #B4CFB0;*/ background: #000;}
.keel__line {position: absolute; top: 0; width: 2px; height: 100%;  background: rgba(255, 255, 255, 0.08); transform: translate(-50%, 0); z-index: 0;}
.keel__light {position: fixed; width: 2px; height: 180px; background: linear-gradient(rgba(0, 0, 0, 0) 0px, rgb(0, 87, 255) 100%); border-radius: 40px; z-index: 0; opacity: 0;}
.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;
}


.circle {position: relative; background: #000; overflow: hidden;}
.circle__list {position: relative; left: 50%; width: 1px; height: 1px; transform: translate3d(-50%, 0,0); transform-origin: center;}
.circle__item {position: absolute; text-align: center; top: 50%; left: 50%; width: 1px; height: 1px; transform: translate(-50%, -50%);border-radius: 50%;}
.circle__entity {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 87, 255, 0.3); border-radius: 50%; }
.circle__slogan {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; opacity: 0;}
.circle__image {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.circle__content {display: grid; align-content: center; justify-content: center; color: #fff;}


.expand {position: relative; background: var(--root-darkblue-color);}
.expand__wall {position: absolute; width: 100%; height: 50%; text-align: center; background: #000; overflow: hidden;}
.expand__wall--top {top: 0;}
.expand__wall--bottom {bottom: 0;}

.expand__text {position: absolute; left: 50%; color: #fff; font-weight: 900; line-height: 1; white-space: nowrap;}
.expand__text--top {bottom: 0; /*transform: translate(-50%, 60px);*/}
.expand__text--bottom {top: 0; /*transform: translate(-50%, -60px);*/}

.expand__content {position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); white-space: nowrap;}
.expand__slogan {color: #fff;}



/* about */
.main--about {background: #000; color: #fff;}
.hero--about {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__desc {display: flex; flex-direction: column; margin-top: clamp(23px, 2vw, 40px); font-size: clamp(12px, 1vw ,24px); font-weight: 300; line-height: 1.5em;}
.brandvision {padding-top: clamp(50px, 8vw ,120px);}
.brandvision__list {display: flex; flex-direction: column; margin-top: clamp(55px, 3vw ,95px);align-items: flex-end; gap: clamp(20px, 3vw ,45px);}
.brandvision__item {display: flex; flex-direction: column; justify-content: center;  padding-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__small {font-size: clamp(12px, 2vw ,24px)}
.brandvision__slogan {padding-top: clamp(20px, 1vw ,30px); font-weight: 700; opacity: 0.2;}
.brandidentity__list {display: flex; flex-direction: column; align-items: center; gap: clamp(15px, 3vw ,50px);}
.brandidentity__item {width: 100%;}
.brandidentity__image {width: 100%;}
.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);}
.brandsymbol__item {display: flex; flex-direction: column; align-items: center;}
.brandsymbol__icon {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 {}
.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(4); white-space: nowrap; opacity: 0.3;}
.abouttrigger__reveal {position: absolute; top: 24vh; left: 0; padding-left: 10vw; transform: translateX(70%); width: 100%; opacity: 0;}
.abouttrigger__title {font-weight: 600; color: #fff; letter-spacing: -3px; line-height: 1.08;}
.abouttrigger__desc {display: flex; flex-direction:column; margin-top: clamp(40px,4vw,60px); transform: translate(7%, 0px); font-size: clamp(11px , 1vw, 18px); gap: clamp(12px, 2vw, 30px);}
.abouttrigger__hidden {overflow: hidden;}
.abouttrigger__up {display: inline-block; position: relative; transform: translateY(101%);}
.abouttrigger__slogan {}
.abouttrigger__text {line-height: 1.5em; font-weight: 300; opacity: 0.5;}


/* team */
.team {color: #fff; background: #000;}
.team__list {display: flex; justify-content: space-between; border-top: 1px solid #eee;}
.team__box {position: relative;}
.team__image {display: block; position: absolute; height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover; border-top-left-radius: 40px; border-top-right-radius: 40px;}
.team__slogan {position: absolute; height: 100%; line-height: 1em;}


.flow {position: relative; overflow: hidden;}
.flow__stage {position: relative;}
.flow__svg {position: absolute;}
.flow__svg--third {z-index: 1;}
.flow__path {stroke-opacity: 0.08; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round}
.flow__path--shadow {stroke: white;}
.flow__path--grow {stroke: rgb(0, 87, 255);;stroke-opacity: 0.5;}
.flow__content {position: absolute;}
.flow__list {}
.flow__item {display: flex;}
.flow__image {display: block; background-position: center; background-repeat: no-repeat; background-size: cover;}
.flow__text {display: flex; flex-direction: column; color: #fff;}
.flow__desc {color: #999;}

.flow__circle {position: absolute; stroke: white; stroke-width: 0; width: 10px; height: 10px; fill: var(--root-darkblue-color); z-index: 2;}
.flow__hidden {position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; color: #fff; z-index: 2;}
.flow__icon {display: block; opacity: 0;}
.flow__paragraph {opacity: 0;}

.ourstyle {position: relative; background: #000; color: #fff;}
.ourstyle__title {padding-bottom: 10px; border-bottom: 1px solid #eee;}
.ourstyle__entry {display: flex; border-bottom: 1px solid #eee;}
.ourstyle__entry:nth-child(1) {border-top: 1px solid #eee;}
.ourstyle__list {flex-grow: 1; display: grid;}
.ourstyle__desc {color: #999;}
.teamgrid {display: grid; background: #000;}

.m {height: 2000px;}



/* 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 {background: #fff;}
.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;}


/* 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;} 


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



@media screen and (max-width: 959px){
  .nav {position: fixed; top: 0; left: 0; width: 100%; z-index: 4; 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;}

  .scrollticker {letter-spacing: -0.01em}
  .scrollticker__title {margin-top: clamp(10px, 2vw,20px); font-size: clamp(9px, 2vw ,24px); font-weight: 400;}
  .scrollticker__list {padding: 20px 0;}
  .scrollticker__item {gap: clamp(12px, 2vw, 24px);}
  .scrollticker__group {gap: clamp(8px, 2vw,20px);}
  .scrollticker__big {font-size: clamp(48px, 15vw, 160px); font-weight: 700;}
  .scrollticker__small {font-size: clamp(12px, 5vw ,48px); font-weight: 500;}
  
  .expand {height: calc(100vh - 50px);}
  .expand__content {top: calc(100vh - 50px);}

  
  .about__title {font-weight: 500;}
  .brandvision {padding-left: 5%;}
  .brandvision__slogan {font-size: clamp(24px, 4vw ,48px); letter-spacing: 0.05em; line-height: 1em;}
  .brandidentity {padding: 0 5%;}
  .aboutgrid {grid-template-columns: 60vw 40vw; grid-template-rows: repeat(3, 33vw);}
  .aboutgrid__item:nth-child(1) {grid-area: 1/2/2/2;}
  .aboutgrid__item:nth-child(2) {grid-area: 1/1/4/2;}
  .aboutgrid__item:nth-child(3) {grid-area: 2/2/3/3;}
  .aboutgrid__item:nth-child(4) {grid-area: 3/2/4/3;}
  .aboutgrid__svg {width: 15vw;}
  .brandsymbol {padding: 0 5%;}
  .brandsymbol__list {display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,40vw); grid-gap: 15vw;}
  .brandsymbol__item {}
  .brandsymbol__icon {width: 35vw; height: 35vw;}
  .brandsymbol__text {}
  
  .flow__svg {left: 50%; transform: translateX(-50%);}
  .flow__content {top: 0;}
  .flow__image--first {background-image: url(../images/team/banner-wide1-m.jpg); border-radius: 15px;}
  .flow__image--second {background-image: url(../images/team/banner-wide2-m.jpg); border-radius: 15px;}
  .flow__image--third {background-image: url(../images/team/banner-wide3-m.jpg); border-radius: 15px;}
  .flow__hidden {bottom: 0; height: calc(100vh - 50px); }

  .ourstyle {padding: 60px 5%;}
  .ourstyle__title {padding-bottom: 30px;}
  .ourstyle__entry {padding: 30px 4vw;}
  .ourstyle__slogan {width: 16vw; font-size: clamp(13px,2vw,18px);}
  .ourstyle__list {grid-template-columns: repeat(2, 1fr); grid-row-gap: 30px;}
  .ourstyle__item {line-height: clamp(.8em,3vw,1.5em);}
  .ourstyle__term {font-size: clamp(13px, 2vw,18px);}
  .ourstyle__desc {padding-top: 8px; font-size: clamp(8px, 2.5vw ,18px);}
  

  .hero--brand {background-image: url(../images/brand/hero-brand-m.jpg)}
  .brand__title {margin-top: 40px;}
  .hero--growpie {background-image: url(../images/brand/growpie/hero-growpie-m.jpg);}
  .hero--comingsoon {background-image: url(../images/brand/comingsoon/hero-comingsoon-m.jpg);}
  .page__content {padding: 0 10vw; flex-direction: column; gap: 35px;}
  .page__list {margin-top: 85px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 32vw); grid-gap: 5px;}
  .page__item:nth-child(1) {grid-area: 1/1/3/2; background-image: url(../images/brand/growpie/banner-growpie1-m.jpg);}
  .page__item:nth-child(2) {grid-area: 1/2/2/3; background-image: url(../images/brand/growpie/banner-growpie2-m.jpg);}
  .page__item:nth-child(3) {grid-area: 2/2/3/3; background-image: url(../images/brand/growpie/banner-growpie3-m.jpg);}
}

@media screen and (max-width: 719px){
  .keel {padding: 90px 0;}
  .keel__line {left: 5%;}
  .keel__light {top: calc(50vh + -165px); left: 5%;  transform: translate(-50%, 0);}
  .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(20px, 4vw, 34px);font-weight: 500;}
  .keel__desc {font-size: clamp(12px, .5vw, 16px); font-weight: 300;}
  .keel__image {width: 85vw; height: 85vw; 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);}

  .circle {height: 200vw;}
  .circle__entity {width: 10vw; height: 10vw; }
  .circle__slogan {font-size: clamp(20px, .1vw, 24px);}
  .circle__content {position: relative; margin-top: 50px; gap: 30px;}
  .circle__title {font-size: clamp(24px, 5vw ,36px); font-weight: 700; letter-spacing: 0.025em; line-height: 1.2em; opacity: 1;  text-align: center;}
  .circle__desc {font-size: clamp(12px,3vw,24px); font-weight: 300; color: #ccc; line-height: 1.5em; text-align: center;}

  
}

@media screen and (max-width: 639px){

  .expand__text {font-size: 30px; font-weight: 900; letter-spacing: 0.01em}
  .expand__slogan {font-size: 48px; font-weight: 900; letter-spacing: 0.01em;}
  .expand__video {margin-top: 10px; width: 80%; border-radius: 5px;}

  .hero--about {background-image: url(../images/about/hero-about-m.jpg);}
  .about__title {font-size: clamp(16px, 4vw, 24px);}
  .about__desc {margin-top: 22px; gap: 18px; opacity: 0.5; font-size: clamp(12px, 3vw ,16px); letter-spacing: 0.05em; line-height: 1.5em;}
  .about__break {display: block}
  .brandsymbol {margin-top: 90px;}
  .abouttrigger__reveal {top: 35%;}
  

  .teamgrid {grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 25vw); gap: 1px;}
  .teamgrid__item {background-position: center; background-repeat: no-repeat; background-size: cover;}
  .teamgrid__item:nth-child(1){grid-area: 1/1/3/2; background-image: url(../images/team/banner-grid1-m.jpg);}
  .teamgrid__item:nth-child(2){grid-area: 1/2/2/3; background-image: url(../images/team/banner-grid2-m.jpg);}
  .teamgrid__item:nth-child(3){grid-area: 1/3/2/4; background-image: url(../images/team/banner-grid3-m.jpg);}
  .teamgrid__item:nth-child(4){grid-area: 2/2/3/3; background-image: url(../images/team/banner-grid4-m.jpg);}
  .teamgrid__item:nth-child(5){grid-area: 2/3/4/4; background-image: url(../images/team/banner-grid5-m.jpg);}
  .teamgrid__item:nth-child(6){grid-area: 3/1/4/2; background-image: url(../images/team/banner-grid6-m.jpg);}
  .teamgrid__item:nth-child(7){grid-area: 3/2/4/3; background-image: url(../images/team/banner-grid7-m.jpg);}
  

  .hero--brand {height: 400px;}
  .brand__break--mo {display: block;}
  .brand__item--growpie {background-image: url(../images/brand/banner-brand1-m.jpg);}
  .brand__item--comingsoon {background-image: url(../images/brand/banner-brand2-m.jpg);}
  .page {padding: 90px 0;}
  .page__link {border-radius: 25px;}
}



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

  .autoticker__list {gap: var(--ticker-small-gap);}
  .autoticker__item {gap: 42px; animation: ticker-small 20s linear infinite;}
  .autoticker__icon {width: 85px;}
  .autoticker__text {font-size: 68px; font-weight: 700;}

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

  .expand__wall--top {height: calc(50% + 1px);}

  .black {font-size: 24px; letter-spacing: -0.025em;}
  .index__break {display: block;}


  .brandvision__item {width: 80vw;}
  .brandvision__item:nth-child(1){background-image: url(../images/about/about-brandvision1-m.jpg);}
  .brandvision__item:nth-child(2){background-image: url(../images/about/about-brandvision2-m.jpg);}
  .brandvision__item:nth-child(3){background-image: url(../images/about/about-brandvision3-m.jpg);}
  .brandidentity {margin-top: 85px;}
  .brandidentity__list {margin-top: 18px;}
  .brandsymbol {margin-top: 90px;}
  .brandsymbol__list {padding: 85px 0 70px;}
  .abouttrigger__scale{font-size: 30px; letter-spacing: -0.025em}
  .abouttrigger__title {font-size: 48px;}
  .abouttrigger__desc {transform: translate(0%, 0px);}
  

  .team {padding: 100px 5%;}
  .team__header {margin-left: 20vw;}
  .team__title {font-weight: 300;}
  .team__list { padding: 10px;}
  .team__item {font-size: 8px;}
  .team__box {height: 475px;}
  .team__image {left: 13vw; width: 77vw;background-image: url(../images/team/banner-team-m.jpg);}
  .team__slogan {transform: translateY(47%); font-size: 30px; font-weight: 600; letter-spacing:.075em;}

  .flow__box {position: relative;}
  .flow__stage {padding-top: 180px;}
  
  .flow__content {}
  .flow__ {}
  .flow__slogan {margin-left: 30px; padding-top: 85px; height: 75vh;}
  .flow__list {margin-left: 30px;}
  .flow__item {flex-direction: column; gap: 35px; height: 75vh; padding-top: 85px;}
  .flow__image {width: 65vw; height: 65vw;}
  .flow__text {gap: 15px;}
  .flow__title {font-size: 18px; font-weight: 600; letter-spacing: 0.025em}
  .flow__desc {font-size: 11px; font-weight: 300; letter-spacing: 0.05em; line-height: 1.5em;}
  .flow__hidden {gap: 25px;}
  .flow__icon {width: 72px; height: 72px;}
  .flow__paragraph {font-size: 18px; font-weight: 700; letter-spacing: 0.05em;}

  .hero__svg {width: clamp(155px, 40vw, 200px);}
}



@media screen and (min-width: 480px) and (max-width: 959px){
  .black {font-size: clamp(24px, 3vw ,36px); letter-spacing: -0.025em;}
  .index__break {display: block;}
  .autoticker__list {gap: var(--ticker-medium-gap);}
  .autoticker__item {gap: 60px; animation: ticker-medium 20s linear infinite;}
  .autoticker__icon {width: clamp(85px, 18vw ,164px);}
  .autoticker__text {font-size: clamp(68px, 15vw ,120px); font-weight: 700;}

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


  .brandvision__item {width: 68vw;}
  .brandidentity {margin-top: clamp(85px, 20vw ,200px);}
  .brandidentity__list {margin-top: clamp(18px, 3vw, 60px);}
  .brandsymbol {margin-top: clamp(90px, 20vw ,185px);}
  .brandsymbol__list {padding: 120px 0 130px;}
  .abouttrigger__scale {font-size: clamp(30px, 8vw ,80px);}
  .abouttrigger__title {font-size: clamp(48px, 4vw, 80px);}
  

  .team {padding: 100px 5%;}
  .team__header {margin-left: 25vw;}
  .team__title {font-size: clamp(24px,6vw,60px); font-weight: 400;}
  .team__list {padding: 15px 30px;}
  .team__item {font-size: 15px; font-weight: 200;}
  .team__box {height: clamp(475px, 45vw ,715px);}
  .team__image {left: 20vw; width: 70vw;background-image: url(../images/team/banner-team-pc.jpg);}
  .team__slogan {transform: translate(15%, 40%); font-size: clamp(36px, 6vw ,72px); font-weight: 700; letter-spacing:.025em;}

  .flow__stage {padding-top: 300px;}
  .flow__slogan {margin-left: 10vw; padding-top: 180px; height: 100vh;}
  .flow__list {display: flex; flex-direction: column; margin-left: 10vw; gap: 75vw;}
  .flow__item {flex-direction: column; gap: 50px;}
  .flow__image {width: 320px; height: 320px;}

  .flow__text {gap: 25px;}
  .flow__title {font-size: 24px; font-weight: 600; letter-spacing: 0.05em}
  .flow__desc {line-height: 1.5em;}

  .flow__hidden {gap: 35px;}
  .flow__icon {width: 96px; height: 96px;}
  .flow__paragraph {font-size: 24px; font-weight: 600; letter-spacing: 0.05em;}

  .hero__svg {width: clamp(200px, 35vw, 290px);}


}



@media screen and (min-width: 480px){
  

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



@media screen and (min-width: 640px){
  .expand__text {font-size: 48px; font-weight: 900; letter-spacing: 0.01em}
  .expand__slogan {font-size: 60px; font-weight: 900; letter-spacing: 0.01em;}
  .expand__video {margin-top: 10px; width: 80%; border-radius: 5px;}

  .hero--about {padding-top: 50px; background-image: url(../images/about/hero-about-pc.jpg);}
  .about__title {font-size: clamp(24px, 4vw, 40px);}
  .about__desc {font-size: clamp(16px, 2vw ,24px) ;}
  

  .teamgrid {grid-template-columns: 30.8vw 18.6vw 10.6vw 38.8vw; grid-template-rows: 20vw 7vw 18vw 35vw; grid-gap: .4vw;}
  .teamgrid__item {background-position: center; background-repeat: no-repeat; background-size: cover;}
  .teamgrid__item:nth-child(1) {grid-area: 1/1/2/2; background-image: url(../images/team/banner-grid1-pc.jpg);}
  .teamgrid__item:nth-child(2) {grid-area: 1/2/4/4; background-image: url(../images/team/banner-grid2-pc.jpg);}
  .teamgrid__item:nth-child(3) {grid-area: 1/4/3/5; background-image: url(../images/team/banner-grid3-pc.jpg);}
  .teamgrid__item:nth-child(4) {grid-area: 2/1/4/2; background-image: url(../images/team/banner-grid4-pc.jpg);}
  .teamgrid__item:nth-child(5) {grid-area: 3/4/4/5; background-image: url(../images/team/banner-grid5-pc.jpg);}
  .teamgrid__item:nth-child(6) {grid-area: 4/1/5/3; background-image: url(../images/team/banner-grid6-pc.jpg);}
  .teamgrid__item:nth-child(7) {grid-area: 4/3/5/5; background-image: url(../images/team/banner-grid7-pc.jpg);}
  

  .brand__break--pc {display: block;}
  .brand__item--growpie {background-image: url(../images/brand/banner-brand1-pc.jpg);}
  .brand__item--comingsoon {background-image: url(../images/brand/banner-brand2-pc.jpg);}
  .page {padding: 150px 0;}
  .page__link {border-radius: 10px;}
}

@media screen and (min-width: 720px){
  .keel {padding: 200px 0; }
  .keel__line {left: 50%;}
  .keel__light {top: calc(50vh + -138px); left: 50%;  transform: translate(-50%, 0);}
  /* clac 50vh - 180 + headerHight/2 */
  .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: 720px) and (max-width: 1279px){
  .circle {height: 2000px;}
  .circle__entity {width: 5vw; height: 5vw;}
  .circle__slogan {font-size: clamp(12px, .1vw, 16px);}
  .circle__content {position: relative; padding: 200px 0; gap: 30px;}
  .circle__title {font-size: clamp(36px,2vw ,48px); font-weight: 700; letter-spacing: 0.025em; line-height: 1.2em; opacity: 1; }
  .circle__desc {font-size: clamp(16px,1vw,20px); font-weight: 300; color: #ccc; line-height: 1.5em;}
}


@media screen and (min-width: 960px){
  .header {height: 84px;}
  .header--white {background: #fff;}
  .header__svg {width: 50px;}
  .hamburger {display: none;}
  .hamburger__line--white {background: #000;}
  .nav {position: fixed; right: 5%; height: 84px; z-index: 6;}
  .nav__list {height: 100%; gap: 90px;}
  .nav__link--white {color: #333;}
  .hidden {height: 84px;}
  .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;}
  

  .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;}
  
  .autoticker__list {gap: var(--ticker-big-gap);}
  .autoticker__item {gap: 80px; animation: ticker-big 20s linear infinite;}
  .autoticker__icon {width: 164px;}
  .autoticker__text {font-size: 120px; font-weight: 800;}

  @keyframes ticker-big {
    to {
      transform: translateX(calc(-100% - var(--ticker-big-gap)));
    }
  }
  
  .black {font-size: clamp(36px, 3vw, 48px);}

  .scrollticker {padding: 44px 0;}
  .scrollticker__title {font-size: clamp(24px, 2vw, 36px);}
  .scrollticker__list {padding: 20px 0;}
  .scrollticker__item {gap: 40px;}
  .scrollticker__unit {gap: 20px;}
  .scrollticker__big {font-size: clamp(160px, 12vw, 200px); font-weight: 700; letter-spacing: -0.01em}
  .scrollticker__small {font-size: clamp(48px, 5vw ,60px); font-weight: 300; letter-spacing: -0.05em}

  .expand {height: calc(100vh - 84px);}
  .expand__text {font-size: 90px;}
  .expand__content {top: calc(100vh - 84px); letter-spacing: -0.01em}
  .expand__slogan {font-size: clamp(80px, 10vw ,130px); font-weight: 700; letter-spacing: -0.01em} /*130*/
  .expand__video {width: 40%; border-radius: 10px}

  

  .hero--about {padding-top: 85px;}
  .about__title {font-weight: 700;}
  .brandvision {padding-left: 9%;}
  .brandvision__item {width: 58vw;}
  .brandvision__slogan {font-size: clamp(48px, 5vw, 80px);}
  .brandidentity {padding: 0 9%;}
  .brandidentity {margin-top: 200px;}
  .brandidentity__list {margin-top: 60px;}
  .aboutgrid {grid-template-columns: 22vw 48vw 30vw; grid-template-rows: repeat(2, 20vw);}
  .aboutgrid__item:nth-child(1) {grid-area: 1/1/3/2;}
  .aboutgrid__item:nth-child(2) {grid-area: 1/2/3/3;}
  .aboutgrid__item:nth-child(3) {grid-area: 1/3/2/4;}
  .aboutgrid__item:nth-child(4) {grid-area: 2/3/3/4;}
  .aboutgrid__svg {width: 8vw;}
  .brandsymbol {margin-top: 185px; padding: 0 9%;}
  .brandsymbol__list {display: flex; justify-content: space-between; padding: 150px 0 190px;}
  .brandsymbol__item {gap: clamp(20px, 2.6vw, 50px);}
  .brandsymbol__icon {width: 11vw; height: 11vw;}
  .brandsymbol__text {font-size: clamp(18px,1.8vw,30px); font-weight: 400;}
  .abouttrigger__scale {font-size: clamp(80px, 6vw, 104px);}
  .abouttrigger__title {font-size: clamp(90px, 8vw, 120px);} 
  

  .team {padding: 170px 5%;}
  .team__header {margin-left: 31vw;}
  .team__title {font-size: 60px; font-weight: 500;}
  .team__list { padding: 15px 50px;}
  .team__item {font-size: 18px; font-weight: 200;}
  .team__box {height: clamp(475px, 45vw ,715px);}
  .team__image {left: 29vw; width: 61vw;background-image: url(../images/team/banner-team-pc.jpg);}
  .team__slogan {transform: translate(31%, 33%); font-size: clamp(72px, 6vw ,96px); font-weight: 700; letter-spacing:.025em;}

  .flow {position: relative; overflow: hidden;}
  .flow__box {height: calc(100vh - 84px);}
  .flow__stage {height: 100%;}
  .flow__circle {position: relative; height: 100%; z-index: 1;}
  .flow__svg {top: 50%; transform: translateY(-50%);}
  .flow__svg--third {z-index: 1;}
  .flow__content {top: 10%; height: 80%; display: flex;}
  .flow__slogan {display: flex; align-items: center; padding-left: 8vw; width: 92vw; flex-shrink: 0;}
  .flow__list {display: flex; align-items: center;}
  .flow__item {display: flex; height: 25vw; width: 1905px; gap: 100px; justify-content: center;}
  .flow__image {display: block; width: 25vw; height: 25vw; }
  .flow__image--first {background-image: url(../images/team/banner-wide1-pc.jpg); border-radius: 15px;}
  .flow__image--second {background-image: url(../images/team/banner-wide2-pc.jpg); border-radius: 15px;}
  .flow__image--third {background-image: url(../images/team/banner-wide3-pc.jpg); border-radius: 15px;}
  .flow__text {grid-row-gap: 35px;}
  .flow__title {font-size: 40px; font-weight: 700;}
  .flow__desc {font-size: 18px; font-weight: 300; letter-spacing: 0.1em; line-height: 1.5em;}
  .flow__desc--slogan {font-size: 24px; font-weight: 500; letter-spacing: 0.075em;}
  .flow__text {grid-row-gap: 35px}
  .flow__text--ov {align-self: flex-start;}
  .flow__text--bv {align-self: center;}
  .flow__text--fv {align-self: flex-end;}
  .flow__hidden {top: 0; height: calc(100vh - 84px); gap: 30px;  }
  .flow__icon {width: 150px; height: 150px;}
  .flow__paragraph {font-size: 60px; font-weight: 600;}

  .ourvalue {overflow: hidden;}
  .ourstyle {padding: 170px 9%;}
  .ourstyle__title {padding-bottom: 50px; font-size: clamp(40px,3vw,48px); font-weight: 600;} 
  .ourstyle__entry {padding: 50px 1vw;}
  .ourstyle__slogan {width: 7vw; font-size: clamp(18px, 2vw, 30px);}
  .ourstyle__list {grid-template-columns: repeat(4, 1fr)}
  .ourstyle__item {font-weight: 500; line-height: 1.5em;}
  .ourstyle__term {font-size: clamp(15px, 1.5vw,24px);}
  .ourstyle__desc {padding-top: 10px; font-size: clamp(14px,1vw,18px);}
  

  .hero--brand {background-image: url(../images/brand/hero-brand-pc.jpg)}
  .brand__title {margin-top: 50px;}
  .hero--growpie {background-image: url(../images/brand/growpie/hero-growpie-pc.jpg);}
  .hero--comingsoon {background-image: url(../images/brand/comingsoon/hero-comingsoon-pc.jpg);}
  .hero__svg {width: 290px; height: 290px;}
  .hero__title {font-size: 40px;}
  .page__content {justify-content: center; gap: 250px;}
  .page__list {margin-top: 160px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 35vw); grid-gap: 14px; /*14px */}
  .page__item:nth-child(1) {background-image: url(../images/brand/growpie/banner-growpie1-pc.jpg);} 
  .page__item:nth-child(2) {background-image: url(../images/brand/growpie/banner-growpie2-pc.jpg);} 
  .page__item:nth-child(3) {background-image: url(../images/brand/growpie/banner-growpie3-pc.jpg);} 
}



@media screen and (min-width: 1280px){

  .circle {height: calc(100vh - 84px);}
  .circle__entity {width: 1vw; height: 1vw;}
  .circle__slogan {font-size: clamp(12px, .1vw, 16px);}
  .circle__content {position: absolute; top: 0; right: 0; width: 50%; height: 100%; gap: 30px;}
  .circle__title {font-size: clamp(36px,2vw ,48px); font-weight: 700; letter-spacing: 0.025em; line-height: 1.2em; opacity: 1; }
  .circle__desc {font-size: clamp(16px,1vw,20px); font-weight: 300; color: #ccc; line-height: 1.5em;}

  .expand__text {font-size: 120px;}

  .brandidentity__list {margin-top: 80px;} 
}



@media screen and (min-width: 1440px){
  .footer {font-size: 16px;}
  .footer__logo {width: 245px;}
  .footer__main {gap: 85px;}
  .footer__list {gap: 90px;}
  .footer__sns {gap: 12px;}
  .footer__icon {width: 48px; height: 48px;}
  .footer__image {width: 48px;}

  .expand__text {font-size: 160px;}

  .brandidentity__list {margin-top: 100px;}
}