.game-detail{ background: #F5F5F5;}
@media (max-width:600px){.game-detail{flex-wrap:wrap;}
.game-left{width:100%!important;}
}
.game-detail .game-left{width:100%;height:200px;text-align:center;position: relative;}
.game-detail .game-left .img-box{position: absolute;width: 100px;height: 100px;bottom: -40px;left: 20px;border-radius: 100px;border: 4px solid #fff;background: #fff;}
.game-detail .game-left .img-box img{border-radius: 100px;}
.titleimage{display:flex!important;align-items:center!important;justify-content:center;margin:30px 0;font-size:40px!important}
.titleicons{margin-right:10px;display:flex!important;align-items:center!important}
.content-title img{width:50px;height:50px}
.games-item_a .games-item_img{height:auto!important;border-radius:15px 15px 0 0}
.title-text{position:absolute;left:0;bottom:5px;display:flex;justify-content:center;width:100%}
.title-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.categories a{font-size:26px!important}
.categories{flex:1!important;display:flex;justify-content:center}
.top-nav-bar{position:fixed;top:0;left:0;width:100%;height:60px;background-image:linear-gradient(89deg,#54068f 0,#7a1bb4 100%);z-index:1000;padding:0 30px}
.top-nav-bar.scrolled{background-color:#202942;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.top-nav-bar .container{max-width:1200px;margin:0 auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:100%}
.top-nav-bar .left{display:flex;align-items:center;height:100%;width:200px;float:none!important;overflow:hidden}
.top-nav-bar .left a{display:block;line-height:1}
.top-nav-bar .logo-img{height:45px;display:block;width:auto}
.top-nav-bar .nav-center{flex:1;display:flex;justify-content:center;align-items:center;height:100%;float:none!important}
.top-nav-bar .navbar_nav{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%}
.top-nav-bar .navbar_nav li{float:none!important;display:inline-block;margin:0;position:relative}
.top-nav-bar .navbar_nav li.language-selector .dropdown-menu,.top-nav-bar .navbar_nav li.more-categories .dropdown-menu{display:none;position:absolute;top:100%;right:0;background-color:#202942;min-width:180px;box-shadow:0 4px 12px rgba(0,0,0,.3);border-radius:4px;padding:8px 0;z-index:1001;list-style:none}
.top-nav-bar .navbar_nav li.language-selector:hover .dropdown-menu,.top-nav-bar .navbar_nav li.more-categories:hover .dropdown-menu{display:block}
.top-nav-bar .navbar_nav li.language-selector .dropdown-menu li,.top-nav-bar .navbar_nav li.more-categories .dropdown-menu li{display:block;margin:0}
.top-nav-bar .navbar_nav li.language-selector .dropdown-menu li a,.top-nav-bar .navbar_nav li.more-categories .dropdown-menu li a{display:block;padding:10px 20px;color:#fff;text-decoration:none;transition:background-color .3s ease;font-size:14px;height:auto;line-height:1.5}
.top-nav-bar .navbar_nav li.language-selector .dropdown-menu li a:hover,.top-nav-bar .navbar_nav li.more-categories .dropdown-menu li a:hover{background-color:rgba(255,255,255,.1);color:#f97316}
.top-nav-bar .navbar_nav li.language-selector .dropdown-arrow,.top-nav-bar .navbar_nav li.more-categories .dropdown-arrow{font-size:10px;margin-left:5px;transition:transform .3s ease}
.top-nav-bar .navbar_nav li.language-selector:hover .dropdown-arrow,.top-nav-bar .navbar_nav li.more-categories:hover .dropdown-arrow{transform:rotate(180deg)}
.top-nav-bar .navbar_nav li a{color:#fff;font-size:14px;padding:0 12px;text-decoration:none;transition:color .3s ease;display:block;height:60px;line-height:60px;white-space:nowrap;text-align:center}
.max-wujiaox,.min-wujiaox{color:#fdd10c;display:inline-block;text-shadow:0 1px 2px #fff}
.min-wujiaox{font-size:14px}
.min-wujiaox{font-size:16px}
.top-nav-bar .left *{text-indent:-9999px;overflow:hidden}
.top-nav-bar .left img{text-indent:0}
.span-like{color:#fa009f}
.top-nav-bar .navbar_nav li a:hover{color:#fa009f}
.top-nav-bar.scrolled .navbar_nav li a{color:#fff}
.top-nav-bar.scrolled .navbar_nav li a:hover{color:#fa009f}
#navToggle{display:none}
main{margin-top:60px}
.content{width: 100%;position: absolute; bottom: 0px;left:0px;text-align: center;}
.play-imgs{width:100%;text-align:center}
.play-imgs img{width:50px}
.img-fluid{width:100%}
.score-icon{display:inline-block;width:16px;height:16px;background-image:url(../images/dianzan.svg);background-repeat:no-repeat;background-size:contain;background-position-y:2px}
.heart-fill{display:inline-block;width:16px;height:16px;background-image:url(../images/heart-fill.svg);background-repeat:no-repeat;background-size:contain;background-position-y:2px}
.textbox h2{padding:10px 0 10px 0;color:#ffbc42}
@media screen and (max-width:768px){.top-nav-bar{height:50px;padding:0!important}
.top-nav-bar .container{padding:0!important;max-width:100%!important;margin:0!important;width:100%!important}
.top-nav-bar .left{padding-left:15px!important;margin-left:0!important;width:auto!important}
.top-nav-bar .left a{padding:0!important;margin:0!important}
#navToggle{margin-right:15px!important;margin-left:auto!important;padding:0!important}
.top-nav-bar .logo-img{height:35px}
.top-nav-bar .nav-center{display:none}
.top-nav-bar .navbar_nav li.language-selector .dropdown-menu,.top-nav-bar .navbar_nav li.more-categories .dropdown-menu{display:none!important}
#navToggle{display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:30px;height:30px;cursor:pointer;position:relative;z-index:1002;padding:0;margin:0}
#navToggle span{position:relative;display:block;width:25px;height:2px;background:#fff;transition:.3s}
#navToggle span:after,#navToggle span:before{content:'';position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.3s}
#navToggle span:before{top:-8px}
#navToggle span:after{bottom:-8px}
main{margin-top:50px}
}
.blog{display:flex;flex-direction:column;height:100%}
/* .blog>div:first-child{position:relative;width:100%;overflow:hidden} */
.blog .blog-img{width:100%;height:100%;object-fit:cover}
.blog .content{display:flex;flex-direction:column;flex:1}
.blog .content .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:24px}
/* @media screen and (max-width:991px){.blog>div:first-child{height:180px}
.blog .content .title{min-height:48px;max-height:48px}
} */
#app>.container{max-width:1200px;margin:0 auto;padding:40px 30px;padding-top:100px}
.page-header{text-align:center;margin-bottom:50px;padding:30px 0}
.page-header h1{font-size:36px;font-weight:700;color:#ffbc42;margin-bottom:10px}
.page-header p{font-size:16px;color:#fff}
.content-wrapper{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);padding:50px 40px}
h1{font-size:28px;font-weight:600;color:#1f2129;margin-bottom:20px}
h4{font-size:20px;font-weight:600;color:#1f2129;margin-top:40px;margin-bottom:15px}
p{font-size:.8rem;color:#fff}
strong{color:#1f2129;font-weight:600}
.highlight-box{background:#fff5f0;border-left:4px solid #f97316;padding:20px;margin:25px 0;border-radius:4px}
.section-divider{height:1px;background:linear-gradient(to right,transparent,#e0e0e0,transparent);margin:40px 0}
@media screen and (max-width:768px){.top-nav-bar{height:50px}
.top-nav-bar .logo-img{height:35px}
.top-nav-bar .nav-center{display:none}
#navToggle{display:block;width:30px;height:30px;cursor:pointer}
#navToggle span{display:block;width:25px;height:2px;background:#fff;margin:5px 0;transition:.3s}
#app>.container{padding:20px 15px;padding-top:80px}
.page-header{margin-bottom:30px;padding:20px 0}
.page-header h1{font-size:28px}
.content-wrapper{padding:30px 20px;border-radius:8px}
h1{font-size:24px}
h4{font-size:18px;margin-top:10px}
p{font-size:14px}
.highlight-box{padding:15px}
}
@media screen and (max-width:480px){.page-header h1{font-size:24px}
.content-wrapper{padding:25px 15px}
h1{font-size:22px}
h4{font-size:16px}
p{font-size:13px}
}