<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="uuiiop132" /> <meta name="description" content="웹 표준을 준수한 사이트 제작 수업입니다." /> <meta name="keywords" content="웹스토리보이,웹퍼블리셔,웹표준,웹접근성" /> <title>webstandard</title> <!-- style --> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- webfont --> <link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' /> <link href='http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' rel='stylesheet' type='text/css' /> <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet" /> </head> <body> <div id="wrap"> <div id="header"> <div class="container"> <div class="qucik"> <a href="#">Designer cafe 디자이너 카페</a> <a href="#">Publisher cafe 퍼블리셔 카페</a> </div> <div class="title"> <h1><a href="http://uuiiop132.dothome.co.kr">uuiiop132.dothome.co.kr</a></h1> <p>Can see the Future, Only dream</p> </div> <div class="icon"> <ul> <li class="icon_tit1"><a href="#"><span class="ir">아이콘1</span></a></li> <li class="icon_tit2"><a href="#"><span class="ir">아이콘2</span></a></li> <li class="icon_tit3"><a href="#"><span class="ir">아이콘3</span></a></li> <li class="icon_tit4"><a href="#"><span class="ir">아이콘4</span></a></li> </ul> </div> </div> </div> <!-- header --> <div id="contents"> <div id="cont-nav"> <div class="container"> <div class="nav"> <div> <h3>Layout</h3> <ul> <li><a href="#">layout유형1</a></li> <li><a href="#">layout유형2</a></li> <li><a href="#">layout유형3</a></li> <li><a href="#">layout유형4</a></li> <li><a href="#">layout유형5</a></li> <li><a href="#">layout유형6</a></li> <li><a href="#">layout유형7</a></li> <li><a href="#">layout유형8</a></li> <li><a href="#">layout유형9</a></li> <li><a href="#">layout유형10</a></li> <li><a href="#">layout유형11</a></li> <li><a href="#">layout유형12</a></li> <li><a href="#">layout유형13</a></li> <li><a href="#">layout유형14</a></li> <li><a href="#">layout유형15</a></li> <li><a href="#">layout유형16</a></li> </ul> </div> <div> <h3>Basic</h3> <ul> <li><a href="#">Basic1</a></li> <li><a href="#">Basic2</a></li> <li><a href="#">Basic3</a></li> <li><a href="#">Basic4</a></li> <li><a href="#">Basic5</a></li> <li><a href="#">Basic6</a></li> <li><a href="#">Basic7</a></li> <li><a href="#">Basic8</a></li> <li><a href="#">Basic9</a></li> <li><a href="#">Basic10</a></li> <li><a href="#">Basic11</a></li> <li><a href="#">Basic12</a></li> <li><a href="#">Basic13</a></li> <li><a href="#">Basic14</a></li> <li><a href="#">Basic15</a></li> <li><a href="#">Basic16</a></li> </ul> </div> <div class="last"> <h3>Tutirial</h3> <ul> <li><a href="#">Tutirial 유형1</a></li> <li><a href="#">Tutirial 유형2</a></li> <li><a href="#">Tutirial 유형3</a></li> <li><a href="#">Tutirial 유형4</a></li> <li><a href="#">Tutirial 유형5</a></li> <li><a href="#">Tutirial 유형6</a></li> <li><a href="#">Tutirial 유형7</a></li> <li><a href="#">Tutirial 유형8</a></li> </ul> </div> </div> </div> </div> <!-- cont-nav --> <div id="cont-tit"> <div class="container"> <div class="tit"> <h2>“나는 김소진이다”</h2> <span class="btn"><a href="#"><span class="ir">전체메뉴버튼</span></a> </span> </div> </div> </div> <!-- cont-tit --> <div id="cont-ban"> <div class="container"> <div class="ban"> <p class="ban-prev"><a href="#"><span class="ir">이전이미지</span></a></p> <ul> <li> <a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서" /></a> </li> <li> <a href="#"><img src="img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기" /></a> </li> <li> <a href="#"><img src="img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기" /></a> </li> </ul> <p class="ban-next"><a href="#"><span class="ir">다음이미지</span></a></p> </div> </div> </div> <!-- cont-ban --> <div id="cont-cont"> <div class="container"> <div class="cont"> <div class="box column1"> <h3><span class="ico-img ir">아이콘 이미지</span> <span class="ico-tit">Notice</span></h3> <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p> <!-- notice --> <div class="notice"> <h4>Graphic Design</h4> <ul> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a></li> </ul> <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a> </div> <!-- //notice --> <!-- notice2 --> <div class="notice2 mt20"> <h4>Graphic Design2</h4> <ul> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a> <span class="time">2017-06-29</span></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a> <span class="time">2017-06-29</span></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a> <span class="time">2017-06-29</span></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a> <span class="time">2017-06-29</span></li> <li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안 입니다.</a> <span class="time">2017-06-29</span></li> </ul> <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a> </div> <!-- //notice2 --> </div> <!-- //column1 --> <div class="box column2"> <h3><span class="ico-img ir">아이콘 이미지</span> <span class="ico-tit">Notice</span> </h3> <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p> <!-- notice3 --> <div class="notice3"> <h4>Notice Image</h4> <ul> <li> <a href="#"> <img src="img/tex_img.jpg" alt="이미지1" /> <strong>브라우저 테스트</strong> <em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em> </a> </li> <li> <a href="#"> <img src="img/tex_img.jpg" alt="이미지1" /> <strong>브라우저 테스트</strong> <em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em> </a> </li> <li> <a href="#"> <img src="img/tex_img.jpg" alt="이미지1" /> <strong>브라우저 테스트</strong> <em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em> </a> </li> <li> <a href="#"> <img src="img/tex_img.jpg" alt="이미지1" /> <strong>브라우저 테스트</strong> <em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em> </a> </li> </ul> <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a> </div> <!-- //notice3 --> </div> <!-- //column2 --> <div class="box column3"> <h3><span class="ico-img ir">아이콘 이미지</span> <span class="ico-tit">Notice</span> </h3> <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p> <!-- login --> <div id="login-wrap"> <h4 class="ir">로그인</h4> <div id="login-header"> <h5 class="ir">로그인 설정</h5> <ul class="login_level"> <li><a href="#"><img src="img/btn_security1_on.gif" alt="보안1단계" /></a></li> <li><a href="#"><img src="img/btn_security2_off.gif" alt="보안2단계" /></a></li> <li><a href="#"><img src="img/btn_security3_off.gif" alt="보안3단계" /></a></li> </ul> <h5 class="ir">로그인 안내</h5> <ul class="login_info"> <li class="info">보안 <img src="img/h_security1_txt.gif" alt="1" /> 단계</li> <li class="ip">IP보안 <span>on</span></li> </ul> </div> <div id="login-contents"> <h5 class="ir">로그인</h5> <form action="#" method="post"> <fieldset> <legend class="ir">보안1단계</legend> <dl> <dt><label for="uid">아이디</label></dt> <dd><input type="text" id="uid" maxlength="12" title="아이디" class="input_text" /></dd> <dt><label for="upw">비밀번호</label></dt> <dd><input type="password" id="upw" maxlength="16" title="비밀번호" class="input_text" /></dd> </dl> <p class="keep"> <input type="checkbox" id="keeping" class="input_check" /> <label for="keeping">아이디저장</label> <input type="image" src="img/btn_login.gif" alt="로그인" class="submit" /> </p> </fieldset> </form> </div> <div id="login-footer"> <h5 class="ir">문제 해결</h5> <ul> <li><a href="#">회원가입</a></li> <li><a href="#">아이디</a> / <a href="#">비밀번호</a></li> </ul> </div> </div> <!-- //login --> <!-- Advertisement --> <div class="ad"> <h4>Advertisement</h4> <ul> <li> <a href="#"><img src="img/h_banner1.jpg" alt="광고배너1" /></a> </li> <li> <a href="#"><img src="img/h_banner2.jpg" alt="광고배너2" /></a> </li> <li> <a href="#"><img src="img/h_banner3.jpg" alt="광고배너3" /></a> </li> </ul> <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a> </div> <!-- //Advertisement --> </div> <!-- //column3 --> <div class="box column4"> <h3><span class="ico-img ir">아이콘 이미지</span> <span class="ico-tit">Notice</span> </h3> <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p> <!-- notice-hover --> <div class="notice-hover"> <h4>Notice-Hover</h4> <ul> <li> <a href="#"> <span><img src="img/h_banner1.jpg" alt="배너1" /><em>Mouse-Hover</em></span> <strong>이미지 제목</strong> </a> </li> <li> <a href="#"> <span><img src="img/h_banner1.jpg" alt="배너1" /><em>Mouse-Hover</em></span> <strong>이미지 제목</strong> </a> </li> <li> <a href="#"> <span><img src="img/h_banner1.jpg" alt="배너1" /><em>Mouse-Hover</em></span> <strong>이미지 제목</strong> </a> </li> </ul> <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a> </div> <!-- //notice-hover --> <!-- notice-hover2 --> <div class="notice-hover2"> <h4></h4> <ul> <li> <a href="#"> <span><img src="img/h_banner2.jpg" alt="배너2" /><em>Mouse-Hover</em></span> <strong>이미지 제목</strong> </a> </li> <li> <a href="#"> <span><img src="img/h_banner2.jpg" alt="배너2" /><em>Mouse-Hover</em></span> <strong>이미지 제목</strong> </a> </li> <li> <a href="#"> <span><img src="img/h_banner2.jpg" alt="배너2" /><em>Mouse-Hover</em></span> <strong>이미지 제목</strong> </a> </li> </ul> <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a> </div> <!-- //notice-hover2 --> </div> <!-- //column4 --> <div class="box column5"> <h3><span class="ico-img ir">아이콘 이미지</span> <span class="ico-tit">Notice</span> </h3> <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p> <!-- tab-menu --> <div class="tab-menu"> <h4 class="ir">공지사항 탭 메뉴</h4> <ul> <li class="active"><a href="#">공지사항1</a> <ul style=""> <li><a href="#">첫번째 탭의 공지사항1 입니다.</a></li> <li><a href="#">첫번째 탭의 공지사항1 입니다.</a></li> <li><a href="#">첫번째 탭의 공지사항1 입니다.</a></li> </ul> </li> <li><a href="#">공지사항2</a> <ul style="display:none;"> <li><a href="#">두번째 탭의 공지사항2 입니다.</a></li> <li><a href="#">두번째 탭의 공지사항2 입니다.</a></li> <li><a href="#">두번째 탭의 공지사항2 입니다.</a></li> </ul> </li> <li><a href="#">공지사항3</a> <ul style="display:none;"> <li><a href="#">세번째 탭의 공지사항3 입니다.</a></li> <li><a href="#">세번째 탭의 공지사항3 입니다.</a></li> <li><a href="#">세번째 탭의 공지사항3 입니다.</a></li> </ul> </li> </ul> </div> <!-- //tab-menu --> <!-- notice4 --> <div class="notice4"> <h4>최신<em>공지사항</em></h4> <ul> <li><a href="#">동물들도 증명사진 찍는거 아시나요?</a> <span class="time">2017-06-29</span> </li> <li><a href="#">동물들도 증명사진 찍는거 아시나요?</a> <span class="time">2017-06-29</span> </li> <li><a href="#">동물들도 증명사진 찍는거 아시나요?</a> <span class="time">2017-06-29</span> </li> </ul> <a href="#" title="더보기" class="more"><span>더보기</span></a> </div> <!-- /notice4 --> </div> <!-- //column5 --> <div class="box column6"> <h3><span class="ico-img ir">아이콘 이미지</span> <span class="ico-tit">Notice</span> </h3> <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p> <!-- gallery --> <div class="gallery"> <h4>Gallery</h4> <div class="gallery_btn"> <ul> <li><a href="#"><img src="img/btn_play_on.gif" alt="재생" /></a></li> <li><a href="#"><img src="img/btn_stop_off.gif" alt="정지" /></a></li> <li><a href="#"><img src="img/btn_prev_off.gif" alt="이전 이미지" /></a></li> <li><a href="#"><img src="img/btn_next_off.gif" alt="다음 이미지" /></a></li> </ul> </div> <div class="gallery_img"> <ul> <li><a href="#"><img src="img/gallery_img1.jpg" alt="이미지1" /></a></li> <li><a href="#"><img src="img/gallery_img2.jpg" alt="이미지2" /></a></li> <li><a href="#"><img src="img/gallery_img3.jpg" alt="이미지3" /></a></li> <li><a href="#"><img src="img/gallery_img4.jpg" alt="이미지4" /></a></li> </ul> </div> </div> <!-- //gallery --> </div> <!-- //column6 --> </div> </div> </div> <!-- cont-cont --> </div> <!-- contents --> <div id="footer"> <div class="container"> <div class="footer"> <ul> <li><a href="#"><span>사이트 도움말</span></a></li> <li><a href="#">사이트 이용약관</a></li> <li><a href="#">사이트 운영원칙</a></li> <li><a href="#"><strong>개인정보 취급방침</strong></a></li> <li><a href="#">책임의 한계와 법적고지</a></li> <li><a href="#">게시중단요청서비스</a></li> <li><a href="#">고객센터</a></li> </ul> <address> <em>Copyright ©</em> <a href="http://uuiiop132.dothome.co.kr">uuiiop132.dothome.co.kr</a> <span>All Right Reserved</span> </address> <p style="padding-top:20px;"> <a href="http://validator.w3.org/check?uri=referer"> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="올바른 CSS입니다!" /> </a> </p> </div> </div> </div> <!-- footer --> </div> <!-- wrap --> </body> </html>
/* layout (전체영역) */ body{background: #f1f4fb url(../img/body_bg.gif);} #wrap { } #header {height: 327px; /*background-image:url(../img/header_bg.jpg); background-repeat:repeat-x; background-position:center top;*/ background: url(../img/header_bg.jpg) repeat-x center top; } #contents { } #footer { border-top: 1px solid #ccc; background-color: #edf0f5; margin-top: 30px;} /* container (가운데 영역) */ .container {position:relative; width: 990px;height:inherit; margin:0 auto; /*background-color: rgba(0,0,0,0.2);*/} /* contents-container(전체영역)*/ #cont-nav {background: url(../img/cont_nav_bg.png) repeat-x; display:none;} #cont-tit {background-color: #fff;} #cont-ban {background-color: #dceff7; } #cont-cont {} /*qucik*/ /*.qucik {text-align: right;} div.qucik {text-align: right;} .container div.qucik {text-align: right;} div.container div.qucik {text-align: right;} #header div.container div.qucik {text-align: right;} #wap div#header div.container div.qucik {text-align: right;} div#wap div#header div.container div.qucik {text-align: right;} */ .qucik {text-align: right;} .qucik a {color: #fff; padding-left:10px; padding-top:5px; display: inline-block;} .qucik a:hover {color: #ccc;} /*title*/ .title h1 {position: absolute; left: 400px; top: 150px; z-index: 100;} .title h1 a{background-color: #4aa8d4; font-size: 16px; color: #fff; padding: 7px 15px; text-transform: capitalize; display:block;} .title p {position: absolute; left: 230px; top: 100px; font-size: 28px; background-color: #2698cb; color: #fff; text-transform: uppercase; padding: 7px 15px; z-index: 10;font-family: 'Nixie One', cursive;} /*icon*/ .icon {position: absolute; left: 380px; top: 230px;} .icon ul {overflow: hidden;} .icon ul li {float:left; margin: 0 3px;} .icon ul li a {width: 57px;height: 57px; display:block; background-image: url(../img/icon.png);} .icon ul li.icon_tit1 a { } .icon ul li.icon_tit2 a {background-position: 0 -120px; } .icon ul li.icon_tit3 a {background-position: 0 -240px; } .icon ul li.icon_tit4 a {background-position: 0 -360px; } .icon ul li.icon_tit1 a:hover {background-position: 0 -60px; } .icon ul li.icon_tit2 a:hover {background-position: 0 -180px; } .icon ul li.icon_tit3 a:hover {background-position: 0 -300px; } .icon ul li.icon_tit4 a:hover {background-position: 0 -420px; } /*nav*/ .nav {overflow: hidden; padding:20px 0;} .nav div {float: left;width: 40%;} .nav div h3 {font-size: 18px; color:#25a2d0; font-weight: 600; } .nav div ul {overflow: hidden; } .nav div ul li { width: 50%; float:left; } .nav div ul li a{ color:#333; padding: 3px;} .nav div ul li a:hover { background-color: #1a96d0; color:#fff;} .nav div.last {width: 20%; } .nav div.last ul li{width: 100%;} /*tit*/ .tit {text-align:center;} .tit h2 {font-size: 39px; font-family: 'Nanum Brush Script';color:#2c94c4; letter-spacing:2px;} .tit .btn {position: absolute;right: 0;top: 5px;} .tit .btn a { width: 57px;height: 57px; display:block;background: url(../img/icon.png) 0 -540px;} /*ban*/ .ban {padding: 30px 0 25px 0;} .ban p {position: absolute; top: 65px;} .ban p a {width: 23px;height: 43px; display:block; background-image: url(../img/arrow.gif); } .ban p.ban-prev { left:-30px; } .ban p.ban-next { right:-30px; } .ban p.ban-prev a {background-position: 0 0; } .ban p.ban-prev a:hover { background-position:-23px 0; } .ban p.ban-next a {background-position: 0 -43px; } .ban p.ban-next a:hover {background-position: -23px -43px; } .ban ul {overflow: hidden;} .ban ul li {float:left; width: 330px; text-align: center; font-size: 0;} .ban ul li a img {border: 4px solid #dcdcdc;} .ban ul li a:hover img {border-color: #98bcbc;} /*cont*/ .cont {overflow: hidden; padding-top: 30px; } .cont .box {position:relative;width: 289px;height: 364px; float:left; margin:0 30px 30px 0; padding-right: 30px;} .cont .column1 {border-right: 1px solid #c8c8c8;} .cont .column2 {border-right: 1px solid #c8c8c8; } .cont .column3 {padding-right: 0; margin-right: 0;} .cont .column4 {border-right: 1px solid #c8c8c8;} .cont .column5 {border-right: 1px solid #c8c8c8;} .cont .column6 {padding-right: 0; margin-right: 0;} .cont .box .ico-img {width: 57px;height: 57px; display:block;background-image: url(../img/icon.png); position: absolute; left: 0;top: 6px; } .cont .box .ico-tit { padding-left: 67px;font-size: 18px;color:#2c94c4;} .cont .box .ico-desc { padding:0 0 15px 67px;margin-bottom: 15px;color:#878787; border-bottom: 1px solid #d0d0d0;} .cont .box.column1 .ico-img {background-position: 0 -600px;} .cont .box.column2 .ico-img {background-position: 0 -720px;} .cont .box.column3 .ico-img {background-position: 0 -840px;} .cont .box.column4 .ico-img {background-position: 0 -960px;} .cont .box.column5 .ico-img {background-position: 0 -1080px;} .cont .box.column6 .ico-img {background-position: 0 -1200px;} .cont .box.column1 .ico-img:hover {background-position: 0 -660px;} .cont .box.column2 .ico-img:hover {background-position: 0 -780px;} .cont .box.column3 .ico-img:hover {background-position: 0 -900px;} .cont .box.column4 .ico-img:hover {background-position: 0 -1020px;} .cont .box.column5 .ico-img:hover {background-position: 0 -1140px;} .cont .box.column6 .ico-img:hover {background-position: 0 -1260px;} /*notice*/ .notice {position: relative; } .notice h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom:3px; } .notice li {overflow: hidden; text-overflow:ellipsis; white-space:nowrap; background:url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;} .notice .more { position: absolute; right: 0; top: 5px;background:url(../img/more.png) no-repeat;width: 16px;height: 16px;display: block; } /*notice2*/ .notice2 {position: relative; } .notice2 h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom:3px; } .notice2 ul { } .notice2 li {overflow: hidden; } .notice2 li a {width: 65%; float:left;overflow: hidden; text-overflow:ellipsis; white-space:nowrap; background:url(../img/dot.gif)no-repeat 0 8px;padding-left: 8px;} .notice2 li .time { width: 30%; float:right; text-align:right;} .notice2 .more { position: absolute; right: 0; top: 5px;background:url(../img/more.png) no-repeat;width: 16px;height: 16px;display: block;} /*notice3*/ .notice3 {position: relative; } .notice3 h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom:3px; } .notice3 ul { } .notice3 li {position:relative; height: 53px; padding-left: 60px; padding: 5px 0 0 60px;} .notice3 li a img { position: absolute; left: 0;top: 0; border: 1px solid #390;} .notice3 li a strong {display: block; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;} .notice3 li a em {display: block; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;} .notice3 .more {position: absolute; right: 0; top: 5px;background:url(../img/more.png) no-repeat;width: 16px;height: 16px;display: block; } /*notice4*/ .notice4 {position: relative; border: 1px solid #ccc; margin-top: 10px;} .notice4 h4 { border-bottom: 1px solid #ccc; padding: 8px 10px;} .notice4 h4 em {color:#cf3292;} .notice4 ul {margin: 10px;} .notice4 li {overflow: hidden; background:url(../img/dot.gif)no-repeat 0 8px;padding-left: 8px; } .notice4 li a { float: left; width: 65%;text-overflow:ellipsis; white-space:nowrap;} .notice4 li .time { float:right; width: 30%; text-align:right;} .notice4 .more {position: absolute; right: 8px; top: 8px; } /*notice-hover*/ .notice-hover {position: relative; } .notice-hover h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom:3px; } .notice-hover ul { overflow: hidden;} .notice-hover li { float:left; width:33.3333%;text-align:center;} .notice-hover li img {width: 90px; height: 90px; } .notice-hover li span {position: relative; width: 90px; height: 90px; line-height: 90px; display: block;margin: 0 auto;} .notice-hover li span em {visibility:hidden; position: absolute; left: 0; top: 0; background-color: #000; width: 100%; height: 100%; color: #fff;opacity:0.6;} .notice-hover li span:hover em {visibility:visible;} .notice-hover li strong{display: block; padding-top: 3px; } .notice-hover .more {position: absolute; right: 0; top: 5px;background:url(../img/more.png) no-repeat;width: 16px;height: 16px;display: block; } /*notice-hover2*/ .notice-hover2 {margin-top: 20px; } .notice-hover2 ul {overflow: hidden; } .notice-hover2 li {float:left; width: 33.3333%; text-align:center;} .notice-hover2 li img {width: 90px; height: 90px;} .notice-hover2 li span { position: relative; width: 90px; height: 90px; display: block;margin: 0 auto;} .notice-hover2 li span em {visibility:hidden;position: absolute;left: 0;bottom: 0; background-color: #000; width: 100%; color: #fff; filter:alpha(opacity=60); opacity: 0.6;} .notice-hover2 li span:hover em {visibility:visible;} .notice-hover2 li strong {display: block; padding-top: 3px; } /*ad*/ .ad {position: relative; } .ad h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom:3px; } .ad ul {overflow: hidden;} .ad li {float:left;width:33.3333%; text-align:center; } .ad li img {width: 90px; height: 90px; } .ad .more {position: absolute; right: 0; top: 5px;background:url(../img/more.png) no-repeat;width: 16px;height: 16px;display: block; } /*tab-menu*/ .tab-menu {border: 1px solid #ccc; padding: 8px; height: 105px;position: relative;} .tab-menu ul {overflow: hidden; border-bottom: 1px solid #ccc;} .tab-menu ul li {float:left; border: 1px solid #ccc; margin-right: -1px;margin-bottom: -1px;} .tab-menu ul li a {display:block; padding:5px 10px; } .tab-menu ul li ul { border-bottom: 0; position: absolute; left: 10px;top: 50px;} .tab-menu ul li ul li {border: 0;background:url(../img/dot.gif)no-repeat 0 8px;padding-left: 8px; } .tab-menu ul li ul li a {padding: 0; color:#333;} .tab-menu ul li.active { background-color: #2c94c4;} .tab-menu ul li.active a {color: #fff;} .tab-menu ul li.active ul li a {color:#333;} /*gallery*/ .gallery { border: 1px solid #ccc;position: relative;} .gallery h4 {font-size: 14px; color: #0093bd; font-weight: bold; border-bottom: 1px solid #ccc; padding: 8px 0 6px 11px; margin-bottom: 8px;} .gallery .gallery_btn {position: absolute; right: 9px;top: 8px;} .gallery .gallery_btn ul { overflow: hidden;} .gallery .gallery_btn li { float: left;} .gallery .gallery_img {width: 266px; height: 208px; overflow: hidden; margin: 10px; } /*footer*/ .footer {text-align:center; padding: 30px 0;} .footer ul { } .footer li {display: inline; padding: 0 10px; background: url(../img/bar.gif) no-repeat 0 2px;} .footer address { padding-top: 20px;} .footer li:first-child {background: none;} /*login-wrap*/ #login-wrap { position: relative; border: 1px solid #c8c8c8; height: 118px; margin-bottom: 15px; } #login-header {width: 257px; height: 35px; position: absolute; left: 15px;top: 10px;} #login-header .login_level {overflow: hidden; margin-top: 3px; } #login-header .login_level li {float:left; } #login-header .login_info {position: absolute; left: 65px; top: 0; } #login-header .login_info .ip { position: absolute; left: 135px; top: 0; width: 60px;} #login-header .login_info .ip span {font-weight: bold; color:#0093bd; text-decoration:underline; text-transform : uppercase;} #login-contents {position: absolute; left: 15px; top: 38px; } #login-contents dt label {width: 0;height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0;top: 0;} #login-contents .input_text{width: 170px; height: 16px; color:#444; border:1px solid #bebebe; padding: 2px 2px 3px 4px; margin-bottom:3px;} #login-contents .keep{position: absolute; left: 183px; top:0; width: 80px;} #login-contents .submit{position: absolute; left: 0; top:26px; } #login-contents .input_check {vertical-align: -2px;} #login-footer {position: absolute; left: 15px; top: 92px; } #login-footer li {display:inline; padding:0 3px 0 6px; background: url(../img/bar.gif) no-repeat 0 2px;} #login-footer li:first-child {font-weight: bold; background: none; padding-left: 0; }
/* 여백 초기화 */ body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, form, input, legend, textrea, select, fieldset, p, botton { margin:0; padding:0;} /* a링크 초기화 */ a {color: #2f3743; text-decoration: none;} a:hover {color: #390;} /* 기본 폰트 설정 */ body,input,textarea,select,button,table{font-family:"나눔고딕","Nanum Gothic","돋움","Dotum",helevtica,sans-serif; font-size: 12px; line-height: 1.7;} /* 폰트 스타일 초기화 */ em {font-style: normal;} /*제목 태그 초기화*/ h1,h2,h3,h4,h5,h6 {font-size: 12px; font-weight: normal;} /*블릿 기호 초기화*/ ul,li,ol{list-style:none} /*IR 효과*/ .ir{width: 0; height: 0; overflow: hidden; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0;} /*테두리 초기화*/ 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;}