.bg3 {
  color: white;
}
.bg3 .indexBgTitleActive {
  animation: indexBgTitleActive 0.3s;
  -webkit-animation: indexBgTitleActive 0.5s;
  -moz-animation: indexBgTitleActive 0.5s;
  -o-animation: indexBgTitleActive 0.5s;
}
@keyframes indexBgTitleActive {
  0% {
    left: -20%;
  }
  100% {
    left: 5%;
  }
}
.bg3 .bg3_title {
  position: absolute;
  top: 13%;
  left: 10%;
  height: 10%;
  width: 20%;
  display: none;
}
.bg3 .bg3_title .white_title div {
  font-size: 36px;
  color: white;
  margin-bottom: 10px;
  position: relative;
  z-index: 10;
  transform: translateZ(20px);
  -webkit-transform: translateZ(20px);
  -moz-transform: translateZ(20px);
  -ms-transform: translateZ(20px);
  -o-transform: translateZ(20px);
}
.bg3 .bg3_title .white_title span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.bg3 .bg3_title .black_title {
  color: #354063;
  font-size: 30px;
  position: absolute;
  top: -10%;
  left: -10%;
}
.bg3 .bg5_content {
  position: relative;
  height: 60%;
  width: 60%;
  left: 20%;
  top: 27%;
  display: flex;
  flex-wrap: wrap;
  opacity: 1;
  transition: all 0.3s;
}
.bg3 .bg5_content .bg_tanchuang_box {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 100;
}
.bg3 .bg5_content .bg_tanchuang_box .closeImg {
  position: absolute;
  top: 4%;
  right: 2%;
  height: 20px;
  width: 20px;
}
.bg3 .bg5_content .bg_tanchuang_box .closeImg:hover {
  animation: dou 0.1s 4;
}
@keyframes dou {
  0% {
    transform: rotateZ(-10deg);
  }
  100% {
    transform: rotateZ(10deg);
  }
}
.bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub {
  position: absolute;
  width: 900px;
  height: 283px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 2;
}
.bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub .bg_tanchaun_pub_thirdBg {
  position: absolute;
  width: 900px;
  height: 320px;
  background: linear-gradient(-88deg, #4252b2, #3275d7);
  opacity: 0.4;
  border-radius: 10px;
}
.bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub .bg_tanchaun_pub_secondBg {
  position: absolute;
  width: 860px;
  height: 370px;
  left: 20px;
  top: -24px;
  background: linear-gradient(-88deg, #4252b2, #3275d7);
  opacity: 0.7;
  border-radius: 10px;
}
.bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub .bg_tanchaun_pub_oneBg {
  left: 40px;
  top: -51px;
  position: absolute;
  width: 820px;
  height: 420px;
  background: url(../img/tanchuangbg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
}
.bg3 .bg5_content .bg_tanchuang_box .bg3_content_box1_bigContent .bg3_content_box1_bigContent_oneBg .bg3_content_box1_bigContent_oneBgTitle {
  position: absolute;
  top: -10%;
  width: 100%;
  font-size: 27px;
  text-align: center;
}
.bg3 .bg5_content .bg_tanchuang_box .bg3_content_box1_bigContent .bg3_content_box1_bigContent_oneBg .bg3_content_box1_bigContent_tanchuang .jieshaotupian {
  position: absolute;
  height: 50%;
  width: 50%;
  left: 25%;
  top: 8%;
  background-color: #fff;
}
.bg3 .bg5_content .bg_tanchuang_box .bg3_content_box1_bigContent .bg3_content_box1_bigContent_oneBg .bg3_content_box1_bigContent_tanchuang .bg3_content_box1_bigContent_tanchuang_content {
  position: absolute;
  width: 80%;
  height: 20%;
  left: 10%;
  bottom: 15%;
  font-size: 12px;
  color: white;
}

.bg3 .bg5_content .bg3_content_box {
  height: 50%;
  width: 25%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_text {
  font-size: 20px;
  padding: 0 21px;
  text-align: center;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn {
  font-size: 12px;
  --color: #fff;
  --color-hover: var(--color);
  --background: linear-gradient(270deg, #384bbb, #3275d7);
  --background-hover: var(--background);
  --hover-back: #6D58FF;
  --hover-front: #5C86FF;
  border-radius: 20px;
  width: 141px;
  height: 34px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  outline: none;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translate(-50%);
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  color: var(--c, var(--color));
  background: var(--b, var(--background));
  transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn div {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn div span {
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: var(--name, none) 0.7s linear forwards 0.18s;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in {
  --name: move;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in:not(.out) {
  --c: var(--color-hover);
  --b: var(--background-hover);
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in:not(.out):before,
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in:not(.out):after {
  --y: 0;
  --br: 5%;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in:not(.out):after {
  --br: 10%;
  --d-d: 0.02s;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in.out {
  --name: move-out;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn.in.out:before {
  --d-d: 0.06s;
}
@keyframes move {
  30%,
  36% {
    transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
  }
  50% {
    transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
  }
  70% {
    transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
  }
}
@keyframes move-out {
  30%,
  36% {
    transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
  }
  50% {
    transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
  }
  70% {
    transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
  }
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn:not(.simple):before,
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn:not(.simple):after {
  content: '';
  position: absolute;
  background: var(--pb, var(--hover-back));
  top: 1px;
  left: 0;
  right: 0;
  height: 200%;
  border-radius: var(--br, 40%);
  transform: translateY(var(--y, 50%));
  transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s);
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext_btn:not(.simple):after {
  --pb: var(--hover-front);
  --d: 0.44s;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: rgba(24, 82, 178, 0.8);
  opacity: 0;
  z-index: 2;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext .bg3_content_box_bluetext_title {
  margin-top: 32px;
  font-size: 20px;
  padding: 0px 20px;
  text-align: center;
}
.bg3 .bg5_content .bg3_content_box .bg3_content_box_bluetext .bg3_content_box_bluetext_content {
  font-size: 12px;
  margin-top: 15px;
  padding: 0 10px;
  text-align: center;
}
.bg3_content_boxImg {
  position:absolute;
  height:100%;
  width:100%;
  opacity:0.5;
  z-index:1;
}
.tanchaung_bg {
  display: none;
  position: absolute;
  top:0;
  height: 150%;
  width: 150%;
  /*background: rgba(20,20,20,0.5);*/
  background: url("../img/mohu.png") no-repeat;
  background-size: 100% 100%;
  z-index:3;

}
@media screen and (max-height: 600px) {
  .bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub .bg_tanchaun_pub_thirdBg {
    width: 800px;
    height: 270px;
  }
  .bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub .bg_tanchaun_pub_secondBg {
    width: 760px;
    height: 320px;
  }
  .bg3 .bg5_content .bg_tanchuang_box .bg_tanchaun_pub .bg_tanchaun_pub_oneBg {
    width: 720px;
    height: 370px;
  }
}