11-03_float-정책꾸러미.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-03_float-정책꾸러미</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: green;
	font-weight: bold;
}
/* policy */
.policy {
	border: 1px solid silver;
	width: 500px;
	height: 260px;
	position: relative;
	margin: 20px auto;
	padding: 10px;
	background: url(../../float_image/cast_background.gif) repeat-x 0 0;
	background-size: 500px 40px;
}
.policy_title {
	margin-bottom: 20px;
}
.policy_title img {
	height: 16px;
}
.policy_img {
	float: left;
	padding-left: 4px;
}
.policy_img img {
	border: 1px solid gray;
}

.policy_txt {
	float: right;
	width: 340px;
}
.policy_txt h3 {
	font-size: 16px;
	color: #0881d2;
	margin-bottom: 4px;
}
.policy_txt li{
	background: url(../../image/float_image/cast_list.gif) no-repeat 10px 50%;
	font-size: 14px;
	text-indent: 20px;
	line-height: 20px;
}
.policy_txt li a {
	color: #555555;
}

.more {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 14px;
	color: #555555;
}

</style>
</head>
<body>
	<h2>float 정책꾸러미</h2>
	<br>
	<div class="policy">
		<h3 class="policy_title"><img src="../../image/float_image/cast_title.gif"></h3>
		<p class="policy_img"><img src="../../image/float_image/cast_img.gif"></p>
		<div class="policy_txt">
			<h3>우측통행 실시</h3>
			<ul>
				<li><a href="#">우측보행, 7월 1일부터 본격 시행</a></li>
				<li><a href="#">안전한 보행방법 우측보행 홍보동영상</a></li>
				<li><a href="#">우측보행이 교통안전, 보행효율 면에...</a></li>
				<li><a href="#">시범시행 중인 "우측보행" 호응도 ...</a></li>
			</ul>
			<p class="more"><a href="#">더보기</a></p>
		</div>
	</div>
</body>
</html>