

/*============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;
}	



/*主視覺banner*/

.pqc-banner-cover{
padding:18% 0;
/*background-image:url("../images/iot_security/2025_iot_security/pqc/main_banner_bg.png");*/
background-image:url("../images/iot_security/2025_iot_security/pqc/main_banner_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.banner-title-position{
position: absolute;
top: 35%;
left:-8%;
}

.pqc-banner-title h1{
font-size: 74px;
line-height: 5.6rem;
color: #88F1FF;
font-weight: 800;
font-family: 'Roboto', sans-serif;
/*margin-bottom: 0.5%;*/
text-align: center;	
}

.bn-subtitle-h1{
font-size: 42px;
color: #fff;
text-align: center;
display: block;
}


.pqc-title h2{
font-size: 54px;
line-height: 5rem;
color: #000;
font-weight: 800;
}

.pqc-subtitle-h2 {
font-size: 42px;
line-height: 3rem;
letter-spacing:-1;
}

.pqc-title h4{
font-size: 32px;
line-height: 2.8rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
display: inline-block;
vertical-align: sub;
}

.pqc-title h5{
font-size: 26px;
line-height: 2.6rem;
color: #000;
font-weight: 800;
display: inline-block;
}


/*應用區*/

.application-title h2{
font-size: 54px;
line-height: 5rem;
color: #000;
font-weight: 800;
}


.application-title h4{
font-size: 32px;
line-height: 2.8rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}

.card-body p {
display: block;
color: #000;
line-height: 2.2rem;
}

.card-body p:hover {
display: block;
color: #000;
line-height: 2.2rem;
}


/*落實PQC與IT裝置*/


.quantum-title h2{
font-size: 54px;
line-height: 5rem;
color: #000;
font-weight: 800;
/*padding:0 0 2% 0;*/
}

.quantum-title h5{
font-size: 26px;
line-height: 2.6rem;
color: #000;
font-weight: 800;
display: inline-block;
}


/*聯絡我們*/
.contact-title h2{
font-size: 54px;
line-height: 5rem;
color: #000;
font-weight: 800;
}


/*knowlege sharing*/

.knowledge-sharing{
border-left:16px solid #667ddd;
}

.knowledge-sharing img{
margin-left:10px;
margin-bottom: 10px;
}

.knowledge-sharing h4{
font-size:22px;
color:#374EAB;
margin-left:10px;
}
.knowledge-sharing h5{
font-size:18px;
color:#000;
margin-left:10px;
}

.knowledge-sharing p{
font-size:15px;
line-height:1.3rem;
margin-left:10px;
}

.knowledge-sharing ul{
margin-bottom: 0rem;
}

.knowledge-sharing ul p{
margin-left:0px;
}

/*word break*/


.word-break-h2{
display: block;
}

.word-break-p{
display: block;	
}

.box{
margin: 7% 0;
}


/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.banner-title-position{
position: absolute;
top: 35%;
left:-8%;
}	
.pqc-banner-title h1{
font-size: 68px;
line-height: 5rem;
margin-bottom: 0%;
}
.bn-subtitle-h1{
font-size: 38px;
}
.pqc-title h2,.application-title h2,.quantum-title h2,.contact-title h2{
font-size: 52px;
line-height: 4.2rem;
}
	
.pqc-subtitle-h2 {
font-size: 41px;
line-height: 3rem;
}	

	
}

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1300px) {
.banner-title-position{
position: absolute;
top: 35%;
left:-8%;
}	
.pqc-banner-title h1{
font-size: 52px;
line-height: 4.5rem;
}
.bn-subtitle-h1{
font-size: 28px;
}	
.pqc-title h2,.application-title h2,.quantum-title h2,.contact-title h2{
font-size: 40px;
line-height: 4rem;
}	
.pqc-subtitle-h2 {
font-size: 34px;
line-height: 3rem;
}	

.application-title h4{
font-size: 28px;
line-height: 2.4rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}
.pqc-title h5,.quantum-title h5{
font-size:24px;
line-height: 2.2rem;
}
	
.word-break-p{
display: inline;
}	

}


/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1199.98px) {
.banner-title-position{
position: absolute;
top: 35%;
left:-8%;
}	
.pqc-banner-title h1{
font-size: 45px;
line-height: 4.2rem;
}
.bn-subtitle-h1{
font-size: 24px;
}
.pqc-title h2,.application-title h2,.quantum-title h2,.contact-title h2{
font-size: 36px;
line-height: 3.2rem;
}		
}


/*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) {
.banner-title-position{
position: absolute;
top: 35%;
left:-13%;
}	
.pqc-banner-title h1{
font-size: 36px;
line-height: 3.6rem;
}
.bn-subtitle-h1{
font-size: 22px;
}	
	
.pqc-title h2,.application-title h2,.quantum-title h2,.contact-title h2{
font-size: 34px;
line-height: 3.2rem;
}		
.pqc-subtitle-h2 {
font-size: 24px;
line-height: 2.6rem;
}
	
.word-break-h2{
display: block;
}	
	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.banner-title-position{
position: absolute;
top: 35%;
left:-15%;
}	
.pqc-banner-title h1{
font-size: 30px;
line-height: 3.6rem;
}
.bn-subtitle-h1{
display: none;
}
.pqc-title h2,.application-title h2,.quantum-title h2,.contact-title h2{
font-size: 35px;
line-height: 3.2rem;
margin:2% 0 0 0 ;	
}
	
.word-break-phone{
display: block;
}	

.word-break-h2{
display: inline;
}	

}

/*Extra small devices (portrait phones, less than 576px)*/

@media screen and (max-width: 575.98px) { 
.pqc-banner-cover{
padding:45% 0px 75% 0 ;
background-image:url("../images/iot_security/2025_iot_security/pqc/main_banner_bg_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}
	
.banner-title-position{
position: absolute;
top: 18%;
left:0%;
}		

.pqc-banner-title h1{
font-size: 34px;
line-height: 2.8rem;
}
	
.pqc-title h2,.application-title h2,.quantum-title h2,.contact-title h2{
font-size: 28px;
line-height: 2.8rem;
margin:2% 0 0 0 ;	
}
	
.pqc-subtitle-h2 {
font-size: 24px;
line-height: 2.4rem;
}	

.application-title h4{
font-size: 24px;
line-height: 2.4rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}
	
.knowledge-sharing h4 {
font-size: 20px;
color: #374EAB;
margin-left: 10px;
line-height: 1.8rem;
margin-bottom: 2%;
}	
.pqc-title h5,.quantum-title h5{
font-size:22px;
line-height: 2.2rem;
}
	
.btn-lg{
font-size: 17px;
}	
	
.word-break-h1-phone,.word-break-h2-phone{
display: block;
}	
}

/*Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width*/