@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; background-position-y: -233px;*/}

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_pc2025.webp) top center no-repeat;*/background: linear-gradient(180deg, #074587 0%, #1a153c 100%);}
#mtkContainer * {vertical-align: top;}

#mtkContainer > h2 {text-align: center;position: relative;margin:70px auto 20px auto; display: block;}
#mtkContainer > h2 b{background: #3bb3d7;font:700 32px/1.4 'Noto Sans TC','微軟正黑體';color:#FFF;border-radius: 30px;padding: 7px 40px;}

@media screen and (max-width:1000px) { 
#mtkContainer { width: 100%; height: auto; /*background: url(../images/header_m2025.webp) top center no-repeat;*/ background-size: 100% auto; }

}

@media screen and (max-width:500px) { 
#mtkContainer > h2 {margin:40px auto 30px auto;}
#mtkContainer > h2 b {font:bold 26px/1.4 'Noto Sans TC','微軟正黑體';}


}

header.header { padding: 0; margin: 0 0 -40px 0; width: 100%; height: 450px; background: url(../images/header_pc2025.webp) top center no-repeat;  }
header.header h1 { display: none; }


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

 header.header { padding: 0; margin: 0 ; width: 100%; height:66vw;background: url(../images/header_m2025.webp) top center no-repeat;background-size: 100% ;} 
 header.header h1 {  display: none;margin: 0; padding: 0;}
 header.header h1 img { width: 100% }
    
}
@media only screen and (max-width: 600px) {
 /* header.header {height:47vw;}  */

}


nav.otherFesMenu {width: 800px; text-align: left; position: relative; left: 50%; margin: 30px 0 0 -394px; z-index: 5; }
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;}


@media only screen and (max-width: 1050px) {
    nav.otherFesMenu ul li a img {width: 100%;}
}
        
@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%; }
}
        
    




.mobileMenuButton { display: none ;}

.mainPageButton {position: sticky;  background:#c88866; 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{position: relative; }
.mainPageButton a {  display: block; color: white; font: 20px/1.8 'Noto Sans TC','微軟正黑體'; padding: 0px 40px ; text-align: center;position: relative;gap: 5px;}
.mainPageButton a:hover,
.mainPageButton>ul>li.active>a { background:#cc845e;}

.secButton { display:none; background: #f3a378;position: absolute; top: 36px; left: 0;width: 100%;}

.mainPageButton>ul>li:hover .secButton {  display: block;}
.secButton a {padding: 0 10px;}

@media screen and (max-width:1500px) { 
     
.mainPageButton>ul>li:hover .secButton {  display:none;}
.mainPageButton{display: flex;position: sticky;top: 0;border-radius: 0;height: auto;overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;flex-wrap: nowrap;justify-content: center;}
.mainPageButton > ul{flex-wrap:nowrap;justify-content: left; }
.mainPageButton a{padding: 0 10px;font: 18px/1.7 'Noto Sans TC','微軟正黑體';}
        
}
    
    
@media screen and (max-width:900px) { 
.mainPageButton{justify-content: left;}
}


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

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

}


/*圖文模組*/


.showPhtitle .ph-title{display: block !important;font: bold 34px / 1.6 'Noto Sans TC', '微軟正黑體';color: #fce412;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: #fce412;}
.showPhtitle .slidecontain li.on div,.showPhtitle .slidecontain li:hover div{color: #2e4ca0;}
.showPhtitle .slidecontain li.anchorLink div{color: #fce412;}

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

/* .slidecontain li .anchorLink div {font:18px/1.6 'Noto Sans TC','微軟正黑體';color:#fff;} */


.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:#fce412;}


.ph-group .ph-group-content {width: 23%;position: relative; margin:30px 10px; display: flex;flex-wrap: wrap;background:#fff;padding:0px;align-content: baseline;}
.ph-group .ph-group-content-photo{ display: flex;flex-wrap: wrap;}
.ph-group .ph-group-content-photo a{order: 2;width: 90%;margin: 0 auto;margin-top: -20px;z-index: 3;}
.ph-group .ph-group-content-photo img{width: 100%;}

.ph .ph-group-content-tag {order: 1;position: relative;left: 0%; top:0;;font:600 17px/1.4 'Noto Sans TC','微軟正黑體';color:#fff;display: block;text-align: center;width: 100%;margin: 0px auto;background: #c88866;padding: 10px 0 30px 0;}

.ph-group .ph-group-content-text-sale{color: #f3281f; margin: 5px auto; font:16px/1.6 'Noto Sans TC','微軟正黑體';background: #fff4bc;}
.ph-group .ph-group-content-text-sale a{color: #f3281f; }
.ph-group .ph-group-content-text{text-align: left;padding:15px 15px 50px 15px;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-detail a{color:#727272;}
.ph-group .ph-group-content-text-price{width:80%;display: block;color:#f31515;font:700 24px/1.4 'Noto Sans TC','微軟正黑體';text-align: center;margin:10px auto 5px auto; 
    position: absolute; bottom: 5px; left: 50%;transform: translateX(-50%);border-radius: 40px;}
.ph-group .ph-group-content-text-price span{font:17px/2 'Noto Sans TC','微軟正黑體';}
.link-right{display: none;}


.item-fit .ph-group .ph-group-content-photo{display: none;}


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

}



.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: #b80f17;outline: 5px solid #8d0a10;  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:#ff5c56;}
.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#b80f17;}
.date-content-calendar .hod,.date-content-title-exp span:nth-child(1){background:#fff4bc;}
.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:#b80f17;color:white;}
.date-content-calendar .vac,.date-content-title-exp span:nth-child(2){position:relative;color:#000;background:#ffdacc;}
.date-content-calendar .vac:after{content:"請假";position:absolute;top:0px;right:5px;font-size:0.7em;color:#b80f17;}
/*日曆CSS END*/



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


    .date{ position: relative; margin-bottom:5%;; 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: #c88866;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: #3bb3d7;}
.otherFes li.on:hover{transform: translateY(0px);background: #3bb3d7;}
.otherFes li.on::after{content: "";clip-path: polygon(50% 50%, 0% 0, 100% 0);background: #3bb3d7;position: absolute;bottom: -22px;left:42%;height: 26px;width: 26px;}
.otherFes li.on{background: #3bb3d7;}

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


.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%;}

}