body {overflow-x: hidden;margin: 0;scroll-behavior: smooth;font-size: 2.13vw;background: #ffffff; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #1A1A1A;}
html { scrollbar-width: none; -ms-overflow-style: none;scroll-behavior: smooth;font-size: 2.13vw;overflow-x: hidden;}

* { box-sizing: border-box; }

.container{width: 100%;margin: 0 auto;padding: 0 1.25rem;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{padding-top: 1.75rem;background-image: url(../images/headerBg.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .headerWrap{display: flex;align-items: center;padding: 0 2.25rem;}
header .headerWrap .logoWrap{width: 7.688;height: 2.813rem;}
header .headerWrap .logoWrap img{height: 100%;width: auto;object-fit: contain;object-position: center;}
header .headerWrap .searchIcon{margin-left: auto;width: 2rem;height: 2rem;background-image: url(../images/searchIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;margin-right: 2.75rem;}
header .headerWrap .menu-btn{width: 2.5rem;height: 2rem;background-image: url(../images/menuIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .headerWrap .close-btn{width: 2.5rem;height: 2rem;background-image: url(../images/closeIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
header .navWrap{margin-top: 1.5rem;border: 2px solid #ffffff;background-color: #ffffff80;border-radius: 1.5rem 1.5rem 0 0;padding: 0 3.75rem;display: flex;align-items: center;justify-content: space-between;height: 5.5rem;}
header .navWrap a{font-size: 1.75rem;color: #646E7A;position: relative;}
header .navWrap a.active{font-size: 2rem;color: #333333;font-weight: bold;}
header .navWrap a.active::after{content: "";position: absolute;top: -0.25rem;right: -0.625rem;width: 0.625rem;height: 0.625rem;background-color: #54C5FF;border-radius: 50%;}

header .menu-dropdown{position: fixed;top: 6rem;z-index: 99999;height: calc(100vh - 6rem);width: 100%;max-height: 0;overflow: visible;transition: max-height .3s ease;pointer-events: none;visibility: hidden;}
header .menu-dropdown .overlay{width: 100%;height: 100%;background-color: #00000080;position: absolute;z-index: -1;}
header .menu-dropdown .dropdown-wrap{width: 100%;max-height: calc(100vh - 6rem);background-color: #ffffff;padding: 1.875rem 1rem 1.25rem 1.25rem;box-sizing: border-box;display: flex;flex-direction: column;row-gap: 1.875rem;border-radius: 0 0 1.5rem 1.5rem;overflow-y: auto;-webkit-overflow-scrolling: touch;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list{display: flex;flex-direction: column;row-gap: 1.25rem;padding-bottom: 1.875rem;border-bottom: 1px solid #E5E5E5;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list:last-child{border-bottom: none;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list .dropdownTitle{padding-left: 2.813rem;font-size: 2rem;font-weight: 500;color: #060D1F;position: relative;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list .dropdownTitle::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 2.5rem;height: 2.5rem;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list.game .dropdownTitle::before {background-image: url(../images/gameDropdown.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list.app .dropdownTitle::before {background-image: url(../images/appDropdown.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .menu-dropdown .dropdown-wrap .dropdown-nav-list.topic .dropdownTitle::before {background-image: url(../images/topicDropdown.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
header .menu-dropdown .dropdown-wrap .dropdown-links-list{display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.5rem; row-gap: 1.5rem;}
header .menu-dropdown .dropdown-wrap .dropdown-links-list a{height: 4rem; background-color: #F4F6F8; border-radius: 1.875rem; text-align: center; font-size: 1.5rem; color: #4D4D4D; line-height: 4rem; overflow: hidden;}
header .menu-dropdown.open{max-height: calc(100vh - 6rem);pointer-events: all;visibility: visible;}

footer {margin-top: 3.125rem;}
footer .footerTopWrap{background-color: #333333;padding: 1rem 0 1.25rem;}
footer .footerTopWrap .container{display: flex;flex-direction: column;row-gap: 2.813rem;justify-content: center;}
footer .footerTopWrap .logoWrap{width: 14.75rem;height: 5.375rem;margin: 0 auto;}
footer .footerTopWrap .logoWrap img{height: 100%;width: auto;object-fit: contain;object-position: center;}
footer .footerTopWrap .footer-link-wrap{display: flex;align-items: flex-start;column-gap: 6.25rem;margin: 0 auto;}
footer .footerTopWrap .footer-link-wrap .footer-link-column{display: flex;flex-direction: column;row-gap: 0.625rem;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-title{font-size: 1.75rem;font-weight: bold;color: #9F9F9F;position: relative;padding-bottom: 0.125rem;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-title::after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background-color: #9F9F9F;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list{display: flex;flex-direction: column;row-gap: 1rem;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list a{position: relative;padding-left: 0.875rem;font-size: 1.5rem;color: #9F9F9F;line-height: 2rem;}
footer .footerTopWrap .footer-link-wrap .footer-link-column .link-list a::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 0.25rem;height: 0.25rem;border-radius: 50%;background-color: #9F9F9F;}
footer .footerbottomWrap{background-color: #3D3D3D;padding: 1.25rem 0;}
footer .footerbottomWrap .footer-copyright{display: flex;flex-direction: column;row-gap: 0.625rem;}
footer .footerbottomWrap .footer-copyright p{text-align: center;font-size: 1.5rem;color: #CCCCCC;}

.titleWrap{display: flex;align-items: center;column-gap: 0.625rem;position: relative;}
.titleWrap h2, .titleWrap p.hTitle{font-size: 2rem;font-weight: bold;color: #060D1F;}
.titleWrap .moreBtn{width: 0.875rem; height: 0.875rem; border-top: 2px solid #E5E5E5; border-right: 2px solid #E5E5E5; transform: rotate(45deg);margin-top: 0.25rem;margin-left: -0.315rem;}

.backToTop{width: 4rem;height: 4rem;position: fixed;right: 0.625rem;bottom: 10rem;display: none;z-index: 9999;background-color: #ffffff;border-radius: 50%;box-shadow: 0px 4px 4px 0px #00000040;align-items: center;justify-content: center;}
.backToTop img{width: 2rem;height: auto;object-fit: contain;object-position: center;}
.backToTop.show{display: flex;}

.breadcrumb {margin:2rem 0 0; display:flex; align-items:center; column-gap:1.25rem;}
.breadcrumb a {font-size:1.5rem; color:#999999; line-height:2rem; white-space:nowrap;padding-bottom: 0.25rem;}
.breadcrumb p.current {font-size:1.5rem; color:#140402; line-height:2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;font-weight: 500;position: relative;padding-bottom: 0.25rem;}
.breadcrumb p.current::after{content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 50%;height: 0.25rem;background-color: #54C5FF;border-radius: 0.25rem;}
.breadcrumb i {width: 1px;height: 1.25rem;background-color: #999999;transform: rotate(25deg);margin-bottom: 0.25rem;}

.pagination{margin-top: 2.25rem;display: flex;align-items: center;column-gap: 1rem;justify-content: center;}
.pagination a.page-number{width: fit-content;padding: 0 1rem;height: 3rem;border-radius: 0.625rem;text-align: center;line-height: 3rem;font-size: 1.5rem;color: #666666;font-weight: 400;}
.pagination a.active{background: #54C5FF;color: #FFFFFF;}
.pagination a.prev-page{width: 0.625rem;height: 0.625rem;border:1px solid #C8C7C8;border-top: none;border-right: none;transform: rotate(45deg);}
.pagination a.next-page{width: 0.625rem;height: 0.625rem;border:1px solid #C8C7C8;border-top: none;border-right: none;transform: rotate(-135deg);}
.pagination .navigate-page{display: flex;align-items: center;margin-left: 0.315rem;}
.pagination .navigate-page p{font-size: 1.5rem;color: #999999;}
.pagination .navigate-page input{width: 3.75rem;height: 3rem;border-radius: 0.625rem;border: 2px solid #EEEEEE;background-color: #ffffff;outline: none;font-size: 1.5rem;color: #999999;text-align: center;margin: 0 1rem;box-sizing: border-box;}
.pagination .navigate-page .totalPages{margin-left: 2.25rem;}
.pagination .navigate-page input[type="number"]::-webkit-inner-spin-button, .pagination .navigate-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pagination .navigate-page input[type="number"] { -moz-appearance: textfield; }

.error-wrap{display: flex;flex-direction: column;align-items: center;margin: 3.125rem 0;}
.error-wrap img{width: 31.25rem;height: auto;object-fit: cover;object-position: center;}
.error-wrap p{font-size: 1.5rem;color: #333333;text-align: center;margin-bottom: 1.25rem;}
.error-page .error-wrap > span{font-size: 1rem;color: #333333;text-align: center;margin-bottom: 1.25rem;}
.error-wrap .backHomeBtn{width: 11.25rem;height: 3.125rem;background-color: #54C5FF;border-radius: 1.5rem;text-align: center;line-height: 3.125rem;font-size: 1.5rem;color: #ffffff;}


@keyframes marquee{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-50%);
    }
}