@charset "UTF-8";
main { padding-top: var(--size-4-8); }

@media (max-width: 1200px) { main { padding-top: var(--size-4-4); } }

main h3 { font-size: var(--font-l) !important; }

section .section__header { gap: var(--size-4-6); display: flex; align-items: end; justify-content: space-between; }

section .section__header h3 { border-left: 3px solid var(--color-primary); padding-left: var(--size-4-2); }

@media (max-width: 768px) { section .section__header { flex-direction: column; align-items: start; } }

/**======================================================================== ⭐ About ========================================================================**/
@media (max-width: 768px) { #home-about .section__header { margin-bottom: var(--size-4-8); } }

/**======================================================================== ⭐ Banner ========================================================================**/
#home-banner .banner { padding: var(--size-4-6) var(--size-4-8); --banner-color: var(--color-primary) !important; --banner-border: var(--color-primary) !important; --banner-border-style: var(--border-style) !important; --banner-bg: var(--color-primary-alt) !important; }

#home-banner .banner .banner__header { font-size: var(--font-m); }

#home-banner .banner .banner__header::before { content: "\\\\"; color: var(--banner-color); font-size: 1.2em; }

#home-banner .banner .banner__header::after { content: "//"; color: var(--banner-color); font-size: 1.2em; }

#home-banner .banner .banner__infobox { display: flex; align-items: center; gap: var(--size-4-2); flex-wrap: wrap; font-size: var(--font-xs); margin-top: var(--size-4-2); }

#home-banner .banner .banner__infobox li:first-child { margin-right: auto; color: var(--banner-color); }

@media (max-width: 768px) { #home-banner .banner .banner__infobox li:not(:first-child) { display: none; } }

/**======================================================================== ⭐ Service ========================================================================**/
#home-service ul.home-service__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4-4); }

#home-service ul.home-service__cards .card__title { margin-bottom: var(--size-4-3); }

@media (max-width: 1200px) { #home-service ul.home-service__cards { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { #home-service ul.home-service__cards { grid-template-columns: repeat(1, 1fr); } #home-service ul.home-service__cards .card__title { margin: 0; } #home-service ul.home-service__cards .card__desc { display: none; } }

/**======================================================================== ⭐ Hybrid ========================================================================**/
#home-hybrid .home-hybrid__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--size-4-4); }

#home-hybrid .home-hybrid__list .card__body ul { margin-bottom: var(--size-4-1); }

@media (max-width: 468px) { #home-hybrid .home-hybrid__list { grid-template-columns: repeat(1, 1fr); } }

/**======================================================================== ⭐Article ========================================================================**/
#home-article .article__group li.article__item:not(:last-child) { border-bottom: var(--divider-strong); }

#home-article .article__group li.article__item a.article__in { display: flex; align-items: center; font-size: var(--font-m); padding-top: var(--size-4-4); padding-bottom: var(--size-4-4); gap: var(--size-4-4); }

@media (max-width: 768px) { #home-article .article__group li.article__item a.article__in { font-size: var(--font-xs) !important; } }

#home-article .article__group li.article__item a.article__in .article__item-date { font-size: var(--font-xs); }

#home-article .article__group li.article__item a.article__in .article__item-type { display: flex; align-items: center; text-transform: uppercase; border: var(--divider); border-radius: var(--radius-m); font-size: 13px; padding: 0 var(--size-4-2); text-align: center; }

#home-article .article__group li.article__item a.article__in .article__item-title { text-decoration: underline; }

/**======================================================================== ⭐ Area ========================================================================**/
#home-area .section__body p span { color: var(--color-primary); background-color: var(--color-primary-alt); border-radius: var(--radius-s); border: 2px solid var(--color-primary); padding: var(--size-4-1) var(--size-4-2); margin: 0 var(--size-4-1); white-space: nowrap; }