Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div style="background-color: #bbb; height: 150vh;"></div>
 
  <article id="animation-13" class="mode typeF T1M1" data-gsap="animation-13">
      <section>
          <!-- 圖片背景灰色裝飾 滿版 -->
          <!-- 圖 -->
          <div class="full-bg cover">
              <div class="mode-inner">
                  <div class="mode-images">
                      <div class="mode-images-inner">
                          <img src="https://picsum.photos/1920/1200" alt="">
                      </div>
                  </div>
                  
              </div>
          </div>
          <!-- 文 -->
          <div class="mode-inner">
              <div class="mode-text">
                  <div class="mode-text-inner">
                      <div class="text-num-1">
                          <!-- 英文標題(橫式)-->
                          <p class="text-engName">
                              <span>
                                  Tokyo Tower
                              </span>
                          </p>
                          <!-- 中文標題 -->
                          <h2 class="text-twName-title">
                              <span>
                                  東京鐵塔
                              </span>
                          </h2>
                          <!-- 概括 -->
                          <p class="text-twName-summary">
                              <span>
                                  東京鐵塔是位於日本東京都的知名景點。
                              </span>
                          </p>
                      </div>
                      <div class="text-num-2">
                          <!-- 內文 -->
                          <p class="text-content">
                              <span>
                                  獨特的地理構造使其形成了曠世奇絕的自然景觀;它以彩池、雪山、峽谷、森林「四絕」著稱於世。壯觀的地表鈣華流蜿蜒於原始林海,酷似一條金色巨龍,騰遊天地,故名黃龍。黃龍風景區的數千個鈣華彩池形態各異,流光泛彩,長達2500公尺的鈣華流是世界之最。(0/130)
                              </span>
                          </p>
                          <!-- 圖片出處 -->
                          <p class="text-images-source">
                              IG帳號 @AB12345 授權提供
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </section>
  </article>

  <div style="background-color: #bbb; height: 150vh;"></div>
              
            
!

CSS

              
                /* ======= 基礎設定 ======= */
    /* 共用 ----------------------------------------*/
    /* 外層滿版 */
    .mode {
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 70px 0px;
    }
    /* 內層 斷點991以上 寬度1200px */
    .mode .mode-inner {
        max-width: 1200px;
        position: relative;
        display: flex;
        margin: auto;
        z-index: 1;
    }
    /* 群組模組(2個小模組拼一個群組) */
    .mode-group .mode + .mode {
        padding-top: 0px;
    }
    /* 圖片 ----------------------------------------*/
    /* 圖片基礎設定 */
    .mode .mode-images,
    .mode .mode-images-inner {
        position: relative;
    }
    .mode img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    /* 裝飾小圖 */
    .images-decorate {
        position: relative;
    }
    .images-decorate:after {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        right: 0;
        bottom: -35px;
    }
    .reverse .images-decorate:after ,
    .inner .images-decorate:after  {
        left: 0;
    }
    /* 翻動+旋轉卡片 */
    .flap-card-list {
        position: relative;
    }
    .flap-card {
        position: absolute;
        width: 100%;
        height: auto;
    }
    .flap-card-list > .flap-card:nth-child(1) {
        z-index: 2;
    }
    .flap-card-list > .flap-card:nth-child(2) {
        z-index: 3;
    }
    .flap-card-list > .flap-card:nth-child(3) {
        z-index: 4;
    }
    @media screen and (max-width: 991px) {
        .mode.flapCard .mode-images-inner {
            min-height: 65vw;
        }
    }
    /* 背景灰色裝飾 滿版 */
    .full-bg {
        position: relative;
    }
    .full-bg:after {
        content: "";
        position: absolute;
        background-color: #F0F0F0;
        width: 100%;
        height: 50%;
        bottom: 0;
    }
    /* 背景線框裝飾 */
    .border-bg:before {
        content: "";
        position: absolute;
        border: 1px solid #333;
        width: 100%;
        height: calc(100% - 80px);
        top: 40px;
    }
    .reverse .border-bg:before {
        left: initial;
    }
    /* 圖片背景灰色裝飾 */
    .images-bg {
        position: relative;
        z-index: 1;
    }
    .images-bg:before {
        content: "";
        position: absolute;
        background-color: #F0F0F0;
        width: 100%;
        height: 100%;
        right: -20px;
        bottom: -20px;
        z-index: -1;
    }
    .reverse .images-bg:before {
        left: -20px;
    }
    /* 背景黑色半透明遮罩 */
    .images-cover-bg:after {
        content: '';
        background-color: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* iframe影片RWD設定 ----------------------------------------*/
    .video {
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        padding-bottom: 56.25%;
    }
    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 0;
    }

    /* 文字 ----------------------------------------*/
    /* 文字壓在圖上 */
    .text-on-banner {
        position: absolute;
        right: 0px;
        bottom: 35px;
        background-color: #fff;
        width: 40%;
        padding: 15px 30px;
    }
    /* 英文直式裝飾字 */
    .text-engName-column {
        font-size: 17px;
        color: #ddd;
        writing-mode: vertical-lr;
        text-orientation: mixed;
        margin: 0px;
        padding: 0px 15px;
        font-family: Palatino,serif;
    }
    .text-engName-column span:after {
        content: "";
        width: 1px;
        height: 80px;
        margin-top: 10px;
        background-color: #ddd;
        display: inline-block;
    }
    /* 英文橫式裝飾字 */
    .text-engName {
        font-weight: bold;
        font-size: 65px;
        letter-spacing: 0.4px;
        color: #ddd;
        margin: 20px 0px;
        font-family: Palatino,serif;
        line-height: normal;
    }
    /* 中文大標題 */
    .text-twName-title {
        font-weight: bold;
        font-size: 32px;
        line-height: normal;
        letter-spacing: 0.4px;
        color: #333;
        margin: 20px 0px;
    }
    .text-twName-title.bigger {
        font-size: 45px;
    }
    /* 中文小標題 */
    .text-twName-subtitle {
        font-weight: bold;
        font-size: 25px;
        letter-spacing: 0.2px;
        color: #333;
        margin: 15px 0px;
    }
    .text-twName-subtitle.bigger {
        font-size: 32px;
    }
    /* 標題強調 裝飾線*/
    .text-highlight {
        display: inline-block;
        position: relative;
    }
    .text-highlight span::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: -2;
    }
    .text-highlight span::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0.5em;
        top: 0.8em;
        left: 0;
        background-color: #F0F0F0;
        z-index: -1;
    }
    /* 中文概括 */
    .text-twName-summary {
        font-weight: bold;
        font-size: 17px;
        letter-spacing: 0.4px;
        color: #333;
        margin: 20px 0px;
    }
    /* 中文小標記*/
    .text-twName-mark {
        color: #fff;
        font-size: 17px;
        margin: 20px 0px;
    }
    .text-twName-mark span {
        padding: 5px 10px;
        background-color: #ccc;
    }
    /* 中文內文 */
    .text-content {
        font-size: 16px;
        letter-spacing: 0.4px;
        color: #333;
        line-height: 2.2;
        margin: 15px 0px;
    }
    .text-content + .text-content {
        margin-top: 0;
    }
    /* 圖片出處 */
    .text-images-source {
        font-size: 12px;
        letter-spacing: 0.4px;
        color: #888;
        margin: 10px 0px;
        font-weight: 300;
    }

    /* ======= 各組的排版 ======= */
    /* typeA 和 typeAS ----------------------------------------*/
    .typeA.iframe .mode-inner {
        max-width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }
    .typeA.iframe .mode-text .mode-text-inner {
        padding: 0px 5%;
    }
    .typeA.iframe.reverse .mode-text .mode-text-inner {
        padding: 0px 5%;
    }
    .typeA .mode-inner,
    .typeAS .mode-inner {
        flex-direction: row-reverse;
    }
    .typeA .mode-text.mode-images {
        display: flex;
        width: 100%;
        align-items: center;
    }
    .typeAS .mode-text.mode-images {
        display: flex;
        width: 100%;
    }
    .typeA .mode-text .mode-text-inner,
    .typeA .mode-images .mode-images-inner,
    .typeAS .mode-text .mode-text-inner,
    .typeAS .mode-images .mode-images-inner {
        width: 50%;
    }
    .typeA .mode-text .mode-text-inner,
    .typeAS .mode-text .mode-text-inner {
        padding: 0 60px 0 0;
    }
    .typeA .text-engName-column,
    .typeAS .text-engName-column {
        padding: 0 0 0 30px;
    }
    .typeA .images-decorate:after,
    .typeAS .images-decorate:after {
        width: 150px;
        height: 50px;
        background-image: url(../public/images/mode/decorate-images-3.svg);
        right: -10px;
    }
    /* typeA 線框版本 ----------------------------------------*/
    .typeA .border-bg .mode-text .mode-text-inner.full-bg {
        width: 40%;
        padding: 0 5%;
        z-index: 1;
    }
    .typeA .border-bg .mode-images .mode-images-inner {
        left: -25px;
        width: calc(60% - 30px);
        z-index: 2;
    }
    .typeA .border-bg .mode-text.mode-images {
        align-items: initial;
    }
    .typeA .border-bg .full-bg:after {
        width: calc(100% + 40px);
        left: -40px;
        z-index: -1;
    }
    .typeA.reverse .border-bg .full-bg:after {
        left: initial;
        width: calc(100% + 40px);
        right: -40px;
        z-index: -1;
    }
    .typeA .border-bg .mode-images .mode-images-inner img {
        min-height: 420px;
    }
    /* typeA reverse 和 typeAS reverse ----------------------------------------*/
    .typeA.reverse .border-bg .mode-images .mode-images-inner {
        left: 20px;
    }
    .typeA.reverse .mode-inner,
    .typeAS.reverse .mode-inner {
        flex-direction: row;
    }
    .typeA.reverse .mode-text.mode-images,
    .typeAS.reverse .mode-text.mode-images {
        flex-direction: row-reverse;
    }
    .typeA.reverse .mode-text .mode-text-inner,
    .typeAS.reverse .mode-text .mode-text-inner  {
        padding: 0 0 0 60px;
    }
    .typeA.reverse .text-engName-column,
    .typeAS.reverse .text-engName-column {
        padding: 0 30px 0 0;
    }
    .typeA.reverse .images-decorate:after,
    .typeAS.reverse .images-decorate:after {
        width: 150px;
        height: 50px;
        background-image: url(../public/images/mode/decorate-images-4.svg);
        left: -10px;
    }
    /* typeA T1M1 number ----------------------------------------*/
    .typeA.T1M1.number .mode-text.mode-images {
        align-items: flex-start;
    }
    .typeA.T1M1.number .mode-text-inner {
        display: flex;
    }
    .typeA.T1M1.number .mode-text-number .text-engName {
        font-size: 32px;
        text-align: center;
        margin-right: 60px;
    }
    .typeA.T1M1.number .mode-text-number .text-engName span:nth-of-type(2) {
        font-size: 65px;
    }
    /* typeA T1M2 ----------------------------------------*/
    .typeA.T1M2 .mode-images .mode-images-inner {
        width: 25%;
    }
    .typeA.T1M2 .mode-images .mode-images-inner:nth-of-type(3) {
        margin-top: 50px;
        margin-left: 50px;
    }
    /* typeA T1M3 ----------------------------------------*/
    .typeA.T1M3 .mode-text .mode-text-inner,
    .typeA.T1M3 .mode-images .mode-images-inner {
        width: 100%;
    }
    .typeA.T1M3 .mode-text .mode-text-inner {
        padding: 0;
    }
    .typeA.T1M3 .mode-images {
        display: flex;
        width: 100%;
        align-items: flex-end;
    }
    .typeA.T1M3 .mode-inner {
        flex-direction: column;
        max-width: 100%;
    }
    .typeA.T1M3 .mode-images .images-num-1.mode-images-inner {
        width: 30%;
    }
    .typeA.T1M3 .mode-images .images-num-1.mode-images-inner img {
        min-height: 600px;
    }
    .typeA.T1M3 .mode-images .images-num-2.mode-images-inner {
        width: 25%;
        margin-top: 25%;
    }
    .typeA.T1M3 .mode-images .images-num-2.mode-images-inner img {
        min-height: 400px;
    }
    .typeA.T1M3 .mode-images .images-num-3.mode-images-inner {
        width: 30%;
        margin-left: 25%;
        margin-top: 80px;
    }
    .typeA.T1M3 .mode-images.mode-text .mode-text-inner {
        width: 40%;
        padding: 0px 60px;
    }
    .typeA.T1M3 .mode-images.mode-text .mode-text-inner .text-num-1 {
        text-align: center;
    }
    /* typeA T1M3 reverse ----------------------------------------*/
    .typeA.T1M3.reverse .mode-inner {
        flex-direction: column;
        max-width: 100%;
    }
    .typeA.T1M3.reverse .mode-images .images-num-3.mode-images-inner {
        margin-right: 25%;
        margin-left: auto;
    }
    /* typeA column ----------------------------------------*/
    .typeA.column .mode-inner {
        flex-direction: row;
    }
    .typeA.column .mode-inner > div {
        display: flex;
        flex-direction: row;
        margin-right: 30px;
        flex: 1;
    }
    .typeA.column .mode-inner > div:last-of-type {
        margin-right: 0;
    }
    .typeA.column .mode-inner > div:nth-of-type(2) {
        margin-top: 100px;
    }
    .typeA.column .mode-inner > div:nth-of-type(3) {
        margin-top: 200px;
    }
    .typeA.column .mode-text.mode-images {
        flex-direction: column;
    }
    .typeA.column .mode-text .mode-text-inner,
    .typeA.column .mode-images .mode-images-inner {
        width: 100%;
    }
    .typeA.column .mode-images .mode-images-inner {
        margin-bottom: 15px;
    }
    .typeA.column .mode-text .mode-text-inner {
        padding: 0;
    }
    .typeA.column .text-engName-column {
        padding: 0 15px 0 0;
    }
    .typeA.column .mode-inner > div:nth-of-type(1) .images-decorate:after {
        background-image: url(../public/images/mode/decorate-images-5.svg);
    }
    .typeA.column .mode-inner > div:nth-of-type(2) .images-decorate:after {
        background-image: url(../public/images/mode/decorate-images-6.svg);
    }
    /* typeA T1M2 column ----------------------------------------*/
    .typeA.T1M2.column .mode-text.mode-images > div {
        display: flex;
    }
    .typeA.T1M2.column .mode-images > div .mode-images-inner:nth-of-type(1) {
        margin-right: 30px;
    }
    .typeA.T1M2.column .mode-images > div .mode-images-inner:nth-of-type(2) {
        margin-top: 50px;
    }
    /* typeA T3M3 column ----------------------------------------*/
    .typeA.T3M3.column .mode-text-inner-number .text-engName {
        position: absolute;
        text-align: center;
        top: 0px;
        font-size: 65px;
        background-color: #ddd;
        width: 50px;
        margin: 0;
        color: #fff;
    }
    .typeA.T3M3.column .mode-text-inner-number .text-engName span {
        display: block;
    }
    .typeA.T3M3.column .mode-images .mode-images-inner img {
        min-height: 300px;
    }
    /* typeAP ----------------------------------------*/
    .mode.typeAP.T1M1 {
        padding: 0;
    } 
    .typeAP.T1M1 .mode-inner {
        max-width: 100%;
        min-width: 1200px;
        height: 100vh;
        padding: 0;
    }
    .typeAP.T1M1 .mode-inner .mode-text{
        flex: 1;
        position: relative;
        overflow: hidden;
    }
    .typeAP.T1M1 .mode-inner .mode-images {
        flex: 1;
        position: relative;
        overflow: hidden;
    }
    .typeAP.T1M1 .mode-inner .mode-text .mode-text-inner {
        background-color: #fff; /* 基本底色預設白色 */
        padding: 0px 10%;
    }
    .typeAP.T1M1 .mode-inner .mode-text .mode-text-inner,
    .typeAP.T1M1 .mode-inner .mode-images .mode-images-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    /* 卡片換底色 寫法示範*/
    /* .typeAP.T1M1 .mode-inner .mode-text .mode-text-inner:nth-of-type(1),
    .typeAP.T1M1 .mode-inner .mode-images .mode-images-inner:nth-of-type(1) {
        background-color: rgb(255, 252, 222);
    }
    .typeAP.T1M1 .mode-inner .mode-text .mode-text-inner:nth-of-type(2),
    .typeAP.T1M1 .mode-inner .mode-images .mode-images-inner:nth-of-type(2) {
        background-color: rgb(238, 255, 222);
    }
    .typeAP.T1M1 .mode-inner .mode-text .mode-text-inner:nth-of-type(3),
    .typeAP.T1M1 .mode-inner .mode-images .mode-images-inner:nth-of-type(3) {
        background-color: rgb(222, 241, 255);
    } */
    /* typeF ----------------------------------------*/
    .mode.typeF .mode-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .typeF .full-bg .mode-images {
        width: 60%;
    }
    .typeF .mode-text {
        width: 60%;
    }
    .typeF .mode-text .mode-text-inner .text-num-1 {
        padding: 20px 40px;
    }
    .typeF .mode-text .mode-text-inner .text-num-1 .text-engName,
    .typeF .mode-text .mode-text-inner .text-num-1 .text-twName-title,
    .typeF .mode-text .mode-text-inner .text-num-1 .text-twName-summary {
        text-align: center;
    }
    /* typeF inner ----------------------------------------*/
    .typeF.inner .mode-text {
        width: calc(40% + 50px);
    }
    .typeF.inner .full-bg .mode-text {
        width: 100%;
        padding: 0;
    }
    .typeF.inner .full-bg .mode-inner {
        align-items: flex-start;
    }
    .typeF .images-decorate:after {
        width: 150px;
        height: 50px;
        background-image: url(../public/images/mode/decorate-images-4.svg);
        left: -10px;
    }
    /* typeF T1M3 ----------------------------------------*/
    .typeF.T1M3 .mode-inner {
        display: block;
        max-width: 100%;
    }
    .typeF.T1M3 .text-num-1 .mode-text-inner {
        width: 60%;
    }
    .typeF.T1M3 .text-num-1 {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    .typeF.T1M3 .images-num-1 {
        width: 100%;
        max-width: 1200px;
        margin: auto;
        z-index: 1;
    }
    .typeF.T1M3 .images-num-1 img {
        max-height: 600px;
    }
    .typeF.T1M3 .images-num-2 {
        position: absolute;
        width: 26vw;
        z-index: 2;
        left: 0;
        bottom: 60px;
    }
    .typeF.T1M3 .images-num-1 .mode-images-inner:after,
    .typeF.T1M3 .images-num-2 .mode-images-inner:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(4deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
        top: -30px;
        left: 30px;
        z-index: -1;
    }
    .typeF.T1M3 .images-num-3 {
        position: absolute;
        width: 35vw;
        right: 0;
        top: 0;
    }
    .typeF.T1M3 .text-num-2 {
        position: absolute;
        right: 5%;
        bottom: 0;
        z-index: 2;
        width: 100%;
    }
    .typeF.T1M3 .text-num-2 .text-on-banner {
        width: 30%;
    }
    /* typeF T1M5 ----------------------------------------*/
    .typeF.T1M5 .mode-inner {
        position: relative;
        display: block;
        z-index: 1;
        max-width: 100%;
    }
    .typeF.T1M5 .bg-images img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .typeF.T1M5 .bg-images::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        opacity: 0.8;
    }
    .typeF.T1M5 .bg-images:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
    }
    .typeF.T1M5 .text-num-1 {
        width: 38vw;
        max-width: 1200px;
        margin: 0 0 0 13vw;
    }
    .typeF.T1M5 .text-num-2 {
        position: relative;
        left: 50%;
        width: 32vw;
        z-index: 5;
        margin-top: 12%;
        min-height: 400px;
    }
    .typeF.T1M5 .images-num-1 .mode-images-inner:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
        bottom: -30px;
        left: -30px;
        z-index: -1;
    }
    .typeF.T1M5 .images-num-4 .mode-images-inner:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(4deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
        top: -30px;
        left: -30px;
        z-index: -1;
    }
    .typeF.T1M5 .images-num-1 {
        position: relative;
        top: 27%;
        left: 13%;
        width: 32vw;
        z-index: 5;
        height: 0;
    }
    .typeF.T1M5 .mode-images.images-num-1 img {
        min-height: 30vw;
    }
    .typeF.T1M5 .images-num-2 {
        position: absolute;
        top: 50%;
        left: 0%;
        width: 32vw;
        z-index: 4;
    }
    .typeF.T1M5 .images-num-3 {
        position: absolute;
        top: 0%;
        left: 54%;
        width: 23vw;
        height: auto;
        z-index: 5;
    }
    .typeF.T1M5 .images-num-4 {
        position: absolute;
        top: 10%;
        left: 74%;
        width: 21.5vw;
        height: auto;
        z-index: 5;
    }
    /* typeFR ----------------------------------------*/
    .mode.typeFR .mode-images .mode-images-inner img {
        height: 600px;
        border-radius: 0;
    }
    /* typeR T1M3 ----------------------------------------*/
    .typeR.T1M3 .mode-images,
    .typeR.T1M3 .mode-text {
        width: 50%;
    }
    .typeR.T1M3 .mode-text .mode-text-inner {
        padding: 0 40px 0 0;
    }
    /* typeR T1M5 ----------------------------------------*/
    .typeR.T1M5 .mode-text {
        text-align: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }
    .typeR.T1M5 .text-twName-title {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        -webkit-background-clip:text;
        background-clip:text;
        color: transparent;
    }
    .typeR.T1M5 .text-twName-title span {
        display: block;
    }
    .typeR.T1M5 img {
        max-height: 600px;
    }
    /* typeB T1M1  ----------------------------------------*/
    .typeB.T1M1 .img-parallax {
        width: 100vmax;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        pointer-events: none
    }
    .typeB.T1M1 .mode-text {
        position: absolute;
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 1200px;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 15px;
    }
    .typeB.T1M1.reverse .mode-text-inner {
        text-align: right;
    }
    .typeB.T1M1 .text-twName-title,
    .typeB.T1M1 .text-twName-subtitle,
    .typeB.T1M1 .text-images-source {
        color: #fff;
    }
    .typeB.T1M1 .text-images-source {
        position: absolute;
        bottom: 15px;
        right: 0;
    }
    .typeB.T1M1.reverse .text-images-source {
        right: initial;
        left: 0;
    }
    .typeB.T1M1 .mode-images-inner {
        width: 100%;
        height: 100%;
        min-height: 400px;
        position: relative;
        overflow: hidden;
    }
    /* typeFC T6M6 ----------------------------------------*/
    .typeFC.T6M6 .mode-text {
        text-align: center;
        padding: 0 15px;
        width: 100%;
        max-width: 1200px;
        margin: auto;
    }
    /* typeG ----------------------------------------* */
    .mode.typeG {
        padding: 0;
    }
    .typeG .award {
        position: relative;
        z-index: 1;
        top: 80px;
        overflow: hidden;
    }
    .typeG .award-text {
        display: block;
        margin: auto;
        animation: text-rotate 15s linear infinite;
    }
    .typeG .award-text-circle {
        font-size: 12px;
        fill: rgba(0, 0, 0, 0.45);
        font-family: 'Palatino';
    }
    .typeG .award-logo-images {
        width: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .typeG .award-bg-images {
        position: relative;
    }
    .typeG .award-bg-images img {
        min-height: 200px;
    }
    .typeG .award-bg-images .mode-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 1200px;
        padding: 0 20px;
        text-align: center;
    }
    .typeG .award-bg-images .text-twName-title {
        color: #fff;
    }
    @keyframes text-rotate {
        0% {
            transform:rotate(0deg);
        }
        100% {
            transform:rotate(360deg);
        }
    }
    /* typeT T2 ----------------------------------------*/
    .typeT.T2 .text-engName {
        font-size: 12px;
        margin: 0;
    }
    .typeT.T2 .text-twName-title {
        font-style: italic;
    }
    .typeT.T2 .text-engName span:before {
        margin-right: 10px;
    }
    .typeT.T2 .text-engName span:after {
        margin-left: 10px;
    }
    .typeT.T2 .text-engName span:before,
    .typeT.T2 .text-engName span:after {
        content: "";
        display: inline-block;
        width: 40px;
        height: 1px;
        background-color: #ccc;
        vertical-align: middle;
    }
    .typeT.T2.left .text-engName span:before {
        content: none;
    }
    .typeT.T2.right .text-engName span:before {
        content: none;
    }
    .typeT.T2 .mode-text {
        text-align: center;
        width: 100%;
    }
    .typeT.T2.left .mode-text {
        text-align: left;
    }
    .typeT.T2.right .mode-text {
        text-align: right;
    }
    /* typeT T1M1 ----------------------------------------*/
    .mode.typeT.T1M1 {
        padding: 35px 0px;
    }
    .typeT.T1M1 .mode-text {
        text-align: center;
        margin: auto;
    }
    .typeT.T1M1 .text-twName-title {
        margin: 0;
    }
    .typeT.T1M1 .text-engName {
        margin: 0;
        font-size: 20px;
        font-weight: normal;
        color: #888;
    }
    .title-icon-images img {
        /* width: 80px;
        height: 76px; */
        width: 60px;
        height: auto;
    }
    .typeT.T1M1 .mode-text {
        overflow: hidden;
        width: 100%;
    }
    .typeT.T1M1 .mode-text-inner {
        position: relative;
        display: inline-block;
    }
    .typeT.T1M1 .mode-text-inner:before {
        right: 100%;
    }
    .typeT.T1M1 .mode-text-inner:after {
        left: 100%;
    }
    .typeT.T1M1 .mode-text-inner:before,
    .typeT.T1M1 .mode-text-inner:after {
        content: '';
        position: absolute;
        top: 62%;
        height: 1px;
        width: 100vw;
        margin: 0 15px;
        background-color: #f0f0f0;
    }
    /* typeL M6 ----------------------------------------*/
    .typeL.M6 img {
        width: 16%;
    }

    /* max-width 斷點 */
    @media screen and (max-width: 1440px) {
        /* ======= 各組的排版 ======= */
        /* typeA T1M3 ----------------------------------------*/
        .typeA.T1M3 .mode-images .images-num-1.mode-images-inner img {
            min-height: 500px;
        }
        .typeA.T1M3 .mode-images .images-num-2.mode-images-inner img {
            min-height: 300px;
        }
        .typeA.T1M3 .mode-images .images-num-3.mode-images-inner {
            width: 35%;
        }
    }

    @media screen and (max-width: 1399px) {
        /* ======= 基礎設定和共用 ======= */
        /* 共用 ----------------------------------------*/
        .mode .mode-inner {
            padding: 0px 20px;
        }
        .border-bg:before {
            width: calc(100% - 30px);
            margin: 0 auto;
        }
        .reverse .border-bg:before {
            width: calc(100% - 30px);
            margin: 0 auto;
        }


        /* ======= 各組的排版 ======= */
        /* typeA 和 typeAS ----------------------------------------*/
        .typeA .border-bg .full-bg:after {
            width: calc(100% + 20px);
            left: -20px;
        }
        .typeA.reverse .border-bg .full-bg:after {
            width: calc(100% + 20px);
            left: inherit;
            right: -20px;
        }
        /* typeAP ----------------------------------------*/
        /* .typeAP.T1M1 .mode-inner .mode-text {
            padding: 0px 60px 0px 0px;
        } */
        /* typeF T1M3 ----------------------------------------*/
        .typeF.T1M3 .images-num-1 .mode-images-inner:after,
        .typeF.T1M3 .images-num-2 .mode-images-inner:after {
            top: -15px;
            left: 15px;
        }
        /* typeF T1M5 ----------------------------------------*/
        .typeF.T1M5 .images-num-1 .mode-images-inner:after {
            bottom: -15px;
            left: -15px;
        }
        .typeF.T1M5 .images-num-4 .mode-images-inner:after {
            top: -15px;
            left: -15px;
        }
        /* typeB T1M1 ----------------------------------------*/
        .typeB.T1M1 .mode-text {
            padding: 15px 30px;
        }
        .typeB.T1M1 .text-images-source {
            right: 30px;
        }
        .typeB.T1M1.reverse .text-images-source {
            left: 30px;
        }
    }

    @media screen and (max-width: 991px) {
        /* ======= 基礎設定和共用 ======= */
        /* 圖片 ----------------------------------------*/
        /* 裝飾小圖 */
        .images-decorate:after {
            bottom: -10px;
        }
        /* 背景灰色裝飾 滿版 */
        .full-bg:after {
            height: 30%;
        }
        /* 背景線框裝飾 */
        .border-bg {
            overflow: hidden;
        }
        .border-bg:before {
            left: -1px;
            width: 90%;
            top: 32px;
        }
        .reverse .border-bg:before {
            left: initial;
            right: -1px;
            width: 90%;
        }
        /* 圖片背景灰色裝飾 */
        .images-bg:before {
            display: none;
        }
        
        /* 文字 ----------------------------------------*/
        /* 文字壓在圖上 */
        .text-on-banner {
            width: 100%;
            position: inherit;
            padding: 0;
            bottom: 0;
        }

        /* ======= 各組的排版 ======= */
        /* typeA 和 typeAS ----------------------------------------*/
        .typeA.iframe .mode-inner,
        .typeA .mode-inner,
        .typeAS .mode-inner {
            padding: 0 0 0 20px;
        }
        .typeA.reverse .mode-inner,
        .typeAS.reverse .mode-inner {
            padding: 0 20px 0 0;
        }
        .typeA .mode-text .mode-text-inner,
        .typeAS .mode-text .mode-text-inner {
            padding-right: 20px;
        }
        .typeA.reverse .mode-text .mode-text-inner,
        .typeAS.reverse .mode-text .mode-text-inner {
            padding-left: 20px;
        }
        .typeA .mode-text.mode-images,
        .typeA.reverse .mode-text.mode-images,
        .typeAS .mode-text.mode-images,
        .typeAS.reverse .mode-text.mode-images {
            flex-wrap: wrap-reverse;
            align-items: initial;
        }
        .typeA .mode-inner,
        .typeAS .mode-inner {
            flex-direction: row;
        }
        .typeA.reverse .mode-inner,
        .typeAS.reverse .mode-inner {
            flex-direction: row-reverse;
        }
        .typeA .mode-text .mode-text-inner,
        .typeA.reverse .mode-text .mode-text-inner,
        .typeA .mode-images .mode-images-inner,
        .typeAS .mode-images .mode-images-inner  {
            width: 100%;
            flex-direction: column;
        }
        .typeAS .mode-text .mode-text-inner,
        .typeAS.reverse .mode-text .mode-text-inner {
            width: 100%;
        }
        .typeA .text-engName-column,
        .typeAS .text-engName-column {
            padding: 0;
            position: relative;
            left: -6px;
        }
        .typeA.reverse .text-engName-column,
        .typeAS.reverse .text-engName-column {
            padding: 0;
            position: relative;
            left: initial;
            right: -6px;
        }
        .typeA .images-decorate:after,
        .typeAS .images-decorate:after {
            right: 0;
            width: 90px;
            height: 30px;
        }
        .typeA.reverse .images-decorate:after,
        .typeAS.reverse .images-decorate:after {
            left: 0;
            width: 90px;
            height: 30px;
        }
        /* typeA T1M1 number ----------------------------------------*/
        .typeA.T1M1.number .mode-inner {
            margin-right: 0;
            margin-left: 15%;
        }
        .typeA.T1M1.number.reverse .mode-inner {
            margin-left: 0;
            margin-right: 15%;
        }
        .typeA.T1M1.number:after {
            content: '';
            position: absolute;
            width: 30%;
            height: 80%;
            bottom: 0;
            left: 0;
            background-color: #f0f0f0;
        }
        .typeA.T1M1.number.reverse:after {
            left: initial;
            right: 0;
        }
        .typeA.T1M1.number .mode-text-number .text-engName {
            font-size: 42px;
            margin: 20px 0px 0px;
            text-align: left;
        }
        .typeA.T1M1.number .mode-text-number .text-engName span:nth-of-type(2) {
            font-size: 42px;
        }
        /* typeA 線框版本 ----------------------------------------*/
        .typeA .border-bg .mode-text .mode-text-inner.full-bg {
            padding: 0;
            width: 100%;
        }
        .typeA .border-bg .mode-images .mode-images-inner {
            padding: 0;
            width: 100%;
        }
        .typeA .border-bg .full-bg:after,
        .typeA.reverse .border-bg .full-bg:after {
            height: 50%;
        }
        .typeA.reverse .border-bg .mode-text .mode-text-inner {
            text-align: right;
        }
        .typeA .border-bg .mode-images .mode-images-inner {
            width: 100%;
            left: 0px;
        }
        .typeA .border-bg .mode-text.mode-images {
            flex-direction: column;
        }
        .typeA .border-bg .mode-images .mode-images-inner img {
            min-height: 320px;
        }
        /* typeA T1M2 ----------------------------------------*/
        .typeA.T1M2 .mode-images .mode-images-inner {
            width: 47%;
        }
        .typeA.T1M2 .mode-images .mode-images-inner:nth-of-type(3) {
            margin-top: 30px;
            margin-left: 20px;
            margin-bottom: 15px;
        }
        /* typeA T1M3 ----------------------------------------*/
        .typeA.T1M3 .mode-inner {
            padding: 0;
        }
        .typeA.T1M3 .mode-images {
            flex-direction: column;
            align-items: start;
        }
        .typeA.T1M3 .mode-images .images-num-1.mode-images-inner {
            width: 80%;
        }
        .typeA.T1M3 .mode-images .images-num-1.mode-images-inner img {
            min-height: 200px;
        }
        .typeA.T1M3 .mode-images .images-num-2.mode-images-inner {
            margin-top: 0px;
            margin-left: 55%;
            width: 45%;
        }
        .typeA.T1M3 .mode-images .images-num-2.mode-images-inner img {
            min-height: 150px;
        }
        .typeA.T1M3 .mode-images .images-num-3.mode-images-inner {
            width: 40%;
            margin-left: 0;
            margin-top: -20%;
        }
        .typeA.T1M3 .mode-images.mode-text .mode-text-inner {
            width: 100%;
            padding: 20px;
        }
        /* typeA T1M3 reverse ----------------------------------------*/
        .typeA.T1M3.reverse .mode-inner {
            padding: 0;
        }
        .typeA.T1M3.reverse .mode-images {
            flex-direction: column;
            align-items: start;
        }
        .typeA.T1M3.reverse .mode-images .images-num-1.mode-images-inner {
            margin-left: 20%;
            width: 80%;
        }
        .typeA.T1M3.reverse .mode-images .images-num-1.mode-images-inner img {
            min-height: 200px;
        }
        .typeA.T1M3.reverse .mode-images .images-num-2.mode-images-inner {
            margin-top: 0px;
            margin-left: 55%;
            width: 45%;
        }
        .typeA.T1M3.reverse .mode-images .images-num-2.mode-images-inner img {
            min-height: 150px;
        }
        .typeA.T1M3.reverse .mode-images .images-num-3.mode-images-inner {
            width: 40%;
            margin-left: 0;
            margin-top: -20%;
        }
        .typeA.T1M3.reverse .mode-images.mode-text .mode-text-inner {
            width: 100%;
            padding: 20px;
        }
        /* typeA column ----------------------------------------*/
        .typeA.column .mode-text .mode-text-inner {
            padding-right: 20px;
        }
        .typeA.column .mode-inner {
            flex-direction: column;
        }
        .typeA.column .mode-inner > div {
            margin-right: 0;
        }
        .typeA.column .mode-inner > div:nth-of-type(2) {
            margin-top: 40px;
        }
        .typeA.column .mode-inner > div:nth-of-type(3) {
            margin-top: 40px;
        }
        /* typeA T1M2 column ----------------------------------------*/
        .typeA.T1M2.column .mode-inner {
            flex-direction: row;
        }
        .typeA.T1M2.column .mode-text.mode-images > div {
            flex-direction: row;
            justify-content: space-between;
        }
        .typeA.T1M2.column .mode-images > div .mode-images-inner:nth-of-type(1) {
            margin-right: 0;
            margin-left: 0;
        }
        .typeA.T1M2.column .mode-images > div .mode-images-inner:nth-of-type(2) {
            margin-top: 30px;
        }
        /* typeAP ----------------------------------------*/
        .typeAP.T1M1 .mode-inner {
            flex-direction: column-reverse;
            min-width: 100%;
        }
        .typeAP.T1M1 .mode-inner .mode-text .mode-text-inner {
            justify-content: flex-start;
            height: 100%;
            padding: 0 20px;
        }
        .typeAP.T1M1 .mode-inner .mode-images .mode-images-inner {
            height: 100%;
            justify-content: flex-end;
        }
        /* typeF ----------------------------------------*/
        .typeF .full-bg .mode-images {
            width: 100%;
            margin: 0 0 15px 0;
        }
        .typeF .mode-text {
            width: 100%;
        }
        .typeF.inner .mode-text {
            width: 100%;
        }
        .typeF .images-decorate:after {
            width: 90px;
            height: 30px;
            background-color: transparent;
        }
        /* typeF T1M3 ----------------------------------------*/
        .typeF.T1M3 .mode-inner {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }
        .typeF.T1M3 .images-num-1 .mode-images-inner:after,
        .typeF.T1M3 .images-num-2 .mode-images-inner:after {
            content: none;
        }
        .typeF.T1M3 .text-num-1 .mode-text-inner {
            width: 100%;
        }
        .typeF.T1M3 .images-num-1 {
            right: -20px;
            margin: 15px auto 40px auto;
        }
        .typeF.T1M3 .text-num-2 {
            position: static;
        }
        .typeF.T1M3 .text-num-2 .text-on-banner {
            width: 100%;
        }
        .typeF.T1M3 .images-num-2 {
            position: relative;
            width: 60%;
            left: -20px;
            bottom: initial;
        }
        .typeF.T1M3 .images-num-3 {
            width: 40%;
            position: relative;
            right: -20px;
            margin-top: 20%;
        }
        .typeF.T1M3 .text-twName-title {
            text-align: center;
        }
        .typeF.T1M3 .text-twName-subtitle {
            text-align: center;
        }
        /* typeF T1M5 ----------------------------------------*/
        .typeF.T1M5 .mode-inner {
            display: flex;
            flex-wrap: wrap;
            flex-direction: initial;
            justify-content: space-between;
        }
        .typeF.T1M5 .images-num-1 .mode-images-inner:after,
        .typeF.T1M5 .images-num-4 .mode-images-inner:after {
            content: none;
        }
        .typeF.T1M5 .mode-images.images-num-1 {
            position: relative;
            height: auto;
            left: -20px;
            width: 60%;
        }
        .typeF.T1M5 .mode-images.images-num-1 img {
            min-height: 200px;
        }
        .typeF.T1M5 .mode-images.images-num-2 {
            position: relative;
            width: 40%;
            left: initial;
            right: -20px;
            margin: 0;
            margin-top: 30%;
        }
        .typeF.T1M5 .mode-images.images-num-2 img {
            min-height: 140px;
        }
        .typeF.T1M5 .mode-images.images-num-3 {
            position: relative;
            width: 35%;
            left: -20px;
            margin-top: 30%;
        }
        .typeF.T1M5 .mode-images.images-num-3 img {
            min-height: 120px;
        }
        .typeF.T1M5 .mode-images.images-num-4 {
            position: relative;
            left: initial;
            right: -20px;
            top: initial;
            width: 65%;
        }
        .typeF.T1M5 .mode-images.images-num-4 img {
            min-height: 200px;
        }
        .typeF.T1M5 .text-num-1 {
            width: 100vw;
            margin: 0 auto;
        }
        .typeF.T1M5 .text-num-2 {
            width: 100%;
            position: static;
            margin-top: 0px;
            min-height: auto;
        }
        .typeF.T1M3 .text-num-2 .text-on-banner .text-content {
            margin: 0px 0px 10px 0px;
        }
        .typeF.T1M5 .text-num-1 .text-twName-title,
        .typeF.T1M5 .text-num-1 .text-twName-subtitle {
            text-align: center;
        }
        /* typeFR ----------------------------------------*/
        .mode.typeFR .mode-images .mode-images-inner img {
            height: 40vh;
        }
        /* typeR T1M3 ----------------------------------------*/
        .typeR.T1M3 .mode-images,
        .typeR.T1M3 .mode-text {
            width: 100%;
            overflow: hidden;
        }
        .typeR.T1M3 .mode-text .mode-text-inner {
            padding: 0;
        }
        .typeR.T1M3 .mode-inner {
            flex-direction: column;
        }
        .typeR.T1M3 .text-twName-title {
            text-align: center;
        }
        .typeR.T1M3 .text-twName-summary {
            text-align: center;
        }
        .typeR.T1M3 .text-twName-mark {
            text-align: center;
        }
        /* typeB T1M1 ----------------------------------------*/
        .typeB.T1M1 .mode-text {
            padding: 15px;
        }
        .typeB.T1M1 .text-images-source {
            right: 15px;
        }
        .typeB.T1M1.reverse .text-images-source {
            left: 15px;
        }
        .typeB.T1M1 .mode-images-inner {
            min-height: 350px;
        }
        /* typeFC T6M6 ----------------------------------------*/
        .typeFC.T6M6 .full-bg:after {
            height: 50%;
        }
        /* typeT T2 ----------------------------------------*/
        .typeT.T2 .text-engName span:before,
        .typeT.T2 .text-engName span:after {
            content: none;
        }
        /* typeT T1M1 ----------------------------------------*/
        .typeT.T1M1 .mode-text-inner:before,
        .typeT.T1M1 .mode-text-inner:after {
            top: initial;
            bottom: 17px;
        }
        /* typeL M6 ----------------------------------------*/
        .typeL.M6 img {
            width: 48%;
        }
    }
    
    @media screen and (max-width: 767px) {
        /* ======= 基礎設定和共用 ======= */
        /* 共用 ----------------------------------------*/
        /* 外層滿版 */
        .mode {
            padding: 40px 0px;
        }
        /* 群組模組(2個小模組拼一個群組) */
        /* .mode-group .mode + .mode {
            padding-top: 25px;
        } */
        /* 背景線框裝飾 */
        .border-bg {
            overflow: hidden;
        }
        /* 文字 ----------------------------------------*/
        .text-engName-column {
            font-size: 14px;
        }
        .reverse .text-engName-column {
            right: 0;
        }
        .text-engName {
            font-size: 42px;
        }
        .text-twName-title {
            font-size: 24px;
            margin: 15px 0px;
        }
        .text-twName-title.bigger {
            font-size: 32px;
        }
        .text-twName-subtitle {
            font-size: 20px;
        }
        .text-twName-summary {
            font-size: 16px;
            margin: 15px 0px;
        }
        .text-content {
            font-size: 14px;
            line-height: 2;
        }
        .text-twName-mark {
            font-size: 16px;
        }

        /* ======= 各組的排版 ======= */
        /* typeA T1M3 ----------------------------------------*/
        .typeA.T1M3 .mode-images.images-num-2 .mode-images-inner {
            margin-left: 13%;
            margin-top: -30px;
        }
        /* typeA T1M3 reverse ----------------------------------------*/
        .typeA.T1M3.reverse .mode-images.images-num-2 .mode-images-inner {
            margin-left: 46.5%;
            margin-top: -30px;
        }
        /* typeA column ----------------------------------------*/
        .typeA.column .text-engName-column {
            padding: 0;
        }
        /* typeF ----------------------------------------*/
        .typeF .mode-text .mode-text-inner .text-num-1 {
            padding: 0;
        }
        /* typeF T1M3 ----------------------------------------*/
        .typeF.T1M3 .images-num-1 img {
            height: 320px;
        }
        .typeF.T1M3 .images-num-2 {
            margin-top: -40px;
        }
        .typeF.T1M3 .images-num-2 img {
            height: 130px;
        }
        .typeF.T1M3 .images-num-3 {
            margin-top: 40px;
        }
        .typeF.T1M3 .images-num-3 img {
            height: 130px;
        }
        /* typeF T1M5 ----------------------------------------*/
        .typeF.T1M5 .mode-images.images-num-2 img {
            min-height: 150px;
        }
        /* typeG ----------------------------------------*/
        .typeG .award-text-circle {
            letter-spacing: 20px;
        }
    }


    /* ======= swiper套件 ======= */
    /* swiper共用樣式 ----------------------------------------*/
    /* swiper 切換選單樣式 */
    .mode-swiper .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal,
    .mode-swiper .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 20px !important;
    }
    .mode-swiper .swiper-pagination-bullet {
        background-color: #ccc;
        opacity: .5;
        width: 30px;
        border-radius: 0;
        margin: 0px 10px !important;
    }
    .mode-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: #888;
        opacity: 1;
    }
    /* swiper箭頭樣式 */
    .mode-swiper .swiper-button-prev {
        left: 10px;
    }
    .mode-swiper .swiper-button-next {
        right: 10px;
    }
    .mode-swiper .swiper-button-next,
    .mode-swiper .swiper-button-prev {
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .mode-swiper .swiper-button-next:after,
    .mode-swiper .swiper-button-prev:after {
        font-size: 25px;
        color: #888;
    }
    .mode-swiper .swiper-button-next:hover,
    .mode-swiper .swiper-button-prev:hover {
        transform: scale(1.1);
    }

    /* swiper 各種款式設定 ----------------------------------------*/
    /* swiper mode-swiper-gallery 小縮圖切換款 */
    .mode-swiper.mode-swiper-gallery-top {
        width: 100%;
        max-width: 1200px;
    }
    .mode-swiper.mode-swiper-gallery-thumbs {
            width: 100%;
            max-width: 50vw;
            position: absolute;
            bottom: -50px;
            left: 10%;
            background: linear-gradient(30deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
            padding: 30px;
        }
    .mode-swiper.mode-swiper-gallery-thumbs .swiper-slide {
        cursor: pointer;
        transition: .5s;
    }
    .mode-swiper.mode-swiper-gallery-thumbs .swiper-slide:hover {
        transform: translateY(-10px);
    }
    /* swiper mode-swiper-images-full 滿版圖切換款 */
    .mode-swiper.mode-swiper-imagesfull-top .text-on-banner {
        background-color: rgba(255, 255, 255, 0.8);
    }
    .mode-swiper.mode-swiper-imagesfull-top .imagesfull-thumbs-animate {
        animation: imagesfull-thumbs-animate 1s ease-in-out;
    }
    @keyframes imagesfull-thumbs-animate {
        0% {
            opacity: 0;
            transform: translateX(-40%);
        }
        100% {
            opacity: 1;
            transform: translateX(0%);
        } 
    }
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-wrapper {
        justify-content: center;
        padding: 0px 0px 15px 0px;
        white-space: nowrap;
        overflow: auto;
    }
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide {
        width: auto !important;
        min-width: 100px !important;
        background-color: transparent;
        text-align: center;
        cursor: pointer;
        transition: 0.2s;
    }
    /* 文字 */
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide span {
        position: relative;
        z-index: 1;
        display: block;
        padding: 10px 15px;
        font-size: 16px;
        color: #2d7cd1;
        border: 1px solid #2d7cd1;
    }
    /* 按鈕背景定位 */
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide::before {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 0%;
    }
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide::after {
        position: absolute;
        content: "";
    }
    /* 按鈕hover效果 */
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide:hover::before {
        width: 100%;
        background-color: #004ea2;
        transition: 0.3s ease-out;
    }
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide span:hover {
        color: #fff;
        border-color: #004ea2;
        transition: 0.2s 0.1s;
    }
    /* 點擊選中的樣式 */
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide.swiper-slide-thumb-active {
        background-color: #2d7cd1;
    }
    .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-slide.swiper-slide-thumb-active span {
        color: #fff;
    }
    /* swiper mode-swiper-marquee 跑馬燈款 */
    .mode-swiper.mode-swiper-marquee {
        padding: 30px 0px 60px 0px;
    }
    .mode-swiper.mode-swiper-marquee .swiper-wrapper {
        transition-timing-function: linear;
        width: 100%;
    }
    .mode-swiper.mode-swiper-marquee .swiper-wrapper .swiper-slide {
        width: 25%;
    }
    .mode-swiper.mode-swiper-marquee .swiper-wrapper .swiper-slide:nth-child(even) {
        margin-top: 30px;
    }
    .mode-swiper.mode-swiper-marquee img {
        margin-bottom: 20px;
    }
    @media screen and (max-width: 1440px) {
        /* swiper 各種款式設定 ----------------------------------------*/
        /* swiper mode-swiper-gallery 小縮圖切換款 */
        .mode-swiper.mode-swiper-gallery-thumbs {
            max-width: 60vw;
            left: 0;
        }
    }
    @media screen and (max-width: 991px) {
        /* swiper共用樣式 ----------------------------------------*/
        /* swiper箭頭樣式 */
        .mode-swiper .swiper-button-prev {
            left: 0px;
        }
        .mode-swiper .swiper-button-next {
            right: 0px;
        }
        /* swiper 各種款式設定 ----------------------------------------*/
        /* swiper mode-swiper-gallery 小縮圖切換款 */
        .mode-swiper.mode-swiper-gallery-thumbs {
            max-width: 100vw;
            padding: 15px;
        }
        /* swiper mode-swiper-images-full 滿版圖切換款 */
        .mode-swiper.mode-swiper-imagesfull-top .imagesfull-thumbs-animate {
            animation: none;
        }
        .mode-swiper.mode-swiper-imagesfull-thumbs .swiper-wrapper {
            justify-content: flex-start;
            padding: 0 15px 15px 15px;
        }
        .mode-swiper.mode-swiper-imagesfull-top .text-on-banner {
            background-color: #fff;
            height: 60vh;
        }
        /* swiper mode-swiper-marquee 跑馬燈款 */
        .mode-swiper.mode-swiper-marquee .swiper-wrapper .swiper-slide {
            width: 40%;
        }
        .mode-swiper.mode-swiper-marquee {
            padding: 30px 0px;
        }
    }
    @media screen and (max-width: 767px) {
        /* swiper共用樣式 ----------------------------------------*/
        /* swiper 切換選單樣式 */
        .mode-swiper .swiper-button-next:hover,
        .mode-swiper .swiper-button-prev:hover {
            transform: none;
        }
        /* swiper 各種款式設定 ----------------------------------------*/
        /* swiper mode-swiper-marquee 跑馬燈款 */
        .mode-swiper.mode-swiper-marquee .swiper-wrapper .swiper-slide {
            width: 50%;
        }
    }
    

    /* demo用半透明黑色選單的CSS ----------------------------------------*/
    /* 選單 */
    .mode-nav {
        padding-bottom: 48px;
    }
    .mode-nav-content {
        position: fixed;
        z-index: 999;
        width: 100%;
        background-color: rgba(0,0,0,0.7);
        top: 0;
        border-radius: 0;
        border: 0;
    }
    /* 選單第一層 */
    .mode-nav-content .nav-one {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        float: unset;
    }
    .mode-nav-content .nav-one .nav-one-li {
        list-style-type: none;
        display: inline-block;
    }
    .mode-nav-content .nav-one .nav-one-li.active a {
        background-color: #2d7cd1;
    }
    .mode-nav-content .nav-one .nav-one-li a {
        font-size: 20px;
        padding: 15px;
        display: block;
        color: #fff;
    }
    .mode-nav-content .nav-one .nav-one-li a:hover {
        background-color: rgba(0,0,0,0);
        text-decoration: underline;
    }
    /* 導覽標題 */
    .mode-number {
        width: 100%;
        max-width: 1400px;
        padding: 20px;
        font-size: 15px;
        color: #bbb;
    }
    @media screen and (max-width: 991px) {
        .mode-nav-content {
            white-space: nowrap;
            overflow: auto;
        }
    }


    /* GSAP動畫效果 */
    /* 文字效果 */
    .textWrap {
        overflow: hidden;
        display: block;
    }
    /* 文字從下向上飛入 */
    .textUp {
        display: block;
    }
    /* 文字從上向下飛入 */
    .textDown {
        display: block;
    }
    /* 文字從左向右飛入 */
    .textRight {
        display: block;
    }
    /* 圖片scale效果、圖片遮罩效果,超過的部分做裁切 */
    .images-cut,
    .images-cut-to-right,
    .images-cut-to-left,
    .images-cover-to-top,
    .images-cover-to-bottom {
        overflow: hidden;
    }


    /* typePW ----------------------------------------*/
    .typePW .mode-inner {
        max-width: 100%;
        display: block;
        padding: 0 5%;
    }
    /* .typePW .mode-text .mode-text-inner .text-engName,
    .typePW .mode-text .mode-text-inner .text-twName-title,
    .typePW .mode-text .mode-text-inner .text-images-source {
        text-align: center;
    } */
    /* typePW T6M5 ----------------------------------------*/
    .typePW.T6M5 .mode-inner .waterfall {
        padding: 3% 0%;
        display: grid;
        grid-gap: 60px; /* 格子邊距 */
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 格子分成四等分 */
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-1 {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-2 {
        grid-column: 3 / 5;
        grid-row: 1;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-3 {
        grid-column: 3 / 5;
        grid-row: 2;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-4 {
        grid-column: 2 / 3;
        grid-row: 2;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-5 {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    /* 圖片尺寸和位置小偏移設定 */
    .typePW.T6M5 .mode-inner .mode-images.images-num-1 img {
        height: 600px;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-2 img {
        height: 360px;
        margin-top: 50px;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-3 img {
        height: 600px;
        margin-top: -200px;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-4 img {
        height: 300px;
        margin-top: -50px;
    }
    .typePW.T6M5 .mode-inner .mode-images.images-num-5 img {
        height: 300px;
    }
    /* typePW T11M10 ----------------------------------------*/
    .typePW.T11M10 .mode-inner .waterfall {
        padding: 3% 0%;
        display: grid;
        grid-gap: 60px; /* 格子邊距 */
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 格子分成四等分 */
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-1 {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-2 {
        grid-column: 3 / 4;
        grid-row: 1;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-3 {
        grid-column: 4 / 5;
        grid-row: 1;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-4 {
        grid-column: 3 / 5;
        grid-row: 2;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-5 {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-6 {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-7 {
        grid-column: 3 / 4;
        grid-row: 3;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-8 {
        grid-column: 4 / 5;
        grid-row: 3;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-9 {
        grid-column: 3 / 5;
        grid-row: 4;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-10 {
        grid-column: 1 / 3;
        grid-row: 4;
    }
    /* 圖片尺寸和位置小偏移設定 */
    .typePW.T11M10 .mode-inner .mode-images.images-num-1 img {
        height: 600px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-2 img {
        height: 300px;
        margin-top: 50px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-3 img {
        height: 300px;
        margin-top: 80px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-4 img {
        height: 600px;
        margin-top: -250px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-5 img {
        height: 300px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-6 img {
        height: 600px;
        margin-top: -70px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-7 img {
        height: 300px;
        margin-top: 20px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-8 img {
        height: 300px;
        margin-top: 40px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-9 img {
        height: 600px;
        margin-top: -200px;
    }
    .typePW.T11M10 .mode-inner .mode-images.images-num-10 img {
        height: 600px;
    }
    @media screen and (max-width: 991px) {
        /* typePW ----------------------------------------*/
        .typePW .mode-inner {
            padding: 0px 20px;
        }
        /* typePW T6M5 ----------------------------------------*/
        .typePW.T6M5 .mode-inner .waterfall {
            grid-gap: 20px; /* 格子邊距 */
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;; /* 格子分成六等分 */
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-1 {
            grid-column: 1 / 7;
            grid-row: 1;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-2 {
            grid-column: 2 / 7;
            grid-row: 2;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-3 {
            grid-column: 1 / 7;
            grid-row: 3;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-4 {
            grid-column: 4 / 7;
            grid-row: 4;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-5 {
            grid-column: 1 / 4;
            grid-row: 4;
        }
        /* 圖片尺寸和位置小偏移設定 */
        .typePW.T6M5 .mode-inner .mode-images.images-num-1 img {
            height: 260px;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-2 img {
            height: 200px;
            margin-top: 0px;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-3 img {
            height: 260px;
            margin-top: 0;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-4 img {
            height: 150px;
            margin-top: 0px;
        }
        .typePW.T6M5 .mode-inner .mode-images.images-num-5 img {
            height: 150px;
            margin-top: 50px;
        }

        /* typePW T11M10 ----------------------------------------*/
        .typePW.T11M10 .mode-inner .waterfall {
            grid-gap: 20px; /* 格子邊距 */
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;; /* 格子分成六等分 */
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-1 {
            grid-column: 1 / 7;
            grid-row: 1;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-2 {
            grid-column: 4 / 7;
            grid-row: 2;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-3 {
            grid-column: 1 / 4;
            grid-row: 2;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-4 {
            grid-column: 1 / 6;
            grid-row: 3;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-5 {
            grid-column: 2 / 7;
            grid-row: 4;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-6 {
            grid-column: 1 / 7;
            grid-row: 5;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-7 {
            grid-column: 1 / 4;
            grid-row: 6;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-8 {
            grid-column: 4 / 7;
            grid-row: 6;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-9 {
            grid-column: 1 / 6;
            grid-row: 7;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-10 {
            grid-column: 2 / 7;
            grid-row: 8;
        }
        /* 圖片尺寸和位置小偏移設定 */
        .typePW.T11M10 .mode-inner .mode-images.images-num-1 img {
            height: 260px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-2 img {
            height: 150px;
            margin-top: 0px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-3 img {
            height: 150px;
            margin-top: 100px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-4 img {
            height: 260px;
            margin-top: 0px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-5 img {
            height: 260px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-6 img {
            height: 260px;
            margin-top: 0px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-7 img {
            height: 150px;
            margin-top: 0px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-8 img {
            height: 150px;
            margin-top: 100px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-9 img {
            height: 260px;
            margin-top: 0px;
        }
        .typePW.T11M10 .mode-inner .mode-images.images-num-10 img {
            height: 260px;
        }
    }
              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

        var tl = gsap.timeline()
        .from(".mode-images", {
            scale: 3,
            duration: 3,
            ease: Power1.easeIn,
            transformOrigin: "50% 50%",
        })
        .from(".mode-text .mode-text-inner .text-num-1", {
            yPercent: -50,
            ease: Power1.easeIn,
            duration: 2,
            backgroundColor: "#fffffff2",
            transformOrigin: "50% 50%",
        }, "-=1")
        .from(".mode-text .mode-text-inner .text-num-2", {
            opacity: 0,
        });

        ScrollTrigger.create({
            trigger: "#animation-13",
            pin: true,
            pinSpacing: true,
            ease: Power1.easeIn,
            start: "top top",
            end: "+=600",
            scrub: 1,
            animation: tl,
            onLeave: function (self) {
                console.log('onLeave');
                self.scroll(self.start);
                self.disable();
                self.animation.progress(1);
            },
            onLeaveBack: function (self) {
                console.log('onLeaveBack');
                self.enable();
            }
        });
              
            
!
999px

Console