@charset "utf-8";

/* sub - common css */
@import url("../sub-common.css");


/* 서치 영역 */
.notice-search-wrap {float: right; width: 600px;}
.notice-search-wrap .select-box {width: 150px;}
.notice-search-wrap .select-box select {border-radius: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.notice-search-wrap input[type="text"].text-input { float: left; width: calc(100% - 233px); height: 44px; box-shadow: none; border-radius: 0; border-left: 0;}
.notice-search-wrap .btn-wrap {width: 50px;  float: left; margin-top: 0;}
.notice-search-wrap .btn-wrap button {height: 44px; box-shadow: none; font-size: 1.4rem; min-width: 82px; line-height: 20px; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.notice-search-wrap .btn-wrap button img {width: 15px; height: 15px; margin-top: 3px; margin-right: 3px}
.search-result {padding: 20px 0;color: #7e7e7e; font-size: 1.4rem; float: right}
.search-result span {color: #30b686; font-weight: 600}

@media (max-width: 1024px) {
	.notice-search-wrap .select-box {width: 120px;}
	.notice-search-wrap input[type="text"].text-input {width: calc(100% - 203px)}
}

@media(max-width: 768px) {
	.notice-search-wrap {width: 100%; float: none}
}

@media (max-width: 500px) {
	.notice-search-wrap .select-box {width: 100px; height: 35px}
	.notice-search-wrap input[type="text"].text-input {height: 35px}
	.notice-search-wrap .btn-wrap button {min-width: 48px; height: 35px;}
	.notice-search-wrap .btn-wrap button span {display: none}
	.notice-search-wrap input[type="text"].text-input {width: calc(100% - 150px)}
	.search-result {padding: 10px 0; font-size: 1.3rem}
}


/* notice table  */
table.notice-table {width: 100%; table-layout: fixed; margin-bottom: 30px;}
table.notice-table tbody tr {border-bottom: 1px solid #e5e5e5}
table.notice-table tbody tr:hover {background-color: #f7f7f7}
table.notice-table tr th {color: #fff; background-color: #30b686; font-size: 1.6rem; padding: 20px 0;}
table.notice-table tr th:first-child {border-top-left-radius: 20px}
table.notice-table tr th:last-child {border-top-right-radius: 20px;}
table.notice-table tr td {color: #7e7e7e; font-size: 1.5rem;padding: 15px 0}
table.notice-table .th-num {width: 87px}
table.notice-table .th-title {width: calc(100% - 502px)}
table.notice-table .th-writer {width: 190px;}
table.notice-table .th-date {width: 140px;}
table.notice-table .th-view {width: 85px;}
span.pin {color: #fff; background-color: #b3df7d; font-size: 1.2rem; padding: 4px 10px; border-radius: 8px}
table.notice-table .td-title {padding: 15px 10px; text-overflow: ellipsis; overflow:hidden; white-space: nowrap; dispaly:block }
div.mo-notice-box {display: none}

@media(max-width: 1024px) {
	table.notice-table .th-num {width: 75px}
	table.notice-table .th-title {width: calc(100% - 525px)}
	table.notice-table .th-writer {width: 170px;}
	table.notice-table .th-date {width: 180px;}
	table.notice-table .th-view {width: 100px;}
	table.notice-table tr th {font-size: 1.5rem}
	table.notice-table tr td {font-size: 1.4rem}
}

@media (max-width: 768px) {
	.notice-box {display: none}
	div.mo-notice-box {display: block; border-top: 1px solid #e5e5e5; margin-bottom: 20px}
	div.mo-notice {border-bottom: 1px solid #e5e5e5; padding: 15px 5px;}
	div.mo-notice .td-title {width: 100%;padding-bottom: 10px; font-size: 1.5rem;text-overflow: ellipsis; overflow:hidden; white-space: nowrap; dispaly:block}
	div.mo-notice .td-writer, div.mo-notice .td-date, div.mo-notice .td-view {float: left; margin-right: 10px; font-size: 1.4rem; color: #C3C3C3; position: relative}
	div.mo-notice > div::after {content: ''; position: absolute; top: 2px; left: -5px; width: 1px; height: 12px; background-color: #d2d2d2;}
	div.mo-notice > div.td-writer::after {background: none}
	span.pin {font-size: 1.1rem; padding: 3px 8px; border-radius: 3px; margin-right: 5px}
}

@media(max-width: 500px) {
	div.mo-notice .td-title {font-size: 1.4rem}
	div.mo-notice .td-writer, div.mo-notice .td-date, div.mo-notice .td-view {font-size: 1.3rem}
}


/* notice detail */
.notice-detail-box {width: 100%;border-bottom: 1px solid #d2d2d2; padding-bottom: 20px; margin-bottom: 20px;}
.notice-detail-box .td-title {background-color: #30b686; padding: 35px 0; text-align: center; color: #fff; font-size: 2.2rem; border-top-left-radius: 22px; border-top-right-radius: 22px;}
.notice-detail-box .td-title span.pin {background-color: #fff; color: #30b686; border-radius: 10px; margin-right: 5px; position: relative; top: -3px}

.notice-detail-box .td-writer-wrap {font-size: 1.4rem; color: #424242; text-align: center; padding: 15px 0; border-bottom: 1px solid #d2d2d2}
.notice-detail-box .td-writer-wrap .td-writer,
.notice-detail-box .td-writer-wrap .td-date,
.notice-detail-box .td-writer-wrap .td-view {display: inline-block; margin-right: 15px; position: relative}
.notice-detail-box .td-writer-wrap span.point {color: #30b686; margin-right:3px; font-weight: 600}
.notice-detail-box .td-writer-wrap .td-date::after,
.notice-detail-box .td-writer-wrap .td-view::after {position: absolute; content: ''; top: 1px; left: -9px; width: 1px; height: 12px; background-color: #d6d6d6}
.notice-detail-box .notice-area {min-height: 400px; padding: 20px}
.notice-detail-box .notice-area p {line-height: 22px; font-size: 1.5rem; color: #696969}
.notice-detail-box .notice-area img {max-width:100%}

/* 하단  */

.prev-next-notice-wrap {color: #424242}
.prev-wrap, .next-wrap {padding: 8px 8px 5px 8px; border-radius: 10px;}
.prev-wrap:hover, .next-wrap:hover {background-color:#f3f3f3}
.prev-wrap {margin-bottom: 5px;}
.next-wrap p a, .prev-wrap p a {font-size: 1.4rem;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;display: block}
.prev-wrap span, .prev-wrap p, .next-wrap span, .next-wrap p {display: inline-block}
.prev-wrap span, .next-wrap span {margin-right: 20px; position: relative; font-weight: 600; font-size: 1.4rem; top: -4px}
.prev-wrap span::after, .next-wrap span::after {content: ''; position: absolute; top: 2px; right: -12px; width: 1px; height: 12px; background-color: #d6d6d6}
.btn-wrap.list-btn {float: right; margin-top: 10px}

@media(max-width: 1024px) {
	.notice-detail-box .td-title {font-size: 2rem; padding: 30px 0}
}

@media(max-width: 650px) {
	.notice-detail-box .td-title {font-size: 1.7rem; padding: 25px 0}
	.prev-next-notice-wrap {font-size: 1.3rem}
	.bottom-wrap .btn-wrap button {height: 46px; line-height: 43px; min-width: 90px; font-size: 1.4rem}
}

@media(max-width: 500px) {
	.notice-detail-box .td-title {font-size: 1.5rem; padding: 20px 0}
	.notice-detail-box .td-writer-wrap {font-size: 1.2rem; padding: 10px 0}
	.notice-detail-box .notice-area p {font-size: 1.3rem}
	.notice-detail-box .td-title span.pin {top: -1px; font-size: 1rem; padding: 3px 7px}
	.notice-detail-box .td-writer-wrap span.point {display: none}
	.next-wrap p a, .prev-wrap p a {font-size: 1.2rem}
	.prev-wrap span, .next-wrap span {font-size: 1.2rem; margin-right: 10px;}
	.prev-wrap span::after, .next-wrap span::after {right: -7px; top: 0}
	.notice-detail-box {padding-bottom: 10px; margin-bottom: 10px;}
	.btn-wrap.list-btn button {height: 40px; line-height: 40px; min-width: 75px; font-size: 1.3rem}
	.notice-detail-box .notice-area {padding: 20px 10px}
}

@media(max-width: 400px) {
		.notice-detail-box .td-title {font-size: 1.4rem; padding: 20px 0}
}

/* notice-empty */

.notice-box.empty {width: 100%; height:350px; background-color: #f1f3f2; border-radius: 20px}
.notice-box.empty p {text-align: center; font-size: 1.5rem; color: #999; line-height: 350px;}
.mo-notice-box.empty {height: 300px; width: 100%; display: none;background-color: #f1f3f2; border-radius: 20px}
.mo-notice-box.empty p {text-align: center; font-size: 1.5rem; color: #999; line-height: 315px}

@media(max-width: 768px) {
	.mo-notice-box.empty {display: block; border-top: 0; margin-bottom: 0}
	.mo-notice-box.empty p {font-size: 1.3rem}
}


/* center-notice 검색 */
.center-notice .notice-search-wrap { width:750px; float:right;}
.center-notice .notice-search-wrap .group { float: left; margin-right: 15px; }
.center-notice .notice-search-wrap .group:last-child { margin-right:0; }
.center-notice .notice-search-wrap .group .select-label { font-weight: 600; float:left; position: relative; top: 15px; padding-right:10px;}
.center-notice .notice-search-wrap .group .select-box { width: 110px; }
.center-notice .notice-search-wrap .group .select-box.select02 select{ border-radius: 5px; }
.center-notice .notice-search-wrap .group .btn-wrap { width:auto; }
.center-notice .notice-search-wrap .group .input-area { float:left; width:calc(100% - 192px)}
.center-notice .notice-search-wrap .group .input-area input[type="text"].text-input { float:none; width:100%; }
@media (max-width: 800px) {
	.center-notice .notice-search-wrap { width:100%; }
	.center-notice .notice-search-wrap .group { width:100%; margin-bottom: 10px;}
	.center-notice .notice-search-wrap .group:last-child { margin-bottom: 0;}
	.center-notice .notice-search-wrap .group .select-label { text-align: center; width:90px;}
	.center-notice .notice-search-wrap .group:not(:last-child) .select-box { width: calc(100% - 90px); }
}
@media (max-width: 500px) {
	.center-notice .notice-search-wrap .group .input-area { width:calc(100% - 160px);}
}


.notice-search {
	
}