@charset "utf-8";

:root {
  --color-white: #fff;
  --color-p30_Primary: #30cacb;
  --color-p40: #07b1b2;
  --color-Point: #6832D4;

  --color-sub: #8896AE;

  --color-gray-g10-bg: #f2f4f6;
  --color-gray-g20: #e7ebf2;
  --color-gray-g30-stroke: #d0d6e1;
  --color-gray-g40-placeholder: #c1c8d3;
  --color-gray-g50: #a4abb6;
  --color-gray-g60: #71767e;
  --color-gray-g70: #4b4b4b;
  --color-gray-g80: #303030;
  --color-gray-g90-darkfont: #1a1a1a;
  --color-gray-g100-darkbg: #11082c;
}

main,
section {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

main {
  align-items: flex-end;
}

section {
  padding: 140px 0;
  align-items: center;
}

#fullHeightBox {
  min-height: 100vh;
}

/* 공통 class */
* {
  line-height: 140%;
}

.inner {
  width: 1200px;
  padding: 0 10px;
}

.head {
  display: flex;
  flex-flow: column;
}

.head>.tit {
  margin-bottom: 20px;
}

.head>.tit>.sub_tit {
  margin-bottom: 6px;
  color: var(--color-p30_Primary);
  font-family: 'Pretendard_B';
  font-size: 24px;
}

.head>.tit>.main_tit {
  color: var(--color-gray-g90-darkfont);
  font-family: 'Pretendard_B';
  font-size: 60px;
  line-height: 120%;
}

.head>.sub {
  color: var(--color-gray-g60);
  font-family: 'Pretendard_L';
  font-size: 24px;
}

/* main */
main {
  /* flex-flow: column; */
  background: url('../img/main_bg_pc.png') 0 0 no-repeat;
  background-size: cover;
  background-position: center;
  padding: 100px 0;
}

main .inner {
  justify-content: space-between;
  display: flex;
  flex-flow: column;
  text-align: center;
}

main .inner .main_wrap {
  width: 100%;
}

main h1 {
  padding-bottom: 40px;
  color: var(--color-white);
  font-size: 38px;
  font-family: 'Pretendard_R';
}

main .main_title>img {
  width: 100%;
  max-width: 1126px;
}

main p {
  font-size: 24px;
  font-family: 'Pretendard_R';
  color: var(--color-sub);
  width: 100%;
  margin-top: 320px;
}

/* section challenge */
section.challenge {
  background-color: #F4F4F4;
  padding-bottom: 0;
}

section.challenge .sub_tit {
  color: var(--color-Point) !important;
}

section.challenge .head {
  text-align: center;
  margin-bottom: 80px;
}

section.challenge .cont {
  display: flex;
  flex-flow: column;
  text-align: center;
}

section.challenge .cont .circle-list {
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border: 1px dashed var(--color-gray-g50);
  border-radius: 200px;
}

section.challenge .cont .circle-list li {
  flex: 1 1 250px;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  /* 정원 유지 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
  box-sizing: border-box;
  width: 30%;
  border: 1px solid var(--color-gray-g50);
  border-radius: 200px;
}

section.challenge .cont .circle-list li h3 {
  font-family: 'Pretendard_B';
  font-size: 36px;
  color: var(--color-Point);
  margin-bottom: 20px;
}

section.challenge .cont .circle-list li P {
  font-family: 'Pretendard_L';
  font-size: 16px;
  color: var(--color-gray-g70);
}

section.challenge .cont .arrow {
  padding: 50px 0;
  max-width: 72px;
  margin: 0 auto;
}

section.challenge .cont .arrow img {
  width: 100%;
}

section.challenge .cont .tab_elaverse ul li {
  margin-bottom: 30px;
  font-size: 20px;
}

section.challenge .cont .tab_elaverse ul li img {
  width: 100%;
  max-width: 425px;
}

section.challenge .cont .tab_elaverse .tablet {
  padding-top: 20px;
}

section.challenge .cont .tab_elaverse .tablet img {
  width: 100%;
  max-width: 860px;
}

/* meet ELEA 01 */
.meet01 {
  background: url(../img/meet1_bg_pc.png) 0 0 no-repeat;
  background-size: 80%;
  background-position: 50% 90%;
  padding-bottom: 0;
  overflow: visible;
}

.meet01 .scrollmagic-pin-spacer {
  position: relative !important;
  clip: auto !important;
}

.meet_wrap {
  width: 100%;
  display: flex;
  flex-flow: row;
  margin-top: 30px;
  justify-content: space-between;
  /* align-items: baseline; */
  min-height: 600px;
  /* 왼쪽 인물/오른쪽 박스 중 작은 쪽이 접히는 것 방지 */
  overflow: visible;
}

.meet_wrap .elea {
  /* width: 40%; */
}

.meet_wrap .elea img {
  width: 100%;
  max-width: 483px;
}

.events-page .scrollmagic-pin-spacer {
  position: absolute !important;
  clip: rect(auto, auto, auto, auto);
}

.meet01 .head {
  text-align: center;
}

.meet01 ul.imgBox {
  width: 100%;
  position: relative;
  margin: 80px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

.meet01 ul.imgBox li {
  max-width: 580px;
  font-size: 20px;
  padding: 40px 30px 70px;
}

.meet01 ul.imgBox li:nth-child(2),
.meet01 ul.imgBox li:nth-child(4) {
  margin-top: 400px;
}

.meet01 ul.imgBox li img {
  width: 100%;
  max-width: 307px;
  margin: 0 auto 90px;

}

.meet01 ul.imgBox li h3 {
  font-size: 48px;
  font-family: 'Pretendard_B';
  background-image: linear-gradient(to right, #D987E8, #7743DF, #7ACFED);
  width: 74%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  line-height: 120%;
}

.meet01 ul.imgBox li p {
  padding-top: 24px;
  font-size: 24px;
}

/* meet ELEA 02 */
.meet02 {
  background-color: #EFF0F4;
  padding: 140px 0 0 !important;
  overflow: hidden;
}

.meet02 .head>.sub {
  font-size: 20px;
}

.meet02 .meet_wrap {
  position: relative;
}

.meet02 .meet_wrap>ul {
  display: none;
}

/* #main_visual {
  position: absolute;
  top: 170px;
  left: 42%;
  width: 100%;
  overflow: hidden;
} */
:root{
  --leftW: clamp(200px, 28vw, 260px);
}
/* .elea1{width: 100%;} */
#slider_elea{display: block; width: 100%;}
#slider_elea .inner{margin: 0px auto;}
.elea1 img{width: 100%;}
#left_side{width: 30%;}
#right_side{width: 70%; overflow: hidden;}
#right_side .visual_slider{display: flex;}

#slide_wrap{min-height: 0; width: calc(100% - 10vw);align-items: center;margin-left: 10vw;gap: 50px;justify-content: flex-start;overflow-x: auto;/* margin: 0px auto; */}
 /* .visual_slider {
  box-sizing: border-box;
} */

.visual_slider .swiper-wrapper {
  display: flex;
  /* gap: 20px; */
  flex-flow: row;
} 
#slider_elea .head{padding-top: 0;}
ul.none{display: none;}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 300px;   /* 최소 크기 제한 */
  width: 100%;
  height: auto;
}




/* 
.swiper {
  width: 100%;
  height: 80%;
  padding-bottom: 30px;
}

.swiper-wrapper {
  transition-timing-function: linear;
  column-gap: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48%;
  transition: transform 0.3s;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide:hover {
  transform: translateY(30px);
}

/* features */
section.features {
  flex-flow: column;
  background-image: linear-gradient(to bottom, #000, #20252C);
}

section.features .event {
  padding: 100px 0;
}

section.features .event:first-child {
  padding-top: 0;
}

section.features .event:last-child {
  padding-bottom: 0;
}

section.features .head .main_tit {
  font-size: 48px !important;
  color: var(--color-white);
}

section.features .head .sub {
  font-size: 24px;
  color: #717D7E;
}

section.features .head {
  width: 44%;
}

section.features ul {
  width: 100%;
}

section.features ul {
  margin-top: 120px;
}

section.features ul li {
  color: var(--color-gray-g50);
  font-size: 18px;
  line-height: 130%;
  padding-left: 16px;
  position: relative;
}

section.features ul li:first-child {
  padding-bottom: 20px;
}

section.features ul li::after {
  content: 'ㆍ';
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-size: 16px;
  border-radius: 10px;
  color: var(--color-gray-g50);
}

section.features .feat_wrapper {
  display: flex;
  flex-direction: row;
  position: relative;
}

section.features .feat_wrapper .image {
  width: 100%;
  max-width: 760px;
  position: absolute;
  top: -10px;
  left: 50%;
}

section.features .feat_wrapper .image img {
  width: 100%;
}


/* technology */
.technology {
  background: url('../img/bg_grey.png') 0 0 no-repeat;
  background-size: cover;
}

.technology .head img {
  width: 80%;
  max-width: 600px;
}

.technology .head>.tit>.main_tit {
  font-size: 38px;
}

.technology .head .sub {
  padding: 50px 0 105px;
  font-size: 20px;
  width: 60%;
}

section.technology .circle-list {
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  width: 100%;
  max-width: 1072px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--color-gray-g60);
  border-radius: 200px;
  flex-flow: row;
  align-items: center;
  gap: 12px;
}

section.technology .circle-list li {
  flex: 1 1 240px;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  width: 20%;
  border: 1px solid var(--color-gray-g60);
  border-radius: 200px;
  position: relative;
  font-size: 18px;
  color: var(--color-gray-g60);
  z-index: 1;
}

section.technology .circle-list li.double_arrow::after {
  content: '';
  width: 40px;
  height: 6px;
  background: url(../img/double_arrow.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateX(-35%);
  display: block;
  z-index: 2;
}

section.technology .circle-list li strong {
  color: var(--color-gray-g90-darkfont);
  font-family: 'Pretendard_SB';
}

/* vision */
section.vision {
  background: url('../img/bg_black.png') 0 0 no-repeat;
  /* background-size: cover; */
  text-align: center;
}

section.vision .main_tit {
  color: var(--color-white) !important;
}

section.vision .sub {
  color: var(--color-gray-g60);
}

.video_elea {
  margin-top: 30px;
  width: 100%;
}

.video_elea video {
  width: 100%;
  max-width: 1024px;
}

/* footer */
footer {
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
}

footer .inner {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  padding: 60px;
}

footer .footer_logo {
  width: 180px;
}

footer .footer_logo img {
  width: 100%;
}

footer .footer_info {}

footer .footer_info .adress {
  font-size: 16px;
  color: var(--color-gray-g40-placeholder);
  padding-bottom: 10px;
}

footer .footer_info .copyright {
  font-size: 13px;
  color: var(--color-gray-g60);
}

/* top */
.go_top {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  /* display: none; */
}

.go_top img {
  width: 100%;
  height: 100%;
}

/* scroll event */
/* btn-motion6 */
.btn-motion6-wrap {
  position: relative;
  height: 80px;
}

.btn-motion6 {
  display: none;
}

.btn-motion6 span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
  animation: btn-motion6 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}

.btn-motion6 span:nth-of-type(1) {
  animation-delay: 0s;
}

.btn-motion6 span:nth-of-type(2) {
  top: 16px;
  animation-delay: .15s;
}

.btn-motion6 span:nth-of-type(3) {
  top: 32px;
  animation-delay: .3s;
}

@keyframes btn-motion6 {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* btn-motion7 */

.btn-motion7-txt {
  margin-top: 50px;
  letter-spacing: 12px;
  text-indent: 12px;
  color: #000;
  animation: colorText 5s ease-out infinite, btn-motion7-txt 5s ease-out infinite;
}

.btn-motion7 {
  display: none;
  position: relative;
  width: 32px;
  height: 60px;
  border-radius: 100px;
  background-size: 100% 200%;
  animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}

.btn-motion7:before,
.btn-motion7:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.btn-motion7:before {
  width: 24px;
  height: 40px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 100px;
}

.btn-motion7:after {
  background-color: #fff;
  width: 3px;
  height: 6px;
  border-radius: 100%;
  animation: trackBallSlide 5s linear infinite;
}


@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }

  6% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  14% {
    opacity: 0;
    transform: scale(0.4) translateY(15px);
  }

  15%,
  19% {
    opacity: 0;
    transform: scale(0.4) translateY(-10px);
  }

  28%,
  29.99% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }

  30% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }

  36% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  44% {
    opacity: 0;
    transform: scale(0.4) translateY(15px);
  }

  45%,
  49% {
    opacity: 0;
    transform: scale(0.4) translateY(-10px);
  }

  58%,
  59.99% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }

  60% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }

  66% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  74% {
    opacity: 0;
  }
}

@media (max-width: 1536px) {
  section.features .feat_wrapper .image {
    width: 60%;
  }
}

@media (max-width: 1366px) {

  main,
  section,
  footer {
    padding: 100px;
  }

  section.meet01 {
    /* padding: 60px 40px 0; */
  }

  /* section.meet02 {
    padding: 80px 60px 0 !important;
  } */
  #slider_elea .head{padding: 80px 60px;}
  #left_side{width: 380px;}
  .inner {
    width: 100%;
  }

  .swiper-slide img {
    max-width: 360px;
  }

  section.features .feat_wrapper .image {
    width: 50%;
  }

}

@media (max-width: 1180px) {
  .head>.tit>.sub_tit {
    font-size: 20px;
  }

  .head>.tit>.main_tit {
    font-size: 48px;
  }

  main {
  align-items: center;
}

  #main_visual {
    top: 10%;
  }

  section.features .head {
    width: 40%;
  }

  section.features .head .main_tit {
    font-size: 36px !important;
    color: var(--color-white);
  }

  section.features ul {
    margin-top: 40px;
  }

  section.features .feat_wrapper .image {
    top: 50%;
    transform: translate(0, -50%);
  }

  #slider_elea .head{padding-top: 0;}

}



@media (max-width: 1024px) {

  main,
  section{
    padding: 80px;
  }

  footer {
    padding: 60px;
  }

  main h1 {
    font-size: 30px;
  }

  main p {
    font-size: 20px;
  }

  .head>.tit>.sub_tit {
    margin-bottom: 2px;
    font-size: 20px;
  }

  .head>.tit>.main_tit {
    font-size: 48px;
  }

  .head>.sub {
    font-size: 18px;
  }

  .meet02 .head>.sub {
    font-size: 16px;
  }

  section.challenge .cont .circle-list li {
    flex: 1 1;
    padding: 20px 30px;
  }

  section.challenge .cont .circle-list li h3 {
    font-size: 26px;
    margin-bottom: 10px;
  }

  section.challenge .cont .circle-list li P {
    font-size: 13px;
  }

  .tab_elaverse {
    width: 90%;
    margin: 0 auto;
  }

  .meet01 ul.imgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 520px; */
  }

  .meet01 ul.imgBox li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .meet01 ul.imgBox li:nth-child(2),
  .meet01 ul.imgBox li:nth-child(4) {
    margin-top: 0px;
  }

  .meet01 ul.imgBox li h3 {
    /* font-size: 28px; */
    width: 100%;
  }

  .meet01 ul.imgBox li p {
    /* font-size: 18px; */
    width: 100%;
  }

  section.features .head .main_tit {
    font-size: 36px !important;
  }

  section.features .head .sub {
    font-size: 20px;
  }

  section.features ul li {
    font-size: 16px;
  }

  /* technology */

  .technology .head img {
    max-width: 540px;
  }

  section.technology .circle-list {
    flex-direction: column;
    /* 세로 전환 */
    justify-content: flex-start;
    align-items: center;
    max-width: 260px;
    /* 가운데 기둥처럼 */
    border-radius: 999px;
  }

  section.technology .circle-list li {
    flex: 0 0 auto;
    /* 고정 크기 */
    width: 100%;
    max-width: 240px;
    /* 원 크기 유지 */
  }

  section.technology .circle-list li.double_arrow::after {
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  footer .inner {
    flex-flow: column;
    padding: 0;
  }

  footer .footer_logo {
    width: 140px;
    margin-bottom: 16px;
  }

  footer .footer_info .adress {
    padding-bottom: 30px;
  }

}



@media (max-width: 920px) {
  section.challenge .cont {
    align-items: center;
  }

  section.challenge .cont .circle-list {
    flex-direction: column;
    /* 세로 전환 */
    justify-content: flex-start;
    align-items: center;
    max-width: 282px;
    /* 가운데 기둥처럼 */
    border-radius: 999px;
  }

  section.challenge .cont .circle-list li {
    flex: 0 0 auto;
    /* 고정 크기 */
    width: 100%;
    max-width: 250px;
    /* 원 크기 유지 */
  }

}

@media (max-width: 768px) {

  main h1 {
    font-size: 24px;
  }

  .head>.tit>.main_tit {
    font-size: 36px;
  }

  section.challenge .head {
    margin-bottom: 46px;
  }

  .tab_elaverse>ul>li>p {
    font-size: 14px;
  }

  .meet_wrap {
    flex-flow: column-reverse;
    align-items: center;
  }

  .meet_wrap .elea {
    width: 100%;
  }

  .meet_wrap .elea img {
    max-width: none;
  }

  .meet01 {
    background: url(../img/meet1_bg_m.png) 0 0 no-repeat;
    background-size: contain;
    background-position: 0 92%;
  }

  .meet01 ul.imgBox {
    /* flex-direction: row; */
    width: 100%;
  }

  .meet01 ul.imgBox li {
    width: 100%;
    padding: 40px 0px 60px;
  }



  .meet01 ul.imgBox li img {
    margin: 0 auto 50px;
    width: 80%;
  }


  .meet01 ul.imgBox li p {
    font-size: 18px !important;
  }

  .meet02 .meet_wrap .elea img {
    display: none;
  }

  #main_visual {
    display: none;
  }

  section.meet02 {
    padding: 80px 60px 80px !important;
  }
  .none{display: block;}
  #slide_wrap{margin: 0;width: 100%; margin-top: 40px; overflow-x:visible;}
  #left_side{display: none;}
  body{overflow-x: hidden;}
  #slider_elea .head{padding: 0;}
  .meet02 .meet_wrap>ul,
  .meet02 .meet_wrap>ul>li,
  .meet02 .meet_wrap>ul>li>img {
    display: block;
    width: 100%;
  }

  .meet02 .meet_wrap>ul>li {
    margin-bottom: 20px;
  }

    .meet02 .meet_wrap>ul>li:last-child{
      margin-bottom: 0;
    }
  

  /* features */

  section.features .feat_wrapper {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }

  section.features .head {
    width: 100%;
  }

  section.features .feat_wrapper .image {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    padding-bottom: 20px;
  }

  section.features .event {
    padding: 80px 0 0;
  }

  /* technology */
  .technology .head .sub {
    font-size: 16px;
    width: 100%;
  }
}

@media (max-width: 480px) {

  main,
  section,
  footer {
    padding: 80px 20px;
  }

  .head>.tit>.sub_tit {
    margin-bottom: 0px;
    font-size: 18px;
  }

  main {
    background: url('../img/main_bg_m.png') 0 0 no-repeat;
    background-position: center;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  main .inner {
    padding-top: 5vh;
    padding-bottom: 6vh;
  }


  main h1 {
    font-size: 18px;
    width: 60%;
    margin: 0 auto;
  }

  main p {
    margin-top: 36vh;
    font-size: 14px;
  }

  .btn-motion6,
  .btn-motion7 {
    display: block;
  }

  section.challenge .cont .tab_elaverse ul li img {
    max-width: 302px;
  }

  .meet01 ul.imgBox li h3 {
    font-size: 36px !important;
  }

  section.meet02 {
    padding: 60px 20px !important;
  }

  section.features .head .main_tit{
    width: 100%;
  }

  .technology .head img {
    width: 100%;
    max-width: none;
  }

  .technology .head>.tit {
    margin-bottom: 0px;
  }

  .technology .head .sub {
    padding: 30px 0 60px;
  }

  footer .footer_logo {
    width: 120px;
    margin-bottom: 14x;
  }

  footer .footer_info .adress {
    font-size: 13px;
    padding-bottom: 30px;
  }

  footer .footer_info .copyright {
    text-align: center;
  }

  .go_top {
  width: 40px;
  height: 40px;
  }
}


.meet02 .meet_wrap .elea {
  position: relative;
  z-index: 2;
}

.meet02 .meet_wrap .elea {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: none;
}