@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
/*	font: inherit;*/
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* {font-family: 'Noto Sans KR', sans-serif;color:#454545; font-weight:300;}
/*html,body{overflow-x:hidden;}*/
caption{position:absolute;left:-9999px;}
fieldset,legend{border:none;}





/****************************base********************************/

.gap {
    height:2em;
    width:100%;
    clear:both;
}

.gap_double {
    height:3em;
    width:100%;
    clear:both;
} 

.txt_box {
	text-align:justify;
}

.txt_blue {
	color:#4876b3;	
}

.clear {
	clear:both;
}

.f_left {
    float:left;
}

.f_right {
    float:right;
}

.underline {
    text-decoration: underline;
}

.bold {
    font-weight:bold;
}

.center {
    text-align:center;
}

.right {
	text-align:right;
}

.gap_line {
	width:100%;
	height:2em;
	border-bottom:1px solid #e1e1e1;
}

.gap_dotline {
	width:100%;
	height:1.5em;
	border-bottom:1px dotted #e1e1e1;
}

.gap_dash {
	width:100%;
	height:2em;
	border-bottom:1px dashed #e1e1e1;
}

p.star {
	position:relative;
	padding-left:15px;
}

p.star:before {
	position:absolute;
	left:5px;
	content:"*";
	margin-top:2px;
}

p.dash,
div.dash {
	position:relative;
	padding-left:20px;
}

p.dash:before,
div.dash:before {
	position:absolute;
	left:5px;
	content:"-";
	margin-top:-1px;
}

div.dot,
p.dot {
	position:relative;
	padding-left:20px;
}

div.dot:before,
p.dot:before {
	position:absolute;
	left:5px;
	content:" · ";
}

div.square,
p.square {
	position:relative;
	padding-left:20px;
}

div.square:before,
p.square:before {
	position:absolute;
	left:5px;
	content:" ■ ";
}

.yellow {
    color:#ecb200;
}

.orange {
    color:#e97f02;
}

.purple {
    color:#490a3d;
}

.wine {
    color:#bd1550;
}

.green {
    color:#1f967e;
}

.white {
    color:white;
}


.writer {
    font-size:20px;
    color:#757575;
}



.bg_yellow {
    background:#f8991b; 
}

.bg_orange {
    background:#ff5001;
}

.bg_wine {
    background:#bd1550;
}

.bg_purple {
    background:#490a3d;
}

.bg_green {
    background:#1f967e;
}




/*
div.box {
    position:relative;
}

div.click_url {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
}

div.click_url a {
    display:block;
    width:100%;
    height:100%;
}
*/









.no-gutters {
    margin-right:0;
    margin-left:0;
}

.no-padding {
    padding-left:0;
    padding-right:0;
}

#footer {
    background:#2a2a2a;
    padding:50px;
/*    color:#898989;*/
    line-height:26px; 
}

#footer .sns {
    max-width:267px;
    margin:0 auto;
}

#footer .sns ul li {
    padding:0 9px;
}

#footer .address {
    color:#898989;
}


.clr {
    clear:both;
}



.num {
    counter-increment:num;
    padding-left:20px;
    position:relative;
    padding-bottom:1px;
}

.num:before {
    content:counter(num) ".";
    position:absolute;
    left:0;
}

.num2 {
    counter-increment:num2;
    padding-left:20px;
    position:relative;
    padding-bottom:1px;
}

.num2:before {
    content:counter(num2) ".";
    position:absolute;
    left:0;
}


.color.yellow {
    background:#f8ca00;
}

.color.orange {
    background:#e97f02;
}

.color.purple {
    background:#490a3d;
}

.color.wine {
    background:#bd1550;
}

.color.green {
    background:#1f967e;
}






/* header */


#header .main_visual {
    position:relative;
}

.typo {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

.typo > .row {
    padding:0 50px;
}

.webzine_sub_title {
    padding-left:2px;
}




/*모바일 gnb*/

#gnb-mobile {
	display:none;
}

#gnb-mobile.on {
    display:block;
    left: 0;
    position:fixed;
    top: 60px;
    width: 100%;
    background: #f7f7f7;
    z-index: 9999;
    
}


#gnb-mobile.on .navi li {
    background:white;
    text-align: center;
    
}

#gnb-mobile.on .navi li > a.cate {
    color:white;
}

#gnb-mobile.on .navi li ul {
    display:none;
}

#gnb-mobile.on .navi li.on ul {
    display:block;
}

#gnb-mobile.on .navi li > a,
#gnb-mobile.on .navi li.on  ul li a {
    display:block;
    font-size:15px;
    padding:7px 0;
    text-decoration:none;
    line-height:30px;
    font-weight:bold;
    cursor:pointer;
    color:#454545;
    font-weight:400;
    
}


#gnb-mobile.on .navi li.on  ul li a {
    border-bottom:1px solid #e1e1e1;
}





#gnb-mobile.on .navi > li:first-child {
    background:#f8ca00;
}

#gnb-mobile.on .navi > li:nth-child(2) {
    background:#e97f02;
}

#gnb-mobile.on .navi > li:nth-child(3) {
    background:#490a3d;
}

#gnb-mobile.on .navi > li:nth-child(4) {
    background:#bd1550;
}

#gnb-mobile.on .navi > li:last-child {
    background:#20967e;
}





#gnb-mobile.on .navi > li:first-child > ul li a:hover{
    color:#f8ca00;
}

#gnb-mobile.on .navi > li:nth-child(2) > ul li a:hover{
    color:#e97f02;
}

#gnb-mobile.on .navi > li:nth-child(3) > ul li a:hover{
    color:#490a3d;
}

#gnb-mobile.on .navi > li:nth-child(4) > ul li a:hover{
    color:#bd1550;
}

#gnb-mobile.on .navi > li:last-child > ul li a:hover{
    color:#20967e;
}







/*************************** mobile *********************************/
#nav-toggle { position: fixed;top: -61px;left: 0px;z-index: 101;transition:.3s;width:100%;height:60px;border-bottom:1px solid #dfdfdf;background:#ffffff;}
#nav-toggle .logo{line-height:60px;}
#nav-toggle .btn-nav-toggle {display: block;width: 60px;height: 60px;right:0px;top:0px;position:absolute;background-image: url(../images/common/btns.png);background-repeat: no-repeat;text-indent: -9999px;opacity: 1; background-position: 0 0}
#nav-toggle .btn-nav-toggle:hover {opacity: .3;}
.navtoggleon #nav-toggle .btn-nav-toggle {background-position:0 -60px;}
.navtoggleon #nav-toggle .btn-nav-toggle:hover {}
/*************************** wrap *********************************/
#wrap{transition:.3s;}
.navtoggleon #wrap{opacity:.3;}
.inner{clear:both;max-width:1100px;width:100%;margin:0 auto;}
/*************************** header *********************************/
#wrap{
    max-width:1000px;
    margin:0 auto;
}
/*************************** spot *********************************/
#spot{}
/*************************** container *********************************/
#container{}
/*************************** footer *********************************/
#footer{}
/*************************** sider *********************************/
#sider{}
/*************************** etc *********************************/
#etc{}










@media only screen and (max-width: 768px){
    #footer .sns {
        max-width:200px;
    }
    
    
    
}