@charset "utf-8";
html{ scroll-behavior: smooth; }
input[readonly]{ cursor: no-drop; }

.maintitle{ margin:100px 0 0 0; height:220px; display:flex;  align-items: center; justify-content: center; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.maintitle h1{ color:#fff; font-size:2.625rem; font-weight:700; text-shadow: 0 5px 5px rgba(0,0,0,0.5); text-align:center; }
.maintitle h1 .sm{ font-size:1.875rem; color:#fff; }
.maintitle.about{ background-image:url(../images/page/banner_about.jpg);  }
.maintitle.project{ background-image:url(../images/page/banner_project.jpg);  }
.maintitle.house{ background-image:url(../images/page/banner_house.jpg);  }
.maintitle.evaluate{ background-image:url(../images/page/banner_evaluate.jpg);  }
.maintitle.contact{ background-image:url(../images/page/banner_contact.jpg);  }
.maintitle.system{ background-image:url(../images/page/banner_system.jpg);  }
.maintitle.assess{ background-image:url(../images/page/banner_assess.jpg);  }
.maintitle.bulletin{ background-image:url(../images/page/banner_bulletin.jpg);  }

.header .stepClone .stepbox,
.contentblock{ max-width:1280px; margin:auto; padding:35px 20px; }

.nav{ border-bottom:1px solid #ccc; padding:0 0 20px 0; margin:0 0 40px 0; display:flex; flex-wrap:wrap; }
.nav a{ font-size:0.875rem; color:#333; margin-right:30px; position:relative; }
.nav a:after{ content:""; display:block; position:absolute; width:5px; height:5px; border-right:2px solid #333; border-top:2px solid #333; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); top: 0; bottom: 0; margin: auto; right: -15px; }
.nav span{ font-size:0.875rem; color:#18ab9f; margin-right:30px; position:relative; }
.nav span:after{ content:""; display:block; position:absolute; width:5px; height:5px; border-right:2px solid #333; border-top:2px solid #333; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); top: 0; bottom: 0; margin: auto; right: -15px; }
.nav a:last-child:after,.nav span:last-child:after{ display:none; }

.InformationBox{ border-bottom:1px solid #ccc; padding:0 0 20px 0; margin:0 0 40px 0; display:flex; flex-wrap:wrap; }
.InformationBox .nav{ border-bottom: unset; padding: unset; margin: 0 0 auto 0; }

.InformationBox .User{ margin-left: auto; gap: 10px; display: inline-flex; flex-direction: row; align-items: center; }
.InformationBox .User .TitleBox{ gap: 5px; display: inline-flex; align-items: center; }
.InformationBox .User .Title{ font-size: 0.875rem; }
.InformationBox .User .Name{ font-size: 0.875rem; font-weight: 600; }
.InformationBox .User .Logout{ font-size: 0.875rem; background: #18ab9f; line-height: 15px; margin: -2.5px 0px; padding: 2.5px 10px; gap: 5px; display: inline-flex; align-items: center; color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; cursor: pointer; border: none; }
.InformationBox .User .Logout::before{ width: 17.5px; height: 17.5px; background-image: url(../images/layout/f_icon_logout.svg); background-repeat: no-repeat; background-position: center; background-size: contain; content: ""; }

.InformationBox .User .Logout:focus,
.InformationBox .User .Logout:hover{ background-color: rgb(60, 190, 179); }

@media screen and (max-width:768px){
    .InformationBox{ gap: 10px; flex-direction: column; align-items: flex-start; }
    .InformationBox .User{ margin: 0 auto 0 0; }
}

.ars{display: block; position: relative; top: -100px; visibility: hidden;}

/*關於*/
.aboutlist{ margin:0 0 40px 0; }
.aboutlist img{ vertical-align:middle; max-width:100%; }

.aboutlist h2{ font-size:1.25rem; color:#333; margin-bottom:35px; }
.aboutlist h3{ font-size:1.125rem; color:#18ab9f; margin-bottom:20px; font-weight:500; }
.aboutlist h3 a{ font-size:1.125rem; color:#18ab9f; font-weight:500; }
.aboutlist h3 .fas{ font-size:1rem; color:#18ab9f; }
.aboutlist h3 .fab{ font-size:1rem; color:#18ab9f; }
.aboutlist h3 .far{ font-size:1rem; color:#18ab9f; }
.aboutlist p{ font-size:1.125rem; color:#333; font-weight:300; line-height:1.8; }
.aboutlist p a{ font-size:1.125rem; color:#EA7126; font-weight:300; text-decoration: underline; }
.aboutlist p .red{ color:#F00; font-size:0.875rem; line-height:1.6; display: inline-block; }
.aboutlist .img_center{ text-align:center; }
.aboutlist .img_gray{ background:#f5f5f5; padding:40px; text-align:center; }
.aboutlist .img_list{ margin:10px 0 0 0; background:#eee; }
.aboutlist .img_list .mob{ display:none; }

.aboutlist .backbtn{ text-align:center; }
.aboutlist .backbtn .btns{ display:inline-block; vertical-align:middle;  padding:0 25px; cursor:pointer; background:#fff; border:1px solid #18ab9f; position:relative; }    
.aboutlist .backbtn .btns span{ line-height:42px; color:#18ab9f; font-size:1.125rem; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; position:relative; z-index:1; }
.aboutlist .backbtn .btns:after{ content:""; display:block; position:absolute; top:0; left:0; bottom:0; margin:auto; width:0%; background:#18ab9f; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }

.preface{ background:#f5f5f5; padding:35px; line-height:1.8; color:#333; font-size:1.125rem; font-weight:300; }

.abouth1{ font-size:1.875rem; font-weight:700; color:#18ab9f; margin-bottom:30px; }
.abouttxt{ font-size:1.125rem; line-height:1.8; color:#333; }

.aboutflex{ display:flex; flex-wrap:wrap; }
.aboutflex .grids{ line-height:46px; display:block; padding:0px 25px 0px 45px; background:#2F4F4F; color:#fff; font-size:1rem; background-image:url(../images/page/icon_anchor.svg); background-repeat:no-repeat; background-position:20px center; background-size:16px; margin:5px 15px 5px 0; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; }

.a_flex{ display:flex; width:100%; }
.a_flex .a_left{ flex:1; padding:0 40px 0 0; }
.a_flex .a_right{ width:236px; }
.a_flex .a_right .imgs{ border:1px solid #ccc; width:100%; }
.a_flex .a_right .imgs img{ max-width:100%; vertical-align:middle; }
.a_flex .a_right .a_txt{ font-size:0.875rem; text-align:center; color:#333; font-weight:300; padding:10px 0 0 0; }

.a_flex.sty01 .a_left{ order:2; padding:0 0 0 40px; }
.a_flex.sty01 .a_right{ order:1; width:438px; }
.a_flex.sty02 .a_left{ order:2; padding:0 0 0 40px; }
.a_flex.sty02 .a_right{ order:1; }
.a_flex.sty03 .a_right{ width:552px; }

/*計畫*/
.projectbox{ display:flex; }
.projectbox .grids{ width:33.333334%; padding:0 5px; }
.projectbox .grids .h1{ font-size:1.5rem; font-weight:500; color:#92d0cb; text-align:center; margin-bottom:25px; }
.projectbox .grids .line{ height:18px; background:#92d0cb; position:relative; }
.projectbox .grids .line:before{ content:""; display:block; width:0; height:0; border-style:solid; border-color:transparent transparent transparent #fff; border-width:9px 0 9px 14px; position:absolute; top:0; bottom:0; left:0; margin:auto; }
.projectbox .grids .line:after{ content:""; display:block; width:0; height:0; border-style:solid; border-color:transparent transparent transparent #92d0cb; border-width:9px 0 9px 14px; position:absolute; top:0; bottom:0; right:-14px; margin:auto; z-index:1; }
.projectbox .grids .line .points{ width:40px; height:40px; background:#92d0cb; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.projectbox .grids .line .points:before{ content:""; background:#fff; width:22px; height:22px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;}
.projectbox .grids .text{ padding:0 30px; font-size:1rem; line-height:1.8; color:#333; margin-top:20px; font-weight:300; }
.projectbox .grids .text a{ color: #EA7126; font-size:1rem; text-decoration:underline; font-weight:300; }
.projectbox .grids .text .span{ color:#18ab9f; font-size:1rem; line-height:1.8; font-weight:300; }

.projectbox .grids.color01 .h1{ color:#5ebff0; }
.projectbox .grids.color01 .line{ background:#5ebff0; }
.projectbox .grids.color01 .line:after{ border-color:transparent transparent transparent #5ebff0; }
.projectbox .grids.color01 .line .points{ background:#5ebff0; }
.projectbox .grids.color01 .text .span{ color:#5ebff0; }

.projectbox .grids.color02 .h1{ color:#188de6; }
.projectbox .grids.color02 .line{ background:#188de6; }
.projectbox .grids.color02 .line:after{ border-color:transparent transparent transparent #188de6; }
.projectbox .grids.color02 .line .points{ background:#188de6; }
.projectbox .grids.color02 .text .span{ color:#188de6; }

/*住宅*/
.r_table{ display:table; width:100%; }
.r_table .r_tr{ display:table-row; }
.r_table .r_th{ display:table-cell; vertical-align:middle; padding:15px; font-size:1rem; background:#2F4F4F; color:#fff; font-weight:500; }
.r_table .r_td{ display:table-cell; vertical-align:middle; padding:15px; font-size:1rem; background:#fff; color:#333; font-weight:300; }
.r_table .r_tr:nth-child(odd) .r_td{ background:#eee; }

.toolTitle{ background:#fff; display:flex; align-items: center; margin-bottom:15px; }
.toolTitle .t1{ background:#18ab9f; color:#fff; font-size:1.125rem; padding:15px 35px; position:relative; }
.toolTitle .t1:after{ content:""; display:block; width:0; height:0; position:absolute; top:0; bottom:0; margin:auto; right:-25px; border-style:solid; border-width:5px 0 5px 10px; border-color:transparent transparent transparent #2F4F4F; }
.toolTitle .t2{ flex:1; padding:0 0 0 40px; font-size:1.125rem; color:#18ab9f; }
.toolTxt{ font-size:1rem; color:#777; font-weight:300; line-height:1.8; border-bottom: 1px dashed #ccc; padding: 0 0 15px 0; }

.downblock{ text-align:center; }
.downbtn{ display:inline-flex; align-items: center; background:#2F4F4F; padding:10px 30px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.downbtn .fas{ color:#fff; font-size:1rem; }
.downbtn span{ font-size:1.25rem; font-weight:500; color:#fff; padding:0 0 0 10px; }

/*合作*/
.coopbox{ display:flex; margin-left:-25px; }
.coopbox .grids{ width:20%; padding:0 0 0 25px; display:flex; }
.coopbox .grids .gs{ width:100%; border:1px solid #ccc; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; padding:15px; }
.coopbox .grids .gs .step{ font-size:1.125rem; background:#18ab9f; color:#fff; text-align:center; padding:10px 0; }
.coopbox .grids .gs .step .numtxt{ font-size:0.875rem; color:#fff; }
.coopbox .grids.sty .gs .step{ background:#ea7126; }
.coopbox .grids .gs .text{ padding:10px 0 0 0; }
.coopbox .grids .gs .text .t_list{ font-size:0.938rem; font-weight:300; line-height:1.8; color:#777; padding:0 0 10px 20px; position:relative; border-bottom:1px solid #ccc; margin:0 0 10px 0; }
.coopbox .grids .gs .text .t_list:before{ content:""; display:block; position:absolute; top:12px; left:5px; display:block; width:5px; height:5px; background:#333; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.coopbox .grids .gs .text .t_list:last-child{ margin:0; padding:0 0 0 20px; border:none; }
.coopbox .grids .gs .imgs{ width:120px; height:120px; margin:auto; background-position:center; background-repeat:no-repeat; background-size:80px; }

.coopBtn{ display:flex; }
.coopBtn .btns{ display: inline-flex; align-items: center; background: #2F4F4F; padding:20px; border-radius: 5px; margin-right:25px; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.coopBtn .btns .span{ font-size: 1.25rem; font-weight: 500; color: #fff; padding: 0 15px 0 10px; line-height: 100%; }
.coopBtn .btns .sm{ font-size:1rem; font-weight:300; color: #fff;  }
.coopBtn .btns .fas{ color:#fff; font-size:1rem; }

ul.cases{ margin:0 0 0 25px; }
ul.cases li{ margin:0 0 10px 0; }
.caselist{ display:flex; }
.caselist .cs01{ font-size:1rem; font-weight:500; color: #2F4F4F; padding:0 10px 0 0; margin: 0 15px 0 0; min-width:100px; position:relative; }
.caselist .cs01:after{ content:""; display:block; width:1px; height:18px; background:#ccc; position:absolute; right:0px; top:5px; }
.caselist .cs02{ font-size:1rem; font-weight:300; }
.caselist .cs02 .red{ color:#F00; font-size:0.875rem; line-height:1.6; }

.caseflex{ display:flex; margin-left:-15px; flex-wrap:wrap; }
.caseflex .grids{ width:33.33334%; padding:0 0 0 15px; display:flex; }
.caseflex .grids .gs{ width:100%; background:#eee; }
.caseflex .grids .gs .title{ padding:10px; background:#5b9cd6; color:#fff; text-align:center; font-size:1.25rem; }
.caseflex .grids .gs .text{ padding:15px; }
.caseflex .grids .gs .text .li_s{ position:relative; padding:10px 0; display:flex; align-items: center;  border-bottom: 1px solid #ccc; }

.caseflex .grids .gs .text .li_s:last-child{ border:none; }
.caseflex .grids .gs .text .li_s .ione{ font-size:1rem; white-space:nowrap; font-weight: 300; min-width:110px; color: #fff; background: #4c6a84; text-align: center; line-height: 30px; }
.caseflex .grids .gs .text .li_s .itwo{ font-size:1rem; padding:0 0 0 15px; font-weight:300; }

.qalist{ margin:0 0 20px 0; padding:0 0 20px 0; border-bottom:1px dashed #ccc; }
.qalist .q_title{ color:#18ab9f; font-size:1.25rem; margin-bottom:15px; }
.qalist .a_txt{ font-size:1rem; color:#333; font-weight:300; line-height:1.8; }

/*設計建議*/
.designText{ display:flex; width:100%; align-items: center; margin-bottom:20px; }
.designText:last-child{ margin:0; }
.designText .d_imgs{ width:320px; }
.designText .d_imgs .imgs{ width:100%; padding-bottom:63.4375%; position:relative; background-repeat: no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.designText .d_imgs .imgs .text{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; display:flex; font-size:1.5rem; color:#fff; justify-content: flex-start; align-items: flex-end; font-weight:700; padding:0 0 10px 10px; }
.designText .d_text{ flex:1; padding:0 0 0 40px; display:flex; flex-wrap:wrap; }
.designText .d_text .d_list{ border-bottom:1px solid #ccc; padding:0 0 15px 0; margin-bottom:20px; display:flex; align-items: center; width: 100%; }
.designText .d_text .d_list:last-child{ margin:0; }
.designText .d_text .d_list .d1{ width:125px; font-size:1.125rem; font-weight:700; }
.designText .d_text .d_list .d2 .arrow{ width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #18ab9f; }
.designText .d_text .d_list .d3{ flex:1; padding:0 0 0 15px; }
.designText .d_text .d_list .d3 a,.designText .d_text .d_list .d3 a .fas{ color:#18ab9f; }
.designText .d_text .d_list .d3 span{ color:#aaa; }

/*聯絡我們*/
.contactbox{ display:flex; width:100%; padding:0 0 20px 0; }
.contactbox .cTopimg{ width:50%; background:rgba(255,255,255,0.9); padding:0 40px 0 0; }
.contactbox .cTopimg .list_s{ display:flex; margin:0 0 10px 0; align-items: center; }
.contactbox .cTopimg .list_s .u_1{ width:80px; }
.contactbox .cTopimg .list_s .u_2{ flex:1; padding:0 0 0 10px; }
.contactbox .cTopimg .list_s .u_2 .input{ width:100%; background:#eee; line-height:36px; padding:0 10px; border:none; font-size:1rem; }
.contactbox .cTopimg .list_s .u_2 .textarea{ width:100%; background:#eee; padding:10px; border:none; resize:none; height:120px; font-size:1rem; }
.contactbox .cTopimg .list_s .u_2 .flextab{ display:flex; }
.contactbox .cTopimg .list_s .u_2 .flextab .f1{ flex:1; padding:0 10px 0 0; }
.contactbox .cTopimg .list_s .u_2 .flextab .f2{ width:90px; padding:0 10px 0 0; font-size:0; }
.contactbox .cTopimg .list_s .u_2 .flextab .f3{ width:20px; display:flex; align-items: center; }
.contactbox .cTopimg .list_s .u_2 .flextab .f3 *{ font-size: 0; }
.contactbox .cTopimg .list_s .u_2 .flextab .f3 .fas{ font-size:1.125rem; color:#18ab9f; }
.contactbox .cTopimg .btns-s{ display:flex; justify-content: center; padding:30px 0 0 0; }
.contactbox .cTopimg .btns-s .btn{ display:block; line-height: 36px; padding: 0 25px; color: #18ab9f; font-size: 1rem; cursor: pointer; background: #fff; border: 1px solid #18ab9f; margin:0 10px; }
.contactbox .cTopimg .btns-s .btn.colors{ border-color:#aaa; color:#aaa; }

.contactbox .cright{ padding:0 0 0 40px; width:50%; border-left:1px dashed #ccc; }
.contactbox .cright .iframes{ width:100%; padding-bottom:66%; position:relative; }
.contactbox .cright .iframes iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }

/*公告頁*/
.bulletbox{ display:flex; align-items:center; background:#f0f0f0; padding:40px; }
.bulletbox .left_img{ width:30%; padding-right:40px; }
.bulletbox .left_img .imgs{ width:100%; padding-bottom:100%; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; position:relative; z-index:5; }
.bulletbox .right_text{ width:70%; }
.bulletbox .right_text .h1{ font-size:1.5rem; margin:0 0 20px 0; }
.bulletbox .right_text .list{ display:flex; margin-bottom:20px; }
.bulletbox .right_text .list:last-child{ margin:0; }
.bulletbox .right_text .list .la{ width:20px; padding:8px 0 0 0; }
.bulletbox .right_text .list .la:before{ content:""; display:block; width:0; height:0; border-width:5px 0 5px 10px; border-style:solid; border-color:transparent transparent transparent #099;  }
.bulletbox .right_text .list .lb{ flex:1; }
.bulletbox .right_text .list .lb a{ color:#EA7126; text-decoration:underline; word-break: break-all; }

/*數位宣導*/
.digit_block{ display:flex; }
.digit_block .di_left{ width:300px; }
.digit_block .di_right{ flex:1; padding:0 0 0 60px; }

.digit_search{ background:#18ab9f; padding:15px; }
.digit_search .digit_flex{ display:flex; flex-wrap:wrap; }
.digit_search .digit_flex .di_grid{ width:100%; display:flex; margin-bottom:10px; }
.digit_search .digit_flex .di_grid .gs{ width:100%; background:#fff; border-radius:5px; padding:10px; display:flex; flex-wrap:wrap; }
.digit_search .digit_flex .di_grid .gs .h1{ font-size:1.125rem; color:#18ab9f; border-left:5px #18ab9f solid; margin-bottom:10px; padding:0 0 0 10px; width:100%; }
.digit_search .digit_flex .di_grid .gs .p_list{ padding:0 5px 5px 0; }
.digit_search .digit_flex .di_grid .gs .p_list label{ font-size:0.938rem; }
.digit_search .digit_flex .di_grid .gs .p_list:last-child{ border-bottom:none; }

.digit_search .searchbox{ margin:0 0 15px 0; background:#fff; padding:5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.digit_search .searchbox .w_flex{ display:flex; width:100%; align-items:center; }
.digit_search .searchbox .w_flex .wf01{ flex:1; padding:0 10px 0 0; }
.digit_search .searchbox .w_flex .wf02{ width:30px; }
.digit_search .searchbox .input{ background:none; border:none; width:100%; line-height:36px; height:36px; color:#333; font-size:1rem; text-indent:10px; }
.digit_search .searchbox .btns{ display:block; border:none; background:#ea7126; color:#fff; width:30px; height:30px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; cursor:pointer; }
.digit_search .searchbox .btns .fa{ color:#fff; }

.digit_nosearch{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.digit_nosearch .imgbox .img{ width:217px; margin-bottom:20px; font-size:0; }
.digit_nosearch .imgbox .img img{ width:100%; }
.digit_nosearch .imgbox .t1{ text-align:center; color:#333; font-weight:900; font-size:1.25rem; margin-bottom:10px; }
.digit_nosearch .imgbox .t2{ text-align:center; color:#777; font-size:1rem; }

.digitlist{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ccc; }
.digitlist a{ font-size:inherit; color:inherit;  }
.digitlist .dit_h1{ font-size:1.25rem; margin-bottom:10px; font-weight:bold; }
.digitlist .dit_h2{ font-size:1.125rem; color:#18ab9f; margin-bottom:10px; }
.digitlist .dit_h2 .fa{ color:#18ab9f; font-size:1rem; margin-right:5px; }
.digitlist .dit_h1:last-child,.digitlist .dit_h2:last-child{ margin-bottom:0; }
.digitlist .dit_h3{ font-size:1rem; color:#ea7126; }

.digitlist ul{ margin:0 0 0 25px; }
.digitlist ul li{ font-size:1rem; color:#333; padding:5px 0 0 0; }


.digitlist .list_mbox{ display:flex; flex-wrap:wrap; margin-left:-10px; margin-bottom:25px; }
.digitlist .list_mbox:last-child{ margin-bottom:0; }
.digitlist .grids{ padding:0 0 10px 10px; display:flex; width:25%; }
.digitlist .grids .ls{ width:100%; padding:15px; border:1px solid #ccc; }

.filterBtn{ display:none; }

.contentword .mTitlemain{ display:flex; align-items: center; margin-bottom:40px; }
.contentword .mTitlemain .titlebox{ max-width:80%; padding:0 20px; }
.contentword .mTitlemain .titlebox .bggs{ color:#fff; padding:10px 30px; font-size:1.5rem; color:#fff; font-weight:bold; background:#4ea198; border-radius: 20px 0 20px 0; -webkit-border-radius: 20px 0 20px 0; -moz-border-radius: 20px 0 20px 0; }
.contentword .mTitlemain .line{ flex:1; height:1px; border-bottom:5px #a2cdc8 dotted; }

.contentword .mList{ margin-bottom:40px; }
.contentword .mList .title_h1{ font-size:45px; color:#a8a8a8; font-weight:bold; margin-bottom:30px; display:flex; align-items:baseline; }
.contentword .mList .title_h1 .icon{ width:18px; margin-right:10px; }
.contentword .mList .title_h1 .text{ font-size:1.375rem; font-weight:bold; color:#a8a8a8; }
.contentword .mList .txtcont{ display:flex; margin-left:-25px; flex-wrap:wrap; }
.contentword .mList .txtcont .grids{ width:50%; display:flex; padding-left:25px; padding-bottom:25px; }
.contentword .mList .txtcont .grids .txtbox{ flex:1; }
.contentword .mList .txtcont .grids .imgbox{ width:45%; display:flex; flex-wrap:wrap; padding:0 0 0 10px; }
.contentword .mList .txtcont .grids.long{ width:100%; }
.contentword .mList .txtcont .grids.long .imgbox{ width:50%; }

.contentword .mList .txtcont .grids .txtbox .h2{ margin:0 0 10px 0; border:1px solid #4ea198; padding:5px 15px; border-radius:20px 0 20px 0; -webkit-border-radius:20px 0 20px 0; -moz-border-radius:20px 0 20px 0; display:inline-block; color:#4ea198; font-size:1.125rem; }
.contentword .mList .txtcont .grids .txtbox .p{ font-size:1.125rem; line-height:1.6; color:#333; }
.contentword .mList .txtcont .grids .txtbox .p ul{ margin:0 0 0 25px; }
.contentword .mList .txtcont .grids .txtbox .p ul.dec{ list-style:decimal; }

.contentword .mList .txtcont .grids .imgbox .imgs{ width:100%; text-align:center; }
.contentword .mList .txtcont .grids .imgbox .imgs img{ max-width:100%; }
.contentword .mList .txtcont .grids .imgbox .imgs .h5{ text-align:center; color:#a8a8a8; font-size:0.875rem; }
.contentword .mList .txtcont .grids .imgbox .imgs.wh-33{ width:33%; }

.contentword .mBtns{ text-align:center; padding:40px 0; }
.contentword .mBtns .backbtns{ display:inline-block; background: #ea7126; color:#fff; font-size:1.125rem; padding:0 15px; cursor:pointer; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; line-height:48px; }

/*評估系統*/
.evaluation_s{ border:1px solid #18ab9f; margin-bottom:20px; }
.evaluation_s.hidden_important{ display: none !important; }
.evaluation_s .mainh1{ background:#18ab9f; padding:20px; color:#fff; font-size:1.25rem; font-weight:bold; }
.evaluation_s .contentbox{ padding:25px; }
.evaluation_s .contflex{ display:flex; margin-left:-30px; flex-wrap:wrap; }
.evaluation_s .eva_list{ margin-bottom:15px; width:50%; padding:0 0 0 30px; }
.evaluation_s .eva_list.long{ width:100%; }
.evaluation_s .eva_list:last-child{ margin-bottom:0; }
.evaluation_s .eva_list .evaflex{ display:flex; width:100%; }
.evaluation_s .eva_list .evaflex .evaTitle{ font-size:1.125rem; color:#18ab9f; padding:5px 0 5px 10px; position:relative; }
.evaluation_s .eva_list .evaflex .evaTitle:before{ content:""; display:block; position:absolute; left:0px; top:11px; width:3px; height:16px; background:#18ab9f; }
.evaluation_s .eva_list .evaflex .evaTxt{ flex:1; padding:0 0 0 10px; }
.evaluation_s .eva_list .addflex{ display:flex; flex-wrap:wrap; margin-right:-15px; }
.evaluation_s .eva_list .addflex.line_gray{ padding:10px 0; border-bottom:1px solid #ccc; }
.evaluation_s .eva_list .addflex .padd{ padding:5px 15px 5px 0; }
.evaluation_s .eva_list .addflex .add-15{ width:15%; }
.evaluation_s .eva_list .addflex .add-25{ width:25%; }
.evaluation_s .eva_list .addflex .add-50{ width:50%; }
.evaluation_s .eva_list .addflex .add-100{ width:100%; }
.evaluation_s .eva_list .addflex .add-flex{ flex:1; }
.evaluation_s .eva_list .addflex .add-auto{ width:auto; }
.evaluation_s .eva_list .addflex .radioOneLineFlex{ gap: 5px; display: inline-flex; align-items: center; word-break: keep-all }
.evaluation_s .eva_list .addflex .radioOneLineFlex label{ gap: 5px; display: inline-flex; align-items: center; word-break: keep-all; }
.evaluation_s .eva_list .addflex .radioOneLineFlex input[type="text"]{ width: 70px; }
.evaluation_s .eva_list .addflex .add-padleft20{ padding-left:20px; }
.evaluation_s .eva_list .addflex .add-padseesaw0{ padding-top:0; padding-bottom:0; }
.evaluation_s .eva_list .red{ color: #F00; }
.evaluation_s .eva_list .input{ background:#eee; width:100%; padding:0 5px; height:30px; line-height:30px; font-size:1rem; color:#333; border:none; }
.evaluation_s .eva_list .fm_icon{ font-size:1rem; color:#ea7126 }
.addbtn,
.evaluation_s .eva_list .addbtn{ height: 30px; line-height: 30px; gap: 5px; display: inline-flex; align-items: center; justify-content: center; border: none; padding:5px 10px; background:#ea7126; font-size:0.938rem; color:#fff; cursor:pointer; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.addbtn .fa,
.evaluation_s .eva_list .addbtn .fa{ color:#fff; font-size:0.875rem; }
.delbtn,
.evaluation_s .eva_list .delbtn{ height: 30px; line-height: 30px; gap: 5px; display: inline-flex; align-items: center; justify-content: center; border: none; padding:5px 10px; background:#bd0f0f; font-size:0.938rem; color:#fff; cursor:pointer; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.delbtn .fa,
.evaluation_s .eva_list .delbtn .fa{ color:#fff; font-size:0.875rem; }
.gTable_td .addbtn,
.gTable_td .delbtn{ width: 30px; }

.evaluation_s.multipleContentbox .contentbox:nth-child(2){ padding-bottom: 15px; }
.evaluation_s.multipleContentbox .contentbox:last-child{ padding-top: 0; }
.evaluation_s.multipleContentbox .contentbox_overWrapper .contentbox{ padding-top: 0; padding-bottom: 0; }

.evaluation_s .eva_list .wordtxt{ line-height:26px; font-size:1rem; color:#333; display: inline-flex; flex-direction: row; align-items: center; }

.evaluation_s .eva_btn{ padding:40px 0 25px 0; margin: 0 auto; display:flex; justify-content: center; }
.evaluation_s .eva_btn .btns{ display:block; margin:0 10px; background:#ea7126; line-height:48px; padding:0 25px; color:#fff; font-size:1.125rem; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; cursor:pointer; border:none; }
.evaluation_s .eva_btn .msgBtn,
.evaluation_s .eva_btn .btns[disabled]{ background-color: #aaaaaa; cursor: no-drop; }

.ends .eva_btn.evaBuildStyle{ gap: 10px; flex-wrap: wrap; }
.ends .eva_btn.evaBuildStyle .btns{ margin: 0; }
@media screen and (max-width:768px){
    /* .ends .eva_btn.evaBuildStyle{ padding-bottom: 0; } */
}
@media screen and (max-width:480px){
    .ends .eva_btn.evaBuildStyle{ padding-top: 20px; flex-direction: column; text-align: center; }
}

.stepbox{ display:flex; max-width:900px; margin:auto; padding:0 0 20px 0; justify-content: center; }
.stepbox .grids{ position:relative; z-index:5; padding:5px; }
.stepbox .grids .gs{ border:1px solid #ccc; padding:20px; }
.stepbox .grids .txt{ text-align:center; color:#ccc; margin-bottom:10px;}
.stepbox .grids .txt .br{ display:block; }
.stepbox .grids .radius{ width:20px; height:20px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background:#eee; margin:auto; text-align:center; }
.stepbox .grids .radius .fa{ display:none; }

.stepbox.finish .grids.hold .gs,
.stepbox .grids.hold .gs{ border-color:#ea7126; }
.stepbox.finish .grids.hold .txt,
.stepbox .grids.hold .txt{ color:#ea7126; }
.stepbox.finish .grids.hold .radius,
.stepbox .grids.hold .radius{ background:#ea7126; }
.stepbox.finish .grids.hold .radius .f02,
.stepbox .grids.hold .radius .f02{ color:#fff; font-size:12px; display:block; line-height:20px; }

.stepbox.finish .grids .gs,
.stepbox .grids.old .gs{ background:#fff5e2; border-color:#ffae7b; }
.stepbox.finish .grids .txt,
.stepbox .grids.old .txt{ color:#ffae7b; }
.stepbox.finish .grids .radius,
.stepbox .grids.old .radius{ background:#ffae7b; }
.stepbox .grids.old .radius .f01{ color:#fff; font-size:12px; display:block; line-height:20px; }

.stepbox.finish .grids{ cursor: pointer; }
.stepbox.finish .grids .radius .f01{ display: none !important; }
.stepbox.finish .grids .radius .f02{ display: block !important; color:#fff; font-size:12px; display:block; line-height:20px; }
.stepbox.finish .fa-hand-pointer-o{ display: block !important; color: #ea7126; }

/*評估結果*/
.evaendbox{ display:flex; align-items:center; margin-bottom:60px; }
.evaendbox .leftimg{ width:56%; }
.evaendbox .leftimg .bg_img{ width:100%; padding-bottom:45.67%; position:relative; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; background-image:url(../images/page/img_fraction.svg); }
.evaendbox .leftimg .frac{ width:51.44%; position:absolute; z-index:5; bottom:0; left:0; right:0; margin:auto; background-image:url(../images/page/img_fraction_bg.svg); background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.evaendbox .leftimg .frac:before{ content:""; display:block; width:100%; padding-bottom:50%; }
.evaendbox .leftimg .frac .txt{ position:absolute; left:0; bottom:10%; right:0; margin:auto; color:#e97127; font-size:70px; font-weight:900; text-align:center; }
.evaendbox .leftimg .arrow{ width:5%; position:absolute; z-index:2; bottom:5%; left:0; right:0; margin:auto; background-image:url(../images/page/img_fraction_arrow.svg); background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; transform-origin:center bottom; }
.evaendbox .leftimg .arrow:before{ content:""; display:block; width:100%; padding-bottom:725.58%; }
.evaendbox .rightcont{ width:44%; padding:0 5%; }
.evaendbox .rightcont .graylist{ background:#f5f5f5; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; padding:15px 30px; display:flex; align-items: baseline; margin-bottom:25px; }
.evaendbox .rightcont .graylist:last-child{ margin:0; }
.evaendbox .rightcont .graylist .g1{ width:56px; font-size:1rem; }
.evaendbox .rightcont .graylist .g2{ flex:1; font-size:1.625rem; color:#20a398; font-weight:bold; padding:0 0 0 15px; }
.evaendbox .rightcont .graylist .g2 span{ font-size:inherit; color:inherit; }
.evaendbox .rightcont .graylist .g2 sup,
.evaendbox .rightcont .graylist .g2 sub{ color:inherit; }
.evaendbox.type2 .rightcont{ margin-top:auto; }
.evaendbox.type2 .rightcont .graylist .g1{ width:150px; }

.ends .eva_btn{ padding:40px 0 25px 0; display:flex; justify-content: center; }
.ends .eva_btn .btns{ display:block; margin:0 10px; background:#ea7126; line-height:48px; padding:0 25px; color:#fff; font-size:1.125rem; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; cursor:pointer; border:none; }

.endtitlebox{ padding:60px 20px 40px 20px; position:relative; 
background: -moz-linear-gradient(top,  rgba(24,171,159,0.3) 0%, rgba(255,255,255,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(24,171,159,0.3) 0%,rgba(255,255,255,1) 100%); 
background: linear-gradient(to bottom,  rgba(24,171,159,0.3) 0%,rgba(255,255,255,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d18ab9f', endColorstr='#ffffff',GradientType=0 ); }
.endtitlebox:after{ content:""; display:block; height:200px; top:0; left:0; right:0; position:absolute; margin:auto; background-image:url(../images/page/ex_bg.png); background-repeat:repeat-x; background-position:center top 20px }
.endtitlebox .lines{ text-align:center; position:relative; z-index:2; }
.endtitlebox .lines .fa{ font-size:1.25rem; color:#18ab9f; }
.endtitlebox .h3{ text-align:center; color:#5e5e5e; position:relative; z-index:2; display:flex; align-items:center; justify-content: center; margin: 0 0 5px 0; }
.endtitlebox .h3:before{ content: ""; display: block; width: 12%; height: 1px; background: #8bcfc8; margin: 0 20px 0 0; }
.endtitlebox .h3:after{ content: ""; display: block; width: 12%; height: 1px; background: #8bcfc8; margin: 0 0 0 20px; }
.endtitlebox .h1{ text-align: center; color: #18ab9f; font-size:1.75rem; font-weight: 700; margin-bottom:10px; position:relative; z-index:2; }

.evaBootomErrorAlert{ display: none; padding: 0px 25px 25px 25px; }
.evaBootomErrorAlert *{ color: #F00; }

.tag_unit{ position: relative; padding-right: 5px; }
.tag_unit sup{ font-size: 0.8em; position: absolute; top: -2.5px; right: -2.5px; }


/*評估系統 補充2024*/
.input{ background: #eee; width: 100%; padding: 0 5px; height: 30px; line-height: 30px; font-size: 1rem; color: #333; border: none; }


.evaluation_s .eva_list .input.Arrow{ color: #18ab9f; font-size: 1.125rem; line-height: 1.4; height: 26px; }
.evaluation_s .eva_list .input.Arrow,
.input.Arrow{
    background-color: #ffffff;
    overflow: hidden;
    -webkit-appearance: none;
    /* background-color: white; */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1RDlDRTZGQ0ZGRDlFRjExQjMwRkQyMTRCMzA0NjgzMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQTFFQTM2RURBMDAxMUVGQkM0MUZEQkZGQjVDNjNCMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQTFFQTM2RERBMDAxMUVGQkM0MUZEQkZGQjVDNjNCMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1RDlDRTZGQ0ZGRDlFRjExQjMwRkQyMTRCMzA0NjgzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1RDlDRTZGQ0ZGRDlFRjExQjMwRkQyMTRCMzA0NjgzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoZqEusAAACeSURBVHjaYvz//z8DNQATA5UAC4iQXLOAIkOehySguCgTiP+TgA/j8tosIL5ApCP+AnEuLoNAkgVEGoRhKXpgHwTirQQM+QLErcTEGshVv/AYBDLkKTEG3QHiPhyG4JRjIsVWfK5lwhMOZWhiW/GFH76UvQyIjyDFaBklWSQXaggouq8RzCJ4ACitTMQW3aQaBALFdM39jIOuPAIIMAAj7DE+XtOmXgAAAABJRU5ErkJggg==);
    background-position : right center;
    background-repeat: no-repeat;
    padding-right: 1.5em;
}

/* 新增按鈕 */
.evaluation_s .eva_list.eva_sticky{ padding: 0 0 0 25px; margin: 0px 0 20px -5px; position: sticky; left: 0px; }
.evaluation_s .eva_list.eva_sticky [type="button"]{ margin: 5px 15px 5px 0; }
.evaluation_s .eva_list.eva_top.eva_sticky{ padding: 0 0 0 25px; margin: 20px 0px 0px -5px; }
.evaluation_s .eva_list.eva_last.eva_sticky{ margin-bottom: 0; }

/*用電資料*/
.evaluation_s .contentbox_overWrapper{ position: relative; }
.evaluation_s .contentbox_overWrapper::before,
.evaluation_s .contentbox_overWrapper::after{ z-index: 1; width: 20px; content: ""; position: absolute; top: 0; bottom: 18px; }
.evaluation_s .contentbox_overWrapper::before{ left: 0%; background: linear-gradient( to right , #ffffff 0%, #ffffff 50%, transparent 100% ); }
.evaluation_s .contentbox_overWrapper::after{ right: 0%; background: linear-gradient( to left , #ffffff 0%, #ffffff 50%, transparent 100% ); }
.evaluation_s .contentbox_overWrapper .contentbox_overContent{ z-index: 0; overflow: auto; position: relative; }

.evaluation_s .gTable .titleTwin{ grid-template-columns: 1.0fr 1.0fr; display: grid; }
.evaluation_s .gTable .titleThreeOne{ grid-template-columns: 1.0fr 1.0fr 1.0fr; display: grid; }
.evaluation_s .gTable .itemsLeft{ margin-left: unset; padding: 0 5px 0 10px; }

.evaluation_s .gTable .gTable_td{ width: 100%; padding: 0 5px 0 10px; display: inline-flex; align-items:center; }

.evaluation_s .gTable{ width: calc( 100% + 30px ); min-width: 768px; padding-right: 5px; }
.evaluation_s .gTable .gTable_title,
.evaluation_s .gTable .gTable_tr,
.evaluation_s .gTable .gTable_total{ display: grid; }
.evaluation_s .gTable .gTable_total{ justify-items: end; }
.evaluation_s .gTable .titleColumn{ display:inline-flex; flex-direction:column; align-items: flex-start; }
.evaluation_s .gTable .titleColumn>*:first-child{ text-align: center; padding-bottom: 5px; }
.evaluation_s .gTable .titleColumn>*{ width: 100%; }
.evaluation_s .gTable .gTable_tr,
.evaluation_s .gTable .gTable_total{ padding-left: 20px; }

/* 既有建築能效評估 - 用電資料 */
.evaluation_s .gTable.gTableType1{ min-width: 768px; }
.evaluation_s .gTable.gTableType1 .gTable_title{ grid-template-columns: 40px 2.0fr 1fr 1fr 1fr 1fr 1fr; }
.evaluation_s .gTable.gTableType1 .gTable_tr,
.evaluation_s .gTable.gTableType1 .gTable_total{ grid-template-columns: 40px 2.0fr 1fr 1fr 1fr 1fr 1fr; }
.evaluation_s .gTable.gTableType1 .gTable_total{ grid-template-columns: 40px 2.0fr 1fr 1fr 1fr 1fr 1fr; }

.evaluation_s .gTable.gTableType1.view{ margin-bottom: 20px; }
.evaluation_s .gTable.gTableType1.view .gTable_title,
.evaluation_s .gTable.gTableType1.view .gTable_tr,
.evaluation_s .gTable.gTableType1.view .gTable_total{ grid-template-columns: 2.0fr 1fr 1fr 1fr 1fr 1fr; }
.evaluation_s .gTable.gTableType1.view .gTable_title .evaflex:first-child,
.evaluation_s .gTable.gTableType1.view .gTable_tr .gTable_td:first-child,
.evaluation_s .gTable.gTableType1.view .gTable_total .gTable_td:first-child{ display: none; }

/* 既有建築能效評估 - 用電資料 - 逐月&雙月(欄位+1) */
.evaluation_s .gTable.gTableElectMonth{ min-width: 768px; }
.evaluation_s .gTable.gTableElectMonth .gTable_title{ grid-template-columns: 40px 2.0fr 1fr 100px 1fr 1fr 1fr 1fr; }
.evaluation_s .gTable.gTableElectMonth .gTable_tr,
.evaluation_s .gTable.gTableElectMonth .gTable_total{ grid-template-columns: 40px 2.0fr 1fr 100px 1fr 1fr 1fr 1fr; }
.evaluation_s .gTable.gTableElectMonth .gTable_total{ grid-template-columns: 40px 2.0fr 1fr 100px 1fr 1fr 1fr 1fr; }

.evaluation_s .gTable.gTableElectMonth.view{ margin-bottom: 20px; }
.evaluation_s .gTable.gTableElectMonth.view .gTable_title,
.evaluation_s .gTable.gTableElectMonth.view .gTable_tr,
.evaluation_s .gTable.gTableElectMonth.view .gTable_total{ grid-template-columns: 2.0fr 1fr 100px 1fr 1fr 1fr 1fr; }
.evaluation_s .gTable.gTableElectMonth.view .gTable_title .evaflex:first-child,
.evaluation_s .gTable.gTableElectMonth.view .gTable_tr .gTable_td:first-child,
.evaluation_s .gTable.gTableElectMonth.view .gTable_total .gTable_td:first-child{ display: none; }

.evaluation_s .gTable.view .eva_list .evaflex .evaTitle:before{ top: 16px; }
.evaluation_s .gTable.view .eva_list .evaflex .evaTitle{ padding: 10px 0 10px 10px; }
.evaluation_s .gTable.view .gTable_td{ padding: 7px 5px 7px 10px; }
.evaluation_s .gTable.view .eva_list{ margin-bottom: 0; }
.evaluation_s .gTable.view .stickyLeft{ background-color: unset; }

.evaluation_s .gTable.view>*{ position: relative; }
.evaluation_s .gTable.view>*:nth-child(2n)::after{ background-color: rgba(0, 0, 0, 0.025); content: ""; position: absolute; top: 0px; bottom: 0px; left: 0; right: 0; z-index: -1; }


/* 既有建築能效評估 - 耗能分區 */
.evaluation_s .gTable.gTableType2{ min-width: 1660px; }
.evaluation_s .gTable.gTableType2 .gTable_title{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }
.evaluation_s .gTable.gTableType2 .gTable_tr,
.evaluation_s .gTable.gTableType2 .gTable_total{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }
.evaluation_s .gTable.gTableType2 .gTable_total{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }

.evaluation_s .gTable.gTableType2 .gTable_title .evaflex:nth-child(4),
.evaluation_s .gTable.gTableType2 .gTable_title .evaflex:nth-child(5),
.evaluation_s .gTable.gTableType2 .gTable_title .evaflex:nth-child(6),
.evaluation_s .gTable.gTableType2 .gTable_title .evaflex:nth-child(7),
.evaluation_s .gTable.gTableType2 .gTable_title .evaflex:nth-child(8),
.evaluation_s .gTable.gTableType2 .gTable_tr .gTable_td:nth-child(4),
.evaluation_s .gTable.gTableType2 .gTable_tr .gTable_td:nth-child(5),
.evaluation_s .gTable.gTableType2 .gTable_tr .gTable_td:nth-child(6),
.evaluation_s .gTable.gTableType2 .gTable_tr .gTable_td:nth-child(7),
.evaluation_s .gTable.gTableType2 .gTable_tr .gTable_td:nth-child(8),
.evaluation_s .gTable.gTableType2 .gTable_total .gTable_td:nth-child(4),
.evaluation_s .gTable.gTableType2 .gTable_total .gTable_td:nth-child(5),
.evaluation_s .gTable.gTableType2 .gTable_total .gTable_td:nth-child(6),
.evaluation_s .gTable.gTableType2 .gTable_total .gTable_td:nth-child(7),
.evaluation_s .gTable.gTableType2 .gTable_total .gTable_td:nth-child(8){ display: none;}

/* 耗能分區 - 有 展覽 */
.evaluation_s .gTable.gTableType2.showYE{ min-width: 2200px; }
.evaluation_s .gTable.gTableType2.showYE .gTable_title,
.evaluation_s .gTable.gTableType2.showYE .gTable_tr,
.evaluation_s .gTable.gTableType2.showYE .gTable_total{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }

.evaluation_s .gTable.gTableType2.showYE .gTable_title .evaflex:nth-child(4),
.evaluation_s .gTable.gTableType2.showYE .gTable_title .evaflex:nth-child(5),
.evaluation_s .gTable.gTableType2.showYE .gTable_title .evaflex:nth-child(6),
.evaluation_s .gTable.gTableType2.showYE .gTable_tr .gTable_td:nth-child(4),
.evaluation_s .gTable.gTableType2.showYE .gTable_tr .gTable_td:nth-child(5),
.evaluation_s .gTable.gTableType2.showYE .gTable_tr .gTable_td:nth-child(6),
.evaluation_s .gTable.gTableType2.showYE .gTable_total .gTable_td:nth-child(4),
.evaluation_s .gTable.gTableType2.showYE .gTable_total .gTable_td:nth-child(5),
.evaluation_s .gTable.gTableType2.showYE .gTable_total .gTable_td:nth-child(6){ display: flex;}

/* 耗能分區 - 有 營運 節數 */
.evaluation_s .gTable.gTableType2.showYO{ min-width: 2020px; }
.evaluation_s .gTable.gTableType2.showYO .gTable_title,
.evaluation_s .gTable.gTableType2.showYO .gTable_tr,
.evaluation_s .gTable.gTableType2.showYO .gTable_total{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }

.evaluation_s .gTable.gTableType2.showYO .gTable_title .evaflex:nth-child(7),
.evaluation_s .gTable.gTableType2.showYO .gTable_title .evaflex:nth-child(8),
.evaluation_s .gTable.gTableType2.showYO .gTable_tr .gTable_td:nth-child(7),
.evaluation_s .gTable.gTableType2.showYO .gTable_tr .gTable_td:nth-child(8),
.evaluation_s .gTable.gTableType2.showYO .gTable_total .gTable_td:nth-child(7),
.evaluation_s .gTable.gTableType2.showYO .gTable_total .gTable_td:nth-child(8){ display: flex;}

/* 耗能分區 - 有 全開 */
.evaluation_s .gTable.gTableType2.showYO.showYE{ min-width: 2520px; }
.evaluation_s .gTable.gTableType2.showYO.showYE .gTable_title,
.evaluation_s .gTable.gTableType2.showYO.showYE .gTable_tr{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }
.evaluation_s .gTable.gTableType2.showYO.showYE .gTable_total{ grid-template-columns: 40px 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr; }


/* 既有建築能效評估 - 免評估分區 */
.evaluation_s .gTable.gTableType3{ min-width: 768px; }
.evaluation_s .gTable.gTableType3 .gTable_title,
.evaluation_s .gTable.gTableType3 .gTable_tr{ grid-template-columns: 40px 1.0fr 1.0fr 1.0fr; }
.evaluation_s .gTable.gTableType3 .gTable_total{ grid-template-columns: 40px 1.0fr 1.0fr 1.0fr; }

/* 既有建築能效評估 - EUI計算 */
.evaluation_s .gTable.gTableTypeAEnd{ min-width: 1200px; }
.evaluation_s .gTable.gTableTypeAEnd .gTable_titleA,
.evaluation_s .gTable.gTableTypeAEnd .gTable_titleB,
.evaluation_s .gTable.gTableTypeAEnd .gTable_totalA,
.evaluation_s .gTable.gTableTypeAEnd .gTable_totalB{ display:grid;}
.evaluation_s .gTable.gTableTypeAEnd .gTable_titleA{ grid-template-columns: 7.0fr;}
.evaluation_s .gTable.gTableTypeAEnd .gTable_titleB{ grid-template-columns: 1.2fr 2.4fr 2.4fr 0.8fr;}
.evaluation_s .gTable.gTableTypeAEnd .gTable_tr{     grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr; }
.evaluation_s .gTable.gTableTypeAEnd .gTable_totalA{ grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr; }
.evaluation_s .gTable.gTableTypeAEnd .gTable_totalB{ grid-template-columns: 1.2fr 2.4fr 0.8fr 2.4fr; }

/* 新建住宅建築能效評估 - 耗能分區 */
.evaluation_s .gTable.gTableType4{ min-width: 768px; }
.evaluation_s .gTable.gTableType4 .gTable_title,
.evaluation_s .gTable.gTableType4 .gTable_tr{ grid-template-columns: 40px 1.0fr 1.0fr 1.0fr 1.0fr 1.0fr; }

/* 新建住宅建築能效評估 - 耗能分區 */
.evaluation_s .gTable.gTableType5{ min-width: 768px; }
.evaluation_s .gTable.gTableType5 input{ width: 100%; }
.evaluation_s .gTable.gTableType5 .gTable_title,
.evaluation_s .gTable.gTableType5 .gTable_total,
.evaluation_s .gTable.gTableType5 .gTable_tr{ grid-template-columns: 40px 1.0fr 1.0fr; }
/* .evaluation_s .gTable.gTableType5 .gTable_total{ padding-left: unset; } */
.evaluation_s .gTable.gTableType5 .eva_list .addflex{ margin-right: unset; }

/* 新建住宅建築能效評估 - 新建住宿建築評估尺度 */
.evaluation_s .gTable.gTableTypeBEnd1{ width:100%; min-width: unset; margin: unset; }
.evaluation_s .gTable.gTableTypeBEnd1 input{ width: 100%; }
.evaluation_s .gTable.gTableTypeBEnd1 .gTable_title,
.evaluation_s .gTable.gTableTypeBEnd1 .gTable_tr{ grid-template-columns: 1.0fr 1.0fr 1.0fr; }
.evaluation_s .gTable.gTableTypeBEnd1 .gTable_tr{ margin-bottom: 0; padding-bottom: 15px; padding-left: 30px; }
.evaluation_s .gTable.gTableTypeBEnd1 .gTable_tr .gTable_td{ padding: 0px 0px 0px 25px; }
.evaluation_s .gTable.gTableTypeBEnd1 .gTable_tr:nth-child(2n){ position: relative; }
.evaluation_s .gTable.gTableTypeBEnd1 .gTable_tr:nth-child(2n)::after{ background-color: rgba( 0, 0, 0, 0.025); top: -7.5px; height: 100%; width: 100%; position: absolute; content: ""; }

/* 新建住宅建築能效評估 - 新建住宿建築評估尺度 */
.evaluation_s .gTable.gTableTypeBEnd2{ width:100%; }
.evaluation_s .gTable.gTableTypeBEnd2 input{ width: 100%; }
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_title,
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr{ grid-template-columns: 1.0fr 1.0fr 1.0fr 1.0fr; }
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr{ margin-bottom: 0; padding-bottom: 15px; padding-left: 30px; }
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr .gTable_td{ padding: 0px 0px 0px 25px; }
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr .gTable_td:nth-child(1){ padding: 0px 0px 0px 25px; }
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr:nth-child(2n){ position: relative; }
.evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr:nth-child(2n)::after{ background-color: rgba( 0, 0, 0, 0.025); top: -7.5px; height: 100%; width: 100%; position: absolute; content: ""; }
/* .evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr .gTable_td:nth-child(1){ padding: 0px 0px 0px 50px; } */
/* .evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr .gTable_td:nth-child(3){ padding: 0px 0px 0px 60px; } */
/* .evaluation_s .gTable.gTableTypeBEnd2 .gTable_tr .gTable_td:nth-child(4){ text-align: center; } */

/* 新建住宅建築能效評估 - 新建住宿建築評估尺度 */
.evaluation_s .gTable.gTableTypeBEnd3{ width:100%; }
.evaluation_s .gTable.gTableTypeBEnd3 input{ width: 100%; }
.evaluation_s .gTable.gTableTypeBEnd3 .gTable_title,
.evaluation_s .gTable.gTableTypeBEnd3 .gTable_tr{ grid-template-columns: 1.2fr 1.0fr 1.2fr 1.0fr; }

/* 新建住宅建築能效評估 - 產出計算標準值 & 申請案件碳排密度 */
.evaluation_s .gTable.gTableTypeBEnd4{ width:100%; }
.evaluation_s .gTable.gTableTypeBEnd4 input{ width: 100%; }
.evaluation_s .gTable.gTableTypeBEnd4 .gTable_title,
.evaluation_s .gTable.gTableTypeBEnd4 .gTable_tr{ grid-template-columns: 1.0fr 1.0fr 1.0fr 1.0fr; }


/* 新建住宅建築能效評估 - 新建住宿建築評估尺度 */
.contentbox_overWrapper:has(.gTableTypeBuild):nth-last-child(2) .contentbox{ padding-top: 0; padding-bottom: 0; }
.contentbox_overWrapper:has(.gTableTypeBuild):last-child .contentbox{ padding-top: 0; padding-bottom: 50px; }
.contentbox_overWrapper:has(.gTableTypeBuild):nth-child(2) .contentbox{ padding-top: 25px; }

.evaluation_s .gTable.gTableTypeBuild{ padding-right: unset; width: calc( 100% + 30px ); max-width: calc( 100dvw - 40px ); }
.evaluation_s .gTable.gTableTypeBuild input{ width: 100%; }
.evaluation_s .gTable.gTableTypeBuild .gTable_title,
.evaluation_s .gTable.gTableTypeBuild .gTable_tr{ grid-template-columns: 1fr 1fr 100px 2fr }
.evaluation_s .gTable.gTableTypeBuild .gTable_tr{ margin-bottom: 0; padding-bottom: 15px; padding-left: 30px; }
.evaluation_s .gTable.gTableTypeBuild .gTable_tr .gTable_td{ padding: 0px 0px 0px 25px; }
.evaluation_s .gTable.gTableTypeBuild .gTable_tr .gTable_td:nth-child(1){ padding: 0px 0px 0px 25px; }
.evaluation_s .gTable.gTableTypeBuild .gTable_tr:nth-child(2n){ position: relative; }
.evaluation_s .gTable.gTableTypeBuild .gTable_tr:nth-child(2n)::after{ background-color: rgba( 0, 0, 0, 0.025); top: -7.5px; height: 100%; width: 100%; position: absolute; content: ""; z-index: -1; }

.evaluation_s .gTable.gTableTypeBuild{ padding-right: unset; min-width: 1080px; max-width: unset; }
.evaluation_s .gTable.gTableTypeBuild.super .gTable_title,
.evaluation_s .gTable.gTableTypeBuild.super .gTable_tr{ grid-template-columns: 1.5fr 1fr 1.5fr 1.5fr 1.5fr 100px }

.reviewDraft,
.evaluation_s .gTable.gTableTypeBuild .reviewDraft{ color: #6B7280; }
.reviewPassed,
.evaluation_s .gTable.gTableTypeBuild .reviewPassed{ color: #2E7D32; }
.reviewFailed,
.evaluation_s .gTable.gTableTypeBuild .reviewFailed{ color: #C62828; }
.reviewPending,
.evaluation_s .gTable.gTableTypeBuild .reviewPending{ color: #0052CC; }

/* 灰色背景 */
/* .evaluation_s .gTable.gTableGray .gTable_tr{ background-color: #f5f5f5; margin-bottom: 0; padding-bottom: 15px; } */
/* .evaluation_s .gTable.gTableGray .gTable_tr:nth-child(2){ padding-top: 15px; border-radius: 25px 25px 0 0; } */
/* .evaluation_s .gTable.gTableGray .gTable_tr:last-child{ border-radius: 0 0 25px 25px; } */
/* .evaluation_s .gTable.gTableGray .gTable_tr .gTable_td{ width: 100%; padding: 0 15px; text-align: center; } */
/* .evaluation_s .gTable.gTableGray .gTable_title.eva_list{ padding: 0 5px; } */

/* 反白提示 */
.evaluation_s .gTable .gTable_tr:has(input:focus),
.evaluation_s .gTable .gTable_tr:has(select:focus){ background-color: #ffffff; }

.evaluation_s .gTable .stickyLeft{ min-width: 60px; position: sticky; left: 10px; background-color: #ffffff; }
.evaluation_s .gTable .stickyLeft span{ width: 100%; text-align: right; }

.evaluation_s .eva_list .evaflex.flexBreak{ flex-wrap: wrap; }
.evaluation_s .eva_list .evaflex.flexBreak .evaTitle{ width: 100%; }
.evaluation_s .eva_list .evaflex.flexBreak .evaTxt{ padding-left: 10px; }

.questBox{ width: 100%; padding: 5px 0; display: inline-flex; flex-wrap: wrap; align-items: flex-start; }
.questBox .q-table{ width: 100%; margin-bottom: 15px; margin-right: auto; display: inline-flex; flex-direction: column; }
.questBox .q-table:last-child{ margin-bottom: 0px; }

.questBox .q-table.q-table-border-bottom{ border-bottom: 2px solid #18ab9f; padding-bottom: 15px; margin-bottom: 15px; }

.questBox .q-table .q-title{ margin: 0 0 5px; margin-bottom: 0; padding: 5px 15px 5px 0; position: relative; }
.questBox .q-table .q-anwser{ margin: 0 0 0 12px; display: inline-flex; flex-wrap: wrap; }
.questBox .q-table .q-anwser .q-checkbox{ width: 50%; display: inline-flex; }
.questBox .q-table .q-anwser .q-checkbox>*{ padding: 5px 10px 5px 0px; display: inline-flex; }
.questBox .q-table .q-anwser .q-checkbox span{ /*word-break: keep-all;*/ }
.questBox .q-table .q-anwser .q-checkbox .eva_list{ width: 100%; }
.questBox .q-table .q-anwser .q-checkbox .checkbox{ align-items: flex-start; padding: 12px 10px 12px 0; }
.questBox.oneLine .q-table .q-anwser .q-checkbox .checkbox{ padding: 10px 10px 10px 0; }
.questBox .q-table .q-anwser .q-checkbox .input{ margin-left: 15px; }
.questBox .q-table .q-anwser .q-checkbox.q-input{ width: 100%; }
.questBox .q-table .q-anwser .q-checkbox.q-input span{ word-break: keep-all; }

.showHint{ position: relative; }
.showHint .hintTxt{ display: inline-flex; opacity: 1; }
.showHint>*:not(.hintTxt){ opacity: 0.5; }
/*241128,不需要顯示於畫面.*/
.evaluation_s .eva_list:has(>.showHint){ display: none; }

.hintTxt{ display: none; z-index: 1; font-weight: 600; font-size: 1.125rem; color: #666; background-color: rgba( 0, 0, 0, 0.075); position: absolute; top: 0; bottom: 0; left: -10px; right: 0; align-items: center; justify-content: center; }

@media screen and (min-width:1024px){
    .questBox .q-table .q-anwser .q-checkbox{ width: 25%; }
    .questBox .q-table .q-anwser .q-checkbox.q-input{ width: 25%; }

    .evaendbox.type2 .rightcont{ margin-bottom: 2px; }
}

@media screen and (min-width:768px) and (max-width:1023px){
    .questBox .q-table .q-anwser .q-checkbox{ width: 33.333%; }
    .questBox .q-table .q-anwser .q-checkbox.q-input{ width: 33.333%; }
}

.evaluation_s .contflex.eva_listAuto .eva_list{ width: auto; margin-right: auto; }

.itemAnchor{ scroll-margin-top: 70px; }

[navBox] { z-index: 5; position: fixed; top: 50%; right: 0; transform: translateY( -50% ); }
[navBox],
[navBox] [navGroup],
[navBox] [navGroup] [navList]{ display: inline-flex; flex-direction: column; align-items: flex-end; }
[navBox] .navParent{ background-color: #ccc; opacity: 1; }
[navBox] .navParent.old{ background-color: #fff5e2; }
[navBox] .navParent.hold{ background-color: #ea7126; }
[navBox] span{ font-size: 0; }
[navBox] a{ background-color: rgba(204,204,204,.6); opacity: 0.5; width: 11px; height: 28px; margin: 8px 0 0; border-radius: 3px 0px 0px 3px; transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }

[navBox] .navParent,
[navBox] a.hold{ width: 24px; }

[navBox] a.hold{ background-color: #18ab9f; opacity: 1; }

/* 基礎設定版 & 層級 */
.baseTitle{ padding:5px 0 5px 10px; position:relative; }
.baseTitle,
.baseTitle span{ font-size:1.125rem; color:#18ab9f; }
.baseTitle:before{ background:#18ab9f; top:11px; left:0px; width:3px; height:16px; content:""; display:block; position:absolute; }

.arrowTitle{ font-size: 1rem; padding: 5px 15px 5px 0px; }
.arrowTitle .fa{ font-size: 1rem; color: #ea7126; }

.basePadding{ padding: 0px 0px 20px 20px; }

.inputPadding{ padding: 0px 0px 0px 0; display: inline-flex; flex-direction: row; }
.inputPadding.long{ flex: 1; flex-wrap: wrap; gap: 5px; }

.tag_unit{ padding-left: 5px; word-break: keep-all; }

.nestBox{ width: 100%; position: relative; display: inline-flex; flex-direction: column; }
.nestBox .basePadding{ position: relative; }
.nestBox .basePadding::after{ background-color: rgba(204, 204, 204, 0.5); height: 1px; bottom: 5px; left: 40px; right: 0; content: ""; position: absolute; }
.nestBox .basePadding:nth-last-child(2)::after,
.nestBox .basePadding:last-child::after{ display: none; }
.nestBox:last-child .basePadding:last-child{ padding-bottom: 0; border: unset; }

.nestBox .addbtn{ z-index: 1; margin: -15px auto 15px 20px; position: relative; }
.nestBox .basePadding .delbtn{ z-index: 1; top: 6px; right: 0; position: absolute; }

.questBox.oneLine{ width: 100%; padding-right: 40px; display: inline-flex; flex-direction: row; }
.questBox.oneLine .arrowTitle{ width: 260px; }
.questBox.oneLine .q-table{ display: inline-flex; flex-direction: row; }
.questBox.oneLine .q-table .q-anwser .q-checkbox{ width: auto; padding-left: 15px; }
.questBox.oneLine .q-table .q-anwser .q-checkbox:first-child{ padding-left: 0px; }

@media screen and (max-width:767px){
    .questBox.oneLine .arrowTitle,
    .questBox.oneLine .q-anwser{ width: 100%; }
    .questBox.oneLine .q-table{ flex-direction: column; }
}


/* 仿製 Tailwind */
.inline-flex{ display: inline-flex; }

.lex-row{ flex-direction: row; }
.flex-row-reverse{ flex-direction: row-reverse; }
.flex-col{ flex-direction: column; }
.flex-col-reverse{ flex-direction: column-reverse; }

.justify-normal{ justify-content: normal; }
.justify-start{ justify-content: flex-start; }
.justify-end{ justify-content: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-around{ justify-content: space-around; }
.justify-evenly{ justify-content: space-evenly; }
.justify-stretch{ justify-content: stretch; }

.items-start{ align-items: flex-start; }
* .items-start{ align-items: flex-start !important; }
.items-end{ align-items: flex-end; }
* .items-end{ align-items: flex-end !important; }
.items-center{ align-items: center; }
.items-baseline{ align-items: baseline; }
.items-stretch{ align-items: stretch; }

.text-left{ text-align: left; }
* .text-left{ text-align: left !important; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.text-justify{ text-align: justify; }

.w-full{ width: 100%; }
.mx-auto{ margin-left: auto; margin-right: auto; }

/* Header 導航功能 */
/* .header.showClone .stepClone{ display: none; opacity: 1; top: 100%; } */
.header.showClone .stepClone{ opacity: 1; top: 100%; }
.header .stepClone{ z-index: 1; background-color: inherit; box-shadow: inherit; opacity: 0; position: absolute; top: -300%; left: 0; right: 0; transition: all 0.50s; }
.header .stepClone .stepbox{ padding-top: 0px; padding-bottom: 5px; }
.header .stepClone .stepbox .grids .gs{ padding: 5px 10px; }
.header .stepClone .stepbox .grids .txt{ margin-bottom: 5px; font-size: 0.875rem; }
.header .stepClone .stepbox .grids .radius{ width: 15px; height: 15px; }
.header .stepClone .stepbox .grids .radius .fa{ font-size: 0.5rem; line-height: 0.875rem; }

/* icon shake */
@keyframes horizontal-shaking {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    25% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    50% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    75% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    100% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
}
.horizontal-shake {
    -webkit-animation: horizontal-shaking 1.50s infinite;
    animation: horizontal-shaking 1.50s infinite;
}
@keyframes vertical-shaking {
    0% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
    25% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    50% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
    75% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
}
.vertical-shake {
    -webkit-animation: vertical-shaking 1.50s infinite;
    animation: vertical-shaking 1.50s infinite;
}

/* 崁入網頁 */
.iframeBox{ margin: 100px 0 0 0; width:100%; position:relative; height:calc( 100vh - 251px ); }
.iframeBox iframe{ width:100%; height:100%; position:absolute; top:0; left:0; }


/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
/*關於*/
.aboutflex .grids:hover{ background-color:#18ab9f; }
.aboutlist .backbtn .btns:hover span{ color:#fff; }
.aboutlist .backbtn .btns:hover:after{ width:100%; }

/*住宅*/
.downbtn:hover{ background: #18ab9f; }

/*合作*/
.coopBtn .btns:hover{ background-color:#18ab9f; }

}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
/*關於*/
.a_flex.sty01 .a_right{ width:33.3334%; }
.a_flex.sty03{ flex-wrap:wrap; justify-content: center; }
.a_flex.sty03 .a_left{ width:100%; padding:0 0 15px 0; flex:none; }
.a_flex.sty03 .a_right{ max-width:552px; }

/*合作*/
.coopbox{ flex-wrap:wrap; }
.coopbox .grids{ width:33.333334%; padding: 0 0 25px 25px; }

.caseflex .grids{ width:50%; padding:0 0 15px 15px; }

/*設計建議*/
.designText{ margin-bottom: 40px; }


/*聯絡我們*/
.contactbox{ display:block; }
.contactbox .cTopimg{ padding:0 0 30px 0; width:100%; }
.contactbox .cright{ padding:30px 0 0 0; border-left:none; width:100%; }
.contactbox .cright .iframes{ padding-bottom:36%; }

/*公告頁*/
.bulletbox .left_img{ width:40%; }
.bulletbox .left_img .imgs{ padding-bottom:150%; }
.bulletbox .right_text{ width:60%; }
.bulletbox .right_text .h1{ font-size:1.25rem; }

/*數位宣導*/
.digitlist .grids{ width:50%; }
.digit_block .di_left{ width:250px; }
.digit_block .di_right{ padding:0 0 0 40px; }

.contentword .mList .txtcont .grids{ width:100%; }
.contentword .mList .txtcont .grids .txtbox{ width:50%; }
.contentword .mList .txtcont .grids .imgbox{ width:50%; }
.contentword .mList .txtcont .grids .imgbox .imgs.wh-33{ width:100%; }

/*評估系統*/
.evaluation_s .eva_list.long-mid{ width:100%; }
.evaluation_s .eva_list .addflex .add-33-mid{ width:33.33334%; }
.evaluation_s .eva_list .addflex .add-100-mid{ width:100%; }
.evaluation_s .eva_list .addflex .add-flexnone-mid{ flex:none; }

/*評估結果*/
.evaendbox .leftimg .frac .txt{ font-size:48px; }

.evaendbox{ display:block; }
.evaendbox .leftimg{ width:100%; }
.evaendbox .rightcont{ width:100%; padding:40px 0 0 0; }
.evaendbox .leftimg .frac{ font-size:100vw; }
.evaendbox .leftimg .frac .txt{ font-size:0.1em; }
}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.maintitle{ margin-top:70px; }
.maintitle h1{ font-size:1.875rem; }
.maintitle h1 .br{ display:block; }
.maintitle h1 .sm{ font-size:1.5rem; }

/*關於*/
.preface{ font-size:1rem; padding:20px; }

.abouth1{ font-size:1.375rem; margin-bottom:20px; }
.abouttxt{ font-size:1rem; }

.aboutlist .img_list .pc{ display:none; }
.aboutlist .img_list .mob{ display:block; }
 
.a_flex{ flex-wrap:wrap; }
.a_flex .a_left{ flex:none; width:100%; padding:0 0 20px 0; }
.a_flex .a_right{ margin:auto; }

.a_flex.sty01 .a_left{ order:1; padding:0 0 20px 0; }
.a_flex.sty01 .a_right{ order:2; max-width:438px; width:auto; }
.a_flex.sty02 .a_left{ order:1; padding:0 0 20px 0; }
.a_flex.sty02 .a_right{ order:2; }

.aboutlist h2{ margin-bottom:20px; }
.aboutlist h3{ margin-bottom:15px; }
.aboutlist p{ font-size:1rem; }
.aboutlist p a{ font-size:1rem; }
.aboutlist p .red{ font-size:0.75rem; }

.aboutflex{ margin-left:-10px; }
.aboutflex .grids{ margin: 5px 0 5px 10px; width: calc( 50% - 10px ); font-size: 0.938rem; padding: 0 10px 0 30px; background-position: 10px center; }

/*計畫*/
.projectbox{ flex-wrap:wrap; }
.projectbox .grids{ width:100%; padding:0; position:relative; padding:0 0 0 50px; margin-bottom:10px; }
.projectbox .grids .line{ position:absolute; height:auto; width:10px; top:0; bottom:0; left:10px; }
.projectbox .grids .line .points{ bottom:auto; top:0; bottom:0; width:30px; height:30px; right:auto; left:50%; transform:translateX(-50%); }
.projectbox .grids .line .points:before{ width:15px; height:15px; }

.projectbox .grids .line:before{ border-width:10px 5px 0 5px; bottom:auto; right:0; border-color:#fff transparent transparent transparent ; }
.projectbox .grids .line:after{ border-width:10px 5px 0 5px; top:auto; bottom:-10px; left:0; right:0; border-color:#92d0cb transparent transparent transparent ; }
.projectbox .grids.color01 .line:after{ border-color:#5ebff0 transparent transparent transparent ; }
.projectbox .grids.color02 .line:after{ border-color:#188de6 transparent transparent transparent ; }

.projectbox .grids .h1{ font-size:1.25rem; margin-bottom:10px; text-align:left; }
.projectbox .grids .text{ padding:0; font-size:0.875rem; margin: 0 0 15px 0; }
.projectbox .grids .text .span{ font-size:0.875rem; }
.projectbox .grids .text a{ font-size:0.875rem; }

/*住宅*/
.r_table .r_th{ font-size:0.875rem; padding:5px; }
.r_table .r_td{ font-size:0.75rem; padding:5px; }

.toolTitle .t1{ font-size:1rem; padding:10px 15px; }
.toolTitle .t1:after{ border-width: 3px 0 3px 6px; right:-18px; }
.toolTitle .t2{ font-size:1rem; padding:0 0 0 30px; }

.toolTxt{ font-size:0.875rem; }

.downbtn span{ font-size:1rem; }

/*合作*/
.coopbox{ flex-wrap:wrap; margin-left:-10px; }
.coopbox .grids{ width:50%; padding: 0 0 10px 10px; }
.coopbox .grids .gs{ border-radius:5px; }
.coopbox .grids .gs .step .numtxt{ font-size:0.75rem; }
.coopbox .grids .gs .step{ font-size:0.938rem; }
.coopbox .grids .gs .text .t_list{ font-size:0.875rem; line-height: 1.6; }
.coopbox .grids .gs .text .t_list:before{ top:10px; }
.coopbox .grids .gs .imgs{ width:100px; height:100px; background-size: 60px; }

.coopBtn{ flex-wrap:wrap; }
.coopBtn .btns{ width:100%; margin:0 0 15px 0; justify-content: space-between; }
.coopBtn .btns .span{ padding:0 15px 0 5px; }

.caseflex .grids{ width:100%; }

.caseflex .grids .gs .title{ font-size:1rem; }
.caseflex .grids .gs .text .li_s .ione{ font-size:0.875rem; }
.caseflex .grids .gs .text .li_s .itwo{ font-size:0.875rem; }

.qalist .q_title{ font-size:1.125rem; }
.qalist .a_txt{ font-size:0.938rem; }

/*設計建議*/
.designText{ display:block; margin-bottom: 30px; }
.designText .d_imgs{ width:100%; }
.designText .d_text{ padding:15px 0 0 0; }
.designText .d_text .d_list{ padding: 0 0 10px 0; margin-bottom: 10px; }

/*聯絡我們*/
.contactbox{ display:block; }
.contactbox .cTopimg{ padding:0 0 30px 0; width:100%; }
.contactbox .cright{ padding:30px 0 0 0; border-left:none; width:100%; }
.contactbox .cright .iframes{ padding-bottom:36%; }
.contactbox .cTopimg .list_s{ display:block; margin-bottom:15px; }
.contactbox .cTopimg .list_s .u_1{ width:auto; }
.contactbox .cTopimg .list_s .u_2{ padding:10px 0 0 0; }

/*公告頁*/
.bulletbox{ flex-direction: column; padding:20px; }
.bulletbox .left_img{ width:100%; padding:0; order:2; }
.bulletbox .left_img .imgs{ padding-bottom:50%; }
.bulletbox .right_text{ width:100%; padding-bottom:25px; order:1; }
.bulletbox .right_text .h1{ font-size:1.125rem; }

/*數位宣導*/
.digit_block{ flex-wrap:wrap; }
.digit_block .di_left{ width:100%; }
.digit_block .di_right{ padding:20px 0 0 0; }

.digit_search .digit_flex{ display:none; }
.digit_search .filterBtn{ display:block;  }
.digit_search .filterBtn .fibtns{ width:100%; display:flex; justify-content: center; align-items: center; background:#ea7126; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; padding:5px; cursor:pointer; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.digit_search .filterBtn .fibtns .fa{ color:#fff; font-size:1rem; }
.digit_search .filterBtn .fibtns .txt{ color:#fff; font-size:1rem; padding:0 0 0 5px; }
.digit_search .filterBtn .f02{ display:none; }

.digit_search .filterBtn.open .f01{ display:none; }
.digit_search .filterBtn.open .f02{ display:flex; }
.digit_search .filterBtn.open .fibtns{ border:1px solid #a7e5e0; background:none; }
.digit_search .filterBtn.open .fibtns .txt{ color:#a7e5e0; }
.digit_search .filterBtn.open .fa{ color:#a7e5e0; }

.digit_nosearch{ padding:80px 0; }

.digitlist .grids{ width:50%; }

.contentword .mTitlemain{ margin-top:20px; margin-bottom:25px; }
.contentword .mTitlemain .titlebox{ max-width:none; padding:0; width:100%; text-align:center; }
.contentword .mTitlemain .line{ display:none; }
.contentword .mList .txtcont{ margin:0; }
.contentword .mList .txtcont .grids{ width:100%; flex-wrap:wrap; padding-left:0; }
.contentword .mList .txtcont .grids .txtbox{ flex:none; width:100%; }
.contentword .mList .txtcont .grids .imgbox{ padding:10px 0 0 0; width:100%; }
.contentword .mList .txtcont .grids .imgbox .imgs{ margin:0 0 20px 0; }
.contentword .mList .txtcont .grids .imgbox .imgs.wh-33{ width:100%; }
.contentword .mList .txtcont .grids.long .imgbox{ width:100%; }



/*評估系統*/
.evaluation_s .eva_list{ width:100%; }
.evaluation_s .eva_list .evaflex{ display:block; }
.evaluation_s .eva_list .evaflex .evaTxt{ padding:5px 0 0 0; }
.evaluation_s .eva_list .addflex{ margin-bottom:10px; }
.evaluation_s .eva_list .addflex:last-child{ margin-bottom:0px; }
.evaluation_s .eva_list .addflex .add-50-sp{ width:50%; }
.evaluation_s .eva_list .addflex .add-80-sp{ width:80%; }
.evaluation_s .eva_list .addflex .add-100-sp{ width:100%; }
.evaluation_s .eva_list .addflex .add-flex-sp{ flex:1; }
.evaluation_s .eva_list .addflex .add-flexnone-sp{ flex:none; }
.evaluation_s .eva_list .addflex .add-padno-sp{ padding:0; }
.evaluation_s .eva_list .addflex .add-padleft20-sp{ padding-left:20px; }

.evaluation_s .eva_btn .btns{ padding:0 15px; font-size:1rem; }

.stepbox .grids{ display:none; }
.stepbox .grids.hold{ display:block; width:100%; padding:0; }
.stepbox .grids .gs{ display: flex; justify-content: space-between; align-items: center; }
.stepbox .grids .txt{ margin:0; }
.stepbox .grids .radius{ margin:0; }
.stepbox .grids .txt .br{ display:inline-block; width:5px; height:5px; vertical-align:middle; }

/*評估結果*/
.evaendbox{ display:block; }
.evaendbox .leftimg{ width:100%; }
.evaendbox .rightcont{ width:100%; padding:20px 0 0 0; }
.evaendbox .rightcont .graylist{ margin-bottom:10px; padding:10px 20px; }
.evaendbox .rightcont .graylist .g2{ font-size:1.25rem; }
.evaendbox .leftimg .frac{ font-size:100vw; }
.evaendbox .leftimg .frac .txt{ font-size:0.1em; }

.endtitlebox{ padding:60px 10px 40px 10px; }
.endtitlebox .h3:before{ display:none; }
.endtitlebox .h3:after{ display:none; }

/* 崁入網頁 */
.iframeBox{ margin-top:70px; }

}

/* 登報系統 */
.text-gray-500{ color: oklch(55.1% 0.027 264.364); }
.text-gray-600{ color: oklch(44.6% 0.03 256.802); }

.paddFlex{ gap: 5px; display: flex; flex-direction: column; }

.MiddleStyle{ display: flex; flex-direction: column; }
.MiddleStyle form{ width: 100%; }
.MiddleStyle .evaluation_s{ width: 500px; max-width: 100%; display: inline-flex; margin-left: auto; margin-right: auto; }
.MiddleStyle .evaluation_s .contflex{ flex-direction: column; }

.verifyBox{ width: auto; margin-right: auto; gap: 10px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
.verifyBox .verifyCode{ width: auto; gap: 10px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.verifyBox .verifyImage{ height: 30px; margin: -1px; border: 1px solid #ddd; cursor: pointer; }
.verifyBox .verifyReload{ font-size: 0rem; cursor: pointer; }
.verifyBox .verifyReload i{ font-size: 1.125rem; color: #18ab9f; }

/* TippyJS */
.eva_list .tippy-box{ border-radius: 50%; background-color: unset; }

.tippy-content{ color: #ffffff; background-color: oklch(0.55 0.11 185.84); }
.tippy-box[data-theme~='green'][data-placement^='top'] > .tippy-arrow::before{ border-top-color: oklch(0.55 0.11 185.84); }
.tippy-box[data-theme~='green'][data-placement^='bottom'] > .tippy-arrow::before{ border-bottom-color: oklch(0.55 0.11 185.84); }
.tippy-box[data-theme~='green'][data-placement^='left'] > .tippy-arrow::before{ border-left-color: oklch(0.55 0.11 185.84); }
.tippy-box[data-theme~='green'][data-placement^='right'] > .tippy-arrow::before{ border-right-color: oklch(0.55 0.11 185.84); }

[target-tippy]{ width: 30px; height: 30px; border-radius: 50%; border: unset; background-color: unset; position: relative; }
[target-tippy]::after{ background-size: 25px 25px;background-image: url(../images/page/i_question_mark.svg); background-repeat: no-repeat; background-position: center; height: 100%; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); content: ""; }
[target-tippy].tippySet{ font-size: 0; }

.evaTitle:has([target-tippy]),
.padd:has([target-tippy]),
.questBox span:has([target-tippy]){ display: inline-flex; align-items: center; }
.evaTitle [target-tippy],
.questBox span [target-tippy]{ margin-left: 5px; width: 19px; height: 19px; }
.evaTitle [target-tippy]::after,
.questBox span [target-tippy]::after{ background-size: 19px; }
.evaTitleLabel{ color: inherit; font-size: inherit; font-weight: inherit; }

.padd [target-tippy]{ margin-left: 5px; width: 17px; height: 17px; }
.padd [target-tippy]::after{ background-size: 17px; }


.numberUnderline{ margin: auto 2px; text-decoration: underline; text-underline-offset: 2px; }
.numberUnderline::before,
.numberUnderline::after{ content: "\00a0\00a0"; }

.organBox{ max-width: 800px; width: 100%; gap: 15px; display: inline-flex; flex-wrap: wrap; }
.organBox>span:first-child{ margin-right: auto; }
.dataIndent{ padding-left: 16px; }
.dataIndent:has( input.input ){ width: 100%; margin-top: 3.5px; gap: 5px; display: flex; }
.dataIndent:has( input.input ) input.input{ padding: 0 7.5px; height: 24px; width: 50px; text-align: right; }

.textFile,
.textEdit,
.textView{ gap: 2px; display: inline-flex; flex-direction: row; }
.textFile{ gap: 4px; flex-direction: row-reverse; }
.textFile:hover,
.textEdit:hover,
.textView:hover{ text-decoration: underline; }
.textFile::after,
.textEdit::after,
.textView::after{ width: 24px; display: inline-block; background-image: url(../images/page/icon_view.svg); background-size: 20px; background-position: center; background-repeat: no-repeat; content: ""; }
.textEdit::after{ background-image: url(../images/page/icon_edit.svg); background-size: 15px; }
.textFile::after{ background-image: url(../images/page/icon_file.svg); background-size: 22px; }

.evaluation_s .eva_list .evaflex .evaTitle:has(.textView),
.evaluation_s .eva_list .evaflex .evaTitle:has(.textEdit),
.evaluation_s .eva_list .evaflex .evaTitle:has(.textFile){ display: inline-flex; flex-direction: row; align-items: center; }

/* Input File 造型 */
.custom-file-input {
    display: block;
    width: 100%;
    font-size: 0.875rem; /* 約 Tailwind 的 text-sm */
    color: #18ab9f;       /* text-gray-800 */
    cursor: pointer;

    /* 圓角框線外觀 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem;     /* rounded-md */
    background-color: #f9fafb; /* bg-gray-50 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 按鈕樣式（左側“選擇檔案”） */
.custom-file-input::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border: none;
    border-radius: 0.375rem 0 0 0.375rem; /* 左側圓角 */
    background-color: #18ab9f; /* bg-gray-900 */
    color: white;
    font-weight: 500;
    cursor: pointer;
}

/* Hover 效果 */
.custom-file-input:hover::file-selector-button {
    background-color: #0f998e; /* hover:bg-gray-800 */
}

/* 電話號碼 */
.contentbox .linksTel{ color: #333; padding: 3px 0; border: 1px solid hsla(0, 0%, 100%, 0.5); border-radius: 3px; gap: 10px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.contentbox .linksTel::before{ width: 16px; height: 16px; content: ""; background-size: contain; background-position: center; background-repeat: no-repeat; }
.contentbox .linksTel::before{ background-image: url(../images/page/icon_tel.png); }

/* 密碼元素開關 */
.pwBox{ background-color: #eee; padding-right: 40px; position: relative; }
.pwBox button{ width: 22px; height: 22px; transform: translateY(-50%); top: 50%; right: 5px; position: absolute; border: unset; cursor: pointer; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; }
.pwBox button svg{ width: inherit; height: inherit; }
.pwBox button .i_open,
.pwBox button .i_close{ width: inherit; height: inherit; }
.pwBox button .i_open{ display: none; }
.pwBox button .i_close{  }
.pwBox.open button .i_open{ display: block; }
.pwBox.open button .i_close{ display: none; }

/* 審核描述 Text */
.contentbox .textarea{ width: 100%; background: #eee; padding: 10px; border: none; resize: none; height: 120px; font-size: 1rem; }

/* Class Icon */
.CloseBtn{ position: relative; display: inline-block; width: 25px; height: 25px; overflow: hidden; }
.CloseBtn.rounded::before, .close.rounded::after{ border-radius: 5px; }
.CloseBtn.black::before, .close.black::after{ height: 8px; margin-top: -4px; }
.CloseBtn::before{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.CloseBtn::after{ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.CloseBtn::before,
.CloseBtn::after{ content: ""; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #000; }

/* Swal Alert Style */
[data-swal2-theme="green_architecture"] .swal2-popup{ box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51 51 51 / 10%) 0px 0px 0px 3px; }
[data-swal2-theme="green_architecture"] .GTitle{ background-color: #18ab9f; padding: 7.5px 10px; border-radius: 4px 4px 1px 1px; display: flex; flex-direction: row; align-items: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; }
[data-swal2-theme="green_architecture"] .GTitle span{ color: #fff; font-size: 18px; }
[data-swal2-theme="green_architecture"] .GTitle button{ font-size: 0; margin-left: auto; border: none; background: none; }
[data-swal2-theme="green_architecture"] .GTitle button.CloseBtn::before,
[data-swal2-theme="green_architecture"] .GTitle button.CloseBtn::after{ height: 4px; background: #fff; }
[data-swal2-theme="green_architecture"] .GContent{ padding: 15px; }


.eva_btn.FlexWrap{ gap: 10px; flex-wrap: wrap; }


/* 區塊 頁籤 */
.TitleInherit { color: inherit; font-size: inherit; font-weight: inherit; }
.evaluation_s .mainh1:has(.TabBox) { padding-bottom: 0; gap: 10px; display: flex; flex-direction: column; }

.TabBox { gap: 5px; background: inherit; display: flex; flex-direction: row; align-items: flex-end; }
.TabBox .Items { color: #777; font-size: 0.8em; font-weight: 600; padding: 5px 10px; border: unset; border-radius: 5px 5px 0 0; background: #dfdfdf; cursor: pointer; transition: all 0.3s; }
.TabBox .Items span{ font-size: inherit; color: inherit; }
.TabBox .Items.Focus { color: #333; font-size: 1em; background: #ffffff; padding: 5px 15px; }

.TabBox .Items:focus,
.TabBox .Items:hover{ color: #555; background: #efefef; }

.TabBox .Items.Focus:focus,
.TabBox .Items.Focus:hover{ background: #ffffff; }

/* 表單 Style - 進階搜尋用 */
.contentbox.SearchBox{ padding: 0px 25px 20px 25px; }
.contentbox.SearchBox .Form{ border-bottom: 1px solid #ccc; padding-left: 10px; padding-right: 10px; }

.Row{ width: calc(50% - 5px); display: inline-flex; flex-direction: column; gap: 5px; }
.Col{ }
.Col:has( .Input ){ padding-left: 10px; }
.Full{ width: 100%; }

.Form{ width: 100%; padding: 25px 0; gap: 10px; display: inline-flex; flex-direction: row; flex-wrap: wrap; }

.Form .Title{ font-size: 1.125rem; color: #18ab9f; padding: 5px 0 5px 10px; position: relative; }
.Form .Title:before { content: ""; display: block; position: absolute; left: 0px; top: 11px; width: 3px; height: 16px; background: #18ab9f; }

.Input{ background: #eee; width: 100%; padding: 0 5px; height: 30px; line-height: 30px; font-size: 1rem; color: #333; border: none; }

.BtnsBox{ width: 100%; padding-left: 10px; margin-top: 10px; gap: 10px; display: inline-flex; flex-direction: row; flex-wrap: wrap; }
.BtnsBox.BtnLeft{ justify-content: flex-start; }
.BtnsBox.BtnRight{ justify-content: flex-end; }

.BtnsBox .Btns{ color: #fff; background: #ea7126; margin: 0; padding: 5px 10px; font-size: 1.125rem; line-height: 1.2; display: block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; cursor: pointer; border: none; }

@media screen and (max-width:768px){
    .contentbox.SearchBox .Form{ flex-direction: column; }
    .Row{ width: 100%; }
}


/* 查無資料 */
.contentbox:has(.toDoListNoData){ text-align: center; padding: 50px 0 75px 0; }
.toDoListNoData{ font-size: 1.125rem; }

/*頁碼*/
.contentbox:has( .page_number ){ padding-bottom: 30px !important; }
.contentbox:has( .page_number ) .contflex{ padding-bottom: 20px; }
.contentbox:has( .page_number ) .page_number{}

.page_number{ padding: 10px; text-align: center; display: inline-flex; width: 100%; position:relative; }
.page_number .menu{ width: 100%; gap: 4px; display: inline-flex; justify-content: center; align-items: stretch; }
.page_number .btn{ font-size:0px; height: 100%; display: inline-flex; align-items: stretch; min-width:30px; padding:0 10px; background-color: #fff; color:#555; border:1px solid #ccc; border-radius: 3px; cursor: pointer; }

.page_number .active .btn,
.page_number .btn.focus{ border:1px solid #18ab9f; background-color:#18ab9f; color:#fff; font-weight:700;}
.page_number .btn .fa{ line-height:28px;}
.page_number .btn.looking{ color:#ccc; border-color:#ddd; cursor:not-allowed;}

/* 頁碼 / list.js */
.pagination{ height: 100%; padding: 0; gap: 4px; display: inline-flex; align-items: stretch; justify-content: center; list-style: none; }
.pagination li{ height: 100%; font-size: 0; }
.pagination>*{}
.page_number .active .btn{ }
.page_number .pagination .btn{ font-size: 1rem; display: inline-flex; align-items: center; }

@media screen and ( max-width: 767px) {
    .page_number .btn{ display: none;}
    .page_number .btn:last-child,
    .page_number .btn:first-child{ padding: 0; display: inline-block;}
    .page_number .btn.focus{ display: inline-block;}
}

/* PHP Pagenation -  Nezb / Green Architecture - Theme */
.contentbox:has( .gTable ) .page_number .pagination .btn{
    font-size: 1rem;
    line-height: unset;
    height: unset;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    margin: 0;
    vertical-align:top;
}

.contentbox:has( .gTable ) .pagerfanta .btn.focus{ border: 1px solid #18ab9f; background-color: #18ab9f; line-height: unset; }
.contentbox:has( .gTable ) .pagerfanta a:hover { border: 1px solid #1abcae; background-color: #1abcae; }

.contentbox:has( .gTable ) .btn:has( .fa )::before { font-size: 0; width: 24px; height: 25px; background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; }
.contentbox:has( .gTable ) .btn:has( .fa ) .fa { display: none; }

.contentbox:has( .gTable ) .btn:has( .fa-arrow-left )::before { background-image: url( ../images/page/icon-arrow-left.svg ); }
.contentbox:has( .gTable ) .btn:has( .fa-arrow-right )::before { background-image: url( ../images/page/icon-arrow-right.svg ); }

.contentbox:has( .gTable ) .btn:not( .looking ):has( .fa-arrow-left ):hover::before { background-image: url( ../images/page/icon-arrow-left-white.svg ); }
.contentbox:has( .gTable ) .btn:not( .looking ):has( .fa-arrow-right ):hover::before { background-image: url( ../images/page/icon-arrow-right-white.svg ); }