@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
:root{
    /* font size */
    --font-size1: 55px;
    --font-size2: 40px;
    --font-size3: 30px;
    --font-size4: 18px;
    --font-size5: 16px;
    --font-size6: 13px;
    --font-size7: 20px;
    --font-size8: 28px;
  
    /* line height */
    --line-height1: 65px;
    --line-height2: 46px;
    --line-height3: 36px;
    --line-height4: 22px;
    --line-height5: 20px;
  
    /* text weight */
    --normal: 400;
    --light: 300;
    --semi: 600;
    --bold: 700;
    
    /* width */
    --fullwidth: 100%;
    --halfwidth: 50%;
    --width15pct: 20%;
    --width20pct: 20%;
    --width25pct: 25%;
    --width30pct: 25%;
    --width35pct: 30%;
    --width10: 10px;
    --width20: 20px;
    --width25: 25px;
    --width30: 30px;
    --width45: 45px;
    --width50: 50px;
    --width70: 70px;
    --width80: 80px;
    --width100: 100px;
    --width140: 140px;
    --width150: 150px;
    --width200: 200px;
    --width250: 250px;
    --width300: 300px;
    --width350: 350px;
    --width1600: 1600px;
  
    /* color */
    --white : #FFFFFF;
    --black : #222222;
    --grey : #8a8b8c;
    --remarks : #58595b;
    --light-grey : #F1F1F3;
    --dust-grey : #dfdfe8;
    --dark-grey : #6d6e70;
    --lake-blue: #1776bc;
    --deep-blue : #1e0068;
    --violet : #8e7fb3;
    --gradient-blue : linear-gradient(140deg, rgba(30,0,104,1) 0%, rgba(23,118,188,1) 100%); 
    --dust-gradient-blue : linear-gradient(140deg, rgba(117,106,145,1) 0%, rgba(84,115,150,1) 100%); 
}
.hidden { display: none; }
#jas-content { padding-top: var(--item-side-height); }
.jas-page .jas-container { width: var(--fullwidth); margin: 0 auto !important; overflow: hidden; /* background: #ccc; */ }
.jas-page .jas-container > .vc_row { margin-left: 0; margin-right: 0; }
.jas-page .mt__60, .jas-page .mb__60 { margin: 0; }
@media only screen and (min-width: 1600px) {
  .jas-page .jas-container { max-width: var(--width1600); }
}

.jas-page .vc_column_container>.vc_column-inner { padding: 0; }
.jas-page .wpb_content_element { margin: 0; position: relative; }

.jas-page a { text-decoration: none; }
.jas-page a.line { text-decoration: underline; }

h1, .jas-page .h1 { font-size: var(--font-size1); line-height: var(--line-height1); }
h2, .jas-page .h2 { font-size: var(--font-size2); line-height: var(--line-height2); }
h3, .jas-page .h3 { font-size: var(--font-size3); line-height: var(--line-height3); }
h4, .jas-page .h4 { font-size: var(--font-size4); line-height: var(--line-height4); }
h5, .jas-page .h5 { font-size: var(--font-size5); line-height: var(--line-height5); }
h6, .jas-page .h6, .jas-page small { font-size: var(--font-size6); line-height: var(--line-height5); }
.jas-page .font20 { font-size: var(--font-size7); line-height: var(--line-height4); }
.jas-page .font28 { font-size: var(--font-size8); line-height: var(--line-height3); }

.semi-bold { font-weight: var(--semi); }
.text-bold { font-weight: var(--bold); }

.jas-page *, .black { color: var(--black); }
.white { color: var(--white); }
.deep-blue { color: var(--deep-blue); }
.violet { color: var(--violet); }
.remarks { color: var(--remarks); }

.bg-white { background: var(--white); }
.bg-gradient-blue { background: var(--gradient-blue); }
.bg-dust-gradient-blue { background: var(--dust-gradient-blue); }
.bg-dust-grey { background: var(--dust-grey); }
.bg-light-grey { background: var(--light-grey); }

.home, .page { background: #dfdfe8 url(../images/bg_contact.jpg) no-repeat; background-size:cover; background-attachment: fixed; }

.bline { border-bottom: 2px solid var(--white); width: var(--fullwidth); max-width: 210px; }

.full-width { width: var(--fullwidth); }
.half-width { width: var(--halfwidth); }
.fit-content { width: fit-content; max-width: 1200px; }
.width-150 { width: var(--width150); }
.width-200 { width: var(--width200); }
.width-250 { width: var(--width250) !important; }

.p-10 { padding: var(--width10); }
.p-30 { padding: var(--width30); }
.p-50 { padding: var(--width50); }

.pl-30 { padding-left: var(--width30); }
.pl-45 { padding-left: var(--width45); }
.pl-50 { padding-left: var(--width50); }
.pl-100 { padding-left: var(--width100); }
.pl-150 { padding-left: var(--width15pct); }
.pl-200 { padding-left: var(--width20pct); }
.pl-250 { padding-left: var(--width25pct); }
.pl-300 { padding-left: var(--width30pct); }
.pl-350 { padding-left: var(--width35pct); }

.pr-20 { padding-right: var(--width20); }
.pr-50 { padding-right: var(--width50); }
.pr-100 { padding-right: var(--width100); }
.pr-150 { padding-right: var(--width15pct); }
.pr-200 { padding-right: var(--width20pct); }

.pb-0 { padding-bottom: 0; }
.pb-20 { padding-bottom: var(--width20); }
.pb-25 { padding-bottom: var(--width25); }
.pb-50 { padding-bottom: var(--width50); }
.pb-70 { padding-bottom: var(--width70); }
.pb-100 { padding-bottom: var(--width100); }
.pb-140 { padding-bottom: var(--width140); }

.pt-50 { padding-top: var(--width50); }
.pt-80 { padding-top: var(--width80); }
.pt-100 { padding-top: var(--width100); }
.pt-140 { padding-top: var(--width140); }

.m-0auto { margin: 0 auto; }

.ml-0 { margin-left: 0 !important; }
.ml-50 { margin-left: var(--width50); }
.ml-150 { margin-left: var(--width150); }
.ml-250 { margin-left: var(--width250); }
.ml-300 { margin-left: var(--width300); }
.ml-350 { margin-left: var(--width350); }
.ml-25pct { margin-left: var(--width25pct); }
.ml-35pct { margin-left: var(--width35pct); }

.mt-20 { margin-top: var(--width20); }
.mt-30 { margin-top: var(--width30); }
.mt-50 { margin-top: var(--width50); }
.mt-70 { margin-top: var(--width70); }

.mb-20 { margin-bottom: var(--width20); }
.mb-25 { margin-bottom: var(--width25); }
.mb-30 { margin-bottom: var(--width30); }
.mb-140 { margin-bottom: var(--width140); }
.mb-200 { margin-bottom: var(--width200); }

.right-0 { right: 0; }
.right-80 { right: var(--width80); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-upper { text-transform: uppercase; }

.display-flex { display: flex; }
.flexR { display: flex; flex-direction: row; align-items: center; }
.flexC { display: flex; flex-direction: column; }
.flex-start { align-self: flex-start; }
.flex-end { align-self: flex-end; }
.flex-center { align-self: center; }
.item-flex-start { align-items: flex-start; }
.item-flex-center { align-items: center; }
.space-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.desktop-block { display: block; }
.mobile-block { display: none; }

.gap-20 { gap: 20px; }
.gap-3525 { gap: 35px 25px; }
.gap-45 { gap: 45px; }
.gap-50 { gap: 50px; }
.gap-90 { gap: 90px; }

.img-responsive {  width: auto; max-width: var(--fullwidth); }
.img-center { display: block; margin: auto; }

.clearfix { clear: both; }

.viewpoint_rightcorner{position: fixed; right: var(--width50); bottom: var(--width50); z-index: 3; content: ''; display: block; width: 1px; height: 1px; }
.connect{position: fixed; left: var(--width50); bottom: var(--width50); font-size: var(--font-size6); font-weight: 600; display: flex; flex-direction: row; align-items: center; padding: 15px 20px; border-radius: 60px; border: 4px solid rgba(23,118,188,0.5); z-index: 3; transition: all 0.2s ease; background: rgba( 255, 255, 255, 0.9 );}
.connect:hover{border: 4px solid rgba(23,118,188,1);}
.connect .sclX{transition: all 0.3s ease; transform-origin: left center; padding-left: 1.2em; letter-spacing: 0; line-height: var(--line-height4); }
@-webkit-keyframes slide-out-left {
    0% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 1;
        width: auto;
    }
    50% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 0;
        width: auto;
    }
    100% {
        padding-left: 0;
        letter-spacing: -8px;
        width: 0;
        line-height: 0;
        opacity: 0;
    }
}
@keyframes slide-out-left {
    0% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 1;
        width: auto;
    }
    50% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 0;
        width: auto;
    }
    100% {
        padding-left: 0;
        letter-spacing: -8px;
        width: 0;
        line-height: 0;
        opacity: 0;
    }
}
@-webkit-keyframes slide-in-right {
    0% {
        padding-left: 0;
        letter-spacing: -8px;
        width: 0;
        line-height: 0;
        opacity: 0;
    }
    80% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 0;
        width: auto;
    }
    100% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 1;
        width: auto;
    }
}
@keyframes slide-in-right {
    0% {
        padding-left: 0;
        letter-spacing: -8px;
        width: 0;
        line-height: 0;
        opacity: 0;
    }
    80% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 0;
        width: auto;
    }
    100% {
        padding-left: 1.2em;
        letter-spacing: 0;
        line-height: var(--font-size3);
        opacity: 1;
        width: auto;
    }
}
.connect.outTXT .sclX{ -webkit-animation: slide-out-left 0.5s ease-out forwards; animation: slide-out-left 0.5s ease-out forwards; }
.scrolup .inTXT .connect .sclX{ -webkit-animation: slide-in-right 0.5s ease-out forwards; animation: slide-in-right 0.5s ease-out forwards; }
.connect img { display: block; }

.inner_grid { width: var(--fullwidth); max-width: var(--width1600); margin: auto; padding-left: 100px; padding-right: 100px; }

.section-title, .section-firsttitle, .section-title span, .section-firsttitle span { text-transform: uppercase; font-size: var(--font-size1); line-height: var(--line-height1); color: var(--deep-blue); font-weight: var(--semi); opacity: 1; transition: opacity 0.5s ease; }
.section-title, .section-firsttitle { width: fit-content; }
/*.section-firsttitle { width: calc( var(--fullwidth) - 180px); }*/
.section-firsttitle-small { width: 180px; }
.section-title span, .section-firsttitle span { color: var(--deep-blue); opacity: 0; transition: all 0.5s ease; position: relative; left: 0;}
.section-title span:empty, .section-firsttitle span:empty{content: ' '; display: inline-block; width: 15px;}
.section-title.on, .section-title.on span:not(.fade-in), .section-firsttitle.on, .section-firsttitle.on span:not(.fade-in) { }
.fade-in {
    opacity: 0;
    -webkit-animation: fade-in cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-delay-0 {
    animation-duration: .75s;
}
.fade-delay-1 {
    animation-duration: 1.2s;
}
.fade-delay-2 {
    animation-duration: 1.5s;
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
        left: -10px;
    }
    100% {
         opacity: 1;
         left: 0px;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
        left: -10px;
    }
    100% {
         opacity: 1;
         left: 0px;
    }
}

.narration, .narration.pl-50 { margin-left: 25px; padding-top: 20px; padding-bottom: 20px; padding-left: 25px; border-left: 2px solid var(--black); }
.narration.pt-0 { padding-top: 0px; }
.narration.pl-50 { padding-left: var(--width50); margin-left: 0px; }
.narration.ml-50 { margin-left: var(--width50); }
.narration.no-border { border-left: 0px; }
.half-width .narration, .narration.full-width { max-width: var(--fullwidth); }

/*HOME**********/
/*
.home-slide { overflow: visible; }
.home-slide .swiper-slide { width: var(--fullwidth); height: auto; }
.home-slide .swiper-slide:not(.swiper-slide-active) { opacity: 0; }
.home-slide img.slide-img { margin-bottom: -130px; transform: translateY(-130px); }
*/
.home-slide { margin-top: -50px; }
.home-slide .slide-content { margin-bottom: var(--width30); }
.home-slide .swiper-pagination { bottom: var(--width50); }
.slide-button { width: var(--fullwidth); height: 36px; background: url("../images/slide_arrow.png") no-repeat center right; position: relative; flex-direction: row !important; }
.slide-button a { text-decoration: none; position: absolute; }
.swiper-pagination { text-align: left; }
.home-slide .swiper-scrollbar { width: 180px; height: 4px; border-radius: 0; background: var(--white); opacity: 0.5; left: var(--width50); bottom: var(--width50); }
.home-slide .swiper-scrollbar .swiper-scrollbar-drag { width: 60px; height: 8px; margin: 0; background: var(--lake-blue); position: relative; top: -2px; border-radius: 0; opacity: 1; }


.home-slide:after { position: absolute; content: ''; background: var(--gradient-blue); left: 0; top: 130px; width: var(--fullwidth); height: calc( var(--fullwidth) - 130px ); }
.home-slide .pr-50.flex-start { transform: translateY(130px); }

.home-tech { max-width: 280px; }

.home-partner img { margin-right: -150px; transform: translateX(-150px); }
.home-partner .number { font-size: 90px; line-height: 90px; background: -webkit-linear-gradient(140deg, rgba(30,0,104,1) 0%, rgba(23,118,188,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.slide-button-black { width: var(--fullwidth); height: 36px; position: relative; flex-direction: row !important; background-size: 52px 36px;}
.slide-button-black-left { width: 265px; }
.slide-button-black.width-150 { width: var(--width150); }
.slide-button-black a { text-decoration: none; position: absolute; }
.slide-button-black.width-150 a { padding-right: calc( 100% - 70px ); }
.slide-button-black-left a { padding-right: calc( 100% - 180px ); }

.slide-button a, .slide-button-black a, .home-btn a, .technology-btn a { display: flex; text-align: left; height: fit-content; align-items: center; }
.slide-button a, .slide-button-black a { min-height: 36px; }
.slide-button-black a { background: url("../images/news_highlight_arrow.png") no-repeat center right; }
.home-btn a { background: url("../images/home_btn.png") no-repeat top right; }
.technology-btn a { background: url("../images/home_btn.png") no-repeat top right; width: fit-content; padding-right: 40px; }

.award-logo { max-width: 110px; max-height: 110px; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; }
.award-logo img { max-width: 140%; transform: translateX(-14%); }
.award-text { color: var(--grey); letter-spacing: 0.3em; }

/*ABOUT**********/
img.story-img { margin-right: -100px; margin-bottom: -150px; transform: translate(-100px, -150px); }

.timeline { border-left: 2px solid var(--white); position: absolute; width: 16px; height: 400px; transform: translateX(10px);}
.timeline::after { display: block; content:""; background: url("../images/timeline_arrow.png") no-repeat bottom center; width: 16px; height: 100%; transform: translate( -9px, 14px); }
.timeline_box .year { width: 55px; }
.timeline_box .content { width: calc( var(--fullwidth) - 55px ); display: block; }
.timeline_width { width: 48%; }

.awards, .preclinical { display: grid; grid-template-columns: repeat(3, 1fr); }
.awards > div { max-width: 205px; }
.awards_line::before { display: block; content:""; background: var(--dark-grey) no-repeat top left; width: 2px; height: 150px; position: absolute; transform: translate(-40px, -20px); }

.overlapped, .text-overlapped { position: relative; z-index: 2; }
.ovl_bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100%; pointer-events: none; transition: all 0.3s ease; }

/*PARTNERING**********/
.partnering_line::before { display: block; content:""; background: var(--dark-grey) no-repeat top left; width: 2px; height: 150px; position: absolute; transform: translateY(-20px); }

/*TECHNOLOGY**********/
/*.page-id-542 img.story-img { margin-bottom: 0px; }*/
.preclinical > div { max-width: 270px; }
.preclinical img { max-width: 100px; }
.box-hover { position: relative; width: 100%; max-width: 400px;  aspect-ratio: 400/260; border-bottom-right-radius: 30px; }
.box-hover:hover .hMore { opacity: 1; }
.box-hover .hMore { z-index: 9; position: relative; bottom: 10%; }
.box-hover .hMore a { display: block; width: fit-content; border: 0.05rem solid var(--deep-blue); color: var(--white); background-color: var(--deep-blue); padding: 10px 20px; text-align: center; border-radius: 20px; }
.box-hover .hMore a:hover, .box-hover .hMore a:visited { color: var(--white); }

@media only screen and (min-width: 1024px) {
  .box-hover .hMore { opacity: 0; -webkit-transition: all .45s ease; -moz-transition: all .45s ease; -ms-transition: all .45s ease; -o-transition: all .45s ease; transition: all .45s ease; }
  .box-hover::after { border-bottom-right-radius: 30px; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); -webkit-transition: background .35s ease; -moz-transition: background .35s ease; -ms-transition: background .35s ease; -o-transition: background .35s ease; transition: background .35s ease; }
  .box-hover:hover::after { background-image: linear-gradient(140deg, rgba(117,106,145,0.9) 0%, rgba(84,115,150,0.9) 100%); }
  .box-hover .hMore a:hover, .box-hover .hMore a:visited { background-color: rgba(0, 0, 0, 0.0); }
}

/*LEGAL**********/
.legal_line::before { display: block; content:""; background: var(--dark-grey) no-repeat top left; width: 2px; height: 150px; position: absolute; }

/*REFERENCE**********/
.ref_line { border-left: 2px solid var(--dark-grey); }



@media screen and (max-width: 1600px) {
  .connect{ transform-origin: left bottom; }
}

@media screen and (max-width: 1023px) {
:root{
    /* font size */
    --font-size1: 35px;
    --font-size2: 30px;
    --font-size3: 24px;
  
    /* line height */
    --line-height1: 35px;
    --line-height2: 30px;
    --line-height3: 24px;
  }
  
  .jas-page .jas-container { max-width: var(--fullwidth); }
  .mobile-block { display: block; }
  .social_share, .connect .sclX, .desktop-block { display: none; }
  .narration { margin-left: 0px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; /*width: calc( var(--fullwidth) - var(--width10) );*/ align-self: flex-start; }
  
  .half-width .narration, .narration.full-width, .timeline_width { max-width: var(--fullwidth); width: auto; }
  .fit-content { max-width: calc( var(--fullwidth) - var(--width50) ); }
  .xs-fit-content { width: fit-content; }
  .xs-full-width { width: var(--fullwidth); max-width: -webkit-fill-available; }
  .flexR { flex-direction: column; }
  .xs-item-flex-start { align-items: flex-start; }
  .xs-item-flex-center { align-items: center; }
  .xs-flex-center { align-self: center; }
  .xs-flex-start { align-self: flex-start; }
  .pl-100, .pl-150, .pl-250, .pl-300, .pl-350 { padding-left: 0; }
  .ml-150, .ml-250, .ml-300, .ml-350 { margin-left: var(--width30); }
  .pl-30, .pl-45 { padding-left: var(--width10); }
  .pl-50, .narration.pl-50 { padding-left: var(--width25); }
  .pr-50, .slide-content.flexR .pr-50 { padding-right: var(--width10); }
  .pr-100, .pr-200 { padding-right: var(--width30); }
  .pt-140 { padding-top: var(--width70); }
  .pb-70 { padding-bottom: var(--width30); }
  .pb-140 { padding-bottom: var(--width70); }
  .ml-50 { margin-left: var(--width25); }
  
  .p-30 { padding: var(--width10); }
  .p-50 { padding: var(--width25); }

  .xs-mb-0 { margin-bottom: 0; }
  .xs-mb-10 { margin-bottom: var(--width10); }
  .xs-mb-20 { margin-bottom: var(--width20); }
  .xs-mb-25 { margin-bottom: var(--width25); }
  .xs-mt-0 { margin-top: 0; }
  .xs-mt-20 { margin-top: var(--width20); }
  .xs-mt-50 { margin-top: var(--width50); }
  .xs-mt-100 { margin-top: var(--width100); }
  .xs-mr-25 { margin-right: var(--width25); }
  .xs-pl-0 { padding-left: 0; }
  .xs-pr-0 { padding-right: 0; }
  .xs-pb-0 { padding-bottom: 0; }
  .xs-plr-25 { padding-left: var(--width25) !important; padding-right: var(--width25) !important; }
  .xs-pb-50 { padding-bottom: var(--width50); }
  
  .xs-right-80 { right: var(--width80); }
  .xs-right-auto { right: auto; }
  
  .xs-text-left { text-align: left; }
  
  .xs-full-width-btn { width: calc( var(--fullwidth) - var(--width80) ); }
  .slide-button-black-left .xs-full-width-btn { width: var(--fullwidth); }
  
  .xs-m-0auto { margin-left: auto; margin-right: auto; }
  
  .connect{ transform-origin: left bottom; left: var(--width25); border: 4px solid rgba(23,118,188, 0.9); }
  .section-title, .section-firsttitle { width: var(--fullwidth); }
  
  .slide-button { margin-bottom: var(--width50); }
  .slide-button a.pr-50, .slide-button-black a.pr-50, .home-btn a.pr-50 { padding-right: var(--width30); }
  .slide-button-black-left, .slide-button-black.width-150 { width: auto; }
  
  .technology-btn a { width: var(--fullwidth); }
  
  
/*HOME**********/
  .home-slide, .bg-gradient-blue, .bg-white { transform: translateY( var(--width50) ); margin-bottom: var(--width50); }
  .home-slide img.slide-img { margin-bottom: var(--width30); transform: translateY(0); order: 1; }
  .home-slide .slide-content { flex-direction: column-reverse; }
  .home-slide .swiper-pagination { transform: translate( 0, var(--width30) ) }
  .home-slide .swiper-scrollbar { width: calc( var(--fullwidth) - var(--width50) ); left: var(--width25); bottom: var(--width25); }
  .home-slide .swiper-scrollbar .swiper-scrollbar-drag { width: 33.3333%; }
  .home-slide .pr-50.flex-start { transform: translateY(0); }
  .home-partner { transform: translateY(0); margin-bottom: 0; }
  .home-partner img { margin-right: 0; margin-bottom: var(--width20); transform: translate(0); }
  .home-partner .number { font-size: 60px; line-height: 60px; }
  .home-tech { max-width: 400px; }
  
/*ABOUT**********/
  img.story-img/*, .page-id-542 img.story-img*/ { margin-right: 0px; transform: translate(0, -130px); margin-bottom: calc( -60px - var(--width50) ); }
  .timeline { transform: translateX(0px);}
  .timeline_box .content { width: var(--fullwidth); }
  .awards { grid-template-columns: repeat(2, 1fr); }
  .awards > div, .awards_line { max-width: var(--fullwidth); }
  .awards_line::before, .partnering_line::before { /*transform: translate(-10px, -25px);*/ display: none; }
  
  
/*TECHNOLOGY**********/
  .preclinical { display: flex; }
  .tech-content { max-width: 400px; }
  .preclinical > div { max-width: 400px; }
  .box-hover { flex-direction: row; }
  .box-hover .hMore { opacity: 1; }
}