/* ================================================================
   次選單基礎樣式 (通用)
   ================================================================ */
.sub-menu-list {
  display: none; /* 預設隱藏 */
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

.sub-menu-list li {
  width: 100%;
}

.sub-menu-list li a {
  display: block;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ================================================================
   桌面版樣式 (>= 980px)
   ================================================================ */
@media (min-width: 981px) {
  .has-submenu {
    position: relative; /* 讓次選單相對此層定位 */
  }

  /* 滑鼠移入 Wrapper 時顯示次選單 */
  .has-submenu:hover .sub-menu-list {
    display: block !important;
  }

  .sub-menu-list {
    position: absolute;
    top: 100%;   /* 緊貼主選單下方 */
    left: 0;
    width: 220px;
    z-index: 999;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
    padding: 10px 0;
  }

  .sub-menu-list li a {
    padding: 22px 20px;
    color: #131637;
    font-size: 15px;
    border-left: 3px solid transparent;
    background: url(../img/cta/icon_blackarrow.svg) 90% center;
    background-repeat: no-repeat;
    background-size: 10px auto;
  }

  /* 桌面版 Hover 效果 */
  .sub-menu-list li a:hover {
    background-color: #f8f9fa;
    font-weight: 800;
    color: #3c69ff;
    /*border-left: 3px solid #007bff;*/
    padding-left: 25px; /* 輕微右移 */
  }
}

/* ================================================================
   手機版樣式 (< 980px)
   ================================================================ */
@media (max-width: 980px) {
  /* 強制重置桌面版可能的干擾樣式 */
  .sub-menu-list {
    position: static !important;  /* 回歸正常流，撐開下方內容 */
    width: 100% !important;      /* 寬度填滿 */
    box-shadow: none !important;  /* 移除陰影 */
    border: none !important;
    background-color: #f9f9f9;    /* 背景稍微深一點做區隔 */
  }

  /* 當 JS 切換 is-open 類別時顯示 */
  .sub-menu-list.is-open {
    display: block !important;
    margin-top: -1.5rem;
    margin-bottom: 1.5rem;
  }

  .sub-menu-list li a {
    padding: 22px 100px 22px 20px;
    color: #131637;
    font-size: 15px;
    border-left: 3px solid transparent;
    background: url(../img/cta/icon_blackarrow.svg) 90% center;
    background-repeat: no-repeat;
    background-size: 10px auto;
  }
  /* 桌面版 Hover 效果 */
  .sub-menu-list li a:hover {
    background-color: #f8f9fa;
    font-weight: 800;
    color: #3c69ff;
    /*border-left: 3px solid #007bff;*/
    padding-left: 25px; /* 輕微右移 */
  }

  .sub-menu-list li:last-child a {
    border-bottom: none;
  }

  /* --- 三角形圖示樣式 --- */
  .has-submenu > .top-menu-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* 只有 has-submenu 才會出現三角形 */
  .has-submenu > .top-menu-item::after {
    content: '▼';
    position: absolute;
    top: 23px;
    left: 125px;
    font-size: 10px;
    color: #757b93;
    transition: transform 0.3s ease;
  }

  /* 當選單展開時，三角形旋轉 */
  .has-submenu.is-open > .top-menu-item::after {
    transform: rotate(180deg);
  }
  /*.has-submenu:hover > .top-menu-item::after {
    color: #07f0b7 !important;
  }*/

  .top-menu-mt {
  margin-top: -10px;
}
}

/* ================================================================
   vicoin 智販店
   ================================================================ */
.vicoin-function-icon-1::before  {
  background-image: url(../img/vicoin/vicoin_icon-1.svg);
  background-size: 45% auto;
}
.vicoin-function-icon-2::before  {
  background-image: url(../img/vicoin/vicoin_icon-2.svg);
  background-size: 40% auto;
}
.vicoin-function-icon-3::before  {
  background-image: url(../img/vicoin/vicoin_icon-3.svg);
  background-size: 50% auto;
}
.vicoin-function-icon-4::before  {
  background-image: url(../img/vicoin/vicoin_icon-4.svg);
  background-size: 50% auto;
  background-position: 55% 50%;
}


.question-mask-vicoin {
  background-color: #ffffff90;
  height: 200px;
}
.question-mask-vicoin p {
  padding-top: 10px;
}

.solution-sub {
  max-width: 120px;
  margin: 0 auto;
  color: #424554;
  border: 1px solid #424554;
  border-radius: 4px;
  margin-bottom: 2rem;
}
.card-vicoin-item p {
  display: block;
  font-size: 16px;
  white-space:initial;
}
.sub-vicoin {
  font-size: 18px;
  color: #757b93;
}
.feature-vicoin {
  margin-top: 1rem;
}
.feature-vicoin-check ul, .feature-vicoin-tag ul {
  display: flex;
  gap: 10px;        /* li之間的間距 */
  padding: 0;
  margin: 0;
  list-style: none; /* 移除圓點 */
}
.feature-vicoin-check {
  font-size: 20px;
  color: #20296c;
  letter-spacing: 0.1rem;
  padding-top: 1.2rem;
  padding-bottom: 1.8rem;
}
.feature-vicoin-check img {
  vertical-align: middle;
  margin-top: -12px;
}
.feature-vicoin-tag {
  font-size: 14px;
  color: #757b93;
}
.feature-vicoin-tag li {
  padding: 0.2rem 0.6rem;
  background-color: #ebebeb;
  border-radius: 22px;
}
@media (max-width: 1222px) {
  .question-mask-vicoin {
    height: 250px;
  }
}
@media (max-width: 1189px) {
  .feature-vicoin-check ul {
    flex-direction: column; /* 改成直式 */
  }
  .feature-vicoin-check li {
    padding-top: 0.5rem;
  }
  .feature-vicoin-check {
    padding-top: 0;
    padding-bottom: 1.4rem;
  }
}
@media (max-width: 767px) {
  .feature-vicoin-check ul {
    flex-direction: row;
  }
  .feature-vicoin-check li {
    padding-top: 0.5rem;
  }
  .feature-vicoin-check {
    padding-top: 0;
    padding-bottom: 1.4rem;
  }
  .sec-crm-vicoin {
    padding: 2rem 1rem 0rem 1rem;
    margin-bottom: 6rem;
  }
  .idPagi_idSwiper_coreFunction.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -40px;
  }
  .question-mask-vicoin {
    height: 200px;
  }
}
@media (max-width: 587px) {
  .feature-vicoin-check ul {
    flex-direction: column; /* 改成直式 */
  }
}
.benefit-vicoin {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 19px rgba(10,83,127,0.31); /* x:0 y:0 blur:19px color:#0a537f 31% */
  padding: 20px;
  transition: all 0.3s ease;
  text-align: center;
}
.benefit-vicoin:hover {
  transform: translateY(-8px); /* 向上移動 */
  box-shadow: 0 12px 28px rgba(10,83,127,0.31); /* 陰影變深更立體 */
}
.benefit-vicoin-title {
  font-size: 3rem;
  color: #3c69ff;
}
.benefit-vicoin-title span {
  font-size: 1.8rem;
  color: #3c69ff;
  vertical-align: super;
  margin-left: 2px;
}
.benefit-vicoin-title img {
  vertical-align: middle;
  max-height: 44px;
}
.font-color-green {
  color: #54beb4 !important;
}
.benefit-vicoin-pl20 {
  padding-left: 20px;
}

/* ================================================================
   viconnect
   ================================================================ */
.viconnect-pb-0 {
  padding-bottom: 0;
}

.feature-viconnect ul {
  display: flex;
  justify-content: center;
  gap: 20px; /* li 之間的間距，可選 */
  list-style: none; /* 移除點點 */
  padding: 0;
}
.feature-viconnect li {
  min-width: 100px;
  text-align: center;
  transition: transform 0.3s ease;
}
.feature-viconnect li p {
  color: #54beb4;
  font-weight: 600;
  padding-top: 0.6rem;
}
.feature-viconnect img {
  max-width: 64px;
  transition: transform 0.3s ease;
}
.viconnect-with-title {
  transition: transform 0.3s ease;
}
/* hover 整個 transform-viconnect 時放大 */
.transform-viconnect:hover .viconnect-with-title {
  transform: scale(1.1);
}
.transform-viconnect:hover .feature-viconnect li {
  transform: scale(1.1);
}
.transform-viconnect:hover .feature-viconnect img {
  transform: scale(1.1);
}

.align-top-viconnect {
  align-items: flex-start;
}
.justify-content-vicoin {
  justify-content: center
}

.row-base-viconnect {
  justify-content: center;
  text-align: center;
  align-items: flex-start;
}
.row-base-viconnect div {
  min-width: 45%;
}
.viconnect-line {
  min-width: 1px !important;
  height: 150px;
  background-color: #ebebeb;
}
.viconnect-before-title {
  padding-bottom: 1rem;
  color: #757b93;
  font-size: 15px;
}
.viconnect-with-title {
  padding-bottom: 1rem;
  color: #3c69ff;
}
.before-viconnec-img img {
  max-width: 220px;
}
@media (max-width: 767px) {
  .viconnect-line {
    height: 1px;
  }
  .has-submenu > .top-menu-item::after {
    left: 125px;
  }
}