- See Full Page →
-
`21 W3C, Web
Standard
Webstandard
Site
1
Skill Used
→ Based W3C → Semantic Web → Development
→ Web accessibility → Prototyping *
→ Web accessibility → Prototyping *
웹 표준을 가장 준수하여 제작한 사이트입니다. 웹접근성을 위해
스킵
메뉴, IR기법을 이용한 이미지 숨김처리, 이미지 스프라이트
기법을
이용하여 이미지 작업을 진행하였습니다. W3C
Validator를 통해 유효성
검사를 마쳤습니다.
Informations
Viewport : Desktop
IE Support : IE9+
| Category | Source | Related Keyword |
|---|---|---|
| HTML | Index.html | HTML5 |
| CSS | reset.css | CSS3 |
| CSS | style.css | CSS3 |
| CSS | lightgallery.css | CSS3 |
| JS | custom.js | jQuery ∙ Slick |
2
Code View
- Index.html
- reset.css
- style.css
- lightgallery.css
- custom.js
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta name="author" content="choisaeyoung">
<meta name="description" content="Web Standards">
<meta name="keywords" content="웹표준, 웹접근성">
<title>Webstandard Site</title>
<!-- style -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/lightgallery.css">
<!-- favicon -->
<link rel="shortcut icon" href="icon/favicon.ico">
<link rel="icon" href="icon/favicon-16.ico" sizes="16x16">
<link rel="icon" href="icon/favicon-32.ico" sizes="32x32">
<link rel="icon" href="icon/favicon-48.ico" sizes="48x48">
<link rel="icon" href="icon/favicon-64.ico" sizes="64x64">
<link rel="icon" href="icon/favicon-128.ico" sizes="128x128">
<!--Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
</head>
<body>
<!-- Skip Navigation -->
<div id="skip">
<a rel="bookmark" href="#cont_nav">전체 메뉴 바로가기</a>
<a rel="bookmark" href="#cont_ban">배너 영역 바로가기</a>
<a rel="bookmark" href="#cont_cont">컨텐츠 영역 바로가기</a>
</div>
<!-- // Skip Navigation -->
<div id="wrap">
<div id="header" role="header">
<div class="container">
<div class="header">
<div class="header-menu">
<a href="#">Blog</a>
<a href="#">Github</a>
<a href="#">Facebook</a>
</div> <!-- // header-menu -->
<div class="header-tit">
<h1>Professional Web Publisher</h1><br>
<a href="http://effysode.co.kr">http://effysode.co.kr</a>
</div> <!-- // header-tit -->
<div class="header-icon">
<a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
<a href="#" class="icon2"><span class="ir_pm">icon2</span></a>
<a href="#" class="icon3"><span class="ir_pm">icon3</span></a>
<a href="#" class="icon4"><span class="ir_pm">icon4</span></a>
</div> <!-- // header-icon -->
</div>
<!-- //header containter -->
</div>
</div>
<!-- //header -->
<div id="contents">
<div id="cont_nav">
<div class="container">
<h2 class="ir_su">전체 메뉴</h2>
<div class="nav">
<div>
<h3>HTML Reference</h3>
<ol>
<li><a href="#">HTML 태그(Tag)</a></li>
<li><a href="#">블록 요소/인라인 요소</a></li>
<li><a href="#">DTD 선언</a></li>
<li><a href="#">언어 속성 설정</a></li>
<li><a href="#">HTML <title></a></li>
<li><a href="#">HTML <meta></a></li>
<li><a href="#">특수문자</a></li>
<li><a href="#">하이퍼 링크</a></li>
<li><a href="#">HTML <style></a></li>
<li><a href="#">HTML <html></a></li>
<li><a href="#">HTML <head></a></li>
<li><a href="#">HTML <div></a></li>
<li><a href="#">HTML <colgroup></a></li>
<li><a href="#">HTML <caption></a></li>
</ol>
</div>
<div>
<h3>CSS Reference</h3>
<ol>
<li><a href="#">CSS 선택자</a></li>
<li><a href="#">CSS 단위</a></li>
<li><a href="#">CSS 색상</a></li>
<li><a href="#">CSS 선언 방법</a></li>
<li><a href="#">상대주소와 절대주소</a></li>
<li><a href="#">CSS float</a></li>
<li><a href="#">이미지 표현 방법</a></li>
<li><a href="#">이미지 스프라이트</a></li>
<li><a href="#">IR 효과</a></li>
<li><a href="#">이미지 최적화</a></li>
<li><a href="#">background-color</a></li>
<li><a href="#">border-style</a></li>
<li><a href="#">font-size</a></li>
<li><a href="#">text-align</a></li>
</ol>
</div>
<div class="last">
<h3>Webstandard</h3>
<ol>
<li><a href="#">웹 표준</a></li>
<li><a href="#">웹 접근성</a></li>
<li><a href="#">W3C</a></li>
<li><a href="#">웹 접근성 연구소</a></li>
<li><a href="#">네이버 널리</a></li>
<li><a href="#">다음 다룸</a></li>
<li><a href="#">Webstandard</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- //cont_nav -->
<div id="cont_tit">
<div class="container">
<div class="tit">
<h2>Web Standard Site</h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</div>
<!-- //con_tit -->
<div id="cont_ban">
<div class="container">
<div class="ban">
<!--
<a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
<ul>
<li class="ban_img1"><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></li>
<li class="ban_img2"><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></li>
<li class="ban_img3"><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></li>
</ul>
<a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
-->
<div><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></div>
<div><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></div>
<div><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></div>
<div><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></div>
<div><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></div>
<div><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></div>
<div><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></div>
<div><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></div>
<div><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></div>
</div>
</div>
</div>
<!-- //con_ban -->
<div id="cont_cont">
<div class="container">
<div class="cont">
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Community</span></h3>
<p class="ico_desc">웹 페이지에서 가장 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판01 -->
<div class="notice">
<h4>Web Publisher Notice</h4>
<ul>
<li><a href="#">display:inline과 display:block의 차이점은 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 dl,dd,ul,ol,li의 차이점이 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 strong과 em 태그의 차이점은 무엇인가요?</a></li>
<li><a href="#">컨텐츠 요소를 가운데로 오게 하는 방법을 알려주세요!</a></li>
<li><a href="#">독타입을 선언하는 이유에 대해서 설명하세요.</a></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더 보기</a>
<!-- // 게시판01 -->
<!-- 게시판02 -->
<div class="notice2">
<h4>Web Designer Notice</h4>
<ul>
<li><a href="#">JPG, PNG, GIF의 차이점이 무엇인가요?</a><span>2021.03.20</span></li>
<li><a href="#">UI 디자인과 UX 디자인의 차이점을 설명하세요.</a><span>2021.02.18</span></li>
<li><a href="#">인터랙션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2021.02.09</span></li>
<li><a href="#">포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?</a><span>2021.01.16</span></li>
<li><a href="#">웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?</a><span>2021.01.10</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더 보기</a>
</div>
<!-- // 게시판02 -->
</div>
<!-- notice -->
</div>
<!-- //col1 -->
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Resources</span></h3>
<p class="ico_desc">웹 페이지에서 가장 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판03 -->
<div class="notice3">
<h4>HTML Reference</h4>
<ul>
<li>
<a href="#"><img src="img/notice01.jpg" alt="이미지1">
<strong>[HTML] table</strong>
<span>table 태그는 표를 만들때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice02.jpg" alt="이미지2">
<strong>[HTML] div</strong>
<span>div 태그는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice03.jpg" alt="이미지3">
<strong>[HTML] dl</strong>
<span>dl 태그는 용어를 설명하는 목록형 태그입니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice04.jpg" alt="이미지4">
<strong>[HTML] em</strong>
<span>em 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더 보기</a>
</div>
<!-- // 게시판03 -->
</div>
<!-- //col2 -->
<div class="column col3">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Join Us</span></h3>
<p class="ico_desc">웹 페이지에서 가장 기본이 되는 게시판 유형입니다.</p>
<!-- 로그인 페이지 -->
<div id="login-wrap">
<h4 class="ir_su">로그인 정보</h4>
<form id="login_form" name="login_form" action="post">
<fieldset>
<legend class="ir_su">로그인 및 관련 설정</legend>
<div class="login_header">
<h5 class="ir_su">로그인 보안</h5>
<div class="lh_check">
<input id="infor-check" type="checkbox" class="input_check">
<label for="infor-check">로그인 상태 유지</label>
</div>
<lg class="lh_ip">
IP보안 <em>ON</em>
</lg>
</div>
<div class="login_content">
<h5 class="ir_su">로그인 영역</h5>
<div class="lc_text">
<input type="text" id="uid" name="uid" class="input_text" maxlength="20" placeholder="아이디">
<label for="uid" class="ir_su">아이디</label>
<input type="password" id="upw" name="upw" class="input_text" maxlength="20" placeholder="비밀번호">
<label for="upw" class="ir_su">비밀번호</label>
<button class="lc_btn" type="submit">로그인</button>
</div>
</div>
<div class="login_footer">
<h5 class="ir_su">로그인 문제해결</h5>
<ul>
<li><a href="#"><strong>회원가입</strong></a> / </li>
<li><a href="#">아이디·</a><a href="#">비밀번호 찾기</a></li>
</ul>
</div>
</fieldset>
</form>
</div>
<!-- // 로그인 페이지 -->
<!-- 팝업 -->
<div class="popup">
<h4>Advertisement</h4>
<ul>
<li class="layer"><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
<li class="window"><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
<li class="last lightgallery">
<a href="img/webstandard1.jpg"><img src="img/sban09.jpg" alt="이미지1"></a>
<a href="img/webstandard2.jpg" style="display: none"><img src="img/sban09.jpg" alt="이미지2"></a>
<a href="img/webstandard3.jpg" style="display: none"><img src="img/sban09.jpg" alt="이미지3"></a>
</li>
</ul>
</div>
<!-- //팝업 -->
</div>
<!-- //col3 -->
<div class="column col4">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">BOARD</span></h3>
<p class="ico_desc">웹 페이지에서 가장 기본이 되는 게시판 유형입니다.</p>
<!-- 오버효과01 -->
<div class="notice_hover">
<h4>Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src="img/sban01.jpg" alt="이미지1"><em>바로가기</em></span>
<strong>와이어프레임</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban02.jpg" alt="이미지2"><em>바로가기</em></span>
<strong>스케치 작업</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban03.jpg" alt="이미지3"><em>바로가기</em></span>
<strong>UI 디자인</strong>
</a>
</li>
</ul>
</div>
<!-- // 오버효과01 -->
<!-- 오버효과02-->
<div class="notice_hover2 mt15">
<ul>
<li>
<a href="#">
<span><img src="img/sban04.jpg" alt="이미지4"><em>바로가기</em></span>
<strong>HTML</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban05.jpg" alt="이미지5"><em>바로가기</em></span>
<strong>CSS</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban06.jpg" alt="이미지6"><em>바로가기</em></span>
<strong>jQuery</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과02-->
</div>
<!--col4-->
<div class="column col5">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">웹 페이지에서 가장 기본이 되는 게시판 유형입니다.</p>
<!-- 탭메뉴 -->
<div class="tab_menu">
<h4 class="ir_su mt15">탭 메뉴</h4>
<ul>
<li class="active"><a href="#">공지사항1</a>
<ul>
<li>
<a href="#">첫 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
<a href="#">첫 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
<a href="#">첫 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
</li>
</ul>
</li>
<li><a href="#">공지사항2</a>
<ul>
<li>
<a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
<a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다. </a>
<a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
</li>
</ul>
</li>
<li><a href="#">공지사항3</a>
<ul>
<li>
<a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
<a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
<a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a>
</li>
</ul>
</li>
</ul>
</div>
<!--탭메뉴 -->
<div class="notice4 mt15">
<h4>최신<em>공지사항</em></h4>
<ul>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2021.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2021.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2021.11.19</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더 보기</a>
</div>
</div>
<!--col5-->
<div class="column col6">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Gallery</span></h3>
<p class="ico_desc">웹 페이지에서 가장 기본이 되는 게시판 유형입니다.</p>
<!-- 갤러리 -->
<div class="gallery">
<h4>Portfolio</h4>
<div class="gallery_btn">
<!--
<ul>
<li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
<li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
<li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
<li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>
</ul>
-->
<button class="gb_icon1 play"><span class="ir_pm">시작</span></button>
<button class="gb_icon2 pause"><span class="ir_pm">정지</span></button>
<button class="gb_icon3 prev"><span class="ir_pm">이전이미지</span></button>
<button class="gb_icon4 next"><span class="ir_pm">다음이미지</span></button>
</div>
<div class="gallery_img">
<div><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></div>
<div><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></div>
<div><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></div>
<div><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></div>
<div><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></div>
</div>
</div>
</div>
<!--col6-->
</div>
<!-- //contents -->
</div>
<!-- //cont_container -->
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
<div id="footer" role="footer">
<div class="container">
<h2 class="ir_su">푸터 영역</h2>
<div class="footer">
<ul>
<li><a href="#">사이트 도움말</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>
<div class="w3c">
<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 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>
</div>
<address>
Copyright © effysode.co.kr<br>All rights Reserved.
</address>
</div>
</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
<!--Layer Popup-->
<div id="layer">
<img src="img/webstandard1.jpg" alt="웹표준 사이트">
<a href="#" class="close">Close</a>
</div>
<!-- //Layer Popup-->
<!-- script -->
<script src="js/jquery_1.12.4.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/lightgallery.min.js"></script>
<script src="js/lightgallery-all.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
@charset "utf-8";
/* 여백 초기화 */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {
font-family:'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트스타일 초기화 */
em, address {font-style: normal;}
/* 블릿기호 초기화 */
dl, ul, li, ol, menu {list-style: none;}
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; color:#222; font-weight: normal;}
/* 테두리 초기화 */
img,fieldset {border: 0 none;}
/* 버튼 초기화 */
button {border: 0;}
/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 텍스트 숨김을 제공할 때 */
/* margin padding */
.mt10 {margin-top: 10px; !important;}
.mt15 {margin-top: 15px; !important;}
.mt20 {margin-top: 10px; !important;}
.mt25 {margin-top: 15px; !important;}
.mt30 {margin-top: 10px; !important;}
.mt35 {margin-top: 15px; !important;}
.mt40 {margin-top: 10px; !important;}
.mt45 {margin-top: 15px; !important;}
.mt50 {margin-top: 10px; !important;}
@charset "utf-8";
/* Skip Navigation */
#skip {position: relative;}
#skip a {position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 140px; text-align: center;}
#skip a:active,
#skip a:focus {top:0px;}
/*Font*/
body {font-family:'Noto Sans KR', sans-serif;}
/* Layout */
#wrap {}
#header {height: 335px; background: url(../img/header_bg.png) no-repeat top center;}
#contents {}
#footer {border-top: 1px solid #eee;}
/* Contents Layout */
#cont_nav {background-color: #FAF9F9; display: none;}
#cont_tit {background-color: #ffffff;}
#cont_ban {background-color: #ffffff; border-bottom: 1px solid #eee;}
#cont_cont {background-color: #ffffff;}
/* container */
.container {width: 990px; margin: 0 auto; height: inherit; /* background: rgba(255,255,255,0.3);*/}
/* Header */
.header .header-menu {text-align: right; font-family: 'Staatliches', cursive;}
.header .header-menu a {color: #1E833D; padding: 10px 0px 10px 13px; display: inline-block;}
.header .header-menu a:hover {color: #FAF9F9;}
.header .header-tit {text-align: center; font-family: 'Staatliches', cursive;}
.header .header-tit h1 {background-color: #1E833D; font-size: 28px; padding: 8px 25px 7px 25px; display: inline-block; color: #fff; margin-top: 40px; text-transform: uppercase; letter-spacing: 0.1em;}
.header .header-tit a {display: inline-block; background-color: #1E833D; font-size: 16px; color: #fff; padding: 5px 25px 6px 25px; margin-top: -5px; letter-spacing: 0.05em;}
.header .header-icon {text-align: center; margin-top: 30px;}
.header .header-icon a {width: 60px; height: 60px; background: url(../img/icon.png) repeat-x; display: inline-block;}
.header .header-icon a.icon1 {background-position: 0 0;}
.header .header-icon a.icon2 {background-position: 0 -60px;}
.header .header-icon a.icon3 {background-position: 0 -120px;}
.header .header-icon a.icon4 {background-position: 0 -180px;}
.header .header-icon a.icon1:hover {background-position: -60px 0;}
.header .header-icon a.icon2:hover {background-position: -60px -60px;}
.header .header-icon a.icon3:hover {background-position: -60px -120px;}
.header .header-icon a.icon4:hover {background-position: -60px -180px;}
/* float: left로 인한 영역깨짐(height:0) 방지법
1. 깨지는 영역에 똑같이 float:left를 사용한다.(X) --> 모든 박스에 float:left를 사용하게 됩니다.
2. float의 성질을 차단하는 clear: both;를 사용한다.(X) --> 어떤 영역이 깨졌는지 찾기 어려움.
3. float을 사용한 상위 박스한테 overflow: hidden을 사용합니다. (O) --> 현재는 제일 많이 사용.
4. clearfix를 사용합니다. (O)
*/
/* Menu */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float:left; width:40%;}
.nav > div:last-child {width: 20%;} /* ie9부터 사용 가능 */
.nav > div.last {width: 20%;}
.nav > div h3 {font-family: 'Staatliches', cursive; font-size: 18px; color: #2E7C46; margin-bottom: 4px;}
.nav > div ol {overflow: hidden;}
.nav > div ol li {float: left; width: 50%;}
.nav > div.last ol li {width: 100%;}
.nav > div ol li a:hover {text-decoration: underline;}
/* Title */
.tit {position: relative;padding-top: 30px; }
.tit h2 {font-size: 36px; font-family: 'Staatliches', cursive; letter-spacing: 0.05em; text-align: center; color: #2E7C46;}
.tit .btn {margin-top: 20px; position: absolute; top: 5px; right: 0; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px;}
.tit .btn.on {background-position: 0 -660px;}
/* Banner Slick */
.ban {position: relative; padding: 24px 0 40px;}
.ban .slick-prev {position: absolute; left: -80px; top: 80px; width: 43px; height: 43px; background: url(../img/icon.png) no-repeat -150px 0; text-indent: -9999px;}
.ban .slick-next {position: absolute; right: -80px; top: 80px; width: 43px; height: 43px; background: url(../img/icon.png) no-repeat -150px -43px; text-indent: -9999px;}
.ban .slick-prev:hover {background-position: -193px 0;}
.ban .slick-next:hover {background-position: -193px -43px;}
.ban img {background-size: cover; border: 4px solid #dcdcdc;}
.ban img:hover {border-color: #c9c9c9;}
.ban .slick-slide {margin: 10px;}
.ban .slick-dots {position: absolute; bottom: 15px; display: block; width: 100%; text-align: center;}
.ban .slick-dots li {display: inline-block; width: 15px; height: 15px; margin: 5px;}
.ban .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; cursor: pointer; background: #59A671; border-radius: 50%;}
.ban .slick-dots li.slick-active button {background: #2E7C46;}
/* Contents */
.cont {overflow: hidden; padding-top: 30px;}
.cont .column {position: relative; float: left; width: 289px; height: 363px; margin: 0 30px 30px 0; padding-right: 30px;}
.cont .column:not(:nth-child(3n)) {margin: 0 30px 30px 0; padding-right: 30px; border-right: solid 1px #c8c8c8;} /*ie9부터 적용*/
.cont .column.col1 {border-right: 1px solid #c8c8c8;}
.cont .column.col2 {border-right: 1px solid #c8c8c8;}
.cont .column.col3 {margin-right: 0; padding-right: 0;}
.cont .column.col4 {border-right: 1px solid #c8c8c8;}
.cont .column.col5 {border-right: 1px solid #c8c8c8;}
.cont .column.col6 {margin-right: 0; padding-right: 0;}
.cont .column .ico_img {display: block; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0;}
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; letter-spacing: 0.05em; color: #2E7C46; font-family: 'Staatliches', cursive;}
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; margin-bottom: 15px;}
.cont .col1 .ico_img {background-position: 0 -240px;}
.cont .col2 .ico_img {background-position: 0 -300px;}
.cont .col3 .ico_img {background-position: 0 -360px;}
.cont .col4 .ico_img {background-position: 0 -420px;}
.cont .col5 .ico_img {background-position: 0 -480px;}
.cont .col6 .ico_img {background-position: 0 -540px;}
.cont .col1 .ico_img:hover {background-position: -60px -240px;}
.cont .col2 .ico_img:hover {background-position: -60px -300px;}
.cont .col3 .ico_img:hover {background-position: -60px -360px;}
.cont .col4 .ico_img:hover {background-position: -60px -420px;}
.cont .col5 .ico_img:hover {background-position: -60px -480px;}
.cont .col6 .ico_img:hover {background-position: -60px -540px;}
/* Notice 01 */
.notice {position: relative;}
.notice h4 {font-size: 14px; color: #2E7C46; padding-bottom: 3px; font-family: 'Staatliches', cursive; letter-spacing: 0.02em;}
.notice ul li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice ul li a {font-size: 12px;}
.notice a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* Notice 02 */
.notice2 {position: relative; margin-top: 15px;}
.notice2 h4 {font-size: 14px; color: #2E7C46; padding-bottom: 3px; font-family: 'Staatliches', cursive; letter-spacing: 0.02em;}
.notice2 li {overflow: hidden; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice2 li a {float: left; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice2 li span {float: right; width: 30%; text-align: right;}
.notice2 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* Notice 03 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color: #2E7C46; padding-bottom: 3px; font-family: 'Staatliches', cursive; letter-spacing: 0.02em;}
.notice3 li {position: relative; padding: 8px 0 14px 60px;}
.notice3 li a {}
.notice3 li a img {width: 50px; position: absolute; left: 0; top: 0; border: solid 1px #59A671;}
.notice3 li a strong {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice3 li a span {display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice3 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* Mouse Hover 01 */
.notice_hover h4 {font-size: 14px; color: #2E7C46; padding-bottom: 3px; font-family: 'Staatliches', cursive; letter-spacing: 0.02em;}
.notice_hover ul {overflow: hidden;}
.notice_hover li {float: left; width: 93px; margin-right: 5px; text-align: center;}
.notice_hover li:last-child {margin-right: 0px;} /*ie9부터 적용*/
.notice_hover li a span {width: 93px; height: 93px; position: relative; display: block; line-height: 93px;}
.notice_hover li a span img {width: 100%;}
.notice_hover li a span em {visibility: hidden; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7); color: #fff; width: 100%; height: 100%;} /*ie9부터 적용*/
.notice_hover li a span:hover em {visibility:visible;}
.notice_hover li a strong {padding-top: 3px; display: inline-block;font-size: 12px;}
/* Mouse Hover 02 */
.notice_hover2 ul {overflow: hidden;}
.notice_hover2 li {float: left; width: 93px; margin-right: 5px; text-align: center;}
.notice_hover2 li:last-child {margin-right: 0;}
.notice_hover2 li a span{position: relative; width: 93px; height: 93px;}
.notice_hover2 li a span img {width: 100%;}
.notice_hover2 li a span em{visibility: hidden; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.7); color: #fff; width: 100%;}
.notice_hover2 li a span:hover em{visibility: visible;}
.notice_hover2 li a strong {padding-top: 3px; display: inline-block; font-size: 12px;}
/* 콘텐츠 요소를 보이지 않게하는 방법
1. display: none; -- display: block; (영역이 사라짐)
2. visibility: hidden; -- visibility: visible; (영역유지)
3. opacity: 0; -- opacity: 1; (영역유지)
4. (IR) width: 0; height: 0; overflow: hidden;
*/
/* Tab Menu */
.tab_menu {position: relative; border: 1px solid #ccc; padding: 8px; height: 105px;}
.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 {padding: 5px 10px; display: block;}
.tab_menu ul li ul {position: absolute; left: 0; top: 48px; width: 270px; border: 0;}
.tab_menu ul li ul li {float: none; border: 0;}
.tab_menu ul li ul li a {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0 0 3px 18px; background: url(../img/dot.gif) no-repeat 9px 8px;}
.tab_menu ul li.active {background: #59A671;}
.tab_menu ul li.active a {color: #fff;}
.tab_menu ul li.active ul li a {color: #333;}
/* Notice 04 */
.notice4 {position: relative; border: 1px solid #ccc;}
.notice4 h4 {border-bottom: 1px solid #ccc; font-size: 14px; color: #2E7C46; font-weight: 700; padding: 8px 10px;}
.notice4 h4 em {color: darkslategrey;}
.notice4 ul {padding: 10px;}
.notice4 li {overflow: hidden; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px; padding-bottom: 2px;}
.notice4 li a {float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice4 li span {float: right; width: 30%; text-align: right;}
.notice4 a.more {position: absolute; right: 9px; top: 9px;}
/* Slick Gallery */
.gallery {position: relative; border: 1px solid #ccc; height: 255px; overflow: hidden;}
.gallery h4 {font-size: 14px; color: #2E7C46; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-family: 'Staatliches', cursive; letter-spacing: 0.02em;}
.gallery .gallery_btn {position: absolute; right: 5px; top: 7px;}
.gallery .gallery_btn button {float: left; margin: 1px 2px; display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;}
.gallery .gallery_btn .gb_icon1 {background-position: -150px -120px;}
.gallery .gallery_btn .gb_icon2 {background-position: -150px -143px;}
.gallery .gallery_btn .gb_icon3 {background-position: -150px -166px;}
.gallery .gallery_btn .gb_icon4 {background-position: -150px -189px;}
.gallery .gallery_btn .gb_icon1:hover {background-position: -173px -120px;}
.gallery .gallery_btn .gb_icon2:hover {background-position: -173px -143px;}
.gallery .gallery_btn .gb_icon3:hover {background-position: -173px -166px;}
.gallery .gallery_btn .gb_icon4:hover {background-position: -173px -189px;}
.gallery .gallery_img img {width: 100%;}
/* Login */
#login-wrap {margin-bottom: 15px; background-color: #f2f4f5; padding: 15px;}
.login_header {overflow: hidden; font-size: 12px; height: 30px;}
.login_header .lh_check {float: left; padding-right: 15px;}
.login_header .lh_check .input_check {vertical-align: -2px;}
.login_header .lh_ip {float: left;}
.login_header .lh_ip em {color: #2E7C46; text-decoration: underline;}
.login_content {position: relative;}
.login_content .lc_btn {position: absolute; right: 0; top: 0; width: 62px; height: 47px; background: #fff;}
.login_content .input_text {width: 180px; height: 16px; padding: 2px 5px; border : 1px solid #bebebe; margin-bottom: 3px; background: #fff;}
.login_footer {}
.login_footer li {display: inline;}
.login_footer li a {font-size: 12px;}
/* Pop-Up */
.popup h4 {font-size: 14px; color: #2E7C46; padding-bottom: 4px; font-family: 'Staatliches', cursive; letter-spacing: 0.02em;}
.popup ul {overflow: hidden;}
.popup li {float: left; width: 93px; margin-right: 5px;}
.popup li.last {margin-right: 0;}
.popup li img {width: 100%;}
/* Footer */
.footer {padding: 25px 0; text-align: center;}
.footer ul {margin-bottom: 20px;}
.footer li {position: relative; display: inline; padding : 0 7px 0 10px;}
.footer li:before {content: ""; width: 1px; height: 12px; background: #ccc; position: absolute; left: 0; top: 2px;}
.footer li:first-child:before{display: none;}
.footer address{font-size: 12px; color: #999; margin-top: 20px;}
.footer .w3c {margin-top: 30px;}
/* Layer Popup */
#layer {display: none; position: fixed; top: 50px; left: 50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);}
#layer img {width: 100%; display: block;}
#layer .close {position: absolute; right: 20px; top: 20px; background: #59A671; padding: 1px 6px; color: #fff;}
/*! lightgallery - v1.6.11 - 2018-05-22
* http://sachinchoolur.github.io/lightGallery/
* Copyright (c) 2018 Sachin N; Licensed GPLv3 */
@font-face {
font-family: 'lg';
src: url("../fonts/lg.eot?n1z373");
src: url("../fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lg.woff?n1z373") format("woff"), url("../fonts/lg.ttf?n1z373") format("truetype"), url("../fonts/lg.svg?n1z373#lg") format("svg");
font-weight: normal;
font-style: normal;
}
.lg-icon {
font-family: 'lg';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lg-actions .lg-next, .lg-actions .lg-prev {
background-color: rgba(0, 0, 0, 0.45);
border-radius: 2px;
color: #999;
cursor: pointer;
display: block;
font-size: 22px;
margin-top: -10px;
padding: 8px 10px 9px;
position: absolute;
top: 50%;
z-index: 1080;
border: none;
outline: none;
}
.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
/* pointer-events: none;*/
opacity: 0.5;
}
.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
color: #FFF;
}
.lg-actions .lg-next {
right: 20px;
}
.lg-actions .lg-next:before {
content: "\e095";
}
.lg-actions .lg-prev {
left: 20px;
}
.lg-actions .lg-prev:after {
content: "\e094";
}
@-webkit-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-moz-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-ms-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-webkit-keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@-moz-keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@-ms-keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
.lg-outer.lg-right-end .lg-object {
-webkit-animation: lg-right-end 0.3s;
-o-animation: lg-right-end 0.3s;
animation: lg-right-end 0.3s;
position: relative;
}
.lg-outer.lg-left-end .lg-object {
-webkit-animation: lg-left-end 0.3s;
-o-animation: lg-left-end 0.3s;
animation: lg-left-end 0.3s;
position: relative;
}
.lg-toolbar {
z-index: 1082;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.45);
}
.lg-toolbar .lg-icon {
color: #999;
cursor: pointer;
float: right;
font-size: 24px;
height: 47px;
line-height: 27px;
padding: 10px 0;
text-align: center;
width: 50px;
text-decoration: none !important;
outline: medium none;
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.lg-toolbar .lg-icon:hover {
color: #FFF;
}
.lg-toolbar .lg-close:after {
content: "\e070";
}
.lg-toolbar .lg-download:after {
content: "\e0f2";
}
.lg-sub-html {
background-color: rgba(0, 0, 0, 0.45);
bottom: 0;
color: #EEE;
font-size: 16px;
left: 0;
padding: 10px 40px;
position: fixed;
right: 0;
text-align: center;
z-index: 1080;
}
.lg-sub-html h4 {
margin: 0;
font-size: 13px;
font-weight: bold;
}
.lg-sub-html p {
font-size: 12px;
margin: 5px 0 0;
}
#lg-counter {
color: #999;
display: inline-block;
font-size: 16px;
padding-left: 20px;
padding-top: 12px;
vertical-align: middle;
}
.lg-toolbar, .lg-prev, .lg-next {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
-moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
-o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
}
.lg-hide-items .lg-prev {
opacity: 0;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
.lg-hide-items .lg-next {
opacity: 0;
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
.lg-hide-items .lg-toolbar {
opacity: 0;
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
-webkit-transform: scale3d(0.5, 0.5, 0.5);
transform: scale3d(0.5, 0.5, 0.5);
opacity: 0;
-webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
-moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
-o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
.lg-outer .lg-thumb-outer {
background-color: #0D0A0A;
bottom: 0;
position: absolute;
width: 100%;
z-index: 1080;
max-height: 350px;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}
.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}
.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
}
.lg-outer.lg-thumb-open .lg-thumb-outer {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
.lg-outer .lg-thumb {
padding: 10px 0;
height: 100%;
margin-bottom: -5px;
}
.lg-outer .lg-thumb-item {
border-radius: 5px;
cursor: pointer;
float: left;
overflow: hidden;
height: 100%;
border: 2px solid #FFF;
border-radius: 4px;
margin-bottom: 5px;
}
@media (min-width: 1025px) {
.lg-outer .lg-thumb-item {
-webkit-transition: border-color 0.25s ease;
-o-transition: border-color 0.25s ease;
transition: border-color 0.25s ease;
}
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
border-color: #a90707;
}
.lg-outer .lg-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lg-outer.lg-has-thumb .lg-item {
padding-bottom: 120px;
}
.lg-outer.lg-can-toggle .lg-item {
padding-bottom: 0;
}
.lg-outer.lg-pull-caption-up .lg-sub-html {
-webkit-transition: bottom 0.25s ease;
-o-transition: bottom 0.25s ease;
transition: bottom 0.25s ease;
}
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
bottom: 100px;
}
.lg-outer .lg-toogle-thumb {
background-color: #0D0A0A;
border-radius: 2px 2px 0 0;
color: #999;
cursor: pointer;
font-size: 24px;
height: 39px;
line-height: 27px;
padding: 5px 0;
position: absolute;
right: 20px;
text-align: center;
top: -39px;
width: 50px;
}
.lg-outer .lg-toogle-thumb:after {
content: "\e1ff";
}
.lg-outer .lg-toogle-thumb:hover {
color: #FFF;
}
.lg-outer .lg-video-cont {
display: inline-block;
vertical-align: middle;
max-width: 1140px;
max-height: 100%;
width: 100%;
padding: 0 5px;
}
.lg-outer .lg-video {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
.lg-outer .lg-video .lg-object {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.lg-outer .lg-video .lg-video-play {
width: 84px;
height: 59px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -42px;
margin-top: -30px;
z-index: 1080;
cursor: pointer;
}
.lg-outer .lg-has-iframe .lg-video {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.lg-outer .lg-has-vimeo .lg-video-play {
background: url("../img/vimeo-play.png") no-repeat scroll 0 0 transparent;
}
.lg-outer .lg-has-vimeo:hover .lg-video-play {
background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent;
}
.lg-outer .lg-has-html5 .lg-video-play {
background: transparent url("../img/video-play.png") no-repeat scroll 0 0;
height: 64px;
margin-left: -32px;
margin-top: -32px;
width: 64px;
opacity: 0.8;
}
.lg-outer .lg-has-html5:hover .lg-video-play {
opacity: 1;
}
.lg-outer .lg-has-youtube .lg-video-play {
background: url("../img/youtube-play.png") no-repeat scroll 0 0 transparent;
}
.lg-outer .lg-has-youtube:hover .lg-video-play {
background: url("../img/youtube-play.png") no-repeat scroll 0 -60px transparent;
}
.lg-outer .lg-video-object {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
.lg-outer .lg-has-video .lg-video-object {
visibility: hidden;
}
.lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play {
display: none;
}
.lg-outer .lg-has-video.lg-video-playing .lg-video-object {
visibility: visible;
}
.lg-progress-bar {
background-color: #333;
height: 5px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1083;
opacity: 0;
-webkit-transition: opacity 0.08s ease 0s;
-moz-transition: opacity 0.08s ease 0s;
-o-transition: opacity 0.08s ease 0s;
transition: opacity 0.08s ease 0s;
}
.lg-progress-bar .lg-progress {
background-color: #a90707;
height: 5px;
width: 0;
}
.lg-progress-bar.lg-start .lg-progress {
width: 100%;
}
.lg-show-autoplay .lg-progress-bar {
opacity: 1;
}
.lg-autoplay-button:after {
content: "\e01d";
}
.lg-show-autoplay .lg-autoplay-button:after {
content: "\e01a";
}
.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
-webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
-moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
-o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
#lg-zoom-in:after {
content: "\e311";
}
#lg-actual-size {
font-size: 20px;
}
#lg-actual-size:after {
content: "\e033";
}
#lg-zoom-out {
opacity: 0.5;
/* pointer-events: none;*/
}
#lg-zoom-out:after {
content: "\e312";
}
.lg-zoomed #lg-zoom-out {
opacity: 1;
/* pointer-events: auto;*/
}
.lg-outer .lg-pager-outer {
bottom: 60px;
left: 0;
position: absolute;
right: 0;
text-align: center;
z-index: 1080;
height: 10px;
}
.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
overflow: visible;
}
.lg-outer .lg-pager-cont {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
margin: 0 5px;
}
.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
box-shadow: 0 0 0 2px white inset;
}
.lg-outer .lg-pager-thumb-cont {
background-color: #fff;
color: #FFF;
bottom: 100%;
height: 83px;
left: 0;
margin-bottom: 20px;
margin-left: -60px;
opacity: 0;
padding: 5px;
position: absolute;
width: 120px;
border-radius: 3px;
-webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
-moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
.lg-outer .lg-pager-thumb-cont img {
width: 100%;
height: 100%;
}
.lg-outer .lg-pager {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
display: block;
height: 12px;
-webkit-transition: box-shadow 0.3s ease 0s;
-o-transition: box-shadow 0.3s ease 0s;
transition: box-shadow 0.3s ease 0s;
width: 12px;
}
.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
box-shadow: 0 0 0 8px white inset;
}
.lg-outer .lg-caret {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px dashed;
bottom: -10px;
display: inline-block;
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
vertical-align: middle;
width: 0;
}
.lg-fullscreen:after {
content: "\e20c";
}
.lg-fullscreen-on .lg-fullscreen:after {
content: "\e20d";
}
.lg-outer #lg-dropdown-overlay {
background-color: rgba(0, 0, 0, 0.25);
bottom: 0;
cursor: default;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1081;
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
-o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
}
.lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transform: translate3d(0, 0px, 0);
-o-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
opacity: 1;
visibility: visible;
}
.lg-outer.lg-dropdown-active #lg-share {
color: #FFF;
}
.lg-outer .lg-dropdown {
background-color: #fff;
border-radius: 2px;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 10px 0;
position: absolute;
right: 0;
text-align: left;
top: 50px;
opacity: 0;
visibility: hidden;
-moz-transform: translate3d(0, 5px, 0);
-o-transform: translate3d(0, 5px, 0);
-ms-transform: translate3d(0, 5px, 0);
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
-webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
-moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
-o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
}
.lg-outer .lg-dropdown:after {
content: "";
display: block;
height: 0;
width: 0;
position: absolute;
border: 8px solid transparent;
border-bottom-color: #FFF;
right: 16px;
top: -16px;
}
.lg-outer .lg-dropdown > li:last-child {
margin-bottom: 0px;
}
.lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon {
color: #333;
}
.lg-outer .lg-dropdown a {
color: #333;
display: block;
white-space: pre;
padding: 4px 12px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
}
.lg-outer .lg-dropdown a:hover {
background-color: rgba(0, 0, 0, 0.07);
}
.lg-outer .lg-dropdown .lg-dropdown-text {
display: inline-block;
line-height: 1;
margin-top: -3px;
vertical-align: middle;
}
.lg-outer .lg-dropdown .lg-icon {
color: #333;
display: inline-block;
float: none;
font-size: 20px;
height: auto;
line-height: 1;
margin-right: 8px;
padding: 0;
vertical-align: middle;
width: auto;
}
.lg-outer #lg-share {
position: relative;
}
.lg-outer #lg-share:after {
content: "\e80d";
}
.lg-outer #lg-share-facebook .lg-icon {
color: #3b5998;
}
.lg-outer #lg-share-facebook .lg-icon:after {
content: "\e901";
}
.lg-outer #lg-share-twitter .lg-icon {
color: #00aced;
}
.lg-outer #lg-share-twitter .lg-icon:after {
content: "\e904";
}
.lg-outer #lg-share-googleplus .lg-icon {
color: #dd4b39;
}
.lg-outer #lg-share-googleplus .lg-icon:after {
content: "\e902";
}
.lg-outer #lg-share-pinterest .lg-icon {
color: #cb2027;
}
.lg-outer #lg-share-pinterest .lg-icon:after {
content: "\e903";
}
.lg-group:after {
content: "";
display: table;
clear: both;
}
.lg-outer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1050;
text-align: left;
opacity: 0;
-webkit-transition: opacity 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s;
transition: opacity 0.15s ease 0s;
}
.lg-outer * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lg-outer.lg-visible {
opacity: 1;
}
.lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current {
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
opacity: 1;
}
.lg-outer.lg-grab img.lg-object {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}
.lg-outer.lg-grabbing img.lg-object {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}
.lg-outer .lg {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 100%;
}
.lg-outer .lg-inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
}
.lg-outer .lg-item {
background: url("../img/loading.gif") no-repeat scroll center center transparent;
display: none !important;
}
.lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide {
display: inline-block !important;
}
.lg-outer.lg-css .lg-current {
display: inline-block !important;
}
.lg-outer .lg-item, .lg-outer .lg-img-wrap {
display: inline-block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
}
.lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}
.lg-outer .lg-img-wrap {
position: absolute;
padding: 0 5px;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.lg-outer .lg-item.lg-complete {
background-image: none;
}
.lg-outer .lg-item.lg-current {
z-index: 1060;
}
.lg-outer .lg-image {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
}
.lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play {
opacity: 0;
-webkit-transition: opacity 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s;
transition: opacity 0.15s ease 0s;
}
.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
opacity: 1;
}
.lg-outer .lg-empty-html {
display: none;
}
.lg-outer.lg-hide-download #lg-download {
display: none;
}
.lg-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1040;
background-color: #000;
opacity: 0;
-webkit-transition: opacity 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s;
transition: opacity 0.15s ease 0s;
}
.lg-backdrop.in {
opacity: 1;
}
.lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current {
-webkit-transition: none 0s ease 0s !important;
-moz-transition: none 0s ease 0s !important;
-o-transition: none 0s ease 0s !important;
transition: none 0s ease 0s !important;
}
.lg-css3.lg-use-css3 .lg-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.lg-css3.lg-use-left .lg-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.lg-css3.lg-fade .lg-item {
opacity: 0;
}
.lg-css3.lg-fade .lg-item.lg-current {
opacity: 1;
}
.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
-webkit-transition: opacity 0.1s ease 0s;
-moz-transition: opacity 0.1s ease 0s;
-o-transition: opacity 0.1s ease 0s;
transition: opacity 0.1s ease 0s;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item {
opacity: 0;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}
.lg-css3.lg-slide.lg-use-left .lg-item {
opacity: 0;
position: absolute;
left: 0;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
left: -100%;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide {
left: 100%;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
left: 0;
opacity: 1;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
-webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
-moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
-o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}
/*# sourceMappingURL=lightgallery.css.map */
//light-gallery
$(".lightgallery").lightGallery({
thumbnail: true,
autoplay: true,
pause: 3000,
progressBar: true
});
//window-popup
$(".window").click(function(e) {
e.preventDefault();
//window.open("파일명","팝업이름","옵션설정");
window.open("popup.html", "popup01", "width=800, height=590,left=50,top=50, scrollbars=0, toolbar=0, menubar=0");
})
//layer-popup
$(".layer").click(function(e) {
e.preventDefault();
$("#layer").fadeIn();
})
$("#layer .close").click(function(e) {
e.preventDefault();
$("#layer").fadeOut();
})
//탭메뉴
var $tab_list = $(".tab_menu");
$tab_list.find("ul ul").hide();
$tab_list.find("li.active > ul").show();
function tabMenu(e) {
e.preventDefault();
var $this = $(this);
$this.next("ul").show().parent("li").addClass("active").siblings("li").removeClass("active").find(">ul").hide();
}
$tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu);
//banner
$(".ban").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 3000,
dots: true
})
//gallery
$(".gallery_img").slick({
fade: true,
arrows: false,
pauseOnHover: true,
infinite: true,
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 2000,
});
$(".play").click(function() {
$(".gallery_img").slick("slickPlay");
});
$(".pause").click(function() {
$(".gallery_img").slick("slickPause");
});
$(".prev").click(function() {
$(".gallery_img").slick("slickPrev");
});
$(".next").click(function() {
$(".gallery_img").slick("slickNext");
});
//버튼 클릭시, 전체 메뉴 보이기
$(".tit .btn").click(function(e) {
e.preventDefault();
$("#cont_nav").slideToggle(300);
$(this).toggleClass("on");
});