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

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

.bg-color-black{
background:#2F2725;	
}

.complete-solution-title img {
vertical-align: sub;
width: 9%;
margin-right: 2%;
}

.main-banner-cover{
padding:18% 0;
background-image:url("../images/iot_security/2025_iot_security/index/iot_main_banner_0911.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.banner-title-position{
position: absolute;
top: 30%;
left:-5%;
}

.iot-main-banner-title-slogan{
font-size: 29px;
background:#e7233b;
color: #fff;
padding:2px 10px;
margin-bottom: 2%;
display: inline-block;
font-weight: 500;
}

.iot-main-banner-title h1{
font-size: 64px;
line-height: 3.5rem;
color: #fff;
font-weight: 600;
/*text-align: center;*/
}

.iot-subtitle-h1{
color: #fff;
font-size:30px;
/*text-align: center;*/
display: block;
font-weight: 500;
margin-bottom: 1%;
}

.iot-dot-h1{
font-size:18px;
padding: 0 2%;
}

.iot-title h1{
font-size:48px;
color: #0D7CBE;
line-height: 4rem;
font-weight: 800;
}

.iot-title h2{
font-size: 56px;
line-height: 5rem;
color: #000;
font-weight: 800;
padding:0 0 1% 0;
}

.iot-subtitle-h2{
font-size:30px;
margin-bottom: 3%;
display: block;
}

.iot-title h4{
font-size: 32px;
line-height: 2.8rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}

.iot-product-title-line{
font-size:25px;
color: #fff;
padding:0.5% 0%;
margin:0 0 2% 0;
font-weight: 600;
display: inline-block;
border-radius: 3px 3px 3px 3px;
}

.iot-product-title{
font-size:25px;
background:#2F2725;
color: #fff;
padding:0.5% 1.8%;
font-weight: 600;
display: inline-block;
border-radius: 2px 2px 2px 2px;
}

.card-body p {
display: block;
color: #000;
line-height: 2.2rem;
}

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


.divide-line{
border: 1px solid #2A81D1;
display: block;
}


.check-icon img{
width: 30px;
font-size: 20px;
margin: 0 2% 0 0 ;
}

.check-icon {
font-size: 19px;
display: block;
margin:3% 0 0 0;
}

.matter-solution-box{
margin-bottom:2%;
}

.sdk-token-pic{
display: block;
width:80%;
text-align: center;
}

.fp300-token-pic{
display: block;
width:70%;
text-align: center;
}


.iot-fido-image{
display:block;
width:40%;
margin:2% 0 2% 0 ;
}

.trustend-logo{
display: block;
margin:5% 0 1% 0;
width: 50%;
}

/*
.iot-contact-icon-image p{
display: inline;
}
*/


/*車聯網*/
.iov-cover{
margin:6% 0;
padding-top:5%;
padding-bottom: 5%;
}

.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}	
.iov-box{
margin:2% 0;
}	

.iot-token-box{
padding: 4%;
margin:0 3%;
}

.black-card-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
/*background: #2F2725;*/
}

.black-card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
/*background-color: #fff;*/
background-clip: border-box;
border: 0px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
}

/*圖片倒圓角*/

.image-radius img{
border-radius: 300px;
}

.image-left-radius img{
border-radius: 300px 0 0 300px;	
}

.image-right-radius img{
border-radius: 0 300px 300px 0;	
}


/*CLM區*/
.clm-box img{
max-width:80%;/*圖片1920px時過大,1200又過小,so在此縮小,1200斷點再放大*/
}


/*符合國際資安標準*/

.standard-cover{
margin:6% 0;
padding-top:5%;
padding-bottom:5%;	
}

/*
.standard-box{
margin:5% 0;
}	
*/

/*word-break*/

.word-break-h1{
display:block;
}
.word-break-subtitle-h1{
display:block;
}

.word-break-p-h1{
display:block;
}

.word-break-p-h2{
display:block;
}
.word-break-h2{
display:block;
}

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


.iot-section-padding{
padding:3% 0;
}

/*
.footer-area {
padding: 50px 0 20px 0;
background-color: #302f32;
}
*/

.corporate-logo p{
margin-bottom: 10%;
}


.application-title h4{
font-size: 32px;
line-height: 2.8rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}



/*為什麼選擇全景*/
.why-changing-cover{
margin:6% 0 1% 0;
padding-top:5%;
padding-bottom:5%;
}

.why-changing-title h2{
font-size: 56px;
line-height: 5rem;
color: #fff;
font-weight: 800;
}

.why-changing-title h5{
font-size: 24px;
color: #fff;
}

.why-changing-title p{
display: inline-block;
color: #fff;
}

.why-changing-title img{
width: 18%;
margin-right:2%
}

.why-changing-box{
margin-bottom: 3%;
}



/*media query*/

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

.iot-main-banner-title h1{
font-size: 64px;
line-height: 4rem;
color: #fff;
font-weight: 400;

}

.iot-subtitle-h1{
color: #fff;
font-size:28px;
text-align: center;
display: block;
font-weight: 500;
}

.iot-title h1{
font-size:46px;
color: #0D7CBE;
line-height: 4rem;
font-weight: 800;
}

.iot-title h2{
font-size: 50px;
line-height: 4.5rem;
color: #000;
font-weight: 800;
padding:0 0 1% 0;
}

.iot-title h4{
font-size: 28px;
line-height: 2.8rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}

.iot-product-title-line{
font-size:23px;
color: #fff;
padding:0.5% 0%;
margin:0 0 2% 0;
font-weight: 600;
display: inline-block;
border-radius: 3px 3px 3px 3px;
}

.iot-product-title{
font-size:23px;
background:#2F2725;
color: #fff;
padding:0.5% 1.8%;
font-weight: 600;
display: inline-block;
border-radius: 2px 2px 2px 2px;
}

.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}
.check-icon img{
width: 30px;
margin: 0 2% 0 0 ;
font-size: 20px;
}

.check-icon {
display: block;
font-size: 18px;
margin: 3% 0 1% 0;
}
	
}


/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1300px) {
.main-banner-cover{
padding:18% 0;
}
.banner-title-position{
position: absolute;
top: 26%;
left:-4%;
}

.iot-main-banner-title-slogan{
font-size: 23px;
}	
.iot-main-banner-title h1{
font-size: 50px;
line-height: 3rem;
}

.iot-subtitle-h1{
font-size:21px;
}

.iot-title h1{
font-size:38px;
color: #0D7CBE;
line-height: 4rem;
font-weight: 800;
}	
.iot-title h2{
font-size: 46px;
line-height: 4rem;
color: #000;
font-weight: 800;
padding:0 0 1% 0;
}
.iot-subtitle-h2{
font-size:27px;
margin-bottom: 3%;
display: block;
}
.iot-title h4{
font-size: 28px;
line-height: 2.6rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}

	
.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}	
.iot-product-title-line{
font-size:19px;
color: #fff;
padding:0.5% 0%;
margin:0 0 2% 0;
font-weight: 600;
display: inline-block;
border-radius: 3px 3px 3px 3px;
}

.iot-product-title{
font-size:17px;
background:#2F2725;
color: #fff;
padding:0.5% 1.8%;
font-weight: 600;
display: inline-block;
border-radius: 2px 2px 2px 2px;
}

	
.clm-box img{
max-width:120%;/*圖片1920px時過大,1200又過小,so在此縮小,1200斷點再放大*/
}


.trustend-logo{
display: block;
margin:6% 0 2% 0;
width: 60%;
}	
.iot-fido-image{
display:block;
width:60%;
margin:2% 0 2% 0 ;
}	
}


/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1199.98px) {
.main-banner-cover{
padding:20% 0;
}
	
.banner-title-position{
position: absolute;
top: 25%;
left:-3%;
}
	
.iot-main-banner-title h1{
font-size: 46px;
line-height: 3rem;
}
	
.iot-subtitle-h1{
font-size:20px;
}

.iot-product-title-line{
font-size:20px;
color: #fff;
padding:0.5% 0%;
margin:0 0 2% 0;
font-weight: 600;
display: inline-block;
border-radius: 3px 3px 3px 3px;
}

.iot-product-title{
font-size:20px;
background:#2F2725;
color: #fff;
padding:0.5% 1.8%;
font-weight: 600;
display: inline-block;
border-radius: 2px 2px 2px 2px;
}
		
.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}	
	
.clm-box img {
max-width: 100%;
text-align: center;
}

.word-break-p-h2{
display: inline;
}
}	
/*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:19% 0;
}
.banner-title-position{
position: absolute;
top: 24%;
left:0%;
}
	
.iot-main-banner-title-slogan{
font-size: 20px;
}

	
.iot-main-banner-title h1{
font-size: 35px;
line-height: 2.5rem;
}

.iot-subtitle-h1{
color: #fff;
font-size:16px;
}
	
.iot-title h1{
font-size:34px;
color: #0D7CBE;
line-height: 4rem;
font-weight: 800;
}		
.iot-title h2 {
font-size: 40px;
line-height: 3rem;
color: #000;
font-weight: 800;
padding: 0 0 2% 0;
}
.iot-subtitle-h2 {
font-size: 24px;
margin-bottom: 3%;
display: block;
}
.iot-title h4{
font-size: 32px;
line-height: 2.6rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}

.iot-product-title-line{
font-size:24px;
color: #fff;
margin:2% 0 1% 0;
font-weight: 600;
display: inline-block;
border-radius: 3px 3px 3px 3px;
}

.iot-product-title{
font-size:24px;
background:#2F2725;
color: #fff;
margin:2% 0 1% 0;
font-weight: 600;
display: inline-block;
border-radius: 2px 2px 2px 2px;
}
	
.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}	
	
.check-icon {
display: block;
font-size: 18px;
margin: 1% 0 0 0;
}

.trustend-logo{
display: block;
margin:5% 0 1% 0;
width: 40%;
}
	
.sdk-token-pic{
display: block;
width:60%;
text-align: center;
}

.fp300-token-pic{
display: block;
width:50%;
text-align: center;
}
	
.word-break-p-h1{
display: inline;
}		
	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.main-banner-cover{
padding:58% 0;
background-image:url("../images/iot_security/2025_iot_security/index/iot_main_banner_for_phone_0901.png");
}
	
.banner-title-position{
position: absolute;
top: 10%;
left:4%;
}
	
.iot-main-banner-title-slogan{
font-size: 26px;
margin-bottom: 2%;
}
	
.iot-main-banner-title h1{
font-size: 46px;
line-height: 2.5rem;
}

.iot-subtitle-h1{
font-size:19px;
}

.iot-title h2 {
font-size: 38px;
line-height: 3.3rem;
color: #000;
font-weight: 800;
padding: 0 0 2% 0;
}

.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}	
	
.word-break-h2-for-phone{
display:block;
}
.word-break-h2{
display:inline;
}

.iov-cover {
margin: 10% 0;
padding-top: 11%;
padding-bottom: 11%;

}
.standard-cover {
margin: 10% 0;
padding-top: 11%;
padding-bottom: 11%;
}

}

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

@media screen and (max-width: 575.98px) { 
.main-banner-cover{
padding:75% 0;
background-image:url("../images/iot_security/2025_iot_security/index/iot_main_banner_for_phone_0901.png");
}
.banner-title-position{
position: absolute;
top: 10%;
left: 4%;
}
	
.iot-main-banner-title-slogan{
font-size: 22px;
margin-bottom: 4%;
}	

.iot-main-banner-title h1{
font-size: 30px;
line-height: 2rem;
}
	
.iot-dot-h1{
font-size:10px;
padding: 0 2%;
display: inline;
}	
	
.iot-subtitle-h1{
color: #fff;
font-size:20px;
text-align: left;
display: block;
line-height: 2.5rem;
text-align: justify;
margin-bottom: 2%;
}	

.iot-title h1{
font-size:20px;
color: #0D7CBE;
line-height: 2rem;
font-weight: 800;
}	
	
.iot-title h2{
font-size: 29px;
line-height: 2.5rem;
color: #000;
font-weight: 800;
padding:0 0 3% 0;
}
	
.iot-subtitle-h2{
font-size:21px;
margin-bottom: 3%;
line-height: 2.2rem;
display: block;
}

.iot-title h4{
font-size: 22px;
line-height: 2rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
}	
	
.iot-main-banner-title p{
display: none;
}
	
.iot-product-title-line{
font-size:20px;
color: #fff;
padding:6% 0% 1% 0;
margin:0 0 2% 0;
font-weight: 600;
display: inline-block;
border-radius: 3px 3px 3px 3px;
}
	
.iot-token-box{
padding: 15% 4%;
margin:0 3%;
}

.iot-product-title{
font-size:20px;
background:#2F2725;
color: #fff;
margin:2% 0 ;
padding:1% 1.8%;
font-weight: 600;
display: inline-block;
border-radius: 2px 2px 2px 2px;
}	
	

.application-title h4 {
font-size: 22px;
line-height: 2rem;
color: #000;
font-weight: 800;
padding: 2% 0 2% 0;
}	

/*車聯網*/
.iov-cover{
margin:6% 0;
padding-top:5%;
padding-bottom: 5%;
}

.iov-cover h2, .iov-cover h4, .iov-cover p, .iov-cover ul, .iov-cover li {
 color: #fff;
}		
	
.sdk-token-pic{
display: block;
width:80%;
text-align: center;
}

.fp300-token-pic{
display: block;
width:70%;
text-align: center;
}

.word-break-subtitle-h1{
display: inline;
}	
.word-break-p-h1{
display:inline;
}

.word-break-h2{
display:inline;
}
.word-break-h2-phone{
display: block;
}
	
.word-break-subtitle-h1-phone{
display: block;
}		
	


}

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


/* ==========================================================================
   ★★★★★ CIOT-FAQ-SECTION 常見問答（獨立區塊，方便搜尋/刪除/調整）★★★★★
   若要找這段樣式，直接搜尋關鍵字：CIOT-FAQ
   對應 HTML：ciot_test.html 內 <section class="ciot-faq-section">
   ========================================================================== */

.ciot-faq-section {
    padding: 60px 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    width: 100%;
    contain: content;
}

.ciot-faq-container {
    width: 100%;
    max-width: 1200px;
}

.ciot-faq-main-heading {
    margin-bottom: 32px;
    /* 字級/顏色/粗細/RWD 皆交給頁面既有的 .iot-title h2 規則統一控管，這裡不重複設定 */
}

.ciot-faq-highlight {
    color: #0D7CBE; /* 沿用本頁 .iot-title h1 的主色，取代原 FastID 的青色 #17A2B8 */
}

.ciot-faq-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.ciot-faq-icon svg {
    width: 16px;
    height: 16px;
    color: #0f172a;
    transition: transform 0.25s ease;
}

.ciot-faq-parent-item {
    border-bottom: 0px solid #000000;
    padding: 8px 0;
}

.ciot-faq-parent-item:first-child {
    border-top: 1px solid #e2e8f0;
}

.ciot-faq-parent-summary {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    cursor: pointer;
    list-style: none;
}

.ciot-faq-parent-summary::-webkit-details-marker {
    display: none;
}

h3.ciot-faq-title-text {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
}

.ciot-faq-parent-item[open] > .ciot-faq-parent-summary .ciot-faq-icon svg,
.ciot-faq-child-item[open] > .ciot-faq-child-summary .ciot-faq-icon svg {
    transform: rotate(90deg);
    color: #0D7CBE;
}

.ciot-faq-parent-content {
    padding: 10px 0 20px 40px;
    overflow: hidden;
}

.ciot-faq-child-item {
    margin-bottom: 8px;
}

.ciot-faq-child-item:last-child {
    margin-bottom: 0;
}

.ciot-faq-child-summary {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
}

.ciot-faq-child-summary::-webkit-details-marker {
    display: none;
}

h4.ciot-faq-title-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
}

.ciot-faq-child-summary .ciot-faq-icon svg {
    color: #64748b;
}

.ciot-faq-child-content {
    padding: 8px 0 16px 40px;
    color: #000000;
    font-size: 16px;
    line-height: 1.6;
}

/* 全站 p{} 為全域規則（font-size:17px; line-height:2.3rem; margin:0;），
   會直接蓋掉上面 .ciot-faq-child-content 對子層 <p> 的字級/行高期望，
   這裡用比全域 p 更高的選擇器優先權，明確覆寫回 FAQ 想要的排版 */
.ciot-faq-child-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 0 0 8px 0;
}

.ciot-faq-child-content p:last-child {
    margin-bottom: 0;
}

.ciot-faq-media {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 8px;
    margin-top: 16px;
    display: block;
    border: 1px solid #e2e8f0;
}

.ciot-faq-image-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 16px;
    justify-content: flex-start;
}

.ciot-faq-image-row .ciot-faq-media {
    flex: 1;
    max-width: 350px;
    margin-top: 0;
}

/* 系統架構圖等單張大圖需要放大顯示時，在該張圖的 <img> 額外加上這個 class */
.ciot-faq-media-large {
    max-width: 750px !important;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 表格：刻意用 .ciot-faq-section 限定範圍，避免影響到本頁以外／未來其他 table-responsive 用法 */
.ciot-faq-section .table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    border-radius: 8px;
}

.ciot-faq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    table-layout: auto !important;
}

.ciot-faq-table th,
.ciot-faq-table td {
    color: #000000;
    padding: 14px 20px;
    text-align: center;
    border: 1px solid #dcdcdc;
    white-space: nowrap !important;
    transition: background-color 0.1s ease-out;
}

.ciot-faq-table th {
    color: #000000;
    background-color: #f4f6f9;
}

.ciot-faq-table-header-cell {
    background-color: #ffffff !important;
    font-weight: bold !important;
    border-right: 1px solid #dcdcdc;
    vertical-align: middle;
}

.ciot-faq-table tbody tr :not([rowspan]):first-child {
    font-weight: normal;
}

.ciot-faq-table td:last-child {
    text-align: center;
}

.ciot-faq-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* ---- CIOT-FAQ RWD（比照本檔案既有斷點慣例：767.98px / 575.98px）---- */
@media screen and (max-width: 767.98px) {
    .ciot-faq-image-row {
        flex-direction: column;
        align-items: center;
    }
    .ciot-faq-image-row .ciot-faq-media {
        max-width: 100%;
    }
    .ciot-faq-media-large {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 575.98px) {
    .ciot-faq-parent-content,
    .ciot-faq-child-content {
        padding-left: 20px; /* 手機版縮排從 40px 收窄，避免內容被過度往右擠 */
    }
}

/* ==========================================================================
   ★★★★★ CIOT-FAQ-SECTION 結束 ★★★★★
   ========================================================================== */