/* sinoah.rwd.css 為框架定型設計


    row             框架Row列
    login-pc        Banner Title Logout顯示隱藏
    login-phone

    login-l         Banner Title框架Size
    login-r

    portal-login-page-username
    portal-login-page-changepwd
    portal-login-page-logout

    align-l                 文字靠左
    align-c                 文字置中
    align-r                 文字靠右

    login100-form   Login右側 邊距設定

    query100 查詢功能在M版直接呈現滿版100%


*/
/*---------------------覆蓋初始設定-控制easyui與bootstrap相衝問題-------------------*/
.panel-body {
    padding: 0px;
} 

.panel {
    margin-bottom: 0px;
}

.indent {
    /*display: flex;
    flex-wrap: wrap;*/
}

.textbox textarea.textbox-text {
    line-height: 2;
}

/*-----------DIV設定-------------------*/
.div-display {
    display: inline;
    margin-bottom: 2px;
    text-align: center;
}

.portal-login-text {
    display: inline;
    margin-bottom: 2px;
    margin-right: 10px;
    text-align: center;
}

/*Mobile 框架設定*/
.panel-fit, .panel-fit body {
    overflow: auto;
}

/*-----------------------------共用區塊 (起始設定)-----------------------------*/
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*Banner Title Logout顯示隱藏*/
.login-pc {
    display: block;
}

.login-phone {
    display: none;
}

/*Banner Title框架Size 左右寬比*/
.login-l {
    flex: 0 0 50%;
    max-width: 50%;
}

.login-r {
    flex: 0 0 50%;
    max-width: 50%;
}

.portal-login-page-username {
    font-size: 16px;
}

.portal-login-page-changepwd {
    font-size: 16px;
}

.portal-login-page-logout {
    font-size: 16px;
}

/*------------------------Bulletin公佈欄------------------------*/
.bulletin_sty {
    width: 80%;
    margin: 0px auto;
    padding-top: 1%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    background-color: #ffffff;
}

/*------------------------版型控制網格區塊------------------------*/
.align-l {
    text-align: left;
    padding-top: 7px;
    font-family: '微軟正黑體','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.align-c {
    text-align: center;
    padding-top: 7px;
    font-family: '微軟正黑體','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.align-r {
    text-align: right;
    padding-top: 7px;
    font-family: '微軟正黑體','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/*------------------------Login Page 登入頁------------------------*/

/*Login帳密輸入框名稱頂高*/
.label-input100 {
    top: 10px;
}

/*Login登入按鈕*/
.login100-form-btn {
    font-size: 18px;
    font-family: '微軟正黑體','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/*-----------------------------共用區塊 (起始設定 END)-----------------------------*/

/*  300以下的 Phone*/
@media screen and (max-width: 300px){


    /*----------客製區塊----------*/
    .elearming-testform-padding {
        padding: 10px;
    }
    /*----------客製區塊end----------*/


    .padding-l {
        padding-left: 77px;
    }

    /*Banner Title Logout顯示隱藏*/
    .login-pc {
        display: none;
    }

    .login-phone {
        display: block;
    }

    /*Banner Title框架Size 左右寬比*/
    .login-l {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .login-r {
        flex: 0 0 10%;
        max-width: 10%;
    }

    .query100 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /*Login右側 邊距設定*/
    .login100-form {
        padding: 60px 55px 50px 55px;
        /*加入背景圖片顯示 */
        /*background-image: url('../images/time1.png');*/
        background-size: cover;
    }

    /*TextBox共用設定*/
    .textbox100 {
        width: 80px;
    }

    .textbox120 {
        width: 100px;
    }

    .textbox150 {
        width: 120px;
    }

    .textbox200 {
        width: 150px;
    }

    .textbox250 {
        width: 200px;
    }

    .textbox300 {
        width: 250px;
    }

    .textbox400 {
        width: 340px;
    }

    .textbox500 {
        width: 440px;
    }

    .textboxfull {
        width: 100%;
    }
    /*bulletin公佈欄*/
    .bulletin_sty {
        width: 100%;
        margin: 0px auto;
        padding-left: 2%;
        padding-right: 2%;
        background-color: lightblue;
    }
}

/*  300~600 Phone*/
@media screen and (min-width: 300px) and (max-width: 600px) {


    /*----------客製區塊----------*/
    .elearming-testform-padding {
        padding:10px;
    }
    /*----------客製區塊end----------*/


    .padding-l {
        padding-left: 77px;
    }

    /*Banner Title Logout顯示隱藏*/
    .login-pc {
        display: none;
    }

    .login-phone {
        display: block;
    }

    /*Banner Title框架Size 左右寬比*/
    .login-l {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .login-r {
        flex: 0 0 10%;
        max-width: 10%;
    }

    .query100 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /*Login右側 邊距設定*/
    .login100-form {
        padding: 60px 55px 50px 55px;
        /*加入背景圖片顯示 */
        /*background-image: url('../images/time1.png');*/
        background-size: cover;
    }

    /*TextBox共用設定*/
    .textbox100 {
        width: 80px;
    }

    .textbox120 {
        width: 110px;
    }

    .textbox150 {
        width: 130px;
    }

    .textbox200 {
        width: 180px;
    }

    .textbox250 {
        width: 220px;
    }

    .textbox300 {
        width: 250px;
    }

    .textbox400 {
        width: 350px;
    }

    .textbox500 {
        width: 440px;
    }

    .textboxfull {
        width: 100%;
    }
    /*bulletin公佈欄*/
    .bulletin_sty {
        width: 100%;
        margin: 0px auto;
        padding-left: 2%;
        padding-right: 2%;
        background-color: lightblue;
    }
}

/*  601~900 Pad直向*/
@media screen and (min-width: 601px) and (max-width: 900px) {

    /*----------客製區塊----------*/
    .elearming-testform-padding {
        padding: 10px;
    }
    /*----------客製區塊end----------*/

    /*Banner Title Logout顯示隱藏*/
    .login-pc {
        display: none;
    }

    .login-phone {
        display: block;
    }

    /*Banner Title框架Size 左右寬比*/
    .login-l {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .login-r {
        flex: 0 0 25%;
        max-width: 25%;
    }

    /*Login右側 邊距設定*/
    .login100-form {
        /*padding: 130px 55px 0px 55px;*/
        padding: 6% 55px 0px 55px;
        background-size: cover;
    }
}

/*  901~1024 Pad橫向*/
@media screen and (min-width: 901px) and (max-width: 1024px) {
    /* Banner Title Logout顯示隱藏*/
    .login-pc {
        display: block;
    }

    .login-phone {
        display: none;
    }

    .portal-login-page-username {
        font-size: 16px;
    }

    .portal-login-page-changepwd {
        font-size: 16px;
    }

    .portal-login-page-logout {
        font-size: 16px;
    }

    /*----------------LoginPage Style----------------*/
    /*Login右側 邊距設定*/
    .login100-form {
        /*padding: 85px 55px 55px 55px;*/
        padding: 60px 55px 55px 55px;
    }

    .login100-form {
        width: 400px;
       /* min-height: 100vh;*/
        display: block;
        background-color: #f7f7f7;
    }

    .login100-more {
        width: calc(100% - 400px);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
    }
    /*----------------LoginPage Style----------------*/

    /*TextBox共用設定*/
    .textbox100 {
        width: 100px;
    }

    .textbox120 {
        width: 120px;
    }

    .textbox150 {
        width: 150px;
    }

    .textbox200 {
        width: 200px;
    }

    .textbox250 {
        width: 250px;
    }

    .textbox300 {
        width: 300px;
    }

    .textbox400 {
        width: 400px;
    }

    .textbox500 {
        width: 500px;
    }
}

/*  1025px 以上 PC版*/
@media screen and (min-width: 1025px) {


    /*----------客製區塊----------*/
    .elearming-testform-padding {
        padding: 30px;
    }
    /*----------客製區塊end----------*/




    /*Banner Title Logout顯示隱藏*/
    .login-pc {
        display: block;
    }

    .login-phone {
        display: none;
    }

    /*Banner Title框架Size 左右寬比*/
    .login-l {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .login-r {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /*Login右側 邊距設定*/
    .login100-form {
        /*padding: 93px 4vw 55px 2%;*/
        padding: 6% 4vw 55px 2%;
    }

    /*TextBox共用設定*/
    .textbox100 {
        width: 100px;
    }

    .textbox120 {
        width: 120px;
    }

    .textbox150 {
        width: 150px;
    }

    .textbox200 {
        width: 200px;
    }

    .textbox250 {
        width: 250px;
    }

    .textbox300 {
        width: 300px;
    }

    .textbox400 {
        width: 400px;
    }

    .textbox500 {
        width: 500px;
    }
}


/*--------------------------------------Call內框--------------------------------------*/
/*  300~600 Phone*/
@media screen and (min-width: 300px) and (max-width: 600px) {
    .mb-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .mb-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .mb-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .mb-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .mb-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .mb-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .mb-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .mb-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .mb-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .mb-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .mb-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .mb-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*  901~1024 Pad直向*/
@media screen and (min-width: 601px) and (max-width: 900px) {
    .pd-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .pd-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .pd-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .pd-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .pd-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .pd-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .pd-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .pd-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .pd-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .pd-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .pd-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .pd-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*  901~1024 Pad橫向*/
@media screen and (min-width: 901px) and (max-width: 1024px) {
    .pc-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .pc-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .pc-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .pc-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .pc-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .pc-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .pc-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .pc-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .pc-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .pc-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .pc-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .pc-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*  1025px 以上 PC版*/
@media only screen and (min-width: 1025px) and (max-width: 3000px) {

    .pc-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .pc-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .pc-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .pc-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .pc-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .pc-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .pc-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .pc-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .pc-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .pc-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .pc-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .pc-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}