@charset "utf-8";
@import "common.css";

/*-----------------------------------------------
	topics
-----------------------------------------------*/
/* top */
.top{
	background:url(/assets/img/topics/img_top.jpg) center top no-repeat;
}
@media only screen and (min-width:1400px){
	.top{
		background-size:cover;
	}
}

/* contents */
.contents{
	text-align:center;
}
.contents .section{
	max-width:1400px;
	margin:0 auto 110px;
}
.contents h4{
	font-size: 33px;
	line-height:36px;
	font-weight: normal;
	margin-bottom: 50px;
	padding-bottom: 20px;
	position: relative;
	text-align:center;
}

.contents h4:after{
	background-color: currentcolor;
	bottom: 0;
	content: "";
	height: 4px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	width: 110px;
}
.contents h4.title{
	margin-bottom:8px;
	font-weight:bold;
	font-size:26px;
	line-height:36px;
	text-align:left;
}
.contents h4.title:after{
	height: 0;
}
.contents h5{
	font-size: 26px;
	font-weight:bold;
	margin-bottom:1em;
	line-height:36px;
	padding:0.5em 0;
	text-align:center;
	/*color: #ff8e00;*/
}
.contents p{
	margin-bottom:24px;
	font-size:16px;
	line-height:28px;
}
.contents .section.topics-block {
	max-width: 950px;
	padding:30px 0;
}

@media only screen and (max-width:767px){
	.contents .section{
		margin-bottom:100px;
	}
	.contents .section:last-of-type{
		margin-bottom: 90px;
	}
	.contents h4{
		margin-bottom:4px;
		padding:0 14px;
		font-size:20px;
		line-height:30px;
	}
	.contents p{
		margin-bottom:4px;
		padding:0 14px;
		/*font-size:11px;
		line-height:18px;*/
	}
   .contents .section.topics-block {
    	max-width:100%;
	    padding:25px 0 25px;
}
}


/* topics */
.topics{
	margin:0;
	text-align:left;
}
.page_topics{
	margin:10px;
	text-align:left;
}
.topics .heading{
	display:inline-block;
	width:170px;
	margin-right:14px;
	padding-top:4px;
	text-align:center;
	vertical-align:top;
}
.topics .tit{
	margin-bottom:4px;
	font-size:33px;
	line-height:48px;
}
.topics .tit .fa{
	display:block;
	margin-bottom:12px;
	color:#ff8e00;
	font-size:25px;
}
.topics .list{
	width: 100%;
	display:inline-block;
	vertical-align:top;
}
.topics .list a{
	display:block;
	padding:9px 5px;
}
.topics .list p{
	display:inline-block;
	margin-bottom:0;
}
.topics .list ul{
	margin-bottom:20px;
}
.topics .list li{
	border-bottom:1px solid #E1E1E1;
	font-size:14px;
	list-style:none;
}
.topics .list li:last-child{
	border-bottom:none;
}
.topics .list span,
.page_topics .list span{
	display:inline-block;
	width:70px;
	margin-right:10px;
	padding:3px 0 2px;
	border-radius:8px;
	color:#fff;
	font-weight:bold;
	font-size:12px;
	text-align:center;
}
.topics .list .recruit,
.page_topics .list .recruit{
	background-color:#448ac9;
}
.topics .list .company,
.page_topics .list .company {
	background-color:#ff8e00;
}
.topics .list .products,
.page_topics .list .products{
	background-color:#85B200;
}
.topics .list .news,
.page_topics .list .news{
	background-color:#949494;
}
.topics .list time,
.page_topics .list time{
	margin-right:10px;
	font-size:12px;
}
.topics .list p.topic_etails{
	margin:0.5em 0.5em 0.5em;
	font-size:14px;
	color:#666;
}
@media only screen and (max-width:767px){
	.topics{
		position:relative;
		padding:13px 10px;
	}
	.topics .heading{
		width:100%;
		margin-right:0;
	}
	.topics .tit{
		font-size:24px;
		line-height:25px;
	}
	.topics .tit .fa{
		display:inline-block;
		margin-right:5px;
		font-size:24px;
	}
	.topics .btn{
		position:absolute;
		bottom:20px;
		left:50%;
		margin-left:-65px;
	}
	.topics .list{
		width:100%;
		margin-bottom:60px;
	}
	.topics .list a{
		padding:8px 5px;
	}
	.topics .list p{
		margin:10px 0 0;
		padding:0;
		font-size:14px;
		line-height:18px;
		display:block;
	}
	.topics .list span{
		width:50px;
		margin-right:5px;
		font-size:10px;
	}
	.topics .list time{
		margin-right:0;
		font-size:10px;
	}
}

/* ------ Link ------ */
.txt-block a{color:#ff8e00;text-decoration: underline;}

/* archive_link */
.archive_link{margin:30px auto 0;padding:5px 2px; text-align:center; width:98%; position:relative; text-align:center; overflow:hidden;line-height:2;}
.archive_link .archive_next{position: absolute; top:3px; left:20px;border: solid 1px #ccc; padding:2px 10px; border-radius:3px;}
.archive_link .archive_next a{padding-left:15px;}
.archive_link .archive_next a::before{
	position:absolute;
	top:3px;
	left:6px;
	color:#ff8e00;
	font-family:FontAwesome;
	content:'\f053';
}
.archive_link .archive_previous{position: absolute; top:3px; right:20px; border: solid 1px #ccc; padding:2px 10px; border-radius:3px;}
.archive_link .archive_previous a::before{
	position:absolute;
	top:3px;
	right:6px;
	color:#ff8e00;
	font-family:FontAwesome;
	content:'\f054';
}
.archive_link .archive_previous a{padding-right:15px;}
.archive_link .archive_center{padding:6px 10px;border: solid 1px #ccc; border-radius:3px; position:relative;}
.archive_link .archive_center a::before{
	position:absolute;
	top:1px;
	left:6px;
	color:#ff8e00;
	font-family:FontAwesome;
	content:'\f062';
}
.archive_link .archive_center a{padding-left:15px;}

/* archive */
.archive_area {margin:5px;overflow:hidden; width:;position:relative; text-align:left;}
.archive_area .form { position:absolute; top:0; right:10px;}
.archive_area .monthly {position: relative;display: block;width: 10em; border: 1px solid #ccc; border-radius: 3px;background: #fff;}
.archive_area .monthly:before {content: ""; position: absolute;top: 50%; right: 10px; display: block;width: 0; height: 0; margin: 0 0 0 0; border: 5px solid transparent; border-top: 7px solid #222;}
.archive_area select { cursor: pointer; position: relative;	-webkit-appearance: none;-moz-appearance: none;	appearance: none; display: block; width:10.5em; padding: 0.5em 1em; border: none;  border-radius: 5px; background: transparent; box-sizing:border-box;}
.archive_area ::-ms-expand {display: none;}

form1form select,.archive_area .form1 form select{padding:5px 10px;}
.archive_area .form1 form{margin-right:10px;}
.cat_list{margin: 0 10px 10px;text-align:left;}
.cat_list ul{}
.cat_list li{margin:0 5px;padding:5px 10px 5px 15px;display:block;color: #444;float:left;font-size:14px; width:10em;}
.archive_area input {display: none;}
.archive_area label {margin-left:5px !important;cursor: pointer; display: inline-block; padding: 5px 30px 5px 20px;border-radius:3px; background: #eee; border: solid 1px #ccc; -webkit-transition: 1s; transition: background-color 1s linear; font-size:14px; line-height:1.6;position:relative;}
.archive_area label:before{border: 5px solid transparent; border-top-color: #282F39;content: "";position: absolute;bottom: 8px;right: 8px;}
.archive_area label:hover {background: #ddd;transition: background-color 0.1s linear;}
.archive_area .panel { -webkit-transition: .3s ease; transition: .3s ease;  height: 0; overflow: hidden;background: #eee; margin:10px 5px 20px; padding: 0; border-radius: 5px;}
.archive_area input:checked + .panel { padding: 15px;height: auto;}