:root{
	/* 페이지버튼 */
	--pagingNumC : #333;
	--pagingArrowC: #666;
	--aSize : 30px;
	--pagingMarTop: 90px;
}

/* ======== 페이징 기본 ======== */

/* 기본 */
.paging{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging .arr{display:flex;}
.paging .arr a.last,
.paging .arr a.first{letter-spacing:-10px;}
.paging .arr a.last i,
.paging .arr a.first i{-webkit-transform:translateX(-5px);transform:translateX(-5px);}
.paging a{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging ul{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 5px;}
.paging .arr a:not(:last-child),.paging ul li:not(:last-child){margin-right:5px;}

/* 커스텀 */
.paging{margin-top: var(--pagingMarTop);}
.paging a{width:var(--aSize); height:var(--aSize); color: var(--pagingNumC); font-family: var(--Nanum);  line-height: var(--aSize); font-weight: 600; font-size:16px; border-radius:50%; border:none; line-height: 1;}
.paging ul li.on a {
  color:#fff;
  background: var(--mainColor);
  border-color: var(--mainColor);
}
.paging .arr a{border:none; color: var(--pagingArrowC);}
.paging .arr a.first i{transform:translateX(-5px);}
.paging .arr a.last i{transform:translateX(-4px);}
.paging .arr a.first i:first-of-type{transform:translateX(-5px);}
.paging .arr a.last i:last-of-type{transform:translateX(-4px);}

@media screen and (max-width: 1280px){
	:root{
		--pagingMarTop: 50px;
	}
}

@media screen and (max-width:600px) {
	.paging a{font-size: 15px;}
	.paging .arr a:not(:last-child), .paging ul li:not(:last-child){margin-right: 0;}
}




/* filter */
#filter{ margin-bottom: 40px; position: relative; z-index: 20; }
#filter .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#filter .right{ display: flex; justify-content: flex-end; }

/* search-box */
.search-box{ --sizeH: 55px; --paddingT: 15px; --paddingR: 20px; }
.search-box *{ font-size: 1.7rem; font-weight: 500; color: #111; letter-spacing: -0.02em; }
.search-box .flex{ display: flex; flex-wrap: wrap; gap: 10px; }
.search-box select, .search-box input, .search-box button{ height: var(--sizeH); border-radius: 10px; -webkit-border-radius: 10px; appearance: none; -webkit-appearance: none; outline: none; }
.search-box select, .search-box input{ width: 100%; border: none; background: none; }
.search-box button{ width: var(--sizeH); background: #111; border: none; }
.search-box input{ padding: 0 var(--paddingR); font-weight: 400; }
.search-box input::placeholder{ color: #999; }

.search-box .selectric-box{ width: 200px; }
.search-box .selectric-box *{ font-size: 1.7rem; font-weight: 500; color: #111; }
.search-box .selectric-box .selectric{ background: var(--baseBg); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 10px; cursor: pointer; }
.search-box .selectric-box .selectric .label{ height: var(--sizeH); display: flex; align-items: center; margin: 0; padding-left: var(--paddingR); padding-right: calc(10px + (var(--paddingR) * 2)); }
.search-box .selectric-box .selectric .button{ width: calc(10px + (var(--paddingR) * 2)); height: var(--sizeH); background: none; }
.search-box .selectric-box .selectric .button::after{ content: ""; width: 100%; height: 100%; background: var(--baseBg) url("/img/sub/selectric_icon.svg") no-repeat center center / auto; border: none; margin: 0; position: absolute; top: 0; right: 0; }
.search-box .selectric-box .selectric-items{ border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.2); overflow: hidden; top: calc(100% - 1px); }
.search-box .selectric-box .selectric-items li{ background: var(--baseBg); padding: 10px var(--paddingR); }
.search-box .selectric-box .selectric-items li:not(:last-of-type){ border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.search-box .selectric-box .selectric-items li.highlighted{ background: var(--mainColor); color: #fff; }

.search-box .input{ width: 390px; height: var(--sizeH); background: var(--baseBg); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 10px; position: relative; }

/* search-box - 기간 검색 */
.search-box .period{ display: flex; align-items: center; padding-left: var(--paddingR); gap: 10px; }
.search-box .period > div{ width: calc((100% - 82px) / 2); position: relative; padding-left: 10px; }
.search-box .period > div::before{ content: url("/img/sub/calendar_icon.svg"); position: absolute; top: 53%; left: 10px; transform: translateY(-50%); }
.search-box .period > div::after{ content: "~"; font-weight: 400; color: #999; position: absolute; top: 50%; right: 0; transform: translate(50%,-50%); }
.search-box .period > div:last-of-type::after{ display: none; }

@media screen and (max-width: 1700px){
	/* table-box */
	.table-box th{ font-size: 1.9rem; }

	/* tab-list + search-box */
	#filter{ margin-bottom: 20px; }
	#filter .flex-box{ flex-direction: column; }
	#filter .tab-list{ margin-bottom: 40px; }
	#filter .tab-list ul{ margin-left: 0; }
	#filter .search-box{ width: 100%; display: flex; justify-content: flex-end; }
}

@media screen and (max-width: 1500px){
	/* search-box (공통) */
	.search-box{ --sizeH: 50px; }
}

@media screen and (max-width: 1280px){
	/* table-box */
	.table-box th{ font-size: 1.7rem; padding: 15px; }
	.table-box td{ font-size: 1.6rem; padding: 15px; }

	/* search-box (공통) */
	.search-box *{ font-size: 1.6rem; }
	.search-box .selectric-box *{ font-size: 1.6rem; }
}

@media screen and (max-width: 920px){
	/* search-box (셀렉트 2개) */
	.search-box.two .selectric-box{ width: calc((100% - 10px) / 2); }
	.search-box.two .input{ width: calc(100% - 10px - var(--sizeH)); }
}

@media screen and (max-width: 710px){
	/* search-box (셀렉트 1개) */
	#filter .search-box.one{ display: block; }
	.search-box.one .flex{ width: 100%; }
	.search-box.one .selectric-box{ width: 100%; }
	.search-box.one .input{ width: calc(100% - 10px - var(--sizeH)); }
}


/* ======== 예매 or 신청 리스트 ======== */
.reserve-list{ --imgW: 280px; }
.reserve-list ul{ border-top: 1px solid rgba(0, 0, 0, 0.2); }
.reserve-list li{ display: flex; padding: 50px 40px; background: var(--baseBg); border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative; transition: background 0.8s; }
.reserve-list li > a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

.reserve-list li .figure{ width: var(--imgW); margin-bottom: -4px; }
.reserve-list li .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 141%; }
.reserve-list li .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.reserve-list li .flex{ width: calc(100% - var(--imgW)); display: flex; position: relative; }
.reserve-list li .info{ width: calc(100% - var(--btnW)); padding: 0 70px; }
.reserve-list li .text{ margin-bottom: 35px; }
.reserve-list li .text h4{ font-size: 4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.reserve-list li .text p{ font-size: 2.3rem; font-weight: 400; color: #111; letter-spacing: -0.02em; }


.reserve-list li dl{ display: flex; }
.reserve-list li .dl dl:not(:last-of-type){ margin-bottom: 20px; }
.reserve-list li dl *{ font-size: 1.7rem; color: #111; letter-spacing: -0.02em; }
.reserve-list li dl dt{ width: 80px; font-weight: 500; }
.reserve-list li dl dd{ width: calc(100% - 80px); font-weight: 300; color: #333; line-height: 1.5; margin-top: -0.1em; }
.reserve-list li dl dd *{  font-weight: 300; color: #333; line-height: inherit; }

.reserve-list li .button{ width: var(--btnW); position: absolute; top: 0; right: 0; z-index: 15; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.reserve-list li .button .round-btn{ pointer-events: auto; }


/* ======== 예매 or 신청 리스트 (우측 버튼 없음) ======== */
.reserve-list.noBtn li .info{ width: 100%; }


@media screen and (hover: hover){
	.reserve-list li:hover{ background: var(--beigeBg); }
}

@media screen and (max-width: 1700px){
	.reserve-list li .text h4{ font-size: 3.3rem; }
	.reserve-list li .text p{ font-size: 2.1rem; }
}

@media screen and (max-width: 1400px){
	.reserve-list li{ padding: 40px 30px; }
	.reserve-list li .info{ padding: 0 40px; }
}

@media screen and (max-width: 1280px){
	.reserve-list li .text{ margin-bottom: 25px; }
	.reserve-list li .text h4{ font-size: 2.4rem; margin-bottom: 10px; }
	.reserve-list li .text p{ font-size: 1.9rem; }

	.reserve-list li dl *{ font-size: 1.6rem; }
	.reserve-list li .dl dl:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1200px){
	.reserve-list li .flex{ flex-direction: column; padding-left: 40px; }
	.reserve-list li .info{ width: 100%; padding: 0; }
	.reserve-list li .button{ width: 100%; flex-direction: row; margin-top: 20px; position: relative; }
}

@media screen and (max-width: 900px){
	.reserve-list{ --imgW: 30%; }
	.reserve-list li{ padding: 25px 15px; }
	.reserve-list li .flex{ padding-left: 20px; }
	.reserve-list li .text{ margin-bottom: 15px; }
	.reserve-list li .text h4{ font-size: 2.2rem; }
	.reserve-list li .text p{ font-size: 1.8rem; }
	.reserve-list li dl dt{ width: 70px; }
	.reserve-list li dl dd{ width: calc(100% - 70px) }

	.reserve-list li .button .round-btn{ max-width: var(--btnW); width: calc((100% - 10px) / 2); }
}


/* ======== 예매 or 신청 상세 (공통) ======== */
#view .content-box{ font-size: 1.6rem; } 
#view .center{ margin-top: 90px; }
#view .center a{ margin: 0 auto; }

@media screen and (max-width: 1280px){
	#view .center{ margin-top: 50px; }
}


/* ======== 예매 or 신청 상세 ======== */
.reserve-title{ display: flex; --imgW: 280px; margin-bottom: 100px; }
.reserve-title .figure{ width: var(--imgW); }
.reserve-title .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 141%; margin-bottom: -4px; }
.reserve-title .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.reserve-title .info{ width: calc(100% - var(--imgW)); display: flex; flex-direction: column; justify-content: space-between; padding: 15px 0; padding-left: 70px; }
.reserve-title .info *{ color: #111; letter-spacing: -0.02em; }
.reserve-title .info .text{ margin-bottom: 35px; }
.reserve-title .info h4{ font-size: 4rem; font-weight: 600; margin-bottom: 15px; }
.reserve-title .info p{ font-size: 2.3rem; font-weight: 400;; }
.reserve-title .info .dl dl{ display: flex; }
.reserve-title .info .dl dl:not(:last-of-type){ margin-bottom: 20px; }
.reserve-title .info .dl dl *{ font-size: 1.7rem; }
.reserve-title .info .dl dl dt{ width: 80px; font-weight: 500; }
.reserve-title .info .dl dl dd{ width: calc(100% - 80px); color: #333; }
.reserve-title .info .dl dl dd p{ margin: 0; line-height: 1.5; }
.reserve-title .info .button{ display: flex; gap: 15px; margin-top: 70px; }
.reserve-title .info .button a{ color: #fff; }

#view .content{ background: #ECE9E1; border-radius: 10px; padding: 50px 45px; }
#view .content .content-box{ background: #fff; border-radius: 10px; padding: 40px 30px; }  
#view .content .content-box *{ word-break: break-all; }
#view .content .tab-menu{ margin-top: -30px; }
#view .tab-menu{ margin-bottom: 10px; }
#view .tab-menu ul{ display: flex; flex-wrap: wrap; justify-content: center; }
#view .tab-menu ul li{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; padding: 25px; cursor: pointer; }
#view .tab-menu ul li.active{ font-weight: 500; }
#view .tab-content .tab:not(:first-of-type){ display: none; }

@media screen and (max-width: 1700px){
	.reserve-title{ margin-bottom: 60px; }
	.reserve-title .info h4{ font-size: 3.3rem; }
	.reserve-title .info p{ font-size: 2.1rem; }

	#view .content{ padding: 35px 40px; }
	#view .tab-menu ul li{ font-size: 1.9rem; }
}

@media screen and (max-width: 1400px){
	.reserve-title .info{ padding-left: 40px; }
}

@media screen and (max-width: 1280px){
	.reserve-title{ margin-bottom: 40px; }
	.reserve-title .info h4{ font-size: 2.4rem; }
	.reserve-title .info p{ font-size: 1.9rem; }
	.reserve-title .info .dl dl:not(:last-of-type){ margin-bottom: 10px; }
	.reserve-title .info .dl dl *{ font-size: 1.6rem; }
	.reserve-title .info .button{ margin-top: 40px; }

	#view .content{ padding: 20px; }
	#view .content .content-box{ padding: 30px 20px; }
	#view .content .tab-menu{ margin-top: -10px; }
	#view .tab-menu ul li{ font-size: 1.8rem; padding: 15px; }
}

@media screen and (max-width: 900px){
	.reserve-title{ --imgW: 30%; }
	.reserve-title .info{ padding: 5px 0; padding-left: 20px; }
	.reserve-title .info .text{ margin-bottom: 20px; }
	.reserve-title .info h4{ font-size: 2.2rem; margin-bottom: 10px; }
	.reserve-title .info p{ font-size: 1.8rem; }
	.reserve-title .info .dl dl dt{ width: 70px; }
	.reserve-title .info .dl dl dd{ width: calc(100% - 70px) }
	.reserve-title .info .button{ margin-top: 20px; }
	.reserve-title .info .button .round-btn{ max-width: var(--btnW); width: calc((100% - 10px) / 2); }

	#view .tab-menu ul li{ font-size: 1.7rem; }
}

/* ======== 게시판-기본(공통) ======== */
:root{
	/* 게시판-기본(공통) */
	--marginTop:60px;
	--tableLine: #CCC;
	--thBg: #f9f9f9;
	--thPadding: 40px 0;
	--thFontSize: 1.7rem;
	--thFontC: #fff;
	--tdFontSize: 1.6rem;
	--tdFontC: #666;
	--tdLinkC: #222;
	--tdLinkPadding: 40px;
	--noticeBg: #CE0E19;
	/* 게시판-채용 */
	--defaultIngBg: #999;
}

.board_box{border-top: 1px solid #000;}
.board_box colgroup col{ width: 100%; }
.board_box colgroup col.small{ width: 135px; }
.board_box colgroup col.medium{ width: 245px; }

.board_box table tr{position: relative;}
.board_box table tr::after{content:""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; transition: 0.7s;}
.board_box table th{ font-weight: 400; letter-spacing: -0.02em; position: relative;}
.board_box table th::after{content:""; position: absolute; top: 50%; right: 0; width: 1px; height: 15px; transform: translateY(-50%);}
.board_box table th:last-of-type::after{display: none;}
.board_box table td{text-align: center; padding: var(--tdLinkPadding); }
/* .board_box table td h6{width: 100%; display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; font-size: 1.7rem; color: #222;}
.board_box table td h6 span{ display: inline-block; background: var(--mainColor); border-radius: 50px; font-size: 1.4rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1; padding: 8px 10px; margin-right: 10px; } */
.board_box table td a{width: 100%; display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; font-size: 1.7rem; color: #222; line-height: 1.3;}
.board_box table td a span{ display: inline-block; background: var(--mainColor); border-radius: 50px; font-size: 1.4rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1; padding: 8px 10px; margin-right: 10px; }
.board_box table td a span.brown{ background: #6B4B43; }

.board_box{margin-top: var(--marginTop);}
.board_box table tbody tr::after{background: var(--mainColor);}
.board_box table th{background: var(--mainColor); padding: var(--thPadding); font-size: var(--thFontSize); color: var(--thFontC); border-bottom: 1px solid var(--tableLine);}
.board_box table th::after{background: rgba(255, 255, 255, 0.2);}
.board_box tbody tr{ border-bottom: 1px solid var(--tableLine) }
.board_box table td{font-size: var(--tdFontSize); color: var(--tdFontC);;}
/* .board_box table td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; } */
.board_box .notice{background: var(--beigeBg);}
.board_box .notice td i{color: var(--noticeBg);}

.board_box table tbody tr:hover::after{width: 100%;}

@media screen and (max-width: 1700px){
	:root{
		--thPadding: 30px 0;
		--tdLinkPadding: 30px;
	}
}

@media screen and (max-width: 1280px){
	:root{
		--marginTop:30px;
		--thPadding: 25px 0;
		--tdLinkPadding: 25px;
	}

	.board_box colgroup col.medium{ width: 150px; }
}

@media screen and (max-width: 1200px){
	:root{
		--tdLinkPadding: 20px;
	}

	.board_box colgroup{ display: none; }
	.board_box thead{ display: none; }
	.board_box tr{ display: flex; flex-wrap: wrap; }
	.board_box tr td:nth-of-type(1){ display: none; }
	.board_box tr td:nth-of-type(2){ width: 100%; }
	.board_box tr td:nth-of-type(3), .board_box tr td:nth-of-type(4){ padding-top: 0; }
	.board_box tr td:nth-of-type(3)::before, .board_box tr td:nth-of-type(4)::before{ content: attr(data-txt); font-weight: 500; margin-right: 10px; }
	.board_box tr td:nth-of-type(3){ padding-right: 10px; position: relative; }
	.board_box tr td:nth-of-type(3)::after{ content: ""; width: 1px; height: 10px; background: var(--tdFontC); position: absolute; opacity: 0.5; top: calc(1.25em / 2); right: 0; transform: translateY(-50%); }
	.board_box tr td:nth-of-type(4){ padding-left: 10px; }

	/* .board_box .notice h6{  }
	.board_box .notice h6::before{ content: "\e99c"; font-family: "xeicon"; font-weight: normal; font-style: normal; color: var(--noticeBg); margin-right: 10px; } */
	.board_box .notice a::before{ content: "\e99c"; font-family: "xeicon"; font-weight: normal; font-style: normal; color: var(--noticeBg); margin-right: 10px; }
}


/* ======== 썸네일 리스트 (변수) ======== */
:root{
	/* 이미지 게시판 - 세로형 */
	--itemMargin: 70px 40px;
	--itemWidth: calc((100% - 120px) / 4);
	/* 각 디자인 inner값에 따라 변경될 수 있습니다 (작업기준 1600px)*/
	--imgHeight: 67%;
	/* 이미지 게시판 - 가로형 */
	/* 각 디자인 inner값에 따라 변경될 수 있습니다 (작업기준 1600px)*/
	--imgHeight02: 270px;
}

/* ======== 썸네일 리스트 (세로) ======== */
.img_borad_list{display: flex; flex-wrap:wrap; gap: 80px 45px;}
.img_borad_list .item{ width: calc((100% - 135px) / 4); position: relative; cursor: pointer;}
.img_borad_list .item a{position: absolute;top: 0; left: 0; right: 0;bottom: 0; z-index: 20;}
.img_borad_list .item figure{ width: 100%; position: relative; overflow: hidden; border-radius: 5px; padding-bottom: 69.5%;}
.img_borad_list .item figure::before, .img_borad_list .item figure::after{ content: ""; width: 75px; height: 75px; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); }
.img_borad_list .item figure::before{ overflow: hidden; background: url("/img/sub/board_arrow.svg") no-repeat -100% center / auto; z-index: 15; transition: background-position 0.5s; transition-delay: unset; }
.img_borad_list .item figure::after{ background: #fff; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s; transition-delay: 0.2s; }  
.img_borad_list .item figure img{ width: 100%; min-height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: transform 0.5s;}
.img_borad_list .item .txt{padding-top: 25px;}
.img_borad_list .item .txt span{display: inline-block; line-height: 30px; border: 1px solid var(--mainColor); color: var(--mainColor); border-radius: 15px; font-weight: 600; font-size: 1.4rem; text-align: center; margin-bottom: 15px; padding: 0 14px;}
.img_borad_list .item .txt h2{ font-size: 2rem; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.img_borad_list .item .txt p{font-size: 1.7rem; line-height: 1.5; margin-top: 10px; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 4.5em;}
.img_borad_list .item .txt p.date{ height: auto; line-height: 1.3; margin-top: 20px; }


/* ======== 썸네일 리스트 (가로) ======== */
.img_borad_list.horizontal{ border-top: 1px solid rgba(0, 0, 0, 0.25); gap:0 }
.img_borad_list.horizontal .item{ position: relative; display:flex; align-items: center; width: 100%; padding: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: background 0.5s; }
.img_borad_list.horizontal .item::after{ content:""; position:absolute; bottom: -1px; left: 0; width: 0; height: 1px; transition: 0.6s; }
.img_borad_list.horizontal .item figure{ width: 460px; }
.img_borad_list.horizontal .item figure::before, .img_borad_list.horizontal .item figure::after{ display: none; }
.img_borad_list.horizontal .item .txt{ width: calc(100% - 460px); padding: 0; padding-left: 70px; }
.img_borad_list.horizontal .item .txt h2{ font-size: 2.8rem; font-weight: 600; color: #222; }
.img_borad_list.horizontal .item .txt p:not(.date, .subTitle){ margin-top: 25px; line-height: 1.64706em; height: 4.94118em;  -webkit-line-clamp: 3; }
.img_borad_list.horizontal .item .txt p.subTitle{ display: block; font-size: 2.1rem; font-weight: 400; color: #111; letter-spacing: -0.02em; line-height: 1.3; height: auto; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: 1; }
.img_borad_list.horizontal .item .txt .date{ font-size: 1.7rem; color: #666; margin-top: 46px; height: auto; line-height: 1.3; }
.img_borad_list.horizontal .item .txt .dl{ margin-top: 25px; }
.img_borad_list.horizontal .item .txt .dl *{ font-size: 1.7rem; letter-spacing: -0.02em; }
.img_borad_list.horizontal .item .txt .dl dl{ display: flex; }
.img_borad_list.horizontal .item .txt .dl dl:not(:last-of-type){ margin-bottom: 20px; }
.img_borad_list.horizontal .item .txt .dl dt{ width: 80px; font-weight: 500; color: #111; }
.img_borad_list.horizontal .item .txt .dl dd{ width: calc(100% - 80px); font-weight: 300; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
/* 변수 */
.img_borad_list.horizontal .item::after{background: var(--mainColor);}
.img_borad_list.horizontal .item figure{padding-bottom: var(--imgHeight02);}


/* ======== 제목 두 줄 ======== */
.img_borad_list.title2 .item .txt h2{ height: 3em; line-height: 1.5; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }


@media screen and (hover: hover){
	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list:not(.horizontal) .item:hover figure::before{ background-position: center center !important; transition-delay: 0.2s; }
	.img_borad_list:not(.horizontal) .item:hover figure::after{  transform: translate(-50%, -50%) scale(1); transition-delay: unset; }

	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list.horizontal .item:hover{ background: var(--beigeBg); }
}

@media screen and (max-width: 1700px){
	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list .item .txt h2{ font-size: 1.9rem; }

	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list.horizontal .item .txt h2{ font-size: 2.3rem; }
	.img_borad_list.horizontal .item .txt p.subTitle{ font-size: 1.9rem; }
}

@media screen and (max-width: 1400px){
	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list .item figure::before, .img_borad_list .item figure::after{ width: 50px; height: 50px; }
	.img_borad_list .item figure::before{ background-position: -120% center; }
}

@media screen and (max-width: 1280px){

	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list{ gap: 50px 20px; }
	.img_borad_list .item{ width: calc((100% - 40px) / 3); }
	.img_borad_list .item .txt{padding-top: 15px;}
	.img_borad_list .item .txt h2{ font-size: 1.8rem; }
	.img_borad_list .item .txt p{font-size: 1.6rem; }

	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list.horizontal .item{ padding: 30px; }
	.img_borad_list.horizontal .item .txt{ padding-left: 40px; }
	.img_borad_list.horizontal .item .txt h2{ font-size: 2.1rem; }
	.img_borad_list.horizontal .item .txt p:not(.date){ margin-top: 15px; }
	.img_borad_list.horizontal .item .txt p.subTitle{ font-size: 1.7rem; }
	.img_borad_list.horizontal .item .txt .date{ font-size: 1.6rem; margin-top: 35px; }
	.img_borad_list.horizontal .item .txt .dl{ margin-top: 15px; }
	.img_borad_list.horizontal .item .txt .dl *{ font-size: 1.6rem; }
	.img_borad_list.horizontal .item .txt .dl dl:not(:last-of-type){ margin-bottom: 10px; }
	.img_borad_list.horizontal .item .txt .dl dt{ width: 50px; }
	.img_borad_list.horizontal .item .txt .dl dd{ width: calc(100% - 50px); }
}

@media screen and (max-width: 1200px){
	:root{
		--imgHeight02: 236px;
	}

	.img_borad_list.horizontal .item figure{ width: 400px; }
	.img_borad_list.horizontal .item .txt{ width: calc(100% - 400px); }
}

@media screen and (max-width: 900px){
	:root{
		--imgHeight02: 293px;
	}

	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list .item{ width: calc((100% - 20px) / 2); }
	.img_borad_list .item .txt h2{ font-size: 1.7rem; }

	/* ======== 썸네일 리스트 (세로) ======== */
	.img_borad_list.horizontal .item{ flex-direction: column; align-items: flex-start; }
	.img_borad_list.horizontal .item figure{ max-width: 100%; width: 500px; }
	.img_borad_list.horizontal .item .txt{ width: 100%; padding-top: 30px; padding-left: 0; }
	.img_borad_list.horizontal .item .txt h2{ font-size: 1.9rem; }
}

@media screen and (max-width: 600px){
	:root{
		--imgHeight02: 59%;
	}
}



/* ======== 상세-기본(공통) ======== */
:root{
	--titCommonMargin: 30px;
	--pagesBg: #F8F8F8;
	--dtWidth: 140px;
	--dtColor: #222;
	--ddWidth: calc(100% - var(--dtWidth));
	--ddColor: #666;
	--lightLineC: #CCC;
}

/* 기본 */
#view.sub-content::before{ display: none; }
.view_ctn{border-top: 1px solid #000;}
.view_ctn .tit{text-align: center; padding: 60px 0;}
.view_ctn .tit .tag{display: inline-block; padding: 0 20px; line-height: 35px; border-radius:20px; font-weight: 500; font-size: 1.5rem; color: #fff; min-width: 80px}
.view_ctn .tit h2{font-weight: 600; font-size: 3.2rem; color: #222;}
.view_ctn .tit ul{display:flex; justify-content: center;}
.view_ctn .tit ul li{font-size: 1.6rem; color: #666; margin-right: 40px;}
.view_ctn .tit ul li:last-of-type{margin-right: 0;}
.view_ctn .tit ul li span{font-weight: 600; color: #222;}
.view_ctn .info{padding: 65px 0; font-size: 1.6rem; }
.view_ctn .file_box{padding: 5px 0;}
.view_ctn .file_box dl{display:flex; flex-wrap:wrap; align-items:center;}
.view_ctn .file_box dl dt{position: relative; font-weight: 500; font-size: 1.6rem; padding: 20px 30px; }
.view_ctn .file_box dl dd{ font-size: 1.6rem;}
.view_ctn .file_box dl dd a{position: relative; display: inline-block; vertical-align: top; width: 100%; padding: 20px 30px; padding-right: 150px !important; transition: 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.view_ctn .file_box dl dd a span{position: absolute; top: 50%; right: 30px; transform: translateY(-50%);}
.view_ctn .file_box dl dd a i{margin-right: 8px;}
.view_ctn .file_box + .pages{margin-top: 60px;}
.view_ctn .pages dl{display: flex; align-items: center; margin-bottom: 10px;}
.view_ctn .pages dl:last-of-type{margin-bottom: 0;}
.view_ctn .pages dl dt{position: relative; padding: 24px 30px; font-weight: 500; font-size: 1.6rem;}
.view_ctn .pages dl dt i{margin-right: 15px;}
.view_ctn .pages dl dd a{display: inline-block; vertical-align: top; width: 100%; padding: 24px 30px; font-size: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.view_ctn .pages dl dt::after,
.view_ctn .file_box dl dt::after{content:""; position: absolute; top: 50%; right: -1px; width: 1px; height: 20px; background: #e0e0e0; transform: translateY(-50%);}
.view_ctn .list_btn{margin-top: 130px; text-align: center;}
.view_ctn .list_btn a{display: inline-block; width: 180px; line-height: 60px; vertical-align: top; background: #000; font-weight: bold; font-size: 1.7rem; color: #fff; border-radius: 5px; letter-spacing: -0.02em; transition: 0.3s;}
.view_ctn .list_btn a i{margin-right: 10px; transform: translateY(1px);}

/* 변수 */
.view_ctn .tit{border-bottom: 1px solid var(--lightLineC);}
.view_ctn .tit .tag{background: var(--mainColor); margin: 0 auto var(--titCommonMargin);}
.view_ctn .tit .tag.brown{ background: #6B4B43; }
.view_ctn .tit ul{margin-top: var(--titCommonMargin);}
.view_ctn .file_box{border-top: 1px solid var(--lightLineC); border-bottom: 1px solid var(--lightLineC);}
.view_ctn .file_box dl dt{width:var(--dtWidth); color: var(--dtColor);}
.view_ctn .file_box dl dd{width: var(--ddWidth); }
.view_ctn .file_box dl dd a{color: var(--ddColor);}
.view_ctn .pages dl{ border-top: 1px solid var(--lightLineC); border-bottom: 1px solid var(--lightLineC);}
.view_ctn .pages dl dt{width: var(--dtWidth); color: var(--dtColor);}
.view_ctn .pages dl dd{width: var(--ddWidth);}
.view_ctn .pages dl dd a{color: var(--ddColor);}

/* 호버 */
@media screen and (hover: hover){
	.view_ctn .file_box dl dd:hover a{color: var(--mainColor);}
	.view_ctn .list_btn a:hover{background: var(--mainColor);}
}

@media screen and (max-width: 1700px){
	.view_ctn .tit{ padding: 40px 0; }
	.view_ctn .tit h2{ font-size: 2.6rem; }
	.view_ctn .info{padding: 45px 0; }

	.view_ctn .file_box + .pages{margin-top: 40px;}
	.view_ctn .list_btn{margin-top: 90px; }
	.view_ctn .list_btn a{ width: 140px; line-height: 55px; }
}

@media screen and (max-width: 1280px){
	:root{
		--titCommonMargin: 15px;
		--dtWidth: 110px;
	}

	.view_ctn .tit{ padding: 20px 0; }
	.view_ctn .tit .tag{ min-width: 60px; line-height: 33px; }
	.view_ctn .tit h2{ font-size: 2.4rem; }
	.view_ctn .tit ul li{ font-size: 1.5rem; margin-right: 20px; }
	.view_ctn .info{padding: 30px 0; }

	.view_ctn .file_box dl dt{ font-size: 1.5rem; padding: 15px; }
	.view_ctn .file_box dl dd{ font-size: 1.5rem; }
	.view_ctn .file_box dl dd a{ padding: 15px; padding-right: 120px !important; } 
	.view_ctn .file_box dl dd a span{ right: 15px; }

	.view_ctn .file_box + .pages{margin-top: 20px;}
	.view_ctn .pages dl dt{ padding: 18px 15px; font-size: 1.5rem; }
	.view_ctn .pages dl dt i{ margin-right: 10px; }
	.view_ctn .pages dl dd a{ padding: 18px 15px; font-size: 1.5rem; }

	.view_ctn .list_btn{margin-top: 50px; }
	.view_ctn .list_btn a{ width: 125px; line-height: 50px; font-size: 1.6rem; }
}

@media screen and (max-width: 900px){
	.view_ctn .tit h2{ font-size: 2.2rem; }
}