@import url('/css/fontawesome-all.css');

* { margin: 0; padding: 0; }

body { overflow: hidden; margin: 0; height: 100vh; }
body ::selection { background: #353637; color: #fff; }
body::-webkit-scrollbar { width: 0; }

div, nav, section, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, a{ text-align: left; vertical-align: middle; margin: 0; padding: 0; line-height: 170%; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 15px; word-wrap: break-word; word-break: break-all; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

:before , :after { -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }@import url('/css/fontawesome-all.css');

* { margin: 0; padding: 0; }

body { overflow: hidden; margin: 0; height: 100vh; }
body ::selection { background: #353637; color: #fff; }
body::-webkit-scrollbar { width: 0; }

div, nav, section, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, a{ text-align: left; vertical-align: middle; margin: 0; padding: 0; line-height: 170%; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 14px; word-wrap: break-word; word-break: break-all; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

:before , :after { -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

ul, ol { list-style: none; }

fieldset { border: 0; }

input,button,select,textarea { outline:none }

img { max-width: 100%; }

a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

livedemo00.template-help:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.text-clamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }

/* a.photo */
a.photo , .bgBox { overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: cover; display: block; }

/* wow */
.wow { animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-duration: 1s; -webkit-animation-duration: 1s; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

.container { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.container.showMenu {-moz-transform: translateX(240px); -webkit-transform: translateX(240px); -o-transform: translateX(240px); -ms-transform: translateX(240px); transform: translateX(240px); }
.container .workframe { margin: 10px auto; width: 1200px; }

/* menu-panel */
.menu-panel { position: absolute; overflow-y: scroll; width: 240px; height: 100vh; background: #cb3340; box-shadow: 0 1px 1px rgba(0,0,0,0.1); top: 0; left: -240px; z-index: 999; }
.menu-panel::-webkit-scrollbar { width: 0; }
.menu-panel h3 { padding: 20px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); }
.menu-panel ul { padding-bottom: 100px; }
.menu-panel ul li a { padding: 0 20px; background: #cb3340; border-bottom: 1px solid #bb2b37; display: block; line-height: 3.5; font-size: 1.1em; color: #fff; }

/* topBar */
#topBar { position: fixed; width: 100%; background: #fff; top: 0; left: 0; z-index: 9999; }
#topBar:before , #topBar:after { position: absolute; width: 100%; height: 3px; background: #cb3340; display: block; bottom: 0; right: 0; content: ""; z-index: 1; }
#topBar:after { width: 25%; background: #000; z-index: 2; }

/* topBtn */
.topBtn { position: absolute; width: 32px; height: 32px; background: #cb3340; border-radius: 50%; color: #fff; top: 20px; left: 20px; z-index: 20; }
.topBtn span { margin: 3px auto; width: 16px; height: 2px; background: #fff; display: block; }
.topBtn span:nth-child(1) { margin-top: 9px; }
.showMenu .topBtn span:nth-child(2) { opacity: 0; }
.showMenu .topBtn span:nth-child(1) { margin-top: 3px; -webkit-transform: translateY(11px) rotate(45deg); -ms-transform: translateY(11px) rotate(45deg); -o-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); }
.showMenu .topBtn span:nth-child(3) { -webkit-transform: translateY(1px) rotate(-45deg); -ms-transform: translateY(1px) rotate(-45deg); -o-transform: translateY(1px) rotate(-45deg); transform: translateY(1px) rotate(-45deg); }
.topBtn[data-action="choosepn"] { position: fixed; text-align: center; line-height: 32px; top: calc((100% - 32px) / 2); color: #fff; }
.topBtn[data-type="prev"] { left: 20px; opacity: 0; z-index: -1; }
.topBtn[data-type="next"] { left: auto; right: 25px; }

/* bookblock */
#bookblock { position: relative; width: 100%; height: 100vh; background: #444 }
#bookblock:before { position: absolute; width: 100%; height: 100%; background: #444; top: 0; left: 0; z-index: 1; content: ""; }
#bookblock section { position: absolute; overflow-y: scroll; width: 100%; height: calc(100vh - 74px); background: #fff; display: none; top: 74px; left: 0; z-index: 10; }
#bookblock section::-webkit-scrollbar { width: 6px; }
#bookblock section::-webkit-scrollbar-track { background: #c5c5c5; }
#bookblock section::-webkit-scrollbar-thumb { background: #0d1011; }
#bookblock section::-webkit-scrollbar-thumb:hover { background: #393939; }
#bookblock section .workframe >h2 {font-size: 30px;display: none;}
#bookblock section:first-child .workframe >h2 , #bookblock section:last-child .workframe >h2 { display: none; }

/* gotop */
#gotop { position: fixed; width: 32px; height: 32px; background: #cb3340; border-radius: 50%; text-align: center; line-height: 32px; color: #fff; right: 20px; bottom: 15vh; z-index: 20; }

@media screen and (max-width: 1400px) {
	.container .workframe { width: calc(100% - 100px); }
	.topBtn[data-type="prev"] { left: 10px; }
	.topBtn[data-type="next"] { right: 15px; }
}
@media screen and (min-width: 1001px) {
	.topBtn:hover { background: #000; }
}
@media screen and (max-width: 480px) {
	#topBar .workframe { text-align: center; }
	#topBar .workframe img  { width: 250px; }
	#bookblock section { height: calc(100vh - 67px); top: 67px; }
}
@media screen and (max-width: 400px) {
	.topBtn { top: 10px; left: 10px; }
	#topBar .workframe img  { width: 200px; }
	#bookblock section { height: calc(100vh - 57px); top: 57px; }
}

ul, ol { list-style: none; }

fieldset { border: 0; }

input,button,select,textarea { outline:none }

img { max-width: 100%; }

a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

livedemo00.template-help:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.text-clamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }

/* a.photo */
a.photo , .bgBox { overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: cover; display: block; }

/* wow */
.wow { animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-duration: 1s; -webkit-animation-duration: 1s; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

.container { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.container.showMenu {-moz-transform: translateX(240px); -webkit-transform: translateX(240px); -o-transform: translateX(240px); -ms-transform: translateX(240px); transform: translateX(240px); }
.container .workframe { margin: 10px auto; width: 1200px; }

/* menu-panel */
.menu-panel { position: absolute; overflow-y: scroll; width: 240px; height: 100vh; background: #cb3340; box-shadow: 0 1px 1px rgba(0,0,0,0.1); top: 0; left: -240px; z-index: 999; }
.menu-panel::-webkit-scrollbar { width: 0; }
.menu-panel h3 { padding: 20px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); }
.menu-panel ul { padding-bottom: 100px; }
.menu-panel ul li a { padding: 0 20px; background: #cb3340; border-bottom: 1px solid #bb2b37; display: block; line-height: 3.5; font-size: 1.1em; color: #fff; }

/* topBar */
#topBar { position: fixed; width: 100%; background: #fff; top: 0; left: 0; z-index: 9999; }
#topBar:before , #topBar:after { position: absolute; width: 100%; height: 3px; background: #cb3340; display: block; bottom: 0; right: 0; content: ""; z-index: 1; }
#topBar:after { width: 25%; background: #000; z-index: 2; }

/* topBtn */
.topBtn { position: absolute; width: 32px; height: 32px; background: #cb3340; border-radius: 50%; color: #fff; top: 20px; left: 20px; z-index: 20; }
.topBtn span { margin: 3px auto; width: 16px; height: 2px; background: #fff; display: block; }
.topBtn span:nth-child(1) { margin-top: 9px; }
.showMenu .topBtn span:nth-child(2) { opacity: 0; }
.showMenu .topBtn span:nth-child(1) { margin-top: 3px; -webkit-transform: translateY(11px) rotate(45deg); -ms-transform: translateY(11px) rotate(45deg); -o-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); }
.showMenu .topBtn span:nth-child(3) { -webkit-transform: translateY(1px) rotate(-45deg); -ms-transform: translateY(1px) rotate(-45deg); -o-transform: translateY(1px) rotate(-45deg); transform: translateY(1px) rotate(-45deg); }
.topBtn[data-action="choosepn"] { position: fixed; text-align: center; line-height: 32px; top: calc((100% - 32px) / 2); color: #fff; }
.topBtn[data-type="prev"] { left: 20px; opacity: 0; z-index: -1; }
.topBtn[data-type="next"] { left: auto; right: 25px; }

/* bookblock */
#bookblock { position: relative; width: 100%; height: 100vh; background: #444 }
#bookblock:before { position: absolute; width: 100%; height: 100%; background: #444; top: 0; left: 0; z-index: 1; content: ""; }
#bookblock section { position: absolute; overflow-y: scroll; width: 100%; height: calc(100vh - 74px); background: #fff; display: none; top: 74px; left: 0; z-index: 10; }
#bookblock section::-webkit-scrollbar { width: 6px; }
#bookblock section::-webkit-scrollbar-track { background: #c5c5c5; }
#bookblock section::-webkit-scrollbar-thumb { background: #0d1011; }
#bookblock section::-webkit-scrollbar-thumb:hover { background: #393939; }
#bookblock section .workframe >h2 { font-size: 30px; }
#bookblock section:first-child .workframe >h2 , #bookblock section:last-child .workframe >h2 { display: none; }

/* gotop */
#gotop { position: fixed; width: 32px; height: 32px; background: #cb3340; border-radius: 50%; text-align: center; line-height: 32px; color: #fff; right: 20px; bottom: 15vh; z-index: 20; }

@media screen and (max-width: 1400px) {
	.container .workframe { width: calc(100% - 100px); }
	.topBtn[data-type="prev"] { left: 10px; }
	.topBtn[data-type="next"] { right: 15px; }
}
@media screen and (min-width: 1001px) {
	.topBtn:hover { background: #000; }
}
@media screen and (max-width: 480px) {
	#topBar .workframe { text-align: center; }
	#topBar .workframe img  { width: 250px; }
	#bookblock section { height: calc(100vh - 67px); top: 67px; }
}
@media screen and (max-width: 400px) {
	.topBtn { top: 10px; left: 10px; }
	#topBar .workframe img  { width: 200px; }
	#bookblock section { height: calc(100vh - 57px); top: 57px; }
}