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

#skipToContent a {z-index:100000;position:absolute;overflow:hidden;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}
#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-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

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

/* ****************** HEADER ********************** */
#header{position:fixed; top:0px; left:0px; width:100%; height: var(--header-height); z-index:888;}
#header.active {background: #fff;}
#header.active #headerInner .logo img {filter: none;}
#header.active #headerInner .menu-open-btn .line {background: var(--primary-color);}
#headerInner{display: flex; align-items: center; justify-content: center; position:fixed;top:0px; left:0px;width:var(--left-menu-width);height:var(--header-height); box-sizing:border-box;transform:translateX(0);transition: all .2s ease-out 0s;}
#main .open #headerInner {transform:translateX(-100%);}
@media all and ( min-width: 1281px ){
	#sub #headerInner{
		transform:translateX(-100%);
	}
}
#headerInner .logo {position:relative; z-index:100; display:inline-block; vertical-align:middle;}
#headerInner .logo a{display:block;}
#headerInner .logo img{display:block; vertical-align:top; filter: grayscale(1) brightness(10);}
#headerInner .menu-open-btn {position:absolute; right: 0; border: 0; background: 0;}
#headerInner .menu-open-btn .line{display:block; width:20px; height:2px; background-color:#fff; margin:6px 0;}

/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9997;}	/* gnb overlay BG */
#gnb {position:fixed; top:0; bottom:0px; left:0; width:var(--left-menu-width); min-height:700px; background-color:#f2f1ed; z-index:9999; box-sizing:border-box; border-right:1px solid #e5e5e5;  transition: all .2s ease-out 0s;}
#main #gnb{transform:translateX(-100%); border:0; transition: all .2s ease-out 0s; }
#main .open #gnb {transform:translateX(0)}
#gnb .gnb-logo{display: flex; align-items:center; justify-content: center; height:var(--header-height); text-align:center; border-bottom:1px solid #e5e5e5;}
/* GNB :: Menu */
#gnb .gnb-menu-list{margin:20px 0;}
#gnb .gnb-menu-list > li{position:relative; word-break:keep-all;}
#gnb .gnb-menu-list > li > a{position:relative;z-index:100;display:flex; align-items: center;height:44px;padding:0 var(--container-space);color:#272320;font-size:17px;letter-spacing:-0.25px;font-weight:400;-webkit-transition:all 0.3s;transition:all 0.3s;}
#gnb .gnb-menu-list > li > a span{position:relative;display:block;width: 100%;overflow:hidden;}
#gnb .gnb-menu-list > li > a span:before{position:absolute;top:0;bottom:0;left:-1px;width:100%;background-color:var(--secondary-color);content:"";z-index:0;transform-origin: 100% 0;transform: translateX(-100%);}
#gnb .gnb-menu-list > li > a em{display:inline-block;position:relative;z-index:1; font-style: normal;}
#gnb .gnb-menu-list > li > a .off-tit{opacity:1.0;transition: all .2s 0.1s;}
#gnb .gnb-menu-list > li > a .on-tit{opacity:0;position:absolute;left:0;transition: all .3s;}
#gnb .gnb-menu-list > li > a .on-tit:before{position:absolute;top:50%;left:0px;width:5px;height:18px;margin-top:-9px;background-color:#272320;content:"";}
/* active */
#gnb .gnb-menu-list > li.active > a{background-color:#272320;}
#gnb .gnb-menu-list > li.active > a .on-tit{opacity:1.0;color:#fff;padding-left:19px;}
#gnb .gnb-menu-list > li.active > a .off-tit{opacity:0;}
#gnb .gnb-menu-list > li > a:hover{-webkit-transition-duration:0.4s;transition-duration:0.4s;}
#gnb .gnb-menu-list > li > a:hover span:before{transform: translateX(100%);left:0px;transform-origin: 0 0;transition: transform .6s cubic-bezier(.32,.625,.58,1);}
#gnb .gnb-menu-list > li > a:hover .on-tit{opacity:1.0;padding-left:19px;transition-delay:0.1s}
#gnb .gnb-menu-list > li > a:hover .off-tit{opacity:0;transition: all .4s 0s;}

/* -------- GNB :: 하단 Util Box -------- */
.gnb-util-box{padding:0 var(--container-space) 30px;}
/* 서브메뉴 */
.gnb-util-sub-list{padding: 0 var(--container-space);}
.gnb-util-sub-list li a{overflow:hidden; display:inline-block; position:relative; color:#505050; letter-spacing:-0.25px; font-size:14px; font-weight: 300; text-transform:uppercase}
.gnb-util-sub-list li a em{display:inline-block; position:relative; z-index:1; transition: all .2s 0.1s; font-style: normal;}
.gnb-util-sub-list li a .on-tit{opacity:0; position:absolute; left:0; transition: all .3s 0s;}
.gnb-util-cs {display: flex; align-items:center; gap: 8px; padding: 15px var(--container-space); border-top: 1px solid #e5e5e5; color: #312211; font-weight: 600;}
.gnb-util-cs .icon {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 100%; background: #312211;}
.gnb-util-cs.gnb-inquiry {background: #23371c; color: #fff;}
.gnb-util-cs.gnb-inquiry .icon {background: unset;}
.gnb-util-sub-list li a:before{position: absolute;top:-3px;bottom:-3px;left: 0;width: 100%;background: #272320;transform-origin: 100% 0;transform: translateX(-100%);content:"";visibility:hidden;}
.gnb-util-sub-list li a:hover:before{transform-origin: 0 0;transform: translateX(100%);transition: transform .5s cubic-bezier(.32,.625,.58,1);visibility:visible;}
.gnb-util-sub-list li a:hover .off-tit{opacity:0; transition: all .4s 0s;}
.gnb-util-sub-list li a:hover .on-tit{opacity:1.0; transition-delay:0.1s}
/* 검색영역 */
.gnb-util-search-box{position:relative; margin: 20px var(--container-space); border-bottom:2px solid #e5e5e5;}
.gnb-util-search-box:before{position:absolute; bottom:-2px; left:0px; width:100%; height:2px; background-color:#272320; content:""; transform:scaleX(0); transition:all 0.5s}
.gnb-util-search-inner{position:relative; overflow:hidden; padding-left:37px; transition:padding 0.5s; }
.gnb-util-search-box label{position:absolute; top:0; left:0px; transition:all 0.5s}
.gnb-util-search-box label .icon {transition:color 0.5s; filter: brightness(5) invert(1);}
.gnb-util-search-box input{height:30px; width:100%; color:#aaa; background: #f2f1ed; font-size:14px; border:0; }
.gnb-util-search-box input::placeholder{color:#ccc;}
.gnb-util-search-box input:focus{outline:none; color:#272320}
.gnb-util-search-box input:focus + label .icon{color:#272320}
.gnb-util-search-box .gnb-search-btn{position:absolute; top:0; right:-50px; transition:all 0.5s; border: 0; background: 0;}
.gnb-util-search-box .gnb-search-btn .icon{font-size:24px; letter-spacing:-0.25px; color:#272320; transition:color 0.5s;}
.gnb-util-search-box.active:before{transform:scale(1)}
.gnb-util-search-box.active .gnb-util-search-inner{padding-left:0}
.gnb-util-search-box.active label{left:-50px}
.gnb-util-search-box.active input{width:calc(100% - 30px)}
.gnb-util-search-box.active .gnb-search-btn{right:0}

/* 윗쪽으로 뜨게 */
.share-btn-wrapper2[data-row="top"] .share-sns-list{left:-8px; bottom:30px; }
.share-btn-wrapper2[data-row="top"] .share-sns-list li{bottom:0;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(1){bottom:5px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(2){bottom:55px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(3){bottom:105px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(4){bottom:155px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(5){bottom:205px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(6){bottom:255px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(7){bottom:305px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(8){bottom:355px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(9){bottom:405px;}
.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(10){bottom:455px;}

/* GNB ScrollBar */
#gnb .mCSB_scrollTools{top:6px; bottom:6px;}
#gnb .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:3px; background-color:#8b857e}
#gnb .mCSB_scrollTools .mCSB_draggerRail{width:1px;}

/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}


/* main */
.main-visual {position:relative; height:100vh; overflow:hidden;}
.main-visual .slick-slide {position:relative; height:100vh; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .slick-dots {display: flex; justify-content: center; align-items:center; gap: 20px; position:absolute; bottom:200px; left:0; width:100%; text-align:center; line-height:0; z-index:50; line-height: 0;}
.main-visual .slick-dots li {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px;}
.main-visual .slick-dots button {position:relative; display:block; width:60%; height:60%; background:transparent; border:3px solid rgba(255,255,255,.5); border-radius:100%; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-visual .slick-dots .slick-active button {width: 100%; height: 100%; border-color: #fff;}
.main-visual-txt {position: absolute; top: 50%; left: 0; right: 0; padding: 0 30px; transform:translateY(-50%); text-align: center; color: #fff;}
.main-visual-txt > *:not(a) {transform: translate(0, 50px); opacity: 0; transition: 1.2s;}
.main-visual-txt h2 {font-size:clamp(24px, calc( 64 / var(--inner) * 100vw ), 64px); line-height: 1.3em;}
.main-visual-txt p {margin: clamp(12px, calc( 20 / var(--inner) * 100vw ),20px) 0 clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.main-visual-txt .btn-more {margin: 0 auto;}
.main-visual .scroll {position:absolute; bottom:60px; left:0; width:100%; text-align: center;  z-index:40;}
.main-visual .scroll p {margin-bottom: 5px; font-weight: 600; color: #fff; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.main-visual .scroll-img {animation:scrollDown .9s linear infinite alternate;}
.slick-active .main-visual-txt > * {transform: translate(0, 0); opacity: 1;}
.slick-active .main-visual-txt h2 {transition-delay: .3s;}
.slick-active .main-visual-txt p {transition-delay: .5s;}
@media (min-aspect-ratio: 16/9) {
	.main-visual .item iframe {height:56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-visual .item iframe {width:177.78vh;}
}
@keyframes scrollDown{
	0%{transform:translateY(0);}
	100%{transform:translateY(15px);}
}
.btn-more {display: flex; align-items: center; justify-content: center; width: 200px; height: 50px; color: #fff; border: 1px solid #fff;}
.btn-more:hover {background: #fff; color: var(--dark-color);}

.main-section {position: relative; width: calc(100% - var(--left-menu-width)); margin-left: auto; overflow: hidden;}
.main-introduct-txt {background: var(--primary-color); color: #fff;}
.main-introduct-txt .item {padding: clamp(20px, calc( 75 / var(--inner) * 100vw ), 75px) clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.main-introduct-txt h2 {margin: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px) 0;font-size: clamp(22px, calc( 48 / var(--inner) * 100vw ), 48px); line-height: 1em;}
.main-introduct-ctr {display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; bottom: clamp(20px, calc( 75 / var(--inner) * 100vw ), 75px); width: 100%; padding: 0 clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.main-introduct-ctr .slick-dots {display: flex; justify-content: center; align-items:center; gap: 20px; text-align:center; line-height:0; z-index:50; line-height: 0;}
.main-introduct-ctr .slick-dots li {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; cursor: pointer;}
.main-introduct-ctr .slick-dots button {position:relative; display:block; width:60%; height:60%; background:transparent; border:3px solid rgba(255,255,255,.5); border-radius:100%; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-introduct-ctr .slick-dots .slick-active button {width: 100%; height: 100%; border-color: #fff;}
.main-introduct-ctr .arrows {display: flex; align-items: center; gap: clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px);}
.main-introduct-ctr .slick-arrow {width: 18px; height: 31px; background: url('/images/main/slick-arrow.png') no-repeat center center; background-size: contain; overflow: hidden; text-indent: -9999em; border: 0;}
.main-introduct-ctr .slick-arrow.slick-prev {transform: rotate(180deg);}
.main-introduct-box01 .items {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.main-introduct-box01 {position: absolute; top: 0; left: 0; z-index: 10;  float: left; width: 29.6912%;}
.main-introduct-box02 {position: relative; float: left; width: 29.6912%; margin-left: 29.6912%;}
.main-introduct-box03 {position: relative; float: left; width: 40.6176%;}
.main-introduct-box04 {position: relative; float: left; width: 59.3824%;}
.main-introduct-box05 {position: relative; float: left; width: 40.6176%;}
.main-introduct-img .img {display: block; width: 100%; overflow: hidden;}
.main-introduct-box01 .wrapper {padding-bottom: 100%;}
.main-introduct-box02 .img {padding-bottom: 100%;}
.main-introduct-box03 .img {padding-bottom: 73.0993%;}
.main-introduct-box04 .img {padding-bottom: 50%;}
.main-introduct-box05 .img {padding-bottom: 73.0993%;}
.main-introduct-img {overflow: hidden;}
.main-introduct-img img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover; transition: .4s;}
.main-introduct-img .img:hover img {transform: translateY(-50%) scale(1.05);}

.main-introduct-ctr .slick-dots li:first-child{margin-left:0}
.main-introduct-ctr .slick-dots li span{position:relative; display:block; width:20px; height:20px;}
.main-introduct-ctr .slick-dots li span:before{position:absolute; top:50%; left:50%; width:10px; height:10px; box-sizing:border-box; border:2px solid rgba(255,255,255,0.25); border-radius:50%; content:""; transform:translate(-50%,-50%); opacity:1.0; transition:all 0.2s; }
.main-introduct-ctr .slick-dots li span svg{position:absolute; top:0; left:0; width:20px; height:20px;transform:rotate(-90deg); transition:all 0.5s}
.main-introduct-ctr .slick-dots li span svg circle{display: none;fill:transparent;stroke:#fff;stroke-width:3px;stroke-linecap:round;stroke-dasharray: 100;stroke-dashoffset: -60;}
.main-introduct-ctr .slick-dots .slick-active span:before{opaicty:0; width:19px; height:19px; border-width:3px; }
.main-introduct-ctr .slick-dots .slick-active svg{opacity:1.0;}
.main-introduct-ctr .slick-dots .slick-active svg circle{display:block;}


.main-search {padding: clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px) 0 clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.main-search h2 {font-size: clamp(22px, calc( 48 / var(--inner) * 100vw ), 48px); line-height: 1em;}
.main-search p {margin: clamp(12px, calc( 25 / var(--inner) * 100vw ), 25px) 0 clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px);}
.main-search-wrap {display: flex; gap: 10px 20px; width: 100%; max-width: 600px; margin: 0 auto; padding: clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); background: var(--secondary-color);}
.main-search-wrap .input {padding: 0; flex: 1; background: var(--secondary-color); border: 0; color: #fff;}
.main-search-wrap .input:focus {outline: none;}
.main-search-wrap .input::placeholder {color: #fff; opacity: .7; font-weight: 600; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.main-search-wrap button {width: 30px; background: url('/images/main/icon-search.png') no-repeat center center; background-size: contain; border: 0;}
.search-hashtags {gap:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); margin-top: 25px;}

.main-facility-items {display: flex; width: 100%; height: 700px; white-space:nowrap; overflow: hidden;}
.main-facility-item {position: relative; width: 120px; transition: .5s; cursor: pointer;}
.main-facility-item.active {flex: 1;}
.main-facility-inner {position: absolute; top: 0; bottom: 0; right: 0; width: 120px; padding-bottom: 60px; display: flex; flex-direction: column; justify-content: flex-end; align-items:center; background: rgba(0,0,0,.7); cursor: pointer;}
.active .main-facility-inner {background: var(--secondary-color); cursor: auto;}
.main-facility-item h2 {position: absolute; top: 100px; left: 0; right: 0; transform: rotate(90deg); color: #fff; font-weight: 300; font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px);}
.main-facility-icon {display: block;}
.main-facility-icon span {display: block; width: 31px; height: 31px;}
.main-facility-icon .arrow {position: relative; background: url('/images/main/main-facility-arrow.png') no-repeat center center; height: 0; transition: .3s;}
.main-facility-icon .arrow:before {position: absolute; content: ''; top: 50%; left: -5px; width: 26px; height: 4px; margin-top: -2px; background: #fff; transition: all 0.3s 0s; opacity: 0;}
.main-facility-icon .plus {background: url('/images/main/main-facility-plus.png') no-repeat center center; transition: .3s;}
.main-facility-inner:hover .main-facility-icon .plus {transform: rotate(.5turn);}
.active .main-facility-icon .arrow {height: 31px;}
.active .main-facility-icon .arrow:hover {transform:translateX(5px)}
.active .main-facility-icon .arrow:hover:before {opacity: 1;}
.active .main-facility-icon .plus {height: 0;}
.over-img {overflow: hidden;}
.main-portfolio {padding: clamp(40px, calc( 200 / var(--inner) * 100vw ), 200px) 0; background: url('/images/main/bg-portfolio.jpg') no-repeat center center; background-size: cover;}
.main-portfolio .contain {max-width: 1560px;}
/* 메인 게시판 :: 탭 */
.main-portfolio-top {position: relative; margin-bottom:85px; text-align:center;}
.main-portfolio-top .swiper-arrow {position: absolute; right: 0; width: 18px; height: 31px; background: url('/images/main/portfolio-arrow.png') no-repeat center center; background-size: contain; cursor: pointer;}
.main-portfolio-top .swiper-arrow.swiper-prev {right: auto; left: 0; transform: rotate(180deg);}
.main-portfolio-tab {display:inline-block; position: relative; text-align:center;}
.main-portfolio-tab .line {height: 5px; position: absolute; bottom: 0; width: 100px; background: #333;}
.main-portfolio-tab ul li {display:inline-block; margin-left:-4px; width:auto; text-align:center;}
.main-portfolio-tab ul li:first-child{margin-left:0}
.main-portfolio-tab li a {display:block; padding-bottom:22px; border-bottom:5px solid #ddd; color:#000; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; }
/* 메인 게시판 :: 리스트 */
.portfolio-slider {margin: 0 -20px;}
.portfolio-slider .swiper {overflow: visible;}
.main-board-item {padding: 0 20px;transition:all 1.5s;}
.main-board-item a{overflow:hidden; display:block; position:relative; padding:16px 0 190px; }
.main-board-item a:before{content:"";display: block;position: absolute;top: 16px;left: 0;bottom: 0;width: 100%;background-color: var(--secondary-color);transform-origin: 0 0 ;transform: scaleY(0);z-index:1;transition: transform .5s cubic-bezier(.32,.625,.58,1);}
.main-board-item.board-wood a:before {background-image: url('/images/main/board-woodhouse.png'); background-repeat: no-repeat; background-position: right 20px bottom 20px;}
.main-board-item.board-flea a:before {background-image: url('/images/main/board-flea-market.png'); background-repeat: no-repeat; background-position: right 20px bottom 20px;}
.main-board-item.board-tarp a:before {background-image: url('/images/main/board-tarp.png'); background-repeat: no-repeat; background-position: right 20px bottom 20px;}
.main-board-item.board-backwall a:before {background-image: url('/images/main/board-back-wall.png'); background-repeat: no-repeat; background-position: right 20px bottom 20px;}
.main-board-item .main-board-thumb-box{overflow:hidden; position:relative;  }
.main-board-item .main-board-thumb{display:block; position:relative; width: 100%; padding-top:70.8245%; height:0; transition: all 1s; transform: scale(1);}
.main-board-item .main-board-thumb img {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.main-board-item .main-board-info-box{position:absolute;left:0;right:0;top:16px;bottom:0px;/* margin-top:55.31%; */margin-top:70.8245%;z-index:2;transition:margin-top 0.5s;}
.main-board-item .main-board-info-inner{position:relative; z-index:1; padding:40px 6%;  transition:all 0.5s; }
.main-board-item .main-board-info-inner .category{position:absolute; left:6%; top:0; min-width: 80px; text-align: center; padding:5px 14px; background-color:var(--primary-color); color:#fff; font-size:12px; font-weight:700; transform:translateY(-16px); transition:all 0.5s;}
.main-board-tit {position: relative;  padding-bottom:clamp(25px, calc( 75 / var(--inner) * 100vw ), 75px); transition:all 0.5s;font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; color: var(--dark-color);}
.main-board-tit:before{position:absolute; bottom:0; left:0; width:100px; height:1px; background-color:#fff; content:"";}
.main-board-tit:after{position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#fff; opacity:0.2; content:"";}

@media all and ( min-width: 1025px ){
	/* over */
	.main-board-item a:hover:before{transform-origin: 100% 100%; transform: scaleY(1);}
	.main-board-item a:hover .main-board-info-box{margin-top:0}
	.main-board-item a:hover .main-board-info-inner{padding-top:87px}
	.main-board-item a:hover .main-board-info-inner .category{padding-top:62px;}
	.main-board-item a:hover .main-board-tit{color:#fff;}
}

.full-img img {width: 100%;}
.main-inquiry .contain {position: absolute; max-width: 100%; bottom: 0; left: 0; right: 0; gap: 20px clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); padding: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) var(--container-space); background: rgba(0,0,0,.7);}
.main-inquiry .txt {gap: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.main-inquiry h2 {font-weight: 600; font-size: clamp(22px, calc( 48 / var(--inner) * 100vw ), 48px); line-height: 1em;}
.main-inquiry p {opacity: .7;}
/* sub */
.sub-visual {position:relative; overflow:hidden;width: calc(100% - var(--left-menu-width)); margin-left: auto; height:550px; background:#333; color:#fff; font-weight: 600; text-align:center;}
.sub-visual .bg {position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; transition:2s; opacity:0; transform:scale(1.1);}
.sub-visual .inner {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); padding-bottom: var(--lnb-height);}
.sub-visual h2 {margin-top: 20px; font-size:64px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.sub-visual .main-search-wrap {margin-top: 20px;}
.sub-visual .bg1 {background-image:url("/images/common/sv1.jpg");}
.sub-visual .bg2 {background-image:url("/images/common/sv2.jpg");}
.sub-visual .bg3 {background-image:url("/images/common/sv3.jpg");}
.sub-visual .bg4 {background-image:url("/images/common/sv4.jpg"); background-position: top center;}
.sub-visual.none-lnb .inner {padding:0;}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}

.lnb-wrap {position:relative; margin-top: calc(var(--lnb-height) * -1); padding: 0 var(--container-space); margin-bottom: clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px); width: calc(100% - var(--left-menu-width)); margin-left: auto;}
.lnb {margin:0 auto; max-width:1500px;}
.lnb ul {display:flex;}
.lnb ul li {position: relative; flex:1; text-align:center; background: var(--secondary-color);}
.lnb ul li:not(:last-child):before {position: absolute; content: ''; right: 0; top: 50%; width: 1px; height: 30px; margin-top: -15px; background: #fff; opacity: .3;}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:var(--lnb-height); padding:0 20px; color:#fff; font-size:16px; line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li.active {background:#fff;}
.lnb ul li.active a {color:var(--dark-color); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;}
.lnb.project-lnb ul li {background: #fff;}
.lnb.project-lnb ul li:not(:last-child):before {background: #ddd; opacity: 1;}
.lnb.project-lnb ul li a {color: #505050;}
.lnb.project-lnb ul li.active a {background: #f2f1ed; color: #121212;}

.third-menu-wrap {position: relative; margin-bottom: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); background: #f4f4f4;}
.third-menu-wrap:before {position: absolute; content :''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; pointer-events: none;}
.third-menu li {position: relative; flex: 1 1 auto;}
.third-menu li:not(:last-child):after {position: absolute; content: ''; top: 0; bottom: 0; right: 0; width: 1px; background: #ddd;}
.third-menu a {display: block; padding: 15px 28px; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); text-align: center;}
.third-menu .active a {background: var(--primary-color); color: #fff;}

.sub-title {padding-top:100px; padding-bottom:80px; max-width:1260px; margin:0 auto;}
#contArea.wide .sub-title {padding-left:var(--container-space); padding-right:var(--container-space);}
.sub-title.blind {padding: 0;}
.sub-title h1 {font-size:42px; line-height:1.3em; color:#2c2c2c;}
.sub-title .doc-tit {margin-bottom:22px;}

#sub #container {position: relative; width: calc(100% - var(--left-menu-width)); margin-left: auto; overflow: hidden;}
#contArea {max-width:1560px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}

.real-cont {padding-bottom:clamp(40px, calc( 150 / var(--inner) * 100vw ), 150px);}
.icon img {vertical-align: middle; margin-top: -.02em;}
.txt-center {text-align: center;}

.desc p:not(:last-child) {margin-bottom: 1.88em;}
.pb100-40 {padding-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.pt100-40 {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.border-box {position: relative;}
.border-box:before {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd;}

.flex-wrap {display: flex;}
.flex-center {display: flex; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}
.flex-mid {display: flex; align-items: center;}
.flex-column {display: flex; flex-direction: column;}
.flex1 {flex: 1;}

.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}

.fz12 {font-size: 12px; line-height: 1em;}
.fz14-13 {font-size: clamp(13px, calc( 14 / var(--inner) * 100vw ), 14px); line-height: 1.3em;}
.fz16-14 {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); line-height: 1.625em;}
.fz20-16 {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}

.primary-color {color: var(--primary-color);}
.secondary-color {color: var(--secondary-color);}
.dark-color {color: var(--dark-color);}
.white-color {color: #fff;}

/* footer */
.quick-inquiry-box{position:fixed; top: 50%; right:-100px; z-index:999;transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);}
.quick-inquiry-box.open{right:0px;}
#middleArea .quick-inquiry-box{bottom:75px;}
/* 견적문의 :: Toggle 버튼 */
.quick-inquiry-box .quick-inqiury-open-btn{position:absolute; bottom:0px; right:100%; width:50px; height:140px; background-color:var(--secondary-color); border-radius:10px 0 0 10px; transition:all 0.3s 0.2s; border: 0;}
.quick-inquiry-box .quick-inqiury-open-btn em{display:block; color:#fff; font-size:16px; letter-spacing:-0.5px; line-height:1.2; font-style: normal;}
.quick-inquiry-box .quick-inqiury-close-btn{position:absolute; bottom:0px; right:100%; width:40px; height:40px; background-color:var(--secondary-color); border-radius:10px 0 0 10px; transition:all 0.3s; opacity:0; visibility:hidden; border: 0;}
.quick-inquiry-box .quick-inqiury-close-btn i{display:block; color:#fff; font-size:16px; line-height:50px;}
.quick-inquiry-box.open .quick-inqiury-open-btn{transform:translateX(100%); transition-delay:0s; opacity:0;}
.quick-inquiry-box.open .quick-inqiury-close-btn{opacity:1.0; visibility:visible;}
/* 견적문의 :: 리스트 */
.quick-inquiry-container{position:relative; width:100px;}
.quick-prd-list-inner{position:absolute; width:100%; bottom:200px;}
.quick-menu-prd-list{max-height:calc(120px*4)}
.quick-menu-prd-list .quick-prd-item{width:100px; height:100px; border-top:1px solid #ddd}
.quick-menu-prd-list .quick-prd-item a{display:block; width:100%;}
.quick-menu-prd-list .quick-prd-item .quick-prd-thumb{display:block; position:relative; overflow:hidden; height:0; padding-top:100%; background-color:#fff;}
.quick-menu-prd-list .quick-prd-item .quick-prd-thumb img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition:all 0.3s;}
.quick-menu-prd-list .quick-prd-item a:hover .quick-prd-thumb img{transform:scale(1.1)}
.quick-menu-prd-list .quick-prd-item .quick-prd-delete{position:absolute; top:0px; right:0px; width:20px; height:20px; background-color:var(--dark-color); background-image: url('/images/common/quick-item-close.png'); background-repeat: no-repeat; background-position: center center; border: 0; color:#fff;}
.quick-menu-controls{display: flex; position:relative; overflow:hidden; background-color:var(--secondary-color);}
.quick-menu-controls:before{position:absolute; top:0px; bottom:0px; left:50%; width:1px; background-color:var(--secondary-color); content:"";}
.quick-menu-controls button{display: flex; align-items: center; justify-content: center; height:40px; width:50%; border: 0; cursor:pointer;}
.quick-menu-controls .swiper-button-disabled{opacity:0.5; cursor:default;}
/* 견적문의 :: 문의/담기버튼 */
.quick-bottom-btns button{width:100px; height:100px; font-size:18px; border: 0;}
.quick-bottom-btns .to-inqiuiry-btn{background-color:#272320}
.quick-bottom-btns .to-put-btn{background-color:var(--primary-color)}
.quick-bottom-btns .to-as-btn{background-color:#333}
.quick-bottom-btns button .icon{display:block; color:#fff; font-size:1.33em; margin-bottom:5px;}
.quick-bottom-btns button em{display:block; color:#fff; font-size:1em; letter-spacing:-0.5px; font-style: normal; font-size: 14px;}

/* 230907 유지보수 add-css */
.quick-inquiry-box.add-css{}
.quick-inquiry-box.add-css .quick-prd-list-inner {bottom: 200px;}
.quick-inquiry-box.add-css .quick-menu-prd-list{max-height:calc(120px*3)}

@media all and (min-width:801px){
	.quick-inquiry-box.add-css .quick-inqiury-open-btn em{line-height:1.1;font-size:12px;font-weight:900;}
	.quick-inquiry-box.add-css .quick-inqiury-open-btn em:first-child {line-height:2;font-size:16px;}
	.quick-inquiry-box.add-css .quick-inqiury-open-btn i {margin:7px 0 0 0;}
}
@media all and ( max-width: 800px ){
	/* 견적문의 :: Toggle 버튼 */
	.quick-inquiry-box.add-css .quick-inqiury-open-btn i{font-size:15px !important;}
	.quick-inquiry-box.add-css .quick-inqiury-open-btn em {font-size:11px !important; }
	.quick-inquiry-box.add-css .quick-inqiury-open-btn em:first-child {font-weight:900; font-size:12px  !important; }
}
@media all and ( max-height: 850px ){
	.quick-inquiry-box.add-css .quick-prd-list-inner {bottom: 150px;}
}
@media all and ( max-width: 800px ){
	.quick-inquiry-box.add-css .quick-menu-prd-list {max-height: calc(70px*3);}
	.quick-inquiry-box.add-css .quick-prd-list-inner {bottom: 102px;}
}
/* // 230907 유지보수 add-css */

@media all and ( max-height: 850px ){
	/* 견적문의 :: 리스트 */
	.quick-prd-list-inner{bottom:100px;}
	/* 견적문의 :: 문의/담기버튼 */
	.quick-bottom-btns button{height:50px; font-size:14px;}
	.quick-bottom-btns button .icon,
	.quick-bottom-btns button em{display:inline-block; vertical-align:top;}
	.quick-bottom-btns button .icon{margin:0 8px 0 0; position:relative; top:2px;}
}
@media all and ( max-height: 700px ){
	/* 견적문의 :: 리스트 */
	.quick-menu-prd-list{max-height:calc(120px*3)}
}
@media all and ( max-width: 800px ){
	.quick-inquiry-box{right:-70px;}
	/* 견적문의 :: Toggle 버튼 */
	.quick-inquiry-box .quick-inqiury-open-btn{width:30px; height:100px; }
	.quick-inquiry-box .quick-inqiury-open-btn i{font-size:18px; margin-bottom:5px;}
	.quick-inquiry-box .quick-inqiury-open-btn em {font-size:12px; }
	.quick-inquiry-box .quick-inqiury-close-btn{width:34px; height:34px;}
	.quick-inquiry-box .quick-inqiury-close-btn i{line-height:34px;}
	/* 견적문의 :: 리스트 */
	.quick-inquiry-container{width:70px}
	.quick-prd-list-inner{bottom:68px;}
	.quick-menu-prd-list{max-height:calc(70px*3)}
	.quick-menu-prd-list .quick-prd-item{width:70px; height: 70px;}
	.quick-menu-controls button{height:34px;}


	/* 견적문의 :: 문의/담기버튼 */
	.quick-bottom-btns button{width:70px; height:34px; font-size:12px;}
	.quick-bottom-btns button .icon{display:none;}
}

.float-inquiry {position: fixed; right: var(--container-space); bottom: clamp(70px, calc( 130 / var(--inner) * 100vw ), 130px); display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(80px, calc( 180 / var(--inner) * 100vw ), 180px); height: clamp(80px, calc( 180 / var(--inner) * 100vw ), 180px); padding-bottom: 10px; border-radius: 100%; background: #23371c; color: #fff; z-index: 100;}
.float-inquiry p {margin: 12px 0 0;font-size: clamp(18px, calc( 26 / var(--inner) * 100vw ), 26px);}
.float-inquiry span {display: block; margin: 7px 0 10px; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); line-height: 1em;}
.float-inquiry .btn-link {display: flex; align-items: center; justify-content: center; padding: 0 22px; background: var(--secondary-color); font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);}

#footer {position: relative; width: calc(100% - var(--left-menu-width)); margin-left: auto; overflow: hidden;padding: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px) 0;background:#272320; font-size: clamp(13px, calc( 14 / var(--inner) * 100vw ), 14px); line-height: 1.857em; color: #fff;}
#footer .contain {display: flex; justify-content: space-between;max-width: 1560px;}
.f-right {display: flex; flex-direction: column;}
.f-link {gap: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.f-link .icon {margin-right: 5px;}
#footer .sitename {margin-bottom: 15px;}
#footer address {font-style: normal; opacity: .5;}
#footer address span {position: relative; padding-right: 5px; margin-right: 5px;}
#footer address span:not(:last-child):after {position: absolute; content: '/'; right: -2px;}
#footer .sitelogo {justify-content: flex-end; padding: 12px 0;}
.copyright {margin-top: 15px; opacity: .5; font-size: 12px;}
.scroll-top {display:flex; justify-content:center; align-items:center; z-index:80; position:fixed; bottom:var(--container-space); right:var(--container-space); width:clamp(44px, calc( 80 / var(--inner) * 100vw ), 80px); height:clamp(44px, calc( 80 / var(--inner) * 100vw ), 80px); border-radius: 100%; background-color:#505050; color:#fff; font-size:12px; font-weight: 700; line-height:1em; text-align:center;}
.scroll-top span:before {display:block; content:""; margin:0 auto 10px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:7px solid #fff;}