@charset "utf-8";

/* Tags */
.list-tags { margin-bottom:15px; }
.list-tags .nav { background:#fafafa; border-right:1px solid #ddd; border-top:1px solid #ddd; }
.list-tags .nav li { border-top:0px !important; }
.list-tags .tags-item { padding:0px; overflow:hidden; margin:-4px 0px -6px; margin-right:-12px; line-height: 35px; }
.list-tags .tags-item .chk-tag { text-align:left !important; background: none !important; padding:0px !important; margin: 0px !important; box-shadow:none !important; display:inline-block !important; height:28px; line-height:28px !important; }
.list-tags .tags-item .chk-tag span { font-family:dotum; font-weight:normal; display:inline-block; margin:0px; padding-right:12px; line-height:28px; }
.list-tags .tags-item .chk-tag.active span,
.list-tags .tags-item .chk-tag:focus span { color:orangered; font-weight:bold; }
.list-tags .tags-item .chk-tag.active span:before,
.list-tags .tags-item .chk-tag:focus span:before { font-family:FontAwesome; content:"\f00c"; padding-right:4px; }
.list-tags .tags-submit { border:1px solid #ddd; border-top:0px; padding:0px 15px 10px; }
.list-tags .tags-submit .box-submit { border-top:1px dotted #ccc; padding-top:10px; }
.list-tags .tags-line { border-top:1px dotted #ccc; margin:6px 10px; margin-left:0px; height:1px; }

/* Top Search */
.list-tsearch { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }
.list-tsearch .btn-xs { padding: 2px 4px; }

/* Category */
.list-category .tabs { margin-bottom:20px; }
.list-category .dropdown { margin-bottom:20px; }
.list-category .active a, .list-category .selected a { color:crimson; font-weight:bold !important; }

/* List */
.list-wrap { width:100%; }
.list-admin { text-align:center; margin:15px 0px; }
.list-btn .sort-drop { min-width:120px !important; left:auto !important; right:0px !important; }
.list-btn .sort-drop .sort a { color:crimson !important; font-weight:bold !important; }
.is-pc .ko .list-btn .sort-drop { font-size: 12px; }

/* Page */
.list-wrap .pagination a, .view-wrap .pagination a { color:#333 !important; }
.list-wrap .pagination .active a, .view-wrap .pagination .active a { color:#fff !important; background:#444 !important; border-color:#444 !important; }

/* View */
.view-wrap { width:100%; overflow:hidden; }
.view-wrap.view-modal { padding:5px; margin:0px; }
.view-btn { margin:0px 0px 30px; }
.view-btn i { margin-right:2px; }

/* Write */
.write-wrap { width:100%; overflow:hidden; }

@media all and (max-width:460px) {
	.responsive .view-btn i { margin-right:0px; }
}

.btn-resource {
	background: url(./img/btn.resource.png) no-repeat;
}

.btn-prev {
	position: fixed;
	top: 50%;
	margin-top: -19px;
	left: 0;
	z-index: 100;
	background-position: -212px -10px;
	width: 38px;
	height: 73px;
}

.btn-next {
	position: fixed;
	top: 50%;
	right: 0;
	margin-top: -19px;
	z-index: 100;
	background-position: -268px -10px;
	width: 38px;
	height: 73px;
}

.btn-resource a {
	display: block;
	width: inherit;
	height: inherit;
}

.btn-resource a span {
	display: none;
}

.bottom-navbar {
	position: fixed;
	bottom: 0px;
	background-color: #f5f5f5;
	border-top: 1px solid #dddddd;
}

.bottom-navbar .bottom-wrapper {
	height: 50px;
	margin: auto;
	font-size: 15px;
	padding: 5px 10px;
}

.bottom-navbar .bottom-wrapper i {
	font-size: 30px;
}

.comic-navbar {
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	margin-bottom: 20px;
}

.comic-navbar .navbar-wrapper {
	height: 50px;
	margin: auto;
	font-size: 15px;
	padding: 5px 10px;
}

.comic-navbar .navbar-wrapper i {
	font-size: 30px;
}

.toon-info {
	float: none;
	vertical-align: top;
	overflow: hidden;
}

.toon-img {
	float: left;
	margin-right: 10px;
}

.toon-title {
	float: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: keep-all;
}

.toon-total {
	color: #999;
}

.toon-section {
	position: absolute;
	top: 20px;
	left: 50px;
	color: #999999;
	font-size: 13px;
}

.toon-nav {
	float: right;
	padding-top: 5px;
	text-align: right;
	/*width: 160px;*/
	display: inline-block;
}

.toon-nav i {
	vertical-align: middle;
}
.content-zoom img {
	width: 100% !important;
}

.btn-zoom {
	cursor: pointer;
}

.fa-disabled {
	color: #ccc;
}

.webtoon-progress-bar {
	display:block;
	height: 3px;
	background: #4caf50;
	width: 0%;
}

.thumb-img img {
	width: 100%;
}

.btn.active.btn-lightgreen, .btn.btn-lightgreen:hover, .btn.btn-lightgreen:focus, .btn.btn-lightgreen:active {
	background-color: #dd4b39;
	border: 1px solid #a9493d;
}