.book-list{
    width:90%;
    height:300px;
    margin:0 auto;
    overflow: hidden;
    display:inline-block;
}

.sp-font0{
    font-size:0px;
}

#m-event-ul{
   display:none; 
}



.left-right-btn{
    width:5%;
    height:180px;
    display:inline-block;
    vertical-align: top;
}



.left-right-btn .lrbtn{
    max-width:25.3px;
    max-height:42.6px;
    position: absolute;
    top:calc(50% - 21.3px);
    cursor: pointer;
}




.lrbtn img{
    width:100%;
    height:100%;
}

.lrbtn.hd{
    display:none;
}

.lrbtn.left{
    left:calc(35% - 12.65px);
}

.lrbtn.right{
    right:calc(35% - 12.65px);
}



.bklist-ul{
    white-space: nowrap;
    top:0;
    left:0;
    position: absolute;
}

.bklist-ul li:last-child{
    margin-right:0px;
}


.bookdt{
    position:relative;
}

.bookicon{
    overflow: hidden;
    width:max-content;
}

.booktitle{
    position:absolute;
    width:100%;
    word-wrap: break-word;
    /*font-size:13px;*/
    white-space: normal;
}




.hd{
    display:none;
}

.detail-blk{
    max-height: 1500px;
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    border-top: 1px solid #fff;
    padding: 10px 0 40px 0;
    transition: opacity 0s linear 0.5s,
                visibility 0s linear 0.5s,
                max-height 0s linear 0.5s,
                padding-top 0s linear 0.5s,
                border-top 0s linear 0.5s,
                padding-bottom 0s linear 0.5s;
}

.detail-blk.detail-hd{
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    padding:0px;
    border-top:0px solid #fff;
    transition: opacity 0s linear 0.5s,
                visibility 0s linear 0.5s,
                max-height 0s linear 0.5s,
                border-top 0s linear 0.5s,
                padding-top 0s linear 0.5s,
                padding-bottom 0s linear 0.5s;
}

.detail-blk > .detail > tbody > tr{
    opacity: 1;
    transition: opacity 0.3s linear 0.3s;
}

.detail-blk.detail-hd > .detail > tbody > tr{
    opacity: 0;
    transition: opacity 0.3s linear;
}



/*dropdown-zone*/
.dropdown-zone.active ul{
    z-index: 10000;
}

    
/*event detail*/
.event-row{
    z-index:12;
}


.event-detail{
    max-height: 1500px;
    z-index: 12;
    overflow: hidden;
    transition: max-height 1s linear 0.5s;
}

body.evt-dt-hd .event-detail{
    max-height: 0px;
    transition: max-height 0.8s linear;
}

.event-detail .btn-gi-circle-remove{
    left:calc(100% - 70px);
    top:14.5px;
    position:absolute;
}
.detail-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    visibility: visible;
    opacity: 0.7;
    background: #000;
    z-index:11;
}


body.evt-dt-hd .detail-bg{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s linear,
                visibility 0s linear 0.5s;
}


.detail th a { text-decoration:underline; color:#fff; transition: all 0.3s ease-out;}
.detail th a:hover { text-decoration:underline; color:#99cc33;}


body.evt-dt-hd .event-detail .btn-gi-circle-remove{
}

.notication{
    width:100%;
    background: #f47920;
    color: #fff;
    /*font-weight: bold;*/
    z-index: 2;
    overflow: hidden;
    max-height:4000px;
    transition: max-height 0.4s linear;
}

.notication.close{
    /*position:absolute;*/
    max-height:0px;
    
}

.notication > .n-block{
    padding: 20px;
}

.n-block > .n-title{
    text-transform: uppercase;
    margin: 0 calc(5% + 20px);
    text-align: center;
	line-height: 1.5em;
}



.n-block > .n-content{
    max-width:850px;
    margin: 0 auto;
    text-align: left;
}

.n-block > .n-close{
    top:20px;
    right:calc(10% - 30px);
    width:15px;
    height:15px;
    min-width:30px;
    position:absolute;
    cursor: pointer;
    z-index:2;
}

.n-close > img{
    width:100%;
    height:100%;
}

#chk-mobile{
    display:block;
}


@media only screen and (max-width : 1024px){
    
    #event-ul{
       display:none;
    }
    #m-event-ul{
       display:block; 
    }
    
}


@media only screen and (max-device-width : 1024px){
    #chk-mobile{
        display:none;
    }
    .left-right-btn .lrbtn{
        opacity: 0;
        visibility: hidden;
    }
    .bklist-ul{
        width:-webkit-max-content;
        -webkit-overflow-scrolling: touch;
    }
    
}






@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
    .book-list{
        overflow: scroll;
    }
}

@media only screen and (max-device-width : 768px){
    .book-list{
        overflow-y: hidden;
        overflow-x: scroll;
    }
}


@media only screen and (max-width : 480px){
    .left-right-btn{
        width:10%;
    }
    .book-list{
        width:80%
    }
}