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




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

.btn-blue {
color: #fff;
background-color: #107AB5;
border-color: #107AB5;
}

.btn-blue:hover{
color: #fff;
background-color:#0192ff;
border-color: #0192ff;
}


/*內文主標*/
.news-title h2 {
font-size: 54px;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 4rem;
}

/*副banner*/
.sub-box{
margin: 8px 0;
padding:4% 0 4% 0;
}

.sub-box h3{

font-size:25px;
line-height: 2.3rem;
margin-bottom: 2%;
letter-spacing: -1px;

}

.sub-box p{
font-size:17px;
line-height: 2rem;
}

.sub-box li{
font-size:17px;
line-height: 2rem;
}
.sub-box ul{
padding: 0 0 0 20px;
}

.sub-banner-bg{
background:#cce7f2;
}


/*新聞專區的區塊樣式*/
/*
.card{
width:21rem;
}
*/

.card-body p:hover{
display: block;
color: #000;
/*line-height: 1.7rem;*/
}


.btn-sm{
padding: 0.2rem 0.5rem;
font-size: .7rem;
line-height: 1.5;
border-radius: 0.2rem;
}

.btn-sm:hover{
padding: 0.2rem 0.5rem;
font-size: .7rem;
line-height: 1.5;
border-radius: 0.2rem;
background:#009ee3;
}

.btn-white-outline {
color: #fff;
background-color:transparent;
border-color: #fff;
}

.btn-white-outline:hover {
color: #fff;
background-color:#009ee3;
border-color: #fff;
}

.btn-black-outline {
color: #000;
background-color:transparent;
border-color: #000;
}

.btn-black-outline:hover {
color: #fff;
background-color:#009ee3;
border-color: #000;
}

.btn-news{
color: #fff;
background-color: #107ab5;
border: 0px #0192ff solid;
border-radius: 3px;
padding: 10px 37px;
}
.btn-news:hover {
color: #fff;
background-color:#0192ff;
border: 0px #0192ff solid;
border-radius: 3px;
padding: 10px 37px;
}
/*影片專區*/

.video-success-bg-cover{
background-color: #e4f3f9;
}

.video-title h3{
font-size: 36px;
line-height: 3rem;
margin-bottom: 2rem;
}

.video-title h5{
font-weight: 800;
font-size:24px;
color:#107ab5;
}
.video-title h6{
font-weight: 800;
font-size:17px;
color:#000;
border:1px solid #000;
display: inline-block;
border-radius: 2px;
padding:1px 7px;
}
.video-title p {
color: #000000;
}

.video-title p:hover {
color: #107ab5;
}
.video-btn-lg {
padding: 0.6rem 4.5rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
border-radius: 0.2rem;
}

/*
.video-btn-lg:hover {
background:#bf3768;
}
*/

/*
.video-btn-blue {
color: #fff;
background-color: #107ab5;
border-color: #107ab5;
}
*/

/*
.video-title img{
	width:50%;
} 
*/

.word-break{
display:block;
}


.certificate-box{
margin:10px;
}

.certificate-title h2{
font-size: 54px;
font-weight: 800;
}

.certificate-title h3{
font-size: 26px;
font-weight: 800;
}
.certificate-title span{
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
display: block;
}

.certificate-title p{
font-size:17px;
line-height:1.8rem;
}

.certificate-left-bg{
background:#aed1e5;
border-radius: 10px;
}

.certificate-right-bg{
background:#edefef;
padding: 19px;
border-radius:0 10px 010px 0;
}


/*solution*/
.solution-bg{
background-color:#107ab5;
padding:50px 0 80px 0;
}

.solution-icon-box{
display: block; 
width:110px;
height:110px;
border-right: 0px solid #8accf9;
}


.solution-icon-1{
display: block; 
width: 110px;
height:110px;
}

.solution-icon-1 a{
display: block; 
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_01.png");

}

.solution-icon-1 a:hover{
display: block; 
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_01_hover.png");


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

.solution-icon-1 span:hover{
color: #00aaff;
}

/*solution-icon-2*/

.solution-icon-2{
display: block; 
width: 110px;
height:110px;
}

.solution-icon-2 a{
display: block; 
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_02.png");

}

.solution-icon-2 a:hover{
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_02_hover.png");
color: #FFF;

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


.solution-icon-2 span:hover{
color: #00aaff;
}

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

.solution-icon-3 a{
display: block; 
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_03.png");
}

.solution-icon-3 a:hover{
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_03_hover.png");


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

.solution-icon-3 span:hover{
color: #00aaff;
}

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

.solution-icon-4 a{
display: block; 
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_04.png");

}

.solution-icon-4 a:hover{
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_04_hover.png");

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

.solution-icon-4 span:hover{
color: #00aaff;
}

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

.solution-icon-5 a{
display: block; 
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_05.png");

}

.solution-icon-5 a:hover{
width: 110px;
height:110px;
background-image:url("../images/index/index_new/icon_05_hover.png");

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

.solution-icon-5 span:hover{
color: #00aaff;
}


/*success logo*/

.index-success-bg-cover{
/*background-size: cover;*/
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
padding:12rem 0 12rem 0 ;
background-image: url("../images/index/index_new/success.png");
}

.bg-attachment{
background-attachment: fixed;
}

.success-title h2{
font-size: 54px;	
}

.success-title p{
font-size: 24px;	
}

.btn-success {
color: #fff;
background-color: #107ab5;
border: 0px #0192ff solid;
border-radius: 3px;
padding: 5px 20px;
}

.btn-success:hover {
color: #fff;
background-color: #0192ff;
border: 0px #0192ff solid;
border-radius: 3px;
padding: 5px 20px;
}



/*contact*/
.contact-bg-cover{
/*background-size: cover;*/
background-repeat: no-repeat;
background-position: center center;
background-color: #107ab5;
padding:4rem 0 4rem 0 ;
background-image: url("../images/index/index_new/contact_bg.png");
}

.contact-title h2{
font-size: 54px;	
color: #fff;
line-height:4.2rem;
}

.contact-title p{
font-size: 24px;
color: #fff;

}

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



/*award logo*/
.award-title h2{
font-size: 54px;
line-height: 4.5rem;
margin-bottom: 20px;
}

.award-bg-cover{
background-repeat: no-repeat;
background-position: center center;
/*	background-color: #107ab5;*/
padding:6rem 0 6rem 0 ;

}


/*video/banner的圖片hover雙向互動效果*/
.video-pic-hover img, .banner-pic-hover img{
 transition: 1s;/*雙向互動時需放在img，不須放在img:hover*/
}
.video-pic-hover img:hover, .banner-pic-hover img:hover{
transform:scale(1.1,1.1);
}


/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {

/*副banner*/

.sub-box{
margin: 10px 0;
}

.sub-box h3{
font-size:21px;
line-height: 1.8rem;
margin-bottom: 2%;

}

.sub-box p{
font-size:16px;
line-height: 1.8rem;
}

.sub-box li{
font-size:17px;
line-height: 1.8rem;
}
.sub-box ul{
padding: 0 0 0 20px;
}


/*新聞專區的區塊樣式*/

/*
.card{
width:17rem;卡片寬度
}
*/

}

/*因專注人事物區文字跑版，故製作1300斷點*/
@media screen and (max-width: 1300px) {

.certificate-title h3{
font-size: 20px;
font-weight: 800;
}
.certificate-title span{
font-size: 17px;
font-weight: 600;
margin-bottom: 5px;
display: block;
Letter-spacing: -1px;
}

}




/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1199.98px) {

.sub-box{
padding: 7% 0 7% 0;
}	

.sub-box img{
width:70%;
margin:0 auto;
}	

.news-title h2{
font-size: 48px;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 4rem;
}

/*影片專區*/
.video-bg{
background:#e4f3f9;
}

.video-title h3{
font-size: 36px;
line-height: 3rem;
margin-bottom: 2rem;
}

.video-title h5{
font-weight: 800;
font-size:21px;
color:#107ab5;
}	


.certificate-title h2{
font-size: 48px;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 4rem;
}


.success-title h2{
font-size: 48px;
}
.contact-title h2{
font-size: 48px;
}
.contact-title p{
font-size: 20px;	
}
.award-title h2{
font-size: 48px;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 3.5rem;
}

.word-break{
display:block;
}

}



/*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) {

.sub-box h3 {
font-size: 22px;
line-height: 2rem;
}
.word-break{
display:inline;
}

}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.video-title h3 {
font-size: 40px;
line-height: 3.7rem;
margin-bottom: 2rem;

}
.video-title h5 {
font-weight: 800;
font-size: 22px;
color: #107ab5;
margin-top:15px;
}

.word-break{
display:none;
}



.news-title h2{
font-size: 40px;
}

.certificate-title h2{
font-size: 40px;
}
	
	

.success-title h2{
font-size: 40px;
}
.contact-title h2{
font-size: 40px;
}
.contact-title p{
font-size: 20px;	
}
.award-title h2{
font-size: 40px;
padding-bottom: 20px;
margin-bottom: 15px;
}

.word-break{
display:block;
}
}

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

@media screen and (max-width: 575.98px) { 

.sub-box img{
width: 85%;
}
	
.news-title h2 {
font-size: 32px;
padding-bottom: 2px;
margin-bottom: 15px;
line-height: 3rem;
margin-top: 70px;
}

.video-bg {
padding: 30px;
}
	
.video-title h3 {
font-size: 32px;
line-height: 3rem;
margin-bottom: 2rem;

}
.video-title h5 {
font-weight: 800;
font-size: 22px;
color: #107ab5;
margin-top:15px;
}

.word-break-phone{
display: block;
}

.certificate-title h2{
font-size: 32px;	
color: #000;
line-height:3.2rem;
padding-bottom: 0px;
margin-bottom: 5px;
}
.certificate-title h3{
font-size: 23px;
font-weight: 800;
}
.success-title h2{
font-size: 32px;	
color: #000;
line-height:3rem;
}
.contact-title h2{
font-size: 32px;	
color: #fff;
line-height:3rem;
}

.award-title h2{
font-size: 32px;
line-height:3rem;
}
.index-success-bg-cover {
/* width: 199%; */
/* background-size: cover; */
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
padding: 9rem 0 9rem 0;
background-image: url(../images/index/index_new/success.png);
}
.card{
width:100%;
margin:20px 0;
}

	
}


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