@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css");





/* Style Guide */

:root { 
  --black: #000000;
  --black-2: #00000033;
  --black-haze: #f6f6f6;
  --cararra: #ebebeb;
  --eerie-black: #17191e;
  --ghost: #c1cadc;
  --havelock-blue: #5185d3;
  --mystic: #e5eaf4;
  --outer-space: #2f333c;
  --salmon: #f38666;
  --shuttle-gray: #606878;
  --vulcan: #121424;
  --white: #ffffff;
  --white-lilac: #f8f9fc;
 
  --font-size-36px: 36px;
  --font-size-64px: 64px;
  --font-size-l: 18px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 20px;
  --font-size-xs: 12px;
  --font-size-xxl: 28px;
  --font-size-xxxl: 40px;
 
  --font-family-pretendard-bold: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-extrabold: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-medium: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-regular: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-semibold: "Pretendard", Helvetica, Arial, sans-serif;

  /* New */
  --vw: calc(0.45vw + 0.5rem);
  --vm: 1vmax;

  --vwbg: 1vw;
  --vmbg: 1vmax;
}

@media (max-width: 800px) {
  :root{
    --vw: 1.5vw;
    --vm: 1.5vmax;
  
    --vwbg: 1.3vw;
    --vmbg: 1.3vmax;
  }
}

@media (max-width: 400px) {
  :root{
    --vw: 3vw;
    --vm: 3vmax;
  
    --vwbg: 2vw;
    --vmbg: 2vmax;
  }
}

* {
  box-sizing: border-box;
}

body{
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
#root{
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.lang-korean .l-en {
  display: none !important;
}
.lang-english .l-kr {
  display: none !important;
}

.displayd1 {
  font-family: var(--font-family-pretendard-extrabold);
  font-size: var(--font-size-64px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.displayd3 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-36px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh1 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh3 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh4 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh5 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.headingh6 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.headingh7 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.bodyp2 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyp3 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyp4 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.pretendard-bold-white-40px {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}


/* // Style Guide */






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


.screen a {
  display: contents;
  text-decoration: none;
}

.video video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.video img {
  object-fit: cover;
}

.video-1 {
  height: 720px;
  width: 390px;
}

.video-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.video-1 img {
  object-fit: cover;
}

.section1 {
  align-items: center;
  background-color: var(--black-haze);
  justify-content: center;
}

.frame {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.section1-1 {
  align-items: flex-start;
  background-color: var(--black-haze);
}

.elysium-bio-co-ltd-1 {
  color: var(--shuttle-gray);
}

.frame-29-2 {
  background-color: var(--white);
  border-radius: 16px 16px 80px 16px;
  overflow: hidden;
  width: 200px;
}

.frame-100 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.november-2023 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.establishment-of-heim-holdings {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.name-change-from-hei {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.corporate-registrati {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.july-2024 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.july-2024-1 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.acquisition-of-asian {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.signing-of-service-c {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.con7 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 268px;
}

.september-2024 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.october-2024 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.con9 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 200px;
}

.october-2024-1 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.listing-and-registra {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.december-2024 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.december-2024-1 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.start-of-collaborati {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.section1-2 {
  align-items: center;
  background-color: var(--outer-space);
  justify-content: center;
}

.elysium-bio-co-ltd-2 {
  color: var(--white);
}

.frame-23 {
  background-color: var(--white-lilac);
  border-radius: 100px;
  height: 72px;
  overflow: hidden;
  position: relative;
  width: 72px;
}

.frame-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
}

.frame-1-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  position: relative;
  width: 100%;
}

.or-of {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 18px;
  margin-top: -1.00px;
  position: relative;
}

.health-and-medical-e {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 18px;
  position: relative;
}

.committee-health-an {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 18px;
  position: relative;
}

.x-of {
  align-self: stretch;
  color: var(--white);
  font-weight: 700;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.nm23-h1nactivatorh-prune-inhibitor {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.repositioning-of-tar {
  color: var(--white);
  font-weight: 700;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  width: 432px;
}

.kn-383-streptonigrin-series {
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
  width: 432px;
}

.pmca-inhibitor-p1-7 {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.research-and-develop {
  align-self: stretch;
  color: var(--white);
  font-weight: 700;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
}

.polyphosphate-p1-7 {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.section1-3 {
  align-items: flex-start;
  background-color: var(--black-haze);
  justify-content: center;
}

.frame-1597884245 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  margin-right: -514.00px;
  position: relative;
}


.frame-170 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.basic {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  padding: 8px 0px;
  position: relative;
}

.frame-171 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.access-will-be-restr {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.frame-172 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.bio-times-elysium {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.bar {
  background-color: var(--shuttle-gray);
  border-radius: 100px;
  flex: 1;
  flex-grow: 1;
  height: 180px;
  position: relative;
}

.frame-1597884244 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.frame-1597884243 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--vulcan);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 268px;
  padding: 20px;
  position: relative;
  width: 100%;
}

.txt-1 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.representative-byung-ho-choi {
  align-self: stretch;
  color: var(--ghost);
  font-weight: 400;
  line-height: 18px;
  margin-top: -1.00px;
  position: relative;
}

.frame-29-4 {
  height: 160px;
  position: relative;
}

.itemtab-2 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  padding: 12px;
  position: relative;
}

.name-3 {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.section1-4 {
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  padding: 60px 16px;
  position: relative;
  width: 100%;
}

.signing-of {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.scroll-down-1 {
  color: var(--white);
  font-weight: 400;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.arrow-narrow-down {
  height: 16px;
  position: relative;
  width: 16px;
}

.navbar {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 20px;
  position: relative;
  padding-right: calc(var(--vw) * 1.5);
}

/* .navbar-link-works {
}

.navbar-link-history {
}

.navbar-link-about-us {
}

.navbar-link-business {
}

.navbar-link-notice {
} */

.kor-eng {
  color: var(--white);
  font-weight: 600;
  font-size: calc(var(--vw) * 0.95);
  padding-right: calc(var(--vw)* 0.2);
  position: relative;
  transition: 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  border-radius: 20px;
  padding: 11px 18px;
}

.kor-eng-blue {
  color: var( --eerie-black);
}

.kor-eng:hover {
  transform: scale(1.05);
}
.kor-eng:active {
  transform: scale(1.09), translateY(3px);
}
.kor-eng .koreng-icon, .kor-eng .koreng-icon-blue {
  width: calc(var(--vw) * 1.2);
}
/* .kor-eng .koreng-kor {
  padding-left: 0.6vw;
} */
.kor-eng .koreng-split {
  font-weight: 300;
  color: #606878;
  font-family: var(--font-family-pretendard-regular);
  padding: 0 0.4vw;
}
.kor-eng .koreng-eng {
  margin-right: -0.1vw;
}


.lang-korean .koreng-eng, .lang-english .koreng-kor {
  font-weight: 300;
  color: #9DA6BB;
  font-family: var(--font-family-pretendard-regular);
}
.lang-korean .koreng-kor, .lang-english .koreng-eng {
  color: #17191E;
}
.mobile-kor-eng{
  display: none;
}
.hamburger-menu{
  display: none;
}

.section {
  align-items: center;
  align-self: stretch;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  padding: 7.7vmax 11.5vw 3.2rem;
  position: relative;
  width: 100%;
}

.frame-348 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  margin-top: -2.50px;
  position: relative;
  width: 100%;
}

.section2 {
  align-items: flex-start;
  align-self: stretch;
  /* display: flex; */
  flex-direction: column;
  /* gap: 56px; */
  justify-content: center;
  padding: 7.95vw 0 2.1rem 11.45vw;
  position: relative;
  width: 100%;
}

.section2 .title {
  padding: 0 11.45vw 0 0;
}

.section2 .line-holder {
  position: relative;
  width: 100%;
}
.section2 .line {
  height: 4px;
  left: -5.75vw;
  position: absolute;
  top: calc(var(--vw) * 11.6);
  width: 100%;
  transform: scale(1.15, 1);
}
.section2 .line img{
  width: 100%;
}

.bd {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.section3 {
  background-color: var(--outer-space);
  padding: 8.4vw 0vw 6.82vw;
  position: relative;
  width: 100%;
  color: #ffffff;

  background-image: url(../img/img.png);
  background-position: center;
  background-size: cover;
}

.section3 .title {
  padding: 0 11.4vw 0;
}

.frame-232 {
  background-color: var(--white-lilac);
  border-radius: 100px;
  height: 160px;
  overflow: hidden;
  position: relative;
  width: 160px;
}

.frame-123 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  position: relative;
}

.frame-129 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.frame-3 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.professor-of-biochem {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.health-an {
  align-self: stretch;
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.frame-232-1 {
  background-color: var(--white-lilac);
  border-radius: 100px;
  height: 60px;
  overflow: hidden;
  position: relative;
  width: 60px;
}

.plus-frame {
  background-color: var(--eerie-black);
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
  bottom: calc(var(--vw) * 1.4);
  right: calc(var(--vw) * 1.4);
  width: calc(var(--vw) * 2.7);
  height: calc(var(--vw) * 2.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.plus {
  width: calc(var(--vw) * 1.7);
  height: calc(var(--vw) * 1.7);
}

.spread-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nm23-h1nactivatorh-prune-lnhibitor {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.kn-383-streptonigrin-serises {
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
  width: 432px;
}

.pmca-p1-7-ca {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.rna-virus {
  align-self: stretch;
  color: var(--white);
  font-weight: 700;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
}

.polyphoshate-p1-7 {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.frame-152 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
}

.frame-17 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.ino {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 400;
  line-height: 21px;
  position: relative;
}

.con2-3 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
}

.navbar-link {
  color: var(--white);
  font-weight: 600;
  font-size: calc(var(--vw) * 0.95);
  position: relative;
  padding-left: calc(var(--vw) * 1.02);
  transition: 0.3s ease;
  cursor: pointer;
}
.navbar-link:hover {
  color: var(--ghost);
  transform: scale(1.02);
}
.navbar-link:hover {
  color: var(--ghost);
  transform: scale(1.08), translateY(3px);
}


.name {
  align-self: stretch;
  color: var(--shuttle-gray);
  font-weight: 600;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
}

.getty-images-1466539199-1 {
  height: 400px;
  left: 107px;
  position: absolute;
  top: 0;
  width: 640px;
}