@charset "utf-8";
.login-cont { min-height: calc(100vh - 64px); }
.login-cont.bg { background-image: url(../images/login/bg_pc.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; display: block; ; position: relative; background-color: rgba(0,0,0,1); }
.login-cont-inner { width: 100%; max-width: 1000px; margin: 0 auto; display: block; }
.login-menubar { padding-top: 50px; text-align: right; display: block; }
.login-menubar ul li { padding: 0 10px; font-size: 16px; display: inline-block; }
.login-menubar ul li a { color: #000; }
.login-menubar ul li a:hover { color: #E71A0F; }
.menu-btn { display: none; }
.login-area { display: inline-block; width: 100%; max-width: 300px; margin-top: 50px; padding-left: 20px; }
.login-area h1 { font-size: 32px; font-weight: bold; letter-spacing: 2px; color: #333; line-height: 1em; text-align:center; }
.login-area h3 { font-size: 15px; color: #333; line-height: 1em; font-weight: normal; padding-top: 10px; text-align:center; }
.login-area .input-area input[type="text"].inputtxt,.login-area .input-area input[type="password"].inputtxt { display: block; background-color: transparent; border: none; border-bottom: 1px solid #999; border-radius: 0; color: #676767; line-height: 1.3333333; box-shadow: none; -webkit-appearance: none; margin: 0; font-size: 16px; font-style: normal; font-weight: 400; padding: 9px 15px; width: 100%; height: 40px; font-family: "Microsoft JhengHei"; }
.login-area .input-area input[type="text"].inputtxt::-webkit-input-placeholder,.login-area .input-area input[type="password"].inputtxt::-webkit-input-placeholder {
font-family: "Microsoft JhengHei";
font-size: 16px;
color: #676767;
}
.login-area .input-area input[type="text"].inputtxt::-moz-placeholder,.login-area .input-area input[type="password"].inputtxt::-moz-placeholder {
font-family: "Microsoft JhengHei";
font-size: 16px;
color: #676767;
}
.login-area .input-area input[type="text"].inputtxt:-ms-input-placeholder,.login-area .input-area input[type="password"].inputtxt:-ms-input-placeholder {
font-family: "Microsoft JhengHei";
font-size: 16px;
color: #676767;
}
.login-area .input-area input[type="text"].inputtxt:-moz-placeholder,.login-area .input-area input[type="password"].inputtxt:-moz-placeholder {
font-family: "Microsoft JhengHei";
font-size: 16px;
color: #676767;
}
.spec-link-area { margin-top: 20px; margin-bottom: 20px; text-align:center; 
    /* 20180910 協助更改 */
    font-size: 16px; color: #000;
}
.spec-link-area a.spec-link { /* 20180910 協助更改  font-size: 16px; color: #000; */ }
.spec-link-area a.spec-link:hover { color: #E71A0F; }
.verification-code-pic-area { margin-top: 20px; }
.verification-code-pic-area img { height: 41px; }
@media screen and (max-width: 1020px) {
.login-cont { min-height: calc(100vh - 64px); }
}
@media screen and (max-width: 768px) {
.login-cont { min-height: calc(100vh - 42px);}
.login-cont.bg { background-image: url(../images/login/bg_m.jpg); background-repeat: no-repeat; background-position: bottom; background-size: 100% auto; background-attachment: inherit; display: block; position: relative; background-color: rgb(231, 230, 228); }
.login-cont-inner { width: auto; padding: 0 20px; }
.login-menubar { padding-top: 25px; position: relative; }
.login-menubar ul#menubar { display: none; }
.menu-btn { display: inline-block; width: 22px; cursor: pointer; z-index: 1; position: absolute; top: 20px; right: 0px; }
.menu-btn img { width: 100%; max-width: 22px; }
.black-layer { background-color: rgba(0,0,0,.9); cursor: default; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 0; }
.login-area { max-width: inherit; padding-left: 0; }
.login-menubar ul { margin-top: 20px; position: absolute; padding: 0; background-color: rgba(255,255,255,0); width: 100%; }
.login-menubar ul li { display: block; padding: 0; }
.login-menubar ul li a { padding: 15px; font-size: 18px; display: block; text-align: center; border-bottom: #FFF 1px solid; color: #FFF; }
.login-menubar ul li a:hover { background-color: rgba(255,255,255,0); }
}
.lightbox.loginad figure { margin: 0 14px; max-width: inherit; }
.lightbox.loginad figcaption { position: relative; background-color: transparent; text-align: left; padding: 28px 15px 15px 20px; }
.lightbox.loginad img { width: 100%; max-width: 540px; }
.lightbox.loginad a.close { margin-bottom: 5px; }
.loginselect { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 999999; }
.loginselect::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.9); content: ""; cursor: default }
.loginselect figure { }
.loginselect figcaption { position: relative; text-align: left; padding: 0px; min-width: 280px; }
.loginselect figcaption h4 { font-size: 32px; font-weight: bold; letter-spacing: 3px; color: #FFF; line-height: 1em; margin-bottom: 10px; text-align: center; }
.select-area .select-area-left { margin-right: 5px; display: inline-block; vertical-align: bottom; }
.select-area .select-area-right { margin-left: 5px; display: inline-block; vertical-align: bottom; }
.select-area .select-area-clock { width: 260px; height: 260px; border-radius: 10px; background-color: #FFF; display: inline-block; text-align: center; vertical-align: bottom; }
.select-area a.select-area-clock .select-pic { margin-top: 50px; }
.select-area a.select-area-clock:hover { background-color: #E2C7A6; }
.select-area a.select-area-clock:hover img { -webkit-filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 1)); filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 1)) }
.select-area a.select-area-clock .select-script { margin-top: 30px; font-size: 24px; color: #000; }
@media screen and (max-width: 768px) {
.loginselect figcaption { min-width: 290px; }
.select-area .select-area-clock { width: 140px; height: 160px; border-radius: 10px; background-color: #FFF; display: inline-block; text-align: center; vertical-align: bottom; }
.select-area .select-area-left { margin-right: 2px; display: inline-block; }
.select-area .select-area-right { margin-left: 2px; display: inline-block; }
.select-area a.select-area-clock .select-pic { margin-top: 30px; }
.select-area a.select-area-clock img { height: 60px; }
.select-area a.select-area-clock .select-script { margin-top: 20px; font-size: 14px; line-height: 1.4em; }
}
.loginselect.alertwindow figcaption { position: relative; text-align: left; padding: 0px; min-width: 220px; text-align: center; }
.alertwindow-txt { font-size: 24px; color: #FFF; margin-top: 20px; line-height: 1.3em; }
.alertwindow-txt.center { text-align: center; min-height: 50px; }
.loginselect a.close { position: relative; display: block; transform: none }
.loginselect a.close::after { right: 0px; top: -50px; width: 20px; height: 20px; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; color: #CCC; content: "×"; cursor: pointer; font-size: 34px }
.loginselect a#closealertwindow.close::after {top: -25px;}
.loginselect a.close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default }
.id-error-area { color: #E71A0F; font-size: 16px; margin-bottom: 15px; }
.id-error-area img { vertical-align: sub; margin-right: 5px; }
.login-area .btn-area .btn-select { color: #FFF; background-color: #825938;}
.login-area .btn-area a.btn-select:hover { background-color: #c5a88b; color: #000; }

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) {
    .login-cont { min-height: 560px !important; }
}