@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
/*-------------------------------------------------------------------------------*/
/*    $Base                                                                      */
/*-------------------------------------------------------------------------------*/
body {
  position: relative;
  font-family: Arial, "Noto Sans TC", sans-serif;
  background: white;
}
body.search-active {
  background: #EEF3FA;
  height: 100vh;
  overflow: hidden;
}
@media (min-width: 1200px) {
  body {
    background: #f7f9fc;
  }
  body.search-active {
    background: #f7f9fc;
    height: auto;
    overflow: auto;
  }
}

html, body, form {
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (min-width: 1920px) {
  html, body, form {
    background-size: 100%;
  }
}

img {
  vertical-align: middle;
}

input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a {
  color: rgb(64.2348484848, 121.803030303, 222.2651515152);
}
a:hover {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:focus {
  outline: 0;
}

/*-------移除EJ2金鑰框說明-------*/
.removeTip {
  position: absolute;
  opacity: 0;
  height: 0;
  outline: 1px solid red;
  clip-path: 100%, 0, 0, 0;
  display: none;
}

.removeTip ~ DIV {
  display: none;
}

/*-------------------------------------------------------------------------------*/
/*    $Grid                                                                      */
/*-------------------------------------------------------------------------------*/
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.container::after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 576px) {
  .container {
    width: 546px;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container {
    width: 728px;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container {
    width: 952px;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1168px;
    max-width: 100%;
  }
}
@media (min-width: 1560px) {
  .container {
    width: 1520px;
    max-width: 100%;
  }
}
@media (min-width: 1800px) {
  .container {
    width: 1760px;
    max-width: 100%;
  }
}

.container-fluid {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.container-fluid::after {
  content: "";
  display: table;
  clear: both;
}

/*-------------------------------------------------------------------------------*/
/*    $Navigation                                                                */
/*    A.選單主要框架                                                              */
/*    B.按鈕共用樣式                                                              */
/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/
/*    A.選單主要框架                                                              */
/*    1.管理收合、滑鼠滑過等樣式                                                   */
/*-------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  html.minimenu .tpnet-navigation {
    width: 100px;
  }
  html.minimenu .tpnet-navigation .navbar-content {
    width: 100px;
    border-top: 1px solid #f7f9fc;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  html.minimenu .tpnet-navigation .navbar-content .nav-submenu {
    visibility: hidden;
    height: 0;
  }
  html.minimenu .tpnet-navigation .navbar-content .nav-ul > li.nav-item {
    padding: 0 8px 0 22px;
  }
  html.minimenu .tpnet-navigation .navbar-content .nav-tip-top {
    padding: 0 8px 0 15px;
  }
  html.minimenu .tpnet-navigation:hover .navbar-content {
    position: absolute;
    width: 280px;
    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  html.minimenu .tpnet-navigation:hover .navbar-content .nav-submenu {
    visibility: visible;
    height: auto;
  }
  html.minimenu .tpnet-navigation:hover .navbar-content .nav-ul > li.nav-item.hasmenu:after {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  html.minimenu .tpnet-navigation:hover .nav-mtext, html.minimenu .tpnet-navigation:hover .nav-ver {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  html.minimenu .m-header {
    padding: 0;
  }
  html.minimenu .navbar-wrapper .brand .logo-lg {
    display: none;
  }
  html.minimenu .navbar-wrapper .brand .logo-sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  html.minimenu .nav-mtext {
    display: none;
  }
  html.minimenu .nav-ver {
    display: none;
  }
  html.minimenu .nav-ul > li.nav-item.hasmenu:after {
    display: none;
  }
}
.tpnet-navigation {
  position: fixed;
  top: 0;
  left: -295px;
  bottom: 0;
  z-index: 5;
  width: 295px;
  background: #f7f9fc;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.tpnet-navigation:after {
  content: "";
  position: absolute;
  z-index: 55;
  top: 35px;
  right: 23px;
  width: 26px;
  height: 26px;
  background: url(../images/mobile-close.svg) no-repeat center center;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
}
@media (min-width: 1200px) {
  .tpnet-navigation {
    left: 0;
    width: 280px;
  }
}
.tpnet-navigation .nav-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: rgba(87, 93, 102, 0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .tpnet-navigation .nav-menu-overlay {
    display: none;
  }
}
.tpnet-navigation.mob-navigation-active {
  left: 0px;
}
.tpnet-navigation.mob-navigation-active:after {
  opacity: 1;
}
.tpnet-navigation.mob-navigation-active {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tpnet-navigation.mob-navigation-active .nav-menu-overlay {
  background: rgba(87, 93, 102, 0.5);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar-wrapper {
  position: relative;
  z-index: 5;
  background: inherit;
  height: 100vh;
  font-family: Arial, "Noto Sans TC", sans-serif;
}
.navbar-wrapper .m-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 80px;
  padding: 30px 30px 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.navbar-wrapper .brand img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
}
.navbar-wrapper .brand .logo-lg {
  width: 95%;
}
@media (min-width: 1200px) {
  .navbar-wrapper .brand .logo-lg {
    width: 100%;
  }
}
.navbar-wrapper .brand .logo-sm {
  display: none;
}
.navbar-wrapper .locked {
  pointer-events: none !important;
  opacity: 0.3;
}
.navbar-content {
  position: relative;
  padding-bottom: 3rem;
  overflow-y: scroll;
  height: calc(100vh - 80px);
  background: #f7f9fc url(../images/nav-bg.jpg) no-repeat left bottom;
}
.navbar-content::-webkit-scrollbar {
  width: 10px;
}
.navbar-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navbar-content:hover::-webkit-scrollbar {
  width: 10px;
}
.navbar-content:hover::-webkit-scrollbar-thumb {
  background: #eaebef;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navbar-content:hover::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
  width: 20px !important;
}
.navbar-content:hover::-webkit-scrollbar-thumb:hover::-webkit-scrollbar {
  width: 15px;
}

/*-------------------------------------------------------------------------------*/
/*    B.按鈕共用樣式                                                              */
/*    1.為了日後方便管理，每層都是分開寫的(有權重)，每個都有註解是第幾層              */
/*-------------------------------------------------------------------------------*/
.nav-ul > li.nav-item {
  position: relative;
  padding: 0 8px 0 18px;
  font-size: 18.5px;
}
.nav-ul > li.nav-item .nav-link {
  padding-right: 2em;
}
.nav-ul > li.nav-item .nav-link .nav-mtext {
  padding-top: 2px;
}
.nav-ul > li.nav-item.hasmenu:after {
  content: "";
  position: absolute;
  right: 30px;
  top: 24px;
  width: 4px;
  height: 4px;
  border-bottom: 2px solid #666666;
  border-right: 2px solid #666666;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.nav-ul > li.nav-item.hasmenu.active:after {
  top: 24px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.nav-ul > li.nav-item.active:before, .nav-ul > li.nav-item:hover:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 6px;
  height: 55px;
  background: #6696e8;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.nav-ul > li.nav-item > ul li.nav-item {
  position: relative;
  padding: 0 18px;
  font-size: 16px;
}
.nav-ul > li.nav-item > ul li.nav-item .nav-link {
  margin: 3px -15px;
  border-radius: 8px;
}
.nav-ul > li.nav-item > ul li.nav-item .nav-link:before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 3px;
  width: 3px;
  margin: 8px 6px;
  background: #575d66;
  border-radius: 50%;
}
.nav-ul > li.nav-item > ul li.nav-item .nav-link.last-lv {
  background: #6696e8;
  color: white;
}
.nav-ul > li.nav-item > ul li.nav-item .nav-link.last-lv:before {
  background: white;
}
.nav-ul > li.nav-item > ul li.nav-item.hasmenu:after {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 4px;
  height: 4px;
  border-bottom: 2px solid #666666;
  border-right: 2px solid #666666;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.nav-ul > li.nav-item > ul li.nav-item.hasmenu.active:after {
  top: 21px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.nav-ul > li.nav-item > ul li.nav-item.hasmenu.active > .nav-link:after {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 6px;
  height: 100%;
  min-height: 55px;
  background: #6696e8;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.nav-ul > li.nav-item > ul li.nav-item > ul li.nav-item {
  padding: 0 0 0 18px;
  font-size: 14px;
}
.nav-ul > li.nav-item > ul li.nav-item > ul li.nav-item.hasmenu:after {
  right: 4px;
  top: 20px;
}
.nav-ul > li.nav-item > ul li.nav-item > ul li.nav-item.hasmenu.active > .nav-link:after {
  left: -38px;
}
.nav-ul > li.nav-item > ul li.nav-item > ul li.nav-item > ul li.nav-item.hasmenu {
  padding: 0 0 0 18px;
}
.nav-ul > li.nav-item > ul li.nav-item > ul li.nav-item > ul li.nav-item.hasmenu .nav-link:after {
  left: -56px;
}
.nav-ul > li.nav-item > ul li.nav-item > ul li.nav-item > ul li.nav-item.hasmenu > ul li.nav-item .nav-link {
  padding-right: 16px;
}
.nav-micon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin: -1px 10px 0 0;
  background-position: center center;
  background-repeat: no-repeat;
}
.nav-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1.2;
  margin: 3px 0;
  padding: 15px 15px;
  color: #575d66;
}
.nav-tip {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 8px 15px 5px;
  line-height: 2;
  font-size: 15px;
  color: #575d66;
}
.nav-tip .nav-micon {
  background: url(../images/nav-icon-tip.svg) no-repeat center center;
}
@media (min-width: 1200px) {
  .nav-tip {
    padding: 15px 8px 15px 20px;
  }
}
.nav-ver {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 25px 8px 25px 0px;
  font-size: 0.8rem;
  color: #575d66;
  line-height: 1.5;
}
.nav-ver.text-center ul li {
  text-align: center;
}
.nav-head {
  padding: 15px 15px 15px 25px;
}
@media (min-width: 1200px) {
  .nav-head {
    display: none;
  }
}
.nav-langbox {
  position: relative;
}
.nav-langbox:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 26px;
  height: 26px;
  background: url(../images/lang-icon.svg) no-repeat center center;
}
.nav-lang {
  width: 100%;
  height: 40px;
  padding: 0 10px 0 38px;
  border-radius: 8px;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../images/select-arrow.svg) no-repeat center right 0.5rem #f7f9fc;
  outline: 2px solid #575d66;
}
.nav-lang:focus, .nav-lang option:focus, .nav-lang option:checked {
  outline: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.nav-lang:focus {
  background: url(../images/select-arrow-change.svg) no-repeat center right 0.5rem #f7f9fc;
}

.nav-item > .nav-link .nav-micon {
  background-image: var(--icon);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 1200px) {
  .nav-ul {
    padding-top: 1rem;
    min-height: calc(100vh - 200px);
  }
}
/*-------------------------------------------------------------------------------*/
/*    $Header                                                                    */
/*    A.主要框架                                                                  */
/*    B.行動版HEADER                                                              */
/*-------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  html.minimenu .header-wrapper {
    left: 100px;
  }
}
/*-------------------------------------------------------------------------------*/
/*    A.主要框架                                                                  */
/*    1.基本HEADER框架                                                            */
/*    2.客製SELECT元件                                                            */
/*    3.頁面路徑導航 (目前先移除了)                                                */
/*    4.登入系統及語系                                                             */
/*-------------------------------------------------------------------------------*/
.header-wrapper {
  position: relative;
  z-index: 3;
  right: 0;
  background: #fff;
  min-height: 80px;
  top: 0;
  left: 0;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.header-wrapper.search-active {
  display: none;
}
@media (min-width: 1200px) {
  .header-wrapper.search-active {
    display: block;
  }
}
.header-wrapper:before, .header-wrapper:after {
  content: "";
  position: absolute;
  top: 80px;
  left: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: radial-gradient(200px at 30px 0px, transparent 30px, #f7f9fc 30px);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.header-wrapper:after {
  left: unset;
  right: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media (min-width: 1200px) {
  .header-wrapper {
    position: fixed;
    left: 280px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    border-top-left-radius: 30px;
  }
  .header-wrapper:before, .header-wrapper:after {
    display: none;
  }
}
.header-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 20px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding-top: 80px;
}
@media (min-width: 1200px) {
  .header-left {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: 0;
  }
}
.header-right {
  position: fixed;
  z-index: 999;
  top: 22px;
  right: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#menu-mini-button.hidebtn, #menu-expend-button.hidebtn {
  display: none;
}

.navigation-toggle {
  display: none;
}
@media (min-width: 1200px) {
  .navigation-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.custom-select {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 !important;
  height: auto !important;
  font-size: 1.25rem;
  border: 0 !important;
  background: none !important;
  border-top: 1px solid rgba(229, 231, 235, 0) !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.custom-select select {
  display: none; /* 隱藏原生 select */
}
@media (min-width: 1200px) {
  .custom-select {
    width: 242px;
    border: 0 !important;
  }
}

.select-selected {
  position: relative;
  color: #1b1f26;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 55px 0 0;
  height: 68px;
  font-size: 1.875rem;
  font-weight: bold;
  cursor: pointer;
  border-left: 1px solid #e5e7eb;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.select-selected:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 68px;
  height: 68px;
  border-right: 1px solid #e5e7eb;
  background: url(../images/custom-select-icon.svg) no-repeat center center;
}
@media (min-width: 1200px) {
  .select-selected {
    height: 80px;
  }
  .select-selected:after {
    width: 80px;
    height: 80px;
  }
}

.select-items {
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 997;
  display: none; /* 預設隱藏選項列表 */
  padding: 0;
  border: 1px solid #e5e7eb;
  border-top: 0;
}
.select-items:after {
  content: "";
  position: absolute;
  z-index: 998;
  top: -68px;
  right: -1px;
  width: 68px;
  height: 68px;
  border-right: 1px solid #e5e7eb;
  background: white url(../images/custom-selected-icon.svg) no-repeat center center;
}
@media (min-width: 1200px) {
  .select-items:after {
    top: -80px;
    width: 80px;
    height: 80px;
  }
}

.select-items div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 20px;
  color: #575d66;
  cursor: pointer;
  border-top: 1px solid #e5e7eb;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.select-items div:hover {
  background-color: #f0f4fd;
}

.same-as-selected {
  color: white !important;
  background-color: #6696e8 !important; /* 選中項目樣式 */
}

.page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 52px;
  border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 1200px) {
  .page-header {
    height: 80px;
    border: 0;
  }
}
.page-header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 1rem;
}
.page-header li {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
  color: #1b1f26;
  font-size: 0.875rem;
}
.page-header li:first-child {
  font-size: 1.125rem;
}
.page-header li:not(:last-child):after {
  content: "";
  position: absolute;
  right: -3px;
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-bottom: 2px solid #666666;
  border-right: 2px solid #666666;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.page-header li a {
  color: #1b1f26;
}
.page-header li a:hover {
  color: #6696e8;
}

@media (min-width: 1200px) {
  .login-header {
    position: absolute;
    top: 0;
    right: var(--weblang);
  }
}
.login-box {
  display: none;
}
.login-box.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 220px;
}
.login-logged, .login-form {
  width: 100%;
  margin-top: 52px;
  max-width: 220px;
  padding: 15px;
  background: white;
  border: 1px solid #f8f9fa;
  -webkit-box-shadow: 0 0 5px rgba(97, 93, 93, 0.2);
          box-shadow: 0 0 5px rgba(97, 93, 93, 0.2);
  border-radius: 8px;
}
.login-logged input[type=text], .login-logged input[type=password], .login-form input[type=text], .login-form input[type=password] {
  width: 100%;
  min-height: 34px;
  margin-bottom: 10px;
  padding: 5px 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  border: 1px solid #adb5bd;
  color: #575d66;
}
.login-logged input[type=password], .login-form input[type=password] {
  padding-right: 40px;
}
.login-logged .label, .login-form .label {
  font-size: 0rem;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.login-logged a, .login-form a {
  color: #6696e8;
}
.login-logged a:hover, .login-form a:hover {
  color: #5689e2;
}
.login-logged a.logout-btn, .login-logged a.edit-btn, .login-form a.logout-btn, .login-form a.edit-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 34px;
  background: #6696e8;
  color: white;
  border: 0;
  border-radius: 5px;
}
.login-logged a.logout-btn:hover, .login-logged a.edit-btn:hover, .login-form a.logout-btn:hover, .login-form a.edit-btn:hover {
  opacity: 0.75;
}
.login-logged a.logout-btn, .login-form a.logout-btn {
  margin-bottom: 10px;
  background: #d3af90;
}
.login-logged .form-group, .login-form .form-group {
  position: relative;
}
.login-logged .icon-eye, .login-form .icon-eye {
  position: absolute;
  right: 0;
  top: 1px;
  width: 34px;
  height: 33px;
  border-left: 1px solid #adb5bd;
  background: url(../images/icon-eye.svg) no-repeat center center;
}
.login-logged .icon-eye:hover, .login-form .icon-eye:hover {
  cursor: pointer;
}
.login-logged .icon-eye.codeshow, .login-form .icon-eye.codeshow {
  background: url(../images/icon-eye-close.svg) no-repeat center center;
}
.login-logged .microsoft-btn, .login-form .microsoft-btn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 10px;
  margin-bottom: -5px;
}
.login-logged .microsoft-btn:before, .login-logged .microsoft-btn:after, .login-form .microsoft-btn:before, .login-form .microsoft-btn:after {
  content: "";
  position: absolute;
  top: 0;
}
.login-logged .microsoft-btn:before, .login-form .microsoft-btn:before {
  width: 100%;
  border-top: 1px solid #e5e7eb;
}
.login-logged .microsoft-btn:after, .login-form .microsoft-btn:after {
  content: "or";
  top: -9px;
  padding: 3px 10px;
  background: white;
  color: #7da6eb;
  font-size: 0.8rem;
}
.login-logged .form-action, .login-form .form-action {
  margin: 20px 0;
}
.login-logged .form-action input[type=submit], .login-form .form-action input[type=submit] {
  width: 100%;
  height: 34px;
  background: #6696e8;
  color: white;
  border: 0;
  border-radius: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.login-logged .form-action input[type=submit]:hover, .login-form .form-action input[type=submit]:hover {
  background: #5689e2;
}
.login-btn {
  position: absolute;
  right: 0;
  top: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 45px;
  height: 37px;
  background: #6696e8;
  color: white;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 0rem;
}
.login-btn span {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
@media (min-width: 1560px) {
  .login-btn {
    width: inherit;
    min-width: 120px;
    padding: 0 1rem 0 40px;
    font-size: 1rem;
  }
}
.login-btn:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 26px;
  height: 26px;
  background: url(../images/login-icon.svg) no-repeat center center;
}
.login-btn:hover {
  background: #7da6eb;
}
.login-btn.logged {
  background: #d3af90;
}
.login-btn.logged:before {
  background: url(../images/logged-icon.svg) no-repeat center center;
}

.web-langbox {
  display: none;
  position: relative;
  margin-left: 1rem;
}
@media (min-width: 1200px) {
  .web-langbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.web-langbox:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 26px;
  height: 26px;
  background: url(../images/lang-icon.svg) no-repeat center center;
}
.web-lang {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 38px;
  border-radius: 8px;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../images/select-arrow.svg) no-repeat center right 0.5rem #f7f9fc;
  outline: 1px solid #575d66;
}
.web-lang:focus {
  background: url(../images/select-arrow-change.svg) no-repeat center right 0.5rem #f7f9fc;
}

/*-------------------------------------------------------------------------------*/
/*    B.行動版HEADER                                                              */
/*    1.基本HEADER框架                                                            */
/*-------------------------------------------------------------------------------*/
.mobile-header {
  position: fixed;
  z-index: 2;
  width: 100%;
  background: #f7f9fc;
}
@media (min-width: 1200px) {
  .mobile-header {
    display: none;
  }
}
.mobile-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 80px;
}
.mobile-toggler {
  position: absolute;
  top: 16px;
  left: 22px;
  width: 40px;
  height: 48px;
}
.mobile-toggler .hamburger {
  position: relative;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #6696e8;
}
.mobile-toggler .hamburger:before, .mobile-toggler .hamburger:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #6696e8;
}
.mobile-toggler .hamburger:before {
  top: -10px;
}
.mobile-toggler .hamburger:after {
  bottom: -10px;
}

/*-------------------------------------------------------------------------------*/
/*    $Main                                                                      */
/*    1.main(基本框)                                                              */
/*    2.main-banner                                                              */
/*    3.main-content.for-reports                                                 */
/*-------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  html.minimenu .main-wrapper {
    margin-left: 100px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  html.minimenu .mainbanner-wrapper {
    width: calc(100% - 864px + 180px);
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  html.minimenu .main-new-header {
    width: calc(100% - 100px);
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
}
@media (min-width: 1560px) {
  html.minimenu .mainbanner-wrapper {
    width: calc(100% - 941px + 180px);
  }
}
.main-wrapper {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: white;
  padding-bottom: 20px;
  overflow-x: hidden;
}
.main-wrapper.search-active {
  z-index: 999999;
  padding: 20px 0 0;
  border-bottom: 20px solid rgba(0, 0, 0, 0);
  overflow-y: scroll !important;
  height: calc(100% - 161px) !important;
}
.main-wrapper.search-active .main-content {
  padding-top: 0;
}
.main-wrapper.search-active .main-container {
  display: none;
}
.main-wrapper.search-active .search-bottom {
  border-bottom: 40px solid #EEF3FA;
}
@media (min-width: 1200px) {
  .main-wrapper.search-active {
    top: 80px;
    z-index: 1;
    overflow: auto !important;
    height: auto !important;
    padding: 0 0 20px 25px;
  }
  .main-wrapper.search-active .main-content {
    padding-top: 85px;
  }
  .main-wrapper.search-active .main-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .main-wrapper.search-active .search-bottom {
    border-bottom: 0px;
  }
}
@media (min-width: 1800px) {
  .main-wrapper.search-active {
    overflow-y: none;
    border-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .main-wrapper {
    top: 80px;
    height: calc(100vh - 80px);
    padding-bottom: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .main-wrapper::-webkit-scrollbar {
    width: 10px;
    background: #f7f9fc;
  }
  .main-wrapper::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .main-wrapper:hover::-webkit-scrollbar {
    width: 10px;
  }
  .main-wrapper:hover::-webkit-scrollbar-thumb {
    background: rgba(102, 150, 232, 0.5);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .main-wrapper:hover::-webkit-scrollbar-thumb:hover {
    background: #7da6eb;
    width: 20px !important;
  }
  .main-wrapper:hover::-webkit-scrollbar-thumb:hover::-webkit-scrollbar {
    width: 15px;
  }
}
@media (min-width: 1560px) {
  .main-wrapper::-webkit-scrollbar {
    width: 10px;
    background: white;
  }
}
.main-bottom {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 72px;
  padding: 1rem;
}
.main-bottom button, .main-bottom input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 48px;
  min-width: 140px;
  margin: 0 5px;
  padding: 0;
  background: #6696e8;
  color: white;
  border-radius: 10px;
  border: 0;
  outline: none;
  font-size: 0.9rem;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .main-bottom button, .main-bottom input {
    min-width: 200px;
  }
}
@media (min-width: 1560px) {
  .main-bottom button, .main-bottom input {
    min-width: 240px;
  }
}

.mainBox {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.mainBox .main-wrapper {
  background: #EEF3FA;
}

/*-------------------------------------------------------------------------------*/
/*    //主框調整RWD位置                                                           */
/*-------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  .main-wrapper {
    margin-left: 280px;
    padding-left: 25px;
    border-bottom-left-radius: 30px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
}
.main-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 25px 22px 0;
  width: 100%;
}
@media (min-width: 1200px) {
  .main-content {
    padding: 25px 25px 0 0;
  }
}
.main-right {
  display: none;
}
@media (min-width: 1560px) {
  .main-right {
    position: fixed;
    right: 10px;
    top: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 315px;
    height: calc(100vh - 80px);
    padding: 0 2px 25px 18px;
    background: white;
  }
}

.main-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 100px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: white;
}
@media (min-width: 1200px) {
  .main-container {
    height: 100%;
    margin-bottom: 25px;
    overflow-y: hidden;
  }
}

.main-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 8px 25px 8px 0;
  border-bottom: 1px solid #e5e7eb;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.main-header a.more, .main-header a.more-en {
  position: absolute;
  top: 15px;
  right: 63px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  height: 28px;
  min-width: 35px;
  background: #5065a6;
  color: white;
  border-radius: 4px;
  font-size: 0rem;
}
.main-header a.more i, .main-header a.more-en i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 28px;
  height: 28px;
  background: url(../images/more-icon.svg) no-repeat center center;
}
@media (min-width: 1200px) {
  .main-header a.more, .main-header a.more-en {
    font-size: 0.9rem;
    right: 135px;
  }
  .main-header a.more i, .main-header a.more-en i {
    margin-right: 2px;
  }
  .main-header a.more span, .main-header a.more-en span {
    padding-left: 0.75rem;
  }
}
.main-header a.more:hover, .main-header a.more-en:hover {
  background: #6696e8;
}
@media (min-width: 1200px) {
  .main-header a.more-en {
    right: 150px;
  }
}
.main-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding-left: 60px;
  padding-right: 80px;
  font-size: 1.5rem;
}
@media (min-width: 1200px) {
  .main-title {
    padding-right: 220px;
  }
}
.main-title:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 30px;
  width: 15px;
  height: 15px;
  background: #5065a6;
  border-radius: 4px;
}
.main-title.news-icon:before {
  top: 15px;
  left: 20px;
  width: 28px;
  height: 28px;
  background: url(../images/news-title-icon.png?123) no-repeat center center;
}

.main-scroll {
  height: 100%;
  margin: 20px;
}
@media (min-width: 1200px) {
  .main-scroll {
    overflow-y: scroll;
  }
  .main-scroll.no-scroll {
    overflow-y: hidden;
  }
  .main-scroll::-webkit-scrollbar {
    width: 10px;
    background: #f7f9fc;
  }
  .main-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .main-scroll:hover::-webkit-scrollbar {
    width: 10px;
  }
  .main-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(102, 150, 232, 0.5);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .main-scroll:hover::-webkit-scrollbar-thumb:hover {
    background: #7da6eb;
    width: 20px !important;
  }
  .main-scroll:hover::-webkit-scrollbar-thumb:hover::-webkit-scrollbar {
    width: 15px;
  }
}

/*-------------------------------------------------------------------------------*/
/*    $mainbanner                                                                */
/*-------------------------------------------------------------------------------*/
.mainbanner-wrapper {
  position: relative;
  z-index: -1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 22px;
  background: white;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .mainbanner-wrapper {
    position: fixed;
    z-index: 4;
    top: 10px;
    right: 236px;
    width: calc(100% - 864px);
    margin: 0;
    padding: 0;
    background: none;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
}
@media (min-width: 1560px) {
  .mainbanner-wrapper {
    width: calc(100% - 941px);
    right: 313px;
  }
  .mainbanner-wrapper.logged {
    width: calc(100% - 989px);
    right: 361px;
  }
}
.mainbanner-wrapper .bn-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.mainbanner-wrapper .bn-img figure {
  position: relative;
  overflow: hidden;
  will-change: transform; /* 通知瀏覽器優化渲染 */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* 觸發硬體加速 */
}
.mainbanner-wrapper .bn-img figure:before {
  display: block;
  content: "";
  padding-top: 60px;
}
.mainbanner-wrapper .bn-img img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* 防止 iOS 重繪 */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* 觸發硬體加速 */
}
.mainbanner-wrapper .bn-img:before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, #6696e8), color-stop(70%, transparent));
  background: linear-gradient(to right, #6696e8 20%, transparent 70%);
}
@media (min-width: 1200px) {
  .mainbanner-wrapper .bn-img:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(30%, #6696e8), color-stop(70%, transparent));
    background: linear-gradient(to right, #6696e8 30%, transparent 70%);
  }
}
.mainbanner-wrapper .bn-xl {
  display: none;
}
.mainbanner-wrapper .bn-slogan {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
}
@media (min-width: 1200px) {
  .mainbanner-wrapper .bn-slogan {
    left: 0;
    bottom: 0;
  }
}
@media (min-width: 768px) {
  .mainbanner-wrapper .bn-xl {
    display: block;
  }
  .mainbanner-wrapper .bn-xs {
    display: none;
  }
}

.main-wrapper.for-reports {
  height: auto;
}
.main-wrapper.for-reports .main-container {
  margin-top: 25px;
  height: auto;
  overflow: initial;
}
@media (min-width: 1200px) {
  .main-wrapper.for-reports .main-container {
    margin-top: 0;
  }
}
.main-wrapper.for-reports .main-content {
  padding: 0 22px;
}
@media (min-width: 1200px) {
  .main-wrapper.for-reports .main-content {
    padding: 0 22px 0 0;
  }
}

.main-new-header {
  position: relative;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
  background: white;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.main-new-header .main-title {
  padding-right: 7rem;
}
@media (min-width: 1200px) {
  .main-new-header .main-title {
    padding-left: 45px;
  }
}
.main-new-header .main-title:before {
  top: calc(50% - 8px);
}
.main-new-header .search-btn {
  position: absolute;
  left: unset;
  top: calc(50% - 14px);
  right: 22px;
  font-size: 0rem;
  width: 35px;
  height: 28px;
  background: #5065a6 url(../images/search-icon.svg) no-repeat center center/contain;
  border-radius: 4px;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .main-new-header {
    position: fixed;
    z-index: 2;
    top: 81px;
    right: 0;
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 1.25rem 0 1.25rem 25px;
    border-top: 0;
    background: white;
    -webkit-box-shadow: 0px 5px 5px rgba(134, 142, 150, 0.1);
            box-shadow: 0px 5px 5px rgba(134, 142, 150, 0.1);
  }
  .main-new-header .search-btn {
    display: none;
  }
}
.main-wrapper.for-newsearch .search-btn {
  display: none;
}
@media (min-width: 1200px) {
  .main-wrapper.for-newsearch .search-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .main-wrapper.for-newsearch .main-content {
    padding: 90px 25px 0 0;
  }
}

/*-------------------------------------------*\
  _pagination.scss
\*-------------------------------------------*/
.bb-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.bb-pagination ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 0;
  margin-right: 1rem;
}
.bb-pagination ul .page-link {
  width: 41px;
  height: 41px;
  margin: 5px 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50% !important;
  color: #333333;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.bb-pagination ul .page-link .i-arr {
  fill: #575D66;
}
.bb-pagination ul .page-link:hover .i-arr {
  fill: white;
}
.bb-pagination ul .page-link:hover {
  background: #6696e8;
  color: white;
}
.bb-pagination ul .active .page-link {
  color: white !important;
  background: #6696e8 !important;
}

.page-number {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 35px 11px 10px;
  height: 41px;
  max-width: 190px;
  border-radius: 5rem;
  border: 1px solid #e6ebf5;
}
.page-number input[type=text], .page-number input[type=number] {
  border: 0;
  outline: 0 !important;
  width: 50px;
}
.page-number span {
  margin: 0 8px;
}
.page-number span:nth-child(2):before {
  content: "／ ";
}
.page-number span:nth-child(2) {
  opacity: 0.5;
}
.page-number button, .page-number a {
  position: absolute;
  right: 5px;
  height: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #e6ebf5;
  border-radius: 50%;
  background: transparent;
}
.page-number button:hover, .page-number a:hover {
  background: #6696e8;
}
.page-number button:hover .i-arr, .page-number a:hover .i-arr {
  fill: white;
}
.page-number button svg, .page-number a svg {
  width: 26px !important;
}

@media (min-width: 1200px) {
  .bb-pagination {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page-number {
    margin-left: 1rem;
  }
  .page-number input[type=text], .page-number input[type=number] {
    width: 48px;
  }
}
/*-------------------------------------------------------------------------------*/
/*    $fullscreen                                                                */
/*-------------------------------------------------------------------------------*/
body.fullscreen {
  width: 100vw;
  height: 100vh;
  background: white;
}
body.fullscreen #chatDialog, body.fullscreen #chatButton, body.fullscreen .tpnet-navigation, body.fullscreen .header-wrapper, body.fullscreen .banner-wrapper, body.fullscreen .full-dis,
body.fullscreen .search-wrapper, body.fullscreen .important-An, body.fullscreen .main-right, body.fullscreen .mainbanner-wrapper, body.fullscreen .removeTip,
body.fullscreen .for-reports .search-content, body.fullscreen .for-reports .search-box,
body.fullscreen .for-reports .search-bottom, body.fullscreen .main-new-header, body.fullscreen .search-content.is-open, body.fullscreen .seting-box {
  position: absolute;
  visibility: hidden !important;
  opacity: 0;
  z-index: -1;
}
body.fullscreen .main-wrapper {
  top: 10px;
  margin: 0;
  height: calc(100vh - 20px);
  background: white;
}
body.fullscreen .main-wrapper.has-five .e-content::-webkit-scrollbar {
  display: none;
}
@media (min-width: 992px) {
  body.fullscreen .main-wrapper.has-five .e-content::-webkit-scrollbar {
    display: block;
  }
}
body.fullscreen .main-wrapper.for-reports .main-container {
  margin-top: 0;
}
@media (min-width: 1200px) {
  body.fullscreen .main-wrapper {
    padding: 0 0 0 10px;
    overflow: hidden !important;
  }
  body.fullscreen .main-wrapper.for-reports {
    overflow-y: auto !important;
  }
}
body.fullscreen .main-wrapper.for-reports .main-content {
  padding: 0;
}
body.fullscreen .main-content {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  width: 100%;
}
body.fullscreen .main-scroll {
  overflow-y: initial;
  height: calc(100% - 105px);
}
body.fullscreen .main-scroll.no-scroll {
  padding: 15px 0 30px;
}
@media (min-width: 1200px) {
  body.fullscreen .main-scroll.no-scroll {
    padding: 0;
  }
  body.fullscreen .main-scroll.no-scroll .e-content {
    max-height: 690px !important;
  }
}
body.fullscreen .main-header a.more {
  right: 65px;
}
@media (min-width: 1200px) {
  body.fullscreen .main-header a.more {
    right: 143px;
  }
}
@media (min-width: 1200px) {
  body.fullscreen .main-header a.more-en {
    right: 140px;
  }
}
body.fullscreen #toggleBtn {
  top: 15px;
  right: 22px;
  background: #575d66 url(../images/re-expand-icon.svg) no-repeat center right 5px;
}
body.fullscreen #toggleBtn.regular {
  top: 15px;
  right: 22px;
}
body.fullscreen #toggleBtn.offset-more {
  top: 15px;
  right: 22px;
}
body.fullscreen .main-container {
  margin-bottom: 10px !important;
  border-color: white;
}
@media (min-width: 1200px) {
  body.fullscreen .main-container {
    border-color: #e5e7eb;
    margin-right: 10px;
  }
}
body.fullscreen .shipmap-content {
  height: 100%;
  margin-bottom: 0px !important;
}
body.fullscreen .shipmap-content .mapbox {
  height: calc(100vh - 60px);
}
body.fullscreen .shipmap-content .main-container {
  margin-bottom: 0px !important;
}
body.fullscreen .shipmap-content .main-scroll {
  height: 100%;
}
body.fullscreen .shipmap-content .shipmap-wrapper {
  border-radius: 0;
}
@media (min-width: 1200px) {
  body.fullscreen .shipmap-content .main-scroll {
    overflow: initial;
    height: calc(100% - 58px);
  }
}
body.fullscreen .tools {
  display: none;
}
body.fullscreen .news-list {
  height: auto;
  padding-top: 0;
}
body.fullscreen .e-pager {
  background: transparent !important;
}

#toggleBtn {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 9;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0 23px 0 12px;
  height: 28px;
  background: #575d66 url(../images/expand-icon.svg) no-repeat center right 5px;
  color: white;
  border-radius: 4px;
  font-size: 0rem;
  line-height: 1.25;
  outline: 0;
  border: 0;
}
#toggleBtn.offset-more {
  top: 15px;
  right: 20px;
}
#toggleBtn.regular {
  top: 15px;
  right: 22px;
}
@media (min-width: 1200px) {
  #toggleBtn {
    top: 15px;
    right: 20px;
    padding: 3px 32px 4px 12px;
    min-width: 105px;
    min-height: initial;
    font-size: 0.9rem;
  }
  #toggleBtn.regular {
    right: 35px;
  }
  #toggleBtn.offset-more {
    right: 20px;
  }
}
#toggleBtn i {
  margin-left: 5px;
  font-size: 0.9rem;
}
#toggleBtn:hover {
  background: #6696e8 url(../images/expand-icon.svg) no-repeat center right 5px;
}

#Grid table, #Grid thead, #Grid tbody, #Grid caption, #Grid tr, #Grid td, #Grid th {
  vertical-align: middle;
}

/*-------------------------------------------------------------------------------*/
/*    1.搜尋功能                                                                  */
/*    2.報表用的搜尋樣式                                                          */
/*    3.新增頁籤樣式  search-tabs                                                  */
/*-------------------------------------------------------------------------------*/
.search-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
}
.search-btn, .search-close {
  position: absolute;
  top: 71px;
  left: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0rem;
  width: 42px;
  height: 28px;
  background: #5065a6 url(../images/search-icon.svg) no-repeat center center/contain;
  border-radius: 4px;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .search-btn, .search-close {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 20px;
    width: 100%;
    height: 62px;
    padding-left: 3.5rem;
    background: #5065a6 url(../images/search-icon.svg) no-repeat center left 0.75rem;
    color: white;
    font-size: 1.125rem;
    border-radius: 20px;
  }
  .search-btn:after, .search-close:after {
    content: "";
    position: absolute;
    right: 1.5rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 15px;
    height: 15px;
    background: url(../images/search-arrow-down.svg) no-repeat center center;
    pointer-events: none;
  }
}
.search-close {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 20px;
  width: 100%;
  height: 62px;
  padding-left: 3.5rem;
  background: #5065a6 url(../images/search-icon.svg) no-repeat center left 0.75rem;
  color: white;
  font-size: 1.125rem;
  border-radius: 20px;
}
.search-close:after {
  content: "";
  position: absolute;
  right: 1.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 15px;
  height: 15px;
  background: url(../images/search-arrow-down.svg) no-repeat center center;
  pointer-events: none;
}
.search-close {
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0px !important;
}
.search-close:before {
  content: "查詢功能";
}
.search-close span {
  opacity: 0;
}
.search-close:after {
  content: "";
  position: absolute;
  right: 1.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 15px;
  height: 15px;
  background: url(../images/search-arrow-up.svg) no-repeat center center;
  pointer-events: none;
}
.search-close-en:before {
  content: "Search" !important;
}
.search-content {
  position: relative;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(87, 93, 102, 0.5);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
}
.search-content.is-open {
  opacity: 1;
  visibility: visible;
  overflow: initial;
}
.search-box {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  background: #5065a6;
  border-radius: 20px;
}
@media (min-width: 1200px) {
  .search-box {
    position: relative;
    -webkit-transform: translateY(-82px);
            transform: translateY(-82px);
    margin-bottom: -65px;
  }
}
.search-inner {
  padding: 1rem;
}
@media (min-width: 1200px) {
  .search-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 1rem 2rem;
    margin: 0 -0.5rem;
  }
  .search-inner .ct-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.75rem 0;
    margin: 0 0.5rem;
    width: calc(50% - 1rem);
  }
  .search-inner .ct-group label {
    white-space: nowrap;
  }
}
@media (min-width: 1560px) {
  .search-inner .ct-group {
    width: calc(33.3% - 1rem);
  }
}
@media (min-width: 1800px) {
  .search-inner .ct-group {
    width: calc(25% - 1rem);
  }
}
.search-bottom {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1rem 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
}
.search-bottom:before, .search-bottom:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #EEF3FA;
}
.search-bottom:after {
  height: 20px;
  background: #5065a6;
  bottom: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
@media (min-width: 1200px) {
  .search-bottom {
    padding: 1rem 1rem 1.5rem;
  }
  .search-bottom:before, .search-bottom:after {
    display: none;
  }
}
.search-bottom button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 40px;
  min-width: 140px;
  margin: 5px;
  padding: 0;
  border-radius: 10px;
  border: 0;
  outline: none;
  font-size: 0.9rem;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .search-bottom button {
    min-width: 200px;
  }
}
@media (min-width: 1560px) {
  .search-bottom button {
    min-width: 240px;
  }
}
.search-bottom button.btn-cancel {
  background: #3c4c7d;
  color: white;
}
.search-bottom button.btn-cancel:after {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-left: 0.25rem;
  background: url(../images/search-icon-cancel.svg) no-repeat center center;
}
.search-bottom button.btn-cancel:hover {
  background: #1a1a1a;
}
.search-bottom button.btn-search {
  background: #6696e8;
  color: white;
}
.search-bottom button.btn-search:after {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-left: 0.25rem;
  background: url(../images/search-icon-search.svg) no-repeat center center;
}
.search-bottom button.btn-search:hover {
  background: #5689e2;
}
.search-bottom button.btn-onlytxt, .search-bottom button.btn-other {
  background: #7384b8;
  color: white;
}

.condition-box {
  padding: 1rem 0;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 5px;
}
.condition-tit {
  padding: 0 0 1rem 1rem;
  margin: 0 0 1rem;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.95);
}

@media (min-width: 1800px) {
  .minimenu .search-inner .ct-group {
    width: calc(25% - 1rem);
  }
  .minimenu .search-inner.has-datetime .ct-group {
    width: calc(33.3% - 1rem);
  }
}

.for-reports .search-wrapper {
  z-index: -1;
}
.for-reports .search-content {
  opacity: 1;
  visibility: visible;
  overflow: initial;
  background: none;
  margin: -20px -22px 0;
  width: auto;
}
@media (min-width: 1200px) {
  .for-reports .search-content {
    margin: -20px -22px -35px -25px;
    z-index: 0;
  }
}
.for-reports .search-content .ct-group label {
  color: #575d66;
}
.for-reports .search-content .ct-group .ct-half span {
  color: #575d66;
}
.for-reports .search-content .ct-input {
  outline: 1px solid #ced4da;
}
.for-reports .search-content .ct-input::-webkit-input-placeholder {
  color: #adb5bd;
}
.for-reports .search-content .ct-input::-moz-placeholder {
  color: #adb5bd;
}
.for-reports .search-content .ct-input:-ms-input-placeholder {
  color: #adb5bd;
}
.for-reports .search-content .ct-input::-ms-input-placeholder {
  color: #adb5bd;
}
.for-reports .search-content .ct-input::placeholder {
  color: #adb5bd;
}
.for-reports .search-content .ct-input:focus {
  outline: 2px solid #6696e8 !important;
}
.for-reports .search-content .ct-input[type=radio] + label:before, .for-reports .search-content .ct-input[type=checkbox] + label:before {
  outline: 1px solid #ced4da;
}
.for-reports .search-content .ct-input[type=radio] + label:hover, .for-reports .search-content .ct-input[type=checkbox] + label:hover {
  color: #5689e2;
}
.for-reports .search-content .ct-input[type=radio]:checked + label:before, .for-reports .search-content .ct-input[type=checkbox]:checked + label:before {
  outline: 1px solid #5689e2;
}
.for-reports .search-content .ct-select {
  outline: 1px solid #ced4da;
}
.for-reports .search-content .ct-select:focus {
  outline: 2px solid #6696e8 !important;
}
.for-reports .search-content .e-input-group input.e-input, .for-reports .search-content .e-input-group.e-control-wrapper input.e-input {
  outline: 1px solid #ced4da !important;
}
.for-reports .search-content .e-input-group input.e-input:focus, .for-reports .search-content .e-input-group.e-control-wrapper input.e-input:focus {
  outline: 2px solid #6696e8 !important;
}
.for-reports .search-inner {
  border-bottom: 1px solid #e5e7eb;
}
.for-reports .search-box {
  position: relative;
  border-radius: 0;
  background: white;
}
@media (min-width: 1200px) {
  .for-reports .search-box {
    top: -40px;
  }
}
.for-reports .search-close {
  background: white url(../images/reports-search-icon.svg) no-repeat center left 0.75rem;
  color: #5065a6;
  border-radius: 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.for-reports .search-bottom:after {
  background: white;
  border-radius: 0;
}

.search-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  overflow-x: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media (min-width: 1200px) {
  .search-tabs {
    border-bottom: 0;
    position: absolute;
    top: 0;
    left: 130px;
    padding: 0.375rem 0.75rem;
  }
}
.search-tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 120px;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  color: white;
  border: 1px solid white;
  border-radius: 10px;
  cursor: pointer;
}
.search-tab.active {
  background: white;
  color: #5065a6;
  font-weight: bold;
}
.search-tab-item {
  visibility: hidden;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  pointer-events: none;
}
.search-tab-item.active {
  visibility: visible;
  position: relative;
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
  pointer-events: auto;
  opacity: 1;
}

@media (min-width: 1200px) {
  .for-newsearch .search-content {
    height: 0;
  }
  .for-newsearch .search-content.is-open {
    height: initial;
    background: transparent;
    overflow: inherit;
  }
}
@media (min-width: 1200px) {
  .for-newsearch .search-box {
    position: relative !important;
  }
}

.tpej2-input {
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0.85rem;
  border: 0 !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #f7f9fc !important;
}
.tpej2-input::-webkit-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}
.tpej2-input::-moz-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}
.tpej2-input:-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}
.tpej2-input::-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}
.tpej2-input::placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}
.tpej2-input:focus {
  color: #6696e8;
  outline: 2px solid #ed6b5a !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tpej2-input + span.e-clear-icon {
  right: 0.75rem;
}
.tpej2-input[aria-controls=custom-dropdown_popup] {
  outline: 2px solid #ed6b5a !important;
}

.e-input-group, .e-input-group.e-control-wrapper {
  margin-bottom: 0 !important;
}

.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
  border: 0 !important;
}
.e-input-group select:focus, .e-input-group.e-control-wrapper select:focus, .e-float-input select:focus, .e-float-input.e-input-group select:focus, .e-float-input.e-control-wrapper select:focus, .e-float-input.e-input-group.e-control-wrapper select:focus {
  color: #6696e8;
  outline: 2px solid #ed6b5a !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.ct-half span.e-input-group.e-control-wrapper {
  padding: 0 !important;
}

.e-input-group.e-control-wrapper.e-date-wrapper input.e-datepicker::-webkit-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}

.e-input-group.e-control-wrapper.e-date-wrapper input.e-datepicker::-moz-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}

.e-input-group.e-control-wrapper.e-date-wrapper input.e-datepicker:-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}

.e-input-group.e-control-wrapper.e-date-wrapper input.e-datepicker::-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}

.e-input-group.e-control-wrapper.e-date-wrapper input.e-datepicker::placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
}
.e-input-group.e-control-wrapper.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

.e-checkbox-wrapper.e-wrapper, .e-radio-wrapper.e-wrapper {
  position: relative;
  margin-right: 1rem;
}
.e-checkbox-wrapper.e-wrapper .e-label, .e-radio-wrapper.e-wrapper .e-label {
  color: white;
  font-size: 1rem;
  line-height: 1.375;
}
.e-checkbox-wrapper.e-wrapper .e-frame, .e-radio-wrapper.e-wrapper .e-frame {
  border-radius: 4px;
  border: 0;
  width: 20px;
  height: 20px;
}
.e-checkbox-wrapper.e-wrapper .e-frame.e-check, .e-radio-wrapper.e-wrapper .e-frame.e-check {
  background: white;
}
.e-checkbox-wrapper.e-wrapper .e-frame.e-check:before, .e-radio-wrapper.e-wrapper .e-frame.e-check:before {
  content: "";
  position: absolute !important;
  left: 4px;
  top: 5px;
  width: 12px !important;
  height: 12px !important;
  border-radius: 3px;
  background-color: #6696e8;
}
.e-checkbox-wrapper.e-wrapper:focus .e-label, .e-checkbox-wrapper.e-wrapper:hover .e-label, .e-radio-wrapper.e-wrapper:focus .e-label, .e-radio-wrapper.e-wrapper:hover .e-label {
  color: white;
}
.e-checkbox-wrapper.e-wrapper:focus .e-frame.e-check, .e-checkbox-wrapper.e-wrapper:hover .e-frame.e-check, .e-radio-wrapper.e-wrapper:focus .e-frame.e-check, .e-radio-wrapper.e-wrapper:hover .e-frame.e-check {
  background: white;
}
.e-checkbox-wrapper.e-wrapper .e-checkbox:active + .e-frame.e-check, .e-checkbox-wrapper.e-wrapper .e-checkbox:focus + .e-frame.e-check, .e-radio-wrapper.e-wrapper .e-checkbox:active + .e-frame.e-check, .e-radio-wrapper.e-wrapper .e-checkbox:focus + .e-frame.e-check {
  background-color: white;
}
.e-checkbox-wrapper.e-wrapper .e-radio + label:before, .e-radio-wrapper.e-wrapper .e-radio + label:before {
  width: 20px;
  height: 20px;
  border: 0;
}
.e-checkbox-wrapper.e-wrapper .e-radio + label:after, .e-radio-wrapper.e-wrapper .e-radio + label:after {
  content: "";
  top: 4px;
  left: 4px;
  width: 12px !important;
  height: 12px !important;
  border: 0;
}
.e-checkbox-wrapper.e-wrapper .e-radio:checked + label:after, .e-radio-wrapper.e-wrapper .e-radio:checked + label:after {
  background-color: #4dc4aa;
  border: 0;
}

.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0.85rem;
  border: 0 !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: white !important;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text]::-webkit-input-placeholder {
  padding: 0.85rem;
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
  font-size: 1rem;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text]::-moz-placeholder {
  padding: 0.85rem;
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
  font-size: 1rem;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text]:-ms-input-placeholder {
  padding: 0.85rem;
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
  font-size: 1rem;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text]::-ms-input-placeholder {
  padding: 0.85rem;
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
  font-size: 1rem;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text]::placeholder {
  padding: 0.85rem;
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273) !important;
  font-size: 1rem;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text]:focus {
  color: #6696e8;
  outline: 2px solid #ed6b5a !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] + span.e-clear-icon {
  right: 0.75rem;
}
.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text][aria-controls=custom-dropdown_popup] {
  outline: 2px solid #ed6b5a !important;
}

.e-multi-select-wrapper .e-searcher {
  width: 100% !important;
}

.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.e-searcher.e-zero-size {
  opacity: 0;
}

.e-chips-close.e-close-hooker {
  position: absolute;
  top: 2.25rem !important;
  right: 2.25rem !important;
}

.e-delim-view.e-delim-values {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0.85rem 2.5rem 0.85rem 0.85rem !important;
  font-size: 1rem !important;
  border: 0 !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #f7f9fc !important;
}

.e-delim-view.e-delim-values.e-delim-total {
  width: 100% !important;
}
.e-delim-view.e-delim-values.e-delim-total .e-remain {
  font-size: 1rem;
}

.e-multi-select-wrapper .e-delim-values {
  line-height: 1.375 !important;
}

/* popup 過濾列（開Filter下拉 / 勾選下拉）：修掉輸入框右側多出的空白 */
/* 原因：這不是 EJ2 的 bug，原廠 material demo 正常。
   本檔上面幾條為「查詢區主欄位」寫的 !important 全域規則
   （span.e-clear-icon{position:absolute;right:2.5rem}、
     .e-input-group input.e-input{padding:.75rem .85rem}、
     .e-input-group{width:100%}）
   會一併命中 popup 內的 .e-filter-parent 過濾列，
   但部分屬性又輸給 material.css 較具體的選擇器（clear icon 仍是 position:relative
   的 inline-flex 佔位子元素），排版被打亂 → 輸入框右邊露出一塊空位。
   這裡把過濾列的排版整組重新指定，蓋掉上面規則的副作用。 */
.e-popup .e-filter-parent .e-input-group,
.e-popup .e-filter-parent .e-input-group.e-control-wrapper {
  display: block !important;
  width: 100% !important;
  position: relative;
}
.e-popup .e-filter-parent input.e-input-filter,
.e-popup .e-filter-parent .e-input-group input.e-input {
  width: 100% !important;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
}
.e-popup .e-filter-parent span.e-clear-icon {
  position: absolute !important;
  right: 0.5rem !important;
  left: auto !important;
  top: 50% !important;
  margin: 0 !important;
  min-width: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}


.e-filter-parent span.e-clear-icon {
  top: 0 !important;
}

.e-all-text {
  font-size: 1rem !important;
}

.e-input-group {
  width: 100% !important;
}

.e-filter-parent input.e-input-filter {
  position: relative;
}

.e-selectall-parent .e-frame.e-icons {
  border-radius: 4px !important;
}
.e-selectall-parent .e-frame.e-icons.e-check {
  border-color: #6696e8;
  background: #6696e8 !important;
}
.e-selectall-parent .e-frame.e-icons.e-check:before {
  background: #6696e8 !important;
  border-color: #6696e8 !important;
}

.e-content .e-ul .e-list-item .e-frame.e-icons {
  border-radius: 4px !important;
}
.e-content .e-ul .e-list-item.e-active .e-frame.e-icons {
  border-color: #6696e8;
  background: #6696e8;
}
.e-content .e-ul .e-list-item.e-active .e-frame.e-icons:before {
  background: #6696e8 !important;
  border-color: #6696e8 !important;
}

/*-------------------------------------------------------------------------------*/
/*    $共用元件                                                                  */
/*    1.強制修改EJ2 AutoComplete樣式                                              */
/*    2.查詢功能 form 共用的表單                                                   */
/*    3.下載、幫助、連結按鈕                                                       */
/*    4.提示框(處理中、上傳檔案、上傳、警告、錯誤、成功)                             */
/*-------------------------------------------------------------------------------*/
.e-input-group.e-control-wrapper.e-ddl {
  border-bottom: 0 !important;
}

.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
  background: white !important;
  padding: 0.75rem 0.85rem !important;
  border: 0 !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px !important;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  font-size: 1rem !important;
}
.e-input-group input.e-input::-moz-selection, .e-input-group.e-control-wrapper input.e-input::-moz-selection {
  background: #5689e2 !important;
}
.e-input-group input.e-input::selection, .e-input-group.e-control-wrapper input.e-input::selection {
  background: #5689e2 !important;
}

span.e-clear-icon {
  position: absolute;
  right: 2.5rem;
  top: 0.9rem;
}

span.e-input-group-icon.e-ddl-icon.e-search-icon {
  position: absolute;
  right: 0.75rem;
  top: 0.65rem;
}
span.e-input-group-icon.e-ddl-icon.e-search-icon:before {
  content: "" !important;
  width: 20px;
  height: 20px;
  background: url(../images/select-arrow.svg) no-repeat center center !important;
}

.e-icon-anim span.e-input-group-icon.e-ddl-icon.e-search-icon {
  -webkit-transform: rotate(-90deg) !important;
          transform: rotate(-90deg) !important;
}

.e-popup-open .e-list-item {
  padding: 0.275rem;
  font-size: 1rem !important;
}

.e-popup .e-list-item.e-active {
  color: #5689e2 !important;
}

/* 移除 focus 底線動畫 */
.e-input-group.e-control-wrapper:before,
.e-input-group.e-control-wrapper:after {
  display: none !important;
}

.ct-form {
  margin-bottom: 3rem;
}
.ct-form ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ct-form li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media (min-width: 992px) {
  .ct-form li {
    padding: 0;
  }
  .ct-form li.ct-always {
    width: 100%;
  }
  .ct-form li:nth-child(2), .ct-form li:nth-child(4) {
    position: relative;
  }
  .ct-form li:nth-child(2) .ct-group label, .ct-form li:nth-child(4) .ct-group label {
    position: relative;
  }
}
.ct-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ct-form ul {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.ct-form ul:nth-child(2) {
  -webkit-box-flex: 1.35;
      -ms-flex: 1.35;
          flex: 1.35;
}
.ct-group {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(100% - 4px);
  margin: 5px 2px;
  padding: 0.5rem 0;
}
.ct-group label {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.375rem;
  color: white;
}
.ct-group label.required {
  position: relative;
  padding-left: 1rem;
}
.ct-group label.required:before {
  content: "";
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 8px;
  height: 8px;
  background: #ed6b5a;
}
@media (min-width: 1200px) {
  .ct-group.ct-always {
    width: 100% !important;
  }
  .ct-group label {
    position: static;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding: 0 1.5rem 0 0;
  }
  .ct-group label.required:before {
    top: 25px;
    left: 15px;
  }
}
.ct-half {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: white;
}
.ct-half span {
  padding: 5px;
}
@media (min-width: 768px) {
  .ct-half {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.ct-chose {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  min-height: 46px;
}
.ct-chose input {
  position: absolute;
  width: 0px;
}
.ct-chose.ct-circle input[type=radio] + label:before, .ct-chose.ct-circle input[type=radio] + label:after, .ct-chose.ct-circle input[type=checkbox] + label:before, .ct-chose.ct-circle input[type=checkbox] + label:after {
  border-radius: 50%;
}
.ct-chose.ct-circle input[type=radio]:checked + label:after, .ct-chose.ct-circle input[type=checkbox]:checked + label:after {
  background: #4dc4aa;
}
.ct-text {
  padding: 0.685rem 0.85rem;
  line-height: 1.5;
}
.ct-text.has-bgcolor {
  background: #f8f9fc;
}
.ct-text span {
  word-break: break-word;
}
.ct-input {
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0.85rem;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #f7f9fc;
}
.ct-input::-webkit-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-input::-moz-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-input:-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-input::-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-input::placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-input {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ct-input:focus {
  color: #6696e8;
  outline: 2px solid #ed6b5a;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .ct-input {
    font-size: 1em;
  }
}
.ct-input {
  background: white;
}
.ct-input[readonly] {
  background: #e5e7eb;
}
.ct-input[readonly]:focus {
  outline: 2px solid #e2e2e2;
}
.ct-input[type=datetime-local] {
  height: 46px;
}
.ct-input[type=radio], .ct-input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.ct-input[type=radio] + label, .ct-input[type=checkbox] + label {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 30px;
  margin: 0 1rem 0 0;
  line-height: 1.375;
  cursor: pointer;
}
.ct-input[type=radio] + label:before, .ct-input[type=radio] + label:after, .ct-input[type=checkbox] + label:before, .ct-input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 4px;
}
.ct-input[type=radio] + label:after, .ct-input[type=checkbox] + label:after {
  left: 4px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.ct-input[type=radio]:checked + label:after, .ct-input[type=checkbox]:checked + label:after {
  background: #6696e8;
}
.ct-select {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.85rem;
  border: 0;
  height: 46px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../images/select-arrow.svg) no-repeat center right 1.25rem white;
  color: #4d4d4d;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .ct-select {
    font-size: 1em;
  }
}
.ct-select:focus {
  outline: 2px solid #ed6b5a;
  background: url(../images/select-arrow-change.svg) no-repeat center right 1.25rem white;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ct-textarea {
  padding: 0.95rem;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f7f9fc;
  outline: 0;
}
.ct-textarea::-webkit-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-textarea::-moz-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-textarea:-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-textarea::-ms-input-placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-textarea::placeholder {
  color: rgb(154.2727272727, 179.4545454545, 217.2272727273);
}
.ct-textarea:focus {
  outline: 2px solid #ed6b5a;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .ct-textarea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
}
.ct-textarea {
  min-height: 180px;
  background: white;
}
.ct-fileupload {
  position: absolute;
  opacity: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
  cursor: pointer;
}
.ct-file-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.975rem 1.25rem;
  background: #4dc4aa;
  border-radius: 4px;
  color: white;
}
.ct-submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem 0;
  margin: 0 auto;
}
.ct-submit button, .ct-submit a {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: inherit;
      align-content: inherit;
  line-height: 1.2;
  margin: 10px;
  padding: 1.25rem 1rem;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #6696e8;
  color: white;
  font-size: 1rem;
}
.ct-submit button:hover, .ct-submit a:hover {
  background: #5065a6;
}
@media (min-width: 1200px) {
  .ct-submit button, .ct-submit a {
    padding: 1.5rem;
  }
}
.ct-submit button {
  background: #5065a6;
}
.ct-submit button span {
  position: relative;
  z-index: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 150px;
}
.ct-submit button span:before, .ct-submit button span:after {
  content: "";
  position: absolute;
}
.ct-submit button span:before {
  right: 0;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 4px;
}
.ct-submit button span:after {
  right: 5px;
  top: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border-top: 2px solid #5065a6;
  border-right: 2px solid #5065a6;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media (min-width: 1200px) {
  .ct-submit button span {
    min-width: 200px;
  }
}
.ct-sendto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -0.5rem;
}
.ct-sendto button, .ct-sendto a {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 58px;
  margin: 2rem 0.5rem 0;
  padding: 0 20px 0 0;
  background: white;
  color: #7da6eb;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  pointer-events: auto !important;
  border: 1px solid #7da6eb;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.ct-sendto button span, .ct-sendto a span {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.ct-sendto button i svg, .ct-sendto a i svg {
  position: absolute;
  top: calc(50% - 7px);
  right: 1rem;
  height: 16px;
  top: calc(50% - 11px);
  height: 21px;
}
.ct-sendto button i .st0, .ct-sendto a i .st0 {
  fill: #7da6eb;
}
.ct-sendto button:hover, .ct-sendto a:hover {
  background: #5065a6;
  border-color: #5065a6;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ct-sendto button:hover span, .ct-sendto a:hover span {
  color: white;
}
.ct-sendto button:hover i svg .st0, .ct-sendto a:hover i svg .st0 {
  fill: white;
}
@media (min-width: 1200px) {
  .ct-sendto {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .ct-sendto button, .ct-sendto a {
    margin: 0 0.5rem;
    min-width: 160px;
  }
}

.tools {
  position: absolute;
  z-index: 20;
  top: 16px;
  right: 60px;
}
.tools-ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  pointer-events: none;
}
.tools-ul li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0 5px;
}
.tools-ul li a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 35px;
  height: 28px;
  font-size: 0rem;
  color: #212529;
  background: #f1f3f5;
  pointer-events: auto;
  border-radius: 4px;
  border: 1px solid #868e96;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.tools-ul li a.i-icon:after {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 28px;
}
.tools-ul li a.i-icon.i-help {
  background: #4dc4aa;
  color: white;
  border: 0;
}
.tools-ul li a.i-icon.i-help:after {
  background: url(../images/tool-icon-help.svg) no-repeat center center/cover;
}
.tools-ul li a.i-icon.i-port {
  background: #4dc4aa;
  color: white;
  border: 0;
}
.tools-ul li a.i-icon.i-port:after {
  background: url(../images/tool-icon-port.svg) no-repeat center center/cover;
}
.tools-ul li a.i-icon.i-download:after {
  background: url(../images/tool-icon-download.svg) no-repeat center center/cover;
}
.tools-ul li a.i-icon.i-link {
  background: #5689e2;
  color: white;
  border: 0;
}
.tools-ul li a.i-icon.i-link:after {
  background: url(../images/tool-icon-link.svg) no-repeat center center/cover;
}
.tools-ul li a.i-icon.i-add {
  background: #5689e2;
  color: white;
  border: 0;
}
.tools-ul li a.i-icon.i-add:after {
  background: url(../images/tool-icon-add.svg) no-repeat center center/cover;
}
.tools-ul li a:hover {
  background-color: #f0f4fd;
}

@media (min-width: 1200px) {
  .tools {
    top: 15px;
    right: 130px;
  }
  .tools.tools-en {
    right: 140px;
  }
  .tools-ul li a {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: auto;
    min-width: 105px;
    padding: 0 1rem;
    font-size: 0.9rem;
  }
  .tools-ul li a.i-icon:after {
    margin: 0 -10px 0 5px;
  }
}
.form-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.form-box .ct-group label {
  color: #575d66;
}
@media (min-width: 1800px) {
  .form-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 1rem 2rem;
  }
  .form-box .element-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .form-box .ct-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1.5rem;
    margin: 0.5rem;
    width: calc(33.33% - 1rem);
  }
  .form-box .ct-group label {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: #575d66;
  }
}

.ct-tips {
  height: 0;
  font-family: "微軟正黑體";
  font-size: 0.95rem;
  margin-top: 4px;
  font-weight: 700;
  line-height: 1;
  color: #f2978b;
}

input.e-input:focus {
  outline: 2px solid #ed6b5a !important;
}

.tp-loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.2;
  color: var(--color);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%236696E8"></stop><stop offset=".3" stop-color="%236696E8" stop-opacity=".9"></stop><stop offset=".6" stop-color="%236696E8" stop-opacity=".6"></stop><stop offset=".8" stop-color="%236696E8" stop-opacity=".3"></stop><stop offset="1" stop-color="%236696E8" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a12)" stroke-width="16" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%236696E8" stroke-width="16" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>') no-repeat center center;
  background-size: 150px;
  background-color: var(--bgc);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tp-upload {
  position: fixed;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.2;
  color: var(--color);
  background-color: var(--bgc);
  z-index: 11;
  width: 100%;
  height: 100vh;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tp-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(100% - 4rem);
  margin: 0 2rem;
  border-radius: 20px;
}
@media (min-width: 576px) {
  .tp-box {
    max-width: 500px;
  }
}
@media (min-width: 768px) {
  .tp-box {
    max-width: 580px;
  }
}
.tp-box-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 1.5rem;
  background: #575d66;
  color: white;
  font-size: 1.5rem;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.tp-box-title:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 45px;
  height: 45px;
  margin-right: 0.5rem;
}
.tp-box-title.color-blue {
  background: #6696e8;
}
.tp-box-title.color-blue:before {
  background: url(../images/tp-box-icon-upload.svg) no-repeat center center;
}
.tp-box-title.color-blue.icon-confirm:before {
  background: url(../images/tp-box-icon-warn.svg) no-repeat center center;
}
.tp-box-title.color-yellow {
  background: #f0c14b;
}
.tp-box-title.color-yellow:before {
  background: url(../images/tp-box-icon-warn.svg) no-repeat center center;
}
.tp-box-title.color-red {
  background: #ed6b5a;
}
.tp-box-title.color-red:before {
  background: url(../images/tp-box-icon-error.svg) no-repeat center center;
}
.tp-box-title.color-green {
  background: #4dc4aa;
}
.tp-box-title.color-green:before {
  background: url(../images/tp-box-icon-success.svg) no-repeat center center;
}
.tp-box-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100px;
  max-height: 328px;
  padding: 1.5rem;
  background: white;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align: center;
}
.tp-box-close {
  position: absolute;
  z-index: 999;
  right: 30px;
  top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  cursor: pointer;
}
.tp-box-close:before, .tp-box-close:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 25px;
  height: 2px;
  background: white;
}
.tp-box-close:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.tp-box-close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.tp-box-close:hover:before, .tp-box-close:hover:after {
  background: white;
}
.tp-box-bottom, .tp-box-confirm {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.75rem 0 0;
}
.tp-box-bottom.active, .tp-box-confirm.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.tp-box-bottom button, .tp-box-confirm button {
  min-width: 110px;
  margin: 5px;
  padding: 0.5rem 1rem;
  border: 0;
  background: #575d66;
  color: white;
  border-radius: 5px;
  min-width: 120px;
  min-width: 128px;
}
@media (min-width: 576px) {
  .tp-box-bottom button, .tp-box-confirm button {
    min-width: 148px;
  }
}
.tp-box-bottom button span, .tp-box-confirm button span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.tp-box-bottom button span:before, .tp-box-bottom button span:after, .tp-box-confirm button span:before, .tp-box-confirm button span:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 15px;
  height: 1px;
  background: white;
}
.tp-box-bottom button[type=reset] span:before, .tp-box-confirm button[type=reset] span:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.tp-box-bottom button[type=reset] span:after, .tp-box-confirm button[type=reset] span:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.tp-box-bottom button[type=reset]:hover, .tp-box-confirm button[type=reset]:hover {
  background: #4d4d4d;
}
.tp-box-bottom button[type=submit], .tp-box-confirm button[type=submit] {
  background: #6696e8;
}
.tp-box-bottom button[type=submit] span:before, .tp-box-bottom button[type=submit] span:after, .tp-box-confirm button[type=submit] span:before, .tp-box-confirm button[type=submit] span:after {
  display: none;
}
.tp-box-tip {
  padding-top: 0.5rem;
}
.tp-box-text {
  text-align: center;
  font-size: 1.25rem;
  line-height: 2;
}
.tp-box-text.txt-left {
  text-align: left;
}
.tp-box-confirm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ct-fileupload {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
}
.ct-fileupload + label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-column-align: center;
      justify-self: center;
  min-width: 150px;
  padding: 0.75rem 1rem;
  background: #6696e8;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#file-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  margin-top: 1rem;
  background: #e6ebf5;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
  overflow-y: auto;
}
#file-list::-webkit-scrollbar {
  background: #e6ebf5;
  width: 10px;
}
#file-list::-webkit-scrollbar-thumb {
  background: #6696e8;
  border-radius: 20px;
}
#file-list::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
}
#file-list li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 1rem 60px 1rem 60px;
  color: #575d66;
}
#file-list li p:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-all !important;
}
#file-list li p:nth-child(2) {
  color: #6696e8;
}
#file-list li:first-child {
  margin-top: 0.15rem;
}
#file-list li:not(:last-child) {
  border-bottom: 1px solid white;
}
#file-list li:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 30px;
  height: 100%;
  background: url(../images/file-list-icon.svg) no-repeat center center/contain;
  background-size: 90%;
}
#file-list li i.close {
  position: absolute;
  right: 1rem;
  top: calc(50% - 13px);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 0rem;
  cursor: pointer;
}
#file-list li i.close:before, #file-list li i.close:after {
  position: absolute;
  top: calc(50% - 1px);
  left: 3px;
  content: "";
  width: 18px;
  height: 2px;
  background: #575d66;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#file-list li i.close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#file-list li i.close:hover:before, #file-list li i.close:hover:after {
  background: red;
}

.help-btn, .seting-btn {
  position: absolute;
  top: calc(50% - 14px);
  right: 65px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 35px;
  height: 28px;
  font-size: 0rem;
  color: #212529;
  pointer-events: auto;
  border-radius: 4px;
  border: 1px solid #868e96;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  background: #4dc4aa;
  color: white;
  border: 0;
}
.help-btn:after, .seting-btn:after {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 28px;
}

.help-btn:after {
  background: url(../images/tool-icon-help.svg) no-repeat center center/cover;
}

.seting-btn {
  background: #e2ebfb;
}
.seting-btn:after {
  background: url(../images/seting-icon.svg) no-repeat center center/cover;
}

.help-btn.only-btn {
  right: 22px;
}

.seting-box {
  position: absolute;
  top: 305px;
  right: 22px;
  z-index: 2;
  width: 180px;
  padding: 1rem;
  background: white;
  border: 1px solid #e6ebf5;
  border-radius: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}
.seting-box.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.seting-box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.seting-box ul li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 5px 0;
}
.seting-box ul li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 28px;
  padding-right: 14px;
  color: #212529;
  background: #f1f3f5;
  pointer-events: auto;
  border-radius: 4px;
  border: 1px solid #868e96;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.seting-box ul li a.i-icon:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 28px;
}
.seting-box ul li a.i-icon.i-help {
  background: #4dc4aa;
  color: white;
  border: 0;
}
.seting-box ul li a.i-icon.i-help:after {
  background: url(../images/tool-icon-help.svg) no-repeat center center/cover;
}
.seting-box ul li a.i-icon.i-help:hover {
  background: rgb(55.2658227848, 166.7341772152, 142.3797468354);
}
.seting-box ul li a.i-icon.i-print {
  background: #575d66;
  color: white;
  border: 0;
}
.seting-box ul li a.i-icon.i-print:after {
  background: url(../images/i-icon-print.svg) no-repeat center center/cover;
}
.seting-box ul li a.i-icon.i-print:hover {
  background: rgb(63.5238095238, 67.9047619048, 74.4761904762);
}
.seting-box ul li a.i-icon.i-save {
  background: #ed6b5a;
  color: white;
  border: 0;
}
.seting-box ul li a.i-icon.i-save:after {
  background: url(../images/i-icon-save.svg) no-repeat center center/cover;
}
.seting-box ul li a.i-icon.i-save:hover {
  background: rgb(231.9836065574, 65.7540983607, 44.0163934426);
}
.seting-box ul li a.i-icon.i-send {
  background: #6696e8;
  color: white;
  border: 0;
}
.seting-box ul li a.i-icon.i-send:after {
  background: url(../images/i-icon-send.svg) no-repeat center center/cover;
}
.seting-box ul li a.i-icon.i-send:hover {
  background: rgb(57.6647727273, 119.5738636364, 225.3352272727);
}
.seting-box ul li a.i-icon.i-delete {
  background: white;
  color: #ed6b5a;
  border-color: #ed6b5a;
}
.seting-box ul li a.i-icon.i-delete:after {
  background: url(../images/i-icon-delete.svg) no-repeat center center/cover;
}
.seting-box ul li a.i-icon.i-delete:hover {
  color: rgb(231.9836065574, 65.7540983607, 44.0163934426);
  border-color: rgb(231.9836065574, 65.7540983607, 44.0163934426);
}
.seting-box ul li a.i-icon.i-add {
  background: #6696e8;
  color: white;
  border: 0;
}
.seting-box ul li a.i-icon.i-add:after {
  background: url(../images/tool-icon-add.svg) no-repeat center center/cover;
}
.seting-box ul li a.i-icon.i-add:hover {
  background: rgb(57.6647727273, 119.5738636364, 225.3352272727);
}

@media (min-width: 1200px) {
  .help-btn {
    right: 48px;
    font-size: 1rem;
    width: 105px;
    height: 28px;
  }
  .help-btn:after {
    margin-left: 5px;
  }
  .seting-btn {
    right: 48px;
  }
  .seting-box {
    position: fixed;
    top: 145px;
  }
}
@media (min-width: 1560px) {
  .seting-btn {
    display: none;
  }
  .seting-box {
    top: 93px;
    right: 2rem;
    padding: 0;
    background: none;
    width: 60%;
    border: 0;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  .seting-box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .seting-box ul li a {
    min-width: 105px;
    margin: 0 5px;
  }
}
.color-1 {
  color: #6696e8;
}

.color-2 {
  color: #ed6b5a;
}

.color-3 {
  color: #4dc4aa;
}

.color-4 {
  color: #5065a6;
}

.helping-box {
  position: fixed;
  z-index: 9999;
  right: 0;
  top: 80px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 0%;
  max-width: 320px;
  height: 100%;
  background: white;
  overflow: hidden;
  -webkit-filter: drop-shadow(-7px 10px 7px rgba(77, 77, 77, 0.15));
          filter: drop-shadow(-7px 10px 7px rgba(77, 77, 77, 0.15));
}
.helping-box.active {
  width: calc(100% - 45px);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media (min-width: 1200px) {
  .helping-box {
    top: 145px;
  }
}
.helping-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1.5rem;
  color: #33b5a1;
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
  font-size: 1.2rem;
}
.helping-tit:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background: url(../images/shipmap-info-icon-desc.svg) no-repeat center center/contain;
}
.helping-data {
  height: 100%;
  overflow: hidden;
}
.helping-close {
  position: absolute;
  z-index: 999;
  right: 20px;
  top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  pointer-events: none;
  cursor: pointer;
}
.helping-close.active {
  pointer-events: auto;
}
.helping-close.active:before, .helping-close.active:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: #575d66;
}
.helping-close.active:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.helping-close.active:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.helping-close.active:hover:before, .helping-close.active:hover:after {
  background: #33b5a1;
}

.helping-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1rem 0 1rem 1rem;
  border-bottom: 1px solid #e2e2e2;
}
.helping-tabs-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  margin: 0 5px;
  color: #33b5a1;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #33b5a1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.helping-tabs-item.active {
  color: white;
  background: #33b5a1;
}
.helping-tabs-box {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
  height: calc(100% - 67px - 69px - 32px);
  padding: 1rem;
  line-height: 1.875;
}
.helping-tabs-box::-webkit-scrollbar {
  background: #f7f9fc;
  width: 10px;
}
.helping-tabs-box::-webkit-scrollbar-thumb {
  background: #e2ebfb;
  border-radius: 20px;
}
.helping-tabs-box::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
}
.helping-tabs-box.active {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.helping-ins {
  margin: 1rem -1rem 0;
  border-top: 1px solid #e2e2e2;
}
.helping-ins ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.helping-ins li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 50%;
  padding: 1.5rem;
  border-bottom: 1px solid #e2e2e2;
}
.helping-ins li:nth-child(odd) {
  border-right: 1px solid #e2e2e2;
}

.symbox {
  margin: -1rem -1rem 0;
}
.symbox ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  padding: 0.9rem 0.5rem;
  border-bottom: 1px solid #e2e2e2;
}
.symbox ul li span {
  min-width: 3rem;
}

/*-------------------------------------------------------------------------------*/
/*    $banner                                                                  */
/*-------------------------------------------------------------------------------*/
.banner-wrapper {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin-bottom: 22px;
}
.banner-wrapper .bn-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.banner-wrapper .bn-img figure {
  position: relative;
  overflow: hidden;
  will-change: transform; /* 通知瀏覽器優化渲染 */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* 觸發硬體加速 */
}
.banner-wrapper .bn-img figure:before {
  display: block;
  content: "";
  padding-top: 40%;
}
@media (min-width: 768px) {
  .banner-wrapper .bn-img figure:before {
    padding-top: 140px;
  }
}
.banner-wrapper .bn-img img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* 防止 iOS 重繪 */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* 觸發硬體加速 */
}
.banner-wrapper .bn-img:before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(../images/banner-mask-lg.png) no-repeat center top/cover;
}
@media (min-width: 1200px) {
  .banner-wrapper .bn-img:before {
    background: url(../images/banner-mask-lg.png) repeat left top/contain;
  }
}
.banner-wrapper .bn-xl {
  display: none;
}
.banner-wrapper .bn-slogan {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}
@media (min-width: 576px) {
  .banner-wrapper .bn-slogan {
    width: inherit;
    left: 30px;
  }
}
@media (min-width: 768px) {
  .banner-wrapper .bn-xl {
    display: block;
  }
  .banner-wrapper .bn-xs {
    display: none;
  }
}

/*-------------------------------------------------------------------------------*/
/*    $important-An 重要通知                                                     */
/*-------------------------------------------------------------------------------*/
.important-An {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 22px;
  line-height: 1.5;
}
.important-title {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 15px 10px 45px;
  margin-right: 10px;
  background: #6696e8;
  color: white;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 20px;
}
.important-title:before, .important-title:after {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(50% - 10px);
}
.important-title:before {
  content: "!";
  color: #6696e8;
  z-index: 2;
  left: 22px;
  top: calc(50% - 13px);
}
.important-title:after {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 4px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media (min-width: 576px) {
  .important-title br {
    display: none;
  }
  .important-title {
    padding: 3px 25px 3px 50px;
    height: 58px;
  }
  .important-title:before {
    left: 25px;
  }
  .important-title:after {
    left: 18px;
  }
}
.important-vmarquee {
  position: relative;
  width: 100%;
  padding: 0 15px;
  height: 68px; /* 顯示一行的高度，可調 */
  background: #575d66;
  color: white;
  border-radius: 20px;
  overflow: hidden;
}
.important-vmarquee ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.important-vmarquee li {
  padding-top: 10px;
  height: 68px; /*物件的高度，同上，等於一行高度 */
}
.important-vmarquee li a {
  color: white;
}
.important-vmarquee li a:hover {
  color: #7da6eb;
}
.important-vmarquee div {
  padding-right: 1rem;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 576px) {
  .important-vmarquee {
    padding: 0 25px;
    height: 58px;
  }
  .important-vmarquee li {
    padding-top: 17px;
    height: 58px;
  }
  .important-vmarquee div {
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

/*-------------------------------------------------------------------------------*/
/*    $系統公告                                                                  */
/*-------------------------------------------------------------------------------*/
.news-wrapper .e-row {
  position: relative;
}
.news-wrapper .e-row .e-rowcell {
  position: relative;
  z-index: 1;
}
.news-wrapper .important:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e6ebf5;
}
.news-wrapper .important i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 0.5rem;
  width: 34px;
  padding: 7px;
  color: white;
  background: #e8887b;
  border-radius: 4px;
}
.news-wrapper .important i:before {
  content: "!";
  font-family: 1em;
  font-weight: bold;
}
.news-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 15px 15px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}
.news-item:not(:first-child) {
  margin-top: 15px;
}
.news-item:after {
  content: "";
  position: absolute;
  right: 7px;
  top: calc(50% - 13px);
  width: 26px;
  height: 26px;
  background: url(../images/news-item-icon.svg) no-repeat center center;
}
.news-item:hover {
  background: #a3c0f1;
}
.news-item:hover .news-date {
  background: #6696e8;
}
.news-date {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 7px 15px;
  max-width: 110px;
  background: #a3c0f1;
  color: white;
  font-size: 0.9rem;
  border-radius: 4px;
}
.news-issue {
  padding-right: 1.5rem;
  margin-top: 0.5rem;
  line-height: 1.5;
  font-size: 1.2rem;
  color: black;
  text-align: justify;
}
.news-issue span {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 1.5rem;
  margin-top: 0.5rem;
  line-height: 1;
  font-size: 1.2rem;
  color: black;
  text-align: justify;
}
.news-topic span {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.news-download {
  padding: 10px 30px;
  border-top: 1px solid #e5e7eb;
}
.news-download a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 10px 0;
  color: #212529;
}
.news-download a span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.news-download a:before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 33px;
  height: 33px;
  margin-right: 1rem;
  background: #4d4d4d url(../images/download-icon.svg) no-repeat center center;
  border-radius: 5px;
}
.news-download a:hover {
  color: #6696e8;
}
.news-download a:hover:before {
  background-color: #6696e8;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (min-width: 1200px) {
  .news-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .news-issue {
    margin-top: 0;
  }
  .news-issue span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .news-date {
    margin-right: 1rem;
  }
}
.news-list #Grid {
  border: 0;
}
.news-list #Grid.e-grid td.e-active {
  background: #a3c0f1 !important;
}
.news-list #Grid.e-grid td.e-active .news-date {
  background: #6696e8;
}
.news-list #Grid .e-pager .e-currentitem, .news-list #Grid .e-pager .e-currentitem:hover {
  background: #6696e8;
  border: 0;
}
.news-list .e-grid .e-rowcell:first-child, .news-list .e-grid .e-rowcell:nth-child(2) {
  padding-left: 10px;
}
.news-list .e-grid .e-gridheader {
  display: none;
}
.news-list .e-content {
  width: 200%;
}
.news-list table, .news-list tbody, .news-list td, .news-list .e-content {
  border: 0 !important;
}
.news-list tr {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 9px 0 !important;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  overflow: hidden;
}
.news-list tr:first-child {
  margin-top: 0 !important;
}
.news-list tr:last-child {
  margin-bottom: 15px !important;
}
@media (min-width: 1200px) {
  .news-list tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .news-list tr td:first-child {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 180px !important;
  }
}
.news-list tr:after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 7px;
  top: calc(50% - 13px);
  width: 26px;
  height: 26px;
  background: url(../images/news-item-icon.svg) no-repeat center center;
}
.news-list tr td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100% !important;
  border: 0 !important;
  font-size: 1rem !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.news-list tr:hover, .news-list tr:focus, .news-list tr:visited {
  background: #a3c0f1 !important;
}
.news-list tr:hover td, .news-list tr:focus td, .news-list tr:visited td {
  background: #a3c0f1 !important;
}
.news-list tr:hover td .important:after, .news-list tr:focus td .important:after, .news-list tr:visited td .important:after {
  display: none;
}
.news-list tr:hover td .news-date, .news-list tr:focus td .news-date, .news-list tr:visited td .news-date {
  background: #6696e8;
}
.news-list.idx tr {
  margin: 15px 0 !important;
}
.news-list .e-pager .e-pagercontainer {
  margin: 15px 0 0;
}
.news-list .e-parentmsgbar {
  font-size: 0.9rem;
  padding-top: 24px !important;
  padding-right: 10px !important;
}
.news-list .e-pager .e-numericitem {
  font-size: 1rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  border: 0 !important;
}
.news-list .e-pager .e-icons {
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
  outline: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  background: none !important;
}
.news-list .e-pager div, .news-list .e-pager a {
  border: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.news-list .e-pager .e-pagercontainer .e-firstpage, .news-list .e-pager .e-pagercontainer .e-prevpage, .news-list .e-pager .e-pagercontainer .e-firstpagedisabled, .news-list .e-pager .e-pagercontainer .e-prevpagedisabled, .news-list .e-pager .e-pagercontainer .e-nextpage, .news-list .e-pager .e-pagercontainer .e-lastpage, .news-list .e-pager .e-pagercontainer .e-nextpagedisabled, .news-list .e-pager .e-pagercontainer .e-lastpagedisabled {
  margin-top: 0 !important;
}

.news-title {
  font-size: 1.5rem;
  line-height: 1.5;
}
.news-back {
  position: absolute;
  top: 0;
  left: 35px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 70px;
  width: 70px;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  font-size: 0rem;
}
.news-back:before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 2px solid #6696e8;
  border-top: 2px solid #6696e8;
  margin-left: 4px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.news-back:hover {
  background: #7da6eb;
}
.news-back:hover:before {
  border-color: white;
}

.main-det {
  position: relative;
  display: block;
  height: auto;
  padding: 1rem 25px 1rem 10px;
}
.main-det:before {
  content: "";
  position: absolute;
  left: 0;
  top: 70px;
  width: 100%;
  height: 1px;
  background: #e5e7eb;
}
.main-det .news-title {
  padding: 0 0 0 15px;
  text-align: justify;
  margin-top: 70px;
}
.main-det .news-date {
  position: absolute;
  right: 25px;
  top: 22px;
  background: #6696e8;
}
@media (min-width: 1200px) {
  .main-det .news-date {
    right: 20px;
  }
}
.main-det .important {
  position: absolute;
  right: 125px;
  top: 22px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0.5rem;
  width: 30px;
  height: 28px;
  color: white;
  background: #e8887b;
  border-radius: 4px;
}
@media (min-width: 1200px) {
  .main-det .important {
    right: 137px;
  }
}
.main-det .important:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e6ebf5;
}
.main-det .important:before {
  content: "!";
  font-size: 0.9rem;
  font-family: 1em;
  font-weight: bold;
}

.news-det {
  padding: 10px;
  line-height: 2;
  font-size: 1.125rem;
}

.news-unit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 117px;
  padding: 10px 15px;
  margin: 10px 0 10px 5px;
  color: #6696e8;
  border: 1px solid #6696e8;
  border-radius: 5px;
  font-size: 1.25rem;
}

@media (min-width: 1200px) {
  .main-det {
    height: 70px;
    padding: 0 25px 0 10px;
  }
  .main-det:before {
    display: none;
  }
  .main-det .news-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    height: 70px;
    padding: 5px 140px 0 115px;
    margin-top: 0;
    line-height: 1.2;
  }
  .news-unit {
    margin: 10px 0 10px 15px;
  }
  .news-det {
    padding: 10px 20px;
  }
  .news-download {
    padding: 10px 30px 10px 35px;
  }
}
/*-------------------------------------------------------------------------------*/
/*  $公開功能選單(固定於右側的)                                                    */
/*-------------------------------------------------------------------------------*/
.public-wrapper {
  width: 100%;
  margin: 25px 15px 0 10px;
  background: #f7f9fc;
  border-radius: 20px;
}
.public-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 90px;
  font-size: 0rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: url(../images/public-titlebg.svg) no-repeat center center/cover;
}
.public-links {
  width: 100%;
  height: calc(100% - 110px);
  overflow-y: auto;
}
.public-links::-webkit-scrollbar {
  width: 10px;
  background: white;
}
.public-links::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.public-links:hover::-webkit-scrollbar {
  width: 10px;
}
.public-links:hover::-webkit-scrollbar-thumb {
  background: rgba(102, 150, 232, 0.25);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.public-links:hover::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
  width: 20px !important;
}
.public-links:hover::-webkit-scrollbar-thumb:hover::-webkit-scrollbar {
  width: 15px;
}
.public-ul {
  margin-top: 1.5rem;
}
.public-ul .nav-item {
  font-size: 1.125rem;
  padding: 2px 15px;
}
.public-ul .nav-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 54px;
  padding-left: 55px;
  border-radius: 8px;
}
.public-ul .nav-link:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 24px;
  width: 4px;
  height: 4px;
  border-bottom: 2px solid #666666;
  border-right: 2px solid #666666;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.public-ul .nav-link:hover, .public-ul .nav-link.active {
  background: #6696e8;
  color: white;
}
.public-ul .nav-link:hover:before, .public-ul .nav-link.active:before {
  top: 24px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
}

/* 右下角聊天按鈕 */
.chat-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 66px;
  height: 66px;
  border: none;
  background: url(../images/dialog-icon.svg) no-repeat center center;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 99999;
}

/* Dialog 裡面的內容區 */
.chat-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.e-dialog {
  background: transparent !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 20px;
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}
.e-dialog .e-dlg-header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
  height: 71px;
  background: url(../images/chat-header.svg) no-repeat center top/contain !important;
}
.e-dialog .e-dlg-content {
  padding: 0 !important;
}

.chat-header {
  display: none !important;
}

.chat-content {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  background: white;
  font-size: 1rem;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.chat-content p {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  justify-self: flex-start;
  background: #d5e1f2;
  padding: 10px 10px 10px 10px;
  margin: 10px 65px 10px 30px;
  border-radius: 20px;
  border-top-left-radius: 0;
}
.chat-content p::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  background: url(../images/dialog-service-icon.svg) no-repeat center center;
  color: white;
  border-radius: 50%;
}
.chat-content div {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  justify-self: flex-end;
  background: #6696e8;
  color: white;
  padding: 10px 10px 10px 20px;
  margin: 10px 35px 10px 65px;
  border-radius: 20px;
  border-top-right-radius: 0;
}
.chat-content div::after {
  content: "A";
  position: absolute;
  right: -35px;
  top: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  background: black;
  color: white;
  border-radius: 50%;
}

.chat-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  height: 70px !important;
  border-top: 1px solid #ddd;
}

.chat-input input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 30px;
  font-size: 1rem;
  border: none;
  outline: none;
}

.chat-input button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 60px;
  padding: 10px 15px;
  margin-left: -15px;
  background: url(../images/dialog-send.svg) no-repeat center center;
  color: #fff;
  border: none;
  cursor: pointer;
}

#chatDialog {
  position: fixed !important;
  top: unset !important;
  left: unset !important;
  right: 100px !important;
  bottom: 20px !important;
  border-radius: 20px;
  overflow: hidden;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
  position: relative;
  margin: 3px -5px 0 0;
  height: 35px;
  width: 35px;
  opacity: 0;
  background: white !important;
}

/*-------------------------------------------------------------------------------*/
/*    $船舶動態表                                                                 */
/*    主列表                                                                    */
/*-------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  .anchor-list {
    margin-top: 0;
  }
}
.anchor-list .e-grid .e-gridheader {
  padding-right: 0 !important;
}
.anchor-list .e-grid .e-gridheader .e-sortfilter .e-headercelldiv, .anchor-list .e-grid .e-gridheader .e-stackedheadercelldiv {
  padding: 0 !important;
}
.anchor-list .e-content::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.anchor-list .e-content::-webkit-scrollbar-thumb {
  background: #7da6eb;
  border-radius: 10px;
}
.anchor-list .e-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.anchor-list .e-columnheader th {
  background: #6696e8 !important;
  color: white;
  height: 44px !important;
}
.anchor-list .e-columnheader th .e-headertext {
  font-size: 0.9rem !important;
}
.anchor-list .e-headercelldiv {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  text-align: center !important;
  line-height: 1.2 !important;
  font-size: 1rem !important;
}
.anchor-list .e-grid .e-rowcell {
  text-align: center !important;
  font-size: 0.9rem !important;
  height: 100%;
  padding: 0 !important;
  -webkit-box-shadow: 0 0 0 1px white !important;
          box-shadow: 0 0 0 1px white !important;
  border: 0 !important;
}
.anchor-list .e-gridcontent .e-content table.e-table tr:nth-child(odd) {
  background: #f0f4fd;
}
.anchor-list .e-gridcontent .e-content table.e-table tr:nth-child(even) {
  background: #fafcfe;
}
.anchor-list #Grid {
  border: 0;
}
.anchor-list #Grid.e-grid td.e-active {
  background: #a3c0f1 !important;
  border-color: white !important;
}
.anchor-list #Grid .e-pager .e-currentitem, .anchor-list #Grid .e-pager .e-currentitem:hover {
  background: #6696e8;
  border: 0;
}
.anchor-list .e-pager .e-pagercontainer {
  margin: 15px 0 0;
}
.anchor-list .e-parentmsgbar {
  font-size: 0.9rem;
  padding-top: 24px !important;
  padding-right: 10px !important;
}
.anchor-list .e-pager .e-numericitem {
  font-size: 1rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  border: 0 !important;
}
.anchor-list .e-pager .e-icons {
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
  outline: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  background: none !important;
}
.anchor-list .e-pager div, .anchor-list .e-pager a {
  border: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.anchor-list .e-pager .e-pagercontainer .e-firstpage, .anchor-list .e-pager .e-pagercontainer .e-prevpage, .anchor-list .e-pager .e-pagercontainer .e-firstpagedisabled, .anchor-list .e-pager .e-pagercontainer .e-prevpagedisabled, .anchor-list .e-pager .e-pagercontainer .e-nextpage, .anchor-list .e-pager .e-pagercontainer .e-lastpage, .anchor-list .e-pager .e-pagercontainer .e-nextpagedisabled, .anchor-list .e-pager .e-pagercontainer .e-lastpagedisabled {
  margin-top: 0 !important;
}

/*-------------------------------------------------------------------------------*/
/*    $船舶動態儀表板                                                             */
/*    1.幫助-展開樣式                                                             */
/*    2.資料-展開樣式                                                             */
/*-------------------------------------------------------------------------------*/
.help-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  font-size: 0rem;
}
.help-close:before, .help-close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 30px;
  height: 2px;
  background: #575d66;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.help-close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media (min-width: 1200px) {
  .help-close:hover:before, .help-close:hover:after {
    background: #4dc4aa;
  }
}
.help-box {
  position: absolute;
  visibility: hidden;
  z-index: 9;
  top: 108px;
  right: 1rem;
  width: calc(100% - 2rem);
  height: 80%;
  background: white;
  border: 2px solid #4dc4aa;
  border-radius: 5px;
  line-height: 1.5;
}
.help-box .help-close {
  display: none;
}
.help-box.active {
  visibility: visible;
}
.help-box.active .help-close {
  display: block;
}
@media (min-width: 1200px) {
  .help-box {
    top: 50px;
    right: 210px;
    width: 460px;
    height: 90%;
  }
}
.help-box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: var(--height);
  overflow-y: auto;
}
.help-box ul::-webkit-scrollbar {
  background: #f7f9fc;
  width: 10px;
}
.help-box ul::-webkit-scrollbar-thumb {
  background: #e2ebfb;
  border-radius: 20px;
}
.help-box ul::-webkit-scrollbar-thumb:hover {
  background: #4dc4aa;
}
.help-box li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
}
.help-box li:not(:first-child) {
  border-top: 1px solid #4dc4aa;
}
.help-box li .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.help-box li .item:not(:last-child) {
  margin-bottom: 0.75rem;
}
.help-box li .item:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: -2px;
  width: 25px;
  height: 25px;
  margin-right: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.help-box li .item.icon-check:before {
  background: url(../images/list-icon-ok.svg) no-repeat center center;
}
.help-box li .item.icon-gear:before {
  background: url(../images/list-icon-tip.svg) no-repeat center center/contain;
}
.help-tip {
  padding: 1rem 3rem 1rem 1rem;
  color: #4dc4aa;
  line-height: 1.5;
  border-bottom: 1px solid #4dc4aa;
}
.help-tit {
  min-width: 6em;
  font-weight: bold;
}
.help-desc {
  padding-left: 1rem;
}

.dashboard-close {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 4px;
  width: 50px;
  height: 50px;
  font-size: 0rem;
}
.dashboard-close:before, .dashboard-close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 30px;
  height: 2px;
  background: #575d66;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.dashboard-close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media (min-width: 1200px) {
  .dashboard-close {
    top: 12px;
    right: 10px;
  }
  .dashboard-close:hover:before, .dashboard-close:hover:after {
    background: #6696e8;
  }
}
.dashboard-box {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(87, 93, 102, 0.9);
  opacity: 0;
  pointer-events: none;
}
.dashboard-box .dashboard-close {
  display: none;
}
.dashboard-box.active {
  pointer-events: auto;
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.dashboard-box.active .dashboard-close {
  display: block;
}
.dashboard-box.active .dashboard-content {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-animation: delay 0.3s;
          animation: delay 0.3s;
}
.dashboard-content {
  height: 100%;
  margin-left: 90px;
  font-family: 1em;
  background: white;
  -webkit-transform: translateX(10%);
          transform: translateX(10%);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.dashboard-content .top {
  position: relative;
  padding: 1rem;
  border-bottom: 1px solid #ced4da;
}
.dashboard-content .title {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 35px;
  font-size: 1.5rem;
  line-height: 1.2;
}
.dashboard-content .title:before {
  content: "";
  position: absolute;
  top: 6px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #6696e8;
  border-radius: 4px;
}
.dashboard-content .base {
  position: relative;
  margin-top: 2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.dashboard-content .base:before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.2rem;
  width: calc(100% + 2rem);
  margin: 0 -1rem;
  border-top: 1px solid #ced4da;
}
.dashboard-content .base .visa, .dashboard-content .base .voyage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 5px;
  border: 1px solid #ced4da;
  line-height: 2;
  border-radius: 8px;
  overflow: hidden;
}
.dashboard-content .base .visa i, .dashboard-content .base .visa span, .dashboard-content .base .voyage i, .dashboard-content .base .voyage span {
  padding: 0.5rem 1rem;
}
.dashboard-content .base .visa i, .dashboard-content .base .voyage i {
  color: #575d66;
  border-right: 1px solid #ced4da;
}
.dashboard-content .base .visa span, .dashboard-content .base .voyage span {
  color: #5689e2;
  font-weight: bold;
}
.dashboard-data {
  padding: 1rem;
  height: var(--dashheight);
  overflow-y: auto;
}
.dashboard-data::-webkit-scrollbar {
  background: #f7f9fc;
  width: 10px;
}
.dashboard-data::-webkit-scrollbar-thumb {
  background: rgba(102, 150, 232, 0.5);
  border-radius: 20px;
}
.dashboard-data::-webkit-scrollbar-thumb:hover {
  background: #6696e8;
}
.dashboard-data .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0.5rem 0 1rem;
  border: 1px solid #ced4da;
  border-radius: 20px;
}
.dashboard-data .item:last-child {
  margin: 0.5rem 0;
}
.dashboard-data .subtitle {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.85rem 0 0.85rem 50px;
  font-size: 1.5rem;
  line-height: 1.2;
  border-bottom: 1px solid #ced4da;
}
.dashboard-data .subtitle:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 18px;
  width: 15px;
  height: 15px;
  background: #d3af90;
  border-radius: 4px;
}
.dashboard-data .inner, .dashboard-data .regbox {
  padding: 1rem;
  overflow-x: auto;
}
.dashboard-data .inner td, .dashboard-data .regbox td {
  white-space: nowrap;
}
.dashboard-data .regbox {
  padding: 0;
}
.dashboard-complex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 1200px) {
  .dashboard-complex {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media (min-width: 1200px) {
  .dashboard-content {
    margin-left: 300px;
  }
  .dashboard-content .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.5rem 4rem 0.5rem 1.5rem;
    min-height: 77px;
  }
  .dashboard-content .base {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
  }
  .dashboard-content .base:before {
    display: none;
  }
}
@media (min-width: 1560px) {
  .dashboard-content {
    margin-left: 430px;
  }
}
.cus-wrapper {
  overflow-x: auto;
}
.cus-wrapper.has-border-bottom {
  border-bottom: 1px solid #e2e2e2;
}
@media (min-width: 1200px) {
  .cus-wrapper {
    margin-top: 0;
    height: auto;
    overflow: auto;
  }
  .cus-wrapper::-webkit-scrollbar {
    background: #f7f9fc;
    width: 10px;
  }
  .cus-wrapper::-webkit-scrollbar-thumb {
    background: #7da6eb;
    border-radius: 20px;
  }
  .cus-wrapper::-webkit-scrollbar-thumb:hover {
    background: #7da6eb;
  }
}

.customTable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.customTable caption {
  padding: 0.5rem;
  color: black;
  font-weight: bold;
  font-size: 1.2rem;
}
.customTable th, .customTable td {
  padding: 0.5rem;
  padding: 0.75rem 0.75rem !important;
  border: 2px solid #fff;
  text-align: center;
  vertical-align: middle;
  word-break: break-all;
  word-wrap: break-word;
  border: 1px solid white;
  font-size: 0.95rem;
}
.customTable th.text-left, .customTable td.text-left {
  text-align: left;
}
.customTable th.no-padding, .customTable td.no-padding {
  padding: 0 !important;
}
.customTable th {
  text-align: center;
  color: white;
  background-color: #6696e8;
  white-space: nowrap;
}
.customTable tr:nth-child(even) th {
  background-color: #85abed;
}
.customTable tr:nth-child(even) td {
  background-color: #fafcfe;
}
.customTable tr:nth-child(odd) td {
  background-color: #f0f4fd;
}
.customTable .hide {
  position: absolute;
  font-size: 0;
  opacity: 0;
}

/*-------------------------------------------------------------------------------*/
/*    $fiveinone                                                                 */
/*-------------------------------------------------------------------------------*/
.fiveinone {
  position: absolute;
  top: 62px;
  left: 0;
  width: 100%;
}
@media (min-width: 1200px) {
  .fiveinone {
    width: 291px;
    top: 0;
    left: 14.5rem;
  }
  .fiveinone ul {
    overflow-x: scroll;
  }
  .fiveinone ul::-webkit-scrollbar {
    height: 5px;
    background: white;
  }
  .fiveinone ul::-webkit-scrollbar-thumb {
    background: #5065a6;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .fiveinone ul:after {
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
    width: 12px;
    height: calc(100% - 5px);
    background: #5065a6;
  }
  .fiveinone ul:before {
    content: "";
    position: absolute;
    z-index: 2;
    right: -6px;
    top: calc(50% - 5px);
    width: 5px;
    height: 5px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .fiveinone li:first-child {
    border-left: 1px solid #e2e2e2;
  }
}
@media (min-width: 1560px) {
  .fiveinone {
    width: auto;
    overflow: initial;
  }
  .fiveinone ul:after, .fiveinone ul:before {
    display: none;
  }
}
.fiveinone ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
}
.fiveinone li:not(:first-child) {
  border-left: 1px solid white;
}
.fiveinone-tab {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1rem;
  background: #e6ebf5;
  color: #575d66;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.fiveinone-tab.active {
  color: black;
  background: white;
}
.fiveinone-tab.active:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: #5065a6;
}
@media (min-width: 1200px) {
  .fiveinone-tab {
    height: 58px;
  }
}
@media (min-width: 1560px) {
  .fiveinone-tab {
    padding: 1rem 1.5rem;
  }
}

@media (max-width: 1200px) {
  .has-five .main-header {
    position: relative;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: 110px;
  }
  .has-five .main-header .main-title {
    margin-top: 10px;
  }
  .has-five .main-header .main-title:before {
    top: 22px;
  }
}
/*-------------------------------------------------------------------------------*/
/*    $shipmap  台灣港口                                                          */
/*-------------------------------------------------------------------------------*/
.mapbox.leaflet-container {
  background-color: #759bd4 !important;
}

.city-port a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.city-port a .portName {
  position: absolute;
  left: -138px;
  top: -8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 130px;
  padding: 5px 1.5rem 5px 0.5rem;
  background: rgba(80, 101, 166, 0.75);
  color: white;
  border-radius: 8px;
  border: 2px solid white;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.city-port a .portName:after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.city-port a small {
  font-size: 0.5rem;
}
.city-port a:hover .portName {
  background: rgb(63.4146341463, 80.0609756098, 131.5853658537);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.city-port a:hover .fill-color {
  fill: #ff4747;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.city-port03 a .portName, .city-port04 a .portName, .city-port07 a .portName, .city-port08 a .portName, .city-port09 a .portName {
  left: unset;
  right: -133px;
  padding: 5px 0.5rem 5px 1.5rem;
}
.city-port03 a .portName:after, .city-port04 a .portName:after, .city-port07 a .portName:after, .city-port08 a .portName:after, .city-port09 a .portName:after {
  right: unset;
  left: 0.75rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.mapTitle .portName, .mapTitle svg {
  display: none !important;
}
@media (max-width: 991px) {
  .mapTitle img {
    display: none;
  }
}

.fill-color {
  fill: #d3af90;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fill-color-w {
  fill: white;
}

/*-------------------------------------------------------------------------------*/
/*    $shipmap                                                                  */
/*    1.zoom + -                                                                */
/*    2.layer-right                                                             */
/*    3.shipmap-search                                                          */
/*    4.shipmap-notify                                                          */
/*    5.shipmap-info                                                            */
/*    6.shipmap-desc (shipmap-tabs)                                              */
/*    7.shipmap-popup (船隻-彈出框)                                               */
/*    8.shipmap-popup (浮筒-彈出框)                                               */
/*-------------------------------------------------------------------------------*/
.mapbox {
  position: relative;
  top: 0;
  height: calc(100vh - 235px);
}

.shipmap-content {
  position: relative;
  height: calc(100% - 235px);
}
@media (min-width: 1200px) {
  .shipmap-content {
    height: calc(100% - 20px);
  }
}
.shipmap-content .main-container {
  margin-bottom: 0;
}
.shipmap-content .main-scroll {
  margin: 0;
  height: 100%;
}
@media (min-width: 1200px) {
  .shipmap-content .main-scroll {
    overflow: hidden;
  }
}
.shipmap-content .main-scroll .tools {
  top: 15px;
}
.shipmap-content .main-scroll #toggleBtn {
  top: 15px;
}
.shipmap-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

@media (min-width: 1200px) {
  .shipmap-container {
    height: 100%;
  }
}
.leaflet-left .leaflet-control {
  margin: 20px 0 0 20px !important;
}

.leaflet-touch .leaflet-bar {
  border: 0 !important;
}
.leaflet-touch .leaflet-bar a {
  width: 33px !important;
  height: 33px !important;
  line-height: 33px !important;
  outline: 1px solid #e6ebf5;
}
.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}
.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}
.leaflet-touch .leaflet-bar a span {
  color: #575d66;
}

.layer-box {
  position: absolute;
  z-index: 999;
  right: 0px;
  top: 0px;
}
.layer-box:hover .layer-content {
  visibility: visible;
}
.layer-toggle-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 55px;
  height: 55px;
  margin: 20px 20px 0 0;
  background: white url(../images/layer-toggle-btn.svg) no-repeat center center/contain;
  border-radius: 20px;
  cursor: pointer;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
          filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
}
.layer-toggle-btn:hover {
  background-color: #f4f4f4;
}
@media (min-width: 1200px) {
  .layer-toggle-btn {
    width: 66px;
    height: 66px;
  }
}
.layer-content {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 120px;
  padding: 0.75rem 0.5rem;
  background: white;
  border-radius: 20px;
  visibility: hidden;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
          filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
}
.layer-content .item {
  position: relative;
  padding: 0.5rem 0 0.5rem 0.5rem;
}
.layer-content .item input[type=checkbox], .layer-content .item input[type=radio] {
  position: absolute;
  opacity: 0;
}
.layer-content .item input[type=checkbox] + label, .layer-content .item input[type=radio] + label {
  position: relative;
  padding: 0 0 0 1.5rem;
  color: #575d66;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.layer-content .item input[type=checkbox] + label:hover, .layer-content .item input[type=radio] + label:hover {
  color: #6696e8;
}
.layer-content .item input[type=checkbox] + label:before, .layer-content .item input[type=checkbox] + label:after, .layer-content .item input[type=radio] + label:before, .layer-content .item input[type=radio] + label:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.layer-content .item input[type=checkbox] + label:before, .layer-content .item input[type=radio] + label:before {
  left: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  border: 1px solid #ced4da;
}
.layer-content .item input[type=checkbox] + label:after, .layer-content .item input[type=radio] + label:after {
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  background: white;
}
.layer-content .item input[type=checkbox]:checked + label:after, .layer-content .item input[type=radio]:checked + label:after {
  background: #6696e8;
}

.shipmap-search {
  position: absolute;
  z-index: 999;
  left: 20px;
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
  background: white;
  border-radius: 20px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
          filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
}
.shipmap-search-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #5065a6;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.shipmap-search-btn:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 36px;
  height: 36px;
  margin: 0 0 8px;
  background: #5065a6 url(../images/shipmap-search-icon.svg) no-repeat center center;
  border-radius: 8px;
}
.shipmap-search-btn:hover {
  color: #5689e2;
}
.shipmap-search-btn:hover:before {
  background-color: #5689e2;
}
.shipmap-search-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 0;
  visibility: hidden;
}
.shipmap-search-box.active {
  margin-left: 8px;
  width: 100%;
  visibility: visible;
}
.shipmap-search-box .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100px;
  margin: 0 0 0 8px;
}
.shipmap-search-box .item:first-child {
  width: 60px;
}
@media (min-width: 576px) {
  .shipmap-search-box .item:first-child {
    width: 100px;
  }
}
.shipmap-search-box .item input[type=text], .shipmap-search-box .item select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 5px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  font-size: 0.9rem;
}
.shipmap-search-box .item input[type=text]::-webkit-input-placeholder, .shipmap-search-box .item select::-webkit-input-placeholder {
  color: #a1b8dc;
}
.shipmap-search-box .item input[type=text]::-moz-placeholder, .shipmap-search-box .item select::-moz-placeholder {
  color: #a1b8dc;
}
.shipmap-search-box .item input[type=text]:-ms-input-placeholder, .shipmap-search-box .item select:-ms-input-placeholder {
  color: #a1b8dc;
}
.shipmap-search-box .item input[type=text]::-ms-input-placeholder, .shipmap-search-box .item select::-ms-input-placeholder {
  color: #a1b8dc;
}
.shipmap-search-box .item input[type=text]::placeholder, .shipmap-search-box .item select::placeholder {
  color: #a1b8dc;
}
.shipmap-search-box .item input[type=text]:focus, .shipmap-search-box .item select:focus {
  border: 1px solid #6696e8;
  outline: 1px solid #6696e8;
}
.shipmap-search-box .item input[type=text] {
  margin-bottom: 5px;
}
.shipmap-search-box .item select {
  background: url(../images/select-arrow.svg) no-repeat center right 0.5rem #f7f9fc;
}
.shipmap-search-box .item select:focus {
  background: url(../images/select-arrow-change.svg) no-repeat center right 0.5rem #f7f9fc;
}
.shipmap-search-close {
  position: absolute;
  right: 10px;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  pointer-events: none;
  cursor: pointer;
}
.shipmap-search-close.active {
  pointer-events: auto;
}
.shipmap-search-close.active:before {
  content: "－";
  font-size: 1rem;
}
.shipmap-search-close.active:hover {
  color: red;
}

@media (min-width: 1200px) {
  .shipmap-search {
    bottom: 20px;
  }
}
.shipmap-notify {
  position: absolute;
  z-index: 999;
  top: 100px;
  left: 20px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
          filter: drop-shadow(0px 0px 10px rgba(0, 40, 112, 0.15));
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.shipmap-notify-btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 33px;
  height: 33px;
  outline: 1px solid #e6ebf5;
  background: white url(../images/notify-icon.svg) no-repeat center center/contain;
  border-radius: 10px;
  cursor: pointer;
  visibility: visible;
}
.shipmap-notify-btn span {
  position: absolute;
  right: -8px;
  top: -8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20px;
  height: 20px;
  background-color: #ee574c;
  color: white;
  font-family: Arial, "Noto Sans TC", sans-serif;
  border-radius: 50%;
  font-size: 0.95rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.shipmap-notify-btn.active {
  display: none;
}
.shipmap-notify-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0.275rem 0.5rem 0.2rem;
  font-size: 1.2rem;
  font-family: Arial, "Noto Sans TC", sans-serif;
  font-size: bold;
  border-bottom: 1px solid #ced4da;
}
.shipmap-notify-tit:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background: white url(../images/notify-icon.svg) no-repeat center center/contain;
}
.shipmap-notify-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  padding-bottom: 10px;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  height: 0;
  visibility: hidden;
}
.shipmap-notify-box.active {
  height: auto;
  visibility: visible;
}
.shipmap-notify-box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}
.shipmap-notify-box ul::-webkit-scrollbar {
  background: #f7f9fc;
  width: 10px;
}
.shipmap-notify-box ul::-webkit-scrollbar-thumb {
  background: #e2ebfb;
  border-radius: 20px;
}
.shipmap-notify-box ul::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
}
.shipmap-notify-box li {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  color: #575d66;
  line-height: 1.5;
  cursor: pointer;
}
.shipmap-notify-box li:not(:first-child) {
  border-top: 1px solid #ced4da;
}
.shipmap-notify-box li:before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 0.85rem;
  width: 10px;
  height: 10px;
  background: #ced4da;
  border-radius: 3px;
}
.shipmap-notify-box li:hover {
  color: #212529;
}
.shipmap-notify-box li:hover:before {
  background: #ee574c;
}
.shipmap-notify-close {
  position: absolute;
  z-index: 999;
  right: 10px;
  top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  pointer-events: none;
  cursor: pointer;
}
.shipmap-notify-close.active {
  pointer-events: auto;
}
.shipmap-notify-close.active:before {
  content: "－";
  font-size: 1rem;
}
.shipmap-notify-close.active:hover {
  color: #ee574c;
}

.shipmap-info-box {
  position: absolute;
  z-index: 9999;
  right: 0;
  top: 0;
  visibility: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 0%;
  max-width: 320px;
  background: white;
  height: 100%;
  -webkit-filter: drop-shadow(0px 10px 10px rgba(77, 77, 77, 0.25));
          filter: drop-shadow(0px 10px 10px rgba(77, 77, 77, 0.25));
}
.shipmap-info-box.active {
  visibility: visible;
  width: calc(100% - 45px);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media (min-width: 1560px) {
  .shipmap-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .shipmap-info-box.active {
    position: relative;
  }
}
.shipmap-info-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1.5rem;
  color: #33b5a1;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
}
.shipmap-info-tit:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background: url(../images/shipmap-info-icon.svg) no-repeat center center/contain;
}
.shipmap-info-data {
  height: calc(100% - 79px);
  overflow-y: auto;
}
.shipmap-info-data li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.375rem 1.5rem;
  line-height: 1.75;
  color: #33b5a1;
}
.shipmap-info-data li:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-right: 1rem;
  background-color: rgba(51, 181, 161, 0.1);
  border-radius: 6px;
}
.shipmap-info-data li:not(:last-child) {
  border-bottom: 1px solid #e2e2e2;
}
.shipmap-info-data .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.shipmap-info-data .item .title {
  font-size: 1.2rem;
}
.shipmap-info-data .item .text {
  color: #575d66;
}
.shipmap-info-close {
  position: absolute;
  z-index: 999;
  right: 20px;
  top: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  pointer-events: none;
  cursor: pointer;
}
.shipmap-info-close.active {
  pointer-events: auto;
}
.shipmap-info-close.active:before, .shipmap-info-close.active:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 2px;
  background: #575d66;
}
.shipmap-info-close.active:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.shipmap-info-close.active:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.shipmap-info-close.active:hover:before, .shipmap-info-close.active:hover:after {
  background: #ee574c;
}

.shipmap-info-data li:nth-child(1):before {
  background-image: url("../images/shipmap-info-icon1.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(2):before {
  background-image: url("../images/shipmap-info-icon2.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(3):before {
  background-image: url("../images/shipmap-info-icon3.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(4):before {
  background-image: url("../images/shipmap-info-icon4.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(5):before {
  background-image: url("../images/shipmap-info-icon5.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(6):before {
  background-image: url("../images/shipmap-info-icon6.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(7):before {
  background-image: url("../images/shipmap-info-icon7.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(8):before {
  background-image: url("../images/shipmap-info-icon8.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-info-data li:nth-child(9):before {
  background-image: url("../images/shipmap-info-icon9.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.shipmap-desc-box {
  position: absolute;
  z-index: 9999;
  right: 0;
  top: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 0%;
  max-width: 320px;
  height: 100%;
  background: white;
  overflow: hidden;
  -webkit-filter: drop-shadow(0px 10px 10px rgba(77, 77, 77, 0.25));
          filter: drop-shadow(0px 10px 10px rgba(77, 77, 77, 0.25));
}
.shipmap-desc-box.active {
  width: calc(100% - 45px);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media (min-width: 1560px) {
  .shipmap-desc-box.active {
    position: relative;
  }
}
.shipmap-desc-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1.5rem;
  color: #33b5a1;
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
  font-size: 1.2rem;
}
.shipmap-desc-tit:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background: url(../images/shipmap-info-icon-desc.svg) no-repeat center center/contain;
}
.shipmap-desc-data {
  height: 100%;
  overflow: hidden;
}
.shipmap-desc-close {
  position: absolute;
  z-index: 999;
  right: 20px;
  top: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  pointer-events: none;
  cursor: pointer;
}
.shipmap-desc-close.active {
  pointer-events: auto;
}
.shipmap-desc-close.active:before, .shipmap-desc-close.active:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 2px;
  background: #575d66;
}
.shipmap-desc-close.active:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.shipmap-desc-close.active:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.shipmap-desc-close.active:hover:before, .shipmap-desc-close.active:hover:after {
  background: #ee574c;
}

.shipmap-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  padding: 1rem 0;
  border-bottom: 1px solid #e2e2e2;
}
.shipmap-tabs-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.5rem 0.875rem;
  color: #33b5a1;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #33b5a1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.shipmap-tabs-item.active {
  color: white;
  background: #33b5a1;
}
.shipmap-tabs-box {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
  height: calc(100% - 67px - 69px - 32px);
  padding: 1rem;
  line-height: 1.875;
}
.shipmap-tabs-box::-webkit-scrollbar {
  background: #f7f9fc;
  width: 10px;
}
.shipmap-tabs-box::-webkit-scrollbar-thumb {
  background: #e2ebfb;
  border-radius: 20px;
}
.shipmap-tabs-box::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
}
.shipmap-tabs-box.active {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.shipmap-ins {
  margin: 1rem -1rem 0;
  border-top: 1px solid #e2e2e2;
}
.shipmap-ins ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.shipmap-ins li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 50%;
  padding: 1.5rem;
  border-bottom: 1px solid #e2e2e2;
}
.shipmap-ins li:nth-child(odd) {
  border-right: 1px solid #e2e2e2;
}

.md-text ol {
  padding: 1em 0 1em 2em;
  list-style: decimal;
}
.md-text ol.a {
  list-style-type: decimal;
}
.md-text ol.b {
  list-style-type: decimal-leading-zero;
}
.md-text ol.c {
  list-style-type: lower-alpha;
}
.md-text ol.d {
  list-style-type: upper-alpha;
}
.md-text ol.e {
  list-style-type: lower-roman;
}
.md-text ol.f {
  list-style-type: upper-roman;
}
.md-text ol.g {
  list-style-type: cjk-ideographic;
}
.md-text ol.h {
  list-style-type: hiragana;
}
.md-text ol.l {
  list-style-type: hiragana-iroha;
}
.md-text ol.i {
  list-style-type: katakana;
}
.md-text ol.j {
  list-style-type: katakana-iroha;
}
.md-text ol.k {
  list-style-type: lower-greek;
}
.md-text ul {
  padding: 1em 0 1em 2em;
  list-style: disc;
}
.md-text ul.a {
  list-style-type: disc;
}
.md-text ul.b {
  list-style-type: circle;
}
.md-text ul.c {
  list-style-type: square;
}

.leaflet-popup {
  margin-bottom: 40px !important;
}

.leaflet-popup-close-button {
  top: 5px !important;
  right: 10px !important;
  color: white !important;
  font-size: 20px !important;
}

.leaflet-popup-content-wrapper {
  border-radius: 20px !important;
  position: relative;
}
.leaflet-popup-content-wrapper:before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  background: white;
  /* 使用 mask 實現內凹 */
  -webkit-mask: radial-gradient(circle at 0 0, transparent 30px, #000 31px), radial-gradient(circle at 100% 0, transparent 30px, #000 31px), radial-gradient(circle at 100% 100%, transparent 30px, #000 31px), radial-gradient(circle at 0 100%, transparent 30px, #000 31px);
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top left, top right, bottom right, bottom left;
  -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
          box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-tip {
  display: none !important;
}

.leaflet-popup-content {
  margin: 13px 15px 13px 15px !important;
}

.shipmap-popup {
  line-height: 1.6;
}
.shipmap-popup div {
  position: relative;
  z-index: 1;
}
.shipmap-popup:after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  background: #adb5bd;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.shipmap-popup .vesselTitle {
  position: relative;
  margin: -15px -16px 13px -17px !important;
  padding: 15px 15px 13px 20px;
  pointer-events: none;
  background-color: #666666;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 0;
}
.shipmap-popup .vesselTitle .vesselInfo_Name_Chinese {
  color: white;
  font-family: Arial, "Noto Sans TC", sans-serif;
  font-size: 1.5em;
  padding-right: 50px;
}
.shipmap-popup .vesselTitle .vesselInfo_Name_English {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 60px;
  color: white;
  font-family: "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.shipmap-popup .vesselTitle .shipCate {
  position: absolute;
  bottom: 10px;
  right: 15px;
  padding: 3px 0.5rem;
  background: white;
  color: #4d4d4d;
  font-size: 0.875rem;
  border-radius: 8px;
}
.shipmap-popup .vesselContent .tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.shipmap-popup .vesselContent .tr.good {
  background: #d39e71;
  color: white;
}
.shipmap-popup .vesselContent .tr.good + .tr.good {
  background: #dcb28e;
}
.shipmap-popup .vesselContent .tr:nth-child(odd) {
  background: #f1f3f5;
}
.shipmap-popup .vesselContent .td {
  padding: 1px 8px;
  font-size: 14px !important;
}
.shipmap-popup .vesselContent .td.title {
  font-weight: bold;
}
.shipmap-popup .vesselContent .td.subA {
  position: absolute;
  right: 2px;
  top: 2px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-self: flex-end;
  padding: 4px 8px;
  background: rgba(102, 102, 102, 0.5);
  color: white;
  border-radius: 50px;
  font-size: 12px !important;
  line-height: 1;
}
.shipmap-popup .vesselContent .td.subB {
  color: #4d4d4d;
  font-weight: bold;
}
.shipmap-popup .vesselContent.B .tr:nth-child(odd) {
  background: rgba(122, 150, 237, 0.1);
}
.shipmap-popup .vesselContent.R .tr:nth-child(odd) {
  background: rgba(237, 107, 90, 0.07);
}
.shipmap-popup .vesselContent.Y .tr:nth-child(odd) {
  background: rgba(240, 193, 75, 0.1);
}
.shipmap-popup .vesselContent.G .tr:nth-child(odd) {
  background: rgba(77, 196, 170, 0.1);
}

/* 自訂船 icon */
.ship-icon img {
  width: 100%;
  opacity: 0.5;
}

.ship-wrapper {
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.ship-label {
  position: absolute;
  bottom: -20px;
  left: 120%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  border-radius: 5rem;
  border-top-left-radius: 0;
  border: 1px solid #7a96ed;
}

.ship-agent {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #7a96ed;
  color: white;
  font-size: 10px;
}

.B .vesselTitle {
  background: #7a96ed;
}
.B .shipCate, .B .subB {
  color: #7a96ed !important;
}
.B .ship-label {
  border-color: #7a96ed;
}
.B .ship-agent {
  background: #7a96ed;
}

.R .vesselTitle {
  background: #ed6b5a;
}
.R .shipCate, .R .subB {
  color: #ed6b5a !important;
}
.R .ship-label {
  border-color: #ed6b5a;
}
.R .ship-agent {
  background: #ed6b5a;
}

.Y .vesselTitle {
  background: #f0c14b;
}
.Y .shipCate, .Y .subB {
  color: #f0c14b !important;
}
.Y .ship-label {
  border-color: #f0c14b;
}
.Y .ship-agent {
  background: #f0c14b;
}

.G .vesselTitle {
  background: #4dc4aa;
}
.G .shipCate, .G .subB {
  color: #4dc4aa !important;
}
.G .ship-label {
  border-color: #4dc4aa;
}
.G .ship-agent {
  background: #4dc4aa;
}

.buoy-point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.buoy-popup {
  position: relative;
  min-width: 300px;
  line-height: 1.6;
}
.buoy-popup div {
  position: relative;
  z-index: 1;
}
.buoy-popup a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 15px;
  margin: 0.5rem 0 0;
  background: #5065a6 url(../images/bouy-icon2.svg) no-repeat center right 15px/contain;
  background-size: 15px;
  color: white !important;
  font-size: 14px;
  border-radius: 3rem;
}
.buoy-popup a img {
  width: 15px;
  margin-right: 5px;
}
.buoy-popup:after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: calc(100% + 2rem);
  height: 85px;
  margin: -1rem;
  background: #d39e71;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.buoy-popup .wharfTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  font-size: 1.5em;
  color: white;
  line-height: 1;
}
.buoy-popup .wharfTitle.sub {
  font-size: 16px;
}
.buoy-popup .wharfContent.frame {
  margin: 2rem 0 1.5rem;
}
.buoy-popup .wharfContent.tr .td {
  padding: 5px;
  font-size: 14px;
}
.buoy-popup .wharfContent.tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.buoy-popup .wharfContent.tr:nth-child(odd) {
  background: #f6efe9;
}
.buoy-popup .wharfContent.tr:nth-child(even) {
  background: #fbf7f4;
}
.buoy-popup .chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 1rem 0 0;
}
.buoy-circle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  background: #575d66;
  color: white;
  font-size: 1rem;
  border-radius: 50%;
}
.buoy-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  width: 30px;
  height: 30px;
}

/*-------------------------------------------------------------------------------*/
/*    $系統組態設定 (共用權限管理系列)                                              */
/*    1.編輯按鈕                                                                 */
/*    2.彈出popup                                                                */
/*-------------------------------------------------------------------------------*/
.sys-box {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  top: -6px;
  cursor: pointer;
}
.sys-box.active {
  width: 100%;
  height: 100%;
  background: red;
  top: 0 !important;
}
.sys-box.active .sys-inner {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sys-box.active .sys-edit {
  position: absolute;
  border-color: #4dc4aa;
}
.sys-edit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 48px;
  height: 30px;
  background: white url(../images/sys-edit.svg) no-repeat center center;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  font-size: 0rem;
}
.sys-inner {
  position: absolute;
  z-index: 9;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: white;
  min-width: 150px;
}
.sys-inner a:not(:last-child) {
  border-bottom: 1px solid #e2e2e2;
}
.sys-inner:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20px;
  width: 100%;
  height: 50px;
}
.sys-change, .sys-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1.5rem 1rem 0.5rem;
  color: #ed6b5a;
}
.sys-change span, .sys-delete span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sys-change span:before, .sys-delete span:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.sys-change:hover, .sys-delete:hover {
  background-color: #f0f4fd;
}
.sys-change {
  color: #575d66;
}
.sys-change span:before {
  background: url(../images/sys-modify-icon.svg) no-repeat center center;
}
.sys-delete span:before {
  background: url(../images/sys-delete-icon.svg) no-repeat center center;
}

.e-control .sys-box {
  top: -3px;
}

.sys-popup, .sys-modify, .sys-modify-lv2 {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(87, 93, 102, 0.7);
  visibility: hidden;
  pointer-events: none;
}
.sys-popup.active, .sys-modify.active, .sys-modify-lv2.active {
  visibility: visible;
  pointer-events: auto;
}
.sys-popup.active .sys-content, .sys-modify.active .sys-content, .sys-modify-lv2.active .sys-content {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sys-popup.active .sys-close, .sys-popup.active .sys-close-lv2, .sys-modify.active .sys-close, .sys-modify.active .sys-close-lv2, .sys-modify-lv2.active .sys-close, .sys-modify-lv2.active .sys-close-lv2 {
  pointer-events: auto;
}
.sys-popup.active .sys-close:before, .sys-popup.active .sys-close:after, .sys-popup.active .sys-close-lv2:before, .sys-popup.active .sys-close-lv2:after, .sys-modify.active .sys-close:before, .sys-modify.active .sys-close:after, .sys-modify.active .sys-close-lv2:before, .sys-modify.active .sys-close-lv2:after, .sys-modify-lv2.active .sys-close:before, .sys-modify-lv2.active .sys-close:after, .sys-modify-lv2.active .sys-close-lv2:before, .sys-modify-lv2.active .sys-close-lv2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 2px;
  background: #575d66;
}
.sys-popup.active .sys-close:before, .sys-popup.active .sys-close-lv2:before, .sys-modify.active .sys-close:before, .sys-modify.active .sys-close-lv2:before, .sys-modify-lv2.active .sys-close:before, .sys-modify-lv2.active .sys-close-lv2:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.sys-popup.active .sys-close:after, .sys-popup.active .sys-close-lv2:after, .sys-modify.active .sys-close:after, .sys-modify.active .sys-close-lv2:after, .sys-modify-lv2.active .sys-close:after, .sys-modify-lv2.active .sys-close-lv2:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.sys-popup.active .sys-close:hover:before, .sys-popup.active .sys-close:hover:after, .sys-popup.active .sys-close-lv2:hover:before, .sys-popup.active .sys-close-lv2:hover:after, .sys-modify.active .sys-close:hover:before, .sys-modify.active .sys-close:hover:after, .sys-modify.active .sys-close-lv2:hover:before, .sys-modify.active .sys-close-lv2:hover:after, .sys-modify-lv2.active .sys-close:hover:before, .sys-modify-lv2.active .sys-close:hover:after, .sys-modify-lv2.active .sys-close-lv2:hover:before, .sys-modify-lv2.active .sys-close-lv2:hover:after {
  background: #ee574c;
}
.sys-content {
  position: absolute;
  right: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(100vw - 48px);
  height: 100vh;
  background: white;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
@media (min-width: 768px) {
  .sys-content {
    max-width: 576px;
  }
}
@media (min-width: 1200px) {
  .sys-content.sys-double, .sys-content.sys-triple {
    max-width: 1152px;
  }
  .sys-content.sys-triple {
    max-width: inherit;
    width: calc(100vw - 200px);
  }
}
@media (min-width: 1800px) {
  .sys-content.sys-triple {
    max-width: 1728px;
  }
}
.sys-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1.5rem;
  border-bottom: 1px solid #e2e2e2;
  font-size: 1.2rem;
}
.sys-title span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sys-title span:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 25px;
  height: 25px;
  margin-right: 8px;
}
.sys-title span.icon-add:before {
  background: url(../images/sys-title-add-icon.svg) no-repeat center center;
}
.sys-title span.icon-modify:before {
  background: url(../images/sys-title-modify-icon.svg) no-repeat center center;
}
.sys-title span.icon-approve:before {
  background: url(../images/sys-title-approve-icon.svg) no-repeat center center;
}
.sys-title span.icon-square:before {
  background: url(../images/sys-title-square-icon.svg) no-repeat center center;
}
.sys-form {
  height: calc(100% - 82px);
  overflow-y: auto;
}
.sys-form .sys-panel-box .ct-group {
  width: 100%;
}
.sys-form .sys-panel-box div.ct-input {
  border: 0;
}
.sys-form .sys-panel-box.has-border {
  border-bottom: 1px solid #e2e2e2;
}
@media (min-width: 1200px) {
  .sys-form .sys-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
  .sys-form .sys-panel-box {
    -webkit-box-flex: var(--per);
        -ms-flex: var(--per);
            flex: var(--per);
    overflow-y: auto;
  }
  .sys-form .sys-panel-box.has-border {
    border-bottom: 0;
    border-left: 1px solid #e2e2e2;
  }
}
.sys-form .ct-group {
  position: relative;
  margin: 0;
  padding: 30px 30px 30px 30px;
  border-bottom: 1px solid #e2e2e2;
}
.sys-form .ct-group > label {
  pointer-events: none;
}
@media (min-width: 1200px) {
  .sys-form .ct-group:last-child {
    border-bottom: 0;
  }
}
.sys-form .ct-group input[type=radio] + label:before, .sys-form .ct-group input[type=checkbox] + label:before {
  border: 1px solid #e2e2e2;
}
.sys-form .ct-group input[type=radio]:checked + label:after, .sys-form .ct-group input[type=checkbox]:checked + label:after {
  background: #6696e8;
  border: 1px solid transparent;
}
.sys-form .ct-group .approve-chose input[type=radio]:checked + label:after, .sys-form .ct-group .approve-chose input[type=checkbox]:checked + label:after {
  background: #33b5a1;
}
.sys-form .ct-group .approve-chose input[type=radio]:checked + label + .approve-qs, .sys-form .ct-group .approve-chose input[type=checkbox]:checked + label + .approve-qs {
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sys-form label {
  position: initial;
  color: #575d66;
}
.sys-form label.required:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background: #ed6b5a;
}
.sys-form .e-checkbox-wrapper.e-wrapper .e-label, .sys-form .e-radio-wrapper.e-wrapper .e-label {
  color: #575d66;
}
.sys-form .e-checkbox-wrapper.e-wrapper .e-radio:checked + label:after, .sys-form .e-radio-wrapper.e-wrapper .e-radio:checked + label:after {
  background-color: #4dc4aa;
  border: 0;
}
.sys-form .e-icons.e-frame {
  border: 1px solid #e2e2e2 !important;
}
.sys-form .e-icons.e-frame.e-check {
  border: 1px solid #e2e2e2 !important;
}
.sys-form .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
  border: 1px solid #e2e2e2 !important;
}
.sys-form .e-input-group input.e-input {
  border: 1px solid #e2e2e2 !important;
}
.sys-form .ct-input, .sys-form .ct-select, .sys-form .ct-textarea {
  border: 1px solid #e2e2e2;
}
.sys-form .ct-textarea {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: auto;
  min-height: 80px;
  border-radius: 5px;
}
.sys-form .ct-half {
  color: #575d66;
}
.sys-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  border-top: 1px solid #e2e2e2;
}
.sys-bottom button {
  min-width: 140px;
  margin: 5px;
  padding: 0.5rem 1rem;
  border: 0;
  background: #575d66;
  color: white;
  border-radius: 5px;
}
@media (min-width: 576px) {
  .sys-bottom button {
    min-width: 145px;
  }
}
.sys-bottom button span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 15px;
}
.sys-bottom button span:before, .sys-bottom button span:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 15px;
  height: 1px;
  background: white;
}
.sys-bottom button.add {
  background: #6696e8;
}
.sys-bottom button.add span:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sys-bottom button.add:hover {
  background: #5689e2;
}
.sys-bottom button.cancel span:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.sys-bottom button.cancel span:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.sys-bottom button.cancel:hover {
  background: #4d4d4d;
}
.sys-bottom button.save {
  background: #ee574c;
}
.sys-bottom button.save span:before {
  display: none;
}
.sys-bottom button.save span:after {
  top: calc(50% - 8px);
  width: 20px;
  height: 20px;
  background: url(../images/sys-icon-save.svg) no-repeat center center;
}
.sys-bottom button.save:hover {
  background: #ff4747;
}
.sys-bottom button.copy {
  background: #6696e8;
}
.sys-bottom button.copy span {
  padding-right: 2rem;
}
.sys-bottom button.copy span:before {
  display: none;
}
.sys-bottom button.copy span:after {
  top: calc(50% - 14px);
  width: 30px;
  height: 30px;
  background: url(../images/cus-go-arrow-icon.svg) no-repeat center center/contain;
}
.sys-bottom button.copy:hover {
  background: #5689e2;
}
.sys-close, .sys-close-lv2 {
  position: absolute;
  z-index: 999;
  right: 20px;
  top: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  font-size: 0rem;
  pointer-events: none;
  cursor: pointer;
}

@media (min-width: 1200px) {
  .sys-title {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
  }
  .sys-bottom {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 83px;
  }
  .sys-bottom.sys-flex-end {
    padding: 1rem 0;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .sys-w1, .sys-w2, .sys-half {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    width: 33.3333%;
  }
  .sys-w1:before, .sys-w2:before, .sys-half:before {
    content: "";
    position: absolute;
    top: 0;
    right: 33.3333333333%;
    height: 83px;
    border-left: 1px solid #e2e2e2;
  }
  .sys-w2 {
    width: 66.6666%;
  }
  .sys-w2:before {
    right: 66.6%;
  }
  .sys-half {
    width: 50%;
  }
  .sys-half:before {
    right: 49.9%;
  }
  .sys-panel.sys-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
/*-------------------------------------------------------------------------------*/
/*    $貨櫃裝卸效率上傳功能(REP_C036)                                              */
/*-------------------------------------------------------------------------------*/
.send-btn {
  position: absolute;
  right: 65px;
  top: calc(50% - 14px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 35px;
  height: 28px;
  font-size: 0rem;
  color: white;
  border-radius: 4px;
  pointer-events: auto;
  border: 0;
  background: #6696e8 url(../images/i-icon-send.svg) no-repeat center center/contain;
  background-size: 60%;
}
@media (min-width: 1200px) {
  .send-btn {
    right: 135px;
    width: 105px;
    padding-right: 20px;
    font-size: 1rem;
    background: #6696e8 url(../images/i-icon-send.svg) no-repeat center right 16px/contain;
    background-size: 20%;
  }
  .send-btn:hover {
    background-color: #5689e2;
  }
}

.help-btn.help-set {
  right: 22px;
}

.tools-set {
  right: 16px;
}

.rep-cbox #num-of-files {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.75rem;
  padding: 0;
  height: 48px;
}
.rep-table {
  width: 100%;
}
.rep-table tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.rep-table tr:nth-child(odd) th {
  background: #6696e8;
  color: white;
}
.rep-table tr:nth-child(odd) td {
  background: #f0f4fd;
}
.rep-table tr:nth-child(even) th {
  background: #7da6eb;
  color: white;
}
.rep-table th, .rep-table td {
  position: relative;
  padding: 0.5rem;
  line-height: 2;
  vertical-align: middle;
}
.rep-table th span, .rep-table td span {
  color: #575d66;
}
.rep-filebox #file-list {
  min-height: 125px;
  padding: 0.5rem;
  border: 1px solid #e2e2e2;
  background: white;
}
.rep-filebox #file-list:before {
  content: attr(data-desc);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: -0.5rem -0.5rem 0.5rem;
  padding: 0.5rem 1rem;
  background: #6696e8;
  color: white;
}
.rep-filebox #file-list li {
  padding: 0.75rem 60px 0.75rem 1rem;
  background: #e6ebf5;
  border-radius: 5px;
}
.rep-filebox #file-list li:before {
  display: none;
}
.rep-box-tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1rem;
  color: #ed6b5a;
}

@media (min-width: 1200px) {
  .rep-cbox #num-of-files {
    margin-top: 0;
  }
  .rep-table tr {
    display: table-row;
  }
  .rep-table tr th {
    width: 150px;
  }
  .rep-upload {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
  .rep-upload .file-chose {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 0.5rem;
  }
  .rep-filebox {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .rep-filebox #file-list {
    margin-top: 0;
  }
}
.rep-tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1rem;
  color: #333333;
}
.rep-tip span {
  font-size: 0.9rem;
}
.rep-tip-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 4px 10px;
  margin: 0 0.5rem 0 0;
  background: #4dc4aa;
  color: white;
  font-size: 0.9rem;
  border-radius: 5px;
}
.rep-send-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-height: 22px;
  min-width: 30px;
  padding: 4px 10px;
  margin-left: 0.5rem;
  background: #6696e8 url(../images/i-icon-send.svg) no-repeat center center/contain;
  border-radius: 5px;
  font-size: 0rem;
}

/*-------------------------------------------------------------------------------*/
/*    $權限管理系列                                                               */
/*    1.權限範本(SYS_A005)                                                        */
/*    2.港公司部門系統使用者管理(SYS_A008-2) ★搜尋功能★                            */
/*-------------------------------------------------------------------------------*/
.sys-approve {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem;
}

.approve-tit {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 1rem 0 0;
  background: #e6ebf5;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.approve-tit span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 1rem;
  color: #575d66;
}
.approve-tit .delete-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 48px;
  height: 28px;
  background: #ed6b5a url(../images/delete-btn-icon.svg) no-repeat center center;
  font-size: 0rem;
  border: 0;
  border-radius: 5px;
}
.approve-tit .delete-btn:hover {
  background-color: #ff4747;
}
.approve-content .ct-group {
  width: 100%;
  border-bottom: 0;
}
.approve-content .ct-group:not(:first-child) {
  padding-top: 0;
}
@media (min-width: 1200px) {
  .approve-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
            justify-content: stretch;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: 100%;
  }
}
.approve-box {
  border: 1px solid #e2e2e2;
  border-radius: 0.5rem;
}
.approve-addbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 60px;
}
.approve-addbox button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 35px;
  height: 110px;
  background: #6696e8;
  color: white;
  font-size: 0rem;
  border: 0;
  border-radius: 8px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.approve-addbox button.add-in {
  display: none;
  background: #6696e8 url(../images/add-in-icon.svg) no-repeat center center/cover;
}
.approve-addbox button.add-all {
  background: #6696e8 url(../images/add-all-icon.svg) no-repeat center center/cover;
}
.approve-addbox button:hover {
  background-color: #5689e2;
}
.approve-ul {
  padding: 20px 0;
  height: 500px;
  border-top: 1px solid #e2e2e2;
  overflow-y: auto;
}
.approve-ul::-webkit-scrollbar {
  background: #f7f9fc;
  width: 8px;
}
.approve-ul::-webkit-scrollbar-thumb {
  background: #6696e8;
  border-radius: 20px;
}
.approve-ul::-webkit-scrollbar-thumb:hover {
  background: #7da6eb;
}
.approve-ul li {
  position: relative;
  padding: 5px 30px 5px 90px;
  line-height: 2;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.approve-ul li:before {
  content: "";
  position: absolute;
  left: 30px;
  top: 10px;
  width: 36px;
  height: 20px;
  background: #6696e8 url(../images/approve-icon.svg) no-repeat center center;
  border-radius: 5px;
}
.approve-ul li:after {
  content: "";
  position: absolute;
  left: 78px;
  top: 18px;
  width: 4px;
  height: 4px;
  background: black;
}
.approve-ul .approve-item.active {
  background: #f0f4fd;
}

@media (min-width: 1200px) {
  .approve-content {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .approve-box {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-flex: 10;
        -ms-flex: 10;
            flex: 10;
  }
  .approve-addbox {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-flex: 0.2;
        -ms-flex: 0.2;
            flex: 0.2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: initial;
  }
  .approve-addbox button {
    margin: 0.25rem 0.5rem;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  .approve-addbox button.add-in {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .approve-ul {
    height: calc(100vh - 380px);
  }
  .approve-ul.approve-full {
    height: calc(100vh - 242px);
  }
  .approve-ul li {
    padding: 5px 30px 5px 48px;
  }
  .approve-ul li:before {
    display: none;
  }
  .approve-ul li:after {
    left: 32px;
  }
}
.has-conditions .ct-group {
  padding-top: 30px !important;
}
.has-conditions .ct-group:not(:last-child) {
  border-bottom: 1px solid #e2e2e2;
}
@media (min-width: 1200px) {
  .has-conditions .ct-half {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .has-conditions + .approve-ul {
    height: calc(100vh - 580px);
  }
  .has-conditions.only-row + .approve-ul {
    height: calc(100vh - 510px);
  }
}
@media (min-width: 1560px) {
  .has-conditions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .has-conditions .ct-group {
    width: 50% !important;
  }
  .has-conditions .ct-group.ct-w100 {
    width: 100% !important;
    border-right: 0 !important;
  }
  .has-conditions .ct-group:nth-child(3) {
    border-bottom: 0;
  }
  .has-conditions .ct-group:nth-child(2n+1) {
    border-right: 1px solid #e2e2e2;
  }
  .has-conditions .ct-half {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .has-conditions + .approve-ul {
    height: calc(100vh - 520px);
  }
  .has-conditions.only-row .ct-group {
    border-bottom: 0 !important;
  }
  .has-conditions.only-row + .approve-ul {
    height: calc(100vh - 375px);
  }
}

.approve-chose .ct-input[type=radio] + label:before, .approve-chose .ct-input[type=radio] + label:after, .approve-chose .ct-input[type=checkbox] + label:before, .approve-chose .ct-input[type=checkbox] + label:after {
  border-radius: 50%;
}
.approve-qs {
  position: relative !important;
  min-width: calc(100% - 160px);
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 1200px) {
  .approve-qs {
    min-width: calc(100% - 208px);
  }
}
@media (min-width: 1560px) {
  .approve-qs {
    min-width: calc(100% - 205px);
  }
}

.cus-reset, .cus-go-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 10px 5px 15px;
  background: #6696e8;
  color: white;
  border: 0;
  border-radius: 5px;
  margin-left: 1rem;
}
.cus-reset span, .cus-go-arrow span {
  color: white;
  font-size: 0.9rem;
}
.cus-reset svg, .cus-go-arrow svg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 0.5rem;
}
.cus-reset .cus-key, .cus-reset .cus-go, .cus-go-arrow .cus-key, .cus-go-arrow .cus-go {
  fill: white;
}
.cus-reset:hover, .cus-go-arrow:hover {
  background: #5689e2;
}

.cus-go-arrow {
  position: absolute;
  top: 10px;
  right: 72px;
  height: 28px;
  padding: 0 8px 0 0;
}
.cus-go-arrow span {
  display: none;
  padding: 0 0 0 12px;
}
@media (min-width: 1560px) {
  .cus-go-arrow span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0 0 2px 12px;
  }
}

.approve-list {
  padding: 1rem;
}
.approve-table {
  display: none;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  overflow: hidden;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.approve-table td, .approve-table th {
  padding: 0.5rem 1rem;
  vertical-align: middle;
  border: 1px solid #e2e2e2;
  border-right: none;
  border-bottom: none;
  line-height: 1.5;
}
.approve-table td:last-child {
  padding: 0.5rem 0;
  width: 70px;
  text-align: center;
}
.approve-table.no-del td:last-child {
  width: auto;
}
.approve-table tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
.approve-table tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}
.approve-table .delete-btn {
  position: relative;
  display: inline-block;
  min-width: 48px;
  height: 28px;
  background: #ed6b5a;
  font-size: 0rem;
  border: 0;
  border-radius: 5px;
}
.approve-table .delete-btn:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 14px;
  width: 20px;
  border-top: 1px solid white;
}
.approve-table .delete-btn:hover {
  background-color: #ff4747;
}
.approve-part {
  border-radius: 8px;
}
.approve-part:not(:last-child) {
  margin-bottom: 1rem;
}
.approve-part.active .approve-table {
  display: table;
}
.approve-part.active .approve-top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.approve-part.active .approve-top:after {
  top: 1rem;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.approve-top {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.575rem 0.5rem 1rem;
  background: #ced4da;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}
.approve-top:after {
  content: "";
  position: absolute;
  right: 45px;
  top: 1.1rem;
  width: 7px;
  height: 7px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.approve-top.no-del:after {
  right: 25px;
}
.approve-top .delete-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 28px;
  height: 28px;
  background: url(../images/delete-btn-icon.svg) no-repeat center center;
  font-size: 0rem;
  border: 0;
  border-radius: 5px;
}
.approve-top .delete-btn:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.approve-part.color-green .approve-top {
  background: #4dc4aa;
  border-color: #4dc4aa;
}
.approve-part.color-green .approve-table {
  border-color: #4dc4aa;
}
.approve-part.color-green th, .approve-part.color-green td {
  border-color: #4dc4aa;
}
.approve-part.color-blue .approve-top {
  background: #6696e8;
  border-color: #6696e8;
}
.approve-part.color-blue .approve-table {
  border-color: #6696e8;
}
.approve-part.color-blue th, .approve-part.color-blue td {
  border-color: #6696e8;
}

.approve-tip {
  display: none;
}

@media (min-width: 1200px) {
  .approve-list {
    height: calc(100vh - 240px);
    overflow: auto;
  }
  .approve-list::-webkit-scrollbar {
    background: #f7f9fc;
    width: 8px;
  }
  .approve-list::-webkit-scrollbar-thumb {
    background: #6696e8;
    border-radius: 20px;
  }
  .approve-list::-webkit-scrollbar-thumb:hover {
    background: #7da6eb;
  }
  .approve-copyarea {
    height: calc(100vh - 158px);
  }
  .approve-tip {
    position: absolute;
    left: 45px;
    top: 32px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 0.9rem;
  }
  .approve-tip:before {
    content: "TIP";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 5px 15px 2px;
    margin-right: 0.5rem;
    background: #4dc4aa;
    color: white;
    border-radius: 5px;
  }
}
.approve-search-wrapper {
  position: relative;
  padding: 1rem;
}
.approve-search-btn, .approve-search-close {
  position: relative;
  top: 0;
  left: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 62px;
  padding-left: 3.5rem;
  background: #5065a6 url(../images/search-icon.svg) no-repeat center left 0.75rem;
  color: white;
  font-size: 1.125rem;
  border-radius: 20px;
  cursor: pointer;
}
.approve-search-btn:after, .approve-search-close:after {
  content: "";
  position: absolute;
  right: 1.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 15px;
  height: 15px;
  background: url(../images/search-arrow-down.svg) no-repeat center center;
  pointer-events: none;
}
.approve-search-close {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 20px;
  width: 100%;
  height: 62px;
  padding-left: 3.5rem;
  background: #5065a6 url(../images/search-icon.svg) no-repeat center left 0.75rem;
  color: white;
  font-size: 1.125rem;
  border-radius: 20px;
}
.approve-search-close:after {
  content: "";
  position: absolute;
  right: 1.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 15px;
  height: 15px;
  background: url(../images/search-arrow-down.svg) no-repeat center center;
  pointer-events: none;
}
.approve-search-close {
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0px !important;
}
.approve-search-close:before {
  content: "查詢功能";
}
.approve-search-close span {
  opacity: 0;
}
.approve-search-close:after {
  content: "";
  position: absolute;
  right: 1.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 15px;
  height: 15px;
  background: url(../images/search-arrow-up.svg) no-repeat center center;
  pointer-events: none;
}
.approve-search-content {
  position: relative;
  z-index: 1;
  top: -2rem;
  left: 0;
  width: 100%;
  height: 0px;
  padding: 1rem;
  margin: 0 0 -2rem;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
}
.approve-search-content.is-open {
  opacity: 1;
  visibility: visible;
  overflow: initial;
  height: initial;
}
.approve-search-box {
  position: relative;
  width: 100%;
  margin-bottom: -62px;
  background: #5065a6;
  border-radius: 20px;
  -webkit-transform: translateY(-62px);
          transform: translateY(-62px);
}
.approve-search-inner {
  padding: 1rem;
}
.approve-search-inner .ct-group {
  padding: 1rem;
  border-bottom: 0;
}
.approve-search-inner .ct-group label {
  color: white;
}
@media (min-width: 1200px) {
  .approve-search-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 1rem 2rem;
    margin: 0 -0.5rem;
  }
  .approve-search-inner .ct-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.75rem 0;
    margin: 0.5rem;
    width: calc(50% - 1rem) !important;
  }
  .approve-search-inner .ct-group label {
    white-space: nowrap;
  }
}
.approve-search-bottom {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
}
.approve-search-bottom button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 40px;
  min-width: 140px;
  margin: 5px;
  padding: 0;
  border-radius: 10px;
  border: 0;
  outline: none;
  font-size: 0.9rem;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .approve-search-bottom button {
    min-width: 200px;
  }
}
.approve-search-bottom button.btn-cancel {
  background: #3c4c7d;
  color: white;
}
.approve-search-bottom button.btn-cancel:after {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-left: 0.25rem;
  background: url(../images/search-icon-cancel.svg) no-repeat center center;
}
.approve-search-bottom button.btn-cancel:hover {
  background: #1a1a1a;
}
.approve-search-bottom button.btn-search {
  background: #6696e8;
  color: white;
}
.approve-search-bottom button.btn-search:after {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-left: 0.25rem;
  background: url(../images/search-icon-search.svg) no-repeat center center;
}
.approve-search-bottom button.btn-search:hover {
  background: #5689e2;
}
.approve-search-bottom button.btn-onlytxt, .approve-search-bottom button.btn-other {
  background: #7384b8;
  color: white;
}

.approve-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 1rem;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
}
.approve-result-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  border-bottom: 1px solid #e2e2e2;
}
.approve-result-title:before {
  content: "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin: 0 0.75rem 0 0;
  border-radius: 3px;
  background: #5065a6;
}
.approve-result-content {
  padding: 1rem;
}
.approve-result-table {
  width: 100%;
}
.approve-result-table .hide {
  font-size: 0rem;
}
.approve-result-table th, .approve-result-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid white;
  line-height: 1.5;
}
.approve-result-table th {
  background: #6696e8;
  color: white;
}
.approve-result-table tbody tr:nth-child(odd) td {
  background: #f0f4fd;
}
.approve-result-table input[type=radio], .approve-result-table input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.approve-result-table input[type=radio] + label, .approve-result-table input[type=checkbox] + label {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  line-height: 1.5;
  cursor: pointer;
}
.approve-result-table input[type=radio] + label:before, .approve-result-table input[type=radio] + label:after, .approve-result-table input[type=checkbox] + label:before, .approve-result-table input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  left: 0;
  top: -15px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  outline: 1px solid #e2e2e2;
}
.approve-result-table input[type=radio] + label:after, .approve-result-table input[type=checkbox] + label:after {
  left: 4px;
  top: -11px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  outline: none;
}
.approve-result-table input[type=radio]:checked + label:after, .approve-result-table input[type=checkbox]:checked + label:after {
  background: #33b5a1;
}