/*
 * about_us 頁面 .about_top_box 樣式覆蓋
 * 目標樣式來源：關於公司.dc.html 內 [data-dc-tpl="30"] 區塊（頁首視覺區）
 *
 * 現有版型系統會針對此模組以 [data-module-code="..."][data-unicode="..."] 屬性選擇器
 * 注入樣式（含跨網域主題 CSS，優先權未知且無法確定載入順序），單純用 .about_top_box
 * 或 [data-module-code] 選擇器覆蓋並不可靠。
 * 因此改用「自訂 class name（.about_top_box）重複疊加」的方式墊高選擇器優先權
 * （.about_top_box.about_top_box = 2 個 class，且再加上 .main / section 等既有 class
 * 與標籤層級），確保不論原樣式來源與載入順序為何都能穩定覆蓋，且不需使用 !important。
 */
.about_top_box{
  margin-top: 50px;
}

.about_top_box .module-container .main .bgfixed {
  position: relative;
  background-position: center bottom 150px;
}

.about_top_box .module-container .main .bgfixed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(48, 25, 67, .82) 0%, rgba(48, 25, 67, .55) 45%, rgba(48, 25, 67, .1) 100%);
}

.about_top_box .module-container .main .bgfixed > div {
  position: relative;
  z-index: 1;
}

.about_top_box .module-container .main .bgfixed > div section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about_top_box .module-container .main .bgfixed > div section h4,
.about_top_box .module-container .main .bgfixed > div section h2,
.about_top_box .module-container .main .bgfixed > div section p {
  margin: 0;
}

.about_top_box .module-container .main .bgfixed > div section h4 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  color: #c9b6e4;
  font-family: 'Poppins', Arial, sans-serif;
}

.about_top_box .module-container .main .bgfixed > div section h2 {
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1.2;
}

.about_top_box .module-container .main .bgfixed > div section h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: #8d6ccb;
  margin-top: 14px;
}

.about_top_box .module-container .main .bgfixed > div section p {
  font-size: 17px;
  font-weight: 500;
  color: #e6dcf3;
  letter-spacing: .05em;
  margin-top: 6px;
}

@media (max-width:767px) {
  .about_top_box{
    margin-top: 0;
  }

  .about_top_box .module-container .main .bgfixed{
    background-position: center bottom;
  }
}

@media (max-width:575px) {
  .about_top_box .module-container .main .bgfixed > div section h2{
    font-size: 36px;
  }
}

/*
 * .about_info_wrap 區塊（對應 關於公司.dc.html 的 [data-dc-tpl="39"]）
 * 目標樣式左右留白為 max-width:1440px + padding:24px 的置中容器。
 *
 * 留白做法二選一：
 *   (a) 在外層 .module-container 用 padding 把 .main.row 往內推
 *   (b) 直接在 .about_info_img / .about_info_box 兩個欄位上改用百分比寬度置中
 * 選擇 (a)：這兩個欄位本來就是 Bootstrap 欄位（col-lg-3 / col-lg-9），手機版已經
 * 靠 col-md-12 / col-12 自動變成滿版堆疊，若改用百分比寬度會需要另外為手機版
 * 重新設定寬度、還可能打架。用外層 padding 只需調整單一數值，且與既有的
 * row(-15px) / col(15px) gutter 抵銷關係相容，不論桌機或手機都能維持一致留白，
 * 手機版要調整只需在 media query 改這裡的 padding 即可。
 */
.about_info_wrap{
  margin-bottom: 5rem;
}

.about_info_wrap > .module-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .about_info_wrap > .module-container {
    padding: 0 16px;
  }
}

/*
 * .about_title 區塊（對應 [data-dc-tpl="40"]）
 * .about_title 為共用標題元件 class，頁面上「關於格斯」「門市據點」皆共用，
 * 套用後兩處標題都會加上同樣的底線效果，屬預期的一致設計語言。
 * 底線用 h2::after 偽元素生成，不需額外增加 DOM 節點。
 */
.about_title section.text-link h2 {
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.about_title section.text-link h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: #703093;
  margin: 12px auto 0;
}

@media (max-width:767px) {
  .about_title section.text-link h2{
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}

/* .about_info_img 區塊（對應 [data-dc-tpl="44"]）：圖片外框 */
.about_info_img.about_info_img {
  border-top: 4px solid #703093;
  background: #f0edf7;
  max-width: 390px;
  flex: 0 0 390px;
}

.about_info_img .module-container, 
.about_info_img .module-container .main{
  height: 100%;
}

.about_info_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
} 

@media (max-width:767px) {
  .about_info_img.about_info_img{
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* .about_info_box 區塊（對應 [data-dc-tpl="48"]）：內容直向排列，統一用 gap 控制間距 */
.about_info_box{
  max-width: calc(100% - 390px);
  flex: 0 0 calc(100% - 390px);
  padding-left: 4rem;
}

.about_info_box .main > div[data-unicode] {
  display: flex;
  flex-direction: column;
}

.about_info_box .main > [data-unicode] > p,
.about_info_box .main > [data-unicode] > h4,
.about_info_box .main > [data-unicode] > ul {
  margin: 0;
}

.about_info_box .main > div[data-unicode] > p,
.about_info_box .main > div[data-unicode] > h4{
  margin-bottom: 2rem;
}

/*
 * .about_title 內多餘的區塊（CMS 預設帶出的空連結清單，實際無內容卻仍佔一塊
 * 灰底空間），關於公司.dc.html 沒有對應內容，移除以維持版面一致。
 */
.about_title.about_title .header-title,
.about_title.about_title .link-list {
  display: none;
}

/* .about_info_box 內文段落（對應 [data-dc-tpl="49"]） */
.about_info_box.about_info_box [data-unicode] p {
  margin: 0;
  font-size: 18px;
  line-height: 2;
  color: #4a4560;
}

@media (max-width:1199px) {
  .about_info_box.about_info_box [data-unicode] p, 
  .about_info_box.about_info_box [data-unicode] h4{
    line-height: 1.7;
  }
}

@media (max-width:991px) {
  .about_info_box.about_info_box [data-unicode] h4{
    padding: 15px 20px;
  }
}

/*
 * .about_info_box 提示區塊（對應 [data-dc-tpl="48"] 內的 [data-dc-tpl="50"]）
 * 目標為 <div> 包 ◆ 圖示 + <p> 文字，這裡以單一 h4 元素呈現文字，
 * ◆ 圖示改用 ::before 偽元素生成，不需額外 DOM 節點。
 */
.about_info_box.about_info_box [data-unicode] h4 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  background: #fbfaff;
  border: 1px solid #e3ddf0;
  border-left: 4px solid #703093;
  padding: 22px 26px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
  color: #2d2160;
}

.about_info_box.about_info_box [data-unicode] h4::before {
  content: "\25C6";
  flex: none;
  color: #703093;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width:575px) {
  .about_info_box.about_info_box [data-unicode] h4{
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.7;
  }
}

/* .about_info_box BRANCHES 標籤（對應 [data-dc-tpl="54"]） */
.about_info_box.about_info_box [data-unicode] h6 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  color: #8d6ccb;
  font-family: 'Poppins', Arial, sans-serif;
}

/*
 * .about_info_box 門市清單（對應 [data-dc-tpl="55"]）
 * 原生 ul 預設項目符號與縮排在目標樣式中不存在，一併清除以還原成單純網格。
 */
.about_info_box.about_info_box [data-unicode] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/*
 * 待辦補完：.about_info_box 門市清單的個別 li（原本只套了外層 grid，
 * 缺少單張卡片的邊框／置中／hover 樣式）。
 */
.about_info_box.about_info_box [data-unicode] ul li {
  border: 1px solid #e3ddf0;
  padding: 20px 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #301943;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s cubic-bezier(.2, .7, .3, 1),
    box-shadow .2s cubic-bezier(.2, .7, .3, 1),
    transform .2s cubic-bezier(.2, .7, .3, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.about_info_box.about_info_box [data-unicode] ul li:hover {
  border-color: #703093;
  box-shadow: 0 8px 20px rgba(48, 25, 67, .1);
  transform: translateY(-2px);
}

@media (max-width:991px) {
  .about_info_box{
    padding-left: 3rem;
  }

  .about_info_box.about_info_box [data-unicode] p{
    font-size: 17px;
  }

  .about_info_box.about_info_box [data-unicode] ul li{
    padding: 15px 10px;
  }
}

@media (max-width:767px) {
  .about_info_wrap {
    margin-bottom: 3rem;
  }

  .about_info_box{
    padding: 1.5rem 1rem 0;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

@media (max-width:575px) {
  .about_info_box.about_info_box [data-unicode] p{
    font-size: 16px;
    line-height: 1.6;
  }

  .about_info_box.about_info_box [data-unicode] ul{
    display: flex;
    flex-wrap: wrap;
  }

  .about_info_box.about_info_box [data-unicode] ul li{
    width: calc(50% - 6px);
  }
}

/*
 * ============================================================
 * 「門市據點」區塊（原始檔第 92 行起，對應目前 gotravel_travel_design/
 * Main.dc.html——此檔已由 關於公司.dc.html 更名，元素順序也有調整，
 * 故以下 data-dc-tpl 編號是重新對照當下版本量測所得，與上方舊區塊
 * 記錄的編號屬不同時間點的快照，不互相對應）。
 *
 * 頁面上這裡其實是兩個獨立的 CMS 區塊（.about_stronghold_wrap 出現兩次）：
 *   第一個：標題「門市據點」＋ 總公司卡片(.about_strongholdL) ＋ LINE(.about_strongholdQR)
 *   第二個：四張分公司卡片(.about_stronghold_other × 4)
 * 兩者共用同一底色，用 .about_stronghold_wrap + .about_stronghold_wrap
 * 選出「第二個」區塊，分別在頭尾補上 padding，避免與上一個區塊黏在一起、
 * 也避免整段底部沒有留白。
 * ============================================================
 */
.about_stronghold_wrap > .module-container .main.row{
  padding: 0 calc(50% - 700px) 30px;
}

.about_stronghold_wrap:nth-last-child(1) > .module-container .main.row{
  padding-bottom: 55px;
}

@media (max-width: 767px) {
  .about_stronghold_wrap.about_stronghold_wrap > .module-container .main.row{
    padding-left: 16px;
    padding-right: 16px;
  }

  .about_stronghold_wrap:nth-last-child(1) > .module-container .main.row{
    padding-bottom: 30px;
  }
}

/*
 * 總公司卡片（.about_strongholdL，對應 Main.dc.html 內總公司資訊區塊）。
 * 內容原生標記為 h5（總公司標籤）／h3（公司名）／ul>li（資訊列）／p（交觀甲・品保），
 * 直向排列所有間距都靠這裡補，原本完全沒有 padding 導致文字貼著卡片邊緣。
 */
.about_strongholdL{
  max-width: calc(100% - 330px);
  flex: 0 0 calc(100% - 330px);
  margin-left: 15px;
}

.about_strongholdL.about_strongholdL .main > div:not(.header-title) {
  background: #fff;
  border-top: 4px solid #703093;
  box-shadow: 0 10px 30px rgba(48, 25, 67, .08);
  padding: 38px 40px;
  box-sizing: border-box;
  height: 100%;
}

.about_strongholdL.about_strongholdL [data-unicode] h5 {
  display: inline-block;
  margin: 0 0 16px;
  background: #703093;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  padding: 5px 14px;
  border-radius: 999px;
}

.about_strongholdL.about_strongholdL [data-unicode] h3 {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 700;
  color: #301943;
  letter-spacing: .02em;
}

.about_strongholdL.about_strongholdL [data-unicode] ul {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  margin-bottom: 1rem;
}

.about_strongholdL.about_strongholdL [data-unicode] ul li {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 16px;
  color: #4a4560;
}

.about_strongholdL.about_strongholdL [data-unicode] ul li:first-child {
  grid-column: span 2;
  align-items: flex-start;
}

.about_strongholdL.about_strongholdL [data-unicode] ul li img {
  width: 17px;
  height: 17px;
  flex: none;
}

.about_strongholdL.about_strongholdL [data-unicode] ul li:first-child img {
  margin-top: 4px;
}

.about_strongholdL.about_strongholdL [data-unicode] p {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid #ece7f6;
  font-size: 16px;
  color: #4a4560;
}

.about_strongholdL.about_strongholdL [data-unicode] p img {
  width: 17px;
  height: 17px;
  flex: none;
}

@media (max-width:1199px) {
  .about_strongholdL{
    max-width: calc(100% - 280px);
    flex: 0 0 calc(100% - 280px);
  }
}

@media (max-width:767px) {
  .about_strongholdL.about_strongholdL .main > div:not(.header-title){
    padding: 30px 30px;
  }

  .about_strongholdL.about_strongholdL [data-unicode] ul{
    display: flex;
    gap: unset;
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .about_strongholdL.about_strongholdL [data-unicode] ul li{
    width: 100%;
    gap: unset;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }

  .about_strongholdL.about_strongholdL [data-unicode] ul li img{
    margin-right: 10px;
  }
}

@media (max-width:575px) {
  .about_strongholdL{
    margin-left: 0;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .about_strongholdL.about_strongholdL .main > div:not(.header-title) {
    padding: 20px 20px;
  }

  .about_strongholdL.about_strongholdL [data-unicode] h3{
    font-size: 24px;
    margin-bottom: 16px;
  }

  .about_strongholdL.about_strongholdL [data-unicode] ul li{
    margin-bottom: 10px;
    font-size: 15px;
  }

  .about_strongholdL.about_strongholdL [data-unicode] ul li img{
    margin-right: 7px;
  }

  .about_strongholdL.about_strongholdL [data-unicode] p{
    font-size: 15px;
    gap: 7px;
  }
}

/*
 * LINE 官方帳號卡片（.about_strongholdQR）。原生標記為
 * h2.row-title（標題）／ul.row-content > li > a > img + h3（QR + 帳號)。
 */
.about_strongholdQR{
  max-width: 300px;
  flex: 0 0 300px;
  margin-right: 15px;
}

.about_strongholdQR > .module-container, 
.about_strongholdQR > .module-container > .main{
  height: 100%;
}

.about_strongholdQR.about_strongholdQR .main > div:not(.header-title) {
  background: #fbfaff;
  border-top: 4px solid #703093;
  border-left: 1px solid #ece7f6;
  box-shadow: 15px 10px 30px rgba(48, 25, 67, .08);
  box-sizing: border-box;
  height: 100%;
  padding: 34px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about_strongholdQR.about_strongholdQR .function-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.about_strongholdQR.about_strongholdQR .row-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #301943;
}

.about_strongholdQR.about_strongholdQR ul.row-content {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  width: 100%;
}

.about_strongholdQR.about_strongholdQR ul.row-content li{
  max-width: 100%;
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
}

.about_strongholdQR.about_strongholdQR ul.row-content a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  position: relative;
  padding: 0;
}

.about_strongholdQR.about_strongholdQR ul.row-content img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #ddd5ec;
  box-sizing: border-box;
}

.about_strongholdQR.about_strongholdQR ul.row-content h3 {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #703093;
}

.about_strongholdQR.about_strongholdQR ul.row-content a::after {
  content: '加入好友';
  display: flex;
  background: rgb(112, 48, 147);
  color: rgb(255, 255, 255);
  font-size: 15px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  transition: background 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.about_strongholdQR.about_strongholdQR ul.row-content a:hover::after{
  background: rgb(90, 34, 119);
}

@media (max-width:1199px) {  
  .about_strongholdQR{
    max-width: 250px;
    flex: 0 0 250px;
  }
}

@media (max-width:575px) {  
  .about_strongholdQR{
    margin-right: 0;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .about_strongholdQR.about_strongholdQR .main > div:not(.header-title){
    border-top: 1px solid #ece7f6;
    border-left-width: 0px;
    padding: 25px 20px;
  }
}

/*
 * 四張分公司卡片（.about_stronghold_other × 4）。原生標記為
 * h3（含門市圖示 img ＋ 名稱 ＋「(易遊網加盟門市)」的 span）／
 * p>span（地址列）／ul>li>span（TEL／FAX 各一行）。
 */
.about_stronghold_other{
  max-width: calc(50% - 30px);
    flex: 0 0 calc(50% - 30px);
    margin: 0 15px;
}

.about_stronghold_other.about_stronghold_other .main > div:not(.header-title) {
  background: #fff;
  border: 1px solid #e6e0f2;
  box-sizing: border-box;
  padding: 28px 30px;
  margin-bottom: 30px;
  transition: box-shadow .2s cubic-bezier(.2, .7, .3, 1),
    transform .2s cubic-bezier(.2, .7, .3, 1);
}

.about_stronghold_other.about_stronghold_other .main > div:not(.header-title):hover {
  box-shadow: 0 12px 28px rgba(48, 25, 67, .12);
  transform: translateY(-3px);
}

.about_stronghold_other.about_stronghold_other h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  color: #301943;
  letter-spacing: .02em;
}

.about_stronghold_other.about_stronghold_other h3 img {
  width: 19px;
  height: 19px;
  flex: none;
}

.about_stronghold_other.about_stronghold_other h3 span {
  font-size: 16px;
  font-weight: 400;
  color: #742891;
  white-space: nowrap;
}

.about_stronghold_other.about_stronghold_other p {
  margin: 0 0 12px;
}

.about_stronghold_other.about_stronghold_other p span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #4a4560;
  line-height: 1.7;
}

.about_stronghold_other.about_stronghold_other p img {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex: none;
}

.about_stronghold_other.about_stronghold_other ul {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #f0edf7;
  list-style: none;
  display: flex;
  gap: 22px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
}

.about_stronghold_other.about_stronghold_other ul li:first-child span {
  color: #301943;
  font-weight: 600;
  font-size: 15px;
}

.about_stronghold_other.about_stronghold_other ul li:last-child span {
  color: #7a7590;
  font-size: 15px;
}

@media (max-width:767px) {
  .about_stronghold_other.about_stronghold_other .main > div:not(.header-title){
    padding: 20px 25px;
  }

  .about_stronghold_other.about_stronghold_other h3 span{
    font-size: 15px;
    margin-left: 30px;
  }

  .about_stronghold_other.about_stronghold_other ul{
    gap: 10px;
    flex-wrap: wrap;
  }

  .about_stronghold_other.about_stronghold_other ul li{
    width: 100%;
  }
}

@media (max-width:575px) {
  .about_stronghold_other {
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0;
  }

  .about_stronghold_other.about_stronghold_other .main > div:not(.header-title){
    padding: 20px;
  }

  .about_stronghold_other.about_stronghold_other h3{
    letter-spacing: 0;
    font-size: 19px;
    margin-bottom: 10px;
  }

  .about_stronghold_other.about_stronghold_other h3 span{
    font-size: 14px;
    margin-left: 0;
  }

  .about_stronghold_other.about_stronghold_other p{
    margin-bottom: 10px;
  }

  .about_stronghold_other.about_stronghold_other ul{
    padding-top: 10px;
    gap: 5px;
  }
}