* { box-sizing: border-box; }
/*.setop { display: none }*/
body {background: #f5f5f5; 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:20%; width: 100%; font:100px/100px "arial","微軟正黑體"; color: #fff; text-align: center; text-shadow: 0 0 20px rgba(0,0,0,0.8);z-index: 5 }
.topBanner h1 small { display: inline-block; transform: translateY(-50px); padding: 2px 5px; font: 20px/20px "arial","微軟正黑體";  letter-spacing: 5px; border:1px solid #fff; }
.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: 20px 0 ;width: 100%; height: auto; text-align: center;  }
 

.intro-anchors { display: none; }
.carrier .box-head p { display: inline-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: #555; 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; text-align: left;background: #fff}
.carrier ul li a { display: block;padding: 0 0 10px 10px;  font:16px/20px "arial","微軟正黑體"; color: #33a9f3}
.carrier ul li a strong { margin: 0 0 10px -10px; padding: 10px; font: 20px/30px "arial","微軟正黑體"; display: block; text-align: left; color: #545454 }
.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:3px solid #f85523; }
.carrier ul li:hover a strong  { background: #f85523 ; color: #fff }


.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;  background:#fff}
.informationBase .informationArea .box3 { margin:0 5px; }

@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: 9999; 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%; font:40px/40px "arial","微軟正黑體"; color: #fff; text-align: center; text-shadow: 0 0 20px rgba(0,0,0,0.8) }
.topBanner h1 small { display: inline-block; transform: translateY(0px); padding: 2px 5px; font: 16px/16px "arial","微軟正黑體";  letter-spacing: 5px; border:1px solid #fff; }

.topBanner .img { height: 300px; }


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

}
















.mobileFilterButton { display: none }
#c23FilterBase { position: sticky;position: -webkit-sticky; top:0; padding: 15px 0; text-align: center; background: #424242 ; z-index: 999 ;}
#c23FilterBase * { vertical-align: top ; box-sizing: border-box;border-radius:5px; }
#c23FilterBase * { border: 0;  letter-spacing: -0.31em;     *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed; }
#c23FilterArea { margin:0 auto; width: 80%; max-width: 1100px;  }
#c23FilterArea .box2 { display: inline-block; width: 50% }
#c23FilterArea .box2.sliderBarArea { padding: 0 2% 10px 2% }
#c23FilterArea .showPrice { margin:0 0 8px 0; }
#c23FilterArea label { letter-spacing: 0; font: 15px/15px "微軟正黑體","arial"; color: #fff }
#c23FilterArea #slider-range { margin:0 auto; padding: 0; width:100% }
#c23FilterArea #slider-range .ui-slider-handle {box-shadow: 0 0 10px rgba(0,0,0,0.5)}
#c23FilterArea #slider-range .ui-corner-all {  border-radius: 99em }
#c23FilterArea #slider-range .ui-widget-header {  background:#f85523 }
#c23FilterArea #amount { border: 0; letter-spacing: 0; color: #f85523; background: transparent; }
#c23FilterArea #searchLeft , #c23FilterArea #searchRight  { display: inline-block; }
#c23FilterArea #searchLeft { width: 70% }
#c23FilterArea #searchRight { width: 30% }
#c23FilterArea #searchRight #searchStart { display: inline-block; width: 80%; height: 40px;letter-spacing: 0; font: 15px/40px "微軟正黑體","arial"; color: #fff;background: #f85523; cursor: pointer; }
#c23FilterArea #searchRight #searchCancel { display: inline-block; margin: 0 2%; width: 16%; height: 40px;letter-spacing: 0; font: 15px/40px "微軟正黑體","arial"; color: #fff;background: #f85523; cursor: pointer; }
#c23FilterArea #searchInput { display: inline-block; width: 100%; border: 0; color: #424242; background: #fff; }

#c23FilterArea .plsKeyword { margin:0 0 8px 1%;  text-align: left;letter-spacing: 0; font: 15px/15px "微軟正黑體","arial"; color: #fff }
#c23FilterArea #searchInput { margin:0 1%; width: 98%; letter-spacing: 0;color: #424242;}
#c23FilterArea #h4ButtonBase { position: relative; margin:10px 0 0 0; padding: 5px 20px; width: 100%; text-align: left; background: #fff ; overflow: hidden;}
#c23FilterArea #h4ButtonBase > p { position: relative;display: inline-block; padding: 2px 5px; letter-spacing: 0; font: 18px/18px "微軟正黑體","arial"; color: #fff; background:#f85523;z-index: 2}
#c23FilterArea #h4ButtonBase a { display: inline-block; position: relative; margin:0 5px; padding: 0 10px; letter-spacing: 0; font: 18px/18px "微軟正黑體","arial"; color: #424242; cursor: pointer; white-space:nowrap; z-index: 2}
#c23FilterArea #h4ButtonBase a:hover { color: #fff }
#c23FilterArea #h4ButtonBase .colorMat { position: absolute; top:0; left:  0; width: 0px; height: 0px; background: #f85523 ; z-index:1 }
.highLight { background: #fff200 }



@media only screen and (max-width: 768px) {
.mobileFilterButton { display: inline-block; position: fixed; bottom:0; left:calc(50% - 25px); padding: 5px; width:auto; height:auto; z-index: 9999; background: rgba(0,0,0,0.5) }

#c23FilterBase { position: fixed; top: -100vh; height: 100vh; background: rgba(0,0,0,0.8) }

#c23FilterArea .box2 , #c23FilterArea .box2.sliderBarArea { display:block; margin: 0 auto 5% auto; padding: 5% 0; border-bottom: 1px solid rgba(255,255,255,0.5); width: 100%;}
#c23FilterArea #searchLeft { width: 60% }
#c23FilterArea #searchRight { width: 40% }
#c23FilterArea #h4ButtonBase > p { width: 100% ; text-align: center; }
#c23FilterArea #h4ButtonBase { margin:5% 0; padding:5%; letter-spacing: 0; font: 18px/30px "微軟正黑體","arial"; color: #424242; cursor: pointer;}

}