@charset "utf-8";
/*
  danny 201707
  1. $Reset
  2. $body,html
  3. $共用
  4. $Mobile
  5. $Pc
*/







/* $Mobile
--------------------------------------------------------------------------------------*/





/* header */
header{ width: 100%; height: 300px; background: url(../image/recruit__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden;  }
/* header__tit */
.header-container{ max-width: 100%; margin: 0 auto;  }
.header-container h3{ width: 100%; font-size: 1.5rem; font-weight: normal; color: #fff; text-align: center; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); }
.header__tit-box{ /* display: flex;  width: 320px;  height: 420px;*/ height: 420px; margin: 0 auto; overflow: hidden; position: relative; }
.header__tit-box>li{  }
.header__tit-box>li>img{ display: block; width: 100%; height: auto; margin: 0 auto; }
.header-container .bx-wrapper{ width: 90%; margin: 80px auto 0 auto; position: relative; }
.header-container .bx-controls{ width: 100%; height: 20px; position: absolute; bottom: 0; }
/* bx-controls-direction 箭頭  */
.header-container .bx-controls-direction{ width: 100%; height: 50px; position: absolute; top: 15%; transform: translateY(-50%);  }
.header-container .bx-controls-direction a{ width: 31px; height: 61px;  position: absolute; background: url(../image/recruit__header__tit__arrow.png) no-repeat; text-indent: -9999px; }
.header-container .bx-controls-direction .bx-prev{ background-position: 0 0; }
.header-container .bx-controls-direction .bx-next{ background-position: -31px 0; right: 0;	}
/* bx-pager 點點 */
.header-container .bx-pager { display: flex; justify-content: center; position: absolute; top: 180%; left: 50%; transform: translateX(-50%); }
.header-container .bx-pager-item a{ width: 10px; height: 10px; border-radius: 50%; margin-right: 20px; background: #919191;  display: block; text-indent: -9999px; }
.header-container .bx-pager-item a.active{ background: #0070c9; }

/* .rdown{ top: -15px;  } */
.rup{ top: -15px;   }



/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){





/* header */
header{ width: 100%; height: 450px; background: url(../image/recruit__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden;  }
.header-container h3{ width: 100%; font-size: 2rem; font-weight: normal; color: #fff; text-align: center; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); }
.header__tit-box{ /* display: flex;  width: 320px;  height: 420px;*/ height: 420px; margin: 0 auto; overflow: hidden; position: relative; }
.header__tit-box>li{  }
.header__tit-box>li>img{ display: block; width: 100%; height: auto; margin: 0 auto; }
.header-container .bx-wrapper{ width: 80%; margin: 100px auto 0 auto; position: relative; }
.header-container .bx-controls{ width: 100%; height: 20px; position: absolute; bottom: 0; }






}



/* 橫的版型 */
@media screen and (orientation:landscape){ 




/* header */
header{ min-height: 300px;   }
.header-container button{ top: 95px; }
}





/* $Pc
--------------------------------------------------------------------------------------*/
/* @media screen and (min-width: 768px){ */
@media screen and (min-width: 1025px){





html,body{ min-width: 100%; font-size: 16px; }






/* header */
header{ width: 100%; min-width: 1280px; /* height: 600px; */  height: 740px; background: url(../image/recruit__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header__shadow{ 
	width: 100%; height: 288px;	position: absolute;	left: 0; top: 0; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+54,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.header-container{ max-width: 1280px; margin: 0 auto; /* position: relative;  */  }
.header-container h3{ font-size: 2.5rem; font-weight: normal; color: #fff; text-align: center; position: absolute; top: 210px; left: 50%; transform: translateX(-50%); }
.header__tit-box{ display: flex; width: 1054px; height: 420px; margin: 0 auto; overflow: hidden; position: relative; }
.header__tit-box>li{ min-width: 1054px; }
.header__tit-box>li>img{ display: block; width: auto; margin: 0 auto; }
.header-container .bx-wrapper{ width: 1054px; margin: 310px auto 0 auto; position: relative; }
.header-container .bx-controls{ width: 100%; height: 420px; position: absolute; top: 0; }
/* bx-controls-direction 箭頭  */
.header-container .bx-controls-direction{ width: 100%; height: 50px; position: absolute; top: 15%; transform: translateY(-50%);  }
.header-container .bx-controls-direction a{ width: 31px; height: 61px;  position: absolute; background: url(../image/recruit__header__tit__arrow.png) no-repeat; text-indent: -9999px; }
.header-container .bx-controls-direction .bx-prev{ background-position: 0 0; }
.header-container .bx-controls-direction .bx-next{ background-position: -31px 0; right: 0;	}
/* bx-pager 點點 */
.header-container .bx-pager { display: flex; justify-content: center; position: absolute; top: auto; bottom: 50px; left: 50%; transform: translateX(-50%); }
.header-container .bx-pager-item a{ width: 10px; height: 10px; border-radius: 50%; margin-right: 20px; background: #919191;  display: block; text-indent: -9999px; }
.header-container .bx-pager-item a.active{ background: #0070c9; }


/* search-box */
.search-box{ margin: 1px auto 0 auto;  }





/* nav__submenu */
.nav__submenu>li{ min-width: 20%; height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); text-align: center; font-size: 1.125rem; position: relative; margin: 0 1px 0 0; transition: all 0.3s cubic-bezier(.25,.1,.25,1); }
.nav__submenu>li:last-child{ min-width: calc(20% - 4px ); }





.footer-container  nav>ul{ margin-top: 5px; }




/* gototop */
.goto-box>li.gotosearch{ width: 68px; height: 109px; background: url(../../car/image/elite__gotosearch.png); background-position: 0 0;  }
.goto-box>li.gototop{ width: 68px; height: 69px; background: url(../../car/image/elite__gototop.png); background-position: 0 0; }
.goto-box>li.gotoback{ display: block; width: 68px; height: 65px; background: url(../../image/btn__gotoback.png); background-position: 0 0; position: relative;	}
.goto-box>li.gotoback>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

/* .rdown{ top: -25px;  } */
.rup{ top: -25px;   }


}











/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){





/* header */
header{ width: 100%; min-width: 1280px; /* height: 600px; */ height: 740px; background: url(../image/recruit__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header-container{ max-width: 1280px; margin: 0 auto; /* position: relative;  */  }
}