@charset "utf-8";

/* 浮动布局 */
.fl {
  float: left;
}

.fr {
  float: right;
}



.clearfix:after {
  height: 0;
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
}

.clearfix {
  zoom: 1;
}

* html .clearfix {
  zoom: 1;
}

/* 最多显示一行 */
.line-text--one {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 最多显示两行 */
.line-text--two {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 最多显示三行 */
.line-text--three {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}


/* layout */
.wp {
  /* width: 1440px; */
  padding: 0 240px;
  margin: auto;
  position: relative;
}
.wpl{
  /* padding-left: calc(50% - 720px); */
  padding-left: 240px;
}
.wpr{
  /* padding-right: calc(50% - 720px); */
  padding-right: 240px;
}

/* 滚动条 */
::-webkit-scrollbar {
  /* 纵向滚动条 宽度 */
  width: 4px;
  /* 横向滚动条 高度 */
  height: 4px;
  /* 整体背景 */
  background: rgba(126, 126, 126, 0.1);
  /* 整体 圆角 */
  border-radius: 2px;
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background: #e23c32;
  border-radius: 2px;
}

/* 纵向滑块悬浮 */
::-webkit-scrollbar-thumb:vertical:hover {
  /* background: #cacbd3; */
}

/* 横向滑块悬浮 */
::-webkit-scrollbar-thumb:horizontal:hover {
  /* background: #cacbd3 */
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

.hidden{
  overflow-y: hidden;
  overflow-x: hidden;
}

/* 模块通用标题 */
.com-module-title{
  text-align: center;

}
.com-module-title h3{
  position: relative;
  z-index: 1;
	font-size: 48px;
	line-height: 40px;
	color: #f0efef;
  margin-bottom: -12px;
}
.com-module-title h1{
  position: relative;
	font-size: 101px;
	line-height: 80px;
  color: rgba(226,60,50,0.1);
  margin-bottom: -30px;
}
.com-module-title h4{
  position: relative;
  z-index: 2;
  font-size: 30px;
	line-height: 30px;
	color: #c70019;
}
.com-module-title h5{
  position: relative;
  z-index: 2;
  font-size: 24px;
	line-height: 30px;
	color: #e23c32;
}
.com-module-title h6{
  font-size: 16px;
	color: #cecece;
  line-height: 16px;
  margin-top: 15px;
  font-weight: normal;
}
.com-module-title .adorn{
  width: 52px;
	height: 3px;
	background-color: #e23c32;
  margin-top: 30px;
  display: inline-block;
}

/* 过度模块速度 */
.transition1s{
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.son-excessive *{
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
/* swiper切换原型按钮 */

.swiper-change{
  width: 146px;
  height: 46px;
  display: flex;
  justify-content: space-between;
}
.swiper-change .prev,.swiper-change .next{
  display: inline-block;
  width: 46px;
  height: 46px;
  border: solid 1px #838383;
  text-align: center;
  line-height: 44px;
  border-radius: 50%;
  font-size: 16px;
  color: #c9c9c9;
  position:relative;
}
.swiper-change .prev span,.swiper-change .next span{
	position:relative;
	z-index:10;
	color:#838383;
}

.swiper-change .prev:after,.swiper-change .next:after{
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background: #e23c32;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: scale(0);
	transition: all 0.4s;
}
.swiper-change .prev:hover:after,.swiper-change .next:hover:after{
	opacity: 1;
	transform: scale(1);
}
.swiper-change .prev:hover span,.swiper-change .next:hover span{
	color:#FFFFFF;
}
.swiper-change .prev:hover,.swiper-change .next:hover{
  border-color: #e23c32;
  color: #e23c32;
  cursor: pointer;
}

/* 波浪svg */

.waves{
  position: relative;
  height: 133px;
}
.waves .wave-svg {
  position: relative;
  width: 100%;
  height: 133px;
  margin-bottom: -7px; 
  min-height: 100px;
  max-height: 150px;
}
.waves .parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.waves .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.waves .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
      transform: translate3d(-90px, 0, 0);
  }
  100% {
      transform: translate3d(85px, 0, 0);
  }
}
.combigbtn{
  width: 150px;
  height: 40px;
  border: solid 1px #c9c9c9;
  line-height: 38px;
  border-radius: 50px;
  font-size: 18px;
  color: #c9c9c9;
  display: block;
  text-align: center;
  margin: 40px auto;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.combigbtn::after{
  left: -20px;
  z-index: -1;
  transform: translate(-20%, -50%);
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  content: "";
  width: 20px;
  height: 20px;
  background: #c70019;
  border-radius: 50px;
  position: absolute;
  top: 50%;
}
.combigbtn::before{
  right: -20px;
  z-index: -1;
  transform: translate(20%, -50%);
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  content: "";
  width: 20px;
  height: 20px;
  background: #c70019;
  border-radius: 50px;
  position: absolute;
  top: 50%;
}
.combigbtn:hover{
  color: #FFFFFF;
  border-color: #e23c32;
}
.combigbtn:hover::after{
  width: 200%;
  height: 200%;
}
.combigbtn:hover::before{
  width: 200%;
  height: 200%;
}