@charset "UTF-8";

@media(max-height:750px){
   .hero h1 { font-size: clamp(36px, 6.2vw, 60px); line-height: 1; margin: 45px 0 0;}
   .hero .acts{margin-top:28px}
}


@media(max-width:1180px){

   /* ceo message */
   .ceo-card {padding-right:15px; gap:20px;}
   .ceo .ceo-flex {gap: 4rem;}
   .ceo .ceo-img {width: 40%;}
   .ceo .ceo-info { width: 60%; }

   /* leadership */
   .management .exec-card {gap:2.5rem; padding: 2rem;}
   .management .exec-card b { font-size: 46px;}
   .management .exec-card .en {font-size: 18px;}


}

@media(max-width:1024px){

   /* ceo message */
   .ceo-card { grid-template-columns: 1fr 250px;}
   .ceo .ceo-flex {flex-direction: column;}
   .ceo .ceo-img {width: 80%; margin: 0 auto; max-width: 500px;}
   .ceo .ceo-info { width: 100%; }
   .ceo-msg {margin-top: 1.5rem;}
   .ceo .ceo-big-tit { font-size: clamp(21px, 4.5vw, 44px);}
   .ceo .ceo-info .ceo-tit { font-size: clamp(18px, 4vw, 36px);}

   /* Company Overview */
   .core-value .value-grid { grid-template-columns: repeat(2, 1fr); }

   /* careers */
   .careers.value-grid {grid-template-columns:1fr;}
   .careers.value-grid .c3 {	grid-column: 1 / -1;}

   /* 면역증강 플랫폼의 작동원리 */
   .moa .flow { grid-template-columns: 1fr 1fr; row-gap: 40px }
   .moa .step { padding: 0 20px }
   .moa .step:nth-child(odd) { padding-left: 0 }
   .moa .step:nth-child(even) { padding-right: 0 }
   .moa .step:nth-child(3)::before { display: none }
   .moa .arrow { display: none }
   .moa .ag2 { grid-template-columns: 1fr; }

   /* leadership */
   .management .exec-card {flex-direction: column;}
   .exec-photo { width: 100%;}
   .exec-photo img { width: 500px; margin: 0 auto; }
   .exec-info {width: 100%;}
   #tab-board .management .role {text-align: center;} 
   #tab-board .management .exec-name {justify-content: center;}

}

@media(max-width:970px){

   /* ceo message */
   .ceo-card { grid-template-columns: 1fr 200px;}

}

@media(max-width:768px){

   .tabs {margin-bottom: 25px;}
   .tab-btn{font-size:12px; padding: 10px 18px;}

    .pageHero.sub1::before { background: linear-gradient(90deg, rgba(10, 30, 72, 0.85), rgba(40, 44, 110, 0.5)); }
   .pageHero.sub2::before { background: linear-gradient(90deg, rgba(14,38,70,.86), rgba(20,56,92,.5)); }
   .pageHero.sub3::before { background: linear-gradient(90deg, rgba(0,12,40,.85),  rgba(0,20,62,.55)); }
   .pageHero.sub4::before { background: linear-gradient(90deg, rgba(22,24,26,.85), rgba(30,32,34,.5)); }
   .pageHero.sub5::before { background: linear-gradient(90deg, rgba(16,32,54,.86), rgba(24,44,70,.55)); }
   .pageHero.sub6::before { background: linear-gradient(90deg, rgba(34,34,54,.86), rgba(46,46,70,.55)); }

   /* ceo message */
   .ceo-card {gap:0; grid-template-columns: 1fr 180px; padding-left:2rem; align-items: center;}
   .ceo-msg p, .ceo .ceo-info .ceo-msg p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
   .ceo-quote { margin: 0 auto 2rem; padding: 6px 8px 6px 25px; word-break: keep-all; }
   .ceo-card .ceo-quote {margin: 0;}
   .ceo-photo .ceo-quote-sign {padding-right:10px;}
   .ceo-quote-sign { font-size: 13px;}
   .ceo .ceo-info .ceo-tit { margin-top: 1.5rem; }
   .ceo .highlight:before { height: 15px;}

   /* leadership */
   .management .exec-card b { font-size: 40px; }
   .management .exec-card .en { font-size: 16px; }
   #tab-board .management .exec-card ul li {font-size: 14px;}

   /* publication */
   .pb-grid {gap: 16px;}
   .pb-card { width: calc((100% - 16px) / 2);}
   .pb-title{font-size:17px}

   /* 면역증강 플랫폼의 작동원리 */
   .moa-wrap {margin-top: 3rem;}
   .moa-top { font-size: clamp(22px, 4vw, 26px);}
   .moa .flow { grid-template-columns: 1fr; row-gap: 0 }
   .moa .step, .moa .step:nth-child(odd), .moa .step:nth-child(even) { padding: 28px 0 }
   .moa .step:first-child { padding-top: 0 }
   .moa .step+.step::before { display: block; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px }
   .moa .st { min-height: 0 }
   .moa .stage { min-height: 0 }
   .moa .inf .items { grid-template-columns: repeat(2, 1fr) }
   .moa .s1 { grid-template-columns: 72px 18px 1fr }
   .moa .ag .art { width: 68px; height: 68px }

   @media (prefers-reduced-motion:reduce) {
      .moa .rv { opacity: 1; transform: none; transition: none }
      .moa .on .cyto i { animation: none; opacity: .6 }
   }

}

@media(max-width:640px){

   /* ceo message */
   .ceo-card{grid-template-columns:1fr; padding-top:2rem;}
    .ceo-photo {aspect-ratio: auto;display: inline-flex; justify-content:center;}
   .ceo-photo img { width: 50%;}
   .ceo-photo .ceo-quote-sign { left: 50%; width: 50%; right: auto; transform: translateX(-50%); text-align: center; }

   /* publication */
   .pb-card { width: 100%;}
   .pb-title{font-size:17px}

   /* pipeline */
   .pd-top { padding-bottom: 0; border-bottom: none;}
   .pd-tag { padding: 8px 16px; font-size: 12px; font-weight: 600;}
   .pd-ind {padding: 1.5rem;}
   .pd-row { grid-template-columns: 1fr; gap: 10px;}
   .pd-row .v { font-size: 15px;}
   .pd-row .k {padding-top: 0; border-bottom: 1px solid var(--ab-line); padding-bottom: 8px;}
   .pd-ind-top b { font-size: 15px; font-weight: 700; }
   .pd-toggle { width: 26px; height: 26px;}
   .pd-toggle-icon { width: 6px; height: 6px; transform: rotate(45deg) translate(-1px, -1px);}
   .pd-toggle[aria-expanded="true"] .pd-toggle-icon { transform: rotate(-135deg) translate(-1px, -1px); }



}

@media(max-width:480px){

   .pageHero { padding: 110px 0 36px; }
   .pageHero h1 { font-size: clamp(26px, 4vw, 50px); font-weight: 700; letter-spacing: -0.02em; margin-top: 16px; }
   .pageHero h1 .en2 { font-size: 14px; letter-spacing: .1em; margin-bottom: 6px; }
   .pageHero p {font-size: 14px;line-height: 1.6;}

   .shead h2 {margin-top: 14px; line-height: 1.3; font-weight: 700;}
   .shead p {font-size: 15px; margin-top: 16px;}
   .tab-btn { padding: 8px 16px; }
   .pager a { width: 32px; height: 32px; font-size: 13px; font-weight: 600;border-radius: 8px;}

   .cta h2 { font-size: clamp(24px, 3.2vw, 42px); line-height: 1.375; margin-bottom: 36px; }
   .cta .gp { border-radius: 20px; padding: 1.5rem;}
   .cta .gp h3 { font-size: 22px; font-weight: 800; margin-top: 6px; }
   .cta .gp p { font-size: 14px; margin-top: 10px;}
   .cta .gp .k {font-weight: 600;}
   .cta .gp .lnk {font-size: 14px;}

   .bx { border-radius: 20px; padding: 1.5rem; }

   .totop { right: 1rem; bottom: 1rem; width: 42px; height: 42px;}

   /* ceo message */
   .ceo-card {padding: 1.5rem 1.5rem 0;}
   .ceo-photo img { width: 88%;}
   .ceo-photo .ceo-quote-sign { width: 88%;}
   .ceo-quote .qmark {line-height: 0.6;}
   .ceo-card .ceo-quote {padding: 0;}
   .ceo-quote::before {display: none;}
   .ceo-msg {margin-top: 2.5rem; padding: 0;}
   .ceo-msg p.ceo-msg-h { font-size: clamp(16px, 1.9vw, 20px); /*padding-left: 1.625rem;*/ word-break: keep-all;}
   .ceo-msg-h::before { top: 4px; width: 16px; height: 16px;}
   .ceo-sign {font-size: 15px;}
   .ceo .ceo-info .ceo-msg {margin-top: 40px;}
   .ceo .highlight:before { height: 10px;}

   /* Careers */
   .bento .bx h3 {font-size: 18px;}
   .board-row .ttl .bd {margin-right: 5px;}
   .board-row .ttl {font-size: 15px;}
   

   /* Science & Innovation*/
   .moa-top {/*font-size: 18px;*/ margin-bottom: 1.75rem;}
   /* .moa-img {overflow-x: scroll;} */
   .moa-img img {max-width: 600px; margin-bottom: 1rem;}
   .moa .moa-img span:before {width: 100%; height: 100%; aspect-ratio: 722 / 117; margin-bottom: 1.25rem;}

   /* Company Overview */
   .sec { padding: 60px 0; }
   .sec + .sec { padding-top: 0; }
   .sec + .sec.tint, .sec.tint + .sec {padding-top: 60px;}
   .cta {padding: 50px 0 60px;}
   .shead {margin-bottom: 2.5rem;}
   .tint .shead.ctr {text-align: left;margin: 2rem auto;}
   .tint .shead.ctr p { line-height: 1.6; font-size: 16px;}
   .core-value .value-grid { grid-template-columns: 1fr; }
   .overview .bento .bx h3 {font-weight: 600; line-height: 1.4;}

   /* publication */
   .pb-tab {gap: 6px;}
   .pb-tab i { width: 8px; height: 8px;}
   .pb-tabs {gap: 8px;}
   .pb-title {font-size: 16px; font-weight: 600;}
   .pb-body {padding: 1.25rem;}

   /* history */
   .tab-w100 .tab-btn {width: 100%;}
   .tab-w100.tabs { margin-bottom: 2.5rem;}
   .hist-head h3 { font-size: 22px; }
   .hist-head p.kor-period {font-size: 18px;}
   .hist-head .year-tit { gap: 0.375rem; }
   .hist-list { margin-top: 25px;}
   .hist-item { gap: 22px; padding: 22px 0;}
   .hist-item ul {gap:5px;}
   .hist-item li { font-size: 14px; line-height: 1.6;}
   .hist-item li::before {top:9px;}

   /* leardership */
   .exec-card, .management .exec-card { padding: 1.25rem;}
   .exec-card b {font-size: 1.125rem;}
   .exec-drawer ul {gap: 5px;}
   .exec-photo img {width: 100%;}
   .management .exec-card {gap:1.5rem;}
   #tab-board .management .role {font-size: 14px;}
   #tab-board .management .exec-name {flex-direction: column; align-items: center; gap: 0; margin-top: 6px;}
   .management .exec-card b { font-size: 32px; }
   .management .exec-card .en { font-size: 14px; }
   #tab-board .management .exec-card ul { padding: 1.25rem 1.5rem; line-height: 1.4;}


   /* core Platforms */
   .step-ic { width: 42px; height: 42px;}
   .step-ic svg { width: 22px; height: 22px; }

   /* pipeline */
   .pd-card { padding: 1.25rem; border-radius: var(--ab-r); }
   .pd-row .v.big { font-size: 20px; }
   .pd-row .v small {font-size: 14px;}
   .pd-row .v {font-size: 14px !important; line-height: 1.6 !important;}
   .pd-ind { padding: 1.25rem; }
   .pd-ind-top b { font-size: 14px; font-weight: 600; line-height: 1.3; }
   .pd-badge { font-weight: 700; font-size: 12px;}
   .pd-ctgov { padding: 6px 16px;}

   /* 면역증강 플랫폼의 작동원리 */
   .moa {padding: 1.75rem 1.5rem;}
   .moa .st {font-size: 16px;}
   .moa .s1 { grid-template-columns: 1fr; justify-items: stretch; }
   .moa .ag { display: grid; grid-template-columns: 68px auto; column-gap: 12px; justify-content: start; align-items: center; text-align: left; }
   .moa .ag > img, .moa .ag .art { grid-row: span 2; width: 68px; height: 68px; object-fit: contain; }
   .moa .ag b { margin-top: 0; align-self: end; }
   .moa .ag small { align-self: start; }
   .moa .fk { display: none; }   
   .moa .pfl { margin-left: 33px; padding-left: 20px; gap: 14px; }
   .moa .pf:first-child::after { top: 0; bottom: -9px; }      
   .moa .rc .art {width: 50px; height: 50px; margin-top:5px;}        
   .moa .rc b {font-size: 14px;}
   .moa .apply { margin-top: 1.5rem; padding-top: 2rem;}
   .moa .it {font-size: 14px;}
   .moa .it .art { width: 50px; height: 50px;}
}

@media(max-width:380px){

}