HTML5 Responsive

사이트 바로가기

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<!-- 	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta http-equiv="Content-Style-Type" content="text/css"> -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="seola">
	<meta name="description" content="반응형 웹 페이지를 만들기 위한 교육 사이트입니다.">
	<meta name="keywords" content="반응형 웹 페이지, HTML5, Responsive, Site">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Responsive Site</title>

	<!--style-->
	<link rel="stylesheet" href="assets/css/reset.css">
	<link rel="stylesheet" href="assets/css/style.css">
	<link rel="stylesheet" href="assets/css/owl.carousel.css">
	<link rel="stylesheet" href="assets/css/lightgallery.css">
	<link rel="stylesheet" href="assets/css/lg-fb-comment-box.css">
	<link rel="stylesheet" href="assets/css/lg-transitions.css">


	<!-- web font -->
	<link href='http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" />

	<!-- font css -->
	<link rel="stylesheet" href="assets/css/font-awesome.css">


	<!-- HTML5 Support & ie version Checker -->

	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/ie-checker-min.js"></script>


	<!-- favicon -->
	<link rel="shortcut icon" href="assets/icon/favicon.ico">
	<link rel="apple-touch-icon" href="assets/icon/icon_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="assets/icon/icon_76.png">
	<link rel="apple-touch-icon" sizes="120x120" href="assets/icon/icon_120.png">
	<link rel="apple-touch-icon" sizes="152x152" href="assets/icon/icon_152.png">

	<!--[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="row">
				<div class="quick">
					<a href="#">Design Cafe</a>
					<a href="#">Publisher Cafe</a>
				</div>
				<div class="title">
					<p>Shimmy Shimmy KOKOBOP</p>
					<h1><a href="#">seolakim.com</a></h1>
				</div>
				<div class="icon-font">
					<ul>
						<li>
							<a href="#">
								<i class="fa fa-superpowers" aria-hidden="true"></i>
								<span>500px</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="fa fa-at" aria-hidden="true"></i>
								<span>behance</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="fa fa-bookmark" aria-hidden="true"></i>
								<span>edge</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="fa fa-comment" aria-hidden="true"></i>
								<span>plus</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</header>
	<nav id="nav">
		<div class="container">
			<div class="row">
				<div class="nav">
					<h2>HTML/CSS Responsive</h2>
					<ul class="clearfix">
						<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>
				<span class="btn"><a href="#c"><i class="fa fa-angle-down" aria-hidden="true"></i></a></span>
			</div>
		</div>
	</article>

	<main>
		<section id="contents">
			<div class="container">
				<h2 class="ir_pm">반응형 사이트 컨텐츠</h2>
				<section id="cont_left">
					<h3 class="ir_pm">반응형 사이트 왼쪽 컨텐츠</h3>
					<article class="cbox box1">
						<h4 class="cbox_tit">Menu</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="#">HTML<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>Graphic Design</h5>
							<ul>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
							</ul>
							<span class="more"><a href="#">more <i class="fa fa-plus-square-o" aria-hidden="true"></i></a></span>
						</div>
						<!-- //notice -->
						<!-- notice -->
						<div class="notice mt15">
							<h5>Graphic Design</h5>
							<ul>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
								<li><a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.</a></li>
							</ul>
							<span class="more"><a href="#">more <i class="fa fa-plus-square-o" aria-hidden="true"></i></a></span>
						</div>
						<!-- //notice -->
					</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/fullimage1.jpg" alt="blog image" /><em>blog</em>
								</a>
								<figcaption>웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</figcaption>
							</figure>
						</div>
						<!-- //blog -->
						<!-- blog2 -->
						<div class="blog2 mt15">
							<h5>Figure</h5>
							<figure>
								<a href="#" class="blog_img">
									<img src="assets/img/fullimage2.jpg" alt="blog image" /><em>blog2</em>
								</a>
								<figcaption>웹 퍼블리싱과 관련된 정보 공유 및 교육웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다
								</figcaption>
							</figure>
						</div>
						<!-- //blog2 -->
					</article>
				</section>
				<!-- //cont_left -->
				<section id="cont_center">
					<h3 class="ir_pm">반응형 사이트 가운데 컨텐츠</h3>
					<article class="cbox box4">
						<h4 class="cbox_tit">Gallery</h4>
						<p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</p>
						<!-- gallery -->
						<!-- gallery -->
							<div class="gallery">
								<div id="owl-demo" class="owl-carousel owl-theme">
									<div class="item"><img src="assets/img/fullimage3.jpg" alt=""></div>
									<div class="item"><img src="assets/img/fullimage4.jpg" alt=""></div>
									<div class="item"><img src="assets/img/fullimage5.jpg" alt=""></div>
									<div class="item"><img src="assets/img/fullimage6.jpg" alt=""></div>
									<div class="item"><img src="assets/img/fullimage7.jpg" alt=""></div>
								</div>
							</div>
							<!-- //gallery -->
						<!-- //gallery -->


					</article>
					<article class="cbox box5">
						<h4 class="cbox_tit">SQUARE</h4>
						<p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</p>
						<!-- square -->
						<div id="lightgallery" class="square clearfix">
							<a href="assets/img/d1_800.jpg"><img src="assets/img/a1_600.jpg" alt="이미지1"></a>
							<a href="assets/img/d2_800.jpg"><img src="assets/img/a2_600.jpg" alt="이미지2"></a>
							<a href="assets/img/d3_800.jpg"><img src="assets/img/a3_600.jpg" alt="이미지3"></a>
							<a href="assets/img/d4_800.jpg"><img src="assets/img/a4_600.jpg" alt="이미지4"></a>
							<a href="assets/img/d5_800.jpg"><img src="assets/img/a5_600.jpg" alt="이미지5"></a>
							<a href="assets/img/d6_800.jpg"><img src="assets/img/a6_600.jpg" alt="이미지6"></a>
							<a href="assets/img/d7_800.jpg"><img src="assets/img/a7_600.jpg" alt="이미지7"></a>
							<a href="assets/img/d8_800.jpg"><img src="assets/img/a8_600.jpg" alt="이미지8"></a>
							<a href="assets/img/d9_800.jpg"><img src="assets/img/a9_600.jpg" alt="이미지9"></a>
							<a href="assets/img/d10_800.jpg"><img src="assets/img/a10_600.jpg" alt="이미지10"></a>
						</div>
						<!-- //square -->

					</article>
					<article class="cbox box6">
						<h4 class="cbox_tit">Video</h4>
						<p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</p>
						<!-- video -->
						<div class="video">
							<!-- 								<video controls="controls" autoplay="autoplay" loop="loop">
									<source src="assets/img/video.mp4" type="video/mp4" >
								</video> -->
							<iframe class="iframe" src="https://www.youtube.com/embed/siLOP8HY4Dg" allowfullscreen></iframe>
						</div>
						<!-- //video -->
					</article>
				</section>
				<!-- //cont_center -->
				<section id="cont_right">
					<h3 class="ir_pm">반응형 사이트 오른쪽 컨텐츠</h3>
					<article class="cbox box7">
						<h4 class="cbox_tit">Img1</h4>
						<p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</p>
						<!-- figure-img1 -->
						<div class="fimg">
							<img src="assets/img/go1.jpg" alt="이미지">
						</div>
						<!-- //figure-img1 -->

					</article>
					<article class="cbox box8">
						<h4 class="cbox_tit">Img2</h4>
						<p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</p>
						<!-- figure-img2 -->
						<div class="fimg2">
							<img src="assets/img/go2.jpg" alt="이미지">
						</div>
						<!-- //figure-img2 -->
					</article>
					<article class="cbox box9">
						<h4 class="cbox_tit">Img3</h4>
						<p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다</p>
						<!-- figure-img3 -->
						<div class="fimg3">
							<img src="assets/img/go3.jpg" alt="이미지">
						</div>
						<!-- //figure-img3 -->
					</article>
				</section>
				<!-- //cont_right -->
			</div>
		</section>
	</main>

	<footer id="footer">
		<div class="container">
			<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>
			<address>
                        <em>Copyright © </em>
                        <a href="http://seola94.dothome.co.kr"><strong>seolakim</strong></a>
                        <span>All Right Reserved</span>
                    </address>
			<!--               <p style="padding-top:20px;">
 
                         <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> -->
			<p style="padding-top:20px;">
				<a href="http://validator.kldp.org/check?uri=referer"><img style="border:0;width:80px;height:15px" src="//validator.kldp.org/w3cimgs/validate/html5-blue.png" alt="Valid HTML 5">
				</a>
			</p>


		</div>
	</footer>

	<!-- script -->
	<script type="text/javascript" src="assets/js/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/owl.carousel.js"></script>
	<script type="text/javascript" src="assets/js/lightgallery.min.js"></script>
	<script type="text/javascript" src="assets/js/lg-autoplay.min.js"></script>
	<script type="text/javascript" src="assets/js/lg-thumbnail.min.js"></script>
	<script type="text/javascript" src="assets/js/lg-hash.min.js"></script>
	<script type="text/javascript" src="assets/js/lg-fullscreen.min.js"></script>
	<script type="text/javascript" src="assets/js/custom.js"></script>
	<script>
    lightGallery(document.getElementById('lightgallery'));
</script>



</body>

</html>

					
/* layout */
body {
    background: #f1f4fb url(../img/header_bg.jpg) repeat-x center top;
}
#header {
    
} 
#nav {}
#tit {
    background-color: #fff;
    border-bottom: 1px solid #dbdbdb;
    padding: 2px 0;
}
#content{}
#contents .container {
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
}
#cont_left {
    width: 250px; 
    float: left;  
 
}
#cont_center {
    overflow: hidden; 
    margin-right: 250px; 
    border-right: 1px solid #dbdbdb;
    border-left:1px solid #dbdbdb;
    min-height: 1347px;
}
#cont_right {
    width: 250px; 
    position: absolute; 
    right: 0; 
    top: 0;  
   
}
#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.4); */
}


/* quick */
.quick {
    text-align: right;
}
.quick a{ 
    color: #fff;
    padding: 4px 0 4px 10px;
    transition: all 0.5s ease;
    display: inline-block;
    
}

.quick a:hover {
    color: #ccc;
}


/* title */
.title { 
    text-align: center;
    text-transform: uppercase;
    margin-top: 70px;
    
}
.title p {
    color:#fff;
    background-color: #2698cb;
    display: inline;
    padding: 10px 20px;
    font-size: 24px;
    margin-top: 70px;
   

}
.title h1 {
    
    
}
.title h1 a{
    color:#fff;
    background-color: #4a9abf;
    padding: 10px 20px;
    margin-top: -4px;
    font-size: 14px;
    display: inline-block;
    transition: all .3s ease-in-out
   

}
.title h1 a:hover{
     box-shadow: 0 0 50px 20px #A0D9E2 inset;
}

/* icon-font */
.icon-font {  
    text-align: center;
    margin-top: 40px;
    padding-bottom: 50px;
}
.icon-font ul {}
.icon-font li {
    
    display: inline;
    margin: 0 2px;
}
.icon-font li a {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #3192bf;
    font-size: 35px;
    border-radius: 50%;
    color: #fff;
}
.icon-font li a span {
    opacity: 0;
    position: relative;
    font-size: 12px;
    background-color: #3192bf;
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    padding: 1px 7px;
    border-radius: 6px 0;
    transition: all .3s ease-in-out;
}
.icon-font 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-font li a:hover span{
    opacity: 1;
    top: -30px;
}
.ie8 .icon-font li a span{
    display: none;
}

/* nav */
.nav {
    padding: 30px 0;
	display: none;
    
}
.nav.on{
    display:block;
}
.nav h2 {
    font-size: 16px;
    color: #25a2d0;
    padding-bottom: 5px;
}
.nav ul {
    
}
.nav li {
    position: relative;
    float: left;
    width: 20%;
    
}
.nav li:before{
    content : '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #25a2d0;
    position: absolute;
    top: 10px;
}
.nav li a {
    margin-left: 8px;
    padding: 3px;
    border-radius: 2px;
}
.nav li a:hover{
    background-color: #25a2d0;
    color: #fff;
}


/* tit */
.tit {
    text-align: center;
    position: relative;
}
.tit h2 {
    font-size: 39px;
    color: #0093bd;
    font-family: 'Nanum Brush Script';
}
.tit .btn {
    position: absolute;
    top: 5px;
    right: 10px;
    
}
.tit .btn a {
    width: 57px;
    height: 57px;
    display: block;
    background-color: #25a2d0;
    color: #fff;
    font-size: 30px;
    border-radius: 50%;
    line-height: 57px;
    
}

/* cbox */
.cbox{
    border-bottom: 1px solid #dbdbdb;
    padding: 15px;
}
.cbox .cbox_tit {
    font-size: 20px;
    color: #2f7fa6;
    text-transform: uppercase;
}
.cbox .cbox_desc {
    border-bottom: 1px dashed #dbdbdb;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: #878787;
}
.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;      
}

/* menu */
.menu li {
    position: relative;
    
}
.menu li a{
    font-size: 16px;
    text-transform: uppercase;
    color: #878787;
    padding: 10px;
    display:block;
    border-bottom: 1px solid #dbdbdb;   
    
}
.menu li a:hover{
    color: #000;
}
.menu li i {
    position: absolute;
    top: 15px;
    right: 10px;
}

/* notice */
.notice {
    position: relative;
}
.notice h5{
    font-size: 14px;
    color: #2f7fa6;
}

.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: #25a2d0;
    position: absolute;
    top: 10px;
    left:0;
}
.notice .more{
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 9px;
    text-transform: uppercase;
   
}
.notice .more a {
     color: #878787;
}


/* blog */
.blog {}
.blog h5 {
    font-size: 14px;
    color: #2f7fa6;
    padding-bottom: 3px;
}
.blog .blog_img{
    position: relative;
    display: block;
    margin-bottom: 3px;
}
.blog .blog_img:after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 0.3s ease-in-out;
    z-index: 50;
}
.blog .blog_img:hover:after{
    background-color: rgba(0,0,0,0.4);
}
.blog .blog_img img{
    display: block;
}
.blog .blog_img em {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%,-50%);
    z-index: 100;
    font-size: 16px;
    font-weight: bold;
}
.blog .blog_img:hover em{
    opacity: 1;
}

/* blog2  */
.blog2 h5 {
    font-size: 14px; 
    color: #2f7fa6; 
    padding-bottom: 3px;  
}
.blog2 .blog_img {
    position: relative; 
    display: block;  
    margin-bottom: 3px;
    overflow: hidden;
}
.blog2 .blog_img:after {
    content: ''; 
    width: 100%; 
    height: 100%; 
    display: block;
    position: absolute; 
    left: 0; 
    top: 0; 
    background-color: rgba(0,0,0,0); 
    transition: all 0.3s ease-in-out;
}
.blog2 .blog_img:hover:after {
    background-color: rgba(0,0,0,0.4);
}
.blog2 .blog_img img {
    display: block; 
    transform: scale(1,1);
    transition: all 0.3s ease-in-out;
    
}
.blog2 .blog_img:hover img {
    transform: scale(1.3,1.3);
    
}
.blog2 .blog_img em {
    opacity: 0; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    color: #fff; 
    transform: translate(-50%,-50%); 
    text-transform: uppercase; 
    z-index: 100; 
    font-size: 16px;
}
.blog2 .blog_img:hover em {
    opacity: 1;
} 

/* square */
.square{}
.square a{
    width: 19%;
    margin: 0.5%;
    float: left;
}
.square a img{ 
    display: block;
    
}
.square a:nth-child(1) img:hover{
    filter : invert(40%);
}
.square a:nth-child(2) img:hover{
    filter : saturate(300%);
}
.square a:nth-child(3) img:hover{
    filter : sepia(20%);
}
.square a:nth-child(4) img:hover{
    filter : hue-rotate(250deg);
}
.square a:nth-child(5) img:hover{
    filter : grayscale(80%);
}
.square a:nth-child(6) img:hover{
    filter : contrast(300%);
}
.square a:nth-child(7) img:hover{
    filter : brightness(200%);
}
.square a:nth-child(8) img:hover{
    filter : blur(15px)
}
.square a:nth-child(9) img:hover{
    filter : hue-rotate(50deg);
}
.square a:nth-child(10) img:hover{
    filter : opacity(30%);
}

/* video */
.video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}
.video .iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    border: 0;
}


/* footer */

/* footer */
#footer {
    text-align:center;
    padding: 30px 0;
    
}

#footer li {
    display: inline-block;
    padding: 0 10px;
    background: url(../img/bar.gif) no-repeat 0 5px;
}
#footer li:first-child{
    background: none;

}
#footer address {
    padding-top: 20px;
} 



/* #contents .container article:last-child{
    border-bottom: 0;
} */

/* MediaQuery 320 / 480 /768 / 960 / 1024 / 1280 */
/* 화면 너비 0~1280px 피시화면 */
@media (max-width: 1280px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
    #contents .container{border: 0;}
}

/* 화면너비 0~1024px */
@media (max-width:1024px) {
    .nav li {width: 25%; }
    
}

/* 화면너비 0~960px */
@media (max-width:960px) {
   #cont_right {position: static; border-top: 1px solid #dbdbdb;  width: 100%;} 
    #cont_center {margin-right: 0px; border-right: 0;}
    .square a {width: 24%;}
	.square a:nth-child(5n) {display: none;}
     #cont_right {
        overflow: hidden;
    }
    #cont_right .cbox {
        width:33.33333%;
        float: left;
        box-sizing: border-box;
    }
    #cont_right .box7 {
        border-right:1px solid #dbdbdb;
        border-bottom:0;
    }
    #cont_right .box8 {
        border-right:1px solid #dbdbdb;
        border-bottom:0;
    }
    #cont_right .box9 {
        border-right:1px solid transparent;
    }
    

    
}

/* 화면너비 0~768px 타블렛 */
@media (max-width:768px) {
    .nav li {width:33.33333%; }
    .square a {width: 32.333333%;}
	.square a:nth-child(5) {display: block;}
    
}

/* 화면너비 0~600px 모바일 */
@media (max-width:600px) {
    .nav {display: none;}
    #cont_left{ width:100%; float: none;}
    #cont_center{border-left: 0; border-top: 1px solid #dbdbdb;}
    .title, .icon-font, .tit .btn {display: none;}
    .cbox.box1 {padding: 0; border-bottom:0;}
    .cbox.box1 .cbox_tit {display: none;}
    .cbox.box1 .cbox_desc {display: none;}
    .cbox.box1 .menu li i {display: none;}
    .cbox.box1 .menu ul {overflow: hidden;}
    .cbox.box1 .menu li {float: left; width: 33.3333%; border-right: 1px solid #dbdbdb;
    box-sizing: border-box;text-align: center;}
    .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-color: #f1f4fb;}
    .square a {width: 49%;}
	.square a:nth-child(5) {display: none;}
     #cont_right {
        overflow: hidden;
    }
    #cont_right .cbox {
        width:50%;
        float: left;
        box-sizing: border-box;
    }
    #cont_right .box7 {
        border-right:1px solid #dbdbdb;
    }
    #cont_right .box8 {
        display: none;
      
    }
    
   


}

/* 화면너비 0~480px 모바일 */
@media (max-width:480px) {
    
}

/* 화면너비 0~320px 모바일(iphone 5s) */
@media (max-width:320px) {
    .square a {width: 98%; margin: 1%;}
    #cont_right .cbox {
        width:100%;
        float: left;
        box-sizing: border-box;
    }
        #cont_right .box7 {
        border-right:0;
        border-bottom: 1px solid #dbdbdb;
    }
    
}					


					
@charset "UTF-8";

/* 여백 초기화 */
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul,figure,figcaption{margin:0;padding:0}

/* 테두리 초기화 */
fieldset,img{border:0 none}

/* 리스트 스타일 초기화 */
dl,ul,ol,menu,li{list-style:none}

/* quotes 초기화 */
blockquote, q{quotes: none}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none}

/* 정렬 초기화 */
input,select,textarea,button{vertical-align:middle}

/* 버튼 초기화 */
button{border:0 none;background-color:transparent;cursor:pointer}

/* 배경 속성 초기화 */
body{background:#fff;direction:ltr;-webkit-text-size-adjust:none}

/* 제목 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:12px;line-height:1.7;font-family:"나눔 고딕", "Nanum Gothic","Malgun Gothic","맑은 고딕",dotum,"돋움",sans-serif;color:#222;}
h1,h2,h3,h4,h5,h6 {font-size: 12px; font-weight: normal;}

/* 링크 초기화 */
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}

/* 반응형 이미지 */
img, video {width: 100%;}




/* ir 효과 */
.ir_pm{display:block;overflow:hidden;font-size:1px;line-height:0;text-indent:-9999px}
.ir_wa{display:block;overflow:hidden;position:relative;width:100%;height:100%;z-index:-1}
.show{display:block}
.hide{display:none}

/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after{display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}

/* 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;}