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

html,body{margin:0; padding:0; min-height:100%;
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 ,.menu-area-a{width:95%; margin:0 auto;}
.menu-area-a{width:98%;}
.menu-area{text-align:center;}
.menu-area-a{ text-align:left;}
.menu-area ul ,.menu-area-a ul{width:100%; padding: 0; margin-top:30px;}
.menu-area-a ul{ margin-top:15px;}
.menu-area ul li,.menu-area-a 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-a ul li:nth-child(2){border-bottom:0;}
.menu-area ul li ,.menu-area ul li a ,.menu-area-a ul li a{color:#fff; font-weight:bold;}
.menu-area ul li a,.menu-area-a ul li a{ text-decoration:none;}
.menu-area ul li a:hover,.menu-area-a ul li a:hover{color:#ccc;}
.home:before{ content:url(../career-image/car-home.png);}
.login:before{ content:url(../career-image/car-logoin.png);}

/*logo*/
.logo-area{ text-align:center; margin:25px auto 15px 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:center; color:#fff; margin:3% auto;}
.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;}

/*main-sys-middle-ct*/
.mainsys-area{ margin:5% auto; }
.board-slider,.syslogin-area {width: 25%;float: left;}
.board-slider,.syslogin-area,.news-area{min-height:565px; border-radius:5px;}
.news-area{width:45%; float:right;  background:url(../career-image/career-bg01.jpg) left bottom repeat-x #2b1c88;}
.board-slider{ background-color:#b2ddfd;}
.syslogin-area{ margin-left:3%; background-color:#f5f5f5;}
.board-title-a{ background-color:#9abdf0;}
.board-title-a h2 ,.board-title-b h2  ,.board-title-c h2{color:#dbe8fa; letter-spacing:1px; margin:0; padding:2%; font-size:3em;}
.board-title-b{ background-color:#5f8dce;}
.board-title-c img{ display:block; float:right; width:11%; max-width:100%; height:auto;}
.login-box{ padding:20px; }
.login-box label{ display:block; color:#5f8dce; font-weight:bold; font-size:1.3em;}
.eng-txt,.eng-txt-a,.eng-txt-b{ margin-left:10px; font-size:small; font-weight:bold;}
.eng-txt-a,.eng-txt-b{ color:#a2bde4;}

.input-clum{ width:98%; background-color:#fff; border:1px solid #5f8dce; text-align:center; color:#039; line-height:35px; height:35px; margin-bottom:20px;
font-size:medium;}
.ok-btn{ background-color:#2a5ea8; border:3px solid #cddcf1; color:#fff; width:150px; height:35px; line-height:31px; font-weight:bold; letter-spacing:1px; font-size:medium;
border-radius:8px;}
.sign-box { text-align:right; margin-top:10%;}
.sign-box a{ text-align:left; display: inline-block; width:200px; background-color:#fff; padding:8px; color:#5f8dce; font-weight:bold; font-size:medium;}
.sign-box img{width:20%; max-width:100%; height:auto; margin-right:10px;}
.news-list{width:100%; padding:13px 7px 13px 23px;}
.news-item{ display:inline-block; width:30%; font-size:small; background-color:#4f3dc7; margin:1%; min-height:120px; padding:1.3%; font-size:small; font-weight:bold; line-height:1.8em; vertical-align:top;}
.news-item,.news-item a{color:#fff;}
.news-item a{ text-decoration:underline;}
.news-item a:hover{ text-decoration:none; color:#ccc;}
.date{ display:block; padding-top:6px; font-size:.7em; color:#c3bdee;}
.more-btn{ display:block; background-color:#0b0a3b; color:#ccdbef; font-size:.9em; width:100px; font-weight:bold; height:35px; border-radius:15px; border:4px solid #4f3cc9;
margin-top:10px;
-webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75); cursor:pointer; }

/*media query*/
@media screen and (min-width: 1590px){.mainsys-area{width:1541px;}}
@media screen and (max-width: 1589px){.mainsys-area{width:96%;}}
@media screen and (max-width: 1367px){.board-title-a h2 ,.board-title-b h2  ,.board-title-c h2{ font-size:2.5em;}}
@media screen and (max-width: 1176px){.board-title-a h2 ,.board-title-b h2  ,.board-title-c h2{ font-size:2.2em;}}
@media screen and (max-width: 1075px){.board-title-a h2 ,.board-title-b h2  ,.board-title-c h2{ font-size:2em;}}
@media screen and (max-width: 999px){.board-slider,.syslogin-area {width: 46%;min-height:600px; margin-bottom:20px;}.syslogin-area { float:right;}.news-area{width:100%; float:none; clear:both; min-height:100%; margin-bottom:2%;}.board-title-c img{width:7%;}}
@media screen and (max-width: 850px){.board-slider,.syslogin-area {min-height:540px;}}
@media screen and (max-width: 787px){.board-slider,.syslogin-area {min-height:520px;}}
@media screen and (max-width: 738px){.board-slider,.syslogin-area {min-height:500px;}}
@media screen and (max-width: 700px){.board-slider,.syslogin-area {min-height:450px;}}
@media screen and (max-width: 628px){.board-slider,.syslogin-area {min-height:400px;}}
@media screen and (max-width: 549px){.board-title-a h2 ,.board-title-b h2  ,.board-title-c h2{ font-size:1.8em;}.board-slider,.syslogin-area {min-height:360px;}}
@media screen and (max-width: 523px){.board-slider,.syslogin-area {width: 100%; min-height:100%; float:none; clear:both; margin-left:0;}
.carousel-inner>.item>img, .carousel-inner>.item>a>img{ width: 60%; margin: 0 auto;}}
@media screen and (max-width: 400px){.news-list{padding: 1%;}.news-item{width: 100%;margin: 1% auto;}.menu-area-a{text-align: center;}.menu-area-a ul li:nth-child(2){display: block;}}