body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}
img {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
a {
  color: #fff;
  text-decoration: none;
}
a:visited {
  color: #fff;
}
.containter {
  width: var(--container-width);
  margin: 0 auto;
}
.container-1 {
  width: 1200px;
  margin: 0 auto;
}
header {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header img {
  transform: scale(var(--footer-block-image-sale));
}
header img:nth-child(2) {
  margin-right: var(--head-img-margin-right);
}
.main-menu,
.footer-menu {
  display: flex;
  color: #fff;
  background-color: #333333;
}
.footer-menu {
  border-bottom: 1px solid #666666;
}
.nostyle {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-box {
  display: flex;
  height: var(--Main-menu-height);
  font-size: var(--Main-menu-font-size);
}
.menu-box li {
  position: relative;
  width: calc(100% / 6);
  padding-right: 1px;
  line-height: var(--Main-menu-height);
  text-align: center;
  color: #fbfbfb;
  cursor: pointer;
  transition: 0.3s;
}
.menu-box li a {
  display: block;
  transition: 0.3s;
}
.menu-box li a:hover {
  background-color: #e02129;
}
.menu-box li:before {
  content: '';
  position: absolute;
  top: 35%;
  bottom: 35%;
  right: 0;
  width: 1px;
  z-index: 1;
  background-color: #545454;
}
.menu-box li:last-child:before {
  width: 0;
}
.tab-menu {
  background-color: #eeeeee;
}
.tab-box {
  --self-wei-color: #eee;
  --self-wei-hover-color: #e6212a;
  display: flex;
  height: var(--Main-menu-height);
  font-size: var(--Main-menu-font-size);
}
.tab-box li {
  position: relative;
  min-width: 80px;
  line-height: var(--Main-menu-height);
  text-align: center;
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
}
.tab-box li a {
  display: block;
  padding: 0 10px;
  color: #000;
}
.tab-box li:before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  bottom: 0;
  left: calc(50% - 4px);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--self-wei-color);
}
.tab-box li:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: var(--self-wei-color);
  z-index: 1;
}
.tab-box li:hover:after,
.tab-box li.active:after {
  background-color: var(--self-wei-hover-color);
}
.tab-box li:hover:before,
.tab-box li.active:before {
  border-bottom-color: var(--self-wei-hover-color);
}
.banner .banner-box {
  width: 100%;
  max-width: 1920px;
  min-height: 300px;
  margin: 0 auto;
}
.banner img {
  width: 100%;
}
.grid-row {
  display: grid;
  grid-gap: var(--index-grid-gap);
  padding: var(--index-grid-gap);
  background-color: #fff;
}
.grid-row > div {
  overflow: hidden;
  /* background-color: #838383; */
}
/* .grid-row > div img {
  width: 100%;
  height: 100%;
} */
.grid-row .grid-item {
  grid-row-start: 1;
  grid-row-end: 3;
}
.grid-row-1 {
  grid-template-columns: var(--index-grid-template-columns);
}
.grid-row-2 {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--second-grid-gap);
  padding: var(--index-grid-gap);
}
.grid-row-3 {
  grid-template-columns: 50% 50%;
  grid-gap: 2px;
  padding: 0;
}
.grid-row-3 > div {
  background-color: #e6212b;
}
.grid-row-3 .first-item {
  display: flex;
  flex-flow: column ;
  justify-content: space-between;
  align-items: flex-end;
}
.grid-row-3 .first-item img {
  width: unset;
  height: unset;
  transform: scale(var(--img-banner-sale));
}
.grid-row-3 .first-item .third-btn {
  padding: var(--third-button-padding);
}
.grid-row-3 .third-text-item {
  text-align: justify;
  text-indent: 2rem;
  font-size: var(--third-text-item-font-size);
  color: #fff;
  padding: var(--third-text-item-padding);
  line-height: var(--third-text-item-line-height);
}
.grid-row-about {
  grid-template-columns: 45% 55%;
}
.grid-row-about > div {
  background-color: #fff;
}
.grid-row-about .third-text-item {
  color: #000;
  padding-top: 0;
  padding-bottom: 0;
}
.grid-row-about p {
  margin-top: 0;
}
.grid-row-contact {
  grid-template-columns: 40% 6% 54%;
}
.grid-row-contact > div {
  background-color: #fff;
}
.grid-row-contact .tel-item img {
  height: auto;
}
.grid-row-contact .tel-item .contact-info {
  line-height: var(--third-text-item-line-height);
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #666;
  font-size: var(--Main-menu-font-size);
}
.row-block.gray {
  background-color: #e6e6e6;
}
.row-padding-1 {
  padding: 60px 0 40px;
}
.row-padding-2 {
  padding: 80px 0 0;
}
.img-banner {
  text-align: center;
  padding-bottom: 40px;
}
.img-banner img {
  transform: scale(var(--img-banner-sale));
}
.img-title img {
  transform: scale(var(--img-title-sale));
}
/**
 * product
 */
.small-banner {
  margin: 40px 0 20px;
  overflow: hidden;
}
.small-banner img {
  /* width: 53%; */
  transform: scale(65%);
  transform-origin: left bottom;
}
.detail-image {
  img {
    width: 100%;
  }
  p {
    margin: 0;
  }
}
.textline {
  --line-height: 80px;
  text-align: center;
  font-size: 18px;
  height: var(--line-height);
  line-height: var(--line-height);
  background-color: #c0c0c0;
}
/**
 * company
 */
.text-box {
  font-size: var(--Main-menu-font-size);
  color: #333;
  line-height: 2;
  margin: 20px 0 60px;
}
.detail-box .item {
  margin-bottom: 8px;
}
.detail-box img {
  max-width: 100%;
}
.com-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  padding: 0;
}
.com-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 100px;
  padding: 0;
}

/*
* Contact
*/
.info_ul {
  p {
    margin: 0;
  }
}

/**
 * footer
 */
.footer {
  background-color: #333;
  margin-top: var(--footer-margin-top-value);
}
.footer .ft-block {
  display: grid;
  height: 210px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
.footer .ft-block > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .ft-block img {
  transform: scale(var(--footer-block-image-sale));
}
.footer .ft-block .first {
  justify-content: flex-start;
}
.footer .ft-copyright {
  display: flex;
  height: 70px;
  justify-content: center;
  align-items: center;
  font-size: var(--Main-menu-font-size);
  border-top: 1px solid #666666;
  color: #c0c0c0;
}
@media (min-width: 1900px) {
  :root {
    --head-img-margin-right: 70px;
    --Main-menu-height: 72px;
    --Main-menu-font-size: 18px;
    --container-width: 1600px;
    --index-grid-gap: 12px;
    --index-grid-template-columns: 450px 557px 545px;
    --second-grid-gap: 35px;
    --third-grid-gap: 12px;
    --footer-block-image-sale: 1.1;
    --footer-margin-top-value: 60px;
    --img-banner-sale: 1;
    --img-title-sale: 0.7;
    --third-text-item-padding: 40px 50px;
    --third-text-item-font-size: 18px;
    --third-text-item-line-height: 2.2;
    --third-button-padding: 0 30px 20px 0;
  }
}
@media (max-width: 1900px) {
  :root {
    --head-img-margin-right: 0px;
    --Main-menu-height: 60px;
    --Main-menu-font-size: 16px;
    --container-width: 1200px;
    --index-grid-gap: 6px;
    --index-grid-template-columns: 336px 423px 417px;
    --second-grid-gap: 20px;
    --third-grid-gap: 8px;
    --footer-block-image-sale: 0.9;
    --footer-margin-top-value: 40px;
    --img-banner-sale: 0.8;
    --img-title-sale: 0.53;
    --third-text-item-padding: 20px 30px;
    --third-text-item-font-size: 16px;
    --third-text-item-line-height: 2;
    --third-button-padding: 0 20px 10px 0;
  }
}