diff --git a/jdmain.css b/jdmain.css
index 5766156..2449b70 100644
--- a/jdmain.css
+++ b/jdmain.css
@@ -117,37 +117,63 @@
     background: linear-gradient(to top, yellow, transparent);
 }
 
-/* Q&A */
-div.QandA{
-    margin-left: 20px;
-}
-div.QandA label:not(.label){
-    color: #000;
-    padding: 10px;
-    display: block;
-    margin-bottom:20px;
-    margin-right: 20px;
-    border-radius: 25px;
-    border: 2px solid  rgb(88, 88, 88);
-    cursor: pointer;
-}
-div.QandA label:hover:not(.label) {
-    color: rgb(255, 60, 0);
-}
-div.QandA input[type="checkbox"].que{
-    display: none;
-}
-input[type="checkbox"].que:checked + div{
-    display: none;
-}
-input[type="checkbox"].que:checked + div{
-    display: block;
-}
-div.ans{
-    display:none;
-    margin-bottom: 10px;
-}
 
+/* Q&A */
+@keyframes slidein {
+	0% {
+		opacity: 0;
+        transform: translateY(-5px);
+    }
+    100% {
+		opacity: 1;
+        transform: translateY(0px);
+    }
+}
+.qa_list{
+	position: relative;
+	margin: 20px 20px 30px 20px;
+	border: dashed black;
+	border-width: 0 0 2px 0;
+	color: black;
+	transition: .2s;
+}
+.qa_list:hover{
+    color: rgb(255, 60, 0);
+	}
+.qa_list  .plus{
+	position: relative;
+	display: inline-flex;
+	font-size: 28px;
+	padding: 5px;
+	transition: .3s;
+}
+.qa_list input[type="checkbox"]:checked ~ .plus{
+	transform: rotate(45deg);
+}
+.qa_list label{
+	display: block;
+	position: absolute;
+	top: 3px;
+	left: 30px;
+	padding: 5px;
+	font-size: 23px;
+    cursor: pointer;
+	transition: .3s;
+}
+.qa_list .ans{
+	position: relative;
+	display: none;
+    color: black;
+	margin: 5px;
+	padding: 10px 10px 20px 10px;
+}
+.qa_list input[type="checkbox"]:checked ~ div.ans{
+    display: block;
+	animation: slidein 0.5s;
+}
+.qa_list input{
+	display: none;
+}
 footer {		/* XXX: Change ME! */
     border-top: 1px dashed #888;
     text-align: right; font-size: 70%;