@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%; background-color: rgb(46, 65, 96); }
.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; }
.subLogoWrap { position: relative; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.subLogRef { position: absolute; width: 20%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.subLogo { position: absolute; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.logCirWrap { position: absolute; width:35%; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.logCir { position: absolute; top:0; bottom: 0; left: 0; right: 0; border-radius: 50%; background-image: url(../img/artAppLogo_GB.jpg); }
.subTitype { position: absolute; top:-13%; }
.logCirType { position:relative;  width: 100%; }
/* -------------------New 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 0 15px 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% }
.lg-video-cont.lg-has-html5 { max-width: 80% !important;}

/* -------------------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%;} */
/* ---------------Knowledge Block------------------------ */
.knwWrap { position: relative; width:100%;  background-color: rgb(232, 226, 210); }
.knwWrap.grn { background-color: rgb(224, 229, 208); }
.knwPos { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto; }
.tipsLeftBlkWrap { 
	position: relative; width:50%; height:auto; 
	background-color: rgb(232, 226, 210); 
}
.tipsRightBlkWrap { 
	position: relative; 
	width:50%; height:auto;  
	background-color: rgb(218, 219, 207); 
}
.tipsBlock {
	position: relative; width:100%; margin: 0 auto;            
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* flex-wrap: nowrap;
	justify-content: center; */
}
.tipsLeftBlock { 
	position: relative; 
	width:100%; height: 100%;          
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: center;
	background-color: rgb(232, 226, 210); 
}
.tipsRightBlock { 
	position: relative; 
	width:100%; height: 100%;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: center;
	background-color: rgb(218, 219, 207);
}
.rigShad{ 
	position: relative; float:right; width:40%; height: 100%; 
	pointer-events: none;
	background: -moz-linear-gradient(left,  rgba(10,3,2,0.65) 0%, rgba(13,9,9,0.27) 23%, rgba(15,15,15,0) 43%, rgba(15,15,15,0) 44%, rgba(15,15,15,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(10,3,2,0.65) 0%,rgba(13,9,9,0.27) 23%,rgba(15,15,15,0) 43%,rgba(15,15,15,0) 44%,rgba(15,15,15,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(10,3,2,0.65) 0%,rgba(13,9,9,0.27) 23%,rgba(15,15,15,0) 43%,rgba(15,15,15,0) 44%,rgba(15,15,15,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a60a0302', endColorstr='#000f0f0f',GradientType=1 ); /* IE6-9 */
}
.shadBlock { position: absolute; top:0; bottom: 0; left: 0; right:0; pointer-events: none;  }
.tipsVidBlock { position: relative; float:left; width:40%; margin-bottom: 50px; height: auto; }
.tipsVidFullPos { position: absolute; top:0; bottom: 0; left: 0; right:0; }
.tipsVPostWrap {  position: relative; cursor: pointer; }
.tipsVidPoster { display: block; width:100%; }
.tipsVidPlySq { position: absolute; top:8px; bottom: 8px; left: 8px; right: 8px; border: 1px solid rgba(232,224,207,1); }
.tipsConBlock { position: relative; float: left; width:60%; height: auto; padding: 25px 25px; border-bottom: 1px solid cornsilk;} 
.tipsConBlock.grad {
	background: rgb(232,226,210);
	background: -moz-linear-gradient(left,  rgba(232,226,210,1) 0%, rgba(211,205,192,1) 100%); 
	background: -webkit-linear-gradient(left,  rgba(232,226,210,1) 0%,rgba(211,205,192,1) 100%); 
	background: linear-gradient(to right,  rgba(232,226,210,1) 0%,rgba(211,205,192,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e2d2', endColorstr='#d3cdc0',GradientType=1 );
}
.tipsConBlock.grad2 {
	background: rgb(218,219,207); 
	background: -moz-linear-gradient(left,  rgba(218,219,207,1) 0%, rgba(203,204,195,1) 100%); 
	background: -webkit-linear-gradient(left,  rgba(218,219,207,1) 0%,rgba(203,204,195,1) 100%); 
	background: linear-gradient(to right,  rgba(218,219,207,1) 0%,rgba(203,204,195,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadbcf', endColorstr='#cbccc3',GradientType=1 ); 
}
.tipsTitBlock { position: relative; float: left; width:20%; height: 100%;  border-right: 1px solid rgb(162, 153, 153);}
.tipsIcon { position: relative; width:50%; height:auto; margin: 5px auto; }
.tipsIconBack {display: block; width:100%;}
.tipsCap {
	font-family:'Times New Roman', Times, "PMingLiU", "NSimSun", serif;
	display: inline-block; 
	position: absolute; 
	top:0; 
	width: 80%; 
	padding: 0 0 0 5%;            
	font-size: 2.2vw; 
	line-height: 2.5vw; 
	color: rgb(87, 84, 81); 
}
.tipsTxtBlock {position: relative; float: left; width: 80%; height: 100%; font-size: 18px; line-height: 28px; letter-spacing: 2px; padding: 0 4% 50px 4%; }
.tipsTxtBlock p { margin-bottom: 0.5rem !important; }
.tipsTxtBlock span { color: rgb(126, 124, 122); }
.desGist { font-size: 16px !important; color: dimgray; display: inline-block;  }
.tipStampBlock { position: absolute; bottom: 0; left:4%; width:5%; }
.tipStamp { display: block; width:100%;}
.tipsVidBlock li {list-style: none; }
.podLink { display: inline-block; width:20px; height: 20px; vertical-align: middle; }
.podlinkImg { display: block; width:100%;}
@media screen and (max-width: 1200px) {

}
@media only screen and (max-width: 1600px),
            screen and (max-height: 1000px) {
	/* ---------------Banner------------------------- */
	.subBanWrap { width: calc(100% - 100px); margin-left: 100px; }
	/* -------------------New 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%; }
	.lg-video-cont.lg-has-html5 { max-width: 70% !important; }	
	/* -------------------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; } */
	/* ---------------Knowledge Block------------------------ */
	.knwPos { position: relative; width: calc(100% - 100px); margin-left: 100px; height: auto; }
    .tipsCap { padding: 0 0 0 5%; font-size: 2.0vw; line-height: 2.3vw; }

}
@media screen and (max-width: 992px) {
	/* -------------------Banner------------------------- */
	.subBanWrap {  width: 100%; margin-top: 75px; margin-left:0px; }
	.subHead_Sm {display: none;}
	.subHead_Lg {display: block;}
	.logCirWrap { width: 40%;}
	/* -------------------New Video Section------------ */
	.vidConBlock { width:90%; 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; margin: 0 0 10px 0 !important; }
	.vidPlySq { top:4px; bottom: 4px; left: 4px; right: 4px; }
	.lg-video-cont.lg-has-html5 { max-width: 85% !important; }	
	/* -------------------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; }	 */
	/* ---------------Knowledge Block------------------------ */
	.knwPos { width: 100%; margin-left: 0px; height: auto;  }
	.tipsBlock {  display: flex; flex-direction:column; flex-wrap: wrap; }
	.tipsLeftBlkWrap { width:100%; height:auto; border-bottom: 0.5px solid cornsilk; }
	.tipsRightBlkWrap {  width:100%; height:auto;  border-bottom: 0.5px solid cornsilk; }
	.tipsLeftBlock { width:90%; margin: 0 auto; }
	.tipsRightBlock { width:90%; margin: 0 auto; }
	.tipsConBlock { width: 50%; }
	.tipsVidBlock { width:50%; }
	.rigShad{ width:50%; }
	.tipsConBlock { padding: 25px 0px; border-bottom: none; }
	.tipsTitBlock { width: 18%; }
	.tipsTxtBlock { font-size: 15px; letter-spacing: 2px; line-height: 22px; padding: 0 30px 50px 4%; }
	.tipsIcon { width: 70%; margin: 0 auto; }
	.tipsCap { top:0; width: 80%; padding: 5% 0 0 15%; font-size: 3.5vw; line-height: 4.5vw; }
	.desGist { font-size: 14px !important; }
	.podLink {  width:15px; height: 15px;  }
}
@media only screen and (max-width: 767px) {
	/* --------------------Banner-------------------- */
	.subBanWrap { width: 100%; margin-top: 75px; }
	.logCirWrap { width: 50%;}
	/* -------------------New 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; margin:  0 0 0.5rem 0 !important; }
	.vidPlyIcon { bottom: 8px; left: 8px; width:8%; }
	.leftIcon { width:80%; margin: 0 auto; }
	.leftIcon.headsvg { width:60%; }
	.lg-video-cont.lg-has-html5 { max-width: 100% !important; }
	.iconCap { font-size: 4vw; line-height: 4.8vw; padding: 7% 0 0 17%; }
	/* -------------------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; } */
	/* ---------------Knowledge Block------------------------ */
	.tipsIcon { width: 80%; margin: 0 auto; }
	.tipsCap {  width: 80%; padding: 7% 0 0 17%; font-size: 4vw; line-height: 4.8vw; }
	.tipsTxtBlock { font-size: 12px; letter-spacing: 2px; line-height: 18px; padding: 0 30px 50px 4%; }
	.desGist { font-size: 11px !important; }
	.podLink {  width:12px; height: 12px; }
}

@media only screen and (max-width: 576px) {
	/* -------------------Banner------------------------- */
	.subHead_Sm {display: none;}
	.subHead_Lg {display: none;}
	.subHead_ExS {display: block;}
	.logCirWrap { width: 60%;}
	/* -------------------New 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%; } */
	/* ---------------Knowledge Block------------------------ */
	.tipsTxtBlock { font-size: 11px; letter-spacing: 1px; line-height: 18px; padding: 0 4% 50px 4%; }
	.desGist { font-size: 9px !important; line-height: 16px; }
	.podLink {  width:11px; height: 11px; }
}
@media only screen and (max-width: 359px) {

	
}