@charset "UTF-8";

/*---------------------------------
topics_style
---------------------------------*/
#asp_content #asp_topics_detail{ text-align: left;}
#asp_content #asp_topics_detail .asp_topics_title{ margin-bottom: 20px; word-break: break-all;}
#asp_content #asp_topics_detail .asp_topics_title .asp_topics_title_h{ font-size: 19px; line-height: 1.6; text-align: left; font-weight: 700; color: var(--main-color);}
#asp_content #asp_topics_detail .asp_topics_day{ text-align: right; font-size: 15px; line-height: 1.2; font-weight: 700; margin-bottom: 20px;}
#asp_content #asp_topics_detail .asp_topics_comment1,
#asp_content #asp_topics_detail .asp_topics_comment2{ font-size: 14px; line-height: 1.8; margin-bottom: 30px; word-break: break-all;}
#asp_content #asp_topics_detail .asp_topics_comment1 a,
#asp_content #asp_topics_detail .asp_topics_comment2 a{ color: var(--main-color)/*------------------- color -------------------*/; cursor: pointer; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content #asp_topics_detail .asp_topics_comment1 a:hover,
#asp_content #asp_topics_detail .asp_topics_comment2 a:hover{ opacity: 0.4;}
#asp_content #asp_topics_detail #asp_topics_photo{ margin-bottom: 30px;}
#asp_content #asp_topics_detail #asp_topics_photo ul{ display: flex; flex-wrap: wrap; justify-content:center;}
#asp_content #asp_topics_detail #asp_topics_photo ul li{ width: calc((100% - 30px)/2); margin-bottom: 30px;}
#asp_content #asp_topics_detail #asp_topics_photo ul li:nth-child(2n){ margin-left: 30px;}
#asp_content #asp_topics_detail #asp_topics_photo ul li span{ display: block; width: 100%; height: 0; background-color: #fff; padding-top: 75%; overflow: hidden; position: relative; border: 1px solid #ddd; box-sizing: border-box;}
#asp_content #asp_topics_detail #asp_topics_photo ul li span img{ width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content #asp_topics_detail #asp_topics_photo ul li span:hover img{ opacity: 0.7;}
#asp_content #asp_topics_detail #asp_topics_photo ul li p{ margin-top: 10px; font-size: 14px; line-height: 1.3em; word-break: break-all;}
#asp_content #asp_topics_detail .asp_topics_tag{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 50px 0 0; border-bottom: 1px solid #ddd; padding: 0 0 15px; box-sizing: border-box;}
#asp_content #asp_topics_detail .asp_topics_tag span{ font-size:12px; height: 22px; line-height: 22px; display: block; padding: 0 8px; box-sizing: border-box; margin-right: 3px; background-color:var(--main-color)/*------------------- color -------------------*/; color: #fff; text-decoration: none; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content #asp_topics_detail .asp_topics_tag a{ display: block;}
#asp_content #asp_topics_detail .asp_topics_tag a:hover span{ opacity: 0.6;}

/*---------------------------------
.asp_topics_inquiry_btn
---------------------------------*/
#asp_content .asp_topics_inquiry_btn{ text-align: center;}
#asp_content .asp_topics_inquiry_btn a{ display: inline-block; padding: 30px 60px 25px; font-size: 21px; line-height: 1.8; color: #fff; font-weight: 700; text-decoration: none; background-color: var(--main-color); border-radius: 10px; webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content .asp_topics_inquiry_btn a:hover{ opacity: 0.7;}
#asp_content #asp_topics_detail .asp_topics_font-size1,
#asp_content #asp_topics_detail .font-size1{ font-size:14px!important;}
#asp_content #asp_topics_detail .asp_topics_font-size2,
#asp_content #asp_topics_detail .font-size2{ font-size:18px!important;}
#asp_content #asp_topics_detail .asp_topics_font-size3,
#asp_content #asp_topics_detail .font-size3{ font-size:24px!important;}
#asp_content #asp_topics_detail .asp_topics_font-size1,
#asp_content #asp_topics_detail .font-size1,
#asp_content #asp_topics_detail .asp_topics_font-size2,
#asp_content #asp_topics_detail .font-size2,
#asp_content #asp_topics_detail .asp_topics_font-size3,
#asp_content #asp_topics_detail .font-size3{ line-height:1.4!important;}
#asp_content #asp_topics_detail .asp_topics_black,
#asp_content #asp_topics_detail .black{ color:#000!important;}
#asp_content #asp_topics_detail .asp_topics_red,
#asp_content #asp_topics_detail .red{ color:#F00!important;}
#asp_content #asp_topics_detail .asp_topics_blue,
#asp_content #asp_topics_detail .blue{ color:#00F!important;}
#asp_content #asp_topics_detail .asp_topics_green,
#asp_content #asp_topics_detail .green{ color:#060!important;}
#asp_content #asp_topics_detail .asp_topics_orange,
#asp_content #asp_topics_detail .orange{ color:#F90!important;}
#asp_content #asp_topics_detail .asp_topics_purple,
#asp_content #asp_topics_detail .purple{ color:#909!important;}
#asp_content #asp_topics_detail .asp_topics_bold,
#asp_content #asp_topics_detail .bold{ font-weight:700!important;}

/*---------------------------------
#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:last-child{ padding: 10px 0 0;}
#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_topics_go_list_top
---------------------------------*/
#asp_content .asp_topics_go_list_top{ text-align: center; margin: 35px 0 0;}
#asp_content .asp_topics_go_list_top a{ display: inline-block; font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 20px; border-radius: 5px; color: var(--main-color)/*------------------- color -------------------*/; border: 1px solid var(--main-color)/*------------------- color -------------------*/; cursor: pointer; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#asp_content .asp_topics_go_list_top a:hover{ opacity: 0.4;}

/*---------------------------------
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;}
}