diff --git a/app/assets/style/all.scss b/app/assets/style/all.scss
index f3fd277..5cb4ae9 100644
--- a/app/assets/style/all.scss
+++ b/app/assets/style/all.scss
@@ -9,7 +9,6 @@
 
 @import './helpers/base';
 @import './helpers/helpers';  //rwd heights and widths
-@import './helpers/mixin';   //vh
 
 @import './utilities/sizing';
 @import './utilities/spacing';
diff --git a/app/assets/style/helpers/_helpers.scss b/app/assets/style/helpers/_helpers.scss
index f94ea79..749f40a 100644
--- a/app/assets/style/helpers/_helpers.scss
+++ b/app/assets/style/helpers/_helpers.scss
@@ -40,4 +40,13 @@
   @include media-breakpoint-up(md) {
     margin-bottom: 42px;
   }
+}
+
+/* vh */
+
+.vh-100-minus-header {
+  height: calc(100vh - 60px);
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - 90px);
+  }
 }
\ No newline at end of file
diff --git a/app/assets/style/helpers/_mixin.scss b/app/assets/style/helpers/_mixin.scss
deleted file mode 100644
index eea47a7..0000000
--- a/app/assets/style/helpers/_mixin.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* vh */
-
-.vh-100-minus-header {
-  height: calc(100vh - 60px);
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - 82px);
-  }
-}
-
-.vh-100-minus-header-navbar {
-  height: calc(100vh - 115px);
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - 135px);
-  }
-}
diff --git a/app/layout.ejs b/app/layout.ejs
index c1865a4..4a7ac55 100644
--- a/app/layout.ejs
+++ b/app/layout.ejs
@@ -498,12 +498,12 @@
       </div>
 
       <!-- tickets list -->
+      <!-- 使用flex grow 撐開上下空間 -->
       <ul
         class="
           scroll-bar
           flex-grow-1
           overflow-auto
-        
           pe-2 pe-md-5
         "
       >
diff --git a/app/order-info.html b/app/order-info.html
index bcda6b3..15d3eda 100644
--- a/app/order-info.html
+++ b/app/order-info.html
@@ -10,11 +10,11 @@
 <main>
   <!-- 修正版型不使用d-none 使用order -->
   <section>
-    <div class="container-lg">
-      <!--pc 第一行 -->
-      <div class="row">
+    <div class="container-md vh-100-minus-header">
+      <div class="d-flex flex-column h-100">
         <!-- timeline -->
-        <div class="col-md-7 col-lg-8 order-md-1">
+        <div class="row">
+        <div class="col-lg-8">
           <div class="row timeline-section">
             <div class="col">
               <div class="timeline-pointer">
@@ -38,461 +38,489 @@
             </div>
           </div>
         </div>
-        <!--  buyer info form 記得加上validation-->
-        <div class="col-md-5 col-lg-4 order-md-3">
-          <form class="mb-12">
-            <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
+      </div>
+        <!--pc 第一行 -->
+        <div class="row flex-lg-grow-1">
+          <!--  buyer info form 記得加上validation-->
+          <div class="col-lg-4 order-md-1 order-lg-2">
+            <form class="mb-12">
+              <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
 
-            <div class="mb-6">
-              <label for="buyerEmail" class="form-label">Email</label>
-              <input
-                type="email"
-                name="input email"
-                id="buyerEmail"
-                class="form-control text-dark py-2"
-                placeholder="example@gmail.com"
-              />
-            </div>
-            <div class="mb-6">
-              <label for="buyerName" class="form-label">姓名</label>
-              <input
-                type="text"
-                name="input name"
-                id="buyerName"
-                class="form-control text-dark py-2"
-                placeholder="請輸入您的姓名"
-              />
-            </div>
-            <div class="mb-6">
-              <label for="buyerPhoneNum" class="form-label">聯絡電話</label>
-              <input
-                type="tel"
-                name="input phone number"
-                id="buyerPhoneNum"
-                class="form-control text-dark py-2"
-                placeholder="請輸入電話"
-              />
-            </div>
-            <div class="mb-6">
-              <label for="couponCode" class="form-label">優惠碼</label>
-              <input
-                type="text"
-                name="input coupon"
-                id="couponCode"
-                class="form-control text-dark py-2 mb-1"
-                placeholder="TG87526"
-                aria-describedby="couponCheckBlock"
-              />
-              <div
-                id="couponCheckBlock"
-                class="form-text text-end text-primary"
-              >
-                優惠碼已生效
+              <div class="mb-6">
+                <label for="buyerEmail" class="form-label">Email</label>
+                <input
+                  type="email"
+                  name="input email"
+                  id="buyerEmail"
+                  class="form-control text-dark py-2"
+                  placeholder="example@gmail.com"
+                />
               </div>
-            </div>
-          </form>
-        </div>
-        <!-- 小計 mobile -->
-        <div class="col d-md-none">
-          <ul>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">小計</p>
-              <p class="fw-light mb-0">NT$1050</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">折扣</p>
-              <p class="fw-light mb-0">-NT$50</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="h6 fw-medium mb-0">總金額</p>
-              <p class="h6 fw-medium mb-0">NT$1000</p>
-            </li>
-          </ul>
-        </div>
-        <!-- exhibition info -->
-        <div class="col-md-7 col-lg-8 mb-12 mb-lg-0 order-md-2">
-          <ul>
-            <li class="card border-0 mb-6 card-close">
-              <div class="card-body d-flex justify-content-between p-0 mb-2">
-                <div class="d-flex">
-                  <div class="w-50 w-md-25 me-5">
-                    <img
-                      src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                      alt="exhibition img"
-                      class="card-img h-100"
-                    />
-                  </div>
-                  <div
-                    class="
-                      w-50 w-md-auto
-                      d-flex
-                      flex-column
-                      justify-content-center
-                      ms-4
-                      me-md-5
-                    "
-                  >
-                    <div class="d-flex justify-content-between">
-                      <h2 class="fs-7 fw-bold mb-0">2020 台味設計展</h2>
-                      <button
-                        type="button"
-                        class="d-md-none btn-close link-black text-reset"
-                        data-bs-dismiss="card-close"
-                        aria-label="Close"
-                      ></button>
+              <div class="mb-6">
+                <label for="buyerName" class="form-label">姓名</label>
+                <input
+                  type="text"
+                  name="input name"
+                  id="buyerName"
+                  class="form-control text-dark py-2"
+                  placeholder="請輸入您的姓名"
+                />
+              </div>
+              <div class="mb-6">
+                <label for="buyerPhoneNum" class="form-label">聯絡電話</label>
+                <input
+                  type="tel"
+                  name="input phone number"
+                  id="buyerPhoneNum"
+                  class="form-control text-dark py-2"
+                  placeholder="請輸入電話"
+                />
+              </div>
+              <div class="mb-6">
+                <label for="couponCode" class="form-label">優惠碼</label>
+                <input
+                  type="text"
+                  name="input coupon"
+                  id="couponCode"
+                  class="form-control text-dark py-2 mb-1"
+                  placeholder="TG87526"
+                  aria-describedby="couponCheckBlock"
+                />
+                <div
+                  id="couponCheckBlock"
+                  class="form-text text-end text-primary"
+                >
+                  優惠碼已生效
+                </div>
+              </div>
+            </form>
+          </div>
+          <!-- 小計 mobile -->
+          <div class="col order-md-2 mb-5 mb-lg-0 d-lg-none">
+            <ul>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">小計</p>
+                <p class="fw-light mb-0">NT$1050</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">折扣</p>
+                <p class="fw-light mb-0">-NT$50</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="h6 fw-medium mb-0">總金額</p>
+                <p class="h6 fw-medium mb-0">NT$1000</p>
+              </li>
+            </ul>
+          </div>
+          <!-- exhibition info -->
+          <div class="col-lg-8 order-md-3 order-lg-1 mb-lg-0 mb-12">
+            <ul>
+              <li class="card border-0 mb-6 card-close">
+                <div class="card-body d-flex justify-content-between p-0 mb-2">
+                  <div class="d-flex">
+                    <div class="w-50 w-md-25 me-5">
+                      <img
+                        src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                        alt="exhibition img"
+                        class="card-img h-100"
+                      />
                     </div>
-
-                    <p class="mb-0">01 JUN — 31 OCT</p>
-                    <!-- mobile -->
                     <div
-                      class="d-flex justify-content-between align-items-center"
+                      class="
+                        w-50 w-md-auto
+                        d-flex
+                        flex-column
+                        justify-content-center
+                        ms-4
+                        me-md-5
+                      "
                     >
-                      <div class="d-flex align-items-center">
-                        <p class="text-dark me-1 mb-0">全票</p>
-                        <a class="d-block d-md-none fw-bold align-middle"> 1</a>
+                      <div class="d-flex justify-content-between">
+                        <h2 class="fs-7 fw-bold mb-0">2020 台味設計展</h2>
+                        <button
+                          type="button"
+                          class="d-md-none btn-close link-black text-reset"
+                          data-bs-dismiss="card-close"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+
+                      <p class="mb-0">01 JUN — 31 OCT</p>
+                      <!-- mobile -->
+                      <div
+                        class="
+                          d-flex
+                          justify-content-between
+                          align-items-center
+                        "
+                      >
+                        <div class="d-flex align-items-center">
+                          <p class="text-dark me-1 mb-0">全票</p>
+                          <a class="d-block d-md-none fw-bold align-middle">
+                            1</a
+                          >
+                        </div>
+                        <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
                       </div>
-                      <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- pc pad  -->
+                    <div
+                      class="
+                        d-none d-md-flex
+                        flex-column
+                        justify-content-center
+                        ms-md-4
+                        me-md-5
+                      "
+                    >
+                      <p class="h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- -01+ -->
+                    <div
+                      class="
+                        d-md-flex d-none
+                        flex-column flex-md-row
+                        justify-content-center
+                        align-items-center
+                        w-25
+                      "
+                    >
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
+                        ><span class="material-icons-outlined">
+                          remove
+                        </span></a
+                      >
+                      <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                        <p class="h1 fw-bold mb-0">01</p>
+                      </a>
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
+                        ><span class="material-icons-outlined"> add </span></a
+                      >
                     </div>
                   </div>
-                  <!-- pc pad  -->
+                  <!-- close btn -->
                   <div
                     class="
                       d-none d-md-flex
                       flex-column
                       justify-content-center
-                      ms-md-4
-                      me-md-5
-                    "
-                  >
-                    <p class="h6 fw-bold mb-0">NT$350</p>
-                  </div>
-                  <!-- -01+ -->
-                  <div
-                    class="
-                      d-md-flex d-none
-                      flex-column flex-md-row
-                      justify-content-center
                       align-items-center
-                      w-25
+                      ms-md-4
                     "
                   >
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
-                      ><span class="material-icons-outlined"> remove </span></a
-                    >
-                    <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                      <p class="h1 fw-bold mb-0">01</p>
-                    </a>
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
-                      ><span class="material-icons-outlined"> add </span></a
-                    >
+                    <button
+                      type="button"
+                      class="btn-close link-black text-reset p-0"
+                      data-bs-dismiss="card-close"
+                      aria-label="Close"
+                    ></button>
                   </div>
                 </div>
-                <!-- close btn -->
-                <div
-                  class="
-                    d-none d-md-flex
-                    flex-column
-                    justify-content-center
-                    align-items-center
-                    ms-md-4
-                  "
-                >
-                  <button
-                    type="button"
-                    class="btn-close link-black text-reset p-0"
-                    data-bs-dismiss="card-close"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </li>
-            <li class="card border-0 mb-6 card-close">
-              <div class="card-body d-flex justify-content-between p-0 mb-2">
-                <div class="d-flex">
-                  <div class="w-50 w-md-25 me-5">
-                    <img
-                      src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
-                      alt="exhibition img"
-                      class="card-img h-100"
-                    />
-                  </div>
-                  <div
-                    class="
-                      w-50 w-md-auto
-                      d-flex
-                      flex-column
-                      justify-content-center
-                      ms-4
-                      me-md-5
-                    "
-                  >
-                    <div class="d-flex justify-content-between">
-                      <h2 class="fs-7 fw-bold mb-0">No.22 線上設計展</h2>
-                      <button
-                        type="button"
-                        class="d-md-none btn-close link-black text-reset"
-                        data-bs-dismiss="card-close"
-                        aria-label="Close"
-                      ></button>
+              </li>
+              <li class="card border-0 mb-6 card-close">
+                <div class="card-body d-flex justify-content-between p-0 mb-2">
+                  <div class="d-flex">
+                    <div class="w-50 w-md-25 me-5">
+                      <img
+                        src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
+                        alt="exhibition img"
+                        class="card-img h-100"
+                      />
                     </div>
-
-                    <p class="mb-0">01 JUN — 31 OCT</p>
-                    <!-- mobile -->
                     <div
-                      class="d-flex justify-content-between align-items-center"
+                      class="
+                        w-50 w-md-auto
+                        d-flex
+                        flex-column
+                        justify-content-center
+                        ms-4
+                        me-md-5
+                      "
                     >
-                      <div class="d-flex align-items-center">
-                        <p class="text-dark me-1 mb-0">全票</p>
-                        <a class="d-block d-md-none fw-bold align-middle"> 1</a>
+                      <div class="d-flex justify-content-between">
+                        <h2 class="fs-7 fw-bold mb-0">No.22 線上設計展</h2>
+                        <button
+                          type="button"
+                          class="d-md-none btn-close link-black text-reset"
+                          data-bs-dismiss="card-close"
+                          aria-label="Close"
+                        ></button>
                       </div>
-                      <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+
+                      <p class="mb-0">01 JUN — 31 OCT</p>
+                      <!-- mobile -->
+                      <div
+                        class="
+                          d-flex
+                          justify-content-between
+                          align-items-center
+                        "
+                      >
+                        <div class="d-flex align-items-center">
+                          <p class="text-dark me-1 mb-0">全票</p>
+                          <a class="d-block d-md-none fw-bold align-middle">
+                            1</a
+                          >
+                        </div>
+                        <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+                      </div>
+                    </div>
+                    <!-- pc pad  -->
+                    <div
+                      class="
+                        d-none d-md-flex
+                        flex-column
+                        justify-content-center
+                        ms-md-4
+                        me-md-5
+                      "
+                    >
+                      <p class="h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- -01+ -->
+                    <div
+                      class="
+                        d-md-flex d-none
+                        flex-column flex-md-row
+                        justify-content-center
+                        align-items-center
+                        w-25
+                      "
+                    >
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
+                        ><span class="material-icons-outlined">
+                          remove
+                        </span></a
+                      >
+                      <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                        <p class="h1 fw-bold mb-0">01</p>
+                      </a>
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
+                        ><span class="material-icons-outlined"> add </span></a
+                      >
                     </div>
                   </div>
-                  <!-- pc pad  -->
+                  <!-- close btn -->
                   <div
                     class="
                       d-none d-md-flex
                       flex-column
                       justify-content-center
-                      ms-md-4
-                      me-md-5
-                    "
-                  >
-                    <p class="h6 fw-bold mb-0">NT$350</p>
-                  </div>
-                  <!-- -01+ -->
-                  <div
-                    class="
-                      d-md-flex d-none
-                      flex-column flex-md-row
-                      justify-content-center
                       align-items-center
-                      w-25
+                      ms-md-4
                     "
                   >
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
-                      ><span class="material-icons-outlined"> remove </span></a
-                    >
-                    <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                      <p class="h1 fw-bold mb-0">01</p>
-                    </a>
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
-                      ><span class="material-icons-outlined"> add </span></a
-                    >
+                    <button
+                      type="button"
+                      class="btn-close link-black text-reset p-0"
+                      data-bs-dismiss="card-close"
+                      aria-label="Close"
+                    ></button>
                   </div>
                 </div>
-                <!-- close btn -->
-                <div
-                  class="
-                    d-none d-md-flex
-                    flex-column
-                    justify-content-center
-                    align-items-center
-                    ms-md-4
-                  "
-                >
-                  <button
-                    type="button"
-                    class="btn-close link-black text-reset p-0"
-                    data-bs-dismiss="card-close"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </li>
-            <li class="card border-0 mb-6 card-close">
-              <div class="card-body d-flex justify-content-between p-0 mb-2">
-                <div class="d-flex">
-                  <div class="w-50 w-md-25 me-5">
-                    <img
-                      src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                      alt="exhibition img"
-                      class="card-img h-100"
-                    />
-                  </div>
-                  <div
-                    class="
-                      w-50 w-md-auto
-                      d-flex
-                      flex-column
-                      justify-content-center
-                      ms-4
-                      me-md-5
-                    "
-                  >
-                    <div class="d-flex justify-content-between">
-                      <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
-                      <button
-                        type="button"
-                        class="d-md-none btn-close link-black text-reset"
-                        data-bs-dismiss="card-close"
-                        aria-label="Close"
-                      ></button>
+              </li>
+              <li class="card border-0 card-close">
+                <div class="card-body d-flex justify-content-between p-0 mb-2">
+                  <div class="d-flex">
+                    <div class="w-50 w-md-25 me-5">
+                      <img
+                        src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                        alt="exhibition img"
+                        class="card-img h-100"
+                      />
                     </div>
-
-                    <p class="mb-0">01 JUN — 31 OCT</p>
-                    <!-- mobile -->
                     <div
-                      class="d-flex justify-content-between align-items-center"
+                      class="
+                        w-50 w-md-auto
+                        d-flex
+                        flex-column
+                        justify-content-center
+                        ms-4
+                        me-md-5
+                      "
                     >
-                      <div class="d-flex align-items-center">
-                        <p class="text-dark me-1 mb-0">全票</p>
-                        <a class="d-block d-md-none fw-bold align-middle"> 1</a>
+                      <div class="d-flex justify-content-between">
+                        <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
+                        <button
+                          type="button"
+                          class="d-md-none btn-close link-black text-reset"
+                          data-bs-dismiss="card-close"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+
+                      <p class="mb-0">01 JUN — 31 OCT</p>
+                      <!-- mobile -->
+                      <div
+                        class="
+                          d-flex
+                          justify-content-between
+                          align-items-center
+                        "
+                      >
+                        <div class="d-flex align-items-center">
+                          <p class="text-dark me-1 mb-0">全票</p>
+                          <a class="d-block d-md-none fw-bold align-middle">
+                            1</a
+                          >
+                        </div>
+                        <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
                       </div>
-                      <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- pc pad  -->
+                    <div
+                      class="
+                        d-none d-md-flex
+                        flex-column
+                        justify-content-center
+                        ms-md-4
+                        me-md-5
+                      "
+                    >
+                      <p class="h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- -01+ -->
+                    <div
+                      class="
+                        d-md-flex d-none
+                        flex-column flex-md-row
+                        justify-content-center
+                        align-items-center
+                        w-25
+                      "
+                    >
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
+                        ><span class="material-icons-outlined">
+                          remove
+                        </span></a
+                      >
+                      <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                        <p class="h1 fw-bold mb-0">01</p>
+                      </a>
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
+                        ><span class="material-icons-outlined"> add </span></a
+                      >
                     </div>
                   </div>
-                  <!-- pc pad  -->
+                  <!-- close btn -->
                   <div
                     class="
                       d-none d-md-flex
                       flex-column
                       justify-content-center
-                      ms-md-4
-                      me-md-5
-                    "
-                  >
-                    <p class="h6 fw-bold mb-0">NT$350</p>
-                  </div>
-                  <!-- -01+ -->
-                  <div
-                    class="
-                      d-md-flex d-none
-                      flex-column flex-md-row
-                      justify-content-center
                       align-items-center
-                      w-25
+                      ms-md-4
                     "
                   >
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
-                      ><span class="material-icons-outlined"> remove </span></a
-                    >
-                    <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                      <p class="h1 fw-bold mb-0">01</p>
-                    </a>
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
-                      ><span class="material-icons-outlined"> add </span></a
-                    >
+                    <button
+                      type="button"
+                      class="btn-close link-black text-reset p-0"
+                      data-bs-dismiss="card-close"
+                      aria-label="Close"
+                    ></button>
                   </div>
                 </div>
-                <!-- close btn -->
-                <div
-                  class="
-                    d-none d-md-flex
-                    flex-column
-                    justify-content-center
-                    align-items-center
-                    ms-md-4
-                  "
-                >
-                  <button
-                    type="button"
-                    class="btn-close link-black text-reset p-0"
-                    data-bs-dismiss="card-close"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- pc 第二行 小計 pc pad -->
-      <div class="row justify-content-md-end">
-        <div class="d-none d-md-block col-md-5 col-lg-4">
-          <ul>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">小計</p>
-              <p class="fw-light mb-0">NT$1050</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">折扣</p>
-              <p class="fw-light mb-0">-NT$50</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="h6 fw-medium mb-0">總金額</p>
-              <p class="h6 fw-medium mb-0">NT$1000</p>
-            </li>
-          </ul>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <!-- pc 第三行 btn -->
-      <div class="row justify-content-md-between mb-12">
-        <div class="col-6 col-md-3 col-lg-2">
-          <a
-            href="order.html"
-            class="btn btn-outline-primary w-100 me-5 | hvr-shrink"
-            >返回</a
-          >
+        <!-- pc 第二行 小計 pc pad -->
+        <div class="row justify-content-lg-end">
+          <div class="d-none d-lg-block col-lg-4">
+            <ul>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">小計</p>
+                <p class="fw-light mb-0">NT$1050</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">折扣</p>
+                <p class="fw-light mb-0">-NT$50</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="h6 fw-medium mb-0">總金額</p>
+                <p class="h6 fw-medium mb-0">NT$1000</p>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="col-6 col-md-5 col-lg-4">
-          <a
-            href="payment-info.html"
-            class="btn btn-secondary w-100 | hvr-shrink"
-            >下一步
-          </a>
+        <!-- pc 第三行 btn -->
+        <div class="row justify-content-md-between mb-12">
+          <div class="col-6 col-lg-2">
+            <a
+              href="order.html"
+              class="btn btn-outline-primary w-100 me-5 | hvr-shrink"
+              >返回</a
+            >
+          </div>
+          <div class="col-6 col-lg-4">
+            <a
+              href="payment-info.html"
+              class="btn btn-secondary w-100 | hvr-shrink"
+              >下一步
+            </a>
+          </div>
         </div>
       </div>
     </div>
   </section>
-</main>
\ No newline at end of file
+</main>
diff --git a/app/payment-info.html b/app/payment-info.html
index 6ec3f41..8e20cd1 100644
--- a/app/payment-info.html
+++ b/app/payment-info.html
@@ -10,473 +10,502 @@
 <main>
   <!-- 修正d-none 為order 排列方式 mobile 為優先排列 -->
   <section>
-    <div class="container-lg">
-      <!--pc 第一行 -->
-      <div class="row">
+    <div class="container-md vh-100-minus-header">
+      <div class="d-flex flex-column h-100">
         <!-- timeline -->
-        <div class="col-md-7 col-lg-8 order-md-1">
-          <div class="row timeline-section">
-            <div class="col">
-              <div class="timeline-pointer">
-                <p class="fw-light pt-2 mb-0">確認訂單</p>
+        <div class="row">
+          <div class="col-lg-8">
+            <div class="row timeline-section">
+              <div class="col">
+                <div class="timeline-pointer">
+                  <p class="fw-light pt-2 mb-0">確認訂單</p>
+                </div>
               </div>
-            </div>
-            <div class="col">
-              <div class="timeline-pointer">
-                <p class="text-center fw-medium pt-2 mb-0">填寫訂購資訊</p>
+              <div class="col">
+                <div class="timeline-pointer">
+                  <p class="text-center fw-medium pt-2 mb-0">填寫訂購資訊</p>
+                </div>
               </div>
-            </div>
-            <div class="col">
-              <div class="timeline-pointer timeline-pointer-undone">
-                <p class="text-center fw-light pt-2 mb-0">填寫付款資訊</p>
+              <div class="col">
+                <div class="timeline-pointer timeline-pointer-undone">
+                  <p class="text-center fw-light pt-2 mb-0">填寫付款資訊</p>
+                </div>
               </div>
-            </div>
-            <div class="col">
-              <div class="timeline-pointer timeline-pointer-undone">
-                <p class="fw-light pt-2 mb-0">完成訂購</p>
+              <div class="col">
+                <div class="timeline-pointer timeline-pointer-undone">
+                  <p class="fw-light pt-2 mb-0">完成訂購</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <!--  payment info form 記得加上validation-->
-        <div class="col-md-5 col-lg-4 order-md-3">
-          <form class="mb-12">
-            <h3 class="h6 fw-medium mb-6">付款資訊</h3>
+        <!--pc 第一行 -->
+        <div class="row flex-lg-grow-1">
+          <!--  payment info form 記得加上validation-->
+          <div class="col-lg-4 order-md-1 order-lg-2">
+            <form class="mb-12">
+              <h3 class="h6 fw-medium mb-6">付款資訊</h3>
 
-            <div class="mb-6">
-              <label for="buyerCreditCard" class="form-label">信用卡帳號</label>
-              <input
-                type="text"
-                name="input number"
-                id="buyerCreditCard"
-                class="form-control text-dark py-2"
-                placeholder="Xxxx-xxxx-xxxx-xxxx"
-              />
-            </div>
-            <div class="mb-6">
-              <label for="validDate" class="form-label">有效日期</label>
-              <input
-                type="text"
-                name="input date"
-                id="validDate"
-                class="form-control text-dark py-2"
-                placeholder="(MM/YY)"
-              />
-            </div>
-            <div class="mb-6">
-              <label for="securityCode" class="form-label">安全碼</label>
-              <input
-                type="password"
-                name="input security code"
-                id="securityCode"
-                class="form-control text-dark py-2"
-                placeholder="***"
-              />
-            </div>
-          </form>
-        </div>
-        <!-- 小計 mobile -->
-        <div class="col d-md-none">
-          <ul>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">小計</p>
-              <p class="fw-light mb-0">NT$1050</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">折扣</p>
-              <p class="fw-light mb-0">-NT$50</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="h6 fw-medium mb-0">總金額</p>
-              <p class="h6 fw-medium mb-0">NT$1000</p>
-            </li>
-          </ul>
-        </div>
-        <!-- exhibition info -->
-        <div class="col-md-7 col-lg-8 mb-12 mb-lg-0 order-md-2">
-          <ul>
-            <li class="card border-0 mb-6 card-close">
-              <div class="card-body d-flex justify-content-between p-0 mb-2">
-                <div class="d-flex">
-                  <div class="w-50 w-md-25 me-5">
-                    <img
-                      src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                      alt="exhibition img"
-                      class="card-img h-100"
-                    />
-                  </div>
-                  <div
-                    class="
-                      w-50 w-md-auto
-                      d-flex
-                      flex-column
-                      justify-content-center
-                      ms-4
-                      me-md-5
-                    "
-                  >
-                    <div class="d-flex justify-content-between">
-                      <h2 class="fs-7 fw-bold mb-0">2020 台味設計展</h2>
-                      <button
-                        type="button"
-                        class="d-md-none btn-close link-black text-reset"
-                        data-bs-dismiss="card-close"
-                        aria-label="Close"
-                      ></button>
+              <div class="mb-6">
+                <label for="buyerCreditCard" class="form-label"
+                  >信用卡帳號</label
+                >
+                <input
+                  type="text"
+                  name="input number"
+                  id="buyerCreditCard"
+                  class="form-control text-dark py-2"
+                  placeholder="Xxxx-xxxx-xxxx-xxxx"
+                />
+              </div>
+              <div class="mb-6">
+                <label for="validDate" class="form-label">有效日期</label>
+                <input
+                  type="text"
+                  name="input date"
+                  id="validDate"
+                  class="form-control text-dark py-2"
+                  placeholder="(MM/YY)"
+                />
+              </div>
+              <div class="mb-6">
+                <label for="securityCode" class="form-label">安全碼</label>
+                <input
+                  type="password"
+                  name="input security code"
+                  id="securityCode"
+                  class="form-control text-dark py-2"
+                  placeholder="***"
+                />
+              </div>
+            </form>
+          </div>
+          <!-- 小計 mobile -->
+          <div class="col order-md-2 d-lg-none mb-5 mb-lg-0">
+            <ul>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">小計</p>
+                <p class="fw-light mb-0">NT$1050</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">折扣</p>
+                <p class="fw-light mb-0">-NT$50</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="h6 fw-medium mb-0">總金額</p>
+                <p class="h6 fw-medium mb-0">NT$1000</p>
+              </li>
+            </ul>
+          </div>
+          <!-- exhibition info -->
+          <div class="col-lg-8 order-md-3 order-lg-1 mb-lg-0 mb-12">
+            <ul>
+              <li class="card border-0 mb-6 card-close">
+                <div class="card-body d-flex justify-content-between p-0 mb-2">
+                  <div class="d-flex">
+                    <div class="w-50 w-md-25 me-5">
+                      <img
+                        src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                        alt="exhibition img"
+                        class="card-img h-100"
+                      />
                     </div>
-
-                    <p class="mb-0">01 JUN — 31 OCT</p>
-                    <!-- mobile -->
                     <div
-                      class="d-flex justify-content-between align-items-center"
+                      class="
+                        w-50 w-md-auto
+                        d-flex
+                        flex-column
+                        justify-content-center
+                        ms-4
+                        me-md-5
+                      "
                     >
-                      <div class="d-flex align-items-center">
-                        <p class="text-dark me-1 mb-0">全票</p>
-                        <a class="d-block d-md-none fw-bold align-middle"> 1</a>
+                      <div class="d-flex justify-content-between">
+                        <h2 class="fs-7 fw-bold mb-0">2020 台味設計展</h2>
+                        <button
+                          type="button"
+                          class="d-md-none btn-close link-black text-reset"
+                          data-bs-dismiss="card-close"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+
+                      <p class="mb-0">01 JUN — 31 OCT</p>
+                      <!-- mobile -->
+                      <div
+                        class="
+                          d-flex
+                          justify-content-between
+                          align-items-center
+                        "
+                      >
+                        <div class="d-flex align-items-center">
+                          <p class="text-dark me-1 mb-0">全票</p>
+                          <a class="d-block d-md-none fw-bold align-middle">
+                            1</a
+                          >
+                        </div>
+                        <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
                       </div>
-                      <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- pc pad  -->
+                    <div
+                      class="
+                        d-none d-md-flex
+                        flex-column
+                        justify-content-center
+                        ms-md-4
+                        me-md-5
+                      "
+                    >
+                      <p class="h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- -01+ -->
+                    <div
+                      class="
+                        d-md-flex d-none
+                        flex-column flex-md-row
+                        justify-content-center
+                        align-items-center
+                        w-25
+                      "
+                    >
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
+                        ><span class="material-icons-outlined">
+                          remove
+                        </span></a
+                      >
+                      <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                        <p class="h1 fw-bold mb-0">01</p>
+                      </a>
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
+                        ><span class="material-icons-outlined"> add </span></a
+                      >
                     </div>
                   </div>
-                  <!-- pc pad  -->
+                  <!-- close btn -->
                   <div
                     class="
                       d-none d-md-flex
                       flex-column
                       justify-content-center
-                      ms-md-4
-                      me-md-5
-                    "
-                  >
-                    <p class="h6 fw-bold mb-0">NT$350</p>
-                  </div>
-                  <!-- -01+ -->
-                  <div
-                    class="
-                      d-md-flex d-none
-                      flex-column flex-md-row
-                      justify-content-center
                       align-items-center
-                      w-25
+                      ms-md-4
                     "
                   >
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
-                      ><span class="material-icons-outlined"> remove </span></a
-                    >
-                    <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                      <p class="h1 fw-bold mb-0">01</p>
-                    </a>
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
-                      ><span class="material-icons-outlined"> add </span></a
-                    >
+                    <button
+                      type="button"
+                      class="btn-close link-black text-reset p-0"
+                      data-bs-dismiss="card-close"
+                      aria-label="Close"
+                    ></button>
                   </div>
                 </div>
-                <!-- close btn -->
-                <div
-                  class="
-                    d-none d-md-flex
-                    flex-column
-                    justify-content-center
-                    align-items-center
-                    ms-md-4
-                  "
-                >
-                  <button
-                    type="button"
-                    class="btn-close link-black text-reset p-0"
-                    data-bs-dismiss="card-close"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </li>
-            <li class="card border-0 mb-6 card-close">
-              <div class="card-body d-flex justify-content-between p-0 mb-2">
-                <div class="d-flex">
-                  <div class="w-50 w-md-25 me-5">
-                    <img
-                      src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
-                      alt="exhibition img"
-                      class="card-img h-100"
-                    />
-                  </div>
-                  <div
-                    class="
-                      w-50 w-md-auto
-                      d-flex
-                      flex-column
-                      justify-content-center
-                      ms-4
-                      me-md-5
-                    "
-                  >
-                    <div class="d-flex justify-content-between">
-                      <h2 class="fs-7 fw-bold mb-0">No.22 線上設計展</h2>
-                      <button
-                        type="button"
-                        class="d-md-none btn-close link-black text-reset"
-                        data-bs-dismiss="card-close"
-                        aria-label="Close"
-                      ></button>
+              </li>
+              <li class="card border-0 mb-6 card-close">
+                <div class="card-body d-flex justify-content-between p-0 mb-2">
+                  <div class="d-flex">
+                    <div class="w-50 w-md-25 me-5">
+                      <img
+                        src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
+                        alt="exhibition img"
+                        class="card-img h-100"
+                      />
                     </div>
-
-                    <p class="mb-0">01 JUN — 31 OCT</p>
-                    <!-- mobile -->
                     <div
-                      class="d-flex justify-content-between align-items-center"
+                      class="
+                        w-50 w-md-auto
+                        d-flex
+                        flex-column
+                        justify-content-center
+                        ms-4
+                        me-md-5
+                      "
                     >
-                      <div class="d-flex align-items-center">
-                        <p class="text-dark me-1 mb-0">全票</p>
-                        <a class="d-block d-md-none fw-bold align-middle"> 1</a>
+                      <div class="d-flex justify-content-between">
+                        <h2 class="fs-7 fw-bold mb-0">No.22 線上設計展</h2>
+                        <button
+                          type="button"
+                          class="d-md-none btn-close link-black text-reset"
+                          data-bs-dismiss="card-close"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+
+                      <p class="mb-0">01 JUN — 31 OCT</p>
+                      <!-- mobile -->
+                      <div
+                        class="
+                          d-flex
+                          justify-content-between
+                          align-items-center
+                        "
+                      >
+                        <div class="d-flex align-items-center">
+                          <p class="text-dark me-1 mb-0">全票</p>
+                          <a class="d-block d-md-none fw-bold align-middle">
+                            1</a
+                          >
+                        </div>
+                        <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
                       </div>
-                      <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- pc pad  -->
+                    <div
+                      class="
+                        d-none d-md-flex
+                        flex-column
+                        justify-content-center
+                        ms-md-4
+                        me-md-5
+                      "
+                    >
+                      <p class="h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- -01+ -->
+                    <div
+                      class="
+                        d-md-flex d-none
+                        flex-column flex-md-row
+                        justify-content-center
+                        align-items-center
+                        w-25
+                      "
+                    >
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
+                        ><span class="material-icons-outlined">
+                          remove
+                        </span></a
+                      >
+                      <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                        <p class="h1 fw-bold mb-0">01</p>
+                      </a>
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
+                        ><span class="material-icons-outlined"> add </span></a
+                      >
                     </div>
                   </div>
-                  <!-- pc pad  -->
+                  <!-- close btn -->
                   <div
                     class="
                       d-none d-md-flex
                       flex-column
                       justify-content-center
-                      ms-md-4
-                      me-md-5
-                    "
-                  >
-                    <p class="h6 fw-bold mb-0">NT$350</p>
-                  </div>
-                  <!-- -01+ -->
-                  <div
-                    class="
-                      d-md-flex d-none
-                      flex-column flex-md-row
-                      justify-content-center
                       align-items-center
-                      w-25
+                      ms-md-4
                     "
                   >
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
-                      ><span class="material-icons-outlined"> remove </span></a
-                    >
-                    <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                      <p class="h1 fw-bold mb-0">01</p>
-                    </a>
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
-                      ><span class="material-icons-outlined"> add </span></a
-                    >
+                    <button
+                      type="button"
+                      class="btn-close link-black text-reset p-0"
+                      data-bs-dismiss="card-close"
+                      aria-label="Close"
+                    ></button>
                   </div>
                 </div>
-                <!-- close btn -->
-                <div
-                  class="
-                    d-none d-md-flex
-                    flex-column
-                    justify-content-center
-                    align-items-center
-                    ms-md-4
-                  "
-                >
-                  <button
-                    type="button"
-                    class="btn-close link-black text-reset p-0"
-                    data-bs-dismiss="card-close"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </li>
-            <li class="card border-0 mb-6 card-close">
-              <div class="card-body d-flex justify-content-between p-0 mb-2">
-                <div class="d-flex">
-                  <div class="w-50 w-md-25 me-5">
-                    <img
-                      src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                      alt="exhibition img"
-                      class="card-img h-100"
-                    />
-                  </div>
-                  <div
-                    class="
-                      w-50 w-md-auto
-                      d-flex
-                      flex-column
-                      justify-content-center
-                      ms-4
-                      me-md-5
-                    "
-                  >
-                    <div class="d-flex justify-content-between">
-                      <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
-                      <button
-                        type="button"
-                        class="d-md-none btn-close link-black text-reset"
-                        data-bs-dismiss="card-close"
-                        aria-label="Close"
-                      ></button>
+              </li>
+              <li class="card border-0 mb-6 card-close">
+                <div class="card-body d-flex justify-content-between p-0 mb-2">
+                  <div class="d-flex">
+                    <div class="w-50 w-md-25 me-5">
+                      <img
+                        src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                        alt="exhibition img"
+                        class="card-img h-100"
+                      />
                     </div>
-
-                    <p class="mb-0">01 JUN — 31 OCT</p>
-                    <!-- mobile -->
                     <div
-                      class="d-flex justify-content-between align-items-center"
+                      class="
+                        w-50 w-md-auto
+                        d-flex
+                        flex-column
+                        justify-content-center
+                        ms-4
+                        me-md-5
+                      "
                     >
-                      <div class="d-flex align-items-center">
-                        <p class="text-dark me-1 mb-0">全票</p>
-                        <a class="d-block d-md-none fw-bold align-middle"> 1</a>
+                      <div class="d-flex justify-content-between">
+                        <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
+                        <button
+                          type="button"
+                          class="d-md-none btn-close link-black text-reset"
+                          data-bs-dismiss="card-close"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+
+                      <p class="mb-0">01 JUN — 31 OCT</p>
+                      <!-- mobile -->
+                      <div
+                        class="
+                          d-flex
+                          justify-content-between
+                          align-items-center
+                        "
+                      >
+                        <div class="d-flex align-items-center">
+                          <p class="text-dark me-1 mb-0">全票</p>
+                          <a class="d-block d-md-none fw-bold align-middle">
+                            1</a
+                          >
+                        </div>
+                        <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
                       </div>
-                      <p class="d-md-none h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- pc pad  -->
+                    <div
+                      class="
+                        d-none d-md-flex
+                        flex-column
+                        justify-content-center
+                        ms-md-4
+                        me-md-5
+                      "
+                    >
+                      <p class="h6 fw-bold mb-0">NT$350</p>
+                    </div>
+                    <!-- -01+ -->
+                    <div
+                      class="
+                        d-md-flex d-none
+                        flex-column flex-md-row
+                        justify-content-center
+                        align-items-center
+                        w-25
+                      "
+                    >
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
+                        ><span class="material-icons-outlined">
+                          remove
+                        </span></a
+                      >
+                      <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                        <p class="h1 fw-bold mb-0">01</p>
+                      </a>
+                      <a
+                        href="#"
+                        class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
+                        ><span class="material-icons-outlined"> add </span></a
+                      >
                     </div>
                   </div>
-                  <!-- pc pad  -->
+                  <!-- close btn -->
                   <div
                     class="
                       d-none d-md-flex
                       flex-column
                       justify-content-center
-                      ms-md-4
-                      me-md-5
-                    "
-                  >
-                    <p class="h6 fw-bold mb-0">NT$350</p>
-                  </div>
-                  <!-- -01+ -->
-                  <div
-                    class="
-                      d-md-flex d-none
-                      flex-column flex-md-row
-                      justify-content-center
                       align-items-center
-                      w-25
+                      ms-md-4
                     "
                   >
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 pe-md-1 | hvr-shrink"
-                      ><span class="material-icons-outlined"> remove </span></a
-                    >
-                    <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                      <p class="h1 fw-bold mb-0">01</p>
-                    </a>
-                    <a
-                      href="#"
-                      class="link-black mb-1 mb-md-0 p-0 ps-md-1 | hvr-grow"
-                      ><span class="material-icons-outlined"> add </span></a
-                    >
+                    <button
+                      type="button"
+                      class="btn-close link-black text-reset p-0"
+                      data-bs-dismiss="card-close"
+                      aria-label="Close"
+                    ></button>
                   </div>
                 </div>
-                <!-- close btn -->
-                <div
-                  class="
-                    d-none d-md-flex
-                    flex-column
-                    justify-content-center
-                    align-items-center
-                    ms-md-4
-                  "
-                >
-                  <button
-                    type="button"
-                    class="btn-close link-black text-reset p-0"
-                    data-bs-dismiss="card-close"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- pc 第二行 小計 pc pad -->
-      <div class="row justify-content-md-end">
-        <div class="d-none d-md-block col-md-5 col-lg-4">
-          <ul>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">小計</p>
-              <p class="fw-light mb-0">NT$1050</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="mb-0">折扣</p>
-              <p class="fw-light mb-0">-NT$50</p>
-            </li>
-            <li
-              class="
-                d-flex
-                justify-content-between
-                align-items-center
-                text-nowrap
-                mb-2
-              "
-            >
-              <p class="h6 fw-medium mb-0">總金額</p>
-              <p class="h6 fw-medium mb-0">NT$1000</p>
-            </li>
-          </ul>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <!-- pc 第三行 btn -->
-      <div class="row justify-content-md-between mb-12">
-        <div class="col-6 col-md-3 col-lg-2">
-          <a
-            href="order.html"
-            class="btn btn-outline-primary w-100 me-5 | hvr-shrink"
-            >返回</a
-          >
+        <!-- pc 第二行 小計 pc pad -->
+        <div class="row justify-content-md-end">
+          <div class="d-none d-md-block col-md-5 col-lg-4">
+            <ul>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">小計</p>
+                <p class="fw-light mb-0">NT$1050</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="mb-0">折扣</p>
+                <p class="fw-light mb-0">-NT$50</p>
+              </li>
+              <li
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  text-nowrap
+                  mb-2
+                "
+              >
+                <p class="h6 fw-medium mb-0">總金額</p>
+                <p class="h6 fw-medium mb-0">NT$1000</p>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="col-6 col-md-5 col-lg-4">
-          <a
-            href="payment-info.html"
-            class="btn btn-secondary w-100 | hvr-shrink"
-            >下一步
-          </a>
+        <!-- pc 第三行 btn -->
+        <div class="row justify-content-md-between mb-12">
+          <div class="col-6 col-md-3 col-lg-2">
+            <a
+              href="order-info.html"
+              class="btn btn-outline-primary w-100 me-5 | hvr-shrink"
+              >返回</a
+            >
+          </div>
+          <div class="col-6 col-md-5 col-lg-4">
+            <a
+              href="payment-done.html"
+              class="btn btn-secondary w-100 | hvr-shrink"
+              >下一步
+            </a>
+          </div>
         </div>
       </div>
-      ｀
     </div>
   </section>
 </main>