섹션추가

@@ -56,7 +56,7 @@ body {
   text-align: center;
   text-align: center;
   width: 100%;
   width: 100%;
   position: absolute;
   position: absolute;
-  top: calc(35% + 160px);
+  top: calc(38% + 160px);
 }
 }
 
 
 #stats progress {
 #stats progress {
@@ -73,7 +73,7 @@ body {
   position: absolute;
   position: absolute;
   display: flex;
   display: flex;
   flex-flow: wrap;
   flex-flow: wrap;
-  top: calc(35% + 225px);
+  top: calc(38% + 225px);
   counter-reset: li;
   counter-reset: li;
   overflow: hidden;
   overflow: hidden;
 }
 }
@@ -191,9 +191,10 @@ body {
   margin: auto;
   margin: auto;
   text-align: center;
   text-align: center;
   position: absolute;
   position: absolute;
-  top: calc(35% - 100px);
+  top: calc(38% - 100px);
   left: calc(50% - 300px);
   left: calc(50% - 300px);
   transition: .25s, top 0s;
   transition: .25s, top 0s;
+  background-color: ivory;
 }
 }
 #accumulate_section {
 #accumulate_section {
   width: 600px;
   width: 600px;
@@ -206,6 +207,7 @@ body {
   left: calc(50% - 300px);
   left: calc(50% - 300px);
   transition: .25s, top 0s;
   transition: .25s, top 0s;
   font-size : 20px;
   font-size : 20px;
+  background-color: ivory;
 }
 }
 
 
 #recom_section {
 #recom_section {
@@ -218,6 +220,85 @@ body {
   top: calc(90% - 100px);
   top: calc(90% - 100px);
   left: calc(53% - 300px);
   left: calc(53% - 300px);
   transition: .25s, top 0s;
   transition: .25s, top 0s;
+  background-color: ivory;
+}
+
+#patten_section {
+  width: 950px;
+  max-width: calc(100% - 2em);
+  height: 650px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(70% - 100px);
+  left: calc(40% - 300px);
+  transition: .25s, top 0s;
+  background-color: ivory;
+}
+
+#patten_recom_section {
+  width: 600px;
+  max-width: calc(100% - 2em);
+  height: 160px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(70% - 100px);
+  left: calc(50% - 300px);
+  transition: .25s, top 0s;
+  font-size : 20px;
+  background-color: ivory;
+
+}
+
+#graph_section {
+  width: 600px;
+  max-width: calc(100% - 2em);
+  height: 200px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(90% - 100px);
+  left: calc(30% - 300px);
+  transition: .25s, top 0s;
+  font-size : 20px;
+}
+
+#graph_section2 {
+  width: 600px;
+  max-width: calc(100% - 2em);
+  height: 200px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(52% - 100px);
+  left: calc(120% - 10px);
+  transition: .25s, top 0s;
+  font-size : 20px;
+}
+#graph_section3 {
+  width: 600px;
+  max-width: calc(100% + 2em);
+  height: 200px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(120% + 100px);
+  left: calc(30% - 185px);
+  transition: .25s, top 0s;
+  font-size : 20px;
+}
+#graph_section4 {
+  width: 600px;
+  max-width: calc(100% - 2em);
+  height: 200px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(80% - 160px);
+  left: calc(120% - 10px);
+  transition: .25s, top 0s;
+  font-size : 20px;
 }
 }
 
 
 #winner h2 {
 #winner h2 {
@@ -299,8 +380,6 @@ body {
 }
 }
 
 
 
 
-
-
 /* ***** mobile ***** */
 /* ***** mobile ***** */
 @media handheld, only screen and (max-device-width:480px), only screen and (max-device-width:320px), screen and (max-width:600px) {
 @media handheld, only screen and (max-device-width:480px), only screen and (max-device-width:320px), screen and (max-width:600px) {
   body {
   body {
@@ -309,14 +388,14 @@ body {
 
 
   #winner {
   #winner {
     height: 150px;
     height: 150px;
-    top: calc(50% - 75px);
+    top: calc(40% - 75px);
     margin: 1em;
     margin: 1em;
     left: inherit;
     left: inherit;
   }
   }
   
   
   #accumulate_section {
   #accumulate_section {
     height: 150px;
     height: 150px;
-    top: calc(100% - 75px);
+    top: calc(75% - 75px);
     margin: 1em;
     margin: 1em;
     left: 0;
     left: 0;
 	font-size : 13px
 	font-size : 13px
@@ -324,10 +403,11 @@ body {
   }
   }
   
   
   #recom_section {
   #recom_section {
-    height: 300px;
-    top: calc(150% - 75px);
+    height: 550px;
+    top: calc(105% - 75px);
+	width : 190px;
     margin: 1em;
     margin: 1em;
-    left: 0;
+    left:calc(20% - 10px);
 	font-size : 6px
 	font-size : 6px
   }
   }
 
 
@@ -338,6 +418,70 @@ body {
     font-size: 6px;
     font-size: 6px;
   }
   }
   
   
+  #event_section {
+	height: 900px;
+    top: 100px;
+    margin: 1em;
+    right: 0;
+	font-size : 8px
+  }
+    #graph_section {
+	height: 100px;
+    top: calc(100% - 75px);
+	width : 150px;
+    margin: 1em;
+    left:calc(3% - 10px);
+	font-size : 6px;
+  }
+
+  
+    #graph_section2 {
+	height: 100px;
+    top: calc(90% - 95px);
+	width : 150px;
+    margin: 1em;
+    left:calc(140% - 0px);
+	font-size : 6px;
+  }
+    #graph_section3 {
+	height: 100px;
+    top: calc(220% - 15px);
+	width : 150px;
+    margin: 1em;
+    left:calc(5% - 10px);
+	font-size : 6px;
+  }
+
+  
+    #graph_section4 {
+	height: 100px;
+    top: calc(95% - 95px);
+	width : 150px;
+    margin: 1em;
+    left:calc(140% - 0px);
+	font-size : 6px;
+  }
+  
+  #patten_recom_section {
+	height: 105px;
+    top: calc(78% - 75px);
+	width : 250px;
+    margin: 1em;
+    left:calc(15% - 10px);
+	font-size : 10px;
+  }
+
+   #patten_section {
+	height: 360px;
+    top: calc(75% - 75px);
+	width : 290px;
+    margin: 1em;
+    left:calc(8% - 10px);
+	font-size : 6px;
+
+  }
 
 
 
 
 }
 }
+
+