@charset "utf-8";
.subpage-prodect {
  width: 100%;
  background-color: #FFF;
  padding: 70px 0px 80px;
}
.subpage-prodect .product-layer {
  margin-top: 70px;
}
.subpage-prodect .product-item-box {
  display: none;
}
.subpage-prodect .product-item-box:nth-child(1) {
  display: block;
}
.subpage-prodect .product-item {
  float: left;
  width: 384px;
  height: 444px;
  margin-right: 24px;
  margin-bottom: 24px;
}
.subpage-prodect .product-item:nth-child(3n) {
  margin-right: 0px;
}
.subpage-prodect .product-item .product-item-content {
  padding: 41px 47px 39px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0px 5px 15px 0px rgba(31, 37, 51, 0.08);
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}
.subpage-prodect .product-item .item-tit {
  line-height: 30px;
  font-size: 20px;

}
.subpage-prodect .product-item .item-area {
  line-height: 28px;
  font-size: 18px;
  color: #9EA7B3;
  margin-top: 5px;
}
.subpage-prodect .product-item .item-list {
  padding-top: 24px;
  border-top: 1px solid #DBE1E8;
  margin-top: 26px;
}
.subpage-prodect .product-item .item-list ul li {
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  margin-bottom: 14px;
}
.subpage-prodect .product-item .item-list ul li:last-child {
  margin-bottom: 0px;
}
.subpage-prodect .product-item .item-list ul li label {
  float: left;
  width: 144px;
  text-align: left;
  color: #5E6D81;
}
.subpage-prodect .product-item .item-list ul li span {
  float: left;

}
.subpage-prodect .product-item .item-sell-price {
  line-height: 28px;
  font-size: 18px;
  margin-top: 30px;
}
.subpage-prodect .product-item .item-sell-price > span {
  font-size: 28px;

  margin-right: 4px;
}
.subpage-prodect .product-item .item-original-cost {
  line-height: 26px;
  font-size: 16px;
  color: #9EA7B3;
  text-decoration: line-through;
  margin-top: 10px;
}
.subpage-prodect .product-item .item-link {
  margin-top: 20px;
}
.subpage-prodect .product-item .item-link .button-link {
  width: 160px;
  color: #FFF;
}
.subpage-prodect .product-item:hover .product-item-content {
  margin-top: -8px;
  box-shadow: 0px 16px 64px 0px rgba(31, 37, 51, 0.14);
}
.Video-introduction {
  width: 100%;
  background-color: #1F2533;
  padding: 70px 0px 73px;
}
.Video-introduction .page-model-tit {
  color: #FFF;
}
.Video-introduction .intro-tab {
  text-align: center;
  margin-top: 40px;
}
.Video-introduction .intro-tab ul {
  display: inline-block;
  vertical-align: top;
  height: 84px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.Video-introduction .intro-tab ul li {
  float: left;
  height: 84px;
  line-height: 84px;
  font-size: 20px;
  color: #fff;
  padding: 0px 17px;
  border-bottom: 2px solid transparent;
  margin-right: 28px;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
}
.Video-introduction .intro-tab ul li:last-child {
  margin-right: 0px;
}
.Video-introduction .intro-item-box {
  margin-top: 40px;
}
.Video-introduction .intro-item-box .intro-item {
  position: relative;
  width: 1092px;
  height: 624px;
  display: none;
}
.Video-introduction .intro-item-box .intro-item:nth-child(1) {
  display: block;
}
.Video-introduction .intro-item-box .intro-item img {
  display: block;
  width: 100%;
  height: 100%;
}
/* 2022-2-24 mysql h5 animate start */
.mysql-gky-dh-box {
  position: relative;
  width: 800px;
  height: 580px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mysql-gky-dh-box .animation-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.mysql-gky-dh-box .alternatebg-01 {
  background: url(../../../images/mysql/zh/gky-1.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-02 {
  opacity: 0;
  background: url(../../../images/mysql/zh/gky-2.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-03 {
  opacity: 0;
  background: url(../../../images/mysql/zh/gky-3.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-04 {
  background: url(../../../images/mysql/zh/gky-4.png) no-repeat center;
  z-index: 5;
}
.mysql-gky-dh-box .alternatebg-05 {
  z-index: 5;
  background: url(../../../images/mysql/zh/gky-5.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-06 {
  background: url(../../../images/mysql/zh/gky-6.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-07 {
  z-index: 3;
  background: url(../../../images/mysql/zh/gky-7.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-08 {
  z-index: 3;
  background: url(../../../images/mysql/zh/gky-8.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-09 {
  background: url(../../../images/mysql/zh/gky-9.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-10 {
  background: url(../../../images/mysql/zh/gky-10.png) no-repeat center;
}
.mysql-gky-dh-box .alternatebg-11 {
  background: url(../../../images/mysql/zh/gky-11.png) no-repeat center;
  z-index: 3;
}
.mysql-gky-dh-box .animation-circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: url(../../../images/mysql/zh/gky-circle.png) no-repeat center;
  z-index: 2;
}
.mysql-gky-dh-box .circle-1,
.mysql-gky-dh-box .circle-2,
.mysql-gky-dh-box .circle-3 {
  top: 378px;
  left: 210px;
}
.mysql-gky-dh-box .circle-1,
.mysql-gky-dh-box .circle-3 {
  z-index: 4;
}
.mysql-gky-dh-box .circle-4 {
  top: 232px;
  left: 401px;
  opacity: 0;
}
.mysql-gky-dh-box .animation-progress {
  position: absolute;
  width: 0px;
  height: 46px;
  overflow: hidden;
}
.mysql-gky-dh-box .animation-progress .progress-shadow {
  position: absolute;
  right: 10px;
  left: 0px;
  width: 80px;
  height: 46px;
  background: url(../../../images/mysql/zh/gky-progress.png) no-repeat center;
}
.mysql-gky-dh-box .animation-progress.progress-1 {
  top: 302px;
  left: 514px;
}
.mysql-gky-dh-box .animation-progress.progress-2 {
  top: 350px;
  left: 432px;
}
.mysql-gky-dh-box .progress-1 {
  animation: progress-animate 1s ease-in 1s alternate infinite;
}
.mysql-gky-dh-box .progress-2 {
  animation: progress-animate 1s ease-in 1.5s alternate infinite;
}
.mysql-gky-dh-box .alternatebg-08 {
  opacity: 0;
  animation: alternatebg-animate02 14s ease-in 0s alternate infinite;
}
.mysql-gky-dh-box .circle-1 {
  animation: circle-animate01 2s ease-in 0s infinite;
}
.mysql-gky-dh-box .circle-2 {
  animation: circle-animate02 2s ease-in 0s infinite;
}
.mysql-gky-dh-box .circle-4 {
  animation: circle-animate04 2s ease-in 3s infinite;
}
.mysql-gky-dh-box.animate-start-gky .circle-3 {
  animation: circle-animate03 2s ease-in 6s infinite;
}
.mysql-gky-dh-box.animate-start-gky .alternatebg-02 {
  animation: scale-animate 1.5s ease-in 2s 3;
}
.mysql-gky-dh-box.animate-start-gky .alternatebg-03 {
  animation: scale-animate 1.5s ease-in 5.5s 3;
}
@keyframes circle-animate01 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  30% {
    transform: translate(38px, -21px);
  }
  100% {
    transform: translate(106px, -60px);
    opacity: 1;
  }
}
@keyframes circle-animate02 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(38px, -21px);
  }
  100% {
    transform: translate(192px, 70px);
  }
}
@keyframes circle-animate03 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(38px, -21px);
  }
  40% {
    transform: translate(72px, -42px);
  }
  70% {
    transform: translate(-14px, -96px);
  }
  100% {
    transform: translate(11px, -113px);
  }
}
@keyframes circle-animate04 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(73px, -41px);
    opacity: 1;
  }
}
@keyframes alternatebg-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes progress-animate {
  0% {
    width: 0px;
  }
  80% {
    width: 80px;
  }
  100% {
    width: 80px;
  }
}
@keyframes scale-animate {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(0px, -15px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, -15px);
    opacity: 0;
  }
}
@keyframes alternatebg-animate02 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.mysql-dxfl-dh-box {
  width: 920px;
  height: 580px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mysql-dxfl-dh-box .animation-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.mysql-dxfl-dh-box .alternatebg-01 {
  background: url(../../../images/mysql/zh/dxfl-1.png) no-repeat center;
}
.mysql-dxfl-dh-box .alternatebg-02 {
  background: url(../../../images/mysql/zh/dxfl-2.png) no-repeat center;
}
.mysql-dxfl-dh-box .alternatebg-03 {
  opacity: 0;
  background: url(../../../images/mysql/zh/dxfl-3.png) no-repeat center;
}
.mysql-dxfl-dh-box .alternatebg-04 {
  opacity: 0;
  background: url(../../../images/mysql/zh/dxfl-4.png) no-repeat center;
}
.mysql-dxfl-dh-box .alternatebg-05 {
  opacity: 0;
  background: url(../../../images/mysql/zh/dxfl-5.png) no-repeat center;
}
.mysql-dxfl-dh-box .alternatebg-06 {
  z-index: 3;
  background: url(../../../images/mysql/zh/dxfl-6.png) no-repeat center;
}
.mysql-dxfl-dh-box .animation-circle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: url(../../../images/mysql/zh/dxfl-circle.png) no-repeat center;
  z-index: 2;
}
.mysql-dxfl-dh-box .circle-1 {
  top: 449px;
  left: 204px;
}
.mysql-dxfl-dh-box .circle-2,
.mysql-dxfl-dh-box .circle-3 {
  top: 342px;
  left: 312px;
  opacity: 0;
}
.mysql-dxfl-dh-box .circle-4 {
  top: 200px;
  left: 306px;
  opacity: 0;
}
.mysql-dxfl-dh-box .circle-5 {
  top: 224px;
  left: 616px;
  opacity: 0;
}
.mysql-dxfl-dh-box .circle-6 {
  opacity: 0;
  top: 372px;
  left: 530px;
}
.mysql-dxfl-dh-box .circle-7 {
  opacity: 0;
  top: 354px;
  left: 678px;
}
.mysql-dxfl-dh-box .circle-8 {
  opacity: 0;
  top: 292px;
  left: 702px;
}
.mysql-dxfl-dh-box .circle-9 {
  left: 498px;
  top: 311px;
  opacity: 0;
}
.mysql-dxfl-dh-box .circle-1 {
  animation: circle-dxfl01 1s ease-in 0s infinite;
}
.mysql-dxfl-dh-box .circle-2 {
  animation: circle-dxfl02 3s ease-in 2s infinite;
}
.mysql-dxfl-dh-box .circle-3 {
  opacity: 0;
  animation: circle-dxfl03 3s ease-in 2s infinite;
}
.mysql-dxfl-dh-box .circle-4 {
  opacity: 0;
  animation: circle-dxfl04 2s ease-in 5s infinite;
}
.mysql-dxfl-dh-box .circle-5 {
  opacity: 0;
  animation: circle-dxfl05 4s ease-in 7s infinite;
}
.mysql-dxfl-dh-box .circle-6 {
  animation: circle-dxfl06 2s ease-in 3s infinite;
}
.mysql-dxfl-dh-box .circle-7 {
  animation: circle-dxfl07 2s ease-in 3s infinite;
}
.mysql-dxfl-dh-box .circle-8 {
  animation: circle-dxfl08 2s ease-in 3s alternate infinite;
}
.mysql-dxfl-dh-box .circle-9 {
  animation: circle-dxfl09 2s ease-in 5.5s infinite;
}
.mysql-dxfl-dh-box.animate-start-dxfl .alternatebg-03 {
  animation: scale-animate 1s ease-in 1s 2;
}
.mysql-dxfl-dh-box.animate-start-dxfl .alternatebg-04 {
  animation: scale-animate 1.5s ease-in 2s 2;
}
.mysql-dxfl-dh-box.animate-start-dxfl .alternatebg-05 {
  animation: scale-animate 1.5s ease-in 4.5s 3;
}
@keyframes circle-dxfl01 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(34px, -20px);
  }
}
@keyframes circle-dxfl02 {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(20px, -12px);
  }
  80% {
    transform: translate(-89px, -77px);
  }
  100% {
    opacity: 1;
    transform: translate(-64px, -92px);
  }
}
@keyframes circle-dxfl03 {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(20px, -12px);
  }
  80% {
    transform: translate(112px, 38px);
  }
  100% {
    opacity: 1;
    transform: translate(136px, 24px);
  }
}
@keyframes circle-dxfl04 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 0;
    transform: translate(0, 0);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(34px, -20px);
  }
}
@keyframes circle-dxfl05 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50% {
    transform: translate(17px, -11px);
  }
  80% {
    transform: translate(-46px, -51px);
  }
  100% {
    opacity: 1;
    transform: translate(-16px, -70px);
  }
}
@keyframes circle-dxfl06 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(58px, 34px);
    opacity: 1;
  }
  100% {
    transform: translate(58px, 34px);
    opacity: 0;
  }
}
@keyframes circle-dxfl07 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-40px, -24px);
  }
}
@keyframes circle-dxfl08 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(44px, 26px);
    opacity: 1;
  }
  100% {
    transform: translate(44px, 26px);
    opacity: 0;
  }
}
@keyframes circle-dxfl09 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 0;
    transform: translate(0, 0);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    transform: translate(37px, -21px);
    opacity: 1;
  }
}
.mysql-jcb-dh-box {
  width: 880px;
  height: 580px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mysql-jcb-dh-box .animation-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.mysql-jcb-dh-box .alternatebg-01 {
  background: url(../../../images/mysql/zh/jcb-1.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-02 {
  opacity: 0;
  background: url(../../../images/mysql/zh/jcb-2.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-03 {
  opacity: 0;
  background: url(../../../images/mysql/zh/jcb-3.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-04 {
  opacity: 0;
  background: url(../../../images/mysql/zh/jcb-4.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-05 {
  z-index: 4;
  background: url(../../../images/mysql/zh/jcb-5.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-06 {
  background: url(../../../images/mysql/zh/jcb-6.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-07 {
  z-index: 6;
  background: url(../../../images/mysql/zh/jcb-7.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-08 {
  z-index: 3;
  background: url(../../../images/mysql/zh/jcb-8.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-09 {
  background: url(../../../images/mysql/zh/jcb-9.png) no-repeat center;
  z-index: 6;
}
.mysql-jcb-dh-box .alternatebg-10 {
  background: url(../../../images/mysql/zh/jcb-10.png) no-repeat center;
}
.mysql-jcb-dh-box .alternatebg-11 {
  background: url(../../../images/mysql/zh/jcb-11.png) no-repeat center;
}
.mysql-jcb-dh-box .animation-progress {
  position: absolute;
  width: 0px;
  height: 78px;
  overflow: hidden;
  z-index: 5;
}
.mysql-jcb-dh-box .animation-progress .progress-shadow {
  position: absolute;
  right: 10px;
  left: 0px;
  width: 150px;
  height: 78px;
  background: url(../../../images/mysql/zh/jcb-progress.png) no-repeat center;
}
.mysql-jcb-dh-box .animation-progress.progress-1 {
  top: 312px;
  left: 410px;
}
.mysql-jcb-dh-box .animation-progress.progress-2 {
  top: 301px;
  left: 414px;
}
.mysql-jcb-dh-box .animation-circle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: url(../../../images/mysql/zh/jcb-circle-big.png) no-repeat center;
  z-index: 2;
}
.mysql-jcb-dh-box .animation-circle-small {
  position: absolute;
  width: 4px;
  height: 4px;
  background: url(../../../images/mysql/zh/jcb-circle-small.png) no-repeat center;
  z-index: 5;
}
.mysql-jcb-dh-box .circle-1,
.mysql-jcb-dh-box .circle-3 {
  left: 214px;
  top: 360px;
  z-index: 5;
}
.mysql-jcb-dh-box .circle-2 {
  left: 444px;
  top: 224px;
}
.mysql-jcb-dh-box .circle-4 {
  left: 216px;
  top: 362px;
}
.mysql-jcb-dh-box .circle-1 {
  animation: circle-jcb01 2s ease-in 0s infinite;
}
.mysql-jcb-dh-box .circle-2 {
  animation: circle-jcb02 2s ease-in 3s infinite;
}
.mysql-jcb-dh-box .circle-4 {
  animation: circle-jcb04 2s ease-in 0s infinite;
}
.mysql-jcb-dh-box .progress-1 {
  animation: progress-jcb-animate 1.5s ease-in 1s alternate infinite;
}
.mysql-jcb-dh-box .progress-2 {
  animation: progress-jcb-animate 1.5s ease-in 2.5s alternate infinite;
}
.mysql-jcb-dh-box.animate-start-jcb .circle-3 {
  animation: circle-jcb03 1s ease-in 2s 3;
}
.mysql-jcb-dh-box.animate-start-jcb .alternatebg-02 {
  animation: scale-animate 1s ease-in 1s 2;
}
.mysql-jcb-dh-box.animate-start-jcb .alternatebg-03 {
  animation: scale-animate 1s ease-in 2s 2;
}
.mysql-jcb-dh-box.animate-start-jcb .alternatebg-04 {
  animation: scale-animate 1s ease-in 3s 3;
}
@keyframes circle-jcb01 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(21px, -12px);
  }
  100% {
    transform: translate(82px, -48px);
  }
}
@keyframes circle-jcb03 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(82px, -48px);
  }
}
@keyframes circle-jcb04 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(23px, -12px);
  }
  60% {
    transform: translate(203px, 93px);
  }
  100% {
    transform: translate(240px, 72px);
  }
}
@keyframes circle-jcb02 {
  0% {
    transform: translate(0, 0);
  }
  70% {
    opacity: 1;
    transform: translate(42px, -24px);
  }
  100% {
    opacity: 0;
    transform: translate(42px, -24px);
  }
}
@keyframes progress-jcb-animate {
  0% {
    width: 0px;
  }
  80% {
    width: 150px;
  }
  100% {
    width: 150px;
  }
}
/* 2022-2-24 mysql h5 animate end */