Responsive(HTML5)

HTML5 Responsive

사이트 바로가기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<!--<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, chrome=1"> -->
	<meta name="author" content="webstoryboy">
	<meta name="description" content="반응형 웹 페이지를 만들기 위한 교육 사이트입니다.">
	<meta name="keywords" content="반응형 웹페이지 , HTML5, Responsive Site">  

	<title>Responsive Site</title>
	
	<!-- js-->	
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/ie-checker-min.js"></script>

	<!-- 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">


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

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

	<!-- HTML 5 Support & js Version Checker-->

		<!--[If IE 9]>
			 <script src="assets/js/html5shiv.min.Js"></script>
			 <script src="assets/js/ie-checker-min.Js"></script>
			 <![endif]-->

			 <!-- favicon-->
			 <link rel="shortcut icon" href="assets/ico/favicon.ico">
			 <link rel="apple-touch-icon" href="assets/ico/icon_60.png">
			 <link rel="apple-touch-icon" sizes="76x76" href="assets/ico/icon_76.png"> 
			 <link rel="apple-touch-icon" sizes="120x120" href="assets/ico/icon_120.png"> 
			 <link rel="apple-touch-icon" sizes="152x152" href="assets/ico/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="quick">
					<a href="#">Design Cafe</a>
					<a href="#">Publisher Cafe</a>
				</div>
				<div class="title">

					<p>Professoional Web Publisher</p>
					<h1><a href="#">sojinkim.co.kr</a></h1>
				</div>

				<div class="icon-font">
					<ul>
						<li><a href="#"><i class="fa fa-lightbulb-o" aria-hidden="true"></i><span>idea</span></a></li>
						<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i><span>behance</span></a></li>
						<li><a href="#"><i class="fa fa-edge" aria-hidden="true"></i><span>edge</span></a></li>
						<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i><span>google</span></a></li>
					</ul>
				</div>


			</div>
		</header>

		<nav id="nav">
			<div class="container">
				<div class="row">	
					<div class="nav">	
						<h2>HTML/CSS  Reference</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="#"><i class="fa fa-bars" 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="#">Standerd<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>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>
						<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>Figure2</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 -->
							<div class="gallery">
								<div id="owl-demo" class="owl-carousel owl-theme">
									<div class="item"><img src="assets/img/fullimage3.jpg" alt="이미지1"></div>
									<div class="item"><img src="assets/img/fullimage4.jpg" alt="이미지2"></div>
									<div class="item"><img src="assets/img/fullimage5.jpg" alt="이미지3"></div>
									<div class="item"><img src="assets/img/fullimage6.jpg" alt="이미지4"></div>
									<div class="item"><img src="assets/img/fullimage7.jpg" alt="이미지5"></div>
								</div>
							</div>
					<!-- //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/DtlLNqvLAok" 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="fimg1">	
						<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="이미지2">
						
					</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="이미지3">
						
					</div>
					<!-- //figure-img3-->
				</article>
			</section> 
			<!-- //cont-right -->            
		</div>

	</section>
</main>

<footer id="footer">          
	<div class="container">
		<div class="footer">
		<ul>
			<li><a href="#"><span>사이트 도움말</span></a></li>
			<li><a href="#">사이트 이용약관</a></li>
			<li><a href="#">사이트 운영원칙</a></li>
			<li><a href="#"><strong>개인정보 취급방침</strong></a></li>
			<li><a href="#">책임의 한계와 법적고지</a></li>
			<li><a href="#">게시중단요청서비스</a></li>
			<li><a href="#">고객센터</a></li>
		</ul>
				<address>
				  <em>Copyright ©</em>
					<a href="http://sojinkim.co.kr">sojinkim.co.kr</a>
					<span>All Right Reserved</span>
				</address>
				<p style="padding-top:20px;">
					<p>
					<a href="http://jigsaw.w3.org/css-validator/check/referer">
						<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="올바른 CSS입니다!" />
					</a>
				</p>
		</div>
	</div>
</footer>
<!-- scrtip -->
    <script type="text/javascript" src="assets/js/jquery1.12.4.min.js"></script>
     <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
     <script type="text/javascript" src="assets/js/lightgallery.min.js"></script>
     <script type="text/javascript" src="assets/js/custom.js"></script>
     <script type="text/javascript" src="assets/js/custom.js"></script>
     <script type="text/javascript" src="assets/js/custom.js"></script>
     <script src="assets/js/lg-autoplay.min.js"></script>
	<script src="assets/js/lg-thumbnail.min.js"></script>
	<script src="assets/js/lg-hash.min.js"></script>
	<script src="assets/js/lg-fullscreen.min.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 {display: none; }
#tit {background-color: #fff;  border-bottom:1px solid #000; padding: 2px 0;}
#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 {width: 1200px; margin: 0 auto; position: relative;
 /*background: rgba(0,0,0,0.4);*/}


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

/* title */
.title {text-align: center; text-transform: uppercase; margin-top: 70px;}
.title  p {font-size: 24px; color: #fff; background-color: #51b0dc; display: inline; padding: 10px 20px;  }
.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 0 3px rgba(75,154,191,0.9) inset,
    0 0 0 100px rgba(0,0,0,0.1) inset;
}

/* icon-font */
.icon-font {text-align: center; margin-top: 40px; padding-bottom: 50px;}
.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: -40px; 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;  }
.nav h2 {font-size: 16px; color: #25a2d0; padding-bottom: 5px;}
.nav li {position: relative; float: left; width: 20%; }
.nav li:before {content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #25a2d0; position: absolute; left: 0; top: 8px;}
.nav li a {margin-left: 8px; padding: 3px; border-radius: 2px;}
.nav li a:hover {background-color: #25a2d0; color: #fff;}


/* tit */
.tit {position: relative; text-align: center;}
.tit h2 {font-size: 39px; color: #0093bd; font-family: 'Nanum Brush Script';  }
.tit .btn {position: absolute; right: 0; top: 3px;}
.tit .btn a {width: 60px; height: 60px; background-color: #4a9abf; display: block;
color: #fff; border-radius: 50%;  font-size: 33px; line-height: 60px;}


/* cbox */
.cbox {padding: 15px; border-bottom: 1px solid #dbdbdb;  }
.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; } 

/*/*#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(4) {border-bottom: 0;}
#cont_center article:last-child(4) {border-bottom: 0;}
#cont_right article:last-child(4) {border-bottom: 0;}
#contents article:last-child {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;  }
.notice li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  padding-left: 8px;}
.notice li:before {content: ''; width: 3px; height: 3px; background-color: #449ce2; position: absolute; left: 0; top: 8px; border-radius: 50%;}
.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; background-color: #111; margin-bottom: 3px;} 
.blog .blog_img:after {content: '';width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute;left: 0;top: 0;	z-index:50;transition: background-color 0.3s ease-in-out;}

.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; left: 50%;	top: 50%;	color: #fff; transform: translate(-50%,-50%); z-index:100;
					text-transform: uppercase; font-size: 16px;	}
.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; background-color: #111; margin-bottom: 3px; overflow: hidden; } 
.blog2 .blog_img:after {content: '';width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute;left: 0;top: 0;	z-index:50;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);}
.blog2 .blog_img:hover img { transform: scale(1.3,1.3); transition: all 0.3s ease-in-out; }

.blog2 .blog_img em {opacity: 0;position: absolute; left: 50%;	top: 50%;	color: #fff; transform: translate(-50%,-50%); z-index:100;text-transform: uppercase; font-size: 16px;	}
.blog2 .blog_img:hover em {opacity: 1;}

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

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


/* footer */

.footer {text-align:center; padding: 30px 0;}
.footer ul { }
.footer li {display: inline; padding: 0 10px; background: url(../img/bar.gif) no-repeat 0 2px; white-space: nowrap;}
.footer address { padding-top: 20px;}
.footer li:first-child {background: none;}




/* Media Query 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */

/* 화면 너비 0~1280px pc 화면 */
@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: 0; border-right: 0;}
	.square a { float: left; width: 24%; }
	.square a:nth-child(5n) {display: none;}

#cont_right {overflow: hidden;	}
#cont_right .cbox {float: left; width: 33.333%; 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.3333%; }
.square a { float: left; width: 32.3333%;  }
.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 a i {display: none;}
	.cbox.box1 .menu ul {overflow: hidden;}
	.cbox.box1 .menu li {float: left; width: 33.33%; border-right: 1px solid #dbdbdb; box-sizing: border-box;
		text-align: center;}

	/*.cbox.box1 .menu li:nth-child(3) {border-right: 0;}
	.cbox.box1 .menu li:nth-child(6) {border-right: 0;}*/
	.cbox.box1 .menu li:nth-child(3n) {border-right: 0;}
	.cbox.box1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
	.cbox.box2 {background-color: #f1f4fb;}

.square a { float: left; width: 49%;  }
.square a:nth-child(5) {display: none;}
#cont_right .cbox {float: left; width: 50%; box-sizing: border-box;}
#cont_right .box8 { border-right: 1px solid transparent;  border-bottom: 0; }
#cont_right .box9 { border-right: 1px solid transparent; display: none;}

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

}

/* 화면 너비 0~320px 모바일(아이폰 5s) */
@media (max-width : 320px){
	.square a { float: left; width: 98%; margin: 1%; }
	#cont_right .cbox {float: left; width: 100%;}
	#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;}