

/*============Glogbal Style================ */
html,
body {

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: 18px;
line-height: 2.3rem;
color: #000;
margin: 0;
}	

.blue-color-bg{
background:#667ddd;	
}

.black-color-bg{
background:#0f172a;
}
.text-blue{
color: #88F1FF;
}
.text-purple{
color:#6166be;
}

/*------------------------------------------*/
:root {
--ciot-blue: #17a2b8;
--bg-light: #f8f9fa;
--bg-grey: #f1f3f5;
--text-dark: #212529;
--text-muted: #6c757d;
--border-color: #dee2e6;
}


/* Section Spacing */
.section-padding { padding: 100px 0; }
.bg-grey-block { background-color: var(--bg-grey); }
.bg-light-block { background-color: var(--bg-light); }

/* Titles */
.section-label {
color: var(--ciot-blue);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 0.9rem;
margin-bottom: 0.75rem;
display: block;
}

/* Cards */
.professional-card {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 30px;
height: 100%;
transition: all 0.3s ease;
}
.professional-card:hover{
box-shadow: 0 15px 45px rgba(0,0,0,0.08);
border-color: var(--ciot-blue);
transform: translateY(-5px);
}
.card-icon {
font-size: 2.5rem;
color: var(--ciot-blue);
margin-bottom: 1.5rem;
}

/* PPA+S Table-like list */
.ppa-s-list {
background: #ffffff;
border: 1px solid var(--border-color);
border-left: 6px solid var(--ciot-blue);
padding: 30px;
border-radius: 4px;
}

/* Case Studies */
.case-item {
border-bottom: 1px solid var(--border-color);
padding: 25px 0;
}
.case-item:last-child { border-bottom: none; }
.case-tag {
background-color: #f1f3f5;
padding: 3px 10px;
border-radius: 4px;
font-size: 1.2rem;
font-weight: 600;
color: var(--ciot-blue);
margin-bottom: 10px;
display: inline-block;
}
.case-item p{
line-height: 2rem;
}



/*主banner  start*/
.main-banner-cover{
padding:18% 0;
background-image:url("../images/iot_security/2026/kms/main_banner_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.banner-title-position{
position: absolute;
top: 28%;
left:-3%;
}

.iot-main-banner-title h1{
font-size: 60px;
line-height: 5rem;
color: #88F1FF;
font-weight: 600;
font-family: 'Roboto', sans-serif;
margin-bottom: 1%;
}

.iot-main-banner-title p{
font-size:29px;
line-height: 2.5rem;
color: #fff;
}

.iot-main-banner-title li{
font-size:19px;
}
/*主banner end*/


.ppa-title h2,.success-title h2,.cra-title h2,.front-line-title h2,.feature-title h2{
font-size:48px;
line-height: 3rem;
}

.success-title p,.front-line-title p,.feature-title p{
line-height: 2.5rem;
}

	
.icon-box {
width: 85px;
height: 85px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
border-radius: 50px;
border: 2px solid #84c3f7;
}

.icon-box img {
width: 75%;
}

.label-fixed {
min-width: 145px;
display: inline-block;
}


/*media query*/
/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
	
.banner-title-position{
position: absolute;
top: 22%;
left:-3%;
}
	
.iot-main-banner-title h1{
font-size: 52px;
line-height: 4rem;
}
	
.iot-main-banner-title p{
font-size:24px;
}
	
}
/*max-width: 1300px*/
@media screen and (max-width: 1400px) {
.banner-title-position{
position: absolute;
top: 22%;
left:-3%;
}
	
.iot-main-banner-title h1{
font-size: 41px;
line-height: 3.4rem;
}
	
.iot-main-banner-title p{
font-size:19px;
line-height: 2rem;
}
.iot-main-banner-title li{
font-size:17px;
}
.ppa-title h2,.success-title h2,.cra-title h2,.front-line-title h2,.feature-title h2{
font-size:42px;
line-height: 3rem;
}	
}


/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {
/*主banner  start*/
.main-banner-cover{
padding:25% 0;
background-image:url("../images/iot_security/2026/kms/main_banner_bg.png");
}

.banner-title-position{
position: absolute;
top: 28%;
left:-2%;
}

.iot-main-banner-title h1{
font-size: 36px;
line-height: 2.9rem;

}

.iot-main-banner-title p{
font-size:17px;
}

.iot-main-banner-title li{
font-size:16px;
}
/*主banner end*/
	
.ppa-title h2,.success-title h2,.cra-title h2,.front-line-title h2,.feature-title h2{
font-size:43px;
line-height: 3rem;
}
	
}
/*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  start*/
.main-banner-cover{
padding:27% 0;
background-image:url("../images/iot_security/2026/kms/main_banner_bg.png");
}

.banner-title-position{
position: absolute;
top: 27%;
left:-1%;
}
.iot-main-banner-title h1{
font-size: 32px;
line-height: 2.5rem;
}

.iot-main-banner-title p{
font-size:18px;
line-height: 1.5rem;	
}

.iot-main-banner-title li{
font-size:16px;
}
/*主banner end*/
	

	
.ppa-title h2,.success-title h2,.cra-title h2,.front-line-title h2,.feature-title h2{
font-size:38px;
line-height: 3rem;
}	
	

}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.section-padding {
padding: 80px 0;
}	
/*主banner  start*/
.main-banner-cover{
padding:69% 0;
background-image:url("../images/iot_security/2026/kms/main_banner_phone_bg.png");
}

.banner-title-position{
position: absolute;
top: 15%;
left:0%;
}

.iot-main-banner-title h1{
font-size: 37px;
line-height: 3rem;
margin-bottom: 1%;
}

.iot-main-banner-title p{
font-size:20px;
line-height: 1.8rem;	
}

.iot-main-banner-title li{
font-size:18px;
}
/*主banner end*/
	
.ppa-title h2,.success-title h2,.cra-title h2,.front-line-title h2,.feature-title h2{
font-size:36px;
line-height: 3rem;
}		
.ppa-title p,.success-title p,.front-line-title p,.feature-title p{
font-size:24px;
line-height: 2.2rem;
}		
	
}

/*Extra small devices (portrait phones, less than 576px)*/

@media screen and (max-width: 575.98px) { 
.section-padding {
padding: 80px 0;
}	

/*主banner  start*/
.main-banner-cover{
padding:95% 0;
background-image:url("../images/iot_security/2026/kms/main_banner_phone_bg.png");
}

.banner-title-position{
position: absolute;
top: 5%;
left:0%;
}

.iot-main-banner-title h1{
font-size: 32px;
line-height: 2.8rem;
margin-bottom: 1%;

}

.iot-main-banner-title p{
font-size:19px;
line-height: 1.9rem;	
}

.iot-main-banner-title li{
font-size:17px;
line-height: 2rem;
}
/*主banner end*/
	
	
.ppa-title h2,.success-title h2,.cra-title h2,.front-line-title h2,.feature-title h2{
font-size:29px;
line-height: 2.6rem;
}

h4{
font-size: 22px;	
line-height: 2rem;
}	
.ppa-title p,.success-title p,.front-line-title p,.feature-title p{
font-size:23px;
line-height: 2.5rem;
font-weight: 500;
}	

.label-fixed {
min-width: 140px; /* 依你版面微調 */
display: inline-block;
}
.ppa-s-list {
padding: 20px;
}	
.ppa-s-list p{
line-height: 1.5rem;
}

/* Cards */
/*
.professional-card {
padding: 10px;
}	
	
*/

	
}

