@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
@import url('//cdn.rawgit.com/young-ha/webfont-archive/20161201/css/Arita-dotum.css');


/* 카테고리 - 이미지 버튼 */
.ib                     { cursor:pointer;}
/* 카테고리 - 트리 셀 */
.branch3                { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
.c_cnt                  { letter-spacing:0px; color: #fefeef; }
/* 이미지 아래 캡션 스타일 */
.cap1                   { color:#999; text-align:center; padding:4px 0; margin:0;}
/* 그림 */
.imageblock             { margin:5px 0;}
/* 그림 2개 배치 */
.dual                   { margin-bottom:5px;}
/* 그림 3개 배치 */
.triple                 { margin-bottom:5px;}

/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
.hiddenComment .name:before {content:"SECRET"; font-size: 1em; }

/* 페이징 - 현재 페이지 */
.paging { clear:both; width:100%; height: 10px; text-align:center; margin: 20px 0; }
.paging a { margin-bottom: 40px; color: #8e9aaf; padding: 15px 0; font-size: 15pt; border-bottom: 2px solid #ffffff; transition-duration: .3s; }
.prev { float: left; }
.next { float: right; }
.prev:hover, .next:hover { border-bottom: 2px solid #8e9aaf; }

/* 본문 - more / less */
.moreless_fold, .moreless_top { margin: 10px 0; color: #8e9aaf; }
.moreless_fold::before, .moreless_top::before { margin-right: 5px; font-family: 'Dripicons-v2'; content: '\e034';}
.moreless_content { margin: 5px 0; }
.moreless_bottom  { text-align: right; color: #8e9aaf; }
.moreless_bottom::after { margin-left: 5px; font-family: 'Dripicons-v2'; content: '5';}

/* 키워드 */
.key1 { cursor: pointer; border-bottom: 1px dotted #ccc; }

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

/*reset*/
* {margin:0; padding:0; border:0; }
html { width: 100%; height: 100%; transition: transform 1000ms ease-out; }
body { height:100%; font-family: 'Arita-dotum', sans-serif; font-size: 0.9em; color: #454445; }
li        { list-style-type: none; }
a:link    { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:active  { color: inherit; text-decoration: none; }
a:hover   { color: inherit; text-decoration: none; transition: all .5s; }

input 	  { -webkit-appearance: none; -webkit-border-radius:0px; }
input[type=text], input[type=password], textarea { font-family: 'Arita-dotum', sans-serif; font-size: 0.8em; color: #4f81bd; }


/* mq */
@media screen and ( max-width: 600px ) {
  #sidebar { position:fixed; top:0; left:0; width:250px; height:100%; margin:0 0 0 -250px; -moz-transition:all 200ms ease-in; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; transition:all 200ms ease-in; z-index: 2000; }
  #content { padding-top: 50px; margin: 5%; width: 90%; -moz-transition:all 200ms ease-in; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; transition:all 200ms ease-in;}
  #header { display: block; position: fixed; width: 100%; height: 50px; line-height: 50px; left: 0; top: 0; z-index: 400; text-align: center; background: #ffffff; border-bottom: 1px solid #f7f7f7;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    -moz-transition:all 200ms ease-in; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; transition:all 200ms ease-in; }
  #header a { color: #8e9aaf; font-size: 1.3em; font-weight: 600;font-family: 'Open Sans', 'Arita-dotum', sans-serif; }

  .navBtn   { display:none; }
  .navBtnLb { position:fixed; display:block; left: 0; width: 50px; height: 25px; padding: 12px 0; color:#8e9aaf; text-align:center; font-size:1.7em; z-index:500;
    -moz-transition:all 200ms ease-in; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; transition:all 200ms ease-in; }
  .navBtn:checked ~ .navBtnLb { left: 250px; }
  .navBtn:checked ~ #sidebar  { margin:0; }
  .navBtn:checked ~ #content, .navBtn:checked ~ #header { 
    -webkit-transform:translate3d(250px, 0, 0); -moz-transform:translate3d(250px, 0, 0);
    -o-transform:translate3d(250px, 0, 0); transform:translate3d(250px, 0, 0);
  }
  .profile { display: none; }
  .sb_wrap { top: 0; }
  .cwInput { width: 100%; }
  .cwSecret { clear: both; margin-top: 5px; }
  .cwSub    { margin-top: 5px; }
}

@media screen and ( min-width: 601px ) and ( max-width: 768px ) {
  #sidebar { position: fixed; width: 240px; z-index: 100; }
  #content { left: 270px; margin-top: 84px; display: block; width: calc(100% - 300px); }
  #header  { display: none; }
  .sb_wrap { top: 100px; }
  .navBtn, .navBtnLb { display: none; }
}
@media screen and ( min-width: 769px ) {
  #sidebar { position: fixed; min-width: 240px; width: 35%; z-index: 100; }
  #content { left: 35%; margin-top: 84px; margin-left: 30px; padding: 30px; display: block; width: 50%; max-width: 750px; }
  #header  { display: none; }
  .sb_wrap { top: 100px; }
  .navBtn, .navBtnLb { display: none; }
}



#container { width: 100%; overflow: hidden; }
#sidebar { float: left; display: block; height: 100%; background-image: url('./images/SB_BG.png'); background-repeat-y: no-repeat; background-size: cover; background-position: right; }
#content { float: left; position: relative; display: block; }


/* SIDE BAR */
.sb_wrap { position: absolute; float: right; right: 0; margin-right: 35px; width: 180px; text-align: right; }
.profile { position: relative; float: right; top: 30px; right: -32px; z-index: 200; overflow: hidden; 
  width: 65px; height: 65px; border-radius: 50%; border: 2px solid #ffffff; 
  -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.2); transition: all .5s; }
.profile .bloggerImage { width: 65px; height: 65px; }
.profile:hover { transform: rotateY(180deg); }

/* SIDE BAR - CATEGORY */
#category li .link_tit { display: none; } /* 전체보기(카테고리타이틀) */
#category li .link_item img, #category .category_list li.link_item img, #category .category_list .sub_category_list li .link_item img { display: none; } /* 새글아이콘x */
#category li ul li ul li a:before { display: inline-block; float: left; font-family: 'Dripicons-v2'; content: '-'; line-height: 18px; color: #ffffff; }
#category li ul li a:before { display: inline-block; float: left; font-family: 'Dripicons-v2'; content: 'V'; line-height: 18px; color: #ffffff; }
#category li a { position:relative; z-index: 1; display: block; font-family: 'Open Sans', 'Arita-dotum', sans-serif; font-weight: 600;
  color: #ffffff; padding: 15px 0; line-height: 18px; font-size: 0.9em; transition: all .5s; }
#category li a:after { display: block;  position: absolute; top: 50%; left: 0; bottom: 0; right: 0; 
  margin: auto; width: 1px; height: 1px; content: '.'; color: transparent; background: #ffffff; 
  visibility: none; opacity: 0; z-index: -1; transition: all .5s; }
#category li a:hover:after { opacity: 1; visibility: visible; width: 100%; height: 10%; transition: all .5s; }

/* SIDE BAR - SEARCH & QUICKMENU */
.search { width:100%; height: 30px; margin: 20px 0; }
.search .searchForm  { display: block; float: left; height: 28px; width: 75%; padding: 0 5px; background: none; border-bottom: 2px solid #ffffff; }
.search .searchSubmit  { display: block; float: right; height: 30px; line-height: 30px; text-align: right; font-size: 1.2em;  color: #ffffff; background: none; transition: all .5s; }
.search .searchSubmit:hover { color: #4f81bd; }
.menu { width: 100%; height: 45px; }
.menu a { display: block; float: left; padding: 7%; color: #ffffff; font-size: 1.2em; text-align: center; border-bottom: 2px solid rgba(0,0,0,0); transition: all .5s; }
.menu a > i { position: relative; }
.menu a:hover { border-bottom: 2px solid #ffffff; color: #4f81bd; }


/* NOTICE (INBOX) */
.entryNotice { border-bottom: 1px solid #f7f7f7; }
.entryNotice .article   { text-align:justify; }


/* PROTECED */
.entryProtected { margin-bottom: 30px; }
.pt_pw { float:left; background-color: #f7f7f7; height: 20px; text-align: center; width: 49%; }
.pt_submit { display: block; float:right; background-color: #f7f7f7; color: #4f81bd; 
  width: 49%; height: 20px; line-height: 20px; transition-duration: 0.5s; }
.pt_submit:hover { background-color: #4f81bd; color: #ffffff; }
.pt_submit i { font-size: 1.3em; }


/* SEARCH LIST TITLE */
.searchTitle { width: 100%; margin-bottom: 34px; color: #8e9aaf; font-weight: 600; font-family: 'Open Sans', 'Arita-dotum', sans-serif; }


/* MEDIA QUERY - list type - gallery */
@media screen and (max-width: 768px) { /* 540 ~  3열*/
  #lst_gal .list_content { width: 49%; margin-bottom: 2%; }
	#lst_gal .list_content:nth-of-type(odd) { margin-right: 2%; }
}

@media screen and (min-width: 769px) { /* ~ 400 2열 */
  #lst_gal .list_content { width: 32%; margin-bottom: 1%; }
	#lst_gal .list_content:nth-of-type(3n+2) { margin: 0 1%; }
}


/* list - gallery, general */
.list_wrap{  }
.list_wrap:after{display:block;clear:both;content:'';overflow: auto;}

#lst_gal .list_content { float:left; display: none; background:#fff; overflow: hidden; }
#lst_gal .list_content .thumb { position: relative; text-align: center; border:0 !important; white-space: nowrap; }
#lst_gal .list_content .thumb img { width: 100%; height: auto; }
#lst_gal .list_content .thumb .overlay_title { position: absolute; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(79, 129, 189, 0.5); }
#lst_gal .list_content .overlay_title .ol_title { width: 90%; color: #ffffff; font-family: 'Arita-dotum', sans-serif; font-size: 0.9em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); line-height: 15px; white-space: normal; overflow: hidden; }
#lst_gal .list_content .list_info { overflow: hidden; padding: 5px; background: #fcfcfc; transition-duration: .5s; }
#lst_gal .list_content .list_info .list_title { width: auto; font-family: 'Open Sans', 'Arita-dotum', sans-serif; font-size: 1em; font-weight: 400; color: #454445; }
#lst_gal .list_content .list_info .list_date { margin-top: 5px; font-family: 'Open Sans', sans-serif; font-size: 0.7em; color: #4f81bd; }
#lst_gal .list_content .list_info .txt_post{  margin-top: 1em; font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; color: #7f7f7f;    white-space: normal; line-height: 1.2; height: 3.4em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

#lst_web .list_content{ width: 100%; }
#lst_web .list_content:after{ display: block; clear: both; content: "" }
#lst_web .list_content { display: block; padding: 10px 0; border-bottom: 1px solid #f7f7f7; margin-bottom: 10px; text-decoration: none; cursor: pointer; color: #454445; }
#lst_web .list_content .list_info .list_title { font-family: 'Arita-dotum', sans-serif; font-size: 0.9em; font-weight: 400; }
#lst_web .list_content .list_info .list_title i { font-size: 0.8em; margin-left: 5px; color: #4f81bd; } /* secret */
#lst_web .list_content .list_info .list_date { display: block; margin-top: 5px; font-family: 'Open Sans', sans-serif; font-size: 0.7em; color: #4f81bd; }
#lst_web .thumb, #lst_web .txt_post{ display:none; }

#lst_web .list_content, 
#lst_web .list_content:hover
#lst_gal .list_content:hover{ transition-duration: .5s; }

#lst_gal .list_content .thumb:hover .overlay_title { opacity: 1;  }
#lst_gal .list_content .list_info:hover { opacity: 0.5; }
#lst_web .list_content:hover { border-left: 4px solid #f7f7f7; padding-left: 10px; }


/* ARTICLE */
.entry { display: block; overflow: auto }
.titleWrap { width: 100%; height: 20px; line-height: 20px; margin-bottom: 34px; font-size: 0.8em; color: #cccccc}
.titleWrap .atc_cate { float: left; font-family: 'Open Sans', 'Arita-dotum', sans-serif; color: #cccccc; font-weight: 400; }
.titleWrap .slash { float: left; padding: 0 10px; }
.titleWrap .date { float: left; }
.title a { display:block; margin-bottom: 34px; width:100%; color: #8e9aaf; font-family: 'Arita-dotum', sans-serif; font-weight: 600; }
.entry .admin { margin: 10px 0; text-align: right; font-size: 0.9em; padding: 10px; background-color: #f7f7f7; }
.entry .admin a { color: #8e9aaf; }
.entry .article { background-color: #ffffff; text-align:justify; line-height: 20px; }
.entry .article a:link    { color: #454445; text-decoration: none; }
.entry .article a:visited { color: #454445; text-decoration: none; }
.entry .article a:active  { color: #454445; text-decoration: none; }
.entry .article a:hover   { color: #4f81bd; text-decoration: none; }
.entry .article i { color: #8e9aaf; margin-right: 5px; }
.entry .article img, .entry .article video,  .entry .article iframe { max-width: 100%; }


/* TAG TRAIL*/
.tagTrail { display:block; padding: 15px 0; width: 100%; font-size: 0.8em; border-top: 1px solid #f7f7f7 }
.tagTrail .tagTitle   { float: left; margin-right: 20px; }
.tagTrail .tagTitle i { position: relative; margin-right: 10px; color: #8e9aaf; }
.tagTrail .tagList   { margin-left: 60px; position: relative; top: 3px; }


/* COMMENT - LIST */
.cnt { padding: 15px 0; border-top: 1px solid #f7f7f7; border-bottom: 1px solid #f7f7f7; font-size: 0.8em; }
.cnt i { margin-right: 10px; color: #fd999e; }

.commentList { display: block; margin-top: 20px; }
.commentList li { margin-bottom: 20px; clear: both; font-size: 13px; }
.commentList li p { text-align:justify; }
.commentList li .commentInfo > a:hover { color: #fd999e; }
.commentList li .commentInfo { margin-top: 10px; }
.commentList li .name,
.commentList li .name a { display:block; float: left; height: 14px; color: #8e9aaf; font-weight: 600; }
.commentList li .control { transition: all .5s; }
.commentList li .control a { color: #8e9aaf; }
.commentList li .rp_general, .commentList li .rp_admin, .commentList li .rp_secret { margin-bottom: 20px; }
.commentList li ul li .rp_general, .commentList li ul li .rp_admin, .commentList li ul li .rp_secret { margin: 10px 0 0 30px; }


/* GUESTBOOK - LIST */
.gst_title { width: 100%; margin-bottom: 34px; color: #8e9aaf; font-weight: 600; font-family: 'Open Sans', 'Arita-dotum', sans-serif; }
.guestList { display: block; border-top: 1px solid #f7f7f7; border-bottom: 1px solid #f7f7f7; margin-top: 20px; }
.guestList li { margin: 20px 0; clear:both; font-size: 13px; }
.guestList li p { text-align:justify; }
.guestList li .commentInfo > a:hover { color: #fd999e; }
.guestList li .commentInfo { margin-top: 10px }
.guestList li .name,
.guestList li .name a { display:block; float: left; height: 14px; color: #8e9aaf; font-weight: 600; }
.guestList li .control { transition: all .5s; }
.guestList li .control a { color: #8e9aaf; }
.guestList li .guest_admin, .guestList li .guest_admin, .guestList li .guest_admin { margin-bottom: 30px; }
.guestList li ul li .guest_admin, .guestList li ul li .guest_secret, .guestList li ul li .guest_general { margin: 10px 0 0 30px; }


/* CMT & GST COMMON*/
.rp2icon { float:left; width: 30px; height: auto; color: #8e9aaf; }
.tistoryProfileLayerTrigger { display: none; }
.commentList li .control, .guestList li .control { top: -2px; font-family: 'Open Sans', 'Arita-dotum', 'Sans-serif'; font-size: 0.8em; height: 0; transition: all .3s; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; position: relative; color: #cccccc; }
.controlToggleButton	{ position: relative; top: -1px; font-family: 'Dripicons-v2'; text-align: center; 
  color: #8e9aaf; width: 14px; height: 14px; font-size: 0.8em; margin: 0 5px 0 10px; }
.controlToggle				 + .controlToggleButton:after { content: "/"; }
.controlToggle:checked + .controlToggleButton:after { content: "Z"; }
.controlToggle:checked + .controlToggleButton + .control { height: auto; visibility: visible; opacity: 1; }


/* COMMENT&GUESTBOOK - WRITE */
.commentWrite, .guestWrite  { display: block; overflow: hidden; }
.cwInput  { float: left; }
.cwSecret { float: left; margin-right: 5px; }
.cwSub    { float: right; }
.textarea { background-color: #f7f7f7; width: 100%; height: 70px; margin-bottom: 10px; color: #4f81bd; }
.commentInput { background-color: #f7f7f7; height: 20px; text-align: center; width: 49%; }
.ip_pw { float: right; }
input.rpCheckbox { display:none; }
label.rpSecret   { display:block; cursor:pointer; font-family:'Dripicons-v2'; text-align: center; line-height: 20px; }
input.rpCheckbox				 + label.rpSecret:after { content:'\e014'; display: block; color: #8e9aaf; background-color: #f7f7f7; width: 20px; height: 20px; transition-duration: 0.3s; }
input.rpCheckbox:checked + label.rpSecret:after { content:'\e013'; display: block; color: #ffffff; background-color: #8e9aaf; width: 20px; height: 20px; transition-duration: 0.3s; }
button.submit { display: block; padding: 0 5px; height: 20px; font-family: 'Open Sans', 'Sans-serif'; 
  font-weight: 600; font-size: 0.8em; color: #8e9aaf; background-color: #f7f7f7; transition-duration: 0.3s; }
button.submit:hover {	background-color: #8e9aaf; color: #f7f7f7; }


::-webkit-input-placeholder { font-family: 'Open Sans', sans-serif; color:#4f81bd; transition: opacity 250ms ease-in-out; text-align: center;}
:focus::-webkit-input-placeholder {opacity: 0.5;}
:-ms-input-placeholder { font-family: 'Open Sans', sans-serif; color:#4f81bd; }
::-moz-placeholder { font-family: 'Open Sans', sans-serif; color:#4f81bd; }
:-moz-placeholder  { font-family: 'Open Sans', sans-serif; color:#4f81bd; }

::selection          { background:#4f81bd; color: #FFF; text-shadow: none; }
::-moz-selection     { background:#4f81bd; color: #FFF; text-shadow: none; }
::-webkit-selection  { background:#4f81bd; color: #FFF; text-shadow: none; }

::-webkit-scrollbar  { width: 3px;background-color: #4f81bd; }
::-webkit-scrollbar-track { background-color: #ffffff;}
::-webkit-scrollbar-thumb { background-color: #4f81bd; }

/* 티스토리 우측 상단 메뉴바 없애기 */

#tistorytoolbarid {display:none;}