@wizishop/wizi-block 4.2.0-beta → 4.2.21-beta

package/wizi-block.scss

@@ -1879,8 +1879,8 @@ wb-structure-config-extended-input {
         padding: rem(8) rem(8);
         border: rem(1) solid transparent;
         position: absolute;
-        top: -#{rem(26)};
-        right: -#{rem(55)};
+        top: -#{rem(45)};
+        right: 0;
         @include media('<=#{$block-width-mobile * 1.4}') {
             right: -#{rem(26)};
         }
@@ -1907,7 +1907,7 @@ wb-structure-config-extended-input {
         height: 100%;
         width: 100%;
         box-sizing: border-box;
-        transition: 0.3s ease;
+        transition: 0s !important;
         position: relative;
         z-index: 1;
 
@@ -2266,6 +2266,14 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                     &__buttons {
                         @include flex-wrap(wrap);
                         @include justify-content(center);
+
+                        button {
+                            display: initial;
+                            width: auto;
+                            height: 34px;
+                            font-size: 13px;
+                            font-weight: initial;
+                        }
                     }
 
                     &__actions {
@@ -2561,6 +2569,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 border: 1px solid #eaeaea;
                                 border-radius: 4px;
                                 cursor: pointer;
+                                color: black;
                                 font-size: 14px;
                                 padding: 3px 10px;
                                 margin-top: 3px;
@@ -2792,7 +2801,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                     center center/8px 8px no-repeat;
                             }
 
-                            &.align-left {
+                            &.we-align-left {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M264 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H24C10.75 88 0 77.25 0 64s10.75-24 24-24h240zm160 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zM0 320c0-13.3 10.75-24 24-24h240c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24zm424 104c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     left 11px center/13px 13px no-repeat;
@@ -2806,7 +2815,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 }
                             }
 
-                            &.align-center {
+                            &.we-align-center {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M328 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H120c-13.3 0-24-10.75-24-24s10.7-24 24-24h208zm96 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zM96 320c0-13.3 10.7-24 24-24h208c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24zm328 104c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     left 11px center/13px 13px no-repeat;
@@ -2820,7 +2829,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 }
                             }
 
-                            &.align-right {
+                            &.we-align-right {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M424 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H184c-13.3 0-24-10.75-24-24s10.7-24 24-24h240zm0 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zm0 176H184c-13.3 0-24-10.7-24-24s10.7-24 24-24h240c13.3 0 24 10.7 24 24s-10.7 24-24 24zm0 80c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     left 11px center/13px 13px no-repeat;
@@ -2834,7 +2843,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 }
                             }
 
-                            &.align-justify {
+                            &.we-align-justify {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M424 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H24C10.75 88 0 77.25 0 64s10.75-24 24-24h400zm0 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zM0 320c0-13.3 10.75-24 24-24h400c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24zm424 104c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     left 11px center/13px 13px no-repeat;
@@ -2885,6 +2894,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                 &-actions {
                     position: relative;
                     z-index: 9999;
+                    color: black;
 
                     &--color {
                         position: absolute;
@@ -2932,6 +2942,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                             p {
                                 font-size: 14px;
                                 padding-right: 15px;
+                                color: black;
                             }
 
                             & > div {
@@ -3048,6 +3059,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                         left: 0;
                         top: 100%;
                         padding: 5px 10px;
+                        color: black;
                         background-color: white;
                         box-shadow: 0 3px 15px -3px rgb(13 20 33 / 13%);
                         border: 1px solid #eaeaea;
@@ -3065,6 +3077,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                     &--text {
                         &__row {
                             padding: 3px 10px;
+                            color: black;
                             cursor: pointer;
                             border-radius: 4px;
                             font-size: 14px;
@@ -3105,25 +3118,25 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 transition: background-color 0.3s ease-in-out;
                             }
 
-                            &.align-left {
+                            &.we-align-left {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M264 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H24C10.75 88 0 77.25 0 64s10.75-24 24-24h240zm160 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zM0 320c0-13.3 10.75-24 24-24h240c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24zm424 104c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     center center/13px 13px no-repeat;
                             }
 
-                            &.align-center {
+                            &.we-align-center {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M328 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H120c-13.3 0-24-10.75-24-24s10.7-24 24-24h208zm96 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zM96 320c0-13.3 10.7-24 24-24h208c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24zm328 104c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     center center/13px 13px no-repeat;
                             }
 
-                            &.align-right {
+                            &.we-align-right {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M424 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H184c-13.3 0-24-10.75-24-24s10.7-24 24-24h240zm0 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zm0 176H184c-13.3 0-24-10.7-24-24s10.7-24 24-24h240c13.3 0 24 10.7 24 24s-10.7 24-24 24zm0 80c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     center center/13px 13px no-repeat;
                             }
 
-                            &.align-justify {
+                            &.we-align-justify {
                                 background: transparent
                                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M424 40c13.3 0 24 10.75 24 24s-10.7 24-24 24H24C10.75 88 0 77.25 0 64s10.75-24 24-24h400zm0 128c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400zM0 320c0-13.3 10.75-24 24-24h400c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24zm424 104c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.25 0-24-10.7-24-24s10.75-24 24-24h400z'/%3E%3C/svg%3E")
                                     center center/13px 13px no-repeat;
@@ -3200,6 +3213,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                     opacity: 0;
                                     z-index: -1;
                                     background-color: white;
+                                    color: black;
                                     box-shadow: 0 3px 15px -3px rgb(13 20 33 / 13%);
                                     border: 1px solid #eaeaea;
                                     transition: opacity 0.3s ease-in-out, z-index 0s linear 0.3s;
@@ -3219,6 +3233,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                             padding-left: 25px;
                             cursor: pointer;
                             white-space: nowrap;
+                            color: black;
 
                             &:before,
                             &:after {
@@ -4763,7 +4778,7 @@ wb-loader {
     }
 
     &__content {
-        padding: rem(30) 0 0;
+        padding: rem(60) 0 rem(30);
 
         @include media('<=1510px') {
             padding: rem(30) rem(30) 0;
@@ -4812,6 +4827,14 @@ html .ql-bubble {
 .switch[type='checkbox'] + label {
     height: 21px;
 }
+
+.editorjs-focused {
+    z-index: 99 !important;
+}
+
+wb-editorjs {
+    display: block;
+}
 .wb-product-zoom-more {
   //minimum search sized for product - no less needed
   min-height: rem(380);
@@ -4956,7 +4979,7 @@ html .ql-bubble {
 .ce-paragraph {
     font-size: 14px;
     line-height: 21px;
-    color: $wb-black;
+    color: black;
 
     & > * {
         min-height: 20px;
@@ -4979,7 +5002,7 @@ html .ql-bubble {
             line-height: 45px;
         }
 
-        .size-small {
+        .we-size-small {
             font-size: 32px;
             line-height: 48px;
 
@@ -4994,7 +5017,7 @@ html .ql-bubble {
             }
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 52px;
             line-height: 78px;
 
@@ -5009,7 +5032,7 @@ html .ql-bubble {
             }
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 76px;
             line-height: 114px;
 
@@ -5042,7 +5065,7 @@ html .ql-bubble {
             line-height: 39px;
         }
 
-        .size-small {
+        .we-size-small {
             font-size: 26px;
             line-height: 39px;
 
@@ -5057,7 +5080,7 @@ html .ql-bubble {
             }
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 42px;
             line-height: 63px;
 
@@ -5072,7 +5095,7 @@ html .ql-bubble {
             }
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 61px;
             line-height: 92px;
 
@@ -5105,7 +5128,7 @@ html .ql-bubble {
             line-height: 35px;
         }
 
-        .size-small {
+        .we-size-small {
             font-size: 23px;
             line-height: 35px;
 
@@ -5120,7 +5143,7 @@ html .ql-bubble {
             }
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 37px;
             line-height: 56px;
 
@@ -5135,7 +5158,7 @@ html .ql-bubble {
             }
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 54px;
             line-height: 81px;
 
@@ -5168,7 +5191,7 @@ html .ql-bubble {
             line-height: 30px;
         }
 
-        .size-small {
+        .we-size-small {
             font-size: 19px;
             line-height: 29px;
 
@@ -5183,7 +5206,7 @@ html .ql-bubble {
             }
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 30px;
             line-height: 45px;
 
@@ -5198,7 +5221,7 @@ html .ql-bubble {
             }
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 44px;
             line-height: 66px;
 
@@ -5231,7 +5254,7 @@ html .ql-bubble {
             line-height: 24px;
         }
 
-        .size-small {
+        .we-size-small {
             font-size: 15px;
             line-height: 23px;
 
@@ -5246,7 +5269,7 @@ html .ql-bubble {
             }
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 24px;
             line-height: 36px;
 
@@ -5261,7 +5284,7 @@ html .ql-bubble {
             }
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 35px;
             line-height: 53px;
 
@@ -5284,17 +5307,17 @@ html .ql-bubble {
         color: inherit;
         margin: 15px 0;
 
-        .size-small {
+        .we-size-small {
             font-size: 12px;
             line-height: 18px;
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 19px;
             line-height: 29px;
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 28px;
             line-height: 42px;
         }
@@ -5313,17 +5336,17 @@ html .ql-bubble {
             margin: 12px 0 !important;
         }
 
-        .size-small {
+        .we-size-small {
             font-size: 12px;
             line-height: 18px;
         }
 
-        .size-large {
+        .we-size-large {
             font-size: 19px;
             line-height: 29px;
         }
 
-        .size-huge {
+        .we-size-huge {
             font-size: 28px;
             line-height: 42px;
         }
@@ -5347,7 +5370,7 @@ html .ql-bubble {
         }
     }
 
-    .align {
+    .we-align {
         &-left {
             text-align: left;
         }
@@ -5390,7 +5413,7 @@ html .ql-bubble {
         padding-left: 16px;
     }
 
-    .indent {
+    .we-indent {
         &-1 {
             padding-left: 3em;
         }
@@ -12594,10 +12617,14 @@ $color-bd: #dddddd;
         }
 
         &__banner {
+            @include flexbox();
+            @include align-items(center);
             min-height: 70px;
+            padding: 1px;
 
-            p br:first-child:last-child {
-                display: none;
+            wb-editorjs {
+                display: block;
+                width: 100%;
             }
         }
     }
@@ -15473,6 +15500,8 @@ html {
             left: 0;
 
             > div {
+                @include flexbox();
+                @include flex-direction(column);
                 pointer-events: all;
                 text-align: center;
                 width: 100%;
@@ -18254,14 +18283,18 @@ wb-quill {
         }
 
         .button {
-            background-color: transparent !important;
-            border-color: transparent !important;
-            &:hover,
-            &:focus {
+            &:not(.is-tooltip-danger) {
                 background-color: transparent !important;
-            }
-            > span {
-                display: none !important;
+                border-color: transparent !important;
+                &:hover,
+                &:focus {
+                    background-color: transparent !important;
+                    &.is-tooltip-danger {
+                    }
+                }
+                > span {
+                    display: none !important;
+                }
             }
         }
     }
@@ -18609,8 +18642,14 @@ wb-quill {
         }
 
         &__banner {
-            p br:first-child:last-child {
-                display: none;
+            @include flexbox();
+            @include align-items(center);
+            min-height: 70px;
+            padding: 1px;
+
+            wb-editorjs {
+                display: block;
+                width: 100%;
             }
         }
     }
@@ -18966,6 +19005,7 @@ $color-bd: #dddddd;
             left: 0;
 
             > div {
+                padding: 5px 15px;
                 pointer-events: all;
                 text-align: center;
                 width: 100%;
@@ -25257,133 +25297,135 @@ $color-size-choose: #6c6c6c;
     }
 }
 .wb-videos-txt {
-  position: relative;
+    position: relative;
 
-  .ql-editor {
-    max-height: rem(200);
-    overflow-y: auto;
-  }
+    .ql-editor {
+        max-height: rem(200);
+        overflow-y: auto;
+    }
 
-  &__frame {
-    display: block;
+    &__frame {
+        display: block;
 
-    iframe {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      min-height: auto;
-    }
+        iframe {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            min-height: auto;
+        }
 
-    .top {
-      padding-bottom: 0;
-      height: 100%;
-      overflow: hidden;
-      position: relative;
-    }
+        .top {
+            padding-bottom: 0;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+        }
 
-    .wrapper {
-      position: relative;
-      padding-bottom: 50%;
-      transform: translateY(0%);
-    }
+        .wrapper {
+            position: relative;
+            padding-bottom: 50%;
+            transform: translateY(0%);
+        }
 
-    &.is-cropped {
-      .top {
-        padding-bottom: 48.25%;
-        height: 0;
-      }
+        &.is-cropped {
+            .top {
+                padding-bottom: 48.25%;
+                height: 0;
+            }
 
-      .wrapper {
-        padding-bottom: 100%;
-        transform: translateY(-25%);
-      }
+            .wrapper {
+                padding-bottom: 100%;
+                transform: translateY(-25%);
+            }
+        }
     }
-  }
 
-  &__fakeframe {
-    display: none;
-    background-color: lighten($wb-border-color, 12%);
-    cursor: pointer;
-    height: rem(500);
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    width: 100%;
+    &__fakeframe {
+        display: none;
+        background-color: lighten($wb-border-color, 12%);
+        cursor: pointer;
+        height: rem(500);
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        width: 100%;
 
-    p {
-      text-align: center;
-      font-size: rem(14);
-      position: relative;
+        p {
+            text-align: center;
+            font-size: rem(14);
+            position: relative;
 
-      &:before {
-        position: absolute;
-        width: 0;
-        bottom: -(#{rem(3)});
-        height: rem(2);
-        transition: 200ms all;
-        background-color: $wb-border-color;
-        content: ' ';
-        left: 0;
-      }
-    }
+            &:before {
+                position: absolute;
+                width: 0;
+                bottom: -(#{rem(3)});
+                height: rem(2);
+                transition: 200ms all;
+                background-color: $wb-border-color;
+                content: ' ';
+                left: 0;
+            }
+        }
 
-    i {
-      color: $wb-secondary-text-color;
-      text-align: center;
-      display: block;
-      font-size: rem(60);
-      opacity: 0.4;
-      transition: 200ms all;
-    }
+        i {
+            color: $wb-secondary-text-color;
+            text-align: center;
+            display: block;
+            font-size: rem(60);
+            opacity: 0.4;
+            transition: 200ms all;
+        }
 
-    border: rem(1) solid lighten($wb-border-color, 12%);
-    transition: 200ms all;
+        border: rem(1) solid lighten($wb-border-color, 12%);
+        transition: 200ms all;
 
-    &:hover {
-      border: rem(1) solid $wb-border-color;
-      i {
-        color: darken($wb-secondary-text-color, 20%);
-      }
-      p {
-        &:before {
-          width: 100%;
+        &:hover {
+            border: rem(1) solid $wb-border-color;
+            i {
+                color: darken($wb-secondary-text-color, 20%);
+            }
+            p {
+                &:before {
+                    width: 100%;
+                }
+            }
         }
-      }
     }
-  }
 
-  &__noframe {
-    padding: rem(50) rem(50);
-  }
+    &__noframe {
+        padding: rem(50) rem(50);
+    }
 
-  &__text {
-    background-color: transparent;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
+    &__text {
+        background-color: transparent;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
 
-    > div {
-      width: 100%;
-    }
+        > div {
+            @include flexbox();
+            @include flex-direction(column);
+            width: 100%;
+        }
 
-    > div > div {
-      background-color: rgba(0, 0, 0, 0.15);
-      width: 100%;
+        > div > div {
+            background-color: rgba(0, 0, 0, 0.15);
+            width: 100%;
 
-      &:first-child {
-        position: relative;
-        z-index: 10;
-      }
+            &:first-child {
+                position: relative;
+                z-index: 10;
+            }
+        }
     }
-  }
 }
 .wb-map-background-form-left {
   position: relative;
@@ -25580,128 +25622,128 @@ $color-size-choose: #6c6c6c;
   }
 }
 .wb-videos-txt-content {
-  position: relative;
+    position: relative;
 
-  .ql-editor {
-    max-height: rem(200);
-    overflow-y: auto;
-  }
+    .ql-editor {
+        max-height: rem(200);
+        overflow-y: auto;
+    }
 
-  &__frame {
-    display: block;
+    &__frame {
+        display: block;
 
-    iframe {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      min-height: auto;
-    }
+        iframe {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            min-height: auto;
+        }
 
-    .top {
-      padding-bottom: 0;
-      height: 100%;
-      overflow: hidden;
-      position: relative;
-    }
+        .top {
+            padding-bottom: 0;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+        }
 
-    .wrapper {
-      position: relative;
-      padding-bottom: 50%;
-      transform: translateY(0%);
+        .wrapper {
+            position: relative;
+            padding-bottom: 50%;
+            transform: translateY(0%);
+        }
     }
-  }
 
-  &__fakeframe {
-    display: none;
-    background-color: lighten($wb-border-color, 12%);
-    cursor: pointer;
-    height: rem(500);
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    width: 100%;
+    &__fakeframe {
+        display: none;
+        background-color: lighten($wb-border-color, 12%);
+        cursor: pointer;
+        height: rem(500);
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        width: 100%;
 
-    p {
-      text-align: center;
-      font-size: rem(14);
-      position: relative;
+        p {
+            text-align: center;
+            font-size: rem(14);
+            position: relative;
 
-      &:before {
-        position: absolute;
-        width: 0;
-        bottom: -(#{rem(3)});
-        height: rem(2);
-        transition: 200ms all;
-        background-color: $wb-border-color;
-        content: ' ';
-        left: 0;
-      }
-    }
+            &:before {
+                position: absolute;
+                width: 0;
+                bottom: -(#{rem(3)});
+                height: rem(2);
+                transition: 200ms all;
+                background-color: $wb-border-color;
+                content: ' ';
+                left: 0;
+            }
+        }
 
-    i {
-      color: $wb-secondary-text-color;
-      text-align: center;
-      display: block;
-      font-size: rem(60);
-      opacity: 0.4;
-      transition: 200ms all;
-    }
+        i {
+            color: $wb-secondary-text-color;
+            text-align: center;
+            display: block;
+            font-size: rem(60);
+            opacity: 0.4;
+            transition: 200ms all;
+        }
 
-    border: rem(1) solid lighten($wb-border-color, 12%);
-    transition: 200ms all;
+        border: rem(1) solid lighten($wb-border-color, 12%);
+        transition: 200ms all;
 
-    &:hover {
-      border: rem(1) solid $wb-border-color;
-      i {
-        color: darken($wb-secondary-text-color, 20%);
-      }
-      p {
-        &:before {
-          width: 100%;
+        &:hover {
+            border: rem(1) solid $wb-border-color;
+            i {
+                color: darken($wb-secondary-text-color, 20%);
+            }
+            p {
+                &:before {
+                    width: 100%;
+                }
+            }
         }
-      }
     }
-  }
 
-  &__noframe {
-    padding: rem(50) rem(50);
-  }
+    &__noframe {
+        padding: rem(50) rem(50);
+    }
 
-  &__text {
-    background-color: transparent;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
+    &__text {
+        background-color: transparent;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
 
-    > div {
-      width: 100%;
-    }
+        > div {
+            width: 100%;
+        }
 
-    > div > div {
-      background-color: $wb-white;
-      width: 50%;
-      margin-left: rem(40);
-      box-sizing: border-box;
+        > div > div {
+            background-color: $wb-white;
+            width: 50%;
+            margin-left: rem(40);
+            box-sizing: border-box;
 
-      &:first-child {
-        position: relative;
-        z-index: 10;
-        padding: rem(15) rem(30) 0;
-      }
+            &:first-child {
+                position: relative;
+                z-index: 10;
+                padding: rem(15) rem(30) 1px;
+            }
 
-      &:last-child {
-        padding: 0 rem(30) rem(25);
-      }
+            &:last-child {
+                padding: 1px rem(30) rem(25);
+            }
+        }
     }
-  }
 }
 .wb-faq {
     position: relative;