/*추가된 버튼 기본 감춤 */
@media (min-width: 800px) {
#ss-button {display:none;}
}
/*모바일 미디어 쿼리 */
@media (max-width: 800px) {
/*추가된 버튼의 디자인 */
#ss-button {
		display:block;
		text-align:center;
		    max-width: 45px;
    background-color: rgba(140, 188, 188, 0.8);
    padding: 5px;
    line-height: 20px;
	color:white;
		border-radius:5px 0 0 5px;
		position:fixed;
		top:150px;
		right:0;
		z-index:100021;
		border:1px solid #cacaca;}
/*추가된 버튼의 호버 디자인 */
#ss-button:hover {background-color: rgba(130, 178, 188, 0.8);}

/*사이드바 기본 감춤과 디자인 */
 #sidebar {
background-color: rgba(255, 255, 255, 0.95) !important;
  position: fixed;
top:0;
 right:0;
  height: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  z-index: 10;
  transform: translate(100%, 0px);
  transition: all 0.25s ease-in-out;
padding:5px !important;
overflow-y: auto;
z-index:100020;
max-width:300px;
}

/*사이드바 나타남*/
#sidebar.appear {
-webkit-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
  transition: all 0.25s ease-in-out;
z-index:100020;
}
}