@charset "utf-8";
.subpage-product {
  width: 100%;
  background-color: #FFF;
  padding: 70px 0px 80px;
}
.subpage-product .common-link-tab {
  padding: 72px 0px 24px;
}
.subpage-product .common-tab {
  margin-top: 0px;
}
.subpage-product .product-layer-item-box .product-layer-item {
  display: none;
}
.subpage-product .product-layer-item-box .product-layer-item:nth-child(1) {
  display: block;
}
.subpage-product .product-layer {
  margin-top: 60px;
}
.subpage-product .product-item-box {
  display: none;
}
.subpage-product .product-item-box:nth-child(1) {
  display: block;
}
.subpage-product .product-item {
  float: left;
  width: 384px;
  margin-right: 24px;
  margin-bottom: 24px;
}
.subpage-product .product-item:nth-child(3n) {
  margin-right: 0px;
}
.subpage-product .product-item .product-item-content {
  position: relative;
  text-align: center;
  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-product .product-item .version {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 113px;
  height: 113px;
  background-repeat: no-repeat;
  background-position: center center;
}
.subpage-product .product-item .item-tit {
  font-size: 20px;
  /*text-align: left;*/
  text-align: center;
}
.subpage-product .product-item .item-list {
  padding-top: 24px;
  border-top: 1px solid #DBE1E8;
  margin-top: 26px;
}
.subpage-product .product-item .item-list ul li {
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  color: #5E6D81;
  margin-bottom: 14px;
}
.product-item .item-list ul li  label {
  float: left;
  width: 165px;
  text-align: left;
  color: #5E6D81;
  display: block;
}
.subpage-product .product-item .item-list ul li:last-child {
  margin-bottom: 0px;
}
.subpage-product .product-item .item-list ul li span {
      float: left;
    margin-left: 28px;
    color:#1F2533
}
.subpage-product .product-item .item-sell-price {
  line-height: 28px;
  font-size: 18px;
  margin-top: 30px;
  /*text-align: left;*/
  text-align: center;

}
.subpage-product .product-item .item-sell-price > span {
  font-size: 28px;
  margin-right: 4px;
}
.subpage-product .product-item .item-original-cost {
  line-height: 26px;
  font-size: 16px;
  color: #9EA7B3;
  text-decoration: line-through;
  margin-top: 10px;
}
.subpage-product .product-item .item-link {
  margin-top: 20px;
}
.subpage-product .product-item .item-link .button-link {
  width: 160px;
}
.subpage-product .product-item:hover .product-item-content {
  margin-top: -8px;
  box-shadow: 0px 16px 64px 0px rgba(31, 37, 51, 0.14);
}
.common-link-tab {
  display: flex;
  justify-content: center;
  text-align: center;
}
.common-link-tab a {
  width: 240px;
  height: 64px;
  line-height: 62px;
  text-align: center;
  font-size: 20px;
  color: #1F2533;
  border: 1px solid #DBE1E8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  margin-right: 40px;
}
.common-link-tab a:last-child {
  margin-right: 0px !important;
}
.characteristics-group-box .characteristics-item-box {
  display: none;
}
.characteristics-group-box .characteristics-item-box:nth-child(1) {
  display: block;
}
.characteristics .common-link-tab {
  padding: 72px 0px 0px;
}
.column-advantages {
  width: 100%;
  background-color: #FFF;
  padding: 70px 0px 80px;
}
.column-advantage-item-box {
  display: flex;
  justify-content: flex-start;
  margin-top: 42px;
}
.column-advantage-item-box .column-advantage-item {
  position: relative;
  width: 282px;
  height: 402px;
  text-align: center;
  padding: 56px 24px 0px;
  margin-right: 24px;
}
.column-advantage-item-box .column-advantage-item:last-child {
  margin-right: 0px !important;
}
.column-advantage-item-box .column-advantage-item img {
  display: inline-block;
  width: 80px;
  height: 80px;
  vertical-align: top;
}
.column-advantage-item-box .column-advantage-item svg {
  position: absolute;
  top: 56px;
  left: 50%;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  transform:translateX(-50%);
  width: 80px;
  height: 80px;
}
.column-advantage-item-box .column-advantage-item h3 {
  line-height: 30px;
  font-size: 20px;
  color: #1F2533;
  margin-top: 35px;
}
.column-advantage-item-box .column-advantage-item p {
  line-height: 24px;
  font-size: 16px;
  color: #5E6D81;
  margin-top: 13px;
}
.video-introduction {
  width: 100%;
  background-color: #1F2533;
  padding: 70px 0px 80px;
}
.video-introduction .page-model-tit {
  color: #FFF;
}
.animate-box{
      width: 1056px;
    height: 594px;
    margin: 27px auto 0px;
    clear: both;
    position: relative;
}
.ip-dh-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 708px;
  height: 472px;
  background: #1F2533 url(../../../images/defense_zh/animation-bottom.png) no-repeat center;
}
.ip-dh-box .animation-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.ip-dh-box .animation-item.alternatebg-01 {
  background: url(../../../images/defense_zh/animation-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-02 {
  background: url(../../../images/defense_zh/animation-2-1.png) no-repeat center;
  animation: alternatebg-animate01 6s ease-in 0s alternate infinite;
}
.ip-dh-box .animation-item.alternatebg-02-02 {
  background: url(../../../images/defense_zh/animation-2-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-03 {
  background: url(../../../images/defense_zh/animation-3-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-03-02 {
  background: url(../../../images/defense_zh/animation-3-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-04 {
  background: url(../../../images/defense_zh/animation-4-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-04-02 {
  background: url(../../../images/defense_zh/animation-4-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-05 {
  background: url(../../../images/defense_zh/animation-5-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-05-02 {
  background: url(../../../images/defense_zh/animation-5-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-06 {
  background: url(../../../images/defense_zh/animation-6-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-06-02 {
  background: url(../../../images/defense_zh/animation-6-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-07 {
  background: url(../../../images/defense_zh/animation-7-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-07-02 {
  background: url(../../../images/defense_zh/animation-7-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-08 {
  background: url(../../../images/defense_zh/animation-8-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-08-02 {
  background: url(../../../images/defense_zh/animation-8-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-09 {
  background: url(../../../images/defense_zh/animation-9-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-09-02 {
  background: url(../../../images/defense_zh/animation-9-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-10 {
  background: url(../../../images/defense_zh/animation-10-1.png) no-repeat center;
}
.ip-dh-box .animation-item.alternatebg-10-02 {
  background: url(../../../images/defense_zh/animation-10-2.png) no-repeat center;
  opacity: 0;
}
.ip-dh-box .animation-item.alternatebg-11 {
  background: url(../../../images/defense_zh/animation-11.png) no-repeat center;
}
.ip-dh-box .animation-circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: url(../../../images/defense_zh/animation-blue-dot.png) no-repeat center;
}
.ip-dh-box .animation-circle.circle-01,
.ip-dh-box .animation-circle.circle-02,
.ip-dh-box .animation-circle.circle-03 {
  top: 341px;
  left: 86px;
  background: url(../../../images/defense_zh/animation-red-dot.png) no-repeat center;
}
.ip-dh-box .animation-circle.circle-04,
.ip-dh-box .animation-circle.circle-05,
.ip-dh-box .animation-circle.circle-06 {
  top: 389px;
  left: 174px;
}
.ip-dh-box .animation-circle.circle-07 {
  top: 280px;
  left: 212px;
}
.ip-dh-box .animation-circle.circle-08 {
  top: 327px;
  left: 439px;
  opacity: 0;
  animation: circle-animate08 2s ease-in 3s alternate infinite;
}
.ip-dh-box .animation-circle.circle-09 {
  top: 333px;
  left: 507px;
  animation: circle-animate09 2s ease-in 3s alternate infinite;
  opacity: 0;
}
.ip-dh-box .animation-circle.circle-10 {
  top: 307px;
  left: 504px;
  animation: circle-animate10 2s ease-in 3s alternate infinite;
  opacity: 0;
}
.ip-dh-box .animation-circle.circle-11 {
  top: 243px;
  left: 575px;
  opacity: 0;
}
.ip-dh-box .animation-circle.circle-12 {
  top: 196px;
  left: 495px;
  opacity: 0;
}
.ip-dh-box .animation-circle.circle-13 {
  top: 243px;
  left: 332px;
  opacity: 0;
}
.ip-dh-box .animation-circle.circle-14 {
  top: 185px;
  left: 295px;
  opacity: 0;
}
.ip-dh-box .animation-circle.circle-15 {
  top: 151px;
  left: 192px;
  animation: circle-animate15 3s ease-in 4s alternate infinite;
  opacity: 0;
}
.ip-dh-box.animate-start .circle-01 {
  animation: circle-animate01 1s ease-in 1;
}
.ip-dh-box.animate-start .circle-02 {
  animation: circle-animate01 1s ease-in 1s 1;
}
.ip-dh-box.animate-start .circle-03 {
  animation: circle-animate01 1s ease-in 2s 1;
}
.ip-dh-box.animate-start .circle-04 {
  animation: circle-animate01 1s ease-in 0s 1;
}
.ip-dh-box.animate-start .circle-05 {
  animation: circle-animate01 1s ease-in 1s 1;
}
.ip-dh-box.animate-start .circle-06 {
  animation: circle-animate01 1s ease-in 2s 1;
}
.ip-dh-box.animate-start .circle-07 {
  animation: circle-animate07 1s ease-in 1s 1;
}
.ip-dh-box.animate-start .circle-11 {
  animation: circle-animate11 1s ease-in 2s 1;
}
.ip-dh-box.animate-start .circle-12 {
  animation: circle-animate12 2s ease-in 3s 1;
}
.ip-dh-box.animate-start .circle-13 {
  animation: circle-animate13 1s ease-in 3s 1;
}
.ip-dh-box.animate-start .circle-14 {
  animation: circle-animate14 1s ease-in 4s 1;
}
.ip-dh-box.animate-start .alternatebg-03-02 {
  animation: alternatebg-animate 2s ease-in 0s 1;
}
.ip-dh-box.animate-start .alternatebg-04-02 {
  animation: alternatebg-animate 2s ease-in 2s 1;
}
.ip-dh-box.animate-start .alternatebg-05-02 {
  animation: alternatebg-animate 2s ease-in 2s 1;
}
.ip-dh-box.animate-start .alternatebg-06-02 {
  animation: alternatebg-animate 2s ease-in 4s 1;
}
.ip-dh-box.animate-start .alternatebg-07-02 {
  animation: alternatebg-animate 2s ease-in 4s 1;
}
.ip-dh-box.animate-start .alternatebg-08-02 {
  animation: alternatebg-animate 2s ease-in 4s 1;
}
.ip-dh-box.animate-start .alternatebg-09-02 {
  animation: alternatebg-animate 2s ease-in 4s 1;
}
.ip-dh-box.animate-start .alternatebg-10-02 {
  animation: alternatebg-animate 2s ease-in 4s 1;
}
@keyframes circle-animate01 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(64px, -38px);
  }
}
@keyframes circle-animate07 {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
  to {
    transform: translate(74px, -44px);
    opacity: 1;
  }
}
@keyframes circle-animate08 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(-64px, 38px);
    opacity: 1;
  }
  100% {
    transform: translate(-64px, 38px);
    opacity: 0;
  }
}
@keyframes circle-animate09 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(61px, 35px);
    opacity: 1;
  }
  100% {
    transform: translate(61px, 35px);
    opacity: 0;
  }
}
@keyframes circle-animate10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(73px, -42px);
    opacity: 1;
  }
  100% {
    transform: translate(73px, -42px);
    opacity: 0;
  }
}
@keyframes circle-animate11 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-42px, -26px);
    opacity: 1;
  }
}
@keyframes circle-animate12 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  30% {
    transform: translate(-22px, -14px);
    opacity: 1;
  }
  80% {
    transform: translate(-132px, 52px);
    opacity: 1;
  }
  100% {
    transform: translate(-152px, 42px);
    opacity: 1;
  }
}
@keyframes circle-animate13 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(62px, 36px);
    opacity: 1;
  }
}
@keyframes circle-animate14 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(71px, -42px);
    opacity: 1;
  }
  100% {
    transform: translate(71px, -42px);
    opacity: 0;
  }
}
@keyframes circle-animate15 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  80% {
    transform: translate(-39px, -22px);
    opacity: 1;
  }
  100% {
    transform: translate(-39px, -22px);
    opacity: 0;
  }
}
@keyframes circle-animate03 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(37px, 23px);
  }
  70% {
    transform: translate(4px, 43px);
  }
  100% {
    transform: translate(44px, 75px);
  }
}
@keyframes alternatebg-animate {
  5% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes alternatebg-animate02 {
  5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes alternatebg-animate01 {
    0% {
      opacity: 1;
    }
    5% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
.alternatebg-02-02 {
  animation: alternatebg-animate02 6s ease-in 0s alternate infinite;
}