@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Rock+Salt&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800&display=swap");
body {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h5, p {
  font-weight: normal;
  margin: 0; }

:focus, button:focus, a:focus {
  outline: 0; }

ol, ul {
  list-style: none;
  padding: 0;
  margin: 0; }

li {
  list-style: none; }

a {
  color: inherit; }
  a:focus, a:hover {
    color: inherit;
    text-decoration: none;
    outline: 0; }

form {
  margin: 0; }

input:focus, textarea:focus, select:focus {
  outline: 0; }

button {
  border: none;
  background-color: transparent;
  padding: 0; }
  button:focus, button:hover {
    color: inherit;
    text-decoration: none;
    outline: 0; }

/*@font-face {
	font-family: 'Branding-Medium';
	src: url('../fonts/Branding/Branding-Medium.woff2') format('woff2'),
	url('../fonts/Branding/Branding-Medium.woff') format('woff'),
	url('../fonts/Branding/Branding-Medium.eot') format('eot'),
	url('../fonts/Branding/Branding-Medium.svg') format('svg');
}*/
@keyframes fade {
  0% {
    width: 0;
    background-color: #e8e8e8; }
  100% {
    background-color: #e60101; } }
.form-group {
  position: relative;
  margin: 0; }

input.error,
textarea.error,
select.error {
  background-color: #fce4e4;
  border: 1px solid #cc0033;
  outline: none; }

label.error {
  color: red;
  font-size: 12px;
  position: absolute;
  bottom: -20px; }

.swal2-popup {
  border-radius: 20px !important; }

.swal2-title {
  font-family: "Sarabun", sans-serif;
  font-weight: 700 !important; }

.swal2-confirm {
  cursor: pointer !important;
  text-decoration: none;
  margin-top: 20px;
  margin-bottom: 30px;
  width: 250px;
  height: 50px;
  padding: 10px 50px;
  background: #e60101 !important;
  border-radius: 10px;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-content: center;
  outline: none !important; }

html {
  overflow: visible !important; }

body {
  overflow: visible !important; }

.headerFixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99 !important;
  height: auto;
  background-color: #ffffff; }
  @media screen and (max-width: 888px) {
    .headerFixed {
      padding-top: 20px;
      padding-bottom: 20px; } }
  .headerFixed #header {
    border-bottom: 1px solid #e8e8e8; }
    @media screen and (max-width: 888px) {
      .headerFixed #header {
        border-bottom: none; } }
    .headerFixed #header .container {
      display: flex;
      width: 100%;
      padding: 30px 0 30px 0;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 !important;
      height: auto !important;
      display: flex;
      box-sizing: border-box;
      width: 1240px;
      border: 0;
      padding: 0;
      margin: 0 auto; }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .headerFixed #header .container {
          max-width: 100%;
          margin: 0 2px; } }
      @media screen and (max-width: 888px) {
        .headerFixed #header .container {
          max-width: 100%;
          padding: 0px 10px; } }
      @media screen and (max-width: 888px) {
        .headerFixed #header .container {
          height: 100%; } }
    .headerFixed #header .menu {
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      width: 100%;
      justify-content: space-between;
      padding: 30px 0; }
      @media screen and (max-width: 888px) {
        .headerFixed #header .menu {
          padding: 0 10px;
          justify-content: space-around; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .headerFixed #header .menu {
          justify-content: space-around; } }
      .headerFixed #header .menuTitle {
        padding-left: 20px;
        position: relative;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 19px;
        margin-top: 10px;
        margin-left: 8px; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .menuTitle {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .menuTitle {
            display: none !important; } }
        .headerFixed #header .menuTitle:hover::before {
          border: 1px solid #e60101; }
        .headerFixed #header .menuTitle:hover::after {
          background-color: #e60101; }
        .headerFixed #header .menuTitle::before {
          content: "";
          width: 10px;
          height: 10px;
          position: absolute;
          border: 1px solid #e8e8e8;
          border-radius: 50%;
          top: 20px;
          left: 89px; }
          @media screen and (max-width: 888px) {
            .headerFixed #header .menuTitle::before {
              display: none; } }
        .headerFixed #header .menuTitle::after {
          content: "";
          width: 100px;
          height: 1px;
          position: absolute;
          background-color: #e8e8e8;
          top: 25px;
          left: -10px; }
          @media screen and (max-width: 888px) {
            .headerFixed #header .menuTitle::after {
              display: none; } }
        .headerFixed #header .menuTitle.active::before {
          border: 1px solid #e60101; }
        .headerFixed #header .menuTitle.active::after {
          background-color: #e60101; }
      .headerFixed #header .menuFirstPart {
        display: flex;
        flex-direction: row;
        gap: 20px; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .menuFirstPart {
            gap: 0; } }
      .headerFixed #header .menuContent {
        display: flex;
        flex-direction: row;
        cursor: pointer; }
      .headerFixed #header .menuContent:hover .menuTitle::before {
        transition: 1s;
        border: 1px solid #e60101; }
      .headerFixed #header .menuContent:hover .menuTitle::after {
        animation: fade 500ms ease;
        animation-fill-mode: forwards; }
      .headerFixed #header .menuBar {
        border: #e60101 1px solid;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        display: flex;
        gap: 6px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer; }
        .headerFixed #header .menuBar.active {
          background-color: #e60101; }
          .headerFixed #header .menuBar.active .menuItem {
            background-color: #ffffff; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .menuBar {
            height: 40px;
            width: 40px; } }
      .headerFixed #header .menuItem {
        width: 20px;
        height: 2px;
        background-color: #000000; }
    .headerFixed #header .socialMedia ul {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: baseline;
      margin-top: 20px; }
      .headerFixed #header .socialMedia ul li a path {
        fill: #e8e8e8; }
      @media screen and (max-width: 888px) {
        .headerFixed #header .socialMedia ul {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .headerFixed #header .socialMedia ul {
          display: none; } }
      .headerFixed #header .socialMedia ul li a svg:hover path {
        fill: #e60101;
        transition: 0.5s; }
      .headerFixed #header .socialMedia ul li:first-child {
        padding-left: 70px; }
    .headerFixed #header .settings {
      display: flex;
      flex-direction: row;
      justify-self: flex-end;
      align-items: center;
      gap: 50px;
      position: relative; }
      @media screen and (max-width: 888px) {
        .headerFixed #header .settings {
          gap: 0; } }
      .headerFixed #header .settings::before {
        content: "";
        width: 1px;
        height: 14px;
        position: absolute;
        background-color: #e8e8e8;
        top: 20px;
        left: -5px;
        display: none; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings::before {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settings::before {
            display: none; } }
      .headerFixed #header .settings .choices {
        position: relative; }
        .headerFixed #header .settings .choices::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
          width: 20px;
          height: 20px;
          position: absolute;
          color: red;
          top: 30%;
          right: 13%;
          z-index: 9;
          padding-left: 5px; }
          @media screen and (max-width: 888px) {
            .headerFixed #header .settings .choices::before {
              display: none; } }
        .headerFixed #header .settings .choices:hover::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
        .headerFixed #header .settings .choices.is-open::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
      .headerFixed #header .settings .choices__list--dropdown .choices__item--selectable,
      .headerFixed #header .settings .choices__list[aria-expanded] .choices__item--selectable {
        padding-right: 0; }
      .headerFixed #header .settings .choices__list--dropdown,
      .headerFixed #header .settings .choices__list[aria-expanded] {
        border-radius: 0 0 10px 10px;
        width: 60px;
        box-sizing: border-box;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px;
        font-size: 16px; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .choices__list--dropdown,
          .headerFixed #header .settings .choices__list[aria-expanded] {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      .headerFixed #header .settings .choices__placeholder {
        opacity: initial; }
      .headerFixed #header .settings .choices__list--dropdown .choices__item--selectable::after,
      .headerFixed #header .settings .choices__list[aria-expanded] .choices__item--selectable::after {
        display: none; }
      .headerFixed #header .settings .choices[data-type*="select-one"]::after {
        display: none; }
      .headerFixed #header .settings .choices[data-type*="select-one"] .choices__inner {
        border-radius: 10px;
        padding-bottom: 0; }
      .headerFixed #header .settings .choices.is-open:focus {
        border: #e60101; }
        .headerFixed #header .settings .choices.is-open:focus .arrowContentFirst::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") !important; }
      .headerFixed #header .settings .products .filter .choices__item {
        font-size: 15px; }
      .headerFixed #header .settings .choices__list--single .choices__item {
        width: 90%;
        margin-right: 5px; }
      .headerFixed #header .settings .choices.is-open.is-focused .choices__inner {
        border: 1px solid #e60101;
        border-radius: 10px 10px 0 0;
        transition: 1ms; }
      .headerFixed #header .settings .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
        border: 1px solid #e60101; }
      .headerFixed #header .settings .choices[data-type*="select-one"] .choices__input {
        border-bottom: 1px solid #e60101; }
      .headerFixed #header .settings .choices__list--dropdown,
      .headerFixed #header .settings .choices__list[aria-expanded] {
        word-break: initial;
        z-index: 999; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .choices__list--dropdown,
          .headerFixed #header .settings .choices__list[aria-expanded] {
            z-index: 99999 !important; } }
      .headerFixed #header .settings .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
        background-color: #fafafa; }
      .headerFixed #header .settings .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
        background-color: #ffffff; }
      .headerFixed #header .settings .choices__list--dropdown .choices__item--selectable.is-highlighted,
      .headerFixed #header .settings .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: #e60101 !important;
        color: #ffffff; }
      .headerFixed #header .settings .choices__inner {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 29px;
        border-radius: 10px;
        border: 1px solid #e8e8e8;
        background-color: #ffffff;
        position: relative;
        width: 60px;
        font-size: 14px;
        box-sizing: border-box;
        min-height: 40px;
        padding: 3px !important; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .choices__inner {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .choices__inner {
            width: 250px; } }
        .headerFixed #header .settings .choices__inner:hover {
          border: 1px solid #e60101; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .choices__inner {
            display: none; } }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .choices__innerMobile {
            display: block; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settings .choices__innerMobile {
            display: none; } }
      .headerFixed #header .settings .arrowContentFirst:hover .choices__inner {
        border: #e60101 1px solid;
        transition: 0.5s; }
      .headerFixed #header .settingsChangeLanguage svg {
        padding-left: 5px; }
      .headerFixed #header .settingsContent:focus {
        background-color: aqua; }
      .headerFixed #header .settings input {
        border: 1px solid #e8e8e8;
        width: 100px;
        position: absolute;
        top: 15px;
        right: 200px;
        border: none;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 19px; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings input {
            display: none;
            width: 100px;
            border: 1px solid #e8e8e8;
            border-radius: 20px;
            padding: 10px 50px 10px 10px;
            top: 50px;
            right: 30px; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settings input {
            display: none;
            width: 100px;
            border: 1px solid #e8e8e8;
            border-radius: 20px;
            padding: 10px 50px 10px 10px;
            top: 50px;
            right: 30px; } }
        .headerFixed #header .settings input::after {
          content: "";
          width: 1px;
          height: 20px;
          position: absolute;
          background-color: #e8e8e8;
          display: block; }
          @media screen and (max-width: 888px) {
            .headerFixed #header .settings input::after {
              display: none; } }
          @media screen and (min-width: 890px) and (max-width: 1239px) {
            .headerFixed #header .settings input::after {
              display: none; } }
        .headerFixed #header .settings input input:focus .settings input::after {
          display: block; }
          @media screen and (max-width: 888px) {
            .headerFixed #header .settings input input:focus .settings input::after {
              display: none; } }
          @media screen and (min-width: 890px) and (max-width: 1239px) {
            .headerFixed #header .settings input input:focus .settings input::after {
              display: none; } }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings input.active {
            display: block;
            top: 50px;
            position: absolute;
            right: 0;
            border: 1px solid #e8e8e8;
            border-radius: 10px;
            padding: 5px 50px 5px 10px; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settings input.active {
            display: block;
            top: 50px;
            position: absolute;
            right: 0;
            border: 1px solid #e8e8e8;
            border-radius: 10px;
            padding: 5px 50px 5px 10px; } }
      .headerFixed #header .settingsSearch {
        cursor: pointer;
        border: #e60101 1px solid;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        position: relative; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settingsSearch {
            height: 40px;
            width: 40px; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settingsSearch {
            height: 40px;
            width: 40px; } }
      .headerFixed #header .settingsSearch::before {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        top: 35px;
        right: 212px; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settingsSearch::before {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settingsSearch::before {
            display: none; } }
      .headerFixed #header .settingsSearch::after {
        content: "";
        width: 170px;
        height: 1px;
        position: absolute;
        background-color: #e8e8e8;
        top: 40px;
        right: 43px; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settingsSearch::after {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settingsSearch::after {
            display: none; } }
      .headerFixed #header .settingsSearch:hover::before {
        transition: 1s;
        border: 1px solid #e60101; }
      .headerFixed #header .settingsSearch:hover::after {
        animation: fade 500ms ease;
        animation-fill-mode: forwards; }
      .headerFixed #header .settings .searchingResults {
        background-color: transparent;
        padding: 10px;
        top: 50px;
        position: absolute;
        left: -210px;
        border-radius: 20px;
        height: 670px;
        display: none; }
        @media screen and (max-width: 888px) {
          .headerFixed #header .settings .searchingResults {
            left: -250px;
            top: 90px;
            height: 305px; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed #header .settings .searchingResults {
            left: -250px;
            top: 90px;
            height: 305px; } }
        .headerFixed #header .settings .searchingResultsList {
          max-height: 670px;
          overflow: scroll;
          display: block; }
          .headerFixed #header .settings .searchingResultsList::-webkit-scrollbar-thumb {
            background: #e60101;
            border-radius: 5px;
            width: 1px;
            height: 60px; }
          .headerFixed #header .settings .searchingResultsList::-webkit-scrollbar {
            background: transparent;
            width: 5px; }
          .headerFixed #header .settings .searchingResultsList::-webkit-scrollbar-corner {
            background: transparent; }
          @media screen and (max-width: 888px) {
            .headerFixed #header .settings .searchingResultsList {
              left: -250px;
              top: 90px;
              max-height: 260px; } }
        .headerFixed #header .settings .searchingResults .searchingResult {
          margin-bottom: 20px;
          margin-right: 10px;
          border: 1px solid #e8e8e8;
          background-color: #ffffff;
          border-radius: 20px;
          padding: 10px; }
          .headerFixed #header .settings .searchingResults .searchingResult a {
            display: flex;
            flex-direction: row;
            gap: 10px;
            text-decoration: none;
            justify-content: space-between; }
          .headerFixed #header .settings .searchingResults .searchingResultImage {
            width: 40%;
            height: 100%; }
          .headerFixed #header .settings .searchingResults .searchingResultContent {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start; }
            @media screen and (max-width: 888px) {
              .headerFixed #header .settings .searchingResults .searchingResultContent {
                gap: 5px; } }
          .headerFixed #header .settings .searchingResults .searchingResultTitle {
            font-family: "Sarabun", sans-serif;
            font-weight: 700;
            color: #000000;
            font-size: 18px;
            font-size: 1.125rem;
            line-height: 30px;
            margin-bottom: -10px; }
            @media screen and (max-width: 888px) {
              .headerFixed #header .settings .searchingResults .searchingResultTitle {
                line-height: 20px;
                font-size: 15px;
                font-size: 0.9375rem; } }
          .headerFixed #header .settings .searchingResults .searchingResultCategory {
            font-family: "Sarabun", sans-serif;
            font-weight: 500;
            color: #000000;
            font-size: 18px;
            font-size: 1.125rem;
            line-height: 30px; }
            @media screen and (max-width: 888px) {
              .headerFixed #header .settings .searchingResults .searchingResultCategory {
                line-height: 20px;
                font-size: 15px;
                font-size: 0.9375rem; } }
            @media screen and (max-width: 888px) {
              .headerFixed #header .settings .searchingResults .searchingResultCategory {
                font-size: 14px; } }
          .headerFixed #header .settings .searchingResults .searchingResultSeeProduct {
            font-family: "Sarabun", sans-serif;
            font-weight: 500;
            color: #e60101;
            font-size: 15px;
            font-size: 0.9375rem;
            line-height: 20px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 10px; }
            @media screen and (max-width: 888px) {
              .headerFixed #header .settings .searchingResults .searchingResultSeeProduct {
                margin-top: 0;
                font-size: 12px;
                line-height: 12px; } }
  .headerFixed .open {
    display: none; }
  .headerFixed .open.active {
    display: block;
    z-index: 100;
    margin-top: 1px;
    background-color: #ffffff;
    width: 100%;
    height: auto !important;
    z-index: 0;
    position: relative; }
    .headerFixed .open.active::before {
      content: "";
      width: 100vw;
      height: 0.5px;
      background-color: #e8e8e8;
      position: absolute;
      top: -10px; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active::before {
          display: none; } }
    @media screen and (max-width: 888px) {
      .headerFixed .open.active {
        margin-top: 10px;
        padding: 0; } }
    .headerFixed .open.active .openVisible {
      width: 100%;
      display: grid;
      grid-template-columns: max-content 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      column-gap: 100px;
      overflow: hidden;
      margin-top: -10px;
      height: 585px; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .openVisible {
          margin-top: 0;
          display: flex;
          flex-direction: column;
          padding: 0 10px;
          height: 100%; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .headerFixed .open.active .openVisible {
          grid-template-columns: 1fr 1fr;
          padding: 0 140px; } }
      .headerFixed .open.active .openVisible p {
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #808080;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 30px;
        letter-spacing: 2px;
        text-transform: uppercase; }
      .headerFixed .open.active .openVisible .menuInstitutional a {
        font-family: "Sarabun", sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 22px;
        font-size: 1.375rem;
        line-height: 30px; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .openVisible .menuInstitutional a {
            line-height: 25px;
            font-size: 20px;
            font-size: 1.25rem; } }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .openVisible .menuInstitutional a {
            line-height: 20px;
            font-size: 18px; } }
    .headerFixed .open.active .arrowLanguageMobile {
      position: absolute;
      right: 23px;
      top: 7px;
      display: none; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .arrowLanguageMobile {
          display: block; } }
      .headerFixed .open.active .arrowLanguageMobile .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
        background-color: #fafafa; }
      .headerFixed .open.active .arrowLanguageMobile .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
        background-color: #ffffff; }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown .choices__item--selectable.is-highlighted,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: #e60101 !important;
        color: #ffffff; }
      .headerFixed .open.active .arrowLanguageMobile .choices {
        position: relative; }
        .headerFixed .open.active .arrowLanguageMobile .choices::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
          width: 19px;
          height: 19px;
          position: absolute;
          color: red;
          top: 50%;
          right: 5%;
          z-index: 99; }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] {
        border-radius: 0 0 10px 10px;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown,
          .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] {
        width: 250px;
        box-sizing: border-box; }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown .choices__list,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] .choices__list {
        max-height: 180px; }
      .headerFixed .open.active .arrowLanguageMobile .choices__placeholder {
        opacity: initial; }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] {
        width: 100%; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown,
          .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] {
            width: 60px; } }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown .choices__item--selectable::after,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] .choices__item--selectable::after {
        display: none; }
      .headerFixed .open.active .arrowLanguageMobile .choices[data-type*="select-one"]::after {
        display: none; }
      .headerFixed .open.active .arrowLanguageMobile .choices[data-type*="select-one"] .choices__inner {
        border-radius: 10px;
        padding-bottom: 0; }
      .headerFixed .open.active .arrowLanguageMobile .choices.is-open:focus {
        border: #e60101; }
      .headerFixed .open.active .arrowLanguageMobile .products .filter .choices__item {
        font-size: 15px; }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--single .choices__item {
        width: 90%; }
      .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown,
      .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] {
        word-break: initial;
        z-index: 999; }
      .headerFixed .open.active .arrowLanguageMobile .choices.is-open.is-focused .choices__inner {
        border: 1px solid #e60101;
        border-radius: 10px 10px 0 0; }
      .headerFixed .open.active .arrowLanguageMobile .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
        border: 1px solid #e60101; }
      .headerFixed .open.active .arrowLanguageMobile .choices[data-type*="select-one"] .choices__input {
        border-bottom: 1px solid #e60101; }
      @media (min-width: 640px) {
        .headerFixed .open.active .arrowLanguageMobile .choices__list--dropdown .choices__item--selectable,
        .headerFixed .open.active .arrowLanguageMobile .choices__list[aria-expanded] .choices__item--selectable {
          padding-right: 0; } }
      .headerFixed .open.active .arrowLanguageMobile .choices__inner {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 29px;
        border-radius: 10px;
        border: 1px solid #e8e8e8;
        background-color: #ffffff;
        margin-top: 20px;
        position: relative;
        width: 60px;
        height: 50px;
        box-sizing: border-box;
        padding-right: 20px; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .arrowLanguageMobile .choices__inner {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
        .headerFixed .open.active .arrowLanguageMobile .choices__inner:focus {
          border: 1px solid #e60101; }
    .headerFixed .open.active .menuInstitutional {
      grid-column: 1;
      grid-row: 1/2;
      margin-top: 20px; }
      .headerFixed .open.active .menuInstitutional ul li {
        padding-top: 20px; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .menuInstitutional ul li {
            padding-top: 10px; } }
        .headerFixed .open.active .menuInstitutional ul li:nth-child(3) {
          width: 200px; }
        .headerFixed .open.active .menuInstitutional ul li a {
          text-decoration: none; }
        .headerFixed .open.active .menuInstitutional ul li a:hover {
          color: #e60101; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .menuInstitutional {
          margin-bottom: 20px;
          width: 50%; } }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .menuInstitutional {
          margin-bottom: 20px;
          width: 100%; } }
    .headerFixed .open.active .menuProduct {
      grid-column: 2;
      grid-row: 1;
      margin-top: 20px;
      margin-right: 50px;
      margin-bottom: 70px; }
      .headerFixed .open.active .menuProduct .choices__item--disabled {
        display: none !important; }
      .headerFixed .open.active .menuProduct .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
        background-color: #fafafa; }
      .headerFixed .open.active .menuProduct .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
        background-color: #ffffff; }
      .headerFixed .open.active .menuProduct .choices__list--dropdown .choices__item--selectable.is-highlighted,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: #e60101 !important;
        color: #ffffff; }
      .headerFixed .open.active .menuProduct .choices {
        position: relative; }
        .headerFixed .open.active .menuProduct .choices::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
          width: 20px;
          height: 20px;
          position: absolute;
          color: red;
          top: 50%;
          right: 5%;
          z-index: 99; }
          @media screen and (max-width: 888px) {
            .headerFixed .open.active .menuProduct .choices::before {
              right: 20%; } }
      .headerFixed .open.active .menuProduct .choices {
        position: relative; }
        .headerFixed .open.active .menuProduct .choices::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
          width: 20px;
          height: 20px;
          position: absolute;
          color: red;
          top: 50%;
          right: 5%;
          z-index: 99; }
          @media screen and (max-width: 888px) {
            .headerFixed .open.active .menuProduct .choices::before {
              left: 220px; } }
          @media screen and (min-width: 890px) and (max-width: 1239px) {
            .headerFixed .open.active .menuProduct .choices::before {
              left: 220px; } }
      .headerFixed .open.active .menuProduct .choices__list--dropdown,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
        border-radius: 0 0 10px 10px;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .menuProduct .choices__list--dropdown,
          .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      .headerFixed .open.active .menuProduct .choices__list--dropdown,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
        width: 250px;
        box-sizing: border-box; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .menuProduct .choices__list--dropdown,
          .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
            height: 80px; } }
      .headerFixed .open.active .menuProduct .choices__list--dropdown .choices__list,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] .choices__list {
        max-height: 180px; }
      .headerFixed .open.active .menuProduct .choices__placeholder {
        opacity: initial; }
      .headerFixed .open.active .menuProduct .choices__list--dropdown,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
        max-width: 100%; }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .headerFixed .open.active .menuProduct .choices__list--dropdown,
          .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
            max-width: 100% !important; } }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .menuProduct .choices__list--dropdown,
          .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
            width: 250px; } }
      .headerFixed .open.active .menuProduct .choices__list--dropdown .choices__item--selectable::after,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] .choices__item--selectable::after {
        display: none; }
      .headerFixed .open.active .menuProduct .choices[data-type*="select-one"]::after {
        display: none; }
      .headerFixed .open.active .menuProduct .choices[data-type*="select-one"] .choices__inner {
        border-radius: 10px;
        padding-bottom: 0; }
      .headerFixed .open.active .menuProduct .choices.is-open:focus {
        border: #e60101; }
      .headerFixed .open.active .menuProduct .products .filter .choices__item {
        font-size: 15px; }
      .headerFixed .open.active .menuProduct .choices__list--single .choices__item {
        width: 90%; }
      .headerFixed .open.active .menuProduct .choices__list--dropdown,
      .headerFixed .open.active .menuProduct .choices__list[aria-expanded] {
        word-break: initial;
        z-index: 999; }
      .headerFixed .open.active .menuProduct .choices.is-open.is-focused .choices__inner {
        border: 1px solid #e60101;
        border-radius: 10px 10px 0 0; }
      .headerFixed .open.active .menuProduct .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
        border: 1px solid #e60101; }
      .headerFixed .open.active .menuProduct .choices[data-type*="select-one"] .choices__input {
        border-bottom: 1px solid #e60101; }
      @media (min-width: 640px) {
        .headerFixed .open.active .menuProduct .choices__list--dropdown .choices__item--selectable,
        .headerFixed .open.active .menuProduct .choices__list[aria-expanded] .choices__item--selectable {
          padding-right: 0; } }
      .headerFixed .open.active .menuProduct .choices__inner {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 29px;
        border-radius: 10px;
        border: 1px solid #e8e8e8;
        background-color: #ffffff;
        margin-top: 20px;
        position: relative;
        width: 250px;
        height: 50px;
        box-sizing: border-box;
        padding-right: 20px; }
        @media screen and (max-width: 888px) {
          .headerFixed .open.active .menuProduct .choices__inner {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
        .headerFixed .open.active .menuProduct .choices__inner:focus {
          border: 1px solid #e60101; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .menuProduct {
          margin-bottom: 30px; } }
      .headerFixed .open.active .menuProductButton {
        border: 1px solid #e8e8e8;
        border-radius: 10px;
        padding: 14px 21px;
        width: 250px;
        height: 50px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        .headerFixed .open.active .menuProductButton path {
          stroke: #e60101; }
      .headerFixed .open.active .menuProductSearch {
        cursor: pointer;
        text-decoration: none;
        margin-top: 20px;
        margin-bottom: 30px;
        width: 250px;
        height: 50px;
        padding: 10px 50px;
        background: #e60101;
        border-radius: 10px;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #ffffff;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px; }
    .headerFixed .open.active .menuSoftware {
      grid-column: 2;
      grid-row: 2;
      margin-top: -80px;
      height: fit-content;
      margin-right: 50px; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .menuSoftware {
          display: none; } }
      .headerFixed .open.active .menuSoftwareButton {
        margin-top: 20px;
        text-decoration: none;
        width: 250px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
        border-radius: 10px;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #ffffff;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px;
        box-sizing: border-box;
        color: #ffffff; }
        .headerFixed .open.active .menuSoftwareButton:hover {
          background-image: linear-gradient(281deg, #25a3e7 20%, #145bbe 70%);
          transition: 0.5s;
          color: #ffffff; }
    .headerFixed .open.active .banner {
      grid-column: 3;
      grid-row: 1/2;
      place-self: normal;
      display: flex;
      flex-flow: row nowrap;
      place-content: start;
      place-items: center;
      gap: normal;
      margin-top: 20px;
      margin-bottom: -55px;
      margin-left: -100px;
      margin-right: 360px;
      width: 850px;
      height: 100%;
      max-height: 100%; }
      @media screen and (max-width: 888px) {
        .headerFixed .open.active .banner {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .headerFixed .open.active .banner {
          display: none; } }

.headerFixed.home.headerDark {
  background-color: transparent;
  z-index: 99 !important; }
  .headerFixed.home.headerDark.active .choices__list--dropdown,
  .headerFixed.home.headerDark.active .choices__list[aria-expanded] {
    background-color: #ffffff !important; }
  .headerFixed.home.headerDark #header {
    border: none; }
    .headerFixed.home.headerDark #header .menuBar {
      border: #ffffff 1px solid;
      background-color: transparent;
      opacity: 0.8; }
      @media screen and (max-width: 888px) {
        .headerFixed.home.headerDark #header .menuBar {
          opacity: 0.5; } }
      .headerFixed.home.headerDark #header .menuBar.active {
        opacity: 1;
        background-color: #e60101; }
        .headerFixed.home.headerDark #header .menuBar.active .menuItem {
          opacity: 1;
          background-color: #ffffff; }
    .headerFixed.home.headerDark #header .menuItem {
      background-color: #ffffff;
      opacity: 0.8; }
      @media screen and (max-width: 888px) {
        .headerFixed.home.headerDark #header .menuItem {
          opacity: 0.5; } }
    .headerFixed.home.headerDark #header .menuTitle {
      color: #fafafa; }
      .headerFixed.home.headerDark #header .menuTitle::before {
        border: 1px solid #fafafa;
        opacity: 0.8; }
      .headerFixed.home.headerDark #header .menuTitle::after {
        opacity: 0.8;
        background-color: #fafafa; }
      .headerFixed.home.headerDark #header .menuTitle.active {
        color: #000000; }
        .headerFixed.home.headerDark #header .menuTitle.active::before {
          opacity: 1;
          border: 1px solid #e60101; }
        .headerFixed.home.headerDark #header .menuTitle.active::after {
          opacity: 1;
          background-color: #e60101; }
    .headerFixed.home.headerDark #header .menuContent:hover .menuBar {
      opacity: 1;
      transition: 1s; }
    .headerFixed.home.headerDark #header .menuContent:hover .menuItem {
      opacity: 1;
      transition: 1s; }
    .headerFixed.home.headerDark #header .menuContent:hover .menuTitle::before {
      border: 1px solid #e60101;
      opacity: 1;
      transition: 1s; }
    .headerFixed.home.headerDark #header .menuContent:hover .menuTitle::after {
      opacity: 1;
      transition: 1s; }
    .headerFixed.home.headerDark #header .menu .settings .choices__inner {
      color: #ffffff;
      background-color: #000000; }
    .headerFixed.home.headerDark #header .menu .settings .choices__list--dropdown,
    .headerFixed.home.headerDark #header .menu .settings .choices__list[aria-expanded] {
      background-color: #272727; }
    .headerFixed.home.headerDark #header .menu .settings .choices.is-open.is-focused .choices__inner {
      border: 1px solid #ffffff;
      border-radius: 10px 10px 0 0; }
    .headerFixed.home.headerDark #header .menu .settings .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
      border: 1px solid #ffffff; }
    .headerFixed.home.headerDark #header .menu .settings .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
      background-color: #272727; }
    .headerFixed.home.headerDark #header .menu .settings .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
      background-color: #272727; }
    .headerFixed.home.headerDark #header .menu .settings .choices__list--dropdown,
    .headerFixed.home.headerDark #header .menu .settings .headerFixed #header .settings .choices__list[aria-expanded] {
      color: #ffffff; }
  .headerFixed.home.headerDark #header .socialMedia ul li a svg path {
    fill: #808080; }
  .headerFixed.home.headerDark #header .socialMedia ul li svg:hover path {
    fill: #ffffff;
    transition: 0.5s; }
  .headerFixed.home.headerDark #header .settings .choices::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A"); }
  .headerFixed.home.headerDark #header .settings .arrowContentFirst:hover .choices__inner {
    border: 1px solid #ffffff; }
  .headerFixed.home.headerDark #header .logo path {
    fill: #ffffff; }
  .headerFixed.home.headerDark #header .settingsSearch {
    border: #ffffff 1px solid; }
  .headerFixed.home.headerDark #header .settings input {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 19px; }
  .headerFixed.home.headerDark .settingsSearching {
    background: transparent; }
  .headerFixed.home.headerDark #header .settings .arrowContentFirst::after {
    background-color: transparent; }
  .headerFixed.home.headerDark #header .settings.active .settingsSearch {
    background-color: transparent; }
  .headerFixed.home.headerDark #header .settingsSearch svg {
    fill: #ffffff; }
  .headerFixed.home.headerDark #header .settings.active::before {
    background-color: #fafafa; }
  .headerFixed.home.headerDark #header .settings.active .settingsSearch::before {
    border: 1px solid #ffffff; }
  .headerFixed.home.headerDark #header .settings.active .settingsSearch::after {
    background-color: #ffffff; }
  .headerFixed.home.headerDark.active {
    background-color: #ffffff !important; }
    .headerFixed.home.headerDark.active header {
      background-color: #ffffff !important; }
      .headerFixed.home.headerDark.active header .socialMedia ul li a svg path {
        fill: #e8e8e8 !important; }
      .headerFixed.home.headerDark.active header .socialMedia ul li a svg:hover path {
        fill: #e60101 !important; }
      .headerFixed.home.headerDark.active header .menu .logo path {
        fill: #e60101 !important; }
      .headerFixed.home.headerDark.active header .menu .settings.active::before {
        background-color: #e60101 !important; }
      .headerFixed.home.headerDark.active header .menu .settings.active .settingsSearch {
        border: #e60101 1px solid !important;
        background-color: #e60101 !important; }
        .headerFixed.home.headerDark.active header .menu .settings.active .settingsSearch svg path {
          fill: #ffffff !important; }
        .headerFixed.home.headerDark.active header .menu .settings.active .settingsSearch::after {
          background-color: #e60101 !important; }
        .headerFixed.home.headerDark.active header .menu .settings.active .settingsSearch::before {
          border: 1px solid #e60101 !important; }
      .headerFixed.home.headerDark.active header .menu .settings input {
        color: initial !important; }
      .headerFixed.home.headerDark.active header .menu .settingsSearch {
        border: #e60101 1px solid !important; }
        .headerFixed.home.headerDark.active header .menu .settingsSearch svg path {
          fill: #000000 !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices__inner {
        color: #000000 !important;
        background-color: #ffffff !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices.is-open.is-focused .choices__inner {
        border: 1px solid #e60101 !important;
        border-radius: 10px 10px 0 0; }
      .headerFixed.home.headerDark.active header .menu .settings .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
        border: 1px solid #e60101 !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
        background-color: #fafafa !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
        background-color: #ffffff !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices__list--dropdown,
      .headerFixed.home.headerDark.active header .menu .settings .headerFixed #header .settings .choices__list[aria-expanded] {
        color: #000000 !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices__list--dropdown .choices__item--selectable.is-highlighted,
      .headerFixed.home.headerDark.active header .menu .settings .choices__list[aria-expanded]
      .choices__item--selectable.is-highlighted {
        background-color: #e60101 !important;
        color: #ffffff !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices:hover::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") !important; }
      .headerFixed.home.headerDark.active header .menu .settings .choices.is-open::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") !important; }
      .headerFixed.home.headerDark.active header .menu .settings .arrowContentFirst:hover .choices__inner {
        border: 1px solid #e60101 !important; }
  .headerFixed.home.headerDark .open.active {
    background-color: #ffffff; }
    .headerFixed.home.headerDark .open.active .headerFixed.home.headerDark {
      background-color: #ffffff !important; }
    .headerFixed.home.headerDark .open.active .headerFixed.home {
      background-color: #ffffff !important; }
    .headerFixed.home.headerDark .open.active header {
      background-color: #ffffff !important; }

.headerFixed
#header
.menu
.menuContent:hover
~ .headerFixed
#header
.menu
.settingsSearch::before {
  border: 1px solid #e60101; }

.menuContent:hover ~ .settingsSearch::before {
  border: 1px solid #e60101; }

.menu
.menuFirstPart
.menuContent:hover
~ .menu
.settings
.settingsSearch::after {
  background-color: #e60101; }

.menuFirstPart .menuContent:hover ~ .settings .settingsSearch::before {
  border: 1px solid #e60101; }

@media screen and (min-width: 890px) and (max-width: 1239px) {
  .container {
    margin-top: 0 !important; } }

footer {
  background-color: #272727;
  color: #ffffff;
  padding-top: 150px;
  padding-bottom: 150px; }
  @media screen and (max-width: 888px) {
    footer {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    footer {
      padding-top: 60px;
      padding-bottom: 60px; } }
  footer .container {
    display: grid;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 80px;
    height: auto; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      footer .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      footer .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      footer .container {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      footer .container {
        display: flex;
        gap: 40px; } }
  footer .sectionTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px; }
  footer .brand {
    grid-column: 1;
    width: 250px; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      footer .brand {
        grid-column: 1; } }
    footer .brand .phrase {
      font-family: "Sarabun", sans-serif;
      font-weight: 700;
      color: #ffffff;
      font-size: 30px;
      font-size: 1.875rem;
      line-height: 40px;
      position: relative;
      margin-top: 30px;
      width: 250px; }
      @media screen and (max-width: 888px) {
        footer .brand .phrase {
          line-height: 25px;
          font-size: 20px;
          font-size: 1.25rem; } }
      footer .brand .phrase::after {
        content: "";
        width: 270px;
        height: 1px;
        position: absolute;
        background-color: #808080;
        top: 120px;
        left: 0px;
        margin-top: 60px;
        margin-bottom: 35px; }
        @media screen and (max-width: 888px) {
          footer .brand .phrase::after {
            margin-top: -20px; } }
    footer .brand .logoFooter {
      margin-top: 10px; }
      @media screen and (max-width: 888px) {
        footer .brand .logoFooter {
          margin-top: 0; } }
    footer .brand .logoHoro {
      margin-top: 140px;
      width: 200px;
      height: auto;
      color: #ffffff; }
      @media screen and (max-width: 888px) {
        footer .brand .logoHoro {
          margin-top: 100px; } }
  footer .contact {
    grid-column: 2;
    width: 250px; }
    @media screen and (max-width: 888px) {
      footer .contact {
        margin-top: -30px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      footer .contact {
        grid-column: 2; } }
    footer .contactList {
      display: flex;
      flex-direction: column;
      gap: 5px; }
    footer .contactList li:last-child p {
      width: 220px; }
      @media screen and (max-width: 888px) {
        footer .contactList li:last-child p {
          width: 100%; } }
    footer .contactList li a {
      text-decoration: none; }
    footer .contactList li:nth-child(1), footer .contactList li:nth-child(2), footer .contactList li:nth-child(3) {
      cursor: pointer; }
    footer .contactList li {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px;
      display: flex;
      gap: 15px;
      align-items: start;
      cursor: default; }
      @media screen and (max-width: 888px) {
        footer .contactList li {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      footer .contactList li:hover {
        color: #e60101;
        transition: 0.5; }
        footer .contactList li:hover svg path {
          stroke: #e60101;
          transition: 0.5s; }
        footer .contactList li:hover .contactListIconWhatsapp {
          stroke: #e60101;
          transition: 0.5s; }
          footer .contactList li:hover .contactListIconWhatsapp path {
            fill: #e60101; }
      footer .contactList li .contactListIconEmail,
      footer .contactList li .contactListIconPhone,
      footer .contactList li .contactListIconLocation {
        align-self: center; }
        footer .contactList li .contactListIconEmail path,
        footer .contactList li .contactListIconPhone path,
        footer .contactList li .contactListIconLocation path {
          stroke: #ffffff; }
      footer .contactList li .contactListIconWhatsapp {
        align-self: center; }
        footer .contactList li .contactListIconWhatsapp path {
          fill: #ffffff; }
      footer .contactList li p {
        justify-self: start; }
  footer .right {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    margin-top: 120px;
    width: 220px; }
    @media screen and (max-width: 888px) {
      footer .right {
        margin-top: 50px; } }
  footer .general {
    grid-column: 3; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      footer .general {
        grid-column: 1; } }
    @media screen and (max-width: 888px) {
      footer .general {
        margin-top: -30px; } }
    footer .general .institucionalMenu li {
      font-family: "Sarabun", sans-serif;
      font-weight: 700;
      color: #ffffff;
      font-size: 22px;
      font-size: 1.375rem;
      line-height: 30px; }
      @media screen and (max-width: 888px) {
        footer .general .institucionalMenu li {
          line-height: 25px;
          font-size: 20px;
          font-size: 1.25rem; } }
      footer .general .institucionalMenu li a {
        text-decoration: none; }
      footer .general .institucionalMenu li a:hover {
        color: #e60101;
        transition: 0.5; }
    footer .general .socialMedia {
      margin-top: 35px; }
      @media screen and (max-width: 888px) {
        footer .general .socialMedia p {
          margin-top: 50px; } }
    footer .general .socialMedia ul {
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: baseline; }
      footer .general .socialMedia ul li a path {
        fill: #ffffff;
        transition: 0.5s; }
      footer .general .socialMedia ul li svg:hover path {
        fill: #e60101;
        transition: 0.2s; }
      footer .general .socialMedia ul li svg {
        height: 25px;
        width: 25px; }
  footer .itens {
    grid-column: 4; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      footer .itens {
        grid-column: 2; } }
    footer .itens .product .arrowContentFooterFirst {
      position: relative; }
      footer .itens .product .arrowContentFooterFirst::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
        width: 20px;
        height: 20px;
        position: absolute;
        color: red;
        top: 50%;
        right: 5%;
        z-index: 99; }
        @media screen and (max-width: 888px) {
          footer .itens .product .arrowContentFooterFirst::before {
            left: 220px; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          footer .itens .product .arrowContentFooterFirst::before {
            left: 220px; } }
    footer .itens .product .arrowContentFooterSecond {
      position: relative; }
      footer .itens .product .arrowContentFooterSecond::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
        width: 20px;
        height: 20px;
        position: absolute;
        color: red;
        top: 50%;
        right: 5%;
        z-index: 99; }
        @media screen and (max-width: 888px) {
          footer .itens .product .arrowContentFooterSecond::before {
            left: 220px; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          footer .itens .product .arrowContentFooterSecond::before {
            left: 220px; } }
    footer .itens .product .choices__list--dropdown,
    footer .itens .product .choices__list[aria-expanded] {
      border-radius: 0 0 10px 10px;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      background-color: #272727; }
      @media screen and (max-width: 888px) {
        footer .itens .product .choices__list--dropdown,
        footer .itens .product .choices__list[aria-expanded] {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    footer .itens .product .choices.is-open.is-focused .choices__inner {
      border-radius: 10px 10px 0 0; }
    footer .itens .product .choices__list--dropdown,
    footer .itens .product .choices__list[aria-expanded] {
      width: 250px;
      box-sizing: border-box; }
    footer .itens .product .choices__placeholder {
      opacity: initial; }
    footer .itens .product .choices[data-type*="select-one"] .choices__input {
      background-color: #272727;
      color: #ffffff; }
    footer .itens .product .choices__list--dropdown .choices__item--selectable.is-highlighted,
    footer .itens .product .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
      background-color: #808080; }
    footer .itens .product .choices__list--dropdown .choices__list,
    footer .itens .product .choices__list[aria-expanded] .choices__list {
      max-height: 180px; }
    footer .itens .product .choices__list--dropdown .choices__item--selectable::after,
    footer .itens .product .choices__list[aria-expanded] .choices__item--selectable::after {
      display: none; }
    footer .itens .product .choices[data-type*="select-one"]::after {
      display: none; }
    footer .itens .product .choices[data-type*="select-one"] .choices__inner {
      border-radius: 10px;
      padding-bottom: 0; }
    footer .itens .product .choices__list--single {
      padding-top: 2%; }
    footer .itens .product .products .filter .choices__item {
      font-size: 15px; }
    footer .itens .product .choices__list--single .choices__item {
      width: 90%; }
    footer .itens .product .choices__list--dropdown,
    footer .itens .product .choices__list[aria-expanded] {
      word-break: initial;
      z-index: 999; }
    footer .itens .product .choices__item--disabled {
      display: none !important; }
    footer .itens .product .choices__inner {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 29px;
      border-radius: 10px;
      border: 1px solid #e8e8e8;
      background-color: #272727;
      margin-top: 20px;
      position: relative;
      width: 250px;
      height: 50px;
      box-sizing: border-box;
      padding-right: 20px; }
      @media screen and (max-width: 888px) {
        footer .itens .product .choices__inner {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    footer .itens .productSearch {
      cursor: pointer;
      text-decoration: none;
      margin-top: 20px;
      margin-bottom: 30px;
      width: 250px;
      height: 50px;
      padding: 10px 50px;
      background: #e60101;
      border-radius: 10px;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-content: center; }
    footer .itens .software {
      margin-top: 30px; }
      @media screen and (max-width: 888px) {
        footer .itens .software {
          margin-top: 30px; } }
      footer .itens .softwareButton {
        cursor: pointer;
        text-decoration: none;
        margin-top: 30px;
        width: 250px;
        height: 50px;
        background-image: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
        border-radius: 10px;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #ffffff;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px; }
        footer .itens .softwareButton:hover {
          background-image: linear-gradient(281deg, #25a3e7 20%, #145bbe 70%);
          transition: 0.5s; }

footer.product {
  padding-top: 250px; }
  @media screen and (max-width: 888px) {
    footer.product {
      padding-top: 100px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    footer.product {
      padding-top: 250px; } }

footer.products {
  padding-top: 200px; }
  @media screen and (max-width: 888px) {
    footer.products {
      padding-top: 100px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    footer.products {
      padding-top: 350px; } }

footer.contact {
  padding-top: 500px; }
  @media screen and (max-width: 888px) {
    footer.contact {
      padding-top: 100px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    footer.contact {
      padding-top: 350px; } }

footer.find {
  padding-top: 400px; }

.register {
  background: linear-gradient(4deg, #b30001 0%, #ff0001 84%); }
  .registerContent {
    color: #ffffff;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%; }
    @media screen and (max-width: 888px) {
      .registerContent {
        text-align: center;
        margin-top: 10px; } }
  .register .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .register .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .register .container {
        max-width: 100%;
        padding: 0px 10px; } }
  .registerTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px;
    padding-bottom: 30px;
    text-align: center !important;
    width: 500px; }
    @media screen and (max-width: 888px) {
      .registerTitle {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
    @media screen and (max-width: 888px) {
      .registerTitle {
        width: 100%; } }
  .registerButtons {
    position: relative; }
  .registerInput {
    background-color: transparent;
    border: #e8e8e8 1px solid;
    border-radius: 10px;
    width: 410px;
    height: 50px;
    margin-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    .registerInput:placeholder {
      color: #e8e8e8;
      opacity: 1; }
    .registerInput:-moz-placeholder {
      color: #e8e8e8;
      opacity: 1; }
    .registerInput::-moz-placeholder {
      color: #e8e8e8;
      opacity: 1; }
    .registerInput:-ms-input-placeholder {
      color: #e8e8e8;
      opacity: 1; }
    .registerInput::-webkit-input-placeholder {
      color: #e8e8e8;
      opacity: 1; }
    @media screen and (max-width: 888px) {
      .registerInput {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .registerInput {
        width: 220px; } }
  .registerButton {
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 16px 40px;
    background-color: #ffffff;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    position: absolute;
    right: 0; }
    @media screen and (max-width: 888px) {
      .registerButton {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .registerButton {
        padding: 16px 16px; } }
    .registerButton:hover {
      transition: 0.5s;
      color: #000000; }
      .registerButton:hover .registerButtonIcone {
        transform: rotate(40deg);
        transition: 0.5s; }
    .registerButtonIcone {
      transition: 0.5s;
      margin-left: 5px; }
      .registerButtonIcone:hover {
        transform: rotate(40deg);
        transition: 0.5s; }
  .register #registerTermInput {
    cursor: pointer; }
    .register #registerTermInput input {
      border-radius: 50%; }
  .register .checkboxContent {
    display: flex;
    align-items: center; }
  .registerTerm {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px; }
    @media screen and (max-width: 888px) {
      .registerTerm {
        font-size: 12px; } }
  .register input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 2px;
    background-clip: content-box;
    border: 2px solid #ffffff;
    border-radius: 50%; }
  .register input[type="checkbox"]:checked {
    background-color: #ffffff; }

.lastNews {
  overflow: hidden; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .lastNews {
      margin-bottom: 10px; } }
  .lastNews .container {
    display: block;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 50px; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .lastNews .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .lastNews .container {
        max-width: 100%;
        padding: 0px 10px; } }
  .lastNewsIntroduction {
    position: relative;
    z-index: -99; }
  .lastNewsDetailIcon {
    width: 100%;
    transform: rotate(270deg);
    position: absolute;
    top: -497px;
    right: -550px;
    z-index: -999; }
    @media screen and (max-width: 888px) {
      .lastNewsDetailIcon {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .lastNewsDetailIcon {
        display: none; } }
  .lastNewsTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem; }
    @media screen and (max-width: 888px) {
      .lastNewsTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .lastNewsTitle {
        line-height: 40px;
        font-size: 35px; } }
  .lastNewsPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    margin-bottom: 50px; }
    @media screen and (max-width: 888px) {
      .lastNewsPhrase {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }

.posts {
  grid-template-columns: 1fr 1fr;
  display: grid;
  row-gap: 10px;
  column-gap: 50px; }
  @media screen and (max-width: 888px) {
    .posts {
      grid-template-columns: 1fr;
      gap: 10px; } }

.lastNew a {
  text-decoration: none; }

.lastNew {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  height: auto;
  width: auto;
  margin-bottom: 50px;
  overflow: hidden;
  position: relative; }
  @media screen and (max-width: 888px) {
    .lastNew {
      margin-bottom: 20px; } }
  .lastNew::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    right: 110px;
    bottom: 45px; }
    @media screen and (max-width: 888px) {
      .lastNew::after {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .lastNew::after {
        display: none; } }
  .lastNew::before {
    content: "";
    width: 472px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    bottom: 50px;
    left: 0; }
    @media screen and (max-width: 888px) {
      .lastNew::before {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .lastNew::before {
        display: none; } }
  .lastNew:hover {
    box-shadow: 1px 0 20px #e8e8e8; }
    .lastNew:hover .lastNewTitle {
      transition: 0.5s;
      color: #e60101; }
    .lastNew:hover a svg path {
      transition: 0.5s;
      stroke: #e60101; }
    .lastNew:hover .lastNewImage {
      -webkit-transform: scale(1.1);
      transform: scale(1.1); }
    .lastNew:hover::before {
      animation: fade 500ms ease;
      animation-fill-mode: forwards; }
    .lastNew:hover::after {
      transition: 2s;
      border: 1px solid #e60101; }
  .lastNewPost {
    padding: 50px 100px 50px 50px;
    display: flex;
    flex-direction: column;
    position: relative; }
    @media screen and (max-width: 888px) {
      .lastNewPost {
        padding: 20px 30px; } }
  .lastNewContentImage {
    width: 100%;
    height: 200px;
    overflow: hidden; }
  .lastNewImage {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center;
    border-radius: 20px 20px 0 0;
    transition: all 0.5s ease; }
    @media screen and (max-width: 888px) {
      .lastNewImage {
        height: 150px; } }
  .lastNewCategory {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #e60101;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .lastNewTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px; }
    @media screen and (max-width: 888px) {
      .lastNewTitle {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
  .lastNew p {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    margin-bottom: 20px; }
    @media screen and (max-width: 888px) {
      .lastNew p {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .lastNewButtonLink {
    position: absolute;
    align-self: flex-end;
    margin-right: -55px;
    margin-top: 302px;
    margin-bottom: -10px; }
    @media screen and (max-width: 888px) {
      .lastNewButtonLink {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .lastNewButtonLink {
        display: none; } }
  .lastNewIcon {
    transform: rotate(270deg); }
    .lastNewIcon path {
      stroke: #b30001; }

.seeMoreNews {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; }
  @media screen and (max-width: 888px) {
    .seeMoreNews {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }

.seeMoreNewsButton {
  cursor: pointer;
  border: 1px solid #e60101;
  background-color: #ffffff;
  border-radius: 10px;
  text-align: center;
  height: 50px;
  width: 250px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Sarabun", sans-serif;
  font-weight: regular;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .seeMoreNewsButton {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  .seeMoreNewsButton:hover {
    transition: 0.5s;
    background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
    color: #ffffff; }

.container {
  display: flex;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto;
  z-index: 9;
  position: relative; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .container {
      max-width: 100%;
      padding: 0px 10px; } }
  .container .programs {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 100px;
    background-color: #fafafa;
    padding: 50px;
    border-radius: 20px;
    margin-top: 50px;
    margin-bottom: -120px; }
    @media screen and (max-width: 888px) {
      .container .programs {
        grid-template-columns: 1fr;
        text-align: center;
        margin-top: 50px;
        margin-bottom: -50px;
        padding: 30px; } }
    .container .programsImages {
      display: grid;
      grid-template-columns: 5fr 1fr;
      gap: 20px;
      background-color: #ffffff;
      border-radius: 20px;
      box-shadow: 1px 0 20px #e8e8e8;
      padding-right: 10px; }
      @media screen and (max-width: 888px) {
        .container .programsImages {
          display: none; } }
    .container .programsImage {
      width: 100%;
      height: 100%;
      border-radius: 20px 0 0 20px; }
    .container .programsImagesExamples {
      display: flex;
      flex-direction: column;
      justify-content: space-around; }
    .container .programsImageExample {
      width: 100%; }
    .container .programsContent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; }
      @media screen and (max-width: 888px) {
        .container .programsContent {
          align-items: center; } }
    .container .programsPhrase {
      font-family: "Sarabun", sans-serif;
      font-weight: 500;
      color: #000000;
      font-size: 15px;
      font-size: 0.9375rem;
      line-height: 30px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px; }
    .container .programsTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 60px;
      font-size: 3.75rem;
      width: 550px;
      background: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      margin-bottom: 20px; }
      @media screen and (max-width: 888px) {
        .container .programsTitle {
          line-height: 35px;
          font-size: 30px;
          font-size: 1.875rem; } }
      @media screen and (max-width: 888px) {
        .container .programsTitle {
          line-height: 35px;
          font-size: 35px;
          width: 100%; } }
    .container .programsText {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px;
      width: 420px;
      margin-bottom: 30px; }
      @media screen and (max-width: 888px) {
        .container .programsText {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .container .programsText {
          width: 100%; } }
    .container .programsButton {
      text-decoration: none;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      padding: 10px 50px 10px 50px;
      background-image: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
      border-radius: 10px;
      height: 50px;
      width: 250px;
      display: block;
      box-sizing: border-box; }
      @media screen and (max-width: 888px) {
        .container .programsButton {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      .container .programsButton:hover {
        transition: 0.5s;
        color: #ffffff;
        background-image: linear-gradient(281deg, #25a3e7 20%, #145bbe 70%); }

.container {
  display: block;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .container {
      max-width: 100%;
      padding: 0px 10px; } }
  .container .aplication {
    margin-top: 100px;
    margin-bottom: 50px;
    width: 100%;
    overflow: hidden; }
    @media screen and (max-width: 888px) {
      .container .aplication {
        margin-top: 40px; } }
    .container .aplicationTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 45px;
      font-size: 2.8125rem;
      line-height: 50px;
      position: relative; }
      @media screen and (max-width: 888px) {
        .container .aplicationTitle {
          line-height: 30px;
          font-size: 25px;
          font-size: 1.5625rem; } }
      .container .aplicationTitle::before {
        content: "";
        width: 820px;
        height: 1px;
        position: absolute;
        background-color: #e8e8e8;
        top: 30px;
        left: 240px; }
        @media screen and (max-width: 888px) {
          .container .aplicationTitle::before {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .container .aplicationTitle::before {
            display: none; } }
      .container .aplicationTitle::after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        left: 229px;
        top: 23px; }
        @media screen and (max-width: 888px) {
          .container .aplicationTitle::after {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .container .aplicationTitle::after {
            display: none; } }
    .container .aplicationIconBox {
      display: flex;
      gap: 30px; }
    .container .aplicationTitleBox {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px; }
      @media screen and (max-width: 888px) {
        .container .aplicationTitleBox {
          margin-bottom: 30px; } }
    .container .aplicationBackLink {
      cursor: pointer; }
      .container .aplicationBackLink.swiper-button-disabled path,
      .container .aplicationBackLink.swiper-button-disabled g {
        stroke: #e8e8e8; }
    .container .aplicationGoLink {
      cursor: pointer; }
      .container .aplicationGoLink.swiper-button-disabled path,
      .container .aplicationGoLink.swiper-button-disabled g {
        stroke: #e8e8e8; }
    .container .aplicationBackIcon {
      transform: rotate(180deg); }
    .container .aplicationGoIcon {
      transform: rotate(0deg); }
    .container .aplicationList {
      margin-right: 0 !important; }
    .container .aplicationListContent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%; }
    .container .aplicationList li a {
      width: 100%;
      height: 100%;
      text-decoration: none; }
    .container .aplicationList li:hover .aplicationBackground {
      transition: 1s ease;
      transform: scale(1.2); }
    .container .aplicationList li:hover .aplicationListContent {
      transform: scale(none);
      transform: none; }
    .container .aplicationList li {
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden; }
      .container .aplicationList li:hover .aplicationSeeMorePhrase {
        transition: 0.5s;
        text-decoration: underline; }
    .container .aplication .galleryAplication {
      height: 288px !important;
      width: 100%;
      overflow: inherit; }
    .container .aplication .swiper-slide img {
      display: block;
      width: 100%; }
    .container .aplicationBackground {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center; }
    .container .aplicationSeeMore {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      justify-content: center; }
    .container .aplicationSeeMoreTitle {
      text-decoration: none;
      font-family: "Sarabun", sans-serif;
      font-weight: 700;
      color: #ffffff;
      font-size: 30px;
      font-size: 1.875rem;
      line-height: 40px; }
      @media screen and (max-width: 888px) {
        .container .aplicationSeeMoreTitle {
          line-height: 25px;
          font-size: 20px;
          font-size: 1.25rem; } }
    .container .aplicationSeeMorePhrase {
      text-decoration: none;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px; }
      @media screen and (max-width: 888px) {
        .container .aplicationSeeMorePhrase {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    .container .aplicationSeeMoreIcon {
      cursor: pointer;
      transform: rotate(270deg);
      width: 12px; }

.moreNews {
  overflow: hidden; }
  .moreNews .container {
    display: block;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    display: block;
    margin-top: 50px;
    margin-bottom: 100px; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .moreNews .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .moreNews .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .moreNews .container {
        margin-top: 10px;
        margin-bottom: 50px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .moreNews .container {
        padding-bottom: 20px; } }
    .moreNews .container .moreNewsButtonBox {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px; }
    .moreNews .container .moreNewsTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 45px;
      font-size: 2.8125rem;
      line-height: 50px;
      position: relative; }
      @media screen and (max-width: 888px) {
        .moreNews .container .moreNewsTitle {
          line-height: 30px;
          font-size: 25px;
          font-size: 1.5625rem; } }
      .moreNews .container .moreNewsTitle::after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        left: 339px;
        top: 25px; }
        @media screen and (max-width: 888px) {
          .moreNews .container .moreNewsTitle::after {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .moreNews .container .moreNewsTitle::after {
            display: none; } }
      .moreNews .container .moreNewsTitle::before {
        content: "";
        width: 100vw;
        height: 1px;
        position: absolute;
        background-color: #e8e8e8;
        top: 30px;
        left: 350px; }
        @media screen and (max-width: 888px) {
          .moreNews .container .moreNewsTitle::before {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .moreNews .container .moreNewsTitle::before {
            display: none; } }
    .moreNews .container .moreNewsList {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
      margin-top: 20px; }
      @media screen and (max-width: 888px) {
        .moreNews .container .moreNewsList {
          grid-template-columns: 1fr;
          gap: 30px; } }
    .moreNews .container .moreNewsItemPost {
      display: none; }
    .moreNews .container .moreNewsItemPost:nth-child(1), .moreNews .container .moreNewsItemPost:nth-child(2), .moreNews .container .moreNewsItemPost:nth-child(3) {
      display: block; }
    .moreNews .container .moreNewsItem {
      display: grid;
      gap: 20px;
      border: 1px solid #e8e8e8;
      border-radius: 20px;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      border: 1px solid #e8e8e8;
      border-radius: 20px;
      overflow: hidden;
      width: 390px;
      height: 320px; }
      @media screen and (max-width: 888px) {
        .moreNews .container .moreNewsItem {
          width: 100%;
          height: 100%; } }
      .moreNews .container .moreNewsItem:hover {
        box-shadow: 1px 0 20px #e8e8e8; }
        .moreNews .container .moreNewsItem:hover .moreNewsItemTitle a {
          transition: 0.5s;
          color: #e60101; }
        .moreNews .container .moreNewsItem:hover .moreNewsItemImage {
          -webkit-transform: scale(1.1);
          transform: scale(1.1); }
      .moreNews .container .moreNewsItemContent {
        padding: 20px; }
      .moreNews .container .moreNewsItemDate {
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #808080;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 18px;
        letter-spacing: 2px;
        text-transform: uppercase; }
        @media screen and (max-width: 888px) {
          .moreNews .container .moreNewsItemDate {
            font-size: 12px; } }
      .moreNews .container .moreNewsItemCategory {
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #e60101;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 18px;
        letter-spacing: 2px;
        text-transform: uppercase;
        position: relative;
        margin-left: 5px; }
        @media screen and (max-width: 888px) {
          .moreNews .container .moreNewsItemCategory {
            font-size: 12px; } }
        .moreNews .container .moreNewsItemCategory::before {
          content: "";
          width: 1px;
          height: 1px;
          position: absolute;
          border: 1px solid #808080;
          background-color: #808080;
          border-radius: 50%;
          left: -7px;
          top: 10px; }
      .moreNews .container .moreNewsItemTitle a {
        font-family: "Sarabun", sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 22px;
        font-size: 1.375rem;
        line-height: 36px;
        text-decoration: none; }
        @media screen and (max-width: 888px) {
          .moreNews .container .moreNewsItemTitle a {
            line-height: 25px;
            font-size: 20px;
            font-size: 1.25rem; } }
      .moreNews .container .moreNewsItem p {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #808080;
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 18px; }
      .moreNews .container .moreNewsItemImageContent {
        overflow: hidden; }
      .moreNews .container .moreNewsItemImage {
        width: 100%;
        height: 100%;
        transition: all 0.5s ease;
        border-radius: 0 20px 20px 0;
        object-fit: cover;
        object-position: center; }
    .moreNews .container .moreNewsButton {
      cursor: pointer;
      border: 1px solid #e60101;
      border-radius: 10px;
      width: 250px;
      height: 50px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px; }
      @media screen and (max-width: 888px) {
        .moreNews .container .moreNewsButton {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      .moreNews .container .moreNewsButtonIcon path {
        stroke: #e60101; }
      .moreNews .container .moreNewsButton:hover {
        transition: 0.5s;
        background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
        color: #ffffff; }
        .moreNews .container .moreNewsButton:hover .moreNewsButtonIcon path {
          transition: 0.5s;
          stroke: #ffffff; }

#page404 .title {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase; }
  #page404 .title .sad {
    transform: rotate(90deg);
    font-size: 60px; }

.home .knonwAbout {
  background-color: #000000;
  height: 100vh; }
  @media screen and (max-width: 888px) {
    .home .knonwAbout {
      height: 93vh; } }
  .home .knonwAbout .container {
    height: 100%; }
  .home .knonwAboutContent {
    opacity: 0.2; }
  .home .knonwAboutVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -999;
    background-size: cover;
    background-clip: url("img/homeinova.mp4") no-repeat; }
  .home .knonwAboutContentText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    z-index: 9;
    height: calc(100% - 50px);
    padding-top: 50px; }
    .home .knonwAboutContentText.active {
      opacity: 0; }
  .home .knonwAboutTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 60px;
    font-size: 3.75rem;
    width: 60%; }
    @media screen and (max-width: 888px) {
      .home .knonwAboutTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .home .knonwAboutTitle {
        width: 100%; } }
  .home .knonwAboutButton {
    text-decoration: none;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border: 1px solid #ffffff;
    text-align: center;
    height: 50px;
    width: 250px;
    box-sizing: border-box;
    margin-top: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; }
    @media screen and (max-width: 888px) {
      .home .knonwAboutButton {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .home .knonwAboutButton:hover {
      transition: 0.5s;
      border: 1px solid #e60101;
      background: #e60101; }
    .home .knonwAboutButtonIcon {
      transform: rotate(0deg);
      margin-left: 10px; }
      .home .knonwAboutButtonIcon path {
        stroke: #ffffff; }
.home .introduction .bannerContainer {
  display: block;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 100px;
  position: relative;
  margin-top: 150px; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .home .introduction .bannerContainer {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .home .introduction .bannerContainer {
      max-width: 100%;
      padding: 0px 10px; } }
  @media screen and (max-width: 888px) {
    .home .introduction .bannerContainer {
      margin-bottom: 0;
      margin-top: 0; } }
  .home .introduction .bannerContainer::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    bottom: 45px;
    right: 188px;
    z-index: 999;
    display: none; }
    @media screen and (max-width: 888px) {
      .home .introduction .bannerContainer::after {
        display: none; } }
  .home .introduction .bannerContainer::before {
    content: "";
    width: 390px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    bottom: 50px;
    right: 200px;
    z-index: 999;
    display: none; }
    @media screen and (max-width: 888px) {
      .home .introduction .bannerContainer::before {
        display: none; } }
.home .introduction .galleryBanner {
  margin-top: 110px;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 20px;
  border-radius: 20px; }
  @media screen and (max-width: 888px) {
    .home .introduction .galleryBanner {
      margin-top: 10px;
      padding-bottom: 30px; } }
.home .introduction .swiper-slide img {
  display: block;
  width: 100%; }
.home .introduction .swiper-wrapper {
  background-color: #ffffff; }
.home .introduction .swiper-slide {
  padding-bottom: 100px;
  background-color: #ffffff; }
.home .introduction .bannerList li {
  background-size: cover;
  background-position: center;
  border-radius: 20px; }
.home .introductionTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 40px; }
  @media screen and (max-width: 888px) {
    .home .introductionTitle {
      line-height: 25px;
      font-size: 20px;
      font-size: 1.25rem; } }
  @media screen and (max-width: 888px) {
    .home .introductionTitle {
      font-size: 20px; } }
.home .introductionText {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px;
  width: 500px; }
  @media screen and (max-width: 888px) {
    .home .introductionText {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (max-width: 888px) {
    .home .introductionText {
      width: 100%;
      font-size: 14px; } }
.home .introduction .detail {
  position: absolute;
  width: 100%;
  height: 200px;
  margin-top: -110px;
  left: 5px;
  z-index: -9; }
  @media screen and (max-width: 888px) {
    .home .introduction .detail {
      display: none; } }
.home .introductionBanner {
  width: 1240px !important;
  height: 542px !important;
  border-radius: 20px; }
  @media screen and (max-width: 888px) {
    .home .introductionBanner {
      width: 100% !important;
      height: 100% !important; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .home .introductionBanner {
      width: 100% !important;
      height: 100% !important; } }
.home .introduction .ourProduct {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
  padding: 50px 50px 30px 50px;
  position: absolute;
  left: 50px;
  margin-top: -200px;
  width: 500px; }
  @media screen and (max-width: 888px) {
    .home .introduction .ourProduct {
      padding: 20px;
      margin: -100px 10px 10px 10px;
      left: 0;
      width: auto; } }
  .home .introduction .ourProduct:hover .seeMore a {
    transition: 0.5s;
    color: #000000; }
  .home .introduction .ourProduct:hover .seeMoreContent::after {
    animation: fade 500ms ease;
    animation-fill-mode: forwards; }
  .home .introduction .ourProduct:hover .seeMoreContent::before {
    transition: 1s;
    border: 1px solid #e60101; }
  .home .introduction .ourProduct:hover .seeMoreIcone path {
    transition: 0.5s;
    stroke: #e60101; }
  .home .introduction .ourProduct p {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 500px; }
    @media screen and (max-width: 888px) {
      .home .introduction .ourProduct p {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .home .introduction .ourProduct p {
        width: 100%;
        font-size: 14px; } }
.home .introduction .seeMoreContent {
  margin-top: 30px;
  position: relative;
  justify-content: end;
  display: flex;
  gap: 20px;
  align-content: center; }
  @media screen and (max-width: 888px) {
    .home .introduction .seeMoreContent {
      margin-top: 10px; } }
  .home .introduction .seeMoreContent::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    top: 5px;
    right: 139px; }
    @media screen and (max-width: 888px) {
      .home .introduction .seeMoreContent::before {
        display: none; } }
  .home .introduction .seeMoreContent::after {
    content: "";
    width: 400px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    top: 10px;
    left: -50px; }
    @media screen and (max-width: 888px) {
      .home .introduction .seeMoreContent::after {
        display: none; } }
  .home .introduction .seeMoreContent .seeMore a {
    text-decoration: none; }
  .home .introduction .seeMoreContent .seeMore {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #e8e8e8;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px; }
    .home .introduction .seeMoreContent .seeMoreIcone {
      cursor: pointer;
      transform: rotate(270deg); }
      .home .introduction .seeMoreContent .seeMoreIcone path {
        stroke: #b30001; }
.home .introductionButtons {
  display: flex;
  justify-content: end;
  margin-top: -100px;
  width: 100%;
  z-index: 9;
  padding-top: 20px;
  padding-bottom: 20px; }
  @media screen and (max-width: 888px) {
    .home .introductionButtons {
      margin-top: 0; } }
  .home .introductionButtonsContent {
    background-color: #ffffff;
    gap: 30px;
    display: flex;
    width: 30%;
    justify-content: end;
    z-index: 99;
    position: relative;
    bottom: 5px; }
  .home .introductionButtonsBackLink.swiper-button-disabled path,
  .home .introductionButtonsBackLink.swiper-button-disabled g {
    stroke: #e8e8e8; }
  .home .introductionButtonsGoLink.swiper-button-disabled path,
  .home .introductionButtonsGoLink.swiper-button-disabled g {
    stroke: #e8e8e8; }
.home .introduction .goIcon {
  transform: rotate(0deg); }
.home .introduction .backIcon {
  transform: rotate(180deg); }
.home .apresentation .container {
  display: grid;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .home .apresentation .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .home .apresentation .container {
      max-width: 100%;
      padding: 0px 10px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .home .apresentation .container {
      padding-top: 50px; } }
  .home .apresentation .container .apresentationInicial, .home .apresentation .container .apresentationText {
    display: grid;
    grid-template-columns: 2fr 8fr;
    margin-bottom: 50px; }
    @media screen and (max-width: 888px) {
      .home .apresentation .container .apresentationInicial, .home .apresentation .container .apresentationText {
        display: flex;
        flex-direction: column; } }
  .home .apresentation .container .apresentationInicial {
    gap: 70px; }
    @media screen and (max-width: 888px) {
      .home .apresentation .container .apresentationInicial {
        gap: 20px; } }
  .home .apresentation .container .apresentationText {
    gap: 150px; }
    @media screen and (max-width: 888px) {
      .home .apresentation .container .apresentationText {
        gap: 10px; } }
.home .apresentationTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 60px;
  font-size: 3.75rem;
  width: 380px;
  grid-column: 1;
  align-self: center;
  font-weight: 400; }
  @media screen and (max-width: 888px) {
    .home .apresentationTitle {
      line-height: 35px;
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (max-width: 888px) {
    .home .apresentationTitle {
      line-height: 40px;
      font-size: 35px;
      width: 100%;
      margin-bottom: 10px; } }
.home .apresentation .apresentationImage {
  border-radius: 20px;
  grid-column: 2;
  width: 100%;
  height: 400px; }
  @media screen and (max-width: 888px) {
    .home .apresentation .apresentationImage {
      height: 100%; } }
.home .apresentation .detailUprigth {
  height: 800px; }
  @media screen and (max-width: 888px) {
    .home .apresentation .detailUprigth {
      display: none; } }
.home .apresentation .quality {
  width: 600px;
  height: 250px;
  box-sizing: border-box; }
  @media screen and (max-width: 888px) {
    .home .apresentation .quality {
      margin-left: 0;
      width: auto;
      height: auto; } }
.home .apresentation .inovation {
  width: 600px;
  height: 250px;
  box-sizing: border-box;
  margin-left: 200px; }
  @media screen and (max-width: 888px) {
    .home .apresentation .inovation {
      margin-left: 0;
      width: auto;
      height: auto; } }
.home .apresentation .personalization {
  width: 600px;
  height: 250px;
  box-sizing: border-box;
  margin-left: 400px; }
  @media screen and (max-width: 888px) {
    .home .apresentation .personalization {
      margin-left: 0;
      width: auto;
      height: auto; } }
.home .apresentation .explanationBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: -110px; }
  @media screen and (max-width: 888px) {
    .home .apresentation .explanationBox {
      margin-left: 0; } }
.home .apresentation .explanation {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 50px 50px 50px 150px;
  margin-bottom: 20px; }
  @media screen and (max-width: 888px) {
    .home .apresentation .explanation {
      padding: 30px 30px 30px 100px; } }
  .home .apresentation .explanation:hover {
    box-shadow: 1px 0 20px #e8e8e8;
    transition: 0.5s; }
  .home .apresentation .explanationTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #e60101;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px;
    margin-bottom: 10px; }
    @media screen and (max-width: 888px) {
      .home .apresentation .explanationTitle {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
  .home .apresentation .explanationText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .home .apresentation .explanationText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .home .apresentation .explanationIcon {
    margin-left: -80px;
    position: absolute; }
.home .information {
  margin-top: -50px;
  z-index: 9;
  position: relative; }
  .home .information .product {
    display: flex;
    gap: 70px;
    text-align: center;
    justify-content: center; }
    @media screen and (max-width: 888px) {
      .home .information .product {
        flex-direction: column; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .home .information .product {
        flex-direction: column; } }
    .home .information .productFunction, .home .information .productAplication {
      background-color: #ffffff;
      padding: 70px;
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 40px; }
      @media screen and (max-width: 888px) {
        .home .information .productFunction, .home .information .productAplication {
          padding: 20px; } }
    .home .information .productFunctionTitle, .home .information .productAplicationTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 45px;
      font-size: 2.8125rem;
      line-height: 50px;
      width: 450px; }
      @media screen and (max-width: 888px) {
        .home .information .productFunctionTitle, .home .information .productAplicationTitle {
          line-height: 30px;
          font-size: 25px;
          font-size: 1.5625rem; } }
      @media screen and (max-width: 888px) {
        .home .information .productFunctionTitle, .home .information .productAplicationTitle {
          width: 100%; } }
    .home .information .productList {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; }
      @media screen and (max-width: 888px) {
        .home .information .productList {
          grid-template-columns: auto auto; } }
      .home .information .productList a {
        text-decoration: none; }
      .home .information .productList li:hover {
        transition: 0.5s;
        text-decoration: underline; }
        .home .information .productList li:hover .productIcon path {
          transition: 0.5s;
          stroke: #e60101; }
      .home .information .productList li a {
        display: flex;
        flex-direction: row;
        gap: 5px;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 22px;
        font-size: 1.375rem;
        line-height: 30px;
        align-items: center;
        width: fit-content; }
    .home .information .productIcon {
      transform: rotate(270deg);
      width: 12px; }
      .home .information .productIcon path {
        stroke: #000000; }
    .home .information .product .seeAll {
      text-decoration: none;
      cursor: pointer;
      background-color: #e60101;
      border: 1px solid #e60101;
      text-align: center;
      height: 50px;
      width: 250px;
      box-sizing: border-box;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px; }
      @media screen and (max-width: 888px) {
        .home .information .product .seeAll {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      .home .information .product .seeAll:hover {
        transition: 0.5s;
        background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%); }
      .home .information .product .seeAllIcon {
        transform: rotate(270deg); }
        .home .information .product .seeAllIcon path {
          stroke: #ffffff; }
.home .collaboratorsHome {
  background-image: linear-gradient(#101010, rgba(16, 16, 16, 0.7)), url("../img/lab.png");
  width: 100%;
  margin-top: -100px;
  z-index: -9;
  background-size: cover;
  background-position: center; }
  .home .collaboratorsHome .collaboratorsContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
    position: relative; }
  .home .collaboratorsHome .collaboratorsPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .home .collaboratorsHome .collaboratorsTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 60px;
    font-size: 3.75rem;
    width: 900px;
    margin-bottom: 100px; }
    @media screen and (max-width: 888px) {
      .home .collaboratorsHome .collaboratorsTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .home .collaboratorsHome .collaboratorsTitle {
        line-height: 40px;
        font-size: 35px;
        width: 100%; } }
.home .collaboratorsContentDetails {
  position: relative; }
  .home .collaboratorsContentDetails .collaboratorsContentDetailFirst1 {
    position: absolute;
    bottom: -100px;
    z-index: -9;
    left: -118px; }
    @media screen and (max-width: 888px) {
      .home .collaboratorsContentDetails .collaboratorsContentDetailFirst1 {
        display: none; } }
  .home .collaboratorsContentDetails .collaboratorsContentDetailFirst2 {
    position: absolute;
    left: 30px;
    bottom: -94px;
    z-index: 9; }
    @media screen and (max-width: 888px) {
      .home .collaboratorsContentDetails .collaboratorsContentDetailFirst2 {
        display: none; } }
  .home .collaboratorsContentDetails .collaboratorsContentDetailSecond1 {
    position: absolute;
    right: 168px;
    bottom: -274px;
    z-index: -9; }
    @media screen and (max-width: 888px) {
      .home .collaboratorsContentDetails .collaboratorsContentDetailSecond1 {
        display: none; } }
  .home .collaboratorsContentDetails .collaboratorsContentDetailSecond2 {
    position: absolute;
    right: 0;
    bottom: -276px;
    z-index: 9; }
    @media screen and (max-width: 888px) {
      .home .collaboratorsContentDetails .collaboratorsContentDetailSecond2 {
        display: none; } }
.home .collaboratorsSendResume .collaboratorsBoxOut {
  display: flex;
  justify-content: center; }
  .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBox {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 70px 100px 70px 100px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    text-align: start;
    margin-top: -100px;
    box-shadow: 1px 0 20px #e8e8e8;
    margin-left: 130px;
    margin-right: 130px;
    margin-bottom: 100px; }
    @media screen and (max-width: 888px) {
      .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBox {
        padding: 30px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 50px;
        grid-template-columns: 1fr;
        margin-top: -170px; } }
    .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxText {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px;
      width: 360px; }
      @media screen and (max-width: 888px) {
        .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxText {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxText {
          width: 100%; } }
    .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend {
      margin-top: 20px;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      background-color: #e60101;
      text-align: center;
      height: 50px;
      width: 250px;
      box-sizing: border-box;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      text-decoration: none; }
      @media screen and (max-width: 888px) {
        .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend:hover {
        transition: 0.5s;
        color: #ffffff; }
        .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend:hover .collaboratorsBoxSendIcon {
          transform: rotate(40deg);
          transition: 0.5s; }
      .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSendIcon {
        margin-left: 5px; }
        .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSendIcon path {
          stroke: #ffffff; }
    .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxImage {
      margin-top: -200px;
      margin-right: -80px;
      margin-bottom: -70px;
      margin-left: -100px; }
      @media screen and (max-width: 888px) {
        .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxImage {
          display: none; } }
    .home .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBox .collaboratorImage {
      width: 100%;
      height: 100%; }
.home .collaboratorsNumber .numberInformationContent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 100px;
  margin-left: 130px;
  margin-right: 130px;
  margin-bottom: 40px; }
  @media screen and (max-width: 888px) {
    .home .collaboratorsNumber .numberInformationContent {
      flex-direction: column;
      gap: 20px;
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 20px;
      justify-content: center; } }
  .home .collaboratorsNumber .numberInformationContent li {
    display: flex;
    flex-direction: column; }
  .home .collaboratorsNumber .numberInformationContent li:nth-child(1) p {
    width: 112px; }
  .home .collaboratorsNumber .numberInformationContent li:nth-child(2) p {
    width: 120px; }
.home .collaboratorsNumber .numberInformationData {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #e60101;
  font-size: 111px;
  font-size: 6.9375rem;
  line-height: 120px;
  font-weight: bold; }
  @media screen and (max-width: 888px) {
    .home .collaboratorsNumber .numberInformationData {
      font-size: 70px;
      line-height: 80px; } }
.home .collaboratorsNumber .numberInformationText {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #808080;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 30px;
  width: 160px; }
  @media screen and (max-width: 888px) {
    .home .collaboratorsNumber .numberInformationText {
      font-size: 18px;
      line-height: 20px; } }
.home .changeColor {
  color: #e60101;
  font-weight: bold; }

.about .changeColor {
  color: #e60101;
  font-weight: bold; }
.about .whoWeAreSection {
  margin-top: 200px;
  margin-bottom: 150px; }
  @media screen and (max-width: 888px) {
    .about .whoWeAreSection {
      margin-top: 0;
      margin-bottom: 0; } }
.about .whoWeAre {
  display: grid;
  grid-template-columns: 1fr 6fr; }
  @media screen and (max-width: 888px) {
    .about .whoWeAre {
      grid-template-columns: 1fr;
      margin-top: 100px;
      margin-bottom: 50px; } }
  .about .whoWeArePhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #e60101;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .about .whoWeAreTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem;
    font-weight: 400; }
    @media screen and (max-width: 888px) {
      .about .whoWeAreTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .about .whoWeAreTitle {
        line-height: 40px;
        font-size: 35px; } }
  .about .whoWeAreText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 45%;
    margin-top: 20px; }
    @media screen and (max-width: 888px) {
      .about .whoWeAreText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .about .whoWeAreText {
        width: 100%; } }
  .about .whoWeAreIcon {
    position: absolute;
    z-index: -9; }
    @media screen and (max-width: 888px) {
      .about .whoWeAreIcon {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .about .whoWeAreIcon {
        display: none; } }
  .about .whoWeAreButton {
    cursor: pointer;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border: #e60101 1px solid;
    text-decoration: none;
    width: 250px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media screen and (max-width: 888px) {
      .about .whoWeAreButton {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .about .whoWeAreButton:hover {
      transition: 0.5s;
      background-image: linear-gradient(185deg, #b30001 0%, #ff0001 84%);
      color: #ffffff; }
      .about .whoWeAreButton:hover .whoWeAreButtonIcon path {
        transition: 0.5s;
        stroke: #ffffff; }
    .about .whoWeAreButtonIcon {
      margin-left: 5px; }
      .about .whoWeAreButtonIcon path {
        stroke: #e60101; }
.about .clip {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9; }
  .about .clipContent {
    position: relative;
    height: 730px;
    width: 100vw;
    background-image: url("../img/video-cover.png");
    background-size: cover;
    background-position: center; }
    @media screen and (max-width: 888px) {
      .about .clipContent {
        height: 100%;
        width: 100%;
        padding: 50px; } }
    .about .clipContent .playPauseContent {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; }
  .about .clipVideo {
    width: 100%;
    height: 100%;
    margin-bottom: -5px;
    background-size: cover;
    object-fit: cover; }
  .about .clipContainerPhrase {
    display: flex;
    justify-content: center; }
  .about .clipPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 30px;
    cursor: pointer; }
    @media screen and (max-width: 888px) {
      .about .clipPhrase {
        font-size: 12px; } }
    .about .clipPhrase:hover {
      transition: 0.5s;
      text-decoration: underline; }
    .about .clipPhrase.remove {
      display: none; }
  .about .clip .playPlay {
    cursor: pointer;
    text-align: center; }
    @media screen and (max-width: 888px) {
      .about .clip .playPlay {
        top: 25%; } }
    .about .clip .playPlay.remove {
      display: none; }

.evolution {
  display: grid;
  grid-template-columns: 2fr 3fr;
  background-color: #fafafa;
  border-radius: 20px;
  z-index: 9;
  margin-top: -50px; }
  @media screen and (max-width: 888px) {
    .evolution {
      grid-template-columns: 1fr;
      margin-top: 20px; } }
  .evolutionContent {
    margin: 120px 0 120px 120px; }
    @media screen and (max-width: 888px) {
      .evolutionContent {
        margin: 0;
        padding: 20px; } }
  .evolutionPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #e60101;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .evolutionTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 50px;
    margin-top: 20px; }
    @media screen and (max-width: 888px) {
      .evolutionTitle {
        line-height: 30px;
        font-size: 25px;
        font-size: 1.5625rem; } }
  .evolutionText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 350px;
    margin-top: 20px; }
    @media screen and (max-width: 888px) {
      .evolutionText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .evolutionText {
        line-height: 20px;
        width: 100%; } }
  .evolutionImage {
    width: 100%;
    height: 100%; }

.environmental {
  background-color: #fafafa;
  border-radius: 20px;
  width: 70%;
  display: grid;
  grid-template-columns: 2fr 5fr;
  margin-top: 20px; }
  @media screen and (max-width: 888px) {
    .environmental {
      width: 100%;
      grid-template-columns: 1fr; } }
  .environmentalBox .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    justify-content: end !important;
    z-index: 9 !important;
    position: relative; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .environmentalBox .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .environmentalBox .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .environmentalBox .container {
        display: flex;
        justify-content: start; } }
  .environmentalImageBox {
    margin-top: -120px;
    margin-left: -70px;
    margin-right: -70px;
    z-index: 99; }
    @media screen and (max-width: 888px) {
      .environmentalImageBox {
        display: none; } }
  .environmentalImage {
    width: 100%;
    height: 100%; }
  .environmentalContent {
    padding: 60px 120px 60px 120px; }
    @media screen and (max-width: 888px) {
      .environmentalContent {
        padding: 30px; } }
  .environmentalPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #00d959;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .environmentalTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 50px;
    width: 340px; }
    @media screen and (max-width: 888px) {
      .environmentalTitle {
        line-height: 30px;
        font-size: 25px;
        font-size: 1.5625rem; } }
    @media screen and (max-width: 888px) {
      .environmentalTitle {
        width: 100%; } }
    .environmentalTitle span {
      color: #00d959;
      font-weight: bold; }
  .environmentalText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 390px;
    margin-top: 10px; }
    @media screen and (max-width: 888px) {
      .environmentalText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .environmentalText {
        width: 100%; } }

.collaboratorsAbout {
  background-image: linear-gradient(#101010, rgba(16, 16, 16, 0.7)), url("../img/lab.jpg");
  width: 100%;
  margin-top: -100px;
  background-position: center;
  z-index: -9;
  background-size: cover;
  background-position: center; }
  .collaboratorsAbout .collaboratorsContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
    position: relative; }
    .collaboratorsAbout .collaboratorsContentDetail {
      z-index: -99; }
  .collaboratorsAbout .collaboratorsPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .collaboratorsAbout .collaboratorsTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 60px;
    font-size: 3.75rem;
    width: 900px;
    margin-bottom: 100px; }
    @media screen and (max-width: 888px) {
      .collaboratorsAbout .collaboratorsTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .collaboratorsAbout .collaboratorsTitle {
        line-height: 40px;
        font-size: 35px;
        width: 100%; } }

.collaboratorsContentDetails {
  position: relative; }
  .collaboratorsContentDetails .collaboratorsContentDetailFirst1 {
    position: absolute;
    left: -119px;
    bottom: -100px;
    z-index: -9; }
    @media screen and (max-width: 888px) {
      .collaboratorsContentDetails .collaboratorsContentDetailFirst1 {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .collaboratorsContentDetails .collaboratorsContentDetailFirst1 {
        display: none; } }
  .collaboratorsContentDetails .collaboratorsContentDetailFirst2 {
    position: absolute;
    left: 26px;
    bottom: -94px;
    z-index: 9; }
    @media screen and (max-width: 888px) {
      .collaboratorsContentDetails .collaboratorsContentDetailFirst2 {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .collaboratorsContentDetails .collaboratorsContentDetailFirst2 {
        display: none; } }
  .collaboratorsContentDetails .collaboratorsContentDetailSecond1 {
    position: absolute;
    right: 168px;
    bottom: -281px;
    z-index: -9; }
    @media screen and (max-width: 888px) {
      .collaboratorsContentDetails .collaboratorsContentDetailSecond1 {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .collaboratorsContentDetails .collaboratorsContentDetailSecond1 {
        display: none; } }
  .collaboratorsContentDetails .collaboratorsContentDetailSecond2 {
    position: absolute;
    right: 0;
    bottom: -281px;
    z-index: 9; }
    @media screen and (max-width: 888px) {
      .collaboratorsContentDetails .collaboratorsContentDetailSecond2 {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .collaboratorsContentDetails .collaboratorsContentDetailSecond2 {
        display: none; } }

.collaboratorsSendResume {
  position: relative;
  z-index: 0; }
  .collaboratorsSendResume .collaboratorsBoxOut {
    display: flex;
    justify-content: center; }
    .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBox {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 70px 100px 70px 100px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      text-align: start;
      margin-top: -100px;
      box-shadow: 1px 0 20px #e8e8e8;
      margin-left: 130px;
      margin-right: 130px;
      position: relative;
      margin-bottom: 100px;
      z-index: 9; }
      @media screen and (max-width: 888px) {
        .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBox {
          grid-template-columns: 1fr;
          margin-left: 0;
          margin-right: 0;
          padding: 30px;
          margin-top: -170px;
          margin-bottom: 10px; } }
      .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxText {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 30px;
        width: 360px; }
        @media screen and (max-width: 888px) {
          .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxText {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
        @media screen and (max-width: 888px) {
          .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxText {
            width: 100%; } }
      .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend {
        margin-top: 20px;
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #ffffff;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px;
        background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
        width: 250px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 10px;
        text-decoration: none; }
        @media screen and (max-width: 888px) {
          .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
        .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend:hover {
          transition: 0.5s;
          color: #ffffff; }
          .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSend:hover .collaboratorsBoxSendIcon {
            transform: rotate(40deg);
            transition: 0.5s; }
        .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSendIcon {
          margin-left: 5px; }
          .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxSendIcon path {
            stroke: #ffffff; }
      .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxImage {
        margin-top: -200px;
        margin-right: -80px;
        margin-bottom: -70px;
        margin-left: -100px; }
        @media screen and (max-width: 888px) {
          .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBoxImage {
            display: none; } }
      .collaboratorsSendResume .collaboratorsBoxOut .collaboratorsBox .collaboratorImage {
        width: 100%;
        height: 100%; }

.numberInformationContent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 150px;
  margin-left: 130px;
  margin-right: 130px; }
  @media screen and (max-width: 888px) {
    .numberInformationContent {
      padding-bottom: 50px;
      flex-direction: column;
      gap: 20px;
      text-align: center;
      justify-content: center;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      align-items: center; } }
  .numberInformationContent li {
    display: flex;
    flex-direction: column; }
  .numberInformationContent li:nth-child(1) p {
    width: 112px; }
  .numberInformationContent li:nth-child(2) p {
    width: 120px; }
.numberInformationData {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 111px;
  font-size: 6.9375rem;
  line-height: 120px;
  font-weight: bold;
  background: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; }
  @media screen and (max-width: 888px) {
    .numberInformationData {
      font-size: 70px;
      line-height: 90px; } }
.numberInformationText {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #808080;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 30px;
  width: 160px; }
  @media screen and (max-width: 888px) {
    .numberInformationText {
      font-size: 18px;
      line-height: 20px; } }

.team {
  background-image: linear-gradient(180deg, rgba(230, 1, 1, 0.783146535) 26%, rgba(0, 0, 0, 0.783146535) 80%), url("../img/teamBackground.png"); }
  .teamContent {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; }
  @media screen and (max-width: 888px) {
    .teamImages {
      padding-left: 20px;
      padding-right: 20px; } }
  .teamPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .teamTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 60px;
    font-size: 3.75rem;
    width: 800px;
    line-height: 60px; }
    @media screen and (max-width: 888px) {
      .teamTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .teamTitle {
        line-height: 40px;
        font-size: 35px;
        width: 100%; } }
  .teamText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 620px; }
    @media screen and (max-width: 888px) {
      .teamText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .teamText {
        width: 100%; } }
  .teamImagesBoxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-top: -120px; }
    @media screen and (max-width: 888px) {
      .teamImagesBoxes {
        grid-template-columns: 1fr; } }
  .teamImage {
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    object-position: center; }

.certification .container {
  display: block;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 100px;
  position: relative; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .certification .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .certification .container {
      max-width: 100%;
      padding: 0px 10px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .certification .container {
      margin-bottom: 20px;
      padding-top: 20px; } }
  .certification .container::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    top: 40px;
    left: 389px; }
    @media screen and (max-width: 888px) {
      .certification .container::after {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .certification .container::after {
        display: none; } }
  .certification .container::before {
    content: "";
    width: 680px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    top: 45px;
    left: 400px; }
    @media screen and (max-width: 888px) {
      .certification .container::before {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .certification .container::before {
        display: none; } }
.certificationBackLink {
  cursor: pointer; }
  .certificationBackLink.swiper-button-disabled path,
  .certificationBackLink.swiper-button-disabled g {
    stroke: #e8e8e8; }
.certificationGoLink {
  cursor: pointer; }
  .certificationGoLink.swiper-button-disabled path,
  .certificationGoLink.swiper-button-disabled g {
    stroke: #e8e8e8; }
.certificationBackIcon {
  transform: rotate(180deg); }
.certificationGoIcon {
  transform: rotate(0deg); }
.certificationTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 60px;
  font-size: 3.75rem; }
  @media screen and (max-width: 888px) {
    .certificationTitle {
      line-height: 35px;
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (max-width: 888px) {
    .certificationTitle {
      line-height: 40px;
      font-size: 35px;
      margin-bottom: 10px; } }
.certificationTitleBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 888px) {
    .certificationTitleBox {
      flex-direction: column; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .certificationTitleBox {
      flex-direction: row; } }
.certificationIconBox {
  display: flex;
  gap: 30px; }
.certificationContent {
  display: flex;
  flex-direction: row; }
.certificationItem a {
  text-decoration: none; }
.certificationItem {
  border: 1px solid #fafafa;
  margin-top: 50px;
  background-color: #fafafa;
  border-radius: 20px;
  position: relative;
  background-size: cover;
  background-position: center; }
  .certificationItem img {
    max-width: 170px;
    display: block;
    margin: 0 auto; }
  .certificationItem:hover {
    box-shadow: 1px 0 20px #e8e8e8;
    transition: 0.5s; }
    .certificationItem:hover .certificationNumber {
      color: #e60101;
      transition: 0.5s; }
    .certificationItem:hover::after {
      border: 1px solid #e60101;
      transition: 1s; }
    .certificationItem:hover::before {
      animation: fade 500ms ease;
      animation-fill-mode: forwards; }
    .certificationItem:hover .certificationKnowMore {
      color: #000000;
      transition: 0.5s; }
  .certificationItemBox {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .certificationItem::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    bottom: 31px;
    right: 147px; }
    @media screen and (max-width: 888px) {
      .certificationItem::after {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .certificationItem::after {
        display: none; } }
  .certificationItem::before {
    content: "";
    width: 235px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    bottom: 36px;
    left: 0; }
    @media screen and (max-width: 888px) {
      .certificationItem::before {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .certificationItem::before {
        display: none; } }
  @media screen and (max-width: 888px) {
    .certificationItem {
      margin-top: 20px; } }
.certificationItemContent {
  margin: 50px 70px 50px 70px; }
.certification .galleryCertification {
  width: 100%; }
.certification .swiper-slide img {
  display: block;
  width: 100%; }
.certificationNumber {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 45px;
  font-size: 2.8125rem;
  line-height: 50px; }
  @media screen and (max-width: 888px) {
    .certificationNumber {
      line-height: 30px;
      font-size: 25px;
      font-size: 1.5625rem; } }
.certificationSince {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  color: #e60101;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 30px;
  letter-spacing: 2px;
  text-transform: uppercase; }
.certificationKnowMore a {
  text-decoration: none; }
.certificationKnowMore {
  text-decoration: none;
  margin-top: 5px;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #e8e8e8;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px; }
  .certificationKnowMoreBox {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: -36px;
    position: relative;
    bottom: -20px; }
.certificationArrow {
  transform: rotate(270deg);
  cursor: pointer;
  margin-top: 5px;
  margin-right: 5px; }
  .certificationArrow path {
    stroke: #e60101; }
.certification .bg {
  background-color: #1e1f26;
  height: 100vh;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center; }
.certification .level {
  background-color: #00d1b2;
  padding: 5rem 0;
  color: #ffffff;
  margin: 0 !important; }
.certification .title {
  color: inherit;
  width: 200px;
  height: 36px; }

.organizationContext .container {
  display: block;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 100px;
  position: relative; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .organizationContext .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .organizationContext .container {
      max-width: 100%;
      padding: 0px 10px; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .organizationContext .container {
      margin-bottom: 20px;
      padding-top: 20px; } }
.organizationContextBackLink {
  cursor: pointer; }
  .organizationContextBackLink.swiper-button-disabled path,
  .organizationContextBackLink.swiper-button-disabled g {
    stroke: #e8e8e8; }
.organizationContextGoLink {
  cursor: pointer; }
  .organizationContextGoLink.swiper-button-disabled path,
  .organizationContextGoLink.swiper-button-disabled g {
    stroke: #e8e8e8; }
.organizationContextBackIcon {
  transform: rotate(180deg); }
.organizationContextGoIcon {
  transform: rotate(0deg); }
.organizationContextTitle {
  display: none;
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 60px;
  font-size: 3.75rem; }
  @media screen and (max-width: 888px) {
    .organizationContextTitle {
      line-height: 35px;
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (max-width: 888px) {
    .organizationContextTitle {
      line-height: 40px;
      font-size: 35px;
      margin-bottom: 10px; } }
.organizationContextTitleBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 888px) {
    .organizationContextTitleBox {
      flex-direction: column; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .organizationContextTitleBox {
      flex-direction: row; } }
.organizationContextIconBox {
  display: flex;
  gap: 30px; }
.organizationContextContent {
  display: flex;
  flex-direction: row; }
.organizationContextItem a {
  text-decoration: none; }
.organizationContextItem {
  border: 1px solid #fafafa;
  margin-top: 50px;
  background-color: #fafafa;
  border-radius: 20px;
  position: relative;
  background-size: cover;
  background-position: center; }
  .organizationContextItem img {
    max-width: 170px;
    display: block;
    margin: 0 auto; }
  .organizationContextItem:hover {
    box-shadow: 1px 0 20px #e8e8e8;
    transition: 0.5s; }
    .organizationContextItem:hover .organizationContextNumber {
      color: #e60101;
      transition: 0.5s; }
    .organizationContextItem:hover::after {
      border: 1px solid #e60101;
      transition: 1s; }
    .organizationContextItem:hover::before {
      animation: fade 500ms ease;
      animation-fill-mode: forwards; }
    .organizationContextItem:hover .organizationContextKnowMore {
      color: #000000;
      transition: 0.5s; }
  .organizationContextItemBox {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .organizationContextItem::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    bottom: 31px;
    right: 147px; }
    @media screen and (max-width: 888px) {
      .organizationContextItem::after {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .organizationContextItem::after {
        display: none; } }
  .organizationContextItem::before {
    content: "";
    width: 235px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    bottom: 36px;
    left: 0; }
    @media screen and (max-width: 888px) {
      .organizationContextItem::before {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .organizationContextItem::before {
        display: none; } }
  @media screen and (max-width: 888px) {
    .organizationContextItem {
      margin-top: 20px; } }
.organizationContextItemContent {
  margin: 50px 70px 50px 70px; }
.organizationContext .galleryOrganizationContext {
  width: 100%; }
.organizationContext .swiper-slide img {
  display: block;
  max-width: none;
  height: 140px; }
.organizationContextName {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 45px;
  font-size: 2.8125rem;
  line-height: 50px; }
  @media screen and (max-width: 888px) {
    .organizationContextName {
      line-height: 30px;
      font-size: 25px;
      font-size: 1.5625rem; } }
.organizationContextKnowMore a {
  text-decoration: none; }
.organizationContextKnowMore {
  text-decoration: none;
  margin-top: 5px;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #e8e8e8;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px; }
  .organizationContextKnowMoreBox {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: -36px;
    position: relative;
    bottom: -20px; }
.organizationContextArrow {
  transform: rotate(270deg);
  cursor: pointer;
  margin-top: 5px;
  margin-right: 5px; }
  .organizationContextArrow path {
    stroke: #e60101; }
.organizationContext .bg {
  background-color: #1e1f26;
  height: 100vh;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center; }
.organizationContext .level {
  background-color: #00d1b2;
  padding: 5rem 0;
  color: #ffffff;
  margin: 0 !important; }
.organizationContext .title {
  color: inherit;
  width: 200px;
  height: 36px; }

*.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext {
  width: auto;
  max-width: 769px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #707070; }
  *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content {
    display: grid;
    grid-template-rows: [lcStart] auto [lcEnd];
    grid-template-columns: [lcStart] auto [lcMiddle] auto [lcEnd];
    color: #000000; }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > svg {
      margin: 70px auto 0;
      margin: calc(16px + 2.8125vw) auto 0; }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > h1 {
      margin: 48px auto 40px;
      margin: calc(16px + 1.66666666666667vw) auto calc(16px + 1.25vw);
      font: normal normal 900 normal 2.625rem/1.1904761905 "Sarabun", sans-serif;
      letter-spacing: 0px;
      color: inherit; }
      @media only screen and (max-width: 479px) {
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > h1 {
          font-size: 34px;
          line-height: normal; } }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > h2 {
      margin: 40px auto 30px;
      margin: calc(16px + 1.25vw) auto calc(16px + 0.729166666666667vw);
      font: normal normal 400 normal 1.75rem/1.2142857143 "Sarabun", sans-serif;
      letter-spacing: 0px;
      color: inherit;
      border-top: solid #707070 2px;
      border-bottom: solid #707070 2px;
      padding: 13px 30px;
      width: fit-content; }
      @media only screen and (max-width: 479px) {
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > h2 {
          font-size: 21px;
          line-height: normal;
          padding: 13px calc(16px + 0.729166666666667vw); } }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > p {
      margin: 30px auto 41px;
      margin: calc(16px + 0.729166666666667vw) auto calc(16px + 1.30208333333333vw);
      max-width: 593px;
      text-align: center;
      font: normal normal 400 normal 1.3125rem/1.5238095238 "Sarabun", sans-serif;
      letter-spacing: 0px;
      color: inherit; }
      @media only screen and (max-width: 479px) {
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > p {
          font-size: 1rem;
          line-height: normal; } }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      max-width: 100%;
      justify-content: center;
      align-items: flex-start;
      gap: 23px; }
      *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info {
        width: 35%;
        width: clamp(238px, 35%, 50%);
        display: inline-block;
        margin: 0; }
        @media only screen and (max-width: 599px) {
          *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.where, *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.when {
            text-align: center; } }
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.when {
          text-align: end; }
          *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.when > p {
            text-align: inherit;
            font: normal normal 400 normal 1.3125rem/1.5238095238 "Sarabun", sans-serif;
            letter-spacing: 0px;
            color: inherit; }
            @media only screen and (max-width: 479px) {
              *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.when > p {
                font-size: 14px; } }
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.where {
          text-align: start; }
          *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info.where > p {
            text-align: inherit;
            font: normal normal 400 normal 0.9375rem/1.2 "Sarabun", sans-serif;
            letter-spacing: 0px;
            color: inherit; }
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info > h3 {
          text-align: inherit;
          font: normal normal 900 normal 1.3125rem/normal "Sarabun", sans-serif;
          letter-spacing: 0px;
          color: inherit;
          text-transform: uppercase; }
          @media only screen and (max-width: 479px) {
            *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > div.container.infos > div.info > h3 {
              font-size: 18px; } }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > picture {
      display: block;
      margin: 41px auto;
      margin: calc(16px + 1.30208333333333vw) auto;
      max-width: 248px;
      max-height: 86px;
      width: 70%;
      aspect-ratio: auto 248/86; }
      *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > picture > img {
        aspect-ratio: auto;
        max-width: 100%;
        max-height: 100%; }
    *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > ul {
      margin: 30px auto 41px;
      margin: calc(16px + 0.729166666666667vw);
      max-width: 593px;
      text-align: start;
      font: normal normal 400 normal 1.3125rem/1.5238095238 "Sarabun", sans-serif;
      letter-spacing: 0px;
      color: inherit;
      list-style: initial; }
      @media only screen and (max-width: 479px) {
        *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > ul {
          font-size: 1rem;
          line-height: normal; } }
      *.swal2-container.swal2-shown.organizationContext > *.swal2-popup.swal2-modal.swal2-show.organizationContext > *.swal2-content > *#swal2-content > ul > li {
        list-style: initial; }

.whereToFind {
  margin-top: 120px; }
  @media screen and (max-width: 888px) {
    .whereToFind {
      margin-top: 60px; } }
  .whereToFind .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .whereToFind .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .whereToFind .container {
        max-width: 100%;
        padding: 0px 10px; } }
    .whereToFind .container .whereToFindTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 60px;
      font-size: 3.75rem;
      margin: 50px 50px 10px 50px; }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindTitle {
          line-height: 35px;
          font-size: 30px;
          font-size: 1.875rem; } }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindTitle {
          line-height: 40px;
          font-size: 35px;
          width: 100%;
          text-align: center; } }
    .whereToFind .container .whereToFindSelect {
      display: flex;
      flex-direction: row;
      border: 1px solid #e8e8e8;
      padding: 10px 90px 10px 90px;
      border-radius: 10px;
      gap: 20px;
      height: 50px;
      box-sizing: border-box;
      margin-bottom: 20px; }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindSelect {
          flex-direction: column;
          width: 100%;
          margin-left: 0;
          margin-right: 0;
          height: auto; } }
      .whereToFind .container .whereToFindSelect input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: inline-block;
        width: 16px;
        height: 16px;
        padding: 2px;
        background-clip: content-box;
        border: 2px solid #000000;
        border-radius: 50%; }
      .whereToFind .container .whereToFindSelect .whereToFindDistributorInput input[type="checkbox"]:checked {
        background-color: #e60101; }
      .whereToFind .container .whereToFindSelect .whereToFindRepresentativeInput input[type="checkbox"]:checked {
        background-color: #145bbe; }
      .whereToFind .container .whereToFindSelect div {
        display: flex;
        align-items: center; }
    .whereToFind .container .whereToFindDistributor {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      cursor: pointer;
      position: relative; }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindDistributor {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    .whereToFind .container .whereToFindRepresentative {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      cursor: pointer;
      position: relative; }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindRepresentative {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    .whereToFind .container .whereToFindInputBox {
      position: relative;
      margin-bottom: 50px; }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindInputBox {
          width: 100%; } }
    .whereToFind .container .whereToFindInput {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      padding: 0 50px 0 20px;
      border-radius: 10px;
      border: 1px solid #e60101;
      height: 50px;
      box-sizing: border-box;
      min-width: 500px; }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindInput {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .whereToFind .container .whereToFindInput {
          padding: 10px 10px 10px 20px;
          min-width: 300px; } }
    .whereToFind .container .whereToFindIcon {
      position: absolute;
      right: 5px;
      top: 5px;
      padding: 10px;
      cursor: pointer; }
      .whereToFind .container .whereToFindIcon path {
        stroke: #e60101; }
    .whereToFind .container #map > div {
      border-radius: 50px;
      -webkit-box-shadow: -2px -2px 58px -17px rgba(0, 0, 0, 0.22);
      -moz-box-shadow: -2px -2px 58px -17px rgba(0, 0, 0, 0.22);
      box-shadow: -2px -2px 58px -17px rgba(0, 0, 0, 0.22); }
    .whereToFind .container .buttons {
      position: relative; }
    .whereToFind .container .buttonExpanded {
      cursor: pointer;
      position: absolute;
      z-index: 9;
      right: 20px;
      bottom: -140px; }
    .whereToFind .container .buttonZoomOut {
      cursor: pointer;
      position: absolute;
      z-index: 9;
      right: 20px;
      bottom: -280px;
      border-radius: 50%; }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .whereToFind .container .buttonZoomOut {
          bottom: -280px; } }
      @media screen and (max-width: 888px) {
        .whereToFind .container .buttonZoomOut {
          bottom: -280px; } }
    .whereToFind .container .buttonZoomIn {
      cursor: pointer;
      position: absolute;
      z-index: 9;
      right: 20px;
      bottom: -210px;
      border-radius: 50%; }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .whereToFind .container .buttonZoomIn {
          bottom: -220px; } }
      @media screen and (max-width: 888px) {
        .whereToFind .container .buttonZoomIn {
          bottom: -220px; } }
    .whereToFind .container #map {
      position: relative;
      margin-bottom: -300px;
      width: 1240px;
      height: 650px; }
      @media screen and (max-width: 888px) {
        .whereToFind .container #map {
          width: 300px;
          height: 340px; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .whereToFind .container #map {
          width: 600px;
          height: 500px; } }
      .whereToFind .container #map .H_copyright,
      .whereToFind .container #map .H_logo,
      .whereToFind .container #map .H_imprint {
        display: none; }
      .whereToFind .container #map .H_ib_body {
        border-radius: 20px;
        -webkit-box-shadow: -2px -2px 58px -17px rgba(0, 0, 0, 0.22);
        -moz-box-shadow: -2px -2px 58px -17px rgba(0, 0, 0, 0.22);
        box-shadow: -2px -2px 58px -17px rgba(0, 0, 0, 0.22); }
      .whereToFind .container #map .H_ib_tail {
        display: none; }
      .whereToFind .container #map .H_ib_body {
        margin-right: 3em; }
      .whereToFind .container #map .H_ib_content {
        min-width: 17em;
        padding: 10px; }
      .whereToFind .container #map .H_ib_close.H_btn {
        margin-right: 10px;
        margin-top: 10px; }
        .whereToFind .container #map .H_ib_close.H_btn svg {
          position: relative; }
        .whereToFind .container #map .H_ib_close.H_btn::after {
          content: "";
          width: 30px;
          height: 30px;
          position: absolute;
          border: 1px solid #e8e8e8;
          border-radius: 50%;
          top: -10px;
          left: -10px; }
      .whereToFind .container #map .mapIcon {
        position: absolute;
        z-index: 9;
        bottom: 0;
        right: 0;
        margin-bottom: 30px;
        margin-right: 30px; }
    .whereToFind .container .mapInformation {
      background-color: #ffffff;
      display: flex;
      border-radius: 20px;
      flex-direction: column;
      gap: 5px;
      width: 250px;
      height: auto;
      padding: 10px; }
      .whereToFind .container .mapInformation.distributor .mapInformationList li:nth-child(1) svg path, .whereToFind .container .mapInformation.distributor .mapInformationList li:nth-child(3) svg path {
        stroke: #e60101; }
      .whereToFind .container .mapInformation.distributor .mapInformationList li:nth-child(2) svg path {
        fill: #e60101; }
      .whereToFind .container .mapInformation.distributor .mapInformationCategory {
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #e60101;
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 10px;
        letter-spacing: 2px;
        text-transform: uppercase; }
      .whereToFind .container .mapInformation.distributor .mapInformationTitle {
        font-family: "Sarabun", sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px;
        margin-bottom: 5px; }
        @media screen and (max-width: 888px) {
          .whereToFind .container .mapInformation.distributor .mapInformationTitle {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      .whereToFind .container .mapInformation.distributor .mapInformationList {
        display: flex;
        gap: 5px;
        flex-direction: column; }
      .whereToFind .container .mapInformation.distributor .mapInformationText {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #272727;
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 14px;
        font-weight: 300 !important;
        display: flex;
        gap: 10px; }
        .whereToFind .container .mapInformation.distributor .mapInformationTextIcon path {
          stroke: #e60101; }
        .whereToFind .container .mapInformation.distributor .mapInformationTextIconWhats path {
          fill: #e60101; }
      .whereToFind .container .mapInformation.representative .mapInformationCategory {
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #145bbe;
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 10px;
        letter-spacing: 2px;
        text-transform: uppercase; }
      .whereToFind .container .mapInformation.representative .mapInformationTitle {
        font-family: "Sarabun", sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 22px;
        margin-bottom: 5px; }
        @media screen and (max-width: 888px) {
          .whereToFind .container .mapInformation.representative .mapInformationTitle {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      .whereToFind .container .mapInformation.representative .mapInformationList {
        display: flex;
        gap: 5px;
        flex-direction: column;
        flex-direction: column;
        align-items: baseline;
        justify-content: start; }
      .whereToFind .container .mapInformation.representative .mapInformationText {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #272727;
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 14px;
        font-weight: 300 !important;
        display: flex;
        gap: 10px; }
    .whereToFind .container .H_l_bottom.H_l_right {
      display: none; }

.products .oursProducts {
  padding-top: 60px; }
  .products .oursProducts .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: 100px; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .products .oursProducts .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .products .oursProducts .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .products .oursProducts .container {
        margin-top: 60px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .products .oursProducts .container {
        padding-top: 70px; } }
  .products .oursProductsPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #e60101;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .products .oursProductsTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem;
    width: 700px;
    margin-bottom: 20px; }
    @media screen and (max-width: 888px) {
      .products .oursProductsTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .products .oursProductsTitle {
        line-height: 40px;
        font-size: 35px;
        width: 100%; } }
  .products .oursProductsText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 700px;
    margin-bottom: 20px; }
    @media screen and (max-width: 888px) {
      .products .oursProductsText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .products .oursProductsText {
        width: 100%; } }
    .products .oursProductsTextAcess {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px;
      font-size: 18px; }
      @media screen and (max-width: 888px) {
        .products .oursProductsTextAcess {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .products .oursProductsTextAcess {
          width: 100%; } }
      .products .oursProductsTextAcess a {
        color: #145bbe;
        text-decoration: none; }
  .products .oursProductsBox {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 20px; }
    @media screen and (max-width: 888px) {
      .products .oursProductsBox {
        flex-direction: column;
        gap: 20px; } }
  .products .oursProductsSee {
    text-decoration: none;
    cursor: pointer;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border: 1px solid #e60101;
    border-radius: 10px;
    width: 250px;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    z-index: 20;
    position: relative; }
    @media screen and (max-width: 888px) {
      .products .oursProductsSee {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .products .oursProductsSee svg path {
      stroke: #e60101; }
    .products .oursProductsSee:hover {
      transition: 0.5s;
      background-color: #e60101;
      color: #ffffff; }
      .products .oursProductsSee:hover svg path {
        transition: 0.5s;
        stroke: #ffffff; }
  .products .oursProductsCode a {
    text-decoration: none;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .products .oursProductsCode a {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .products .oursProductsCode a svg {
      transform: rotate(270deg); }
      .products .oursProductsCode a svg path {
        stroke: #000000; }
    .products .oursProductsCode a:hover {
      transition: 0.5s;
      text-decoration: underline; }
  .products .oursProductsCodePopUpContent {
    width: 100px;
    height: 100px;
    display: none; }
  .products .oursProductsCodePopUp {
    border-radius: 20px;
    width: 100%;
    height: 100%; }
.products .filter {
  z-index: 20;
  position: relative; }
  .products .filter .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    display: flex; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .products .filter .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .products .filter .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .products .filter .container {
        flex-direction: column; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .products .filter .container {
        flex-direction: column; } }
  .products .filterTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 73px;
    margin-right: 40px; }
    @media screen and (max-width: 888px) {
      .products .filterTitle {
        line-height: 30px;
        font-size: 25px;
        font-size: 1.5625rem; } }
  .products .filterSelects {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center; }
    @media screen and (max-width: 888px) {
      .products .filterSelects {
        flex-direction: column;
        gap: 10px; } }
  .products .filterCodeContent {
    position: relative;
    margin-top: 20px; }
    .products .filterCodeContent::before {
      content: "";
      width: 1px;
      height: 20px;
      position: absolute;
      background-color: #e8e8e8;
      top: 15px;
      left: 25px; }
      @media screen and (max-width: 888px) {
        .products .filterCodeContent::before {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .products .filterCodeContent::before {
          display: none; } }
  .products .filterCode {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    padding: 12px 10px 12px 30px;
    width: 250px;
    height: 50px;
    box-sizing: border-box; }
    @media screen and (max-width: 888px) {
      .products .filterCode {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .products .filterCode {
        padding: 12px 50px 12px 10px; } }
    .products .filterCode:hover {
      transition: 0.5s;
      border: 1px solid #e60101; }
    .products .filterCode:focus {
      transition: 0.5s;
      border: 1px solid #e60101;
      color: #000000; }
  .products .filter .menuProductSearch {
    cursor: pointer;
    text-decoration: none;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 250px;
    height: 50px;
    padding: 0px;
    background: #e8e8e8;
    border-radius: 10px;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .products .filter .menuProductSearch.active {
      background: #e60101;
      border-color: #e60101; }
  .products .filter .arrowContentFirst .choices {
    position: relative; }
    .products .filter .arrowContentFirst .choices::before {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E ");
      width: 20px;
      height: 20px;
      position: absolute;
      color: red;
      top: 65%;
      transform: translateY(-50%);
      right: 5%;
      z-index: 99; }
      @media screen and (max-width: 888px) {
        .products .filter .arrowContentFirst .choices::before {
          left: 220px;
          top: 65%;
          position: absolute; } }
    .products .filter .arrowContentFirst .choices.is-open:focus::before {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
    .products .filter .arrowContentFirst .choices::after {
      content: "";
      position: absolute;
      background-color: #ffffff;
      top: 50%;
      right: 1%; }
  .products .filter .arrowContentSecond .choices {
    position: relative; }
    .products .filter .arrowContentSecond .choices::before {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E ");
      width: 20px;
      height: 20px;
      position: absolute;
      color: red;
      top: 65%;
      transform: translateY(-50%);
      right: 5%;
      z-index: 99; }
      @media screen and (max-width: 888px) {
        .products .filter .arrowContentSecond .choices::before {
          left: 220px;
          top: 65%;
          position: absolute; } }
    .products .filter .arrowContentSecond .choices.is-open:focus::before {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
  .products .filter .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
    background-color: #fafafa; }
  .products .filter .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
    background-color: #ffffff; }
  .products .filter .choices__item--disabled {
    display: none !important; }
  .products .filter .choices__list--dropdown,
  .products .filter .choices__list[aria-expanded] {
    border-radius: 0 0 10px 10px;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .products .filter .choices__list--dropdown,
      .products .filter .choices__list[aria-expanded] {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .products .filter .choices__list--dropdown,
  .products .filter .choices__list[aria-expanded] {
    width: 250px;
    box-sizing: border-box; }
  .products .filter .choices__placeholder {
    opacity: initial; }
  .products .filter .choices__list--dropdown .choices__item--selectable::after,
  .products .filter .choices__list[aria-expanded] .choices__item--selectable::after {
    display: none; }
  .products .filter .choices[data-type*="select-one"]::after {
    display: none; }
  .products .filter .choices[data-type*="select-one"] .choices__inner {
    border-radius: 10px;
    padding-bottom: 0; }
  .products .filter .choices__list--single {
    padding-top: 0; }
  .products .filter .choices__list--single .choices__item {
    width: 90%; }
  .products .filter .choices.is-open:focus {
    border: #e60101; }
  .products .filter .products .filter .choices__item {
    font-size: 15px; }
  .products .filter .choices__list--single .choices__item {
    width: 90%; }
  .products .filter .choices.is-open.is-focused .choices__inner {
    border: 1px solid #e60101;
    border-radius: 10px 10px 0 0; }
  .products .filter .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
    border: 1px solid #e60101;
    z-index: 999; }
  .products .filter .choices[data-type*="select-one"] .choices__input {
    border-bottom: 1px solid #e60101; }
  .products .filter .choices__list--dropdown .choices__item--selectable.is-highlighted,
  .products .filter .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #e60101 !important;
    color: #ffffff; }
  .products .filter .choices__list--dropdown .choices__list,
  .products .filter .choices__list[aria-expanded] .choices__list {
    max-height: 180px; }
  .products .filter .choices__list--dropdown,
  .products .filter .choices__list[aria-expanded] {
    word-break: initial;
    z-index: 999; }
  .products .filter .choices__inner {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 32px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background-color: #ffffff;
    margin-top: 20px;
    position: relative;
    width: 250px;
    padding-right: 20px;
    box-sizing: border-box;
    height: 50px; }
    @media screen and (max-width: 888px) {
      .products .filter .choices__inner {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .products .filter .choices__inner:hover {
      transition: 0.5s;
      border: 1px solid #e60101; }
.products .productContent {
  z-index: 0;
  position: relative; }
  .products .productContent .container {
    display: block;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    margin-top: 30px;
    padding: 30px; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .products .productContent .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .products .productContent .container {
        max-width: 100%;
        padding: 0px 10px; } }
  .products .productContent .productList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px; }
    @media screen and (max-width: 888px) {
      .products .productContent .productList {
        grid-template-columns: 1fr; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .products .productContent .productList {
        grid-template-columns: 1fr 1fr 1fr; } }
  .products .productContent .productItemContent a {
    text-decoration: none; }
  .products .productContent .productItemContent {
    background-color: #fafafa;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    display: none;
    justify-content: center; }
    .products .productContent .productItemContent:hover {
      box-shadow: 1px 0 20px #e8e8e8;
      transition: 0.5s; }
      .products .productContent .productItemContent:hover .productName {
        color: #e60101;
        transition: 0.5s; }
    .products .productContent .productItemContent:nth-child(1), .products .productContent .productItemContent:nth-child(2), .products .productContent .productItemContent:nth-child(3), .products .productContent .productItemContent:nth-child(4), .products .productContent .productItemContent:nth-child(5), .products .productContent .productItemContent:nth-child(6), .products .productContent .productItemContent:nth-child(7), .products .productContent .productItemContent:nth-child(8), .products .productContent .productItemContent:nth-child(9), .products .productContent .productItemContent:nth-child(10), .products .productContent .productItemContent:nth-child(11), .products .productContent .productItemContent:nth-child(12) {
      display: flex; }
  .products .productContent .productImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; }
  .products .productContent .productImageBox {
    background-color: #ffffff;
    border-radius: 20px;
    width: 250px;
    height: 250px;
    margin-bottom: 20px; }
  .products .productContent .productName {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px;
    margin-bottom: 20px; }
    @media screen and (max-width: 888px) {
      .products .productContent .productName {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
  .products .productContent .productButton {
    text-decoration: none;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border: 1px solid #e60101;
    background-color: #e60101;
    border-radius: 10px;
    width: 250px;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center; }
    @media screen and (max-width: 888px) {
      .products .productContent .productButton {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .products .productContent .productSeeMore {
    display: flex;
    justify-content: center;
    margin-top: 30px; }
  .products .productContent .productButtonSeeMore {
    cursor: pointer;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border: 1px solid #e60101;
    border-radius: 10px;
    width: 250px;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center; }
    @media screen and (max-width: 888px) {
      .products .productContent .productButtonSeeMore {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .products .productContent .productButtonSeeMore svg path {
      stroke: #e60101; }
    .products .productContent .productButtonSeeMore:hover {
      transition: 0.5s;
      background-color: #e60101;
      color: #ffffff; }
      .products .productContent .productButtonSeeMore:hover svg path {
        transition: 0.5s;
        stroke: #ffffff; }
.products .changeColor {
  color: #e60101;
  font-weight: bold; }

.popupWrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
  display: none; }
  .popupWrapper svg {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 50px;
    cursor: pointer;
    z-index: 999;
    padding: 20px; }
    .popupWrapper svg path {
      fill: #fff; }
    .popupWrapper svg g {
      stroke: #fff; }
  .popupWrapper .popupContent {
    width: auto;
    background: transparent;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px; }
    .popupWrapper .popupContent img,
    .popupWrapper .popupContent video {
      display: block;
      margin: 0 auto;
      padding: 0;
      width: 80%;
      max-width: 1500px;
      border-radius: 10px; }

.productDescription {
  overflow: hidden; }
  .productDescription .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    gap: 70px;
    margin-top: 150px;
    position: relative; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .productDescription .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .productDescription .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .productDescription .container {
        flex-direction: column;
        margin-top: 50px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .productDescription .container {
        padding-top: 120px; } }
    .productDescription .container::after {
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      background-color: #e8e8e8;
      z-index: 999;
      bottom: 0; }
      @media screen and (max-width: 888px) {
        .productDescription .container::after {
          display: none; } }
  .productDescriptionImages {
    display: flex;
    flex-direction: column;
    width: 40%;
    gap: 20px; }
    @media screen and (max-width: 888px) {
      .productDescriptionImages {
        width: 100%; } }
    .productDescriptionImages .slideArrow {
      display: grid;
      grid-template-columns: 2fr 1fr; }
    .productDescriptionImages .swiper {
      width: 100%; }
    .productDescriptionImages .swiper-slide {
      background-size: cover;
      background-position: center; }
    .productDescriptionImages .mySwiper2 {
      width: 100%;
      background-color: #fafafa;
      aspect-ratio: 1 / 1;
      border-radius: 20px; }
    .productDescriptionImages .mySwiper {
      height: 100%;
      grid-column: 1;
      box-sizing: border-box;
      margin-top: -10px; }
    .productDescriptionImages .mySwiper .swiper-slide {
      width: 147px;
      height: 147px; }
    .productDescriptionImages .swiper-slide img {
      display: block;
      width: 100%; }
    .productDescriptionImages .swiper-slide-visible {
      border-radius: 20px; }
  .productDescriptionImagePrincipal {
    width: 100%;
    padding: 70px 50px 70px 50px;
    background-color: #fafafa; }
  .productDescriptionGallery {
    display: flex;
    flex-direction: row;
    gap: 20px; }
  .productDescriptionGalleryImages {
    width: 100%;
    background-color: #fafafa;
    border-radius: 20px;
    aspect-ratio: 1 / 1; }
  .productDescriptionContent {
    width: 50%; }
    @media screen and (max-width: 888px) {
      .productDescriptionContent {
        width: 100%;
        margin-top: -50px; } }
  .productDescriptionBox {
    position: relative; }
    .productDescriptionBox::after {
      content: "";
      width: 10px;
      height: 10px;
      position: absolute;
      border: 1px solid #e8e8e8;
      border-radius: 50%;
      z-index: 999;
      top: 194px;
      right: 650px; }
      @media screen and (max-width: 888px) {
        .productDescriptionBox::after {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .productDescriptionBox::after {
          display: none; } }
    .productDescriptionBox::before {
      content: "";
      width: 100vw;
      height: 1px;
      position: absolute;
      background-color: #e8e8e8;
      z-index: 999;
      top: 200px;
      left: -30px; }
      @media screen and (max-width: 888px) {
        .productDescriptionBox::before {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .productDescriptionBox::before {
          display: none; } }
  .productDescriptionWay {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 30px; }
    .productDescriptionWay a {
      text-decoration: none; }
      .productDescriptionWay a:hover {
        color: #000; }
  .productDescriptionTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem; }
    @media screen and (max-width: 888px) {
      .productDescriptionTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .productDescriptionTitle {
        line-height: 40px;
        font-size: 35px; } }
  .productDescriptionButtons {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    align-items: center;
    gap: 130px; }
    @media screen and (max-width: 888px) {
      .productDescriptionButtons {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start; } }
  .productDescriptionBudget {
    text-decoration: none;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border: 1px solid #e60101;
    padding: 10px 0;
    background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
    border-radius: 10px;
    height: 50px;
    width: 250px;
    display: block;
    box-sizing: border-box;
    text-align: center; }
    @media screen and (max-width: 888px) {
      .productDescriptionBudget {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .productDescriptionBudget:hover {
      transition: 0.5s;
      background-image: linear-gradient(185deg, #b30001 0%, #ff0001 84%);
      color: #ffffff; }
  .productDescriptionDoubt {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px; }
    @media screen and (max-width: 888px) {
      .productDescriptionDoubt {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .productDescriptionDoubt svg path {
      fill: #000000; }
    .productDescriptionDoubt:hover {
      transition: 0.5s;
      text-decoration: underline; }
      .productDescriptionDoubt:hover svg path {
        transition: 0.5s;
        fill: #00d959; }
  .productDescriptionText {
    margin-top: 50px; }
    @media screen and (max-width: 888px) {
      .productDescriptionText {
        margin-top: 30px; } }
  .productDescriptionMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    margin-top: 60px; }
    @media screen and (max-width: 888px) {
      .productDescriptionMenu {
        flex-direction: column-reverse;
        gap: 10px;
        align-items: flex-start;
        margin-top: 30px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .productDescriptionMenu {
        margin-top: 20px; } }
  .productDescriptionList {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    position: relative;
    width: 100%; }
    @media screen and (max-width: 888px) {
      .productDescriptionList {
        align-items: flex-start;
        justify-content: 50px;
        text-align: start; } }
    .productDescriptionList a {
      text-decoration: none; }
    .productDescriptionList li {
      margin-top: 20px;
      width: 150px; }
      @media screen and (max-width: 888px) {
        .productDescriptionList li {
          width: 100px; } }
    .productDescriptionList li.active {
      color: #000000;
      transition: 1s; }
    .productDescriptionList::before {
      content: "";
      width: 330px;
      height: 1px;
      position: absolute;
      background-color: #e8e8e8;
      top: 55px;
      right: 0; }
      @media screen and (max-width: 888px) {
        .productDescriptionList::before {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .productDescriptionList::before {
          display: none; } }
  .productDescription .productDetailTitle {
    cursor: pointer; }
    .productDescription .productDetailTitle.active::after {
      content: "";
      width: 160px;
      height: 1px;
      position: absolute;
      background-color: #e60101;
      top: 55px;
      animation: go-back 1s;
      right: 150px;
      animation-fill-mode: forwards; }
      @media screen and (max-width: 888px) {
        .productDescription .productDetailTitle.active::after {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .productDescription .productDetailTitle.active::after {
          display: none; } }
@keyframes go-back {
  from {
    transform: translateX(100px); }
  to {
    transform: translateX(-20px); } }
  .productDescription .productCharacteristicsTitle {
    cursor: pointer; }
    .productDescription .productCharacteristicsTitle.active::after {
      content: "";
      width: 160px;
      height: 1px;
      position: absolute;
      background-color: #e60101;
      top: 55px;
      position: absolute;
      left: 150px;
      animation: go-forward 1s;
      animation-fill-mode: forwards; }
      @media screen and (max-width: 888px) {
        .productDescription .productCharacteristicsTitle.active::after {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .productDescription .productCharacteristicsTitle.active::after {
          display: none; } }
@keyframes go-forward {
  from {
    transform: translateX(40px);
    position: absolute;
    left: 0; }
  to {
    transform: translateX(30px); } }
  .productDescription .arrowContentSecond {
    position: relative;
    z-index: 99999; }
    .productDescription .arrowContentSecond::before {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.828' height='15' viewBox='0 0 15.828 15'%3E%3Cg id='Icon_feather-arrow-down' data-name='Icon feather-arrow-down' transform='translate(-6.086 -6.5)'%3E%3Cpath id='Caminho_496' data-name='Caminho 496' d='M18,7.5v13' transform='translate(-4 0)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Caminho_497' data-name='Caminho 497' d='M20.5,18,14,24.5,7.5,18' transform='translate(0 -4)' fill='none' stroke='%23e60101' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
      width: 20px;
      height: 20px;
      position: absolute;
      color: red;
      top: 50%;
      right: 5%;
      z-index: 99; }
      @media screen and (max-width: 888px) {
        .productDescription .arrowContentSecond::before {
          top: 36px;
          position: absolute;
          right: 10px;
          background-color: #ffffff; } }
  .productDescription .choices__list--dropdown,
  .productDescription .choices__list[aria-expanded] {
    width: 250px;
    box-sizing: border-box; }
  .productDescription .choices__list--dropdown,
  .productDescription .choices__list[aria-expanded] {
    border-radius: 0 0 10px 10px !important;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .productDescription .choices__list--dropdown,
      .productDescription .choices__list[aria-expanded] {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .productDescription .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(even) {
    background-color: #fafafa; }
  .productDescription .choices__item.choices__item--choice.choices__placeholder.choices__item--selectable:nth-child(odd) {
    background-color: #ffffff; }
  .productDescription .choices__list--dropdown .choices__item--selectable.is-highlighted,
  .productDescription .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #e60101 !important;
    color: #ffffff; }
  .productDescription .choices__item--disabled {
    display: none !important; }
  .productDescription .choices__placeholder {
    opacity: initial; }
  .productDescription .choices__list--dropdown,
  .productDescription .choices__list[aria-expanded] {
    width: 100%; }
    @media screen and (max-width: 888px) {
      .productDescription .choices__list--dropdown,
      .productDescription .choices__list[aria-expanded] {
        width: 100%; } }
  .productDescription .choices__list--dropdown .choices__item--selectable.is-highlighted,
  .productDescription .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #fafafa; }
  .productDescription .choices__list--dropdown .choices__item--selectable::after,
  .productDescription .choices__list[aria-expanded] .choices__item--selectable::after {
    display: none; }
  .productDescription .choices[data-type*="select-one"]::after {
    display: none; }
  .productDescription .choices[data-type*="select-one"] .choices__inner {
    border-radius: 10px;
    padding-bottom: 0; }
  .productDescription .choices.is-open:focus {
    border: #e60101; }
  .productDescription .products .filter .choices__item {
    font-size: 15px; }
  .productDescription .choices__list--single .choices__item {
    width: 90%; }
  .productDescription .choices__list--dropdown,
  .productDescription .choices__list[aria-expanded] {
    word-break: initial;
    z-index: 999; }
  .productDescription .choices.is-open.is-focused .choices__inner {
    border: 1px solid #e60101;
    border-radius: 10px 10px 0 0; }
  .productDescription .choices.is-open.is-focused .choices__list--dropdown.choices__list[aria-expanded] {
    border: 1px solid #e60101; }
  .productDescription .choices__list--dropdown .choices__list,
  .productDescription .choices__list[aria-expanded] .choices__list {
    max-height: 180px; }
  .productDescription .choices[data-type*="select-one"] .choices__input {
    border-bottom: 1px solid #e60101; }
  @media (min-width: 640px) {
    .productDescription .choices__list--dropdown .choices__item--selectable,
    .productDescription .choices__list[aria-expanded] .choices__item--selectable {
      padding-right: 0; } }
  .productDescription .choices__inner {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 29px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background-color: #ffffff;
    margin-top: 20px;
    position: relative;
    width: 190px;
    height: 50px;
    width: 250px;
    box-sizing: border-box;
    padding-right: 20px; }
    @media screen and (max-width: 888px) {
      .productDescription .choices__inner {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .productDescription .choices__inner {
        width: 200px; } }
    .productDescription .choices__inner:hover {
      transition: 0.5s;
      border: 1px solid #e60101; }
    .productDescription .choices__inner:focus {
      border: 1px solid #e60101; }
.productDetailTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #808080;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .productDetailTitle {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  .productDetailTitle:hover {
    color: #000000; }
.productDetailInformation p {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #808080;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px; }
  @media screen and (max-width: 888px) {
    .productDetailInformation p {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
.productCharacteristicsTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #808080;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .productCharacteristicsTitle {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  .productCharacteristicsTitle:hover {
    color: #000000; }
.productCharacteristicsInformation {
  display: none; }
  .productCharacteristicsInformation p {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .productCharacteristicsInformation p {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
.productDescription {
  width: 100%; }
  @media screen and (max-width: 888px) {
    .productDescription {
      margin-top: 30px; } }
  .productDescriptionMore {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70px; }
    @media screen and (max-width: 888px) {
      .productDescriptionMore {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: flex-start; } }
    .productDescriptionMoreIcon {
      margin-right: 5px; }
  .productDescriptionGuarantee a {
    text-decoration: none;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .productDescriptionGuarantee a {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .productDescriptionGuarantee a:hover {
      transition: 0.5s;
      text-decoration: underline; }
      .productDescriptionGuarantee a:hover .productDescriptionMoreIcon path {
        transition: 0.5s;
        fill: #e60101; }
  .productDescriptionCertification a {
    text-decoration: none;
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .productDescriptionCertification a {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .productDescriptionCertification a:hover {
      transition: 0.5s;
      text-decoration: underline; }
      .productDescriptionCertification a:hover .productDescriptionMoreIcon path {
        transition: 0.5s;
        fill: #e60101; }
  .productDescriptionNCloud {
    background-color: #fafafa;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30%; }
    @media screen and (max-width: 888px) {
      .productDescriptionNCloud {
        width: 100%; } }
    .productDescriptionNCloud p {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 18px;
      width: 380px; }
      @media screen and (max-width: 888px) {
        .productDescriptionNCloud p {
          width: 100%; } }
    .productDescriptionNCloudImage {
      width: 50px;
      height: 50px; }
      @media screen and (max-width: 888px) {
        .productDescriptionNCloudImage {
          width: 30%;
          height: auto; } }

.goIcon {
  cursor: pointer;
  transform: rotate(0deg); }

.goLink.swiper-button-disabled path,
.goLink.swiper-button-disabled g {
  stroke: #e8e8e8; }

.backLink.swiper-button-disabled path,
.backLink.swiper-button-disabled g {
  stroke: #e8e8e8; }

.backIcon {
  cursor: pointer;
  transform: rotate(180deg); }

.arrowsImageSwiper {
  z-index: 99;
  display: flex;
  justify-content: end;
  gap: 30px;
  grid-column: 2;
  justify-self: end;
  width: 50px;
  margin-top: -80px; }

.project {
  background-color: #fafafa;
  border-radius: 20px;
  margin-top: 100px;
  margin-bottom: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px; }
  @media screen and (max-width: 888px) {
    .project {
      margin-top: 0;
      text-align: center;
      margin-bottom: 20px;
      padding: 10px 0 10px 0; } }
  .projectTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 50px; }
    @media screen and (max-width: 888px) {
      .projectTitle {
        line-height: 30px;
        font-size: 25px;
        font-size: 1.5625rem; } }
  .projectText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    margin-top: 10px; }
    @media screen and (max-width: 888px) {
      .projectText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .projectText {
        margin: 10px 10px 0 10px; } }
  .projectOption {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 20px; }
    .projectOption a {
      text-decoration: none; }
  .projectChat {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .projectChat {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .projectChat:hover {
      transition: 0.5s;
      text-decoration: underline; }
      .projectChat:hover .projectChatIcon path {
        transition: 0.5s;
        fill: #00d959; }
    .projectChatIcon path {
      fill: #000000; }
  .projectEmail {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .projectEmail {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .projectEmail:hover {
      transition: 0.5s;
      text-decoration: underline; }
      .projectEmail:hover .projectEmailIcon path {
        transition: 0.5s;
        stroke: #e60101; }
    .projectEmailIcon path {
      stroke: #000000; }
  .projectCall {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px; }
    @media screen and (max-width: 888px) {
      .projectCall {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .projectCall:hover {
      transition: 0.5s;
      text-decoration: underline; }
      .projectCall:hover .projectCallIcon path {
        transition: 0.5s;
        stroke: #e60101; }
    .projectCallIcon path {
      stroke: #000000; }

.changeColor {
  color: #e60101;
  font-weight: bold; }

.productRelated {
  position: relative;
  overflow: hidden;
  width: 100%; }
  .productRelated::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    top: 40px;
    right: 720px; }
    @media screen and (max-width: 888px) {
      .productRelated::after {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .productRelated::after {
        display: none; } }
  .productRelated::before {
    content: "";
    width: 550px;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    top: 45px;
    right: 170px; }
    @media screen and (max-width: 888px) {
      .productRelated::before {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .productRelated::before {
        display: none; } }
  .productRelatedTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 73px; }
    @media screen and (max-width: 888px) {
      .productRelatedTitle {
        line-height: 30px;
        font-size: 25px;
        font-size: 1.5625rem; } }
  .productRelatedIntroduction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px; }
  .productRelatedIconBox {
    display: flex;
    gap: 30px;
    align-items: center; }
  .productRelatedBackLink {
    cursor: pointer; }
    .productRelatedBackLink.swiper-button-disabled path,
    .productRelatedBackLink.swiper-button-disabled g {
      stroke: #e8e8e8; }
  .productRelatedGoLink {
    cursor: pointer; }
    .productRelatedGoLink.swiper-button-disabled path,
    .productRelatedGoLink.swiper-button-disabled g {
      stroke: #e8e8e8; }
  .productRelatedBackLink svg {
    transform: rotate(180deg); }
  .productRelatedGoLink svg {
    transform: rotate(0deg); }
  .productRelated .product {
    margin-top: 50px; }
    .productRelated .productList {
      display: flex;
      flex-direction: row;
      margin-right: 0 !important; }
    .productRelated .productList li a {
      text-decoration: none; }
    .productRelated .productList li {
      background-color: #fafafa;
      text-align: center;
      border-radius: 20px;
      background-size: cover;
      background-position: center;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .productRelated .productList li:hover {
        box-shadow: 1px 0 20px #e8e8e8;
        transition: 0.5s; }
        .productRelated .productList li:hover .productName {
          color: #e60101;
          transition: 0.5s; }
    .productRelated .product .galleryRelated {
      width: 100%;
      overflow: inherit; }
    .productRelated .product .swiper-slide img {
      display: block;
      width: 100%; }
    .productRelated .productImage {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; }
    .productRelated .productImageBox {
      background-color: #ffffff;
      border-radius: 20px;
      width: 250px;
      height: 250px;
      margin-bottom: 20px;
      margin-top: 20px; }
    .productRelated .productName {
      font-family: "Sarabun", sans-serif;
      font-weight: 700;
      color: #000000;
      font-size: 30px;
      font-size: 1.875rem;
      line-height: 40px;
      margin-top: 20px; }
      @media screen and (max-width: 888px) {
        .productRelated .productName {
          line-height: 25px;
          font-size: 20px;
          font-size: 1.25rem; } }
    .productRelated .productButton {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      margin-top: 20px;
      border: 1px solid #e60101;
      background-color: #e60101;
      border-radius: 10px;
      margin-bottom: 20px;
      text-decoration: none;
      width: 250px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px; }
      @media screen and (max-width: 888px) {
        .productRelated .productButton {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }

.contactIntroduction {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media screen and (max-width: 888px) {
    .contactIntroduction {
      align-items: flex-start;
      margin-top: 100px; } }
.contactTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 60px;
  font-size: 3.75rem; }
  @media screen and (max-width: 888px) {
    .contactTitle {
      line-height: 35px;
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (max-width: 888px) {
    .contactTitle {
      line-height: 40px;
      font-size: 35px; } }
.contactPhrase {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px; }
  @media screen and (max-width: 888px) {
    .contactPhrase {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
.contactContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 70px; }
  @media screen and (max-width: 888px) {
    .contactContent {
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr;
      margin-top: 50px;
      overflow: hidden; } }
.contactInformation {
  display: flex;
  flex-direction: column;
  gap: 70px; }
  @media screen and (max-width: 888px) {
    .contactInformation {
      gap: 50px; } }
  .contactInformation li:nth-child(1), .contactInformation li:nth-child(2), .contactInformation li:nth-child(3) {
    position: relative; }
    .contactInformation li:nth-child(1)::after, .contactInformation li:nth-child(2)::after, .contactInformation li:nth-child(3)::after {
      content: "";
      width: 10px;
      height: 10px;
      position: absolute;
      border: 1px solid #e8e8e8;
      border-radius: 50%;
      bottom: -30px;
      left: 0; }
    .contactInformation li:nth-child(1)::before, .contactInformation li:nth-child(2)::before, .contactInformation li:nth-child(3)::before {
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      background-color: #e8e8e8;
      bottom: -25px;
      left: 11px; }
.contact li:nth-of-type(1) h3 {
  width: 580px; }
  @media screen and (max-width: 888px) {
    .contact li:nth-of-type(1) h3 {
      width: 297px; } }
.contactInformationItem {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  color: #e60101;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 30px;
  letter-spacing: 2px;
  text-transform: uppercase; }
  @media screen and (max-width: 888px) {
    .contactInformationItem {
      line-height: 20px;
      font-size: 18px;
      margin-top: 10px; } }
.contactInformationIcon {
  margin-right: 20px; }
  .contactInformationIcon path {
    stroke: #e60101; }
.contactInformationClockIcon {
  margin-right: 20px; }
  .contactInformationClockIcon path {
    stroke: none; }
.contactInformationText a {
  text-decoration: none; }
  .contactInformationText a:hover {
    color: #e60101;
    transition: 0.5s; }
.contactInformationText {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 40px;
  cursor: default;
  width: 485px;
  display: block; }
  @media screen and (max-width: 888px) {
    .contactInformationText {
      line-height: 25px;
      font-size: 20px;
      font-size: 1.25rem; } }
  .contactInformationText:hover {
    transition: 0.5s; }
  @media screen and (max-width: 888px) {
    .contactInformationText {
      line-height: 20px;
      font-size: 16px;
      margin-top: 10px;
      width: 100%; } }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .contactInformationText {
      width: 100%; } }
.contactImageContent {
  z-index: 99; }
  @media screen and (max-width: 888px) {
    .contactImageContent {
      margin-top: 10px; } }
.contactImage {
  width: 100%;
  height: 70%; }
.contactSocialMedia {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 888px) {
    .contactSocialMedia {
      margin-bottom: 20px;
      margin-top: 20px; } }
  .contactSocialMediaTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase; }
.contact .socialMedia ul {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center; }
  .contact .socialMedia ul li a path {
    fill: #e60101; }
.contactCollaborators {
  background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
  margin-bottom: -250px;
  position: relative;
  z-index: 9; }
  @media screen and (max-width: 888px) {
    .contactCollaborators {
      margin-top: 0;
      margin-bottom: 0; } }
  .contactCollaborators .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    flex-direction: column; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .contactCollaborators .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .contactCollaborators .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .contactCollaborators .container {
        align-items: center; } }
  .contactCollaboratorsContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px; }
    @media screen and (max-width: 888px) {
      .contactCollaboratorsContent {
        margin-top: 50px; } }
  .contactCollaboratorsPhrase {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .contactCollaboratorsTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 60px;
    font-size: 3.75rem;
    width: 900px; }
    @media screen and (max-width: 888px) {
      .contactCollaboratorsTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .contactCollaboratorsTitle {
        line-height: 40px;
        font-size: 35px;
        width: 100%;
        text-align: center; } }
  .contactCollaboratorsBoxOut {
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    margin-top: 120px;
    margin-bottom: -150px;
    margin-left: 140px;
    margin-right: 140px;
    border-radius: 20px; }
    @media screen and (max-width: 888px) {
      .contactCollaboratorsBoxOut {
        margin: 10px;
        justify-content: center; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .contactCollaboratorsBoxOut {
        margin: 10px;
        justify-content: center;
        width: fit-content; } }
    .contactCollaboratorsBoxOutContent {
      padding: 80px 120px 80px 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center; }
      @media screen and (max-width: 888px) {
        .contactCollaboratorsBoxOutContent {
          padding: 20px;
          align-items: center; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .contactCollaboratorsBoxOutContent {
          padding: 50px;
          align-items: center;
          justify-content: center; } }
    .contactCollaboratorsBoxOutText {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px; }
      @media screen and (max-width: 888px) {
        .contactCollaboratorsBoxOutText {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .contactCollaboratorsBoxOutText {
          text-align: center; } }
    .contactCollaboratorsBoxOut .changeColor {
      color: #e60101;
      font-weight: bold; }
    .contactCollaboratorsBoxOutButton {
      text-decoration: none;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
      padding: 15px 30px 15px 30px;
      border-radius: 10px;
      margin-top: 30px;
      display: flex;
      align-items: center;
      gap: 10px;
      height: 50px;
      width: 250px;
      box-sizing: border-box; }
      @media screen and (max-width: 888px) {
        .contactCollaboratorsBoxOutButton {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    .contactCollaboratorsBoxOutIcon path {
      stroke: #ffffff; }
    .contactCollaboratorsBoxOut .contactCollaboratorsBoxOutButton:hover {
      transition: 0.5s;
      color: #ffffff; }
      .contactCollaboratorsBoxOut .contactCollaboratorsBoxOutButton:hover .contactCollaboratorsBoxOutIcon {
        transition: 0.5s;
        transform: rotate(40deg);
        transition: 0.5s; }
    .contactCollaboratorsBoxOutImageContent {
      margin-left: -80px;
      margin-top: -120px;
      margin-bottom: -5px; }
      @media screen and (max-width: 888px) {
        .contactCollaboratorsBoxOutImageContent {
          display: none; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .contactCollaboratorsBoxOutImageContent {
          display: none; } }
    .contactCollaboratorsBoxOutImage {
      width: 100%; }
.contact .changeColor {
  color: #e60101;
  font-weight: bold; }

.blogIntroduction {
  margin-top: 100px; }
  .blogIntroduction .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .blogIntroduction .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .blogIntroduction .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .blogIntroduction .container {
        width: auto;
        align-items: flex-start; } }
  .blogIntroductionTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem;
    margin-top: 50px; }
    @media screen and (max-width: 888px) {
      .blogIntroductionTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .blogIntroductionTitle {
        line-height: 48px;
        font-size: 35px;
        margin-top: 20px; } }
  .blogIntroductionText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .blogIntroductionText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .blogIntroductionSelect {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    margin-top: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    display: flex;
    gap: 30px;
    padding: 10px 20px 10px 20px;
    height: 50px;
    box-sizing: border-box; }
    @media screen and (max-width: 888px) {
      .blogIntroductionSelect {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .blogIntroductionSelect {
        flex-direction: column;
        height: auto;
        width: 100%; } }
    .blogIntroductionSelect .news,
    .blogIntroductionSelect .inovation,
    .blogIntroductionSelect .internalActions,
    .blogIntroductionSelect .everyone {
      cursor: pointer; }
    .blogIntroductionSelect input[type="radio"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      width: 16px;
      height: 16px;
      padding: 2px;
      background-clip: content-box;
      border: 2px solid #000000;
      border-radius: 50%; }
    .blogIntroductionSelect input[type="radio"]:checked {
      background-color: #e60101; }
    .blogIntroductionSelect div {
      display: flex;
      align-items: center; }
.blog .blogNewsPost {
  position: relative; }
.blog .blogNews .lastNewButtonLinkBlock {
  position: absolute;
  right: 36px;
  bottom: 40px; }
  @media screen and (max-width: 888px) {
    .blog .blogNews .lastNewButtonLinkBlock {
      display: none; } }
.blog .blogNewsIntroduction {
  margin-top: 50px;
  overflow: hidden !important; }
  @media screen and (max-width: 888px) {
    .blog .blogNewsIntroduction {
      margin-top: 30px; } }
.blog .blogNewsIntroductionTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 45px;
  font-size: 2.8125rem;
  line-height: 73px;
  position: relative; }
  @media screen and (max-width: 888px) {
    .blog .blogNewsIntroductionTitle {
      line-height: 30px;
      font-size: 25px;
      font-size: 1.5625rem; } }
  .blog .blogNewsIntroductionTitle::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    bottom: 25px;
    left: 239px; }
    @media screen and (max-width: 888px) {
      .blog .blogNewsIntroductionTitle::after {
        display: none; } }
  .blog .blogNewsIntroductionTitle::before {
    content: "";
    background-color: #e8e8e8;
    width: 100vw;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    bottom: 30px;
    left: 250px; }
    @media screen and (max-width: 888px) {
      .blog .blogNewsIntroductionTitle::before {
        display: none; } }
.blog .blogNewsPhrase {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px;
  margin-bottom: 50px; }
  @media screen and (max-width: 888px) {
    .blog .blogNewsPhrase {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (max-width: 888px) {
    .blog .blogNewsPhrase {
      margin-bottom: 30px; } }
.blog .posts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 0; }
  @media screen and (max-width: 888px) {
    .blog .posts {
      grid-template-columns: 1fr; } }
.blog .blogNewsPost a {
  text-decoration: none; }
.blog .blogNewsPost {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  height: auto;
  width: auto;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  display: none; }
  .blog .blogNewsPost:nth-child(1), .blog .blogNewsPost:nth-child(2), .blog .blogNewsPost:nth-child(3), .blog .blogNewsPost:nth-child(4) {
    display: block; }
  @media screen and (max-width: 888px) {
    .blog .blogNewsPost {
      margin-bottom: 20px; } }
  .blog .blogNewsPost:hover .lastNewTitle,
  .blog .blogNewsPost .lastNewImage:hover .lastNewTitle,
  .blog .blogNewsPost .lastNewPost:hover .lastNewTitle {
    transition: 0.5s;
    color: #e60101; }
  .blog .blogNewsPost:hover a svg path,
  .blog .blogNewsPost .lastNewImage:hover a svg path,
  .blog .blogNewsPost .lastNewPost:hover a svg path {
    transition: 0.5s;
    stroke: #e60101; }
  .blog .blogNewsPost:hover::before,
  .blog .blogNewsPost:hover .lastNewPost::before,
  .blog .blogNewsPost .lastNewImage:hover::before,
  .blog .blogNewsPost .lastNewImage:hover .lastNewPost::before,
  .blog .blogNewsPost .lastNewPost:hover::before,
  .blog .blogNewsPost .lastNewPost:hover .lastNewPost::before {
    animation: fade 500ms ease;
    animation-fill-mode: forwards; }
  .blog .blogNewsPost:hover::after,
  .blog .blogNewsPost:hover .lastNewPost::after,
  .blog .blogNewsPost .lastNewImage:hover::after,
  .blog .blogNewsPost .lastNewImage:hover .lastNewPost::after,
  .blog .blogNewsPost .lastNewPost:hover::after,
  .blog .blogNewsPost .lastNewPost:hover .lastNewPost::after {
    transition: 1s;
    border: 1px solid #e60101; }
  .blog .blogNewsPost:hover a div,
  .blog .blogNewsPost .lastNewImage:hover a div,
  .blog .blogNewsPost .lastNewPost:hover a div {
    overflow: hidden; }
  .blog .blogNewsPost:hover .lastNewImage,
  .blog .blogNewsPost .lastNewImage:hover .lastNewImage,
  .blog .blogNewsPost .lastNewPost:hover .lastNewImage {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform 0.5s ease;
    overflow: hidden; }
  .blog .blogNewsPost .blogNewsContent {
    padding: 50px 100px 50px 50px;
    display: flex;
    flex-direction: column;
    position: relative; }
    @media screen and (max-width: 888px) {
      .blog .blogNewsPost .blogNewsContent {
        padding: 10px 20px; } }
  .blog .blogNewsPost .lastNewImage {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px 20px 0 0; }
  .blog .blogNewsPost .blogNewsCategory {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #e60101;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .blog .blogNewsPost .blogNewsTitle a {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px;
    text-decoration: none; }
    @media screen and (max-width: 888px) {
      .blog .blogNewsPost .blogNewsTitle a {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
  .blog .blogNewsPost .lastNewPost p {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .blog .blogNewsPost .lastNewPost p {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .blog .blogNewsPost .blogNewsLink {
    align-self: flex-end;
    margin-right: 0;
    margin-top: 15px; }
    @media screen and (max-width: 888px) {
      .blog .blogNewsPost .blogNewsLink {
        margin-bottom: 15px; } }
  .blog .blogNewsPost .blogNewsIcon {
    cursor: pointer;
    transform: rotate(270deg);
    position: relative;
    bottom: -10px; }
    .blog .blogNewsPost .blogNewsIcon path {
      stroke: #b30001; }
.blog .seeMoreNews {
  text-align: center;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .blog .seeMoreNews {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
.blog .moreNewsButtonBox {
  display: flex;
  align-items: center;
  justify-content: center; }
.blog .moreNewsButtonBlog {
  cursor: pointer;
  border: 1px solid #e60101;
  border-radius: 10px;
  width: 250px;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .blog .moreNewsButtonBlog {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (max-width: 888px) {
    .blog .moreNewsButtonBlog {
      margin-bottom: 30px; } }
  .blog .moreNewsButtonBlog .moreNewsButtonIcon path {
    stroke: #e60101; }
  .blog .moreNewsButtonBlog:hover {
    transition: 0.5s;
    background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
    color: #ffffff; }
    .blog .moreNewsButtonBlog:hover .moreNewsButtonIcon path {
      transition: 0.5s;
      stroke: #ffffff; }

.postBlog .container {
  display: flex;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .postBlog .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .postBlog .container {
      max-width: 100%;
      padding: 0px 10px; } }
.postBlogIntroduction {
  margin-top: 120px; }
  .postBlogIntroduction .container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto; }
    @media screen and (max-width: 888px) {
      .postBlogIntroduction .container {
        margin-top: 0;
        align-items: flex-start; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .postBlogIntroduction .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .postBlogIntroduction .container {
        max-width: 100%;
        padding: 0px 10px; } }
  .postBlogIntroduction p {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .postBlogIntroduction p {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .postBlogIntroductionSelect {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    margin-top: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    display: flex;
    gap: 30px;
    padding: 10px 20px 10px 20px; }
    @media screen and (max-width: 888px) {
      .postBlogIntroductionSelect {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .postBlogIntroductionSelect {
        flex-direction: column;
        align-self: flex-start;
        min-width: 80%; } }
    .postBlogIntroductionSelect input[type="checkbox"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      width: 16px;
      height: 16px;
      padding: 2px;
      background-clip: content-box;
      border: 2px solid #000000;
      border-radius: 50%; }
    .postBlogIntroductionSelect input[type="checkbox"]:checked {
      background-color: #e60101; }
    .postBlogIntroductionSelect div {
      display: flex;
      align-items: center; }
    .postBlogIntroductionSelect label {
      cursor: pointer; }
.postBlog .releasePosts {
  margin-top: 130px;
  margin-bottom: 150px; }
  @media screen and (max-width: 888px) {
    .postBlog .releasePosts {
      margin-top: 50px;
      margin-bottom: 50px; } }
  .postBlog .releasePosts .container {
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto; }
    @media screen and (max-width: 888px) {
      .postBlog .releasePosts .container {
        margin-top: 100px;
        margin-bottom: 50px; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .postBlog .releasePosts .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .postBlog .releasePosts .container {
        max-width: 100%;
        padding: 0px 10px; } }
  .postBlog .releasePosts .releasePost {
    margin: 0 120px 0 120px;
    position: relative; }
    @media screen and (max-width: 888px) {
      .postBlog .releasePosts .releasePost {
        margin: 0; } }
    .postBlog .releasePosts .releasePost::after {
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      background-color: #e8e8e8;
      bottom: -50px;
      left: 0; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePost::after {
          bottom: -20px; } }
    .postBlog .releasePosts .releasePostIntroductionNews {
      font-family: "Sarabun", sans-serif;
      font-weight: 500;
      color: #e60101;
      font-size: 15px;
      font-size: 0.9375rem;
      line-height: 30px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-right: 20px; }
    .postBlog .releasePosts .releasePostIntroductionInformation {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #808080;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 30px;
      margin-right: 30px; }
    .postBlog .releasePosts .releasePostIntroduction .dot {
      position: relative; }
      .postBlog .releasePosts .releasePostIntroduction .dot::after {
        content: "";
        width: 1px;
        height: 1px;
        position: absolute;
        border: 1px solid #808080;
        background-color: #808080;
        border-radius: 50%;
        right: -20px;
        top: 7px; }
    .postBlog .releasePosts .releasePostIntroductionTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 60px;
      font-size: 3.75rem; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePostIntroductionTitle {
          line-height: 35px;
          font-size: 30px;
          font-size: 1.875rem; } }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePostIntroductionTitle {
          line-height: 40px;
          font-size: 35px; } }
    .postBlog .releasePosts .releasePostProfile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 50px;
      margin-bottom: 30px; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePostProfile {
          align-items: flex-start;
          flex-direction: column;
          gap: 20px;
          margin-top: 20px; } }
      @media screen and (min-width: 890px) and (max-width: 1239px) {
        .postBlog .releasePosts .releasePostProfile {
          align-items: flex-start;
          flex-direction: column;
          gap: 20px;
          margin-top: 20px; } }
      .postBlog .releasePosts .releasePostProfileInformation {
        display: flex;
        align-items: center;
        gap: 10px; }
      .postBlog .releasePosts .releasePostProfileImage {
        width: 70px;
        height: 70px;
        background: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
        border-radius: 50%; }
      .postBlog .releasePosts .releasePostProfileAuthor {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 30px;
        width: 200px;
        margin-bottom: -10px; }
      .postBlog .releasePosts .releasePostProfileFunction {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #808080;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 30px; }
      .postBlog .releasePosts .releasePostProfileShare {
        cursor: pointer;
        text-decoration: none;
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 30px; }
        @media screen and (max-width: 888px) {
          .postBlog .releasePosts .releasePostProfileShare {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
        .postBlog .releasePosts .releasePostProfileShareIcon {
          margin-right: 5px; }
        .postBlog .releasePosts .releasePostProfileShare:hover {
          transition: 0.5s;
          text-decoration: underline; }
    .postBlog .releasePosts .releasePost p {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px;
      margin-bottom: 20px; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePost p {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePost p {
          line-height: 28px; } }
    .postBlog .releasePosts .releasePostImage {
      width: 100%;
      height: 100%;
      margin-bottom: 30px;
      margin-top: 20px;
      border-radius: 20px; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePostImage {
          margin-bottom: 10px;
          margin-top: 10px; } }
    .postBlog .releasePosts .releasePostTextImportant {
      font-family: "Sarabun", sans-serif;
      font-weight: 700;
      color: #000000;
      font-size: 30px;
      font-size: 1.875rem;
      line-height: 40px;
      margin-bottom: 20px; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePostTextImportant {
          line-height: 25px;
          font-size: 20px;
          font-size: 1.25rem; } }
    .postBlog .releasePosts .releasePost p {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px;
      margin-bottom: 20px; }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePost p {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .postBlog .releasePosts .releasePost p {
          line-height: 28px; } }
.postBlog .postsRelated {
  margin-bottom: 50px;
  overflow: hidden; }
  .postBlog .postsRelated .container {
    display: block;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .postBlog .postsRelated .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .postBlog .postsRelated .container {
        max-width: 100%;
        padding: 0px 10px; } }
    .postBlog .postsRelated .container .postsRelatedIntroduction {
      grid-template-columns: 2fr 1fr; }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .postsRelatedIntroduction {
          grid-template-columns: 1fr; } }
    .postBlog .postsRelated .container .postsRelatedDetailIcon {
      width: 700px;
      transform: rotate(270deg); }
    .postBlog .postsRelated .container .postsRelatedTitle {
      font-family: "Sarabun", sans-serif;
      font-weight: 800;
      color: #000000;
      font-size: 60px;
      font-size: 3.75rem;
      margin-bottom: 30px;
      position: relative; }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .postsRelatedTitle {
          line-height: 35px;
          font-size: 30px;
          font-size: 1.875rem; } }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .postsRelatedTitle {
          line-height: 40px;
          font-size: 35px; } }
      .postBlog .postsRelated .container .postsRelatedTitle::before {
        content: "";
        width: 100vw;
        height: 1px;
        position: absolute;
        background-color: #e8e8e8;
        bottom: 30px;
        left: 600px; }
      .postBlog .postsRelated .container .postsRelatedTitle::after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        bottom: 24px;
        left: 588px; }
    .postBlog .postsRelated .container .postsList {
      gap: 50px;
      display: grid;
      column-gap: 50px;
      row-gap: 0;
      grid-template-columns: 1fr 1fr; }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .postsList {
          grid-template-columns: 1fr;
          gap: 0; } }
      .postBlog .postsRelated .container .postsList .lastNewImage {
        height: 200px;
        width: 100%; }
    .postBlog .postsRelated .container a div {
      overflow: hidden; }
    .postBlog .postsRelated .container .postRelated a {
      text-decoration: none; }
    .postBlog .postsRelated .container .postRelated {
      border: 1px solid #e8e8e8;
      border-radius: 20px;
      height: auto;
      width: auto;
      overflow: hidden;
      display: none;
      margin-bottom: 50px; }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .postRelated {
          margin-bottom: 20px; } }
      .postBlog .postsRelated .container .postRelated:nth-child(1), .postBlog .postsRelated .container .postRelated:nth-child(2) {
        display: block; }
      .postBlog .postsRelated .container .postRelated:hover {
        box-shadow: 1px 0 20px #e8e8e8; }
        .postBlog .postsRelated .container .postRelated:hover .lastNewTitle {
          transition: 0.5s;
          color: #e60101; }
        .postBlog .postsRelated .container .postRelated:hover a svg path {
          transition: 0.5s;
          stroke: #e60101; }
        .postBlog .postsRelated .container .postRelated:hover .lastNewImage {
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
          transition: all 0.5s ease;
          overflow: hidden; }
        .postBlog .postsRelated .container .postRelated:hover .lastNewPost::before {
          animation: fade 500ms ease;
          animation-fill-mode: forwards; }
        .postBlog .postsRelated .container .postRelated:hover .lastNewPost::after {
          transition: 1s;
          border: 1px solid #e60101; }
      .postBlog .postsRelated .container .postRelatedPost {
        padding: 50px 100px 50px 50px;
        display: flex;
        flex-direction: column;
        position: relative; }
        @media screen and (max-width: 888px) {
          .postBlog .postsRelated .container .postRelatedPost {
            padding: 10px 20px; } }
        .postBlog .postsRelated .container .postRelatedPost::after {
          content: "";
          width: 10px;
          height: 10px;
          position: absolute;
          border: 1px solid #e8e8e8;
          border-radius: 50%;
          right: 131px;
          bottom: 45px; }
          @media screen and (max-width: 888px) {
            .postBlog .postsRelated .container .postRelatedPost::after {
              display: none; } }
          @media screen and (min-width: 890px) and (max-width: 1239px) {
            .postBlog .postsRelated .container .postRelatedPost::after {
              display: none; } }
        .postBlog .postsRelated .container .postRelatedPost::before {
          content: "";
          width: 450px;
          height: 1px;
          position: absolute;
          background-color: #e8e8e8;
          bottom: 50px;
          left: 0; }
          @media screen and (max-width: 888px) {
            .postBlog .postsRelated .container .postRelatedPost::before {
              display: none; } }
          @media screen and (min-width: 890px) and (max-width: 1239px) {
            .postBlog .postsRelated .container .postRelatedPost::before {
              display: none; } }
      .postBlog .postsRelated .container .postRelatedImage {
        width: 100%;
        height: 100%;
        border-radius: 20px 20px 0 0; }
      .postBlog .postsRelated .container .postRelatedCategory {
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #e60101;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 30px;
        letter-spacing: 2px;
        text-transform: uppercase; }
      .postBlog .postsRelated .container .postRelatedTitle a {
        font-family: "Sarabun", sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 30px;
        font-size: 1.875rem;
        line-height: 40px;
        text-decoration: none; }
        @media screen and (max-width: 888px) {
          .postBlog .postsRelated .container .postRelatedTitle a {
            line-height: 25px;
            font-size: 20px;
            font-size: 1.25rem; } }
      .postBlog .postsRelated .container .postRelated p {
        font-family: "Sarabun", sans-serif;
        font-weight: 400;
        color: #808080;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 30px; }
        @media screen and (max-width: 888px) {
          .postBlog .postsRelated .container .postRelated p {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      .postBlog .postsRelated .container .postRelatedButtonLink {
        display: flex;
        justify-content: flex-end; }
      .postBlog .postsRelated .container .postRelatedLink {
        align-self: flex-end;
        margin-right: -50px;
        margin-bottom: 10px; }
      .postBlog .postsRelated .container .postRelatedIcon {
        transform: rotate(270deg);
        margin-bottom: -20px; }
        .postBlog .postsRelated .container .postRelatedIcon path {
          stroke: #b30001; }
    .postBlog .postsRelated .container .seeMoreNews {
      text-align: center;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px; }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .seeMoreNews {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
    .postBlog .postsRelated .container .seeMoreNewsButtonPostBlog {
      border: 1px solid #e60101;
      background-color: #ffffff;
      border-radius: 10px;
      height: 50px;
      width: 250px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-decoration: none;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px; }
      @media screen and (max-width: 888px) {
        .postBlog .postsRelated .container .seeMoreNewsButtonPostBlog {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      .postBlog .postsRelated .container .seeMoreNewsButtonPostBlog:hover {
        transition: 0.5s;
        background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
        color: #ffffff; }
        .postBlog .postsRelated .container .seeMoreNewsButtonPostBlog:hover .seeMoreNewsButtonPostBlogIcon path {
          stroke: #ffffff;
          transition: 0.5s; }
      .postBlog .postsRelated .container .seeMoreNewsButtonPostBlogIcon path {
        stroke: #e60101; }
.postBlog .releasePostProfileShareContent {
  position: relative;
  display: inline-block; }
.postBlog .releasePostProfileShareContent .releasePostProfileShareText,
.postBlog .releasePostProfileShareContent .releasePostProfileShareTextAlert {
  visibility: hidden;
  width: 200px;
  background-color: #e8e8e8;
  color: #000000;
  text-align: center;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 120%;
  left: 50%;
  margin-left: -115px;
  opacity: 0;
  transition: opacity 0.010s;
  border-radius: 20px; }
.postBlog .releasePostProfileShareContent .releasePostProfileShareText::after,
.postBlog .releasePostProfileShareContent .releasePostProfileShareTextAlert::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: #e8e8e8 transparent transparent transparent; }
.postBlog .releasePostProfileShareContent:active .releasePostProfileShareText {
  visibility: visible;
  opacity: 1; }
.postBlog .releasePostProfileShareContent:hover .releasePostProfileShareTextAlert {
  visibility: visible;
  opacity: 1; }

.software .softwareIntroduction .container {
  display: flex;
  box-sizing: border-box;
  width: 1240px;
  border: 0;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
  text-align: center;
  position: relative;
  margin-top: 100px; }
  @media screen and (min-width: 890px) and (max-width: 1239px) {
    .software .softwareIntroduction .container {
      max-width: 100%;
      margin: 0 2px; } }
  @media screen and (max-width: 888px) {
    .software .softwareIntroduction .container {
      max-width: 100%;
      padding: 0px 10px; } }
  @media screen and (max-width: 888px) {
    .software .softwareIntroduction .container {
      gap: 10px; } }
.software .softwareIntroductionElementDetail {
  width: 100%; }
.software .softwareIntroductionImageDetailFirst {
  position: absolute;
  z-index: -99;
  left: 100px;
  transform: rotate(180deg); }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionImageDetailFirst {
      display: none; } }
.software .softwareIntroductionImageDetailSecond {
  position: absolute;
  z-index: -99;
  right: 100px;
  bottom: -200px; }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionImageDetailSecond {
      display: none; } }
.software .softwareIntroductionPhrase {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 30px;
  letter-spacing: 2px;
  text-transform: uppercase; }
.software .softwareIntroductionTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 60px;
  font-size: 3.75rem;
  width: 420px;
  line-height: 80px;
  padding-bottom: 10px;
  background: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionTitle {
      line-height: 35px;
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionTitle {
      width: 100%;
      line-height: 40px;
      font-size: 35px; } }
.software .softwareIntroductionText {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px;
  width: 440px; }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionText {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  .software .softwareIntroductionText span {
    color: #145bbe;
    font-weight: bold; }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionText {
      width: 100%; } }
.software .softwareIntroductionImageSection {
  position: relative;
  margin-top: 50px; }
.software .softwareIntroductionImage {
  margin-left: 15px;
  margin-right: 15px; }
  .software .softwareIntroductionImagePrincipal {
    width: 670px;
    height: 389px; }
    @media screen and (max-width: 888px) {
      .software .softwareIntroductionImagePrincipal {
        width: 100%;
        height: 100%; } }
  .software .softwareIntroductionImage4 {
    position: absolute;
    width: 200px;
    bottom: -60px;
    right: -60px; }
    @media screen and (max-width: 888px) {
      .software .softwareIntroductionImage4 {
        display: none; } }
  .software .softwareIntroductionImage1 {
    position: absolute;
    width: 160px;
    top: -30px;
    left: -70px; }
    @media screen and (max-width: 888px) {
      .software .softwareIntroductionImage1 {
        display: none; } }
  .software .softwareIntroductionImage2 {
    position: absolute;
    width: 100px;
    top: 30px;
    right: 20px; }
    @media screen and (max-width: 888px) {
      .software .softwareIntroductionImage2 {
        display: none; } }
  .software .softwareIntroductionImage3 {
    position: absolute;
    width: 250px;
    bottom: -50px;
    left: -150px; }
    @media screen and (max-width: 888px) {
      .software .softwareIntroductionImage3 {
        display: none; } }
.software .softwareIntroductionQuestion {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px; }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionQuestion {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
.software .softwareIntroductionAccess {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px;
  background-image: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
  border-radius: 10px;
  text-decoration: none;
  height: 50px;
  width: 250px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (max-width: 888px) {
    .software .softwareIntroductionAccess {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  .software .softwareIntroductionAccess:hover {
    background-image: linear-gradient(281deg, #25a3e7 20%, #145bbe 70%); }
.software .softwareSystem {
  margin-bottom: 300px; }
  @media screen and (max-width: 888px) {
    .software .softwareSystem {
      margin-bottom: 0; } }
  .software .softwareSystemIntroduction {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 150px;
    margin-bottom: 50px; }
    @media screen and (max-width: 888px) {
      .software .softwareSystemIntroduction {
        margin-top: 50px;
        margin-bottom: 50px; } }
  .software .softwareSystemTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem;
    width: 450px;
    line-height: 80px;
    background: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; }
    @media screen and (max-width: 888px) {
      .software .softwareSystemTitle {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .software .softwareSystemTitle {
        text-align: center;
        width: 100%;
        line-height: 40px;
        font-size: 35px; } }
  .software .softwareSystemList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px; }
    @media screen and (max-width: 888px) {
      .software .softwareSystemList {
        grid-template-columns: 1fr;
        gap: 20px; } }
    .software .softwareSystemList li {
      display: grid;
      grid-template-columns: 2fr 3fr;
      background-color: #fafafa;
      padding: 20px 20px 0 20px;
      border-radius: 20px;
      position: relative; }
      .software .softwareSystemList li:hover {
        box-shadow: 1px 0 20px #e8e8e8;
        transition: 0.5s; }
        .software .softwareSystemList li:hover .softwareSystemItemKnowMore {
          transition: 0.5s;
          color: #000000; }
      .software .softwareSystemList li::after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        bottom: 54px;
        right: 168px; }
        @media screen and (max-width: 888px) {
          .software .softwareSystemList li::after {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .software .softwareSystemList li::after {
            display: none; } }
      .software .softwareSystemList li hr {
        width: 200px;
        height: 1px;
        position: absolute;
        background-color: #e8e8e8;
        bottom: 51px;
        right: 180px;
        border: none; }
        @media screen and (max-width: 888px) {
          .software .softwareSystemList li hr {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .software .softwareSystemList li hr {
            display: none; } }
    .software .softwareSystemList .softwareSystemListItem:nth-child(4):hover .softwareSystemItemTitle {
      transition: 0.5s;
      color: #e60101; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(4):hover .softwareSystemItemKnowMoreIcon path {
      transition: 0.5s;
      stroke: #e60101; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(4):hover hr {
      animation: fadeSoftwareFourth 0.5s ease;
      animation-fill-mode: forwards;
      background-color: #e60101; }
@keyframes fadeSoftwareFourth {
  0% {
    content: "";
    width: 0;
    height: 1px;
    position: absolute;
    bottom: 51px;
    right: 180px;
    border: none;
    transform: translateX(-200px); }
  100% {
    width: 200px;
    transform: translateX(0); } }
    .software .softwareSystemList .softwareSystemListItem:nth-child(4):hover::after {
      transition: 1s;
      border-color: #e60101; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(1):hover .softwareSystemItemTitle {
      transition: 0.5s;
      color: #c2a366; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(1):hover .softwareSystemItemKnowMoreIcon path {
      transition: 0.5s;
      stroke: #c2a366; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(1):hover hr {
      animation: fadeSoftwareFirst 0.5s ease;
      animation-fill-mode: forwards;
      background-color: #c2a366; }
@keyframes fadeSoftwareFirst {
  0% {
    content: "";
    width: 0;
    height: 1px;
    position: absolute;
    bottom: 51px;
    right: 180px;
    border: none;
    transform: translateX(-200px); }
  100% {
    width: 200px;
    transform: translateX(0); } }
    .software .softwareSystemList .softwareSystemListItem:nth-child(1):hover::after {
      transition: 1s;
      border-color: #c2a366; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(2):hover .softwareSystemItemTitle {
      transition: 0.5s;
      color: #46a188; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(2):hover .softwareSystemItemKnowMoreIcon path {
      transition: 0.5s;
      stroke: #46a188; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(2):hover hr {
      animation: fadeSoftwareSecond 0.5s ease;
      animation-fill-mode: forwards;
      background-color: #46a188; }
@keyframes fadeSoftwareSecond {
  0% {
    content: "";
    width: 0;
    height: 1px;
    position: absolute;
    bottom: 51px;
    right: 180px;
    border: none;
    transform: translateX(-200px); }
  100% {
    width: 200px;
    transform: translateX(0); } }
    .software .softwareSystemList .softwareSystemListItem:nth-child(2):hover::after {
      transition: 1s;
      border-color: #46a188; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(3):hover .softwareSystemItemTitle {
      transition: 0.5s;
      color: #3b7c97; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(3):hover .softwareSystemItemKnowMoreIcon path {
      transition: 0.5s;
      stroke: #3b7c97; }
    .software .softwareSystemList .softwareSystemListItem:nth-child(3):hover hr {
      animation: fadeSoftwareThird 0.5s ease;
      animation-fill-mode: backwards;
      background-color: #3b7c97; }
@keyframes fadeSoftwareThird {
  0% {
    content: "";
    width: 0;
    height: 1px;
    position: absolute;
    bottom: 51px;
    right: 180px;
    border: none;
    transform: translateX(-200px); }
  100% {
    width: 200px;
    transform: translateX(0); } }
    .software .softwareSystemList .softwareSystemListItem:nth-child(3):hover::after {
      transition: 1s;
      border-color: #3b7c97; }
    .software .softwareSystemListItem.active {
      width: 600px;
      height: 420px;
      z-index: 9;
      margin-bottom: -150px;
      transition-delay: 2s;
      transition-timing-function: ease; }
      @media screen and (max-width: 888px) {
        .software .softwareSystemListItem.active {
          height: 100%;
          width: 100%; } }
      .software .softwareSystemListItem.active .softwareSystemItemShowMore {
        display: block;
        animation: easeOpacity 2s ease; }
@keyframes easeOpacity {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
      .software .softwareSystemListItem.active .softwareSystemItemKnowMoreContent {
        display: none; }
      .software .softwareSystemListItem.active::after {
        display: none; }
      .software .softwareSystemListItem.active::before {
        display: none; }
    .software .softwareSystemListItem {
      width: 600px;
      height: 280px;
      box-sizing: border-box; }
      @media screen and (max-width: 888px) {
        .software .softwareSystemListItem {
          height: 100%;
          width: 100%; } }
  .software .softwareSystemItemImageContent {
    z-index: 9;
    margin: 0 0 20px 0; }
  .software .softwareSystemItemImage {
    width: 217px;
    height: 217px; }
    @media screen and (max-width: 888px) {
      .software .softwareSystemItemImage {
        height: 140px;
        width: 140px; } }
  .software .softwareSystemItemContent {
    padding: 20px 20px 20px 20px; }
    @media screen and (max-width: 888px) {
      .software .softwareSystemItemContent {
        padding: 0 0 20px 10px; } }
    .software .softwareSystemItemContent p {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #808080;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 30px; }
      @media screen and (max-width: 888px) {
        .software .softwareSystemItemContent p {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      @media screen and (max-width: 888px) {
        .software .softwareSystemItemContent p {
          font-size: 15px;
          line-height: 22px; } }
  .software .softwareSystemItemTitle {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px; }
    @media screen and (max-width: 888px) {
      .software .softwareSystemItemTitle {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
  .software .softwareSystemItemKnowMoreContent {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px; }
  .software .softwareSystemItemKnowMore {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    text-decoration: none;
    position: relative;
    bottom: -27px; }
    .software .softwareSystemItemKnowMoreIcon {
      cursor: pointer;
      transform: rotate(270deg);
      margin-left: 10px; }
  .software .softwareSystemItemShowMore {
    display: none; }
    .software .softwareSystemItemShowMore p {
      padding-top: 20px; }
    .software .softwareSystemItemShowMoreKnowing {
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 22px;
      position: relative;
      left: -180px;
      top: 20px;
      text-decoration: none;
      z-index: 10;
      transition: 0.5s;
      display: flex;
      gap: 5px;
      animation-delay: 3s;
      align-items: center; }
      @media screen and (max-width: 888px) {
        .software .softwareSystemItemShowMoreKnowing {
          line-height: 20px;
          font-size: 15px;
          font-size: 0.9375rem; } }
      .software .softwareSystemItemShowMoreKnowingIcon {
        margin-left: 10px; }
    .software .softwareSystemItemShowMoreCloseContent {
      position: relative;
      margin-top: 80px;
      display: flex;
      justify-content: end;
      gap: 20px;
      bottom: 20px; }
      .software .softwareSystemItemShowMoreCloseContent::after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        bottom: 4px;
        right: 105px; }
        @media screen and (max-width: 888px) {
          .software .softwareSystemItemShowMoreCloseContent::after {
            display: none; } }
        @media screen and (min-width: 890px) and (max-width: 1239px) {
          .software .softwareSystemItemShowMoreCloseContent::after {
            display: none; } }
      .software .softwareSystemItemShowMoreCloseContent::before {
        content: "";
        width: 445px;
        height: 1px;
        position: absolute;
        background-color: #e8e8e8;
        bottom: 10px;
        left: -265px; }
    .software .softwareSystemItemShowMoreButtonClose {
      cursor: pointer;
      display: flex;
      gap: 20px;
      font-family: "Sarabun", sans-serif;
      font-weight: 400;
      color: #000000;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 18px; }
.software .jobOffer {
  background-image: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
  padding-top: 50px;
  height: 250px; }
  @media screen and (max-width: 888px) {
    .software .jobOffer {
      margin-top: 20px;
      padding-bottom: 40px; } }
  .software .jobOfferBox {
    background-color: #fafafa;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-right: 250px;
    margin-left: 150px;
    margin-top: -200px; }
    @media screen and (max-width: 888px) {
      .software .jobOfferBox {
        margin-right: 0;
        margin-left: 0;
        margin-top: 50px;
        margin-bottom: 50px;
        grid-template-columns: 1fr; } }
  .software .jobOfferContent {
    padding: 80px 0 80px 100px; }
    @media screen and (max-width: 888px) {
      .software .jobOfferContent {
        padding: 30px 30px 30px 30px;
        display: flex;
        justify-content: center;
        flex-direction: column; } }
  .software .jobOfferText {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px;
    width: 350px; }
    @media screen and (max-width: 888px) {
      .software .jobOfferText {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .software .jobOfferText {
        font-size: 15px;
        line-height: 22px;
        text-align: center;
        width: 100%; } }
    .software .jobOfferText span {
      color: #145bbe;
      font-weight: bold; }
  .software .jobOfferButton {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    border-radius: 10px;
    background-image: linear-gradient(187deg, #25a3e7 0%, #145bbe 84%);
    margin-top: 20px;
    text-decoration: none;
    height: 50px;
    width: 250px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 888px) {
      .software .jobOfferButton {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    .software .jobOfferButton:hover {
      transition: 0.5s;
      color: #ffffff; }
  .software .jobOfferBoxImage {
    margin-top: -145px;
    margin-bottom: -150px;
    margin-right: -140px;
    margin-left: 80px; }
    @media screen and (max-width: 888px) {
      .software .jobOfferBoxImage {
        display: none; } }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .software .jobOfferBoxImage {
        display: none; } }
  .software .jobOfferImage {
    width: 100%;
    height: 100%; }

section.downloadsPageTop h1.downloadsPageTitle {
  display: block;
  margin: 150px 0px 0px 0px;
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 60px;
  font-size: 3.75rem;
  text-align: center; }
  @media screen and (max-width: 888px) {
    section.downloadsPageTop h1.downloadsPageTitle {
      line-height: 35px;
      font-size: 30px;
      font-size: 1.875rem; } }
  @media screen and (max-width: 888px) {
    section.downloadsPageTop h1.downloadsPageTitle {
      margin: 100px 0px 0px 0px; } }
section.downloadsPageTop .downloadsInputBox {
  position: relative;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  max-width: max-content;
  margin: 0 auto; }
  @media screen and (max-width: 888px) {
    section.downloadsPageTop .downloadsInputBox {
      width: 100%;
      max-width: 90%; } }
section.downloadsPageTop .downloadsInput {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
  padding: 0 50px 0 20px;
  border-radius: 10px;
  border: 1px solid #e60101;
  height: 50px;
  box-sizing: border-box;
  margin-top: 20px;
  min-width: 400px; }
  @media screen and (max-width: 888px) {
    section.downloadsPageTop .downloadsInput {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (max-width: 888px) {
    section.downloadsPageTop .downloadsInput {
      padding: 10px 10px 10px 20px;
      width: 100%;
      min-width: 100%; } }
section.downloadsPageTop .downloadsIcon {
  position: absolute;
  right: 15px;
  top: 47%;
  max-width: 20px; }
  section.downloadsPageTop .downloadsIcon path {
    stroke: #e60101; }

section.downloadsItens {
  padding-bottom: 50px; }
  section.downloadsItens .container .downloadsList {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 30px;
    justify-items: flex-start;
    align-items: center; }
    @media screen and (max-width: 888px) {
      section.downloadsItens .container .downloadsList {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start; } }
    section.downloadsItens .container .downloadsList li a {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center; }
      section.downloadsItens .container .downloadsList li a svg {
        display: block;
        width: 50px;
        margin-right: 20px;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear; }
        section.downloadsItens .container .downloadsList li a svg g,
        section.downloadsItens .container .downloadsList li a svg circle,
        section.downloadsItens .container .downloadsList li a svg path {
          -webkit-transition: all 0.3s linear;
          -moz-transition: all 0.3s linear;
          -ms-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
          transition: all 0.3s linear; }
      section.downloadsItens .container .downloadsList li a span {
        margin: 0;
        padding: 0;
        font-family: "Sarabun", sans-serif;
        font-weight: 500;
        color: #000000;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 30px;
        max-width: 175px;
        display: block;
        line-height: 21px;
        color: #808080;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear; }
        @media screen and (max-width: 888px) {
          section.downloadsItens .container .downloadsList li a span {
            line-height: 20px;
            font-size: 15px;
            font-size: 0.9375rem; } }
      section.downloadsItens .container .downloadsList li a:hover svg g {
        fill: #e60101; }
      section.downloadsItens .container .downloadsList li a:hover svg path {
        stroke: #fff; }
      section.downloadsItens .container .downloadsList li a:hover span {
        color: #000000; }
      @media screen and (max-width: 888px) {
        section.downloadsItens .container .downloadsList li a {
          justify-content: flex-start; } }

.privacyPolicyIntroduction {
  margin-top: 100px; }
  .privacyPolicyIntroduction .container {
    display: flex;
    box-sizing: border-box;
    width: 1240px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; }
    @media screen and (min-width: 890px) and (max-width: 1239px) {
      .privacyPolicyIntroduction .container {
        max-width: 100%;
        margin: 0 2px; } }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroduction .container {
        max-width: 100%;
        padding: 0px 10px; } }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroduction .container {
        width: auto;
        align-items: flex-start; } }
  .privacyPolicyIntroductionHeading {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 60px;
    font-size: 3.75rem;
    margin-top: 50px; }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroductionHeading {
        line-height: 35px;
        font-size: 30px;
        font-size: 1.875rem; } }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroductionHeading {
        line-height: 48px;
        font-size: 35px;
        margin-top: 20px; } }
  .privacyPolicyIntroductionParagraph {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroductionParagraph {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .privacyPolicyIntroductionSelect {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    margin-top: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    display: flex;
    gap: 30px;
    padding: 10px 20px 10px 20px;
    height: 50px;
    box-sizing: border-box; }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroductionSelect {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 888px) {
      .privacyPolicyIntroductionSelect {
        flex-direction: column;
        height: auto;
        width: 100%; } }
    .privacyPolicyIntroductionSelect .news,
    .privacyPolicyIntroductionSelect .inovation,
    .privacyPolicyIntroductionSelect .internalActions,
    .privacyPolicyIntroductionSelect .everyone {
      cursor: pointer; }
    .privacyPolicyIntroductionSelect input[type="radio"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      width: 16px;
      height: 16px;
      padding: 2px;
      background-clip: content-box;
      border: 2px solid #000000;
      border-radius: 50%; }
    .privacyPolicyIntroductionSelect input[type="radio"]:checked {
      background-color: #e60101; }
    .privacyPolicyIntroductionSelect div {
      display: flex;
      align-items: center; }
.privacyPolicy .privacyPolicyNewsPost {
  position: relative; }
.privacyPolicy .privacyPolicyNews .lastNewButtonLinkBlock {
  position: absolute;
  right: 36px;
  bottom: 40px; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .privacyPolicyNews .lastNewButtonLinkBlock {
      display: none; } }
.privacyPolicy .privacyPolicyNewsIntroduction {
  margin-top: 50px;
  overflow: hidden !important; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .privacyPolicyNewsIntroduction {
      margin-top: 30px; } }
.privacyPolicy .privacyPolicyNewsIntroductionTitle {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 45px;
  font-size: 2.8125rem;
  line-height: 73px;
  position: relative; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .privacyPolicyNewsIntroductionTitle {
      line-height: 30px;
      font-size: 25px;
      font-size: 1.5625rem; } }
  .privacyPolicy .privacyPolicyNewsIntroductionTitle::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    bottom: 25px;
    left: 239px; }
    @media screen and (max-width: 888px) {
      .privacyPolicy .privacyPolicyNewsIntroductionTitle::after {
        display: none; } }
  .privacyPolicy .privacyPolicyNewsIntroductionTitle::before {
    content: "";
    background-color: #e8e8e8;
    width: 100vw;
    height: 1px;
    position: absolute;
    background-color: #e8e8e8;
    bottom: 30px;
    left: 250px; }
    @media screen and (max-width: 888px) {
      .privacyPolicy .privacyPolicyNewsIntroductionTitle::before {
        display: none; } }
.privacyPolicy .privacyPolicyNewsPhrase {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 30px;
  margin-bottom: 50px; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .privacyPolicyNewsPhrase {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (max-width: 888px) {
    .privacyPolicy .privacyPolicyNewsPhrase {
      margin-bottom: 30px; } }
.privacyPolicy .posts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 0; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .posts {
      grid-template-columns: 1fr; } }
.privacyPolicy .privacyPolicyNewsPost a {
  text-decoration: none; }
.privacyPolicy .privacyPolicyNewsPost {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  height: auto;
  width: auto;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  display: none; }
  .privacyPolicy .privacyPolicyNewsPost:nth-child(1), .privacyPolicy .privacyPolicyNewsPost:nth-child(2), .privacyPolicy .privacyPolicyNewsPost:nth-child(3), .privacyPolicy .privacyPolicyNewsPost:nth-child(4) {
    display: block; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .privacyPolicyNewsPost {
      margin-bottom: 20px; } }
  .privacyPolicy .privacyPolicyNewsPost:hover .lastNewTitle,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover .lastNewTitle,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover .lastNewTitle {
    transition: 0.5s;
    color: #e60101; }
  .privacyPolicy .privacyPolicyNewsPost:hover a svg path,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover a svg path,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover a svg path {
    transition: 0.5s;
    stroke: #e60101; }
  .privacyPolicy .privacyPolicyNewsPost:hover::before,
  .privacyPolicy .privacyPolicyNewsPost:hover .lastNewPost::before,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover::before,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover .lastNewPost::before,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover::before,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover .lastNewPost::before {
    animation: fade 500ms ease;
    animation-fill-mode: forwards; }
  .privacyPolicy .privacyPolicyNewsPost:hover::after,
  .privacyPolicy .privacyPolicyNewsPost:hover .lastNewPost::after,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover::after,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover .lastNewPost::after,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover::after,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover .lastNewPost::after {
    transition: 1s;
    border: 1px solid #e60101; }
  .privacyPolicy .privacyPolicyNewsPost:hover a div,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover a div,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover a div {
    overflow: hidden; }
  .privacyPolicy .privacyPolicyNewsPost:hover .lastNewImage,
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage:hover .lastNewImage,
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost:hover .lastNewImage {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform 0.5s ease;
    overflow: hidden; }
  .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsContent {
    padding: 50px 100px 50px 50px;
    display: flex;
    flex-direction: column;
    position: relative; }
    @media screen and (max-width: 888px) {
      .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsContent {
        padding: 10px 20px; } }
  .privacyPolicy .privacyPolicyNewsPost .lastNewImage {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px 20px 0 0; }
  .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsCategory {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #e60101;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase; }
  .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsTitle a {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 40px;
    text-decoration: none; }
    @media screen and (max-width: 888px) {
      .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsTitle a {
        line-height: 25px;
        font-size: 20px;
        font-size: 1.25rem; } }
  .privacyPolicy .privacyPolicyNewsPost .lastNewPost p {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 30px; }
    @media screen and (max-width: 888px) {
      .privacyPolicy .privacyPolicyNewsPost .lastNewPost p {
        line-height: 20px;
        font-size: 15px;
        font-size: 0.9375rem; } }
  .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsLink {
    align-self: flex-end;
    margin-right: 0;
    margin-top: 15px; }
    @media screen and (max-width: 888px) {
      .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsLink {
        margin-bottom: 15px; } }
  .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsIcon {
    cursor: pointer;
    transform: rotate(270deg);
    position: relative;
    bottom: -10px; }
    .privacyPolicy .privacyPolicyNewsPost .privacyPolicyNewsIcon path {
      stroke: #b30001; }
.privacyPolicy .seeMoreNews {
  text-align: center;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .seeMoreNews {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
.privacyPolicy .moreNewsButtonBox {
  display: flex;
  align-items: center;
  justify-content: center; }
.privacyPolicy .moreNewsButtonprivacyPolicy {
  cursor: pointer;
  border: 1px solid #e60101;
  border-radius: 10px;
  width: 250px;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px; }
  @media screen and (max-width: 888px) {
    .privacyPolicy .moreNewsButtonprivacyPolicy {
      line-height: 20px;
      font-size: 15px;
      font-size: 0.9375rem; } }
  @media screen and (max-width: 888px) {
    .privacyPolicy .moreNewsButtonprivacyPolicy {
      margin-bottom: 30px; } }
  .privacyPolicy .moreNewsButtonprivacyPolicy .moreNewsButtonIcon path {
    stroke: #e60101; }
  .privacyPolicy .moreNewsButtonprivacyPolicy:hover {
    transition: 0.5s;
    background-image: linear-gradient(4deg, #b30001 0%, #ff0001 84%);
    color: #ffffff; }
    .privacyPolicy .moreNewsButtonprivacyPolicy:hover .moreNewsButtonIcon path {
      transition: 0.5s;
      stroke: #ffffff; }

:root {
  /* Colors: */
  --unnamed-color-040606: #040606;
  --unnamed-color-fe2f28: #FE2F28;
  --unnamed-color-fafafc: #FAFAFC;
  --unnamed-color-313131: #313131;
  --unnamed-color-ae0f0a: #AE0F0A;
  --unnamed-color-ffffff: #FFFFFF;
  /* Font/text values */
  --unnamed-font-family-lato: Lato;
  --unnamed-font-style-normal: normal;
  --unnamed-font-weight-900: 900px;
  --unnamed-font-weight-normal: normal;
  --unnamed-font-size-18: 18px;
  --unnamed-font-size-28: 28px;
  --unnamed-font-size-63: 63px;
  --unnamed-character-spacing-0: 0px;
  --unnamed-line-spacing-34: 34px;
  --unnamed-line-spacing-38: 38px;
  --unnamed-line-spacing-75: 75px; }

/* Character Styles */
.unnamed-character-style-1 {
  font-family: var(--unnamed-font-family-lato);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-normal);
  font-size: var(--unnamed-font-size-18);
  line-height: var(--unnamed-line-spacing-38);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-313131); }

.unnamed-character-style-2 {
  font-family: var(--unnamed-font-family-lato);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-normal);
  font-size: var(--unnamed-font-size-28);
  line-height: var(--unnamed-line-spacing-34);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-ffffff); }

.unnamed-character-style-3 {
  font-family: var(--unnamed-font-family-lato);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-900);
  font-size: var(--unnamed-font-size-63);
  line-height: var(--unnamed-line-spacing-75);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-ae0f0a); }

.unnamed-character-style-4 {
  font-family: var(--unnamed-font-family-lato);
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-900);
  font-size: var(--unnamed-font-size-63);
  line-height: var(--unnamed-line-spacing-75);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-ffffff); }

div.segments.panificacao * {
  box-sizing: border-box !important;
  /* font-family: "Lato", sans-serif !important; */ }
div.segments.panificacao section {
  display: block;
  width: 100%;
  max-width: 100%; }
  div.segments.panificacao section#section1 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 542px;
    grid-template-columns: 639px 632px;
    grid-template-areas: "gaText gaCarousel";
    place-content: start center;
    place-items: center;
    gap: 100px;
    height: 1080px;
    padding-top: 140px;
    padding-bottom: 140px;
    background: url("/assets/landing-page-panificacao/banner.png") center top/contain no-repeat scroll padding-box border-box, linear-gradient(to right, #060809, #191f21), black;
    background-blend-mode: normal; }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
      div.segments.panificacao section#section1 {
        background: linear-gradient(to right, #060809, #191f21), black;
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-areas: "gaText" "gaCarousel";
        height: auto;
        padding: 40px 16px 0px; } }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      div.segments.panificacao section#section1 {
        background: linear-gradient(to right, #060809, #191f21), black;
        height: auto;
        padding: 60px 16px 0px; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      div.segments.panificacao section#section1 {
        background: linear-gradient(to right, #060809, #191f21), black;
        height: auto; } }
    div.segments.panificacao section#section1 > *.hero-text {
      display: flex;
      flex-flow: column nowrap;
      place-content: flex-start;
      place-items: flex-start;
      gap: 72px;
      gap: 4.5rem;
      grid-area: gaText;
      max-width: 639px;
      text-align: start; }
      @media only screen and (min-width: 320px) and (max-width: 479px) {
        div.segments.panificacao section#section1 > *.hero-text {
          text-align: center;
          margin-bottom: auto;
          max-width: 100%;
          gap: 2rem; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        div.segments.panificacao section#section1 > *.hero-text {
          text-align: center;
          margin-bottom: auto;
          max-width: 100%;
          gap: 2rem; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        div.segments.panificacao section#section1 > *.hero-text {
          text-align: center;
          margin-bottom: auto; } }
      div.segments.panificacao section#section1 > *.hero-text > h2 {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) 86px/87px var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        text-align: inherit;
        font: normal normal 900 86px/87px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF; }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          div.segments.panificacao section#section1 > *.hero-text > h2 {
            max-width: 100%;
            font-size: 44px;
            line-height: normal; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          div.segments.panificacao section#section1 > *.hero-text > h2 {
            max-width: 100%;
            font-size: 54px;
            line-height: normal; } }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          div.segments.panificacao section#section1 > *.hero-text > h2 {
            max-width: 100%;
            font-size: 54px;
            line-height: normal; } }
      div.segments.panificacao section#section1 > *.hero-text > h2 > strong {
        color: var(--unnamed-color-ae0f0a);
        color: #AE0F0A;
        font-weight: inherit; }
      div.segments.panificacao section#section1 > *.hero-text > p {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 38px/60px var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-ffffff);
        text-align: inherit;
        font: normal normal normal 38px/60px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF; }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          div.segments.panificacao section#section1 > *.hero-text > p {
            max-width: 100%;
            font-size: 20px;
            line-height: 2; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          div.segments.panificacao section#section1 > *.hero-text > p {
            max-width: 100%;
            font-size: 20px;
            line-height: 2; } }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          div.segments.panificacao section#section1 > *.hero-text > p {
            max-width: 100%; } }
      div.segments.panificacao section#section1 > *.hero-text > a {
        width: 398px;
        max-width: 100%;
        height: 77px;
        background: var(--unnamed-color-ae0f0a) 0% 0% no-repeat padding-box;
        background: #AE0F0A 0% 0% no-repeat padding-box;
        font: var(--unnamed-font-style-normal) normal bold 23px/28px var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-ffffff);
        text-align: inherit;
        font: normal normal bold 23px/28px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
        --slanted-edge: 10px;
        display: inline-flex;
        flex-flow: row nowrap;
        place-content: center;
        place-items: center;
        gap: normal;
        padding: 1em 2em;
        text-decoration: none; }
        div.segments.panificacao section#section1 > *.hero-text > a:hover {
          text-decoration: underline; }
    div.segments.panificacao section#section1 > *.hero-media {
      grid-area: gaCarousel;
      place-self: start end;
      height: fit-content;
      max-width: 100%; }
      div.segments.panificacao section#section1 > *.hero-media > *.swiper {
        max-width: inherit; }
        @media only screen and (min-width: 768px) {
          div.segments.panificacao section#section1 > *.hero-media > *.swiper {
            display: none; } }
        div.segments.panificacao section#section1 > *.hero-media > *.swiper *.swiper-slide > picture {
          display: block;
          width: 100%;
          max-width: 100%;
          height: auto;
          max-height: 100%; }
          div.segments.panificacao section#section1 > *.hero-media > *.swiper *.swiper-slide > picture > img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 100%;
            aspect-ratio: auto; }
      div.segments.panificacao section#section1 > *.hero-media > *.carousel {
        position: relative;
        z-index: 0;
        width: 525px;
        max-width: inherit;
        aspect-ratio: 1; }
        @media only screen and (max-width: 768px) {
          div.segments.panificacao section#section1 > *.hero-media > *.carousel {
            display: none; } }
        div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide {
          position: absolute;
          max-height: 413px;
          transition: all 0.3s ease 0s;
          transition-behavior: allow-discrete; }
          div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide[data-position="back"] {
            z-index: -2;
            top: -47px;
            right: 130px;
            bottom: auto;
            left: auto;
            width: 265px;
            height: 207px;
            filter: blur(5px); }
          div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide[data-position="left"], div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide[data-position="right"] {
            z-index: -1;
            width: 362px;
            height: 285px;
            filter: blur(3px); }
          div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide[data-position="right"] {
            top: -7px;
            right: -147px;
            bottom: auto;
            left: auto; }
          div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide[data-position="left"] {
            top: -7px;
            right: 359px;
            bottom: auto;
            left: auto; }
          div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide[data-position="front"] {
            z-index: 1;
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            margin: 110px 0 0 0;
            width: 100%;
            height: 100%;
            cursor: pointer; }
          div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide > picture {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            height: 100%;
            max-height: 100%; }
            div.segments.panificacao section#section1 > *.hero-media > *.carousel *.carousel-slide > picture > img {
              display: block;
              width: 100%;
              height: auto;
              max-height: 100%;
              aspect-ratio: auto;
              object-fit: contain;
              object-position: center; }
  div.segments.panificacao section#section2 {
    height: 900px;
    background-color: black; }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
      div.segments.panificacao section#section2 {
        height: auto; } }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      div.segments.panificacao section#section2 {
        height: auto; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      div.segments.panificacao section#section2 {
        height: auto; } }
    div.segments.panificacao section#section2 > video {
      display: block;
      margin: auto;
      width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: cover;
      object-position: center; }
  div.segments.panificacao section#section3 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, auto);
    grid-template-areas: "gaText gaCarousel";
    place-content: end;
    place-items: center end;
    margin: auto;
    max-width: 1920px;
    padding: 0 48px;
    background: #FAFAFC 0% 0% no-repeat padding-box; }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
      div.segments.panificacao section#section3 {
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-areas: "gaText" "gaCarousel"; } }
    @media only screen and (min-width: 1920px) {
      div.segments.panificacao section#section3 {
        place-content: center;
        max-width: 100%; } }
    div.segments.panificacao section#section3 > *.hero-text {
      display: flex;
      flex-flow: column nowrap;
      place-content: flex-start;
      place-items: flex-start;
      gap: 45px;
      gap: 2.8125rem;
      grid-area: gaText;
      max-width: 485px;
      padding-top: 107px;
      padding-bottom: 100px;
      text-align: start; }
      @media only screen and (min-width: 320px) and (max-width: 479px) {
        div.segments.panificacao section#section3 > *.hero-text {
          text-align: center;
          max-width: 100%;
          padding: 24px 0;
          gap: 1.2rem; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        div.segments.panificacao section#section3 > *.hero-text {
          text-align: center; } }
      div.segments.panificacao section#section3 > *.hero-text > h2 {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) var(--unnamed-font-size-63)/var(--unnamed-line-spacing-75) var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-313131);
        text-align: inherit;
        font: normal normal 900 63px/75px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #313131; }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          div.segments.panificacao section#section3 > *.hero-text > h2 {
            font-size: 38px;
            line-height: normal; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          div.segments.panificacao section#section3 > *.hero-text > h2 {
            font-size: 42px;
            line-height: normal; } }
      div.segments.panificacao section#section3 > *.hero-text > p {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-38) var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-313131);
        text-align: inherit;
        font: normal normal normal 18px/38px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #313131; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section3 > *.hero-text > p {
            line-height: 1.4; } }
      div.segments.panificacao section#section3 > *.hero-text > a {
        background: var(--unnamed-color-ae0f0a) 0% 0% no-repeat padding-box;
        background: #AE0F0A 0% 0% no-repeat padding-box;
        font: var(--unnamed-font-style-normal) normal bold 17px/21px var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-ffffff);
        text-align: inherit;
        font: normal normal bold 17px/21px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
        --slanted-edge: 10px;
        display: inline-flex;
        flex-flow: row nowrap;
        place-content: center;
        place-items: center;
        gap: normal;
        padding: 1em 2em;
        text-decoration: none; }
        div.segments.panificacao section#section3 > *.hero-text > a:hover {
          text-decoration: underline; }
    div.segments.panificacao section#section3 > *.hero-media {
      grid-area: gaCarousel;
      place-self: end; }
      div.segments.panificacao section#section3 > *.hero-media > picture {
        display: block; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section3 > *.hero-media > picture {
            max-width: 100%;
            width: 100%;
            height: auto; } }
        div.segments.panificacao section#section3 > *.hero-media > picture > img {
          display: block;
          object-fit: contain;
          object-position: bottom; }
          @media only screen and (min-width: 320px) and (max-width: 767px) {
            div.segments.panificacao section#section3 > *.hero-media > picture > img {
              max-width: 100%;
              height: auto;
              aspect-ratio: auto; } }
  div.segments.panificacao section#section4 {
    background: #040606;
    padding: 112px 0 48px; }
    @media only screen and (min-width: 320px) and (max-width: 767px) {
      div.segments.panificacao section#section4 {
        padding: 0 16px 32px; } }
    div.segments.panificacao section#section4 > div.layout-hero {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: repeat(2, auto);
      grid-template-areas: "gaText gaCarousel";
      place-content: center;
      gap: 80px; }
      @media only screen and (min-width: 320px) and (max-width: 479px) {
        div.segments.panificacao section#section4 > div.layout-hero {
          grid-template-rows: auto auto;
          grid-template-columns: 100%;
          grid-template-areas: "gaText" "gaCarousel";
          gap: 40px; } }
      div.segments.panificacao section#section4 > div.layout-hero > *.hero-text {
        grid-area: gaText;
        max-width: 536px;
        margin-bottom: 174px;
        text-align: end; }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          div.segments.panificacao section#section4 > div.layout-hero > *.hero-text {
            text-align: center;
            margin-bottom: auto; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          div.segments.panificacao section#section4 > div.layout-hero > *.hero-text {
            text-align: center;
            margin-bottom: auto; } }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          div.segments.panificacao section#section4 > div.layout-hero > *.hero-text {
            text-align: center;
            margin-bottom: auto; } }
        div.segments.panificacao section#section4 > div.layout-hero > *.hero-text > h2 {
          font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) var(--unnamed-font-size-63)/var(--unnamed-line-spacing-75) var(--unnamed-font-family-lato);
          letter-spacing: var(--unnamed-character-spacing-0);
          color: var(--unnamed-color-fafafc);
          text-align: inherit;
          font: normal normal 900 63px/75px "Sarabun", sans-serif;
          letter-spacing: 0px;
          color: #FAFAFC;
          margin-top: 92px;
          margin-bottom: 1.25rem; }
          @media only screen and (min-width: 320px) and (max-width: 767px) {
            div.segments.panificacao section#section4 > div.layout-hero > *.hero-text > h2 {
              margin: 0.5em auto; } }
        div.segments.panificacao section#section4 > div.layout-hero > *.hero-text > p {
          font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-38) var(--unnamed-font-family-lato);
          letter-spacing: var(--unnamed-character-spacing-0);
          color: var(--unnamed-color-fafafc);
          text-align: inherit;
          font: normal normal normal 18px/38px "Sarabun", sans-serif;
          letter-spacing: 0px;
          color: #FAFAFC; }
      div.segments.panificacao section#section4 > div.layout-hero > *.hero-media {
        grid-area: gaCarousel; }
        div.segments.panificacao section#section4 > div.layout-hero > *.hero-media > picture {
          display: block;
          margin: auto;
          width: 80%;
          max-width: 100%; }
          div.segments.panificacao section#section4 > div.layout-hero > *.hero-media > picture > img {
            display: block;
            max-width: 100%;
            height: auto;
            aspect-ratio: auto;
            object-fit: contain;
            object-position: center; }
    div.segments.panificacao section#section4 > div.swiper {
      max-width: 1328px; }
      @media only screen and (min-width: 320px) and (max-width: 767px) {
        div.segments.panificacao section#section4 > div.swiper {
          margin-top: 32px; } }
      div.segments.panificacao section#section4 > div.swiper *.swiper-slide {
        width: 398px;
        max-width: 398px;
        height: 362px;
        clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
        --slanted-edge: 50px;
        background: #2B2B2B; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section4 > div.swiper *.swiper-slide {
            --output-this-rule: 1001px;
            height: auto; } }
        div.segments.panificacao section#section4 > div.swiper *.swiper-slide > *.clip-path-border-maker {
          position: relative;
          top: 3px;
          /* equal to border thickness */
          left: 3px;
          /* equal to border thickness */
          width: calc(100% - 6px);
          /* container height - (border thickness * 2) */
          max-width: 100%;
          height: calc(100% - 6px);
          /* container height - (border thickness * 2) */
          background: #000000 0% 0% no-repeat padding-box;
          display: flex;
          flex-flow: column nowrap;
          /* place-content: baseline; */
          place-items: baseline;
          gap: normal;
          justify-content: space-evenly;
          padding: 18px 18px 19px 35px;
          clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
          --slanted-edge: 50px; }
          div.segments.panificacao section#section4 > div.swiper *.swiper-slide > *.clip-path-border-maker > h3 {
            font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) 32px/var(--unnamed-line-spacing-38) var(--unnamed-font-family-lato);
            letter-spacing: var(--unnamed-character-spacing-0);
            color: var(--unnamed-color-ffffff);
            text-align: left;
            font: normal normal 900 32px/38px "Sarabun", sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF; }
          div.segments.panificacao section#section4 > div.swiper *.swiper-slide > *.clip-path-border-maker > p {
            font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-18)/30px var(--unnamed-font-family-lato);
            letter-spacing: var(--unnamed-character-spacing-0);
            color: var(--unnamed-color-ffffff);
            text-align: left;
            font: normal normal normal 18px/30px "Sarabun", sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            opacity: 1; }
      div.segments.panificacao section#section4 > div.swiper > *.swiper-pagination {
        position: static;
        margin: 74px auto 0; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section4 > div.swiper > *.swiper-pagination {
            margin: 32px auto; } }
        div.segments.panificacao section#section4 > div.swiper > *.swiper-pagination > *.swiper-pagination-bullet {
          --swiper-pagination-bullet-border-radius: 50%;
          --swiper-pagination-bullet-inactive-opacity: 1;
          --swiper-pagination-bullet-inactive-color: #FFFFFF;
          --swiper-pagination-bullet-opacity: 1;
          --swiper-pagination-color: #AE0F0A;
          --swiper-pagination-bullet-horizontal-gap: 11px;
          width: 17px;
          height: 17px; }
  div.segments.panificacao section#section5 {
    background: #040606aa url("/assets/landing-page-panificacao/inova-institucional2-poster-image.png") 0% 0% no-repeat padding-box;
    background-size: cover;
    background-blend-mode: multiply;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, auto);
    grid-template-areas: "gaCarousel gaText";
    place-content: center;
    place-items: center;
    height: 600px;
    padding-top: 41px;
    padding-bottom: 69px; }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
      div.segments.panificacao section#section5 {
        background: linear-gradient(to right, #060809, #191f21), black;
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-areas: "gaCarousel" "gaText";
        height: auto; } }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      div.segments.panificacao section#section5 {
        background: linear-gradient(to right, #060809, #191f21), black; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      div.segments.panificacao section#section5 {
        background: linear-gradient(to right, #060809, #191f21), black; } }
    div.segments.panificacao section#section5 > *.hero-text {
      display: flex;
      flex-flow: column nowrap;
      place-content: flex-start;
      place-items: flex-start;
      gap: 45px;
      gap: 2.375rem;
      grid-area: gaText;
      max-width: 580px;
      text-align: start; }
      @media only screen and (min-width: 320px) and (max-width: 767px) {
        div.segments.panificacao section#section5 > *.hero-text {
          max-width: 100%;
          width: 100%;
          text-align: center; } }
      div.segments.panificacao section#section5 > *.hero-text > h2 {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) 50px/60px var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-fafafc);
        text-align: inherit;
        font: normal normal 900 50px/60px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FAFAFC; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section5 > *.hero-text > h2 {
            font-size: 36px;
            line-height: normal; } }
      div.segments.panificacao section#section5 > *.hero-text > p {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-38) var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-fafafc);
        text-align: inherit;
        font: normal normal normal 18px/38px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FAFAFC; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section5 > *.hero-text > p {
            line-height: 1.4; } }
      div.segments.panificacao section#section5 > *.hero-text > a {
        background: var(--unnamed-color-ae0f0a) 0% 0% no-repeat padding-box;
        background: #AE0F0A 0% 0% no-repeat padding-box;
        font: var(--unnamed-font-style-normal) normal bold 17px/21px var(--unnamed-font-family-lato);
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-ffffff);
        text-align: inherit;
        font: normal normal bold 17px/21px "Sarabun", sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
        --slanted-edge: 10px;
        display: inline-flex;
        flex-flow: row nowrap;
        place-content: center;
        place-items: center;
        gap: normal;
        padding: 0.875em 1.4375em;
        text-decoration: none; }
        @media only screen and (min-width: 320px) and (max-width: 767px) {
          div.segments.panificacao section#section5 > *.hero-text > a {
            margin: 20px auto 0; } }
        div.segments.panificacao section#section5 > *.hero-text > a:hover {
          text-decoration: underline; }
    div.segments.panificacao section#section5 > *.hero-media {
      grid-area: gaCarousel;
      max-width: 100%; }
      div.segments.panificacao section#section5 > *.hero-media > *.swiper {
        width: 100%;
        max-width: 490px;
        height: 100%;
        max-height: 490px; }
        div.segments.panificacao section#section5 > *.hero-media > *.swiper *.swiper-slide > picture {
          display: block;
          margin: auto;
          width: 80%; }
          div.segments.panificacao section#section5 > *.hero-media > *.swiper *.swiper-slide > picture > img {
            max-width: 100%;
            height: auto; }
  div.segments.panificacao section#section6 {
    background: #F6F6F6 0% 0% no-repeat padding-box;
    padding: 40px 0 100px; }
    div.segments.panificacao section#section6 > * {
      max-width: 812px; }
    div.segments.panificacao section#section6 > h2 {
      display: block;
      font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) 50px/60px var(--unnamed-font-family-lato);
      letter-spacing: var(--unnamed-character-spacing-0);
      color: var(--unnamed-color-313131);
      text-align: center;
      font: normal normal 900 50px/60px "Sarabun", sans-serif;
      letter-spacing: 0px;
      color: #313131;
      margin: 40px auto; }
      @media only screen and (min-width: 320px) and (max-width: 767px) {
        div.segments.panificacao section#section6 > h2 {
          margin-top: 0; } }
    div.segments.panificacao section#section6 > p {
      display: block;
      font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-38) var(--unnamed-font-family-lato);
      letter-spacing: var(--unnamed-character-spacing-0);
      color: var(--unnamed-color-313131);
      text-align: center;
      font: normal normal normal 18px/38px "Sarabun", sans-serif;
      letter-spacing: 0px;
      color: #313131;
      margin: 47px auto; }
    div.segments.panificacao section#section6 > *.swiper {
      --swiper-navigation-color: #E10613;
      max-width: 1226px; }
      div.segments.panificacao section#section6 > *.swiper *.swiper-button-prev, div.segments.panificacao section#section6 > *.swiper *.swiper-button-next {
        width: 10px;
        height: 19px; }
div.segments.panificacao *.card.product {
  display: flex;
  flex-flow: column nowrap;
  place-content: flex-start;
  place-items: flex-start;
  gap: normal;
  padding: 18px 14px;
  background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
  --slanted-edge: 10px; }
  div.segments.panificacao *.card.product > picture {
    display: block;
    width: 100%;
    max-width: 370px;
    max-width: 100%;
    height: 315px;
    max-height: 315px; }
    div.segments.panificacao *.card.product > picture > img {
      display: block;
      margin: auto;
      overflow: hidden;
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      aspect-ratio: auto;
      object-fit: contain;
      object-position: center; }
  div.segments.panificacao *.card.product > *:not(picture) {
    margin-left: 40px; }
  div.segments.panificacao *.card.product > h3 {
    display: flex;
    gap: 6px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-900) 29px/35px var(--unnamed-font-family-lato);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-313131);
    text-align: left;
    font: normal normal 900 29px/35px "Sarabun", sans-serif;
    letter-spacing: 0px;
    color: #313131; }
    div.segments.panificacao *.card.product > h3::after {
      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="230" height="16.412" viewBox="0 0 230 16.412"><path id="Path_45" data-name="Path 45" d="M0 15.412h81.884L96.269 1.027 229.999 1" fill="none" stroke="%23e10613" stroke-width="2"/></svg>');
      flex-shrink: 1;
      flex-basis: 0;
      display: inline-block;
      width: 0px; }
  div.segments.panificacao *.card.product > h4 {
    display: none; }
  div.segments.panificacao *.card.product > div.read-more-less {
    margin-top: 1.642857142857143em;
    max-height: 60px;
    overflow: hidden;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 14px/17px var(--unnamed-font-family-lato); }
    div.segments.panificacao *.card.product > div.read-more-less > p {
      margin: 23px 21px 20px 26px;
      margin: 0 21px 1em 26px;
      letter-spacing: var(--unnamed-character-spacing-0);
      color: var(--unnamed-color-313131);
      text-align: left;
      letter-spacing: 0px;
      color: #313131; }
      div.segments.panificacao *.card.product > div.read-more-less > p:empty {
        display: none; }
  div.segments.panificacao *.card.product > a[data-readmore-toggle] {
    margin-top: 20px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 14px/17px var(--unnamed-font-family-lato); }
  div.segments.panificacao *.card.product > a.cta {
    margin-top: 20px;
    padding: 0.875rem 2.125rem;
    background: var(--unnamed-color-ae0f0a) 0% 0% no-repeat padding-box;
    background: #AE0F0A 0% 0% no-repeat padding-box;
    font: var(--unnamed-font-style-normal) normal bold 17px/21px var(--unnamed-font-family-lato);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    text-align: left;
    font: normal normal bold 17px/21px "Sarabun", sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    clip-path: polygon(0 0, calc(100% - var(--slanted-edge, 20px)) 0, 100% var(--slanted-edge, 20px), 100% 100%, var(--slanted-edge, 20px) 100%, 0 calc(100% - var(--slanted-edge, 20px)));
    --slanted-edge: 10px;
    text-decoration: none; }
    div.segments.panificacao *.card.product > a.cta:hover {
      text-decoration: underline; }