body {
  overflow-x: hidden;
  width: 100% !important;
}
.banner {
  width: 100%;
  height: 700px;
  background: url('../../images/product/templatechainshop/banner.png') no-repeat center;
}
.banner .w .left {
  width: 614px;
  height: 570px;
  padding-top: 195px;
  margin-right: 10px;
  color: #fff;
}
.banner .w .left h1 {
  height: 48px;
  padding: 10px 0;
  font-size: 50px;
  margin-bottom: 40px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 2px;
  background: -webkit-linear-gradient(left, #617fef, #4365ed, #2f54eb);
  -webkit-background-clip: text;
  color: transparent;
}
.banner .w .left p {
  width: 524px;
  height: 44px;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 81px;
}
.banner .w .left ul {
  width: 609px;
  height: 36px;
  padding-left: 5px;
  margin-bottom: 68px;
  /*border: 1px solid #2f54eb;*/
}
.banner .w .left ul li {
  float: left;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 29px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.7);
}
.banner .w .left ul li span {
  margin: 0 8px;
}
.banner .w .left .shiyong {
  width: 148px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background-color: #2c67ed;
  border-radius: 2px;
}
.banner .w .left .shiyong:hover {
  cursor: pointer;
  background-image: none;
  background-color: #285cd4;
}
.banner .w .right {
  position: relative;
  margin-top: 90px;
  width: 576px;
  height: 481px;
  background: url('../../images/product/templatechainshop/banner-right.png') no-repeat center;
}
.banner .w .right img {
  width: 53px;
  height: 35px;
  position: absolute;
  animation: move 1.5s;
  transition-timing-function: linear ;
  animation-iteration-count: infinite;
}
@keyframes move {
  from {
    right: 21%;
    bottom: 17%;
  }
  to {
    right: 24%;
    bottom: 20%;
  }
}
.ywxt {
  width: 100%;
  height: 944px;
  padding-top: 106px;
  background-color: #f5f7ff;
}
.ywxt .w .title {
  text-align: center;
  margin-bottom: 70px;
}
.ywxt .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 30px;
}
.ywxt .w .content p {
  text-indent: 2em;
  height: 92px;
  font-family: MicrosoftYaHeiLight;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #666666;
}
.ywxt .w .content img {
  margin: 70px 0;
  margin-left: 50%;
  margin-right: 50%;
  transform: translate(-50%);
}
.cpts {
  width: 100%;
  height: 918px;
  padding-top: 90px;
  color: #fff;
  background: url('../../images/product/templatechainshop/ts-bg.png') no-repeat center;
}
.cpts .w .title {
  text-align: center;
  margin-bottom: 25px;
}
.cpts .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #fff;
  margin-bottom: 25px;
}
.cpts .w .content {
  display: flex;
}
.cpts .w .content div {
  flex: 1;
}
.cpts .w .content .left,
.cpts .w .content .right {
  height: 410px;
  margin-top: 100px;
}
.cpts .w .content .left li,
.cpts .w .content .right li {
  margin-bottom: 74px;
}
.cpts .w .content .left li span,
.cpts .w .content .right li span {
  margin-right: 15px;
  display: inline-block;
  width: 19px;
  height: 19px;
  font-family: MicrosoftYaHeiLight;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #5b5e6e;
}
.cpts .w .content .left li p,
.cpts .w .content .right li p {
  width: 256px;
  height: 38px;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.8);
}
.cpts .w .content .left li:nth-child(1) {
  transform: translate(28px, 0);
}
.cpts .w .content .left li:nth-child(4) {
  transform: translate(28px, 0);
}
.cpts .w .content .right li:nth-child(1) {
  transform: translate(-28px, 0);
}
.cpts .w .content .right li:nth-child(4) {
  transform: translate(-28px, 0);
}
.cpts .w .content .middle {
  width: 611px;
  height: 613px;
  transform: translate(-30px, 0);
}
.cpts .w .content .middle .text {
  transform: translate(50%, 0);
}
.cpts .w .content .middle .text span {
  display: block;
  margin-bottom: 10px;
  transform: translate(50%, -35px);
  width: 19px;
  height: 19px;
  font-family: MicrosoftYaHeiLight;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #5b5e6e;
}
.cpts .w .content .middle .text p {
  transform: translate(-20%, -35px);
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.8);
}
.cpts .w .content .middle img {
  position: relative;
}
.cpts .w .content .middle .icon1 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon1.png) no-repeat center;
  position: absolute;
  top: 15%;
  right: 64%;
}
.cpts .w .content .middle .icon2 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon2.png) no-repeat center;
  position: absolute;
  top: 33%;
  right: 74%;
}
.cpts .w .content .middle .icon3 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon3.png) no-repeat center;
  position: absolute;
  top: 55%;
  right: 76%;
}
.cpts .w .content .middle .icon4 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon4.png) no-repeat center;
  position: absolute;
  top: 75%;
  right: 68%;
}
.cpts .w .content .middle .icon5 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon5.png) no-repeat center;
  position: absolute;
  top: 15%;
  left: 71%;
}
.cpts .w .content .middle .icon6 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon6.png) no-repeat center;
  position: absolute;
  top: 35%;
  left: 83%;
}
.cpts .w .content .middle .icon7 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon7.png) no-repeat center;
  position: absolute;
  top: 59%;
  left: 83%;
}
.cpts .w .content .middle .icon8 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon8.png) no-repeat center;
  position: absolute;
  top: 76%;
  left: 76%;
}
.cpts .w .content .middle .icon9 {
  width: 90px;
  height: 90px;
  background: url(../../images/product/templatechainshop/icon9.png) no-repeat center;
  position: absolute;
  top: 87%;
  left: 46%;
}
.dfct {
  width: 100%;
  height: 558px;
  padding-top: 100px;
}
.dfct .w .title {
  text-align: center;
  margin-bottom: 60px;
}
.dfct .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 30px;
}
.dfct .w .content {
  width: 100%;
  height: 294px;
  background: url('../../images/product/templatechainshop/dfct-bg.png') no-repeat center;
  background-size: 100%;
}
.dfct .w .content ul {
  position: relative;
  height: 294px;
}
.dfct .w .content ul li h3 {
  width: 440px;
  height: 46px;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 26px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 20px;
}
.dfct .w .content ul li p {
  width: 434px;
  height: 63px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #888888;
}
.dfct .w .content ul li:nth-child(1) {
  position: absolute;
  top: 25%;
  left: 4%;
  width: 440px;
  height: 230px;
}
.dfct .w .content ul li:nth-child(2) {
  position: absolute;
  top: 25%;
  right: 5%;
  width: 440px;
  height: 230px;
}
.zlqy {
  width: 100%;
  height: 488px;
  padding-top: 86px;
  background-color: #f5f7ff;
}
.zlqy .w .content {
  width: 100%;
  height: 314px;
}
.zlqy .w .content .left {
  margin-right: 94px;
}
.zlqy .w .content .right {
  margin-top: 50px;
}
.zlqy .w .content .right h3 {
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 30px;
}
.zlqy .w .content .right ul li {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #888888;
}
.zlqy .w .content .right p {
  margin-top: 30px;
  width: 94px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  background-color: #2c67ed;
  border-radius: 17px;
  color: #ffffff;
}
.zlqy .w .content .right p:hover {
  cursor: pointer;
  background-image: linear-gradient(90deg, #607eef 0%, #3055eb 100%), linear-gradient(#607eef, #3055eb);
}
.tkqd {
  width: 100%;
  height: 656px;
  padding-top: 89px;
  background-color: #1b1f32;
}
.tkqd .w .title {
  text-align: center;
}
.tkqd .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #fff;
  margin-bottom: 30px;
}
.tkqd .w .content {
  position: relative;
  color: #fff;
  width: 100%;
  height: 400px;
  background: url('../../images/product/templatechainshop/ts2-bg.png') no-repeat center;
}
.tkqd .w .content .icon-title {
  position: absolute;
  top: 75%;
  left: 3%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
}
.tkqd .w .content .left-title1 {
  position: absolute;
  top: 49%;
  left: 17%;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.6);
}
.tkqd .w .content .left-title2 {
  position: absolute;
  width: 266px;
  top: 69%;
  left: 17%;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.6);
}
.tkqd .w .content .left-title3 {
  position: absolute;
  top: 89%;
  left: 17%;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.6);
}
.tkqd .w .content .middle-title1 {
  position: absolute;
  top: 45%;
  left: 43.5%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #ffffff;
}
.tkqd .w .content .middle-title2 {
  position: absolute;
  width: 266px;
  top: 66%;
  left: 42.5%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #ffffff;
}
.tkqd .w .content .middle-title3 {
  position: absolute;
  top: 86%;
  left: 45%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #ffffff;
}
.tkqd .w .content .right-content {
  width: 420px;
  height: 110px;
  position: absolute;
  top: 51%;
  left: 62%;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.6);
}
.ylms {
  width: 100%;
  height: 558px;
  padding-top: 122px;
}
.ylms .w .left {
  margin-right: 292px;
}
.ylms .w .left h3 {
  width: 533px;
  height: 72px;
  font-family: MicrosoftYaHeiLight;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 40px;
  margin-top: 30px;
}
.ylms .w .left p {
  margin-top: 60px;
  width: 490px;
  height: 62px;
  font-family: MicrosoftYaHeiLight;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #666666;
}
.kjfn {
  width: 100%;
  height: 711px;
  padding-top: 110px;
  background-color: #f5f7ff;
}
.kjfn .w .right {
  margin-left: 100px;
}
.kjfn .w .right h3 {
  width: 590px;
  height: 71px;
  font-family: MicrosoftYaHeiLight;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 35px;
}
.kjfn .w .right .small-content {
  width: 585px;
  height: 278px;
  margin-top: 70px;
}
.kjfn .w .right .small-content p {
  font-family: MicrosoftYaHeiLight;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #666666;
  margin-bottom: 30px;
}
.hytd {
  width: 100%;
  height: 982px;
  padding-top: 136px;
  background: url('../../images/product/templatechainshop/jjtd-bg.png') no-repeat center;
}
.hytd .w .title {
  text-align: center;
  margin-bottom: 86px;
}
.hytd .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #fff;
  margin-bottom: 30px;
}
.hytd .w .content ul {
  display: flex;
  flex-wrap: wrap;
}
.hytd .w .content ul li {
  position: relative;
  width: 580px;
  height: 164px;
  padding-left: 193px;
  padding-top: 27px;
  margin-bottom: 30px;
  background: url('../../images/product/templatechainshop/jj-li-bg.png') no-repeat center;
}
.hytd .w .content ul li img {
  position: absolute;
  top: 50px;
  left: 60px;
}
.hytd .w .content ul li h3 {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #ffffff;
}
.hytd .w .content ul li p {
  margin-top: 10px;
  width: 350px;
  height: 55px;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #b9b9b9;
}
.hytd .w .content ul li:hover {
  cursor: pointer;
}
.hytd .w .content ul li:hover h3 {
  color: #2c67ed;
}
.hytd .w .content ul li:hover img {
  animation: xuanzhuan 1s ease-in-out;
}
@keyframes xuanzhuan {
  0% {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
.hytd .w .content ul li:nth-child(odd) {
  margin-right: 38px;
}
.ywms {
  width: 100%;
  height: 1107px;
  padding-top: 84px;
  background: url('../../images/product/templatechainshop/ywms-bg.png') no-repeat center;
}
.ywms .w .title {
  text-align: center;
  margin-bottom: 86px;
}
.ywms .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 30px;
}
.ywms .w .content {
  box-shadow: 0px 0px 32px 0px rgba(73, 140, 247, 0.2);
}
.ywjg {
  width: 100%;
  height: 964px;
  padding-top: 94px;
  background: url('../../images/product/templatechainshop/ywjg-bg.png') no-repeat center;
}
.ywjg .w .title {
  text-align: center;
  margin-bottom: 54px;
}
.ywjg .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #fff;
  margin-bottom: 26px;
}
.ywjg .w .title span {
  margin-top: 25px;
  display: block;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #d4d4d4;
}
.jsjg {
  width: 100%;
  height: 1244px;
  padding-top: 87px;
}
.jsjg .w .title {
  text-align: center;
  margin-bottom: 67px;
}
.jsjg .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 26px;
}
.ys {
  width: 100%;
  height: 600px;
  padding-top: 60px;
}
.ys .w .title {
  text-align: center;
  margin-bottom: 67px;
}
.ys .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 26px;
}
.ys .w .content ul {
  display: flex;
}
.ys .w .content ul li {
  width: 360px;
  height: 260px;
  margin-right: 60px;
}
.ys .w .content ul li .top {
  position: relative;
  width: 360px;
  height: 150px;
  text-align: center;
  margin-bottom: 30px;
  overflow: hidden;
}
.ys .w .content ul li .top .bg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.55s;
  transition: -webkit-transform 0.55s;
  -o-transition: transform 0.55s;
  transition: transform 0.55s;
  transition: transform 0.55s, -webkit-transform 0.55s;
}
.ys .w .content ul li .top .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ys .w .content ul li .bottom {
  text-align: center;
}
.ys .w .content ul li .bottom h3 {
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 25px;
}
.ys .w .content ul li .bottom p {
  width: 350px;
  height: 38px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #666666;
}
.ys .w .content ul li:hover {
  cursor: pointer;
  transition: all 5s ease-out;
}
.ys .w .content ul li:hover .bg {
  transform: scale(1.1);
}
.ys .w .content ul li:hover h3 {
  color: #2c67ed;
}
.jsaq {
  width: 100%;
  height: 732px;
  padding-top: 125px;
  background: url('../../images/product/templatechainshop/jsaq-bg.png') no-repeat center;
}
.jsaq .w .title {
  text-align: center;
  margin-bottom: 67px;
}
.jsaq .w .title p {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 26px;
}
.jsaq .w .content {
  margin-top: 258px;
  text-align: center;
}
.jsaq .w .content ul {
  display: flex;
}
.jsaq .w .content ul li {
  flex: 1;
  padding: 0 34px;
  border-right: 1px solid #d9d9d9;
}
.jsaq .w .content ul li h4 {
  font-size: 18px;
  font-weight: normal;
  color: #333333;
  margin-bottom: 20px;
}
.jsaq .w .content ul li h4:hover {
  color: #324dd1;
  cursor: pointer;
}
.jsaq .w .content ul li p {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #888888;
}
.jsaq .w .content ul li:last-of-type {
  border-right: 0;
  margin-right: -6px;
}