#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: #012f46; --color-main2: #028ab5; --color-main3: #dbd4cb; --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; width:100%; height:100%; background:#fff; animation:intro-fadeOut 1.5s ease forwards 3.2s; pointer-events:none; cursor:default; z-index: 1001;} @keyframes intro-fadeOut { 0% {opacity: 1; visibility: visible;} 99.9% {opacity: 0; visibility: visible;} 100% {opacity: 0; visibility: hidden;} } #intro_loading > div {width:100%; height:100%; background:var(--color-main1); transform-origin: bottom; animation: shrinkHeight 1.5s ease forwards; pointer-events:auto; overflow:hidden} #intro_loading > div:nth-child(1) {animation-delay: 3.1s;} #intro_loading > div:nth-child(2) {animation-delay: 2.9s;} #intro_loading > div:nth-child(3) {animation-delay: 2.7s;} @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:20px; font-weight:500} .intro-txt-wrap p {display: flex; flex-direction: column; align-items: center;font-size:32px; font-weight:500;} .intro-txt-wrap p:after {content:''; position:relative; width:1px; height:50px; background:#fff; margin:20px 10px;} .loading_logo {width:240px; padding-bottom:0px;} @keyframes intro-fadeIn { to {opacity: 1;} } /*-------------------------------------------------------- 스크롤 다운 --------------------------------------------------------*/ .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 {max-width:100%;} #main video {width:100%; height:100%; object-fit:cover;} /*메인 타이틀*/ #main .main-tit-wrap {position:absolute; display:flex; flex-direction: row; align-items: center; justify-content: center; top:17%; width:100%; max-width:100%; gap:6%; z-index:1;} #main .main-tit-wrap img {transform:translateY(50px); opacity:0;} #main .main-txt {display:flex; flex-direction:column; font-size:34px; font-weight:600; text-align:center; white-space: nowrap;} #main .main-txt b {font-weight: 600;} #main .main-txt span {font-size:20px; color:#555; font-weight:400} #main .line-between {width: 15%; height: 2.5px; background: transparent; position: relative; overflow: hidden;} #main .line-between::before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--color-main1); transition: width 1s ease;} #main .main-tit-wrap img:first-of-type { width:28vw; height:auto; } #main .main-tit-wrap img:last-of-type { width:24vw; height:auto; } /* 메인 애니메이션 */ #main.loading-end .main-tit-wrap img:nth-child(1) {transform:translate(0); opacity:1; transition:1s; transition-delay:2.5s;} #main.loading-end .main-tit-wrap .line-between::before {width: 100%; transition-delay: 3.5s;} #main.loading-end .main-tit-wrap img:nth-child(3) {transform:translate(0); opacity:1; transition:1s; transition-delay:4.5s;} #main.loading-end .main_bg {transform:scale(1); transition-duration:2s;} @keyframes drawLine { from { width: 0; } to { width: 100%; } } /* -------------------------------------------------------- 프리미엄 -------------------------------------------------------- */ #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;} /* 오른쪽 사진 3번째 */ #premium .left_slide .swiper-slide:nth-child(3) img { object-fit: cover; object-position: 55% center; } /* 왼쪽 사진 3번째 */ #premium .right_slide .swiper-slide:nth-child(3) img { object-fit: cover; object-position: 23% center; } /* 페이지네이션 */ #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} #premium .right_slide h5 span {font-size: 15px; display: inline-block;} #premium .right_slide p {font-size:1.5rem; color: #555; margin: 20px 0; line-height:1.5;} #premium .right_slide p span {font-size: 14px; display: inline-block;} /*오른쪽 버튼*/ #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(https://cdn.imweb.me/upload/S202212289feb50bbbee7e/575f61f95caf4.jpg) 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-main1); padding-left:0px; font-size:2.5rem; font-weight:700;} #point .title h1 span {color:#1a1a1a; font-size:2rem;} /*리스트*/ #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:9px; left:15px; padding:0 10px; width: fit-content; background:transparent; font-size:36px; color:var(--color-main1); 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-main1); 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-main1); 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:22px; 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.75rem;} #point.active .txt_box li p {transform:translateY(0px); transition:1.5s 0.8s;} /*----------------------------------------------------- 관심고객 등록 -----------------------------------------------------*/ #reservation {background: url(/img/pc/760edca60e7e7.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:10px} #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:#bc9a43;} #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:#bc9a43;} .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; padding-right:70px; height:100%;} #footer .footer_band_wrap img {width:240px;} #footer .footer_band_wrap p {font-weight: 700; letter-spacing:5px} #footer .footer_band_wrap div {display:flex; gap:10px} #footer .footer_band_wrap div > img {width:180px} /*푸터 내부 콘텐츠*/ #footer .inner {display: flex; width:80% !important; margin:0 auto; padding:50px 0; color:#333; height:85%} #footer .inner_left {display: flex; flex-direction: column; width: 50%; 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:600; 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 0; width: 50%; height:100%;} #footer .inner_right .ft_number {font-size: 24px} #footer .inner_right .ft_number b {font-size:36px; font-weight:600; margin-left: 10px; position: relative; top: 2px; } #footer .inner_right .info {cursor:pointer} #footer .ft_menu {position:relative; display:flex; flex-direction:row; align-items:center; width:fit-content; margin:20px 0; padding: 0 40px; font-size:16px; cursor:pointer; border:1px solid #333; border-radius: 50px;} #footer .ft_menu img {width:70px; padding-top: 4px;} #footer .ft_menu b {font-weight:900; font-size:32px; margin: 0 10px; letter-spacing: -1px;} #footer .ft_menu_number {display:flex; align-items: center; border-radius: 100px;} #footer .ft_menu_number b {margin: 0 10px 0 0} /* 해상도 */ /* 울트라 와이트 해상도 */ @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} }