.panel {
  height: 39%;
  width: 95%;
  left:3%;
  position: absolute;
}
.panel1{
  top:0%;
}
.panel2{
  top:39%;
}
.panel3{
  top:78%;
}
.panel:hover .card {
  filter: blur(1.5px);
}
.panel:hover .card1 {
  background-size: 100% 150%;
}
.panel:hover .card2 {
  background-size: 100% 150%;
}
.panel:hover .card3 {
  background-size: 100% 150%;
}
.panel:hover .title {
  color: rgba(255, 255, 255, 0.2);
  font-family: '楷体';
}
.panel:hover .border {
  border: 1px solid white;
}
.panel:hover .slide {
  bottom: 0px;
}
.panel:hover .ring:before,
.panel:hover .ring:after {
  transform: translateX(-50%) translateY(-50%) rotate(310deg);
}

.ring,
.card,
.border,
.slide,
.line {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ring {
  color: #fffbf1;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 90%;  
  width: 80%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 170px;
  
}

.card {
  background: #f0ead6;
  position: relative;
  transition: all 1s;
  height: 80%;  
  width: 70%;
  left:0%;
  top:0%;
  border: 1px solid white;
  
}

.card1 {
  background-image: url("../images/成都页面.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* object-fit: contain; */
  
}

.card2 {
  background-image: url("../images/荆州页面.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card3 {
  background-image: url("../images/武汉页面.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ring:before,
.ring:after {
  content: "";
  padding: 0.6em 0.15em;
  position: absolute;
  left: 50%;
  width:85%;
  top: 50%;
  display: block;
  border: 5px solid #50c9c3;
  border-radius: 50%;
  transition: transform 1s;
  transform: translateX(-50%) translateY(-50%) rotate(50deg);
}

.ring:before {
  border-color: #0369b7 #0aafeb rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

.ring:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0ae0e0 #7debe5;
}

p {
  text-align: center;
  position: absolute;
  font-family: "楷体";
}

.title {
  font-size: 36px;
  font-weight: 700;
  transition: all 1s;
  top: 10%;
  text-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2);
}

.para {
  font-size: 18px;
  font-family: "宋体";
  padding: 10px;
  margin: 0;
  text-align: center;
}

.border {
  position: absolute;
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
  height: 80%;  
  width: 75%;
  transition: border 1s;
  overflow: hidden;
}

.slide {
  height: 100%;  
  width: 100%;
  position: absolute;
  border: 1px solid black;
  bottom: -270px;
  background: rgba(0, 0, 0, 0.5);
  transition: bottom 1s;
  flex-direction: column;
}

.fa-plane {
  font-size: 16px;
}