@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');



/*-----------------------------------------------
    layout
-----------------------------------------------*/
section{
/*
	width: 100%;
	min-height: 500px;
*/
/*	background: rgba(233, 73, 73, 0.595);*/
/* font-family: 'Montserrat','Noto Sans JP', 'Noto Sans TC', 'PingFang TC', 'Heiti TC','Microsoft JhengHei', Arial, sans-serif;*/

}



.bi::before, [class*=" bi-"]::before, [class^="bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 25px;
}

.bb2::before, [class*=" bi2-"]::before, [class^="bi2-"]::before{
	font-size: 10px;
}
/*-----------------------------------------------
    nav
-----------------------------------------------*/

@media screen and (max-width:768px)
{
 .bi::before, [class*=" bi-"]::before, [class^="bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
}
.bb2::before, [class*=" bi2-"]::before, [class^="bi2-"]::before{
	font-size: 10px;
}
  .navbar {
    margin-top: -56px;
  }

nav ul {
  list-style: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* height: 100vh; */
  background: #000000e0;
  margin: 3px 0 0 0;
}
  .bg-md-black {
    background-color: rgba(0, 0, 0, 0);
  }


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
   padding: 0 0 0 0;
}
}
/*-----------------------------------------------
    懸浮按鈕
-----------------------------------------------*/
.top .aa1 img {
    position: fixed;
    right: 1%;
    top: 40%;
    width: 6em;
    margin-top: -2.5em;
    z-index: 9999;
}
.top .aa2 img {
    position: fixed;
    right: 1%;
    top:56%;
    width: 6em;
    margin-top: -2.5em;
    z-index: 9999;
}

/*-----------------------------------------------
    kv
-----------------------------------------------*/
.kv{
  /* KV 讓桌機/手機都滿版 */
  width: 100%;
}

.kv .swiper-father,
.kv .swiper-container,
.kv .swiper-wrapper,
.kv .swiper-slide{
  width: 100%;
}

/* KV 圖片容器：用固定比例 + cover 來滿版裁切 */
.kv .kv-media{
  width: 100%;
  aspect-ratio: 1920 / 788;
}

.kv .kv-media picture{
  display: block;
  width: 100%;
  height: 100%;
}

.kv .kv-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*
.kv-img{
	width: 100%;
	 height: 500px;
	aspect-ratio: 750/950;
	background: url(../images/m_kv1.jpg) 50% 50% /100% no-repeat  ;
}
*/

@media screen and (max-width:768px)
{
  /* 手機 KV 用 750x950 的比例 */
  .kv .kv-media{
    aspect-ratio: 750 / 950;
  }

/*
	.kv-img{
	width: 100%;
	 height: 500px;
	aspect-ratio: 750/950;
	background: url(../images/m_kv1.jpg) 50% 50% /100% no-repeat  ;
}
*/
  .kv-img{
	width: 100%;
	/* height: 500px; */
	aspect-ratio: 750/950;
	background: url(../images/m_kv2.jpg) 50% 50% /100% no-repeat  ;
}

}
/*-----------------------------------------------
    discount
-----------------------------------------------*/
.discount{
	background: #fff;

}

.discount .box{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	/*! padding: 0 50px; */
}
.sale{
/*	height: 600px;*/
}

.discount .swiper-father{
	width: 100%;
	max-width: 1300px;
	margin: auto;
}

.discount  .swiper-button-prev, .discount .swiper-container-rtl .swiper-button-next {
  left: -43px;
  right: auto;
}

.discount .swiper-button-next,.discount .swiper-container-rtl .swiper-button-prev {
  right: -47px;
  left: auto;
}
.discount .swiper-slide{
	flex-direction: column;
	background-color: #F2F2F2;
}
.discount .swiper-slide img{
	width: 100%;
	margin-bottom: 5%;
}
/*
h3{
	padding-top: 6%;
}
*/
.pp_logo{
	width: 100%;
	max-width: 265px;
	margin: 10% auto 2%;
}
.pp_logo img{
	width: 100%;
	margin: auto;
}
.txt h2{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	color: #333;
}
.txt h2 .Purple{
	color: #874FFF;
	font-weight: bolder;
}
.txt h5{
	font-size: 21px;
	font-weight: 700;
	color: #333;
	text-align: center;
	line-height: 1.5;
}
.txt h5 .red{
	color: #D80C18;
}
/*
.txt .do{
	margin-bottom: -3%;
}
*/
.activity{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	padding: 0;
	box-sizing: border-box;
}
.activity .publicity{
	margin: 3% auto 6%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*! gap: 18px; */
	padding: 0;
}
.activity .publicity .details{
  /* 預設：手機 1 排 1 個 */
  flex: 0 0 100%;
  max-width: 320px;
  background-color: #fff;
  border: 3px solid #874FFF;
  border-radius: 10px;
  text-align: center;
  padding: 0 10px 12px;
  box-sizing: border-box;
  margin: 0 auto;

}

/* 中尺寸：1 排 2 個 */
@media screen and (min-width: 768px){
  .activity .publicity .details{
    flex: 0 0 calc(50% - 18px);
    max-width: calc(50% - 18px);
	  margin-bottom: 2%;
  }
}

/* 桌機：1 排 4 個 */
@media screen and (min-width: 992px){
  .activity .publicity .details{
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
  }
}

.publicity .details .k{
	background-color: #874FFF;
	color: #fff;
	padding: 12px 16px;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin: 0;
	border-radius: 6px 6px 0 0;
	box-sizing: border-box;
	margin: 0 -10px ;
}
.ph{
	width: 100%;
	max-width: 122px;
	margin: auto;
	padding-top: 5%;
	padding-bottom: 5%;
}
.ph img{
	width: 100%;
	margin: auto;
}
.details h5{
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
	height: 100px;
}
.details .red{
	color: #D80C18;
}
.details .line{
	border: 0.5px solid #874FFF;
	width: 90%;
	margin: auto;
}
.details a{
	color: #333;
	font-size: 18px;
	font-weight: 700;
	padding: 15px 20px;
}
.details a:hover{
	color: #874FFF;
}
.line2{
	width: 95%;
	max-width: 1300px;
	border: 1px solid #999899;
	margin: 0 auto 4%;
}

/* 商家優惠券：中尺寸一個置中 70%，手機 90%（桌機由 Swiper 顯示 4 個） */
.discount .discount-swiper .swiper-slide{
  width: 70%;
}
@media screen and (max-width:768px){
  .discount .discount-swiper .swiper-slide{
    width: 90%;
  }
}
@media screen and (min-width:992px){
  .discount .discount-swiper .swiper-slide{
    width: auto;
  }
}
/*-----------------------------------------------
   Swiper txt
-----------------------------------------------*/
.txt22{
	margin-bottom: 2%;
}
.swiper-wrapper .Purple{
	font-size: 18px;
	color: #874FFF;
	margin-top: 20px;
}
 .btn{
	font-size: 18px;
	font-weight: 700;
	margin: auto;
	background-color: #874FFF;
	max-width: 145px;
	border-radius: 20px;
	 margin-bottom: 8%;
}
.btn:hover{
	background-color: #333;
}
.btn a{
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}
.btn2{
	font-size: 24px;
	font-weight: 700;
	margin: auto;
	background-color: #D80C18;
	max-width: 285px;
	max-height: 60px;
	border-radius: 50px;
	margin-bottom: 5%;
	margin-top: 5%;
	padding-top: 8px;
	padding-bottom: 8px;
}
.btn2 a{
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding-left: 55px;
}
.line22{
	width: 100%;
	border: 1px solid #999899;
	margin-top: 6%;
    margin-bottom: 7%;
}
/*-----------------------------------------------
   info
-----------------------------------------------*/
.info{
	background-color: #F2F2F2;

}
.info .box{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 4%;
}
.box .register h2{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	color: #333;
	margin-bottom: 2%;
	margin-left: 2%;
}
.richart{
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	margin: auto;
	width: 100%;
	padding: 0;
}
.richart .teaching{
	flex: 0 0 320px;
	max-width: 320px;
	text-align: center;
	border: 2px solid #333;
	border-radius: 25px;
	background-color: #fff;
	padding: 18px 14px 22px;
	box-sizing: border-box;
}

/* 使用教學：桌機固定 1 排 3 個（即使 992 寬也不會掉下來） */
@media screen and (max-width: 1999px){
	.copy22{
    max-height: max-content;
}
}
@media screen and (min-width: 992px){
  .richart{
    max-width: 1024px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .richart .teaching{
    flex: 1 1 calc((100% - 36px) / 3);
    max-width: 320px;
  }
}

.teaching h4{
	font-size: 24px;
	font-weight: 700;
	padding-top: 1.5%;
}
.teaching h6{
	font-size: 18px;
	line-height: 1.5;
}
.teaching .copy{
	height: 175px;
}

/* 使用教學：桌機 1 排 3 個；中尺寸以下 1 排 1 個 */
@media screen and (max-width: 991px){
  .richart .teaching{
    flex: 0 0 100%;
    max-width: 320px;
  }
}
.register p{
	font-size: 16px;
	width: 100%;
	margin: auto;
	text-align: center;
	margin-top: 3%;
	margin-bottom: 3%;
	padding-left: 3%;
}
.line3{
	width: 100%;
	border: 1px solid #999899;
	margin-top: 8%;
}
@media screen and (max-width: 576px){
  .line3{
    margin-top: 12%;
    margin-bottom: 6%;
  }
}
/*-----------------------------------------------
    pay_ pay01
-----------------------------------------------*/
.uu{
	font-size: 28px;
	font-weight: 700;
	color: #333;
	margin: auto;
	background-color: #fff;
	width: 225px;
	height: 66px;
	text-align: center;
	line-height: 2.5;
	margin-top: 5%;
	margin-bottom: 3%;
}
.pay_ .swiper-slide{
	flex-direction: column;
	margin-bottom: 3%;
}
.very{
	height: 70px;
	line-height: 1.4;
}
.pay044{
	padding-bottom: 10%;
}

/*-----------------------------------------------
    qa
-----------------------------------------------*/
.qa{
	background-color: #FCEAE8;
	width: 100%;
/*	margin-top: -4%;*/
	padding-bottom: 5%;
}
.qa .special{
	font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    color: #333;
    margin: auto;
	padding-bottom: 2%;
}
.qa .accordion-item:first-of-type > .accordion-header .accordion-button {
  line-height: 1.8;
}
.qa .accordion-header{
	line-height: 1.8;
}
.logos{
	width: 100%;
	max-height: 400px;
	margin-top: 10px;

}
.logos img{
	width: 120px;
}
.logo_2{
	margin-left: 10px;
}
.sss{
	font-size: 8px;
	vertical-align: 3px;
}
/*-----------------------------------------------
   deal 其他優惠
-----------------------------------------------*/
.deal{
	background-color: #F2F2F2;
	width: 100%;
}
.deal22{
	padding-bottom: 1%;
}
.other{
	width: 100%;
	max-width: 1300px;
	margin: auto;
}
.other h2{
	font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    color: #333;
    margin: auto;
	padding-bottom: 2%;
	padding-top: 5%;
}
.end{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	padding: 0;
	margin: 0;
}
.finally{
	flex: 0 0 100%;
	max-width: 320px;
	margin: 0 auto;
	margin: 0;
}

/* 其他優惠：桌機 4 / 中尺寸 2 / 手機 1 */
@media screen and (min-width: 768px){
  .finally{
    flex: 0 0 calc(50% - 18px);
    max-width: calc(50% - 18px);
  }
}
@media screen and (min-width: 992px){
  .finally{
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
  }
}
.finally img{
	width: 100%;
}
.doing{
	background-color: #7F8080;
	padding-bottom: 4%;
}
.doing h5{
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-align: center;
	padding-top: 6%;
}
.doing a{
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-align: center;
}
.cut{
	width: 100%;
	max-width: 980px;
	margin: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 40px 20px 3%;
	box-sizing: border-box;
}
.label{
	flex: 0 0 160px;
	max-width: 160px;
}
.label img{
	width: 100%;
}
.legend{
	flex: 1 1 auto;
	font-size: 16px;
	line-height: 1.5;
}
@media screen and (max-width: 991px){
  .label{ flex-basis: 130px; max-width: 130px; }
}
@media screen and (max-width: 576px){
  .cut{ flex-direction: row; align-items: flex-start; }
  .label{ flex: 0 0 110px; max-width: 110px; }
  .legend{ font-size: 14px; }
}

.pay01 .swiper-pagination{
/*	display: none;*/
}




/*-----------------------------------------------
   分頁
-----------------------------------------------*/
.all{
	width: 100%;
	background-color: #FCEAE8;
	padding-bottom: 3%;
}
.range{
	width: 100%;
	max-width: 576px;
	margin: auto;
}
.shop{
	width: 90%;
	margin: auto;
}
.tiny{
	font-size: 32px;
	font-weight: bolder;
	color: #333;
	text-align: center;
	padding-top: 12%;
	padding-bottom: 5%;
}
.picture{
	width: 100%;
	max-width: 526px;
	margin: auto;
}
.picture img{
	width: 100%;
}
.rebate{
	background-color: #fff;
	margin: auto;
	margin-bottom: 10%;
}
.rebate .bargain{
	font-size: 30px;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding: 35px 25px;
}
.bargain .red{
	color: #D70C18;
}
.detriment{
	widows: 90%;
	margin: auto;
}
.favorable{
	width: 90%;
	margin: auto;
}
.precautions{
	width: 90%;
	margin: auto;
}
.time_1{
	margin-bottom: 3%;
}
.time_1 h4{
	width: 100%;
	max-width: 385px;
	font-size: 24px;
	font-weight: 700;
	color: #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align: center;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 1%;
}
.time_111{
	max-width: 385px;
}

.favorable{
	padding-left: 20px;
}
.favorable .e99{
	font-size: 21px;
	font-weight: 700;
	color: #333;
	line-height: 1.5;
	padding-bottom: 3%;
	margin-left: -25px;
}
.favorable h5{
	font-size: 21px;
	font-weight: 700;
	color: #333;
	line-height: 1.5;
	padding-bottom: 3%;
	text-indent: -20px;
	padding-left:-20px;
}

.favorable .point{
	font-size: 15px;
	margin-bottom: 15px;
}
.favorable .red{
	color: #D70C18;
}
.time_2{
	margin-top: 5%;
	margin-bottom: 3%;
}
.time_2 h4{
	width: 100%;
	max-width: 115px;
	font-size: 24px;
	font-weight: 700;
	color: #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align: center;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 1%;
}
.mind{
	width: 100%;
	margin: auto;
	margin-bottom: 5%;
}
.mind .pp2{
	font-size: 16px;
	margin-left: 16px;
	margin-bottom: 0;
}
.mind .pp22{
	margin-bottom: 3%;
}
.mind li{
	font-size: 16px;
	line-height: 1.8;
}
.time_3 h4{
	width: 100%;
	max-width: 250px;
	font-size: 24px;
	font-weight: 700;
	color: #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align: center;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-top: 8%;
}
.time_3{
	margin-bottom: 5%;
}
.checkout{
	width: 90%;
	max-width: 530px;
	margin: auto;
}
.checkout img{
	width: 100%;
	margin: auto;
}
.cut2{
	width:100%;
	margin: auto;
	display: flex;
	margin-top: 3%;
}
.cut2 .label_22{
	width: 100%;
	max-width: 160px;
/*	margin-right: 15px;*/

}
.way{
	width: 90%;
	margin: auto;
}
.coupon-wrap{
	width: 90%;
	max-width: 360px;
	margin: auto;
	border: 1px solid #333;
	background-color: #fff;
	display: flex;
	flex-direction: column;
}
.coupon_text{
	padding: 22px 18px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	min-height: 320px;
	box-sizing: border-box;
}

/* 讓每一格之間的分隔線滿版（不留左右空白） */
.coupon_text + .coupon_text{
	border-top: 1px solid #333;
}

.t1{
	font-size: 16px;
	line-height: 1.5;
	color: #333;
}
.t2{
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: #333;
}
.t1 .red{
	color: #D70C18;
}
.t2 .red{
	color: #D70C18;
}
.coupon_code{
	font-size: 16px;
	line-height: 1.5;
	color: #333;
}
.coupon_qr{
	width:100%;
	max-width: 180px;
	margin: auto;
}
.coupon_qr img{
	width: 100%;
}
.qr_line{
	display: none;
}
.time_4 h4{
	width: 100%;
	max-width: 180px;
	font-size: 24px;
	font-weight: 700;
	color: #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align: center;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-top: 8%;
}
.time_4{
	margin-bottom: 5%;
}
/* @media screen and (max-width: 540px){
  line22 {
    margin-top: 7%;
    margin-bottom: 8%;
}
} */





/*-----------------------------------------------
    Responsive tweaks
-----------------------------------------------*/
@media screen and (max-width: 1100px){
  .info .box{
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 768px){
  .activity{
    padding: 0 14px;
  }
  .activity .publicity{
    gap: 14px;
    margin: 8% auto;
  }
  .publicity .details .k{
    font-size: 22px;
  }
  .details h5{
    height: auto;
    min-height: 0;
  }

  .info .box{
    padding-left: 16px;
    padding-right: 16px;
  }
  .box .register h2{
/*    font-size: 30px;*/
    margin-left: 0;
  }
  .teaching .copy{
    height: auto;
  }
  .uu{
    width: 200px;
    height: 58px;
    font-size: 24px;
    line-height: 2.4;
  }
	.txt .txt22{
		width: 80%;
		margin-bottom: 3%;
	}
}

@media screen and (max-width: 480px){
  .box .register h2{
    font-size: 26px;
  }
  .t2{
    font-size: 20px;
  }
  .coupon_text{
    min-height: 300px;
  }
}


/* p6：條碼圖示上下空間縮小（約 50%） */
.page-p6 .coupon_text{
  min-height: 160px;
  padding: 12px 18px 10px;
  gap: 6px;
}
.page-p6 .coupon_qr{
  max-width: 170px;
}


/* 商家優惠券（discount-swiper）容器寬度控制：桌機4 / 中尺寸2(70%) / 手機1(80%)，箭頭保留 */
.discount .swiper-father{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 991px){
  .discount .swiper-father{ width: 70%; }
}
@media screen and (max-width: 576px){
  .discount .swiper-father{ width: 80%; }
}
/* 強制保留左右箭頭（避免被其他樣式隱藏） */
.discount .swiper-father .swiper-button-next,
.discount .swiper-father .swiper-button-prev{
  display: flex !important;
}

/* Pay 教學輪播：各尺寸容器寬度 90%（置中） */
.pay_ .swiper-father{ width: 90%; margin: 0 auto; position: relative; }

/* Pay 區塊：左右箭頭固定顯示且尺寸一致（同註冊樣式） */
.pay_ .swiper-father .swiper-button-next,
.pay_ .swiper-father .swiper-button-prev{
  display: flex !important;
  width: 44px;
  height: 44px;
}
@media screen and (max-width: 991px){
  .end{ width: 90%; margin: 0 auto; }
}


/* =========================
   2026-01-25 overrides (layout + arrows)
   ========================= */

/* 使用教學：中尺寸強制 1 排 1（卡片維持 max-width:320px） */
@media screen and (min-width: 768px) and (max-width: 991px){
  .richart{
    flex-direction: column;
    align-items: center;
  }
  .richart .teaching{
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}

/* 註冊 / 正掃 / 反掃 / 綁定：所有裝置容器寬度 90% 且置中 */
.pay_ .swiper-father{
  width: 90%;
  margin: 0 auto;
  position: relative;
}

/* 4個輪播的左右箭頭：一致尺寸/一致偏移，且所有裝置都顯示 */
.pay_ .swiper-button-prev,
.pay_ .swiper-button-next{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  opacity: 1 !important;
}
.pay_ .swiper-button-prev{ left: -48px; }
.pay_ .swiper-button-next{ right: -48px; }
.pay_ .swiper-button-prev::after,
.pay_ .swiper-button-next::after{
  font-size: 18px;
}

/* 手機：箭頭仍保留（避免被其他樣式蓋掉） */
@media screen and (max-width: 767px){
  .pay02 .swiper-button-prev,
  .pay02 .swiper-button-next,
  .pay03 .swiper-button-prev,
  .pay03 .swiper-button-next{
    display: flex !important;
  }
}

/* ===== 2026-01-25 responsive + swiper arrow fixes (requested) ===== */
/* Make all swiper wrappers predictable */
.swiper-father{ position: relative; margin-left:auto; margin-right:auto; }

/* Unify arrow positioning + keep visible on all devices */
.swiper-father .swiper-button-prev,
.swiper-father .swiper-button-next{
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  width: 88px;   /* 2x (was 44px) */
  height: 88px;  /* 2x (was 44px) */
}

/* 2x icon size (was ~18px in this project) */
.swiper-father .swiper-button-prev:after,
.swiper-father .swiper-button-next:after{
  font-size: 36px !important;
}

/* Force correct left/right (some earlier rules set next on the left) */
.swiper-father .swiper-button-prev{ left: -60px !important; right: auto !important; }
.swiper-father .swiper-button-next{ right: -60px !important; left: auto !important; }

/* Pay swipers: container width always 90% for all devices */
.pay_ .swiper-father{ width: 90% !important; }

/* Ensure pay02/pay03 arrows still show on mobile */
@media (max-width: 767px){
  .pay02 .swiper-button-prev,
  .pay02 .swiper-button-next,
  .pay03 .swiper-button-prev,
  .pay03 .swiper-button-next{
    display:flex !important;
  }
}

/* Discount coupon: when showing single card on phone, lock to max-width 320 and center */
@media (max-width: 767px){
  /* coupon section wrapper is the first .swiper-father after #bbb */
  #bbb ~ h2 + h5 + .swiper-father{
    /*! width: 100% !important; */
    /*! max-width: 320px !important; */
    /*! margin-left: auto !important; */
    /*! margin-right: auto !important; */
    padding: 0;
  }
}

/* Teaching cards: keep each card max-width 320 when stacked */
@media (max-width: 991px){
  .richart .teaching{ max-width: 320px !important; margin-left:auto !important; margin-right:auto !important; }
}



/* ===== PATCH 2026-01-25 (pay_8 requests): keep arrows visible + 2x size, consistent offsets ===== */

/* Ensure swiper-father is the positioning context */
.discount .swiper-father,
.pay_ .swiper-father{
  position: relative !important;
}

/* Universal: keep arrows on top of slides */
.discount .swiper-button-prev,
.discount .swiper-button-next,
.pay_ .swiper-button-prev,
.pay_ .swiper-button-next{
  z-index: 50 !important;
  display: flex !important;
  opacity: 1 !important;
}

/* 2x arrow size */
.discount .swiper-button-prev,
.discount .swiper-button-next,
.pay_ .swiper-button-prev,
.pay_ .swiper-button-next{
  width: 88px !important;
  height: 88px !important;
}

/* 2x icon size */
.discount .swiper-button-prev::after,
.discount .swiper-button-next::after,
.pay_ .swiper-button-prev::after,
.pay_ .swiper-button-next::after{
  font-size: 36px !important;
}

/* Consistent left/right offsets (all 4 pay swipers + discount coupon) */
.discount .swiper-button-prev,
.pay_ .swiper-button-prev{
  left: -60px !important;
  right: auto !important;
}
.discount .swiper-button-next,
.pay_ .swiper-button-next{
  right: -60px !important;
  left: auto !important;
}

/* Keep pay02/pay03 arrows on mobile explicitly */
@media (max-width: 767px){
  .pay02-swiper ~ .swiper-button-prev,
  .pay02-swiper ~ .swiper-button-next,
  .pay03-swiper ~ .swiper-button-prev,
  .pay03-swiper ~ .swiper-button-next{
    display:flex !important;
  }
}

/* Discount coupon: mobile single card should be max-width 320 and centered */
@media (max-width: 767px){
  .discount .txt .swiper-father{
    /*! width: 100% !important; */
    /*! max-width: 320px !important; */
    /*! margin-left: auto !important; */
    /*! margin-right: auto !important; */
  }
}



/* =========================
   2026-01-25 hotfix (Pay_9 requests)
   ========================= */

/* 商家優惠券：中尺寸 1 排 2（由 JS breakpoints 控制），手機 1 排 1 且容器 max-width:320；箭頭永遠保留 */
.discount .swiper-father{
  position: relative;
}
.discount .swiper-button-prev,
.discount .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
}
@media screen and (max-width: 767px){
  .discount .swiper-father{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* 註冊/正掃/反掃/綁定：4個輪播箭頭左右偏移一致（再次鎖定避免被覆蓋） */
.pay_ .swiper-button-prev{ left: -48px !important; }
.pay_ .swiper-button-next{ right: -48px !important; }


/* =========================
   2026-01-25 hotfix (Pay_11 requests)
   - discount: mid-size 4-up keep arrows visible; slide max-width 305
   - teaching: desktop 3-up; mid-size 1-up
   - pay_ swipers: arrows always visible, identical offsets, wrapper width 90%
   ========================= */

/* --- 商家優惠券：箭頭不要跑到視窗外（用 padding 吃掉箭頭寬度） --- */
.discount .swiper-father{
  box-sizing: border-box;
  padding-left: 70px;
  padding-right: 70px;
}
.discount .swiper-button-prev,
.discount .swiper-button-next{
  z-index: 60 !important;
  display: flex !important;
  opacity: 1 !important;
}
/* 把箭頭拉回容器內（避免在 4-up 時被擠到視窗外看不到） */
.discount .swiper-button-prev{ left: 10px !important; right: auto !important; }
.discount .swiper-button-next{ right: 10px !important; left: auto !important; }

/* 每張圖 max-width 305px（4-up 時視覺一致） */
.discount .swiper-slide{ /*! max-width: 305px; */ }
.discount .swiper-slide img{ /*! max-width: 305px; */ }

/* 手機：商家優惠券容器鎖 max-width 320（你原本的規則保留，這裡補置中） */
@media (max-width: 767px){
  .discount .swiper-father{
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* --- 台新Pay+使用教學：桌機 1排3；中尺寸 1排1 --- */
.richart{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 0;
}
.richart .teaching{
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}
@media (min-width: 992px){
  .richart .teaching{
    flex: 0 0 calc(33.333% - 18px);
    max-width: 320px;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .richart{
    flex-direction: column;
    align-items: center;
  }
  .richart .teaching{
    flex: 0 0 auto;
  }
}

/* --- 註冊/正掃/反掃/綁定：容器 90% + 箭頭一致且永遠顯示 --- */
.pay_ .swiper-father{
  width: 90% !important;
  margin: 0 auto !important;
  position: relative !important;
  box-sizing: border-box;
  padding-left: 70px;
  padding-right: 70px;
}
.pay_ .swiper-button-prev,
.pay_ .swiper-button-next{
  z-index: 60 !important;
  display: flex !important;
  opacity: 1 !important;
}
/* 4個輪播箭頭左右偏移完全一致（鎖在容器內） */
.pay_ .swiper-button-prev{ left: 10px !important; right: auto !important; }
.pay_ .swiper-button-next{ right: 10px !important; left: auto !important; }

/* 手機：箭頭依然顯示（正掃/反掃常被 media query 蓋掉，這裡再鎖一次） */
@media (max-width: 767px){
  .pay02 .swiper-button-prev,
  .pay02 .swiper-button-next,
  .pay03 .swiper-button-prev,
  .pay03 .swiper-button-next{
    display: flex !important;
    opacity: 1 !important;
  }
  .pay_ .swiper-father{
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* =========================
   2026-01-25 hotfix (Pay_11 requests)
   ========================= */

/* 1) 商家優惠券：中尺寸顯示 4 個時，箭頭不要被擠出視窗；單張 max-width:305px */
.discount .swiper-father{
  box-sizing: border-box;
  padding-left: 70px;
  padding-right: 70px;
  overflow: visible;
}
.discount .swiper-slide{
  box-sizing: border-box;
  /*! max-width: 305px; */
}
.discount .swiper-slide img{
  /*! max-width: 305px; */
}
/* 箭頭固定在容器內側，不用負值（避免中尺寸看不到） */
.discount .swiper-button-prev{
  left: 10px !important;
  right: auto !important;
}
.discount .swiper-button-next{
  right: 10px !important;
  left: auto !important;
}
/* 全尺寸都保留箭頭 */
.discount .swiper-button-prev,
.discount .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  z-index: 80 !important;
}

/* 2) 台新Pay+使用教學：桌機 1 排 3，中尺寸 1 排 1 */
.richart{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 0;
  margin: 0;
}
.richart .teaching{
  box-sizing: border-box;
}
@media (min-width: 992px){
  .richart .teaching{
    flex: 0 0 calc(33.333% - 12px);
    max-width: 320px;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .richart{
    flex-direction: column;
    align-items: center;
  }
  .richart .teaching{
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}

/* 3) 註冊 / 正掃 / 反掃 / 綁定：箭頭全保留、四組左右偏移一致；外框寬 90% */
.pay_ .swiper-father{
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-left: 70px;
  padding-right: 70px;
  overflow: visible;
}
.pay_ .swiper-button-prev,
.pay_ .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  z-index: 80 !important;
}
.pay_ .swiper-button-prev{
  left: 10px !important;
  right: auto !important;
}
.pay_ .swiper-button-next{
  right: 10px !important;
  left: auto !important;
}

/* 手機：正掃/反掃箭頭強制保留（避免被其他 media query 蓋掉） */
@media (max-width: 767px){
  .pay02 .swiper-button-prev,
  .pay02 .swiper-button-next,
  .pay03 .swiper-button-prev,
  .pay03 .swiper-button-next{
    display: flex !important;
  }
}



/* =============================
   2026-01-25 fixes (pay_12)
   ============================= */

/* 1) 商家優惠券：箭頭永遠顯示 + 不再被推到畫面外 */
.discount .swiper-father{
  position: relative;
  overflow: visible;
  padding: 0 70px; /* reserve space for arrows inside container */
}
.discount .swiper-button-prev,
.discount .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
}
.discount .swiper-button-prev{ left: 12px !important; right: auto !important; }
.discount .swiper-button-next{ right: 12px !important; left: auto !important; }

/* 1) 商家優惠券：圖片寬度依欄位調整 */
.discount .swiper-slide img{
  width: 100%;
  /*! max-width: 320px; */ /* default */
  margin: 0 auto;
  display: block;
}
@media (min-width: 992px){
  /* 4 欄時縮一點，避免擠壓 */
  .discount .swiper-slide img{ max-width: 305px; }
}

/* 2) 使用教學：桌機 3 個一排；中尺寸(<=1199) 1 個一排 */
.richart{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.richart .teaching{
  flex: 0 0 320px;
  max-width: 320px;
}
@media (max-width: 1199px){
  .richart{
    flex-direction: column;
    align-items: center;
  }
  .richart .teaching{
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}

/* 3) 註冊/正掃/反掃/綁定：容器 90% + 四組箭頭左右距離一致 + 手機強制顯示 */
.pay_ .swiper-father{
  width: 90% !important;
  margin: 0 auto !important;
  position: relative;
  overflow: visible;
  padding: 0 70px; /* reserve space for arrows */
  box-sizing: border-box;
}
.pay_ .swiper-button-prev,
.pay_ .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
}
.pay_ .swiper-button-prev{ left: 12px !important; right: auto !important; }
.pay_ .swiper-button-next{ right: 12px !important; left: auto !important; }

/* 手機也要顯示（避免被其他 media 覆蓋） */
@media (max-width: 767px){
  .pay_ .swiper-button-prev,
  .pay_ .swiper-button-next,
  .discount .swiper-button-prev,
  .discount .swiper-button-next{
    display: flex !important;
  }
	.discount .swiper-father .swiper-button-next{
/*
		right: -90px!important;
		left: auto!important;
*/
	}
}

/* =========================
   2026-01-25 overrides v2 (fix discount + teaching + pay arrows)
   ========================= */

/* (1) 商家優惠券：箭頭永遠顯示，且放在容器內側避免被推到畫面外 */
.discount .swiper-father{
  position: relative;
  padding: 0 64px; /* 留出箭頭空間 */
  box-sizing: border-box;
}
.discount .swiper-button-prev,
.discount .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 20;
  width: 44px;
  height: 44px;
}
.discount .swiper-button-prev{ left: 10px !important; right: auto !important; }
.discount .swiper-button-next{ right: 10px !important; left: auto !important; }

/* 圖片寬度：4個一排時 305px；其餘(含2個/手機) 320px */
.discount .swiper-slide img{
  display: block;
  /*! max-width: 320px; */
  width: 100%;
  margin: 0 auto 5%;
}
@media screen and (min-width: 992px){
  .discount .swiper-slide img{ /*! max-width: 305px; */ }
}

/* (2) 使用教學：中尺寸(768-991) 強制 1 排 1，卡片維持 320 並置中 */
@media screen and (min-width: 768px) and (max-width: 991px){
  .richart{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .richart .teaching{
    flex: 0 0 320px;
    max-width: 320px;
    width: 100%;
  }
}

/* (3) 註冊/正掃/反掃/綁定：四組箭頭左右距離一致、全裝置保留、避免被 swiper.css 的 -40 推到外面 */
.pay_ .swiper-father{
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding: 0 64px; /* 留箭頭空間 */
  box-sizing: border-box;
}
.pay_ .swiper-father .swiper-button-prev,
.pay_ .swiper-father .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 20;
  width: 44px;
  height: 44px;
}
.pay_ .swiper-father .swiper-button-prev{ left: 10px !important; right: auto !important; }
.pay_ .swiper-father .swiper-button-next{ right: 10px !important; left: auto !important; }

/* 手機：正掃/反掃 也強制顯示箭頭（防止被其他 media query 蓋掉） */
@media screen and (max-width: 767px){
  .pay02 .swiper-button-prev,
  .pay02 .swiper-button-next,
  .pay03 .swiper-button-prev,
  .pay03 .swiper-button-next{
    display: flex !important;
    opacity: 1 !important;
  }
}


/* =========================
   FINAL OVERRIDES 2026-01-25 (pay14)
   Goals:
   1) Discount coupon: arrows always visible; slide image max-width 305 (4-up) / 320 (2-up & mobile)
   2) Teaching icons: desktop 3-up; mid 1-up
   3) pay_ swipers (pay01~pay04): arrows always visible; ALL arrows same left/right offset on all devices
   ========================= */

/* ---------- 商家優惠券（discount） ---------- */
.discount .swiper-father{
  position: relative !important;
  /* keep arrows inside container so they never "disappear" off-canvas */
  /*! padding-left: 64px !important; */
  /*! padding-right: 64px !important; */
  box-sizing: border-box !important;
}
.discount .swiper-button-prev,
.discount .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 999 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.discount .swiper-button-prev{ left: 12px !important; right: auto !important; }
.discount .swiper-button-next{ right: 12px !important; left: auto !important; }

.discount .swiper-slide{
  display: flex !important;
  justify-content: center !important;
}
.discount .swiper-slide img{
  /*! width: 100% !important; */
  /*! height: auto !important; */
  /*! max-width: 320px !important; */ /* 2-up & mobile (match 其他優惠) */
}
@media (min-width: 992px){
  .discount .swiper-slide img{ max-width: 305px !important; } /* 4-up */
}

/* ---------- 台新Pay+使用教學（richart） ---------- */
.richart{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  margin: auto;
}
.richart .teaching{
  flex: 0 0 320px !important;
  max-width: 320px !important;
}
@media (max-width: 991px){
  /* mid devices: 1 per row */
  .richart{
    flex-direction: column !important;
    align-items: center !important;
  }
  .richart .teaching{
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* ---------- 註冊/正掃/反掃/綁定（pay01~pay04）統一箭頭左右距離 ---------- */
.pay_.pay01 .swiper-father,
.pay_.pay02 .swiper-father,
.pay_.pay03 .swiper-father,
.pay_.pay04 .swiper-father{
  width: 90% !important;
  margin: 0 auto !important;
  position: relative !important;
  padding-left: 64px !important;
  padding-right: 64px !important;
  box-sizing: border-box !important;
}

/* Force ALL pay_ arrows visible & identical placement */
.pay_.pay01 .swiper-button-prev,
.pay_.pay02 .swiper-button-prev,
.pay_.pay03 .swiper-button-prev,
.pay_.pay04 .swiper-button-prev,
.pay_.pay01 .swiper-button-next,
.pay_.pay02 .swiper-button-next,
.pay_.pay03 .swiper-button-next,
.pay_.pay04 .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 999 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* identical left/right offsets across all four blocks */
.pay_.pay01 .swiper-button-prev,
.pay_.pay02 .swiper-button-prev,
.pay_.pay03 .swiper-button-prev,
.pay_.pay04 .swiper-button-prev{ left: 12px !important; right: auto !important; }

.pay_.pay01 .swiper-button-next,
.pay_.pay02 .swiper-button-next,
.pay_.pay03 .swiper-button-next,
.pay_.pay04 .swiper-button-next{ right: 12px !important; left: auto !important; }

/* mobile: ensure pay02/pay03 arrows never hidden */
@media (max-width: 767px){
  .pay_.pay02 .swiper-button-prev,
  .pay_.pay02 .swiper-button-next,
  .pay_.pay03 .swiper-button-prev,
  .pay_.pay03 .swiper-button-next{
    display: flex !important;
    opacity: 1 !important;
  }
}



/* =========================
   PATCH 2026-01-26 (v15)
   - Keep arrows visible
   - Unify arrow offsets across pay carousels
   - Discount coupon slide widths per breakpoint
========================= */

/* 商家優惠券：外層留出箭頭空間，避免 4 張時箭頭被推到畫面外 */
.discount .swiper-father{
  position: relative;
  padding-left: 64px;
  padding-right: 64px;
  box-sizing: border-box;
  overflow: visible;

  width: 90%;
/*  max-width: 1300px;*/
  margin: auto;
  padding: 0 20px;
  box-sizing: border-box;


}

/* 商家優惠券：箭頭永遠顯示＋放在容器內側 */
.discount .swiper-father .swiper-button-prev,
.discount .swiper-father .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 999 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px;
  height: 44px;
}
.discount .swiper-father .swiper-button-prev{ left: -60px !important; right: auto !important; }
.discount .swiper-father .swiper-button-next{ right: -60px !important; left: auto !important; }

/* 商家優惠券：圖片/卡片最大寬度（對齊「其他優惠」單元） */
.discount .discount-swiper .swiper-slide{
  width: 100%;
  /*! max-width: 320px; */
}
@media screen and (min-width: 992px){
  /* 4 個一排時，縮到 305 */
  .discount .discount-swiper .swiper-slide{ /*! max-width: 305px; */ }
}

/* 手機：商家優惠券整個區塊置中（單張跟其他優惠同寬） */
@media screen and (max-width: 767px){
  .discount .swiper-father{
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* pay_ 四組輪播：容器 90% 並留出箭頭空間 */
.pay_ .swiper-father{
  width: 90% !important;
  margin: 0 auto !important;
  position: relative !important;
  padding-left: 64px !important;
  padding-right: 64px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* pay_ 四組輪播：箭頭永遠顯示＋左右偏移完全一致 */
.pay_.pay01 .swiper-button-prev,
.pay_.pay02 .swiper-button-prev,
.pay_.pay03 .swiper-button-prev,
.pay_.pay04 .swiper-button-prev,
.pay_.pay01 .swiper-button-next,
.pay_.pay02 .swiper-button-next,
.pay_.pay03 .swiper-button-next,
.pay_.pay04 .swiper-button-next{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 999 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
}
.pay_.pay01 .swiper-button-prev,
.pay_.pay02 .swiper-button-prev,
.pay_.pay03 .swiper-button-prev,
.pay_.pay04 .swiper-button-prev{ left: 12px !important; right: auto !important; }
.pay_.pay01 .swiper-button-next,
.pay_.pay02 .swiper-button-next,
.pay_.pay03 .swiper-button-next,
.pay_.pay04 .swiper-button-next{ right: 12px !important; left: auto !important; }

/* 手機：正掃/反掃再次強制顯示（避免被其他 media 覆蓋） */
@media screen and (max-width: 767px){
  .pay_.pay02 .swiper-button-prev,
  .pay_.pay02 .swiper-button-next,
  .pay_.pay03 .swiper-button-prev,
  .pay_.pay03 .swiper-button-next{
    display: flex !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 1360px){
	.discount .swiper-father{
		max-width: 995px;
	}
}
@media screen and (max-width: 1024px){
	.br333 br{
		display: none;
		margin: auto;
	}
	.txt h5{
		width: 90%;
		margin: auto;
	}
}
@media screen and (max-width: 359px){
	    .ts-logo {
        width: 250px;
    }
}