@charset "utf-8";
/* font1 Afacad Flux */
.font_1{  font-family: "Oswald", sans-serif;   font-weight: 700;  font-style: normal;}

/* font2 Host Grotesk */
.font_2{    font-family: "Hanken Grotesk", sans-serif;  font-weight: 600;  font-style: normal;}
/* font3 Cal Sans */
.font_3{  font-family: "Cal Sans", sans-serif;  font-weight: 400;  font-style: normal;}

/* font4 Aoboshi One */
.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:88%;  margin:0 auto;height:100%;}/*menu*/
.centerwrap{  position:relative; width:88%;  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 */
body{background:#0f1f29;}
.btn{cursor: pointer;}
.section.noflow{overflow:hidden;}
.hcenter{position:absolute;top:50%;transform: translateY(-50%);}
.nomargin{margin:0!important;}

/* css 動態 */
.mover{transition: all 0.8s;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;}
.fcolorfe{color:#fefefe;}
.fcolor50{color:#505050;}
.fcolor74{color:#747474;}
.fcolor8A{color:#8A8A8A;}
.fcoloraa{color:#aaaaaa;}
.fcolorcc{color:#cccccc;}
.fcolor33{color:#333333;}
.fcolor4a{color:#4a4a4a;}
.fcolor5f5d5d{color:#5f5d5d;}
.fcolor332c2b{color:#332c2b;}

.fcolor008bec{color:#008bec;}
.fcolor25d5ff{color:#25d5ff;}
.h90{height: 90%;} 
/*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;}
.bgcolor1{background:#12121c;}/*menu bg */
.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;}
.bgcolor12121c{background:#12121c;}
.inpagebg{background: linear-gradient( 250deg, #145580 20%, #0b2d52 85%);box-shadow: inset 0 0 12rem rgba(0, 0, 0, 0.2);}
.inpagebg2{background: linear-gradient( 250deg, #004B97 , #05192E );box-shadow: inset 0 0 7rem rgba(0, 0, 0, 0.2);}
.inpagebg21{background: linear-gradient( 250deg ,  #004B97 , #121B36  );box-shadow: inset 0 0 7rem rgba(0, 0, 0, 0.2);}
.inpagebg3{background: linear-gradient( 82deg, #103369 10%, #0f0d35 75%);box-shadow: inset 0 0 7rem rgba(0, 0, 0, 0.2);}
.inpagebgr{background: linear-gradient( -250deg, #004B97, #003060);box-shadow: inset 0 0 12rem rgba(0, 0, 0, 0.2);}

.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%;}
.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:50%;transform:translateX(-50%);height:5.1rem;width:100%;max-width:1920px;}
header.index{background:rgba(18,18,28,0);transition:all 1s;}
header.index.on{background:rgba(18,18,28,1);}

header .section{height:100%;}
.headerbg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}
header.index.on .headerbg{opacity:1;}
.headerbg.in{position:absolute;top:0;left:0;width:100%;height:100%;opacity:1!important;}
.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:100%;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 1.5rem;}
.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:#fff;font-weight:600;}
.navitemin p{letter-spacing:1px;color:#fff;;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;}	 
/* sidebar */
#sidebar{position:fixed;left:calc(50% + 870px);top:60%;transform: translateY(-50%);z-index:45;}
.sideitem{position:relative;display:block;width:70px;margin-bottom:10px;}
.sideitem img{width:100%;}

/* totop */
.totopbtn{position:fixed;left:calc(50% + 870px);bottom:18%;z-index:44;width:70px;}
/* 內頁共用 */
.inpagehead{height:5.1rem;}
.inbanner{min-height:11rem;}
.inbanner .inbtext{top:50%;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%;}
.tagwrap{margin:0 5%;}
.tagselect{display:inline-block;margin:0 0.2rem;padding:	0.35rem 3rem;border-radius:5rem;font-weight:bold;border:1px solid #fefefe;color:#fefefe;background: linear-gradient(135deg, #005AB5, #003D79); box-shadow: inset 0 0 0.6rem rgba(0, 0, 0, 0.25);}
.tagselect.on{color:#000024;background:#fefefe;}
.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;box-shadow: none;}
/* 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{z-index:2;opacity:0; transition:  all 1s ease;}

.morebox{display:inline-block;width:12rem;border-radius:5rem;padding: 0.5rem 0;border:1px solid #fefefe;}
/*
.banneritem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  transform: translateX(0);
  transition: transform 1s ease;
  pointer-events: none;
}
.banneritem.on::before {
  transform: translateX(100%);
}
*/
.banneritem.on{z-index:3; opacity:1; }
.banneritem.show{opacity:1;}
.banneritem img{position:relative;height:100%;width:100%;z-index:1;}
.banneritem p.s1{left:4.5rem;bottom:3.5rem;opacity:0;transform:translateX(-10rem);filter:blur(0.5rem);;transition:all 2s ease;transition-delay:1s;}
.banneritem p.s1 span{position:absolute;top:-2rem;left:0;}
.banneritem.on p.s1{transform:translateX(0);filter:blur(0);opacity:1;}
.banneritem .s2{left:5rem;top:19%;opacity:0;transform:translateX(-10rem);filter:blur(0.5rem);;transition:all 2s ease;transition-delay:1s;}
.banneritem .s2 .bip{position:relative;}
.banneritem .s2 .bip p{height:1.53rem;position:relative;margin:2rem 0;line-height:1;}
.banneritem .s2 .bip p img{float:left; height:100%;margin-right:0.2rem;width:auto;}
/*.banneritem.on .s2{transform:translateX(0);filter:blur(0);opacity:1;}
.banneritem.on .s2 .bip p{transform:translateX(0);filter:blur(0);opacity:1;}*/
.banneritem .s2.show{
    transform:translateX(0);
    filter:blur(0);
    opacity:1;
}
.banneritem video{height:100%;width:100%;}
/* redex */
.rodexwrap{    perspective: 80rem;    width: 100%;    text-align: center;    overflow: hidden;}
.rodexbox {    position: absolute;   overflow:hidden;z-index:2;width:100%;top:50%;left:50%;opacity: 0; transform:translate(-50%,-50%); transform-origin: 50% 50%;   transition: all 1s;  border-radius: 2rem;box-shadow:0.3rem 0.3rem 0.5rem rgba(0,0,0,0.6);background:linear-gradient(105deg,#999 10%,#e8e8e8 50%, #999 90%);}
.rodexbox .upper{width:calc(100% - 1.6rem);height:calc(100% - 1.6rem);top:0.8rem;left:0.8rem;border-radius: 1.6rem;overflow:hidden;}
.rodexbox .upper img{position: absolute;width:100%;top:0;left:0;opacity:0;transition:all 0.5s;}
.rodexbox .upper img.on{opacity:1;}
.rodexbox .controlbox{ height:75%;right:2.8%;top:40%;opacity:0;transition:all 0.5s;transition-delay:0.5s;}
.rodexbox .controlbox .bg{height:100%;}
.rodexbox.center {    opacity: 1;    z-index: 9;    transform: translate3d(-50%,-50%,0) ;}
.rodexbox.center .controlbox{top:6%;opacity:1;}
.rodexbox.left {    transform: translate3d(-50%,-61%,-10rem) ;    opacity: 0.7;    z-index: 8;   }
.rodexbox.farleft{    transform: translate3d(-50%,-71%,-20rem) ;    opacity: 0.4;    z-index: 5;   }
.rodexbox.leftbk{    transform: translate3d(-50%,-83%,-30rem) ;    opacity: 0.2;    z-index: 3;   }
.rodexbox.right {    transform: translate3d(-50%,-39%,-10rem) ;    opacity: 0.7;     z-index: 8;   }
.rodexbox.farright{    transform: translate3d(-50%,-29%,-20rem) ;    opacity: 0.4;    z-index: 5;   }
.rodexbox.rightbk{    transform: translate3d(-50%,-17%,-30rem) ;    opacity: 0.2;    z-index: 3;   }
.rodexrotate{    width:3.6rem;
    height:3.6rem;
    box-sizing:border-box;

    border:0.15rem solid #fefefe;
    border-radius:50%;

    background:rgba(255,255,255,0.3);

    box-shadow:0.2rem 0.2rem 0.5rem rgba(0,0,0,0.2);

    position:absolute;
    z-index:10;
    text-align:center;}
.rodexrotate i{font-size:3.5rem;line-height:3.5rem;color:#fefefe;}
.rodexrotate.left{bottom:0;left:47%;transform:translateX(-50%);}
.rodexrotate.left i{margin-top:-0.2rem;}
.rodexrotate.right{bottom:0;left:53%;transform:translateX(-50%);}
.rodexrotate.right i{margin-top:0.2rem;}
  .rodexbox .textbox{width:100%;height:100%;top:0;left:0;}
  .rodexbox .textbox .eng{left:5%;top:5%;}
  .rodexbox .textbox .zh{left:5%;bottom:5%;}
/*.controlbtn{width:40%;}
.controlbtn.c1{left:8%;top:23%;}
.controlbtn.c2{left:50%;top:23%;}
.controlbtn.c3{left:8%;top:38.5%;}*/
 .controlbtn{width:83%;}
 .controlbtn.c1{left:6.4%;top:26%;}
 .controlbtn.c2{left:6.4%;top:46.5%;}
 .controlbtn.c3{left:6.4%;top:67%;}
.controlbtn .bg{width:100%;}
.controlbtn .top{width:100%;top:0;left:0;opacity:0;transition:all 0.5s;}
.controlbtn .top.on{opacity:1;}
/*
.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.6rem 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;}
*/
/* product */
.productwrap{position:relative;}
.productwrap::after{  content:'';  display:table;  clear:both;}
.productitem{position:relative;float:left;width:calc(100% / 4);overflow:hidden;}
.productitem .w100.abs{top:0;left:0;transition:all 0.5s;}
.productitem .ptext{position:absolute;bottom:1.8rem;left:8%;width:84%;text-align:left;}
.productitem:hover img.abs{width:110%;margin:-5%;}
/*press*/
.presswrap{position:relative;}
.presswrap::after{  content:'';  display:table;  clear:both;}
.pressitem{position:relative;float:left;width:calc(98% / 3);margin-right:1%;margin-bottom:3%;overflow:hidden;border-radius:0.5rem;box-shadow:0.3rem 0.3rem 0.5rem rgba(0,0,0,0.6);}
.pressitem .w100.abs{top:0;left:0;transition:all 0.5s;}
.pressitem .ptext{position:absolute;bottom:1.8rem;left:8%;width:84%;text-align:left;}
.pressitem:hover img.abs{width:110%;margin:-5%;}
.pressitem .cover{position:absolute;width:100%;left:0;bottom:0;top:auto; height:25%; background: linear-gradient(    to top,    rgba(0,0,0,0.35) 50%,    rgba(0,0,0,0)  );}
.pressitem:nth-child(3n){margin-right:0;}
.presswrap.index .pressitem{margin-bottom:1.5rem;}

/* case */
.casewrap{position:relative;}
.casewrap::after{  content:'';  display:table;  clear:both;}
.caseitem{position:relative;float:left;width:calc(98% / 3);margin-right:1%;margin-bottom:3%;overflow:hidden;border-radius:0.5rem;box-shadow:0.3rem 0.3rem 0.5rem rgba(0,0,0,0.6);}
.caseitem .w100.abs{top:0;left:0;transition:all 0.5s;}
.caseitem .ptext{position:absolute;top:1.8rem;left:8%;width:84%;text-align:center;}
.caseitem:hover img.abs{width:110%;margin:-5%;}
.caseitem .cover{position:absolute;width:100%;left:0;top:0; height:18%; background: linear-gradient(    to bottom,    rgba(0,0,0,0.35) 50%,    rgba(0,0,0,0)  );}
.caseitem:nth-child(3n){margin-right:0;}


/* index video */

/* video page */
.videowrap{position:relative;}
.videowrap::after{  content:'';  display:table;  clear:both;}
.videoitem{position:relative;float:left;width:calc(98% / 2);margin-right:1%;margin-bottom:2%;}
.videoitem2{position:relative;float:left;width:calc(97% / 4);margin-right:1%;margin-bottom:2%;}
.videobox{border-radius:0.5rem;background:linear-gradient(105deg,#999 10%,#e8e8e8 50%, #999 90%);box-shadow:0.3rem 0.3rem 0.6rem rgba(0,0,0,0.4); }
.videoone .videobox{border-radius:1.5rem;}
.videobox iframe{position:absolute;width:calc(100% - 0.6rem);height:calc(100% - 0.6rem);top:0.3rem;left:0.3rem;border-radius:0.5rem;}
.videoone .videobox iframe{border-radius:1.5rem;}

.vtext{width:40rem;}
.vtext1{width:19rem;}
.videoitem:nth-child(2n){margin-right:0;}
.videoitem2:nth-child(4n){margin-right:0;}
/* 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;}
*/

/* service 
.serviceline{;margin:1rem 0;}
.serviceline::after{  content:'';  display:table;  clear:both;}
.serviceline.top{border-bottom:1px solid #4a4a6a;margin:1.5rem 0;}
.serviceline .t1{display:inline-block;float:left;margin-right:0.4rem;min-height:1px;padding:1.2rem 0}
.serviceline .t1:after{  content:'';  display:table;  clear:both;}
.serviceline .t1:nth-child(1){width:2.5%;}
.serviceline .t1:nth-child(2){width:15%;border-radius:0.5rem;background:linear-gradient(80deg, #518ded 10%, #47adf5 90%);}
.serviceline .t1:nth-child(3){width:80%;border-radius:0.5rem;background:linear-gradient(95deg, #78c9fe 10%, #f9fdff 90%);}
.serviceline .t1:nth-child(4){width:0.1%;}
.serviceline.top .t1{background:none;}

.serviceline .t1 .t2{display:inline-block;width:calc(100% / 3);float:left;margin:0;text-align:center;min-height:1px;}
.serviceline .t1 .t2 .circle{display:block;height:1.7rem;width:1.7rem;margin:0.15rem auto;border-radius:2rem;background:#4c9aef;float:none;}
.serviceline .t1 .t2:nth-child(1) .circle{height:1.5rem;width:1.5rem;border-radius:2rem;margin:0.25rem auto;background:#4c9aef;}
.serviceline .t1 .t3{display:inline-block;width:calc(100% / 2);float:left;margin:0;text-align:center;min-height:1px;}
.serviceline .t1 .t3 .circle{display:block;height:1.7rem;width:1.7rem;margin:0.15rem auto;border-radius:2rem;background:#4c9aef;float:none;}

.snote{border-bottom:1px solid #4a4a6a;margin-top:3rem;padding:2rem 3%;}
.slistitem img{height:9rem;}

*/
/* =========================
   service 主容器
========================= */
.serviceline{
    display:flex;
    align-items:stretch;   /* 等高關鍵 */
    margin:1rem 0;
    gap:0.4rem;
}

/* top row */
.serviceline.top{
    border-bottom:1px solid rgba(254, 254, 254, 0.5);
    margin:1.5rem 0;
}

/* 清掉舊 float hack */
.serviceline::after{display:none;}
.serviceline .t1:after{display:none;}

/* =========================
   第一層 t1
========================= */
.serviceline .t1{
    padding:1.2rem 0;
    min-height:1px;

    /* ❌ 移除舊排版 */
    float:none;
    display:flex;

    /* 不在這裡做置中（交給內層） */
    align-items:stretch;
	
}

/* 欄位比例 */
.serviceline .t1:nth-child(1){
    flex:0 0 2.5%;
}

.serviceline .t1:nth-child(2){
    flex:0 0 15%;
    border-radius:0.5rem;
    background:linear-gradient(80deg,#518ded 10%,#47adf5 90%);
    flex-direction:column;

    justify-content:center;  /* 垂直置中 */
    align-items:center;      /* 水平置中 */
    text-align:center;	
}

.serviceline .t1:nth-child(3){
    flex:1;
    border-radius:0.5rem;
    background:linear-gradient(95deg,#78c9fe 10%,#f9fdff 90%);
}

.serviceline .t1:nth-child(4){
    flex:0 0 0.1%;
}

/* top row 不要背景 */
.serviceline.top .t1{
    background:none;
}

/* =========================
   第二層 t2 / t3（核心置中修正）
========================= */
.serviceline .t1 .t2,
.serviceline .t1 .t3{
    flex:1;

    display:flex;
    flex-direction:column;

    justify-content:center;  /* 垂直置中 */
    align-items:center;      /* 水平置中 */
    text-align:center;

    margin:0;
    float:none;
}

/* =========================
   circle
========================= */
.serviceline .t2 .circle,
.serviceline .t3 .circle{
    display:block;
    border-radius:2rem;
    background:#4c9aef;
}

/* t2 圓 */
.serviceline .t2 .circle{
    height:1.7rem;
    width:1.7rem;
    margin:0.15rem auto;
}

/* t2 第一個稍小 */
.serviceline .t2:nth-child(1) .circle{
    height:1.7rem;
    width:1.7rem;
    margin:0.25rem auto;
}

/* t3 圓 */
.serviceline .t3 .circle{
    height:1.7rem;
    width:1.7rem;
    margin:0.15rem auto;
}

/* =========================
   note / list
========================= */
.snote{
    border-bottom:1px solid #4a4a6a;
    margin-top:3rem;
    padding:2rem 3%;
}

.slistitem img{
    height:9rem;
}
/*contact*/

#contactform{position:relative;}
#contactform .split2{width:45%;float:left;margin-right:10%;}
#contactform .split2:nth-child(2){margin-right:0%;}
.formline{position:relative;margin:4rem 0 2rem 0;}
.formline.line{border-bottom:1px solid #4a4a6a;margin:1.5rem 0 3rem 0;}
.formline::after{  content:'';  display:table;  clear:both;}
.formline.line p{width:40%;float:left;}

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

/* about */
.aboutcontent{left:0;top:0;width:100%;height:100%;}
.ablock2{width:55%;padding:2.5rem;background:rgba(0,0,0,0.5);}
.afooter{left:0;bottom:0;width: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*/
.footerbottom{position:relative;margin:0 auto;z-index:1;border-top: 1px solid rgba(254, 254, 254, 0.5);}

/* ############################################# */

/* 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 */
	/* sidebar */
	#sidebar{left:auto;right:1.5rem;}
	.sideitem{width:3.6rem;margin-bottom:0.4rem;}
	.sideitem img{width:100%;}
	/* totop */
	.totopbtn{left:auto;right:2rem;width:3.6rem;}


}

/* 手機板  */
@media screen and (max-width: 1070px) {
	/*SIZE */
	html{font-size:2.7vw;}
	.menufont{}/*menu*/
	.inpagebg{background: linear-gradient( 267deg, #196191 , #0b2d52 );box-shadow: inset 0 0 7rem rgba(0, 0, 0, 0.2);}
	.inpagebg2{background: linear-gradient( 267deg, #004B97 , #05192E );box-shadow: inset 0 0 7rem rgba(0, 0, 0, 0.2);}
	.inpagebg21{background: linear-gradient( 267deg,   #004B97 , #121B36 );box-shadow: inset 0 0 7rem rgba(0, 0, 0, 0.2);}
	.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;}

	/* 特殊共用 */
	/*
	.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.4rem 0.1rem;padding:	0.3rem 1.8rem;border:1px solid #fefefe;box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.25);}

	/*header*/
	header{position:fixed;z-index:91;width:100%;top:0;left:0;height:12vw;transform:none;}
	header.index{height:14vw;}
	header.index.on{height:12vw;}
	.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: linear-gradient( 250deg, #102f64 20%, #0f0c36 85%);box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);transition:all 0.5s;opacity:0;overflow:hidden;}
	.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.5s;}
	.headerin.on .navitem{opacity:1;margin-top:0;}	
	.headerin .inlogo{position:absolute;top:5vw;left:5vw;height:10vw;}
	.headerin .inx{position:absolute;top:5vw;right:3vw;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;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 #4a4a6a;padding:4vw 0;}
	/* sidebar */
	#sidebar{right:0.6rem;}
	/* totop */
	.totopbtn{right:0.6rem;}
	/* index */
	.banneritem .s1{left:2rem;bottom:4.5rem;}
	.banneritem .s2 .bip p img{float:left; height:90%;margin-right:0.2rem;width:auto;}

	.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:3rem;margin:0 0.3rem 1rem 0.3rem;}
	.scrollitemwrap.min{padding-bottom:0;}
	#fadscreenm .top{top:0;left:0;width:100%;transform:translateY(-100%);}
	
	/* rodex */
	.rodexwrap{    perspective: 80rem;    width: 100%;    text-align: center;    overflow: hidden;}
	.rodexbox { border-radius: 1rem;}
	.rodexbox .upper{width:calc(100% - 1rem);height:calc(100% - 1rem);top:0.5rem;left:0.5rem;border-radius: 0.8rem;}
	.rodexbox .controlbox{ height:85%;right:2.8%;top:40%;opacity:0;transition:all 0.5s;transition-delay:0.5s;}

	.rodexrotate{ width:2rem; height:2rem;border:0.1rem solid #fefefe;}
	.rodexrotate.left{bottom:0rem;left: 45.5%;transform: translateX(-50%);}
	.rodexrotate.right{bottom:0rem;left: 54.5%;transform: translateX(-50%);}
	.rodexrotate i{font-size:2rem;line-height:2rem;}
	.rodexrotate.left i{margin-top:-0.3rem;}
	.rodexrotate.right i{margin-top:-0.1rem;}
/*	.rodexcover{z-index:99;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(18,18,28,0.8);}*/
		.rodexcover{z-index:99;position:absolute;top:0;left:0;width:100%;height:100%;}
	.rodexcover p{position:absolute;top:50%;left:50%;transform:translateX(-50%);}
	..rodexbg{display:none!important;}
	.rodextext{z-index:1000;position:absolute;top:2%;right:0;display:none!important;}
	
	
	
	
	/* product */
	.productitem{width:calc(100% / 2);}
	.productitem .ptext{bottom:1.5rem;left:5%;width:90%;}

	/*press*/
	.pressitem{width:100%;margin-right:0;margin-bottom:5vw;}
	.pressitem .w100.abs{top:0;left:0;transition:all 0.5s;}

	/*case*/
	.caseitem{width:100%;margin-right:0;margin-bottom:5vw;}
	.caseitem .w100.abs{top:0;left:0;transition:all 0.5s;}	
	
	/* video page */
	.videoitem{float:none;width:100%;margin-right:0;margin-bottom:5vw;}
	.videoitem2{float:none;width:100%;margin-right:0;margin-bottom:5vw;}

	.vtext{width:100%;}
	.vtext1{width:100%;}
	/* service 
	.serviceline{margin:0.5rem 0;}
	.serviceline.top{margin:1rem 0;}
	.serviceline .t1{display:inline-block;float:left;margin-right:0.3rem;min-height:1px;padding:0.4rem 0}
	.serviceline .t1:after{  content:'';  display:table;  clear:both;}
	.serviceline .t1:nth-child(1){width:0%;}
	.serviceline .t1:nth-child(2){width:24%;border-radius:0.25rem;}
	.serviceline .t1:nth-child(3){width:73%;border-radius:0.25rem;}
	.serviceline .t1:nth-child(4){width:0%;display:none;}
	.serviceline.top .t1{background:none;}
	.serviceline .t1 .t2 .circle{height:0.8rem;width:0.8rem;margin:0.35rem auto;}
	.serviceline .t1 .t2:nth-child(1) .circle{height:0.8rem;width:0.8rem;margin:0.35rem auto;}
	.serviceline .t1 .t3 .circle{height:0.8rem;width:0.8rem;margin:0.35rem auto;}
	*/
	
/* 間距縮小 */
.serviceline{
    margin:0.5rem 0;
    gap:0.3rem;
}

.serviceline.top{
    margin:1rem 0;
}

/* t1 padding 縮小 */
.serviceline .t1{
    padding:0.4rem 0;
}

/* ===== 欄位比例改手機版 ===== */

/* 左側間距拿掉 */
.serviceline .t1:nth-child(1){
    flex:0 0 0%;
}

/* 藍色區塊變寬 */
.serviceline .t1:nth-child(2){
    flex:0 0 24%;
    border-radius:0.25rem;
}

/* 內容區 */
.serviceline .t1:nth-child(3){
    flex:1;
    border-radius:0.25rem;
}

/* 右邊間距拿掉 */
.serviceline .t1:nth-child(4){
    display:none;
}

/* ===== circle 縮小 ===== */
.serviceline .t1 .circle,
.serviceline .t2 .circle,
.serviceline .t3 .circle{
    height:0.8rem;
    width:0.8rem;
    margin:0.35rem auto;
}	
.serviceline .t2:nth-child(1) .circle{
    height:0.8rem;
    width:0.8rem;
}	
	
	.snote{margin-top:1rem;padding:2rem 3%;}
	.slistitem img{height:7rem;}


	.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;}
*/
	/*內頁共用*/
	.inpagehead{height:12vw;}
	/* press  page */
	.pressbox{width:50%;}
	/* project */
	.pitem{width:100%;}
	.presswrap.index .pressitem{margin-bottom:3rem;}
	/*contact*/
	#contactform .split2{width:100%;float:none;margin-right:0;}
	.contactmap{height:40rem;}
	.contactadd{position:relative;left:auto;bottom:auto;}
	/* about */
	.ablock2{width:62%;padding:1.4rem 1.6rem;}
	.afooter{left:0;bottom:0;width:100%;}

	/*服務流程 和  得獎紀錄  */
	/*
	.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;}
	*/
}
@media screen and (orientation: landscape) and (max-width: 1070px) {
	.rodexparent{ z-index:999!important;}
	.rodexwrap{z-index:999;position:fixed!important;top:0;left:0;height:100%;width:90%;margin:0 5%;}
	.rodexbg{z-index:998;position:fixed!important;display:block;top:0;left:0;height:100%;width:100%;background:#000;}
	.rodexcover.show400{display:none!important;}
	.rodextext{display:block!important;}
}