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

* {margin: 0; padding: 0;}
html {height: 100%; scroll-behavior: smooth;}
body {height: 100%; font-family: 'Pretendard', 'SCDream', sans-serif; font-size: 16px; line-height: 160%; box-sizing: border-box; background: #000; color: #fff;}
ul {list-style: none;}
a {text-decoration: none;}
:root {
  --brand-color: #ff591c;
}
.test {width: 200px; height: 200px;}

.brand__text {color: var(--brand-color);}
.glink {display: inline-flex; height: 30px; justify-content: center; align-items: center; color: var(--brand-color); border: 2px solid var(--brand-color); border-radius: 25px;}

.follow {display: none; position: fixed; bottom: 30px; right: 30px; width: 36px; height: 36px; z-index: 3;}
.follow.on {display: block;}


.header__link:hover {background: var(--brand-color); color: #fff; transition: all .3s}

.header {position: fixed; display: flex; padding: 0 5%; width: 90%; justify-content: space-between; align-items: center; z-index: 3; transition: background .3s ease;}
.header.on {background: #111;}
.hamburger {position: relative; margin-left: 20px; width: 24px; height: 18px; border: none; background: none;}
.hamburger__line {position: absolute; display: block; left: 0; width: 100%; height: 2px; background: #fff; transition: all .7s ease;}
.hamburger__line:nth-child(1) {top: 0;}
.hamburger__line:nth-child(2) {top: 8px;}
.hamburger__line:nth-child(3) {top: 16px;}
.nav {position: fixed; z-index: 4;}
.nav__list {display: flex; align-items: center;}
.nav__link {color: #fff;}
.nav__link--program {position: relative;}
.nav__icon {position: absolute; right: -10px; padding-left: 30px; width: 6px; height: 4px;}
.nav__position {display: flex; max-height: 0; overflow: hidden; transition: all .5s ease}
.nav__position.on {max-height: 100px;}

.visual {position: relative; width: 100%; height: 100%;}
.visual__video {width: 100%; height: 100%; object-fit: cover;}
.visual__title {position: absolute; top: 50%; left: 10%; transform: translate(0, -50%); font-size: 27px; font-weight: 650; color: #fff; line-height: 1.2em;}

.footer {padding: 0 5% 80px; color: #fff; background: #000;}
.symbol {margin-top: 5px; width: 36px; height: 36px;}
.footer__content {display: flex;}
.metadata {display: flex; font-size: 12px;}
.footer__ui {display: flex;}
.sns {display: flex; gap: 20px;}

.sns__icon {display: block; width: 24px; height: 24px;}

.section--first {display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; background: #000;}
.hlt {position: relative; width: 100%; display: flex; flex-direction: column;}
.hlt__header {position: relative; width: 100%; top: 100px; opacity: 0; text-align: center; font-weight: 900; line-height: 1.4em; transition: all 1s ease}
.hlt__header.on {top: 0; opacity: 1;}
.hlt__text {text-align: center; line-height: 1.5em;}
.hlt__marker {position: relative;}
.hlt__color {position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--brand-color); z-index: -1;}


.section--second {overflow: hidden; background: #000; color: #fff;}
.hrzt {display: flex;}
.hrzt__header {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.hrzt__title {line-height: 1.1em; font-weight: 900;}
.roll {display: flex; align-items: center; gap: 10px;}
.roll__list {overflow: hidden; min-height: 40px; max-height: 65px; line-height: 65px;}
.hrzt__desc {line-height: 1.7em;}
.hrzt__break {display: block;}
.hrzt__main {}
.hrzt__list {display: flex;}
.hrzt__item {position: relative;}
.hrzt__image {display: block;}
.hrzt__content {position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 90%; height: 100%; top: 0; left: 5%; right: 5%;}
.hrzt__link {color: #fff; border: 1px solid #fff;}
.hrzt__svg {height: 10px;}
.hrzt__slogan {padding-top: 50px; font-weight: 600; line-height: 1.3em;}
.hrzt__grid {display: grid; grid-template-columns: auto auto;}


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




.section--fourth {position: relative; margin-top: -200px; z-index: 1; /*border-top: 1px solid #eee;*/}


.physics {position: relative; width: 100%; height: 400px;}
.physics__list {display: none;}

.section--fifth {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 70px; padding-bottom: 90px;}
.roadmap {display: flex; flex-direction: column; padding: 0 5%; background: #000;}
.roadmap__group {display: flex;}
.roadmap__list {display: flex; align-items: center;}
.roadmap__item {position: relative; overflow: hidden;}
.roadmap__text {font-weight: 900; color: #fff; line-height: 1.3em;}
.roadmap__video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.ticker {overflow: hidden; user-select: none; }
.ticker__group {display: flex; justify-content: space-between; align-items: center; font-size: 24px;}
.ticker__list {display: flex; min-width: 100%; flex-shrink: 0;}
.ticker__image {display: block; filter: brightness(50%);}
.ticker__list--image {align-items: center;}
.about {position: relative; background: #000; color: #fff;}
.about__section {}

.about__section--first {display: flex; flex-direction: column; gap: 50px; padding: 100px 5%; background: #000}
.about__header {display: flex; flex-direction: column;}
.about__title {font-size: 28px; font-weight: 650;}
.about__point {color: #ff591c;}
.about__video {position: absolute; width: 100%; left: 50%; transform: translateX(-50%); width: 100%;}

.about__section--second {padding: 100px 0 300px;}
.about__title--focus {padding: 0 5% 50px;}
.accordion {}
.accordion__list {}
.accordion__item {padding: 30px 0; border-top: 1px solid #fff;}
.accordion__item:last-child {border-bottom: 1px solid #fff;}
.accordion__header {display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.accordion__title {font-size: 28px; font-weight: 650;}
.accordion__icon {margin-top: 9px; width: 12px; color: #ff591c; transform: rotateX(0deg); transition: all .5s ease;}
.accordion__icon.on {transform: rotateX(180deg);}
.accordion__content {max-height: 0; overflow: hidden; transition: all .8s ease;}
.accordion__content.on {max-height: 150px; }

.accordion__strong {margin-top: 30px; font-weight: 700;}
.accordion__desc {color: #999; font-size: 14px;}
.about__content {position: relative; width: 100%;/* background: url(/images/about/brandneeds.gif) center no-repeat; background-size: 150%;*/}


.about__section--third {display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden;}
.scale {display: flex; justify-content: center;}
.scale__content {font-size: 10vw; white-space: nowrap; text-align: center; font-weight: 750; line-height: 1.1em;}
 
.hero {padding: 0 5%; color: #fff; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hero--program {display: flex; gap: 15px; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-size: cover;}
.hero--branding {background-image: url(../images/program/branding/hero-branding.jpg);}
.hero--marketing {background-image: url(../images/program/marketing/hero-marketing.jpg);}
.hero--consulting {background-image: url(../images/program/consulting/hero-consulting.jpg);}
.hero__title--program {font-size: 40px; font-weight: 750;}

.program {position: relative; padding: 0 5% 150px; justify-content: center; background: #000;}
.program__layer--line {display: none;}
.program__layer--content {display: flex; flex-direction: column;}
.program__title {font-size: 35px; font-weight: 700; line-height: 1.3em;}
.program__list {display: flex; gap: 10px; padding: 20px 0;}
.program__item {display: flex; padding: 0 10px; height: 30px; align-items: center; border: 1px solid #eee; border-radius: 25px; font-size: 12px;}

.slick {position: relative;}
.slick__item {position: relative; border: 1px solid #444; border-radius: 10px; overflow: hidden;}
.slick__image {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; object-fit: cover;}
.slick__video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block; object-fit: cover;}

.hero--contact {background-image: url(../images/contact/hero-contact-mo.jpg);}
.hero__title--contact {line-height: 1.1em;}
.hero__desc--contact {display: flex; flex-direction: column; padding: 5px 0 10px 0; font-size: 14px;}


@media screen and (max-width: 1119px;){
  .about {padding: 100px 0;}
  .about__section--first {padding: 0 5%;}
  .about__section--second {padding: 150px 5%;}
  .about__title {font-size: 48px; line-height: 1.3em;}
  .accordion {padding: 7vw 0;}
  .accordion__header {padding: 20px 0;}
  .accordion__title {font-size: 30px;}
  .about__content {padding: 50px 0;}

  .program__layer--line {display: none;}
}


@media screen and (max-width: 959px){
  .git {width: 110px;}
  .git__text {font-size: 13px; font-weight: 900;}
  .download {padding: 0 20px; gap: 3px;}
  .download__text {font-size: 13px; font-weight: 900}
  .download__icon {width: 14px; margin: -2px 0 0 0px;}
  
  .header {position: fixed; height: 75px; z-index: 5;}
  .header__ui {display: flex; align-items: center}

  .hamburger__line:nth-child(1).on {top: 8px; transform: rotate(45deg);}
  .hamburger__line:nth-child(2).on {opacity: 0;}
  .hamburger__line:nth-child(3).on {top: 8px; transform: rotate(-45deg);}

  .nav {width: 100%; /*top: -200px;*/ top: -250px; left: 0; padding: 30px 0; background: #111; transition: all 1s ease; z-index: 4;}
  .nav.on {top: 74px;}
  .nav__list {flex-direction: column; gap: 30px;}
  .nav__list--program {text-align: center;}
  .nav__item {font-size: 22px; font-weight: 650;}
  .nav__item--sub {font-size: 16px;}
  .nav__position {flex-direction: column; gap: 15px;}
  .nav__position.on {padding: 20px 0;}
  .nav__icon {top: 13px;}



  .ticker__group {gap: 60px; padding-bottom: 70px;}
  .ticker__group--reverse {padding-bottom: 40px;}
  .ticker__list--text {--ticker-text-gap: 60px; gap: var(--ticker-text-gap);}
  .ticker__list--image {--ticker-image-gap: 60px; gap: var(--ticker-image-gap);}
  .ticker__list--reverse {--ticker-image2-gap: 60px; gap: var(--ticker-image2-gap);}
  .ticker__list--text {animation: ticker-text 20s linear infinite}
  .ticker__list--image {animation: ticker-image 80s linear infinite}
  .ticker__list--reverse {animation: ticker-image-re 80s linear infinite; animation-direction: reverse}

  .program__layer--line {display: none;}
}

@media screen and (max-width: 719px){
  .hrzt {flex-direction: column; gap: 100px;}
  .hrzt__header {margin-top: 15vh; padding-bottom: 40lvh;}
  .hrzt__list { flex-direction: column; gap: 30px;}
  .hrzt__image {width: 100%;}
  .hrzt__slogan {font-size: 33px;}
  .hrzt__link {display: inline-block; margin-top: 10px; padding: 3px 5px; font-size: 11px; line-height: 1; border-radius: 30px;}
}



@media screen and (max-width: 639px){
  .visual__title {line-height: 1.6em;}
  .footer__content {gap: 30px;}
  .metadata {flex-direction: column; line-height: 1.3em; gap: 20px;}
  .metadata__text--point {font-size: 15px;}
  .footer__ui {flex-direction: column-reverse; gap: 10px;}

  .hlt {gap: 50px;}
  .hlt__header {font-size: 29px;}
  .hlt__text {display: flex; flex-direction: column; gap: 10px; font-size: 16px;}
  .hlt__break {display: flex; flex-direction: column; gap: 10px;}

  .hrzt__grid {padding-bottom: 30px; grid-row-gap: 10px;}




  .section--third {margin-top: 200px;}
  .sticky__header {top: 125px; flex-direction: column;  padding-bottom: 50px; line-height: 1.3em;}
  .sticky__item {top: 235px; padding: 60px 20px; border-radius: 20px;}
  .sticky__item:nth-child(1){transform: translateY(0px);}
  .sticky__item:nth-child(2){transform: translateY(10px);}
  .sticky__item:nth-child(3){transform: translateY(20px);}
  .sticky__title {font-size: 28px; font-weight: 650; line-height: 1.3em;}

  .section--fourth {border: none;}
  .physics {height: 600px;}

  .section--fifth {position: relative; z-index: -1; }
  .roadmap {gap: 40px;}
  .roadmap__text {font-size: 12vw;}
  .roadmap__group {flex-direction: column; gap: 40px;}
  .roadmap__group:first-child {gap: 20px;}
  .roadmap__list {gap: 2.5vw;}
  .roadmap__item--video {border-radius: 10px;}
  .roadmap__item--video1 {width: 60vw; height: 20vw;}
  .roadmap__item--video2 {width: 52vw; height: 20vw;}
  .roadmap__item--video3 {width: 52vw; height: 20vw;}
  .roadmap__svg {width: 15vw;}
  .roadmap__symbol {width: 15vw}

  .hero__desc--program {font-weight: 750;}
  .program {padding: 0 5% 150px;}
  .program__section {padding-top: 100px;}
  .program__desc {padding: 10px 0;}
  .program__list {padding: 5px 0 15px;}

  .slick {position: relative;}
  .slick__item { width: 90vw; height: 90vw;}
  .slick__image {height: 90vw; }
  .slick__video {width: 90vw; height: 90vw; }
  /*.slick__item {position: relative; width: 90vw; height: 90vw; overflow: hidden;}
  .slick__video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; height: 90vw; object-fit: cover;}
  .slick__image {height: 90vw; object-fit: cover;}*/
  .slick-arrow {position: absolute; z-index: 1; top: 50%; width: 24px; height: 24px; background: none; border: none; transform: translateY(-50%); font-size: 0; color: transparent;}
  .slick-prev {left: 5px;background: url(/images/program/arrow-left.png); background-size: cover;}
  .slick-next {right: 5px;background: url(/images/program/arrow-right.png); background-size: cover;}

  .hero--contact {padding: 100px 5%; background-image: url(../images/contact/hero-contact-mo.jpg);}
  .hero__title--contact {font-size: 30px; font-weight: 650; line-height: 1.1em;}
  .hero__desc--contact {flex-direction: column; font-size: 14px;}
  .contact__add {font-size: 12px;}
}
/* get in touch mobile width :120 */

@media screen and (max-width: 479px){
  .hrzt__title {width: 280px; font-size: 33px;}
  .hrzt__desc {width: 280px; font-size: 13px;}
  .hrzt__grid {font-size: 12px; padding-bottom: 30px;}
  .about__title {font-size: 28px; line-height: 1.2em;}
  .about__video {width: 100%;}
}
@media screen and (min-width: 361px) and (max-width: 479px){
  .hrzt__grid--branding{grid-column-gap: calc(100vw - 365px);}
  .hrzt__grid--marketing {grid-column-gap: calc(100vw - 350px);}
  .hrzt__grid--consulting {grid-column-gap: calc(100vw - 330px);}
}

@media screen and (max-width: 360px){
  .hrzt__grid {font-size: 11px;}
  .hrzt__grid--branding {grid-column-gap: calc(100vw - 335px);}
  .hrzt__grid--marketing {grid-column-gap: calc(100vw - 325px);}
  .hrzt__grid--consulting {grid-column-gap: calc(100vw - 295px)}
}

@media screen and (min-width: 480px) and (max-width: 959px){
  .hlt {gap: 75px;}
  .hlt__header {font-size: 40px;}
  .hlt__text {font-size: 20px;}

  .hrzt__title {width: 340px; font-size: 40px;}
  .hrzt__desc {width: 340px; font-size: 18px;}

}

@media screen and (min-width: 640px){
  .footer {display: flex; flex-direction: column;}
  .footer__content {flex-direction: column; gap: 15px;}
  .metadata {align-items: center; gap: 5vw;}
  .footer__ui {align-items: center; gap: 15px;}

  .section--third {margin-top: 300px;}
  .sticky__header {top: 150px; padding-bottom: 80px; justify-content: center; gap: 5px;}
  .sticky__item {display: flex; top: 240px; padding: 60px 20px; justify-content: space-between; align-items: center; border-radius: 20px;}
  .sticky__item:nth-child(1){transform: translateY(0px);}
  .sticky__item:nth-child(2){transform: translateY(20px);}
  .sticky__item:nth-child(3){transform: translateY(40px);}
  .sticky__title {font-weight: 600; font-size: 18px;}
  .sticky__desc {font-weight: 300; font-size: 16px;}


  .section--fourth {}
  .physics {height: 600px;}

  .roadmap {gap: 60px;}
  .roadmap__group {gap: 2.5vw;}
  .roadmap__list {gap: 2.5vw;}
  .roadmap__text {font-size: 6vw;}
  .roadmap__item--video {border-radius: 1vw;}
  .roadmap__item--video1 {width: 31vw; height: 9vw;}
  .roadmap__item--video2 {width: 21vw; height: 9vw;}
  .roadmap__item--video3 {width: 24vw; height: 9vw;}
  .roadmap__svg {width: 9vw;}
  .roadmap__symbol {width: 8vw}

  .visual__title {font-size: 36px;}
  .about {padding: 150px 0 0;}
  .about__title {font-size: 38px; line-height: 1.3em;}
  .scale__content {font-size: 8vw;}

  .program {padding: 100px 10%;}
  .program__item {font-size: 14px;}
  .program__layer--content {gap: 150px;}
  .slick {display: flex; gap: 5vw; }

  .slick__item {width: 40vw; height: 30vw;}
  .slick__image {width: 100%; height: 100%;}
  .slick__video {width: 100%; height: 100%;}

  .hero--contact {padding: 150px 5%; background-image: url(../images/contact/hero-contact-pc.jpg);}
  .hero__title--contact {font-size: 40px;}
  .contact__add {font-size: 13px;}
  
}

@media screen and (min-width: 720px){
  .hrzt__header {flex-shrink: 0;}
  .hrzt__list {gap: 10vw;}
  .hrzt__slogan {font-size: 30px;}
  .hrzt__link {padding: 5px 20px; border-radius: 20px; font-size: 14px;}
  .hrzt__grid--branding {grid-column-gap: 8px;}
  .hrzt__grid--marketing {grid-column-gap: 17px;}
  .hrzt__grid--consulting {grid-column-gap: 45px;}

  
}
@media screen and (min-width: 720px) and (max-width: 959px) and (max-height: 900px){
  .hrzt__image {height: calc(100lvh - 75px)}
  .hrzt__grid {padding-bottom: 30px;}
}

@media screen and (min-width: 720px) and (max-width: 959px) and (min-height: 901px){
  .hrzt {height: calc(100lvh - 75px);}
  .hrzt__image {height: 826px}
  .hrzt__grid {padding-bottom: 30px;}
}


@media screen and (min-width: 960px){
  .glink { padding: 0 20px; }
  .glink__text {font-size: 14px; font-weight: 600;}
  .download {gap: 5px;}
  .download__icon {width: 14px; margin: -4px 0 0 0px;}

  .follow {bottom: 30px; right: 30px; width: 48px; height: 48px;}

  .header {height: 100px;}
  .hamburger {display: none;}

  .nav {top: 7px; right: 5%; margin-right: 150px;}
  .nav__list {justify-content: flex-end; padding-right: 5%; gap: 40px;}
  .nav__list--program {position: fixed; top: 93px; left: 0; width: 90%; padding: 0px 5%; background: #111;}
  .nav__list--program.on {border-top: 1px solid #222;}
  .nav__item {display: flex; height: 90px; align-items: center}
  .nav__item--sub {height: 60px;}
  .nav__item--program:hover .nav__list--sub {display: flex;}
  .nav__link {display: flex; align-items: center; font-size: 15px; cursor: pointer;}
  .nav__link:hover {color: var(--brand-color);}
  .nav__position {padding: 0px 0; margin-right: 150px; gap: 30px;}
  .nav__icon {top: 11px;}

  .footer__content {flex-direction: row; gap:5vw;}
  .metadata {font-size: 14px;}
  .sns {gap: 20px;}
  .sns__icon {display: block; width: 24px; height: 24px;}
  .download__text {font-weight: bold;}

  .hlt {gap: 100px; }
  .hlt__header {font-size: 60px;}
  .hlt__text {display: flex; flex-direction: column; gap: 10px; font-size: 22px;}
  .hlt__break {display: flex; justify-content: center; gap: 7px; font-size: 22px;}

  .roll {font-size: 60px;}
  .hrzt__title {width: 500px; font-size: 40px;}
  .hrzt__desc {width: 500px; font-size: 22px;}
  
  .hrzt__list {gap: 10vw};
  .hrzt__image {height: calc(100lvh - 100px);}
  
  .hrzt__slogan {font-size: 36px;}
  .hrzt__grid {padding-bottom: 30px; grid-row-gap: 10px;}


  .sticky__header {padding-bottom: 130px; top: 200px; font-size: 48px; gap: 10px;}
  .sticky__item {top: 340px; padding: 80px 50px;}
  .sticky__title {font-size: 33px; line-height: 1.3em;}
  .sticky__desc { font-size: 18px;}

  .physics {height: 800px;}


  /*.sticky__item {padding: 130px 100px;}
  .sticky__title {font-size: 36px; font-weight: 600; line-height: 1.3em;}
  .sticky__desc { font-size: 24px; font-weight: 300; }*/

  
.section--fifth {gap: 100px;}

  .ticker {display: flex; flex-direction: column; overflow: hidden; user-select: none; color: #fff; gap: 40px;}
  .ticker {gap: 80px;}
  .ticker__group {gap: 170px;}
  .ticker__group--reverse {gap: 170px;}
  .ticker__list--text {--ticker-text-gap: 170px; gap: var(--ticker-text-gap); animation: ticker-text 40s linear infinite}
  .ticker__list--image {--ticker-image-gap: 170px; gap: var(--ticker-image-gap); animation: ticker-image 80s linear infinite}
  .ticker__list--reverse {--ticker-image2-gap: 170px; gap: var(--ticker-image2-gap); animation: ticker-image-re 80s linear infinite; animation-direction: reverse }
  
  .visual__title {font-size: 48px;}
  /*.about__content {background-size: 100%; height: 400px;}*/
  .scale__content {font-size: 6vw;}

  .hero--contact {padding: 200px 5%;}
  .hero__title--contact {font-size: 50px;}
}


@media screen and (min-width: 960px) and (max-height: 925px){
  .hrzt__grid {font-size: 2.5vh;}
  .hrzt__grid--branding {grid-column-gap: 4vh;}
  .hrzt__grid--marketing {grid-column-gap: 7.5vh;}
  .hrzt__grid--consulting {grid-column-gap: 14vh;}
}


@media screen and (min-width: 960px) and (min-height: 926px){
  .hrzt__grid {font-size: 24px;}
  .hrzt__grid--branding {grid-column-gap: 10%;}
  .hrzt__grid--marketing {grid-column-gap: 13%;}
  .hrzt__grid--consulting {grid-column-gap: 19%;}
}


@media screen and (min-width: 1280px){
  .footer {display: flex; padding: 80px 5%; flex-direction: row; justify-content: space-between;}
  .metadata {font-size: 14px;}

  .hlt__header {font-size: 72px;}
  .hlt__text {font-size: 24px;}
  .hlt__break {font-size: 24px;}

  
  .hrzt__title {width: 600px; font-size: 48px;}
  .hrzt__desc {margin-top: 20px; width: 600px; font-size: 24px;}
  .hrzt__slogan {font-size: 64px;}

  .sticky__item {padding: 120px 100px;}
  .sticky__title {font-size: 36px;}
  .sticky__desc {font-size: 24px;}


  
  .physics {z-index: 1;}
  .physics {position: relative; width: 100%; height: 1000px; background: #000; /*border: 1px solid #fff; border-left: none; border-right: none;*/}
  .physics__list {display: none;}

  .section--fifth {padding-bottom: 180px;}
  .roadmap {display: flex; flex-direction: column; padding: 0 5%; background: #000;}
  .roadmap__group {display: flex;}
  .roadmap__list {display: flex; align-items: center;}
  .roadmap__item {position: relative; overflow: hidden;}
  .roadmap__text {font-weight: 900; color: #fff; line-height: 1.3em;}
  .roadmap__video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  .ticker__text {font-size: 36px; line-height: 1.2em;}
  
  .visual__title {font-size: 58px;}
  .about__section--first {flex-direction: row; padding: 0 10% 200px; justify-content: space-between;}






  .about__section--second {padding: 150px 0 900px;}
  
  .about__title--focus {padding: 0 10% 100px;}
  .about__content {height: 600px;}
  .accordion__item {min-width: 600px;}
  .accordion__title {font-size: 36px;}

  .scale__content {font-size: 5vw;}


  .program {display: flex; padding: 150px 10%; gap: 50px;}
  .program__layer--line {display: block;}
  .decoration__title {padding-top: 10px; font-family: 'SCDream'; font-size: 1.1vw;}
  .decoration__line {display: block; margin-top: 50px; margin-left: 30px; width: 5px; height: 95%; background: #fff;}
  .hero--program {gap: 15px;}
  .hero__title--program {font-size: 44px;} 
  .program__title {font-size: 45px;}
  .slick__item {width: 25vw; height: 25vw; }
  /*.slick__video {height: 30vw;}
  .slick__image {height: 30vw;}*/

  .hero__title--contact {font-size: 63px;}
  .hero__desc--contact {flex-direction: row; font-size: 18px;}

  /*.drop {height: 600px;}*/
}


/* keyframes */


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

@keyframes ticker-image-re {
  to {transform: translateX(calc(-100% - 65px));}
}