* { box-sizing: border-box; }
/*.setop { display: none }*/
.go2fb , .scroll2top { display: none !important}

body {overflow-x: hidden; background: #eee}
iframe { width: 100%; }

.mobileMenuButton { display: none }
.mainPageButton { position:sticky; position: -webkit-sticky; top:0px; left: 0; width: 100%; margin-bottom: -36px; text-align: center; background: rgba(0,0,0,0.5) ; z-index: 50}
.mainPageButton ul { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; text-align: center; white-space:nowrap; }
.mainPageButton ul li { display:inline-block; margin:5px 0; padding: 5px 10px;white-space:nowrap;  }
.mainPageButton ul li a,
.mainPageButton ul li a:link {  font:16px/16px "arial","微軟正黑體"; color: #fff; white-space:nowrap;  }
.mainPageButton ul li a:hover { /*text-decoration: underline !important;*/ border:1px solid #fff; }



.hasButton { position: relative;  z-index: 1 }
.hasButton .secButton { display: none; position: absolute; top: 10px; left: 0; width: 100%; z-index: 2; background: rgba(0,0,0,0.5) }
.hasButton .secButton a { display: block; padding: 5px 0 }
.hasButton > a {color: #fff200 !important;}


.topBanner { position: relative; width: 100%; z-index: -1; }
.topBanner h1 { position: absolute; top:30%; display: inline-block; width: 100%;  text-align: center;  text-shadow: 0 0 20px rgba(0,0,0,1);z-index: 5 }
.topBanner h1 .text { display: inline-block;  padding: 10px; /*background: rgba(0,0,0,0.8)*/;}
.topBanner h1 .text b { display: block;font: 100px/100px "arial","微軟正黑體"; color: #fff; }
.topBanner h1 .text small { display: inline-block; transform: translateY(-0px); padding: 2px 5px; font: 20px/20px "arial","微軟正黑體"; color: #fff;  letter-spacing: 5px; border:1px solid #fff;background: rgba(0,0,0,0.5)}
.topBanner .img { width: 100%; height: auto; overflow: hidden; display:  flex; vertical-align: top; align-items: center;justify-content:  center}
.topBanner .img img { /*position: absolute; top:0; left: 0;*/ margin:0 auto; width: auto; vertical-align: top; z-index: 1 }




/*
.topBanner .video { position: relative; width: 100%; height: 500px; overflow: hidden; }
.topBanner .video video { position: absolute; top: 0; left: 0; margin-top: -20%; width:100%; height:auto;  }
*/

.bannerBase { margin:20px 0 0 0; padding:0;   }
.bannerBase .bannerArea { position: relative; margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; border-radius: 5px; overflow:; z-index: 1;
	letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */}
.bannerBase .bannerArea {}
.bannerBase .bannerArea img { width: 100%; vertical-align: top }
.bannerBase .bannerArea .box3 { margin:0 5px; display: inline-block; width: 30% }
.itemBase { padding:0;  }
.itemBase .itemArea  { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; }


/*C23 use*/
.carrier {   margin: 0 0 20px 0 ;width: 100%; height: auto; text-align: center;  }
.intro-anchors { display: none; }
.box-head {display: none;}
.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: #f85523; text-align: center;  }
.carrier ul { display: block; padding: 20px; 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 #e5e5e5;
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: #f85523 ; color: #fff }


/*C26*/

.group-type-ph { text-align: center;display: block; padding-top: 30px; width: 100%; max-width: 1400px;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: #ae0a02; 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 }
 


.informationBase { margin:20px 0 100px 0; padding:0;   }
.informationBase h2 { margin:0px 0 20px 0; font:30px/30px "arial","微軟正黑體"; color: #457cce; text-align: center; letter-spacing: normal; }
.informationBase .informationArea { position: relative; margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; border-radius: 5px; overflow:; z-index: 1;
	letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */}
.informationBase .informationArea {}
.informationBase .informationArea img { width: 100%; vertical-align: top }
.informationBase .informationArea h3 { padding: 5px 0; width:100%; font:20px/16px "arial","微軟正黑體"; color: #fff; text-align: center; letter-spacing: normal;  background:#000}
.informationBase .informationArea p { padding: 5px ;width:100%; font:16px/24px "arial","微軟正黑體"; color: #555; text-align: center; letter-spacing: normal; }
.informationBase .informationArea .box3 { margin:0 5px; cursor: pointer; }

.informationShow { display: none; position: fixed; top:0; left: 0; width: 100%; height: 100vh; text-align:center;  background: rgba(0,0,0,0.8); z-index: 99999 }
.informationShow .box3 { margin:20px auto 0 auto; width: 90%; max-width: 800px; }
.informationShow .box3 img { width: 100% }
.informationShow .box3 h3 { padding: 5px 0; width:100%; font:30px/36px "arial","微軟正黑體"; color: #fff; text-align: center; letter-spacing: normal;}
.informationShow .box3 p{ padding: 5px ;width:100%; font:18px/30px "arial","微軟正黑體"; color: #fff; text-align: center; letter-spacing: normal; }
.informationShow .closeInformationShow { display: inline-block; padding: 5px 10px; font:18px/18px "arial","微軟正黑體"; color: #fff; text-align: center; border: 1px solid #fff; letter-spacing: normal; cursor: pointer;}


@media only screen and (max-width: 1300px) {
.topBanner .video video { margin-top: 0; }
}

@media only screen and (max-width: 995px) {
.topBanner img {  width: 200%;}
.topBanner .video video {  width: 120%; }
}


@media only screen and (max-width: 768px) {
.mobileMenuButton { display: inline-block; position: fixed; bottom:0; left:calc(50% + 15px); 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 }

 
}

@media only screen and (max-width: 768px) {
.topBanner h1 { position: absolute; top:20%; width: 100%; }
.topBanner h1 .text b { font:40px/40px "arial","微軟正黑體"; color: #fff; text-align: center;  }
.topBanner h1 .text small { display: inline-block; transform: translateY(0px); padding: 2px 5px; font: 16px/16px "arial","微軟正黑體";  letter-spacing: 5px; border:1px solid #fff; }

.topBanner .img { height: auto; }
.topBanner .img img { width: 100% }

.itemBase { padding-top: 5%  }

.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 }
.carrier ul li {  padding-bottom:8%;  }
.carrier ul li a img { display: block; margin: 0 auto; margin-left: -2%; margin-top:-2%; width: 104%; height: auto; }
.carrier ul li a { text-align: left; padding: 2% }


/*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: #000 ; background: none }
.ph em { display: block; padding-bottom:0; color:#ae0a02 ; }
.ph em span { color:#ae0a02 }

}