@charset "utf-8";

.stay {
    margin-block: 80px 160px;
}

.stay .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stay .flex .text {
    width: 30%;
    padding-left: 5%;
}

.stay .flex .text .sectionTitle {
    font-size: 34px;
    font-weight: 700;
    text-shadow: 1px 1px 3px #fafafa;
    margin-bottom: 5px;
}

.stay .flex .text .title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.stay .flex .text .description {
    font-size: 14px;
}

.stay .img {
    width: 60%;
}

.stay .img img {
    width: 100%;
    height: min(40vw, 500px);
    box-shadow: 10px 20px 5px #fff099;
}

.stayPlan,
.roomType,
.information {
    margin-bottom: 80px;
}

.stayPlan .sectionTitle,
.roomType .sectionTitle,
.information .sectionTitle {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.flex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.box {
    width: 30%;
    text-align: center;
}

.box img {
    width: 100%;
    height: min(20vw, 400px);
    margin-bottom: 20px;
    box-shadow: 1px 1px 5px #1f1f1f;
    transition: transform .8s ease-out;
}

.box img:hover {
    transform: scale(1.05);
}

.box .title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.box .description {
    font-size: 14px;
    margin-bottom: 10px;
}

.information_inner {
    width: 70%;
    margin: 0 auto;
}

.category {
    display: flex;
    align-items: center;
}

.categoryName {
    width: 20%;
    font-weight: 700;
    text-align: center;
}

.categoryList {
    width: 80%;
    line-height: 1.8;
}

.category+.category {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid #2d004d;
}

@media screen and (max-width :767px) {
    .stay {
        margin-block: 40px 160px;
    }
    
    .stay .flex {
        flex-direction: column-reverse;
    }

    .stay .flex .text {
        width: 100%;
    }

    .stay .img {
        width: 100%;
        margin-bottom: 40px;
    }

    .stay .img img {
        width: 100%;
        height: min(60vw, 400px);
        box-shadow: 0 10px 5px #fff099;
    }

    .flex {
        display: block;
    }

    .box {
        width: 90%;
        margin: 0 auto 40px;
    }

    .box img {
        width: 100%;
        height: max(60vw, 250px);
        margin-bottom: 10px;
    }

    .information_inner {
        width: 90%;
        margin: 0 auto;
    }
    
    .category {
        display: block;
    }

    .categoryName {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .categoryList {
        width: 100%;
        line-height: 1.8;
    }
}