/*-------------------------------------------------
Author : WB,Seo
Create date : 2023. 06. 27.
Last update : 
-------------------------------------------------*/

/* ==================================
    MOBILE
=================================== */
/* ============= 일반 게시판 === */
.notice-inner .board-box th {
	padding-bottom: 6px;
	height: 36px;
	font-size: 1.5rem; color: #161616;
	font-weight: 700;
	border-bottom: 2px solid #161616;
}
.notice-inner .board-box th:nth-child(1) {width: 14%;}
.notice-inner .board-box th:nth-child(2) {width: 86%;}
.notice-inner .board-box td {
	padding: 17px 11px;
	font-size: 1.5rem;
	text-align: center;
	border-bottom: 1px solid #ececec;
}
.notice-inner .board-box td a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	word-break: break-word;
	overflow: hidden;
}
.notice-inner .board-box :is(th:nth-child(n+3), td:nth-child(n+3)) {display: none;}
.common-inner .paging-box {
	margin: 58px;
	display: flex;
	justify-content: center;
	gap: 0 8px;
}
.common-inner .paging-box a {
	display: block;
	width: 32px; line-height: 32px;
	font-size: 1.5rem; color: #999;
	border: 1px solid #ccc;
	text-align: center;
}
.common-inner .paging-box a.active {
	color: #fff;
	background: #78462d;
	border: none;
}

/* ============ 설치사례 === */
.install-inner .gallery-box li:nth-child(n+2) {margin-top: 28px;}
.install-inner .gallery-box .img-box img {width: 100%;}
.install-inner .gallery-box .cont-box {
	padding: 15px 12px;
	border: 1px solid #eee;
	border-top: none;
}
.install-inner .gallery-box .cont-box .title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-word;
	overflow: hidden;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}
.install-inner .gallery-box .cont-box .date {
	margin-top: 13px;
	font-size: 1.5rem; color: #9c9c9c;
	text-align: right;
}

/* ============ 뷰페이지 === */
.view-inner .upper-box {
	padding-bottom: 20px;
	border-bottom: 2px solid #000;
}
.view-inner .upper-box .title {
	font-size: 2rem;
	line-height: 1.3;
	text-align: center;
	font-weight: 700;
}
.view-inner .upper-box .write-info {
	display: flex;
	margin-top: 8px;
	justify-content: center;
}
.view-inner .upper-box .write-info {font-size: 1.4rem; color: #666;}
.view-inner .upper-box .write-info .date:before {
	display: inline-block;
	content: '';
	width: 1px; height: 12px;
	margin: 0 6px;
	background: #666;
}
.view-inner .lower-box {
	padding: 19px 0 24px;
	border-bottom: 1px solid #d2d2d2;
}
.view-inner .lower-box .file-down-box {
	margin-bottom: 20px;
	text-align: right;
}
.view-inner .lower-box .file-down-box  li:nth-child(n+2) {margin-top: 8px;}
.view-inner .lower-box .file-down-box  a {
	display: block;
	font-size: 1.5rem;
}
.view-inner .lower-box .file-down-box  a img {
	display: inline-block;
	width: auto; height: 14px;
	margin-right: 5px;
	vertical-align: -1px;
}
.view-inner .btn-box {
    margin-top: 24px;
    text-align: center;
}
.view-inner .btn-box  button {
	width: 100%; height: 46px;
	font-size: 1.5rem; color: #fff;
	background: #999;
}


/* ============ 뷰페이지_설치사례 === */
.view2-inner .img-slider .slick-dots {
	position: absolute;
	bottom: 12px;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 0 6px;
}
.view2-inner .img-slider .slick-dots li {
	font-size: 0;
	width: 50px;
	opacity: 0.4;
}
.view2-inner .img-slider .slick-dots li img {width: 100%;}
.view2-inner .img-slider .slick-dots li.slick-active {opacity: 1;}
.view2-inner .table-box table {
	margin-top: 8px;
	font-size: 1.5rem;
}
.view2-inner .table-box :is(th, td) {
	padding: 15px 16px;
	line-height: 1.5;
}
.view2-inner .table-box th {
	width: 26%;
	font-weight: 700;
	background: #f8f8f8;
}
.view2-inner .table-box td {width: 74%;}
.view2-inner .txt-box img {
	max-height: 460px;
	object-fit: contain;
}

/* ==================================
    PC
=================================== */
@media screen and (min-width:1084px){
    /* ============= 일반 게시판 === */
    .notice-inner .board-box th {
		height: 46px;
		font-weight: 700;
	}
	.notice-inner .board-box th:nth-child(1) {width: 8%;}
	.notice-inner .board-box th:nth-child(2) {width: 66%;}
	.notice-inner .board-box th:nth-child(3) {width: 13%;}
	.notice-inner .board-box th:nth-child(4) {width: 13%;}
	.notice-inner .board-box td {height: 52px;}
	.notice-inner .board-box td a {-webkit-line-clamp: 1;}
	.notice-inner .board-box :is(th:nth-child(n+3), td:nth-child(n+3)) {display: table-cell;}

    /* ============ 설치사례 === */
    .install-inner :is(.gallery-box, .board-box) {
		display: flex;
		flex-wrap: wrap;
		gap: 15px 2%;
		padding: 18px 0 0;
	}
	.install-inner .gallery-box li {width: 32%;}
	.install-inner .gallery-box li:nth-child(n+2) {margin: 0;}
	.install-inner .gallery-box li .img-box {
		position: relative;
		height: 204px;
		overflow: hidden;
	}
	.install-inner .gallery-box li .img-box img {
		position: absolute;
		top: 50%; left: 50%; transform: translate(-50%,-50%);
		width: 100%; height: 100%;
		object-fit: cover;
	}
	.install-inner .gallery-box .cont-box .title {font-size: 1.8rem;}

    /* ============ 뷰페이지 === */
	.view-inner .upper-box {padding-bottom: 27px;}
	.view-inner .upper-box .title {
		font-size: 2.4rem;
		letter-spacing: -0.08rem;
	}
	.view-inner .upper-box .write-info {margin-top: 8px;}
	.view-inner .upper-box .write-info {font-size: 1.5rem;}
	.view-inner .upper-box .write-info .date:before {height: 11px;}
	.view-inner .lower-box {padding: 22px 0 34px;}
	.view-inner .lower-box .file-down-box {margin-bottom: 24px;}
	.view-inner .lower-box .file-down-box {
		display: flex;
		flex-wrap: wrap;
		gap: 5px 12px;
		justify-content: flex-end;
	}
	.view-inner .lower-box .file-down-box  li:nth-child(n+2) {margin: 0;}
    .view-inner .txt-box img {max-width: 100%;}
	.view-inner .btn-box {
		margin-top: 24px;
		justify-content: center;
	}
	.view-inner .btn-box  button {
		width: 160px; height: 43px;
		border-radius: 3px;
	}

	/* ============ 뷰페이지_설치사례 === */
	.view2-inner .txt-box {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.view2-inner .img-slider {width: 62%;}
	.view2-inner .img-slider .slick-dots li {
		width: 90px;
		cursor: pointer;
		opacity: 0.5;
	}
	.view2-inner .img-slider .slick-dots li img {
		max-height: 67px;
		object-fit: cover;
	}
	.view2-inner .table-box {width: calc(38% - 8px);}
	.view2-inner .table-box table {
		margin: 0;
		border-top: 1px solid #efefef;
	}
	.view2-inner .table-box :is(th, td) {border-bottom: 1px solid #efefef;}
}