class="text-center"class="text-center"class="text-center"class="text-center"class="text-center"class="text-center"class="text-center"class="text-center"class="text-center"

/*============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;
}	

ul{
padding: 0 0 0 20px;
}

.about-box{
margin: 6% 0;
}

.about-changing-title img{
/*max-width: 85%;*/
}

.page-title h1{
font-size: 70px;
margin-top: 0%;
color:#fff;
}
.page-title h2{
color:#fff;	
font-size:60px;
font-weight: 300;
}
.page-title p{
font-size:20px;
color:#fff;
text-align: justify;
}

.page-title img{
display: block;
margin: 0 auto;
width: 45%;	
margin-top:5%;
}
.about-changing-title h3 {
font-size: 55px;
font-weight: 800;
color: #007ab7;
/*display: inline-block;*/
margin-bottom:2%;
text-align: center;
}

.about-changing-title h4 {
font-size: 40px;
font-weight: 800;
color: #007ab7;
line-height: 3.2rem;
margin-bottom:2%;
}

.about-changing-title a > p:hover {
color:#000;
transition: 0.3s;	
}

h3 span{
border-left: 8px solid #f97a69;
padding-left:15px;
}

.h3-sub {
display: block;
font-size:24px;
} 

.text-blue{
color:#0592c9;
font-weight: 500;
}

.about-bg-cover {
padding: 11% 0 11% 0;
background-image:url("../images/about_changing/main_banner2.png");
background-size: cover;
background-position: center center;
background-attachment: fixed;	
/*border-radius: 0 0 250px 250px;*/
/*background-color: #2fafd2;*/

}

/*
.about-bg-cover:before {
content: "";
background: rgba(0,0,0, 0.1);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
}
*/



/*button*/
.about-button-bg {
background-color: #2F2725;
padding: 50px 0 80px 0;
margin: 8% 0;
}

.about-icon-box{
display: block; 
width:100%;
height:120px;
}

.about-icon-1{
display: block; 
width: 100px;
height:100px;
}

.about-icon-1 a{
display: block; 
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_01.png");
background-size: cover;

}

.about-icon-1 a:hover{
display: block; 
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_01_hover.png");
background-size: cover;


}
.about-icon-1 span{	
font-size:16px;
color: #fff;
display: block;
padding-top:105px; 
}

.about-icon-1 span:hover{
color: #a4e1ff;
}


/*solution-icon-2*/

.about-icon-2{
display: block; 
width: 100px;
height:100px;
}

.about-icon-2 a{
display: block; 
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_02.png");
background-size: cover;

}

.about-icon-2 a:hover{
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_02_hover.png");
background-size: cover;


}
.about-icon-2 span{	
font-size:16px;
color: #fff;
display: block;
padding-top:105px; 
}


.about-icon-2 span:hover{
color: #a4e1ff;
}

/*solution-icon-3*/
.about-icon-3{
display: block; 
width: 100px;
height:100px;
}

.about-icon-3 a{
display: block; 
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_03.png");
background-size: cover;

}

.about-icon-3 a:hover{
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_03_hover.png");
background-size: cover;


}
.about-icon-3 span{	
font-size:16px;
color: #fff;
display: block;
padding-top:105px; 
}

.about-icon-3 span:hover{
color: #a4e1ff;
}

/*solution-icon-4*/
.about-icon-4{
display: block; 
width: 100px;
height:100px;
}

.about-icon-4 a{
display: block; 
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_04.png");
background-size: cover;

}

.about-icon-4 a:hover{
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_04_hover.png");
background-size: cover;

}
.about-icon-4 span{	
font-size:16px;
color: #fff;
display: block;
padding-top:105px; 
}

.about-icon-4 span:hover{
color: #a4e1ff;
}

/*solution-icon-5*/
.about-icon-5{
display: block; 
width: 100px;
height:100px;
}

.about-icon-5 a{
display: block; 
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_05.png");
background-size: cover;

}

.about-icon-5 a:hover{
width: 100px;
height:100px;
background-image:url("/assets/images/about_changing/btn_05_hover.png");
background-size: cover;

}
.about-icon-5 span{	
font-size:16px;
color: #fff;
display: block;
padding-top:105px; 
}

.about-icon-5 span:hover{
color: #a4e1ff;
}

.contact-btn-lg
{
padding: 0.6rem 8rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5;
border-radius: 0.2rem;
}

.career-btn-sm {
padding: 0.5rem 4rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
border-radius: 0.2rem;
}
/*

.btn:hover {
background-color:#d13430;	
}


.btn-red {
color: #fff;
background-color: #fc6b60;
border-color: #fc6b60;
}

a > p:hover{
	
color:#fc6b60;
}
*/



/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.page-title h1{
font-size: 66px;
margin-top: 0%;
color:#fff;
}
.about-changing-title h3 {
font-size: 52px;
font-weight: 800;
color: #007ab7;
/*display: inline-block;*/
margin-bottom:2%;
text-align: center;
}
	
}

/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1200px) {
.page-title h1{
font-size: 58px;
margin-top: 0%;
color:#fff;
}
.about-changing-title h3 {
font-size: 50px;
font-weight: 800;
color: #007ab7;
/*display: inline-block;*/
margin-bottom:2%;
text-align: center;
}
		

}


/*Medium devices (tablets, less than 992px)*/

/*.col<576px(Extra small)/ .col-sm-≥576px(Small)/.col-md-≥768px(Medium)/
.col-lg-≥992px(Large)/.col-xl-≥1200px(Extra large)*/
@media screen and (max-width: 991.98px) {
.page-title h1{
font-size: 50px;
margin-top: 0%;
color:#fff;
}
	
.about-changing-title h3 {
font-size: 40px;
font-weight: 800;
color: #007ab7;
display: inline-block;
line-height: 2.5rem;
margin-top:10%;
margin-bottom:3%;
}

}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.page-title h1{
font-size: 50px;
margin-top: 0%;
color:#fff;
}
.about-changing-title h3 {
font-size: 35px;
font-weight: 800;
color: #007ab7;
display: inline-block;
line-height: 2.5rem;
margin-top:10%;
margin-bottom:3%;
}

	
}


/*Extra small devices (portrait phones, less than 576px)*/

@media screen and (max-width: 575.98px) { 
	
.about-bg-cover {
padding: 22% 0 22% 0;
background-image:url("../images/about_changing/main_banner_phone.png");
background-size: cover;
background-position: center center;
/*border-radius: 0 0 250px 250px;*/
/*background-color: #2fafd2;*/

}
	
.about-bg-cover img{
width: 90%;
margin-top:5%;
}


.page-title h1 {
font-size: 33px;
line-height: 3.2rem;
color: #fff;
}
		

.about-changing-title h3 {
font-size: 25px;
font-weight: 800;
color: #007ab7;
display: inline-block;
line-height: 2.5rem;
margin-top:10%;
}
.about-changing-title h4 {
font-size: 28px;
line-height: 2.5rem;
margin-bottom:2%;
}

.page-title p {
font-size: 20px;
color: #fff;
text-align: left;
}	
	
.h3-sub{
margin-bottom: 9%
}	
	
.about-changing-title img{
margin-bottom: 10%;
}
	
/*button*/
.about-button-bg {
background-color: #2F2725;
padding: 50px 0 80px 0;
margin: 13% 0;
}

	
}

/*Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width*/