@font-face{font-family: 'STCaiyun'; src: url('../Font/STCaiyun.ttf');}
@font-face{font-family: 'YouYuan'; src: url('../Font/YouYuan.ttf');}
::-webkit-scrollbar{display: none; width: 0;}
.background{background-image: radial-gradient(circle at 50% 50%, rgba(183, 227, 231, 0.3), rgba(122, 180, 180, 0.2));}
.title{position: fixed; left: 1.5%; top: -0.5rem; font-size: 1.5rem; color: rgb(1, 1, 1); font-family: STCaiyun, serif;}
.time{position: fixed; right: 1%; top: -0.5rem;  font-size: 1.5rem; color: rgba(250, 82, 250, 0.9); font-family: STCaiyun, serif;}
.order{position: fixed; top:85%; bottom: 15%; left: 15%; right: 15%; height: 12%; width: auto; border: none;}
.base{position: fixed; top: 95%; left: 8%; right: 8%; height: 1%; width: auto; border: none; border-radius: 30%; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(192, 255, 233, 0.8) 50%, rgba(0, 0, 0, 0) 100%);}
.tab{height: 80%; width: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center; white-space: nowrap; font-family: YouYuan, serif; z-index: 1; transition: transform 0.5s ease;}
.last{position: absolute; top: 0; left: 10%; margin-bottom: 5vh; font-size: 3vh; color: rgba(0, 0, 0, 0.6);}
.this{position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-bottom: 3vh; font-size: 5vh; color: rgba(0, 0, 0, 1);}
.next{position: absolute; top: 0; right: 10%; margin-bottom: 5vh; font-size: 3vh; color: rgba(0, 0, 0, 0.6);}
/* .bubble{position: fixed; top: 50%; left: 50%; width: 20px; height: 20px; border-radius: 50%; color: aliceblue; background: azure; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);} */
.frame{position: fixed; top: 9.7%; bottom: 14.7%; left: 11.8%; right: 11.8%; height: auto; width: auto; background: repeating-linear-gradient(to bottom right, #add8e6, #b0c4de, #9400D3, #ffffe0, #fffacd, #ffa500) !important; border-radius: 2vmin;}
.center{position: fixed; top: 10%; bottom: 15%; left: 12%; right: 12%; height: auto; width: auto; background: white; border-style: none; border-radius: 2vmin; text-align: center; overflow: hidden; overflow-y: auto;}
.container{width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.content p{font-size: 1rem; margin: 1rem;}
.content strong{font-size: 1.12rem;}
/* .hidden{display: none;} */
/* .appear{display: block;} */
.image1{max-width: min(18rem, 90%); height: auto;}
.image2{max-width: min(20rem, 90%); height: auto;}
.image3{max-width: min(25rem, 90%); height: auto;}
.type--A{--line_color: #555555; --back_color: #ffecf6;}
.type--B{--line_color: #1b1919; --back_color: #e9ecff;}
.type--C{--line_color: #00135c; --back_color: #defffa;}
.button{position: relative; top: -100px; z-index: 0; width: 240px; height: 56px; text-decoration: none; font-size: 14px; font-weight: bold; color: var(--line_color); letter-spacing: 2px; transition: all 0.3s ease;}
.button__text{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.button::before, .button::after, .button__text::before, .button__text::after{content: ""; position: absolute; height: 3px; border-radius: 2px; background: var(--line_color); transition: all 0.5s ease;}
.button::before{top: 0; left: 54px; width: calc(100% - 56px * 2 - 16px);}
.button::after{top: 0; right: 54px; width: 8px;}
.button__text::before{bottom: 0; right: 54px; width: calc(100% - 56px * 2 - 16px);}
.button__text::after{bottom: 0; left: 54px; width: 8px;}
.button__line{position: absolute; top: 0; width: 56px; height: 100%; overflow: hidden;}
.button__line::before{content: ""; position: absolute; top: 0; width: 150%; height: 100%; box-sizing: border-box; border-radius: 300px; border: solid 3px var(--line_color);}
.button__line:nth-child(1), .button__line:nth-child(1)::before{left: 0;}
.button__line:nth-child(2), .button__line:nth-child(2)::before{right: 0;}
.button:hover{letter-spacing: 6px;}
.button:hover::before, .button:hover .button__text::before{width: 8px;}
.button:hover::after, .button:hover .button__text::after{width: calc(100% - 56px * 2 - 16px);}
.button__drow1, .button__drow2{position: absolute; z-index: -1; border-radius: 16px; transform-origin: 16px 16px;}
.button__drow1{top: -16px; left: 40px; width: 32px; height: 0; transform: rotate(30deg);}
.button__drow2{top: 44px; left: 77px; width: 32px; height: 0; transform: rotate(-127deg);}
.button__drow1::before, .button__drow1::after, .button__drow2::before, .button__drow2::after{content: ""; position: absolute;}
.button__drow1::before{bottom: 0; left: 0; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(-60deg);}
.button__drow1::after{top: -10px; left: 45px; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(69deg);}
.button__drow2::before{bottom: 0; left: 0; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(-146deg);}
.button__drow2::after{bottom: 26px; left: -40px; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(-262deg);}
.button__drow1, .button__drow1::before, .button__drow1::after, .button__drow2, .button__drow2::before, .button__drow2::after{background: var(--back_color);}
.button:hover .button__drow1{animation: drow1 ease-in 0.06s; animation-fill-mode: forwards;}
.button:hover .button__drow1::before{animation: drow2 linear 0.08s 0.06s; animation-fill-mode: forwards;}
.button:hover .button__drow1::after{animation: drow3 linear 0.03s 0.14s; animation-fill-mode: forwards;}
.button:hover .button__drow2{animation: drow4 linear 0.06s 0.2s; animation-fill-mode: forwards;}
.button:hover .button__drow2::before{animation: drow3 linear 0.03s 0.26s; animation-fill-mode: forwards;}
.button:hover .button__drow2::after{animation: drow5 linear 0.06s 0.32s; animation-fill-mode: forwards;}
@keyframes drow1{0%{height: 0;}100%{height: 100px;}}
@keyframes drow2{0%{width: 0; opacity: 0;} 10%{opacity: 0;}11%{opacity: 1;}100%{width: 120px;}}
@keyframes drow3{0%{width: 0;}100%{width: 80px;}}
@keyframes drow4{0%{height: 0;}100%{height: 120px;}}
@keyframes drow5{0%{width: 0;}100%{width: 124px;}}
.button:not(:last-child){margin-bottom: 64px;}