* { font-family: microsoft yahei }
.fixed-menu-padding-bottom { padding-bottom: .8rem !important }
.sidenav { position: fixed; background: #fff; width: 80%; height: 100vh; z-index: 10012; top: 0; font-size: .18rem; overflow-y: scroll; transform: translateX(-100vw); transition: all .5s }
.sidenav .close-panel { padding: .22rem .22rem .4rem }
.sidenav .close-panel svg { float: right; padding: 15px }
.sidenav .top-panel { padding: .22rem }
.sidenav .top-panel h3 { font-weight: 700; color: #333; margin-bottom: .12rem }
.sidenav .panel-top-border { border-top: 1px solid #eee }
.sidenav .panel-btm-border { border-bottom: 1px solid #eee }
.sidenav .menu li > a { padding: .22rem; display: block; color: #333 }
.sidenav .hide { display: none }
.sidenav #userInfo .info-wrap { display: flex; align-items: center; color: #333 }
.sidenav #userInfo .info-wrap .avatar { width: .6rem; height: .6rem; background: url(../img/jingcai/quizzes_center.png) no-repeat -.65rem 0; background-size: 3.65rem auto; display: inline-block; margin-right: .2rem }
#userInfo .info-wrap .info-details-wrap { display: flex; align-items: center; padding-top: .25rem }
.sidenav #userInfo .info-wrap .first-detail:after { content: "∣"; padding: 0 .2rem; color: #999 }
.sidenav #userInfo .info-wrap .details { font-size: 12px; padding-right: .1rem }
.sidenav #userInfo .info-wrap .theme-color { font-size: 14px; font-weight: 700; color: #fb8e19 }
.sidenav #userInfo .info-wrap #username { font-size: 18px }
.sidenav .copyright { font-size: .13rem; color: #c4c4c4; text-align: center; position: relative; width: 100%; bottom: .1rem; padding-top: .25rem }
.sidenav-overlay { position: fixed; background: rgba(0,0,0,.5); width: 100%; height: 100vh; z-index: 10011; top: 0; display: none; transition: all .5s }
.sidenav-active { overflow: hidden; position: fixed }
.sidenav-active .sidenav { transform: translateX(0) }
.sidenav-active .sidenav-overlay { display: block; overflow: hidden }
#moreMenuWrap { position: fixed; width: 100%; height: 100%; z-index: 10009; transform: translateY(100%); top: 0; background: #eee; overflow-y: scroll; font-size: .16rem; transition: all .2s }
#moreMenuWrap .page-header { width: 100%; height: .5rem; background: #fff; font-size: .16rem; color: #000; border-bottom: 1px solid #eee; position: relative; z-index: 10002; display: flex; justify-content: center; align-items: center }
#moreMenuWrap .title { padding: .15rem .22rem; color: #080808; background: #eee; display: flex; align-items: center }
#moreMenuWrap .title svg { margin: .02rem .05rem 0 0 }
#moreMenuWrap .menu { background: #fff }
#moreMenuWrap .menu li > a { padding: .15rem .22rem; display: flex; justify-content: space-between; align-items: center; color: #212121; border-bottom: 1px solid #eee }
#moreMenuWrap .menu li > a .email { margin-right: 10px }
.more-menu-active #moreMenuWrap { transform: translateY(0) }
.more-menu-active .quickmenu .more svg { fill: #fb8e19 }
#btmQuickMenu, .quickmenu { z-index: 10010 }
.quickmenu { position: fixed; bottom: 0; display: flex; width: 100%; background: #fff }
.quickmenu a { width: 33vw; padding: .1rem 0; display: flex; justify-content: center }
.quickmenu a svg { fill: #999 }
.quickmenu .home svg { fill: none; stroke: #999 }
.homepage .quickmenu .home svg { fill: #fb8e19; stroke: none }
.quickmenu .more .svg { fill: #999 }
.caizong .quickmenu .caizong svg, .news .quickmenu .news svg, .quizzes .quickmenu .quizzes svg { fill: #fb8e19 }
.chevron:before { border-style: solid; border-width: .1em .1em 0 0; border-color: #666; content: ""; display: inline-block; height: .45em; left: .15em; position: relative; top: .32em; transform: rotate(-45deg); vertical-align: top; width: .45em }
.align-center { display: flex; align-items: center }
.chevron.right:before { left: 0; transform: rotate(45deg) }
.chevron.bottom:before { top: 0; transform: rotate(135deg) }
.chevron.left:before { left: .25em; transform: rotate(-135deg) }
.promo { width: 100%; height: 100%; position: fixed; z-index: 10009 !important; background: rgba(0,0,0,.5); transition: top .3s linear,height .3s linear; top: 0; overflow-y: scroll }
.promo .promoInfo { width: 310px; height: auto; background: #fff; margin: 15% auto; border-radius: 5px }
.promo .promoInfo i { width: .4rem; height: .4rem; margin-right: -5px; display: inline-block; background: url(../img/jingcai/quizzes_center.png) no-repeat -3.7rem 0; background-size: 4rem; float: right }
.promo .promoInfo dl { font-size: .15rem; width: 100%; height: auto; margin-top: .4rem; text-align: center; margin-bottom: .3rem }
.promo .promoInfo dl .header { width: 100%; font-size: 16px; font-weight: 700; color: #fd7a06; margin-bottom: 32px }
.promo .promoInfo dl .button { width: 100%; height: .4rem; padding-top: 10px; position: relative }
.promo .promoInfo dl .button button { width: 75px; height: 30px; line-height: 30px; text-align: center; display: inline-block; margin: 6px; background: #f99302; font-size: 11px; border: 1px solid #f99302; border-radius: 5px; color: #fff }
.promo .promoInfo dl dd { font-size: 12px }
.promo .promoInfo dl .QRCode { width: 140px; height: 142px; display: inline-block; background: #eaecf0; float: none; margin: 24px 0 }
.promo .promoInfo dl .hintInfo { width: 100%; font-size: 12px; height: 16px; line-height: 16px; color: #000 }
.promo .promoInfo dl .brand { width: 100%; height: .3rem; font-size: 10px; height: 16px; line-height: 16px; color: #969696 }
.promo .promoInfo dl .saveInfo { width: 200px; height: 35px; border-radius: 5px; border: 1px solid #f99122; background: #f99122; font-size: .14rem; color: #fff; margin: 24px 0 40px }
#copySnackbar { visibility: hidden; min-width: 150px; margin-left: -90px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 10010; left: 50%; bottom: 60px; font-size: .15rem }
#copySnackbar.showSnack { visibility: visible; -webkit-animation: fadein .5s,fadeout .5s 2.5s; animation: fadein .5s,fadeout .5s 2.5s }
#downloadSnackbar { visibility: hidden; min-width: 150px; margin-left: -90px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 60px; font-size: .15rem }
#downloadSnackbar.showSnack { visibility: visible; -webkit-animation: fadein .5s,fadeout .5s 2.5s; animation: fadein .5s,fadeout .5s 2.5s }