.bg-pic{width: 216px; height: 200px; position: absolute; bottom: 40px; right: 40px; z-index: 2;}
.cw1420{max-width: 1420px; width: 92%; margin: auto;}
.cw1215{max-width: 1215px; width: 92%; margin: auto;}

/* 鼠标点击事件 */
#app{margin-top: 120px; padding-top: 40px; height: calc(100vh - 120px); background-color: #141414;}
#app *{font-size: 18px; color: #fff;}
#app .top{z-index: 5;}

#app .mouse-pic{margin-right: 20px; width: 250px; height: 364px;}
#app .mouse-pic .key-active{display: none; z-index: 5; opacity: 0.7; border-radius: 23px;}
#app .mouse-pic .key1{width: 46px; height: 80px; background-color: rgb(255, 81, 0); top: 36px; left: 52px;}
#app .mouse-pic .key2{width: 36px; height: 80px; background-color: rgb(255, 0, 204); top: 42px; left: 113px; border-radius: 18px;}
#app .mouse-pic .key3{width: 46px; height: 80px; background-color: rgb(255, 0, 0); top: 36px; left: 165px;}
#app .mouse-pic .key4{width: 22px; height: 55px; background-color: rgb(69, 170, 25); top: 122px; left: 26px;}
#app .mouse-pic .key5{width: 24px; height: 60px; background-color: rgb(0, 168, 255); top: 180px; left: 30px; transform: rotate(-3deg);}

#app .mouse-status div{margin-right: 20px;}

#app .mouse-position{top: 0; right: 0; z-index: 0;}

#mouse-icon{position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; width: 100%; height: 100%;}
#mouse-icon .mouse{transform: translate(50vw, 60vh); width: max-content; height: max-content;}
#mouse-icon .i1{margin: 20px 0;  width: 36px; height: 64px;}
#mouse-icon .i2{width: 21px; height: 11px;}
#mouse-icon .jt1{transform: translateX(-2px) rotate(180deg);}



/* 键盘点击事件 */
@keyframes bgEdit {
    0% {background-color: #333;}
    50%{background-color: #fff;}
    100%{background-color: #333;}
}
@keyframes colorExit {
    0% {color: #fff !important;}
    50%{color: #333 !important;}
    100%{color: #fff !important;}
}
#keyboard{margin-top: 120px; padding: 50px 0 230px; background-color: #141414;}
#keyboard *{font-size: 14px; line-height: 1.2; color: #fff;}
#keyboard .txt div{font-size: 10px;}
#keyboard .select-none{width: 100%; height: 360px; background-color: #7b7c7e; border-radius: 20px; padding: 20px;}
#keyboard .row-wrap{ position: relative; display: flex; gap: 8px;}
#keyboard .col-wrap{position: absolute; top: var(--y); left: var(--x); height: var(--h); width: var(--w); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; --tw-bg-opacity: 1; background-color: #333333;  border-width: 1px; --tw-border-opacity: 1; border-color: rgb(71 71 71 / var(--tw-border-opacity, 1));}
#keyboard .col-wrap.active2 { background-color: #fff;}
#keyboard .col-wrap.active2 *{color: #333 !important;} 
/* #keyboard .col-wrap.active { background-color: #fff; animation: bgEdit 0.2s forwards;}
#keyboard .col-wrap.active *{color: #fff !important; animation: colorExit 0.2s forwards;} */
#keyboard .col-wrap .click-count{position: absolute; bottom: 5px; right: 5px; font-size: 10px;}

#keyboard .bot{margin-top: 20px; display: flex;}
#keyboard .bot .box{width: 49%; background-color: #333; border-radius: 10px;}
#keyboard .history-list{padding: 20px; height: 265px; overflow-y: auto; background: url(/images/keyboard-enter.png) no-repeat top 30px right 30px;}
#keyboard .history-list li{display: block; margin-bottom: 10px;}
#keyboard .history-list .time{color: #666;}
#keyboard .history-list .btn{display: inline-block; margin: 0 20px 0 10px; padding: 0 10px; height: 30px; line-height: 30px; border: 1px solid #7b7c7e; border-radius: 5px; font-size: #666;}
#keyboard .tip{padding: 10px 20px; font-size: 16px; color: #666; border-top: 1px solid rgba(255,255,255,0.2);}

#keyboard .right{padding: 20px;}
#keyboard .right .top{gap: 15px;}
#keyboard .right .tit{margin-right: 40px;}
#keyboard .right .btns{gap: 20px;}
#keyboard .right .btn{width: 80px; height: 30px; border: 1px solid #7b7c7e; border-radius: 5px; background-color: #1e1e1e; font-size: 16px; display: flex; justify-content: center; align-items: center;}
#keyboard .right .btn.cur{border-color: #ff5100; color: #ff5100;}
#keyboard .right .resetBtn{margin-top: 30px; width: 80px; height: 40px; background-color: #7b7c7e; border-radius: 5px;}