html,body{display:flex;flex-direction:column;height:100%;margin:0;padding:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{display:flex;flex-direction:column;height:100%;margin:0;padding:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.layer1{position:relative;width:100vw;height:calc(100vh - 80px)}@media (max-width: 768px){.layer1{display:flex;flex-wrap:wrap}}.layer2{position:absolute;left:0;top:0;overflow:hidden;width:100vw;height:100vh}.layer2 .anibox{position:absolute;left:36%;top:36%;transform:translate(-50%, -50%) scale(0.8);width:800px;height:600px}.item{padding:20px 30px;position:relative;text-align:center;white-space:nowrap;color:#fff;cursor:pointer}.item:hover .bg{left:0;transition:left cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s}.bg,.txt{position:absolute;left:0;top:0}.txt{padding:20px 30px}.bg{width:100%;height:100%;left:-100%;background-color:#333}.area{position:absolute;width:300px;height:200px;display:flex;flex-wrap:wrap;align-content:flex-start}@media (max-width: 768px){.area{position:relative}}.area1{left:0;top:0}.area2{right:0;top:0;justify-content:flex-end}.area3{bottom:0;left:0}.area4{bottom:0;right:0;justify-content:flex-end}@media (max-width: 768px){.area2,.area4{justify-content:flex-start}}.bottombox{height:80px;line-height:80px;color:#ccc;z-index:900;font-size:14px;text-align:center;background-color:#333}.bottombox .beian{text-decoration:none;color:#ccc}.bottombox .beian:hover{color:#0683ff}