/**/

@import url("../../css/fonts-en.css");

:root {

  --color: #7A7A7A;

  --hovercolor: #7A7A7A;

  --backgroundcolor: #7A7A7A;

  --fontcolor: #000000;

  --fonttextcolor: #333333;

  --brand: #2D7DBE;

  --titlefont: 42px;

  --font12: 12px;

  --font14: 14px;

  --font15: 15px;

  --font16: 16px;

  --font17: 17px;

  --font18: 18px;

  --font20: 20px;

  --font22: 22px;

  --font24: 24px;

  --font26: 26px;

  --font28: 28px;

  --font30: 30px;

  --font36: 36px;

  --font40: 40px;

  --font42: 42px;

  --font48: 48px;

  --font50: 50px;

  --font60: 50px;

  --fontbold3: 300;

  --fontbold4: 400;

  --fontbold5: 500;

  --fontbold6: 600;

  --fontbold7: 700;

}

* {

  margin: 0;

  padding: 0;

}

address,

b,

big,

blockquote,

body,

center,

cite,

code,

dd,

del,

div,

dl,

dt,

em,

fieldset,

font,

form,

h3,

h4,

h5,

h6,

html,

i,

iframe,

img,

input,

ins,

label,

legend,

li,

ol,

p,

pre,

small,

span,

strong,

td,

th,

u,

ul,

var {

  margin: 0;

  padding: 0;

}

aside,

b,

button,

dd,

div,

dl,

dt,

footer,

form,

h3,

h4,

h5,

h6,

header,

input,

li,

nav,

ol,

p,

section,

table,

td,

textarea,

tr,

ul {

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box

}

h1,

h2,

h3,

h4,

h5 {

  font-weight: 600;

}

body {

  color: var(--fontcolor);

  font-size: var(--font16);

  padding: 0px;

  margin: 0px;

  font-family: "SuisseIntl", Arial, Verdana, sans-serif;

}

button:foucs {

  border: none !important;

  outline: none !important;

}

button::-moz-focus-inner {

  border-color: transparent;

}

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;

}

ul,

ol {

  list-style: none;

  padding: 0;

  margin: 0;

}

i {

  font-style: normal;

}

a {

  color: #333;

  text-decoration: none;

}

a:hover {

  text-decoration: none;

  color: #333;

}

img {

  vertical-align: middle

}

input {

  outline: none;

}

input[type="button"],

input[type="submit"],

input[type="reset"],

button,

select {

  -webkit-appearance: none;

  outline: none;

}

textarea {

  -webkit-appearance: none;

  outline: none

}

.clear {

  clear: both;

  height: 0px;

  overflow: hidden;

}

.clearfix:after {

  content: ".";

  display: block;

  height: 0;

  visibility: hidden;

  clear: both;

}

.clearfix {

  zoom: 1;

}

.fl {

  float: left;

}

.fr {

  float: right;

}

.center-block {

  display: block;

  margin-right: auto;

  margin-left: auto

}

img {

  border: 0px;

  vertical-align: middle;

}

.img-responsive {

  display: block;

  height: auto;

  max-width: 100%

}

.avatar {

  display: block;

  overflow: hidden;

  width: 100%;

}

.dot {

  display: block;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

}

.dot2 {

  text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

.dot3 {

  text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

}

.container-fluid {

  padding: 0 10vw;

}



/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

/*  */

.top_menu {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

/*  */

.get {

  margin-top: 30px;

}

.a2a_kit a {

  margin-right: 8px !important;

  border-radius: 5px !important;

  width: 28px !important;

  height: 28px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: all 0.3s ease !important;

  background: #001C42 !important;

  color: #FFFFFF !important;

  margin-bottom: 8px !important;

}

.a2a_svg {

  width: 24px !important;

  height: 24px !important;

  line-height: 24px !important;

  background: none !important;

}

.a2a_svg svg {

  fill: #FFFFFF !important;

}

.a2a_kit a:hover {

  background: #2251FF !important;

}

.a2a_kit2 a {

  background: #001C42 !important;

}

.a2a_kit2 a:hover {

  background: #2251FF !important;

}

/*  */

#header {

  transition: all 0.5s;

  z-index: 997;

  top:0;

  transition: all 0.5s;

  position: absolute;

  width: 100%;

}

#header.header-transparent:hover {

  background: #fff;

}

#header.header-transparent:hover .header_top {

  background: var(--brand);

}

#header.header-transparent:hover .change-language-title a span {

  color: #fff;

}

.header_top {

  height: 48px;

  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.5);

}

.header_right {

  display: flex;

  align-items: center;

}

.header_right .e-mail a {

  color: #fff;

}

.header_top .container-fluid {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

.logo img {

  max-height: 45px;

}

.logo-tu1 {

  display: block;

}

.logo-tu2 {

  display: none;

}

/* */

.top_menu {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 66px;

}

.dflex_end {

  display: flex;

  align-items: center;

}

.nav-menu,

.nav-menu {

  margin: 0;

  padding: 0;

  list-style: none;

}

.nav-menu {

  flex: 5;

  height: 66px;

  padding-left: 50px;

  position: relative;

}

.nav-menu>ul {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

.nav-menu>ul>li {

  text-align: center;

}

.nav-menu>ul>li>a {

  display: block;

  color: #fff;

  margin: 0 20px;

  height: 66px;

  line-height: 66px;

  font-weight: 400;

  font-size: 18px;

  letter-spacing: .03em;

  transition: all .3s;

  position: relative;

  text-decoration: none;

}

.nav-menu>ul>li>a::after {

  position: absolute;

  left: 0;

  content: '';

  bottom: 15px;

  width: 0;

  height: 1px;

  background: var(--brand);

  transition: all .3s;

}

.nav-menu>ul>li:hover>a,

.nav-menu .active>a {

  color: #0066B3 !important;

}

.nav-menu>ul>li:hover>a::after,

.nav-menu .active>a::after {

  width: 100%;

}

#header.header-transparent:hover .nav-menu a {

  color: #333;

}

#header.header-transparent:hover .seaBtn span {

  color: #333;

}

#header.header-transparent:hover .change-language-title a span {

  color: #333;

}

#header.header-transparent:hover .change-language .change-language-title a:after {

  color: #333;

}

/* ===== Products  ===== */

.nav-menu .drop-down .nav_sub {

  opacity: 0;

  visibility: hidden;

  max-height: 0;

  overflow: hidden;

  position: absolute;

  left: 0;

  right: 0;

  margin: auto;

  background: #ffffff;

  transition: all 0.3s ease-in-out;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);

  border-top: 2px solid var(--brand);

  z-index: 999;

}

.nav-menu .drop-down:hover .nav_sub {

  opacity: 1;

  top: 100%;

  visibility: visible;

  max-height: 620px;

  overflow-y: auto;

  overflow-x: hidden;

}

.nav-menu .drop-down .nav_sub .container-fluid {

  position: relative;

  display: flex;

  align-items: stretch;

  height: auto;

  min-height: 420px;

}

.nav_r.product-nav-r {

  display: flex;

  width: 100%;

  min-height: 345px;

  background: #fff;

  border-radius: 0 0 4px 4px;

}

/* ---  --- */

.nav_left {

  max-width: 320px;

  min-width: 200px;

  background: #f7f9fc;

  border-right: 1px solid #e9edf4;

  flex-shrink: 0;

  overflow-y: auto;

  max-height: 345px;

}

.nav_left .category-list {

  list-style: none;

  padding: 0;

  margin: 0;

}

.nav_left .category-list li {

  padding: 12px 24px;

  font-size: 15px;

  font-weight: 500;

  color: #2c3e50;

  cursor: default;

  transition: all 0.2s;

  border-left: 3px solid transparent;

  position: relative;

  letter-spacing: 0.3px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  text-align: left;

}

.nav_left .category-list li:hover {

  background: #eef2f7;

}

.nav_left .category-list li.active {

  background: #ffffff;

  color: var(--brand);

  border-left-color: var(--brand);

}

.nav_left .category-list li.active::after {

  content: '';

  position: absolute;

  right: -1px;

  top: 50%;

  transform: translateY(-50%);

  width: 0;

  height: 0;

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;

  border-right: 8px solid #fff;

}

.nav_left .category-list li .cat-icon {

  font-size: 14px;

  color: #8a9bb5;

  transition: 0.2s;

}

.nav_left .category-list li.active .cat-icon,

.nav_left .category-list li:hover .cat-icon {

  color: var(--brand);

}

/*  */

.nav_left .category-list li .cat-link {

  color: inherit;

  text-decoration: none;

  flex: 1;

  display: block;

}

.nav_left .category-list li .cat-link:hover {

  color: var(--brand);

}

/* ---  --- */

.nav_right {

  flex: 1;

  padding: 20px 24px 24px 24px;

  overflow-y: auto;

  max-height: 580px;

  background: #ffffff;

  min-width: 0;

}

.nav_right .product-panel {

  display: none;

  animation: fadeSlide 0.25s ease;

}

.nav_right .product-panel.active {

  display: block;

}

@keyframes fadeSlide {

  0% {

    opacity: 0;

    transform: translateY(6px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

.nav_right .product-panel ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.nav_right .product-panel ul li {}

.nav_right .product-panel ul li a:hover {

  background: #f5f8fc;

}

.nav_right .product-panel ul li a {

  font-size: 14px;

  color: #1a2634;

  text-decoration: none;

  font-weight: 400;

  line-height: 1.4;

  display: block;

  padding: 12px;

  border-radius: 4px;

  transition: background 0.2s;

  text-align: left;

}

.nav_right .product-panel ul li a:hover {

  color: var(--brand) !important;

  text-decoration: underline;

}

/* =====  ===== */

.nav_left::-webkit-scrollbar,

.nav_right::-webkit-scrollbar,

.nav-menu .drop-down:hover .nav_sub::-webkit-scrollbar {

  width: 5px;

  height: 5px;

}

.nav_left::-webkit-scrollbar-track,

.nav_right::-webkit-scrollbar-track,

.nav-menu .drop-down:hover .nav_sub::-webkit-scrollbar-track {

  background: #f1f1f1;

  border-radius: 3px;

}

.nav_left::-webkit-scrollbar-thumb,

.nav_right::-webkit-scrollbar-thumb,

.nav-menu .drop-down:hover .nav_sub::-webkit-scrollbar-thumb {

  background: var(--brand);

  border-radius: 2px;

}

/* ===== search ===== */

.searchWrap {

  display: none;

}

.seaBtn {

  cursor: pointer;

  margin-left: 15px;

}

.seaBtn span {

  font-size: 18px;

  color: #fff;

  transition: 0.3s;

}

@media (min-width: 993px) {

  .mobile-nav {

    display: none !important;

  }

  .mobile-nav-toggle {

    display: none !important;

  }

  .nav-menu .drop-down .nav_sub {

    display: block !important;

    opacity: 0;

    max-height: 0;

    transition: opacity 0.3s, max-height 0.3s;

  }

}

@media (max-width: 992px) {

  .nav-menu.d-none.d-lg-block {

    display: none !important;

  }

  .mobile-nav-toggle {

    display: block !important;

  }

}



.nav-menu .drop-down .nav_sub.news-sub {

    max-height: none !important;      

    overflow: visible !important;   

    width: 200%;  

     left: 50%;

    transform: translateX(-50%);

}



.nav-menu .drop-down .nav_sub.news-sub .container-fluid {

    min-height: auto !important;     

    display: block !important;   

}



.nav-menu .drop-down .nav_sub.news-sub ul {

    flex-direction: column !important; 

    gap: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

}



.nav-menu .drop-down .nav_sub.news-sub ul li {

    padding: 12px 24px;

    border-bottom: 1px solid #eee;

    width: 100%;

    list-style: none;

}



.nav-menu .drop-down .nav_sub.news-sub ul li a {

    display: block;

    color: #333;

    font-size: 15px;

    padding: 20px;

    text-decoration: none;

}



.nav-menu .drop-down .nav_sub.news-sub ul li a:hover {

    color: #0D5BC1;

}

.nav-menu .drop-down .nav_sub.news-sub ul li{ padding: 0;}

.news-down{ position: relative;}

.news-down ul li { padding: 0;}

.news-down ul li a{ padding: 20px;}



.news-down ul li a:hover {

    color: #0D5BC1 !important;

}

.news-down ul li a:hover {

    background: #f5f8fc;

}

/* =====mobile-nav ===== */

.mobile-nav {

  position: fixed;

  top: -100%;

  left: 0;

  right: 0;

  z-index: 995;

  overflow-y: auto;

  width: 100%;

  height: 100vh;

  background: #fff;

  transition: top 0.4s ease;

  padding: 0;

  margin: 0;

  list-style: none;

}

.mobile-nav a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  color: var(--fonttextcolor);

  font-size: var(--font16);

  padding: 2px 15px;

  line-height: 50px;

  font-weight: var(--fontbold5);

  border-bottom: 1px solid #A8A8A8;

  text-decoration: none;

}

.mobile-nav li {

  padding: 0 10px;

}

.mobile-nav a:hover,

.mobile-nav .active>a,

.mobile-nav li:hover>a {

  color: #000;

  text-decoration: none;

}

.mobile-nav-toggle {

  position: fixed;

  right: 15px;

  top: 9px;

  z-index: 998;

  border: 0;

  background: none;

  font-size: var(--font24);

  transition: all 0.4s;

  outline: none !important;

  line-height: 1;

  cursor: pointer;

  text-align: right;

  width: 42px;

  height: 42px;

  display: none;

}

.mobile-nav-toggle span {

  position: absolute;

  width: 40%;

  height: 2px;

  color: #333;

  background-color: #333;

  transition: all .3s;

  margin: auto;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}

.mobile-nav-toggle span::before,

.mobile-nav-toggle span::after {

  transition: all .3s;

  position: absolute;

  content: '';

  display: block;

  width: 100%;

  height: 2px;

  background-color: #333;

}

.mobile-nav-toggle span::before {

  top: 300%;

}

.mobile-nav-toggle span::after {

  bottom: 300%;

}

.mobile-nav-toggle.open span {

  background-color: unset;

}

.mobile-nav-toggle.open span::before {

  transform: rotate(45deg);

  top: 0;

}

.mobile-nav-toggle.open span::after {

  transform: rotate(-45deg);

  bottom: 0;

}

.mobile-nav-active {

  overflow: hidden;

}

.mobile-nav .category-item {

  border-bottom: 1px solid #eee;

}

.mobile-nav .category-item .cat-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0px 10px;

  background: #f7f9fc;

  font-weight: 500;

  font-size: 16px;

  color: #2c3e50;

  transition: background 0.2s;

  user-select: none;

  cursor: default;

}

.mobile-nav .category-item .cat-header .cat-link {

  color: #2c3e50;

  text-decoration: none;

  flex: 1;

}

.mobile-nav .category-item .cat-header .cat-link:hover {

  color: var(--brand);

}

.mobile-nav .category-item .cat-header .arrow-icon {

  font-size: 16px;

  color: #8a9bb5;

  transition: transform 0.3s;

  margin-left: 10px;

  cursor: pointer;

  background: #fff;

  border-radius: 4px;

}

.mobile-nav .category-item .cat-header .arrow-icon:hover {

  background: #e6eaef;

}

.mobile-nav .category-item .cat-header .arrow-icon.open {

  transform: rotate(180deg);

}

.mobile-nav .category-item .cat-header .see-all {

  display: none;

}

.mobile-nav .category-item .product-list {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-out;

  background: #fff;

  padding-left: 20px;

}

.mobile-nav .category-item .product-list.open {

  max-height: 1000px;

  transition: max-height 0.5s ease-in;

}

.mobile-nav .category-item .product-list li {

  padding: 0;

  border-bottom: 1px solid #f0f0f0;

  list-style: none;

}

.mobile-nav .category-item .product-list li a {

  display: block;

  padding: 12px 20px;

  font-size: 14px;

  color: #555;

  border-bottom: none;

  line-height: 1.4;

  font-weight: 400;

}

.mobile-nav .category-item .product-list li a:hover {

  color: var(--brand);

  background: #f9f9f9;

}

.mobile-products a {

  border-bottom: none;

}

.mobile-products i,.mobile-dropdown i {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  background: #f7f7f7;

}

.mobile-dropdown a{ border: none;}

.mobile-dropdown ul li{ border-bottom: 1px solid #eee;}

/* =====  ===== */

.demo-spacer {

  height: 200px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #999;

  font-size: 20px;

  background: #f0f2f5;

  margin-top: 120px;

}

/* header  */

#header.header-scrolled {

  background: #fff !important;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  position: fixed;

  top: 0;

}

#header.header-scrolled .change-language .change-language-title a:after {

  color: #333;

}

#header.header-scrolled .nav-menu>ul>li>a {

  color: #333 !important;

}

#header.header-scrolled .seaBtn span {

  color: #333 !important;

}

#header.header-scrolled .change-language .change-language-title a span {

  color: #333;

}

#header.header-scrolled .logo-tu1 {

  display: none;

}

#header.header-scrolled .logo-tu2 {

  display: block;

}

/* mobile search */



/*  */

.searchWrap {

  width: 100%;

  padding: 20px 0;

  background: #fff;

  position: absolute;

  top: 100%;

  left: 0;

  z-index: 999;

  -o-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  display: none;

}

.searchWrap .searchCont {

  display: flex;

  align-items: stretch;

  justify-content: center;

}

.searchWrap .searchCont input,

.searchWrap .searchCont button {

  border: 0;

}

.searchWrap .search {

  width: 70%;

  padding: 10px 15px;

  box-sizing: border-box;

  background: #f1f1f1;

  color: black;

  min-height: 36px;

}

.searchWrap .search.focusOn+label,

.searchWrap .search:focus+label {

  display: none;

}

.searchWrap .search.focusOn,

.searchWrap .search:focus {

  background: #F3F3F3;

}

.searchWrap .searchBtn {

  padding: 10px;

  background: var(--brand);

  color: #fff;

  outline: none;

  font-family: Arial, 'Microsoft YaHei', SimSun, Sans-serif;

  transition: 0.4s all ease;

  -moz-transition: 0.4s all ease;

  -webkit-transition: 0.4s all ease;

  -o-transition: 0.4s all ease;

  -ms-transition: 0.4s all ease;

}

.searchWrap .searchBtn:hover {

  color: #fff;

}

.searchWrap i {

  position: absolute;

  top: 7px;

  left: 20px;

  color: var(--color);

  font-size: var(--font16);

}

.searchWrap i:before {

  content: "\e618";

  font-family: icomoon, Arial, Helvetica, 'Microsoft YaHei', SimSun, Sans-serif;

}

.seaBtn {

  width: 40px;

  height: 30px;

  display: inline-block;

  line-height: 30px;

  text-align: center;

  color: #fff;

  font-size: var(--font17);

  vertical-align: middle;

  cursor: pointer;

  margin-left: 10px;

}

.seaBtn span {

  color: #fff

}

#header.header-scrolled {

  background: #fff;

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  z-index: 996;

  box-shadow: 0 0 10px #eee;

}

#header.header-scrolled .seaBtn span {

  color: #000;

}

#header.header-scrolled .nav-menu li a {

  color: #000;

}

#header.header-scrolled .nav ul li a:hover {

  color: var(--color);

}

#header.header-scrolled .nav ul li.active a {

  color: var(--color);

}

#header.header-scrolled .nav ul li.active li a {

  color: #000;

}

#header.header-scrolled .nav ul li ul li a:hover {

  color: #fff;

}

#header.header-scrolled .arrow-btn i {

  color: #fff;

}

#header.header-scrolled li.active .arrow-btn i {

  color: var(--color);

}

#header.header-scrolled .change-language .change-language-title,

#header.header-scrolled .change-language .change-language-title a {

  color: var(--fonttextcolor);

  font-size: var(--font18);

  font-weight: 500;

}

.change-language-title a span {

  font-size: var(--font18);

  color: #fff;

  padding-right: 10px;

}

.dflex_end {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

#header.header-transparent:hover .logo-tu1 {

  display: none;

}

#header.header-transparent:hover .logo-tu2 {

  display: block;

}

#header.header-scrolled .logo-tu1 {

  display: none;

}

#header.header-scrolled .logo-tu2 {

  display: block;

}

#header.header-scrolled .change-language .change-language-title,

#header.header-scrolled .change-language .change-language-title a {

  color: var(--fonttextcolor);

  font-size: var(--font16);

}

#header.header-scrolled .change-language-title a span {

  font-size: var(--font16);

  color: #000;

}

/* language */

.head_right {

  position: relative;

  margin-left: 25px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.prisna-wp-translate-seo {

  display: none;

  font-family: Arial, Helvetica, sans-serif

}

.change-language .prisna-wp-translate-seo,

.mobile-head-language .prisna-wp-translate-seo {

  display: block

}

.change-language .change-language-title,

.change-language .change-language-title a {

  font-size: var(--font16);

  color: var(--fonttextcolor);

  display: flex;

  align-items: center;

}

.change-language .change-language-title {

  padding: 0

}

.change-language .change-language-title a:after {

  font-family: fontawesome;

  content: "\f0d7";

  font-size: var(--font12);

  display: inline-block;

  color: #fff;

}

.change-language:hover .change-language-title a:after {

  -moz-transform: rotate(-180deg);

  -webkit-transform: rotate(-180deg);

  -ms-transform: rotate(-180deg);

  -o-transform: rotate(-180deg);

  transform: rotate(-180deg);

}

.change-language .change-language-cont {

  position: absolute;

  top: 100%;

  right: -20px;

  width: 120px;

  background: #fff;

  padding: 20px 10px 20px 20px;

  transform: scale3d(.9, .9, 1);

  opacity: 0;

  visibility: hidden;

  z-index: 999;

  -moz-transition: all .2s ease-in-out;

  -webkit-transition: all .2s ease-in-out;

  -ms-transition: all .2s ease-in-out;

  -o-transition: all .2s ease-in-out;

  transition: all .2s ease-in-out;

  border: 1px solid #eee;

  border-radius: 5px;

  overflow-y: scroll;

  max-height: 80vh

}

.change-language:hover .change-language-cont {

  transform: scale3d(1, 1, 1);

  opacity: 1;

  visibility: visible

}

.change-language .change-language-cont .lang-item-hide {

  display: none !important

}

.change-language .change-language-cont .lang-more {

  position: relative;

  display: block;

  text-align: center;

  cursor: pointer;

  line-height: 30px

}

.change-language .change-language-cont .more-active {

  font-size: var(--font20)

}

.language-flag span {

  position: relative;

  display: inline-block;

  vertical-align: top;

  white-space: nowrap;

  overflow: hidden

}

.change-language ::-webkit-scrollbar {

  width: 5px

}

.change-language ::-webkit-scrollbar-track {

  background-color: #fff

}

.change-language ::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, .3);

  border-radius: 3px

}

.change-language .language-cont:hover::-webkit-scrollbar-thumb {

  display: block

}

.country-flag {

  position: relative;

  display: inline-block;

  vertical-align: middle;

  margin-right: 8px;

}

.country-flag img {

  width: 20px;

  object-fit: cover;

  border-radius: 2px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  transition: transform 0.2s ease;

}

.language-flag .country-flag img {

  width: 24px;

  height: 18px;

  object-fit: cover;

  border-radius: 2px;

}

li.language-flag a:hover .country-flag img {

  transform: scale(1.05);

}

.change-language .change-language-cont {

  right: -15px;

  width: 200px;

  padding: 15px;

}

.change-language .change-language-cont li {

  width: 100%;

  margin: 0 2% 10px;

  padding: 5px;

  border-radius: 4px;

  transition: background 0.2s ease;

}

.change-language .change-language-cont li:hover {

  background: #f8f8f8;

}

.change-language .change-language-cont li a {

  display: flex;

}

.change-language .change-language-cont li a:hover span {

  color: var(--color);

}

.mobile-head-item .main-content-wrap .content-wrap a:hover span {

  color: var(--color);

}

#header.header-scrolled .change-language .change-language-title a:after {

  color: #333;

}

#header.header-scrolled .header_top {

  display: none;

}

/*banner*/

#banner .swiper {

  width: 100%;

  height: 100%;

  position: relative;

}

#banner .swiper-slide {

  background-position: center;

  background-size: cover;

  position: relative;

}

#banner .swiper-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

#banner .pc_banner {

  display: block;

}

#banner .mob_banner {

  display: none;

}

#banner .swiper-button {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  text-align: center;

  color: #fff;

  background: rgba(0, 0, 0, 0.3);

  border-radius: 50%;

  cursor: pointer;

  overflow: hidden;

  z-index: 999;

  width: 56px;

  font-size: 30px;

  line-height: 56px;

  height: 56px;

  transition: all .5s ease;

  outline: none;

}

#banner .swiper-button:hover {

  background: #F8931D;

}

.btn-prev {

  left: 30px;

}

.btn-next {

  right: 30px;

}

#banner .swiper-pagination-bullet {

  width: 5vw;

  height: 2px;

  border-radius: 1.04167vw;

  display: inline-block;

  background: #fff;

  opacity: .9;

  margin: 0 .6vw;

  transition: opacity .5s, background-color .5s, width .5s;

  transition-delay: .5s, .5s, 0s;

}

#banner .swiper-pagination-bullet-active {

  opacity: 1;

  background: var(--brand);

  width: 10vw;

  transition-delay: 0s;

}

#banner .swiper-container-horizontal>.swiper-pagination-bullets,

.swiper-pagination-custom,

.swiper-pagination-fraction {

  bottom: 80px;

  left: 0;

  right: 0;

  width: 100%;

}

.banner_txt {

  position: absolute;

  top: 0%;

  width: 100%;

  height: 100%;

  justify-content: center;

  align-items: flex-start;

  flex-direction: column;

  display: flex;

  left: 0;

  right: 0;

  margin: 0 auto;

  z-index: 10;

  color: #333;

  text-align: left;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);

}

.banner_txt p {

  font-size: 30px;

  color: rgba(255, 255, 255, 0.7);

  text-shadow: none;

}

.banner_txt b {

  display: block;

  font-size: 52px;

  line-height: 1.1;

  color: #fff;

  margin: 30px 0;

  text-shadow: none;

  font-weight: normal;

}

.banner_txt span {

  color: #fff;

  font-size: 24px;

  display: block;

  text-shadow: none;

}

.banner_txt .banner-box {

  align-items: center;

  display: flex;

  justify-content: space-between;

}

.banner_more {

  margin-top: 30px;

}

.banner-fl {

  width: 50%;

}

.banner-tu {

  width: 40%;

}

.banner_more span {

  width: 100%;

  display: flex;

  font-size: 16px;

}

/*  */

.pad_100 {

  padding: 100px 0;

}

.flex-between {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.main_title {

  width: 70%;

}

.main_title p.desc {

  color: #9ca3af;

  width: 100%;

  text-align: left; font-size: 18px; font-weight: normal;

}

.main_title h1.desc {

  color: #9ca3af;

  width: 100%;

  text-align: left; font-size: 18px; font-weight: normal;

}

.desc {

  color: #9ca3af;

  width: 30%;

  text-align: right;

}

.main_title .tit-b {

  color: var(--brand);

  font-size: var(--font60);

  line-height: 1.1;

  padding-bottom: 10px;

  position: relative;

  font-weight: 600;

  margin-bottom: 20px;

}

.main_title .tit-b::before {

  content: ' ';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 40px;

  height: 3px;

  background: var(--brand);

  margin-top: 12px;

  border-radius: 2px;

}

.main_title .small-tit {

  font-size: var(--font42);

  color: #333;

}

.main_title p {

  color: #333;

  font-size: var(--font18);

}

.main_title .more {

  width: 160px;

  height: 52px;

  line-height: 52px;

  text-align: center;

  border: 2px solid #000028;

  margin-top: 40px;

  transition: all .3s;

  border-radius: 3px;

}

.main_title .more a {

  display: block;

  width: 100%;

}

.main_title .more:hover {

  border: 2px solid #0066B3;

  background: var(--brand);

  color: #fff;

}

.main_title .more:hover a {

  color: #fff;

}

.about {

  position: relative;

  z-index: 2;

  border-radius: 50px 050px 0 0;

  background: #f7f9fd;

  margin-top: -50px;

}

.about_fr .more {

  width: 160px;

  height: 52px;

  line-height: 52px;

  text-align: center;

  border: 2px solid #000028;

  margin-top: 40px;

  transition: all .3s;

  border-radius: 3px;

}

.about_fr .more a {

  display: block;

  width: 100%;

}

.about_fr .more:hover {

  border: 2px solid #0066B3;

  background: var(--brand);

  color: #fff;

}

.about_fr .more:hover a {

  color: #fff;

}

.ab_bottom {

  transition: opacity .3s .6s, visibility 0s .6s, margin-top 0s .6s;

}

.img_title {

  overflow: hidden;

  position: relative;

}

.img_title img {

  overflow: hidden;

  width: 100%;

  transform: translateY(-100px);

}

.ab_bottom ul {

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

}

.ab_bottom b {

  font-size: 38px;

  color: #333;

  font-weight: normal;

  display: block;

}

.ab_bottom .ab_num {

  display: flex;

  justify-content: flex-end;

  align-items: center;

}

.ab_bottom li>div {

  width: 100%;

}

.ab_bottom li span {

  font-size: 50px;

  color: #666;

  width: 30%;

}

.ab_bottom li {

  text-decoration: none;

  position: relative;

  display: block;

  transition: all .3s;

  width: 100%;

  padding: 20px 0;

  display: flex;

  cursor: pointer;

  align-items: center;

}

.ab_bottom li:last-child a {

  border-right: none;

}

.ab_bottom li i {

  font-size: 16px;

  color: #333;

  padding-left: 6px;

  padding-bottom: 10px;

}

.ab_bottom li p {

  color: #333;

  font-size: 20px;

  line-height: 28px;

  margin-bottom: 10px;

  text-align: right;

}

.Promo-ctaLink {

  background: var(--brand);

}

.primary-button {

  position: relative;

  display: inline-block;

  padding: 0;

  background:#09A398;

  border-radius: 10px;

  text-decoration: none;

  cursor: pointer;

  border: none;

  outline: none;

  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

  overflow: hidden;

  margin-top: 20px;

}

.primary-button:hover {

  background: #1a3a5c;

}

.btn-content {

  display: flex;

  align-items: center;

  padding: 12px 25px;

  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  transform: translateX(0);

  will-change: transform;

}

.btn-arrow {

  display: inline-block;

  width: 24px;

  height: 24px;

  flex-shrink: 0;

  fill: none;

  stroke: #ffffff;

  stroke-width: 2.5;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: none;

}

.primary-button:hover .btn-arrow {

  animation: arrowSlide 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}

@keyframes arrowSlide {

  0% {

    transform: translateX(0) scale(1);

    opacity: 1;

  }

  25% {

    transform: translateX(30px) scale(0.8);

    opacity: 0;

  }

  40% {

    transform: translateX(-40px) scale(0.6);

    opacity: 0;

  }

  60% {

    transform: translateX(-10px) scale(1.1);

    opacity: 1;

  }

  100% {

    transform: translateX(0) scale(1);

    opacity: 1;

  }

}

.btn-text {

  font-size: 14px;

  color: #ffffff;

  white-space: nowrap;

  margin-left: 12px;

  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.primary-button:hover .btn-text {

  transform: translateX(0);

}

.pulse-ring {

  position: absolute;

  top: -4px;

  left: -4px;

  right: -4px;

  bottom: -4px;

  border-radius: 44px;

  border: 1.5px solid rgba(255, 255, 255, 0);

  pointer-events: none;

  transition: all 0.5s ease;

  z-index: 0;

}

.primary-button:hover .pulse-ring {

  border-color: rgba(255, 255, 255, 0.15);

  animation: pulseRing 1.8s ease-out infinite;

}

@keyframes pulseRing {

  0% {

    transform: scale(1);

    opacity: 1;

  }

  100% {

    transform: scale(1.12);

    opacity: 0;

  }

}

/*about us */

.about {

  position: relative;

}

.about-box {

  display: flex;

  align-items: stretch;

  justify-content: space-between;

}

.about-box .about_fl {

  width: 60%;

  position: relative;

}

.about-box .about_fl .tit-box {

  position: sticky;

  position: -webkit-sticky;

  z-index: 9;

  top: 80px;

  width: 100%;

}

.about-box .about_fr {

  width: 20%;

}

.about-box .tit-info {

  line-height: 32px;

  color: #333;

}

.about-box .tit-info p {

  margin-bottom: 20px;

  font-size: var(--font18);

  color: #666;

}

.ab_bottom li {

  display: flex;

  margin: 15px 0;

  flex-direction: column;

}

.ab_bottom li a {

  display: block;

  text-decoration: none;

  position: relative;

  transition: all .3s;

}

.ab_bottom .ab_num {

  display: flex;

  align-items: center;

  margin-bottom: 20px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.ab_bottom li b {

  color: var(--brand);

  font-size: var(--font60);

  display: block;

  margin-bottom: 8px

}

.ab_bottom li .ab_num span {

  display: block;

  padding-left: 7px;

  font-size: 20px;

}

.ab_bottom li:hover {

  background-color: hsla(0, 0%, 100%, 0);

  text-decoration: none;

  border-color: transparent !important

}

.ab_bottom li:hover p {

  color: #333;

}

.ab_bottom li img {

  margin-right: 30px;

}

.gctu {

  border-radius: 10px;

  margin-top: 40px;

}

.gctu img {

  border-radius: 10px;

  width: 100%;

}

.gctu div {

  width: 100%;

  border-radius: 10px;

  overflow: hidden;

}

@media (max-width: 990px) {

  .gctu img {

    height: 100%;

    object-fit: cover;

    transform: translateY(0);

  }

}

/* 产品 */

.product-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-top: 50px;

}

/* ========== Product Card ========== */

.product-card {

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  padding: 36px 24px 32px;

  text-align: center;

  cursor: pointer;

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

  position: relative;

  overflow: hidden;

}

.product-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: var(--brand);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s ease;

}

.product-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 20px 40px rgba(12, 45, 87, 0.1);

  border-color: transparent;

}

.product-card:hover::before {

  transform: scaleX(1);

}

/* Card Number */

.card-number {

  position: absolute;

  top: 12px;

  right: 16px;

  font-size: 12px;

  font-weight: 700;

  color: var(--text-light-gray);

  opacity: 0.4;

}

/* Icon Container */

.icon-container {

  width: 72px;

  height: 72px;

  margin: 0 auto 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);

  border-radius: 16px;

  transition: background 0.3s ease, transform 0.3s ease;

}

.product-card:hover .icon-container {

  background: linear-gradient(135deg, #a2d0f5 0%, #b6dcfc 100%);

  transform: scale(1.08);

}

.icon-container svg {

  width: 50px;

  height: 50px;

  transition: transform 0.3s ease;

}

.product-card:hover .icon-container svg {

  transform: scale(1.05);

}

/* Card Title */

.card-title {

  font-size: 18px;

  font-weight: 500;

  color: #333;

  line-height: 1.3;

  margin-bottom: 8px;

  transition: color 0.2s;

}

.product-card:hover .card-title {

  color: var(--brand);

}

/* Card Arrow */

.card-arrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: #f7f7f7;

  margin-top: 8px;

  opacity: 0;

  transform: translateX(-8px);

  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;

}

.product-card:hover .card-arrow {

  opacity: 1;

  transform: translateX(0);

  background: #f7f7f7;

}

.card-arrow svg {

  width: 16px;

  height: 16px;

}

/* ========== Responsive ========== */

@media (max-width: 1024px) {

  .product-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

  }

  .page-title {

    font-size: 40px;

  }

}

@media (max-width: 768px) {

  .product-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

  }

  .page-title {

    font-size: 32px;

  }

  .page-header {

    padding: 48px 0 32px;

  }

  .product-card {

    padding: 28px 18px 24px;

  }

  .icon-container {

    width: 60px;

    height: 60px;

    border-radius: 14px;

  }

  .icon-container svg {

    width: 30px;

    height: 30px;

  }

}

@media (max-width: 480px) {

  .product-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

  }

  .page-title {

    font-size: 26px;

  }

  .card-title {

    font-size: 13px;

  }

  .product-card {

    padding: 22px 14px 20px;

  }

  .icon-container {

    width: 52px;

    height: 52px;

    border-radius: 12px;

  }

  .icon-container svg {

    width: 26px;

    height: 26px;

  }

}

.hot-box .container-fluid {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.pro-swiperbg {

  background: #f7f9fd;

}

#pro-swiper .swiper-container {

  margin-top: 40px;

}

#pro-swiper .swiper-slide img {

  display: block;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

}

#pro-swiper .swiper-slide {

  text-align: center;

  border: 1px solid #fff;

  transition: all .3s;

  position: relative;

  background: #ffffff;

  border-radius: 20px;

  border: 1px solid #dedede;

  padding: 0 15px 30px 15px;

  box-sizing: border-box;

  transition: .5s;

  margin-bottom: 40px;

}

#pro-swiper .swiper-slide a p {

  position: relative;

  z-index: 2;

  color: #333;

}

#pro-swiper .swiper-slide a b {

  font-size: var(--fontsize24);

  color: #000;

  font-weight: normal;

  position: relative;

  z-index: 2;

}

#pro-swiper .swiper-slide a .top {

  padding: 20px;

  position: relative;

  border-top-left-radius: 30px;

  border-top-right-radius: 30px;

  overflow: hidden;

}

#pro-swiper .swiper-slide a .top::before {

  height: 100%;

  transition: all .3s;

  content: '';

  background: #F2F3F5;

  width: 100%;

  position: absolute;

  left: 0;

  top: 0

}

#pro-swiper .swiper-slide a a:hover .top::before {

  background: #F2F3F5;

  height: 100%;

  z-index: 1;

}

#pro-swiper .swiper-slide a .imgBox {

  height: 24 0px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 20px;

}

#pro-swiper .swiper-slide a .imgBox img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  transition: .4s;

}

#pro-swiper .swiper-slide a .more {

  width: 45px;

  position: absolute;

  bottom: -30px;

  background: #F2F3F5;

  left: 0;

  right: 0;

  margin: auto;

  height: 45px;

  border-radius: 45px;

  margin: auto;

  color: #333;

  transition: .5s;

  line-height: 45px;

  margin-top: 20px;

  font-weight: normal;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 40px;

}

#pro-swiper .swiper-slide a:hover {

  border: 1px solid #7A7A7A;

  box-shadow: 0 0 10px #ddd;

}

#pro-swiper .swiper-slide a:hover b {

  color: #fff;

}

#pro-swiper .swiper-slide a:hover .more {

  background: #1E3C64;

  color: #fff;

}

#pro-swiper .swiper-slide a:hover .imgBox img {

  transform: scale(1.07);

}

#pro-swiper .swiper-slide a:hover .top::before {

  background: var(--brand);

}

#pro-swiper .swiper-slide a span {

  color: #666666;

  text-align: left;

}

#pro-swiper .swiper-button-next {

  position: absolute;

  top: 46%;

  text-align: center;

  color: #333;

  width: 40px;

  line-height: 40px;

  height: 40px;

  background: #fff;

  border-radius: 50%;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  cursor: pointer;

  overflow: hidden;

  z-index: 999;

  transition: all .5s ease;

  outline: none;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  right: 10px;

}

#pro-swiper .swiper-button-prev {

  position: absolute;

  top: 46%;

  text-align: center;

  color: #333;

  left: 10px;

  line-height: 40px;

  width: 40px;

  height: 40px;

  background: #fff;

  border-radius: 50%;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  cursor: pointer;

  overflow: hidden;

  z-index: 999;

  transition: all .5s ease;

  outline: none;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

#pro-swiper .swiper-button-prev:hover,

#pro-swiper .swiper-button-next:hover {

  color: #fff;

  background: var(--brand);

}

/* advantage */

.culture {

  width: 100%;

  display: flex;

  align-items: stretch;

  justify-content: space-between;

}

.culture .swiper-num {

  position: absolute;

  bottom: 28%;

  left: -13%;

  color: #333;

  font-size: 26px;

  z-index: 9;

}

.culture .swiper-num .active {

  color: #333;

  padding-right: 4px;

  font-size: 40px;

  font-weight: bold;

}

#cul_top {

  width: 50%;

  margin: 0;

}

#cul_top .swiper-slide {

  position: relative;

}

#cul_top .swiper-slide .bg {

  position: relative;

  width: 100%;

  height: 100%;

}

#cul_top .swiper-slide .bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

#cul_top .swiper-slide a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: #333;

}

#cul_top .swiper-slide .info {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  flex-direction: column;

  justify-content: flex-start;

  z-index: 999;

}

#cul_top .swiper-slide .info p {

  padding: 50px;

  font-size: 24px;

  line-height: 1.6;

  color: #666;

}

.culture {

  margin-top: 50px;

}

.culture img {

  width: 100%;

}

.culture .swiper-button-prev {

  left: 50px;

  top: 50%;

}

.culture .swiper-button-next {

  right: 34%;

  top: 50%;

}

.culture .swiper-button-next,

.culture .swiper-button-prev {

  background: none;

  outline: none;

  color: #000;

  font-size: 30px;

  border-radius: 25px;

  width: 50px;

  height: 50px;

  text-align: center;

  line-height: 50px;

  background: #fff;

}

#cul_bot {

  position: relative;

  padding: 0 30px;

  width: 50%;

}

.culture .swiper-container-thumbs {

  position: relative;

}

#cul_bot .swiper-wrapper {

  flex-wrap: wrap;

}

.culture .swiper-container-thumbs .swiper-slide span {

  position: relative;

  z-index: 1;

}

.culture .swiper-container-thumbs .swiper-slide {

  cursor: pointer;

  color: #333;

  position: relative;

  overflow: hidden;

  width: 100% !important;

  height: auto;

  margin-bottom: 15px;

  transition: all 0.8s;

  padding: 30px;

  background: rgba(255, 255, 255, .5);

  backdrop-filter: blur(10px);

}

.culture .swiper-container-thumbs .swiper-slide:last-child {

  margin-bottom: 0;

}

.culture .swiper-container-thumbs .swiper-slide p {

  font-size: 16px;

  z-index: 2;

  display: none;

  margin-top: 15px;

  transition: all .2s;

  border-top: 1px solid #dedede;

  padding-top: 15px;

}

.culture .swiper-container-thumbs .swiper-slide .ico {

  position: relative;

  font-size: 22px;

  color: #333;

  font-weight: 600;

}

.culture .swiper-container-thumbs .swiper-slide-thumb-active {

  background: var(--brand);

  color: #fff;

}

.culture .swiper-container-thumbs .swiper-slide-thumb-active p {

  display: block;

}

.culture .swiper-container-thumbs .swiper-slide-thumb-active .ico,

.culture .swiper-container-thumbs .swiper-slide-thumb-active p {

  color: #fff;

}

/* customers */

.page-wrapper {

  background: var(--brand);

  background: url(../../images/bg1.jpg) no-repeat center;

  background-size: cover;

}

.page-wrapper-box {

  display: flex;

  justify-content: space-between;

}

/* ========== Left Section ========== */

.left-section {

  position: relative;

  width: 35%;

}

.left-section .left-box {

  position: sticky;

  position: -webkit-sticky;

  z-index: 9;

  top: 80px;

  width: 100%;

}

.right-section {

  width: 60%;

}

.solu_list ul li {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  border: 1px solid #eaeaea;

  border-radius: 15px;

  background: rgba(255, 255, 255, .7);

  backdrop-filter: blur(10px);

  padding: 40px 30px;

  margin-bottom: 30px;

  position: sticky;

  position: -webkit-sticky;

  transform-origin: top center;

}

.solu_list ul li:nth-child(1) {

  top: 80px;

}

.solu_list ul li:nth-child(2) {

  top: 100px;

}

.solu_list ul li:nth-child(3) {

  top: 120px;

}

.solu_list ul li:nth-child(4) {

  top: 140px;

}

.solu_list ul li:nth-child(5) {

  top: 160px;

}

.solu_list ul li:nth-child(6) {

  top: 180px;

}

.solu_list ul li:nth-child(7) {

  top: 200px;

}

.solu_list ul li:nth-child(8) {

  top: 220px;

}

@media (max-width: 991px) {

  .solu_list ul li {

    top: initial;

  }

}

.solu_list ul li:last-child {

  margin-bottom: 0;

}

.boxs {

  position: relative;

}

.boxs::before {

  content: '’’';

  position: absolute;

  right: -20px;

  top: -20px;

  font-size: var(--font60);

  color: rgba(0, 0, 0, 0.3);

}

.boxs .tbox .txt {

  line-height: 28px;

  color: #666;

  font-size: 16px;

  position: relative;

}

.boxs .tbox .people {

  margin-top: 20px;

  display: flex;

  align-items: center;

}

.boxs .tbox .people .ts .t1 {

  color: #333;

}

.boxs .tbox .people .ts .t2 {

  color: #bebdbd;

  font-size: 16px;

}

/* Solution Process */

.processbg {

  background: #f7f9fd;

}

.product_swiper {

  width: 100%;

  margin-top: 50px;

  padding-bottom: 50px;

}

.product_swiper .swiper-wrapper {

  align-items: stretch;

}

.product_swiper .swiper-slide {

  position: relative;

  height: auto;

  background: #fff;

}

.product_swiper .swiper-slide .info b {

  font-size: var(--font50);

  color: #eee;

}

.product_swiper .swiper-slide .info {

  height: 100%;

  font-size: 20px;

  border: 1px solid #dedede;

  border-radius: 10px;

  padding: 30px;

}

.product_swiper .swiper-slide .info:hover {

  border-color: var(--brand);

}

.product_swiper .swiper-pagination-progressbar {

  background: none;

  position: absolute;

  bottom: 0;

  border-bottom: 1px solid #dedede;

}

.product_swiper.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

  background: #a6b186;

  position: absolute;

  left: 0;

  top: calc(100% - 1px);

  width: 100%;

  height: 1px;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

  -webkit-transform-origin: left top;

  -ms-transform-origin: left top;

  transform-origin: left top;

}

.product_swiper .swiper-container-horizontal>.swiper-pagination-progressbar {

  width: 100%;

  height: 14px;

  left: 0;

}

.product_swiper .swiper-pagination-progressbar {

  height: 2px;

  top: calc(100% - 15px)

}

.product_swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

  background: var(--brand);

}

.product_swiper .swiper-button-prev {

  left: 0px;

}

.product_swiper .swiper-button-next {

  right: 0px;

}

.product_swiper .swiper-button-next,

.product_swiper .swiper-button-prev {

  background: none;

  outline: none;

  color: #000;

  font-size: 20px;

  border-radius: 20px;

  width: 40px;

  height: 40px;

  text-align: center;

  line-height: 40px;

  background: #fff;

  box-shadow: 0 0 10px #eee;

  top: 40%;

}

.product_swiper .swiper-button-next:hover,

.product_swiper .swiper-button-prev:hover {

  color: #fff;

  background: var(--brand);

}

/* news */

.news-box {

  display: flex;

  justify-content: space-between;

}

.news-box .news-fl {

  width: 35%;

  position: relative;

}

.news-box .news-fl .news-fl-box {

  position: sticky;

  position: -webkit-sticky;

  z-index: 9;

  top: 80px;

  width: 100%;

}

.news-list {

  display: flex;

  flex-direction: column;

  width: 60%;

}

.news-item {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 32px;

  padding: 32px 0;

  border-bottom: 1px solid #eeeded;

  position: relative;

}

.news-item:first-child {

  border-top: 1px solid #eeeded;

}

.news-item::before {

  content: '';

  transition: all .3s;

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 1px;

  background: var(--brand);

}

.news-item:hover::before {

  width: 100%

}

.news-date {

  text-align: center;

  padding-top: 4px;

}

.news-date-day {

  font-size: 28px;

  font-weight: 800;

  color: #9ca3af;

  line-height: 1.1;

}

.news-date-month-year {

  font-size: 12px;

  font-weight: 600;

  color: #9ca3af;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-top: 4px;

}

.news-date::before,

.news-date::after {

  content: '';

  display: block;

  width: 20px;

  height: 1px;

  background: #e9ecf3;

  margin: 8px auto;

}

.news-item-content {}

.news-item-title {

  font-size: 18px;

  font-weight: 700;

  color: #333;

  line-height: 1.4;

  margin-bottom: 10px;

}

.news-item-content a:hover .news-item-title {

  color: var(--brand);

  cursor: pointer;

}

.news-item-summary {

  font-size: 14px;

  color: #999;

  line-height: 1.7;

  margin-bottom: 16px;

}

.news-item-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.news-read-more {

  font-size: 12px;

  color: #999;

  letter-spacing: 1px;

  text-transform: uppercase;

  cursor: pointer;

  transition: color 0.2s;

}

.news-item-content a:hover .news-read-more {

  color: var(--brand);

}

.news-bottom {

  text-align: center;

  margin-top: 40px;

}

/*  */

.fot-act-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.fot-cat {

  background: #f7f9fd;

  border-radius: 50px;

  position: relative;

  z-index: 2;

  background: url(../../images/bg2.jpg)no-repeat;

  background-size: cover;

}

.fot-act-box .main_title {

  text-align: center;

}

.fot-act-box .main_title p.desc {

  text-align: center;

}

.fot-act-box .main_title .tit-b::before {

  margin: 0 auto;

  right: 0;

}

/**/

.fix-side {

  position: fixed;

  right: 20px;

  bottom: 50px;

  width: 42px;

  z-index: 999;

}

.fix-side li {

  width: 42px;

  height: 42px;

  border-radius: 100%;

  border: 1px solid #dedede;

  background-color: #fff;

}

.fix-side li:hover {

  background-color: #0066B3;

}

.fix-side li:hover span {

  color: #fff;

}

.fix-side p {

  margin-top: 10px;

  color: #fff;

}

.fix-side li a {

  display: block;

  text-align: center;

  width: 100%;

  height: 100%;

  color: #fff;

}

.fix-side .return {

  border-bottom: none;

  transform: scaleY(0);

  transition: 0.5s;

  background-color: #fff;

  border-radius: 100%;

  color: #333;

}

.fix-side .return span {

  color: #333;

  line-height: 40px;

  font-size: 24px;

}

.fix-side .active {

  transform: scale(1);

}

/*footer*/

.footer-main {

  margin-top: -50px;

  padding-bottom: 50px;

  background: #1E3C64;

  border-top: 1px solid #dedede;

  position: relative;

  z-index: 1;

  padding-top: 50px;

}

.footer-list2 {

  flex: 1;

}

.footer-list3 {

  width: 10%;

  padding-right: 2%;

}

.footer-list4 {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}

.footer-list3 .con_info a:hover {

  color: var(--color);

}

.footer-list1 p i,

.footer-list2 p i {

  padding-right: 6px;

}

.footer-list2 span,

.footer-list3 span {

  color: #fff;

  font-size: var(--font20);

  margin-bottom: 10px;

  margin-top: 0;

  display: block;

}

.footer-list1 span {

  color: #fff;

}

.footer-list1 p,

.footer-list2 p,

.footer-list3 p {

  font-size: var(--font16);

  line-height: 1.8;

}

.footer-list1 p a,

.footer-list2 p a {

  color: rgba(255, 255, 255, 0.7);

  font-weight: 300;

}

.footer-list1 p a:hover,

.footer-list2 p a:hover,

.footer-list3 p a:hover {

  color: #fff;

  text-decoration: underline;

}

.footer-list2 .contact p {

  color: rgba(255, 255, 255, 0.7);

  font-size: var(--font20);

  display: block;

  font-weight: 300;

}

.footer-list1 img {

  width: 70%;

}

.footer-list1 b {

  font-weight: normal;

  display: block;

  font-size: var(--font24);

  font-family: fontfallbackblod;

}

.address-content {

  display: inline-block;

  position: relative;

  text-align: left;

  width: 100%;

}

.address-content span {

  color: #333;

  font-size: var(--font20);

  position: absolute;

  left: 0px;

  top: 5px;

  display: inline-block;

  width: 30px;

  height: 37px;

  line-height: 37px;

  text-align: center;

}

.address-content i {

  font-size: var(--font16);

  color: #333;

  font-style: normal;

  font-weight: 500;

  margin-bottom: 5px;

}

.address-content p {

  color: #333;

  font-size: var(--font18);

}

.footer-copyright {

  padding: 35px 0;

  border-top: 1px solid rgba(255, 255, 255, .1);

}

.footer-copyright p {

  color: #fff;

  font-size: var(--font14);

  text-align: center;

  letter-spacing: 1.1px;

  margin-bottom: 0;

}

.footer-copyright p span {

  padding-left: 15px;

}

.footer-copyright p a {

  color: #fff

}

.main_box a:hover {

  color: #0066B3;

}

.footer-list2 .get span {

  margin-bottom: 0;

}

.main_box {

  display: flex;

  justify-content: space-between;

  color: rgba(255, 255, 255, .5);

}

.main_box p a {

  color: rgba(255, 255, 255, .5);

}

.fot_top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.fot_bot {

  padding: 80px 0;

  display: flex;

  align-items: stretch;

}

.fot-box {

  display: flex;

  justify-content: space-between;

}

/*  contact*/





.contact-form-wrapper {

  width: 100%;

  margin: 50px auto;

  padding: calc(var(--font30) * 1.2) var(--font24);

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

  font-family: inherit;

}





.contact-form-wrapper .section-title {

  font-size: var(--font36);

  font-weight: var(--fontbold7);

  color: var(--fontcolor);

  text-align: left;

  margin-bottom: 20px;

  letter-spacing: -0.02em;

}





.contact-form-wrapper .form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--font18);

  margin-bottom: var(--font18);

}





.contact-form-wrapper .form-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

}





.contact-form-wrapper .form-label {

  font-size: var(--font14);

  font-weight: var(--fontbold6);

  color: var(--fonttextcolor);

}



.contact-form-wrapper .required {

  color: #ef4444;

  margin-left: 2px;

}





.contact-form-wrapper .form-input,

.contact-form-wrapper .form-textarea,

.contact-form-wrapper .form-inputt {

  width: 100%;

  padding: 12px 16px;

  font-size: var(--font16);

  font-weight: var(--fontbold4);

  color: var(--fontcolor);

  background-color: #f8fafc;    

  border: 1.5px solid #e2e8f0;

  border-radius: 8px;

  transition: border-color 0.25s, box-shadow 0.25s;

  outline: none;

  box-sizing: border-box;

}



.contact-form-wrapper .form-input::placeholder,

.contact-form-wrapper .form-textarea::placeholder,

.contact-form-wrapper .form-inputt::placeholder {

  color: #94a3b8;

}



.contact-form-wrapper .form-input:focus,

.contact-form-wrapper .form-textarea:focus,

.contact-form-wrapper .form-inputt:focus {

  border-color: var(--brand);

  box-shadow: 0 0 0 3px rgba(45, 125, 190, 0.15);

  background-color: #ffffff;

}



.contact-form-wrapper .form-textarea {

  min-height: 120px;

  resize: vertical;

}





.contact-form-wrapper .form-group:has(.form-inputt) {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: var(--font16);

  flex-wrap: wrap;

  margin-bottom: var(--font20);

}



.contact-form-wrapper .form-group:has(.form-inputt) .form-inputt {

  flex: 0 0 140px;

  width: 140px;

}



.contact-form-wrapper .form-group:has(.form-inputt) img {

  height: 44px;

  border-radius: 8px;

  border: 1px solid #e2e8f0;

  cursor: pointer;

  transition: opacity 0.2s;

}



.contact-form-wrapper .form-group:has(.form-inputt) img:hover {

  opacity: 0.7;

}





.contact-form-wrapper .btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: var(--font12);

  width: auto;

  margin: 10px auto;

  padding: 14px 28px;

  font-size: var(--font18);

  font-weight: var(--fontbold6);

  font-family: inherit;

  color: #ffffff;

  background-color: var(--brand);

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: background-color 0.25s, transform 0.2s, box-shadow 0.25s;

  box-shadow: 0 2px 8px rgba(45, 125, 190, 0.25);

}

.contact-form-wrapper .form-group{ margin-bottom: 10px;}

.contact-form-wrapper .btn:hover {

  background-color: #1E3C64;  

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(45, 125, 190, 0.35);

}



.contact-form-wrapper .btn:active {

  transform: translateY(0);

}



.contact-form-wrapper .btn svg {

  flex-shrink: 0;

  transition: transform 0.25s;

}



.contact-form-wrapper .btn:hover svg {

  transform: translateX(4px);

}





.contact-form-wrapper .form-group + p {

  font-size: var(--font12);

  color: var(--fonttextcolor);

  margin-top: var(--font18);

  text-align: center;

  line-height: 1.6;

  max-width: 90%;

  margin-left: auto;

  margin-right: auto;

  opacity: 0.8;

}





@media (max-width: 640px) {

  .contact-form-wrapper {

    padding: var(--font20);

  }

.contact-form-wrapper{ margin-top: 0;}

  .contact-form-wrapper .form-row {

    grid-template-columns: 1fr;

    gap: var(--font14);

  }



  .contact-form-wrapper .section-title {

    font-size: var(--font28);

  }



  .contact-form-wrapper .btn {

    padding: 12px 20px;

    font-size: var(--font16);

  }





  .contact-form-wrapper .form-group:has(.form-inputt) .form-inputt {

    flex: none;

    width: 100%;

  }

}