#root{width:100%;margin:0 auto}.loading{width:50%;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:left;-ms-flex-align:left;align-items:left;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;-webkit-transition:all .5s;transition:all .5s;margin-right:1rem;span {color: var(--thi-color); margin-top: 1rem; font-size: var(--smaller-font-size); -webkit-animation: jump 1s ease 0s infinite normal; animation: jump 1s ease 0s infinite normal;} .logo {position: relative; margin-top: 3rem; width: 80px; height: 80px;}}@-webkit-keyframes jump{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-.5rem);transform:translateY(-.5rem)}50%{-webkit-transform:translateY(0);transform:translateY(0)}60%{-webkit-transform:translateY(-.2rem);transform:translateY(-.2rem)}80%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes jump{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-.5rem);transform:translateY(-.5rem)}50%{-webkit-transform:translateY(0);transform:translateY(0)}60%{-webkit-transform:translateY(-.2rem);transform:translateY(-.2rem)}80%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.App{position:relative;top:0;left:0;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.topSelect select{font-size:var(--normal-font-size)}.top{width:90%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;margin:0 auto;padding:1rem;z-index:999;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:background-color .5s;transition:background-color .5s}.top .logo{width:5rem;margin:1rem 0 0}.sticky{position:fixed;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translate(-50%)}.flex{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main{position:relative;width:90%;margin:0 auto}.foot{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;color:var(--thi-color);font-size:var(--small-font-size);gap:1.5rem;border-top:1px solid var(--thi-color);border-bottom:1px solid var(--thi-color);margin:2rem auto 4rem;padding:1rem 2rem;line-height:1.5}.foot .foot_logo{width:3rem;opacity:.3;-webkit-filter:grayscale(1);filter:grayscale(1)}.foot>div{margin:.3rem}.scroll-top{position:fixed;bottom:-50px;right:25px;z-index:99;outline:none;background-color:#efefef;border:1px solid #333;cursor:pointer;padding:15px;border-radius:4px;-webkit-animation:movescrollTop 3s ease-in-out infinite;animation:movescrollTop 3s ease-in-out infinite;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;opacity:0;-webkit-box-shadow:1px 1px 5px 1px var(--thi-color);box-shadow:1px 1px 5px 1px var(--thi-color)}@-webkit-keyframes movescrollTop{0%{-webkit-transform:translateY(0px);transform:translateY(0)}50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}@keyframes movescrollTop{0%{-webkit-transform:translateY(0px);transform:translateY(0)}50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}@-webkit-keyframes enter{0%{opacity:0}to{opacity:1}}@keyframes enter{0%{opacity:0}to{opacity:1}}.item{position:relative;top:0;left:0;width:360px;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-name:enter;animation-name:enter;padding:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;overflow:hidden;h3 {font-size: var(--h3-font-size); margin: 0 0 4px 4px; padding-bottom: 2rem;} .type {font-size: var(--small-font-size); font-weight: bold; margin: 8px 4px 2px;} .img {width: 100%; max-width: 320px; aspect-ratio: 16/9; border-radius: 20px; -webkit-filter: contrast(101%) saturate(105%); filter: contrast(101%) saturate(105%); overflow: hidden;} .does {position: absolute; color: #fff; background: var(--first-color); padding: .3rem .8rem; top: 1.5rem; left: 1.5rem; border-radius: 20px; border: 2px solid rgba(255,255,255,.8); line-height: 1.2; font-size: var(--smaller-font-size); font-weight: 500;} .desc {position: absolute; font-size: var(--small-font-size); padding: 4px; bottom: 0;} .price {position: absolute; text-align: right; color: var(--first-color); font-size: var(--biggest-font-size); font-weight: 900; bottom: .2rem; right: 1.5rem; span {color: rgb(121,121,121); font-size: var(--smaller-font-size); font-weight: bold;}}}@media screen and (max-width: 400px){.topSelect select{margin-top:1rem;width:100%}.foot{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:.5rem}}@media screen and (max-width: 799px){.item{width:50%}.item .type{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.item .img{border-radius:10px}.item .does{top:1rem;left:.5rem;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.item .desc{-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}.item .price{right:1rem}}:root{--first-color: hsl(0, 64%, 58%);--sec-color: hsl(0, 0%, 20%);--thi-color: hsl(0, 0%, 55%);--border-color: hsl(0, 0%, 77%);--normal-font-size: .938rem;--h3-font-size: 1rem;--biggest-font-size: 2rem;--small-font-size: .813rem;--smaller-font-size: .75rem;font-family:Noto Sans TC,黑體-繁,Apple LiGothic Medium,PingFang,微軟正黑體,Microsoft JhengHei,WenQuanYi Zen Hei,helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}@media screen and (min-width: 968px){:root{--biggest-font-size: 2.5rem;--h3-font-size: 1.25rem;--normal-font-size: 1rem;--small-font-size: .875rem;--smaller-font-size: .813rem}}*,*:before,*:after{padding:0;margin:0;outline:none;border:none;-webkit-box-sizing:border-box;box-sizing:border-box}html{scroll-behavior:smooth}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}