@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

@font-face {
    font-family: hkgrotesk;
    src: url(../fonts/hkgrotesk-regular.eot);
    src: local("hkgrotesk regular"), url(../fonts/hkgrotesk-regular.woff) format("woff");
    font-weight: 400
}

*{margin: 0px;box-sizing: border-box;}

table,body, input, button, select, textarea {font-family: "Roboto","sans-serif";box-sizing: border-box;}

input[type="checkbox"] {width: 14px;height: 14px;border: 1px solid #ced4da;border-radius: .25em;appearance: none;background-color: #fff;cursor: pointer}
input:checked[type=checkbox] {background: #004cff url("../images/checkbox.svg") no-repeat center center;border-color: #004cff;}

body {margin:0px;font-size: 13px;color: #333;font-family: "Roboto","sans-serif";background-color: #f3f3f9}

.btn{font-size: 13px;color: #fff;padding: 8px 15px;border-radius: 4px;cursor: pointer;border: 1px solid #ced4da;transition: all .15s ease-in-out;margin-right:5px;white-space:nowrap;height: 38px;}
.btn i{vertical-align: middle}
.btn .btn_default{color:#333;}
.btn_blue{background: #004cff;border: 1px solid #004cff;}
.btn_blue:hover{background: #0446df;border: 1px solid #0446df;transition: all .15s ease-in-out;}

.form_input {border: 1px solid #ced4da;border-radius: 4px;width: 100% !important;height: 38px;padding: 4px 12px;font-size: 13px;}

/*登入樣式 -S*/
.cancel_btn{background: #fff;color: #333;}
.cancel_btn:hover{ background:#f3f6f9;color: #000; }
.login_bg{position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 380px; background: url("../images/auth-bg.jpg") no-repeat center center;background-position: center;background-size: cover;}
.login_bg .bg_color{background: #004cff;opacity: .8;position: absolute;height: 100%;width: 100%;right: 0;bottom: 0;left: 0;top: 0;}
.login_bg .bg_svg {position: absolute;bottom: 0;right: 0;left: 0;z-index: 1;pointer-events: none;}
.login_bg .bg_svg svg {width: 100%;height: auto;fill: #f3f3f9/*填充SVG形狀顏色*/;}

.login_con{width: 100%;max-width: 1140px;margin: 0 auto;position: relative;z-index: 2;padding-top:100px;}
.login_top{text-align: center;}
.login_top p{font-weight: 500;font-size: 15px;margin-top: 8px;color: rgba(255, 255, 255, 0.5) !important;}

.login_form{width: 454px;padding:32px 32px;border-radius: 5px;box-shadow: 0 1px 2px rgb(56 65 74 / 15%);background-color: #fff;margin:42px auto 0px auto}
.login_form .welcome{text-align: center;padding-bottom: 18px;}
.login_form .welcome h5{font-size: 16px;color: #004cff;font-weight: 500}
.login_form .welcome p{color: #878a99 !important;margin-top: 10px;}
.login_form .form-group{margin-top:18px}
.login_form .form-group label{width: 100%;margin-bottom:10px;display: block;font-weight: 500}
.login_form .doce .form_input{max-width: calc(100% - 118px)}
.login_form .doce span{float: right;width: 108px;height: 38px;display: flex;align-items: center;justify-content: flex-end}
.login_form .doce span img{max-height: 38px;max-width: 100%;}
.login_form .checkbox{margin-top: 15px;}
.login_form .checkbox label{font-weight: 500;cursor: pointer}
.login_form .checkbox input[type="checkbox"]{position: relative;top: 2px;margin-right: 4px}
.login_form .form_btn{display: flex;justify-content:space-between; margin-top: 25px}
.login_form .form_btn .btn{width: 48%}

/*登入樣式 -E*/