<!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">
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/font-awesome.css">
<!-- script -->
<script src="js/ie-checker.js"></script>
</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 class="container">
<div class="ban_right">
<div class="br_tit">
<h3>VIVA G platinum<br> 체크카드</h3>
<p>홈페이지/모바일웹에서 카드를 최초로 발급하시면<br><strong>연회비 100% 캐쉬백!</strong></p>
<div class="login_btn">
<ul>
<li class="lb1"><a href="#">로그인</a></li>
<li class="lb2"><a href="#">회원가입</a></li>
</ul>
</div>
</div>
<div class="br_btn">
<ul>
<li><a href="#">이용대금명세서</a></li>
<li><a href="#">결제예정금액</a></li>
<li><a href="#">카드이용내역</a></li>
<li><a href="#">한도상향</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- //banner -->
<div id="contents">
<div id="cont1">
<div class="container">
<nav id="nav">
<ul class="gnb">
<li><a href="#">마이페이지</a></li>
<li><a href="#">카드</a></li>
<li><a href="#">금융</a></li>
<li><a href="#">혜택</a></li>
<li><a href="#">라이프</a></li>
<li><a href="#">모바일</a></li>
<li><a href="#">고객센터</a></li>
</ul>
<ul class="gnb_right">
<li class="gr1"><a href="#">간편서비스</a></li>
<li class="gr2"><a href="#">전체메뉴<span></span></a></li>
</ul>
<a href="#" class="gnb_search"><span class="ir">통합검색</span><i class="ir">레이어팝업 열림</i></a>
<a href="#" class="gnb_event">Event <i class="fa fa-plus" aria-hidden="true"></i></a>
</nav>
<!-- //nav -->
<div id="card"></div><!-- //card -->
<div id="event"></div><!-- //event -->
</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>
@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
/* font-family: "Noto Sans KR", sans-serif; 100,300,400,500,700,900 */
/* layout */
#wrap {width: 100%; }
#header {background-color: #fff;}
#banner {width: 100%; height: 470px; background-color: #a0d1ee;}
#contents {}
#footer {}
/* container */
.container {width: 1200px; margin: 0 auto; position: relative; /* 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;}
.header li a {display: block; padding: 8px 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:first-chlid {}
.header .list2 li:last-child a {padding-right: 0;}
.header .list2 li.log {margin-right: 13px; background:none;}
.header .list2 li.log a {border: 1px solid #ccc; border-radius: 3px; padding: 3px 10px; margin: 11px 0;}
.header .list2 li a {color: #797979;}
/* ban_right */
.ban_right {width: 600px; position: absolute; right: 0; top: 50px; }
.ban_right .br_tit {background: #fff; height: 160px; padding: 45px 180px 60px 100px }
.ban_right .br_tit h3 {font-size: 36px; letter-spacing: -1px; line-height: 44px; font-weight: 700;}
.ban_right .br_tit p {position: relative; padding-top: 50px; font-size: 14px; }
.ban_right .br_tit p:before {content: ''; width: 30px; height: 2px; background-color: #00907f; position: absolute; left: 0; top: 24px;}
.ban_right .br_tit p strong {color: #00907f; }
.ban_right .br_tit .login_btn {position: absolute; right: 60px; top: 55px; }
.ban_right .br_tit .login_btn li {margin-bottom: 1px; }
.ban_right .br_tit .login_btn li a {width: 80px; height: 80px; display: block; text-align: center; color:#fff; font-size: 14px; }
.ban_right .br_tit .login_btn li.lb1 a {background: #db3360 url(../img/ico_login.png) no-repeat center 17px; padding-top: 50px; height: 30px; transition: background 0.3s ease;}
.ban_right .br_tit .login_btn li.lb1 a:hover {background-color: #c4204c;}
.ban_right .br_tit .login_btn li.lb2 a {background-color: #3c3f44; line-height: 80px; transition: background 0.3s ease;}
.ban_right .br_tit .login_btn li.lb2 a:hover {background-color: #333;}
.ban_right .br_btn { background-color: #00907f; height: 50px; margin-top: 25px;}
.ban_right .br_btn ul {overflow: hidden; }
.ban_right .br_btn li {position: relative; float: left; width: 25%; text-align: center; line-height: 50px; color: #fff; font-size: 14px; }
.ban_right .br_btn li:before {content: ''; width: 1px; height: 14px; background-color: #62bdb1; position: absolute; left: 0; top: 19px;}
.ban_right .br_btn li a {color:#fff; font-weight: 500; }
.ban_right .br_btn li:first-child:before {width:0; height: 0;}
/* nav */
#nav {width: 100%; background: #fff; position: absolute; left: 0; top: -50px; font-family: 'HanaB'; padding: 30px 0;}
#nav .gnb {padding-left: 60px;}
#nav .gnb li {display: inline; padding: 10px; }
#nav .gnb li a {font-size: 17px; padding: 10px 16px; display: inline-block; transition: all 0.3s ease;}
#nav .gnb li a:hover {background-color: #00907f; color: #fff; border-radius: 3px;}
#nav .gnb_right {position: absolute; right: 50px; top: 30px; }
#nav .gnb_right {overflow: hidden;}
#nav .gnb_right li {float: left; margin-right: 10px; }
#nav .gnb_right li a {display: block; padding: 11px 20px; font-size: 14px; }
#nav .gnb_right li.gr1 a {border: 1px solid #e1e1e1; border-radius: 3px; transition: all 0.3s ease;}
#nav .gnb_right li.gr1 a:hover {background-color: #f4f4f4; color: #000;}
#nav .gnb_right li.gr2 a {border: 1px solid #404b57; background-color:#404b57; color:#fff; border-radius: 3px; transition: all 0.3s ease;}
#nav .gnb_right li.gr2 a:hover {background-color: #000;}
#nav .gnb_search {position: absolute; right: 290px; top: 25px; background: url(../img/gnb_search.png) no-repeat; display: block; width: 50px; height: 50px; }
#nav .gnb_event {position: absolute; left: 20px; top: -30px; width: 100px; height: 30px; line-height: 30px; background-color: #000; color: #fff; text-transform: uppercase; font-size: 14px;}
/* card */
#card { }
/* event */
#event { }
@charset "UTF-8";
/* 여백 초기화 */
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: "Noto Sans KR","나눔 고딕","Nanum Gothic","Malgun Gothic","맑은 고딕","돋움", Dotum, sans-serif; font-size: 12px; }
/* 제목 스타일 초기화 */
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;}
/* 폰트 굵기 초기화 */
strong {font-weight: normal;}
/* 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;}
@font-face {
font-family: 'HanaB';
src: url('../font/HanaB.eot');
src: url('../font/HanaB.eot?#iefix') format('embedded-opentype'),
url('../font/HanaB.woff2') format('woff2'),
url('../font/HanaB.woff') format('woff'),
url('../font/HanaB.ttf') format('truetype'),
url('../font/HanaB.svg#HanaB') format('svg');
font-weight: normal;
font-style: normal;
}
728x90
