@charset "UTF-8";
/*===========================================
General Info / Hotel
===========================================*/
.hotel__distribution__wrap{
    position:relative;
    overflow:auto;
}
    .hotel__distribution{
        position:relative;
        background-color:#f7f7f7;
        background-image:url(../information/hotel_distribution_bg.png);
        background-position:50% 100%;
        background-repeat:no-repeat;
        background-size:auto 100%;
        height:495px;
        overflow:hidden;
    }
        .pin__venue{
            background:url(../information/icon_venue.svg) no-repeat 0 50%;
            background-size:40px auto;
            color:#f00;
            font-size:1.125rem; font-weight:700;
            line-height:1;
            text-shadow:-2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
            min-height:40px;
            padding-left:38px;
            display:flex;
            align-items:center;
            position:absolute; bottom:30px; left:50%;
            transform:translateX(-50%);
            margin:0 0 17px -210px;
        }
            .pin__venue > span{
                position:absolute;
                width:250px;
            }
        .pin__hotels{
            list-style:none;
            margin:0;
            padding:0;
            counter-reset:hotel-counter;
        }
            .pin__hotel{
                position:absolute; bottom:0; left:50%;
                transform:translateX(-50%);
            }
            .pin__hotel:nth-child(1){margin:0 0 209px -140px; z-index:10;}
            .pin__hotel:nth-child(2){margin:0 0 183px -110px;}
            .pin__hotel:nth-child(3){margin:0 0 450px -87px;}
            .pin__hotel:nth-child(4){margin:0 0 242px -270px;}
            .pin__hotel:nth-child(5){margin:0 0 382px -118px;}
            .pin__hotel:nth-child(6){margin:0 0 236px -340px;}
            .pin__hotel:nth-child(7){margin:0 0 24px 340px;}
            .pin__hotel:nth-child(8){margin:0 0 324px -257px;}
                .pin__hotel a{
                    display:inline-flex;
                    align-items:center;
                    color:#222;
                    font-size:1rem; font-weight:700;
                    line-height:1;
                    text-shadow:-2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
                    min-height:34px;
                }
                .pin__hotel a:focus,
                .pin__hotel a:hover{
                    color:var(--hover-color);
                }
                    .pin__hotel a::before{
                        background-image:url(../information/icon_hotel.svg);
                        background-repeat:no-repeat;
                        background-position:0% 0%;
                        background-size:34px auto;
                        color:#fff;
                        content:counter(hotel-counter, upper-alpha); /* 使用計數器，並以大寫字母顯示 */
                        counter-increment:hotel-counter; /* 每次遞增計數器 */
                        font-weight:700;
                        font-size:1rem;
                        line-height:30px;
                        text-align:center;
                        text-shadow:-2px -2px 0 var(--secondary-color), 2px -2px 0 var(--secondary-color), -2px 2px 0 var(--secondary-color), 2px 2px 0 var(--secondary-color);
                        width:34px;
                        height:34px;
                    }
                    .pin__hotel:nth-child(6) a::before{
                        order:2;
                    }
                    .pin__hotel a > span{
                        display:inline-block;
                        position:absolute; left:32px;
                        white-space:nowrap;
                    }
                    .pin__hotel:nth-child(6) a span{
                        font-size:.875rem;
                        width:100px;
                        text-align:right;
                        white-space:normal;
                        left:-100px;
                    }
.pin__notice{
    margin-top:10px;
    position:relative;
}
    .pin__notice .pin__hotels{
        display:flex;
        flex-wrap:wrap;
        margin:0 -3px;
    }
        .pin__notice .pin__hotel{
            margin:0 !important;
            padding:3px;
            position:static;
            transform:none;
            width:25%;
        }
            .pin__notice .pin__hotel a{
                display:flex;
                border:1px solid #ccc;
                border-radius:8px;
                background:url(../information/icon_downward.svg) no-repeat right 8px center;
                background-size:16px auto;
                font-size:.875rem; font-weight:400;
                line-height:1.2;
                padding-right:30px;
            }
                .pin__notice .pin__hotel a::before{
                    background-size:34px auto;
                    font-size:1rem;
                    line-height:30px;
                    width:34px;
                    height:34px;
                }
                .pin__notice .pin__hotel:nth-child(6) a::before{
                    order:0;
                }
@media screen and (max-width:1280px){/* Air Mac */
    .pin__notice .pin__hotel{
        width:33.33%;
    }
}
@media screen and (max-width:992px){
    .pin__hotel a::before{
        background-position:50% 0%;
        background-size:40px auto;
        font-size:1.125rem;
        line-height:34px;
        width:40px;
        height:40px;
    }
    .pin__hotel a > span{
        display:none;
    }
    .pin__notice .pin__hotel{
        width:50%;
    }
}
@media screen and (max-width:768px){
    .hotel__distribution{
        background-image:url(../information/hotel_distribution_bg_md.png);
        height:260px;
    }
        .pin__venue{margin:0 0 -4px -118px;}
            .pin__venue span{
                font-size:1rem;
            }
        .pin__hotel:nth-child(1){margin:0 0 107px -92px;}
        .pin__hotel:nth-child(2){margin:0 0 94px -74px;}
        .pin__hotel:nth-child(3){margin:0 0 226px -62px;}
        .pin__hotel:nth-child(4){margin:0 0 120px -155px;}
        .pin__hotel:nth-child(5){margin:0 0 193px -81px;}
        .pin__hotel:nth-child(6){margin:0 0 122px -188px;}
        .pin__hotel:nth-child(7){margin:0 0 13px 153px;}
        .pin__hotel:nth-child(8){margin:0 0 164px -144px;}
            .pin__hotel a::before{
                background-size:30px auto;
                font-size:.875rem;
                line-height:25px;
                width:30px;
                height:30px;
            }
}
@media screen and (max-width:576px){
    .pin__notice .pin__hotel{
        width:100%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .hotel__distribution{
        background-image:url(../information/hotel_distribution_bg_ss.png);
        height:300px;
    }
        .pin__venue{margin:0 0 23px -103px;}
            .pin__venue span{
                font-size:.875rem;
                width:220px;
            }
        .pin__hotel:nth-child(1){margin:0 0 133px -71px;}
        .pin__hotel:nth-child(2){margin:0 0 117px -46px;}
        .pin__hotel:nth-child(3){margin:0 0 253px -44px;}
        .pin__hotel:nth-child(4){margin:0 0 148px -138px;}
        .pin__hotel:nth-child(5){margin:0 0 219px -62px;}
        .pin__hotel:nth-child(6){margin:0 0 146px -170px;}
        .pin__hotel:nth-child(7){margin:0 0 39px 167px;}
        .pin__hotel:nth-child(8){margin:0 0 190px -128px;}
    .pin__notice .pin__hotel a{
        font-size:.875rem;
    }
        .pin__notice .pin__hotel a::before{
            background-size:30px auto;
            font-size:.875rem;
            line-height:24px;
            width:30px;
            height:30px;
        }
}
@media screen and (max-width:375px){/* SE, iX, XS, i11 Pro, i13 Mini, i6, i7, i8 */
    .hotel__distribution{
        height:240px;
    }
        .pin__venue{margin:0 0 12px -86px;}
            .pin__venue span{
                font-size:.75rem;
                width:180px;
            }
        .pin__hotel:nth-child(1){margin:0 0 104px -59px;}
        .pin__hotel:nth-child(2){margin:0 0 95px -44px;}
        .pin__hotel:nth-child(3){margin:0 0 202px -35px;}
        .pin__hotel:nth-child(4){margin:0 0 117px -109px;}
        .pin__hotel:nth-child(5){margin:0 0 175px -50px;}
        .pin__hotel:nth-child(6){margin:0 0 107px -136px;}
        .pin__hotel:nth-child(7){margin:0 0 30px 136px;}
        .pin__hotel:nth-child(8){margin:0 0 151px -100px;}
}
/*-------------------------------------------
Hotel
-------------------------------------------*/
.hotel__container{
    counter-reset:my-counter;
    margin-top:3rem;
}
    .hotel__content{
        display:flex;
        flex-wrap:wrap;
        position:relative; padding-left:50px;
    }
        .hotel__content::before{
            /* background-color:var(--secondary-color); */
            background-image:url(../information/icon_hotel.svg);
            background-repeat:no-repeat;
            background-position:50% -3px;
            background-size:54px auto;
            /* border-radius:50%; */
            /* box-shadow:0 5px 10px rgba(0, 0, 0, .2); */
            color:#fff;
            content:counter(my-counter, upper-alpha); /* 使用計數器，並以大寫字母顯示 */
            counter-increment:my-counter; /* 每次遞增計數器 */
            position:absolute;
            left:0; top:-20px; z-index:10;
            font-weight:bold;
            font-size:1.5rem;
            line-height:38px;
            text-align:center;
            width:40px;
            height:54px;
        }
        .hotel__picture__sp{
            order:2;
            width:40%;
            background-repeat:no-repeat;
            background-position:50% 50%;
            background-size:cover;
        }
        .hotel__info{
            flex:1;
            background-color:#fff;
            position:relative; z-index:3;
            padding-right:5%;
        }
            .hotel__info a{
                color:#333;
            }
            .hotel__info a:hover,
            .hotel__info a:focus{
                color:var(--link-color);
            }
            .hotel__title{
                display:flex;
                align-items:center;
                border-bottom:1px solid #ddd;
                margin-bottom:20px;
                padding-bottom:20px;
                position:relative;
            }
                .hotel__logo{
                    margin:0;
                    width:140px;
                }
                    .hotel__logo img{
                        display:block;
                        width:100%;
                    }
                .hotel__name{
                    margin:0;
                    position:relative;
                    padding-left:20px;
                    color:var(--part-title-color);
                    font-size:1.75rem;
                    line-height:1.2;
                }
                    .hotel__name .tw{
                        color:#777;
                        font-size:1.125rem; font-weight:400;
                        margin-top:3px;
                    }
            .hotel__data{
                position:relative;
            }
                .hotel__data__inner{
                    display:flex;
                }
                    .hotel__picture{
                        display:none;
                    }
                    .hotel__contact{
                        list-style:none;
                        margin:0;
                        padding:0;
                        flex:1;
                        line-height:1.2;
                    }
                        .hotel__contact li{
                            margin-bottom:15px;
                            padding-left:80px;
                            position:relative;
                        }
                            .hotel__contact label{
                                color:var(--primary-color);
                                font-weight:700;
                                position:absolute; left:0;
                            }
                            .hotel__contact .tw{
                                color:#777;
                                font-size:.875rem;
                                margin-top:5px;
                            }
                                .hotel__contact .tw a{
                                    color:#777;
                                }
                                .hotel__contact .tw a:hover,
                                .hotel__contact .tw a:focus{
                                    color:var(--primary-color);
                                }
                                .hotel__contact .tw a::after{
                                    content:"View Google Map";
                                    display:block;
                                    background:url(../information/icon-google_map.svg) no-repeat 0 50%;
                                    background-size:auto 18px;
                                    border-bottom:1px solid #ddd;
                                    color:var(--link-color);
                                    font-size:.875rem;
                                    line-height:20px;
                                    padding-left:18px; padding-bottom:2px;
                                    margin-top:5px;
                                    width:140px;
                                }
                .hotel__links{
                    background-color:rgba(var(--primary-rgb),.07);
                    list-style:none;
                    margin:20px 0 0;
                    padding:5px;
                    display:flex;
                }
                    .hotel__links li{
                        position:relative;
                        padding:5px;
                    }
                        .hotel__links a{
                            display:inline-block;
                            background-color:#fff;
                            border-radius:5px;
                            background-position:10px 50%;
                            background-repeat:no-repeat;
                            background-size:20px auto;
                            color:#000;
                            font-weight:700;
                            padding:10px 15px; padding-left:35px;
                        }
                        .hotel__links a:focus,
                        .hotel__links a:hover{
                            color:var(--link-color);
                        }
                        .hotel__links a{
                            background-image:url(../images/icon-open-new.svg);
                        }
                        .hotel__links .website{
                            background-image:url(../images/icon-website.svg);
                            background-size:24px auto;
                        }
                        .hotel__links a[href*='.pdf']{
                            background-image:url(../images/icon_file_pdf.svg);
                        }
                        .hotel__links a[href*='.doc']{
                            background-image:url(../images/icon_file_word.svg);
                        }
    .hotel__gmap{
        order:3;
        flex-basis:100%;
        margin-top:50px;
        height:270px;
        position:relative;
        overflow:hidden;
        filter:grayscale(1);
    }
    .hotel__gmap:hover{
        filter:grayscale(0);
    }
        .hotel__gmap iframe{
            position:absolute; top:0; left:0;
            width:100%;
            height:100%;
        }
.hotel__content ~ hr{
    margin-top:4em; margin-bottom:4em;
}
@media screen and (max-width:1280px){/* Air Mac */
    .hotel__logo{
        width:128px;
    }
}
@media screen and (max-width:1024px){
    .hotel__picture__sp{
        display:none;
    }
    .hotel__info{
        padding-right:0;
    }
        .hotel__picture{
            flex:0 0 40%;
            order:2;
            display:flex;
        }
            .hotel__img{
                margin:0 0 0 auto;
                aspect-ratio:8 / 6;
                width:100%;
                position:relative;
            }
                .hotel__img img{
                    display:block;
                    width:100%;
                    height:100%;
                    object-fit:cover;
                }
        .hotel__contact{
            padding-right:3%;
        }
            .hotel__contact li{
                padding-left:0;
            }
                .hotel__contact label{
                    display:block;
                    position:static;
                    font-size:.875rem;
                    margin-bottom:3px;
                }
}
@media screen and (max-width:576px){
    .hotel__content{
        display:block;
        padding-left:0;
    }
        .hotel__picture__sp{
            display:block;
            aspect-ratio:8 / 6;
            width:calc(100% + 30px);
            margin:0 -15px;
        }
        .hotel__info{
            margin-top:-30px;
        }
            .hotel__title{
                flex-wrap:wrap;
                box-shadow:0 -15px 15px -5px rgb(0 0 0 / 20%);
                padding:30px 20px;
            }
                .hotel__logo{
                    width:200px;
                    margin:0 auto 20px;
                }
                .hotel__name{
                    flex-basis:100%;
                    padding-left:0;
                }
            .hotel__picture{
                display:none;
            }
            .hotel__contact{
                padding:0 20px;
            }
        .hotel__gmap{
            height:300px;
        }
    .hotel__content ~ hr{
        margin-top:2em; margin-bottom:2em;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .hotel__title{
        padding-top:20px; padding-bottom:20px;
    }
        .hotel__logo{
            width:40vw;
        }
        .hotel__name{
            font-size:1.5rem;
        }
            .hotel__name .tw{
                font-size:1rem;
            }
    .hotel__links{
        flex-wrap:wrap;
    }
        .hotel__links > li{
            width:100%;
        }
            .hotel__links a{
                display:block;
                font-size:3.75vw;
            }
    .hotel__gmap{
        margin-top:40px;
    }
}
@media screen and (max-width:375px){/* SE, iX, XS, i11 Pro, i13 Mini, i6, i7, i8 */
    .hotel__name {
        font-size:6.125vw;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .hotel__picture__sp{
        width:calc(100% + 20px);
        margin:0 -10px;
    }
}