.out-wrapper {
  margin: 0 auto;
  width: 100%;
  min-width: 1400px;
  background: #F4F6FB;
}

.sub-wrapper {
  background: url('../image/product/liter-top-bg.png') no-repeat;
  background-position: 100% 0;
}

.three-wrapper {
  background: url('../image/product/liter-bottom-bg.png') no-repeat;
  background-position: 0 100%;
}

.inter-wrapper {
  margin: 0 auto;
  width: 100%;
  min-width: 1400px;
  background: #fff;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  min-width: 1400px;
}

.container {
  margin: 0 auto;
  width: 1400px;
}


.main-bg {
  background: #F4F6FB;
}

.gradient-bg {
  /* IE9 以前浏览器背景色 */
  background: #DE2F3C;
  /* IE10+ 和现代浏览器使用标准渐变语法 */
  background: linear-gradient(90deg, #DE2F3C 20%, #0176E3 100%) !important;
  background: -webkit-linear-gradient(to right, #ff0000, #0000ff) !important;
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DE2F3C', endColorstr='#0176E3') !important;
}

.gradient-border {
  background: linear-gradient(to right, #ff0000, #0000ff);
  /* 渐变色从左到右 */
  background-clip: padding-box;
  /* 确保背景色在边框内 */
  background: -webkit-linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: padding-box;
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DE2F3C', endColorstr='#0176E3');
}

.gradient-text {
  display: inline;
  background: linear-gradient(to right, #ff0000, #0000ff);
  /* 渐变色从左到右 */
  background: -webkit-linear-gradient(to right, #ff0000, #0000ff);
  /* 渐变色从左到右 */
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DE2F3C', endColorstr='#0176E3');
  -webkit-background-clip: text;
  /* Chrome, Safari */
  -webkit-text-fill-color: transparent;
  /* Chrome, Safari */
  background-clip: text;
  /* 现代浏览器 */
  color: transparent;
  /* 现代浏览器 */
}

.gradient-grey-bg {
  /* IE9 以前浏览器背景色 */
  background: #DE2F3C;
  /* IE10+ 和现代浏览器使用标准渐变语法 */
  background: linear-gradient(180deg, #F4F5F8, #ffffff) !important;
  background: -webkit-linear-gradient(to bottom, #F4F5F8, #ffffff) !important;
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F5F8', endColorstr='#ffffff') !important;
}

.gradient1-bg {
  /* IE9 以前浏览器背景色 */
  background: #DE2F3C;
  /* IE10+ 和现代浏览器使用标准渐变语法 */
  background: linear-gradient(90deg, #F4F6FB, #ffffff) !important;
  background: -webkit-linear-gradient(to right, #F4F6FB, #ffffff) !important;
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F5F8', endColorstr='#ffffff') !important;
}

.gradient1-bg-reverse {
  /* IE9 以前浏览器背景色 */
  background: #DE2F3C;
  /* IE10+ 和现代浏览器使用标准渐变语法 */
  background: linear-gradient(to left, #F4F6FB, #ffffff) !important;
  background: -webkit-linear-gradient(to left, #F4F6FB, #ffffff) !important;
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F5F8', endColorstr='#ffffff') !important;
}

.white-text {
  color: #fff;
}

/* 公用样式 */
.card-item{
  position: relative;
  float:left;
  width: 455px;
  height:260px;
  border-radius:10px;
  overflow: hidden;
  cursor: pointer;
  background:url("../image/about/card-bg.png") no-repeat;
  background-size:100% 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  overflow: hidden;
}
.card-item-inner{
  padding:42px;
}
.card-item-title {
  margin-bottom: 10px;
  font-size: 28px;
  text-align: center;
}
.card-item-desc {
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color:#333;
}
.card-item-middle {
  margin: 0 17px;
}
.card-item-bg{
  position: absolute;
  top:0;
  left:0;
  z-index:90;
  width:100%;
  height:100%;
  background: url('../image/card-bg-logo.png') no-repeat;
}
.card-item-mask{
  position: absolute;
  top:30%;
  left:50%;
  z-index:89;
  width:0;
  height:0;
  border-radius:30px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.card-item-active .card-item-desc{
  color:#fff;
}
.card-item-active .card-item-mask{
  width:200%;
  height:200%;
}

/* 时间轴 */
.time-wrapper{
  position:relative;
  margin:70px auto;
}
.time-item{
  position:relative;
  float: left;
  width: 16.6%;
  text-align:center;
}
.time-item-title{
  display:inline-block;
  width:108px;
  height:22px;
}
.time-item-title img{
  display:block;
  width:100%;
  height:100%;
}
.time-item-point{
  position:absolute;
  top:27px;
  left:50%;
  z-index: 90;
  margin-left:-37px;
  width:75px;
  height:75px;
  background:url("../image/about/time-point.png") no-repeat;
}
.time-item-bottom {
  margin-top:75px;
  font-size: 20px;
  text-align: center;
  line-height: 26px;
}

.time-item-bottom-desc {
  margin-bottom: 16px;
}
.time-line{
  position:absolute;
  top:63px;
  left:0;
  width:100%;
  height:3px;
  background: url('../image/gradient-line.png') no-repeat;
  background-size: 100%;
}
/* 大标题 start */
.first-title-wrapper {}

.first-title-left {
  position: relative;
  padding-left: 85px;
  width: 230px;
  height: 58px;
  background-size:100% 100%;
}

.first-title-inner {
  position: absolute;
  width:150px;
  height: 62px;
  text-align:center;
  background: url('../image/first-circle.png') no-repeat;
  background-position: 0 49px;
  animation: loopLeft 4s ease-in-out infinite;
}

.first-title {
  font-size:28px;
  font-weight: bold;
  letter-spacing: 2px;
}

.first-title-right {
  margin-left: 12px;
  padding-top: 16px;
}

.first-title-right-top {
  font-size: 18px;
  color: #1E6CCD;
  text-align: center;
}

.first-title-right-bottom {
  padding: 3px 23px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  border-radius: 15px;
}

.sub-title {
  font-size: 28px;
}

/* 大标题 end */

/* 分页 start */
.page-wrapper {}

.page-inner {
  margin: 0 auto;
}

.page-btn {
  width: 63px;
  height: 61px;
  text-align: center;
  line-height: 65px;
  background: url('../image/page-border-color.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.page-content {
  margin: 0 82px;
  line-height: 61px;
  font-size: 22px;
}

.page-content span {
  margin: 0 4px;
}

.page-btn-active {
  background: url('../image/page-border.png') no-repeat;
}

.page-inner-text{
    margin-left:20px;
    height:60px;
    line-height:60px;
    font-size:22px;
}
.page-input-wrapper{
    display: inherit;
    margin:0 20px;
    padding:0px 10px;
    width:63px;
    height:61px;
    border-radius:15px;
    border:2px solid #e6e6e7;
    overflow: hidden;
}
.page-input-wrapper input{
    border:none;
    width:59px;
    height:57px;
    text-align:center;
    font-size: 18px;
    background:#F4F6FB;
}
.page-go{
    width:63px;
    height:61px;
    line-height:61px;
    text-align:center;
    border-radius:15px;
    font-size:18px;
    border:2px solid #e6e6e7;
}

/* 分页 end */


/* 产品列表 */
.index-product-item-img-inner {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, .8);
  /* IE10+ 和现代浏览器使用标准渐变语法 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .1));
  background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .1));
  /* IE9 使用渐变语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,.8)', endColorstr='rgba(255,255,255,.1)');
}

/*.分享的样式 */
.layer-box-text{
    margin:40px 0;
    color:#1D59DC;
    font-size:22px;
    line-height:30px;
    text-align:center;
}
.layer-box-erwei{
    margin:0 auto;
    width:200px;
    height:200px;
    overflow: hidden;
}
.layer-box-erwei img{
    width:100%;
    height:100%;
}
.layer-icon-copy{
    width:22px;
    height:23px;
}



/* position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  display: block;
  border-radius: 30px;
  background-color: #3e57d0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out; */