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

.light-blue-color-bg{
background:#6166be;		
}

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


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


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

.banner-title-position{
position: absolute;
top: 28%;
left:-14%;
}

.hsm-banner-title h1{
font-size: 72px;
line-height: 5.2rem;
color: #88F1FF;
font-weight: 700;
font-family: 'Roboto', sans-serif;
margin-bottom: 0.1%;
text-align: center;	
}

.banner-subtitle-h1{
font-size: 40px;
line-height: 3.5rem;
color: #fff;
text-align: center;
display: block;
}


/*產品介紹區*/
.hsm-title h2{
font-size: 60px;
line-height: 4rem;
color: #000;
font-weight: 800;
text-align: center;
margin-top:4%;
}

.subtitle-h2{
display: block;
font-size: 35px;
font-weight: 500;
color:#000;
text-align: center;
}

.hsm-title {
 margin:2% 0;
}

/*完整方案區*/

.solution-bg-cover{
/*margin-top:2%;*/
padding:5% 0 5% 0;
border-radius: 60px;
}

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

.solution-title h3{
font-size: 50px;
color: #fff;
line-height: 4.5rem;
text-align: center;
}

.solution-outside-title h4,.solution-title h4{
font-size: 38px;
color: #fff;
line-height: 3.2rem;
margin-bottom: 1%;
}

.solution-outside-title p,.solution-title p,.why-changing-title p{
color:#fff;
}

.solution-title img{
margin: 5% auto 0 auto;
display: block;
width: 60%;
} 
	

.solution-bg-box{
padding:2%;
margin:1%;
border-radius: 40px;
} 

.solution-outside-bg-box{
margin:5% 0;
}

/*why changing區*/
.why-changing-bg-cover{	
padding:4% 0 4% 0;
margin: 8% 0 0 0;
}
/*

.why-changing-title h3{
font-size: 54px;
color: #fff;
line-height: 3.2rem;
margin-bottom: 1%;
}
*/

.why-changing-subtitle{
font-size: 38px;
font-weight: 800;
line-height: 3.6rem;
color: #fff;/*8ef9ff*/
display: inline-block;
padding: 0 0 9% 0;
}

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

/*特色區*/

.feature-bg-cover {
margin:5% 0 5% 0;
}

.feature-title h4{
line-height: 2.1rem;
}


/*按鈕區*/

.btn-bg-cover{
padding:4% 0 4% 0;
margin:0 0 4% 0;
}

.btn-title h4{
font-size: 38px;
margin-bottom: 3%;
color: #000;
text-align: center;
}

.btn-outline-lightblue{
color: #f8f9fa;
background-color: transparent;
background-image: none;
border-color: #8ef9ff;
}	
.btn-outline-lightblue:hover {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}


/*知識分享*/
.knowledge-bg-cover{
padding:0 6% 5% 6%;
/*margin: 0 0 3% 0;*/
}

.knowledge-title img{
margin-bottom:2%;
}

.knowledge-title h5{
font-size: 1.8rem;
margin-bottom: 1%;
}

.knowledge-title h6{
font-size: 1.3rem;
line-height: 1.9rem;
margin-bottom: 1%;
}

.knowledge-title p{
font-size:14px;
line-height: 1.4rem;
}

/*去除影片下方的白線*/
video {
clip-path: inset(2px 2px);
}



/*.....word break...............*/

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

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

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



/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
	
/*主banner區*/
.banner-title-position{
top: 30%;
left:-15%;
}
.hsm-banner-title h1{
font-size: 65px;
line-height: 4.5rem;	
}
.banner-subtitle-h1{
font-size: 35px;
line-height: 3rem;
}
/*產品介紹區*/
.hsm-title h2{
font-size: 58px;
line-height: 4rem;
}
.subtitle-h2{
font-size: 32px;
}
	
/*完整方案區*/
.iot-product-title{
font-size: 23px;
}

.solution-title h3{
font-size: 45px;
line-height: 4.3rem;
}

.solution-outside-title h4,.solution-title h4, .why-changing-title h4{
font-size: 36px;
}

/*why changing區*/

.why-changing-subtitle{
font-size: 36px;
}

/*按鈕區*/
.btn-title h4{
font-size: 36px;	
}

}

	/*max-width: 1300px*/
@media screen and (max-width: 1400px) {
	
/*主banner區*/
.banner-title-position{
top: 28%;
left:-15%;
}
.hsm-banner-title h1{
font-size: 53px;
line-height: 4rem;
margin-bottom: 1%;	
}
.banner-subtitle-h1{
font-size: 28px;
line-height: 2.4rem;	
}
	
/*產品介紹區*/
.hsm-title h2{
font-size: 48px;
line-height: 3.8rem;
}
.subtitle-h2{
font-size: 29px;
}
	
/*完整方案區*/
.iot-product-title{
font-size: 21px;
}

.solution-title h3{
font-size: 39px;
line-height: 3.8rem;

}

.solution-outside-title h4,.solution-title h4, .why-changing-title h4{
font-size: 30px;
line-height: 2.8rem;
}

/*why changing區*/


.why-changing-subtitle{
font-size: 30px;
line-height: 3.2rem;
padding: 0 0 19% 0;	
}

.why-changing-title p{
font-size: 17px;
}

/*按鈕區*/
.btn-title h4{
font-size: 30px;
line-height: 2.8rem;
}

.btn-lg {
font-size: 1.1rem;
}
	
/*知識區*/
.knowledge-bg-cover {
padding: 0 3% 5% 3%;
}	
}	

/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {
		
/*主banner區*/
.banner-title-position{
top: 30%;
left:-16%;
}
.hsm-banner-title h1{
font-size: 45px;
line-height: 3.3rem;	
}
.banner-subtitle-h1{
font-size: 24px;
line-height: 2rem;
}
	
/*產品介紹區*/
.hsm-title h2{
font-size: 40px;
line-height: 3rem;
}
.subtitle-h2{
font-size: 22px;
}
	
/*完整方案區*/
.iot-product-title{
font-size: 20px;
}

.solution-title h3{
font-size: 35px;
line-height: 3.5rem;
}

.solution-outside-title h4,.solution-title h4, .why-changing-title h4{
font-size: 28px;
line-height: 2.8rem;
}

	
/*why changing區*/
/*
.why-changing-title h3{
font-size: 38px;
line-height: 3rem;
}
*/

.why-changing-subtitle{
font-size: 26px;
padding: 15% 0 19% 0;	
}

.why-changing-title p{
font-size: 17px;
}

/*按鈕區*/
.btn-title h4{
font-size: 28px;
line-height: 2.8rem;
}

.btn-lg {
font-size: 1.1rem;
}
	
/*知識區*/
.knowledge-bg-cover {
padding: 0 3% 5% 3%;
}	
	
.knowledge-title h5 {
font-size: 1.5rem;
margin-bottom: 1%;
}	
	
.knowledge-title h6 {
font-size: 1.1rem;
line-height: 1.7rem;
}	
}

/*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區*/
.banner-title-position{
top: 20%;
left:-22%;
}
.hsm-banner-title h1{
font-size: 40px;
line-height: 3.3rem;	
}
.banner-subtitle-h1{
font-size: 20px;
}
/*產品介紹區*/
.hsm-title h2{
font-size: 40px;
line-height: 3rem;
}
.subtitle-h2{
font-size: 22px;
}
	
/*完整方案區*/
	
.solution-bg-box {
margin: 2%;
}	
	
.solution-bg-box {
padding: 5%;
}
	
.iot-product-title{
font-size: 20px;
}

.solution-title h3{
font-size: 36px;
line-height: 3.4rem;
margin-top:5%;
}

.solution-outside-title h4,.solution-title h4, .why-changing-title h4{
font-size: 28px;
line-height: 2.8rem;
}

.solution-outside-title img{
width: 70%;
margin-top:3%;
}		
	
.solution-title img {
margin: 4% auto 0 auto;
display: block;
width: 60%;
}	
		
	
/*why changing區*/

.why-changing-bg-cover {
margin: 12% 0px 10% 0 ;
}
	

.why-changing-subtitle{
font-size: 36px;
padding: 5% 0 8% 0;	
}

.why-changing-title p{
font-size: 18px;
}
	
/*按鈕區*/
.btn-bg-cover {
padding: 7% 0 5% 0;
}	
	
.btn-title h4{
font-size: 28px;
line-height: 2.8rem;
}

.btn-lg {
font-size: 1.1rem;
margin-bottom: 5%;
}

.word-break-h3{
display: inline;
}	

}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
	
/*主banner區*/
.hsm-banner-cover{
padding:50% 0;
background-image:url("../images/iot_security/2025_iot_security/hsm/main_banner_bg_phone.png");
}
.banner-title-position{
top: 8%;
left:0%;
}
	
.hsm-banner-title h1{
font-size: 48px;
line-height: 3.2rem;
}
.banner-subtitle-h1{
font-size: 26px;
}	
	
.hsm-title h2 {
margin-top:8%;
}

.solution-bg-box {
padding: 5%;
margin: 2%;
border-radius: 40px;
}	
.solution-title h3{
font-size: 35px;
line-height: 3.5rem;
margin:5% 0 5% 0;
text-align: left;
}	
	

.knowledge-bg-cover{
margin:8% 0 8% 0;
}	
	
/*
.why-changing-title h3{
font-size: 35px;
margin-top:5%
}
*/
	
.why-changing-subtitle{
font-size: 35px;
padding: 5% 0 8% 0;	
}
	
	
.knowledge-title h5 {
font-size: 28px;
margin-bottom: 3%;
}
	
.btn-lg {
margin-bottom: 6%;
}
	
.word-break-h2-phone{
display: block;
}	
	
.word-break-h3{
display: inline;
}

.word-break-btn-phone{
display: block;
}
}

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

@media screen and (max-width: 575.98px) { 
/*主banner區*/
.hsm-banner-cover{
padding:60% 0;
background-image:url("../images/iot_security/2025_iot_security/hsm/main_banner_bg_phone.png");
}
.banner-title-position{
top: 13%;
left:0%;
}
	
.hsm-banner-title h1{
font-size: 35px;
line-height: 2.8rem;
}
.banner-subtitle-h1{
font-size: 21px;
display: none;
}	
.hsm-title h2 {
margin-top:10%;
font-size: 30px;
line-height: 2rem;
}

.subtitle-h2 {
font-size: 18px;
}
		
.solution-bg-cover {
padding: 5% 0px;
border-radius: 40px;
}	
	
.solution-bg-box {
padding: 10% 5%;
margin: 4% 0;

}
.iot-product-title {
font-size: 20px;
}

.solution-title h3{
font-size: 27px;
line-height: 2.8rem;
margin-bottom: 10%;
}	

.solution-outside-title h4, .solution-title h4, .why-changing-title h4 {
font-size: 24px;
line-height: 2.2rem;
}	
	
.solution-title img,.solution-outside-title img {
width: 90%;	
}

.solution-outside-title img{
margin:3% 0 0 0 ;
}
	
.why-changing-bg-cover {
padding: 10% 0  10% 0 ;
}
	
	
.why-changing-subtitle {
font-size: 27px;
line-height: 2.8rem;
padding: 10% 0 13% 0;
}
	
.btn-bg-cover {
padding: 11% 0 7% 0;
}	
	
.btn-title h4 {
font-size: 24px 0;
line-height: 2.2rem;
margin-bottom: 7%;
}	
	
.knowledge-title h5{
font-size: 22px;
margin-bottom: 2%;
}	
	
.knowledge-title h6 {
font-size: 17px;
line-height: 1.5rem;
margin-bottom: 1%;
}	

	
.word-break-h1-phone{
display:block;
}	
.word-break-h2-phone{
font-size: 24px;
display: block;
}		
.word-break-btn-phone{
display:block;
}
}

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