@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 }

/* ---------------------------Progress Bar---------------------------- */
#nprogress .bar {
	background: #807a75 !important;
	position: fixed;
	z-index: 1031;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}
#nprogress .peg {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow: 0 0 10px #a19a99, 0 0 5px #e8dbcf !important;
	opacity: 1.0;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	-ms-transform: rotate(3deg) translate(0px, -4px);
	transform: rotate(3deg) translate(0px, -4px);
}
.spinner {
	/* display: block; */
	display: none !important;
	position: fixed;
	z-index: 1031;
	top: 15px;
	right: 15px;
}

/*----------------------subPage_ArtAppreciate-Header-------------------------------*/
.mainConWrap { position: relative; width:100%; }
.vidBanWrap {
	position: relative;
	display:block;
	width: 100%;
	height: 100vh;
	/* padding-bottom: 56.25%; */
	background-color:rgb(156, 141, 124);
	background:  url(../img/head_VidPoster.jpg) no-repeat ;
	background-position:center; background-size: cover; 
	overflow: hidden;
}
.videoWrap { 
	display: block; 
	position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
	transform: translate(-50%, -50%); 
}
.subHeadBanWrap {
    position: relative;
    width:100%;
	/* height: 500px; */
    background-color: salmon;
	background-color: rgb(46, 65, 96);
}
.menSpc { width:150px; height: 50px; float: left; transition: .4s ease all;  }
.subBanWrap { position: relative; width: calc(100% - 150px); height: auto;  float: left; }
.subHead_Sm {display: block; width: 100%; height: auto;}
.subHead_Lg {display: none; width: 100%; height: auto;}
/* .subHead { display: block; 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%; }
.container a:hover { color: black;}

/* --------------Knowledge Section-------------- */
.posBlock { position: relative; width:100%; height:1200px; background-color: wheat;}
.knwWrap { position: relative; width:100%; height:auto;  background: url(../img/cavText.jpg); background-size: contain; }
.knwCon { position: relative; width: calc(100% - 150px); margin-left: 150px; padding:4% 0; }
.knwLogoWrap {
	position: absolute; 
	width:20%; 
	right:80%; top:0; left:0; bottom: 0; 
	text-align: center;
	/* float: left;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; */
}     
.knwBadge { position: absolute; width:160px; height: 160px; top:50%; left:50%; transform: translate(-50%, -50%); display: flex; justify-content: center; }
.knwHoriDeco { display: none;}
.knwIconWrap { position: relative; width:60%; margin: auto; border-radius: 50%; }
.knwIcon { display: inline-block; width:100% }
.knwTxt { position: absolute; width:16%; }
.knwTxt.tr { top:5px; left:5px } .knwTxt.tl { top:5px; right:5px } .knwTxt.bl { bottom:5px; left:5px } .knwTxt.br { bottom:5px; right:5px }
.knwLogoEleWrap { position:absolute; width:40%; height: 50%; bottom: 0; display: inline-block; margin-left: -20%;}
.knwEle {height: 100%; display: inline-block; }
.knwLogoTopEle { 
	position:absolute; 
	width:100%; height: 50%;
	/* margin-left: -20%; 
	display: inline-block;  */
	/* text-align: center; */
	top:0; left:50%; transform: translate(-50%, 0);
}
.knwFlo {
	position:absolute; 
	bottom: 0;
	left:50%; transform: translate(-50%, 0);
	height: 90%;
	display: inline-block; 
}
.qtWrap { width:80%; height:auto; float: right; padding: 100px 0; }
.qtCon { 
	position: relative; 
	width:80%; height: auto; 
	margin-bottom: 50px; 
	margin-left:80px; 
	opacity: 1;
	box-sizing: content-box;
	cursor: pointer;
	/* background: url(../img/techTitPic_235x340.jpg); */
}
.qtCon.b, .qtCon.d { margin-left:160px; width: calc(80% - 80px); }
.qtWrap a { text-decoration: none; color: rgb(48, 47, 47);}
.qtWrap a:hover { text-decoration: none; color: rgb(48, 47, 47);}
.qtDeco { position: absolute; bottom: 0; right: 0; width: 170px; height: 0.5px; border-bottom: 0.5px solid rgb(196, 178, 145);}
.decoTit { font-size: 18px; letter-spacing: 5px; }
.decoTime { display: inline-block; letter-spacing: 2px; color: rgb(136, 127, 112); padding: 0 0 0 10px; margin-top: 5px; border-left: 1px solid rgb(196, 178, 145); }
.decoPlyWrap { display: inline-block; width:15px; height:15px; margin-right: 5px;}
.decoPlay {display: inline-block; width:100%; vertical-align: baseline; margin-top: 2px;}

.qtIcon { position: relative; width:80px; height:80px; margin-right: 10px; float: left; }
.typeBack { position: absolute; top:0; width:100%; }
.qtCap { position: absolute; top:0; width: 100%; padding: 10px 0 0 10px; font-family:'Times New Roman', Times, "PMingLiU", "NSimSun", serif; font-size: 60px; line-height: 1; color: rgb(87, 84, 81); }
.qtTxt { font-family:'Times New Roman', Times, "PMingLiU", "NSimSun", serif; width:calc(100% - 260px); display: inline; float: left; padding-bottom: 15px; font-size: 24px; line-height: 1.3;  letter-spacing: 2px; vertical-align: top;  }
.qtLink { display: inline-block; width:30px; height: 30px;}
.knwAniStart { position: absolute; width:10px; height:10px;top:50%; left:50%; transform: translate(-50%, -50%); background-color: blue; }

.techWrap { position: relative; width:100%; height:auto; padding: 180px 0; background-image: url(../img/cavText_grn.jpg); background-size: contain; }
.techCon { position: relative; width: calc(100% - 150px); margin-left: 150px; height: auto; }
.techLogoWrap { position: relative; width:20%; height:auto; float:left;  }
.techBadge { 
	position: relative; 
	/* width:130px; */
	max-width: 160px; 
	/* height: auto; */
	min-height:360px;
	/* top:50%; left:50%; */
	/* margin: 140px auto; */
	margin:15px auto 280px auto;
	border: 1px solid rgb(237, 232, 218);
	/* transform: translate(-50%, -50%);  */
}
.techIconBadge { 
	position: absolute; 
	width: 100%; 
	/* height: 170px;  */
	height: 50%;
}
.techIconSq { position: absolute; top:3px; bottom: 3px; left: 3px; right: 3px; box-sizing: border-box; border: 1px solid rgb(237, 232, 218); }
.techIcon { position:absolute; width: 60%; height: auto; top:50%; left:50%; transform: translate(-50%, -50%);  }
.techTxt { position: absolute; width:16%; }
.techTxt.tr { top:5px; left:5px } .techTxt.tl { top:5px; right:5px } .techTxt.bl { bottom:5px; left:5px } .techTxt.br { bottom:5px; right:5px }
.techPicSq {  position: absolute; width:100%; height: 50%; bottom: 0; background: no-repeat url(../img/techTitPic_235x340.jpg); background-size: cover; opacity: 0.8; }
.techBadgePic { display:inline-block; width: 100%; }
.techItemWrap { 
	position: absolute; 
	right:0;
	width:80%; height:100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.techItem { 
	position: relative; 
	width:20%; 
	/* height: auto; */
	min-height: 360px; 
	margin: 15px 5%; 
	background-color: rgb(196, 178, 145);
	-webkit-box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.25); 
	box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.25);
	background-image:  url(../img/china_fabric_01.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center; 
}
.techPicWrap { position: absolute; width:100%; height: 80%; overflow: hidden; background: no-repeat; background-size: cover; background-position: center; }
.techPicWrap.a { bottom: 0;  background-image:  url(../img/skill_01.jpg); }
.techPicWrap.b { top:0; background-image:  url(../img/skill_04.jpg); }
.techPicWrap.c { bottom: 0px;  background-image: url(../img/skill_08.jpg); }
.txtBack { 
	position: absolute; 
	top:0; 
	bottom: 0; 
	left:0;
	right: 50%; 
	/* right: 80%;  */
	background: rgb(237,232,218);
	background: -moz-linear-gradient(90deg, rgba(237,232,218,1) 0%, rgba(237,232,218,0.9) 35%, rgba(237,232,218,0) 100%);
	background: -webkit-linear-gradient(90deg, rgba(237,232,218,1) 0%, rgba(237,232,218,0.9) 35%, rgba(237,232,218,0) 100%);
	background: linear-gradient(90deg, rgba(237,232,218,1) 0%, rgba(237,232,218,0.9) 35%, rgba(237,232,218,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ede8da",endColorstr="#ede8da",GradientType=1);
}
.skiTitPic { position: relative; width:25%; height: auto; margin: 25px 0 0 25px;}
.skiTitImg { display: block; width:100%;}
.linkIconWrap { position: absolute; bottom: 4%; left: 14%; width: 30px;}
.techTit { padding:15px 0 0 12px; font-size: 18px; line-height: 1.4;  letter-spacing: 6px; color: rgb(75, 70, 66); writing-mode: vertical-rl;
	text-orientation: upright;}
.techPic { display: inline-block; height:100%;} 

/* ----------------------- Timeline ---------------------- */
.timeLineWrap { position:relative; width:100%; padding-top: 100px; background-color: rgb(247, 243, 240); }
.timeLine { position: relative; width:100%; height:auto; }
.sldPos { 
	position: absolute; 
	width: 85%;
	margin-left: 150px; 
	top: 0; height: auto; 
	z-index: 2; 
}
.miniSlide { position: relative; width: 80%; float: right; height: 100%; text-align: center;}
.timeBotBlockWrap { position: relative; width:100%;}
.posImgWrap { position: relative; width: 400px; opacity: 0; }
.posImg { width: 100%; }
.timeBotBlock { position: relative; width:100%; height: 260px; border-top: 4px solid rgb(203, 178, 130); background-color: rgb(237, 232, 218); }
.portDis { position: absolute; bottom:10px; right:7%; font-size: 12px; letter-spacing: 2px; line-height: 18px; color: rgb(116, 111, 111);}
.setSlider { position: relative; width: 94%; margin: 0 auto; }
.slick-slide {
	margin: 0px 20px !important;
}
.slick-slide img {
	width: 100%;
	display: block;
}
.slick-slide img.full { border-radius: 10px 10px 0 0; }
.slideItem a{ text-decoration: none;}
.picWrap { position: relative; width: 100%; display: block; z-index: 10; }
.txtBlock {
	display: inline-block;
	/* width: 100%; */
	height: auto;
	box-sizing: border-box;
	padding: 25px 8px;
	color: rgb(27, 52, 89);
}
.adTit { display: inline-block; height: 30px; font-size: 20px; line-height: 26px; font-weight: 500;letter-spacing: 1px; border-bottom: 1px solid rgb(161, 125, 76); }
.adTit p { margin-bottom: 0;}
.adCon { font-size: 32px; line-height: 42px; letter-spacing: 4px; padding:5px 0 0 0; }
.artNam { font-size: 21px; line-height: 32px; letter-spacing: 4px; padding:5px 0 10px 0 !important;}
.btnWrap { position: absolute; width: 100%; top: 20%; left: 0; }
.btnWrap.full { top: 40%; left: 0; }
.conBtn { position: absolute; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; background-color: rgb(98, 104, 112); }
.adPrev { top: 25%; left: 5px; }
.adNext { top: 25%; right: 5px; }
.conArr { position: relative; width: 42%; left: 29%; top: 22%; display: block; opacity: 0.6; }
.timTitBlock { position: absolute; top: 0px; margin-left:150px; width: calc((100% - 150px)*0.2); height:100%; }
.timTit { position:absolute; top:-80px; left: 50%; transform: translate(-50%, 0); width: 160px; height: 160px; cursor: pointer; z-index: 10;}
.timIconWrap { position:absolute; width: 60%; height: 60%; top: 50%; left: 50%; transform: translate(-50%, -52%);}
.timIconImg { width:100%;}
.timTxt { position: absolute; width:16%; }
.timTxt.tr { top:5px; left:5px } .timTxt.tl { top:5px; right:5px } .timTxt.bl { bottom:5px; left:5px } .timTxt.br { bottom:5px; right:5px }
.slideItem { position: relative;}
.picBackWrap  { position: absolute; top:0; width:100%; height:auto; }
.picBack { width:100; }
.timTitHoriBlock { position: relative; display: none; width: 100%; height: 160px; margin-bottom: 15px; }
.timTitHori { position: absolute; width: 130px; height: 130px; top:50%; left:50%; transform: translate(-50%, -50%); }
.timHoriDeco { 
	position: absolute; 
	width: 100%; height: 2.7px; top:50%; left:50%; 
	transform: translate(-50%, -52%); 
	background: -moz-linear-gradient(left,  rgba(197,168,122,0) 0%, rgba(197,168,122,0) 20%, rgba(197,168,122,0.5) 47%, rgba(197,168,122,0.5) 53%, rgba(197,168,122,0) 80%, rgba(197,168,122,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(197,168,122,0) 0%,rgba(197,168,122,0) 20%,rgba(197,168,122,0.5) 47%,rgba(197,168,122,0.5) 53%,rgba(197,168,122,0) 80%,rgba(197,168,122,0) 100%); 
	background: linear-gradient(to right,  rgba(197,168,122,0) 0%,rgba(197,168,122,0) 20%,rgba(197,168,122,0.5) 47%,rgba(197,168,122,0.5) 53%,rgba(197,168,122,0) 80%,rgba(197,168,122,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5a87a', endColorstr='#00c5a87a',GradientType=1 );
}

/* -----------------Art Programme ------------------------*/
.progWrap { position: relative; width:100%; height: auto; background: url(../img/cavText_blu.jpg); background-size: contain; }
.progCon { position: relative; width: calc(100% - 150px); margin-left: 150px; padding: 25px 0; height: auto; }
.progLogoWrap { position: absolute; top:0; bottom: 0; left: 0; right:80%;  }
.progLogoBlock { position: absolute ; width:160px; height: 160px; top:50%; left:50%; transform: translate(-50%, -50%);  }
.progTxt { position: absolute; width:16%; }
.progTxt.tr { top:5px; left:5px } .progTxt.tl { top:5px; right:5px } .progTxt.bl { bottom:5px; left:5px } .progTxt.br { bottom:5px; right:5px }
.progBlockWrap { position: relative; width:80%; height: 100%; float: right; }
.progBlock { position: relative; width:80%; height: auto; margin: 120px auto; border-top: 5px solid rgb(100, 105, 116); border-bottom: 5px solid rgb(100, 105, 116);   background-color: rgb(27, 52, 89, 0.5); }
.vertSect { position: relative; height:750px; width:100%;  }
.vertTitle { position: relative; width: 7.69%; height: 90%; top:5%; float: left;  border-right: 1px solid rgb(203, 178, 131); }
.vertTitle.last { border: none;}
.vertTitBlock { position: absolute; top:2%; left:50%; transform: translate(-50%, 0%); width: auto; height: 100%; font-size: 32px; line-height: 36px; letter-spacing: 6px; color:rgb(203, 178, 131); font-weight: bolder; writing-mode: vertical-lr; }
.vertTxt { position: absolute; top:2%; left:50%; transform: translate(-50%, 0%); font-size: 22px; line-height: 30px; letter-spacing: 6px; color: rgb(248, 237, 223); writing-mode: vertical-lr; }
.disYr { font-size: 15px; vertical-align: top; color: rgb(173, 157, 136);}
.vertDot { position: absolute; top:15%; right:15%; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgb(148, 142, 106); }
.vertPlcHold { display:none; width:0; height: 100%; }
.progEleWrap { width: 50%; height: 100%; margin: 0 auto; opacity: 0.8; }
.progIcon {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 60%; display: inline-block; margin: auto;}
.progDeco { display: block; height: 104%; margin: auto; }
.progDecoHori { display: none; width:100%; }
.progDecoWave { position: absolute;  }
.progDecoWave.tp { width: 400px; top:5%; right: 5%; opacity: 0.5;}
.progDecoWave.bo { width: 400px; bottom: 3%; left: 3%; opacity: 0.2;}
.progWave { width: 100%; display: inline-block;}


@media screen and (max-width: 1200px) {
    /* .subLogRef { width: 30%; } */
	.vidBanWrap {
		width: 100%;
		height: auto;
		padding-bottom: 56.25%;
		background-color:rgb(156, 141, 124);
	}
	.videoWrap { 
		top: auto;
		left: auto;
		min-width: unset;
		min-height: unset;
		transform: translate(0, 0);
		width: 100%;
	}
	.knwFlo { height: 75%; }
}
@media only screen and (max-width: 1600px),
            screen and (max-height: 1000px) {
	.menSpc { width: 100px; display: none; }
	.subBanWrap { width:100%; }
	.knwCon { width: calc(100% - 100px); margin-left: 100px; padding:0 0; }
	.knwLogoEleWrap { width: 60%; margin-left: -30%; bottom: -1%; }
	.knwBadge { width: 130px; height: 130px; }
	.techWrap { padding: 140px 0;}
	.techCon { width: calc(100% - 100px); margin-left: 100px }
    .techBadge { max-width: 130px; min-height: 300px; }
    .techItem { min-height: 300px; }

	.knwWrap { padding-top: 25px; }
	.qtIcon { width: 60px; height: 60px; }
	.qtCap { font-size: 40px;}
	.qtTxt { width:calc(100% - 260px); font-size: 21px; line-height: 1.5;}
	.qtCon { margin-left: 50px; }
	.qtCon.b, .qtCon.d { width: calc(80% - 90px); margin-left: 140px; }
	.qtDeco { width: 145px; }
	.qtLink { width: 24px; height: 24px; }
	.decoTit { font-size: 14px; }
	.decoPlyWrap { width: 12px; height: 12px;}
	.skiTitPic { width:35%; margin: 25px 0 0 15px; }
	.linkIconWrap { position: absolute; bottom: 4%; left: 14%; width: 23px;}
	/*----------------Timeline--------------------*/
	.timeLineWrap { padding-top: 50px; }
	.sldPos { margin-left: 100px; }
	.timeBotBlock { height: 220px;background-color: rgb(237, 232, 218); }
	.timTitBlock { margin-left:100px; width: calc((100% - 100px)*0.2); }
	.timTit { width: 130px; height: 130px; }
	.adTit { height: 30px; font-size: 18px; line-height: 22px; }
	.adCon { font-size: 28px; line-height: 38px; letter-spacing: 4px; padding: 0px 0 0 0; }
	.artNam { font-size: 18px;line-height: 22px; letter-spacing: 4px; padding: 5px 0 10px 0 !important; }
	.conBtn { width: 25px; height: 25px;}
	/* -----------------Art Programme ------------------------*/
	.progCon { width: calc(100% - 100px); margin-left: 100px; }
	.progLogoBlock { width:130px; height: 130px; }
	.vertSect { height: 650px; }
	.vertTitBlock { font-size: 28px; line-height: 32px; letter-spacing: 6px; }
	.vertDot { width: 10px; height: 10px; border: 2px solid rgb(148, 142, 106); }
	.vertTxt { font-size: 18px; line-height: 30px; letter-spacing: 6px; }
	.disYr { font-size: 12px; vertical-align: top; color: rgb(173, 157, 136); }
}
@media screen and (max-width: 992px) {
	.vidBanWrap { margin-top: 75px; }
    .subLogRef { width: 30%; }
	.menSpc { display: none; }
	.subBanWrap { width: 100%; margin-top: 75px; }
	.subHead_Sm {display: none;}
	.subHead_Lg {display: block;}
	.knwCon { width: 84%; margin: 0 auto; }

	.techWrap { padding: 100px 0;}
	.techCon { width: 84%; margin: 0 auto; }
	.techBadge { 
		/* max-width: 160px; */
		max-width: 120px; 
		/* min-height:360px; */
		min-height:280px;
		/* margin: 140px auto; */
		margin:15px auto 280px auto;
	}
	.techItemWrap { right:0; width:80%; height:100%; display: flex; flex-direction: row; justify-content: center; }
	.techItem { width:25%; min-height: 320px; margin: 15px 4%; }
	.knwWrap { padding-top: 0; }
	.qtCon { width: 95%; margin-left: 30px; }
	.qtCon.b, .qtCon.d { width: 95%; margin-left: 30px; }
	.qtTxt { width: calc(100% - 200px); font-size: 18px; }
	.qtLink { width: 20px; height: 20px; }
	/* -------------------TimeLine--------------------- */
	.sldPos { margin-left: 70px; }
	.timTitBlock { margin-left: 60px; }
	.timTit { top: -65px; left: 50%; transform: translate(-50%, 0); width: 130px; height: 130px; }
	.timeBotBlock { height: 220px; border-top: 3px solid rgb(203, 178, 130); }
	.timIconWrap { transform: translate(-50%, -51%); }
	.txtBlock { padding: 10px 8px; }
	.adTit { height: auto; font-size: 16px; line-height: 20px; padding-bottom: 4px; letter-spacing: 0; }
	.adCon { font-size: 24px; line-height: 32px; letter-spacing: 4px; }
	.artNam { font-size: 16px;line-height: 20px; letter-spacing: 4px; padding: 3px 0 10px 0 !important; }
	.portDis { bottom:0px; right:12%;}
	/* -----------------Art Programme ------------------------*/
	.progCon { width: 84%; margin: 0 auto; }
	.progBlock { width: 84%; margin: 120px auto; }
	.vertSect { height: 550px; }
	.vertTitBlock { font-size: 24px; line-height: 30px; letter-spacing: 6px; }
	.vertTxt { font-size: 16px; line-height: 24px; letter-spacing: 6px; }
}
@media only screen and (max-width: 767px) {
	.menSpc { display: none; }
	.subBanWrap { width: 100%; margin-top: 75px; }
	.techLogoWrap { position: relative; width:100%; height:auto; float:none;  }
	.techBadge { max-width: 280px; min-height:140px; margin:0 auto; }
	.techIconBadge { width: 50%; height: 100%; }
	.techPicSq { width: 50%; height: 100%; right: 0; background-position: center; }
	.techItemWrap {
		position: relative;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.techItem { position: relative; width:25%; min-height: 360px; margin: 55px 3%; }
	.knwCon { width: 100%; }
	.knwLogoWrap {position: relative; width: 100%; right: 0; top: 0; left: 0; bottom: 70%; height: 180px;}
	.knwLogoTopEle { display: none;}
	.knwLogoEleWrap { display: none;}
	.knwHoriDeco { display: block; width:100%; height: 180px; }
	.knwHori { width:100%; display: inline-block;position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
	.qtWrap { width: 80%; float: none; padding: 50px 0; margin: 0 auto; }
	.qtCon { width: 100%; margin-left: 10px; }
	.qtCon.b, .qtCon.d { width: 100%; margin-left: 10px; }
	.qtTxt { width: calc(100% - 80px); font-size: 18px; padding-bottom: 20px; }
	.qtLink { width: 20px; height: 20px; }
	/* --------------Timeline------------------ */
	.sldPos { width: 84%; margin-left: 8%; }
	.miniSlide { width: 100%; float: none; }
	.timeLineWrap { padding-top: 0; }
	.timTitBlock { display: none; }
	.timTitHoriBlock { display: block; }
	.portDis {position: relative; width:100%; bottom:auto; right:auto; padding-bottom: 15px; text-align: center; background-color: rgb(237, 232, 218);}
	/* -----------------Art Programme ------------------------*/
	.progWrap { padding: 10px 0 50px 0; }
	.progLogoWrap { position: relative; width:100%; height:150px; top:0; bottom:auto; left:auto; right:auto; }
	.progBlock { width: 84%; margin: 30px auto; }
	.progCon { width: 100%; margin: 0 auto; }
	.progBlockWrap { width: 100%; height: 100%; float: none; }
	.progEleWrap { position: absolute; width: 100%; height: 30%; top:50%; left:50%; transform: translate(-50%, -50%); }
	.progDeco { display: none; }
	.progDecoHori { display: inline-block; width:100%; height: 100%; margin: auto; vertical-align: middle; }
	.progDecoWave.tp { width: 250px; top: 0%; right: 5%; }
	.progDecoWave.bo { width: 300px; bottom: -10%; left: 3%;}
	.disYr { font-size: 10px; letter-spacing: 4px; }
}

@media only screen and (max-width: 576px) {
	.techBadge { max-width: 240px; min-height:120px; margin:0 auto; }
	.techItemWrap {width: 100%; flex-direction:column; justify-content: center;}
	.techItem { width:60%; min-height: 480px; margin: 55px auto 0 auto; }

	.knwLogoWrap { height: 140px;}
	.knwHoriDeco { height: 140px;}
	.knwBadge { width: 110px; height: 110px; }
	.qtWrap {  padding: 20px 0; }
	.qtIcon { width: 50px; height: 50px; }
	.qtCap { font-size: 30px; }
	.qtTxt { font-size: 16px; letter-spacing: 0; padding-bottom: 20px; }
	.qtLink { width: 20px; height: 20px; }
	.skiTitPic { width:27%; margin: 25px 0 0 15px;}
	/* -----------------Art Programme ------------------------*/
	.vertSect { height: auto; padding: 30px 0; }
	.vertTitle { width: 14.28%; height: 400px; top:5%; float: left;  border-right: 1px solid rgb(203, 178, 131); }
	.vertPlcHold { display: block; width: 14.28%; height: 400px; }
	.vertDot { width: 10px; height: 10px; top:18%; right:18%; border: 2px solid rgb(148, 142, 106); }
	.progDecoWave.bo { width: 300px; bottom: -7%; left: 3%;}
}
@media only screen and (max-width: 359px) {
	.techItem { width:80%; min-height: 440px; margin: 55px auto 0 auto; }
}