@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; text-shadow: 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: 970px; margin: auto;}
        .pageBG{background-image: url(../images/pagebg_a.jpg), url(../images/pagebg_b.jpg); background-position: center top, center bottom; background-color: #fcf7f1; background-size: auto; background-repeat: no-repeat;}

        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 : 16px;
          --remarks : 12px;

          /* --cate-breav : rgb(255, 156, 0, 1);
          --cate-breav-opac-third : rgb(255, 156, 0, 0.1);
          --cate-shopp : rgb(0, 148, 190);
          --cate-shopp-opac-third : rgb(0, 148, 190, 0.1);
          --cate-entan : rgb(183, 43, 106);
          --cate-entan-opac-third : rgb(183, 43, 106, .1); */

          --cate-breav : rgba(170, 105, 61, 1);
          --cate-breav-opac-third : rgba(170, 105, 61, 0.3);
          --cate-shopp : rgba(170, 105, 61, 1);
          --cate-shopp-opac-third : rgba(170, 105, 61, 0.3);
          --cate-entan : rgba(170, 105, 61, 1);
          --cate-entan-opac-third : rgba(170, 105, 61, 0.3);


        }

        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.05em; line-height: 1.4em;}
        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);}
        .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: #fff; border-radius: 9999px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border: 2px solid #1f2126; width: 100%; margin: 0 auto 40px ; padding: 2%;}
        /*.main_tab a{color: #fff; padding: 10px 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 35px; gap:10px; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(185,158,134,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.05em; filter: brightness(0) invert(1); transition: all 0.3s ease; position: relative;     align-self: stretch;}*/
        .main_tab a{color: #fff; padding: 5px 35px; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 35px; gap:10px; letter-spacing: 0.05em; filter: brightness(1) grayscale(1); transition: all 0.3s ease; position: relative; align-self: stretch; border-radius: 9999px; opacity: 0.5;}
        .main_tab a::before{position: absolute; content: ''; width: 100%; height: 100%; border: 3px solid #e2ccbd; border-radius: 9999px; 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); background-color: #fbf0e2; opacity: 1;}
        .main_tab a span{color: #aa693d;}
        .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(-50%);}
        .qr_icon img{width: 100px;}

        /*******************/
        
        .offer_rw{border-top: 1px solid rgb(255, 255, 255); padding-top: 10px; padding-bottom: 10px; display: flex; flex-direction: row; justify-content: flex-start;    align-items: flex-start;}
        .offer_rw:last-child{padding-bottom: 20px; border-bottom: 1px solid rgb(255, 255, 255);}
        .offer_rw ul{padding-left: 1.2em;}
        .offer_rw .offer_img{width: 41.66667%; padding: 20px;}
        .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: 40px; margin-bottom: 30px;}
        .offer_rw .merchant_offer li, .offer_rw .merchant_offer li strong{color: #fff;}

        .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: 24px; height: 2px; 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: 20px; border-top: 1px solid rgb(255, 255, 255);}
        .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: 1px solid var(--cate-breav);} */

        .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) 0%, 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: 1px solid var(--cate-shopp);} */

        .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) 0%, 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: 1px solid var(--cate-entan);} */

        .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);
          }

        .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: #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 .food_type.shop_type::before{background-image: url(../images/icon_shop_type.png); width: 30px; height: 30px;}
        .merchant_name + .flexR .food_type.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;}

        .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;
        }

        .offer_sh{flex-wrap: wrap; gap: 16px; align-items: stretch; justify-content: flex-start;}
        .offer_sh .offer_sh_item{width: calc(50% - 17px);}
        .offer_sh .devider{width: 1px; background-color: #f0d1b7;}
        .offer_sh .offer_sh_item .flexR{justify-content: space-between;}
        .offer_sh .offer_sh_item h2{color: #bc6634; font-size: var(--h2);}
        .offer_sh .expender h3{width: 100%; background-color: #fff; padding: 10px 10px 10px 1.2em; border-radius: 6px; display: flex; flex-direction: row; align-items: center; vertical-align: middle; gap: 1em; cursor: pointer;}
        .offer_sh .expender h3 span{position: relative;}
        .offer_sh .expender h3 span::before, .offer_sh .expender h3 span::after{position: absolute; content: ''; width: 10px; height: 1px; background-color: #bc6634; top: 50%; left: 50%; transform: translate(-50%, -50%);}
        .offer_sh .expender h3 span::after{transform: translate(-50%, -50%) rotate(90deg);}
        .offer_sh .expender h3.active span::after{transform: translate(-50%, -50%) rotate(0deg);}
        .offer_sh .expender h3 + p{display: none;}


        @media (max-width: 1024px) {
          .offer_sh .offer_sh_item{width: 100%;}
          .offer_sh .devider{display: none;}
        }



        /**************tnc***********/

        .tnc, .tnc p, .tnc li{
          font-size: var(--remarks);
        }
        .tnc a{
          word-break: break-all;
        }
        .tnc ul, .tnc ol{padding-left: 1.4em;}
        .tnc li{text-align: left; color: #fff;}
        .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;
              width: 33.333%;
            }
            .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: 80%;
            }
            .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: 10px;}

            .swiper-container.yen_coupon img, .swiper-container.csl_coupon img, .swiper-container.hkt_coupon img {
              max-width: 70%;
            }

            .qr_icon {right: 10px;}

            .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;
            }
            .tnc .minus, .tnc .plus{font-size: 22px !important;}
          }