.hotel-container {
    .hotel-content {
        .hotel-office {
            background-image: url('../../../images/hotel/floor2/office/officewall2.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            background-attachment: fixed;
            min-height: calc(100vh - 40px);
            position: relative;

            .overbackground {
                position: fixed;
                top: 40px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 10;
                min-height: calc(100vh - 40px);
                min-width: 100vw;
                object-fit: cover;
                opacity: 0;
            }
            .desk {
                position: fixed;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 9;
                max-width: 400px;
            }

            .office-content {
                position: absolute;
                z-index: 50;
                top: 60px;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                max-width: 480px;
                min-height: 350px;
                overflow-y: auto;
                border: 1px solid var(--basecolor);
                padding: 20px;

                .item-list {
                    display: flex;
                    gap: 10px;
                    flex-wrap: wrap;
                    justify-content: stretch;

                    .item {
                        padding: 15px;
                        border: 1px solid var(--basecolor);
                        background-color: var(--basebg);
                        cursor: pointer;
                        width: calc(50% - 5px);
                        display: flex;
                        align-items: center;
                        justify-content: stretch;
                        gap: 10px;

                        .item-stuff {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 5px;
                            height: 100%;
                            .item-stuff-title {
                                height: 16px;
                                width: 100%;
                                background-color: rgba(135, 138, 79, 0.4);
                            }
                            .item-stuff-content {
                                flex: 1;
                                width: 100%;
                                background-color: rgba(138, 106, 79, 0.4);
                            }
                        }

                        img {
                            width: 100px;
                            height: 100px;
                            border: 1px solid var(--basecolor);
                        }
                    }
                }

                #journal-block {
                    text-align: center;
                    width: 100%;
                    img {
                        max-width: 120px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .hotel-container {
        .hotel-content {
            .hotel-office {
                .overbackground {
                    top: 0;
                }
                .desk {
                    bottom: 40px;
                    max-width: 350px;
                }
            }
        }
    }
}