#home_hero {
    height: 100vh;
    background: #7ec8c5;
}
#home_hero .widewidth {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
#home_hero .widewidth {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#home_hero .content {
    width: 50%;
    text-align: left;
    padding: 3%;
}
#home_hero .content h1 {
    font-size: 56px;
    margin-bottom: 20px;
    font-weight: normal;
    line-height: 1.7;
}
#home_hero .content .subcopy {
    font-size: 16px;
    line-height: 1.5;
}
#home_hero .hero_img {
    width: 50%;
    padding: 5%;
    display: flex;
    align-items: center;
}
#home_hero .hero_img video {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}


#home_partners {
    background: #F1F7F6;
    padding: 80px 0;
    text-align: center;
}

/* Partner Carousel */
.partner-track {
    display: flex;
    gap: 64px;
    width: max-content;
    animation: partner-scroll var(--partner-scroll-dur) linear infinite;
}
.partner-track:hover { animation-play-state: paused; }
@keyframes partner-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--partner-scroll-dist)); }
}
.partner-logo-item {
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.partner-logo-item img {
    max-width: 150px;
    height: 32px;
    width: auto;
    object-fit: contain;
}


#home_products {
    padding: 80px 1%;
    text-align: center;
}

#home_products .product_list {
    display: flex;
    justify-content: center;
    gap:2%;
    flex-wrap: wrap;
}
#home_products .product_item {
    width:100%;
    max-width: 479px;
    padding: 35px;
    border:1px solid #D6D6D6;
    border-radius: 10px;
    margin-bottom: 30px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
#home_products .product_item:hover {
    box-shadow: 0 4px 24px rgba(150, 150, 150, 0.18), 0 1px 6px rgba(107, 107, 107, 0.1);
    transform: translateY(-4px) scale(1.01);
}
#home_products .product_item:nth-child(1):hover {
    border-color: #3a3a3a;
    background: #2f2f2f;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 6px rgba(0, 0, 0, 0.15);
    color: #FF8770;
}
#home_products .product_item:nth-child(1):hover h3,
#home_products .product_item:nth-child(1):hover p,
#home_products .product_item:nth-child(1):hover ul li,
#home_products .product_item:nth-child(1):hover ul li::before {
    color: #FF8770;
}
#home_products .product_item:nth-child(1):hover h3 img {
    filter: invert(65%) sepia(60%) saturate(700%) hue-rotate(315deg) brightness(105%);
    transition: filter 0.35s ease;
}
#home_products .product_item:nth-child(2):hover {
    border-color: #3a3a3a;
    background: #2f2f2f;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 6px rgba(0, 0, 0, 0.15);
    color: #4DD2A7;
}
#home_products .product_item:nth-child(2):hover h3,
#home_products .product_item:nth-child(2):hover p,
#home_products .product_item:nth-child(2):hover ul li,
#home_products .product_item:nth-child(2):hover ul li::before {
    color: #4DD2A7;
}
#home_products .product_item:nth-child(2):hover h3 img {
    filter: invert(70%) sepia(40%) saturate(600%) hue-rotate(115deg) brightness(100%);
    transition: filter 0.35s ease;
}
#home_products .product_item:nth-child(3):hover {
    border-color: #3a3a3a;
    background: #2f2f2f;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 6px rgba(0, 0, 0, 0.15);
    color: #6DD0F8;
}
#home_products .product_item:nth-child(3):hover h3,
#home_products .product_item:nth-child(3):hover p,
#home_products .product_item:nth-child(3):hover ul li,
#home_products .product_item:nth-child(3):hover ul li::before {
    color: #6DD0F8;
}
#home_products .product_item:nth-child(3):hover h3 img {
    filter: invert(75%) sepia(50%) saturate(500%) hue-rotate(175deg) brightness(105%);
    transition: filter 0.35s ease;
}

#home_products .product_item > img {
    width: 100%;
    max-width: 250px;
    margin-bottom: 20px;
}


#home_products .product_item h3 img {
    width: 20px;
    margin-right: 3px;
}
#home_products .product_item p {
    margin-bottom: 16px;
}
#home_products .product_item ul {
    margin-top: 0;
}

#home_products .product_item h3 {
    font-size: 24px;
    margin: 0 auto 10px auto;
}

#home_products .product_item p {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #4F4F4F;
}

#home_products .product_item ul {
    text-align: left;
    padding-left: 0;
    list-style: none;
}
#home_products .product_item ul li {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #4F4F4F;
    padding-bottom: 7px;
    padding-left: 16px;
    position: relative;
}
#home_products .product_item ul li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: #4F4F4F;
}

#home_beyond {
    background: url(/images/bg_beyond_text.jpg);
    background-size: cover;
    background-position: center;
    padding: 80px 1%;
    text-align: center;
}
#home_beyond .home_title, #home_beyond .home_title h1, #home_beyond .home_title h2, #home_beyond .home_title h5 {
    color: #ffffff ;
}
#home_beyond .home_title > img {
    filter: brightness(0) invert(1);
}


#home_beyond .beyond_tag {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
#home_beyond .beyond_tag > div {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 16px;

}
#home_beyond .beyond_tag .material-icons {
    font-size: 20px;
}

#home_beyond .beyond_tag > div:last-child {
    background: #ffffff;
    color: #555454;
}

#home_approach {
    padding: 80px 1%;
    text-align: center;
}

#home_awards {
    padding: 80px 1%;
    text-align: center;
    background: linear-gradient(to bottom, #F2F2F2, #FBFBFB);
}

/* Award Carousel */
.award-track {
    display: flex;
    gap: 80px;
    width: max-content;
    animation: award-scroll var(--award-scroll-dur) linear infinite;
}
.award-track:hover { animation-play-state: paused; }
@keyframes award-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--award-scroll-dist)); }
}
.award-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.award-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.award-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.award-name {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    max-width: 200px;
    line-height: 1.5;
    margin: 0;
}


#home_blog {
    padding: 80px 1%;
    text-align: center;
}
#home_blog .blog_list { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
    text-align: left;
    margin-top: 40px;
}
#home_blog .blog_item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#home_blog .blog_item .blog_item_img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #e8e8e8;
    display: block;
    flex-shrink: 0;
}
#home_blog .blog_item .blog_item_body {
    padding: 22px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}
#home_blog .blog_item h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.45;
    color: #2f2f2f;
    margin: 0 0 10px;
}
#home_blog .blog_item p {
    font-size: 13px;
    line-height: 1.75;
    color: #666;
    margin: 0 0 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#home_contact {
    padding: 80px 1%;
    text-align: center;
    background: #78C7BA;
}
.contact_img {
    width: 100%;
    max-width: 330px;
}


#home_devsecops {
    padding: 80px 1%;
    text-align: center;
}

.container_devsecops {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-top: 40px;
    text-align: left;
}

.devsecops_item {
    background: #fbfbfb;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    padding: 35px;
}

.devsecops_item--large {
    flex: 1.3;
}

.devsecops_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.devsecops_right .devsecops_item {
    flex: 1;
}

.devsecops_icon {
    font-size: 24px;
    flex-shrink: 0;
    color: #4DD2A7;
}



.devsecops_item h3 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.devsecops_item h4 {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #4F4F4f;
    margin: 0 0 16px 0;
}

.devsecops_item > p {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #717171;
}

.devsecops_sublist {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 30px;
}

.devsecops_subitem {
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 13px;
    font-weight: normal;
    color:#717171
}

.devsecops_subitem img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.devsecops_subitem .material-icons {
    font-size: 22px;
    color: #999;
    flex-shrink: 0;
    margin-top: 2px;
}

.devsecops_subitem strong {
    display: block;
    font-weight: normal;
    margin-bottom: 4px;
}

/* =============================================
   홈 모바일 미디어 쿼리 (≤ 768px)
   ============================================= */
@media (max-width: 768px) {
  /* Hero */
  #home_hero {
    height: auto;
    min-height: 100svh;
  }
  #home_hero .widewidth {
    height: auto;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 40px;
    gap: 24px;
  }
  #home_hero .content {
    width: 100%;
    padding: 0 4px;
    text-align: left;
    order: 2;
  }
  #home_hero .content h1 {
    font-size: 36px;
    line-height: 1.4;
  }
  #home_hero .content .subcopy {
    font-size: 14px;
  }
  #home_hero .hero_img {
    width: 100%;
    padding: 0;
    order: 1;
    overflow: hidden;
  }
  #home_hero .hero_img video {
    border-radius: 0;
  }

  /* Partners */
  #home_partners {
    padding: 48px 0;
  }
  .partner-logo-item {
    width: 90px;
  }
  .partner-logo-item img {
    width: 90px;
  }
  .partner-track {
    gap: 32px;
  }

  /* Products */
  #home_products {
    padding: 48px 16px;
  }
  #home_products .product_list {
    flex-direction: column;
    align-items: center;
  }
  #home_products .product_item {
    max-width: 100%;
    padding: 24px;
  }
  /* 모바일: Starfort(2번째)를 Therion(1번째) 앞으로 */
  #home_products .product_item:nth-child(1) { order: 2; }
  #home_products .product_item:nth-child(2) { order: 1; }
  #home_products .product_item:nth-child(3) { order: 3; }

  /* Beyond */
  #home_beyond {
    padding: 48px 16px;
  }
  #home_beyond .beyond_tag {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Approach */
  #home_approach {
    padding: 48px 16px;
  }

  /* DevSecOps */
  #home_devsecops {
    padding: 48px 16px;
  }

  /* Awards */
  #home_awards {
    padding: 48px 16px;
  }
  .award-circle {
    width: 110px;
    height: 110px;
    padding: 16px;
  }
  .award-track {
    gap: 40px;
  }
  .award-name {
    font-size: 11px;
    max-width: 120px;
  }

  /* Blog */
  #home_blog {
    padding: 48px 16px;
  }
  #home_blog .blog_list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }

  /* Contact */
  #home_contact {
    padding: 48px 16px;
  }
  .contact_img {
    max-width: 220px;
  }
}

/* 태블릿 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  #home_hero .content h1 {
    font-size: 42px;
  }
  #home_products .product_item {
    max-width: calc(50% - 16px);
  }
  #home_blog .blog_list {
    grid-template-columns: repeat(2, 1fr);
  }
}