/*************************BASIC******************************/
html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, p {
  margin: 0;
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  color: #000000;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 1920px) {
  body {
    font-size: 0.73vw;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 3.73vw;
    padding-bottom: 19.73vw;
  }
}

* {
  box-sizing: border-box;
}

button {
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}
button:focus, button:active {
  outline: none;
}

img {
  width: 100%;
  vertical-align: middle;
}

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

input, textarea, select {
  font-family: "Open Sans", sans-serif;
  font-size: inherit;
  color: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #000000;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  transition: none;
}

@media (max-width: 768px) {
  .desktop {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile {
    display: none;
  }
}

.fontFamily2 {
  font-family: "Rubik", sans-serif;
}

.textT1 {
  font-size: 342.85%;
  line-height: 1.23;
  font-weight: 400;
}
@media (max-width: 768px) {
  .textT1 {
    font-size: 142.36%;
  }
}

.textT2 {
  font-size: 342.85%;
  line-height: 0.85;
  font-weight: 400;
}
@media (max-width: 768px) {
  .textT2 {
    font-size: 228.57%;
    line-height: 1.3;
  }
}

.textT3 {
  font-size: 257.14%;
  font-weight: 400;
  line-height: 1.25;
}
@media (max-width: 768px) {
  .textT3 {
    font-size: 171.43%;
    line-height: 1.33;
  }
}

.textT4 {
  font-size: 228.57%;
  font-weight: 400;
  line-height: 1.25;
}
@media (max-width: 768px) {
  .textT4 {
    font-size: 171.43%;
  }
}

.textT5 {
  font-size: 128.57%;
  font-weight: 400;
  line-height: 1.44;
}
@media (max-width: 768px) {
  .textT5 {
    font-size: 114.28%;
  }
}

.textT6 {
  font-size: 85.71%;
  font-weight: 400;
  line-height: 1.25;
}

.textT7 {
  font-size: 714.28%;
  line-height: 1.1;
  font-weight: 400;
}
@media (max-width: 768px) {
  .textT7 {
    font-size: 342.86%;
  }
}

.normalText {
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.normalType {
  font-weight: 400;
}

.mediumType {
  font-weight: 500;
}

.semiBoldType {
  font-weight: 600;
}

.boldType {
  font-weight: 700;
}

.extraBoldType {
  font-weight: 800;
}

.redColor {
  color: #DB3733;
}

.grayColor {
  color: #999999;
}

.blackColor {
  color: #000000;
}

.whiteColor {
  color: #ffffff;
}

.blueColor {
  color: #58C8DF;
}

.underline {
  text-decoration: underline;
}

.centerText {
  text-align: center;
}

.main_container {
  position: relative;
  overflow-x: hidden;
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
  background: #58C8DF;
}

.main_section {
  width: 74.16%;
  margin-left: auto;
}
@media (max-width: 768px) {
  .main_section {
    width: 100%;
  }
}

.video_section {
  position: relative;
  height: 100vh;
  min-height: 900px;
  height: calc(var(--vh, 1vh) * 100);
}
@media (max-width: 1920px) {
  .video_section {
    min-height: 46.88vw;
  }
}
@media (max-width: 768px) {
  .video_section {
    height: calc(var(--vh, 1vh) * 100 - 19.73vw);
    min-height: 146.67vw;
  }
}

.video_container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.video_container video {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.video_cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.video_section_logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9.33vw;
  width: 63.46%;
}

.video_section_text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  top: 50%;
}
@media (max-width: 768px) {
  .video_section_text {
    top: 34.67vw;
    transform: translateX(-50%);
  }
}

.video_text {
  margin-top: 32px;
  display: inline-block;
}
@media (max-width: 1920px) {
  .video_text {
    margin-top: 1.67vw;
  }
}
@media (max-width: 768px) {
  .video_text {
    margin-top: 6.4vw;
  }
}

.btn_next_container {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1920px) {
  .btn_next_container {
    bottom: 2.34vw;
  }
}
@media (max-width: 768px) {
  .btn_next_container {
    bottom: 9.33vw;
  }
}

.btn_next {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn_next img {
  width: 22px;
  display: inline-block;
  margin-top: 12px;
}
@media (max-width: 1920px) {
  .btn_next img {
    width: 1.15vw;
    margin-top: 0.63vw;
  }
}
@media (max-width: 768px) {
  .btn_next img {
    width: 5.33vw;
    margin-top: 3.2vw;
  }
}

.cubes_section {
  padding: 90px 80px 42px;
  background: #ffffff;
}
@media (max-width: 1920px) {
  .cubes_section {
    padding: 4.69vw 4.17vw 2.19vw;
  }
}
@media (max-width: 768px) {
  .cubes_section {
    padding: 16.53vw 4vw 12.27vw;
  }
}

.cubeT1_container {
  display: flex;
  flex-wrap: wrap;
}

.cubeT1 {
  width: 44.7%;
  margin-left: 3%;
  margin-bottom: 92px;
}
@media (max-width: 1920px) {
  .cubeT1 {
    margin-bottom: 4.79vw;
  }
}
@media (max-width: 768px) {
  .cubeT1 {
    width: 100%;
    margin-left: 0;
    margin-bottom: 8vw;
  }
}

.cubeT1_image {
  border-radius: 30px;
  overflow: hidden;
}
@media (max-width: 1920px) {
  .cubeT1_image {
    border-radius: 1.56vw;
  }
}
@media (max-width: 768px) {
  .cubeT1_image {
    border-radius: 8vw;
  }
}

.cubeT1_text {
  margin-top: 25px;
}
@media (max-width: 1920px) {
  .cubeT1_text {
    margin-top: 1.3vw;
  }
}
@media (max-width: 768px) {
  .cubeT1_text {
    margin-top: 4.27vw;
  }
}

.image_section {
  position: relative;
}

.image_section_text {
  position: absolute;
  top: 97px;
  right: 80px;
  z-index: 2;
}
@media (max-width: 1920px) {
  .image_section_text {
    top: 5.05vw;
    right: 4.17vw;
  }
}
@media (max-width: 768px) {
  .image_section_text {
    top: 14.93vw;
    right: 6.67vw;
  }
}

.btn_form_container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #58C8DF;
  z-index: 10;
}

.btn_open_form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5.87vw 5.87vw;
}
.btn_open_form img {
  width: 4.8vw;
}

.form_section {
  background: #58C8DF;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25.84%;
  padding: 34px 0;
  z-index: 11;
  min-height: 900px;
  overflow-y: auto;
}
@media (max-width: 1920px) {
  .form_section {
    padding: 1.77vw 0;
    min-height: 46.88vw;
  }
}
@media (max-width: 768px) {
  .form_section {
    transition: all 0.4s ease-in-out;
    width: 100%;
    top: 100%;
    opacity: 0;
    padding: 8.53vw 5.33vw;
  }
}
.form_section.active {
  top: 0;
  opacity: 1;
}

.main_logo {
  width: 66%;
  margin: 0 auto;
}

.btnT1 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  font-size: 128.57%;
  font-weight: 700;
  padding: 10px 15px;
  position: relative;
  z-index: 1;
  border-radius: 22px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 4px solid #58C8DF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1920px) {
  .btnT1 {
    padding: 0.52vw 0.78vw;
    border-radius: 1.15vw;
  }
}
@media (max-width: 768px) {
  .btnT1 {
    padding: 2.4vw 4vw;
    border-radius: 5.87vw;
  }
}
.btnT1:hover {
  background: #484848;
}
.btnT1:active {
  background: #484848;
  transform: scale(0.956);
}
/*.btnT1.color2 {
  background: #58C8DF;
  color: #000000;
}
.btnT1.color2:hover {
  background: #000000;
  color: #ffffff;
}
.btnT1.color2:active {
  background: #000000;
  color: #ffffff;
  transform: scale(0.956);
}*/

.footer_text {
  max-width: 1647px;
  text-align: center;
  padding: 150px 0 65px;
  margin: 0 auto;
}
@media (max-width: 1920px) {
  .footer_text {
    max-width: 85.78vw;
    text-align: center;
    padding: 7.81vw 0 3.39vw;
  }
}
@media (max-width: 768px) {
  .footer_text {
    max-width: 84%;
    text-align: center;
    padding: 37.33vw 0 17.33vw;
  }
}

.header_section {
  position: relative;
}

.header_link {
  position: absolute;
  z-index: 15;
  right: 302px;
  top: 117px;
  opacity: 0;
}
@media (max-width: 1920px) {
  .header_link {
    right: 15.73vw;
    top: 6.09vw;
  }
}
@media (max-width: 768px) {
  .header_link {
    right: 24.53vw;
    top: 25.07vw;
    padding: 3.2vw;
  }
}

.bottom_image {
  margin: 8.8vw auto 0;
  width: 53%;
}
@media (min-width: 769px) {
  .bottom_image {
    display: none;
  }
}

.swiperT1 {
  width: 100%;
}

.swiperT1_nav_container {
  position: absolute;
  bottom: 18.4vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 87.74%;
  z-index: 2;
}

.swiper-pagination {
  position: relative;
  bottom: auto;
  top: auto;
}

.swiper-button-prev, .swiper-button-next {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  margin-top: 0;
  width: 11.2vw;
  height: 11.2vw;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("https://image.maytronics-online.com/lib/fe3911717064057d761477/m/1/2bef6c92-49e4-4044-9111-78811243c402.png");
}
.swiper-button-prev::after, .swiper-button-next::after {
  display: none;
}

.swiper-button-next {
  background-image: url("https://image.maytronics-online.com/lib/fe3911717064057d761477/m/1/dfba1d25-da18-4502-80c4-85dc5a518e19.png");
}

.swiper-button-prev {
  background-image: url("https://image.maytronics-online.com/lib/fe3911717064057d761477/m/1/2bef6c92-49e4-4044-9111-78811243c402.png");
}

.form_container {
  position: relative;
}
@media (min-width: 769px) {
  .form_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72.58%;
  }
}
.form_container.send .msg_send {
  display: block;
}

.form_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form_title img {
  width: 5.33vw;
}

.form_row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form_input {
  position: relative;
  width: 100%;
  margin: 0 auto 16px;
}
@media (max-width: 1920px) {
  .form_input {
    margin-bottom: 0.83vw;
  }
}
@media (max-width: 768px) {
  .form_input {
    margin-bottom: 4.27vw;
  }
}
.form_input textarea {
  resize: none;
  min-height: 100px;
}
@media (max-width: 1920px) {
  .form_input textarea {
    min-height: 5.21vw;
  }
}
@media (max-width: 768px) {
  .form_input textarea {
    min-height: 55.47vw;
  }
}
.form_input input, .form_input select, .form_input textarea {
  background: #ffffff;
  width: 100%;
  border: none;
  padding: 13px 20px;
  border-radius: 8px;
  color: #000000;
}
@media (max-width: 1920px) {
  .form_input input, .form_input select, .form_input textarea {
    padding: 0.68vw 1.04vw;
    border-radius: 0.42vw;
  }
}
@media (max-width: 768px) {
  .form_input input, .form_input select, .form_input textarea {
    padding: 3.47vw 5.33vw;
    border-radius: 2.13vw;
  }
}
.form_input input::-webkit-input-placeholder, .form_input textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #000000;
}
.form_input input::-moz-placeholder, .form_input textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: #000000;
}
.form_input input:-ms-input-placeholder, .form_input textarea:-ms-input-placeholder {
  /* IE 10+ */
  color: #000000;
}
.form_input input:-moz-placeholder, .form_input textarea:-moz-placeholder {
  /* Firefox 18- */
  color: #000000;
}
.form_input select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}
.form_input select::-ms-expand {
  display: none;
}
.form_input.error .error_msg {
  display: block;
}
.form_input.type2 {
  width: 100%;
}

.form_input_type2 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.form_input_type2 input {
  width: 67%;
}
.form_input_type2 .form_input_wrap {
  width: 29.4%;
}

.form_input_wrap {
  position: relative;
}
.form_input_wrap .icon {
  position: absolute;
  left: 15px;
  width: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 1920px) {
  .form_input_wrap .icon {
    left: 0.78vw;
    width: 0.78vw;
  }
}
@media (max-width: 768px) {
  .form_input_wrap .icon {
    left: 4vw;
    width: 4.8vw;
  }
}

.error_msg {
  color: #DB3733;
  font-size: 85%;
  display: none;
  text-align: right;
}
.error_msg.error {
  display: block;
}

.form_btn {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1920px) {
  .form_btn {
    margin-top: 0.26vw;
  }
}
@media (max-width: 768px) {
  .form_btn {
    margin-top: 10.67vw;
  }
}

.checkbox_section {
  margin-top: 32px;
}
@media (max-width: 1920px) {
  .checkbox_section {
    margin-top: 1.67vw;
  }
}
@media (max-width: 768px) {
  .checkbox_section {
    margin-top: 8.53vw;
    margin-bottom: 6.4vw;
  }
}

.form_checkbox {
  position: relative;
  margin-bottom: 21px;
}
@media (max-width: 1920px) {
  .form_checkbox {
    margin-bottom: 1.09vw;
  }
}
@media (max-width: 768px) {
  .form_checkbox {
    margin-bottom: 4.53vw;
  }
}
.form_checkbox .error_msg {
  position: absolute;
  top: 100%;
  right: 0;
}

.checkbox_wrap {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  position: relative;
  padding-right: 31px;
  cursor: pointer;
  user-select: none;
  min-height: 18px;
}
@media (max-width: 1920px) {
  .checkbox_wrap {
    padding-right: 1.61vw;
    min-height: 0.94vw;
  }
}
@media (max-width: 768px) {
  .checkbox_wrap {
    padding-right: 8.53vw;
    min-height: 4.8vw;
  }
}
.checkbox_wrap input {
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  margin: 0;
  right: 0;
  top: 0;
  width: 40px;
}
@media (max-width: 1920px) {
  .checkbox_wrap input {
    width: 2.08vw;
  }
}
@media (max-width: 768px) {
  .checkbox_wrap input {
    width: 10.67vw;
  }
}
.checkbox_wrap input:checked ~ .checkmark::after {
  display: block;
}
.checkbox_wrap .checkmark {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #000000;
  background: #58C8DF;
  pointer-events: none;
  border-radius: 4px;
}
@media (max-width: 1920px) {
  .checkbox_wrap .checkmark {
    width: 0.94vw;
    height: 0.94vw;
    border-radius: 0.21vw;
  }
}
@media (max-width: 768px) {
  .checkbox_wrap .checkmark {
    transform: none;
    width: 4.8vw;
    height: 4.8vw;
    border-radius: 1.07vw;
  }
}
.checkbox_wrap .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  width: 3px;
  height: 7px;
  top: 2px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (max-width: 1920px) {
  .checkbox_wrap .checkmark::after {
    left: 0.26vw;
    width: 0.16vw;
    height: 0.36vw;
    top: 0.1vw;
    border-width: 0 0.16vw 0.16vw 0;
  }
}
@media (max-width: 768px) {
  .checkbox_wrap .checkmark::after {
    left: 1.33vw;
    width: 0.8vw;
    height: 1.87vw;
    top: 0.53vw;
    border-width: 0 0.8vw 0.8vw 0;
  }
}
.checkbox_wrap.error .error_msg {
  display: flex;
}

.msg_send {
  z-index: 9;
  background: #58C8DF;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 101%;
  height: 101%;
  transform: translate(-50%, -50%);
  display: none;
}
.msg_send.send {
  display: block;
}

.margB1 {
  margin-bottom: 67px;
}
@media (max-width: 1920px) {
  .margB1 {
    margin-bottom: 3.49vw;
  }
}
@media (max-width: 768px) {
  .margB1 {
    margin-bottom: 8.53vw;
  }
}

.margB2 {
  margin-bottom: 8px;
}
@media (max-width: 1920px) {
  .margB2 {
    margin-bottom: 0.42vw;
  }
}
@media (max-width: 768px) {
  .margB2 {
    margin-bottom: 2.13vw;
  }
}

.margB3 {
  margin-bottom: 30px;
}
@media (max-width: 1920px) {
  .margB3 {
    margin-bottom: 1.56vw;
  }
}
@media (max-width: 768px) {
  .margB3 {
    margin-bottom: 8vw;
  }
}

.margB4 {
  margin-bottom: 24px;
}
@media (max-width: 1920px) {
  .margB4 {
    margin-bottom: 1.25vw;
  }
}
@media (max-width: 768px) {
  .margB4 {
    margin-bottom: 6.4vw;
  }
}