/* You can add global styles to this file, and also import other style files */
@import "theme_root1.css";

@media (min-width: 0) {
  * {
    margin: 0px;
    padding: 0px;
    scrollbar-width: thin;
  }


  html,
  body,
  input,
  select,
  option,
  button,
  form,
  table {
    font-size: var(--default-font-size);
    color: var(--default-text-80);
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth"100;
    font-weight: 400;
  }

  :focus-visible {
    outline: 0px;
  }

  h1,
  h2,
  h3,
  h4, h5, h6 {
    font-weight: 600;
  }

  a {
    color: var(--default-text-80);
    text-decoration: none;
  }

  a:hover {
    text-decoration: none !important;
  }

  ul {
    padding-left: 0px;
  }

  ul,
  li {
    list-style: none;
  }

  /* custom */
  .text_primary {
    color: var(--primary-color) !important;
  }

  .wrapper {
    position: relative;
    margin: auto;
    max-width: 1440px;
  }

  .wrapperin {
    position: relative;
    padding-right: 256px;
    padding-bottom: 80px;
  }

  .header {
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
  }

  .logo {
    width: 300px;
    height: 28px;
    background: url('../img/logo.jpeg') left center no-repeat;
    background-size: contain;
    margin-left: 40px;
  }

  .header_grp_circle {
    position: absolute;
    left: 100%;
    bottom: 0px;
  }

  .header_grp_circle .black {
    border-radius: 70%;
    width: 14px;
    height: 14px;
    position: absolute;
    left: -20px;
    bottom: 30px;
    background: #000;
    z-index: 1;
  }

  .header_grp_circle .red {
    border-radius: 70%;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50px;
    bottom: 40px;
    background: var(--primary-color);
  }

  .header_grp_circle .red2 {
    border-radius: 70%;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 50px;
    bottom: -30px;
    background: var(--primary-color);
  }

  .header_grp_circle .grey {
    border-radius: 70%;
    width: 76px;
    height: 76px;
    position: absolute;
    left: -30px;
    bottom: -30px;
    background: #f5f5f5;
  }

  .menu_r {
    position: absolute;
    left: 100%;
    top: 100%;
  }

  .menu_r_in {
    position: relative;
    width: 220px;
    margin-top: 100px;
    padding-left: 40px;
  }

  .mrin_list {
    position: relative;
  }

  .mrin_list .item {
    position: relative;
  }

  .mrin_list .item a {
    font-size: 16px;
    padding: 4px;
    display: block;
  }

  .mrin_list .item:hover a {
    color: var(--primary-color);
  }

  .content_body {
    position: relative;
  }

  .banner {
    position: relative;
  }

  .banner .carousel-item img {
    width: 100%;
    height: 480px;
    object-fit: cover;
  }

  .sect_welcome {
    position: relative;
    border-right: 1px solid #00000029;
    padding: 10px 40px 80px 0px;
    margin-top: 30px;
  }

  .sect_welcomein {
    position: relative;
  }

  .welnote {
    position: relative;
    padding-left: 110px;
    padding-right: 40px;
    margin-bottom: 40px;
  }

  .welnote h1 {
    font-weight: 300;
    font-size: 36px;
    margin-bottom: 12px;
  }

  .welnote p {
    font-size: 24px;
    padding-left: 50px;
    line-height: 30px;
  }

  .convonote {
    padding-left: 160px;
  }

  .convonote h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .convonote p {
    font-size: 20px;
    line-height: 32px;
  }

  .footer {
    position: relative;
  }

  .copy_note {
    position: absolute;
    left: 100%;
    bottom: 10px;
    width: 240px;
  }

  .copy_note span {
    display: block;
    padding-left: 40px;
    font-weight: 500;
  }

}

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

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

@media (min-width: 1600px) {}