@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Yantramanav:wght@100;300;400;500;700;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.05rem;}
.menufont{font-family:"Host Grotesk"!important;font-weight:600!important;}/*menu*/
.spf1{font-family:"Yantramanav"!important;font-weight:800!important;letter-spacing:0.1rem;line-height:0.8!important;}/*首頁 英文小字*/

.titlefont{position:relative;font-family:"Yantramanav"!important;line-height:2.4!important;font-weight:700!important;letter-spacing:0;text-align:center;}/*英文 標題*/
.titlefont.s{line-height:2!important;}/*英文 標題*/

.spf4more{font-family:"Host Grotesk"!important;font-weight:900!important;letter-spacing:0;}/*more*/


/*基礎框架 */
.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:76%;  margin:0 auto;}/*寬版*/
.centerwrap2{  position:relative; width:69%;  margin:0 auto;}/*窄版*/
.centerwrap .inset{margin-left:5%;}
.all100{position:absolute;top:0;left:0;width:100%;height:100%;}
/* pop */
#pop{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:#000;}
#popin{position:relative;z-index:2;height:100%;}
.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;}
.moverleft.r{margin-top:0;margin-left:auto;margin-right:-15rem;opacity:0;}/*原來在右邊的*/
.mover.on{margin-top:0px;opacity:1;}
.moverleft.on{margin-left:0px;}
.moverleft.r.on{margin-right:0px;}
.moverright.on{margin-left:0px;}
/* FONT */
/* color */
.fbold{font-weight:600;}
.fbbold{font-weight:900;}
.fcolor000{color:#000;}
.fcolorfff{color:#fff;}
.fcolor50{color:#505050;}
.fcolor74{color:#747474;}
.fcolor8A{color:#8A8A8A;}
.fcoloraa{color:#aaaaaa;}
.fcolorcc{color:#cccccc;}
.fcolor33{color:#333333;}
.fcolor3e3a39{color:#333;}
.fcolor474443{color:#474443;}
.fcolorf3f3f3{color:#f3f3f3;}
.fcolora1a1a1{color:#a1a1a1;}
.fcoloraebec4{color:#aebec4;}
.fcolor6b696a{color:#6b696a;}
/*SIZE */
html{font-size:20px;line-height:1.5;}/* 等於中間的 1vw */
.fbold{font-weight:bold;}
.fsize150{font-size:8.5rem;line-height:1.18;}
.fsize130{font-size:7.5rem;line-height:1.18;}

.fsize110{font-size:5.79rem;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;}
.fsize65{font-size:3.42rem;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.7;}
.fsize21{font-size:1.11rem;line-height:1.7;}
.fsize20{font-size:1.05rem;line-height:1.7;}
.fsize19{font-size:1rem;line-height:1.7;}
.fsize18{font-size:0.94rem;line-height:1.7;}
.fsize17{font-size:0.89rem;line-height:1.7;}
.fsize16{font-size:0.84rem;line-height:1.7;}
.fsize15{font-size:0.79rem;line-height:1.7;}
.fsize14{font-size:0.74rem;line-height:1.7;}

.fonts{line-height:1!important;}/*設定相等於字高*/
.inbannertext.fonts{line-height:0.8!important;}
.fonts2{line-height:1.2!important;}/*設定相等於1.2倍 字高*/
.fonts3{line-height:1.3!important;}/**/
.fontl{line-height:2!important;}/*設定相等於字高*/
.fontl2{line-height:2.8!important;}/*設定相等於字高*/

/* bgcolor */
.bgcolorfff{background:#fff;}
.bgcolor000{background:#000;}
.bgcolor22{background:#222;}
.bgcolor1e1d1c{background:#1e1d1c;}
.bgcolor08080a{background:#08080a;}
.bgcolor4065BC{background:#4065BC;}
.bgcolorF6F5F3{background:#F6F5F3;}
.bgebe7e4{background:#ebe7e4;}
.bgdbdcdc{background:#dbdcdc;}
.bgcolor3e3a39{background:#3e3a39;}
.bgcolorf2ede4{background:#f2ede4;}
.bgcolor2c2f34{background:#2c2f34;}
.bgcolor3b3f42{background:#3b3f42;}
.bgcolor323639{background:#323639;}
.bgcolor3d4246{background:#3d4246;}
.bgcolordcdddd{background:#dcdddd;}
.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;}
.vpad80{padding:4rem 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 2rem;border-radius:6rem;border:1px solid #999999;}
.more img{height:0.85rem;margin:1.1rem 0 0 0.8rem;}
.readmore{font-family:"Host Grotesk"!important;font-weight:400!important;letter-spacing:0;}/* readmore*/
.readmore img{height:0.7rem;margin:0.3rem 0 0 0.5rem;}
.sectionline{width:90%; margin:0 auto;border-bottom:1px solid #cccccc;}
.absbtm{position:absolute;bottom:0;left:0;}
/*header*/
header{position:fixed;z-index:99;top:0;left:0;height:6rem;width:100%;box-shadow:1px 1px 10px rgba(0,0,0,0.2);}
header .section{height:100%;}
.headerbg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;}
.header{position:relative;height:5rem;}
.headerin{position:relative;display:inline-block;height:6rem;z-index:1;float:right;}
.headerin .navitem{ position:relative;display:inline-block;float:left;text-align:center;height:100%;border:0;margin:0 1.75rem;}
.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:1px;color:#332c2b;}
.navitemin p{letter-spacing:2px;color:#332c2b;font-weight:600;position:absolute;top:0;width:140%;left:-20%;text-align:center;}
.naviteminline{position:absolute;opacity:0;left:-20%;bottom:0;border-top:5px solid #332c2b;width:140%;}
.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: auto;
    right: calc(60vw / 19.2);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:10rem;right:5.75rem;width:auto;z-index:9;}
.bannericonwrap img{width:5.35rem;float:left;margin-right:0.5rem;}
.indexbannertext{position:absolute;bottom:40px;left:5%;width:80%;z-index:8;}

/* index_director_text */
.all100 .centerwrap{height:100%;}
#index_director_text{position:absolute;padding-top:5rem;left:0;bottom:5.5rem;;width:40%;}/*  */


/* project */
.pitemwrap{position:relative;}
.pitemwrap::after{  content:'';  display:table;  clear:both;}
.pitem{position:relative;display:inline-block;float:left;width:32.1%;margin-right:1.8%;margin-bottom:1.5rem;margin-top:1.5rem;}
.pitemtitle{border-bottom:1px solid #BEBEBE;margin-bottom:0.8rem;}
.pitemtitle.light{border-bottom:1px solid #ccc;}
.pitembg{width:100%;box-shadow:0.2rem 0.2rem 0.5rem rgba(0,0,0,0.5);}
.pitem:hover .pitembg{ box-shadow:0.2rem 0.2rem 0.8rem rgba(0,0,0,0.6);}

.pitem:nth-child(3n){margin-right:0;}
.pitem .ibox{position:absolute;z-index:3;right:3%;top:4%;height:51px;width:50%;}
.pitem .ibox img{height:100%;margin-right:3%;float:right;}


/* indexawardbox */
.indexawardbox{width:80%;margin:0 auto;}
.awardline{width:0;border-right:1px solid #ccc;height:6rem;margin:0 auto;}
.indexawardbox img{width:5.6rem;margin:1rem 0.5rem;}
.awardtext{width:60%;margin:0 auto;}

/* 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%;margin-bottom:3rem;border-radius:1.8rem;height:46rem;}
.ritem:nth-child(3n){margin-right:0;}
.riteminbox{position:relative;padding:1.5rem 1.5rem;}
.ritembg{width:100%;overflow:hidden;}
.ritembg img{width:100%;}
.ritembg img.bg{position:relative;opacity:0;}
.ritembg img.top{position:absolute;top:0;left:0;transition:all 0.5s;}
.ritem:hover .ritembg img.top{width:110%;margin-left:-5%;margin-top:-5%;}
.readmore.fix{position:absolute;bottom:1rem;left:1.5rem;}
.readmore span{display:inline-block;float:left;}
.readmore img{display:inline-block;float:left;}
/* index video */
.videowrap{position:relative;}
.videowrap::after{  content:'';  display:table;  clear:both;}
.videobox{border-radius:2rem;}
.videobox:nth-child(2){position:relative;width:67%;}
.videobox:nth-child(2) .inbox{padding:2.3rem;}
.videobox:nth-child(2) .inbox  .videoinbox{position:relative;border-radius:1rem; overflow:hidden;}
.videobox:nth-child(2) .inbox img.z001{width:100%;position:relative;}
.videobox:nth-child(2) .inbox  video{position:absolute;top:50%;left:-5%;transform:translateY(-50%);width:110%;}
.videobox:nth-child(2) .inbox  .videobtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8%;}

.videobox:nth-child(3){position:absolute;top:0;right:0;height:100%;}
.videobox:nth-child(3) .inbox{padding:2.3rem 1.5rem;height:calc(100% - 4.6rem);}
.videobox:nth-child(3) .inbox div{position:relative;height:100%;}
.videobox:nth-child(3) .inbox img{height:100%;}
.videobox:nth-child(3) .inbox p{position:absolute;}
.videobox:nth-child(3) .inbox p.t1{top:5%;left:0;}
.videobox:nth-child(3) .inbox p.t2{bottom:0;left:0;}

/*footer*/
footer{overflow:hidden;}
.footerbottom{position:relative;width:90%;margin:0 auto;z-index:1;border-top:1px solid #a1a1a1;}
.footerbottom.in{border-top:0;}
/* ############################################# */
.inbannerwrap{position:relative;overflow:hidden;}
.inbannertext{position:absolute;top:9rem;right:10%;font-family:"Yantramanav"!important;letter-spacing:0.2rem;}

/* about  */
.abouttext1{position:absolute;font-family:"Yantramanav"!important;width:auto;top:12rem;left:10%;right:auto;letter-spacing:0.1rem;line-height:0.8!important;}
.abouttext2{position:absolute;left:10%;width:40%;bottom:4rem;}
.abouttext3{position:absolute;right:10%;width:24%;top:10rem;}
.abouttext4{position:absolute;right:10%;width:24%;bottom:10rem;font-style:italic;}
.abouttext5{position:absolute;right:46%;bottom:2rem;}
.aboutawardwrap::after{  content:'';  display:table;  clear:both;}
.aboutawardwrapin{width:68%;margin-right:6%;float:right;}
.aboutawardbox{width:94%;}
.aboutawardbox img{width:5.6rem;margin:1rem 0.5rem 1rem 0;}
.aboutlistline{display:block;border-bottom:1px solid #999;padding:2rem 0;color:#333;font-size:1.21rem;line-height:1.7;}
.aboutlistline::after{  content:'';  display:table;  clear:both;}
.aboutlistline span{display:inline-block;float:left;font-weight:bold;}
.aboutlistline span img{height:1rem;margin:0.4rem auto 0 auto;}
.aboutlistline span:nth-child(1){width:10%;}
.aboutlistline span:nth-child(2){width:8%;margin-right:2%;text-align:left;}
.aboutlistline span:nth-child(3){width:34%;margin-right:2%;text-align:left;}
.aboutlistline span:nth-child(4){width:14%;margin-right:2%;text-align:left;}
.aboutlistline span:nth-child(5){width:20%;margin-right:2%;text-align:left;}
.aboutlistline span:nth-child(6){width:6%;}
.aboutlistline:hover{background:#333;color:#fff;}
.aboutlistline:hover img{filter:  brightness(12);}
/*tag */
.tagbox{position:relative;}
.tagbox span{display:inline-block;margin:0 1.5rem;padding:0.5rem 3rem;border-radius:5rem;border:1px solid #a1a1a1;}
.tagbox span.on{background:#332c2b;color:#fff;border:1px solid #332c2b;}

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

/* contact */
#contactform{position:relative;}
#contactform .split2{width:50%;float:left;}
#contactform .split3{width:73%;float:left;}
#contactform .split4{width:23.5%;float:left;}
.formline{position:relative;margin:0.7rem 0;}
.formline::after{  content:'';  display:table;  clear:both;}
.formline input[type=text],.formline input[type=password]{width:calc(95% - 2px);padding:0.25rem 0.25rem;border-bottom:1px solid #ccc;background:#fff;    height: 2rem;
    line-height: 2rem;
    box-sizing: border-box;border-radius: 0vw!important;}
.formline select{width:calc(95% - 0.6rem);padding:0.25rem 0.25rem;border: none;border-bottom:1px solid #ccc;background:#fff;    height: 2rem;
    line-height: 2rem;
    box-sizing: border-box;border-radius: 0vw!important;}
.formline textarea{width:calc(97% - 0.6rem);height:10rem;padding:0.25rem 0.25rem;border:1px solid #ccc;}
.formline #capchk{width:calc(100% - 0.9rem);margin:0!important;text-align:center;padding:10px 8px!important;}
.formbtn{width:100%;padding:0.8rem 0;margin-right:0.5rem;text-align:center;border-radius:0.3rem;}




/* map */
.contactmap{height:30rem;}
.contactmap iframe{width:100%;height:100%;}



/* 1920內 全尺寸之物件 */
@media screen and (max-width: 1920px) {
	.sideitem{margin-bottom:-5px;}
	.sideitem img{width:75%;}
	html{font-size:1vw;}		
	/*header*/
	
	/* sidebar */

	
	/* index banner 設定 */	

	

	/*tag */

	/* pitem */

	/* indexawardbox */




	/* 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 */
	.indexdotwrap div{width:calc(16vw / 19.2);height:calc(16vw / 19.2);margin:0 calc(20vw / 19.2);}




	


	/* ############################################# */
	/* about us */



	/* 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);}

	


	/* 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.3);}
	/*我是人類*/

}

/* 手機板  */
@media screen and (max-width: 1070px) {
	.sideitem img{width:100%;}
	/*SIZE */
	html{font-size:3.2vw;}
	.menufont{}/*menu*/
	.spf2{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:92%;height:100%;  margin:0 auto;}/*menu*/
	.centerwrap{  position:relative; width:92%;  margin:0 auto;}/*寬版*/
	.centerwrap2{  position:relative; width:90%;  margin:0 auto;}/*窄版*/
	.centerwrap .inset{margin-left:0;}
	.show400{display:block!important;}
	.hide400{display:none!important;}
	/* css 動態 */


	/* 特殊共用 */
	.more{display:inline-block;padding:0 5vw;line-height:2.6!important;border-radius:100px;border:1px solid #999;}
	#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:23%;top:10%;height:18vw;}
	.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:#fff;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:6vh auto 3vh auto;transition:all 0.8s; }
	.headerin.on .navitem{opacity:1;}	

	
	
	

	
	.navitem .naviteminline{        display: block;
        position: absolute;
        opacity: 1;
        bottom: 18vw;
        border-top: 1px solid #e0e0e0;
        width: 8vw;
        left: 50%;
        transform: translateX(-50%);}	


	
	.navitemin{position:relative;top:auto;left:auto;transform:none;text-align:left;display:block;}
	.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;}	
	
	
	
	.navitem.on .navitemin{}
	.navitemin h1{width:100%;text-align:center;}
	.navitemin p{letter-spacing:0.1rem;position:absolute;top:0;width:100%;left:0;text-align:center;}
	.navitemin:hover .ch1{opacity:1;}
	.navitemin:hover .ch2{opacity:0;}	
	
	.headerin .navitem:nth-child(1){transition-delay: 200ms;padding-top:25vh;}
	.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:1.5vw;top:55%;}
	.sideitem{position:relative;height:9vw;width:9vw;margin-bottom:1vw;}


	/* banner 設定 */
	.bannericonwrap{top:15%;right:5%;bottom:auto;left:auto;}
	.bannericonwrap img{width:12vw;margin-right:1.5vw;}

	/* index_director */
	#index_director_text{top:1vh;bottom:auto;width:100%;}

	/* pitem */
	.pitem{width:100%;margin-right:0;margin-bottom:10vw;}

	.pitem  p{margin-top:0}
	.pitem .ibox{position:absolute;z-index:3;right:3%;top:4%;height:8vw;width:50%;}
	.pitem .ibox img{height:100%;margin-right:1vw;float:right;}
	.pitem:last-child{margin-bottom:0;}

	
	/* indexawardbox */
	.awardtext{width:85%;}
	.indexawardbox{width:100%;padding:5vw 0;}
	.indexawardbox img{width:12vw;margin:3vw 0.5vw;padding:0;}	
	

	/* index press */
	.ritemwrap{position:relative;width:104%;height:47rem;margin-right:-4%;overflow:hidden;}
	.ritemwrap.inpage{width:100%;height:auto;margin-right:0;overflow:visible;}
	.ritemwrapin{width:300%;transition:all 1s;}
	.inpage .ritem{position:relative;display:block;float:none;width:100%;border-radius:1.8rem;height:53rem;}
	.ritemwrapin .ritem{position:relative;display:inline-block;float:left;width:24rem;margin-right:4vw;border-radius:1.8rem;height:48rem;}
	.readmore.fix{bottom:1.5rem;left:1.5rem;}



	/* index press */

	.indexdotwrap{position:relative;}
	.indexdotwrap div{display:inline-block;background:#3d4246;width:1.5vw;height:1.5vw;margin:0 3vw;}
	.indexdotwrap div.on{background:#fff;}

	/* index video */
	.videobox{border-radius:5vw;;}
	.videobox:nth-child(1){position:relative;width:100%;margin-bottom:3vw;}
	.videobox:nth-child(1) .inbox{padding:5vw;}
	.videobox:nth-child(1) .inbox div{}
	.videobox:nth-child(1) .inbox p{position:relative;}
	.videobox:nth-child(1) .inbox p.t1{margin-bottom:8vw;}
	.videobox:nth-child(1) .inbox p.t2{}
	
	.videobox:nth-child(2){position:relative;width:100%;}
	.videobox:nth-child(2) .inbox{padding:5vw;}
	.videobox:nth-child(2) .inbox  .videoinbox{border-radius:2vw;}
	.videobox:nth-child(2) .inbox  .videobtn{width:12%;}


	/*footer*/
	.footerbottom{width:92%;;margin:0 auto;border-top:1px solid #a1a1a1;}
	.footerbottom.in{border-top:0;}
	/* ############################################# */
	/* about  */
	.abouttext1{width:100%;top:7rem;left:auto;right:5%;}
	.abouttext2m{position:relative;}
	.abouttext3m{position:absolute;top:3rem;left:5%;right:auto;width:90%;}
	.abouttext5m{position:absolute;right:13%;bottom:1rem;}
	
	.aboutawardwrap::after{  content:'';  display:table;  clear:both;}
	.aboutawardwrapin{width:90%;margin:0 5%;float:none;}
	.aboutawardbox{width:100%;}
	.aboutawardbox img{width:12vw;margin:3vw 0.5vw 3vw 0;}
	.aboutlistline{padding:1rem 0;font-size:0.7rem;line-height:1.7;}
	.aboutlistline::after{  content:'';  display:table;  clear:both;}
	.aboutlistline span{display:inline-block;float:left;font-weight:bold;}
	.aboutlistline span img{height:0.5rem;margin:1vw auto;}
	.aboutlistline span:nth-child(1){width:10%;}
	.aboutlistline span:nth-child(2){width:13%;margin-right:0%;text-align:left;}
	.aboutlistline span:nth-child(3){width:38%;margin-right:0%;text-align:left;}
	.aboutlistline span:nth-child(4){width:13%;margin-right:0%;text-align:left;}
	.aboutlistline span:nth-child(5){width:20%;margin-right:0%;text-align:left;}
	.aboutlistline span:nth-child(6){width:4%;}
	.aboutlistline:hover{background:#333;color:#fff;}
	.aboutlistline:hover img{filter:  brightness(12);}





	/*tag */
	.tagbox span{display:inline-block;margin:0.4rem 0.4rem;padding:0.15rem 1.6rem;border-radius:5rem;border:1px solid #a1a1a1;}
	.tagbox span.on{background:#332c2b;color:#fff;border:1px solid #332c2b;}


	/* 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;}
	/* inbanner */
	.inbannertext{position:absolute;top:6rem;right:6%;font-family:"Yantramanav"!important;letter-spacing:0.15rem;}
	/* press  page */
	.ppage .ritem{margin-bottom:15vw;}


	/* contact form */
	#contactform{position:relative;}
	#contactform .split2{width:100%;float:none;}
	#contactform .split3{width:100%;float:none;}
	#contactform .split4{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-bottom:1px solid #BFBFBF;background:#fff;}
	.formline textarea{width:calc(100% -  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:1vw!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:70vw;}










	/* 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%;}


}