.width1100px { position: relative; margin:0 auto; padding: 0; width: 1100px }
.topHeader { position: relative; height: 500px; background: url(../images/bg_header.jpg) top center no-repeat; }
.topHeader h1 { position: relative; display: inline-block; transform: translateX(-48px); z-index: 2 }
.topHeader .ani_item { display: inline-block; position: absolute; top:54px; left: 480px; z-index: 1 }
.cc { display: none; }
.mainMenu {position: relative; top:0; padding: 5px; height: 75px; text-align: center; z-index: 1; background: #231815 }
.mainMenu .button { position: relative;display: inline-block; margin: 0 20px; vertical-align: top }
.mainMenu .button .hoverAni { display: inline-block; position: absolute;top:0; left: -10px; }
.mainMenu .button:hover .hoverAni img { -webkit-animation: hoverAni 0.3s infinite alternate; animation: hoverAni 0.3s infinite alternate; }
@-webkit-keyframes hoverAni {
  from { transform: translateY(0);  }
  to {  transform: translateY(-5px); }
}
@keyframes hoverAni {
  from { transform: translateY(0);  }
  to {  transform: translateY(-10px); }
}

#h4ButtonInput { text-align: center; }
#h4ButtonInput a { display: inline-block; margin:10px 0; padding: 0px 10px; font: bold 18px/18px "arial","微軟正黑體";  color:  #231815 ; cursor: pointer;}


.contentBase { position: relative; background: #f7ae1f; z-index: 2 }
.contentBase:nth-child(even) { background: #a2daf4 }
/*C23 use*/
.carrier {   margin:0 ;width: 100%; height: auto; text-align: center;  }
.intro-anchors,.box-head { 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: #fff; 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; border-radius: 20px; overflow: hidden; 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 }



@media only screen and (max-width: 1100px) {
.width1100px { position: relative; margin:0 auto; padding: 0; width: 90% }

}
@media only screen and (max-width: 900px) {
	.topHeader { height: auto; }
	.topHeader .ani_item { display: none }
.topHeader h1 { display:block; transform: translateX(0);  }
.topHeader h1 img { width: 100% }
.mainMenu {position: relative; padding: 5px; height: auto; text-align: center; z-index: 1; background: #231815 }
.mainMenu .button { position: relative;display: inline-block; margin: 0 0px; width: 30% }
.mainMenu .button img { width: 100% }
.mainMenu .button .hoverAni { width: 30% }
}

@media only screen and (max-width: 500px) {
.cc { display: block; }
.mainMenu .button .hoverAni {display: none}
}




.upToDown {-webkit-animation: upToDown 1s infinite alternate; animation: upToDown 1s infinite alternate; }
@-webkit-keyframes upToDown {
  from { transform: translateY(0);  }
  to {  transform: translateY(30px); }
}
@keyframes upToDown {
  from { transform: translateY(0);  }
  to {  transform: translateY(30px); }
}