/* 原swiper相關css for下方廣告輪播 */
.mobile-service-section .swiper-mobservice-prepaid .card .card-link .card-func .card-more {
  color: #333;
}
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-text .select-pid {
  font-size: .75rem;
  padding: .4rem;
  margin: .2rem 0;
  width: 100%;
  box-sizing: border-box;
}
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-func {position: relative;}
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-func .card-more {
  height: auto;
}
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link {
  height: auto;
}
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link .card-text {
  -webkit-line-clamp: initial;
  padding-bottom: 0.2rem;
}
/* .mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link .card-text.mh1 {
  padding-bottom: 1.2rem;
} */
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link .card-text ul {
  /*height: 148px; 抽出到VIEW上設定*/
  margin: 0;
  padding-left: 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cecece #f5f5f5;
  scrollbar-gutter: auto;
}
/* 抽出到VIEW上設定
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link .card-text ul.with-select {
  height: 148px;
}
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link .card-text ul.no-select {
  height: 188px;
}*/

.mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-func .card-more {
  height: auto;
}
/*230908 program card 增加 內容變動高度 及 內容含select css end*/
.mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-text .select-option {
  background: #f5f5f5;
  font-weight: normal;
  border: 1px solid #f5f5f5;
  line-height: 1.15;
}
.select-option:disabled {
  background: #f5f5f5 !important;
  font-weight: normal !important;
  border: 1px solid #f5f5f5 !important;
  line-height: 1.15 !important;
  color: black !important;
}
.dropdownRequiredAlert {
  border-color: red !important;
  border-width: medium !important;
}

@media (max-width: 767px){
  .mobile-service-section.bind-container .container .mySwiper-mobile-service {width: auto !important;}
  .mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-text .select-pid,
  .mobile-service-section.bind-container .swiper-mobservice-prepaid .card .card-link .card-text .select-discount {font-size: .85rem;}
  .mySwiper-mobile-service .swiper-button-next, .mySwiper-mobile-service .swiper-button-prev {display: none;}
}


/*241231 寬頻推薦資費 */
.broadband-fliter-category-select {padding: 2rem 0;}
.broadband-fliter-category-select ul {display: flex; justify-content: space-around; margin: 0; list-style: none; border-radius: 4px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);}
.broadband-fliter-category-select li {background: #fff; font-size: 1.2rem; font-weight: bold; width: 50%; text-align: center; border-bottom: 3px solid #ccc;}
.broadband-fliter-category-select li a {color: #666; padding: .8rem 0; display: block;}
.broadband-fliter-category-select li a:hover {color: #209cff; text-decoration: none;}
.broadband-fliter-category-select li.active {border-bottom: 3px solid #209cff;}
.broadband-fliter-category-select li.active a {color: #209cff;}
.broadband-fliter-category-select li:first-child {border-right: 1px solid #e5e5e5;  border-radius: 4px 0 0 4px;}
.broadband-fliter-category-select li:last-child {border-radius: 0 4px 4px 0;}

.mySwiper-mobile-service .swiper-container {padding-right: 0;}
.rateplane-container .rateplane-title{font-size: 28px; font-weight: bold; display: flex; justify-content: space-between; align-items: center;}
.rateplane-container .rateplane-header-tab {background-color: #efefef; width: 100%; margin: 1rem 0; padding: .5rem; font-size: .8rem;}
.rateplane-container .rateplane-header-tab .container {display: flex; justify-content: space-between; padding: 0 1rem;}
.rateplane-container .rateplane-header-tab .rateplane-count {text-align: left; font-weight: bold;}
.rateplane-container .rateplane-header-tab .rateplane-sort {text-align: right; display: flex;}
.rateplane-container .rateplane-header-tab .rateplane-sort a {color: #666; display: flex;}
.rateplane-container .rateplane-header-tab .rateplane-sort a:hover {color: #209cff;text-decoration: none;}
.rateplane-container .rateplane-header-tab .rateplane-sort span {display: flex; align-items: center;}
.rateplane-container .rateplane-header-tab .rateplane-sort .active span {color: #209cff;}
.rateplane-container .rateplane-header-tab .rateplane-sort span::after {content: ''; background: url(../img/icon-24-ascending-order-gray.svg) no-repeat; width: 24px; height: 24px; display: inline-block;}
.rateplane-container .rateplane-header-tab .rateplane-sort .active span::after {content: ''; background: url(../img/icon-24-ascending-order.svg) no-repeat; width: 24px; height: 24px; display: inline-block;}
.rateplane-container .rateplane-header-tab .rateplane-sort .active span.dec::after {content: ''; background: url(../img/icon-24-decending-order.svg) no-repeat; width: 24px; height: 24px; display: inline-block;}

.rateplane-filter {margin-bottom: 2.2rem;}
.rateplane-filter-self {position: relative; background: #fff; margin: 1.2rem auto 0 auto;  padding: .2rem 1.2rem; border: 2px solid #e5e5e5; border-radius: 8px;}
.rateplane-filter-self-list {font-size: .8rem; padding: .4rem 0; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center;}
.rateplane-filter-self-list:first-child {padding: .8rem 0;}
.rateplane-filter-self-list:last-child {padding: .4rem 0; border-bottom: 0;}
.rateplane-filter-self-list>label {font-weight: bold; margin-right: 3rem; line-height: 21px; white-space: nowrap;}
.rateplane-filter-self-list span {font-size: .65rem; font-weight: normal; color: #999; display: block;}
.rateplane-filter-collapse {font-size: .9rem; font-weight: normal; display: flex; align-items: center; line-height: 24px; display: none;}
.rateplane-filter-collapse::before {content: ''; background: url(../img/icon-24-filter.svg) no-repeat; width: 24px; height: 24px; margin-right: 4px; display: inline-block;}
.rateplane-filter-collapse.active {display: flex;}
.rateplane-filter-func {position: relative; text-align: center;}
.rateplane-filter-func .button {min-width: 200px; margin-top: 1.6rem; box-shadow: none;}

.ask-my-rate {position: absolute; right: 30px; top: 28px; font-size: 14px; color: #848484; text-decoration: underline;}
.ask-my-rate-content .filter-box {margin: 0; list-style: none;}
.ask-my-rate-content h2 {font-size: 1.2rem; font-weight: bold; text-align: center; margin-bottom: .6rem;}
.ask-my-rate-content>ul>li {font-size: .8rem; padding: .6rem 0; border-bottom: 1px solid #e5e5e5;}
.ask-my-rate-content>ul>li:last-child {border-bottom: 0;}
.ask-my-rate-content>ul>li>span.ask-note {font-size: .7rem; color: #999; display: block;}

.ask-my-rate-content .rateplane-filter-self-item {margin: .4rem 0;}
.ask-my-rate-content .rateplane-filter-self-item input[disabled]:checked+label+label+label {background-color: #d3d3d3; color: #666;}
.ask-my-rate-content .ask-my-rate-list {display: flex; flex-wrap: wrap; margin: .4rem 0 0 0; list-style: none; line-height: 2.2;}
.ask-my-rate-content .ask-my-rate-list li {width: 50%;}
.ask-my-rate-content .ask-my-rate-list input[type="checkbox"]+label .icon { position: absolute; top: 7px; left: 4px; display: inline-block; width: 22px; height: 22px; vertical-align: text-bottom; border: solid 2px #666; border-radius: 3px;}
.ask-my-rate-content .ask-my-rate-list input[type="checkbox"]:checked+label .icon {background: url(../img/check_01.png) #209cff center 60% no-repeat; background-size: auto 60%; border: solid 2px #209cff;}
.ask-my-rate-content .ask-my-rate-list input[type="checkbox"][disabled]+label {cursor: not-allowed;}
.ask-my-rate-content .ask-my-rate-list input[type="checkbox"][disabled]+label .icon {border: 2px solid #d3d3d3;}
.ask-my-rate-content .ask-my-rate-list input[type="checkbox"][disabled]:checked+label .icon {background-color: #d3d3d3; border: 2px solid #d3d3d3;}
.ask-my-rate-content .ask-my-rate-list label {background: #fff; position: relative; display: flex ; align-items: center; height: auto; padding: 0px 10px 0px 36px; color: #666; transition: 0.3s all ease-in-out; cursor: pointer;}
.ask-my-rate-func {text-align: center;}
.ask-my-rate-func .button {min-width: 200px; margin-top: 1rem; box-shadow: none;}
.ask-my-rate-func .button:hover {box-shadow: none;}
.ask-my-rate-result {padding-top: 1rem; border-top: 1px solid #e5e5e5; display: none;}
.ask-my-rate-result ul {background: #E8F5FF; text-align: center; list-style: none; font-size: .9rem; font-weight: 500; margin: 0 0 .6rem 0; padding: .8rem; border-radius: 12px;}
.ask-my-rate-result ul li.ask-my-rate-speed {color: #209cff; font-size: 1.2rem; font-weight: 500; margin-top: .6rem;}
.ask-my-rate-result .ask-my-rate-result-note {font-size: .7rem; color: #848484;}

.warning-message { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.7); color: #fff; padding: 10px 20px; border: 0; border-radius: 5px; font-size: 14px; display: none; z-index: 1000;}

.rateplane-search-result {padding: 0 1rem; margin-bottom: 1rem;}
.rateplane-search-key {display: flex ; align-items: center; font-size: .8rem; margin-top: .4rem;}
.rateplane-search-key label {font-weight: bold; margin-right: .4rem;}
.rateplane-search-key span.rateplane-search-clear {margin-left: 1rem;}

.rateplane-search-key, .rateplane-search-result, .rateplane-header-tab {display: none;}
.rateplane-search-key.show {display: flex;}
.rateplane-search-result.show, .rateplane-header-tab.show {display: block;}
.rateplane-search-no-result {text-align: center; margin-top: 2rem;}
.rateplane-search-no-result img {max-width: 200px;}
.rateplane-search-no-result .filter-no-result {margin-top: 2rem;}
.rateplane-search-no-result .filter-no-result h2 {font-size: 1.2rem; font-weight: bold;}
.rateplane-search-no-result .filter-no-result span {font-size: .9rem;}

/* .mySwiper-mobile-service .card .p_table {
  margin: 0.4rem auto;
}
.mySwiper-mobile-service .card .p_table td {
  padding: 0.3rem 0.4rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.mySwiper-mobile-service .card .p_table select {
  padding: 0 1.4rem 0 0.4rem;
  font-weight: normal;
  border: 0;
} */



@media (max-width: 767px){
  .mobile-service-section.bind-container .swiper-mobservice-prepaid .card.card-flex-height .card-link .card-text {padding-bottom: .6rem;}
  .broadband-fliter-category-select li {font-size: 18px;}
  .rateplane-container .rateplane-title {font-size: 24px;}
  .rateplane-container .rateplane-header-tab {padding: .2rem 0;}
  .rateplane-container .rateplane-header-tab .container {flex-direction: column; padding: 0 1rem;}
  .rateplane-filter {margin-bottom: .6rem;}
  .rateplane-filter-self-list {flex-direction: column; align-items: self-start;}
  .rateplane-filter-self-list>label {font-size: 16px; margin-bottom: .8rem;}
  .rateplane-filter-self-list>label>span {display: inline-block; margin-left: 4px;}
  .rateplane-filter-func .button {font-size: 16px;}
  .ask-my-rate {top: 18px; right: 20px;}
  .ask-my-rate-content>ul>li {font-size: 16px;}
  .ask-my-rate-content>ul>li>span.ask-note {font-size: 14px;}
  .ask-my-rate-content {vertical-align: middle;}
  .ask-my-rate-content .ask-my-rate-list {flex-direction: column;}
  .ask-my-rate-content .ask-my-rate-list li {font-size: 16px; margin-bottom: .2rem; width: 100%;}
  .ask-my-rate-content .ask-my-rate-list input[type="checkbox"]+label .icon {top: 4px;}
  .ask-my-rate-content .filter-box-content .CheckTag span {flex: 1; white-space: nowrap;}
  .ask-my-rate-func {display: flex; justify-content: space-evenly;}
  .ask-my-rate-func .button {font-size: 16px; min-width: 45%; padding: .5rem;}
  .rateplane-search-key {margin-bottom: .6rem; margin-top: .6rem; padding: 0 1rem;}
  .rateplane-search-key.show {display: inline-block;}
  .rateplane-search-key label {line-height: 1.6;}
  .rateplane-search-result {padding: 0;}
}

/* fancybox */
.fancybox-container {z-index: 9999999;}
/* .filter-box {display: none; width: 600px;} */
.filter-box .fancybox-close-small {box-shadow: none;}
.filter-box .fancybox-close-small:hover {transform: scale(1);}
.filter-box .fancybox-close-small:after {background: none; top: 20px; right: 12px; width: 36px; height: 36px; font-size: 40px; border-radius: 0; outline: none;}
/* .filter-box .Row {padding-bottom: 1rem; border-bottom: 1px solid #e5e5e5;} */
.filter-box .Row .Category {width: 100%; margin-top: .6rem;}
.filter-box-head h2 {text-align: center; padding-bottom: .6rem; margin-bottom: 0; margin-top: 0.4rem; font-size: 1.4rem; border-bottom: 1px solid #e5e5e5;}
.filter-box-content {max-height: 66%; overflow-y: auto;}
/* .filter-box-content input[type=radio]+label+label+label {font-weight: 500;} */
.filter-box .fixedButtons {text-align: center; margin-top: 1rem;}
.filter-box .fixedButtons button {font-size: 1rem; padding: 0.8rem 2rem;}
/* .filter-box input[type=number] {width: 100%;} */
.filter-box input {display: none;}
.filter-box input+label {position: absolute; background-color: #f5f5f5; width: 100%; left: 0; top: 0; bottom:0; margin-top: 0; min-height: 36px; border: 0; border-radius: 12px; pointer-events: all; display: block;}
.filter-box input+label+label {width: 0; height: 0; border: 0; display: block;}

.filter-box input+label+label+label {position: relative; color: #666; font-size: .75rem; font-weight: normal; margin: initial; text-align: center; width: 100%; height: 100%; min-width: 85px; padding: 0 1rem; line-height: 36px; border: 0; border-radius: 12px; cursor: pointer; display: block;}
.filter-box input[disabled]+label+label+label {color: #99a1a7; cursor: not-allowed;}
.filter-box input:checked+label+label+label {background-color: #ecf7ff; color: #209cff;}
.filter-box input[name=SpecifyNumberInput] {width: auto; padding: 0.6rem; margin: 0.3rem; outline: 0;}
.filter-box input[name=SpecifyNumberInput]:focus {border: 1px solid #3aa7ff; box-shadow: 0 0 4px #aaa;}
.filter-box .CheckTag span, .filter-box .RuleOutNumTag span {position: relative; width: auto; min-width: 85px; line-height: 36px; text-align: center; margin: 0.2rem; border-radius: 12px; display: inline-block;}
.filter-box .RuleOutNumTag span {width: 36px;}
.filter-box .CheckTag span a, .filter-box .RuleOutNumTag span a {color: #666; font-size: .9rem; display: block;}
/* fancybox custom animation */
.fancybox-fx-slide-in-out.fancybox-slide--previous {transform: translateY(+100%);}
.fancybox-fx-slide-in-out.fancybox-slide--next {transform: translateY(100%);}
.fancybox-fx-slide-in-out.fancybox-slide--current {transform: translateY(0); bottom: 0;}

@media (max-width: 767px){
  /*html.fancybox-enabled, html.fancybox-enabled body {overscroll-behavior: none;} */
  .fancybox-slide>* {width: 100%; vertical-align: bottom; margin-bottom: 0;}
  .filter-box {width: 95%; border-radius: 12px 12px 0 0;}
  .filter-box input+label+label+label {font-size: 15px;line-height: 1.4; padding: .4rem 1rem; align-items: center; display: flex; justify-content: center;}
  .filter-box.rateplane-filter-self-list {padding: .8rem 0 .2rem 0; width: 100%;}
  .filter-box-content {width: 100%;}
  .filter-box-content .CheckTag {display: flex ; flex-wrap: wrap; justify-content: flex-start;}
  .filter-box-content .CheckTag span {flex: 0 0 47%; margin-bottom: .6rem; margin-top: 0;}
  .warning-message {width: 85%;}
  .rateplane-filter-self-list:nth-child(2) .filter-box-content .CheckTag span {flex: 0 0 31%;}

}

/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}
/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}