<!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="LEEHUN">
<meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트입니다.">
<meta name="keywords" content="LEEHUN,웹퍼블리셔,웹표준,웹접근성">
<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/owl.theme.css">
<link rel="stylesheet" href="assets/css/owl.transitions.css">
<link rel="stylesheet" href="assets/css/lightgallery.css">
<!-- font -->
<link rel="stylesheet" href="assets/css/font-awesome.css">
<!-- html5shiv -->
<script src="assets/js/html5shiv.js"></script>
<!-- ie-checker.js -->
<script src="assets/js/ie-checker.js"></script>
<!--[If IE 8]>
<script type="text/javascript">
alert("Please Upgrade Your BROWSER !");
</script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="quick">
<a href="#">Designer Cafe</a>
<a href="#">Publisher Cafe</a>
</div>
<div class="title">
<h1>Professional Web Publisher</h1><br>
<a href="#">leehun.dothome.co.kr</a>
</div>
<div class="icon">
<ul>
<li><a href="https://github.com/wognsl305/site" target="_blank"><i class="fa fa-github" aria-hidden="true"></i><span>github</span></a></li>
<li><a href="http://leehun.dothome.co.kr/wordpress/" target="_blank"><i class="fa fa-wordpress" aria-hidden="true"></i><span>wordpress</span></a></li>
<li><a href="http://leehun.tistory.com/" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i><span>tistory</span></a></li>
<li><a href="https://codepen.io/wognsl305/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i><span>codepen</span></a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- header -->
<nav id="nav">
<div class="container">
<div class="row">
<div class="nav">
<h2>Responsive Menu</h2>
<ul class="clearfix">
<li><a href="#"><span>Reference1</span></a></li>
<li><a href="#"><span>Reference2</span></a></li>
<li><a href="#"><span>Reference3</span></a></li>
<li><a href="#"><span>Reference4</span></a></li>
<li><a href="#"><span>Reference5</span></a></li>
<li><a href="#"><span>Reference6</span></a></li>
<li><a href="#"><span>Reference7</span></a></li>
<li><a href="#"><span>Reference8</span></a></li>
<li><a href="#"><span>Reference9</span></a></li>
<li><a href="#"><span>Reference10</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- nav -->
<article id="tit">
<div class="container">
<div class="tit">
<h2>"King God General LEE JAE HUN"</h2>
<a href="#" class="tit-btn">
<i class="fa fa-fire" aria-hidden="true"></i>
<!--<i class="fa fa-window-close" aria-hidden="true"></i>-->
<span class="screen_out">메뉴보기</span>
</a>
</div>
</div>
</article>
<main>
<section id="contents">
<div class="container">
<h2 class="screen_out">반응형 사이트 콘텐츠</h2>
<section id="cont-left">
<h3 class="screen_out">반응형 사이트 왼쪽 콘텐츠 </h3>
<article class="cbox box1">
<h4 class="cbox-tit">Menu</h4>
<p class="cbox-desc">여기는 반응형 메뉴 스타일 입니다.</p>
<!-- menu -->
<div class="menu">
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Standard</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Reference</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</div>
<!--//menu -->
</article>
<article class="cbox box2">
<h4 class="cbox-tit">Notice</h4>
<p class="cbox-desc">여기는 한줄 효과, 두줄 효과를 표현한 게시판 영역입니다.</p>
<!-- notice1 -->
<div class="notice1">
<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>
<a href="#" class="more">MORE <i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
<!--//notice1 -->
<!-- notice2 -->
<div class="notice2">
<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>
<a href="#" class="more">MORE <i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
<!--//notice2 -->
<!--//notice2 -->
</article>
<article class="cbox box3">
<h4 class="cbox-tit">Blog</h4>
<p class="cbox-desc">이미지 해상도에 따른 미디어쿼리 이미지 표현 부분입니다.</p>
<!-- blog1 -->
<div class="blog1">
<h5>Blog</h5>
<p>웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다.</p>
</div>
<!--//blog1-->
<!-- blog2 -->
<div class="blog2">
<h5>Blog</h5>
<p>웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다. 웹과 관련된 정보공유 및 교육 사이트입니다.</p>
</div>
<!--//blog2 -->
</article>
</section>
<section id="cont-center">
<h3 class="screen_out">반응형 사이트 가운데 콘텐츠 </h3>
<article class="cbox box4">
<h4 class="cbox-tit">Slider</h4>
<p class="cbox-desc">제이쿼리 플러그인을 이용한 이미지 반응형 슬라이드 영역입니다.</p>
<!-- slider -->
<div id="owl-demo" class="owl-carousel">
<div><img src="assets/img/g_img01.jpg" alt="1"></div>
<div><img src="assets/img/g_img02.jpg" alt="2"></div>
<div><img src="assets/img/g_img03.jpg" alt="3"></div>
</div>
<!--//slider -->
</article>
<article class="cbox box5">
<h4 class="cbox-tit">Notice</h4>
<p class="cbox-desc">여기는 게시판 노티스입니다.</p>
<!-- square -->
<div id="lightgallery" class="square">
<a href="assets/img/s_img01.png" class="blend-1"><img src="assets/img/s_img01s.jpg" class="blend1" alt="이미지1"></a>
<a href="assets/img/s_img02.png" class="blend-2"><img src="assets/img/s_img02s.jpg" class="blend2"alt="이미지2"></a>
<a href="assets/img/s_img03.png" class="blend-3"><img src="assets/img/s_img03s.jpg" class="blend3" alt="이미지3"></a>
<a href="assets/img/s_img04.png" class="blend-4"><img src="assets/img/s_img04s.jpg" class="blend4" alt="이미지4"></a>
<a href="assets/img/s_img05.png" class="blend-5"><img src="assets/img/s_img05s.jpg" class="blend5" alt="이미지5"></a>
<a href="assets/img/s_img06.png" class="blend-6"><img src="assets/img/s_img06s.jpg" class="blend6" alt="이미지6"></a>
<a href="assets/img/s_img07.png" class="blend-7"><img src="assets/img/s_img07s.jpg" class="blend7" alt="이미지7"></a>
<a href="assets/img/s_img08.png" class="blend-8"><img src="assets/img/s_img08s.jpg" class="blend8" alt="이미지8"></a>
<a href="assets/img/s_img09.png" class="blend-9"><img src="assets/img/s_img09s.jpg" class="blend9" alt="이미지9"></a>
<a href="assets/img/s_img10.png" class="blend-10"><img src="assets/img/s_img10s.jpg" class="blend10" 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 autoplay="autoplay" controls="controls" loop="loop"></video> -->
<iframe width="854" height="480" src="https://www.youtube.com/embed/_tGXFo7LgYE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<!--//video -->
</article>
</section>
<section id="cont-right">
<h3 class="screen_out">반응형 사이트 오른쪽 콘텐츠 </h3>
<article class="cbox box7">
<h4 class="cbox-tit">MENU7</h4>
<p class="cbox-desc">웹 반응형 사이드 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- himg1 -->
<div class="himg1">
<a href="#">
<div class="front"><img src="assets/img/go1.jpg" alt="go1"></div>
<div class="back"><i class="fa fa-heartbeat fa-4x" aria-hidden="true"></i></div>
</a>
</div>
<!--//himg1 -->
</article>
<article class="cbox box8">
<h4 class="cbox-tit">MENU8</h4>
<p class="cbox-desc">웹 반응형 사이드 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- himg2 -->
<div class="himg2">
<div class="back"></div>
<div class="slice s1">
<span class="overlay"></span>
<div class="slice s2">
<span class="overlay"></span>
<div class="slice s3">
<span class="overlay"></span>
<div class="slice s4">
<span class="overlay"></span>
<div class="slice s5">
<span class="overlay"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--//himg2 -->
</article>
<article class="cbox box9">
<h4 class="cbox-tit">MENU9</h4>
<p class="cbox-desc">웹 반응형 사이드 메뉴와 관련된 스크립트 내용입니다.</p>
<!-- himg3 -->
<div class="himg3">
<img src="assets/img/go3.jpg" alt="go3">
</div>
<!--//himg3 -->
</article>
</section>
</div>
</section>
</main>
<footer id="footer">
<div class="container">
<div class="footer">
<div class="row">
Copyright © leehun.dothome.co.kr All Right Reserved.
</div>
</div>
</div>
</footer>
<!-- script -->
<script src="assets/js/jquery.min_1.12.4.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/lightgallery-all.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$("#lightgallery").lightGallery();
$(document).ready(function() {
var time = 5;
var $progressBar,
$bar,
$elem,
isPause,
tick,
percentTime;
//Init the carousel
$("#owl-demo").owlCarousel({
slideSpeed : 500,
paginationSpeed : 500,
singleItem : true,
afterInit : progressBar,
afterMove : moved,
startDragging : pauseOnDragging,
transitionStyle : "goDown"
});
//Init progressBar where elem is $("#owl-demo")
function progressBar(elem){
$elem = elem;
buildProgressBar();
//start counting
start();
}
//create div#progressBar and div#bar then prepend to $("#owl-demo")
function buildProgressBar(){
$progressBar = $("<div>",{
id:"progressBar"
});
$bar = $("<div>",{
id:"bar"
});
$progressBar.append($bar).prependTo($elem);
}
function start() {
//reset timer
percentTime = 0;
isPause = false;
//run interval every 0.01 second
tick = setInterval(interval, 10);
};
function interval() {
if(isPause === false){
percentTime += 1 / time;
$bar.css({
width: percentTime+"%"
});
//if percentTime is equal or greater than 100
if(percentTime >= 100){
//slide to next item
$elem.trigger('owl.next')
}
}
}
//pause while dragging
function pauseOnDragging(){
isPause = true;
}
//moved callback
function moved(){
//clear interval
clearTimeout(tick);
//start again
start();
}
//uncomment this to make pause on mouseover
// $elem.on('mouseover',function(){
// isPause = true;
// })
// $elem.on('mouseout',function(){
// isPause = false;
// })
});
//버튼을 클릭하면 전체 메뉴를 보여준다.
$(".tit-btn").click(function(){
//$("#nav").css("display","block");
//$("#nav").toggle();
//$("#nav").fadeToggle();
$("#nav").slideToggle();
$(".tit-btn").toggleClass("open");
// 만약에 버튼한테 클래스 open 있으면
if($(".tit-btn").hasClass("open")){
//있으면 여기서 실행
$(".tit-btn > i").attr("class","fa fa-window-close");
} else {
//없으면 여기서 실행
$(".tit-btn > i").attr("class","fa fa-fire");
}
});
//변수 : 데이터를 저장할 수 있는 저장소
//버튼의 클래스 속성 값을 가지고 옮
//var bt = $(".tit-btn > i").attr("class");
//alert(bt);
//버튼의 클래스 속성 값을 변경
//$(".tit-btn > i").attr("class","fa fa-window-close");
//타이틀 h2의 콘텐츠 요소를 가지고 옮
//var ht =$(".tit > h2").text();
//alert(ht);
//버튼의 HTML 태그 요소를 가지고 옮
//var mt = $(".tit-btn").html();
//alert(mt);
</script>
</body>
</html>
/* layout */
body {background:url(../img/leaves-pattern.png); }
#header {height: 327px; background:url(../img/header_bg.jpg) center top; background-size: cover;}
#nav {display: none;}
#tit {background:rgba(255, 107, 0, 0.11);}
#contents {}
#contents .container {box-sizing: border-box; border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb;}
#cont-left {float: left; width: 250px; height: 1000px; }
#cont-center { box-sizing: border-box; overflow: hidden; margin-right: 250px; min-height: 1400px; border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont-right {position: absolute; right: 0; top: 0; width: 250px; height: 1000px; }
#footer {height: 200px; border-top: 1px solid #dbdbdb;}
/* container */
.container {position: relative; width: 1200px; margin: 0 auto; /* background: rgba(0,0,0,0.5); */}
/* header */
.quick {text-align: right; }
.quick a {position: relative; z-index: 10; padding: 8px 0 0 0; margin-left: 10px; display: inline-block; color: #fff; font-size: 13px;}
.quick a:before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background:#fff; transform: scaleX(0); transition: transform 0.5s ease-in-out;}
.quick a:hover:before {transform: scaleX(1);}
/* title */
.title {position: relative; color: #fff; z-index: 10; text-align: center; margin-top: 50px;}
.title h1 {font-size: 30px; display: inline-block; padding: 7px 25px; background: rgba(0,0,0,0.5); transition: all 0.5s ease-in-out;}
.title h1:hover {box-shadow: 0 140px 0 0 rgba(255, 107, 0, 0.81) inset; border-radius: 55px / 50px;}
.title a {color: #fff; font-size: 18px; display: inline-block; background: rgba(0,0,0,0.5); padding: 5px 20px; margin-top: 5px; transition: all 0.5s ease-in-out;}
.title a:hover {box-shadow: 140px 0 0 0 rgba(255, 107, 0, 0.20) inset, -140px 0 0 0 rgba(255, 107, 0, 0.81) inset; border-radius: 55px / 50px;}
/* icon */
.icon {position: relative; z-index: 10; text-align: center; margin-top: 20px;}
.icon ul {padding-top: 20px; }
.icon li {display: inline; margin: 0.2px;}
.icon li a {position: relative; color: #fff; width: 66px; height: 66px; background: rgba(0,0,0,0.5); border-radius: 50%; display: inline-block;transition: all 0.35s ease-in-out; }
.icon li a i {font-size: 40px; line-height: 66px;}
.icon li a span {position: absolute; left: 50%; top: -40px; transform: translateX(-50%); background: rgba(255, 107, 0, 0.71); padding: 3px 10px; display: block; border-radius: 6px 0;
transition: all 0.35s ease-in-out; opacity: 0;
}
.icon li a span:before {content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
border-top: 5px solid rgba(255, 107, 0, 0.71);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.icon li a:hover span {opacity: 1; top: -35px;}
.icon li a:hover {box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.81) inset; background: rgba(0,0,0,0.9);}
/* nav */
.nav {padding: 30px 0; }
.nav h2 {font-size: 23px; color: #fb8c00; padding-bottom: 15px; text-align: center;}
.nav li {float: left; width: 20%; text-align: center;}
.nav li a {border: 1px solid #ccc; transition: all .25s ease-in-out; margin: 20px 0; display: inline-block; padding: 20px 65px; position: relative; overflow: hidden;}
.nav li:nth-child(1) a {box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.81) inset; color: #f00;}
.nav li:nth-child(1) a:hover {box-shadow: 200px 0 0 0 rgba(255, 107, 0, 0.81) inset; color: #fff;}
.nav li:nth-child(2) a {color: #fb8c00;}
.nav li:nth-child(2) a:before {content: ''; position: absolute; left: 0; top: 0; right: -40px; bottom: 0; z-index: -1; border-right: 30px solid transparent; border-bottom: 60px solid #fb8c00; transform: translateX(-100%); transition: all .25s ease-in-out;}
.nav li:nth-child(2) a:hover:before {transform: translateX(0px); }
.nav li:nth-child(2) a:hover {color: #fff;}
.nav li:nth-child(3) a {position: relative; color: #ffeb3b; }
.nav li:nth-child(3) a span {display: block;}
.nav li:nth-child(3) a:before {transition: all .25s ease-in-out; content: ''; position: absolute; width:25.25%; height: 0; background: #fb8c00; top:0; left: 0; z-index: -1;}
.nav li:nth-child(3) a:after {transition: all .25s ease-in-out; content: ''; position: absolute; width:25.25%; height: 0; background: #fb8c00; top:0; left: 50%; z-index: -1;}
.nav li:nth-child(3) a span:before {transition: all .25s ease-in-out; content: ''; position: absolute; width:25.25%; height: 0; background: #fb8c00; bottom:0; left: 25%; z-index: -1;}
.nav li:nth-child(3) a span:after {transition: all .25s ease-in-out; content: ''; position: absolute; width:25.25%; height: 0; background: #fb8c00; bottom:0; left: 75%; z-index: -1;}
.nav li:nth-child(3) a:hover {color: #fff;}
.nav li:nth-child(3) a:hover:before {height: 60px;}
.nav li:nth-child(3) a:hover:after {height: 60px;}
.nav li:nth-child(3) a:hover span:before {height: 60px;}
.nav li:nth-child(3) a:hover span:after {height: 60px;}
.nav li:nth-child(4) a {position: relative; color: #00c853; }
.nav li:nth-child(4) a:before {transition: all .25s ease-in-out; content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fb8c00; transform: translateY(-100%); z-index: -1;}
.nav li:nth-child(4) a:after {transition: all .25s ease-in-out; content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fb8c00; transform: translateY(100%); z-index: -1;}
.nav li:nth-child(4) a:hover {color: #fff;}
.nav li:nth-child(4) a:hover:before {transform: translateY(-50%);}
.nav li:nth-child(4) a:hover:after {transform: translateY(50%);}
.nav li:nth-child(5) a {position: relative; color: #0d47a1;}
.nav li:nth-child(5) a:before {content: ''; position: absolute; z-index: -1; width: 100%; height: 0; background-color: rgba(255, 107, 0, 0.41); transition: all 0.4s ease; top: 0; left: 0;}
.nav li:nth-child(5) a:after {content: ''; position: absolute; z-index: -1; width: 100%; height: 0; background-color: rgba(255, 107, 0, 0.41); transition: all 0.4s ease; bottom: 0; left: 0;}
.nav li:nth-child(5) a span:before {content: ''; position: absolute; z-index: -1; width: 100%; height: 0; background-color: rgba(255, 107, 0, 0.41); transition: all 0.4s ease 0.4s; bottom: 0; left: 0;}
.nav li:nth-child(5) a span:after {content: ''; position: absolute; z-index: -1; width: 100%; height: 0; background-color: rgba(255, 107, 0, 0.41); transition: all 0.4s ease 0.4s; top: 0; left: 0;}
.nav li:nth-child(5) a:hover {color: #fff;}
.nav li:nth-child(5) a:hover:before {height: 60px; }
.nav li:nth-child(5) a:hover:after {height: 60px; }
.nav li:nth-child(5) a:hover span:before {height: 60px; }
.nav li:nth-child(5) a:hover span:after {height: 60px; }
.nav li:nth-child(6) a {position: relative; color: #1a237e ;}
.nav li:nth-child(6) a:before {content: ''; position: absolute; top: 50%; left: -20px; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background-color:#fb8c00; z-index: -1;}
.nav li:nth-child(6) a:after {content: ''; position: absolute; top: 50%; right: -20px; transform: translate(50%, -50%); width: 20px; height: 20px; border-radius: 50%; background-color:#fb8c00; z-index: -1;}
.nav li:nth-child(6) a:hover {color: #fff;}
.nav li:nth-child(6) a:hover:before {animation: cross-left 0.8s both; animation-direction: alternate;}
.nav li:nth-child(6) a:hover:after {animation: cross-right 0.8s both; animation-direction: alternate;}
/* tit */
.tit {text-align: center; position: relative; padding: 24px 0 21px 0;}
.tit h2 {position: relative;
display: inline-block;
overflow: hidden; white-space: nowrap;
font-size: 28px; line-height: 1; font-weight: 700;
cursor: cell; }
.tit h2:before {content: '"King God General LEE JAE HUN"';
position: absolute; left: 50%; top: 0;
color: #fb8c00; width: 0;
transform: translateX(-50%);
overflow: hidden; white-space: nowrap;
transition: width 1s ease-out; }
.tit h2:after {content: '"King God General LEE JAE HUN"';
position: absolute; left: 0; top: 0;
color: #fb8c00; width: 0;
overflow: hidden; white-space: nowrap;
line-height: 1; display: inline-block;
transition: width 1s ease-out;}
.tit h2:hover:before {width: 100%;}
.tit .tit-btn {position: absolute; right: 10px; top: 5px; color: #fff; width: 66px; height: 66px; background: rgba(255, 107, 0, 0.81); border-radius: 50%;}
.tit .tit-btn i {font-size: 30px; line-height: 66px;}
/* cbox */
.cbox {padding: 15px; border-bottom: 1px solid #dbdbdb;}
.cbox .cbox-tit {font-size: 20px; color: #c50e12; text-transform: uppercase;}
.cbox .cbox-desc {border-bottom: 1px dashed #dbdbdb; padding-bottom: 15px; margin-bottom: 20px;}
.cbox.box1 {}
.cbox.box2 {}
.cbox.box3 {border-bottom: 0;}
.cbox.box4 {padding-bottom: 0;}
.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 article:last-child {border-bottom: 0;}*/
/* menu */
.menu { }
.menu li { }
.menu li a {display: block; font-size: 16px; padding: 12px 10px 10px 10px; position: relative; border-bottom: 1px solid #dbdbdb; color: #888; transition: all 0.35s ease;}
.menu li a:after {content: '\f054'; font-family: FontAwesome; display: block; font-size: 12px; color: #888; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
.menu li a:hover {box-shadow: inset 180px 0 0 0 rgba(255, 107, 0, 0.71); color: #fff;
background: rgba(255, 107, 0, 0.51);}
.menu li a:hover:after {color: #fff;}
/* notice1 */
.notice1 {position: relative; }
.notice1 h5 {font-size: 14px; margin-bottom: 3px; }
.notice1 li {position: relative; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice1 li:before {content: ''; width: 2px; height: 2px; background: #fb8c00;
position: absolute; left: 0; top: 8px; }
.notice1 .more {position: absolute; right: 0; top: 5px; font-size: 10px; color: #fb8c00; }
/* notice2 */
.notice2 {position: relative; margin-top: 15px;}
.notice2 h5 {font-size: 14px; margin-bottom: 3px; }
.notice2 li {position: relative; padding-left: 8px; overflow: hidden; max-height: 38px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.notice2 li:before {content: ''; width: 2px; height: 2px; background: #fb8c00;
position: absolute; left: 0; top: 8px; }
.notice2 .more {position: absolute; right: 0; top: 5px; font-size: 10px; color: #fb8c00; }
@keyframes cross-left {
0% {left: -20px; }
50% {left: 50%; width: 20px; height: 20px; }
100% {left: 50%; width: 400px; height: 400px; }
}
@keyframes cross-right {
0% {right: -20px; }
50% {right: 50%; width: 20px; height: 20px; }
100% {right: 50%; width: 400px; height: 400px; }
}
.nav li:nth-child(7) a {position: relative; color: #311b92;}
.nav li:nth-child(7) a:before {
content: ''; width: 0; height: 0;
position: absolute; bottom: 0; left: 0;
z-index: -1;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent transparent #fb8c00;
transition: all 0.35s ease-in-out;
}
.nav li:nth-child(7) a:after {
content: ''; width: 0; height: 0;
position: absolute; top: 0; right: 0;
z-index: -1;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent #fb8c00 transparent transparent;
transition: all 0.35s ease-in-out;
}
.nav li:nth-child(7) a:hover {color: #fff;}
.nav li:nth-child(7) a:hover:before {border-width: 78px 263px;}
.nav li:nth-child(7) a:hover:after {border-width: 78px 263px;}
.nav li:nth-child(8) a {position: relative; color: #74bb80;}
.nav li:nth-child(8) a:before {transition: all .35s ease-in-out; content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; right: 0; background-color: #fb8c00; transform: translate(-100%, -100%);}
.nav li:nth-child(8) a:after {transition: all .35s ease-in-out; content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; right: 0; background-color: #fb8c00; transform: translate(-100%, 100%);}
.nav li:nth-child(8) a span:before {transition: all .35s ease-in-out; content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; right: 0; background-color: #fb8c00; transform: translate(100%, -100%);}
.nav li:nth-child(8) a span:after {transition: all .35s ease-in-out; content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; right: 0; background-color: #fb8c00; transform: translate(100%, 100%);}
.nav li:nth-child(8) a:hover {color:#fff;}
.nav li:nth-child(8) a:hover:before {transform: translate(-50%, -50%);}
.nav li:nth-child(8) a:hover:after {transform: translate(-50%, 50%);}
.nav li:nth-child(8) a:hover span:before {transform: translate(50%, -50%);}
.nav li:nth-child(8) a:hover span:after {transform: translate(50%, 50%);}
.nav li:nth-child(9) a {position: relative; color: #74bb80;}
.nav li:nth-child(9) a:before {
content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
z-index: -1; transition: all 0.3s ease-in-out;
border-top: 30px solid #fb8c00;
border-bottom: 30px solid #fb8c00;
border-right: 30px solid transparent;
transform: translate(-100%);
}
.nav li:nth-child(9) a:after {
content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
z-index: -1; transition: all 0.3s ease-in-out;
border-top: 30px solid #fb8c00;
border-bottom: 30px solid #fb8c00;
border-left: 30px solid transparent;
transform: translate(100%);
}
.nav li:nth-child(9) a:hover {color: #fff;}
.nav li:nth-child(9) a:hover:before {transform: translateX(-30%);}
.nav li:nth-child(9) a:hover:after {transform: translateX(30%);}
.nav li:nth-child(10) a {position: relative;}
.nav li:nth-child(10) a:before {
content: ''; position: absolute; left: 0; top: 0; right: -50px; bottom: 0;
z-index: -1; transition: all 0.3s ease-in-out;
border-right: 50px solid transparent;
border-bottom: 80px solid #fb8c00;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.nav li:nth-child(10) a:after {
content: ''; position: absolute; left: -50px; top: 0; right: 0; bottom: 0;
z-index: -1; transition: all 0.3s ease-in-out;
border-left: 50px solid transparent;
border-bottom: 80px solid #fb8c00;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.nav li:nth-child(10) a:hover {color: #fff;}
.nav li:nth-child(10) a:hover:before {-webkit-transform: translateX(-40%); transform: translateX(-40%);}
.nav li:nth-child(10) a:hover:after {-webkit-transform: translateX(40%); transform: translateX(40%);}
/* blog1 */
.blog1 { margin-bottom: 70px;}
.blog1 h5 {text-align: center; padding: 15%; margin-bottom: 5px;
color: transparent; transition: all 0.33s ease;
background: url(../img/blog1_320.jpg); background-size: cover; }
.blog1:hover h5 {color: #fff;}
/* blog2 */
.blog2 {margin-top: 50px; }
.blog2 h5 {text-align: center; padding: 15%; margin-bottom: 5px; color: #fff;
color: transparent; transition: all 0.33s ease;
background: url(../img/blog2_320.jpg); background-size: cover;}
.blog2:hover h5 {color: #fff;}
/* square */
.square {overflow: hidden;}
.square a {float: left; width: 19%; margin: 0.5%;position: relative; }
.square a img {width: 100%; display: block;}
.square a:before{content: 'hun'; position: absolute; left: 50%; top: 50%; background-color: #000; text-align: center; opacity: 0; transform: translate(-50%, -50%);}
.square a:hover:before {opacity: 1;}
.square:hover, .square a:hover img {
filter: none;
background: transparent;
mix-blend-mode: unset !important;
}
.square .blend-1 {background-color: #00ff36;}
.square a .blend1 {mix-blend-mode: multiply; filter: grayscale(100%) contrast(1); }
.square .blend-2 {background-color: #e41c2d;}
.square a .blend2 {mix-blend-mode: multiply; filter: grayscale(100%) contrast(0.8); }
.square .blend-3 {background-color: #666;}
.square a .blend3 {mix-blend-mode: darken; filter: grayscale(100%) contrast(2); }
.square .blend-4 {background-color: #caeaf2;}
.square a .blend4 {mix-blend-mode: multiply; filter: grayscale(100%) contrast(1.5); }
.square .blend-5 {background-color: #181e59;}
.square a .blend5 {mix-blend-mode: multiply; filter: grayscale(100%) contrast(1.5); }
.square .blend-6 {background-color: #ed060b;}
.square a .blend6 {mix-blend-mode: lighten; filter: grayscale(100%) contrast(1.5); }
.square .blend-7 {background-color: #fca300;}
.square a .blend7 {mix-blend-mode: darken; filter: grayscale(100%) contrast(1.5); }
.square .blend-8 {background-color: #64b5f6;}
.square a .blend8 {mix-blend-mode: darken; filter: grayscale(100%) contrast(1.5); }
.square .blend-9 {background-color: #a5d6a7;}
.square a .blend9 {mix-blend-mode: multiply; filter: grayscale(100%) contrast(1.5); }
.square .blend-10 {background-color: #ffccbc;}
.square a .blend10 {mix-blend-mode: darken; filter: grayscale(100%) contrast(1.5); }
/* video */
/*.video {width: 100%;}*/
.video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.video iframe {
position: absolute;
width: 100%;
height: 100%;
}
/* himg1 */
.himg1 { margin-bottom: 50px;}
.himg1 a {position: relative; display: block; perspective: 600px; }
.himg1 a .front {
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: all 0.5s ease-in-out;
backface-visibility: hidden;
}
.himg1 a .back {
transform-style: preserve-3d;
position: absolute; top: 0; z-index: -1;
width: 100%; height: 100%;
text-align: center;
background: #8ec047;
transform: rotateY(-180deg);
transition: all 0.5s ease-in-out;
backface-visibility: hidden;
}
.himg1 a .back i {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fb8c00;}
.himg1 a:hover .front {transform: rotateY(180deg); }
.himg1 a:hover .back {transform: rotateY(-0deg); z-index: 1; }
/* himg2 */
.himg2 {
position: relative; perspective: 1000px; margin-bottom: 50px;
}
.himg2 .back {
width: 50%; height: 100%;
position: absolute; right: 0; z-index: 10;
background: #666;
}
.himg2 .slice {
position: relative;
width: 44px; height: 300px; z-index: 100;
transform-style: preserve-3d;
transform-origin: left center;
backface-visibility: hidden;
transition: transform 150ms ease-in-out;
background: url(../img/go2.jpg); background-size: 220px;
}
.himg2 .overlay {width: 44px; height: 100%; opacity: 0; position: absolute; }
.himg2:hover .overlay {opacity: 1;}
.himg2 .s1 > .overlay {background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); }
.himg2 .s2 > .overlay {background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); }
.himg2 .s3 > .overlay {background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); }
.himg2 .s4 > .overlay {background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); }
.himg2 .s5 > .overlay {background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);}
.himg2 .s2 {transform: translate3d(44px,0,0); background-position: -44px 0;}
.himg2 .s3 {transform: translate3d(44px,0,0); background-position: -88px 0; }
.himg2 .s4 {transform: translate3d(44px,0,0); background-position: -132px 0; }
.himg2 .s5 {transform: translate3d(44px,0,0); background-position: -176px 0; }
.himg2:hover .s2 {transform: translate3d(43px,0,0) rotate3d(0,1,0,-45deg); }
.himg2:hover .s3 {transform: translate3d(43px,0,0) rotate3d(0,1,0,90deg); }
.himg2:hover .s4 {transform: translate3d(43px,0,0) rotate3d(0,1,0,-90deg); }
.himg2:hover .s5 {transform: translate3d(43px,0,0) rotate3d(0,1,0,90deg);}
/* footer */
.footer {text-align: center; padding: 20px; }
/* MediaQuery */
@media (max-width: 1240px){
.container {width: 100%;}
.row {padding: 0 15px;}
#contents .container {border-left: 0; border-right: 0;}
.himg1 a:hover .front {transform: rotateY(0deg);}
.himg1 a:hover .back {display: none;}
}
@media (max-width: 1024px){
.nav li {width: 25%;}
}
@media (max-width: 960px){
#cont-center {margin-right: 0px; border-right: 0;}
#cont-right {overflow: hidden; position: static; width: 100%; border-top: 1px solid #dbdbdb;}
#cont-right .cbox {float: left; width: 33.3333%; box-sizing: border-box;
border-bottom:0; border-right: 1px solid #dbdbdb;}
#cont-right .cbox:last-child {border-right: 1px solid transparent;}
.nav li {width: 33.33333%;}
.square a {width: 24%;}
.square a:nth-child(5n) {display: none;}
}
@media (max-width: 768px){
#cont-right {overflow: hidden;}
#cont-right .cbox {float: left; width: 50%; box-sizing: border-box;
border-bottom:0; border-right: 1px solid #dbdbdb;}
.nav li {width: 50%;}
.square a {width: 32.33333%;}
.square a:nth-child(5) {display: block;}
.cbox.box8 {border-right: 0;}
.cbox.box9 {display: none;}
}
@media (max-width: 600px){
#cont-left {float: none; width: 100%;}
#cont-center {width: 100%; border-left: 0; border-top: 1px solid #dbdbdb;}
#cont-right .cbox {width: 50%;}
#cont-right .cbox.box8 {border-color: transparent;}
#cont-right .cbox:last-child {display: none;}
#header {height: auto;}
.title h1 {margin-top: 30px;font-size: 20px;}
.title a {margin-bottom: 30px; font-size: 15px; margin-top: 10px;}
.tit {padding: 30px 0 20px 0;}
.nav li {width: 100%;}
.nav li a {display: block;}
.icon {display: none;}
.tit .tit-btn {display: none;}
.cbox.box1 {padding: 0;}
.cbox.box1 .cbox-tit {display: none;}
.cbox.box1 .cbox-desc {display: none;}
.menu {display: none;}
.menu ul {overflow: hidden;}
.menu li {float: left; width: 33.3333%; box-sizing: border-box; text-align: center; border-right: 1px solid #dbdbdb;}
.menu li:nth-child(3n) {border-right: 0;}
.menu li a:after {display: none;}
.menu li a:hover {box-shadow: none;}
.square a {width: 49%;}
.square a:nth-child(5) {display: none;}
}
@media (max-width: 400px){
#cont-right .cbox {width: 100%;}
#cont-right .cbox.box7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}
.square a {width: 100%; margin: 1% 0;}
}
/* MediaQuery ratio*/
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.blog1 h5 {background: url(../img/blog1_640.jpg); background-size: cover;}
.blog2 h5 {background: url(../img/blog2_640.jpg); background-size: cover;}
}
/* reset */
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
/* 여백 초기화 */
body,div,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,textarea,p,select,button,figure{margin: 0; padding: 0;}
/* 폰트 초기화 */
body,input,textarea,select,button,table{font-family:'NanumSquare','맑은 고딕','Apple SD Gothic N','돋움',dotum, sans-serif; font-size: 12px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em,address{font-style: normal;}
/* list style 초기화 */
ul,li,ol {list-style: none;}
/* wpahr xorm chrlghk */
h1,h2,h3,h4,h5,h6 {font-size: 12px; font-weight: normal;}
/* a 링크 초기화 */
a {color: #666; text-decoration: none;}
/* border 초기화 */
img, fieldset {border: 0;}
/* 반응형 이미지 */
video, img {width: 100%;}
/* table 초기화 */
table {width: 100%; border-spacing: 0; border-collapse: collapse;}
/* ir 효과 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-1;width:100%;height:100%}
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px}
.screen_out,.ir {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
/* clearfix */
.clearfix {*zoom: 1;}
.clearfix:before, .clearfix:after {display: table; content: ''; line-height: 0;}
.clearfix:after {clear:both;}
