@import url(./main.css);
@import url(./commer.css);
@import url(./mbnav.css);
@import url(./banner.css);
body { --base-color: #e6212a; min-height: 100vh; display: flex; flex-direction: column; }

.page-main { flex: 1; }

.title { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; margin-bottom: 1rem; }

.title .title_cn { color: var(--base-color); margin: 5px 0; font-size: 32px; font-weight: bold; letter-spacing: 6px; }

.title .title_en { color: #999; font-size: 16px; display: inline-block; margin-bottom: 20px; }

.title::after { content: ""; position: absolute; width: 80px; background-color: var(--base-color); height: 3px; left: 50%; transform: translateX(-50%); bottom: 0px; }

.hover-scale { cursor: pointer; }

.hover-scale:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

.hover-translateY { cursor: pointer; }

.hover-translateY:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; -webkit-transform: translateY(-2%); -moz-transform: translateY(-2%); -ms-transform: translateY(-2%); -o-transform: translateY(-2%); transform: translateY(-2%); }

.wz-col { width: 100%; }

.wz-row { padding: 10px; box-sizing: border-box; }

.wz-rowbox { width: 100%; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; background-color: #fff; }

.wz-img { overflow: hidden; object-fit: contain; }

.wz-font { flex: 1; }

.wz-text { color: #444; }

.why { height: 700px; }

.why .wz-colbox { margin: 0 -20px; }

.why .wz-row { padding: 20px; }

.why .wz-rowbox { padding: 0px; box-shadow: none; background-color: transparent; }

.why .wz-h1 { background-image: url("../images/pinpai.png"); background-size: cover; background-repeat: no-repeat; background-position: center; aspect-ratio: 206 / 222; width: 100%; margin-bottom: 10px; color: #fff; }

.why .wz-h1:hover { background-image: url("../images/pinpai_hover.png"); }

.why .wz-text { text-align: center; }

@media only screen and (max-width: 768px) { .why { height: auto; }
  .why .wz-font { align-items: center; }
  .why .wz-h1 { width: 60%; } }

@media only screen and (max-width: 480px) { .why .wz-font { align-items: center; }
  .why .wz-h1 { width: 40%; }
  .why .wz-text { width: 80%; } }

.how { background: #d9252e url("../images/liucheng.png") no-repeat center bottom; height: 700px; }

.how .wz-colbox { margin: 0 -30px; }

.how .wz-row { padding: 30px; }

.how .wz-rowbox { padding: 20px; position: relative; height: 120px; }

.how .wz-rowbox:hover { opacity: 0.5; }

.how .wz-rowbox .arrow { position: absolute; right: -45px; top: 50%; transform: translateY(-50%); }

.how .wz-font { margin-top: 20px; }

.how .wz-text { line-height: 2; font-size: 16px; color: #fff; position: relative; padding-left: 20px; }

.how .wz-text:before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); display: inline-block; width: 0; height: 0; border-left: 5px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

.how .wz-title { cursor: pointer; font-weight: bold; color: var(--base-color); }

.how .bottom { margin-top: 30px; padding: 6px 60px; border-radius: 10px; background-color: #e14d57; }

.how .bottom a { color: #fff; }

.how .bottom img { margin-right: 10px; }

@media only screen and (max-width: 1043px) { .how .wz-row { padding: 20px; }
  .how .wz-rowbox { height: 100px; }
  .how .wz-rowbox .arrow { width: 35px; right: -40px; }
  .how .wz-title { font-size: 22px; }
  .how .wz-text { font-size: 15px; } }

@media only screen and (max-width: 768px) { .how { height: auto; }
  .how .wz-row { padding: 10px 60px; }
  .how .wz-rowbox { width: 60%; padding: 10px; height: auto; }
  .how .wz-rowbox .arrow { display: none; width: 30px; right: -30px; }
  .how .pb30 { padding-bottom: 0; } }

.in-about .about-title { background: #d9252e url("../images/liucheng.png") no-repeat bottom; height: 260px; text-align: center; width: 100%; }

@media only screen and (max-width: 768px) { .in-about .about-title { height: 130px; }
  .in-about .text-wrap { font-size: 14px; }
  .in-about .text-wrap p { width: 100%; } }

.service { background: none; height: auto; }

.service .wz-colbox { padding-bottom: 5%; }

.service .wz-row:nth-child(1) .wz-rowbox { background-color: var(--base-color); }

.service .wz-row:nth-child(1) .wz-rowbox:hover { opacity: 1; }

.service .wz-row:not(:first-child):hover .wz-rowbox { background-color: var(--base-color); opacity: 1; }

.service .wz-row:not(:first-child):hover .wz-rowbox .arrow.hover { display: block; }

.service .wz-rowbox { background-color: #202221; }

.service .wz-rowbox .arrow.hover { display: none; }

.service .wz-title { color: #fff; }

.service .wz-text { color: #2e2e2e; }

.service .wz-text:before { border-left-color: #2e2e2e; }

.service .wz-text:hover { color: var(--base-color); }

.service-bottom { border-top: solid 1px #dadada; }

.service-bottom .wz-row { padding: 20px; }

.service-bottom .wz-rowbox { background-color: var(--base-color); width: 20%; padding: 30px; }

.service-bottom .wz-col { padding-top: 5%; }

.service-bottom .wz-colbox { margin: 0 -20px; }

.service-bottom .wz-font { width: 70%; flex: none; }

.service-bottom .wz-title { color: #fff; }

@media only screen and (max-width: 1043px) { .service .wz-row:not(:first-child):hover .wz-rowbox .arrow.hover { display: none; }
  .service .wz-rowbox .arrow { width: 20px; right: -30px; } }

@media only screen and (max-width: 768px) { .service-bottom .wz-row { flex-direction: column; justify-content: flex-start; align-items: start; padding: 10px 30px; }
  .service-bottom .wz-rowbox { width: auto; padding: 10px; }
  .service-bottom .wz-font { margin-top: 15px; width: 100%; } }

.about .tabs .item { width: 90px; height: 40px; line-height: 40px; text-align: center; }

.about .tabs .item .active { width: 90px; height: 40px; line-height: 40px; width: 100%; height: 100%; display: block; box-sizing: border-box; color: #fff; background-color: var(--base-color); }

.about .join-wrap { background-color: var(--base-color); }