body { background:url(../images/bg.jpg) repeat; }
ul,li { text-decoration: none;list-style: none; }
a:hover { text-decoration: none; }
a{ text-decoration: none; }


#mtkContainer { width: 100%; height: auto; background: url(../images/header_pc2021.jpg) top center no-repeat;}
#mtkContainer * {}
header.header { padding: 0; margin: 0 0 -60px 0; width: 100%; height: 530px;  }
header.header h1 { display: none; }


nav.otherFesMenu {width: 800px;
    text-align: left;
    position: relative;
    left: 50%;
    margin: 0 0 0 -394px;
   z-index: 5; }
nav.otherFesMenu ul {}
nav.otherFesMenu ul li { display: inline-block;     margin: 0 -30px 0 0; width: auto; height: auto;
transition: .5s; position: relative;}
nav.otherFesMenu ul li a {display: block; font-size: 18px; font-weight: bold; font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; text-align: center; color: #fff5e4; 
  width: 146px; height: 32px; line-height: 32px;     
  background: #fba520; /* Old browsers */
background: -moz-linear-gradient(left, #fba520 0%, #f19300 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #fba520 0%,#f19300 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #fba520 0%,#f19300 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fba520', endColorstr='#f19300',GradientType=1 ); /* IE6-9 */

-webkit-clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
      border-radius: 5px 10px 0 0;
}


nav.otherFesMenu ul li.on:hover { transform:translateX(5px); }
nav.otherFesMenu ul li a:hover {color: #fff55c; }
nav.otherFesMenu ul li.on a { color: #FFF; background: #ffb33c;}

.mobileMenuButton { display: none ;}

.mainPageButton {position: relative; width:60%; height: 35px; background:#ff8b33; text-align: center; z-index: 98;margin:0 auto;border-radius: 0 0 30px 30px;}
.mainPageButton > ul {  display: flex; flex-wrap: wrap;justify-content: center; }
.mainPageButton > ul > li{width: 160px;}

.mainPageButton a {  display: block; color: white; font: 20px/1.7 "微軟正黑體"; padding: 0px 5px 0 40px;  line-height: 35px;text-align: center;position: relative;}
.mainPageButton a:hover,
.mainPageButton>ul>li.active>a { background:#ff5e4a;}
.secButton { display:none; background: #f84a36;}


.mainPageButton>ul>li:hover .secButton {  display: block;}
.mainPageButton>ul>li:nth-child(1) > a::before{ content: "";background: url(../images/m01.png);width: 40px;height: 40px;position: absolute;left: 18px;top: -3px;background-size: cover;}
.mainPageButton>ul>li:nth-child(2) > a::before{ content: "";background: url(../images/m07.png);width: 40px;height: 40px;position: absolute;left: 18px;top: -3px;background-size: cover;}
.mainPageButton>ul>li:nth-child(3) > a::before{ content: "";background: url(../images/m02.png);width: 40px;height: 40px;position: absolute;left: 11px;top: -3px;background-size: cover;}
.mainPageButton>ul>li:nth-child(4) > a::before{ content: "";background: url(../images/m03.png);width: 40px;height: 40px;position: absolute;left: 18px;top: -3px;background-size: cover;}
.mainPageButton>ul>li:nth-child(5) > a::before{ content: "";background: url(../images/m04.png);width: 40px;height: 40px;position: absolute;left: 18px;top: -3px;background-size: cover;}
.mainPageButton>ul>li:nth-child(6) > a::before{ content: "";background: url(../images/m06.png);width: 40px;height: 40px;position: absolute;left: 18px;top: -3px;background-size: cover;}
.secButton a {padding: 0 10px;}


#mtkContainer > h2 {text-align: center;font:bold 32px/1.4 "微軟正黑體";color:#FFF;position: relative;width: 270px;margin:60px auto 30px auto;background: url(../images/h2bg.jpg), #b5c815;padding: 10px ; }
#mtkContainer > h2::before{ content: "";background: url(../images/h2left.png) no-repeat;width:103px;height: 119px;position: absolute;left: -57px;top:-53px;background-size: cover;}
#mtkContainer > h2::after{ content: "";background: url(../images/h2right.png) no-repeat;width:67px;height: 82px;position: absolute;right: -23px;top:-13px;background-size: cover;}



@media screen and (max-width:500px) { 
#mtkContainer > h2 {font:bold 24px/1.4 "微軟正黑體";width: 200px;margin:40px auto 30px auto;}
#mtkContainer > h2::before{width:79px;height: 119px;position: absolute;left: -48px;top:-37px;background-size: 100%;}
#mtkContainer > h2::after{width:52px;height: 110px;position: absolute;right: -14px;top:-9px;background-size: 100%;}
}


@media screen and (max-width:1100px) { 
    .mainPageButton>ul>li:hover .secButton {  display:none;}
    .mainPageButton{width:100%;display: block;position: sticky;top: 0;border-radius: 0;height: auto;overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
    .mainPageButton > ul{flex-wrap:nowrap;justify-content: left;}
    .mainPageButton>ul>li:nth-child(1) > a::before{ content:none;}
    .mainPageButton>ul>li:nth-child(2) > a::before{ content:none;}
    .mainPageButton>ul>li:nth-child(3) > a::before{ content:none;}
    .mainPageButton>ul>li:nth-child(4) > a::before{ content:none;}
    .mainPageButton>ul>li:nth-child(5) > a::before{ content:none;}
    .mainPageButton>ul>li:nth-child(6) > a::before{ content:none;}
    .mainPageButton a{padding: 0 10px;font: 18px/1.7 "微軟正黑體";}
    


}


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


/*tab*/
.tabBase  {width: 100%;margin:0px auto 0 auto;position: relative;}
.tabBase ul {display: flex;flex-wrap: wrap;justify-content: center;}

.tabBase ul li {font: 22px/1.4 "微軟正黑體";background: #FFF;border-radius: 20px;margin: 1% 15px;padding:5px 15px;cursor: pointer;transition: 0.3s;}
.tabBase ul li.on,.tabBase ul li:hover{background: #5498e3;color:#FFF;}

@media screen and (max-width:700px) { 
.tabBase{background: #fff;margin:  10px auto;}
.tabBase ul {overflow-x: scroll;white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;flex-wrap: nowrap;justify-content: left;}
.tabBase ul li{font: 3.2vw/1.4 "微軟正黑體";margin: 1% 5px;padding:5px 10px;}
}

@media screen and (max-width:500px) { 
.tabBase ul li{font: 5.2vw/1.4 "微軟正黑體";}
}


.itemArea .item{display: none;}
.itemArea .item.on{display: block;}



/*錨點*/
.HidePoimenu .slidecontain {display: none;}



.slidecontain {display:block;display: flex;flex-wrap: wrap;justify-content: center;}
.slidecontain li {margin:5px 10px;border-bottom: 1px solid #000;}
.slidecontain li:hover{box-shadow: 0px 1px 0px  #000;}
.slidecontain li .anchorLink div {font:18px/1.6 "微軟正黑體";color:#000;}

@media screen and (max-width:1000px) { 
.slidecontain li:hover{box-shadow: none;}

}


.NewPoimenu {display: flex;flex-wrap: wrap;justify-content: center;}
.NewPoimenu li{margin:5px 10px;border-bottom: 1px solid #000;font:18px/1.6 "微軟正黑體";color:#000;cursor: pointer;}
.NewPoimenu li:hover{box-shadow: 0px 1px 0px  #000;}



/*條列模組*/
/*.ph-group  {width: 80%;margin: 0 auto 0px auto;background: #FFF;max-width: 1400px;border-radius: 0 0 20px 20px;padding: 20px 3%;position: relative;}
.ph-group-title {text-align: center;width: 80%;margin: 20px auto 0 auto;background:#5498e3;max-width: 1400px;border-radius: 20px 20px 0 0;}
.ph-group-title span {font:24px/1.6 "微軟正黑體";color:#FFF;}
.type-introlist-left .ph-group-content-text-sale{color: #f43b40; margin: 5px 0 0 5px; font:16px/1.4 "微軟正黑體";}
.type-introlist-left .ph-group-content{border-bottom: 1px dashed #9d9d9d;margin: 15px auto;transition: 0.2s;}
.type-introlist-left .ph-group-content:hover {transform: scale(1.01);}
.type-introlist-left .ph-group-content-photo {display: none;}
.type-introlist-left .ph-group-content-text{position: relative;padding: 0 0 15px 0;}
.type-introlist-left .ph-group-content-text-name{color:#000;font:20px/1.4 "微軟正黑體";}
.type-introlist-left .ph-group-content-text-detail{color:#5498e3;font:16px/1.4 "微軟正黑體"; padding-left: 7px;  margin: 5px 0 0 5px;}
.type-introlist-left .ph-group-content-text-price {background:#f43b40;color:#FFF;position: absolute;right: 0;bottom: 0;border-radius:10px 10px 0 0;padding: 5px 10px;font:18px/1.4 "微軟正黑體";}
.type-introlist-left .ph-group-content-text-price span{font:14px/1.4 "微軟正黑體";}
@media screen and (max-width:1300px) { 
.type-introlist-left .ph-group-content-text {padding: 0 0 40px 0;}  
}
@media screen and (max-width:600px) { 
.type-introlist-left .ph-group-content-text-name{font:16px/1.4 "微軟正黑體";}
.ph-group{padding: 1% 3%;}

.ph-group{width: 90%}
.ph-group-title{width: 90%;}

}
*/



/*圖文模組*/


/*.ph-group {display: flex;flex-wrap: wrap;justify-content: center;}*/

.ph-group {width: 80%;margin: 0 auto 0px auto;background: #FFF;max-width: 1400px;border-radius: 0 0 20px 20px;padding: 20px 3%;display: flex;flex-wrap: wrap;justify-content: center;}
.ph-group-title {text-align: center;width: 80%;margin: 20px auto 0 auto;background:#5498e3;max-width: 1400px;border-radius: 20px 20px 0 0;}
.ph-group-title span {font:24px/1.6 "微軟正黑體";color:#FFF;}


.ph-group .ph-group-content {width: 23%;position: relative;border-radius: 20px;overflow:hidden; margin: 10px; display: flex;flex-wrap: wrap;}
.ph-group .ph-group-content-photo{overflow:hidden; }
.ph-group .ph-group-content-photo img{width: 100%;}
.ph-group .ph-group-content-text-sale{color: #f43b40; margin: 5px auto; font:16px/1.4 "微軟正黑體";}
.ph-group .ph-group-content-text{text-align: center;padding:15px 15px 50px 15px;background:#f0f0f0;height: 100%;width: 100%;margin-top: -2px;}
.ph-group .ph-group-content-text-name{color:#353535;font:bold 18px/1.4 "微軟正黑體"; }
.ph-group .ph-group-content-text-detail{color:#5498e3;font:16px/1.4 "微軟正黑體";text-align: left;margin: 5px auto;}
.ph-group .ph-group-content-text-price{width: 90%;border-radius: 20px;background:#f43b40 ;display: block;color:#FFF;font:20px/1.4 "微軟正黑體";text-align: center;margin:10px auto 5px auto;    align-self: end;
    position: absolute; bottom: 10px; left: 15px;}
.ph-group .ph-group-content-text-price span{font:14px/1.4 "微軟正黑體";}
.link-right{display: none;}


.ph .ph-group-content-tag {position: absolute;left: 0%; top: 15px; background: #ff8500;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;}


@media screen and (max-width:1150px) {
.ph-group .ph-group-content{width: 30%;}

}

@media screen and (max-width:768px) {
.ph-group .ph-group-content{width: 45%;}

}

@media screen and (max-width:560px) {
.ph-group .ph-group-content{width: 90%;}
}








.date { text-align: center; position: relative; margin: -3px 0 0 0;}
.date img{width: 90%; max-width: 807px;margin: 0 auto;}
.date img.datepc{display: block;}
.date img.datem{display: none;}






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


#mtkContainer { width: 100%; height: auto; background: url(../images/header_m2021-2.jpg) top center no-repeat; background-size: 100% auto;  }
header.header { padding: 0; margin: 0 0 -3vw 0; width: 100%; height:40vw;} 
header.header h1 {  display: block;margin: 0; padding: 0;}
header.header h1 img { width: 100% }



nav.otherFesMenu ul li.on a{ }
nav.otherFesMenu ul li a img {width: 100%;}


.date {    margin: -0.3vw 0 0 0;}
}


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

nav.otherFesMenu ul li a{width: auto;
    font-size: 3.2vw;
    line-height: 6vw;
    height: auto;
    }
nav.otherFesMenu {
    width: 90%;
    left: 0;
    margin: 0 0 0 6%;
}
nav.otherFesMenu ul li {
    margin: 0 -4% 0 0;
    width: 22%;
}
.date img.datepc{display: none;}
.date img.datem{display: block;}

}




.informationShow,
.areaIntroduction { display: none; }





/*日曆CSS START*/
.date{padding:100px 0 0 0;}
h2.date-h2{padding:20px 0;font:28px/1 "微軟正黑體";color:var(--type1-color);letter-spacing:2px;text-align:center;}
.date-content{display:flex;margin:0 auto;padding:20px;max-width:800px;box-shadow:0 0 10px rgba(0,0,0,0.2); background: #12bce3;outline: 5px solid #12bce3;  border: 1px solid #FFF;}
.date-content-title{display:inline-flex;width:20%;vertical-align:middle;flex-wrap:wrap;flex-shrink:0;flex-grow:0;align-self:start;}
.date-content-title > div{display:block;width:100%;flex-shrink:0;flex-grow:0;}
.date-content-title-year{margin:18px auto;font:24px/1 "arial","微軟正黑體";color:#ffffff;text-align:center;}
.date-content-title-infor{margin-bottom:10px;font:bold 40px/1 "arial","微軟正黑體";color:#fffa67;text-align:center;}
.date-content-title-time{margin:0 auto;width:80%;font:15px/1.5 "arial","微軟正黑體";color:#FFF;text-align:center;letter-spacing:3px;border-radius:99em;background:#006cab;}
.date-content-title-exp{margin-top:10px;font:13px/1 "arial","微軟正黑體";color:black;text-align:center;letter-spacing:0px;}
.date-content-title-exp span{display:inline-block;width:15px;height:15px;}
.date-content-calendar{display:inline-flex;flex-wrap:wrap;width:80%;background:rgba(0,0,0,0.0);}
.date-content-calendar span{display:inline-block;flex-shrink:0;flex-grow:0;padding:10px 0;width:calc(100% / 7);font:15px/1.5 "微軟正黑體";color:black;text-align:center;background:white;border-radius:7px;border:1px solid#12bce3;}
.date-content-calendar .hod,.date-content-title-exp span:nth-child(1){background:#bcf1ef;}
.date-content-calendar span:nth-child(1),.date-content-calendar span:nth-child(2),.date-content-calendar span:nth-child(3),.date-content-calendar span:nth-child(4),.date-content-calendar span:nth-child(5),.date-content-calendar span:nth-child(6),.date-content-calendar span:nth-child(7){background:#006cab;color:white;}
.date-content-calendar .vac,.date-content-title-exp span:nth-child(2){position:relative;color:white;background:#ff792b;}
.date-content-calendar .vac:after{content:"請假";position:absolute;top:0px;right:5px;font-size:0.5em;color:rgba(255,255,255,0.5);}
/*日曆CSS END*/



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


    .date{ position: relative; margin-bottom:5%;;border-bottom:1px solid rgba(0,0,0,0.15); z-index: 2; padding:100px 0 5% 0;}
    .date h2 { display: none;}
    .date-content{width:90%;flex-wrap:wrap; }
    .date-content-title,.date-content-calendar{width:100%}
    .date-content-title{margin-bottom:6%;}
    

}

.otherFes {display: flex;flex-wrap: nowrap;justify-content: center;width: 100%;margin: 30px auto  20px auto;}
.otherFes li {font:22px/1.3 "微軟正黑體";margin: 0 10px; background: #4488e0;border-radius: 20px;color:#FFF;padding:10px 15px;transition: 0.3s;position: relative;}
.otherFes img{width: 24px;height: 24px;margin-right: 5px;transform: translateY(3px);}
.otherFes li:hover{transform: translateY(-3px);background: #d33636;}
.otherFes li.on:hover{transform: translateY(0px);background: #d33636;}
.otherFes li.on::after{content: "";clip-path: polygon(50% 50%, 0% 0, 100% 0);background: #d33636;position: absolute;bottom: -22px;left:42%;height: 26px;width: 26px;}
.otherFes li.on{background: #d33636;}

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

    .otherFes li  {font:14px/1.3 "微軟正黑體";padding: 10px;}
    .otherFes img {display: none;}
    .otherFes{margin: 10px auto  20px auto;}
}