:root {
    --font-14: 14px;
    --font-15: 15px;
    --font-16: 16px;
    --font-18: 18px;

    --color-black: #222222;

    --radius4:4px;
    --radius10:10px;
    --radius80:80px;
}


/* 공통 */
.radius20 { -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }

/* 게시판 */
#board {}

#board .board_head { display:flex; justify-content:space-between; margin-bottom:15px; }

/* 검색 */
#search { }
#search .list { }
#search .list ul { margin: 0; padding: 0; }
#search .list li { list-style: none; float: left; margin: 0 0 0 5px; background-color: #f2f2f2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#search .list li.select { width:130px; }
#search .list li.select select { width: 100%; height: 36px; margin: 0; padding: 0 10px; font-weight: normal; font-size: var(--font-14); line-height: 36px; color: #999999; letter-spacing: -0.5px; border: none; background-color: transparent; outline: none; }
#search .list li.input { width: 200px; }
#search .list li.input input { width: 100%; height: 36px; margin: 0; padding: 0 14px; font-weight: normal; font-size: var(--font-14); line-height: 36px; color: #999999; letter-spacing: -0.5px; border: none; background-color: transparent; outline: none; }
#search .list li.input input::-webkit-input-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.input input:moz-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.input input::-moz-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.input input:-ms-input-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.submit { width: 80px; background-color: #444444; }
#search .list li.submit a,
#search .list li.submit a:hover { display: block; font-weight: normal; font-size: var(--font-14); line-height: 36px; color: #f1f1f1; letter-spacing: -0.5px; text-align: center; }
#search .list li.submit input { width: 100%; padding: 0; background-color: #444444; font-size: var(--font-14); line-height: 36px; color: #f1f1f1; letter-spacing: -0.5px; text-align: center; border:none; outline:none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#search .list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}


/* 버튼 */
.board_btn { display: inline-block; min-width: 80px; background-color: #444444; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.board_btn a,
.board_btn a:hover { display: block; padding: 0 25px; font-size: 14px; line-height: 36px; color: #f1f1f1; text-align: center; }


/* 게시판 - 링크 리스트 */
#board > .link_list { display:flex; flex-direction:row; flex-wrap:wrap; gap: 24px 3%; padding-top: 30px; border-top: 3px solid #444444; }
#board > .link_list .item { cursor: pointer; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; width:22.75%; padding: 48px 0; line-height: 0; border:1px solid #E3E3E3; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; }
#board > .link_list .item img { max-width:80%; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease;  }
#board > .link_list .item .item_bg { opacity:0; position: absolute; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; background-color:rgba(0, 0, 0, 0.4); -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
#board > .link_list .item .item_bg img { rotate:-40deg; }
#board > .link_list .item:hover img { transform:scale(1.15); -webkit-transform:scale(1.15); -moz-transform:scale(1.15); -o-transform:scale(1.15); } 
#board > .link_list .item:hover .item_bg { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; }


/* 페이징 */
#paging { position: relative; margin: 40px 0 0; padding: 16px 0 20px; background-color: #fff; font-size: 0; text-align: center; }
#paging.paging_reple { position: relative; left: auto; right: auto; bottom: auto; padding: 35px 0 20px; background-color: transparent; border-top: none; }
#paging .paging_btn { cursor: pointer; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-top: 3px; text-align: center; text-indent:-9999px }
#paging .paging_btn.first { background: url("../images/board/first.svg") no-repeat center; margin-right: 10px; }
#paging .paging_btn.before { background: url("../images/board/before.svg") no-repeat center; }
#paging .paging_btn.next { background: url("../images/board/next.svg") no-repeat center; }
#paging .paging_btn.last { background: url("../images/board/last.svg") no-repeat center; margin-left: 10px; }

#paging .paging_list { display: inline-block; vertical-align: middle; margin: 0 18px; }
#paging .paging_list ul { margin: 0; padding: 0; }
#paging .paging_list li { display: inline-block; vertical-align: top; list-style: none; margin: 0 10px; }
#paging .paging_list a,
#paging .paging_list a:hover { display: block; font-weight: normal; font-size: var(--font-14); line-height: 24px; color: #888888; letter-spacing: -0.5px; text-align: center; }
#paging .paging_list li.select a,
#paging .paging_list li.select a:hover { font-weight: bold; font-size: var(--font-14); color: #242424; }
#paging .paging_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}



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

    #board .board_head { display:flex; justify-content:space-between; flex-direction:column; }

    /* 검색 */
    #search { margin:10px 0 0; }
    #search .list li { margin: 0 0 0 1%; }
    #search .list li:first-child { margin: 0; }
    #search .list li.select { width: 25%; margin-left:0; }
    #search .list li.input { width: 58%; }
    #search .list li.submit { width: 15%; }

    /* 게시판 */
    #board > .search { margin: 0 0 20px; }
    #board > .search li { width: 39%; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
    #board > .search .select { height: 40px; padding: 0 10px; font-size: 15px; line-height: 40px; }
    #board > .search .input { height: 40px; padding: 0 10px; font-size: 15px; line-height: 40px; }
    #board > .search .input::-webkit-input-placeholder { font-size: 15px; }
    #board > .search .input:moz-placeholder { font-size: 15px; }
    #board > .search .input::-moz-placeholder { font-size: 15px; }
    #board > .search .input:-ms-input-placeholder { font-size: 15px; }
    #board > .search li.submit { width: 20%; height: 40px; }
    #board > .search li.submit a,
    #board > .search li.submit a:hover { font-size: 15px; line-height: 40px; }
    #board > .search li.submit input { font-size: 15px; line-height: 40px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }


    /* 게시판 - 링크 리스트 */
    #board > .link_list { gap: 20px 3%; padding-top: 30px; border-top: 3px solid #444444; }
    #board > .link_list .item { width:48.5%; padding: 40px 0; }

}