.container-fluid{
	margin:0;
	padding:0;
}

#header-title{
	position:relative;
	text-align:center;	
	padding:0;
}

.header-img{
	position:relative;
	display:block;
	background: linear-gradient(to bottom, #eac54a 0%,#ffffff 100%);
	width:90%;
	margin:0 auto;
	padding: 2rem 0 2rem 0;
}

.header-img img{	
	display:block;
	margin:0 auto;
}

h2.title{
	position:absolute;
	background:white;
	width:25%;
	color: var(--red) !important;
	box-shadow:5px 5px 5px rgba(0,0,0,.3);
	padding-bottom: 0;
	top:47%;
	right:30%;
}

.header-wrap{
	background:white;
	display:block;
	width:90%;
	margin:0 auto;
	z-index:5;
}

.header-bg{
	width:100%;
	height:16.5rem;
	z-index:-1;
}

.header-group{
	background:var(--white);
	padding:2rem 1.5rem 1rem 1.5rem;
}

.header-group .group-title{
	background: var(--red-100);
	border:3px solid var(--red-800);
	color: white;
	border-radius:1.5rem;
	width:70%;
	margin:0 auto;
	padding:.2rem 0;
}

.header-group ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	width:80%;
	margin:0 auto;
	padding-left: 0;
}

.header-group ul li{
	position:relative;
	font-family: Roboto, "Noto Sans TC", "微軟正黑體", sans-serif !important;
	display:flex;
	justify-content:center;
	align-items:center;
	list-style:none;	
	width: 33%;
	border-radius:1.5rem;	
	z-index:9;
	margin-bottom: 0.2rem;
}

.header-group ul li a, .header-group ul li button{
	position:relative;
	font-size:1.3rem;
}

.header-group ul li a{
	font-weight:700;
	text-decoration: none;
	color:var(--black);
	padding: .2rem 1rem;	
	z-index:9;
}

.header-group ul li a:hover{
	color:white;
}

.header-group ul li:before{
	position:absolute;
	content:"";	
	width:100%;
	height:0;
	transition:.3s;
	z-index:-1;
	bottom:0;
	left:0;
}

.header-group ul li:hover:before{
	background: var(--orange);
	border-radius:1.5rem;
	width:100%;
	height:100%;
	z-index:1;
}

.header-group .btn{
	font-family: Roboto, "Noto Sans TC", "微軟正黑體", sans-serif !important;
	font-weight:bold;
	background:transparent;
	border-radius:1.5rem;
	color:var(--black);
	padding:.2rem 1.75rem;
	z-index:9;
}

#main-group{
	position:relative;
	display:flex;
	background: white;	
	font-weight:700;
	border-left:1px solid rgba(0, 0, 0, 0.05);
	border-right:1px solid rgba(0, 0, 0, 0.05);
	border-radius:0 0 1.5rem 1.5rem;
	justify-content: center;
	align-items:flex-start;
	/* margin:0 6.2rem 2rem 6.2rem; */
	padding:4rem 8rem 4rem 8rem;
	z-index:9;
}

#main-group h3, .modal-body h3{
	color:var(--red-100);
	border-bottom:1px solid var(--red-800);
	margin-bottom: 15px;
}

#main-group h3 i, .modal-body h3 i{	
	margin-right: 10px;
}

.group-list h2{
	line-height:3.2rem;
}

.group-list h4{
	background:var(--blue-dark);
	border-radius:10rem;
	width:15%;
	color:white;
}

.group-list p{
	font-size:1.5rem;
	color:var(--blue-dark);
	margin-bottom: 0;
	padding-left: 2rem;
}

.group-list table thead tr, .modal-body table thead tr{
	background:var(--red-100);
	color:white;
}

.group-list table thead tr td:nth-child(1), .modal-body table thead tr td:nth-child(1){
	width:20%;
}

.group-list table thead tr td:nth-child(2), .modal-body table thead tr td:nth-child(2){
	width:20%;
}

.group-list table tr td, .modal-body table tr td{
	text-align:center;
	vertical-align: middle;
}

.modal-header{
	background:var(--red-100);
	border-bottom:0;
}

.modal-header h4{
	font-size:1.25rem;
	color:white;

	margin:0 auto;
}

.modal-header .btn-close{
	color:white;
}

.modal-body h3{
	color:var(--red-100);
	margin-bottom: 0.5rem;
}

.modal-header .btn-close{
	position:relative;	
	background:transparent;
	font-size:1.7rem;
	opacity: 1;
	border:3px white;
	border-radius:2rem;
	z-index:9;
	margin-right: 0.5rem;
}

.modal-header .btn-close:before{
	position:absolute;
	content:"";
	background:transparent no-repeat;
	border:3px solid white;
	border-radius:3rem;
	width:2.5rem;
	height:2.5rem;
	top:11%;
	left:2%;
}

.modal-header .btn-close:hover{
	opacity: 0.5;
}

@media screen and (max-width: 1400px){
	h2.title{
		top:39%;
	}

	.header-group ul{
		width:65%;
	}

	.header-group .btn{
		padding:.15rem 1.5rem;
	}

}

@media screen and (max-width: 1200px){
	h2.title{
		top:41%;
	}

	.header-group ul{
		width:70%;
	}	

	.header-group .btn{
		padding:.15rem 1.3rem;
	}
}

@media screen and (max-width: 1024px){
	h2.title{
		top:38%;
	}

	#main-group{
		padding:4rem;
	}

	.header-group ul{
		width:80%;
	}	

	.header-group .btn{
		font-size:1.3rem;
		padding:.15rem 1rem;
	}
}

@media screen and (max-width: 992px){
	.header-bg{
		height:15.5rem;
	}

	.header-group{
		padding-bottom:.5rem;
	}

	.header-group ul li a, .header-group ul li button, .header-group .btn{
		font-size:1.2rem;
	}
}

@media screen and (max-width: 768px){
	h2.title{
		top:34%;
	}

	.header-wrap{
		margin-bottom: .5rem;
	}

	#main-group{
		padding:3rem 1.5rem;
	}

	.header-group{
		height:15rem;
		padding-bottom: 0;
	}

	.header-group ul{
		width:95%;
	}
}

@media screen and (max-width: 648px){
	#header-title{
		padding-top: 1rem;
	}

	.header-img img{
		width:100%;
	}

	h2.title{
		top:39%;
	}

	#main-group{
		padding:1.5rem;
	}
	
	.header-bg{
		height:12rem;
	}

	.header-group{
		height:11.6rem;
		padding-top: 4rem;
	}

	.header-group ul{
		width:100%;
	}

	.header-group ul li a, .header-group ul li button, .header-group .btn{
		font-size:.9rem;
	}

	h3.group-title{
		font-size:1.1rem;
	}

	.group-list h4{
		width:20%;
	}
	
}

@media screen and (max-width: 576px){
	h2.title{
		top:37%;
	}

	.header-bg{
		height:11.5rem;
	}

	.header-group{
		height:11.1rem;
		padding:4rem .5rem 0 .5rem;
	}

	.header-group ul li a, .header-group ul li button, .header-group .btn{
		padding:0 .8rem;
	}
}

@media screen and (max-width: 425px){
	h2.title{
		top:32%;
	}

	h3.group-title{
		font-size:1rem;
	}

	.header-bg{
		height:11.2rem;
	}

	.header-group{
		height:10.8rem;
		padding-top:3.5rem;
	}

	.header-group ul li{
		width:50%;
	}

	.review ul li{
		width:50%;
	}

	.header-group ul li a, .header-group ul li button, .header-group .btn{
		font-size:.8rem;
	}

	.group-list h4{
		width:40%;
	}

	.accordion-header button{
		font-size:1rem;
	}
}

@media screen and (max-width: 375px){
	h2.title{
		top:31%;
	}

	.header-wrap{
		margin-top: -14%;
	}
	
	#main-group{
		padding:1rem;
	}
	
}

.s-list > li{
	margin-bottom: 1rem;
}