@charset "UTF-8";
@font-face { font-family: 'Pretendard', 'Pretendard-Thin'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-ExtraLight'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-Light'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-Regular'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-Medium'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-SemiBold'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-Bold'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-ExtraBold'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Pretendard', 'Pretendard-Black'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff'); font-weight: 900; font-style: normal; }


@font-face { font-family: 'URWClassico'; src: url('./URWClassico-Regular.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'URWClassico'; src: url('./URWClassico-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'URWClassico'; src: url('./URWClassico-Italic.ttf') format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'URWClassico'; src: url('./URWClassico-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }



:root {
    --color:hsl(0 0% 100% / 0.3);
    --underline-width:lh;
    --underline-block-width:200vmax;
    --underline-color:hsl(0 0% 50% / 0.15);
    --underline-color-hover:hsl(180 100% 50% / 1);
    --underline-transition:5s;
    --finish-fill:hsl(0 0% 100%);
    --accent:hsl(0 0% 100%);
    --fill:hsl(0 0% 50%);
    --blur:0;
    --mix-blend-mode:"unset";
    --fill2:hsl(0 0% 0% / .4);
    --main_top_progress:0;
    --main_center_progress:1;
    /* --vh:100vh; */
}

/*-------------------------------------------------
title       : 초기화
Author      : somsom
Create date : 2024-07-01
-------------------------------------------------*/
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
html { overflow: hidden; overflow-y: auto; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 18px; }
html {
	font-size: 16px;
	/* letter-spacing: -0.025em; */
}
body { overflow: hidden; margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; font-weight: 400; color: #555; word-break: keep-all; }
header, footer, main, section, article, nav, aside { display: block; }
ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, form, figure, figcaption { margin: 0; padding: 0; }
fieldset, hr { display: block; margin: 0; padding: 0; border: 0 none; }
input, select { max-width: 100%; vertical-align: middle; }
input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
a { color: inherit; text-decoration: none; text-underline-position: under; }
button { padding: 0; border: 0 none; background: none; cursor: pointer; }
input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
img { max-width: 100%; border: 0 none; font-size: 0; vertical-align: middle; }
caption, legend { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; clip: rect(0, 0, 0, 0); }
strong { font-weight: 600; }
select::-ms-expand { display: none; }
table { width: 100%; border-collapse: collapse; }
address, em, i { font-style: normal; }
html{
    -webkit-font-smoothing: antialiased; /* 맥에서 스무딩 적용 */
    -moz-osx-font-smoothing: grayscale;
}
body { overflow: hidden; touch-action: none; }

.smooth-scroll { will-change: transform; }
.smooth-scroll, .main_center, .model { backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.smooth-scroll { position: fixed; top: 0; left: 0; right: 0; z-index: 99; }

.scroll_box { position: fixed; width: 100vw; height: calc(var(--vh, 1vh) * 100); overflow: hidden; z-index: 999999999999999;}
body.scroll_on .scroll_box{display: none;}

/* 헤더 */
.head { z-index: 999; width: 100%; max-width: 400px; height: 80px; position: fixed; top: 0; left: 50%; transform: translateX(-50%); display: block;  font-family: 'URWClassico', sans-serif; font-size: 23px; font-weight: 500; color: #fff; flex-direction: column; align-items: center; overflow: hidden; transition: background 0.5s ease, backdrop-filter 0.5s ease;}
.head .top_menu { display: flex; grid-gap: 16px; height: 80px; justify-content: center; align-items: center; height: 80px;}
.hd_logo, .hd_close { font-family: 'URWClassico', sans-serif; font-size: 23px; font-weight: 500; color: #fff; cursor: pointer; transition: opacity 0.5s ease; opacity: 1; }
.hd_close{display: none;}
.head.active .hd_close{display:block}
.head.active .hd_logo{display:none}

.menu_box{display: flex; flex-direction: column; align-items: center; text-align: center;grid-gap: 20px;padding-bottom: 40px; height: auto; transition: height 1s ease;}
.menu_box li { font-family: 'URWClassico', sans-serif; cursor: pointer;}
.head.active{background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(25px);}

.head .hamburger-menu { width: 34px; height: 13px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
.head .hamburger-menu span { display: block; width: 100%; height: 1px; background-color: #fff; transition: transform 0.3s ease, opacity 0.3s ease; }
/* 애니메이션: 활성화 시 (햄버거 -> X) */
.head .hamburger-menu.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.head .hamburger-menu.active span:nth-child(2) { opacity: 0; }
.head .hamburger-menu.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.head.active .hamburger-menu span:nth-child(2) { display: none; }
.head.active .hamburger-menu { justify-content: center; }


/* 메인 상단 */
.main_top::after { content: ""; position: absolute; top: 0; left: 0; opacity: var(--main_top_progress); background-color: #000; width: 100%; height: 100%; z-index: 3; }
.main_top { width: 100%; height: calc(var(--vh, 1vh) * 100); display: flex; justify-content: center; align-items: center; background-color: #000; position: relative;}
.main_top { background: url("../img/bg.jpg") no-repeat center; background-size: cover;background-color: #000;}
.main_top { background-position-y: bottom; }
.main_top { background-position-y: 100%; }
.main_top .txt_box { width: 100%; max-width: 1240px; padding: 0 20px; height: calc(var(--vh, 1vh) * 100 * 0.5); color: #fff; z-index: 2;}
.main_top .txt_box { width: 100%; max-width: 1240px; padding: 0 10px; height: auto; color: #fff; z-index: 2; position: absolute; top: calc(50% - 30px); left: 50%; transform: translate(-50%, -50%); }
.main_top .txt_box > div { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; grid-gap: 0; padding: 0;}

.main_top .txt_box > div .back_img{position: relative;margin-bottom: 42px;text-align: center;opacity: 0;transition: opacity 1s ease;}
.main_top .txt_box > div .back_img span { font-family: 'URWClassico', sans-serif; color: transparent; font-size: 144px; line-height: 1; font-weight: 700; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; opacity: 0.1; display: flex; justify-content: center; align-items: center; }


.main_top.load .txt_box > div .back_img{opacity: 1;}
.main_top .txt_box > div .back_img p{position: absolute; top: 39%; left: 50%; transform: translate(-50%, -40%); opacity: 0; transition: opacity 1s ease, transform 1s ease; opacity: 0; font-size: 28px; text-align: center; font-weight: 500; width: 100%;}
.windows .main_top .txt_box > div .back_img p{top:50%}

.main_top .txt_box > div .back_img p.fade-up-text{transform: translate(-50%, -50%); opacity: 1;}

.main_top .txt_box > div .back_img.load span { text-align: center; color: rgba(255, 255, 255, 0.1); background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)); background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)); background: linear-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)); -webkit-background-size: 125px 100%; -moz-background-size: 125px 100%; background-size: 125px 100%; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-animation-name: shimmer; -moz-animation-name: shimmer; animation-name: shimmer; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; background-repeat: no-repeat; background-position: 0 0; background-color: #222; animation-fill-mode: forwards; }



@-moz-keyframes shimmer {
0% { background-position: top left; }
100% { background-position: top right; background-size: 0; }
}
@-webkit-keyframes shimmer {
0% { background-position: top left; }
100% { background-position: top right; }
}
@-o-keyframes shimmer {
0% { background-position: top left; }
100% { background-position: top right; }
}
@keyframes shimmer {
0% { background-position: top left;}
50%{background-size: 60px 100%;}
70%{background-size: 40px 100%;}
99%{background-size: 20px 100%;}
100% { background-position: top right;background-size: 0;}
}

.main_top img.main_logo{opacity: 0; margin-bottom: 84px; transition: opacity 3s ease;}
.main_top.load img.main_logo{opacity: 1;}

.main_top .txt_box > div > p{opacity: 0; transition: opacity 1s ease, transform 1s ease; transform: translate(0, 80%);}
.main_top .txt_box > div > p{font-size: 18px; letter-spacing: -0.03em;line-height: 1.65; text-align: center; font-weight: 400;}
.main_top .txt_box > div > p.fade-up-text{opacity: 1; transform: translate(0, 0);}

.keyhole { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; background: #F2F4F9; z-index: 999; width: 100%; height: 100%; }
.keyhole { -webkit-clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 30% 40%, 70% 40%, 70% 60%, 30% 60%, 30% 100%, 100% 100%, 100% 0%); clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 30% 40%, 70% 40%, 70% 60%, 30% 60%, 30% 100%, 100% 100%, 100% 0%); transition: clip-path 1s ease, -webkit-clip-path 1s ease; }
.keyhole{z-index: 1;}
.main_top.load .keyhole { -webkit-clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%); clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%); }

.main_top .txt_box > div p.mobile{display: none; font-size: 16px;}

@media screen and (max-width:1024px) {
    .main_top .txt_box {
        top: calc(50%);
    }

}

@media screen and (max-width:768px) {

    .main_top .txt_box > div .back_img span{
        font-size: 70px;
    }

    .main_top .txt_box > div p.sub{display: none;}
    .main_top .txt_box > div p.sub.mobile { display: block; }

    .main_top.load img.main_logo{height: 38px;}

    .main_top .txt_box > div p.title { font-size: 19px; }
    
    .main_top .txt_box{height: auto;}
    .keyhole { -webkit-clip-path: polygon(0% 0%, 0% 100%, 5% 100%, 5% 40%, 95% 40%, 95% 60%, 5% 60%, 5% 100%, 100% 100%, 100% 0%); clip-path: polygon(0% 0%, 0% 100%, 5% 100%, 5% 40%, 95% 40%, 95% 60%, 5% 60%, 5% 100%, 100% 100%, 100% 0%); transition: clip-path 1s ease, -webkit-clip-path 1s ease; }


}

@media screen and (max-width:500px) {

    .main_top .txt_box > div .back_img span{
        font-size: 70px;
    }

    .main_top .txt_box > div p.sub{display: none;}
    .main_top .txt_box > div p.sub.mobile { display: block; }

    .main_top.load img.main_logo{height: 38px;}

    .main_top .txt_box > div p.title { font-size: 19px; }
    
    .main_top .txt_box{height: auto;}
    .keyhole { -webkit-clip-path: polygon(0% 0%, 0% 100%, 5% 100%, 5% 40%, 95% 40%, 95% 60%, 5% 60%, 5% 100%, 100% 100%, 100% 0%); clip-path: polygon(0% 0%, 0% 100%, 5% 100%, 5% 40%, 95% 40%, 95% 60%, 5% 60%, 5% 100%, 100% 100%, 100% 0%); transition: clip-path 1s ease, -webkit-clip-path 1s ease; }


}

/* 어바웃 */
.rounded-div-wrapper { z-index: 20; height: 100px; position: relative; overflow: hidden; background-color: transparent;}
/* .rounded-div-wrapper { z-index: 20; height: 100px; position: relative; overflow: hidden; margin-bottom: -2px; transform: translate(0, -1px);background-color: transparent;} */
.rounded-div-wrapper .rounded-div { border-radius: 50%; width: 150%; height: 750%; position: absolute; left: 50%; overflow: hidden; transform: translate(-50%, -86.6%); }
.rounded-div-wrapper .rounded-div.is-top { transform: translate(-50%); }
.rounded-div-wrapper .rounded-div-background { background: url(../img/intro_bg.png) no-repeat top; position: absolute; inset: 0%; background-position: center top; background-size: cover; }

.intro { background: url("../img/intro_bg.png") no-repeat top; background-size: cover; width: 100%; height: auto; position: relative; }
.intro .sec_1 { height: calc(var(--vh, 1vh) * 100); width: 100%; display: flex; justify-content: center; align-items: center; }

.fill-text-paragraph.is-centered { display: flex; grid-column-gap: 0px; grid-row-gap: 0px; flex-flow: column; justify-content: center; align-items: center; grid-area: span 1 / span 1 / span 1 / span 1; place-self: center; }
.fill-text-paragraph.is-mobile{
    display: none;
    grid-column-gap: 0px; grid-row-gap: 0px; flex-flow: column; justify-content: center; align-items: center; grid-area: span 1 / span 1 / span 1 / span 1; place-self: center;
}
.fill-text-item { color: #FFF9ED; display: flex; position: relative; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.6; }
.fill-text-row { opacity: .12; -webkit-text-stroke-color: #FFF9ED; white-space: nowrap; position: relative; }
.fill-text-hover-row { white-space: nowrap; position: absolute; left: 0; overflow: hidden; width: 0%; }


/* .intro .sec_2 .inner { z-index: 10; opacity: 1; outline-offset: 0px; -webkit-text-fill-color: inherit; mix-blend-mode: normal; background-clip: border-box; position: relative; } */
.intro .sec_2 {margin-bottom: calc(var(--vh, 1vh) * 100 * -1);}
.intro .sec_2 .inner{height: calc(var(--vh, 1vh) * 100 * 4); position: relative;}
.intro .sec_2 .work-sticky-wrapper { flex-direction: column; width: 100%; height: calc(var(--vh, 1vh) * 100); display: flex; position: relative; z-index: 2; }
.intro .sec_2 .work-sticky-contents { flex-direction: column; justify-content: center; align-items: flex-start; height: calc(var(--vh, 1vh) * 100); display: flex; padding-left: 40vw;}
.intro .sec_2 .section-title-wrapper { text-transform: none; white-space: nowrap; position: relative; will-change: transform; z-index: 2; }
.intro .sec_2 .secton-title { font-family: 'URWClassico', sans-serif; color: #FFF9ED; font-size: 270px; line-height: 1.2; font-weight: 500; opacity: 0; transition: opacity 1s ease; }

/* .intro .sec_2 img{opacity: 0;} */
.intro .sec_2 img { position: absolute; }
.intro .sec_2 img.img_1 { top: 30%; left: 5%; }
.intro .sec_2 img.img_2 { top: 35%; left: 80%; z-index: 3;}
.intro .sec_2 img.img_3 { top: 35%; left: 10%; }
.intro .sec_2 img.img_4 { top: 45%; left: 60%; z-index: 3;}
.intro .sec_2 img.img_5 { top: 35%; left: 25%; }
.intro .sec_2 img.img_6 { top: 40%; left: 80%; z-index: 3;}


@media screen and (max-width:1440px) {
.intro .sec_2 .secton-title { font-size: 200px; }
}
@media screen and (max-width:1024px) {
.intro .sec_1 .text_reveals span { font-size: 28px; }
}
@media screen and (max-width:768px) {
.intro .sec_1 .text_reveals span { font-size: 22px; }
.intro .sec_2 .work-sticky-contents { padding-left: 20vw;}
.intro .sec_2 .secton-title { opacity: 1;}
}

@media screen and (max-width:768px) {

    /* .rounded-div-wrapper{display: none;} */
    .rounded-div-wrapper .rounded-div { width: 200%; }
    .intro .sec_2 img{opacity: 0;}
    .intro .sec_2 img.img_1 { width: 91px; }
    .intro .sec_2 img.img_2 { width: 90px; }
    .intro .sec_2 img.img_3 { width: 134px; }
    .intro .sec_2 img.img_4 { width: 135px; }
    .intro .sec_2 img.img_5 { width: 134px; left: 8%; }
    .intro .sec_2 img.img_6 { width: 91px; }


    .fill-text-paragraph.is-centered { display: none; }
    .fill-text-paragraph.is-mobile { display: flex; }
    .fill-text-item { font-size: 24px; letter-spacing: -0.03em; line-height: 1.5; }
    .intro .sec_2 .secton-title { font-size: 100px; }


    .intro .sec_1 .text_reveals span { font-size: 18px; }
    .intro .sec_1 .text_reveals { display: none; }
    .intro .sec_1 .text_reveals.mobile { display: block; }
    .intro .sec_2 .list_box { display: grid; justify-content: center; grid-gap: 20px; padding: 20px; grid-template-columns: repeat(2, 1fr); height: auto; padding-bottom: calc(var(--vh, 1vh) * 100 * 0.5); }
    .intro .sec_2 .list_box img { position: relative; top: auto !important; left: auto !important; }
    .rounded-div-wrapper { height: 40px; }
}
@media screen and (max-width:500px) {

    .rounded-div-wrapper .rounded-div { width: 200%; }
    .intro .sec_2 img{opacity: 0;}
    .intro .sec_2 img.img_1 { width: 91px; }
    .intro .sec_2 img.img_2 { width: 90px; }
    .intro .sec_2 img.img_3 { width: 134px; }
    .intro .sec_2 img.img_4 { width: 135px; }
    .intro .sec_2 img.img_5 { width: 134px; left: 8%; }
    .intro .sec_2 img.img_6 { width: 91px; }


    .fill-text-paragraph.is-centered { display: none; }
    .fill-text-paragraph.is-mobile { display: flex; }
    .fill-text-item { font-size: 24px; letter-spacing: -0.03em; line-height: 1.5; }
    .intro .sec_2 .secton-title { font-size: 100px; }


    .intro .sec_1 .text_reveals span { font-size: 18px; }
    .intro .sec_1 .text_reveals { display: none; }
    .intro .sec_1 .text_reveals.mobile { display: block; }
    .intro .sec_2 .list_box { display: grid; justify-content: center; grid-gap: 20px; padding: 20px; grid-template-columns: repeat(2, 1fr); height: auto; padding-bottom: calc(var(--vh, 1vh) * 100 * 0.5); }
    .intro .sec_2 .list_box img { position: relative; top: auto !important; left: auto !important; }
    .rounded-div-wrapper { height: 40px; }
}


/* 룸 소개 */
/* .rounded-div-wrapper-room { z-index: 20; height: 100px; margin-bottom: -2px; position: relative; overflow: hidden; transform: translate(0, -1px); margin-top: -100px;} */
.rounded-div-wrapper-room { z-index: 20; height: 100px; margin-bottom: -2px; position: relative; overflow: hidden; transform: translate(0, -1px);}
.rounded-div-wrapper-room .rounded-div { border-radius: 50%; width: 150%; height: 750%; position: absolute; left: 50%; overflow: hidden; transform: translate(-50%, -86.6%); }
.rounded-div-wrapper-room .rounded-div.is-top { transform: translate(-50%); }
.rounded-div-wrapper-room .rounded-div-background { background-color: #FFFBEF; position: absolute; inset: 0%;}

.room { flex-direction: column; display: flex; }
.room .inner { z-index: 10; background-color: #FFFBEF; opacity: 1; outline-offset: 0px; -webkit-text-fill-color: inherit; mix-blend-mode: normal; background-clip: border-box; outline: 0 #FFFBEF; position: relative; }
.room .work-sticky-wrapper { flex-direction: column; justify-content: center; align-items: center; width: 100%; height: calc(var(--vh, 1vh) * 100); display: flex; position: sticky; top: 0; overflow: hidden; }
.room .section-title-wrapper { justify-content: center; align-items: center; display: flex; }
.room .secton-title { text-align: center; font-family: 'URWClassico', sans-serif; color: #0D3D48; font-size: 250px; line-height: 1.2; font-weight: 500; }

@media screen and (max-width:1440px) {
    .room .secton-title{font-size: 200px;}
}

@media screen and (max-width:1024px) {
    .room .secton-title{font-size: 130px;}
}

@media screen and (max-width:768px) {
    /* .rounded-div-wrapper-room{display: none;} */
    .room .secton-title{font-size: 100px;}
}

.room .list_box { flex-direction: column; padding: 2vw 5vw calc(var(--vh, 1vh) * 100 * 0.5); display: flex; position: relative; overflow: hidden; grid-gap: 40px; grid-gap: 0;}
.room .list_box .item { perspective: 100vw; perspective-origin: 50%; flex-direction: column; justify-content: center; width: 100%; max-width: 870px; margin-left: auto; margin-right: auto; display: flex; }
.room .list_box .item .box { z-index: 10; width: 100%; padding-top: 62.5%; position: relative; overflow: hidden; height: auto; transform-style: preserve-3d; }
.room .list_box .item .box img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; }
.room .info_box { width: 100%; position: absolute; bottom: 0; padding: 37px 44px; display: flex; justify-content: space-between;}
.room .room_info { display: flex; flex-direction: column; }
.room .room_info p { color: #fff; font-size: 20px; font-weight: 400; line-height: 1.5; }
.room .room_info p.room_name { font-family: 'URWClassico', sans-serif; font-size: 50px; font-weight: 700; }

.room .btn_box { display: flex; align-items: flex-end; }
.room .btn_box button { padding: 8px 14px; background-color: #fff; border-radius: 50px; display: flex; justify-content: center; align-items: center; color: #1F1F1F; font-size: 18px; font-weight: 400; }



@media screen and (max-width:500px) {
    .rounded-div-wrapper-room .rounded-div{width: 200%;}

    .room .list_box{padding: 10px; grid-gap: 40px;}
    .room .list_box .item .box {padding-top: 140.5%;}

    .room .info_box { width: 100%; position: absolute; bottom: 0; padding: 10px; display: flex; justify-content: flex-end; flex-direction: column; grid-gap: 10px; }
    .room .room_info { display: flex; flex-direction: column; }
    .room .room_info p.room_name { font-family: 'URWClassico', sans-serif; font-size: 50px; font-weight: 700; }
    .room .room_info p { color: #fff; font-size: 16px; font-weight: 400; line-height: 1.5; }
    .room .btn_box button { padding: 8px 14px; background-color: #fff; border-radius: 50px; display: flex; justify-content: center; align-items: center; color: #1F1F1F; font-size: 12px; font-weight: 400; }

}



.highlight { width: 100%; height: auto; background-color: #FFFBEF; position: relative; padding: 120px 0; z-index: 2;}
.highlight .sec_1 { display: flex; justify-content: center; padding: 0 10px; margin-bottom: 36px;}
.highlight .sec_1 .text_box { display: flex; grid-gap: 36px; justify-content: center; flex-direction: column; align-items: center; }
.highlight .title { color: #0D3D48; line-height: 1.2; font-size: 80px; font-family: 'URWClassico', sans-serif; opacity: 0; transition: opacity 1s ease;}
.highlight .sec_1 .text_box p{opacity: 0; transition: opacity 1s ease;}

.highlight .bar { width: 1px; height: 74px; background-color: #0D3D48; }
.highlight .img_box { width: 100%; padding-bottom: 100%; transition: background-color 0.5s ease; cursor: pointer;}
.highlight .img_box.img_1 { background: url("../img/event1.png") no-repeat center; background-size: cover; }
.highlight .img_box.img_2 { background: url("../img/event2.png") no-repeat center; background-size: cover; }
.highlight .img_box.img_3 { background: url("../img/event3.png") no-repeat center; background-size: cover; }
.highlight .img_box.img_4 { background: url("../img/event4.png") no-repeat center; background-size: cover; }
.highlight .img_box > div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; transition: background-color 0.5s ease; }
.highlight .img_box > div:hover::before { background-color: rgba(0, 0, 0, 0.20); }


.highlight .img_box > div { display: flex; width: 100%; height: 100%; padding: 30px 50px; position: absolute; top: 0; left: 0; box-sizing: border-box; align-items: flex-end; }
.highlight .img_box .text_box { color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; grid-gap: 14px; z-index: 1;}
.highlight .img_box .text_box p { font-size: 24px; font-weight: 700; line-height: 1.4; }
.highlight .img_box .text_box span { font-size: 20px; font-weight: 600; line-height: 1.5; text-decoration: underline; }

@media screen and (max-width:1440px) {
    .highlight .img_box .text_box p{font-size: 20px;}
}

@media screen and (max-width:1024px) {
    .highlight .img_box > div{padding: 10px;}
    .highlight .img_box .text_box p{font-size: 16px;}
    .highlight .img_box .text_box span{font-size: 14px;}
}

@media screen and (max-width:500px) {
    .highlight .sec_1 .text_box p{
        text-align: center;
    }

    .highlight .bar{
        height: 47px;
    }

    .highlight .img_box > div::before{
        background-color: rgba(0, 0, 0, 0.20);
    }
}



.rounded-div-wrapper-highlight { z-index: 20; height: 100px; margin-bottom: -2px; position: relative; overflow: hidden; transform: translate(0, -1px); z-index: 2;}
.rounded-div-wrapper-highlight .rounded-div { border-radius: 50%; width: 150%; height: 750%; position: absolute; left: 50%; overflow: hidden; transform: translate(-50%, -86.6%); }
.rounded-div-wrapper-highlight .rounded-div.is-top { transform: translate(-50%); }
.rounded-div-wrapper-highlight .rounded-div-background { background-color: #FFFBEF; position: absolute; inset: 0%;}

.main_center::after { content: ""; position: absolute; top: 0; left: 0; opacity: var(--main_center_progress); background-color: #000; width: 100%; height: 100%; z-index: 1; }
.main_center { width: 100%; height: calc(var(--vh, 1vh) * 100); background-color: #000; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; margin-top: calc(var(--vh, 1vh) * 100 * -1); z-index: 1;}
/* .main_center { width: 100%; height: calc(var(--vh, 1vh) * 100); background-color: #000; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; z-index: 1;} */
/* .main_center{align-items: flex-start;} */
.main_center .inner { display: flex; justify-content: center; align-items: center; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); }
.main_center .list_box { display: flex; grid-gap: 90px; }
.main_center .list_box > div { display: flex; flex-direction: column; grid-gap: 90px; width: 40vw;}
.main_center .list_box img { max-width: none; }

@media screen and (max-width:1024px) {
    .main_center .list_box { grid-gap: 60px; }
    .main_center .list_box > div { grid-gap: 60px;}
}

@media screen and (max-width:768px) {
    .rounded-div-wrapper-highlight{display: none;}
    .main_center .list_box > div { width: 50vw;}
}

@media screen and (max-width:500px) {
    .main_center .list_box { grid-gap: 20px; }
    .main_center .list_box > div { grid-gap: 20px; transform: translateX(10vw); }
}


.model { width: 100%; height: calc(var(--vh, 1vh) * 100); background-color: #000; position: relative; overflow: hidden; margin-top: calc(var(--vh, 1vh) * 100 * -1);}
/* .model { width: 100%; height: calc(var(--vh, 1vh) * 100); background-color: #000; position: relative; overflow: hidden; } */
.model img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; width: auto; height: 100%; }


@media screen and (max-width:1024px) {
    .model img{object-fit: contain;}
}

.footer{margin-top: calc(var(--vh, 1vh) * 100 * -1); z-index: 10;}
.footer{z-index: 10;}
.footer { width: 100%; height: calc(var(--vh, 1vh) * 100); background-color: #000; position: relative; background: url("../img/footer_bg.png") no-repeat center; background-size: cover;}
.footer .inner { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; max-width: 768px; padding: 74px 10px; margin: 0 auto; text-align: center; align-items: center; }
.footer .inner .time_box { color: #fff; display: flex; grid-gap: 20px;}
.footer .inner .timer_num { font-family: 'URWClassico', sans-serif; letter-spacing: -0.01em; color: #fff; font-size: 100px; font-weight: 500; min-width: 110px;}
.footer .inner .timer_name { font-weight: 100; font-size: 16px; letter-spacing: -0.01em; }
.timer_blank { font-family: 'URWClassico', sans-serif; letter-spacing: -0.01em; color: #fff; font-size: 100px; font-weight: 500; }
.last_box { color: #fff; font-size: 20px; font-weight: 400; display: flex; flex-direction: column; grid-gap: 30px; }
.last_box ul { display: flex; grid-gap: 40px; justify-content: center;}
.footer > span { position: absolute; top: 46%; transform: translateY(-50%); color: #fff; font-family: 'URWClassico', sans-serif; font-size: 30px; font-weight: 700; }
.footer > span.left { left: 75px; }
.footer > span.right { right: 75px; }
.footer button{position: absolute; right: 50px; bottom: 100px;}

@media screen and (max-width:768px) {
    .footer > span{
        display: none;
    }
}

@media screen and (max-width:500px) {
    .footer .inner .time_box { color: #fff; display: flex; grid-gap: 4px; width: 100%; padding: 0; justify-content: center; }
    .footer .inner .timer_num { font-family: 'URWClassico', sans-serif; letter-spacing: -0.01em; color: #fff; font-size: 45px; font-weight: 500; min-width: 70px; }
    .footer .inner .timer_name { font-weight: 100; font-size: 14px; letter-spacing: -0.01em; }
    .timer_blank { font-family: 'URWClassico', sans-serif; letter-spacing: -0.01em; color: #fff; font-size: 45px; font-weight: 500; }
    .last_box { font-size: 16px; }
    .footer button { position: absolute; right: 20px; bottom: 20px; }

}



.swiper-pagination-bullet, .swiper-pagination-bullet-active{
    width: 20px;
    height: 20px;
    background-color: transparent;
    position: relative;
}

.swiper-pagination-bullet::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 100%;
    background-color: #000;
}

.swiper-pagination-bullet-active::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 2px;
    background-color: #000;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0;
    opacity: 1;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom: 50px;
}


.head{
    display: none;
}

#header{
    z-index: 9999;
}

#high{display: none;}
#open{display: none;}