body {overflow-x: hidden;margin: 0;scroll-behavior: smooth;font-size: 2.13vw;background: linear-gradient(180deg, #EEF9E9 8.44%, #F4F4F4 96.99%); font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #333333;}
html { scrollbar-width: none; -ms-overflow-style: none;scroll-behavior: smooth;font-size: 2.13vw;}
::-webkit-scrollbar { width: 0px; background: transparent; }

* { box-sizing: border-box; }

.container{width: 100%;margin: 0 auto;padding: 0 1.875rem;position: relative;}
a {text-decoration: none;}
p, h1, h2, h3, h4{margin: 0;}

ul, li{padding: 0;margin: 0;}
li{list-style: none;}

.hidden{display: none!important;}

header{position: relative;z-index: 1;}
header::before{content: "";position: absolute;top: 0;left: 0;width: 42.5rem;height: 41.75rem;border-radius: 50%;background: radial-gradient(56.46% 56.46% at 39.63% 43.54%, #CEFFF9 7.94%, rgba(214, 254, 249, 0) 100%);top: -15.438rem;left: -8.125rem;z-index: -1;}
header::after{content: "";position: absolute;width: 21.375rem;height: 21.125rem;border-radius: 50%;background: radial-gradient(50% 50% at 50% 50%, #C3FFDE 0%, rgba(195, 255, 222, 0) 100%); top: -8rem;left: 35rem;z-index: -1;}
header .headerWrap{display: flex;align-items: center;column-gap: 1.375rem;padding: 1.875rem 0;}
header .headerWrap .logoWrap{display: flex;align-items: center;width: 13.438rem;height: 5.313rem;flex: 0 0 13.438rem;max-width: 13.438rem;column-gap: 0.75rem;}
header .headerWrap .logoWrap > img{width:100%;height: auto;object-fit: cover;object-position: center;}
header .headerWrap .logoWrap .logoContent{display: flex;flex-direction: column;}
header .headerWrap .logoWrap .logoContent h2{font-size: 1.75rem;color: #223834;font-weight: bold;}
header .headerWrap .logoWrap .logoContent p{font-size: 0.875rem;color: #223834E5;font-weight: 500;}
header .headerWrap .search-bar{width: 22.125rem;flex: 0 0 22.125rem;max-width: 22.125rem;height: 4rem;border-radius: 3.75rem;border: 2px solid #FFFFFF;background-color: #FFFFFF66;padding: 0.375rem;display: flex;align-items: center;justify-content: space-between;column-gap: 0.5rem;margin-left: auto;}
header .headerWrap .search-bar input{border: none;outline: none;background-color: transparent;font-size: 1rem;padding-left: 0.5rem;}
header .headerWrap .search-bar .search-btn{width: 5.313rem;height: 3.25rem;flex: 0 0 5.313rem;max-width: 5.313rem;border-radius: 1.875rem;background: linear-gradient(97.74deg, #67F9CB -3.14%, #46C1FF 125.26%); display: flex;align-items: center;justify-content: center;}
header .headerWrap .search-bar .search-btn .icon{width: 2.125rem;height: 2.125rem;background-position: -7.3rem -44.25rem;background-size: 21rem 55rem;filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(104%) contrast(102%);}
header .headerWrap .menu-btn{width: 2.125rem;height: 1.875rem;background-image: url(../images/menuIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .menu-list{background-color: #ffffff;border-radius: 1.375rem;display: flex;align-items: center;column-gap: 3.75rem;overflow-x: scroll;padding: 0 1.25rem;box-shadow: 0px 2px 2px 0px #0EC9A308;width: 100%;height: 5.313rem;}
header .menu-list::-webkit-scrollbar{height: 0;}
header .menu-list a{display: flex;align-items: center;column-gap: 0.188rem;position: relative;height: 100%;}
header .menu-list a img{width: 1.875rem;height: auto;object-fit: cover;object-position: center;}
header .menu-list a p{font-size: 1.625rem;font-weight: 500;color: #949494;white-space: nowrap;margin-top: -0.125rem;}
header .menu-list a.active p{color: #06CEAD;font-weight: bold;}
header .menu-list a.active .icon{filter: brightness(0) saturate(100%) invert(70%) sepia(43%) saturate(6122%) hue-rotate(130deg) brightness(102%) contrast(95%);}
header .menu-list a.active::after{content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 2.188rem;height: 0.375rem;border-radius: 0.31rem;background: linear-gradient(90deg, #65F3CE 0%, #41C3FF 198.57%); }

footer{background-color: #ffffff;margin-top: 2.813rem;}
footer .footerWrap{padding: 0 1rem;display: flex;flex-direction: column;}
footer .footerWrap .footer-link{display: flex;align-items: center;column-gap: 2rem;padding-top: 2.75rem;justify-content:center;}
footer .footerWrap .footer-link a{font-size: 1.625rem;line-height: 1;color: #949494;text-decoration: underline;}
footer .footerWrap .friendship-links-panel{padding: 1.25rem 0 2.5rem;border-bottom: 1px solid #0000001A;display: flex;align-items: center;column-gap: 1rem;}
footer .footerWrap .friendship-links-panel p{font-size: 1.625rem;font-weight: 500;color: #949494;white-space: nowrap;}
footer .footerWrap .friendship-links-panel .friendship-link-list{display: flex;align-items: center;flex-wrap: wrap;gap: 2rem;}
footer .footerWrap .friendship-links-panel .friendship-link-list a{font-size: 1.625rem;line-height: 1;color: #949494;text-decoration: underline;}
footer .footerWrap .copyright-panel{display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 1.5rem 0;}
footer .footerWrap .copyright-panel p{font-size: 1.375rem;line-height: 2rem;color: #C0C0C0;text-align: center;}

.titleWrap{display: flex;align-items: center;justify-content: space-between;}
.titleWrap .headWrap{position: relative;display: flex;align-items: center;column-gap: 0.5rem;}
.titleWrap .headWrap h2{font-size: 2rem;font-weight: bold;color: #333333;}
.titleWrap .headWrap span{ font-size: 2.5rem; font-weight: bold; background: linear-gradient(269.8deg, rgba(85, 223, 179, 0.4) -47.14%, rgba(88, 240, 192, 0) 138.18%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;position: relative;top: 0.25rem;}
.titleWrap .moreBtn .arrow-icon{width: 1.5rem;height: 1.5rem;background-size: 16.5rem 51rem; background-position: -5.875rem -45rem;}

.bgWrap{background: linear-gradient(300.32deg, #FFFFFF 63.3%, #EDFFF9 85.01%); border-radius: 1.875rem;padding: 1.875rem;}

.mt-30{margin-top: 1.875rem;}

.viewBtn{margin-left: auto;width: 6.875rem;height: 3.5rem;line-height: 3.5rem;border-radius: 1.875rem;text-align: center;background: linear-gradient(97.74deg, #67F9CB -3.14%, #46C1FF 125.26%); font-size: 1.625rem;color: #FFFFFF;font-weight: bold;}

.breadcrumb{margin-top: 1.5rem;position: relative;z-index: 1;}
.breadcrumb .breadcrumb-wrap{display: flex;align-items: center;column-gap: 1rem;}
.breadcrumb .breadcrumb-wrap > a{display: flex;align-items: center;column-gap: 0.625rem;}
.breadcrumb .breadcrumb-wrap > a .icon{width: 1.5rem;height: 1.5rem;background-size: 15rem 45rem;background-position: -5.25rem -22.45rem;}
.breadcrumb .breadcrumb-wrap > a p{font-size: 1.5rem;color: #949494;font-weight: 500;}
.breadcrumb .breadcrumb-wrap > i{width: 1px;height: 1.5rem;background-color: #949494;transform: rotate(25deg);margin-top: 0.2rem;}
.breadcrumb .breadcrumb-wrap p{font-size: 1.5rem;color: #949494;font-weight: 500;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.app-listing-panel .app-listing{display: flex;flex-direction: column;margin-top: 0.5rem;}
.app-listing-panel .app-listing > a{padding: 1rem 0;display: flex;align-items: center;column-gap: 1.25rem;position: relative;}
.app-listing-panel .app-listing > a > img{width: 7.188rem;flex: 0 0 7.188rem;max-width: 7.188rem;height: 7.188rem;border-radius: 1.875rem;object-fit: cover;object-position: center;}
.app-listing-panel .app-listing > a .detailWrap{display: flex;flex-direction: column;row-gap: 0.5rem;width: 18.75rem;overflow: hidden;}
.app-listing-panel .app-listing > a .detailWrap .appName{font-size: 1.875rem;color: #333333;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-listing-panel .app-listing > a .detailWrap > p{font-size: 1.5rem;color: #949494;}
.app-listing-panel .app-listing > a::after{content: "";position: absolute;right: 0;bottom: 0;width: calc(100% - 8.438rem);height: 1px;background-color: #0000001A;}
.app-listing-panel .app-listing > a:last-child{padding: 1rem 0 0;}
.app-listing-panel .app-listing > a:last-child::after{display: none;}

.pagination{margin-top: 1.875rem;display: flex;align-items: center;justify-content: center;column-gap: 1rem;}
.pagination a{width: fit-content;padding: 0 1.25rem;text-align: center;height: 3.125rem;border-radius: 1rem;line-height: 3rem;border: 1px solid #EEEEEE;font-size: 1.5rem;color: #333333;white-space: nowrap;cursor:pointer;}
.pagination a.active{background: linear-gradient(118.36deg, #A9FFE4 -22.43%, #41E0C0 100%); border: 1px solid transparent;box-shadow: 0px 3px 4px 0px #0EC9A347; font-weight: bold;color: #ffffff;}

.error-page{margin: 26rem 0;}
.error-page .container{display: flex;flex-direction: column;align-items: center;}
.error-page .container > img{width: 40.938rem;height: auto;object-fit: cover;object-position: center;margin-bottom: 1.5rem;}
.error-page .container > p{font-size: 2rem;font-weight: bold;color: #949494;margin-bottom: 1.125rem;}
.error-page .container > a.backHomeBtn{width: 11.438rem;height: 3.438rem;text-align: center;line-height: 3.313rem;background-color: #ffffff;border: 1px solid #949494;border-radius: 0.31rem;font-size: 1.625rem;color: #949494;}

.icon { display: inline-block; width: 1.875rem; height: 1.875rem; background: url("../images/icons.webp") no-repeat; background-size: 16.5rem 51rem; }
.home-icon .icon { background-position: -5.6rem -2rem; }
.game-icon .icon { background-position: -5.6rem -5.85rem; }
.soft-icon .icon { background-position: -5.6rem -9.75rem; }
.gl-icon .icon { background-position: -5.6rem -13.7rem; }
.top-icon .icon { background-position: -5.6rem -17.55rem; }
.zt-icon .icon { background-position: -5.6rem -21.45rem; }

.clock-icon{width: 1.5rem;height: 1.5rem;background-size: 16rem 43rem;background-position: -2rem -31.4rem;}