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



.text-blue{
color: #2b72d8;
}
.text-purple{
color:#6166be;
}

.badge-blue {
color: #fff;
background-color: #3a72cc;
}


.ide-section-padding {
padding: 60px 0 60px 0;
}

/*------------------------------------------*/

:root {
--matter-blue: #3a72cc;
--matter-black: #1D1D1F;
--matter-gray-text: #6E6E73;
--matter-bg-light: #FBFBFD;
--matter-border: #D2D2D7;
}



/* Section Layouts */
.section-header {
margin-bottom: 80px;
}

.section-header p{
font-size: 23px;
line-height: 2.5rem;
}

.section-tag {
font-size: 16px;
font-weight: 700;
color: var(--matter-blue);
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
margin-bottom: 10px;
}

.product-heading {
font-weight: 800;
font-size: 48px;
line-height: 3.7rem;
color: #374EAB;
margin-bottom: 1%;
}
.section-heading {
font-weight: 800;
font-size: 40px;
line-height: 3.2rem;
margin-bottom: 1%;
}

/* Matter Cards */
.card-matter {
border: none;
background: var(--matter-bg-light);
border-radius: 10px;
padding: 25px;
height: 100%;
transition: all 0.4s ease;
}
.card-matter:hover {
background: #FFFFFF;
box-shadow: 0 20px 40px rgba(0,0,0,0.06);
transform: translateY(-4px);
}
/*
.card-icon {
font-size: 24px;
color: var(--matter-blue);
margin-bottom: 28px;
}
*/

/* API Integration Flow UI */
.api-flow-box {
background: #1D1D1F;
border-radius: 5px;
padding: 40px;
box-shadow: 0 40px 80px rgba(0,0,0,0.2);
color: #F5F5F7;
}
.flow-step {
position: relative;
padding-left: 48px;
margin-bottom: 32px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.flow-step:last-child {
margin-bottom: 0;
border-left: 1px solid transparent;
}
.flow-step::before {
content: '';
position: absolute;
left: -5px;
top: 10px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--matter-blue);
box-shadow: 0 0 10px var(--matter-blue);
}
.endpoint-name {
color: #58A6FF;
font-size: 18px;
margin-bottom: 4px;
font-weight: 700;
display: block;
}
.endpoint-desc {
font-size: 16px;
color:#DBDADA;
font-weight: 500;
}

/* Integration Matrix Table */
/*
.matrix-wrap {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--matter-border);
}
.table-matrix thead th {
background: var(--matter-bg-light);
border-bottom: 1px solid var(--matter-border);
padding: 24px;
font-size: 18px;
font-weight: 700;
}
.table-matrix td {
padding: 24px;
vertical-align: middle;
border-top: 1px solid #F2F2F7;
font-size: 18px;
font-weight: 700;	
}
*/
.pill-tag {
display: inline-block;
background: #FFFFFF;
border: 1px solid var(--matter-border);
padding: 4px 12px;
border-radius: 6px;
margin: 4px;
font-weight: 500;
font-size: 18px;
color: var(--matter-black);
}

/* Module Icon Button */
.module-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--matter-bg-light);
border-radius: 16px;
color: var(--matter-black);
transition: all 0.2s;
border: 1px solid transparent;
text-decoration: none !important;
}
.module-icon-btn:hover {
background: #FFFFFF;
border-color: var(--matter-blue);
color: var(--matter-blue);
transform: scale(1.05);
}


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

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

.ide-main-banner-title h1{
font-size: 68px;
line-height: 5rem;
color:#3a72cc;
font-weight: 900;
font-family: 'Roboto', sans-serif;
margin-bottom: 1%;
}

.ide-main-banner-title p{
font-size:36px;
color: #000;
line-height: 3rem;
margin-bottom: 1%;
}

.ide-main-banner-title li{
font-size: 20px;
}


/* 透過這個 Class 控制大小 */
.fido-img {
display: flex;
justify-content: center;
align-items: center;	
}

.fido-img img{
width: 30%;       /* 基礎寬度 */
max-width: 500px;  /* 桌機版最大寬度，可依需求調整 (例如 600px 或 80%) */
height: auto;      /* 保持比例 */
object-fit: contain;
margin-top: 2%;
}


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

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

.table-bordered thead td, .table-bordered thead th {
border-bottom-width: 5px;
border-bottom: #1087FF;
background-color:#DFE4E5;
color:#000;
}

.table-bordered th {
border: 2px solid #fff;
vertical-align: middle;
white-space:nowrap;
background-color:#2b60ad;
}

.table-bordered td {
border: 2px solid #fff;
vertical-align: middle;
white-space:nowrap;
background-color:#3a72cc;
}

.connect-logo-box {
margin: 1.5% 0;
width: 300px;
}
.connect-logo-box p {
color: #50ceff;
margin-top: 5%;
line-height: 1rem;
font-size: 14px;
display: block;
}



/*資訊banner區*/
.idexpert-bn-info-bg-cover{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background: #091C47;
padding:2rem 0 2rem 0 ;
background-attachment: fixed;
position: relative;
}

.info-banner-title h4{
font-size:1.3rem;
color:#64ABFF;
}

.info-banner-title p{
color: #fff;
font-size:1.2rem;
line-height: 2rem;
}

.info-banner-title:not(:last-child){
border-right: 2px solid #3e5f9b;
}



/*IDE LOGO*/
.idexpert-production-title img{
width: 30%;
vertical-align: sub;
}

.idexpert-production-title h2{
font-size: 55px;
color: #000;
line-height: 4.2rem;

	
}


/*成功案例*/

.nav-link_motp {
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
font-size: 19px;
display: block;
padding: .5rem 1rem;

}
.nav-link_motp.active {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
font-size: 19px;
}


.card-title {
font-size: 16px;
}



/*下載按鈕*/

.idexpert-button-bg-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background: #102A72;
padding: 2rem 0 4.6rem 0;
background-attachment: fixed;
position: relative;
}

/*下載區按鈕*/

.idexpert-icon-box p{
color:#fff;
transition: 0.3s;
padding-top:100%;
line-height: 1.2rem;

}
.idexpert-icon-box p:hover{
color:#ff83ac;
transition: 0.3s;	
}

/*icon-1*/
.idexpert-icon-box{
display: block; 
width:100%;
height:auto;
margin:  0 auto;

}

.idexpert-icon-1{
display: block; 
width: 100px;
height:100px;
}

.idexpert-icon-1 a{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_01.png");
background-repeat: no-repeat;
}

.idexpert-icon-1 a:hover{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_01_hover.png");
background-repeat: no-repeat;
}

/*icon-2*/
.idexpert-icon-2{
display: block; 
width: 100px;
height:100px;

}

.idexpert-icon-2 a{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_02.png");
background-repeat: no-repeat;

}

.idexpert-icon-2 a:hover{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_02_hover.png");
background-repeat: no-repeat;
}
/*icon-3*/
.idexpert-icon-3{
display: block; 
width: 100px;
height:100px;

}

.idexpert-icon-3 a{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_03.png");
background-repeat: no-repeat;

}

.idexpert-icon-3 a:hover{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_03_hover.png");
background-repeat: no-repeat;
}
/*icon-4*/
.idexpert-icon-4{
display: block; 
width: 100px;
height:100px;

}

.idexpert-icon-4 a{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_04.png");
background-repeat: no-repeat;

}

.idexpert-icon-4 a:hover{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_04_hover.png");
background-repeat: no-repeat;
}

/*icon-5*/
.idexpert-icon-5{
display: block; 
width: 100px;
height:100px;

}

.idexpert-icon-5 a{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_05.png");
background-repeat: no-repeat;

}

.idexpert-icon-5 a:hover{
display: block; 
width: 100px;
height:100px;
background-image:url("../images/idexpert/2026/idepxert_btn_05_hover.png");
background-repeat: no-repeat;
}




/*media query*/
/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.ide-main-banner-title h1{
font-size: 58px;
line-height: 5rem;
}

.ide-main-banner-title p{
font-size:34px;
}
.ide-main-banner-title li {
font-size: 18px;
}

}
/*max-width: 1300px*/
@media screen and (max-width: 1400px) {

.banner-title-position{
position: absolute;
top: 30%;
left:-3%;
}
	
.ide-main-banner-title h1{
font-size: 48px;
line-height: 5rem;
}
	
.ide-main-banner-title p{
font-size:28px;
line-height: 2rem;
margin-bottom: 0%;	
}	
	
.ide-main-banner-title li {
font-size: 15px;
}

.idexpert-production-title {
font-size: 50px;
}	

.idexpert-production-title img{
width: 30%;
}	
	
.info-banner-title h4 {
font-size: 1.1rem;
color: #64ABFF;
}	
	
.product-heading {
font-size: 46px;
line-height: 3.7rem;

}	
.section-heading {
font-size: 40px;
line-height: 3.5rem;
margin-bottom: 1%;
}	

}


/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {
	
.ide-main-banner-title h1{
font-size: 44px;
line-height: 4rem;
}
.ide-main-banner-title p{
font-size:25px;
line-height: 2rem;
margin-bottom: 0%;	
}	
.ide-main-banner-title li {
font-size: 14px;
}	

.product-heading {
font-size: 40px;
line-height: 3.5rem;
margin-bottom: 0%;
}

.section-heading {
font-size: 35px;
line-height: 3.2rem;
margin-bottom: 0%;
}
	
/*IDE LOGO*/
.idexpert-production-title img{
width: 30%;
}

.idexpert-production-title h2{
font-size: 48px;
color: #000;
line-height: 4rem;
	
}	
	
	
}
/*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: 20%;
left:-3%;
}
		
.ide-main-banner-title h1{
font-size: 35px;
line-height: 4rem;
}
.ide-main-banner-title p{
font-size:18px;
line-height: 2rem;
margin-bottom: 0%;	
}	
.ide-main-banner-title li {
font-size: 14px;
/*text-align: left;*/
}	
	
.section-heading {
font-size: 35px;
line-height: 3.5rem;
margin-bottom: 1%;
}	
	
.info-banner-title:not(:last-child){
border-right: 0px;

}

/*IDE LOGO*/
.idexpert-production-title img{
width: 30%;
}

.idexpert-production-title h2{
font-size: 43px;
color: #000;
line-height: 4rem;
	
}		
}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
/*主banner  start*/
.main-banner-cover{
padding:60% 0;
background-image:url("../images/idexpert/2026/main_bg_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}
	
.banner-title-position{
position: absolute;
top: 8%;
left:0%;
}
.ide-main-banner-title h1{
font-size: 52px;
line-height: 4rem;
margin-bottom: 1%;
}	
.ide-main-banner-title p{
font-size:25px;
line-height: 3rem;
}	
.ide-main-banner-title li {
font-size: 17px;
line-height: 2rem;
/*text-align: left;*/
}	
	
.fido-img {
display: flex;
justify-content: start;
align-items: center;
}
	
.fido-img img {
width: 50%;
margin-top: 2%;
}	

.idexpert-production-title {
font-size: 38px;
}
.idexpert-production-title img{
width: 38%;
}	
.section-heading {
font-size: 35px;
line-height: 3rem;
margin-bottom: 1%;
}	

.idexpert-icon-box{
margin-bottom: 5%;

}	
	
/*IDE LOGO*/
.idexpert-production-title img{
width: 43%;
}

.idexpert-production-title h2{
font-size: 34px;
color: #000;
line-height: 4rem;
margin-bottom: 10%;
	
}	
		
}

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

@media screen and (max-width: 575.98px) { 
/*主banner  start*/
.main-banner-cover{
padding:100% 0;
background-image:url("../images/idexpert/2026/main_bg_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}
.banner-title-position{
position: absolute;
top: 5%;
left:0%;
}	
.ide-main-banner-title h1{
font-size: 44px;
line-height: 3.2rem;
margin-bottom: 2%;
}	
.ide-main-banner-title p{
font-size:22px;
line-height: 2rem;
margin-bottom: 2%;
}	
	
.fido-img img {
width: 60%;
margin-top: 2%;
}	

.info-banner-title h4 {
font-size: 1.4rem;
color: #64ABFF;
}	

	
.idexpert-production-title {
font-size: 30px;
}
.idexpert-production-title img{
width: 35%;
}
	
.product-heading {
font-size: 34px;
line-height: 3rem;
margin-bottom: 0%;

}
.section-heading {
font-size: 28px;
line-height: 3rem;
margin-bottom: 0%;
}
	
/*IDE LOGO*/
.idexpert-production-title img{
width: 55%;
display: block;
}	
.idexpert-production-title h2 {
font-size: 34px;
color: #000;
line-height: 2.5rem;
margin-bottom: 12%;

}

}