/* CSS Document  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	font-family: "微軟正黑體";
}
html, body {
    height: inherit;
}
body {
	background: url(/images/WM_img/2020_standard_bg.jpg) no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	margin: 0;
	padding: 0;
	background-attachment: fixed;
	background-position: center center;
}
form input[type="text"], form input[type="password"] {
	font-size: 16px;
	color: #4B525B;
	display: block;
	border: 2px solid rgba(216, 216, 216, 0.39);
	padding: 0.9em 0.9em;
	outline: none;
	text-align: left;
	-webkit-appearance: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	width: 100%;
	margin: 20px 0px;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	padding-left: 60px
}
.Login_box, .Password_box {position: relative;}
.Login_box::before {
  content: "";
  background: url(/images/WM_img/2020_standard_user_icon.png) center;
  background-repeat: no-repeat;
  background-size: 80%;
  position: absolute;
  z-index: 9999;
  width: 60px;
  top: 0;
  left: 0;
  height: 55px;
}
.Password_box::before {
  content: "";
  background: url(/images/WM_img/2020_standard_pwd_icon.png) center;
  background-repeat: no-repeat;
  background-size: 80%;
  position: absolute;
  z-index: 9999;
  width: 60px;
  top: 0;
  left: 0;
  height: 55px;
}
form input[type="submit"], from input[type="button"] {
	font-size: 1.1em;
	color: #FFF;
	display: block;
	border: none;
	padding: 0.7em 0.9em;
	outline: none;
	text-align: center;
	-webkit-appearance: none;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	text-shadow: 0px 0px 1px #FFF;
	width: 100%;
	margin: 0;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	outline: none;
	cursor: pointer;
	background: rgba(94, 158, 183, 64%);
}
form input[type="submit"]:hover, from input[type="button"]:hover {
	background: #555f7f;
}
form input[type="text"]:hover, form input[type="password"]:hover {
	border: 2px solid #0287CC;
	color: #0287CC;
}
#content {
	width: 415px;
	margin: 0 auto;
}
.login_div {padding: 0 10%; display: table; width: 100%;}
.login_div .login_import_group {
	width: 100%;
	display: table;
	margin: 10px auto;
	padding: 20px 50px;
	background: rgba(94, 158, 183, 64%);
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	/*box-shadow: 5px 5px 5px #333333;
	-webkit-box-shadow: 5px 5px 5px #333333;
	-moz-box-shadow: 5px 5px 5px #333333;*/
}
.login_title {
	font-size: 30px;
	margin: 0 auto;
	text-align: center;
	color: #0052a5;
	font-weight: bold;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #FFF;
	text-shadow: 0 1px #FFF, 1px 0 #FFF, -1px 0 #FFF, 0 -1px #FFF;*/
	text-shadow: 3px 3px 0 #FFF;
}
.WebManager {
	margin: 20px auto;
	font-size: 50px;
	text-align: center;
	color: #0052a5;
	font-weight: bold;
	text-shadow: 3px 3px 0 #FFF;
}
span {
	color: #F00;
}
.copyright_box {
	color: #333;
	text-align: center;
	line-height: 50px;
}
.textbox {
}
.Errorcount_box input {
	float: left;
}
.Errorcount_box img {
	float: left;
	margin: 28px 10px 25px;
}
.Errorcount_info {
	padding-left: 15px;
	letter-spacing: 3px;
}
.Errorcount_info span {
	font-size: 14px;
}
.manage_box {
}
.guide_box {
	font-size: 1.1em;
	color: #FFF;
	display: block;
	border: none;
	padding: 0.7em 0.9em;
	outline: none;
	text-align: center;
	-webkit-appearance: none;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	text-shadow: 0px 0px 1px #FFF;
	width: 100%;
	margin: 0;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	outline: none;
	cursor: pointer;
	background: rgba(94, 158, 183, 64%);
}
.guide_box:hover {
	background:#555f7f;
}
.forget_box {
	font-size: 1.1em;
	color: #333;
	display: block;
	border: none;
	padding: 0;
	outline: none;
	text-align: center;
	-webkit-appearance: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	margin: 0;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	outline: none;
	cursor: pointer;
	background: transparent;
	text-shadow: 0px 0px 1px #333;
	float: right;
}
.forget_box:hover {
	background:transparent;
}
.clock_box {
	font-size: 1.1em;
	color: #FFF;
	display: block;
	border: none;
	padding: 0.7em 0.9em;
	outline: none;
	text-align: center;
	-webkit-appearance: none;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	text-shadow: 0px 0px 1px #FFF;
	width: 100%;
	margin: 0;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	outline: none;
	cursor: pointer;
	background: rgba(94, 158, 183, 64%);
}
.clock_box:hover {
	background:#555f7f;
}
#footer {
	width: 100%;
	min-width: 960px;
	height: 50px;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	bottom: 0;
	color: #FFF;
	line-height: 50px;
	font-size: 18px;
	letter-spacing: 2px;
}
#footer p.telnb {
	font-size: 16px;
	width: 260px;
	float: left;
}
#footer p.slogan {
	float: right;
	width: 320px;
}
#footer img {
	float: left;
	margin: 6px 30px 6px 20px;
}

.carousel {
	width: 945px;
  height: 635px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
	border-radius: 70px;
	box-shadow: 15px 15px 0px #A4A4A4;
	-webkit-box-shadow: 15px 15px 0px #A4A4A4;
	-moz-box-shadow: 15px 15px 0px #A4A4A4;
}
.carousel-inner > .item {
	height: 635px;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
	vertical-align: middle;
	max-width: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.login_btn_group > div {
	width: 25%;
	display: block;
	float: right;
	padding: 15px 5px;
}
.WM_login {margin: 5% auto; padding: 0 5%;}
@media(max-width:1680px) {
.carousel,
.carousel-inner > .item {width: 100%; height: 584px;}
}

@media(max-width:1600px) {
.carousel,
.carousel-inner > .item {height: 556px;}
}

@media(max-width:1440px) {
.WebManager {font-size: 45px; margin: 15px auto;}
.carousel,
.carousel-inner > .item {height: 499px;}
}

@media(max-width:1400px) {
.carousel,
.carousel-inner > .item {height: 485px;}
}

@media(max-width:1366px) {
.WebManager {font-size: 40px; margin: 10px auto;}
.carousel,
.carousel-inner > .item {height: 473px;}
}

@media(max-width:1280px) {
.WebManager {font-size: 40px; margin: 0px auto;}
.carousel,
.carousel-inner > .item {height: 443px;}
.copyright_box {line-height: 40px;}
}

@media(max-width:1152px) {
.WebManager {font-size: 38px;}
.login_title {font-size: 28px;}
.carousel,
.carousel-inner > .item {height: 398px;}
.login_div {padding: 0 5%;}
.login_div .login_import_group {padding: 20px 30px;}
.forget_box,
.guide_box,
.clock_box,
form input[type="submit"], from input[type="button"] {font-size: 1em;}
form input[type="text"], form input[type="password"] {margin: 10px 0px;}
}
@media(max-width:1024px) {
.WebManager {font-size: 35px;}
.login_title {font-size: 25px;}
.carousel,
.carousel-inner > .item {height: 353px;}
.login_btn_group > div {padding: 10px 3px;}
.guide_box, .clock_box, .manage_box {padding: 0.7em 0.45em !important;}
.forget_box,
.guide_box,
.clock_box,
form input[type="submit"], from input[type="button"] {font-size: 0.9em;}
form input[type="text"], form input[type="password"] {padding: 0.5em 0.5em; padding-left: 45px;}
.Login_box::before,
.Password_box::before {width: 45px; height: 42px;}
}
@media(min-width:768px) and (max-width:991px) {
	.wrapper {padding-bottom: 160px;}
	.WM_login {position: relative; margin: 0; padding: 0 15px; height: 100vh;}
	.login_group {position: absolute; top: 0; width: 100%; padding: 0 10%;}
	.wm_group {position: absolute; top: 400px; width: 100%; padding: 0 10%;}
	.WebManager {font-size: 30px; margin: 20px auto 10px;}
	.login_div {padding: 0;}
	.login_title {font-size: 25px;}
	.login_div .login_import_group {padding: 20px 50px;}
	.carousel, .carousel-inner > .item {width: 100%; height: 412px; transform: rotate(0deg)}
	.carousel-inner	{border-radius: 70px;}
	form input[type="text"], form input[type="password"] {padding: 0.4em 0.9em; padding-left: 50px;}
	.Login_box::before, .Password_box::before {background-size: 60%; width: 50px; height: 40px;}
	.copyright_box {display: none;}
	#footer {height: inherit; min-width: 100%; padding: 10px 5%;}
	#footer img { width: 30%; display: table;margin: 12px auto 10px;}
	#footer p.telnb {float: right;}
	#footer p {text-align: center; line-height: 30px; width: 70% !important; text-align: right;}
}
@media(max-width:767px){
	.wrapper {padding-bottom: 160px;}
	.WM_login {position: relative; margin: 0; padding: 0 15px; height: 100vh;}
	.login_group {position: absolute; top: 0;}
	.wm_group {position: absolute; top: 400px;}
	.WebManager {font-size: 30px; margin: 20px auto 10px;}
	.carousel {box-shadow: 10px 10px 0px #A4A4A4;
    -webkit-box-shadow: 10px 10px 0px #A4A4A4;
    -moz-box-shadow: 10px 10px 0px #A4A4A4;}
	.login_div {padding: 0;}
	.login_title {font-size: 25px;}
	.login_div .login_import_group {padding: 20px;}
	.carousel, .carousel-inner > .item {width: 100%; height: 260px; transform: rotate(0deg);}
	.carousel-inner	{border-radius: 70px;}
	form input[type="text"], form input[type="password"] {padding: 0.4em 0.9em; padding-left: 50px;}
	.Login_box::before, .Password_box::before {background-size: 60%; width: 50px; height: 40px;}
	.copyright_box {display: none;}
	#footer {height: inherit; min-width: 100%; padding-bottom: 10px;}
	#footer img {display: table; float: none; margin: 20px auto 10px;}
	#footer p {width: 100% !important; text-align: center; line-height: 30px;}
}
@media(max-width:375px){
	.WebManager {font-size: 28px; margin: 15px auto 5px;}
	.login_title {font-size: 24px;}
	form input[type="submit"], from input[type="button"], .clock_box, .guide_box, .forget_box {font-size: 15px;}
	.wm_group {top: 380px;}
	.carousel, .carousel-inner > .item {height: 232px;}
}
@media(max-width:320px){
	.WebManager {font-size: 24px;}
	.login_title {font-size: 22px;}
	.login_btn_group > div {padding: 10px;}
	form input[type="submit"], from input[type="button"], .clock_box, .guide_box, .forget_box {font-size: 13px;}
	.wm_group {top: 365px;}
	.carousel, .carousel-inner {border-radius: 50px;}
	.carousel, .carousel-inner > .item {height: 195px;}
	#footer p {font-size: 16px;}
	#footer p.telnb {font-size: 15px;}
	#footer img {width: 50%;}
}
