@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@charset "utf-8";

/* 반드시 들어가야 하는 스타일 시작 */
html{
    -webkit-text-size-adjust: 100%;
}
/* 본문 공통 */
body{
	font: 0.78em/1.5 "Nanum Gothic", gulim, Sans-serif;
	color: #08A;
	background-image: none;
	background-position: left top;
	background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}
a               { transition: all 0.2s;}
a:link          { color: #08A; text-decoration:none;}
a:visited       { color: #08A; text-decoration:none;}
a:hover         { opacity: 0.5;}
a:active        { color: #08A; text-decoration:none;}

/* 페이징 - 현재 페이지 */
.selected               { color: #F16327;}
.no-more-prev { color:#888;}
.no-more-next { color:#888;}


/* 카테고리 - 이미지 버튼 */
	.ib                     { cursor:pointer; display: none;}
/* 카테고리 - 트리 셀 */
	.branch3                { cursor:pointer;}
    .branch3:hover          {opacity: 0.5;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
	.c_cnt                  { color: #F16327;}

/* 달력 월 표시 */
	.cal_month              { font:0.95em; font-weight:bold; margin-bottom: 0.85em;}
/* 달력 요일 표시(th 영역) */
	.cal_week1              { font:0.95em; font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
	.cal_week2              { font:0.95em;  color:#f30; }


/* 달력 Day(td 영역) */
	.cal_day                { font:0.95em; text-align:center;}
/* 달력 Day, 일요일 (td 영역)  */
	.cal_day_sunday         { color:#f30 !important;}
	.cal_day_sunday a       { color:#f30 !important;}
/* 달력 오늘 날짜 표시(td) */
	.cal_day4               { color:#0CA;  text-decoration:underline;}
/* 달력 글쓴 날 링크 스타일 */
	a.cal_click:link        { font-weight:bold;}
	a.cal_click:visited     { font-weight:bold;}
	a.cal_click:hover       { font-weight:bold;}

/* 종류별 코멘트 [##_rp_rep_class_##] */
	.rp_admin               { }
	.rp_secret              { color:#f30;}
/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
	.hiddenComment { padding-left:20px;  font-weight:normal;}


/* 이미지 아래 캡션 스타일 */
	.cap1                   { color:#999;  text-align:center; padding:4px 0; margin:0;}
/* 그림 */
	.imageblock      { max-width: 100%; padding:0; margin:5px 0; text-align:center;}
/* 그림 2개 배치 */
	.dual                   { background-color:#fff; margin-bottom:5px;}
/* 그림 3개 배치 */
	.triple                 { background-color:#fff; margin-bottom:5px;}

/* 본문 - more / less */
	.moreless_fold          { padding-left:20px;}
	.moreless_top           { padding-left:20px;}
	.moreless_bottom        { padding-right:20px; text-align:right;}

/* 키워드 */
	.key1 { cursor: pointer; border-bottom: 2px dotted #0AC; }


/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */

hr              { display:none;}
iframe          { max-width: 100%;}
img             { border: 0; max-width:100%; height: auto;}
h1, h2, h3, h4  { margin: 0;  padding:0;}
h1              { font-size: 1.6em;}
h2              { font-size: 1.4em;}
h3              { font-size: 1.2em;}
h4              { font-size: 1em;}
input           { border: none; color: #0AC; max-width: 100%;}
textarea        { border: none; color: #0AC; max-width: 100%; padding: 0;}
select          { border: 0.3em solid #0AC;}
submit          { border: none;}
tt-youtube-plugin   { max-width: 100%; height: auto;}

/* 블로그 레이아웃 */

#container {
	width: 72em;
    padding-top: 5em;
	margin: 0 auto;
	background: #FFF;
}

#headerBox {
    overflow: hidden;
    text-shadow: 0 0 0.3em #000;
    background: #0AC;
    position: fixed;
    width: 100%;
    box-shadow: 0 0 1em #0AC;
}

#header {
    width: 72em;
    margin: 0 auto;
}


/* ***** Header ***** */

#header h1 a { 
    font-family: 'Nanum Pen Script';
    float: left;
	margin: 0.2em 0 0.2em 0.4em;
    color: #FFF;
    font-size: 2.2em;
    line-height: 1.0;
}
.blogMenu { font-size:1.5em; float: right;}
.blogMenu a { color:#FFF; display: block; width: 100%;}
.blogMenu li {
	list-style: none;
    width: auto;
	float:left;
    margin: 0;
    line-height: 3;
    padding-left: 1em;
}

.blogMenu ul{
    margin: 0;
    padding: 0;
}


.hiden li { width: 100%; text-align: center;}

#content {
	width: 50em;
    margin: 2em;
}


#sidebar {
	float:right;
    width: 18em;
    margin: 1em 0;
    background: #FFF;
}


#footer {
	background:#FFF;
	clear:both;
	padding: 1em;
}


/* ***** content ***** */
#content .nonEntry { padding: 1em; box-shadow: 0 0 1em  #0AC; margin-bottom: 2em;}
#content .nonEntry h3   { border-bottom:0.2em solid #0AC; margin-bottom: 0.5em;}
#content .entry          { padding: 1em; box-shadow: 0 0 1em  #0AC; margin-bottom: 2em; overflow:hidden; }

#searchList                { overflow:hidden; width:auto; }
#searchList ol,
#searchRplist ol            { list-style:none;  padding:0.5em 0;  margin:0;}
#searchList li,
#searchRplist li            { border-bottom:0.1em solid #0AC;  padding-bottom:0.2em;  margin-bottom:0.3em;}
#searchList .date,
#searchRplist .date         { margin-right: 1em; }
#searchList .cnt            { color: #F16327;}
#searchRplist .name         { padding-left: 1em;}
#localog                    { }
#localog .spot              { padding-left:2em;  margin-top:0.5em;}
#localog .info              { padding-left:1emx;  margin-top:0.2em;}
#localog a:link             { color:#5a5194;}
#localog a:visited          { color:#5a5194;}
#taglog                     { }
#taglog ul                  { padding:0.5em; margin:0;}
#taglog li                  { display:inline;}
#taglog li .cloud1          { font-weight:bold;  font-size: 0.3em;}
#taglog li .cloud2          { font-weight:bold;  font-size: 0.27em;}
#taglog li .cloud3          { font-weight:bold;  font-size: 0.25em;}
#taglog li .cloud4          { font-size: 0.23em;}

#guestbook                  { }
#guestbook p                { margin: 0 0 0.5em 0;}

#guestWrite                 { border: 1em solid #0AC; background-color: #0AC; color: #FFF; margin-bottom: 2em;}
#guestWrite input           { width: 15em;}
#guestWrite textarea        { width: 100%;}
#guestWrite .homepage       { width: 25em;}
#guestWrite .submit         { width: 6em; overflow:hidden; display:block; border:0; cursor:pointer; margin:0 auto;
    padding: 0.2em; background-color: #FFF; color: #08A;}

#guestList                  { }
#guestList ol, #guestList ul{ margin:0; padding:0;  list-style:none;}
#guestList li p             { border-top:0.2em dashed #0AC; margin: 0.5em 0 0 0; padding: 0.5em 0 0 1em;}
#guestList ol li            { border:0.2em solid #0AC;  padding: 0.7em 0;  margin-bottom:1em;  overflow:hidden; background: #EFF;}
#guestList li ul li         { margin-left: 2em; border:none;  width:auto; overflow:hidden;}
#guestList li .name         { margin: 0 1em; color:#0AC;  font-weight:bold;}
#guestList li .date         { margin-right: 1em;}

#guestList .control a.address       { padding-bottom:2px;  text-decoration:none;}
#guestList .control a.address span  { display: none;}
#guestList .control a.modify        { padding-bottom:2px;  text-decoration:none;}
#guestList .control a.write         { text-decoration:none;}


/* entry */
.entryNotice             { padding: 1em; box-shadow: 0 0 1em  #0AC; margin-bottom: 1em;}

.entryProtected          { padding: 1em; box-shadow: 0 0 1em  #0AC; margin-bottom: 1em;}
.entryProtected p.text   { padding-left:4em;}
.entryProtected input    { width:16.75em;}
.entryProtected .submit  { width:3em; background-color: #FFF; color: #08A;}

.titleWrap               { width: auto; padding: 1em; text-align: center; background: #0AC; color:#FFF; text-shadow: 0 0 0.3em #333; margin-bottom: 2em;}
.titleWrap a             { color:#FFF;}
.titleWrap .category a   { font-size: 1.4em; margin-right:0.3em; color: #FFF;}
.titleWrap .date         { font-size: 1.2em; color: #FFF;}
.titleWrap h2            { font-size: 1.1em; font-family: 'Nanum Pen Script';}


.article                 {  width: auto; font-size: 1.1em; color: #666; overflow:hidden;}

.article a:link          { color:#666;  text-decoration:none;}
.article a:visited       { color:#666;  text-decoration:none;}
.article a:hover         { color:#666;  text-decoration:underline;}
.article a:active        { color:#666;  text-decoration:none;}

.article dt              { text-decoration:underline;}
.article dd              { margin-left:20px;  padding-bottom:10px;}

.article blockquote      { padding-left:25px;  margin:10px;}

.author                  { text-align:right; padding:20px 20px;}
.author .text            { font-size: 90%;}


.tagTrail                { padding:8px 5px 5px 30px; clear:both;}
.tagText                 { display:none;}

.actionTrail             { border-top:0.2em dotted #0AC;  padding:1em;  clear:both;}
.actionTrail .cnt        { color: #F16327;}

.trackback               { width: auto; border:0.2em solid #0AC; background:#FFF; padding:1em; margin-bottom:1em; overflow:hidden;}
.trackback h3            { font-size: 1em; border-bottom:0.2em solid #0AC;}
.trackback h4            { font: 12px; font-weight:normal;  margin:0;}
.trackback ol            { margin: 0;  padding:0;  list-style:none;}
.trackback li            { border-top: 2px dotted #0AC;  padding:5px;}
.trackback .date         { font-size: 0.9em;}
.trackback p             { font-size: 0.95em;  color:#999;  margin:3px 0 0 0; padding:0;  letter-spacing:-1px}

.trackback a.delete      { padding-left: 8px;  text-decoration: none;}


.comment                          { overflow: hidden; padding: 1em; background: #0AC;}
.comment p                        { margin: 0.5em 0; padding: 0;}

.comment h3                       { display: none;}
.comment ol, .comment ul          { margin: 0;  padding: 0;  list-style: none;}
.comment ul                       { padding-left: 1em; padding-bottom: 1em;}
.comment .date                    { padding-right: 3em;}
.comment li ul li                 { margin: 1em 0 1em 1em;}
.comment .control a.address       { display: none;}

.commentList                      { color: #FFF;}
.commentList a                    { color: #FFF;}
.commentWrite                     { overflow: hidden; background-color: #0AC; color:#FFF;}
.commentWrite input               { width: 15em; }
.commentWrite textarea            { width: 100%; margin:0; }
.commentWrite .homepage           { width: 25em; border:none;}
.commentWrite .submit             {
    text-align: center;
    width:6em;
    margin: 0.5em auto 0;
    overflow: hidden;
    display: block;
    cursor: pointer;
    padding: 0.2em;
    background-color: #FFF; color: #08A;
}
.commentWrite .secretWrap         { clear:both; float:right; position:relative; top:0px; left:-10px; margin-bottom: 5px;}
.commentWrite .checkbox           {	border:none; padding:0;	margin:0; width:25px;}

#paging             { padding: 1em;  text-align:center;  font-size:0.95em;}
#paging .numbox     { border-left:1px solid #0AC; padding-left:6px; margin-left:6px;  font:0.95em NanumGothicWeb,verdana;}
#paging .num        { border-right:1px solid #0AC; padding-right:8px; margin-right:5px;}

/* ***** sidebar ***** */
#sidebar ul                    { padding:0;  margin:0;  list-style:none;}
#sidebar h3                    { font-weight:bold; border-bottom: 0.2em solid #0AC;}
#sidebar .cnt                  { font-size: 0.85em;  color: #F16327;}
#sidebar .date                 { font-size: 0.85em;}
#sidebar .name                 { font-size: 0.9em;}
#sidebar > div        { margin: 1em; padding: 1em; 
    box-shadow: 0 0 1em  #0AC; background: #FFF;}

#blogImage img      { width: 100%}
#blogDesc           { width: auto; text-align: center;}
#userID             { padding-left:22px;  letter-spacing:-1px;}
.userID             { color: #0CA;}

#notice             { padding:0;}
#notice li          { border-bottom:0.2em dotted #0AC;}

#adminMenu          { text-align:center; padding-top:5px; margin:10px 0;}
#adminMenu li       { display:inline; background:none;}
#adminMenu li a input { width: 45%; transition:0.5s; background: #0AC; color: #FFF;}
#adminMenu li a input:hover { background: #FFF; color: #0AC;}

#searchBox              { text-align:center;}
#searchBox input        { width: 100%; padding: 0; transition:0.5s; background: #FFF; color: #0AC;}
#searchBox input:hover  { background: #0AC; color: #FFF;}
#searchBox input:focus  { background: #0AC; color: #FFF;}
#searchBox .submit      { width: 100%; cursor:pointer; border: none;}

#category div { display: inline !important; color: #0AC !important;}
#category ul li ul li ul li { padding-left: 0.5em; margin-left: 0.5em;}
#category td { font-size: 1em !important; padding: 0 !important; width: auto !important;}
#category img { display: none;}
#category li            { background:none;}
#category li ul li      { padding-left:0;}
#category li ul li ul li    { background:none; border-left:0.1em dotted #0AC;}
#tagbox ul          { padding:5px 2px;	text-align:justify;}
#tagbox li          { background:none;  display:inline;}
#tagbox a           { letter-spacing:-1px;}
#tagbox li .cloud1  { font-weight:bold;  font-size:1.5em;}
#tagbox li .cloud2  { font-weight:bold;  font-size:1.4em;}
#tagbox li .cloud3  { font-weight:bold;  font-size:1.3em;}
#tagbox li .cloud4  { font-size:1.2em;}
#tagbox li .cloud5  { font-size:1.1em;}


#recentComment      { overflow:hidden;}
#recentComment .info_wrap   {  margin-bottom:3px; color:#999; display:block;}

#recentTrackback      { overflow:hidden;}
#recentTrackback .info_wrap  {  margin-bottom:3px; color:#999; display:block;}

#archive li         { font-family:NanumGothicWeb,verdana;}
#calendar td        { font-family:NanumGothicWeb,verdana;}

#counter            { font-size: 1em;  padding:5px 0;  margin:10px 0;  text-align:center;  background-color:#FFF;}
#counter li         { background:none;  display:inline;  padding:0 5px;}
#counter li.total   { display:block;}

#adTistory.invite_tistory   { marign: 8px 0; font-family: Dotum; font-size:11px; text-align:center; }
#adTistory img  { width: 10em; !important; height: auto !important;}
#btnRSS         { text-align:center;}
#btnRSS img     { width: 6em; !important; height: auto !important;}
#uibgmplayer    { margin:5px 0 0 5px; width:181px;}

/* ***** footer ***** */
#footer         { text-align:center;}

#tistorytoolbarid {display: none;}
#check { display: none;}
#check_lb {
    display: none;
    margin: 0.9em;
    position: relative;
    width: 2em;
    height: 2em; 
    float: right;
    border: 0.5em solid #FFF; /* border color */
    cursor: pointer;
}
#check_lb:hover { opacity: 0.5;}

#check_side { display: none;}
#check_side_lb {
    text-align: center;
    display: none;
    background: #0AC;
    font-family: 'Nanum Pen Script';
    color: #FFF;
    text-shadow: 0 0 0.3em #000;
    font-size: 2em;
    margin: 0;
    position: relative;
    width: 100%;
    cursor: pointer;
    transition: opacity 0.3s;
}
#check_side_lb:hover { opacity: 0.5;}

@media screen and (min-width:80em){
    #container {  width: 90em;}
    #header { width: 90em;}
    #content { width: 68em;}
}

@media screen and (max-width: 58em), screen and (max-device-width:58em){
    #check_lb { display: inline;}
    #check_side_lb { display: block;}
    #sidebar            { float: left; width: 100%; display: none; border-bottom: 0.5em solid #0AC;}
    #container          { width: 100%; padding: 0;}
    #content            { width: auto; margin: 2em 1em; border: none;}
    #headerBox          { width: auto; height: auto; position: relative;}
    #header             { width: auto; overflow: hidden;}
    .blogMenu           { width: 100%; display: none; background: #08A;} 
    #check:checked + .blogMenu { display: inline;}
    #check_side:checked + #sidebar { display: inline;}
    .blogMenu li        { text-align: center; line-height: 2;}
}
@media screen and (max-width: 20em){
    #check_lb { display: none;} 
    .blogMenu { width: 100%; display: block; background: #08A;}
}