/* ---reset.css--- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tfoot,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

a,
a:link,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  cursor: pointer;
}

body {
  line-height: 1;
  font-size: 16px;
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei",
    "Source Sans Pro", sans-serif;
  color: #2e2a2e;
  display: relative;
  word-wrap: break-word;
  word-break: break-all;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

table {
  border-collapse: collapse;
}

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

.header {
  width: 100%;
  height: 80px;
  top: 0;
  left: 0;
  position: fixed;
  padding: 0;
  background-color: #ffffff;
  z-index: 9999;
  -webkit-box-shadow: 0px 1px 2px #cccccc;
  box-shadow: 0px 1px 2px #cccccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.header-area {
  width: 100%;
  height: 80px;
  margin: 0px;
  position: relative;
}

nav {
  width: 100%;
  height: 80px;
  position: relative;
  color: #ecedee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

nav .logo {
  display: inline-block;
  width: 260px;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
  margin-left: 20px;
}

nav .logo img,
nav .logo picture {
  display: block;
  width: 100%;
}

nav .logo img img,
nav .logo picture img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 840px) {
  nav .logo {
    width: 120px;
    margin-left: 10px;
  }
}

#main-menu {
  position: relative;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
}

#main-menu .toggle {
  display: none;
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 30px;
  right: 20px;
}

#main-menu .toggle div {
  width: 30px;
  height: 3px;
  background: #9e9e9e;
  margin: 6px 0;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
  display: block;
  position: relative;
}

@media screen and (max-width: 1199px) {
  #main-menu .toggle {
    display: inline-block;
  }
}

#main-menu #drop {
  display: none;
}

#main-menu #drop ~ ul {
  position: relative;
  list-style: none;
  text-align: right;
  letter-spacing: 0;
  font-size: 0;
  margin: 0;
  top: 0;
  right: 0;
  z-index: 999;
}

#main-menu #drop ~ ul li {
  display: inline-block;
  margin: 0;
  padding: 3px 0px 0px;
  position: relative;
}

#main-menu #drop ~ ul li a,
#main-menu #drop ~ ul li span {
  font-size: 20px;
  min-width: 95px;
  cursor: pointer;
  display: block;
  text-align: left;
  background: #ffffff;
  color: #3c3c3c;
  padding: 0px 30px 0px 0px;
}

#main-menu #drop ~ ul li a:hover {
  color: #0168b7;
}

#main-menu #drop ~ ul li span:hover {
  color: #0168b7;
}

#main-menu #drop ~ ul li a.act,
#main-menu #drop ~ ul li span.act {
  color: #005598;
}

#main-menu #drop ~ ul li .subNav {
  position: absolute;
  width: 140%;
  left: 0px;
  top: 51px;
  background-color: #ffffff;
  list-style: none;
  display: none;
  z-index: 999;
  -webkit-transform: translateY("100%");
  transform: translateY("100%");
  padding: 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #cccccc;
  border-top: none;
}

#main-menu #drop ~ ul li .subNav li {
  display: block;
  text-align: left;
  padding: 12px 10px;
}

#main-menu #drop ~ ul li .subNav li a:hover {
  color: #0168b7;
}

#main-menu #drop ~ ul:active {
  display: block;
}

@media screen and (max-width: 1199px) {
  #main-menu #drop ~ ul {
    min-width: 120px;
    position: absolute;
    top: 80px;
    right: -200px;
    border-radius: 8px;
    border: 1px solid #cccccc;
    background: #ffffff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  #main-menu #drop ~ ul li {
    display: block;
  }
  #main-menu #drop ~ ul li a,
  #main-menu #drop ~ ul li span {
    font-size: 16px;
    text-align: left;
    color: #3c3c3c;
    padding: 20px 5px;
    border-top: 1px solid #cccccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  #main-menu #drop ~ ul li a.act,
  #main-menu #drop ~ ul li span.act {
    color: #005598;
  }
  #main-menu #drop ~ ul li:first-child a,
  #main-menu #drop ~ ul li:first-child span {
    border-top: none;
  }
  #main-menu #drop ~ ul li .subNav {
    position: relative;
    width: auto;
    left: 0px;
    top: -20px;
    z-index: 1;
    -webkit-transform: translateY("0px");
    transform: translateY("0px");
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
  }
  #main-menu #drop ~ ul li .subNav li {
    display: block;
    text-align: center;
    padding: 0px;
  }
  #main-menu #drop ~ ul li .subNav li a {
    padding: 15px 0 0 15px;
    text-align: left;
    border: none;
  }
  #main-menu #drop:checked ~ ul {
    min-width: 160px;
    padding: 0 10px;
    top: 80px;
    right: 20px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}

@media screen and (max-width: 1199px) and (max-width: 1199px) {
  #main-menu #drop:checked ~ ul {
    display: block;
  }
}

@media screen and (max-width: 1199px) {
  #main-menu #drop:checked ~ .toggle div:first-of-type,
  #main-menu #drop:checked ~ .toggle div:nth-of-type(2) {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    background: #ee5c45;
  }
  #main-menu #drop:checked ~ .toggle div:first-of-type {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 9px;
  }
  #main-menu #drop:checked ~ .toggle div:nth-of-type(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #main-menu #drop:checked ~ .toggle div:nth-of-type(3) {
    opacity: 0;
  }
}

/* --主視覺------------------------------------- */

.KV_pc_1 {
  width: 100%;
  height: 720px;
  display: block;
  letter-spacing: 3px;
  background-color: #0f0d18;
  position: relative;
  background-repeat: no-repeat;
}

.KV_bg {
  width: 100%;
  height: 720px;
  position: relative;
  background-position: center;
}

.KV_bg_calculate {
  background-image: url(image/KV_pc_d.jpg);
}

.KV_bg_article {
  background-image: url(image/KV_pc_e.jpg);
}

.KV_bg_funds {
  background-image: url(image/KV_pc_f.jpg);
}

.KV_bg_topic {
  background-image: url(image/KV_pc_g.jpg);
}

.KV_bg_account {
  background-image: url(image/KV_pc_h.jpg);
}

.KV_pc_2 {
  width: 100%;
  height: 720px;
  display: block;
  letter-spacing: 3px;
  background-color: #0f0d18;
  position: relative;
  background-repeat: no-repeat;
}

.KV_mobile {
  display: none;
}

.KV_ColorBlock {
  width: 820px;
  height: 720px;
  clip-path: polygon(0 0, 95% 0, 65% 100%, 0% 100%);
  position: absolute;
  z-index: 1;
  animation: KV_ColorBlock_move 1.5s ease-in-out;
}

.KV_ColorBlock.color_blue {
  background-color: #0168b7bd;
}

.KV_ColorBlock.color_pink {
  background-color: #e565b4bd;
}

.KV_ColorBlock.color_green {
  background-color: #28a16fbd;
}

.KV_ColorBlock.color_lightblue {
  background-color: #5eb7ffbd;
}

@keyframes KV_ColorBlock_move {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.KV_slideshow {
  width: 100%;
  height: 720px;
  position: relative;
  overflow: hidden;
}

.KV_slideshow_item {
  width: inherit;
  height: inherit;
  position: absolute;
  opacity: 0;
  animation: slideanim 9s infinite ease-in-out;
}

.KV_slideshow_item:nth-child(1),
.KV_slideshow_item:nth-child(1) img {
  animation-delay: 0;
}
.KV_slideshow_item:nth-child(2),
.KV_slideshow_item:nth-child(2) img {
  animation-delay: 3s;
}

.KV_slideshow_item:nth-child(3),
.KV_slideshow_item:nth-child(3) img {
  animation-delay: 6s;
}

.KV_slideshow_item img {
  width: 100%;
  height: 750px;
  object-fit: cover;
}

.KV_slideshow_item_text {
  color: #fff;
  position: absolute;
  top: 16%;
  left: 8%;
  z-index: 999;
}

.KV_slideshow_item_text h6 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 4px;
  padding: 8px 0 12px 8px;
  font-weight: normal;
}

.KV_slideshow_item_text p {
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 4px;
  font-weight: bold;
  padding: 20px 0;
}

.KV_slideshow_item_text p.type2 {
  font-size: 25px;
  letter-spacing: 2px;
}

@keyframes slideanim {
  5% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.KV_btn {
  display: block;
  width: 200px;
  background-color: #ffffff;
  font-size: 21px;
  padding: 15px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.KV_btn.color_blue {
  color: #005598;
}

.KV_btn.color_pink {
  color: #e565b5;
}

.KV_btn.color_green {
  color: #28a16f;
}

.KV_btn.color_lightblue {
  color: #489fe6;
}

@media screen and (min-width: 1921px) {
  .KV_bg {
    background-size: cover;
  }
}

@media screen and (min-width: 812px) and (max-width: 1199px) {
  .KV_pc_1 {
    width: 100%;
    height: 680px;
    display: block;
    letter-spacing: 3px;
    background-color: #0f0d18;
    position: relative;
    background-repeat: no-repeat;
  }

  .KV_pc_2 {
    width: 100%;
    height: 680px;
    display: block;
    letter-spacing: 3px;
    background-color: #0f0d18;
    position: relative;
    background-repeat: no-repeat;
  }

  .KV_mobile {
    display: none;
  }

  .KV_slideshow {
    width: 100%;
    height: 680px;
    position: relative;
    overflow: hidden;
  }

  .KV_slideshow_item img {
    width: 100%;
    height: 680px;
    object-fit: cover;
  }

  .KV_ColorBlock {
    width: 580px;
    height: 680px;
    background-color: #0168b7bd;
    clip-path: polygon(0 0, 95% 0, 70% 100%, 0% 100%);
    position: absolute;
    z-index: 1;
    animation: KV_ColorBlock_move 1.5s ease-in-out;
  }

  .KV_slideshow_item_text p {
    font-size: 26px;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 811px) {
  #KV {
    width: 100%;
    height: 480px;
    display: block;
  }

  .KV_pc_1 {
    display: none;
  }

  .KV_pc_2 {
    display: none;
  }

  .KV_mobile {
    display: block;
    width: 100%;
    height: 480px;
    background-position: center;
    background-size: cover;
  }

  .KV_slideshow {
    width: 100%;
    height: 480px;
    position: relative;
    overflow: hidden;
  }

  .KV_bg_calculate_mobile {
    background-image: url(image/KV_mobile_d.jpg);
  }

  .KV_bg_article_mobile {
    background-image: url(image/KV_mobile_e.jpg);
  }

  .KV_bg_funds_mobile {
    background-image: url(image/KV_mobile_f.jpg);
  }

  .KV_bg_topic_mobile {
    background-image: url(image/KV_mobile_g.jpg);
  }

  .KV_bg_account_mobile {
    background-image: url(image/KV_mobile_h.jpg);
  }

  .KV_ColorBlock {
    width: 100%;
    max-width: 580px;
    height: 480px;
    clip-path: polygon(0 0, 90% 0, 28% 100%, 0% 100%);
    position: absolute;
    z-index: 1;
    animation: KV_ColorBlock_move 1.5s ease-in-out;
  }

  .KV_slideshow_item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
  }

  .KV_slideshow_item_text {
    top: 120px;
  }

  .KV_slideshow_item_text h5 {
    font-size: 45px;
    letter-spacing: 5px;
    font-weight: bold;
    padding: 10px 0 16px 0;
  }

  .KV_slideshow_item_text h6 {
    font-size: 19px;
    letter-spacing: 3px;
    line-height: 1.2;
    padding: 8px 0 12px 0;
    font-weight: normal;
  }

  .KV_slideshow_item_text p {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 4px;
    font-weight: bold;
    padding: 20px 0;
  }

  .KV_slideshow_item_text p.type2 {
    font-size: 19px;
  }

  .KV_btn {
    display: block;
    width: 150px;
    color: #005598;
    background-color: #ffffff;
    font-size: 19px;
    padding: 12px;
    letter-spacing: 2px;
    margin-top: 0;
  }
}

/* --分頁主視覺------------------------------------- */

#KV_pagination {
  width: 100%;
  height: 700px;
  background-image: url(image/KV_pagination_pc.png);
  background-color: #ffeeda;
  background-repeat: no-repeat;
  background-position: center bottom;
  color: #fff;
  position: relative;
}

.KV_pagination_content {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.KV_pagination_tit_pc {
  position: absolute;
  width: 580px;
  top: 100px;
  left: 40%;
  animation: KV_tit_move 0.95s ease-in-out infinite alternate;
}

@keyframes KV_tit_move {
  0% {
    top: 100px;
    width: 580px;
  }
  100% {
    top: 90px;
    width: 595px;
  }
}

@media screen and (min-width: 1921px) {
  #KV_pagination {
    background-size: auto, cover;
  }
}

@media screen and (min-width: 1199px) {
}

@media screen and (min-width: 932px) and (max-width: 1198px) {
  .KV_pagination_content {
    width: 90%;
  }

  .KV_pagination_tit_pc {
    position: absolute;
    width: 540px;
    top: 100px;
    left: 34%;
    animation: KV_tit_move 0.95s ease-in-out infinite alternate;
  }

  @keyframes KV_tit_move {
    0% {
      top: 100px;
      width: 540px;
    }
    100% {
      top: 90px;
      width: 555px;
    }
  }
}

@media screen and (max-width: 931px) {
  @keyframes KV_tit_move {
    0% {
      top: 50px;
      width: 90%;
    }
    100% {
      top: 40px;
      width: 94%;
    }
  }
}

/* --內容區共同設定------------------------------------ */

.content_section {
  width: 100%;
  padding: 80px 0;
  text-align: center;
  line-height: 1.2;
}

.content_section_2 {
  padding: 80px 0 20px 0;
}

.content_section_3 {
  padding: 20px 0 5px 0;
}

h1 {
  font-size: 120px;
  font-weight: 900;
  letter-spacing: 12px;
}

h1.type2 {
  font-size: 82px;
  letter-spacing: 8px;
}

h1.type2 font {
  font-size: 100px;
  letter-spacing: 8px;
}

h2 {
  width: 80%;
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: 3px;
  margin: 0 auto;
}

h2 b {
  color: #0168b7;
}

h2.type2 {
  padding: 60px 0 0 0;
}

h2.FontWhite {
  color: #ffffff;
}

h2.type3 {
  font-size: 38px;
  width: 80%;
  max-width: 1100px;
  background-color: #0b7e5b;
  color: #ffffff;
  border-radius: 100px;
  padding: 10px 50px;
  margin-top: 15px;
}

h3 {
  font-size: 30px;
  padding: 0px 0 10px 0;
}

h3.type2 {
  color: #0b7e5b;
  padding: 20px 0 0 0;
}

h4 {
  font-size: 22px;
  padding: 10px 0;
  line-height: 1.4;
  margin: 0 auto;
}

h4 b {
  color: #0168b7;
}

h4.type2 {
  width: 85%;
  color: #2e2a2e;
  text-align: left;
  padding: 10px 0;
  margin: 0 auto;
}

h4.type3 {
  width: 90%;
  max-width: 850px;
  font-size: 36px;
}

h4.type4 {
  color: #0168b7;
  text-align: center;
  letter-spacing: 2px;
}

h4.type5 {
  width: 85%;
  min-height: 100px;
  font-size: 20px;
  color: #5a5a5a;
  text-align: justify;
  font-weight: normal;
}

h4.type6 {
  color: #0b7e5b;
}

h4.type7 {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  color: #0b7e5b;
  border: 3px solid #0b7e5b;
  border-radius: 10px;
  padding: 10px 20px;
}

h4.type8 {
  width: 85%;
  max-width: 800px;
  background-color: #e6f5eb;
  border-radius: 10px;
  font-weight: normal;
  margin: 30px auto 0 auto;
  letter-spacing: 1px;
}

h4.type8 b {
  color: #0b7e5b;
}

h4.type9 {
  width: 85%;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 10px;
  font-weight: normal;
  margin: 30px auto 0 auto;
  letter-spacing: 1px;
}

h4.type10 {
  color: #0b7e5b;

}

font.mark {
  display: inline-block;
  width: 85px;
  font-size: 15px;
  background-color: #e565b5;
  color: #ffffff;
  font-weight: normal;
  text-align: center;
  padding: 4px 5px;
  margin-left: 4px;
  border-radius: 5px;
  vertical-align: text-bottom;
}

h5 {
  width: 90%;
  max-width: 850px;
  font-size: 20px;
  font-weight: normal;
  color: #2e2a2e;
  text-align: justify;
  line-height: 1.5;
  padding: 15px 0 20px 0;
  margin: 0 auto;
}

.font_center {
  text-align: center;
}

.font_justify {
  text-align: justify;
}

.font_left {
  text-align: left;
}

.font_right {
  text-align: right;
}

.content_item {
  width: 65%;
  max-width: 360px;
  font-size: 26px;
  letter-spacing: 2px;
  font-weight: bold;
  padding: 15px;
  background-color: #ffffff;
  border: 4px solid #3e3a39;
  border-radius: 50px;
  margin: 40px auto;
}

.cardArea_section {
  margin: 0 auto;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 95%;
  max-width: 1600px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.cardArea_section .type2 {
  margin-top: 0;
  width: 85%;
  max-width: 1600px;
}

.cardArea_section .type3 {
  margin-top: 0;
  width: 95%;
  max-width: 1600px;
}

.cardArea {
  width: 70%;
  max-width: 320px;
  margin: 20px;
}

.cardArea.type2 {
  max-width: 380px;
  border: 2px solid #4e9983;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 10px 15px 25px 15px;
}

.cardArea.type3 {
  max-width: 380px;
  border: 2px solid #4e9983;
  border-radius: 20px;
  padding: 10px 5px 25px 5px;
}

.cardArea.type4 {
  max-width: 380px;
  padding: 15px 5px;
}

.cardArea p {
  width: 85%;
  font-size: 18px;
  color: #707070;
  text-align: justify;
  margin: 0 auto;
  line-height: 1.6em;
}

.cardArea p.type2 {
  color: #0168b7;
}

.cardArea.icon img {
  max-width: 90px;
}

.cardArea .icon {
  max-width: 160px;
  width: 85%;
}

.cardArea_pic {
  border-radius: 10px;
  background-color: #ffffff;
  padding: 0 0 35px 0;
}

.cardArea_pic.shadow {
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 5px 0px rgba(196, 196, 196, 0.3);
}

.cardArea_pic.board {
  border: 1px solid #aaaaaa;
}

.cardArea_pic img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.cardArea li {
  width: 80%;
  font-size: 19px;
  text-align: justify;
  line-height: 1.8;
  list-style: none;
  margin: 0 auto;
}

.imgArea {
  margin: 0 auto;
}

.imgArea .item {
  display: inline-block;
  width: 65%;
  max-width: 240px;
  padding: 20px;
}

.content_block {
  width: 65%;
  max-width: 320px;
  margin: 20px;
  background-color: #ffffff;
  border: 2px solid #005598;
  border-radius: 10px;
  padding: 20px;
}

.content_block img {
  width: 160px;
}

.content_block p {
  width: 85%;
  min-height: 100px;
  font-size: 18px;
  color: #707070;
  text-align: justify;
  margin: 0 auto;
  line-height: 1.6em;
}

.content_chart {
  display: block;
  max-width: 950px;
  width: 95%;
  padding: 30px 0 10px 0;
  margin: 0 auto;
}

.content_chart_pc {
  display: block;
}

.content_chart_mobile {
  display: none;
}

.content_chart.size2 {
  max-width: 750px;
  padding: 0;
}

.content_chart.size3 {
  max-width: 800px;
  padding: 0;
}

.content_chart.size4 {
  max-width: 850px;
  padding: 0;
}

.content_chart.size5 {
  max-width: 600px;
  padding: 0;
}

.content_chart.size6 {
  max-width: 1050px;
  padding: 0;
}

.content_chart_two {
  display: inline-block;
  max-width: 480px;
  width: 90%;
  padding: 10px 0;
}

.content_btn {
  display: block;
  width: 60%;
  max-width: 260px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  background-color: #3e3a39;
  border-radius: 10px;
  padding: 22px 25px;
  margin: 30px auto;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
}

.content_btn.abreast {
  display: inline-block;
  margin: 30px 10px;
}

.content_btn:hover {
  background-color: #0168b7;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
}

.content_btn_two {
  display: inline-block;
  margin: 30px 15px;
}

.content_btn_2 {
  display: block;
  width: 85%;
  max-width: 300px;
  font-size: 19px;
  letter-spacing: 1px;
  color: #005598;
  border: 1px solid #005598;
  margin: 20px auto 10px auto;
  padding: 12px 5px;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
}

.content_btn_2:hover {
  color: #ffffff;
  background-color: #005598;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
}

.content_btn_3 {
  width: 90%;
  max-width: 340px;
  font-size: 21px;
  display: block;
  color: #fff;
  line-height: 1.2;
  border-radius: 30px;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 25px;
  background: #ff8000;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 3px 0 rgba(65, 65, 65, 0.25);
  box-shadow: 0 3px 0 rgba(65, 65, 65, 0.25);
  cursor: pointer;
  margin: 0 auto;
}

.content_btn_3:hover {
  background-color: #fd6018;
}

.article_btn {
  background: #5ab38e;
}

.funds_btn {
  background: #525252;
}

.funds_btn a {
  color: #ffffff;
}

.ReadArticleType {
  width: 90%;
  max-width: 320px;
  display: inline-block;
  margin: 16px 0px;
  padding: 12px 25px;
  font-size: 20px;
  letter-spacing: 1px;
  border-radius: 40px;
  border: 2px solid #acacac;
  cursor: pointer;
  background-color: #ffffff;
  color: #5b5b5b;
}

.ReadArticleType .fa-circle-arrow-down {
  transform: rotate(0deg);
  transition: all 0.5s ease;
}

.ReadArticleType.act {
  background-color: #ffffff;
  color: #0b7e5b;
  border: 3px solid #0b7e5b;
}

.ReadArticleType.act .fa-circle-arrow-down {
  transform: rotate(180deg);
  transition: all 0.5s ease;
}

.content_text {
  width: 80%;
  max-width: 880px;
  font-size: 20px;
  text-align: justify;
  line-height: 1.5;
  padding: 20px 0;
  margin: 0 auto;
}

.content_text.type2 {
  font-weight: bold;
  text-align: center;
  padding: 0 0 15px 0;
}

.content_infotex {
  width: 90%;
  max-width: 850px;
  margin: 0 auto;
  text-align: justify;
  font-size: 16px;
  letter-spacing: 1px;
  color: #7c7c7c;
  padding: 20px 0;
}

.content_infotex.type2 {
  color: #ffffff;
}

.content_infotex_all {
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  padding: 80px 0;
}

.target-fix:target {
  padding-top: 80px;
}

@media screen and (min-width: 812px) and (max-width: 1199px) {
  h1 {
    font-size: 90px;
  }

  h1.type2 {
    font-size: 70px;
    letter-spacing: 6px;
  }

  h1.type2 font {
    font-size: 90px;
    letter-spacing: 6px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 28px;
  }

  .content_btn {
    font-size: 21px;
  }
}

@media screen and (max-width: 811px) {
  .content_section {
    padding: 30px 0;
  }

  .content_section_2 {
    padding: 0;
  }

  h1 {
    font-size: 58px;
    letter-spacing: 9px;
  }

  h1.type2 {
    font-size: 50px;
    letter-spacing: 4px;
  }

  h1.type2 font {
    font-size: 58px;
    letter-spacing: 4px;
  }

  h2 {
    font-size: 26px;
    letter-spacing: 2px;
    padding: 5px 10px;
  }

  h2.type2 {
    padding: 40px 0 0 0;
  }

  h3 {
    width: 90%;
    font-size: 22px;
    margin: 0 auto;
  }

  h2.type3 {
    width: 80%;
    font-size: 24px;
    border-radius: 25px;
    padding: 15px 25px;
  }

  h4 {
    font-size: 20px;
  }

  h4.type3 {
    font-size: 22px;
  }

  h4.type5 {
    font-size: 18px;
  }

  h4.type7 {
    width: 80%;
    padding: 10px 20px;
  }

  h4.type8 {
    font-size: 18px;
    padding: 15px;
    width: 80%;
  }

  h4.type9 {
    font-size: 18px;
    padding: 15px;
    width: 80%;
  }

  h4.type10 {
  width: 90%;
}

  h5 {
    font-size: 17px;
  }

  .cardArea {
    margin: 20px 10px;
  }

  .cardArea p {
    font-size: 16px;
    line-height: 1.5em;
  }

  .cardArea li {
    width: 90%;
    font-size: 16px;
  }

  .imgArea .item {
    max-width: 200px;
  }

  .content_block p {
    font-size: 16px;
    min-height: auto;
  }

  .content_chart {
    padding: 10px 0;
  }

  .content_chart_pc {
    display: none;
  }

  .content_chart_mobile {
    display: block;
  }

  .ReadArticleType {
    width: 80%;
    font-size: 18px;
  }

  .content_item {
    font-size: 20px;
    padding: 12px;
    margin: 20px auto;
  }

  .content_text {
    width: 85%;
    font-size: 16px;
    padding: 15px 0;
    margin: 0 auto;
  }

  .content_btn {
    font-size: 20px;
    margin: a auto;
  }

  .content_btn_two {
    display: block;
    margin: 15px auto;
  }

  .content_btn_3 {
    font-size: 18px;
  }

  .content_btn.abreast {
    display: block;
    margin: 15px auto;
  }

  .funds_btn {
    max-width: 100%;
  }

  .content_infotex {
    width: 95%;
    font-size: 14px;
  }
}

.event-tit {
  font-size: 36px;
  line-height: 1.75;
  font-weight: bold;
  text-align: center;
  margin: 0px auto 24px;
  padding: 0px;
}

.event-tit .tag {
  padding: 0.3em 0.6em;
  color: #ffffff;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  border-radius: 6px;
  position: relative;
}

.event-tit .tag-area {
  position: relative;
}

.event-tit .tag :after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 8px 8px 0px 8px;
  border-style: solid;
  left: 0;
  bottom: 0;
  transform: translate(100%, 100%);
}

.event-tit.close {
  margin: 0px auto;
}

.event-tit .cyan {
  color: #28a16f;
}

.event-tit.cyan .tag {
  background-color: #28a16f;
  padding: 0.5em 1em;
}

.event-tit.cyan .tag :after {
  border-color: #28a16f;
  border-color: #28a16f transparent transparent transparent;
}

@media screen and (max-width: 767px) {
  .event-tit {
    font-size: 22px;
    margin: 0px auto 18px;
  }
  .event-tit .tag {
    font-size: 18px;
  }

  .event-tit.cyan .tag {
    font-size: 20px;
  }
}

/* --輪播圖表------------------------------------ */
.content_slider_block {
  width: 85%;
  max-width: 1000px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 40px 50px 20px 50px;
  margin: 20px auto;
  box-shadow: 0px 2px 2px 2px rgba(124, 130, 146, 0.1);
  -webkit-box-shadow: 0px 2px 2px 2px rgba(124, 130, 146, 0.1);
}

@media screen and (min-width: 812px) and (max-width: 1199px) {
  .content_slider_block {
    width: 85%;
    padding: 60px 40px 20px 40px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 811px) {
  .content_slider_block {
    width: 85%;
    padding: 25px 20px 0px 20px;
    margin: 0 auto;
  }
}

/* --表格------------------------------------ */

.chart-table {
  margin: 30px 0px;
  overflow-x: auto;
  position: relative;
}
.chart-table table {
  border-spacing: 0px;
  font-size: 19px;
  line-height: 1.4;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border-collapse: collapse;
  border: none;
  margin: 0 auto;
}

.chart-table table p {
  font-size: 15px;
  color: #757575;
}

.chart-table table b {
  font-size: 24px;
  color: #0168b7;
}

.chart-table table thead tr {
  background: #474959;
  white-space: nowrap;
}
.chart-table table thead tr td {
  color: #fff;
  font-weight: bold;
  border-bottom: none;
}
.chart-table table thead tr td i {
  margin-left: 4px;
  cursor: pointer;
}
.chart-table table thead tr td .fa-sort {
  color: #ffffff;
}
.chart-table table thead tr td .fa-sort-down,
.chart-table table thead tr td .fa-sort-up {
  color: #3c3c3c;
}
.chart-table table tr {
  background: #fff;
}
.chart-table table tr td {
  text-align: center;
  padding: 12px 20px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  word-break: break-all;
}
.chart-table table tr td .nowarp {
  white-space: nowrap;
}
.chart-table table tr td strong {
  color: #3c3c3c;
}
.chart-table table tr td strong.color {
  color: #ff725c;
}
.chart-table table tr td strong.color1 {
  color: #4477c1;
}
.chart-table table tr td strong.bigger {
  font-size: 24px;
}
.chart-table table tr td.text-left {
  text-align: left;
}
.chart-table table tr td:first-of-type {
  border-left: none;
}
.chart-table table tr td .fundName {
  color: #714c0b;
}
.chart-table table tr td .fundName strong {
  color: #005598;
  font-weight: normal;
}
.chart-table table tr td i.fa-solid {
  font-size: 26px;
  vertical-align: middle;
}
.chart-table table tr td .fa-circle-check {
  color: #28a745;
}
.chart-table table tr td .fa-circle-xmark {
  color: #f26a64;
}
.chart-table table tr td i.bigger {
  font-size: 26px;
}
.chart-table table tr td.dark {
  background-color: #7d818e;
  color: #ffffff;
}
.chart-table table tr:nth-of-type(2n + 0) {
  background: #f2f2f2;
}
.chart-table table tr.focusTr {
  background: #fff8e8;
}
.chart-table.type2 table {
  border-spacing: 0px;
  border-radius: 0;
}
.chart-table.type2 table tr td {
  border-left: solid 1px #cacaca;
  border-bottom: none;
}
.chart-table.type2 table tr td:first-of-type {
  border-left: none;
}
.chart-table.type2 table thead tr {
  background: #303030;
}
.chart-table.type2 table thead tr a {
  color: #fff;
  border-bottom: solid 1px;
}
.chart-table.type2 table thead tr a:hover {
  border-bottom-color: transparent;
}
.chart-table.type2 table tbody tr:nth-of-type(2n + 0) {
  background: #efefef;
}
.chart-remark {
  font-size: 14px;
  margin: 10px 0px;
  color: #444;
}
.chart-remark b,
.chart-remark strong {
  color: #333;
}
.chart-chartAndText {
  font-size: 0px;
}
.chart-chartAndText .chart,
.chart-chartAndText .chartText {
  display: inline-block;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}
.chart-chartAndText .chart-img {
  margin-top: 0px;
}
.chart-chartAndText .chartText {
  padding-left: 12px;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .chart-area {
    margin: 15px 0px;
  }
  .chart-area .chart {
    display: block;
    padding: 0px;
    width: auto;
    margin: 15px 0px;
  }
  .chart-area .chart + .chart {
    margin-top: 25px;
  }
  .chart-area.threeChart .chart {
    width: auto;
  }
  .chart-tit {
    font-size: 17px;
  }
  .chart-tit.type2 {
    font-size: 17px;
  }
  .chart-tit.type2:before {
    width: 6px;
    height: 17px;
    top: -1px;
  }
  .chart-table {
    width: 90%;
    margin: 20px auto;
  }
  .chart-table table {
    font-size: 16px;
  }
  .chart-remark {
    font-size: 12px;
  }
  .chart-chartAndText .chart,
  .chart-chartAndText .chartText {
    display: block;
    width: auto;
  }
  .chart-chartAndText .chartText {
    padding-left: 0px;
    font-size: 16px;
  }
}

/* -- 推薦基金------------------------------------ */
.Funds_section {
  width: 95%;
  max-width: 1200px;
  margin: 20px auto;
}

.prodList {
  list-style: none;
  display: block;
  margin: 0 auto 36px;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 16px;
  text-align: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.prodList-li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-top: solid 1px #dbdbdb;
  padding: 20px 0;
}
.prodList-li-name {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 80%;
  font-size: 20px;
  line-height: 1.4;
  font-weight: normal;
  color: #514f4f;
  padding: 20px 10px;
}

@media screen and (max-width: 811px) {
  .prodList-li-name {
    width: 100%;
    margin: 0 auto;
    font-size: 18px;
    padding: 0 0 15px 0;
  }
}
.prodList-li-name strong,
.prodList-li-name a {
  color: #4497c7;
}
.prodList-li-name .intro {
  display: block;
  color: #ff595a;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: normal;
}
.prodList-li-name .intro.rr5:after {
  content: " | RR5";
}
.prodList-li-name .intro.rr4:after {
  content: " | RR4";
}
.prodList-li-name .intro.rr3:after {
  content: " | RR3";
}
.prodList-li-name .intro.rr2:after {
  content: " | RR2";
}
.prodList-li-name .intro.rr1:after {
  content: " | RR1";
}
.prodList-li-name .type {
  display: inline-block;
  color: #ffffff;
  background-color: #c3b689;
  font-size: 16px;
  padding: 0.5em 1em;
  border-radius: 8px;
  margin-bottom: 8px;
  font-weight: normal;
}
.prodList-li-name i.fa-circle-info {
  cursor: pointer;
  color: #c3b689;
}
.prodList-li .btnArea {
  width: 260px;
  text-align: center;
  white-space: nowrap;
}
.prodList-li:first-child {
  border: 0;
}
.prodList-li-warn {
  display: none;
  font-size: 16px;
  line-height: 1.4;
  color: #444444;
  margin: 0px;
  padding: 16px 16px 16px 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .prodList {
    padding: 15px 10px;
  }
  .prodList-li {
    display: block;
  }
  .prodList-li .btnArea {
    width: 100%;
  }
}

.btn {
  display: inline-block;
  vertical-align: top;
  padding: 8px 0px;
}

.btnArea {
  text-align: center;
  font-size: 0px;
  margin: 10px 0px;
}

.btnArea.threeBtn .btn,
.btnArea.twoBtn .btn {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 50%;
}

.btnArea.threeBtn .btn {
  max-width: 33.3333333333%;
}

.btn a,
.btn button,
.btn span {
  font-size: 18px;
  display: block;
  color: #fff;
  line-height: 50px;
  border-radius: 30px;
  transition: 0.3s ease all;
  text-align: center;
  box-sizing: border-box;
  padding: 0px 42px;
  background: #3266a6;
  overflow: hidden;
  position: relative;
  box-shadow: 0 3px 0 rgba(65, 65, 65, 0.25);
}


@media screen and (max-width: 767px) {
  .btn {
    display: block;
  }
  .btn a,
  .btn button,
  .btn span {
    font-size: 17px;
    line-height: 45px;
    width: 100%;
    padding: 0px 20px;
  }
  .btnArea.threeBtn .btn,
  .btnArea.twoBtn .btn {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 8px;
  }
}

.btn a:before,
.btn button:before,
.btn span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.1);
  width: 0px;
  height: 0px;
  transition: 0.6s ease-in-out all;
}

.btn a:hover:before,
.btn button:hover:before,
.btn span:hover:before {
  width: 800px;
  height: 800px;
}

.btn a.short,
.btn button.short,
.btn span.short {
  padding: 0px 1em;
}

.btn.twoLines a,
.btn.twoLines button,
.btn.twoLines span {
  line-height: 1.2;
  padding-top: 16px;
  padding-bottom: 16px;
}

.btn.type2 a,
.btn.type2 button,
.btn.type2 span {
  padding: 0 20px;
}

.btn.type3 a,
.btn.type3 button,
.btn.type3 span {
  background: #ee5c45;
}

.btn.type4 a,
.btn.type4 button,
.btn.type4 span {
  background: #333333;
}

@media screen and (min-width: 767px) {
  .btn.type5 a,
  .btn.type5 button,
  .btn.type5 span {
    width: 220px;
  }
}

/* -- 前言------------------------------------ */
#foreword {
  width: 100%;
  background-color: #eef3f9;
}

.foreword_block {
  display: inline-block;
}

.foreword_block.type1 {
  width: 90%;
  max-width: 400px;
  text-align: left;
  vertical-align: top;
  padding: 20px 60px 0 10px;
}

.foreword_block.type2 {
  width: 90%;
  max-width: 800px;
  vertical-align: top;
}

.foreword_block h2 {
  margin: 0;
  width: 100%;
}

.foreword_block p {
  font-size: 20px;
  text-align: justify;
  line-height: 1.7;
  padding: 20px 0 0 0;
}

.foreword_block_img {
  width: 100%;
}

@media screen and (min-width: 812px) and (max-width: 1290px) {
  .foreword_block.type1 {
    width: 90%;
    max-width: 800px;
    text-align: center;
    vertical-align: top;
    padding: 0 0 20px 0;
  }
}

@media screen and (max-width: 811px) {
  .foreword_block.type1 {
    padding: 10px 0;
  }

  .foreword_block h2 {
    padding: 0;
    text-align: center;
  }

  .foreword_block p {
    font-size: 17px;
    text-align: justify;
    line-height: 1.6;
    padding: 15px 0 0 0;
  }
}

/* -- 課題 ------------------------------------ */
#Topic_1,
#Topic_2,
#Topic_3 {
  width: 100%;
  background-color: #0168b7;
  background-repeat: no-repeat, no-repeat;
  background-position: center left;
}

.topic_line {
  width: 90%;
  max-width: 850px;
  height: 2px;
  background-color: #64afdd;
  margin: 0 auto;
}

.topic_text {
  font-size: 23px;
  letter-spacing: 3px;
  font-weight: normal;
  width: 140px;
  padding: 8px 25px;
  color: #ffffff;
  background-color: #64afdd;
  margin: 0 0 5px 0;
}

.topic_section {
  width: 95%;
  max-width: 1000px;
  background-color: #ffffff;
  border-radius: 15px;
  margin: 60px auto;
  padding: 40px 50px 20px 50px;
}

@media screen and (min-width: 812px) and (max-width: 1199px) {
  #Topic {
    background-image: none;
  }

  .topic_section {
    width: 85%;
    margin: 60px auto;
    padding: 40px 20px 20px 20px;
  }
}

@media screen and (max-width: 811px) {
  #Topic {
    background-image: none;
  }

  .topic_text {
    font-size: 20px;
    width: 100px;
  }

  .topic_section {
    width: 85%;
    margin: 60px auto;
    padding: 40px 20px 20px 20px;
  }
}

/* --退休到底需要準備多少錢？------------------------------------ */

#HowMuch {
  background-color: #eef3f9;
  position: relative;
}

.HowMuch-people {
  display: none;
}

@media screen and (min-width: 1281px) {
  .HowMuch-people1 {
    display: block;
    width: 130px;
    position: absolute;
    z-index: 0;
    left: 12%;
    top: 15%;
  }

  .HowMuch-people2 {
    display: block;
    width: 130px;
    position: absolute;
    z-index: 0;
    right: 12%;
    top: 38%;
  }
}

/* --開戶之後，我可以投資什麼？------------------------------------ */

#theme {
  background-color: #ffffff;
  background-image: url(image/theme_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* --中租「樂退休」提供各人生階段的退休準備解決方案------------------------------------ */
#LifeStage {
  background-color: #e5f6ff;
  background-image: url(image/LifeStage_bg.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

@media screen and (min-width: 1920px) {
  #LifeStage {
    background-size: cover;
  }
}

/* --「樂退休」四大優勢------------------------------------ */
#HowMuchs {
  background-color: #e2f2ff;
}

/* --人人都想提早退休，但你做了哪些努力呢？------------------------------------ */
#Group {
  background-color: #0168b7;
}

/* --主題導流------------------------------------ */
#diversion {
  background-image: url(image/grid_bg.png);
  background-repeat: repeat;
}

/* --退休試算------------------------------------- */
#Planning {
  min-height: 650px;
  background-color: #ffffff;
  background-image: url(image/Planning_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-bottom: 0;
}

.content_text_planning {
  width: 85%;
  max-width: 450px;
  color: #ffffff;
  line-height: 1.8;
  text-align: center;
  background-color: #d862a3;
  padding: 40px 80px;
  border-radius: 10px;
  margin-top: 40px;
  -webkit-box-shadow: 2px 5px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 5px 2px 0px rgba(255, 200, 218, 0.4);
}
.content_planning {
  width: 95%;
  max-width: 1300px;
  margin: 0 auto;
  padding-bottom: 0;
}

.planning_people {
  position: absolute;
  bottom: 0;
}

.planning_people img {
  width: 340px;
}

@media screen and (min-width: 812px) and (max-width: 1199px) {
  #Planning {
    min-height: 800px;
  }

  .content_text_planning {
    max-width: 580px;
    width: 70%;
    padding: 40px 50px;
  }

  .content_planning {
    width: 80%;
    max-width: 800px;
  }

  .planning_people img {
    width: 260px;
  }
}

@media screen and (min-width: 668px) and (max-width: 811px) {
  #Planning {
    min-height: 700px;
  }

  .content_text_planning {
    max-width: 580px;
    width: 70%;
    padding: 40px 50px;
  }

  .content_planning {
    width: 80%;
    max-width: 800px;
  }

  .planning_people img {
    width: 260px;
  }
}

@media screen and (max-width: 667px) {
  #Planning {
    min-height: 760px;
    background-image: url(image/Planning_bg_2.png);
  }

  .content_text_planning {
    width: 70%;
    padding: 20px 20px 30px 20px;
    margin-top: 20px;
  }

  .planning_people img {
    width: 90%;
    max-width: 250px;
  }
}

#Lifestyle {
  background-color: #fff5fb;
}

.Lifestyle_tab {
  padding: 40px 0 0 0;
}

.cardArea_section_tab {
  flex-wrap: nowrap;
}

.cardArea_tab {
  width: calc(30% - 30px);
  background-color: #ffffff;
  padding: 30px 30px 40px 35px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 60px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 5px 5px 0px rgb(218 235 207 / 40%);
}

.tabArea {
  padding: 40px 0 20px 0;
}

.tabArea p {
  width: 100%;
}

.tabArea ul {
  font-size: 18px;
  text-align: left;
  list-style: decimal;
  padding: 10px 0;
  line-height: 1.7em;
  letter-spacing: 1px;
  color: #626262;
}

.topicNav {
  list-style: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px auto;
  padding: 0px;
  display: block;
  text-align: center;
  letter-spacing: 0px;
}

.topicNav > li {
  max-width: 320px;
  cursor: pointer;
  display: inline-grid;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.9em 3em !important;
  margin: 5px 12px;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 10px;
  color: #969696;
  background-color: #ffffff;
  white-space: nowrap;
  -webkit-box-shadow: 2px 5px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 5px 2px 0px rgba(255, 200, 218, 0.4);
}

.topicNav > li {
  max-width: 320px;
  cursor: pointer;
  display: inline-grid;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.9em 3em !important;
  margin: 5px 12px;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 10px;
  color: #969696;
  background-color: #ffffff;
  white-space: nowrap;
  -webkit-box-shadow: 2px 5px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 5px 2px 0px rgba(255, 200, 218, 0.4);
}

.topicNav > li.type2 {
  width: calc(50% - 15px);
  max-width: 600px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.9em 3em !important;
  margin: 0px 5px 10px;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 10px;
  color: #969696;
  background-color: #ffffff;
  white-space: nowrap;
  -webkit-box-shadow: 5px 5px 60px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 5px 5px 0px rgb(218 235 207 / 40%);
}

.topicNav > li.act {
  background-color: #e565b5;
  color: #fff;
}

.topicNav > li.act.type2 {
  background-color: #18744e;
  color: #fff;
}

.tabBox {
  width: 100%;
  overflow: hidden;
  height: 0px;
}
.tabBox.act {
  width: 95%;
  max-width: 1200px;
  height: 100%;
  /*border:3px solid #696aad;
	background-color: #FFFFFF;*/
  border-radius: 20px;
  padding: 30px 0 20px 0;
  margin: 0 auto;
}

.tabBox img {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.account_step_pc {
  display: block;
}

.account_step_mobile {
  display: none;
}

.bankArea {
  max-width: 900px;
  margin: 15px auto;
  font-size: 18px;
  background-color: rgb(212 233 219);
  padding: 20px 50px 40px 50px;
  text-align: justify;
  line-height: 1.6;
}

.cardAreaQA {
  max-width: 1000px;
  background-color: #ffffff;
  padding: 40px;
  border-radius: 10px;
  margin: 0 auto;
  -webkit-box-shadow: 5px 5px 60px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 5px 5px 0px rgb(218 235 207 / 40%);
}

.cardAreaQA ul li {
  list-style: none;
  text-align: justify;
  line-height: 1.6;
}

.cardAreaQA .tit {
  font-size: 21px;
  font-weight: bold;
  color: #18744e;
  letter-spacing: 2px;
  padding: 0 0 10px 0;
}

.cardAreaQA p {
  font-size: 20px;
}

.cardAreaQA .line {
  width: 100%;
  height: 1px;
  background-color: #c7c7c7;
  margin: 20px 0;
}

@media screen and (max-width: 931px) {
  .Lifestyle_tab {
    padding: 20px 10px;
  }

  .tabArea ul {
    list-style-position: inside;
  }

  .topicNav > li {
    padding: 1em 0.8em !important;
    font-size: 19px;
    white-space: normal;
    display: inline-block;
    margin: 5px 4px;
    max-width: 120px;
  }

  .topicNav > li.type2 {
    padding: 1em 1.5em !important;
    font-size: 20px;
    white-space: normal;
  }

  .cardArea_tab {
    width: 100%;
    max-width: 600px;
    padding: 30px 30px 40px 50px;
  }

  .cardArea_section_tab {
    width: 100%;
    flex-wrap: wrap;
  }

  .tabBox.act {
    width: 90%;
    padding: 20px 0;
  }

  .account_step_pc {
    display: none;
  }

  .account_step_mobile {
    display: block;
  }

  .bankArea {
    font-size: 16px;
    padding: 20px 25px 40px 25px;
  }

  .cardAreaQA .tit {
    font-size: 18px;
    padding: 0;
  }

  .cardAreaQA {
    padding: 30px 20px;
  }

  .cardAreaQA p {
    font-size: 16px;
  }
}

@media screen and (max-width: 540px) {
  .cardArea_tab {
    width: 80%;
    max-width: 600px;
    padding: 30px 20px 30px 25px;
  }

  .tabArea ul {
    font-size: 16px;
    list-style-position: outside;
  }
}

#Joinin {
  min-height: 450px;
  background-color: #fffbfd;
  background-image: url(image/Joinin_bg.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  position: relative;
  padding-bottom: 0;
}
.Joinin_people img {
  position: absolute;
  width: 80%;
  max-width: 450px;
  right: 2%;
  bottom: 5%;
}

@media screen and (max-width: 1280px) {
  #Joinin {
    min-height: 680px;
  }

  .Joinin_people img {
    left: 50%;
    transform: translate(-50%);
  }
}

/* --退休帳戶幫自己存退休金 首選中租基金平台 */

#Savemoney {
  position: relative;
}

.Savemoney_img {
  display: none;
}

@media screen and (min-width: 1281px) {
  .Savemoney_img1 {
    display: block;
    width: 300px;
    position: absolute;
    z-index: 0;
    left: 5%;
    top: 8%;
  }

  .Savemoney_img2 {
    display: block;
    width: 320px;
    position: absolute;
    z-index: 0;
    right: 5%;
    bottom: 8%;
  }
}

/* --退休帳戶 ------------------------------------- */

#AboutTISA {
  position: relative;
  background-color: #ecf8f6;
}

.TISA-people {
  display: none;
}

@media screen and (min-width: 1281px) {
  .TISA-people1 {
    display: block;
    width: 160px;
    position: absolute;
    z-index: 0;
    left: 10%;
    top: 55%;
  }

  .TISA-people2 {
    display: block;
    width: 150px;
    position: absolute;
    z-index: 0;
    right: 9%;
    top: 55%;
  }
}

#Friendly {
  background-color: #eeeeee;
}

#openAccount {
  background-color: #eef9f6;
}

.openAccount_tab {
  padding: 40px 0 0 0;
}

.cardArea_openAccount li {
  width: 100%;
  font-size: 17px;
  text-align: left;
  list-style: decimal;
  padding: 5px 0;
  line-height: 1.2em;
  letter-spacing: 1px;
  color: #626262;
  list-style-position: inside;
}

@media screen and (max-width: 931px) {
  .openAccount_tab {
    padding: 20px;
  }

  .cardArea_openAccount li {
    font-size: 16px;
  }
}

/* --推薦基金 ------------------------------------- */

#Funds_RSP {
  background-color: #f1f9ff;
}

#Funds_Profit {
  background-color: #cee4f5;
}

#Funds_TISA {
  background-color: #f0f9f7;
}

/* --推薦基金輪播 ------------------------------------- */
.Funds_block {
  padding: 20px 0;
}

.Funds_block_item {
  width: 300px;
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 5px;
  padding: 15px;
}

.Funds_block_item p {
  font-size: 17px;
  color: #3a3a3a;
  line-height: 1.4;
  text-align: justify;
  padding: 10px 5px;
}

.Funds_hight_1 {
  min-height: 100px;
}

.Funds_hight_2 {
  min-height: 48px;
}

.Funds_block_item b {
  color: #0168b7;
}

.Funds_info {
  width: 100px;
  border-radius: 5px;
  background-color: #001a4f;
  color: #ffffff;
  padding: 5px;
  margin-top: 5px;
}

.Funds_info.type1 {
  background-color: #8d99b1;
}
@media screen and (min-width: 845px) and (max-width: 1080px) {
  .Funds_block_item {
    width: 360px;
  }
}

@media screen and (max-width: 844px) {
  .Funds_block_item {
    max-width: 360px;
    width: 80%;
  }

  .Funds_hight_1 {
    min-height: 80px;
  }

  .Funds_hight_2 {
    min-height: 30px;
  }
}

/* --推薦基金頁籤 ------------------------------------- */
.pushfund-nav {
  list-style: none;
  box-sizing: border-box;
  margin: 40px auto 0 auto;
  padding: 0px;
  display: block;
  text-align: center;
  overflow-x: auto;
  letter-spacing: 0px;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.pushfund-nav > li {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  padding: 0.5em 1em !important;
  margin: 0px 5px 10px;
  font-size: 19px;
  letter-spacing: 1px;
  line-height: 1.4;
  font-weight: bold;
  border-radius: 50px;
  color: #001a4f;
  background-color: #ffffff;
  border: 3px solid #001a4f;
  white-space: nowrap;
}
.pushfund-nav > li p {
  width: auto;
  font-size: 16px;
  text-align: center;
}
.pushfund-nav > li.act {
  background-color: #001a4f;
  color: #ffffff;
}
.pushfund-box {
  display: none;
}
.pushfund-box.box0 {
  display: block;
}

.container {
  margin: 0 auto;
  padding: 0px;
  max-width: 1140px;
  width: 100%;
}

@media screen and (min-width: 992px) {
  .pushfund-nav > li {
    width: 250px;
  }

  .pushfund-nav-type2 > li {
    width: auto;
  }
}

@media screen and (max-width: 1199px) {
  .container {
    margin: 0px 65px;
    width: auto;
  }
}
@media screen and (max-width: 991px) {
  .container {
    margin: 0px 25px;
  }
  .pushfund-nav > li {
    width: 30%;
  }

  .pushfund-nav-type2 > li {
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  .container {
    margin: 0px 15px;
  }
  .pushfund-nav {
    margin: 10px auto 0 auto;
  }

  .pushfund-nav > li {
    width: 90%;
    display: block;
    margin: 10px auto;
    font-size: 18px;
    line-height: 1.4;
  }

  .pushfund-nav-type2 {
    display: inline-flex;
    width: 90%;
    max-width: 600px;
  }
}

#OtherFunds {
  width: 95%;
  max-width: 1100px;
  margin: 0 auto;
}

.chart-logo img {
  width: 100%;
  max-width: 240px;
}

.careList {
  list-style: none;
  margin: 0px auto;
  padding: 0px;
  text-align: left;
}

.careList li {
  font-size: 20px;
  line-height: 1.4;
  color: #333333;
}

.cardList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 0;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  list-style: none;
  justify-content: center;
}
.cardList.warp {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cardList.flex-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.cardList > li {
  width: 100%;
  margin: 24px 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.cardList > li .card-img {
  margin: 0px auto;
  padding: 0px;
  position: relative;
}
.cardList > li .card-img > img {
  display: block;
  height: 100%;
  max-height: 90px;
  margin: 0 auto;
}
.cardList > li .card-img > img.large {
  display: block;
  height: 100%;
  max-height: 180px;
  margin: 0 auto;
}
.cardList > li .card-img.bg {
  width: auto;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 50px;
  display: inline-block;
}
.cardList > li .card-img .tag1 {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  padding: 4px;
  background-color: #3c3c3c;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.cardList > li .card-tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #3c3c3c;
  padding-top: 16px;
}
.cardList > li .card-tit.gold {
  color: #c3b689;
}
.cardList > li .card-tit strong {
  position: relative;
}
.cardList > li .card-tit strong .tag {
  width: 150%;
  position: absolute;
  z-index: 2;
  left: 40px;
  top: calc(-100% - 8px);
  background-color: #005598;
  color: #ffffff;
  font-size: 14px;
  padding: 6px;
  border-radius: 6px;
  font-weight: normal;
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.cardList > li .card-tit strong .tag:before {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 10px;
  border-top: solid 8px #005598;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
}
.cardList > li .card p {
  padding: 0px 16px;
  color: #3c3c3c;
}
.cardList > li .card p.nomt {
  margin-top: 0px;
}
.cardList > li.padd {
  padding: 16px;
}
.cardList > li.bg1,
.cardList > li.bg2,
.cardList > li.bg3,
.cardList > li.bg4,
.cardList > li.bg5,
.cardList > li.bg6 {
  padding: 16px;
  margin: 0px 8px 16px;
  border-radius: 20px;
}
.cardList > li.shadow {
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
.cardList > li.bg1 {
  background-color: #ffeeee;
}
.cardList > li.bg1 .card .card-img {
  margin: 0px auto;
  padding: 0px;
}
.cardList > li.bg1 .card .card-img img {
  display: block;
  height: 100%;
  max-height: 200px;
  margin: 0 auto;
}
.cardList > li.bg1 .card .card-tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #f26a64;
  padding-top: 16px;
}
.cardList > li.bg2 {
  background-color: #f2f9e8;
}
.cardList > li.bg3 {
  background-color: #efeaea;
}
.cardList > li.bg4 {
  background-color: #f1f9ff;
}
.cardList > li.bg4 .card .card-img {
  margin: 0px auto 16px;
  padding: 0px;
}
.cardList > li.bg4 .card .card-img img {
  display: block;
  height: 100%;
  max-height: 200px;
  margin: 0 auto;
}
.cardList > li.bg4 .card .card-tit {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  padding: 0.4em 1.2em;
  border-radius: 60px;
  background-color: #4477c1;
}
.cardList > li.bg4.red {
  background-color: #fef3f3;
}
.cardList > li.bg4.red .card .card-tit {
  background-color: #ff725c;
}
.cardList > li.bg5 {
  background-color: #ffffff;
}
.cardList > li.bg6 {
  background-color: #f1f9ff;
  border-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 0px;
}
.cardList > li.bg6 .card .card-img {
  margin: 0px auto;
  padding: 0px;
}
.cardList > li.bg6 .card .card-img > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0 auto;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.cardList > li.bg6 .card .card-tit {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
  padding: 16px;
  min-height: 87px;
}
.cardList > li.bg6 .card .card-tit.nomin {
  min-height: auto;
}
.cardList > li.bg6 .card .card-tit a {
  font-weight: normal;
  color: #3c3c3c;
}
.cardList > li.bg6 .card .btnArea {
  margin: 0px 16px 16px;
}
.cardList.two > li {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .cardList.two > li {
    width: 90%;
  }
}
.cardList.three > li {
  width: 30%;
}
@media screen and (max-width: 767px) {
  .cardList.three > li {
    width: 100%;
  }
}
.cardList.four > li {
  width: 25%;
}
@media screen and (max-width: 767px) {
  .cardList.four > li {
    width: 100%;
  }
}
@media screen and (max-width: 840px) {
  .cardList > li.bg6 {
    margin: 0px 0px 16px;
  }
  .cardList > li.bg6 .card .card-tit {
    min-height: auto;
  }
}
@media screen and (max-width: 376px) {
  .cardList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .cardList > li {
    width: 90%;
    margin: 0px auto 24px;
  }
  .cardList > li.bg1,
  .cardList > li.bg2,
  .cardList > li.bg3,
  .cardList > li.bg4 {
    margin: 0px 0px 16px;
  }
  .cardList > li .card-tit {
    font-size: 18px;
    padding-top: 16px;
  }
  .cardList > li .card-tit a {
    font-size: 18px;
    line-height: 1.6;
    font-weight: normal;
    color: #3c3c3c;
  }
  .cardList > li .card-img img {
    max-height: 100px;
  }
  .cardList > li.padd {
    padding: 0px 0px 16px;
  }
  .cardList > li.bg6 {
    margin: 0px 0px 16px;
  }
  .cardList > li.bg6 .card .card-tit {
    min-height: auto;
  }
}

/* --QA------------------------------------- */

#QA {
  background-color: #f7f8f8;
}

.accordions {
  width: 85%;
  max-width: 1000px;
  margin: 60px auto;
}

.accordion-item {
  background-color: #fff;
  margin-bottom: 20px;
  border: 1px solid #0168b7;
  border-radius: 5px;
}

.accordion-item .accordion-title {
  cursor: pointer;
  padding: 20px;
  transition: all 0.4s;
  border-radius: 5px 5px 0 0;
}

.accordion-item .accordion-title.active-title {
  background-color: #0168b7;
  color: #fff;
}

.accordion-item .accordion-title h2 {
  width: 100%;
  margin: 0;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  text-align: initial;
  line-height: 1.3;
  font-weight: normal;
}

.accordion-item .accordion-title i.fa-chevron-down {
  transform: rotate(0);
  transition: 0.4s;
  width: 22px;
  height: 13px;
  color: #0168b7;
  background-repeat: no-repeat;
  padding: 0 5px 0 10px;
  background-position: center right;
}

.accordion-item .accordion-title i.fa-chevron-down.chevron-top {
  transform: rotate(-180deg);
  transition: 0.4s;
  width: 22px;
  height: 13px;
  color: #ffffff;
  background-repeat: no-repeat;
  padding: 0 5px 0 10px;
  background-position: center left;
}

.accordion-item .accordion-content {
  display: none;
  line-height: 1.7;
  padding: 20px;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}

.accordion-item .accordion-content.active {
  display: block;
}

.accordion-content-text {
  font-size: 18px;
  text-align: justify;
}

.accordion-content-text a {
  color: #0069a8;
}

.accordion-content-text li {
  list-style-type: none;
  padding: 8px 0 0 0;
}

.accordion-content-item {
  list-style-type: decimal;
  list-style-position: inside;
}

@media screen and (max-width: 811px) {
  .accordions {
    margin: 10px auto;
  }

  .accordion-item .accordion-title h2 {
    font-size: 14px;
  }

  .accordion-item .accordion-title {
    cursor: pointer;
    padding: 8px 12px 14px 12px;
    transition: all 0.4s;
    border-radius: 5px 5px 0 0;
  }

  .accordion-item .accordion-content {
    line-height: 1.5;
    padding: 20px 12px;
  }

  .accordion-content-text {
    font-size: 13px;
    text-align: justify;
  }
}
/* --名人觀點------------------------------------- */
#viewpoint{
  width: 100%;
  background-image: url(image/viewpoint_bg.png);
  background-color:#a3d8bf;
  background-repeat: no-repeat;
  background-position: center bottom;
}

 .card2 {
	 display: -webkit-box;
	 display: -ms-flexbox;
	 display: flex;
   width: 85%;
	 max-width: 1000px;
	 margin: 40px auto ;
	 padding: 0px;
	 text-decoration: none;
	 -webkit-box-orient: horizontal;
	 -webkit-box-direction: normal;
	 -ms-flex-direction: row;
	 flex-direction: row;
	 -ms-flex-wrap: nowrap;
	 flex-wrap: nowrap;
	 -webkit-box-pack: start;
	 -ms-flex-pack: start;
	 justify-content: flex-start;
	 -webkit-box-align: center;
	 -ms-flex-align: center;
	 align-items: center;
	 overflow: hidden;
	 border-radius: 15px;
	 background-color: #fff;
}
 .card2 img {
    width: 100%;
    max-width: 400px;
    height: stretch;
    margin: 0px auto;
    display: block;
    object-fit: cover;
}
 .card2-content {
	 -webkit-box-sizing: border-box;
	 box-sizing: border-box;
	 padding: 24px;
	 margin: 0px;
	 -webkit-box-flex: 1;
	 -ms-flex-positive: 1;
	 flex-grow: 1;
	 vertical-align: middle;
}
 .card2-content .title {
	 font-size: 36px;
	 font-weight: bold;
	 color: #3c3c3c;
	 display: inline-block;
	 width: 100%;
	 vertical-align: middle;
}
 .card2-content .pagr {
	 color: #3c3c3c;
	 font-size: 21px;
	 line-height: 1.4;
	 display: inline-block;
	 width: 100%;
	 vertical-align: middle;
}
 .card2-content > .btn {
	 display: table;
	 vertical-align: middle;
}
 @media screen and (max-width: 767px) {
	 .card2 {
		 -webkit-box-orient: vertical;
		 -webkit-box-direction: normal;
		 -ms-flex-direction: column;
		 flex-direction: column;
		 -ms-flex-wrap: wrap;
		 flex-wrap: wrap;
		 -webkit-box-pack: center;
		 -ms-flex-pack: center;
		 justify-content: center;
		 -webkit-box-align: center;
		 -ms-flex-align: center;
		 align-items: center;
		 padding: 0px;
		 margin: 16px auto;
	}
	 .card2 img {
		 width: 100%;
		 max-width: 100%;
		 margin: 0px;
	}
	 .card2-content {
		 width: 100%;
		 -webkit-box-sizing: border-box;
		 box-sizing: border-box;
		 padding: 15px ;
	}
	 .card2-content .title {
		 font-size: 24px;
	}
	 .card2-content .pagr {
		 font-size: 18px;
	}
	 .card2-content > .btn {
		 display: inline-block;
		 vertical-align: middle;
	}
}

/* --側邊按鈕------------------------------------- */
.fixedRightBtn-area {
  position: fixed;
  top: 50%;
  right: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 999;
  display: none;
}

.fixedRightBtn a {
  display: block;
  text-align: center;
  width: 40px;
  color: #ffffff;
  padding: 14px 9px;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 20px;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  position: relative;
  left: 0%;
  margin-bottom: 5px;
  border-radius: 10px 0 0 10px;
}

.fixedRightBtn b {
  writing-mode: tb-rl;
}

.link_1 {
  background: #14b64a;
}

.link_2 {
  background: #3266a6;
}

.link_1:hover {
  background: #0a9b3a;
}

.link_2:hover {
  background: #1c4d8a;
}

@media screen and (max-width: 667px) {
  .fixedRightBtn-area {
    top: auto;
    bottom: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    display: none;
  }

  .fixedRightBtn a {
    display: inline-block;
    width: 50%;
    font-size: 16px;
    margin-bottom: 0px;
    border-radius: 0;
  }

  .fixedRightBtn b {
    writing-mode: horizontal-tb;
  }
}

/* --基金公司警語------------------------------------- */

#company_attention {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
  color: #525252;
  background-color: #e9e9e9;
  padding: 40px 0;
}

.company_attention_text {
  max-width: 1140px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 30px;
}

.company_attention_item {
  display: inline-block;
  padding-right: 40px;
}

@media screen and (max-width: 811px) {
  #company_attention {
    font-size: 14px;
  }
}

/* --注意事項------------------------------------- */

#CONTENT_Attention {
  padding: 60px 0;
  background-color: #f7f8f8;
}

.Attention_tit {
  padding: 60px 0 0 0;
}

.Attention_text li {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: #595757;
  list-style-type: cjk-ideographic;
  text-align: justify;
}
.Attention_item li {
  width: 100%;
  list-style-type: decimal;
}

.Attention_title {
  max-width: 1200px;
  width: 85%;
  margin: 0 auto;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #5e5e5e;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
}

@media screen and (min-width: 1200px) {
  #campaign_infotext {
    width: 100%;
    text-align: center;
    background-color: #f7f8f8;
  }

  #Attention {
    margin: 0 auto;
    width: auto;
    padding-top: 40px;
    padding-bottom: 70px;
    text-align: left;
  }
}

@media screen and (min-width: 668px) and (max-width: 1199px) {
  #campaign_infotext {
    width: 100%;
    text-align: center;
    background-color: #f7f8f8;
  }

  #Attention {
    margin: 0 auto;
    width: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
  }
}

@media screen and (max-width: 667px) {
  #campaign_infotext {
    width: 100%;
    text-align: center;
    background-color: #f7f8f8;
    padding-bottom: 30px;
  }

  #Attention {
    margin: 0 auto;
    width: auto;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: left;
  }

  .Attention_title {
    font-size: 16px;
  }

  .Attention_text li {
    width: 80%;
    font-size: 16px;
    line-height: 1.5;
  }

  .Attention_item li {
    width: 100%;
  }
}

/* --圖表箭頭------------------------------------- */
.slick-prev i, 
.slick-next i {
    font-size: 35px; 
    color: #000;    
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.slick-prev:hover i, 
.slick-next:hover i {
    opacity: 1;
}

/* --返回上方------------------------------------- */
.topBtn {
  position: fixed;
  z-index: 1;
  bottom: 35px;
  right: 15px;
  transition: 0.5s ease transform, 0.3s ease opacity;
  opacity: 1;
  cursor: pointer;
  display: none;
}

.topBtn article {
  display: block;
  border-radius: 100%;
  width: 45px;
  height: 45px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  transition: 0.3s ease all;
  position: relative;
  top: 0px;
  padding-top: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 0px 2px #fff;
}

.topBtn article span {
  position: relative;
}

.topBtn article i {
  display: block;
  margin: 0 auto;
}

.topBtn article:hover {
  opacity: 0.7;
}

@media screen and (max-width: 1199px) {
  .topBtn {
    right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .topBtn {
    bottom: 80px;
  }
  .topBtn article {
    width: 40px;
    height: 40px;
    font-size: 0px;
  }
  .topBtn article i {
    font-size: 20px;
  }
}

/* --footer------------------------------------- */
/*
footer {
	background: #3D3D3D;
	color: #F7F7F7;
	line-height: 1.8;
	margin:0;
	padding: 40px 0 50px;
	box-sizing: border-box;
}

footer > div {
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
	padding:0 30px;
}

footer > div > dl {
	padding: 10px 0 10px 1.5em;
	margin: 10px auto;
	border-top: 2px solid #F7F7F7;
	border-bottom: 2px solid #F7F7F7;
	display: block;
}
footer > div > dl dt,
footer > div > dl dd{
	margin: 0;
	line-height: 1.5;
	font-size: 16px;
	display: list-item;
}
footer > div > dl dt {
	list-style-type: square;
}

footer > div > dl dd:nth-of-type(even) {
	font-size: 16px;
}

footer > div > dl dd a,
footer > div > dl dt a {
	color: #F7F7F7;
	text-decoration: none;
}

footer > div > p {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	padding: 0;
	text-align: left;
	position: relative;
}
footer > div > p b{
	display: inline-block;
	padding: 0 0 0 16px;
}
footer > div > p > .socialBox{
	display: inline-block;
	text-align: right;
	position: absolute;
	right:0;
	bottom:0;
	z-index: 2;	
	letter-spacing: 5px;
	padding: 0;	
}
footer > div > p > .socialBox > a{
	display: inline-block;
}
footer > div > p > .socialBox > a i{
	font-size:30px;
	color:#c8a973;
}
footer > div > p > .socialBox > a:hover i{
	color:#b49560;
}
footer > div > p > .socialBox > a .footIcon{
	font-size:36px;
	height:36px;
	display: inline-block;
	vertical-align: 0;
	border:none;
}

footer > div > .text_scroll {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 122px;
	width:100%;
	margin: 0;
	padding:0 16px 0 0;
	box-sizing: border-box;
}

footer > div > .text_scroll > p {
	margin: 0;
	font-weight:normal;
}

footer > div > .text_scroll span {
	color: #A89878;
	font-weight: bold;
}

.text_scroll{
	font-size: 15px;
}	

@media screen and (max-width: 669px){
	footer {
		padding: 20px 0;
		margin-bottom:48px;
	}
	footer > div > p {
		text-align: center;
	}
	footer > div > p b{
		display: block;
		padding: 0;
	}
	footer > div > p > .socialBox{
		display: block;
		text-align: center;
		position: relative;
		right:0;
		bottom:0;
		z-index: 1;	
		padding: 8px 0 0;
		letter-spacing: 16px;		
	}
	footer > div > p > .socialBox > a .footIcon{
		font-size:48px;
		height:48px;
		display: inline-block;
		vertical-align: 0;
		border:none;
	}

}*/