.slidepop .bg{ position: fixed; top:0; right: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000; display: none;}
.slidepop .inbox{ position: fixed; top:0; right: -100%; width:calc(100% - 20px); height:100%; background-color: rgba(255,255,255,1); border-radius: 20px 0 0 20px; z-index: 2100; overflow: hidden;}
.slidepop .inbox .top{ margin: 0 15px 0 15px; border-bottom: solid 1px #aaa; height: 50px; line-height: 50px; font-size: 18px; font-weight: 700; letter-spacing: -1px; color:#181818;}
.slidepop .inbox .top .close{ position: absolute; top:12px; right: 15px; width:40px; height: 26px; line-height: 26px; border-radius: 5px; font-size: 12px; color: #999; border: solid 1px #e1e1e1; font-weight: 500; text-align: center;}
.slidepop .inbox .cont{ position: absolute; top:51px; left: 0; width:100%; height: calc(100% - 51px); overflow-y: auto;}
.slidepop.on .bg{ display: block;}
.slidepop.on .inbox{ animation:slidepop1 0.5s ease-out forwards;}
@keyframes slidepop1 {
    0%{ right:-100%;}
    100%{ right:0;}
}
.slidepop .inbox{ animation:slidepop2 0.2s ease-in forwards;}
@keyframes slidepop2 {
    0%{ right:0;}
    100%{ right:-100%;}
}