@charset "utf-8";
/* font1 Afacad Flux */
.font_1{  font-family: "Afacad Flux", sans-serif;  font-optical-sizing: auto;  font-weight: 300;  font-style: normal;  font-variation-settings:    "slnt" 0;	}
.font_1.w900{  font-weight: 900;}
.font_1.w700{  font-weight: 700;}
.font_1.w600{  font-weight: 600;}
/* font2 Host Grotesk */
.font_2{  font-family: "Host Grotesk", sans-serif;  font-optical-sizing: auto;  font-weight: 300;  font-style: normal;}
.font_2.w600{  font-weight: 600;}
/* font3 Cal Sans */
.font_3{  font-family: "Cal Sans", sans-serif;  font-weight: 400;  font-style: normal;}
/* font4 Aoboshi One */
.font_4{  font-family: "Aoboshi One", serif;  font-weight: 400;  font-style: normal;}
.xblur{  backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px); color: #000;}

/*基礎框架 */
.section{position:relative; max-width:1920px; margin:0 auto;overflow:hidden;} /*限制 1920寬 */
.section.oh{overflow:hidden;}
.centerwrapmenu{  position:relative; width:90%;  margin:0 auto;height:100%;}/*menu*/
.centerwrap{  position:relative; width:90%;  margin:0 auto;}/*寬版*/
.centerwrap2{  position:relative; width:86%;  margin:0 auto;}/*窄版*/
/*縮小版 1520==內縮  */
.centerwrapin{  position:relative; width:88%;  margin:0 auto;}/*窄版*/
.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 0.5s;transform:translateY(4rem);opacity:0;}
.mover.far{margin-top:10rem;}
.mover.delay1{transition-delay:0.5s;}
.mover.delay2{transition-delay:1s;}
.mover.flip{transition: all 1s;transform: rotateY(-180deg);}
.mover.moverleft{transform:translateX(-4rem);}
.moverright{margin-top:0;margin-left:-15rem;opacity:0;}
.moverleft.r{margin-top:0;margin-left:auto;margin-right:-15rem;opacity:0;}/*原來在右邊的*/
.mover.on{transform:translateY(0);opacity:1;}
.mover.flip.on  img{transform: rotateY(0deg);}
.mover.moverleft.on{transform:translateX(0rem);}
.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;}
.fcolor5f5d5d{color:#5f5d5d;}
.fcolor332c2b{color:#332c2b;}
.fcolor474443{color:#474443;}
.fcolor008bec{color:#008bec;}

/*SIZE */
html{font-size:19.2px;line-height:1.4;letter-spacing:0;}/* 等於中間的 1vw */
.fbold{font-weight:bold;}
.fsize150{font-size:7.9rem;line-height:1.18;}
.fsize140{font-size:7.36rem;line-height:1.5;}
.fsize130{font-size:6.84rem;line-height:1.5;}
.fsize120{font-size:6.3rem;line-height:1.5;}
.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;}/*設定相等於字高*/
.fontss{line-height:0.95!important;}/*設定小於字高*/
.fontsss{line-height:0.9!important;}/*設定小於字高*/
.inbannertext.fonts{line-height:0.8!important;}
.fonts2{line-height:1.1!important;}/*設定相等於1.2倍 字高*/
.fonts3{line-height:1.2!important;}/**/
.fonts4{line-height:1.4!important;}/**/
.fontl{line-height:2!important;}/*設定相等於字高*/
.fontl2{line-height:2.4!important;}/*設定相等於字高*/
.tspace1{letter-spacing:0.1rem;}
.tspace2{letter-spacing:0.2rem;}
.tspace3{letter-spacing:0.3rem;}
/* bgcolor */
.bgcolorfff{background:#fff;}
.bgcolor000{background:#000;}
.bgcolor22{background:#222;}
.bgcolor1e1d1c{background:#1e1d1c;}
.bgcolor08080a{background:#08080a;}
.bgcolor4065BC{background:#4065BC;}
.bgcolorF6F5F3{background:#F6F5F3;}
.bgcoloreeeeef{background:#eeeeef;}
.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;}
.bgcolor091720{background:#091720;}
.bgcolor747474{background:#747474;}
.bgcoloreeeeee{background:#eeeeee;}
.bgcolorfefefe{background:#fefefe;}
.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) ################## */
.z0000{z-index: -1!important;}
.z000{z-index: 0!important;}
.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%;margin:auto auto;}
.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;}
.vpad120{padding:6rem 0;}
.vpad140{padding:7rem 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:5.1rem;width:100%;}
header .section{height:100%;}
.headerbg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;}
.menubd{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;height:100%;overflow:hidden; max-width:1920px;}

.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;min-width:4rem;margin:0 1rem;}
.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:0;color:#332c2b;}
.navitemin p{letter-spacing:1px;color:#332c2b;font-weight:600;position:absolute;top:0;width:140%;left:-20%;text-align:center;}
.index .navitemin h1{color:#fff;transition:all 0.5s;}
.index .navitemin p{color:#fff;transition:all 0.5s;}
.index .navitemin h1.on{color:#000;}
.index .navitemin p.on{color:#000;}
.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;}	 

/* 內頁共用 */
.inbanner{min-height:11rem;}
.inbanner .inbtext{top:30%;left:50%;transform:translate(-50%,-50%);}
.inpagetitle{border-bottom:1px solid #b9b8b8;}
.inpagetitle.no{border-bottom:0;}
.inpagetitle span{display:inline-block;padding-right:1rem;margin-bottom:-30%;}
.tagselect{margin:0 4rem;color:#9e9e9e;}
.tagselect.on{color:#5a5a5a;}
.relatedblock{}
.relatedblock .line{position:absolute;top:0;left:0;width:100%;height:50%;border-bottom:1px solid #aaa;}
.relatedblock span{display:inline-block;padding:0 3rem;background:#fff;}
.relatedblock.learn span{background:#091720;}
/* 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:3.35rem;float:left;margin-right:0.5rem;}
.indexbannertext{position:absolute;bottom:40px;left:5%;width:80%;z-index:8;}
*/

/* index */
.ilogo{filter: invert(1) brightness(2);}
.ilogo.on{filter:none;}
.centerwrapmenu.index{border-bottom:1px solid rgba(255,255,255,0.5);transition:all 2s ease;height:calc(100% - 1px);}
.centerwrapmenu.index.scroll{border-bottom:1px rgba(255,255,255,0);}


.banneritem{top:0;left:0;width:100%;height:100%;}
.bannericonwrap{bottom:0;left:0;width:100%;height:6%;}
.bannericonwrap span{display:inline-block;height:0.15rem;width:2.5rem;margin:0 0.3rem;background:rgba(255,255,255,0.5);transition:all 1s ease;}
.bannericonwrap span.on{background:rgba(255,255,255,1);}
.banneritem{opacity:0; transition:all 1s;overflow:hidden;}
.banneritem.show{opacity:1;}
.banneritem.on{opacity:1;}
.banneritem img{height:100%;width:100%;}
.banneritem p{left:4.5rem;bottom:3.5rem;opacity:0;transform:translateX(-10rem);filter:blur(0.5rem);;transition:all 2s ease;transition-delay:1s;}
.banneritem.on p{transform:translateX(0);filter:blur(0);opacity:1;}
.banneritem h2{left:50%;top:50%;transform:translate(-50%,-50%); transition:all 1.5s;white-space:nowrap;}
.banneritem video{height:100%;width:100%;}
.b3text{bottom:0.4rem;right:0;}
#ib5block{max-height:100vh;overflow:hidden;position:sticky;top:0;left:0;}
.ib50{top:0;left:0;height:100%;width:100%;overflow:hidden;}
.ib50 .split3{position:relative;height:100%;width:29%;float:left;overflow:hidden;}
.ib50 .split3:nth-child(2){width:42%;}
.ib50 .split3 .bg{width:100%;height:100%;top:0;left:0;}
.ib50 .split3:nth-child(1) .bg{transform:translateX(-100%);}
.ib50 .split3:nth-child(3) .bg{transform:translateX(100%);}
#fadscreenxm{top:0;left:0;width:100%;}
#ib5block .top{transform:translateY(-100%);}
.ib5wrap{top:0;left:0;height:100%;width:100%;overflow:hidden;}
.ib5wrap .split3{position:relative;height:100%;width:29%;float:left;overflow:hidden;}
.ib5wrap .split3:nth-child(2){width:42%;}
.ib5wrap .split3 .top{}
.ib5wrap .split3:nth-child(1) .top{left:18%;width:82%;top:2rem;height:40%;}
.ib5wrap .split3:nth-child(1) .top img{height:3rem;margin:0 0.3rem 1rem 0;}
.ib5wrap .split3:nth-child(3) .top{right:18%;width:72%;bottom:2rem;}
.ib52 {backdrop-filter: blur(0.2rem);  -webkit-backdrop-filter: blur(0.2rem); }
.ib52 .bg{top:0;left:0;width:100%;height:100%;opacity:0;}
/*
.ib5wrap{top:0;left:0;height:100%;width:100%;overflow:hidden;}
.ib5wrap .split3{position:relative;height:100%;width:29%;float:left;overflow:hidden;}
.ib5wrap .split3:nth-child(2){width:42%;}
.ib5wrap .split3 .bg{width:100%;height:100%;top:0;left:0;}
.ib5wrap .split3:nth-child(1) .bg{transform:translateX(-100%);}
.ib5wrap .split3:nth-child(3) .bg{transform:translateX(100%);}
.ib5wrap .split3 .top{}
.ib5wrap .split3:nth-child(1) .top{left:18%;width:82%;top:2rem;transform:translateY(-100%);height:40%;}
.ib5wrap .split3:nth-child(1) .top img{height:3rem;margin:0 0.6rem 1rem 0;}
.ib5wrap .split3:nth-child(3) .top{right:18%;width:72%;bottom:2rem;transform:translateY(-100%);}
*/
.banner2icon span.box{display:inline-block;height:0.15rem;width:10rem;margin:0;background:rgba(255,255,255,1);transition:all 1s ease;}
.banner2icon span span{top:0;left:0;height:100%;width:6rem;background:#51a5e5;transition:all 1s ease;}
.ibanner2wrap{overflow:hidden;}
.ibanner2wrap .bg{height:30rem;}
.ibanner2wrap .bg img{height:100%;}
.ibanner2wrapin{height:100%;width:130%;top:0;left:0;transition-duration:0s;}
.ibanner2wrapin.move{transition-duration:1s;}
.ibanner2item{display:inline-block;height:100%;margin-right:1rem;float:left;}
.ibanner2item img{height:100%;}
.ibanner2item .text{bottom:5%;left:8%;width:84%;height:auto;}
.ibanner2item .top{top:4%;right:4%;width:92%;height:auto;text-align:right;}
.ibanner2item .top img{height:2rem;margin:0 0.1.5rem;}
/* project */
.pitemwrap{position:relative;}
.pitemwrap::after{  content:'';  display:table;  clear:both;}
.pitem{position:relative;float:left;width:calc(100% / 3);overflow:hidden;;}
.pitem .ptext{position:absolute;bottom:1rem;left:1.5rem;}
.pitem .pbg{position:relative;opacity:0;transition:all 0.3s;}
.pitem:hover .pbg{opacity:1;}
.pitem .pimg{position:absolute;top:0;left:0;}
.awardiconbox{position:absolute;top:1.2rem;right:-4rem;opacity:0;transition:all 0.5s;transition-delay:0.5s;text-align:right;height:2.2rem;}
.pageawardiconbox{text-align:left;height:2.6rem;}
.pageawardiconbox img{height:100%;margin-right:1rem;}
.pitem.on .awardiconbox{right:1.2rem;opacity:1;}
.awardiconbox img{height:100%;margin:0 0.1rem;}

/*
.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:1.5rem;margin-top:1.5rem;}
.pitemtitle{border-bottom:1px solid #999;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.2);}
.pitem:hover .pitembg{ box-shadow:0.2rem 0.2rem 0.8rem rgba(0,0,0,0.4);}
.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:3.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:43rem;}
.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;}
*/
/* video page */
.videobox{}
.videobox iframe{position:absolute;width:100%;height:100%;top:0;left:0;box-shadow:0.5rem 0.5rem 1rem rgba(0,0,0,0.7);}
.videobox .bgline{position:absolute;width:200%;top:9%;height:82%;margin-left:-50%;background:#a1a1a1;}
/* press  page */
.presswrap:after{  content:'';  display:table;  clear:both;}
.pressbox{width:25%;float:left;margin:0;overflow:hidden;background:#cccccc;}
.pressbox .pic{position:absolute;top:0;left:0;}
.pressbox .text{position:absolute;bottom:1rem;left:-3rem;opacity:0;transition:all 1s;transition-delay:1s;}
.pressbox.on .text{left:1.5rem;opacity:1;}
/* contact */
#contactform{position:relative;}
#contactform .split2{width:38%;float:left;margin-right:24%;}
#contactform .split2:nth-child(2){margin-right:0%;}
.formline{position:relative;margin:1.5rem 0;}
.formline.line{border-bottom:1px solid #aaa;margin-bottom:3rem;}
.formline::after{  content:'';  display:table;  clear:both;}
.formline.line p{width:35%;float:left;}

.formline input[type=text],.formline input[type=password]{width:65%;padding:0;border:none;background:#fff;float:left;}
.formline select{width:65%;padding:0;border:none;background:#fff;float:left;}
.formline textarea{width:calc(100% - 0.6rem);height:8rem;padding:0.25rem 0.25rem;border:1px solid #ccc;}
.formline #capchk{width:100%;margin:0!important;text-align:center;padding:0.5rem 0!important;border-radius:0.3rem;border:1px solid #aaa;}
.formbtn{width:100%;padding:0.5rem 0;text-align:center;border-radius:0.3rem;}
/* map */
.contactmap{height:35rem;}
.contactmap iframe{width:100%;height:100%;}

/*服務流程 和  得獎紀錄  */
.scrolllist{}
.scrollitemwrap{padding-bottom:3rem;}
.scrollitem{}
.scrollitem::after{  content:'';  display:table;  clear:both;}
.scrollitem .split3{position:relative;width:47%;float:left;min-height:1rem;transition:all 0.5s;}
.scrollitem .split3:nth-child(1){opacity:0;}
#servicebox .scrollitem .split3:nth-child(1){opacity:1;}
.scrollitem .split3:nth-child(2){width:6%;}
.scrollitem .split3:nth-child(3){opacity:0;}
.scrollitem .split3.on:nth-child(3){opacity:1!important;}

.scrolllist.type2 .scrollitem .split3:nth-child(1){width:28%;}
.scrolllist.type2 .scrollitem .split3:nth-child(2){width:6%;}
.scrolllist.type2 .scrollitem .split3:nth-child(3){width:66%;}
.scrolllist.type2 .scrollitem .split3 img{height:3.5rem;margin:0 0.5rem 1rem 0.5rem;}
.scrolllist.type2 .scrollitem .split3 .abs{top:0;left:0;width:100%;}
.scrollitem .split2:nth-child(1){position:relative;width:15%;float:left;min-height:1rem;transition:all 0.5s;}
.scrollitem .split2:nth-child(2){position:relative;width:85%;float:left;min-height:1rem;transition:all 0.5s;}
.scrolldot{position:absolute;top:calc(0.4rem + 0.25rem);left:50%;transform:translateX(-50%);width:0.5rem;height:0.5rem;border-radius:5rem;background:#cccccc;transition:all 0.5s;}
.scrollitemwrap.on .split3:nth-child(1){opacity:1;}
.scrollitemwrap.on .split3:nth-child(3){opacity:1;}
.scrollitemwrap.on .scrolldot{top:calc(0.4rem + 0.1rem);width:0.8rem;height:0.8rem;border-radius:5rem;background:#362b2f;}



.scrollboxwrap{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;}
.scrolllist.type2 .scrollboxwrap{left:31%;}
.scrollbox{position:absolute;top:1rem;left:0;height:calc(100% - 1rem);}
.scrollbox .light{position:absolute;top:0;left:-1px;width:0;height:100%;border-right:1px solid #ddd;}
.scrollbox .scrollline{position:absolute;top:0;left:-1px;width:0;border-right:1px solid #999;}
.scrollline{transition:all 0.5s;}

/* award */
.awardlist{}
.awardlist img{height:3.5rem;margin:2rem 0.6rem;}
/* about */
.aboutbox{width:100%;height:100%;top:0;left:0;}
/*footer*/
footer{overflow:hidden;}
.footertop img{height:3.2rem;margin:0 0.1rem;}
.footerbottom{position:relative;margin:0 auto;z-index:1;border-top:1px solid #a1a1a1;}
footer.abs{left:0;bottom:0;}
footer .footertop img{margin:0 0.1rem;}
/* ############################################# */

/* 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:3.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;}
*/



/* 1920內 全尺寸之物件 */
@media screen and (max-width: 1920px) {
	html{font-size:1vw;}		
	/* ############################################# */
	/* about us */




}

/* 手機板  */
@media screen and (max-width: 1070px) {
	.scrollitemwrap{padding-bottom:1rem;}
	/*SIZE */
	html{font-size:3vw;}
	.inbanner .inbtext{top:50%;left:50%;transform:translate(-50%,-50%);}
	.pageawardiconbox{text-align:left;height:1.3rem;}
	.pageawardiconbox img{height:100%;margin-right:0.5rem;}
	.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:88%;height:100%;  margin:0 auto;}/*menu*/
	.centerwrap{  position:relative; width:88%;  margin:0 auto;}/*寬版*/
	.centerwrap2{  position:relative; width:88%;  margin:0 auto;}/*窄版*/
	.centerwrapin{ width:100%; }/*窄版*/
	.centerwrap .inset{margin-left:0;}
	.show400{display:block!important;}
	.show400.line{display:inline-block!important;}
	.hide400{display:none!important;}
	/* css 動態 */
	.mover.far{margin-top:2rem;}
	.w40{width:100%;margin:auto auto;}
	/* 特殊共用 */
	/*
	.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%;}
	*/
	/* 內頁共用 */
	.inbanner{min-height:4.5rem;}
	.tagselect{margin:0 1.5rem;}
	/*header*/
	header{position:fixed;z-index:91;width:100%;top:0;left:0;height:10vw;}
	.header{height:10vw;display:block;}
	/*.headerbg{opacity:1!important;}*/
	.hmicon{position:absolute;right:0;top:0;height:100%;}
	.hmicon .on{opacity:1;}
	.hmicon .off{opacity:0;position:absolute;top:0;right:0;}
	.headerin .hmicon{opacoty:0;color:#fff;}
	.headerin{position:fixed;top:0;left:100%;width:100%;height:100%;background:#091720;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:90%;text-align:left;height:auto;border:0;opacity:0;margin:10vh auto 1.5vh auto ;transition:all 0.5s;}
	.headerin.on .navitem{opacity:1;margin-top:0;}	
	.headerin .inlogo{position:absolute;top:0;left:0;height:10vw;}
	.headerin .inx{position:absolute;top:0;right:5vw;height:10vw;}	
	.navitem.on .ch2 {    opacity: 0 !important;}	
	.navitem.on .ch1 {    opacity: 1 !important;}
	.navitem .naviteminline{display:none;}
	.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;}
	.navitem.on .navitemin{}
	.navitemin h1{width:100%;text-align:left;color:#fefefe;letter-spacing:0;}
	.navitemin p{letter-spacing:0.1rem;position:absolute;top:0;width:100%;left:0;text-align:left;color:#fefefe;}
	.navitemin:hover .ch1{opacity:1;}
	.navitemin:hover .ch2{opacity:0;}	
	 .index .navitemin h1.on{color:#fff;}
	 .index .navitemin p.on{color:#fff;}	
	.headerin .navitem:nth-child(1){transition-delay: 200ms;padding-top:18vh;}
	.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;}
	.headerin  .centerwrap{position:absolute;left:5%;bottom:0;border-top:1px solid #747c81;padding:3vw 0;}
	.headerin  .centerwrap img{height:7vw;margin: 0 0.1rem;}
	/* index */
	/*
	.banneritem{top:0;left:0;width:100%;height:100%;}
	.bannericonwrap{bottom:0;left:0;width:100%;height:6%;}
	.bannericonwrap span{display:inline-block;height:0.15rem;width:2.5rem;margin:0 0.3rem;background:rgba(255,255,255,0.5);transition:all 1s ease;}
	.bannericonwrap span.on{background:rgba(255,255,255,1);}
*/
	.banneritem p{left:2rem;bottom:4.5rem;}
	
/*
	.banneritem.show{overflow:hidden;}
	.banneritem h2{left:50%;top:50%;transform:translate(-50%,-50%); transition:all 1.5s;}
	*/
	.banneritem video{position:absolute;height:100%;width:400%;left:50%;top:50%;transform:translate(-50%,-50%);}
	.ibanner2wrap .bg{display:none;}
	.ibanner2wrapin{position:relative!important;width:100%;height:auto;}
	.ibanner2wrapin .ibanner2item{display:block;position:relative;width:100%;height:auto;margin:1rem 0 1rem 0;}
	.ibanner2wrapin .ibanner2item img.rely{height:auto;width:100%;}
	.scrollitem .split2 img{height:1.3rem;margin:0 0.3rem 1rem 0.3rem;}
	.scrollitemwrap.min{padding-bottom:0;}
	#fadscreenm .top{top:0;left:0;width:100%;transform:translateY(-100%);}
	.ib52 .centerwrap .top{width:60%;}
	/*
	.b3text{bottom:0.4rem;right:0;}
	.ib5wrap{top:0;left:0;height:100%;width:100%;overflow:hidden;}
	.ib5wrap .split3{position:relative;height:100%;width:29%;float:left;overflow:hidden;}
	.ib5wrap .split3:nth-child(2){width:42%;}
	.ib5wrap .split3 .bg{width:100%;height:100%;top:0;left:0;}
	.ib5wrap .split3:nth-child(1) .bg{transform:translateX(-100%);}
	.ib5wrap .split3:nth-child(3) .bg{transform:translateX(100%);}
	.ib5wrap .split3 .top{}
	.ib5wrap .split3:nth-child(1) .top{left:18%;width:82%;top:2rem;transform:translateY(-100%);height:40%;}
	.ib5wrap .split3:nth-child(1) .top img{height:3rem;margin:0 0.6rem 1rem 0;}
	.ib5wrap .split3:nth-child(3) .top{right:18%;width:72%;bottom:2rem;transform:translateY(-100%);}
	.banner2icon span.box{display:inline-block;height:0.15rem;width:10rem;margin:0;background:rgba(255,255,255,1);transition:all 1s ease;}
	.banner2icon span span{top:0;left:0;height:100%;width:6rem;background:#51a5e5;transition:all 1s ease;}
	.ibanner2wrap{overflow:hidden;}
	.ibanner2wrap .bg{height:20rem;}
	.ibanner2wrap .bg img{height:100%;}
	.ibanner2wrapin{height:100%;width:130%;top:0;left:0;transition:all 1s ease;}
	.ibanner2item{display:inline-block;height:100%;margin-right:1rem;float:left;}
	.ibanner2item img{height:100%;}
	.ibanner2item .text{bottom:5%;left:8%;width:84%;height:auto;}
	.ibanner2item .top{top:4%;right:4%;width:92%;height:auto;text-align:right;}
	.ibanner2item .top img{height:2rem;margin:0 0.1.5rem;}
*/

	/* press  page */
	.pressbox{width:50%;}
	/* project */
	.pitem{width:100%;}
	/*contact*/
	#contactform .split2{width:100%;float:none;margin-right:0;}
	.contactmap{height:25rem;}
	/*服務流程 和  得獎紀錄  */
	.scrolldot{position:absolute;top:calc(0.4rem + 0.25rem);left:50%;transform:translateX(-50%);width:0.5rem;height:0.5rem;border-radius:5rem;background:#cccccc;transition:all 0.5s;}
	.scrollitemwrap.on .split3:nth-child(3){opacity:1;}
	.scrollitemwrap.on .scrolldot{top:calc(0.4rem + 0.2rem);width:0.6rem;height:0.6rem;border-radius:5rem;background:#362b2f;}

	.scrollboxwrap{position:absolute;top:0;left:7.5%;transform:translateX(-50%);height:100%;}
	.scrollbox{position:absolute;top:1rem;left:0;height:calc(100% - 1rem);}
	.scrollbox .light{position:absolute;top:0;left:-1px;width:0;height:100%;border-right:1px solid #ddd;}
	.scrollbox .scrollline{position:absolute;top:0;left:-1px;width:0;border-right:1px solid #999;}
	.scrollline{transition:all 0.5s;}
	/* award */
	.awardlist img{height:1.68rem;margin:1rem 0.3rem;}
	.footertop img{height:2.5rem;margin:0 0.1rem;}

}