@import url('sub.css'); 







.eco-fog-system {width:100%;}
.eco-fog-system .efs-wrap {display:flex; flex-direction:column; gap:120px;}
.eco-fog-system .efs-section {width:100%;}
.eco-fog-system .efs-intro {display:flex; flex-direction:column; gap:40px;}
.eco-fog-system .efs-intro-text {display:flex; flex-direction:column; gap:10px; text-align:center; align-items:center;}
.eco-fog-system .efs-lead {}
.eco-fog-system .efs-desc {}
.eco-fog-system .efs-photos {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:30px; width:100%;}
.eco-fog-system .efs-photo {border-radius:20px; overflow:hidden; aspect-ratio:4 / 3; background:var(--grayBg);}
.eco-fog-system .efs-photo img {display:block; width:100%; height:100%; object-fit:cover;}
.eco-fog-system .efs-split {display:flex; gap:80px; align-items:flex-start; width:100%;}
.eco-fog-system .efs-side {width:400px; flex:0 0 400px; padding-top:30px; position:sticky; top:120px;}
.eco-fog-system .efs-side-title {color:var(--black);}
.eco-fog-system .efs-main {flex:1 1 auto; padding-top:30px; display:flex; flex-direction:column; gap:30px; min-width:0;}
.eco-fog-system .efs-video {background:var(--grayBg); border-radius:20px; aspect-ratio: 1080 / 446; display:flex; justify-content:center; align-items:center; width:100%; overflow:hidden;}
.eco-fog-system .efs-video .jarallax {width:100%; height:100%;}

.eco-fog-system .efs-bullets {display:flex; flex-direction:column; gap:5px; }
.eco-fog-system .efs-bullets li {position:relative; padding-left:10px; color: var(--black); font-weight:400 !important}
.eco-fog-system .efs-bullets li::before {content:""; position:absolute; left:0; top:12px; width:4px; aspect-ratio: 1 / 1; border-radius:100%; background:var(--basic);}
.eco-fog-system .efs-mist .efs-side {padding-top:20px;}
.eco-fog-system .efs-mist .efs-main {padding-top:20px;}

.eco-fog-system .efs-cards {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:30px; width:100%;}
.eco-fog-system .efs-card {background:var(--grayBg); border-radius:20px; padding:20px; display:flex; align-items:center; gap:20px; width:100%; box-sizing:border-box;}
.eco-fog-system .efs-iconBox {width:80px; height:80px; border-radius:10px; background-color:var(--white); display:flex; align-items:center; justify-content:center; flex:0 0 80px; background-repeat:no-repeat; background-position:center; transition:all 0.3s linear;}
.eco-fog-system .efs-card.is-primary .efs-iconBox {background-color:var(--main); box-shadow:15px 15px 30px rgba(39,170,225,0.25); transition:all 0.3s linear;}
.eco-fog-system .efs-cardText {display:flex; flex-direction:column; gap:2px; justify-content:center; min-width:0;}
.eco-fog-system .efs-num {font-size:12px; line-height:1.833333; letter-spacing:0; font-weight:700; font-family:var(--eng); color:var(--basic); text-decoration:underline; text-underline-offset:2px; transition:all 0.3s linear;}
.eco-fog-system .efs-num.is-primary {color:var(--main); transition:all 0.3s linear;}
.eco-fog-system .efs-cardTitle { font-weight:600; color:var(--black); margin:2px 0 0}

.eco-fog-system .efs-card .efs-iconBox {}
.eco-fog-system .efs-card:nth-of-type(1) .efs-iconBox {background-image:url("/technology/img/efs_ico01.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card:nth-of-type(2) .efs-iconBox {background-image:url("/technology/img/efs_ico02.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card:nth-of-type(3) .efs-iconBox {background-image:url("/technology/img/efs_ico03.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card:nth-of-type(4) .efs-iconBox {background-image:url("/technology/img/efs_ico04.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card:nth-of-type(5) .efs-iconBox {background-image:url("/technology/img/efs_ico05.svg"); transition:all 0.3s linear;}

.eco-fog-system .efs-card.is-primary:nth-of-type(1) .efs-iconBox {background-image:url("/technology/img/efs_ico01_hv.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card.is-primary:nth-of-type(2) .efs-iconBox {background-image:url("/technology/img/efs_ico02_hv.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card.is-primary:nth-of-type(3) .efs-iconBox {background-image:url("/technology/img/efs_ico03_hv.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card.is-primary:nth-of-type(4) .efs-iconBox {background-image:url("/technology/img/efs_ico04_hv.svg"); transition:all 0.3s linear;}
.eco-fog-system .efs-card.is-primary:nth-of-type(5) .efs-iconBox {background-image:url("/technology/img/efs_ico05_hv.svg"); transition:all 0.3s linear;}













/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


.eco-fog-system .efs-intro-text br {display:none;}

.eco-fog-system .efs-side {width:310px; flex:0 0 310px;}
.eco-fog-system .efs-main {padding-top:0;}
.eco-fog-system .efs-cards {grid-template-columns:repeat(2, minmax(0, 1fr)); gap:15px;}
}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.eco-fog-system .efs-wrap {gap:80px;}
.eco-fog-system .efs-photos {gap:10px;}
.eco-fog-system .efs-video-icon {width:160px; height:160px;}
.eco-fog-system .efs-cards {grid-template-columns:repeat(2, minmax(0, 1fr));}

.eco-fog-system .efs-mist .efs-main {padding:0;}
.eco-fog-system .efs-split {flex-direction:column; gap:30px;}
.eco-fog-system .efs-side {width:100%; flex:0 0 auto; position:static; padding-top:0;}
.eco-fog-system .efs-main {flex:none; width:100%;}
.eco-fog-system .efs-bullets li::before {top:11px;}
.eco-fog-system .efs-mist .efs-side {padding:0;}


}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 




.eco-fog-system .efs-intro {gap:30px;}
.eco-fog-system .efs-wrap {gap:60px;}
.eco-fog-system .efs-photos {grid-template-columns:1fr; gap:10px; }
.eco-fog-system .efs-photo {border-radius:10px;}
.eco-fog-system .efs-video {border-radius:15px;}
.eco-fog-system .efs-video-icon {width:140px; height:140px;}
.eco-fog-system .efs-cards {grid-template-columns:1fr; gap:10px;}
.eco-fog-system .efs-split {flex-direction:column; gap:15px;}
.eco-fog-system .efs-bullets li::before {top:10px; width:3px;}
.eco-fog-system .efs-main {flex:none; width:100%; gap:20px;}
.eco-fog-system .efs-card {padding:10px; border-radius:10px;}
.eco-fog-system .efs-iconBox {width:60px; height:60px;  flex: 0 0 60px; background-size:40px auto !important;}




}