@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; }
body { background-color: transparent; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Noto Sans TC", sans-serif !important; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0); }
a:focus { text-decoration: none; }
.no-padding { padding-left: 0 !important; padding-right: 0 !important; }
.img-center { display: block; margin-left: auto; margin-right: auto; }
.inner_grid { max-width: 1180px; margin: auto; padding: 0 56px; }
.pageBG { position: relative; background: #231912 url(../images/pagebg_a.jpg) top center no-repeat; background-size: cover; }
/*.pageBG * { color: #000; }*/
header { background-color: #000; }
header .inner_grid { padding: 20px 30px; }
.spacer { height: 50px; display: block; }
*, .tanyu_rw * { color: #FFF; }
:root { --h1 : 40px;
--h2 : 25px;
--h3 : 18px;
--p : 19px;
--reminder : 16px;
--remarks : 12px;
--gold-color : #c5a564;
--left-blk-w : 45%;
--right-blk-w : 55%;
}
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.1em; line-height: 1.2em; }
h2 { margin-top: 5px; margin-bottom: 5px; font-size: var(--h2); }
h3 { margin-top: 5px; margin-bottom: 5px; font-size: var(--h3); }
h4 { margin-top: 5px; margin-bottom: 5px; }
h5 { margin-top: 5px; margin-bottom: 5px; }
p, li { font-size: var(--p); }
.remarks { font-size: var(--remarks); }
.flexR { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.flexC { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.tanyu_rw { flex-wrap: wrap; gap: 0; justify-content: space-around; }
.tanyu_rw .blk { width: var(--right-blk-w); }
.tanyu_rw .blk:first-child { width: var(--left-blk-w); }
.tanyu_rw h2 { line-height: 1.4em; font-weight: 300; }
.tanyu_rw.with_swi { position: relative; justify-content: flex-start; align-items: flex-start; }
.tanyu_rw.with_swi .blk { position: absolute; }
.tanyu_rw.with_swi .blk.swi_contain { position: relative; /*left: var(--left-blk-w);*/ width: 100%; }
.tanyu_rw.with_swi .blk.swi_contain::after { position: absolute; content: ''; /*background-color: rgba(117,0,130, 0.5);*/ height: 75%; top: 25%; width: 100%; left: 0; }
.black_sect { position: relative; max-width: 570px; }
.qr_icon { position: absolute; right: 0; top: 0; transform: translateY(-50%); }
.qr_icon img { width: 100px; }
/**********swiper**********/
.swiper-container.how_to_go { height: auto; width: 100%; /*padding-left: 45px;*/ padding-top: 180px; padding-bottom: 10%; }
.swiper-pagination-how { left: 50%; transform: translate(-50%, 100%); display: flex; flex-direction: row; margin-top: 20px; gap: 20px; }
.how_to_go .swiper-slide { align-self: stretch; height: auto; width: 45%; }
.how_to_go .swiper-slide:last-child { margin-right: 0%; }
/* .how_to_go .swiper-slide.swiper-slide-active{filter: brightness(1);} */
.tentcard { background-color: #3a024e; overflow: hidden; border: 2px solid #3a024e; width: 100%; margin: auto; height: 100%; display: flex; flex-direction: column; }
.how_to_go .swiper-slide:last-child .tentcard { transform: translateY(10%); }
.indent { background-color: var(--gold-color); display: flex; flex-direction: column; justify-content: space-between; padding: 20px 20px 10px 20px; }
.indent2 { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 20px 10px 20px; }
.indent2 p { font-size: var(--h2); }
.swi_content { padding: 20px; height: 100%; }
.swi_content .indent { height: 100%; }
.swi_content .descrp * { margin: 0; }
.swi_content .descrp h2 { margin-top: 5px; margin-bottom: 5px; font-weight: bold;}
.descrp.discount a{display: block; background-color: #3a024e; padding: 8px 1.8em; border-radius: 999px;}

.indent .remarks, .indent2 .remarks { font-size: calc(var(--remarks) * 1.2); }
.indent2 .remarks * { color: #FFF; }
.hightlig { align-self: flex-end; font-size: calc(var(--h1) * 1.4);;
margin-top: 30px; margin-bottom: 0; font-style: italic; font-weight: 700; }
.modal-header, .modal-content, .modal-body { background: transparent; border: 0; box-shadow: none; padding: 0; }
}
.hightlig { align-self: flex-end; font-size: calc(var(--h1) * 1.4);;
margin-top: 30px; margin-bottom: 0; font-style: italic; font-weight: 700; }
.swiper-container-horizontal > .swiper-scrollbar { margin-top: 30px; margin-bottom: 0px; position: relative; left: 0px; width: calc(98% - 90px); }
.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: #3a024e !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: #3a024e; color: #FFF !important; }
.addrs_btn { display: flex; flex-direction: row; justify-content: space-between; background-color: #5f1e6f; padding: 13px 13px 13px 50px; width: fit-content; margin: auto; gap: 2em; align-items: center; box-shadow: 10px 10px 0px 0px rgba(176,99,201,1); }
.get_rewards { /*display: flex; flex-direction: row; justify-content: space-between;*/ width: fit-content; gap: 2em; /*align-items: center; align-self: baseline;*/}

.addrs_btn font, .get_rewards font { font-size: var(--h2); font-weight: bold; color: #FFF; text-align: center; margin: auto; display: block; line-height: 1.2em; }
.addrs_btn img { width: 66px; height: 66px; border-radius: 60px; }
.get_rewards font { font-size: var(--h2); }
.get_rewards_popup { background-color: #3a024e; }
.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 #e26a0e; }
.swi_tab_btn a.onn { background-color: #e26a0e; color: #000 !important; }
/**************tnc***********/
.tnc, .tnc p, .tnc li { font-size: var(--remarks); }
.tnc ul, .tnc ol { padding-left: 1.2em; }
.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; }
.mob_flexC { flex-direction: column; }
}

@media (max-width: 767px) {
:root { --h1 : 5.215123859191656vw;
--h2 : 5.215123859191656vw;
--h3 : 16px;
--p : 16px;
--reminder : 13px;
--left-blk-w : 100%;
--right-blk-w : 100%;
}
.spacer { height: 30px; display: block; }
/* header img{width: 130px;} */

.flexR.tanyu_rw { flex-wrap: nowrap; flex-direction: column; gap: 20px; }
.flexC_reverse { flex-flow: column-reverse }
.tanyu_rw.with_swi .blk { position: relative; }
.tanyu_rw .blk:first-child, .tanyu_rw .blk { /* text-align: right; */ }
.tanyu_rw .blk img { max-width: 200px; width: 100%; }
/******tailor made above swi*******/
.inner_grid.contain_swi .blk { padding-left: 20px; padding-right: 20px; }
.inner_grid.contain_swi .blk h2 { margin-bottom: 5px !important; }
/**********swi***********/
.tanyu_rw.with_swi .blk.swi_contain { left: 0; padding-left: 0; padding-right: 0; }
.swi_content { padding: 10px; }
.tentcard { border: 3px solid #000; text-align: left; }
.tentcard img { max-width: 100% !important; }
.how_to_go .swiper-slide:last-child .tentcard { transform: translateY(0%); }
.inner_grid.contain_swi { padding-left: 0; padding-right: 0; }
.how_to_go .swiper-slide { align-self: stretch; height: auto; width: 100%; margin-right: 15px; }
.swiper-container.how_to_go { padding-left: 0px; padding-top: 0; padding-bottom: 0; }
.swiper-container.yen_coupon img, .swiper-container.csl_coupon img, .swiper-container.hkt_coupon img { max-width: 70%; }
.swiper-container-horizontal > .swiper-scrollbar { margin-top: 20px; margin-bottom: 10px; position: relative; left: 20px; width: calc(98% - 40px); height: 7px; }
.hightlig { font-size: calc(var(--h1)* 2);
}
.qr_icon { right: 10px; }
.stp_flx { gap: 20px; }
.tentcard { width: 100%; aspect-ratio: unset; }
.line_style li:before { left: -25px; }
.addrs_btn { width: 95%; }
.togg_p20 { padding-left: 20px; }
.addrs_btn font, .get_rewards font { font-size: var(--h2); font-weight: bold; color: #FFF; text-align: center; margin: auto; display: block; }
.get_rewards { margin: 0 auto; }
.swi_tab_btn { flex-direction: column; }
.swi_tab_btn a { width: 100%; font-size: 14px; padding: 10px; }
/**************tnc***********/
.tnc_trig { padding: 0 20px; }
.tnc .minus, .tnc .plus { font-size: 22px !important; }
}