.top_banner
{
	width:100%;
	height:20%;
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4)),url('/img/service_pic1.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	padding-top:50px;
	min-height:20%;
	text-align:center;
	/* animation 參數設定 */
animation-name: fade_in_2;    /*動畫名稱，需與 keyframe 名稱對應*/
animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
/*animation-delay:0.5s;    /*動畫延遲開始時間*/
}

/* 關鍵影格(@keyframe) */
@keyframes fade_in_2 {
    0% { opacity: 0; }
    25% { opacity: 20%; }
    50% { opacity: 40%; }
    75% { opacity: 60%; }
    100% { opacity: 80%; }
}
@keyframes fade_in_3 {
    0% { opacity: 0;bottom:-12px; }
    25% { opacity: 20%;bottom:-9px; }
    50% { opacity: 40%;bottom:-6px; }
    75% { opacity: 60%;bottom:-3px; }
    100% { opacity: 80%;bottom:0px; }
}

.all_service_card_wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 100%;
    grid-gap: 20px;
    row-gap: 20px;
    column-gap: 20px;
    gap: 20px;
    row-gap: 20px;
    column-gap: 20px;
}
.all_service_card {
    position: relative;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 180px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 8px;
    overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
	transition: transform .15s;
	animation-name: fade_in_3;    /*動畫名稱，需與 keyframe 名稱對應*/
	animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
}
.all_service_card:hover {
  transform: translateY(-3px);
  color:#D9D9D9	;
  filter: brightness(140%);
  text-shadow: 0.3em 0.1em 0.2em black
}
.all_service-card__outer {
    text-align: center;
    transition: opacity .2s;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: opacity;
}




.main-block {
  width: 800px;
  margin: 0 auto;
  padding-bottom: 100px;
}

@media (max-width: 1530px)
{
	.service_box_align
	{
		width:100%;
		padding-top:25px;
		display:flex;
		padding-left:11%;
	}
}
@media (max-width: 1300px)
{
	.service_box_align
	{
		width:100%;
		padding-top:25px;
		display:flex;
		padding-left:4%;
	}
	.all_service_card_wrapper {
		display: grid;
		grid-template-columns: repeat(1,1fr);
		width: 80%;
		grid-gap: 20px;
		row-gap: 20px;
		column-gap: 20px;
		gap: 20px;
		row-gap: 20px;
		column-gap: 20px;
	}
	.main-block 
	{
		width: auto;
		margin: 0 auto;
		padding-bottom: 100px;
		min-height: 1800px;
        display: flex;
        justify-content: center;
	}
	.top_banner {
		width: 100%;
		height: 20%;
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4)), url(/img/service_pic1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 100px;
		min-height: 20%;
		text-align: center;
		animation-name: fade_in_2;
		animation-duration: 0.5s;
	}
}
.service_icon
{
	font-size:35px;
}