/*
電光橙 (#FF6B00)　→ 象徵創意能量與活力
深炭灰 (#1A1A1A)　→ 專業、穩重的底色
亮銀灰 (#CCC)　→ 科技感與對比層次
純白 (#FFF)　→ 提升可讀性與呼吸感
明亮橙色作為能量象徵，搭配暗色背景呈現強烈的對比與品牌力量適合想強調 「創意＋專業＋視覺衝擊」。

紫紅漸層 (#7F00FF → #E100FF)　→ 代表創意與想像力
DEEP1 > (#3b0175 → #740283)
DEEP2 > (#352162 → #5e2661)
以漸層紫紅象徵創新、突破與靈感爆發，加入亮色作為品牌記憶點非常適合有藝術性與設計導向的創意廣告公司。

品牌藍 (#0052CC)　→ 專業、信任、穩定
亮橘 (#FFA500)　→ 創意與能量點綴
藍色為基調傳遞專業信任感，橘色用於強調創意與互動區域（按鈕、icon）。整體乾淨、現代、國際感強。

H #F37021 #F37022
#FAD689 #F19483 #C46243
#FFFF00
T#0abab5 #66FFE6
#8480a4 #330066
#000 #625B57 #666 #FFF
*/

:root{
  /* main color */
  --color-main-orange: #FF6B00;
  --color-main-lightorange: #FFA500;
  --color-text-black: #1A1A1A;
  --color-text-gray: #CCC;
  --web-bg1: linear-gradient(to right, #740283, #352162);
  --web-bg2: linear-gradient(to left, #740283, #352162);
}
html {
  scroll-behavior: smooth; /* 點擊錨點時平滑捲動 */
}
body{ color: var(--color-text-black);}

.swiper-wrapper li:last-child{ display: none; }

.hvideo{ width: 100%; height: 100%; }
.Harea{ margin: 120px auto 50px; }
.ctArea{ width: 80%; margin: 0 auto; }
.text-info{
  margin: 40px auto;
  text-align: center;
  color: var(--color-text-black);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
}
.text-info.slogan{ font-size: 26px; font-weight: bolder; font-style: italic; color:#0052CC; }
.text-info h3{ font-size: 28px; font-weight: bold; color:#330066; }
.text-info .subTT{ padding:5px; font-size: 15px; color:#333; letter-spacing: 1px; }
.text-info .subTT span{ color: #FFF; margin-right:5px; padding:2px 5px; border-radius: 5px;}
.text-info .subTT.Ptext span{ background:#740283;}
.text-info .subTT.Atext span{ background:#3b0175;}
.header__bgWrap{
  background: var(--web-bg1);
}
.serviceArea{
  display: flex;
  flex-direction: row;
}
.serviceArea time{ width: 32%;/*42%*/ height: 110px; }
.serviceArea ul{ margin: 5px;}
.enTitleTT{ display: block; font-size: 13px; color: var(--color-main-orange);}
.twTitleTT{ display: block; font-size: 13px; color: var(--color-text-gray); margin-top:20px;}

.ctArea.join{ display: flex; flex-direction: row; margin-top:80px; }
.joinArea{ margin: 0 10px; }
.lrauto{ text-align:center; margin: 50px auto; }

.goTOP{
  position: fixed;
  left: 0;
  bottom: 0;
}

#news .contentIn{ padding: 1% 8% 0; }
.goodsList__link{ cursor: text;}
.goodsList__link:hover .goodsList__title{ color: #FFA500; }

.footer_sns{
  min-width: 295px;
}
.footer_bt--icon{ width:80%; height:80%; }
.footer_copyright{ font-size: 13px;}

/* 手機螢幕寬度最大 767px（手機尺寸） */
@media screen and (max-width: 767px) {
  .serviceArea,
  .ctArea.join{ display: block !important; }
  .header__toTOP{
    width: 60px;
    height: 60px;
    opacity: .85;
  }
  .header__toTOP .header__navBtn::before{
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    right: 50%;
    bottom: 0;
    transition: .4s ease;
    background-color: #000;
    text-align: center;
  }
  .header__toTOP:hover .header__navBtn::before{
    content: '';
  }

  .serviceArea time{ width:44%; }
  .loading__logo.-maru{ top: -15px}
  .storySwiperBg{ height: calc(395 / var(--min-ww) * 100vw);}
  .mvBannerContWrap { padding: 7% 0; margin: 130px auto 0px;}
  .text-info h3{ font-size: 25px;}
  .text-info p{ line-height: 20px; margin-bottom: 15px;}
  .text-info.slogan{ font-size: 28px; line-height:36px;}
  .introText_txtIn p{ font-size: 18px; line-height: 24px;}
  .newsList__title.cr{ padding-top: 14px; }

  .footer_sitemap,
  .footer_sns{ margin: 0 auto; text-align: center; }
  .footer_sns .comSNSLists{ padding-left: 15px; }
  .footer_copyright{ font-size: 10px; margin: 5px 0; }
  .footerIn{ padding-bottom: 0; }
  .footer_copyright{ padding-top: 0;}
}