.tab { overflow: hidden; text-align:center; padding-bottom:20px;}
.tab button {display:inline-block; vertical-align:top; font-size:17px; font-weight:400; border:0; font-family: 'Noto Sans TC', sans-serif; padding:10px 26px; background:#e1e1e1; color:#222222; margin:0 1px 10px 1px; behavior:expression(this.onFocus=this.blur()); transition-property:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s;}
.tab button:hover { background:#cfcfcf; color:#222222; behavior:expression(this.onFocus=this.blur()); transition-property:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s;}
.tab button.active { background-color: #009fa8; color:#ffffff; display:inline-block; vertical-align:top; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent; position:relative;}
.tab button.active:before { pointer-events:none; position:absolute; z-index:-1; content: ''; border-style:solid; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-property: transform; transition-property:transform;  left:calc(50% - 10px); bottom:0; border-width:12px 8px 0 8px; border-color: #009fa8 transparent transparent transparent; -webkit-transform:translateY(10px);  transform: translateY(10px);}
.tabcontent { display:none;}

/*===平版型區===*/
@media (min-width: 685px) and (max-width: 1050px) {
.tab { padding-bottom:20px;}
.tab button {display:inline-block; vertical-align:top; font-size:16px; padding:8px 24px; margin:0 1px 10px 1px;}
}

/*===手機版型區===*/
@media screen and (max-width: 686px) {
.tab {display:flex; padding-bottom:10px;}
.tab button {-webkit-flex:1; flex:1; font-size:15px; padding:6px 15px; margin:0 1px 18px 1px;}
}