@charset "UTF-8";

html,body{height: 100%;}

#header{position: relative; height: 50px; line-height: 50px;background: #181818;}
#header .title{display: inline-block;vertical-align: top; height: auto; padding: 15px 30px; box-sizing: border-box; line-height: 0; font-size: 0;}

#wrap,
#canvas{position: relative; height: 100%;}
#canvas .buttons{z-index: 100; position: absolute;right: 131px; top: 0;font-size: 0;}
#canvas .buttons button{display: inline-block;vertical-align: top;width: 50px;height: 50px;line-height: 50px; font-size: 0; text-align: center;}
#canvas .buttons .left_btn,
#canvas .buttons .right_btn{width: 45px;}
#canvas .buttons button img{display: inline-block; vertical-align: middle;}
#canvas .buttons .pdfDownload{display: inline-block; vertical-align: top; width: 50px; height: 50px; line-height: 50px; font-size: 0; background:  url("../pics/btn_download.png") no-repeat 50% 50%; }
.zoom-icon{font-size: 0;}

#canvas .pageNum{z-index: 100; position: absolute; right: 30px;top: 10px; width: 101px; height: 30px; line-height: 30px; font-size: 0; }
#canvas .pageNum .curPage{display: inline-block; vertical-align: middle; width: 50px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 400; text-align: center; color: #252525; border: 0 none; box-sizing: border-box; background: #fff;}
#canvas .pageNum .totalPage{display: inline-block; vertical-align: middle; width: 50px; height: 30px; margin-left: 1px; line-height: 30px; font-size: 14px; font-weight: 400; text-align: center; color: #252525; background: #fff;}

.next-button-hover.right_btn,
.next-button-down{background: url(../pics/bg_right_arrow.png) no-repeat 48% 50%;}
.previous-button-hover.left_btn,
.previous-button-down{background: url(../pics/bg_left_arrow.png) no-repeat 48% 50%;}

.magazine.animated{-webkit-transition: transform 0.6s, margin-left 0.5s; -moz-transition: transform 0.6s, margin-left 0.5s; -ms-transition: transform 0.6s, margin-left 0.5s; -o-transition: transform 0.6s, margin-left 0.5s; transition: transform 0.6s, margin-left 0.5s;}
.magazine-viewport{height: 100%; padding-top: 40px;}
.magazine-viewport .page-wrapper{-webkit-cursor:zoom-in; cursor: zoom-in;}
.magazine-viewport .page-wrapper.zoom-in{-webkit-cursor:zoom-out; cursor: zoom-out;}
.magazine-viewport .next-button, .magazine-viewport .previous-button{font-size: 0;}
.magazine-viewport .page img{position: absolute;}

.explain{z-index: 1000; position: fixed; left: 53px; top: 105px; width: 400px; height: 442px; padding: 80px 45px 30px; box-sizing: border-box; background: url(../pics/bg_popup.png) no-repeat 0 0; text-align: center; color: #fefefe;}
.explain.hide{display: none;}
.explain p{width: 100%; font-size: 41px; line-height: 43px; font-weight: bold; letter-spacing: -0.5px;}
.explain .closeBtn{position: absolute;right: -43px; top: 0; display: inline-block; font-size: 0; width: 43px; height: 43px; text-align: center;box-sizing: border-box;}
.explain .keyBoard{margin-top: 42px; padding: 20px 10px; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; box-sizing: border-box; text-align: left;}
.explain .keyBoard li{width: 100%; font-size: 15px; line-height: 32px; font-weight: 400; color: #fefefe; letter-spacing: -0.5px;}

/* voice */
#tts-hidden{display: none;}
.voice-wrap{z-index: 100; position: absolute; right: 385px; top: 50%;transform: translateY(-50%);width: 154px;height: 40px;text-align: center; background: #363636; border-radius: 20px;}
.voice-wrap .voice-inner{position: relative; height: 100%;}
.voice-wrap .voice-inner > button{position: absolute; left:37px; top:50%; transform: translateY(-50%); display: inline-block; vertical-align: top; font-size: 15px; line-height: 0;}
.voice-wrap .voice-inner .voice-pause{left: 68px;}
.voice-wrap .voice-inner .voice-stop{left: 103px;}

/* responsiveVoice */
#responsiveVoice{position: absolute; right: 0; bottom:2px; font-size: 10px; color: #fff;}
#responsiveVoice a,
#responsiveVoice span{display: inline-block; vertical-align: middle; height: 15px; line-height: 15px; color: #fff;}
#responsiveVoice span{margin-left: 3px;}
/* loading css */
#loading {z-index: 999; position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0, 0.6);}
#loading .loadingInner{z-index: 1000; position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px;}
#loading.hide{display: none;}
#loading .circle {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
#loading .circle:before {content: '';display: block;margin: 0 auto;width: 15%;height: 15%;background-color: #fff;border-radius: 100%;-webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;animation: circleFadeDelay 1.2s infinite ease-in-out both;}
#loading .circle2 {-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);}
#loading .circle3 {-webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);transform: rotate(60deg);}
#loading .circle4 {-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}
#loading .circle5 {-webkit-transform: rotate(120deg);-ms-transform: rotate(120deg);transform: rotate(120deg);}
#loading .circle6 {-webkit-transform: rotate(150deg);-ms-transform: rotate(150deg);transform: rotate(150deg);}
#loading .circle7 {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
#loading .circle8 {-webkit-transform: rotate(210deg);-ms-transform: rotate(210deg);transform: rotate(210deg);}
#loading .circle9 {-webkit-transform: rotate(240deg);-ms-transform: rotate(240deg);transform: rotate(240deg);}
#loading .circle10 {-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);}
#loading .circle11 {-webkit-transform: rotate(300deg);-ms-transform: rotate(300deg);transform: rotate(300deg); }
#loading .circle12 {-webkit-transform: rotate(330deg);-ms-transform: rotate(330deg);transform: rotate(330deg); }
#loading .circle2:before {-webkit-animation-delay: -1.1s;animation-delay: -1.1s; }
#loading .circle3:before {-webkit-animation-delay: -1s;animation-delay: -1s; }
#loading .circle4:before {-webkit-animation-delay: -0.9s;animation-delay: -0.9s; }
#loading .circle5:before {-webkit-animation-delay: -0.8s;animation-delay: -0.8s; }
#loading .circle6:before {-webkit-animation-delay: -0.7s;animation-delay: -0.7s; }
#loading .circle7:before {-webkit-animation-delay: -0.6s;animation-delay: -0.6s; }
#loading .circle8:before {-webkit-animation-delay: -0.5s;animation-delay: -0.5s; }
#loading .circle9:before {-webkit-animation-delay: -0.4s;animation-delay: -0.4s;}
#loading .circle10:before {-webkit-animation-delay: -0.3s;animation-delay: -0.3s;}
#loading .circle11:before {-webkit-animation-delay: -0.2s;animation-delay: -0.2s;}
#loading .circle12:before {-webkit-animation-delay: -0.1s;animation-delay: -0.1s;}
@-webkit-keyframes circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
}

@keyframes circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; } 
}