/* -------- 2019 06 CHATISFY --------*/

/* -------- 以下 引入字型 --------*/

@import url('notosanstc.css');

/* -------- 以下 顏色設定 --------*/

:root {
  --background-header-bg: rgba(0,0,0,.6);
  --background-gray: #D6D7D2;
  --background-light-gray: #f4f4f4;
  --background-blue: #218EF9;
  --background-lighter-blue: #369aff;
  --background-darken-blue: #2B82D9;
  --color-black: #535353;
  --color-gray: #767676;
  --color-light-gray: #969696;
  --color-darken-blue: #2F477A;
  --color-blue: #3A5897;
  --color-light-blue: #369aff;
  --color-pink: #FF0080;
  --text-shadow-normal: 1px 1px 2px rgba(0,0,0,.3);
  --text-shadow-thin: 2px 2px 1px rgba(0,0,0,.6);
  --shadow-header-style: 1px 1px 4px rgba(0,0,0,.26);
  --margin-section-gutter: 3rem;
  --margin-section-gutter-lg: 6rem;
  --margin-section-gutter-xl: 8rem;
  --margin-p-gutter: 1rem;
  --margin-p-gutter-md: 1.2rem;
  --margin-p-gutter-xl: 2rem;
  --font-family-base: "PingFang TC", "Heiti TC", "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "Microsoft YaHei", "Raleway", Arial, sans-serif;
  --font-family-noto-sans: "Noto Sans TC", "PingFang TC", "Heiti TC", "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "Microsoft YaHei", "Raleway", Arial, sans-serif;
}

/* -------- 以下 版面設定 --------*/

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--color-black);
  line-height: 1.8;
}

@media (min-width: 992px) {

  html {
    font-size: 16px;
  }

}

html,
body {
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;  
}

html {
  /* height: 100%; */
  background-color: var(--background-gray);
}

body {
  /* height: 100%; */
}

img {
  display: block;
  margin: 0 auto;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;  
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  line-height: 1.2;
}

p {
  margin: var(--margin-p-gutter) 0;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: inherit;
}

/* -------- 以下 UI 元件 --------*/

button,
.button {
  display: inline-block;
  width: auto;
  min-width: 12em;
  padding: 1em 2em;
  color: white;
  text-decoration: none;
  background-color: var(--background-blue);
  border: 1px solid var(--background-blue);
  text-align: center;
  line-height: 1;
  text-shadow: var(--text-shadow-normal);
  font-weight: bold;
  border-radius: 99rem;
  transition: .2s ease all;
  outline: none;
}

button:hover,
.button:hover {
  background-color: var(--background-lighter-blue);
  transform: translate(0, -2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}

button:focus,
.button:focus {
  background-color: var(--background-darken-blue);
  transform: translate(0, 0);
  box-shadow: 0 0 4px rgba(0,0,0,.4);
}

/* -------- 以下 重新訂定 Grid --------*/

@media (min-width: 576px) {
  .container {
    /* max-width: 540px; */
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    /* max-width: 720px; */
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* -------- 以下 樣式設定 --------*/

/* 每一個段落 加上顏色 */
.bg-white{
  background-color: white
}
.bg-blue{
  background-color: #0584FF
}

/* 上圓角 */
.border-radius{
  border-radius: 1em;
}

/* 文字對齊 */
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: center;
}
.text-align-justify {
  text-align: justify;
}

/* 白色文字 */
.color-white {
  color: white;
  text-shadow: var(--text-shadow-normal);
}

/* 藍色文字 */
.color-blue {
  color: var(--color-blue);
}



/* -------- 以下 HEADER --------*/

/* HEADER */
header.header-wrap {
  position: fixed;
  z-index: 1020;
  padding: var(--margin-p-gutter) 0;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  transition: .2s linear background-color;
}

/* HEADER 加上 Class */
header.header-wrap.fixed,
header.header-wrap.show-mobile-nav {
  background-color: var(--background-header-bg)
}

/* 當手機版的 NAV 展開的時候，HEADER 展開覆蓋區塊 */
header.header-wrap:before {
  content: '';
  display: block;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--background-header-bg);
  visibility: hidden;
  opacity: 0;
  transition: .2s linear opacity, .2s linear visibility;
}
header.header-wrap.show-mobile-nav:before {
  visibility: visible;
  opacity: 1;
}

/* LOGO  */
header img.logo {
  height: 2em;
  filter: drop-shadow(var(--shadow-header-style));
}

/* NAV 右側的選單 */
header nav.nav-box-desktop {
  justify-content: flex-end;
}

/* 電腦版的 LINK */
header nav.nav-box-desktop a{
  text-decoration: none;
  position: relative;
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: var(--shadow-header-style);
}

/* 電腦版的 LINK */
header nav.nav-box-desktop a:before{
  content: '';
  position: absolute;
  left: 1rem;
  bottom: 0;
  display: block;
  width: 0%;
  height: 2px;
  background-color: white;
  transition: .2s ease width;
  box-shadow: var(--shadow-header-style);
}

/* 電腦版的 LINK */
header nav.nav-box-desktop a:hover:before{
  width: calc(100% - 2rem);
}

/* 手機版的按鈕 */
header button.nav-mobile-button {
  width: 3em;
  min-width: 3em;
  height: 3em;
  padding: 0;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background-color: transparent;
  border: 1px solid transparent;
}

/* 當按鈕被 hover 的特效 */
header button.nav-mobile-button:hover {
  border: 1px solid white;
  background-color: rgba(0,0,0,.2);
}

/* 是否顯示按鈕內的 ICON */
header.show-mobile-nav button.nav-mobile-button i.fa-bars {
  display: none;
}
header.show-mobile-nav button.nav-mobile-button i.fa-times {
  display: block;
}
header:not(.show-mobile-nav) button.nav-mobile-button i.fa-bars {
  display: block;
}
header:not(.show-mobile-nav) button.nav-mobile-button i.fa-times {
  display: none;
}

/* 手機版的 NAV */
header nav.nav-box-mobile {
  display: none;
  margin: 1rem 0 -1rem;
  height: auto;
}

/* 手機版 NAV 每一個連結 */
header nav.nav-box-mobile > a {
  display: block;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  color: white;
  position: relative;
  text-shadow: var(--shadow-header-style);
}
header nav.nav-box-mobile > a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: white;
  opacity: .6;
}

@media (min-width: 768px) {
  header nav.nav-box-mobile {
    display: none !important;
  }
}



/* -------- 以下 主視覺 --------*/

/* 主視覺 外框 */
.kv-wrap {
  position: relative;
  /* height: 100%; */
  padding: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-bottom: 4em;
}

/* 主視覺 主標圖片 */
.kv-wrap img.kv-img {
  width: 100%;
  z-index: 2;
  max-width: 640px;
  /* filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2)); */
}

@media (min-width: 992px) {

  .kv-wrap img.kv-img {
    width: 70%;
    max-width: 720px;
  }

}

@media (min-width: 1200px) {

  .kv-wrap img.kv-img {
    width: 56%;
    max-width: 820px;
  }

}

@media (min-width: 1600px) {

  .kv-wrap img.kv-img {
    width: 60%;
    max-width: 840px;
  }

}

/* 主視覺 DECO */
.kv-wrap img.kv-deco {
  position: absolute;
}

.kv-wrap img.kv-deco.deco-phone {
  width: 30%;
  max-width: 196px;
  left: 0;
  top: 0;
}

.kv-wrap img.kv-deco.deco-chat {
  width: 42%;
  right: 0;
  max-width: 280px;
  top: 0;
}

.kv-wrap img.kv-deco.deco-cloud {
  width: 45%;
  max-width: 300px;
  left: 0;
  bottom: 0;
  margin-bottom: -8%;
  z-index: -1;
}

.kv-wrap img.kv-deco.deco-color-line-messaging-partners {
  width: 40%;
  max-width: 320px;
  right: 0;
  bottom: 0;
  margin-bottom: 6em;
}

@media (min-width: 768px) {

  .kv-wrap img.kv-deco.deco-phone {
    width: 200px;
    max-width: 200px;
  }
  
  .kv-wrap img.kv-deco.deco-chat {
    width: 280px;
    max-width: 280px;
  }
  
  .kv-wrap img.kv-deco.deco-cloud {
    width: 360px;
    max-width: 360px;
    margin-bottom: -36px;
  }
  
  .kv-wrap img.kv-deco.deco-color-line-messaging-partners {
    width: 40%;
    max-width: 400px;
  }

}

@media (min-width: 1200px) {

  .kv-wrap img.kv-deco.deco-phone {
    width: 280px;
    max-width: 280px;
  }
  
  .kv-wrap img.kv-deco.deco-chat {
    width: 360px;
    max-width: 360px;
  }
  
  .kv-wrap img.kv-deco.deco-cloud {
    width: 500px;
    max-width: 500px;
    margin-bottom: -100px;
  }
  
  .kv-wrap img.kv-deco.deco-color-line-messaging-partners {
    width: 420px;
    max-width: 420px;
    margin-bottom: 4em;
  }

}

@media (min-width: 1600px) {

  .kv-wrap img.kv-deco.deco-phone {
    width: 300px;
    max-width: 300px;
  }
  
  .kv-wrap img.kv-deco.deco-chat {
    width: 33%;
    max-width: 400px;
  }
  
  .kv-wrap img.kv-deco.deco-cloud {
    width: 45%;
    max-width: 580px;
    margin-bottom: -120px;
  }
  
  .kv-wrap img.kv-deco.deco-color-line-messaging-partners {
    width: 520px;
    max-width: 520px;
  }

}

/* 主視覺 下方 cta 區塊 */
.kv-wrap .kv-cta-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
}

.kv-wrap .kv-cta-box p {
  display: inline-block;
  color: var(--color-gray);
  text-align: center;
  cursor: pointer;
  transition: .2s linear color, .2s linear text-shadow;
  animation: ctaKeyframes 1s linear 0s infinite alternate both running;
}

/* 左右小箭頭 */
.kv-wrap .kv-cta-box p i {
  transition: .3s ease color;
  color: var(--color-blue);
}

/* hover時候的特效 */
.kv-wrap .kv-cta-box p:hover {
  color: var(--color-blue);
  text-shadow: 0 0px 4px rgba(255,255,255,.9)
}
.kv-wrap .kv-cta-box p:hover i {
  color: var(--color-darken-blue);
}

@keyframes ctaKeyframes{
  
  0% {
    transform: translate(0, 2px);
  }
  
  100% {
    transform: translate(0, -2px);
  }

}

/* 主視覺 下方 cta 區塊 */
.kv-wrap .kv-cta-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  color: var(--color-gray);
  text-align: center;
}

/* -------- 主內容區塊 -------- */

/* 內容大框Z*/
main.main-wrap {
  display: block;
}

/* 每一個段落 */
.article-wrap {
  position: relative;
  padding: var(--margin-section-gutter) 0;
}

@media (min-width: 992px) {

  .article-wrap {
    padding: var(--margin-section-gutter-lg) 0;
  }

}

@media (min-width: 1200px) {

  .article-wrap {
    padding: var(--margin-section-gutter-xl) 0;
  }

}
  
.article-wrap .section-wrap {
  position: relative
}

.article-wrap .section-wrap h4 {
  color: #3a5897;
  font-weight: bold;
  font-size: 20px;
}
.article-wrap .section-wrap .ctm-list-box + h4 {
  margin-top: var(--margin-section-gutter);
}

.article-wrap .section-wrap + .section-wrap {
  margin-top: var(--margin-section-gutter);
}

@media (min-width: 992px) {

  .article-wrap .section-wrap + .section-wrap {
    margin-top: var(--margin-section-gutter-lg);
  }

}

@media (min-width: 1200px) {

  .article-wrap .section-wrap + .section-wrap {
    margin-top: var(--margin-section-gutter-xl);
  }

}

/* 當裡面需要白色字體的時候 */
.article-wrap .section-wrap .white {
  color: white;
}

/* ---- article 標題 ---- */

/* 段落大標題 外框 */
.article-title {
  margin-bottom: var(--margin-section-gutter);
  line-height: 1.2;
}

@media (min-width: 576px) {
  
  .article-title {
    position: relative;
    padding-left: 1rem;
  }

  /* 左邊的裝飾線 */
  .article-title:before {
    content: '';
    display: block;
    width: 6px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--color-blue);
  }

  /* 左邊的裝飾線 */
  .article-title.white:before {
    background-color: white;
    box-shadow: var(--text-shadow-normal);
  }

}

/* 標題 大字 */
.article-title .title-content{
  font-size: 2em;
  line-height: inherit;
  font-family: var(--font-family-noto-sans);
  font-weight: 1000;
}

/* 加上陰影 加粗 */
.article-title .title-content{
}
.article-title .title-content.color-white{
}


@media (min-width: 768px) {
  
  .article-title .title-content{
    font-size: 2.6em;
  }
 
}

@media (min-width: 1200px) {
  
  .article-title .title-content{
    font-size: 3.2em;
  }
 
}

.article-title .title-content > .sub{
  font-size: .6em;
}

/* 下方的描述 */
.article-title .title-description{
  margin-top: .6em;
  display: block;
  line-height: inherit;
  font-weight: normal;
}

@media (min-width: 992px) {
  
  .article-title .title-description{
    font-size: 1.2em;
  }
 
}


/* ---- section 標題 ---- */

/* 小區塊標題 藍色底 */
.section-title {
  position: relative;
  color: var(--color-blue);
  margin: var(--margin-p-gutter) 0 var(--margin-p-gutter-xl) 0;
}

/* 加上靠齊的樣式 */
.section-title.right {
}

.section-title.left {
}

.section-title.center {
}

@media (min-width: 576px) {

  .section-title {
    color: white;
    padding: var(--margin-p-gutter) 1.4em;
  }
  
  .section-title.center {
    text-align: center;
    padding: var(--margin-p-gutter) 0;
  }

}

@media (min-width: 992px) {

  .section-title.left {
    text-align: right;
  }

}

/* 藍色的底色益塊 */
.section-title::before {
  content: '';
  position: absolute;
  background-color: var(--color-blue);
  display: none;
  border-radius: 99em;
  height: 100%;
  width: 150vw;
  top: 0;
}


@media (min-width: 576px) {

  .section-title::before {
    display: block;
  }

  .section-title.center::before {
    display: block;
    width: 100%;
  }
  
}

.section-title.left::before {
  right: -1em;
}

.section-title.right::before {
  left: -1em;
}

.section-title .title {
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.2em;
  position: relative;
  z-index: 2;
}

@media (min-width: 576px) {

  .section-title .title {
    text-shadow: var(--text-shadow-thin);
  }

}
  

/* ---- 圖片跑出去的設計 ---- */

/* 樣式會下在 col 裡面 */
.broken-layout-col {
  position: relative;
  padding-bottom: 46%;
}

.broken-layout-col > img {
  position: absolute;
  height: 100%;
  width: 100vw;
  max-width: inherit;
  object-fit: cover;
}

/* 放圖片的框 帶樣式 left */
.broken-layout-col.left > img {
  border-radius: 0 99em 99em 0;
  right: 0;
}

/* 放圖片的框 帶樣式 right */
.broken-layout-col.right > img {
  border-radius: 99em 0 0 99em;
  left: 0;
}

@media (min-width: 768px) {
  
  .broken-layout-col {
    position: relative;
    width: auto;
    height: 100%;
    padding: 0;
    min-height: 300px;
  }

  .broken-layout-col > img {
    width: 50vw;
  }  

  .broken-layout-col.left > img {
    right: 2em;
  }
  
  /* 放圖片的框 帶樣式 right */
  .broken-layout-col.right > img {
    left: 2em;
  }

}

@media (min-width: 1200px) {
  
  .broken-layout-col {
    min-height: 400px;
  }

}

/* BOOST UP 與 OPTIMIZE 兩頁，有的 col 在lg 的寬度與需有最小寬 */

@media (min-width: 992px) {

  .min-height-lg-limite {
    min-height: 300px;
  }

}

/* -------- 讓聊天機器人爆衝你的廣告成效頁 BOOSTUP  -------- */

/* CTM（Click-to-Message）Messenger 發訊廣告 背影裝飾圖 */
img.ctm-background-deco {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  bottom: 0;
  margin: auto;
}

/* 八成開信率、十倍點擊率 的裝飾圖片 */
img.ctr-rate-deco {
  display: none;
}

@media (min-width: 768px) {  
  img.ctr-rate-deco {
    display: block;
    position: absolute;
    right: 0;
    bottom: -1.4em;
    width: auto;
    height: 3em
  }
}

@media (min-width: 1200px) {  
  img.ctr-rate-deco {
    height: 3.6em;
  }
}

/* 藍底色一塊的說明區 */
.ctm-wrap-description {
  padding: 4em 0;
}

.ctm-wrap-description p{
  letter-spacing: .6px;
  margin: 0;
  font-family: var(--font-family-noto-sans);
}

.ctm-wrap-description p b{
  font-weight: 700;
}

@media (min-width: 576px) {

  .ctm-wrap-description p{
    font-size: 1.2em;
  }

}

/*  大圓環圖  */
img.continue-operate {
}

/* 加上陰影 */
img.continue-operate.filter-drop{
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,.4))
}

@media (min-width: 768px) {

  img.continue-operate {
    width: 80%;
    max-width: 840px;
  }
}

/* -------- STEP 如何設定頁 -------- */

/* 頁面大外框 樣式寫在 main */
.setup-ctm-wrap {
}

.setup-ctm-wrap .setup-ctm-box{
  padding: var(--margin-p-gutter-xl);
}

.setup-ctm-wrap .setup-ctm-box .section-wrap {
  max-width: 95%;
  margin: 0 auto;
}

/* -------- RETARGET 再行銷 -------- */

/* 頁面大外框 樣式寫在 main */
.ctm-retarget-wrap {
}

.ctm-retarget-wrap .ctm-retarget-box{
  padding: var(--margin-p-gutter-xl);
}

/* 體驗 CTM 廣告的強大優勢！標題 */
.ctm-retarget-wrap h1.now-go-title{
  font-size: 1.4em;
}

/* -------- SETP 如果設定頁 && RETARGET 再行銷 列表 與 圖片 -------- */

/* 設定說明頁的列表 */
.ctm-list-box {
  margin-top: var(--margin-p-gutter);
  list-style: decimal; 
  padding-left: 2em;
}

.ctm-list-box > li + li {
  margin-top: var(--margin-p-gutter-md);
}

/* 文字樣式 */
.ctm-list-box > li p {
  margin: 0;
}

.ctm-list-box > li a {
  color: var(--color-blue)
}

/* 註解 */
.ctm-list-box > li p.sub {
  margin-top: .2em;
  font-weight: bold;
}

.ctm-list-box b {
  color: #535353;
  font-weight: bold;
}

.ctm-list-box > li b:after {
  content: '：';
}

img.list-img {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: .6rem auto 2.6rem;
  box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

/* 點擊可放大的圖片 */
img.list-img.clickView {
  cursor: pointer;
}

img.list-img + img.list-img{
  margin-top: -1rem;
}

img.list-img.filter-shadow {
  box-shadow: none;
filter: drop-shadow(1px 1px 3px rgba(0,0,0,.2))
}

/* -------- OPTIMIZE 優化 -------- */

/* 頁面外框 樣式寫在 main  */
.ctm-optimize-wrap {
}

/* 展示點擊後的「預期體驗」 的裝飾圖片 */
img.show-click-deco {
  display: none;
}

@media (min-width: 768px) {
  
  img.show-click-deco {
    display: block;
    position: absolute;
    right: 0;
    bottom: -1.4em;
    width: auto;
    height: 3em;
  }

}

@media (min-width: 768px) {
  
  img.show-click-deco {
    bottom: -2em;
    height: 4em;
  }

}

/* 影片區塊 外框 */
.video-box {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}

/* 手機的圖片 */
.video-box img.video-background {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(-.6em -.6em 1em rgba(0,0,0,.3))
}

/* 放影片的區塊 在手機裡面，先定位好 */
.video-box .video-block {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: 10.4%;
  width: 91%;
  height: 78.1%;
  overflow: hidden;
}

/* 作一個透明的播放與暫停用按鈕 */
.video-box .video-block .play-ghost {
  height: 100%;
  width: 100%;
  position: relative;
  opacity: 0;
  z-index: 3;
}

/* 播放按鈕 */
.video-box .play-button {
  cursor: pointer;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  z-index: 2;
  font-size: 4em;
  color: var(--color-light-blue);
  text-shadow: 0 0 4px white;
  transition: .2s linear text-shadow, .2s linear color, .2s linear transform;
}
.video-box .play-button:hover {
  /* color: var(--color-blue); */
  transform: scale(1.06);
  text-shadow: 0 0 8px white;
}

/* 影片本身 */
.video-box .video-item {
  z-index: 2;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 116%;
  height: 122%;
  left: -8%;
  top: -8%;
  transition: .3s linear opacity;
}
.video-box .video-item.visible {
  opacity: 1;
  visibility: visible;
}

/* 讓機器人為你追蹤「軌跡」下方按鈕  */
.ctm-optimize-wrap .how-to-follow-button {
  text-align: center;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  
  .ctm-optimize-wrap .how-to-follow-button {
    text-align: left;
  }

}

/* -------- 共用 FOOTER 四兄弟少一變三格的樣式 -------- */

/* FOOTER 外框 */
.footer-wrap {
  padding: var(--margin-section-gutter) 0;
}

/* 三兄弟 HOW 如何xxx 外框 同綁在 row */
.footer-wrap .how-box > .col-12 + .col-12{
  margin-top: 1.6em;
}

@media (min-width: 768px) {

  .footer-wrap .how-box > .col-12 + .col-12{
    margin-top: 0;
  }
  
}

/* 三兄弟 HOW 如何xxx 每一格*/
.footer-wrap .how-block {
  background-color: var(--background-light-gray);
  padding: var(--margin-p-gutter);
  position: relative;
  overflow: hidden;
  border-radius: 1em 1em 1em 0;
  height: 100%;
  display: flex;
  min-height: 160px;
  flex-flow: column nowrap;
  justify-content: flex-end;
  text-decoration: none;
  transition: .2s linear box-shadow, .2s linear transform;
}

/* 當三兄弟帶有 link 樣式的時候，hover 特效 */
.footer-wrap .how-block.link:hover {
  box-shadow: 0 4px 4px rgba(0,0,0,.2);
  transform: translate(0, -4px);
}

@media (min-width: 768px) {

  .footer-wrap .how-block {
    min-height: 220px;
  }

}

/* 三兄弟 HOW 如何xxx 透明圖 */
.footer-wrap .how-block img.how-to-img {
  position: absolute;
  right: .8em;
  top: .8em;
  width: 50%;
  max-height: calc(100% - 2em);
  object-fit: contain;
  object-position: right top;
}

/* 三兄弟 HOW 如何xxx */
.footer-wrap .how-block span.sub {
  z-index: 1;
  display: block;
  color: var(--color-blue);
  transition: .2s linear color;
}

/* 三兄弟 HOW 如何xxx */
.footer-wrap .how-block h2.title {
  display: flex;
  z-index: 1;
  font-size: 2em;
  align-items: center;
  color: var(--color-blue);
  transition: .2s linear color;
}

/* 當三兄弟帶有 link 樣式的時候，hover 變色字體 */
.footer-wrap .how-block.link:hover h2.title,
.footer-wrap .how-block.link:hover span.sub {
  color: var(--color-light-blue);
}

.footer-wrap .how-block h2.title i {
  font-size: .8em;
  margin-left: .4em;
}

/* 三兄弟 HOW 如何xxx */
.footer-wrap .how-block p.description {
  z-index: 1;
  display: block;
  position: relative;
  color: var(--color-light-gray);
  margin: 0;
}

/* 三兄弟 HOW 分隔線 */
.footer-wrap .how-block p.description::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  opacity: .8;
  margin: .2em 0 .8em;
  background-color: var(--color-light-gray);
}

/* 最後一 廣告金 限量發送 */
.footer-wrap .how-box .limited-cta{
  margin-top: 2em;
  padding: var(--margin-p-gutter-xl);
  background-color: var(--color-blue);
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {

  .footer-wrap .how-box .limited-cta{
    margin-top: 2em;
  }

}

.footer-wrap .how-box .limited-cta h1.title{
  font-size: 2em;
  letter-spacing: 1px;
  /* color: var(--color-light-gray); */
  color: white;
  text-align: center;
  margin-bottom: var(--margin-p-gutter);
  font-family: var(--font-family-noto-sans);
  text-shadow: var(--text-shadow-normal);
  position: relative;
  z-index: 2;
}

.footer-wrap .how-box .limited-cta h1.title b{
  font-weight: 1000;
  /* color: var(--color-pink); */
  color: #D6EBFD;
  padding: 0 .2em;
}

.footer-wrap .how-box .limited-cta a.button {
  z-index: 2;
  cursor: pointer;
}

/* 裝飾圖 */
.footer-wrap .how-box .limited-cta img.deco-img {
  position: absolute;
  left: var(--margin-p-gutter);
  top: 0;
  bottom: 0;
  margin: auto;
  height: 70%;
  width: auto;
  opacity: .4;
}

@media (min-width: 768px) {

  .footer-wrap .how-box .limited-cta img.deco-img {
    opacity: .6;
  }
  
}

@media (min-width: 992px) {
  
  .footer-wrap .how-box .limited-cta img.deco-img {
    height: calc(100% - 2em);
    max-width: 200px;
    opacity: .8;
  }

}

@media (min-width: 1200px) {
  
  .footer-wrap .how-box .limited-cta img.deco-img {
    max-width: 100%;
  }

}

.footer-wrap .how-box .limited-cta img.messaging-partners-img {
  position: relative;
  height: auto;
  width: 100px;
  background: rgb(255, 255, 255);
  padding: 4px;
  border-radius: 6px;  
  margin-top: var(--margin-p-gutter);
  margin-left: auto;
  margin-right: 0;  
}

@media (min-width: 576px) {
  
  .footer-wrap .how-box .limited-cta img.messaging-partners-img {
    height: 2.6em;
    width: auto;
    position: absolute;
    right: var(--margin-p-gutter);
    bottom: var(--margin-p-gutter);
  }

}

/* -------- 黏在底部的 FOOTER -------- */

.sticker-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-pink);
  text-align: center;
  color: white;
  padding: 1em 1em;
  line-height: 1;
  font-size: 1.2em;
  z-index: 999;
  font-family: var(--font-family-noto-sans);
  opacity: .86;
  /* opacity: 0; */
  /* visibility: hidden; */
  transform: translate(0, 100%);
  transition: .1s ease transform, .1s linear opacity, .1s linear visibility;

}
.sticker-footer.visible {
  /* opacity: .86; */
  /* visibility: visible; */
  transform: translate(0) 
}

.sticker-footer a{
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

/* -------- 圖片的預覽放大功能 -------- */

/* 外框 */
.view-img-box {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  margin: auto;
  display: flex;
  padding: var(--margin-p-gutter);
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: .2s linear visibility, .2s linear opacity;
}
.view-img-box.visible {
  opacity: 1;
  visibility: visible;
}

.view-img-box > img.view-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(.6em, 0);
  transition: .2s linear all;
}
.view-img-box.visible > img.view-img {
  transform: translate(0, 0)
}

.view-img-box.visible > .close-button {
  color: white;
  position: fixed;
  z-index: 1201;
  right: 1em;
  top: 1em;
  min-width: 1em;
  height: 1em;
  font-size: 2em;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  text-shadow: var(--text-shadow-normal);
}