@font-face {
    font-family: np-font;
    src: local("微軟正黑體"), local("Microsoft JhengHei"), local('Microsoft Yahei');
    unicode-range: U+4E00-9FFF;
}

@font-face {
    font-family: np-font;
    src: local('Calibri'), local("Open Sans"), local('Arial'), local('Helvetica'), local('Sans-Serif');
    unicode-range: U+00-4DFF, U+A000-E01FF;
}

/* 顏色定義 */
:root {
    --login-bg: #0F1629;
    --login-base: #1d3557;
    --login-base-30: rgba(29, 53, 87, 0.3);
    --login-base-50: rgba(29, 53, 87, 0.5);
    --login-input: #131e34;
    --login-input-text: #fff;
    --login-button: rgba(29, 62, 103, 0.5);
    --login-button-hover: rgba(29, 62, 103, 1);
    --login-button-active: #ffb703;
}

* {
    font-family: np-font;
    box-sizing: border-box;
}


/* 背景滿版隨著版面縮放 */
html {
    width: 100%;
    height: 100%;
    background: url(../img/login/background_default.jpg)  no-repeat  center  bottom; /* 定位在下方固定不動，畫面高度變矮 還是看的到下方 */
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;  /* 寬度和高度都強制100% 會有變形的情況 => OK */
    background-attachment: fixed;
    background-color: var(--login-bg);
}

body {
    padding: 0;
    margin: 0;
    z-index: 2;
    overflow-x: hidden;
    height: 100%;
}

#page-container {
    position: relative;
    min-height: 100%;
}

#content-wrap {
    padding-top: 10%;
    padding-bottom: 2.5rem;    /* Footer height */
}

.login {
    margin: 0px auto;
    width: 350px;
    background-color: var(--login-base-30);
    border-radius: 5%;
    padding-top: 2rem;
}

.login .logo {
    position: relative;
    width: 260px;
    height: 100px;
    margin: 0 auto;
    font-size: 60px;
    color: #fff;
}

.login .logo img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18pt;
    text-align: center;
}

.login .box {
    padding: 1rem 1.5rem 2rem;
}

.form {
    text-align: center;
}
.group:first-child {
    margin-bottom: 2rem;
}
.group-label {
    position: relative;
}
.group-label i, .group-label svg {
    position: absolute;
    top: 0;
    left: 5px;
    color: var(--login-input-text);
    font-size: 20px;
}

input {
    margin-top: 10px;
    background-color: var(--login-input);
    color: #fff;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--login-input-text);;
    border-radius: 2px;
    font-size: 22px;
    font-weight: 400;
    padding: 5px 0 5px 40px;
    width: 300px;
    transition: border .5s;
}

input:focus {
    border: 1px solid var(--login-input-text);;
}

/* 避免自動填入的值其框會自動變色 "-internal-autofill-selected" style  */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

.link {
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: #ffffff;
    display: block;
    margin-top: 15px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
}

.button {
    cursor: pointer;
    box-shadow: none;
    transition: 0.25s;
    display: block;
    border-radius: 3px;
    border: 1px solid transparent;
    background: var(--login-button);
    color: #fff;
    width: 300px;
    margin: 0 auto;
    margin-top: 3rem;
    padding: 1rem 0;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 600;
}

.button:hover {
    background-color: var(--login-button-hover);
}

.button.active {
    background-color: var(--login-button-active);
}

#footer{
    color: white;
    text-align:center;
    font-size: 18px;
    font-weight: 300;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;  /* Footer height */
}

#footer a{
    color:#8ecae6;
    text-decoration: unset;
    letter-spacing: 2px;
}

/* 其他按鈕 & 登入方式 區塊 */
.footer_fun_area {
    text-align: center;
    padding: 2rem 0;
}
.footer_fun_area div {
    display: inline-block;
    vertical-align: top;
    width: 90px;
    height: 90px;
    margin: 2px;
}

.link2 {
    text-decoration:none;
}

.link2 img{
    max-width: 80px;
    max-height: 80px;
    margin: 5px;
    border-radius: 50px;
    background-repeat: repeat-x;
/*    -webkit-filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.6));*/
}

.link2 input {
    text-align: inherit;
    background-color: unset;
    border: unset;
    font-size: unset;
    font-weight: unset;
    padding: unset;
    width: unset;
    transition: unset;
    max-width: 80px;
    max-height: 80px;
    margin: 5px;
    border-radius: 50px;
    background-repeat: repeat-x;
/*    -webkit-filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.6));*/
}


/* 動畫: 輸入提示 */
.input-swing{
    animation: animationFrames linear 0.5s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames linear 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animationFrames linear 0.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: animationFrames linear 0.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: animationFrames linear 0.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
    0% {
        transform:  translate(0px,0px)  ;
    }
    10% {
        transform:  translate(-10px,0px)  ;
    }
    20% {
        transform:  translate(10px,0px)  ;
    }
    30% {
        transform:  translate(-10px,0px)  ;
    }
    40% {
        transform:  translate(10px,0px)  ;
    }
    50% {
        transform:  translate(-10px,0px)  ;
    }
    60% {
        transform:  translate(10px,0px)  ;
    }
    70% {
        transform:  translate(-10px,0px)  ;
    }
    80% {
        transform:  translate(10px,0px)  ;
    }
    90% {
        transform:  translate(-10px,0px)  ;
    }
    100% {
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes animationFrames{
    0% {
        -moz-transform:  translate(0px,0px)  ;
    }
    10% {
        -moz-transform:  translate(-10px,0px)  ;
    }
    20% {
        -moz-transform:  translate(10px,0px)  ;
    }
    30% {
        -moz-transform:  translate(-10px,0px)  ;
    }
    40% {
        -moz-transform:  translate(10px,0px)  ;
    }
    50% {
        -moz-transform:  translate(-10px,0px)  ;
    }
    60% {
        -moz-transform:  translate(10px,0px)  ;
    }
    70% {
        -moz-transform:  translate(-10px,0px)  ;
    }
    80% {
        -moz-transform:  translate(10px,0px)  ;
    }
    90% {
        -moz-transform:  translate(-10px,0px)  ;
    }
    100% {
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes animationFrames {
    0% {
        -webkit-transform:  translate(0px,0px)  ;
    }
    10% {
        -webkit-transform:  translate(-10px,0px)  ;
    }
    20% {
        -webkit-transform:  translate(10px,0px)  ;
    }
    30% {
        -webkit-transform:  translate(-10px,0px)  ;
    }
    40% {
        -webkit-transform:  translate(10px,0px)  ;
    }
    50% {
        -webkit-transform:  translate(-10px,0px)  ;
    }
    60% {
        -webkit-transform:  translate(10px,0px)  ;
    }
    70% {
        -webkit-transform:  translate(-10px,0px)  ;
    }
    80% {
        -webkit-transform:  translate(10px,0px)  ;
    }
    90% {
        -webkit-transform:  translate(-10px,0px)  ;
    }
    100% {
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes animationFrames {
    0% {
        -o-transform:  translate(0px,0px)  ;
    }
    10% {
        -o-transform:  translate(-10px,0px)  ;
    }
    20% {
        -o-transform:  translate(10px,0px)  ;
    }
    30% {
        -o-transform:  translate(-10px,0px)  ;
    }
    40% {
        -o-transform:  translate(10px,0px)  ;
    }
    50% {
        -o-transform:  translate(-10px,0px)  ;
    }
    60% {
        -o-transform:  translate(10px,0px)  ;
    }
    70% {
        -o-transform:  translate(-10px,0px)  ;
    }
    80% {
        -o-transform:  translate(10px,0px)  ;
    }
    90% {
        -o-transform:  translate(-10px,0px)  ;
    }
    100% {
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes animationFrames {
    0% {
        -ms-transform:  translate(0px,0px)  ;
    }
    10% {
        -ms-transform:  translate(-10px,0px)  ;
    }
    20% {
        -ms-transform:  translate(10px,0px)  ;
    }
    30% {
        -ms-transform:  translate(-10px,0px)  ;
    }
    40% {
        -ms-transform:  translate(10px,0px)  ;
    }
    50% {
        -ms-transform:  translate(-10px,0px)  ;
    }
    60% {
        -ms-transform:  translate(10px,0px)  ;
    }
    70% {
        -ms-transform:  translate(-10px,0px)  ;
    }
    80% {
        -ms-transform:  translate(10px,0px)  ;
    }
    90% {
        -ms-transform:  translate(-10px,0px)  ;
    }
    100% {
        -ms-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.animated.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut
}

/* MessageBox */
.divMessageBox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    z-index: 100000
}

.MessageBoxContainer {
    top: 35%;
    color: #fff;
    position: relative;
    width: 100%;
    background-color: #232323;
    background-color: rgba(0,0,0,.8);
    padding: 20px
}

.MessageBoxMiddle {
    position: relative;
    left: 20%;
    width: 60%
}

.MessageBoxMiddle .MsgTitle {
    letter-spacing: -1px;
    font-size: 24px;
    font-weight: 300
}

.MessageBoxMiddle .pText {
    font-size: 13px
}

.MessageBoxContainer input,.MessageBoxContainer select {
    width: 50%;
    padding: 5px
}

.MessageBoxButtonSection {
    width: 100%;
    height: 30px
}

.MessageBoxButtonSection button {
    float: right;
    margin-right: 7px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    font-weight: 700
}

/* loading */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: #dddddd;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #dddddd, 0 0 5px #dddddd;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -moz-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    -o-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #dddddd;
    border-left-color: #dddddd;
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
    0% { transform: rotate(0deg); transform: rotate(0deg); }
    100% { transform: rotate(360deg); transform: rotate(360deg); }
}


/* captcha */
#captcha {
    margin-top: 13px;
}
#captcha .user-text { width:100%;height:46px;margin:0; }

#captcha #validatecode {
    margin-left: -5px;
}

#captcha .canvas {
    margin-right: -5px;
    margin-top: 12px;
}

#captcha .canvas .refresh {
    cursor: pointer;
    height: 42px;
}

/* bigBox */
#divMiniIcons {
    visibility: hidden;
}

.bigBox {
    background-color: var(--login-base) !important;
    box-shadow: 0.3rem 0.3rem 0.3rem rgba(0,0,0,.9) ;
    border-radius: 8px;
    border: none !important;
    padding-left: 20px !important;
    padding-right: 15px !important;
}

.bigBox i.botClose::before {
   content: "";
}

.bigBox .botClose {
    filter: invert(1) grayscale(100%) brightness(200%);  /* white */
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    color: #000;
    padding: 0.25em;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center center / 1em no-repeat transparent;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    border-radius: 0.25rem;
}

/* bigBox 訊息視窗連結顏色 */
.bigBox a{
    color:#fff;
}

/* bigBox 內容限制 */
.bigBox p {
    height: 70px;
    overflow-y: auto;
}