.search-area {
    background-color:#f6f6f6;
    padding:3rem;
    box-sizing: border-box;
    border-radius:0.3rem;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap;
    gap:1rem;
}

.search-area input[type=text],
.search-area input[type=password],
.search-area input[type=number],
.search-area select {
    border:1px solid #d7d7d7;
    box-sizing: border-box;
    padding:0 2rem;
    background-color:#fff;
    height:5rem;
    border-radius:0.6rem;
    font-size:1.8rem;
    font-weight:500;
    color:#222222;
    line-height: 1;
}

.search-area select {
    width:18rem;
    appearance: none;
    background-image:url(../images/select_arrow.png);
    background-repeat:no-repeat;
    background-position:right 2rem top 2rem;
    background-size:1.4rem;
}

.search-area .search-btn {
    width:14rem;
    height:5rem;
    background-color:#3768cd;
    border-radius:0.6rem;
    color:#fff;
    font-size:1.8rem;
    font-weight:bold;
    line-height: 1;
}

.search-area .reg-btn {
    width:14rem;
    height:5rem;
    background-color:#223978;
    border-radius:0.6rem;
    color:#fff;
    font-size:1.8rem;
    font-weight:bold;
    line-height: 1;
}

.search-area label {
    font-weight:bold;
    font-size:1.8rem;
    color:#222;
}

.search-area .keyword {
    width:46.8rem;
}

.search-area .grouping {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap;
    gap:1rem 2rem;
    border-bottom:1px solid #e9e9e9;
    padding-bottom:1rem;
}

.search-area .grouping.sm-wide {
    max-width:130rem;
    width:100%;
    justify-content: space-between;
}

.search-area .grouping.wide {
    width:100%;
    justify-content: space-between;
}

.search-area .grouping:last-of-type {
    border-bottom:0;
    padding-bottom:0;
}

.search-area .grouping .input-group {
    display:flex;
    align-items: center;
    gap:1rem;
}

.search-area .grouping .input-group select {
    width:17rem;
}

.search-area .grouping .input-group input[type=text] {
    width:100%;
    max-width:22.5rem;
}

.search-area .grouping .input-group input[type=text].keyword {
    max-width:32rem;
}

.search-area .date-select {
    display:flex;
    align-items: center;
    background-color:#fff;
    border:1px solid #d7d7d7;
    box-sizing: border-box;
    border-radius:0.6rem;
    padding:0 2rem;
    max-width:20rem;
}

.search-area .date-select > input[type=text] {
    border:none;
    padding:0;
    max-width:100%;
}

.search-area .date-select img {
    width:1.8rem;
}

/* 리스트 table */
.list-wrap {
    margin:2.5rem 0;
}

.list-wrap .list-top {
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom:1.5rem;
}

.list-wrap .list-top h4 {
    padding-left:0;
    font-size:2.4rem;
}

.list-wrap .list-top h4::before {
    display:none;
}

.list-wrap .list-top .list-info {
    display:flex;
    align-items: center;
    gap:1rem;
}

.list-wrap .list-top .list-info .list-count {
    letter-spacing: -0.05em;
    font-size:1.8rem;
    color:#222;
}

.list-wrap .list-top .list-info .list-count strong {
    color:#2560e7
}

.list-wrap .list-top .list-utils {
    display:flex;
    align-items: center;
    gap:0.8rem;
}

.list-wrap .list-top .list-utils .btn {
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#222222;
    border-radius:0.6rem;
    color:#fff;
    letter-spacing: -0.03em;
    font-size:2rem;
    font-weight:500;
    height:5.4rem;
    width:18rem;
    padding:0 1.5rem;
}

.list-wrap .list-top .list-utils .btn.excel-down {
    background-color:#479a5a
}

.list-wrap .list-table {
    border-top:2px solid #000;
    width:100%;
    table-layout: fixed;
}

.list-wrap .list-table thead tr th {
    background-color:#f2f4f9;
    font-size:1.8rem;
    font-weight:bold;
    padding:1.5rem;
    border-bottom:1px solid #d9d9d9;
    letter-spacing: -0.05em;
    word-break: break-word;
}

.list-wrap .list-table tbody tr td {
    padding:1.5rem;
    border-bottom:1px solid #d9d9d9;
    letter-spacing: -0.05em;
    text-align: center;
    font-size:1.8rem;
    word-break: break-word;
}

.list-wrap .list-table.type2 thead tr th{
    background-color:#eef7f9
} 

.list-wrap .list-table thead tr th,
.list-wrap .list-table tbody tr td {
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
}
.list-wrap .list-table thead tr th:first-child,
.list-wrap .list-table tbody tr td:first-child {
	border-left: 0;
}
.list-wrap .list-table thead tr th:last-child,
.list-wrap .list-table tbody tr td:last-child {
	border-right: 0;
}

.list-wrap .list-table.noline thead tr th,
.list-wrap .list-table.noline tbody tr td {
    border-left: 0;
	border-right: 0;
}

.list-wrap .list-table tbody tr td span.notice {
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-size:2rem;
    font-weight:500;
    letter-spacing: -0.05em;
    color:#fff;
    height:3.2rem;
    border-radius:0.6rem;
    background-color:#3768cd;
    padding:0 1rem;
}

.list-wrap .list-table tbody tr td a.link {
    color:#3768cd;
    text-decoration: underline;
    font-weight:bold;
    display:block;
}

.list-wrap .list-table tbody tr td a.link.overtxt {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.list-wrap .list-table tbody tr td .view {
    color:#222;
    font-weight:500;
    display:flex;
    align-items: center;
    gap:1rem;
}

.list-wrap .list-table tbody tr td .view a {
    display:block;
    max-width:calc(100% - 4rem);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size:1.8rem;
    font-weight:500;
    color:#222;
}

.list-wrap .list-table tbody tr td .view a:hover {
    color:#3768cd;
    text-decoration: underline;
    font-weight:bold;
    display:block;
}

.list-wrap .list-table tbody tr td .view.new::after {
    content:"";
    display:block;
    width:3rem;
    height:3rem;
    background-image:url(../images/new_ico.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

.list-wrap .list-table tbody tr td .view a:hover {

}

.list-wrap .list-table tbody tr td a.blank {
    display:inline-flex;
    align-items: center;
    color:#fff;
    background-color:#344674;
    height:3.2rem;
    padding:0 1.5rem;
    border-radius:0.6rem;
    gap:0.8rem;
    font-size:1.8rem;
    font-weight:500;
    letter-spacing: -0.05em;
    line-height:1;
}

.list-wrap .list-table tbody tr td a.blank::after {
    content:"";
    display:block;
    width:1.5rem;
    height:1.5rem;
    background-image:url(../images/blank_ico.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

.publication-list {
    padding:5rem 0;
    border-top:2px solid #000000;
}

.publication-list ul {
    display:flex;
    flex-wrap:wrap;
    gap:3.625rem;
}

.publication-list ul li {
    width:calc((100% - 14.5rem) / 5);
}

.list-wrap .nodata {
    width:100%;
    height:35rem;
    border:1px solid #d9d9d9;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:2rem;
}

.list-wrap .nodata p {
    font-size:2rem;
    letter-spacing: -0.05em;
    color:#222;
    font-weight:500;
}

.list-wrap .nodata p span {
    color:#2560e7;
    font-weight:bold;
}

/*발간물*/
.publication-list .publication-cover {
    width:100%;
    position:relative;
    border:1px solid #d9d9d9;
}

.publication-list .publication-cover .img-wrap {
    width:100%;
    height:0;
    padding-top:calc(305 / 238 * 100%);
}

.publication-list .publication-cover .img-wrap img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.publication-list .publication-info {
    text-align: center;
    padding:2.5rem;
}

.publication-list .publication-info .cate {
    display:inline-flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    background-color:#3768cd;
    padding:0 1rem;
    font-size:1.8rem;
    font-weight:500;
    letter-spacing: -0.05em;
    height:3.2rem;
    border-radius:0.6rem;
}

.publication-list .publication-info .publication-name {
    display:block;
    text-align: center;
    margin:1.5rem 0;
    font-size:2.2rem;
    color:#222;
    letter-spacing: -0.05em;
    font-weight:bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
}

.publication-list .publication-info .publication-name:hover {
    text-decoration: underline;
}

.publication-list .publication-info p.date {
    color:rgba(34,34,34,0.6);
    font-size:1.8rem;
    letter-spacing: -0.01em;
    line-height: 1;
}

/*영상자료실*/
.video-list {
    padding:5rem 0;
    border-top:2px solid #000000;
}

.video-list > ul {
    display:flex;
    flex-wrap:wrap;
    gap:2.5rem 5.9rem;
}

.video-list > ul > li {
    width:calc((100% - 11.8rem) / 3);
}

.video-list .video-thumb {
    width:100%;
    position:relative;
    border:1px solid #d9d9d9;
}

.video-list .video-thumb a {
    position:relative;
    width:100%;
    height:100%;
}

.video-list .video-thumb a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}


.video-list .video-thumb a::after {
    content: "";
    display: block;
    width: 7.2rem;
    height: 7.2rem;
    background-image: url(../images/yt_play_ico.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
}

.video-list .video-thumb .img-wrap {
    width:100%;
    height:0;
    padding-top:calc(284 / 494 * 100%);
}

.video-list .video-thumb .img-wrap img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.video-list .video-info {
    text-align: center;
    padding:2.5rem;
}

.video-list .video-info .video-name {
    display:block;
    text-align: center;
    margin:1.5rem 0;
    font-size:2.2rem;
    color:#222;
    letter-spacing: -0.05em;
    font-weight:bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
}

.video-list .video-info .video-name:hover {
    text-decoration: underline;
}

.video-list .write-info {
    justify-content: center;
}

.video-list .write-info ul {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:0.4rem 2rem;
    flex-wrap:wrap;
}

.video-list .write-info ul li {
    position:relative;
}

.video-list .write-info ul li::after {
    content:"";
    display:block;
    width:0.1rem;
    height:1.4rem;
    background-color:#d9d9d9;
    position:absolute;
    right:-1rem;
    top:50%;
    transform: translateY(-50%);
}

.video-list .write-info ul li:last-child::after {
    display:none;
}

.video-list .write-info ul li dl {
    display:flex;
    gap:1rem
}

.video-list .write-info ul li dl dt {
    font-weight:bold;
    font-size:1.8rem;
    letter-spacing: -0.05em;
    color:rgba(34,34,34,0.7);
}

.video-list .write-info ul li dl dd {
    font-size:1.8rem;
    letter-spacing: -0.05em;
    color:#555;
    font-weight:500;
}

/*포토뉴스*/
.photo-list {
    padding:5rem 0;
    border-top:2px solid #000000;
}

.photo-list > ul {
    display:flex;
    flex-wrap:wrap;
    gap:2.5rem 5.9rem;
}

.photo-list > ul > li {
    width:calc((100% - 11.8rem) / 3);
}

.photo-list .photo-thumb {
    width:100%;
    position:relative;
    border:1px solid #d9d9d9;
}

.photo-list .photo-thumb .img-wrap {
    width:100%;
    height:0;
    padding-top:calc(284 / 494 * 100%);
}

.photo-list .photo-thumb .img-wrap img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.photo-list .photo-info {
    text-align: center;
    padding:2.5rem;
}

.photo-list .photo-info .photo-name {
    display:block;
    text-align: center;
    margin:1.5rem 0;
    font-size:2.2rem;
    color:#222;
    letter-spacing: -0.05em;
    font-weight:bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
}

.photo-list .photo-info .photo-name:hover {
    text-decoration: underline;
}

.photo-list .write-info {
    justify-content: center;
}

.photo-list .write-info ul {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:0.4rem 2rem;
    flex-wrap:wrap;
}

.photo-list .write-info ul li {
    position:relative;
}

.photo-list .write-info ul li::after {
    content:"";
    display:block;
    width:0.1rem;
    height:1.4rem;
    background-color:#d9d9d9;
    position:absolute;
    right:-1rem;
    top:50%;
    transform: translateY(-50%);
}

.photo-list .write-info ul li:last-child::after {
    display:none;
}

.photo-list .write-info ul li dl {
    display:flex;
    gap:1rem
}

.photo-list .write-info ul li dl dt {
    font-weight:bold;
    font-size:1.8rem;
    letter-spacing: -0.05em;
    color:rgba(34,34,34,0.7);
}

.photo-list .write-info ul li dl dd {
    font-size:1.8rem;
    letter-spacing: -0.05em;
    color:#555;
    font-weight:500;
}

.view-wrap {
    border-top:2px solid #000;
}

.view-wrap .view-subj {
    padding:2.5rem;
    background-color:#f2f4f9;
    border-bottom:1px solid #d9d9d9
}

.view-wrap .view-subj.notice {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:1rem;
}

.view-wrap .view-subj.notice::before {
    content:"공지";
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-size:2rem;
    font-weight:500;
    letter-spacing: -0.05em;
    color:#fff;
    height:3.2rem;
    border-radius:0.6rem;
    background-color:#3768cd;
    padding:0 1rem;
}

.view-wrap .view-subj p {
    font-size:3rem;
    font-weight:bold;
    letter-spacing: -0.03em;
    color:#222;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.view-wrap .view-subj.notice p {
    max-width:calc(100% - 8rem)
}

.view-wrap .view-info ul {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:0.4rem 6rem;
    padding:2rem;
    border-bottom:1px solid #d9d9d9;
    flex-wrap:wrap;
}

.view-wrap .view-info ul li {
    position:relative;
}

.view-wrap .view-info ul li::after {
    content:"";
    display:block;
    width:0.1rem;
    height:1.4rem;
    background-color:#d9d9d9;
    position:absolute;
    right:-3rem;
    top:50%;
    transform: translateY(-50%);
}

.view-wrap .view-info ul li:last-child::after {
    display:none;
}

.view-wrap .view-info ul li dl {
    display:flex;
    gap:1rem
}

.view-wrap .view-info ul li dl dt {
    font-weight:bold;
    font-size:2rem;
    letter-spacing: -0.05em;
    color:#222
}

.view-wrap .view-info ul li dl dd {
    font-size:2rem;
    letter-spacing: -0.05em;
    color:#555;
    font-weight:500;
}


.view-wrap a.blank {
    display:inline-flex;
    align-items: center;
    color:#fff;
    background-color:#344674;
    height:3.2rem;
    padding:0 1.5rem;
    border-radius:0.6rem;
    gap:0.8rem;
    font-size:1.8rem;
    font-weight:500;
    letter-spacing: -0.05em;
    line-height:1;
}

.view-wrap a.blank::after {
    content:"";
    display:block;
    width:1.5rem;
    height:1.5rem;
    background-image:url(../images/blank_ico.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

.view-wrap .view-content {
    padding:4rem;
}

.view-wrap .video-area {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    margin-bottom:2rem;
    height: 0;
    overflow: hidden;
}

.view-wrap .view-content .video-area iframe,
.view-wrap .view-content .video-area object,
.view-wrap .view-content .video-area embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.view-wrap .view-files {
    padding:2rem 4rem;
    border:1px solid #d9d9d9;
    border-radius:0.3rem;
}

.view-wrap .view-files ul li {
    display:flex;
    gap:1.5rem;
    align-items: center;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
}

.view-wrap .view-files ul li:last-child {
    margin-bottom:0;
}

.view-wrap .view-files ul li a.file {
    position:relative;
    display:flex;
    align-items: center;
    gap:0.8rem;
}

.view-wrap .view-files ul li a.file::before {
    content:"";
    display: block;
    width: 2.2rem;
    height: 2.4rem;
    background-image: url(../images/upfile_ico.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.view-wrap .view-files ul li a.file span {
    font-size:2rem;
    font-weight:500;
    letter-spacing: -0.03em;
    color:#222;
    border-bottom:1px solid #222;
    line-height:1;
}

.view-wrap .view-files ul li a.preview {
    display:inline-flex;
    align-items: center;
    justify-content: center;
    border:1px solid #d7d7d7;
    border-radius:0.6rem;
    height:3.6rem;
    font-size:1.8rem;
    font-weight:500;
    letter-spacing: -0.03em;
    color:#222;
    padding:0 1.8rem;
}

.view-wrap .btns-wrap.view-btns {
    margin-top:3.5rem;
} 

.view-wrap .btns-wrap.view-btns button,
.view-wrap .btns-wrap.view-btns a {
    max-width:17rem;
    height:5.4rem;
}

.view-wrap .view-list {
    margin-top:3.5rem;
    border-top:1px solid #d9d9d9;
}

.view-wrap .view-list dl {
    display:flex;
    align-items: center;
    border-bottom:1px solid #d9d9d9;
}

.view-wrap .view-list dl dt {
    font-size:2rem;
    font-weight:bold;
    letter-spacing: -0.03em;
    color:#222;
    width:18rem;
    display:flex;
    align-items: center;
    justify-content: center;
    column-gap: 2.5rem;
    height:8rem;
}

.view-wrap .view-list dl dt::before {
    content:"";
    display:block;
    width:1.4rem;
    height:0.8rem;
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
}

.view-wrap .view-list dl.prev dt::before {
    background-image:url(../images/view_prev.png)
}

.view-wrap .view-list dl.next dt::before {
    background-image:url(../images/view_next.png)
}

.view-wrap .view-list dl dd {
    font-size:2rem;
    font-weight:500;
    letter-spacing: -0.03em;
    color:#222;
    height:8rem;
    display:flex;
    align-items: center;
    width:calc(100% - 18rem);
    padding:0 1.5rem;
}

.view-wrap .view-list dl dd a {
    font-size:2rem;
    font-weight:500;
    letter-spacing: -0.03em;
    color:#222;
    display:block;
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.view-wrap .view-list dl dd span.nodata {
    color:#999;
    font-size:2rem;
    font-weight:500;
    letter-spacing: -0.03em;
}

.pagination {
    display:flex;
    align-items: center;
    gap:0.4rem;
    justify-content: center;
    margin-top:3.5rem;
}

.pagination a.page-btn,
.pagination a.page-link {
    display:flex;
    align-items: center;
    justify-content: center;
    width:4rem;
    height:4rem;
    border-radius:0.6rem;
}

.pagination a.page-btn {
    border:1px solid #d7d7d7;
    background-position:center;
    background-repeat:no-repeat;
    transition: all 0.5s;
}

.pagination a.page-btn:hover {
    background-color:#f2f2f2;
}

.pagination a.page-btn.first,
.pagination a.page-btn.last {
    background-size:0.7rem;
}

.pagination a.page-btn.first {
    background-image:url(../images/page_first.png)
}

.pagination a.page-btn.last {
    background-image:url(../images/page_last.png)
}

.pagination a.page-btn.prev,
.pagination a.page-btn.next {
    background-size:1.3rem;
}

.pagination a.page-btn.prev {
    background-image:url(../images/page_prev.png)
}

.pagination a.page-btn.next {
    background-image:url(../images/page_next.png)
}

.pagination a.page-link {
    font-size:1.8rem;
    letter-spacing: -0.05em;
    font-weight:500;
    transition: all 0.5s;
}

.pagination a.page-link:hover,
.pagination a.page-link.current {
    background-color:#3768cd;
    color:#fff;
}

.pagination ol.page-list {
    display:flex;
    gap:0.4rem;
    margin:0.4rem;
}

@media (max-width: 1600px) {
    .search-area .grouping.wide {
        justify-content: center;
    }
}

@media (max-width: 1300px) {
    .search-area .grouping.sm-wide {
        justify-content: center;
    }

    .publication-list ul {
        gap:2rem;
    }

    .publication-list ul li {
        width:calc((100% - 8rem) / 5);
    }

    .video-list > ul {
        gap:2.5rem 4rem;
    }

    .video-list > ul > li {
        width:calc((100% - 8rem) / 3);
    }

	.photo-list > ul {
		gap:2.5rem 3.5rem;
	}
	
	.photo-list > ul > li {
		width:calc((100% - 7rem) / 3)
	}

}

@media (max-width: 768px) {
    .search-area label {
        width:100%;
    }

    .search-area input[type=text],
    .search-area input[type=password],
    .search-area input[type=number],
    .search-area select {
        width:100%;
    }

    .search-area .search-btn,
    .search-area .reg-btn {
        width:100%;
    }

    .search-area .grouping {
        gap:1rem;
    }

    .search-area .grouping .input-group {
        width:100%;
        flex-wrap:wrap;
    }

    .search-area .grouping .input-group select {
        width:100%;
    }

    .search-area .grouping .input-group input[type=text] {
        max-width:100%;
    }

    .search-area .grouping .input-group input[type=text].keyword {
        max-width:100%;
    }

    .search-area .date-select {
        width:calc((100% - 1rem) / 2)
    }
    
    .publication-list ul li {
        width:calc((100% - 2rem) / 2);
    }

    .video-list > ul {
        gap:2rem;
    }

    .video-list > ul > li {
        width:calc((100% - 2rem) / 2);
    }

    .view-wrap .view-info ul {
        gap:0.4rem 4rem;
    }

    .view-wrap .view-info ul li::after {
        right:-2rem;
    }

    .view-wrap .view-content {
        padding:2.5rem;
    }

    .view-wrap .view-files {
        padding:2rem 2.5rem;
    }

    .view-wrap .view-list dl dt {
        height:6rem;
        width:15rem;
    }

    .view-wrap .view-list dl dd {
        height:6rem;
        width:calc(100% - 15rem);
    }

	.photo-list > ul {
		gap:2.5rem;
	}
	
	.photo-list > ul > li {
		width:calc((100% - 2.5rem) / 2)
	}
	
}

@media (max-width: 480px) {
	.photo-list > ul > li {
		width:100%
	}
}