@font-face {
  font-family: "Roboto-Light";
  src: url("../fonts/Roboto-Light.eot");
  src: url("../fonts/Roboto-Light.woff"), url("../fonts/Roboto-Light.ttf"), url("../fonts/Roboto-Light.svg");
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("../fonts/Roboto-Regular.eot");
  src: url("../fonts/Roboto-Regular.woff"), url("../fonts/Roboto-Regular.ttf"), url("../fonts/Roboto-Regular.svg");
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("../fonts/Roboto-Medium.otf");
  src: url("../fonts/Roboto-Medium.woff"), url("../fonts/Roboto-Medium.ttf"), url("../fonts/Roboto-Medium.svg");
}

@font-face {
  font-family: "Roboto-Black";
  src: url("../fonts/Roboto-Black.eot");
  src: url("../fonts/Roboto-Black.woff"), url("../fonts/Roboto-Black.ttf"), url("../fonts/Roboto-Black.svg");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("../fonts/Roboto-Bold.eot");
  src: url("../fonts/Roboto-Bold.woff"), url("../fonts/Roboto-Bold.ttf"), url("../fonts/Roboto-Bold.svg");
}

body {
  color: #333;
  font-family: Roboto, sans-serif;
}

@media (min-width: 1680px) {
  .container {
    max-width: 1500px;
  }
}

img {
  max-width: 100%;
  display: inline-block;
  border: none;
}

a {
  text-decoration: none;
  color: #002964;
}

a:hover {
  color: #2594D8;
}

.bg-gray {
  background-color: #E3E9F1;
}

.btn:focus,
.form-control:focus,
.navbar-toggler:focus {
  box-shadow: none;
}

.more .bi {
  font-size: 0.75rem;
  margin-left: 0.15rem;
  transition: all 0.35s ease;
}

.more:hover .bi {
  margin-left: 0.25rem;
}

.topbar {
  background-color: #036;
  color: #fff;
  padding: 0.5rem 0;
}

.topbar a {
  color: #fff;
}

@media (min-width: 768px) {
  .topbar .topmain .topcas {
    padding-right: 2rem;
  }
}

.topbar .topmain .search {
  padding: 0 2rem 0 1rem;
  border-left: #fff 1px dotted;
  border-right: #fff 1px dotted;
}

.topbar .topmain .search .btn {
  padding: 0 0.75rem;
  height: 1.5rem;
}

.topbar .topmain .search .form-control {
  line-height: 1;
  height: 1.5rem;
}

.topbar .topmain .langs .btn {
  color: #fff;
  padding-left: 1.75rem;
  padding-right: 0;
  background: url(../images/earth.svg) left no-repeat;
  background-size: 1.15rem;
}

.topbar .topmain .langs .dropdown-menu {
  min-width: 100%;
}

.topbar .topmain .langs a {
  color: #333;
  text-align: center;
}

@media (min-width: 768px) {
  .topbar .topmain .langs {
    padding-left: 2rem;
  }
}

.nav-wrapper {
  padding: 1rem 0;
}

.nav-wrapper .logo {
  max-width: 244px;
}

@media (min-width: 1200px) {
  .nav-wrapper .logo {
    max-width: 320px;
  }
}

@media (min-width: 1400px) {
  .nav-wrapper .logo {
    max-width: 350px;
  }
}

.nav-wrapper .nav-item .nav-link {
  color: #002964;
  font-weight: 500;
}

@media (min-width: 992px) {
  .nav-wrapper .nav-item .nav-link {
    position: relative;
  }

  .nav-wrapper .nav-item .nav-link::before {
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    width: 0;
    left: 1rem;
    bottom: 0;
    background-color: #002964;
    transition: all 0.35s ease;
  }

  .nav-wrapper .nav-item .nav-link:hover::before {
    width: calc(100% - 2rem);
  }
}

@media (min-width: 1400px) {
  .nav-wrapper .nav-item .nav-link {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .nav-wrapper .nav-item .nav-link::before {
    left: 2rem;
  }

  .nav-wrapper .nav-item .nav-link:hover::before {
    width: calc(100% - 4rem);
  }
}

.nav-wrapper .nav-item .dropdown-menu {
  border: none;
}

.nav-wrapper .nav-item .dropdown-menu .dropdown-item {
  padding: 0.5rem 1rem;
}

.nav-wrapper .nav-item .dropdown-menu .dropdown-item:active {
  background-color: #002964;
}

.nav-wrapper .navbar-toggler {
  color: #002964;
}

.nav-wrapper .offcanvas-header img {
  max-width: 270px;
}

.nav-wrapper .navbar-nav .nav-link {
  border-bottom: #E3E9F1 1px solid;
  padding: 0.75rem 1rem;
}

.nav-wrapper .navbar-nav .nav-item ul {
  list-style: none;
}

.nav-wrapper .search-wrapper .input-group {
  background-color: #E3E9F1;
  border-radius: 0.25rem;
  overflow: hidden;
  padding: 5px;
}

.nav-wrapper .search-wrapper .input-group-text {
  background-color: #E3E9F1;
  border: none;
  line-height: 1;
  padding-left: 0.5rem;
}

.nav-wrapper .search-wrapper .form-control {
  border: none;
  line-height: 1.5;
  padding: 0.5rem;
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.nav-wrapper .search-wrapper .btn {
  background-color: #fff;
  border: none;
  line-height: 1;
}

.nav-wrapper .search-wrapper .btn:hover {
  color: #036;
}

.banner .swiper-slide {
  height: auto;
}

.banner .swiper-slide img {
  width: 100%;
  min-height: 230px;
  object-fit: cover;
}

.banner .banner-text {
  padding: 2rem 1rem 2.5rem;
  color: #fff;
  background-color: #003366;
  height: 100%;
}

.banner .banner-text .tit {
  font-size: 1.25rem;
}

.banner .banner-text a {
  color: #002964;
  padding: 0.15rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.9);
  margin-top: 1rem;
  display: inline-block;
}

@media (min-width: 768px) {
  .banner .banner-text {
    height: auto;
    padding: 2rem calc((100% - 750px) / 2 + var(--bs-gutter-x, 0.75rem)) 2.5rem;
  }
}

@media (min-width: 992px) {
  .banner .banner-text {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 75%;
    padding: 2rem calc((100% - 960px) / 2 + var(--bs-gutter-x, 0.75rem)) 2.5rem;
    background-color: rgba(0, 51, 102, 0.8);
  }

  .banner .banner-text .tit {
    font-size: 1.5rem;
  }

  .banner .banner-text a {
    color: #fff;
    background-color: #003366;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    transition: all 0.35s ease;
  }

  .banner .banner-text a:hover {
    background-color: #fff;
    color: #002964;
    box-shadow: 0 0 5px rgba(0, 51, 102, 0.8);
  }
}

@media (min-width: 1200px) {
  .banner .banner-text {
    padding: 2rem calc((100% - 1200px) / 2 + var(--bs-gutter-x, 0.75rem)) 2.5rem;
  }
}

@media (min-width: 1400px) {
  .banner .banner-text {
    padding: 2rem calc((100% - 1400px) / 2 + var(--bs-gutter-x, 0.75rem)) 2.5rem;
  }
}

.banner .swiper-button-next,
.banner .swiper-button-prev {
  color: #333;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
}

.banner .swiper-button-next::after,
.banner .swiper-button-prev::after {
  font-size: 1.125rem;
}

@media (min-width: 768px) {
  .banner .swiper-pagination {
    text-align: left;
    padding-left: calc((100% - 720px) / 2 + var(--bs-gutter-x, 0.75rem));
  }
}

@media (min-width: 992px) {
  .banner .swiper-pagination {
    padding-left: calc((100% - 960px) / 2 + var(--bs-gutter-x, 0.75rem));
  }
}

@media (min-width: 1200px) {
  .banner .swiper-pagination {
    padding-left: calc((100% - 1140px) / 2 + var(--bs-gutter-x, 0.75rem));
  }
}

@media (min-width: 1400px) {
  .banner .swiper-pagination {
    padding-left: calc((100% - 1420px) / 2 + var(--bs-gutter-x, 0.75rem));
  }
}

.banner .swiper-pagination .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.5;
  transition: all 0.35s ease;
}

.banner .swiper-pagination .swiper-pagination-bullet-active {
  width: 1.5rem !important;
  border-radius: 0.5rem;
  background-color: #fff;
  opacity: 1;
}

@media (min-width: 768px) {
  .banner .swiper-button-next {
    right: 1.5rem;
  }

  .banner .swiper-button-prev {
    left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .banner .swiper-button-next {
    right: 2rem;
  }

  .banner .swiper-button-prev {
    left: 2rem;
  }
}

.title {
  text-align: center;
  color: #002964;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

.title span {
  display: inline-flex;
  align-items: center;
}

.title span::before,
.title span::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: #002964;
  margin: 0 1rem;
}

@media (min-width: 768px) {
  .title {
    font-size: 2rem;
  }
}

.vision .vision-wrapper {
  background-image: url(../images/v.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: -100vw;
  position: relative;
}

.vision .vision-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  height: 100%;
  width: 15vw;
  background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0));
}

@media (min-width: 768px) {
  .vision .vision-wrapper {
    background-position: -30vw;
  }
}

@media (min-width: 992px) {
  .vision .vision-wrapper {
    background-position: -20vw;
    padding: 2rem 0;
  }
}

@media (min-width: 1200px) {
  .vision .vision-wrapper {
    background-position: -10vw;
  }

  .vision .vision-wrapper::before {
    width: 5vw;
  }
}

.vision .vision-wrapper .vision-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1;
}

.vision .vision-wrapper .vision-item img {
  width: 3rem;
}

.vision .vision-wrapper .vision-item .item-text {
  padding: 0.5rem 1rem;
  margin-left: 1rem;
  border-left: #2594D8 3px solid;
  position: relative;
  transition: all 0.35s ease;
}

.vision .vision-wrapper .vision-item .item-text::after {
  content: "";
  height: 100%;
  width: 0;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background-color: #2594D8;
  transition: all 0.35s ease;
}

.vision .vision-wrapper .vision-item .item-text:hover {
  color: #fff;
}

.vision .vision-wrapper .vision-item .item-text:hover::after {
  width: 100%;
}

@media (min-width: 768px) {
  .vision .vision-wrapper .vision-item {
    padding: 0.75rem 0;
    padding-left: 2rem;
  }

  .vision .vision-wrapper .vision-item:nth-child(2) {
    padding-left: 8vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(3) {
    padding-left: 10vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(4) {
    padding-left: 8vw;
  }

  .vision .vision-wrapper .vision-item img {
    width: 4rem;
  }

  .vision .vision-wrapper .vision-item .item-text {
    margin-left: 2rem;
  }

  .vision .vision-wrapper .vision-item .item-text::after {
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
  }
}

@media (min-width: 992px) {
  .vision .vision-wrapper .vision-item {
    padding-left: 12vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(2) {
    padding-left: 19vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(3) {
    padding-left: 21vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(4) {
    padding-left: 19vw;
  }

  .vision .vision-wrapper .vision-item img {
    width: 4.25rem;
  }

  .vision .vision-wrapper .vision-item .item-text {
    margin-left: 3rem;
    font-size: 1.25rem;
  }

  .vision .vision-wrapper .vision-item .item-text::after {
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
  }
}

@media (min-width: 1200px) {
  .vision .vision-wrapper .vision-item {
    padding-left: 15vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(2) {
    padding-left: 22vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(3) {
    padding-left: 24vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(4) {
    padding-left: 22vw;
  }
}

@media (min-width: 1400px) {
  .vision .vision-wrapper .vision-item {
    padding-left: 15vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(2) {
    padding-left: 22vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(3) {
    padding-left: 24vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(4) {
    padding-left: 22vw;
  }

  .vision .vision-wrapper .vision-item .item-text {
    font-size: 1.5rem;
    margin-left: 4rem;
  }

  .vision .vision-wrapper .vision-item .item-text::after {
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
  }
}

@media (min-width: 1680px) {
  .vision .vision-wrapper .vision-item {
    padding-left: 10vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(2) {
    padding-left: 16vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(3) {
    padding-left: 18vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(4) {
    padding-left: 16vw;
  }

  .vision .vision-wrapper .vision-item .item-text {
    margin-left: 5rem;
    padding: 0.5rem 1.5rem;
  }
}

@media (min-width: 1920px) {
  .vision .vision-wrapper .vision-item {
    padding-left: 9vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(2) {
    padding-left: 14vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(3) {
    padding-left: 15vw;
  }

  .vision .vision-wrapper .vision-item:nth-child(4) {
    padding-left: 14vw;
  }

  .vision .vision-wrapper .vision-item .item-text {
    margin-left: 6rem;
  }
}

.institutes .card {
  height: 100%;
}

.institutes .card a.ratio {
  overflow: hidden;
}

.institutes .card a.ratio img {
  transition: all 0.35s ease;
  object-fit: cover;
}

.institutes .card a.ratio:hover img {
  transform: scale(1.1);
}

.institutes .card a.more {
  border-bottom: #002964 1px solid;
}

.institutes .card .card-title {
  color: #002964;
  margin-bottom: 1rem;
}

.newsroom .card {
  height: 100%;
  background: none;
}

.newsroom .card a.ratio {
  overflow: hidden;
}

.newsroom .card a.ratio img {
  transition: all 0.35s ease;
  object-fit: cover;
}

.newsroom .card a.ratio:hover img {
  transform: scale(1.1);
}

.newsroom .card .card-body {
  padding: 1rem 0;
}

.newsroom .card .card-title {
  color: #002964;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.newsroom .card .card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.newsroom .card .date {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  background-color: #002964;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  color: #fff;
}

.newsroom .card .date span {
  display: block;
  font-size: 0.875rem;
}

.newsroom .card .date span:nth-child(2) {
  font-size: 1.5rem;
  line-height: 1;
}

@media (min-width: 992px) {
  .newsroom .card {
    padding: 1rem;
  }
}

@media (min-width: 1400px) {
  .newsroom .card {
    padding: 1.5rem;
  }
}

.partners .row a {
  display: block;
  height: 100%;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: #109ABB 3px solid;
  transition: all 0.35s ease;
}

.partners .row a img {
  max-width: 80%;
  max-height: 100%;
  object-fit: cover;
}

.partners .row a:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.partners .row .partner-text {
  height: 100%;
}

.partners .row .partner-text a {
  padding: 1rem 0.5rem;
  justify-content: left;
  background-image: url(../images/pico.png);
  background-repeat: no-repeat;
  background-position: right -0.25rem center;
  background-size: auto 80%;
}

@media (min-width: 768px) {
  .partners .row .partner-text a {
    padding: 1rem;
  }
}



footer {
  border-top: #E3E9F1 1px solid;
}

footer .footer-wrapper .footer-body .subnav .nav-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

footer .footer-wrapper .footer-body .subnav .nav-body > ul {
  list-style: none;
  flex: none;
  padding: 0;
  width: 30%;
  padding-right: 10px;
}

footer .footer-wrapper .footer-body .subnav .nav-body > ul > li {
  flex: 0 0 50%;
}

footer .footer-wrapper .footer-body .subnav .nav-body > ul li a {
  line-height: 2;
  display: inline-block;
}

footer .footer-wrapper .footer-body .subnav .nav-body>ul li ul {
  padding-left: 20px;
}

footer .footer-wrapper .footer-body .subnav .nav-body>ul li ul li {
  list-style-type: disc;
  /*color: #666666;*/
}

footer .footer-wrapper .footer-body .subnav .nav-body>ul li ul li a {
  font-size: 14px;
  /*color: #666666;*/
}

 @media (max-width: 1440px) {
    footer .footer-wrapper .footer-body .subnav .nav-body>ul {
      width: 33.33%;
    }
} 

@media (min-width: 992px) {
  footer .footer-wrapper .footer-body {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  footer .footer-wrapper .footer-body .logo {
    flex: 0 0 32%;
  }

  footer .footer-wrapper .footer-body .subnav {
    flex: 0 0 65%;
    padding-left: 4rem;
  }
}

@media (min-width: 1200px) {
  footer .footer-wrapper .footer-body .logo {
    flex: 0 0 38%;
  }

  footer .footer-wrapper .footer-body .subnav {
    flex: 0 0 60%;
    padding-left: 5rem;
  }
}

@media (max-width: 1200px) {
 footer .footer-wrapper .contact .item.address br{
    display: none;
 }
}

footer .footer-wrapper .footer-title {
  color: #002964;
}

footer .footer-wrapper .footer-title span {
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: #002964 2px solid;
  display: inline-block;
  padding-bottom: 0.15rem;
}

footer .footer-wrapper a {
  color: #333;
}

footer .footer-wrapper a:hover {
  color: #2594D8;
}

footer .footer-wrapper .contact .item {
  display: flex;
}

footer .footer-wrapper .contact .item .bi {
  margin-right: 0.5rem;
  color: #109ABB;
}

footer .copy-wrapper {
  padding: 0.75rem 0;
  background-color: #036;
  color: #fff;
}

footer .copy-wrapper a {
  color: #fff;
}

footer .copy-wrapper a:hover {
  color: #fff;
}

footer .copy-wrapper .copyright {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  footer .copy-wrapper .copyright {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

footer .copy-wrapper .copyright .by {
  white-space: nowrap;
}

.page-banner {
  position: relative;
}

.page-banner img {
  width: 100%;
  min-height: 200px;
  object-fit: cover;
}

.page-banner::before {
  content: "";
  position: absolute;
  z-index: 1;
  height: 100%;
  left: 0;
  top: 0;
  width: 80%;
  background: linear-gradient(-65deg, transparent 50%, rgba(0, 51, 102, 0.8) 0) bottom right;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media (min-width: 1400px) {
  .page-banner::before {
    width: 85%;
  }
}

.page-banner .banner-text {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 500;
}

.page-banner .banner-text span {
  display: inline-block;
}

.page-banner .banner-text span::after {
  content: "";
  display: block;
  height: 3px;
  width: 2rem;
  background-color: #E73634;
}

@media (min-width: 992px) {
  .page-banner .banner-text {
    font-size: 2.5rem;
  }
}

.full-title {
  border-bottom: #E3E3E3 2px solid;
  color: #002964;
  font-size: 1.5rem;
  font-weight: 500;
  position: relative;
}

.full-title::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 2em;
  background-color: #2594D8;
  display: block;
  left: 0;
  bottom: -2px;
}

@media (min-width: 768px) {
  .full-title {
    font-size: 2rem;
  }
}

.about-hkisi .hkisi-list .about-item:not(:first-child) {
  margin-top: 1rem;
}

.about-hkisi .hkisi-list .about-item .item-title {
  color: #002964;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .about-hkisi .hkisi-list .about-item .item-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
}

.about-hkisi .hkisi-list .about-item .item-body ul {
  list-style: none;
  padding: 0;
}

.about-hkisi .hkisi-list .about-item .item-body ul li {
  padding-left: 1rem;
  margin-bottom: 1rem;
  position: relative;
  font-size: 18px;
  line-height: 1.6;
}

.about-hkisi .hkisi-list .about-item .item-body ul li::before {
  content: "";
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  background-color: #2594D8;
  display: block;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

@media (min-width: 768px) {
  .about-hkisi .hkisi-list .about-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  .about-hkisi .hkisi-list .about-item:not(:first-child) {
    margin-top: 2rem;
  }
}

@media (min-width: 1400px) {
  .about-hkisi .hkisi-list .about-item:not(:first-child) {
    margin-top: 3rem;
  }
}

.about-hkisi .main-functions .tit {
  color: #002964;
  font-size: 1.3rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .about-hkisi .main-functions .tit {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
}

.about-hkisi .main-functions .main-body .card {
  border: none;
  border-radius: 0;
  padding: 1rem;
  height: 100%;
}

.about-hkisi .main-functions .main-body .card .card-num span {
  background-color: #E3E9F1;
  color: #002964;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.about-hkisi .main-functions .main-body .card .card-title {
  font-weight: 500;
  font-size: 20px;
}

.about-hkisi .main-functions .main-body .card .card-body {
  padding: 0;
}

.about-hkisi .main-functions .main-body .card .card-body p {
  font-size: 18px;
  line-height: 1.6;
}

.about-cas .full-title {
  border-color: #fff;
}

.about-cas .cas-body p{
    font-size: 18px;
  line-height: 1.6;
}

.president .quote {
  background-color: #E3E9F1;
  border: #fff 8px solid;
  padding: 3rem;
  position: relative;
}

.president .quote::before,
.president .quote::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
}

.president .quote::before {
  left: 0.5rem;
  top: 1rem;
  background-image: url(../images/quote-left.png);
}

.president .quote::after {
  right: 0.5rem;
  bottom: 1rem;
  background-image: url(../images/quote-right.png);
  background-position: bottom;
}

@media (min-width: 768px) {
  .president .quote {
    padding: 4rem;
  }

  .president .quote::before {
    left: 1rem;
    top: 2rem;
  }

  .president .quote::after {
    right: 1rem;
    bottom: 2rem;
  }
}

@media (min-width: 1680px) {
  .president .quote {
    padding: 5rem;
  }

  .president .quote::before,
  .president .quote::after {
    width: 3rem;
  }

  .president .quote::before {
    left: 1rem;
    top: 2rem;
  }

  .president .quote::after {
    right: 1rem;
    bottom: 2rem;
  }
}

.management .card {
  border-radius: 0;
  border: none;
  height: 100%;
}

.management .card .card-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: #002964;
}

.management .card .card-body {
  padding: 0;
}

@media (min-width: 1200px) {
  .management .card .card-title {
    font-size: 1.5rem;
  }
}

.hot-news {
  background-color: #E3E9F1;
}

.hot-news img {
  object-fit: cover;
}

.hot-news .hot-text {
  padding: 1rem;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.hot-news .hot-text .tags span {
  display: inline-block;
}

.hot-news .hot-text .tags span:nth-child(1) {
  padding: 0.5rem 1.5rem;
  background-color: #F7DB10;
}

.hot-news .hot-text .tags span:nth-child(2) {
  padding: 0.5rem 1rem;
  background-color: #ccc;
  margin-left: 0.75rem;
}

.hot-news .hot-text .tit {
  font-size: 1.5rem;
  font-weight: 500;
  color: #002964;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .hot-news .hot-text .tit {
    font-size: 1.75rem;
  }
}

.hot-news .hot-text .summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hot-news .hot-text .summary {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 992px) {
  .hot-news .hot-text .summary {
    -webkit-line-clamp: 4;
  }
}

.page-wrapper .page-link {
  border: none;
  color: #333;
  height: 2rem;
  width: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 !important;
  border-radius: 50%;
}

.page-wrapper .page-link .bi {
  font-size: 0.5rem;
}

.page-wrapper .active .page-link {
  background-color: #2594D8;
}

.media .card .ratio {
  border-radius: 5px;
  overflow: hidden;
}

.media .card .ratio img {
  object-fit: cover;
}

.media .card .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .media .card .card-body {
    margin-top: 0;
    padding-left: 1rem !important;
  }
}

.media .card .card-title {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
}

.media .card a.more {
  border: 1px solid #109ABB;
  color: #109ABB;
  display: inline-block;
  padding: 5px 20px;
  max-width: 160px;
  text-align: center;
  margin-top: 15px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.media .card a.more:hover {
  background-color: #109ABB;
  color: #fff;
}

.page-institutes .inst-wrapper .card {
  margin-bottom: 2rem;
}

.page-institutes .inst-wrapper .card img {
  transition: all 0.35s ease;
  object-fit: cover;
}

.page-institutes .inst-wrapper .card:hover img {
  transform: scale(1.1);
}

.page-institutes .inst-wrapper .card .card-body {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 51, 102, 0.8);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: all 0.35s ease;
}

.page-institutes .inst-wrapper .card .card-body .card-title {
  text-transform: uppercase;
  transform: translateY(-1rem);
  opacity: 0;
  transition: all 0.35s ease;
}

.page-institutes .inst-wrapper .card .card-body a {
  color: #fff;
}

.page-institutes .inst-wrapper .card .card-body a.more {
  border-bottom: #fff 1px solid;
  display: inline-block;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 0.35s ease;
}

.page-institutes .inst-wrapper .card .ratio {
  overflow: hidden;
}

.page-institutes .inst-wrapper .card .tips {
  position: absolute;
  z-index: 1;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2rem;
  opacity: 0;
  transition: all 0.35s ease;
}

.page-institutes .inst-wrapper .card .down {
  position: absolute;
  z-index: 2;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3rem;
  opacity: 0;
  transition: all 0.35s ease;
}

.page-institutes .inst-wrapper .card:hover .card-body {
  opacity: 1;
}

.page-institutes .inst-wrapper .card:hover .tips {
  opacity: 1;
  bottom: 2rem;
}

.page-institutes .inst-wrapper .card:hover .down {
  opacity: 1;
  bottom: -1.5rem;
}

.page-institutes .inst-wrapper .card:hover .card-title,
.page-institutes .inst-wrapper .card:hover a.more {
  transform: translateY(0);
  opacity: 1;
}

.page-contact .contact-body .item {
  display: flex;
}

.page-contact .contact-body .item span:first-child {
  flex: 0 0 6rem;
}

.page-contact .contact-body .item span:first-child .bi {
  margin-right: 0.25rem;
  color: #109ABB;
}

.page-contact .contact-form .form-control {
  border: none;
  border-radius: 0;
  background-color: #F7F7F7;
}

.page-contact .contact-form .btn-primary {
  background-color: #002964;
  border-radius: 0;
  border: none;
  width: 8rem;
}

.page-contact .contact-form .btn-primary .bi {
  transition: all 0.35s ease;
}

.page-contact .contact-form .btn-primary:hover .bi {
  margin-left: 0.25rem;
}

.page-institutes .inst-list .inst-item {
  background-color: #E3E9F1;
}

.page-institutes .inst-list .inst-item img {
  object-fit: cover;
}

.page-institutes .inst-list .inst-item .row .hot-text {
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-institutes .inst-list .inst-item .row .hot-text .tit {
  font-weight: 500;
  font-size: 1.25rem;
}

@media (min-width: 992px) {
  .page-institutes .inst-list .inst-item .row .hot-text .tit {
    font-size: 1.5rem;
  }
}

.page-institutes .inst-list .inst-item .row .hot-text .summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

@media (min-width: 768px) {
  .page-institutes .inst-list .inst-item .row .hot-text .summary {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 992px) {
  .page-institutes .inst-list .inst-item .row .hot-text .summary {
    -webkit-line-clamp: 4;
  }
}

@media (min-width: 1200px) {
  .page-institutes .inst-list .inst-item .row .hot-text .summary {
    -webkit-line-clamp: 5;
  }
}

@media (max-width: 575.98px) {
  .organization .container {
    overflow: scroll;
  }
}

.organization .orgchart {
  text-align: center;
}

.organization .orgchart ul {
  list-style: none;
  padding-left: 0;
}

.organization .orgchart ul .node {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.organization .orgchart ul .node .tit {
  background-color: #fff;
  border: #ddd 1px solid;
  border-radius: 0.5rem;
  padding: 1.25rem 1rem;
  max-width: 45rem;
  flex: 1;
  position: relative;
  z-index: 9;
}

.organization .orgchart ul .node .tit::after {
  content: "";
  display: block;
  height: 2rem;
  width: 2px;
  background-color: #bbb;
  position: absolute;
  left: 50%;
  bottom: calc(-2rem - 1px);
  transform: translateX(-50%);
}

.organization .orgchart ul .node .tit a {
  color: #333;
  display: block;
  transition: all 0.35s ease;
}

.organization .orgchart ul .node .tit a::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 0.5rem;
  transition: all 0.35s ease;
}

.organization .orgchart ul .node .tit a:hover {
  color: #fff;
}

.organization .orgchart ul .node .tit .bi {
  position: absolute;
  height: 18px;
  width: 18px;
  background: #F86A43;
  color: #fff;
  font-size: 0.5rem;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}

.organization .orgchart ul .node .tit .bi::before {
  transform: scale(0.75);
}

@media (max-width: 575.98px) {
  .organization .orgchart ul .node .tit {
    padding: 1rem 0.5rem;
  }
}

@media (min-width: 992px) {
  .organization .orgchart ul .node.first .tit {
    font-size: 1.5rem;
  }
}

.organization .orgchart ul .node.has-second {
  margin-bottom: 4rem;
  position: relative;
}

.organization .orgchart ul .node.has-second::before {
  content: "";
  display: none;
  height: 2px;
  width: 50%;
  background-color: #bbb;
  position: absolute;
  bottom: calc(-2rem - 1px);
}

.organization .orgchart ul .node.second .tit {
  color: #fff;
  border: none;
}

.organization .orgchart ul .node.second .tit::after {
  content: none;
}

.organization .orgchart ul .node.second .tit .bi {
  top: -9px;
  bottom: auto;
}

@media (min-width: 992px) {
  .organization .orgchart ul .node.second .tit {
    font-size: 1.25rem;
  }
}

.organization .orgchart ul .node.third .tit {
  margin-left: 2rem;
  margin-right: 0.25rem;
  z-index: 2;
  border: none;
}

.organization .orgchart ul .node.third .tit::after {
  height: calc(100% + 4.5rem);
  left: calc(-2rem + 1px);
  top: calc(-50% - 2rem);
}

.organization .orgchart ul .node.third .tit::before {
  content: "";
  display: block;
  height: 2px;
  width: 2rem;
  background-color: #bbb;
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
}

.organization .orgchart ul .node.third .tit .bi {
  left: -9px;
  bottom: 50%;
  transform: translateY(50%);
}

@media (max-width: 575.98px) {
  .organization .orgchart ul .node.third .tit {
    margin-left: 1rem;
  }

  .organization .orgchart ul .node.third .tit::after {
    left: calc(-1rem + 1px);
  }

  .organization .orgchart ul .node.third .tit::before {
    width: 1rem;
    left: -1rem;
  }
}

.organization .orgchart ul .nodes.second {
  display: flex;
}

.organization .orgchart ul .nodes.second li {
  flex: 1;
}

.organization .orgchart ul .nodes.second li .node {
  margin-left: 1rem;
  margin-right: 1rem;
}

@media (max-width: 575.98px) {
  .organization .orgchart ul .nodes.second li .node {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
}

.organization .orgchart ul .nodes.second li .nodes+.node {
  position: relative;
}

.organization .orgchart ul .nodes.second li .nodes+.node::before {
  content: "";
  display: block;
  left: 0 !important;
  top: -100% !important;
  height: calc(100% + 1rem) !important;
  width: 2px;
  background-color: #bbb;
  position: absolute;
}

.organization .orgchart ul .nodes.second li .nodes+.node .tit .bi {
  display: none;
}

.organization .orgchart ul .nodes.second li .nodes+.node .tit::before {
  content: none !important;
}

.organization .orgchart ul .nodes.second li:nth-child(1) .node.second .tit {
  background-image: linear-gradient(to right, #25559f, #6A4F83);
}

.organization .orgchart ul .nodes.second li:nth-child(1) .nodes .tit {
  background-color: #F6F5F8;
}

.organization .orgchart ul .nodes.second li:nth-child(1) .nodes a:hover::after {
  background-image: linear-gradient(to right, #25559f, #6A4F83);
}

.organization .orgchart ul .nodes.second li:nth-child(2) .node.second .tit {
  background-image: linear-gradient(to right, #6A4F83, #E42927);
}

.organization .orgchart ul .nodes.second li:nth-child(2) .nodes .tit {
  background-color: #FDF3F3;
}

.organization .orgchart ul .nodes.second li:nth-child(2) .nodes a:hover::after {
  background-image: linear-gradient(to right, #6A4F83, #E42927);
}

/*.organization .orgchart ul .nodes.second li:nth-child(2) .nodes li:last-child .node .tit::before {
  height: 0;
  border-bottom: #bbb 2px dashed;
  background: none;
}
.organization .orgchart ul .nodes.second li:nth-child(2) .nodes li:last-child .node .tit::after {
  width: 0;
  border-left: #bbb 2px dashed;
  background: none;
}*/

.organization .orgchart ul .nodes.second li .nodes1 li:last-child .node .tit::before {
  height: 0;
  border-bottom: #bbb 2px dashed;
  background: none;
}

.organization .orgchart ul .nodes.second li .nodes1 li:last-child .node .tit::after {
  width: 0;
  border-left: #bbb 2px dashed;
  background: none;
}


.organization .orgchart ul .nodes.second li:nth-child(3) .node.second .tit {
  background-image: linear-gradient(to right, #E42927, #6A4F83);
}

.organization .orgchart ul .nodes.second li:nth-child(3) .nodes .tit {
  background-color: #F6F5F8;
}

.organization .orgchart ul .nodes.second li:nth-child(3) .nodes a:hover::after {
  background-image: linear-gradient(to right, #E42927, #6A4F83);
}


.organization .orgchart ul .nodes.second li:first-child .node.second .tit::before {
  content: "";
  display: none;
  height: 2rem;
  width: 2px;
  background-color: #bbb;
  position: absolute;
  left: 50%;
  top: -2rem;
}

.organization .orgchart ul .nodes.second li:last-child .node.second .tit::before {
  content: "";
  display: none;
  height: 2rem;
  width: 2px;
  background-color: #bbb;
  position: absolute;
  right: 50%;
  top: -2rem;
}

.organization .orgchart ul .nodes.second .nodes li:last-child .third .tit::after {
  height: calc(100% + 5rem);
  top: calc(-50% - 5rem);
}

.page-date {
  font-size: 1.125rem;
  color: #002964;
}

.page-content {
  line-height: 2;
}

@media (min-width: 1400px) {
  .page-content {
    font-size: 1.125rem;
  }
}

.morep {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.morep a {
  border: 1px solid #109ABB;
  color: #109ABB;
  font-size: 16px;
  padding: 10px 40px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.morep a:hover {
  background-color: #109ABB;
  color: #fff;
}

@media (min-width: 992px) {
  .morep {
    margin-top: 3.75rem;
  }
}

@media (max-width: 768px){
  footer .footer-wrapper .contact .item.address br {
      display: none;
  }
  footer .footer-wrapper .footer-body .subnav .nav-body{
    justify-content: flex-start;
  }
  footer .footer-wrapper .footer-body .subnav .nav-body>ul{
      padding-right: 15px;
       width: calc(33.33%);
  }
}

/*# sourceMappingURL=style.css.map */