/*-------------------- 全頁共用 --------------------*/

:root {
    --basic-txt: #212121;
    --blue-txt: #22569b;
    --red-txt: #dd3e00;
    --main-color01: #21b3c3;
    --main-color02: #ef9d30;
    --main-color03: #e58923;
    --main-color04: #F4C3C3;
    --content-p: 5rem;
    --transition-com: all 0.2s ease;
    --btnCTA: #21b3c3;
    --btnCTA-hover: #1c97a5;
}

@media screen and (max-width:991px) {
    :root {
        --content-p: 5rem;
    }
}

strong {
    font-weight: 600 !important;
}

.material-icons {
    vertical-align: middle;
}

/*-- 標題樣式 --*/

.content-fluid>h1 {
    --h1-h: calc(4vw + 42px);
    height: var(--h1-h);
    display: inline-block;
    position: absolute;
    top: calc(2vw + 20px);
    z-index: 500;
}

.content-fluid:nth-of-type(odd)>h1 {
    left: 0;
}

.content-fluid:nth-of-type(even)>h1 {
    right: 0;
}

.content-fluid>h1>img {
    height: 100%;
    width: auto;
}

/*-- 按鈕 --*/

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

.btn-cta {
    padding:0.4rem 0.6rem;
    font-size: 0.9rem;
    color: var(--btnCTA);
    font-weight: 600;
    border: 3px solid var(--btnCTA);
    background-color: #fff;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-radius: 87px;
    transition: var(--transition-com);
    white-space: nowrap;
}

.btn-cta .material-icons {
    position: relative;
    transform: translateX(0);
    transition: var(--transition-com);
}

.btn-cta > span {
    display: flex;
    align-items: center;
}

.btn-cta:hover {
    color: #fff;
    background-color: var(--btnCTA-hover);
}

.btn-cta:hover .material-icons {
    transform: translateX(5px);
}

@media screen and (min-width:768px)  {
    .btn-cta {
        padding: 0.8rem 1.225rem;
        font-size: 1rem;
    }
}

@media screen and (min-width:992px) {
    .btn-cta {
        display: block;
    }
}

.btn-lg {
    padding: 0.8rem 2rem;
    color: #fff !important;
    white-space: nowrap;
}

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

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

.con_area {
    position: relative;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 237, 1) 80%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#faf8ed', GradientType=0);
    /* IE6-9 */
}

.wrapper {
    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/note-bg.jpg);
    background-size: 150px 150px;
}

@media screen and (min-width:768px) {
    .wrapper {
        background-size: 250px 250px;
    }
}

/*-------------------- 全頁共用 END --------------------*/

/*-------------------- 日本溫泉圖鑑 #spa_map_jp --------------------*/

#spa_map_jp {
    padding-top: var(--content-p);
    padding-bottom: var(--content-p);

    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-01-bottom.png) no-repeat left bottom / 200% auto;
}

#spa_map_jp::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-01-left01.png) no-repeat left top / 100% auto;
    width: 100%;
    height: 100%;
}

img[src*='spa-map'] {
    display: block;
    width: 100%;
    margin-bottom: 40px;
}

#spa_map img[src*='spa-map'] {
    margin-top: 40px;
}

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

    #spa_map_jp {
        background-size: 150% auto;
    }

    #spa_map_jp::after {
        width: 75%;
    }

}

@media screen and (min-width:992px) {
    #spa_map_jp {
        background-size: 100% auto;
    }

    #spa_map_jp::after {
        width: 50%;
    }

    .map-jp-wrap {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    #spa_map_jp img[src*='spa-map'] {
        width: 75%;
        margin-right: 5%;
        transform: translateY(-20px);
        margin-bottom: 20px;
        filter: drop-shadow(2px 2px #fff);
    }

}

/*-------------------- 台灣溫泉圖鑑 #spa_map --------------------*/

@keyframes movecloud {
    0% {
        transform: translateY(15%);
        opacity: 0;
    }

    40% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-15%);
        opacity: 0;
    }
}

#wrapper {
    overflow-x: hidden;
}

.smoke {
    --icon-w: 34vw;
    display: block;
    position: absolute;
    width: var(--icon-w);
    height: calc(var(--icon-w) * 239 / 655);
    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-smoke.png) no-repeat center/contain;
    animation-name: movecloud;
    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 5s;
    /*動畫持續時間，單位為秒*/
    animation-delay: 0;
    /*動畫延遲開始時間*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#spa_map {
    padding-top: var(--content-p);
    /* background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-02-top.png) no-repeat left top / 200% auto; */
}

#spa_map .smoke:nth-of-type(1) {
    top: 3rem;
    right: 0;
    animation-delay: 1s;
}

#spa_map .smoke:nth-of-type(2) {
    bottom: 5.2rem;
    left: -5vw;
}

picture img {
    width: 100%;
    display: block;
}

.img-wrap {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

@media screen and (min-width:768px) {
    #spa_map {
        background-size: 150% auto;
    }
    .img-wrap {
        width: 50%;}
}

@media screen and (min-width:992px) {
    #spa_map {
        background-size: 100% auto
    }

    .img-wrap {
        --width:250px;
        width: var(--width);
        display: block;
    }

    .map-tw-wrap {
        display: flex;
        align-items: center;
    }

    #spa_map img[src*='spa-map'] {
        width: 75%;
        margin-right: 5%;
    }
}

@media screen and (max-width:767px) {
    .smoke {
        --icon-w: 60vw;
    }

    #spa_map .smoke:nth-of-type(2) {
        bottom: 5.2rem;
        left: 56vw;
    }
}

/*-------------------- 台灣溫泉圖鑑 #spa_map END --------------------*/

/*-------------------- 水水泡湯小知識 #spa_tips --------------------*/

@keyframes circle-smoke {
    100% {
        transform: rotate(1turn);
    }
}

#spa_tips {
    background:url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-02-right.png) no-repeat right top/25vw,url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-02-bottom.png) no-repeat right bottom/29vw;
    /* background-color: #fff; */
    padding-top: var(--content-p);
    padding-bottom: calc(var(--content-p) * 1.5);
}

@media screen and (max-width:767px) {
    #spa_tips {
        background:url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-02-right.png) no-repeat right top/50vw,url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-02-bottom.png) no-repeat right bottom/55vw;
        padding-top: calc(var(--content-p) * 1.2);
        padding-bottom: 0;
    }
}

.spa-tips-area>div {
    position: relative;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

@media screen and (min-width:768px) {
    .spa-tips-area>div:nth-of-type(3n-1) {
        transform: translateY(var(--content-p));
    }

    .spa-tips-area>div:nth-of-type(3n-2) {
        transform: translateY(calc(var(--content-p) * 2));
    }
}

.spa-tips-area>div::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 120%;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/bg-flow-yellow.png) no-repeat center/contain;
    z-index: -1;
}

.spa-tips-area>div:nth-of-type(-3n+5)::before {
    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/bg-flow-blue.png) no-repeat center/contain;
}

.spa-tips-area .spa-tips-pic {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

@media screen and (max-width:991px) {
    .spa-tips-area .spa-tips-pic {
        width: 150px;
        height: 150px;
    }
}

@media screen and (max-width:767px) {
    .spa-tips-area>div::before {
        background-position: center 2rem !important;
    }

    .spa-tips-area .spa-tips-pic {
        width: 110px;
        height: 110px;
    }
}

.spa-tips-area .spa-tips-pic>img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
}

.spa-tips-area .spa-tips-pic::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: url(https://event.cdn-eztravel.com.tw/events/2022_spa/icon-tips-smoke.png) no-repeat center/contain;
    z-index: -1;
    animation-name: circle-smoke;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.spa-tips-area>div:nth-of-type(-3n+5) .spa-tips-pic::before {
    animation-direction: reverse;
}

.spa-tips-area .spa-tips-txt {
    text-align: start;
    margin-bottom: 3rem;
}

@media screen and (max-width:767px) {
    .spa-tips-area .spa-tips-txt {
        margin-bottom: 0;
    }
}

/*-------------------- 水水泡湯小知識 #spa_tips END --------------------*/

/*-------------------- 精選溫泉懶人包推薦 #spa_trip --------------------*/

#spa_trip {
    background:url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/color-icon-left.png) repeat-y left top/50% auto, url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/color-icon-right.png) repeat-y right top/50% auto, url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-03.jpg) no-repeat center/cover;
    /* background-color: var(--main-color04); */
    padding-top: calc(8vw + 50px);
    padding-bottom: 3rem;
    overflow: hidden;
}

#spa_trip .smoke:nth-of-type(1) {
    top: 3rem;
    right: -2vw;
}

#spa_trip .smoke:nth-of-type(2) {
    --icon-w: 50vw;
    bottom: 0;
    left: -3vw;
}

@media screen and (max-width:767px) {
    #spa_trip .smoke:nth-of-type(1){
        top: 10rem;
        right: -8vw;
    }
    #spa_trip .smoke:nth-of-type(2){
        --icon-w: 75vw;
        left: -5vw;
    }
}

.spa-trip-area {
    padding-left: 3vw;
    padding-right: 3vw;
    position: relative;
    z-index: 10;
}

.spa-trip-area>div {
    display: flex;
    flex-direction: column;
}

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

    .spa-trip-area>div {
        margin-top: 3rem;
    }
}

@media screen and (min-width:768px) {
    #spa_trip {
        padding-bottom: 5rem;
        background:url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/color-icon-left.png) repeat-y left top/250px auto, url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/color-icon-right.png) repeat-y right top/250px auto, url(https://event.cdn-eztravel.com.tw/events/2022_spa/2024/bg-03.jpg) no-repeat center/cover;
    }

    .spa-trip-area>div {
        margin-left: auto;
        margin-right: auto;
    }

}

.spa-trip-area .spa-trip-pic>img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.spa-trip-area .spa-trip-txt {
    position: relative;
    text-align: justify;
    background-color: var(--main-color01);
    color: #fff;
    padding: 1rem 1rem 2.8rem 1rem;
}

.spa-trip-area .spa-trip-txt>h4 {
    font-weight: 600;
    line-height: 1.4;
}

@media screen and (max-width:991px) {
    .spa-trip-area .spa-trip-txt>h4 {
        font-size: 1.25rem;
    }
}

.spa-trip-area .spa-trip-txt a.more {
    display: inline-block;
    position: absolute;
    background: var(--main-color02);
    bottom: 0;
    right: 0;
    padding: 0.5rem 1rem;
    color: #fff;
    transition: var(--transition-com);
}

.spa-trip-area .spa-trip-txt a.more:hover {
    background: var(--main-color03);
}

/*-------------------- 精選溫泉懶人包推薦 #spa_trip END --------------------*/