/* Minification failed. Returning unminified contents.
(77,22): run-time error CSS1035: Expected colon, found '!important'
 */
/******Start版面主要色彩Start******/
.cms-bg-color1 {
    background-color: #FFFFFF !important; /*白色*/
}

.cms-fg-color1 {
    color: #FFFFFF !important; /*白色*/
}

.cms-bg-color2 {
    background-color: #D0BBA9 !important; /*淡棕*/
}

.cms-fg-color2 {
    color: #D0BBA9 !important; /*淡棕*/
}

.cms-bg-color3 {
    background-color: #A4844E !important; /*棕色*/
}

.cms-fg-color3 {
    color: #A4844E !important; /*棕色*/
}

.cms-bg-color4 {
    background-color: #085840 !important; /*深綠色*/
}

.cms-fg-color4 {
    /*color: #085840 !important; /*深綠色*/
    color: #218768 !important; /*深綠色*/
}

.cms-fg-darkbrown {
    color: #b6893c !important;
}

.cms-fg-darkgreen {
    /*color: #005841 !important;*/ 
    color: #218768 !important;
}

.cms-bg-color5 {
    background-color: #E4E4E4 !important; /*灰白*/
}

.cms-fg-color5 {
    color: #E4E4E4 !important; /*灰白*/
}

.cms-bg-color6 {
    background-color: #1A3E2C !important; /*黑色*/
}

.cms-fg-color6 {
    color: #1A3E2C !important; /*黑色*/
}

.cms-bg-color6 {
    background-color: #5C9100 !important; /*綠色*/
}

.cms-fg-color6 {
    color: #5C9100 !important; /*綠色*/
}

.cms-bg-color7 {
    background-color: #FF4808 !important; /*深橘色*/
}

.cms-fg-color7 {
    color: #FF4808 !important; /*深橘色*/
}

.cms-bg-color8 {
    background-color !important : #FF920D; /*橘色*/
}

.cms-fg-color8 {
    color: #FF4808 !important; /*橘色*/
}

.cms-bg-color9 {
    background-color: #555555 !important; /*灰色*/
}

.cms-fg-color9 {
    color: #555555 !important; /*灰色*/
}
/******END版面主要色彩END******/
/******Start文字層級規範Start******/
/*單元標題*/
.cms-unit-title1 {
    /*綠色*/
    color: white;
    background-color:#218768; /*#005841;*/
    font-size: 15px;
    font-family: PMingLiU;
    font-weight: bold;
    padding: 10px;
}
/*次標題*/
.cms-unit-title2 {
    /*深橘色*/
    background-color: #EE8E3D; /*#FF4808;f17e00 */
    color: white;
    font-size: 15px;
    font-family: PMingLiU;
    font-weight: bold;
    padding: 10px;
}

    /*.cms-unit-title2:before {
        content: "☛ ";
    }*/
/*小標題*/
.cms-unit-title3 {
    /*橘色*/
    color: white;
    background-color: #FF920D;
    font-size: 15px;
    font-family: PMingLiU;
    font-weight: bold;
    padding: 10px;
}

    /*.cms-unit-title3:before {
        content: "↪ ";
    }*/
/*內文標題*/
.cms-content-title {
    /*灰色*/
    color: #555555;
    font-weight: bold;
    font-size: 12pt;
    font-family: PMingLiU;
    /*新細明體;*/
}
/*內文*/
.cms-content-detail {
    /*灰色*/
    color: #555555;
    font-size: 12pt;
    font-family: PMingLiU;
    line-height: 20px;
}
/******end文字層級規範end******/

.input-control > span.informer, span.label {
    padding-top: 1px;
    padding-bottom: 2px;
}

hr {
    background-color: #b6893c !important;
    height: 1px;
    margin: 0px;
}

.cms-card-board {
    border: outset;
}

.cms-placeholder {
    font-size: 14px;
}

.cms-no-display {
    display: none;
}

.cms-tb-padding20 {
    padding-top: 30px;
}

.cms-tb-padding15 {
    padding-top: 20px;
}

.cms-lr-padding {
    padding-left: 20px;
    padding-right: 20px;
}

.cms-lr-padding5 {
    padding-left: 5px;
    padding-right: 5px;
}


.cms-label {
    /*color: #bf5a15 !important;*/
    color: #17755e !important;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 1px;
    /*text-decoration: underline;*/
}

.cms-check-clause {
    font-weight: bold;
}

.cms-message {
    /*color: #bf5a15 !important;*/
    color: #17755e !important;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 1px;
}


/*.body {
    background: url(../images/wordbox_bg.jpg) no-repeat top center #fffbf4;
    background-color: #fff;
    padding-top: 55px;
    background-size: 10%;
}*/

#Header a, button {
    font-size: 16px;
}

#DetailMenu a, button {
    font-size: 16px;
}

.cms-button {
    border-color: white;
    color: white;
    background-color: #EE8E3D; /*#fa6800; f17e00 EE8E3D*/ 
}
/*身分證號*/
#txtIDCard {
    text-transform: uppercase;
}

.cms-fun-btn {
    color: white;
    background-color: #218768; /*#17755e; 005841 218768*/  
}

.bg-pagetitle {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
    background-color: #218768; /*first greent 005841 218768*/
    color: #fff;
    letter-spacing: 0.3px;
    padding: 10px;
    margin: 0px;
    text-align: center;
    
}

    .bg-pagetitle:after {
        content: "";
    }

.detail-pagetitle {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3e2c7+0,e9d4b3+0,b68d4c+47,c19e67+50,b68d4c+51,b68d4c+51 */
    background: rgb(243,226,199); /* Old browsers */
    background: -moz-linear-gradient(top, rgb(243,226,199) 0%, rgb(233,212,179) 0%, rgb(182,141,76) 47%, rgb(193,158,103) 50%, rgb(182,141,76) 51%, rgb(182,141,76) 51%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgb(243,226,199) 0%,rgb(233,212,179) 0%,rgb(182,141,76) 47%,rgb(193,158,103) 50%,rgb(182,141,76) 51%,rgb(182,141,76) 51%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(243,226,199) 0%,rgb(233,212,179) 0%,rgb(182,141,76) 47%,rgb(193,158,103) 50%,rgb(182,141,76) 51%,rgb(182,141,76) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#b68d4c',GradientType=0 ); /* IE6-9 */
    color: #FAFAFA;
    letter-spacing: 0.5px;
    padding: 10px;
    margin: 0px;
}

.cms-panel {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffe8+43,d6dbbf+100 */
    background: rgb(254,255,232); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(254,255,232,1) 43%, rgba(214,219,191,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(254,255,232,1) 43%,rgba(214,219,191,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(254,255,232,1) 43%,rgba(214,219,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */
}
.cms-panel2 {
  
}
.headerbg {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.screenbg {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.bodybg {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#edcc61+0,edcc61+100&0.11+0,0.09+100 */
    background: -moz-linear-gradient(top, rgba(237,204,97,0.11) 0%, rgba(237,204,97,0.09) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(237,204,97,0.11) 0%,rgba(237,204,97,0.09) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(237,204,97,0.11) 0%,rgba(237,204,97,0.09) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1cedcc61', endColorstr='#17edcc61',GradientType=0 ); /* IE6-9 */
}

.bodybg2 {
    /*background: url(../Images/bg.jpg) repeat-x bottom;*/
    /*background: url(../images/cardbg.jpg);*/
}

.loginbg {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,b3bead+100;Wax+3D+%233 */
    background: rgb(252,255,244); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
}

.myShadow2 {
    /*-webkit-box-shadow: 3px 3px 3px #333;
    -moz-box-shadow: 3px 3px 3px #333;
    box-shadow: 3px 3px 3px #333;    
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    behavior: url('../PIE.htc');
    
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  behavior: url(PIE.htc);*/
    -moz-box-shadow: 5px 5px 10px #000;
    -webkit-box-shadow: 5px 5px 10px #000;
    box-shadow: 5px 5px 10px #000;
    /*這裡請務必注意PIE.htc的檔案存放路徑, 若有放置在某資料夾下記得輸入正確路徑*/
}
.myShadow {
    box-shadow: 1px 1px 2px #000;
}

/*div > .placeholder {
    background-color:darkGreen;   
    font-size:12px;
}*/
.myTile-label {
    padding: 0;
    padding-bottom: 2px;
    font-size: 10px;
}

.cms-text-data {
    text-align: left;
    font-size: 16px;
    color: #b6893c;
    font-weight: bold;
}

.cms-text-left {
    text-align: left;
    font-size: 16px;
    color: #555555;
    font-weight: bold;
}

.cms-text-label {
    text-align: right;
    font-size: 16px;
    color: #555555;
    font-weight: bold;
}

.cms-select-data {
    font-size: 1.1em;
    width: 100%;
    color: darkgreen;
}

.cms-ul-data {
    font-size: 1.1em;
    width: 100%;
    color: #0e0404;
}

.cms-web-padding5 {
    padding: 5px;
}

.cms-web-padding10 {
    padding: 10px;
}

.cms-lr-web-padding10 {
    padding-left: 10px;
    padding-right: 10px;
}

.OAuthCMS {
    width: 375px;
}

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

    .cms-web-padding5 {
        padding: 0px;
    }

    .cms-web-padding10 {
        padding: 0px;
    }

    .cms-lr-web-padding10 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .OAuthCMS {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .cms-text-label {
        padding-left: 3px;
        text-align: left;
        font-size: 14px;
        color: #555555;
        font-weight: bold;
        /*text-decoration: underline;*/
    }

    .cms-text-left {
        padding-left: 3px;
        text-align: left;
        font-size: 14px;
        color: #555555;
        font-weight: bold;
    }

    .cms-text-data {
        padding-left: 3px;
        text-align: left;
        font-size: 14px;
        color: #b6893c;
        font-weight: bold;
    }

    .cms-tb-padding20 {
        padding-top: 0px;
    }

    .cms-tb-padding15 {
        padding-top: 0px;
    }
}


cms-text-content {
    text-align: right;
    font-size: 18px;
    color: #555555;
    font-weight: bold;
}

.cms-container-d {
    width: 960px;
    margin: 0 auto;
    padding: 10px;
}

@media screen and (min-width: 1401px) {
    .cms-container-d {
        width: 1400px;
        margin: 0 auto;
    }
}

.cms-li-height30 {
    line-height: 30px;
}

.cms-border-bottom {
    border-bottom: groove 1px;
}

.cms-border-top {
    border-top: groove 1px;
}

.cms-display-none {
    display: none;
}

.cms-menu-item {
    font-size: 18px;
}

    .cms-menu-item:before {
        content: "☞ ";
    }

.cms-table-hd {
    text-align: center;
    color: darkgreen;
}

.cms-td-center {
    font-size: 16px;
    text-align: center;
    border-width: 1px;
}

.cms-td-right {
    text-align: right;
    font-size: 16px;
    border-width: 1px;
}

.cms-td-left {
    text-align: left;
    font-size: 16px;
    border-width: 1px;
}

.cms-grid-row {
    font-size: 14px;
    border: groove 1px;
    padding: 5px;
}

    .cms-grid-row div {
        padding: 2px;
    }

.cms-bg-menu {
    background-color: #fffbf4;
}


.mailbg {
    background: url(https://ccard.firstbank.com.tw/cmsweb/images/cardbg.jpg);
}

.myloading {
    height: 200px; /*高度*/
    width: 200px; /*寬度*/
    position: fixed; /*絕對位置*/
    top: 50%; /*從上面開始算，下推 50% (一半) 的位置*/
    left: 48%;
    margin-top: -100px; /*高度的一半*/
    margin-left: -40px; /*寬度的一半*/
    display: none;
}
.NBloading {
    height: 200px; /*高度*/
    width: 200px; /*寬度*/
    position: fixed; /*絕對位置*/
    top:250px; /*從上面開始算，下推 50% (一半) 的位置*/
    left: 50%;
    margin-top: -100px; /*高度的一半*/
    margin-left: -40px; /*寬度的一半*/
    display: none;
}
.backCloth {
    top: 0; /*從上面開始算，下推 50% (一半) 的位置*/
    left: 0;
    display:block;
    position:fixed;
    background-color: black;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}
.nb-backCloth {
    top: 0; /*從上面開始算，下推 50% (一半) 的位置*/
    left: 0;
    display:block;
    position:fixed;
    background-color: black;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}
.CMSHelper {
    top: 40%; /*從上面開始算，下推 50% (一半) 的位置*/
    left: 0%;
    display: block;
    position: fixed;
    opacity: 0.2;
}

.noMargin {
    margin: 0px;
}

.myTileMP {
    padding: 0px;
    margin: 4px;
    align-self: center;
}

.Show_Web {
    display: compact;
}

.Show_Mobile {
    display: none;   
}

.Show_Helper {
    display: compact;
}

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

    .Show_Helper {
        display: none;
    }
}

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

    .Show_Web {
        display: none !important;
    }

    .Show_Mobile {
        display: block;

    }
}


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

    .Show_Web {
        display: none !important;
    }

    .Show_Mobile {
        display: block;
    }
}

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

    .Show_Web {
        display: none !important;
    }

    .Show_Mobile {
        display: block;
    }
}

.app-bar.white {
    background-color: #fffbf4; /*功能列的顏色*/
    color: #c0a16c;
}

    /*.app-bar.white .app-bar-element:hover,*/
    .app-bar.white .app-bar-menu > li:hover,
    .app-bar.white .app-bar-menu > li > a:hover,
    /*.app-bar.white .app-bar-element:active,*/
    .app-bar.white .app-bar-menu > li:active,
    .app-bar.white .app-bar-menu > li > a:active {
        /*background-color: #E8FFE8;*/
        /*background-color: #f17e00;滑鼠滑過時功能列的顏色*/
        background-color: #b6893c;
        color: white;
    }

    .app-bar.white .app-bar-element:hover,
    .app-bar.white .app-bar-element:active {
        /*background-color: #E8FFE8;左圖區域的背景顏色*/
        background-color: #fffbf4;
        color: white;
    }

    .app-bar.white .app-bar-divider {
        background-color: #616162;
    }

    .app-bar.white .app-bar-element .d-menu,
    .app-bar.white .app-bar-menu > li .d-menu {
        background-color: #fffbf4;
        border-color: transparent;
    }

        .app-bar.white .app-bar-element .d-menu li:not(.disabled) > a,
        .app-bar.white .app-bar-menu > li .d-menu li:not(.disabled) > a,
        .app-bar.white .app-bar-element .d-menu li > a,
        .app-bar.white .app-bar-menu > li .d-menu li > a {
            background-color: #218768;
            color: #ffffff;
        }

            .app-bar.white .app-bar-element .d-menu li:not(.disabled) > a:hover,
            .app-bar.white .app-bar-menu > li .d-menu li:not(.disabled) > a:hover,
            .app-bar.white .app-bar-element .d-menu li > a:hover,
            .app-bar.white .app-bar-menu > li .d-menu li > a:hover {
                background-color: white;
                color: #ffffff;
            }

        .app-bar.white .app-bar-element .d-menu li:hover > a,
        .app-bar.white .app-bar-menu > li .d-menu li:hover > a {
            background-color: white;
        }

        .app-bar.white .app-bar-element .d-menu .divider,
        .app-bar.white .app-bar-menu > li .d-menu .divider {
            background-color: #616162;
        }

            .app-bar.white .app-bar-element .d-menu .divider:hover,
            .app-bar.white .app-bar-menu > li .d-menu .divider:hover {
                background-color: #616162;
            }

    .app-bar.white .app-bar-element .dropdown-toggle:before,
    .app-bar.white .app-bar-menu li .dropdown-toggle:before {
        border-color: blue;
    }

    .app-bar.white .app-bar-element.disabled,
    .app-bar.white .app-bar-menu li.disabled,
    .app-bar.white .app-bar-element:disabled,
    .app-bar.white .app-bar-menu li:disabled {
        color: #555555;
    }

        .app-bar.white .app-bar-element.disabled a,
        .app-bar.white .app-bar-menu li.disabled a,
        .app-bar.white .app-bar-element:disabled a,
        .app-bar.white .app-bar-menu li:disabled a {
            color: inherit !important;
        }

    .app-bar.white .app-bar-pullbutton:hover {
        background-color: white;
    }

    .app-bar.white .app-bar-drop-container {
        border: 2px solid #fffbf4;
        background-color: #fffbf4;
        color: #ffffff;
    }

        .app-bar.white .app-bar-drop-container:before {
            background-color: #fffbf4;
            border-color: #fffbf4;
        }

    .app-bar.white .app-bar-pullmenu .app-bar-menu {
        /*手機畫面所顯示的menu背景顏色*/
        border-top: 1px solid #616162;
        background-color: #ffffff;
    }

        .app-bar.white .app-bar-pullmenu .app-bar-menu li:hover {
            background-color: #fffbf4;
        }

            .app-bar.white .app-bar-pullmenu .app-bar-menu li:hover a {
                background-color: #218768;
                color: #ffffff;
            }