/*============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-black{
background:#2F2725;	
}


/*主視覺banner*/

.complete-solution-banner-cover{
padding:20% 0;
background-image:url("../images/iot_security/2025_iot_security/complete_solution/complete_solution_main_banner.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

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

.complete-solution-banner-title{
background:#121212;
padding:2%;
}

.complete-solution-banner-title h1{
font-size: 3rem;
color: #fff;
font-weight: 600;
display: inline-block;
letter-spacing: -5px;
}

.complete-solution-banner-title p{
font-size: 18px;
line-height: 2.3rem;
color: #fff;
font-weight: 500;
}

.complete-solution-banner-title img{
vertical-align: sub;
width: 17%;
margin-right: 1%;
display: inline;
}



/*IoT安全，全生命週期保護區*/

.complete-solution-title h2{
font-size: 56px;
line-height: 4.5rem;
color: #000;
font-weight: 800;
/*padding:0 0 2% 0;*/
}

.complete-subtitle-h2 {
font-size: 26px;
line-height: 3rem;
}

.complete-solution-title h4{
font-size: 32px;
line-height: 2.8rem;
color: #000;
font-weight: 800;
padding:2% 0 2% 0;
display: inline;
vertical-align: sub;
}

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



/*應用區*/

.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;
}

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

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

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


/*為什麼選擇全景*/
.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%;
}

/*物聯網五項注藥措施*/
.five-important-box{
margin-bottom: 5%;	
}

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

.five-title h5{
font-size: 24px;
line-height: 3rem;
color: #000;
font-weight: 800;
/*padding:2% 0 2% 0;*/
}

/*聯絡我們*/
.contact-title h2{
font-size: 56px;
line-height: 5rem;
color: #000;
font-weight: 800;
}

a {
color:#39a0d4;
}

li > p:hover{
color:#39a0d4;
}


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

/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.banner-title-position{
position: absolute;
top: 44%;
left:50%;
}
.complete-solution-banner-title h1{
font-size: 2.3rem;	
}
	
.complete-solution-banner-title img{
vertical-align: sub;
width: 17%;
margin-right: 2%;
}
	
	
.complete-solution-title h2,.why-changing-title h2,.five-title h2,.contact-title h2{
font-size: 50px;
line-height: 4rem;
}
	
.complete-subtitle-h2 {
font-size: 24px;
line-height: 3rem;
}	
	
.complete-solution-title h4,.application-title h4{
font-size: 30px;
}
.iot-product-title {
font-size: 23px;
}
}

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1300px) {
.banner-title-position{
position: absolute;
top: 40%;
left:50%;
}

.complete-solution-banner-title h1{
font-size: 1.9rem;	
}

.complete-solution-banner-title img{
vertical-align: sub;
width: 18%;
margin-right: 2%;
}
.complete-solution-banner-title p{
font-size: 17px;
line-height: 2rem;
}	
	
.complete-solution-title h2,.why-changing-title h2,.five-title h2,.contact-title h2{
font-size: 44px;
line-height: 4rem;
}
.complete-subtitle-h2 {
font-size: 22px;
line-height: 2.5rem;
}
.iot-product-title {
font-size: 17px;
background: #2F2725;
letter-spacing: -2px;
}

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

.five-title h5 {
font-size: 24px;
line-height: 2.3rem;
color: rgb(0, 0, 0);
font-weight: 800;
}	
}


/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1199.98px) {
.banner-title-position{
position: absolute;
top: 27%;
left:50%;
}
.complete-solution-banner-title h1{
font-size: 1.7rem;	

}
.complete-solution-banner-title img{
vertical-align: sub;
width: 18%;
margin-right: 2%;
}
.complete-solution-title h2, .why-changing-title h2, .five-title h2,.contact-title h2 {
font-size: 41px;
line-height: 3.3rem;
}
}


/*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:45%;
}
.complete-solution-title h2, .why-changing-title h2, .five-title h2 {
font-size: 39px;
line-height: 3.5rem;
}
.complete-subtitle-h2 {
font-size: 20px;
line-height: 1rem;
}	
.complete-solution-banner-title p {
font-size: 17px;
line-height: 2rem;
}
.five-title h5 {
font-size: 23px;
margin-top:3%;
}	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.banner-title-position{
position: absolute;
top: 13%;
left: 8%;
}
.complete-solution-banner-cover{
padding:50% 0;
background-image:url("../images/iot_security/2025_iot_security/complete_solution/complete_solution_main_banner_phone.png");
}
.complete-solution-banner-title {
background: #121212;
padding: 6%;
}
.complete-solution-banner-title h1{
font-size: 2.1rem;	
}
.complete-solution-banner-title img{
vertical-align: sub;
width: 18%;
margin-right: 2%;
}
.complete-solution-banner-title p {
font-size: 18px;
line-height: 2.2rem;
}	
.complete-solution-title h2, .why-changing-title h2, .five-title h2,.contact-title h2 {
font-size: 36px;
line-height: 3.3rem;
margin-bottom: 3%;
}
.complete-subtitle-h2 {
font-size: 24px;
line-height: 2.3rem;
}	
.why-changing-cover {
margin: 1% 0 1% 0;
padding-top: 10%;
padding-bottom: 10%;
}	
.word-break-h2{
display:block;
}
.word-break-subtitle-h2{
display:block;
}	
}

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

@media screen and (max-width: 575.98px) { 
.banner-title-position{
position: absolute;
top: 20%;
left:4%;
}

.complete-solution-banner-title {
background: rgb(18, 18, 18);
padding: 5% 3% 5% 3%;
}

.complete-solution-banner-cover{
padding:60% 0;
background-image:url("../images/iot_security/2025_iot_security/complete_solution/complete_solution_main_banner_phone.png");
}
	
.complete-solution-banner-title h1 {
font-size: 1.5rem;
}
.complete-solution-banner-title img{
vertical-align: sub;
width: 20%;
margin-right: 2%;
}	

.iot-product-title {
font-size: 19px;
}	
.complete-solution-title h2, .why-changing-title h2, .five-title h2,.contact-title h2 {
font-size: 28px;
line-height: 2.6rem;
margin: 5% 0 5% 0;
}

.complete-subtitle-h2 {
font-size: 18px;
line-height: 2.1rem;
}

.word-break-h2-phone{
display: block;
}	
.complete-solution-title h4,.application-title h4{
font-size: 22px;
line-height: 2rem;
}

.five-title h5 {
font-size: 23px;
	margin-top:5%;
}
	
.why-changing-box{
margin-bottom: 10%;		
}	
	
/*程式碼簽署的應用情境區*/

.media {
display: flex;
flex-direction: column;
}
.media h5,.media p{
text-align: left;
}
.media img {
display: block;
margin-bottom: 2%;
width: 40%;
	
}


}

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