/******************************************************************************************************************************************** common *********************************************************************************************************************************************/ * {box-sizing:border-box; margin:0; padding:0; border:0; white-space:nowrap; -webkit-tap-highlight-color: transparent; outline: none;} html {width:100%; max-width:2560px; min-width:1440px; margin:0 auto; scroll-behavior: smooth; font-size:16px} html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Apple SD Gothic Neo,Noto Sans KR,sans-serif;color:#111;background:#fff} html,body,div,span,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,blockquote,p,address,pre,cite,form,fieldset,table,th,td,legend,label,button {font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", "Malgun Gothic","맑은 고딕", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size-adjust: 0.5; font-size:16px; font-display: swap;} body {width:100%; height:100%; margin:0 auto; -webkit-text-size-adjust:none; font-family:"Pretendard Variable"} a, button {cursor:pointer; background:transparent} a {display: block; text-decoration:none; white-spafce: nowrap; color:inherit; height: fit-content; text-decoration:none;color:inherit} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal; line-height:1.5} fieldset,img,abbr,acronym,label {border:0 none} blockquote:before,blockquote:after,q:before,q:after {content:''} ol,ul,dl {list-style:none} hr {display:none} label,select,input,textarea {vertical-align:middle} img {display:block; width:100%; height:auto; max-width:100%; display:block} .container{max-width:var(--maxw); margin:0 auto;padding:0 var(--gap)} .HIDDEN {display:none !important;} /******************************************************************************************************************************************** 폰트 *********************************************************************************************************************************************/ @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } /******************************************************************************************************************************************** 기타 설정 *********************************************************************************************************************************************/ /* 공통 설정 */ :root { --color-main1: #2d6b87; --color-main2: #01151c; --color-main3: #cda84d; --color-main4: #2f7c90; --color-yellow: #ffde00; --pc-header-height: 80px; --mo-header-height: 13vw; --maxw:60rem; --gap:1rem; --border:#eee; --muted:#666; --bg:#fff; --bg2:#fafafa; --pc-gnb-width:60rem; } svg {stroke-width:0;} video {width: 100%; height:auto} /* 해상도 맞춤 */ /* 모바일, 991px이하 */ @media (max-width: 991px) { } /* 울트라 와이트 해상도 */ @media (min-width: 3440px) { } /* QHD해상도 */ @media (min-width: 2560px) { } /* WSXGA해상도 */ @media (max-width: 1681px) { header .logo {left:10px !important} header .number {right:10px !important;} } /*LAPTOP 해상도*/ @media (max-width: 1441px) { } /******************************************************************************************************************************************** 내부 컨텐츠 *********************************************************************************************************************************************/ @font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.woff') format('woff'); font-weight: normal; font-style: normal; } html {font-size: 20px;} * {margin:0; padding:0; line-height:1.5; font-family: 'Paperlogy', sans-serif;} div, h1, h2, h3, h4, h5, h6, span, p, ul, li {margin:0; padding:0; cursor:default; font-family: 'Paperlogy', sans-serif;} ul, li {list-style:none} :root { --color-main1: #14394a; --color-main2: #01151c; --color-main3: #cda84d; --color-yellow: #ffde00; --mo-header-height:15vw; --mo-header-quick-height:9vw; } .feather {stroke-width:0; color:currentColor} /* PC 헤더 위치용 첫섹션 상단 공백, 메인 코드에 첫섹션 상단 공백 초기화 필요 */ .section_first {padding-top: 100px;} /* 관리자 미리보기 */ .preview_mode {position:absolute;} /* MO 헤더 위치용 첫섹션 상단 공백 */ @media (max-width: 991px) { .mobile_section_first {margin-top:calc(var(--mo-header-height) + var(--mo-header-quick-height))} .modal .mobile_section_first {margin-top:0;} /*모달창 여백 제거*/ } #header {position:fixed; top:0; left:0; width:100%; z-index:1000;} #header .header_wrap {position:relative; display:flex; align-items:center; max-width:2560px; margin:0 auto; z-index: 3;} /* 💻PC, 990px 이상일 시 */ @media(min-width:991px){ #header {height:80px;} #header .header_wrap {justify-content:space-between; height:100%; min-width:320px; padding: 0 80px;} /*로고*/ #header .logo {display:block; width:150px; margin-top:-0.8%;} #header .logo img {width:100%;} #header .logo .logo_color {display:none} #header .logo .logo_white {display:block} #header .logo .logo_mo {display:none} /*pc 대표번호 */ #header .pc-number {display:flex; align-items:center; gap:20px; padding-right:20px; margin-right:70px;} #header .pc-number span {display: flex; align-items: center; font-size:24px; color:#fff; font-weight:500; transition:0.5s; /*text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);*/} #header .pc-number .feather {stroke-width:2px; width:20px; transition:0.5s; /*filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));*/} /*헤더 라벨*/ #header .pc-number .label-txt {display:flex; align-items:center; justify-content:center; border:1px solid #fff; border-radius:100px; transition:0.5s; padding:2px 0px; min-width:200px; text-align:center;} #header .pc-number .label-txt span {font-size:1.3em; font-weight:500; color:#fff; transition:0.5s} #header .pc-number .label-txt span.hover {position:absolute; opacity:0} #header .pc-number .label-txt:hover {background:var(--color-main1); border-color:var(--color-main1)} #header .pc-number .label-txt:hover span {color:#fff !important} #header .pc-number .label-txt:hover span.inherit {opacity:0;} #header .pc-number .label-txt:hover span.hover {opacity:1;} /*메뉴버튼*/ #header .menu_btn {position:absolute; display: flex; flex-direction: column; justify-content: space-around; padding:10px; right:100px; top:50%; transform:translateY(-50%); width:44px; height:44px; transition:1s ease; background:transparent; border-radius: 100px; z-index:1} #header .menu_btn div {left: 0; width: 100%; height:2px; background-color: #fff; cursor:pointer} #header .menu_btn div:nth-child(1) {transform-origin: top left; transition: transform 0.2s ease;} #header .menu_btn div:nth-child(3) {bottom: 0; transform-origin: bottom left; transition: transform 0.2s ease;} /*메뉴버튼 활성화*/ #header .menu_btn.active {background:transparent;} #header .menu_btn.active div:nth-child(1) {transform: translateX(4px) rotate(45deg); background:#fff} #header .menu_btn.active div:nth-child(2) {opacity:0} #header .menu_btn.active div:nth-child(3) {transform: translateX(4px) rotate(-45deg); background:#fff} #header .m_number, #header .m_registration, #header #menu_btn_close {display:none} /*nav*/ #header .nav {position:fixed; top:0; left:0; display:flex; justify-content:space-between; width:100%; height:100vh; transform:translateY(-100%); /* 위로 숨김 */ transition:1s ease; background:#fff; overflow:hidden; z-index:1;} #header .nav.open {transform: translateY(0); /* 내려옴 */} #header .nav .gnb {position: relative; z-index: 3; /* 메뉴는 배경 위 */} #header .nav .gnb .your-left-img {z-index: 1; /* 애니메이션 이미지는 맨 뒤 */} #header .nav .gnb,#header .nav .gnb-bg-wrap { flex: 1 1 50%; max-width: 50%; height: 100%; position: relative; z-index: 2; /* 우측 배경 위로 */} #header .nav .gnb-bg-logo {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:220px; z-index:1} #header .nav .gnb-bg {width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.3); transition:0.5s} #header .nav.open .gnb-bg {opacity:1; transform:scale(1); transition:1.5s ease 0.5s} /*gnb*/ #header .gnb {display: flex; flex-direction: column; justify-content: center; width: 100%; background:var(--color-main1)} #header .gnb > li {position:relative; display:flex; width:100%; transition:0.3s; padding: 20px 0 20px 140px;} #header .gnb > li:hover {background: rgba(26, 24, 24, 0.2);} #header .gnb > li > a {display:flex; align-items:center; transition:0.3s; width:22%; cursor:default} #header .gnb > li > a p {position:relative; font-size:22px; color:#fff; width: fit-content;} #header .gnb > li > a p:before {content:''; position:absolute; bottom:0; width:0; height:2px; background:#fff; transition:0.5s} #header .gnb > li:hover > a p:before {width:100%} #header .gnb > li > a:hover {transform:scale(1.05);} /*gnb 상단 꾸밈글, 하단 대표번호 */ #header .gnb > li.pc-gnb-top {color:#999; font-size:20px; flex-direction: column;} #header .gnb > li.pc-gnb-top b {color:#fff; font-size:32px; font-family: "Marcellus", serif; font-weight:400} #header .gnb > li.pc-gnb-bottom {opacity: 0.8; font-family: 'Montserrat';} #header .gnb > li.pc-gnb-bottom p {display:flex; align-items:center; color:#fff; font-size:28px; font-weight:500;} #header .gnb > li.pc-gnb-bottom .feather{fill:#fff} /* gnb > sub */ #header .sub {display:flex; align-items:center; gap: 0 50px; width:60%; opacity:0; visibility:hidden; transition:1s ease; } #header li:hover .sub {opacity:1; visibility: visible;} /* 확장 */ #header .sub > li a {color:#fff; opacity:0.9; font-size:18px; transition:0.3s ease} #header .sub > li:hover a {font-weight:500; opacity:1} /* 모바일용 숨김 */ #header .gnb > li.m_number, #header .gnb > li.m_registration, #header .gnb > li.menu_btn, #header #menu_btn_close, #header .m-number, .mo-top-quick {display:none} /* 헤더 - 풀페이지 섹션 로고 색상 반전 */ #header .logo-reverse .logo_color {display:block} #header .logo-reverse .logo_white {display:none} /* 헤더 - 풀페이지 섹션 색상 반전 */ #header .header-reverse .pc-number span {color:#333} #header .header-reverse .pc-number .feather {stroke:#333} #header .header-reverse .label-txt {border:1px solid #333} #header .header-reverse .label-txt span {color:#333} #header .header-reverse .menu_btn div {background:#333} /* 헤더 - 서브페이지 */ #header .sub-page {background:rgb(0 0 0 / 30%);} #header .sub-page .logo_color {display:none} #header .sub-page .logo_white {display:block} } /* 📱MO 990px 이하일 시 */ @media(max-width:991px){ #header {position:fixed; height:var(--mo-header-height); width:100%; top:0; left:0; background:var(--color-main1);} #header .header_wrap {justify-content:center; height:100%; min-width:320px;} /* mo-메뉴버튼 */ #header .menu_btn {position:absolute; left:4vw; top:50%; transform: translateY(-50%); width:28px; height:22px;} #header .menu_btn div {position:absolute;bottom:0; left:0; width:100%; height:2px; background:#fff; border-radius:4px; cursor: pointer} #header .menu_btn div:nth-child(1) {top:0; transform-origin:top left; transition:transform 0.2s ease;} #header .menu_btn div:nth-child(2) {top:9px} #header .menu_btn div:nth-child(3) {transform-origin:bottom left; transition:transform 0.2s ease;} #header .menu_btn.active div {position:absolute;} #header .menu_btn.active div:nth-child(1) {transform: rotate(45deg) } #header .menu_btn.active div:nth-child(2) {opacity:0} #header .menu_btn.active div:nth-child(3) {bottom: 0; transform: rotate(-45deg)} /* mo-로고 */ #header .logo {display:block; width:32vw; margin-right:2vw} #header .logo img {width:100%;} #header .logo .logo_mo {display:block} /* mo-대표번호 */ #header .m-number {position: absolute; right: 1vw; } #header .m-number p {display:flex; align-items: center; justify-content: center; background:#fff; padding: 0 8px; border-radius:99px; height:100%; font-weight:700; font-size:4vw; color:#333; cursor:pointer} #header p .feather {stroke-width:0px; width: 4vw; color:var(--color-main1); fill:var(--color-main1);} #header .m-number img {height:8vw; width:28vw;} /* mo-gnb */ #header .gnb {position: absolute; display: block; left:0; width:100%; height:100%; transform: translateX(-100%); transition:.3s ease; background: #383A38; padding:0 4vw 60vw 4vw; overflow-y:auto; z-index: 99;} #header .nav.open .gnb { /* ✅ .nav에 open 붙으면 열리게 */transform: translateX(0%);} #header .gnb li a {display:block; text-align:left; color:#fff; font-size:5vw; padding:3vw 8vw;} #header .gnb li a p {font-weight:500; cursor:pointer; font-size:24px;} #header .gnb > li {position: relative; border-bottom:1px solid rgba(200, 185, 175, 0.4)} #header .gnb > li:after {content:none !important;} #header .sub {position:relative; display:none; opacity:1; visibility: visible; padding: 0 20px; width:100%; transition:0s; transform: translateY(0px); background: rgb(0 0 0 / 10%);} #header .sub.active {display:block} #header .sub li a {color:#eaeaea; padding:3vw 4vw} /* mo-gnb 하단 리스트 */ #header li.m_number {margin-top:20px; background: #4B5055;} #header li.m_number a {display:flex; justify-content: center; align-items: center;} #header li.m_number .feather {fill:#fff; width:5vw} #header li.m_registration {background:var(--color-main1); margin-top:10px;} #header #menu_btn_close {top: auto; transform:none; left: inherit; width: inherit; height:auto; background:#222; margin-top: 10px; border-radius: 10px; cursor:pointer;} #header .m_number, #header .m_registration, #header #menu_btn_close {border-bottom:none !important; font-weight:600} #header li.m_number:after, #header li.m_registration:after, #header #menu_btn_close:after {display:none} /* 오른쪽 화살표 숨김 */ #header li.m_number a, #header li.m_registration a, #header #menu_btn_close a {text-align:center !important;} /*모바일 상단 퀵버튼*/ .mo-top-quick {display:block; position:fixed; top:var(--mo-header-height);width:100%; height:var(--mo-header-quick-height); overflow: hidden; cursor:pointer; z-index:1} .mo-top-quick img {width:100%; height:100%; object-fit:cover} /* PC용 숨김 */ #header .logo .logo_color, #header .logo .logo_white, #header .pc-number, #header .gnb-bg-wrap, #header .gnb-bg, #header .pc-gnb-top, #header .pc-gnb-bottom {display:none} } /****************************************해상도 맞춤****************************************/ /* 991px이하 */ @media (max-width: 991px) { .headerWrap {display:none;} /*PC 헤더 숨김*/ .header.mob {display: flex; justify-content: center; align-items: center;} } /* 울트라 와이트 해상도 */ @media (min-width: 3440px) { } /* QHD해상도 */ @media (min-width: 2560px) { } /* WSXGA해상도 */ @media (max-width: 1681px) { } /*LAPTOP 해상도*/ @media (max-width: 1441px) { } /* 홈-pc .home_pc {position:relative; width:100%; height:calc(100vh - var(--pc-header-height));} .home_pc .home_bg {position:absolute; width:100%; height:100%; object-fit: cover; left:0;} .home_pc .home_title {position: absolute; background: rgb(255 255 255 / 80%); min-width: 380px; padding: 40px 30px; border-radius: 20px; text-align:center; cursor:default; gap: 1.5rem; display: flex; flex-direction: column; top: 30%; left:68%; z-index: 1;} .home_pc .home_title .sub_title {font-size:1.25rem; font-weight: 700; color: var(--color-main1);} .home_pc .home_title .main_title {font-weight: 700; font-size: 1.75rem; line-height: 1.2;} .home_pc .home_title .main_title span {font-size: 2.5rem;} .home_pc .home_title img {width: 200px; margin: 0 auto;} .home_pc .home_title .txt_box {width:100%; background-color: var(--color-main1); font-weight: 700; color: #fff; font-size: 1.75rem; font-family: 'GmarketSansBold'; padding: 16px 0; border-radius: 8px; }*/ /* 홈-모바일 */ .home_mo {display:flex; flex-direction: column; width:100%; padding-top: calc(var(--mo-header-height));} .home_mo #db_box {background-color: color-mix(in srgb, var(--color-main1) 60%, black 40%); padding: 10px;} .home_mo #db_box iframe {width:100%;} /* 모바일 하단 퀵버튼 */ /* 퀵버튼 항상 최상단 */ /*991px이상에서 숨김*/ @media(min-width:991px){ .footer .mo_quick_bottom {display:none;} } @media(min-width:991px){ .home_mo {position:absolute; width: 340px; margin:50px; top:150px; height:70%; overflow:scroll; overflow-x: hidden; border-radius: 20px; border: 8px solid #111; background:#eee; box-shadow: rgba(255, 255, 255, 0.8) 0px 5px 15px; display:none} /* PC에서 모바일 보이게(숨겨둠) */ .home_mo::-webkit-scrollbar {width:4px;} .home_mo::-webkit-scrollbar-track {background: transparent; margin: 0px; } .home_mo::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0.5); border-radius: 4px;} } @media(max-width:990px){ .home_pc {display:none} .home_mo {display:flex} .home_mo #db_box {padding: 2.5vw;} /* 모바일 하단 퀵버튼 */ .footer .mo_quick_bottom {position:fixed; display: block; bottom:-1px; left:0; width:100%; z-index:1000;} .footer .mo_quick_bottom.arni {} .footer .mo_quick_bottom.arni .mo_quick_bottom_btn img {width:20vw; height:auto; cursor:pointer} .footer .mo_quick_bottom.arni .mo_quick_bottom_Bubble {position:absolute; width:75vw; right:0vw; bottom: 15vw; pointer-events: none; } /* ✅ 하단 퀵버튼 사이즈 조절 */ } /******************************************************************************************************************************************** common *********************************************************************************************************************************************/ @media(min-width:991px){ page-view {min-height: calc(100vh - 30rem);position: relative;display: block;} } @media(max-width:990px){ page-view {position: relative; display: block; min-height:400px; } } /******************************************************************************************************************************************** 헤더 *********************************************************************************************************************************************/ /* 💻 PC 991px 이상일 시 */ @media(min-width:991px){ /* 헤더 */ .site-header {position:fixed; top:0; width:100%; background: rgb(0 0 0 / 8%);; height: var(--pc-header-height); transition:0.3s 0.4s; z-index:50} .site-header:hover {background:#fff;transition:0s 0s} header .bar{display:flex; align-items:center; justify-content:center; max-width: 1400px; margin: 0 auto; height:var(--pc-header-height)} /*로고*/ header .logo {position:absolute; left:10rem; width:11rem} header .logo .header-logo-white {display: none;} header .logo img {width:100%} /*gnb*/ .site-header .bar .nav { display:flex; width: 100%; max-width: var(--pc-gnb-width); height: var(--pc-header-height); } header .nav a {display: flex; align-items: center; justify-content: center; width:100%; text-align: center; height: 100%; } header .nav a:hover {color: var(--color-main1);} header .nav a.active {font-weight:700;} /*대표번호*/ header .number {position:absolute; right:10rem; white-space:nowrap; background-color: var(--color-main1); border-radius: 100px; padding: 6px 22px;} header .number .feather {width: 22px; height: 22px; margin-top: 3px;} header .number p {display: flex; align-items: center; gap:5px; font-weight: 600; font-size:1.5rem; color:#fff; } /* 메가 드롭다운 */ .mega-wrap {position:relative; z-index: 1;} .mega {position:absolute; left:0;right:0;top:100%; background:#f5f5f5; max-height:0; overflow: hidden; transition:0.5s;} .site-header:hover .mega {max-height: 1000px; border-bottom:1px solid var(--border); } .mega .inner {margin:0 auto; display:grid; max-width: var(--pc-gnb-width);} .mega .col {border-left: 1px solid #ebebeb;} .mega .col:last-child {border-right: 1px solid #ebebeb;} .mega .col li {width: 100%;} .mega .col h4{margin:0 0 8px;font-size:14px;color:#333; display: none;} /*1뎁스 카테고리명 숨김*/ .depth2,.depth3{list-style:none;padding:0;margin:0} .depth2>li:hover {background-color: var(--color-main1); color:#fff} .depth2>li a {padding:16px 12px} .depth3 {margin-top:6px;border-left:2px solid #ddd; display:none} /*✅ 3뎁스 숨겨둠*/ .depth3 a{font-size:14px;color:#444} /*백그라운드*/ .site-header .header-bg {background: #000; height: 100vh; opacity: 0; pointer-events: none; transition: 0.3s;} .site-header:hover .header-bg {opacity:0.5; } /*모바일용 숨김*/ .mo_gnb, .mo_quick_top {display: none;} /*----------------------------------------------------- 🎨 인트로 스타일 -----------------------------------------------------*/ #pc_intro_loading {position:fixed; display:flex; width:100%; height:100%; background:#fff; animation:intro-fadeOut 1s ease forwards 3s; pointer-events:none; z-index: 1001;} @keyframes intro-fadeOut { 0% {opacity: 1; visibility: visible;} 99.9% {opacity: 0; visibility: visible;} 100% {opacity: 0; visibility: hidden;} } #pc_intro_loading > div {width:100%; height:100%; background:var(--color-main1); transform-origin: bottom; animation: shrinkHeight 1.5s ease forwards; pointer-events:auto;} #pc_intro_loading > div:nth-child(1) {animation-delay: 2.7s;} #pc_intro_loading > div:nth-child(2) {animation-delay: 2.6s;} #pc_intro_loading > div:nth-child(3) {animation-delay: 2.5s;} @keyframes shrinkHeight { to {height: 0%;} } /*-- 텍스트 랩 --*/ .intro-txt-wrap {display:flex; flex-direction:column; align-items: center; justify-content: center; color:#fff; text-align:center; height:100vh; animation: intro-fadeIn 1.5s ease forwards 0.5s; opacity:0} .intro-txt-wrap span {opacity:0.8; font-size:26px; font-weight:500} .intro-txt-wrap p {display: flex; flex-direction: column; align-items: center;font-size:36px; font-weight:500;} .intro-txt-wrap p:after {content:''; position:relative; width:1px; height:50px; background:#fff; margin:20px 10px;} .loading_logo {width:170px; padding-bottom:0px;} @keyframes intro-fadeIn { to {opacity: 1;} } /* 모바일 숨김 */ @media (max-width: 991px) { #pc_intro_loading { display: none; } } #wrap {width:100%; min-width:1400px; max-width: 2560px; border:0; margin:0 auto; overflow:hidden;} /* 아임웹 - SEO 입력한 헤더 상단 여백값(속지용 헤더 여백) 메인만 예외 */ .section_first {padding-top:0px !important;} /* 커서 */ #cursor_circle {position: fixed; left:8px; top:8px; width:8px; height:8px; border-radius:50%; pointer-events: none; background:var(--color-main4); transition:0.1s; z-index: 9999999999;} /*---------------------------------------------------------- 스크롤 다운 ----------------------------------------------------------*/ .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-main3); border-radius: 50%; position: absolute; animation: circleDown 3s infinite;} @keyframes circleDown{ 0% {transform: translateY(0);} 100% {transform: translateY(150px);} } /*----------------------------------------------------- 사이드 팝업 -----------------------------------------------------*/ .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:20px; letter-spacing:0px; 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 img {width:380px} /*---------------------------------------------------------- 플로팅 버튼 ----------------------------------------------------------*/ #floating-btn {position:fixed; display:flex; align-items:center; gap:20px; left: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:var(--color-main3); 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:last-child {background:var(--color-main3);} /* 마우스 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: 9999; 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} .popup-wrap {display: flex; justify-content: center; gap: 20px; max-width: 1200px; margin: 0 auto; } .popup-wrap-close-btn {background: var(--color-main1); font-weight: 500; color: #fff; padding: 10px 80px; } .right_modal{position:fixed; display:flex; align-items:center; gap:20px; right:100px; bottom:50px; z-index: 1; width:20%; transition: opacity 0.5s ease;} .right_modal { animation: bounce 3.5s ease-in-out infinite; animation-delay: 2s; /* 처음 3초 후 시작 */ } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); /* 위로 튀는 높이 */ } 60% { transform: translateY(-7px); } } /*--------------------------------------------------------- 풀페이지 ---------------------------------------------------------*/ #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 {position:relative;width:100%;height:100vh;background:url(../img/main_bg.jpg) no-repeat center/cover;z-index:1;} #main video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;visibility:visible;} #main .tit-wrap {position:absolute;width:1400px;top:15%;left:54%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:20px;text-align:right;z-index:2;} #main .tit-wrap img.main-tit {width:auto;max-width:45%;filter:drop-shadow(0px 3px 10px rgb(255 255 255 / 40%));opacity:0;transform:translateY(40px);transition:all 1s ease;} #main.loading-end .tit-wrap img.main-tit:first-child {opacity:1;transform:translateY(0);transition-delay:0.8s;} #main.loading-end .tit-wrap img.main-tit:nth-child(2) {opacity:1;transform:translateY(0);transition-delay:1.8s;} #main .tit-wrap img.main-tit:first-of-type {width:800px;margin-right:-2.2%;} #main .tit-wrap img.main-tit:nth-of-type(2) {width:200px;margin-top:0.3%;margin-right:-1%;} #main .main-bottom {position:absolute;bottom:0;right:12%;z-index:10;} #main .main-bottom img.main-tit {width:160px;opacity:0;transform:translateY(40px);transition:all 1s ease;} #main.loading-end .main-bottom img.main-tit {opacity:1;transform:translateY(0);transition-delay:2.7s;} /*------------------------------------------------------- 스와이퍼 섹션 -------------------------------------------------------*/ #swiper-section, #swiper-section .swiper-section, #swiper-section .swiper-slide {width:100%; height:100vh; overflow:hidden} #swiper-section .swiper-pagination {display: flex; margin-bottom: 60px; width: fit-content; padding-left: 255px; } #swiper-section .swiper-pagination-bullet {display: flex; flex-direction: column-reverse; align-items: flex-start; width: 100px; height: 2px; border-radius: 0; background:#fff; opacity: 0.5;} #swiper-section .swiper-pagination-bullet-active {opacity: 1} #swiper-section .swiper-pagination-bullet span {color:#fff; padding-bottom: 5px;} /*--------------------------------------------------------- 영상 메인 ---------------------------------------------------------*/ #video-main {background:#fff; width: 100%; height:100vh;} #video-main .bgWrap {position:relative; width: 100%; height:100%; pointer-events:none} #video-main .bgWrap video {width:100%; height:100%; object-fit:cover; } /*마우스 따라다니는 사운드 버튼*/ #video-main .video-sound-btn {position:fixed; display:flex; align-items: center; flex-direction: column; justify-content: center; transform:translate(-50%, -50%); transition: top 0.1s ease-out, left 0.1s ease-out, opacity 0.3s ease; background:var(--color-main1); width:80px; height:80px; border-radius:100px} #video-main .video-sound-btn .feather {width:32px; height:32px; stroke:#fff; stroke-width:1.8px; flex-shrink: 0;} #video-main .video-sound-btn p {font-size:14px; font-weight:600; color:#fff;} #video-main .video-sound-btn.sound-on {opacity: 0 !important; pointer-events:none !important} .pulse {animation: pulse-animation 2s infinite;} @keyframes pulse-animation { 0% {box-shadow: 0 0 0 0px #fff;} 100% {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);} } /*--------------------------------------------------------- 메인 2페이지 ---------------------------------------------------------*/ #img-main1 {} #img-main1 .img-bgWrap {transform:scale(1); transform-origin:center center; transition:3s; transition-delay:1s; width:100%; height:100%} #img-main1 .img-bgWrap video {width:100%; height:100%; pointer-events:none; object-fit:cover} #img-main1 .img-bgWrap img {width:100%} #img-main1 .img-bg-titWrap {position:absolute; display:flex; flex-direction: column; top:28%; left: 13%; gap:50px;} #img-main1 .img-bg-titWrap p {color:#fff; font-weight: 500; font-size:28px; text-align: center;} #img-main1 .img-bg-titWrap img {width:500px} /*애니메이션*/ #img-main1 .img-bg-titWrap > * {opacity: 0; transform: translateY(-50px); transition: 0.7s ease;} #img-main1.swiper-slide-active .img-bg-titWrap > *:nth-child(1) {opacity: 1; transform: translateY(0); transition-delay: 1s;} #img-main1.swiper-slide-active .img-bg-titWrap > *:nth-child(2) {opacity: 1; transform: translateY(0); transition-delay: 1.6s;} #img-main1.swiper-slide-active .img-bgWrap {transition: transform 1s ease-out 2.3s; /* 2.3초 후 부드럽게 올라오게 */ transform: translateY(-20px); /* 아래에서 위로 20px 올라오는 효과 */} /*--------------------------------------------------------- 메인 3페이지 ---------------------------------------------------------*/ #img-main2 {} #img-main2 .img-bgWrap {width:100%; height:100%; transform: scale(1); transform-origin: center center; transition:3s;} #img-main2 .img-bgWrap img {bottom:0; left:0; width:100%; height:100%; pointer-events:none; object-fit:cover} #img-main2 .img-bgWrap video {width:100%; height:100%; pointer-events:none; object-fit:cover} #img-main2 .img-bg-titWrap {position: absolute; display:flex; flex-direction:column; align-items:end; top:21%; right:-9%;transform: translate(-50%, -50%);} #img-main2 .img-bg-titWrap .main-tit {width:700px; margin-top:-5px; margin-right:-17px;} #img-main2 .img-bg-titWrap .main-tit2 {width:200px; margin-top:10px;} /*애니메이션*/ #img-main2 .img-bg-titWrap > * {opacity: 0; transform: translateY(30px); transition: 0.8s ease;} #img-main2.swiper-slide-active .img-bg-titWrap > *:nth-child(1) {opacity: 1; transform: translateY(0); transition:1s ease 2.2s;} #img-main2.swiper-slide-active .img-bg-titWrap > *:nth-child(2) {opacity: 1; transform: translateY(0); transition:1s ease 3s;} #img-main2.swiper-slide-active .img-bg-titWrap > *:nth-child(3) {opacity: 1; transform: translateY(0); transition-delay: 3.8s;} #img-main2.swiper-slide-active .img-bgWrap { transition-delay: 2.3s; transform: scale(1.0);} /* -------------------------------------------------------- 프리미엄 -------------------------------------------------------- */ #premium {width: 100%; height: 100%;} #premium .flex_box {display:flex; flex-direction: row-reverse; height: 100%;} #premium .left_slide {width:40%; height: 100%;} #premium .left_slide .premium_left {height: 100%; overflow: inherit;} /*썸네일 이미지*/ #premium .left_slide .swiper-slide {width: 100%; height: 100%; filter: brightness(0.5);} #premium .left_slide .swiper-slide img {width: 100%; height: 100%; object-fit:cover;} /* 페이지네이션 */ #premium .left_slide .swiper-pagination {width: auto; left: inherit; display: grid; grid-template-columns: 1fr 1fr; bottom: inherit; left: -15%; transform: translate(0%, -50%); top:50%;} #premium .left_slide .swiper-pagination-bullet {width: 130px; height: 180px; background:#fff; border-radius: inherit; opacity: 1; margin: 0 !important; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box;} #premium .left_slide .swiper-pagination-bullet img {width:55px} #premium .left_slide .swiper-pagination-bullet p {color:#555; margin-top: 25px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; cursor:pointer} #premium .left_slide .swiper-pagination-bullet-active {background: #eee !important;} #premium .left_slide .swiper-pagination-bullet-active p {font-weight: 700;} #premium .left_slide .swiper-pagination-bullet:nth-child(1) {border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #premium .left_slide .swiper-pagination-bullet:nth-child(2) {border: 1px solid #e1e1e1; border-left: none;} #premium .left_slide .swiper-pagination-bullet:nth-child(3) {border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} #premium .left_slide .swiper-pagination-bullet:nth-child(4) {border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;} #premium .left_slide .swiper-pagination-bullet:nth-child(5) {border-right: 1px solid #e1e1e1;} #premium .left_slide .swiper-pagination-bullet:nth-child(6) {border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;} /*오른쪽*/ #premium .right_slide {width:60%; height: 100%; background: #f3f3f3; display: flex; align-items: center;} #premium .right_slide .swiper {width: 72%;} #premium .right_slide .swiper-slide {display: flex; flex-direction: column; text-align:center; gap:16px; pointer-events: none;} #premium .right_slide h4 {font-size:40px; font-weight: 900; text-transform: uppercase; letter-spacing: 5px; padding:20px 0; font-family: "Marcellus", serif;} #premium .right_slide .img-frame {width:40%; aspect-ratio: 1 / 1; margin:0 auto; border-radius:10000px; overflow:hidden} #premium .right_slide img {width:100%; height:100%; object-fit:cover} #premium .right_slide h5 {position:relative; font-size:2.5rem; font-weight:700; padding-top:40px; margin:0 auto; width:fit-content; opacity: 0; transition: all ease 0.8s;} #premium.active .right_slide h5 {opacity:1; transition-delay:1s; font-family: 'Paperlogy', sans-serif; color:var(--color-main4)} #premium .right_slide h5:before {content: ''; position: absolute; width:20px; height:20px; top:52px; left: -8px; opacity: 0.5; background:var(--color-main3); border-radius: 20px; z-index: -1;} #premium .right_slide h5 span {font-size: 15px; display: inline-block;} #premium .right_slide p {font-size:1.2rem; color: #555; margin: 0px 0; line-height:1.4; font-family: 'Pretendard', sans-serif} #premium .right_slide p span {font-size: 14px; display: inline-block;} #premium .right_slide small {font-size: 14px;} /*오른쪽 버튼*/ #premium .right_slide .swiper-button-next, #premium .right_slide .swiper-button-prev {width: 80px; height: 49px;} #premium .swiper-button-next {right: 5%} #premium .right_slide .swiper-button-next:after {content: ""; background: url(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/ed8974f351598.png); width: 80px; height: 49px;} #premium .right_slide .swiper-button-prev {left: 5%;} #premium .right_slide .swiper-button-prev:after {content: ""; background: url(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/65f1607d7e4db.png); width: 80px; height: 49px;} /*------------------------------------------------------ 시그니처 포인트6 ------------------------------------------------------*/ #point {background:url(../img/iStock-2172514830.png) no-repeat top/cover} /*타이틀*/ #point .title {position:relative; text-align: right; width:80%; margin:0 auto; margin-top:40px;} #point .title:before {left:initial; right: -5px; background:var(--color-main2) } #point .title h2 {position: relative; color: var(--color-main2); font-size: 1.75rem; font-family: "Marcellus", serif; padding-bottom: 0.75rem;} #point .title h1 {color:var(--color-main4); padding-left:0px; padding-right: 70px; font-size:2rem; font-weight:700;} #point .title h1 span {color:#1a1a1a; font-size: 1.75rem; margin-left:10px;} /*리스트*/ #point .benefit_list {width: 1100px; margin: 0 auto; margin-top:50px} #point .benefit_list > ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:40px; width:100%; height:100%;} #point .benefit_list .num {position:absolute; top:-8px; left:15px; padding:0 10px; width: fit-content; background:transparent; font-size:36px; color:var(--color-main4); font-weight:700; font-family: 'Montserrat';} #point .benefit_list > ul > li {position:relative; aspect-ratio: auto 4 / 3; box-shadow: inset 0 0 0 2px rgb(0 0 0 / 10%); transition:0.5s} #point .benefit_list > ul > li:hover {background: rgb(255 255 255 / 30%);} #point .benefit_list > ul > li::before, #point .benefit_list > ul > li::after {content: ''; position: absolute; box-sizing:inherit; width: 100%; height: 100%; } #point .benefit_list > ul > li::before, #point .benefit_list > ul > li::after {border:2px solid transparent; width:0; height:0;} #point .benefit_list > ul > li::before {top:0; left:0;} #point .benefit_list > ul > li::after {bottom:0; right:0;} #point .benefit_list > ul > li:hover::before, #point .benefit_list > ul > li:hover::after {width:100%; height:100%;} #point .benefit_list > ul > li:hover::before {border-top-color:var(--color-main1); border-right-color:var(--color-main4); transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } #point .benefit_list > ul > li:hover::after { border-bottom-color:var(--color-main1); border-left-color:var(--color-main4); transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;} /*텍스트*/ #point .txt_box {display:flex; flex-direction:column; text-align: center; justify-content: center; height: 100%;} #point .txt_box li:nth-child(1) {font-size:20px; opacity: 0.7; color:#444} #point .txt_box li:nth-child(2) {margin:12px 0; overflow:hidden;} #point .txt_box li:nth-child(3) {font-size:24px; color:#bc9a43; font-weight:600; letter-spacing:-1px} #point .txt_box li p {transform:translateY(80px); transition:0.8s; color:#333; font-weight:700; font-size:1.5rem; line-height: 1.2;} #point .txt_box li p small{font-size: 0.9rem;} #point.active .txt_box li p {transform:translateY(0px); transition:1.5s 0.8s;} /*--------------------------------------------------------- 유니트 ---------------------------------------------------------*/ #unit {background: url('../img/unit.png') no-repeat right bottom / cover;} #unit .fp-tableCell {display:flex; align-items: center; justify-content:space-between;} #unit::after {content: ''; position:absolute; top:0; right:0%; height:100%; width:0%; background:rgb(0 0 0 / 15%); transition:1s;} #unit.active::after {width:55%; transition-delay:1.2s} /*타이틀*/ #unit .tit {margin-bottom: 30px; padding-top:20px;} #unit .tit span {font-size:26px; } #unit .tit p {position:relative; font-size:4rem; line-height: 1.2; letter-spacing: 2px; font-family: "Marcellus", serif; z-index:1} #unit .tit p:before {content: ''; position: absolute; width:20px; height:20px; top: 6px; left: -5px; opacity:1; background:var(--color-main3); border-radius: 20px; z-index:-1} /* 왼쪽 슬라이드(유니트) */ #unit .leftWrap {/*background:url(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/2e13136ba297b.jpg) no-repeat center/cover; background-color: rgb(0 13 18 / 80%); background-blend-mode: multiply;*/ position: relative; display: flex; align-items: center; justify-content: center; width:50%; height: 100%;} #unit .leftWrap > div {width:60%;} #unit .leftWrap .swiper-container {position: relative; opacity:0; transform:translateY(80px); transition:0.8s} #unit.active .leftWrap .swiper-container {opacity: 1; transform:translateY(0); transition-delay:0.9s} #unit .leftWrap .swiper-wrapper {width: 100%; position: relative;} #unit .leftWrap .imgWrap {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height:420px; overflow: hidden; background:#fff; padding:40px 80px} #unit .leftWrap .imgWrap img {position: relative; width:80%; object-fit:cover; transform: translateY(5px); margin-top:-10%;} #unit .unit_desc {display: flex; justify-content:flex-end; opacity:0; transform: translateY(30px); transition:0.3s} #unit .swiper-slide-active .unit_desc {animation:fadeInUp 1s forwards; transition-delay:0.3s} #unit .unit_desc p {display:flex; font-size:22px; padding-top:30px; gap:10px; white-space: nowrap;} #unit .unit_desc span {font-weight:600; font-size:40px; color:#333; line-height:0.6; white-space: nowrap;} #unit .swiper-pagination {position:absolute; display:flex; justify-content: flex-end; bottom:20%; padding-right:20px} #unit .swiper-pagination-bullet {position:relative; opacity:0.7; margin:0 20px; background:#9f9f9f; padding:5px} #unit .swiper-pagination-bullet-active {opacity:1;} #unit .swiper-pagination-bullet-active:before {content:''; position:absolute; border:1px solid #9f9f9f; border-radius:100px; width:30px; height:30px; left: 50%; top: 50%; transform: translate(-50%, -50%);} /* 오른쪽 슬라이드(인테리어) */ #unit .rightWrap {position: relative; width:55%; } #unit .rightWrap .slide-wrap {position:relative; width:fit-content;} #unit .rightWrap .slide-wrap:before {content:'FAVORITE UNIT PLAN'; position:absolute; bottom:-90px; right:0; font-size:3rem; color: #fff; opacity: 0.8; font-family: "Marcellus", serif; z-index:1} #unit .rightWrap .swiper-container {position: relative; overflow: hidden; width:760px; height:50%} #unit .rightWrap .swiper-wrapper {width: 100%; position: relative;} #unit .rightWrap .swiper-slide {position: relative; height:500px; overflow:hidden} #unit .rightWrap .swiper-slide img {width:100%; height:100%; object-fit:cover} #unit .rightWrap .swiper-slide .imgWrap { width: 100%; position: relative; overflow: hidden;} #unit .rightWrap .swiper-slide .imgWrap img {position: relative;} #unit .rightWrap .swiper-slide p {position:absolute; font-size:28px; font-weight:300; color:#472f21; line-height:1.2; text-shadow:0px 0px 20px rgb(255 255 255 / 100%)} #unit .rightWrap .swiper-slide p b {font-weight:700; font-size:40px} #unit .rightWrap .swiper-slide .slide_txt1 {top:30px; left:30px; display:none} /*숨겨둠*/ #unit .rightWrap .swiper-slide .slide_txt2 {bottom:30px; right:30px; text-align:right; display:none} /*숨겨둠*/ /*좌우버튼*/ #unit .btnWrap {position: absolute; width: 140px; height: 30px; bottom:-50px; left:0; z-index: 2;} #unit .btnWrap a {display: flex; justify-content: center; align-items: center; float: left; width:60px; height:60px; margin-right: 1px; background:var(--color-main1)} #unit .btnWrap a:last-child {margin-left:10px;} #unit .btnWrap a .feather {stroke-width:2; color:#fff} #unit .rightWrap .bottom-txt {position:absolute; bottom:-80px; right:200px; font-size:48px; font-weight:600; color: #999; letter-spacing:-1px; z-index:1; display:none} /*----------------------------------------------------- 관심고객 등록 -----------------------------------------------------*/ #reservation {background: url(../img/res_bg.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:24px; 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.45rem; 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.1rem;} #reservation .scd li.nth5 {width: 400px; margin-bottom: 0; line-height:0} #reservation .scd li.nth5 a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; text-decoration:none; color:inherit;} #reservation .scd li.nth5 span {font-weight:500;} #reservation .scd li.nth5 span:first-child {padding-top:5px;} #reservation .scd li.nth5 span:nth-child(2){} #reservation .scd li.nth5 span:last-child { } #reservation .scd li.nth6 {width: 400px; background:#1a444e; color:#fff; text-align: center;} #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:var(--color-main3);} #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:28px; line-height:1.5; opacity: 0; color:#fff} .right_tit p b {font-size: 32px; font-weight: 600; line-height:1.75; color:var(--color-main3)} .right_tit>div {position:relative; width:1px; height:3.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:100px; margin-top:18%;} /*오른쪽 애니메이션*/ .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: 150px; 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%;} } /* 📱 MO 990px 이하일 시 */ @media(max-width:990px){ /*PC 스타일 초기화 */ html {min-width:initial;} header .pc_quick_top, .site-header .header-bg {display: none !important} /* 모바일 헤더 */ header {background: var(--color-main1);} .site-header {position:sticky; top:0; z-index: 99;} header .bar {position:relative; height:var(--mo-header-height); display: flex; justify-content: center; align-items: center;} .mega-wrap {position:absolute; transform: translateX(-100%); transition: 0.5s;padding:3vw 3vw 80vw 3vw; transition:.3s ease; width:100%; height:100vh; overflow-y: auto; background: #383A38; scrollbar-width: none; z-index: 1;} .open .mega-wrap {transform: translateX(0%)} /* ❌ 기존: .nav{display:none} → 삭제해야 네비 보임 */ /* 모바일 네비 컨테이너 */ header .nav { position: fixed; top: var(--mo-header-height); left: 0; width: 100%; height: 100vh; /* ✅ 풀 높이로 줌 */ background: #383A38; transform: translateX(-100%); transition: 0.3s ease; z-index: 900; /* ✅ 퀵버튼보다 낮게 */ display: flex; flex-direction: column; padding-bottom: var(--mo-header-quick-height); /* ✅ 퀵버튼 영역만큼 여백 확보 */ } /* gnb 스크롤은 nav 안에서만 */ header .nav .gnb { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8rem; /* ✅ 여유 여백 */ } header .nav.open {transform: translateX(0%);} .mega .inner{display:block} .mega .col {border-bottom: 1px solid #555} .mega .col a {position:relative; padding:4vw 8vw; color:#C8B9AF; font-size: 3.8vw;} .mega .col a:hover {background: rgb(0 0 0 / 10%);} .mega .col h4 > a:after {content: ""; position: absolute; right: 6vw; top:5vw; width: 1.8vw; height: 1.8vw; border-top: 0.6vw solid #C8B9AF; border-right: 0.6vw solid #C8B9AF; transform: rotate(135deg); transition:0.3s} .mega .col.mo-open h4 a:after {transform: rotate(-45deg);} /*로고*/ header .logo {width:32vw; height:auto; margin-right:8vw;} header .logo .header-logo-color {display: none;} header .logo img {width:100%} header .logo .logo_color {display:none} header .number {position: absolute; display:flex; align-items: center; width:24vw; right: 2vw !important; transition:0.2s} header .number:hover {transform:scale(1.05)} header .number img {width: 100%;} /*뎁스*/ header .depth2 {background: rgb(0 0 0 / 20%); display: none;} header .depth3 {display: none;} /*모바일 depth2 오픈*/ header .col.mo-open .depth2 {display:block;} /*모바일 메뉴버튼*/ header .menu_btn {position:absolute; display:block; top:50%; transform:translateY(-50%);left:4vw; width: 28px; height: 22px; transition:0.2s} header .menu_btn:hover {transform: translateY(-50%) scale(1.2);} header .menu_btn div {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px;} header .menu_btn div:nth-child(1) { top: 0; transform-origin: top left; transition: transform 0.2s ease; } header .menu_btn div:nth-child(2) { top: 10px; } header .menu_btn div:nth-child(3) { bottom: 0; transform-origin: bottom left; transition: transform 0.2s ease; } header.open .menu_btn div {position: absolute; } header.open .menu_btn div:nth-child(1) { transform: rotate(45deg); } header.open .menu_btn div:nth-child(2) { opacity: 0; } header.open .menu_btn div:nth-child(3) { transform: rotate(-45deg); } /*모바일용 gnb*/ .mo_gnb li {position: relative; display:flex; width: 100%; } .mo_gnb li a, .mo_gnb li span {text-align:center !important; color:#fff; font-size:4vw; font-weight:600; padding: 4vw 0; width:100%; } .m_number {margin-top:60px; background: #4B5055;} .m_registration {background: var(--color-main1);} #menu_btn_close {top: auto; transform:none; left: inherit; height:auto; background:#222; margin-top: 10px; border-radius: 10px; cursor:pointer;} /*MO 퀵상단*/ .mo_quick_top {display: block; top:0; width: 100%; background-color: #ffe303; cursor:pointer} .mo_quick_top .mo-quick-top-img {display: flex; align-items: center;} .mo_quick_top .mo-quick-top-img img {width:100%} } /******************************************************************************************************************************************** 서브 페이지 *********************************************************************************************************************************************/ /*서브 페이지 상단 */ .subtop {position:relative; display: flex; flex-direction: column; justify-content: center; width:100%; height:30rem; text-align:center; overflow:hidden} .subtop-wrap {display: flex; flex-direction: column; gap: 1rem; cursor: default; z-index: 1;} .subtop-wrap .subtop-crumb {font-size: 1rem; display: flex; justify-content: center; gap: 10px; opacity: 0.5; color:#dddada;} .subtop h1 {color:#dddada; font-size:3.5rem; font-weight:bold; letter-spacing: 50px; animation: spacing-change 1.5s forwards; animation-delay:0.4s; } .subtop p {font-size:1.25rem; color:#cecdcd; } .subtop-img { position:absolute; animation: sub_top 1.5s 0s both; animation-delay:0.5s; background:url('/img/sub-page/nav_bg3.png') center / cover no-repeat; width:100%; height:100%; } @keyframes sub_top { 0% {transform: scale(1.1);} 100% {} } @keyframes spacing-change { from {letter-spacing: 40px;} to {letter-spacing: 5px;} } /* 서브페이지 탭버튼 */ .tab {display:flex; flex-wrap: wrap; justify-content:center; width:100%;} .tab .tab-btn { display:flex; align-items:center; justify-content:center; width:50%; max-width:200px; height:100%; border:1px solid #dbdbdb; padding:10px 12px; background:#fff; transition:0.2s; box-sizing:border-box; } .tab .tab-btn:hover {background: #f5f5f5;} .tab .tab-btn:hover {font-weight: bold;} .tab .tab-btn.on {background:var(--color-main1); pointer-events: none;} .tab .tab-btn a {display:flex; align-items:center; justify-content:center; height:100%; } .tab .tab-btn.on a {color:#fff;} .subnav-wrap {margin: 3rem 0;} .tab-btn.active,.tab-btn[aria-current="page"] {background:var(--color-main1) !important; border-color:var(--color-main1); color:#fff} /*3뎁스*/ .subnav--depth3 {margin: 3rem;} .subnav--depth3 .tab {padding-top: 3rem; width: var(--maxw); border-top: 1px solid #eee; margin:0 auto } .subnav--depth3 .tab .tab-btn {border:0; background:transparent} .subnav--depth3 .tab .tab-btn.active {background:rgb(0 0 0 / 3%) !important; color:var(--color-main1); font-weight: bold;} /*서브페이지 */ .contents_wrap {display:flex; flex-wrap:wrap; width:100%; max-width:1000px; margin:0 auto; } .contents_wrap .contents-box {display: flex; flex-direction: column; width:100%; height:auto; margin:0 auto;} .contents_wrap .contents-box img {width:100%; height:auto;} .contents_wrap .contents-box img:last-child {margin: auto;} .contents_wrap .contents-box h3 {width:100%; font-size:2rem; margin-bottom:10px;} .contents_wrap .contents-box ul, .contents_wrap .contents-box ul li {width:100%; height:auto; display:flex; flex-wrap:wrap; align-content:flex-start;} .contents_wrap .contents-box h2 {font-size: 1.5rem; font-weight: bold; padding: 3%; text-align: center; color: #3a3a3a; background-color: #ebebeb; margin-top: 5px; margin-bottom: 5px;} /* 언론보도 */ .contents_wrap .news-board .news-title {justify-content:flex-start; font-size:18px; word-break: keep-all; line-height:1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .contents_wrap .news-board li {position:relative; border-bottom:1px solid #dbdbdb; padding:18px; cursor:pointer} .contents_wrap .news-board li::after {content:''; position:absolute; right:30px; display:block; width:8px; height:8px; border-right: 1px solid #333; border-top: 1px solid #333; top: 50%; transform: translateY(-50%) rotate(135deg); transition:.3s; } .contents_wrap .news-board li.on::after {transform:translateY(-50%) rotate(315deg);} .contents_wrap .news-board li:first-child {border-top:1px solid #dbdbdb;} .contents_wrap .news-board li .acd_body {display:inline-block; width:100%; height:0; overflow:hidden; transition:.3s;} .contents_wrap .news-board li .acd_body:hover {opacity: 0.5;} .contents_wrap .news-board li.on .acd_body {height:fit-content; padding:22px 10px 0px; } .contents_wrap .news-board li .acd_body a {font-size:16px; font-weight:400; color:#555; line-height:1em;} /* 유튜브 영상 */ .contents_wrap .video-container {position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; } .contents_wrap .video-container h3{font-size: 1.5em;} .contents_wrap .video-container iframe {position: relative; width: 100%; height: 100%; top: 0; left: 0; } /* 관심고객 */ .contents_wrap .db_box {position: relative; width: 100%; max-width:600px; margin:0 auto; padding-bottom: 100%; height: 0; overflow: hidden;} .contents_wrap .db_box iframe {position: absolute; top: 0; left: 0; width: 100%; height: 800px; border: 0;} /* 모바일 : 990px 이하일 시 */ @media(max-width:990px){ .subtop {margin-bottom:0; height:50vw; margin-top:3em;} .subtop-wrap {gap:0.5rem} .subtop h1 {font-size:8vw; color: #eaeaea; padding-top:0} .subtop p {font-size: 3.2vw; color:#dddada} .subtop-img {background-position: right; background-size: cover;} .contents_wrap .contents-box img:last-child {padding:2%; /* 원하는 값으로 수정 */} /* 서브 네비 */ .tab .tab-btn:nth-last-child(1):nth-child(odd) { width:100%; max-width:400px; } .subnav {margin: 0 4vw } .subnav .tab .tab-btn {max-width:inherit} .subnav--depth3 {margin:4vw} .subnav--depth3 .tab {width:100%; padding-top: 4vw;} .subnav--depth3 .tab .tab-btn:nth-last-child(1):nth-child(odd) { width:100%; max-width:400px; } /* 언론보도 */ .contents_wrap .news-board .news-title {width:90%;} /* 관심고객 */ .contents_wrap .db_box {position: relative; width: 100%; padding-bottom: 150%; height: 0; overflow: hidden;} } /******************************************************************************************************************************************** Footer *********************************************************************************************************************************************/ .footer {width:100%; background:#1b1b1b; cursor:default} .footer .ft_wrap {display:flex; width:1400px; margin:0 auto; padding:3rem 0 4rem; color:#fff;} .footer .ft_box1 {display:flex; flex-direction: column; width: 70%;} .footer .ft_box1 .logo-white {width:9rem; margin-bottom: 1.25rem;} .footer .ft_box1 .logo-color {display: none;} .footer .ft_box1 .title {font-size:1.75rem; font-weight:700; padding-bottom:20px;} .footer .ft_box1 .copyright .title {font-size:revert; font-weight:revert} .footer .ft_box1 table {font-size: 1rem; font-weight: 500; line-height: 1.75; margin-bottom:1.25rem} .footer .ft_box1 tr td:nth-child(1) {width:120px; font-weight:bold;} .footer .ft_box1 p {font-size:0.75rem; font-weight:300; line-height:1.75; opacity:0.8} .footer .ft_box2 {display:flex; justify-content: space-between; align-items: flex-end; flex-direction: column; padding: 10px 0 0; width: 30%; height:100%;} .footer .ft_box2 .ft_number {display: flex; align-items: center; font-size: 24px} .footer .ft_box2 .ft_number a b {font-size:1.8rem; font-family: 'GmarketSansBold';} .footer .ft_box2 .info {cursor:pointer} .footer .company-link {position:relative; display:flex; align-items:center; border:1px solid #dbdbdb; background:#fff; width:fit-content; padding-left:40px; margin:20px 0;margin: 0 auto; cursor:pointer; border-radius: 50px; display:none} /* 숨겨둠 */ .footer .company-link img {padding: 0 0.8rem;} .footer .company-link p {font-weight:500; font-size:16px; padding-right:5px; letter-spacing: 1px;} .footer .company-link b {font-size:1.5rem; margin:0 1.5rem 0 0;} .footer .company-link_number {display:flex; align-items: center; border-radius: 100px; color:#fff; padding: 5px 38px; margin-left:1rem; background:linear-gradient(127deg, rgb(83 99 114) 0%, rgba(34, 43, 52, 1) 100%)} /*모바일 해상도*/ @media(max-width:990px) { .footer {padding-bottom:48vw; cursor:default; background: #f2f2f2;} .footer .ft_wrap {flex-direction: column-reverse; width: initial; padding: 0; color:#333;} .footer .ft_box1 {width: initial; padding:3vw 0 0 3vw} .footer .ft_box1 .logo-color {width:8rem; display:block} .footer .ft_box1 .logo-white {display: none;} .footer .ft_box1 .title {font-size:5vw; padding-bottom:1rem} .footer .ft_box1 table {line-height: 1.5; margin: 1rem 0;} .footer .ft_box1 table tr td {font-size:2.8vw} .footer .ft_box1 table tr td:nth-child(1) {width:16vw} .footer .ft_box1 p {font-size: clamp(12px, 2vw, 14px); text-wrap: auto; white-space: normal; word-break: auto-phrase;} .footer .ft_box1 .copyright {padding-top:0; padding-bottom:20px} .footer .ft_box2 {width:initial; align-items: initial; padding: 8vw 2.5vw 2.5vw; border-bottom: 1px solid #cdcdcd; flex-direction: row;} .footer .ft_box2 .ft_number {font-weight: 600; line-height:1} .footer .ft_box2 #scrollTopBtn {width: 10vw; height: 10vw; background:var(--color-main1); border-radius: 100px;} .footer .ft_box2 #scrollTopBtn .feather {width: 22px; height: 22px; color: #fff; fill: transparent; stroke-width:3px; padding-top:0.5vw} } /* PC, MO 숨기기 */ @media(min-width:991px){ .pc {display:block} .mo {display: none;} } @media(max-width:990px){ .pc {display:none} .mo {display: block;} }