@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

/*font: 300 20px/1 "Noto Sans TC", "微軟正黑體";*/

/**********************************************************************/
/******通用樣式*******************************************************/
/**********************************************************************/
* {
    box-sizing: border-box;
}

#mtkContainer {}


.mktPc {
    display: block;
}

.mktM {
    display: none;
}

@media screen and (max-width:768px) {
    .mktPc {
        display: none !important;
        opacity: 0;
    }

    .mktM {
        display: block;
    }

    .poi-photo-inner p {
        writing-mode: unset
    }


}










/**********************************************************************/
/******版頭樣式*******************************************************/
/**********************************************************************/
header.heroImg {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}


.heroImg-title {
    display: block;
    position: absolute;
    top: 4.6%;
    left: 28.7%;
    width: 41.9%;
    height: auto;
    z-index: 10;
}

.heroImg-title img {
    width: 100%;
}

.heroImg-girl {
    display: block;
    position: absolute;
    top: 4.4%;
    left: 34%;
    width: 33.5%;
    height: auto;
    z-index: 5;
    transition: .5s;
}

.heroImg-girl img {
    width: 100%;
}

.heroImg-girl.on {
    transform: scaleX(-1);
}


.heroImg h1 {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 0;
    z-index: 1;
}

.heroImg h1 img {
    width: 100%;
}

.heroImg-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    width: 100%;
    height: 100%;

    z-index: 5;
}

.heroImg-btn li {
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0;
    padding: 0 0 3.5% 0;
    line-height: 0;
    width: 50%;
    height: 100%;

}

.heroImg-btn a {
    display: inline-block;
    margin: 0;
    padding: 0 25px 7px 25px;
    font: 700 50px/1.5 "Noto Sans TC", "微軟正黑體";
    color: white;
    letter-spacing: 4px;
    border-radius: 99em;
    border: 5px solid white;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.5);
    background: #853cff;
    transition: .5s;
}

.index .heroImg-btn li:nth-child(2) a {
    color: #fff100;
}

.taiwan .heroImg-btn li:nth-child(1) a {
    color: #fff100;
}

.heroImg-btn a:hover {
    transform: translateY(-10px);
}

.heroImg-btn img {
    padding-left: 10px;
    border-left: 1px solid white;
    transform: translateY(4px);
}

@media screen and (max-width:1280px) {
    .heroImg-btn a {
        padding: 0 15px 5px 15px;
        font: 700 40px/1.5 "Noto Sans TC", "微軟正黑體";
        letter-spacing: 3px;
    }

    .heroImg-btn img {
        width: 25%;
    }
}

@media screen and (max-width:600px) {
    .heroImg-btn li {
        padding: 0 0 15% 0;
    }

    .heroImg-btn a {
        font: 700 24px/1.5 "Noto Sans TC", "微軟正黑體";
    }

}

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

    .heroImg-btn img {
        display: none;
    }
}













/**********************************************************************/
/******本地選單樣式*******************************************************/
/**********************************************************************/

.localMenu {
    padding: 70px 0;
    background: white;
}

.localMenu-text {
    margin-bottom: 40px;
    color: #2b2b2b;
    letter-spacing: 10px;
    text-align: center;
}

.localMenu-text strong {
    display: block;
    margin-bottom: 20px;
    font: 700 37px/1.5 "Noto Sans TC", "微軟正黑體";

}

.localMenu-text strong span {
    display: inline-block;
    position: relative;
    z-index: 2;
}

.localMenu-text strong span::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 13px;
    background: #853cff;
    z-index: -1;
}

.localMenu-text small {
    display: block;
    font: 300 24px/1.5 "Noto Sans TC", "微軟正黑體";

}

.localMenu-text small span {
    color: #853cff;
    font-weight: 700;
}


.localMenu-btn {
    display: flex;
    justify-content: center;
}

.localMenu-btn a {
    display: inline-block;
    flex-shrink: 0;
    flex-grow: 0;
    margin-right: 40px;
    width: 95px;
    font: 300 18px/1.5 "Noto Sans TC", "微軟正黑體";
    text-align: center;
    color: #2b2b2b;
    letter-spacing: 2px;
}

.localMenu-btn a {
    margin-left: 0;
    transition: .5s;
}

.localMenu-btn a:hover {
    transform: scale(1.1);
}

.localMenu-btn img {
    display: block;
    width: 100%;
}

@media screen and (max-width:768px) {
    .localMenu {
        padding: 12% 0;
    }

    .localMenu-text {
        margin: 0 auto 5% auto;
        width: 80%;
    }

    .localMenu-btn {
        justify-content: flex-start;
        overflow-x: scroll;
    }

    .localMenu-btn a {
        margin-right: 3%;
        width: 15%;
    }
}

@media screen and (max-width:600px) {
    .localMenu-text {
        width: 95%;
        letter-spacing: 5px;
    }

    .localMenu-text strong {
        font-size: 25px;

    }

    .localMenu-text small {
        font-size: 20px;

    }

    .localMenu-btn a {
        margin-right: 5%;
        width: 23%;
    }
}







/**********************************************************************/
/******POI樣式*******************************************************/
/**********************************************************************/

.slidecontain li img,
.ph-group-title {
    display: none;
}

.poi {
    display: flex;
    padding: 120px 0 40px 0;
    background: white;
}

.poi-photo {
    position: relative;
    width: 50%;
}

.poi-photo-inner {
    display: flex;
    justify-content: center;
    position: relative;
    margin-left: 3.5%;
    width: 96.5%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.poi-photo-inner img {
    width: auto;
    height: 100%;

}

.poi-content {
    padding: 0 25px;
    width: 50%;
}

.poi-content h2 {
    margin-bottom: 0px;
    font: 700 37px/1.5 "Noto Sans TC", "微軟正黑體";
    color: #853cff;
    letter-spacing: 3px;
}

.poi-content h2 small {
    font-size: 0.6em;
}

.poi-content-link {
    margin-top: 10px;
}

.poi-content-link a {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    padding: 5px;
    font: 300 20px/1.3 "Noto Sans TC", "微軟正黑體";
    color: black;
    letter-spacing: 2px;
}

.poi-content-link a::after {
    display: none;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #853cff;
    z-index: 1;
}

.poi-content-link a:hover::after {
    display: block;
}

.slidecontain {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    padding: 10px 0;
    overflow-x: scroll;
}

.slidecontain li {
    display: inline-block;
    flex-shrink: 0;
    margin: 0 10px 10px 0;
}

.slidecontain li a {
    display: block;
    padding: 0 10px;
    font: 300 17px/1.8 "Noto Sans TC", "微軟正黑體";
    color: black;
    letter-spacing: 3px;
    /* background: #853cff;*/
    /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);*/
}

.slidecontain li a:hover {
    transform: scale(1.1);
}

.slidecontain li.on a:hover {
    transform: scale(1);
}

.slidecontain li.on a {
    font-weight: 700;
    color: #fff100;
    background: black;
}

.ph-group {
    display: none;
    padding: 25px 0 40px;
    overflow: hidden;
}

.ph-group.on {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.ph-group-content {
    display: inline-block;
    flex-shrink: 0;
    margin-right: 20px;
    width: 30%;
    background: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
}

.ph-group-content-text {
    padding: 10px;
}

.ph-group-content-text-name {
    font: 700 17px/1.3 "Noto Sans TC", "微軟正黑體";
    color: black;
    letter-spacing: 2px;
}

.ph-group-content-text-sale a {
    display: block;
    margin: 10px 0;
    padding: 0 5px;
    font: 300 15px/2 "Noto Sans TC", "微軟正黑體";
    color: #fff100;
    letter-spacing: 2px;
    background: #853cff;
}

.ph-group-content-text-detail a {
    font: 300 15px/1.3 "Noto Sans TC", "微軟正黑體";
    color: black;
    letter-spacing: 2px;
}

.ph-group-content-text-price {
    display: block;
    margin: 10px 0;
    font: 700 25px/1.3 "Noto Sans TC", "微軟正黑體";
    color: #853cff;
    text-align: center;
}

.ph-group-content-text-price span {
    font-size: 0.5rem;
}

.ph-group-content-photo {
    position: relative;
}

.ph-group-content-photo img {
    width: 100%;
}

.ph-group-content-tag {
    position: absolute;
    top: 0;
    left: 5px;
    display: inline-block;
    font: 300 17px/1.3 "Noto Sans TC", "微軟正黑體";
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);

}



/*.poi.redBg .slidecontain li a,*/
.redBg,
.redBg .ph-group-content-text-sale a {
    background: #ff3c81;
}

.redBg .slidecontain li a {
    color: white;
}

.redBg h2 {
    color: white;
}

.redBg .ph-group-content-text-price {
    color: #ff3c81;
}

.redBg .slidecontain li.on a {
    font-weight: 700;
    color: black;
    background: #fff100;
}




.redBg .poi-content-link a {
    color: white;
}

.redBg .poi-content-link a::after {
    background: #fff100;
}

@media screen and (max-width:1280px) {
    .ph-group-content {
        margin-right: 20px;
        width: 42%;
    }
}

@media screen and (max-width:768px) {
    .poi {
        display: block;
        padding: 15% 0 2% 0;
        background: white;

    }

    .redBg.poi {
        background: #ff3c81;
    }

    .poi-photo {
        width: 100%;
    }

    .poi-photo-inner {
        margin-left: 0%;
        margin: 0 auto;
        width: 95%;
        height: auto;

    }

    .poi-photo-inner {
        border-radius: 0;
    }

    .poi-photo-inner img {
        width: 100%;
        height: auto;
    }

    .poi-content {
        width: 100%;

    }

    .poi-content h2 {
        text-align: center;
    }

    .ph {
        border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
    }

    .slidecontain {
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

    .redBg .ph {
        border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
    }

}

@media screen and (max-width:600px) {
    .ph-group-content {
        width: 85%;
    }
}












/*************注意事項*********************************/
/*************注意事項*********************************/
/*************注意事項*********************************/
.note {
    margin: 0 auto;
    padding: 20px 0;
    width: 95%;
    max-width: 1400px;
    color: black;
}

.note h2 {
    font: 700 30px/1.8 "Noto Sans TC", "微軟正黑體";
    text-align: center;
}

.note p {
    font: 500 20px/1.8 "Noto Sans TC", "微軟正黑體";
}

.note li {
    margin-bottom: 20px;
    font: 300 17px/1.5 "Noto Sans TC", "微軟正黑體";
    list-style: decimal;
    list-style-position: inside;
    letter-spacing: 2px;
}

.note li a {
    display: inline-block;
    padding: 0 5px;
    color: #fff100;
    background: #ff3c81;
    border-radius: 99em;
    box-shadow: 0 5px 0px rgba(0, 0, 0, 0.2);
}

.note li a:hover {
    transform: scale(1.02);
}


























/*****************照片文字編排*****************************************/
/*****************照片文字編排*****************************************/
/*****************照片文字編排*****************************************/
.poi-photo-inner p {
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    color: white;
    letter-spacing: 1px;
    background: black;
    z-index: 5;
}

.poi-photo-inner p span {
    color: #fff100;
}

.poi-photo-inner .xl {
    font: 900 3.25vw/1.4 "Noto Sans TC", "微軟正黑體";
}

.poi-photo-inner .l {
    font: 900 2.5vw/1.4 "Noto Sans TC", "微軟正黑體";
}

.poi-photo-inner .s {
    font: 900 2vw/1.4 "Noto Sans TC", "微軟正黑體";
}

.a1 {
    top: 6%;
    left: 36%;
    transform: rotate(5deg);
}

.a2 {
    top: 69%;
    left: 8%;
    transform: rotate(-15deg);
}

.a3 {
    top: 77%;
    left: 10%;
    transform: rotate(-10deg);
}

.b1 {
    top: 40%;
    left: 5%;
    transform: rotate(-5deg);
}

.b2 {
    top: 47%;
    left: 35%;
    transform: rotate(-5deg);
}

.b3 {
    top: 54%;
    left: 60%;
    transform: rotate(-10deg);
}

.c1 {
    top: 7%;
    left: 4%;
    transform: rotate(-5deg);
}

.c2 {
    top: 18%;
    left: 5%;
    transform: rotate(-5deg);
}

.c3 {
    top: 72%;
    left: 0%;
    transform: rotate(-10deg);
}

.d1 {
    top: 4vw;
    left: 50%;
    transform: rotate(-5deg);
}

.d2 {
    top: 9vw;
    left: 51%;
    transform: rotate(-5deg);
}

.d3 {
    top: 13vw;
    left: 52%;
    transform: rotate(-5deg);
}

.e1 {
    top: 59%;
    left: 22%;

}

.e2 {
    top: 71%;
    left: 19%;

}

.f1 {
    top: 7%;
    left: 49%;
    transform: rotate(-5deg);
}

.f2 {
    top: 18%;
    left: 49%;
    transform: rotate(-5deg);
}

.f3 {
    top: 34%;
    left: 36%;
    transform: rotate(-10deg);
}




@media screen and (max-width:768px) {
    .poi-photo-inner {
        display: block;
        margin-bottom: 10%;
    }

    .poi-photo-inner p {
        position: static;
        display: block;
        width: 100%;
        transform: rotate(0deg);
        background: none;

    }

    .poi-photo-inner-p {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2% 0;
        width: 100%;
        /* background: rgba(0, 0, 0, 0.5);*/
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.75);
    }


    .poi-photo-inner .xl {
        font: 500 5.25vw/1.4 "Noto Sans TC", "微軟正黑體";
    }

    .poi-photo-inner .l {
        font: 500 3.5vw/1.4 "Noto Sans TC", "微軟正黑體";
    }

    .poi-photo-inner .s {
        font: 500 3vw/1.4 "Noto Sans TC", "微軟正黑體";
    }
}












/*******************頁面底部廣告**************************************/
/*******************頁面底部廣告**************************************/
/*******************頁面底部廣告**************************************/
.fixBottomAds {
    position: fixed;
    bottom: 0;
    left: 50%0;
    width: 100%;
    z-index: 20;
    background: rgba(255, 255, 255, 0.75);
}

.fixBottomAds.on {}



.fixBottomAds-inner {
    position: relative;
    margin: 0 auto;
    width: 95%;
    max-width: 1400px;
}

.fixBottomAds ul {
    display: none;
    padding: 15px 0;
    justify-content: space-between;
    width: 100%;

}

.fixBottomAds ul.on {
    display: flex;

}

.fixBottomAds ul li {
    display: inline-block;
    flex-shrink: 0;
    width: 49%;
    line-height: 0;

}

.fixBottomAds ul li img {
    width: 100%;
}

.fixBottomAds-inner-io {
    position: absolute;
    top: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    font: 25px/30px "arial";
    color: black;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 99em 99em 0 0;
}


@media screen and (max-width:600px) {
    .fixBottomAds ul.on {
        display: block;

    }

    .fixBottomAds ul li {
        display: block;
        width: 100%;
    }

    .fixBottomAds ul li:first-child {
        margin-bottom: 2%;
    }
}















/**********************************************************************/
/******動畫設定*******************************************************/
/**********************************************************************/
.aniWaveBottom,
.aniWaveTop {
    position: relative;
}

.aniWaveBottom::after,
.aniWaveTop::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 14px;
    background: url(../images/ani-wave-1.png) left bottom repeat-y;
    background-size: auto;
    z-index: 5;
    animation: aniWave 3s infinite linear forwards;
    -webkit-animation: aniWave 3s infinite linear forwards;
}

.aniWaveBottom::after {
    bottom: 0;
}

.aniWaveTop::after {
    top: 0;
    transform: scaleY(-1);
}

@keyframes aniWave {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -68px 0px;
    }
}

@-webkit-keyframes aniWave {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -68px 0px;
    }
}



.jump {
    animation: jump 0.8s 1 linear forwards;
}

@-webkit-keyframes jump {

    30%,
    60% {
        transform: translateY(15px);
    }



    0%,
    50%,
    100% {
        transform: translateY(0);
    }
}





























/**********拉BAR顏色*********************/
/**********拉BAR顏色*********************/
/**********拉BAR顏色*********************/
.slidecontain::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0.25);
    height: 7px;
    border-radius: 99em;
}

.slidecontain::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    height: 7px;
    border-radius: 99em;
}

.redBg .slidecontain::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.5);
    height: 7px;
    border-radius: 99em;
}

.redBg .slidecontain::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    height: 7px;
    border-radius: 99em;
}

.ph-group::-webkit-scrollbar {
    border-radius: 99em;
    background: #d8c1ff
}

.ph-group::-webkit-scrollbar-thumb {
    border-radius: 99em;
    background: #853cff;
}



.redBg .ph-group::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.5);
}


.redBg .ph-group::-webkit-scrollbar {
    background: white
}


















/***********備用***********************/
.slick-list {
    overflow: visible;
    padding: 0 30px;
}

.slick-dots {
    bottom: 0;
    z-index: 20;
}

.slick-prev,
.slick-next {
    /* top: 100%;*/
}

.slick-prev {
    left: 0;
    z-index: 20;
}

.slick-next {
    right: 0;
    z-index: 20;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}