@import url('https://fonts.googleapis.com/css?family=Cabin:700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:500');
@import url('//cdn.rawgit.com/young-ha/webfont-archive/master/css/HANDotum.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; padding: 15px; color: #fd999e; font-size: 15pt; background-color: #fceaeb; }
.prev { float: left; transition-duration:0.8s; padding-right:10px; }
.next { float: right; transition-duration:0.8s; padding-left:10px; }
.prev:hover, .next:hover {transition-duration:0.3s; color:#fefefe; background-color: #fd999e; }

/* 본문 - more / less */
.moreless_fold {margin-top:18px; padding-left:5px;}
.moreless_top {margin-top:18px; padding-left:5px;}
.moreless_content {margin:5px 0 2px 0; }
.moreless_bottom {text-align:right; }

/* 키워드 */
.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 { font-family: 'HANDotum', sans-serif; font-size: 11px; color: #222222; background-image: linear-gradient(90deg, #fad3d2 0%, #fae0da 99%, #fae0da 100%);}
li        { list-style-type: none; }
input[type=text] { font-family: 'HANDotum', sans-serif; font-size: 1em; color: #fd999e; }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:active  { text-decoration: none; }
a:hover   { text-decoration: none; }
input 	  { -webkit-appearance: none; -webkit-border-radius:0px;}
#tistorytoolbarid { display: none;}


/* mq */
@media screen and (max-width:811px) { /* ~ 812 */
	#container { width: 95%; margin: 10px auto; }
	#content { float: left; width: 100%; margin-right: 0; }
	#content { transform: translate3d(0, 0, 0); transition: transform .4s; }
	
	label.tgLabel { position: fixed; top: 50px; right: 10px; z-index: 1; display: block; font-size: 1.8em; cursor: pointer; 
									padding: 10px; border-radius: 20px; background-color: #fd999e; color: #fefefe;
									transform: translate3d(0, 0, 0); transition: transform .4s; 
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.09);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.09);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.09);}
	input.toggle  { position: fixed; opacity: 0; }
	input.toggle:checked ~ label.tgLabel { transform: translate3d(-250px, 0, 0); }
	input.toggle:checked ~ #content { transform: translate3d(-250px, 0, 0);	}
	input.toggle:checked ~ #sidebar { transform: translate3d(0, 0, 0); }

	#sidebar { position: fixed; height: 100%; width: 250px; top: 0; right: 0; transform: translate3d(250px, 0, 0); transition: all .6s;
						 overflow-y: scroll; overflow-x: hidden; transition: 0.5s; background-color: #fd999e; }
	#sidebar #menuBar .blogTitle { display: none; }
	#menuBar { width: 100%; height: 63px; background-color: #fd999e;}
	#menuBar .mainMenu a { float: left; width:33.2%; padding: 10% 0; text-align:center; font-size: 12pt; color: #fefefe; transition-duration: 0.3s;}
	#menuBar .mainMenu a:hover { background-color: #fceaeb; color: #fd999e; transition-duration: 0.3s;}
	#menuBar .mainMenu a:last-child { margin-left: 1px }
	
	#profile .imgBg { width: 250px; padding: 20px 0 30px 0; text-align: center; border-bottom: 1px solid #fceaeb;  }
	#profile .imgBg .bloggerImage { margin: 0 auto; width: 100px; height: 100px; overflow: hidden; border-radius: 50%; border: 2px solid #fefefe; }
	#profile .imgBg .bloggerImage img { width: 100px; position: relative; /*top: -5%;*/ }
	#profile .imgBg .bloggerName { margin-top: 20px; color: #fefefe; font-size: 1.2em; }
	
	#profile .search { display: block; position: relative; width: 100%; height: 54px; background-color: #fceaeb; color: #fd999e; overflow: hidden;}
	#profile .search .searchForm   { float: left; width: 70%; padding-left: 10%; height: 54px; border: none; background-color: #fceaeb; font-family: 'CGTR', sans-serif; }
	#profile .search .searchSubmit { float: right; width: 20%; height: 54px; background-color: #fceaeb; text-align:center; font-size: 1.5em; color: #fd999e;  padding-top: 10px; }
	#category .categoryTitle { display: none; }
	
	.searchList  { padding: 40px; }
	.searchList ol li a { width: 85%; }
	.searchList ol li .date { width: 15%; }
	
	@media screen and (max-width:515px) { /* list width */
		.searchList  { padding: 20px; }
		.searchList ol li a { width: 80%; }
		.searchList ol li .date { width: 20%; }
	}
	
	@media screen and (max-width:635px) { /* list width */
		.cwInput { width: 100%; }
		.commentInput { width: 50%; }
	}
}

@media screen and (min-width:812px) and (max-width:939px) { /* 600 ~ 940 */
	#container { width: 812px; margin: 60px auto 10px auto; }
	#content { float: left; width:600px; margin-right: 22px; }
	
	label.tgLabel { display: none; }
	
	#sidebar { display: block; float: left; width: 190px; position: relative; overflow: hidden; }
	#sidebar #menuBar .blogTitle { display: none; }
	#menuBar { width: 190px; height: 63px; background-color: #fd999e; margin-bottom: 40px }
	#menuBar .mainMenu a { float: left; padding: 23.5px; font-size: 12pt; color: #fefefe; transition-duration: 0.3s;}
	#menuBar .mainMenu a:hover { background-color: #fceaeb; color: #fd999e; transition-duration: 0.3s;}
	#menuBar .mainMenu a:last-child { margin-left: 1px }
	
	#profile .imgBg .bloggerImage { margin: 0 auto; width: 190px; overflow: hidden; }
	#profile .imgBg .bloggerImage img { width: 190px; position: relative; }
	#profile .imgBg .bloggerName { width: 100%; padding: 20px; background-color: #fceaeb; color: #fd999e; }
	
	#category .categoryTitle { margin-top:45px; padding: 20px; background-color: #fceaeb; color: #fd999e; }
	#profile .search { display: block; position: relative; margin: 40px 0; width: 100%; height: 54px; background-color: #fceaeb; color: #fd999e; overflow: hidden;}
	#profile .search .searchForm   { float: left; width: 70%; padding-left: 10%; height: 54px; border: none; background-color: #fceaeb; font-family: 'CGTR', sans-serif; }
	#profile .search .searchSubmit { float: right; width: 20%; height: 54px; background-color: #fceaeb; text-align:center; font-size: 1.5em; color: #fd999e;  padding-top: 10px; }
	
	.searchList  { padding: 40px; }
	.searchList ol li a { width: 85%; }
	.searchList ol li .date { width: 15%; }
}

@media screen and (min-width:940px) { /* 940 ~ */
	#container { width: 940px; margin: 100px auto;  }
	#content { float: left; width:600px; margin-right: 22px; }
	
	label.tgLabel { display: none; }
	
	#sidebar { float: left; display: block; position: relative; overflow: hidden; width: 318px; background: none; }
	#menuBar { float: left; width: 60px; margin: 0 23px; padding-bottom:20px; overflow: hidden; background-color: #fd999e; font-family: 'Cabin', sans-serif; font-size: 13pt }
	#profile { float: left; width: 190px; margin-left: 22px; font-family: 'Cabin', sans-serif; font-size: 1.1em }
	
	#menuBar .mainMenu { display: block; position: relative }
	#menuBar .mainMenu a { display: block; padding: 22px; color: #fefefe }
	#menuBar .blogTitle { margin-top: 131px; width: 250px; height: 60px; right: 95px; 
					line-height: 60px; color: #fefefe; font-size: 0.9em;
			 -moz-transform: rotate(90.0deg);  /* FF3.5+ */
				 -o-transform: rotate(90.0deg);  /* Opera 10.5 */
		-webkit-transform: rotate(90.0deg);  /* Saf3.1+, Chrome */
							 filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
					 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ }
	
	#profile .imgBg .bloggerImage { margin: 0 auto; width: 190px; overflow: hidden; }
	#profile .imgBg .bloggerImage img { width: 190px; position: relative; }
	#profile .imgBg .bloggerName { width: 100%; padding: 20px; background-color: #fceaeb; color: #fd999e; }
	#profile .search { display: block; position: relative; margin: 40px 0; width: 100%; height: 54px; background-color: #fceaeb; color: #fd999e; overflow: hidden;}
	#profile .search .searchForm   { float: left; width: 70%; padding-left: 10%; height: 54px; border: none; background-color: #fceaeb; font-family: 'CGTR', sans-serif; }
	#profile .search .searchSubmit { float: right; width: 20%; height: 54px; background-color: #fceaeb; text-align:center; font-size: 1.5em; color: #fd999e;  padding-top: 10px; }
	#category .categoryTitle { margin-top:45px; padding: 20px; background-color: #fceaeb; color: #fd999e; }
	
	.searchList  { padding: 40px; }
	.searchList ol li a { width: 85%; }
	.searchList ol li .date { width: 15%; }
	
	@-webkit-keyframes circle {
  0% { width: 1px; top: 0; left: 0; bottom: 0; right: 0;
       margin: auto; height: 1px; z-index: -1; background: #fed3d5; border-radius: 100%; }
  100% { background: #fed3d5; height: 5000%; width: 5000%; z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 0; }
	}
}


/* SIDE BAR */
#menuBar .mainMenu   { display: block; position: relative; }
#menuBar .mainMenu a { display: block; position: relative; overflow: hidden; z-index: 1; }
#menuBar .mainMenu a:after { display: block; position: absolute; margin: 0; top: 0; bottom: 0; left: 0; right: 0; content: '.'; color: transparent; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
#menuBar .mainMenu a:hover:after { -webkit-animation: circle 1.5s ease-in forwards; }
#menuBar .blogTitle  { display: block; position: relative; }

.search { width:100%; height: 40px; margin-bottom: 40px; }
.search .searchInput  { float: left; height: 40px; background: none; border-bottom: 2px solid #fd999e; }

.imgBg .bloggerName { font-family: 'Montserrat', sans-serif; font-weight: 500; }

#category { clear:both; width: 100%; }
#category .categoryTitle { width: 100%; font-family: 'Montserrat', sans-serif; }
#category ul li .link_tit 		 { display: none; } /* 전체보기(카테고리타이틀) */
#category ul li .link_item img { display: none; } /* 새글아이콘x */
#category .category_list li a  { display: block; position:relative; z-index: 1; color: #fefefe; padding: 20px; font-family: 'Montserrat', sans-serif; transition: all .5s;}
#category .category_list li a:after { display: block;  position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #fd999e; visibility: none; opacity: 0; z-index: -1;  transition: all .5s;}
#category .category_list li a:hover:after { opacity: 1; visibility: visible; height: 100%; transition: all .5s; }
#category .category_list .sub_category_list li { padding-left: 15px; }
#category .category_list li.link_item img { display: none; }
#category .category_list .sub_category_list li .link_item img { display: none; }




/* SEARCH LIST(CATEGORY) */
.searchTitle { position:relative; overflow: hidden; padding: 40px; background-color: #fceaeb; color: #fd999e; font-weight: bold;  }
.searchList  { position:relative; overflow: hidden; background-color: #fefefe; }
.searchList ol li { display: block; width: 100%; }
.searchList ol li a { display: block; float: left; margin-bottom: 40px; color: #8e7b7c; font-weight: 500; }
.searchList ol li a .ttCtgy {
		background-color: #fd999e;
    display: inline-block;
    padding: 3px;
    border-radius: 10px;
    width: 30px;
    text-align: center;
    color: #fefefe;
    margin-right: 10px;}
.searchList ol li a:last-child { margin-bottom: 0; }
.searchList ol li .date { display: block; float: right; text-align: right; font-size: 1em; font-family: 'Montserrat', sans-serif; color: #fd999e;  }


/* NOTICE (INBOX) */
.entryNotice .titleWrap { display:block; background-color: #fceaeb; padding: 20px 4px; color: #fd999e; text-align: center; 
 font-size: 1.5em}
.entryNotice .article { background-color: #fefefe; text-align:justify; color: #8e7b7c; padding: 40px; }


/* ARTICLE */
.entry { display: block; overflow: auto }
.titleWrap { display:block; background-color: #fceaeb; padding: 40px }
.titleWrap .date 	 { display: block; margin-bottom: 10px; 
							font-size: 1em; font-family: 'Cabin', sans-serif; font-weight: 700; color: #fd999e; }
.titleWrap .date  a { color: #fd999e; }
.titleWrap .title a { display:block; width:100%; color: #8e7b7c; font-weight: bold; }
.entry .admin { margin: 20px 0; text-align: center; color: #fefefe; font-size: 1.2em }
.entry .admin a { color: #fd999e; }
.entry .article { background-color: #fefefe; font-weight: bold; text-align:justify; color: #8e7b7c; padding: 40px; line-height: 20px; }
.entry .article a:link    { color: #8e7b7c; text-decoration: none; }
.entry .article a:visited { color: #8e7b7c; text-decoration: none; }
.entry .article a:active  { color: #8e7b7c; text-decoration: none; }
.entry .article a:hover   { color: #fd999e; text-decoration: none; }
.entry .article iframe { width: 100%; }
.entry .article i { color: #fd999e; margin-right: 5px; }


/* PROTECED */
.entryProtected { background-color: #fefefe; padding: 40px; text-align: center; }
.EPSubmit { display: block; background-color: #fceaeb; color: #fd999e; 
	width: 49%; height: 30px; padding-top: 10px; margin: 5px auto; line-height: 30px; 
	transition-duration: 0.5s; }
.EPSubmit:hover { background-color: #fd999e; color: #fefefe; transition-duration: 0.5s; }
.EPSubmit i { font-size: 1.3em; }


/* COMMENT - LIST */
.cnt { margin-top: 40px; padding: 20px 40px; font-family: 'Cabin', sans-serif; background-color: #fceaeb; color: #fd999e; }
.comment { margin-bottom: 40px; }
.commentList ol { display: block ; padding: 40px; background-color: #fefefe; }
.commentList ol li { color: #8e9aaf; margin-bottom: 40px; }
.commentList ol li p 		   { color: #8e7b7c; text-align:justify; padding: 0 0 10px 0; }

.commentList ol li .commentInfo { margin-bottom: 30px }
.commentList ol li .name   { display:block; float: left; color: #fefefe; 
														 background-color: #fd999e; padding: 1px 3px; font-size: 0.8em }
.commentList ol li .name a { color: #fefefe; }
.commentList ol li .date   { display:block; float: left; color: #fefefe; 
														 background-color: #fed3d5; padding: 1px 3px; font-size: 0.8em }
.commentList ol li .date a { color: #fefefe; }
.commentList ol li .control a { color: #bfbbc2; transition: all .5s; }
.commentList ol li .control a:hover { color: #fd999e; font-weight: 600; transition: all .5s; }

.commentList ol li .rp2icon { float:left; width: 30px; height: auto; }
.commentList ol li ul li .rp_general, .commentList ol li ul li .rp_admin, .commentList ol li ul li .rp_secret { margin-left: 30px; }


/* COMMENT&GUESTBOOK - WRITE */
.guestbookLb { display: block; overflow: hidden; padding: 20px 40px; background-color: #fceaeb; color: #fd999e; font-family: 'Cabin', sans-serif; font-size: 1.1em }
.guestWrite  { display: block; overflow: hidden; padding: 40px; background-color: #fefefe; }
.commentWrite { display: block; overflow: hidden; margin-top: 1px; padding: 40px; background-color: #fefefe; }
.cwInput  { float: left; }
.cwSecret { float: left; margin-right: 12px; width: 40px; }
.cwSub    { float: right; margin-left: 12px; width: 40px; }
.textarea { background-color: #fceaeb; width: 100%; height: 70px; margin-bottom: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: 1em; color: #fd999e; }
.commentInput { font-family: 'Noto Sans KR', sans-serif; font-size: 1em; color: #fd999e; height: 30px; text-align: center; width: 49%; }
input.rpCheckbox { display:none; }
label.rpSecret   { display:block; cursor:pointer; }
input.rpCheckbox + label.rpSecret:after { 
				width: 10px; height: 10px; text-align: center; padding: 15px; border-radius: 20px;
				font-family:'Dripicons-v2'; display:block; content:'\e014'; transition-duration: 0.3s;
				background-color: #f5f5f5; color: #8e9aaf; }
input.rpCheckbox:checked + label.rpSecret:after { 
				width: 10px; height: 10px; text-align: center; padding: 15px; border-radius: 20px;
				font-family:'Dripicons-v2'; display:block; content:'\e013'; transition-duration: 0.3s;
				background-color: #fed3d5; color: #fefefe; }
button.submit { 
				display: block; width: 10px; height: 10px; padding: 20px; border-radius: 20px;
				text-align: center; background-color: #f5f5f5; color: #8e9aaf; 
				transition-duration: 0.3s; }
button.submit:hover {	background-color: #fed3d5; color: #fefefe; transition-duration: 0.3s; }
button > i { left: -5px; top: -5px; position: relative;}


/* GUESTBOOK - LIST */
.guestList { display: block; overflow: hidden; margin-top: 1px; padding: 40px; color: #8e9aaf; background-color: #fefefe; color: #fd999e; }
.guestList ol li { margin-bottom: 30px; clear:both; }
.guestList ol li p 		   { color: #8e7b7c; text-align:justify; padding: 0 0 10px 0; }

.guestList ol li .commentInfo { margin-bottom: 30px }
.guestList ol li .name   { display:block; float: left; color: #fefefe;
													 background-color: #fd999e; padding: 1px 3px; font-size: 0.8em }
.guestList ol li .name a { color: #fefefe; }
.guestList ol li .date   { display:block; float: left; color: #fefefe; 
													 background-color: #fed3d5; padding: 1px 3px; font-size: 0.8em }
.guestList ol li .date a { color: #fefefe; }
.guestList ol li .control a 			{ color: #bfbbc2; transition: all .5s; }
.guestList ol li .control a:hover { color: #fd999e; font-weight: 600; transition: all .5s; }

.guestList ol li .rp2icon { float:left; width: 30px; height: auto; }
.guestList ol li ul li .guest_admin, .guestList ol li ul li .guest_secret, .guestList ol li ul li .guest_general { margin-left: 30px; }

.hidden { opacity:0; }
.visible{ opacity:1; }

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

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

::-webkit-scrollbar  { width: 3px;background-color: #fd999e; }
::-webkit-scrollbar-track { background-color: #fefefe;}
::-webkit-scrollbar-thumb { background-color: #fd999e; }