.create {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  font-size: 18px;
  margin-bottom: 8px;
}

.create:before {
  content: url("../../../../../v2/images/components/btn_type/create_plus.svg");
  position: relative;
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 400px) {
  .main_title .group {
    width: 100%;
  }

  .create {
    width: 100%;
    /* margin-bottom: 0; */
  }
}

.guide_group {
  margin-bottom: 8px;
  margin-right: 8px;
  position: relative;
}

.guide_group li+li {
  margin-left: 16px;
}

.guide_group .button {
  display: block;
  text-decoration: none;
  line-height: 1;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .05);
  background-color: #fff;
  color: #121212;
  border: none;
  cursor: pointer;
}

.button-decor {
  position: absolute;
  inset: 0;
  background-color: #285ee4;
  transform: translateX(-100%);
  transition: transform .3s;
  z-index: 0;
}

.button-content {
  display: flex;
  align-items: center;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.button__icon {
  width: 48px;
  height: 40px;
  background-color: #285ee4;
  display: grid;
  place-items: center;
}

.button__text {
  display: inline-block;
  transition: color .2s;
  padding: 2px 1.5rem 2px;
  padding-left: .75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
  font-size: 20px;
}

.guide_group .button:hover .button__text {
  color: #fff;
}

.guide_group .button:hover .button-decor {
  transform: translate(0);
}

.guide_nav {
  /* width: 343px; */
  height: 182px;
  background-color: #fff;
  border: 4px solid #359b9b;
  border-radius: 20px;
  position: absolute;
  z-index: 1;
  top: 48px;
  /* right: 0; */
  display: none;
  padding: 16px;
}

.guide_nav.active {
  display: block;
}

.guide_nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guide_nav ul li {
  width: 150px;
  height: 150px;
  background: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  text-align: center;

}

.guide_nav ul li a {
  color: #285ee4;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
}

.guide_nav ul li a>img {
  width: 100%;
  height: 100px;
}

@media screen and (max-width: 400px) {
  .guide_group {
    width: 100%;
    margin-right: 0;
  }

  .guide_group .button {
    width: 100%;
  }
}

.drp-calendar {
  /* max-width: 100%; */
  min-width: 296px;
}

.my-accoount_std {
  position: relative;
}

.my-accoount_std .sc-data-content {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 168px;
}

.form_myaccoount_std {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  margin-bottom: 16px;
}

.myaccoount_info {
  width: 100%;
  padding: 16px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
}

.myaccoount_info .tab-link {
  flex: 1 1 520px;
  margin-bottom: 16px;
}

.myaccoount_info .tab-link .tabs {
  margin-bottom: 8px;
}

.my-accoount_std .myaccoount_info .tabs a {
  color: #dbdbdb;
  font-size: 28px;
  font-weight: 500;
  padding: 0 16px;
  position: relative;
  transition: .3s ease-in;
}

.my-accoount_std .myaccoount_info .tabs a:first-child {
  padding-left: 0;
}

.my-accoount_std .myaccoount_info .tabs a.active {
  color: #285ee4;
}

.my-accoount_std .myaccoount_info .tabs a:not(.n_tb):after {
  content: '';
  position: absolute;
  height: 18px;
  width: 2px;
  background: #e0e0e0;
  top: 14px;
  right: 0;
}

/* 下拉類型選擇 */
.sc-data-content .select-selected {
  width: 180px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  line-height: 24px;
  text-align: start;
  padding: 8px 16px;
  color: #285ee4;
  font-weight: 600;
}

.sc-data-content .select-selected.select-arrow-active,
.sc-data-content .select-selected.select-arrow-active~.select-items>div {
  border-color: transparent transparent #285EE4 transparent;
}

.sc-data-content .select-selected.select-arrow-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: #3d3d3d;
}

.sc-data-content .select-selected:hover {
  background: #fff;
  border: 2px solid #285EE4
}

.sc-data-content .select-selected:after {
  top: 12px;
  right: 8px;
}

.sc-data-content .select-selected.select-arrow-active {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top: 2px solid #359b9b;
  border-left: 2px solid #359b9b;
  border-right: 2px solid #359b9b;
}

.sc-data-content .select-items {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-left: 2px solid #359b9b;
  border-right: 2px solid #359b9b;
  border-bottom: 2px solid #359b9b;
}

.sc-data-content .sc-datepicker {
  height: 40px;
  font-size: 14px;
  line-height: 22px;
  color: #285ee4;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  padding: 0 13px;
  margin-left: 16px;
  margin-right: 8px;
  margin-bottom: 0;
  letter-spacing: 1px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border: 2px solid transparent;
  position: relative;
  /* cursor: pointer; */
}

.sc-data-content .sc-datepicker:hover {
  background: #fff;
  border: 2px solid #285EE4;
}


/*日期選擇器文字顏色及文字大小設定*/
.sc-data-content .sc-datepicker input {
  background: 0 0;
  border: 0;
  color: #285ee4;
  font-size: 20px;
  line-height: 22px;
  outline: none;
  padding: 0;
  letter-spacing: 1px;
  width: 260px;
  text-align: center;
  cursor: pointer;
}


/* ----- sc-chk_content ----- */
.sc-chk_content {
  display: flex;
  align-items: center;
  position: relative;
  color: #285ee4;
  font-size: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sc-chk_content .chk_box {
  position: relative;
  margin-bottom: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*間隔線*/
.sc-chk_content .chk_box:after {
  content: '';
  position: absolute;
  top: 12px;
  right: 0px;
  height: 18px;
  width: 2px;
  background: #e0e0e0;
}

/*底部按鈕色塊*/
.sc-chk_content .chk_box .box_container {
  width: 220px;
  height: 40px;
  padding: 4px 16px 4px 44px;
  margin-right: 16px;
  border-radius: 24px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

.sc-chk_content .chk_box .box_container:hover {
  border: 2px solid #285EE4;
}

.sc-chk_content .chk_box input {
  display: none;
}

/*checkbox位置設定*/
.sc-chk_content .chk_box .outter {
  position: absolute;
  left: 10px;
  top: 1px;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  transition: .3s;
}

.sc-chk_content .chk_box .outter:hover {
  background: #d2e0e4
}

.sc-chk_content .chk_box input:checked~.outter .checkmark:after {
  display: block;
  border-color: #fff;
}

.sc-chk_content .chk_box .checkmark {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 8px;
  left: 8px;
  border: 2px solid #285EE4;
  border-radius: 3px;
  /* z-index: 2; */
  background: #fff;
}

.sc-chk_content .chk_box input:checked~.outter .checkmark {
  background: #088080;
}

.sc-chk_content .chk_box .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #138b8b;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* -- 下拉類型選擇 */
.sc-search_content .select-selected {
  width: 160px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  line-height: 24px;
  text-align: start;
  /* padding: 8px 16px; */
  color: #285ee4;
  font-weight: 600;
  box-sizing: border-box;
}

.sc-search_content .select-selected.select-arrow-active,
.sc-search_content .select-selected.select-arrow-active~.select-items>div {
  border-color: transparent transparent #285EE4 transparent;
}

.sc-search_content .select-selected.select-arrow-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: #3d3d3d;
}

.sc-search_content .select-selected:hover {
  background: #fff;
  border: 2px solid #285EE4;
}

.sc-search_content .select-selected:after {
  top: 12px;
  right: 16px;
}

.sc-search_content .select-selected.select-arrow-active {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top: 2px solid #359b9b;
  border-left: 2px solid #359b9b;
  border-right: 2px solid #359b9b;
}

/* table */
.tableFixHead {
  width: 100%;
  min-height: 484px;
  overflow-y: hidden;
  overflow-x: auto;
}

.tableFixHead table.data-table tr th {
  height: 44px;
  font-size: 18px;
}

.tableFixHead table.data-table tr td {
  height: 44px;
}

/*記帳時間*/
.tb-data-side {
  width: 8%;
  min-width: 134px;
}

/*總計*/
.tb-money {
  width: 7.5%;
  min-width: 126px;
}

/*分類*/
.tb-sort {
  width: 9.19%;
  max-width: 154px;
  min-width: 154px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*名稱*/
.tb-name {
  width: 10.5%;
  max-width: 176px;
  min-width: 176px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*收支對象(lite隱藏)*/
.tb-object {
  width: 8.71%;
  max-width: 146px;
  min-width: 146px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*資金帳戶*/
.tb-account {
  width: 8.71%;
  max-width: 146px;
  min-width: 146px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*收付款狀況*/
.tb-payment-status {
  width: 6.92%;
  min-width: 116px;
}

/*應收應付日期、實收實付日期、發票日期*/
.tb-data {
  width: 7.52%;
  max-width: 126px;
  min-width: 126px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*標籤、憑證圖檔、編輯*/
.tb-img {
  width: 5.97%;
  min-width: 100px;
  text-align: center;
}

/*標籤控制*/
.my-accoount_std .tag {
  position: relative;
}

.my-accoount_std .tag:hover .tag-content {
  display: block;
}

.my-accoount_std .tag-img {
  cursor: pointer;
}

.my-accoount_std table.data-table tr td.text-right {
  text-align: right;
}

/*沒有資料狀態*/
.nodata_content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 40px auto;
}

.nodata_content img {
  width: 343px;
  height: 300px;
}

.nodata_content>span {
  color: #6a6a6a;
  font-size: 20px;
  margin-top: 8px;
}


@media screen and (max-width: 1277px) {
  .my-accoount_std .sc-data-content {
    position: relative;
    top: -20px;
    left: 0;
  }
}


@media screen and (max-width: 600px) {
  .my-accoount_std .sc-data-content {
    flex-direction: column;
  }

  .my-accoount_std .sc-data-content .custom-select {
    width: 100%;
  }

  .my-accoount_std .sc-data-content .select-selected {
    width: 100%;
  }

  .my-accoount_std .sc-data-content .sc-data-box {
    width: 100%;
    margin-top: 16px;
  }

  .sc-data-content .sc-datepicker {
    width: 100%;
    margin-left: 0;
  }

  .sc-data-content .sc-datepicker input {
    width: 100%;
    cursor: pointer;
  }

  .sc-chk_content {
    flex-direction: column;
    align-items: start;
  }

  .sc-chk_content,
  .sc-chk_content .chk_box,
  .sc-chk_content .chk_box .box_container {
    width: 100%;
  }

  .sc-chk_content .chk_box:after {
    display: none;
  }

  .sc-chk_content .sc-search_content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .sc-chk_content .sc-search_content .select-selected {
    width: 100%;
  }

  .sc-chk_content .sc-search_content .record_search {
    width: 100%;
    margin-left: 0;
  }

  .sc-chk_content .sc-search_content .record_search input {
    width: 100%;
  }

}


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

  .my-accoount_std .nodata_content img {
    object-fit: none;
    height: 240px;
  }

}

/*遮浮窗*/
#instruction {
  visibility: hidden;
}

/* flexslider */
.blocker {
  padding-top: 120px;
  overflow: hidden;
}

.flexslider .slides>li iframe {
  width: 100%;
  height: 100%;
  height: 640px;
}

.flex-viewport {
  height: 100%;
  max-height: 642px;
}

.flexslider .slides>li img {
  height: 100%;
  max-height: 642px;
  overflow-y: auto !important;
}

@media screen and (max-width: 600px) {
  .blocker {
    padding-top: 100px;
  }

  .flexslider {
    max-height: 100%;
  }

  .flex-viewport {
    max-height: 100%;
  }

  .flexslider .slides>li img {
    max-height: 468px;
  }
}