@charset "utf-8";
/* h3 标题样式 */
#serviceInfo {
  width: 100%;
  background: rgba(0, 200, 200, 0.1);
  padding: 10px;
}
.serviceBox table {
  width: 40%;
  text-align: center;
  border-collapse: collapse;
  margin-left: 5%;
  margin-right: 5%;
}
.serviceBox th, .serviceBox td {
  border: solid 1px #AAA;
}
#serviceInfo .serviceBox h2 {
  margin-top: 10px;
  text-align: center;
  width: 100%;
  box-shadow: rgb(255, 255, 255) 5px 5px 15px 5px;
  text-shadow: 2px 2px 4px rgba(11, 222, 222, 0.8);
  margin-bottom: 10px;
}
#serviceInfo .serviceBox p {
  text-indent: 2em;
  font-size: 14px;
  letter-spacing: 0.2em;
}
#serviceInfo #boxset {
  perspective: 2000px;
  width: 100%;
}
#serviceInfo #boxset .serviceBox {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
}
.fadeIn {
  animation: fadein 1s ease-out forwards;
}
@keyframes fadein {
  from {
    transform: rotateX(20deg) rotateY(-120deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}
.buttons {
  display: flex;
  justify-content: space-between;
}
.buttons button {
  width: 100px;
  color: rgb(255, 249, 248);
  font-size: 14px;
  line-height: 14px;
  padding: 5px;
  border-radius: 6px;
  font-family: Georgia, serif;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  background-image: linear-gradient(to right, rgb(28, 110, 164) 0%, rgb(35, 136, 203) 50%, rgb(20, 78, 117) 100%);
  box-shadow: rgb(255, 255, 255) 5px 5px 15px 5px;
  border: 2px solid rgb(28, 110, 164);
  display: inline-block;
}
.buttons button:hover {
  background-image: linear-gradient(to bottom, rgba(18, 255, 255) 0%, rgb(50, 96, 50) 50%, rgb(25, 233, 244) 100%);
  cursor: pointer; /* 将鼠标样式更改为手形 */
}
.buttons button.active {
  background-image: linear-gradient(to bottom, blue 0%, white 50%, blue 100%);
  color: black;
}
.serviceBox > article > div .ORcode {
  width: 48%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.serviceBox > article > div .ORcode img {
  width: 100%;
  margin: 10px 5px;
}
.serviceBox > article > div .ORcode {
  margin: 10px 5px;
}
.serviceBox > article > div {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.serviceBox > article > div img {
  width: 30%;
  flex-grow: 1;
  margin: 10px 5px;
}