@charset "utf-8";
/* CSS Document */
/*landing page*/
body{
	font-family:"Microsoft JhengHei","sans-serif",Helvetica;
	color:#444;
	font-size:20px;
	box-sizing: border-box;
	margin:0;
	border:0;
	padding:0;
	position: relative;
	width:100%;
}
.content_wrapper{
	min-height: calc(100vh - 50px);
}
.mainvisual{
	background-image:url("../img/bg.jpg");
	background-position:left top;
	background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
	height: 100%;
}
.footer{
	position:relative;
	text-align:center;
	background-color:#254a91;
	width:100%;
	min-height:50px;
}

.footer span.text_footer{
	color:#fff;
	line-height:20px;
	font-size:0.8em;
	margin-right:20px;
}

span.underline{
	color:#fff;
	text-decoration:underline;
}
.container .logo {
	width:100%;
	padding-top: 20px;
}
.container .main_con{
	position:relative;
	width:100%;
	height:auto;
	display: inline-block;
	text-align: center;
}
.container .main_con .title{
	position: relative;
	background-image: url(../img/bg_web.png);
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
	height: 500px;
	background-size: cover;
	display: block;
	padding: 0px 0px;
}
.container .button_nav{
	text-align: center;
	position: relative;
	float: right;
	width: 53%;
    margin: -11% 11% 0% 25%;
}
.container .btn_link{
	display: inline-block;
	position: relative;
	float: left;
	width: calc(100%/3);
} 
.container a.btn1{
	background:url("../img/btn1.png")no-repeat;
	width: calc(100% - 10px);
	height: 130px;
	background-size: contain;
	background-position: center center;
	display:block;
}
.container a.btn1:hover{
	background: url("../img/btn1_hover.png") no-repeat;
	width: calc(100% - 10px);
	height: 130px;
	background-size: contain;
	background-position: center center;
	display:block;
}
.container a.btn2{
	background:url("../img/btn2.png") no-repeat;
	width: calc(100% - 10px);
	height: 130px;
	background-size: contain;
	background-position: center center;
	display:block;
}
.container a.btn2:hover{
	background: url("../img/btn2_hover.png") no-repeat;
	width: calc(100% - 10px);
	height: 130px;
	background-size: contain;
	background-position: center center;
	display:block;
}
.container a.btn3{
	background:url("../img/btn3.png") no-repeat;
	width: calc(100% - 10px);
	height: 130px;
	background-size: contain;
	background-position: center center;
	display:block;
}

.container a.btn3:hover{
	background: url("../img/btn3_hover.png") no-repeat;
	width: calc(100% - 10px);
	height: 130px;
	background-size: contain;
	background-position: center center;
	display:block;
}
/*-----footer------*/
.footer-container {
    text-align: center;
    font-size: .7em;
    background: #254a91;
    padding: 15px 0px;
    color: #FFF;
    letter-spacing: 1px;
}
.view-on-mobile {
    display: none;
}
.view-on-destop{
	display: inline-block;
	width: 40px;
}
.view-on-destop2{
}


/*-----------------------------------------------------------------------------------------------*/
/*intro.html*/
.header{
	box-shadow: 5px 5px 5px #9da2a8;
	position: fixed;
    background: #fff;
    width: 100%;
    height: 98px;
    z-index: 120;
}
.w1000 {
    width: 1000px;
    margin: 16px auto;
}
a.logo_inside{
	display: inline-block;
	background: url(../img/logo.png) no-repeat;
	width: 196px;
	height: 50px;
	margin: 0 0 0 15px;
	vertical-align: middle;
}
.nav{
	width: calc(100% - 220px);
	text-align: right;
	display: inline-block;
	vertical-align: middle;
}
.nav a{
	display: inline-block;
	color: #555;
	margin: 0 10px;
	line-height: 40px;
	transition: 0.3s;
}
.nav a:hover{
	color: #000;
}
.mobile_header,.toggle,.mobile_nav{
	display: none;
}
.bg_inside{
	background-image:url("../img/bg_long.jpg");
	background-position:left top;
	background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
	height: 100vh;
}
.header .nav a.nav_btn_1{
	background-image:url("../img/1.png");
	background-repeat: no-repeat;
	width:141px;
	height:50px;
}
.header .nav a.nav_btn_1:hover{
	background-image:url("../img/1-1.png");
}
.header .nav a.nav_btn_2{
	background-image:url("../img/2.png");
	background-repeat: no-repeat;
	width:128px;
	height:50px;
}
.header .nav a.nav_btn_2:hover{
	background-image:url("../img/2-1.png");
}
.header .nav a.nav_btn_3{
	background-image:url("../img/3.png");
	background-repeat: no-repeat;
	width:120px;
	height:50px;
}
.header .nav a.nav_btn_3:hover{
	background-image:url("../img/3-1.png");
}
.header .nav a.nav_btn_4{
	background-image:url("../img/home.png");
	background-repeat: no-repeat;
	width:50px;
	height:50px;
}
.paddingtop{
	padding-top:120px;
}
ul.breadcrumb_nav a{
	color:#5b5b5b;
}
ul.breadcrumb_nav a:hover{
	color:#e75c00;
	text-decoration:underline;
}
ul.breadcrumb_nav span{
	padding: 0px 10px;
}
ul.breadcrumb_nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 40px;
    margin-bottom: 0px;
    list-style: none;
	font-weight:bold;
	font-size:0.68em;
}

.inside_visual{
	display: inline-block;
	width:100%;
	height:auto;
	position:relative;
}
.inside_visual img.left-float{
	position: absolute;
	left: 2%;
	top: 1%;
	width: 20%;
}
.inside_visual img.middle-title{
	text-align:center;
	margin: 8% auto 8% auto;
	display: block;
	position: relative;
}
.inside_visual img.right-float{
	position: absolute;
	right: 0%;
	top: 20%;
}
.subnav{
	text-align:center;
	width:100%;
	display: inline-block;
	margin: 10px auto;
	position:relative;
}
.subnav_box{
	width:calc(100%/4);
	display: inline-block;
    float: left;
}
.subnav_inactive,.subnav_active{
	position: relative;
	display: inline-block;
	background: url(../img/blue-btn.png) no-repeat;
	width: calc(98% - 40px);
	height: 54px;
	color: #254a91;
	cursor: pointer;
	transition: 0.3s;
	margin: 0 3px;
	letter-spacing: 1px;
	padding-top: 7px;
	font-weight: bold;
	font-size:0.82em;
	text-align: center;
	line-height: 33px;
	background-size:contain;
}
.subnav_inactive:hover,.subnav_active{
	background: url(../img/yellow-btn.png) no-repeat;
	color: #e75c00;
	background-size:contain;
}
span.text-indent-text{
	text-indent:-2em;
}
p.flex-dis{
	display:inline-flex;
}

.content{
	padding-top:50px;
	padding-bottom:50px;
	margin: auto 15px;
	position:relative;
}
.content .title-top{
	position:absolute;
	left: 38px;
	top: -24px;
}
.content ul.title{
	list-style-image: url('../img/square.png');
	color:#e75c00;
	margin-inline-start: -7px;
}
.content ul.title h2.text_title{
	color: #e75c00;
    font-weight: bold;
    margin-top: 10px;
    font-size: 0.98em;
	word-wrap:break-word;
}
.content ul.title p.no_mb{
	margin-bottom:0px;
}
.content h3.paragraph{
	color:#4d4d4d;
	font-size:0.78em;
	word-wrap:break-word;
	line-height:28px;
}
.content ul.paragraph{
	color:#4d4d4d;
	font-size:0.78em;
	word-wrap:break-word;
	padding-top: 15px;
	line-height:28px;
	list-style-type: decimal-leading-zero;
	padding-left: 23px;
    padding-right: 14px;
}
.content li{
	text-indent: -2px;
}
 img.bird{
    position: absolute;
    right: 2%;
    width: 7%;
	bottom: -153%;
 }
.content img.child{
    position: absolute;
    right: -7%;
    top: -81%;
    width: 19%;
}
.content img.parent{
    position: absolute;
    left: -12%;
    bottom: -29%;
    width: 20%;
}
.content h2.orange_text{
	color:#e75c00;
	font-size:0.8em;
	margin-bottom: 0px;
}
.content span.orange_underline{
	color:#e75c00;
	text-decoration:underline;
}
.box{
	margin: auto 52px;
	text-align: center;
	position: relative;
}
.box .box-outline{
    margin: 60px 13% 0px 5%;
    text-align: left;
    border: 2px solid #f9ca19;
    padding: 30px 40px;
    border-radius: 22px;
    display: block;
}
.box-outline span.pright-3{
	padding-right:3px;
}
.box-outline span.pleft-15{
	padding-left:15px;
}
.content .arrow-bottom{
	position:absolute;
	bottom: -40px;
	left: 43%;
}
.color-text{
	display: inline-block;
    vertical-align: middle;
    width: 100%;
	font-size:0.85em;
	font-weight:bold;
}
.color-text .pink{
	color:#ec7c76;
	border: 2px solid #ec7c76;
	border-radius: 5px;
	padding:10px 10px;
	display: inline-block;
	margin-bottom: 10px;
    margin-top: 15px;
}
.color-text .blue{
	color:#619fd9;
	border: 2px solid #619fd9;
	border-radius: 5px;
	padding:10px 10px;
	display: inline-block;
	margin-bottom: 10px;
    margin-top: 15px;
}
.color-text .orange{
	color:#e18446;
	border: 2px solid #e18446;
	border-radius: 5px;
	padding:10px 10px;
	display: inline-block;
	margin-bottom: 10px;
    margin-top: 15px;
}
.footer_in{
	position:relative;
	bottom:0; 
	text-align:center;
	background-color:#254a91;
	width:100%;
	min-height:50px;
	padding:3px 20px;
}

.footer_in span.text_footer{
	color:#fff;
	line-height:20px;
	font-size:0.8em;
	margin-right:20px;
}
.paddingbottom{
	padding-bottom:20px;
}

/*-----------------------------------------------------------------------------------------------*/
/*details.html*/
.con{
	padding-top:15px;
}
h2.text_title_light{
	color:#fe885b;
	padding-left:3px;
	font-size: 0.9em;
}
ul.ul_orange{
	list-style-image: url('../img/block.png');
	color:#fe885b;
	margin-inline-start: -13px;
}
ol.ol_con{
	padding-inline-start: 21px;
	
}
ol.ol_con > li{
	padding-left:12px;
	font-size: 0.78em;
	line-height: 26px;
}
.con ul.grey_light{
	color:#8f8f8f;
	font-size: 0.78em;
	line-height: 26px;
	margin-bottom:0px;
	list-style: none;
	padding-inline-start: 31px;
}
.con ul.grey_light li:before{
	content:'※';
	padding-right: 14px;
	margin-left: -26px;
}
ol.ol_con_no{
	padding-inline-start: 21px;
	margin-bottom:0px;
}
ol.ol_con_no > li{
	padding-left:12px;
	font-size: 0.78em;
	line-height: 26px;
}
.con p.brown{
	color:#8e771f;
	font-size: 0.78em;
	line-height: 26px;
	margin-top: 0rem;
}
.con_80{
	position:relative;
	display:inline-block;
	width:80%;
}
.con_80 p.grey_medium{
	color:#4d4d4d;
	font-size:0.78em;
	line-height:26px;
	margin-top: 50px;
	margin-bottom: 10%;
}
.con_80 img.hug{
	position:absolute;
	right: -19%;
	bottom: 16%;
	width: 16%;
}

/*-----------------------------------------------------------------------------------------------*/
/*benefit.html*/
ul.ul_orange_nob{
	list-style-image: url('../img/block.png');
	color:#fe885b;
	margin-inline-start: -13px;
	margin-bottom: 0px;
}
.credit_card{
	width:100%;
	position:relative;
	text-align:center;
}
.credit_card .mt-20{
	margin-top:20px;
}
.credit_card .cc_box{
	width:calc(98%/2);
	display:inline-block;
	border-right:1px solid #9fcedf;
}
.credit_card .cc_box_no{
	width:calc(98%/2);
	display:inline-block;
}
.credit_card .cc_box_no > p{
	font-size:0.78em;
	line-height:23px;
	margin-bottom:0px;
} 
.credit_card .cc_box:last-of-type{
	border-right:none;
}
.content img.dance{
	width:100%;
}
/*-----------------------------------------------------------------------------------------------*/
/*debitcard.html*/
.card_ad{
	width:100%;
	text-align:center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.card_ad h2.blue_main_title{
	color:#254a91;
	font-size:0.85em;
	font-weight:bold;
}
.card_ad .card_con{
	width:calc(91%/2);
	display:inline-block;
	text-align:center;
}
.card_ad .left{
	text-align:left;
}
.card_ad .card_con .card3{
	background: url(../img/card3.png) no-repeat;
	background-position:  center;
	background-size:contain;
	width: calc(100% - 60px);
	height: 269px;
	margin: auto 10px;
	text-align: center;
}
.card_ad .card_con p.blue_box{
	background-color:#6aaac9;
	color:#fff;
	font-size:0.78em;
	font-weight:bold;
	border-radius:5px;
	display:inline-block;
	margin-bottom: 5px;
    padding: 5px 15px;
}
.card_ad .card_con .blue_title_con{
	margin-top:10px;
}
.con_no a.underline_blue{
	color:#2795ca;
	text-decoration:underline;
}
.con_no span.brown_text{
	color:#8e771f;
}
.content img.tree{
	width:100%;
}
/*-----------------------------------------------------------------------------------------------*/
/*calc.html*/
.bg_inside_yellow{
	background-image:url("../img/bg_yellow.jpg");
	background-position:left top;
	background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
	height: 100vh;
}
.inside_visual img.sit_parent{
	position: absolute;
	left: 7%;
	top: 12%;
	width: 20%;
}
.inside_visual img.play_child{
	position: absolute;
	right: 4%;
	top: 25%;
	width: 30%;
}
.content h3.paragraph span.orange_underline{
	color:#e75c00;
	text-decoration:underline;
}
.content .width_85{
	width:85%;
	margin:10px auto;
}
.content .width_85 ul.square_ul{
	list-style-type:square;
	color:#2795ca;
	line-height:28px;
	font-size: 0.78em;
}
.content .width_85 span.blue_li{
	color:#4d4d4d;
}
.content table.table_calc{
	text-align:center;
	width: 100%;
	margin-bottom: 35px;
}
.content p.table_head{
	background-color:#8ec8e4;
	color:#254a91;
	font-size:0.78em;
	width:100%;
	margin-bottom: 0px;
	text-align:center;
	font-weight:bold;
	padding:10px 10px;
	margin-top: 25px;
}
.content tr.table_second,.content tr,.content td,.content th{
	border:1px solid #afd6e9;
    font-size: 0.9em;
    line-height: 30px;
	padding: 5px 8px;
}
.content tr.table_second{
	background-color:#afd6e9;
	color:#254a91;
	width:100%;
	margin-bottom: 0px;
	text-align:center;
	font-weight:bold;
	padding:10px 10px;
}
img.pt-20{
	padding-top:20px;
}
.content .note_big_con{
	margin-top:35px;
	margin-bottom: 20px;
}
.content .note_con{
	width:calc(98%/3);
	display:inline-block;
}
.content img.va{
	vertical-align: text-bottom;
    width: 7.5%;
    margin-right: 6px;
}
.content img.note{
    width: calc(100% - 40px);
}
/*-----------------------------------------------------------------------------------------------*/
/*qa.html*/
.bg_inside_qa{
	background-image:url("../img/bg_qa.jpg");
	background-position:top center ;
	background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
	height: 100vh;
}
.inside_visual img.qa_human{
	position: absolute;
	left: 9%;
	top: 20%;
	width: 20%;
}
.inside_visual img.qa_birdall{
	position: absolute;
	right: 9%;
	top: 31%;
	width: 20%;
}
.qa_con{
	width:90%;
	border-bottom:1px solid #c9c9c9;
}
.qa_header{
	padding-top: 15px;
    padding-bottom: 15px;
    text-align: left !important;
}
.qa_con span.text_title_second{
    color: #254a91;
	display:block;
	font-weight:bold;
	font-size: 0.78em
}
.qa_con span.text_title_second span.left-move{
	padding-left: 5px;
    vertical-align: middle;
}
.qa_con ol.number_ol{
	font-size: 0.78em;
    color: #4d4d4d;
    list-style-image: none;
	line-height:28px;
	padding-inline-start: 50px;
}
.qa_con ol.number_ol li{
	padding-left:3px;
}
.qa_con ol.number_ol ul.square_second{
    list-style-image: none;
	padding-inline-start: 19px;
	list-style-type:square;
}
li.pb-10{
	padding-bottom:10px; 
 }
.qa_con p.paragraph_in{
	color: #4d4d4d;
    font-size: 0.78em;
    word-wrap: break-word;
    line-height: 28px;
	padding-inline-start: 30px;
}
img.qa_bird{
	position: absolute;
    right: 1%;
    bottom: 12%;
    width: 8%;
}
.qa-body {
    padding: 0px 22px;
}
.qa_con button.move-left{
	text-align: left;
    text-indent: -35px;
    padding-left: 33px;	 
 }
 .main_con h1, .inside_visual h1{
	 display:none;
 }

/* Core styles/functionality */
.tab {
  position: relative;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 100%;
}

/* Visual styles */
.accordion {
  color: var(--theme);
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}