@charset "utf-8";

/* html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; font-family: Arial, Helvetica, Serif, "微軟正黑體","Microsoft JhengHei", 'Open Sans'; } */
/* html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; font-family:'Times New Roman', Times, "PMingLiU", "NSimSun", serif; } */
/* CSS Document */
/* html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; font-family: "微軟正黑體","Microsoft JhengHei"; } */
.font {
	font-family: 'Times New Roman', Times, serif;
}
 
.clearfix:before,
	.clearfix:after { content:""; display:table; }
	.clearfix:after { clear:both; }
	img{ vertical-align: middle; }

	a:link { text-decoration: none;}
	body { background-color: rgb(232, 224, 207)!important }

/* ------------------Banner----------------------- */
.subHeadBanWrap { position: relative; width:100%; height: auto;}
.subBanWrap { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto;  float: left; background-color: rgb(35, 35, 58); }
.subHead_Sm {display: block; width: 100%; height: auto; }
.subHead_Lg {display: none; width: 100%; height: auto; } 
.subHead_ExS {display: none; width: 100%; height: auto; } 
.posRef { position: absolute; top:0; bottom: 0; left: 0; right: 0; }
.proLogoBadge { position: relative; width: 280px; height: 100%; margin: 0 auto; background-color: rgb(29, 29, 43, 0.7); }
.proLogBlock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:200px; height: 200px;  }
.proLogDeco{ 
	position: absolute; 
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
	width:30px; height:100%;
	overflow: hidden;
}
.proDeco {
	position: absolute;
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
	display: block;
	height: 100%;
}
.proLogCir { position: relative; width:140px; height: 140px; border-radius: 50%; margin: 30px auto; background-color: rgba(255, 255, 255, 1); }
.proLogo { display: block; width:100%;}
.skiTxt { position: absolute; width:14%; }
.skiTxt.tr { top:5px; left:5px } .skiTxt.tl { top:5px; right:5px } .skiTxt.bl { bottom:5px; left:5px } .skiTxt.br { bottom:5px; right:5px }
/* ----------------Programme Block-------------------- */
.progWrap { position: relative; width:100%; height: auto; }
.proPos { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto;  background-color: rgb(35, 35, 58); }
.proBlockWrap {
position: relative; width:100%; height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center; 
}
.proBlockWrap.fir { padding-top: 50px;}
.proLeftBlock { position: relative; width:50%; height: auto; padding: 50px 0 50px 50px; background-color: rgb(35, 35, 58)}
.proRightBlock { position: relative; width:50%; height: auto; padding: 50px 0 50px 50px; }
.proVideoThumbWrap { position: relative; float: right; width:65%; height: auto;}
.proVidPoster { display: block; width:100%; }
.proVidShad { 
	position: absolute; top:0; bottom: 0; right: 0; left: 0;
	/* border-right: 1px solid rgb(207, 175, 123); */
	pointer-events: none;
	background: -moz-linear-gradient(left,  rgba(35,35,58,0) 0%, rgba(35,35,58,0) 57%, rgba(35,35,58,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(35,35,58,0) 0%,rgba(35,35,58,0) 57%,rgba(35,35,58,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(35,35,58,0) 0%,rgba(35,35,58,0) 57%,rgba(35,35,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0023233a', endColorstr='#23233a',GradientType=1 ); /* IE6-9 */
}
.mediaTitWrap { position: relative; width:35%; height:100%; float:left; }
.mediaTitBlock { position: relative; width:60%; margin: 0 auto;  }
.mediaTit { 
	position: relative; 
	font-size: 2vw; line-height: 2.5vw; 
	width:46%; height: auto; 
	margin: 0 auto; text-align: center;
	overflow: auto;
	border-left: 1px solid rgb(207, 175, 123);
	border-right: 1px solid rgb(207, 175, 123);
}
.mediaImgBlock { position: relative; width:70%; margin: 20px auto 60px auto;  }
.mediaImg { display: block; width:100%; }
.mediaDot { position: absolute; bottom: -25px; right: 0; width:12px; height: 12px; border: 2px solid rgb(207, 175, 123); border-radius: 50%; }
.mediaDecoBlock { position: relative; width:100%; margin: 15px auto 0 auto;}
.mediaDeco { display: block; width: 100%; }
.proGistBlock { 
	position: relative; 
	width:65%; height: 100%; 
	font-size: 18px; line-height: 26px; letter-spacing: 2px;
	color: rgb(207, 175, 123);
	border-top: 1px solid rgb(117, 110, 98);
	border-bottom: 1px solid rgb(117, 110, 98);
	padding: 15px 0; 
}
.progTitle {position: relative; width:80%; height: auto; font-size: 21px; line-height: 32px; letter-spacing: 4px; color:rgb(207, 175, 123); margin-bottom: 15px;}
.progYr { font-size: 14px; line-height: 21px; letter-spacing: 4px; color: rgb(146, 133, 112);}
.progGistxt { position: relative; width: 80%; height: auto; font-size: 15px; line-height: 26px; letter-spacing: 2px; color: rgb(223, 207, 181); }
.progLink { position: absolute; right: 0; top:15px; width:25px;}
.progLinkIcon { display: block; width:100%; }
.proRightBlock a:hover {text-decoration: none;}
.proLeftBlock a:hover {text-decoration: none; }
.proVertVidThumb { display:none; position: relative; width:85%; height: auto;}

@media screen and (max-width: 1200px) {

}
@media only screen and (max-width: 1600px),
            screen and (max-height: 1000px) {
	.subBanWrap { width: calc(100% - 100px); margin-left: 100px; }
	.proLogoBadge { width: 220px; height: 100%; }
	.proLogBlock { width:150px; height: 150px; }
	.proLogCir { width:100px; height: 100px; border-radius: 50%; margin: 25px auto; }
	.skiTxt.tr { top:12px; left:12px } .skiTxt.tl { top:12px; right:12px } .skiTxt.bl { bottom:12px; left:12px } .skiTxt.br { bottom:12px; right:12px }
	/* -----------Programme Block------------------ */
	.proPos { width: calc(100% - 100px); margin-left: 100px; }
}
@media screen and (max-width: 992px) {
	.subBanWrap {  width: 100%; margin-top: 75px; margin-left:0px; }
	.subHead_Sm {display: none; }
	.subHead_Lg {display: block; }
	/* -----------Programme Block------------------ */
	.proPos { width: 100%; margin-left: 0; }
	.proLeftBlock { width: 20%; height: auto; padding: 20px 0 20px 0px; }
	.proRightBlock { width: 60%; height: auto; padding: 20px 0 20px 0px; }
	.proGistBlock { width: 85%; height: auto; }
	.proVideoThumbWrap { display: none; }
	.mediaTitWrap { width: 100%; }
	.proVertVidThumb { display:block; }
}
@media only screen and (max-width: 767px) {
	.subBanWrap { width: 100%; margin-top: 75px; }
	.proLogoBadge { width: 140px; height: 100%; }
	.proLogBlock { width:130px; height: 130px; }
	.proLogCir { width:60px; height: 60px; border-radius: 50%; margin: 30px auto; }
	.skiTxt { position: absolute; width:14%; }
	.skiTxt.tr { top:15px; left:15px } .skiTxt.tl { top:15px; right:15px } .skiTxt.bl { bottom:15px; left:15px } .skiTxt.br { bottom:15px; right:15px }	
	.proDeco { height: 140%; }
	/* -----------Programme Block------------------ */
	.progTitle { font-size: 18px; line-height: 24px; letter-spacing: 4px; margin-bottom: 15px; }
	.progGistxt { width: 80%; height: auto; font-size: 12px; line-height: 24px; letter-spacing: 2px; color: rgb(223, 207, 181); }
}

@media only screen and (max-width: 576px) {
	.subHead_Sm {display: none;}
	.subHead_Lg {display: none;}
	.subHead_ExS {display: block;}
	.proLogoBadge { width: 130px; height: 100%; }
	.proLogBlock { width:120px; height: 120px; }
	.proLogCir { width:60px; height: 60px; border-radius: 50%; margin: 30px auto; }
	.skiTxt { position: absolute; width:14%; }
	.skiTxt.tr { top:15px; left:15px } .skiTxt.tl { top:15px; right:15px } .skiTxt.bl { bottom:15px; left:15px } .skiTxt.br { bottom:15px; right:15px }
	/* -----------Programme Block------------------ */
	.proLeftBlock { width: 20%; height: auto; padding: 20px 0 20px 0px; }
	.proRightBlock { width: 60%; height: auto; padding: 20px 0 20px 0px; }
	.proGistBlock { width: 85%; height: auto; padding: 15px 0 5px 0;}
	.progGistxt { width: 100%; }
	.mediaTitBlock {width: 90%;}
	.progYr { font-size: 12px; line-height: 18px; letter-spacing: 2px; }
	.mediaDot { bottom: -20px; right: 5px; width:8px; height: 8px; border: 1px solid rgb(207, 175, 123); }
	.mediaDecoBlock { width: 90%; margin: 0px auto 0 auto; }
	.progLink { width: 20px; }
}
@media only screen and (max-width: 359px) {
	.proLogoBadge { width: 100px; height: 100%; }
	.proLogBlock { width:90px; height: 90px; }
	.proLogCir { width:50px; height: 50px; margin: 20px auto; }
	.skiTxt.tr { top:12px; left:12px } .skiTxt.tl { top:12px; right:12px } .skiTxt.bl { bottom:12px; left:12px } .skiTxt.br { bottom:12px; right:12px }
	/* -----------------------skill Block---------------------------- */
	.skillBlock { width:50%; height:210px; }
	
}