@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

@font-face{
  font-family: SweiGothicCJKtc-Bold;
  src: url('https://cdn.jsdelivr.net/gh/max32002/swei-gothic@2.129/WebFont/CJK%20TC/SweiGothicCJKtc-Bold.woff2') format("woff2"),
       url('https://cdn.jsdelivr.net/gh/max32002/swei-gothic@2.129/WebFont/CJK%20TC/SweiGothicCJKtc-Bold.woff') format("woff");
}
/*===== RESET =====*/
*{ margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

a{  
	outline: none;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover{ text-decoration: none; }
	  
img{ border: 0px; display: block; }
	  
ol,ul,li{ list-style-type: none; text-transform: none; }

body{
	margin: 0;
	padding: 0;
  background-color: #fff;
	font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;
	font-weight: 400;
}

/*===== COMMON =====*/
:root {
  --blue: #1e5d9f;
  --orange: #f15a24;
  --txtBlack: #333333;
}

.wrap{
  width: 100%;
  overflow: hidden;
}
.wrapper{
  width: 100%;
  position: relative;
}
.mobile{ display: none!important;}

/*===== NAVIGATION =====*/
.header{
  width: 100%;
  height: 100px;
  padding: 0 45px;
  background-color: #273550;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
  z-index: 99999;
  transition: all 0.5s ease-out;
}
.top_logo{
  width: 162px;
}
.top_logo img{ width: 100%;}

.menu_ctrl{ display: none;}
.menuBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu_inner{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.menu > li{
  margin: 0 0.87vw;
  display: inline-block;
  font-size: 20px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 100px;
  position: relative;
  cursor: pointer;
}
.menu > li span.eng{
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  vertical-align: -0.5px;
}
.menu > li > a{ display: block; color: #fff;}
.menu > li > a:hover{ transition: all 0.25s ease-out;}
.menu > li:hover, .menu > li > a:hover{ color: var(--orange);}

.social{
  margin: 0 0 0 0.87vw;
}
.social > li{
  width: 40px;
  margin: 0 0.58vw;
  display: inline-block;
}
.social > li a img{
  width: 100%;
}
.social > li a:hover{
  opacity: 0.85;
  transition: all 0.25s ease-out;
}

/*===== FLOAT BUTTON =====*/
#floatWrap{
  width: 90px;
  height: 175px;
  display: block;
  position: fixed;
  top: 325px;
  right: 3vw;
  z-index: 9989;
  cursor: pointer;
}
#floatWrap.slipTo{
  top: calc(100vh - 175px - 3vw);
  transition: all 0.5s ease-out;
}
.floatBtn{
  width: 90px;
  height: 175px;
  display: block;
  position: relative;
}
.floatBtn img{ width: 100%;}
.floatBtn:hover{
  background: url(../images/floatBtn_hover.png) no-repeat center center;
  background-size: 100%;
}
.floatBtn:hover img{
  opacity: 0;
  transition:all 0.25s ease-out;
}
.floatBtn::after{
  content: '';
  width: 90px;
  height: 175px;
  background-color: #f56124;
  border-radius: 45px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  animation: ripple 0.75s infinite ease-in;
}
@keyframes ripple{
  0%   {transform: scale(1, 1);opacity: 0.5;}
  100% {transform: scale(1.45, 1.25); opacity: 0;}
}

/*===== KV BANNER =====*/
.kv{
  width: 100%;
  height: 670px;
  margin-top: 100px;
}
.kv .banner{
  width: 100%;
}
.kv .banner .visuel{
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.kv .banner .visuel img{
  width: 2560px;
}
.kv .banner .visuel p{
  width: 530px;
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  text-align: justify;
  letter-spacing: 0.05em;
  line-height: 32px;
  position: absolute;
  bottom: 145px;
  left: calc(50% - 515px);
}
.kv .banner .visuel p a{
  display: inline-block;
  color: #ffff33;
  transition: all 0.25s ease-out;
  cursor: pointer;
}
.kv .banner .visuel p a span{
  content: '';
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #ffff33;
}
/* .kv .banner .visuel p a:hover{
  color: #ffa84b;
} */
.kv .banner .visuel p a:hover span{
  /* border-bottom: 1px solid #ffa84b; */
  border-bottom: none;
}

/*===== TITLE =====*/
.sceneTitle{
  position: relative;
}
.sceneTitle h1{
  font-size: 45px;
  font-weight: 700;
  color: var(--txtBlack);
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1;
  position: relative;
  z-index: 0;
}
.sceneTitle h1 br{ display: none;}
.sceneTitle h1 span.eng{
  font-family: Helvetica, sans-serif;
  font-size: 47px;
  letter-spacing: 0.025em;
  line-height: 0;
  position: relative;
  top: 1px;
}
.sceneTitle h1 span.num{
  font-family: Helvetica, sans-serif;
  font-size: 54px;
  letter-spacing: 0.025em;
  line-height: 0;
  position: relative;
  top: 3px;
}
.sceneTitle h1 span.big{
  font-size: 52px;
}
.sceneTitle h1 span.bigEng{
  font-family: Helvetica, sans-serif;
  font-size: 64px;
  position: relative;
  top: 4px;
}
.sceneTitle h1::after{
  content: '';
  width: 611px;
  height: 90px;
  background: url(../images/bg_title.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
  bottom: -15px;
  left: calc(50% - 305.5px);
  z-index: -1;
}
.sceneTitle.short h1::after{
  width: 478px;
  height: 88px;
  background: url(../images/bg_title_s.png) no-repeat center center;
  background-size: 100%;
  left: calc(50% - 239px);
}
.sceneTitle p{
  margin-top: 30px;
  font-size: 22px;
  font-weight: 400;
  color: var(--txtBlack);
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 36px;
}
/* 文字跑馬燈 */
.sceneTitle ul{
  height: 60px;
  overflow: hidden;
  position: absolute;
  top: 2px;
  right: calc(50% - 340px);
}
.sceneTitle ul li{
  padding: 4px 0;
  font-size: 52px;
  font-weight: 700;
	color: var(--orange);
  letter-spacing: 0.1em;
  line-height: 1;
	transform:translate3d(0,0,0);
	animation-name: change;
	animation-duration: 5s;
  animation-direction: alternate;
	animation-iteration-count: infinite;
}
@keyframes change{
  0%, 20% { transform: translateY(0);}
  40%, 60%{ transform: translateY(-100%);}
  80%, 100%{ transform: translateY(-200%);}
}

/*===== Scene Title Animation =====*/
.fadeIn{
    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.000, 0.295, 0.500, 1.000);
    opacity: 0;
    -webkit-transform: translate(0, 60px);
    transform: translate(0, 60px);
}
.fadeIn[data-delay="1"]{ transition-delay: 0.2s;}
.fadeIn[data-delay="2"]{ transition-delay: 0.4s;}
.fadeIn[data-delay="3"]{ transition-delay: 0.6s;}
.fadeIn[data-delay="4"]{ transition-delay: 0.8s;}
.fadeIn[data-delay="5"]{ transition-delay: 1s;}

.fadeIn.is_done{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

/*===== 圖表警語 =====*/
p.note{
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #4b4b4b;
  text-align: justify;
  letter-spacing: 0.075em;
  line-height: 24px;
  word-break: break-all;
  position: relative;
  z-index: 10;
}
p.note span.highlight{
  font-weight: 700;
  color: var(--blue);
}
p.note a{
  display: inline-block;
  color: #2479a3;
}
p.note a span{
  content: '';
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #2479a3;
}
p.note a:hover{
  color: #0791d4;
  cursor: pointer;
  transition: all 0.25s ease-out;
}
p.note a:hover span{
  border-bottom: 1px solid #0791d4;
}

/*===== 投資困擾 =====*/
.scene1{
  position: relative;
}
.scene1 .tOuter{
  width: 100%;
  background: url(../images/s1_trouble_bg.png) repeat-x center top;
  background-size: contain;
}
.scene1 .eOuter{
  width: 100%;
  background: url(../images/s1_easy_bg.png) no-repeat center top;
  background-size: 2560px;
  position: absolute;
  top: 0;
  left: 0;
}
.tOuter > .trouble, .eOuter > .easy{
  width: 1400px;
  margin: 0 auto;
}
.tOuter > .trouble{
  position: relative;
}
.tOuter > .trouble .scrollDown{
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  right: calc(50% - 275px);
}
.tOuter > .trouble .scrollDown img{
  width: 100%;
  filter: drop-shadow(5px -5px 5px rgba(10, 94, 166, 0.15));
}
.tOuter > .trouble img, .eOuter > .easy img{
  width: 100%;
  position: relative;
}
.tOuter.is_hide{
  transition-duration: 1s;
  opacity: 0;
}
.t_fadeIn{
    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.000, 0.295, 0.500, 1.000);
    opacity: 0;
}
.t_fadeIn.is_done{
    opacity: 1;
}
.backTxt{
  width: 100%;
  height: 118px;
  font-size: 0;
  color: rgba(0, 0, 0, 0);
  background-image: url(../images/backTxt.png);
  background-position: 0 0;
  background-size: cover;
  position: absolute;
  bottom: 95px;
  left: 0;
  animation: txtslide 25s linear infinite;
}
@keyframes txtslide{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2902px 0;
  }
}

/*===== 後收長投優勢 =====*/
.scene2{
  background-color: #d0f2ff;
}
.scene2 .sceneTitle{
  margin-top: 100px;
}
.scene2 .advantages{
  width: 1100px;
  margin: 0 auto;
  padding: 50px 60px 60px 60px;
}
.advantages > .box{
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 30px;
  position: relative;
  filter: drop-shadow(15px 15px 45px rgba(10, 94, 166, 0.3));
}
.advantages > .box::after{
  content: '';
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 28px;
  padding: 2px;
  inset: 0;
  position: absolute;
  background: #B1D8F5;
  background: -webkit-linear-gradient(180deg,rgba(177, 216, 245, 1) 0%, rgba(218, 253, 255, 1) 35%, rgba(243, 254, 255, 1) 55%, rgba(225, 255, 255, 1) 75%, rgba(253, 255, 255, 1) 90%, rgba(225, 255, 255, 1) 100%);
  background: -moz-linear-gradient(180deg,rgba(177, 216, 245, 1) 0%, rgba(218, 253, 255, 1) 35%, rgba(243, 254, 255, 1) 55%, rgba(225, 255, 255, 1) 75%, rgba(253, 255, 255, 1) 90%, rgba(225, 255, 255, 1) 100%);
  background: linear-gradient(180deg,rgba(177, 216, 245, 1) 0%, rgba(218, 253, 255, 1) 35%, rgba(243, 254, 255, 1) 55%, rgba(225, 255, 255, 1) 75%, rgba(253, 255, 255, 1) 90%, rgba(225, 255, 255, 1) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.advantages > .box > h5{
  height: 45px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 1;
}
.advantages > .box > h5 br{ display: none;}
.advantages > .box > h5 span{
  padding: 8px 45px;
  background-color: #0791d4;
  border-radius: 22.5px;
  position: relative;
  top: -10px;
  z-index: 1;
}
.advantages > .box > .chart{
  width: 100%;
  margin-bottom: 30px;
  padding: 15px 35px 35px 35px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.advantages > .box > .chart > .row{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.025em;
  line-height: 1;
}
.advantages > .box > .chart > .row.rowHead{
  margin-bottom: 1px;
  border-radius: 15px 15px 0 0;
  background: #F56125;
  background: -webkit-linear-gradient(90deg,rgba(245, 97, 37, 1) 0%, rgba(252, 139, 18, 1) 100%);
  background: -moz-linear-gradient(90deg,rgba(245, 97, 37, 1) 0%, rgba(252, 139, 18, 1) 100%);
  background: linear-gradient(90deg,rgba(245, 97, 37, 1) 0%, rgba(252, 139, 18, 1) 100%);
  color: #fff;
}
.advantages > .box > .chart > .row > div{
  margin: 1px;
  padding: 18px 0;
}
.advantages > .box > .chart > .row > div br{ display: none;}
.advantages > .box > .chart > .row.rowHead > div{
  position: relative;
}
.advantages > .box > .chart > .row.rowHead > div::after{
  content: '';
  width: 2px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: calc(50% - 9px);
  right: -1px;
}
.advantages > .box > .chart > .row > div:nth-of-type(5)::after{
  display: none;
}
.advantages > .box > .chart > .row > div:nth-of-type(1){ width: 35%;}
.advantages > .box > .chart > .row > div:nth-of-type(2),
.advantages > .box > .chart > .row > div:nth-of-type(3),
.advantages > .box > .chart > .row > div:nth-of-type(4),
.advantages > .box > .chart > .row > div:nth-of-type(5){ width: 16%;}
.advantages > .box > .chart > .row.rowItemOdd{
  align-items: stretch;
}
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(1){
  background-color: #fff0d3;
  color: var(--blue);
  display: flex;
  justify-content: center;
  align-items: center;
}
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(2), .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(2),
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(3), .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(3),
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(4), .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(4),
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(5), .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(5){
  padding-left: 5px;
  background-color: #fff;
  font-family: Helvetica, sans-serif;
  font-size: 30px;
  color: var(--txtBlack);
}
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(2) span, .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(2) span,
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(3) span, .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(3) span,
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(4) span, .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(4) span,
.advantages > .box > .chart > .row.rowItemOdd > div:nth-of-type(5) span, .advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(5) span{
  font-size: 18px;
}
.advantages > .box > .chart > .row.rowItemOdd:last-of-type > div:nth-of-type(1){
  border-radius: 0 0 0 15px;
}
.advantages > .box > .chart > .row.rowItemOdd:last-of-type > div:nth-of-type(5){
  border-radius: 0 0 15px 0;
}
.advantages > .box > .chart > .row.rowItemEven{
  align-items: stretch;
}
.advantages > .box > .chart > .row.rowItemEven > div:nth-of-type(1){
  background-color: #fffaee;
  color: var(--blue);
  display: flex;
  justify-content: center;
  align-items: center;
}

/*===== 後收優勢 =====*/
.scene3{
  background: url(../images/bgScene3.png) no-repeat center bottom;
  background-size: 2560px;
  position: relative;
  z-index: 2;
}
.scene3 .readyStart{
  width: 1100px;
  margin: 0 auto;
}
.readyStart .sceneTitle{
  margin-top: 105px;
}
.readyStart .point{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.readyStart .point .card{
  width: 330px;
  height: 415px;
  margin: 75px 0 45px 0;
  padding: 125px 35px 50px 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  filter: drop-shadow(10px 10px 45px rgba(30, 93, 159, .3));
}
.readyStart .point .card.card1{
  background: url(../images/pointCard1.png) no-repeat center center;
  background-size: 100%;
}
.readyStart .point .card.card2{
  background: url(../images/pointCard2.png) no-repeat center center;
  background-size: 100%;
}
.readyStart .point .card.card3{
  background: url(../images/pointCard3.png) no-repeat center center;
  background-size: 100%;
}
.point .card > .title{
  padding-left: 5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.point .card > .title img{
  width: 73px;
}
.point .card > .title h5{
  padding: 0 5px 10px 5px;
  border-bottom: 2px solid #f08c00;
  font-size: 28px;
  font-weight: 700;
  color: #f08c00;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 40px;
}
.point .card > .title span.large{
  font-size: 45px;
  color: #f5672d;
  letter-spacing: 0.175em;
}
.point .card > .title span.eng{
  font-family: "HelveticaNeue-CondensedBold", Helvetica, sans-serif;
  font-size: 31px;
  letter-spacing: 0.025em;
  vertical-align: -1px;
}
.point .card > p{
  font-size: 22px;
  font-weight: 400;
  color: var(--txtBlack);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 42px;
}
.readyStart p.note{
  letter-spacing: 0.05em;
}

/*===== 後收機制 =====*/
.scene3 .method{
  width: 1100px;
  margin: 120px auto 0 auto;
}
.method > ul.tab{
  width: 530px;
  height: 70px;
  margin: 80px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0f2ff;
  background: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(208, 242, 255, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(208, 242, 255, 1) 100%);
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(208, 242, 255, 1) 100%);
  border-radius: 35px;
  position: relative;
  filter: drop-shadow(0 5px 0 #0a5ea6);
  z-index: 10;
}
.method > ul.tab::after{
  content: '';
  width: calc(530px - 4px);
  height: calc(70px - 4px);
  border-radius: 35px;
  padding: 2px;
  inset: 0;
  position: absolute;
  background: #2C5ED4;
  background: -webkit-linear-gradient(0deg,rgba(44, 94, 212, 1) 0%, rgba(2, 136, 236, 1) 45%, rgba(32, 179, 231, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(44, 94, 212, 1) 0%, rgba(2, 136, 236, 1) 45%, rgba(32, 179, 231, 1) 100%);
  background: linear-gradient(0deg,rgba(44, 94, 212, 1) 0%, rgba(2, 136, 236, 1) 45%, rgba(32, 179, 231, 1) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.method > ul.tab li{
  padding: 0 20px;
  cursor: pointer;
}
.method > ul.tab li p{
  padding-left: 70px;
  font-size: 24px;
  font-weight: 500;
  color: #4b4b4b;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.method > ul.tab li p::before{
  content: '';
  width: 61px;
  height: 72px;
  display: block;
  position: absolute;
  top: -30px;
  left: 0;
  z-index: 2;
}
.method > ul.tab li:nth-child(1) p::before{
  background: url(../images/icon_tab1.png) no-repeat center center;
  background-size: 100%;
}
.method > ul.tab li:nth-child(2) p::before{
  background: url(../images/icon_tab2.png) no-repeat center center;
  background-size: 100%;
}
.method > ul.tab li.act p{
  font-weight: 700;
  color: var(--blue);
}
.method > ul.tab li:nth-child(1).act p::before{
  background: url(../images/icon_tab1_act.png) no-repeat center center;
  background-size: 100%;
}
.method > ul.tab li:nth-child(2).act p::before{
  background: url(../images/icon_tab2_act.png) no-repeat center center;
  background-size: 100%;
}
.method > ul.tab li.chat{
  width: 25px;
  padding: 0 0;
  position: absolute;
  bottom: -18px;
  left: calc(50% - 135px);
  z-index: 1;
  cursor: unset;
  transition: all 0.5s ease-out;
}
.method > ul.tab li.chat.move{
  left: calc(50% + 105px);
}
.method > ul.tab li.chat img{ width: 100%;}
.method .graph{
  width: 1100px;
  margin: -30px auto 0 auto;
  padding: 0 30px 125px 30px;
  filter: drop-shadow(10px 10px 30px rgba(102, 51, 0, 0.1));
}
.graph .graphSlide{
  padding: 65px 60px 25px 60px;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 30px;
  position: relative;
}
.graph .graphSlide::after{
  content: '';
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 28px;
  padding: 2px;
  inset: 0;
  position: absolute;
  background: #B1D8F5;
  background: -webkit-linear-gradient(180deg,rgba(177, 216, 245, 1) 0%, rgba(218, 253, 255, 1) 35%, rgba(243, 254, 255, 1) 55%, rgba(225, 255, 255, 1) 75%, rgba(253, 255, 255, 1) 90%, rgba(225, 255, 255, 1) 100%);
  background: -moz-linear-gradient(180deg,rgba(177, 216, 245, 1) 0%, rgba(218, 253, 255, 1) 35%, rgba(243, 254, 255, 1) 55%, rgba(225, 255, 255, 1) 75%, rgba(253, 255, 255, 1) 90%, rgba(225, 255, 255, 1) 100%);
  background: linear-gradient(180deg,rgba(177, 216, 245, 1) 0%, rgba(218, 253, 255, 1) 35%, rgba(243, 254, 255, 1) 55%, rgba(225, 255, 255, 1) 75%, rgba(253, 255, 255, 1) 90%, rgba(225, 255, 255, 1) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.graph .graphSlide p.txt{
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 400;
  color: var(--txtBlack);
  text-align: justify;
  letter-spacing: 0.075em;
  line-height: 36px;
}
.graph .graphSlide > .chart{
  padding-bottom: 15px;
}
.graph .graphSlide > .chart img{ width: 100%;}
.graph .graphSlide:nth-of-type(1) > .chart img{
  border-radius: 15px;
}
.graph .graphSlide:nth-of-type(2) > .chart img{
  border-radius: 15px 15px 0 0;
}
.graph .graphSlide > .chart ul.chartFund{
  padding: 10px 110px 0 110px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}
.graph .graphSlide > .chart ul.chartFund li{
  padding-left: 20px;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  text-align: left;
  letter-spacing: 0.075em;
  line-height: 1;
  position: relative;
}
.graph .graphSlide > .chart ul.chartFund li span{
  font-weight: 700;
  color: var(--blue);
}
.graph .graphSlide > .chart ul.chartFund li::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
}
.graph .graphSlide > .chart ul.chartFund li:nth-child(1)::before{
  background-color: #005ab7;
}
.graph .graphSlide > .chart ul.chartFund li:nth-child(2)::before{
  background-color: #5e42dc;
}
.graph .graphSlide > .chart ul.chartFund li:nth-child(3)::before{
  background-color: #f15a24;
}
.graph .graphSlide p.note{
  display: block;
  text-align: center;
}
/* Swiper dots */
.graph .swiper-pagination-bullets{
  bottom: 75px!important;
}
.swiper-container-horizontal > .pagin.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 15px;
}
.pagin .swiper-pagination-bullet{
  width: 14px;
  height: 14px;
  background-color: #fff;
  border: 2px solid #20b3e7;
  border-radius: 7px;
  opacity: 1;
}
.pagin .swiper-pagination-bullet-active{
  width: 30px;
  background-color: #20b3e7;
}

/* Swiper Arrows */
.swiper-button-prev.prev, .swiper-button-next.next{
  width: 50px;
  height: 50px;
  top: calc(50% - 125px + 50px);
  z-index: 999;
}
.swiper-button-prev.prev, .swiper-container-rtl .swiper-button-next.next{
  background: url(../images/slideArrow.png) no-repeat center center;
  background-size: 100%;
  left: 0;
}
.swiper-button-next.next, .swiper-container-rtl .swiper-button-prev.prev{
  background: url(../images/slideArrow.png) no-repeat center center;
  background-size: 100%;
  right: 0;
  transform: rotate(180deg);
}
.swiper-button-prev.prev.swiper-button-disabled, .swiper-button-next.next.swiper-button-disabled{
  opacity: 0;
}

/*===== 後收基金 =====*/
.scene4{
  margin-top: -255px;
  padding-bottom: 355px;
  background: url(../images/bgScene4.png) no-repeat center top;
  background-size: 2560px;
  position: relative;
  z-index: 1;
}
.scene4 .sceneTitle{
  margin-top: 345px;
}
.fundList{
  width: 1100px;
  margin: 0 auto;
}
.fundList.swiper-container{
  overflow: visible;
}
.fundList > .swiper-wrapper{
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.fundList .fundBox{
  flex: 0 0 520px;
  height: auto;
  margin: 55px 0 20px 0;
  padding: 10px;
  border-radius: 25px 60px 60px 60px;
  background: #20B3E7;
  background: -webkit-linear-gradient(0deg,rgba(32, 179, 231, 0.8) 0%, rgba(2, 136, 236, 0.8) 55%, rgba(0, 89, 183, 0.8) 100%);
  background: -moz-linear-gradient(0deg,rgba(32, 179, 231, 0.8) 0%, rgba(2, 136, 236, 0.8) 55%, rgba(0, 89, 183, 0.8) 100%);
  background: linear-gradient(0deg,rgba(32, 179, 231, 0.8) 0%, rgba(2, 136, 236, 0.8) 55%, rgba(0, 89, 183, 0.8) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  filter: drop-shadow(0 10px 45px rgba(30, 93, 159, 0.30));
}
.fundList .fundBox::before{
  content: '';
  width: 160px;
  height: 80px;
  display: block;
  background: url(../images/fund_tab.png) no-repeat center top;
  background-size: 100%;
  border-top-left-radius: 25px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.fundBox .fundName{
  padding: 15px 15px 10px 15px;
}
.fundBox .fundName h4{
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  text-align: justify;
  letter-spacing: 0.075em;
  line-height: 50px;
  position: relative;
  z-index: 1;
}
.fundBox .fundName p.highlight{
  font-size: 24px;
  font-weight: 700;
  color: #ffe15c;
  text-align: justify;
  letter-spacing: 0.075em;
  line-height: 36px;
}
.fundBox .content{
  flex: 1 0 auto;
  margin-top: 20px;
  padding: 0 20px 30px 20px;
  border-radius: 30px 30px 50px 50px;
  background: #FFFFFF;
  background: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 1) 55%, rgba(208, 242, 255, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(255, 255, 255, 1) 55%, rgba(208, 242, 255, 1) 100%);
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 55%, rgba(208, 242, 255, 1) 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.fundBox .content ul.hashtag{
  display: flex;
  justify-content: center;
  align-items: center;
}
.fundBox .content ul.hashtag li{
  margin: -15px 5px 0 5px;
  padding: 0 20px;
  border-radius: 20px;
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 40px;
}
.fundBox .content ul.hashtag li:nth-child(1){
  background: #FFB643;
  background: -webkit-linear-gradient(0deg,rgba(255, 182, 67, 1) 0%, rgba(255, 109, 49, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(255, 182, 67, 1) 0%, rgba(255, 109, 49, 1) 100%);
  background: linear-gradient(0deg,rgba(255, 182, 67, 1) 0%, rgba(255, 109, 49, 1) 100%);
}
.fundBox .content ul.hashtag li:nth-child(2){
  background: #BB6AFF;
  background: -webkit-linear-gradient(0deg,rgba(187, 106, 255, 1) 0%, rgba(133, 36, 233, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(187, 106, 255, 1) 0%, rgba(133, 36, 233, 1) 100%);
  background: linear-gradient(0deg,rgba(187, 106, 255, 1) 0%, rgba(133, 36, 233, 1) 100%);
}
.fundBox .content ul.hashtag li:nth-child(3){
  background: #FF603B;
  background: -webkit-linear-gradient(0deg,rgba(255, 96, 59, 1) 0%, rgba(216, 50, 50, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(255, 96, 59, 1) 0%, rgba(216, 50, 50, 1) 100%);
  background: linear-gradient(0deg,rgba(255, 96, 59, 1) 0%, rgba(216, 50, 50, 1) 100%);
}
.fundBox .intro{
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.fundBox:nth-of-type(4) .intro{
  margin-top: -12px;
}
.fundBox .intro .label img{
  width: 100px;
  filter: drop-shadow(3px 3px 5px rgba(30, 93, 159, .45));
}
.fundBox .intro p{
  padding: 5px 0 0 20px;
  font-size: 20px;
  font-weight: 400;
  color: var(--txtBlack);
  text-align: justify;
  letter-spacing: 0.075em;
  line-height: 32px;
}
.fundBox:nth-of-type(3) .intro p{
  padding-bottom: 15px;
  border-bottom: 2px solid #bfe5f9;
}
.fundBox:nth-of-type(3) .remark{
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  color: #f5672d;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 1;
}
.fundBox .buttons{
  align-self: flex-end;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fundBox .buttons a.fundBtn{
  margin: 0 20px;
}
a.fundBtn{
  padding-left: 45px;
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #0a5ea6;
  text-align: center;
  letter-spacing: 0.25em;
  line-height: 1;
  position: relative;
  cursor: pointer;
}
a.fundBtn::after{
  content: '';
  width: 37px;
  height: 24px;
  display: block;
  background: url(../images/fundBtn.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
  top: calc(50% - 11px);
  left: 0;
}
a.fundBtn:hover{
  color: #1377e2;
}
a.fundBtn:hover::after{
  background: url(../images/fundBtn_hover.png) no-repeat center center;
  background-size: 100%;
  transition: all 0.05s ease-out;
}
.scene4 p.note{
  margin-top: 10px;
  display: block;
  text-align: center;
}
/* Swiper Arrows */
.fundList .swiper-button-prev.prev, .fundList .swiper-button-next.next{
  display: none;
}

/*===== 加入後收 =====*/
.scene5{
  margin-top: -325px;
}
.scene5 .outer{
  background: url(../images/bgScene5.jpg) no-repeat center top #fff7e3;
  background-size: 2560px;
}
.scene5 .outer .sceneTitle.jo{
  margin-top: 175px;
}
.scene5 .outer .sceneTitle.jo h1{
  top: -35px;
}
.join{
  width: 1100px;
  margin: 25px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.join > .item{
  width: 350px;
  margin: 0 75px;
}
.join > .item p{
  margin-bottom: 45px;
  font-size: 24px;
  font-weight: 500;
  color: var(--txtBlack);
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1;
}
.join > .item p span{
  font-size: 32px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05em;
}
.join > .item img{
  width: 100%;
  filter: drop-shadow(10px 10px 30px rgba(102, 51, 0, .3));
}
.join > .item a.moreBtn{
  width: 175px;
  height: 45px;
  margin: 45px auto 0 auto;
  padding-right: 12px;
  display: block;
  background: #00ACFF;
  background: -webkit-linear-gradient(0deg,rgba(0, 172, 255, 1) 0%, rgba(19, 161, 237, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(0, 172, 255, 1) 0%, rgba(19, 161, 237, 1) 100%);
  background: linear-gradient(0deg,rgba(0, 172, 255, 1) 0%, rgba(19, 161, 237, 1) 100%);
  border-radius: 22.5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: 0.25em;
  line-height: 45px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 3px 0 #005bab);
}
.join > .item a.moreBtn::after{
  content: '';
  width: 35px;
  height: 25px;
  display: block;
  background: url(../images/moreBtn.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
  top: calc(50% - 12.5px);
  right: 10px;
}
.join > .item a.moreBtn:hover{
  background: #6EE2FF;
  background: -webkit-linear-gradient(0deg,rgba(110, 226, 255, 1) 0%, rgba(0, 150, 255, 1) 100%);
  background: -moz-linear-gradient(0deg,rgba(110, 226, 255, 1) 0%, rgba(0, 150, 255, 1) 100%);
  background: linear-gradient(0deg,rgba(110, 226, 255, 1) 0%, rgba(0, 150, 255, 1) 100%);
  transition: all 0.5s ease-out;
}

/*===== 後收QA =====*/
.faq{
  width: 1100px;
  margin: 0 auto;
  padding: 0 50px 125px 50px;
}
.faq .sceneTitle{
  margin-top: 120px;
  margin-bottom: 60px;
}
.faqList .faqCol .faqQ{
  margin-top: 45px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  cursor: pointer;
}
.faqList .faqCol .faqQ .faqQ_icon{
  width: calc(50px + 15px);
  height: calc(50px + 20px);
  padding: 0 15px 20px 0;
  background-color: #fefbf1;
  position: relative;
  z-index: 1;
}
.faqList .faqCol .faqQ .faqQ_icon img{ width: 100%;}
.faqList .faqCol .faqQ .faqQ_icon::after{
  content: '';
  width: 65px;
  height: 70px;
  display: block;
  border-bottom-right-radius: 50px;
  background-color: #fff7e3;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.faqList .faqCol .faqQ .faqQ_txt{
  width: 100%;
  padding: 20px 30px;
  background-color: #fefbf1;
  border-radius: 20px 20px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  filter: drop-shadow(10px 10px 15px rgba(3, 111, 180, 0.05));
}
.faqList .faqCol .faqQ .faqQ_txt p{
  font-size: 20px;
  font-weight: 400;
  color: var(--txtBlack);
  letter-spacing: 0.065em;
  line-height: 36px;
}
.faqList .faqCol .faqQ .faqQ_txt .plus{
  width: 20px;
  height: 20px;
  margin: 6px 0 0 20px;
  display: block;
  position: relative;
}
.faqList .faqCol .faqQ .faqQ_txt .plus .plusLine1,
.faqList .faqCol .faqQ .faqQ_txt .plus .plusLine2{
  width: 20px;
  height: 3px;
  background-color: #2298dd;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  transition: 0.5s all ease-out;
}
.faqList .faqCol .faqQ .faqQ_txt .plus .plusLine2{
  transform: rotate(-90deg);
}
.faqList .faqCol .faqQ .faqQ_txt .plus .plusLine2.minus{
  transform: rotate(180deg);
}
.faqList .faqCol .faqA{
  margin-top: 30px;
  padding-left: 65px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.faqList .faqCol .faqA .faqA_txt{
  width: 100%;
  padding: 20px 30px;
  background-color: #eaf8ff;
  border-radius: 20px 0 20px 20px;
}
.faqList .faqCol .faqA .faqA_txt p, .faqList .faqCol .faqA .faqA_txt ul li{
  font-size: 20px;
  font-weight: 400;
  color: var(--txtBlack);
  text-align: justify;
  letter-spacing: 0.065em;
  line-height: 36px;
}
.faqList .faqCol .faqA .faqA_txt p span.highlight, .faqList .faqCol .faqA .faqA_txt ul li span.highlight{
  font-weight: 500;
  color: var(--orange);
}
.faqList .faqCol .faqA .faqA_txt ul li{
  padding-left: 20px;
  position: relative;
}
.faqList .faqCol .faqA .faqA_txt a{
  padding-left: 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  text-align: justify;
  letter-spacing: 0.065em;
  line-height: 36px;
  position: relative;
  cursor: pointer;
}
.faqList .faqCol .faqA .faqA_txt a.notelink{
  padding-left: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  text-align: justify;
  letter-spacing: 0.065em;
  line-height: 36px;
  position: relative;
  cursor: pointer;
}
.faqList .faqCol .faqA .faqA_txt a:hover, .faqList .faqCol .faqA .faqA_txt a.notelink:hover{
  color: #00a2f0;
  transition: all 0.25s ease-out;
}
.faqList .faqCol .faqA .faqA_txt a::before, .faqList .faqCol .faqA .faqA_txt ul li::before{
  content: " ";
  width: 5px;
  height: 5px;
  display: block;
  background-color: #f5672d;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 2.5px);
  left: 0;
}
.faqList .faqCol .faqA .faqA_txt a.notelink::before{
  display: none;
}
.faqList .faqCol .faqA .faqA_txt ul li::before{
  top: 17px;
}
.faqList .faqCol .faqA .faqA_txt img{
  width: 590px;
  margin: 20px auto 25px auto;
  border-radius: 15px;
  filter: drop-shadow(10px 10px 30px rgba(30, 93, 159, 0.15));
}
.faqList .faqCol .faqA .faqA_icon{
  width: calc(50px + 15px);
  height: calc(50px + 20px);
  padding: 20px 0 0 15px;
  background-color: #eaf8ff;
  position: relative;
  z-index: 1;
}
.faqList .faqCol .faqA .faqA_icon img{ width: 100%;}
.faqList .faqCol .faqA .faqA_icon::after{
  content: '';
  width: 65px;
  height: 70px;
  display: block;
  border-top-left-radius: 50px;
  background-color: #fff7e3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/*===== FOOTER =====*/
.scene6{
  background-color: #ffe4a2;
}
.foot{
  width: 1100px;
  margin: 0 auto;
  padding: 45px 45px 15px 45px;
  position: relative;
}
#goTop{
  width: 50px;
  height: 50px;
  display: block;
  background: url(../images/goTop.png) no-repeat center center;
  background-size: 100%;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  position: absolute;
  top: -15px;
  right: 30px;
  filter: drop-shadow(5px 5px 10px rgba(102, 51, 0, 0.2));
}
.corporation{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.corporation li{
  padding-bottom: 10px;
}
.corporation li a{
  color: #3988cb;
  text-decoration: none;
}
.corporation li.title{
  font-size: 18px;
  letter-spacing: 0.05em;
}
.corporation li.title:nth-of-type(1){
  flex: 0 0 55%;
  color: var(--blue);
  font-weight: 700;
}
.corporation li.title:nth-of-type(2){
  flex: 0 0 45%;
  color: #3988cb;
  font-weight: 500;
}
.corporation li.branch{
  font-size: 12px;
  color: #7b7b7b;
  letter-spacing: 0.075em;
}
.corporation li.branch .idCode{
  color: var(--txtBlack);
}
.corporation li.branch:nth-child(odd){
  flex: 0 0 43%;
}
.corporation li.branch:nth-child(2n){
  flex: 0 0 57%;
}
.corporation li.branch a{
  color: #7b7b7b;
}
.jingyu{
  text-align: justify;
}
.jingyu #note{ padding-bottom: 20px;}
.jingyu h5{
  font-size: 18px;
  color: #666;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 60px;
  cursor: pointer;
}
.jingyu h5.expand:after{
  content: '–';
  padding-left: 10px;
  font-size: 24px;
  vertical-align: -1px;
}
.jingyu h5.packup:after{
  content: '+';
  padding-left: 5px;
  font-size: 24px;
}