@charset "UTF-8";

/* topics */

.topics #pageTitle {
	margin-bottom: 100px;
}

#topics_contents {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	background-color: #f6f6f6;
	font-size: 15px;
}
#topics_contents .topics_inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#topics_contents .topics_inner .topics_side_list {
	width: 250px;
	margin: -25px 70px 0 0;
}
#topics_contents .topics_inner .topics_side_list li {
	margin-bottom: 20px;
}
#topics_contents .topics_inner .topics_side_list li a {
	display: block;
	padding: 14px 15px;
	color: #FFF;
	background-color: #b9d3ec;
}
#topics_contents .topics_more_block {
	width: calc( 100% - 320px );
	margin-top: -25px;
}
#topics_contents .topics_more_block > a { display: block; }
#topics_contents .topics_more_block .topics_year_tt {
	padding: 13px 15px;
	font-size: 17px;
	color: #FFF;
	background-color: var(--c-b_blue);
}
#topics_contents .topics_more_block .topics_more_list {
	margin: 46px 0 100px;
}
#topics_contents .topics_more_block .topics_more_list .topics_box {
	margin-bottom: 35px;
}
#topics_contents .topics_more_block .topics_more_list .topics_box .topics_title {
	margin: 4px 0 0;
	font-size: 17px;
	color: var(--c-blue);
	line-height: 30px;
}
#topics_contents .topics_more_block .topics_more_list .topics_box .topics_txt {
	line-height: 30px;
}
#topics_contents .topics_more_block .topics_more_list .topics_box .detail {
	color: var(--c-b_blue);
	text-decoration: underline;
}







/* topics_article */


#topics_contents .topics_inner .topics_side_list li.list_btn a {
	position: relative;
}
#topics_contents .topics_inner .topics_side_list li.list_btn a::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 100px;
	display: block;
	width: 10px;
	height: 2px;
	background-color: #FFF;
	transform: rotate(25deg);
}
#topics_contents .topics_inner .topics_side_list li.list_btn a::after {
	content: "";
	position: absolute;
	bottom: 21px;
	left: 100px;
	display: block;
	width: 10px;
	height: 2px;
	background-color: #FFF;
	transform: rotate(-25deg);
}


#topics_contents .topics_article {
	width: calc( 100% - 320px );
}
#topics_contents .topics_article .article_block {
	padding: 72px 0 100px;
}
#topics_contents .topics_article .article_block .article_day {
	color: var(--c-b_blue);
}
#topics_contents .topics_article .article_block .article_title {
	margin-bottom: 16px;
	font-size: 24px;
	color: var(--c-b_blue);
	line-height: 36px;
}
#topics_contents .topics_article .article_block .article_txt {
	line-height: 30px;
}






/* article */
@media screen and (min-width:769px), print{
	#topics_contents .topics_inner .topics_side_list li a {
		transition-duration: .3s;
		transition-property: background-color;
	}
	#topics_contents .topics_inner .topics_side_list li a:hover {
		background-color: #003375;
	}
	#topics_contents .topics_box > a:hover .topics_title,
	#topics_contents .topics_box > a:hover .topics_txt {
		text-decoration: underline;
	}
}
@media screen and (max-width:768px){
	
	
	.topics #pageTitle {
		margin-bottom: 66px;
	}
	.topics.article #pageTitle {
		margin-bottom: 50px;
	}
	
	#topics_contents {
		width: auto;
		font-size: 14px;
	}
	#topics_contents .topics_inner {
		width: auto;
		padding: 0 25px 50px;
		flex-direction: column;
	}
	
	#topics_contents .topics_inner .topics_side_list li {
		margin-bottom: 20px;
	}
	#topics_contents .topics_inner .topics_side_list.order1 {
		order: 2;
	}
	#topics_contents .topics_inner .topics_more_block.order2 {
		order: 1;
	}

	#topics_contents .topics_inner .topics_side_list {
		width: auto;
		margin: 0;
	}
	#topics_contents .topics_inner .topics_side_list li a {
		padding: 8px 10px;
		font-size: 12px;
	}
	#topics_contents .topics_inner .topics_side_list li.list_btn a::before {
		top: 16px;
		left: 85px;
		width: 7px;
		height: 1px;
	}
	#topics_contents .topics_inner .topics_side_list li.list_btn a::after {
		bottom: 14px;
		left: 85px;
		width: 7px;
		height: 1px;
	}
	
	
	
	#topics_contents .topics_more_block {
		width: auto;
		margin-top: -16px;
	}
	
	#topics_contents .topics_more_block .topics_year_tt {
		padding: 7px 15px 8px 10px;
		font-size: 12px;
	}
	#topics_contents .topics_more_block .topics_more_list {
		margin: 37px 0 100px;
	}
	#topics_contents .topics_more_block .topics_more_list .topics_box {
		margin-bottom: 41px;
	}
	#topics_contents .topics_more_block .topics_more_list .topics_box .topics_day {
		font-size: 12px;
	}
	#topics_contents .topics_more_block .topics_more_list .topics_box .topics_title {
		margin: 6px 0;
		font-size: 14px;
		line-height: 24px;
	}
	#topics_contents .topics_more_block .topics_more_list .topics_box .topics_txt {
		font-size: 12px;
		line-height: 22px;
	}
	
	
	
	
	/* topics_article */


	#topics_contents .topics_article {
		width: auto;
	}
	#topics_contents .topics_article .article_block {
		padding: 48px 0 45px;
	}
	#topics_contents .topics_article .article_block .article_day {
		font-size: 12px;
	}
	#topics_contents .topics_article .article_block .article_title {
		margin: 8px 0 38px;
		font-size: 18px;
		line-height: 27px;
	}
	#topics_contents .topics_article .article_block .article_txt {
		line-height: 28px;
	}
	
	
}