@charset "utf-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/earlyaccess/kopubbatang.css');
@import url('https://fonts.googleapis.com/earlyaccess/jejumyeongjo.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');


/* 카테고리 - 이미지 버튼 */
.ib                     { cursor:pointer;}
/* 카테고리 - 트리 셀 */
.branch3                { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
	.c_cnt                  { letter-spacing:0px; color: #717171; }
/* 이미지 아래 캡션 스타일 */
.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-family: 'Montserrat'; }

/* 페이징 - 현재 페이지 */
.paging {clear:both; width:100%; text-align:center; margin: 20px 0; }
.paging a { padding: 5px; color: #eeeeee; opacity:0.7;}
.prev { transition-duration:0.8s; padding-right:10px}
.next { transition-duration:0.8s; padding-left:10px}
.prev a:hover {transition-duration:0.8s; color:#acabab; }
.next a:hover {transition-duration:0.8s; color:#acabab; }

/* 본문 - 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; }

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
/*
8e9aaf(강조색 메뉴, 제목 항목 등)
bfbbc2(날짜 표시색)
f3f3f3(본문영역 배경색)
dfdde0(라인 input과 구분선)
*/


/*reset*/
* {margin:0; padding:0; border:0; }
body { font-family: 'Jeju Myeongjo', 'Noto Sans Kr', 'Nanum Gothic', 'Spoqa Han Sans', 'Sans-serif'; font-size: 10pt; line-height:1.2 ; color: #222222; background:url(images/background.jpg) no-repeat fixed 0; background-size: cover; }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadein { from { opacity:0; } to { opacity:1; } }
li        { list-style-type: none; }
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;}


/* input Field */
.input40 { width: 100%; padding: 20px 0; font-family: 'Montserrat', 'Spoqa Han Sans', sans-serif; text-align: center; color: #8e9aaf; font-size: 9pt; letter-spacing: -1px; background-color: #f3f3f3; border-bottom: 1px solid #dfdde0; -webkit-border-radius:0px; }
.input10 { width: 100%; padding: 10px 0; border-bottom: 1px solid #dfdde0; font-family: 'Montserrat', 'Spoqa Han Sans', sans-serif; text-align: center; color: #8e9aaf; font-size: 8pt; letter-spacing: -1px; background-color: #f3f3f3; -webkit-border-radius:0px; } 
.textarea { background-color: #ffffff; width: 100%; max-width: 100%; font-family: 'Spoqa Han Sans', sans-serif; color: #8e9aaf; border-bottom: 1px solid #dfdde0; font-size: 8pt; -webkit-border-radius:0px; }
.submit { display: block; width: 100%; border: none; background-color: #f3f3f3; font-family: 'Montserrat', sans-serif ; color:#8e9aaf; font-size: 8pt;  text-align: center; padding: 20px 0; border-bottom: 1px solid #dfdde0; transition: all .5s; -webkit-border-radius:0px; }
.submit:hover { background-color: #8e9aaf; color: #ffffff; transition: all .5s; }


/* 방문자수 */
.counter {text-align:center; margin:0 auto; font-size: 5.5pt; font-family: 'nanum gothic', serif; color:#606060; letter-spacing: 1; opacity:0.6;}
.counter .today {color: #efefef; font-weight: 600;}



/* 검색 */
.search {text-align:center; margin:10px 0px; width:100%; opacity:0.3;}
.search .submit {
width:10px;
color: #f3f3f3 !important;
padding: 2px 20px;
border: 0px;
background: #707070;
}
.search_text {width:46px; height:12px; font-size:7pt;}
.search .submit:hover {color: #f3f3f3 !important; background: #ffffff; }


/* mq */
@media screen and (min-width:501px) {
	/* Background */
	.snow1 { position: absolute; overflow-x: hidden; width: 80%; background-size: cover; background-attachment: fixed;  z-index: 1; top:10px; left:50px; }
	.snow2 { position: absolute; overflow-x: hidden; width: 80%;background-size: cover; background-attachment: fixed;  z-index: 1; top:-40px; right:80px; }
	
	#header    { position: relative; z-index: 3; display: block; margin: 0 auto; width: 80%; text-align: center; opacity:0.8;}
	#container { position: relative; z-index: 3; margin: 0 auto; animation: fadein 1s; }
	#content   { position: relative; z-index: 3; margin: 0 auto; width: 100%; }
	.box330 { width: 330px; background-color: #f3f3f3; -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); background-color: #f3f3f3; }
	.box270 { padding: 30px; width: 500px; margin: 0 auto; background-color: #f3f3f3; -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); background-color: #f3f3f3; }
	.searchList ol li { padding: 15px 30px; width: 320px; }

	.navBtn, .closebtn { display: none;}
	.blogTitle { margin: 70px 0; }
	.category { display: table; margin: 40px auto 20px; }
	.category ul li { float: left; position: relative; text-align:center; }
	.category ul li ul li a { display: block; padding: 0 10px; }
	.searchList ol li:hover { padding: 17px 30px; background-color: #fff; transition: all .5s; }
	
	.guestbook { width: 330px; margin: 0 auto; }
	.guestbook .guestList { padding: 30px; }
}

@media screen and (max-width:500px) {
	body { background-color: #d7deeb; font-size:9pt;}
	/* Background */
	.snow1, .snow2 { display: none;}
	#header    { position: fixed; z-index: 4; top:0; margin: 0 auto ; display: block; width: 100%; height: 51px; text-align: center; 
							 background: #7f7e8e; }
	#container { position: relative; z-index: 3; margin: 0 auto; animation: fadein 1s; }
	#content   { position: relative; z-index: 3; margin: 50px auto 0; width: 90%; }
	.box330 { width: 90%; background-color: #f3f3f3; -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); background-color: #f3f3f3; }
	.box270 { padding: 5%; width: 90%; background-color: #f3f3f3; -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); background-color: #f3f3f3; }
	
	/* cetegory*/
	#tistorytoolbarid { display: none; }
	.blogTitle { margin: 15px 0; width: auto; padding-top: 2px; float: left; text-align: center; }
	.navBtn    { padding: 5%; float: left; font-size: 14pt; color: #ffffff; }
	.closebtn { display: block; padding: 20px 0; font-size: 13pt; border-bottom: 1px solid #dfdde0; color: #8e9aaf; }
  .category { height: 100%;  width: 0;  position: fixed; z-index: 1; top: 0; left: 0; background-color: #ffffff; overflow-x: hidden; transition: 0.5s; }
	.category ul li ul li a { display: block; padding: 20px 0; font-size: 13pt; border-bottom: 1px solid #dfdde0; }
	#container { transition: margin-left .5s; }
	body {transition: background-color .5s;}
	
	.searchList ol li { padding: 15px 5%; }
	.searchList, .guestbook, .entryProtected { width: 100%; }
	.guestbook .guestList { padding: 10%; }
}


/*HEADER*/
.blogTitle a{ font-family: 'Montserrat', 'Spoqa Han Sans', sans-serif; color: #f3f3f3; font-weight:400; letter-spacing: 2pt;}


/* CATEGORY */
.category ul li { position: relative; }
.category ul li .link_tit 		{ display:none; } /*그룹카테미출력*/
.category ul li .link_item img { display: none; } /*새글아이콘x*/
/*---------▼ 영문카테(기본)---------*/
.category ul li ul li { position:relative; display:block; font-family: 'Montserrat', sans-serif; letter-spacing:0; color: #7f7e8e; font-size:9pt; transition: all 280ms ease-in-out;}
/*---------▼ 한글카테---------*/
/*.category ul li ul li { position:relative; display:block; font-family: 'Spoqa Han Sans', sans-serif; letter-spacing:0; color: #8e9aaf; font-size:8pt; transition: all 280ms ease-in-out;} */
.category ul li ul li a { color: #dcd9d9; }
.category ul li ul li:hover, .category ul li ul li:active { letter-spacing: 2px; }


/* SEARCH LIST(CATEGORY) */
.searchList ol li { display: block; margin-bottom: 4px; text-align: center; transition: all .5s; }
.searchList ol li a { display: block; margin-bottom: 10px; color: #8e9aaf; font-weight: 600; }
.searchList ol li .date { font-size: 9px; font-family: 'Titillium Web', sans-serif; color: #acabab; letter-spacing: -0.5pt; }


/* ARTICLE */
.entry { display: block; overflow: auto; }
.titleWrap { display:block; width:100%; text-align:center; margin-bottom: 25px; }
.titleWrap .title a { display:block; width:100%; margin-bottom: 10px; color: #8e9aaf; font-weight: 600; }
.titleWrap .date 		{ font-size: xx-small; font-family: 'Titillium Web', sans-serif; color: #b7bfcd; }
.admin { margin: 20px 0; }
.admin a { color: #8e9aaf; }
.article { text-align:justify; color: #4d4d4d; }


/* PROTECED */
.entryProtected { display: block; padding: 50px 0; margin: 0 auto; }


/* COMMENT - WRITE */
.cnt {display: block; width: 100%; padding: 20px 0; text-align: center; color: #8e9aaf; font-family: 'Montserrat', sans-serif; border-top: 1px solid #dfdde0; font-size: 7pt;}
.commentWrite { display: block; overflow: hidden; width: 100%; }
input.rpCheckbox { display:none; }
label.rpSecret	 { display:block; text-align: center; font-family: 'Montserrat', sans-serif ; cursor:pointer; border-bottom: 1px solid #dfdde0; background-color: #f3f3f3; font-size: 7pt; }
input.rpCheckbox + label.rpSecret:after { display:block; padding: 1px 0; line-height: 30px; content:'SECRET'; color:#8e9aaf; }
input.rpCheckbox:checked + label.rpSecret:after { display:block; padding: 1px 0; line-height: 30px; content:'SECRET'; background-color: #8e9aaf; color: #ffffff;}


/* COMMENT - LIST */
.commentList ol { margin-top: 15px; }
.commentList ol li { padding: 10px 0; }
.commentList ol li .name   { color: #8e9aaf; }
.commentList ol li .name a { color: #8e9aaf; }
.commentList ol li .date   { color: #bfbbc2; }
.commentList ol li .date a { float:right; color: #bfbbc2; font-size: xx-small; }
.commentList ol li .control a { color: #bfbbc2; transition: all .5s; }
.commentList ol li .control a:hover { color: #8e9aaf; font-weight: 600; transition: all .5s; }
.commentList ol li p 		 { letter-spacing: -1px; text-align:justify; padding: 5px 0 10px 0; }
.commentList ol li ul li { padding : 10px 0 0 10px; }


/* GUESTBOOK - WRITE */
.guestbook  { display:block; }
.writeToggleButton	{ display:block; padding: 20px 0; width: 100%; font-family: FontAwesome; text-align: center; color: #8e9aaf; border-bottom: 1px solid #dfdde0;}
.writeToggle				 + .writeToggleButton:after { content: "\f0e0"; }
.writeToggle:checked + .writeToggleButton:after { content: "\f00d"; }
.writeToggle:checked + .writeToggleButton + .guestWrite { height: auto; visibility: visible; opacity: 1; }

.guestWrite { height: 0; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; margin-bottom:20px; }
.guestWrite .gwl  { font-family: 'Montserrat', sans-serif; color:#8e9aaf; font-size: 7pt;  text-align: center; padding: 20px 0;}
input.checkbox { display:none; }
label.secret { display:block; text-align: center; font-family: 'Montserrat', sans-serif ; cursor:pointer; border-bottom: 1px solid #dfdde0;}
input.checkbox + label.secret:after { display:block; padding: 20px 0; content:'SECRET'; color:#8e9aaf; }
input.checkbox:checked + label.secret:after { display:block; padding: 20px 0; content:'SECRET'; background-color: #8e9aaf; color: #ffffff;}


/* GUESTBOOK - LIST */
.guestList ol { display: block; }
.guestList ol li .tistoryProfileLayerTrigger {display:none; }
.guestList ol li .name, .guestList ol li .name a { display: block; width: 100%; text-align: center; font-family: 'Montserrat', 'Spoqa Han Sans', sans-serif; color: #8e9aaf; }
.guestList ol li .otherInfor { width: 100%; text-align: center; font-family: 'Titillium Web', sans-serif; margin-bottom:5px; }
.guestList ol li .date, .guestList ol li .date a { color : #bfbbc2; }
.guestList ol li .date a  { font-size: 6pt }
.guestList ol li .userMsg { font-size: 8pt; letter-spacing: -1px; text-align:justify; margin-bottom:15px; }
.guestList ol li .control a { color : #bfbbc2; transition: all .5s; }
.guestList ol li .control a:hover { color: #8e9aaf; font-weight: 600; transition: all .5s;}
.guestList ol li ul li { padding: 0 15px 15px 15px;  margin-bottom: 10px; }
.guestList ol li ul li .reMsg { letter-spacing: -1px; text-align:justify; }
.guestList ol li ul li .control a   { margin-left: 5px; }



::-webkit-input-placeholder { font-family: 'Montserrat', sans-serif; color:#8e9aaf; font-size: 7pt;  transition: opacity 250ms ease-in-out; text-align: center;}
:focus::-webkit-input-placeholder {opacity: 0.5;}
:-ms-input-placeholder { font-family: 'Montserrat', sans-serif; color:#8e9aaf; font-size: 7pt; }
::-moz-placeholder { font-family: 'Montserrat', sans-serif; color:#8e9aaf; font-size: 7pt; }
:-moz-placeholder  { font-family: 'Montserrat', sans-serif; color:#8e9aaf; font-size: 7pt; }

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

::-webkit-scrollbar  { width: 3px;background-color: #F5F5F5; }
::-webkit-scrollbar-track { background-color: #F5F5F5;}
::-webkit-scrollbar-thumb { background-color: #b7bfcd; }



/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol72.ani), url(http://cur.cursors-4u.net/holidays/hol-1/hol72.png), progress !important;} /* End http://www.cursors-4u.com */