@charset "UTF-8";

/* 공통 */
#wrap{height: 100%;}
.contentWrap{padding: 48px 0 96px;}
#subWrap{margin-top: 89px;}
#headerWrap{background-color: #fff!important; border-bottom: 0;}
#headerWrap nav .depth01 li h2 a{color: #1E1F1E;}
#headerWrap .bg{background-color: #fff;}
#headerWrap nav .depth02{background-color: #fff;}
#headerWrap nav .depth02 li h3 a{color: #1E1F1E;}
#headerWrap .mobileMenuBtn,
#headerWrap .sitemapBtn{background: url(../images/common/mobile_menu02.svg)no-repeat center;}
.breadcrumb{padding-top: 2px; display: flex; align-items: center; gap: 0 25px; height: 33px;}
.breadcrumb li{position: relative; font-size: 14px; font-weight: 500; color: #ccc;}
.breadcrumb li a{display: block;  font-size: 14px; font-weight: 500; color: #ccc;}
.breadcrumb li:last-child{color: #FF7C3B;}
.breadcrumb li:last-child a{color: #FF7C3B;}
.breadcrumb li::after{content: '>'; position: absolute; top: 50%; transform: translateY(-55%); right:-17px; color: #ccc;}
.breadcrumb li:last-child::after{display: none;}
.imgBox img{display: block; margin: 0 auto; width: 100%; object-fit: contain;}
.imgBox img.m{display: none;}
.comList li{color: #1E1F1E;}
.paginationBox{margin: 30px 0; gap: 10px 24px;  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.paginationBox .pageLink{padding-top: 3px; position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #999; border-radius: 50px;}
.paginationBox .pageLink.pageLinkPrev,
.paginationBox .pageLink.pageLinkNext{padding: 0; background:0!important;}
.paginationBox .pageLink.active{background-color: #FF7C3B; color: #fff;}
.paginationBox .pageLinkPrev::after,
.paginationBox .pageLinkNext::after {content: ''; width: 7px; height: 8px; position: absolute; top: 54%; left:50%; transform: translate(-50%, -50%);}
.paginationBox .pageLinkPrev::after { background: url(../images/common/prev_icon.svg)no-repeat center; background-size: contain;}
.paginationBox .pageLinkNext::after{background: url(../images/common/next_icon.svg)no-repeat center; background-size: contain;}

@media (max-width: 1199px){

  #subWrap{margin-top: 72px;}
  
  .comList li{font-size: 14px;}

}

@media (max-width: 1024px){

  .imgBox img.m{display: block!important;}
  .imgBox img.pc{display: none;}
  
}

@media (max-widtH: 576px){

  .contentWrap{padding: 24px 0 72px;}

}

/* 공통 - 테이블 */
.table{width: 100%;}
.table tr th{padding: 14px 20px; font-weight: 700; background-color: #FDF7EF; text-align: center; border-top: 1px solid #000; border-right: 1px solid #EAEAEA; color: #000;}
.table tr td{padding: 14px 20px; color: #000; border: 1px solid #EAEAEA; border-width: 1px 1px 1px 0; text-align: center;}
.table tr th:last-child,
.table tr td:last-child{border-right: 0;}
.table tr td strong{display: block; margin: 5px 0 2px}
.tableType02{border-top: 1px solid #000000;}
.tableType02 tr th{border: 1px solid #EAEAEA; border-width: 1px 1px 0 0;}

@media (max-width: 1199px){
  
  .table tr th,
  .table tr td{padding: 11px 20px; font-size: 14px;}

}

@media (max-width: 414px){

    .table tr td br{display: none;}

}

/* 공통 - 제목 */
.titleBox{margin-bottom: 72px;}
.titleBox .title01{margin-bottom: 20px; font-size: 36px; line-height: 1.3; color: #1E1F1E; font-weight: 700;}
.titleBox .title02{margin-bottom: 16px; font-size: 24px; color: #1E1F1E; line-height: 1.3;}
.titleBox .text01{line-height: 1.3; color: #1E1F1E;}
.titleBox .text02{font-size: 20px; color: #1E1F1E;}

@media (max-width: 1199px){

  .titleBox{margin-bottom: 36px;}
  .titleBox .title01{margin-bottom: 16px; font-size: 30px;}
  .titleBox .text01{font-size: 14px;}

  .titleBox .title02{font-size: 20px;}
  .titleBox .text02{font-size: 16px;}

}

@media (max-width: 1024px){

  .titleBox{margin-bottom: 24px;}
  .titleBox .title01{margin-bottom: 24px; font-size: 24px;}

}

@media (max-width: 576px){

  .titleBox .title01{font-size: 20px;}

}

.productBox{margin-bottom: 96px;}
.productBox:last-child{margin-bottom: 0;}
.layoutType01{display:flex; gap: 0 65px; margin-bottom: 24px;}
.layoutType01:last-child{margin-bottom: 0;}
.layoutType01 .imgBox{width: 419px; flex-shrink: 0;}
.layoutType01 .imgBox span{display: block; text-align: center; color: #1E1F1E;}
.layoutType01 .imgBox img{display: block; max-width: 100%; width: auto; margin: 0 auto;}
.layoutType01 .imgBox img.m{display: none;}
.layoutType01 .tableBox{ width: 100%;}
.imgLayoutBox{display: flex; flex-wrap: wrap; gap: 20px 1.6%; }
.imgLayoutBox .box{padding: 66px 0 24px; width: 49.2%;  position: relative; border: 2px solid #e7e7e7;}
.imgLayoutBox .imgBox{display: flex; justify-content: space-between;}
.imgLayoutBox .imgBox img{width: 50%;}
.imgLayoutBox h3{position: absolute; left: 50%; transform: translateX(-50%); top:-2px; max-width: 200px; width: 100%; height: 42px; line-height:42px; text-align: center; border-radius: 4px; color: #fff; background-color: #97A3B2; font-size: 20px;}

@media (max-width: 1199px){

  .layoutType01{gap: 0 20px;}
  .layoutType01 .imgBox{width: 346px;}
  
  .imgLayoutBox{gap: 16px 1.6%;}
  .imgLayoutBox h3{height: 36px; line-height: 36px;}
  
}

@media (max-width: 1024px){

  .productBox{margin-bottom: 72px;}
  .layoutType01 .imgBox{width: 100%; margin-bottom: 20px;}
  .layoutType01{flex-direction: column; align-items: center;}
  .layoutType01 .imgBox img.pc{display: none;}
  .layoutType01 .imgBox img.m{display: block;}

}

@media (max-width: 767px){

  .imgLayoutBox{gap: 40px 0;}
  .imgLayoutBox .box{padding: 48px 0 24px; width: 100%;}

}

@media (max-width: 576px){

  .productBox{margin-bottom: 24px;}
  
  .imgLayoutBox .imgBox{flex-direction: column; gap: 12px 0;}
  .imgLayoutBox .imgBox img{width: 100%;}

}

/* CPE/UE */
.cpeueBox .imgLayoutBox{flex-direction: column; gap: 48px 0;}
.cpeueBox .imgLayoutBox .box{width: 100%; padding: 78px 48px 36px;}
.cpeueBox .imgLayoutBox .imgList{display: flex; justify-content: center; gap:0 48px;} 
.cpeueBox .imgLayoutBox .imgList li img{display: block; max-width: 100%; margin: 0 auto}

.cpeueBox .imgLayoutBox .box:nth-child(2){padding: 78px 230px 36px;}
.cpeueBox .imgLayoutBox .box:nth-child(2) .imgList{gap: 0 144px;}


@media (max-width: 1199px){

  .cpeueBox .imgLayoutBox .imgList{gap: 0 35px;}
  .cpeueBox .imgLayoutBox .box{padding: 82px 18px 22px;}
  .cpeueBox .imgLayoutBox .box:nth-child(2) .imgList{gap: 0 96px;}
  .cpeueBox .imgLayoutBox .box:nth-child(2){padding: 70px 204px 22px;}

}

@media (max-width: 1024px){

  .cpeueBox .imgLayoutBox .box{padding: 82px 54px 40px;}
  .cpeueBox .imgLayoutBox .imgList{gap: 50px 1.6%; flex-wrap: wrap;}
  .cpeueBox .imgLayoutBox .imgList li{width: 23.8%;}

  .cpeueBox .imgLayoutBox .box:nth-child(2){padding: 70px 0 40px;}
  .cpeueBox .imgLayoutBox .box:nth-child(2) .imgList{gap: 0 5%;}
  .cpeueBox .imgLayoutBox .box:nth-child(2) .imgList li{width: 30%;}

}

@media (max-width: 767px){

  .cpeueBox .imgLayoutBox .imgList{gap: 50px 0!important;}
  .cpeueBox .imgLayoutBox .imgList li{width: 100%!important;}

}

/* Management */
.listBox{margin-bottom: 20px; gap:0 30px; display: flex; justify-content: space-between; padding: 42px 34px 42px 42px; border: 2px solid #E7E7E7; border-radius: 8px; }
.listBox:last-child{margin-bottom: 0;}
.listBox h3{margin-bottom: 10px; font-size: 24px; color: #FF7C3B;}
.listBox .list li{display: flex; align-items: center; gap: 0 10px; font-size: 16px; color: #1E1F1E;}
.bullet li{display: flex; gap: 0 10px;}
.bullet li::before,
.listBox .list li::before{content: ''; margin-top: 8px; flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #1E1F1E;}
.listBox .img{border: 6px solid #F5F5F5; border-radius: 20px; overflow: hidden;}
.listBox .img img{display: block; width: 100%; object-fit: cover;}

@media (max-width: 1199px){

  .listBox h3{font-size: 20px;}
  .listBox .list li{font-size: 14px;}

} 

@media (max-width: 1024px){

  .listBox{padding: 40px;}
  .listBox{flex-direction: column; gap: 18px 0;}

}

@media (max-width: 576px){

    .listBox{padding: 24px;}

}

/* Overview */
.overviewBox02 .imgBox{margin-bottom: 72px;}
.overviewList{position: relative; padding: 48px 0; display: flex; justify-content: center; gap: 0 20px; z-index: 1;}
.overviewList::after{content: ''; position: absolute; top:0; left: -100%; right: -100%; bottom: 0; z-index: -1; background-color: #F5F5F5;}
.overviewList > li{width: 33.33%; padding: 16px; background-color: #151615; border-radius: 4px;}
.overviewList li h3{margin-bottom: 16px; color: #fff; font-size: 24px;}
.overviewList li p,
.overviewList li .list li{font-size: 18px; color: #fff;}

@media (max-width: 1199px){

  .overviewList{padding: 40px 0;}
  .overviewList li h3{font-size: 20px;}
  .overviewList li p,
  .overviewList li .list li{font-size: 14px;}
  .overviewBox02 .imgBox{margin-bottom: 60px;}

}

@media (max-width: 767px){

  .overviewList{flex-direction: column; gap: 0 0;} 
  .overviewList > li{width: 100%; min-height: 150px; margin-bottom: 16px;}
  .overviewList li:last-child{margin-bottom: 0;}
  .overviewBox02 .imgBox{margin-bottom: 24px;}

}

@media (max-width: 576px){

  .overviewList{padding: 24px 0;}

}

/* Unified Monitoring */
@media (max-width: 1024px){

  .monitoringBox .imgBox{padding: 36px 0 0;}

}

/* IoT G/W */
.gwBox .layoutType01{margin-bottom: 48px;}
.gwBox .infoBox{width: 100%;}
.gwBox .infoBox h3{margin-bottom: 5px; font-size: 18px; color: #1E1F1E;}
.gwBox .infoBox p{margin-bottom: 22px; color: #1E1F1E;}
.gwBox .imgBox{padding-top: 35px;}

@media (max-width: 1199px){

  .gwBox .infoBox h3{font-size: 15px;}
  .gwBox .infoBox p{font-size: 13px;}

}

@media (max-width: 1024px){

  .gwBox .infoBox p{margin-bottom: 18px;}
  .gwBox .imgBox{margin-bottom: 95px;}

}

/* IoT Sensor */
.sensorBox .imgLayoutBox h3{max-width: 240px;}
.sensorBox .imgLayoutBox .box{padding: 72px 24px 24px; width: 23.8%;}
.sensorBox .imgLayoutBox .imgBox{margin-bottom: 35px;}
.sensorBox .imgLayoutBox .imgBox img{width: 100%;}
.sensorBox .infoList li{color: #1E1F1E; line-height: 1.3;}

@media (max-width: 1199px){

  .sensorBox .imgLayoutBox h3{max-width: 200px;}
  .sensorBox .imgLayoutBox .box{padding: 72px 20px 24px;}
  .sensorBox .infoList li{font-size: 14px;}

}

@media (max-width: 1024px){

  .sensorBox .imgLayoutBox .box{width: 49.2%;}

}

@media (max-width: 767px){

  .sensorBox .imgLayoutBox .box{width: 48.5%;}
  .sensorBox .imgLayoutBox{gap: 20px 3%;}

}

@media (max-width: 576px){

  .sensorBox .imgLayoutBox .box{width: 100%;}
  .sensorBox .imgLayoutBox{gap: 20px 0;}

}

/* Data Hub */
.datahubBox .comList{margin-left: 50px;}
.datahubBox .titleBox{margin-bottom: 48px;}

@media (max-width: 1199px){

  .datahubBox .titleBox{margin-bottom: 36px;}
  .datahubBox .comList{margin-left: 28px;}

}

@media (max-width: 767px){

  .datahubBox .imgBox{margin-bottom: 15px;}

}

@media (max-width: 576px){

  .datahubBox .comList{margin-left: 0;}

}

/* Flow Management */
.flowmanagementBox .imgBox{margin-bottom: 24px;}

/* NEWS */
.newsList{margin-bottom: 72px; display: flex; justify-content: center; flex-wrap: wrap; gap: 48px 1.5%;}
.newsList li{width: 32.3%;}
.newsList li a{position: relative; display: block; box-shadow: 0 10px 15px rgba(0,0,0,.1);}
.newsList li a:hover .imgBox img{transform: scale(1.2);}
.newsList li a h3{height: 120px; align-items: center; padding: 25px 20px 25px 24px; background-color: #F0F7FF; border: 1px solid #E7E7E7; }
  .newsList li a h3 span{font-size: 24px; color: #1E1F1E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.newsList li a .imgBox{position: relative; padding-top: 86%; overflow: hidden;}
.newsList li a .imgBox img{position: absolute; top:0; left:0; right:0; bottom: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: all 1.2s;}
.newsList li a:hover h3 span{text-decoration: underline;}
.newsList li a .view{padding: 0 19px; display: flex; align-items: center; justify-content: flex-end; height: 60px; position: absolute; left: 0; right:0; bottom: 0; background-color: rgba(0, 0, 0, 0.5);}
.newsList li a .view span{display: flex; gap: 0 7px; align-items: center; font-size: 18px; color: #fff; }
.newsList li a .view span::after{content: ''; width: 25px; height: 10px; background: url(../images/sub/news/arrow_icon01.svg)no-repeat center;}

@media (max-width: 1199px){

  .newsList{gap: 40px 1.5%;}
  .newsList li a h3{height: 100px; padding: 19px 20px;}
  .newsList li a h3 span{ font-size: 20px;}
  .newsList li a .view{height: 50px;}
  .newsList li a .view span{font-size: 15px;}
  .newsList li a .view span::after{width: 18px; height: 7px; background-size: contain;}

}

@media (max-width: 1024px){

  .newsList{gap: 20px 1.5%; margin-bottom: 25px;}
  .newsList li{width: 49.2%;}

}

@media (max-width: 576px){

    .newsList li{width: 100%;}

}

/* Contact */
.contactBox .layoutBox{display: flex; align-items: center; gap: 0 125px;}
.contactBox .infoBox .box{margin-bottom: 72px;}
.contactBox .infoBox .box:last-child{margin-bottom: 0;}
.contactBox .infoBox .box h3{flex-shrink: 0; margin-bottom: 16px; width: 197px; height: 47px; line-height: 47px; border-radius: 4px; background-color: #97A3B2; color:#fff; font-size: 18px; text-align: center;}
.contactBox .infoBox .box address,
.contactBox .infoBox .box .list li{margin-left: 15px; color: #1E1F1E;}
.contactBox .mapBox{flex-shrink: 0; width: 747px; height: 392px; border-radius: 8px; border: 1px solid #e7e7e7; overflow: hidden;}
.contactBox .mapBox iframe{width: 100%; height: 100%;}

@media (max-width: 1199px){

  .contactBox .infoBox .box{margin-bottom: 60px;}
  .contactBox .infoBox .box h3{margin-bottom: 14px; width: 165px; height: 33px; line-height: 33px; font-size: 15px;}
  .contactBox .layoutBox{gap: 0 86px;}
  .contactBox .mapBox{width: 623px; height: 327px;}
  .contactBox .infoBox .box address,
  .contactBox .infoBox .box .list li{margin-left: 13px; font-size: 14px;}
  .contactBox .infoBox .box address br{display: none;}

}

@media (max-width: 1024px){

  .contactBox .infoBox{width: 100%;}
  .contactBox .infoBox .box h3{margin-bottom: 0;}
  .contactBox .infoBox .box{margin-bottom: 36px; display: flex; gap: 0 14px;}
  .contactBox .layoutBox{flex-direction: column; gap: 36px 0;}
  .contactBox .mapBox{width: 100%; height: 339px;}
  .contactBox .infoBox .box address{padding-top: 7px;}

}

@media (max-width: 576px){
  
  .contactBox .infoBox .box{flex-direction: column; gap: 14px 0;}
  .contactBox .infoBox .box address{padding-top: 0;}

}

@media (max-width: 414px){

    .contactBox .mapBox{height: 172px;}

}