@charset "UTF-8";

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/*100、300、400、500、700、900*/

@import url('https://fonts.googleapis.com/css?family=Palanquin+Dark:500,700');


/*---base------------------------------------------------*/

*,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
}



body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


li {
  list-style-type: none;
}

img {
  vertical-align: bottom;
}



/*----------------fontStyle---------------------
------------------fontStyle---------------------
------------------fontStyle------------------ */
body {
  font-family: 'Palanquin Dark', Arial, Helvetica, sans-serif, "Noto Sans TC";
  font-size: 20px;
  line-height: 1.4em;
  color: #212121;
  letter-spacing: 2px;
  -webkit-text-size-adjust: 100%;
  /*text-shadow:#999 0.01em 0.01em 0.05em ;*/
  /*font-weight: 300;*/
}

p {
  line-height: 1.6em;
  font-weight: 500;
  color: #212121;
  letter-spacing: 2px;
  word-spacing: 3px;
}

strong {
  font-size: 1em;
  color: #212121
}

a {
  color: #212121;
  text-decoration: none;
}



small,
.small {
  font-size: 75%
}


.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}



/*----------------cleadfix---------------------
------------------cleadfix---------------------
------------------cleadfix------------------ */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}





html {
  -webkit-tap-highlight-color: transparent;
}

html ::selection {
  background: #fbb24b;
  color: #212121;
}

body {
  position: relative;
  width: 100%;
  min-height: 100%;
}




/*---l-menu------------------------------------------------*/

.body {
  background-color: #eff0f3;
}

.wrap {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-color: #eff0f3;
}

.wrap .right-side {
  position: relative;
  z-index: 96;
  width: calc(100% - 242px);
  min-height: 100vh;
  background-color: #fefefe;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.wrap .right-side .container {
  width: 100%;
  margin: 78px 0 0 0;
  overflow: hidden;
}



.l-menu.-top {
  position: fixed;
  z-index: 99;
  left: 242px;
  display: flex;
  width: calc(100% - 242px);
  height: 78px;
  background: rgb(99, 233, 209);
  /* Old browsers */
  background: -moz-linear-gradient(left, #000000 0%, #696969 40%, #292929 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #000000 0%, #696969 40%, #292929 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #000000 0%, #696969 40%, #292929 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63e9d1', endColorstr='#3695e3', GradientType=1);
  /* IE6-9 */
  box-shadow: 9px 5px 10px 0 rgba(0, 0, 0, 0.14);
}

.l-menu.-top .item {
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
  width: calc(100%/8);
  height: 78px;
  text-decoration: none;
}

.l-menu.-top .item .txt {
  position: relative;
  z-index: 98;
  width: 180px;
  height: 78px;
  text-align: center;
  line-height: 78px;
  color: white;
}


.l-menu.-top .item .ico {
  position: relative;
  z-index: 98;
  width: 40px;
  height: 40px;
  background-image: url("/assets/img/ic_tab_setting@2x.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 改為動態吃資料庫 */
/* .l-menu.-top .item:nth-child(2) .ico {
	background-image: url(../img/ic_tab_make@2x.png);
}

.l-menu.-top .item:nth-child(3) .ico {
	background-image: url(../img/ic_tab_product@2x.png);
}

.l-menu.-top .item:nth-child(4) .ico {
	background-image: url(../img/ic_tab_cart@2x.png);
}

.l-menu.-top .item:nth-child(5) .ico {
	background-image: url(../img/ic_tab_invest@2x.png);
}

.l-menu.-top .item:nth-child(6) .ico {
	background-image: url(../img/ic_tab_finience@2x.png);
}

.l-menu.-top .item:nth-child(7) .ico {
	background-image: url(../img/ic_tab_document@2x.png);
}

.l-menu.-top .item:nth-child(8) .ico {
	background-image: url(../img/ic_tab_setting@2x.png);
} */

.l-menu.-top .item.select:after {
  content: '';
  position: absolute;
  z-index: 97;
  left: 0;
  top: 0;
  width: 100%;
  height: 78px;
  background-color: #e50914;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);
}

.l-menu.-top .item.select .txt {
  font-weight: bold;
}

.l-menu.-side {
  position: relative;
  z-index: 98;
  display: flex;
  flex-wrap: wrap;
  width: 242px;
  height: auto;
  background-color: #eff0f3;
}

.l-menu.-side .in {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 98;
  width: 242px;
  min-height: 100vh;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);
}

.l-menu.-side .top {
  width: 100%;
  height: 320px;
  background-color: #000000;
  overflow: hidden;
}

.l-menu.-side .top .logo {
  display: block;
  width: 162px;
  height: 30px;
  margin: 26px auto 26px auto;
  background-size: 100% 100%;
  background-image: url(../img/Group3347.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.l-menu.-side .top .userinfo {
  width: 192px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.l-menu.-side .top .userinfo .avatar {
  width: 118px;
  height: 118px;
  overflow: hidden;
  margin: 0 auto 13px auto;
  border-radius: 50%;
  border: 1px solid #dedede;

}

.l-menu.-side .top .userinfo .avatar img {
  width: 100%;
  height: auto;
}

.l-menu.-side .top .userinfo .name-job {
  width: 100%;
  height: 45px;
  margin: auto 0 11px auto;
  text-align: center;
}

.l-menu.-side .top .userinfo .name-job .name {
  width: 100%;
  height: 27px;
  line-height: 27px;
  overflow: hidden;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.l-menu.-side .top .userinfo .name-job .job {
  width: 100%;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
}

.l-menu.-side .top .logout {
  width: 110px;
  height: 24px;
  line-height: 21px;
  margin: auto;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #e50914;
  border-radius: 5px;
  border: 2px solid #e50914;
}

.l-menu.-side .bottom {
  width: 100%;
  height: calc(100vh - 364px);
  overflow: auto;
  direction: rtl;
}

.l-menu.-side .bottom::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #F5F5F5;
}

.l-menu.-side .bottom::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

.l-menu.-side .bottom::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 0;
  background-color: #e8e8e8;
}

.l-menu.-side .bottom nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.l-menu.-side .bottom nav ul {
  width: 100%;
  transform-style: preserve-3d;
  transition: max-height .5s ease-in-out;
}

.l-menu.-side .bottom nav ul.ul-b {
  overflow: hidden;
  max-height: 0;
}

.l-menu.-side .bottom nav ul li a {
  display: block;
  width: 100%;
  max-height: 100px;
  line-height: 30px;
  text-align: left;
  overflow: hidden;
  padding: 10px 25px 10px 28px;
}

.l-menu.-side .bottom nav ul li.li-a,
.l-menu.-side .bottom nav ul li.li-b {
  width: 100%;
  height: auto;
  margin: 0;
  direction: ltr;
}

.l-menu.-side .bottom nav ul li.li-a>a {
  background-color: #eff0f3;
}

.l-menu.-side .bottom nav ul li.li-b>a {
  padding-left: 52px;
  background-color: white;
}

.l-menu.-side .bottom nav ul li.li-b:first-child>a {
  padding-top: 20px;
}

.l-menu.-side .bottom nav ul li.li-b:last-child>a {
  padding-bottom: 20px;
}

.l-menu.-side .bottom nav ul li.li-a.select>a,
.l-menu.-side .bottom nav ul li.li-b.select>a {
  position: relative;
  width: 100%;
  font-weight: bold;
  color: #e50914;
}

.l-menu.-side .bottom nav ul li.li-a.select ul.ul-b {
  /* max-height: 100vh;	 */
  max-height: unset;
}

.l-menu.-side .bottom nav ul li.li-a.select>a:before,
.l-menu.-side .bottom nav ul li.li-b.select>a:before {
  content: '';
  position: absolute;
  left: 8px;
  top: 16px;
  width: 5px;
  height: 20px;
  background-color: #e50914;
}

.l-menu.-side .bottom nav ul li.li-b.select>a:before {
  height: 16px;
  left: 30px;
  top: 28px;
}


/* 日期元件 */
.DateControlInput {
  width: 130px;
  height: 40px;
  display: block;
  line-height: 1.42857143;
  color: #676767;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-left: 5%;
}

/* 時間選單元件圖案 */
.DatetimeBtn-span {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0px !important;
}

.DatetimeBtn-icon {
  display: flex;
  background-image: url("/assets/img/icon/ic_calender@2x.png");
  background-size: 25.7px 25.7px;
  border: 0;
  width: 25.7px;
  height: 25.7px;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  vertical-align: center;
}

/* 圖片按鈕 */
.PicIcon {
  background-image: url("/assets/img/icon/Group1723@2x.png");
  background-size: 100% 100%;
  width: 25.7px;
  height: 25.7px;
  cursor: pointer;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* 對齊用 */
.Arrangement {
  display: flex;
  position: relative;
}

/* 紅色搜尋放大鏡 */
.InputSmallStyleBtn {
  background-image: url("/assets/img/Path62.png");
  background-size: 100% 100%;
  width: 27px;
  height: 27px;

  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
  cursor: pointer;
}

/* /箭頭向上/*/
.ic_Up {
  background-image: url("/assets/img/arrowU@2.png");
  background-size: 100% 100%;
  border: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

/* /箭頭向下/*/
.ic_Down {
  background-image: url("/assets/img/arrowD@2.png");
  background-size: 100% 100%;
  border: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
}



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

  body {
    font-size: 18px;
  }

  .l-menu.-top .item .ico {
    width: 30px;
    height: 30px;
    margin: auto 0 auto 0;
  }

  .l-menu.-side .top {
    height: 334px;
  }

  .l-menu.-side .bottom {
    height: calc(100vh - 334px);
  }

  .l-menu.-side .top .logo {
    width: 145.8px;
    height: 27px;
    margin: 26px auto 26px auto;
  }

  .l-menu.-side .top .userinfo .avatar {
    width: 90px;
    height: 90px;
  }

  /* 日期元件 */
  .DateControlInput {
    width: 110px;
  }

}



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

  body {
    font-size: 16px;
  }

  .wrap .right-side {
    width: calc(100% - 220px);
  }

  .l-menu.-side {
    width: 220px;
  }

  .l-menu.-side .in {
    width: 220px;
  }

  .l-menu.-top {
    left: 220px;
    width: calc(100% - 220px)
  }

  .l-menu.-side .top .logo {
    width: 97.2px;
    height: 18px;
    margin: 34px auto 20px auto;
  }

  .l-menu.-side .top .userinfo .avatar {
    width: 90px;
    height: 90px;
  }


}

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

  body {
    font-size: 14px;
  }

  .l-menu.-top .item .txt {
    width: 70px;
  }

  .l-menu.-top .item .ico {
    width: 20px;
    height: 20px;
    margin: auto 4px auto 0;
  }

  .l-menu.-side .bottom nav ul li a {
    line-height: 22px;
  }

  .l-menu.-side .bottom nav ul li.li-a.select>a:before,
  .l-menu.-side .bottom nav ul li.li-b.select>a:before {
    left: 12px;
    top: 15px;
    width: 2px;
    height: 10px;
  }

  .l-menu.-side .bottom nav ul li.li-b.select>a:before {
    left: 32px;
    top: 25px;
  }

}

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

  .l-menu.-top {
    height: 68px;
  }

  .l-menu.-top .item.select:after {
    height: 68px;
  }

  .l-menu.-top .item {
    height: 68px;
  }

  .l-menu.-top .item .ico {
    margin: auto 0;
  }
}

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

  .l-menu.-top .item .txt {
    width: 40px;
  }

}

/* TAB樣式*/
.mat-tab-header-pagination {
  background-color: #bee2ff !important;
}

.mat-tab-header-pagination-chevron {
  border-color: #3695e3 !important;
}

.mat-tab-label {
  background-color: #bee2ff !important;
  border: solid 2px #3695e3 !important;
  color: #3695e3 !important;
  font-size: 18px !important;
}

.mat-tab-label[aria-selected="true"] {
  opacity: 1;
}

.mat-tab-label .tab-title {
  margin: 0px !important;
  cursor: pointer;
}

.mat-tab-label [type="checkbox"] {
  margin: 4px 6px;
  float: left;
  cursor: pointer;
}

.mat-ink-bar {
  background-color: #3695e3 !important;
}

mat-tab-group {
  height: 90%;
  background-color: #fefefe;
}