@charset "utf-8";
#sh_content {
  padding: 0 0 0 0 !important;
}
/* =========================== PAGE */

.pagecommon{position:relative;padding-bottom:100px;font-size:15px;line-height:1.5;color:#777}
.pagecommon .pl{white-space:pre-line;font-size: 18px;font-weight: 400;}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);margin:0 auto}

#business1017 h1{margin-bottom:20px;font-size:35px;font-weight:700;color:#111}
#business1017 .info{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
#business1017 .info dl{padding:40px 30px;border-radius:13px;background:#e9f6fb}
#business1017 .info dt{margin-bottom:10px;font-size:16px;font-weight:700;color:#111}

#business1017 .cont{margin-top:100px}
#business1017 .st_mn{position:sticky;top:-1px;z-index:10;box-shadow:1px 8px 12px 1px rgba(0,0,0,5%);background:#fff}
#business1017 .st_mn ul{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:100px;text-align:center}
#business1017 .st_mn li{padding:30px 0;font-size:20px;font-weight:700;color:#111;cursor:pointer}
#business1017 .st_mn .on{border-bottom:2px solid var(--primary);color:var(--primary)}

#business1017 .box+.box{margin-top:200px}
#business1017 .box>div+div{margin-top:100px}
#business1017 .box .img_area{display:flex;align-items:center;gap:100px}
#business1017 .box .img_area>div{width:50%}
#business1017 .box .img_area img{border-radius:20px}
#business1017 .box .img_area {
  display: flex;
  align-items: center;
  gap: 100px;
  flex-direction: row; /* PC에서는 가로 방향 */
}
#business1017 .box .img_area h2{font-size:25px;font-weight: 700;color:#f77e01}
#business1017 .box .img_area h3{font-size:25px;font-weight: 700;color:#000000}
#business1017 .box h2{margin-bottom:20px;font-size:22px;font-weight:700;color:#424242}
#business1017 .box h3{padding:50px 0 40px 0;font-size:24px;font-weight:700;color:#111}

#business1017 .box .list div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#business1017 .box .list dl{padding:40px;border-radius:13px;background:#f2f2f2}
#business1017 .box .list dt{margin-bottom:10px;font-size:18px;font-weight:600;color:#111}
#business1017 .box .list dd{font-size:16px;font-weight:400;color:#676767}
#business1017 .box .list dd:before{display:inline-block;content:'';width:3px;height:3px;margin-right:10px;vertical-align:4px;background:#777}

#business1017 .box .list_out div {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
}

#business1017 .box .list_out dl {
  width: 1600px;
  padding: 0; /* 내부 여백 제거 (필요시 다시 조정) */
  border-radius: 13px;
  background: #f2f2f2;
  overflow: hidden; /* 내용 넘침 방지 */
}

#business1017 .box .list_out dt {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

#business1017 .box .list_out dl img {
  width: 100%;
  height: auto; /* 배율 유지 */
  display: block;
}

#business1017 .box .list_out dd.monitoring-caption {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #737373;
  padding: 15px 0;
  background-color: #f2f2f2;
  letter-spacing: -0.3px;
}


#business1017 .box .mrt ul{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
#business1017 .box .mrt li+li{border-left:1px solid #e1e1e1}
#business1017 .box .mrt dt{margin:20px 0 10px;font-size:20px;font-weight:500;color:#5d5d5d}
#business1017 .box .mrt dd{white-space:pre-line}
#business1017 .box .mrt h3{text-align: center;margin-bottom: 30px}

#business1017 .monitoring-desc {
  font-size: 16px;
  color: #555;
  text-align: center;
  line-height: 1.8;
  margin-top: -50px;
  margin-bottom: 80px;
}

@media(max-width:1024px){
.pagecommon .inner{padding:0 15px}
#business1017 h1{font-size:30px}
#business1017 .st_mn ul{padding:0}
#business1017 .st_mn li{font-size:18px}
#business1017 .box+.box{margin-top:150px}
#business1017 .box>div+div{margin-top:50px}
#business1017 .box .img_area img{width:50%}
#business1017 .box .img_area{gap:50px}
#business1017 .box .list dl{padding:30px}
}
@media(max-width:768px){
.pagecommon .pl{white-space:normal}
#business1017 h1{font-size:27px}
#business1017 .st_mn li{padding:20px 0;font-size:16px}

#business1017 .info{display:block}
#business1017 .info dl{padding:25px}
#business1017 .info dl+dl{margin-top:5px}
#business1017 .info dt{margin-bottom:5px}

#business1017 .box .img_area img{width:100%}
#business1017 .box .img_area{display:block;gap:0px !important}
#business1017 .box .img_area>div{width:100%;margin-top:20px}
 #business1017 .box .img_area {
    display: flex;
    flex-direction: column; /* 모바일에서는 세로 방향 (이미지가 위로 감) */
  }

  #business1017 .box .img_area img {
    order: -1; /* 이미지를 가장 위로 올림 */
  }

  #business1017 .box .img_area > div {
    margin-top: 0px !important;
  }
#business1017 .box h2{margin-bottom:10px;font-size:20px}
#business1017 .box h3{font-size:18px}

#business1017 .box .mrt li{padding:0 20px}
#business1017 .box .mrt dd{white-space:normal}
}
@media(max-width:480px){
#business1017 h1{font-size:23px}
#business1017 .box+.box{margin-top:80px}
#business1017 .box h3{margin-bottom:10px}
#business1017 .cont{margin-top:50px}
#business1017 .st_mn li{padding:15px 0;font-size:14px}
#business1017 .box .list div{display:block}
#business1017 .box .list div dl+dl{margin-top:10px}
#business1017 .box .mrt ul{display:block}
#business1017 .box .mrt li{padding:25px;border:1px solid #e1e1e1;border-radius:13px}
#business1017 .box .mrt li+li{margin-top:10px}
}
@media(max-width:380px){
}
