:root {
  --theme_color: #d70c25;
  --subtheme_color: #ff4d67;
  --hover_color: #000;
  --title_color: #161616;
  --content_color: #3d3d3d;
  --bg_color: linear-gradient(to right, #d70c25, #ff4d67);
}
ul {
  list-style: none;
}
a {
  color: var(--title_color);
  text-decoration: none;
  font-size: 1rem;
}
i {
  font-style: normal;
}
.swiper_box {
  position: relative;
}
.swiper_content {
  max-width: 1460px;
  margin: 0 auto;
  position: relative;
  padding: 10px;
  overflow: hidden;
}
button,
input,
textarea {
  outline: none;
  border: none;
  font-family: unset;
}
input[type="submit"],
button {
  cursor: pointer;
}
textarea {
  resize: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-family: unset;
}
.center {
  text-align: center;
}
.flex_start {
  justify-content: flex-start;
}
.flex_center {
  justify-content: center;
}
.flex_end {
  justify-content: flex-end;
}
.flex_top {
  align-items: flex-start;
}
.flex_middle {
  align-items: center;
}
.flex_bottom {
  align-items: flex-end;
}
body {
  color: var(--title_color);
  font-family: "Jost", sans-serif;
  font-weight: 450;
}
body.fixed {
  overflow: hidden;
  padding-right: 17px;
}
.only_mobile {
  display: none;
}
.content .content {
  padding: 0;
}
.gap {
  gap: 1.25rem;
}
li.swiper-slide {
  height: auto;
}
.grecaptcha-badge {
  visibility: hidden;
}
#fullscreen-loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: #fff;
}
#fullscreen-loader::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  aspect-ratio: 1.154;
  --_g: no-repeat radial-gradient(farthest-side,var(--theme_color) 90%,#0000);
  background: 
    var(--_g) 50%  0,
    var(--_g) 0    100%,
    var(--_g) 100% 100%;
  background-size: 35% calc(35%*1.154);
  animation: l16 1s infinite;
}
@keyframes l16{ 
    50%,100% {background-position: 100% 100%,50% 0,0 100%} 
}
header {
  position: sticky;
  z-index: 996;
  top: -135px;
  transition: all .3s;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
header.sticky {
  top: 0;
}
header .btn_menu, header .btn_search, header .btn_lang {
  display: none;
}
.header_top {
  padding: 11px 0;
  padding-bottom: 3px;
}
.header_top .right {
  width: 100%;
  display: flex;
  justify-content: right;
}
.header_top .right .links a {
  font-size: 13px;
  display: flex;
  align-items: center;
  font-weight: 450;
  transition: all .3s;
}
.header_top .right .links a:hover {
  color: var(--theme_color);
}
.header_top .right .links {
  align-items: center;
  display: flex;
  gap: 28px;
}
.header_top .right .links a:before {
  content: "";
  width: 13px;
  height: 13px;
  display: inline-block;
  background: url('../img/whatsapp.svg') no-repeat center / contain;
  margin-right: 7px;
}
.header_top .right .links a.email:before {
  background-image: url('../img/email.svg');
}
.header_top .search {
  margin-left: 18px;
  position: relative;
}
.header_top .search input[type="text"] {
  width: 184px;
  padding: 7px 13px;
  background: #f7f8fb;
  border-radius: 4px;
  color: #161616;
  font-weight: 450;
}
.header_top .search input[type="text"]::placeholder {
  color: #161616;
}
.header_top .search input[type="submit"] {
  width: 17px;
  height: 17px;
  background: url('../img/search.svg') no-repeat center / contain;
  text-indent: -9999px;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}
.header_top .lang {
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #f7f8fb;
  font-size: 12px;
  color: #161616;
  display: flex;
  align-items: center;
  font-weight: 450;
  margin-left: 10px;
}
.header_top .lang:before {
  content: "";
  width: 17px;
  height: 17px;
  display: inline-block;
  margin-right: 11px;
  background: url('../img/global.svg') no-repeat center / contain;
}
.header_top .lang:after {
  content: "";
  width: 9px;
  height: 5px;
  display: inline-block;
  margin-left: 18px;
  background: url('../img/select.svg') no-repeat center / contain;
}
.header_main .logo {
  width: 260px;
  margin-right: auto;
}
.header_main .logo img {
  width: 100%;
  height: auto;
  transform: translateY(-10px);
}
.desc_text {
  text-indent: -99999px;
  position: absolute;
  opacity: 0;
}
.header_main .nav ul {
  display: flex;
  align-items: center;
  gap: 44.5px;
}
.header_main {
  padding: 0 0 9px;
}
.header_main .nav ul li {
  position: relative;
  z-index: 2;
}
.header_main .nav ul.menu > li.current-menu-item > a,
.header_main .nav ul.menu > li.current-menu-parent > a {
  color: var(--theme_color) !important;
}
.header_main .nav ul li:hover ul {
  pointer-events: all;
  opacity: 1;
  padding: 1rem 1.5rem;
}
.header_main .nav ul li:hover ul li {
  transform: translate(0);
}
.header_main .nav ul li a {
  font-size: 17px;
  color: #161616;
  font-weight: 450;
  padding: 26px 0;
  display: block;
  transition: all .3s;
}
.header_main .nav ul li a:hover {
  color: var(--theme_color);
}
.header_main .nav ul li .sub-menu {
  left: -1.5rem;
  position: absolute;
  min-width: 12rem;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  padding: 1rem 1.5rem 0;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s;
  z-index: 2;
}
.header_main .nav ul li .sub-menu > li {
  margin-bottom: 5px;
  transition: all 0.4s;
  transform: translateY(-1rem);
}
.header_main .nav ul li .sub-menu > li > a {
  display: block;
  padding: 8px 0;
  transition: all 0.3s;
  font-size: 15px;
  font-weight: 600;
  color: var(--title_color);
}
.header_main .nav ul li .sub-menu > li > a:hover {
  color: var(--theme_color);
}
.header_main .btn {
  margin-left: 35px;
}
.header_main .btn a {
  color: white;
  font-size: 17px;
}
.btn {
  padding: 13px 40px;
  font-size: 17px;
  color: white;
  border-radius: 20rem;
  display: block;
  width: fit-content;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
}
.btn::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg_color);
  transition: all 0.3s;
  z-index: -1;
}
.btn:hover {
  background-color: #232528;
}
.btn:hover::after {
  opacity: 0;
}
footer {
  background-color: rgba(245, 248, 250, 0.36);
}
.footer_main {
  padding: 108px 0 190px;
}
section.gap {
  padding: 10rem 0;
}
footer .logo {
  width: 262px;
  margin-bottom: 38px;
}
footer .logo img {
  width: 100%;
  height: auto;
}
.footer_main > .content > .flex {
  gap: 3rem 12.5%;
  flex-wrap: wrap;
}
footer .col.text {
  max-width: 280px;
}
footer .col.text p {
  font-size: 18px;
  line-height: 1.8;
  color: #383838;
}
footer .col.text > a {
  display: inline-block;
  padding: 17px 28px;
  border-radius: 20rem;
  border: 1px solid #232528;
  width: 100%;
  font-size: 18px;
  color: #161616;
  font-weight: 500;
  text-transform: capitalize;
  margin-top: 22px;
  display: flex;
  align-items: center;
}
footer .col.text > a:hover:after {
  transform: translateX(5px);
}
footer .col.text > a:after {
  content: "";
  width: 8px;
  height: 12px;
  background: url('../img/arrow-red.svg') no-repeat center / contain;
  display: inline-block;
  margin-left: auto;
  transition: all 0.3s;
}
footer .col strong {
  font-size: 22px;
  font-weight: 500;
  margin-top: 47px;
  display: block;
  margin-bottom: 35px;
}
footer .col.contact form {
  width: 390px;
  position: relative;
  margin-bottom: 36px;
}
footer .col ul li a {
  transition: all 0.3s;
  color: rgba(36, 36, 36, 0.8);
}
footer .col ul li a:hover {
  color: var(--theme_color);
}
footer .col ul li + li {
  margin-top: 13px;
}
footer .col.contact form input[type="email"] {
  width: 100%;
  border-radius: 20rem;
  height: 55px;
  line-height: 55px;
  background: transparent;
  padding: 0 27px;
  color: #242424;
  font-size: 16px;
  border: 1px solid #ececec;
  transition: all 0.3s;
}
footer .col.contact form input[type="email"]:focus {
  border-color: var(--theme_color);
}
footer .col.contact form input[type="submit"] {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  text-indent: -9999px;
  position: absolute;
  right: 0;
  top: 0;
  background: url('../img/sub.svg') no-repeat center / cover;
}
ul.social {
  display: flex;
  gap: 40px;
}
ul.social li a {
  height: 18px;
  width: 18px;
  display: inline-block;
  text-indent: -9999px;
  transition: all 0.3s;
  background: url('../img/facebook.svg') no-repeat center / contain;
}
ul.social li.twitter a {
  background-image: url('../img/twitter.svg');
}
ul.social li.youtube a {
  background-image: url('../img/youtube.svg');
}
ul.social li.instagram a {
  background-image: url('../img/instagram.svg');
}
ul.social li.linkedin a {
  background-image: url('../img/linkedin.svg');
}
footer .col.contact ul.social li {
  margin: 0;
}
ul.social li a:hover {
  transform: translateY(-5px);
}
footer .copyright p {
  font-size: 14px;
  color: rgba(36, 36, 36, 0.85);
}
footer .copyright ul li a {
  font-size: 14px;
  color: rgba(36, 36, 36, 0.85);
}
footer .copyright ul {
  display: flex;
  align-items: center;
  gap: 46px;
}
footer .copyright .flex {
  border-top: 1px solid #d8d8d8;
  padding: 20px 0;
}
.arrow_btn {
  padding: 17px 45px;
  border-radius: 20rem;
  background: linear-gradient(to right, var(--theme_color), var(--subtheme_color), var(--theme_color), var(--subtheme_color));
  background-size: 400% 100%;
  background-position: 0% center;
  display: flex;
  align-items: center;
  width: max-content;
  transition: all 0.4s;
  color: white;
}
.arrow_btn:hover {
  background-position: 50% center;
}
.arrow_btn:hover:after {
  transform: translateX(5px);
}
.arrow_btn:after {
  content: "";
  width: 15px;
  transition: all 0.3s;
  height: 14px;
  display: inline-block;
  margin-left: 8px;
  background: url('../img/arrow-white.svg') no-repeat center / contain;
}
.swiper_btns,
.swiper_btnsf {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  display: flex;
  justify-content: space-between;
  z-index: 9;
}
.swiper_btns > div {
  width: 14px;
  height: 25px;
  display: inline-block;
  cursor: pointer;
  background: url('../img/swiper-right.svg') no-repeat center / contain;
  transition: all 0.3s;
}
.swiper_btns > div.btn_prev {
  background-image: url('../img/swiper-left.svg');
}
.swiper_btns > div.swiper-button-disabled {
  pointer-events: none;
  border-color: #a2a2a2 !important;
  background-color: transparent !important;
}
.swiper_btns > div.swiper-button-disabled::after {
  filter: contrast(0) brightness(0) !important;
}
.swiper_btnsf {
  width: calc(100vw - 2.4rem);
  max-width: 1671px;
}
.swiper_btnsf div {
  width: 70px;
  height: 70px;
  background: unset;
  border-radius: 50%;
  border: 1px solid #242424;
  position: absolute;
  transform: translateY(-50%);
  background-color: #232323;
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
}
.swiper_btnsf div::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg_color);
  opacity: 0;
  transition: all 0.3s;
}
.swiper_btnsf div:hover {
  background-color: transparent;
  border: 1px solid transparent;
}
.swiper_btnsf div:hover::before {
  opacity: 1;
}
.swiper_btnsf div::after {
  content: '';
  display: block;
  width: 9px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/swiper-left.svg) no-repeat center / contain;
  filter: brightness(20);
  transition: all 0.3s;
}
.swiper_btnsf div.btn_next {
  right: 0;
}
.swiper_btnsf div.btn_next::after {
  transform: translate(-50%, -50%) rotate(180deg);
}
.swiper_btnsf div.swiper-button-disabled {
  pointer-events: none;
  opacity: 0.6;
  background-color: transparent;
}
.swiper_btnsf div.swiper-button-disabled::after {
  filter: brightness(0);
}
.home_banner .swiper-pagination {
  max-width: 1440px;
}
.swiper-pagination {
  gap: 29px;
}
.swiper-pagination span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #161616;
  opacity: 1;
  position: relative;
  transition: all 0.3s;
}
.swiper-pagination span:after {
  content: "";
  position: absolute;
  width: 18px;
  transition: all 0.1s;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  left: 50%;
  top: 50%;
  border: 1px solid #161616;
}
.swiper-pagination span.swiper-pagination-bullet-active:after {
  transform: translate(-50%, -50%) scale(1);
}
.swiper-pagination span.swiper-pagination-bullet-active {
  background: transparent;
}
.head span.subtitle {
  font-size: 24px;
  font-family: "Dancing Script", sans-serif;
  color: var(--theme_color);
}
.head h2 {
  font-size: 44px;
  line-height: 55px;
  font-weight: 500;
}
.head span.subtitle + h2 {
  margin-top: 20px;
}
p.de {
  font-size: 17px;
  line-height: 26px;
  font-weight: 350;
  color: #3d3d3d;
}
p.de + p.de {
  margin-top: 32px;
}
.border_btn {
  display: inline-block;
  padding: 15px 53px;
  border-radius: 20rem;
  font-size: 18px;
  transition: all 0.3s;
  font-weight: 500;
  border: 1px solid rgba(36, 36, 36, 0.45);
  background-color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.border_btn::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg_color);
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}
.border_btn:hover {
  color: white;
  border-color: transparent;
}
.border_btn:hover::after {
  opacity: 1;
}
.footer_contact {
  padding: 50px 0 85px;
}
.footer_contact .left {
  width: 43.5%;
  position: relative;
  padding-top: 20%;
  z-index: 2;
}
.footer_contact .right {
  width: 56.5%;
  padding-left: 11.45833333%;
  padding-top: 2rem;
}
.footer_contact .right .checkbox {
  display: flex;
  gap: 8px;
  margin-top: -10px;
  margin-bottom: 8px;
}
.footer_contact .right .checkbox span {
  font-size: 17px;
  color: #5e5e5e;
  line-height: 24px;
}
.footer_contact .right .checkbox label {
  cursor: pointer;
}
.footer_contact .right input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
  cursor: pointer;
  width: 20px !important;
  height: 20px;
  width: fit-content;
  border-radius: 2px;
  border: 1px solid #d8d8d8;
  padding: 0 !important;
  transform: translateY(4px);
  margin-right: 8px;
}
.footer_contact .right input[type="checkbox"]::after {
  content: '';
  display: block;
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/yes-r.svg) no-repeat center / contain;
  opacity: 0;
  transition: all 0.3s;
}
.footer_contact .right input[type="checkbox"]:checked::after {
  opacity: 1;
}
.footer_contact .right input::placeholder,
.footer_contact .right textarea::placeholder {
  color: #5e5e5e;
  font-weight: 400;
}
.footer_contact .flex {
  align-items: center;
}
.footer_contact .left .img {
  border-radius: 16px;
  aspect-ratio: 620/702;
  aspect-ratio: 1740/976;
  overflow: hidden;
  transition: all 3s;
  transform: translateX(10%);
}
.footer_contact .left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}
.footer_contact .left img:hover {
  transform: scale(1.02);
}
.footer_contact .left .bg {
  display: inline-block;
  aspect-ratio: 620/702;
  aspect-ratio: 1740/976;
  width: 100%;
  position: absolute;
  left: -90px;
  z-index: -1;
  top: 0;
  border-radius: 16px;
  transition: all 3s;
  border-radius: 16px;
  overflow: hidden;
  /* background: url('../img/contact-bg.svg') no-repeat center / cover; */
}
.footer_contact .right h2 {
  font-size: 38px;
}
.footer_contact .right .form form {
  display: flex;
  justify-content: space-between;
  gap: 22px 0px;
  flex-flow: wrap;
}
.footer_contact .right .form form > span {
  display: inline-block;
  width: 100%;
}
.footer_contact .right .form form > span.col2 {
  width: 48.5%;
}
.footer_contact .right .form form > span input:not([type='submit']),
.footer_contact .right .form form > span textarea {
  width: 100%;
  padding: 18px 22px;
  border: 1px solid #a1a8ad73;
  border-radius: 4px;
  font-size: 17px;
}
.footer_contact .right .form form > span textarea {
  min-height: 120px;
}
.footer_contact .right .form form .arrow_btn {
  width: 187px;
  text-align: center;
  position: relative;
}
.footer_contact .right .form form .arrow_btn input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.home_blog {
  padding: 140px 0 50px;
  
}
.home_blog .swiper_btns div {
  opacity: 0;
}
.home_blog .swiper_box:hover .swiper_btns div {
  opacity: 1;
}
.home_blog div.swiper_box .swiper_btns div.swiper-button-disabled {
  opacity: 0;
}
section.home_blog::before {
  z-index: 10;
}
.home_blog .nav {
  max-width: 73%;
}
.home_blog .nav ul {
  display: flex;
  gap: 21px;
  flex-wrap: wrap;
}
.home_blog .nav li {
  padding: 12px 40px;
  font-size: 18px;
  border-radius: 20rem;
  background: #f3f5f9;
  position: relative;
  cursor: pointer;
  z-index: 9;
  transition: all 0.3s;
  text-wrap: nowrap;
}
.home_blog .nav li:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
  top: 0;
  opacity: 0;
  z-index: -1;
  background: var(--bg_color);
  transition: all 0.3s;
  border-radius: 20rem;
}
.home_blog .nav li.active:after {
  opacity: 1;
}
.home_blog .nav li.active {
  color: white;
}
.home_blog .swiper_box {
  margin-top: 44px;
}
.blog-item {
  border: 1px solid #dddddd;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s;
}
.blog-item .infos {
  padding: 36px 31px 46px;
  background: white;
}
.blog-item .img {
  aspect-ratio: 453/311;
  overflow: hidden;
}
.blog-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.3s;
}
.blog-item .infos p {
  font-size: 16px;
  color: #3f3f3f;
  margin-bottom: 14px;
}
.blog-item .infos p span {
  font-weight: 500;
  color: var(--theme_color);
}
.blog-item .infos strong {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  display: block;
}
.blog-item .infos > span:after {
  content: "";
  width: 13px;
  height: 11px;
  filter: brightness(0);
  transition: all 0.3s;
  background: url('../img/jiantou-red.svg') no-repeat center / contain;
}
.blog-item {
  transition: all 0.3s;
}
.blog-item:hover {
  box-shadow: 0 8px 20px rgba(96, 96, 96, 0.25);
}
.blog-item:hover .infos > span:after {
  filter: brightness(1);
}
.blog-item .infos > span {
  font-size: 18px;
  color: var(--theme_color);
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 30px;
  overflow: hidden;
}
.blog-item .infos > span span {
  margin-left: -92px;
  transition: all 0.3s;
}
.blog-item:hover .infos > span span {
  margin-left: 0;
}
.home_blog .border_btn {
  margin-top: 48px;
}
.blog-item:hover .img img {
  transform: scale(1.1);
}
.home_blog .swiper_btns {
  max-width: 1671px;
}
.home_blog .swiper_btns > div {
  width: 72px;
  height: 72px;
  background: #232323;
  border-radius: 50%;
  position: absolute;
  border: 1px solid transparent;
  transform: translateY(-50%);
}
.home_blog .swiper_btns > div:hover {
  background-color: var(--theme_color);
}
.home_blog .swiper_btns > div.btn_next {
  right: 0;
}
.home_blog .swiper_btns > div:after {
  content: "";
  width: 9px;
  height: 17px;
  background: url('../img/swiper_right.svg') no-repeat center / contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(100);
}
.home_blog .swiper_btns > div.btn_prev:after {
  background-image: url('../img/swiper_left.svg');
}
.home_blog .swiper_btns > div.swiper-button-disabled {
  border-color: rgba(36, 36, 36, 0.45);
  background-color: transparent;
}
.home_blog .swiper_btns > div.swiper-button-disabled:after {
  filter: brightness(0);
}
.page_banner {
  background: no-repeat center top / cover;
  padding: 100px 0;
}
.page_banner .flex {
  min-height: 660px;
}
.page_banner .head {
  max-width: 604px;
}
.page_banner .head h1 {
  font-size: 44px;
  font-weight: 500;
}
.page_banner .head .desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: #3d3d3d;
  max-width: 503px;
  margin-top: 12px;
  margin-bottom: 33px;
}
.video {
  position: relative;
  cursor: pointer;
}
.video i {
  display: block;
  width: 76px;
  height: 76px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
  background: url(../img/play.svg) no-repeat center / contain;
}
.video i:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.video .notshow {
  opacity: 0;
}
.breadcrumbs {
  display: flex;
  width: 100%;
  justify-content: end;
  align-items: center ;
  padding: 43px 0;
}
.breadcrumbs::before {
  content: '';
  display: block;
  width: 13px;
  min-width: 13px;
  height: 12px;
  background: url(../img/prodhome.svg) no-repeat center / contain;
  align-self: flex-start;
  transform: translateY(4px);
}
.breadcrumbs span {
  font-size: 14px;
  font-weight: 600;
}
.breadcrumbs span span {
  color: var(--theme_color);
  margin: 0 2px;
  text-transform: unset;
}
.breadcrumbs span span span {
  text-transform: uppercase;
}
.breadcrumbs a {
  font-size: 14px;
  font-weight: 500;
  color: #242424;
  margin: 0 10px;
}
.breadcrumbs a:first-child {
  margin-left: 2px;
}
.productlist li.active .product_a .acimg {
  opacity: 1;
}
.productlist li.active .product_a .info::after {
  opacity: 1;
}
.productlist li.active .product_a .info .color_opciton .active {
  border: 1px solid #ffffff;
}
.productlist li.active .product_a .info strong {
  color: #fff;
}
.productlist li.active .product_a .info span {
  color: #fff;
}
.productlist .product_a {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #fff, #edf1f6);
}
.productlist .product_a:hover .img .acimg {
  opacity: 1;
}
.productlist .product_a:hover .info::after {
  opacity: 1;
}
.productlist .product_a:hover .info .color_opciton .active {
  border: 1px solid #ffffff;
}
.productlist .product_a:hover .info strong {
  color: #fff;
}
.productlist .product_a:hover .info span {
  color: #fff;
}
.productlist .product_a .img {
  position: relative;
  padding-bottom: 106.9364161%;
  z-index: 2;
  width: 100%;
}
.productlist .product_a .img img {
  max-width: 90%;
  max-height: 90%;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.productlist .product_a .img .acimg {
  display: block;
  max-width: unset;
  max-height: unset;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  transform: unset;
  transition: all 0.5s;
  opacity: 0;
}
.productlist .product_a .info {
  padding: 0 0.8rem;
  padding-bottom: 41px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  z-index: 2;
}
.productlist .product_a .info::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s;
  opacity: 0;
  background: linear-gradient(#e5233d, #ff4d67);
}
.productlist .product_a .color_opciton {
  display: flex;
  margin-top: 26px;
  gap: 8px;
}
.productlist .product_a .color_opciton li {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  --color: #d7c2c1;
  position: relative;
  transition: all 0.3s;
}
.productlist .product_a .color_opciton li.active {
  border: 1px solid #242424;
}
.productlist .product_a .color_opciton li::after {
  content: '';
  display: block;
  width: 12px;
  aspect-ratio: 1;
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.productlist .product_a strong {
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  margin-top: 12px;
  flex: 1;
  text-align: center;
  transition: all .3s;
}
.productlist .product_a span {
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  margin-top: 6px;
  transition: all .3s;
}
.prodbody_banner {
  background: url(../img/pdbg1.png) no-repeat center bottom / cover;
}
.prodbody_banner .flex {
  min-height: 792px;
}
.prodbody_banner .left {
  max-width: 719px;
  flex: 1;
}
.prodbody_banner .right {
  width: 45.06944444%;
  flex-shrink: 0;
  max-width: 792px;
}
.prodbody_banner .head {
  padding-bottom: 15.5%;
}
.prodbody_banner .head h1 {
  font-size: 44px;
  line-height: 59px;
  color: #2e2e2e;
  font-weight: 500;
  margin-top: 24px;
}
.prodbody_banner .head .desc {
  margin-top: 16px;
  margin-bottom: 45px;
}
.prodbody_banner .head .desc p {
  font-size: 17px;
  color: #3d3d3d;
  line-height: 26px;
  font-weight: 400;
  margin-bottom: 23px;
}
.prodbody_banner .head .desc li {
  font-size: 17px;
  font-weight: 500;
  color: #3d3d3d;
  display: flex;
  gap: 10px;
  margin-bottom: 9px;
}
.prodbody_banner .head .desc li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: var(--bg_color);
  margin-top: 10px;
  gap: 5px;
  border-radius: 50%;
}
.prodbody_banner .head .bannenrend p {
  font-size: 17px;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 26px;
}
.prodbody_banner .head .bannenrend ul {
  margin-top: 23px;
}
.prodbody_banner .head .bannenrend li {
  display: flex;
  font-size: 18px;
  line-height: 26px;
  color: #242424;
  margin-bottom: 11px;
  align-items: center;
  font-weight: 350;
}
.prodbody_banner .head .bannenrend li span {
  font-weight: 600;
}
.prodbody_banner .head .bannenrend i {
  display: block;
  width: 21px;
  height: 21px;
  margin-right: 17px;
  background: no-repeat center / contain;
}
.prodbody_banner .btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.prodbody_banner .btns a {
  text-wrap: nowrap;
}
.prodbody_banner .arrow_btn {
  padding: 15px 47px;
}
.prodbody_banner .bannenrend {
  margin-top: 46px;
  padding-top: 15px;
  border-top: 1px solid rgba(36, 36, 36, 0.14);
}
.prodbody_banner .right {
  display: flex;
  position: relative;
  padding-bottom: 8%;
  right: 1.4%;
}
.prodbody_banner .right .swiper-slide {
  aspect-ratio: 1;
  overflow: hidden;
  max-width: 649px;
}
.prodbody_banner .right .swiper-slide a {
  display: block;
  aspect-ratio: 1;
}
.prodbody_banner .right .swiper-slide a .img {
  width: 100%;
  height: 100%;
}
.prodbody_banner .right .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prodbody_banner .right .product_preview_swiper {
  overflow: hidden;
  max-width: 649px;
}
.prodbody_banner .right .thumberbox {
  position: absolute;
  top: 50%;
  right: -20%;
  transform: translateY(-66%);
  width: 84px;
  max-height: 368px;
}
.prodbody_banner .right .thumberbox .swiper-slide {
  transition: all 0.3s;
  border: 2px solid transparent;
}
.prodbody_banner .right .thumberbox .swiper_btns {
  flex-direction: column;
  height: 100vh;
  max-height: 515px;
  width: unset;
}
.prodbody_banner .right .thumberbox .swiper_btns div {
  width: 53px;
  height: 53px;
  background: unset;
  border-radius: 50%;
  border: 1px solid #242424;
  position: absolute;
  background-color: #232323;
  transition: all 0.3s;
  transform: translateX(-50%);
}
.prodbody_banner .right .thumberbox .swiper_btns div:hover {
  border: 1px solid transparent;
  background-color: var(--theme_color);
}
.prodbody_banner .right .thumberbox .swiper_btns div::after {
  content: '';
  display: block;
  width: 9px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  background: url(../img/swiper-left.svg) no-repeat center / contain;
  filter: brightness(20);
  transition: all 0.3s;
}
.prodbody_banner .right .thumberbox .swiper_btns div.btn_next {
  bottom: 0;
}
.prodbody_banner .right .thumberbox .swiper_btns div.btn_next::after {
  transform: translate(-50%, -50%) rotate(-90deg);
}
.prodbody_banner .right .thumberbox .swiper_btns div.swiper-button-disabled {
  pointer-events: none;
  opacity: 0.6;
  background-color: transparent;
}
.prodbody_banner .right .thumberbox .swiper_btns div.swiper-button-disabled::after {
  filter: brightness(0);
}
.prodbody_banner .right .thumberbox .active {
  border: 2px solid var(--theme_color);
}
.prodbody_banner .right .product_control_swiper {
  width: 100%;
  overflow: hidden;
}
.prodbody_banner .right .product_control_swiper .swiper-slide {
  cursor: pointer;
  background-color: #fff;
  max-height: 84px;
}
.prodbody_banner .contactbtn {
  background: transparent;
  border: 1px solid rgba(22, 22, 22, 0.5);
  color: #161616;
  font-weight: 600;
  font-size: 17px;
  padding: 15px 37px;
}
.prodbody_banner .contactbtn:after {
  filter: brightness(0);
}
.product_nav ul {
  display: flex;
  background-color: #798084;
  gap: 5px;
  overflow: auto;
}
.product_nav ul li {
  padding: 0 12px;
}
.product_nav ul li:first-child {
  margin-left: auto;
}
.product_nav ul li:last-child {
  margin-right: auto;
}
.product_nav ul li.active a {
  border-bottom: 5px solid var(--theme_color);
}
.product_nav ul li a {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  display: block;
  text-align: center;
  padding: 26px 0.5rem;
  border-bottom: 5px solid transparent;
  transition: all 0.3s;
  text-wrap: nowrap;
}
.product_nav ul li a:hover {
  border-bottom: 5px solid var(--theme_color);
}
.senseless,
.senseless-reverse {
  padding-top: 167px;
  padding-bottom: 100px;
}
.senseless .left,
.senseless-reverse .left {
  flex: 1;
  max-width: 610px;
  padding-top: 1.2%;
}
.senseless .left .head h2,
.senseless-reverse .left .head h2 {
  font-size: 36px;
  font-weight: 500;
  padding-bottom: 27px;
  position: relative;
}
.senseless .left .head h2::after,
.senseless-reverse .left .head h2::after {
  content: '';
  display: block;
  width: 78px;
  border-top: 1px solid var(--theme_color);
  position: absolute;
  left: 0;
  bottom: 0;
}
.senseless .left .head .desc,
.senseless-reverse .left .head .desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: #3d3d3d;
  margin-top: 35px;
  max-width: 576px;
}
.senseless .right,
.senseless-reverse .right {
  max-width: 52.08333333%;
}
.senseless .right .img,
.senseless-reverse .right .img {
  width: 100%;
  aspect-ratio: 750/480;
  border-radius: 26px;
  overflow: hidden;
}
.senseless .right .img:hover img,
.senseless-reverse .right .img:hover img {
  transform: scale(1.03);
}
.senseless .right .img img,
.senseless-reverse .right .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: all 0.5s;
}
.senseless-reverse {
  padding-top: 42px;
}
.senseless-reverse .flex {
  flex-direction: row-reverse;
}
.senseless-reverse .left {
  max-width: 610px;
}
.powerful {
  padding-top: 66px;
  padding-bottom: 80px;
}
.powerful .head h2 {
  font-size: 44px;
  font-weight: 500;
  color: #161616;
}
.powerful .list {
  margin-top: 47px;
}
.powerful .list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 3.68055556%;
}
.powerful .list li a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 59px 5.69710145%;
  gap: 6.27272727%;
  border: 2px solid transparent;
  border-radius: 19px;
  position: relative;
  transition: all 0.3s;
}
.powerful .list li a::after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #e6e6e6;
  transition: all 0.3s;
}
.powerful .list li.active a {
  border: 2px solid var(--theme_color);
}
.powerful .list li.active a::after {
  opacity: 0;
}
.powerful .list li:nth-last-child(-n+2) a::after {
  display: none;
}
.powerful .list li.notshow a::after {
  opacity: 0;
}
.powerful .list li.acimg a {
  border: 2px solid var(--theme_color);
}
.powerful .list li i {
  display: block;
  width: 76px;
  height: 68px;
  flex-shrink: 0;
  background: no-repeat center / contain;
}
.powerful .list li span {
  font-size: 18px;
  font-weight: 500;
  color: var(--theme_color);
  display: flex;
  align-items: center;
  margin-top: 38px;
  width: fit-content;
}
.powerful .list li span:hover::after {
  transform: translateX(5px);
}
.powerful .list li span::after {
  content: '';
  display: block;
  width: 12px;
  height: 10px;
  transition: all 0.3s;
  margin-left: 8px;
  background: url(../img/jiantou-red.svg);
}
.powerful .list strong {
  font-size: 28px;
  font-weight: 500;
  line-height: 31px;
}
.powerful .list p {
  font-size: 17px;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 26px;
  margin-top: 20px;
}
.more {
  font-size: 18px;
  font-weight: 500;
  color: var(--theme_color);
  display: flex;
  align-items: center;
  margin-top: 38px;
  width: fit-content;
}
.more:hover::after {
  transform: translateX(5px);
}
.more::after {
  content: '';
  display: block;
  width: 12px;
  height: 10px;
  transition: all 0.3s;
  margin-left: 8px;
  background: url(../img/jiantou-red.svg);
}
@keyframes lineae {
  0% {
    transform: translate(50%, -50%) scale(1);
  }
  50% {
    transform: translate(50%, -50%) scale(1.3);
  }
  100% {
    transform: translate(50%, -50%) scale(1);
  }
}
@keyframes lineae1 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes lineae2 {
  0% {
    transform: translate(50%, 50%) scale(1);
  }
  50% {
    transform: translate(50%, 50%) scale(1.3);
  }
  100% {
    transform: translate(50%, 50%) scale(1);
  }
}
.structure {
  padding-top: 133px;
  background: url(../img/pdstbg.jpg) no-repeat center top / cover;
  position: relative;
  overflow: hidden;
}
.structure::after {
  content: '';
  display: block;
  width: 100%;
  height: 327px;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), #ffffff);
  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}
.structure .nav {
  margin: 0 auto;
  margin-top: 39px;
  margin-bottom: 36px;
  position: relative;
  z-index: 3;
}
.structure .nav ul {
  display: flex;
  justify-content: center;
  gap: 0.66666666%;
}
.structure .nav li {
  font-size: 18px;
  color: #333333;
  border: 1px solid #fff;
  min-width: 140px;
  border-radius: 100px;
  cursor: pointer;
  padding: 9px 24.5px;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: all 0.3s;
  background-color: #fff;
}
.structure .nav li.active,
.structure .nav li:hover {
  color: #fff;
  background-color: transparent;
  border: 1px solid transparent;
}
.structure .nav li.active::after,
.structure .nav li:hover::after {
  opacity: 1;
}
.structure .nav li::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg_color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s;
  opacity: 0;
}
.structure .prodmain .imgbox {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  z-index: 2;
}
.structure .prodmain .imgbox .img {
  transform: translateY(-8%);
}
.structure .prodmain .imgbox .img img {
  max-width: 100%;
  display: block;
  max-height: 100%;
  object-fit: contain;
}
.structure .prodmain .notshow {
  display: none;
}
.structure .prodmain .parameter li {
  position: absolute;
  max-width: 288px;
  transition: all 1s;
}
.structure .prodmain .parameter li.end {
  text-align: end;
}
.structure .prodmain .parameter li.end i {
  animation: lineae 1.5s linear infinite;
}
.structure .prodmain .parameter li.codown .line i {
  animation: lineae2 1.5s linear infinite;
}
.structure .prodmain .line {
  position: absolute;
  border-top: 2px solid var(--theme_color);
}
.structure .prodmain .line i {
  position: absolute;
  top: 0;
  right: 0;
  width: 29px;
  height: 29px;
  z-index: 2;
  border-radius: 50%;
  background-color: rgba(215, 12, 37, 0.32);
  transform: translate(50%, -50%);
  animation: lineae1 1.5s linear infinite;
}
.structure .prodmain .line i::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid var(--theme_color);
  transform: translate(-50%, -50%);
}
.structure .prodmain strong {
  font-size: 24px;
  font-weight: 500;
  line-height: 26px;
}
.structure .prodmain p {
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: #3d3d3d;
  margin-top: 9px;
}
.accessores {
  padding-top: 99px;
  padding-bottom: 99px;
}
.accessores .head h2 {
  font-size: 44px;
  font-weight: 500;
}
.accessores .list {
  margin-top: 48px;
}
.accessores .list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 4.16666667%;
  margin-bottom: 48px;
}
.accessores .list li .access_a {
  border-radius: 14px;
  border: 1px solid #dddddd;
  display: flex;
  align-items: center;
  gap: 7.68115942%;
  height: 100%;
}
.accessores .list li .img {
  border-radius: 14px;
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 67.3584058%;
  aspect-ratio: 1;
  overflow: hidden;
}
.accessores .list li .img:hover img {
  transform: scale(1.05);
}
.accessores .list li .img img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  transition: all 0.3s;
}
.accessores .list li .info {
  padding: 15px 15px 15px 0;
}
.accessores .list li .info strong {
  font-size: 24px;
  font-weight: 500;
}
.accessores .list li .info p {
  font-size: 17px;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 26px;
  margin-top: 6px;
}
.sepcifiation {
  padding-top: 99px;
  padding-bottom: 101px;
}
.sepcifiation .left {
  flex: 1;
  max-width: 655px;
}
.sepcifiation .left .head h2 {
  font-size: 44px;
  font-weight: 500;
  line-height: 55px;
}
.sepcifiation .left table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  margin-bottom: 40px;
}
.sepcifiation .left table td {
  font-size: 18px;
  font-weight: 400;
  color: rgba(36, 36, 36, 0.76);
  border-bottom: 1px solid #b7b7b7;
  padding: 15px 0;
}
.sepcifiation .left table td:last-child {
  color: #242424;
}
.sepcifiation .left table td:first-child {
  width: 37.2519084%;
  padding-right: 10px;
}
.sepcifiation .left .arrow_btn {
  min-width: 238px;
}
.sepcifiation .right {
  width: 40.06944444%;
  flex-shrink: 0;
  margin-right: 6.6%;
  padding-bottom: 2.6%;
}
.sepcifiation .right .img {
  aspect-ratio: 1;
}
.sepcifiation .right .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.product_faq {
  padding-top: 167px;
  padding-bottom: 100px;
}
.product_faq .lefttitle {
  flex: 1;
  max-width: 496px;
}
.product_faq .lefttitle .desc {
  font-size: 17px;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 26px;
  margin-top: 23px;
  margin-bottom: 51px;
  letter-spacing: -0.2px;
}
.product_faq .lefttitle .arrow_btn {
  padding: 17px 41px;
}
.product_faq .questionlist {
  width: 54.86111111%;
}
.product_faq .questionlist .faq {
  transition: all 0.3s;
  border-bottom: 1px solid #d9d9d9;
}
.product_faq .questionlist .faq:first-child .question {
  padding-top: 0;
}
.product_faq .questionlist .faq:first-child .question strong span {
  margin-top: 9px;
}
.product_faq .questionlist .faq:first-child .answer {
  display: block;
}
.product_faq .questionlist .faq.active {
  border-bottom: 1px solid #242424;
}
.product_faq .questionlist .faq.active:not(.product_faq .questionlist .faq.active:last-child) {
  border-bottom: 1px solid #242424;
}
.product_faq .questionlist .faq.active .question span {
  transform: rotate(135deg);
}
.product_faq .questionlist .faq.active .answer {
  display: block;
}
.product_faq .questionlist .faq .question {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 2;
  transition: 0.3s;
  padding: 37px 0 37px;
}
.product_faq .questionlist .faq .question strong {
  flex: 1;
  transition: all 0.3s;
  font-size: 24px;
  font-weight: 500;
  color: #161616;
}
.product_faq .questionlist .faq .question span {
  display: block;
  width: 18px;
  height: 18px;
  transition: all 0.3s;
  transform: rotate(-90deg);
  margin-right: 1.6%;
  background: url(../img/faqicon.svg) no-repeat center / contain;
}
.product_faq .questionlist .faq .answer {
  color: #3d3d3d;
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  display: none;
  padding: 0px 0 54px;
}
.product_prouds {
  padding-top: 110px;
  padding-bottom: 140px;
}
.product_prouds .products_swpt_box {
  margin-top: 50px;
  pointer-events: none;
  & > div, & > p {
    pointer-events: all;
  }
}
.product_prouds .swiper_btnsf {
  top: 49%;
}
.product_prouds .products_swiper {
  overflow: hidden;
  margin-bottom: 62px;
}
.product_prouds .swiper_btnsf div {
  opacity: 0;
}
.product_prouds .products_swpt_box:hover .swiper_btnsf div {
  opacity: 1;
}
.product_prouds div.products_swpt_box .swiper_btnsf div.swiper-button-disabled {
  opacity: 0;
}
.prod_step {
  padding-top: 57px;
  padding-bottom: 98px;
}
.prod_step .swiper_btnsf {
  position: static;
  transform: unset;
  max-width: 161px;
}
.prod_step .prod_step_swiper {
  overflow: hidden;
  margin-top: 49px;
}
.prod_step .prod_step_swiper .swiper-slide {
  border-radius: 14px;
  border: 1px solid #dddddd;
  padding: 29px 1.73611111% 52px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.prod_step .prod_step_swiper .swiper-slide:hover img {
  transform: scale(1.03);
}
.prod_step .prod_step_swiper .imgbox {
  position: relative;
  aspect-ratio: 1;
}
.prod_step .prod_step_swiper .imgbox .img {
  width: 100%;
  height: 100%;
}
.prod_step .prod_step_swiper .imgbox .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: all 0.5s;
}
.prod_step .prod_step_swiper .imgbox .num {
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme_color);
  position: absolute;
  top: 4%;
  left: 6%;
  z-index: 2;
}
.prod_step .prod_step_swiper .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  padding: 0 5px;
}
.prod_step .prod_step_swiper .info strong {
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  display: block;
}
.prod_step .prod_step_swiper .info p {
  font-size: 20px;
  font-weight: 400;
  color: #444444;
  line-height: 28px;
  flex: 1;
  margin-top: 15px;
}
.comparison {
  padding-top: 57px;
  padding-bottom: 202px;
}
.comparison .head p {
  font-size: 17px;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 26px;
  margin-top: 22px;
}
.comparison .nav {
  margin-top: 38px;
  margin-bottom: 56px;
}
.comparison .nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1.8%;
}
.comparison .nav li {
  font-size: 18px;
  font-weight: 500;
  position: relative;
  border-radius: 100px;
  overflow: hidden;
  z-index: 2;
  padding: 10px 19px;
  transition: all 0.3s;
  cursor: pointer;
}
.comparison .nav li.active,
.comparison .nav li:hover {
  color: #fff;
}
.comparison .nav li.active::after,
.comparison .nav li:hover::after {
  opacity: 1;
}
.comparison .nav li::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg_color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
.comparison .left {
  flex: 1;
  max-width: 521px;
  padding-bottom: 5.8%;
}
.comparison .left h3 {
  font-size: 36px;
  line-height: 55px;
  font-weight: 500;
}
.comparison .left p {
  font-size: 17px;
  font-weight: 400;
  color: #535353;
  line-height: 26px;
  margin-top: 22px;
}
.comparison .left ul {
  margin-top: 24px;
}
.comparison .left li {
  font-size: 17px;
  font-weight: 500;
  color: rgba(61, 61, 61, 0.85);
  display: flex;
  margin-bottom: 12px;
}
.comparison .left li::before {
  content: '';
  display: block;
  width: 17px;
  height: 12px;
  background: url(../img/yes-r.svg) no-repeat center / contain;
  margin-top: 5px;
  margin-right: 2.5%;
}
.comparison .right {
  width: 52.15277778%;
}
.comparison .right .img {
  position: relative;
  width: 100%;
  aspect-ratio: 751 / 591;
  border-radius: 26px;
  overflow: hidden;
  box-sizing: content-box;
  border: 3px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comparison .lefttext,
.comparison .righttext {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 28px;
  height: 28px;
  padding: 0 24px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 3;
  bottom: 3%;
  text-transform: uppercase;
}
.comparison .lefttext {
  left: 2.5%;
}
.comparison .righttext {
  right: 3%;
  padding: 0 30px;
}
.comparison .right .img .pic1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url("../img/eyecompaimg.jpg") 0% 0% / cover;
}
.comparison .right .img .pic2 {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
  background: url("../img/eyecompaimg.jpg") 0% 0% / cover;
  border-right: 2px solid #fff;
}
.comparison .right .img .pic2 span {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(50%, -50%);
}
.comparison .right .img .pic2 span::before,
.comparison .right .img .pic2 span::after {
  content: "";
  display: block;
  width: 11px;
  height: 20px;
  transform: rotate(180deg);
  background: url("../img/arrow-r.svg") center center / contain no-repeat;
}
.comparison .right .img .pic2 span::after {
  transform: rotate(0deg);
}
.comparison .main_box {
  display: none;
}
.comparison .main_box.show {
  display: block;
}
.works {
  padding-top: 90px;
  padding-bottom: 200px;
}
.works .intro {
  flex: 1;
  max-width: 568px;
  position: relative;
  z-index: 2;
  margin-top: 93px;
}
.works .intro::before {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  background-color: #e5e5e5;
  z-index: -1;
  position: absolute;
  left: 1px;
  top: 0;
}
.works .intro .item {
  padding-left: 6.1%;
  position: relative;
  margin-bottom: 0px;
  transition: all 0.3s;
}
.works .intro .item:last-child {
  margin-bottom: 0;
}
.works .intro .item::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 100px;
  background-color: var(--theme_color);
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s;
  opacity: 0;
}
.works .intro .item h3 {
  color: rgba(22, 22, 22, 0.5);
  font-size: 24px;
  font-weight: 500;
  line-height: 47px;
  transition: all 0.3s;
  cursor: pointer;
}
.works .intro .item p {
  color: #3d3d3d;
  font-size: 17px;
  line-height: 26px;
  display: none;
  padding-top: 11px;
}
.works .intro .item.active {
  margin-bottom: 20px;
}
.works .intro .item.active:last-child {
  margin-bottom: 0;
}
.works .intro .item.active::before {
  opacity: 1;
}
.works .intro .item.active h3 {
  font-size: 36px;
  font-weight: 600;
  color: var(--title_color);
}
.works .intro .item:first-child p {
  display: block;
}
.works .imgs {
  width: 52.15277778%;
  position: relative;
  padding-top: 25px;
}
.works .imgs .syeditorlist {
  padding-bottom: 78.69507324%;
  position: relative;
}
.works .imgs .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
  transition: all 0.3s;
  opacity: 0;
  pointer-events: none;
}
.works .imgs .img.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}
.works .imgs .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
  transition: all 0.5s;
}
.works .imgs .img:hover img {
  transform: scale(1.03);
}

/*** global css ***/
.empty_img {
  max-width: 388px;
  margin: 0 auto;
  display: block;
}
.loading {
  position: relative;
}
.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../../global/img/load.gif') no-repeat center;
  background-size: 45px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 9;
}

.form .wpcf7-not-valid-tip {
  margin-top: 5px;
}
.contact_content .form form span.wpcf7-spinner {
  width: 24px;
}
.form .wpcf7 form .wpcf7-response-output {
  padding: 0;
  margin: 0;
  border: none;
}

div form#sytech-newsletter-subscription {
  display: grid;
}
.single div form#sytech-newsletter-subscription {
  display: flex;
}
div form#sytech-newsletter-subscription p.success.active {
  top: -3rem;
}
div form#sytech-newsletter-subscription p.success,
div form#sytech-newsletter-subscription p.failed {
  background-color: var(--theme_color);
}
div form#sytech-newsletter-subscription p.success::before,
div form#sytech-newsletter-subscription p.failed::before {
  top: 0.9rem;
  filter: contrast(0) brightness(2);
}
div form#sytech-newsletter-subscription p.success::after,
div form#sytech-newsletter-subscription p.failed::after {
  bottom: unset;
  top: 100%;
  border-top-color: var(--theme_color);
}

.video_pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 9999;
  padding: 1.2rem;
}
.video_pop.active {
  opacity: 1;
  pointer-events: all;
}
.video_pop.active .pop_content {
  transform: translate(-50%, -50%);
}
.video_pop .mask {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
.video_pop .mask .close {
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 2rem;
  top: 1rem;
  cursor: pointer;
}
.video_pop .pop_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  transition: all 0.3s;
  width: max-content;
  max-width: 90vw;
  height: 80vh;
  aspect-ratio: 1920/1080;
}
.video_pop .pop_content iframe, .video_pop .pop_content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/*** global css ***/

.footer_contact .right .checkbox span {
  margin: 0;
}
.footer_contact .right .form form .arrow_btn .wpcf7-spinner {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.quote_pop {
  position: fixed;
  z-index: 1999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  &.active {
    opacity: 1;
    pointer-events: all;
    .pop_content {
      transform: translate(0);
    }
  }
  .close {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .pop_content {
    transition: all .4s;
    transform: translateY(-20%);
    max-width: 1000px;
    width: calc(100% - 40px);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: #fff;
    &::before {
      content: '';
      display: block;
      width: 45%;
      height: 100%;
      background: url(../img/contact-item.jpg) no-repeat center/cover #fff;
      position: absolute;
      left: 0;
      top: 0;
    }
    .form {
      width: 55%;
      margin-left: auto;
      background-color: rgba(255, 255, 255, 0.97);
      padding: 2rem;
      max-height: 80vh;
      overflow: auto;
      .wpcf7-not-valid-tip {
        font-size: 12px;
        margin-top: 4px;
      }
      .wpcf7 form .wpcf7-response-output {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 1rem;
      }
      &::-webkit-scrollbar {
        width: 5px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgb(136, 136, 136);
        border-radius: 10px;
      }
      input, select, textarea {
        width: 100%;
        background-color: transparent;
        border: 1px solid #dadada;
        border-radius: 4px;
        color: #5e5e5e;
        font-size: 15px;
        padding: 12px 1rem;
        margin-top: 1rem;
      }
      label {
        display: inline-block;
        vertical-align: top;
        margin-top: 1rem;
      }
      select {
        cursor: pointer;
        padding: 13px 2rem 13px 1rem;
        background: url(../img/selet.svg) no-repeat right+1rem center / 12px;
      }
      textarea {
        height: 120px;
      }
      .contact_inquiry form label .btn {
        line-height: 26px;
        min-width: 193px;
        margin-top: 12px;
      }
      input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        flex-shrink: 0;
        cursor: pointer;
        width: 20px !important;
        height: 20px;
        width: fit-content;
        border-radius: 2px;
        border: 1px solid #d8d8d8;
        padding: 0 !important;
        transform: translateY(4px);
        margin-right: 8px;
        cursor: pointer;
      }
      input[type="checkbox"] ~ span {
        cursor: pointer;
      }
      input[type="checkbox"]::after {
        content: '';
        display: block;
        width: 80%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../img/yes-r.svg) no-repeat center / contain;
        opacity: 0;
        transition: all 0.3s;
      }
      input[type="checkbox"]:checked::after {
        opacity: 1;
      }
      .checkbox {
        margin-bottom: 1rem;
        display: block;
      }
      .checkbox label {
        margin-top: 0;
        span {
          margin: 0;
        }
      }
      input[type="submit"] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      .arrow_btn {
        position: relative;
      }
      .arrow_btn .wpcf7-spinner {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.search_main .productlist {
  display: grid;
  gap: 2rem 2.71493213%;
  grid-template-columns: repeat(4, 1fr);
}

.about_history .history_swiper_box .swiper-slide:nth-child(2n)::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  transform: translate(-50%, 50%);
  background-color: rgb(0, 0, 0);
  z-index: 2;
}
.about_history .history_swiper_box .swiper-slide:nth-child(2n)::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  transform: translate(-50%, 50%);
  background-color: rgb(217, 217, 217);
  border-radius: 50%;
}
.about_history .history_swiper_box .about_history_swiper .swiper-slide.swiper-slide-active::before {
  width: 8px;
  height: 8px;
  background-color: #fff;
}
.about_history .history_swiper_box .about_history_swiper .swiper-slide.swiper-slide-active::after {
  width: 1rem;
  height: 1rem;
  background-color: var(--theme_color);
}

.contact_sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 99;
  li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.9);
    &:last-child {
      border-bottom: none;
    }
    a {
      display: block;
      width: 3rem;
      height: 3rem;
      overflow: hidden;
      background-color: #333333;
      color: #fff;
      position: relative;
      text-indent: -999px;
      transition: all .3s;
      &::after {
        content: '';
        display: block;
        width: 50%;
        height: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: no-repeat center/contain;
        transition: all .3s;
        filter: contrast(0) brightness(2);
      }
      &:hover {
        background-color: var(--theme_color);
      }
    }
  }
  .whatsapp a::after {
    background-image: url(../img/whatsapp.svg);
  }
  .phone a::after {
    width: 44%;
    height: 44%;
    background-image: url(../img/icon-phone.svg);
  }
  .email a::after {
    width: 48%;
    height: 48%;
    background-image: url(../img/email.svg);
  }
}

.footer_top {
  position: fixed;
  z-index: 99;
  right: 12px;
  bottom: 12px;
  width: 2rem;
  height: 2rem;
  transform: rotate(180deg);
  transition: all .3s;
  cursor: pointer;
  filter: contrast(0) brightness(1.3);
  background: url(../img/select.svg) no-repeat center/80%;
  &:hover {
    filter: contrast(0) brightness(0);
  }
}

.footer_contact .links {
  margin: 2rem 0;
  gap: 28px;
  align-items: flex-start;
}
.footer_contact .links a {
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: 450;
  transition: all .3s;
}
.footer_contact .links a:hover {
  color: var(--theme_color);
}
.footer_contact .links a:before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url('../img/whatsapp.svg') no-repeat center / contain;
  margin-right: 12px;
}
.footer_contact .links a.email:before {
  background-image: url('../img/email.svg');
}
.about_certificates_swiper .swiper_btns div {
  opacity: 0;
}
.about_certificates_swiper:hover .swiper_btns div {
  opacity: 1;
}
.about_certificates_swiper div.swiper_btns div.swiper-button-disabled {
  opacity: 0;
}