@charset "UTF-8";

/*---------------------------------
topics_style
---------------------------------*/
#asp_content #asp_topics_list{ }
#asp_content #asp_topics_list ul li{ text-align:left; justify-content: space-between; border-bottom: 1px solid #ddd;}
#asp_content #asp_topics_list ul li > a,
#asp_content #asp_topics_list ul li > span,
#asp_content #asp_topics_list ul li > .asp_topics_nolink{ display: flex; padding: 30px 0; box-sizing: border-box; text-decoration: none; color: #000;}
#asp_content #asp_topics_list ul li > a{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content #asp_topics_list ul li > a:hover{ opacity: 0.4;}
#asp_content #asp_topics_list ul li:nth-child(1){ border-top: 1px solid #ddd;}
#asp_content #asp_topics_list ul li .asp_topics_pic{ width: 120px; height: 120px; margin-right: 20px;}
#asp_content #asp_topics_list ul li .asp_topics_pic img{ width: 120px; height: 120px; object-fit: cover;}
#asp_content #asp_topics_list ul li .asp_topics_text{}
#asp_content #asp_topics_list ul li .asp_topics_text .asp_topics_data{ display: flex; justify-content: left; align-items: center; margin-bottom: 15px; flex-wrap: wrap;}
#asp_content #asp_topics_list ul li .asp_topics_text .asp_topics_data p.asp_topics_day{ font-size:15px; line-height:1.2; font-weight:700; margin-right: 10px; color:var(--main-color)/*------------------- color -------------------*/;}
#asp_content #asp_topics_list ul li .asp_topics_text .asp_topics_data p.asp_topics_tag{ display: flex; align-items: center; flex-wrap: wrap;}
#asp_content #asp_topics_list ul li .asp_topics_text .asp_topics_data p.asp_topics_tag span{ font-size:12px; line-height: 22px; height: 22px; display: block; padding: 0 8px; box-sizing: border-box; margin-right: 3px; background-color:var(--main-color)/*------------------- color -------------------*/; color: #fff;}
#asp_content #asp_topics_list ul li .asp_topics_text p.asp_topics_title{ width: 100%; font-size:14px; line-height:1.8; word-break: break-all;}
#asp_content #asp_topics_list ul li a .asp_topics_text p.asp_topics_title{ text-decoration: underline;}
#asp_content .asp_topics_sub_title{ text-align: left;}
#asp_content .asp_topics_sub_title h2{ font-size:20px; line-height:1.2; font-weight:700; margin-bottom: 20px; color:var(--main-color)/*------------------- color -------------------*/;}
#asp_content .asp_topics_noposts{ text-align: center; width: 100%; min-height: 300px; position: relative;}
#asp_content .asp_topics_noposts p{ width: 100%; font-size: 23px; color: #777; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

/*---------------------------------
#asp_topics_category_list,#asp_topics_archive_list
---------------------------------*/
#asp_content #asp_topics_classification{ margin-top: 35px; padding: 30px 30px; box-sizing: border-box; position: relative; min-height: 100px;}
#asp_content #asp_topics_classification:before{ content: ''; z-index: 0; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: var(--main-color)/*------------------- color -------------------*/; opacity: 0.1;}
#asp_content #asp_topics_category_list,
#asp_content #asp_topics_archive_list{ margin-bottom: 30px; position: relative; z-index: 1;}
#asp_content .asp_topics_tc_inner:last-child{ margin-bottom: 0!important;}
#asp_content #asp_topics_category_list .asp_topics_list_title,
#asp_content #asp_topics_archive_list .asp_topics_list_title{ text-align: left; font-size:15px; line-height:1.2; font-weight:700; margin-bottom: 10px; color:var(--main-color)/*------------------- color -------------------*/;}
#asp_content #asp_topics_category_list ul{ display: flex; justify-content: left; flex-wrap: wrap;}
#asp_content #asp_topics_category_list ul li{ margin: 2px 0;}
#asp_content #asp_topics_category_list ul li a{ font-size:13px; line-height: 25px; height: 25px; display: block; padding: 0 8px; box-sizing: border-box; margin-right: 3px; background-color:var(--main-color)/*------------------- color -------------------*/; color: #fff; text-decoration: none; cursor: pointer; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content #asp_topics_category_list ul li a:hover{ opacity: 0.6;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list{ display: flex; text-align: left; align-items: center; padding: 10px 0; box-sizing: border-box;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list p.asp_topics_year{ font-size:14px; width: 90px; font-weight: 700;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list ul{ display: flex; flex-wrap: wrap; width: calc(100% - 90px);}
#asp_content #asp_topics_archive_list .asp_topics_archive_list ul li{ width: calc(16.6666% - 5px); text-align: center; margin-right: 5px; margin-bottom: 5px;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list ul li:nth-child(6n){ margin-right: 0;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list ul li a{ display: block; border: 1px solid #fff; box-sizing: border-box; padding: 8px 0; font-size:14px; text-decoration: none; color: #000; cursor: pointer; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list ul li a:hover{ background-color: #fff;}
#asp_content #asp_topics_classification .asp_topics_search_hidden{ display: none;}
#asp_content #asp_topics_archive_list .asp_topics_archive_list:last-child{ padding: 10px 0 0;}

/*---------------------------------
.asp_topics_pagination
---------------------------------*/
#asp_content .asp_topics_pagination{ margin: 35px 0 0;}
#asp_content .asp_topics_pagination ul{ font-size:15px;text-align: center;}
#asp_content .asp_topics_pagination li{ display:inline;margin:0 2px;padding:0;}
#asp_content .asp_topics_pagination li > span,
#asp_content .asp_topics_pagination li a{ text-decoration:none;margin:3px;padding:10px 8px;background:#fff;border:1px solid #aaa;display:inline-block;vertical-align:middle;}
#asp_content .asp_topics_pagination li > span{ color:#fff; background-color:#777;}
#asp_content .asp_topics_pagination li a{ color:#000;}
#asp_content .asp_topics_pagination li a:hover{ background:#eee; border-color: #777;}

/*---------------------------------
#asp_topics_loading
---------------------------------*/
#asp_content #asp_topics_classification #asp_topics_loading{ z-index: 1; width: 100px; height: 20px; margin: -10px auto 0;/*position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);*/}
#asp_content #asp_topics_classification .asp_topics_loader,
#asp_content #asp_topics_classification .asp_topics_loader:before,
#asp_content #asp_topics_classification .asp_topics_loader:after { border-radius: 50%; width: 2em; height: 2em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load7 1.8s infinite ease-in-out; animation: load7 1.8s infinite ease-in-out;}
#asp_content #asp_topics_classification .asp_topics_loader { color: #ffffff; font-size: 10px; margin: 0 auto; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
#asp_content #asp_topics_classification .asp_topics_loader:before,
#asp_content #asp_topics_classification .asp_topics_loader:after { content: ''; position: absolute; top: 0;}
#asp_content #asp_topics_classification .asp_topics_loader:before { left: -3em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
#asp_content #asp_topics_classification .asp_topics_loader:after { left: 3em;}
@-webkit-keyframes load7 {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em;}
  40% { box-shadow: 0 2.5em 0 0;}
}
@keyframes load7 {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em;}
  40% { box-shadow: 0 2.5em 0 0;}
}