@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: "微軟正黑體","Microsoft JhengHei"; } */
 
.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 }


.mainConWrap{ position: relative; width: 100%;}
.backWrap { position: relative; width:100vw; height: 100vh; }
.gradBar { 
	position: absolute; top:0; 
	width:100%; height: 200px; 
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(183,212,239,1) 100%);
}
.backImg {
	position: absolute; 
	top:0; bottom: 0; left: 0; right: 0; 
	background:  url(../img/back.jpg) no-repeat ;
	background-position:center; background-size: cover; 
}
.mainCon{ position: absolute; top:0; width:100%; }
.conBlock {
	position: relative;
	max-width: 1200px;
	/* height: 800px; */
	margin: 0 auto;
	padding: 50px 0 0 0;
}
.header { position: relative; width: 100%; height: auto; box-sizing: border-box; padding: 0 5%; }
.logoWrap { position: relative; width: 120px; }
.rthkLogo { display: block; width:100%; }
.content { position: relative; width:100%; box-sizing: border-box; padding: 0 5%; }
.titBar { position: relative; width:100%; margin:0 auto; padding: 25px 25px; margin: 150px 0 0 0; box-sizing: border-box; border-radius: 15px; background-color: rgb(230, 224, 215, 0.7); }
.titBar p { font-size: 22px; letter-spacing: 2px; line-height: 32px; color: rgb(50, 49, 48); }
.linkBar { position: relative; width:100%; margin: 50px 0; }
.proArr { position: relative; width:24px; float: left; margin: 18px 25px 0 0; }
.arr { display: block; width:100%; }
.linkBut { position: relative; float: left; padding: 22px 15px; color: rgb(245, 231, 220); font-size: 22px; letter-spacing: 2px; line-height: 30px;  border-radius: 15px; background-color: rgb(185, 57, 38); }
.linkBut.tran { background-color:rgba(255, 255, 255, 0); color: rgb(50, 49, 48); }


//#video-container { position: relative; width:100% !important; margin: 80px auto 0 !important; background-color: rgb(98, 98, 128);}
#video-container { position: relative; width:100% !important; margin: 80px auto 0 !important;}
.vidGist { font-family: Arial, Helvetica, sans-serif; width:100% !important; margin: 10px auto !important; font-size: 22px; letter-spacing: 2px; line-height: 30px; }

@media screen and (max-width: 1200px) {
	.header { padding: 0 0%;}
	.content { padding: 0 0%; }
	.logoWrap { width: 90px; margin-left: 10%; }
	.titBar { width:80%; margin: 50px auto 0; border-radius: 10px; }
	.titBar p { font-size: 18px; letter-spacing: 2px; line-height: 28px; }
	.linkBar { width:80%; margin: 50px auto 0; }
	.linkBut { padding: 18px 15px; font-size: 18px; letter-spacing: 2px;  border-radius: 15px; background-color: rgb(185, 57, 38); }
	.proArr { width:18px; margin: 22px 25px 0 0; }
	.linkBut.tran { margin-left: 25px;}
	#video-container { width:80% !important; margin: 50px auto 0 !important; }
	.vidGist { width:80% !important; margin: 10px auto !important; font-size: 18px; letter-spacing: 2px; line-height: 24px; }
}

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

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

@media screen and (max-width: 640px) {
	
}
@media screen and (max-width: 480px) {

}