body, button, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, input, select, textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
    font-weight: 400;
}

body {
    line-height: 1.6;
    font-size: 1rem;
    color: #212121;
    background: #ffe6c8 url(../images/bg-all.jpg) repeat;
}

ul {
    padding-inline-start: 0;
}

li {
    list-style: none;
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

.content-fluid {
    /* container-fluid */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.contentbox {
    /* container */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.contentbox_main {
    position: relative;
    padding: 50px 10px;
}

@media screen and (min-width: 576px) {
    .contentbox {
        max-width: 540px;
    }
}

@media screen and (min-width: 768px) {
    .contentbox {
        max-width: 720px;
    }
    .contentbox_main {
        padding-right: 0;
        padding-left: 0;
    }
}

@media screen and (min-width: 992px) {
    .contentbox {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .contentbox {
        max-width: 1140px;
    }
}

.rowline {
    /* row */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*-------------------- 共用樣式 --------------------*/

:root {
    --bg1: #fff7e5;
    --mid-width: calc(0.33333333 * 2 * 100% + 1rem * 4);
    --transition-com: all 0.3s ease;
}

@media screen and (max-width:767px) {
    :root {
        --mid-width: 100%;
    }
}

h1, h3, h4, h5 {
    text-align: center;
    font-weight: 600;
}

h1>img {
    zoom: 1;
}

@media screen and (max-width:767px) {
    h3 {
        font-size: 1.375rem;
    }
    h4 {
        font-size: 1.25rem;
    }
    h5 {
        font-size: 1.125rem;
    }
    h1>img {
        zoom: 0.75;
    }
    #itf_pay h1>img {
        zoom: 0.63;
    }
}

p {
    text-align: center;
}

.btn-lg {
    padding: 1rem 2rem;
}

@media screen and (max-width:767px) {
    .btn-lg {
        padding: 0.6rem 1.2rem;
        font-size: 1.125rem;
    }
}

.head-ribbon {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

.head-ribbon>img {
    max-width: 80%;
}

/*-------------------- 主視覺 --------------------*/

#main_top>h1 {
    display: block;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 1px;
    padding: 0;
    margin: 0;
}

#main_top {
    width: 100%;
    height: 0;
    padding-bottom: 21.25%;
    position: relative;
    background: url(../images/pc_1920x408.jpg) no-repeat center;
    background-size: cover;
}

@media screen and (max-width: 767px) {
    #main_top {
        padding-bottom: 52.083%;
        background: url(../images/mb_768x400.jpg) no-repeat center;
        background-size: cover;
    }
}

/*-------------------- NAV --------------------*/

.nav_bar {
    padding: 0;
    background: #d44444;
}

.nav_bar ul.rowline {
    display: flex;
    justify-content: space-between;
    padding-inline-start: 0;
}

.nav_bar ul.rowline>li {
    display: inline-block;
    text-align: center;
    padding: 1rem 0;
    cursor: pointer;
    font-size: 1.25rem;
    color: #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    transition: var(--transition-com);
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.nav_bar ul.rowline>li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f005';
    font-weight: 400;
    margin-right: 6px;
}

.nav_bar ul.rowline>li:hover {
    color: #fff6a6;
    background: #d00101;
    text-shadow: 2px 5px 2px #a20606;
    padding: 0.8rem 0 1.2rem;
}

.nav_bar ul.rowline>li:hover::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f005';
    font-weight: 600;
}

/* @media screen and (max-width: 1199px) {
    .nav_bar ul.rowline>li {
        padding: 0.6rem 1.5rem;
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 991px) {
    .nav_bar ul.rowline>li {
        padding: 0.5rem 0.6rem;
        font-size: 1.15rem;
    }
    .nav_bar ul.rowline>li::before {
        margin-right: 0.4rem;
    }
} */

@media screen and (max-width: 767px) {
    .nav_bar ul.rowline {
        justify-content: center;
    }
    .nav_bar ul.rowline>li {
        margin: 0;
        font-size: 1rem;
        padding: 0.5rem 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/*-------------------- 你出遊我買單 #itf_pay --------------------*/

#itf_pay>.contentbox_main {
    padding-top: 2rem;
}

#itf_pay h3 {
    color: #de2626;
}

#itf_pay h3::before {
    content: url(../images/icon-title1-l.png);
    margin-right: 10px;
}

#itf_pay h3::after {
    content: url(../images/icon-title1-r.png);
    margin-left: 10px;
}

@media screen and (max-width:767px) {
    #itf_pay h3::before, #itf_pay h3::after {
        display: none;
    }
}

.sec-bonus {
    position: relative;
    border-radius: 20px;
    background: var(--bg1);
    --margin-top: 4.8rem;
    margin-top: var(--margin-top);
}

.sec-bonus>div {
    margin-top: calc(var(--margin-top) - 9rem);
}

@media screen and (max-width:767px) {
    .sec-bonus>div:nth-of-type(2), .sec-bonus>div:nth-of-type(3) {
        margin-top: 0;
    }
}

.sec-bonus::before, .sec-bonus::after {
    content: '';
    position: absolute;
    --bonus-w: calc(0.14561 * 100%);
    width: var(--bonus-w);
    height: 0;
    padding-bottom: calc(var(--bonus-w) * 1.1024);
    z-index: -1;
    top: -10rem;
}

.sec-bonus::before {
    background: url(../images/icon-starbg-l.png) no-repeat top left/contain;
    left: 0;
}

.sec-bonus::after {
    background: url(../images/icon-starbg-r.png) no-repeat top right/contain;
    right: 0;
}

@media screen and (max-width:1199px) {
    .sec-bonus::before, .sec-bonus::after {
        top: -8rem;
    }
}

@media screen and (max-width:991px) {
    .sec-bonus::before, .sec-bonus::after {
        top: -6rem;
    }
}

@media screen and (max-width:767px) {
    .sec-bonus::before, .sec-bonus::after {
        --bonus-w: calc(0.3 * 100%);
    }
}

.bonus-item {
    position: relative;
    background: url(../images/gold-star.png) no-repeat center/contain;
    width: 100%;
    height: 0;
    padding-bottom: 95.087%;
    margin-bottom: 1rem;
}

.bonus-item>img {
    position: absolute;
    top: 50%;
    left: 50%;
}

.bonus-item>img:nth-of-type(1) {
    transform: translate(-50%, -60%);
    max-width: 45%;
}

.bonus-item>img:nth-of-type(2) {
    transform: translate(-50%, 50%);
    max-width: 80%;
}

.sec-bonus h5 {
    margin-bottom: 0.3rem;
}

.sec-bonus h5+p {
    margin-bottom: 2rem;
}

.app_area {
    border-radius: 20px;
    padding: 1rem 0.5rem 0;
    margin-bottom: 1rem;
}

.app_area>h4, .app_area>p {
    color: #ffffff;
}

.app_area>p strong {
    font-size: 1.5rem;
}

.app_area>h4::before {
    content: url(../images/icon-title2-l.png);
    margin-right: 10px;
}

.app_area>h4::after {
    content: url(../images/icon-title2-r.png);
    margin-left: 10px;
}

@media screen and (max-width:767px) {
    .gift-1>h4::before, .gift-1>h4::after {
        display: none;
    }
}

.app_area.gift-1 {
    background: #fa6900 url(../images/bg-sec1-1.gif) repeat;
}

.app_area.gift-2 {
    background: #fa8d00 url(../images/bg-sec1-2.gif) repeat;
    width: var(--mid-width);
    margin: 0 auto 1rem;
}

.app_area>.rowline>.col-12 {
    margin-bottom: 1.2rem;
}

.app-gift {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
    z-index: 1;
}

.app-gift::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    background: #ffffff;
}

.app-gift::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    transform: translate(-50%, -50%) rotate(5deg);
}

.gift-1 .app-gift::before {
    background: #de2626;
}

.gift-2 .app-gift::before {
    background: #fa5c00;
}

.app-gift>img {
    width: 100%;
    margin-bottom: 1rem;
}

.app-gift>p {
    margin-bottom: 0.5rem;
}

/*----- 訂房折扣碼Banner -----*/

.bn-area{
    display: block;
    width: var(--mid-width);/*- 寬度和.app_area.gift-2一樣 -*/
    margin: 0 auto 1rem;}
    .bn-area>img{
        width: 100%;
        height: auto;
    }

/*----- 馬上下載APP -----*/

#discount_app{
    padding-bottom: 80px;
}
#discount_app>h1 {
    margin-bottom: 2rem;
}

#discount_app>p {
    display: flex;
    justify-content: space-around;
    width: var(--mid-width);
    margin: 0 auto;
}

#discount_app>p .appShare {
    width: 36%;
}

@media screen and (max-width:767px) {
    #discount_app>h1>img {
        zoom: 0.8;
    }
    #discount_app>p {
        flex-direction: column;
        align-items: center;
    }
    #discount_app>p .appShare {
        width: 60%;
        margin-bottom: 1rem;
    }
}

a.appShare{cursor: pointer;}

/*-------------------- 門市獨家送 #itf_special --------------------*/

#itf_special {
    background: url(../images/bg-01.jpg) repeat;
}

.store-special {
    position: relative;
    background: var(--bg1);
    border-radius: 20px;
}

.store-special>img[src*='icon-ray-'] {
    position: absolute;
    height: 120%;
    width: auto;
    top: 50%;
}

.store-special>img[src*='icon-ray-']:nth-of-type(1) {
    left: 0;
    transform: translate(-70%, -50%);
}

.store-special>img[src*='icon-ray-']:nth-of-type(2) {
    right: 0;
    transform: translate(70%, -50%);
}

@media screen and (max-width:767px) {
    .store-special>img[src*='icon-ray-'] {
        display: none;
    }
}

.store-special>div {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.store-special>div>img {
    align-self: center;
    max-width: 100%;
}

.store-special h4, .store-special p {
    text-align: left;
}

.store-special .btn-lg {
    align-self: flex-start;
}

@media screen and (max-width:767px) {
    .store-special h4, .store-special p {
        text-align: center;
    }
    .store-special .btn-lg {
        align-self: center;
    }
}

/*-------------------- 銀行刷卡禮 #itf_food --------------------*/

#itf_food {
    background: url(../images/bg-02.jpg) repeat;
}

#itf_food>.contentbox>h1, #itf_food>.contentbox>h4 {
    margin-bottom: 1rem;
}

#itf_food>.contentbox>.rowline>div {
    margin-bottom: 1.5rem;
}

@media screen and (max-width:991px) {
    #itf_food>.contentbox>.rowline>div {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.bank-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #ffffff;
}

.bank-box>p {
    display: flex;
    width: 100%;
    height: 95px;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.bank-box>p>img {
    width: 100%;
    height: auto;
    margin: auto;
}

.bank-box>ul {
    display: block;
    padding: 0 1rem;
}

.bank-box>ul li {
    text-indent: -20px;
    margin-inline-start: 20px;
    line-height: 1.4;
    margin-bottom: 3px;
}

.bank-box>ul li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f005';
    font-weight: 600;
    font-size: 0.875rem;
    color: #00b8bc;
    margin-right: 5px;
}

.btn-sec {
    padding: 2rem 0;
    margin-bottom: 0;
    text-align: center;
}

/*-------------------- 注意事項 #itf_note --------------------*/

#itf_note ul {
    padding-inline-start: 24px;
    margin-bottom: 5px;
}

#itf_note .contentbox>ul {
    width: 90%;
    margin: 0 auto;
    padding-inline-start: 0;
}

.note_list {
    background: url(../images/note_icon.png) no-repeat left 5px;
    padding-left: 20px;
}

.note_list_content {
    background: url(../images/note_icon01.png) no-repeat left 6px;
    padding-left: 20px;
}

.note_content_item {
    background: url(../images/note_icon02.png) no-repeat left 7px;
    padding-left: 15px;
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

#btn_app{
    position: fixed;
    right: 5px;
    bottom: calc(60px + 95px + 5px);
    z-index: 999;
}

#btn_top {
    position: fixed;
    right: 5px;
    z-index: 999;
}

@media screen and (max-width:767px) {
    #itf_note .contentbox>ul {
        width: 95%;
    }
    #btn_top, #btn_app {
        right: 0;
    }
}