/* 헤더 */
header {
    width: 90%;
    margin: 0 auto;
    height: 8rem;
    display: flex;
    align-items: center;
}

header > h1 {
    /* display: none; */
    margin-right: 6rem;
    /* width: 10rem; */
    /* height: 6rem; */
    background-size: contain !important;
}

header > nav > ul {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1024px) {
    header {
        position: fixed;
        height: 12rem;
        width: 100%;
        background: white;
        z-index: 999999;
        left: 0;
        bottom: 0;
    }

    header > i {
        display: none !important;
    }

    header > #pc_navigation {
        display: none;
    }

    header > h1 {
        text-indent: -999rem;
        margin: 0;
    }
}

header > nav > ul > li {
    margin-right: 6rem;
    /* transition: 0.3s ease-in-out; */
}

header > nav > ul > li:last-of-type {
    margin-right: 0;
}

/* 슬라이더 */
.slide_List {
    display: flex;
    align-items: center;
    transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.slide_List > .slide_Box {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-size: cover !important;
    cursor: pointer;
}

/* 페이지네이션 */
.pagination_Box {
    position: absolute;
    z-index: 9999;
    width: 12rem;
    height: 6rem;
    right: 2.5%;
    bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--common-white);
    background: var(--common-black);
    border-radius: 1rem;
}

@media screen and (max-width: 820px) {
    .pagination_Box {
        bottom: 2rem;
    }
}

@media screen and (max-width: 414px) {
    .pagination_Box {
        bottom: 1rem;
    }
}

/* 섹션 타이틀 */
section {
    width: 90%;
    margin: 12rem auto;
}

section > .title_container > h3 {
    margin-bottom: 1rem;
}

section > .title_container > p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section > .detail_container {
    margin-top: 3rem;
}

@media screen and (max-width: 1024px) {
    section {
        width: 90%;
        margin: 6rem auto;
    }
}

/* 애로우 버튼 */
.button_Box {
    margin-top: 4rem;
}

.button_Box > button {
    width: 10rem;
    height: 10rem;
    cursor: pointer;
    background: none;
    border: none;
}

.button_Box > button > i {
    font-size: var(--font-giant);
    color: var(--sub-color);
}

@media screen and (max-width: 520px) {
    .button_Box {
        margin-top: 0;
    }

    .button_Box > button {
        width: 5rem;
        height: 5rem;
    }

    .button_Box > button > i {
        font-size: var(--font-big);
    }
}

/* 모달 박스 */
.modal_Box {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
}

.modal_Box > div {
    position: relative;
    width: 50%;
    padding: 8rem;
    margin: 8rem auto;
    border-radius: 2rem;
    background: white;
}

.modal_Box > div > button {
    position: absolute;
    width: auto;
    height: auto;
    border: none;
    padding: 0;
    top: 4rem;
    right: 4rem;
    background: white;
    cursor: pointer;
}

.modal_Box > div > button > i {
    color: black;
}

.modal_Box > div > div {
    margin-bottom: 8rem;
}

.modal_Box > div > div:last-of-type {
    margin-bottom: 0;
}

.modal_Box > div > div > h3 {
    margin-bottom: 4rem;
}

.modal_Box > div > div > h5 {
    margin-bottom: 2rem;
}

.modal_Box > div > div > div {
    margin-bottom: 5rem;
}
.modal_Box > div > div > div:last-of-type {
    margin-bottom: 0;
}

.modal_Box > div > div > div > p {
    margin-bottom: 1rem;
}

@media screen and (max-width: 1024px) {
    .modal_Box > div {
        width: 70%;
        padding: 4rem;
        margin: 4rem auto;
    }
}

/* 인스타그램 */
#instagram {
    width: 100%;
}

#instagram > .hr_container {
    height: 72rem;
    background-size: cover !important;
}

#instagram > .feed_container {
    width: 70%;
    margin: 24rem auto;
}

@media screen and (max-width: 1024px) {
    #instagram > .feed_container {
        margin: 12rem auto;
    }
}

@media screen and (max-width: 820px) {
    #instagram > .feed_container {
        width: 100%;
        margin: 6rem auto;
    }
}

#instagram > .feed_container .slide_List {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

@media screen and (max-width: 820px) {
    #instagram > .feed_container .slide_List {
        width: 90%;
        margin: 0 auto;
        gap: 2rem;
    }
}

#instagram > .feed_container .slide_List > .slide_Box {
    width: 100%;
}

#instagram > .feed_container .slide_List > .slide_Box::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* 객실 bottom posterIMG */
#posterIMG {
    position: relative;
    width: 100%;
    height: 80vh;
    background-size: cover !important;
}

#posterIMG > .posterIMG_Title {
    position: absolute;
    /* background: var(--common-white); */
    padding: 4rem;
    color: var(--common-white);
    /* border: 0.1rem solid var(--common-white); */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

@media screen and (max-width: 1024px) {
    #posterIMG > .posterIMG_Title {
        width: 100%;
        padding: 0;
    }
}

/* 화살표 토글 */
.toggle_Arrow {
    transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: rotate(-90deg);
}

.toggle_Arrow.active {
    transform: rotate(0deg);
}

#posterIMG > .posterIMG_Title > h3 {
    margin: 2rem 0 4rem;
}

/* 하단 정보 */
footer {
    width: 100%;
    background: var(--wire-frame);
}

footer > div {
    width: 90%;
    height: 32rem;
    padding: 4rem 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
    footer > div {
        height: 48rem;
        grid-template-columns: repeat(1, 1fr);
        justify-items: baseline;
    }
}

footer > div > div:first-of-type > h3 {
    margin-bottom: 1rem;
}

footer > div > div:last-of-type > h5 {
    margin-bottom: 2rem;
}

footer > div > div:last-of-type > p {
    margin: 1rem 0;
}

footer > div > div:last-of-type > a {
    display: inline-block;
    padding: 1.5rem 3rem;
    margin-top: 2rem;
    color: var(--common-white);
    background: var(--common-black);
    font-size: var(--font-small);
    font-weight: var(--font-bold);
}