.cartoon_trigger { display:inline-block; cursor:pointer; }

.cartoon_viewer{position:fixed;left:0;top:0;width:100%;min-width:0px;height:100%;z-index:1000;background:#000;background-color:rgba(0,0,0,0.8);font-size:0}
.cartoon_viewer .viewer_wrap{position:relative;width:100%;height:100%;overflow-y:auto;text-align:center}
.cartoon_viewer .viewer_container{position:relative;width:auto;height:100%;text-align:center;margin:0 auto;font-size:0}
.cartoon_viewer .viewer_header{position:absolute;left:0;top:20px;width:100%;z-index:100;background:#6e7a8e;border-top:1px solid #525c6d;border-bottom:1px solid #525c6d}
.cartoon_viewer .viewer_header h1{height:61px;line-height:61px;color:#fff;text-align:center;font-size:14px}
.cartoon_viewer .page img{height:100%;}
.cartoon_viewer .page{position:absolute;right:50%;top:81px;width:50%;height:100%;height:calc(100% - 124px);text-align:right}
.cartoon_viewer .page_r{position:absolute;right:auto;left:50%;text-align:left}
.cartoon_viewer .page a{display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url('//cdn.df.nexon.com/img/web/media/viewer/blank.gif');background-color:rgba(255,255,255,0)}
.cartoon_viewer .page span{position:absolute;left:0;bottom:-25px;font-size:12px;color:#fff;font-family:'Verdana'}
.cartoon_viewer .page_r span{left:auto;right:0}
.cartoon_viewer .page_l a:hover{background:url('//cdn.df.nexon.com/img/web/media/viewer/page_l.png') no-repeat 0 50%}
.cartoon_viewer .page_r a:hover{background:url('//cdn.df.nexon.com/img/web/media/viewer/page_r.png') no-repeat 100% 50%}
.cartoon_viewer .shadow{position:absolute;left:50%;top:81px;margin-left:-30px;width:60px;height:100%;height:calc(100% - 124px);background:url('//cdn.df.nexon.com/img/web/media/viewer/shadow.png') repeat-y}
.cartoon_viewer .viewer_header .btn_close{display:block;position:absolute;right:19px;top:13px;width:74px;height:34px;background:url('//cdn.df.nexon.com/img/web/media/viewer/btn_close.gif')}
.cartoon_viewer .lastpage{position:absolute;right:85px;top:-11px;width:207px;height:84px;background:url('//cdn.df.nexon.com/img/web/media/viewer/lastpage.png') no-repeat}
.cartoon_viewer .viewer_guide{position:absolute;left:0;top:0;width:100%;height:100%;background:url('//cdn.df.nexon.com/img/web/media/viewer/guide_bg.png');z-index:100;cursor:pointer}
.cartoon_viewer .direction{position:absolute;left:50%;top:50%;width:917px;height:248px;margin:-124px 0 0 -458px;background:url('//cdn.df.nexon.com/img/web/media/viewer/guide_txt.png')}