body { background:url(../images/bg2.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_pc2023.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: 30px 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: #007fba; /* Old browsers */
background: -moz-linear-gradient(left, #0088c7 0%, #006695 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0088c7 0%,#006695 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0088c7 0%,#006695 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088c7', endColorstr='#006695',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:#07baee;}

.mobileMenuButton { display: none ;}

.mainPageButton {position: relative;  height: 35px; background:#f1a431; text-align: center; z-index: 98;margin:0 auto;border-radius: 0 0 30px 30px; width: 60%;}
.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:#db8e1b;}
.secButton { display:none; background: #f19e22;}


.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: 18px;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 36px/1.4 "微軟正黑體";color:#fffabd;position: relative;width: 270px;margin:60px auto 30px auto;padding: 10px ; }
#mtkContainer > h2::before{ content: "";background: url(../images/h2left.png) no-repeat;width:80px;height: 77px;position: absolute;left: -27px;top:-3px;background-size: cover;}
#mtkContainer > h2::after{ content: "";background: url(../images/h2right.png) no-repeat;width:56px;height: 95px;position: absolute;right: -17px;top:-15px;background-size: cover;}
@media screen and (max-width:500px) { 
#mtkContainer > h2 {font:bold 30px/1.4 "微軟正黑體";width: 200px;margin:40px auto 30px auto;}

#mtkContainer > h2::before,#mtkContainer > h2::after{content: none;}
/*#mtkContainer > h2::before{width:98px;height: 111px;position: absolute;left: -48px;top:-37px;background-size: 100%;}
#mtkContainer > h2::after{width:94px;height: 85px;position: absolute;right: -14px;top:-9px;background-size: 100%;}*/
}



@media screen and (max-width:1600px) { 
    .mainPageButton{ width:90%;}
    /*  .mainPageButton>ul {  overflow-x: inherit;}*/
    
    }
    
    @media screen and (max-width:1150px) { 
    .mainPageButton{ width:100%;}
    /*  .mainPageButton>ul {  overflow-x: inherit;}*/
    
    }
    
    @media screen and (max-width:1100px) { 
     
    .mainPageButton>ul>li:hover .secButton {  display:none;}
    .mainPageButton{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: #5688c7;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: flex;flex-wrap: wrap;justify-content: center;}
.slidecontain li {margin:5px 10px;border-bottom: 1px solid #fff;}
.slidecontain li:hover{box-shadow: 0px 1px 0px  #fff;}
.slidecontain li .anchorLink div {font:18px/1.6 "微軟正黑體";color:#fff;}

.ph-menu svg{display: none;}

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


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

}


/*圖文模組*/
.showPhtitle .ph-title{display: block !important;font: bold 28px / 1.6 'Noto Sans TC', '微軟正黑體';color: #fff;text-align: center;}
.showPhtitle .ph-group-title {display: none;}
.showPhtitle .ph-group-title span {color: #FFF;font:24px/1.6 'Noto Sans TC','微軟正黑體';}
.showPhtitle .slidecontain{display: flex;}
.showPhtitle .slidecontain li{border: none; border-radius: 20px; padding: 5px 10px;}
.showPhtitle .slidecontain li.on,.showPhtitle .slidecontain li:hover{background: #5688c7;box-shadow: none;}
.showPhtitle .slidecontain li.on div,.showPhtitle .slidecontain li:hover div{color: #fff;}
.showPhtitle .slidecontain li.anchorLink div{color: #fff;}

.showPhtitle .ph-group {display: none;}
.showPhtitle .ph-group.on{display: flex;}

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

.ph-group {width: 80%;margin: 0 auto 0px auto;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;max-width: 1400px;border-radius: 20px 20px 0 0;}
.ph-group-title span {font:bold 28px/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-sale a {color: #f43b40;}
.ph-group .ph-group-content-text{text-align: center;padding:15px 15px 50px 15px;background:#fff;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:#4689d3;font:15px/1.5 "微軟正黑體";text-align: left;margin: 5px auto;}
.ph-group .ph-group-content-text-detail a{color:#4689d3;}
.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%;}
.ph-group .ph-group-content-text{padding: 15px;}
.ph-group .ph-group-content-text-price{position: static;width: 100%;}
}






/* 

.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_m2023.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: none;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: 94px 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:50px 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: #1fafa8;outline: 5px solid #1fafa8;  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:#ffe484;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#2dbfb8;}
.date-content-calendar .hod,.date-content-title-exp span:nth-child(1){background:#f5e7b6;}
.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:#278883;color:white;}
.date-content-calendar .vac,.date-content-title-exp span:nth-child(2){position:relative;color:white;background:#5688c7;}
.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:1050px){

.date{padding: 18.5vw 0 0 0;}
}

@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:18.5vw 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: 70px auto  20px auto;}
.otherFes li {font:22px/1.3 "微軟正黑體";margin: 0 10px; background: #e5a838;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: #e5a838;}
.otherFes li.on:hover{transform: translateY(0px);background: #5688c7;}
.otherFes li.on::after{content: "";clip-path: polygon(50% 50%, 0% 0, 100% 0);background: #5688c7;position: absolute;bottom: -22px;left:42%;height: 26px;width: 26px;}
.otherFes li.on{background: #5688c7;}


@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;}
}

.ph-menu-arrow-left{display: none;}
.ph-menu-arrow-right{display: none;}


.top-btn{
    width: 50px;
    height: 50px;
    border-radius: 99em;    
    background: #3bb3d7;
    display: flex;
    align-items: center;
    justify-items: center;
    position: fixed;
    right: 3%;
    bottom: 10%;
    padding: 10px;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10;
  }


  .top-btn:hover{
    height: 55px;
    padding-bottom: 5px;
}

    .top-btn p{
        font-size: 14px;
        color: #FFF;
    }
  
  @media only screen and (max-width:768px){
  
    .top-btn{bottom: 5%;}

}