body{ overflow-x: hidden !important; }
#mtkContainer{ box-sizing: border-box; }

/*---版頭---*/
header.header{ width: 100%; height: 835px /*848px*/; background: url(../images/topBg.jpg) top center no-repeat; position: relative;}
.middle{ width: 100%; max-width: 1280px; margin: 0 auto; }

header.header .boxBg{width: 1000px;height: 848px; margin: 0 auto; position: relative; /*background: rgba(0,0,0,0.5);*/}
header.header .boxBg h1.title{ position: relative; }
header.header .boxBg h1 .pc{ width: 100%;  top:225px; left: 200px; position: absolute; max-width: 595px;}
header.header .boxBg h1 img{ width: 100%;}


/*---ilogo---*/

/*
.ilogo{position: absolute; top: 45px; left: 50%; margin-left: -660px; z-index: 98; width: 18%;  max-width: 177px;}
.ilogo img{width: 100%;}
.ilogo .btnilogo{transition: all 0.2s; display: block; position: absolute; z-index: 97; animation:ilogo 0.4s linear infinite alternate;}
.ilogo .btnilogo:hover{filter: brightness(1.2); animation: paused;}
@keyframes ilogo {
   from {top: 0;}
     to {top: -4px;}
}

.ilogo .links{font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; background: rgba(0,0,0,0.7); padding: 145px 0 0 0; margin: 0 auto; width: 75%; max-width: 142px; overflow: hidden;z-index: 999;}
.ilogo .links li{ border-bottom: 1px #999999 solid;}
.ilogo .links li:last-child{border:none;}
.ilogo .links li a{display: block; color: #fff;padding: 12px 10px; font-size: 16px; text-align: center;  transition: all 0.2s;}
.ilogo .links li a:hover{background: rgba(0,0,0,1); color: #fff100;}
*/


/*---棋盤格---*/
.box_gn{ width: 138px;height: 122px;background-color: #5daf1f; position: absolute; padding: 2px 0 0 0;}
.box_bl{ width: 138px;height: 122px;background-color: #3f6eb4; position: absolute; padding: 2px 0 0 0;}
.box_yl{ width: 138px;height: 122px;background-color: #fff6d0 /*#fff7e4*/; position: absolute; padding: 6px 0 0 0;}

.btn1{top:45px; left:852px; border-radius: 0 6px 0 0;}
.btn2{top:169px;left:852px;}
.btn3{top:293px;left:852px;}
.btn4{top:417px;left:852px;}
.btn5{top:541px;left:852px;}
.btn6{top:665px;left:852px; border-radius: 0 0 6px 0;}

.btn7{top:665px;left:712px;}
.btn8{top:665px;left:572px;}
.btn9{top:665px;left:432px;}
.btn10{top:665px;left:292px;}
.btn11{top:665px;left:152px;}
.btn12{top:665px;left:12px; border-radius: 0 0 0 6px;}

.btn13{top:541px; left:12px;}
.btn14{top:417px; left:12px;}
.btn15{top:293px; left:12px;}
.btn16{top:169px; left:12px;}
.btn17{top:45px; left:12px; border-radius: 6px 0 0 0;}

.btn18{top:45px; left:152px;}
.btn19{top:45px; left:292px;}
.btn20{top:45px; left:432px;}
.btn21{top:45px; left:572px;}
.btn22{top:45px; left:712px;}

.flag{text-align: center;}
.food{text-align: center; display: none;}
.txt{text-align: center;}



.mobile{display: none;}



/*pageMenu*/
.pageMenu { text-align: center; position:sticky /*黏*/; top: 0px; z-index: 999; background: #63280d;/* background: rgba(100,40,13,0.8);padding: 0.5% 0; #823e1b*/ }
.pageMenu .button { display: inline-block; padding: 10px 20px; /*background: #451300;*/transition: all 0.3s; }
.pageMenu .button a,
.pageMenu .button a:link { font:bold 26px/1.6 arial, 微軟正黑體; color: #fff; }
.pageMenu .button:hover { background: #1f0a00; }



/*---特色餐廳---*/
.restaurantArea{width: 100%; height: 880px;background: url(../images/foodBg.jpg) top center no-repeat #ff723a; position: relative;}

.picArea{ max-width: 1400px; margin: 0 auto; text-align: center;}
.foodTitle{text-align: center; max-width: 800px; /*width: 70%;*/ margin:0 auto; padding: 3.8% 0 2.5%;}
.foodTitle img{width: 100%;}
.foodImg{text-align: center;max-width: 1200px; margin: 0 auto; position: relative; box-shadow: 0px 6px 26px rgba(0,0,0,0.3);}
.foodImg img{width: 100%;}
.foodImg .text{width: 40%;background: rgba(0,0,0,0.6); top: 28%; right: 0; position: absolute; text-align: left;}
.foodImg .text h5{color: #fff; font: 24px/1.6 "arial", "微軟正黑體"; font-weight: bold; padding: 3% 0 0 3%;}
.foodImg .text p{color: #fff; font:18px/1.5 "arial", "微軟正黑體"; text-align: justify; padding: 1% 3% 3%;}
.foodImg .text p span.reference{ font-size: 14px; text-align: right; display: block;}


    /*---按鈕click---*/
    .info{width: 100%; margin: -40px auto 0; position: relative;}
    .info .title1{display: inline-block; width: 20%; font-size: 25px; color: #fff; text-align: center; line-height: 1.4; background:#b31500; padding: 1% 1%; margin: 0 5px;
    cursor: pointer; border-radius: 15px;
    -webkit-transition: all 0.5s;   
       -moz-transition: all 0.5s;  
         -o-transition: all 0.5s; 
         transition: all 0.5s; }

    .info .title1:hover{ background: #ffde00; color: #801c1c;}
    .info .active{ background: #ffde00; color: #801c1c;}


.picBox{margin: 0 auto;  width: 100%; }
.foodImg{display: none;}
.foodImg.show{display: block;}

.viewImg{display: none;}
.viewImg.show{display: block;}



/*---景點勝地---*/
.viewPoint{width: 100%;height: 880px; background: url(../images/viewBg.jpg) top center no-repeat #26bdd3 ; position: relative;}
.viewTitle{text-align: center; max-width: 800px; /*width: 70%;*/ margin:0 auto; padding: 3.8% 0 2.5%;}
.viewTitle img{width: 100%;}
.viewImg{text-align: center;max-width: 1200px; margin: 0 auto; position: relative; box-shadow: 0px 6px 26px rgba(0,0,0,0.3);}
.viewImg img{width: 100%;}
.viewImg .text{width: 40%;background: rgba(0,0,0,0.6); top: 28%; left: 0; position: absolute; text-align: left;}
.viewImg .text h5{color: #fff; font: 24px/1.6 "arial", "微軟正黑體"; font-weight: bold; padding: 3% 0 0 3%;}
.viewImg .text p{color: #fff; font:18px/1.5 "arial", "微軟正黑體"; text-align: justify; padding: 1% 3% 3%;}

    /*---按鈕click---*/
    .viewInfo{width: 100%; margin: -40px auto 0; position: relative;}
    .viewInfo .title2{display: inline-block; width: 18%; font-size: 25px; color: #fff; text-align: center; line-height: 1.4; background: #004d66; padding: 1% 1%; margin: 0 5px;
    cursor: pointer; border-radius: 15px;
    -webkit-transition: all 0.5s;   
       -moz-transition: all 0.5s;  
         -o-transition: all 0.5s; 
         transition: all 0.5s;
    }

    .viewInfo .title2:hover{ background: #e8591f; }
    .viewInfo .active{ background: #e8591f; }




/*---goods C23---*/
.goodsArea{width: 100%;height: auto; background: url(../images/c23Bg.jpg) top center repeat-y; position: relative; padding-bottom: 1%;}
/*.goods{width: 90%; text-align: left; letter-spacing: normal;}*/
.goodsTitle{text-align: center; max-width: 721px; /*width: 70%;*/ margin:0 auto; padding: 3.5% 0 3%;}
.goodsTitle img{width: 100%;}


/*C23模組*/
.goods{width: 90%; text-align: left; letter-spacing: normal;position: relative;}

.intro-anchors{ display: none;} /*關*/
.carrier .box-head{ display: none;} /*關*/
.carrier{ width:100%; font-family:"Microsoft JhengHei","Apple LiGothic Medium"; /*margin: 0 0 40px 0;*/ ;}
.carrier h4{ position: relative;text-align: center;font-size: 30px;font-weight: bold;letter-spacing: 0.1em; color: #63280d;/*display: none;*/}
.carrier ul{ display: block; padding-bottom: 2%; }
.carrier li{ position: relative; width: 100%; letter-spacing: normal; }
.carrier li a{ display: block; width: 100%; text-decoration: none; color: #63280d; font-size: 18px; line-height: 1em; padding: 0 1% 2% 1%;text-align: left;  
  font-family: "Arial","微軟正黑體", "Microsoft JhengHei","sans-serif;"}
.carrier li strong{ display: block; width: 100%; font-size: 24px; line-height: 1.2; font-weight: bold; margin:10px 0; color: #df2a00; padding: 1% 25% 1% 0;border-bottom: dotted 1px;}
.carrier li .price{ display: block; width: 23%; text-align: center;padding:0; font-family:"Century Gothic","Helvetica","Microsoft JhengHei"; font-weight: bold; 
font-size: 14px; color: #df2a00; position: absolute; top: 0; right: 0; border:2px solid #df2a00; border-radius: 30px; line-height: 1.6;}
.carrier li .price span{ font-size: 24px; font-weight: normal;}
.carrier ul li:hover .price{ background: #df2a00; color: #fff; transition: all 0.3s;}




/*menuBar*/
.fixBase { display: none; position: fixed; bottom:26%; left: 2%; z-index: 99;text-align: center;}
.fixBase li { display: block; color: #fff;cursor: pointer; margin: 10% 0; font: 20px/1.2 "arial", "微軟正黑體"; cursor: pointer;background: rgba(0,0,0,0.6); border-radius: 99em; width: 80px; height: 80px; padding: 17px 12px;}
.fixBase li a{color: #fff;}
.fixBase li:hover { background: rgba(0,0,0,0.8); }
.fixBase li:hover a{ color: #fedd52; }

.fixBase li.cw{ padding: 18px 9px;}

/*goTop*/
.goTop { display: none; position: fixed; bottom:17%; left: 2%; z-index: 99;text-align: center;}
.goTop a{color: #fff;}
.goTop li { display: block; color: #fff;cursor: pointer; font: 18px/1.2 "arial", "微軟正黑體"; cursor: pointer;background: rgba(0,0,0,0.6); border-radius: 99em; width: 80px; height: 80px; padding: 20px 15px;}
.goTop a:hover li{color: #fedd52; background: rgba(0,0,0,0.8);}






/*-------------------------------Mobile-------------------------------*/


@media only screen and (max-width: 1330px){
/*menuBar*/
    .fixBase { display: block !important; 
        white-space: nowrap; width: 100%; 
        overflow-y: hidden; 
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        position: fixed;
        display: block;
        bottom: 0;
        left: 0;
        height: 40px;
        z-index: 90;
        border-radius: 0;
        background: rgba(0,0,0,0.8);

    }
    .fixBase li { width: auto;
        display: inline-block;
        cursor: pointer;
        margin: 0% 2%;

        width: auto;
        height: 40px;
        padding: 10px 12px;
        border-radius: 0;
        background: rgba(0,0,0,0);
    }


.fixBase li.cw{ padding: 10px 12px;}

/*goTop*/
.goTop { bottom: 6%;}


}


@media only screen and (max-width: 1220px){
/*
.ilogo { left: 0; margin-left: 20px; width: 18%;}
.ilogo .links { padding: 80% 0 0 0;}
*/
.restaurantArea{width: 100%; height: auto; padding-bottom: 4%; background: #ff733a;}  
.viewPoint{width: 100%;height: auto; padding-bottom: 4%; background: #34bbcf;}
.goodsArea{width: 100%;height: auto; background: #b9df45; padding-bottom: 3%; }

/*.info .title1{width: 16%;font-size:26px;}
.viewInfo .title2{width: 18%;font-size: 26px;}*/

.picBox {width: 92%;}

.fixBase li{ font: 2vw/1.4 "arial", "微軟正黑體";}
}



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

.info,
.viewInfo {margin: 2% auto;}

.info .title1,
.viewInfo .title2{ font-size: 2.5vw; margin: 0 2px;}


.viewTitle,
.foodTitle,
.goodsTitle{ width: 70%;}


.foodImg .text{width: 100%; bottom: 0; top: inherit;}
.viewTitile{padding: 3.5% 0;}
.viewImg .text{width: 100%; bottom: 0; top: inherit;}


}




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


/*黏人精
.fixBase { display: block !important; 
    white-space: nowrap; width: 100%; 
    overflow-y: hidden; 
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    height: 40px;
    z-index: 90;
    border-radius: 0;
}
.fixBase li { width: auto;
    display: inline-block;
    color: rgb(255, 255, 255);
    cursor: pointer;
    margin: 0% 5%;
    font: 16px/24px "arial", "微軟正黑體";}*/
    
}



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

.btnArea{display: none;}
header.header{background: none;height: 100%;}
header.header .boxBg{ width: 100%;height: 100%; margin: 0 auto; position: relative;}
header.header .boxBg h1 .pc{display: none;}

.mobile{display:block; width: 100%; height: auto; position: relative; margin: 0 auto;}

}    



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


.restaurantArea ,.viewPoint ,.goodsArea{width: 100%; height: auto; padding-bottom: 2%;}  

.foodImg, .viewImg{box-shadow: none;}

.foodImg .text,
.viewImg .text{position: relative;background: rgba(255,255,255,0.5);}

.foodImg .text h5,
.viewImg .text h5{color: #000; font: 2.8vw/1.6 "arial", "微軟正黑體"; font-weight: bold; padding: 2.5% 0 0 2.5%;}

.foodImg .text p,
.viewImg .text p{color: #000; font:2.5vw/1.5 "arial", "微軟正黑體"; text-align: justify; padding: 1% 2.5% 2.5%;}

.foodImg .text p span.reference{ font-size: 2vw;}

.info .title1{ width: 35%;font-size: 3vw; margin: 1% 0.5%;}

.viewInfo .title2{width: 30%;font-size: 2.6vw; margin: 1% 0.5%;}


/*---C23---*/
.text ul{ display: block; padding-bottom: 8%; }
.text ul li{ display: block; position: relative; line-height: 2.4;}
.text ul li strong{ line-height: 1.2; padding: 1% 0 ;}
.text ul li .price{ position: static; width: 100%; line-height: 1.8;}



/*.carrier h4{ position: relative;text-align: center;font-size: 30px;font-weight: bold;letter-spacing: 0.1em;}*/
.carrier ul{ display: block; padding-bottom: 2%; }
.carrier li{ display: block; position: relative; line-height: 2.4; }
.carrier li a{ display: block; width: 100%; font-size: 18px; line-height: 2em; padding: 0 1% 6% 1%;text-align: left; }
.carrier li strong{ line-height: 1.2; margin:10px 0; padding: 1% 0;}
.carrier li .price{ width: 100%; text-align: center;padding:0; font-weight: bold; font-size: 14px;position: static; line-height: 1.8;}

.fixBase li{ font: 2.5vw/1.4 "arial", "微軟正黑體";padding: 8px 12px;}

}



@media only screen and (max-width: 768px){
/*
.ilogo{top: 35px; margin-left: 10px; width: 22%;}
*/
.foodTitle, .viewTitle{width: 100%; padding: 6% 0 5%;}
.goodsTitle{width: 84%; padding: 7% 0 5%;}

}



@media only screen and (max-width: 650px){
/*
.ilogo .links li a{font-size: 14px; padding: 10px 8px;}
*/


.pageMenu .button { display: inline-block; padding: 1% 3%; }
.pageMenu .button a,
.pageMenu .button a:link { font:bold 4vw/1.6 arial, 微軟正黑體; color: #fff; }


.fixBase li{ font: 3.5vw/1.4 "arial", "微軟正黑體";padding: 8px 12px;}


}






@media only screen and (max-width: 414px){
.fixBase li{ font: 4.5vw/1.4 "arial", "微軟正黑體";}
.foodImg .text p span.reference{ font-size: 1.5vw;padding-top: 5px;}
}


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

/*.ilogo .links li a{padding: 12px 0;}*/

/*.fixBase li { margin: 0% 2%; font: 14px/24px "arial", "微軟正黑體";}*/
}