@charset "utf-8";


html * { -webkit-text-size-adjust: 100%; }
* { margin: 0px; padding: 0px; box-sizing: border-box; }
a, a:link, a:visited, a:hover, a:active {text-decoration: none;outline: none;background: none;box-shadow: none;}
img { border: 0px none; }



button, a {
	-webkit-tap-highlight-color: transparent;
  }


@media only screen and (max-width: 480px) {
body { 
    font-size: 16px; 
    line-height: 1.5em; 
	}
}
/************************
TOTAL
************************/

.page-container, .page-wrapper {
    padding: 0px;
    margin: 0 auto;
    word-wrap: break-word;
    word-break: normal;
 }

@media (min-width:1024px){.page-wrapper{ width:100%; } }
@media (min-width:1280px){.page-wrapper{ width:100%; } }

@media (min-width:768px) { .page-container { width:100%; } }
@media (min-width:992px) { .page-container { width:100%; } }
@media (min-width:1024px){ .page-container{ width:100%; } }
@media (min-width:1024px){ .page-container{ width: 1024px; } }

.page-wrapper img, .page-container img {max-width: 100%;}

@media (min-width:1024px){ .page-container-kv{ width: 1440px; } }
@media only screen and (max-width: 768px) {
	.page-wrapper img, .page-container img {max-width: 90%;}
	}

/************************
HEADER
************************/
header {
	position: fixed;
	display: inline-block;
	float: left;
	width: 100%;
	z-index: 90;
	top: 0;
	left: 0;
	text-align: center;
	background-color: #d70c18;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	z-index: 99;
	}
header .h_right,
header .h_logo,
header .h_top {
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	}	
header .h_logo  { 
	width: 200px;
	height: 60px;
	margin: 0 10px; 
	padding: 12px 0;
	}
header .h_logo a {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 40px;	
	background: url(../images/logo-h.png) no-repeat;
	-moz-background-size: auto 35px;
	-webkit-background-size: auto 35px;
	-o-background-size: auto 35px;
	background-size: auto 35px;
	overflow: hidden;
	}
header .h_logo h1 span{ display: none; }

header .h_right {
	float: right;
	width: auto;
	}
header .h_right li {
	position: relative;
	display: inline-block;
    padding: 0px 10px;
	margin: 13px 0px;
	line-height: 30px;
	text-align: right;
	font-size: 16px; 
	}
header .h_right li a { 
	color: #fff;
	font-weight: 700;
	}
header .h_right li a.active,
header .h_right li a:hover { 
	color: #00ddff;
	}

@media only screen and (max-width: 768px) {
header .h_logo  { 
	width: 150px;
	height: 53px;
	padding: 11px 0;
	padding-left: 47px;
	}
header .h_logo a {
	width: 150px;
	height: 30px;	
	-moz-background-size: auto 30px;
	-webkit-background-size: auto 30px;
	-o-background-size: auto 30px;
	background-size: auto 30px;
	}
}

@media only screen and (max-width: 768px) {
header .h_right { display: none; }

header .h_right.open { 
	position: absolute;
	display: block;
	width: 100%;
	top: 50px;
	background: #d80d19;
	z-index: 91;
	}
header .h_right.open li {
	width: 100%;
	height: auto;
	margin: 0px;
	text-align: center;
	border-bottom: 1px solid #C81517; 
	}
header .h_right.open li a { 
 	position: relative;
	display: inline-block;
	text-align: center; 
	padding: 15px 8px;
	text-decoration: none; 
	font-size: 17px; 
	line-height: 17px; 
	vertical-align: middle; 
	color: #ffffff;
	}
header .h_right.open li:hover { 
    background: #C81517; 
	color: #f2f2f2; 
	}

header .h_right.open li a,	
header .h_right.open li:hover { 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	}

}

/************************
KEY-VISUAL
************************/
#main_visual .kv-box,
#main_visual {
	position: relative;
	display: inline-block;
	float: left;
    width: 100%;
	text-align: center;		
	}

#main_visual {
    margin-top: 60px;
	height: 600px;
	background-color: #D5D9E6;	
	overflow: hidden;
	}
	
#main_visual .kv-card,	
#main_visual .kv-pic,
#main_visual .kv-word {
	position: relative;
	display: inline-block;
	}
#main_visual .kv-box {

	}
	
#main_visual .kv-word {
	float: left;
	width: 40%;
    padding-top: 60px;
	}
#main_visual .kv-card  {
    padding-top: 60px;	
	}
#main_visual .kv-card img {
	width: 28%;
	max-width: 200px;	
	}

#main_visual .kv-pic {
	float: right;
	width: 60%;
    padding-top: 160px;
	height: 700px;
	background: url(../images/kv-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 700px auto;
	}
	.kv-woman{
		width: 262px;
		position: absolute;
		bottom: 130px;
		left: calc(50% - 300px);
	}
	.kv-man{
		width: 341px;
		position: absolute;
		bottom: 105px;
		left: calc(50% - 170px);
	}
	
@media only screen and (max-width: 992px) {
#main_visual .kv-pic,	
#main_visual {	
	height: 500px;
	}
	
#main_visual {
    margin-top: 30px;
	}
#main_visual .kv-pic {
    padding-top: 60px;
	background-size: 500px auto;
	}
	.kv-woman{
		width: 160px;
		bottom: 95px;
		left: calc(50% - 190px);
	}
	.kv-man{
		width: 200px;
		bottom: 90px;
		left: calc(50% - 110px);
	}	
}
		
@media only screen and (max-width: 768px) {
#main_visual .kv-pic,	
#main_visual {	
	height: 400px;
	}
	
#main_visual {
    margin-top: 30px;
	}
#main_visual .kv-pic {
    padding-top: 60px;
	background-size: 400px auto;
	}
	.kv-woman{
		width: 110px;
		bottom: 85px;
		left: calc(50% - 160px);
	}
	.kv-man{
		width: 150px;
		bottom: 70px;
		left: calc(50% - 110px);
	}		
}
	
@media only screen and (max-width: 480px) {
#main_visual {	
	height: auto;
    margin-top: 20px;
	}

#main_visual .kv-card  {
    padding-top: 20px;
	}	
	
#main_visual .kv-pic,	
#main_visual .kv-word {
	width: 100%;
	height: 400px;
	}
	.kv-woman{
		width: 130px;
		bottom: 70px;
		left: calc(50% - 130px);
	}
	.kv-man{
		width: 180px;
		bottom: 50px;
		left: calc(50% - 70px);
	}	

}	

/************************
BANNER
************************/ 
.btn_group {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	}
.btn_group-deco {
	justify-content: center;
	}
	.btn_group-margin{
		margin: 0 0 20px;
	}
/************************/
.btn { 
	position: relative;
	display: inline-block;

	line-height: 1.0em;
	text-align: center;
	margin: 20px 10px;
	padding: 10px 30px;
	}

.btn, 
.btn:hover { 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;	
	}

a.btn_00, .btn_00 { 
	min-width: 80px;
	font-size: 16px;
	font-weight: 400;
	padding: 5px 10px;
	color: #000000; 
	border: 1px solid #e17b83;
	border-radius: 30px;
	}
.btn_00:hover { 

	}
	
a.btn_01, .btn_01 { 
	font-size: 30px;
	font-weight: 700;
	padding: 10px 30px;
	color: #cf1d2c; 
	background: #ffffff;
	border: 1px solid #e17b83;
	border-radius: 30px;
	}
.btn_01:hover { 
	color: #ffffff; 
	background: #D80C18;
	}

a.btn_02, .btn_02 {
	font-size: 18px;
	font-weight: 600;
	padding: 10px 20px;
	color: #ffffff;
	background: #cf1d2c;
	border: 1px solid #cf1d2c;
	border-radius: 30px;
	}
.btn_02:hover { 
	color: #cf1d2c; 
	background: #ffffff; 
	}

a.btn_03, .btn_03 { 
	font-size: 18px;
	font-weight: 700;
	padding: 10px 30px;
	color: #4CB49F;
	background: #FFFFFF;
	border: 1px solid #4CB49F;
	border-radius: 30px;
	}
.btn_03:hover { 
	color: #FFFFFF; 
	background: #4CB49F;
	}	

	@media only screen and (max-width: 480px) {	
			.btn_group {
				justify-content: center;
			}
			a.btn_02, .btn_02{
				font-size: 17px;
			}
		}
		
/************************
LAYOUT
************************/ 
#main-content {
	width: 100%;
	}

/************************/
.block .box .txt,
.block .box .pic,
.block ul li,
.block ul,
.block .box img,
.block .box,
.block {
	position: relative;
	display: inline-block;
	width: 100%;
	font-weight: 500;
	}
.block {
	float: left;
	font-size: 20px;
	line-height: 1.6em;	
	}
	
	
.block .h6,
.block .h1 {	
	position: relative;
	display: inline-block;
	}	
	
.block .tt {
	font-size: 28px;
	font-weight: 700;
	}
.block .dt {
	font-size: 20px;
	font-weight: 600;
	}
.block .dt-deco{
	margin-top: 30px;
}
.block .dd {
	font-size: 18px;
	line-height: 1.6em;
	font-weight: 700;
	}
.block .dd-pad{
	padding: 20px 10%;
}
.block .h8 {
	font-size: 14px;
	line-height: 1.4em;
	
	text-indent: -1.0em;
	margin-left: 1.0em;
	}
	
.block .cs01 { color: #ff0018; }
.block .cs02 { 
	font-size: 16px;
    color: #ffffff; 
	background: #f4a82e;
	padding: 0px 10px;
	border-radius: 20px;
	font-weight: 700;
	}

.block_02 .box_02 ul li a.active .cs01,
.block_01 .box_02 ul li a.active .cs01 {
    color: #FFF9A9;
}
.block .cs02 span { 
	font-size: 28px;
	}
	

.block .box_01 p {
	position: relative;
	display: inline-block;
	text-align: center;	
	width: 100%;
	line-height: 1.0em;
	}
.block .box_01 img {
	width: 90%;
	max-width: 300px;
	}
	#page2,#page3,#page4,#page5{
		position: absolute;
		top: -50px;
	}
	.block .box .gogo-card{
		width: 35%;
		margin: 15px 0 -20px;
	}
	@media only screen and (max-width: 480px) {
		.block .dd {
			font-size: 16px;
			text-align: center;
			}
			.block .h8 {
				margin-left: 0em;
				}
		
		}	
	
/************************/
.block_01 {
	padding: 50px 0px;
	text-align: center;
	background: #ffffff;
	}
.block_02 .box_02,	
.block_01 .box_02 {
	margin: 30px  0px;	
	}
	
.block_02 .box_02 ul li,	
.block_01 .box_02 ul li {
	width: 19%;
	line-height: 1.4em;
	margin: 0px  0.5%;
	}
.block_02 .box_02 ul li a,	
.block_01 .box_02 ul li a {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: -18px;
	padding: 10px 0px;
	padding-bottom: 30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 2px solid #3F454E;
	color: #3d454f;
	background: #ffd839;
	z-index: 0;
	transition: all 0.3s ease;
	font-weight: 700;
	} 
.block_02 .box_02 ul li a.tab-active,
.block_01 .box_02 ul li a.tab-active,
.block_02 .box_02 ul li:hover a,
.block_01 .box_02 ul li:hover a {
    transition: all 0.3s ease;
    top: -10px;
    color: #ffffff;
    background: #ff7b00;
    font-weight: 700;
    line-height: 1.5;
 }
	.block_02 .box_02 ul li a.tab-active .cs01,
	.block_01 .box_02 ul li a.tab-active .cs01 {
		color: #FFF9A9;
	}

.block_01 .box_02 ul li {
	width: 19%;
	}
	
.block_02 .box_02 .tabs_body,	
.block_01 .box_02 .tabs_body {
	position: relative;
	display: inline-block;
	width: 99%;
	margin: 0px  0.5%;
	padding: 30px 20px;
	text-align: left;
	background: #ffffff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 2px solid #6a728f;
	z-index: 2;
	}
.block_03 .box_02 .h8,
.block_02 .box_02 .h8,	
.block_01 .box_02 .h8 {
	padding: 30px 20px 0 20px;
	color: #6b6a69;
	text-align: left;
	}	
.block_03 .box_02 .h8-deco,
.block_02 .box_02 .h8-deco,	
.block_01 .box_02 .h8-deco {
	padding: 30px 20px 0 60px;
	}
.block_02 .box_02 .dt,	
.block_01 .box_02 .dt {
	font-weight: 800;
	}
.block_02 .box_02 .dd img,	
.block_01 .box_02 .dd img {
	width: 50px;
	margin-right: 5px;
	}	
.block .box_02 .txt {
	width: 75%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	}	

	.block .box_02 .pic{
		max-width: 260px;
	}
.block .box_02 .pic img {
	width: 260px;
	margin: auto;
	}
	.jcb-add{
		display: ruby-text;
		background-color: #ffd839;
		margin: 40px 0 -30px;
		padding: 5px 7px;
	}
	.block_01 .box_02 .dd .jcb-star{
		width: 26px;
	}
	
	
@media only screen and (max-width: 768px) {
.block .box_02 .pic,	
.block .box_02 .txt {
	width: 100%;
 	}
.block .box_02 .pic {
	padding: 10px;
	text-align: center;
	}	
.block .box_02 .pic img {
	width: 160px;
	}
.block_01 .box_03 .btn_group a {
	display: block;
	width: 90%;
	margin: 10px  0.5%;
	}	
.block_01 .box_03 .h8 p {
	width: 100%;
	padding-top: 10px;
	}
.block .tt {
	font-size: 22px;
	}
	.block .box .gogo-card{
		width: 60%;
	}
	.block .box_02 .txt-center {
		align-items: center;
		}
}	
@media only screen and (max-width: 480px) {
		.block_02 .box_02 ul li a.tab-active,
	.block_01 .box_02 ul li a.tab-active,
	.block_02 .box_02 ul li:hover a,
	.block_01 .box_02 ul li:hover a {
		top: 0;
		}
		.block_03 .box_02 .h8,
.block_02 .box_02 .h8,	
.block_01 .box_02 .h8 {
	padding: 30px 16px 0;
	}	
.block_03 .box_02 .h8-deco,
.block_02 .box_02 .h8-deco,	
.block_01 .box_02 .h8-deco {
	padding: 30px 20px 0 75px;
	}
	}	
	


/************************/
.block_02 {
	padding: 50px 0px;
	text-align: center;
	background: #ffffff;
	}

.block_02 .box_02 ul li {
	width: 24%;
	}
.block_02 .box_02 ul li > a.active,
.block_02 .box_02 ul li:hover {
	background: #8f9ec2;
	}	
.block_02 .box_02 ul li:hover a {
    color: #ffffff;
	}
.block_02 .box_02 .dd p {
	padding: 5px 0px;

	}
	.block_02 .box_02 .dd .dd-flex{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 5px;
	}
.block_02 .box_02 .txt_right {
	position: absolute;
	display: inline-block;
	width: 140px;
	right: 0;
	font-size: 14px;
	line-height: 1.2em;
	text-align: center;
	margin: auto 5%;
	}
	.block_02 .box_02 .txt_right p{
		margin: 12% auto;
	}
.block_02 .box_02 #tab2 .txt {
	padding-right: 180px;
	}	
	
@media only screen and (max-width: 768px) {
.block .box_02 .tabs_box {
	width: 100%;
	
	}
.block_02 .box_02 ul,	
.block_01 .box_02 ul {
	overflow: scroll;
	padding-bottom: 15px;
	}	
.block_01 .box_02 ul {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	}
.block_02 .box_02 ul {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	}
.block_02 .box_02 ul li,	
.block_01 .box_02 ul li {
	display: inline-block;
	vertical-align: top;
	float: left;
	width: 105px;
	}
.block_02 .box_02 ul li a,	
.block_01 .box_02 ul li a {
	margin: 0px;
	padding: 10px 0px;
	border-radius: 10px;
	font-size: 12px;
	letter-spacing: -0.25px;
	line-height: 1.5;
	} 
.block_02 .box_02 ul li a.active,
.block_01 .box_02 ul li a.active,
.block_02 .box_02 ul li:hover a,
.block_01 .box_02 ul li:hover a {
	top: 0px;
	border-radius: 10px;
	}	
.block_02 .box_02 .tabs_body,	
.block_01 .box_02 .tabs_body {
	border-radius: 10px;
	}
	
.block_02 .box_02 .txt_right {
	position: relative;
	width: 100%;
	text-align: center;

	}
	
.block_02 .box_02 .txt_right p {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	vertical-align: top;
	width: 100%;
	min-height: 300px;
	margin: 5px  1%;
	padding: 10px 10px;
	
	border-radius: 10px;
	text-align: center;
	border: 1px solid #dddddd;
	}	
	
.block_02 .box_02 #tab2 .txt {
	padding: 0px 0px;
	}	
.block_02 .box_02 .dd p{

text-align: left;
}
}	
	
/************************/
.block_03 {
	width: 100%;
	padding: 50px 0px;
	padding-bottom: 100px;
	text-align: center;
	background-color: #e8ecf8;
	}

.block_03 .box_02 {
	width: 100%;
	margin: 5px  0px;
	padding: 40px 15%;
	border-radius: 10px;
	text-align: left;
	color: #000000;
	background-color: #ffffff;
	box-shadow: 0 3px 10px #d0d9f0;
	}

.block_03 .box_02 .tt {
	text-align: center;
	color: #000000;
	padding-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.block_03 .tab-wrapper3 .tt span {
		display: inline-block;
		width: 30px;
		height: 30px;
		position: relative;
		transform-origin: 50% 50%;
		margin-left: 6px;
	}
	
	.block_03 .tab-wrapper3 .tt span img {
		width: 100%;
		height: 100%;
		display: block;
	}
/* .block_03 .tab-wrapper3 .tt span {
	position: relative;
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 15px solid transparent; 
	border-right: 15px solid transparent;
	border-bottom: 20px solid #ffa300; 
	} */
.block_03 .tab-wrapper3 a.tab-active .tt span {
    transform: rotate(180deg);
	transform-origin:50% 50%;
	}
.block_03 .tab-wrapper3 a.tab-active .tt span,	
.block_03 .tab-wrapper3 .tt span {	
    transition: all 0.3s ease;
	transform-origin:50% 50%;
	}	
	
	
@media only screen and (max-width: 992px) {
	
}
@media only screen and (max-width: 768px) {
.block_03,	
.block_02,
.block_01 {
	padding: 50px 20px;
	}
}
@media only screen and (max-width: 480px) {
	.block_03 .box_02{
		padding: 26px 10%;
		}

}	
/************************/
.block_10 {
	padding: 0px 0px;
	}
/************************/

.block .fw800 { font-weight: 800; }

.block .tabs,
.block .hide {	display: none; }
.block .tab-content-active,
.block .show {
	width: 100% ;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 80px;
}
.block .show-deco {
	flex-wrap: wrap;
	gap: inherit;
}

.pc_768 {	
	display: inline-block; 	
	}
.mo_768,
.mo_480 {
    display: none; 
	width: 100% 
	}

@media only screen and (max-width: 992px) {
	
}
@media only screen and (max-width: 768px) {
.mo_768 {	
	display: inline-block; 	
	}
	.block .show {
		width: 100% ;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0px;
	}
}
@media only screen and (max-width: 480px) {
	.block .tab-content-active, .block .show {
		flex-wrap: wrap;
		gap: 0px;
	}

}

/***********************
TABLE 表格選單
***********************/
table.drawer {
	width: 100%;
    margin: 0;
    padding: 0;
	line-height: 1.2em;
    border-collapse: collapse;
    border-spacing: 0;
	}
table.drawer tr {
	padding: 5px;
	text-align: left;
	border: 1px solid #a2a2a2;
    }
table.drawer tr {
    border-bottom: 1px solid #a2a2a2;
    }
table.drawer td {
	min-height: 50px;
	padding: 10px 10px;
	vertical-align: middle;
	text-align: left;
	border-bottom: 1px solid #a2a2a2;
	
	margin-left: 0px;
	text-indent: 0px;
    }
	
table.drawer td + td {
	border-left: 1px solid #a2a2a2;
    }
table.drawer td span {
	display: none;
	color: #73b9ff;
	padding-right: 10px;
    }
@media only screen and (max-width: 768px) {
table.drawer {
	min-width: auto;
	width: 100%;
	}
table.drawer thead { display: none; }
table.drawer td span { display: inline-block; }
table.drawer tr {
    display: block;
    border-bottom: 0px solid #ffffff;
	}
table.drawer tr td {
    display: block;
    min-height: auto;
	border: 1px solid #a2a2a2;
    }
table.drawer td + td {
	border-top: 0px solid #a2a2a2;
    }
}

/************************
DRAWER-ITEM 
************************/ 
.drawer-header,
.drawer-item {
	position: relative;
	display: inline-block;
	float: left; 
	width: 100%;	
    }
.drawer-item {
	padding: 0px 0px;
	background: #ffffff;
    }
	
.drawer-header {
	cursor: pointer;
	margin: 0px;
	padding: 15px 10px;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
    }
	
.drawer-item-active .drawer-header,	
.drawer-header {	
	color: #ffffff;
	transition: 0.25s;
    }	

	
.drawer-item h4,
.drawer-header-icon {
	display: inline-block;
    }	
.drawer-item h4 {
	font-size: 18px;
	line-height: 20px;	
	font-weight: 600;
	color: #ffffff;	
	padding-right: 10px;
    }

.drawer-header-icon {
	position: relative;
	display: inline-block;	
	width: 16px;
	height: 16px;
    }
.drawer-item-active .drawer-header-icon {
	transform: rotate(-90deg);
	top: 8px;
	left: -5px;
    }


.drawer-content {
	position: relative;
	display: inline-block;
	width: 100%; 
	padding: 20px 4%;
    color: #474747;  
	font-size: 14px;
	line-height: 1.8em;
	text-align: left;
	}
.drawer-item-active .drawer-content { 

	}
	
	
.drawer-content h3 {
	color: #000000; 
	font-size: 16px;
	font-weight: 600;
	margin-left: -20px;
	padding-right: 20px;
	}

.drawer-content ul,
.drawer-content ol {
	position: relative;
	display: inline-block;
	list-style-type: decimal;
	width: 100%;
    }
.drawer-content ul {
	list-style-type: none;
    }
	
.drawer-content ol {
	margin-bottom: 20px;
    }
.drawer-content P {
	margin-left: -25px;
}
.drawer-content ul li ul {
	margin-bottom: 0px;
    }


@media only screen and (max-width: 768px) {
	.drawer-content{
		padding: 20px 10%;
	}
/*.drawer-content { display: none; }*/
}