@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(255, 156, 0, 1);
            --cate-breav-opac-third : rgb(255, 156, 0, 0.1);

          --cate-shopp : rgb(182, 190, 233);
          --cate-shopp-opac-third : rgb(182, 190, 233, 0.1);  

          --cate-entan : rgb(183, 43, 106);
          --cate-entan-opac-third : rgb(183, 43, 106, .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: calc(100% - 280px); 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; border: 4px solid #c7b496;}
        .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) 0%, 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: #b7a183 !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: #b7a183; color: #fff !important;}
        
        .merchant_name + .flexR{margin-bottom: 0 !important; gap: 20px; font-size: var(--p);}
        .merchant_name + .flexR .food_type, .merchant_name + .flexR .shop_num{position: relative; color: #565656;}
        .merchant_name + .flexR .food_type{padding-left: 35px;}
        .merchant_name + .flexR .shop_num{padding-left: 30px;}

        .merchant_name + .flexR .food_type::before, .merchant_name + .flexR .shop_num::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_num::before{background-image: url(../images/icon_addrs.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 #b7a183;
        }
        .swi_tab_btn a.onn{
          background-color: #b7a183;
          color: #000 !important;
        }

        /**************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;}
          }