.blog-wrap{width: 100%;margin:0;float: left;}
.blog-container{width:1460px;  margin:50px auto 20px}
.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 #ccc; 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:30px;line-height: 1.5em; font-weight:500;letter-spacing: 0.1em}
.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 10px;font-size:26px;font-weight:600;text-align:justify;line-height:2em;}
.content-tx{width:100%; float:left;margin:0 0 30px;font-size:16px;color:#222;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;}
.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) {
.blog-container{width:85%;}
.blogdt-row{width:85%;}
}
@media screen and (max-width: 1280px) {
.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) {
.blog-container{width:90%;}
.blogdt-row{width:90%;}
.blogdt-title{margin:0 0 20px}
.blogdt-title h1{font-size:24px;}
.detail-right{display: none}
.detail-left{width:100%; margin:30px 0;}
.articleitem .pic{width:100%;margin: 0 0 10px 0}
.article-tx{ width: 100%; }
.content-title{font-size:24px;}
}
@media screen and (max-width: 767px) {
.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 10px;font-size:22px;line-height: 1.6em}
.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;}
}

.author{width:100%; float: left;margin: 40px 0; padding: 30px; background-color: #eee;text-align: left}
.author-info{width:85%;float:left;}
.author-content{padding: 0}
.author-content h2{font-size: 18px;margin: 0 0 15px 0;font-weight: 500;}
.author-content p{font-size: 16px; line-height:1.8em;color: #333}
.cor-box{width:15%;float: left;}
.flow-cor{float: left; display:block;width:110px;height:110px;background-color: #f5f3f1; border-radius: 50%;border:3px solid #d45f3e;text-align: center;overflow: hidden;line-height: 100px;font-size: 50px; font-weight: 500;color: #666;}
.flow-cor img{max-width: 100%;height: auto;}
.tag-list{width:100%; float:left;margin-bottom: 40px;}
.tag-list span{font-size: 14px;font-weight: 700;float: left;margin-right: 10px}
.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:#d45f3e;}
@media screen and (max-width: 1600px) {	
.author{margin: 30px 0 40px;}
}
@media screen and (max-width: 1280px) {	
.author{margin: 20px 0 40px;}
.author-info{width:81%;}	
.cor-box{width:19%;}
}	
@media screen and (max-width: 980px) {	
.author{margin: 20px 0 40px;}
.author-info{width:80%;}	
.cor-box{width:20%;}
.flow-cor{width:100px;height:100px;}
.tag-list{margin-bottom: 10px;}
}		
@media screen and (max-width: 767px) {	
.author{margin: 0 0 25px;padding: 20px 15px}
.author-info{width:100%;}	
.cor-box{width:100%;text-align: center;margin-bottom: 10px}
.flow-cor{margin: 0 auto;float:none}
.flow-cor img{width: 100px;height: 100px;margin: 0 auto;display: block}
}

/*related*/
.related{width:100%; float:left;background-color: #f2f2f2;margin-top: 30px}
.related-content{width:1320px; margin: 60px auto 50px; text-align: center}
.relatedtitle{float:none; width:100%;font-size:26px; margin:0 0 50px 0; text-align:center; letter-spacing:0.05em}
.img-fluid{max-width:100%;height:auto}
.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} 

.blogdt-like{width:100%; float:left;}
  .blogdt-like ul{list-style-type:none; padding: 0;margin: 0;font-size: 0}
  .blogdt-like li{width:33.333333%;padding: 0 16px; margin:16px 0; display: inline-block;vertical-align:top; overflow:hidden;}
.blogitem{width:100%; float:left;color: #333;}
.blogitem img{max-width:100%;height: auto; display:block;object-fit: cover} 
 .blogitem:hover {color: #b05f10;text-decoration: none;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; }
.blogpic{width:100%;float:left; overflow: hidden;}
.blogpic img{-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;transition: all 0.8s ease;display: block;margin: 0 auto}
.blog-name{width:100%; max-height: 3em; float:left;margin-bottom: 15px; font-size:20px; color: #111;letter-spacing: 0.02em; line-height: 1.5em;position: relative;text-align: justify;font-weight: 500;overflow: hidden;} 
.blogbox{width: 100%;height: 270px; float: left;padding:25px;background-color: #fff;position: relative}
.blog-genre{width:100%; float:left;margin:0 0 15px 0;font-size: 16px; color: #555;}
.blog-txt{width:100%;max-height: 6.5em;overflow: hidden; float:left;line-height: 1.7em;font-size: 15px;text-align: justify}
.blog-date{width:90%; position: absolute;left: 25px;bottom: 20px; font-weight: 400;font-size: 14px;text-align: left}
.blog-right{width:30%; float:left;box-shadow:-0.5px -0.5px 10px #ccc;padding: 50px 35px;margin: 20px 0;}
.blogdt-like li:hover .blogpic img{transform: scale(1.1);}

@media screen and (max-width: 1600px) {	
.related{margin-top: 30px}
.related-content{width:88%; margin: 60px auto 50px;}
.relatedtitle{margin:0 0 40px 0;}
}
@media screen and (max-width: 1280px) {
.related-content{width: 93%; margin: 50px auto 40px;}
.relatedtitle{font-size: 24px; margin-bottom:30px}
.blogbox{height: 305px; }
.blog-name{max-height:4.7em;font-size:20px; } 
}
@media screen and (max-width: 980px) {
.related{margin-top: 0}
.related-content{width: 93%; margin: 50px auto 40px;}
.relatedtitle{margin:0 0 20px; }
.blogdt-like li{width:50%;}
.blogdt-like li:last-child{display: none}
}
@media screen and (max-width: 767px) {
.related-content{margin: 30px auto 30px;}
.relatedtitle{font-size:22px; margin:0 0 10px;}
.blogdt-like li{width: 100%; margin:12px 0;padding: 0}
.blog-name{max-height: 100%; } 
.blogbox{height: auto; padding:25px 25px 70px;}
.blog-txt{max-height: 100%;}	
.blog-date{position: absolute;left: 25px;bottom: 15px;}
}

@media (min-width: 992px) {
  .detail-right {
    position: sticky !important;
    top: 45px;
    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;
  }
}