2 年前 · 10acbd4f6e
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 
				 <!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				+<html lang="en" style="font-size: 50px;">
			
 
				   <head>
			
 
				     <meta charset="UTF-8" />
			
 
				     <link rel="icon" href="/favicon.ico" />
			
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,7 +2,7 @@ module.exports = {
 
				   plugins: {
			
 
				     'postcss-pxtorem': {
			
 
				       rootValue(input) {
			
 
				-        return /[\\/]node_modules[\\/]vant/.test(input.file) ? 37.5 : 75
			
 
				+        return /[\\/]node_modules[\\/]vant/.test(input.file) ? 50 : 100
			
 
				       },
			
 
				       propList: ['*', '!filter'],
			
 
				       minPixelValue: 2,
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,10 @@
 
				     :show-nav-icons="$route.path !== '/password'"
			
 
				     :fixed="true"
			
 
				   />
			
 
				-  <div class="main-container">
			
 
				+  <div
			
 
				+    class="main-container"
			
 
				+    :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
			
 
				+  >
			
 
				     <router-view :key="$route.fullPath" class="main-wrapper" />
			
 
				   </div>
			
 
				 
			
@@ -56,6 +59,10 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
 
				 
			
 
				   @include media-breakpoint-up(lg) {
			
 
				     margin: auto;
			
 
				+    width: 768px * 2;
			
 
				+  }
			
 
				+  @include media-breakpoint-up(xl) {
			
 
				+    margin: auto;
			
 
				     width: 1998px;
			
 
				   }
			
 
				 }
			
--- a/src/components/nav-bar/index.vue
+++ b/src/components/nav-bar/index.vue
@@ -49,7 +49,7 @@
 
				             <div v-else class="p3">
			
 
				               <div class="txt">
			
 
				                 $10 off for additional services |
			
 
				-                <strong class="ptc-text">Buy now ></strong>
			
 
				+                <strong class="primary">Buy now ></strong>
			
 
				               </div>
			
 
				               <div class="swiper">
			
 
				                 <div class="swiper-item">
			
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 
				 import { createApp } from 'vue'
			
 
				 import App from './App.vue'
			
 
				 import router from './router'
			
 
				-import './utils/rem'
			
 
				+// import './utils/rem'
			
 
				 import './style'
			
 
				 
			
 
				 import NavBar from './components/nav-bar/index.vue'
			
--- a/src/pages/account/index.vue
+++ b/src/pages/account/index.vue
@@ -1,62 +1,66 @@
 
				 <template>
			
 
				   <div v-if="state === 0" class="p-account">
			
 
				-    <h3 class="ptc-title">Account Information</h3>
			
 
				-    <div class="ptc-block">
			
 
				-      <div class="ptc-inner">
			
 
				-        <p class="ptc-label">QR code</p>
			
 
				-        <img class="qrcode" />
			
 
				-      </div>
			
 
				-    </div>
			
 
				-    <div class="ptc-block">
			
 
				-      <div class="ptc-inner">
			
 
				-        <div class="ptc-cell">
			
 
				-          <p class="ptc-label">Email</p>
			
 
				-          <p class="ptc-value">Rebecca123@gmail.com</p>
			
 
				+    <div class="ptc-wrapper">
			
 
				+      <h3 class="ptc-title">Account Information</h3>
			
 
				+      <div class="ptc-block">
			
 
				+        <div class="ptc-inner">
			
 
				+          <p class="ptc-label">QR code</p>
			
 
				+          <img class="qrcode" />
			
 
				         </div>
			
 
				-        <div class="ptc-cell">
			
 
				-          <p class="ptc-label">Password</p>
			
 
				-          <p class="ptc-value">
			
 
				-            <span>********</span>
			
 
				-            <span class="ptc-text ml354-md" @click="state = 1">Edit ></span>
			
 
				-          </p>
			
 
				+      </div>
			
 
				+      <div class="ptc-block">
			
 
				+        <div class="ptc-inner">
			
 
				+          <div class="ptc-cell">
			
 
				+            <p class="ptc-label">Email</p>
			
 
				+            <p class="ptc-value">Rebecca123@gmail.com</p>
			
 
				+          </div>
			
 
				+          <div class="ptc-cell">
			
 
				+            <p class="ptc-label">Password</p>
			
 
				+            <p class="ptc-value">
			
 
				+              <span>********</span>
			
 
				+              <span class="primary ml354" @click="state = 1">Edit ></span>
			
 
				+            </p>
			
 
				+          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				-    </div>
			
 
				-    <div class="ptc-block">
			
 
				-      <div class="ptc-inner">
			
 
				-        <div class="ptc-cell">
			
 
				-          <p class="ptc-label">Account</p>
			
 
				-          <p class="ptc-value flex-ac">
			
 
				-            Rebecca123@gmail.com<i
			
 
				-              class="account-icon"
			
 
				-              :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
			
 
				-            ></i>
			
 
				-          </p>
			
 
				+      <div class="ptc-block">
			
 
				+        <div class="ptc-inner">
			
 
				+          <div class="ptc-cell">
			
 
				+            <p class="ptc-label">Account</p>
			
 
				+            <p class="ptc-value flex-ac">
			
 
				+              Rebecca123@gmail.com<i
			
 
				+                class="account-icon"
			
 
				+                :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
			
 
				+              ></i>
			
 
				+            </p>
			
 
				+          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				-    <h3 class="ptc-title pr">
			
 
				-      Login Detail<button class="stroke-btn" @click="state = 2">Edit</button>
			
 
				-    </h3>
			
 
				-    <div class="ptc-block">
			
 
				-      <div class="ptc-inner">
			
 
				-        <div class="ptc-cell">
			
 
				-          <p class="ptc-label">Name</p>
			
 
				-          <p class="ptc-value">Rebecca123@gmail.com</p>
			
 
				-        </div>
			
 
				-        <div class="ptc-cell">
			
 
				-          <p class="ptc-label">Pone number</p>
			
 
				-          <p class="ptc-value">Rebecca123@gmail.com</p>
			
 
				-        </div>
			
 
				-        <div class="ptc-cell">
			
 
				-          <p class="ptc-label">Address</p>
			
 
				-          <p class="ptc-value">449WATERDALEROAD,HEIDELBERGWEST, VIC,3081</p>
			
 
				+    <div class="ptc-wrapper">
			
 
				+      <h3 class="ptc-title pr">
			
 
				+        Login Detail<button class="stroke-btn" @click="state = 2">Edit</button>
			
 
				+      </h3>
			
 
				+      <div class="ptc-block">
			
 
				+        <div class="ptc-inner">
			
 
				+          <div class="ptc-cell">
			
 
				+            <p class="ptc-label">Name</p>
			
 
				+            <p class="ptc-value">Rebecca123@gmail.com</p>
			
 
				+          </div>
			
 
				+          <div class="ptc-cell">
			
 
				+            <p class="ptc-label">Pone number</p>
			
 
				+            <p class="ptc-value">Rebecca123@gmail.com</p>
			
 
				+          </div>
			
 
				+          <div class="ptc-cell">
			
 
				+            <p class="ptc-label">Address</p>
			
 
				+            <p class="ptc-value">449WATERDALEROAD,HEIDELBERGWEST, VIC,3081</p>
			
 
				+          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
 
				 
			
 
				-  <div v-else-if="state === 1" class="p-account">
			
 
				+  <div v-else-if="state === 1" class="p-account ptc-wrapper">
			
 
				     <h3 class="ptc-title">Change Password</h3>
			
 
				     <div class="ptc-block">
			
 
				       <div class="ptc-inner">
			
@@ -82,7 +86,7 @@
 
				     </div>
			
 
				   </div>
			
 
				 
			
 
				-  <div v-else class="p-account">
			
 
				+  <div v-else class="p-account ptc-wrapper">
			
 
				     <h3 class="ptc-title">Modify My profile</h3>
			
 
				     <div class="ptc-block">
			
 
				       <div class="ptc-inner">
			
@@ -135,7 +139,6 @@ watch(state, () => window.scrollTo(0, 0))
 
				 
			
 
				 <style lang="scss">
			
 
				 .p-account {
			
 
				-  background: #f7f7f7;
			
 
				   .qrcode {
			
 
				     width: 212px;
			
 
				     height: 212px;
			
@@ -155,7 +158,7 @@ watch(state, () => window.scrollTo(0, 0))
 
				     color: $primary-color;
			
 
				   }
			
 
				 
			
 
				-  .ptc-text {
			
 
				+  .primary {
			
 
				     margin-left: 48px;
			
 
				   }
			
 
				 
			
@@ -178,15 +181,8 @@ watch(state, () => window.scrollTo(0, 0))
 
				   .mb24 {
			
 
				     margin-bottom: 24px;
			
 
				   }
			
 
				-
			
 
				-  @include media-breakpoint-up(md) {
			
 
				-    .ptc-block {
			
 
				-      margin-bottom: 0;
			
 
				-    }
			
 
				-
			
 
				-    .ml354-md {
			
 
				-      margin-left: 354px;
			
 
				-    }
			
 
				+  .ml354 {
			
 
				+    margin-left: 354px;
			
 
				   }
			
 
				 }
			
 
				 </style>
			
--- a/src/pages/appointment/StepFive.vue
+++ b/src/pages/appointment/StepFive.vue
@@ -37,7 +37,7 @@
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
 
				-  <div class="ptc-wrap mt48">
			
 
				+  <div class="ptc-button-group">
			
 
				     <button class="ptc-button mb36" @click="state.step++">
			
 
				       Confirm appointment
			
 
				     </button>
			
--- a/src/pages/appointment/StepFour.vue
+++ b/src/pages/appointment/StepFour.vue
@@ -4,7 +4,7 @@
 
				     <p class="t1">Is there anything to pay attention to, nothing to skip。</p>
			
 
				     <textarea placeholder="Please enter, up to 1000 characters"></textarea>
			
 
				   </div>
			
 
				-  <div class="ptc-wrap mt48">
			
 
				+  <div class="ptc-button-group">
			
 
				     <button class="ptc-button" @click="state.step++">CONTINUE</button>
			
 
				   </div>
			
 
				 </template>
			
--- a/src/pages/appointment/StepSix.vue
+++ b/src/pages/appointment/StepSix.vue
@@ -24,7 +24,7 @@
 
				         <span class="cell-value">xxxxxxxxxx</span>
			
 
				       </div>
			
 
				       <div class="cell">
			
 
				-        <strong class="ptc-text">Navigation></strong>
			
 
				+        <strong class="primary">Navigation></strong>
			
 
				       </div>
			
 
				       <div class="cell">
			
 
				         <span class="cell-label">Phone Model:</span>
			
--- a/src/pages/appointment/StepThree.vue
+++ b/src/pages/appointment/StepThree.vue
@@ -8,7 +8,7 @@
 
				     <p class="t2">Phone number</p>
			
 
				     <input type="text" class="ptc-input" placeholder="Please enter" />
			
 
				   </div>
			
 
				-  <div class="ptc-wrap mt48">
			
 
				+  <div class="ptc-button-group">
			
 
				     <button class="ptc-button" @click="state.step++">CONTINUE</button>
			
 
				   </div>
			
 
				 </template>
			
--- a/src/pages/benefits/index.vue
+++ b/src/pages/benefits/index.vue
@@ -5,7 +5,7 @@
 
				       <div class="ptc-inner">
			
 
				         <div class="l1">
			
 
				           <i class="icon-lite"></i
			
 
				-          ><strong class="ptc-text">Lite</strong>2021/09/01 to 2022/08/31
			
 
				+          ><strong class="primary">Lite</strong>2021/09/01 to 2022/08/31
			
 
				         </div>
			
 
				         <p class="l2">iPhone 12</p>
			
 
				         <p class="l3">QWERTYUIO12345678</p>
			
--- a/src/pages/fill-order/StepOne.vue
+++ b/src/pages/fill-order/StepOne.vue
@@ -48,7 +48,7 @@
 
				         </div>
			
 
				         <div class="action">
			
 
				           <span class="code">87889122</span>
			
 
				-          <span class="ptc-text" @click="showCoupon = false">Revise</span>
			
 
				+          <span class="primary" @click="showCoupon = false">Revise</span>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
@@ -57,7 +57,7 @@
 
				       <p>total<strong>$99</strong></p>
			
 
				       <p class="highlight">($10 discounted)</p>
			
 
				     </div>
			
 
				-    <div class="ptc-wrap">
			
 
				+    <div class="ptc-button-group">
			
 
				       <button class="ptc-button" @click="$emit('next')">NEXT</button>
			
 
				     </div>
			
 
				   </div>
			
@@ -154,7 +154,6 @@ const showCoupon = ref(false)
 
				 }
			
 
				 
			
 
				 .total {
			
 
				-  margin-bottom: 48px;
			
 
				   padding-left: 36px;
			
 
				   font-size: 32px;
			
 
				   color: #333;
			
--- a/src/pages/fill-order/StepThree.vue
+++ b/src/pages/fill-order/StepThree.vue
@@ -1,13 +1,13 @@
 
				 <template>
			
 
				   <div class="step-3">
			
 
				-    <div class="ptc-block mb48">
			
 
				+    <div class="ptc-block">
			
 
				       <p class="text">
			
 
				         Please enter a valid email address, we will send you the latest status
			
 
				         of the order through this contact method。
			
 
				       </p>
			
 
				       <input class="ptc-input" placeholder="email address" />
			
 
				     </div>
			
 
				-    <div class="ptc-wrap">
			
 
				+    <div class="ptc-button-group">
			
 
				       <button class="ptc-button">$89 NEXT</button>
			
 
				     </div>
			
 
				   </div>
			
--- a/src/pages/fill-order/StepTwo.vue
+++ b/src/pages/fill-order/StepTwo.vue
@@ -15,7 +15,7 @@
 
				       </PtcRadioGroup>
			
 
				     </div>
			
 
				     <template v-if="state.brand">
			
 
				-      <div class="ptc-block mb48">
			
 
				+      <div class="ptc-block">
			
 
				         <p class="ptc-label">Choose phone model</p>
			
 
				         <PtcRadioGroup v-model="state.model" class="device-list">
			
 
				           <PtcRadio
			
@@ -29,7 +29,7 @@
 
				           </PtcRadio>
			
 
				         </PtcRadioGroup>
			
 
				       </div>
			
 
				-      <div class="ptc-wrap">
			
 
				+      <div class="ptc-button-group">
			
 
				         <button class="ptc-button" @click="$emit('next')">$89 NEXT</button>
			
 
				       </div>
			
 
				     </template>
			
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -26,9 +26,7 @@
 
				         <div class="ptc-form-item">
			
 
				           <p class="tip">
			
 
				             Don’t have an account?
			
 
				-            <router-link class="ptc-text" to="/register"
			
 
				-              >Create one</router-link
			
 
				-            >
			
 
				+            <router-link class="primary" to="/register">Create one</router-link>
			
 
				           </p>
			
 
				         </div>
			
 
				       </div>
			
@@ -42,8 +40,8 @@
 
				       </div>
			
 
				       <div class="policy">
			
 
				         By clicking “Sign in” you agree to PTC’s
			
 
				-        <span class="ptc-text">terms of use</span> and confirm that you’ve read
			
 
				-        and acknowledged PTC’s <span class="ptc-text">privacy policy</span>
			
 
				+        <span class="primary">terms of use</span> and confirm that you’ve read
			
 
				+        and acknowledged PTC’s <span class="primary">privacy policy</span>
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
--- a/src/pages/mailing/index.vue
+++ b/src/pages/mailing/index.vue
@@ -1,8 +1,8 @@
 
				 <template>
			
 
				-  <div class="p-mailing bg-gray">
			
 
				+  <div class="p-mailing ptc-wrapper">
			
 
				     <template v-if="action === 'fill'">
			
 
				       <h3 class="ptc-title">Fill in the mailing address</h3>
			
 
				-      <div class="ptc-block ptc-block--alone">
			
 
				+      <div class="ptc-block">
			
 
				         <div class="ptc-inner">
			
 
				           <div class="title">Receive merchandise：Cleaning Kit (1)</div>
			
 
				           <div class="ptc-cell">
			
@@ -44,7 +44,7 @@
 
				     </template>
			
 
				     <template v-else>
			
 
				       <h3 class="ptc-title">Mailing information</h3>
			
 
				-      <div class="ptc-block ptc-block--alone">
			
 
				+      <div class="ptc-block">
			
 
				         <div class="ptc-inner">
			
 
				           <div class="title">Merchandise：Cleaning Kit (1)</div>
			
 
				           <div class="info">
			
--- a/src/pages/register/index.vue
+++ b/src/pages/register/index.vue
@@ -17,14 +17,14 @@
 
				         <div class="ptc-form-item">
			
 
				           <p class="tip">
			
 
				             Already have an accout ？
			
 
				-            <router-link class="ptc-text" to="/login">Sign in</router-link>
			
 
				+            <router-link class="primary" to="/login">Sign in</router-link>
			
 
				           </p>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="policy">
			
 
				         By clicking “Continue” you agree to PTC’s
			
 
				-        <span class="ptc-text">terms of use</span> and confirm that you’ve read
			
 
				-        and acknowledged PTC’s <span class="ptc-text">privacy policy</span>
			
 
				+        <span class="primary">terms of use</span> and confirm that you’ve read
			
 
				+        and acknowledged PTC’s <span class="primary">privacy policy</span>
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
--- a/src/pages/renewal/index.vue
+++ b/src/pages/renewal/index.vue
@@ -1,7 +1,7 @@
 
				 <template>
			
 
				-  <div class="p-renewal">
			
 
				+  <div class="p-renewal ptc-wrapper">
			
 
				     <h3 class="ptc-title">Renewal management</h3>
			
 
				-    <div class="ptc-block ptc-block--alone">
			
 
				+    <div class="ptc-block">
			
 
				       <div class="ptc-inner">
			
 
				         <div class="cell">
			
 
				           <span class="cell__label">Product Name:</span>
			
@@ -11,7 +11,7 @@
 
				           <span class="cell__label">Subscription method:</span>
			
 
				           <span class="cell__value">Annual</span>
			
 
				         </div>
			
 
				-        <div class="ptc-text">Unsubscribe ></div>
			
 
				+        <div class="primary">Unsubscribe ></div>
			
 
				       </div>
			
 
				     </div>
			
 
				     <div class="ptc-button-group">
			
@@ -36,7 +36,7 @@
 
				       color: #333;
			
 
				     }
			
 
				   }
			
 
				-  .ptc-text {
			
 
				+  .primary {
			
 
				     margin-top: 8px;
			
 
				     font-weight: bold;
			
 
				     font-size: 32px;
			
--- a/src/style/_mixins.scss
+++ b/src/style/_mixins.scss
@@ -36,7 +36,8 @@
 
				 
			
 
				 $media-breakpoint-map: (
			
 
				   md: $breakpoint-md,
			
 
				-  lg: $breakpoint-lg
			
 
				+  lg: $breakpoint-lg,
			
 
				+  xl: $breakpoint-xl
			
 
				 );
			
 
				 
			
 
				 @mixin media-breakpoint-up($size) {
			
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -6,5 +6,6 @@ $placeholder-color: #bebebe;
 
				 
			
 
				 $nav-bar-height: 116px;
			
 
				 
			
 
				-$breakpoint-md: 768px; // pad
			
 
				-$breakpoint-lg: 1200px; // desktop
			
 
				+$breakpoint-md: 768px; // pads
			
 
				+$breakpoint-lg: 992px; // desktops
			
 
				+$breakpoint-xl: 1200px; // large desktops
			
--- a/src/style/atom.scss
+++ b/src/style/atom.scss
@@ -18,13 +18,13 @@
 
				   align-items: center;
			
 
				 }
			
 
				 
			
 
				-.mb48 {
			
 
				-  margin-bottom: 48px !important;
			
 
				-}
			
 
				 .mt48 {
			
 
				   margin-top: 48px !important;
			
 
				 }
			
 
				 
			
 
				+.primary {
			
 
				+  color: $primary-color !important;
			
 
				+}
			
 
				 .highlight {
			
 
				   color: $danger-color !important;
			
 
				 }
			
--- a/src/style/components.scss
+++ b/src/style/components.scss
@@ -1,3 +1,61 @@
 
				+.ptc-wrapper {
			
 
				+  @include media-breakpoint-up(md) {
			
 
				+    background: #fff;
			
 
				+    &:only-child {
			
 
				+      min-height: 1112px;
			
 
				+    }
			
 
				+    .ptc-block {
			
 
				+      margin-bottom: 0;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.ptc-inner {
			
 
				+  @include media-breakpoint-up(md) {
			
 
				+    margin: auto;
			
 
				+    padding: 0 36px;
			
 
				+    width: 750px;
			
 
				+  }
			
 
				+}
			
 
				+.ptc-inner-md {
			
 
				+  @include media-breakpoint-up(md) {
			
 
				+    margin: auto;
			
 
				+    width: 1168px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.ptc-title {
			
 
				+  padding: 36px 24px;
			
 
				+  line-height: 56px;
			
 
				+  font-size: 40px;
			
 
				+  font-weight: 600;
			
 
				+  color: #333;
			
 
				+  background: #f7f7f7;
			
 
				+  @include media-breakpoint-up(lg) {
			
 
				+    padding-left: 0;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.ptc-block {
			
 
				+  margin-bottom: 24px;
			
 
				+  padding: 48px 36px;
			
 
				+  background: #fff;
			
 
				+  @include media-breakpoint-up(md) {
			
 
				+    padding: 64px 0;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.ptc-button-group {
			
 
				+  margin: 48px 36px 0;
			
 
				+  .ptc-button + .ptc-button {
			
 
				+    margin-top: 36px;
			
 
				+  }
			
 
				+  @include media-breakpoint-up(md) {
			
 
				+    margin: 0;
			
 
				+    padding: 32px 0 64px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				 .ptc-button {
			
 
				   display: block;
			
 
				   width: 100%;
			
@@ -21,14 +79,6 @@
 
				   }
			
 
				 }
			
 
				 
			
 
				-.ptc-wrap {
			
 
				-  padding: 0 36px;
			
 
				-}
			
 
				-
			
 
				-.ptc-text {
			
 
				-  color: $primary-color;
			
 
				-}
			
 
				-
			
 
				 .ptc-form {
			
 
				   &-item {
			
 
				     margin-top: 36px;
			
@@ -46,55 +96,6 @@
 
				   color: #333;
			
 
				 }
			
 
				 
			
 
				-.ptc-title {
			
 
				-  padding: 36px 24px;
			
 
				-  line-height: 56px;
			
 
				-  font-size: 40px;
			
 
				-  font-weight: 600;
			
 
				-  color: #333;
			
 
				-  @include media-breakpoint-up(lg) {
			
 
				-    padding-left: 0;
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-.ptc-block {
			
 
				-  margin-bottom: 24px;
			
 
				-  padding: 48px 36px;
			
 
				-  background: #fff;
			
 
				-  @include media-breakpoint-up(md) {
			
 
				-    padding: 64px 0;
			
 
				-    &--alone {
			
 
				-      min-height: 1084px;
			
 
				-    }
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-.ptc-inner {
			
 
				-  @include media-breakpoint-up(md) {
			
 
				-    margin: auto;
			
 
				-    padding: 0 36px;
			
 
				-    width: 750px;
			
 
				-  }
			
 
				-}
			
 
				-.ptc-inner-md {
			
 
				-  @include media-breakpoint-up(md) {
			
 
				-    margin: auto;
			
 
				-    width: 1168px;
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-.ptc-button-group {
			
 
				-  margin: 48px 36px 0;
			
 
				-  .ptc-button + .ptc-button {
			
 
				-    margin-top: 36px;
			
 
				-  }
			
 
				-  @include media-breakpoint-up(md) {
			
 
				-    margin: 0;
			
 
				-    padding: 48px 0 64px;
			
 
				-    background: #fff;
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				 .ptc-cell {
			
 
				   + .ptc-cell {
			
 
				     margin-top: 84px;