@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block;
    line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
}

@-moz-document url-prefix() { 
    .material-icons {position: relative; top: 3px;}
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {font-size:100%;}
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.75rem;}

.BodyMaxWidth {max-width: 80rem;}
.ContentMaxWidth {/*max-width: 1000px;*/}

.software_logo {font-family: Arial, Microsoft JhengHei,sans-serif; font-size: 1.5rem;}
.footer {width: 100%; padding: 0.5rem 0; line-height: 1.5; text-align: center;}


/* common */
.flexGrid {display: flex;}
.flexGrid.align-center {align-items: center;}
.flexGrid > * {flex: 1;}

/* ui */
.ui {display: block; font-style: inherit; line-height: 1; position: relative;}

/* herder */
.header {position: relative;}

/* nav */
nav.nav {padding: 1.75rem; position: fixed; top: 0; left: 0; z-index: 800; display: none;}
.control {}
.control .ui-menu {width: 24px; height: 24px; display: flex; flex-direction: column; justify-content: center;}
.control .ui-menu > div {background: #fff; width: 100%; height: 3px; border-radius: 5px; transition: all .3s; position: relative;}
.control .ui-menu > div + div {margin-top: 6px;}
.control.active .ui-menu > div:nth-child(1) {animation: ease .7s top forwards;}
.control.active .ui-menu > div:nth-child(2) {animation: ease .7s scaled forwards;}
.control.active .ui-menu > div:nth-child(3) {animation: ease .7s bottom forwards;}

@keyframes top {0% {top: 0; transform: rotate(0);} 50% {top: 9px; transform: rotate(0);} 100% {top: 9px; transform: rotate(45deg);}}
@keyframes top-2 {0% {top: 9px; transform: rotate(45deg);} 50% {top: 9px; transform: rotate(0deg);} 100% {top: 0; transform: rotate(0deg);}}
@keyframes bottom {0% {bottom: 0; transform: rotate(0);} 50% {bottom: 9px; transform: rotate(0);} 100% {bottom: 9px; transform: rotate(135deg);}}
@keyframes bottom-2 {0% {bottom: 9px; transform: rotate(135deg);} 50% {bottom: 9px; transform: rotate(0);} 100% {bottom: 0; transform: rotate(0);}}
@keyframes scaled {50% {transform: scale(0);} 100% {transform: scale(0);}}
@keyframes scaled-2 {0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);}}

/* login */
.login ul {margin: 0; padding: 0;}
.login ul li {margin: 0; padding: 0; list-style: none;}

.login img {border: none; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; display: block;}
/* .login img {height: 100%; width: auto; display: block; margin: auto } */
.login .footer {position: absolute; bottom: 0; left: 0;}

/* banner */
.banner {font-size: 18px; font-family: Arial, Microsoft JhengHei,sans-serif;}

/* sidebar */
.sidebar {background-color: #283d8c;}
.sidebar .sidetop {padding: 10px 17px; display: flex; position: relative; overflow: hidden;}
.sidebar .sidetop:before {content: " "; background: #000; width: 200px; height: 100px; position: absolute; top: -110px; left: -37px; z-index: 11; transform: rotate(-5deg); filter: blur(17px);}
.sidebar .sidetop:after {content: " "; background: #283d8c; width: 130px; height: 100px; position: absolute; top: -25px; left: -60px; filter: blur(29px); z-index: 10;}
.sidebar .sidetop > div {background: rgba(255, 255, 255, 0.1); margin: 5px 3px; width: 18px; height: 18px;}

/* p-title */
.p-tilte {font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: bold;}

/* m-table */
.m-table_style_1.m-table {}
.m-table_style_1.m-table .m-table-title {display: none;}

.m-table_style_2.m-table {}

/* IE 8,9 and 10 */
@media screen\0 {
    
}

/* < 1023 */
@media only screen and (max-width: 63.9375em) {
    
}
/* mobile all */
@media only screen and (min-width : 0em) and (max-width : 47.9375em) {
    .header {width: 100%; height: 80px; position: fixed; top: 0; left: 0; z-index: 500;}
    nav.nav {display: flex;}
    .sidebar {
        width: 220px; height: 100%; max-height: 100%; position: fixed; top: 0; left: 0; z-index: 500;
        transform: translateX(-100%); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .sidebar.active {transform: none;}
    .sidebar .sidetop {height: 65px; visibility: hidden;}
    .sidebar .sidelist {width: 100%; height: calc(100% - 65px); position: absolute; overflow: scroll;}
    .main {padding: 80px 0 0; display: flex;}
    .main .shadow {opacity: 0; visibility: hidden;}

    .login .footer {bottom: 1rem;}

    /* m-table */
    .m-table_style_1.m-table, .m-table_style_1.m-table tbody {width: 100%; display: flex; flex-wrap: wrap; border: none;}
    .m-table_style_1.m-table .m-table-head {display: none;}
    .m-table_style_1.m-table th {display: none;}
    .m-table_style_1.m-table tr {display: flex; flex-direction: column; border: 1px solid #ccc; width: calc(50% - 10px); padding: 5px; margin: 5px;}
    .m-table_style_1.m-table td {display: flex; justify-content: space-between; border: none; text-align: right;}
    .m-table_style_1.m-table .m-table-title {display: block; text-align: left;}

    .m-table_style_2.m-table  {display: flex;}
    .m-table_style_2.m-table tbody {display: block;}
    .m-table_style_2.m-table tr {display: flex; flex-direction: column;}
    .m-table_style_2.m-table tr > td:not(:first-child) {margin-top: 5px;}
}
/* iphone 5 portrait */
@media only screen and (min-width : 0em) and (max-width : 20em) and (orientation: portrait) {
    
}