@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&family=Noto+Sans+TC:wght@100..900&display=swap");

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

:root {
    --basic-txt: #212121;
    --main-blue: #0060bf;
    --light-blue: #4db5ff;
    --main-ye: #ffce1f;
    --main-or: #f4a101;
    --deep-or: #e3641d;
    --content-p: calc(3.5vw + 42px);
    --col-p: clamp(8px, 1vw + 2px, 15px);
    --transition-com: all 0.25s ease;
}

@media screen and (max-width: 991px) {
    :root {
    }
}

.material-icons {
    vertical-align: text-top;
}

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

/*-------------------- 全頁 --------------------*/

#wrapper {
    padding-bottom: var(--content-p);
}

/*-- 標題字級 --*/

h1 {
    font-family: "Noto Sans TC", sans-serif;
    position: relative;
    display: inline-flex;
    margin-bottom: 1.5rem;
    white-space: nowrap;
    letter-spacing: 0.1rem;
    font-weight: 800;
    text-shadow: 4px 4px 0 rgba(33, 118, 203, 0.3);
    line-height: 1.4;
    color: var(--main-blue);
    z-index: 100;
}

h1::before {
    content: "\ea71";
    font-family: "Material Symbols Outlined";
    font-size: 110%;
    color: var(--light-blue);
    text-shadow: none;
    font-weight: 400;
    margin-right: 0.5rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 200,
        "opsz" 24;
}

h1::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 83%;
    height: 50%;
    top: 50%;
    right: -6%;
    border: 1px solid var(--light-blue);
    opacity: 0.8;
    z-index: -1;
}

.scoot-style{
    --main-blue: var(--basic-txt);
    --light-blue: #e04262;
}

.scoot-style h1{
    text-shadow: 4px 4px 0 #fff700;
}

h4 {
    display: inline-block;
    font-weight: 700;
}

h4::before {
    content: "\e6ca";
    font-family: "Material Symbols Outlined";
    font-size: 120%;
    color: var(--main-or);
    text-shadow: none;
    font-weight: 400;
    margin-right: 0.3rem;
    vertical-align: sub;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

/*-- 按鈕 --*/

.btn {
    border-radius: 500px;
    white-space: nowrap;
}

@media screen and (min-width: 992px) {
    .btn {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

.btn > img {
    vertical-align: middle;
}

.btn-danger {
    color: #fff;
    background-color: var(--main-og);
    border-color: var(--main-og);
}

.btn-danger:hover {
    background-color: var(--og-deep);
    border-color: var(--og-deep);
}

.btn-lg {
    padding: 0.6rem 1.6rem;
    font-weight: 600;
    color: #fff !important;
}

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

/*-- 按鈕區域 --*/

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

/*-- 區塊樣式 --*/

.con_area {
    position: relative;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    background: rgb(255, 255, 255);
}

/*-------------------- 全頁 END --------------------*/

#jetfi-intro {
}

#jetfi-intro .pic-sec {
    position: relative;
    height: 330px;
    background-color: var(--main-ye);
    overflow: hidden;
}

#jetfi-intro .pic-sec > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: auto;
}

@media screen and (max-width: 991px) {
    #jetfi-intro .pic-sec > img {
        width: 90%;
        height: auto;
    }
}

.txt-sec.txt-sec {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--col-p) calc(var(--col-p) / 2 * 3);
}

@media screen and (max-width: 575px) {
    .txt-sec.txt-sec {
        align-items: center;
    }
}

.main-txt {
    text-align: start;
    margin-bottom: 0;
}

#leading-sec {
    padding-top: calc(var(--content-p) / 3);
}

#leading-sec h4:first-of-type {
    margin-bottom: 1rem;
}

#leading-sec figure > img {
    max-width: 93%;
    height: auto;
    margin-bottom: 1rem;
}

@media screen and (max-width: 575px) {
    #leading-sec figure {
        margin-bottom: 2.5rem;
    }
    #leading-sec figure > img {
        max-width: 75%;
    }
}

#leading-sec figure > figcaption {
    display: inline-block;
    color: #fff;
    background-color: var(--main-or);
    padding: 0.28rem 1.25rem;
    border-radius: 500px;
}

.step-sec h5 {
    display: inline-block;
    font-weight: 400;
    line-height: 1.3;
    background-color: #fff;
    border-radius: 1rem;
    padding: calc(var(--col-p) / 2) var(--col-p);
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 575px) {
    .step-sec > div:not(:last-of-type) {
        margin-bottom: 4rem;
    }
    .step-sec h5 {
        margin-bottom: 1rem;
    }
}

.step-sec h5::before {
    display: none;
}
.step-box>img {
    width: 245px;
    max-width: 100%;
    height: auto;
}
.step-box img[src*="/btn-"] {
    margin-top: 1rem;
}

/* 商品區 */

.pro {
    justify-content: center;
}

.pro>div{
    margin-bottom: 1rem;
}

.sale_img {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 5 / 3;
    z-index: 100;
}

.scoot .sale_img {
    aspect-ratio: 3 / 2.4;
}

.sale_img > img {
    position: absolute;
    bottom: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
    width: auto;
}

@media screen and (max-width: 575px) {
    .sale_img {
        aspect-ratio: 3 / 2.4;}
}

.sale_box {
    text-decoration: none;
    transition: var(--transition-com);
}

.sale_info {
    position: relative;
    background-color: #fff;
    border-radius: 1rem;
    text-align: start;
    padding: calc(var(--content-p) * 2 + var(--col-p)) calc(var(--col-p) / 2 * 3) var(--col-p);
    margin: calc(var(--content-p) * -2) calc(var(--col-p) * -1) 0 var(--col-p);
    z-index: 90;
    transition: var(--transition-com);
}
.sale_info > h4, .sale_info > h5 {
    display: inline-block;
    color: #002b7b;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.3rem;
    transition: var(--transition-com);
}

@media screen and (max-width: 575px) {
    .sale_info h4,
    .sale_info .h4 {
        font-size: 1.125rem;
    }
}
.sale_info > h4::before {
    display: none;
}
.sale_price {
    color: var(--deep-or);
    font-weight: 500;
    line-height: 1.2;
    transition: var(--transition-com);
}
.sale_price > i {
    font-style: normal;
    font-size: 150%;
}
.sale_info > .material-symbols-outlined {
    position: absolute;
    right: var(--col-p);
    bottom: calc(var(--col-p) + 0.8rem);
    color: var(--main-ye);
    font-size: 3.5rem;
    transition: var(--transition-com);
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

@media (min-width: 576px) and (max-width: 991px) {
    .sale_info > .material-symbols-outlined {
        bottom: var(--col-p);
    }
}

@media screen and (max-width: 991px) {
    .scoot .sale_info > .material-symbols-outlined {
        right: calc(var(--col-p) / 2);
    bottom: calc(var(--col-p) / 2);
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 575px) {
    .sale_info > .material-symbols-outlined {
        font-size: 2.5rem;
    }
}
.sale_box:hover .sale_info {
    background-color: var(--main-blue);
}
.sale_box:hover .sale_info > h4, .sale_box:hover .sale_info > h5 {
    color: #fff;
}
.sale_box:hover .sale_price {
    color: var(--main-ye);
}
.sale_box:hover .sale_info > .material-symbols-outlined {
    color: var(--main-or);
}

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

#note .con_area {
    background-color: transparent;
    backdrop-filter: blur(3px);
    padding: 1rem;
}

#tte_note {
    background-color: #e9ecef;
    padding-top: var(--content-p);
    font-size: 80%;
}

#tte_note ul {
    /* padding-inline-start: 24px; */
    margin-bottom: 5px;
}

@media screen and (max-width: 575px) {
    #tte_note ul {
        padding-inline-start: 5px;
    }
}

#tte_note li {
    text-align: left;
}

@media screen and (max-width: 991px) {
    #tte_note li {
        font-size: 0.9375rem;
    }
}

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

.note_list {
    background: url(https://event.cdn-eztravel.com.tw/events/travelfair/202305/note_icon01.png) no-repeat left 8px;
    padding-left: 24px;
    margin-bottom: 5px;
}

.note_list_content {
    background: url(https://event.cdn-eztravel.com.tw/events/travelfair/202305/note_icon02.png) no-repeat left 6px;
    padding-left: 20px;
}

.note_content_item {
    background: url(https://event.cdn-eztravel.com.tw/events/travelfair/202305/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) {
    #tte_note .contentbox > ul {
        width: 95%;
    }

    #btn_top,
    #btn_app {
        right: 0;
    }
}