/*clear*/
.clearf{zoom:1}
.clearf:before,.clearf:after{content:"";display:table}
.clearf:after{clear:both;}
/*layout*/

html,body{margin:0; padding:0;
font-family: arial,"Microsoft JhengHei","微軟正黑體",sans-serif;
background: rgb(11,65,151);
background: -moz-linear-gradient(top,  rgba(11,65,151,1) 0%, rgba(39,142,208,1) 100%);
background: -webkit-linear-gradient(top,  rgba(11,65,151,1) 0%,rgba(39,142,208,1) 100%);
background: linear-gradient(to bottom,  rgba(11,65,151,1) 0%,rgba(39,142,208,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b4197', endColorstr='#278ed0',GradientType=0 );}


.menu-area{width:95%; margin:0 auto;}
.menu-area{text-align:right;}
.menu-area ul{width:100%; padding: 0; margin-top:30px;}
.menu-area ul li{ display:inline; margin-right:10px; list-style:none; border-bottom:2px solid #fff; border-radius:30px; padding:8px 10px; font-size:medium;}
.menu-area ul li ,.menu-area ul li a{color:#fff; font-weight:bold;}
.menu-area ul li a{ text-decoration:none;}
.menu-area ul li a:hover{color:#ccc;}
.home:before{ content:url(../career-image/car-home.png);}
.login:before{ content:url(../career-image/car-logoin.png);}
.work:before{ content:url(../career-image/car-work.png);}
/*logo*/
.logo-area{ text-align: left;
    margin: -55px auto 5px auto;}


/*middle ct*/
.mainct-area{ width:95%; margin:0 auto;background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 31%, rgba(255,255,255,.6) 50%,  rgba(255,255,255,0.56) 78%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 31%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0.56) 78%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 31%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0.56) 78%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );}

.item-box{ background-color:#fff; text-align:center; padding:10px; margin:10px 3%; width:25%; float:left;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);}

.item-box:hover{
 -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;}
  
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.item-box a{color:#999; text-decoration:none;}
.item-box img{width:95%; max-width:100%;}

/*footer*/
.contact-area{ background-color:#01012f; color:#fff; font-size:.95em; line-height:1.6em; padding:3%; margin-top:5%;}
.contact-area a{color:#fff;}
.contact-area a:hover{color:#ccc;}
.textwidget{width:30%; float:left; margin-left:40px;}
img.emoji { width:3%;}

.site-info{ background-color:#fff; text-align:center; padding:2%; font-size:.95em;}
.site-info a{color:#000; text-decoration:none;}
.site-info a:hover{color:#F60;}

/*slider*/
.carousel-caption{background: -moz-linear-gradient(top,  rgba(76,76,76,0.65) 43%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top,  rgba(76,76,76,0.65) 43%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom,  rgba(76,76,76,0.65) 43%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a64c4c4c', endColorstr='#00000000',GradientType=0 );
padding: 0; bottom:0;}
.carousel-caption h2{ font-size:1.5em;}

.glyphicon-chevron-right:before {content: url(../career-image/arrow-r.png);}

.glyphicon-chevron-left:before {
    content: url(../career-image/arrow-l.png);}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {cursor: pointer;}

/*page*/
.page-header-title{     text-align: left;
    color: #fff;
    margin: 0 auto;
    background: #0d3253;
    padding: 10px 10px 10px 30px;
    border-top: 2px solid #44484d;}

.page-header-title h1 {
    font-size: 2em;
    font-weight: bold;
	display: flex;
	align-items: center;
	justify-content:flex-start;
}

.page-header-title h1:before{content:url("../career-image/pp-ssimg.gif"); margin-right: 15px;}

.mainct-page{ background-color:#f3f8fe;margin-bottom: -5%; min-height: 420px; padding: 30px 0;}
.mainct-page .item-box{ min-height:250px;-webkit-box-shadow: 2px 3px 5px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 3px 5px -4px rgba(0,0,0,0.75);
box-shadow: 2px 3px 5px -4px rgba(0,0,0,0.75);}
.mainct-page .item-box h2{color:#000; font-size:1.6em; text-align:left;width:88%; margin:2% auto; line-height:1.6em; font-weight:bolder;}
.mainct-page .item-box h2:after{ content:"──"; color:#efefef; display:block; margin-bottom: -5px;}

/*modify design*/
.bga{background: #fff url("../career-image/bg01.png") repeat-x;
	 height: 63px;
     background-position: bottom left;
	animation: driving 50s linear infinite;}

@keyframes driving {
	from { background-position: bottom left; }

	to { background-position: bottom right; }
}

span.msga {
    display: inline-block;
    border: 3px solid #e2e2ef;
    width: 40px;
    line-height: 35px;
    vertical-align: middle;
    border-radius: 50px;
    background: #0061a7;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    float: left;
    box-shadow: 2px 2px 3px #a39595;
	margin-right: 3px;
}


/*media query*/
@media screen and (min-width: 1331px){.mainMenu-area,.cont-box{width:1331px; margin:0 auto;}}
@media screen and (max-width: 1330px){.mainMenu-area,.cont-box{width:100%;}}
@media screen and (max-width: 859px){.item-box{margin: 10px 2.5%;width: 28%;}}
@media screen and (max-width: 768px){.item-box{font-size: small;}.mainct-page .item-box{white-space:pre-wrap;width: 95%;}
	.mainct-page .item-box h2:after{margin-bottom:15px;}
/*.mainct-page .item-box h2{width:95%;font-size:medium; min-height:100px;}*/}
@media screen and (max-width: 698px){.item-box p {white-space: pre-wrap;min-height: 50px;}}
@media screen and (max-width: 562px){.logo-area {
    text-align: left;
    margin: -160px auto 65px auto;
}
.menu-area {
    text-align: left;
    margin: 120px auto 0 auto;
}
	
}

@media screen and (max-width: 500px){.item-box {width: 85%; margin: 10px auto 10px 7%; /*font-size:medium;*/ font-weight:bold;}
.textwidget {width: 90%; float: none; margin-left: 8px;}/*.mainct-page .item-box h2{ width:85%; min-height:10px; font-size:large; text-align:center;}*/}
@media screen and (max-width: 466px){

	.logo-area{margin-top: -150px;margin-bottom:100px;}
	.logo-area img{ width:300px;}

}


@media screen and (max-width: 382px){.mainct-page .item-box h2{margin-top: -20px;
    margin-bottom: 30px;
}
	.logo-area {
    margin-top: -140px;
    margin-bottom: 100px;
}
	.menu-area ul li{display:inline-block;width:95px;}
	.menu-area{
		text-align: center;}
	.menu-area ul li a:before{display:none;}
}

@media screen and (max-width: 339px){
	.logo-area {
    margin-top: -160px;
		margin-bottom: 100px;}
	.menu-area ul li a{font-size:.9em;}.menu-area ul li{display:inline-block;width:88px;}}

/*@media screen and (max-width: 376px){
	.menu-area{
		text-align: center;}}*/