@charset "utf-8";

        .roomlist-wrap {
            padding: 300px 0 140px;
        }

        .room-item {
            position: relative;
            margin-bottom: 100px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 60px;
        }   

        .room-item:nth-child(odd) {
            flex-direction: row-reverse;
        }
        
        .room-image {
            /* flex: 1; */
            position: relative;
            z-index: 3;
            width: 40.416vw;
            max-width: 776px;
        }
        .room-image::before {
            content: '';
            position: absolute;
            width: 100%; height: 100%;
            border-radius: 65px;
            background: rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease;
            opacity: 0;
        }
        .room-image img {
            width: 100%;
            display: block;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            border-radius: 65px;
        }
      
        .room-image .more-btn {
            position: absolute;
            top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: #fff;
            opacity: 0;
            transition: all 0.5s ease;
        }
        .room-image .more-btn .arrow {
            display: inline-block;
            width: 27px;
        }
        @media (min-width:1200px){
            .room-image:hover::before,  .room-image:hover .more-btn{
                opacity: 1;
            }

        }

        .room-info {
            max-width: 776px;
            width: 40.416vw;
            position: relative;
            z-index: 2;
        }
        .room-item:nth-child(odd) .room-info {
            text-align: right;
        }
        .room-label {
            font-size: 20px;
            color: var(--main-gold);
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        .room-title {
            font-size: 35px;
            color: var(--main-gold);
        }

        @media (max-width: 1024px) {
            .room-label {
                font-size: 16px;
                margin-bottom: 0;
            }
            .room-title {
                font-size: 28px;
            }
        }
        @media (max-width: 768px) {
            .roomlist-wrap {
                padding: 120px 0 0px;
            }

            .room-item {
                margin-bottom: 50px;
                gap: 15px;
            }
            .room-image {
                width: 54.5vw;
            }
            .room-image img {
                border-radius: 20px;
            }
            .room-image::before {
                border-radius: 20px;
            }

            .room-info {
                width: 30vw;
            }

            .room-label {
                font-size: 10px;
            }
            .room-title {
                font-size: 16px;
            }
            .room-image .more-btn {
                opacity: 1;
                font-size: 12px;
            }
            .room-image .more-btn .arrow {
                width: 17px;
            }
            /* 필기체 글자 */
            .font01 {
                position: absolute;
                display: block;
                top: 65px;
                width: 100vw;
                max-width: 100vw;
            }
        }