@import url('https://fonts.cdnfonts.com/css/bankgothic-md-bt');
body {
  margin: 0px 0px 0px;
  padding: 0px; 
  height: auto;
  background-color: #FFFFFF;
  }
  @media all and (min-width: 768px) and (max-width: 1024px) {
    body {
      overflow-x: hidden; } }
  @media all and (max-width: 767px) {
    body {
      overflow-x: hidden; } }

.container {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  display: block; }
  @media all and (min-width: 768px) and (max-width: 1024px) {
    .container {
      width: auto;
      padding: 0px 20px; } }
  @media all and (max-width: 767px) {
    .container {
      width: auto;
      padding: 0px 20px; } }

a {
  text-decoration: none; }

h1, h2, h3, h4, h5, h6, div, ul, li, p, span, a, input, textarea {
  font-family: "Poppins", sans-serif !important; }

html {
  scroll-behavior: smooth; }
  @media all and (min-width: 768px) and (max-width: 1024px) {
    html {
      overflow-x: hidden; } }
  @media all and (max-width: 767px) {
    html {
      overflow-x: hidden; } }

header {
  padding: 0px 0px;
  z-index: 1;
  transition: all .4s;
  top: 0px;
  width: 100%; }
  header.sticky {
    background-color: #fff;
    /* padding: 5px 0px; */
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); }
    header.sticky .col-6:first-child > .tagLine {
      margin-left: 20px;
      letter-spacing: .5px;
      color: #212020; }
      header.sticky .col-6:first-child > .tagLine > span.mjTitle {
        color: #e80113;
        font-family: "BankGothic Md BT", Courier !important; }
    header.sticky a {
      border-radius: 0px;
      }
      header.sticky a:hover {
        border: 1px solid #212020 !important;
        color: #212020 !important; }
      header.sticky a.mjLogo > img {
        width: 65px; }
      header.sticky a.mjLogo:hover {
        border: none !important; }
  header > .inner-header {
    display: block;
    height: 60px;
    position: relative; }
    header > .inner-header > .mainNav {
      display: block;
      height: auto; }
      header > .inner-header > .mainNav > .container {
        display: flex;
        align-items: center;
        position: relative; }
        header > .inner-header > .mainNav > .container > .col-6 {
          width: calc(1/2*100%); }
          header > .inner-header > .mainNav > .container > .col-6:first-child {
            display: flex;
            color: #fff;
            font-size: 22px;
            line-height: 22px;
            align-items: center;
            font-weight: bold; }
            @media all and (max-width: 767px) {
              header > .inner-header > .mainNav > .container > .col-6:first-child {
                width: 50%; } }
            header > .inner-header > .mainNav > .container > .col-6:first-child > .tagLine {
              margin-left: 20px;
              letter-spacing: .5px; }
              @media all and (max-width: 767px) {
                header > .inner-header > .mainNav > .container > .col-6:first-child > .tagLine {
                  display: none; } }
              header > .inner-header > .mainNav > .container > .col-6:first-child > .tagLine > span.mjTitle {
                color: #e80113;
                font-family: "BankGothic Md BT", Courier !important; }
          @media all and (max-width: 767px) {
            header > .inner-header > .mainNav > .container > .col-6:last-child {
              width: 50%; } }
          header > .inner-header > .mainNav > .container > .col-6 > a {
            background-color: #e80113;
            padding: 10px 20px;
            color: #fff;
            border: 1px solid #e80113;
            border-radius: 5px; }
            header > .inner-header > .mainNav > .container > .col-6 > a.mjLogo {
              background-color: transparent;
              padding: 0px;
              border: none;
              border-radius: 0px; }
              header > .inner-header > .mainNav > .container > .col-6 > a.mjLogo > img {
                width: 65px; }
              header > .inner-header > .mainNav > .container > .col-6 > a.mjLogo:hover {
                border: none !important; }
            header > .inner-header > .mainNav > .container > .col-6 > a:hover {
              border: 1px solid #e80113;
              background-color: transparent;
              color: #e80113; }
          header > .inner-header > .mainNav > .container > .col-6:last-child {
            text-align: right; }
          header .row>.col-6:last-child>.search,
          header .row>.col-6:last-child>.login,
          header .row>.col-6:last-child>.cart,
          header .row>.col-6:last-child>.logout,
          header .row>.col-6:last-child>.lang { 
            display:none;
          }
          /* 基本樣式 */
          section.mainKv {
            display: block;
            height: 100%;
            width: 100%;
          }

          section.mainKv > .mainKvContainer {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            min-height: 540px;
            max-height: 540px;                      
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          }

          /* 針對特定展會的樣式（如 apm） */
          /* section.mainKv > .mainKvContainer.apm {            
            background-image: url(aapex_banner.webp) !important;
          } */

          /* 手機版：螢幕寬度小於或等於 767px */
          @media all and (max-width: 767px) {
            section.mainKv > .mainKvContainer {
              height: 470px !important;
              /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://i0.wp.com/www.mjgasket.com/event/asset/img/mobileBanner.webp) !important; */
            }
          }

          /* 平板版：螢幕寬度介於 768px 到 1024px */
          @media all and (min-width: 768px) and (max-width: 1024px) {
            section.mainKv > .mainKvContainer {
              height: 650px !important;
              /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://www.mjgasket.com/event/asset/img/tabletBanner.png) !important; */
            }
            /* section.mainKv > .mainKvContainer.apm {
              background-image: url(aapex_banner.webp) !important;
            } */
          }

          /* 桌機版：螢幕寬度介於 1300px 到 1600px */
          /* @media all and (min-width: 1300px) {
            section.mainKv > .mainKvContainer.apm {
              background-image: url(aapex_banner1213.webp) !important;
            }
            section.mainKv > .mainKvContainer {
              background-image: url(aapex_banner123.webp) !important;
            }
          } */

          @media all and (min-width: 1300px) and (max-width: 1440px) {
            section.mainKv > .mainKvContainer {
              height: 460px !important;
            }
          }
          @media all and (min-width: 1440px) and (max-width: 1600px) {
            section.mainKv > .mainKvContainer {
              height: 510px !important;
            }
          }

          /* 超大螢幕版：螢幕寬度大於 1601px */
          /* @media all and (min-width: 1601px) {
            section.mainKv > .mainKvContainer.apm {
              background-image: url(aapex_banner.webp) !important;
            }
          } */
      section.mainKv > .mainKvContainer > .container .mkvInner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 60px;
      width: 100%; }
      section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 {
        width: 100%; }
        section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 {
          color: #000000;
          margin: 0px;
          font-size: 60px;
          display: inline-block;
          line-height: 1.1em; }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1.apm > img.eventlogo {
            margin-bottom: 0px; }
            @media all and (max-width: 767px) {
              section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1.apm > img.eventlogo.apm {
                max-width: 190px !important; } }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1.apm > span.location {
            font-size: 34px; }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1.apm > span.date {
            font-size: 34px; }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1.apm > span:before {
            background: #fafafa !important; }
          @media all and (min-width: 1440px) and (max-width: 1600px) {
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 {
              font-size: 50px; } }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 img.eventlogo {
            max-width: 335px;
            display: block;
            margin-bottom: 30px; }
            @media all and (min-width: 1366px) and (max-width: 1440px) {
              section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 img.eventlogo {
                margin-bottom: 10px; } }
            @media all and (min-width: 1440px) and (max-width: 1600px) {
              section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 img.eventlogo {
                margin-bottom: 10px; } }
          @media all and (max-width: 767px) {
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 {
              font-size: 1.6em;
              line-height: 1.4em; } }
          @media all and (min-width: 1366px) and (max-width: 1440px) {
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 {
              font-size: 40px; } }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span {
            display: block;
            position: relative;
            overflow: hidden; }
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span.mj-booth {
              font-size: 60px; }
              @media all and (max-width: 767px) {
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span.mj-booth {
                  font-size: 30px; } }
              @media all and (min-width: 1366px) and (max-width: 1440px) {
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span.mj-booth {
                  font-size: 40px; } }
              @media all and (min-width: 1440px) and (max-width: 1600px) {
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span.mj-booth {
                  font-size: 50px; } }
                /* 遮罩抽走動畫（白色） */
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:after {
                  content: '';
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 100%;
                  height: 100%;
                  background: #fafafa;
                  animation: a-ltr-after 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
                  transform: translateX(0);
                }
                @media all and (min-width: 768px) and (max-width: 1024px),
                      all and (max-width: 767px) {
                  section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:after {
                    display: none;
                  }
                }
                /* 背景滑入動畫（黑色） */
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:before {
                  content: '';
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 100%;
                  height: 100%;
                  background: #fafafa;
                  animation: a-ltr-before 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
                  transform: translateX(-101%);
                }
                @media all and (min-width: 768px) and (max-width: 1024px),
                      all and (max-width: 767px) {
                  section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:before {
                    display: none;
                  }
                }
                /* 依序延遲 — 四行 */
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(1):before,
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(1):after {
                  animation-delay: 0.0s;
                }
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(2):before,
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(2):after {
                  animation-delay: 0.12s;
                }
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(3):before,
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(3):after {
                  animation-delay: 0.24s;
                }
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(4):before,
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 h1 > span:nth-of-type(4):after {
                  animation-delay: 0.36s;
                }
                /* Keyframes */
                @keyframes a-ltr-after {
                  0%   { transform: translateX(0); }
                  100% { transform: translateX(101%); }
                }
                @keyframes a-ltr-before {
                  0%   { transform: translateX(-101%); }
                  100% { transform: translateX(0); }
                }
        section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns {
          display: block;
          margin-top: 20px; }
          @media all and (min-width: 1366px) and (max-width: 1440px) {
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns {
              margin-top: 10px; } }
          @media all and (max-width: 767px) {
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns {
              width: 100%;
              text-align: center; } }
          section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a {
            display: inline-block;
            color: #fff;
            padding: 10px 25px;
            border-radius: 5px; }
            @media all and (max-width: 767px) {
              section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a {
                display: block; } }
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a.get {
              background-color: #e80113;
              border: 1px solid #e80113;
              margin-right: 20px; }
              @media all and (max-width: 767px) {
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a.get {
                  margin-right: 0px; } }
              section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a.get:hover {
                border: 1px solid #e80113;
                background-color: #e80113; }
            section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a.web {
              border: 1px solid #e80113;
              background-color: #e80113; }
              @media all and (max-width: 767px) {
                section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a.web {
                  margin-top: 10px; } }
              section.mainKv > .mainKvContainer > .container .mkvInner > .col-7 .btns > a.web:hover {
                border: 1px solid #e80113;
                background-color: #e80113;}
    @media all and (max-width: 767px) {
      section.mainKv > .mainKvContainer > .container {
        padding-top: 65px; } }

section.about > .aboutContainer {
  margin: 100px 0px;
  width: 100%;
  display: block; }
  @media all and (max-width: 767px) {
    section.about > .aboutContainer {
      margin: 50px 0px 100px; } }
  section.about > .aboutContainer > .container.mj {
    margin: 50px auto; }
    section.about > .aboutContainer > .container.mj > .content {
      display: block;
      text-align: center; }
      /* Two-column: left text, right image */
      section.about > .aboutContainer > .container.mj .content .has-media.aapex-has-media {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
      }

      /* Left column: all non-image children */
      section.about > .aboutContainer > .container.mj .content .has-media.aapex-has-media > .text-group {
        flex: 1;
      }

      /* Right column: image (top-aligned, spans height) */
      section.about > .aboutContainer > .container.mj .content .has-media.aapex-has-media > .aapex-side-media {
        flex: 1;
        max-width: 35%; /* 確保圖片不會超過一半寬度 */
        height: auto;
      }
      @media all and (max-width: 767px) {
        section.about > .aboutContainer > .container.mj > .content {
          text-align: center; } 
          section.about > .aboutContainer > .container.mj .content .has-media.aapex-has-media {
            flex-direction: column; /* 將排列方向改為垂直 */
          }

          section.about > .aboutContainer > .container.mj .content .has-media.aapex-has-media > .text-group {
            order: 2; /* 文字區塊排第二 */
          }

          section.about > .aboutContainer > .container.mj .content .has-media.aapex-has-media > .aapex-side-media {
            order: 1; /* 圖片排第一 */
            max-width: 100%; /* 圖片在手機版時佔滿整行 */
          }
        }
      section.about > .aboutContainer > .container.mj > .content > h2 {
        font-size: 32px;
        font-weight: bold;
        margin: 0px 0px 20px;
        color: #212020; }
        @media all and (max-width: 767px) {
          section.about > .aboutContainer > .container.mj > .content > h2 {
            font-size: 28px; } }
      section.about > .aboutContainer > .container.mj > .content > h3 {
        font-size: 24px;
        font-weight: bold;
        margin: 0px 0px 20px;
        color: #212020; }
        @media all and (max-width: 767px) {
          section.about > .aboutContainer > .container.mj > .content > h3 {
            font-size: 20px; } }
      section.about > .aboutContainer > .container.mj > .content > .inner {      
        text-align: left;
        margin-top: 40px; }
        section.about > .aboutContainer > .container.mj > .content > .inner ol {
          padding: 0 0 0 20px;
          margin: 30px 0 0 0; }
          section.about > .aboutContainer > .container.mj > .content > .inner ol > li {
            margin-bottom: 30px; }
        section.about > .aboutContainer > .container.mj > .content > .inner ul {
          padding-left: 20px; }
          section.about > .aboutContainer > .container.mj > .content > .inner ul > li {
            font-weight: 600;
            margin-bottom: 10px; }
      section.about > .aboutContainer > .container.mj > .content .text-group > .inner {      
        text-align: left;}

        /* ========= 基本結構 ========= */
      section.about > .aboutContainer > .container > .content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* ========= col-6 標題 ========= */
      section.about > .aboutContainer > .container > .content > .col-6 > h2 {
        font-size: 32px;
        font-weight: bold;
        margin: 0 0 20px;
        color: #212020;
      }
      @media all and (max-width: 767px) {
        section.about > .aboutContainer > .container > .content > .col-6 > h2 {
          font-size: 28px;
        }
      }

      /* ========= col-6 (桌機兩欄) ========= */
      /* 舊結構（直接放 col-6）與新結構（videoRow 包裹）都支援 */
      section.about > .aboutContainer > .container > .content > .col-6,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-6 {
        width: 50%;
        padding: 30px;
        box-sizing: border-box;
      }

      /* 影片容器 (16:9) */
      section.about > .aboutContainer > .container > .content > .col-6 .embedContainer,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-6 .embedContainer {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
      }

      /* 影片填滿 */
      section.about > .aboutContainer > .container > .content > .col-6 .embedContainer > iframe,
      section.about > .aboutContainer > .container > .content > .col-6 .embedContainer > object,
      section.about > .aboutContainer > .container > .content > .col-6 .embedContainer > embed,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-6 .embedContainer > iframe,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-6 .embedContainer > object,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-6 .embedContainer > embed {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      /* ========= Tablet：768–1024 ========= */
      @media all and (min-width: 768px) and (max-width: 1024px) {
        section.about > .aboutContainer > .container > .content {
          display: grid;
        }

        /* col-6 改成單欄 */
        section.about > .aboutContainer > .container > .content > .col-6,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-6 {
          width: 100%;
          padding: 30px 0 !important;
        }

        /* 保留排序規則 */
        section.about > .aboutContainer > .container > .content > .col-6:first-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-6:first-child {
          order: 2;
        }
        section.about > .aboutContainer > .container > .content > .col-6:last-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-6:last-child {
          order: 1;
        }
      }

      /* ========= Mobile：<=767 ========= */
      @media all and (max-width: 767px) {
        section.about > .aboutContainer > .container > .content {
          display: grid;
        }

        /* col-6 改成單欄 */
        section.about > .aboutContainer > .container > .content > .col-6,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-6 {
          width: 100%;
          padding: 30px 0 !important;
        }

        /* 保留排序規則 */
        section.about > .aboutContainer > .container > .content > .col-6:first-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-6:first-child {
          order: 2;
        }
        section.about > .aboutContainer > .container > .content > .col-6:last-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-6:last-child {
          order: 1;
        }
      }

      /* 標題樣式 */
      section.about > .aboutContainer > .container > .content > .videoTitle {
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        margin: 0 0 30px;
        color: #212020;
      }

      /* 影片列：三欄 */
      section.about > .aboutContainer > .container > .content > .videoRow {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin-left: -20px;   /* 與欄位 padding 對齊 */
        margin-right: -20px;
      }

      /* ===== 欄位（桌機） ===== */
      /* 舊結構(無 videoRow) 與 新結構(有 videoRow) 兩者一起支援 */
      section.about > .aboutContainer > .container > .content > .col-4,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-4 {
        width: 33.3333%;
        padding: 20px;
        box-sizing: border-box;
      }

      /* ===== 16:9 內嵌容器（兩種結構都套到） ===== */
      section.about > .aboutContainer > .container > .content > .col-4 .embedContainer,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-4 .embedContainer {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 關鍵高度 */
        height: 0;
        overflow: hidden;
        max-width: 100%;
      }

      /* 內嵌填滿（兩種結構都套到） */
      section.about > .aboutContainer > .container > .content > .col-4 .embedContainer > iframe,
      section.about > .aboutContainer > .container > .content > .col-4 .embedContainer > object,
      section.about > .aboutContainer > .container > .content > .col-4 .embedContainer > embed,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-4 .embedContainer > iframe,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-4 .embedContainer > object,
      section.about > .aboutContainer > .container > .content > .videoRow > .col-4 .embedContainer > embed {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      /* ====== Tablet：768–1024（保留並擴充） ====== */
      @media all and (min-width: 768px) and (max-width: 1024px) {
        /* 欄位改兩欄 */
        section.about > .aboutContainer > .container > .content > .col-4,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-4 {
          width: 50%;
          padding: 30px 10px !important;
        }
        /* 若仍需原先的排序規則，保留 */
        section.about > .aboutContainer > .container > .content > .col-4:first-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-4:first-child {
          order: 2;
        }
        section.about > .aboutContainer > .container > .content > .col-4:last-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-4:last-child {
          order: 1;
        }
        section.about > .aboutContainer > .container > .content > .videoTitle {
          font-size: 30px;
          margin-bottom: 24px;
        }
      }

      /* ====== Mobile：<=767（保留並擴充） ====== */
      @media all and (max-width: 767px) {
        /* 欄位改一欄 */
        section.about > .aboutContainer > .container > .content > .col-4,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-4 {
          width: 100%;
          padding: 20px 0 !important;
        }
        /* 保留原排序 */
        section.about > .aboutContainer > .container > .content > .col-4:first-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-4:first-child {
          order: 2;
        }
        section.about > .aboutContainer > .container > .content > .col-4:last-child,
        section.about > .aboutContainer > .container > .content > .videoRow > .col-4:last-child {
          order: 1;
        }
        section.about > .aboutContainer > .container > .content > .videoTitle {
          font-size: 28px;
          margin-bottom: 18px;
        }
      }



section.about.a2 {
  background-color: #fafafa;
  padding: 50px 0px;}
  @media all and (max-width: 767px) {
    section.about.a2 {
      padding: 0px; 
      margin: 0px}}
  section.about.a2 > .aboutContainer {
    margin: 0px auto; }
    section.about.a2 > .aboutContainer > .container > .content {
      height: 100%; }
      section.about.a2 > .aboutContainer > .container > .content > .col-12 {
        width: 100%;
        font-size: 20px;
        letter-spacing: .5px;
        line-height: 30px;
        text-align: center; }
        @media all and (max-width: 767px) {
          section.about.a2 > .aboutContainer > .container > .content > .col-12 {
            text-align: left; } }
        section.about.a2 > .aboutContainer > .container > .content > .col-12 > h2 {
          margin: 0px auto 20px; }
          @media all and (max-width: 767px) {
            section.about.a2 > .aboutContainer > .container > .content > .col-12 > h2 {
              line-height: 1.4em;
              font-size: 1.3em; } }
        section.about.a2 > .aboutContainer > .container > .content > .col-12 > .subtitle {
          font-size: 16px; }
        section.about.a2 > .aboutContainer > .container > .content > .col-12 > .content {
          font-size: 16px; }
    section.about.a2 > .aboutContainer > .container > .productContainer {
      margin-top: 50px; }
      section.about.a2 > .aboutContainer > .container > .productContainer > .prev {
        width: 25px;
        position: absolute;
        top: auto;
        left: -30px;
        right: auto;
        bottom: 55%;
        z-index: 1; }
        @media all and (min-width: 768px) and (max-width: 1024px) {
          section.about.a2 > .aboutContainer > .container > .productContainer > .prev {
            left: -5px; } }
        @media all and (max-width: 767px) {
          section.about.a2 > .aboutContainer > .container > .productContainer > .prev {
            left: -5px; } }
      section.about.a2 > .aboutContainer > .container > .productContainer > .next {
        width: 25px;
        position: absolute;
        top: auto;
        right: -30px;
        left: auto;
        bottom: 55%;
        z-index: 1; }
        @media all and (min-width: 768px) and (max-width: 1024px) {
          section.about.a2 > .aboutContainer > .container > .productContainer > .next {
            right: -5px; } }
        @media all and (max-width: 767px) {
          section.about.a2 > .aboutContainer > .container > .productContainer > .next {
            right: -5px; } }
      section.about.a2 > .aboutContainer > .container > .productContainer ul.slick-dots {
        list-style: none;
        margin: 20px 0 0px;
        padding: 0;
        display: flex;
        justify-content: center; }
        section.about.a2 > .aboutContainer > .container > .productContainer ul.slick-dots > li {
          margin: 0px 5px; }
          section.about.a2 > .aboutContainer > .container > .productContainer ul.slick-dots > li:hover > button, section.about.a2 > .aboutContainer > .container > .productContainer ul.slick-dots > li.slick-active > button {
            background-color: #e80113; }
          section.about.a2 > .aboutContainer > .container > .productContainer ul.slick-dots > li > button {
            background-color: rgba(232, 1, 19, 0.2);
            border: none;
            border-radius: 10px;
            height: 10px;
            width: 10px;
            color: transparent;
            font-size: 0px;
            padding: 0; }
      section.about.a2 > .aboutContainer > .container > .productContainer .item {
        margin: 0px 10px !important;
        text-align: center; }
        section.about.a2 > .aboutContainer > .container > .productContainer .item > h5 {
          font-size: 18px;
          text-align: center;
          margin: 10px 0px;
          font-weight: 500; }
        section.about.a2 > .aboutContainer > .container > .productContainer .item > a {
          display: block; }
          section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .image {
            text-align: left; }
            section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .image .brand {
              background-color: #fff;
              display: inline-block;
              padding: 0px 10px;
              border: 1px solid #212020;
              border-radius: 5px;
              font-size: 14px;
              line-height: 20px;
              color: #212020;
              margin: 15px; }
          section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .content {
            background-color: #fefefe;
            padding: 20px; }
            section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .content > .engine {
              font-size: 13px;
              color: #999;
              letter-spacing: .5px;
              height: 30px; }
            section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .content > h5 {
              margin: 10px 0px;
              font-size: 20px;
              color: #212020; }
            section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .content > .inner {
              font-size: 15px;
              color: #212020;
              height: 46px; }
            section.about.a2 > .aboutContainer > .container > .productContainer .item > a > .content > .btn {
              background-color: #e80113;
              border: 1px solid #e80113;
              display: inline-block;
              padding: 10px 20px;
              margin-top: 20px;
              color: #fff;
              letter-spacing: .5px;
              border-radius: 5px; }
          section.about.a2 > .aboutContainer > .container > .productContainer .item > a:hover .btn {
            background-color: transparent;
            border: 1px solid #212020;
            color: #212020; }

section.about.a3 > .aboutContainer > .container > .content {
  font-size: 16px;
  letter-spacing: .5px;
  line-height: 30px; }

section.map > .container > .mapContainer {
  display: flex;
  align-items: center; }
  section.map > .container > .mapContainer.apm {
    display: block;
    padding-top: 50px; }
  @media all and (min-width: 768px) and (max-width: 1024px) {
    section.map > .container > .mapContainer {
      display: block; } }
  @media all and (max-width: 767px) {
    section.map > .container > .mapContainer {
      display: block; } }
  section.map > .container > .mapContainer > .col-6 {
    width: 60%; }
    @media all and (min-width: 768px) and (max-width: 1024px) {
      section.map > .container > .mapContainer > .col-6 {
        width: 100%; } }
    @media all and (max-width: 767px) {
      section.map > .container > .mapContainer > .col-6 {
        width: 100%; } }
  section.map > .container > .mapContainer > .col-4 {
    width: 40%; }
    @media all and (min-width: 768px) and (max-width: 1024px) {
      section.map > .container > .mapContainer > .col-4 {
        width: 100%; } }
    @media all and (max-width: 767px) {
      section.map > .container > .mapContainer > .col-4 {
        width: 100%; } }
    section.map > .container > .mapContainer > .col-4 > .eventInfo {
      background-color: #f2f2f2;
      padding: 30px;
      margin-left: 20px; }
      @media all and (min-width: 768px) and (max-width: 1024px) {
        section.map > .container > .mapContainer > .col-4 > .eventInfo {
          margin-left: 0px; } }
      @media all and (max-width: 767px) {
        section.map > .container > .mapContainer > .col-4 > .eventInfo {
          margin-left: 0px; } }
      section.map > .container > .mapContainer > .col-4 > .eventInfo > h3 {
        margin: 0px 0px 30px; }
      section.map > .container > .mapContainer > .col-4 > .eventInfo .eiItem {
        display: flex;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 20px;
        padding-bottom: 20px; }
        section.map > .container > .mapContainer > .col-4 > .eventInfo .eiItem > .title {
          width: 30%;
          font-weight: 500; }
        section.map > .container > .mapContainer > .col-4 > .eventInfo .eiItem > .content {
          width: 70%; }
        section.map > .container > .mapContainer > .col-4 > .eventInfo .eiItem:last-child {
          border-bottom: none;
          margin-bottom: 0px;
          padding-bottom: 0px; }
  section.map > .container > .mapContainer > .col-12 {
    max-width: 1200px;
    margin: auto; }
    section.map > .container > .mapContainer > .col-12 > .eventInfo.apm {
      padding: 30px 30px 30px;
      margin-left: 20px; }
      @media all and (min-width: 768px) and (max-width: 1024px) {
        section.map > .container > .mapContainer > .col-12 > .eventInfo.apm {
          margin-left: 0px; } }
      @media all and (max-width: 767px) {
        section.map > .container > .mapContainer > .col-12 > .eventInfo.apm {
          margin-left: 0px; } }
      section.map > .container > .mapContainer > .col-12 > .eventInfo.apm > h2 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin: 0px 0px 30px; }
      section.map > .container > .mapContainer > .col-12 > .eventInfo.apm .eiItem {
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 20px;
        padding-bottom: 20px; }
        @media all and (max-width: 767px) {
          section.map > .container > .mapContainer > .col-12 > .eventInfo.apm .eiItem {
            display: block; } }
        section.map > .container > .mapContainer > .col-12 > .eventInfo.apm .eiItem > .title {
          width: 30%;
          font-weight: 600; }
          @media all and (max-width: 767px) {
            section.map > .container > .mapContainer > .col-12 > .eventInfo.apm .eiItem > .title {
              width: 100%; } }
        section.map > .container > .mapContainer > .col-12 > .eventInfo.apm .eiItem > .content {
          width: 70%; }
          @media all and (max-width: 767px) {
            section.map > .container > .mapContainer > .col-12 > .eventInfo.apm .eiItem > .content {
              width: 100%; } }

section.contact {
  margin: 100px 0px 0px;
  background-color: #484848;
  color: #fff;
  padding: 50px 0px; }
  section.contact > .contactContainer > .container > h2 {
    text-align: center; }
    @media all and (max-width: 767px) {
      section.contact > .contactContainer > .container > h2 {
        font-size: 21px; } }
  section.contact > .contactContainer > .container > form {
    max-width: 750px;
    margin: auto; }
    section.contact > .contactContainer > .container > form > .row {
      display: block;
      max-width: 100%;
      width: auto;
      position: relative;
      overflow: hidden; }
      section.contact > .contactContainer > .container > form > .row.checkboxes {
        background-color: #fff;
        margin-bottom: 20px;
        padding: 20px 20px 0px;
        width: auto;
        color: #212020; }
      section.contact > .contactContainer > .container > form > .row.date {
        background-color: #fff;
        margin-bottom: 20px;
        padding: 20px 20px 20px;
        width: auto;
        color: #212020;
        display: flex; }
        @media all and (max-width: 767px) {
          section.contact > .contactContainer > .container > form > .row.date {
            display: block; } }
      section.contact > .contactContainer > .container > form > .row > .dateOptions {
        width: 50%; }
        @media all and (max-width: 767px) {
          section.contact > .contactContainer > .container > form > .row > .dateOptions {
            width: 100%; } }
        section.contact > .contactContainer > .container > form > .row > .dateOptions:first-child {
          margin-right: 10px; }
          @media all and (max-width: 767px) {
            section.contact > .contactContainer > .container > form > .row > .dateOptions:first-child {
              margin: 10px 0px 0px; } }
        section.contact > .contactContainer > .container > form > .row > .dateOptions:last-child {
          margin-left: 10px; }
          @media all and (max-width: 767px) {
            section.contact > .contactContainer > .container > form > .row > .dateOptions:last-child {
              margin: 10px 0px 0px; } }
        section.contact > .contactContainer > .container > form > .row > .dateOptions select[name=date] {
          width: 100%;
          font-size: 15px;
          border: none;
          border-radius: 0px;
          border-bottom: 1px solid #212020;
          padding: 3px 0px;
          margin-top: 10px; }
        section.contact > .contactContainer > .container > form > .row > .dateOptions select[name=time] {
          width: 100%;
          font-size: 15px;
          border: none;
          border-radius: 0px;
          border-bottom: 1px solid #212020;
          padding: 3px 0px;
          margin-top: 35px; }
      section.contact > .contactContainer > .container > form > .row > .cb {
        width: 32%;
        display: inline-block;
        margin-bottom: 20px; }
        @media all and (max-width: 767px) {
          section.contact > .contactContainer > .container > form > .row > .cb {
            display: block;
            width: 100%; } }
      section.contact > .contactContainer > .container > form > .row > label > input {
        font-size: 15px;
        padding: 10px 20px;
        color: #212020;
        letter-spacing: .5px;
        margin-bottom: 20px;
        box-sizing: border-box;
        width: 100%;
        border: none;
        border-radius: 0px;
        line-height: 30px; }
        @media all and (max-width: 767px) {
          section.contact > .contactContainer > .container > form > .row > label > input {
            width: 100%; } }
      section.contact > .contactContainer > .container > form > .row > label > textarea {
        box-sizing: border-box;
        width: 100%;
        border: none;
        border-radius: 0px;
        line-height: 30px;
        font-size: 15px;
        padding: 10px 20px;
        color: #212020;
        letter-spacing: .5px;
        margin-bottom: 20px; }
        @media all and (max-width: 767px) {
          section.contact > .contactContainer > .container > form > .row > label > textarea {
            width: 100%; } }
      section.contact > .contactContainer > .container > form > .row input[type=submit] {
        font-size: 18px;
        background-color: #e80113;
        padding: 10px 20px;
        color: #fff;
        border: 1px solid #e80113;
        border-radius: 5px;
        width: 100%; }
        section.contact > .contactContainer > .container > form > .row input[type=submit]:hover {
          border: 1px solid #fff;
          background-color: transparent; }
  section.contact > .contactContainer > .container > .status {
    text-align: center;
    margin-top: 50px;
    letter-spacing: .5px; }

footer {
  background-color: #000; }
  footer > .container {
    display: flex;
    align-items: center;
    padding: 30px 0px; }
    @media all and (min-width: 768px) and (max-width: 1024px) {
      footer > .container {
        display: grid; } }
    @media all and (max-width: 767px) {
      footer > .container {
        display: grid; } }
    footer > .container > .col-4 {
      width: calc(1/3*100%);
      color: #fff;
      font-size: 14px;
      letter-spacing: .5px; }
      footer > .container > .col-4 > .tagLine {
        display: none; }
        @media all and (max-width: 767px) {
          footer > .container > .col-4 > .tagLine {
            display: block;
            text-align: center; } }
      @media all and (min-width: 768px) and (max-width: 1024px) {
        footer > .container > .col-4 {
          width: auto;
          text-align: center; } }
      @media all and (max-width: 767px) {
        footer > .container > .col-4 {
          width: auto;
          text-align: center; } }
      @media all and (min-width: 768px) and (max-width: 1024px) {
        footer > .container > .col-4:first-child {
          order: 2;
          margin: 20px 0px 10px; } }
      @media all and (max-width: 767px) {
        footer > .container > .col-4:first-child {
          order: 2;
          margin: 20px 0px 10px; } }
      @media all and (min-width: 768px) and (max-width: 1024px) {
        footer > .container > .col-4:nth-child(2) {
          order: 1; } }
      @media all and (max-width: 767px) {
        footer > .container > .col-4:nth-child(2) {
          order: 1; } }
      @media all and (min-width: 768px) and (max-width: 1024px) {
        footer > .container > .col-4:last-child {
          order: 3; } }
      @media all and (max-width: 767px) {
        footer > .container > .col-4:last-child {
          order: 3; } }
      footer > .container > .col-4 > a {
        display: block;
        text-align: center; }
        footer > .container > .col-4 > a > img {
          width: 100%;
          max-width: 55px; }
          @media all and (min-width: 768px) and (max-width: 1024px) {
            footer > .container > .col-4 > a > img {
              max-width: 100px; } }
          @media all and (max-width: 767px) {
            footer > .container > .col-4 > a > img {
              max-width: 100px; } }
      footer > .container > .col-4 > .social a {
        margin-right: 15px; }
        footer > .container > .col-4 > .social a > svg {
          width: 25px;
          height: 25px; }
          footer > .container > .col-4 > .social a > svg > path {
            fill: rgba(255, 255, 255, 0.8); }
        footer > .container > .col-4 > .social a:hover > svg > path {
          fill: white; }
      footer > .container > .col-4:last-child {
        text-align: right; }
        @media all and (min-width: 768px) and (max-width: 1024px) {
          footer > .container > .col-4:last-child {
            text-align: center; } }
        @media all and (max-width: 767px) {
          footer > .container > .col-4:last-child {
            text-align: center; } }

.grecaptcha-badge {
  visibility: hidden; }

@keyframes a-ltr-after {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(101%); } }
@keyframes a-ltr-before {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(200%); } }

/*# sourceMappingURL=style.css.map */