html {
     min-width: 375px !important;
 }

 body {
     background-color: #000;
 }

 h2 {
     font-family: 'MatchFormsFont', serif;
 }

 .main {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 160px;
     width: 100%;
     height: 100%;

 }

 .stone {
     position: relative;
     display: flex;
     justify-content: center;
     width: 400px;
     height: 320px;
     cursor: pointer;
 }

 .line-box {
     position: absolute;
     top: -140px;
     left: -140px;
     width: 680px;
     height: 600px;
     z-index: 9;
 }

 .stone img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     -webkit-box-reflect: below -50px linear-gradient(to top, transparent, rgba(0, 0, 0, 0.15));
 }

 .pc-right {
     cursor: pointer;
 }

 .pc-right:hover {
     text-decoration: underline;
 }

 .logo {
     position: fixed;
     bottom: 40px;
     left: 50%;
     display: block;
     width: 160px;
     height: 45px;
     transform: translateX(-50%);
     background: url("../../assets/images/logo-1.png") no-repeat;
     background-size: 100%;
 }

 @keyframes shake {

     0%,
     100% {
         transform: translate(0px, 0px);
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         transform: translate(-5px, -5px);
     }

     20%,
     40%,
     60%,
     80% {
         transform: translate(5px, 5px);
     }

 }

 /* 应用动画到元素 */
 .stone {
     animation: shake 10s ease-in-out infinite;
     transform-origin: center center;
 }