@charset "utf-8";

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('../font/A2Z-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}


@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
    body, html {
      font-size: 18px;
      font-family: 'Open Sans','A2z', sans-serif;
      text-rendering: optimizeLegibility !important;
      -webkit-font-smoothing: antialiased !important;
      color: #666;
      font-weight: 400;
      margin: 0;
      padding: 0;
      width: 100% !important;
      height: 100% !important;
    }
    hr {
      height: 3px;
      width: 70px;
      text-align: center;
      position: relative;
      background: #D7EFE7;
      margin: 0 auto;
      margin-bottom: 20px;
      border: 0;
      opacity: 1;
    }
    #menu { padding: 10px; transition: all 0.8s; }
    .on { background-color: #fff !important;  padding: 5px 0 !important; }
    #menu a.navbar-brand { font-size: 26px; padding-bottom: 10px; font-weight: 600; color: #0c0c0c; }
    #menu a.navbar-brand em { font-size: 22px; font-weight: 400; font-style: normal; margin-left: 3px; }

    @media (min-width: 992px) {
      #menu .navbar-collapse { display: block!important; }
      #menu .navbar-collapse ul { float: right; }
    }
    @media (max-width: 992px) {
      #navbar { background: rgba(0, 0, 0, 0.25); padding: 12px 16px; border-radius: 12px; }
      .navbar-nav .nav-link { color: #fff !important; font-weight: 500; }
      .navbar-nav .nav-link:hover { color: #00bfa5 !important; /* 포인트 컬러 */ }
    }
    #menu .navbar-light .navbar-nav > li > a { text-transform: uppercase; color: #0c0c0c; font-size: 15px; font-weight: 400; letter-spacing: 1px; padding: 8px 2px; border-radius: 0; margin: 11px 20px 0 20px;    }


    .intro { display: block;   width: 100%; overflow: hidden; padding: 0; background-color: #D7EFE7; background-size: cover; background-position: top center; background-repeat: no-repeat;     }
    .bd-office-business-park { background: url('../img/science.jpg'); background-size: cover;    }
    .intro .overlay { background: #a3a3a398;    }
    .intro p { color: rgba(255, 255, 255, 0.9); font-size: 20px; letter-spacing: 8px; line-height: 28px; font-weight: 200; margin-top: 20px; word-break:  normal;    }
    .intro h2 { color: #ffffff; font-size: 60px; line-height: 60px; font-weight: 700; letter-spacing: -1px; text-transform: uppercase; margin-top: 30px;    }

    header .intro-text { padding-top: 260px; text-align: center; margin-bottom: 190px;    }
    header .sub-text { padding-top: 100px; text-align: center; margin-bottom: 120px;    }
    @media (max-width: 768px) {
       header .sub-text { padding-top: 70px; text-align: center; margin-bottom: 70px;    }
    }
    section.paragraph > div:first-of-type{ padding-top: 60px;    }
    
    #about { padding-bottom: 60px; background: #f6f6f6;    }
    #about .row > [class*="col-"] { display: flex; flex-direction: column;    }
    #about .about-text { margin-bottom: 20px;    }
    #about .about-title {    display: flex;    justify-content: space-between;}
    #about .about-desc{ margin-bottom: 20px; flex: 1;    }
    #about .about-media {     margin-top: auto;    }
    #about .btn, #contact .btn {background-color: #00887a; color: #fff; height: auto;}

    #about h2 { color: #0c0c0c; font-weight: 700; font-size:  2em;    }
    #about h3 { color: #0c0c0c; font-family: 'Open Sans','A2z', sans-serif; font-size: 22px; font-weight: 500; padding: 0; margin: 20px 0 0 0;    }
    #about hr { margin: 1rem 0;    }
    #about p { font-family: 'Open Sans','A2z', sans-serif; color: #333; font-weight: 400; line-height: 24px; margin-top: 18px;    }
    #about .about-media img { position: relative; display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #D7EFE7;    }
    
    #certifications { padding-bottom: 60px; background: #D7EFE7;    }
    #certifications .section-title { margin-bottom: 30px;    }
    #certifications h2 { color: #0c0c0c; font-weight: 600; font-size: 2.5em;    }
    #certifications hr { background: rgba(255,255,255,1); margin-bottom: 30px;    }
    #certifications p { color: #0c0c0c; font-family: 'Open Sans','A2z', sans-serif;    }
    #certifications p.sub1 { font-size: 20px; font-weight: 200; margin: 0; padding: 0;    }
    
    #certifications .certification-desc { width: 90%; padding: 5px; border-radius: 15px; background: #f6f6f6;    }
    #certifications p { color: #0c0c0c; font-family: 'Open Sans','A2z', sans-serif; }
    #certifications p.sub2 { font-size: 22px; font-weight: 500; padding: 0; margin: 0;    }
    #certifications p.sub3 { font-size: 15px; font-weight: 300; line-height: 20px; word-break: auto-phrase;     /* margin-top: 7px;*/    }
    
  

    #history { display: block; width: 100%; padding-bottom: 60px; background: #f6f6f6;  }
    #history .section-title {margin-bottom: 70px;   }
    #history h2 {color: #0c0c0c; font-weight: 600; margin-bottom: 10px; font-size: 3em; text-align: center;    }

    /* .timeline-wrapper {  overflow-x: auto;  padding: 2rem 0;    scrollbar-width: none;   -ms-overflow-style: none; }
    .timeline-wrapper::-webkit-scrollbar {  display: none;   }
    .date .year {  color: #00887a;}
    .timeline-card {   width: 280px;  min-height: 220px;  }

    .events {  list-style: none;  padding: 0;  margin: 0;}
    .event-item {  position: relative;  padding-left: 0.75rem;  margin-bottom: 0.5rem;  font-size: 0.875rem;  line-height: 1.5;  word-break: keep-all;  overflow-wrap: break-word;}
    .event-item::before {  content: "•";  position: absolute;  left: 0; color: #00887a; }
    @media (max-width: 768px) {
      .timeline-card {    width: 240px;  }
      .events {    max-height: 100px;  }
    }
    .timeline-card:hover {  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.12); } */

    .timeline-wrapper {      overflow-x: auto;      overflow-y: visible;      overscroll-behavior-x: contain;      overscroll-behavior-y: auto;    }
    .timeline-horizontal {  position: relative; gap: 3rem;  padding-bottom: 1rem;}
    .timeline-item {  position: relative;  min-width: 260px;  padding-top: 2rem;}

    .timeline-item::before {  content: "";  position: absolute;  top: 50px;  left: -3rem;  width: calc(100% + 3rem);  height: 3px;  background: #00887a;  z-index: 0;}
  
    .date {  position: relative;  z-index: 1;  display: inline-flex;  align-items: center;  gap: 0.5rem;  background: #fff;  padding: 0.5rem 0.75rem;  border-radius: 20px;  border: 3px solid #00887a;  margin-bottom: 1rem;}
    .year {  font-weight: 700;  color: #00887a;  font-size: 1.1rem;}
    .month {  background: #00887a;  color: #fff;  padding: 0.15rem 0.5rem;  border-radius: 10px;  font-size: 0.85rem;}

    .events li {  font-size: 0.9rem;  line-height: 1.6;  position: relative;  padding-left: 1rem;  margin-bottom: 0.4rem; word-break: auto-phrase; }
    .events li::before {  content: "•";  position: absolute;  left: 0;  color: #00887a;}

    .timeline-wrapper::-webkit-scrollbar {  height: 6px;}
    .timeline-wrapper::-webkit-scrollbar-thumb {  background: #00887a;  border-radius: 3px;}

    #notice { padding-bottom: 60px; background: #fff;    }
    #notice .section-title { margin-bottom: 70px; }
    #notice .section-title h2 { margin: 0 0 20px 0; font-weight: 600; font-size: 3em; color: #0c0c0c; }
    #notice .section-title h3 { margin: 0 0 20px 0; font-weight: 600; font-size: 1.5em; color: #0c0c0c; }
    

  /*------------news-------------*/
    .news-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-bottom: 60px; }
    .hero-main { text-decoration: none; color: inherit; }
    .hero-main img {border: 1px solid #D7EFE7; width: 100%; height: 350px; object-fit: cover; border-radius: 20px; margin-bottom: 20px; transition: 0.3s; }
    .no_image {object-fit: none !important; }
    .hero-main:hover img { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
    .hero-main h2 { font-size: 2em; font-weight: 900; line-height: 1.3; margin-bottom: 15px; letter-spacing: -1px; }
    .hero-main p { font-size: 18px; color:#0c0c0c; line-height: 1.8; }

    .hero-side { display: flex; flex-direction: column; }
    .side-header { font-size: 2em; background-color: #D7EFE7;  font-weight: 700; color: #00887a; margin-bottom: 10px; letter-spacing: 1px; }
    .side-item { padding: 18px 0;  border-bottom: 1px dashed #D7EFE7; text-decoration: none; color: inherit; }
    .side-item:last-child { border-bottom: none; }
    .side-item h4 {  color:#0c0c0c;  font-weight: 600; line-height: 1.4; margin-bottom: 6px; transition: 0.2s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .side-item:hover h4 { color: #00887a; }
    .side-item p { color:#0c0c0c; line-height: 1.5; margin: 0; }

    @media (max-width: 1080px) {
      .news-hero  {
         grid-template-columns: 1fr;
      }
    }
    
  /*-----------news end-----------*/

    #contact { padding-bottom: 60px; background: #D7EFE7; }
    #contact h2 { color: #0c0c0c; font-weight: 600; padding: 0 0 10px 0; font-size: 3em;    }
    #contact .contact-info { width:auto; display: flex; align-items: center; gap: 20px;    }
    .contact-row{     width: 100%; padding: 20px; text-align: -webkit-center; flex:1; border-radius: 20px;    }
    @media (max-width: 1080px) { #contact .contact-info { flex-direction: column; }    }

    /* 섹션 타이틀 */
    #contact .section-title { color: #0c0c0c; font-weight: 600; padding-bottom: 10px; letter-spacing: 0.15em; }
    /* dl 정렬 */
    #contact .contact-item { display: grid; grid-template-columns: 160px 1fr; row-gap: 12px; margin: 0 0 40px; padding: 0;    }
    /* dt / dd 기본 */
    #contact .contact-item dt { font-weight: 600; font-size: 1.2em; color: #0c0c0c; }
    #contact .contact-item dd { margin: 0; font-size: 1em; line-height: 1.9; color: #0c0c0c; text-align: left; }

    .map-wrap {  position: relative;  width: 100%;  padding-bottom: 56.25%;  height: 60vh;  overflow: hidden;}
    .map-wrap iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  border: 0;}



/* ----------- 파티클 -----------*/
/* ---- particles.js container ---- */
#particles-js{
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;   /* 자식의 absolute 기준 */
  width: 100%;
  height: 100%;
}

#particles-js canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;           /* 맨 뒤로 */
}

#particles-js .container {
  position: relative;
  z-index: 0;           /* 캔버스 위로 */
}


/* ----------- 파티클 -------------*/



/*---------slider----*/
#post-slider {
  width:70%;
  margin:10px auto;
  position:relative;
  padding: 15px 0px;;
  background-color: white;
  border-radius: 20px;
  display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#post-slider:hover  { transform: translateY(-10px); box-shadow: 0 10px 20px #00887a80;}
.gallery-img-content{  margin-bottom: 10px;  border-radius: 10px;  border: 1px solid #c6c6c6;}

.no-image{ border: 0; width: 210px;height: 300px; background:#fff url(../img/CELLASTER_CI_s_logo.png) center center no-repeat;background-size:  200px 200px;}
@media (max-width: 768px) {
  .swiper-button-prev,  .swiper-button-next {    display: none;  }
}
/*---------slider----*/

#footer {  background: #00887a;  padding: 20px 0 10px 0;}
#footer p {  color: #fff;  font-size: 13px;}

/*--------------pipeline--------------*/
#pipeline .overview-card {  background-color: #D7EFE7;  border-radius: 14px;  padding: 1.6rem 1.8rem;}

#pipeline .overview-subtitle {  font-size: 1.2rem;  font-weight: 600;  color: #00887a;  margin-bottom: 1rem;}
#pipeline .overview-list {  padding-left: 1.2rem;  margin-bottom: 0;}
#pipeline .overview-list li {  margin-bottom: 0.8rem;  line-height: 1.7;}

#pipeline .publication-table {  border: 1px solid #e5e5e5;}
#pipeline .publication-table thead th {  background-color: #f2f7f6;  font-weight: 600;}
#pipeline .publication-table th {  width: 15%;  white-space: nowrap;}
#pipeline .publication-table a {  color: #00887a;  text-decoration: none;}
#pipeline .publication-table a:hover {  text-decoration: underline;}

#pipeline .overview-key-message {  margin-top: 2rem;  padding: 1.4rem 1.6rem;  border-left: 4px solid #00887a; background-color: #f8fdfc;}
#pipeline .overview-key-message strong {  display: block;  color: #00887a;  margin-bottom: 0.4rem;}
#pipeline .overview-key-message p {  margin: 0;  line-height: 1.7;}

#pipeline .section-title {  font-size: 1.8rem;  font-weight: 600;  margin-bottom: 1.5rem;  color: #00887a;}
#pipeline .tech-accordion .accordion-item {  border: none;  margin-bottom: 12px;  border-radius: 8px;  overflow: hidden;  background-color: #fff;}

#pipeline .tech-accordion .accordion-button {  background-color: #D7EFE7;  color: #004f48;  font-weight: 500;  padding: 1.2rem 1.4rem;  box-shadow: none;}
#pipeline .tech-accordion .accordion-button:not(.collapsed) {  background-color: #00887a;  color: #fff;}
#pipeline .tech-accordion .accordion-button::after {  filter: brightness(0) invert(1);}
#pipeline .tech-accordion .accordion-body {  padding: 1.4rem;  line-height: 1.7;  background-color: #fff;}
#pipeline .accordion-collapse {  transition: height 0.4s ease;}

#pipeline .sub-paragraph {  margin-top: 1rem;  padding-left: 1rem;  border-left: 3px solid #D7EFE7;}
#pipeline .sub-paragraph h6 {  font-weight: 600;  color: #00887a;  margin-bottom: 0.5rem;}

#pipeline .key-message {  margin-top: 2rem;  padding: 1.2rem 1.5rem;  border-left: 4px solid #00887a;  background: #f8fdfc;}

#pipeline .sub-title {  margin-top: 1.2rem;  font-weight: 600;  color: #00887a;}
#pipeline .research-list {  padding-left: 1.2rem;}
#pipeline .research-list li {  margin-bottom: 1rem;}



#pipeline .cell-line{  display:grid;  grid-template-columns:repeat(3,1fr);  gap:30px;}
#pipeline .cell-line2{  display:grid;  grid-template-columns:repeat(2,1fr);  gap:30px;}
@media (max-width:768px){
  #pipeline .cell-line,#pipeline .cell-line2{  grid-template-columns:1fr;}
}

/*--------------pipeline--------------*/

/*--------------company--------------*/
#company :root {  --main: #00887a;  --sub: #D7EFE7;}
#company .executive-section {  background-color: #fff;}
#company .section-title {  font-weight: 700;  color: var(--main);}

/* Card */
#company .executive-card {  height: 100%;  background: #fff;  border-radius: 14px;  overflow: hidden;  box-shadow: 0 6px 18px rgba(0,0,0,0.06);  transition: all 0.3s ease; }
#company .executive-card:hover {  transform: translateY(-6px);  box-shadow: 0 12px 28px rgba(0,136,122,0.2);}

#company .executive-card .photo {  background: var(--sub);  text-align: center;  padding: 24px;}
#company .executive-card .photo img {  width: 120px;  height: 120px;  object-fit: cover;  border-radius: 50%;  border: 4px solid #fff;}

#company .executive-card .info {  padding: 20px;  text-align: center;}
#company .executive-card .name {  font-weight: 700;  margin-bottom: 4px;}
#company .executive-card .position {  color: var(--main);  font-size: 0.9rem;  font-weight: 600;  margin-bottom: 10px;}
#company .executive-card .desc {  font-size: 0.85rem;  color: #555;  line-height: 1.5;     text-align: left;}

/* 카드 느낌 */
#company .advisor-card {  border: none;  border-radius: 14px;  margin-bottom: 16px;  overflow: hidden;  box-shadow: 0 6px 18px rgba(0,0,0,0.06);}

#company .advisor-header {  background: #fff;  padding: 20px;  align-items: stretch;}
#company .accordion-button:not(.collapsed) {  background: #fff;  box-shadow: none;}
#company .advisor-basic {  display: flex;  gap: 16px;  width: 100%;}
#company .advisor-basic img {  width: 90px;  height: 90px;  border-radius: 50%;  object-fit: cover;  background: var(--sub);}
#company .advisor-basic .text h5 {  font-weight: 700;  margin-bottom: 4px;}
#company .advisor-basic .position {  font-size: 0.85rem;  color: var(--main);  font-weight: 600;  margin-bottom: 6px;}
#company .advisor-basic .summary {  font-size: 0.85rem;  color: #555;  margin: 0;}
#company .accordion-body {  padding: 24px;  font-size: 0.9rem;  line-height: 1.6;}
/* ===== Sub Accordion ===== */

#company .sub-accordion {  font-size: 0.9rem;  font-weight: 600;  color: #004f48;  background: #f5fbfa;}
#company .sub-accordion:not(.collapsed) {  color: var(--main);}
#company .accordion-flush .accordion-item {  border: none;  border-bottom: 1px solid #e2f1ee;}
#company .pub-list {  padding-left: 1rem;}
#company .pub-list li {  margin-bottom: 1rem;  font-size: 0.85rem;}
#company #advisor1 th {padding-right: 0.8em;}
#company .accordion-collapse {  transition: height 0.4s ease;}

@media (max-width: 576px) {
  #company .advisor-basic {    flex-direction: column;    align-items: center;    text-align: center;  }
  #company .executive-card .desc {    font-size: 0.8rem;  }
}
/* ===== Partners ===== */

#company .partner-logo {  display: flex;  align-items: center;  justify-content: center;  padding: 28px;  background: #fff;  border-radius: 12px;  transition: all 0.3s ease;}
#company .partner-logo img {  max-width: 200px;  max-height: 80px;  filter: grayscale(100%);  opacity: 0.8;  transition: all 0.3s ease;}
#company .partner-logo:hover img {  filter: grayscale(0%);  opacity: 1;}
#company .partner-logo:hover {  box-shadow: 0 8px 24px rgba(0,136,122,0.15);}

/* ===== 사업분야 영역 ===== */
#company .business-area{ padding:100px 0; background:#f6f6f6;   position:relative; overflow:hidden; }
#company .ba-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "core core" "left right"; gap:40px; max-width:1100px; margin:0 auto; }
#company .ba-card{ position:relative; z-index:1; background:#fff; border-radius:18px; padding:42px 34px; box-shadow:0 15px 40px rgba(0,0,0,0.06); transition:all .35s ease; border-top:4px solid #00887a;  overflow:hidden;} 
#company .ba-card:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,0.1); }  
#company .ba-card h3{ color:#00887a; font-weight:700; margin-bottom:22px; font-size:1.5rem; } 
#company .ba-card ul{ padding-left:20px; margin:0; }
#company .ba-card ul li{ margin-bottom:10px; line-height:1.6; color:#555; }
#company .ba-card.core{ grid-area:core; text-align:center; background:linear-gradient( 180deg, rgba(0,136,122,0.95), rgba(0,136,122,0.75) ); color:#fff; border-top:none; padding:60px 40px; } 
#company .ba-card.core h3{ color:#fff; font-size:1.8rem;  margin-bottom:16px; }
#company .ba-card.core p{ font-size:1.05rem; opacity:.95; line-height:1.7; } 
#company .ba-card.left{ grid-area:left; } 
#company .ba-card.right{ grid-area:right; } 
#company .business-area::before{  content:"";  position:absolute;  left:-60px;  bottom:-20px;  width:700px;  height:420px;  background:url("../img/back/back1.svg") no-repeat;  background-size:contain;  opacity:.4; }
@media (max-width:991px){
  #company .ba-grid{ grid-template-columns:1fr 1fr; grid-template-areas: "core core" "left right"; gap:30px; }
  #company .ba-card{ padding:36px 28px;} 
  #company .ba-card.core{ padding:50px 30px; }
}
@media (max-width:576px){
  #company .business-area{ padding:70px 0; }
  #company .ba-grid{ grid-template-columns:1fr; grid-template-areas: "core" "left" "right"; gap:25px; }
  #company .ba-card{ padding:32px 24px; }
  #company .ba-card.core{ padding:40px 25px; } 
  #company .ba-card h3{  font-size:1.3rem; }
}


/*--------------company--------------*/

:root {    --bs-body-font-family: 'A2z', sans-serif;}
body {    font-family: 'A2z', sans-serif;}