.item {
  width: 380px;
  height: 260px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.item img {
  width: 100%;
  height: auto;
}

.item .caption {
  position: absolute;
  font-weight: bold;
  bottom: 5px;
}

/* 下面是 轮播图有关的样式 */
.loopScreen {
  position: absolute;
  width: 934px;
  height: 487px;
  top: 423px;
  transform: scale(1);
  left: 12px;
  overflow: hidden;
}

.loopScreen .item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-out;
}

.loopScreen .baseBottom {
  position: relative;
  left: 0px;
  top: 266px;
  background: url(../../public/images/baseImg.png) no-repeat 100% 100%;
  width: 928px;
  height: 224px;
}

.loopScreen .baseBottom .baseCircle {
  position: absolute;
  top: -240px;
  left: 146px;
  /* border: 1px solid; */
  border-radius: 1000px;
  width: 642px;
  height: 642px;
  transform: translate3d(0px, 0px, 0px) translate(0%, 0%) rotate3d(1, 0, 0, 79deg);
}

.loopScreen .baseBottom .baseCircle #point {
  position: absolute;
  left: 0px;
  top: 0px;
  /* background: red; */
  width: 5px;
  height: 10px;
  border-radius: 10px;
}

.loopScreen .baseBottom .baseCircleTree {
  position: absolute;
  top: -240px;
  left: 146px;
  width: 642px;
  height: 642px;
  transform: translate3d(0px, 0px, 0px) translate(0%, 0%) rotate3d(1, 0, 0, 79deg);
}



.loopScreen .baseBottom .baseCircleTree .baseLine {
  position: absolute;
  left: 0px;
  top: 40px;
}

.loopScreen .baseBottom .baseCircleTree .baseLine .baseLineImg {
  background: url(../../public/images/line.png) no-repeat;
  background-size: 100% 100%;
  width: 41px;
  height: 873px;
  position: relative;
  top: -731px;
  left: -20px;
}

.imgVisible {
  visibility: hidden;
}

.imgZIndex {
  z-index: 5;
}

.imgZIndexS {
  z-index: 1;
}

.loopScreen .baseBottom .baseCircleTree #point-tree img,
.loopScreen .baseBottom .baseCircleTree #point-r-tree img,
.loopScreen .baseBottom .baseCircleTree #point-l-tree img,
.loopScreen .baseBottom .baseCircleTree #point-f-tree img {
  width: 226px;
  height: 742px;
  position: relative;
  display: inline-block;
  top: -2319px;
  left: -114px;
  background: #fff;
  padding: 8px 2px;
  border-radius: 10px 10px 10px 10px/40px 40px 40px 40px;
  transition: all 0.5s;
}

/* #point-r-tree img {
  z-index: 10;
} */

img.pointTTree {
  transition: all 0.5s;
  top: -2033px !important;
  width: 304px !important;
  left: -148px !important;
  height: 880px !important;
  z-index: 10 !important;
  padding: 23px 4px !important;
}


.baseInfoTag {
  width: 50%;
  background-repeat: no-repeat;
  margin-right: 19px;
  /* box-shadow: 0px 8px 12px 1px rgba(9,53,93,.34); */
  position: relative;;
}
.baseInfoTag-content {
  width: 232px;
  height: 32px;
  background: rgba(0, 0, 0,.5);
  color: #ffff;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: alibaba-r;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}
.baseInfoTag-content span {
  margin-left: 16px;
  font-size: 16px;
  font-family: Alibaba-R;
  font-weight: 500;
  color: #FFF;
}
.baseInfoTag-content.top {
  position: absolute;
  top: -148px;
  left: 353px;
  width: 226px !important;
}

.baseInfoTag-content.top span.baseInfoTag-text,
.baseInfoTag-content.right span.baseInfoTag-text,
.baseInfoTag-content.left span.baseInfoTag-text 
{
  position: absolute;
  left: 0px;
  top: 5px;
  animation-name: moveExamTop;
  animation-duration: 1s;

  display: inline-block;
}
@keyframes moveExamTop {
  0% {left: -100px; top: 5px;}
  100% {left: 0px; top: 5px;}
}

.baseInfoTag-content.bottom {
  top: -77px;
  left: 311px;
  width: 304px !important;
  height: 168px;
  display: block;
  /* animation-name: moveExamBottom;
  animation-duration: 1s; */
  border-radius: 5px;
}
.baseInfoTag-content.bottom .title {
  width: 100%;
  display: block;
  position: absolute;
  top: 23px;
}
@keyframes moveExamLeft {
  0% {left: -100px; top: 23px;}
  100% {left: 0px; top: 23px;}
}
.baseInfoTag-content.bottom .title span {
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;

  display: inline-block;
  animation-name: moveExamLeft;
  animation-duration: 1s;
}
.baseInfoTag-content.bottom .content {
  display: block;
  position: absolute;
  top: 86px;
  padding: 0 12px;
  font-weight: 500;
  font-size: 14px;
  color: #E6F0F9;
  font-family: alibaba-r;
  animation-name: moveExamLeft;
  animation-duration: 1s;
}
@keyframes moveExamLeft {
  0% {left: -100px; top: 86px;}
  100% {left: 0px; top: 86px;}
}

.baseInfoTag-content.left {
  top: -91px;
  left: 33px;
  width: 226px !important;
  
  /* animation-name: moveExamLeft;
  animation-duration: 1s; */
}
.baseInfoTag-content.right {
  position: absolute;
  top: -84px;
  left: 675px;
  width: 226px !important;
  z-index: 0;
/* 
  animation-name: moveExamRight;
  animation-duration: 1s; */
}
.rectangle-icon {
  width: 5px;
  height: 21px;
  background-image: url(../../public/images/rectangle1.png);
  position: absolute;
  left: 0;
}
.rectangle-count {
  position: absolute;
  right: 7px;
  color: #FF4E4A !important;
  z-index: 10;
}
.rectangle-count-icon {
  width: 22px;
  height: 21px;
  background-image: url(../../public/images/fire.png);
  position: absolute;
  right: 39px;
  z-index: 18;
  background-repeat: no-repeat;
  top: 4px;
}
.rectangle-icon1 {
  width: 93px;
  height: 28px;
  background-image: url(../../public/images/circle.png);
  position: absolute;
  right: 0;
  background-repeat: no-repeat;
  top: -1px;
}