@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700|Raleway:400,500,600|Roboto:400,500,900&display=swap);
.contentBox .leftBox {
	float: left;
	width: 13%
}
.contentBox .rightBox {
	float: left;
	width: 70%;
	padding-left: 75px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.faqList {
	padding: 40px 0;
	width: 100%
}
.faqList>li {
	margin-bottom: 15px
}
.faqList h3 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	padding: 20px 50px 20px 30px;
	font-size: 17px;
	font-weight: 400;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #111;
	cursor: pointer;
	border: 1px solid #e5e5e5
}
.faqList h3.open {
	color: #fff
}
.faqList h3.open:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-animation: itemOpen 0.6s ease;
	animation: itemOpen 0.6s ease
}
.faqList h3.open b {
	color: #fff
}
.faqList h3:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background-color: #2378c0;
	background-repeat: no-repeat;
	background-image: url(../images/faq_hover.png);
	background-size: 537px 100%;
	z-index: -1;
	opacity: 1;
	-webkit-animation: itemClose 0.4s ease;
	animation: itemClose 0.4s ease
}
.faqList h3 b {
	display: inline-block;
	width: 45px;
	font-size: 17px;
	font-weight: 500;
	font-family: "Raleway", sans-serif;
	color: #2378c0
}
@-webkit-keyframes itemOpen {
	0%, 10% {
		opacity: 0;
		width: 1px;
		height: 12px
	}
	to {
		opacity: 1;
		width: 100%;
		height: 100%
	}
}
@keyframes itemOpen {
	0%, 10% {
		opacity: 0;
		width: 1px;
		height: 12px
	}
	to {
		opacity: 1;
		width: 100%;
		height: 100%
	}
}
@-webkit-keyframes itemClose {
	0% {
		opacity: 1;
		width: 100%;
		height: 100%
	}
	to {
		opacity: 0;
		width: 100%;
		height: 100%
	}
}
@keyframes itemClose {
	0% {
		opacity: 1;
		width: 100%;
		height: 100%
	}
	to {
		opacity: 0;
		width: 100%;
		height: 100%
	}
}
.toggleOpen {
	position: absolute;
	right: 25px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: inline-block;
	width: 20px;
	height: 20px;
	cursor: pointer
}
.toggleOpen:before {
	content: "";
	position: absolute;
	top: calc(50% + 6px);
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #bfbfbf;
	border-left: 2px solid #bfbfbf;
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform: rotate(-135deg)
}
.toggleOpen.arrowUp:before {
	content: "";
	position: absolute;
	top: calc(50% + 12px);
	left: 50%;
	width: 9px;
	height: 9px;
	border: none;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff
}
.definition {
	display: none;
	padding: 30px 70px 50px 30px;
	font-size: 15px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #454545;
	line-height: 1.8;
	background-color: #f4f4f4;
	letter-spacing: 1px
}
.definition b {
	float: left;
	width: 45px;
	font-size: 17px;
	font-weight: 500;
	font-family: "Raleway", sans-serif;
	color: #2378c0
}
.definition .text {
	float: left;
	width: calc(100% - 45px)
}
@media (max-width:1180px) {
	.contentBox .leftBox {
		width: 215px
	}
	.contentBox .rightBox {
		width: calc(100% - 215px);
		padding-left: 30px
	}
}
@media (max-width:960px) {
	.contentBox .leftBox {
		width: 180px
	}
	.contentBox .rightBox {
		width: calc(100% - 210px);
		padding-left: 30px
	}
}
@media (max-width:767px) {
	.contentBox .leftBox, .contentBox .rightBox {
		float: none;
		width: 100%
	}
	.contentBox .rightBox {
		padding-left: 0
	}
}
@media (max-width:640px) {
	.faqList {
		padding: 30px 0
	}
	.faqList h3 {
		font-size: 15px;
		padding: 10px 35px 10px 15px
	}
	.faqList h3 b {
		font-size: 15px
	}
	.toggleOpen {
		right: 10px
	}
	.toggleOpen:before {
		width: 6px;
		height: 6px
	}
	.toggleOpen.arrowUp:before {
		width: 6px;
		height: 6px
	}
}