/* top-info-1 */
.top-info-1{
  height: 40px;
  width: 100%;
  background-color: #333333;
}
.top-info-1-inner{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
.top-info-1-left{
  float: left;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--decoration-text-color);
  letter-spacing: 0px;
}
.top-info-1-right{
  float: right;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--decoration-text-color);
  letter-spacing: 0px;
}
.top-info-1-right a{
  height: 40px;
  float: right;
  font-size: 12px;
  color: var(--decoration-text-color);
  margin-left: 12px;
}

/* top-info-2 */
.top-info-2{
  height: 40px;
  width: 100%;
  background-color: var(--decoration-bg-color);
}
.top-info-2-inner{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
.top-info-2-left{
  float: left;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
}
.top-info-2-left a{
  height: 40px;
  font-size: 12px;
  color: var(--primary-text-color);
  margin-right: 12px;
}
.top-info-2-right a{
  height: 40px;
  font-size: 12px;
  color: var(--primary-text-color);
}
.top-info-2-right{
  float: right;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
}

/* top-info-3 */
.top-info-3{
  height: 80px;
  width: 100%;
  background-color: var(--decoration-bg-color);
}
.top-info-3-inner{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
/* top-info-3-left */
.top-info-3-left{
  float: left;
  min-width: 100px;
  height: 80px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
  font-size: 0;
}
.top-info-3-left-logo-img{
  display: inline-block;
  padding: 18px 0;
  box-sizing: border-box;
  height: 100%;
}
.top-info-3-left-logo-img img{
  height: 100%;
  margin-right: 16px;
}
.top-info-3-left-logo-text{
  display: inline-block;
  font-size: 14px;
}
.top-info-3-text-primary{
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0;
}
.top-info-3-text-secondary{
  font-size: 14px;
  margin-top: 2px;
  margin: 8px 0;
}
.top-info-3-left a{
  height: 40px;
  font-size: 12px;
  color: var(--primary-text-color);
  margin-right: 12px;
}
/* top-info-3-right */
.top-info-3-right{
  float: right;
  min-width: 100px;
  height: 80px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
}
.top-info-3-right p,
.top-info-3-right a{
  line-height: 1;
  margin: 8px 0;
  font-size: 18px;
  color: var(--primary-text-color);
}
.top-info-3-right p,
.top-info-3-right a span{
  margin-left: 8px;
  font-size: 22px;
  font-family: 'Impact';
}.top-info-3-right a span span{
  margin-left: 8px;
  font-size: 24px;
  font-family: 'Impact';
}





/* header-1 */
.header-1{
  height: 80px;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, .04); */
}
.header-1-navs-logo{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
.header-1-logo{
  float: left;
  min-width: 100px;
  height: 80px;
  box-sizing: border-box;
  /* background-color: #eeeeee; */
  padding: 18px 0;
  font-size: 0;
}
.header-1-logo>div,
.header-1-logo>a,
.header-1-logo>p,
.header-1-logo>span,
.header-1-logo>i{
  display: inline-block;
}
.header-1-logo-img{
  min-width: 100px;
  height: 100%;
}
.header-1-logo-img img{
  height: 100%;
  margin-right: 16px;
}
.header-1-logo-text{
  font-size: 14px;
}
.header-1-logo-text-primary{
  font-size: 16px;
  font-weight: bold;
}
.header-1-logo-text-primary span{
  margin-right: 4px;
}
.header-1-logo-text-secondary{
  font-size: 14px;
  margin-top: 2px;
}
.header-1-logo-text-secondary span{
  margin-right: 4px;
}
.header-1-navs{
  float: right;
}
.header-1-nav-single{
  display: inline-block;
  height: 80px;
  position: relative;
}
.header-1-nav-single a{
  display: block;
  font-size: 14px;
  color: var(--primary-text-color);
  height: 80px;
  line-height: 80px;
  text-align: center;
  width: 120px;
  transition: .3s ease-in-out;
}
.header-1-nav-single-active{
  position: relative;
}
.header-1-nav-single::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -12px;
  background-color: var(--secondary-color);
  width: 24px;
  height: 4px;
  transition: .3s ease-in-out;
  opacity: 0;
  transform: scaleX(0);
}
.header-1-nav-single:hover a{
  color: var(--primary-color);
}
.header-1-nav-single:hover::after{
  opacity: 1;
  transform: scaleX(1.2);
}
.header-1-nav-single-active::after{
  opacity: 1;
  transform: scaleX(1.2);
}
.header-1-nav-single-active a{
  font-weight: bold;
  color: var(--primary-color);
}

/* header-2 */
.header-2{
  width: 100%;
  background-color: var(--primary-color);
}
.header-2-navs-all{
  width: 1280px;
  margin: 0 auto;
}
.header-2-navs-single{
  height: 50px;
  font-size: 14px;
  color: #ffffff;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out;
}
.header-2-navs-single:hover{
  background-color: var(--secondary-color);
}
.header-2-navs-single-active{
  background-color: var(--secondary-color);
}

/* header-3 */
.header-3{
  width: 100%;
  background-color: var(--primary-color);
}
.header-3-navs-all{
  width: 1280px;
  margin: 0 auto;
}
.header-3-navs-single{
  height: 80px;
  font-size: 14px;
  color: #ffffff;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out;
  position: relative;
}
.header-3-navs-single::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  height: 4px;
  background-color: var(--secondary-color);
  transform: scaleX(0);
  opacity: 0;
  transition: .3s ease-in-out;
}
.header-3-navs-single:hover{
  background-color: var(--decoration-color);
}
.header-3-navs-single:hover::after{
  transform: scaleX(1);
  opacity: 1;
}
.header-3-navs-single-active{
  background-color: var(--decoration-color);
  position: relative;
}
.header-3-navs-single-active::after{
  transform: scaleX(1);
  opacity: 1;
}

/* header-4 */
.header-4{
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.header-4-navs-all{
  width: 1280px;
  margin: 0 auto;
}
.header-4-logo{
  height: 80px;
}
.header-4-logo img{
  height: 44px;
  margin-right: 16px;
}
.header-4-logo-text{
  color: var(--primary-text-color);
}
.header-4-navs-single{
  height: 80px;
  font-size: 14px;
  color: var(--primary-text-color);
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out;
  position: relative;
  font-weight: bold;
}
.header-4-navs-single span{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 12px;
  color: #cccccc;
  font-weight: normal;
  text-transform: capitalize;
  opacity: 0;
  transition: .3s ease-in-out;
}
.header-4-navs-single:hover span{
  opacity: 1;
  bottom: 12px;
}
.header-4-navs-single-active span{
  opacity: 1;
  bottom: 12px;
}
.header-4-navs-single::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 24px;
  margin-top: -3px;
  border-width: 4px;
  border-style: solid;
  transform: rotate(45deg);
  border-color: var(--secondary-color) var(--secondary-color) transparent transparent;
  opacity: 0;
  transition: .3s ease-in-out;
}
.header-4-navs-single::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  margin-top: -3px;
  border-width: 4px;
  border-style: solid;
  transform: rotate(-135deg);
  border-color: var(--secondary-color) var(--secondary-color) transparent transparent;
  opacity: 0;
  transition: .3s ease-in-out;
}
.header-4-navs-single:hover{
  color: var(--primary-color);
}
.header-4-navs-single:hover::before{
  opacity: 1;
  left: 8px;
}
.header-4-navs-single:hover::after{
  opacity: 1;
  right: 8px;
}
.header-4-navs-single-active{
  color: var(--primary-color);
}
.header-4-navs-single-active::before{
  opacity: 1;
  left: 8px;
}
.header-4-navs-single-active::after{
  opacity: 1;
  right: 8px;
}

/* header-5 */
.header-5{
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.header-5-navs-all{
  width: 1280px;
  margin: 0 auto;
}
.header-5-logo{
  height: 80px;
}
.header-5-logo img{
  height: 44px;
  margin-right: 16px;
}
.header-5-logo-text{
  color: var(--primary-text-color);
}
.header-5-navs-single{
  height: 80px;
  font-size: 14px;
  color: var(--primary-text-color);
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out;
  position: relative;
  font-weight: bold;
}
.header-5-navs-single::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--secondary-color);
  transform-origin: left;
  transform: scaleX(0);
  transition: .3s ease-in-out;
}
.header-5-navs-single:hover{
  color: var(--primary-color);
}
.header-5-navs-single:hover::after{
  transform: scaleX(1);
}
.header-5-navs-single-active{
  color: var(--primary-color);
}
.header-5-navs-single-active::after{
  transform: scaleX(1);
}


/* banner-1 */
.banner-1-all{
  width: 100%;
  height: 500px;
  background-color: #eeeeee;
}
.banner-1-single-all{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* .iconlink{
  display: block;
  width: 28px;
  height: 28px;
  background-image: linear-gradient(45deg, red, green);
  background-position: center;
  background-size: 200% 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 24px !important;
} */

.swiper-img{
  width: 100%;
  height: 500px;
}
.swiper-img img{
  width: 100%;
  height: 500px;
  object-fit: cover;
}
.swiper-self-scroll .swiper-scrollbar-drag{
  background: rgb(255 255 255 / 77%) !important;
}
.swiper-self-pagination .swiper-pagination-bullet{
  width: 12px !important;
  height: 12px !important;
  background-color: #ffffff !important;
}
.swiper-self-pagination .swiper-pagination-bullet-active{
  background-color: #ffffff !important;
}
.swiper-self-pagination{
  color: #ffffff !important;
}


@font-face {
  font-family: 'iconfont';  /* project id 2126041 */
  src: url('http://at.alicdn.com/t/font_2126041_01udo1qfnizi.eot');
  src: url('http://at.alicdn.com/t/font_2126041_01udo1qfnizi.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_2126041_01udo1qfnizi.woff2') format('woff2'),
  url('http://at.alicdn.com/t/font_2126041_01udo1qfnizi.woff') format('woff'),
  url('http://at.alicdn.com/t/font_2126041_01udo1qfnizi.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_2126041_01udo1qfnizi.svg#iconfont') format('svg');
}
:root{
  --default-primary-color: #333333;
  --default-secondary-color: #777777;
  --primary-text-color: #333333;
  --secondary-text-color: #666666;
  --third-text-color: #999999;
  --decoration-text-color: #dddddd;
  --primary-bg-color: #333333;
  --secondary-bg-color: #666666;
  --decoration-bg-color: #eeeeee;
  --primary-color: #213b5a;
  --secondary-color: #FFAF01;
  --decoration-color: #365479;
  --primary-hover-color: #2b496e;
  --secondary-hover-color: #ffab51;
}
::selection{
  color: #ffffff;
  background-color: var(--secondary-color);
}
*{ 
  margin: 0; 
  padding: 0;
  font-family: '';
  list-style: none;
}
a{
  text-decoration: none;
}
a:visited{
  /* color: #333333; */
}
.clearfix::after{
  clear: both;
  display: block;
  content: "";
}
.t-a-c{
  text-align: center;
}
.t-a-l{
  text-align: left;
}
.t-a-r{
  text-align: right;
}
.f-c-c{
  display: flex;
  justify-content: center;
  align-items: center;
}
.f-s-c{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.f-e-c{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.f-s-s{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.f-c-s{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.f-e-s{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.f-c-e{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.f-b-c{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.f-b-s{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.f-b-e{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.f-row{
  flex-direction: row;
}
.f-col{
  flex-direction: column;
}
.f-wrap{
  flex-wrap: wrap;
}
.v-top{
  vertical-align: top;
}
.v-middle{
  vertical-align: middle;
}
.v-bottom{
  vertical-align: bottom;
}
.animated{
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fadeInUp{
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@keyframes fadeInUp{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    -ms-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
  }
  100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
  }
}
.fadeInRight{
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@keyframes fadeInRight{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-15px, 0, 0);
    -ms-transform: translate3d(-15px, 0, 0);
    transform: translate3d(-15px, 0, 0);
  }
  100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
  }
}



/* top-info-1 */
.top-info-1{
  height: 40px;
  width: 100%;
  background-color: #333333;
}
.top-info-1-inner{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
.top-info-1-left{
  float: left;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--decoration-text-color);
  letter-spacing: 0px;
}
.top-info-1-right{
  float: right;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--decoration-text-color);
  letter-spacing: 0px;
}
.top-info-1-right a{
  height: 40px;
  float: right;
  font-size: 12px;
  color: var(--decoration-text-color);
  margin-left: 12px;
}

/* top-info-2 */
.top-info-2{
  height: 40px;
  width: 100%;
  background-color: var(--decoration-bg-color);
}
.top-info-2-inner{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
.top-info-2-left{
  float: left;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
}
.top-info-2-left a{
  height: 40px;
  font-size: 12px;
  color: var(--primary-text-color);
  margin-right: 12px;
}
.top-info-2-right a{
  height: 40px;
  font-size: 12px;
  color: var(--primary-text-color);
}
.top-info-2-right{
  float: right;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 40px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
}

/* top-info-3 */
.top-info-3{
  height: 80px;
  width: 100%;
  background-color: var(--decoration-bg-color);
}
.top-info-3-inner{
  width: 1280px;
  /* height: 80px; */
  margin: 0 auto;
  font-size: 0;
}
/* top-info-3-left */
.top-info-3-left{
  float: left;
  min-width: 100px;
  height: 80px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
  font-size: 0;
}
.top-info-3-left-logo-img{
  display: inline-block;
  padding: 18px 0;
  box-sizing: border-box;
  height: 100%;
}
.top-info-3-left-logo-img img{
  height: 100%;
  margin-right: 16px;
}
.top-info-3-left-logo-text{
  display: inline-block;
  font-size: 14px;
}
.top-info-3-text-primary{
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0;
}
.top-info-3-text-secondary{
  font-size: 14px;
  margin-top: 2px;
  margin: 8px 0;
}
.top-info-3-left a{
  height: 40px;
  font-size: 12px;
  color: var(--primary-text-color);
  margin-right: 12px;
}
/* top-info-3-right */
.top-info-3-right{
  float: right;
  min-width: 100px;
  height: 80px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--primary-text-color);
  letter-spacing: 0px;
}
.top-info-3-right p,
.top-info-3-right a{
  line-height: 1;
  margin: 8px 0;
  font-size: 18px;
  color: var(--primary-text-color);
}
.top-info-3-right p,
.top-info-3-right a span{
  margin-left: 8px;
  font-size: 22px;
  font-family: 'Impact';
}.top-info-3-right a span span{
  margin-left: 8px;
  font-size: 24px;
  font-family: 'Impact';
}


/* product-1 */
.product-1-all{
  width: 100%;
  padding: 64px 0;
  min-height: 400px;
  box-sizing: border-box;
}
.product-1-content-all{
  width: 1280px;
  margin: 0 auto;
}
.product-1-content-title{
  margin-bottom: 108px;
}
.product-1-content-title h4{
  text-align: center;
  letter-spacing: 2px;
  font-size: 24px;
  color: var(--primary-text-color);
  position: relative;
}
.product-1-content-title h4::before{
  content: '';
  width: 64px;
  height: 4px;
  background-color: var(--primary-color);
  position: absolute;
  bottom: -20px;
  left: 50%;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: normal;
  color: var(--secondary-text-color);
  transform: translateX(-50%);
}
.product-1-content-title h4::after{
  content: attr(data-en);
  position: absolute;
  bottom: -48px;
  left: 50%;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: normal;
  color: var(--secondary-text-color);
  transform: translateX(-50%);
  text-transform: capitalize;
}
.product-1-content-ul{
  width: 100%;
}
.product-1-content-ul li{
  width: 25%;
  box-sizing: border-box;
  padding: 0 12px;
  margin-bottom: 24px;
}
.product-1-content-ul li a{
  width: 100%;
  box-sizing: border-box;
  transition: .3s ease-in-out;
}
.product-1-content-ul li a:hover{
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  transform: translateY(-4px);
}
.product-1-content-single-img{
  width: 100%;
  height: 240px;
  box-sizing: border-box;
  background-color: #eeeeee;
  overflow: hidden;
}
.product-1-content-single-img img{
  width: 100%;
  height: 240px;
  transition: .3s ease-in-out;
}
.product-1-content-ul li a:hover img{
  transform: scale(1.05) translateY(4px);
}
.product-1-content-single-text{
  box-sizing: border-box;
  width: 100%;
  border-color: #eeeeee;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  padding: 20px;
}
.product-1-content-single-text h5{
  font-size: 16px;
  color: var(--primary-text-color);
  text-align: center;
}
.product-1-content-single-text p{
  font-size: 14px;
  color: var(--third-text-color);
  padding-top: 12px;
  text-align: center;
  line-height: 1.5;
}
.product-1-content-more-all{
  width: 100%;
  margin-top: 12px;
}
.product-1-content-more-btn{
  width: 160px;
  height: 44px;
  font-size: 14px;
  color: #ffffff;
  background-color: var(--secondary-color);
  transition: .3s ease-in-out;
}
.product-1-content-more-btn:hover{
  transform: translateY(-4px);
}

/* product-2 */
.product-2-content-title{
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 12px;
  margin-bottom: 28px;
}
.product-2-content-title-text h4{
  font-size: 20px;
  color: var(--primary-text-color);
}
.product-2-content-title-text p{
  margin-top: 4px;
  font-size: 12px;
  color: var(--third-text-color);
  text-transform: capitalize;
}
.product-2-content-title-navs a{
  margin-left: 48px;
  font-size: 13px;
  color: var(--third-text-color);
  transition: .3s ease-in-out;
}
.product-2-content-title-navs a:hover{
  color: var(--primary-color);
}
.product-2-content-ul{
  width: 100%;
}
.product-2-content-ul li{
  width: 25%;
  padding: 0 12px;
  box-sizing: border-box;
  margin-bottom: 36px;
}
.product-2-content-single-img{
  width: 100%;
  height: 240px;
  box-sizing: border-box;
  background-color: #eeeeee;
  overflow: hidden;
}
.product-2-content-single-img img{
  width: 100%;
  height: 240px;
  transition: .3s ease-in-out;
}
.product-2-content-ul li a:hover img{
  transform: scale(1.05) translateY(4px);
}
.product-2-content-single-text{
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  transition: .3s ease-in-out;
  padding: 20px 0;
  position: relative;
}
.product-2-content-ul li a:hover .product-2-content-single-text span{
  right: 0;
  opacity: 1;
}
.product-2-content-ul li a:hover .product-2-content-single-text{
  border-bottom: 1px solid var(--primary-text-color);
}
.product-2-content-ul li a:hover .product-2-content-single-text h5{
  color: var(--primary-text-color);
}
.product-2-content-single-text span{
  position: absolute;
  color: var(--primary-text-color);
  transition: .3s ease-in-out;
  top: 16px;
  right: 36px;
  opacity: 0;
  font-size: 24px;
}
.product-2-content-single-text h5{
  font-size: 15px;
  color: var(--primary-text-color);
  transition: .3s ease-in-out;
  text-align: left;
}
.product-2-content-single-text p{
  /* max-width: 280px; */
  font-size: 13px;
  color: var(--third-text-color);
  padding-top: 12px;
  text-align: justify;
  line-height: 1.5;
}
.product-2-content-more-all{
  width: 100%;
  margin-top: 12px;
}
.product-2-content-more-btn{
  width: 160px;
  height: 48px;
  font-size: 15px;
  /* background-color: var(--primary-color); */
  border: 1px solid var(--primary-text-color);
  transition: .3s ease-in-out;
  color: var(--primary-text-color);
}
.product-2-content-more-btn span{
  margin-left: 12px;
  transition: .3s ease-in-out;
}
.product-2-content-more-btn:hover{
  /* background-color: var(--primary-color); */
}
.product-2-content-more-btn:hover span{
  transform: translateX(4px);
}
.product-2-content-more-btn:hover{
  transform: translateY(-4px);
}

/* product-3 */
.product-3-content-ul{
  width: 100%;
}
.product-3-content-ul-single-ani{
  box-sizing: border-box;
  height: 360px;
  /* padding: 28px 16px 16px; */
  /* border: 1px solid #eeeeee; */
  width: 24%;
  margin-right: 1.3%;
  margin-bottom: 28px;
}
.product-3-content-ul-single-ani:nth-child(4n){
  margin-right: 0;
}
.product-3-content-ul-single{
  box-sizing: border-box;
  width: 100%;
  height: 360px;
  padding: 28px 16px 16px;
  /* border: 1px solid #eeeeee; */
  background-color: #f8f8f8;
  transition: .3s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
.product-3-content-ul-single-text{
  color: var(--primary-text-color);
}
.product-3-content-ul-single-text h4{
  font-size: 16px;
}
.product-3-content-ul-single-text p{
  margin-top: 12px;
  font-size: 14px;
}
.product-3-content-ul-single-img{
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.product-3-content-ul-single-img img{
  width: 100%;
  height: 220px;
  transition: .3s ease-in-out;
}
.product-3-content-ul-single:hover{
  /* background-color: #f2f2f2; */
  transform: translateY(-8px);
}
.product-3-content-ul-single:hover .product-3-content-ul-single-img img{
  transform: scale(1.05);
}

/* product-4 */
.product-4-content-title{
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 12px;
  margin-bottom: 28px;
  position: relative;
}
.product-4-content-title::after{
  content: '';
  position: absolute;
  background-color: var(--primary-color);
  bottom: -3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 5px;
}
.product-4-content-title-text h4{
  font-size: 24px;
  color: var(--primary-text-color);
}
.product-4-content-title-text p{
  margin-top: 8px;
  font-size: 14px;
  color: var(--third-text-color);
  text-transform: capitalize;
}
.product-4-content-ul{
  width: 100%;
}
.product-4-content-ul-single-ani{
  box-sizing: border-box;
  height: 340px;
  /* padding: 28px 16px 16px; */
  /* border: 1px solid #eeeeee; */
  width: 24%;
  margin-right: 1.3%;
  margin-bottom: 28px;
}
.product-4-content-ul-single-ani:nth-child(4n){
  margin-right: 0;
}
.product-4-content-ul-single{
  box-sizing: border-box;
  width: 100%;
  height: 340px;
  padding: 28px 16px 16px;
  /* border: 1px solid #eeeeee; */
  background-color: #f8f8f8;
  transition: .3s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
.product-4-content-ul-single:nth-child(4n){
  margin-right: 0;
}
.product-4-content-ul-single-text{
  color: var(--primary-text-color);
  width: 100%;
}
.product-4-content-ul-single-text h4{
  font-size: 16px;
  text-align: center;
}
.product-4-content-ul-single-text p{
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
}
.product-4-content-ul-single-img{
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.product-4-content-ul-single-img img{
  width: 100%;
  height: 220px;
  transition: .3s ease-in-out;
}
.product-4-content-ul-single:hover{
  /* background-color: #f2f2f2; */
  transform: translateY(-8px);
}
.product-4-content-ul-single:hover .product-4-content-ul-single-img img{
  transform: scale(1.05);
}


/* intro-1 */
.intro-1-content-all{
  width: 100%;
  min-height: 400px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.intro-1-content-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: .16;
}
.intro-1-content-article{
  position: absolute;
  bottom: -20px;
  right: -20px;
  box-sizing: border-box;
  width: 640px;
  min-height: 320px;
  padding: 36px 48px;
  background-color: var(--primary-color);
}
.intro-1-content-article h3{
  line-height: 1.8;
  color: #ffffff;
  margin-bottom: 16px;
}
.intro-1-content-article p{
  text-align: justify;
  line-height: 1.8;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 36px;
}
.intro-1-content-article a{
  color: #ffffff;
  font-size: 14px;
  width: 140px;
  height: 40px;
  /* border: 1px solid #ffffff; */
  transition: .3s ease-in-out;
  background-color: var(--secondary-color);
}
.intro-1-content-article a:hover{
  background-color:  var(--secondary-hover-color);
}

/* intro-2 */
.intro-2-all{
  width: 100%;
  margin-top: 12px;
}
.intro-2-content-all{
  /* width: 100%; */
  width: 1280px;
  margin: 0 auto;
}
.intro-2-content-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-primary-color);
  opacity: .16;
}
.intro-2-content-img{
  width: 50%;
  height: 440px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.intro-2-content-article{
  width: 50%;
  background-color: #eeeeee;
  height: 440px;
  box-sizing: border-box;
  padding: 100px 100px 80px;
}
.intro-2-content-article h3{
  line-height: 1.8;
  color: var(--default-primary-color);
  font-size: 20px;
  margin-bottom: 16px;
}
.intro-2-content-article h3 span{
  color: #999999;
  font-weight: normal;
  font-size: 12px;
  text-transform: capitalize;
  margin-left: 12px;
}
.intro-2-content-article p{
  text-align: justify;
  line-height: 1.8;
  font-size: 14px;
  color: var(--default-primary-color);
  margin-bottom: 36px;
}
.intro-2-content-article a{
  color: #ffffff;
  font-size: 14px;
  width: 140px;
  height: 36px;
  background-color: var(--secondary-color);
  /* border: 1px solid var(--secondary-color); */
  transition: .3s ease-in-out;
}
.intro-2-content-article a:hover{
  color: #ffffff;
  background-color: var(--secondary-hover-color);
}

/* intro-3 */
.intro-3-all{
  width: 100%;
  margin-top: 40px;
}
.intro-3-content-all{
  /* width: 100%; */
  width: 1280px;
  margin: 0 auto;
}
.intro-3-content-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: .16;
}
.intro-3-content-img{
  width: 50%;
  height: 440px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.intro-3-content-article{
  width: 50%;
  background-color: var(--primary-color);
  height: 440px;
  box-sizing: border-box;
  padding: 80px 80px 80px;
}
.intro-3-content-article h3{
  line-height: 1.8;
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 16px;
}
.intro-3-content-article h3 span{
  color: #eeeeee;
  font-weight: normal;
  font-size: 12px;
  text-transform: capitalize;
  margin-left: 12px;
}
.intro-3-content-article p{
  text-align: justify;
  line-height: 1.8;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 36px;
}
.intro-3-content-article a{
  color: #ffffff;
  font-size: 14px;
  width: 140px;
  height: 36px;
  background-color: var(--secondary-color);
  /* border: 1px solid #ffffff; */
  transition: .3s ease-in-out;
}
.intro-3-content-article a:hover{
  color: #ffffff;
  background-color: var(--secondary-hover-color);
}

/* intro-4 */
.intro-4-all{
  width: 100%;
  min-height: 720px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.intro-4-content-bg-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: .84;
  backdrop-filter: blur(10px);
}
.intro-4-content-all{
  padding: 40px 0;
  width: 100%;
  /* width: 1280px; */
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.intro-4-content-title-all{
  width: 100%;
}
.intro-4-content-title-all h3{
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
}
.intro-4-content-title-all p{
  text-transform: capitalize;
  margin-top: 12px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #dddddd;
}
.intro-4-content-img-all{
  width: 720px;
  height: 360px;
  margin: 36px auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.intro-4-content-img-all img{
  width: 720px;
  height: 360px;
}
.intro-4-content-text-all{
  width: 720px;
  margin: 24px auto;
}
.intro-4-content-text-all p{
  text-align: center;
  line-height: 1.8;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 24px;
}
.intro-4-content-btn-all a{
  color: #ffffff;
  font-size: 14px;
  width: 140px;
  height: 36px;
  background-color: var(--secondary-color);
  /* border: 1px solid #ffffff; */
  transition: .3s ease-in-out;
}
.intro-4-content-btn-all a:hover{
  color: #ffffff;
  background-color: var(--secondary-hover-color);
}


/* news-1 */
.news-1-all{
  width: 100%;
  margin: 40px 0;
}
.news-1-content-all{
  width: 1280px;
  margin: 0 auto;
}
.news-1-content-main{
  width: 100%;
}
.news-1-content-main-single-ani{
  width: 32%;
  margin-right: 2%;
  margin-bottom: 24px;
}
.news-1-content-main-single{
  width: 100%;
  transition: .3s ease-in-out;
  padding-bottom: 24px;
  background-color: #f8f8f8;
}
.news-1-content-main-single:hover{
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, .12); */
}
.news-1-content-main-single:hover .news-1-content-main-single-img img{
  transform: scale(1.05);
}
.news-1-content-main-single-ani:nth-child(3n){
  margin-right: 0;
}
.news-1-content-main-single-img{
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.news-1-content-main-single-img img{
  width: 100%;
  height: 240px;
  transition: .3s ease-in-out;
}
.news-1-content-main-single-text{
  width: 90%;
}
.news-1-content-main-single-text span{
  font-size: 12px;
  color: #aaaaaa;
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
}
.news-1-content-main-single-text h3{
  font-size: 16px;
  color: #333333;
  margin-top: 12px;
  line-height: 1.6;
}
.news-1-content-main-single-text p{
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  width: 100%;
}
.news-1-content-main-single-btn{
  color: #ffffff;
  font-size: 14px;
  width: 140px;
  height: 36px;
  background-color: var(--secondary-color);
  /* border: 1px solid #ffffff; */
  transition: .3s ease-in-out;
  margin-top: 16px;
}
.news-1-content-main-single-btn:hover{
  color: #ffffff;
  background-color: var(--secondary-hover-color);
}

/* news-2 */
.news-2-content-main-all{
  width: 100%;
}
.news-2-content-main-single-ani{
  width: 32%;
  margin-right: 2%;
  margin-bottom: 24px;
}
.news-2-content-main-single-ani:nth-child(3n){
  margin-right: 0;
}
.news-2-content-main-single{
  width: 100%;
  height: 240px;
  transition: .3s ease-in-out;
  position: relative;
  display: flex;
}
.news-2-content-main-single:hover{
  /* transform: translateY(-4px); */
}
.news-2-content-main-single-img{
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.news-2-content-main-single-img img{
  width: 100%;
  height: 240px;
  transition: .3s ease-in-out;
}
.news-2-content-main-single:hover .news-2-content-main-single-img img{
  transform: scale(1.05);
}
.news-2-content-main-single-text{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 24px;
  /* height: 100%; */
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .36);
  backdrop-filter: blur(4px);
}
.news-2-content-main-single-text h3{
  box-sizing: border-box;
  padding: 8px 0 0;
  font-size: 16px;
  width: 100%;
  color: #ffffff;
}
.news-2-content-main-single-text span{
  width: 100%;
  box-sizing: border-box;
  display: block;
  /* padding-top: 8px; */
  font-size: 14px;
  color: #dddddd;
}

/* news-3 */
.news-3-content-article-all{
  width: 100%;
}
.news-3-content-article-single-first{
  width: 48%;
  height: 440px;
  position: relative;
  overflow: hidden;
}
.news-3-content-article-single-first img{
  width: 100%;
  height: 440px;
  transition: .3s ease-in-out;
}
.news-3-content-article-single-first:hover img{
  transform: scale(1.05);
}
.news-3-content-article-single-first-main{
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .77);
}
.news-3-content-article-single-first-main-title{
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}
.news-3-content-article-single-first-main-text{
  font-size: 14px;
  color: #dddddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  margin-top: 12px;
}
.news-3-content-article-list{
  width: 48%;
  height: 440px;
  background-color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
}
.news-3-content-article-list-single{
  width: 100%;
  height: 24%;
  box-sizing: border-box;
  padding: 20px;
  transition: .3s ease-in-out;
}
.news-3-content-article-list-single:hover{
  background-color: #f8f8f8;
}
.news-3-content-article-list-single-date{
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  padding-right: 24px;
  height: 52px;
  border-right: 1px solid #dddddd;
}
.news-3-content-article-list-single-main{
  width: 72%;
}
.news-3-content-article-list-single-main-title{
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  transition: .3s ease-in-out;
}
.news-3-content-article-list-single:hover .news-3-content-article-list-single-main-title{
  transform: translateX(-8px);
}
.news-3-content-article-list-single-main-text{
  margin-top: 12px;
  font-size: 14px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  transition: .3s ease-in-out;
}
.news-3-content-article-list-single:hover .news-3-content-article-list-single-main-text{
  transform: translateX(-8px);
}

/* news-4 */
.news-4-content-article-all{

}
.news-4-content-main-single-btn{
  color: #333333;
  font-size: 14px;
  width: 140px;
  height: 36px;
  background-color: #eeeeee;
  /* border: 1px solid #ffffff; */
  transition: .3s ease-in-out;
  margin-top: 16px;
}
.news-4-content-main-single-btn:hover{
  color: #333333;
  background-color: #dddddd;
}



.footer-1{
  width: 100%;
  min-height: 200px;
  background-color: #333333;
}
.footer-1-navs-logo{
  width: 1280px;
  margin: 0 auto;
  padding: 48px 0;
}
.footer-1-logo{

}
.footer-1-text{

}
.footer-1-logo-text-primary{
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 8px;
}
.footer-1-logo-text-primary span{
  margin-right: 4px;
}
.footer-1-logo-text-secondary{
  font-size: 14px;
  margin-top: 2px;
}
.footer-1-logo-text-secondary span{
  margin-right: 4px;
}
.footer-1-logo-img{

}
.footer-1-logo-img img{
  height: 44px;
  margin-bottom: 12px;
}
.footer-1-logo-text{
  color: #dddddd;
}
/* .footer-1-logo-text-primary{
  font-size: 18px;
  font-weight: bold;
}
.footer-1-logo-text-secondary{
  font-size: 14px;
  margin-top: 2px;
} */
.footer-1-navs{
  
}
.footer-1-navs-single{
  margin-left: 40px;
}
.footer-1-navs-single:first-child{
  margin-left: 0;
}
.footer-1-navs-single-main{
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #bbbbbb;
  line-height: 1.5;
  margin-bottom: 16px;
  transition: .3s ease-in-out;
}
.footer-1-navs-single-subs a{
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #999999;
  margin-bottom: 8px;
  transition: .3s ease-in-out;
  line-height: 1.5;
}
.footer-1-navs-single-main:hover{
  color: #dddddd;
  transform: translateX(-4px);
}
.footer-1-navs-single-subs a:hover{
  color: #dddddd;
  transform: translateX(-4px);
}
.footer-1-copyright-all{
  width: 100%;
  background-color: #222222;
  border-top: 1px solid #444444;
}
.footer-1-copyright{
  width: 1280px;
  /* border-top: 1px solid #666666; */
  margin: 0 auto;
  padding: 16px 0;
}
.footer-1-copyright>p,
.footer-1-copyright>a,
.footer-1-copyright>span{
  width: 50%;
}
.footer-1-copyright p,
.footer-1-copyright a,
.footer-1-copyright span{
  font-size: 12px;
  color: #999999;
  transition: .3s ease-in-out;
}
.footer-1-copyright p:hover,
.footer-1-copyright a:hover,
.footer-1-copyright span:hover{
  color: #bbbbbb;
}


/* footer-2 */
.footer-2{
  width: 100%;
  min-height: 100px;
  background-color: #333333;
}
.footer-2-navs-logo{
  width: 1280px;
  margin: 0 auto;
  padding: 24px 0;
}
.footer-2-navs-single-main{
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #777777;
  line-height: 1.5;
  margin-bottom: 16px;
  transition: .3s ease-in-out;
}
.footer-2-navs-single-subs a{
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #999999;
  margin-bottom: 8px;
  transition: .3s ease-in-out;
  line-height: 1.5;
}
.footer-2-navs-single-main:hover{
  color: #444444;
  transform: translateX(-4px);
}
.footer-2-navs-single-subs a:hover{
  color: #444444;
  transform: translateX(-4px);
}
.footer-2-copyright-all{
  width: 100%;
  background-color: #dddddd;
  border-top: 1px solid #cccccc;
}
.footer-2-copyright{
  width: 1280px;
  /* border-top: 1px solid #666666; */
  margin: 0 auto;
  padding: 16px 0;
}
.footer-2-copyright>p,
.footer-2-copyright>a,
.footer-2-copyright>span{
  width: 50%;
}
.footer-2-copyright p,
.footer-2-copyright a,
.footer-2-copyright span{
  font-size: 12px;
  color: #999999;
  transition: .3s ease-in-out;
}
.footer-2-copyright p:hover,
.footer-2-copyright a:hover,
.footer-2-copyright span:hover{
  color: #666666;
}

/* footer-3 */
.footer-3-logo-text{
  color: #666666;
}