@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
.font1010 { font-family: 'Poppins', sans-serif !important; font-weight: 700; letter-spacing: 0.1em; color: inherit; line-height: .9em; }
html, body { scroll-padding-top: 60px; scroll-behavior: smooth; font-family: "Noto Sans TC", sans-serif !important; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Noto Sans TC", sans-serif !important; }
.no-padding { padding-left: 0 !important; padding-right: 0 !important; }
.img-center { display: block; margin-left: auto; margin-right: auto; }
.inner_grid { max-width: 970px; margin: auto; }
/* .pageBG{background-image: url(../images/pagebg_a.jpg), url(../images/pagebg_b.jpg); background-position: center top, center bottom; background-color: #edecea; background-size: auto; background-repeat: no-repeat;} */
.pageBG { background-image: url(../images/pagebg_a.jpg); background-position: center top; background-color: #edecea; background-size: auto; background-repeat: repeat-y; }
header { background-color: #000; }
header .inner_grid { padding: 20px 10px; }
.spacer { height: 20px; display: block; }
.spacer_sm { height: 20px; display: block; }
a:focus { text-decoration: none; }
* { color: #565656; }
:root { --h1: 40px;
--h2: 25px;
--h3: 18px;
--p: 19px;
--reminder: 14px;
--remarks: 12px;
--cate-breav: rgb(139,101,54, 1);
--cate-breav-opac-third: rgb(139,101,54, 0.1);
--cate-shopp: rgb(89,96,104, 1);
--cate-shopp-opac-third: rgb(89,96,104, 0.1);
--cate-entan : rgb(87, 93, 129, 1);
--cate-entan-opac-third : rgb(87, 93, 129, 0.1); 
}
a:hover { text-decoration: none; }
h1 { margin-top: 5px; margin-bottom: 5px; font-size: var(--h1); margin-top: 5px; margin-bottom: 5px; letter-spacing: 0.2em; line-height: 1.4em; }
h2 { margin-top: 5px; margin-bottom: 5px; font-size: var(--h2); text-shadow: none; letter-spacing: 0.08em; }
h3 { margin-top: 5px; margin-bottom: 5px; font-size: var(--h3); text-shadow: none; letter-spacing: 0.03em; }
h4 { margin-top: 5px; margin-bottom: 5px; }
h5 { margin-top: 5px; margin-bottom: 5px; }
p, li { font-size: var(--p); }
.flexR { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.flexC { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.peach_bar { background-color: #f0d1b7; width: 120px; height: 4px; margin: 20px auto; display: block; border-radius: 30px; }
.main_tab { background-color: #ffffff; border-radius: 30px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border: 6px solid #ffffff; width: 100%; margin: 0 auto 40px; }
.main_tab a { color: #fff; padding: 10px 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 35px; gap: 16px; letter-spacing: 0.05em; filter: brightness(0) invert(0); opacity: 0.3; transition: all 0.3s ease; position: relative; align-self: stretch; width: 100%; }
.main_tab a::before { position: absolute; content: ''; width: 100%; height: 100%; border: 4px solid rgb(129, 106, 87); border-radius: 28px; opacity: 0; filter: brightness(1) invert(0); transition: all 0.3s ease; }
.main_tab a.onnn::before { opacity: 1; }
.main_tab a.onnn { filter: brightness(1) invert(0); opacity: 1; }
.main_tab a img { display: block; }
.sub_tab { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: calc(100% - 280px); margin: 0 auto 40px; }
.sub_tab a { font-size: var(--h2); width: 100%; text-align: center; position: relative; text-decoration: none; transition: all 0.3s ease; color: rgba(255, 255, 255, 0.4); }
.sub_tab a.onnn { color: #f0d1b7; }
.sub_tab a::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 20px; background-color: rgba(255, 255, 255, 0.4); transform: translateY(-50%); }
.sub_tab a:last-child:after { display: none; }
.black_sect { position: relative; max-width: 570px; }
.qr_icon { position: absolute; right: 0; top: 0; transform: translateY(10px); }
.qr_icon img { width: 140px; }
/*******************/
.offer_rw { border-top: 1px solid rgba(255, 255, 255, 1); padding-top: 30px; padding-bottom: 30px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.offer_rw:last-child { padding-bottom: 20px; border-bottom: 0px solid rgba(0.0, 0, 0.3); }
.offer_rw ul { padding-left: 1.2em; }
.offer_rw .offer_img { width: 41.66667%; border-radius: 0 30px; overflow: hidden; }
#breav .offer_rw .offer_img { border: 4px solid #8b6536; }
#shopp .offer_rw .offer_img { border: 4px solid #596068; }
#entan .offer_rw .offer_img { border: 4px solid #858ebd; }
.offer_rw .offer_text { width: 58.33333%; padding: 20px; align-self: flex-start; }
.offer_rw .offer_text .flexR { justify-content: space-between; margin-bottom: 20px; }
.offer_rw .merchant_name { font-weight: bold; }
.offer_rw .merchant_offer { font-size: var(--p); padding: 20px 40px; background-color: aquamarine; margin-bottom: 30px; }
.offer_rw .merchant_offer * { color: #fff !important; }
.offer_rw .tnc_trig { width: 100%; padding-right: 40px; position: relative; display: block; cursor: pointer; color: #565656; }
.offer_rw .tnc_trig:before, .offer_rw .tnc_trig:after { position: absolute; content: ''; background-color: #b7a183; width: 26px; height: 3px; border-radius: 30px; right: 0; top: calc(50% - 2px); }
.offer_rw .tnc_trig:after { transform: rotate(90deg); }
.offer_rw .tnc_trig.tnc_on:after { transform: rotate(0deg); }
.offer_rw .merchant_tnc { font-size: var(--p); padding-top: 0px; }
.offer_rw .merchant_tnc ul { margin-top: var(--p); display: none; }
.offer_rw .merchant_tnc li { font-size: var(--reminder); }
.mer_learn_more { border-radius: 9999px; padding: 5px 30px; color: #fff; font-size: var(--reminder); display: none; }
/**********cate color*********/
.main_tab.breav a span { color: var(--cate-breav); }
.main_tab.breav a::before { border: 4px solid var(--cate-breav); background-color: var(--cate-breav-opac-third); }
.tab-content.breav .mer_learn_more { background-color: var(--cate-breav); }
.tab-content.breav .offer_rw .merchant_offer { background: linear-gradient(90deg, var(--cate-breav) 90%, var(--cate-breav-opac-third) 100%); }
.tab-content.breav .offer_rw .merchant_name { color: var(--cate-breav); }
/* .tab-content.breav .offer_rw li strong{color: var(--cate-breav);} */
.main_tab.shopp a span { color: var(--cate-shopp); }
.main_tab.shopp a::before { border: 4px solid var(--cate-shopp); background-color: var(--cate-shopp-opac-third); }
.tab-content.shopp .mer_learn_more { background-color: var(--cate-shopp); }
.tab-content.shopp .offer_rw .merchant_offer { background: linear-gradient(90deg, var(--cate-shopp) 90%, var(--cate-shopp-opac-third) 100%); }
.tab-content.shopp .offer_rw .merchant_name { color: var(--cate-shopp); }
/* .tab-content.shopp .offer_rw li strong{color: var(--cate-shopp);} */
.main_tab.entan a span { color: var(--cate-entan); }
.main_tab.entan a::before { border: 4px solid var(--cate-entan); background-color: var(--cate-entan-opac-third); }
.tab-content.entan .mer_learn_more { background-color: var(--cate-entan); }
.tab-content.entan .offer_rw .merchant_offer { background: linear-gradient(90deg, var(--cate-entan) 90%, var(--cate-entan-opac-third) 100%); }
.tab-content.entan .offer_rw .merchant_name { color: var(--cate-entan); }
/* .tab-content.entan .offer_rw li strong{color: var(--cate-entan);} */
/**********swiper**********/
.swiper-container.how_to_go { height: auto; width: 100%; max-width: 970px; }
.swiper-pagination-how { left: 50%; transform: translate(-50%, 100%); display: flex; flex-direction: row; margin-top: 20px; gap: 20px; }
.swiper-pagination-how .swiper-pagination-bullet { background-color: #6c7280; width: 10px; height: 10px; }
.swiper-pagination-how .swiper-pagination-bullet-active { background-color: #f0d1b7; }
.how_to_go .swiper-slide { align-self: stretch; height: auto; filter: brightness(0.3); transition: all 0.3s ease; }
.how_to_go .swiper-slide.swiper-slide-active { filter: brightness(1); }

.tentcard { border-radius: 20px; background-color: #1f2126; overflow: hidden; width: 440px; margin: auto; aspect-ratio: 1/1; height: 100%; }
.title_bar { background-image: url(../images/gold_bg.png); padding: 20px 30px; color: #000; background-size: cover; }
.title_bar h2 { margin: 0; width: 100%; color: #000; }
.conns { padding: 20px; }
.line_style, .route_style { color: #fff; font-size: var(--h2); }
.line_style li, .route_style li { position: relative; }
.line_style li:before { content: ''; position: absolute; left: -25px; width: 4px; height: 100%; top: 19px; border-left: 2px dashed #6d6d6d; }
.line_style li.noline::before { display: none; }
.line_style li::marker, .route_style li::marker {
color: #6b6b6b;
font-size: 30px; /* Set the font size of the list item marker */
}
.line_style li p, .route_style li p { transform: translateY(-5px); }
#how_to_get_rewards { background-image: url(../images/how_to_get_rewards.png); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 20px 30px; color: #fff; }
.swiper-container.yen_coupon, .swiper-container.csl_coupon, .swiper-container.hkt_coupon { height: auto; width: 100%; }
.swiper-container.yen_coupon img, .swiper-container.csl_coupon img, .swiper-container.hkt_coupon img { opacity: 0; max-width: 320px; }
.swiper-container.yen_coupon h3, .swiper-container.csl_coupon h3, .swiper-container.hkt_coupon h3 { opacity: 0; font-size: calc(var(--h3) * 1.2);
}
.swiper-container.yen_coupon .swiper-slide-active img, .swiper-container.yen_coupon .swiper-slide-active h3, .swiper-container.csl_coupon .swiper-slide-active img, .swiper-container.csl_coupon .swiper-slide-active h3, .swiper-container.hkt_coupon .swiper-slide-active img, .swiper-container.hkt_coupon .swiper-slide-active h3 { opacity: 1; }
.stp_flx, .stp_flx_csl, .stp_flx_hkt { display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-left: 20px; }
.stp_flx a, .stp_flx_csl a, .stp_flx_hkt a { color: #fff !important; font-size: 28px; font-weight: bold; transition: all 0.3s ease; border-radius: 100%; width: 42px; height: 42px; background-color: transparent; text-align: center; cursor: pointer; }
.stp_flx a.onnn, .stp_flx_csl a.onnn, .stp_flx_hkt a.onnn { background-color: #000; color: #b7a183 !important; }
.merchant_name + .flexR { margin-bottom: 0 !important; gap: 20px; font-size: var(--p); }
.merchant_name + .flexR .food_type, .merchant_name + .flexR .shop_num, .merchant_name + .flexR .shop_type, .merchant_name + .flexR .entan_type { position: relative; color: #565656; }
.merchant_name + .flexR .food_type, .merchant_name + .flexR .shop_type, .merchant_name + .flexR .entan_type { padding-left: 35px; }
.merchant_name + .flexR .shop_num { padding-left: 30px; }
.merchant_name + .flexR .food_type::before, .merchant_name + .flexR .shop_num::before, .merchant_name + .flexR .shop_type::before, .merchant_name + .flexR .entan_type::before { position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; background-repeat: no-repeat; background-size: contain; background-position: center center; }
.merchant_name + .flexR .food_type::before { background-image: url(../images/icon_food_type.png); width: 30px; height: 30px; }
.merchant_name + .flexR .shop_type::before { background-image: url(../images/icon_shop_type.png); width: 30px; height: 30px; }
.merchant_name + .flexR .entan_type::before { background-image: url(../images/icon_entan_type.png); width: 30px; height: 30px; }
.merchant_name + .flexR .shop_num::before { background-image: url(../images/icon_addrs.png); width: 24px; height: 30px; }
.merchant_name + .flexR .shop_num.shop_num2::before { background-image: url(../images/icon_addrs_shop.png); width: 24px; height: 30px; }
.merchant_name + .flexR .shop_num.shop_num3::before { background-image: url(../images/icon_addrs_entan.png); width: 24px; height: 30px; }
.swi_tab_btn { gap: 10px; }
.swi_tab_btn a { color: #fff; font-weight: bold; text-align: center; cursor: pointer; transition: all 0.3s ease; border-radius: 999px; padding: 10px 20px; font-size: 18px; border: 2px solid #999; }
.swi_tab_btn a.onn { background-color: #b7a183; color: #000 !important; border: 2px solid #b7a183; }
/**************tnc***********/
.tnc, .tnc p, .tnc li, .tnc * { font-size: var(--remarks); color: #fff; }
.tnc a { word-break: break-all; }
.tnc ul, .tnc ol { padding-left: 1.4em; }
.tnc li { text-align: left; }
.tnc table { border-collapse: collapse; }
.tnc table th, .tnc table td { border: 1px solid #fff; text-align: center; padding: 8px; }
.tnc table th { font-weight: bold; }
.tnc .tnc_hc { display: none; }

@media (max-width: 1024px) {
.inner_grid { padding: 0px 20px; }
}

@media (max-width: 767px) {
:root { --h1: 38px;
--h2: 20px;
--h3: 18px;
--p: 16px;
--reminder: 13px;
}
.max80 { max-width: 60%; }
header .inner_grid { padding: 10px 20px; }
.main_tab { width: 100%; justify-content: space-between; margin: 0 auto 20px; }
.main_tab a { font-size: var(--h3); padding: 8px; }
.main_tab a img { width: 30px; }
.sub_tab { width: 100%; justify-content: center; gap: 10px; margin-bottom: 20px; }
.sub_tab a { width: fit-content; padding-right: 10px; }
.offer_rw { flex-direction: column; padding-top: 30px; }
.offer_rw .offer_img, .offer_rw .offer_text { width: 100%; }
.offer_rw .offer_img { padding: 0; }
.offer_rw .offer_img img { width: 100%; }
.offer_rw .offer_text { padding: 20px 0 0 0; }
.offer_rw .merchant_offer { font-size: var(--p); padding: 15px 40px; background-color: aquamarine; margin-bottom: 15px; }
.offer_rw .merchant_offer li { font-size: var(--h3); }
.offer_rw .merchant_tnc { padding-top: 20px; }
/* .flexR:has(.merchant_name + .flexR){flex-direction: column;
              gap: 10px;}
            .flexR:has(.merchant_name + .flexR) .merchant_name{align-self: flex-start;}
            .flexR:has(.merchant_name + .flexR) .flexR{align-self: flex-end;} */
.swiper-container.yen_coupon img, .swiper-container.csl_coupon img, .swiper-container.hkt_coupon img { max-width: 70%; }
.qr_icon { right: 0px; transform: translateY(-50%); }
.qr_icon img { width: 80px; }
.tentcard { width: 100%; aspect-ratio: unset; }
.line_style li:before { left: -25px; }
.stp_flx, .stp_flx_csl, .stp_flx_hkt { gap: 20px; }
.swi_tab_btn { flex-direction: column; }
.swi_tab_btn a { width: 100%; font-size: 14px; padding: 10px; }
/**************tnc***********/
.tnc_trig { padding: 0 20px 0px 0; }
.tnc .minus, .tnc .plus { font-size: 22px !important; }
}