/* categoryList */
ul.cateList {
    padding: 30px 20px;
    height: 90%;
    height: calc(100% - 100px);
    overflow-y: scroll;
}
ul.cateList>li{
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 10px 0px #d8d8d8;
    margin-bottom: 20px;
}

ul.cateList li span{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    font: 24px engMed, korMed;
    color: #333;
    padding: 15px 20px;

    transition: background-color 0.5s;
}

ul.cateList li.on span{
    background-color: #3d7dff;
    color: #fff;
    border-radius: 5px 5px 0px 0px;
}
ul.cateList li img{
    width: 30px;
    height: auto;
    position: absolute;
    top: 17px;
    right: 20px;
    /* transition: 0.5s; */
}
ul.cateList li img.dropdownOn{
    display: none;
}
ul.cateList li img.dropdownOff{
    display: block;
}
ul.cateList li.on img.dropdownOn{
    display: block;
}
ul.cateList li.on img.dropdownOff{
    display: none;
}

ul.seriesList>li{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    width: 100%;
    background-color: #f9f9f9;
    font: 20px engMed, korMed;
    color: #333;
    padding: 12px 20px;
    border-bottom: 2px solid #d8d8d8;
}

ul.seriesList>li:last-child{
    border-bottom: none;
    border-radius: 0 0 5px 5px;
}

ul.seriesList li a{
    padding-left: 20px;
    background: url(../images/icon/right-arrow.png) no-repeat top 10px left;
    background-size: 10px;
    width: 100%;
}

@media screen and (max-width: 360px) {
    ul.cateList li span{
        font-size: 22px;
    }
    ul.seriesList>li{
        font-size: 18px;
    }

}

/* bookList - normal */

.bookCoverList {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 50px;
    height: 70%;
    height: calc(100% - 234px);
}
.bookCoverList a {
    width: 85%;
    height: auto;
}
.bookCoverList a img{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #999;
    transition: 0.5s;

}
.bookCoverList a.change img{
    width: auto;
    height: 100%;
}

.bookCoverList .bookListSwiper {
    width: 70%;
    max-width: 400px;
}

.bookCoverList .swiper-wrapper{

}
.bookCoverList .swiper-slide{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 400px;
}

.bookCoverList .swiper-slide-active a{
    width: 100%;
    height: auto;
}

/* bookList - Readers */

.bookLevelList ul {
    text-align: center;
    padding-bottom: 30px;
}
.bookLevelList ul li{
    float: left;
    width: 23%;
    padding: 10px 0;
    background-color: #d2d2d2;
    border-radius: 5px;
    margin-right: calc(8% / 3);
    margin-bottom: 10px;
    cursor: pointer;
}
.bookLevelList ul li:nth-child(4n){
    margin-right: 0px;
}
.bookLevelList ul li.active{
    background-color: #3d7dff;
}
.readersList{
    padding-top: 20px;
    box-shadow: 0px -10px 10px -10px #d8d8d8;
}
.bookList{
    overflow-y: scroll;
    height: 50%;
    height: calc(100% - 451px);
}

.bookList ul li{
    padding: 8px 15px;
    margin-bottom: 10px;
    word-break: keep-all;
}
.bookList ul li::after{
    content: "";
    display: block;
    clear: both;
}
.bookList ul li a{
    width: 100%;
}

.bookList ul li a .readersNum{
    float: left;
    width: 30px;
}
.bookList ul li a .readersTit{
    float: left;
    width: calc(100% - 30px);
}

@media screen and (max-width: 360px) {
    .bookLevelList ul {
        padding-bottom: 20px;
        font-size: 15px;
    }
}

/* Unit List */

.bookCover {
    font: 16px engMed, korMed;
    text-align: center;
    padding-top: 30px;
}
.bookCover img {
    width: auto;
    height: calc(100% - 554px);
    max-height: 300px;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #999;

    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.downloadBtn {
    display: block;
    text-align: center;
    padding: 15px 0;
}

.downloadBtn a span {
    padding-left: 25px;
    background: url(../images/icon/download.png) center left no-repeat;
    background-size: 15px;
}
.unitList {
    margin-top: 15px;
}
.unitList ul {
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.cdList {
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
ul.cdList li {
    float: left;
    width: 49%;
    margin-right: 2%;
    padding: 10px 0;
    cursor: pointer;
    margin-bottom: 10px;
}
ul.cdList li:nth-child(2n) {
    margin-right: 0;
}
ul.trackList li{
    float: left;
    width: 23%;
    margin-right: calc(8% / 3);
    margin-bottom: 10px;
    cursor: pointer;
}
ul.trackList li:first-child{
    width: 100%;
    margin-right: 0px;
}
ul.trackList li:nth-child(4n+1){
    margin-right: 0px;
}
ul.trackList li a{
    display: block;
    width: 100%;
    padding: 10px 5px;
}
@media screen and (max-width: 500px) {
    .bookCover {
        height: 40%;
    }
    .bookCover img {
        height: 85%;
    }
    .unitList ul.trackList {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-content: flex-start;
        -moz-align-content: flex-start;
        -ms-align-content: flex-start;
        align-content: flex-start;
        -webkit-box-align: stretch;
        -moz-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;

        height: 30%;
        height: calc(100% - 550px);
        overflow-y: auto;
    }
    ul.trackList li {
        width: 49%;
        margin-right: 2%;
    }
    ul.trackList li:nth-child(2n+1){
        margin-right: 0px;
    }

}

/* trackList  */

.bookTitWrap01{
    position: relative;
    text-align: center;
    z-index: 10;
}
.bookTitWrap01 .bookTit {
    position: absolute;
    top: 0;
    margin-top: 25px;
    z-index: 10;
    width: 100%;
}
.bookTitWrap01 .bookTit span{
    display: block;
    width: 75%;
    margin: 0 auto;
    font: 22px/1.2 engMed, korMed;
    color: #fff;
    text-shadow: 2px 2px 1px #666;
}
.audioPlayer {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* border-bottom: 2px solid #555; */
}
.audioPlayer .audioBg {
    width: 100%;
    height: 300px;
    filter: brightness(70%) blur(2px);
    -webkit-filter: brightness(70%) blur(2px);
}
.playbar {
    position: absolute;
    top: 50%;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -moz-box-justify-content: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.playbtn.on img{
    display: block;
}
.playbtn img {
    display: none;
    width: 70px;
    cursor: pointer;
}

.skipbtn {
    width: 30px;
}

.skipbtn img {
    width: 30px;
}
.jumpbtn {
    width: 35px;
    cursor: pointer;
}
.jumpbtn img {
    width: 100%;
    filter: drop-shadow(2px 2px 3px #000);
    opacity: 0.8;
}

.speed {
    display: block;
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    font: 14px engMed;
    /* text-shadow: 2px 2px 1px #666; */
}

.speed ul {
    display: flex;
}

.speed ul li {
    padding: 3px 12px;
    border: 2px solid #fff;
    border-radius: 20px;
    margin-right: 10px;
    opacity: 0.6;
    cursor: pointer;
    filter: drop-shadow(2px 2px 3px #000);
}

.speed ul li.on {
    opacity: 1;
    background-color: #124dc3;
    filter: none;
}
.speed ul li span {
    font: 12px engReg;
    margin-right: 4px;
    position: relative;
    top: -1px;
}
.speed ul li.on span {}
.time {
    display: block;
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #fff;
    font: 18px engReg;
    letter-spacing: 1px;
    text-shadow: 2px 2px 1px #666;
}
.progressbar{
    width: 100%;
    height: 7px;
    background-color: #000;
    position: absolute;
    bottom: 0;
}
.progressbar-active {

    height: 5px;
    background-color: #3d7dff;
    position: absolute;
    bottom: 0;
    z-index: 5;
}

.progressbar .ui-slider-range-min {
    height: 7px;
    position: absolute;
    background: #3d7dff;
    bottom: 0;
    z-index: 5;
}

.progressbar .ui-slider-handle {
    width: 30px;
    height:27px;
    position: absolute;
    margin-left: -10px;
    margin-top: -20px;
    cursor: pointer;
    outline: none;
}

.audioList {
    margin-top: 25px;

}
.audioList .unitTit{
    font: 22px engMed, korMed;
    text-align: center;
    color: #000;
    padding-bottom: 25px;
}
.audioList ul.audioWrap{
    height: 45%;
    height: calc(100% - 463px);
    overflow-y: scroll;
}
.audioList ul.audioWrap li{
    cursor: pointer;
    padding: 8px 15px;
    margin-bottom: 10px;
    word-break: keep-all;
}
.audioList ul.audioWrap li::after{
    content: "";
    display: block;
    clear: both;
}
.audioList ul.audioWrap li div.trackNum{
    float: left;
    width: 90px;
}
.audioList ul.audioWrap li div.trackTit{
    float: left;
    width: calc(100% - 115px);
    padding-right: 5px;
    word-break: keep-all;
    min-height: 25px;
}
.audioList ul.audioWrap li div.trackBtn{
    float: left;
}
.audioList ul.audioWrap li div.trackBtn img{
    width: 25px;
}

@media screen and (max-width: 360px) {
    .bookTitWrap01 .bookTit {
        margin-top: 20px;
    }
    .bookTitWrap01 .bookTit span {
        font-size: 20px;
    }
    .playbtn img {
        width: 65px;
    }
    .skipbtn img {
        width: 25px;
    }
    .audioList ul.audioWrap li {
        padding: 8px 12px;
    }
    .audioList ul.audioWrap li div.trackNum {
        width: 75px;
    }
    .audioList ul.audioWrap li div.trackTit {
        width: calc(100% - 95px);
    }
    .audioList ul.audioWrap li div.trackBtn img {
        width: 20px;
    }
}