*{box-sizing: border-box}
body{overflow: hidden}

.skewX{transform: skewX(-37deg)}
.reskewX{transform: skewX(37deg)}
em{display: block;transform: skewX(48deg)}

.sidebox{width: 450px;height: 100%;background: rgba(170,120,100,.8);position: fixed;left: -290px;top: 0;z-index: 10;color: #fff}
.logo{left: 10%;top: 5%;position: fixed}

.navbox{position: absolute;right: -8px;top: 10%;z-index: 10;}
.navmenu .level1{position: relative;cursor: pointer;}
.navmenu > .level1{display: block;padding: 16px 22px;margin: 8px}
.navmenu > .level1.on{background: #fff;color: #000}

.level2{position: absolute;left: -130px;top: 0;background: rgba(80, 43, 28, 0.8);color: #fff;
width: 130px;transition: all .3s linear;opacity: 0;z-index: -10;}
.level2 li{padding: 8px}
.level2 li:hover{background: rgba(197, 136, 112, 0.8);color: #000;}
.level1.on .level2{opacity: 1;left: 122px}

.newbox{position: fixed;right: -400px;bottom: 0;width: 400px;height: 100%;background: rgba(80, 43, 28, 0.8)}
.newbox:hover{animation: newbox 1s forwards }
.newbox:hover .inbox{animation: inbox 1s forwards }
.inbox ul li{position: absolute;z-index: 20;left: 200px;padding: 10px;opacity: .4;}
.inbox ul li img{width: 300px;height: 80px}
.inbox{position: absolute;width: 400px;height: 100%;background: rgba(170,120,100,.8);left: 80px;}
.inbox p{color: #fff;text-indent: 40px}
.inbox li{transform: translateX(100px);cursor: pointer;}
.inbox li:hover{opacity: 1;}
.newbox:hover li{transform: translateX(-150px);transition: all 1s}
.newbox:hover li:nth-child(1){bottom: 20px}
.newbox:hover li:nth-child(2){bottom: 140px;transition-delay: .2s}
.newbox:hover li:nth-child(3){bottom: 260px;transition-delay: .4s}

@keyframes newbox{
    0%{right: -400px;width: 400px;}
    100%{width: 600px;right: -400px;}
}
@keyframes inbox{
    0%{left: 80px;width: 400px;}
    100%{left: 40px;width: 100px;}
}
.btn{position: fixed;right: 50px;bottom: 50px;color: #fff;width: 130px;height: 64px;z-index: 10;font-size: 80px;}
.btn.on{right: -200px}
.btn i{position: absolute;right: 0;animation: arrow 1s linear infinite}
.btn i:nth-child(1){animation-delay: 0s}
.btn i:nth-child(2){animation-delay: .5s}
.btn i:nth-child(3){animation-delay: 1s}

@keyframes arrow{
    0%{opacity: 1;right: 0;transform: scale(1)}
    100%{opacity: 0;right: 100px;transform: scale(1.5)}
}



figure::before{content: '';;position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.5);}
.bgvideo{min-width: 101%}