/* =================================
	topics CSS
================================= */

/*	Layout
============================== */
@media all and (min-width: 768px) {
.left_area{
	width: 600px;
	float: left;
	margin-bottom: 6px;
}
.left_area_in{
	padding: 0px 35px 0px 0px;
}
.right_area{
	width: 220px;
	float: right;
}
}
@media all and (max-width: 767px) {
}

/*	title
============================== */

.title{
	position: relative;
	line-height: 1.5;
	border-bottom: 2px solid #ba9e62;
	font-weight: 800;
}
.tit_date{
	font-weight: normal;
	background-color: #fef54c;
	color: #645224;
}

@media all and (min-width: 768px) {
.title{
    margin: 0px auto 20px;
    font-size: 150%;
		padding: 10px 0px 20px;
}
.tit_date{
    padding: 8px 15px;
		font-size: 80%;
}
}
@media all and (max-width: 767px) {
.title{
    margin: 0px auto 10px;
		padding: 6px 0px 10px;
		font-size: 115%;
}
.tit_date{
    padding: 4px;
}
}


/*	repoBox_in
=================================== */
@media all and (min-width: 768px) {

.topics .repoBox_in{
	margin: 0 0 20px;
}
.topics .repoBox_in p {
	padding: 0px 0px 1.5em;
	text-align: left;
	line-height: 1.75;
}
.topics .repoBox1 p {
	text-align: left;
	font-size: 120%;
}
.topics .picBox {
	text-align: center;
	margin: 10px 0 30px 0;
}
.topics .picBox .topics_pic_w {
	width: 492px;
	height: 332px;
	background: #fff;
	border: 1px solid #d7bf8f;
	margin: 0 auto 5px;
	position: relative;
}
.topics .picBox .topics_pic_w .ph {
	width: 480px;
	height: 320px;
	position: absolute;
	left: 6px;
	top: 6px;
	background-color: #d7bf8f;
}
.topics .picBox .topics_pic_w img {
	width: 480px;
	height: 320px;
	display: block;
}
.topics .picBox .topics_pic_h {
	width: 332px;
	height: 492px;
	background: #fff;
	border: 1px solid #d7bf8f;
	margin: 0 auto 5px;
	position: relative;
}
.topics .picBox .topics_pic_h .ph {
	width: 320px;
	height: 480px;
	position: absolute;
	left: 6px;
	top: 6px;
	background-color: #d7bf8f;
}
.topics .picBox .topics_pic_h img {
	width: 320px;
	height: 480px;
	display: block;
}
.topics .picBox .p_caption {
	font-size: 80%;
	text-align: center;
}
.topics .picBox .p_caption span{
	background-color: #d7bf8f;
	padding: 0.25em 1em;
	line-height: 1.2 !important;
}
}

@media all and (max-width: 767px) {
.topics .repoBox_in p {
	padding: 0em 0px 1em;
	text-align: left;
    line-height: 1.75;
    font-size: 90%;
}
.picBox {
	margin: 0 auto;
	text-align: center;
	margin: 10px 0 20px 0;
}
.picBox .topics_pic_w{
    width: 270px;
    box-sizing: border-box;
    padding: 3px;
    /* box-shadow: 0 6px #faebdc; */
    margin: 0 auto;
}
.picBox .topics_pic_w span{
    width: 270px;
    height: 180px;
    background-size:270px 180px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #d7bf8f;
    border: 1px solid #d7bf8f;;
}
.picBox .topics_pic_w img{
    width: 270px;
    height: 180px;
	background-size:270px 180px;
}

.picBox .topics_pic_h{
    width: 180px;
    box-sizing: border-box;
    padding: 3px;
    /* box-shadow: 0 6px #faebdc; */
    margin: 0 auto;
}
.picBox .topics_pic_h span{
    width: 180px;
    height: 270px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #d7bf8f;
    border: 1px solid #d7bf8f;
}
.picBox .topics_pic_h img{
    width: 180px;
    height: 270px;
}

.topics .picBox .p_caption span{
	font-size: 80%;
	text-align: center;
	line-height: 1.2;
	background-color: #d7bf8f;
	padding: 0.25em 1em;
}
}


/*	backnumber
============================== */
.bknm{
	font-size: 85%;
}
.bknm h3{
	color: #645224;
	text-align: center;
	padding:5px 8px 5px;
	margin: 0 0 15px;
	background-image:url(../img/texture1.jpg);
	border-top: 2px solid #645224;
}
.bk_vol_area{
	display: block;
	margin-bottom: 0.3em;
}
.bk_vol{
	background-color: #fef54c;
	color: #645224;
	padding: 5px;
	margin: 0 10px 0 0;
	font-size: 90%;
	text-align: center;
}
.bknm ul li{
	margin: 0 0 10px;
}
.bknm ul li a{
	text-decoration: none;
	display: block;
	line-height: 1.7;
	color: #5b4a1f;
	background-color: rgba(213,192,142,0.3);
	padding: 10px;
	font-weight: 800;
}
.bknm ul li a:hover{
	text-decoration: none;
}
@media all and (min-width: 768px) {
.bknm h3{
	font-size: 125%;
}
}
@media all and (max-width: 767px) {
.bknm{
	margin:2em 0 0;
}
}