.page-hexagon-title { width: 5.104167vw; }

.units {
  position: relative; margin-top: 20vh; left: 6%;
}

.units > :not(.unit.bianlun), .units .line .line-text { position: absolute; }

.units .unit > img { display: block; }

.units .unit.bianlun { height: 43.055556vh; }

.units .unit.bianlun > img { width: auto; height: 100%; }

.units > :not(.unit.bianlun) > img { width: 100%; height: auto; }

.units .unit.waiquan { width: 83.145%; top: 6.5%; left: 8.5%; }

.units .unit.ge { width: 75.85%; top: 9.5%; left: 11.5%; }

.units .unit.jie { width: 67.24%; top: 13%; left: 18.75%; }

.units .unit.dangxin { width: 36.5%; top: 24.75%; left: 31.5%; }

.units .line svg, .units .straight-line svg { display: block; }

.units .line.ge { width: 40%; top: 12%; left: -13%; }

.units .line.jie { width: 22.02%; top: -16%; left: 9%; }

.units .line.waiquan { width: 17.075%; top: -23%; left: 36%; }

.units .line.bianlun { width: 14%; top: -12%; left: 63%; }

.units .line.dangxin { width: 53.9%; top: 0%; left: 52%; }

.units .line-text { font-size: 1.5625vw; white-space: nowrap; }

.units .straight-line .line-text { width: 2em; margin-right: 1.5625vw; text-align: center; }

.units .straight-line.ge { top: 20%; left: -25vh; }

.units .straight-line.ge svg { width: 23.611111vh; }

.units .straight-line.waiquan { top: 42%; left: -25vh; }

.units .straight-line.waiquan svg { width: 21.944444vh; }

.units .straight-line.bianlun { top: 85%; left: -25vh; }

.units .straight-line.bianlun svg { width: 21.944444vh; }

.units .straight-line.jie { top: -21%; left: -25vh; }

.units .straight-line.jie svg { width: 33.611111vh; }

.units .straight-line.dangxin { top: -45%; left: -25vh; }

.units .straight-line.dangxin svg { width: 33.611111vh; }

.units .line.ge .line-text { top: -12%; left: -18%; }

.units .line.jie .line-text { top: -10%; left: -30%; }

.units .line.waiquan .line-text { top: -12%; left: 108%; }

.units .line.bianlun .line-text { top: -22%; left: 112%; }

.units .line.dangxin .line-text { top: -12%; left: 102%; }

.units .line, .units .straight-line {
  visibility: hidden; opacity: 0;
  -webkit-transition: visibility 1s ease-in-out, opacity 1s ease-in-out;
  transition: visibility 1s ease-in-out, opacity 1s ease-in-out;
}

.once.units .line, .once.units .straight-line, .units {
  opacity: 0; visibility: hidden;
}

.chai.units, .he.units { opacity: 1; visibility: visible; }

.once.units .unit {
  -webkit-transition: none; transition: none;
}

.once.units {
  -webkit-animation: fadeInBottom 1s ease-in-out 0.2s forwards;
  animation: fadeInBottom 1s ease-in-out 0.2s forwards;
}

.he.units .line, .chai.units .straight-line {
  -webkit-transition: visibility 1s ease-in-out 1s, opacity 1s ease-in-out 1s;
  transition: visibility 1s ease-in-out 1s, opacity 1s ease-in-out 1s;
}

.chai.units .line, .he.units .straight-line {
  -webkit-transition: visibility .4s ease-in-out, opacity .4s ease-in-out;
  transition: visibility .4s ease-in-out, opacity .4s ease-in-out;
}

.units .unit {
  -webkit-transition: transform 1s ease-in-out 0.2s;
  transition: transform 1s ease-in-out 0.2s;
}

.units .unit.bianlun, .chai.units .unit.bianlun {
  -webkit-transform: translateY(15%); transform: translateY(15%);
}

.units .unit.waiquan, .chai.units .unit.waiquan {
  -webkit-transform: translateY(0%); transform: translateY(0%);
}

.units .unit.ge, .chai.units .unit.ge {
  -webkit-transform: translateY(-20%); transform: translateY(-20%);
}

.units .unit.jie, .chai.units .unit.jie {
  -webkit-transform: translateY(-75%); transform: translateY(-75%);
}

.units .unit.dangxin, .chai.units .unit.dangxin {
  -webkit-transform: translateY(-230%); transform: translateY(-230%);
}

.he.units .unit, .once.units .unit {
  -webkit-transform: translateY(0); transform: translateY(0);
}

.he.units .line, .chai.units .straight-line { visibility: visible; opacity: 1; }

.chai.units .straight-line.waiquan { transition-delay: 1.3s; }

.chai.units .straight-line.ge { transition-delay: 1.6s; }

.chai.units .straight-line.jie { transition-delay: 1.9s; }

.chai.units .straight-line.dangxin { transition-delay: 2.2s; }

.page-operation-group {
  position: absolute; bottom: 23.25vh; right: 25.375%; font-size: 1.5625vw;
}

.page-operation-group .page-operation-btn {
  cursor: pointer; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  width: 3.90625vw; height: 3.90625vw; border-radius: 50%;
  background-image: url("../images/034.png");
  background-size: cover;
}

.page-operation-group .page-operation-btn.active { display: none; }

@media screen and (max-width: 768px) {
  .page-hexagon-title { width: 220px; }

  .page-content { flex-direction: column; }

  .units {
    height: 30%; margin: 19vh auto 0px; left: 0;
    -webkit-transform: translate(0, 0); transform: translate(0, 0);
  }

  .units .unit.bianlun,
  .units .unit.bianlun > img { width: auto; height: 100%; }

  .units .line-text { font-size: 16px; }

  .units .straight-line { left: -15% !important; }

  .units .straight-line.ge svg { width: 50px; }

  .units .straight-line.waiquan svg { width: 38px; }

  .units .straight-line.bianlun svg { width: 55px; }

  .units .straight-line.jie svg { width: 85px; }

  .units .straight-line.dangxin svg { width: 105px; }

  .units .straight-line svg path { stroke-width: 2px; }

  .page-operation-group {
    position: static; margin-top: 4.5vh;
  }

  .page-operation-group .page-operation-btn {
    width: 70px; height: 70px; font-size: 24px;
  }
}