css 2차수정

@@ -276,7 +276,7 @@ select::-ms-expand {
 
 /*style the items (options), including the selected item:*/
 .select-items div,.select-selected {
-  color: #333; font-size:15px;
+  color: #333; font-size:20px;
   text-align: center;
   border: 1px solid transparent;
   border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
@@ -327,34 +327,43 @@ select::-ms-expand {
 #contact {
   background-color: grey;
   color: white;
-  background-image: url(../img/the-town-bg-02.jpg);
   background-position: center;
   background-repeat: no-repeat;
-  min-height: 1500px;
+  min-height: 750px;
   position: relative;
   padding-bottom: 50px;
   padding-top: 160px;
 }
 
-.question-field{
-  display: flex;
-	justify-content: center;
-  width:100%;
-  height:50px;	
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  gap: 50px 50px;
+  grid-template-areas:
+    "question-home question-home question-home input-home input-home"
+    "question-school question-school question-school input-school input-school"
+    "question-grade question-grade question-grade input-grade input-grade";
 }
-.question-text{
-  width:25%;
-  box-sizing: border-box;
-  float:left;
-  text-align:left;
-  padding-right:10px;
-	font-size:20px;
-}
-.question-input{
-  width:25%;
-  box-sizing:border-box;
-  float:right;
+
+.input-home { grid-area: input-home; }
+
+.question-grade { grid-area: question-grade; }
+
+.input-school { grid-area: input-school; }
+
+.question-home { grid-area: question-home; }
+
+.question-school { grid-area: question-school; }
+
+.input-grade { grid-area: input-grade; }
+
+.question-field{
+  font-size: 35px;
+  text-shadow: 2px 2px 2px #333;
 }
+
+
 #semester{
 	width: 200px;
 	padding: .2em .5em;
@@ -375,15 +384,6 @@ select::-ms-expand {
 input{
   border-radius:5px;
 }
-.button_calculate{
-  width:15%;
-  position:relative;
-  left:44%;
-	margin-top:40px;
-	border:none;
-  border-radius:5px;
-  color : -internal-light-dark(black, white);
-}
 
 #map-answer{
 	display:flex;
@@ -484,9 +484,22 @@ iframe{
 	right:10%;
 }
 
+/*result*/
+#result{
+  margin-top : 200px;
+  background-color: grey;
+  color: white;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 750px;
+  position: relative;
+  padding-bottom: 50px;
+  padding-top: 160px;
+}
+
 
 .tm-footer {
-  position: absolute;
+  position: relative;
   bottom: 35px;
   left: 0;
   right: 0;
@@ -528,7 +541,7 @@ p {
   }
 
   .tm-container-contact {
-    max-width: 1063px;
+    max-width: 900px;
   }
 }
 

@@ -66,7 +66,7 @@
     </div>
 
     <div class="tm-next tm-intro-next">
-      <a href="#introduction" class="text-center tm-down-arrow-link">
+      <a href="#contact" class="text-center tm-down-arrow-link">
         <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
       </a>
     </div>
@@ -77,24 +77,18 @@
   <!-- Contact -->
     <section id="contact" class="tm-section-pad-top tm-parallax-2">
     <div class="container tm-container-contact">
-        <div class="row">
-          <div class="container question-field">
-            <div class="question-text">어디에 사나요?</div>
-            <div class="question-input">
+      <div class="grid-container">
+        <div class="question-field question-home">어디에 사나요?</div>
+        <div class="input-field input-home">
           <label for="question-input-field"></label>
-              <input type ="text" id="start">
-            </div>
-          </div>
-          <div class="container question-field">
-            <div class="question-text">무슨 학교에 다니나요?</div>
-            <div class="question-input">
+          <input type ="text" id="start"></div>
+        <div class="question-field question-school">무슨 학교에 다니나요?</div>
+        <div class="input-school">
           <label for="question-input-field"></label>
           <input type ="text" id="end">
         </div>
-          </div>
-          <div class="container question-field">
-            <div class="question-text">몇 학년인가요?</div>
-            <div class="custom-select" style="width:208px; margin-right:42px">
+        <div class="question-field question-grade">몇학년인가요?</div>
+        <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
           <select>
             <option value="0">1학년 1학기</option>
             <option value="sem-1-1">1학년 1학기</option>
@@ -106,21 +100,20 @@
             <option value="sem-4-1">4학년 1학기</option>
             <option value="sem-4-2">4학년 2학기</option>
           </select>
+        </div></div>
       </div>
+        <a href="#result" class="text-center tm-down-arrow-link">
+          <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
+        </a>
       </div>
-          <div class="container button-field">
-            <button class="button_calculate" type="button" onclick="semester();return false;">계산하기
-            </button>
-          </div>
-        </div>
-<br>
+    </section>
       
-<div id="map" style="width:700px;height:700px;"></div>
-	<div class="answer-field">
-          한번 갈 때마다 ...<br>
-          <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
-          <span class="answer-highlight">n</span> 원 <br>
-        </div>
+
+    <section id="result">
+      <div id="map" style="width:700px;height:300px;"></div>
+      <div class="answer-field">한번 갈 때마다 ...<br>
+        <span class="answer-highlight">n</span> 시간 
+        <span class="answer-highlight">n</span> 분 <br>
       </div>
       <div class="row">
         <div id="list-answer">
@@ -144,7 +137,6 @@
           <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
         </div>
       </div>
-    </div>
       <footer class="text-center small tm-footer">
         <p class="mb-0">
           Copyright &copy; 2020 TongGilMut
@@ -155,6 +147,7 @@
     </section>
 
 
+
   <script src="js/jquery-1.9.1.min.js"></script>
   <script src="slick/slick.min.js"></script>
   <script src="magnific-popup/jquery.magnific-popup.min.js"></script>