@import url('../css/reset.css');
@import url('../css/font-awesome.min.css');
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html {
  /*處理iPhone手機字體大小不一狀況 Prevent font scaling in landscape */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  margin: 0;
  padding: 0;
  font-family: '微軟正黑體', 'Microsoft JhengHei', 'Arial';
  font-size: 15px;
  background-color: #F5F5F5;
  /*overflow-y: scroll;
    強制移除水平scroll bar可以解決header放大空白問題，但是不友善
    overflow-x: hidden;*/
}
/*主要版型設定--------------------------------------------------------*/
.container {
  width: 100%;
  height: 100vh;
  max-height: calc( 100vh - 70px );
}
.header {
  background-color: #007D7D;
  width: 100%;
  height: 70px;
}
.header-wrap {
  position: relative;
  width: 100%;
  /* margin: 0 auto; */
  display: table;
}
img#logo {
  position: absolute;
  top: 0;
  left: 0;
}
.top-nav {
  /*position: absolute;
    right: 24px;
    width: 50%;*/
  /*height: 42px;*/
  height: 55px;
  color: white;
  padding-top: 15px;
  /*padding: 15px 0 13px 0;*/
  /*padding: 15px 0;
    margin: 0 30px 0 0;*/
  /*padding: 15px 24px 13px 0;*/
  text-align: right;
  background-color: #007d7d;
}
.top-nav .welcome {
  position: absolute;
  /*right: 85px;*/
  right: 110px;
  line-height: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.top-nav .logout {
  position: absolute;
  /*right: 38px;*/
  right: 63px;
  padding-top: 10px;
}
.top-nav .logout img {
  position: absolute;
  top: 6px;
}
.top-nav .logout a:link, .top-nav .logout a:visited {
  color: white;
  text-decoration: none;
}
.top-nav .logout a:hover {
  text-decoration: underline;
}
.content-wrap {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
  /* margin: 0 auto; */
}
.header-green {
  position: absolute;
  background-color: #007d7d;
  width: 100%;
  height: 70px;
  top: -70px;
  left: 0;
  z-index: -100;
}
/* nav {
  display: table-cell;
  width: 22.46093%; */
  /*
        總寬度240px;(23.4375%)
        總寬度216px;(21.09375%)
        總寬度230px;(22.46093%)
    */
  /* background-color: #FFF;
  padding: 0 6px 10px 18px;
} */

/* nav ul li {
  height: 38px;
  min-height: 38px;
} */
/* nav ul li a::after {
  content: '\f105';
  font-family: 'FontAwesome';
  float: right;
  margin-right: 12px;
  color: #ddd;
  font-weight: bolder;
} */

/* nav ul a:link, ul a:visited {
  background-position: left;
  background-position-x: 198px;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #007d7d;
  padding: 12px 0 10px 40px;
  display: block;
  border-bottom: 1px solid #E1E1E1;
  -moz-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
nav ul a:hover, nav ul li a.active {
  color: #E60112;
  background-color: #F5F5F5;
}
nav .menu-back a:link, nav .menu-back a:visited {
  text-decoration: none;
  color: #007d7d;
  padding: 10px 0 10px 40px;
  display: block;
  border-bottom: 0;
}
nav .menu-back a::after {
  content: '\f104';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -30px;
  color: #ddd;
  font-weight: bolder;
} */

nav .menu-back a:link, nav .menu-back a:visited {
  text-decoration: none;
  color: #007d7d;
  padding: 10px 0 10px 40px;
  /*padding: 10px 0 0 40px;*/
  display: block;
  border-bottom: 0;
  /*margin-top: 10px;*/
}
nav .menu-back a::after {
  content: '\f104';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -30px;
  color: #ddd;
  font-weight: bolder;
}

nav .menu-back a:hover {
  color: #E60112;
}
nav .menu-title {
    /*margin-top: 10px;*/
    background-color: #45a19a;
    color: white;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}
nav .menu-title .menu-title-text {
  display: inline-block;
  vertical-align: middle;
  padding-left: 6px;
}
/*menu【保戶服務】標題icon*/
nav #menu-ico-client {
  width: 38px;
  height: 38px;
  background: #007d7d url('../images/idxmenu.svg') no-repeat 0 0;
  display: inline-block;
  vertical-align: middle;
}
/*menu【線上作業】標題icon*/
nav #menu-ico-online {
  width: 38px;
  height: 38px;
  background: #007d7d url('../images/idxmenu.svg') no-repeat -76px 0;
  display: inline-block;
  vertical-align: middle;
}
/*menu【其他服務】標題icon*/
nav #menu-ico-other {
  width: 38px;
  height: 38px;
  background: #007d7d url('../images/idxmenu.svg') no-repeat -38px 0;
  display: inline-block;
  vertical-align: middle;
}
/*menu【投資型專區】標題icon*/
nav #menu-ico-invest {
  width: 38px;
  height: 38px;
  background: #007d7d url('../images/idxmenu.svg') no-repeat -114px 0;
  display: inline-block;
  vertical-align: middle;
}
/*按鈕隱藏menu*/
.menu-hide {
  position: relative;
  /*top: 118px;
    left: 0;*/
  z-index: 1;
}
.menu-hide button {
  /*依據menu-hide此div做position relative對照*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 56px;
  border: 1px solid #FF8B52;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 0 5px 5px 0;
  background-color: #FF8B52;
  outline: none;
  color: #FFF;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
}
/* .menu-hide button#btn-hidemenu {
  top: 45px;
} */
/* KM_按鈕位置調整 */
.menu-hide button#btn-hidemenu {
  top: -10px;
}
/*IE隱藏選單按鈕高度與Chrome不同，特別處理 IE10+ CSS styles here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .menu-hide button#btn-hidemenu {
    top: -10px;
  }
}
.main {
  position: relative;
  display: table-cell;
  width: auto; /*總寬度784px;(76.5625%)*/
  padding-top: 0;
  padding-right: 20px;
  padding-left: 27px;
  padding-bottom: 10px;
  margin-top: 0;
  height: 100%;
  overflow: hidden;
  /*用border-image的方式把陰影襯到左邊*/
  border-style: solid;
  border-color: transparent;
  background: url(../images/bg_shadow.png) repeat-y 0 0;
  /*使用border-image時的padding設定*/
  /*padding: 0 20px 10px 20px;
    border-width: 0 0 0 7px;
    -moz-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -webkit-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -o-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    border-image: url(../images/bg_shadow.png) 0 12 fill repeat;*/
}
.mainE {
  position: relative;
  display: table-cell;
  width: auto; /*總寬度784px;(76.5625%)*/
  padding: 0 20px 10px 27px;
  margin-top: 0;
  height: 100%;
  overflow: hidden;
  /*用border-image的方式把陰影襯到左邊*/
  border-style: solid;
  border-color: transparent;
  /*background: url(../images/bg_shadow.png) repeat-y 0 0;使用border-image時的padding設定*/
  /*padding: 0 20px 10px 20px;
    border-width: 0 0 0 7px;
    -moz-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -webkit-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -o-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    border-image: url(../images/bg_shadow.png) 0 12 fill repeat;*/
}
/* KM_內文區塊 */
.mainContent {
  position: relative;
  display: table-cell;
  width: 100%; /*總寬度784px;(76.5625%)*/
  padding-top: 0;
  padding-right: 20px;
  padding-left: 45px;
  text-align: left;
  margin-top: 0;
  overflow: hidden;
  /*用border-image的方式把陰影襯到左邊*/
  border-style: solid;
  border-color: transparent;
  background: url(../images/bg_shadow.png) repeat-y 0 0;
  /*使用border-image時的padding設定*/
  /*padding: 0 20px 10px 20px;
    border-width: 0 0 0 7px;
    -moz-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -webkit-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -o-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    border-image: url(../images/bg_shadow.png) 0 12 fill repeat;*/
}
    
/*用於沒有登入狀態的頁面，如申請、重設密碼*/
.main-simple {
  position: relative;
  /*display: table-cell;*/
  width: 730px;
  margin: 0 auto;
  padding: 20px;
  height: 100%;
  overflow: hidden;
}
.breadcrumb {
  font-size: 13px;
  display: inline-block;
  line-height: 13px;
  width: 71%;
  /*padding: 18px 0 6px 2px;*/
  padding: 20px 0 6px 2px;
  display: inline-block;
}
.breadcrumb .breadcrumb-home {
  background: url('../images/ico-home.svg') no-repeat 0 0;
  /*background: url('../images/ico-home.svg') no-repeat 0 -2px;*/
  /*padding: 0 4px 0 20px;*/
  padding: 0 0 0 20px;
}
.breadcrumb a:link, .breadcrumb a:visited {
  color: #393939;
  text-decoration: none;
  font-size: 13px;
  line-height: 13px;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
hr#breadcrumb-split {
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid #E1E1E1;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 0;
}
.home {
  /*參考main的position*/
  position: absolute;
  top: -1px;
  right: 30px;
}
.footer {
  background-color: #007d7d;
  width: 100%;
  min-width: 100%;
  height: 20px;
  margin: 0 auto;
}
.footer-wrap {
    width: 1000px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    clear: both;
}
.footer .line-wrap {
  width: 1000px;
  margin: 0 auto;
  display: inline-block;
  padding: 0;
}
.footer .line-wrap .line1 {
  display: inline-block;
  width: 73%;
  height: 20px;
  float: left;
  background-color: #007575;
  margin-bottom: 0px;
}
.footer .line-wrap .line2 {
  display: inline-block;
  width: 20%;
  height: 20px;
  float: left;
  background-color: #33928C;
}
.footer .line-wrap .line3 {
  display: inline-block;
  width: 7%;
  height: 20px;
  float: left;
  background-color: #529E99;
}
.footer .footer-text {
  clear: both;
  margin-top: 15px;
padding-bottom:20px;
  text-align: center;
}
.footer .footer-text a:link, .footer .footer-text a:visited {
  color: #007d7d;
  font-weight: bold;
}
.footer .footer-text a:hover {
  color: #E60112;
}





/*文字設定--------------------------------------------------------*/
/*首頁文字快速選單標題*/
.THMtitle {
  font-size: 50px;
  font-weight: bold;
  line-height: 100px;
}
/*內頁文字大標題*/
.ContentBTitle {
  font-size: 45px;
  font-weight: bold;
  line-height: 70px;
}
/*內頁文字單元標題*/
.ContentTitle {
  font-size: 25px;
  font-weight: bold;
  line-height: 40px;
}
/*單則文字訊息標題 / 區塊文字標題*/
.TitleText {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
}

.TitleText1 {
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
}
/*內容文字*/
.ContentText {
  font-size: 15px;
  line-height: 30px;
}
/*附註文字*/
.Note {
  font-size: 14px;
  line-height: 30px;
}
/*麵包屑文字*/
.Breadcrumb {
  font-size: 13px;
  line-height: 20px;
}







/*時間軸--------------------------------------------------------*/
.timeline-wrap {
  position: relative;
  width: 100%;
  height: 137px;
  display: inline-block;
}
.timeline-wrap a:link, .timeline-wrap a:visited {
  text-decoration: none;
}
/*時間軸線條*/
.timeline-wrap .line {
  content: '';
  position: absolute;
  top: 97px;
  width: 100%;
  height: 2px;
  background-color: #BEBEBE;
  z-index: -1;
}
/*時間軸左右按鈕*/
.timeline-wrap span.btn {
  display: inline-block;
  position: absolute;
  /*按鈕位置*/
  top: 81px;
  margin-top: -6px;
  width: 44px;
  height: 44px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  outline: none;
  background-color: #8ADEDE;
  color: white;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
/*按鈕中的的箭頭fontawesome文字*/
.timeline-wrap span.btn i {
  position: absolute;
  top: 15%;
  left: 35%;
}
.timeline-wrap span.btn:hover {
  background-color: #32B3B3;
}
.timeline-wrap span.btn#back {
  left: 0;
}
.timeline-wrap span.btn#forward {
  right: 0;
}
.timeline-wrap span.btn-disable {
  background-color: #BDBDBD;
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  cursor: not-allowed;
}
.timeline-wrap span.btn-disable:hover {
  background-color: #BDBDBD;
}
/*時間軸膠囊、日期點點、日期文字顯示區域------------------------------------------------*/
.timeline-wrap .timeline-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 87.75%;
  margin: 0 44px;
  overflow: hidden;
}
.timeline-wrap .timeline-content .nav-content {
  position: absolute;
  width: 9999px;
  left: 0;
  top: 0;
}
.timeline-wrap .timeline-content .nav-content .content-group {
  position: relative;
  display: inline-block;
  float: left;
  width: 64px;
  padding: 8px 0;
  text-align: center;
}
.timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap {
  /*日期點點位置*/
  margin-top: -10px;
}
.timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .text {
  font-size: 13px;
  color: #393939;
}
.timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .text-today {
  font-size: 13px;
  color: #007d7d;
}
.timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .dateknot {
  content: '';
  width: 8px;
  height: 8px;
  line-height: 8px;
  border: 2px solid #BEBEBE;
  display: block;
  text-align: center;
  margin: 0 auto 2px auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 13px;
  /*點點實心顏色*/
  background-color: #FFF;
}
.timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .dateknot-today {
  content: '';
  width: 8px;
  height: 8px;
  line-height: 8px;
  border: 2px solid #007d7d;
  display: block;
  text-align: center;
  margin: 0 auto 2px auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 13px;
  /*點點實心顏色*/
  background-color: #007d7d;
}
/*膠囊*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap {
  position: relative;
  width: 100%;
  /*調整膠囊是否對齊日期點點*/
  margin-left: 4px;
}
/*膠囊計數器*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-count {
  position: absolute;
  top: -50%;
  left: 60%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: red;
  color: #FFF;
  text-align: center;
  padding: 3px 7px;
  font-weight: bold;
  font-size: 12px;
}
/*膠囊計數器已讀*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-read {
  position: absolute;
  top: -50%;
  left: 60%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #B0B0B0;
  color: #FFF;
  text-align: center;
  padding: 3px 7px;
  font-weight: bold;
  font-size: 12px;
}
/*空的膠囊計數器*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-count-empty {
  position: absolute;
  top: -50%;
  left: 60%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: transparent;
  color: transparent;
  text-align: center;
  padding: 3px 7px;
  font-weight: bold;
  font-size: 12px;
}
/*膠囊文字*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-text {
  /*width: 46.7px;*/
  width: 60%;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  color: #FFF;
  text-align: center;
  padding: 5px;
  margin: 10px 4px 20px 4px;
  font-size: 12px;
}
/*空的膠囊*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-empty {
  background-color: transparent;
  color: transparent;
}
/*訊息膠囊*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-msg {
  background-color: #FF8B52;
}
/*進度膠囊*/
.timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-progress {
  background-color: #4EB7EB;
}
/*申請、重設密碼tab頁籤--------------------------------------------------------*/
.tabcheck-wrap {
  position: relative;
  margin: 20px 0 0 0;
}
.tabcheck {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 44px;
}
.tabcheck .tabcheck-btn {
  position: relative;
  display: table-cell;
  background-color: #FFF;
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
  color: #393939;
  border-radius: 6px 6px 0 0;
  border: 1px solid #BEBEBE;
  padding: 10px 6px;
  cursor: pointer;
}
.tabcheck .tabcheck-btn .checkbox-wrap {
  padding: 0;
}
.tabcheck .tabcheck-btn.bg-yellow {
  background-color: #FFF8D1;
}
.tabcheck-content, .personal-data-collect {
  background-color: white;
  border: 1px solid #BEBEBE;
  border-top: none;
}
.tab-agreement {
  background-color: #fff;
  border: 1px solid #BEBEBE;
  border-radius: 0 0 6px 6px;
  padding: 25px;
}
.tab-agreement hr.content-split {
  width: 100%;
  border: 0;
  height: 0;
  margin: 13px 0;
  /*用有透明感的線條視覺效果比較細*/
  border-top: 1px solid #DDD;
}
/*需要scroll bar的內容--------------------------------------------------------*/
.scroll-wrap {
  padding: 30px;
  background-color: #F3FFFF;
}
.scroll-content {
  overflow-y: scroll;
  padding-right: 10px;
  height: 300px;
}
/*帳戶頁籤--------------------------------------------------------*/
.tabaccount-wrap {
  position: relative;
  margin: 20px 0 0 0;
}
.tabaccount {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 48px;
}
.tabaccount .tabaccount-btn {
  position: relative;
  display: table-cell;
  background-color: #BEBEBE;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
}
.tabaccount .tabaccount-btn span {
  text-decoration: none;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
  vertical-align: middle;
}
.tabaccount .tabaccount-split {
  display: table-cell;
  width: 6px;
}
.tabaccount .tabaccount-btn.active {
    background-color: #45a19a;
}
/*做出callout的向下的三角形箭頭*/
.tabaccount .tabaccount-btn.active::after {
  position: absolute;
  height: 0;
  width: 0;
  content: '';
  bottom: -35%;
  left: 45.9%;
  border: 10px solid transparent;
  border-top-color: #45a19a;
  z-index: 0;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /*for IE10*/
  .tabaccount .tabaccount-btn.active .ie-arrow1 {
    position: absolute;
    height: 0;
    width: 0;
    content: '';
    bottom: -65%;
    left: 45.9%;
    border: 10px solid transparent;
    border-top-color: #4CA7A7;
    z-index: 0;
  }
  /*for IE10*/
  .tabaccount .tabaccount-btn.active .ie-arrow2 {
    position: absolute;
    height: 0;
    width: 0;
    content: '';
    bottom: -85%;
    left: 45.9%;
    border: 10px solid transparent;
    border-top-color: #4CA7A7;
    z-index: 0;
  }
}
.tabaccount .tabaccount-btn.active > * {
  opacity: 1;
}
.tabaccount-content {
  background-color: white;
  padding: 5px 12px 20px 12px;
  border-top: 8px solid #8DE1E1;
}
.tabaccount-content .tab-nav {
  display: inline-block;
  width: 59%;
  text-align: center;
}
/*.tabaccount-content .tab-nav a:link, .tabaccount-content .tab-nav a:visited {
    }*/
.tabaccount-content hr.content-split {
  width: 100%;
  border: 0;
  height: 0;
  margin: 13px 0;
  /*用有透明感的線條視覺效果比較細*/
  border-top: 1px solid #DDD;
}
.tabaccount-content ul {
  list-style: disc;
  margin: 30px 0 30px 30px;
  font-size: 15px;
  line-height: 26px;
}
.tabaccount-content ul li {}
/*tab【保障帳戶】icon--------------------------------------------------------*/
.tabaccount .tabaccount-safe {
  width: 26px;
  height: 26px;
  background: transparent url('../images/accounts.svg') no-repeat 0 0;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.5;
  /*控制icon與文字的間距*/
  margin-right: 5px;
}
/*tab【財富帳戶】icon--------------------------------------------------------*/
.tabaccount .tabaccount-wealth {
  width: 26px;
  height: 26px;
  background: transparent url('../images/accounts.svg') no-repeat -25px 0;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.5;
  /*控制icon與文字的間距*/
  margin-right: 5px;
}
/*tab【負債帳戶】icon--------------------------------------------------------*/
.tabaccount .tabaccount-debt {
  width: 26px;
  height: 26px;
  background: transparent url('../images/accounts.svg') no-repeat -53px 0;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.5;
  /*控制icon與文字的間距*/
  margin-right: 5px;
}
/*tab【保障帳戶】內容頁--------------------------------------------------------*/
.safe-wrap {
  width: 100%;
  padding-top: 10px;
}
.safe-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
.safe-wrap table tr td {
  margin: 0;
  padding: 0 0 15px 0;
  text-align: left;
  vertical-align: middle;
}
.safe-wrap table tr td a:link, .safe-wrap table tr td a:visited {
  text-decoration: none;
}
.safe-wrap .safe-group {
  display: inline-block;
}
.safe-wrap .safe-group #safe-icon1 {
  background: url('../images/benefits-color.svg') no-repeat 0 0;
  width: 72px;
  height: 72px;
  display: inline-block;
}
.safe-wrap .safe-group #safe-icon2 {
  background: url('../images/benefits-color.svg') no-repeat -72px 0;
  width: 72px;
  height: 72px;
  display: inline-block;
}
.safe-wrap .safe-group #safe-icon3 {
  background: url('../images/benefits-color.svg') no-repeat -144px 0;
  width: 72px;
  height: 72px;
  display: inline-block;
}
.safe-wrap .safe-group #safe-icon4 {
  background: url('../images/benefits-color.svg') no-repeat -216px 0;
  width: 72px;
  height: 72px;
  display: inline-block;
}
.safe-wrap .safe-group #safe-icon5 {
  background: url('../images/benefits-color.svg') no-repeat -288px 0;
  width: 72px;
  height: 72px;
  display: inline-block;
}
.safe-wrap .safe-group #safe-icon6 {
  background: url('../images/benefits-color.svg') no-repeat 0 -72px;
  width: 72px;
  height: 72px;
  display: inline-block;
}
.safe-wrap .safe-group .safe-text {
  float: right;
  clear: right;
  color: #393939;
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  padding: 8px 0 0 15px;
  line-height: 24px;
}
.safe-wrap .safe-group .safe-text .simple-text {
  margin: 0;
  padding: 0;
}
.safe-wrap .safe-detail {
  font-size: 100px;
  font-weight: bold;
  color: #8ADEDE;
}
.safe-wrap .safe-detail-text {
  font-size: 15px;
  font-weight: bold;
  color: #8ADEDE;
  padding-top: 20px;
}
/*tab【財富帳戶】內容頁--------------------------------------------------------*/
.wealth-wrap {
  width: 100%;
  padding-top: 10px;
  /*用來對div容器進行inline平均排列*/
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}
/*容器inline平均排列*/
.wealth-wrap .stretch {
  width: 100%;
  display: inline-block;
}
.wealth-wrap a:link, .wealth-wrap a:visited {
  color: #FFF;
  text-decoration: none;
}
/*大圓容器*/
.wealth-wrap .main-circle {
  display: inline-block;
  width: 100%;
}
.wealth-wrap .main-circle hr.circle-split {
  width: 80%;
  border: 0;
  height: 0;
  /*用有透明感的線條視覺效果比較細*/
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.wealth-wrap .main-circle .main-circle-group {
  width: 128px;
  margin: 0 22px;
  /*margin: 0;
            margin-left: calc((100% - 616px) / 4);
            margin-right: calc((100% - 616px) / 4);*/
  display: inline-block;
}
/*可借金額*/
.wealth-wrap .main-circle #wealth-circle-loan {
  float: left;
  display: table;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #226597;
}
.wealth-wrap .main-circle #wealth-circle-loan-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
/*保單紅利*/
.wealth-wrap .main-circle #wealth-circle-bonus {
  float: left;
  display: table;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #FD9394;
}
.wealth-wrap .main-circle #wealth-circle-bonus-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
/*投資型保單帳戶價值*/
.wealth-wrap .main-circle #wealth-circle-invest {
  float: left;
  display: table;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #1896BF;
}
.wealth-wrap .main-circle #wealth-circle-invest-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
/*利變/年金保單帳戶價值*/
.wealth-wrap .main-circle #wealth-circle-annuity {
  float: left;
  display: table;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #60BB97;
}
.wealth-wrap .main-circle #wealth-circle-annuity-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
/*小圓容器*/
.wealth-wrap .sub-circle {
  position: relative;
  display: inline-block;
  width: 100%;
  /*控制小圓容器重疊在大園容器之上的高度*/
  margin: -43px 0 0 0;
  /*margin: -28px 0 0 0;*/
}
.wealth-wrap .sub-circle .sub-circle-group {
  width: 128px;
  margin: 0 22px;
  display: inline-block;
}
.wealth-wrap .sub-circle a:link, .wealth-wrap .sub-circle a:visited {
  text-decoration: none;
}
.wealth-wrap .sub-circle .wealth-circle-left {
  float: left;
  display: table;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background: #FFB400;
}
.wealth-wrap .sub-circle .wealth-circle-left-text {
  display: table-cell;
  width: 100%;
  min-height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  line-height: 18px;
}
.wealth-wrap .sub-circle .wealth-circle-right {
  float: right;
  display: table;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background: #E60112;
}
.wealth-wrap .sub-circle .wealth-circle-right-text {
  display: table-cell;
  width: 100%;
  min-height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  line-height: 18px;
}
/*tab【負債帳戶】內容頁--------------------------------------------------------*/
.debt-wrap {
  width: 100%;
  padding-top: 10px;
  /*讓容器中的物件可以置中*/
  text-align: center;
  /*用來對div容器進行inline平均排列*/
  /*text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;*/
}
/*容器inline平均排列*/
/*.debt-wrap .stretch {
        width: 100%;
        display: inline-block;
    }*/
.debt-wrap a:link, .debt-wrap a:visited {
  color: #FFF;
  text-decoration: none;
}
/*大圓容器*/
.debt-wrap .main-circle {
  /*搭配父容器要text-align:center*/
  display: inline-block;
  width: 100%;
}
.debt-wrap .main-circle hr.circle-split {
  width: 80%;
  border: 0;
  height: 0;
  /*用有透明感的線條視覺效果比較細*/
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.debt-wrap .main-circle .main-circle-group {
  width: 300px;
  margin: 0 23px;
  display: inline-block;
}
/*借款本金底下之橢圓膠囊*/
.debt-wrap .main-circle #debt-circle-loan {
  float: left;
  display: table;
  width: 300px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #FD9394;
}
/*墊繳保費底下之橢圓膠囊*/
.debt-wrap .main-circle #debt-circle-pay {
  float: left;
  display: table;
  width: 300px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #1896BF;
}
/*橢圓膠囊左邊的圈圈*/
.debt-wrap .main-circle #debt-circle-left {
  float: left;
  display: table;
  width: 116px;
  height: 116px;
  -webkit-border-radius: 116px;
  -moz-border-radius: 116px;
  border-radius: 116px;
  margin: 10px;
}
.debt-wrap .main-circle #debt-circle-left-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
/*借款本金橢圓膠囊右邊的圈圈*/
.debt-wrap .main-circle #debt-circle-right {
  float: right;
  display: table;
  width: 116px;
  height: 116px;
  -webkit-border-radius: 116px;
  -moz-border-radius: 116px;
  border-radius: 116px;
  background: rgba(255, 255, 255, 0.25);
  margin: 10px;
}
.debt-wrap .main-circle #debt-circle-right-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
/*小圓容器*/
.debt-wrap .sub-circle {
  position: relative;
  display: inline-block;
  width: 100%;
  /*控制小圓容器重疊在大園容器之上的高度*/
  margin: -43px 0 0 0;
  /*margin: -28px 0 0 0;*/
}
.debt-wrap .sub-circle .sub-circle-group {
  width: 300px;
  margin: 0 23px;
  display: inline-block;
}
.debt-wrap .sub-circle a:link, .debt-wrap .sub-circle a:visited {
  text-decoration: none;
}
.debt-wrap .sub-circle .debt-circle {
  display: table;
  width: 50px;
  height: 50px;
  /*圈圈置中*/
  margin: 0 auto;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background: #E60112;
}
.debt-wrap .sub-circle .debt-circle-text {
  display: table-cell;
  width: 100%;
  min-height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  line-height: 18px;
}
/*tab【保單帳戶資產分析】內容頁--------------------------------------------------------*/
.asset-wrap {
  display: table;
  width: 100%;
  padding-top: 10px;
  /*讓容器中的物件可以置中*/
  text-align: center;
}
.asset-wrap .asset-content-wrap {
  /*搭配父容器要text-align:center*/
  display: inline-block;
}
.asset-wrap hr.circle-split {
  width: 80%;
  border: 0;
  height: 0;
  /*用有透明感的線條視覺效果比較細*/
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.asset-wrap #color-asset-value {
  float: left;
  display: table;
  margin: 0 15px 0 15px;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #FF8B52;
}
.asset-wrap #color-asset-value-text {
  display: table-cell;
  width: 100%;
  min-height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
.asset-wrap #color-asset-total {
  float: left;
  display: table;
  margin: 0 15px 0 15px;
  width: 128px;
  height: 128px;
  -webkit-border-radius: 128px;
  -moz-border-radius: 128px;
  border-radius: 128px;
  background: #5ACFAF;
}
.asset-wrap #color-asset-total-text {
  display: table-cell;
  width: 100%;
  min-height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
.asset-wrap #asset-dashboard {
  display: table;
  text-align: right;
}
/*tab【資產配置分析】內容頁--------------------------------------------------------*/
.arrange-wrap {
  display: table;
  width: 100%;
  padding-top: 10px;
  /*讓容器中的物件可以置中*/
  text-align: center;
}
.arrange-wrap .arrange-content-wrap {
  /*搭配父容器要text-align:center*/
  display: inline-block;
}
.arrange-wrap #arrange-dashboard {
  float: left;
  clear: left;
  display: table;
  padding: 12px 0 16px 24px;
  text-align: center;
}
.arrange-wrap .arrange-type {
  display: table;
  padding: 25px 0 0 45px;
}
.arrange-wrap .arrange-type dl dd {
  /*調整圈圈說明文字的位置*/
  display: table-cell;
  padding: 0 0 15px 17px;
  line-height: 19px;
  font-size: 13px;
  font-weight: bold;
}
/*【資產配置分析】定義的顏色圈圈*/
.arrange-wrap .arrange-type dl dt, .circle {
  display: table-cell;
  float: left;
  clear: left;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  width: 24px;
  height: 24px;
}
.color-A001 {
  background-color: #ED2E33;
}
.color-M005 {
  background-color: #FFC800;
}
.color-F398 {
  background-color: #FD9394;
}
.color-F408 {
  background-color: #226597;
}
.color-F1307 {
  background-color: #60BB97;
}
.color-F203 {
  background-color: #DDDDDD;
}
/*保單明細頁籤--------------------------------------------------------*/
.tablist-wrap {
  position: relative;
  margin: 20px 0 0 0;
}
.tablist {
  display: table;
  table-layout: fixed;
  /*整排tab的寬度*/
  width: 97.5%;
  padding: 10px 10px 0 10px;
  background-color: #CCF3F3;
}
.tablist .tablist-btn {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 34px;
  font-size: 13px;
  font-weight: bold;
  color: #393939;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
}
.tablist .tablist-btn-offsetfix {
  display: table-cell;
  cursor: default;
}
.tablist .tablist-btn span {
  text-decoration: none;
  vertical-align: middle;
}
/*撐開tabbtn是超連結功能的a*/
.tablist .tablist-btn.tablink a:link, .tablist .tablist-btn.tablink a:visited, .tablist .tablist-btn.tablink a:active, .tablist .tablist-btn.tablink a:hover {
  display: inline-block;
  width: 100%;
  line-height: 34px;
  color: #393939;
  text-decoration: none;
}
.tablist .tablist-btn a:link, .tablist .tablist-btn a:visited, .tablist .tablist-btn a:active, .tablist .tablist-btn a:hover {
  color: #393939;
  cursor: pointer;
  text-decoration: none;
}
.tablist .tablist-btn.active {
  background-color: #FFF;
  box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.25);
}
.tablist .tablist-btn.active span {
  color: #007d7d;
  border-bottom: 2px solid #CCF3F3;
  padding-bottom: 2px;
}
.tablist .tablist-btn.active > * {
  opacity: 1;
}
.tablist-content {
  background-color: white;
  padding: 5px 12px 20px 12px;
}


/*快捷圖示--------------------------------------------------------*/
.hotlink-wrap {
  display: table;
  width: 100%;
}
.hotlink-wrap .hotlink {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 122px;
  color: white;
}
.hotlink-wrap .hotlink-caption {
  /*參考hotlink的position*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 0;
  text-align: center;
  vertical-align: middle;
}
/*hotlink【進度查詢】icon*/
.hotlink-wrap #hotlink-search {
  background: #6CA9EA url('../images/quicklink_1.svg') no-repeat 50% 30%;
  background-size: 50%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-search:hover {
  background-size: 60%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-search-caption {
  background-color: #4D89CA;
}
/*hotlink【網路投保】icon*/
.hotlink-wrap #hotlink-insure {
  background: #6DC1C1 url('../images/quicklink_2.svg') no-repeat 50% 30%;
  background-size: 50%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-insure:hover {
  background-size: 60%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-insure-caption {
  background-color: #4D9292;
}
/*hotlink【繳費專區】icon*/
.hotlink-wrap #hotlink-fee {
  background: #67C7EA url('../images/quicklink_3.svg') no-repeat 50% 30%;
  background-size: 28%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-fee:hover {
  background-size: 35%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-fee-caption {
  background-color: #429EBF;
}
/*hotlink【加值服務】icon*/
.hotlink-wrap #hotlink-extra {
  background: #5ACFAF url('../images/quicklink_4.svg') no-repeat 50% 30%;
  background-size: 37%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-extra:hover {
  background-size: 44%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-extra-caption {
  background-color: #2CA282;
}
/*hotlink【保單借款】icon*/
.hotlink-wrap #hotlink-loan {
  background: url('../images/money-pig.jpg') no-repeat -15px -3px;
  /*background-size: contain;*/
  background-size: 100%;
  background-color: #FFF;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-loan:hover {
  /*background-size: 120%;*/
  background-size: 110%;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hotlink-wrap #hotlink-loan-caption {
  background-color: #C73636;
}
/*放在div容器之間，用於平均撐開物件*/
.hotlink-wrap .stretch {
  display: table-cell;
  max-width: 100%;
  width: 10%;
  /*display: table-cell;
        max-width: 5px;
        width: 5px;*/
}
/*清單式表格--------------------------------------------------------*/
.table-list-wrap {
  width: 100%;
}
table.table-list {
  /*table-layout: fixed;*/
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background-color: #FFF;
  line-height: 18px;
}
table.table-list thead tr th {
  border: none;
  color: #007d7d;
  border-bottom: 3px solid #4CA7A7;
  background-color: #F5F5F5;
  padding: 12px 5px 7px 5px;
  font-weight: bold;
  vertical-align: middle;
}
table.table-list tbody:nth-child(2n+1) {
  background-color: #F4FFFF;
}
table.table-list tbody tr.tr-emptytop td {
  /*td中的bg-color會影響tbody:hover的bg-color效果，不設定*/
  border: 0;
  height: 4px;
}
table.table-list tbody tr.tr-emptybtm td {
  /*td中的bg-color會影響tbody:hover的bg-color效果，不設定*/
  border: 0;
  border-bottom: 1px solid #DCDCDC;
  height: 4px;
}
table.table-list tbody tr.tr-content td {
  border: 0;
  border-left: 1px solid #F1F1F1;
  border-right: 1px solid #F1F1F1;
  padding: 5px 10px;
  vertical-align: middle;
  line-height: 16px;
}
table.table-list tbody tr.tr-content td:first-child {
  border-left: 0;
}
table.table-list tbody tr.tr-content td:last-child {
  border-right: 0;
  padding-right: 14px;
  position: relative;
}
table.table-list tbody tr.tr-content td:last-child::after {
  content: '\f105';
  font-family: 'FontAwesome';
  position: absolute;
  top: 20%;
  right: 3%;
  /*float: right;
                margin-right: 5px;
                margin-right: -10px;*/
  color: #FFF;
  font-weight: bolder;
}
table.table-list tbody:hover {
  background-color: #CCF3F3;
  cursor: pointer;
}
table.table-list tbody.no-arrow tr td:last-child::after {
  content: '';
}
table.table-list tbody.no-arrow:hover {
  background-color: #FFF;
  cursor: default;
}
/*表單式表格--------------------------------------------------------*/
.table-form-wrap {
  width: 100%;
  text-align: left;
}
/* table.table-form {
  width: 100%; */
  /*table-layout: fixed;*/
  /* table-layout: auto;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  background-color: #FFF;
} */
/* KM_文字置左+文字尺寸 */
table.table-form {
  width: 100%;
  /*table-layout: fixed;*/
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  line-height: 18px;
  background-color: #FFF;
}

table.table-form thead tr th {
  border: none;
  color: #FFF;
  background-color: #4CA7A7;
  padding: 9px 0;
  /*font-weight: bold;*/
  vertical-align: middle;
}
/*奇數列底色顯示*/
table.table-form tbody:nth-child(2n+1) {
  background-color: #F4FFFF;
}
table.table-form tbody tr.tr-emptytop td, table.table-form tfoot tr.tr-emptytop td {
  /*td中的bg-color會影響tbody:hover的bg-color效果，不設定*/
  border: 0;
  height: 4px;
}
table.table-form tbody tr.tr-emptytop:first-child, table.table-form tfoot tr.tr-emptytop:first-child {
  border-top: 1px solid #DDDDDD;
}
table.table-form tbody tr.tr-emptybtm td, table.table-form tfoot tr.tr-emptybtm td {
  /*td中的bg-color會影響tbody:hover的bg-color效果，不設定*/
  border: 0;
  border-bottom: 1px solid #DDDDDD;
  height: 6px;
}
/* table.table-form tbody tr.tr-content td {
  border: 0;
  border-left: 1px solid #F1F1F1;
  border-right: 1px solid #F1F1F1; */
  /*padding: 5px 10px;*/
  /* padding: 5px 9px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 16px;
} */

/* KM_取消表格右側border+文字尺寸+padding */
table.table-form tbody tr.tr-content td {
  border: 0;
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 16px;
}

table.table-form tbody tr.tr-content td.td-unitvalue {
  color: #E60112;
  text-align: right;
  vertical-align: middle;
  word-break: break-all;
}
table.table-form tfoot tr.tr-content td {
  border: 0;
  border-left: 1px solid #F1F1F1;
  border-right: 1px solid #F1F1F1;
  padding: 5px 10px;
  vertical-align: middle;
  font-size: 15px;
  font-weight: bold;
  line-height: 16px;
}
table.table-form tbody tr.tr-content td:first-child, table.table-form tfoot tr.tr-content td:first-child {
  border-left: 0;
}
table.table-form tbody tr.tr-content td:last-child, table.table-form tfoot tr.tr-content td:last-child {
  border-right: 0;
}
/*資產配置分析顯示/隱藏的資料列*/
table.table-form tbody tr.tr-toggle td {
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  background-color: #CCF3F3;
  text-align: left;
  vertical-align: middle;
  /*padding-left: 20px;*/
  padding: 13px 10px;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* table.table-form a.row-toggle:link, table.table-form a.row-toggle:visited {
  display: inline-block;
  padding: 3px 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #8ADEDE;
  background-color: #F5F5F5;
  color: #007d7d;
  text-decoration: none;
} */
/* KM_+-符號設定 */
table.table-form a.row-toggle:link, table.table-form a.row-toggle:visited {
  display: inline-block;
  padding: 3px 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  /* border-radius: 3px;
  border: 1px solid #8ADEDE;
  background-color: #F5F5F5; */
  color: #007d7d;
  text-decoration: none;
}

/*沒有上下間隔的一般表單式表格*/
table.table-form tbody tr.tr-normal th {
  border: none;
  border-bottom: 1px solid #DDD;
  color: #FFF;
  background-color: #4CA7A7;
  padding: 9px 0;
  vertical-align: middle;
}
table.table-form tbody tr.tr-normal td {
  border: 0;
  border-bottom: 1px solid #DDD;
  padding: 5px 10px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 16px;
}
/*理賠紀錄明細資料表*/
/* .table-detail-wrap {
  padding: 13px 10px;
  background-color: #CCF3F3;
} */
/* KM_表格背景色+padding調整 */
/*
.table-detail-wrap {
  padding: 25px 25px 25px 25px;
  background-color: #FFF;
}
*/
/* 更新css-調整padding間距 & 移除背景色 */
.table-detail-wrap {
  padding: 25px 38px 70px 38px;
}


/* KM_表格文字p間距設定*/
.table-detail-wrap p {
  margin-bottom: 10px;
}
table.table-form tbody:nth-child(2n+1) {
  background-color: #F4FFFF;
}
.table-detail-wrap .table-form-detail-top, .table-detail-wrap .table-form-detail-bottom {
  width: 100%;
  font-size: 12px;
  color: #393939;
  border-collapse: collapse;
  text-align: left;
  vertical-align: middle;
  /*padding: 10px;*/
  background-color: #FFF;
  border: none;
}
.table-detail-wrap .table-form-detail-top tr th {
  background-color: #8ADEDE;
  /*padding: 4px 0;*/
  padding: 5px 0;
  text-align: center;
  vertical-align: middle;
}
.table-detail-wrap .table-form-detail-top tr td {
   text-align: left;
}
/* KM_文字連結設定 */
.table-detail-wrap .table-form-detail-top tr td a:link, .table-detail-wrap .table-form-detail-top tr td a:visited{
  text-decoration: none;
  color: #393939;
}
.table-detail-wrap .table-form-detail-top tr td a:hover {
  text-decoration: underline;
}

.table-detail-wrap .table-form-detail-bottom tr th {
  background-color: #FFF8D1;
  /*padding: 4px 0;*/
  padding: 5px 0;
  text-align: center;
  vertical-align: middle;
}
/* .table-detail-wrap .table-form-detail-top tr:nth-child(odd) td, .table-detail-wrap .table-form-detail-bottom tr:nth-child(odd) td {
  background-color: #F2FBFB; */
  /*padding: 4px 0;*/
  /* padding: 5px 0;
  text-align: center;
  vertical-align: middle;
}
.table-detail-wrap .table-form-detail-top tr td {
  border-bottom: 1px solid #CCF3F3; */
  /*padding: 4px 0;*/
  /* padding: 5px 0;
  text-align: center;
  vertical-align: middle;
} */

/* KM_表格文字置左 */
.table-detail-wrap .table-form-detail-top tr:nth-child(odd) td, .table-detail-wrap .table-form-detail-bottom tr:nth-child(odd) td {
  background-color: #F2FBFB;
  /*padding: 4px 0;*/
  padding: 5px 15px;
  text-align: left;
  vertical-align: middle;
}
.table-detail-wrap .table-form-detail-top tr td {
  border-bottom: 1px solid #CCF3F3;
  /*padding: 4px 0;*/
  padding: 5px 15px;
  text-align: left;
  vertical-align: middle;
}
.table-detail-wrap .table-form-detail-bottom tr td {
  /*padding: 4px 0;*/
  padding: 5px 0;
  text-align: center;
  vertical-align: middle;
}
/*投資組合內容展開/收合容器*/
.expand-wrap {
  padding: 10px;
  font-size: 13px;
}
.expand-wrap .expand-title {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  /*padding-bottom: 10px;*/
}
.expand-wrap .expand-title .toggler {
  cursor: pointer;
}
.expand-wrap .expand-title .expand-toggler {
  float: right;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
}
.expand-wrap .expand-title .expand-toggler i {
  display: inline-block;
  padding: 5px 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #8ADEDE;
  background-color: #F5F5F5;
  color: #007d7d;
  text-decoration: none;
  margin-top: 3px;
}
.expand-wrap .expand-detail {
  clear: right;
}
.expand-wrap .expand-text {
  /*與i的字型大小相同，文字可垂直置中*/
  line-height: 25px;
  /*float: left;*/
  /*display:block;*/
  /*width: 80%;*/
  /*padding-bottom: 5px;*/
}
/*聯絡我們各項諮詢CheckBox*/
.table-contactus-wrap {
  width: 100%;
}
table.table-contactus {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  line-height: 18px;
  background-color: #FFF;
}
table.table-contactus tr th {
  border: none;
  color: #FFF;
  background-color: #4CA7A7;
  padding: 9px 10px;
  vertical-align: middle;
  font-size: 13px;
  text-align: left;
}
table.table-contactus tr td {
  border: 0;
  padding: 12px 10px;
  vertical-align: middle;
  font-size: 15px;
  line-height: 16px;
}
/*會員表格*/
.table-simple-wrap {
  /*width: 100%;*/
}
.table-simple-wrap .alert {
  position: absolute;
  z-index: 1;
  width: 23px;
  height: 23px;
  right: 12px;
  top: 9px;
  background: url(../images/form_alert.svg) no-repeat;
}
.table-simple-wrap hr.content-split {
  width: 100%;
  border: 0;
  height: 0;
  margin: 13px 0;
  /*用有透明感的線條視覺效果比較細*/
  border-top: 1px solid #DDD;
}
.table-simple-wrap.bordered {
  border: 1px solid #BEBEBE;
  border-radius: 6px;
  background-color: #FFF;
  padding: 20px 10px;
}
.table-simple-wrap table.table-simple {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  text-align: center;
  font-size: 15px;
  line-height: 18px;
  background-color: #FFF;
  position: relative;
}
/* KM_search框調整 */
.table-simple {
  width:85%; 
  margin: 0 16px;
}
.table-simple-wrap table.table-simple tbody tr th {
  border: none;
  padding: 6px 3px;
  text-align: right;
  vertical-align: middle;
}
.table-simple-wrap table.table-simple tbody tr td {
  border: none;
  padding: 6px 3px;
  text-align: left;
  vertical-align: middle;
  /*聯絡我們表格td需要當作.alert圖示顯示的參照位置*/
  position: relative;
}
.table-simple-wrap table.table-simple a.reset-code:link, .table-simple-wrap table.table-simple a.reset-code:visited {
  padding: 0 10px;
  color: #007878;
  font-size: 13px;
}
/*.table-simple-wrap table.table-simple a.reset-code:hover {
            color: #393939;
        }*/
/*放置繳別變更table的容器--------------------------------------------------------*/
.table-split-wrap {}
.table-split-wrap .table-split {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  text-align: center;
  font-size: 15px;
  line-height: 18px;
  background-color: #FFF;
}
.table-split-wrap .table-split tbody tr td {
  padding-left: 30px;
}
.table-split-wrap .table-split tbody tr td:first-child {
  border-right: 1px solid #D8D8D8;
}
.table-split-wrap .table-split tfoot tr td {
  border-bottom: 1px solid #D8D8D8;
}
/*放置契約條款內容--------------------------------------------------------*/
.table-text-wrap {
  width: 100%;
}
.table-text-wrap .table-text {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 13px;
  color: #393939;
}
.table-text-wrap .table-text tr td {
  border: none;
  /*padding: 10px 6px 20px 6px;*/
  padding: 4px 0;
  text-align: left;
  vertical-align: top;
  line-height: 22px;
  background-color: #F3FFFF;
}
.table-text-wrap .table-text tr td p {
  padding: 2px 0;
  line-height: 22px;
}
/*一般阿拉伯數字的項目*/
.table-text-wrap .table-text tr td ol {
  margin-left: 18px;
  /*margin-left: 13px;*/
}
.table-text-wrap .table-text tr td ol > li {
  list-style-type: decimal;
  padding: 2px 0;
  line-height: 22px;
}
/*阿拉伯數字有小括號"()"的項目*/
.table-text-wrap .table-text tr td ol.parentheses {
  counter-reset: list;
  margin-left: 0;
}
.table-text-wrap .table-text tr td ol.parentheses > li {
  list-style: none;
  padding: 2px 0;
  line-height: 22px;
}
.table-text-wrap .table-text tr td ol.parentheses > li::before {
  content: "("counter(list) ") ";
  counter-increment: list;
  color: #E60112;
}
/*放置表單按鈕的資料列--------------------------------------------------------*/
table.table-row {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
  /*margin-bottom: 30px;*/
  line-height: 18px;
  background-color: transparent;
}
table.table-row tbody tr.tr-form-row td {
  padding: 20px 4px 0 4px;
  background-color: transparent;
  text-align: left;
  vertical-align: middle;
}
table.table-row tbody tr.tr-form-row td.total {
  padding-bottom: 7px;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid #007d7d;
}
table.table-row tbody tr.tr-form-row td.total-amt {
  padding-bottom: 7px;
  text-align: right;
  vertical-align: bottom;
  border-bottom: 2px solid #007d7d;
}
/*理賠服務項目清單--------------------------------------------------------*/
.claim-list-wrap {
  width: 100%;
  display: inline-block;
}
.claim-list-wrap ol {
  /*margin: 10px 24px;*/
  margin: 10px 0 10px 24px;
}
.claim-list-wrap ol > li {
  list-style-type: decimal;
  padding: 4px 0 4px 10px;
  font-size: 13px;
  line-height: 18px;
  /*border-bottom: 1px solid #DBDBDB;*/
}
/*特殊星號註記*/
.claim-list-wrap ol > li .list-note {
  margin-left: 0;
  padding-left: 0;
}
.claim-list-wrap ol > li .list-note::before {
  content: '※　 ';
  margin-left: -28px;
}
/*項目數字有括號的樣式*/
.claim-list-wrap ol > li ol.parentheses {
  counter-reset: para-listnumber;
  margin-left: 0;
}
.claim-list-wrap ol > li ol.parentheses > li {
  list-style: none;
  padding-left: 0;
}
.claim-list-wrap ol > li ol.parentheses > li::before {
  content: "("counter(para-listnumber) ").　";
  counter-increment: para-listnumber;
  vertical-align: top;
}
.claim-list-wrap ol > li ol.parentheses > li .text {
  display: inline-block;
  width: 94%;
}
/*表單輸入項目--------------------------------------------------------*/
/*表單按鈕--------------------------------------------------------*/
input[type=button].btnform-submit {
  display: inline-block;
  width: 100%;
  /*min-width: 20%;*/
  min-width: 120px;
  padding: 12px 0;
  margin: 5px 0% 5px;
  border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: 0;
  background: linear-gradient(180deg, #F5515F 0%, #9F041B 100%);
  font-size: 16px;
  color: #FFF;
  cursor: pointer;
}
input[type=button].btnform-submit:hover {
  background: linear-gradient(180deg, #F5515F 10%, #F5515F 10%);
}
input[type=button].btnform-enter {
  display: inline-block;
  width: 100%;
  /*min-width: 20%;*/
  min-width: 120px;
  padding: 12px 0;
  margin: 5px 0% 5px;
  border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: 0;
  /*background: linear-gradient(180deg, #F5515F 0%, #9F041B 100%);*/
  background: linear-gradient(180deg, #4CA7A7 0%, #007d7d 100%);
  font-size: 16px;
  color: #FFF;
  cursor: pointer;
}
input[type=button].btnform-enter:hover {
  background: linear-gradient(180deg, #46A4A4 10%, #46A4A4 10%);
}
/*有icon的button*/
.btn-group {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}
.btn-group button.btnicon {
  position: relative;
  background: linear-gradient(180deg, #4CA7A7 0%, #007d7d 100%);
  display: inline-block;
  border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 15px;
  color: #FFF;
  width: 100%;
  min-width: 120px;
  margin: 5px 0% 5px;
  padding: 14px 0 14px 13%;
  text-align: left;
  outline: none;
  cursor: pointer;
}
.btn-group button.btnicon:hover {
  background: linear-gradient(180deg, #46A4A4 10%, #46A4A4 10%);
}
.btn-group button.btnicon.arrow-r::after {
  content: '';
  background: url(../images/btn-arrow-r.svg) no-repeat 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  /*box-sizing: border-box;*/
  background-color: rgba(0, 0, 0, 0.1);
  width: 48px;
  height: 100%;
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.btn-group button.btnicon.download::after {
  content: '';
  background: url(../images/btn-dowload.svg) no-repeat 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  /*box-sizing: border-box;*/
  background-color: rgba(0, 0, 0, 0.1);
  width: 48px;
  height: 100%;
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
input[type=button].btnform-cancel, input[type=button].btnform-previous {
  display: inline-block;
  width: 100%;
  /*min-width: 20%;*/
  min-width: 120px;
  padding: 12px 0;
  margin: 5px 0% 5px;
  border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: 0;
  /*background-color: #848484;*/
  background: linear-gradient(180deg, #848484 0%, #848484 0%);
  font-size: 16px;
  color: #FFF;
  cursor: pointer;
}
input[type=button].btnform-insert, input[type=button].btnform-delete, input[type=button].btnform-deleteall, input[type=button].popup-ok {
  display: inline-block;
  width: 100%;
  /*min-width: 20%;*/
  min-width: 120px;
  /*padding: 5px 2px;*/
  padding: 8px 2px;
  border: 1px solid #BEBEBE;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: 0;
  /*background-color: #F5F5F5;*/
  background: linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 0%);
  font-size: 15px;
  line-height: 15px;
  color: #007d7d;
  cursor: pointer;
}
input[type=button].popup-cancel {
  display: inline-block;
  width: 100%;
  /*min-width: 20%;*/
  min-width: 120px;
  padding: 5px 2px;
  border: 0;
  outline: 0;
  background-color: transparent;
  font-size: 15px;
  line-height: 15px;
  color: #007d7d;
  cursor: pointer;
}
input[type=button].btnform-insert:hover, input[type=button].btnform-delete:hover, input[type=button].btnform-deleteall:hover, input[type=button].popup-ok:hover {
  background-color: #E9E9E9;
}
/*電子保單下載按鈕----------------------------------------------------*/
input[type=button].btnform-sign-download {
  border: none;
  background-color: transparent;
  background: url(../images/btn-dowload.svg) no-repeat 100% 50%;
  padding: 8px 24px 8px 2px;
  color: #E60112;
  font-size: 13px;
  line-height: 13px;
  text-align: right;
  cursor: pointer;
}
/*表單輸入方塊--------------------------------------------------------*/
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea.txtform-textarea {
  width: 100%;
  /*控制項在td中滿版*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #4CA7A7;
  /*color: #4CA7A7;*/
  /*font-size: 13px;*/
  color: #393939;
  font-size: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  /*padding: 6px 8px;*/
  /*padding: 2px 4px;*/
  padding: 2px 25px 2px 9px;
  height: 32px;
}
textarea.txtform-textarea {
  text-align: left;
  padding: 4px;
  resize: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
input.txtform-text {
  text-align: left;
}
input.txtform-value {
  text-align: right;
}
input.border-gray, textarea.txtform-textarea {
  border: 1px solid #DDD;
}
input[type=number].confirm-value {
  border: 1px solid #DBDBDC;
  color: #393939;
}
/*各瀏覽器設定placeholder文字顏色*/
input[type=text].txtform-text::-webkit-input-placeholder, input[type=email].txtform-text::-webkit-input-placeholder, input[type=tel].txtform-text::-webkit-input-placeholder, input[type=password].txtform-text::-webkit-input-placeholder, input[type=number].txtform-text::-webkit-input-placeholder, input[type=number].txtform-value::-webkit-input-placeholder, input[type=number].confirm-value::-webkit-input-placeholder, .combobox-group input[type=number].combobox::-webkit-input-placeholder, .combobox-group input[type=text].combobox::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #848484;
}
input[type=text].txtform-text::-moz-placeholder, input[type=email].txtform-text::-moz-placeholder, input[type=tel].txtform-text::-moz-placeholder, input[type=password].txtform-text::-moz-placeholder, input[type=number].txtform-text::-moz-placeholder, input[type=number].txtform-value::-moz-placeholder, input[type=number].confirm-value::-moz-placeholder, .combobox-group input[type=number].combobox::-moz-placeholder, .combobox-group input[type=text].combobox::-moz-placeholder {
  /* Firefox 19+ */
  color: #848484;
}
input[type=text].txtform-text:-ms-input-placeholder, input[type=email].txtform-text:-ms-input-placeholder, input[type=tel].txtform-text:-ms-input-placeholder, input[type=password].txtform-text:-ms-input-placeholder, input[type=number].txtform-text:-ms-input-placeholder, input[type=number].txtform-value:-ms-input-placeholder, input[type=number].confirm-value:-ms-input-placeholder, .combobox-group input[type=number].combobox:-ms-input-placeholder, .combobox-group input[type=text].combobox:-ms-input-placeholder {
  /* IE 10+ */
  color: #848484;
}
input[type=text].txtform-text:-moz-placeholder, input[type=email].txtform-text:-moz-placeholder, input[type=tel].txtform-text:-moz-placeholder, input[type=password].txtform-text:-moz-placeholder, input[type=number].txtform-value:-moz-placeholder, input[type=number].confirm-value:-moz-placeholder, .combobox-group input[type=number].combobox:-moz-placeholder, .combobox-group input[type=text].combobox:-moz-placeholder {
  /* Firefox 18- */
  color: #848484;
}
/*表單Radio Button--------------------------------------------------------*/
.radiobutton-wrap {
  position: relative;
}
.radiobutton-wrap input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
  content: '';
  width: 24px;
  height: 24px;
}
.radiobutton-wrap input[type=radio] + label {
  display: inline-block;
  background: url('../images/radiooff.svg') no-repeat 0 -4px;
  background-size: 32px 32px;
  padding-top: 5px;
  padding-left: 30px;
  padding-bottom: 6px;
  cursor: pointer;
  /*font-size: 13px;
            line-height: 13px;*/
  font-size: 15px;
  line-height: 15px;
}
.radiobutton-wrap input[type=radio]:checked + label {
  display: inline-block;
  background: url('../images/radioon.svg') no-repeat 0 -4px;
  background-size: 32px 32px;
  padding-top: 5px;
  padding-left: 30px;
  padding-bottom: 6px;
  cursor: pointer;
  /*font-size: 13px;
            line-height: 13px;*/
  font-size: 15px;
  line-height: 15px;
}
/*簡易式表格--------------------------------------------------------*/
/*【保單借款總覽】--------------------------------------------------------*/
.loan-policy-wrap {
  width: 100%;
  display: table;
  margin: 0 auto;
}
.loan-policy-wrap div {
  display: block;
  padding: 8px 0 6px 0;
  line-height: 22px;
}
.loan-policy-wrap .loan-policy-dashboard {
  float: left;
  clear: left;
  display: table;
  padding-left: 38px;
  padding-top: 40px;
}
.loan-policy-wrap .overview-wrap {
  display: table;
  width: 45%;
  padding-left: 70px;
}
.loan-policy-wrap .overview-wrap hr {
  border: 0;
  height: 0;
  border-top: 1px solid #D8D8D8;
}
.loan-policy-wrap .overview-wrap .circle {
  padding: 0;
  margin: 0;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  border-radius: 22px;
  width: 22px;
  height: 22px;
}
/*表單資料變更一覽表格--------------------------------------------------------*/
.table-overview-wrap {
  padding-top: 30px;
}
.table-overview {
  width: 100%;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
}
.table-overview thead tr td {
  font-size: 13px;
  background-color: #CCF3F3;
  color: #007d7d;
  padding: 6px 10px;
}
.table-overview tbody tr {
  background-color: #FFF;
}
.table-overview tbody tr:nth-child(even) {
  background-color: #F4FFFF;
}
.table-overview tbody tr td {
  /*background-color: #FFF;*/
  padding-left: 6px;
  font-size: 15px;
  color: #393939;
}
/*.table-overview tbody tr td a:link, .table-overview tbody td a:visited {*/
.table-overview tbody tr td span {
  color: #393939;
  text-decoration: none;
  cursor: pointer;
}
/*.table-overview tbody tr td a:hover {*/
.table-overview tbody tr td span:hover {
  color: #007d7d;
  text-decoration: underline;
  cursor: pointer;
}
.table-overview tbody tr td.item {
  padding: 14px 0 10px 20px;
  padding-left: 20px;
}
.table-overview tbody tr td.item i {
  background-color: #FFF;
  border: 1px solid #DDD;
  color: #DDD;
  width: 24px;
  height: 24px;
  line-height: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
/*備註區塊--------------------------------------------------------*/
.remark-outer-wrap {
  background-color: #FFF;
  padding: 15px 12px;
}
.remark-wrap {
  background-color: #F5F5F5;
  padding: 12px;
  font-size: 13px;
}
.remark-wrap p {
  padding-bottom: 10px;
  border-bottom: 1px solid #BEBEBE;
  font-size: 13px;
}
.remark-wrap .remark-items ol {
  list-style-type: decimal;
  margin: 0 0 0 15px;
  padding: 10px 0 0 0;
  font-size: 13px;
}
.remark-wrap .remark-items ol li {
  padding-left: 15px;
  line-height: 20px;
}
/*第二階層清單列表 dl dt dd (數字自訂) */
.remark-wrap .remark-items ol li > dl {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.remark-wrap .remark-items ol li > dl dt {
  float: left;
  width: 5%;
  margin: 0;
  padding: 0;
}
.remark-wrap .remark-items ol li > dl dd {
  float: left;
  width: 95%;
  margin: 0;
  padding: 0;
}
.remark-wrap .remark-items ol li > dl dd::after {
  clear: left;
}
/*表單步驟進度--------------------------------------------------------*/
.progressbar-wrap {
  width: 100%;
  display: table;
  margin: 30px 0 50px 0;
  font-family: 'Arial';
}
.progressbar-wrap .progressbar-group {
  position: relative;
  /*每個group以表格欄位方式排列顯示，每個group參照自己所屬的position位置*/
  display: table-cell;
}
/*步驟圓形標題 - 預設(未完成)步驟*/
.progressbar-wrap .progressbar-group .title {
  position: absolute;
  left: -4px;
  top: -9px;
  width: 40px;
  line-height: 40px;
  border: 2px solid #FFF;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  background-color: #848484;
  color: #FFF;
  font-size: 24px;
}
/*步驟圓形標題 - 已完成步驟*/
.progressbar-wrap .progressbar-group .done {
  background-color: #00a498;
}
/*步驟圓形標題 - 目前的步驟*/
.progressbar-wrap .progressbar-group .active {
  background-color: #FF7531;
}
/*步驟說明文字*/
.progressbar-wrap .progressbar-group .text {
  position: absolute;
  top: 0;
  left: 45px;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  color: #FFF;
}
/*步驟進度值包覆容器*/
.progressbar-wrap .progressbar-group .progress {
  background-color: #BEBEBE;
  color: #333333;
  position: absolute;
  left: 0;
  /*高度垂直置中*/
  top: 50%;
  /*寬度符合自己的group容器*/
  width: 100%;
  height: 24px;
  z-index: -1;
}
/*步驟進度值 - 預設(未完成)步驟*/
.progressbar-wrap .progressbar-group .progress .value {
  /*無進度動畫，不需要寬度*/
  /*width: 0;*/
  height: 24px;
  background-color: #BDBDBD;
}
/*步驟進度值 - 預設(未完成)步驟*/
.progressbar-wrap .progressbar-group .progress .done {
  /*無進度動畫，不需要寬度*/
  /*width: 0;*/
  height: 24px;
  background-color: #45A19A;
}
/*步驟進度值 - 預設(未完成)步驟*/
.progressbar-wrap .progressbar-group .progress .active {
  /*顯示進度動畫，寬度設定為0*/
  width: 0;
  height: 24px;
  background-color: #FF8B52;
}
/*加值服務--------------------------------------------------------*/
.extra-wrap {
  background-color: #FFF;
  padding: 20px;
  padding-left: 22px;
  /*讓容器中的物件可以置左*/
  text-align: left;
}
.extra-wrap .extra-box-row {
  /*搭配父容器要text-align: left;*/
  display: inline-block;
}
.extra-wrap .extra-box-row a:link, .extra-wrap .extra-box-row a:visited, .extra-wrap .extra-box-row a:hover, .extra-wrap .extra-box-row a:active {
  display: inline-block;
}
.extra-box {
  position: relative;
  width: 160px;
  height: 120px;
  float: left;
  margin: 6px 4px 3px 3px;
  background-color: #F5F5F5;
}
.extra-box .card {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  /*background-size: 50px 52px;*/
  margin: 12px 0 0 55px;
}
.extra-box .card#gift {
  background: url('../images/plus.svg') no-repeat -12px -9px;
  width: 50px;
  height: 52px;
}
.extra-box .card#ebook {
  background: url('../images/plus.svg') no-repeat -80px -9px;
  width: 60px;
  height: 52px;
}
.extra-box .card#course {
  background: url('../images/plus.svg') no-repeat -155px -9px;
  width: 55px;
  height: 52px;
}
.extra-box .card#health-check {
  background: url('../images/plus.svg') no-repeat -225px -9px;
  width: 55px;
  height: 52px;
}
.extra-box .card#lohas {
  background: url('../images/plus.svg') no-repeat -298px -9px;
  width: 55px;
  height: 52px;
}
.extra-box .card#bag {
  background: url('../images/plus.svg') no-repeat -372px -7px;
  width: 55px;
  height: 55px;
}
.extra-box .card#treatment {
  background: url('../images/plus.svg') no-repeat -8px -82px;
  width: 55px;
  height: 52px;
}
.extra-box .card#health-care {
  background: url('../images/plus.svg') no-repeat -80px -80px;
  width: 55px;
  height: 58px;
}
.extra-box .card#road-aid {
  background: url('../images/plus.svg') no-repeat -153px -82px;
  width: 55px;
  height: 52px;
}
.extra-box .card#schoolarship {
  background: url('../images/plus.svg') no-repeat -222px -82px;
  width: 60px;
  height: 52px;
}
.extra-box .card#medicine {
  background: url('../images/plus.svg') no-repeat -295px -82px;
  width: 55px;
  height: 52px;
}
.extra-box .card#ecard {
  background: url('../images/plus.svg') no-repeat -368px -80px;
  width: 55px;
  height: 55px;
}
.extra-box .caption {
  position: absolute;
  width: 100%;
  height: 46px;
  line-height: 42px;
  bottom: 0;
  left: 0;
  font-size: 13px;
  color: #393939;
  /*padding: 12px 4px 16px;*/
  background-color: #FDF09D;
  text-align: center;
}
.extra-box .caption .text {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  font-size: 13px;
  color: #393939;
  padding-bottom: 0;
}
.extra-box .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4CA7A7;
  overflow: hidden;
  width: 100%;
  height: 0;
  text-align: center;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*-moz-transition: .5s ease;
        -webkit-transition: .5s ease;
        -o-transition: .5s ease;
        transition: .5s ease;*/
}
.extra-box:hover .overlay {
  /*bottom: 0;*/
  height: 100%;
}
.extra-box .overlay .text {
  width: 100%;
  color: #FFF;
  font-size: 13px;
  line-height: 18px;
  padding: 6px 0;
  position: absolute;
  overflow: hidden;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  vertical-align: middle;
}
.extra-box span.btn {
  display: inline-block;
  position: absolute;
  /*按鈕位置*/
  top: 60%;
  left: 40%;
  width: 28px;
  height: 28px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  outline: none;
  background-color: #8ADEDE;
  color: white;
}
.extra-box span.btn:hover {}
.extra-box span.btn i {
  position: absolute;
  top: 10%;
  left: 40%;
  font-size: 20px;
}
/*加值服務ecard*/
.ecard-wrap {
  background-color: #FFF;
  padding: 30px 26px 26px 30px;
}
.ecard-wrap::after {
  content: "";
  clear: both;
  display: table;
}
.ecard-wrap .left {
  /*用於圖片與使用者名稱的相對位置參考*/
  position: relative;
  width: 53.8%;
}
.ecard-wrap .right {
  width: 46.2%;
}
.ecard-wrap .ecard-col {
  float: left;
}
.ecard-wrap .ecard-col img#ecard {
  width: 360px;
}
.ecard-wrap .ecard-col .caption {
  position: absolute;
  top: 207px;
  left: 266px;
  color: #FFF;
  font-size: 18px;
  font-weight: bold;
}
.ecard-wrap .ecard-col .content {
  padding-left: 16px;
}
.ecard-wrap .ecard-col .content .title {
  color: #E60112;
  font-size: 15px;
  font-weight: bold;
}
.ecard-wrap .ecard-col .content .title i {}
.ecard-wrap .ecard-col .content .title span {
  padding-left: 13px;
}
.ecard-wrap .ecard-col .content ol {
  list-style-type: decimal;
  margin-left: 16px;
  padding-top: 18px;
  font-size: 13px;
}
.ecard-wrap .ecard-col .content ol li {
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #DDD;
  line-height: 18px;
}
/*訊息顯示畫面--------------------------------------------------------*/
.box-agreement {
  margin: 20px;
  min-height: 100px;
  background-color: #CCF3F3;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  font-size: 15px;
}
.box-agreement .box-icon {
  float: left;
  margin: 19px 0 0 36px;
  width: 48px;
  /*height: 63px;*/
  height: 70px;
  background: url('../images/bigicon.svg') no-repeat -14px -6px;
}
.box-agreement .text-title {
  /*padding: 30x 18px 15px 120px;*/
  padding: 20px 18px 25px 120px;
  line-height: 22px;
  font-size: 15px;
  font-weight: bold;
}
.box-agreement .text {
  padding: 10px 30px;
  line-height: 22px;
  font-size: 15px;
  color: #393939;
}
.box-confirm {
  margin: 12px;
  min-height: 100px;
  background-color: #FFF8D1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 15px;
}
.box-confirm .box-icon {
  float: left;
  margin: 21px 0 0 28px;
  width: 64px;
  /*height: 64px;*/
  height: 70px;
  background: url('../images/bigicon.svg') no-repeat -158px -6px;
}
.box-confirm .text {
  padding: 15px 18px 15px 120px;
  line-height: 22px;
  font-size: 13px;
}
.box-confirm .confirm {
  padding-top: 10px;
}
.box-msg {
  margin: 20px;
  min-height: 100px;
  background-color: #CCF3F3;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  /*box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); IE的box shadow不明顯可加粗*/
  font-size: 15px;
  display: table;
  width: 95%;
}
.box-msg .box-icon {
  float: left;
  margin: 19px 0 0 36px;
  width: 64px;
  /*height: 58px;*/
  height: 70px;
  background: url('../images/bigicon.svg') no-repeat -82px -9px;
}
.box-msg .text {
  padding: 15px 20px;
  /*padding: 15px 18px 15px 20px;*/
  line-height: 22px;
  font-size: 15px;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.box-msg .text::after {
  display: inline-block;
}
.box-msg .text-middle {
  padding: 15px 18px 15px 15px;
  line-height: 22px;
  font-size: 15px;
  display: inline-block;
  /*text-align:left;
        vertical-align: middle;*/
}
.box-model {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.3);
  /*顯示動畫效果*/
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}
.box-model .box-popup, .box-model .box-alert {
  position: relative;
  /*margin: 10% auto;*/
  margin: 7% auto;
  padding: 0;
  width: 470px;
  height: auto;
  /*overflow-y: no-display;*/
  background-color: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #BEBEBE;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  padding-bottom: 56px;
  font-size: 15px;
}
.box-model .box-alert .popup-icon {
  display: inline-block;
  background: url('../images/form_alert.svg') no-repeat 0 0;
  margin: 7px 0 0 12px;
  padding-left: 40px;
  /*width: 30px;*/
  height: 30px;
  z-index: 1;
}
/*資安登出訊息視窗*/
.box-model .box-alert .logout-popup-icon {
  display: inline-block;
  background: url('../images/form_clock.svg') no-repeat 0 0;
  margin: 7px 0 0 12px;
  padding-left: 40px;
  /*width: 30px;*/
  height: 30px;
  z-index: 1;
}
/*資安登出訊息視窗*/
.box-model .box-alert .logout-popup-icon span {
  /*顯示在icon旁邊的文字*/
  line-height: 30px;
  width: 100%;
}
.box-model .popup-title {
  display: inline-block;
  margin: 7px;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
}
.box-model .box-popup .row, .box-model .box-alert .row {
  display: inline-block;
  padding: 7px 12px;
  float: right;
}
.box-model .box-popup .row span, .box-model .box-alert .row span {
  display: inline-block;
  padding: 3px;
  color: #848484;
  opacity: 0.7;
  cursor: pointer;
}
.box-model .box-popup .row span:hover, .box-model .box-alert .row span:hover {
  text-decoration: none;
  opacity: 1;
  cursor: pointer;
}
.box-model .box-popup .text, .box-model .box-alert .text {
  clear: both;
  font-size: 15px;
  line-height: 20px;
  padding: 10px 19px;
  color: #393939;
}
.box-model .box-popup hr {
  width: 100%;
  border: 0;
  height: 0;
  margin: 0;
  border-top: 6px solid #8ADEDE;
  float: left;
}
.box-model .box-alert hr {
  width: 100%;
  border: 0;
  height: 0;
  margin: 0;
  border-top: 6px solid #E60112;
  float: left;
}
/*元件控制項--------------------------------------------------------*/
/*表單下拉清單*/
.ddl-wrap {
  position: relative;
  display: block;
}
.ddl-inline {
  display: inline;
}
.ddl-wrap select {
  position: relative;
  /*下拉清單的向下箭頭*/
  background: url('../images/ddl-down-arrow.svg') no-repeat 95% 50%;
  /*background-position: right center;*/
  padding: 7px 32px 7px 10px;
  font-size: 15px;
  /*font-weight: bold;*/
  color: #393939;
  border: 1px solid #DDD;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #FFF;
  /*移除瀏覽器中設定的下拉清單箭頭*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*KM_固定高度*/
  height: 32px;
}
/*小型下拉清單*/
.ddl-s-srap {
  display: block;
  font-size: 13px;
  color: #848484;
  float: right;
  clear: right;
  margin: 10px 0;
}
.ddl-s-srap select {
  /*下拉清單的向下箭頭*/
  background: url('../images/ddl-down-arrow-gray.svg') no-repeat 95% 50%;
  padding: 3px 20px 3px 5px;
  border: 1px solid #BEBEBE;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #FFF;
  /*移除瀏覽器中設定的下拉清單箭頭*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.checkbox-wrap {
  position: relative;
}
.checkbox-wrap input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
  content: '';
}
.checkbox-wrap input[type=checkbox] + label {
  display: inline-block;
  background: url('../images/checkboxoff.svg') no-repeat 0 1px;
  background-size: 24px 24px;
  /*padding-left: 30px;*/
  padding: 4px 0 3px 30px;
  cursor: pointer;
}
.checkbox-wrap input[type=checkbox]:checked + label {
  display: inline-block;
  background: url('../images/checkboxon.svg') no-repeat 0 1px;
  background-size: 24px 24px;
  /*padding-left: 30px;*/
  padding: 4px 0 3px 30px;
  cursor: pointer;
}
/*其他設定--------------------------------------------------------*/
ul.pwd-hint {
  list-style-type: disc;
  font-size: 13px;
  margin-left: 24px;
  color: #E60112;
}
.clearfix {
  clear: both;
}
.hide {
  display: none;
}
.show {
  display: normal;
}
.text-bold {
  font-weight: bold;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-middle {
  vertical-align: middle;
}
.text-center-middle {
  text-align: center;
  vertical-align: middle;
}
.text-red {
  color: #E60112;
}
.text-black {
  color: #393939;
}
.text-gray {
  color: #848484;
}
.text-lightgray {
  color: #BEBEBE;
}
.text-lightergray {
  color: #DDD;
}
.text-greendark {
  color: #007d7d;
}
.text-greenlight {
  color: #4CA7A7;
}
.text-underline {
  text-decoration: underline;
}
.text-nowrap {
  white-space: nowrap;
  text-wrap: avoid;
}
.text-height21 {
  line-height: 21px;
}
.text-height15 {
  line-height: 21px;
}
.font36 {
  font-size: 36px;
}
.font22 {
  font-size: 22px;
}
.font20 {
  font-size: 20px;
}
.font18 {
  font-size: 18px;
}
.font17 {
  font-size: 17px;
}
.font16 {
  font-size: 16px;
}
.font15 {
  font-size: 15px;
}
.font14 {
  font-size: 14px;
}
.font13 {
  font-size: 13px;
}
.font12 {
  font-size: 12px;
}
/*右上說明註記*/
p.note-right {
  text-align: right;
  padding: 5px 18px 0 0;
  font-size: 13px;
}
/*進度查詢右上方日期*/
p.date-right {
  text-align: right;
  padding: 16px 4px 12px 0;
  font-size: 13px;
  color: #4A4A4A;
  float: right;
}
/*用padding top+bottom撐開畫面物件之間的空間*/
.space30 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.space20 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.space15 {
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}
.space10 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.space6 {
  padding-top: 3px;
  padding-bottom: 3px;
}
/*用padding left+right撐開畫面物件之間的空間*/
.vspace10 {
  padding-left: 5px;
  padding-right: 5px;
}
.vspace20 {
  padding-left: 10px;
  padding-right: 10px;
}
.vspace30 {
  padding-left: 15px;
  padding-right: 15px;
}
.bg-white {
  padding-top: 10px;
  background-color: #FFF;
  margin-bottom: 0;
}
.bg-yellow {
  background-color: #FFF8D1;
  color: #393939;
  font-size: 13px;
  padding: 6px;
}
.nopadding {
  padding: 0;
}
/*上下padding8*/
.vpad8 {
  padding: 4px 0;
}
.btm-border-gray {
  border-bottom: 1px solid #DDD;
}
/*tab內頁標題*/
/* h5 {
  margin: 10px 0;
  padding: 2px;
  color: #007d7d;
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
} */
/* KM_文字尺寸調整 */
h5 {
  margin: 11px 0;
  padding: 2px;
  color: #007d7d;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}
p.h5-right {
  margin: 10px 0;
  padding: 2px;
  display: inline;
  float: right;
  clear: right;
}
/*頁面上方標題*/
h4 {
  margin: 5px 0;
  padding: 2px;
  color: #FF8B52;
  font-size: 15px;
  font-weight: bold;
}
/*我的帳戶第二層標題、理賠服務圓形箭頭標題*/
h3 {
  margin: 5px;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
}
/*我的帳戶第二層標題---------------------------------------------*/
h3 .backslash {
  display: inline-block;
  width: 5px;
  height: 18px;
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o-transform: skew(30deg);
  transform: skew(30deg);
}
h3 .text {
  display: inline-block;
  padding: 2px 2px 2px 15px;
  /*background-color: #FFF;*/
  text-align: left;
  vertical-align: top;
}
h3 .progress-text {
  display: inline-block;
  padding: 8px 2px 2px 12px;
  /*background-color: #FFF;*/
  text-align: left;
  vertical-align: top;
}
h3#blue .backslash {
  background-color: #1D6499;
}
h3#blue .text {
  color: #1D6499;
}
h3#pink .backslash {
  background-color: #FF9292;
}
h3#pink .text, h3#pink .progress-text {
  color: #FF9292;
}
h3#skyblue .backslash {
  background-color: #0295C1;
}
h3#skyblue .text, h3#skyblue .progress-text {
  color: #0295C1;
}
h3#grass .backslash {
  background-color: #5CBC96;
}
h3#grass .text, h3#grass .progress-text {
  color: #5CBC96;
}
h3#gray .backslash {
  background-color: #848484;
}
h3#gray .text {
  color: #848484;
}
h3#greendark .backslash {
  background-color: #007d7d;
}
h3#greendark .text {
  color: #007d7d;
  line-height: 15px;
}
h3#Orange .backslash {
  background-color: #ed7100;
}
/* h3#Orange .text {
  color: #ed7100;
  line-height: 15px;
} */
/* KM_h3文字調整 */
h3#Orange .text {
  color: #ed7100;
  line-height: 15px;
  font-size: 18px;
}
/*進度查詢【契約變更進度】*/
h3 .progress-change {
  display: inline-block;
  width: 28px;
  height: 29px;
  background: url('../images/status.svg') no-repeat 0 0;
}
/*進度查詢【契約變更進度】*/
h3 .progress-claim {
  display: inline-block;
  width: 28px;
  height: 29px;
  background: url('../images/status.svg') no-repeat -32px 0;
}
/*進度查詢【契約變更進度】*/
h3 .progress-new {
  display: inline-block;
  width: 28px;
  height: 29px;
  background: url('../images/status.svg') no-repeat -64px 0;
}
/*理賠服務圓形箭頭標題---------------------------------------------*/
h3.claim-title {
  line-height: 20px;
}
h3.claim-title .arrow-icon {
  display: inline-block;
  background-color: #8ADEDE;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
h3.claim-title .arrow-icon i {
  color: #FFF;
  text-align: center;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -4px;
}
h3.claim-title .arrow-title {
  display: inline-block;
  font-size: 15px;
  color: #007d7d;
  height: 100%;
}
h2.title {
  display: inline-block;
  font-size: 16px;
  line-height: 36px;
  font-weight: bold;
  color: #393939;
}
h2.callout-title {
  border-left: 8px solid #007d7d;
  text-align: left;
  font-size: 18px;
  height: 36px;
  line-height: 36px;
  padding-left: 10px;
  color: #007d7d;
  font-weight: bold;
}
.callout-wrap {
  vertical-align: top;
  text-align: left;
}
.callout {
  display: inline-block;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  border: 1px solid #DDDDDD;
  padding: 10px 14px;
  margin: 0 10px;
  text-align: left;
  vertical-align: top;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
}
/*.callout:first-child {
        margin-left: 0;
    }*/
.callout:last-child {
  margin-right: 0;
}
.callout a:link, .callout a:visited, .callout a:active, .callout a:hover {
  color: #393939;
}
.callout.callout-yellow {
  border-top: 6px solid #FEDA00;
  background-color: #FFF8D1;
}
.callout.callout-green {
  border-top: 6px solid #4CA7A7;
  background-color: #CCF3F3;
}
.callout ul {
  margin-left: 18px;
}
.callout ul > li {
  list-style-type: disc;
  font-size: 13px;
  line-height: 22px;
}
.callout ul > li.map i {
  margin-left: 10px;
  font-size: 16px;
  color: #007d7d;
}
.callout ul > li.map a:link, .callout ul > li.map a:visited, .callout ul > li.map a:active, .callout ul > li.map a:hover {
  color: #393939;
}
/*div自訂項目清單樣式*/
.div-listitem-wrap {
  counter-reset: listnumber;
  display: inline-block;
  width: 98%;
}
.div-listitem-wrap .listitem {
  padding: 10px 0 10px 10px;
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid #DBDBDB;
}
.div-listitem-wrap .listitem::before {
  counter-increment: listnumber;
  content: counter(listnumber) ".　";
  vertical-align: top;
}
.div-listitem-wrap .listitem .listitem-text {
  display: inline-block;
  width: 94%;
}
/*理賠服務Arrow box-----------------------------*/
.arrowbox-wrap {
  display: table;
  width: 650px;
}
.arrowbox-wrap .arrowbox {
  position: relative;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 20px;
}
.arrowbox-wrap .arrowbox#step1 {
  background-color: #CCF3F3;
}
.arrowbox-wrap .arrowbox#step2 {
  background-color: #B0F2F2;
}
.arrowbox-wrap .arrowbox#step3 {
  background-color: #8ADEDE;
}
.arrowbox-wrap .arrowbox::after, .arrowbox-wrap .arrowbox::before {
  top: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrowbox-wrap .arrowbox::after {
  border-width: 10px;
  margin-left: -10px;
}
.arrowbox-wrap .arrowbox:before {
  border-top-color: #CCF3F3;
  border-width: 11px;
  margin-left: -11px;
}
.arrowbox-wrap .arrowbox#step1::after, .arrowbox-wrap .arrowbox#step1:before {
  border-top-color: #CCF3F3;
}
.arrowbox-wrap .arrowbox#step2::after, .arrowbox-wrap .arrowbox#step2:before {
  border-top-color: #B0F2F2;
}
.arrowbox-wrap .arrowbox#step3::after, .arrowbox-wrap .arrowbox#step3:before {
  border-top-color: #8ADEDE;
}
.arrowbox-wrap .arrowbox .arrowbox-title {
  display: table-cell;
  width: 65px;
  text-align: center;
  line-height: 120px;
}
.arrowbox-wrap .arrowbox .arrowbox-title .step-circle {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #FFF;
  box-shadow: 0 2px 6px 0 #4CA7A7;
  font-size: 32px;
  color: #007d7d;
  text-align: center;
  line-height: 50px;
}
.arrowbox-wrap .arrowbox .arrowbox-text {
  display: table-cell;
  width: 510px;
  height: 52px;
  vertical-align: middle;
  padding: 0 0 0 20px;
  border-left: 2px solid #FFF;
}
span.toggle-title {
  display: inline-block;
  padding-right: 15px;
  color: #007d7d;
  font-size: 13px;
  font-weight: bold;
}
span.toggle-text {
  display: inline-block;
  color: #393939;
  font-size: 13px;
}
span.tab-nav-link {
  font-size: 15px;
  color: #007d7d;
  text-decoration: underline;
  cursor: pointer;
}
a.simple-link:link, a.simple-link:visited, .simple-text {
  display: inline-block;
  /*與下方underline的距離*/
  padding: 10px 0 1px 0;
  margin: 0 0 12px 20px;
  font-size: 15px;
  font-weight: bold;
  color: #4CA7A7;
  line-height: 21px;
  text-decoration: none;
  border-bottom: 1px solid #4CA7A7;
}
a.reset-code:link, a.reset-code:visited, a.reset-code:hover, a.reset-code:active {
  color: #007878;
  font-size: 13px;
}
/*.go-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}

go-top:hover {
    background-color: #555;
}*/
/*自製ComboBox--------------------------------------------------------*/
.combobox-group {
  display: inline-block;
  position: relative;
}
.combobox-group input[type=number].combobox, .combobox-group input[type=text].combobox {
  font-size: 13px;
  border: 1px solid #DBDBDC;
  color: #4CA7A7;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  /*padding: 2px 4px;*/
  padding: 2px 6px 2px 4px;
  padding-right: 30px;
  height: 32px;
}
.combobox-group .combobox-dropdown {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 32px;
  background: url('../images/ddl-down-arrow.svg') no-repeat 75% 50%;
}
.combobox-group .combobox-items {
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  height: 150px;
  border: 1px solid #DBDBDC;
  border-top: none;
  z-index: 999;
  font-size: 14px;
  overflow-y: scroll;
  overflow-x: no-display;
  background-color: #FFF;
}
.combobox-group .combobox-items > div.option {
  padding: 4px 6px;
}
.combobox-group .combobox-items > div.option:hover {
  padding: 4px 6px;
  background-color: #ccc;
}
/*.combobox-group select.combobox-items {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    height: 150px;
    border: 1px solid #DBDBDC;
    border-top: none;
    z-index: 999;
    font-size: 14px;
}

.combobox-group select.combobox-items > option {
    padding: 4px 6px;
}*/

/* KM新增--------------------------------------------------------*/

/* Content區-----------------*/

/*首頁banner*/
.banner-index {
  background: url(../images/banner_index.png) center no-repeat;
  background-color: #007d7d;
  width: 100%;
  height: 150px;
  margin: 20px 0 10px 0;
}

/*QA摺疊_背景設定*/
.content-bg {
  background-color: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 10px;
}
.content-bg-radius {
  background-color: #fff;
  padding: 10px 20px 30px 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*QA摺疊_全部展開*/
.on-off {
  line-height: 15px;
  float: right;
  clear: right;
  margin-top: -8px;
}
/*QA摺疊_新增問題circle符號*/
table.table-form tbody tr.tr-content td:nth-of-type(1):before {
  content: '\f192';
  font-family: 'FontAwesome';
  color: #007d7d;
  padding: 5px 5px 5px 10px;
}

/* 第四層備用樣式 */
.list_KM {
 /*整排tab的寬度*/
  padding: 10px;
  background-color: #4CA7A7;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
}
.list_KM .list-btn {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 31%;
  height: 34px;
  line-height: 28px;
  font-size: 15px;
  font-weight: bold;
  /* color: #393939; */
  color: #FFF;
  border-radius: 5px;
  border: 1px solid #FFF;
  box-sizing: border-box;
  /* cursor: pointer; */
  /* background-color: #fff; */
  margin: 4px;
}
.list_KM .list-btn-offsetfix {
  display: table-cell;
  cursor: default;
}
.list_KM .list-btn span {
  text-decoration: none;
  vertical-align: middle;
}
.list_KM .list-btn.active {
  background-color: #FFF;
}
.list_KM .list-btn.active span {
  color: #007d7d;
}
.list_KM .list-btn:link, .list_KM .list-btn:visited, .list_KM .list-btn:active, .list_KM .list-btn:hover {
  color: #007d7d;
  background-color: #FFF;
}

/* 頁碼樣式 */
.page-top {
  text-align: right;
}
.page {
  text-align: center;
  padding-top: 15px;
}
ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
  color: black;
  float: left;
  padding: 8px 10px;
  text-decoration: none;
  transition: background-color .3s;
}
ul.pagination li a.active {
  background-color: #007d7d;
  color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}


/* Sidebar區塊-----------------*/

/*取消padding */
nav {
  display: table-cell;
  /* width: 22.46093%; */
  min-width: 230px;
  /*
        總寬度240px;(23.4375%)
        總寬度216px;(21.09375%)
        總寬度230px;(22.46093%)
    */
  background-color: #45A19A;
  padding: 0;
  border-left: 1px solid #E1E1E1;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*menu下方留白，不留白則由menu或是main內容長度較大者撐開版型*/
  /* margin-bottom: 50px; */
}

/*search框*/
.search-bg {
  background-color: #fff;
}
.searchframe{
  position: relative;
}
.icon-search {
  position: absolute;
  color: #45a19a;
  right: 8px;
  top: 8px;
}
/* 取消IE input預設符號 */
::-ms-clear,
::-ms-reveal
{display:none;}

/* 選單-----------*/

nav ul a:link, ul a:visited {
  background-position: left;
  background-position-x: 198px;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #FFF;
  padding: 12px 0 10px 50px;
  display: block;
  border-bottom: 1px solid #E1E1E1;
  -moz-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/* 第一層設定 */
.sidebar-index a{
  background-color: #007d7d;
  color: #FFF;
}
nav ul li {
  position: relative;
  background-color: #45a19a;
  color: #FFF;
}
nav ul li a:hover {
  color: #ffff00;
}
nav ul li a.active-btn{
  text-decoration: underline;
  color: #ffff00;
  font-weight: 900;
}
.arrow-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  background-color: #007d7d;
  opacity: 0.6;
}
nav ul li a::before {
  position: relative;
  content: '\f105';
  font-family: 'FontAwesome';
  font-size: 16px;
  float: left;
  margin-left: -34px;
  color: #ddd;
  font-weight: bolder;
  z-index: 1;
}

/* 第二層設定 */
nav ul li ul li {
  background-color: #fff;
}
nav ul li ul li a.haschild::before {
  content: '\f04b';
  font-family: 'FontAwesome';
  font-size: 12px;
  float: left;
  margin-left: -15px;
  margin-top: 1px;
  color: #007d7d;
  text-decoration: none;
}

nav ul li ul li a.star::before {
  content: '\f005';
  font-family: 'FontAwesome';
  font-size: 12px;
  float: left;
  margin-left: -15px;
  margin-top: 1px;
  color: #007d7d;
  text-decoration: none;
}
nav ul li ul li a.haschild:hover::before {
  text-decoration: underline;
}
nav ul li ul li a:hover {
  background-color: #F2FBFB;
}
nav ul li ul li a.active-btn {
  text-decoration: underline;
  font-weight: 900;
}
/* IE消除箭頭底線 */
nav ul li ul li a.haschild:hover::before{
  text-decoration: none;
}
nav ul li ul li a:link, nav ul li ul li a:visited {
  color: #007D7D;
  padding-left: 50px;
}

/* 第三層設定 */
nav ul li ul li ul li {
  background-color: #ececec;
}
nav ul li ul li ul li a:hover {
  background-color: #F5F5F5;
}
nav ul li ul li ul li a.active-btn {
  background-color: #F5F5F5;
  text-decoration: underline;
  font-weight: 900;
}
nav ul li ul li ul li a:link, nav ul li ul li ul li a:visited {
  border-bottom: 0px;
  color: #007D7D;
  padding-left: 65px;
}

/* 點擊箭頭向下 */
nav ul li a.active-arrow::before, nav ul li ul li a.active-arrow::before {
  transform: rotate(90deg); 
}
/* 取消箭頭 */
nav ul li a.cancel-arrow::before, nav ul li ul li a::before, nav ul li ul li ul li a::before {
  content: '';
}