body {
    margin: 0;
}
/* VIEWER */
a {
    text-decoration: none;
}
*, *:before, *:after {
    box-sizing: border-box;
}
#viewerNew{width:100%; height:auto;touch-action: pan-y;}
#viewerNew .btn_ctrl_top{background:#252525; position:fixed; top:0; left:0; right:0; z-index:4}
#viewerNew .btn_ctrl_top .left_area{float:left; height:60px; display:inline-block; width:calc(100% - 242px);}
#viewerNew .btn_ctrl_top .left_area > a{display:flex; align-items:center; width: fit-content; max-width:100%; height:100%; overflow: hidden;}
#viewerNew .btn_ctrl_top .left_area > a > .icon_back{height:20px; margin:0 10px; float:left; display: inline-block;}
#viewerNew .btn_ctrl_top .left_area p.episode_title{display:inline-block; color:#fff; vertical-align:top; line-height:60px; width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; letter-spacing:-0.3px}
#viewerNew .btn_ctrl_top .left_area p.episode_title > strong{margin-right:4px; font-weight:600}
#viewerNew .btn_ctrl_top .right_area{float:right; height:60px}
#viewerNew .btn_ctrl_top .right_area > a{
    float: left;
    height: 100%;
    width: 60px;
    position: relative;
    border-left: 1px solid #000;
    color: #fff;
    font-size: 1.7rem;
    text-align: center;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#viewerNew .btn_ctrl_top .right_area > a > span{display:inline-block; vertical-align:top; image-rendering:-webkit-optimize-contrast;}
#viewerNew .btn_ctrl_top .right_area > a > .icon_home_menu{width:100%; height:100%; background:url(../image/icon_viewer_home.png) no-repeat center center; background-size:25px;
text-indent:-9999px;}
#viewerNew .btn_ctrl_top .right_area > a > .icon_eplist_menu{width:100%; height:100%; background:url(../image/icon_viewer_list.png) no-repeat center center; background-size:25px; text-indent:-9999px}

/* VIEWER::하단메뉴 */
#viewerNew .btn_ctrl_bottom{background:#252525; height:50px; position:fixed; bottom:0; left:0; right:0; z-index:4}
#viewerNew .btn_ctrl_bottom .center_area{width:100%; max-width:720px; margin:0 auto; height:100%}
#viewerNew .btn_ctrl_bottom .center_area > a{line-height:49px; color:#fff; width:20%; display:inline-block; float:left; text-align:center; font-size:.825rem; letter-spacing:-0.3px;text-decoration: none;}
#viewerNew .btn_ctrl_bottom .center_area > a.active{color:#e62a3c}
#viewerNew .btn_ctrl_bottom .center_area > a + a{border-left:1px solid #4a4a4a}
#viewerNew .btn_ctrl_bottom .center_area > a > span{display:inline-block; vertical-align:middle}
#viewerNew .btn_ctrl_bottom .center_area > a > .icon_top{background:url(../image/icon_viewer_top.png) no-repeat center center; background-size:15px; width:15px; height:15px; margin-right:5px; margin-top:-1px}
#viewerNew .btn_ctrl_bottom .center_area > a > .icon_prev{background:url(../image/icon_viewer_prev.png) no-repeat center center; background-size:8px; width:11px; height:19px; margin-right:3px; margin-top:-2px}
#viewerNew .btn_ctrl_bottom .center_area > a > .icon_nonstop{background:url(../image/icon_viewer_nonstop.png) no-repeat center center; background-size:18px; width:18px; height:18px; margin-right:2px; margin-top:0}
#viewerNew .btn_ctrl_bottom .center_area > a.active > .icon_nonstop{background:url(../image/icon_viewer_nonstop_active.png) no-repeat center center; background-size:18px}
#viewerNew .btn_ctrl_bottom .center_area > a > .icon_next{background:url(../image/icon_viewer_next.png) no-repeat center center; background-size:8px; width:11px; height:19px; margin-left:3px; margin-top:-2px}
#viewerNew .btn_ctrl_bottom .center_area > a > .icon_bottom{background:url(../image/icon_viewer_bottom.png) no-repeat center center; background-size:15px; width:15px; height:15px; margin-right:5px; margin-top:0}

/* VIEWER::보기 */
#comicContainer{min-height:1000px;}
#comicContainer .comic_content{margin:0 auto;}
#comicContainer .comic_content .comic_img{position:relative}
#comicContainer .comic_content .comic_img > img{margin:0 auto; -webkit-touch-callout:none; display:block}


/* VIEWER::하단정보(화이트) */
#comicContainer .comic_bottom_wp{max-width:720px; margin:0 auto 30px;}
#comicContainer .comic_bottom_wp .comic_bot{width:100%; margin:0 auto; padding:35px 0 5rem;}

/* 이전화 버튼 */
.comic_bot .episode_prevbtn{background:#333333; width:79%; height:44px; line-height:42px; margin:30px auto 40px; position:relative; background-size:cover; max-width:430px}
.comic_bot .episode_prevbtn > a{display:block; height:100%; text-align:center; color:#fff; font-size:0.9rem; font-weight:500}

/* 다음화 버튼 */
.comic_bot .episode_nextbtn{background:#ec3f44; width:79%; height:44px; line-height:42px; margin:30px auto 40px; position:relative; background-size:cover; max-width:430px}
.comic_bot .episode_nextbtn > a{display:block; height:100%; text-align:center; color:#fff; font-size:0.9rem; font-weight:500}

/* 다음화 가로썸네일 */
.comic_bot .next_ep_thumb{height:6.5rem; border-bottom:1px solid #ddd; border-top:1px solid #ddd; padding:0 10px; background:#fff; position:relative; align-items:center; display:flex; margin-top:33px; margin-bottom:20px; max-width:500px; margin:0 auto; width:100%;}
.comic_bot .next_ep_thumb .ep_thumb {position:relative; width:9rem; height:5.5rem; background-size: cover; background-repeat: no-repeat; background-position: center center; display:inline-block; margin:0 10px 0 0}
.comic_bot .next_ep_thumb .ep_subinfo{width: calc(100% - 9.2rem); display:inline-block; vertical-align:top;}
.comic_bot .next_ep_thumb .ep_subinfo .episode_next{font-size:15px; font-weight:600; color:#000; vertical-align:middle}
.comic_bot .next_ep_thumb .ep_subinfo .episode_next > img{height:15px; width:60px;}

.comic_bot .next_ep_thumb .episode_badge{vertical-align:top; height:16px; display:block}


#comicContainer .isbn_num_area{padding:50px 0 0 0; max-width:720px; margin: 0 auto;}
#comicContainer .isbn_num_area > img{margin:0 auto;}


#comicContainer .comic_bottom_wp .comic_bot_bnr .theme_bnr{margin-top:10px;}



.hidden-image {visibility: hidden;}



.scrollController {position: fixed;left: 50%;margin-left: -360px;bottom: 0;width: 720px;height: 15vh;box-sizing: border-box;z-index: 1;display: none;}


.scroll-indicator-container {position:fixed; top:0; z-index:5; width:100%; background-color:transparent; height:3px;}
.scroll-indicator {height:3px; background:#f54a3d; width:0%;}
.document_img {pointer-events: none;max-width:100%;height:auto;}


.left_area .arrow {
    padding-left: 0.8rem;
    font-size: 30px;
    color: #ffffff;
}


.js-offcanvas {
    background: #333!important;
}

.js-offcanvas ul {
    padding: 0 5px 0 5px;
}

.js-offcanvas .episode_title {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    height: 35px;
}

.js-offcanvas .episode_tr {
    margin: 10px 15px;
    position: relative;
    display: block;
    cursor: pointer;
    padding-bottom: 5px;
    color:#fff;
    border-bottom: 1px solid #434343;
}

.js-offcanvas ul > a.active {
    color:#e62a3c!important;
}



.banner-container {
    padding: 70px 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px;
    width: 50%;
    margin: 0 auto;
    width: 55%;
}

.banner-item {
    width: calc((100% - 2%) / 4);
}

.banner-item img {
    width: 100%;
    height: 70px;
}



/* ************************************** *
 * TABLET VER
 * ************************************** */

@media (min-width:768px) and (max-width:1023px){
    html{font-size:18px}
    body{font-size:1rem; margin:0; padding:0}

    #viewerNew{width:100%; height:auto;}
    #viewerNew .btn_ctrl_top{background:#252525; position:fixed; top:0; left:0; right:0; z-index:4}
    #viewerNew .btn_ctrl_top .left_area{float:left; height:50px; display:inline-block; width:calc(100% - 160px);}/*230613 수정*/
    #viewerNew .btn_ctrl_top .left_area > a{height:100%}
    #viewerNew .btn_ctrl_top .left_area > a > .icon_back{height:20px;}
    #viewerNew .btn_ctrl_top .left_area p.episode_title{display:inline-block; color:#fff; vertical-align:top; line-height:50px; width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; letter-spacing:-0.3px}
    #viewerNew .btn_ctrl_top .left_area p.episode_title > strong{margin-right:4px; font-weight:600}
    #viewerNew .btn_ctrl_top .right_area{float:right; height:50px}
    #viewerNew .btn_ctrl_top .right_area > a{display:inline-block; float:left; height:100%; width:40px; vertical-align:top; position:relative; border:0}
    #viewerNew .btn_ctrl_top .right_area > a > span{display:inline-block; vertical-align:top; image-rendering:-webkit-optimize-contrast;}
    #viewerNew .btn_ctrl_top .right_area > a > .icon_home_menu{width:100%; height:100%; background:url(../image/icon_viewer_home.png) no-repeat center center; background-size:21px;
    text-indent:-9999px;}
    #viewerNew .btn_ctrl_top .right_area > a > .icon_eplist_menu{width:100%; height:100%; background:url(../image/icon_viewer_list.png) no-repeat center center; background-size:21px; text-indent:-9999px}

}


/* ************************************** *
 * MOBILE VER
 * ************************************** */

@media (min-width:0) and (max-width:767px){
    html{font-size:16px; background:#fff}
    body{font-size:1rem; margin:0; padding:0}

    #viewerNew{width:100%; height:auto;}
    #viewerNew .btn_ctrl_top{background:#252525; position:fixed; top:0; left:0; right:0; z-index:4}
    #viewerNew .btn_ctrl_top .left_area{float:left; height:50px; display:inline-block; width:calc(100% - 160px);}/*230613 수정*/
    #viewerNew .btn_ctrl_top .left_area > a{height:100%}
    #viewerNew .btn_ctrl_top .left_area > a > .icon_back{height:20px;}
    #viewerNew .btn_ctrl_top .left_area p.episode_title{display:inline-block; color:#fff; vertical-align:top; line-height:50px; width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; letter-spacing:-0.3px}
    #viewerNew .btn_ctrl_top .left_area p.episode_title > strong{margin-right:4px; font-weight:600}
    #viewerNew .btn_ctrl_top .right_area{float:right; height:50px}
    #viewerNew .btn_ctrl_top .right_area > a{display:inline-block; float:left; height:100%; width:40px; vertical-align:top; position:relative; border:0}
    #viewerNew .btn_ctrl_top .right_area > a > span{display:inline-block; vertical-align:top; image-rendering:auto;}
    #viewerNew .btn_ctrl_top .right_area > a > .icon_home_menu{width:100%; height:100%; background:url(../image/icon_viewer_home.png) no-repeat center center; background-size:21px;
    text-indent:-9999px;}
    #viewerNew .btn_ctrl_top .right_area > a > .icon_eplist_menu{width:100%; height:100%; background:url(../image/icon_viewer_list.png) no-repeat center center; background-size:21px; text-indent:-9999px}

  
}
/*아이폰5 이하버전*/
@media (max-width:320px){

   
}

@media (max-width:767px) {
    .scrollController {position: fixed;bottom: 0;left: 0;width: 100vw;height: 15vh;box-sizing: border-box;z-index: 1;display: none; margin-left: 0;}
}

@media (max-width:1440px) {
    .banner-container {
        width: 65%;
    }
    .banner-item {
       width: calc((100% - 2%) / 3)!important;
    }
}

@media (max-width:960px) {
    .banner-item {
       width: calc((100% - 2%) / 2)!important;
    }
}

@media (max-width:768px) {
    .banner-container {
        width: 100%;
    }
    .banner-item {
       width: calc((100% - 2%) / 2)!important;
    }
}

@media (max-width:400px) {
    .banner-item {
       width: calc((100% - 2%) / 1)!important;
    }
}