@media screen and (min-width: 360px) {
   .row-members-item {
      margin-right: -7px;
      margin-left: -7px;
   }
   .col-members-item {
      padding-right: 7px;
      padding-left: 7px;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
      -ms-flex: 1 1 50%;
      flex: 1 1 50%;
      margin-bottom: 15px;
   }
}
@media screen and (min-width: 360px) {

}
@media screen and (min-width: 480px) {
   /* .generation-table .member-generation-nameinfo .nameinfo-item {
      white-space: nowrap;
      -ms-flex: 1 0 250px;
      flex: 1 0 250px;
   }
   .generation-table .member-generation-nameinfo .levelinfo-item {
      -ms-flex: 1 0 230px;
      flex: 1 0 230px;
      white-space: nowrap;
   }
   .generation-table .member-generation-nameinfo .genderinfo-item {
      -ms-flex: 0 0 65px;
      flex: 0 0 65px;
      white-space: nowrap;
   } */
   /* .generation-table .member-generation-nameinfo .statusinfo-item {
      -ms-flex: 1 0 100px;
      flex: 1 0 100px;
      white-space: nowrap;
   } */
}
@media screen and (min-width: 568px) {
   .home-news-item-wrapper {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow: auto;
      scrollbar-width: none; /* Firefox */
   }
   .news-item-wrapper {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow: auto;
      scrollbar-width: none; /* Firefox */
   }
   .library-item-wrapper {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow: auto;
      scrollbar-width: none; /* Firefox */
   }
}
@media screen and (min-width: 550px) {
   .generation-table .member-generation-nameinfo .nameinfo-item {
      white-space: nowrap;
      -ms-flex: 1 0 100%;
      flex: 1 0 100%;
   }
   .generation-table .member-generation-nameinfo .levelinfo-item {
      -ms-flex: 1 0 calc(50% - 5px);
      flex: 1 0 calc(50% - 5px);
      white-space: nowrap;
   }
   .generation-table .member-generation-nameinfo .genderinfo-item {
      -ms-flex: 0 0 65px;
      flex: 0 0 65px;
      white-space: nowrap;
   }
   /* .generation-table .member-generation-nameinfo .statusinfo-item {
      -ms-flex: 1 0 100px;
      flex: 1 0 100px;
      white-space: nowrap;
   } */
}

@media screen and (min-width: 768px) {
   .bg-breadcrumb {
      border-radius: clamp(0.625rem, 3vw - 1.25rem, 0.938rem);
      overflow: hidden;
   }
    .member2-wrapper .col-mmember-relationship {
      width: calc(50% - 10px);
   }
   .generation-table .member-generation-nameinfo .nameinfo-item {
      white-space: nowrap;
      -ms-flex: 1 0 250px;
      flex: 1 0 250px;
   }
   .generation-table .member-generation-nameinfo .levelinfo-item {
      -ms-flex: 1 0 230px;
      flex: 1 0 230px;
      white-space: nowrap;
   }
   .generation-table .member-generation-nameinfo .genderinfo-item {
      -ms-flex: 1 0 65px;
      flex: 1 0 65px;
      white-space: nowrap;
   }
   /* .generation-table .member-generation-nameinfo .statusinfo-item {
      -ms-flex: 1 0 100px;
      flex: 1 0 100px;
      white-space: nowrap;
   } */
   .legend-element-container {
      display: block;
   }
   .tab-element-container {
      display: none;
   }
}
@media screen and (min-width: 860px) {
   /* .row-members-item {
      margin-right: -5px;
      margin-left: -5px;
   } */
   .col-members-item {
      /* padding-right: 5px;
      padding-left: 5px; */
      -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      /* max-width: 25%; */
      /* margin-bottom: 10px; */
   }
}
@media screen and (min-width: 920px) {
   body {
      background-image: url('/frontend/images/bggiapha1-1440.jpg'), url('/frontend/images/bggiapha2.jpg'); 
   }
   .div-height-scale {
      padding-top: 31.25%;
   }
   #nav-list ul>li:first-child {
      margin-left: 0;
      /* margin-right: 5px; */
   }
   #nav-list ul>li:not(:first-child) {
      margin-left: 40px;
      margin-right: 40px;
   }
   #nav-list>ul>li:first-child {
      height: 45px;
      width: 45px;
      /* overflow: hidden; */
   }
   #nav-list>ul>li:first-child>a {
      font-size: 43px;
   }
   #nav-list>ul>li:not(:first-child)>a {
      display: flex;
      align-items: center;
      height: 45px;
      color: var(--color-white);
      white-space: nowrap;
      position: relative;
      background-image: url('/frontend/icons/menu.png'); 
      background-position: -40px 0;
      background-size: 313px 45px;
   }
   #nav-list>ul>li:not(:first-child)>a:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 0;
      height: 45px;
      width: 40px;
      background-image: url('/frontend/icons/menu.png'); 
      background-size: 313px 45px;
   }
   #nav-list>ul>li:not(:first-child)>a:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 0;
      height: 45px;
      width: 40px;
      background-image: url('/frontend/icons/menu.png'); 
      background-position: 100% 0;
      background-size: 313px 45px;
   }
   .about-home-wrapper {
      padding-left: clamp(2.5rem, 4vw + 1rem, 4.375rem);
      padding-right: clamp(2.5rem, 4vw + 1rem, 4.375rem);
      padding-bottom: clamp(1.563rem, 2vw + 1rem, 2.5rem);
      border-bottom: 5px solid var(--main-color-2);
   }
   .about-home-container {
      flex-wrap: nowrap;
      gap: 2rem;
   }
   .about-home-container .heading-col {
      width: fit-content;
      padding-top: 2rem;
   }
   .about-home-container .heading-col {
      display: block;
   }
   .about-home-container .content-col {
      flex-grow: 1;
   }
   .large-screen.heading-col-title {
      display: flex;
   }
   .small-screen.heading-col-title {
      display: none;
   }
   .heading-col {
      width: fit-content;
   }
   .content-col {
      padding-top: 2rem;
   }
   .heading-col-title {
      padding-bottom: 2rem;
   }
   .heading-col-title span {
      line-height: 1.3;
      width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      font-size: clamp(2.75rem, 3vw + 1rem, 3.375rem);
      background: -webkit-gradient(linear,left top,left bottom,from(#f9bc60),color-stop(20.31%,#ffca78),color-stop(53.12%,#fed9b7),color-stop(76.04%,#fac96a),to(#e0ab45));
      background: linear-gradient(180deg,#f9bc60,#ffca78 20.31%,#fed9b7 53.12%,#fac96a 76.04%,#e0ab45);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
   }
   .home-about-content .section-title {
      display: none;
   }
}
@media screen and (min-width: 1024px) {
   .legend-item.legend-column {
      -ms-flex: 1 0 500px;
      flex: 1 0 500px;
   }

}
@media screen and (min-width: 1280px) {
   .legend-item.filter-sidebar {
      -ms-flex: 1 0 100%;
      flex: 1 0 100%;
   }
   .news-item-wrapper {
      flex-wrap: wrap;
   }
   .news-item {
      -ms-flex: 1 0 100%;
      flex: 1 0 100%;
   }
   .page-wrapper {
      display: flex;
      flex-wrap: nowrap;
      gap: 2rem;
   }
   .page-wrapper .main-column {
      width: calc(100% - 350px);
   }
   .page-wrapper .sidebar-column {
      width: 350px;
   }
   .detail-news-section {
      padding-left: 1rem;
      padding-right: 1rem;
   }
}
@media screen and (min-width: 1440px) {
   body {
      background-image: url('/frontend/images/bggiapha1.jpg'), url('/frontend/images/bggiapha2.jpg'); 
   }
   .caudoi-container {
      display: block;
   }
   .div-height-scale {
      padding-top: 23.4375%;
   }
   .sticked-nav {
      padding: 15px 0 10px;
    }
   #nav-list ul>li:first-child {
      margin-left: 0;
      /* margin-right: 5px; */
   }
   #nav-list ul>li:not(:first-child) {
      margin-left: 42px;
      margin-right: 42px;
   }
   #nav-list>ul>li:first-child {
      display: flex;
      height: 50px;
      width: 50px;
      flex-direction: row;
      align-items: center;
      /* overflow: hidden; */
   }
   #nav-list>ul>li:first-child>a {
      color: #185b39;
      font-size: 48px;
      line-height: 1;
      font-weight: 200;
   }
   #nav-list>ul>li:not(:first-child)>a {
      display: flex;
      align-items: center;
      height: 50px;
      color: var(--color-white);
      white-space: nowrap;
      position: relative;
      background-image: url('/frontend/icons/menu.png'); 
      background-position: -42px 0;
      background-size: 248px 50px;
   }
   #nav-list>ul>li:not(:first-child)>a:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 0;
      height: 50px;
      width: 42px;
      background-image: url('/frontend/icons/menu.png'); 
      background-size: 347px 50px;
   }
   #nav-list>ul>li:not(:first-child)>a:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 0;
      height: 50px;
      width: 42px;
      background-image: url('/frontend/icons/menu.png'); 
      background-position: 100% 0;
      background-size: 347px 50px;
   }
}