.video-wrap{width:100%; float:left; margin: 0;}
.videodt-content{width:90%; margin: 70px auto;}
.left-content{width:70.5%; float:left;margin:0 1.5% 0 0;}
.video-content{width:100%; float:left;margin:0 0 20px;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;border-radius: 10px;}
.video-container iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.dtright{width: 28%; float:left;margin: 0;}
.videoitem{ width: 100%; margin-bottom: 7px;position: relative;}
.videoitem{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.videoitem.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.videoitem:after{content: "";display: block;line-height: 0;clear: both;}
.videoitem img{max-width: 100%; height: auto; border-radius: 5px; margin: 0; display: block;}
.videoitem .pic{ width: 40%; float:left;margin: 0 3% 0 0}
.videoitem:hover::before {position: absolute;top:0px;right: 0;content: "\f142";font-family: "FontAwesome" !important}
.video-tx{ width: 56%; float:left;margin: 0 1% 0 0; font-weight: 500; color: #111}
.tx-title{ font-size: 15px; margin: 0 0 5px; line-height:1.6em; }
.st{font-size: 13px; color: #444;line-height:1.6em;}
.view{font-size: 13px; color: #444;line-height:1.6em;}
.info-tx{width: 100%; float: left; margin-bottom: 20px; box-sizing: border-box; display:block; font-family: 'Noto Sans TC', sans-serif; }
.info-tx{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.info-tx.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.info-title{ font-size: 20px; margin-bottom: 5px;font-weight:500;line-height:1.6em; }
.infost{ width: 50%; float: left; font-size: 13px; color: #666;line-height:1.6em;}
.video-social{float:right; width: 50%; margin:0; display:block; text-align:right;}
.video-social a {display: inline-block;width:auto; margin: 0 7px;font-size:16px; font-weight:400; transition: 300ms;-moz-transition: 300ms;-webkit-transition: 300ms;-o-transition: 300ms; text-align:center; color:#111;}
.video-social a:hover {color:#0a3963;}
.dt-columns{width: 100%; float: left; margin-bottom: 20px; padding:15px 20px; background-color: #f6f6f6; border-radius: 5px;}
.dt-columns{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.dt-columns.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.video-columns{width: 100%; float: left; margin-bottom: 20px;font-size: 15px; line-height: 1.6em;}
.video-view{width: 100%; float: left; margin-bottom: 8px; font-size: 14px; font-weight:700;}

@media only screen and (max-width: 1600px) {
.videodt-content{width:90%; margin: 60px auto 40px;}
.tx-title{ font-size: 14px; margin: 0 0 5px; line-height:1.5em; }
.left-content{width:68.5%;margin:0 1.5% 0 0;}
.dtright{width: 30%;}
}
@media only screen and (max-width: 1280px) {
.videodt-content{width:94%; margin: 50px auto 30px;}
.left-content{width:75%;margin:0 2% 0 0;}
.dtright{width: 23%;}
.videoitem{margin-bottom: 15px;}
.videoitem .pic{ width: 100%; float:left;margin: 0 0 10px}
.video-tx{ width: 100%; margin: 0;}
.st{font-size: 12px;}
.view{font-size: 12px;}
}
@media only screen and (max-width: 980px) {	
.videodt-content{margin: 40px auto;}
.left-content{width:100%;margin:0 0 10px;}
.dtright{width: 100%; font-size: 0;}
.videoitem{ width: 31.333333%; margin: 10px 1%;display: inline-block;vertical-align: top;}
}
@media only screen and (max-width: 550px) {
.videodt-content{width:90%; margin: 25px auto 20px;}
	.infost{ width:100%; margin-bottom: 10px;}
.video-social{float:left; width: 100%; text-align:left;}
.dt-columns{margin-bottom: 10px; padding:15px; font-size: 16px}
.videoitem{ width: 100%; margin: 10px 0;}

}