@charset "utf-8";

/* Scrollbar */
::-webkit-scrollbar {width:15px; background-color:#EEE;}
::-webkit-scrollbar-button {background:red;}
::-webkit-scrollbar-track {background:#EEE; border-left:1px solid #DDD;}
::-webkit-scrollbar-thumb {background:#2196F3;}
::-webkit-scrollbar-thumb:hover {background:#BBB;}
::-webkit-scrollbar-thumb:active {background:#888;}

body {background-image:url(./images/bg.gif);; margin:0; padding:0;}
body, button, input, textarea {
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
	font-family:Roboto,RobotoDraft,arial,sans-serif,'Nanum Gothic';
}
a {text-decoration:none; cursor:pointer;}
em {font-style:normal; font-weight:normal;}
ul, li {margin:0; padding:0;}
img {border:none;}
label:focus, input:focus, button:focus, textarea:focus {outline:none;}

/* Tistory */
#tistorytoolbarid {display:none;}

.scroll-hidden {overflow:hidden;}
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
ol.no-style, ul.no-style {list-style:none;}

/* Flex */
.flex {display:-webkit-flex; display:flex; -webkit-flex-flow:row; flex-flow:row;}
.flex-1 {-webkit-flex:1; -ms-flex:1; -moz-flex:1; flex:1;}

/* Card */
.card {
	background:#FFF; margin:12px 0; padding:0; border-radius:2px;
	box-shadow:0 1px 2px rgba(0,0,0,0.3); overflow:hidden;
}
.card-content {padding:32px;}

.card-list {padding:8px 0;}
.card-list a {padding:18px 32px; line-height:20px; transition:background 50ms linear;}
.card-list a:hover {background:#EEE;}
.card-list .date {width:120px;}
.card-list .none {display:block; padding:32px; color:#F44; line-height:2; text-align:center;}
.card-list .none .fa {font-size:48px;}

.card-content:not(:last-child) {border-bottom:1px solid #DADADA;}

.card .title:not(:last-child) {margin-bottom:24px;}
.card .title h2, .card .title h3 {margin:0; line-height:1.5;}
.card .title .info {font-size:14px;}

.card .article:not(:last-child) {margin-bottom:24px;}

#cover {
	z-index:50; background:rgba(0,0,0,0.25);
	position:fixed; top:0; bottom:0; left:0; right:0;
	transition:opacity 200ms linear; opacity:0; visibility:hidden;
}
#cover .card.floating {
	position:fixed; top:50%; left:50%;
	box-shadow:0 12px 24px rgba(0,0,0,0.3);
	transition:transform 200ms linear;
	-webkit-transform:translate(-50%, -50%) scale(0.5);
	transform:translate(-50%, -50%) scale(0.5);
}

#cover.active {visibility:visible; opacity:1;}
#cover.active.f .card.floating {
	-webkit-transform:translate(-50%, -50%) scale(1);
	transform:translate(-50%, -50%) scale(1);
}
.floating-data {display:none;}

/* Header */
#header {z-index:-30; width:100%;}
#header .link {width:100%; display:block; font-size:48px; color:white; text-align:center; line-height:130px;}

#nav {z-index:100; height:50px; width:100%; top:0; left:0; position:fixed; overflow:hidden;}
#nav:not(.transparent) {box-shadow:0 2px 4px 0 rgba(0,0,0,0.3);}
#nav.transparent:before {opacity:0;}

#nav .fa {position:absolute; width:50px; line-height:50px; font-size:24px; color:white;}

#nav .icon {line-height:50px; text-align:center; cursor:pointer;}
#nav .icon .fa {top:0; left:0; transition:transform 300ms linear,opacity 300ms linear;}
#side.active + #nav .icon .fa {
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.icon .fa-bars {opacity:1;}

#nav .title {
	display:block; margin:0 24px 0 64px; line-height:50px; font-size:24px;
	transition:transform 200ms linear;
	-webkit-transform:translateY(-50px);
	transform:translateY(-50px);
}
#nav:not(.transparent) .title {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
#nav .title .link {color:white;}

/* Side menu drawer */
#side {z-index:150; background:white; position:fixed; top:0; left:0; width:280px; height:100%;
	overflow-x:hidden; overflow-y:auto; transition:transform 200ms linear;
	-webkit-transform:translateX(-100%);
	transform:translateX(-100%);
}
#side.active {
	-webkit-transform:translateX(0);
	transform:translateX(0);
	box-shadow:0 8px 16px 0 rgba(0,0,0,0.3);
}

#side > ul, #side > ol {margin:8px 0;}
#side hr {margin:0; border:none; border-bottom:1px solid #DADADA;}
#side .item {display:block; padding:0 16px; line-height:25px; font-size:14px;}
#side .item:hover {background:#F4F4F4;}
#side .item.subitem {padding:0 8px; padding-left:32px; line-height:20px; color:#727272; font-size:12px;}

#side .title {background:#F4F4F4; line-height:50px; color:#727272; font-size:20px;}

/* Wrap 컨텐츠폭 */
#wrap {z-index:-10; margin:0 auto; padding:0; width:1000px;}
#wrap:after {content:""; display:block; clear:both;}

#entry {position:relative;}

/* Search */
#search .input, #search .button {background:none; border:none; font-size:16px; line-height:20px;}
#search .input {padding:16px 0 16px 24px;}
#search .button {padding:16px; cursor:pointer;}

/* Entry Admin Menu */
.admin .fa-bars {
	width:50px; line-height:50px; padding:0 10px; box-sizing:border-box;
	font-size:24px; text-align:center;cursor:pointer;
}

.a_list {margin:6px 0;}
.a_list .a_l_btn {display:block; padding:16px 16px 16px 52px; width:160px; line-height:18px; transition:background 50ms linear;}
.a_list .a_l_btn:hover {background:#EEE;}
.a_list .a_l_btn .fa {position:absolute; margin-left:-36px; width:20px; text-align:center; font-size:18px;}

/* Tags */
#tag .tags {
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-align-items:baseline;
	align-items:baseline;
	line-height:1.75;
}
#tag .tags .item {margin-right:18px; color:#212121;}
#tag .tags .item:hover {color:#727272;}
#tag .tags .item:before {content:'#'; margin-right:3px;}

/* Comment */
.comment .write:after {content:""; display:block; clear:both;}

.comment .textarea, .comment .input {background:none; box-sizing:border-box; font-size:14px; line-height:1.5;}
.comment .write .textarea {
	background:#F4F4F4; width:100%; height:120px; padding:10px;
	border:none; border-radius:4px; resize:none;
}
.comment .write .input {margin-bottom:12px; padding:0 12px 10px; width:50%; border:none; border-bottom:1px solid #DDD;}
.comment .write .btn {width:100%; margin:5px 0; text-align:right;}
.comment .write .btn .fa {
	background:none; margin:0 5px; padding:0; border:none;
	width:48px; line-height:48px;
	font-size:24px; text-align:center; cursor:pointer;
}
#secret + .fa:before {content:'\f09c';}
#secret:checked + .fa:before {content:'\f023';}
.comment .list p {margin:0; padding:0;}
.comment .list .li {position:relative; padding:18px 24px 18px 96px; min-height:55px;}
.comment .list .li.reply {background:#F4F4F4;}
.comment .list .li:after {content:""; display:block; clear:both;}
.comment .list .tistoryProfileLayerTrigger {display:none;}
.comment .list .name img,
.comment .list .name .fa {
	position:absolute; margin-left:-80px; border-radius:50%;
	width:64px; height:64px; overflow:hidden;
}
.comment .list .name .fa {color:#DDD; font-size:64px; text-align:center;}
.comment .list .name .fa:before {content:'\f007';/*fa-user*/}
.rp_secret .name .fa:before, .guest_secret .name .fa:before {content:'\f21b';/*fa-user-secret*/}
.rp_admin .name .fa:before, .guest_admin .name .fa:before {content:'\f085';/*fa-cogs*/}
.comment .list .date {font-size:14px;}
.comment .list .desc {margin:12px 0; padding:0; line-height:1.5; font-size:14px;}
.comment .list .control {font-size:14px; line-height:1.5;}
.comment .list .control a {padding-right:10px;}

/* Protected Entry */
#entry_protected p {margin:12px 0; font-size:18px; text-align:center;}
#entry_protected input, #entry_protected button {background:none; border:none; border-bottom:1px solid #DDD; padding:10px;}
#entry_protected input {width:260px;}
#entry_protected button {color:#757575; cursor:pointer;}
#entry_protected button:hover {color:#212121;}

/* Entry */
#entry .tags .fa {margin-right:8px;}
#entry h3 a {display:block;}

/* Page */
#page {position:relative; text-align:center;}
#page .btn {display:inline-block; padding:12px; font-size:16px; vertical-align:middle;}
#page .btn.selected {font-weight:bold;}
#page .btn:not(.selected):hover {background:#EEE;}
#page .no-more-prev, #page .no-more-next {visibility:hidden;}

/* Footer */
#footer {margin-bottom:12px; text-align:center; line-height:1.5; font-size:14px;}
#footer p {margin:0; line-height:2;}
#footer .visitor {padding:12px;}
#footer .visitor .total {color:#212121;}
#footer .copy {margin:18px 0;}

/* Bottom Button */
#bot-btn {
	z-index:40; position:fixed; bottom:0; right:0;
	transition:transform 200ms linear;
	-webkit-transform:translateY(0);
	transform:translateY(0);
	font-size:36px; cursor:pointer;
}
#bot-btn .fa {color:white; padding:10px; box-shadow:0 0 6px rgba(0,0,0,0.3); transition:box-shadow 200ms linear;}
#bot-btn .fa:hover:not(:active) {box-shadow:0 0 24px rgba(0,0,0,0.3);}
#bot-btn.hidden {
	-webkit-transform:translateY(100%);
	transform:translateY(100%);
}
#bot-btn.hidden .fa {box-shadow:none;}

/* Article */
.article {font-size:14px; line-height:1.8; word-wrap:break-word;}

.article h1, .article h2, .article h3, .article h4, .article h5 {margin:0.75em 0;}
.article h1, .article h2 {margin:0.8em 0; padding-bottom:0.5em; border-bottom:1px solid #DDD;}
.article h1 {font-size:2em;}
.article h2 {font-size:1.5em;}
.article h3 {font-size:1.2em;}
.article h4 {font-size:1em;}
.article h5 {font-size:0.8em;}

.article ol, .article ul {margin:0.5em 0; padding-left:1.25em;}
.article ul {list-style:disc;}
.article ol {list-style:decimal;}
.article li ul {list-style:circle;}

.article img {max-width:100%; height:auto;}
.article blockquote {background:#F4F4F4; margin:0; padding:1em 25px;}
.article a {font-weight:bold;}

/* Download Button */
.article .imageblock > a img[src*='.gif'] {display:none;}
.article .imageblock > a {
	display:inline-block; position:relative; border-radius:2px; padding:0 15px; padding-left:65px;
	height:50px; line-height:50px; box-shadow:0 0 4px rgba(0,0,0,0.3);
	transition:box-shadow 150ms linear; font-weight:bold;
}
.article .imageblock > a:before {
	font:normal normal normal 24px/50px FontAwesome; content:'\f019';
	background:rgba(0,0,0,0.2); position:absolute; top:0; left:0;
	width:50px; height:50px; line-height:50px; text-align:center; color:white;
}
.article .imageblock > a:hover:not(:active) {box-shadow:0 0 8px rgba(0,0,0,0.3);}

/* Another Category Plugin */
.another_category {margin:16px 0 0; padding:0; border:none;}
.another_category h4 {margin:0 !important; padding:8px !important; font-size:16px !important; font-weight:normal;}
.another_category table {margin:0 !important; padding:8px; border-collapse:inherit;}
.another_category th,
.another_category td {padding:0 !important; font-size:14px !important; line-height:1.8;}

/*==하단 라운드박스 마무리 ==========================*/

.float_banner2   {   position:absolute; position:fixed; right:0; bottom:30px;    padding:0   }