<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>물공급시설</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
}
#wrap {
margin: 0 auto;
padding-top: 45px;
width: 810px;
}
#wrap h1{
font-size: 40px;
color: #017eba;
}
#wrap .intro {
margin: 20px 0px 30px;
padding: 20px;
width: 810px;
background-color: #eee;
}
.contents {
width: 810px;
}
.contents::after{
content: "";
clear: both;
display: block;
}
.contents h2 {
padding: 16px;
font-size: 15px;
text-align: center;
color: #fff;
background-color: #017eba;
}
/* .contents img {
width: 320px;
height: 234px;
} */
.contents p {
padding: 10px 15px 15px;
text-align: left;
}
.leftBiz {
padding-bottom: 25px;
text-align: center;
width: 390px;
float: left;
border: 1px solid #eee;
}
.rightBiz {
padding-bottom: 25px;
text-align: center;
width: 390px;
float: right;
border: 1px solid #eee;
}
#wrap table {
margin-top: 30px;
width: 100%;
border-collapse: collapse;
border-top: 3px solid #017eba;
text-align: center;
}
#wrap th {
padding: 10px;
border: 1px solid #ddd;
color: #017eba;
background-color: #f2f8fb;
}
#wrap td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<!-- h1, p ,div::after(div(h2, p, img, float(left,right))), table -->
<div id="wrap">
<h1>건강한 물공급시설</h1>
<p class="intro">
K-water는 물순환체계를 고려한 용수공급 시스템을 구축하여 물 공급의
신뢰도 향상에 지속적으로 노력하고 있습니다.
</p>
<div class="contents">
<div class="leftBiz">
<h2>광역 및 공업용수사업</h2>
<p>
전국 48개 광역 및 공업용수도 시설은 구축하고, 41개소의 정수장과
5,090Km의 관로를 통해 전국 2,223만명의 국민들에게 수돗물을 공급하고 있습니다.
</p>
<img src="./images/supply_01.jpg" alt="supply image_1">
</div>
<div class="rightBiz">
<h2>하수처리사업</h2>
<p>
하천 수질개선 및 공공위생 향상 등 국민 생활환경 개선을 위하여
전국 12개 지자체의 하수처리 시설을 건설 · 운영관리하여 지역의 실질적
혜택 증대를 도모하고 있습니다.
</p>
<img src="./images/supply_02.jpg" alt="supply image_2">
</div>
</div> <!-- contents end -->
<table>
<tbody>
<tr>
<th rowspan="2">시설용량 <br>(m<sup>3</sup>/일)</th> <th colspan="5">관리시설</th>
</tr>
<tr>
<th>계</th> <th>하수처리시설</th> <th>소규모시설</th> <th>공업용수도시설</th> <th>기타시설</th>
</tr>
<tr>
<td>1,249,675</td> <td>52</td> <td>18</td> <td>23</td> <td>3</td> <td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.