html {
  font-size: calc(100vw / 1920); color:#333;
}
a:link{ color:#333}
@font-face {
  font-family: "Bold";
  src: url(../fonts/SourceHanSansCN-Bold.otf);
}
@font-face {
  font-family: "Heavy";
  src: url(../fonts/SourceHanSansCN-Heavy.otf);
}
@font-face {
  font-family: "Medium";
  src: url(../fonts/SourceHanSansCN-Medium.otf);
}
@font-face {
  font-family: "Regular";
  src: url(../fonts/SourceHanSansCN-Regular.otf);
}
@font-face {
  font-family: "Normal";
  src: url(../fonts/SourceHanSansCN-Normal.otf);
}
@font-face {
  font-family: "Light";
  src: url(../fonts/SourceHanSansCN-Light.otf);
}
@font-face {
  font-family: "Din-Medium";
  src: url(../fonts/DIN-MEDIUM.OTF);
}
@font-face {
  font-family: "book";
  src: url(../fonts/NEUTRAFACE2TEXT-BOOK_0.OTF);
}
:root {
  --swiper-theme-color: #fff;
  --swiper-theme
  --swiper-navigation-size: 22px;
  --active-color: #C90000;
  --title-color: #333;
}
* { box-sizing: border-box; }
body {
  font-family: "Regular", "Microsoft YaHei", Arial;
  color: var(--title-color);
  overflow: hidden;
}
@media screen and (max-width: 1280px) {
  html {
    font-size: calc(1280px / 1920);
  }
  body {
  }
}
a { text-decoration: none; }
.img { vertical-align: middle; }
body, ul, ul li, h1, h2, h3, h4, h5, h6, p {
  padding: 0; margin: 0; list-style: none;
}
.bold { font-family: "Bold"; }
.heavy { font-family: "Heavy"; }
.light { font-family: "Light"; }
.f { display: flex; }
.f-hc { justify-content: center; }
.f-ha { justify-content: space-around; }
.f-jus { justify-content: space-between; }
.f-ver { align-items: center; }
.p-hc {
  position: absolute;
  left: 50%; transform: translateX(-50%);
}
.p-ver {
  position: absolute;
  top: 50%; transform: translateY(-50%);
}
.p-center {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.ellipsis {
  overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
}
.row-ellipsis {
  display: -webkit-box !important;    
  -webkit-box-orient: vertical;    
  -webkit-line-clamp: 3;    
  overflow: hidden;
}
.hide {
  display: none !important;
}


.ws-header {
  display: flex;
  align-items: center;
}
.ws-header a.logo {
  margin-left: 27rem;
}
.ws-header a.logo img {
  height: 63rem;
}
.ws-header .navs {
  flex: 1;
}
.ws-header .menu-trigger {
  width: 90rem; height: 90rem;
  background-color: var(--active-color);
}
.ws-header .menu-trigger span {
  position: relative;
  width: 28rem; height: 2px;
  background-color: #fff;
}
.ws-header .menu-trigger span:before,
.ws-header .menu-trigger span:after {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  content: "";
  background-color: #fff;
}
.ws-header .menu-trigger span:before {
  top: -10rem;
}
.ws-header .menu-trigger span:after {
  bottom: -10rem;
}
.ws-header .tele {
  padding: 0 20rem;
  height: 90rem;
  font-size: 16rem; color: #555;
  background-color: #F9F9F9;
}
.ws-header .tele img {
  height: 20rem;
  margin-right: 8rem;
}
.ws-header .navs ul {
  padding-right: 46rem;
  justify-content: flex-end;
}
.ws-header .navs ul li{
  position: relative;
  margin-left: 55rem;
}
.ws-header .navs ul li a.primary {
  font-size: 18rem;
  color: var(--title-color);
  height: 90rem;
  display: flex; align-items: center;
}
.ws-header .navs ul li .secondary {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 140rem;
  box-shadow: 0 10rem 10rem rgba(0, 0, 0, 0.2);
  background-color: #fff;
  text-align: center;
  transition: all .4s ease-in-out;
  max-height: 0; overflow: hidden;
}
.ws-header .navs ul li:hover .secondary {
  max-height: calc(100vh - 90rem);
  opacity: 1;
}
.ws-header .navs ul li .secondary dl {
  margin: 0; padding: 10rem 0;
}
.ws-header .navs ul li .secondary dl dd {
  margin: 0;
  padding: 0;
}
.ws-header .navs ul li .secondary dl dd a {
  display: flex; align-items: center; justify-content: center; 
  padding: 0 20rem;
  height: 40rem;
  font-size: 16rem; color: var(--title-color);
  line-height: 24rpx;
  white-space: nowrap;
}
.ws-header .navs ul li .secondary dl dd a:hover {
  background-color: var(--active-color);
  color: #fff;
}

.index-swiper,
.first, .second, .prod, .sale, .base, .news {
  height: calc(100vh - 90rem);
}
.index-swiper .swiper-slide {
  position: relative;
}
.first .swiper {
  height: 100%;
}
.first .swiper-slide {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.first .container {
  margin: 0 auto;
  width: 1280rem;
}
.yaoshun {
  display: flex;
  align-items: center;
}
.yaoshun img {
  width: 575rem;
}
.yaoshun .line {
  margin: 33rem 0 48rem 10rem;
  display: block;
  width: 50rem; height: 6rem;
  background-color: #fff;
}
.yaoshun h1 {
  margin-bottom: 22rem;
  font-size: 60rem; line-height: 60rem;
  font-family: "Bold";
  color: #fff;
}
.yaoshun h2 {
  margin-bottom: 22rem;;
  font-size: 30rem; line-height: 30rem;
  font-family: "Light";
  color: #fff;
}
.yaoshun p {
  max-width: 632rem;
  font-size: 18rem; line-height: 22rem;
  font-family: "Light";
  color: #fff;
}
.first .swiper-slide {
}
.first .swiper-slide-active {
  animation-name: backgroupScale;
  animation-duration: 4s;
  background-position: 50% 50%;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.first .swiper-slide .container {
  transform: translateY(100px);
  transition: all 2s;
  opacity: 0;
}
.first .swiper-slide.swiper-slide-active .container {
  transform: translateY(0);
  opacity: 1;
}
.first .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #e40000;
}
.first .swiper-slide span.line {
  
}
.first .swiper-slide h2 {
  
}
.first .swiper-slide h2 {
  
}
.first .swiper-slide p {
  
}
@keyframes backgroupScale {
  0% {
    background-size: 110% 110%;
  }
  100% {
    background-size: 100% 100%;
  }
}
@keyframes backgroupScale2 {
  0% {
    background-size: 110% auto;
  }
  100% {
    background-size: 100% auto;
  }
}


.second,
.sale{
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.second .container {
  margin: 0 auto;
  width: 1600rem;
  padding: 86rem 0 0;
  position: relative;
}
.second .left {
  position: relative;
  z-index: 1;
}
.second .i-header {
  max-width: 800rem;
  margin-bottom: 30rem;
}
.second .i-header h2,
.news .i-header h2{
  margin-bottom: 14rem;
  font-size: 36rem; line-height: 36rem;
  font-family: "Bold";
}
.second .i-header h3,
.news .i-header h3{
  font-size: 18rem; line-height: 26rem;
  font-family: "Light";
}
.second .i-header .line,
.news .i-header .line{
  display: block;
  margin: 32rem 0 17rem;
  width: 20rem; height: 3rem;
  background-color: var(--title-color);
}
.second .i-header p {
  font-size: 30rem; line-height: 38rem;
}
.second .i-body {
  max-width: 800rem;
  font-size: 16rem; line-height: 26rem;
  color: #656565;
}
.second .i-count {
  margin-top: 40rem;
}
.second .i-count ul {
  width: 1320rem;
}
.second .i-count ul li {
  width: 25%;
  height: 265rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #fff;
}





.second .i-count ul li:hover {
  background-color: var(--active-color);
}
.second .i-count ul li label {
  font-size: 18rem; line-height: 28rem;
  color: #434343;
}
.second .i-count ul li p {
  font-size: 80rem;
  color: var(--active-color);
  font-family: "book";
  font-style: italic;
  line-height: 100px;
}
.second .i-count ul li:hover label,
.second .i-count ul li:hover p {
  color: #fff;
}
.second .right {
  position: absolute;
  top: 86rem; right: 0;
  z-index: 0;
  width: 710rem; height: 745rem;
  overflow: hidden;
}
.second .right img {
  width: 100%;
}

.prod {
  display: flex;
}
.prod .sec {
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  width: 20%; height: 100%;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.prod .sec:after {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
  z-index: 1;
  transition: all 0.4s ease-in-out;
}
.prod .sec.on {
  width: 40%;
  background-size: auto 120%;
}
.prod .sec.on:after {
  opacity: 0;
}
.prod .lim {
  position: relative;
  z-index: 2;
  width: 392rem;
  height: 595rem;
  padding: 35rem 48rem 0 55rem;
}
.prod .lim .cover {
  margin-bottom: 45rem;
  height: 56rem;
  display: flex; align-items: center;
}
.prod .lim .cover img {
  max-height: 100%;
}
.prod .i-header {
  margin-bottom: 80rem;
}
.prod .i-header h2 {
  margin-bottom: 16rem;
  font-size: 32rem; line-height: 32rem;
  color: #fff;
}
.prod .i-header p {
  font-size: 18rem; line-height: 28rem;
  color: #fff;
}
.prod .i-body {
  margin-bottom: 78rem;
  height: 120rem;
  font-size: 18rem; line-height: 30rem;
  color: #fff;
  line-clamp: 4;
  -webkit-line-clamp: 4;
}
.prod .i-body p {
  display: none;
}
.prod .i-footer a {
  border: 1px solid #fff;
  width: 148rem; height: 45rem;
  border-radius: 23rem;
  display: flex; align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18rem;
}
.prod .sec.on .lim {
  background-color: rgba(201, 0, 0, 0.7);
}
.prod .sec.on .i-body img {
  display: none;
}
.prod .sec.on .i-body p {
  display: block;
}
.tans2 {
  transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sale {
  display: flex;
  align-items: center;
}
.sale .container {
  width: 1600rem;
  margin: 0 auto;
}
.sale .i-header {
  text-align: center;
}
.sale .i-header img {
  width: 74rem;
}
.sale .i-header h2 {
  margin: 22rem 0 26rem;
  font-size: 42rem; line-height: 42rem;
  font-family: "Bold";
}
.sale .i-header p {
  margin: 0 auto 40rem;
  width: 1110rem;
  font-size: 16rem; line-height: 27rem;
}
.sale .i-body {
  display: flex;
  justify-content: space-between;
}
.sale .sec {
  width: 428rem;
  height: 500rem;
}
.sale img.img {
  width: 100%;
  position: relative; z-index: 0;
  vertical-align: top;
}
.sale .header {
  position: relative; z-index: 1;
  margin: -74rem auto 0;
  width: 354rem; height: 200rem;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.sale .header .icon img {
  height: 61rem;
}
.sale .header h3 {
  margin-top: 12rem;
  font-weight: 400;
  font-size: 28rem; line-height: 28rem;
}
.sale .header h3:after {
  margin: 10rem auto 6rem;
  display: block;
  content: "";
  width: 40rem; height: 3rem;
  background-color: var(--title-color);
}
.sale .header p {
  font-size: 16rem; line-height: 27rem;
  color: #656565;
}
.sale .sec:hover .header .icon img {
  filter: brightness(100);
}
.sale .sec:hover .header {
  margin-top: -28rem;
  width: 100%;
  background-color: var(--active-color);
}
.sale .sec:hover .header h3 {
  color: #fff;
}
.sale .sec:hover .header h3:after {
  background-color: #fff;
}
.sale .sec:hover .header p {
  color: #fff;
}

.base .swiper {
  position: relative; z-index: 1;
  height: 100%;
}
.base .swiper-slide {
  position: relative;
}
.base .swiper-slide .container {
  width: 1124rem;
  margin: 0 auto;
  padding: 60rem 0 0;
  text-align: center;
  color: #fff;
}
.base .container img {
  width: 71rem;
}
.base .container h2 {
  margin: 17rem 0 26rem;
  font-size: 42rem; line-height: 42rem;
  font-family: "Bold";
}
.base .container p {
  font-size: 16rem; line-height: 27rem;
}
.base .cir-index {
  position: absolute; z-index: 2;
  top: 340rem;
  left: 50%; transform: translateX(-50%);
  display: flex;
}
.base .cir-index a {
  position: relative;
  margin: 0 77rem;
  width: 226rem; height: 226rem;
  border-radius: 50%; overflow: hidden;
  transition: all .4s;
  border: 3rem solid transparent;
}
.base .cir-index a img {
  position: relative; z-index: 0;
  width: 100%;
}
.base .cir-index p {
  position: absolute; z-index: 1;
  left: 0; bottom: 0; width: 100%; height: 54rem;
  font-size: 18rem; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.base .cir-index a:hover {
  border-color: #fff;
}
.base .sq-index {
  position: absolute; z-index: 2;
  top: 620rem;
  left: 50%; transform: translateX(-50%);
  display: flex;
}
.base .sq-index a {
  margin: 0 23rem;
  padding: 0 26rem 0 30rem;
  width: 475rem; height: 138rem;
  background-color: rgba(255, 255, 255, 0.8);
}
.base .sq-index a img.plus {
  width: 12rem;
}
.base .sq-index a.on,
.base .sq-index a:hover{
  transform: translateY(-20rem);
  background-color: #fff;
}
.base .sq-index a .cover {
  width: 179rem; height: 100rem;
  overflow: hidden;
  flex-shrink: 0;
}
.base .sq-index a .cover img {
  width: 100%;
}
.base .sq-index a .infs {
  margin-left: 20rem;
  margin-right: 10rem;
  flex: 1;
}
.base .sq-index a .infs p.t {
  margin-bottom: 17rem;
  font-size: 18rem; line-height: 18rem;
  color: #454545;
  font-family: "Bold";
}
.base .sq-index a .infs p.d {
  font-size: 14rem; line-height: 24rem;
  color: #656565;
}
.base .swiper-button-next {
  right: 98rem;
}
.base .swiper-button-prev {
  left: 98rem;
}
.base .swiper-button-next,
.base .swiper-button-prev {
  display: flex; align-items: center;
  justify-content: center;
  width: 60rem; height: 60rem;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: all .4s;
}
.base .swiper-button-next:after,
.base .swiper-button-prev:after {
  font-size: 20px;
}
.base .swiper-button-next:hover,
.base .swiper-button-prev:hover {
  border-color: #b01620;
  background-color: #b01620;
}

.news {
  display: flex;
  align-items: center;
}
.news .container {
  width: 1600rem;
  margin: 0 auto;
}
.news .container:nth-child(1) {
  /* padding-top: 110rem;
  padding-bottom: 23rem; */
}
.news .index-es a {
  margin-left: 22rem;
  padding: 0 18rem;
  height: 34rem;
  display: flex;
  align-items: center;
  border-radius: 17rem;
  background-color: #DFDFDF;
  font-size: 16rem; font-family: "Light";
  color: #555;
}
.news .index-es a.on {
  background-color: var(--active-color);
  color: #fff;
}
.news a.more {
  margin-left: 18rem;
  font-size: 16rem; line-height: 16rem;
  color: #999;
}
.news .left {
  width: 780rem;
  flex-shrink: 0;
}
.news .new-rec {
  background-color: #fff;
}
.news .new-rec .cover {
  display: block;
  height: 424rem;
  overflow: hidden;
}
.news .new-rec .cover img {
  width: 100%;
}
.news .new-rec .n-header,
.news .right ul li{
  position: relative;
  padding: 34rem 24rem 20rem;
}
.news .new-rec .n-header h2,
.news .right ul li h2{
  margin-bottom: 10rem;
}
.news .new-rec .n-header h2 a,
.news .right ul li h2 a{
  font-size: 22rem; line-height: 36rem;
  color: var(--title-color);
}
.news .new-rec:hover .n-header h2 a,
.news .right ul li:hover h2 a{
  color: var(--active-color);
}
.news .new-rec .n-header p,
.news .right ul li p{
  margin-bottom: 26px;
  height: 48rem;
  font-size: 16rem; line-height: 24rem;
  color: #878787;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.news .new-rec .n-header .time,
.news .right ul li .time{
  font-size: 14rem; line-height: 14rem;
  color: #999;
}
.news .new-rec .n-header:after,
.news .right ul li:after{
  margin-top: 10px;
  position: relative; z-index: 1;
  display: block;
  content: "";
  width: 100%; height: 3px;
  background-color: #cfcfcf;
}
.news .new-rec .n-header:before,
.news .right ul li:before{
  position: absolute; z-index: 2;
  left: 24rem; right: calc(100% - 48rem - 130rem);
  bottom: 20rem;
  height: 3px;
  content: "";
  background-color: var(--active-color);
  transition: all .4s;
}
.news .new-rec:hover .n-header:before,
.news .right ul li:hover:before{
  right: 24rem;
}
.news .right ul li {
  position: relative;
  padding-top: 29rem;
  margin-bottom: 16rem;
  background-color: #fff;
}
.news .right {
  margin-left: 36rem;
  flex: 1;
}
.news .right ul li p {
  margin-bottom: 20rem;
}

.ws-footer {
  background-color: #343434;
}
.ws-footer .container {
  width: 1600rem;
  margin: 0 auto;
}
.ws-footer .p1 {
  padding: 82rem 0 110rem;
}
.ws-footer .f-header a.logo img {
  width: 280rem;
}
.ws-footer .f-header p {
  color: #fff;
}
.ws-footer .f-header p.phone {
  margin-top: 56rem;
  font-family: "Din-Medium";
  font-size: 40rem; line-height: 40rem;
}
.ws-footer .f-header p.addr {
  margin-top: 6rem;
  font-size: 14rem; line-height: 32rem;
}
.ws-footer .links {
  flex: 1;
  justify-content: flex-end;
  margin-right: 20rem;
}
.ws-footer .links li {
  width: 192rem;
}
.ws-footer .links li p.t {
  font-size: 18rem; line-height: 18rem;
  color: #fff;
}
.ws-footer .links li p.t:after {
  margin-top: 16rem;
  display: block;
  width: 14px; height: 2px;
  content: "";
  background-color: var(--active-color);
}
.ws-footer .links li dl{
  margin-top: 18rem;
}
.ws-footer .links li dl dd {
  margin-left: 0;
}
.ws-footer .links li dl dd a {
  font-size: 14rem; line-height: 36rem;
  color: #999;
}
.ws-footer .links li dl dd a:hover {
  color: #fff;
}
.ws-footer .qr {
  width: 182rem;
}
.ws-footer .qr .cover {
  height: 182rem;
  overflow: hidden;
}
.ws-footer .qr .cover img {
  width: 100%;
}
.ws-footer .qr p {
  margin-top: 20px;
  text-align: center;
  font-size: 14rem; line-height: 14px;
  color: #999;
}
.ws-footer .p2 {
  border-top: 1px solid #494949;
  height: 86rem;
  font-size: 14rem; line-height: 24rem;
  color: #fff;
}
.ws-footer .p2 a {
  color: #fff;
}

.tans {
  transition: all 0.4s ease-in-out;
}

.ws-header {
  position: relative; z-index: 10;
}
a.menu-trigger span,
a.menu-trigger span:before,
a.menu-trigger span:after {
  transition: all .4s;
}
.open a.menu-trigger span {
  background-color: transparent;;
}
.open a.menu-trigger span:before,
.open a.menu-trigger span:after{
  left: 50%; top: 50%;
}
.open a.menu-trigger span:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.open a.menu-trigger span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.menu-hi {
  position: fixed;
  top: 90rem; right: -650rem;
  height: calc(100vh - 90rem);
  overflow: auto;
  padding: 0 46rem 0 48rem;
  width: 650rem; background-color: #fff;
  z-index: 10;
}
.open .menu-hi {
  right: 0;
}
.menu-hi .site-map {
  padding: 50rem 0 24rem;
  border-bottom: 1px solid #ccc;
}
.menu-hi .site-map p.t {
  margin-bottom: 2px;
  font-size: 40rem; line-height: 40rem;
  color: var(--active-color);
}
.menu-hi .site-map a {
  font-size: 14px; color: var(--title-color);
}
.menu-hi ul {
  padding: 30rem 0 0;
}
.menu-hi ul li {
  margin-bottom: 30rem;
}
.menu-hi ul li:last-child {
  margin-bottom: 0;;
}
.menu-hi ul a.primary {
  font-size: 16px;
  line-height: 26px; color: #333;
}
.menu-hi ul dl {
  display: flex;
}
.menu-hi ul dl dd {
  margin-left: 0;
  margin-right: 26rem;
}
.menu-hi ul dl dd a {
  font-size: 14px; line-height: 24px;
  color: #666;
}
.menu-hi ul dl dd a:hover {
  color: var(--active-color);
}