@charset "utf-8";


@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url('font/NotoSansKR-Thin.eot');
  src: url('font/NotoSansKR-Thin.eot?#iefix') format('embedded-opentype'),
       url('font/NotoSansKR-Thin.woff') format('woff'),
       url('font/NotoSansKR-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url('font/NotoSansKR-Light.eot');  
  src: url('font/NotoSansKR-Light.eot?#iefix') format('embedded-opentype'),
       url('font/NotoSansKR-Light.woff') format('woff'),
       url('font/NotoSansKR-Light.ttf') format('truetype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url('font/NotoSansKR-Regular.eot');
   src: url('font/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/NotoSansKR-Regular.woff') format('woff'),
        url('font/NotoSansKR-Regular.ttf') format('truetype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url('font/NotoSansKR-Medium.eot');  
   src: url('font/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/NotoSansKR-Medium.woff') format('woff'),
        url('font/NotoSansKR-Medium.ttf') format('truetype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url('font/NotoSansKR-Bold.eot'); 
   src: url('font/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/NotoSansKR-Bold.woff') format('woff'),
        url('font/NotoSansKR-Bold.ttf') format('truetype');
 }
 
 

/* CSS Document */
body{width:100%; height:100%;  font-family:'Noto Sans KR', sans-serif; font-weight:300; color:#666; font-size:16px; line-height:23px; color:#333;  margin:0 auto;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button{margin:0;padding:0;font-weight:normal; font-family:'Noto Sans KR', sans-serif; font-weight:400; }
body,input,textarea,select,table,button{ }
legend, #accessibility, .hidden{font-size: 0;line-height: 0;text-indent: -5000px;}
img, fieldset, iframe{border:0 none;}
ul{list-style:none}
ol li{list-style-type:number; text-align:left;}
a{text-decoration:none;cursor:pointer; color:#333333;} 
a:link { text-decoration:none;}
li a:visited { text-decoration:none;}
em,address{font-style:normal; max-height: 1000000px;}
table{border-collapse:collapse;border-spacing:0}
hr{display:none;}
input{vertical-align:middle; padding-left:5px;}
select,button{vertical-align:middle}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0}
legend{*width:0; display:none}
article,aside,canvas,details,figcaption,figure,footer,address,hgroup,menu,nav,section,summary{display:block}
caption{display:none;}

.clearfix:after {content:''; display:table; clear:both;}

#skipnavi a {position:absolute; left:-3000%;}
#skipnavi a:focus { display:block; left:0; top:0; z-index:10000000000; width:100%; height:35px; line-height:35px; background:#24c1ad; color:#fff; text-align:center;}


/* header */
header{	width:100%;	position:fixed;	border-bottom:1px solid #ddd; background:#fff; z-index:999; }
#topWrap {width:100%; height:43px; background:#f0f0f0;}
#topWrap > div {width:1100px; margin:0 auto; overflow:hidden;}
#topNavi{float:right}
#topNavi li{float:left;}
#topNavi li a{display:block; padding:10px 14px; font-size:13px; color:#666;}
#topNavi li:last-child a{padding:10px 0 10px 14px;}

#topNavi .sns {margin-right:10px}
#topNavi .sns span {display:inline-block; width:24px; height:24px; margin-top:10px; text-indent:-9999px; background:url(../images/main/spritimg.png) no-repeat}
#topNavi .sns span a {padding:0}
#topNavi .sns span.youtube  {background-position:-930px -4px}
#topNavi .sns span.cafe {background-position:-959px -4px}
#topNavi .sns span.blog {background-position:-988px -4px}
#topNavi .sns span.instar {background-position:-1017px -4px}
#topNavi .sns span.fb {background-position:-1046px -4px}
#topNavi .sns span.kko {background-position:-1076px -4px}

#naviWrap {width:100%; border-bottom:1px solid #ccc}
#naviWrap > div {width:1200px; margin:0 auto}
#naviWrap h1 {float:left; margin-top:25px}
#gnb{float:right;}
#gnb>ul>li {float:left;  position:relative;}
#gnb>ul>li>a {display:inline-block; padding:34px 22px; color:#222; font-size:18px; font-weight:400}
#gnb a.on, #gnb a:hover, #gnb .gnbList a:hover, #gnb .gnbList a.on {color:#07a38f}
#gnb .gnbList {position:absolute; left:5px; width:100%; padding-top:25px; display:none; }
#gnb .gnbList a {display:block; padding:6px 15px; font-size:16px; color:#666}
.gnb_btn {float:right; margin:17px 0 0 20px; width:54px; height:54px; text-indent:-99999px; background:url(../images/main/spritimg.png) no-repeat}
.gnb_btn a {display:block; width:54px; height:54px}


/* contents */
#contents{padding-top:136px;overflow:hidden}
#conBox{width:1100px; margin:120px auto 0 auto; position:relative; top:0px; left:0px; }
#conBox > div {margin-bottom:120px; width:1100px}
#conBox h3, .instargram h3 {font-size:32px; color:#222; text-align:center; font-weight:700; line-height: 35px; margin-bottom:60px}
#conBox h3 span {display:block; font-size:18px; color:#777; font-weight:300; letter-spacing: -0.05em}

#quick ul {height:160px; overflow: hidden}
#quick li {float:left; margin-right:41px}
#quick li:last-child {margin-right:0}
#quick li a {display:block; width:122px; height:123px; background:url(../images/main/spritimg.png) no-repeat}
#quick li:first-child a {background-position:-164px -59px}
#quick li:nth-child(2) a {background-position:-490px -59px}
#quick li:nth-child(3) a {background-position:-1px -59px}
#quick li:nth-child(4) a {background-position:-327px -59px}
#quick li:nth-child(5) a {background-position:-652px -59px}
#quick li:nth-child(6) a {background-position:-816px -59px}
#quick li:last-child a {background-position:-977px -59px}
#quick li:first-child a:hover {background-position:-164px -223px}
#quick li:nth-child(2) a:hover {background-position:-490px -223px}
#quick li:nth-child(3) a:hover {background-position:-1px -223px}
#quick li:nth-child(4) a:hover {background-position:-327px -223px}
#quick li:nth-child(5) a:hover {background-position:-652px -223px}
#quick li:nth-child(6) a:hover {background-position:-816px -223px}
#quick li:last-child a:hover {background-position:-977px -223px}
#quick li a span {display:block; width:122px; text-align:center; font-size:15px; color:#666; padding-top:140px}

#issues li {float:left; margin-right:38px; position:relative}
#issues li:before {content:''; background:url(../images/main/spritimg.png) 0 -370px no-repeat; width:73px; height:73px; position:absolute; right:0; top:168px; z-index:20}
#issues li:last-child {margin-right:0}

#issues li a:hover:before {content:''; position:absolute; background:rgba(0,0,0,0.4); width:100%; height:239px; z-index:10}
#issues li p {font-size:22px; color:#222; text-align:center; margin-top:22px}
#issues li p span {display:block; font-size:15px; color:#777; padding-top:17px}

.break {width:100%; height:359px; background:url(../images/main/break_img.jpg) 50% 0 no-repeat}
.break dl {width:1100px; height:90px; margin:0 auto; padding-top:133px; padding-left:200px}
.break dt {float:left; font-weight:700; color:#fff; font-size:50px; padding-right:80px; line-height:90px}
.break dd {float:left; font-weight:400; font-size:20px; color:#fff; padding-left:80px; line-height:32px; border-left:1px solid #bbb}


.instargram {background:#f3f3f3; padding:90px 0;}
#instaPics {width:100%; height:470px; overflow:hidden}
#instaPics img {width:226px; height:226px}
.insta-box {position:relative; width:226px; height:226px; float:left; margin:4px; border:none }
.image-layer img {max-width:100% }
.caption-layer {display:none; position:absolute; top:0; background:rgba(0,0,0,0.7); height:100%; width:100%; padding:10px; box-sizing:border-box; font-size:12px; color:#fff }
.insta-box a:hover .caption-layer {display:block}
.insta-likes {float:right}


/* footer */
#footer{
	width:100%;
	height:auto; padding-bottom:40px;
	overflow:hidden;
	/*border-top:1px solid #e5e5e5;*/ background:#3c3c3c;
}
#footer nav {height:65px; border-bottom:1px solid #636363;}
#footer nav ul {width:1100px; margin:auto}
#footer nav li {float:left;}
#footer nav li:after {content:'|'; padding:0 20px; font-size:12px; color:#bbb}
#footer nav li:last-child:after {content:''}
#footer nav li a, #footer nav li a:link, #footer nav li a:visited {color:#ccc; font-size:15px; line-height:65px}
#footer nav li a:hover {color:#fff}
#footer footer{
	width:1100px;
	margin:45px auto 45px auto;
	font-size:13px; color:#b1b1b1;
	line-height:23px;
}

#footer footer>div:first-child{
	float:left;
	margin-right:30px;
}

#footer footer ul {width:500px}
#footer footer div ul li{
	float:left; margin-right:22px; color:#b1b1b1;
}
#footer footer .copyright {color:#ddd; padding-top:25px; }
#footer footer .s_map {float:right; /*width:437px; height:200px;*/}
#footer footer .s_map .root_daum_roughmap .wrap_controllers {display:none}