.url_logo{width:35%}.url_main{margin-top:5%;width:85%;height:40vh;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;.url_card{width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.5); overflow: hidden; transition: transform .3s ease,box-shadow .3s ease; &:active{transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,.15);} .zhu_table{width: 94%; justify-items: flex-end; padding: 3%;} .text_url{width: 100%; height: 30vh; display: grid; align-items: center; .text_url_p1{font-size: 30px; font-weight: bold; color: aliceblue;} .text_url_p2{font-size: 24px; font-weight: bold; color: aliceblue;} .text_url_span{border-bottom: 2px solid #ffffff; width: 90%; margin: auto;}}};.zhu_box{background-color: rgb(107,207,82);};.bei_box{background-color: bisque; display: grid; grid-template-rows: 1fr auto; .bei_text_url{.text_url_p1{font-size: 24px; font-weight: bold; color: rgb(25,138,236);} .text_url_p2{font-size: 22px; font-weight: bold; color: rgb(25,138,236);} .text_url_span{border-bottom: 2px solid #ffffff; width: 90%; margin: auto;} .jsx{color: rgb(1,206,29);}}}}.recommend-tag{position:absolute;width:0;height:0;border-style:solid;border-width:80px 80px 0 0;border-color:#ff4757 transparent transparent transparent;border-radius:10px}.recommend-text{position:absolute;color:#fff;font-size:20px;font-weight:bold;transform:rotate(-45deg) translateY(10px)}.loader{--dim: 50px;background-color:#ed8a19;width:var(--dim);height:var(--dim);border-radius:50%;display:grid;place-items:center;animation:spin_412 5s infinite}.loader .loader-svg{transform:translateY(-2px) scale(.7)}@keyframes spin_412{0%{transform:rotate(0) scale(1)}50%{transform:rotate(720deg) scale(1.3)}to{transform:rotate(0) scale(1)}}.cube{margin:60px auto 0;width:100px;height:100Px;transform-style:preserve-3d;animation:spin 3s infinite cubic-bezier(.16,.61,.49,.91)}.face{position:absolute;width:100%;height:100%;background:rgb(67,191,207);border:2px solid #fff;border-radius:5px;box-shadow:0 0 15px #fff}.top{transform:rotateX(90deg) translateZ(50px);animation:shift-top 3s infinite ease-out}.bottom{transform:rotateX(-90deg) translateZ(50px);animation:shift-bottom 3s infinite ease-out}.right{transform:rotateY(90deg) translateZ(50px);animation:shift-right 3s infinite ease-out}.left{transform:rotateY(-90deg) translateZ(50px);animation:shift-left 3s infinite ease-out}.front{transform:translateZ(50px);animation:shift-front 3s infinite ease-out}.back{transform:rotateY(-180deg) translateZ(50px);animation:shift-back 3s infinite ease-out}@keyframes spin{33%{transform:rotateX(-36deg) rotateY(-405deg)}to{transform:rotateX(-36deg) rotateY(-405deg)}}@keyframes shift-top{33%{transform:rotateX(90deg) translateZ(50px)}50%{transform:rotateX(90deg) translateZ(100px)}60%{transform:rotateX(90deg) translateZ(100px)}75%{transform:rotateX(90deg) translateZ(50px)}}@keyframes shift-bottom{33%{transform:rotateX(-90deg) translateZ(50px)}50%{transform:rotateX(-90deg) translateZ(100px)}60%{transform:rotateX(-90deg) translateZ(100px)}75%{transform:rotateX(-90deg) translateZ(50px)}}@keyframes shift-right{33%{transform:rotateY(90deg) translateZ(50px)}50%{transform:rotateY(90deg) translateZ(100px)}60%{transform:rotateY(90deg) translateZ(100px)}75%{transform:rotateY(90deg) translateZ(50px)}}@keyframes shift-left{33%{transform:rotateY(-90deg) translateZ(50px)}50%{transform:rotateY(-90deg) translateZ(100px)}60%{transform:rotateY(-90deg) translateZ(100px)}75%{transform:rotateY(-90deg) translateZ(50px)}}@keyframes shift-front{33%{transform:translateZ(50px)}50%{transform:translateZ(100px)}60%{transform:translateZ(100px)}75%{transform:translateZ(50px)}}@keyframes shift-back{33%{transform:rotateY(-180deg) translateZ(50px)}50%{transform:rotateY(-180deg) translateZ(100px)}60%{transform:rotateY(-180deg) translateZ(100px)}75%{transform:rotateY(-180deg) translateZ(50px)}}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:30px;justify-items:center}