@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Basic);
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
@import url(https://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothiclight.css);



body	{ padding:0; margin:auto; 
	background-color:/*@background-color=*/#f5f8fa/*@*/;
	background-image:/*@background-image=*/ur
		l("")/*@*/;
	background-repeat:/*@background-image-repeat=*/repeat/*@*/;
	background-position:/*@background-image-position=*/top/*@*/;
	background-attachment: fixed;
	background-origin: padding-box;
	background-size: cover;
	font-family: 'Nanum Barun Gothic', sans-serif; 
}



a { -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    cursor:pointer; }





a:link { color:#000; text-decoration:none;}
a:visited { color:#000; text-decoration:none;}
a:hover { color:#ddd; text-decoration:none;}
a:active { color:#000; text-decoration:none;}


::selection { background:#000; color:#000; }
::-webkit-scrollbar { width:12px; height:12px;	background-color: #083f66; border: 6px solid #f5f8fa; }
::-webkit-scrollbar-thumb { height:20px; width:20px; background-color: #083f66; border: 4px solid #f5f8fa; border-radius: 30px; }
::-webkit-scrollbar-thumb:hover { height:20px; width:20px; background-color: #000; }


img { border: none; }
input { border:1px solid #323232;}
textarea { border:1px solid #323232;}
ul, li { padding:0px; margin:0px; list-style:none; }
iframe,video,embed,object,table,tbody{max-width:100%}


#wrap { margin: 0px auto; width:670px; background-color:#fff; }

#menubar{ width:69px; float:left; background-color:#fff; border-right:1px solid #eee;
 position: fixed;  height: 100%; border-left:1px solid #eee; }

#main { margin-left:70px; width:600px; float:left; background-color:#fff; word-break:break-all}


.hide_button a { display:block; top:20px; margin-left:569px; position:fixed; color:#ddd;}
.hide_button a:hover {color:#000;}

.hide_box { display:none; border-left:1px solid #eee; }
#hide { background-color:#fff; float:left; }







#content { margin: 0 50px 50px 50px; padding-top:30px; word-break:break-all}


.entry { text-align:justify; margin-top:20px;  }
.entry_line {border-top: 1px solid #eee; margin:50px -50px; 0px -50px; }

.titleWrap a { font-family: 'Nanum Barun Gothic', sans-serif;  }
.post_info { height:25px;  }
.post_cate a { float: left; border: 1px solid #083f66; border-radius: 15px; text-transform: uppercase;
               padding: 1px 7px 2px 7px; background: #083f66; margin-right:10px;
               font-family: 'Basic', sans-serif; font-size:9px; color:#fff; }
.post_cate a:hover { float: left; border: 1px solid #000; border-radius: 15px;
                     padding: 1px 7px 2px 7px; background: #000; color:#fff; }

.hidden_date {display:none;}
.show_date { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:12px; 
             color:#ccc;}

.title, .title a { margin-top:5px; font-size:11pt; font-weight:bold; font-family: 'Nanum Barun Gothic', sans-serif;  text-transform: uppercase; color:#000; }
.title a:hover {color:#ccc;}





.article { margin-top:20px; margin-bottom:20px; line-height:220%;
           font-family: 'Nanum Barun Gothic', sans-serif;  font-size:11px; color:#000; text-align:justify; }
.article a {font-family: 'Basic', sans-serif; font-size:11px; color:#083f66; text-transform: uppercase; }
.article a:hover {color:#000;}
.article blockquote { border-left: 5px solid #e5e5e5; color: #999; padding-left: 10px; margin: 15px 0 0 0; }



.nanum { font-family: 'Nanum Barun Gothic', sans-serif; font-size:8pt; line-height:2.2; text-align:justify; }
.abc { font-family: 'Montserrat', sans-serif;   font-weight: 400; font-size:9px;  text-transform: uppercase; }





.moreless_fold span, .moreless_top span 
{ font-family: 'Basic', sans-serif; font-size:9px; color:#ccc; text-transform: uppercase;
border:1px solid #ccc; padding: 3px 10px 4px 10px; border-radius:20px;}
.moreless_fold span:hover, .moreless_top span:hover { background-color:#ccc; color:#fff;-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;}
.moreless_content { padding:10px 0; margin-top:15px; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; }
.moreless_bottom { display:none; }



.tagTrail { margin-top:25px; color:#ccc; font-family: 'Basic', sans-serif; font-size:9px;}
.tagTrail a { color:#ccc;  }
.tagTrail a:hover { color:#000; }
.tag-icon { font-size:10pt; margin-right:5px; }



.actionTrail { margin-top:-13px; float:right; font-family: 'Montserrat', sans-serif;   font-weight: 400; font-size:9px;  text-transform: uppercase; display: block;}
.actionTrail a {color:#ccc}
.actionTrail a:hover {color:#000}

#comment {margin-top:40px;}
.commentWrite_form {margin:30px 0 -20px 0;}

.comment_input {width:80px; color:#555; border:1px solid #eee; border-top:0 none; border-right:0 none; border-left:0 none; color:#555; font-size:9pt;}
.comment_text {width:498px; height:100px; border:1px solid #eee; color:#000; font-size:9pt; font-family: 'Nanum Barun Gothic', sans-serif; }
.c_homepage {width:152px;}
.comment_border {border:1px solid #eee; margin:0 0 20px 0; padding:20px 20px 0 20px;}

.comment_form {font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:7pt;}
.c_date, .c_control {color:#ccc;}
.c_control a {color:#ccc;}
.c_name {font-weight:bold; color:#000; }

.writeWrap {overflow:hidden; margin-top:-20px; }
.c_submit { float:right; color:#ccc; font-size:8pt; font-family: 'Montserrat', sans-serif; text-transform:uppercase;}
.c_sub { width:18px; float:right;  background:#fff; font-family: 'Montserrat', sans-serif; text-transform:uppercase; cursor:pointer;  font-size:8pt; 
border:1px solid #ddd; border-top:0 none; border-right:0 none; border-left:0 none; color:#ccc; border-bottom:0 none; }






#guestbook {margin-bottom:70px; margin-top:0px;}
.guest_title { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:12px; color: #ccc; margin-bottom:20px; margin-left:0px; }
.guestWrite_form {margin:40px 40px 0 0px;}

input {width:105px; color:#555; border:1px solid #ddd; border-top:0 none; border-right:0 none; border-left:0 none; color:#555; font-size:9pt;}
textarea {width:495px; height:100px; border:1px solid #ddd; color:#000; font-size:9pt; font-family: 'Nanum Barun Gothic', sans-serif; }
.homepage {width:170px;}

.secretWrap {text-align:center; float:right; margin-top:-15px; }
.checkbox {width:13px; border:0 none; vertical-align:middle; margin-top:-1px;}
.secretlabel {font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:12pt; color:#ccc; }

.writeWrap {overflow:hidden; margin-top:-5px; }
.submit { float:right; color:#ccc; font-size:8pt; font-family: 'Montserrat', sans-serif; text-transform:uppercase;}
.sub { width:18px; margin-left:5px; float:right;  background:#fff; font-family: 'Montserrat', sans-serif; text-transform:uppercase; cursor:pointer;  font-size:8pt; 
border:1px solid #ddd; border-top:0 none; border-right:0 none; border-left:0 none; color:#ccc; border-bottom:0 none; }

.guestList {margin-top:10px;}
.guest_notice {margin-left:0px; font-size:8pt; font-family: 'Nanum Gothic', sans-serif; color:#bbb;}
.guest_notice a {font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:7pt; color:#083f66; text-transform:uppercase;}
.g_write {font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:7pt; text-transform:uppercase; color: #ccc; margin:10px 0 0 0px;}


ol { margin-left:-40px; }
.guest_form {font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:7pt;}
.g_date, .g_control {color:#ccc;}
.g_control a {color:#ccc;}
.g_name {font-weight:bold; color:#000; }


.re_border {border-top: 1px dashed #ddd; }
.g_reply {margin-top:20px;}

.guest_border {border:1px solid #eee; margin:0px 0px 20px 0px; padding:20px 20px 0 20px;}








#bottom {  background-color:#fff; margin:0px 50px 0px 50px; padding-bottom:25px;}
.copy { float:right; font-family: 'Open Sans', sans-serif; font-size: 9px;  color:#ccc; margin-top:-30px; }
.sns { float:left; text-align:right; margin-top:-30px; } 
#so-icon { padding:0px 20px 0 0px; float:left; font-size: 12pt; }
#so-icon a{ color: #ccc; opacity: 0.6; }
#so-icon a:hover { opacity: 1.0; }






.searchList ol { padding: 0; margin: 0 -50px; }
.searchList li { border-bottom: 1px solid #eee; padding: 13px 50px 15px 50px; }
.searchList li a { padding: 0; margin-left: 8px; font-size:8pt;  font-family: 'Nanum Barun Gothic', sans-serif; display:inline-block; 
width:400px; text-overflow: ellipsis;overflow:hidden;white-space:nowrap;}
.searchList a:hover { color: #ccc; } 
.list_title { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:12px; color: #ccc; margin-bottom:20px; }
.list_date { width: 61px; display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:9px; color: #ccc; text-align: left; }


.recentComment { margin-bottom:30px;}
.side_comment { font-size:7pt; margin-bottom:5px; font-family: 'Nanum Barun Gothic', sans-serif;  text-align:justify;}
.side_comment a {color:#ccc;}
.side_comment a:hover {color:#000;}
.sc_name {color:#ccc;  font-family: 'Montserrat', sans-serif; font-weight: 400;}



#sidebar { height:500px; }
#sidebar2 { padding: 25px; margin-left:1px; border-left:1px solid #eee;}


.sidebar_head { padding: 25px; margin:0 -25px; border-top: 1px solid #eee;  font-family: 'Basic', sans-serif; font-size:9px; color:#ccc; text-transform: uppercase;}
.sidebar_head a { color:#ccc; }
.sidebar_head a:hover { color:#000; }


.sidebar_head_l { padding: 25px; margin:0 -25px; border-top: 1px solid #eee;
font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:14px; color:#ccc; text-transform: uppercase;}
.sidebar_head_l a { color:#ccc; padding-right:15px; }
.sidebar_head_l a:hover { color:#000; }


#search input { border: 1px solid #eee; border-radius: 20px; width: 160px; height: 10px; padding: 7px 10px;
		color: #ccc;  text-align: left; font-family: 'Basic', sans-serif; font-size:9px; text-transform: uppercase; margin-bottom:25px; }

#search input:hover, #search input:focus { background-color:#eee; color: #000; }


.archive_bar {  margin:-10px 0 25px 0; font-family: 'Basic', sans-serif; font-size:9px; color:#ccc;}
.archive_bar a { color:#ccc; }
.archive_bar a:hover { color:#000; }


.lessbar {  margin:-10px 0 25px 0; font-family: 'Basic', sans-serif; font-size:9px; color:#ccc;}
.lessbar a { color:#ccc; }
.lessbar a:hover { color:#000; }





.secret { width: 160px; margin: 50px auto; padding: 0;font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:9px; text-transform: uppercase;
	  color: #ccc; text-align: center; overflow: hidden;}

.secret input { border: 1px solid #eee; border-radius: 20px; width: 130px; height: 10px; padding: 7px 10px;
color: #ccc; text-align: left; font-family: 'Basic', sans-serif; font-size:9px; text-transform: uppercase; margin:15px 0 25px 0; float: left; }

.secret input:hover, .secret input:focus { background-color:#eee; color: #000; }




#info { float:left; bottom:0; cursor:pointer; 
        position: fixed; clear: both;  text-align:center;}
#info a { color:#000; }
#info a:hover { color:#000;  }
#info li { width:69px; height:40px; border-top:1px solid #eee; padding-top:18px; }
#info li:hover{ width:69px; height:40px; background-color:#eee; }








/* CATEGORY */
ul, li { list-style:none; }

.cate { margin-top:0px; width:69px; z-index:50; position:fixed; display:block;
        font-family: 'Basic', sans-serif; font-size:9px; text-transform: uppercase; color: #ccc; }
.cate a { width:69px; height:69px; color: #ccc; }
.cate ul { display:none; list-style:none; } 
.cate li { width:69px; float:left; text-align:left; letter-spacing:0px;
           position:relative; list-style:none; }
.cate li:hover ul { display:block; position:absolute; }

.cate ul li{ border-bottom:1px solid transparent; }

#cate_home {  text-align:center; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:11px; width:71px;  padding:20px 0;  margin-bottom:20px; color:#fff; background-color:#083f66; margin-left:0px; }
#cate_home:hover { color:#fff; background-color:#000; 
-webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s;
    transition: all 0.5s; }

.bar { margin-left:35px; padding-left:20px; margin-top:-15px; background:url('images/a.png') no-repeat 12px 10px; }

.in_bar { background-color:#fff;  opacity:1;  }

.bar li { width:80px; padding:18px 10px; margin-left:-1px; text-align:center;
background-color:#083f66;  opacity:0.9;
     /* -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
       box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);*/}

.bar li a { color:#fff; }
.bar li:hover { background-color:#000; cursor:pointer;
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                transition: all 0.5s; }

ul.cate li:hover li ul, ul.cate li.sfHover li ul { top: -1500px; }
ul.cate li li:hover ul, ul.cate li li.sfHover ul { left: 100px; top: 0px; }
ul.cate li li:hover li ul, ul.cate li li.sfHover li ul { top: -1500px; }
ul.cate li li li:hover ul, ul.cate li li li.sfHover ul { left: 160px; top: 0; }


.icon { opacity: 0.2; width:35px; height:35px; margin: 0 0 20px 16px; }
.icon a { }
.icon:hover, icon a:hover {opacity: 1.0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;}
.icon-1 { background:url('images/icon.png') no-repeat 0 0px; }
.icon-2 { background:url('images/icon.png') no-repeat 0 -35px  }
.icon-3 { background:url('images/icon.png') no-repeat 0 -70px; }
.icon-4 { background:url('images/icon.png') no-repeat 0 -105px; }
.icon-5 { background:url('images/icon.png') no-repeat 0 -140px; }
.icon-6 { background:url('images/icon.png') no-repeat 0 -175px; }


.menu-bar {
 margin:0px;
 padding: 0;
 background: transparent;
 z-index:10; 
 overflow:hidden;
}


.menu-bar{
 z-index:5;
 width:0;
 transition: all 0.1s ease-in-out;
 margin:0px 0 0 70px;
 background: #fff;
  }

.menu-bar li a{
 display: block;  position: relative;
color: #000; transition: background 0.1s ease-in-out; }


.open{ width:230px; }






























.m_on li {margin: 0 0 15px 0;}
.m-icon {display:none;}








@media screen and (max-width:500px){
	
*{-webkit-text-size-adjust:none; }

body { background-color:#fff;}
textarea, .comment_text {width:100% }	
	
#wrap { width:100%; margin: 0px auto; }
#main { width:78%; background-color:#fff; margin:0 0 0 0px; }
#content { width:100%; background-color:#fff; margin:0 0 50px 22%; padding-top:20px; }

.title, .title a {font-size:13px; }	
.article, .nanum, {font-size:14px;}
.article a {color:#000; text-decoration:underline; font-size:11px;}
.moreless_fold span, .moreless_top span, .bar li{font-size:10px;}
.post_cate a { font-size:10px; }

#menubar, .cate, #top-back {margin-left:-1px; }
#top-back { width:0px; }
.entry_line { border-top: 1px solid #eee; margin:60px 0px 0px 0px; }	
	
#bottom {width:100%; text-align:center; padding: 0 0px 0px 20%; margin: -20px 0 35px 0; }
.copy { font-size: 10px; float:none; margin:10px 0 0px 0; text-align:center; }
.m-icon { display:block; }
.m-icon a { color:#ccc; padding:0 7px; font-size: 16px;}
#so-icon {display:none;}
	

.tagTrail { margin-top:25px; margin-bottom:10px;  font-size:12px;}
.tag-icon { font-size:12px; margin-right:5px; }
.actionTrail { margin-top:0px; font-size:10px; float:left;}

#info, #menubar, .cate {width:12%;}	
#cate_home {font-size:8px; width:100%;  padding:25% 0; margin-bottom:25%; margin-left:1px;}		
.icon { opacity: 0.2; width:100%; height:27px; margin: 0 0 25% 21%; }
.icon-1 { background:url('images/icon.png') no-repeat 0 0%; background-size:40%; }
.icon-2 { background:url('images/icon.png') no-repeat 0 20%; background-size:40%; }
.icon-3 { background:url('images/icon.png') no-repeat 0 40%; background-size:40%;  }
.icon-4 { background:url('images/icon.png') no-repeat 0 60%; background-size:40%; }
.icon-5 { background:url('images/icon.png') no-repeat 0 80%; background-size:40%; }
.icon-6 { background:url('images/icon.png') no-repeat 0 100%; background-size:40%; }
#info li { width:100%; height:100%;  padding:24% 0; }
#info li:hover{ width:100%; height:100%;  }	

#guestbook { width:100%; background-color:#fff; margin:0 0 50px 0%;}
.guest_title { font-size:12px; margin-bottom:20px; margin-left:0px; }
.guestWrite_form {margin:40px 0px 0 0px;}
.guest_notice {margin-left:0px; font-size:8pt; line-height:2.2; }
.guest_border {margin:0px 0px 20px 0px; padding:20px 20px 0 20px;}	
	
.searchList ol { padding: 0; margin: 0 0px 0 0px; width:100%; }
.searchList li { border-bottom: 1px solid #eee; padding: 13px 0px 15px 0px; }
.searchList li a { font-size:11px; display:inline-block; 
width:72%; text-overflow: ellipsis;overflow:hidden;white-space:nowrap;}
.list_title { font-size:12px; color: #ccc; margin-bottom:20px; }
.list_date { width:55px; font-size:10px; }

.g_write {font-size:10px; width:100%;}	
.comment_input {margin-bottom:20px; width:70%; font-size:10px;}
.c_homepage {margin-bottom:20px; width:80%; font-size:10px;}
.comment_text { font-size:12px; }

.hide_button a { display:block; top:20px; margin-left: 92%; z-index:99;}
	
#sidebar { display: block; }
#sidebar2 { padding: 25px 0; display: block; border-left:0px solid #eee}
.open { min-width:77%; }
.menu-bar { margin:0px 0 0 18%;  }
	
.sidebar_head, .sidebar_head_l, .lessbar { font-size:14px }
#search input { font-size:14px; width:90%; }
.m_on{display:block;}
.m_off{display:none}
.m_on li {width:45%; float:left; margin: 0 0 50px 3%;}
	
	
	
	/* Tistory utility  */
.tistorytoolbar {  display: none !important;}
.entry-content img {  display: block;  max-width: 100%;  height: auto;}
div.article iframe {  max-width: 100% !important;}
.imageblock { max-width:100%; } 
#ttCanvas, .tt-span-12 {width:98.5% !important; margin: 0px auto;} 

}
	
@media screen and (max-width:350px)
{ 
.show_date { display:none; }
.searchList li a { font-size:14px; display:inline-block; 
                   width:65%; text-overflow: ellipsis;overflow:hidden;white-space:nowrap;}
#cate_home {font-size:5px; width:100%;  padding:25% 0; margin-left:1px;}		
.icon { opacity: 0.2; width:100%; height:27px; margin: 0 0 25% 15%; }	
}	















	/* Article Option  */

.infobox {overflow: hidden;}

.textinfo_1 {font-family: 'Montserrat', sans-serif; margin:0; padding:0; width:25%; float:left; font-size:10px; color:#bbb; text-transform: uppercase; }
.textinfo_2 {margin:0; padding:0; width:75%; float:left;}
.textbutton { color:#083f66; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size:12px;  }

.textbox {border: 1px solid #083f66; border-radius: 15px; text-transform: uppercase; padding: 1px 7px 2px 7px; background: #083f66; margin-right:10px;
font-family: 'Basic', sans-serif; font-size:9px; color:#fff;}

.info1 {}
.info2 {margin-top:250px;}












#top-back { width:670px; background-color:#fff; top: 0; z-index: -99; position:fixed; height:100%;
border-right:1px solid transparent; }
#side-back { margin-left:-1px; width:230px; background-color:#fff; top: 0; z-index: -99; position:fixed; height:100%; border-left:1px solid #eee; border-right:1px solid transparent;}

#tistorytoolbarid { display : none; }