@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-color: #231912; background-image: url(../images/pagebg_a.jpg); background-repeat: repeat-y; background-size: auto;}
        

        header{background-color: #000;}
        header .inner_grid{padding: 20px 30px;}
        .spacer{height: 50px; display: block;}

        *{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: var(--gold-color); 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;
        }
        .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: 365px; margin-right: 45px;}
        /* .how_to_go .swiper-slide.swiper-slide-active{filter: brightness(1);} */
        .tentcard{
          background-color: #000000;
          overflow: hidden;
          border: 2px solid #000;
          width: 100%; margin: auto;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .swi_content *{color: #000;}

        .indent{background-color: var(--gold-color); display: flex; flex-direction: column; justify-content: space-between; padding: 20px 20px 10px 20px;}
        .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;}
        .indent .remarks{font-size: calc(var(--remarks) * 1.2);}
        .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 { height: auto; width: 100%; }
        .swiper-container.yen_coupon img{opacity: 0; max-width: 320px;}
        .swiper-container.yen_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{opacity: 1;}

        .stp_flx{display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-left: 20px;}
        .stp_flx 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{background-color: #e26a0e; color: #000 !important;}

        .addrs_btn{display: flex; flex-direction: row; justify-content: space-between; background-color: #e26a0e; padding: 13px 13px 13px 50px; width: fit-content; margin: auto;
          gap: 2em; align-items: center;}
        .addrs_btn font{font-size: var(--h2); font-weight: bold; color: #000; text-align: center; margin: auto; display: block; line-height: 1.2em;}
        .addrs_btn img{width: 66px; height: 66px;}

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

          .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;
          }
          .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;}
          .swiper-container.yen_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%; padding: 10px;}
          .togg_p20{padding-left: 20px;}
          .addrs_btn font{font-size: var(--h2); font-weight: bold; color: #000; text-align: center; margin: auto; display: block;}

          /**************tnc***********/
          .tnc_trig{
            padding: 0 20px;
          }
          .tnc .minus, .tnc .plus{font-size: 22px !important;}
        }