@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Sansita+Swashed:wght@300..900&display=swap');
body, table, p, div, span, form, input, textarea, select, pre, button,h1,h2,h3,h4,h5,h6,a,ul li,ol li,table th,table td{font-weight:400;font-family: "微軟正黑體","Microsoft JhengHei","PMingLiU", AppleGothic, Dotum, Lucida Grande;letter-spacing:0;}
.menufont{font-family:"Playfair Display"!important;font-weight:400!important;}/*menu*/
.spf2{font-family:"Sansita Swashed"!important;font-weight:300!important;letter-spacing:0.1rem;}/*首頁 英文小字*/

.spf21{font-family: "Metal", serif;font-weight:300!important; font-style: normal;letter-spacing:0.1rem;}/*首頁 英文小字*/
.spf3{font-family:"Instrument Sans"!important;font-weight:500!important;letter-spacing:-0.3rem;}/*首頁 英文大標*/
.titlefont{position:relative;font-family:"Open Sans"!important;line-height:2.4!important;font-weight:600!important;letter-spacing:0.2rem;text-align:center;}/*英文 標題*/
.titlefont span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-bottom:1px solid #cccccc;width:26%;margin:0 auto;}
.spf4more{font-family:"Open Sans"!important;font-weight:400!important;letter-spacing:0.1rem;}/*英文 標題*/



/*基礎框架 */
.section{position:relative; max-width:1920px; margin:0 auto;} /*限制 1920寬 */
.centerwrapmenu{  position:relative; width:90%;  margin:0 auto;height:100%;}/*menu*/
.centerwrap{  position:relative; width:80%;  margin:0 auto;}/*寬版*/
.centerwrap2{  position:relative; width:69%;  margin:0 auto;}/*窄版*/
.centerwrap .inset{margin-left:5%;}

/* pop */
#pop{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:#000;}
#popin{position:relative;z-index:2;}
.popclosebg{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;}
.popclosebtn{position:absolute;z-index:3;top:0;right:0;width:10%;height:4rem;width:4rem;over-float:hidden;}
.popclosebtn img{height:4rem;}
#popin iframe{position:absolute;top:0;left:0;width:100%;height:100%;}


/*css class */
.btn{cursor: pointer;}
.section.noflow{overflow:hidden;}
.hcenter{position:absolute;top:50%;transform: translateY(-50%);}
.nomargin{margin:0!important;}

/* css 動態 */
.mover{transition: all 1s;margin-top:15rem;opacity:0;}
.moverleft{margin-top:0;margin-left:15rem;opacity:0;}
.moverright{margin-top:0;margin-left:-15rem;opacity:0;}
.mover.on{margin-top:0px;opacity:1;}
.moverleft.on{margin-left:0px;}
.moverright.on{margin-left:0px;}
/* FONT */
/* color */
.fbold{font-weight:600;}
.fbbold{font-weight:900;}
.fcolor000{color:#000;}
.fcolorfff{color:#fff;}
.fcolorccc{color:#ccc!important;}
.fcolor50{color:#505050;}
.fcolor74{color:#747474;}
.fcolor8A{color:#8A8A8A;}
.fcoloraa{color:#aaaaaa;}
.fcolor3e3a39{color:#3e3a39;}
.fcolor474443{color:#474443;}
.fcolorf3f3f3{color:#f3f3f3;}
.fcolora1a1a1{color:#a1a1a1;}

.fcolor3C3C3C{color:#3C3C3C;}
/*SIZE */
html{font-size:19px;line-height:1.5;}/* 等於中間的 1vw */
.fbold{font-weight:bold;}
.fsize150{font-size:8.5rem;line-height:1.18;}
.fsize100{font-size:5.26rem;line-height:1.5;}
.fsize90{font-size:4.74rem;line-height:1.5;}
.fsize80{font-size:4.21rem;line-height:1.5;}
.fsize75{font-size:3.85rem;line-height:1.5;}
.fsize70{font-size:3.68rem;line-height:1.5;}
.fsize60{font-size:3.16rem;line-height:1.5;}
.fsize57{font-size:3rem;line-height:1.5;}
.fsize50{font-size:2.63rem;line-height:1.5;}
.fsize42{font-size:2.21rem;line-height:1.5;}
.fsize40{font-size:2.11rem;line-height:1.5;}
.fsize38{font-size:2rem;line-height:1.5;}
.fsize37{font-size:1.95rem;line-height:1.5;}
.fsize35{font-size:1.84rem;line-height:1.5;}
.fsize34{font-size:1.79rem;line-height:1.5;}
.fsize33{font-size:1.74rem;line-height:1.5;}
.fsize32{font-size:1.68rem;line-height:1.5;}
.fsize31{font-size:1.63rem;line-height:1.5;}
.fsize29{font-size:1.53rem;line-height:1.5;}
.fsize27{font-size:1.42rem;line-height:1.5;}
.fsize25{font-size:1.32rem;line-height:1.6;}
.fsize24{font-size:1.26rem;line-height:1.6;}
.fsize23{font-size:1.21rem;line-height:1.6;}
.fsize21{font-size:1.11rem;line-height:1.6;}
.fsize20{font-size:1.05rem;line-height:1.6;}
.fsize19{font-size:1rem;line-height:1.6;}
.fsize18{font-size:0.94rem;line-height:1.6;}
.fsize17{font-size:0.89rem;line-height:1.6;}
.fsize16{font-size:0.84rem;line-height:1.6;}
.fsize15{font-size:0.79rem;line-height:1.6;}
.fsize14{font-size:0.74rem;line-height:1.6;}

.fonts{line-height:1!important;}/*設定相等於字高*/
.fonts2{line-height:1.2!important;}/*設定相等於1.2倍 字高*/
.fonts3{line-height:1.3!important;}/**/
.fontl{line-height:2!important;}/*設定相等於字高*/
.fontl2{line-height:3!important;}/*設定相等於字高*/
.fontl21{line-height:2.6!important;}/*設定相等於字高*/
/* bgcolor */
.bgcolorfff{background:#fff;}
.bgcolor000{background:#000;}
.bgcolor1e1d1c{background:#1e1d1c;}
.bgcolor08080a{background:#08080a;}
.bgcolor4065BC{background:#4065BC;}
.bgcolorF6F5F3{background:#F6F5F3;}
.bgebe7e4{background:#ebe7e4;}
.bgdbdcdc{background:#dbdcdc;}
.bgcolor3e3a39{background:#3e3a39;}
.bgcolorf2ede4{background:#f2ede4;}


.op00{opacity:0!important;}
.op10{opacity:0.1;}
.op15{opacity:0.15;}
.op20{opacity:0.2;}
.op25{opacity:0.25;}
.op30{opacity:0.30;}
.op35{opacity:0.35;}
.op40{opacity:0.40;}
.op45{opacity:0.45;}
.op50{opacity:0.5;}
.op55{opacity:0.55;}
.op60{opacity:0.6;}
.op65{opacity:0.65;}
.op70{opacity:0.7;}
.op75{opacity:0.75;}
.op80{opacity:0.8;}
.op85{opacity:0.85;}
.op90{opacity:0.9;}
.op95{opacity:0.95;}
/* ## layer(z-index) ################## */
.z001{z-index: 1!important;}
.z002{z-index: 2!important;}
.z003{z-index: 3!important;}
.z004{z-index: 4!important;}
.z005{z-index: 5!important;}
.z006{z-index: 6!important;}
.z009{z-index: 9!important;}


/* width */
.w40{width:40%;}
.w40{width:40%;}
.w50{width:50%;}
.w60{width:60%;}
.w70{width:70%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width:100%;}
.mx100{max-width:100%;}
/* height */
.h100{height:100%;}


/* margin %*/
.mr01{margin-right:0.5rem;}
.mr02{margin-right:1rem;}
.mr05{margin-right:2.5rem;}
.mr10{margin-right:5rem;}
.pcmw{margin-right:10%;margin-left:10%;}
.pcmw2{margin-right:5%;margin-left:5%;}
.mv10{margin-top:0.5rem;margin-bottom:0.5rem;}
.mv30{margin-top:1.5rem;margin-bottom:1.5rem;}

/* pad */
.vpad10{padding:0.5rem 0;}
.vpad15{padding:0.75rem 0;}
.vpad20{padding:1rem 0;}
.vpad25{padding:1.25rem 0;}
.vpad30{padding:1.5rem 0;}
.vpad40{padding:2rem 0;}
.vpad50{padding:2.5rem 0;}
.vpad60{padding:3rem 0;}
.vpad70{padding:3.5rem 0;}
.vpad90{padding:4.5rem 0;}
.vpad100{padding:5rem 0;}
.hpad10{padding:0 0.5rem;}
.hpad20{padding:0 1rem;}
.hpad25{padding:0 1.25rem;}
.hpad30{padding:0 1.5rem;}
.hpad40{padding:0 2rem;}
.hpad50{padding:0 2.5rem;}
.hpad70{padding:0 3.5rem;}
.apad10{padding:0.5rem;}
.apad20{padding:1rem;}
.apad25{padding:1.25rem;}
.apad30{padding:1.5rem;}
.apad40{padding:2rem;}
.apad50{padding:2.5rem;}

/* letter spacing */
.ls01{letter-spacing:0.1rem;}
.ls02{letter-spacing:0.2rem;}
.ls03{letter-spacing:0.3rem;}
/*切換 */
.show400{display:none!important;}
.hide400{}

/* 特殊共用 */
.more{display:inline-block;padding:0 100px;border-radius:100px;border:1px solid #cccccc;}

/*header*/
header{position:fixed;z-index:99;top:0;left:0;height:100px;width:100%;box-shadow:1px 1px 10px rgba(0,0,0,0.2);}
header .section{height:100%;}
.header{position:relative;height:100px;}
.headerin{position:relative;display:inline-block;height:100px;z-index:1;float:right;}
.headerin .navitem{ position:relative;display:inline-block;float:left;text-align:center;height:100%;border:0;margin:0 30px;}
.headerin .navitem:last-child{margin-right:0;}
.navitem a{display:block;height:100%;width:100%;}
.navitemin{position:relative;top:50%; transform:translateY(-50%);text-align:center;}
.navitemin h1{letter-spacing:4px;color:#fff;}
.navitemin p{letter-spacing:2px;color:#fff;font-weight:400;position:absolute;top:0;width:140%;left:-20%;text-align:center;}
.naviteminline{position:absolute;opacity:0;left:0;bottom:0;border-top:2px solid #000000;width:100%;}
.navitem.on .naviteminline{opacity:1;}
.navitem.on .ch1{opacity:0!important;}
.navitem.on .ch2{opacity:1!important;}
.navitemin .ch1{opacity:1;transition: all 0.3s;}
.navitemin .ch2{opacity:0;transition: all 0.3s;}
.navitemin:hover .ch1{opacity:0;}
.navitemin:hover .ch2{opacity:1;}	 

/* sidebar */
#sidebar{position:fixed;left:calc(50% + 870px);top:70%;transform: translateY(-50%);z-index:45;}
.sideitem{position:relative;display:block;height:50px;width:50px;margin-bottom:10px;}
.sideitem img{width:100%;}
/* index banner 設定 */
.bannerblock{position:relative;background:#000;overflow:hidden;z-index:1;}
.bannerblock .bannerbg{position:relative;z-index:0;opacity:0;width:100%;}
.bannerblock .banneritem{position:absolute;top:0;left:0;width:100%;height:100%;transition: all 2.5s; opacity:0;overflow:hidden; z-index:1;}
.bannerblock .banneritem.on{opacity:1;z-index:2;}
.bannerblock .banneritem .bannerimg{width:100%;z-index:0;transition: all 2.5s; opacity:0;}
.bannerblock .banneritem.on .bannerimg{opacity:1;}
.bannerblock .banneritem .bannertext{position:absolute;width:100%;z-index:1;transition-delay: 1s;  transition-property: all;  transition-duration: 2s; opacity:0;}
.bannerblock .banneritem.on .bannertext{opacity:1;}
.bannericonwrap{position:absolute;top:115px;right:115px;width:auto;z-index:9;}
.bannericonwrap img{width:67px;float:left;margin-right:10px;}
.indexbannertext{position:absolute;top:110px;right:0;width:40%;z-index:8;}
.indexbannertext p{width:360px;margin:0 auto;}

/* indexblock2 */
.indexblock2{padding:140px 0;}
.indexblock2 .relyleft{width:65%;z-index:2;}
.indexblock2 .relyright{float:right;margin-top:-81%;width:53%;z-index:1;}
.indexblock2 .videobox{overflow:hidden;}
.indexblock2 .videobox img{width:100%;position:relative;}
.indexblock2 .videobox iframe{position:absolute;top:-20%;left:-1%;bottom:-20%;right:-1%;width:102%;height:140%;}
.indexblock2 .videobox video{position:absolute;top:0;right:0;height:100%;}
.indexblock2 .videobox .videobtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10%;}
	.indexblock2 .b2line{display:inline-block;width:25%;border-bottom:1px solid #ccc;}

.indexblock2 .relyright p{width:70%;}
.indexblock2 h2{padding:50px 0;}
.indexblock2 p.b2{width:53%;padding:140px 37% 380px 10%;}


/* pitem */
.pitemwrap{position:relative;}
.pitemwrap::after{  content:'';  display:table;  clear:both;}
.pitem{position:relative;display:inline-block;float:left;width:32.4%;margin-right:1.4%;margin-bottom:40px;}
.pitembg{width:100%; box-shadow:1px 1px calc(10vw / 19.2) rgba(0,0,0,0.5);}
.pitem:hover img.pitembg{ box-shadow:1px 1px calc(10vw / 19.2) rgba(0,0,0,0.5);}
.pitem:nth-child(3n){margin-right:0;}
.pitem p{position:relative;border-bottom:1px solid #ccc;display:inline-block;}
.pitem .ibox{position:absolute;z-index:3;left:5%;top:4%;height:51px;width:50%;}
.pitem .ibox img{height:100%;margin-right:3%;float:left;}


/* indexawardbox */
.indexawardbox img{width:72px;margin:20px 10px;}
.pageiconwrap img{width:72px;margin:20px 10px;}

/* video */
.vpage .indexblock2{padding:140px 0 80px 0;}
.ivideoitem{position:relative;overflow:hidden;}
.ivimgbox{position:relative;width:72%;box-shadow:1px 1px 10px rgba(0,0,0,0.6);}
.ivtextbox{position:absolute;width:25%;}

.ivideoitem:nth-child(2n+1){text-align:right;}
.ivideoitem:nth-child(2n+1) .ivtextbox{bottom:0;left:0;}
.ivideoitem:nth-child(2n+1) .ivimgbox{margin-right:0;margin-left:auto;}
.ivideoitem:nth-child(4n+1){text-align:left;}
.ivideoitem:nth-child(4n+1) .ivtextbox{bottom:0;right:0;left:auto;}
.ivideoitem:nth-child(4n+1) .ivimgbox{margin-right:auto;margin-left:0;}
.ivimgbox iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.ivtextbox span{display:block;width:50%;border-top:1px solid #ccc;}


/* index press */
.ritemwrap{position:relative;}
.ritemwrap::after{  content:'';  display:table;  clear:both;}
.ritem{position:relative;display:inline-block;float:left;width:32%;margin-right:2%;box-shadow:1px 1px 15px rgba(0,0,0,0);}
.ritembg{width:100%;box-shadow:1px 1px calc(10vw / 19.2) rgba(0,0,0,0.5);}
.ritem:hover .ritembg{ box-shadow:1px 1px calc(10vw / 19.2) rgba(0,0,0,0.5);}
.ritem:nth-child(3n){margin-right:0;}
.ritem:nth-child(1) .ritembg{opacity:0;z-index:0;}

.ritem .irtextbox{position:relative;height:140px;border-bottom:1px solid #ccc;}
.ritem .irtextbox1{position:absolute;top:0;left:0;width:100%;height:100%;}
.ritem .irtextbox1 p{position:absolute;bottom:0;left:0;width:75%;}
.indexdotwrap{position:relative;}
.indexdotwrap div{display:inline-block;width:16px;height:16px;margin:0 20px;background:#474443;}



/*footer*/
footer{overflow:hidden;}
.footerbottom{position:relative;width:94%;margin:0 auto;z-index:1;border-top:1px solid #a1a1a1;}
/* ############################################# */
/* about  */
.abouttext{width:44%;float:left;margin-right:9%;}
.abouttext .txt1{margin-right:-40%;letter-spacing: -0.25rem;}
.aboutimg{width:47%;float:left;}
.aboutbox::after{  content:'';  display:table;  clear:both;}
.aboutsign{width:36%;}
.aboutbg{background:url('../img/aboutbg2.jpg?id=1');background-repeat:repeat;}
.abawardlist{position:relative;}
.abawardlist::after{  content:'';  display:table;  clear:both;}
.abawardlist p{float:left;width:44%;margin-left:3%;margin-right:3%;}



/*tag */
.tagbox{position:relative;}
.tagbox span{display:inline-block;margin:0 30px;padding:5px 10px;border-radius:0;border-bottom:1px solid #a1a1a1;}
.tagbox span.on{background:#dbdcdc;}

/* press  page */
.ppage .ritem{margin-bottom:80px;}
.ppage .ritem .irtextbox1 p{width:90%;}

/* contact */
.contactbox{position:relative;}
.contactbox .split2{width:48.5%;float:left;margin-right:3%;}
.contactbox .split2:nth-child(2n){margin-right:0;}
.contactbox::after{  content:'';  display:table;  clear:both;}
.contactimg{width:100%;box-shadow:1px 1px 10px rgba(0,0,0,0.5);}
.contactbox2{position:relative;}
.contactbox2 .split2:nth-child(2){width:74%;float:left;margin-right:1%;}
.contactbox2 .split2:nth-child(3){width:25%;float:left;}
.contactbox2::after{  content:'';  display:table;  clear:both;}
.contactbox3{position:relative;}
.contactbox3::after{  content:'';  display:table;  clear:both;}
.contactitem{width:33%;float:left;}
.contactitem img{float:left;margin-right:10px;}

/* contact form */

.formline{position:relative;margin:0 0 14px 0;}
.formline .fsize19{margin-bottom:-10px;}
.formline .fsize15{margin-bottom:5px;}
.formline::after{  content:'';  display:table;  clear:both;}
.formline input[type=text],.formline input[type=password]{width:calc(100% - 12px);padding:8px 5px;border:1px solid #BFBFBF;background:#fff;}
.formline select{width:calc(100% - 2px);padding:8px 5px;border:1px solid #BFBFBF;background:#fff;}
.formline textarea{width:calc(97% - 12px);height:220px;padding:5px 5px;border:1px solid #BFBFBF;}
.formline #capchk{width:calc(100% - 18px)!important;margin:0!important;text-align:center;padding:10px 8px!important;font-size:21px!important;line-height:42px!important;color:#3e3a39!important;border-radius:5px!important;}
.formbtn{width:100%;padding: 20px 0;margin-right:10px;border-radius:5px;text-align:center;}

/* map */
.contactmap{height:700px;border-top:1px solid #666;}
.contactmap iframe{width:100%;height:100%;}



/* 1920內 全尺寸之物件 */
@media screen and (max-width: 1920px) {
	html{font-size:0.982vw;}		
	/*header*/
	header{height:calc(100vw / 19.2);}
	.header{height:calc(100vw / 19.2);}
	.headerin{height:calc(100vw / 19.2);}
	.headerin .navitem{margin:0 calc(30vw / 19.2);}
	.headerin .navitem:last-child{margin-right:0;}
	.navitemin h1{letter-spacing:calc(4vw / 19.2);color:#fff;}
	
	/* sidebar */
	#sidebar{left:auto;right:calc(60vw / 19.2);}
	.sideitem{height:calc(50vw / 19.2);width:calc(50vw / 19.2);margin-bottom:calc(10vw / 19.2);}


	
	/* index banner 設定 */	
	.bannericonwrap{bottom:calc(115vw / 19.2);right:calc(115vw / 19.2);}
	.bannericonwrap img{width:calc(67vw / 19.2);margin-right:calc(10vw / 19.2);}

	
	/* indexblock2 */
	.indexblock2{padding:calc(140vw / 19.2) 0;}
	.indexblock2 h2{padding:calc(50vw / 19.2) 0;}
	.indexblock2 p.b2{padding:calc(140vw / 19.2) 37% calc(380vw / 19.2) 10%;}


	/*tag */
	.tagbox span{margin:0 calc(30vw / 19.2);padding:calc(5vw / 19.2) calc(10vw / 19.2);}

	/* pitem */
	.pitem{margin-bottom:calc(40vw / 19.2);}

	/* indexawardbox */
	.indexawardbox img{width:calc(72vw / 19.2);margin:calc(20vw / 19.2) calc(10vw / 19.2);}
	.pageiconwrap img{width:calc(72vw / 19.2);margin:calc(20vw / 19.2) calc(10vw / 19.2);}


	/* iicon */
	.iiconbox a{width:calc(66vw / 19.2);height:calc(66vw / 19.2);margin:calc(10vw / 19.2) calc(5vw / 19.2);}
	
	/* i video */


	/* index project */
	.ritem .irtextbox{height:calc(140vw / 19.2);}
	.indexdotwrap div{width:calc(16vw / 19.2);height:calc(16vw / 19.2);margin:0 calc(20vw / 19.2);}



	/* more */
	.more{padding:0 calc(100vw / 19.2);}
	

	/*footer*/
	.footershadow{height:calc(10vw / 19.2);margin-top:-calc(10vw / 19.2);box-shadow: 0 0 calc(10vw / 19.2) rgba(0,0,0,0.5);}
	
	/* ############################################# */
	/* about us */
	.aboutbox1 img{margin-left:calc(40vw / 19.2);width:calc(500vw / 19.2);}
	.aboutbox1 .abouttext{width:calc(410vw / 19.2);}
	.abouttitle h3{padding-right:calc(20vw / 19.2);}
	.iconbox a{display:inline-block;width:calc(70vw / 19.2);height:calc(70vw / 19.2);margin:calc(20vw / 19.2) calc(17vw / 19.2);}
	.abouttext2{width:calc(530vw / 19.2);}


	/* video 	page */
	.vpage .indexblock2{padding:calc(140vw / 19.2) 0 calc(80vw / 19.2) 0;}
	


	/* press  page */
	.ppage .ritem{margin-bottom:calc(80vw / 19.2);}

	
	/* contact */
	
	.contactwrap.stly1{border-radius:calc(10vw / 19.2);overflow:hidden;}
	.contactitem span img{margin-right:calc(10vw / 19.2);}


	/* contact form */
	.formline{margin:0 0 calc(14vw / 19.2) 0;}
	.formline .fsize19{margin-bottom:calc(-10vw / 19.2);}
	.formline .fsize15{margin-bottom:calc(5vw / 19.2);}
	.formline input[type=text],.formline input[type=password]{padding:calc(8vw / 19.2) 5px;}
	.formline select{padding:calc(8vw / 19.2) 5px;}
	.formline textarea{width:calc(97% - 12px);height:calc(220vw / 19.2);padding:calc(5vw / 19.2) 5px;}
	.formline #capchk{width:calc(100% - 18px);margin:0!important;text-align:center;padding:calc(10vw / 19.2) 8px!important;border-radius:calc(5vw / 19.2)!important;font-size:calc(21vw / 19.2)!important;line-height:calc(42vw / 19.2)!important;}
	.formbtn{padding: calc(20vw / 19.2) 0;margin-right:calc(10vw / 19.2);border-radius:calc(5vw / 19.2);}

	/* map */
	.contactmap{height:calc(700vw / 19.2);}

	
	/* process*/
	.processline{padding: calc(35vw / 19.2) 0;}
	.processline .processitem{height:calc(394vw / 19.2);}
	.processline .processitem:nth-child(1) img{height:calc(calc(354vw / 19.2) - 2px);box-shadow: 1px 1px calc(10vw / 19.2) rgba(0,0,0,0.5);}
	/*我是人類*/

}

/* 手機板  */
@media screen and (max-width: 1070px) {
	/*SIZE */
	html{font-size:3.2vw;}
	.menufont{}/*menu*/
	.spf2{letter-spacing:0.1rem;}/*首頁 英文小字*/
		.spf2{letter-spacing:0.1rem;}/*首頁 英文小字*/
				.spf21{letter-spacing:0.1rem;}/*首頁 英文小字*/
	.spf3{letter-spacing:-0.1rem;}/*首頁 英文大標*/
	.titlefont{position:relative;letter-spacing:0.1rem;}/*英文 標題*/
	.titlefont span{width:50%;}
	.spf4more{letter-spacing:0.1rem;}/*英文 標題*/
	.pcmw{margin-right:0;margin-left:0;}
	.pcmw2{margin-right:0;margin-left:0;}
	.centerwrapmenu{  position:relative; width:88%;height:100%;  margin:0 auto;}/*menu*/
	.centerwrap{  position:relative; width:93%;  margin:0 auto;}/*寬版*/
	.centerwrap2{  position:relative; width:84%;  margin:0 auto;}/*窄版*/
	.centerwrap .inset{margin-left:0;}
	.show400{display:block!important;}
	.hide400{display:none!important;}
	/* css 動態 */
	.mover{margin-top:calc(100vw / 6);}
	.moverright{margin-top:0;margin-right:calc(100vw / 6);}
	.moverleft{margin-top:0;margin-left:calc(100vw / 6);}

	/* 特殊共用 */
	.more{display:inline-block;padding:0 10vw;line-height:2.4!important;border-radius:100px;border:1px solid #cccccc;}
	#popin{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;}



	/*header*/
	header{position:fixed;z-index:91;width:100%;top:0;left:0;height:14vw;}
	.header{height:14vw;display:block;}
	#mlogoin{position:absolute;left:6%;top:0;height:14vw;}
	.hmicon{position:absolute;right:6%;top:2vw;height:10vw;}
	#hmicon.hmicon{left:auto;right:6%;top:2vw;height:10vw;}
	.headerin .hmicon{opacoty:0;color:#fff;}
	.headerin{position:fixed;z-index:50;top:0;left:100%;width:100%;height:100%;background:#1e1d1c;overflow:hidden;transition:all 0.5s;opacity:0;}
	.headerin.on{left:0;opacity:1;}
	.headerin.on .hmicon{opacoty:1;}
	.headerin .navitem{ position:relative;display:block;float:none;width:80%;text-align:left;height:auto;border:0;opacity:0;margin:10vh auto 3vh auto;transition:all 0.8s;}
	.headerin.on .navitem{opacity:1;margin-top:0;}	
	.navitem .naviteminline{display:none;}
	.navitemin{position:relative;top:auto;left:auto;transform:none;text-align:left;display:inline-block;}	
	.navitem.on .ch1 {    opacity: 1 !important;}
	.navitem.on .navitemin{border-bottom:1px solid #ccc;}
	.navitemin:hover .ch1{opacity:1;}
	.navitemin:hover .ch2{opacity:0;}	
	
	.headerin .navitem:nth-child(1){transition-delay: 200ms;padding-top:20vh;}
	.headerin .navitem:nth-child(2){transition-delay: 400ms;}
	.headerin .navitem:nth-child(3){transition-delay: 600ms;}
	.headerin .navitem:nth-child(4){transition-delay: 800ms;}
	.headerin .navitem:nth-child(5){transition-delay: 1000ms;}
	.headerin .navitem:nth-child(6){transition-delay: 1200ms;}
	.headerin .navitem:nth-child(7){transition-delay: 1400ms;}
	.headerin .navitem:nth-child(8){transition-delay: 1600ms;}


	/* sidebar */
	#sidebar{left:auto;right:5vw;}
	.sideitem{position:relative;height:11vw;width:11vw;margin-bottom:1.2vw;}


	/* banner 設定 */
	.bannericonwrap{top:auto;right:auto;bottom:10vw;left:6%;}
	.bannericonwrap img{width:9vw;margin-right:2vw;}


	/* indexblock2 */
	.indexblock2{padding:15vw 0;}
	.indexblock2 p.b2{width:80%;padding:15vw 10% 10vw 10%;}
	.indexblock2 .videobox{overflow:hidden;}
	.indexblock2 .videobox img{width:100%;position:relative;}
	.indexblock2 .videobox iframe{position:absolute;top:-20%;left:-1%;bottom:-20%;right:-1%;width:102%;height:140%;}
	.indexblock2 .b2line{display:inline-block;width:60%;border-bottom:1px solid #ccc;}
	.indexblock2 h2{padding:10vw 0;}
	/* pitem */
	.pitem{width:100%;margin-right:0;margin-bottom:10vw;}
	.pitem .pitembg{box-shadow:1px 1px 1.3vw rgba(0,0,0,0.5);}
	.pitem  p{margin-top:4vw;}
	.pitem .ibox{position:absolute;z-index:3;left:5%;top:4%;height:10vw;width:50%;}
	.pitem .ibox img{height:100%;margin-right:1vw;float:left;}
	.pitem:last-child{margin-bottom:0;}

	
	/* indexawardbox */
	.indexawardbox{width:100%;padding:5vw 0;}
	.indexawardbox img{width:10vw;margin:3vw 0.5vw;padding:0;}	
	.pageiconwrap img{width:10vw;margin:3vw 0.5vw;padding:0;}		
	
	/* index press */
	.ritem{float:none;width:100%;margin-right:0;margin-bottom:10vw;}
	.ritembg{width:100%;}
	.ritem:hover .ritembg{ box-shadow:1px 1px calc(10vw / 19.2) rgba(0,0,0,0.5);}
	.ritem:nth-child(3n){margin-right:0;}
	.ritem:nth-child(1) .ritembg{opacity:0;z-index:0;}

	.ritem .irtextbox{position:relative;height:auto;border-bottom:1px solid #ccc;}
	.ritem .irtextbox1{position:absolute;top:0;left:0;width:100%;height:100%;}
	.ritem .irtextbox1 p{position:absolute;bottom:0;left:0;width:75%;}
	.indexdotwrap{position:relative;}
	.indexdotwrap div{width:3vw;height:3vw;margin:0 3vw;}


	/*footer*/
	.footerbottom{width:88%;;margin:0 auto;border-top:1px solid #333;}
	/* ############################################# */
	/* about  */
	.abouttext{width:100%;float:none;margin-right:0;}
	.abouttext .txt1{margin-right:0;letter-spacing: -0.1rem;}
	.aboutimg{width:100%;float:none;}
	.aboutbox::after{  content:'';  display:table;  clear:both;}
	.aboutsign{width:36%;}
	.abawardlist p{float:none;width:100%;margin-left:0%;margin-right:0%}

	/*tag */
	.tagbox span{margin:0 1vw;padding:0 2vw;}


	/* pitem */


	/* iicon */
	.iiconbox{width:90%;}
	.iiconbox a{width:8vw;height:8vw;margin:2vw 0.5vw;}
	.iiconbox a img{width:100%;}
	/* ivideo */
	.vpage .indexblock2{padding:10vw 0 10vw 0;}
	.ivideoitem{position:relative;overflow:hidden;}
	.ivimgbox{position:relative;width:100%;box-shadow:1px 1px 10px rgba(0,0,0,0.6);}
	.ivtextbox{position:relative;width:100%;}
	.ivideoitem:nth-child(2n+1){text-align:left;}
	.ivideoitem:nth-child(2n+1) .ivtextbox{bottom:auto;left:auto;}
	.ivideoitem:nth-child(2n+1) .ivimgbox{margin-right:0;margin-left:0;}
	.ivideoitem:nth-child(4n+1){text-align:left;}
	.ivideoitem:nth-child(4n+1) .ivtextbox{bottom:auto;right:auto;left:auto;}
	.ivideoitem:nth-child(4n+1) .ivimgbox{margin-right:0;margin-left:0;}
	.ivimgbox iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
	.ivtextbox span{display:block;width:50%;border-top:1px solid #ccc;}

	/* press  page */
	.ppage .ritem{margin-bottom:15vw;}


	/* contact form */
	#contactform{position:relative;}
	#contactform .split2{width:100%;float:none;}

	.formline{position:relative;margin:0 0 4vw 0;}
	.formline .fsize19{margin-bottom:-2vw;}
	.formline .fsize15{margin-bottom:1vw;}
	.formline::after{  content:'';  display:table;  clear:both;}
	.formline input[type=text],.formline input[type=password]{width:calc(100% - calc(2vw + 2px));padding:1vw 1vw;}
	.formline select{width:calc(100% - 2px);padding:1vw 1vw;border:1px solid #BFBFBF;background:#fff;}
	.formline textarea{width:calc(100% - calc(2vw + 2px));height:30vw;padding:1vw 1vw;}
	.formline #capchk{width:calc(100% - 18px);margin:0!important;text-align:center;padding:0 calc(8vw / 6)!important;font-size:3.6vw!important;line-height:9vw!important;border-radius:0!important;}
	.formbtn{width:48%;padding: 2.5vw 0;margin-right:4%;text-align:center;float:left;}
	.formbtn:nth-child(2){margin-right:0;}

	.contactitem{width:100%;float:none;}
	.contactitem::after{  content:'';  display:table;  clear:both;}
	.contactitem img{float:left;width:13%;margin-right:4vw;}
	/* map */
	.contactmap{height:100vw;}










	/* video page */
	#videowrap .ivideoitem{margin-bottom:calc(30vw / 6);}
	/* video  inpage */
	.videowrap iframe{width:100%;height:60vw;}
	.vback{display:inline-block;float:none;margin:10vw auto;width:36vw;padding:1vw 0;text-align:center;;border-radius:15vw;}


	.videoitem{position:relative;margin:calc(30vw / 6) 0;height:auto;}
	.videoitem iframe{position:relative;width:100%;height:57vw;box-shadow:1px 1px 2vw rgba(0,0,0,0.5);}
	.videoitem .videotext{position:relative;top:auto;transform: none;width:auto;}
	.videoitem:nth-child(2n+1) .videotext{right:auto;}
	.videoitem:nth-child(2n) .videotext{left:auto;}
	.videoitem:nth-child(2n) iframe{margin-left:0;}
	/* press */
	.pressitem{width:48%;margin:5vw 4% 5vw 0;float:left;height:85vw;}
	.pressitem:nth-child(2n){margin-right:0;}
	.pressitem img{width:100%;}
	.pressitem p.title{text-align:center;margin-top:3vw;}
	
	/* process*/
	.processline{padding:0;}
	.processline::after{  content:'';  display:table;  clear:both;}
	.processline .processitem{display:inline-block;height:auto;margin-bottom:calc(35vw / 6);}
	.processline .processitem:nth-child(1){float:none;}
	.processline .processitem:nth-child(1) img{height:auto;width:calc(100% - 2px);border:1px solid #fff;box-shadow: 1px 1px 10px rgba(0,0,0,0.3);}
	.processline .processitem:nth-child(2){float:none;}
	.processline .processitem:nth-child(2) img{height:auto;width:100%;}


}