body {
  background: url(/expert/web/static/history/background_v.jpg) repeat-y center top;
  background-size: 100% auto;
}
.web-footer {
  background: none !important;
}
#banner {
  background: url(/expert/web/static/history/history_03_banner.png) no-repeat center top;
  background-size: 100% 100%;
}
.center {
  text-align: center;
}
.content {
  width: 1200rem;
  margin: auto;
}
.ball {
  position: absolute;
  background-color: rgba(154, 51, 18, 0.5);
  border-radius: 100%;
  width: 34rem;
  height: 34rem;
  opacity: 0;
  transition: 0.5s ease-in-out;
}
.ball::after {
  border-radius: 100%;
  position: absolute;
  content: ' ';
  width: 14rem;
  height: 14rem;
  background-color: #9a3312;
  left: 10rem;
  bottom: 10rem;
}
.floor {
  font-size: 16rem;
  color: #5e4a23;
  line-height: 28rem;
  font-family: PingFangSC-Regular;
  padding: 60rem 0 100rem 0;
}
.floor.s2 {
  padding-top: 156rem;
}
.floor.dark {
  background-color: rgba(153, 103, 36, 0.15);
}
.floor h2 {
  line-height: 53rem;
  font-weight: 0;
  font-size: 48rem;
  color: #9a3312;
  margin-bottom: 24rem;
}
.floor p {
  margin-bottom: 32rem;
}
.floor p:last-child {
  margin-bottom: 0;
}
.floor .tips p {
  line-height: 20rem;
  font-weight: 400;
  font-size: 14rem;
  color: #9b8a69;
  margin-bottom: 0;
}
.floor .map1 {
  position: relative;
  width: 686rem;
  height: 380rem;
  margin: auto;
  padding-top: 240rem;
}
.floor .map1 img {
  width: 686rem;
  height: 380rem;
  display: block;
}
.floor .map2 {
  width: 890rem;
  margin: auto;
}
.floor .map2 img.map {
  width: 570rem;
  height: 508rem;
  display: block;
}
.floor .tips1 {
  margin-top: -78rem;
}
.floor .tips1 img {
  transform-origin: right center;
  transform: rotate(-90deg);
}
.floor .tips2 {
  margin-top: -88rem;
  float: left;
  margin-bottom: 80rem;
  margin-left: 600rem;
}
.floor .tips2 img {
  transform: rotate(180deg);
  margin-left: -10rem;
  margin-bottom: -25rem;
  width: 7rem;
}
.effect-map {
  position: relative;
}
.effect-map .ball {
  display: block;
  left: auto;
}
.effect-map .point {
  position: absolute;
  transition: 0.5s ease-in-out;
}
.effect-map .point p {
  position: absolute;
  font-size: 16rem;
  color: #9a3312;
  line-height: 22rem;
  opacity: 0;
  transition: 0.5s ease-in-out;
}
.effect-map.map1 .ball {
  top: 0;
  left: 50%;
  transform: translate(-50%, -34rem);
}
.effect-map.map1 .point {
  width: 2rem;
  background: url(/expert/web/icon/dashed-v.png) repeat-y center bottom;
  background-size: 2rem 20rem;
  height: 0;
}
.effect-map.map1 .point p {
  text-align: center;
  white-space: nowrap;
  bottom: calc(100% + 40rem);
  left: 50%;
  transform: translate(-50%, 0%);
}
.effect-map.map2 .ball {
  right: 0;
  top: 50%;
  transform: translate(34rem, -50%);
}
.effect-map.map2 .point {
  width: 0rem;
  background: url(/expert/web/icon/dashed.png) repeat-x left center;
  background-size: 20rem 2rem;
  height: 2rem;
}
.effect-map.map2 .point p {
  top: 50%;
  left: calc(100% + 40rem);
  transform: translate(0, -50%);
  width: 260rem;
}
.effect-map.show .point p,
.effect-map.show .ball {
  opacity: 1;
}
.effect-map.show .ball {
  transition: 0.5s ease-in-out 1s;
}
.effect-map.show .point p {
  transition: 0.5s ease-in-out 1.2s;
}
.effect-map.show.map1 .point1 {
  left: 29rem;
  bottom: 222rem;
  height: 167rem;
  transition: height 1s ease-in-out;
}
.effect-map.show.map1 .point2 {
  left: 216rem;
  bottom: 222rem;
  height: 267rem;
  transition: height 1s ease-in-out 0.2s;
}
.effect-map.show.map1 .point3 {
  left: 278rem;
  bottom: 176rem;
  height: 233rem;
  transition: height 1s ease-in-out 0.4s;
}
.effect-map.show.map1 .point4 {
  left: 340rem;
  bottom: 233rem;
  height: 167rem;
  transition: height 1s ease-in-out 0.5s;
}
.effect-map.show.map1 .point5 {
  left: 401rem;
  bottom: 235rem;
  height: 247rem;
  transition: height 1s ease-in-out 0.6s;
}
.effect-map.show.map1 .point6 {
  left: 440rem;
  bottom: 175rem;
  height: 247rem;
  transition: height 1s ease-in-out 0.7s;
}
.effect-map.show.map1 .point7 {
  left: 528rem;
  bottom: 185rem;
  height: 276rem;
  transition: height 1s ease-in-out 0.8s;
}
.effect-map.show.map2 .point1 {
  left: 330rem;
  top: 65rem;
  width: 286rem;
  transition: width 1s ease-in-out;
}
.effect-map.show.map2 .point2 {
  left: 354rem;
  top: 168rem;
  width: 262rem;
  transition: width 1s ease-in-out 0.2s;
}
.effect-map.show.map2 .point3 {
  left: 348rem;
  top: 237rem;
  width: 268rem;
  transition: width 1s ease-in-out 0.4s;
}