@charset "utf-8";
/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure, mark, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*vertical-align: baseline;*/
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/}
/*ol, ul { list-style: none;}*/
ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}
a img {border: none;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {color: #333333; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:hover {}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font-size:15px;	
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

img { max-width:100%;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

body {   
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/	
}

/*基本變數*/
:root {
	/*基本*/
	--white-color:#fff;
	--black-color:#141115;
	--family-basic:Verdana,'微軟正黑體';
	--family-noto:"Noto Sans TC",Verdana;	
}

#web-outer{	
	clear: both;
	overflow: hidden;
	background: #100700 url("../img/bg.webp") top repeat;
}

header {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  clear: both;
  z-index: 1;  
}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

/*==================================================
  STAR HOTEL KV
==================================================*/

.kv {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 你的主視覺原始比例 1920 × 750 */
    aspect-ratio: 1920 / 750;
	margin-top:98px 
}


/*--------------------------------------------------
  右側／整張背景照片
--------------------------------------------------*/

.kv-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    /*
      不重新裁切構圖
      直接跟整個 KV 一起縮放
    */
    object-fit: fill;
}


/*--------------------------------------------------
  內容定位區
--------------------------------------------------*/

.kv-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
	
}

/*--------------------------------------------------
  左側文字圖

  1920px 時：
  484 / 1920 = 25.2083vw
--------------------------------------------------*/

.kv-title {
    position: absolute;

    /*
      1920 時約 220px
      220 / 1920 = 11.46%
    */
    left: 11.46%;

    top: 42%;

    /*
      1920px 時剛好約 484px
      1500px 時約 378px
    */
    width: 25.2083%;

    max-width: 484px;
    height: auto;

    display: block;

    transform: translateY(-50%);
}

.mobile{display: none;aspect-ratio: 4 / 3;}

@media screen and (max-width: 768px) {
	.kv {display: none;}
	.mobile{display: block;margin-top: 40px;}
}


/*-------------------------------------
  選單
-------------------------------------*/

#main-nav {
    position: relative;
    z-index: 990;
    width: 100%;
    margin: 0 auto;
    font-family: "Noto Serif TC", serif;
}

#block_menu {
    width: 100%;
    clear: both;
    overflow: hidden;
}

/* sticky */
.sticky {
    top: 40px;
}


/*-------------------------------------
  選單背景
-------------------------------------*/

#main-nav ul {
    width: 100%;
    height: 58px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    /* 香檳米金漸層 */
    background: linear-gradient(
        90deg,
        #e8d2a9 0%,
        #f1dfbb 50%,
        #e5cca0 100%
    );
}


/*-------------------------------------
  選單項目
-------------------------------------*/

#main-nav ul li {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*-------------------------------------
  選單中間分隔線
-------------------------------------*/

#main-nav ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    background: rgba(91, 67, 40, 0.28);
    transform: translateY(-50%);
}


/*-------------------------------------
  選單
-------------------------------------*/

#main-nav {
    position: relative;
    z-index: 990;
    width: 100%;
    margin: 0 auto;
    font-family: "Noto Serif TC", serif;
}

#block_menu {
    width: 100%;
    clear: both;
    overflow: hidden;
}

.sticky {
    top: 40px;
}


/*-------------------------------------
  選單背景
  #dfc59b → #ead5b1
-------------------------------------*/

#main-nav ul {
    width: 100%;
    height: 58px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    background: linear-gradient(
        90deg,
        #dfc59b 0%,
        #ead5b1 50%,
        #dfc59b 100%
    );
}


/*-------------------------------------
  選單項目
-------------------------------------*/

#main-nav ul li {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*-------------------------------------
  中間分隔線
-------------------------------------*/

#main-nav ul li:not(:last-child)::after {
    content: "";

    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 17px;
    background: rgba(86, 47, 26, .28);
    transform: translateY(-50%);
}


/*-------------------------------------
  選單文字
-------------------------------------*/

#main-nav ul li a {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0c1207;
    font-size: 18px;
    font-weight: 600;
	font-family: "Noto Serif TC", serif;
  	font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
    text-align: center;
    text-decoration: none;
    transition: color .3s ease;
}


/*-------------------------------------
  Hover 背景光影
-------------------------------------*/

#main-nav ul li a::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 145%;
    height: 78%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /*
      中央 #fff0d5 保留較大範圍
      不要太早透明
    */
    background: radial-gradient(
        ellipse at center,
        #fff0d5 0%,
        #fff0d5 28%,
        rgba(255, 240, 213, .95) 40%,
        rgba(255, 240, 213, .70) 55%,
        rgba(255, 240, 213, .35) 70%,
        rgba(255, 240, 213, 0) 88%
    );

    /* 原本 7px 太散，改小 */
    filter: blur(3px);
    pointer-events: none;
    transition:
        opacity .25s ease,
        width .3s ease;
}


/*-------------------------------------
  Hover / Active
-------------------------------------*/

#main-nav ul li a:hover,
#main-nav ul li a.active {
    color: #562f1a;
}

#main-nav ul li a:hover::before,
#main-nav ul li a.active::before {
    opacity: 1;
    width: 155%;
}


/*-------------------------------------
  Hover 下方細線
-------------------------------------*/

#main-nav ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 0;
    height: 1px;
    background: #562f1a;
    transform: translateX(-50%);
    transition: width .3s ease;
}

#main-nav ul li a:hover::after,
#main-nav ul li a.active::after {
    width: 55%;
}

@media screen and (max-width: 800px) {
	#main-nav ul li {padding: 0 8px;}
	#main-nav ul li a {font-size: 16px;}
}
.active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*-------------------------------------
  星級旅館－介紹文字
-------------------------------------*/
.intro-inner {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 30px auto 0 auto;
    padding-left: 26px;
    box-sizing: border-box;
}

/* 左側香檳金細線 */
.intro-inner::before {
    content: "";
    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 2px;

    background: linear-gradient(
        to bottom,
        rgba(185, 154, 106, .25),
        #b99a6a 25%,
        #d6b77e 50%,
        #b99a6a 75%,
        rgba(185, 154, 106, .25)
    );
}

/* 內文 */
.intro-inner p {
    margin: 0;
    color: #f3f3f3;
    font-family: "Noto Serif TC", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .05em;
    text-align: left;
}
/*-------------------------------------
  RWD
-------------------------------------*/

@media screen and (max-width: 768px) {

    .intro {
        padding: 35px 25px;
    }

    .intro-inner {
        padding-left: 18px;
    }

    .intro-inner::before {
        width: 1px;
    }

    .intro-inner p {
        font-size: 15px;
        line-height: 1.9;
        letter-spacing: .03em;
    }
}

/*-------------------------------------
  領取優惠區塊
-------------------------------------*/
.discount-wrap {
	margin-top: 80px;
    position: relative;
    width: 100%;    
    /*
      第一層：光影
      第二層：米白底紋
    */
    background-image:
        url("../img/discount_light.webp"),
        url("../img/discount_bg.webp");

    /*
      光影：不重複
      底紋：重複延伸
    */
    background-repeat:
        no-repeat,
        repeat;
    /*
      光影靠上置中
      底紋從左上開始鋪
    */
    background-position:
        center top,
        left top;
    /*
      光影保持原本比例
      底紋使用原始尺寸重複
    */
    background-size:
        auto,
        auto;
    overflow: hidden;
}

/*==================================================
  星級旅館－優惠內容
==================================================*/

.discount-content {
    width: 90%;
    max-width: 1000px;
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;}


/*==================================================
  左側－活動說明
==================================================*/

.discount-info {
    flex: 1;
    min-width: 0;

    color: #0c1207;

    font-family: var(--family-basic);
}


/* 主標 */

.discount-info h3 {
    margin: 0 0 25px;

    font-family: "Noto Serif TC", serif;

    font-size: 30px;
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: .06em;
}


/* 每一列 */

.discount-info__row {
    display: flex;
    align-items: flex-start;

    margin-bottom: 13px;
}


/* 小標籤 */

.discount-info__label {
    flex: 0 0 auto;

    margin-right: 12px;
    padding: 4px 7px;

    border: 1px solid #cbb18a;
    border-radius: 4px;

    color: #8a6546;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;
}


/* 內容 */

.discount-info__row p {
    margin: 1px 0 0;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;

    letter-spacing: .02em;
}


.discount-info__row strong {
    font-weight: 600;
}


/* 500元 */

.discount-info__price {
    color: #a90f28;
    font-weight: 600;
}


/*==================================================
  右側－優惠券
==================================================*/

.discount-coupon {
    position: relative;

    flex: 0 0 405px;

    width: 405px;
    height: 255px;

    padding: 24px 35px 20px;

    box-sizing: border-box;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #554433 0%,
            #604b37 48%,
            #70563c 100%
        );

    color: #fff;

    font-family: var(--family-basic);

    text-align: center;

    overflow: hidden;
}


/*==================================================
  底部金色流線
==================================================*/

.discount-coupon::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    bottom: 0;

    width: 463px;
    height: 83px;

    background:
        url("../img/discoun_box_bg.webp")
        bottom center
        no-repeat;

    pointer-events: none;
}


/*==================================================
  卡片內容壓在線條上方
==================================================*/

.discount-coupon__title,
.discount-coupon__price,
.discount-coupon__code,
.discount-coupon__btn {
    position: relative;

    z-index: 2;
}


/*==================================================
  國內星級旅館
==================================================*/

.discount-coupon__title {
    margin-bottom: 8px;

    color: #fff;

    font-family: "Noto Serif TC", serif;

    font-size: 23px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .15em;
}


/*==================================================
  現折 $500
==================================================*/

.discount-coupon__price {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 7px;
}


/* 現折 */

.discount-coupon__small {
    width: 1em;

    margin-right: 5px;
    margin-top: 5px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

    writing-mode: vertical-rl;
    text-orientation: upright;

    letter-spacing: .3em;
}


/* $500 */

.discount-coupon__price strong {
    color: #dca15d;

    font-family: "Noto Sans TC", sans-serif;

    font-size: 58px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: .01em;
}


/*==================================================
  優惠代碼
==================================================*/

.discount-coupon__code {
    margin: 10px 0 18px;

    font-family: "Noto Sans TC", sans-serif;

    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;

    letter-spacing: .06em;
}


/*==================================================
  立即領取按鈕
==================================================*/

.discount-coupon__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 205px;
    height: 44px;

    padding: 0 22px;

    box-sizing: border-box;

    border-radius: 30px;

    background: #d29b52;

    color: #fff;

    font-size: 20px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/*==================================================
  立即領取－箭頭
  與飯店卡片箭頭同造型
  但不加圓框
==================================================*/

.discount-coupon__arrow {
    position: relative;

    display: block;

    flex: 0 0 18px;

    width: 18px;
    height: 14px;

    color: currentColor;

    transition: transform .3s ease;
}


/* 箭頭右側 > */

.discount-coupon__arrow::before {
    content: "";

    position: absolute;

    left: 9px;
    top: 50%;

    width: 8px;
    height: 8px;

    box-sizing: border-box;

    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* 箭頭橫線 ─ */

.discount-coupon__arrow::after {
    content: "";

    position: absolute;

    left: 1px;
    top: 50%;

    width: 13px;
    height: 1px;

    background: currentColor;

    transform: translateY(-50%);
}


/*==================================================
  立即領取 Hover
==================================================*/

.discount-coupon__btn:hover {
    color: #fff;

    text-decoration: none;

    background: #c68d45;

    transform: translateY(-2px);

    box-shadow:
        0 5px 12px rgba(50, 35, 20, .15);
}


/* hover 時只有箭頭稍微往右 */

.discount-coupon__btn:hover .discount-coupon__arrow {
    transform: translateX(4px);
}


/*==================================================
  RWD 1200px
==================================================*/

@media screen and (max-width: 1200px) {

    .discount-content {
        gap: 35px;
    }


    .discount-coupon {
        flex-basis: 380px;

        width: 380px;
    }

}


/*==================================================
  RWD 1000px
==================================================*/

@media screen and (max-width: 1000px) {

    /*----------------------------------------------
      標籤與文字改成上下
    ----------------------------------------------*/

    .discount-info__row {
        display: block;

        margin-bottom: 18px;
    }


    .discount-info__label {
        display: inline-block;

        margin: 0 0 7px;
    }


    .discount-info__row p {
        margin: 0;
    }


    .discount-content {
        gap: 25px;
    }


    .discount-coupon {
        flex: 0 0 350px;

        width: 350px;

        padding-left: 25px;
        padding-right: 25px;
    }


    .discount-coupon__price strong {
        font-size: 54px;
    }

}


/*==================================================
  RWD 768px
  左右 → 上下
==================================================*/

@media screen and (max-width: 768px) {
	.discount-wrap {margin-top: 50px;}

    /* 主標 */

    .discount-info h3 {
        margin: 0 auto 25px auto;
        text-align: center;
    }


    .discount-content {
        display: block;
		margin: 30px auto;
    }


    /*----------------------------------------------
      左側
    ----------------------------------------------*/

    .discount-info {
        margin-bottom: 30px;
    }


    /*----------------------------------------------
      優惠券
    ----------------------------------------------*/

    .discount-coupon {
        width: 100%;
        max-width: 405px;
        height: 255px;

        margin: 0 auto;

        padding: 24px 30px 20px;
    }

}


/*==================================================
  RWD 480px
==================================================*/

@media screen and (max-width: 480px) {

    .discount-content {
        width: 90%;

        margin-top: 30px;
    }


    /*----------------------------------------------
      優惠券
    ----------------------------------------------*/

    .discount-coupon {
        width: 100%;
        height: auto;

        min-height: 240px;

        padding: 21px 20px 18px;

        border-radius: 10px;
    }


    /*----------------------------------------------
      底部流線
    ----------------------------------------------*/

    .discount-coupon::after {
        height: 62px;

        background-position: center bottom;
        background-size: 100% auto;
    }


    .discount-coupon__title {
        margin-bottom: 7px;

        font-size: 20px;
    }


    .discount-coupon__small {
        margin-right: 10px;

        font-size: 16px;
    }


    .discount-coupon__price strong {
        font-size: 50px;
    }


    .discount-coupon__code {
        margin: 8px 0 15px;

        font-size: 15px;
    }


    /*----------------------------------------------
      立即領取
    ----------------------------------------------*/

    .discount-coupon__btn {
        min-width: 190px;
        width: 190px;
        height: 42px;

        padding: 0 20px;

        gap: 12px;

        font-size: 18px;
    }


    .discount-coupon__arrow {
        flex-basis: 17px;

        width: 17px;
        height: 13px;
    }


    .discount-coupon__arrow::before {
        left: 8px;

        width: 7px;
        height: 7px;
    }


    .discount-coupon__arrow::after {
        width: 12px;
    }

}


/*==================================================
  觸控裝置
  避免手機殘留 Hover
==================================================*/

@media (hover: none) {

    .discount-coupon__btn:hover {
        background: #d29b52;
        transform: none;
        box-shadow: none;
    }


    .discount-coupon__btn:hover .discount-coupon__arrow {
        transform: none;
    }

}



/*==================================================
  優惠代碼－詳細規範
==================================================*/

.rule-box {
    width: 90%;
    max-width: 1000px;

    margin: 0 auto 70px;

    box-sizing: border-box;

    color: #28211c;

    font-family: var(--family-basic);
}


/*==================================================
  查看詳細規範
==================================================*/

.rule-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: max-content;

    margin: 0 auto;
    padding: 0 0 7px;

    border: 0;
    border-bottom: 1px solid #b99a6a;

    background: transparent;

    color: #28211c;

    font-family: var(--family-basic);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    transition:
        color .3s ease,
        border-color .3s ease;
}


/*==================================================
  小三角形
==================================================*/

.rule-toggle__arrow {
    width: 0;
    height: 0;

    margin-right: 6px;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;

    /* 初始 ▲ */
    border-bottom: 10px solid #28211c;

    transform: rotate(0deg);

    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        border-color .3s ease;
}


/*==================================================
  展開後 ▲ → ▼
==================================================*/

.rule-toggle[aria-expanded="true"]
.rule-toggle__arrow {
    transform: rotate(180deg);
}


/*==================================================
  按鈕 Hover
==================================================*/

.rule-toggle:hover {
    color: #8a6546;

    border-bottom-color: #8a6546;
}


.rule-toggle:hover .rule-toggle__arrow {
    border-bottom-color: #8a6546;
}


/*==================================================
  展開狀態
  維持與 Hover 相同顏色
==================================================*/

.rule-toggle[aria-expanded="true"] {
    color: #8a6546;

    border-bottom-color: #8a6546;
}


.rule-toggle[aria-expanded="true"]
.rule-toggle__arrow {
    border-bottom-color: #8a6546;
}


/*==================================================
  規範內容
==================================================*/

.rule-content {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;
    visibility: hidden;

    transition:
        grid-template-rows .5s cubic-bezier(.22, .61, .36, 1),
        opacity .35s ease,
        visibility .35s ease;
}


/*==================================================
  展開
==================================================*/

.rule-content.is-open {
    grid-template-rows: 1fr;

    opacity: 1;
    visibility: visible;
}


/*==================================================
  內容內層
==================================================*/

.rule-content__inner {
    min-height: 0;

    overflow: hidden;
}


/*==================================================
  規範標題
==================================================*/

.rule-content h3 {
    margin: 42px 0 16px;

    color: #28211c;

    font-family: var(--family-basic);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
}


/*==================================================
  UL
==================================================*/

.rule-content ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


/*==================================================
  LI
==================================================*/

.rule-content li {
    position: relative;

    margin: 0 0 5px;
    padding-left: 15px;

    color: #403a35;

    font-family: var(--family-basic);
    font-size: 15px;
    font-weight: 500;
    line-height: 2em;
}


/* 文字連結 */

.rule-content li a {
    text-decoration: underline;
}


.rule-content li a:hover {
    text-decoration: none;
}


/* 前面小點 */

.rule-content li::before {
    content: "✦";

    position: absolute;

    left: 0;
    top: 0;

    color: #77604b;
}


/*==================================================
  最後補充說明
==================================================*/

.rule-content__note {
    margin: 12px 0 0;

    color: #403a35;

    font-size: 15px;
    font-weight: 400;
    line-height: 2;

    letter-spacing: .02em;
}


/*==================================================
  RWD 768px
==================================================*/

@media screen and (max-width: 768px) {

    .rule-box {
        width: 90%;

        margin-bottom: 55px;
    }


    .rule-toggle {
        font-size: 16px;
    }


    .rule-content h3 {
        margin-top: 35px;

        font-size: 20px;
    }


    .rule-content li,
    .rule-content__note {
        font-size: 14px;

        line-height: 1.9;
    }

}


/*==================================================
  RWD 480px
==================================================*/

@media screen and (max-width: 480px) {

    .rule-box {
        width: 90%;

        margin-bottom: 45px;
    }


    .rule-toggle {
        padding-bottom: 6px;

        font-size: 15px;
    }


    .rule-toggle__arrow {
        margin-right: 5px;

        border-left-width: 5px;
        border-right-width: 5px;
        border-bottom-width: 8px;
    }


    .rule-content h3 {
        margin: 30px 0 14px;

        font-size: 19px;
    }


    .rule-content li {
        margin-bottom: 9px;

        padding-left: 12px;

        font-size: 14px;
        line-height: 1.85;
    }


    .rule-content__note {
        margin-top: 10px;

        font-size: 14px;
        line-height: 1.85;
    }

}



/*==================================================
  星級旅館－飯店卡片區
==================================================*/

.hotel-section {
    width: 100%;
    padding: 50px 0;
    box-sizing: border-box;
}


/*==================================================
  飯店列表
  使用 FLEX：
  最後一排不足3張時會自動置中
==================================================*/

.hotel-list {
    width: 90%;
    max-width: 1530px;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;

    gap: 32px;
}


/*==================================================
  飯店卡片
  桌機一排3張
==================================================*/

.hotel-card {
    position: relative;

    width: calc((100% - 64px) / 3);
    min-width: 0;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    background: #f2ece2;

    border-radius: 12px;

    overflow: hidden;

    color: #28211c;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* 連結狀態 */

.hotel-card:link,
.hotel-card:visited,
.hotel-card:active {
    color: #28211c;
    text-decoration: none;
}


/*==================================================
  飯店圖片
==================================================*/

.hotel-card__pic {
    width: 100%;

    margin: 0;

    aspect-ratio: 650 / 400;

    overflow: hidden;
}


.hotel-card__pic img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22, .61, .36, 1);
}


/*==================================================
  飯店地區標籤
==================================================*/

.hotel-card__area {
    position: absolute;
    z-index: 5;

    top: 0;
    left: 30px;

    min-width: 80px;
    height: 40px;

    padding: 0 15px 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 0 0 25px 25px;

    color: #fff;

    font-family: var(--family-basic);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .08em;

    pointer-events: none;

    /* 香檳金漸層＋微透明 */
    background: linear-gradient(
        135deg,
        rgba(205, 164, 102, .92) 0%,
        rgba(189, 141, 77, .92) 55%,
        rgba(170, 119, 59, .92) 100%
    );
}


/*==================================================
  卡片內容
==================================================*/

.hotel-card__body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding-top: 17px;

    box-sizing: border-box;

    color: #28211c;
}


/*==================================================
  星等 + 星級旅館 LOGO
==================================================*/

.hotel-card__star {
    margin: 0;

    display: flex;

    /* 星星與 Logo 底部對齊 */
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    color: #b98727;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2px;
    text-align: center;
    white-space: nowrap;
}


/* 星級旅館 Logo */

.hotel-card__star::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 28px;
    background: url("../img/logo.webp") center bottom / contain no-repeat;
	/* Logo 往上微調 */
    transform: translateY(2px);
}


/*==================================================
  飯店名稱
==================================================*/

.hotel-card__name {
    margin: 12px 25px 14px;

    color: #28211c;

    font-family: "Noto Serif TC", serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: .05em;

    text-align: center;
}


/*==================================================
  飯店特色
==================================================*/

.hotel-card__feature {
    /*
      flex:1
      讓2條、3條特色內容都可以自動撐高，
      下方「探索房型」保持對齊
    */

    flex: 1;

    margin: 0 14px;

    padding: 13px 8px 15px;

    box-sizing: border-box;

    border-top:
        1px solid rgba(119, 96, 75, .25);

    list-style: none;
}


.hotel-card__feature li {
    position: relative;

    margin: 0 0 11px;

    padding-left: 13px;

    color: #77604b;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

    letter-spacing: .02em;
}


.hotel-card__feature li:last-child {
    margin-bottom: 0;
}


/* 前面小點 */

.hotel-card__feature li::before {
    content: "・";

    position: absolute;

    left: 0;
    top: 0;
}


/*==================================================
  探索房型
==================================================*/

.hotel-card__link {
    width: 100%;
    min-height: 68px;

    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    box-sizing: border-box;

    color: #77604b;

    font-family: "Noto Serif TC", serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: .12em;

    transition:
        color .3s ease,
        background-color .3s ease;
}


/*==================================================
  圓形箭頭
==================================================*/

.hotel-card__arrow {
    position: relative;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    box-sizing: border-box;

    border: 1px solid #8f755c;
    border-radius: 50%;

    color: #77604b;

    font-size: 0;

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}


/* 箭頭右側 > */

.hotel-card__arrow::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

    box-sizing: border-box;

    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    transform:
        translate(-35%, -50%)
        rotate(45deg);
}


/* 箭頭橫線 ─ */

.hotel-card__arrow::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 13px;
    height: 1px;

    background: currentColor;

    transform:
        translate(-60%, -50%);
}


/*==================================================
  Hover
==================================================*/

.hotel-card:hover {
    color: #28211c;

    text-decoration: none;

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .16);
}


/* 圖片微微放大 */

.hotel-card:hover .hotel-card__pic img {
    transform: scale(1.025);
}


/* 探索房型淡淡底色 */

.hotel-card:hover .hotel-card__link {
    color: #562f1a;

    background:
        rgba(185, 154, 106, .08);
}


/* 圓形箭頭 */

.hotel-card:hover .hotel-card__arrow {
    color: #fff;

    border-color: #b99a6a;

    background: #b99a6a;

    transform: translateX(5px);
}


/*==================================================
  RWD 1200px
==================================================*/

@media screen and (max-width: 1200px) {

    .hotel-list {
        width: 92%;

        gap: 22px;
    }


    /* 一排仍維持3張 */

    .hotel-card {
        width: calc((100% - 44px) / 3);
    }


    .hotel-card__name {
        font-size: 24px;
    }


    .hotel-card__feature li {
        font-size: 14px;
    }


    .hotel-card__link {
        font-size: 19px;
    }

}


/*==================================================
  RWD 900px

  一般區塊：
  3張 → 1張
  卡片寬80%

  two-step：
  3張 → 2張
==================================================*/

@media screen and (max-width: 900px) {

    /* 一般區塊 */

    .hotel-list {
        width: 100%;

        gap: 30px;
    }


    .hotel-card {
        width: 80%;
        max-width: 600px;

        margin: 0;
    }


    /* two-step區塊 */

    .hotel-section--two-step .hotel-list {
        width: 90%;

        gap: 24px;
    }


    .hotel-section--two-step .hotel-card {
        width: calc((100% - 24px) / 2);

        max-width: none;

        margin: 0;
    }

}


/*==================================================
  RWD 600px

  所有區塊：
  1張
  width 90%
==================================================*/

@media screen and (max-width: 600px) {

    .hotel-section {
        padding: 45px 0 25px 0;
    }


    /* 一般區塊 */

    .hotel-list {
        width: 100%;

        gap: 25px;
    }


    .hotel-card {
        width: 90%;
        max-width: 600px;

        margin: 0;
    }


    /* two-step區塊 */

    .hotel-section--two-step .hotel-list {
        width: 100%;

        gap: 25px;
    }


    .hotel-section--two-step .hotel-card {
        width: 90%;
        max-width: 600px;

        margin: 0;
    }


    .hotel-card__name {
        font-size: 23px;
    }


    .hotel-card__area {
        left: 15px;
    }

}


/*==================================================
  RWD 480px
==================================================*/

@media screen and (max-width: 480px) {

    .hotel-section {
        padding: 35px 0;
    }


    /* 手機全部維持90% */

    .hotel-card,
    .hotel-section--two-step .hotel-card {
        width: 90%;

        border-radius: 10px;
    }


    .hotel-card__body {
        padding-top: 15px;
    }


    /* 星等 */

    .hotel-card__star {
        gap: 6px;

        font-size: 18px;

        letter-spacing: 1px;
    }


    /* 星級旅館 LOGO */

    .hotel-card__star::after {
        width: 16px;
        height: 25px;
    }


    .hotel-card__name {
        margin: 10px 20px 12px;

        font-size: 22px;
    }


    .hotel-card__feature {
        margin: 0 12px;

        padding: 12px 5px 15px;
    }


    .hotel-card__feature li {
        margin-bottom: 8px;

        font-size: 14px;
        line-height: 1.6;
    }


    .hotel-card__link {
        min-height: 62px;

        gap: 10px;

        font-size: 18px;
    }


    .hotel-card__arrow {
        flex-basis: 31px;

        width: 31px;
        height: 31px;
    }


    .hotel-card__arrow::before {
        width: 7px;
        height: 7px;
    }


    .hotel-card__arrow::after {
        width: 12px;
    }

}


/*==================================================
  無 Hover 裝置
==================================================*/

@media (hover: none) {

    .hotel-card:hover {
        transform: none;

        box-shadow: none;
    }


    .hotel-card:hover .hotel-card__pic img {
        transform: none;
    }


    .hotel-card:hover .hotel-card__link {
        color: #77604b;

        background: transparent;
    }


    .hotel-card:hover .hotel-card__arrow {
        color: #77604b;

        border-color: #8f755c;

        background: transparent;

        transform: none;
    }

}


/*==================================================
  觸控裝置
  手機不保留Hover
==================================================*/

@media (hover: none) {

    .hotel-card:hover {
        transform: none;
        box-shadow: none;
    }


    .hotel-card:hover .hotel-card__pic img {
        transform: none;
    }


    .hotel-card:hover .hotel-card__link {
        color: #77604b;
        background: transparent;
    }


    .hotel-card:hover .hotel-card__arrow {
        color: #77604b;

        border-color: #8f755c;
        background: transparent;
        transform: none;
    }

}

/*==================================================
  看更多－地區連結
==================================================*/

.hotel-more {
    width: 90%;
    max-width: 1530px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    box-sizing: border-box;
    font-family: var(--family-basic);
}


/*==================================================
  看更多
==================================================*/

.hotel-more__title {
    flex: 0 0 auto;
    color: #f2ece2; 
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
}


/*==================================================
  地區連結區
==================================================*/

.hotel-more__links {
    display: flex;
    align-items: center;
    gap: 10px;
}


/*==================================================
  地區按鈕
==================================================*/

.hotel-more__links a {
    min-width: 60px;    
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 10px;
    background: #c99a5b;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    transition:
        background-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/*==================================================
  Hover
==================================================*/

.hotel-more__links a:hover {
    background: #b98745;

    color: #fff;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .15);
}


/*==================================================
  900px
==================================================*/

@media screen and (max-width: 900px) {

    .hotel-more {
        width: 90%;        
    }

}


/*==================================================
  600px
  看更多改成上下排列
==================================================*/

@media screen and (max-width: 600px) {

    .hotel-more {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
		/*padding-bottom: 30px;*/
    }


    /* 看更多 */
    .hotel-more__title {
        height: auto;

        font-size: 16px;
        line-height: 1.4;

        text-align: center;
    }


    /* 地區按鈕 */
    .hotel-more__links {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        align-items: center;
        justify-content: center;

        gap: 10px;
    }  

}


/*==================================================
  480px
==================================================*/

@media screen and (max-width: 480px) {

    .hotel-more {
        width: 90%;
        gap: 10px;
    }


    .hotel-more__title {
        font-size: 15px;
    }


    .hotel-more__links {
        gap: 8px;
    }   

}


/*==================================================
  觸控裝置
==================================================*/

@media (hover: none) {

    .hotel-more__links a:hover {
        background: #c99a5b;
        transform: none;
        box-shadow: none;
    }

}



/*==================================================
  區塊標題
==================================================*/

.section-title {
    width: 400px;
    max-width: 90%;
    margin: 80px auto 50px;
    /* 上方留給星芒 */
    padding-top: 60px;
    /* 下方留給底線 */
    padding-bottom: 25px;
    box-sizing: border-box;
    background-image: url("../img/big_title.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    color: #0c1207;
    font-family: "Noto Serif TC", serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-align: center;
}


/* 英文小標 */

.section-title span {
    display: block;
    margin-top: 5px;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .28em;
}


/*==================================================
  共同標題
==================================================*/

.big-title {
    width: 400px;
    max-width: 90%;
    margin: 80px auto 50px;
    /* 上方留給星芒 */
    padding-top: 60px;
    /* 下方留給底線 */
    padding-bottom: 25px;
    box-sizing: border-box;
    background-image: url("../img/big_title_02.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    color: #cbac75;
    font-family: "Noto Serif TC", serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-align: center;
}


/* 英文小標 */

.big-title span {
    display: block;
    margin-top: 5px;
    color: #717171;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .28em;
}


/*==================================================
  768px 以下
  縮小標題上下外距
==================================================*/

@media screen and (max-width: 768px) {

    .section-title,
    .big-title {
        /*
          原本桌機：
          上80px / 下50px

          手機縮成：
          上25px / 下20px
        */
        margin: 30px auto 20px;
    }

}


/*==================================================
  400px 以下
==================================================*/

@media screen and (max-width: 400px) {

    .section-title,
    .big-title {
        width: 90%;

        /*
          再稍微縮小上下外距
        */
        margin: 20px auto 15px;

        /*
          保留背景星芒與底線需要的空間
        */
        padding-top: 12vw;
        padding-bottom: 7vw;
        font-size: clamp(28px, 9.5vw, 38px);
    }


    .section-title span,
    .big-title span {
        margin-top: 4px;
        font-size: clamp(11px, 3.5vw, 14px);
        letter-spacing: .24em;
    }

}


#recommend,#central,#east{background: url("../img/line_bg.webp") bottom no-repeat;padding-bottom: 100px;}
#north,#south{background: url("../img/line_bg_02.webp") bottom no-repeat;padding-bottom: 100px;}
#island{padding-bottom: 140px;}

/*錨點*/
.block-first{overflow: hidden;padding-top: 0;margin-top: 0;}
.block-second{overflow: hidden;padding-top: 30px;margin-top: -30px;}

.flex-center {	
	justify-content: center;
}
.flex-end {	
	justify-content: flex-end;	
}
.flex-between {	
	justify-content: Space-between;	
}
.flex-row-right {	
	flex-direction: row-reverse;	
}

.photo-wrap{width: 90%;margin: 0 auto;}
.product-slide2 .slick-prev ,.product-slide2 .slick-next {
	position: absolute;
	border: 0;
	top: calc(50% - 33px);
	text-indent: -9999px;
	z-index: 2;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.product-slide2 .slick-prev {
	left: 5px;
	background: url(../img/slide_arrow_left.png) no-repeat center;	
}

.product-slide2 .slick-next {
	right: 5px;
	background: url(../img/slide_arrow_right.png) no-repeat center;
}


/*------media query----------*/
@media only screen and ( max-width:1200px) {}
@media only screen and ( max-width:959px) {}
/*---平板-----*/
@media only screen and ( max-width:768px) 
{
#main-nav {display: none;}
/*錨點*/
.block-first{padding-top: 0px;margin-top: 0;}
.block-second{padding-top: 30px;margin-top: 0px;}
	
}

@media only screen and ( max-width:600px) {	
#central{background: none;padding-bottom: 0px;}
#recommend{background: none;padding-top: 30px; padding-bottom: 0px;}	
#north,#south,#east{background: none;padding-bottom: 0px;}
.block-first{padding-top: 0;}
}	
/*---手機版-----*/
@media only screen and (max-width:480px) {}