/*============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: 18px;
line-height: 2.3rem;
color: #000;
margin: 0;
}	

.blue-color-bg{
background:#667ddd;	
}

.black-color-bg{
background:#0f172a;
}

.grey-color-bg{
background:#e4eaef;
}

.text-blue{
color: #88F1FF;
}
.text-purple{
color:#6166be;
}

.border-purple {
border-color: #6166be;
}

:root {
--brand-purple: #6166be;	
--brand-blue: #17a2b8;
--accent-blue: #007bff;
--light-bg: #f8fafc;
--border-color: #e2e8f0;
--text-main: #1e293b;
--text-muted: #64748b;
}

/*


 Bootstrap 4 compatibility helpers 
.opacity-25 { opacity: .25; }
.border-top-4 { border-top-width: 4px !important; }
*/

/* --- Common Sections --- */

/* Section Spacing */
.section-padding { padding: 100px 0; }



/* --- Threat-to-Control Infographic --- */
.threat-box {
background: #f8f9fa;
/*border: 1px solid #ffd9d9;*/
padding: 20px;
/*border-radius: 12px;*/
position: relative;
height: 100%;
border-left: 4px solid #dc3545;
}
.threat-box li{
line-height: 1.5rem;
}

.control-box {
background: #f8f9fa;
/*border: 1px solid #ced2f2;*/
/*	border: 3px solid #ace0e5;*/
padding: 20px;
/*border-radius: 12px;*/
position: relative;
height: 100%;
border-left: 4px solid #6166be;
}

/* --- Chain of Trust Diagram --- */
.cot-diagram {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--light-bg);
/*border-radius: 24px;*/
}
.cot-node {
width: 100%;
max-width: 420px;
background: #fff;
border: 1px solid var(--border-color);
padding: 15px;
border-radius: 10px;
text-align: center;
margin-bottom: 20px;
position: relative;
transition: 0.3s;
}
.cot-node.active {
border-color: var(--brand-blue);
box-shadow: 0 0 15px rgba(0,86,179,0.15);
}
.cot-node::after {
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
color: var(--border-color);
}
.cot-node:last-child::after { display: none; }

/* --- Use Case Cards --- */
.use-case-card {
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 25px;
height: 100%;
transition: 0.3s;
}
.use-case-card:hover { border-color: var(--brand-purple); transform: translateY(-5px); }
.use-case-icon { font-size: 1.5rem; color: var(--brand-blue); margin-bottom: 15px; }

/* --- Table Styling --- */
.table-compliance thead th {
background-color: var(--light-bg);
border-top: none;
color: var(--brand-purple);
font-size: 1rem;
text-transform: uppercase;
}

/* --- CTA --- */
.cta-box {
background: var(--brand-blue);
color: #fff;
border-radius: 20px;
padding: 60px;
text-align: center;
margin-top: -60px;
position: relative;
z-index: 5;
}

.btn-brand {
background: var(--brand-blue);
color: #fff;
font-weight: 700;
padding: 12px 35px;
border-radius: 4px;
}
.btn-brand:hover { background: #004494; color: #fff; }

.accordion .card {
border: 1px solid var(--border-color);
margin-bottom: 10px;
border-radius: 8px !important;
}
.accordion .card-header { background: #fff; border-bottom: none; cursor: pointer; }

/*
 Anchor offset for sticky bars 
[id] { scroll-margin-top: 160px; }
*/

.icon-box {
width: 75px;
height: 75px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.2rem;
border-radius: 15px ;
border:2px solid #84c3f7;
}

.icon-box img{
width: 65%;
vertical-align:middle;
}



/*主banner  start*/
.main-banner-cover{
padding:20% 0;
background-image:url("../images/iot_security/2026/codesign/main_banner_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.banner-title-position{
position: absolute;
top: 20%;
left:-4%;
}

.iot-main-banner-title h1{
font-size: 64px;
line-height: 5rem;
color: #fff;
font-weight: 700;
font-family: 'Roboto', sans-serif;
margin-bottom: 1%;
}

.iot-main-banner-title p{
font-size:24px;
color: #fff;
}

.iot-main-banner-title li{
font-size:18px;
}

.why-title h2,.cot-title h2,.production-title h2,.integrate-title h2,.lifecycle-title h2,.case-title h2,.compliance-title h2,.changing-title h2,.root-title h2{
font-size:48px;
line-height: 3.5rem;
}

.why-title p,.cot-title p,.production-title p,.integrate-title p,.lifecycle-title p,.case-title p,.compliance-title p,.root-title p{
line-height: 2.5rem;
}

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

.banner-title-position{
position: absolute;
top: 19%;
left:-3%;
}

.iot-main-banner-title h1{
font-size: 56px;
line-height: 4rem;
}
.iot-main-banner-title p{
font-size:18px;
color: #fff;
line-height: 2rem;
}
	
}
/*max-width: 1300px*/
@media screen and (max-width: 1400px) {

/*主banner  start*/
.main-banner-cover{
padding:25% 0;
background-image:url("../images/iot_security/2026/codesign/main_banner_bg.png");
}
.banner-title-position{
position: absolute;
top: 20%;
left:-2%;
}
		
.iot-main-banner-title h1{
font-size: 47px;
line-height: 3.6rem;
}

.iot-main-banner-title p {
font-size: 18px;
color: #fff;
}	

.iot-main-banner-title li {
font-size: 16px;
}
	
.why-title h2,.cot-title h2,.production-title h2,.integrate-title h2,.lifecycle-title h2,.case-title h2,.compliance-title h2,.changing-title h2,.root-title h2{
font-size:43px;
line-height: 3.5rem;
}
	
}


/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {
.main-banner-cover {
padding: 30% 0px;
background-image: url(../images/iot_security/2026/codesign/main_banner_bg.png);
}
.banner-title-position{
position: absolute;
top:17%;
left:1%;
}	
.iot-main-banner-title h1{
font-size: 44px;
line-height: 3.6rem;
}
	
.iot-main-banner-title p {
font-size: 17px;
color: #fff;
}	
.iot-main-banner-title li {
font-size: 15px;
}
	
	

}
/*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) {
.main-banner-cover {
padding: 31% 0px;
background-image: url(../images/iot_security/2026/codesign/main_banner_bg.png);
}
.banner-title-position{
position: absolute;
top:12%;
left:1%;
}
	
.iot-main-banner-title h1{
font-size: 44px;
line-height: 3.6rem;
text-align: left;
}
		
.iot-main-banner-title p {
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}	
	
.iot-main-banner-title ul{
text-align: left;
}
		
}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.main-banner-cover {
padding: 70% 0px;
background-image:url("../images/iot_security/2026/codesign/main_banner_phone_bg.png");
}

.banner-title-position{
position: absolute;
top:8%;
left:1%;
}
		
.iot-main-banner-title p {
font-size: 18px;
line-height: 2rem;
text-align: left;
}

.iot-main-banner-title li {
font-size: 18px;
line-height: 2.5rem;
}	
	
.why-title h2,.cot-title h2,.production-title h2,.integrate-title h2,.lifecycle-title h2,.case-title h2,.compliance-title h2,.changing-title h2,.root-title h2{
font-size:36px;
line-height: 3rem;
text-align: left;
}
.why-title p, .cot-title p, .production-title p, .integrate-title p, .lifecycle-title p, .case-title p, .compliance-title p, .root-title p {
line-height: 2.5rem;
text-align: left;
}

}

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

@media screen and (max-width: 575.98px) { 
.main-banner-cover {
padding: 90% 0px;
background-image: url(../images/iot_security/2026/codesign/main_banner_phone_bg.png);
}
.iot-main-banner-title h1 {
font-size: 28px;
line-height: 2.5rem;
text-align: left;
}
.banner-title-position{
position: absolute;
top:7%;
left:1%;
}
.iot-main-banner-title p {
font-size: 18px;
line-height: 2rem;
text-align: left;
}

.iot-main-banner-title li {
font-size: 17px;
line-height: 2rem;
}
.why-title h2,.cot-title h2,.production-title h2,.integrate-title h2,.lifecycle-title h2,.case-title h2,.compliance-title h2,.changing-title h2,.root-title h2{
font-size:28px;
line-height: 2.5rem;
text-align: left;
}
.why-title p, .cot-title p, .production-title p, .integrate-title p, .lifecycle-title p, .case-title p, .compliance-title p, .root-title p {
line-height: 2.3rem;
text-align: left;
}	


}