/*============Glogbal Style================ */
html,
body {
height: 100%;
font-family: 
"Microsoft JhengHei",
"Segoe UI",
-apple-system, BlinkMacSystemFont,
"PingFang TC",
sans-serif;
}



/*banner箭頭的位置*/
.carousel-control-next, .carousel-control-prev{
 width: 8%;
}



/*2026資安展01*/
.cybersec01-tag {
/*display: inline-block;*/
color: #73ceff;
font-size: 18px;
margin-bottom: 3%;
font-weight: 800;
text-align: left;
}
.cybersec01-tag img{
margin-right:1%;
vertical-align: sub;
width: 3%;
}

.cybersec01-banner-cover{
padding:18% 0;
background-image:url("../images/index/banner/2026/cybersec_20260407.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
/*z-index: 1;*/

}

.cybersec01-position{
position: absolute;
top: 66%;
left: 9%;
}

.cybersec02-position{
position: absolute;
top: 66%;
left: 36%;
}

.cybersec01-banner-title{
border-left: 3px solid #ef727a; 
}

.cybersec01-banner-title h1{
font-size: 27px;
line-height: 2.5rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}


/*2026資安展 02*/
.cybersec-banner-cover{
padding:18% 0;
background-image:url("../images/index/banner/2026/cybersec_20260401.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
z-index: 1;
}



/*2026 CEATEC*/
.ceatec-banner-cover{
padding:18% 0;
background-image:url("../images/index/banner/2026/ceatec_20260904.png");
background-size: cover;
background-position: center center;
background-color: #fff;
position: relative;
}
.ceatec-position{
position: absolute;
top: 24%;
left:50%;
}
.ceatec-logo-row{
margin-bottom: 16px;
}
.ceatec-logo-combo{
height: 60px;
width: auto;
}
.ceatec-banner-title h2{
font-size: 62px;
line-height: 4.6rem;
color:#39a0d4;
font-weight: 700;
font-family: 'Roboto', sans-serif;
margin-bottom: 30px;
}
.ceatec-info-group{
display: flex;
flex-wrap: wrap;
gap: 54px;
margin-bottom: 18px;
}
.ceatec-info-item{
display: flex;
align-items: stretch;
gap: 20px;
}
.ceatec-info-bar{
width: 4px;
background: #333;
}
.ceatec-info-text{
font-size: 22px;
line-height: 1.6;
color: #333;
white-space: nowrap;
}




/*-------------------活動banner end--------------------------------*/


.btn-outline-light:hover {
color:#f8f9fa;
background-color: #212529;
border-color: #f8f9fa
}



.tag-color-red{
background: #f27153;
}

.tag-color-yellow{
background: #f7a021;
}

.tag-color-blue{
background: #57aff7;
}

.product-tag {
display: inline-block;
/*background:#000;*/
padding:3px 15px;
color: #fff;
font-size: 27px;
margin-bottom:1%;
font-weight: 600;
}


/*CLM*/
.clm-banner-cover{
padding:18% 0;
background-image:url("../images/index/banner/2026/clm_20260622.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}
.clm-position{
position: absolute;
top: 25%;
left:48%;
}
.clm-banner-title h2{
font-size: 62px;
line-height: 5rem;
color:#fff;
font-weight: 600;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
}
.clm-banner-title p{
font-size:26px;
color: #fff;
line-height: 2.8rem;
text-align: justify;
}



/*kms*/
.kms-banner-cover{
padding:18% 0;
background-image:url("../images/index/banner/2026/kms_20260622.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}
.kms-position{
position: absolute;
top: 25%;
left:12%;
}
.kms-banner-title h2{
font-size: 62px;
line-height: 5rem;
color:#fff;
font-weight: 600;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
}
.kms-banner-title p{
font-size:28px;
color: #fff;
line-height: 2.8rem;
text-align: justify;
}



/*Matter*/
.matter-banner-cover{
padding:18% 0;
background-image:url("../images/index/banner/2026/matter_20260622.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}
.matter-position{
position: absolute;
top: 25%;
left:52%;
}
.matter-banner-title h2{
font-size: 62px;
line-height: 5rem;
color:#fff;
font-weight: 600;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
}
.matter-banner-title p{
font-size:26px;
color: #fff;
line-height: 2.8rem;
text-align: justify;
}




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


/*2026資安展01*/
.cybersec01-position{
position: absolute;
top: 66%;
left: 9%;
}

.cybersec02-position{
position: absolute;
top: 66%;
left: 39%;
}

.cybersec01-banner-title h1{
font-size: 26px;
line-height: 2.5rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}
	

/*2026 CEATEC*/
.ceatec-position{
position: absolute;
top: 18%;
left:48%;
}
.ceatec-logo-combo{ 
height: 50px;
}
.ceatec-banner-title h2{
font-size: 52px;
line-height: 4.2rem;
}
.ceatec-info-text{ 
font-size: 18px; 

}	
	

/*------------------------------------------------------------------*/	
	
	
.product-tag {
font-size: 20px;
}
		
/*CLM*/	
.clm-position{
position: absolute;
top: 20%;
left:44%;
}	
.clm-banner-title h2{
font-size: 55px;
line-height: 4.5rem;
}
	
.clm-banner-title p{
font-size:24px;
line-height: 2.5rem;
}
	
/*KMS*/
.kms-banner-title h2{
font-size: 55px;
line-height: 4.5rem;
}
.kms-banner-title p{
font-size:24px;
line-height: 2.5rem;
}	
	
/*Matter*/
.matter-banner-title h2{
font-size: 55px;
line-height: 4.5rem;
}
.matter-banner-title p{
font-size:24px;
line-height: 2.5rem;
}	
}


/*高度不夠, 專為新的 IDE banner 設立此段點 */
@media screen and (max-width: 1300px) {

/*2026資安展01*/
.cybersec01-tag {
/* display: inline-block; */
color: #73ceff;
font-size: 16px;
margin-bottom: 3%;
font-weight: 800;
text-align: left;
}
.cybersec01-position{
position: absolute;
top: 64%;
left: 9%;
}

.cybersec02-position{
position: absolute;
top: 64%;
left: 41%;
}

.cybersec01-banner-title h1{
font-size: 20px;
line-height: 1.8rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}
		

/*CEATEC*/
.ceatec-position{
position: absolute;
top: 15%;
left:45%;
}
.ceatec-logo-combo{ 
height: 40px; 
}
.ceatec-banner-title h2{
font-size: 40px;
line-height: 3.4rem;
margin-bottom: 20px;
}
.ceatec-info-text{ 
font-size: 16px; }

	
	
	
/*------------------------------------------------------------------*/	
	
.product-tag {
font-size: 22px;
margin-bottom: 5px;
}

/*CLM*/	
.clm-position{
position: absolute;
top: 20%;
left:40%;
}
	
.clm-banner-title h2{
font-size: 43px;
line-height: 3.7rem;
}
.clm-banner-title p{
font-size:20px;
line-height: 2rem;
}
	
/*KMS*/
.kms-position{
position: absolute;
top: 20%;
left:10%;
}	
.kms-banner-title h2{
font-size: 43px;
line-height: 3.7rem;
}
.kms-banner-title p{
font-size:20px;
line-height: 2rem;
}	
	
/*Matter*/
.matter-position{
position: absolute;
top: 20%;
left:50%;
}
		
.matter-banner-title h2{
font-size: 43px;
line-height: 3.7rem;
}
.matter-banner-title p{
font-size:20px;
line-height: 2rem;
}		
		
}



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

/*2026資安展01*/
.cybersec01-tag {
/* display: inline-block; */
color: #73ceff;
font-size: 14px;
margin-bottom: 3%;
font-weight: 800;
text-align: left;
}
.cybersec01-banner-cover {
padding: 23% 0px;
}		
		
.cybersec01-position{
position: absolute;
top: 64%;
left: 5%;
}

.cybersec02-position{
position: absolute;
top: 64%;
left: 39%;
}

.cybersec01-banner-title h1{
font-size: 18px;
line-height: 1.8rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}	
	
/*2026資安展 02*/
.cybersec-banner-cover {
padding: 23% 0px;
}		
	
	

/*------------------------------------------------------------------*/	
	
.product-tag {
font-size: 19px;
margin-bottom: 5px;
}

/*CLM*/	
.clm-position{
position: absolute;
top: 15%;
left:44%;
}
	
.clm-banner-title h2{
font-size: 38px;
line-height: 3.3rem;
}
.clm-banner-title p{
font-size:18px;
line-height: 1.8rem;
}
	
/*KMS*/
.kms-position{
position: absolute;
top: 15%;
left:10%;
}	
.kms-banner-title h2{
font-size: 38px;
line-height: 3.3rem;
}
.kms-banner-title p{
font-size:18px;
line-height: 1.8rem;
}	
	
/*Matter*/
.matter-position{
position: absolute;
top: 15%;
left:50%;
}
		
.matter-banner-title h2{
font-size: 38px;
line-height: 3.3rem;
}
.matter-banner-title p{
font-size:18px;
line-height: 1.8rem;
}		
	
	
}


/*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) {

	
/*2026資安展01*/
.cybersec01-tag {
/* display: inline-block; */
color: #73ceff;
font-size: 14px;
margin-bottom: 3%;
font-weight: 800;
text-align: left;
}
.cybersec01-banner-cover {
padding: 25% 0px;
}		
		
.cybersec01-position{
position: absolute;
top: 64%;
left: 5%;
}

.cybersec02-position{
position: absolute;
top: 64%;
left: 45%;
}

.cybersec01-banner-title h1{
font-size: 18px;
line-height: 1.8rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}	
		
	
/*2026資安展 02*/
.cybersec-banner-cover {
padding: 25% 0px;
}		
	

	
/*CEATEC*/
.ceatec-position{
position: absolute;
top: 14%;
left:38%;
}
.ceatec-logo-combo{
height: 22px; 
}
.ceatec-banner-title h2{
font-size: 27px;
line-height: 2.2rem;
}
.ceatec-info-text{ 
font-size: 15px;
}
.ceatec-info-group{
gap: 16px;
}

/*------------------------------------------------------------------*/	
	
	
	
.product-tag {
font-size: 15px;
margin-bottom: 5px;
}

/*CLM*/	
.clm-position{
position: absolute;
top: 15%;
left:43%;
}
	
.clm-banner-title h2{
font-size: 28px;
line-height: 2.3rem;
}
.clm-banner-title p{
font-size:15px;
line-height: 1.5rem;
}
	
/*KMS*/
.kms-position{
position: absolute;
top: 15%;
left:10%;
}	
.kms-banner-title h2{
font-size: 28px;
line-height: 2.3rem;
}
.kms-banner-title p{
font-size:15px;
line-height: 1.5rem;
}	
	
/*Matter*/
.matter-position{
position: absolute;
top: 15%;
left:50%;
}
		
.matter-banner-title h2{
font-size: 28px;
line-height: 2.3rem;
}
.matter-banner-title p{
font-size:15px;
line-height: 1.5rem;
}		
	
	
}

/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 

	
/*2026資安展01*/
.cybersec01-tag {
/* display: inline-block; */
color: #73ceff;
font-size: 14px;
margin-bottom: 3%;
font-weight: 800;
text-align: left;
}
.cybersec01-banner-cover {
padding: 65% 0px;
background-image:url("../images/index/banner/2026/cybersec_20260407_phone.png");
}		
		
.cybersec01-position{
position: absolute;
top: 30%;
left: 10%;
}

.cybersec02-position{
position: absolute;
top: 51%;
left: 10%;
}

.cybersec01-banner-title h1{
font-size: 22px;
line-height: 1.8rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}	
		
/*cybersec02*/	
.cybersec-banner-cover{
padding:65% 0;
background-image:url("../images/index/banner/2026/cybersec_20260401_phone.png");
}	
		
	
/*CEATEC*/
.ceatec-banner-cover{
padding:65% 0;
background-image:url("../images/index/banner/2026/ceatec_20260904_phone.png");
}
.ceatec-position{
position: absolute;
top: 52%;
left: 8%;
}
.ceatec-logo-combo{
height: 26px;
}
.ceatec-banner-title h2{
font-size: 34px;
line-height: 2.9rem;
}
.ceatec-info-text{
font-size: 15px; white-space: normal;
}
.ceatec-info-group{
gap: 16px;
}


	

/*------------------------------------------------------------------*/	
	
.product-tag {
font-size: 23px;
margin-bottom: 5px;
}

/*CLM*/
.clm-banner-cover{
padding:65% 0;
background-image:url("../images/index/banner/2026/clm_20260622_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}	

.clm-position{
position: absolute;
top: 8%;
left:1%;
}
.clm-banner-title h2{
font-size: 38px;
line-height: 3.2rem;
}
.clm-banner-title p{
font-size:19px;
line-height: 1.8rem;
}
	
	
/*KMS*/
.kms-banner-cover{
padding:65% 0;
background-image:url("../images/index/banner/2026/kms_20260622_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}	

.kms-position{
position: absolute;
top: 8%;
left:1%;
}
.kms-banner-title h2{
font-size: 38px;
line-height: 3.2rem;
}
.kms-banner-title p{
font-size:19px;
line-height: 1.8rem;
}		
	
	
/*Matter*/
.matter-banner-cover{
padding:65% 0;
background-image:url("../images/index/banner/2026/matter_20260622_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}	

.matter-position{
position: absolute;
top: 8%;
left:1%;
}
.matter-banner-title h2{
font-size: 38px;
line-height: 3.2rem;
}
.matter-banner-title p{
font-size:19px;
line-height: 1.8rem;
}		
	
	
}

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

@media screen and (max-width: 575.98px) { 

	
	
/*2026資安展01*/
.cybersec01-tag {
/* display: inline-block; */
color: #73ceff;
font-size: 14px;
margin-bottom: 3%;
font-weight: 800;
text-align: left;
}
.cybersec01-banner-cover {
padding: 80% 0px;
background-image:url("../images/index/banner/2026/cybersec_20260407_phone.png");
}		
		
.cybersec01-position{
position: absolute;
top: 28%;
left: 10%;
}
	
.cybersec02-position{
position: absolute;
top: 52%;
left: 10%;
}

.cybersec01-banner-title h1{
font-size: 18px;
line-height: 1.5rem;
color:#fff;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 6px;
text-align: left;
}	
			
	
/*2026資安展 02*/
.cybersec-banner-cover{
padding:80% 0;
background-image:url("../images/index/banner/2026/cybersec_20260401_phone.png");
}		
	
	
/*2026CEATEC*/
.ceatec-banner-cover{
padding:80% 0;
background-image:url("../images/index/banner/2026/ceatec_20260904_phone.png");
}
.ceatec-position{
position: absolute;
top: 50%;
left: 3%;
}
.ceatec-logo-combo{ 
height: 36px; 
}
.ceatec-banner-title h2{
font-size: 30px;
line-height: 2.2rem;
}
.ceatec-info-text{ 
font-size: 14px;
white-space: normal; 
}
.ceatec-info-group{
gap: 12px; 
}
	
.ceatec-info-item {
display: flex;
align-items: stretch;
gap: 10px;	


}

/*------------------------------------------------------------------*/	
	
	
.product-tag {
font-size: 16px;
margin-bottom: 5px;
}
	

/*CLM*/
.clm-banner-cover{
padding:80% 0;
background-image:url("../images/index/banner/2026/clm_20260622_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}	

.clm-position{
position: absolute;
top: 5%;
left:1%;
}
.clm-banner-title h2{
font-size: 28px;
line-height: 2.3rem;
}
.clm-banner-title p{
font-size:17px;
line-height: 1.6rem;
}
	
	
/*KMS*/
.kms-banner-cover{
padding:80% 0;
background-image:url("../images/index/banner/2026/kms_20260622_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}	

.kms-position{
position: absolute;
top: 5%;
left:1%;
}
.kms-banner-title h2{
font-size: 28px;
line-height: 2.3rem;
}
.kms-banner-title p{
font-size:17px;
line-height: 1.6rem;
}		
	
	
/*Matter*/
.matter-banner-cover{
padding:80% 0;
background-image:url("../images/index/banner/2026/matter_20260622_phone.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}	

.matter-position{
position: absolute;
top: 5%;
left:1%;
}
.matter-banner-title h2{
font-size: 28px;
line-height: 2.3rem;
}
.matter-banner-title p{
font-size:17px;
line-height: 1.6rem;
}		
	
	
}


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