#wrap {width:100%; min-width:1400px; max-width: 2560px; border:0; margin:0 auto; overflow:hidden;} .home_pc {display:none} /* 커서 */ #cursor_circle {position: fixed; left:8px; top:8px; width:8px; height:8px; border-radius:50%; pointer-events: none; background:var(--color-main2); transition:0.1s; z-index: 9999999999;} /* Reforma 1969 */ @font-face { font-family: "Reforma 1969 Negra"; src: url("https://db.onlinewebfonts.com/t/eaacb3a49d36b23e094533a1af210740.eot"); src: url("https://db.onlinewebfonts.com/t/eaacb3a49d36b23e094533a1af210740.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/eaacb3a49d36b23e094533a1af210740.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/eaacb3a49d36b23e094533a1af210740.woff")format("woff"), url("https://db.onlinewebfonts.com/t/eaacb3a49d36b23e094533a1af210740.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/eaacb3a49d36b23e094533a1af210740.svg#Reforma 1969 Negra")format("svg"); } :root { --color-main1: #002047; --color-main2: #8b5f3c; --color-main3: #bc9a43; --color-main4: #ff0b9c; --color-yellow: #ffff00; --mo-header-height:15vw; --mo-header-quick-height:9vw; } /*----------------------------------------------------- 헤더 -----------------------------------------------------*/ /*로고*/ header .logo-white .logo .header-logo-white {display:block} header .logo-white .logo .header-logo-color {display:none} header:hover .logo-white .logo .header-logo-white {display:none} header:hover .logo-white .logo .header-logo-color {display:block} /*GNB*/ header .gnb-white .nav a {color:#fff;} header:hover .gnb-white .nav a {color:inherit} /* bgm 버튼 */ header .bgm-toggle {position:absolute; display: flex; right: 23rem; background:transparent;} header:hover .bgm-toggle .feather, header:hover .gnb-white .bgm-toggle .feather {stroke:#333; } header .gnb-white .bgm-toggle .feather {stroke:#fff} header .bgm-toggle .feather {width: 25px; height: 25px; stroke: #555; fill:transparent; stroke-width: 1.5px; flex-shrink: 0;} header .bgm-toggle .feather.feather-volume-x {display:none} header .bgm-toggle.bgm-on .feather.feather-volume-x {display:block} header .bgm-toggle.bgm-on .feather.feather-music {display:none} /*----------------------------------------------------- 인트로 -----------------------------------------------------*/ #intro_loading {position: fixed; display: flex; align-items: center; justify-content: center; flex-direction: column; width:100%; height: 100%; background:#fff; transition:opacity 0.3s ease-in-out; z-index: 1001; /*background:url(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/3553b629ecc63.jpg) no-repeat top/cover*/} .loading_logo-container {display: flex; justify-content: center;} .loading_logo {width: 270px; padding-bottom: 10px;} .loading_progress_bar {position:relative; width: 300px; height: 2px; background: rgba(0,0,0,0.1); margin:30px 0;} .progress_bar {height: 100%; background:var(--color-main1); width: 0;} .loading_percent {position: absolute; font-family: 'Montserrat'; color:#555; font-size:1.8rem; font-weight:600; text-align:center; line-height: 1.5; margin-top: 219px;} /*-------------------------------------------------------- 스크롤 다운 --------------------------------------------------------*/ .scroll-down {position:fixed; display:flex; flex-direction:column; align-items:center; right:50px; top:55%; transform:translateY(-50%); filter: drop-shadow(0px 1px 2px rgb(0 0 0 / 50%)); z-index: 1;} .scroll-down p {display: flex; flex-direction:column;} .scroll-down p span {line-height:1; font-weight:300; transform:rotate(90deg); font-size:12px; color:white; letter-spacing: 2px;} /* 이동하는 원 */ .scroll-down .circle-rail {position:relative; margin-top:30px; height:150px; width:1px; background:rgba(255, 255, 255, 0.3);} .scroll-down .scroll-down-circle {top: 0px; left:-4px; width:9px; height:9px; background-color:var(--color-main2); border-radius: 50%; position: absolute; animation: circleDown 3s infinite;} @keyframes circleDown{ 0% {transform: translateY(0);} 100% {transform: translateY(150px);} } /* ------------------------------------ 마우스 따라다니는 사운드 버튼 ------------------------------------ */ .sound-follow-btn{position:fixed; display:flex; align-items:center; flex-direction:column; justify-content:center; width:80px; height:80px; border-radius:100px; left:50vw; top:50vh; transform:translate(-50%, -50%); background:rgb(0 0 0 / 70%); transition:opacity .3s ease; will-change:left, top, transform; z-index:9999;} .sound-follow-btn p{margin:0; font-size:12px; font-weight:500; color:#fff;} .sound-follow-btn.sound-on {opacity:0; pointer-events:none;} .sound-follow-btn .feather {stroke:#fff; fill: transparent; stroke-width: 1.5px;} .sound-follow-btn.pulse{animation:pulse-animation 2s infinite;} @keyframes pulse-animation{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)} 70%{box-shadow:0 0 0 20px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} } /*--------------------------------------------------- 사이드 팝업 ---------------------------------------------------*/ .side_pop_wrap {position:fixed; display:flex; align-items:center; left:0; top:25%; z-index: 102; transition:0.6s; transform:translateX(calc(-100% + 50px));/* + 버튼 너비 */ } .side_pop_wrap.open {transform: translateX(0%);} /* 사이드 팝업 버튼 */ .side_popupBtn {display: flex; align-items:center; justify-content: center; cursor: pointer; width:50px; height:160px; background:var(--color-main1); border-top-right-radius:10px; border-bottom-right-radius:10px; z-index:102;} /* 사이드 팝업 버튼 텍스트 */ .side_popupBtn p {display: block; line-height: 1.2; font-size:18px; letter-spacing:-1px; font-weight:500; writing-mode:vertical-rl; color:#fff; cursor:pointer} .side_popupBtn .side_popupBtn-txt {display:flex; flex-direction:column; padding-top: 10px; gap: 10px;} .side_popupBtn .open-txt, .side_popupBtn .close-txt {display:none; color:var(--color-main1)} /*숨겨둠*/ .side_popupBtn .close-txt {display:none;} .open .side_popupBtn .close-txt {display:block; display:none} /*숨겨둠*/ .side_popupBtn .open-txt {display:block; display:none; } /*숨겨둠*/ .open .side_popupBtn .open-txt {display:none;} /* 사이드 팝업 아이콘 */ .side_popupBtn .feather {color: #fff; stroke-width: 2px; cursor:pointer} .open .side_popupBtn .feather {transform: rotate(180deg);} /* 사이드 팝업 이미지 레이어 */ .side_popup_img {display: flex;} .side_popup_img ul {display: flex;} .side_popup_img ul li {} .side_popup_img ul li img {width:380px} /*-------------------------------------------------------- 플로팅 버튼 --------------------------------------------------------*/ #floating-btn {position:fixed; display:flex; align-items:center; gap:20px; right:100px; bottom:50px; z-index: 1;} #floating-btn > div {display: flex; align-items: center; justify-content: center; height:50px; width:50px; border-radius:100px; background:rgb(0 0 0 / 30%); overflow:hidden; transition:0.5s; white-space: nowrap; cursor:pointer} #floating-btn p {cursor:pointer} #floating-btn .feather {width:25px; height:25px; stroke:#fff; stroke-width:1.5px; flex-shrink: 0;} #floating-btn > div p {display:none; color:#fff; padding-left:10px; letter-spacing: -1px;} #floating-btn > div:first-child {background:var(--color-main1);} /* 마우스 hover 시 */ #floating-btn > div:hover {background:#fff; width:150px} #floating-btn > div:hover p {display:inline-block; color:#333; font-weight:500} #floating-btn > div:hover .feather {stroke:#333} .floating-btn-popup-wrap {position:fixed; display:flex; align-items:center; flex-direction:column; justify-content:center; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.85);transform: translateY(-100%); opacity: 0; cursor: default; transition: 1s ease; padding-top: 50px; z-index: 1000; gap: 20px; } .floating-btn-popup-wrap.open { transform: translateY(0%); opacity: 1; } .popup-wrap {display: flex; justify-content: center; gap: 20px; max-width: 1200px; margin: 0 auto; } .popup-btn-wrap {display:flex; gap:50px} .popup-btn-wrap button {background:rgb(255 255 255 / 5%); color: #fff; padding: 10px 80px; transition:0.3s} .popup-btn-wrap button:first-child {padding: 10px 20px;} .popup-btn-wrap button:hover {background:#fff; color:#333} /*------------------------------------------------------- 풀페이지 -------------------------------------------------------*/ #fullpage { width:100%; height:100%;} body #fp-nav {margin-top:initial !important; transform: translateY(-50%);} body #fp-nav ul {display: flex; flex-direction: column; gap: 30px;} body #fp-nav .fp-tooltip {height:100%;} body #fp-nav ul li, body .fp-slidesNav ul li {display: flex; align-items: center; height:30px; margin:0;} body #fp-nav ul li a span, body .fp-slidesNav ul li a span {background:var(--color-main2)} body #fp-nav a span, body .fp-slidesNav a span {background:#fff0; opacity:0.8} body #fp-nav a.active span {width: 18px !important; height:20px !important; margin: -10px 0 0 -9px !important; /*background:url(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/293d3e4b5f436.png) center / cover no-repeat;*/} body .fp-tooltip, body #fp-nav.fp-show-active a.active+.fp-tooltip {font-weight:700; color: var(--color-main1);} body #fp-nav ul li .fp-tooltip {position:relative; display:flex; align-items:center; top:initial; width:initial; opacity:1; overflow:visible; text-shadow: 1px 1px 2px rgb(0 0 0 / 30%); font-size:18px;} body #fp-nav ul li:hover .fp-tooltip, body #fp-nav.fp-show-active a.active+.fp-tooltip {display:flex; align-items: center;} /*--------------------------------------------------- 메인 ---------------------------------------------------*/ #main {background:url(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/83e75db33d20e.jpg) no-repeat center/cover} #main video {width:100%; height:100%; object-fit:cover; object-position:bottom} /* ✅ 메인 3페이지 스타일 */ /* 메인 타이틀 */ #main .main-tit-wrap { position: absolute; display: flex; flex-direction: row; align-items:center; gap: 35px; justify-content: space-between; top:18%; left:13%; z-index: 1;} #main .line-between { position: relative; width: 18vw; height: 1.5px;} #main .line-between::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color:var(--color-main1); opacity: 0; } #main .main-tit-wrap img {opacity:0; width:26vw; filter: drop-shadow(0 0 10px rgba(255,255,255,0.9)) drop-shadow(0 0 30px rgba(255,255,255,0.5)); } /* ✅ 애니메이션 */ #main .main-tit-wrap img, #main .line-between::before {opacity:0;} @keyframes fadeIn {from{opacity:0;} to{opacity:1;}} #main.loading-end .main-tit-wrap img:first-of-type {animation:fadeIn 1s ease forwards; animation-delay:4.0s;} #main.loading-end .line-between::before { animation: fadeIn 1s ease forwards; animation-delay: 4.5s;} #main.loading-end .main-tit-wrap img:last-of-type {animation:fadeIn 1s ease forwards; animation-delay:5.0s;} /*--------------------------------------------------------- 프리미엄 ---------------------------------------------------------*/ #section3 {background:#000} .section-content{display:flex; height: 100%;} .primium_box {position:relative; overflow:hidden; display:flex; align-items:center; justify-content:flex-start; width:100%; transition:1.2s ease;} /* 배경 */ .primium_bg {position:absolute; top:0; left:0; width:0%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; filter:grayscale(1); transition:1s ease; z-index:1} .active .primium_bg {width:100%; transition:transform 1s, filter 1s, width 1s 1s} .bg01 {background-image:url('/assets-pc/img/interior-3.jpg');} .bg02 {background-image:url('/assets-pc/img/interior-4.jpg');} .bg03 {background-image:url('/assets-pc/img/interior-1.jpg');} .primium_box:hover .primium_bg {filter:grayscale(0);transform:scale(1.05);} /*텍스트*/ .primium_txt_box {position:relative;z-index:2;color:#fff; padding-left:5rem; max-width:90%; opacity:0; text-shadow:0 0 10px rgba(0,0,0,0.6); text-align:left; transition:0.8s ease; cursor:default} .active .primium_txt_box {opacity:1; transition-delay:1s} .primium_txt_box h2 {font-size:2rem; font-family:'Noto Serif Display',serif; font-weight:400; margin-bottom:1.5rem;} .primium_txt_box p {font-size:1rem; line-height:1.75; font-weight:200; margin-top:5%;} .box01 .primium_txt_box,.box03 .primium_txt_box {margin-bottom:50%;} .box02 .primium_txt_box {margin-top:70%;} /*----------------------------------------------------- 스와이퍼 섹션3 -----------------------------------------------------*/ #swiper-section3, #swiper-section3 .swiper-section3, #swiper-section3 .swiper-slide {width:100%; height:100vh; overflow:hidden} #swiper-section3 .swiper {position: relative; width: 100%; height:100vh; z-index: 1;} #swiper-section3 .swiper-slide {display:flex; align-items:center; justify-content:space-between; opacity:0; transition:opacity 1s ease; background:#fff;} #swiper-section3 .swiper-slide-active {opacity:1 !important; z-index: 2; } #swiper-section3 .slide-content {width: 100%; height: 100%;display: flex; justify-content: space-around; align-items: center; padding: 80px 150px; position: relative;} /*이미지*/ #swiper-section3 .images {opacity:0; transform: translateY(20px); transition:0.3s; width:35%; aspect-ratio: 1 / 1; z-index:3} #swiper-section3.active .images {opacity:1; transform: translateY(0px); transition:1s; transition-delay:2s;} /* #swiper-section3 .images:before {content:'이미지컷'; position:absolute; font-size:16px; color:#fff; bottom:10px; right:20px;} */ #swiper-section3 .images img {width:100%; height:100%; object-fit:cover;} #swiper-section3 .swiper-slide:nth-child(1) .images img { object-position: 36% center;} #swiper-section3 .swiper-slide:nth-child(3) .images img { object-position: 65% center;} #swiper-section3 .swiper-slide:nth-child(4) .images img { object-position: 70% center;} /*텍스트*/ #swiper-section3 .text-box {width:40%; opacity:0; transform: translateY(-20px); transition: all 1s ease; text-align:center} #swiper-section3.active .text-box {opacity: 1; transform: translateY(0); margin-top:-8%;} #swiper-section3 .title-img {transform: scale(0.7); /*1.2배 확대 */ display: block; margin-left: -10px; margin-bottom: 10px;} #swiper-section3 .title {font-size: 36px; font-weight: bold; padding-bottom:40px; color:#333;} #swiper-section3 .title span {color:var(--color-main1); font-weight:300; font-size: 1.5rem;} #swiper-section3 .bottom_txt-wrap {overflow:hidden} #swiper-section3 .bottom_txt {font-size:20px; transform:translateY(100%); transition:0.8s} #swiper-section3 .swiper-slide-active .bottom_txt {transform:translateY(0%);} /* ✅ active 상태에서 복원되는 값으로 따로 지정 */ #swiper-section3 .images.active .img-left {transform: translateY(0);} #swiper-section3 .images.active .img-center {transform: translateY(0);} #swiper-section3 .images.active .img-right {transform: scale(1);} #swiper-section3 .images.active .img-left, #swiper-section3 .images.active .img-center, #swiper-section3 .images.active .img-right {opacity: 1;} /*가로 세로 라인*/ #swiper-section3 .lines {position:absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; z-index:2;} #swiper-section3 .line-horizontal {position:absolute; height:1px; width: 100%; top:70%; left:0; background:#a1a1a2; transform:scaleX(0); transform-origin:left; transition:0.3s} #swiper-section3.active .line-horizontal {transform: scaleX(1); transition: transform 1s ease 1.2s;} #swiper-section3 .line-vertical {position: absolute; width:1px; height: 0; top:0; left:28%; background:#a1a1a2; transition:0.3s} #swiper-section3.active .line-vertical {height: 100%; transition: height 0.8s ease 0.8s;} /* 페이지네이션 */ #swiper-section3 .swiper-pagination {position:absolute; display:flex; flex-direction:column; gap:30px; top:40%; left:45%; width: fit-content;} #swiper-section3 .swiper-pagination-bullet {background:var(--color-main1); width: 12px; height:12px; border-radius: 0; transform: rotate(45deg); margin: 0 10px;} @keyframes sdb2 { 0% {transform: translate(0, 0); opacity: 0;} 40% {opacity: 1;} 80% {transform: translate(0, 20px); opacity: 0;} 100% {opacity: 0;} } /*--------------------------------------------------- 관심고객 등록 ---------------------------------------------------*/ #reservation {background: url(/assets-pc/img/visit.jpg) center center / cover no-repeat;} .reservation_wrap {width:100%; height:100%; display:flex; justify-content:center; align-items:center} /* 텍스트랩 */ #reservation .txtWrap {position:relative; width:830px;} #reservation .cal_title {font-weight:600; font-size:40px; color:#fff;} #reservation .cal_title b {position:relative; font-size:2.5rem; z-index:1} #reservation .cal_subtitle {font-size:20px; padding-bottom:32px; color:#fff} #reservation .cal_subtitle b {font-weight:500} /* 카드 */ #reservation .scd {position:relative; display: flex; flex-wrap: wrap; gap: 20px; width: 860px;} #reservation .scd li {position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; width: 190px; height: 190px; border:1px solid rgb(170 170 170 / 50%); background: rgb(255 255 255 / 85%);} #reservation .scd li b {font-size:1.5rem; padding: 0 2px; line-height:1.2; } #reservation .scd li:hover b {color:var(--color-main1); transition: 0.3s;} #reservation .scd li span {font-size:1.4rem;} #reservation .scd li.nth1 {background:var(--color-main1); color:#fff} #reservation .scd li.nth1:hover b {color:var(--color-main2)} #reservation .scd li.nth5 {width: 400px; margin-bottom: 0; line-height:0} #reservation .scd li.nth5 span {font-weight:500; padding-top:5px} #reservation .scd li.nth6 {width: 400px; background:var(--color-main2); color:#fff} #reservation .scd li.nth6 b {font-size:28px; letter-spacing:1px; padding-bottom:8px;} #reservation .scd li.nth6:hover {transition-delay: 0ms; transition:0.5s; background:#acce50;} #reservation .scd li.nth6:hover b {color:#fff} /*왼쪽 애니메이션*/ .scd li {opacity: 0; transform: translate(0px, 100px); transition: all 1s ease-in-out;} .active .scd li:nth-child(1) {opacity:1 !important; transform: translate(0px, 0px) !important; transition-delay: 250ms;} .active .scd li:nth-child(2) {opacity:1 !important; transform: translate(0px, 0px) !important; transition-delay: 350ms;} .active .scd li:nth-child(3) {opacity:1 !important; transform: translate(0px, 0px) !important; transition-delay: 450ms;} .active .scd li:nth-child(4) {opacity:1 !important; transform: translate(0px, 0px) !important; transition-delay: 550ms;} .active .scd li:nth-child(5) {opacity:1 !important; transform: translate(0px, 0px) !important; transition-delay: 650ms;} .active .scd li:nth-child(6) {opacity:1 !important; transform: translate(0px, 0px) !important; transition-delay: 750ms;} /*왼쪽 애니메이션 딜레이 초기화*/ .active.fp-completely .scd li:nth-child(1), .active.fp-completely .scd li:nth-child(2), .active.fp-completely .scd li:nth-child(3), .active.fp-completely .scd li:nth-child(4), .active.fp-completely .scd li:nth-child(5), .active.fp-completely .scd li:nth-child(6) {transition-delay: 0ms;} /*오른쪽 텍스트랩*/ .right_tit {display:flex; flex-direction:column; align-items: center; text-align: center; margin-left:8rem; padding-top:100px} .right_tit p {font-size:24px; line-height:1.5; opacity: 0; color:#fff} .right_tit p b {font-size: 28px; font-weight: 600; line-height:1.75; color:var(--color-main2)} .right_tit>div {position:relative; width:1px; height:5.25rem; margin:2.25rem auto 3.125rem;} .right_tit>div:after {content:''; position:absolute; width: 100%; height: 100%; background-color:#fff; left:0; top:0; height:0;} .right_tit img {opacity: 0; width:180px; margin-bottom:20px;} /*오른쪽 애니메이션*/ .active .right_tit p { transition: 1s 0.5s; opacity: 1; } .active .right_tit>div:after { transition: 0.8s 0.5s; height: 100%; } .active .right_tit img {transition: 1s 1.5s; opacity: 1;} /*--------------------------------------------------- 풀페이지 푸터 ---------------------------------------------------*/ #footer {background:#f1f1f1;} #footer .fp-tableCell {display:flex; flex-direction: column;} /* 풀페이지용 */ /*소구점 밴드 바, 숨겨둠*/ #footer .footer_band {height:50px; background:#dbdbdb; display:none} /*숨겨둠*/ #footer .footer_band_wrap {width:80%; display:flex; justify-content:space-between; align-items:center; margin:0 auto; height:100%;} #footer .footer_band_wrap p {font-weight: 700; letter-spacing:5px} #footer .footer_band_wrap img {width:240px;} /*푸터 내부 콘텐츠*/ #footer .inner {display: flex; width:80% !important; margin:0 auto; padding:40px 0 50px; color:#333; height:85%} #footer .inner_left {display: flex; flex-direction: column; width: 60%; cursor:default} #footer .inner_left .name-logo {width: 200px; margin-bottom: 20px;} #footer .inner_left .name {font-size:24px; font-weight:700; padding-bottom:10px; display:none} /*숨겨둠*/ #footer .inner_left table {font-size:16px; font-weight:400; margin-bottom:20px} #footer .inner_left tr td:nth-child(1) {width:120px; font-weight:500; line-height:1.75} #footer .inner_left .p-list {width:calc(100% + 700px); display:flex; flex-direction: column;} #footer .inner_left p {font-size:13px; font-weight:300; line-height:1.5; opacity:0.8} #footer .inner_left .copyright {padding-top:18px} #footer .inner_right {display:flex; justify-content: space-between; align-items:flex-end; flex-direction: column; padding: 10px 0 20px; width:40%;} #footer .inner_right .ft_number {font-size: 24px} #footer .inner_right .ft_number b {font-size:2.5rem; margin-left: 10px; position: relative; top: 2px; font-family: 'Montserrat';} #footer .inner_right .info {cursor:pointer} #footer .inner_right .info img {width:100%;} /* 해상도 */ /* 울트라 와이트 해상도 */ @media (min-width: 3440px) { } /* QHD해상도 */ @media (min-width: 2560px) { } /*FHD해상도 이상*/ @media (min-width: 1921px) { } /* WSXGA해상도 */ @media (max-width: 1681px) { } /*LAPTOP 해상도*/ @media (max-width: 1441px) { } /* 메인 모바일 */ @media (max-width: 991px) { #intro_loading, #wrap, #cursor_circle, .sound-follow-btn, .bgm-toggle {display:none !important} }