/* tab 
.wrapper {
    position: relative;
    width: 96%; max-width: 1400px;
    margin: 0 auto;
}

img {
    border: 0;
    vertical-align: top;
}

a {
    text-decoration: none;
}

*{transition: all 0.2s;}

*/


/*navArea*/

/* .wrapper.navBase{ height: 110px;z-index: 3; } */
.tabs-nav{    margin-top: -6%;display: flex; justify-content: space-evenly ;  /*align-items: flex-end;*/ position: relative;}
.tabs-nav img{ z-index: 2;display: block; position: relative;}
.tabs-nav li .secButton {display:block;background: #f9d361;z-index: 1;top: -50px;position: relative;width: 79%;margin: 0 auto;padding-top: 0px;left: 0px;height: 0px;transition:0.5s;}

.tabs-nav li:hover .secButton{display: block;padding-top: 50px;height: auto;}
.tabs-nav li:hover .secButton a {display: block;}
.tabs-nav li:hover .secButton ul .line{display: block;}

.tabs-nav li .secButton li{width: 80%;margin: 0 auto;cursor: pointer;}
.tabs-nav li .secButton a{display: none;color: white; text-align: center; position: relative; font: 20px / 34px "微軟正黑體"; color: #000;opacity: 1;}
.line{width: 80%;height: 1px;margin: 1% auto;background: #b79632;opacity: 1;display: none;}

.tabs-nav li{width: 42%;text-align: center; cursor: pointer; padding: 0 1%;position: relative;transition: 0.5s;}
.tabs-nav li:hover{ transform: scale(1.1);  transition: 0.5s;}
.tabs-nav > li.on{    filter: brightness(1.1);   }

.tabs-nav li img.pc{display: block;}
.tabs-nav li img.m{display: none;}


/*section-body*/
.section-body{ padding-top: 10px;  }
.tabs-panel{display: none;}
.tabs-panel.on{display: block;}



@media only screen and (max-width: 1000px) {

  .section-body{padding: 0;}
  .tabs-nav li{width: 95%; padding: 0 1%;}
}



@media only screen and (max-width: 1000px) {
/* .wrapper.navBase {height: 90px;} */

}


@media only screen and (max-width: 800px) {
.tabs-nav li img.pc{display: none;}
.tabs-nav li img.m{display: block;}
.tabs-nav li .secButton {top: -30px;}
.tabs-nav li:hover .secButton{padding-top: 30px;}

}


@media only screen and (max-width: 530px) {
/* .wrapper.navBase{height:50px; margin-top:7px;} */
.tabs-nav li .secButton {top: -20px;}
.tabs-nav li:hover .secButton{padding-top: 20px;}
.tabs-nav li .secButton a{ font: 16px / 1.6 "微軟正黑體";}
.tabs-nav > li.on{    filter:none;  }
}



@media only screen and (max-width: 420px) {
.tabs-nav{    margin-top: -7%;}
}