.ys_width {
    max-width: 1366px;
}

.highlight {
    color: #ed8037;
}

.highlight-dark {
    color: #cd5c00;
}

.bolder {
    font-weight: bolder;
}



/* 前兩頁捲動 */

.scroll-container {
    width: 100%;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}

.scroll-container .scroll-area {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* 向下按鈕 */

.next-section-button img {
    width: 10vh;
    max-width: 35px;
    height: auto;
    margin: 7vh auto 0 auto;
    animation: bounce 400ms infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-2px);
    }
}



/* banner */

#banner {
    position: relative;
    width: 100%;
    height: 95vh;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: hidden;
}

#banner-bg-mask {
    width: 100%;
    height: 60%;
    background: url("https://materials.fillo.com.tw/materials/ystravel/images/8ff1eeaf-ab63-4e16-9616-c0c3e3d9314f.jpg") no-repeat bottom left;
    background-size: cover;
    -webkit-mask: url("https://materials.fillo.com.tw/materials/ystravel/images/3dc91aaa-e7fb-42fc-83cc-1a18b4b33dd2.png") no-repeat top center;
    mask: url("https://materials.fillo.com.tw/materials/ystravel/images/3dc91aaa-e7fb-42fc-83cc-1a18b4b33dd2.png") no-repeat top center;
    -webkit-mask-size: 100% 55vh;
    mask-size: 100% 55vh;
    z-index: 99;
}

#banner::after{
    content: "";
    position: absolute;
    top:3%;
    left: 2%;
    width: 100%;
    height: 60%;
    display: block;
    background: url("https://materials.fillo.com.tw/materials/ystravel/images/69ba566b-a385-465f-ba87-84dd0764cfbc.png") no-repeat;
    background-size: cover;
    -webkit-mask: url("https://materials.fillo.com.tw/materials/ystravel/images/3dc91aaa-e7fb-42fc-83cc-1a18b4b33dd2.png") no-repeat top center;
    mask: url("https://materials.fillo.com.tw/materials/ystravel/images/3dc91aaa-e7fb-42fc-83cc-1a18b4b33dd2.png") no-repeat top center;
    -webkit-mask-size: 100% 55vh;
    mask-size: 100% 55vh;
}
 
@media (max-width:820px) {
    #banner-bg-mask {
        height: 50%;
        -webkit-mask-size: 100% 45vh;
        mask-size: 100% 45vh;
    }

    #banner::after {
        left: 3%;
        height: 50%;
        -webkit-mask-size: 100% 45vh;
        mask-size: 100% 45vh;
    }
}

.banner-title {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 100svw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));
    z-index: 99;
}

.banner-title h1 {
    font-size: 54px;
    letter-spacing: 30px;
    padding-left: 30px;
    font-size: clamp(26px, 5vw, 54px);
    font-weight: 600;
    text-align: center;
}

@media (max-width: 1440px) {
    .banner-title h1 {
        letter-spacing: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 1070px) {
    .banner-title h1 {
        font-size: clamp(18px, 8vw, 42px);
        letter-spacing: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 575px) {
    .banner-title h1 {
        letter-spacing: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 500px) {
    .banner-title h1 {
        letter-spacing: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 400px) {
    .banner-title h1 {
        letter-spacing: 4px;
        padding-left: 4px;
    }
}



.banner-title h2 {
    font-size: 22px;
    font-family: 'Raleway', sans-serif !important;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-left: 0.5px;
}

@media (max-width: 1070px) {
    .banner-title h2 {
        font-size: 18px;
    }
}

@media (max-width: 400px) {
    .banner-title h2 {
        font-size: 16px;
    }
}

@media (max-width: 312px) {
    .banner-title h2 {
        font-size: 14px;
    }
}

/* text: push the door */

.banner-p {
    position: relative;
    background-color: #fff;
    padding: 2vh 5vw 3vh 0;
    margin: 6svh 0 4svh;
}

.banner-p p {
    position: relative;
    color: #505050;
    text-align: center;
    font-size: clamp(20px, 2vw, 36px);
    font-weight: 600;
    letter-spacing: 10px;
    padding-left: 5vw;
    background-color: #fff;
    z-index: 10;
}


@media (max-width: 1070px) {
    .banner-p p {
        font-size: clamp(14px, 3vw, 26px);
        letter-spacing: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 500px) {
    .banner-p p {
        font-size: clamp(12px, 4vw, 24px);
        letter-spacing: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 400px) {
    .banner-p p {
        letter-spacing: 6px;
        padding-left: 6px;
    }
}

@media (max-width: 312px) {
    .banner-p p {
        letter-spacing: 4px;
        padding-left: 4px;
    }
}

.banner-p::after {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/af755003-c8c8-4303-846b-444dd320e251.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    top: 10px;
    left: 10px;
    z-index: 0;
}

/* 打字機效果 */
.typed-out {
    overflow: hidden;
    width: 0;
    white-space: nowrap;
    animation: typing 1500ms steps(9, end) forwards;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}



#banner-next-button img {
    margin: 3vh auto 0 auto;
}

@media (max-width:820px) {
    #banner-next-button img {
        margin: 5vh auto 0 auto;
    }
}

/* 
#banner-bg-dec-1{
    position: absolute;
    right: 50%;
    bottom:-100px;
    width: 200px;
}

#banner-bg-dec-1 img{
    width: 100%;
} */


/* intro */

#intro {
    width: 100%;
    background: url("https://materials.fillo.com.tw/materials/ystravel/images/cc52456d-c618-4e83-bf21-ab26d3d7eebc.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10% 0;
    overflow-x: hidden;
}

@media (max-width: 820px) {
    #intro {
        padding: 20% 0;
    }
}

.intro-context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro-p-wrap {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.intro-p {
    text-align: center;
}

#intro-p1 h3 {
    font-size: clamp(26px, 2.3vw, 65px);
    font-weight: 600;
    letter-spacing: 35px;
    padding-left: 35px;
    padding-bottom: 1em;
    line-height: 2.3;
    color: #fff;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8))
}


@media (max-width: 1920px) {
    #intro-p1 h3 {
        letter-spacing: 25px;
        padding-left: 25px;
    }
}

@media (max-width: 1070px) {
    #intro-p1 h3 {
        font-size: clamp(20px, 3.5vw, 48px);
        letter-spacing: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 820px) {
    #intro-p1 h3 {
        letter-spacing: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 650px) {
    #intro-p1 h3 {
        letter-spacing: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 500px) {
    #intro-p1 h3 {
        font-size: clamp(14px, 4.5vw, 20px);
        letter-spacing: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 400px) {
    #intro-p1 h3 {
        letter-spacing: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 312px) {
    #intro-p1 h3 {
        letter-spacing: 5px;
        padding-left: 5px;
    }
}


#intro-p2 {
    background-color: rgba(255, 255, 255, .7);
    margin: 15% 0 0;
    padding: 5% 0;
    width: 100%;
    height: 120%;
}

#intro-p2::before {
    position: absolute;
    content: "";
    border: #ff8c00 dashed 2.5px;
    width: 100%;
    height: 100%;
    top: -2%;
    left: -1%;
}

@media (max-width:2048px) {
    #intro-p2::before {
        border: #ff8c00 dashed 2px;
    }
}


#intro-p2 p {
    font-size: clamp(10px, 1.5vw, 20px);
    font-weight: bold;
    letter-spacing: 3px;
    padding-left: 3px;
    line-height: 2;
    color: #505050;
}


@media (max-width: 1070px) {
    #intro-p2 p {
        letter-spacing: 3px;
        padding-left: 3px;
    }
}

@media (max-width: 820px) {
    #intro-p2 p {
        letter-spacing: 3px;
        padding-left: 3px;
    }
}

@media (max-width: 575px) {
    #intro-p2 p {
        letter-spacing: 0;
        padding-left: 0;
    }
}


/* intro區按鈕 */
@media (max-width: 820px) {
    #intro-next-button {
        display: none;
    }
}



/* middle part, strength of the tour leader team */

#about {
    width: 100%;
    padding: 5% 0;
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/6e83a3c9-afb4-4820-b651-bde5ed348b1f.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;

}

/* 標題 */
.about-title {
    position: relative;
    margin-bottom: 3%;
    text-align: center;
}

.about-title-text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ff8c00;
    width: 100px;
    height: 100px;
    border-radius: 100%;
}

.about-title::after {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/83db420d-df5f-45fc-84c1-c7966bac7317.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    top: 60%;
    left: 60%;
}

.about-title-text h3 {
    font-weight: bolder;
    font-size: 26px;
    padding-left: .2em;
    margin-bottom: 0;
    letter-spacing: .2em;
    line-height: 1.8;

}


/* 三大項 */
.about-item {
    margin: 20px 0;
    width: 70svw;
    display: flex;
    align-items: center;
}

@media (max-width: 2048px) {
    .about-item {
        margin: 20px 0;
        width: 75svw;
    }
}

@media (max-width: 1225px) {
    .about-item {
        margin: 20px 0;
        width: 90svw;
    }
}

@media (max-width: 820px) {
    .about-item {
        margin: 20px 0;
        width: 85svw;
        flex-direction: column;
    }
}


.about-item:nth-child(even) {
    justify-content: flex-start;
    align-items: center;
    padding-right: 15%;
}

@media (max-width: 2048px) {
    .about-item:nth-child(even) {
        justify-content: flex-start;
        padding-right: 10%;
    }
}

@media (max-width: 820px) {
    .about-item:nth-child(even) {
        justify-content: center;
        padding-right: 0;
    }
}


.about-item:nth-child(odd) {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20%;
}

@media (max-width: 2048px) {
    .about-item:nth-child(odd) {
        padding-left: 10%;
    }
}

@media (max-width: 820px) {
    .about-item:nth-child(odd) {
        flex-direction: column;
        justify-content: center;
        padding-left: 0;
    }
}



.about-pic {
    width: 30%;
    z-index: 1;
}

.about-pic img {
    width: 100%;
}


@media (max-width: 2048px) {
    .about-pic {
        width: 40%;
    }
}

@media (max-width: 1225px) {
    .about-pic {
        width: 30%;
    }
}

@media (max-width: 820px) {
    .about-pic {
        width: 50%;
    }
}

@media (max-width: 450px) {
    .about-pic {
        width: 60%;
    }
}



@media (min-width: 821px) {
    .about-item .odd-b {
        display: none;
    }
}

@media (max-width: 820px) {
    .about-item .odd-a {
        display: none;
    }
}



.about-content {
    position: relative;
    width: 50%;
}

@media (max-width: 2560px) {
    .about-content {
        width: 50%;
    }
}

@media (max-width: 1225px) {
    .about-content {
        width: 60%;
    }
}

@media (max-width: 820px) {
    .about-content {
        width: 100%;
    }
}


.about-text {
    position: relative;
    padding: 1.6rem 1.6rem 1rem 1.6rem;
    overflow-wrap: break-word;
    text-align: justify;
    background-color: rgba(255, 255, 255, .9);
    z-index: 99;
}

.about-item:nth-child(even) .about-content {
    margin-left: 10px;
}

.about-item:nth-child(odd) .about-content {
    margin-right: 10px;
}

.about-content::after {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/af755003-c8c8-4303-846b-444dd320e251.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    top: 10px;
    left: 10px;
}

.about-heading {
    font-size: 20px;
    color: #cd5c00;
    font-weight: bolder;
    margin: 0;
}

@media (max-width: 1920px) {
    .about-heading {
        font-size: 16px;
    }
}

@media (max-width: 820px) {
    .about-heading {
        font-size: 16px;
    }
}

@media (max-width: 450px) {
    .about-heading {
        font-size: 15px;
    }
}


.about-p {
    font-size: 18px;
    line-height: 2;
    padding-top: 1em;
}

@media (max-width: 1920px) {
    .about-p {
        font-size: 15px;
    }
}

@media (max-width: 820px) {
    .about-p {
        font-size: 15px;
        margin-top: 1rem;
    }
}

@media (max-width: 450px) {
    .about-p {
        font-size: 14px;
        margin-top: 0;
    }
}



/* 四格 */

.about-detail {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
}

@media (max-width: 2048px) {
    .about-detail {
        width: 60%;
    }
}

@media (max-width: 820px) {
    .about-detail {
        width: 70%;
        flex-direction: column;
        align-items: center;
    }
}


.detail-item {
    position: relative;
    width: 35%;
    margin: 5%;
    /* display: flex;
    flex-direction: row;*/

}

.detail-info {
    position: relative;
    /* margin: 10%; */
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media (max-width: 820px) {
    .detail-item {
        width: 80%;
    }

    .detail-info {
        flex-direction: row;
    }
}

@media (max-width: 450px) {
    .detail-item {
        width: 90%;

    }

    .detail-info {
        flex-direction: column;
    }
}



.detail-item::before {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/f01612b0-014d-42e7-9d97-4ab31e4b6536.png");
    height: 100%;
    width: 100%;
    top: 0;
    transform: translateX(-6%);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 99;
}

@media (max-width: 2048px) {
    .detail-item::before {
        transform: translateX(-8%);
    }
}

@media (max-width: 1560px) {
    .detail-item::before {
        transform: translateX(-11%);
    }
}

@media (max-width: 820px) {
    .detail-item::before {
        transform: translateX(-3%);
    }

    .detail-item:nth-child(2)::before {
        height: 125%;
        top: -20px;
    }

    .detail-item:nth-child(3)::before {
        height: 120%;
        top: -10px;
    }
}

@media (max-width: 450px) {
    .detail-item::before {
        transform: translateX(-10%);
    }

    .detail-item:nth-child(2)::before {
        height: 115%;
        top: -20px;
    }

    .detail-item:nth-child(3)::before {
        height: 110%;
        top: -10px;
    }
}


.detail-item::after {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/6b37e024-746a-4a75-bdea-4c2eed63c139.png");
    height: 100%;
    width: 100%;
    top: 0;
    transform: translateX(98%);
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width: 2048px) {
    .detail-item::after {
        transform: translateX(98%);
    }
}

@media (max-width: 1560px) {
    .detail-item::after {
        transform: translateX(100%);
    }
}

@media (max-width: 820px) {
    .detail-item::after {
        transform: translateX(100%);
    }

    .detail-item:nth-child(2)::after {
        height: 125%;
        top: -20px;
    }

    .detail-item:nth-child(3)::after {
        height: 120%;
        top: -10px;
    }
}

@media (max-width: 450px) {
    .detail-item::after {
        transform: translateX(100%);
    }

    .detail-item:nth-child(2)::after {
        height: 115%;
        top: -20px;
    }

    .detail-item:nth-child(3)::after {
        height: 110%;
        top: -10px;
    }
}


.detail-item-pic {
    width: 50%;
}

.detail-item:first-child .detail-item-pic {
    width: 55%;
}

.detail-item-pic img {
    width: 100%;
}

@media (max-width: 820px) {
    .detail-item-pic {
        width: 30%;
    }

    .detail-item:first-child .detail-item-pic {
        width: 30%;
    }
}

@media (max-width: 450px) {
    .detail-item-pic {
        width: 40%;
    }

    .detail-item:first-child .detail-item-pic {
        width: 44%;
    }
}



.detail-item-text p {
    font-size: 20px;
    line-height: 1.6;
    overflow-wrap: break-word;
    text-align: justify;
    padding-top: 0.6em;
}

@media (max-width: 1920px) {
    .detail-item-text p {
        font-size: 16px;
    }
}

@media (max-width: 820px) {
    .detail-item-text {
        width: 70%;
    }

    .detail-item-text p {
        font-size: 16px;
        margin-left: 20px;
        margin-top: 1rem;
    }
}

@media (max-width: 450px) {
    .detail-item-text {
        width: 100%;
    }

    .detail-item-text p {
        font-size: 15px;
        margin-left: 0;
        margin-top: 0;
    }
}



/* photo-wall */
#tour-leaders {
    width: 100%;
    padding: 5% 0;
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/5bf62108-da0d-43b6-9113-b0910f2f54e2.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* 標題 */
.photo-wall-title {
    position: relative;
    margin-bottom: 3%;
    text-align: center;
}

.photo-wall-title-text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ff8c00;
    width: 100px;
    height: 100px;
    border-radius: 100%;
}

.photo-wall-title-text h3 {
    font-weight: bolder;
    font-size: 26px;
    padding-left: .2em;
    margin-bottom: 0;
    letter-spacing: .2em;
    line-height: 1.8;
    z-index: 2;

}

.photo-wall-title::after {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/83db420d-df5f-45fc-84c1-c7966bac7317.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    top: 50%;
    left: 50%;
}



/* 照片牆*/

.photo-wall-container {
    position: relative;
    z-index: 99;
}

.photo-wall {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    /* gap: 3px; */
    background-color: #fff;
    z-index: 99;

}

.photo-wall-container::after {
    position: absolute;
    content: "";
    background-image: url("https://materials.fillo.com.tw/materials/ystravel/images/d1469278-73f0-46f5-8dae-f018cc4b4b28.png");
    top: 40px;
    left: 40px;
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;

}

/* 

@media (max-width: 1440px) {
    .photo-wall-container::after {
        top: 25px;
        left: 25px;
    }
}

@media (max-width: 1409px) {
    .photo-wall-container::after {
        top: 10px;
        left: 10px;
    }
}

@media (max-width: 1383px) {
    .photo-wall-container::after {
        display: none;
    }
} */

/* 個別縮圖 */
.thumbnail {
    position: relative;
    width: 16%;
    /* Show 8 thumbnails in a row */
    cursor: pointer;
    margin: 2px;
    /* Add hover effect */
}

@media (max-width: 1440px) {
    .thumbnail {
        width: 16.2%;
    }
}

@media (max-width: 1409px) {
    .thumbnail {
        width: 16.3%;
    }
}

@media (max-width: 1190px) {
    .thumbnail {
        width: 16.1%;
    }
}

@media (max-width: 856px) {
    .thumbnail {
        width: 16%;
    }
}



.thumbnail img {
    width: 100%;
    display: block;
}

.thumbnail:nth-child(3):hover,
.thumbnail:nth-child(5):hover,
.thumbnail:nth-child(6):hover,
.thumbnail:nth-child(8):hover,
.thumbnail:nth-child(9):hover,
.thumbnail:nth-child(14):hover,
.thumbnail:nth-child(15):hover,
.thumbnail:nth-child(20):hover, 
.thumbnail:nth-child(21):hover{
    cursor:default;
}

@media (min-width: 821px) {

    /* hide in desktop */
    .thumbnail:nth-child(3),
    .thumbnail:nth-child(5),
    .thumbnail:nth-child(6),
    .thumbnail:nth-child(8),
    .thumbnail:nth-child(9) {
        display: none;
    }
}

@media (max-width: 820px) {
    .thumbnail {
        width: 32%;
        /* Show 3 thumbnail in a row for laptap*/
    }

    /* hide in laptop */
    .thumbnail:nth-child(3),
    .thumbnail:nth-child(14),
    .thumbnail:nth-child(15),
    .thumbnail:nth-child(20),
    .thumbnail:nth-child(21) {
        display: none;
    }
}

@media (max-width: 450px) {
    .thumbnail {
        width: 48%;
        /* Show 2 thumbnail in a row */
    }

    .thumbnail:nth-child(3) {
        display: inline;
    }

    .thumbnail:nth-child(5),
    .thumbnail:nth-child(6),
    .thumbnail:nth-child(8),
    .thumbnail:nth-child(9),
    .thumbnail:nth-child(14),
    .thumbnail:nth-child(15),
    .thumbnail:nth-child(14),
    .thumbnail:nth-child(15) {
        display: none;
    }

    .photo-wall {
        margin: 0 auto;
    }
}

@media (max-width: 200px) {
    .thumbnail {
        width: 90%;
        /* Show 1 thumbnail in a row */
    }
}


.thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Semi-transparent black overlay */
    opacity: 0;
    /* Initially fully transparent */
    transition: opacity 0.3s;
    /* Smooth transition */
}

.thumbnail:hover::before {
    opacity: 1;
}

.unclickable:hover::before {
    opacity: 0;
}

/* .thumbnail::after {
    content: "";
    background-color: rgba(255, 255, 255, .7);
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100px;
    height: 32px;
    max-width: 100%;
    max-height: 100%;
    transition: background-color 0.3s;

} */

/* .thumbnail:hover::after {
    background-color: rgba(255, 255, 255, .9);
} */

/* .unclickable::after {
    display: none;
} */


/* white bg beneath nickname */
.thumbnail-title::before {
    content: "";
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    transform: translate(-7px, -2px);
    width: 120%;
    height: 120%;
    z-index: -1;
}

/* adjust the white bg for people with short nickname */
.thumbnail:nth-child(1) .thumbnail-title::before,
.thumbnail:nth-child(2) .thumbnail-title::before,
.thumbnail:nth-child(11) .thumbnail-title::before,
.thumbnail:nth-child(16) .thumbnail-title::before,
.thumbnail:nth-child(19) .thumbnail-title::before  {
    width: 160%;
}

/* adjust the white bg for people with long nicknames */
.thumbnail:nth-child(24) .thumbnail-title::before {
    width: 110%;
}

.thumbnail:hover .thumbnail-title::before {
    background-color: rgba(255, 255, 255, .9);
}

@media (max-width: 1024px) {
    .thumbnail-title::before {
        background-color: rgba(255, 255, 255, .85);
    }
}

.thumbnail-title {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    bottom: 10px;
    left: 5px;
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
    transition: color 0.3s;
    pointer-events: none;
    /* Prevent interaction with text */
    z-index: 3;
}

.thumbnail:hover .thumbnail-title {
    color: #2e2e2e;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .thumbnail-title {
        font-weight: 600;
        font-size: 14px;
    }
}

@media (max-width: 820px) {
    .thumbnail-title {
        font-size: 18px;
    }
}


.modal-content {
    background-color: rgba(255,255,255,.95);
}


.modal-header {
    border-bottom: none;
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5% 5%;
}

.modal-image-wrap {
    border: 1px dashed #ff8c00;
}

.guide-name-wrap {
    font-size: 28px;
    margin: 15px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ff8c00;

}

@media (max-width:1920px) {
    .guide-name-wrap {
        font-size: 24px;
    }
}

@media (max-width:820px) {
    .guide-name-wrap {
        font-size: 22px;
    }
}

@media (max-width:450px) {
    .guide-name-wrap {
        font-size: 16px;
    }
}


#modalName {
    font-weight: bolder;
    color: #8b5229;
}

#modalNickname {
    font-style: italic;
    color: rgb(157, 102, 65)
}

.guide-year {
    font-size: 19px;
    padding: 10px;
    text-align: center;
    color: #313131;
}

@media (max-width:1920px) {
    .guide-year {
        font-size: 17px;
    }
}

@media (max-width:450px) {
    .guide-year {
        font-size: 15px;
    }
}

.guide-description {
    font-size: 17px;
    /* font-style: italic; */
    line-height: 2;
    padding: 10px;
    text-align: center;
    color: #65574e;
}


@media (max-width: 1920px) {
    .guide-description {
        font-size: 15px;
    }
}

@media (max-width: 450px) {
    .guide-description {
        font-size: 12px;
    }
}

.guide-tour-line {
    font-size: 17px;
    padding: 10px;
    text-align: center;
    color: #313131;
}

@media (max-width: 1920px) {
    .guide-tour-line {
        font-size: 15px;
    }
}

@media (max-width: 450px) {
    .guide-tour-line {
        font-size: 14px;
    }
}


#modalSocialIcons {
    padding: 15px 0;
    width: 50%;
    display: flex;
    justify-content: space-around;
    border-top: 1px dashed #ff8c00;
}

@media (max-width: 430px) {
    #modalSocialIcons {
        width: 70%;
    }
}