<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="webstoryboy">
<meta name="description" content="반응형 웹 페이지 제작 샘플입니다.">
<meta name="keywords" content="반응형 사이트, 교육사이트">
<title>Responsive Site</title>
<!-- favicon & icon -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/icon_57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/icon_114.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/icon_144.png">
<!-- style -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/lightgallery.css">
<!-- webfont -->
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css">
<!-- html5 Support -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<![endif]-->
<!-- ie Version Checker -->
<script src="assets/js/ie-checker.js"></script>
<!--[if lte IE 8]>
<p style="font-size: 12px; color: #fff; background: #2885b0; padding:5px 0; margin: 0; text-align: center">사용하고 계신 브라우저는 최신 웹 브라우저가 아닙니다. 업그레이드를 하거나 다른 최신 브라우저 사용을 권장합니다.
<a style="color:#f57c00;" href="http://www.microsoft.com/korea/ie" target="_blank" >익스플로러,</a>
<a style="color:#f57c00;" href="http://www.mozilla.or.kr/ko/" target="_blank">파이어폭스,</a>
<a style="color:#f57c00;" href="http://kr.opera.com/download/" target="_blank">오페라,</a>
<a style="color:#f57c00;" href="http://support.apple.com/kb/DL1531?viewlocale=ko_KR&locale=ko_KR" target="_blank">사파리,</a>
<a style="color:#f57c00;" href="http://www.google.com/chrome?hl=ko" target="_blank">크롬</a></p>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<div class="quick">
<div class="row">
<a href="#">Design Cafe</a>
<a href="#">Publisher Cafe</a>
</div>
</div>
<div class="title">
<p>Professional Web Publihser</p>
<h1><a href="#">Webstoryboy.co.kr</a></h1>
</div>
<div class="icon">
<ul>
<li><a href="#"><i class="fa fa-github" aria-hidden="true"></i><span>GITHUB</span></a></li>
<li><a href="#"><i class="fa fa-firefox" aria-hidden="true"></i><span>FIREFOX</span></a></li>
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i><span>FACEBOOK</span></a></li>
<li><a href="#"><i class="fa fa-css3" aria-hidden="true"></i><span>CSS3</span></a></li>
</ul>
</div>
</div>
</header>
<nav id="nav">
<div class="container">
<div class="row">
<div class="nav clearfix">
<h2>Responsive Site</h2>
<ul>
<li><a href="#">HTML Reference1</a></li>
<li><a href="#">HTML Reference2</a></li>
<li><a href="#">HTML Reference3</a></li>
<li><a href="#">HTML Reference4</a></li>
<li><a href="#">HTML Reference5</a></li>
<li><a href="#">HTML Reference6</a></li>
<li><a href="#">HTML Reference7</a></li>
<li><a href="#">HTML Reference8</a></li>
<li><a href="#">HTML Reference9</a></li>
<li><a href="#">HTML Reference10</a></li>
<li><a href="#">HTML Reference11</a></li>
<li><a href="#">HTML Reference12</a></li>
<li><a href="#">HTML Reference13</a></li>
<li><a href="#">HTML Reference14</a></li>
<li><a href="#">HTML Reference15</a></li>
<li><a href="#">HTML Reference16</a></li>
<li><a href="#">HTML Reference17</a></li>
<li><a href="#">HTML Reference18</a></li>
<li><a href="#">HTML Reference19</a></li>
<li><a href="#">HTML Reference20</a></li>
<li><a href="#">HTML Reference21</a></li>
<li><a href="#">HTML Reference22</a></li>
<li><a href="#">HTML Reference23</a></li>
<li><a href="#">HTML Reference24</a></li>
<li><a href="#">HTML Reference25</a></li>
<li><a href="#">HTML Reference26</a></li>
<li><a href="#">HTML Reference27</a></li>
<li><a href="#">HTML Reference28</a></li>
<li><a href="#">HTML Reference29</a></li>
<li><a href="#">HTML Reference30</a></li>
</ul>
</div>
</div>
</div>
</nav>
<article id="tit">
<div class="container">
<div class="tit">
<h2>“나는 퍼블리셔다”</h2>
<a href="#" class="tit_btn">
<i class="fa fa-expand" aria-hidden="true"></i><span class="blind">메뉴 펼치기</span>
</a>
</div>
</div>
</article>
<main>
<section id="contents">
<div class="container">
<h2 class="blind">반응형 사이트 컨텐츠</h2>
<section id="cont_left">
<h3 class="blind">반응형 사이트 왼쪽 컨텐츠</h3>
<article class="cbox box1">
<h4 class="cbox_tit">MENU1</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- menu -->
<div class="menu">
<ul>
<li><a href="#">Cafe <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
<li><a href="#">Standard <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
<li><a href="#">Tutorial <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
<li><a href="#">Reference <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
<li><a href="#">Css <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
<li><a href="#">HTML5 <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
</ul>
</div>
<!--//menu -->
</article>
<article class="cbox box2">
<h4 class="cbox_tit">Notice</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- notice -->
<div class="notice">
<h5>Notice</h5>
<ul>
<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
</ul>
<a href="#" class="more">More <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
<!--//notice -->
<div class="notice2 mt15">
<h5>Notice2</h5>
<ul>
<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다.</a></li>
<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다.</a></li>
<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다.</a></li>
<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다.</a></li>
</ul>
<a href="#" class="more">More <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
<!-- notice2 -->
<!--//notice2 -->
</article>
<article class="cbox box3">
<h4 class="cbox_tit">Blog</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- blog -->
<div class="blog">
<h5>Figure</h5>
<figure>
<a href="#" class="blog_img">
<img src="assets/img/blog_img220.jpg" alt="blog1"><em>Blog</em>
</a>
<figcaption>웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다. 웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다. 웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</figcaption>
</figure>
</div>
<!--//blog -->
<!-- blog -->
<div class="blog2 mt15">
<h5>Figure</h5>
<figure>
<a href="#" class="blog_img">
<img src="assets/img/blog_img440.jpg" alt="blog2"><em>Blog</em>
</a>
<figcaption>웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다. 웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다. 웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</figcaption>
</figure>
</div>
<!--//blog -->
</article>
</section>
<section id="cont_center">
<h3 class="blind">반응형 사이트 왼쪽 컨텐츠</h3>
<article class="cbox box4">
<h4 class="cbox_tit">Slider</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- slider -->
<div class="slider">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="assets/img/g_img01.jpg" alt="이미지1"></div>
<div class="item"><img src="assets/img/g_img02.jpg" alt="이미지1"></div>
<div class="item"><img src="assets/img/g_img03.jpg" alt="이미지1"></div>
<div class="item"><img src="assets/img/g_img04.jpg" alt="이미지1"></div>
</div>
</div>
<!--//slider -->
</article>
<article class="cbox box5">
<h4 class="cbox_tit">MENU5</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- square -->
<div id="lightgallery" class="square clearfix">
<a href="assets/img/s_img01.png"><img src="assets/img/s_img01.png" alt="이미지1"></a>
<a href="assets/img/s_img02.png"><img src="assets/img/s_img02.png" alt="이미지2"></a>
<a href="assets/img/s_img03.png"><img src="assets/img/s_img03.png" alt="이미지3"></a>
<a href="assets/img/s_img04.png"><img src="assets/img/s_img04.png" alt="이미지4"></a>
<a href="assets/img/s_img05.png"><img src="assets/img/s_img05.png" alt="이미지5"></a>
<a href="assets/img/s_img06.png"><img src="assets/img/s_img06.png" alt="이미지6"></a>
<a href="assets/img/s_img07.png"><img src="assets/img/s_img07.png" alt="이미지7"></a>
<a href="assets/img/s_img08.png"><img src="assets/img/s_img08.png" alt="이미지8"></a>
<a href="assets/img/s_img09.png"><img src="assets/img/s_img09.png" alt="이미지9"></a>
<a href="assets/img/s_img10.png"><img src="assets/img/s_img10.png" alt="이미지10"></a>
</div>
<!--//square -->
</article>
<article class="cbox box6">
<h4 class="cbox_tit">MENU6</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- -->
<!--// -->
</article>
</section>
<section id="cont_right">
<h3 class="blind">반응형 사이트 왼쪽 컨텐츠</h3>
<article class="cbox box7">
<h4 class="cbox_tit">MENU7</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- -->
<!--// -->
</article>
<article class="cbox box8">
<h4 class="cbox_tit">MENU8</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- -->
<!--// -->
</article>
<article class="cbox box9">
<h4 class="cbox_tit">MENU9</h4>
<p class="cbox_desc">웹 반응형 사이트 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- -->
<!--// -->
</article>
</section>
</div>
</section>
</main>
<footer id="footer">
<h2>반응형 사이트 푸터</h2>
</footer>
<!-- jQuery -->
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/lightgallery.min.js"></script>
<script src="assets/js/custom.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Outliner</title>
</head>
<body>
<header>
<h1>반응형 사이트 타이틀</h1>
</header>
<nav>
<h2>반응형 사이트 전체메뉴</h2>
</nav>
<article>
<h2>반응형 사이트 서브 타이틀</h2>
</article>
<main>
<section>
<h2>반응형 사이트 컨텐츠</h2>
<section>
<h3>반응형 사이트 왼쪽 컨텐츠</h3>
<article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 가운데 컨텐츠</h3>
<article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 오른쪽 컨텐츠</h3>
<article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
</section>
</section>
</main>
<footer>
<h2>반응형 사이트 푸터</h2>
</footer>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Orbitron:400,900');
/* font-family: 'Orbitron', sans-serif; */
/* layout */
body {background: #f1f4fb url(../img/header_bg.jpg) repeat-x center top; }
#header {height: 327px;}
#nav {display: none;}
#tit {background-color: #fff; border-bottom: 1px solid #dbdbdb}
#contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont_left {float: left; width: 250px;}
#cont_center {overflow: hidden; margin-right: 250px; border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; min-height: 1300px;}
#cont_right {position: absolute; right: 0; top: 0; width: 250px; }
#footer {width: 100%; height: 200px; border-top: 1px solid #dbdbdb; }
/* container */
.container {position: relative; width: 1200px; margin: 0 auto;/* background: rgba(0,0,0,0.2); */}
/* quick */
.quick {text-align: right;}
.quick a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease;}
.quick a:hover {color: #ccc;}
/* title */
.title {text-align: center; text-transform: uppercase; margin-top: 70px; font-family: 'Orbitron', sans-serif; }
.title p {font-size: 27px; color: #fff; background-color: #51b0dc; display: inline-block; padding: 17px 20px 10px 20px; font-weight: 900; }
.title h1 a {color: #fff; background-color: #4a9abf; padding: 14px 20px 10px 20px; display: inline-block; font-size: 14px; font-weight: 400; margin-top: -7px; transition: box-shadow 0.3s ease; }
.title h1 a:hover {
box-shadow:
0 0 0 3px rgba(75,154,191,0.9) inset,
0 0 0 100px rgba(0,0,0,0.1) inset;
}
/* icon */
.icon {text-align: center; margin-top: 40px;}
.icon li {display: inline; margin: 0 2px;}
.icon li a {position: relative; display: inline-block; width: 66px; height: 66px; background-color: #3192bf; color: #fff; font-size: 35px; border-radius: 50%; transition: box-shadow 0.3s ease-in-out;}
.icon li a i {line-height: 66px;}
.icon li a span {opacity: 0; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-size: 12px; background: #3192bf; padding: 3px 9px; border-radius: 6px 0; transition: all 0.3s ease-in-out; }
.icon li a span:before {content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
border-top: 5px solid #3192bf;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.icon li a:hover {
box-shadow:
0 0 0 3px rgba(75,154,191,0.9) inset,
0 0 0 100px rgba(0,0,0,0.1) inset;
}
.icon li a:hover span {opacity: 1; top: -30px;}
.ie8 .icon li a span {display: none;}
/* nav */
.nav {padding: 30px 0;}
.nav h2 {font-size: 22px; color: #25a2d0; padding-bottom: 8px; text-transform: uppercase;}
.nav li {position: relative; float: left; width: 20%; padding-left: 8px; box-sizing: border-box;}
.nav li:before {content: ''; width: 3px; height: 3px; border-radius: 50%; background:#25a2d0; position: absolute; left: 0; top: 8px;}
.nav li a {padding: 3px; border-radius: 2px; font-size: 13px; line-height: 19px; color: #333; transition: all 0.1s;}
.nav li a:hover {background-color: #25a2d0; color: #fff;}
/* tit */
.tit {text-align: center; padding: 15px 0; }
.tit h2 {font-size: 39px; line-height: 44px; color: #0093bd; font-family: 'Nanum Brush Script';}
.tit .tit_btn {position: absolute; right: 0; top: 8px; display: inline-block; width: 60px; height: 60px; background-color: #3192bf; color: #fff; font-size: 35px; border-radius: 50%; }
.tit .tit_btn i {line-height: 60px;}
/* cbox */
.cbox {padding: 15px; border-bottom: 1px solid #dbdbdb; }
.cbox .cbox_tit {font-size: 20px; color: #2f7fa6; text-transform: uppercase; padding-bottom: 5px; }
.cbox .cbox_desc {border-bottom: 1px dashed #dbdbdb; padding-bottom: 15px; margin-bottom: 15px; color: #878787; line-height: 18px; }
.cbox.box1 { }
.cbox.box2 { }
.cbox.box3 {border-bottom: 0; }
.cbox.box4 { }
.cbox.box5 { }
.cbox.box6 {border-bottom: 0; }
.cbox.box7 { }
.cbox.box8 { }
.cbox.box9 {border-bottom: 0; }
/*#cont_left article:nth-child(4) { border-bottom: 0;}
#cont_center article:nth-child(4) { border-bottom: 0;}
#cont_right article:nth-child(4) { border-bottom: 0;}
#cont_left article:last-child { border-bottom: 0;}
#cont_center article:last-child { border-bottom: 0;}
#cont_right article:last-child { border-bottom: 0;}
#contents .cbox:nth-child(4n){ border-bottom: 0;}*/
/* menu */
.menu li {position: relative;}
.menu li a {font-size: 16px; text-transform: uppercase; color: #878787; border-bottom: 1px solid #dbdbdb; padding: 10px; display: block;}
.menu li a i {position: absolute; right: 10px; top: 15px;}
/* notice */
.notice {position: relative;}
.notice h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;}
.notice li:before {content: ''; width: 3px; height: 3px; border-radius: 50%;background-color: #449ce2; position: absolute; left: 0; top: 6px;}
.notice .more {position: absolute; right: 0; top: 3px; color: #878787; text-transform: uppercase; font-size: 10px; }
/* notice2 */
.notice2 {position: relative;}
.notice2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice2 li {position: relative; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-bottom: 3px;
display: -webkit-box;
-webkit-box-orient : vertical;
-webkit-line-clamp : 2;
line-height: 18px;
height: 36px;
word-wrap:break-word;
}
.notice2 li:before {content: ''; width: 3px; height: 3px; border-radius: 50%;background-color: #449ce2; position: absolute; left: 0; top: 6px;}
.notice2 .more {position: absolute; right: 0; top: 3px; color: #878787; text-transform: uppercase; font-size: 10px; }
/* blog */
.blog h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px; }
.blog .blog_img {display: block; position: relative; margin-bottom: 5px;}
.blog .blog_img:before {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; left: 0; top: 0; transition: all .3s ease-in-out; }
.blog .blog_img:hover:before {background-color: rgba(0,0,0,0.45);}
.blog .blog_img em {opacity: 0; position: absolute; left: 50%; top: 50%; font-size: 16px; color: #fff; transform: translate(-50%, -50%); transition: all .3s ease-in-out;}
.blog .blog_img:hover em {opacity: 1;}
/* blog */
.blog2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px; }
.blog2 .blog_img {display: block; position: relative; overflow: hidden; margin-bottom: 5px;}
.blog2 .blog_img:after {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; left: 0; top: 0; transition: all .3s ease-in-out; }
.blog2 .blog_img:hover:after {background-color: rgba(0,0,0,0.45);}
.blog2 .blog_img img {display: block; transform: scale(1,1); transition: all .3s ease-in-out; }
.blog2 .blog_img:hover img {transform: scale(1.2,1.2);}
.blog2 .blog_img em {opacity: 0; position: absolute; left: 50%; top: 50%; font-size: 16px; color: #fff; transform: translate(-50%, -50%); transition: all .3s ease-in-out; z-index: 100;}
.blog2 .blog_img:hover em {opacity: 1;}
/* square */
.square { }
.square a {position: relative; float:left; width: 19%; margin:0.5%; }
.square a:before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease; z-index: 100; background: rgba(0,0,0,0.6); padding: 3px 10px; color: #fff; border-radius: 3px;}
.square a:hover:before {opacity: 1;}
.square a:nth-child(1):before {content: 'blur'; }
.square a:nth-child(1) img:hover {filter: blur(3px);}
.square a:nth-child(2):before {content: 'Brightness'; }
.square a:nth-child(2) img:hover {filter : brightness(300%);}
.square a:nth-child(3):before {content: 'Contrast'; }
.square a:nth-child(3) img:hover {filter : contrast(300%);}
.square a:nth-child(4):before {content: 'Grayscale'; }
.square a:nth-child(4) img:hover {filter : grayscale(100%);}
.square a:nth-child(5):before {content: 'Hue-rotate'; }
.square a:nth-child(5) img:hover {filter : hue-rotate(300deg);}
.square a:nth-child(6):before {content: 'Invert'; }
.square a:nth-child(6) img:hover {filter : invert(100%);}
.square a:nth-child(7):before {content: 'Opacity'; }
.square a:nth-child(7) img:hover {filter : opacity(20%);}
.square a:nth-child(8):before {content: 'Saturate'; }
.square a:nth-child(8) img:hover {filter : saturate(200%);}
.square a:nth-child(9):before {content: 'Sepia'; }
.square a:nth-child(9) img:hover {filter : sepia(100%);}
.square a:nth-child(10):before {content: 'drop-shadows'; }
.square a:nth-child(10) img:hover {filter : drop-shadow(5px 5px 10px black);}
/* mediaquery 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */
@media (max-width: 1280px){
.container {width: 100%;}
.row {padding: 0 15px;}
#contents .container {border: 0;}
.tit .tit_btn {right: 5px;}
}
@media (max-width: 1024px){
.nav li {width: 25%;}
}
@media (max-width: 960px){
.nav li {width: 33.3333%;}
#cont_center {margin-right: 0; border-right: 0;}
#cont_right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
.square a {width: 24%; }
.square a:nth-child(5n) {display: none;}
}
@media (max-width: 768px){
.nav li {width: 50%;}
.square a {width: 32.3333%; }
.square a:nth-child(5) {display: block;}
}
@media (max-width: 600px){
.nav {display: none;}
#cont_left {float: none; width: 100%;}
#cont_center {border-top: 1px solid #dbdbdb;}
.title, .icon, .tit .tit_btn {display: none;}
#header {height: auto;}
.cbox.box1 {padding: 0; border-bottom: 0;}
.cbox.box1 .cbox_tit {display: none;}
.cbox.box1 .cbox_desc {display: none;}
.cbox.box1 .menu li a i {display: none;}
.cbox.box1 .menu ul {overflow: hidden;}
.cbox.box1 .menu li {float: left; width: 33.333%; text-align: center; border-right: 1px solid #dbdbdb; box-sizing: border-box;}
.cbox.box1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
.cbox.box1 .menu li:nth-child(3n) {border-right:0;}
.cbox.box2 {background: #f1f4fb;}
.square a {width: 49%;}
.square a:nth-child(5) {display: none;}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
.square a {width: 98%; margin: 1%;}
}
@charset "utf-8";
/* 여백 초기화 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,figure,figcaption{margin:0;padding:0}
/* 테두리 초기화 */
fieldset,img{border:0 none}
/* 리스트 스타일 초기화 */
dl,ul,ol,menu,li{list-style:none}
/* 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:12px; line-height: 18px; font-family:'나눔 고딕','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;color:#222;}
a{color:#222;text-decoration:none}
a:hover{color:#118eff;text-decoration:none}
a:active{background-color:transparent}
/* 폰트 스타일 초기화 */
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
/* 폰트 두께 초기화 */
h1,h2,h3,h4,h5,h6,strong {font-weight: normal;}
/* blind 효과 */
.blind {position: absolute; left: 0; top: 0; width: 0; height: 0;
line-height: 0; font-size: 0; overflow: hidden;}
/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display:block;content:'';line-height:0;}
.clearfix:after {clear:both;}
/* 반응형 img */
img {width: 100%; display: block;}
/* padding, margin setting */
.pt00 {padding-top: 0px !important;}
.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}
.pl00 {padding-left: 0px !important;}
.pl05 {padding-left: 5px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pl35 {padding-left: 35px !important;}
.pl40 {padding-left: 40px !important;}
.pl45 {padding-left: 45px !important;}
.pl50 {padding-left: 50px !important;}
.pl55 {padding-left: 55px !important;}
.pl60 {padding-left: 60px !important;}
.pr00 {padding-right: 0px !important;}
.pr05 {padding-right: 5px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}
.pr30 {padding-right: 30px !important;}
.pr35 {padding-right: 35px !important;}
.pr40 {padding-right: 40px !important;}
.pr45 {padding-right: 45px !important;}
.pr50 {padding-right: 50px !important;}
.pr55 {padding-right: 55px !important;}
.pr60 {padding-right: 60px !important;}
.pb00 {padding-bottom: 0px !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 45px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb55 {padding-bottom: 55px !important;}
.pb60 {padding-bottom: 60px !important;}
.mt00 {margin-top: 0px !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}
.ml00 {margin-left: 0px !important;}
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml55 {margin-left: 55px !important;}
.ml60 {margin-left: 60px !important;}
.mr00 {margin-right: 0px !important;}
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr55 {margin-right: 55px !important;}
.mr60 {margin-right: 60px !important;}
.mb00 {margin-bottom: 0px !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}
728x90
