@charset "UTF-8";
/*思源黑體*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700&display=swap&subset=chinese-traditional');

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,button,a{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
	box-sizing: border-box;
    line-height: 150%;
    -webkit-text-size-adjust:100%;
}

body {
	color: #333;
	background:#f7f7f7; 
	font: 16px/120% "Noto Sans TC","微軟正黑體","Helvetica Neue",sans-serif;
	font-weight: 400;
}

html, body { height: 100%; }

a{ text-decoration:none; transition:all 0.3s;}
button{	background: none; }

h1, h2, h3, h4, h5, h6{ font-weight: 500; font-size:1rem; }

ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

input, button, textarea,select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: none;
}
/*reset end*/

/*Input*/
input[type="text"], input[type="password"]{ width: 100%; padding: 25px 10px 0 10px; height: 70px; line-height: 30px; color: #222; border-bottom: 1px solid #e7e7e7; font-size: 1.25rem; transition: all .15s ease;}
input[type="text"]:disabled,
input[type="password"]:disabled { background: #ededed; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #bababa; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #bababa; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #bababa; }
input:-moz-placeholder, textarea:-moz-placeholder { color: #bababa; }

.label{ position: absolute; top: 17px; left: 12px; font-size: 1.25rem; color:#b6b6b6;  transform-origin: 0 0; transform: translate3d(0,0,0); transition: all .2s ease; pointer-events: none;}
input[type="text"]:hover, input[type="password"]:hover{ border-bottom: 1px solid #a8a8a8;}
input[type="text"]:not(:placeholder-shown) + .label, input[type="password"]:not(:placeholder-shown) + .label, textarea:not(:placeholder-shown) + .label{ color: color:#fff; transform: translate3d(0,-12px,0) scale(.75);}
input[type="text"]:focus, input[type="password"]:focus{ border-bottom: 2px solid #ee3424;}
input[type="text"]:focus + .label, input[type="password"]:focus + .label, textarea:focus + .label{ color: #ee3424; transform: translate3d(0,-12px,0) scale(.75);}
input[type="text"]:focus + .focus-bg, input[type="password"]:focus + .focus-bg{ transform: scaleX(1); transition: all .1s ease;}

.tL{ text-align:left;}
.tR{ text-align:right;}
.tC{ text-align:center;}
.tB{ font-weight:bold;}
.fL{ float:left;}
.fR{ float:right;}
.clr{clear:both;}

.web{ display:block; }
.mobile{ display:none; }

/*-----------------頁面-----------------*/
.wrapper{ width: 100%; border-top: 5px solid transparent; -moz-border-image: -moz-linear-gradient(left right, #ee3424 50%, #ee9625 100%); -webkit-border-image: -webkit-linear-gradient(left right, #ee3424 50%, #ee9625 100%); border-image: linear-gradient(to right, #ee3424 50%, #ee9625 100%); border-image-slice: 1; position: relative; padding-top: 80px;}
.pagesize { max-width: 1200px; margin: 0 auto;}

/*header*/
.header{ width: 100%; background-color: #fff; box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; z-index: 10;}
.header_in{ height: 80px; padding: 0 100px; position: relative;}
h1{ width: 283px; height: 50px; font-size: 0; background: url(../images/logo.png) no-repeat; background-size: 283px auto; position: absolute; left: 100px; top: 50%; margin-top: -25px;}
a.btn_login{ width: 100px; height: 40px; line-height: 40px; padding-left: 47px; color: #fff; background: #909090 url(../images/icon_login.png) center left 22px no-repeat; background-size: 20px auto; border-radius: 99em; display: block; font-weight: 500;}
a.btn_login:hover{ background-color: #d91403;}
.header_in a.btn_login{ position: absolute; right: 100px; top: 50%; margin-top: -20px;}
.main a.btn_login{ margin: 0 auto; display: none;}

/*mid_login*/
.mid_login{ height: calc( 100vh - 271px ); min-height: 500px; background: url(../images/mid_login_bg.png) center center no-repeat; background-size: cover; position: relative;}
.login_area{ width: 430px; background-color: #fff; position: absolute; top: 50%; left: 10%; transform: translate( 0, -50%); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4);}
.login_area .headline{ width: 100%; height: 70px; margin-bottom: 10px; background: #ee3424 url(../images/hedline_bg.png) top left no-repeat; color: #fff; text-align: center; line-height: 70px; font-size: 30px; font-weight: bold; letter-spacing: 5px;text-shadow:0px 5px 6px rgba(0, 0, 0, 0.15);}
.login_area .headline::after{ content:''; width: 30px; height: 10px; background: url(../images/org_down.png) no-repeat; display: block; background-size: auto 100%; margin: 0 auto; margin-top: -1px;}

.login_area .loginBox{ padding: 15px 25px;}
.loginBox li{ position: relative; margin-bottom: 10px;}
.loginBox li:nth-child(2) input[type="password"]{ padding-right: 40px;}
.loginBox li:nth-child(3) input[type="text"]{ padding-right: 145px;}
.loginBox li .eye{ width: 25px; height: 25px; background: url(../images/icon_closeEye.png) no-repeat; background-size: 25px auto; position: absolute; right: 10px; top: 20px;}
.loginBox li .eye:hover{ background: url(../images/icon_closeEye2.png) no-repeat; background-size: 25px auto;}
.loginBox li .eye.open{ background: url(../images/icon_openEye.png) no-repeat; background-size: 25px auto;}
.loginBox li .eye.open:hover{ background: url(../images/icon_openEye2.png) no-repeat; background-size: 25px auto;}
.loginBox li .refresh{ width: 25px; height: 25px; background: url(../images/icon_refresh.png) no-repeat; background-size: 25px auto; position: absolute; right: 10px; top: 20px;}
.loginBox li .refresh:hover{ background: url(../images/icon_refresh2.png) no-repeat; background-size: 25px auto;}
.loginBox li .eye a, .loginBox li .eye.open a, .loginBox li .refresh a{ width: 100%; height: 100%; display: block;}
.loginBox li .ver_pic{ width: 100px; height: 40px; position: absolute; right: 40px; top: 14px;}
.loginBox li .ver_pic img{ width: 100%; height: 100%;}
.loginBox li:nth-child(1) .label::before{ content: ''; width: 30px; height: 30px; background: url(../images/icon_user.png) no-repeat; background-size: 30px auto; display: inline-block; vertical-align: sub; margin-right: 10px;}
.loginBox li:nth-child(2) .label::before{ content: ''; width: 30px; height: 30px; background: url(../images/icon_psw.png) no-repeat; background-size: 30px auto; display: inline-block; vertical-align: sub; margin-right: 10px;}
.loginBox li:nth-child(3) .label::before{ content: ''; width: 30px; height: 30px; background: url(../images/icon_ver.png) no-repeat; background-size: 30px auto; display: inline-block; vertical-align: sub; margin-right: 10px;}
.inp{  margin: auto; width: 100%; overflow: hidden;}
.focus-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.05); z-index: -1; transform: scaleX(0); transform-origin: left;}

.forget{ text-align: right;}
.forget a{ color: #0094cc; }
.forget a:hover{ text-decoration: underline;}
.forget a::before{ content: ''; width: 20px; height: 20px; background: url(../images/icon_forget.png) no-repeat; background-size: 20px auto; display: inline-block; vertical-align: sub; margin-right: 5px;}

.login_area .btnSet{ background-color: #f7f7f7; display: flex; justify-content:center; padding: 15px;}
.login_area .btnSet a{ width: 140px; height: 50px; text-align: center; line-height: 50px; color: #fff; border-radius: 99em; margin: 0 15px; font-size: 20px;}
.login_area .btnSet a.btn_gray{ background-color: #a3a3a3;}
.login_area .btnSet a.btn_gray:hover{ background-color: #808080;}
.login_area .btnSet a.btn_red{ background-color: #ee3424;}
.login_area .btnSet a.btn_red:hover{ background-color: #d91403;}

/*content*/
.main{ padding: 35px 100px;}
h2{ font-size: 28px; color: #333; font-weight: bold; margin-bottom: 35px;}
ul.list{}
ul.list li{ margin-bottom: 20px; background-color: #fff; border-radius: 10px; overflow: hidden;}
ul.list li .headline{ width: 100%; padding: 15px 30px; color: #fff; font-size: 24px; font-weight: bold; background-color: #f59576;}
ul.list li .content{ padding: 25px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.content .item{ width: 48%; padding-left: 110px; font-weight: 500; position: relative; margin-bottom: 20px;word-wrap: break-word; word-break: break-all;}
.content .item .title{ width: 100px; line-height: 1.2; color: #f58a67; font-weight: 400; position: absolute; top: 2px; left: 0;}
.content .item a{ color: #0070c0; text-decoration: underline;}
ul.list li:nth-child(2n) .headline{ background-color: #009ac8;}
ul.list li:nth-child(2n) .content .item .title{ color: #009ac8;}
ul.list li.empty .headline{ background-color: #909090;}
ul.list li.empty .content{ flex-wrap: nowrap; justify-content: center; align-items: center; min-height: 300px; font-size: 24px; color: #ee3424; text-align: center; margin-bottom: 0;}

/*footer*/
.footer{ width: 100%; background-color: #ee3424; letter-spacing: .3px;}
.footer .footer_top{ background-color: #fdd5c2;}
.footer .footer_bot{ }
.footer .inside{ padding: 15px 100px; font-size: 15px; line-height: 160%;}
.footer .footer_top .inside a{ text-decoration: underline; color: #333;}
.footer .footer_bot .inside{ color: #fff; padding-right: 350px; position: relative;}
.footer .footer_bot .inside a{ text-decoration: underline; color: #fff;}
.footer .footer_bot ul.info{ display: flex; flex-wrap: wrap; margin-bottom: -10px;}
.footer .footer_bot ul.info li{ width: 50%; padding-right: 10px; margin-bottom: 10px;}
.footer .footer_bot ul.info li::before{ content: ''; width: 7px; height: 7px; display: inline-block; vertical-align: middle; background-color: #fff; border-radius: 99em; margin-right: 10px;}
.footer .footer_bot .copyright{ width: 300px; height: 100%; font-size: 14px; letter-spacing: .8px; display: flex; justify-content:flex-end; align-items:center; position: absolute; top: 0; right: 100px;}



@media screen and (max-width: 1280px) {
  .pagesize { max-width: inherit; width: 100%;}

	/*header*/
	h1{ left: 50px;}
	.header_in a.btn_login{ right: 50px;}

	/*content*/
  .main{ padding: 35px 50px;}

	/*footer*/
	.footer .inside{ padding: 20px 50px;}
	.footer .footer_bot .copyright{ right: 50px;}

}

@media screen and (max-width: 800px) {

	/*header*/
	h1{ left: 30px;}
	.header_in a.btn_login{ right: 30px;}

	/*mid_login*/
	.mid_login{ height: auto; background: url(../images/mid_login_bg_m.jpg) top center no-repeat; background-size: contain; position: inherit; padding: 125px 20px 25px 20px;}
	.login_area{ max-width: 430px; width: 100%; margin: 0 auto; background-color: #fff; position: static; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4); transform: translate( 0, 0);}

	/*content*/
  .main{ padding: 30px;}
	h2{ font-size: 30px; text-align: center; margin-bottom: 20px;}

	ul.list li .headline{ padding: 15px 12px;}
	ul.list li .content{ padding: 15px;}
	.content .item{ width: 100%;}
	ul.list li.empty .content{ min-height: 150px; font-size: 20px;}

	/*footer*/
	.footer .inside{ padding: 20px 30px;}
	.footer .footer_bot .inside{ padding: 0;}
	.footer .footer_bot ul.info{ padding: 20px;}
	.footer .footer_bot ul.info li{ width: 100%; padding-right: 0; }
	.footer .footer_bot .copyright{ position: inherit; width: 100%; right: inherit; height: auto; justify-content: center; border-top: 1px solid #ff8176; padding: 20px;}
}

@media screen and (max-width: 414px) {
	.wrapper{ padding-top: 60px;}
	/*header*/
	.header_in{ height: 60px;}
  h1{ width: 170px; height: 30px; background-size: 170px auto; left: 10px; margin-top: -15px;}
	.header_in a.btn_login{ margin-top: -15px; right: 10px; width: 90px; height: 30px;line-height: 30px; padding-left: 40px; background-size: 20px auto; background-position: 15px center;}
	.main a.btn_login{ width: 120px; margin: 0 auto; background-position: center left 30px; padding-left: 58px; display: block;}

	/*mid_login*/
	.mid_login{ height: auto; background: url(../images/mid_login_bg_m.jpg) top center no-repeat; background-size: contain; position: inherit; padding: 125px 20px 25px 20px;}
  .login_area{  }
	.login_area .headline{ width: 100%; height: 90px; background-size: auto 100%; margin-bottom: 10px; line-height: 90px; font-size: 35px; text-shadow:0px 4px 5px rgba(0, 0, 0, 0.15);}
  .login_area .headline::after{ content:''; width: 24px; height: 10px;background-size: 24px auto;}

	.login_area .loginBox{ padding: 25px;}
	input[type="text"], input[type="password"]{ padding: 15px 0 0 0; height: 60px;}
	.label{ top: 10px; left: 0;}
	.loginBox li .eye{ top: 15px; right: 0;}
	.loginBox li .refresh{ top: 15px; right: 0;}
	.loginBox li .ver_pic{ top: 9px; right: 30px;}
	
	/*content*/
  .main{ padding: 20px;}


	/*footer*/
	.footer .inside{ padding: 20px;}

}

@media screen and (max-width: 375px) {
  /*mid_login*/
	.mid_login{ padding: 110px 20px 25px 20px;}

	.label{ font-size: 1.125rem;}
	.loginBox li:nth-child(1) .label::before{ width: 25px; height: 25px; background-size: 25px auto; margin-right: 5px;}
  .loginBox li:nth-child(2) .label::before{ width: 25px; height: 25px; background-size: 25px auto; margin-right: 5px;}
  .loginBox li:nth-child(3) .label::before{ width: 25px; height: 25px; background-size: 25px auto; margin-right: 5px;}

	/*content*/
	ul.list li .headline{ font-size: 20px;}

}

@media screen and (max-width: 320px) {
  /*mid_login*/
	.mid_login{ padding: 95px 20px 25px 20px;}
	.login_area .headline{ height: 60px; line-height: 60px; font-size: 24px;}
	.login_area .loginBox{ padding: 10px 10px 20px 10px;}
	input[type="text"], input[type="password"]{ height: 50px;}

	.label{ font-size: 1rem; top: 5px;}
	.loginBox li .eye{ top: 12px;}
	.loginBox li .refresh{ top: 12px; right: 0;}
	.loginBox li .ver_pic{ width: 80px; height: 32px; top: 7px; right: 30px;}
	.login_area .btnSet a{ width: 110px; height: 40px; line-height: 40px; margin: 0 5px; font-size: 18px;}

	/*content*/
	.main{ padding: 10px;}
	h2{ font-size: 24px; margin-bottom: 10px;}
	ul.list li{ margin-bottom: 10px;}
	ul.list li .headline{ padding: 10px 12px;}
	ul.list li.empty .content{ min-height: 100px; font-size: 18px;}

	/*footer*/
	.footer .inside{ padding: 10px;}
	.footer .footer_bot ul.info{ padding: 10px;}

}