@charset "utf-8";

/*
font-family: 'NanumGothic', sans-serif;
font-family: 'NanumSquareNeo', sans-serif;
*/



/* 리스트 상단 */
#board .list_top01 {border-top: 3px solid #d7dae2; padding-top: 43px; min-height: 45px; padding-right: 60%; display:flex; justify-content:left; align-items:center; table-layout:fixed; position: relative; margin-bottom: 39px;}
#board .list_top01 .count {font-size: 24px; color: #727171; font-weight: 700;}
#board .list_top01 .count strong {color: #000000; font-weight: 700}
#board .list_top01 .search_bx {position: absolute; right: 0; top: 43px; width: 60%; box-sizing: border-box; padding: 0 76px 0 271px;}
#board .list_top01 .search_bx select {width: 161px; height: 45px; border: 1px solid #e2e3e3; box-sizing: border-box; padding: 0 40px 0 13px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/icon/arrow2.png) no-repeat right 16px center #fff; font-size: 21px; color: #727171; outline: none; position: absolute; left: 0; top: 0;}
#board .list_top01 .search_bx select:nth-child(2) {left: 166px; width: 100px;}
/*#board .list_top01 .search_bx select:focus {border-color: #31735d;}*/
#board .list_top01 .search_bx input {width: 100%; height: 45px; border: 1px solid #e2e3e3; font-size: 21px; outline: none; padding: 0 15px; color: #000000;}
#board .list_top01 .search_bx input::placeholder {color: #727171;}
#board .list_top01 .search_bx .btn {width: 76px; line-height: 45px; background-color: #000000; text-align: center; position: absolute; top: 0; right: 0; font-size: 21px; color: #ffffff;}

#board .list_top02 {border-top: 2px solid #000000; background-color: #dae6e6; margin-bottom: 67px; position: relative; z-index: 3;}
#board .list_top02 .f_w {display: flex; flex-flow: wrap; padding: 25px 36px 23px; justify-content: right;}
#board .list_top02 .date_bx {width: 414px; margin-right: 32px; box-sizing: border-box; display: flex; flex-flow: wrap;}
#board .list_top02 .search_bx {width: 100%; box-sizing: border-box; position: relative; padding: 0 128px 0 118px;}
#board .list_top02 .f_w input {height: 51px; box-sizing: border-box; background-color: #fff; box-sizing: border-box; border: 1px solid #9fa0a0; font-size: 18px; color: #4c4948; padding: 0 10px; outline: none; width: 100%;}
#board .list_top02 .f_w input::placeholder {color: #9fa0a0;}
#board .list_top02 .f_w select {height: 51px; box-sizing: border-box; box-sizing: border-box; border: 1px solid #9fa0a0; font-size: 18px; color: #4c4948; padding: 0 26px 0 10px; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/icon/arrow1.png) no-repeat center right 12px #fff;}
#board .list_top02 .f_w .date_bx input {width: calc(50% - 16px); background: url(../images/icon/datepicker.png) no-repeat right 12px center #fff; cursor: pointer;}
#board .list_top02 .date_bx span {width: 32px; position: relative;}
#board .list_top02 .date_bx span::before {content: ''; width: 17px; height: 2px; background-color: #727171; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
#board .list_top02 .f_w .search_bx select {position: absolute; left: 0; top: 0; width: /*85px*/95px;}
#board .list_top02 .f_w .search_bx .btn {position: absolute; right: 0; top: 0; height: 51px; width: 96px; text-align: center; box-sizing: border-box; border: 1px solid #9fa0a0; background-color: #333333; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#board .list_top02 .f_w .search_bx .btn span {display: inline-block; padding-left: 37px; display: inline-block; line-height: 30px; font-size: 18px; color: #ffffff; font-weight: 700; background: url(../images/icon/search.png) no-repeat left center;}

#ui-datepicker-div {padding: 0; font-family: 'NanumSquareNeo', sans-serif; border-color: #00696d; border-radius: 0;}
#ui-datepicker-div .ui-widget-header {padding: 5px 20px; border-radius: 0; border: none; background-color: #e6e6e6;}
#ui-datepicker-div .ui-widget-header::after {content: ''; width: 100%; height: 36px; background-color: #00696d; position: absolute; left: 0; top: 0;}
#ui-datepicker-div .ui-widget-header a {z-index: 2; background-color: #e6e6e6; cursor: pointer;}
#ui-datepicker-div .ui-widget-header a:hover {border: none;}
#ui-datepicker-div .ui-datepicker-prev {top: 39px; left: 2px;}
#ui-datepicker-div .ui-datepicker-next {top: 39px; right: 2px;}
#ui-datepicker-div .ui-datepicker-prev span {background: url(../images/icon/arrow8.png) no-repeat center; background-size: 12px auto;}
#ui-datepicker-div .ui-datepicker-next span {background: url(../images/icon/arrow9.png) no-repeat center; background-size: 12px auto;}
#ui-datepicker-div .ui-datepicker-title {position: relative; padding-bottom: 32px; z-index: 1; color: #fff; font-weight: 700;}
#ui-datepicker-div .ui-datepicker-title .ui-datepicker-year {background-color: transparent; border: none; margin-right: 7px; color: #fff; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/icon/arrow10.png) no-repeat right center; width: 71px; box-sizing: border-box; padding: 0 32px 0 0; text-align: center; margin-right: -31px;}
#ui-datepicker-div .ui-datepicker-title .ui-datepicker-year option {color: #333;}
#ui-datepicker-div .ui-datepicker-title .ui-datepicker-month {position: absolute; bottom: 0; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); background-color: transparent; border: none; outline: none; text-align: center; width: 50px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/icon/arrow1.png) no-repeat right center; box-sizing: border-box; padding-right: 13px;}
#ui-datepicker-div td span, #ui-datepicker-div td a {border: none; background-color: transparent; text-align: center;}
#ui-datepicker-div .ui-state-active {color: #00696d; background-color: #80ffff;}




/* 리스트 */
#board .list01 {border-top: 2px solid #303030;}
#board .list01 table {width: 100%; table-layout: fixed;}
#board .list01 table thead tr {border-bottom: 1px solid #cccdcd;}
#board .list01 table thead th {background-color: #efefef; font-size: 21px; color: #000000; height: 50px; font-weight: 400}
#board .list01 table tbody tr {position: relative;}
#board .list01 table tbody td {font-size: 18px; line-height: 25px; color: #000000; text-align: center; height: 70px;}
#board .list01 table tbody td.col1 {color: #00b01c;}
#board .list01 table tbody td.col2 {color: #fd7900;}
#board .list01 table tbody td.col3 {color: #00b2ff;}
#board .list01 table tbody td.col4 {color: #402a9d;}
#board .list01 table tbody td.sbject div {max-width: 95%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
#board .list01 table tbody td.sbject div a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#board .list01 table tbody td.sbject div span {color: #000;}
/*#board .list01 table tbody td.sbject div a {color: #000000;}*/

#board .list02 .list_w {display: flex; flex-flow: wrap;}
#board .list02 .list_w a {width: calc(33.333% - 26.666px); margin-right: 40px; box-sizing: border-box; margin-top: 46px; border: 1px solid #cad6d6; background-color: #f0f5f5;}
#board .list02 .list_w a:nth-child(3n) {margin-right: 0;}
#board .list02 .list_w a:nth-child(-n+3) {margin-top: 0;}
#board .list02 .list_w .img_bx {position: relative; overflow: hidden; padding-bottom: 70.29%; border: 1px solid #9fa0a0; top: -1px; width: 100%; left: -1px;}
#board .list02 .list_w .img_bx::before {content: ''; width: 51px; height: 51px; background: url(../images/icon/search.png) no-repeat center #00696d; position: absolute; right: 0; top: 0; z-index: 2;}
#board .list02 .list_w .img_bx > div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
#board .list02 .list_w .txt_bx {padding: 16px 23px 30px;}
#board .list02 .list_w .txt_bx .sb {border-bottom: 2px solid #d7e0e0; padding-bottom: 20px;}
#board .list02 .list_w .txt_bx .sb .img {display: none!important;}
#board .list02 .list_w .txt_bx .sb strong {display: block; font-size: 20px; color: #000000; font-weight: 700; word-break: keep-all; line-height: 30px;}
#board .list02 .list_w .txt_bx .sb .sub_txt {display: none;}
#board .list02 .list_w .txt_bx .sb p {font-size: 15px; color: #000000; word-break: keep-all; line-height: 26px; margin-top: 11px;}
#board .list02 .list_w .txt_bx .txt {font-size: 15px; color: #000000; line-height: 26px; word-break: keep-all; margin-top: 19px; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box; height: 130px;}
#board .list02 .list_w .txt_bx .txt.d_txt {display: none;}

#board .no_data {padding: 100px 0; font-size: 22px; color: #ccc; text-align: center;}



/* 상세 */
#board .view01 {border-top: 3px solid #d7dae2;}
#board .view01 .subject {border-bottom: 3px solid #d7dae2; padding: 38px 0 40px;}
#board .view01 .subject .sb {font-size: 26px; color: #000000; line-height: 41px; font-weight: 700; word-break: keep-all;}
#board .view01 .subject .sb .type {display: inline-block; line-height: 38px; font-size: 24px; color: #fff; border-radius: 25px; padding: 0 30px; margin-right: 3px;}
#board .view01 .subject .sb .type.col1 {background-color: #00b01c;}
#board .view01 .subject .sb .type.col2 {background-color: #fd7900;}
#board .view01 .subject .sb .type.col3 {background-color: #00b2ff;}
#board .view01 .subject .sb .type.col4 {background-color: #402a9d;}
#board .view01 .subject .info {font-size: 0; margin-top: 21px;}
#board .view01 .subject .info li {display: inline-block; margin-right: 63px; font-size: 20px; color: #000000;}
#board .view01 .subject .info li:last-child {margin-right: 0;}
#board .view01 .con {padding: 55px 0 80px; border-bottom: 3px solid #d7dae2;}
#board .view01 .con img {max-width: 100%;}
#board .view01 .file li {border-bottom: 3px solid #d7dae2; padding: 16px 15px 16px 157px; min-height: 65px; position: relative; box-sizing: border-box; font-size: 18px; color: #727171;}
#board .view01 .file li span {position: absolute; left: 15px; line-height: 65px; top: 0; font-weight: 700;}
#board .view01 .file li a {color: #727171; padding-left: 43px; line-height: 30px; background: url(../images/icon/down.png) no-repeat left 0; display: inline-block;}
#board .view01 .btn {font-size: 0; margin-top: 53px;}
#board .view01 .btn a {display: inline-block; line-height: 53px; width: 132px; text-align: center; font-size: 22px; color: #ffffff; background-color: #31735d;}
#board .view01 .page {margin-top: 53px; border-top: 3px solid #7b7a7a; border-bottom: 3px solid #7b7a7a;}
#board .view01 .page .page_w {position: relative; padding: 0 15px 0 157px; height: 66px; display:flex; justify-content:left; align-items:center; table-layout:fixed; box-sizing: border-box; border-bottom: 1px solid #d7dae2;}
#board .view01 .page .page_w:last-child {border-bottom: none;}
#board .view01 .page .page_w .l_txt {position: absolute; left: 15px; line-height: 66px; font-size: 18px; color: #727171;}
#board .view01 .page .page_w .sb {font-size: 18px; color: #727171; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; max-width: 800px; line-height: 25px;}
#board .view01 .page .page_w .sb a {color: #727171;}



/* 페이징 */
#board .page_bx {font-size: 0; padding-top: 65px; text-align: center;}
#board .page_bx a {display: inline-block; vertical-align: middle; width: 70px; height: 70px; box-sizing: border-box;}
#board .page_bx .num {line-height: 70px; font-size: 24px; color: #777777; font-weight: 700; position: relative; z-index: 1;}
#board .page_bx .num.on {color: #fff;}
#board .page_bx .num.on::before {content: ''; width: 100%; height: 100%; background-color: #31735d; position: absolute; left: 0; top: 0; border-radius: 50%; z-index: -1;}
#board .page_bx .page_first {background: url(../images/icon/page_first.png) no-repeat center #fff; border: 1px solid #d4d3d3; margin-right: 16px; border-radius: 50%;}
#board .page_bx .page_prev {background: url(../images/icon/page_prev.png) no-repeat center #fff; border: 1px solid #d4d3d3; margin-right: 14px; border-radius: 50%;}
#board .page_bx .page_next {background: url(../images/icon/page_next.png) no-repeat center #fff; border: 1px solid #d4d3d3; margin-left: 14px; border-radius: 50%;}
#board .page_bx .page_last {background: url(../images/icon/page_last.png) no-repeat center #fff; border: 1px solid #d4d3d3; margin-left: 16px; border-radius: 50%;}


/* PC */
@media all and (min-width:1025px){
    /* 리스트 */
    #board .list01 table tbody td.sbject div span {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #board .list01 table tbody td.sbject div:hover span {color: #31735d; text-decoration: underline; text-underline-position : under; text-decoration-thickness: 1px;}
    
    #board .list02 .list_w .img_bx > div {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
    #board .list02 .list_w a:hover .img_bx > div {transform: scale(1.1);}



    /* 상세 */
    #board .view01 .file li a {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #board .view01 .file li a:hover {color: #31735d; text-decoration: underline; text-underline-position : under; text-decoration-thickness: 1px;}
    #board .view01 .page .page_w .sb a {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #board .view01 .page .page_w .sb a:hover {color: #31735d; text-decoration: underline; text-underline-position : under; text-decoration-thickness: 1px;}
}

/* pc, 태블릿 */
@media all and (min-width:768px){
    #board .list01 table tbody td.sbject div {position: relative;}
}

@media all and (max-width:1100px){
    /* 페이징 */
    #board .page_bx a {width: 60px; height: 60px;}
    #board .page_bx .num {line-height: 60px;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 리스트 상단 */
    #board .list_top01 {min-height: 36px; margin-bottom: 12px; border-width: 2px; padding-top: 12px; padding-right: 65%;}
    #board .list_top01 .count {font-size: 16px;}
    #board .list_top01 .search_bx {top: 12px; width: 65%; padding-left: 219px;}
    #board .list_top01 .search_bx select {height: 36px; font-size: 16px; background-size: 10px auto; width: 129px;}
    #board .list_top01 .search_bx select:nth-child(2) {width: 84px; left: 132px;}
    #board .list_top01 .search_bx input {height: 36px; font-size: 16px;}
    #board .list_top01 .search_bx .btn {line-height: 36px; font-size: 16px;}
    
    #board .list_top02 {margin-bottom: 18px;}
    #board .list_top02 .f_w {padding: 12px 20px;}
    #board .list_top02 .f_w input {font-size: 13px; height: 26px; padding: 0 7px;}
    #board .list_top02 .f_w select {font-size: 13px; height: 26px; padding: 0 7px 0 7px; background-size: 9px auto; background-position: right 6px center;}
    #board .list_top02 .f_w .date_bx {width: 300px;}
    #board .list_top02 .f_w .date_bx input {width: calc(50% - 12px); background-size: 20px auto; background-position: right 13px center;}
    #board .list_top02 .f_w .date_bx span {width: 24px;}
    #board .list_top02 .f_w .date_bx span::before {width: 8px; height: 1px;}
    #board .list_top02 .f_w .search_bx {width: calc(100% - 332px); padding: 0 55px}
    #board .list_top02 .f_w .search_bx select {width: 50px;}
    #board .list_top02 .f_w .search_bx .btn {width: 50px; height: 26px;}
    #board .list_top02 .f_w .search_bx .btn span {line-height: 15px; padding-left: 18px; background-size: 14px auto; font-size: 9px;}
    
    #ui-datepicker-div .ui-datepicker-title .ui-datepicker-year {width: 75px;}



    /* 리스트 */
    #board .list01 {border-width: 1px;}
    #board .list01 table thead th {font-size: 13px; height: 35px;}
    #board .list01 table tbody td {font-size: 12px; height: 50px; line-height: normal;}
    
    #board .list02 .list_w a {width: calc(33.333% - 5.333px); margin-right: 8px; margin-top: 25px;}
    #board .list02 .list_w .img_bx::before {width: 20px; height: 20px; background-size: 11px auto;}
    #board .list02 .list_w .txt_bx {padding: 4px 8px 7px;}
    #board .list02 .list_w .txt_bx .sb {padding-bottom: 7px; border-width: 1px;}
    #board .list02 .list_w .txt_bx .sb strong {font-size: 10px; line-height: 15px;}
    #board .list02 .list_w .txt_bx .sb p {margin-top: 0; font-size: 8px; line-height: 13px;}
    #board .list02 .list_w .txt_bx .txt {margin-top: 8px; font-size: 7px; line-height: 12px; height: 60px;}
    
    #board .no_data {padding: 50px 0; font-size: 12px;}



    /* 상세 */
    #board .view01 {border-width: 2px;}
    #board .view01 .subject {padding: 13px 0 16px; border-width: 1px;}
    #board .view01 .subject .sb {font-size: 15px; line-height: 20px;}
    #board .view01 .subject .sb .type {font-size: 9px; line-height: 14px; padding: 0 10px; margin-right: 0; position: relative; top: -1px;}
    #board .view01 .subject .info {margin-top: 4px;}
    #board .view01 .subject .info li {font-size: 9px; color: #777777; margin-right: 15px; position: relative;}
    #board .view01 .subject .info li::before {content: ''; width: 1px; height: 8px; background-color: #e0dede; position: absolute; right: -8px; top: 50%; margin-top: -4px;}
    #board .view01 .subject .info li:last-child::before {display: none;}
    #board .view01 .subject .info li span {color: #000000;}
    #board .view01 .con {padding: 17px 0 18px; border-width: 1px;}
    #board .view01 .file li {border-width: 1px; min-height: 25px; padding: 6px 10px 6px 54px; display:flex; justify-content:left; align-items:center; table-layout:fixed;}
    #board .view01 .file li span {font-size: 8px; line-height: 25px; left: 0;}
    #board .view01 .file li a {font-size: 8px; line-height: 12px; padding-left: 16px; background-size: 11px auto;}
    #board .view01 .btn {margin-top: 17px;}
    #board .view01 .btn a {width: 50px; line-height: 20px; font-size: 9px;}
    #board .view01 .page {margin-top: 17px; border-width: 1px;}
    #board .view01 .page .page_w {height: 25px; padding: 0 10px 0 54px;}
    #board .view01 .page .page_w .l_txt {font-size: 8px; left: 0; line-height: 25px;}
    #board .view01 .page .page_w .sb {font-size: 8px;}



    /* 페이징 */
    #board .page_bx {padding-top: 20px;}
    #board .page_bx a {width: 32px; height: 32px;}
    #board .page_bx .num {line-height: 32px; font-size: 10px;}
    #board .page_bx .page_first {background-size: 10px auto; margin-right: 4px;}
    #board .page_bx .page_prev {background-size: 7px auto; margin-right: 9px;}
    #board .page_bx .page_next {background-size: 7px auto; margin-left: 9px;}
    #board .page_bx .page_last {background-size: 10px auto; margin-left: 4px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* 리스트 상단 */
    #board .list_top01 {padding: 0; border-top: 1px solid #000000; width: calc(100% + 40px); left: -20px; padding: 17px 20px 0; box-sizing: border-box;}
    #board .list_top01 .count {display: none;}
    #board .list_top01 .search_bx {position: relative; width: 100%; top: auto; right: auto; padding: 14px 13px; background-color: #ededed; border: 1px solid #939393;}
    #board .list_top01 .search_bx select:nth-child(n) {position: relative; top: auto; left: auto; width: 100%; margin-bottom: 10px; background: url(../images/icon/arrow3.png) no-repeat right 12px center #fff; background-size: 10px auto; padding: 0 30px 0 22px; color: #000000;}
    #board .list_top01 .search_bx input {margin-bottom: 10px; padding: 0 22px; color: #000000;}
    #board .list_top01 .search_bx .btn {position: relative; top: auto; right: auto; width: 100%; display: block;}
    
    #board .list_top02 {border-width: 1px; position: relative; width: calc(100% + 40px); left: -20px; box-sizing: border-box;}
    #board .list_top02 .f_w .date_bx {width: 100%; margin-right: 0;}
    #board .list_top02 .f_w .date_bx input {padding: 0 15px 0 44px; background-position: left 13px center; text-align: center;}
    #board .list_top02 .f_w .search_bx {width: 100%; margin-top: 8px;}



    /* 리스트 */
    #board .list01 table colgroup {display: none;}
    #board .list01 table thead {display: none;}
    #board .list01 table tbody {display: block;}
    #board .list01 table tbody tr {display: block; width: 100%; box-sizing: border-box; border-bottom: 1px solid #c9caca; padding: 14px 0 12px;}
    #board .list01 table tbody tr:last-child {border-bottom: none;}
    #board .list01 table tbody td {display: block; display: inline-block; height: auto; font-size: 10px; margin-right: 20px;}
    #board .list01 table tbody td::after {content: ''; width: 1px; height: 10px; background-color: #939393; top: 50%; margin-top: -5px; right: -11px; position: absolute;}
    #board .list01 table tbody td::after {content: ''; width: 1px; height: 10px; background-color: #939393; top: 50%; margin-top: -5px; right: -11px; position: absolute;}
    #board .list01 table tbody td.num {display: none;}
    #board .list01 table tbody td.type {font-size: 12px; font-weight: 700; margin-right: 0; margin-bottom: 6px;}
    #board .list01 table tbody td.type::before {content: '[';}
    #board .list01 table tbody td.type::after {content: ']'; width: auto; height: auto; position: relative; right: auto; top: auto; background-color: transparent; margin-top: 0;}
    #board .list01 table tbody td.sbject {display: block; width: 100%; text-align: left; font-size: 13px; font-weight: 800; margin-right: 0; margin-bottom: 4px;}
    #board .list01 table tbody td.sbject::after {display: none;}
    #board .list01 table tbody td.writer { position: relative;}
    #board .list01 table tbody td.writer::before {content: '작성자 : ';}
    #board .list01 table tbody td.date {margin-right: 0;  position: relative;}
    #board .list01 table tbody td.date::before {content: '작성일 : ';}
    #board .list01 table tbody td.date::after {display: none;}
    #board .list01 table tbody td.count {display: none;}
    
    #board .list02 .list_w a:nth-child(n) {width: calc(50% - 4px); margin-right: 8px; margin-top: 25px;}
    #board .list02 .list_w a:nth-child(2n) {margin-right: 0;}
    #board .list02 .list_w a:nth-child(-n+2) {margin-top: 0;}



    /* 상세 */
    #board .view01 {border-top: 1px solid #000000; position: relative; width: calc(100% + 40px); left: -20px; box-sizing: border-box; padding: 0 20px;}
}