@charset "utf-8";
/* CSS Document */

body {
	margin: 0 auto;
	font-family: "微軟正黑體", "Microsoft JhengHei";
	background-repeat: repeat-x;
	/*max-width:1200px;*/
	padding: 0px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
}

li {
	list-style: none;

}

img {
	max-width: 100%;
	height: auto;
}

#logo,
#groupLogo {
	padding: 10px;
}

.header {
	height: 134px;
	/* background-image: url(../images/h-menubg3.gif);
	background-repeat: repeat-x; */
}

@media screen and (min-width:991px) {
	.header {
		height: 134px;
		background-image: url(../images/h-menubg3.gif);
		background-repeat: repeat-x;
	}
}

#header {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0px;
}

#toplink ul {
	float: right;
	padding: 20px 10px;
	font-size: 12px;
}

#toplink li {
	display: inline;
	padding: 0 10px;
}

#toplink li a {
	display: inline;
	padding: 0 10px;
	font-size: 16px;
	color: #0091c7;
	text-decoration: none;
}

.h-menu {}

#h-menu {
	float: left;
	width: 100%;
	max-width: 1280px;
	height: auto;
}

#h-menu ul {
	height: 45px;
	background-image: url(../images/h-menubg2.gif);
	background-repeat: no-repeat;
	margin: 0px;

}

#h-menu li {
	display: inline;
	height: 20px;
	padding: 10px 60px;
	float: left;
}

#h-menu li a {
	color: #FFF;
	text-decoration: none;
	font-size: 20px;
}

#h-menu li a:hover {
	color: #fcff00;

}

#banner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0px;
}

/*top*/
#toplink {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding-top: 10px;
}

.idx-m {
	width: 1260px;
	margin: 0 auto;
}

.idx-m .left {
	width: 1260px;
	float: left;
	position: relative;
	padding: 20px 0 0 0;

}

.idx-m .right {
	width: 450px;
	right: 0;
	position: absolute;
}

.idx-m .left ul.btn {
	width: 840px;
	float: left;
}

.idx-m .left .btnStyle {
	width: 270px;
	height: 240px;
	float: left;
	margin: 5px;
	font-size: 16px;
	text-align: center;
	padding: 4px 0 0 0;
	color: #FFF;
	position: relative;
}

.idx-m .left .btnStyle span {
	font-size: 14px;
	color: #666;
	width: 50%;
	right: 0;
	top: 63px;
	position: absolute
}

.idx-box1 {
	background-image: url(../images/box.png);
	background-repeat: no-repeat;
}

.idx-box2 {
	background-image: url(../images/box2.png);
	background-repeat: no-repeat;
}

.idx-box3 {
	background-image: url(../images/box3.png);
	background-repeat: no-repeat;
}

.idx-box4 {
	background-image: url(../images/box4.png);
	background-repeat: no-repeat;
}

.idx-box5 {
	background-image: url(../images/box5.png);
	background-repeat: no-repeat;
}

.idx-m .right #idx-pro {
	width: 302px;
	height: 113px;
	font-size: 14px;
	line-height: 20px;
	position: absolute;
	padding: 10px 0 0 150px;
	right: 0;
	margin: 5px 0;
	background: url(../images/idx_proBg.png) right top no-repeat;
}

.idx-m #idx-pro .img {
	float: left;
	width: 95px;
}

.idx-m #idx-pro .text {
	float: left;
	width: 187px;
}

.idx-m #idx-news {
	width: 600px;
	height: 340px;
	position: absolute;
	right: 0;
	top: 130px;
	margin: 5px 0;
	background: url(../images/idx_newBg.png) right top no-repeat;
}

.idx-m #idx-news .ctn {
	width: 100%;
	height: 340px;
	float: left;
	position: relative;
}

.idx-m #idx-news ul {
	float: left;
	padding: 70px 0 0 200px;
}

.idx-m #idx-news ul li {
	background: url(../images/idx_new_list.png) left 8px no-repeat;
	padding: 3px 0 3px 20px;
	float: left;
	width: 95%;
}

.idx-m #idx-news a {
	color: #fff;
	text-decoration: none;
}

.idx-m #idx-news #idx-link {
	width: 545px;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.idx-m #idx-link .btn_l {
	width: 135px;
	height: 74px;
	float: left;
	background: url(../images/idx_new_btn_l.png) no-repeat;
	margin: 0 5px;
	padding: 11px 0 0 150px;
	line-height: 22px;
}

.idx-m #idx-link .btn_r {
	width: 130px;
	height: 76px;
	float: left;
	margin: 0 5px;
	padding: 0 0 0 110px;
	line-height: 76px;
	background: url(../images/idx_new_btn_r.png) no-repeat;
}

/*foot*/
.foot {
	background-image: url(../images/footerbg.gif);
	background-repeat: repeat-x;
}

#footer {
	/*background-color: #e7e7e7;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-top-style: solid;
	border-top-color: #1cd7ad;

	float:left;*/
	height: auto;
	width: 100%;
	/*add*/
	max-width: 1550px;
	margin: 0 auto;
}

#footlogo {
	padding: 10px;
	font-size: 11px;
	text-align: right;
	line-height: 16px;
	float: left;
	margin: 30px 10px;
}

.footmenu {
	max-width: 100%;
	height: auto;
}

.footmenu li {
	display: inline;
	padding: 0 5px;
	float: left;
	line-height: 34px;
}

.footmenu li a {
	background-image: url(../images/footicon.png);
	background-repeat: no-repeat;
	background-position: 10px;
	padding: 0 0 0 25px;
	color: #2f87a7;
	text-decoration: none;
}

.footmenu li a:hover {
	font-weight: bold;
}

.footmenu li p {
	padding: 0;
	font-size: 14px;
	margin: 0px;
	line-height: 24px;
	background-image: none;
}

.footmenu li p a {
	background-image: none;
	color: #666;
}

.footmenu li p a:hover {
	text-decoration: underline;
	font-weight: normal;
}

.footcopy {
	background-color: #006e97;
	height: 41px;
}

#footcopy {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0px;
	display: flex;
	justify-content: space-between;
}

#footw {
	text-align: right;
	font-size: 14px;
	color: #FFFFFF;
	padding: 10px 0 0 0;
}

#footw a {
	color: #59a1bb;
	text-decoration: none;
}

@media all and (max-width :1305px) {
	.foot{
		background-image:none;
		background-color: #e9e9e8;
		height:auto;
		width:100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

	#header,
	#footer {
		max-width: 1000px;
	}

	.h-menu {
		margin-top: 18px;
	}

	.idx-m,
	.idx-m .left {
		width: 1000px;
		height: 725px;
	}

	.idx-m .left ul.btn {}

	.idx-m .right {
		position: initial;
		float: left;
	}

	.idx-m .right #idx-pro {
		top: 270px;
	}

	.idx-m #idx-news {
		top: 405px;
	}

	#footlogo {
		width: 200px;
		padding: 0;
		margin: 30px 0;
	}

	.footmenu li {
		padding: 10px;
	}

	.footmenu li a {
		padding: 0;
		background: none;
	}
}

@media screen and (min-width: 320px) and (max-width: 768px) {
	#header {
		height: 180px;
		background: none;
	}

	.header {}

	.h-menu {
		position: absolute;
		top: 145px;
	}

	#logo {
		text-align: center;
		padding: 0;
	}

	#toplink {
		width: 100%;
		float: left;
	}

	#toplink ul {
		padding: 0;
		width: 305px;
		margin: 0 auto;
		float: none;
	}

	#toplink li {
		padding: 0;
	}

	#toplink li a {
		padding: 0 5px;
	}

	.idx-m,
	.idx-m .left {
		width: 100%;
		padding: 0;
	}

	.idx-m .left ul.btn {
		width: 270px;
		margin: 0 auto;
		float: none;
	}

	.idx-m .right {
		width: 100%;
		position: initial;
		float: left;
	}

	.idx-m #idx-news,
	.idx-m .right #idx-pro {
		position: initial;
		float: left;
	}

	.idx-m #idx-news {
		width: 100%;
		padding: 0;
	}

	.idx-m #idx-news ul {
		padding: 70px 0 0 0;
	}

	.idx-m #idx-news #idx-link {
		width: 100%;
		padding: 0;
		display: flex;
		transform: scale(0.7);
	}

	.idx-m #idx-link .btn_l,
	.idx-m #idx-link .btn_r {
		float: none;
		margin: 5px auto;
	}

	.idx-m .right #idx-pro {
		width: 100%;
		height: auto;
		padding: 0;
		background: none;
	}

	.idx-m #idx-pro .img {
		width: 100%;
		text-align: center;
		float: left;
		padding: 10px 0;
	}

	.idx-m #idx-pro .text {
		width: 90%;
		padding: 0 5%;
	}

	/* .footmenu ul {
		display: none;
	} */

	#footw {
		text-align: center;
	}

	#footw a {
		width: 100%;

	}
}
@media screen and (max-width:991px) {
	#header .container{
		display: flex;
		flex-wrap: wrap;
	}

	.mobW6{
		order: 0;
		flex: 0 0 50%;
		max-width: 50%;
		display: flex;
		justify-content: center;
		margin-bottom: 0;
	}
	.mobW8{
		order: 2;
		margin-bottom: 0;
	}
	#groupLogo, #toplink{
		padding: 0;
	}
	#toplink ul{
		padding: 10px 0 0 0;
	}
}

@media all and (max-width :425px) {
	.footmenu ul {
		display: flex;
		flex-direction: column;
		float: left;
	}
}