@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#wrapper {position:relative;}

.contain {max-width:1260px; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

/* header */
#header {position:sticky; top:0; left:0; width:100%; height:var(--header-height); background:#fff; transition:.2s; z-index:100;}
#header .contain {display:flex; align-items:center; justify-content:space-between; position:relative; max-width:1860px; height:100%; z-index:10;}
.gnb {flex:1 1 auto; min-width:0; width:1%;}
.gnb > ul {display:flex; justify-content:flex-end;}
.gnb > ul > li > a {display:block; padding:10px 24px; border-radius:15px; font-size:var(--font-size-18); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.gnb > ul > li.active > a{background:#000; color:#fff;}

.top-links {margin-left:clamp(20px, calc(100 / var(--inner) * 100vw), 100px); display:flex; gap:var(--space-10);}
.top-links .link-item {display:block; padding:4px 15px; font-size:var(--font-size-16); line-height:1.2em; letter-spacing:-.03em; background:#062964; border-radius:30px;color:#fff;}

.my-top-links {margin-left:var(--space-30);}
.my-top-links .link-item {display:block; position:relative;}
.my-top-links .link-item span {position:absolute; top:calc(100% + 8px); right:0; background:#000; color:#fff; padding:3px 8px; border-radius:5px; font-size:var(--font-size-14); font-weight:500; line-height:1.2em; letter-spacing:-.03em; white-space:nowrap; transition:.2s; opacity:0;}
.my-top-links .link-item:hover span {opacity:1;}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; left:var(--space-container); -webkit-transform:translateY(-50%); transform:translateY(-50%); width:18px; height:18px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:5px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#000; border-radius:2px;}

.mobile-navigation {display:block;position:fixed; top:0; left:0; width:90%; max-width:340px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(-100%); transform:translateX(-100%); background:#fff; z-index:102;}
.mobile-navigation .close {position:absolute; top:18px; right:20px; z-index:10; width:18px; background:none; border:0;}


.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}


/* main */
#main #container .contain {max-width:1460px;}

.main-hero-wrap {position:relative; _margin-bottom:var(--space-70); background:#000;}
.main-hero {position:relative; height:640px; overflow:hidden;}
.main-hero .img {position:absolute; inset:0; width:100%; height:100%;}
.main-hero .img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.main-hero .img:after {content:''; position:absolute; inset:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3);}
.main-hero .cnt {position:absolute; top:50%; left:calc(50% - 700px); width:45%; max-width:500px; -webkit-transform:translateY(-50%); transform:translateY(-50%); color:#fff;}
.main-hero .cnt .hashtag {margin-bottom:var(--space-24); display:flex; flex-wrap:wrap; gap:var(--space-10); font-size:var(--font-size-26); line-height:1.5em;}
.main-hero .cnt .tit {margin-bottom:var(--space-24); font-size:var(--font-size-60); line-height:1.3em; letter-spacing:-.03em;}
.main-hero .cnt .more {display:inline-flex; justify-content:center; align-items:center; width:clamp(120px, calc(180 / var(--inner) * 100vw), 180px); height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); border:2px solid #fff; border-radius:30px; font-size:var(--font-size-18); font-weight:500; line-height:1.3em; letter-spacing:-.03em;}

.main-search {position:absolute; top:50%; right:calc(50% - 700px); width:60%; max-width:780px; background:rgba(255, 255, 255, 0.15); border:1px solid rgba(255, 255, 255, 0.5); backdrop-filter:blur(3px); border-radius:20px; padding:var(--space-40); -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.main-search .heading {margin-bottom:var(--space-40); font-size:var(--font-size-40); font-weight:300; line-height:1.3em; letter-spacing:-.03em; text-align:center; color:#fff;}
.main-search .search-input {margin-bottom:var(--space-20); position:relative;}
.main-search .search-input .input {display:flex; align-items:center; width:100%; height:clamp(45px, calc(80 / var(--inner) * 100vw), 80px); padding:8px 4em 8px clamp(16px, calc(32 / var(--inner) * 100vw), 32px); background:#f5f5f5; font-size:var(--font-size-16); line-height:1.5em; color:#000; border:0; border-radius:80px;}
.main-search .search-input .submit {position:absolute; top:50%; right:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); width:clamp(20px, calc(28 / var(--inner) * 100vw), 32px); aspect-ratio:1/1; transform:translateY(-50%); background:url("/html/front/images/main/search.svg") 50% 50%/contain no-repeat; border:0;}
.main-search .selectboxs {display:flex; align-items:center; gap:clamp(8px, calc(13 / var(--inner) * 100vw), 13px);}
.main-search .selectboxs .txt {font-size:var(--font-size-20); font-weight:500; line-height:1.3em; letter-spacing:-.03em; color:#fff;}
.main-search .selectboxs .selectbox {flex:1;}
.main-search .selectbox {position:relative;}
.main-search .selectbox .input {display:flex; align-items:center; justify-content:space-between; width:100%; height:clamp(40px, calc(42 / var(--inner) * 100vw), 42px); padding:4px clamp(12px, calc(20 / var(--inner) * 100vw), 20px); background:#f5f5f5; font-size:var(--font-size-14); line-height:1.5em; color:#000; border:0; border-radius:40px; cursor:pointer;}
.main-search .selectbox .input:after {content:""; display:block; width:17px; aspect-ratio:17/8; background:url("/html/front/images/main/toggle.svg") 50% 50%/contain no-repeat;}
.main-search .selectbox ul {display:none; position:absolute; top:calc(100% + 8px); left:0; width:100%; padding:10px; background:#f5f5f5; border-radius:var(--radius-20); box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5); z-index:50;}
.main-search .selectbox ul li {padding:6px 10px; color:#000; border-radius:30px; font-size:var(--font-size-18); line-height:1.5em; transition:.2s; cursor:pointer; font-size:var(--font-size-16);}
.main-search .selectbox ul li:hover,
.main-search .selectbox ul li.active a {background:#c6dbff;}
.main-search .selectbox.active .input:after {-webkit-transform:scaleY(-1); transform:scaleY(-1);}

.m-head {text-align:center; margin-bottom:var(--space-40);}
.m-head h2 {font-size:clamp(24px, calc(50 / 1280 * 100vw), 50px); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.m-head p {margin-top:var(--space-20); font-size:clamp(13px, calc(20 / var(--inner) * 100vw), 20px); line-height:1.5em; letter-spacing:-.03em;}

.main-counter {padding:var(--space-70) 0 var(--space-100); text-align:center; overflow:hidden;}
.main-counter .items {display:flex; gap:var(--space-40);}
.main-counter .item {width:calc(100% / 3);}
.main-counter .item .icon {margin-bottom:var(--space-20);}
.main-counter .item .number {font-family: 'JalnanGothic',sans-serif; font-size:clamp(26px, calc(65 / var(--inner) * 100vw), 65px); font-weight:700; line-height:1em; letter-spacing:0; color:var(--color-primary);}
.main-counter .item .label {margin-bottom:var(--space-20); font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-.03em;}
.main-counter .item .title {margin-bottom:var(--space-10); font-size:var(--font-size-30); line-height:1.3em; letter-spacing:-.03em;}
.main-counter .item .desc {font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-.03em;}
.main-counter .item .desc small {font-size:var(--font-size-16); line-height:1.3em; letter-spacing:-.03em;}

.main-process {padding:var(--space-120) 0; background:#f5f5fc; text-align:center; overflow:hidden;}
.main-process .contain {max-width:1460px;}
.main-process .m-head  {margin-bottom:var(--space-50);}
.main-process .m-head h2 {font-weight: 400;}
.main-process .steps {display:flex; flex-wrap:wrap;}
.main-process .step {width:calc(100% / 3); padding:35px; position:relative;}
.main-process .step:after {content:''; position:absolute; top:50%; right:0; transform:translate(50%,-50%); width:14px; aspect-ratio:14/22; background:url('/html/front/images/main/step-arrow.svg') 50% 50%/contain no-repeat;}
.main-process .step .icon {margin-bottom:var(--space-20);}
.main-process .step .text h3 {margin-bottom:var(--space-10); font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-.03em;}
.main-process .step .text p {font-size:var(--font-size-18); line-height:1.4em; letter-spacing:-.03em;}
.main-process .step:last-child:after {display:none;}
.main-process .step:nth-child(1) {order:1;}
.main-process .step:nth-child(2) {order:2;}
.main-process .step:nth-child(3) {order:3;}
.main-process .step:nth-child(4) {order:6;}
.main-process .step:nth-child(5) {order:5;}
.main-process .step:nth-child(6) {order:4;}
.main-process .step:nth-child(3):after {top:100%; right:50%; transform:translate(50%,-50%) rotate(90deg);}
.main-process .step:nth-child(4):after,
.main-process .step:nth-child(5):after {right:100%; transform:translate(50%,-50%) scaleX(-1);}
.main-process .btn-area {margin-top:var(--space-40);}
.main-process .btn {display:inline-flex; justify-content:center; align-items:center; gap:10px; width:clamp(180px, calc(220 / var(--inner) * 100vw), 220px); height:clamp(50px, calc(70 / var(--inner) * 100vw), 70px); background:var(--color-primary); border-radius:70px; color:#fff; font-size:var(--font-size-18); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}

.main-recommend {padding:var(--space-120) 0; text-align:center; overflow:hidden; border-bottom:1px solid #e0e0e0;}
.main-recommend .contain {max-width:1660px;}
.main-recommend .tab {margin-bottom:var(--space-40);}
.main-recommend .tab .tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.main-recommend .tab .tabs li a {display:block; width:100%; height:100%; padding:13px 30px; background:#f8f9fb; border:1px solid #ccc; border-radius:50px; font-size:var(--font-size-18); font-weight:500; line-height:1.3em; letter-spacing:-.03em; color:#888;}
.main-recommend .tab .tabs li.active a {background:#062964; border-color:#062964; color:#fff;}

.main-recommend .content {position:relative;}
.main-recommend h3 {margin-bottom:var(--space-24); font-size:var(--font-size-36); line-height:1.3em; letter-spacing:-.03em; text-align:left;}
.main-recommend .unit-toggle {position:absolute; top:1.3em; right:0;}
.main-recommend .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-20);}
.main-recommend .link-item {position:relative; border-radius:15px; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4); overflow:hidden;}
.main-recommend .link-item .img {aspect-ratio:1/1; border-radius:15px; overflow:hidden;}
.main-recommend .link-item .img img {width:100%; height:100%; object-fit:cover;}
.main-recommend .link-item .img:after {content:''; position:absolute; bottom:0; left:0; width:100%; height:75%; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}
.main-recommend .link-item .area {position:absolute; top:var(--space-20); left:var(--space-20); padding:2px 15px; background:rgba(0, 0, 0, 0.5); border-radius:12px; color:#fff; font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-.03em;}
.main-recommend .link-item .text {position:absolute; bottom:0; left:0; width:100%; padding:var(--space-24); color:#fff;}
.main-recommend .link-item .text .tit {margin-bottom:var(--space-10); font-size:var(--font-size-24); font-weight:700; line-height:1.5em; letter-spacing:-.03em;}
.main-recommend .link-item .text .txt {font-size:var(--font-size-18); font-weight:300; line-height:1.5em; letter-spacing:-.03em;}

.unit-toggle {position:relative; display:inline-flex; align-items:center; gap:var(--space-10);}
.unit-toggle .toggle-input {display:none;}
.unit-toggle .toggle-label {display:flex; align-items:center; position:relative; width:40px; height:20px; background:var(--color-primary); border-radius:20px; cursor:pointer; transition: background-color 0.3s ease;}
.unit-toggle .toggle-slider {position: absolute; top:2px; left:2px; width:16px; height:16px; border:1px solid #fff; background-image:linear-gradient(to bottom, rgba(214, 214, 214, 1), rgba(255, 255, 255, 1)); border-radius:50%; transition: transform 0.3s ease; z-index: 2; }
.unit-toggle .unit-text {font-size: var(--font-size-16); font-weight: 500;}
.unit-toggle .toggle-input:checked + .toggle-label .toggle-slider {-webkit-transform:translateX(20px); transform:translateX(20px);}

.main-partners {padding:var(--space-140) 0; text-align:center; overflow:hidden;}
.main-partners .contain {max-width:1460px;}
.main-partners .m-head {margin-bottom:var(--space-120);}
.main-partners .items {display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.main-partners .items .item {height:100px; overflow:hidden;}
.main-partners .items .item img {width:100%; height:100%; object-fit:contain;}

.main-consulting {padding:clamp(60px, calc(180 / var(--inner) * 100vw), 180px) 0; background:#f5f5fc;}
.main-consulting .contain {max-width:1660px;}
.main-consulting .m-head {margin-bottom:var(--space-100); text-align:center;}
.main-consulting .m-head h2 {font-weight: 400;}
.main-consulting .swiper {padding:20px 10px; margin:-20px -10px;}
.main-consulting .link-item {display:flex; gap:16px; width:100%; height:clamp(220px, calc(275 / var(--inner) * 100vw), 275px); padding:10px; background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 0 7px rgba(0,0,0,0.2); transition:transform 0.3s ease, box-shadow 0.3s ease; border-radius:var(--radius-20);}
.main-consulting .link-item .img {flex:1 1 auto; min-width:0; width:1%; border-radius:var(--radius-20); overflow:hidden;}
.main-consulting .link-item .img img {width:100%; height:100%; object-fit:cover;}
.main-consulting .link-item .text {width:150px; padding:15px 0; display:flex; flex-direction: column; justify-content: space-between;}
.main-consulting .link-item .tit-area {margin-bottom:var(--space-16);}
.main-consulting .link-item .tit {font-size:var(--font-size-20); font-weight:700; line-height:1.3em; letter-spacing:-.03em; word-break:break-all; margin-bottom:5px;}
.main-consulting .link-item .addr {font-size:var(--font-size-16); line-height:1.4em; letter-spacing:-.02em;}
.main-consulting .link-item .tenant {margin-bottom:5px; font-size:var(--font-size-20); font-weight:700; line-height:1.4em; letter-spacing:-.02em;}
.main-consulting .link-item .area {display:inline-block; border:1px solid var(--color-primary); border-radius:5px; padding:2px 8px; font-size:var(--font-size-14); color:var(--color-primary); line-height:1.4em; letter-spacing:-.02em;}
.main-consulting .controls {display:flex; justify-content:center; align-items:center; max-width:710px; margin:var(--space-100) auto 0;}
.main-consulting .swiper-pagination {position:static; flex:1 1 auto; min-width:0; width:1%; height:2px; margin-right:57px; background:#e0e0e0; border-radius:0; overflow:hidden;}
.main-consulting .swiper-pagination .swiper-pagination-progressbar-fill {background:#000; border-radius:0;}
.main-consulting .swiper-button-prev,
.main-consulting .swiper-button-next {position:static; width:42px; height:42px; margin:0; background:#fff; border:1px solid #e0e0e0; border-radius:50%; color:#000; font-size:var(--font-size-20); font-weight:500; transition:all 0.3s ease;}
.main-consulting .swiper-button-prev:hover,
.main-consulting .swiper-button-next:hover {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.main-consulting .swiper-button-prev:after,
.main-consulting .swiper-button-next:after {display:none;}
.main-consulting .swiper-button-next {margin-left:8px;}

.main-ranking {padding:var(--space-140) 0; background:#fff;}
.main-ranking .contain {max-width:1660px;}
.main-ranking .m-head {margin-bottom:var(--space-130);}
.main-ranking .m-head h2 {font-weight:400;}
.main-ranking .row {display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-120);}
.main-ranking h3 {margin-bottom:var(--space-30); font-size:var(--font-size-36); line-height:1.3em; letter-spacing:-.03em; text-align:center;}
.main-ranking .ranking-list {margin-bottom:var(--space-40); border-top:1px solid #e0e0e0;}
.main-ranking .ranking-item {display:flex; align-items:center; gap:var(--space-20); padding:var(--space-20) var(--space-40); border-bottom:1px solid #e0e0e0;}
.main-ranking .rank-icon {width:clamp(32px, calc(53 / var(--inner) * 100vw), 53px); text-align:center; font-size:var(--font-size-26); font-weight:700; line-height:1em; color:var(--color-primary);}
.main-ranking .item-img {width:clamp(60px, calc(92 / var(--inner) * 100vw), 92px); aspect-ratio:1/1; border-radius:50%; overflow:hidden;}
.main-ranking .item-img img {width:100%; height:100%; object-fit:cover;}
.main-ranking .item-info {flex:1; min-width:0; width:1%; display:flex; align-items:center; justify-content:space-between;}
.main-ranking .item-info .title {margin-bottom:var(--space-8); font-size:var(--font-size-24); font-weight:700; line-height:1.4em; letter-spacing:-.02em;}
.main-ranking .item-info .address {font-size:var(--font-size-18); color:#555; line-height:1.4em; letter-spacing:-.02em;}
.main-ranking .item-info .price {font-size:var(--font-size-18); color:#555;  line-height:1.4em; letter-spacing:-.02em;}
.main-ranking .item-info .price strong {font-weight:800; color:#e61655; font-size:var(--font-size-30);}
.main-ranking .btn-area {text-align:center;}
.main-ranking .more-btn {display:inline-flex; justify-content:center; align-items: center; width:clamp(140px, calc(210 / var(--inner) * 100vw), 210px); height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding:var(--space-12) var(--space-24); background:var(--color-primary); color:#fff; border-radius:50px; font-size:var(--font-size-18); font-weight:500;}
.main-ranking .more-btn:hover {background:var(--color-primary-over);}

.main-posts {padding:var(--space-120) 0; background:#f5f5fc;}
.main-posts .contain {max-width:1660px;}
.main-posts .row {display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-60);}
.main-posts .col {position:relative;}
.main-posts .col h2 {margin-bottom:var(--space-30); font-size:var(--font-size-40); line-height:1.3em; letter-spacing:-.03em; color:#000;}

.posts-list {margin-bottom:var(--space-30); border-top:1px solid #d8d8d8; font-size:var(--font-size-20); line-height:1.4em; letter-spacing:-.02em;}
.posts-list li {border-bottom:1px solid #d8d8d8;}
.posts-list a {display:flex; align-items:center; gap:20px; height:84px; padding:14px;}
.posts-list a:hover .tit {text-decoration: underline;}
.posts-list a:hover .img img {transform:scale(1.1)}
.posts-list .tit {flex:1 1 auto; min-width:0; width:1%; height:1.4em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.posts-list .date {color:#777;}
.posts-list .img {width:60px; height:60px; border-radius:10px; overflow:hidden;}
.posts-list .img img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.posts-list .name {font-weight:700; color:var(--color-primary);}
.posts-more {position:absolute; top:.3em; right:0; display:flex; align-items:center; justify-content:center; padding-bottom:.1em; width:var(--space-50); height:var(--space-50); background:var(--color-primary); color:#fff; font-size:var(--font-size-40); font-weight:100; line-height:1em; text-decoration:none; transition:all 0.3s ease;}
.posts-more:hover {background:#5a7a75; transform:scale(.9);}

/* sub */  
#contArea {max-width:1260px; padding:var(--space-100) var(--space-container) var(--space-150); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.real-cont {min-height:300px;}

/* footer */
#footer {padding:var(--space-50) 0; background:#000; color:#fff; font-size:var(--font-size-16); font-weight:200; line-height:1.5em; letter-spacing:-.02em;}
#footer address {font-style:normal;}
#footer a:hover {text-decoration: underline;}
#footer .contain {max-width:1660px; display:flex; justify-content:space-between; align-items:center; gap:var(--space-40);}

.foot-logo {order:2;}
.foot-links {display:flex; flex-wrap:wrap; gap:var(--space-10) var(--space-30); font-weight:600; margin-bottom:10px;}
.foot-info address span {display:inline-block; margin:0 20px 6px 0;}
.foot-info .copyright {margin-top:var(--space-30);} 

#footer.sub-footer {background:#fff; color:#000; font-weight:300; border-top:1px solid #cfcfcf;}