body{
	font-family: Microsoft JhengHei,arial !important;
	height: 100%;
	display: flex;
  	flex-direction: column;
  	letter-spacing: 1.5px;
}

header{
	padding:16px 0 !important;
}

.hr-red{
	display: block; height: 1px;
    border: 0; border-top: 5px solid #D9340A;
    margin: 5px 0; padding: 0;
}

.hr-blue{
	display: block; height: 1px;
    border: 0; border-top: 2px solid #005EAD;
    margin: 5px 0; padding: 0;
}

label{
	color:#004098 !important;
	font-weight: 900;
}

select{        
    color: #004098 !important;
    text-align: center !important;
    background-color: #F2F2F2 !important;
    border:1px solid #004098 !important;
}

.bk-panel{
	background-image: url("/assets/background.jpg");
	min-height: 83vh;
	background-size: cover;
}

.search-panel{
	width: 400px;
	margin:0 auto;
}

.result-panel{
	margin:0 2%;
}

.footer{
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;  
	text-align: center;
}
.oil{
	background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 2px 3px 6px #00000059;
    border-radius: 20px;
    opacity: 1;
    position:relative;
    max-width:334px;
    max-height:512px;    
}
.oil2{
	background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 2px 3px 6px #00000059;
    border-radius: 20px;
    opacity: 1;
    position:relative;
    max-width:334px;
    max-height:412px; 
    margin:10px 15px 10px 10px;
}
.img{
	height: 200px;
	width: 100px;
	margin: 0 auto;
}
.img2{
	height: 200px;
	width: 100px;
	margin: 0 auto;
}
.card-body{
	padding: 10px 5%;
}
.detail{
	padding: 5%;
}

@media only screen and (max-width: 760px) {
    .img2{
    	height: 100px;
    	width: 50px;
    	margin: 0 auto;
    }
	.oil{
		margin: 0 auto;
	}
	.bk-panel{		
		height: 100%;
	}
	.search-panel{
		width: 80%;
		max-width:320px;	
	}
	.title{

	}

	.desc{
		font-size: 12px;
	}

	.footer{
		position: relative;
		margin-top:50px;
		margin-bottom:15px;
		font-size:12px;		
		left: 0;		
		width: 100%;  
		text-align: center;
	}

	.card-title{
		font-size: 16px;
	}
	.card-body{
		padding: 5%;
	}
}