@charset "utf-8";

.video-wrap {max-width:860px; margin:0 auto}
.video-container {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#000;}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video{position: absolute;top:0;left:0;width:100%;height:100%;}

/* 검색 */
.board-search {margin-bottom: var(--space-30);}
.board-search:after {content:""; display:block; clear:both;}
.board-search .total-page {float:left; color:#686868; font-size:15px; line-height:44px;}
.board-search .cate {float:left; margin-left:15px;}
.board-search .search {float:right;}
.board-search .search input.input {width:300px;}

/* 리스트 */
.portfolio-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30); padding: var(--space-30) 0; border-top: 2px solid var(--primary-color); border-bottom: 1px solid #ddd;}
.portfolio-list-item {position: relative; width: 100%; max-width: 446px;}
.portfolio-list-item .bg {position: relative; width: 100%; padding-bottom: 64.8%;}
.portfolio-list-item .bg img {position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.portfolio-list-item .txt {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; padding: var(--space-20); background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%); color: rgba(255, 255, 255, 0.8); opacity: 0; transition: 0.3s;}
.portfolio-list-item:hover .txt {opacity: 1;}
.portfolio-list-item .txt .tit {font-size: var(--font-size-18); font-weight: 600; line-height: 1.444em; color: #fff;}

.portfolio-view-title {margin-bottom: 20px;}
.portfolio-view {position: relative; display: flex; gap: 29px; flex-direction: row-reverse;}
.portfolio-sticky {flex: 0 0 511px; max-width: 511px; width: 100%;}
.portfolio-sticky-box {position: sticky; top: calc(var(--header-height) + var(--space-30)); display: flex; flex-direction: column; align-items: center; gap: var(--space-25); width: 100%; padding: var(--space-40); border: 1px solid rgba(229, 94, 5, 0.3); border-radius: var(--radius-24); background: rgba(229, 94, 5, 0.02); box-sizing: border-box;}
.portfolio-sticky-tit {width: 100%; font-size: var(--font-size-24); font-weight: 700; line-height: 1.3333em; letter-spacing: -0.03em; text-align: center; color: var(--primary-color);}
.portfolio-sticky-inner {display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;}
.portfolio-info {display: flex; flex-direction: column; gap: 24px; width: 100%; margin: 0; padding: 0; list-style: none;}
.portfolio-info-item {display: flex; flex-direction: column; gap: 4px;}
.portfolio-info-label {display: flex; align-items: center; gap: 10px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.5556em; letter-spacing: -0.03em; color: var(--dark-color);}
.portfolio-info-val {margin: 0; padding-left: 24px; font-size: clamp(14px, calc(16 / var(--inner) * 100vw), 16px); font-weight: 400; line-height: 1.625em; letter-spacing: -0.02em; color: #686868;}
.btn-portfolio-list {display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 56px; padding: 10px 40px; border-radius: 16px; background: var(--primary-color); font-size: clamp(14px, calc(16 / var(--inner) * 100vw), 16px); font-weight: 600; line-height: 26px; letter-spacing: -0.03em; color: #fff; text-align: center; box-sizing: border-box;}
.portfolio-view-cnt {min-width: 0;}

.portfolio-image {display: flex; gap: 14px; margin-bottom: clamp(40px, calc(60 / var(--inner) * 100vw), 60px);}
.prd-slider-for {position: relative; max-width: 640px; width: 75%;}
.prd-slider-for:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; z-index: 1; pointer-events: none;}
.prd-slider-for .slick-track {display: flex; height: 100%;}
.prd-slider-for .slick-slide {height: auto;}
.prd-slider-for .slick-list,
.prd-slider-for .slick-slide>div,
.prd-slider-for .image {height: 100%;}
.prd-slider-nav {flex:1; min-width: 0;}
.prd-slider-nav .slick-list {margin: -6px 0;}
.prd-slider-nav .slick-slide {padding: 6px 0;}
.portfolio-image .img {position: relative; width: 100%; height: 100%; padding-bottom: 74%; overflow: hidden;}
.portfolio-image .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain;}
.portfolio-image .prd-slider-nav .img img {object-fit: cover;}

.portfolio-gallery {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-30);}
.portfolio-gallery-item {width: 100%; }
.portfolio-gallery-item img {aspect-ratio: 415/269; width: 100%;}

.board-list table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid var(--gray-color);}
.board-list table thead th {height:53px; padding:9px 5px; color:#333; font-size:16px; font-weight:700; line-height:1.5em; background:#fafafa; border-bottom:1px solid #ddd;}
.board-list table tbody td {height:53px; padding:9px 5px; color:#505050; font-size:16px; font-weight:400; line-height:1.5em; text-align:center; border-bottom:1px solid #ddd;}
.board-list table tbody td.subject {text-align:left; padding-left:15px;}
.board-list table tbody td img {vertical-align:middle; margin:-.2em 2px 0;}
.board-list table tbody td a:hover {text-decoration:underline;}
.board-list table tbody tr:hover td {background-color:#fafafa;}
.board-list .label {color:#fff; font-weight:500; display:inline-block; padding:0 12px; font-size:14px; background:var(--primary-color); border-radius:4px;}
.board-list .comment {color:var(--primary-color); font-size:.85em; font-weight:700; line-height:1em;}
.board-list .goods-name {color:#242424; font-weight:700;}

.board-list-m {display:none; border-top:2px solid var(--gray-color);}
.board-list-m li {padding:14px 0; border-bottom:1px solid #ddd;}
.board-list-m li img {vertical-align:middle; margin:-.2em 2px 0; height:16px;}
.board-list-m li.none {padding:40px 0; text-align:center; color:#999;}
.board-list-m .label {display:inline-block;vertical-align:middle;margin:-.2em 4px 0 0;padding:0 6px;color:#fff;background:var(--primary-color);font-weight:500;font-size:12px;line-height:22px;border-radius:4px;}
.board-list-m .tit {color:#333; font-size:15px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.board-list-m .info {color:#888; font-size:12px; font-weight:400; line-height:1.3em; margin-top:7px;}
.board-list-m .info span {margin-right:10px;}
.board-list-m .comment {color:var(--primary-color); font-size:.85em; font-weight:700; line-height:1em;}
.board-list-m .store-name {color:#333; font-size:17px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.board-list-m .store-addr {font-size:14px; font-weight:400; line-height:1.3em; color:#505050; margin-top:4px;}
.board-list-m .btns {margin-top:12px;}
.board-list-m .btns .btn-map {line-height:28px; margin-right:4px;}
.board-list-m .goods-name {color:#505050; font-size:15px; font-weight:700; line-height:1.3em; margin-bottom:4px;}

.gallery-list {padding:25px 0 0 0; border-bottom:1px solid #ddd; border-top:2px solid var(--gray-color);}
.gallery-list ul {display:flex; flex-wrap:wrap; margin:0 -15px;}
.gallery-list ul li {width:25%; padding:0 15px; margin-bottom:35px; text-align:center;}
.gallery-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.gallery-list ul li a {display:block;}
.gallery-list ul li .thumb {position:relative; padding-bottom:65%; margin-bottom:12px; overflow:hidden;}
.gallery-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; 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;}
.gallery-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.gallery-list ul li .tit {color:#333; font-size:16px; line-height:1.4em;}
.gallery-list ul li .date {color:#767676; font-size:14px; line-height:1.3em; margin-top:6px;}

.news-list {border-top:2px solid var(--gray-color);}
.news-list ul li {display:flex; padding:20px 0; border-bottom:1px solid #ddd;}
.news-list .thumb {width:220px; margin-right:20px;}
.news-list .thumb a {display:block; position:relative; padding-bottom:65%; overflow:hidden;}
.news-list .thumb a img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; 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;}
.news-list .thumb a:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.news-list .info {flex:1 1 auto; min-width:0; width:1%;}
.news-list .tit {color:#333; font-size:18px; font-weight:700; line-height:1.4em; max-height:1.4em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap;}
.news-list .txt {margin-top:10px; color:#767676; font-size:16px; line-height:1.5em; max-height:4.5em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.news-list .date {margin-top:13px; color:#767676; font-size:14px; line-height:1.3em;}
.news-list ul li.none {display:block; width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}

.event-list {padding:40px 0 0; border-top:2px solid var(--gray-color); border-bottom:1px solid #ddd;}
.event-list ul {display:flex; flex-wrap:wrap; margin:0 -15px;}
.event-list ul li {width:33.33333333%; padding:0 15px; margin-bottom:45px; text-align:center;}
.event-list ul li a {display:block; position:relative; background:#fff;}
.event-list ul li .thumb {position:relative; height:0; padding-bottom:55%; margin-bottom:12px; overflow:hidden;}
.event-list ul li .thumb 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;}
.event-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.event-list ul li .tit {color:#333; font-size:16px; font-weight:700; line-height:1.4em;}
.event-list ul li .date {color:#767676; font-size:14px; line-height:1.3em; margin-top:6px;}
.event-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.event-list ul li.ended .ended-txt {position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; color:#fff; background:rgba(0,0,0,.4);}
.event-list ul li.ended .ended-txt p {width:100%;}
.event-list ul li.ended .tit {color:#767676;}
.event-list ul li.ended .date {color:#767676;}

.faq {border-top:2px solid var(--gray-color);}
.faq ul li {border-bottom:1px solid #ddd;}
.faq ul li:last-child {margin-bottom:0;}
.faq .tit {color:#333; font-size:16px; font-weight:600; line-height:1.5em;}
.faq .tit a {position:relative; display:flex; align-items:center; padding:12px 60px 12px 12px; text-decoration:none !important; transition:none;}
.faq .tit a:after {content:""; position:absolute; right:20px; top:20px; display:inline-block; width:14px; height:14px; border-right:2px solid #aaa; border-bottom:2px solid #aaa; transform:rotate(45deg);}
.faq .cnt {display:none; position:relative; padding:23px 30px 23px 63px; color:#505050;}
.faq .cnt .buttons {margin-bottom:0;}
.faq .q {display:inline-block; margin-right:15px; flex:0 0 38px; width:38px; height:38px; text-align:center; color:#fff; font-size:18px; font-weight:600; line-height:38px; background:var(--primary-color); border-radius:100%;}
.faq li.active {position:relative;}
.faq li.active .tit {background:#f4f4f4;}
.faq li.active .tit a:after {transform:rotate(-135deg); margin-top:6px; border-color:#555;}
.faq .none {padding:70px 0; text-align:center; color:#999;}

.calendar-head {text-align:center; margin-bottom:20px;}
.calendar-head h3 {display:inline-block; vertical-align:middle; margin:0 40px; color:#333; font-size:33px; line-height:1.15em;}
.calendar-head .cal-btn {display:inline-block; vertical-align:middle; width:46px; height:46px; overflow:hidden; text-indent:-999em; background-color:var(--primary-color); background-position:50% 50%; background-repeat:no-repeat; border-radius:100%;}
.calendar-head .cal-prev {background-image:url("/images/bbs/cal_prev.png");}
.calendar-head .cal-next {background-image:url("/images/bbs/cal_next.png");}
.calendar table {width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:0px;}
.calendar table th {padding:12px 4px; text-align:center; border:1px solid #ddd; background:#eee; color:#2d2c2c; font-size:16px; line-height:1.4em;}
.calendar table td {height:120px; padding:10px; vertical-align:top; border:1px solid #ddd; color:#454545; font-size:15px; line-height:1.4em; letter-spacing:-.03em;}
.calendar table tr th:first-child,
.calendar table tr td:first-child .cal-date {color:#ea4044;}
.calendar table tr th:last-child,
.calendar table tr td:last-child .cal-date {color:#3584e7;}
.calendar ul li {position:relative; padding-left:10px; margin-bottom:8px;}
.calendar ul li:last-child {margin-bottom:0;}
.calendar ul li:before {content:""; position:absolute; top:8px; left:0; width:4px; height:4px; background:#ddd; border-radius:100%;}
.calendar ul li a {display:block; line-height:1.4em; letter-spacing:-.03em; max-height:2.8em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.calendar ul li a:hover {text-decoration:underline;}
.calendar .cal-date {line-height:1em; font-weight:500; color:#767676; margin-bottom:10px;}
.calendar .cal-blank {background:#fcfcfc;}
.calendar .cal-holiday .cal-date {color:#ea4044 !important;}

/* 글작성 */
.board-white table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid var(--gray-color); border-bottom:1px solid var(--gray-color); font-size:16px; line-height:1.5em; letter-spacing:-.03em;}
.board-white table th {padding:12px 20px; border:1px solid #eee; background:#fafafa; font-weight:700; color:#333;}