@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;}
.menSpc { width:150px; height: 50px; float: left; transition: .4s ease all;  }
.subBanWrap { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto;  float: left; }
.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; }
.skiLogoBadge { position: relative; width: 280px; height: 100%; margin: 0 auto; background-color: rgba(119, 148, 137, 0.8); }
.skiLogBlock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:200px; height: 200px;  }
.skiLogCir { position: relative; width:140px; height: 140px; border-radius: 50%; margin: 30px auto; background-color: rgba(255, 255, 255, 1); }
.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 }
/* -------------------item Bar----------------- */
.itemsWrap { position: relative; width:100%; height: auto; }
.itemsPos { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto;  background-color: rgb(93, 84, 82); }
.itemsBlock { width: 80%; height:auto; margin: 0 auto; font-size: 18px; letter-spacing: 2px; line-height: 32px; text-align: center; padding: 35px 0;}
.itemLink { display: inline-block;}
.itemsBlock a { text-decoration: none; color: rgb(230, 227, 223);}
.itemsBlock a:hover { text-decoration: none; color: rgb(255, 247, 236);}
.itemsBlock a:hover { text-decoration: none; }
.itemLink span { color: rgb(187, 191, 182); }
/* -------------------New Main Video Section------------ */
.vidKnwWrap { position: relative; width:100%;  background-color: rgb(250, 255, 244);}
.vidKnwPos { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto; }
.vidConBlock { 
	position: relative; width:80%; margin: 0 auto; padding: 70px 0;           
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}
.vidKnowBack{ position: absolute; top:0; bottom: 0; left: 0; right: 0; background-image: url(../img/master_Banner_02.jpg); background-size: cover; opacity: 0.2; }
.leftBlock { position: relative; width:50%; height: auto; }
.rightBlock { position: relative; width:50%; height: auto;  }
.vidThumbBlock {position: relative; width:100%; height: auto; cursor: pointer; }
.vidThumbBlock li {list-style: none;}
.vidFullSize { position: absolute; top:0; bottom: 0; left: 0; right:0; }
.vidPoster { display: block; width:100%;}
.leftTxtBlock { position: relative; float: left; width:78%; height: 100%; padding:0 25px 50px 4%;  }
.leftTxtBlock p{ font-size: 18px; letter-spacing: 2px; line-height: 28px; margin: 0 !important;}
.gistStampBlock { position: absolute; bottom: 0; left:22%; width:5%; }
.gistStamp { display: block; width:100%; }
.vidPlySq { position: absolute; top:8px; bottom: 8px; left: 8px; right: 8px; border: 1px solid rgba(232,224,207,1); } 
.vidPlyIcon { position: absolute; bottom: 8px; left: 8px; width:5%; z-index: 1; }
.vidPly { display: block; width: 100%; } 
.leftIconWrap {position: relative; float: left; width:18%; height:100%; border-right: 1px solid rgb(162, 153, 153); } 
.leftIcon { position: relative; width:70%; height:auto; margin: 0 auto; }
.leftIcon.headsvg { width:45%; }
.headingSVG {display: block; width:100% }
.leftIconBack { display: block; width:100%;}
.iconCap {
	font-family:'Times New Roman', Times, "PMingLiU", "NSimSun", serif;
	display: inline-block; 
	position: absolute; 
	top:0; 
	width: 80%; 
	padding: 0 0 0 10%;            
	font-size: 3.5vw; 
	line-height: 4.5vw; 
	color: rgb(87, 84, 81); 
}

.headingSVG {display: block; width:100% }

/* -------------------Main Video Section------------ */
.mainSkiWrap { position: relative; width:100%; height: auto; background-color: rgb(250, 255, 244); }
.mainSkiBack { position: absolute; top:0; bottom: 0; left:0; right: 0; background: url(../img/master_Banner_02.jpg); background-size: cover; opacity:0.2}

.mainSkiPos { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto; }
.sideImgWrap { position: absolute; right: 0; height: 700px; box-sizing: border-box; overflow: hidden; }
.skimg { display: block; height: 100%; }
.skimgShad { 
	position: absolute; top:0; bottom: 0; left: 0; right: 0;
	background: -moz-linear-gradient(left,  rgba(232,224,207,1) 0%, rgba(232,224,207,1) 37%, rgba(232,224,207,1) 38%, rgba(232,224,207,0) 100%); 
	background: -webkit-linear-gradient(left,  rgba(232,224,207,1) 0%,rgba(232,224,207,1) 37%,rgba(232,224,207,1) 38%,rgba(232,224,207,0) 100%);
	background: linear-gradient(to right,  rgba(232,224,207,1) 0%,rgba(232,224,207,1) 37%,rgba(232,224,207,1) 38%,rgba(232,224,207,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e0cf', endColorstr='#00e8e0cf',GradientType=1 );
}
.skiVidWrap { position: relative; width:85%; height: 100%; margin: 0 auto; padding: 5% 0;}
.skiLeftBlock { position: relative; float:left; width:50%; }
.skiRightBlock { position: relative; float:right; width:50%;  }
.mainDisBlock { position: relative; width:100%; padding-top: 56.25%;  }
.mainTitBlock { position: absolute; top:0; left:0; width:18%; height: 100%; border-right: 1px solid rgb(162, 153, 153);  }
.mainTitImgBlock { position: relative; width:40%; height:auto; margin: 8px auto 0 auto; }
.mainTit { display: block; width:100%; }
.titStamp { position: absolute; bottom:0; left:4%; width:5%; } 
.mainGistWrap { position: absolute; top:0; width:82%; height: 100%; margin-left: 18%; font-size: 21px; line-height: 30px; letter-spacing: 2px; padding: 0 100px 0 4%; }
.mainGistWrap p { margin:0 !important; }
.mainVidThumb { position: relative; width:100%; height: auto; padding-top: 56.25%; cursor: pointer; }
.mainVidThumb li { list-style: none;}
.lg-video-cont.lg-has-html5 { max-width: 80% !important;}
.mainVid { position: absolute; top:0; display: block; width:100%; }
.mainVidSq { position: absolute; top:8px; bottom: 8px; left: 8px; right: 8px; border: 1px solid rgba(232,224,207,1); }
.mainPlay { position: absolute; bottom: 8px; left: 8px; width:5%; }
.mainPly { display: block; width: 100%;}
/* -------------------skill block------------------- */
.skillBlockWrap { position: relative; width:100%; height: auto; }
.skillBlockPos { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto; background-color: antiquewhite;}
.skillBlock { 
	position: relative; float: left; 
	width:16.66%; height:550px; box-sizing: border-box; 
	border: 1px solid rgb(214, 214, 214);
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	overflow: hidden; 
	background-color: burlywood;
}
.skimg { 
	flex-shrink: 1;
	min-width: 100%;
	min-height: 100%;
	
	/* flex-shrink: 0;
	min-height: 100%;
	width:100%; */

	/* min-width: 100%;
	height:100%; */

	/* height: 100%;
	width: 100%;
	object-fit: cover; */
}
.skiShad { 
	position: absolute; top:0; bottom:0; left:0; right:0;
	/* background: -moz-linear-gradient(left,  rgba(232,224,207,1) 0%, rgba(232,224,207,0.76) 25%, rgba(232,224,207,0.75) 26%, rgba(232,224,207,0) 60%, rgba(0,0,0,0) 84%, rgba(30,25,21,0.6) 100%); 
	background: -webkit-linear-gradient(left,  rgba(232,224,207,1) 0%,rgba(232,224,207,0.76) 25%,rgba(232,224,207,0.75) 26%,rgba(232,224,207,0) 60%,rgba(0,0,0,0) 84%,rgba(30,25,21,0.6) 100%); 
	background: linear-gradient(to right,  rgba(232,224,207,1) 0%,rgba(232,224,207,0.76) 25%,rgba(232,224,207,0.75) 26%,rgba(232,224,207,0) 60%,rgba(0,0,0,0) 84%,rgba(30,25,21,0.6) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e0cf', endColorstr='#991e1915',GradientType=1 ); */
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e8e0cf+0,e8e0cf+21,e8e0cf+39,e8e0cf+63,000000+84,1e1915+100&0.95+0,0.9+21,0.71+39,0.1+63,0+84,0.6+100 */
background: -moz-linear-gradient(left,  rgba(232,224,207,0.95) 0%, rgba(232,224,207,0.9) 21%, rgba(232,224,207,0.71) 39%, rgba(232,224,207,0.1) 63%, rgba(0,0,0,0) 84%, rgba(30,25,21,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(232,224,207,0.95) 0%,rgba(232,224,207,0.9) 21%,rgba(232,224,207,0.71) 39%,rgba(232,224,207,0.1) 63%,rgba(0,0,0,0) 84%,rgba(30,25,21,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(232,224,207,0.95) 0%,rgba(232,224,207,0.9) 21%,rgba(232,224,207,0.71) 39%,rgba(232,224,207,0.1) 63%,rgba(0,0,0,0) 84%,rgba(30,25,21,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2e8e0cf', endColorstr='#991e1915',GradientType=1 ); /* IE6-9 */



}
.skiTitBlock { position: absolute; top:15px; left:15px; width:50%; height: 90%; font-size: 21px; line-height: 32px; letter-spacing: 2px; }
.skiTitWrap { position: relative; width:18%; height: auto; display: block; }
.skiTit { display: block; width:100%; height: auto; }
.loadBtnWrap { position: relative; width: 25px; height: 25px; margin-top: 15px; margin-left: 3px; }
.loadBtn { display: block; width:100%; }
.skiGist { position: absolute; bottom:0; left:0; font-size: 14px; line-height: 22px; letter-spacing: 2px; color: rgb(37, 41, 41); }

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

}
@media only screen and (max-width: 1600px),
            screen and (max-height: 1000px) {
	.menSpc { width: 100px; display: none; }
	.subBanWrap { width: calc(100% - 100px); margin-left: 100px; }
	.skiLogoBadge { width: 220px; height: 100%; }
	.skiLogBlock { width:150px; height: 150px; }
	.skiLogCir { 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 }
	/* -----------------item Bar---------------------- */
	.itemsPos { position: relative; width: calc(100% - 100px); margin-left: 100px; height: auto; }
    .itemsBlock { padding: 15px 0; font-size: 16px; letter-spacing: 2px; line-height: 32px; }
	/* -------------------New Main Video Section------------ */	
	.vidKnwPos { position: relative; width: calc(100% - 100px); margin-left: 100px; height: auto; }
	.leftTxtBlock p{ font-size: 18px; letter-spacing: 2px; line-height: 26px; }
	.vidPlyIcon { bottom: 8px; left: 8px; width:8%; }
	/* -------------------Main Video Section------------ */
	.mainSkiPos { width: calc(100% - 100px); margin-left: 100px; }
	.mainGistWrap { font-size: 18px; line-height: 28px; letter-spacing: 2px; padding: 0 100px 0 4%; }
	.mainTitImgBlock { width:45%; margin: 8px auto 0 auto; }
	.lg-video-cont.lg-has-html5 { max-width: 70% !important; }
	/* -----------------skill Block---------------------- */
	.skillBlockPos { width: calc(100% - 100px); margin-left: 100px; }
	.skillBlock { position: relative; float: left; width:20%; height:380px; }
	.skiTitWrap { width:21%;  }
	.loadBtnWrap { position: relative; width: 20px; height: 20px; margin-top: 8px; margin-left: 2px; }
	.skiGist { font-size: 13px; line-height: 20px; letter-spacing: 2px;}
}
@media screen and (max-width: 992px) {
	.menSpc { display: none; }
	.subBanWrap {  width: 100%; margin-top: 75px; margin-left:0px; }
	.subHead_Sm {display: none;}
	.subHead_Lg {display: block;}
	/* ---------------item Bar---------------------- */
	.itemsPos { width: 100%; margin-left: 0; }
    .itemsBlock { font-size: 15px; letter-spacing: 2px; line-height: 28px; }
	/* -------------------New Main Video Section------------ */
	.vidConBlock { padding: 40px 0;  }
	.iconCap {  padding: 0 0 0 15%;  }
	.vidKnwPos {  width: 100%; margin-left: 0px; height: auto; }
	.leftTxtBlock p{ font-size: 15px; letter-spacing: 2px; line-height: 22px; }
	.vidPlySq { top:4px; bottom: 4px; left: 4px; right: 4px; }
	/* -------------------Main Video Section------------ */
	.mainSkiPos { width: 100%; margin-left: 0; }
	.mainGistWrap { font-size: 15px; line-height: 22px; letter-spacing: 2px; padding: 0 70px 0 4%; }
	.mainVidSq { top:5px; bottom: 5px; left: 5px; right: 5px; border: 1px solid rgba(232,224,207,1); }
	.mainPlay { bottom: 8px; left: 8px; width:10%; }
	.lg-video-cont.lg-has-html5 { max-width: 85% !important; }	
	/* -----------------------skill Block---------------------------- */
	.skillBlockPos { width: 100%; margin: 0 auto; }
	.skillBlock { width:20%; height:270px; }
	.skiTitBlock { position: absolute; top:15px; left:15px; width:60%;} 
	.skiGist { position: absolute; bottom:0; left:0; font-size: 11px; line-height: 16px; letter-spacing: 1px; } 
	.loadBtnWrap { position: relative; width: 15px; height: 15px; margin-top: 10px; margin-left: 0px;}  
}
@media only screen and (max-width: 767px) {
	.menSpc { display: none; }
	.subBanWrap { width: 100%; margin-top: 75px; }
	.skiLogoBadge { width: 140px; height: 100%; }
	.skiLogBlock { width:130px; height: 130px; }
	.skiLogCir { 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 }	
	/* ------------------item Bar-------------------------- */
	.itemsBlock { font-size: 12px; letter-spacing: 2px; line-height: 22px; }
	/* -------------------New Main Video Section------------ */
	.vidConBlock { padding: 30px 0;  }
	.leftTxtBlock { width:78%; padding:0 3% 20px 4%; }
	.leftTxtBlock p{ font-size: 12px; letter-spacing: 2px; line-height: 18px; }
	.vidPlyIcon { bottom: 8px; left: 8px; width:8%; }
	.leftIcon { width:80%; margin: 0 auto; }
	.leftIcon.headsvg { width:60%; }
	/* -------------------Main Video Section------------ */
	.mainGistWrap { font-size: 12px; line-height: 18px; letter-spacing: 1px; padding: 0 20px 0 4%; }
	.lg-video-cont.lg-has-html5 { max-width: 100% !important; }
	/* -----------------------skill Block---------------------------- */
	.skillBlock { width:25%; height:250px; } 
	.skiGist { position: absolute; bottom:0; left:0; font-size: 9px; line-height: 14px; letter-spacing: 1px; }   
}

@media only screen and (max-width: 576px) {
	.subHead_Sm {display: none;}
	.subHead_Lg {display: none;}
	.subHead_ExS {display: block;}
	.skiLogoBadge { width: 130px; height: 100%; }
	.skiLogBlock { width:120px; height: 120px; }
	.skiLogCir { 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 }
	/* -------------------New Main Video Section------------ */
	.vidPlySq { top:3px; bottom: 3px; left: 3px; right: 3px; }
	.leftTxtBlock p{ font-size: 11px; letter-spacing: 1px; line-height: 18px; }
	.vidPlyIcon { bottom: 5px; left: 5px; width:12%; }
	.leftIcon.headsvg { width:85%; }
	/* -------------------Main Video Section------------ */
	.mainGistWrap { font-size: 10px; line-height: 16px; letter-spacing: 1px; padding: 0 20px 0 4%; }
	.mainTitImgBlock { width:50%; margin: 0 auto 0 auto; }
	.mainVidSq { top:3px; bottom: 3px; left: 3px; right: 3px; border: 1px solid rgba(232,224,207,1); }
	.mainPlay { bottom: 5px; left: 5px; width:13%; }
	/* -----------------------skill Block---------------------------- */
	.skillBlock { width:33.33%; height:220px; }
	.skiGist { display: none;} 
	
}
@media only screen and (max-width: 359px) {
	.skiLogoBadge { width: 100px; height: 100%; }
	.skiLogBlock { width:90px; height: 90px; }
	.skiLogCir { 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; }
	
}