/* BANNER SWIPER */
#mainBnr{max-width:100%; margin:0 auto; position:relative; height: 380px;background-color: #ddd;}
#mainBnr .main_bnr_new {
    position: relative;
    height: 380px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

#mainBnr .main_bnr_new .image-holder {
    position: absolute;
    left: calc(50% - 960px);
    width: 1920px;
    height: 380px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
}

@media (min-width:768px) and (max-width:1024px){
    #mainBnr {
        width: 100%;
        height: 53vw;
        margin: auto;
        padding: 0
    }

    #mainBnr .main_bnr_new {
        width: 100%;
        height: auto;
    }

    #mainBnr .main_bnr_new .image-holder {
        height: 53vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
        left: 0;
        width: 100%;
    }
    #mainBnr .navigation-button {display: none !important;}
}

@media (min-width:0) and (max-width:767px){
    #mainBnr {
        width: 100%;
        height: 54vw;
        margin: auto;
        padding: 0
    }

    #mainBnr .main_bnr_new {
        width: 100%;
        height: auto;
    }

    #mainBnr .main_bnr_new .image-holder {
        height: 54vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        left: 0;
        width: 100%;
    }
    #mainBnr .navigation-button {display: none !important;}
}

#mainBnr .main_bnr_new .placeholder {
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
}

#mainBnr .navigation-button {
    position: absolute;
    top: 50%;
    display: block;
    background-repeat: no-repeat;
    opacity: 0.3;
    border-radius: 50%;
    z-index: 10;
    width: 65px;
    height: 65px;
    margin-top: -32px;
    background-color: #fff;
    outline: none;
}

#mainBnr .navigation-button.main_bnr_arrow_left {left: 3%;background-image: url(../image/bnr_arrow_left.png);background-position: 18px;}
#mainBnr .navigation-button.main_bnr_arrow_right {right: 3%;background-image: url(../image/bnr_arrow_right.png);background-position: 26px;}
#mainBnr .navigation-button:hover {opacity:0.6;}



/*롤링버튼*/
.swiper_bullet_wp{width: auto !important; margin:0 auto; bottom:15px !important; left:50% !important; transform:translateX(-50%) !important;}
.swiper_bullet_wp .swiper_bullet{display:inline-block; background-color:#fff; width:10px !important; height:10px !important; opacity:0.6 !important; cursor:pointer; margin:0 5px; border-radius:50%; float:left;}
.swiper_bullet_wp .swiper_bullet.active{background-color:#e53643; opacity:1 !important;}
@media (min-width:0) and (max-width:767px){
    .swiper_bullet_wp{position:absolute; text-align:left; bottom:14px !important; left:5.8% !important; transform:none !important; max-width:90%; overflow:hidden}
    .swiper_bullet_wp .swiper_bullet{width:7px !important; height:7px !important; opacity:0.5 !important; margin:1px 4px;}
}

/* ************************************** *
 * INDEX PC VER
 * ************************************** */

.index_realtime{display:none}
/*배너영역*/
.banner {max-width:1024px; margin:20px auto 0; overflow:hidden; border-bottom:1px solid #ddd}
.banner ul {}
.banner ul li:first-child {margin-left:0px;}
.banner ul li {margin-bottom: 25px; float:left; margin-left:14px; display:flex; align-items:center; }
.banner > ul > li > img { width: 245px; border-radius: 5px; border: 1px solid rgb(219 219 219); }
@media (max-width:450px){
    .banner {margin:5px auto 0; overflow:hidden; border-bottom:1px solid #ddd}
    .banner ul {
        display:-ms-grid;
        display: grid;
        -ms-grid-columns: (1fr)[2];
            grid-template-columns:repeat(2, 1fr);
        grid-gap: 5px;
        margin-bottom: 5px;
    }
    .banner ul li {width:100%; margin-left:0px; float: none; margin-bottom:0px;}
    .banner > ul > li > img { width: 245px; border-radius: 5px; border: 1px solid rgb(219 219 219); }
}


/* 실시간순위(PC만) */
.realtime_rank_wp{padding-top:20px; min-height: 600px;}
.realtime_rank_wp .realtime_rank{max-width:1024px; margin:30px auto 0; padding:0 10px; overflow:hidden; border-bottom:1px solid #ddd}
.realtime_rank_wp .realtime_rank:last-child{border-bottom:none}
.realtime_rank_wp .realtime_rank .realtime_tit{width:140px; float:left; display:inline-block}
.realtime_rank_wp .realtime_rank .realtime_tit .tit_sub{font-size:12px; color:#aaa; line-height:18px;}
.realtime_rank_wp .realtime_rank ul{float:right; width:calc(100% - 140px); margin-right:-8px}
.realtime_rank_wp .realtime_rank ul li{width:20%; float:left; position:relative; padding:0 6px; margin-bottom:26px;}
.realtime_rank_wp .realtime_rank ul li.comicListBanner{margin-top:-10px; margin-bottom:5px; box-sizing:border-box; width:100%; padding:0}
.realtime_rank_wp .realtime_rank ul li > a{display:block;}
.realtime_rank_wp .realtime_rank ul li .thumbbox{height: 0px; padding-bottom:139%; background-color: #eee; background-size: cover; background-position:center; margin-bottom:7px; position: relative; border-radius:5px;}
.realtime_rank_wp .realtime_rank ul li .thumbbox .rank{border-radius:6px 0 0 0; width:23px; height:23px; line-height:21px; box-sizing:border-box; text-align:center; background:rgba(142, 142, 142, 0.8); color:#fff;
display:inline-block; border:1px solid #949494; font-size:15px; font-family: Roboto, "Droid Sans", "Malgun Gothic", Helvetica, "Apple Gothic", Tahoma, Dotum, sans-serif; position:absolute; left:0; top:0}
.realtime_rank_wp .realtime_rank ul li .thumbbox .rank.top{background:rgba(245,50,67,0.8); border: 1px solid #f53243}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_tit{height:1rem;}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_tit .thumb_tit_text{font-size:.8rem; max-width:calc(100%); color:#000; font-weight:500; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; letter-spacing:-0.3px; height:100%}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info{font-size:.65rem; color:#666; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; height:1rem; overflow:hidden; letter-spacing:-0.6px}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info > div{display:inline-block; vertical-align:middle;}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info > img.badge_up{width:20px; height:13px; min-height:13px; margin-top:1px; margin-left:3px}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info > img.badge_zzz{width:23px; height:15px; min-height:15px; margin-top:1px; margin-left:3px}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info .tit_thumb_e{height:100%; line-height:1rem; margin-right:0; max-width:initial; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info .tit_thumb_p{height:100%; line-height:1rem; margin-right:0; margin-left:4px; width:max-content; position:relative; display:flex; align-items:center; flex:none; padding-right:1px}
.realtime_rank_wp .realtime_rank ul li .comic_info .thumb_info .tit_thumb_p > img.pd_point{height:0.55rem; display:inline-block; float:left; margin-right:2px}
.realtime_rank_wp .realtime_rank ul li .comic_info .span_badge{height:16px; overflow: hidden; margin-top:6px;}
.realtime_rank_wp .realtime_rank ul li .comic_info .span_badge > span{display:inline-block; float:left; margin-right:2px;}


/* 브랜딩배너영역 */
.index_fullbnr{margin:0 0 20px}
.index_fullbnr img{display:block; margin:0 auto; padding:0 10px}
.index_fullbnr .fullbnr_link{width:100%; display:block; background-color:#f2f2d0}

/* 결제배너영역 */
.payment_fullbnr{margin:0}
.payment_fullbnr img{display:block; margin:0 auto; padding:0}
.payment_fullbnr .fullbnr_link{width:100%; display:block; background-color:#ede1d2}


/* 맞춤키워드_추천장르 */
.index_contentbox{max-width:1024px; margin:20px auto; box-sizing:border-box; padding:0 10px}
.index_contentbox p.tit_main{font-size:1.1rem; line-height:2.2rem; font-weight:500; letter-spacing:-0.4px; padding:0; color:#000}
.index_contentbox .contentbox{width:100%; margin:0 auto; position:relative}
.index_contentbox .contentbox a.like_more.keyword{display:block}
.index_contentbox .contentbox .btn_arrow.keyword{display:none}
.index_contentbox .contentbox a.like_more{color:#666; font-size:12px; display:none; width:80px; height:28px; line-height:26px; position:absolute; top:2.8%; right:0; text-align:right; letter-spacing:-0.4px; cursor: pointer}
.index_contentbox .contentbox a.like_more > img{height:15px; display:inline-block; vertical-align:middle; margin-top:-2px;}
.index_contentbox .contentbox .btn_arrow{position:absolute; top:2%; right:0}
.index_contentbox .contentbox .btn_arrow > button{border:1px solid #ddd; width:28px; height:28px; background:none; font-size:0; float:right; cursor:pointer}
.index_contentbox .contentbox .btn_arrow > button.btn_prev{border-radius:3px 0 0 3px; margin-right:-1px; background:url(../image/icon_arrow.png) 7px 4px no-repeat; background-size:100px 30px;}
.index_contentbox .contentbox .btn_arrow > button.btn_prev:hover{border-radius:3px 0 0 3px; margin-right:-1px; border:1px solid #000; background:url(../image/icon_arrow.png) -46px 4px no-repeat; background-size:100px 30px;}
.index_contentbox .contentbox .btn_arrow > button.btn_next{border-radius:0 3px 3px 0; background:url(../image/icon_arrow.png) -20px 4px no-repeat; background-size:100px 30px;}
.index_contentbox .contentbox .btn_arrow > button.btn_next:hover{border-radius:0 3px 3px 0; border:1px solid #000; z-index:5; position:relative; background:url(../image/icon_arrow.png) -73px 4px no-repeat; background-size:100px 30px;}

.index_contentbox .contentbox .comic_list_area ul{position: relative; box-sizing:border-box; height:auto; overflow:hidden; width:100% !important;}
.index_contentbox .contentbox .comic_list_area ul:not(.swiper-container) li{height:auto; float:left; background:#fff; border:1px solid #ddd; position:relative; width: calc((100% - 118px) / 5); margin-bottom:10px; margin-left:2.88%}
.index_contentbox .contentbox .comic_list_area ul.swiper-container li {height:auto; background:#fff; border:1px solid #ddd; width: calc((100% - 118px) / 5);}
.index_contentbox .contentbox .comic_list_area ul li:first-child{margin-left:0}
.index_contentbox .contentbox .comic_list_area ul li > a{display: block;}
.index_contentbox .contentbox .comic_list_area ul li span{display:inline-block; vertical-align:middle;}
.index_contentbox .contentbox .comic_list_area ul li .comic_info{padding:.4rem .5rem .5rem}
.index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area{height:20px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; width:100%}
.index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area .thumb_tit{font-size:.8rem; color:#000; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;}
.index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area > img.badge_up{width:20px; min-width:20px; height:13px; margin-left:2px;}
.index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area > img.badge_zzz{width:23px; height:15px; min-height:15px; margin-left:2px;}
.index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_writer{font-size:.7rem; color:#666; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 추천장르 > 해시 */
.index_contentbox .contentbox .hash_list{overflow:hidden; padding:0 0 15px 0; display:flex; width:100%; justify-content: flex-start; flex-wrap:wrap;}
.index_contentbox .contentbox .hash_list li{float:left; height:30px; line-height:26px; width:12%; margin:.25%}
.index_contentbox .contentbox .hash_list li a{border:1px solid #ddd; border-radius:40px; background:#fff; display: block; width:100%; height:100%; font-size:14px; font-weight:500; color:#000; text-align: center; letter-spacing:-0.4px; box-sizing:border-box}
.index_contentbox .contentbox .hash_list li a.st01{border:1px solid #ca8e83; background:#f9ebe9; color:#be7567;}
.index_contentbox .contentbox .hash_list li a.st02{border:1px solid #d1b873; background:#fff6dc; color:#bd8513;}
.index_contentbox .contentbox .hash_list li a.st03{border:1px solid #9db388; background:#ecf4e4; color:#5b7545;}
.index_contentbox .contentbox .hash_list li a.st04{border:1px solid #b999b2; background:#f6edf3; color:#9e638d;}
.index_contentbox .contentbox .hash_list li a.st05{border:1px solid #9db388; background:#ecf4e4; color:#5b7545;}
.index_contentbox .contentbox .hash_list li a.st06{border:1px solid #b999b2; background:#f6edf3; color:#9e638d;}
.index_contentbox .contentbox .hash_list li a.st07{border:1px solid #d1b873; background:#fff6dc; color:#bd8513;}
.index_contentbox .contentbox .hash_list li a.st08{border:1px solid #ecabaf; background:#f9e9e9; color:#e63740;}
.index_contentbox .contentbox .hash_list li a.active{border:1px solid #e63740; color:#e63740; background:#fff; font-weight:600;}

/* 추천무료배너영역 */
.index_freebnr > p.tit_main{display:none}
.index_freebnr_inner img{display:block; margin:0 auto; padding:0 10px}
.index_freebnr_inner .inner_bgcolor{position:absolute; height:76%; background:#1a162a; left:0; right:0; bottom:0; z-index:-1}
.index_freebnr_inner .freebnr_link{display:inline-block;}

/* 이벤트관 */
.index_contentbox .contentbox .event_list_area ul{padding:0; box-sizing:border-box; height:0; overflow:hidden; padding-bottom:17.3%; width:100% !important;}
.index_contentbox .contentbox .event_list_area ul li{height:auto; float:left; background:#fff; border:1px solid #ddd; position:relative; width: calc((100% - 60px) / 3); margin-bottom:5px;}
.index_contentbox .contentbox .event_list_area ul li picture{image-rendering:-webkit-optimize-contrast;}
.index_contentbox .contentbox .event_list_area ul li span{display:inline-block; vertical-align:middle;}

.floating_banner_m{z-index:90; display: inline-block; position:fixed; right:88px; bottom:10%;}
.floating_banner_m .btn_close{position:absolute; top: 0; right:0; background:#fff; border-radius:50%; border:2px solid #aaa; z-index: 1}
.floating_banner_m a{display:block}
.floating_banner_m .btn_close > img {height: 24px;}
.floating_banner_m .titleArea > img {height: 200px;}


/* ************************************** *
 * TABLET PC VER
 * ************************************** */
@media (min-width:768px) and (max-width:1023px){
    /* 실시간순위(PC만) */
    .realtime_rank_wp{display:none}

    /* 메인실시간순위_타이틀 */
    .index_realtime{max-width:100%; margin:0 auto; box-sizing:border-box; display: block}
    .index_realtime .title_block{overflow:hidden; height:2.4rem; border-bottom:1px solid #ddd; position:relative; padding:0 10px}
    .index_realtime .title_block .tit_sec{font-size:1.1rem; line-height:2.25rem; float:left; font-weight:500; color:#000}

    /* 메인실시간순위_탭 */
    .index_realtime .title_block .tab_sec{position:absolute; right:7px; top:23%}
    .index_realtime .title_block .tab_sec ul li{display:inline-block;}
    .index_realtime .title_block .tab_sec ul li a{display:block; color:#666; padding:2px 10px; left:-1px; font-size:.8rem}
    .index_realtime .title_block .tab_sec ul li.active a {color:#fff; border-radius:20px; background:#eb2d3a;}

    /* 메인실시간순위 */
    #rankSlide{position:relative; overflow-x:visible; width:100%}
    #rankSlide::-webkit-scrollbar{display:none;}
    .index_contentbox{width:100%; padding:0 10px;}
    .index_realtime .index_realtime_inner{width:100%; margin:10px auto 0; position:relative; overflow:hidden; padding:0 10px}
    .index_realtime .index_realtime_inner .img_gradation{position:absolute; z-index:1; right:-10px; top:0px; width:85px; height:100%; background-size:contain; background:url('../image/main_white_gradation_layer.png');}
    .swiper-container-horizontal{position:relative; width:100%; height:100%; z-index:1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; transition-property:transform; transition-property:transform, -webkit-transform; -webkit-box-sizing:content-box; box-sizing:content-box}
    .swiper-container-horizontal .swiper-slide{-webkit-flex-shrink:0; -ms-flex:0 0 auto; flex-shrink:0; width:100%; height:100%; position:relative}

    .index_realtime .realtime_list{float:left; width:68%}
    .index_realtime .realtime_list li{margin-bottom:7px}
    .index_realtime .realtime_list li:after{content:""; visibility:hidden; display:block; height:0; clear:both;}
    .index_realtime .realtime_list li:last-child{margin-bottom:0;}
    .index_realtime .realtime_list .thumbbox{width:24%; padding-bottom:14%; float:left; background-size:cover; margin-right:10px; position:relative;}

    .index_realtime .realtime_list .rank_info{padding-top:1.3%; letter-spacing:-0.3px}
    .index_realtime .realtime_list .rank_info p.thumb_tit{font-size:16px; font-weight:500; color: #000; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:flex-start; align-items: center;}
    .index_realtime .realtime_list .rank_info p.thumb_tit span{vertical-align:top}
    .index_realtime .realtime_list .rank_info p.thumb_tit span.txtico_rank{width:28px; height:18px; line-height:16px; display:inline-block; border-radius:3px; border:1px solid #828a92; color:#fff; text-align:center; background:#a3a9b1; font-size:.6rem; margin-right:5px;}
    .index_realtime .realtime_list .rank_info p.thumb_tit span.txtico_title{max-width:calc(100% - 56px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align: top; height:22px; padding-top:1px}
    .index_realtime .realtime_list .rank_info p.thumb_info span.pd_point{width:11px; height:16px; background:url(../image/pd_point_star.png) no-repeat 0 center; background-size:11px;}
    .index_realtime .realtime_list .rank_info p.thumb_info span.point_num{color:#000; line-height:16px; font-size:13px; margin-left:2px; margin-right:4px}
    .index_realtime .realtime_list .rank_info p.thumb_info span{display:inline-block; font-size:11px; vertical-align:top; float:left}
    .index_realtime .realtime_list .rank_info p.thumb_info span.span_badge{max-width:calc(100% - 150px); height:16px; overflow:hidden;}
    .index_realtime .realtime_list .rank_info p.thumb_info .span_badge span.newnew_icobadge{margin-right:2px;}
    .index_realtime .realtime_list .rank_info p.thumb_info .span_badge > span{float:left; margin-right:2px}

    .index_realtime .realtime_list .rank_info p.thumb_writer{white-space:nowrap; overflow:hidden; text-overflow: ellipsis; margin-top:4px; font-size:13px; color:#666;}
    .index_realtime .realtime_list .rank_info p.thumb_writer span{vertical-align:middle; display:inline-block;}
    .index_realtime .realtime_list .rank_info p.thumb_writer .tit_thumb_e{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; text-align:left; line-height:12px; height:14px; max-width:50%;}
    .index_realtime .realtime_list .rank_info p.thumb_writer .tit_thumb_a{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; text-align:left; line-height:12px; height:14px; max-width:90%;}
    .index_realtime .realtime_list .rank_info p.thumb_writer .line{width:1px; height:10px; background:#ddd; margin:0 1px 2px 1px; display:inline-block;}
    .index_realtime .realtime_list .rank_info p.thumb_info{margin-top:4px}
    .index_realtime .realtime_list .thumbbox .newnew_icobadge{bottom:5px;}


    /* 메인실시간순위 */
    .index_realtime .realtime_list .thumbbox{min-height:73px;}
    .index_realtime .realtime_list .rank_info p.thumb_info{margin-top:4px}


    /* 브랜딩배너영역 */
    .index_fullbnr{margin:20px 0}
    .index_fullbnr img {display:block; width:100%; margin:0 auto; padding:0;}

    /* 결제배너영역 */
    .payment_fullbnr img {display:block; width:100%; margin:0 auto; padding:0;}

    /* 맞춤키워드_추천장르 */
    .index_contentbox .contentbox{width:100%; margin:0 auto; position:relative;}
    /*.index_contentbox .contentbox .btn_arrow{display:none}*/
    .index_contentbox .contentbox a.like_more{display:block}
    .index_contentbox .contentbox .comic_list_area ul{padding:0; width:100%; box-sizing: border-box; height:auto; white-space:nowrap; overflow:auto; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
    .index_contentbox .contentbox .comic_list_area ul li{display:inline-block; width:20%; float:none;}
    .index_contentbox .contentbox .comic_list_area ul:not(.swiper-container) li{float:none; width:20%;}
    .index_contentbox .contentbox .comic_list_area ul li .thumbbox{padding-bottom:100%; background-size:cover; margin-bottom:5px; position:relative}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area > img{}

    /* 추천무료배너영역 */
    .index_freebnr img{display:block; width:100%; margin:0 auto}

    /* 이벤트관 */
    .index_contentbox .contentbox .event_list_area ul{padding:0; width:100%; box-sizing: border-box; height:auto; white-space:nowrap; overflow:auto; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
    .index_contentbox .contentbox .event_list_area ul li{display:inline-block; width:40%; float: none;}

    .floating_banner_m{right:2%; bottom:2%;}
}


/* ************************************** *
 * MOBILE VER
 * ************************************** */
@media (min-width:0) and (max-width:767px){
    /* 실시간순위(PC만) */
    .realtime_rank_wp{display:none}

    /* 메인실시간순위_타이틀 */
    .index_realtime{width:100%; background:#fff; border-bottom:1px solid #ddd; margin-bottom:5px; padding-bottom:20px; display:block;min-height: 50vh;}
    .index_realtime .title_block{overflow:hidden; height:2.625rem; border-bottom:1px solid #ddd; position:relative; padding:0 10px; }
    .index_realtime .title_block .tit_sec{font-size:15px; line-height:2.625rem; float:left; font-weight:500; color:#000}

    /* 메인실시간순위_탭 */
    .index_realtime .title_block .tab_sec{position:absolute; right:7px; top:25%}
    .index_realtime .title_block .tab_sec ul li{display:inline-block;}
    .index_realtime .title_block .tab_sec ul li a{display:block; color:#666; padding:2px 5px; left:-1px; font-size:.75rem; letter-spacing:-0.3px}
    .index_realtime .title_block .tab_sec ul li.active a {color:#fff; border-radius:20px; background:#eb2d3a;}

    /* 메인실시간순위 */
    #rankSlide{position:relative; width:100%}
    .index_realtime .index_realtime_inner{width:100%; margin:.5rem auto 0; overflow:hidden; padding:0 10px}
    .index_realtime .index_realtime_inner .img_gradation{position:absolute; z-index:2; right:-10px; top:0px; width:85px; height:100%; background-size:contain; background:url(../image/main_white_gradation_layer.png);}

    .index_realtime .realtime_list{float:left; width:85%}
    .index_realtime .realtime_list li{margin-bottom:7px}
    .index_realtime .realtime_list li:after{content:""; visibility:hidden; display:block; height:0; clear:both;}
    .index_realtime .realtime_list li:last-child{margin-bottom:0;}
    .index_realtime .realtime_list .thumbbox{width:100px; height:65px; float:left; background-size:cover; margin-right:10px; padding-bottom:0; position:relative;}

    .index_realtime .realtime_list .rank_info{padding-top:6px; letter-spacing:-0.3px;}
    .index_realtime .realtime_list .rank_info p.thumb_tit{font-size:.8rem; font-weight:500; color: #000; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:flex-start; align-items: center;}
    .index_realtime .realtime_list .rank_info p.thumb_tit span{vertical-align:top; line-height:100%}
    .index_realtime .realtime_list .rank_info p.thumb_tit span.txtico_rank{width:23px; height:15px; line-height:13px; display:inline-block; border-radius:3px; border:1px solid #828a92; color:#fff; text-align:center; background:#a3a9b1; font-size:10px; margin-right:4px; font-weight:600}
    .index_realtime .realtime_list .rank_info p.thumb_info span.pd_point{width:10px; height:16px; background:url(../image/pd_point_star.png) no-repeat 0 center; background-size:10px;}
    .index_realtime .realtime_list .rank_info p.thumb_info span{display:inline-block; font-size:11px; vertical-align:top; float:left}
    .index_realtime .realtime_list .rank_info p.thumb_info span.span_badge{max-width:calc(100% - 150px); height:16px; overflow:hidden;}
    .index_realtime .realtime_list .rank_info p.thumb_info span.point_num{font-size:11px; font-weight:500; color:#000; margin-left:2px; margin-right:4px}
    .index_realtime .realtime_list .rank_info p.thumb_info .span_badge span.newnew_icobadge{margin-right:2px;}
    .index_realtime .realtime_list .rank_info p.thumb_info .span_badge > span{float:left; margin-right:2px}

    .index_realtime .realtime_list .rank_info p.thumb_writer{white-space:nowrap; overflow:hidden; text-overflow: ellipsis; margin-top:4px; font-size:.6875rem; color:#666;}
    .index_realtime .realtime_list .rank_info p.thumb_writer span{vertical-align:middle; display:inline-block;}
    .index_realtime .realtime_list .rank_info p.thumb_writer .tit_thumb_e{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; text-align:left; line-height:12px; height:14px; max-width:50%;}
    .index_realtime .realtime_list .rank_info p.thumb_writer .tit_thumb_a{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; text-align:left; line-height:12px; height:14px; max-width:90%;}
    .index_realtime .realtime_list .rank_info p.thumb_writer .line{width:1px; height:10px; background:#ddd; margin:0 1px 2px 1px; display:inline-block;}
    .index_realtime .realtime_list .rank_info p.thumb_info{margin-top:4px}
    .index_realtime .realtime_list .rank_info p.thumb_tit span.txtico_title{max-width:calc(100% - 56px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align: top; margin-top:-1px}
    .index_realtime .realtime_list .thumbbox .newnew_icobadge{bottom:5px;}

    /* 브랜딩배너영역 */
    .index_fullbnr{margin-top:0; margin-bottom:5px; border-bottom:1px solid #ddd}
    .index_fullbnr img{display:block; width:100%; margin:0 auto; padding:0}

    /* 결제배너영역 */
    .payment_fullbnr{margin:0 auto}
    .payment_fullbnr img {display:block; width:100%; margin:0 auto}

    /* 맞춤키워드_추천장르 */
    .index_contentbox p.tit_main{font-size:15px; line-height:42px; padding:0; color:#000}
    .index_contentbox .contentbox a.like_more{display:block}
    .index_contentbox{width:100%; padding:0 10px; background:#fff; border-bottom:1px solid #ddd; margin-bottom:5px; padding-bottom:20px; margin-top:0}
    .index_contentbox .contentbox{width:100%; margin:0 auto; position:relative;}
    .index_contentbox .contentbox .btn_arrow{display:none}
    .index_contentbox .contentbox .hash_list li{flex-grow:1; width:20%; height:28px; line-height:25px; margin:2px 2px; box-sizing:border-box}
    .index_contentbox .contentbox .hash_list li a{border-radius:40px; background:#fff; font-size:13px}
    @media (max-width:320px){
        .index_contentbox .contentbox .hash_list li a{font-size:12px}
    }
    .index_contentbox .contentbox .comic_list_area ul{padding:0; width:100%; box-sizing: border-box; height:auto; white-space:nowrap; overflow:auto; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
    .index_contentbox .contentbox .comic_list_area ul::-webkit-scrollbar{display: none; /* Chrome, Safari, Opera*/}
    .index_contentbox .contentbox .comic_list_area ul:not(.swiper-container) li{display:inline-block; width:28%; float:none; margin-left:1%; border:none; margin-bottom:0}
    .index_contentbox .contentbox .comic_list_area ul:not(.swiper-container) li:first-child{margin-left:0;}
    .index_contentbox .contentbox .comic_list_area ul.swiper-container li {height:auto; background:#fff; width: 28%; border: 0;}
    .index_contentbox .contentbox .comic_list_area ul li .thumbbox{padding-bottom:100%; background-size:cover; margin-bottom:5px; position:relative;}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info{padding:.4rem 0 0}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area{height:18px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; width:100%}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area .thumb_tit{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-0.6px; display:inline-block; margin-right:0; vertical-align:middle; height:100%}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area > img.badge_up{width:20px; height:13px; min-height:13px; margin-left:2px; margin-top:-1px}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area > img.badge_zzz{width:20px; height:13px; min-height:13px; margin-left:2px; margin-top:-1px}
    .index_contentbox .contentbox .comic_list_area ul li .comic_info .thumb_tit_area .thumb_writer{font-size:11px}
    .index_contentbox .contentbox .comic_list_area ul li span.iconbadge_new.ico_up{margin-top:-1px}

    /* 추천무료배너영역 */
    .index_freebnr{padding:0 10px; background:#fff; margin-bottom:5px; border-bottom:1px solid #ddd; padding-bottom:20px}
    .index_freebnr > p.tit_main{display:block; font-size:1rem; line-height:2.625rem; font-size:15px; color:#000; font-weight:500;}
    .index_freebnr_inner img{display:block; width:100%; margin:0 auto; padding:0}


    /* 이벤트관 */
    .index_contentbox .contentbox .event_list_area ul{padding:0; width:100%; box-sizing: border-box; height:auto; white-space:nowrap; overflow:auto; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
    .index_contentbox .contentbox .event_list_area ul::-webkit-scrollbar{display:none; /* Chrome, Safari, Opera*/}
    .index_contentbox .contentbox .event_list_area ul li{display:inline-block; width:80%; float:none; margin-left:1%}
    .index_contentbox .contentbox .event_list_area ul li:first-child{margin-left:0}
    .index_contentbox .contentbox .event_list_area ul li picture{image-rendering:initial;}

    .floating_banner_m{right:2%; bottom:2%;}

}