.index{

    .header{
        &::after{
            background-color: var(--color-main);
        }
        a{
            color: var(--color-text);
        }
        .m-gnb-btn{
            color: var(--color-text);
        }
    }

    .section-include-hero{
        background-color: var(--color-main);
        .title{
            font-size:2.5rem ; /*46,26*/
            color: var(--color-text);
        }
    }
.room-item-desc{
    font-family: var(--font-2), var(--font-3);
    font-size: 16px;
    line-height: 2;
}
    .section-index-room{
        background-color: var(--color-main);
        color: var(--color-text);
        padding-top: clamp(55px, 5vw, 92px);
        padding-bottom: clamp(53px, 7vw ,120px);
        .room-list{
            padding-top: clamp(30px, 6.5vw, 120px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: auto;
            row-gap: clamp(60px, 8vw, 80px);
            column-gap: clamp(0px , 2vw, 56px);
            .room-item-title{
                border-bottom: 1px solid var(--color-text);
                overflow: hidden;
            }

            /*
            padding-top: clamp(30px, 6.5vw, 120px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: auto;
            row-gap: clamp(60px, 8vw, 80px);
            column-gap: clamp(0px , 2vw, 56px);
            .room-item-title{
                border-bottom: 1px solid var(--color-text);
                overflow: hidden;
            }

            &>div:first-child{
                grid-area: 1/2;
                display: flex;
                grid-column: 1/3;
                .room-item{
                    width: 70%;
                }
                .section-content{
                    padding-left: 40px;

                }
            }
             */
            .room-item:nth-child(2),
            .room-item:nth-child(5),
            .room-item:nth-child(6),
            .room-item:nth-child(9),
            .room-item:nth-child(10){
                img{
                /*aspect-ratio: 86/80;*/
                }
            }
            .room-item:nth-child(3),
            .room-item:nth-child(4),
            .room-item:nth-child(7),
            .room-item:nth-child(8){
                img{
                    /*aspect-ratio: 2/1;*/
                }
            }
        }
        .room-item-all:nth-child(even){
            .room-item{
                img{
                    aspect-ratio: 86/80;
                }
            }
        }

    }

    .section-index-special{
        padding-block: 40px;
        .wrap{
            position: relative;
        }
        .section-title{
            border-top: 1px solid var(--color-black);
            width: 100%;
        }
    }

    #intro{
        position: fixed; z-index: 100000;
        top:0; bottom: 0; left: 0; right: 0;
        background: #fff;
        display: flex; align-items: center; justify-content: center;
        .intro-img{
            overflow: hidden;
            width: 1px; border-inline: 1px solid var(--color-black);
            transform: translateY(100px);
            text-align: center;
            .intro-txt{
                font-size: 2rem;
                font-family: var(--font-2), var(--font-3);
                white-space: nowrap;
                color: var(--color-text);
                opacity: 0;
                .intro-txt-kr{
                    font-size: 0.6em;
                }
            }
        }
    }
}
@media(width > 1023px){
    .index .section-index-room {
        .room-item-first{
            display: flex; gap: 40px;
            grid-column: 1/3;
            a{
                width: 74%;
            }
        }
    }
}
@media(width < 1024px) {
    .index {
        .header {
            &::after {
                background-color: var(--color-main);
            }

            a {
                color: var(--color-text);
            }
        }

        .section-include-hero {
            background-color: var(--color-main);

            .title {
                font-size: 2rem;
            }
        }

        .section-index-room{
            .room-list{
                display: flex;
                flex-direction: column;
                & > div:first-child {
                    .room-item{
                        width: 100%;
                    }
                }
            }
            .room-item-first{
                a{
                    margin-bottom: 20px;
                }
            }
        }

        .section-index-special{
            padding-bottom: 15vw;
        }

        #intro{
            .intro-img{
                scale: 0.7 !important;
            }
        }

    }
}
@media(width < 768px){
}
@media(width < 400px){
}