/* 해쉬 클래스 */
.hash { overflow-y: scroll; width:100%; height:100%; z-index: 2000 }
.hash .bg {position:fixed; width:100%; height:100%; z-index: 101; background:#000; opacity: 0.7}

.hash .bg-left { position:fixed; top:0; left:-100%; transition: transform .3s ease; transform : translateX(0); }
.hash .bg-transform-left { transition: transform .3s ease; transform : translateX(100%); }
.hash .bg-right { position:fixed; top:0; left:0; transition: transform .3s ease; transform : translateX(100%); }
.hash .bg-transform-right { transition: transform .3s ease; transform : translateX(0); }

.hash-left { position:fixed; top:0; left:-100%; transition: transform .3s ease; transform : translateX(0); }
.transform-left { transition: transform .3s ease; transform : translateX(100%); }
.hash-right { position:fixed; top:0; left:100%; transition: transform .3s ease; transform : translateX(0);  z-index: 10000;}
.transform-right { transition: transform .3s ease; transform : translateX(-100%); }
.hash-top { position:fixed; top:0; left:0; transition: transform .3s ease; transform : translateY(-100%);  }
.transform-top { transition: transform .3s ease; transform : translateY(0); }
.hash-bottom { position:fixed; bottom:0; left:0; transition: transform .3s ease; transform : translateY(100%);  }
.transform-bottom { transition: transform .3s ease; transform : translateY(-100%); }

.hash-fade { position:fixed; top:0; left:100%; width:0; height:0; transition: opacity .3s ease-in-out; opacity:0;  }
.transform-fade { opacity:1; width:100%; height:100%; left:0; transition: opacity .3s ease; }