/* CSS Document */

:root {
  --txt-h1: 60px;
  --txt-h2: 45px;
  --txt-h3: 35px;
  --txt-h4: 30px;
  --txt-h5: 20px;
  --txt-detail: 15px;
}
@media (max-width: 1600px) {
  :root {
    --txt-h1: 46px;
    --txt-h2: 40px;
  }
}
@media (max-width: 1199px) {
  :root {
    --txt-h1: 34px;
    --txt-h2: 34px;
    --txt-h3: 30px;
    --txt-h4: 26px;
  }
}
@media (max-width: 991px) {
  :root {
    --txt-h1: 28px;
    --txt-h2: 28px;
    --txt-h3: 24px;
    --txt-h4: 22px;
    --txt-h5: 18px;
  }
}


/***********************************************************/
/************************* article *************************/

.divArticle-header{ display: flex; align-items: center; }
.divArticle-header--text{ width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.divArticle-header--img{ width: 50%; }
.divArticle-header--img img{ object-fit: cover; object-position: center; height: 100%; width: 100%; }

.divArticle-header--detail{ max-width: 600px; width: 90%; }
.divArticle-header--detail h1{ font-size: var(--txt-h1); line-height: 1.3; }

.divArticle-header--center{ max-width: 930px; width: 100%; margin: 0 auto 50px; text-align: center; }
.divArticle-header--center h1{ font-size: var(--txt-h2); line-height: 1.3; }


.divArticle-container{ margin: 80px 0; }

.divArticle-detail{ max-width: 930px; width: 100%; margin: 0 auto; }
.divArticle-detail h1{ font-size: var(--txt-h2); line-height: 1.2; margin-bottom: 40px; }
.divArticle-detail h2{ font-size: var(--txt-h3); line-height: 1.2; margin-bottom: 20px; }
.divArticle-detail h3{ font-size: var(--txt-h3); line-height: 1.2; margin-bottom: 20px; }
.divArticle-detail h4{ font-size: var(--txt-h4); line-height: 1.2; font-weight: 400; margin-bottom: 20px; }
.divArticle-detail h5{ font-size: var(--txt-h5); line-height: 1.2; font-weight: 400; margin-bottom: 10px; }
.divArticle-detail p,
.divArticle-detail li{ font-size: var(--txt-detail); line-height: 1.6; margin-bottom: 5px; }
.divArticle-detail p{ margin-bottom: 40px;}
.divArticle-detail ul{ list-style: disc; }
.divArticle-detail ol{ list-style: decimal; }
.divArticle-detail ul,
.divArticle-detail ol{ padding-left: 20px; margin-bottom: 40px; }
.divArticle-detail figure{ margin-bottom: 40px; }

.divArticle-detail p:last-child,
.divArticle-detail ul:last-child,
.divArticle-detail ol:last-child{ margin-bottom: 0; }


.article-share{ font-family: var(--font-Bebas_Neue); font-size: 16px; display: flex; align-items: center; gap: 20px; }
.article-share img{ height: 20px; margin-right: 5px; }
.article-share a:hover img{ filter: var(--filter-primary);}


@media (max-width: 767px) {

  .divArticle-header{ flex-direction: column-reverse; }
  .divArticle-header--text,
  .divArticle-header--img{ width: 100%; }
  .divArticle-header--img{ margin-bottom: 30px; }
  .divArticle-header--detail{ width: 100%; padding: 0 15px; }

  .divArticle-container{ margin: 50px 0; }

}


/***********************************************************/
/***********************************************************/

ul.article-list2column{   
  display: flex;
  list-style: disc;
  flex-flow: row wrap; 
}
ul.article-list2column li{ width: 50%; padding-right: 25px; }
ul.article-list2column li::marker{ color: var(--primary); }




.list_info--download .list_info-row{ align-items: center; }
.list_info--download .list_info-left{ width: calc(100% - 180px); }
.list_info--download .list_info-right{ width: 180px; text-align: right; }


@media (max-width: 576px) {

  ul.article-list2column li{ width: 100%; padding-right: 0; }

}



.divProgram-detail-imgCover{ max-width: 570px; width: 90%; }


.article--header-flex{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.article--header-flex .news--date{ margin-bottom: 0; }



@media (max-width: 767px) {

  .divProgram-detail-imgCover{ width: 100%; margin-bottom: 30px; }

}



/***********************************************************/
/***********************************************************/

.gallery--detail{ display: flex; flex-flow: row wrap; margin-left: -10px; margin-right: -10px; margin-top: 50px; }
.gallery--item{ width: 25%; padding: 10px; }
.gallery--item a { display: block; aspect-ratio: 3/2; overflow: hidden; }
.gallery--item a img{ object-fit: cover; object-position: center; height: 100%; width: 100%; transform: scale(1); transition: all 0.5s ease; }
.gallery--item a:hover img{ transform: scale(1.1); transition: all 0.5s ease;  }


@media (max-width: 767px) {

  .gallery--item{ width: 33.33333%; }

}
@media (max-width: 576px) {

  .gallery--item{ width: 50%; }

}