.index{
    .main-gnb{
        .logo{
            text-transform: uppercase;
        }
    }
    .section10{
        padding-bottom: clamp(57px, 9vw, 183px);
        .layout2{
            display: flex;
            /*gap: clamp(13px, 8vw, 159px);*/
        }
        .article-img{
            position: relative;
            .swiper{
                .swiper-slide{
                    height: clamp(337px,50vw, 650px);
                }
            }
            &::after{
                content: "";
                position: absolute;
                right:-0; bottom: -63px; width: 80%; height: 80%;
                border: 2px dotted var(--color-gray-2);
            }
        }
        .article-imgs{
            position: relative;
            .img-box{
                position: relative;
                width: 100%; height: 100%;
                .img.swiper-slide{
                    display: flex; flex-direction: column; justify-content: end;

                    .room-name{
                        background-color: var(--color-white);
                        font-family: var(--font-2);
                        font-size: clamp(26px,6.5vw,35px); font-weight: 400;
                        span:last-child {
                            color: #d9d9d9;
                        }
                    }
                    .room-link{
                        padding-top: 10px;
                        margin-bottom: 54px;
                        display: flex; justify-content: space-between;
                        background-color: var(--color-white);
                        &>div:first-child{
                            font-weight: 300;
                        }
                        &>a:last-child{
                            color: #D9D9D9;
                            font-family: Pretendard;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            text-decoration-line: underline;
                            text-decoration-style: solid;
                            text-decoration-skip-ink: auto;
                            text-decoration-thickness: auto;
                            text-underline-offset: auto;
                            text-underline-position: from-font;
                            transition: .4s;
                        }
                    }
                    &>div:has(.room-link):hover a{
                        color: var(--color-1);
                        scale: 1.2;
                        transform-origin: bottom right;
                    }

                    .img-box{
                        display: flex;gap: 10px; height: max-content;
                        &>div{
                            /*aspect-ratio: 239/299;*/
                            width: 100%;
                            height: 299px;
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                            position: relative;
                            overflow: hidden;
                            &::after{
                                content: "";
                                position: absolute;
                                left: -1px; top: -1px;
                                width: 30px; height: 32px;
                                clip-path: polygon(0 0, 100% 0, 0 100%);
                                background-color: var(--color-white);
                                transition: 3s;
                            }
                            &:hover::after {
                                left: -100%; right: -100%;
                            }
                        }
                    }
                }
            }
        }
    }
    .section20{
        .wrap{
            .section20-container{
                border-top: 1px solid var(--color-gray-2);
                padding-block: clamp(56px, 7vw, 120px);
                font-family: var(--font-2);
                font-size: clamp(60px, 7vw, 120px);
                text-align: center;
                color: rgba(239, 239, 239, 0.80);
                .div{
                    display: flex; align-items: center; gap: clamp(20px, 9vw, 189px);
                    .bar{
                        width: auto;
                        height: 1px;
                        background-color: var(--color-gray-2);
                        flex-grow: 1;
                    }
                }
                .div:nth-child(2){
                    justify-content: center;
                    color: var(--color-1) !important;
                }

            }
        }

    }
    .section30{
            #swiper-main-special-nav{
                    text-transform: uppercase;
                    font-size: 23px;
                    font-family: var(--font-2);
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.40);
                padding-block: 30px;
                .swiper-slide{
                    width: max-content;
                    &.active{
                        color: var(--color-black);
                    }
                }
            }
            #swiper-main-special .swiper-slide{
                height: 600px;
                padding-top: 20px;
                position: relative;
                &>.back{
                    position: absolute;
                    z-index: -1;
                    left: 0; top: 0; width: 100%; height: 100%;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    filter: blur(5px);
                    &::after{
                        content: "";
                        position: absolute;
                        left: 0; top: 0; width: 100%; height: 100%;
                        background-color: #F4F4F4;
                        opacity: 0.6;
                        filter: blur(5px);
                    }
                }
                .swiper-box{
                    display: flex; justify-content: center; gap: 4vw;
                    height: 100%;
                    padding-block: clamp(0px, 4vw, 75px);
                    &>div{
                        position: relative;
                        aspect-ratio: 370/450;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        display: flex; align-items: center; justify-content: center;
                        font-family: var(--font-2);
                        font-size: 27px; font-weight: 400;
                        &:nth-child(2){
                            color: var(--color-white);
                        }
                        a{
                            position: absolute;
                            left: 50%; transform: translateX(-50%);
                            bottom: 36px;
                            text-decoration: underline;
                            font-family: var(--font-1);
                            font-size: 19px; font-weight: 400;
                        }
                    }
                }
            }
        }
}
@media(width > 1023px){
    .index {
        .section10 {
            padding-bottom: clamp(57px, 9vw, 183px);

            .layout2 {
                display: flex;
                /*gap: clamp(13px, 8vw, 159px);*/
            }

            .article-img {
                width: 50%;
                padding-right: calc( clamp(13px, 8vw, 159px) / 2 );
            }
            .article-imgs{
                width: 50%;
                padding-left: calc( clamp(13px, 8vw, 159px) / 2 );
            }
        }
    }
}
@media(width < 1024px) {
    .index {
        .section10{
            .layout2{
                flex-direction: column;
                gap: 13px;
            }
            .article-img{
                padding-right: 43px;
                .swiper{
                    .swiper-slide{
                        aspect-ratio: 337/418;
                        height: auto;
                    }
                }
                &::after{
                    right: 0; bottom: -113px;
                    width: 80%; height: 100%;
                }
            }
             .article-imgs{
                 .img-box {
                     .img.swiper-slide {
                         .img-box > div {
                             aspect-ratio: 123/154;
                             height: auto;
                         }
                         .room-link{
                             padding-right: 43px;
                             margin-bottom: 87px;
                         }
                     }
                 }
             }
        }
        .section30{
            #swiper-main-special{
                .swiper-slide{
                    padding-top: 0 !important;
                }
                .swiper-box{
                    padding-block: 0 !important;
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}