.spr { background: url(//game.gtimg.cn/images/td2/web202202/0926/m/spr.png) no-repeat; background-size: 10rem 12rem; }
.icons { background: url(//game.gtimg.cn/images/td2/web202202/0926/m/icons.png) no-repeat; background-size: 5.02rem 1.66rem; }

/* µ¼º½ */
.nav-top { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 0.97rem; align-items: center; justify-content: space-between; background-color: rgba(0,0,0,0.8); z-index: 1000; }
.logo { width: 1.58rem; height: 0.45rem; background: url(//game.gtimg.cn/images/td2/web202311/m/navlogo.png) no-repeat;background-size: 100% 100%;margin-left: 0.32rem; }
.nav-menu { position: relative; display: flex; align-items: center; width: 0.48rem; height: 0.38rem; margin-right: 0.32rem; }
.nav-menu::after,.nav-menu::before { content: ''; position: absolute; left: 50%; width: 0.48rem; height: 0.06rem; border-radius: 0.03rem; background-color: #fff; transform-origin: 50% 50%; transition: all 0.5s; }
.nav-menu::before { transform: translate(-50%,-0.16rem); }
.nav-menu::after { transform: translate(-50%,0.16rem); }
.icon-menu { position: relative; width: 0.48rem; height: 0.06rem; border-radius: 0.03rem; background-color: #fff; opacity: 1; transition: opacity 0.5s; }
.nav-menu.active .icon-menu{ opacity: 0; }
.nav-menu.active::before { transform: translate(-50%,0) rotate(45deg); }
.nav-menu.active::after { transform: translate(-50%,0) rotate(-45deg); }
.nav-list { position: absolute; top: 0.97rem; right: 0; width: 5.25rem; height: calc(100vh - 0.97rem); padding: 0.2rem 0.4rem; background-color: rgba(0,0,0,0.8); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; border-top: 0.02rem solid rgba(255, 255, 255, 0.1); opacity: 0; }
.nav-list.show { opacity: 1; transform: translateX(0); }
.nav-list-animate { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; }
.nav-list li { min-height: 0.8rem; border-bottom: 0.02rem solid rgba(255, 255, 255, 0.1); }
.nav-list li a { display: block; width: 100%; height: 100%; font-size: 0.35rem; line-height: 0.8rem; color: #fff; }
.login_box {position: absolute; top: 50%; transform: translateY(-50%); right: 1.17rem; }
#userinfo { display: inline-block; max-width: 1.45rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: top; }
#btn_logout { margin-left: 0.05rem; }
.header-content { position: absolute; top: 0.05rem; width: 100%; }
.login { font-size: 0.24rem; line-height: 0.26rem; color: #fff; text-align: center; white-space: nowrap; }
.login a { color: #fc680c; border-bottom: 0.02rem solid #fc680c; }

.nav-dl{}
.nav-dl dd{padding-left: 0.5rem;}
.nav-dl a{font-size: 0.2rem !important;color: #fff;text-align: left;line-height: 0.6rem !important;}


/* bot */
.platform { display: flex; justify-content: space-around; align-content: flex-start; flex-wrap: wrap; width: 6.86rem; height: 2.18rem; background: url(//game.gtimg.cn/images/td2/web202202/0926/m/platform-bg.png) no-repeat; background-size: 100% 100%; margin: 0.43rem auto 0; padding: 0 0.02rem; padding-top: 0.05rem; box-sizing: border-box; }
.platform-item { display: flex; align-items: center; justify-content: center; width: 3.34rem; height: 0.63rem; background-color: #1d1c1c; border: 0.02rem solid #404040; box-sizing: border-box; font-size: 0.25rem; color: #fff; margin-top: 0.05rem; }
.down span { line-height: 0.24rem; }
.down-icon { width: 0.25rem; height: 0.24rem; background-position: -0.41rem -0.06rem; }
.platform-item .icons { margin-right: 0.09rem; }
.qq span { line-height: 0.26rem; }
.qq-icon { width: 0.22rem; height: 0.26rem; background-position: -1.8rem -0.04rem; }
.weibo span { line-height: 0.28rem; }
.weibo-icon { width: 0.35rem; height: 0.28rem; background-position: -4rem -0.02rem; }
.kefu span { line-height: 0.26rem; }
.kefu-icon { width: 0.26rem; height: 0.26rem; background-position: -0.41rem -0.69rem; }
.bilibili span { line-height: 0.24rem; }
.bilibili-icon { width: 0.28rem; height: 0.24rem; background-position: -1.82rem -0.73rem; }
.shipin span { line-height: 0.23rem; }
.shipin-icon { width: 0.26rem; height: 0.23rem; background-position: -4.05rem -0.72rem; }
.platform-item.active { background-color: #ff7a02; color: #000; border: none; }
.down.active .down-icon { background-position: 0 -0.06rem; }
.weixin.active .weixin-icon { background-position:-1.8rem -1.39rem; }
.weibo.active .weibo-icon { background-position:-4.67rem -0.01rem; }
.qq.active .qq-icon { background-position:  -2.29rem -0.04rem; }
.kefu.active .kefu-icon { background-position:  0 -0.7rem; }
.bilibili.active .bilibili-icon { background-position:  -2.28rem -0.71rem; }
.shipin.active .shipin-icon { background-position:  -4.61rem -0.72rem; }
.weixin span { line-height: 0.26rem; }
.weixin-icon { width: 0.31rem; height: 0.26rem; background-position: -2.35rem -1.4rem; }
.black-box { position: relative; width: 1.84rem; height: 2.24rem; background-position: -7.59rem -0.28rem; margin: 0.32rem auto 0; }
.black-box-qrcode { position: absolute; top: 0.54rem; left: 0.15rem; width: 1.55rem; height: 1.55rem; }

.main-bottom { width: 100%;padding-top: 1px; margin-bottom: 0.26rem; }
.teaching-box { display: flex; justify-content: center; width: 100%; height: 0.65rem; margin-top: 0.4rem; }
.teaching-box-tab { width: 2.15rem; height: 0.65rem; background: url(https://game.gtimg.cn/images/td2/web202202/0926/m/teaching-tabbtn.png) no-repeat; background-size: 100% 100%; font-size: 0.22rem; line-height: 0.73rem; color: #ffffff; text-align: center; font-family: 'zzgfmh'; margin: 0 0.11rem; }
.teaching-box-tab.active { background: url(https://game.gtimg.cn/images/td2/web202202/0926/m/teaching-tabbtn-active.png) no-repeat; background-size: 100% 100%; }
.teaching-list { width: 6.88rem; margin: 0 auto; }
.teaching-list-con { margin-top: 0.4rem; }
.teaching-list-con .teaching-list-item:nth-child(1) { margin-top: 0; }
.teaching-list-item { position: relative; display: block; width: 6.88rem; height: 3.94rem; margin-top: 0.29rem; }
.teaching-img-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.teaching-img-box img { width: 100%; height: 100%; }
.teaching-video-btn { position: absolute; left: 50%; top: 1.15rem; transform: translateX(-50%); width: 1.45rem; height: 1.45rem; background: url(https://game.gtimg.cn/images/td2/web202202/0926/m/video-btn.png) no-repeat; background-size: 100% 100%; }
.teaching-list-text { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.67rem; background-color: rgba(217, 211, 201, 0.9); font-size: 0.31rem; color: #222526; line-height: 0.67rem; text-indent: 0.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qq { width: 6.74rem; margin-top: 0.08rem; }