@font-face{ 
font-family: NanumBarunGothic; src:url('font/NanumBarunGothic.eot'); src:local(※),url('font/NanumBarunGothic.woff') format('woff'); 
font-family: NanumBarunGothicUltraLight; src:url('font/NanumBarunGothicUltraLight.eot'); src:local(※),url('font/NanumBarunGothicUltraLight.woff') format('woff'); 
font-family: NanumBarunGothicBold; src:url('font/NanumBarunGothicBold.eot'); src:local(※),url('font/NanumBarunGothicBold.woff') format('woff'); 
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

.hidden{visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; font-size: 0;}

body {background: #eee; color: #222; font-size: 100%; line-height: 1.25; font-family: 'NanumBarunGothic', 'Nanum Gothic', 'Lato', sans-serif;	font-weight: 300;}

a {	color: #FFCE00;	text-decoration: none;	outline: none;}
#header{position: relative; z-index: 2 !important}
.owl-carousel, .owl-theme{position: relative; z-index: 1 !important}
/*tab*/
#tab_menus{margin-left:0%; padding: 0; list-style: none; display: block;}
#tab_menus li{display: block; float: left;width:20%;margin-bottom: 2%}
#tab_menus li a{display: block; float: left;width:100%;padding: 5% 0 5% 0;background-color:#222;font-size: 0.9em;text-align: center;color: #fff;border: 1px solid #eee}
#tab_menus li a:hover{background-color:#eee;color: #222;font-weight: bold;}

/*slide*/
#item_wrap img{display: block; width: 60%;margin: auto;}
.owl-pagination{font-weight: bold;}

a:hover, a:focus {color: #222;}

.codrops-header {margin: 0 auto; padding: 2em; text-align: center;}
.codrops-header h1 {margin: 0;	font-size: 3em;	font-weight: 900;}
.codrops-header h1 span { font-family:'NanumBarunGothic', 'Lato', sans-serif; display: block; padding: 0.2em 0 0.6em 0.1em; font-size: 0.4em; font-weight: 300;}

/* To Navigation Style */
.codrops-top { width: 100%; text-transform: uppercase; font-weight: 800; font-style: normal; font-size: 0.69em; line-height: 2.2;}
.codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; letter-spacing: 1px;}
.codrops-top span.right { float: right;}
.codrops-top span.right a { display: block; float: left;}
.codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'NanumBarunGothic','codropsicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased;}
.codrops-icon-drop:before { content: "\e001";}
.codrops-icon-prev:before { content: "\e004";}
section { padding: 1em; text-align: center;}

.related { padding: 15em 0 3em; clear: both;}
.related p { font-size: 1.5em;}
.related > a { border: 1px solid #222; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; color: #222;}
.related a:hover { border-color: #FF2A48; color: #FF2A48;}
.related a img { max-width: 100%; opacity: 0.8;}
.related a:hover img,
.related a:active img { opacity: 1;}
.related a h3 { margin: 0; padding: 0.5em 0 0.3em; max-width: 300px; text-align: left;}

/*반응형*/

@media screen and (max-width: 50em) {

#tab_menus{margin:0; padding: 0; list-style: none; display: block;}
#tab_menus li{display: block; float: left; width:50%;margin-bottom: 0%}
#tab_menus li a{display: block; margin: auto; width:100%;padding: 6% 0 4% 0;background-color:#222;font-size: 0.9em;text-align: center;color: #fff}
#tab_menus li a:hover{background-color:#eee;color: #222;font-weight: bold;}
#item_wrap img{display: block; width: 100%;margin: 2% auto;}

}


@media screen and (max-width: 25em) {

#tab_menus{margin:0; padding: 0; list-style: none; display: block;}
#tab_menus li{display: block; float: left; width:50%;margin-bottom: 0%}
#tab_menus li a{display: block; margin: auto; width:100%;padding: 7% 0 5% 0;background-color:#222;font-size: 0.9em;text-align: center;color: #fff}
#tab_menus li a:hover{background-color:#eee;color: #222;font-weight: bold;}

	.codrops-icon span { 	display: none; }
}

.grid-wrap { clear: both; margin: 0
 auto; padding: 0; max-width: 1260px;}
.grid { margin: 30px auto; padding: 0; list-style: none; min-height: 500px;}
.js .grid { background: url(../img/loading.gif) no-repeat 50% 100px;}
.js .grid.loaded { background: none;}
.grid li { display: inline-block; overflow: hidden; width: 314px; text-align: left; vertical-align: top;}
.js .grid li { display: none; float: left;}
.js .grid.loaded li { display: block;}

/* Title box */
.title-box h2 { display: block; margin: 7px; padding: 20px; background: #222; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 300;}
.title-box h2 a { display: block; font-weight: 900;}
.title-box h2 a:hover { color: #fff;}

/* Anchor and image */
.grid li > a,
.grid li img { display: block; outline: none; border: none;}
.grid li > a { position: relative; overflow: hidden; margin: 7px;}

/* Curtain element */
.grid .curtain { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: #96cdc8;}
.grid.swipe-right .curtain { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
.grid.swipe-down .curtain { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0);}
.grid.swipe-rotate .curtain { width: 200%; height: 200%; -webkit-transform: rotate3d(0,0,1,90deg); transform: rotate3d(0,0,1,90deg); -webkit-transform-origin: top left; transform-origin: top left;}

/* Shadow */
.grid .curtain::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,1); content: '';}
.grid.swipe-right .curtain::after,
.grid.swipe-rotate .curtain::after { left: -100%;}
.grid.swipe-down .curtain::after { top: -100%;}

/* Title */
.grid li h3 { position: absolute; bottom: 0; left: 0; margin: 0; padding: 20px; width: 100%; background: #222; color: #fff; text-align: right; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 0.9em; -webkit-transition: -webkit-transform 0.2s, color 0.2s; transition: transform 0.2s, color 0.2s;}

/* Pseudo element for hover effect */
.grid li > a::before { position: absolute; top: 0; left: 0; width: 100.5%; height: 100.5%; border: 0px solid transparent; background: rgba(0,0,0,0); content: ''; -webkit-transition: border-width 0.2s, border-color 0.2s; transition: border-width 0.2s, border-color 0.2s;}

/* Hover effects */
.grid li.shown:hover h3 { color: #fff; -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0);}

.grid li.shown:hover > a::before { border-width: 15px; background-color: rgba(255,255,255,0.5); border-color: #222;}

/* Animations */

/* Swipe right */
.grid.swipe-right li.animate .curtain { -webkit-animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards; animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;}

@-webkit-keyframes swipeRight { 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
	50%, 60% { -webkit-transform: translate3d(0,0,0); }
	100% { -webkit-transform: translate3d(100%,0,0); }}

@keyframes swipeRight { 0% {}
	50%, 60% { -webkit-transform: translate3d(0,0,0); transform: translate(0); }
	100% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); }} 

/* Swipe down */
.grid.swipe-down li.animate .curtain { -webkit-animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards; animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;}

@-webkit-keyframes swipeDown { 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
	50%, 60% { -webkit-transform: translate3d(0,0,0); }
	100% { -webkit-transform: translate3d(0,100%,0); }}

@keyframes swipeDown { 0% {}
	50%, 60% { -webkit-transform: translate(0); transform: translate(0); }
	100% { transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }}

/* Swipe rotate */
.grid.swipe-rotate li.animate .curtain { -webkit-animation: swipeRotate 1.5s ease forwards; animation: swipeRotate 1.5s ease forwards;}

@-webkit-keyframes swipeRotate { 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
	50%, 60% { -webkit-transform: rotate3d(0,0,1,0deg); }
	100% { -webkit-transform: rotate3d(0,0,1,-90deg); }}

@keyframes swipeRotate { 0% {}
	50%, 60% { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); }
	100% { -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); }}

/* Shadow */
.grid li.animate .curtain::after { -webkit-animation: fadeOut 1.5s ease forwards; animation: fadeOut 1.5s ease forwards; -webkit-animation-delay: inherit; animation-delay: inherit;}

@-webkit-keyframes fadeOut { 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
	50%, 60% { opacity: 1; }
	100% { opacity: 0; }}

@keyframes fadeOut { 0% {}
	50%, 60% { opacity: 1; }
	100% { opacity: 0; }}

/* Hide image and title and show at half time */
.js .grid li img,
.js .grid li h3 { visibility: hidden;}

.grid li.animate img,
.grid li.animate h3 { -webkit-animation: showMe 1.5s step-end forwards; animation: showMe 1.5s step-end forwards;}

@-webkit-keyframes showMe { from { visibility: hidden; }
	60%, 100% { visibility: visible; }}

@keyframes showMe { from { visibility: hidden; }
	60%, 100% { visibility: visible; }}

.grid li.shown img,
.grid li.shown h3 { visibility: visible;}