/*============Glogbal Style================ */
html,
body {
    height: 100%;
	font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
}

p {
    font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
    font-size: 17px;
    line-height: 2.3rem;
    color: #000;
    margin: 0;
}	


.smartcard-title-text h1{
	position: absolute; 
	margin: auto; 
	top: 18%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF; 
	font-size: 85px;
	line-height: 6rem;	
}

.smartcard-title-text h2{
	position: absolute; 
	margin: auto; 
	top: 12%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #61ff70;
	font-size: 52px;
}




.smartcard-bg-cover{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #13b4de;
 /*	padding: 0 0 5rem 0 ;*/
	background-attachment: fixed;
	position: relative;
 /*	background-image:url("../images/smartcard/smartcard_01.png");*/
	
	
}


.card-body p{
	line-height: 2.3rem;
	
}

.card{
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}


/*media query*/

/*Extra large devices (筆電, 1500px and up)*/
@media screen and (max-width: 1500px) {

.smartcard-title-text h1{
	position: absolute; 
	margin: auto; 
	top: 22%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF; 
	font-size: 70px;
	line-height: 5rem;	
}

.smartcard-title-text h2{
	position: absolute; 
	margin: auto; 
	top: 14%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #61ff70;
	font-size: 52px;

	}
	.container-fliud img{
		margin-top:7%;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media screen and (max-width: 1199.98px) {
	.smartcard-title-text h1{
	position: absolute;
    margin: auto;
    top: 22%;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    font-size: 60px;
    line-height: 4.3rem;
	
	}

	.smartcard-title-text h2{
	position: absolute; 
	margin: auto; 
	top: 14%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #61ff70; 
	font-size:40px;
	line-height: 5rem
	}
	
.container-fliud img{
		margin-top:5%;
	}
.section-title h2 {
    font-size: 40px;
	line-height: 3rem;
}
}
/*Large devices (desktops, 992px and up)*/
@media screen and (max-width: 991.98px) {
	.smartcard-title-text h1{
	position: absolute;
    margin: auto;
    top: 14%;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    font-size: 56px;
    line-height: 4rem;
	
	}

	.smartcard-title-text h2{
	position: absolute; 
	margin: auto; 
	top: 4%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #61ff70; 
	font-size:40px;
	line-height: 5rem
	}
	
.container-fliud img{
		margin-top:0%;
	}
.section-title h2 {
    font-size: 40px;
	line-height: 3rem;
}
}

/*Medium devices (tablets, 768px and up)*/
@media screen and (max-width: 767.98px) { 
.smartcard-title-text h1{
	position: absolute; 
	margin: auto; 
	top: 14%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF; 
	font-size:48px;
	line-height: 3.5rem
	
	}

	.smartcard-title-text h2{
	position: absolute; 
	margin: auto; 
	top: 3%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #61ff70; 
	font-size:40px;
	line-height: 5rem
	}
	
.container-fliud img{
		margin-top:0%;
	}
.section-title h2 {
    font-size: 40px;
	line-height: 3rem;
}
}


/*Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media screen and (max-width: 575.98px) { 
	.smartcard-title-text h1{
	position: absolute; 
	margin: auto; 
	top: 10%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF; 
	font-size:50px;
	line-height: 3.5rem
	
	}

	.smartcard-title-text h2{
	position: absolute; 
	margin: auto; 
	top: 8%; 
	bottom: 0;
	left: 0;
	right: 0;
	color: #61ff70; 
	font-size:50px;
	line-height: 5rem
	}
	
.container-fliud img{
		margin-top:0%;
	}

}