body {
    font-family: "Noto Sans TC", "MS UI Gothic", Arial, Helvetica, sans-serif!important;
    line-height: 1.75em!important;
    color: #002362!important;
}

section {
    text-align: center;
}

img{
	margin: auto;
}

a{
	text-decoration: none!important;
}

h2 {
    font-size: 48px!important;
    font-weight: 700!important;
    line-height: 1.25em!important;
}

.txt-lg {
    font-size: 22px!important;
    line-height: 1.5em!important;
}

.txt-md {
    font-size: 18px!important;
    line-height: 1.5em!important;
}

.txt-sm {
    font-size: 18px!important;
    line-height: 1.5em!important;
}

.txt-tn {
    font-size: 14px!important;
}

.txt-left {
    text-align: left;
}

.txt-center {
    text-align: center;
}

.fw-bold {
    font-weight: 700!important;
}

.borderRadius-lg {
    border-radius: 40px;
}
  
.borderRadius-md {
    border-radius: 20px;
}
  
.borderRadius-sm {
    border-radius: 10px;
}

.container {
    width: 90%;
    max-width: 1200px;
    padding: 80px 0;
    margin: 0 auto;
}

.container h2 {
    color: #166fdb;
    margin-bottom: 80px;
}

.container h2::after {
    content: '';
    width: 100px!important;
    height: 2px;
    background-color: #166fdb;
    display: block;
    margin: 50px auto 0;
}

.container .descrip {
    color: #166fdb;
}

.hide-pc {
    display: none;
}

.btn-hover-opc {
    opacity: 1;
    transition: 0.3s;
}

section .notice {
    padding-top: 80px;
    line-height: 1.3em;
}

section.kv {
    width: 100%;
    height: 100vh;
    background: url(../img/img-kv-mountain.svg) bottom center / 2048px repeat-x rgb(195, 240, 250);
    position: relative;
    z-index: 5;
}

.kv::before {
    content: url(../img/img-kv-cloud.svg);
    position: absolute;
    left: 12%;
    top: 22%;
    width: 300px;
}

.kv::after {
    content: url(../img/img-kv-cloud2.svg);
    position: absolute;
    right: 12%;
    top: 18%;
    width: 300px;
}

.kvSlogan {
    width: 75%;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
    top: 22%;
    z-index: 10;
}

.sideBtn-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    row-gap: 20px;
    position: fixed;
    right: 30px;
    top: 35%;
    z-index: 11;
}

.sideBtn {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

}

.sideBtn a,
.sideBtn a:hover,
.sideBtn a:active,
.sideBtn a:focus,
.sideBtn a:visited {
    color: #fff;
}

.sideBtn a {
    background-color: #166fdb;
    padding: 20px 15px;
    border-radius: 10px;
    writing-mode: vertical-rl;
    cursor: pointer;
}

.sideBtn a.main {
    background-color: #ef4e3e;
    margin-bottom: 20px;
}

.popup {
    display: inline-flex;
    flex-direction: column;
    row-gap: 35px;
    position: relative;
    background-color: #fff;
    border: 2px solid #ef4e3e;
    padding: 30px;
    margin-right: 20px;
    z-index: 11;
}

.popupItem p {
    color: #166fdb!important;
    padding-bottom: 15px!important;
}

.popupItem a {
    color: #ef4e3e!important;
}

.c-red{
	color: #ef4e3e;
}

.popupItem a:nth-child(n + 3) {
    padding-left: 5px;
}

.popupItem a:nth-child(n + 3)::before {
    content: '/';
    color: #166fdb;
    padding-right: 15px;
}

section.feature {
    background-color: #96e287;
}

.fundCharts,.fundCharts-p0 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 2rem;
    padding-top: 80px;
}

.fundCharts-p0{
	padding-top: 0px;
}

.fundCharts .chart {
    width: 28%;
}

.fundCards {
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
}

.fundCards .card {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex: 1 1 0px;
    position: relative;
    padding: 100px 30px 30px;
	border-radius: 20px;
}

.cardTW::before {
    content: url(../img/icon-feature-tw.svg);
    width: 150px;
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translate(-50%, 0);
}

.cardGB::before {
    content: url(../img/icon-feature-gb.svg);
    width: 150px;
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translate(-50%, 0);
}

.cardJP::before {
    content: url(../img/icon-feature-jp.svg);
    width: 150px;
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translate(-50%, 0);
}

.cardTxt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 20rem;
    margin-bottom: 30px;
}

.cardTxt div:nth-child(1) {
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
}

.cardTxt div:nth-child(2) {
    padding-top: 30px;
}

.cardTxt ul {
    list-style-type: disc;
    padding: 10px 0 0 26px;
}

.cardBtns {
    display: flex;
    column-gap: 1rem;
}

.cardBtns a {
    flex: 1 1 0px;
    padding: 10px;
}

.cardTW div,
.cardTW p,
.cardTW li {
    color: #005bac;
}

.cardGB div,
.cardGB p,
.cardGB li {
    color: #009fe8;
}

.cardJP div,
.cardJP p,
.cardJP li {
    color: #c61026;
}

.cardTW .cardBtns a {
    color: #005bac;
    border: 1px solid #005bac;
}

.cardGB .cardBtns a {
    color: #009fe8;
    border: 1px solid #009fe8;
}

.cardJP .cardBtns a {
    color: #c61026;
    border: 1px solid #c61026;
}

.cardBtns a.main {
    color: #fff;
}

.cardTW .cardBtns a.main {
    border: 0;
    background-color: #005bac;
}

.cardGB .cardBtns a.main {
    border: 0;
    background-color: #009fe8;
}

.cardJP .cardBtns a.main {
    border: 0;
    background-color: #c61026;
}

section.offer {
    background-color: #ffd753;
}

.contBox {
    color: #166fdb;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    column-gap: 60px;
    padding: 80px 140px;
}

.contImg {
    width: 255px;
    flex-shrink: 0;
    margin: 0 auto;
}

.contTxt {
    display: flex;
    flex-direction: column;
}

.contTxt p {
    display: flex;
    flex-direction: row;
    column-gap: 1em;
    align-items: flex-start;
    padding-bottom: 30px;
}

.contTxt p:nth-last-child(1) {
    padding-bottom: 0;
}

.contTxt p span {
    width: 6em;
    flex-shrink: 0;
    color: #fff;
    background-color: #166fdb;
    padding: 3px 0;
}

.contTxt p span.long {
    width: 8em;
}

section.openacc {
    background-color: #c3f0fa;
}

section.warning {
    background-color: #a0e8ff;
    line-height: 1.4em;
}

.warning-notice {
    padding-bottom: 30px;
}

.warning-notice ul {
    list-style-type: decimal;
    padding: 10px 0 0 20px;
}

.warning-cont {
    padding-top: 30px;
}

.bt-line{
	border-top:1px solid #81ccdf;
	margin-top: 30px
}

.bb-line{
	border-bottom:1px solid #81ccdf;
}

.warning-cont p span {
    padding-right: 1em;
}

.warning-cont .info,
.warning-cont ul,
.warning-cont p.last {
    padding-top: 20px;
}

.warning-cont ul {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.warning-cont li span {
    color: #0059bd;
}

.sideBtn a{
	text-decoration: none;
}

.notice,.warning-notice,.warning-cont{
	font-size: 1.2rem!important;
}


@media screen and (min-width: 1200px) {
    .btn-hover-opc:hover {
        opacity: 0.7;
    }
}

@media screen and (max-width: 960px) {
    .hide-mobile {
        display: none;
    }
    .hide-pc {
        display: block;
    }
    .fundCharts,
    .fundCards,
    .contBox,
    .contTxt p {
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
    }
    .fundCharts,
    .contBox {
        row-gap: 40px;
    }
    .fundCards {
        row-gap: 80px;
    }
    .contTxt p {
        row-gap: 10px;
    }
    .cardTxt {
        height: auto;
    }
    .contImg {
        width: 200px;
    }
    .fundCharts .chart {
        width: 90%;
        margin: 0 auto;
    }
    .contBox {
        padding: 40px 20px;
    }
}

@media screen and (max-width: 640px) {
    h2 {
        font-size: 32px!important;
    }    
    .txt-lg {
        font-size: 20px;
    }    
    .txt-md {
        font-size: 16px;
    }
    .container {
        padding: 60px 0;
    }
    .container h2 {
        margin-bottom: 40px!important;
    }
    .container h2::after {
        margin: 30px auto 0;
    }
    section .notice {
        padding-top: 40px;
    }
    section.kv {
        background: url(../img/img-kv-mountain.svg) bottom center / 280% repeat-x rgb(195, 240, 250);
        height: calc(100svh - 80px);
        overflow-x: hidden;
    }
    .kv::before {
        left: -13%;
        top: 30%;
        width: 180px;
    }
    .kv::after {
        right: -2%;
        top: 15%;
        width: 180px;
    }
    .sideBtn-wrapper {
        flex-direction: column;
        right: 0;
        top: auto;
        bottom: 0;
    }
    .sideBtn {
        width: 100vw;
        flex-direction: row;
    }
    .sideBtn a {
        flex: 1 1 0px;
        writing-mode: horizontal-tb;
        border-radius: 0;
        padding: 15px 15px;
    }
    .sideBtn a.main {
        margin-bottom: 0;
    }
    .popup {
        row-gap: 20px;
        margin: 0 10px 0 10px;
        padding: 20px;
    }
    .popupItem p {
        padding-bottom: 5px;
    }
    .fundCharts,
    .fundCards,
    .contBox,
    .contTxt p {
        width: 100%;
    }
    .fundCharts,
    .contBox {
        row-gap: 40px;
    }
    .fundCards {
        row-gap: 80px;
        margin-top: 80px;
    }
    .contTxt p {
        row-gap: 10px;
    }
    .fundCharts {
        padding-top: 40px;
    }
    .fundCharts .chart {
        width: 90%;
        margin: 0 auto;
    }
    .contBox {
        padding: 40px 20px;
    }
    footer {
        padding-bottom: 70px;
		line-height: 1.5;
    }
}
/*carousel css*/
/* carouse */

  .owl-carousel .card{
    border: none;
    text-align: center;
    background-color:transparent;
	align-items: center;
  }

@media (max-width: 760px){
	.middle{
		flex-direction: column !important;
	}
}
/*owl css*/


/*new css*/

.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link{
	border-radius: 50px!important;
	width: 5rem!important;
	font-size: 1.5rem!important;
}

.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link{
	background-color: #E8E8E8;
	color: #7E7E7E;
}

.nav-justified .nav-item, .nav-justified>.nav-link{
	flex-grow: 0!important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
	background-color: #166fdb!important;
}

.step-arrow{
	width: 0.7rem;
	margin: 0rem 1rem 0.2rem 1rem;
	opacity: 0.7;
}

.app-btn-warp{
	height: 8rem;
}

.app-btn-warp .left img{
	width: 5.5rem;
}

.app-btn-warp .left{
	margin-right: 1rem;
}

.app-btn-warp .right img{
	width: 7.5rem;
}


.d-block{
	display: flex!important;
}

.carousel-item p{
	font-size: 1.3rem;
	color: #454545;
	margin-bottom: 1rem;
}

.carousel-inner img{
	max-width: 220px;
}

.pc,.pc-title{
	display: block;
}

.mb,.mb-title{
	display: none;
}

@media (max-width: 1395px){
	.pc{
		display: none;
	}
	
	.mb{
	display: block;
	}
}

@media (max-width: 991px){
  .nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link{
	width: 3rem!important;
	font-size: 1rem!important;
	flex-wrap: nowrap!important;
    }
	.step-arrow{
		width:0.5rem;
		margin:0rem 0.8rem 0.2rem 0.8rem;
	}
	.contBox{
		row-gap: 20px;
	}
	
	.carousel-item p{
	font-size: 1rem;
	color: #454545;
}
}

@media (max-width: 716px){
	.mb-title{
		display: block;
	}
	.pc-title{
		display: none;
	}	
}

@media (max-width: 476px){
	.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link{
	width: 2.6rem!important;
	font-size: 1rem!important;
}
	.step-arrow{
		width:0.3rem;
		margin:0rem 0.5rem 0.2rem 0.5rem;
	}
}

.carousel-dark{
	max-width: 500px;
	margin: auto;
}

.step-card-warp .w-50{
	width: 80%!important;
}

.step-card-warp .txt-lg{
	font-size:1.3rem!important;
	color: #464646;
}

.step-card{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.step-card img{
	margin-top: 1rem;
	max-width: 220px;
}