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

body {overflow-x: hidden; background: #ffde03 url(../images/bg.jpg) top 340px center repeat-y;}
iframe { width: 100%; }

.mobileMenuButton { display: none }
.mainPageButton { position:sticky; position: -webkit-sticky; top:0px; left: 0; width: 100%; margin-bottom: -45px; text-align: center; background: rgba(0,0,0,0.5) ; z-index: 50}
.mainPageButton ul { margin:0 auto; padding: 3px; 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; padding: 3px;}
.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:26px; left: 0; width: 100%; z-index: 2; background: rgba(0,0,0,0.5); }
.hasButton .secButton a { display: block; padding: 5px 0; }
.mainPageButton a:hover {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: 50px 0 0 0; width: 90%; max-width: 1400px; background: #fff; border-radius: 15px; }


/*C23 use*/
.carrier {margin:0 auto 20px auto ; width: 100%; max-width: 1200px; height: auto; text-align: center;}
.intro-anchors { display: none; }
.carrier .box-head{ display:none;}
/*.carrier .box-head p { display:block; }*/
.carrier h4 { position: relative; background:url(../images/h4.png) no-repeat left top; vertical-align: top; display: block; margin:0; padding:10px 0 10px 120px; text-align: left; width: 100%; height:auto; letter-spacing: normal; font: 30px/30px "微軟正黑體","arial"; color: #355de0;}
.carrier ul { display: block; padding: 20px; width:100% ; }
.carrier li{position: relative; box-sizing: border-box; width: 100%; border-bottom: 1px dotted #355de0; line-height: 1.3em; margin: 0 0 20px 0; box-shadow: 5px 5px 10px #e8f4ff; transition: .5s; -webkit-transition: .5s; border-radius: 8px;}
.carrier ul li a { display: block; padding: 10px; font:16px/20px "arial","微軟正黑體"; color: #0a72ff; text-align: left;}
.carrier ul li a strong { 
    margin: -10px -10px 10px -10px;
    padding: 10px 10px 10px 30px;
    background:url(../images/tota1_icon1.png) no-repeat 5px 15px;
    font:20px/30px "arial","微軟正黑體";
    display: block;
    text-align: left;
    color: #545454;
    transition: .5s; -webkit-transition: .5s;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.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 #c026ff; }
.carrier ul li:hover a strong  { background: #9f10da; 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: #0a72ff; 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: 1600px) {
    .topBanner .img img { width: 100%;}
}

@media only screen and (max-width: 1300px) {
    .topBanner .video video { margin-top: 0; }
    .carrier ul {padding:20px 30px;}
    .itemBase .itemArea {padding: 30px 0 0 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; padding: 5px;}

    .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%; margin-top: 10px; z-index: 2; background: rgba(255,255,255,0.2) }
    .hasButton .secButton a { display: block; padding: 5px 0 }
    /*c23*/
    .carrier ul li a strong {margin: -10px -10px 5px -10px; padding: 5px 5px 5px 30px;}
    .carrier ul li em {position: relative; right: inherit; bottom: inherit; display: block; text-align: right; padding-top: 5px;}
    /*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 }
}


/*forC23公版*/
#c23FilterBase { background: #ffde03; }
#c23FilterArea #amount { color: #fff; }
#c23FilterArea #searchRight #searchStart,
#c23FilterArea #searchRight #searchCancel,
#c23FilterArea #slider-range .ui-widget-header,
#c23FilterArea #h4ButtonBase .colorMat {background:#c026ff;}
#c23FilterArea #searchRight #searchStart:hover,#c23FilterArea #searchRight #searchCancel:hover,#c23FilterArea #slider-range:hover .ui-widget-header {
    background: #9f10da;
}
#c23FilterArea .plsKeyword, #c23FilterArea label, #c23FilterArea #amount{color:#333;}
.areaIntroduction { display: none; }
.carrier ul li:hover a strong { background:#c026ff url(../images/tota1_icon1.png) no-repeat 5px 15px;}