.baseline{background: -webkit-linear-gradient(right, #e2e1e1 1px, transparent 1px);background-size:16.666666%;padding:180px 0 0;}
.blog-wrap{width: 100%;margin:0;}
.blog-container{width:1460px;  margin:0 auto}
.blog-detail .blog-pic{width:100%; margin-bottom:30px;position:relative;overflow:hidden;}
.blog-detail .blog-pic>a{display:block}
.blog-detail .blog-pic img{max-width:100%;height:auto; margin:0 auto;display:block; text-align:center}
.blog-detail .blog-pic .caption{bottom:15px;left:15px;margin:15px;padding:10px 15px;background-color:rgba(0,0,0,.3);zoom:1;filter:alpha(opacity=0);-webkit-opacity:0;-moz-opacity:0;opacity:0;z-index:0;position:absolute;text-align:left;-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);-o-transform:translateY(10px);transform:translateY(10px);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;font-size:16px;color:#000;margin:0}
.blog-detail .blog-pic .caption a{color:#fff}
.blog-detail .blog-pic .caption a:after{background-color:#fff}

.blog-list{width:100%; margin:0;}
.detail-right{width:24%; float:left;margin:0 0 30px 7%; }
.detail-left{width:69%; float:left;margin:30px 0;}
.top-title{width:100%;float: left;margin:30px 0 10px;font-size:17px; padding:6px 0; line-height: 1.5em; border-bottom: 1px solid #111; border-top:1px solid #111;}
.top-title span{font-size:14px; color: #777;margin-left: 5px;}
.video-content{width:100%; margin:0 0 30px 0;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.video-container img{max-width:100%;height: auto} 
.blogdt-title{width:100%; float:left;margin:0 0 30px 0}
.blogdt-title h1{margin:0; font-size:26px;line-height: 1.5em; font-weight:500;}
.blogdt-title h2{margin:0 0 10px; font-size:14px; font-weight:500;}
.daterow{width: 100%;float: left;margin-bottom: 15px;color: #666666;font-weight: 700}
.blogdt-date {width: 100%; float: left;  font-size:15px;margin-top: 8px;}
 .blogdt-date  span{margin-left:20px;}
.social{float:left;width:100%; margin-bottom: 20px; text-align:right;}
.social span{font-size:12px; font-weight:700; margin:0 8px 0 0;}
.social a {display: inline-block;margin: 0 5px 0 0;width:26px; height: 26px; line-height:25px; background-color:#555555; border-radius: 99em; font-size:14px; font-weight:400; transition: 300ms;-moz-transition: 300ms;-webkit-transition: 300ms;-o-transition: 300ms; text-align:center; color:#ffffff}
.social a:hover {color:#ffffff;background-color: #d80c18;}	
.blogdt{width:100%;float: left;background-color:#fff}
.blogdt-row{width:1280px;margin: 0 auto;}
.content-title{width:100%; float:left;margin:0 0 30px;font-size:22px; font-weight:600;text-align:justify;line-height:2em;}
.content-tx{width:100%; float:left;margin:0 0 30px;text-align:justify;line-height:2em;}
.toppic{width:100%;float: left;margin:0; text-align:center}
.toppic img{max-width:100%; height: auto;}
.articleitem{ width: 100%;float: left;margin: 10px 0; padding-bottom:20px; border-bottom: 1px solid #ccc;}
.articleitem:after{content: "";display: block;line-height: 0;clear: both;}
.articleitem .pic{width:36%; float:left;margin: 0 8% 0 0}
.articleitem .pic img{max-width: 100%; height: auto; border-radius: 5px; margin: 0; display: block;}
.article-tx{ width: 56%; float:left;margin: 0;}
.tx-title{ font-size: 14px; margin: 0 0 12px; line-height:1.5em;color: #000;}
.st{font-size: 11px; color: #7a6c6c;line-height:1.2em; margin-bottom: 5px;}
.itemdate{width:10%; float: left; writing-mode: vertical-rl;text-orientation: sideways;transform: rotate(-180deg);font-size: 14px; margin-top: 35%;}
.view{font-size: 12px; color: #444;line-height:1.6em;}
.right-list{width:100%; float:left;margin: 25px 0 0 0}
.blog-btn{width:auto; float: left; text-align:center;font-size: 13px;letter-spacing:0.03em;margin-right: 12px;margin-bottom: 12px}
  .blog-btn a {display:block; padding:2px 13px;background-color: #e6e6e6; border-radius:5px;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; }
  .blog-btn a:hover {color: #fff; background-color:#d80c18;}
@media screen and (max-width: 1600px) {
.baseline{padding: 150px 0 0 0;}
.blog-container{width:85%;}
.blogdt-row{width:85%;}
}
@media screen and (max-width: 1280px) {
.baseline{padding: 100px 0 0 0;}
.blog-container{width:88%;}
.blogdt-row{width:88%;}
.social{margin-bottom: 20px;}
.blogdt-title{margin:0 0 30px 0}
}
@media screen and (max-width: 980px) {
.baseline{padding: 95px 0 0 0;}
.blog-container{width:90%;}
.blogdt-row{width:90%;}
.blogdt-title{margin:0 0 20px}
.blogdt-title h1{font-size:26px;}
.detail-right{width:26%; margin:0 0 30px 6%; }
.detail-left{width:68%; margin:30px 0;}
.articleitem .pic{width:100%;margin: 0 0 10px 0}
.article-tx{ width: 100%; }
}
@media screen and (max-width: 767px) {
.baseline{padding: 85px 0 0 0; background: -webkit-linear-gradient(right, #e2e1e1 1px, transparent 1px);background-size:25%;}
.blogdt-date{width:100%;margin: 0 0 15px;}
.blogdt-date  span{margin-left:20px;}
.blogdt-title{margin:0 0 10px;}
.blogdt-title h1{font-size:22px;}
.social{margin-bottom: 5px}
.content-title{width:100%;margin:0 0 20px;font-size:18px;}
.content-tx{margin:0 0 20px;line-height:1.8em;}
.detail-right{display: none}
.detail-left{width:100%;margin:10px 0;}
.video-content{margin:0;}
}

/*column*/
.column{width:100%;background-color:#fff }
.column-content{width:1460px; margin: 0 auto;padding-bottom: 100px;}
.columntitle{float:left; width:100%;font-size:26px; margin:30px 0 50px 0;text-align:center; letter-spacing:0.05em}
.img-fluid{max-width:100%;height:auto}
.blogdt-itembox{width:100%; float:left; margin:0;}
.blogdt-itembox .blog-item{width: calc((100% - 104px)/4);float: left;margin: 0 13px;color: #111;font-weight:500;position: relative;}
.blogdt-itembox .blog-item:nth-child(4) {margin: 0 13px;}
.blogdt-itembox .blog-item img {width: 100%;height: 100%;}
.blog-box { width: 100%; float: left;margin: 0}
.blog-box:hover {color:#cc8e6f!important;text-decoration: none;}
.blog-box .blog-box-img {position: relative;overflow: hidden;}
.itemdate{width:10%; float: left; writing-mode: vertical-rl;text-orientation: sideways;transform: rotate(-180deg);font-size: 14px; margin-top: 35%;}
.initem a {color: #171717; text-decoration:none;font-family: 'Noto Sans TC', sans-serif;font-weight:500;}
.initem a:hover {color: #996515;text-decoration: none} 
.blog-infotitle{width: 100%; float: left;font-size: 15px;margin-bottom: 5px} 
.blog-info{max-width:auto; float:left;margin-bottom: 10px; font-size:17px; color: #222;letter-spacing: 0.02em; line-height: 1.6em;font-weight: 700;position: relative;text-align: justify;} 
.blog-box .blog-info::after {content: '';position: absolute;bottom:-4px;left: 0;width: 0%;border-bottom:1px solid #555;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.blog-box:hover .blog-info:after{width: 100%;}
.blogbox{width: 100%; float: left;padding: 8px 0;}
.blog-by{width:100%; float:left;line-height: 1.5em}
.blog-link{width:100%; float:left;margin:0;font-weight: 600;}
.blog-by, .blog-link{font-size:13px;line-height: 1.8em}

@media screen and (max-width: 1600px) {	
.column-content{width:85%;  padding-bottom: 80px;}
.columntitle{margin:10px 0 40px 0;}
}
@media screen and (max-width: 1280px) {
.column-content{width: 88%; padding-bottom: 60px;}
.columntitle{font-size: 24px; }
}
@media screen and (max-width: 980px) {
.column-content{width: 90%; padding-bottom: 60px;}
.columntitle{margin:0 0 40px 0;}
.blogdt-itembox .blog-item{width: calc((100% - 50px)/3);margin: 0 25px 0 0;}
.blogdt-itembox .blog-item:nth-child(3) {margin: 0;}	
.blogdt-itembox .blog-item:nth-child(4) {display: none}
.blog-by, .blog-link{font-size:15px;}
}
@media screen and (max-width: 767px) {
.column-content{padding-bottom: 30px;}
.columntitle{font-size:22px; margin:0 0 20px; padding:20px 0 0 0;}
.blogdt-itembox .blog-item{width: 100%;margin: 0 0 20px}
.blogdt-itembox .blog-item:nth-child(2) {margin: 0 0 20px}	
}

@media (min-width: 992px) {
  .detail-right {
    position: sticky !important;
    top: 0px;
    align-self: flex-start;
    height: fit-content;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .detail-right .theiaStickySidebar {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 991px) {
  .detail-right {
    position: static !important;
    top: auto !important;
    min-height: 0 !important;
  }
}