@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');

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: 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:'Noto Sans TC','微軟正黑體'; 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: sticky;  height: 35px; background:#cfa329e6; text-align: center; z-index: 98;margin:0 auto;width: 100%;top: 0;}
.mainPageButton > ul {  display: flex; flex-wrap: wrap;justify-content: center; }
.mainPageButton > ul > li{width: 200px;}



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


.secButton { display:none; background: #c4ab54;}


.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: 36px;top: -2px;background-size: cover;}
.mainPageButton>ul>li:nth-child(2) > a::before{ content: "";background: url(../images/m07.png);width: 40px;height: 40px;position: absolute;left: 42px;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: 46px;top: -1px;background-size: cover;}
.mainPageButton>ul>li:nth-child(4) > a::before{ content: "";background: url(../images/m03.png);width: 40px;height: 40px;position: absolute;left: 25px;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: 25px;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: 25px;top: -3px;background-size: cover;}
.secButton a {padding: 0 10px;}


#mtkContainer > h2 {text-align: center;font:bold 32px/1.4 'Noto Sans TC','微軟正黑體';color:#FFF;position: relative;width: 270px;margin:60px auto 30px auto;background: #af3b3b;padding: 10px ; }
#mtkContainer > h2::before{ content: "";background: url(../images/h2left.png) no-repeat;width:86px;height: 111px;position: absolute;left: -47px;top:-33px;background-size: cover;}
#mtkContainer > h2::after{ content: "";background: url(../images/h2right.png) no-repeat;width:92px;height: 94px;position: absolute;right: -49px;top:-13px;background-size: cover;}
@media screen and (max-width:500px) { 
#mtkContainer > h2 {font:bold 24px/1.4 'Noto Sans TC','微軟正黑體';width: 200px;margin:40px auto 30px auto;}
/*#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 'Noto Sans TC','微軟正黑體';}
    
    }



.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: 400 22px/1.4 'Noto Sans TC','微軟正黑體';background: #FFF;border-radius: 20px;margin: 1% 15px;padding:5px 15px;cursor: pointer;transition: 0.3s;color: #af3b3b;}
.tabBase ul li.on,.tabBase ul li:hover{background: #f9d955;color:#af3b3b;}

@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 'Noto Sans TC','微軟正黑體';margin: 1% 5px;padding:5px 10px;}
}

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


.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 'Noto Sans TC','微軟正黑體';color:#fff;}

.NewPoimenu {display: flex;flex-wrap: wrap;justify-content: center;}
.NewPoimenu li{margin:5px 10px;border-bottom: 1px solid #fff;font:300 20px/1.6 'Noto Sans TC','微軟正黑體';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;}

}


/*圖文模組*/


.ph-group {width: 80%;margin: 0 auto 0px auto;max-width: 1400px;border-radius: 0 0 20px 20px;padding: 20px 2%;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 34px/1.6 'Noto Sans TC','微軟正黑體';color:#f9d955;}


.ph-group .ph-group-content {width: 23%;position: relative;overflow:hidden; margin: 10px; display: flex;flex-wrap: wrap;background:#fff;padding: 10px;}
.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.6 'Noto Sans TC','微軟正黑體';background: linear-gradient(135deg, #ffec68 0%, #ffd26d 100%);}
.ph-group .ph-group-content-text{text-align: left;padding:15px 15px 50px 15px;height: 100%;width: 100%;margin-top: -2px;}
.ph-group .ph-group-content-text-name{color:#353535;font:600 17px/1.4 'Noto Sans TC','微軟正黑體';}
.ph-group .ph-group-content-text-detail{color:#727272;font:300 15px/1.5 'Noto Sans TC','微軟正黑體';text-align: left;margin: 5px auto;}
.ph-group .ph-group-content-text-price{width:90%;border-radius: 20px;background:#3a975f ;display: block;color:#FFF;font:20px/1.4 'Noto Sans TC','微軟正黑體';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 'Noto Sans TC','微軟正黑體';}
.link-right{display: none;}


.ph .ph-group-content-tag {position: absolute;left: 0%; top: 15px; background: #d53939;font:15px/1.4 'Noto Sans TC','微軟正黑體';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 {padding: 20px 0;}
.ph-group .ph-group-content{width: 100%;}
.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_m2021.jpg) top center no-repeat; background-size: 100% auto; }
header.header { padding: 0; margin: 0 0 -3vw 0; width: 100%; height:34vw;} 
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: 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;} */

}


@media only screen and (max-width: 600px) {
    header.header {height:27vw;} 

}

.informationShow,
.areaIntroduction { display: none; }



/*日曆CSS START*/
.date{padding:40px 0 0 0;}
h2.date-h2{padding:20px 0;font:28px/1 'Noto Sans TC','微軟正黑體';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: #cd9a5d;outline: 5px solid #bd8847;  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:8px auto;font:24px/1.2 'Noto Sans TC','微軟正黑體';color:#ffffff;text-align:center;}
.date-content-title-infor{margin-bottom:10px;font:bold 40px/1 'Noto Sans TC','微軟正黑體';color:#fffa67;text-align:center;}
.date-content-title-time{margin:0 auto;width:80%;font:15px/1.5 'Noto Sans TC','微軟正黑體';color:#FFF;text-align:center;letter-spacing:3px;border-radius:99em;background:#974823;}
.date-content-title-exp{margin-top:10px;font:13px/1 'Noto Sans TC','微軟正黑體';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 'Noto Sans TC','微軟正黑體';color:black;text-align:center;background:white;border-radius:7px;border:1px solid#bd8847;}
.date-content-calendar .hod,.date-content-title-exp span:nth-child(1){background:#e9dfad;}
.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:#974823;color:white;}
.date-content-calendar .vac,.date-content-title-exp span:nth-child(2){position:relative;color:#fff;background:#e9a163;}
.date-content-calendar .vac:after{content:"請假";position:absolute;top:0px;right:5px;font-size:0.5em;color:#955926;}
/*日曆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:40px 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 'Noto Sans TC','微軟正黑體';margin: 0 10px; background: #bb7e43;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: #e77e41;}
.otherFes li.on:hover{transform: translateY(0px);background: #e77e41;}
.otherFes li.on::after{content: "";clip-path: polygon(50% 50%, 0% 0, 100% 0);background: #e77e41;position: absolute;bottom: -22px;left:42%;height: 26px;width: 26px;}
.otherFes li.on{background: #e77e41;}

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

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


.bnAD{margin: 30px auto 30px auto;text-align: center;}
.bnAD img.pc{width: 90%;max-width: 1100px;margin: 0 auto;}
/* .bnAD img.m{width: 90%;max-width: 768px;display: none;margin: 0 auto;} */

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

/* .bnAD img.pc{display: none;}
.bnAD img.m{display: block;} */

}