@charset "utf-8";

/*#####################################
	viewer
#####################################*/

/*-------------------------------------
	comic-viewer-container
-------------------------------------*/

.comic-viewer-wrap .comic-viewer-container {
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 9001002;
	position: absolute;
	top: 0;
	left: 0;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}

.comic-viewer-container-overlay {
	width: 100%;
	height: 120%;
	background-color: #000;
	opacity: 0.7;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9001001;
}

.comic-viewer-loading {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9001002;
	background-image: url(./img/loading.gif);
	background-position: 48% 48%;
	background-repeat: no-repeat;
}

.comic-viewer-wrap .canvas {
	position: relative;
}

.comic-viewer-wrap h3 {
	height: 64px;
	padding: 16px 64px;
	margin: 0 auto;
	text-align: center;
	color: #FFF;
}

.comic-viewer-wrap .comic-wrapper {
	position:absolute;
	top:50%;
	left:50%;
	width:1280px;
	height:914px;
	margin:auto;
}

.comic-viewer-wrap .comic-main {
	width:1280px;
	height:914px;
	left:-640px;
	top:-457px;
}

.comic-viewer-wrap .comic-main img {
	pointer-events: none;
}

.animated {
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

/*-------------------------------------
	bar
-------------------------------------*/

.comic-viewer-wrap .icon,
.comic-viewer-wrap .previous-button,
.comic-viewer-wrap .next-button {
	position: absolute;
	width: 64px;
	height: 64px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 64px 64px;
	border-radius: 0;
	cursor: pointer;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.comic-viewer-wrap .icon:hover,
.comic-viewer-wrap .next-button:hover,
.comic-viewer-wrap .previous-button:hover {
	cursor: pointer;
	opacity: 0.7;
}

.comic-viewer-wrap .icon {
	z-index: 9001003;
}

.comic-viewer-wrap .quit,
.comic-viewer-wrap .zoom-in {
	position: absolute;
	top: -0px;
}

.comic-viewer-wrap .quit {
	left: 0;
	background-image: url(img/viewer_btn_close.png);
}

.comic-viewer-wrap .zoom-in {
	right: 0;
	background-image: url(img/viewer_btn_zoom.png);
}

.comic-viewer-wrap .zoom-out {
	background-image: url(img/viewer_btn_zoomout.png);
	position:fixed;
	top:20px;
	right:20px;
	display: none;
	z-index: 9001003;
}

/*-------------------------------------
	bottom
-------------------------------------*/

.comic-viewer-wrap .bottom {
	position: relative;
	width: 100%;
}

.comic-viewer-wrap .navigation {
	font-size: 0;
	position: relative;
	margin: 16px auto 8px;
	width: 192px;
	height: 64px;
}

.comic-viewer-wrap .previous-button,
.comic-viewer-wrap .page-display,
.comic-viewer-wrap .next-button {
	font-size: 14px;
	top: 0;
}

.comic-viewer-wrap .previous-button {
	background-image: url(img/viewer_btn_prev.png);
	left: 128px;
}

.comic-viewer-wrap .next-button {
	background-image: url(img/viewer_btn_next.png);
	left: 0;
}

.comic-viewer-wrap .page-display {
	width: 64px;
	height: 64px;
	position: absolute;
	left: 64px;
}

.comic-viewer-wrap .page-display .now,
.comic-viewer-wrap .page-display .total {
	z-index: 9001003;
	position: absolute;
	width: 64px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	vertical-align: middle;
	left: 0;
	color: #000;
}

.comic-viewer-wrap .page-display .now {
	top: 0;
	background-color: #fff;
}

.comic-viewer-wrap .page-display .total {
	top: 32px;
	background-color: #eee;
}

/*-------------------------------------
	turnjs-slider
-------------------------------------*/

.comic-viewer-wrap .turnjs-slider {
	width: 600px;
	height: 4px;
	background-color: #ccc;
	margin: 20px auto;
	border-radius: 8px;
}

.comic-viewer-wrap .no-transition {
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	-ms-transition:none;
}

.comic-viewer-wrap .ui-state-disabled {
	cursor: default !important;
}

.comic-viewer-wrap .turnjs-slider .ui-widget-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.comic-viewer-wrap .turnjs-slider .ui-slider {
	z-index: 0;
	position: relative;
	text-align: left;
}

.comic-viewer-wrap .turnjs-slider .ui-slider-handle {
	position: absolute;
	z-index: 0;
	width: 80px;
	height: 24px;
	cursor: pointer;
	background-color: #f16c1c;
	display: block;
}

.comic-viewer-wrap .turnjs-slider .ui-state-hover {
	background-color: #b44e11;
}

.comic-viewer-wrap .turnjs-slider .ui-state-active {
	background-color: #b44e11;
}

.comic-viewer-wrap .turnjs-slider .ui-slider-horizontal {
	height: 24px;
	width: 520px;
	margin-left: 40px;
	cursor: pointer;
}

.comic-viewer-wrap .turnjs-slider .ui-slider-horizontal .ui-slider-handle {
	margin-left: -40px;
	margin-top: -10px;
	border-radius: 8px;
}

/*-------------------------------------
	sp
-------------------------------------*/

.comic-viewer-sp-wrap .comic-viewer-container {
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 9001002;
	position: absolute;
	top: 0;
	left: 0;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}

.comic-viewer-sp-wrap .canvas {
	position: relative;
	margin: 0 0 0 48px;
}

.comic-viewer-sp-wrap h3 {
	display: none;
}

.comic-viewer-sp-wrap .comic-wrapper {
	position:absolute;
	top:50%;
	left:50%;
	width:1280px;
	height:914px;
	margin:auto;
}

.comic-viewer-sp-wrap .comic-main {
	width:1280px;
	height:914px;
	left:-640px;
	top:-457px;
}

.animated {
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

/*-------------------------------------
	bar
-------------------------------------*/


.comic-viewer-sp-wrap .icon,
.comic-viewer-sp-wrap .previous-button,
.comic-viewer-sp-wrap .next-button {
	position: absolute;
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 48px 48px;
	border-radius: 0;
	cursor: pointer;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.comic-viewer-sp-wrap .icon:hover,
.comic-viewer-sp-wrap .next-button:hover,
.comic-viewer-sp-wrap .previous-button:hover {
	cursor: pointer;
	opacity: 0.7;
}

.comic-viewer-sp-wrap .icon {
	z-index: 9001003;
}

.comic-viewer-sp-wrap .quit {
	position: absolute;
	top: 48px;
	left: -48px;
	background-image: url(img/viewer_btn_close.png);
}

.comic-viewer-sp-wrap .zoom-in {
	display: none;
}

.comic-viewer-sp-wrap .zoom-out {
	background-image: url(img/viewer_btn_zoomout.png);
	position:fixed;
	top:20px;
	right:20px;
	display: none;
	z-index: 9001003;
}

/*-------------------------------------
	bottom
-------------------------------------*/

.comic-viewer-sp-wrap .bottom {
	position: absolute;
	left: -48px;
	bottom: 48px;
	height: 144px;
}

.comic-viewer-sp-wrap .navigation {
	font-size: 0;
	position: relative;
}

.comic-viewer-sp-wrap .previous-button,
.comic-viewer-sp-wrap .page-display,
.comic-viewer-sp-wrap .next-button {
	font-size: 14px;
	position: absolute;
}

.comic-viewer-sp-wrap .previous-button {
	background-image: url(img/viewer_btn_prev.png);
	top: 0;
}

.comic-viewer-sp-wrap .next-button {
	background-image: url(img/viewer_btn_next.png);
	top: 96px;
}

.comic-viewer-sp-wrap .page-display {
	top: 48px;
}

.comic-viewer-sp-wrap .page-display .now,
.comic-viewer-sp-wrap .page-display .total {
	z-index: 9001003;
	position: absolute;
	font-size: 12px;
	width: 48px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	vertical-align: middle;
	left: 0;
	color: #000;
}

.comic-viewer-sp-wrap .page-display .now {
	top: 0;
	background-color: #fff;
}

.comic-viewer-sp-wrap .page-display .total {
	top: 24px;
	background-color: #eee;
}

/*-------------------------------------
	turnjs-slider
-------------------------------------*/

.comic-viewer-sp-wrap .turnjs-slider {
	display: none;
}

/*-------------------------------------
	sp-single
-------------------------------------*/

.comic-viewer-sp-wrap-single .comic-viewer-container {
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 9001002;
	position: absolute;
	top: 0;
	left: 0;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}

.comic-viewer-sp-wrap-single .comic-viewer-container {
	z-index: 9001002;
}

.comic-viewer-container-overlay.sp-overlay {
	z-index: 9001001;
}

.comic-viewer-sp-wrap-single .flex-viewport {
	width: 100%;
	height: auto;
}

.comic-viewer-sp-wrap-single .flex-viewport .slides li {
	width: 100%;
	height: 100%;
}

.comic-viewer-sp-wrap-single .flex-viewport .slides li div {

	margin: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
}

.comic-viewer-sp-wrap-single h3 {
	display: none;
}

.comic-viewer-sp-wrap-single .bar {
	height: 48px;
}

/* button */
.comic-viewer-sp-wrap-single .bar .zoom-in,
.comic-viewer-sp-wrap-single .bar .zoom-out {
	display: none;
}

.comic-viewer-sp-wrap-single .slider-bar,
.comic-viewer-sp-wrap-single .previous-button,
.comic-viewer-sp-wrap-single .next-button {
	display: none;
}

.comic-viewer-sp-wrap-single .flex-control-nav {
	display: none;
}

.comic-viewer-sp-wrap-single .page-display {
	width: 48px;
	height: 48px;
	position: absolute;
	top: 0;
	right: 48px;
}

.comic-viewer-sp-wrap-single .page-display .now,
.comic-viewer-sp-wrap-single .page-display .total {
	z-index: 9001003;
	position: absolute;
	font-size: 12px;
	width: 48px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	vertical-align: middle;
	left: 0;
	color: #000;
}

.comic-viewer-sp-wrap-single .page-display .now {
	top: 0;
	background-color: #fff;
}

.comic-viewer-sp-wrap-single .page-display .total {
	top: 24px;
	background-color: #eee;
}

.comic-viewer-sp-wrap-single .flex-direction-nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	z-index: 9001003;
}

.comic-viewer-sp-wrap-single .flex-direction-nav li {
	width: 48px;
	height: 48px;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.comic-viewer-sp-wrap-single .flex-direction-nav li a {
	position: absolute;
	top: 0;
	display: block;
	width: 48px;
	height: 48px;
	text-decoration: none;
	background-size: contain;
}

.comic-viewer-sp-wrap-single .flex-direction-nav li a:hover {
	cursor: pointer;
	opacity: 0.7;
}

.comic-viewer-sp-wrap-single .flex-direction-nav li a.flex-next {
	right: 96px;
	background-image: url(img/viewer_btn_next.png);
}

.comic-viewer-sp-wrap-single .flex-direction-nav li a.flex-prev {
	right: 0;
	background-image: url(img/viewer_btn_prev.png);
}

.comic-viewer-sp-wrap-single .bar .quit {
	width: 48px;
	height: 48px;
	left: 0;
	top: 0;
	background-image: url(img/viewer_btn_close.png);
	background-size: contain;
	position: absolute;
	z-index: 9001004;
}

.comic-viewer-sp-wrap-single .bar .quit:hover {
	cursor: pointer;
	opacity: 0.7;
}

.comic-viewer-sp-wrap-single .slides li {
	text-align: center;
}