.kyoto-animation-sort{height:100vh}.header{text-align:center;font-size:36px;font-weight:bolder;color:#deb887;padding:36px}.content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 1vw}.animation-list{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:360px;border:2px dashed wheat;overflow-y:scroll}.animation-list+.animation-list{margin-left:4vw}.animation-list::-webkit-scrollbar{display:none}.animation-list-transitionn{display:block;padding:10px;min-height:200px;height:80%}.animation-list-transitionn.empty{text-align:center;color:#deb887;opacity:.3;font-size:28px;font-weight:bolder}.animation-list-transitionn.empty:before{content:"\62D6\5230\8FD9\91CC";line-height:200px}.mobile .animation .handle{display:block}.mobile .animation{display:block;padding-right:50px}.animation{-webkit-box-sizing:border-box;box-sizing:border-box;padding:15px 30px;margin-bottom:5px;border:3px solid wheat;color:#deb887;font-size:20px;font-weight:bolder;cursor:-webkit-grab;position:relative}.animation .handle{display:none;width:50px;height:100%;font-size:23px;position:absolute;top:0;right:0;text-align:center}.animation .handle i{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.animation .badge{text-align:center;border:2px solid #000;-webkit-transform:rotate(-28deg);transform:rotate(-28deg);border-radius:50%;width:36px;height:36px;line-height:36px;font-size:28px;position:absolute;left:-10px;top:-10px}.animation .badge-1{border-color:gold;background:#fff7cc;color:gold}.animation .badge-2{border-color:silver;background:#fff;color:silver}.animation .badge-3{border-color:coral;background:#fff;color:coral}