@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);/*思源黑體*/
/* font style */
body {
	font-family: 'Noto Sans TC', sans-serif;
}
/*文字自動省略*/
.font_vertical {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-height: 24px;
	height: 72px;
}

a {
	text-decoration: none;
}
.table {
	border-color: #00458c;
}
.d_bg {
	border: 1px solid #717171;
}
.form-control:focus {
	border-color: #3190ba;
	box-shadow: 0 0 0 0 transparent;
}
.form-select:focus {
	border-color: #3190ba;
	box-shadow: 0 0 0 0 transparent;
}
.btn-check:focus + .btn, .btn:focus {
	outline: 0;
	box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25);
}
.page-link:focus {
	color: #3190ba;
	box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25);
}
/*輪播按鈕*/
.carousel-indicators [data-bs-target] {
	box-sizing: content-box;
	flex: 0 1 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	padding: 0;
	margin-right: 3px;
	margin-left: 3px;
	text-indent: -999px;
	cursor: pointer;
	background-color: #fff;
	background-clip: padding-box;
	transition: opacity .6s ease;
	opacity: 1;
	border: 0;
	margin: 0 5px;
}
.carousel-indicators .active {
	background-color: #c8c8c8;
	border: 0;
}
/*區塊內元素垂直&水平居中*/
.container_box {
	display: flex;
	height: 150px;
}
.align_center {
	margin: auto;/**當在flex下，設為auto時，就會垂直與水平居中**/
	display: flex;
	align-items: center; /**垂直居中**/
	justify-content: center;/**水平居中**/
}
/*pagination*/
.pagination {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 0;
}
.pagination .page-item .page-link {
	font-size: 14px;
	color: #8e8e8e;
	border-color: #8e8e8e;
	border-width: 0;
	border-radius: 50px;
	width: 35px;
	height: 35px;
	line-height: 25px;
	text-align: center;
	margin: 0 5px;
}
.pagination .page-item.active .page-link {
	color: #FFF;
	background-color: #00458c;
	border-color: #00458c;
}
/*breadcrumb*/
#breadcrumb_bg {
	background-color: #f1f1f1;
}
.breadcrumb-item a {
	color: #333;
	text-decoration: none;
}
.breadcrumb-item a:hover {
	color: #0070ba;
}
.breadcrumb-item.active {
	color: #0070ba;
}
/*footer*/
.f_bg {
	background-color: #072f63;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
}
/**/
.btn_style {
	width: 100%;
	color: #fff;
	background-color: #013c7c;
	border-color: #fff;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 5rem;
}
.btn_style:hover {
	color: #fff;
	background-color: #e79012;
	border-color: #e79012;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.d_btn, .d_btn a {
	width: 100%;
	color: #fff;
	background-color: #00458c;
	border-color: #00458c;
	-webkit-box-shadow: 1px 1px 0 #00458c;
	box-shadow: 1px 1px 0 #00458c;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 50px;
}
.d_btn:hover, .d_btn a:hover {
	color: #fff;
	background-color: #e79012;
	border-color: #e79012;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.dm_btn, .dm_btn a {
	color: #fff;
	background-color: #00458c;
	border-color: #00458c;
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 50px;
	font-size: 16px;
}
.dm_btn:hover, .dm_btn a:hover {
	color: #fff;
	background-color: #e79012;
}
/*search*/
.search_box {
	border: 1px solid #ced4da;
	float: right;
	clear: none;
	display: inline-block;
	position: relative;
	margin-top: 5px;
}
.search_box i {
	float: left;
	clear: left;
	line-height: 40px;
	position: relative;
	z-index: 5;
	padding: 0 5px;
}
.search_form {
	width: 80px;
	float: left;
	clear: none;
	position: relative;
	z-index: 1;
}
.search_box .form-control {
	border: 0;
}
.search_btn {
	border: 0;
	text-align: center;
	float: left;
	clear: none;
}
.p_search_box {
	border: 1px solid #ced4da;
	float: right;
	clear: none;
	display: inline-block;
	position: relative;
	border-radius: 50px;
	margin-top: 5px;
	padding: 0 5px 0 10px;
	background-color: #fff;
}
.form-control {
	border-radius: 10px;
}
.form-select {
	border-radius: 10px;
}
/*login_box*/
.login_box {
	width: 105px;
	font-size: 16px;
	line-height: 40px;
	display: inline-block;
	float: right;
	clear: none;
	margin-left: 10px;
}
.login_box i {
	font-size: 20px;
	line-height: 40px;
	margin-right: 5px;
}
.login_box a {
	color: #333;
}
.login_box a:hover {
	color: #013c7c;
}
.login_box img {
	width: 30px;
	margin-right: 5px;
}
/*header*/
.header_bg {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 888;
	background-color: #fff;
	-webkit-box-shadow: 5px 0px 5px hsla(0, 0%, 0%, 0.65);
	box-shadow: 5px 0px 5px hsla(0, 0%, 0%, 0.65);
}
.fb-icon {
	vertical-align: middle;
}
/*banner*/
.p_banner {
	width: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.p_title {
	font-size: 22px;
}
/*contact*/
.c_title {
	font-size: 40px;
}
.c_bg {
	background-image: url(../images/c_bg.png);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
/*project*/
.title_style {
	font-size: 20px;
	padding-left: 30px;
	position: relative;
}
.title_style::before {
	font-family: "Font Awesome 5 Free";
	content: '\f111';
	font-weight: 700;
	color: #00458c;
	font-size: 12px;
	position: absolute;
	left: 10px;
	top: 25%;
}
.n_title_style {
	font-size: 20px;
}
/*news*/
.n_color {
	background-color: #dedede;
}
a .card-body, a:hover .card-body {
	color: #000;
	text-decoration: none;
}
.date {
	background-color: #8e8e8e;
	padding: 0px 10px;
	font-size: 16px;
	line-height: 25px;
	color: #fff;
	display: inline-block;
}
.class_item {
	background-color: #00458c;
	padding: 0px 10px;
	font-size: 16px;
	line-height: 25px;
	color: #fff;
	display: inline-block;
}
.s_class_item {
	background-color: #00458c;
	padding: 5px 10px;
	color: #fff;
	display: inline-block;
}
/*about*/
.a_bg {
	background-image: url(../images/a_bg.png);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
/*member*/
.m_bg {
	background-image: url(../images/m_bg.png);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
/*projects*/
.p_bg {
	background-image: url(../images/p_bg.png);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
.card {
	background-color: transparent;
	border: 0;
}
.pro_pic {
	max-width: 300px;
	margin: auto;
}
.banner_area {
	font-size: 30px;
	font-weight: 600;
	line-height: 40px;
	margin-bottom: 20px;
	color: #00458c;
}
/*icon_menu*/
ul.icon_menu {
	margin: 0 auto;
	width: 100%;
	padding: 0;
	max-width: 1000px;
}
ul.icon_menu li {
	display: inline-block;
	width: 100%;
	background-color: #fff;
	padding: 10px;
	margin-bottom: 10px;
}
ul.icon_menu li:hover {
	background-color: #00ab84;
}
a .icon1 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon1.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon1, ul.icon_menu li.current .icon1 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon1_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon2 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon2.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon2, ul.icon_menu li.current .icon2 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon2_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
ul.icon_menu li.current {
	background-color: #00ab84;
	color: #fff;
}
a .icon3 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon3.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon3, ul.icon_menu li.current .icon3 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon3_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon4 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon4.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon4, ul.icon_menu li.current .icon4 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon4_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon5 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon5.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon5, ul.icon_menu li.current .icon5 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon5_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon6 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon6.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon6, ul.icon_menu li.current .icon6 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon6_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon7 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon7.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon7, ul.icon_menu li.current .icon7 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon7_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon8 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon8.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon8, ul.icon_menu li.current .icon8 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon8_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
a .icon9 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon9.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 10px;
}
a:hover .icon9, ul.icon_menu li.current .icon9 {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/icon9_h.png);
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
}
ul.icon_menu a li {
	color: #00458c;
	font-size: 20px;
	line-height: 40px;
}
ul.icon_menu a:hover li {
	color: #fff;
}
/*about*/
.a_title {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
}
.a_banner {
	font-size: 32px;
	line-height: 40px;
}
.a_banner_bg {
	/**background-image: url(../images/a_banner_bg.png);**/
	width: 90%;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	float: right;
	clear: none;
	padding: 8% 10%;
	position: relative;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.70);
	border-top-left-radius: 40px 40px;
	border-bottom-left-radius: 40px 40px;
}
.banner_e {
	color: #e79012;
	font-size: 20px;
	line-height: 30px;
	text-transform: uppercase;
	font-weight: 700;
	position: relative;
	z-index: 0;
}
.banner_c {
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 20px;
	position: relative;
	z-index: 0;
}
/*work*/
.w_bg {
	background-image: url(../images/w_bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
.w_title {
	font-size: 28px;
	color: #00458c;
}
.w_box {
	background-color: #fff;
}
.w_box:hover {
	background-color: #e79012;
	cursor: pointer;
	color: #fff;
}
.w_box .w_btn a {
	float: right;
	clear: none;
	color: #8e8e8e;
	font-size: 16px;
	line-height: 35px;
}
.w_box .w_btn a:hover {
	color: #fff;
}
/**/
.sn_bg {
	background-image: url(../images/n_bg.jpg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
}
.n_bg {
	background-image: url(../images/n_bg.png);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
}
.n_box {
	border: 1px solid #a1a1a1;
	padding: 10px;
	background-color: #fff;
}
.n_title, a.n_title {
	width: 100%;
	float: left;
	clear: none;
	font-size: 16px;
	line-height: 25px;
	color: #333;
}
.n_date, a.n_date {
	display: inline-block;
	float: right;
	clear: none;
	font-size: 16px;
	line-height: 25px;
	color: #333;
	text-align: center;
}
a.n_btn {
	background-color: #fff;
	padding: 5px 20px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	float: right;
	clear: none;
	display: inline-block;
	color: #333;
}
a:hover.n_btn {
	background-color: #ea932d;
	color: #fff;
}
a.more_btn {
	background-color: #fff;
	padding: 5px 20px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	display: inline-block;
	color: #333;
	margin-left: auto;
	margin-right: auto;
}
a:hover.more_btn {
	background-color: #ea932d;
	color: #fff;
}
/*abg*/
.zindex {
	z-index: 3;
}
.bg {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#07223d+0,0c2e53+100 */
	background: #07223d; /* Old browsers */
	background: -moz-linear-gradient(top, #07223d 0%, #0c2e53 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #07223d 0%, #0c2e53 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #07223d 0%, #0c2e53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07223d', endColorstr='#0c2e53', GradientType=0 ); /* IE6-9 */
}
.a_bg1 {
	background-image: url(../images/2.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	width: 100%;
	position: relative;
	z-index: 0;
}
.c1_line, .c3_line, .c5_line, .c7_line {
	position: absolute;
	bottom: 0px;
	left: 0;
	z-index: 0;
}
.c2_line, .c4_line, .c6_line, .c8_line {
	position: absolute;
	top: 0px;
	left: 0;
	z-index: 0;
}
.a_bg2 {
	background-image: url(../images/3.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: cover;
	width: 100%;
	position: relative;
	z-index: 0;
}
.a_bg3 {
	background-image: url(../images/4.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	width: 100%;
	position: relative;
	z-index: 0;
}
.a_bg4 {
	background-image: url(../images/5.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 100%;
	position: relative;
	z-index: 0;
}
.a_bg5 {
	background-image: url(../images/1.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	width: 100%;
	position: relative;
	z-index: 0;
}
.ad_title {
	font-size: 23px;
	line-height: 35px;
}
.ad_titles {
	font-size: 20px;
	line-height: 30px;
}
.a_text {
	font-size: 14px;
	line-height: 25px;
}
a.m_btn {
	padding: 5px 15px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	display: inline-block;
	color: #fff;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-color: #00ab84;
}
/**
a.m_btn:after {
	position: absolute;
	content: "";
	width: 90px;
	height: 25px;
	left: 0;
	bottom: 0%;
	background-image: url(../images/btn_line.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}**/
a:hover.m_btn {
	color: #fff;
	position: relative;
	background-color: #08233f;
}
/**
a:hover.m_btn:after {
	position: absolute;
	content: "";
	width: 90px;
	height: 25px;
	left: 0;
	bottom: 0%;
	background-image: url(../images/btn_line_h.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}**/
.rule_box {
	background-color: #fff;
	border: 1px solid #00458c;
	margin-bottom: 20px;
}
.rule_title {
	background-color: #00458c;
	color: #fff;
	text-align: center;
	font-size: 16px;
	width: 20%;
	float: left;
	clear: none;
	display: inline-block;
	padding: 20px 0;
}
.rule_text {
	font-size: 16px;
	float: left;
	clear: none;
	display: inline-block;
	width: calc(100% - 20%);
	padding: 20px;
}
.picon {
	width: 30px;
}

@media (min-width: 480px) {
.picon {
	width: 40px;
}
}

@media (min-width: 768px) {
	.font_vertical_m {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 24px;
	height: 55px;
}
ul.icon_menu {
	text-align: center;
}
ul.icon_menu li {
	width: 150px;
	padding: 10px;
	margin-bottom: 0px;
	display: table-cell;
}
a .icon1, a:hover .icon1, a .icon2, a:hover .icon2, a .icon3, a:hover .icon3, a .icon4, a:hover .icon4, a .icon5, a:hover .icon5, a .icon6, a:hover .icon6, a .icon7, a:hover .icon7, a .icon8, a:hover .icon8, a .icon9, a:hover .icon9 {
	width: 100%;
	height: 50px;
	background-size: 50px;
	margin-right: 0px;
}
ul.icon_menu li.current .icon1, ul.icon_menu li.current .icon2, ul.icon_menu li.current .icon3, ul.icon_menu li.current .icon4, ul.icon_menu li.current .icon5, ul.icon_menu li.current .icon6, ul.icon_menu li.current .icon7, ul.icon_menu li.current .icon8, ul.icon_menu li.current .icon9 {
	width: 100%;
	height: 50px;
	background-size: 50px;
	margin-right: 0px;
}
ul.icon_menu a li {
	text-align: center;
	font-size: 18px;
	line-height: 25px;
}
a .icon_menu1 {
	text-align: center;
	font-size: 18px;
	line-height: 25px;
}
/*about*/
.a_title {
	font-size: 30px;
	line-height: 40px;
}
.a_text {
	font-size: 18px;
	line-height: 30px;
}
.a_banner {
	font-size: 48px;
	line-height: 50px;
}
.a_banner_bg {
	padding: 5% 8%;
	margin-top: -10%;
}
.banner_e {
	font-size: 40px;
}
.banner_c {
	font-size: 50px;
	line-height: 70px;
}
/*abg*/
.ad_title {
	font-size: 50px;
	line-height: 60px;
}
.ad_titles {
	font-size: 30px;
	line-height: 40px;
}
.n_title, a.n_title {
	width: 80%;
	font-size: 18px;
	line-height: 30px;
}
.n_date, a.n_date {
	width: 20%;
	float: right;
	font-size: 18px;
	line-height: 30px;
}
}

@media (min-width: 992px) {
/*project*/
.title_style {
	font-size: 30px;
}
.title_style::before {
	font-size: 14px;
	left: 10px;
	top: 40%;
}
.n_title_style {
	font-size: 30px;
}
ul.icon_menu li {
	padding: 30px 10px;
}
.n_box {
	padding: 20px;
}
}

@media (min-width: 1200px) {
/*about*/
.a_banner {
	font-size: 70px;
	line-height: 80px;
	margin-bottom: 20px;
}
.a_banner_bg {
	padding: 5% 6%;
}
/*abg*/
.a_text {
	font-size: 20px;
	line-height: 35px;
}
ul.icon_menu li {
	padding: 30px 10px;
	width: 180px;
}
a .icon1, a:hover .icon1, a .icon2, a:hover .icon2, a .icon3, a:hover .icon3, a .icon4, a:hover .icon4, a .icon5, a:hover .icon5, a .icon6, a:hover .icon6, a .icon7, a:hover .icon7, a .icon8, a:hover .icon8, a .icon9, a:hover .icon9 {
	width: 100%;
	height: 80px;
	background-size: 70px;
}
ul.icon_menu li.current .icon1, ul.icon_menu li.current .icon2, ul.icon_menu li.current .icon3, ul.icon_menu li.current .icon4, ul.icon_menu li.current .icon5, ul.icon_menu li.current .icon6, ul.icon_menu li.current .icon7, ul.icon_menu li.current .icon8, ul.icon_menu li.current .icon9 {
	width: 100%;
	height: 80px;
	background-size: 70px;
}
.n_title, a.n_title {
	width: 85%;
}
.n_date, a.n_date {
	width: 15%;
}
}

@media (min-width: 1400px) {
.a_banner_bg {
	width: 85%;
	background-size: 100%;
	margin-top: -5%;
}
}

@media (min-width: 1600px) {
/*abg*/

}