@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: ".";
}

@font-face {
  font-family: ".";
  src: url("../FONT/znb/SerranoWeb-Bold.eot");
  src: url("../FONT/znb/SerranoWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../FONT/znb/SerranoWeb-Bold.woff2") format("woff2"), url("../FONT/znb/SerranoWeb-Bold.woff") format("woff"), url("../FONT/znb/SerranoWeb-Bold.ttf") format("truetype"), url("../FONT/znb/SerranoWeb-Bold.svg#SerranoWeb-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: ".";
  src: url("../FONT/znb/SerranoWeb-Regular.eot");
  src: url("../FONT/znb/SerranoWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../FONT/znb/SerranoWeb-Regular.woff2") format("woff2"), url("../FONT/znb/SerranoWeb-Regular.woff") format("woff"), url("../FONT/znb/SerranoWeb-Regular.ttf") format("truetype"), url("../FONT/znb/SerranoWeb-Regular.svg#SerranoWeb-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*
==================
=== page Index ===
==================
*/
body {
  background-color: #F2F2F2;
}

.bar {
  width: 100%;
  height: 5px;
  background-color: #002f6b;
}

header {
  padding: 0 32px;
}
@media (max-width: 767px) {
  header {
    padding: 0 12px;
  }
}
header .part_left .logo {
  height: 50px;
  background: #002f6b;
  width: 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 20px;
}
header .part_left .logo img {
  position: relative;
  top: -2px;
  left: 2.5px;
}
header .part_left ul {
  list-style: none;
  gap: 29.981px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 767px) {
  header .part_left ul {
    gap: 10px;
  }
}
header .part_left ul li {
  color: rgb(0, 47, 107);
  gap: 3px;
}
@media (max-width: 767px) {
  header .part_left ul li {
    display: none !important;
  }
}
header .part_left ul li.active {
  font-weight: 600;
}
header .part_left ul li.active span {
  display: none;
}
@media (max-width: 767px) {
  header .part_left ul li.sm_show {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
header a {
  width: 91px;
  height: 28px;
  padding: 5px 15px;
  color: #006ba1;
  border: 1px solid rgb(122, 151, 189);
  background-color: rgb(255, 255, 255);
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  -webkit-box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px inset, rgba(0, 47, 107, 0.23) 0px 1px 2px 0px;
          box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px inset, rgba(0, 47, 107, 0.23) 0px 1px 2px 0px;
  border-radius: 3px;
}

.wrapper_log {
  width: 100%;
  padding: 0 15px 60px;
}
.wrapper_log .container_log {
  padding-top: 34.76px;
  max-width: 580px;
  margin: 0 auto;
}
.wrapper_log .container_log form {
  padding: 75px 0 60px;
  border: 1px solid rgb(217, 224, 233);
  background-color: white;
  border-radius: 7px;
}
@media (max-width: 767px) {
  .wrapper_log .container_log form {
    background: none;
    border: none;
    padding: 20px 0 60px;
  }
}
.wrapper_log .container_log form .container_form {
  max-width: 400px;
  margin: 0 auto;
}
.wrapper_log .container_log form .container_form .title h1 {
  font-size: 32px;
  color: rgb(0, 47, 107);
  font-weight: 600;
  margin-bottom: 21.44px;
}
.wrapper_log .container_log form .container_form .inputes {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}
.wrapper_log .container_log form .container_form .inputes .input_box {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.wrapper_log .container_log form .container_form .inputes .input_box label {
  margin-bottom: 7px;
  font-weight: 700;
  color: #002f6b;
}
.wrapper_log .container_log form .container_form .inputes .input_box input {
  width: 100%;
  height: 40px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(0, 47, 107, 0.15) 0px 1px 4px 0px inset, rgba(255, 255, 255, 0) 0px 0px 0px 0px;
          box-shadow: rgba(0, 47, 107, 0.15) 0px 1px 4px 0px inset, rgba(255, 255, 255, 0) 0px 0px 0px 0px;
  border: none;
  border: 1px solid rgb(122, 151, 189);
  outline: none;
  padding: 0 15px;
}
.wrapper_log .container_log form .container_form .inputes .input_box input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 2px solid #007DBC;
}
.wrapper_log .container_log form .container_form p {
  margin: 20px 0;
  color: rgb(0, 47, 107);
}
.wrapper_log .container_log form .container_form p a {
  font-size: 14px;
  color: rgb(0, 47, 107);
}
.wrapper_log .container_log form .container_form .infos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 7px;
  background-color: #edf6fa;
  padding: 24px;
}
.wrapper_log .container_log form .container_form .infos img {
  position: relative;
  top: 4px;
}
.wrapper_log .container_log form .container_form .infos .txt p {
  margin-top: 0;
  font-weight: 500;
}
.wrapper_log .container_log form .container_form .infos .txt a {
  color: rgb(0, 125, 188);
}
.wrapper_log .container_log form .container_form .btn_sub {
  width: 100%;
  margin-top: 20px;
}
.wrapper_log .container_log form .container_form .btn_sub button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  gap: 7px;
  background-color: #007DBC;
  color: white;
  border-radius: 4px;
  border: none;
  outline: none;
  height: 40px;
}
.wrapper_log .container_log form .container_form ul {
  list-style: none;
  margin-top: 35px;
  gap: 20px;
}
.wrapper_log .container_log form .container_form ul li {
  font-size: 14px;
  color: rgb(0, 47, 107);
  text-decoration: underline;
}

.error {
  width: 100%;
  background-color: #f8e4d9;
  padding: 24px;
  margin-bottom: 20px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  border-radius: 3px;
}
.error p {
  margin-top: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.error p a {
  font-size: 16px !important;
}

.load {
  width: 100%;
  min-height: calc(100vh - 50px);
}