<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>하나카드</title>
<!-- style -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<ul class="list1">
<li class="green"><a href="#">개인</a></li>
<li><a href="#">기업</a></li>
<li><a href="#">가맹점</a></li>
</ul>
<ul class="list2">
<li class="log"><a href="#">로그인</a></li>
<li><a href="#">상품공시실</a></li>
<li><a href="#">금융소비자보호</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
</div>
</div>
<!-- //header -->
<div id="banner">
</div>
<!-- //banner -->
<div id="contents">
<div id="cont1">
<div class="container">cont1</div>
</div>
<!-- //cont1 -->
<div id="cont2">
<div class="container">cont2</div>
</div>
<!-- //cont2 -->
</div>
<!-- //contents -->
<div id="footer">
<div id="footer_notice">
<div class="container">footer_notice</div>
</div>
<!-- //footer_notice -->
<div id="footer_info">
<div class="container">footer_info</div>
</div>
<!-- //footer_info -->
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
/* layout */
#wrap {width: 100%; }
#header {background-color: #fff;}
#banner {width: 100%; height: 470px; background-color: #888;}
#contents {}
#footer {}
/* container */
.container {width: 1200px; margin: 0 auto; /*background-color: rgba(0,0,0,0.4)*/;}
/* cont layout */
#cont1 {width: 100%; height: 940px; background-color: #f5f6f8;}
#cont2 {width: 100%; height: 555px; background-color: #efefef;}
/* footer lyaou */
#footer_notice {width: 100%; height: 71px; background-color: #fff;}
#footer_info {width: 100%; height: 242px; background-color: #f7f8f9;}
/* header */
.header {overflow: hidden; font-family: "hanaB";}
.header li {background: url(../img/bar1.gif) no-repeat 0 14px; background-size: 1px;}
.header li a {display: block; padding: 3px 15px 1px 15px; font-size: 13px; margin: 7px 0;}
.header .list1 {float: left; overflow: hidden;}
.header .list1 li {float: left; }
.header .list1 li.green a {background: #00907f; color:#fff; border-radius: 3px; }
.header .list1 li a {color: #333;}
.header .list2 {float: right; overflow: hidden;}
.header .list2 li {float: left;}
.header .list2 li:last-child a {padding-right: 0;}
.header .list2 li.log {margin-right: 13px;}
.header .list2 li.log a {border: 1px solid #ccc; border-radius: 3px; padding: 3px 10px 1px 10px;}
.header .list2 li a {color: #797979;}
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, form, input,legend, textarea, select, fieldset, p, button {margin: 0; padding: 0;}
/* 링크 초기화 */
a {color: #273743; text-decoration: none;}
a:hover {color: #390;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family: "나눔 고딕", "Nanum Gothic", "돋움", Dotum, sans-serif; font-size: 12px; line-height: 1.7; }
/* 제목 스타일 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 12px; font-weight: normal;}
/* 블릿기호 초기화 */
li, ol, ul {list-style: none;}
/* ir 효과 */
.ir {width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0; top: 0;}
/* 이탤릭체 초기화 */
em, address {font-style: normal;}
/* 테두리 초기화 */
img, fieldset {border:0;}
/* padding, margin setting */
.pt00 {padding-top: 0px !important;}
.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}
.pl00 {padding-left: 0px !important;}
.pl05 {padding-left: 5px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pl35 {padding-left: 35px !important;}
.pl40 {padding-left: 40px !important;}
.pl45 {padding-left: 45px !important;}
.pl50 {padding-left: 50px !important;}
.pl55 {padding-left: 55px !important;}
.pl60 {padding-left: 60px !important;}
.pr00 {padding-right: 0px !important;}
.pr05 {padding-right: 5px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}
.pr30 {padding-right: 30px !important;}
.pr35 {padding-right: 35px !important;}
.pr40 {padding-right: 40px !important;}
.pr45 {padding-right: 45px !important;}
.pr50 {padding-right: 50px !important;}
.pr55 {padding-right: 55px !important;}
.pr60 {padding-right: 60px !important;}
.pb00 {padding-bottom: 0px !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 45px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb55 {padding-bottom: 55px !important;}
.pb60 {padding-bottom: 60px !important;}
.mt00 {margin-top: 0px !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}
.ml00 {margin-left: 0px !important;}
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml55 {margin-left: 55px !important;}
.ml60 {margin-left: 60px !important;}
.mr00 {margin-right: 0px !important;}
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr55 {margin-right: 55px !important;}
.mr60 {margin-right: 60px !important;}
.mb00 {margin-bottom: 0px !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}
728x90
