@charset "utf-8";

.bbs_listing .table td { vertical-align: middle; }
.bbs_listing .table td.td_subject { text-align: left; }
.bbs_listing .table tbody td.td_period { width: 122px; padding-right: 1rem; }

.bbs_listing .table tbody td:last-child:before { /*content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 17px; background-color: #ddd;*/ }
.bbs_listing .table tbody td.td_period span { display: inline-block; min-width: 6.167rem; padding: 0.278rem 1rem; text-align: center; color: #fff; }
.bbs_view_period {display: flex;padding: 30px 25px 10px 25px;}
.bbs_view_period > dt {margin-right: 12px; background-color:#214397; color: #fff; padding: 2px 15px; } 
.bbs_view_period > dd { display: flex; align-items: center; }
.period-bg-color-1 { background-color:#1696F6; }
.period-bg-color-2 { background-color:#0070C4; }
.period-bg-color-3 { background-color:#DDDDDD; }
.bbs_listing .table tbody td.td_period span.period-bg-color-3 { color:#333; font-weight: 700; }

.bbs_viewing { border-top: none; }
.bbs_viewing > h5 { padding: 31px 40px; border-radius: 0 50px 0 0; font-size: 1.7rem; text-align: left; color: #fff; background: rgb(22,141,246);
background: -moz-linear-gradient(90deg, rgba(22,141,246,1) 0%, rgba(22,185,246,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(22,141,246,1) 0%, rgba(22,185,246,1) 100%);
background: linear-gradient(90deg, rgba(22,141,246,1) 0%, rgba(22,185,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#168df6",endColorstr="#16b9f6",GradientType=1); }

.table-style tbody th { background: #f9f9f9; vertical-align: middle; font-weight: 700; }

@media ( max-width: 768px ) {
    .bbs_viewing .table tbody tr { display: block; width: 100%; }
    .bbs_viewing .table tr th, .bbs_viewing .table tr td { display: block; width: 100%; padding-top: 15px; }
    .bbs_listing .table tbody td.td_period { padding-right: 0.5rem; }
    .bbs_listing .table tbody td.td_period span { min-width: 4rem; padding: 0.278rem; }
}

@media ( max-width: 565px ) {
  .bbs_viewing > h5 { font-size: 1.25rem; }
}