/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
#storydetail { font-size: 15px !important;}
#storydetail a{ text-decoration: none;}
#storydetail .story-frame{ /* padding: 25px 28px; */ /*padding: 15px 28px;*/ padding: 15px 15px; }
#storydetail .story_h_title{
    font-size: 22px;
    font-weight: 600;
}

.title-duozone{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}
.title-duozone .title-left,
.title-duozone .title-right{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    height: auto;
}

@media (max-width: 767px){
    #storydetail .container-pages-mobile{ margin-top: 0 !important; }
    #storydetail .mobile-fit{
        padding-left: 0;
        padding-right: 0;
    }
    #storydetail .story-frame{ /*padding: 25px 20px;*/ padding: 25px 10px 10px 10px; }
    #storydetail .story-frame-padding-bottom-0{ padding-bottom: 0;}
}

#storydetail .icon-eye::before{ font-family: "icon_p2"; }

#storydetail .badge-fw{
    height: auto;
    overflow: hidden;
    background: #E56B6B;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 25px;
    margin: 8px 15px 0 15px;
}
#storydetail .badge-fw.badge-fw-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#storydetail .badge-fw.badge-fw-btn > div{
    font-size: 16px;
    font-weight: 500;
}
#storydetail .badge-fw.badge-fw-btn .title{
    font-size: 18px;
}
#storydetail .badge-fw .btn{
    border-radius: 15px;
    width: 100px;
    padding: 3px 5px;
}
#storydetail .badge-fw .rent > i{ display: none; }
@media (max-width: 767px){
    #storydetail .badge-fw{
        margin: 8px 0 0 0;
        border-radius: 0;
    }
}
@media (max-width: 480px){
    #storydetail .badge-fw.badge-fw-btn{
        padding-left: 15%;
        padding-right: 15%;
    }
    #storydetail .badge-fw.badge-fw-btn > div{
        flex: 0 0 calc(100% - 92px);
    }
    #storydetail .badge-fw.badge-fw-btn > div span{
        display: block;
        width: 100%;
    }
    #storydetail .badge-fw.badge-fw-btn .rent{
        display: flex;
        align-items: center;
    }
    #storydetail .badge-fw .rent > i{
        display: inline-flex;
        font-size: 30px;
        padding-right: 5px;
    }
    #storydetail .badge-fw .rent-time > i{ display: none;}
}
@media (max-width: 390px){
    #storydetail .badge-fw.badge-fw-btn{
        padding-left: 8%;
        padding-right: 8%;
    }
}


#storydetail .story-section{}
#storydetail .mobile-aphimg{ display: none; }
#storydetail .story-section .mobile-share{ display: none;}
#storydetail .story-data{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*align-items: center;*/
}
#storydetail .story-data .imgz{
    -ms-flex: 0 0 232px;
    flex: 0 0 232px;
    height: auto;
    position: relative;
}
#storydetail .story-data .book-cover{
    width: 232px;
    height: auto;
    position: relative;
    padding-top: 335px;
    overflow: hidden;
    border-radius: 15px;
}
#storydetail .story-data .book-cover img{
    width: auto;
    min-width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
}
#storydetail .story-data .book-cover .badge{
    position: absolute;
    height: auto;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #E56B6B;
    font-size: 13px !important;
    line-height: 1.2;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 15px 5px 15px;
}


#storydetail .story-data .infoz{
    -ms-flex: 0 0 calc(100% - 232px);
    flex: 0 0 calc(100% - 232px);
    height: auto;
    min-height: 335px;
    align-self: start;
    padding-left: 30px;
    position: relative;
}
#storydetail .infoz .story-name{
    width: 100%;
    height: auto;
    margin-top: 10px;
    font-family: 'promptmedium';
    font-size: 26px;
    line-height: 30px;
}
#storydetail .infoz .story-category-name{ color: #656565; }
#storydetail .infoz .story-category-name:hover{ color: #E5A56B; }
#storydetail .infoz .mobile-categ{ display: none; }
#storydetail .infoz .writer{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}
#storydetail .infoz .writer .writer-img{
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    height: 40px;
    overflow: hidden;
    /*border: solid 1px #707070;*/
    border-radius: 100%;
    position: relative;
}
#storydetail .infoz .writer .writer-img img{
    position: absolute;
    top: 0;
    width: auto;
    min-width: 100%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
}
#storydetail .infoz .writer .writer-name{
    -ms-flex: 0 0 calc(100% - 40px);
    flex: 0 0 calc(100% - 40px);
    height: auto;
    padding-left: 13px;
}
#storydetail .infoz .sort-info{
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Sarabun', sans-serif;
    font-weight: 300;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
    font-size: 16px;
    line-height: 26px;
}

#storydetail .optionz{
    position: absolute;
    bottom: 0;
}
#storydetail .optionz .story-stat{ margin-bottom: 0;}
#storydetail .optionz .story-stat > li{
    background: #ffffff;
    border: solid 1px #EAEAEA;
    border-radius: 40px;
    font-size: 18px;
    line-height: 20px;
    padding: 10px 15px;
    margin-right: 10px;
}
#storydetail .optionz .story-stat > li:last-child{ margin-right: 0;}
#storydetail .optionz .story-stat .rating{
    color: #FDC413;
    text-shadow: 1px 0px 1px rgba(177, 146, 112, 1);
}
#storydetail .optionz .story-stat .rating-text{ color: #FFAA0A;}


#storydetail .optionz .story-actionz{ margin-top: 15px; }
#storydetail .optionz .story-actionz li:nth-child(2){display: none;}
#storydetail .optionz .story-actionz .btn{
    font-size: 17px;
    line-height: 20px;
    margin-right: 5px;
}
#storydetail .optionz .story-actionz .btn > .icon-svg{
    display: inline-block;
    width: 18px;
    height: 18px;
}
#storydetail .optionz .story-actionz .btn > .icon-svg svg{ width: 100%; height: 100%; vertical-align: middle; }
#storydetail .optionz .story-actionz .story-share{ position: relative;}
#storydetail .optionz .story-actionz .story-share .dropdown-menu{ top:44px;}

#storydetail .story-section .mobile-writer{ display: none;}
#storydetail .list-taq{
    margin-bottom: 0;
    margin-top: 20px;
}
#storydetail .list-taq .title .icon-svg{
    width: 20px;
    height: 20px;
}
#storydetail .list-taq > li a{
    display: block;
    background: #ffffff;
    padding: 5px 15px;
    font-size: 14px;
    line-height: 20px;
    border: solid 1px #D8D8D8;
    border-radius: 50px;
    color: #000000;
}
#storydetail .list-taq > li{ padding-right: 0; margin-bottom: 5px;}
#storydetail .list-taq > li:nth-child(1){ padding-right: 5px;}


#storydetail .story-index{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media (min-width:768px){
    #storydetail .infoz .sort-info{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 991px){
    #storydetail .optionz .story-actionz {
        margin-top: 10px;
    }
    #storydetail .optionz .story-stat > li{
        border-radius: 40px;
        font-size: 16px;
        line-height: 20px;
        padding: 10px 15px;
        margin-right: 10px;
    }
    #storydetail .optionz .story-actionz .btn{
        /*font-size: 16px;*/
        line-height: 20px;
        margin-right: 0;
        min-width: 120px;
    }
    #storydetail .optionz .story-actionz .btn > .icon-svg{
        display: inline-block;
        width: 16px;
        height: 16px;
    }
    /*
    #storydetail .optionz .story-actionz .btn-like .icon-svg{
        width: 20px;
        height: 16px;
    }
    */
    #storydetail .optionz .story-actionz li:nth-child(2) .btn-bradius{ width: 180px; }
}
@media (max-width: 767px){
    #storydetail .infoz .sort-info{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #storydetail .infoz .story-category-name{ display: none;}

    #storydetail .story-section .mobile-share{
        display: block;
        position: absolute;
        right: 20px;
    }
    #storydetail .story-section .mobile-share .btn{
        width: 37px;
        height: 37px;
        padding: 0;
        border-radius: 100%;
    }
    #storydetail .story-section .mobile-share .btn .icon-svg{
        width: 16px;
        height: 18px;
        margin-left: -3px;
    }
    #storydetail .story-section .mobile-share .btn .icon-svg svg{
        vertical-align: top;
    }
    #storydetail .story-section .mobile-share .dropdown-menu{
        left: auto;
        right: 0;
    }

    #storydetail .story-frame{
        position: relative;
        overflow: hidden;
    }
    #storydetail .mobile-aphimg{
        display: block;
        position: absolute;
        margin: -25px -20px;
        width: 100%;
        opacity: 6%;
    }

    #storydetail .story-data .imgz{
        -ms-flex: 0 0 172px;
        flex: 0 0 172px;
        height: auto;
        position: relative;
        margin: auto;
    }
    #storydetail .story-data .infoz{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        height: auto;
        min-height: 335px;
        align-self: start;
        padding-left:0;
        position: relative;
    }
    
    #storydetail .infoz .story-name{
        width: 300px;
        height: auto;
        margin: auto;
        margin-top: 10px;
        font-family: 'promptmedium';
        font-size: 20px;
        line-height: 24px;
        text-align: center;
    }
    #storydetail .infoz .mobile-categ{
        display: block;
        width: auto;
        /* max-width: 170px; */
        max-width: 220px;
        text-align: center;
        z-index: 3;
        background: #ffffff;
        padding: 5px 10px;
        font-size: 14px;
        line-height: 20px;
        border: solid 1px #D8D8D8;
        border-radius: 50px;
        bottom: -15px;
        margin: 15px auto 0 auto;
        color: #383838;
    }
    #storydetail .infoz .writer{ display: none; }
    #storydetail .optionz{ position: relative; }
    #storydetail .optionz .story-stat{
        margin: 15px auto 0 auto;
        text-align: center;
    }
    #storydetail .optionz .story-stat > li{
        background: #ffffff;
        border-radius: 40px;
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        padding: 10px 15px;
        margin-right: 0;
    }
    #storydetail .optionz .story-actionz{ text-align: center;}
    #storydetail .optionz .story-actionz li:nth-child(1){display: none;}
    #storydetail .optionz .story-actionz li:nth-child(2){display: block;}
    #storydetail .list-taq{ margin-top: 20px; }
    /*#storydetail .list-taq .title{ display: none;}*/

    #storydetail .story-section .mobile-writer{ display: none;}
    /*
    #storydetail .story-section .mobile-writer{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 20px;
    }
    #storydetail .story-section .mobile-writer .writer-img{
        -ms-flex: 0 0 46px;
        flex: 0 0 46px;
        height: 46px;
        overflow: hidden;
        border-radius: 100%;
        position: relative;
    }
    #storydetail .story-section .mobile-writer .writer-img img{
        position: absolute;
        top: 0;
        width: auto;
        min-width: 100%;
        height: 100%;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    #storydetail .story-section .mobile-writer .writer-name{
        -ms-flex: 0 0 calc(100% - 132px);
        flex: 0 0 calc(100% - 132px);
        height: auto;
        padding-left: 13px;
    }
    #storydetail .story-section .mobile-writer .writer-name > div:nth-child(1){
        font-size: 11px;
        line-height: 13px;
        color: #A8A8A8;
        margin-bottom: 2px;
    }
    #storydetail .story-section .mobile-writer .writer-name > div:nth-child(2) a{
        display: block;
        font-family: 'promptsemibold';
        line-height: 17px;
        color: #383838;
    }
    #storydetail .story-section .mobile-writer .writer-name > div:nth-child(3) > ul{
        margin-bottom: 0;
        font-size: 11px;
        padding-left: 5px;
    }
    #storydetail .story-section .mobile-writer .writer-name > div:nth-child(3) > ul > li{ padding: 0;}
    #storydetail .story-section .mobile-writer .writer-btn{
        -ms-flex: 0 0 86px;
        flex: 0 0 86px;
        height: auto;
        overflow: hidden;
    }
    */
}
@media (max-width: 600px){
    #storydetail .mobile-aphimg{ height: 675px; }
}
@media (max-width: 480px){
    #storydetail .optionz .story-actionz li:nth-child(2) .btn-bradius{ width: 40.30%; }
}
@media (max-width: 432px){
    #storydetail .mobile-aphimg{
        display: block;
        position: absolute;
        margin: -25px -20px;
        width: auto;
        height: 675px;
        opacity: 6%;
    }
    #storydetail .optionz .story-actionz li:nth-child(2) .btn-bradius{ /* width: 40.30%; */ width: 48%; min-width: auto; }
}
@media (max-width: 350px){
    #storydetail .mobile-aphimg {
        height: 665px;
    }
    #storydetail .story-section .mobile-writer { margin-top: 30px;}
    #storydetail .story-data .book-cover{
        width: 200px;
        padding-top: 289px;
    }
    #storydetail .optionz .story-stat > li {
        padding: 10px 10px;
    }
}


/*
INTRO
*/
#storydetail .story-intro{ margin-top: 10px; }
#storydetail .story-intro .text article{
    font-family: 'Sarabun', sans-serif;
    font-weight: 300;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
    font-size: 16px;
    line-height: 26px;
    /*text-indent: 40px;*/
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    line-clamp: 3;
}


/*
E BOOK RECOM
*
#storydetail .story-ebook-recom{ }
#storydetail .ebook-recomlist{ margin-top: 5px; margin-bottom: 0;}
#storydetail .book-scroll.ebook-recomlist{ overflow: visible;}
#storydetail .book-scroll.ebook-recomlist li{ width: 160px; }
#storydetail .book-scroll.ebook-recomlist li:hover{
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.46);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.46);
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.46);
}
#storydetail .book-nav-scroller .nav-scroller-btn {
    top: 50%;
}

#storydetail .ebook-recomlist .book-item .bookname{
    font-size: 17px;
    margin-top: 5px;
    white-space: nowrap;
    line-height: 24px;
}
#storydetail .ebook-recomlist .book-item .price{ color: #ffffff;}
*/

.book-scroll .book-item .img-responsive{
	position: relative;
	overflow: hidden;
	padding-top:144%;
}
.book-scroll .book-item .img-responsive img{
	width: auto;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


/*
CHAPTER
*/
#storydetail .story-chapter{ }
#storydetail .story-chapter .lastupdate{
    margin-left: 20px;
    color: #A8A8A8;
}
#storydetail .story-chapter .sort{
    width: 40px;
    height: 40px;
    background: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;

}
#storydetail .story-chapter .sort .icon-svg{
    width: 30px;
    height: 30px;
}
#storydetail .story-chapter .sort:hover .icon-svg svg{
    fill: #E56B6B;
}


#storydetail .story-chapter .story-chapter-z{ margin-top: 20px;}
#storydetail .story-chapter .panel-body{
    padding: 0;
    background: #ffffff;
}
#storydetail .story-chapter .panel {
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: -1px;
}

#storydetail .story-chapter .panel-group .panel-heading + .panel-collapse > .list-group,
#storydetail .story-chapter .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}
#storydetail .story-chapter .panel-heading{
    background: #F4F4F4;
    border: solid 1px #F4F4F4;
    border-radius: 5px;
}
#storydetail .story-chapter .panel-heading.panel-heading-on{
    background: #ffffff;
    border: solid 1px #D6D6D6;
    border-radius: 5px;
}
#storydetail .story-chapter .panel-title .titlerang{
    display: inline-block;
    width: 70px;
    color: #585655;
    font-weight: 600;
}
#storydetail .story-chapter .panel-title .indicator{ line-height: 18px;}



#storydetail .story-chapter .chapter-list{ margin-bottom: 0; }
#storydetail .story-chapter .chapter-list .mobile{ display: none; }
#storydetail .story-chapter .chapter-list > li >a{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: solid 1px #EFEFEF !important;
    padding: 15px 30px;
    color: #383833;
}
#storydetail .story-chapter .chapter-list .capter-col{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: auto;
    overflow: hidden;
}
#storydetail .story-chapter .chapter-list .capter-col:nth-child(1){
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
}
#storydetail .story-chapter .chapter-list .capter-col:nth-child(2){
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
}
#storydetail .story-chapter .chapter-list .capter-col:nth-child(3){
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
}

#storydetail .story-chapter .chapter-list .capter-col .chapter{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    align-items: center;
    font-weight: 600;
}
#storydetail .story-chapter .chapter-list .chapter .num{
    flex: 0 0 35px;
    color: #E5A56B;
}
#storydetail .story-chapter .chapter-list .chapter .name{
    flex: 0 0 calc(100% - 35px);
}
#storydetail .story-chapter .chapter-list .chapter .name span{
    display: inline-block;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 16px;
}
#storydetail .story-chapter .chapter-list .chapter .name i{
    display: inline-block;
    width: 20px;
    height: 14px;
    background: url('../../images/icon/svg/coupon-discount.svg');
    margin-left: 10px;
}

#storydetail .story-chapter .chapter-list .list-stat{
    color:#8E8C8C;
    font-size: 13px;
}
#storydetail .story-chapter .chapter-list .list-stat .icon-chapter{
    display: inline-flex;
    width: 12px;
    height: 12px;
    background-size: 12px;
}
#storydetail .story-chapter .chapter-list .list-stat .icon-chapter.icon-font-chapter{ background: url('../../images/icon/svg/text-2.svg') no-repeat center;}
#storydetail .story-chapter .chapter-list .list-stat .icon-chapter.icon-eye-chapter{ background: url('../../images/icon/svg/eye2.svg') no-repeat center;}
#storydetail .story-chapter .chapter-list .list-stat .icon-chapter.icon-comment-chapter{ background: url('../../images/icon/svg/comment2.svg') no-repeat center;}

#storydetail .story-chapter .chapter-list .capter-col .icon-svg{
    width: 20px;
    height: 20px;
}
#storydetail .story-chapter .chapter-list .capter-col .itemuse.ticket .icon-svg{ width: 44px; }

#storydetail .story-chapter .chapter-list .capter-col:nth-child(3) > ul > li{ font-weight: 600;}

#storydetail .story-chapter .chapter-list .readed .capter-col:first-child > div,
#storydetail .story-chapter .chapter-list .readed .capter-col:last-child{ color: #A5A5A5; }
#storydetail .story-chapter .chapter-list .readed .capter-col:last-child{ display: none;}
#storydetail .story-chapter .chapter-list .bought .capter-col:last-child{ display: none;}


@media (max-width: 720px){
    #storydetail .story-chapter .story_h .lastupdate{
        margin-left: 5px;
        margin-top: 2px;
    }

    #storydetail .story-chapter .story-index .story-index-col .btn-buy-all{
        font-size: 16px;
        padding: 8px 15px;
    }
    #storydetail .story-chapter .mobile{display: block !important;}
    #storydetail .story-chapter .chapter-list .capter-col:nth-child(1) {
        -ms-flex: 0 0 calc(100% - 150px);
        flex: 0 0 calc(100% - 150px);
    }
    #storydetail .story-chapter .capter-col:nth-child(2){ display: none;}
    #storydetail .story-chapter .chapter-list .capter-col:nth-child(3) {
        -ms-flex: 0 0 150px;
        flex: 0 0 150px;
    }

    #storydetail .story-chapter .chapter-list .list-stat{
        font-size: 12px;
    }
}
@media (max-width: 520px){
    #storydetail .story-chapter .story-index .story-index-col:nth-child(1){
        flex: 0 0 calc(100% - 170px);
    }
    #storydetail .story-chapter .story-index .story-index-col:nth-child(2){
        flex: 0 0 160px;
    }
    #storydetail .story-chapter .story_h .lastupdate{
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 480px){
    #storydetail .story-chapter .chapter-list > li > a{ padding: 12px 10px; }
    #storydetail .story-chapter .chapter-list .capter-col:nth-child(1) {
        -ms-flex: 0 0 calc(100% - 60px);
        flex: 0 0 calc(100% - 60px);
    }
    #storydetail .story-chapter .chapter-list .capter-col:nth-child(3){
        -ms-flex: 0 0 60px;
        flex: 0 0 60px;
    }
    #storydetail .story-chapter .chapter-list .capter-col:nth-child(3) ul{
        float: left !important;
        text-align: left;
    }

    #storydetail .story-chapter .chapter-list .capter-col .chapter{
        display: block;
    }
}
@media (max-width: 420px){
    #storydetail .story-chapter .story-index .story-index-col:nth-child(1) .lastupdate{
        display: none;
    }
    #storydetail .story-chapter .chapter-list .chapter .name i{
        width: 17px;
        height: 12px;
        background-repeat: no-repeat;
        margin-left: 3px;
    }
    #storydetail .story-chapter .chapter-list .list-stat li:nth-child(4){ display: none;}
    #storydetail .story-chapter .chapter-list .capter-col:nth-child(3) .itemuse{ padding-right: 0;}
}


/*
BANNER
*/
#storydetail .story-banner{
    position: relative;
    width: 100%;
    height: 196px;
    overflow: hidden;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,186,186,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,186,186,1) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,186,186,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#fababa",GradientType=1);
}
#storydetail .story-banner .img{
    position: absolute;
    top: -10px;
    left: 15%;
    width: 275px;
}
#storydetail .story-banner .img img{ width: 100%;}
#storydetail .story-banner .textz{
    position: absolute;
    left: calc(15% + 295px);
    top: 59px;
    width: calc( 100% - 15% - 295px);
}
#storydetail .story-banner .textz > div:first-child{
    font-family: 'promptmedium';
}
#storydetail .story-banner .textz > div:first-child > div:first-child{
    font-size: 32px;
    line-height: 36px;
}
#storydetail .story-banner .textz > div:first-child > div:nth-child(2){
    font-size: 24px;
    color:#E85D1F;
    margin-top: 10px;
}
#storydetail .story-banner .textz > div:nth-child(2){
    margin-left: 10%;
}
#storydetail .story-banner .textz > div:nth-child(2) .btn{
    background: #CB384E;
    color: #ffffff;
    margin-top: 10px;
    font-size: 18px;
}

@media (max-width: 991px){
    #storydetail .story-banner .img{ left: 10%;}
    #storydetail .story-banner .textz{
        position: absolute;
        left: calc(10% + 295px);
        top: 20%;
        width: calc( 100% - 10% - 295px);
    }
    #storydetail .story-banner .textz > div:first-child{ float: none;}
    #storydetail .story-banner .textz > div:nth-child(2){
        margin-top: 10px;
        padding-left:0;
        float: none;
    }
}
@media (max-width: 680px){
    #storydetail .story-banner .img{ left: 5%;}
    #storydetail .story-banner .textz{
        position: absolute;
        left: calc(5% + 295px);
        top: 20%;
        width: calc( 100% - 5% - 295px);
    }
    #storydetail .story-banner .textz > div:first-child{ float: none;}
}
@media (max-width: 620px){
    #storydetail .story-banner .img{
        width: 50%;
        left:0;
    }
    #storydetail .story-banner .textz{
        position: absolute;
        left: 50%;
        top: 20%;
        width:50%;
        text-align: center;
    }
}
@media (max-width: 550px){
    #storydetail .story-banner .img{
        width: 200px;
        left:0;
        top: 0;
    }
    #storydetail .story-banner .textz{
        position: absolute;
        left: 180px;
        top: 25%;
        width: calc(100% - 200px);
    }
    #storydetail .story-banner .textz > div:first-child > div:first-child{
        font-size: 26px;
        line-height: 30px;
    }
    #storydetail .story-banner .textz > div:first-child > div:nth-child(2){
        font-size: 22px;
        color:#E85D1F;
        margin-top: 5px;
    }
}
@media (max-width: 400px){
    #storydetail .story-banner{
        height: 150px;
    }
    #storydetail .story-banner .img{
        width: 180px;
        left:-20px;
        top: 0;
    }
    #storydetail .story-banner .textz{
        position: absolute;
        left: 150px;
        top: 10%;
        width: calc(100% - 160px);
    }
    #storydetail .story-banner .textz > div:first-child > div:first-child{
        font-size: 20px;
        line-height: 30px;
    }
    #storydetail .story-banner .textz > div:first-child > div:nth-child(2){
        font-size: 18px;
        color:#E85D1F;
        margin-top: 5px;
    }
}



/*
BOOK SCROLLING
*/
#storydetail .book-scroll{ margin-top:20px; padding: 0 0 10px 0;}
#storydetail .book-scroll li{
    display: inline-block;
    width: 150px;
    height: auto;
    overflow: hidden;
    margin: 0 5px;
}
#storydetail .book-scroll li:first-child{ margin-left: 0;}

/*
@media (max-width: 767px) { #Home .book-scroll li{ width: 20vw; } }
@media (max-width: 550px) { #Home .book-scroll li{ width: 25vw; }  }
@media (max-width: 425px) { #Home .book-scroll li{ width: 33.3333vw; }  }
*/


/*######################################################
MODAL
######################################################*/
.storydetail_modal .modal-dialog-centered{ top: 10vh; }
.storydetail_modal .modal-header { position: relative;}
.storydetail_modal .modal-header .title{ color:#383838; font-size: 18px;}
.storydetail_modal .modal-header .title h3{
    font-family: 'promptmedium';
    font-size: 20px;
    margin: 0 0 5px 0;
}
.storydetail_modal .modal-header .close-default{
    top:35px;
    right: 0;
}

/*
EncourageWriter
*/
.EncourageWriter .Encourage-list{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 0;
    margin-left: -15px;
    margin-right: -15px;
}
.EncourageWriter .Encourage-list > li{
    /*
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    */
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    height: auto;
    padding: 5px;
}
.EncourageWriter .Encourage-list > li .item{
    width: 100%;
    /*height: 120px;*/
    height: 150px;
    border:solid 1px #DDDDDD;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.EncourageWriter .Encourage-list > li .item label{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    font-weight:lighter;
}
.EncourageWriter .Encourage-list > li .item [type=radio]{ position: absolute; z-index: 2; opacity: 0;}
.EncourageWriter .Encourage-list > li .item [type=radio]:checked + label{ background: #FFEED3; }

.EncourageWriter .Encourage-list > li .item label .img{
    /*width: 81px;*/
    width: 90px;
    margin: auto;
    height: auto;
    min-height: 90px;
}
.EncourageWriter .Encourage-list > li .item label .img img{ width: 100%;}
.EncourageWriter .Encourage-list > li .item label .name{
    width: 100%;
    height: auto;
    font-size: 14px;
    line-height: 20px;
    color: #939393;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.EncourageWriter .Encourage-list > li .item label .use_item{
    text-align: center;
    margin-top: 2px;
}
.EncourageWriter .Encourage-list > li .item label .use_item .icon-svg{
    width: 16px;
    height: 16px;
}
.EncourageWriter .Encourage-list > li .item label .use_item .icon-svg svg{
    line-height: 16px;
    vertical-align: middle;
}
.EncourageWriter .Encourage-list > li .item label .inp{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.EncourageWriter .Encourage-list > li .item label .inp input[type="number"]::-webkit-outer-spin-button,
.EncourageWriter .Encourage-list > li .item label .inp input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.EncourageWriter .Encourage-list > li .item label .inp input[type="number"]{
    width: 100%;
    border: solid 1px #A8A8A8;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    outline: none;
    text-align: center;
    margin-top: 2px;
}
.EncourageWriter .textarea{
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 10px;
    position: relative;
}
.EncourageWriter .textarea textarea{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 10px;
    padding-bottom: 20px;
    font-size: 16px;
    outline: none;
    border: solid 1px #DDDDDD;
    border-radius: 5px;
}
.EncourageWriter .textarea #charNum{
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 12px;
    color: #C9C9C9;
}
.EncourageWriter .bottom_f{
    height: auto;
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;
}
.EncourageWriter .bottom_f .checkbox label::after{ top: 1px; }
.EncourageWriter .bottom_f .btn{ min-width: 100px;}

@media (max-width: 620px){
    #modal_EncourageWriter .modal-header .title{
        max-width: 70%;
        margin: auto;
    }
    #modal_EncourageWriter .modal-header .title span{
        display: block;
        line-height: 26px;
    }
    .EncourageWriter .Encourage-list > li{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        height: auto;
        padding: 5px;
    }
}
@media (max-width: 580px){
    .EncourageWriter .Encourage-list > li{
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
        height: auto;
        padding: 5px;
    }
}
@media (max-width: 400px){
    .EncourageWriter .Encourage-list > li{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        height: auto;
        padding: 5px;
    }
}

/*
EncourageWriter-step2
*/
.EncourageWriter-step2{ font-size: 14px;}
.EncourageWriter-step2 .showEncourage{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    border: solid 1px #E0E0E0;
    border-radius: 5px;
    margin-bottom: 10px;
}
.EncourageWriter-step2 .showEncourage .SE-col{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    padding: 10px;
}
.EncourageWriter-step2 .showEncourage .SE-col:nth-child(1){ text-align: right;}
.EncourageWriter-step2 .showEncourage .SE-col:nth-child(1) img{ width: 110px;}
.EncourageWriter-step2 .showEncourage .name{ font-size: 18px;}
.EncourageWriter-step2 .showEncourage .use_item{ font-size: 18px;}
.EncourageWriter-step2 .showEncourage .use_item .icon-svg{ width: 25px; height: 25px; }
@media (max-width: 620px){
    #modal_EncourageWriter2 .modal-header .title{
        max-width: 70%;
        margin: auto;
    }
    #modal_EncourageWriter2 .modal-header .title span{
        display: block;
        line-height: 26px;
    }
}
@media (max-width: 400px){
    .EncourageWriter-step2 .showEncourage .SE-col {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding: 10px;
    }
}

/*
EncourageWriter-step3
*/
.EncourageWriter-step3{ font-size: 16px; }
.EncourageWriter-step3 .havegem{
    width: 100%;
    height: auto;
    text-align: center;
    background: #FFFBEB;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.EncourageWriter-step3 .havegem > ul{ margin-bottom: 0;}
.EncourageWriter-step3 .havegem > ul li:nth-child(2){
    padding-left: 0;
    padding-right: 0;
}


/*
list-buyall
*/
/*
.BuyAll .list-buyall{ margin-bottom: 0;}
.BuyAll .list-buyall > li{
    border-bottom: solid 1px #A8A8A8;
}
.BuyAll .list-buyall .checkbox label::after{ top: 1px; }
.BuyAll .list-buyall .checkbox label{
    width: 100%;
    font-size: 16px;
}
.BuyAll .list-buyall .checkbox label .price span:nth-child(2){
    display: inline-block;
    min-width: 20px;
}
.BuyAll .checkbox-chkall label{ font-size: 16px;}
.BuyAll .checkbox-chkall label::after{ top: 1px; }
.BuyAll .btn > ul{ margin-bottom: 0;}
.BuyAll .btn > ul > li{ padding-right: 0;}
*/

.story_detail_buyall_modal{
    width: 100%;
    height: 100%;
    z-index: 1502;
}
.story_detail_buyall_modal .modal-dialog{
    overflow: hidden;
    border-radius: 10px;
}


.story_detail_buyall_modal .modal-header{
    border-bottom: solid 1px #DFDFDF;
    padding-bottom: 10px;
}
.story_detail_buyall_modal .modal-header .close-default{
    margin-top: -10px !important;
    margin-right: 10px;
}
.story_detail_buyall_modal .info{
    display: flex;
    flex-wrap: wrap;
    align-items: top;
}
.story_detail_buyall_modal .info .cover{
    width: 50px;
    border-radius: 4px;
    overflow: hidden;
}
.story_detail_buyall_modal .info .cover img{ width: 100%;}
.story_detail_buyall_modal .info .desc{
    padding-left: 15px;
}
.story_detail_buyall_modal .info .desc div:nth-child(1){
    font-size: 18px;
    font-weight: 600;
}
.story_detail_buyall_modal .info .desc div:nth-child(2){
    color: #A5A5A5;
}

.story_detail_buyall_modal .modal-body{
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    margin-top: 15px;
}
.story_detail_buyall_modal .badge-discount{
    background: #E56B6B;
    color: #ffffff;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px;
}
.story_detail_buyall_modal .badge-discount .badge-icon{
    width: 24px;
    height: 24px;
}
.story_detail_buyall_modal .badge-discount .badge-icon svg{
    width: 24px;
    height: 24px;
}
.story_detail_buyall_modal .badge-discount .badge-text{
    padding-left: 10px;
    font-size: 16px;
}

.story_detail_buyall_modal .list-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: solid 1px #DFDFDF;
}
.story_detail_buyall_modal .list-header label{
    font-weight: 500;
}


.story_detail_buyall_modal .list-zone{
    max-height: 300px;
    overflow-y: scroll;
}
.story_detail_buyall_modal .list-buyall > li{ padding: 3px 0;}
.story_detail_buyall_modal .list-buyall [class*="icheck-material"] > label{
    width: 100%;
    display: block !important;
}
.story_detail_buyall_modal .list-buyall [class*="icheck-material"] > input:first-child{
    position: relative !important;
    margin-top: -22px;
    z-index: 2;
}


.story_detail_buyall_modal .list-buyall .list-buyall-label{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 500;
}
.story_detail_buyall_modal .list-buyall .list-buyall-label .num{
    width: 30px;
    text-align: center;
    color: #E5A56B;
}
.story_detail_buyall_modal .list-buyall .list-buyall-label .name{
    width: calc(100% - 90px);
    flex: 1 0 calc(100% - 90px);

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 5px;

    font-family: 'Sarabun', sans-serif;
}
.story_detail_buyall_modal .list-buyall .list-buyall-label .price{
    width: 60px;
}
.story_detail_buyall_modal .list-buyall .list-buyall-label .price .icon-svg{
    width: 20px;
    height: 20px;
}
.story_detail_buyall_modal .list-buyall .list-buyall-label .price span:nth-child(2){
    padding-left: 5px;
    color: #E05E59;
}

.story_detail_buyall_modal .form-footer{
    border-top: none;
    background: #F3F4F6;
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0 0px 10px 10px;
    padding: 15px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.story_detail_buyall_modal .form-footer .footer-info .total{
    font-size: 18px;
    font-weight: 600;
}
.story_detail_buyall_modal .form-footer .footer-info .discount{
    font-size: 14px;
    font-weight: 600;
    color: #F53434;
}
.story_detail_buyall_modal .form-footer .btn{
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 10px;
}
.story_detail_buyall_modal .form-footer .btn .icon-svg {
    width: 26px;
    height: 26px;
}
@media (max-width: 350px){
    .story_detail_buyall_modal .form-footer .btn{
        font-size: 18px;
        padding: 10px 10px;
        border-radius: 10px;
    }
}



/*###########################
story-coupon
###########################*/
#storydetail .story-coupon .story-coupon-item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: solid 1px #D1D1D1;
    border-radius: 10px;
    padding: 10px 12px;
}
#storydetail .story-coupon .story-coupon-item .coupon-head{
    flex: 0 0 60px;
    background: #E56B6B;
    border-radius: 5px;
}
#storydetail .story-coupon .story-coupon-item .coupon-head img{ width: 100%;}
#storydetail .story-coupon .story-coupon-item .coupon-body{
    flex: 0 0 calc(100% - 60px);
    padding-left: 15px;
    color: #A5A5A5;
}
#storydetail .story-coupon .story-coupon-item .coupon-body .title{
    color: #E56B6B;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 3px;
}
@media (max-width: 640px){
    #storydetail .story-coupon{ margin-bottom: 0;}
    #storydetail .story-coupon .story-coupon-item .coupon-head{
        flex: 0 0 36px;
    }
    #storydetail .story-coupon .story-coupon-item .coupon-body .title{
        font-size: 16px;
        margin-bottom: 0;
    }
    #storydetail .story-coupon .story-coupon-item .coupon-body .exp{
        font-size: 12px;
        line-height: 1.2;
    }
}

/*###########################
about-writer
###########################*/
#storydetail .about-writer{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
}
#storydetail .about-writer .col:nth-child(1){
    flex: 0 0 calc(100% - 185px);
}
#storydetail .about-writer .col:nth-child(2) .btn{
    width: 90px;
}

#storydetail .about-writer .info{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#storydetail .about-writer .info .avatar{
    flex: 0 0 100px;
}
#storydetail .about-writer .info .avatar .img{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 100%;
}
#storydetail .about-writer .info .avatar .img img{
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#storydetail .about-writer .info .detail{
    flex: 0 0 calc(100% - 100px);
    padding-left: 15px;
}
#storydetail .about-writer .info .detail > div:nth-child(1){
    font-size: 20px;
    font-weight: 500;
    color: #E5A56B;
}
#storydetail .about-writer .info .detail > div:nth-child(2){
    font-size: 14px;
    color: #868686;
}

@media (max-width: 600px){
    #storydetail .about-writer .info .avatar {
        flex: 0 0 50px;
    }
    #storydetail .about-writer .info .detail{
        flex: 0 0 calc(100% - 50px);
        padding-left: 10px;
    }
    #storydetail .about-writer .info .detail > div:nth-child(1){
        font-size: 16px;
    }
    #storydetail .about-writer .col:nth-child(1){
        flex: 0 0 calc(100% - 190px);
    }
    #storydetail .about-writer .col:nth-child(2){
        flex: 0 0 190px;
    }
    
}
@media (max-width: 480px){
    #storydetail .about-writer .info .avatar {
        flex: 0 0 40px;
    }
    #storydetail .about-writer .col:nth-child(1){
        flex: 0 0 100%;
    }
    #storydetail .about-writer .col:nth-child(2){
        flex: 0 0 100%;
        margin-top: 10px;
    }
    #storydetail .about-writer .col:nth-child(2) .btn{ width: calc(50% - 5px);}
    #storydetail .about-writer .col:nth-child(2) .btn:nth-child(1){
        margin-bottom:0;
    }
}


/* .story-review */
#storydetail .story-review{ padding: 15px 15px; }
@media (max-width: 767px) {
    #storydetail .story-review{ padding: 25px 10px; }
}