body {overflow-x: hidden;margin: 0;scroll-behavior: smooth;font-size: 2.13vw;background: #f8f8f8; 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;}
::-webkit-scrollbar { width: 0px; background: transparent; }

* { box-sizing: border-box; }

.container{width: 100%;margin: 0 auto;padding: 0 1.5rem;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;height: 30.5rem;width: 100%;background: linear-gradient( 0deg, rgb(248,248,248) 0%, rgb(255,85,62) 71%, rgb(255,85,62) 100%);z-index: -1;}
header .headerWrap{display: flex;flex-direction: column;}
header .headerWrap .headerTop{display: flex;align-items: center;justify-content: space-between;height: 7.563rem;}
header .headerWrap .headerTop .logoWrap{width: 15.5rem;flex: 0 0 15.5rem;max-width: 15.5rem;}
header .headerWrap .headerTop .logoWrap img{width: 100%;height: auto;object-fit: cover;object-position: center;}
header .headerWrap .headerTop .search-wrap{width: 20rem;flex: 0 0 20rem;max-width: 20rem;height: 3.375rem;background: #ffffff80;border-radius: 1.75rem;display: flex;align-items: center;padding: 0 1rem;column-gap: 0.5rem;}
header .headerWrap .headerTop .search-wrap > img{width: 1.625rem;height: auto;object-fit: cover;object-position: center;}
header .headerWrap .headerTop .search-wrap input{border: none;outline: none;font-size: 1.5rem;color: #000000;width: 100%;flex: 1;flex-shrink: 0;background-color: transparent!important;background: transparent!important;}
header .headerWrap .headerTop .search-wrap input::placeholder{color: #ffffff;}
header .headerWrap .menu-list{display: flex;align-items: center;padding: 0 2rem;justify-content: space-between;}
header .headerWrap .menu-list li a{font-size: 1.5rem;color: #ffffff;position: relative;padding-bottom: 0.625rem;}
header .headerWrap .menu-list li.active a{font-size: 1.875rem;font-weight: bold;}
header .headerWrap .menu-list li.active a::after{content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: calc(100% - 0.75rem);height: 0.25rem;border-radius: 0.125rem;background-color: #ffffff;}

footer{display: flex;flex-direction: column;}
footer .footerBottomWrap {background-color: #1B1B1B;padding: 2.25rem 0 2.5rem;position: relative;z-index: 1;}
footer .footerBottomWrap .container{display: flex;flex-direction: column;row-gap: 1.5rem;}
footer .footerBottomWrap .footerWrap{display: flex;flex-direction: column;row-gap: 1rem;}
footer .footerBottomWrap .footerWrap p{text-align: center;font-size: 1.125rem;color: #999999;}
footer .footerBottomWrap .container > img{height: auto;width: 23.125rem;object-fit: cover;object-position: center;margin: 0 auto;display: block;}

footer .footerTopWrap{background:#262D36;padding: 1rem 0 1.25rem;margin-top: 3.125rem;}
footer .footerTopWrap .container{display: flex;flex-direction: column;row-gap: 1.5rem;justify-content: center;}
footer .footerTopWrap .logoWrap{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: #ffffff;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:#ffffff;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;}

.breadcrumb{width: 100%;height: 4.5rem;display: flex;align-items: center;column-gap: 1.25rem;border-radius: 1rem;background-color: #FFFFFF;padding: 0 1.25rem;overflow: hidden;position: relative;z-index: 1;margin-top: 1.75rem;}
.breadcrumb a{font-size: 1.5rem;color: #999999;white-space: nowrap;line-height: 1;}
.breadcrumb i{width: 0.75rem;height: 0.75rem;border: 2px solid #CCCCCC;border-top: none;border-left: none;transform: rotate(-45deg);}
.breadcrumb p.current{flex: 1;flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 1.5rem;font-weight: 500;color: #333333;line-height: 1;}

.pagination{display: flex;align-items: center;column-gap: 0.875rem;justify-content: center;margin-top: 1.875rem;}
.pagination a{width: fit-content;height: 3.375rem;line-height: 3.375rem;padding: 0 1.1rem;background: #ffffff;border-radius: 0.375rem;text-align: center;font-size: 1.4rem;color: #949799;white-space: nowrap;}
.pagination span{font-size: 1.5rem;color: #949799;margin-top: -0.625rem;padding: 0 0.5rem;}
.pagination a.prev-page, .pagination a.next-page{font-family: cursive;font-weight: bold;}
.pagination a.active{font-weight: bold;color: #ffffff;background: linear-gradient(0deg, #ff763d 0%, #ff543d 100%);}
/* .pagination a, .pagination .dots {min-width: 2.5rem;height: 2.5rem;line-height: 2.5rem;padding: 0 0.65rem;background: var(--color-background-primary);border-radius: 0.375rem;text-align: center;font-size: 1rem;color: #949799;border: 0.5px solid #e5e5e5;white-space: nowrap;box-sizing: border-box;} */
.pagination .dots {background: transparent;border-color: transparent;padding: 0;min-width: 1.5rem;}

.error-page .error-wrap{display: flex;flex-direction: column;align-items: center;position: relative;z-index: 1;}
.error-page .error-wrap > img{width: 40rem;height: auto;object-fit: cover;object-position: center;margin-bottom: 1.5rem;margin-top: 2rem;}
.error-page .error-wrap > p{font-size: 2.5rem;color: #000000;text-align: center;font-weight: 500;margin-bottom: 1rem;}
.error-page .error-wrap > span.reminder{font-size: 2rem;color: #b1afb1;text-align: center;margin-bottom: 1rem;}
.error-page .error-wrap > span#time{font-size: 1.5rem;color: #333333;text-align: center;}
.error-page .error-wrap .buttonWrap{display: flex;align-items: center;justify-content: center;column-gap: 2rem;margin-top: 1.875rem;}
.error-page .error-wrap .buttonWrap a{width: 14rem;height: 4rem;border-radius: 100px;text-align: center;line-height: calc(4rem - 4px);box-sizing: border-box;background: transparent;font-size: 1.75rem;color: #000000;border: 2px solid #e8e8e8;}
.error-page .error-wrap .buttonWrap a.backHomeBtn{background: #fe5e39;border: 2px solid #fe5e39;color: #ffffff;}
.error-page .error-wrap .buttonWrap a.backHomeBtn span{position: relative;padding-left: 1.875rem;}
.error-page .error-wrap .buttonWrap a.backHomeBtn span::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 1.875rem;height: 1.875rem;background-image: url(../images/backHomeIcon.png);background-position: center;background-repeat: no-repeat;background-size: cover;filter: brightness(0) saturate(100%) invert(95%) sepia(95%) saturate(22%) hue-rotate(322deg) brightness(105%) contrast(105%);}
.error-page .bottom-menu{margin-top: 2.5rem;display: flex;align-items: center;justify-content: center;flex-direction: column;row-gap: 1.5rem;}
.error-page .bottom-menu > p {position: relative;padding: 0 2.5rem;text-align: center;font-size: 2.5rem;color: #000000;width: fit-content;margin: 0 auto;}
.error-page .bottom-menu > p::before{content: "";position: absolute;top: 52%;left: 0;transform: translateY(-50%);width: 1.875rem;height: 1.875rem;background-image: url(../images/titleSideIcon.png);background-position: center;background-repeat: no-repeat;background-size: cover;}
.error-page .bottom-menu > p::after{content: "";position: absolute;top: 48%;right: 0;transform: translateY(-50%) scaleY(-1) scaleX(-1);width: 1.875rem;height: 1.875rem;background-image: url(../images/titleSideIcon.png);background-position: center;background-repeat: no-repeat;background-size: cover;}
.error-page .bottom-menu .bottom-menu-list{display: flex;align-items: center;column-gap: 2rem;flex-wrap: wrap;row-gap: 1rem;justify-content: center;}
.error-page .bottom-menu .bottom-menu-list a {width: 14rem; height: 4rem; border-radius: 8px; text-align: center; line-height: calc(4rem - 4px); box-sizing: border-box; background: transparent; font-size: 1.75rem; color: #000000; border: 2px solid #e8e8e8;}
.error-page .bottom-menu .bottom-menu-list a span{position: relative;padding-left: 2.5rem;}
.error-page .bottom-menu .bottom-menu-list a span::before{content: "";position: absolute;top: 47%;transform: translateY(-50%);width: 1.875rem;height: 1.875rem;background-position: center;background-repeat: no-repeat;background-size: cover;left: 0;}
.error-page .bottom-menu .bottom-menu-list a.gameNav span::before{background-image: url(../images/home/joystickIcon.webp);}
.error-page .bottom-menu .bottom-menu-list a.appNav span::before{background-image: url(../images/home/gridIcon.webp);}
.error-page .bottom-menu .bottom-menu-list a.topicNav span::before{background-image: url(../images/home/topicIcon.webp);}
.error-page .bottom-menu .bottom-menu-list a.newsNav span::before{background-image: url(../images/home/newsIcon.webp);}

.backToTop{width: 4rem;height: 4rem;position: fixed;right: 0.625rem;bottom: 10rem;display: none;z-index: 9999;background-color: #ffffffde;border-radius: 50%;box-shadow: 0px 4px 4px 0px #00000040;align-items: center;justify-content: center;}
.backToTop::before {content:"";position:absolute;width: 1rem; height: 1rem; border-top: 3px solid #FF5A3D; border-right: 3px solid #FF5A3D; transform: rotate(-45deg) translate(-50%, -50%);top: 41%;left: 57%;}
.backToTop.show{display: flex;}