body {
 font-family: 'Microsoft YaHei', sans-serif;
 margin:0;
 padding:0;
}

.container {
 display: flex;
}

.toggle-button {
 background-color: #007BFF;
 color: white;
 border: none;
 border-radius: 8px;
 padding:10px 15px;
 font-size:16px;
 cursor: pointer;
 position: fixed;
 top:10px;
 right:10px;
 z-index:1000;
}

.sidebar {
 width:250px;
 height:100vh;
 background-color: #f8f9fa;
 position: fixed;
 top:0;
 left: -300px;
 transition: left 0.7s;
 overflow-y: auto;
 padding:20px;
 box-shadow:2px 05px rgba(0,0,0,0.2);
}

.sidebar.open {
 left:0;
}

.sidebar h2 {
 margin-top:0;
}

.sidebar ul {
 list-style-type: none;
 padding:0;
}

.sidebar ul li {
 margin:15px 0;
}

.sidebar ul li a {
 text-decoration: none;
 color: #007BFF;
}

.sidebar ul li a:hover {
 text-decoration: underline;
}

.content {
 margin-left:20px;
 padding:20px;
 flex:1;
}

     #dibu {
 position: fixed;
 bottom:75px; /* ¾àÀëµ×²¿20ÏñËØ */
 right:13px; /* ¾àÀëÓÒ±ß20ÏñËØ */
 padding:12px 20px;
 background-color: #007BFF;
 color: white;
 border: none;
 border-radius:5px;
 cursor: pointer;
 }