@font-face {
  font-family: 'DIN-Medium';
  src: url('../fonts/DIN-Medium.otf');
}
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('../fonts/Montserrat-SemiBold.otf');
}
:root {
  --Noto-Sans-SC: 'Noto Sans SC', sans-serif;
  --Noto-Serif-SC: 'Noto Serif SC', sans-serif;
  --Song-Myung: 'Song Myung', sans-serif;
  --Roboto: 'Roboto', sans-serif;
  --Abel: 'Abel', sans-serif;
  --Barlow-Condensed: 'Barlow Condensed', sans-serif;
  --Din: 'DIN-Medium', sans-serif;
  --Montserrat-SemiBold: 'Montserrat-SemiBold', 'sans-serif';
  --Montserrat: 'Montserrat', 'sans-serif';
  --Poppins: 'Poppins', 'sans-serif';
  --Lato: 'Lato', 'sans-serif';
}
h1,
h2,
h3,
h4,
h5,
p {
  transition: all 0.5s;
}
.wow {
  visibility: hidden;
}
html,
body {
  scroll-behavior: smooth;
  font-family: var(--Noto-Sans-SC);
}
body {
  overflow: visible;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  background-color: #fff;
}
body::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
}
body::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #666;
}
body:hover::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.out-header {
  height: 100px;
  width: 100%;
}
.mycontainer {
  max-width: 1600px;
  width: 85%;
  margin: 0 auto;
}
.blank {
  margin: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  border: 0 !important;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 99;
  transition: all 0.5s;
  background-color: #fff;
}
header .mycontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}
header .logo {
  width: 40.625%;
  text-align: center;
}
header .logo img {
  transition: all 0.5s;
}
header .lv1 {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
header .lv1 > li {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(14px, 1.1vw, 18px);
}
header .lv1 > li:first-child {
  margin-left: 0;
}
header .lv1 > li::after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 1px;
  background-color: #0052C1;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  transition: all 0.5s;
}
header .lv1 > li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #010101;
  padding: 0 2px;
  text-align: center;
  transition: all 0.5s;
  text-transform: uppercase;
}
header .lv1 > li:hover > a {
  color: #0052C1;
}
header .lv1 > li:hover::after {
  width: 100%;
}
header .lv1 > li:hover .lv2 {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
header .lv1 > .active > a {
  color: #0052C1;
  font-weight: 700;
}
header .lv1 > .active::after {
  width: 100%;
}
header .lv2 {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 5px);
  transition: all 0.5s;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 1.875em;
  visibility: hidden;
  opacity: 0;
  gap: 1em 4.1667em;
  font-size: clamp(14px, 1vw, 16px);
  border-radius: 2px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
header .lv2 > li {
  position: relative;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 1em;
}
header .lv2 > li:last-child {
  margin-bottom: 0;
}
header .lv2 > li a {
  color: #010101;
  line-height: 1.45;
}
header .lv2 > li a:hover {
  color: #0052C1;
}
header .lv2 > li:hover .lv3 {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
header .lv3 {
  position: absolute;
  top: 0%;
  left: 100%;
  transform: translate(50%, 0);
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.88);
  padding: 0 0 10px;
  visibility: hidden;
  opacity: 0;
}
header nav {
  flex: 1;
  height: 74%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .tel {
  line-height: 1.2;
  display: flex;
  align-items: center;
  margin-left: 2.375%;
}
header .tel h5 {
  font-size: clamp(14px, 1vw, 18px);
  color: #333;
}
header .tel h4 {
  font-size: clamp(16px, 1.25vw, 24px);
  color: #0052C1;
  font-weight: 700;
  margin-left: 0.3em;
  margin-top: -0.1em;
}
header .lang {
  color: #000;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 18px);
  margin-left: 1.5%;
}
header .lang a {
  color: inherit;
}
header .lang a:hover {
  text-decoration: underline !important;
}
header .lang .on {
  color: #0052C1;
}
header .search form {
  position: relative;
}
header .search form input {
  width: 214px;
  height: 30px;
  border-radius: 15px;
  outline: none;
  font-size: 13px;
  color: #333;
  font-weight: 300;
  background-color: #fafafa;
  padding: 0 35px 0 14px;
  transition: all 0.5s;
}
header .search form input::placeholder {
  color: #5f5f5f;
  transition: all 0.5s;
}
header .search form button {
  position: absolute;
  outline: none;
  border: 0;
  background-color: transparent;
  right: 22px;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
  transition: all 0.5s;
}
.pagination {
  margin-top: 2%;
  display: flex !important;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.pagination a {
  display: block;
  font-size: 14px;
  padding: 0 5px;
  min-width: 32px;
  line-height: 30px;
  background-color: transparent;
  border: 1px solid #e5e5e5;
  margin: 5px;
  color: #010101;
  transition: all 0.5s;
  border-radius: 4px;
}
.pagination span {
  display: block;
  font-size: 14px;
  padding: 0 5px;
  min-width: 32px;
  line-height: 32px;
  background-color: #0052C1;
  border-color: transparent;
  margin: 5px;
  color: #fff;
  transition: all 0.5s;
  border-radius: 4px;
}
.pagination a:hover {
  color: #fff;
  background-color: #0052C1;
  border-color: transparent;
}
.index-banner {
  position: relative;
  overflow: hidden;
  height: 100vh;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
}
.index-banner img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.index-banner .swiper {
  width: 100%;
  flex: 1;
}
.index-banner .swiper .swiper-slide {
  position: relative;
}
.index-banner .swiper .swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: all 3s;
  scale: 1.1;
}
.index-banner .swiper .swiper-slide-active h2 {
  animation: fadeInDown 2s;
}
.index-banner .swiper .swiper-slide-active h5 {
  animation: fadeInDown 2.5s;
}
.index-banner .swiper .swiper-slide-active a {
  animation: fadeInUp 2s;
}
.index-banner .swiper .swiper-slide-active img {
  scale: 1;
}
.index-banner .banner-text {
  text-align: center;
}
.index-banner .banner-text h2 {
  font-size: 50px;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
}
.index-banner .banner-text h5 {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  line-height: 1.6;
}
.index-banner .banner-text a {
  display: inline-block;
  width: 150px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 25px;
  color: #fff;
  margin-top: 6.13497%;
  transition: all 0.5s;
}
.index-banner .banner-text a img {
  margin-right: 13px;
  transition: all 0.5s;
}
.index-banner .banner-text a:hover {
  box-shadow: inset -5px 5px 15px rgba(255, 255, 255, 0.3);
}
.index-banner .banner-text a:hover img {
  margin-right: 7px;
}
.index-banner .swiper-pagination {
  bottom: 6.04595%;
}
.index-banner .swiper-pagination .swiper-pagination-bullet {
  font-size: clamp(10px, 1.2vw, 20px);
  width: 1.5em;
  height: 1.5em;
  border-radius: 0;
  background: url(../images/banner-pagination.png) no-repeat;
  background-size: contain;
  opacity: 1;
  filter: contrast(0) brightness(200%);
  margin: 0 1.3em;
  transition: all 0.5s;
}
.index-banner .swiper-pagination .swiper-pagination-bullet-active {
  filter: contrast(1) brightness(100%);
}
.index-title {
  margin-bottom: 3.125%;
}
.index-title h2 {
  font-size: clamp(30px, 4.166667vw, 80px);
  font-weight: 900;
  color: transparent;
  text-transform: uppercase;
  background: linear-gradient(180deg, #b3b4b5 0%, rgba(0, 0, 0, 0) 81.25%);
  background-clip: text;
  line-height: 1.25;
}
.index-title h3 {
  font-size: clamp(20px, 1.5625vw, 30px);
  color: #010101;
  font-weight: 700;
  position: relative;
  line-height: 1.45;
  margin-top: -1em;
}
.index-title h4 {
  text-align: center;
  font-size: clamp(20px, 1.5625vw, 30px);
  color: #0467D9;
  line-height: 1.45;
  font-weight: 700;
}
.index-title h4 span {
  position: relative;
  display: inline-block;
}
.index-title h4 span::before,
.index-title h4 span::after {
  position: absolute;
  top: 50%;
  content: "";
  width: 16.266667em;
  height: 10px;
  background: url(../images/index-title-deco.png) no-repeat;
  background-size: contain;
}
.index-title h4 span::before {
  left: -1.2em;
  transform: translate(-100%, -50%) rotate(180deg);
}
.index-title h4 span::after {
  right: -1.2em;
  transform: translate(100%, -50%);
}
.index-title h5 {
  font-size: clamp(12px, 1.2vw, 22px);
  line-height: 1.45;
  color: #2085F7;
  font-weight: 500;
  margin-top: 0.909091em;
}
.index-about {
  position: relative;
  overflow: hidden;
  height: 100vh;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
}
.index-about .about-slogan {
  background-color: #fff;
  padding: 1.0416667% 0;
  width: 100%;
}
.index-about .about-slogan .mycontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.45;
}
.index-about .about-slogan .mycontainer .lt {
  font-size: clamp(14px, 1.35416667vw, 26px);
  color: #010101;
}
.index-about .about-slogan .mycontainer .lt b,
.index-about .about-slogan .mycontainer .lt strong {
  color: #0052C1;
  font-weight: 700;
}
.index-about .about-slogan .mycontainer .rt {
  font-size: clamp(14px, 1.35416667vw, 26px);
  display: flex;
  align-items: center;
}
.index-about .about-slogan .mycontainer .rt img {
  width: 1.3846154em;
  height: 1.3846154em;
  object-fit: scale-down;
  margin-right: 0.5em;
}
.index-about .about-slogan .mycontainer .rt h5 {
  font-size: clamp(12px, 1vw, 16px);
  color: #010101;
}
.index-about .about-slogan .mycontainer .rt h3 {
  color: #0052C1;
  font-weight: 700;
}
.index-about .wrapper {
  flex: 1;
  background: url(../images/index-about-bg.jpg) no-repeat;
  background-size: cover;
  height: 100%;
  padding: 2.0833% 0;
}
.index-about .wrapper .mycontainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
.index-about .wrapper .mycontainer .lt {
  width: 42.875%;
}
.index-about .wrapper .mycontainer .lt .brief {
  font-size: clamp(14px, 1vw, 16px);
  color: #808080;
  line-height: 1.875;
}
.index-about .wrapper .mycontainer .lt .brief b,
.index-about .wrapper .mycontainer .lt .brief strong {
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 500;
  color: #0052C1;
  line-height: 1.45;
}
.index-about .wrapper .mycontainer .lt .more {
  display: inline-block;
  font-size: clamp(14px, 1vw, 16px);
  color: #010101;
  line-height: 1.45;
  letter-spacing: 0.375em;
  font-weight: 500;
  margin-top: 2.0833vw;
}
.index-about .wrapper .mycontainer .rt {
  position: relative;
  width: 46.375%;
  margin-top: 3.90625%;
  z-index: 1;
}
.index-about .wrapper .mycontainer .rt::after {
  position: absolute;
  display: block;
  content: "";
  width: 200%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 16px;
  background: linear-gradient(0deg, #1783FF 0%, #0467D9 100%);
  z-index: -1;
  transform: translate(-3.7735849%, -10.666667%);
}
.index-about .wrapper .mycontainer .rt .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 13px;
}
.index-about .wrapper .mycontainer .rt .pic img {
  display: block;
  width: 100%;
}
.index-prod {
  position: relative;
  overflow: hidden;
  background: url(../images/index-prod-bg.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  padding-top: calc(100px + 3%);
}
.index-prod .index-title h4 {
  color: #fff;
}
.index-prod .index-title h4 span::before,
.index-prod .index-title h4 span::after {
  filter: contrast(0) brightness(200%);
}
.index-prod .prod-tab {
  background-color: #fff;
  padding: 1% 3.75%;
  margin-bottom: 3.9375%;
}
.index-prod .prod-tab ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.index-prod .prod-tab ul li {
  position: relative;
  width: 31.0810811%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(14px, 1.2vw, 22px);
  padding: 2.2727273em 1em 2em;
  cursor: pointer;
  z-index: 1;
  line-height: 1.45;
}
.index-prod .prod-tab ul li h4 {
  color: #010101;
  font-weight: 500;
}
.index-prod .prod-tab ul li img {
  width: 2em;
  height: 2em;
  margin-bottom: 0.3em;
  transition: all 0.5s;
}
.index-prod .prod-tab ul li::after {
  position: absolute;
  display: block;
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/prod-tab-bg.png) no-repeat;
  background-size: 100% 100%;
  filter: contrast(0) brightness(180%);
  transition: all 0.5s;
}
.index-prod .prod-tab ul .active h4 {
  color: #fff;
}
.index-prod .prod-tab ul .active img {
  filter: contrast(0) brightness(200%);
}
.index-prod .prod-tab ul .active::after {
  filter: contrast(1) brightness(100%);
}
.index-prod .prod-swiper .swiper {
  overflow: visible;
  display: none;
}
.index-prod .prod-swiper .swiper:first-child {
  display: block;
}
.index-prod .prod-swiper .swiper .swiper-wrapper {
  transition-timing-function: linear;
}
.index-prod .prod-swiper .swiper .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 73.1034483%;
}
.index-prod .prod-swiper .swiper .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.index-prod .prod-swiper .swiper .title {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #010101;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 0.9375em;
  transition: all 0.5s;
}
.index-prod .prod-swiper .swiper .swiper-slide {
  font-size: clamp(14px, 1vw, 16px);
  padding: 1.125em 1.125em 0.875em;
  background-color: #fff;
}
.index-prod .prod-swiper .swiper .swiper-slide:hover .pic img {
  scale: 1.05;
}
.index-prod .prod-swiper .swiper .swiper-slide:hover .title {
  color: #0052C1;
  font-weight: 700;
}
.index-solution {
  position: relative;
  overflow: hidden;
  background: url(../images/index-solution-bg.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  padding-top: calc(100px + 3%);
}
.index-solution .wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.index-solution .wrapper .lt {
  width: 42.625%;
  display: flex;
  justify-content: space-between;
}
.index-solution .wrapper .lt .video {
  position: relative;
  width: 43.98827%;
  height: 100%;
}
.index-solution .wrapper .lt .video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}
.index-solution .wrapper .lt .video .btn {
  position: absolute;
  bottom: 5%;
  left: 10%;
  font-size: clamp(12px, 1.2vw, 20px);
  width: 2.5em;
  height: 2.5em;
  background: url(../images/play.png) no-repeat;
  background-size: contain;
}
.index-solution .wrapper .lt .video:hover .btn {
  animation: swing 1s;
}
.index-solution .wrapper .rt {
  width: 39.125%;
  margin-right: 7.9375%;
}
.index-solution .wrapper .rt .title em {
  display: inline-block;
  font-size: clamp(12px, 1vw, 16px);
  color: #FF8D1A;
  font-weight: 700;
  line-height: 2.125;
  background-color: #FFECD9;
  padding: 0 2.75em;
  margin-bottom: 1em;
}
.index-solution .wrapper .rt .title h4 {
  font-size: clamp(18px, 1.5625vw, 30px);
  color: #010101;
  font-weight: 700;
  line-height: 1.6667;
  margin-bottom: 1em;
}
.index-solution .wrapper .rt .title h4 span {
  color: #FF8D1A;
}
.index-solution .wrapper .rt .brief {
  font-size: clamp(14px, 1vw, 16px);
  color: #808080;
  line-height: 1.875;
}
.index-solution .wrapper .rt .data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(20px, 2.083333vw, 40px);
}
.index-solution .wrapper .rt .data .block {
  line-height: 1.45;
}
.index-solution .wrapper .rt .data .block h3 {
  font-weight: 900;
  color: #FF8D1A;
}
.index-solution .wrapper .rt .data .block h3 em {
  font-size: clamp(12px, 1.35416667vw, 26px);
  font-weight: 500;
}
.index-solution .wrapper .rt .data .block h5 {
  font-size: clamp(12px, 1.2vw, 20px);
  color: #383838;
  font-weight: 500;
}
.index-solution .wrapper .rt .data i {
  display: block;
  width: 1px;
  height: 1.5em;
  background-color: #383838;
}
.index-solution .wrapper .rt .info {
  display: flex;
  align-items: center;
  padding-top: 6.709265%;
  border-top: 1px solid #c4c4c4;
  margin-top: 5.5910543%;
}
.index-solution .wrapper .rt .info span {
  position: relative;
  cursor: pointer;
  font-size: clamp(14px, 1.2vw, 20px);
  color: #fff;
  background-color: #FF8D1A;
  line-height: 2.5;
  padding: 0 1em;
  min-width: 11.75em;
  border-radius: 2em;
  text-align: center;
  margin-right: 5em;
}
.index-solution .wrapper .rt .info span .tip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%) scale(0);
  transform-origin: top center;
  background-color: #fff;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}
.index-solution .wrapper .rt .info span .tip img {
  width: 120px;
  min-width: 120px;
  height: 120px;
}
.index-solution .wrapper .rt .info span:hover .tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0%) scale(1);
}
.index-solution .wrapper .rt .info .tel {
  display: flex;
  align-items: center;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.6667;
}
.index-solution .wrapper .rt .info .tel img {
  width: 2.5em;
  height: 2.5em;
  object-fit: scale-down;
  margin-right: 1em;
}
.index-solution .wrapper .rt .info .tel .text h5 {
  font-size: 12px;
  color: #1954B3;
}
.index-solution .wrapper .rt .info .tel .text h4 {
  font-size: clamp(16px, 1.2vw, 22px);
  color: #1954B3;
}
.index-solution .wrapper-title {
  text-align: center;
  font-size: clamp(20px, 1.5625vw, 30px);
  margin-top: 5.4375%;
}
.index-solution .wrapper-title span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(179.07deg, #004CA8 0%, #0071DB 54.62%, #59BDFF 100%);
  background-clip: text;
  font-weight: 700;
}
.index-produce {
  position: relative;
  overflow: hidden;
  height: 100vh;
  padding-top: calc(100px + 3%);
}
.index-produce .wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 3.75%;
}
.index-produce .wrapper .block {
  width: 10%;
  font-size: clamp(12px, 1.2vw, 20px);
  line-height: 1.45;
}
.index-produce .wrapper .block .icon {
  width: 5.6em;
  height: 5.6em;
  margin: 0 auto 1em;
}
.index-produce .wrapper .block .icon img {
  position: relative;
  object-fit: scale-down;
  display: block;
  width: 100%;
  height: 100%;
}
.index-produce .wrapper .block h4 {
  text-align: center;
  color: #010101;
}
.index-produce .wrapper .block:hover .icon {
  animation: swing 1s;
}
.index-produce .swiper .swiper-slide .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 66.5362%;
}
.index-produce .swiper .swiper-slide .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.index-produce .swiper .swiper-slide .pic .title {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 3;
  padding: 0 1em;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0) 100%);
}
.index-produce .swiper .swiper-slide .pic:hover img {
  scale: 1.05;
}
.index-customization {
  position: relative;
  overflow: hidden;
  background: url(../images/index-customization-bg.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  padding-top: calc(100px + 3%);
}
.index-customization .index-title {
  margin-bottom: 8.1875%;
}
.index-customization .swiper .swiper-slide:hover .pic img {
  scale: 1.05;
}
.index-customization .swiper .swiper-slide:hover .pic .title {
  background-color: #2085F7;
}
.index-customization .swiper .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 74.556213%;
  transition: all 0.5s;
}
.index-customization .swiper .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.index-customization .swiper .pic .title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.45;
  padding: 0.8em 1.3em 0.8em 1.6em;
  color: #fff;
  background-color: rgba(42, 130, 228, 0.32);
  transition: all 0.5s;
}
.index-customization .swiper .pic .title h4 {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.5em;
}
.index-customization .swiper .pic .title span {
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.375em;
  white-space: nowrap;
}
.index-app {
  position: relative;
  overflow: hidden;
  height: 100vh;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
}
.index-app .index-title {
  padding: 3.125% 0;
  margin-bottom: 0;
  width: 100%;
}
.index-app .index-title .mycontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}
.index-app .index-title h3 {
  margin: 0;
}
.index-app .index-title h3 span {
  font-size: clamp(12px, 1.2vw, 22px);
  color: #2085F7;
  font-weight: 500;
}
.index-app .index-title a {
  color: #010101;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.375em;
  font-weight: 500;
}
.index-app .index-title a:hover {
  text-decoration: underline !important;
}
.index-app .swiper {
  flex: 1;
  width: 100%;
}
.index-app .swiper .swiper-slide:hover .pic .mask {
  background-color: rgba(42, 130, 228, 0.95);
}
.index-app .swiper .swiper-slide:hover .pic .mask::after {
  opacity: 0;
}
.index-app .swiper .swiper-slide:hover .pic .mask .brief {
  line-height: 1.45;
  opacity: 1;
  margin-top: 5em;
}
.index-app .swiper .pic {
  position: relative;
  width: 100%;
  height: 100%;
}
.index-app .swiper .pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index-app .swiper .pic .mask {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.5s;
}
.index-app .swiper .pic .mask::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(11, 97, 217, 0.95) 100%);
  transition: all 0.5s;
}
.index-app .swiper .pic .mask .text {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  line-height: 1.45;
  font-size: clamp(10px, 1.2vw, 20px);
  padding: 1em 3.5em;
  text-align: center;
}
.index-app .swiper .pic .mask .text h3 {
  font-size: clamp(14px, 1.25vw, 24px);
  margin-bottom: 1.5em;
}
.index-app .swiper .pic .mask .text em {
  display: block;
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
}
.index-app .swiper .pic .mask .text .brief {
  position: relative;
  overflow: hidden;
  font-size: clamp(12px, 1vw, 16px);
  margin-top: 0;
  line-height: 0;
  opacity: 0;
  transition: all 0.5s;
}
.index-app .swiper .pic .mask .text .brief p {
  transition: all 0s;
}
.index-app .swiper .pic .mask .num {
  width: 100%;
  font-size: clamp(30px, 5.208333vw, 100px);
  font-family: Arial, sans-serif;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  line-height: 1.2;
  font-weight: 700;
}
.index-news {
  position: relative;
  overflow: hidden;
  height: 100vh;
  padding-top: calc(100px + 2%);
}
.index-news .index-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}
.index-news .index-title .news-tab {
  font-size: clamp(14px, 1vw, 16px);
  display: flex;
  gap: 1em 2.5em;
}
.index-news .index-title .news-tab li {
  color: #808080;
  background-color: #f7f7f7;
  line-height: 2.75;
  border-radius: 2em;
  text-align: center;
  min-width: 7.75em;
  padding: 0 1em;
  cursor: pointer;
  transition: all 0.5s;
}
.index-news .index-title .news-tab .active {
  background-color: #FF8D1A;
  color: #fff;
  font-weight: 500;
  box-shadow: 0.1875em 0.1875em 1.125em 0.125em rgba(145, 75, 4, 0.25);
}
.index-news .swiper {
  display: none;
}
.index-news .swiper:first-child {
  display: block;
}
.index-news .swiper .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 66.0749507%;
}
.index-news .swiper .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.index-news .swiper .title {
  background-color: #f7f7f7;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.45;
  padding: 1em 1.625em 0.8125em 2em;
  border-bottom: 0.25em solid transparent;
  transition: all 0.5s;
}
.index-news .swiper .title h5 {
  color: #FF8D1A;
  margin-bottom: 0.25em;
}
.index-news .swiper .title h4 {
  font-size: clamp(14px, 1.2vw, 20px);
  color: #010101;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5em;
}
.index-news .swiper .title p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.875;
  height: 3.75em;
  color: #808080;
}
.index-news .swiper .title .more {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
}
.index-news .swiper .title .more em {
  color: #808080;
}
.index-news .swiper .title .more span {
  color: #808080;
  font-weight: 500;
  letter-spacing: 0.375em;
  transition: all 0.5s;
}
.index-news .swiper .swiper-slide:hover .pic img {
  scale: 1.05;
}
.index-news .swiper .swiper-slide:hover .title {
  border-bottom-color: #FF8D1A;
}
.index-news .swiper .swiper-slide:hover .title .more span {
  color: #FF8D1A;
  text-decoration: underline;
}
.index-contact {
  position: relative;
  overflow: hidden;
  background: url(../images/index-contact-bg.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  padding-top: calc(100px + 3%);
}
.index-contact .index-title {
  margin-bottom: 11.6875%;
}
.index-contact .index-title h2 {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 81.25%);
  background-clip: text;
}
.index-contact .index-title h3,
.index-contact .index-title h5 {
  color: #fff;
}
.index-contact form {
  width: 100%;
  max-width: 726px;
}
.index-contact form input {
  display: block;
  width: 100%;
  background-color: transparent;
  border-bottom: 1px solid #fff;
  font-size: clamp(14px, 1vw, 16px);
  color: #fff;
  font-weight: 500;
  outline: none;
  margin-bottom: 1.625em;
  height: 3.375em;
  padding: 0 0 0 1.875em;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  background-position: left center;
}
.index-contact form input::placeholder {
  color: #fff;
  font-weight: 500;
}
.index-contact form #name {
  background-image: url(../images/index-contact-person.png);
}
.index-contact form #tel {
  background-image: url(../images/index-contact-tel.png);
}
.index-contact form #msg {
  background-image: url(../images/index-contact-msg.png);
}
.index-contact form button {
  cursor: pointer;
  outline: none;
  width: 100%;
  background-color: #FFA600;
  font-size: clamp(14px, 1vw, 16px);
  color: #fff;
  line-height: 2.25;
  border-radius: 0.3125em;
  margin-top: 0.625em;
  transition: all 0.5s;
}
.index-contact form button:hover {
  box-shadow: 0 0 1em #FFA600;
}
.footer-slogan {
  background-color: #EFF3F6;
  border-bottom: 8px solid;
  border-image: linear-gradient(90deg, #0465DB 11.11%, #E38502 50%, #48AB4B 91.67%) 8;
  padding: 2.60416667% 0 2.96875%;
}
.footer-slogan .mycontainer {
  display: flex;
  justify-content: space-between;
  gap: 0.5em 1em;
}
.footer-slogan .mycontainer .block {
  text-align: center;
  line-height: 1.45;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.footer-slogan .mycontainer .block h4 {
  font-size: clamp(18px, 1.5625vw, 30px);
  font-weight: 700;
  margin-bottom: 0.3333em;
  color: transparent;
  background: linear-gradient(90deg, #383838, #1783FF, #48AB4B, #000000, #383838);
  background-size: 300%;
  background-clip: text;
  background-position: 0 0;
  animation: flowText 10s infinite linear;
}
.footer-slogan .mycontainer .block h5 {
  font-size: clamp(12px, 1vw, 16px);
  color: transparent;
  background: linear-gradient(90deg, #383838, #1783FF, #48AB4B, #000000, #383838);
  background-size: 300%;
  background-clip: text;
  background-position: 0 0;
  animation: flowText 10s infinite linear;
}
.footer-slogan .mycontainer .block:nth-child(1) h4,
.footer-slogan .mycontainer .block:nth-child(1) h5 {
  animation-delay: -1s;
}
.footer-slogan .mycontainer .block:nth-child(2) h4,
.footer-slogan .mycontainer .block:nth-child(2) h5 {
  animation-delay: -2s;
}
.footer-slogan .mycontainer .block:nth-child(3) h4,
.footer-slogan .mycontainer .block:nth-child(3) h5 {
  animation-delay: -3s;
}
.footer-slogan .mycontainer .block:nth-child(4) h4,
.footer-slogan .mycontainer .block:nth-child(4) h5 {
  animation-delay: -4s;
}
@keyframes flowText {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300% 0;
  }
}
footer {
  background-color: #EFF3F6;
}
footer .footer-top {
  padding: 2.5% 0 5%;
}
footer .footer-top .mycontainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 1em;
}
footer .footer-top .mycontainer .logo {
  width: 100%;
  margin-bottom: 5%;
  font-size: clamp(14px, 1.2vw, 20px);
}
footer .footer-top .mycontainer .logo img {
  width: 34.65em;
}
footer .footer-top .mycontainer h4 {
  font-size: clamp(16px, 1.2vw, 20px);
  color: #333;
  line-height: 1.5;
  margin-bottom: 1.875em;
}
footer .footer-top .mycontainer nav {
  width: 34%;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}
footer .footer-top .mycontainer nav ul {
  font-size: clamp(14px, 1vw, 16px);
  color: #a6a6a6;
  line-height: 1.875;
}
footer .footer-top .mycontainer nav ul li a {
  color: inherit;
}
footer .footer-top .mycontainer nav ul li a:hover {
  text-decoration: underline !important;
}
footer .footer-top .mycontainer address {
  width: 25%;
  font-size: clamp(14px, 1vw, 16px);
  color: #a6a6a6;
  line-height: 1.875;
}
footer .footer-top .mycontainer .ewm {
  display: flex;
  gap: 1em 1.8em;
  font-size: clamp(14px, 1.2vw, 20px);
  text-align: center;
}
footer .footer-top .mycontainer .ewm img {
  width: 7.5em;
  height: 7.5em;
  object-fit: scale-down;
}
footer .footer-top .mycontainer .ewm h5 {
  font-size: clamp(12px, 1vw, 16px);
  color: #a6a6a6;
  line-height: 1.45;
  margin-top: 0.625em;
}
footer .footer-bt {
  text-align: center;
  border-top: 1px solid #a6a6a6;
  font-size: clamp(12px, 1vw, 16px);
  color: #a6a6a6;
  line-height: 1.45;
  padding: 0.67708333% 0 0.88541667%;
}
footer .footer-bt a {
  color: inherit;
}
footer .footer-bt a:hover {
  text-decoration: underline !important;
}
#fullpage .active#section2 .about-slogan {
  animation: slideInDown 1.5s;
}
#fullpage .active#section2 .wrapper {
  animation: slideInUp 1.5s;
}
#fullpage .active#section3 .index-title {
  animation: slideInDown 1.8s;
}
#fullpage .active#section3 .prod-tab {
  animation: slideInDown 1.5s;
}
#fullpage .active#section3 .prod-swiper {
  animation: slideInUp 1.5s;
}
#fullpage .active#section4 .wrapper .lt {
  animation: slideInLeft 1.5s;
}
#fullpage .active#section4 .wrapper .rt {
  animation: slideInRight 1.5s;
}
#fullpage .active#section4 .wrapper-title {
  animation: slideInUp 1.8s;
}
#fullpage .active#section5 .index-title {
  animation: slideInDown 1.8s;
}
#fullpage .active#section5 .wrapper {
  animation: slideInDown 1.5s;
}
#fullpage .active#section5 .swiper {
  animation: slideInUp 1.5s;
}
#fullpage .active#section6 .index-title {
  animation: slideInDown 1.5s;
}
#fullpage .active#section6 .swiper {
  animation: slideInUp 1.5s;
}
#fullpage .active#section7 .index-title {
  animation: slideInDown 1.5s;
}
#fullpage .active#section7 .swiper {
  animation: slideInUp 1.5s;
}
#fullpage .active#section8 .index-title {
  animation: slideInDown 1.5s;
}
#fullpage .active#section8 .news-swiper {
  animation: slideInUp 1.5s;
}
#fullpage .active#section9 .index-title {
  animation: slideInDown 1.5s;
}
#fullpage .active#section9 form {
  animation: slideInUp 1.5s;
}
.anchor-fixed {
  position: relative;
  top: -100px;
}
.inner-banner {
  position: relative;
  overflow: hidden;
}
.inner-banner img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.bread-crumb {
  background-color: #f2f2f2;
  color: #010101;
  font-size: 14px;
  padding: 1% 0;
  line-height: 1.45;
}
.bread-crumb a {
  color: inherit;
}
.bread-crumb a:hover {
  text-decoration: underline !important;
}
.bread-crumb i {
  color: #808080;
  margin-right: 0.5em;
}
.inner-about-tab {
  padding: 20px 0 3.4375%;
}
.inner-about-tab ul {
  display: flex;
  justify-content: center;
  font-size: clamp(14px, 1vw, 16px);
  gap: 1em 5.5em;
}
.inner-about-tab ul li a {
  display: block;
  position: relative;
  line-height: 2.625;
  text-align: center;
  color: #010101;
  border: 1px solid #e5e5e5;
  padding: 0 1em;
  min-width: 10em;
  border-radius: 2em;
  transition: all 0.5s;
}
.inner-about-tab ul .active a {
  color: #fff;
  background-color: #0052C1;
  border-color: #0052C1;
}
.about-us .intro {
  margin-bottom: 2%;
}
.about-us .intro .title {
  font-size: clamp(16px, 1.35416667vw, 26px);
  color: #000;
  line-height: 1.45;
  margin-bottom: 1.923077em;
}
.about-us .intro .title::after {
  display: block;
  content: "";
  width: 6.0769231em;
  height: 0.23077em;
  background-color: #0052C1;
  margin-top: 0.5em;
}
.about-us .intro .brief {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #000;
  text-indent: 2em;
  line-height: 1.8889;
}
.about-us .wrapper {
  padding-bottom: 4.1667%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(10px, 1.2vw, 20px);
}
.about-us .wrapper .lt {
  width: 50%;
}
.about-us .wrapper .lt .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 1em;
}
.about-us .wrapper .lt .pic img {
  display: block;
  width: 100%;
}
.about-us .wrapper .rt {
  position: relative;
  z-index: 1;
  width: 52.6875%;
  border-radius: 1em;
  margin-left: -2.6875%;
  background: url(../images/about-adv-bg.jpg) no-repeat;
  background-size: cover;
  padding: 1.6em 2.4em;
  line-height: 1.45;
}
.about-us .wrapper .rt .block {
  color: #fff;
  margin-bottom: 0.9em;
}
.about-us .wrapper .rt .block:last-child {
  margin-bottom: 0;
}
.about-us .wrapper .rt .block h3 {
  font-size: clamp(14px, 1.35416667vw, 26px);
  font-weight: 500;
  margin-bottom: 0.5em;
}
.about-us .wrapper .rt .block h3 img {
  width: 1.53846154em;
  height: 1.53846154em;
  object-fit: scale-down;
  margin-left: 0.5em;
}
.about-us .wrapper .rt .block p {
  font-size: clamp(12px, 1vw, 16px);
}
.about-style {
  padding-bottom: 4.1667%;
}
.about-style .wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.about-style .wrapper .block {
  width: 31.25%;
  margin-bottom: 2.5%;
}
.about-style .wrapper .block .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 64%;
}
.about-style .wrapper .block .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.about-style .wrapper .block:hover .pic img {
  scale: 1.05;
}
.inner-content {
  padding: 4.1667% 0;
}
.prod-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.prod-list aside {
  position: sticky;
  top: 120px;
  width: 16.5%;
  max-height: calc(100vh - 120px);
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prod-list aside::after ::-webkit-scrollbar {
  display: none;
}
.prod-list aside .aside-title {
  font-size: clamp(16px, 1.35416667vw, 26px);
  color: #fff;
  font-weight: 500;
  background-color: #0052C1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 3.23076923em;
  line-height: 1.45;
  padding: 0 1em;
  margin-bottom: 0.269231em;
}
.prod-list aside .aside-lv1 {
  background-color: #fff;
}
.prod-list aside .aside-lv1 li {
  font-size: clamp(14px, 1.2vw, 22px);
}
.prod-list aside .aside-lv1 li div {
  color: #0052C1;
  padding: 0.5em 1.27273em 0.5em 2.09091em;
  height: 3.818182em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  transition: all 0.5s;
}
.prod-list aside .aside-lv1 li div:hover {
  background-color: rgba(0, 82, 193, 0.1);
}
.prod-list aside .aside-lv1 li a {
  flex: 1;
  display: block;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-right: 0.25em;
}
.prod-list aside .aside-lv1 li i {
  font-size: clamp(10px, 1.1vw, 18px);
  cursor: pointer;
  transition: all 0.5s;
  color: transparent;
  pointer-events: none;
}
.prod-list aside .aside-lv1 .active div {
  background-color: #0052C1 !important;
  border-color: #0052C1;
  color: #fff;
}
.prod-list aside .aside-lv1 .active div > i {
  transform: rotate(90deg);
  color: #fff;
}
.prod-list aside .aside-lv2 {
  display: none;
}
.prod-list aside .aside-lv2 li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(14px, 1.1vw, 18px);
  color: #010101;
  height: 2.7778em;
  padding: 0.5em 1em;
  transition: all 0.5s;
}
.prod-list aside .aside-lv2 li a {
  margin-right: 0;
}
.prod-list aside .aside-lv2 li:hover {
  color: #0052C1;
}
.prod-list aside .aside-lv2 .active {
  color: #0052C1;
}
.prod-list main {
  width: 79.75%;
}
.prod-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.prod-wrapper .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 1px solid #e5e5e5;
}
.prod-wrapper .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.prod-wrapper .title {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #000;
  padding: 0 0.5em;
  line-height: 3.555556;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #fff;
  transition: all 0.5s;
}
.prod-wrapper .block {
  width: 23.510972%;
  transition: box-shadow 0.5s;
}
.prod-wrapper .block:hover {
  box-shadow: 10px -10px 28px -6px rgba(56, 56, 56, 0.25);
}
.prod-wrapper .block:hover .pic img {
  scale: 1.05;
}
.prod-wrapper .block:hover .title {
  color: #0052C1;
}
.prod-intro {
  margin-bottom: 6.37958533%;
}
.prod-intro .intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.prod-intro .intro .lt {
  width: 39.184953%;
}
.prod-intro .intro .lt .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-color: #fff;
  transition: all 0.5s;
}
.prod-intro .intro .lt .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.5s;
}
.prod-intro .intro .lt .pic:hover img {
  scale: 1.05;
}
.prod-intro .intro .lt .picSwiper {
  margin-bottom: 6%;
}
.prod-intro .intro .lt .thumbSwiper .swiper-slide {
  cursor: pointer;
}
.prod-intro .intro .lt .thumbSwiper .swiper-slide .pic {
  opacity: 0.5;
}
.prod-intro .intro .lt .thumbSwiper .swiper-slide-thumb-active .pic {
  opacity: 1;
}
.prod-intro .intro .lt .thumbSwiper .swiper-button-prev,
.prod-intro .intro .lt .thumbSwiper .swiper-button-next {
  color: #0052C1;
  font-size: clamp(12px, 1.35416667vw, 26px);
  font-weight: 700;
}
.prod-intro .intro .lt .thumbSwiper .swiper-button-prev::after,
.prod-intro .intro .lt .thumbSwiper .swiper-button-next::after {
  font-size: inherit;
}
.prod-intro .intro .rt {
  width: 51.59489633%;
}
.prod-intro .intro .rt .title {
  font-size: clamp(18px, 1.25vw, 24px);
  padding-bottom: 0.5em;
  border-bottom: 1px solid #808080;
  margin-bottom: 0.8333em;
  line-height: 1.45;
}
.prod-intro .intro .rt .title h3 {
  color: #0052C1;
  font-weight: 700;
}
.prod-intro .intro .rt .brief {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #010101;
  line-height: 2;
  margin-bottom: 2.86458333vw;
}
.prod-intro .intro .rt .slogan {
  background-color: #f2f2f2;
  text-align: center;
  font-size: clamp(14px, 1.1vw, 18px);
  color: #010101;
  line-height: 1.45;
  padding: 1.055556em 1em;
}
.prod-intro .intro .rt .tel {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  text-align: center;
  font-size: clamp(14px, 1.1vw, 18px);
  color: #010101;
  line-height: 1.45;
  padding: 1.055556em 1em;
}
.prod-intro .intro .rt .tel b {
  font-weight: 700;
  color: #0567F0;
  font-size: clamp(16px, 1.25vw, 24px);
}
.prod-detail {
  margin-bottom: 3.3493%;
}
.prod-detail article {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #010101;
  line-height: 1.7222;
}
.prod-detail article h1 {
  font-size: 3em;
  font-weight: 700;
  margin-bottom: 0.5em;
}
.prod-detail article h2 {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 0.5em;
}
.prod-detail article h3 {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 0.8333em;
}
.prod-detail article h4 {
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 700;
  color: #0052C1;
  margin-bottom: 0.5em;
}
.prod-detail article img {
  margin: 1em 0;
}
.prod-detail article table {
  max-width: 100% !important;
  border: 5px solid #fff;
  border-collapse: separate;
  border-spacing: 0;
}
.prod-detail article table tr td {
  font-size: clamp(10px, 1vw, 16px);
  height: 3em;
  vertical-align: middle;
  padding: 0.25em 0.5em;
  border: 0.5px solid #fff;
  background-color: #F0F8FF;
  line-height: 1.45;
}
.prod-detail .pic {
  margin-top: 5.58214%;
}
.prod-detail .pic img {
  display: block;
  width: 100%;
}
.section-title {
  position: relative;
  width: 100%;
  font-size: clamp(16px, 1.2vw, 22px);
  color: #fff;
  line-height: 1.45;
  border-bottom: 2px solid #0052C1;
  margin-bottom: 3.987241%;
}
.section-title span {
  display: inline-block;
  position: relative;
  text-align: center;
  min-width: 8.318182em;
  padding: 0.5em 1em;
  background-color: #0052C1;
  border-radius: 4px 4px 0 0;
}
.rel-prod .swiper .swiper-slide .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 1px solid #e5e5e5;
}
.rel-prod .swiper .swiper-slide .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.rel-prod .swiper .swiper-slide .title {
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 3.555556;
  padding: 0 0.5em;
  color: #010101;
  border: 1px solid #e5e5e5;
  border-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: all 0.5s;
}
.rel-prod .swiper .swiper-slide:hover .pic img {
  scale: 1.05;
}
.rel-prod .swiper .swiper-slide:hover .title {
  color: #0052C1;
}
.rel-prod .swiper .swiper-pagination {
  position: relative;
  margin-top: 2.7778%;
  line-height: auto;
  bottom: 0;
}
.rel-prod .swiper .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  font-size: clamp(10px, 1.2vw, 20px);
  width: 0.5em;
  height: 0.5em;
  opacity: 1;
  background-color: #d8d8d8;
  transition: all 0.5s;
  margin: 0 0.15em;
}
.rel-prod .swiper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0052C1;
}
.inner-title {
  line-height: 1.45;
  margin-bottom: 3.189793%;
  text-align: center;
}
.inner-title h3 {
  font-size: clamp(16px, 1.25vw, 24px);
  color: #383838;
  font-weight: 700;
}
.inner-contact {
  padding: 1.5625% 0 8.59375%;
  height: auto;
}
.video-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.video-list aside {
  position: sticky;
  top: 120px;
  width: 24.6875%;
}
.video-list aside .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 9px;
}
.video-list aside .pic img {
  display: block;
  width: 100%;
}
.video-list main {
  width: 71.6875%;
}
.video-list main .video-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.video-list main .video-wrapper .block {
  width: 22.5806452%;
  margin-bottom: 2.6155187%;
}
.video-list main .video-wrapper .block .video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 175.2895753%;
  background-color: #000;
}
.video-list main .video-wrapper .block .video video {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.video-list main .video-wrapper .block .video .btn {
  position: absolute;
  bottom: 5%;
  left: 10%;
  font-size: clamp(12px, 1.2vw, 20px);
  width: 2.5em;
  height: 2.5em;
  background: url(../images/play.png) no-repeat;
  background-size: contain;
}
.video-list main .video-wrapper .block .video:hover .btn {
  animation: swing 1s;
}
.case-list .wrapper .block {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 4px;
  padding: 1.5625% 6.5% 1.5625% 3.125%;
  box-shadow: 7px 9px 41px -18px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
  margin-bottom: 2.375%;
}
.case-list .wrapper .block .lt {
  width: 31.811895%;
}
.case-list .wrapper .block .lt .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 60.869565%;
}
.case-list .wrapper .block .lt .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.case-list .wrapper .block .rt {
  width: 60.995851%;
  padding: 0.4167em;
  font-size: clamp(14px, 1.25vw, 24px);
}
.case-list .wrapper .block .rt .title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.25em;
}
.case-list .wrapper .block .rt .title h4 {
  position: relative;
  flex: 1;
  margin-right: 1em;
  color: #010101;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 1em;
}
.case-list .wrapper .block .rt .title h4::after {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 7.833333em;
  height: 1px;
  background-color: #a6a6a6;
}
.case-list .wrapper .block .rt .title h5 {
  font-size: clamp(10px, 1vw, 16px);
  color: #010101;
  white-space: nowrap;
}
.case-list .wrapper .block .rt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: clamp(12px, 1vw, 16px);
  color: #808080;
  line-height: 1.45;
}
.case-list .wrapper .block .rt span {
  display: inline-block;
  font-size: clamp(12px, 1vw, 16px);
  color: #0052C1;
  line-height: 2.625;
  min-width: 8.875em;
  padding: 0 1em;
  border: 1px solid #e5e5e5;
  text-align: center;
  margin-top: 1.8125em;
  transition: all 0.5s;
}
.case-list .wrapper .block:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.case-list .wrapper .block:hover .lt .pic img {
  scale: 1.05;
}
.case-list .wrapper .block:hover .rt h4 {
  color: #0052C1;
}
.case-list .wrapper .block:hover .rt span {
  color: #fff;
  background-color: #0052C1;
  border-color: #0052C1;
}
.news-detail .news-title {
  line-height: 1.45;
  text-align: center;
  margin-bottom: 3.5%;
}
.news-detail .news-title h3 {
  font-size: clamp(16px, 1.25vw, 24px);
  color: #010101;
  font-weight: 500;
  margin-bottom: 0.8333em;
}
.news-detail .news-title h5 {
  font-size: clamp(12px, 1vw, 16px);
  color: #666;
}
.news-detail article {
  font-size: clamp(14px, 1vw, 16px);
  color: #666;
  line-height: 1.45;
  min-height: 40vh;
  padding: 10px;
}
.article-tab {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 6.666667%;
}
.article-tab p {
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  margin-bottom: 1em;
}
.article-tab p a {
  color: inherit;
  transition: all 0.5s;
}
.article-tab p a:hover {
  color: #0052C1;
}
.news-list .filter-row {
  margin-bottom: 4.375%;
}
.news-list .filter-row form {
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(14px, 1.2vw, 22px);
  gap: 1em 1.818182em;
}
.news-list .filter-row form select {
  outline: none;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  height: 2.3636364em;
  padding: 0 2.2727273em 0 1.136364em;
  border-radius: 3em;
  width: 7.136364em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #808080;
  transition: all 0.5s;
}
.news-list .filter-row form select:hover {
  box-shadow: 8px 6px 23px -14px rgba(0, 0, 0, 0.25);
}
.news-list .filter-row form .select {
  position: relative;
}
.news-list .filter-row form .select i {
  position: absolute;
  right: 1.09091em;
  top: 50%;
  content: "\f0d7";
  font-size: clamp(12px, 1vw, 16px);
  transform: translate(0, -50%);
}
.news-list .filter-row form .select:nth-child(2) select {
  width: 12.045454em;
}
.news-list .filter-row form .input {
  position: relative;
  overflow: hidden;
}
.news-list .filter-row form .input input {
  outline: none;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  height: 2.3636364em;
  border-radius: 3em;
  padding: 0 2.727273em 0 1.136364em;
  width: 12.045454em;
}
.news-list .filter-row form .input button {
  position: absolute;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  width: 1.3636364em;
  height: 1.3636364em;
  right: 1em;
  top: 50%;
  transform: translate(0, -50%);
}
.news-list .filter-row form .input button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.news-list .news-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news-list .news-wrapper .block {
  width: 30.625%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  font-size: clamp(14px, 1.2vw, 20px);
  padding: 2.3em 0.8em;
  margin-bottom: 3.125%;
  transition: all 0.5s;
}
.news-list .news-wrapper .block .pic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 51.31004367%;
  border-radius: 0.3em;
}
.news-list .news-wrapper .block .pic img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.news-list .news-wrapper .block .title {
  line-height: 1.45;
  padding: 2.2em 0.5em 0;
}
.news-list .news-wrapper .block .title h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 2.9em;
  font-weight: 700;
  margin-bottom: 0.7em;
  color: #000;
}
.news-list .news-wrapper .block .title h5 {
  font-size: clamp(12px, 1vw, 16px);
  color: #a6a6a6;
}
.news-list .news-wrapper .block:hover {
  box-shadow: 0 0.5em 0 #e5e5e5, 0 1em 0 #ea0a2a, 0 2px 4px rgba(0, 0, 0, 0.25);
}
.news-list .news-wrapper .block:hover .pic img {
  scale: 1.05;
}
.news-list .news-wrapper .block:hover .title h4 {
  color: #0052C1;
}
.contact-us .contact-info .index-title h3 {
  margin: 0;
}
.contact-us .contact-info .wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact-us .contact-info .wrapper .lt {
  width: 32%;
  color: #000;
  font-size: clamp(14px, 1.2vw, 20px);
}
.contact-us .contact-info .wrapper .lt h4 {
  font-weight: 700;
  text-indent: 2em;
}
.contact-us .contact-info .wrapper .lt p img {
  width: 0.8em;
  height: 0.8em;
  object-fit: scale-down;
  margin-right: 0.8em;
}
.contact-us .contact-info .wrapper .rt {
  width: 63%;
}
.contact-us .contact-info .wrapper .rt .map {
  width: 100%;
  height: clamp(300px, 23.9583333vw, 460px);
}
.contact-us .contact-info .wrapper .rt .map iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-us .online-msg {
  margin-top: 5%;
}
.contact-us .online-msg .title {
  text-align: center;
  color: #383838;
  line-height: 1.45;
  margin-bottom: 3.125%;
}
.contact-us .online-msg .title h3 {
  font-size: clamp(20px, 2.3958333vw, 46px);
  margin-bottom: 0.43478261em;
}
.contact-us .online-msg .title h5 {
  font-size: clamp(12px, 1.2vw, 20px);
}
.contact-us .online-msg form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: clamp(14px, 1.2vw, 20px);
}
.contact-us .online-msg form input,
.contact-us .online-msg form textarea {
  outline: none;
  border: 1px solid #e5e5e5;
  width: 32.5%;
  margin-bottom: 2em;
  color: #000;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}
.contact-us .online-msg form input::placeholder,
.contact-us .online-msg form textarea::placeholder {
  color: #a6a6a6;
}
.contact-us .online-msg form input {
  height: 4em;
  padding: 0 3.5em 0 1.6em;
  background-position: right 1.5em center;
}
.contact-us .online-msg form #name {
  background-image: url(../images/msg-person.png);
}
.contact-us .online-msg form #tel {
  background-image: url(../images/msg-tel.png);
}
.contact-us .online-msg form #email {
  background-image: url(../images/msg-email.png);
}
.contact-us .online-msg form #content {
  background-image: url(../images/msg-company.png);
}
.contact-us .online-msg form textarea {
  width: 100%;
  height: 10.4em;
  padding: 1em 3.5em 1em 1.6em;
  background-position: right 1.5em top 1em;
}
.contact-us .online-msg form .btn-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.5em;
  gap: 0 5em;
}
.contact-us .online-msg form .btn-row button {
  outline: none;
  cursor: pointer;
  border-radius: 2em;
  line-height: 2.95;
  width: 16.75em;
  color: #fff;
  background-color: #0052C1;
  transition: all 0.5s;
}
.contact-us .online-msg form .btn-row button:hover {
  box-shadow: 0 0 1em #0052C1;
}
.contact-us .online-msg form .btn-row button[type='reset'] {
  background-color: #808080;
}
.contact-us .online-msg form .btn-row button[type='reset']:hover {
  box-shadow: 0 0 1em #808080;
}