@charset "utf-8";
/* CSS Document */
#data-wrap{padding-bottom:6.25rem;}
#data-wrap > .inner-wrap{width:calc(100% - 40px); max-width:1200px; margin:0 auto;}
#data-wrap .inner-wrap > .search-wrap{width:calc(100% - 40px); padding:20px; background-color:#343434;}
#data-wrap .inner-wrap > .search-wrap > .inner-wrap{display:flex; align-items: center; background-color: #212121;}
#data-wrap .inner-wrap > .search-wrap .board-search-select{background-color: #212121; width:205px; height: 60px; color:#F3CFAC; font-size:1.125rem;}
#data-wrap .inner-wrap > .search-wrap .hv{width:1px; height: 25px; background-color: #444444;}
#data-wrap .inner-wrap > .search-wrap .search-input{background-color:#212121; border-radius: 0; color:#F3CFAC; width:calc(100% - 266px); height: 60px;}
#data-wrap .inner-wrap > .search-wrap .search-input:focus{background-color: #212121; color:#F3CFAC;}
#data-wrap .inner-wrap > .search-wrap  button{width:60px; height: 60px; background-color:#7D1685; display:flex; justify-content: center; align-items: center;}
p.emptyMessage{text-align: center; margin:50px auto;}

#data-wrap.read-wrap{padding:6.25rem 0;}
#data-wrap.read-wrap h1.title{color:#ffffff; text-align: center; font-weight: 900; font-size:2.1875rem; margin:3.125rem 0;}
#data-wrap.read-wrap .head-info-wrap{display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#data-wrap.read-wrap .head-info-wrap .info-wrap{display: flex; align-items: center;}
#data-wrap.read-wrap .head-info-wrap .info-wrap > .hv{width:1px; height: 15px; background-color: #363636; margin:0 15px;}
#data-wrap.read-wrap .cont-wrap{padding:3.125rem 0;}
#data-wrap.read-wrap .cont-wrap img{max-width:100%;}
#data-wrap.read-wrap .btn-wrap{text-align: center; margin:30px 0;}

#data-wrap.read-wrap .file-wrap{width:273px; height: 43px; border:1px solid #363636; overflow: hidden; cursor: pointer; transition:all .5s;}
#data-wrap.read-wrap .file-wrap > li{padding:5px 10px; border-bottom:1px solid #363636; width:calc(100% - 20px); display:flex; justify-content: space-between; align-items: center; min-height:34px; transition:all .5s;}
#data-wrap.read-wrap .file-wrap > li:last-child{border: none;}
#data-wrap.read-wrap .file-wrap > li .title-wrap{margin-right:5px; width:calc(100% - 29px); display:flex; align-items: flex-start;}
#data-wrap.read-wrap .file-wrap > li .title-wrap > p{font-size:0.875rem; color:#858585;}
#data-wrap.read-wrap .file-wrap > li > a{display:flex; justify-content: space-between; align-items: center; width:100%;}
#data-wrap.read-wrap .file-wrap > li .title-wrap > img{margin-right:5px; width:18px;}
#data-wrap.read-wrap .file-wrap > li > a > svg{width:18px;}
#data-wrap.read-wrap .file-wrap > li:first-child:hover{background-color: #1C1C1C;}
#data-wrap.read-wrap .file-wrap > li:hover{background-color:#1C1C1C;}


.pn-wrap{width:calc(100% - 30px); padding:15px; border-top:1px solid #363636; display:flex; align-items: center; transition:all .5s;}
.pn-wrap:hover{background-color:#1C1C1C; transition:all .5s;}
.pn-wrap:last-of-type{border-bottom:1px solid #363636;}
.pn-wrap > svg{margin:0 15px;}

.board-list-wrap{margin-top:6.25rem;}
.board-list-wrap .list-head{width:100%;  background-color:#141516;  padding:15px 0; display:flex;}
.board-list-wrap .list-head > li{text-align: center; color:#535353; padding:0 10px;}
.board-list-wrap ul > li.number{width:100px;}
.board-list-wrap ul > li.file{width:100px;}
.board-list-wrap ul > li.date{width:150px;}

.board-list-wrap .cont-list{display:flex; padding:15px 0; border-bottom:1px solid #363636; transition: all .5s;}
.board-list-wrap .cont-list:hover{background-color:#1C1C1C;}
.board-list-wrap .cont-list > li{text-align: center; color:#87898F; display: flex; align-items: center; justify-content:center; padding:0 10px;}
.board-list-wrap .cont-list > li.number{font-weight: 800;}
.board-list-wrap .cont-list > li > a{width:100%; display: inline-block;  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:1.062em; font-weight: 500; text-align: left; color:#87898F}

@media only screen and (max-width:580px){
	#data-wrap .inner-wrap > .search-wrap .board-search-select{width:130px;}
	#data-wrap .inner-wrap > .search-wrap .search-input{width:calc(100% - 130px);}
	.board-list-wrap ul > li.disappear{display:none;}
	#data-wrap.read-wrap .file-wrap{width:100%; margin-top:15px;}
}