body { background-color: #00bbff; }
ul,li { text-decoration: none;list-style: none; }
a:hover { text-decoration: none; }

#mtkContainer { width: 100%; height: auto; background: url(../images/header_pc.jpg) top center no-repeat; }
header.header { padding: 0; margin: 0; width: 100%; height: 500px;  }
header.header h1 { display: none; }
nav.otherMenu { width: 100%; text-align: center; }
nav.otherMenu ul {}
nav.otherMenu ul li { position: relative;display: inline-block; margin: 0 20px; width: auto; height: auto;
transition: .5s; border-radius: 99em;}
nav.otherMenu ul li a { padding: 10px 80px; font: 24px/30px "arial","微軟正黑體"; text-align: center; color: #fff;  }

li.Menu1 {background: #eb1693;box-shadow: 3px 3px 0px #b3086d;}
li.Menu2 {background: #1693eb;box-shadow: 3px 3px 0px #0e66a4;}
.Menu1 a:after { font-family:"Material Icons";content:'place' ; margin:0px 0 0 5px; }
.Menu2 a:after { font-family:"Material Icons";content:'place' ; margin:0px 0 0 5px; }

.itemBase{margin-top:200px;text-align: center;}

.searchButton { display:none; transition: .5s; position: fixed;top:10%; left: 15%; cursor: pointer; z-index: 10; }
.c23FilterBaseAppendClose { display: inline-block; padding: 5px 10px; color: #fff; background: rgba(0,0,0,0.8); cursor: pointer; }

.searchButton img{ width: auto; -webkit-animation: topButton 1s  infinite alternate;animation: topButton 1s  infinite alternate; }
@-webkit-keyframes topButton {
  from { padding-top: 0; }
  to { padding-top: 20px; }
}
@keyframes topButton {
  from { padding-top: 0; }
  to { padding-top: 20px; }
}


#c23FilterBase { display: none; position: fixed;top: 10%; left: 0;  width: 100%; text-align: center;  }
#c23FilterArea { margin: 0 auto; padding: 20px; width: 80%; background: rgba(0,0,0,0.7); }
#c23FilterBase  .c23FilterBaseAppendClose { letter-spacing: normal; }

.intro { width: 80%; margin:0 10%; display:inline-block;}
.intro a{position:relative; display:inline-block;font-weight: bold; font-size:22px;font-family: "微軟正黑體"; color: #000; text-align: center; margin:6px 10px; padding:5px 15px;background: #fff500;border-radius: 20px;cursor: pointer; }

.plane {position:absolute; top:100px;left:880px;}


/*C23 use*/
.intro-anchors {display: none;}
.carrier {   margin: 0 auto 20px auto ;width: 100%; max-width: 1200px; height: auto; text-align: center;  }
.carrier .box-head p { display:block; }
.carrier h4 { position: relative; vertical-align: top; display: block; margin:0; padding:20px; width: 100%; height:auto; letter-spacing: normal;  font: 30px/30px "微軟正黑體","arial"; color: #fFF; text-align: center;  }
.carrier ul { display: block; padding: 20px 50px; width:100% ; }
.carrier ul li { position: relative; box-sizing: border-box; width: 100%; margin: 0 0 20px 0; padding: 0 0 25px 0; text-align: left;/* border-top:5px solid #f85523*/; box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: .5s;  -webkit-transition: .5s; background: #fff}
.carrier ul li a { display: block;padding: 0 0 10px 10px;  font:16px/20px "arial","微軟正黑體"; color: #0a72ff}
.carrier ul li a strong { margin: 0 0 10px -10px; padding: 10px; font: 20px/30px "arial","微軟正黑體"; display: block; text-align: left; color: #545454 ;transition: .5s;  -webkit-transition: .5s;}
.carrier ul li em { position: absolute;bottom: 10px; right: 20px;font:16px/16px "arial","微軟正黑體"; color:#f85523; }
.carrier ul li em span {font: 18px/18px "arial","微軟正黑體";}
.carrier ul li:hover { border:1px solid #f85523; }
.carrier ul li:hover a strong  { background: #eb1693 ; color: #fff }


/*C26*/

.group-type-ph { text-align: center;display: block; padding-top: 30px; width: 100%; max-width: 1300px;margin:0 auto; padding-bottom: 20px; }
.group-type-ph .ph { display: inline-block; position: relative; margin:10px; width:300px; text-align: left; vertical-align: top; overflow: hidden;}
.group-type-ph .ph a { display: block; width: 300px; height: 200px; }
.group-type-ph .ph .ph-img,.group-type-ph .ph .ph-img img{display: block;width:300px ; height:200px;margin:0 auto;}
.group-type-ph .ph .ph-img { position: absolute; width: 300px; height: 200px; z-index: 1;
transition: 1s;  -webkit-transition: 1s; }
.ph-title { position: absolute; bottom: 0; padding:2% 5%; width: 100% ; font: bold 16px/20px "arial","微軟正黑體"; text-align: center; color: #fff; background: #000; letter-spacing: 1px; z-index: 2}
.ph-detail { margin: 0 auto; padding:5% 3% 1% 3%; width: 100% ; font: 14px/20px "arial","微軟正黑體"; letter-spacing: 1px; color: #fff; overflow: hidden; background: rgba(0,0,0,0.7);
opacity: 0 ;transition: 1s;  -webkit-transition: 1s;}
.ph img { width: 300px; height: 200px; }
.ph-feature { margin: 0 auto; padding: 0 3%; width:100%; text-align: left;font: bold 14px/20px "arial","微軟正黑體"; color: #fff;background: rgba(0,0,0,0.7);
opacity: 0 ;transition: 1s;  -webkit-transition: 1s; }
.ph em { display: block; padding-bottom: 100px;  width: 100%; font: bold 16px/30px "arial","微軟正黑體"; color: #000; text-align: center; letter-spacing: -2px; color: #fff200; background: rgba(0,0,0,0.7);
opacity: 0;transition: 1s; -webkit-transition: 1s;}
.ph em span{ margin: 0 0 0 -5px ; font: bold 30px/30px "arial","微軟正黑體"; color:  #fff200;}
.ph em i { margin: 0 0 0 -5px }
.ph a,
.ph a:link { color: #000 }

.group-type-ph .ph:hover .ph-img { z-index: -1 ; } 
.group-type-ph .ph:hover .ph-detail { opacity: 1 }
.ph:hover .ph-feature { opacity: 1 }
.ph:hover em { opacity: 1 }

h4 { position: relative; vertical-align: top; display: block; margin:0; padding: 10px 0 0 0; width: 100%; height:auto; letter-spacing: normal;
 font: 30px/30px "Noto Sans TC","arial"; color: #fff; text-align: center !important;  }

 .c26H4Base { padding: 0px 0; text-align: center !important; position: static; top: 0px; left: 0; width: 100%; background: rgba(0,0,0,0.8);
	overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
.c26H4Base div {position:relative; width: 100%; z-index: 10; padding: 0 0px; text-align: center !important; white-space:nowrap; width:auto; border-radius: 0;}
.c26H4Base span { display: inline-block; margin: 0 0 0px 0; padding: 10px 15px; font:16px/16px "arial","Noto Sans TC"; text-align: center !important;color:#fff; 
transition: .5s;-webkit-transition: .5s; cursor: pointer; }
.c26H4Base span:hover { color: #fff200 }



@media only screen and (max-width: 1200px) {
#mtkContainer { width: 100%; height: auto; background: #00bbff; }
header.header { padding: 0; margin: 0; width: 100%; height: auto;  }	
header.header h1 {  display: block;margin: 0; padding: 0;}
header.header h1 img { width: 100% }
.itemBase{margin-top:0;}
.intro-anchors{display: none;}
nav.otherMenu ul li a {padding:0 50px; }
.intro {display: none;}
.plane {display: none;}


}


@media only screen and (max-width: 1050px) {
.mainPageButton ul li { display:inline-block; margin:5px 0; padding: 5px 5px;white-space:nowrap; }
.mainPageButton ul li a,
.mainPageButton ul li a:link {  font:14px/14px "arial","微軟正黑體"; color: #fff; white-space:-1px; }
.mainPageButton ul li a:hover { /*text-decoration: underline !important;*/ border:1px solid #fff;}


.searchButton img { transform: scale(0.6); }

}





@media only screen and (max-width: 768px) {
nav.otherMenu  { background: #790bb3; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
nav.otherMenu ul { height: auto;  white-space:nowrap; width:auto;}
nav.otherMenu ul li { display: inline-block; margin: 0; padding: 0 5%; width: auto; background: none; }
nav.otherMenu ul li a { padding: 0; }
li.Menu1 {background: #eb1693;box-shadow: none;}
li.Menu2 {background: #1693eb;box-shadow: none;}


.mobileMenuButton { display: inline-block; position: fixed; bottom:0; left:50%; padding: 5px; width:auto; height:auto; z-index: 999; background: rgba(0,0,0,0.5) }
.mainPageButton { position:fixed; top:-100vh; left: 0; width: 100%; height: 100vh;margin-bottom:0;background: rgba(0,0,0,0.8); z-index:98; }
.mainPageButton ul { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; text-align: center; }
.mainPageButton ul li { display: block; margin:5px 0; padding: 5px 10px; }
.mainPageButton ul li a,
.mainPageButton ul li a:link { font:16px/16px "arial","微軟正黑體"; color: #fff }
.hasButton { position: relative; z-index: 1 }
.hasButton .secButton { display: block; position: static;width: 100%; z-index: 2; background: rgba(255,255,255,0.2) }
.hasButton .secButton a { display: block; padding: 5px 0 }

.Menu1 a::after { content:none;}
.Menu2 a::after { content:none;}


#c23FilterBase { display: block; top:-200vh;  }
#c23FilterArea { width: 100%; height: 100vh; padding: 5%; }

div.searchButton { display: none; }

.carrier h4 { padding:2%; font: 20px/20px "微軟正黑體","arial";  }



/*C26*/
.group-type-ph .ph { display: inline-block; position: relative; margin:10px; width:300px; text-align: left; vertical-align: top; overflow: hidden;}
.group-type-ph .ph a { display: block; width: 300px; height:auto; }
.group-type-ph .ph .ph-img,.ph-title { position: static;}
.ph-detail,.ph-feature,.ph em { opacity: 1 ; color: #fff ; background: none }
.ph em { display: block; padding-bottom:0; color:#fff200 ; }
.ph em span { color:#fff200 }


}


.informationShow,
.areaIntroduction ,
.mobileFilterButton{ display: none; }