@font-face {
  font-family: Montserrat-thin;
  src: url("/public/fonts/Montserrat-Thin.ttf"); }
@font-face {
  font-family: Montserrat-light;
  src: url("/public/fonts/Montserrat-Light.ttf"); }
@font-face {
  font-family: Montserrat-regular;
  src: url("/public/fonts/Montserrat-Regular.ttf"); }
@font-face {
  font-family: Montserrat-medium;
  src: url("/public/fonts/Montserrat-Medium.ttf"); }
@font-face {
  font-family: Montserrat-semibold;
  src: url("/public/fonts/Montserrat-SemiBold.ttf"); }
@font-face {
  font-family: Montserrat-bold;
  src: url("/public/fonts/Montserrat-Bold.ttf"); }
header {
  max-width: 100%;
  height: 3rem;
  background: #F7FBFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 5rem; }
  header .navigation {
    display: flex;
    font-size: 0.75rem;
    font-family: Montserrat-medium;
    letter-spacing: 0;
    color: #02203A; }
    header .navigation div {
      padding: 0 1.5rem;
      display: flex;
      align-items: center; }
      header .navigation div:hover:not(:nth-child(7)) {
        background: rgba(0, 166, 255, 0.111);
        border-radius: 2rem; }
      header .navigation div:nth-child(7) {
        display: flex;
        align-items: center;
        gap: 0.5rem; }
        header .navigation div:nth-child(7) a:nth-child(2) {
          background: #0091EB;
          padding: 0.2rem 0.5rem;
          border-radius: 2rem;
          color: #FFFFFF;
          font-weight: 600; }
      header .navigation div:nth-child(8) a {
        border: 1px solid #e9e9e9;
        padding: 0.2rem 0.5rem 0.2rem 1rem;
        border-radius: 2rem;
        position: relative; }
        header .navigation div:nth-child(8) a span {
          position: absolute;
          top: 18%;
          left: 5%;
          opacity: 0.3; }
    header .navigation .active {
      color: #0091EB;
      border-radius: 2rem; }
  header .mobile_navigation {
    display: none; }
    header .mobile_navigation .navigation_toggle {
      position: relative; }
      header .mobile_navigation .navigation_toggle #navigation_toggle_close {
        display: none; }
      header .mobile_navigation .navigation_toggle .mobile_navigation_list {
        background: #FFFFFF;
        position: fixed;
        display: none;
        top: 3rem;
        right: 0;
        width: 100%;
        height: 90%;
        z-index: 2;
        justify-content: center;
        align-items: center;
        animation: mobile_nav_animate 0.3s ease-out; }
        header .mobile_navigation .navigation_toggle .mobile_navigation_list ul {
          display: grid;
          align-content: space-around;
          height: 100%; }
          header .mobile_navigation .navigation_toggle .mobile_navigation_list ul li {
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: 0;
            color: #02203A;
            padding: 1rem 5rem;
            border-radius: 2rem;
            overflow: hidden; }
            header .mobile_navigation .navigation_toggle .mobile_navigation_list ul li:hover {
              background: #F7FBFF;
              color: #0091EB; }
          header .mobile_navigation .navigation_toggle .mobile_navigation_list ul .active {
            background: #F7FBFF;
            color: #0091EB; }

@keyframes mobile_nav_animate {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 100rem;
    border-bottom-right-radius: 50%; }
  100% {
    height: 90%;
    width: 100%;
    opacity: 1; } }
@media (max-width: 1100px) {
  header {
    padding: 0.25rem 3rem; }
    header .navigation div {
      padding: 0 1.3rem; } }
@media (max-width: 1024px) {
  header {
    padding: 0.25rem 2rem; }
    header .navigation div {
      padding: 0 1rem; } }
@media (max-width: 978px) {
  header .navigation {
    display: none; }
  header .mobile_navigation {
    display: inline-block; }
    header .mobile_navigation .navigation_toggle {
      cursor: pointer; } }
footer {
  background: #02203A;
  color: #FFFFFF; }
  footer .footer_infor {
    display: flex;
    padding: 2rem 5rem; }
    footer .footer_infor .footer_logo {
      width: 40%;
      height: fit-content;
      display: flex; }
      footer .footer_infor .footer_logo img {
        width: 12.5rem;
        height: 2rem; }
    footer .footer_infor .footer_grid {
      width: 60%;
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      align-items: start; }
      footer .footer_infor .footer_grid .footer_cell {
        height: fit-content;
        display: grid;
        justify-content: center;
        align-items: start; }
        footer .footer_infor .footer_grid .footer_cell h5 {
          font-weight: bolder;
          font-size: 0.75rem;
          line-height: 1rem;
          margin-bottom: 1rem; }
        footer .footer_infor .footer_grid .footer_cell a {
          font-weight: 400;
          font-size: 0.75rem;
          line-height: 1.5rem;
          display: flex;
          align-items: start;
          gap: 0.2rem;
          cursor: pointer;
          transition: 0.2s linear; }
          footer .footer_infor .footer_grid .footer_cell a:hover {
            transform: translateX(0.25rem); }
          footer .footer_infor .footer_grid .footer_cell a img {
            min-width: 1.5rem;
            min-height: 1.5rem; }
        footer .footer_infor .footer_grid .footer_cell:nth-child(1) h5 {
          margin-left: 1.75rem; }
  footer .footer_copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5rem;
    border-top: 1px solid #FFFFFF; }
    footer .footer_copyright p {
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1rem; }
    footer .footer_copyright .social {
      display: flex;
      justify-content: center;
      align-items: end;
      gap: 2rem; }

@media (max-width: 1100px) {
  footer .footer_infor .footer_logo {
    width: 30%; }
  footer .footer_infor .footer_grid {
    width: 70%; } }
@media (max-width: 1024px) {
  footer .footer_infor {
    padding: 2rem; }
    footer .footer_infor .footer_grid {
      grid-template-columns: 30% 20% 20% 20%;
      gap: 1rem; }
      footer .footer_infor .footer_grid .footer_cell {
        justify-content: start; } }
@media (max-width: 850px) {
  footer .footer_infor {
    display: grid;
    gap: 2rem;
    padding: 1.2rem; }
    footer .footer_infor .footer_logo {
      width: 100%; }
    footer .footer_infor .footer_grid {
      width: 100%;
      grid-template-columns: 55% 13% 15% 17%; }
  footer .footer_copyright {
    padding: 1rem 4rem;
    align-items: end; }
    footer .footer_copyright .social {
      gap: 1rem; } }
@media (max-width: 678px) {
  footer .footer_infor .footer_grid {
    grid-template-columns: 75% 25%;
    grid-auto-flow: row; }
  footer .footer_copyright {
    padding: 1rem;
    align-items: end; }
    footer .footer_copyright .social {
      gap: 1rem; } }
@media (max-width: 574px) {
  footer .footer_infor .footer_grid {
    grid-template-columns: 75% 25%; }
  footer .footer_copyright {
    flex-direction: column-reverse;
    gap: 1rem; } }
@media (max-width: 430px) {
  footer .footer_infor .footer_grid {
    grid-template-columns: 30% 40% 30%; }
    footer .footer_infor .footer_grid .footer_cell:nth-child(1) {
      grid-column: 1 / 4;
      grid-row: 1 / 4; } }
.intro_banner {
  background-image: url("/public/home/big_banner.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 35rem;
  position: relative;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  gap: 5rem; }
  .intro_banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #02203A;
    opacity: 0.8;
    z-index: 0; }
  .intro_banner .intro_title {
    z-index: 1;
    line-height: 40px;
    text-align: center; }
    .intro_banner .intro_title h1 {
      font-family: Montserrat-bold;
      font-size: 2rem; }
  .intro_banner .intro_search {
    z-index: 1; }
    .intro_banner .intro_search .intro_search-label {
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.5rem;
      letter-spacing: 0.1em;
      text-align: left;
      color: #FFFFFF; }
    .intro_banner .intro_search form input {
      border: 1px solid #DAE5F2;
      border-radius: 4px;
      width: 40rem;
      height: 3rem;
      color: #708496;
      padding: 1rem;
      margin-right: 0.5rem; }
    .intro_banner .intro_search form button {
      text-transform: uppercase;
      width: 11.5rem;
      height: 3rem;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1.5rem;
      letter-spacing: 0em;
      text-align: center;
      background: #0091EB;
      color: #FFFFFF;
      cursor: pointer; }

@media (max-width: 900px) {
  .intro_banner .intro_search form input {
    width: 30rem;
    height: 3rem; }
  .intro_banner .intro_search form button {
    width: 8rem;
    height: 3rem; } }
@media (max-width: 678px) {
  .intro_banner .intro_search form input {
    width: 24rem;
    height: 3rem; } }
@media (max-width: 574px) {
  .intro_banner .intro_search form input {
    width: 18rem;
    height: 2.5rem; }
  .intro_banner .intro_search form button {
    width: 6rem;
    height: 2.5rem;
    font-size: 0.6rem; } }
@media (max-width: 430px) {
  .intro_banner .intro_search form input {
    width: 16rem;
    height: 2rem; }
  .intro_banner .intro_search form button {
    width: 5rem;
    height: 2.1rem;
    font-size: 0.6rem; } }
@media (max-width: 376px) {
  .intro_banner .intro_search form {
    display: grid;
    gap: 0.75rem; }
    .intro_banner .intro_search form input {
      width: 100%; }
    .intro_banner .intro_search form button {
      width: 100%; } }
.company {
  padding: 5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem; }
  .company h1 {
    text-transform: uppercase;
    text-align: center;
    color: #02203A;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem; }
    .company h1 span {
      color: #FF9900;
      font-family: Montserrat-bold; }
  .company .company_banner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    gap: 2rem; }
    .company .company_banner img {
      max-height: 138px;
      height: min-content; }

.browse_job {
  background: #F9FCFF;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative; }
  .browse_job::after {
    position: absolute;
    z-index: 0;
    background-image: url("/public/home/browse_job/wave_left.svg");
    background-size: cover;
    background-repeat: no-repeat;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .browse_job .browse_job-title {
    z-index: 1; }
    .browse_job .browse_job-title h1 {
      text-transform: uppercase;
      text-align: center;
      color: #02203A;
      letter-spacing: 0.1em;
      font-size: 2rem;
      line-height: 2.5rem; }
      .browse_job .browse_job-title h1 span {
        color: #0091EB;
        font-family: Montserrat-bold; }
  .browse_job .browse_job_grid {
    z-index: 1;
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    grid-template-columns: auto auto; }
    .browse_job .browse_job_grid div {
      width: 25rem;
      height: 3.5rem;
      color: #02203A;
      background: #FFFFFF;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0.5rem; }
      .browse_job .browse_job_grid div:hover .job_type {
        border-left-width: 3px; }
      .browse_job .browse_job_grid div .job_type {
        border-left: 2px solid #0091EB;
        font-family: Montserrat-bold;
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 0 0.5rem; }
      .browse_job .browse_job_grid div .job_slot {
        font-family: Montserrat-regular;
        font-size: 0.75rem;
        line-height: 1.75rem;
        border-left: 1px solid #DAE5F2;
        width: 23%;
        text-align: right;
        padding: 0 0.5rem; }

@media (max-width: 900px) {
  .browse_job .browse_job_grid {
    grid-template-columns: auto; }
    .browse_job .browse_job_grid div {
      width: 30rem; } }
@media (max-width: 574px) {
  .browse_job .browse_job_grid {
    grid-template-columns: auto; }
    .browse_job .browse_job_grid div {
      width: 21rem; } }
@media (max-width: 430px) {
  .browse_job .browse_job_grid {
    grid-template-columns: auto; }
    .browse_job .browse_job_grid div {
      width: 18rem; }
      .browse_job .browse_job_grid div .job_type {
        font-size: 0.8rem; }
      .browse_job .browse_job_grid div .job_slot {
        font-size: 0.8rem; } }
.feature_job {
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem; }
  .feature_job h1 {
    text-transform: uppercase;
    text-align: center;
    color: #02203A;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem; }
    .feature_job h1 span {
      color: #FF9900;
      font-family: Montserrat-bold; }
  .feature_job .feature_job-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.5rem;
    gap: 2rem;
    flex-wrap: wrap; }
    .feature_job .feature_job-grid .job_cell {
      display: flex;
      align-items: center;
      width: 22rem;
      max-width: 25rem;
      height: 7rem;
      box-shadow: 0px 0px 24px rgba(0, 25, 54, 0.1);
      cursor: pointer;
      border-radius: 8px;
      padding: 0.5rem;
      gap: 0.75rem; }
      .feature_job .feature_job-grid .job_cell:hover {
        box-shadow: 2px 2px 24px rgba(0, 25, 54, 0.2); }
      .feature_job .feature_job-grid .job_cell div:nth-child(1) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6.75rem;
        height: 5.25rem; }
        .feature_job .feature_job-grid .job_cell div:nth-child(1) img {
          width: 100%;
          height: 100%;
          border-radius: 0.25rem; }
      .feature_job .feature_job-grid .job_cell div:nth-child(2) {
        display: grid;
        align-content: stretch;
        height: 100%;
        width: 100%; }
        .feature_job .feature_job-grid .job_cell div:nth-child(2) h3 {
          color: #02203A;
          font-family: Montserrat-bold;
          font-size: 1rem;
          line-height: 1.5rem;
          overflow: hidden; }
        .feature_job .feature_job-grid .job_cell div:nth-child(2) p {
          font-style: normal;
          font-weight: 600;
          font-size: 0.8rem;
          line-height: 1.5rem;
          color: #708496; }
        .feature_job .feature_job-grid .job_cell div:nth-child(2) div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.2rem; }
          .feature_job .feature_job-grid .job_cell div:nth-child(2) div p {
            border-radius: 4px;
            background: #F7FBFF;
            font-family: Montserrat-semibold;
            font-size: 0.75rem;
            line-height: 0.5rem;
            width: fit-content;
            padding: 0.25rem 0.5rem; }
            .feature_job .feature_job-grid .job_cell div:nth-child(2) div p.red {
              color: #E9473F; }
            .feature_job .feature_job-grid .job_cell div:nth-child(2) div p.green {
              color: #0FB800; }
            .feature_job .feature_job-grid .job_cell div:nth-child(2) div p.purple {
              color: #8A3FE9; }
            .feature_job .feature_job-grid .job_cell div:nth-child(2) div p.orange {
              color: #FF9900; }
          .feature_job .feature_job-grid .job_cell div:nth-child(2) div img {
            max-height: 1.5rem;
            max-width: 1.5rem; }
      .feature_job .feature_job-grid .job_cell:last-child {
        background: #DAE5F2;
        justify-content: space-between;
        padding: 0.75rem;
        overflow: hidden; }
        .feature_job .feature_job-grid .job_cell:last-child h2 {
          width: 65%;
          font-weight: 700;
          font-size: 1.5rem;
          line-height: 2rem;
          color: #00428E; }
          .feature_job .feature_job-grid .job_cell:last-child h2 span {
            font-family: Montserrat-bold; }
        .feature_job .feature_job-grid .job_cell:last-child div {
          width: min-content;
          display: flex;
          align-items: end; }

.sponsor {
  padding: 0 2rem 4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem; }
  .sponsor h1 {
    text-transform: uppercase;
    text-align: center;
    color: #02203A;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem; }
    .sponsor h1 span {
      color: #0091EB;
      font-family: Montserrat-bold; }
  .sponsor .sponsor_banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 5rem; }
    .sponsor .sponsor_banner img {
      max-height: 138px;
      height: min-content; }

* {
  scroll-behavior: smooth;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  user-select: none; }

body {
  font-family: Montserrat-light; }

a {
  color: inherit;
  text-decoration: none; }

li {
  list-style: none; }

input, select, textarea, button {
  outline: none;
  border: none; }

::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem; }

::-webkit-scrollbar,
::-webkit-scrollbar-track {
  background: transparent; }

::-webkit-scrollbar-thumb {
  background: #708496; }

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