@charset "utf-8";

/* 서브리스트  */
#sub_list {
	position:relative;
	width:100%;
	height:auto;
	margin:40px auto;
	overflow:hidden;
    }
#sub_list h4 {
	margin-bottom:20px;
	line-height:24px;
	font-size:20px;
	font-weight:bold;
	font-family:nanumgothicBold,sans-serif;
    }
#sub_list div.count {
	position:absolute;
	top:5px;
	right:0;
	color:#666;
	font-size:14px;
    }
#sub_list div.count span {
	padding-left:5px;
	color:#3366cc;
	font-weight:bold;
    }
#sub_list div.count span.bar {
	display:inline-block;
	width:9px;
	height:9px;
	padding:0 5px;
	background:url(/next/images/site2/count_bar.png) no-repeat center;
	vertical-align:middle;
    }
#sub_list ul {
	display:flex;
	display:-webkit-flex;
	flex-flow:row wrap;
	margin:0 -5px 10px;
	overflow:hidden;
    }
#sub_list ul:after {
	clear:both;
	display:block;
	content:"";
    }
#sub_list ul li {
	position:relative;
	width:calc(25% - 12px);
	margin:0 5px 45px;
	border:1px solid #ddd;
	overflow:hidden;
    }
#sub_list ul li > a {
	display:block;
    }
#sub_list ul li > div.title {
	padding:10px 15px;
	position:relative;
    }
#sub_list ul li>div.title a {
	font-size:13px;
	line-height:20px;
	font-weight:bold;
	color:#272727;
    }
#sub_list ul li > div.date {
	padding:0 15px;
	margin-bottom:15px;
	font-size:14px;
	color:#828282;
    }
#sub_list ul li > div.date span {
	display:block;
	float:right;
	position:absolute;
	right:15px;
	bottom:15px;
	width:14px;
	height:16px;
	background:url(/next/images/site2/s_share.png) no-repeat;
	cursor:pointer;
    }
#sub_list ul li>div.contents {
	width:90%;
	padding:15px 15px 30px;
	color:#828282;
	font-size:14px;
    }
#sub_list ul li>div.shortcontents {
	width:90%;
	padding:30px 15px;
	color:#828282;
	font-size:14px;
    }
/*#sub_list ul li:nth-child(4n+1) {
	 margin-left:0;
    }*/
#sub_list img.play {
	position:absolute;
	top:50px;
	left:90px;
	width:42px;
	height:42px;
    }
#sub_list_restore {
	position:relative;
	width: 320px;
	height: auto;
	margin: 40px 20px;
	overflow:hidden;
    }
#sub_list_restore h4 {
	margin-bottom:20px;
	line-height:24px;
	font-size:20px;
	font-weight:bold;
	font-family:nanumgothicBold,sans-serif;
    }
#sub_list_restore div.count {
	position:absolute;
	top:5px;
	right:0;
	color:#666;
	font-size:14px;
    }
#sub_list_restore div.count span {
	padding-left:5px;
	color:#3366cc;
	font-weight:bold;
    }
#sub_list_restore div.count span.bar {
	display:inline-block;
	width:9px;
	height:9px;
	padding:0 5px;
	background:url(/next/images/site2/count_bar.png) no-repeat center;
	vertical-align:middle;
    }
#sub_list_restore ul {
	display:block;
	/* height:280px;
	margin-bottom:10px; */
    overflow: hidden;
    }
#sub_list_restore ul:after {
	clear:both;
	display:block;
	content:"";
    }
#sub_list_restore ul li {
	float: left;
	position: relative;
	width: 300px;
	height: 240px;
	margin-left: 20px;
	margin-bottom:20px;
	border:1px solid #ddd;
    box-sizing: border-box;
    overflow: hidden;
    }
#sub_list_restore ul li > a {
    display: block;
    }
#sub_list_restore ul li:first-child {
	margin-left:0;
    }
#sub_list_restore ul li > div.title {
	position:relative;
	padding:10px 15px;
    }
#sub_list_restore ul li > div.title a {
	font-size:14px;
	line-height:20px;
	font-weight:bold;
	color:#272727;
    }
#sub_list_restore ul li > div.date {
	padding:0 15px;
	color:#828282;
	font-size:14px;
    }
#sub_list_restore ul li > div.date span {
	float: right;
	display: block;
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 14px;
	height: 16px;
	background:url(/next/images/site2/s_share.png) no-repeat;
	cursor: pointer;
    }
#sub_list_restore ul li>div.contents {
	width:90%;
	padding:30px 15px;
	color:#828282;
	font-size:14px;
    }
#sub_list_restore ul li:nth-child(4n+1) {
	margin-left:0;
    }
#sub_list_restore img.play {
	position:absolute;
	top:50px;
	left:90px;
	width:42px;
	height: 42px;
    }
.list_board {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0;
	height: auto;
    }
.list_board ul {
	float: left;
	position: relative;
	width:100%;
	padding: 10px 0 10px 0;
	background: #fff;
    }
.list_board ul li {
	float: left;
	width: calc(100% - 20px);	
	padding: 10px 0 10px 20px;
	background: #fff;
    } 
.list_board ul li a {
	text-decoration: none;
    } 
.list_board ul li span.gubun,
.list_board ul li span.grade,
.list_board ul li span.subject,
.list_board ul li span.writer,
.list_board ul li span.group  {
	float: left;
    width: 10%;
	color: #555;
	font-size: 15px;
	font-weight: 300;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
.list_board ul li span.subject {
    width: 45%;
    }
.list_board ul li span.writer {
    width: 15%;
    }
.list_board ul li span.group {	
    width: auto;
    } 
.list_board ul li span.file {
	float: right;
	color: #666;
	font-size: 15px;
	font-weight: 300;
    } 
.subtitles span.more{
	float: right;
	height: 50px;
	line-height:50px;
	font-size: 15px;
	font-weight: 300;
    } 
.newsBoards {
    overflow: hidden;
    }
.newsBoard{
	display: inline-block;
	width:98%;
	height:320px;
    }     
.leftBoard{
	float:left;
	width: 320px;
	height: 320px;	
	margin-right: 20px;
    overflow: hidden;
    } 
.rightBoards,
.rightBoard {
    position: relative;
    overflow: hidden;
    } 
.rightBoard {
	margin-top: 30px;
    } 
.leftBoard_photo{
    margin-top: 30px;
    margin-left: 5px;	
    } 
.ext_text_archivesRestore{
	margin-bottom: 20px;
	color:#333;
	line-height: 1.5;
	font-size: 15px;
    } 

.btn_search_intro_archivesRestore {
	float: right;
	display: inline-block;
	width: 101px;
	height: 40px;
	margin-bottom: 30px;
	margin-right: 10px;
	padding-left: 20px;
	background: #194a77;
	/* background-image: url(/next/images/bl_btn_intro.png); */
	background-position: left 15px center;
	background-repeat: no-repeat;
	color: #fff;
	text-align: left;
	text-decoration: none;
	line-height: 40px;
	font-size: 16px;
	font-weight: 400;
    } 
.archives_restore_box .newsBoards {
    margin-top: 30px;
    }
.archives_restore_box .leftBoard {  
    height: auto;
    }
.archives_restore_box #sub_list_restore {
    margin: 0;
    }
.archives_restore_box .rightBoards h3 {
    margin: 0 0 20px;
    padding: 0;
    }


/* 반응형 STYLE */
@media screen and (max-width: 768px) {
#sub_list ul li {
    width: calc(50% - 12px);
    }
} 
@media screen and (max-width: 650px) {
.leftBoard {
    float: none;
    width: 100%;
    margin-right: 0;
    }
#sub_list_restore,
#sub_list_restore ul li {
    width: 100%;
    }
#sub_list_restore ul li > a {
    text-align: center;
    }
.mov_cont4 {
    width: 100%;
    height: 225px;
    }
.subtitles-underbar {
    margin-top: 20px;
    }    
}
@media screen and (max-width: 410px) {
#sub_list ul li {
    width: 100%;
    box-sizing: border-box;
    }
}