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

            h1, h2, h3, h4, h5, h6 {
              text-shadow: -1px -1px 0 rgba(0, 0, 0, 0);
          }

          a:focus{color: inherit;}

        .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;}
        .pageBG{
          background-image: url(../images/bg_p1.jpg), url(../images/bg_p3.jpg), url(../images/bg_p2.jpg);
          background-position: center top, center bottom, center center;
          background-color: #2b2e35; 
          background-size: auto; 
          background-repeat: no-repeat, no-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;}
        a:hover{color: inherit;}
        *{color: #fff;  }

        :root{
          --h1 : 40px;
          --h2 : 30px;
          --h3 : 22px;
          --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);
        }

        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);}
        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;}
        .align_str{align-items: stretch;}
      
        .region_bar{
          clip-path: polygon(calc(100% - 60px) 0, 100% 100%, 0 100%, 0 0);
          background-image: url(../images/gold_sand.jpg);
          background-size: auto;
          background-repeat: repeat;
          padding: 18px 105px 0 50px;
          max-width: 70%;
        }
        .region_bar .flexR{
          gap: 20px;
          /* justify-content: space-between; */
          justify-content: flex-start;
        }
        .region_bar .flexR a{
          color: #fff;
          padding: 0 20px 16px;
          font-size: var(--h2);
          position: relative;
          letter-spacing: 0.16em;
          transition: all 0.3s ease;
          overflow: hidden;
        }
        .region_bar .flexR a::after{
          content: '';
          display: block;
          width: 100%;
          height: 10px;
          background-color: #9c7856;
          position: absolute;
          bottom: 0;
          left: 0;
          clip-path: polygon(calc(100% - 8px) 0, 100% 100%, 0 100%, calc(0% + 8px) 0);
          transition: all 0.3s ease;
          transform: translateY(100%);
        }

        .region_bar .flexR a.onn{color: #5d3a29;}
        .region_bar .flexR a.onn::after{transform: translateY(0);}

        .cate_sub{color: #5d3a29; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 3em; width: fit-content;}
        .cate_sub a{color: #5d3a29; font-size: var(--p);}
        .cate_sub a.onn{opacity: 1;}

        .tab-pane{padding-left: 70px; padding-right: 40px;}
        .context{
          /* width: 58%; */
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding-right: 40px;
          border-bottom: 1px solid #5d3a29;
        }
        .context p{color: #5d3a29;}
        .imga{
          width: 42%;
        }

        .cate_title{
          font-size: var(--h1);
          color: #5d3a29;
          width: fit-content;
          letter-spacing: 0;
          position: relative;
        }

        .cate_title::after{
          content: '';
          display: block;
          width: calc(100% + 40px);
          height: 10px;
          background-image: url(../images/brown_light.png);
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          bottom: -5px;
        }

        .merhants *{color: #5d3a29;}
        .merhants{ gap: 60px; align-items: flex-start; padding-bottom: 2em; border-bottom: 1px solid rgba(93, 58, 41, 0.2);}
        .merhants_gap{ gap: 60px; align-items: flex-start; padding-bottom: 2em; border-bottom: 5px solid rgba(93, 58, 41, 0.2);}
        .merhants .context{border: 0; width: calc(75% - 43px); padding-right: 0;}
        .merhants .context p{font-size: var(--h3); font-weight: 300;}
        .merhants .context li{font-weight: bold;}
        /* .merhants .context li{font-size: var(--h2); font-weight: 300;} */
        .merhants .imga{width: calc(25% + 43px);}
        

        .indy_more{font-size: calc(var(--h2) * 0.9); font-weight: 300; align-self: self-end; margin-top: 1.2em; padding-right: 30px; position: relative; color: #a17d5a; border-bottom: 1px solid #a17d5a;}
        .indy_more::after{
          content: '';
          display: block;
          width: 33px;
          height: 10px;
          background-color: #a17d5a;
          clip-path: polygon(calc(100% - 8px) 0, 100% 100%, 0 100%, calc(0% + 8px) 0);
          position: absolute;
          bottom: -1px; right: 0;
        }
        .indy_more:hover{color: #a17d5a; text-decoration: none;}
          
      

        /**********swiper**********/

        .swiper-button-prev,
        .swiper-container-rtl .swiper-button-next {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f6cd97'%2F%3E%3C%2Fsvg%3E");
        }
        .swiper-button-next,
        .swiper-container-rtl .swiper-button-prev {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f6cd97'%2F%3E%3C%2Fsvg%3E");
        }
        .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
          background: #000;
          opacity: 0.7;
      }
      .swiper-pagination-bullet-active {
          opacity: 1;
          background: #f6cd97;
      }


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


        /**************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;}
        .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;
            }
            header .inner_grid img{
                max-width: 80%;
            }
          }
          @media (max-width: 767px) {
            :root{
              --h1 : 32px;
              --h2 : 20px;
              --h3 : 18px;
              --p : 16px;
              --reminder : 13px;
            }

            .max80{max-width: 60%;}

            header .inner_grid{padding: 10px 20px;}
            header .inner_grid .flexR{gap: 0.8em;}
            /* header .inner_grid .flexR a{align-self: flex-end;} */

            .region_bar{width: 100%; max-width: unset; padding: 10px 10px 0 10px; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);}
            .region_bar .flexR{width: 100%; max-width: unset; padding: 0px; gap: 10px;}
            .region_bar .flexR a{font-size: 18px; padding: 0 10px 10px 10px;}
            .region_bar .flexR a::after{height: 8px;}

            .tab-pane {
                padding-left: 20px;
                padding-right: 20px;
            }
            .cate_sub{gap: 10px; margin: auto;}

            .align_str {flex-direction: column;}
            .context, .imga, .merhants .imga, .merhants .context{width: 100%;}
            .context{padding-right: 0; order: 2; padding-bottom: 20px;}
            .imga{order: 1;}
            .imga img{max-width: 220px;}

            .merhants {
              gap: 20px;
              flex-direction: column;


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